From 7053a316d36dc8193eb102d0cba46f4970a05637 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Sun, 11 Jul 2021 09:25:19 -0400 Subject: delete conflicting/orphaned in pt-BR (#1421) * delete conflicting/orphaned in pt-BR * chore: remove empty line * deleted last orphaned redirects * remove deleted orphans Co-authored-by: Josiel Rocha <1158643+josielrocha@users.noreply.github.com> Co-authored-by: Josiel Rocha --- files/pt-br/_redirects.txt | 177 ------- .../cascade_and_inheritance/index.html | 129 ----- .../learn/css/building_blocks/selectors/index.html | 431 --------------- .../learn/css/first_steps/how_css_works/index.html | 127 ----- .../index.html | 114 ---- .../index.html | 108 ---- .../conflicting/learn/css/first_steps/index.html | 99 ---- .../video_and_audio_content/index.html | 241 --------- .../learn/javascript/objects/index.html | 353 ------------- .../mdn/contribute/getting_started/index.html | 135 ----- files/pt-br/conflicting/mozilla/add-ons/index.html | 264 ---------- .../mozilla/firefox/releases/index.html | 429 --------------- .../web/accessibility/aria/widgets/index.html | 73 --- .../pt-br/conflicting/web/accessibility/index.html | 56 -- .../web/api/crypto/getrandomvalues/index.html | 110 ---- .../pt-br/conflicting/web/api/cryptokey/index.html | 114 ---- .../index.html | 119 ----- .../index.html | 112 ---- .../index.html | 125 ----- .../web/api/document_object_model/index.html | 90 ---- .../api/globaleventhandlers/onscroll/index.html | 100 ---- .../web/api/html_drag_and_drop_api/index.html | 12 - files/pt-br/conflicting/web/api/index.html | 81 --- files/pt-br/conflicting/web/api/url/index.html | 102 ---- .../conflicting/web/api/webrtc_api/index.html | 82 --- .../web/api/windoworworkerglobalscope/index.html | 122 ----- .../index.html | 118 ----- .../index.html | 135 ----- .../basic_concepts_of_flexbox/index.html | 329 ------------ files/pt-br/conflicting/web/css/cursor/index.html | 10 - files/pt-br/conflicting/web/guide/index.html | 96 ---- .../pt-br/conflicting/web/guide/mobile/index.html | 18 - files/pt-br/conflicting/web/http/cors/index.html | 214 -------- .../equality_comparisons_and_sameness/index.html | 260 --------- .../reference/global_objects/boolean/index.html | 113 ---- .../reference/global_objects/function/index.html | 94 ---- .../global_objects/intl/numberformat/index.html | 127 ----- .../reference/global_objects/map/index.html | 137 ----- .../reference/global_objects/number/index.html | 141 ----- .../reference/global_objects/object/index.html | 228 -------- .../reference/global_objects/promise/index.html | 115 ---- .../reference/global_objects/set/index.html | 86 --- .../reference/global_objects/string/index.html | 176 ------- .../reference/global_objects/weakmap/index.html | 119 ----- .../web/javascript/reference/operators/index.html | 330 ------------ .../reference/operators/spread_syntax/index.html | 202 ------- .../index.html | 251 --------- .../index.html | 557 -------------------- .../index.html | 345 ------------ .../reference/statements/switch/index.html | 188 ------- .../web/progressive_web_apps/index.html | 69 --- .../index.html" | 22 - files/pt-br/orphaned/hello_world_rust/index.html | 192 ------- files/pt-br/orphaned/instalando_rust/index.html | 133 ----- .../orphaned/learn/how_to_contribute/index.html | 91 ---- .../learn/html/forms/html5_updates/index.html | 113 ---- files/pt-br/orphaned/mdn/community/index.html | 43 -- .../mdn/community/whats_happening/index.html | 38 -- .../mdn/community/working_in_community/index.html | 101 ---- .../howto/create_an_mdn_account/index.html | 44 -- .../howto/do_a_technical_review/index.html | 53 -- .../howto/do_an_editorial_review/index.html | 56 -- .../howto/set_the_summary_for_a_page/index.html | 62 --- .../howto/tag_javascript_pages/index.html | 85 --- .../index.html | 115 ---- .../cross-team_collaboration_tactics/index.html | 66 --- files/pt-br/orphaned/mdn/dashboards/index.html | 18 - files/pt-br/orphaned/mdn/editor/basics/index.html | 66 --- files/pt-br/orphaned/mdn/editor/index.html | 11 - .../mdn/tools/page_regeneration/index.html | 33 -- .../temporary_installation_in_firefox/index.html | 96 ---- .../tools/add-ons/dom_inspector/index.html | 82 --- files/pt-br/orphaned/tools/add-ons/index.html | 22 - files/pt-br/orphaned/tools/css_coverage/index.html | 137 ----- .../disable_breakpoints/index.html | 20 - .../tools/debugger_(before_firefox_52)/index.html | 59 --- .../jaws_issues_with_firefox/index.html | 12 - .../orphaned/web/api/abstractworker/index.html | 104 ---- .../web/api/abstractworker/onerror/index.html | 105 ---- .../web/api/ambient_light_events/index.html | 117 ----- files/pt-br/orphaned/web/api/body/index.html | 98 ---- files/pt-br/orphaned/web/api/body/json/index.html | 90 ---- .../orphaned/web/api/childnode/after/index.html | 186 ------- files/pt-br/orphaned/web/api/childnode/index.html | 79 --- .../orphaned/web/api/childnode/remove/index.html | 101 ---- .../api/document_object_model/events/index.html | 83 --- .../api/htmlorforeignelement/dataset/index.html | 94 ---- .../basic_concepts_behind_indexeddb/index.html | 250 --------- .../index.html" | 56 -- .../web/api/parentnode/children/index.html | 132 ----- files/pt-br/orphaned/web/api/parentnode/index.html | 164 ------ .../web/api/parentnode/queryselector/index.html | 100 ---- .../web/api/window/ondevicelight/index.html | 100 ---- .../pt-br/orphaned/web/css/image-set()/index.html | 77 --- .../orphaned/web/css/radial-gradient()/index.html | 210 -------- .../web/css/repeating-linear-gradient()/index.html | 154 ------ .../index.html" | 21 - .../creating_and_triggering_events/index.html | 146 ------ .../web/guide/events/event_handlers/index.html | 165 ------ files/pt-br/orphaned/web/guide/events/index.html | 37 -- .../web/guide/events/mutation_events/index.html | 63 --- .../overview_of_events_and_handlers/index.html | 133 ----- .../pt-br/orphaned/web/guide/html/html5/index.html | 300 ----------- .../html/html5/introduction_to_html5/index.html | 24 - .../using_html_sections_and_outlines/index.html | 411 --------------- .../orphaned/web/html/element/command/index.html | 130 ----- files/pt-br/orphaned/web/html/favicon/index.html | 33 -- .../web/html/preloading_content/index.html | 238 --------- .../cole\303\247\303\265es_chaveadas/index.html" | 150 ------ .../javascript/guide/sintaxe_e_tipos/index.html | 584 --------------------- .../global_objects/array/prototype/index.html | 207 -------- .../global_objects/bigint/prototype/index.html | 60 --- .../reference/global_objects/map/clear/index.html | 120 ----- .../reference/global_objects/map/delete/index.html | 121 ----- .../global_objects/map/entries/index.html | 121 ----- .../global_objects/map/foreach/index.html | 147 ------ .../reference/global_objects/map/get/index.html | 75 --- .../reference/global_objects/map/has/index.html | 77 --- .../reference/global_objects/map/index.html | 226 -------- .../reference/global_objects/map/keys/index.html | 116 ---- .../reference/global_objects/map/set/index.html | 138 ----- .../reference/global_objects/map/size/index.html | 111 ---- .../reference/global_objects/map/values/index.html | 75 --- .../operators/pipeline_operator/index.html | 66 --- files/pt-br/orphaned/web/reference/api/index.html | 62 --- files/pt-br/orphaned/web/reference/index.html | 30 -- .../information_security_basics/index.html | 33 -- .../web/svg/element/color-profile/index.html | 96 ---- 128 files changed, 16749 deletions(-) delete mode 100644 files/pt-br/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html delete mode 100644 files/pt-br/conflicting/learn/css/building_blocks/selectors/index.html delete mode 100644 files/pt-br/conflicting/learn/css/first_steps/how_css_works/index.html delete mode 100644 files/pt-br/conflicting/learn/css/first_steps/how_css_works_199dae2aa1447fa94457a213c989744d/index.html delete mode 100644 files/pt-br/conflicting/learn/css/first_steps/how_css_works_61240ddc35a4ddd533ea33cc8ccf1c87/index.html delete mode 100644 files/pt-br/conflicting/learn/css/first_steps/index.html delete mode 100644 files/pt-br/conflicting/learn/html/multimedia_and_embedding/video_and_audio_content/index.html delete mode 100644 files/pt-br/conflicting/learn/javascript/objects/index.html delete mode 100644 files/pt-br/conflicting/mdn/contribute/getting_started/index.html delete mode 100644 files/pt-br/conflicting/mozilla/add-ons/index.html delete mode 100644 files/pt-br/conflicting/mozilla/firefox/releases/index.html delete mode 100644 files/pt-br/conflicting/web/accessibility/aria/widgets/index.html delete mode 100644 files/pt-br/conflicting/web/accessibility/index.html delete mode 100644 files/pt-br/conflicting/web/api/crypto/getrandomvalues/index.html delete mode 100644 files/pt-br/conflicting/web/api/cryptokey/index.html delete mode 100644 files/pt-br/conflicting/web/api/cryptokey_33bd21ca8f20b4cd8c7b8c762e2fc597/index.html delete mode 100644 files/pt-br/conflicting/web/api/cryptokey_53ae81677f4d9298717f2f245ae4da0d/index.html delete mode 100644 files/pt-br/conflicting/web/api/cryptokey_f39d256ef7fbd1cf0a1f26de1e887ae7/index.html delete mode 100644 files/pt-br/conflicting/web/api/document_object_model/index.html delete mode 100644 files/pt-br/conflicting/web/api/globaleventhandlers/onscroll/index.html delete mode 100644 files/pt-br/conflicting/web/api/html_drag_and_drop_api/index.html delete mode 100644 files/pt-br/conflicting/web/api/index.html delete mode 100644 files/pt-br/conflicting/web/api/url/index.html delete mode 100644 files/pt-br/conflicting/web/api/webrtc_api/index.html delete mode 100644 files/pt-br/conflicting/web/api/windoworworkerglobalscope/index.html delete mode 100644 files/pt-br/conflicting/web/api/windoworworkerglobalscope_e2691f7ad05781a30c5fc5bb3b3f633a/index.html delete mode 100644 files/pt-br/conflicting/web/api_dd04ca1265cb79b990b8120e5f5070d3/index.html delete mode 100644 files/pt-br/conflicting/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html delete mode 100644 files/pt-br/conflicting/web/css/cursor/index.html delete mode 100644 files/pt-br/conflicting/web/guide/index.html delete mode 100644 files/pt-br/conflicting/web/guide/mobile/index.html delete mode 100644 files/pt-br/conflicting/web/http/cors/index.html delete mode 100644 files/pt-br/conflicting/web/javascript/equality_comparisons_and_sameness/index.html delete mode 100644 files/pt-br/conflicting/web/javascript/reference/global_objects/boolean/index.html delete mode 100644 files/pt-br/conflicting/web/javascript/reference/global_objects/function/index.html delete mode 100644 files/pt-br/conflicting/web/javascript/reference/global_objects/intl/numberformat/index.html delete mode 100644 files/pt-br/conflicting/web/javascript/reference/global_objects/map/index.html delete mode 100644 files/pt-br/conflicting/web/javascript/reference/global_objects/number/index.html delete mode 100644 files/pt-br/conflicting/web/javascript/reference/global_objects/object/index.html delete mode 100644 files/pt-br/conflicting/web/javascript/reference/global_objects/promise/index.html delete mode 100644 files/pt-br/conflicting/web/javascript/reference/global_objects/set/index.html delete mode 100644 files/pt-br/conflicting/web/javascript/reference/global_objects/string/index.html delete mode 100644 files/pt-br/conflicting/web/javascript/reference/global_objects/weakmap/index.html delete mode 100644 files/pt-br/conflicting/web/javascript/reference/operators/index.html delete mode 100644 files/pt-br/conflicting/web/javascript/reference/operators/spread_syntax/index.html delete mode 100644 files/pt-br/conflicting/web/javascript/reference/operators_0d2e4b8154642b5a9dbd76a2a48cf96a/index.html delete mode 100644 files/pt-br/conflicting/web/javascript/reference/operators_7c8eb9475d97a4a734c5991857698560/index.html delete mode 100644 files/pt-br/conflicting/web/javascript/reference/operators_8fa8b34b0547a749514637a15d386886/index.html delete mode 100644 files/pt-br/conflicting/web/javascript/reference/statements/switch/index.html delete mode 100644 files/pt-br/conflicting/web/progressive_web_apps/index.html delete mode 100644 "files/pt-br/orphaned/glossary/tratando_formul\303\241rios_com_php/index.html" delete mode 100644 files/pt-br/orphaned/hello_world_rust/index.html delete mode 100644 files/pt-br/orphaned/instalando_rust/index.html delete mode 100644 files/pt-br/orphaned/learn/how_to_contribute/index.html delete mode 100644 files/pt-br/orphaned/learn/html/forms/html5_updates/index.html delete mode 100644 files/pt-br/orphaned/mdn/community/index.html delete mode 100644 files/pt-br/orphaned/mdn/community/whats_happening/index.html delete mode 100644 files/pt-br/orphaned/mdn/community/working_in_community/index.html delete mode 100644 files/pt-br/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html delete mode 100644 files/pt-br/orphaned/mdn/contribute/howto/do_a_technical_review/index.html delete mode 100644 files/pt-br/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html delete mode 100644 files/pt-br/orphaned/mdn/contribute/howto/set_the_summary_for_a_page/index.html delete mode 100644 files/pt-br/orphaned/mdn/contribute/howto/tag_javascript_pages/index.html delete mode 100644 files/pt-br/orphaned/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html delete mode 100644 files/pt-br/orphaned/mdn/contribute/processes/cross-team_collaboration_tactics/index.html delete mode 100644 files/pt-br/orphaned/mdn/dashboards/index.html delete mode 100644 files/pt-br/orphaned/mdn/editor/basics/index.html delete mode 100644 files/pt-br/orphaned/mdn/editor/index.html delete mode 100644 files/pt-br/orphaned/mdn/tools/page_regeneration/index.html delete mode 100644 files/pt-br/orphaned/mozilla/add-ons/webextensions/temporary_installation_in_firefox/index.html delete mode 100644 files/pt-br/orphaned/tools/add-ons/dom_inspector/index.html delete mode 100644 files/pt-br/orphaned/tools/add-ons/index.html delete mode 100644 files/pt-br/orphaned/tools/css_coverage/index.html delete mode 100644 files/pt-br/orphaned/tools/debugger_(before_firefox_52)/disable_breakpoints/index.html delete mode 100644 files/pt-br/orphaned/tools/debugger_(before_firefox_52)/index.html delete mode 100644 files/pt-br/orphaned/web/accessibility/jaws_issues_with_firefox/index.html delete mode 100644 files/pt-br/orphaned/web/api/abstractworker/index.html delete mode 100644 files/pt-br/orphaned/web/api/abstractworker/onerror/index.html delete mode 100644 files/pt-br/orphaned/web/api/ambient_light_events/index.html delete mode 100644 files/pt-br/orphaned/web/api/body/index.html delete mode 100644 files/pt-br/orphaned/web/api/body/json/index.html delete mode 100644 files/pt-br/orphaned/web/api/childnode/after/index.html delete mode 100644 files/pt-br/orphaned/web/api/childnode/index.html delete mode 100644 files/pt-br/orphaned/web/api/childnode/remove/index.html delete mode 100644 files/pt-br/orphaned/web/api/document_object_model/events/index.html delete mode 100644 files/pt-br/orphaned/web/api/htmlorforeignelement/dataset/index.html delete mode 100644 files/pt-br/orphaned/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html delete mode 100644 "files/pt-br/orphaned/web/api/node/entendendo_o_uso_do_m\303\251todo_appendchild-javascript/index.html" delete mode 100644 files/pt-br/orphaned/web/api/parentnode/children/index.html delete mode 100644 files/pt-br/orphaned/web/api/parentnode/index.html delete mode 100644 files/pt-br/orphaned/web/api/parentnode/queryselector/index.html delete mode 100644 files/pt-br/orphaned/web/api/window/ondevicelight/index.html delete mode 100644 files/pt-br/orphaned/web/css/image-set()/index.html delete mode 100644 files/pt-br/orphaned/web/css/radial-gradient()/index.html delete mode 100644 files/pt-br/orphaned/web/css/repeating-linear-gradient()/index.html delete mode 100644 "files/pt-br/orphaned/web/guide/css/css_media_queries_(consultas_de_m\303\255dia_em_css)/index.html" delete mode 100644 files/pt-br/orphaned/web/guide/events/creating_and_triggering_events/index.html delete mode 100644 files/pt-br/orphaned/web/guide/events/event_handlers/index.html delete mode 100644 files/pt-br/orphaned/web/guide/events/index.html delete mode 100644 files/pt-br/orphaned/web/guide/events/mutation_events/index.html delete mode 100644 files/pt-br/orphaned/web/guide/events/overview_of_events_and_handlers/index.html delete mode 100644 files/pt-br/orphaned/web/guide/html/html5/index.html delete mode 100644 files/pt-br/orphaned/web/guide/html/html5/introduction_to_html5/index.html delete mode 100644 files/pt-br/orphaned/web/guide/html/using_html_sections_and_outlines/index.html delete mode 100644 files/pt-br/orphaned/web/html/element/command/index.html delete mode 100644 files/pt-br/orphaned/web/html/favicon/index.html delete mode 100644 files/pt-br/orphaned/web/html/preloading_content/index.html delete mode 100644 "files/pt-br/orphaned/web/javascript/guide/cole\303\247\303\265es_chaveadas/index.html" delete mode 100644 files/pt-br/orphaned/web/javascript/guide/sintaxe_e_tipos/index.html delete mode 100644 files/pt-br/orphaned/web/javascript/reference/global_objects/array/prototype/index.html delete mode 100644 files/pt-br/orphaned/web/javascript/reference/global_objects/bigint/prototype/index.html delete mode 100644 files/pt-br/orphaned/web/javascript/reference/global_objects/map/clear/index.html delete mode 100644 files/pt-br/orphaned/web/javascript/reference/global_objects/map/delete/index.html delete mode 100644 files/pt-br/orphaned/web/javascript/reference/global_objects/map/entries/index.html delete mode 100644 files/pt-br/orphaned/web/javascript/reference/global_objects/map/foreach/index.html delete mode 100644 files/pt-br/orphaned/web/javascript/reference/global_objects/map/get/index.html delete mode 100644 files/pt-br/orphaned/web/javascript/reference/global_objects/map/has/index.html delete mode 100644 files/pt-br/orphaned/web/javascript/reference/global_objects/map/index.html delete mode 100644 files/pt-br/orphaned/web/javascript/reference/global_objects/map/keys/index.html delete mode 100644 files/pt-br/orphaned/web/javascript/reference/global_objects/map/set/index.html delete mode 100644 files/pt-br/orphaned/web/javascript/reference/global_objects/map/size/index.html delete mode 100644 files/pt-br/orphaned/web/javascript/reference/global_objects/map/values/index.html delete mode 100644 files/pt-br/orphaned/web/javascript/reference/operators/pipeline_operator/index.html delete mode 100644 files/pt-br/orphaned/web/reference/api/index.html delete mode 100644 files/pt-br/orphaned/web/reference/index.html delete mode 100644 files/pt-br/orphaned/web/security/information_security_basics/index.html delete mode 100644 files/pt-br/orphaned/web/svg/element/color-profile/index.html (limited to 'files/pt-br') diff --git a/files/pt-br/_redirects.txt b/files/pt-br/_redirects.txt index 9485e70753..bc88655535 100644 --- a/files/pt-br/_redirects.txt +++ b/files/pt-br/_redirects.txt @@ -21,7 +21,6 @@ /pt-BR/docs/Aprender/CSS/Introduction_to_CSS/como_CSS_funciona /en-US/docs/Learn/CSS/First_steps/How_CSS_works /pt-BR/docs/Aprender/CSS/Introduction_to_CSS/sintaxe /en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured /pt-BR/docs/Aprender/CSS/Styling_boxes /en-US/docs/Learn/CSS/Building_blocks -/pt-BR/docs/Aprender/Como_contribuir /pt-BR/docs/orphaned/Learn/How_to_contribute /pt-BR/docs/Aprender/Design_e_acessibilidade /pt-BR/docs/Learn/Common_questions /pt-BR/docs/Aprender/Ferramentas_e_teste /pt-BR/docs/Learn/Tools_and_testing /pt-BR/docs/Aprender/Front-end_web_developer /pt-BR/docs/Learn/Front-end_web_developer @@ -82,31 +81,24 @@ /pt-BR/docs/CSS/At-rule /pt-BR/docs/Web/CSS/At-rule /pt-BR/docs/CSS/CSS_Reference /pt-BR/docs/Web/CSS/Reference /pt-BR/docs/CSS/Especificação /pt-BR/docs/Web/CSS/Specificity -/pt-BR/docs/CSS/Getting_Started /pt-BR/docs/conflicting/Learn/CSS/First_steps /pt-BR/docs/CSS/Getting_Started/JavaScript /pt-BR/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents /pt-BR/docs/CSS/Multiple_backgrounds /pt-BR/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds -/pt-BR/docs/CSS/Primeiros_Passos /pt-BR/docs/conflicting/Learn/CSS/First_steps /pt-BR/docs/CSS/Specificity /pt-BR/docs/Web/CSS/Specificity /pt-BR/docs/CSS/Usando_animacoes_CSS /pt-BR/docs/Web/CSS/CSS_Animations/Using_CSS_animations -/pt-BR/docs/CSS/Usando_caixas_flexiveis_css /pt-BR/docs/conflicting/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox /pt-BR/docs/CSS/Using_CSS_animations /pt-BR/docs/Web/CSS/CSS_Animations/Using_CSS_animations /pt-BR/docs/CSS/Using_CSS_transforms /pt-BR/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms /pt-BR/docs/CSS/display /pt-BR/docs/Web/CSS/display /pt-BR/docs/CSS/overflow /pt-BR/docs/Web/CSS/overflow /pt-BR/docs/CSS/regra at /pt-BR/docs/Web/CSS/At-rule -/pt-BR/docs/CSS/repeating-linear-gradient /pt-BR/docs/orphaned/Web/CSS/repeating-linear-gradient() /pt-BR/docs/CSS/sintaxe /pt-BR/docs/Web/CSS/Syntax /pt-BR/docs/CSS/text-overflow /pt-BR/docs/Web/CSS/text-overflow /pt-BR/docs/CSS/text-rendering /pt-BR/docs/Web/CSS/text-rendering /pt-BR/docs/CSS/transform /pt-BR/docs/Web/CSS/transform /pt-BR/docs/CSS/word-wrap /pt-BR/docs/Web/CSS/overflow-wrap -/pt-BR/docs/Construindo_um_complemento /pt-BR/docs/conflicting/Mozilla/Add-ons -/pt-BR/docs/DOM /pt-BR/docs/conflicting/Web/API/Document_Object_Model /pt-BR/docs/DOM/BatteryManager.charging /pt-BR/docs/Web/API/BatteryManager/charging /pt-BR/docs/DOM/Document.querySelector /pt-BR/docs/Web/API/Document/querySelector /pt-BR/docs/DOM/Document.querySelectorAll /pt-BR/docs/Web/API/Document/querySelectorAll /pt-BR/docs/DOM/Referencia_do_DOM /pt-BR/docs/Web/API/Document_Object_Model -/pt-BR/docs/DOM/Referencia_do_DOM/Events /pt-BR/docs/orphaned/Web/API/Document_Object_Model/Events /pt-BR/docs/DOM/Referencia_do_DOM/Examples /pt-BR/docs/Web/API/Document_Object_Model/Examples /pt-BR/docs/DOM/Referencia_do_DOM/How_to_create_a_DOM_tree /pt-BR/docs/Web/API/Document_object_model/How_to_create_a_DOM_tree /pt-BR/docs/DOM/Referencia_do_DOM/Introdução /pt-BR/docs/Web/API/Document_Object_Model/Introduction @@ -116,12 +108,9 @@ /pt-BR/docs/DOM/element.addEventListener /pt-BR/docs/Web/API/EventTarget/addEventListener /pt-BR/docs/DOM/element.addEventListener-redirect-1 /pt-BR/docs/Web/API/EventTarget/addEventListener /pt-BR/docs/DOM/window.URL.createObjectURL /pt-BR/docs/Web/API/URL/createObjectURl -/pt-BR/docs/DOM/window.onscroll /pt-BR/docs/conflicting/Web/API/GlobalEventHandlers/onscroll -/pt-BR/docs/DragDrop /pt-BR/docs/conflicting/Web/API/HTML_Drag_and_Drop_API /pt-BR/docs/DragDrop/Arrastar_e_Soltar /pt-BR/docs/Web/API/HTML_Drag_and_Drop_API /pt-BR/docs/DragDrop/Drag_and_Drop /pt-BR/docs/Web/API/HTML_Drag_and_Drop_API /pt-BR/docs/DragDrop/Drag_and_Drop/Arrastar_e_soltar_arquivos /pt-BR/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop -/pt-BR/docs/Eventos_on-line_off-line /pt-BR/docs/orphaned/Web/API/NavigatorOnLine/Online_and_offline_events /pt-BR/docs/Games/Introduction_to_HTML5_Game_Gevelopment_(summary) /pt-BR/docs/Games/Introduction_to_HTML5_Game_Development /pt-BR/docs/Glossario /pt-BR/docs/Glossary /pt-BR/docs/Glossario/404 /pt-BR/docs/Glossary/404 @@ -254,7 +243,6 @@ /pt-BR/docs/Glossario/TLS /pt-BR/docs/Glossary/TLS /pt-BR/docs/Glossario/Tag /pt-BR/docs/Glossary/Tag /pt-BR/docs/Glossario/Three_js /pt-BR/docs/Glossary/Three_js -/pt-BR/docs/Glossario/Tratando_Formulários_com_PHP /pt-BR/docs/orphaned/Glossary/Tratando_Formulários_com_PHP /pt-BR/docs/Glossario/Truthy /pt-BR/docs/Glossary/Truthy /pt-BR/docs/Glossario/URI /pt-BR/docs/Glossary/URI /pt-BR/docs/Glossario/URL /pt-BR/docs/Glossary/URL @@ -304,7 +292,6 @@ /pt-BR/docs/HTML/Element/article /pt-BR/docs/Web/HTML/Element/article /pt-BR/docs/HTML/Element/aside /pt-BR/docs/Web/HTML/Element/aside /pt-BR/docs/HTML/Element/canvas /pt-BR/docs/Web/HTML/Element/canvas -/pt-BR/docs/HTML/Element/command /pt-BR/docs/orphaned/Web/HTML/Element/command /pt-BR/docs/HTML/Element/data /pt-BR/docs/Web/HTML/Element/data /pt-BR/docs/HTML/Element/datalist /pt-BR/docs/Web/HTML/Element/datalist /pt-BR/docs/HTML/Element/details /pt-BR/docs/Web/HTML/Element/details @@ -331,22 +318,14 @@ /pt-BR/docs/HTML/Element/table /pt-BR/docs/Web/HTML/Element/table /pt-BR/docs/HTML/Element/wbr /pt-BR/docs/Web/HTML/Element/wbr /pt-BR/docs/HTML/Elementos HTML /pt-BR/docs/Web/HTML/Element -/pt-BR/docs/HTML/Forms_in_HTML /pt-BR/docs/orphaned/Learn/HTML/Forms/HTML5_updates -/pt-BR/docs/HTML/Formularios_em_HTML /pt-BR/docs/orphaned/Learn/HTML/Forms/HTML5_updates -/pt-BR/docs/HTML/HTML5 /pt-BR/docs/orphaned/Web/Guide/HTML/HTML5 /pt-BR/docs/HTML/HTML5/HTML5_element_list /pt-BR/docs/Web/HTML/Element -/pt-BR/docs/HTML/HTML5/Introduction_to_HTML5 /pt-BR/docs/orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5 -/pt-BR/docs/HTML/HTML5/Introdução_ao_HTML5 /pt-BR/docs/orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5 /pt-BR/docs/HTML/HTML_Elements /pt-BR/docs/Web/HTML/Element /pt-BR/docs/HTML/HTML_Elements/time /pt-BR/docs/Web/HTML/Element/time /pt-BR/docs/HTML/Introducao /pt-BR/docs/Learn/HTML/Introduction_to_HTML /pt-BR/docs/HTML/Introduction /pt-BR/docs/Learn/HTML/Introduction_to_HTML /pt-BR/docs/HTML/Optimizing_Your_Pages_for_Speculative_Parsing /pt-BR/docs/Glossary/speculative_parsing -/pt-BR/docs/Hello_World_Rust /pt-BR/docs/orphaned/Hello_World_Rust /pt-BR/docs/IndexedDB /pt-BR/docs/Web/API/IndexedDB_API -/pt-BR/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB /pt-BR/docs/orphaned/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB /pt-BR/docs/IndexedDB/Usando_IndexedDB /pt-BR/docs/Web/API/IndexedDB_API/Using_IndexedDB -/pt-BR/docs/Instalando_Rust /pt-BR/docs/orphaned/Instalando_Rust /pt-BR/docs/JSON /pt-BR/docs/Glossary/JSON /pt-BR/docs/JavaScript /pt-BR/docs/Web/JavaScript /pt-BR/docs/JavaScript/A_re-introduction_to_JavaScript /pt-BR/docs/Web/JavaScript/A_re-introduction_to_JavaScript @@ -358,14 +337,12 @@ /pt-BR/docs/JavaScript/Guide/Detalhes_do_Modelo_do_Objeto /pt-BR/docs/Web/JavaScript/Guide/Details_of_the_Object_Model /pt-BR/docs/JavaScript/Guide/Expressions_and_Operators /pt-BR/docs/Web/JavaScript/Guide/Expressions_and_Operators /pt-BR/docs/JavaScript/Guide/Herança_Revisitada /pt-BR/docs/Web/JavaScript/Inheritance_and_the_prototype_chain -/pt-BR/docs/JavaScript/Guide/Igualdade /pt-BR/docs/conflicting/Web/JavaScript/Equality_comparisons_and_sameness /pt-BR/docs/JavaScript/Guide/Inheritance_Revisited /pt-BR/docs/Web/JavaScript/Inheritance_and_the_prototype_chain /pt-BR/docs/JavaScript/Guide/JavaScript_Visão_Geral /pt-BR/docs/Web/JavaScript/Guide/Introduction /pt-BR/docs/JavaScript/Guide/Regular_Expressions /pt-BR/docs/Web/JavaScript/Guide/Regular_Expressions /pt-BR/docs/JavaScript/Guide/Trabalhando_com_Objetos /pt-BR/docs/Web/JavaScript/Guide/Working_with_Objects /pt-BR/docs/JavaScript/Guide/Valores,_variáveis_e_literais /pt-BR/docs/Web/JavaScript/Guide/Grammar_and_types /pt-BR/docs/JavaScript/Guide/Values,_variables,_and_literals /pt-BR/docs/Web/JavaScript/Guide/Grammar_and_types -/pt-BR/docs/JavaScript/Introduction_to_Object-Oriented_JavaScript /pt-BR/docs/conflicting/Learn/JavaScript/Objects /pt-BR/docs/JavaScript/JavaScript_technologies_overview /pt-BR/docs/Web/JavaScript/JavaScript_technologies_overview /pt-BR/docs/JavaScript/Outras_ferramentas_JavaScript /pt-BR/docs/Tools /pt-BR/docs/JavaScript/Reference /pt-BR/docs/Web/JavaScript/Reference @@ -387,7 +364,6 @@ /pt-BR/docs/JavaScript/Reference/Global_Objects/String /pt-BR/docs/Web/JavaScript/Reference/Global_Objects/String /pt-BR/docs/JavaScript/Reference/Global_Objects/String/indexOf /pt-BR/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf /pt-BR/docs/JavaScript/Reference/Global_Objects/WeakMap /pt-BR/docs/Web/JavaScript/Reference/Global_Objects/WeakMap -/pt-BR/docs/JavaScript/Reference/Global_Objects/WeakMap/prototype /pt-BR/docs/conflicting/Web/JavaScript/Reference/Global_Objects/WeakMap /pt-BR/docs/JavaScript/Reference/Global_Objects/isNaN /pt-BR/docs/Web/JavaScript/Reference/Global_Objects/isNaN /pt-BR/docs/JavaScript/Reference/Global_Objects/parseInt /pt-BR/docs/Web/JavaScript/Reference/Global_Objects/parseInt /pt-BR/docs/JavaScript/Reference/Operators /pt-BR/docs/Web/JavaScript/Reference/Operators @@ -435,14 +411,8 @@ /pt-BR/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Comecando_com_React /pt-BR/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started /pt-BR/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_iniciando /pt-BR/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started /pt-BR/docs/Localização /pt-BR/docs/Glossary/Localization -/pt-BR/docs/MDN/Comunidade /pt-BR/docs/orphaned/MDN/Community -/pt-BR/docs/MDN/Comunidade/Trabalhando_em_comunidade /pt-BR/docs/orphaned/MDN/Community/Working_in_community -/pt-BR/docs/MDN/Comunidade/Whats_happening /pt-BR/docs/orphaned/MDN/Community/Whats_happening -/pt-BR/docs/MDN/Contribute/Collaboration_tactics /pt-BR/docs/orphaned/MDN/Contribute/Processes/Cross-team_collaboration_tactics /pt-BR/docs/MDN/Contribute/Content /pt-BR/docs/MDN/Guidelines /pt-BR/docs/MDN/Contribute/Content/Style_guide /pt-BR/docs/MDN/Guidelines/Writing_style_guide -/pt-BR/docs/MDN/Contribute/Editor /pt-BR/docs/orphaned/MDN/Editor -/pt-BR/docs/MDN/Contribute/Editor/Basics /pt-BR/docs/orphaned/MDN/Editor/Basics /pt-BR/docs/MDN/Contribute/Estruturas /pt-BR/docs/MDN/Structures /pt-BR/docs/MDN/Contribute/Estruturas/Compatibility_tables /pt-BR/docs/MDN/Structures/Compatibility_tables /pt-BR/docs/MDN/Contribute/Estruturas/Macros /pt-BR/docs/MDN/Structures/Macros @@ -450,32 +420,20 @@ /pt-BR/docs/MDN/Contribute/Tools /pt-BR/docs/MDN/Tools /pt-BR/docs/MDN/Contribute/Tools/KumaScript /pt-BR/docs/MDN/Tools/KumaScript /pt-BR/docs/MDN/Contribute/Tools/KumaScript/Solucionando_problemas_de_erros_de_KumaScript /pt-BR/docs/MDN/Tools/KumaScript/Troubleshooting -/pt-BR/docs/MDN/Contribute/Tools/Page_regeneration /pt-BR/docs/orphaned/MDN/Tools/Page_regeneration /pt-BR/docs/MDN/Contribute/criando_e_editando_paginas /pt-BR/docs/MDN/Contribute/Howto/Create_and_edit_pages /pt-BR/docs/MDN/Contribute/guia /pt-BR/docs/MDN/Contribute/Howto /pt-BR/docs/MDN/Contribute/guia/Como-marcar-as-paginas-corretamente /pt-BR/docs/MDN/Contribute/Howto/Tag /pt-BR/docs/MDN/Contribute/guia/Converter_exemplos_codigo_para_ao_vivo /pt-BR/docs/MDN/Contribute/Howto/Convert_code_samples_to_be_live -/pt-BR/docs/MDN/Contribute/guia/Create_an_MDN_account /pt-BR/docs/orphaned/MDN/Contribute/Howto/Create_an_MDN_account /pt-BR/docs/MDN/Contribute/guia/Create_an_interactive_exercise_to_help_learning_the_web /pt-BR/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web /pt-BR/docs/MDN/Contribute/guia/Create_an_interactive_exercise_to_help_learning_the_web/distant_example /pt-BR/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web/distant_example -/pt-BR/docs/MDN/Contribute/guia/Do_a_technical_review /pt-BR/docs/orphaned/MDN/Contribute/Howto/Do_a_technical_review -/pt-BR/docs/MDN/Contribute/guia/Do_an_editorial_review /pt-BR/docs/orphaned/MDN/Contribute/Howto/Do_an_editorial_review -/pt-BR/docs/MDN/Contribute/guia/Escreva_um_artigo_para_ajudar_aprender_sobre_a_Web /pt-BR/docs/orphaned/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web -/pt-BR/docs/MDN/Contribute/guia/Set_the_summary_for_a_page /pt-BR/docs/orphaned/MDN/Contribute/Howto/Set_the_summary_for_a_page -/pt-BR/docs/MDN/Contribute/guia/Tag_JavaScript_pages /pt-BR/docs/orphaned/MDN/Contribute/Howto/Tag_JavaScript_pages -/pt-BR/docs/MDN/Editor /pt-BR/docs/orphaned/MDN/Editor -/pt-BR/docs/MDN/Editor/Basics /pt-BR/docs/orphaned/MDN/Editor/Basics /pt-BR/docs/MDN/Feedback /pt-BR/docs/MDN/Contribute/Feedback /pt-BR/docs/MDN/Guidelines/Style_guide /pt-BR/docs/MDN/Guidelines/Writing_style_guide /pt-BR/docs/MDN/Kuma /pt-BR/docs/MDN/Yari -/pt-BR/docs/MDN/Paineis /pt-BR/docs/orphaned/MDN/Dashboards /pt-BR/docs/MDN/Primeiros_Passos /pt-BR/docs/MDN/Contribute/Getting_started /pt-BR/docs/MDN/Tools/KumaScript/Solucionando_problemas_de_erros_de_KumaScript /pt-BR/docs/MDN/Tools/KumaScript/Troubleshooting -/pt-BR/docs/MDN/Tools/Page_regeneration /pt-BR/docs/orphaned/MDN/Tools/Page_regeneration /pt-BR/docs/MDN/guia_usuário /pt-BR/docs/MDN/Tools /pt-BR/docs/Mozilla/Add-ons/WebExtensions/API/tema /pt-BR/docs/Mozilla/Add-ons/WebExtensions/API/theme /pt-BR/docs/Mozilla/Add-ons/WebExtensions/Anatomia_de_uma_WebExtension /pt-BR/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension -/pt-BR/docs/Mozilla/Add-ons/WebExtensions/Empacotando_e_instalando /pt-BR/docs/orphaned/Mozilla/Add-ons/WebExtensions/Temporary_Installation_in_Firefox /pt-BR/docs/Mozilla/Add-ons/WebExtensions/O_que_vem_a_seguir_ /pt-BR/docs/Mozilla/Add-ons/WebExtensions/What_next_ /pt-BR/docs/Mozilla/Add-ons/WebExtensions/Passo-a-Passo /pt-BR/docs/Mozilla/Add-ons/WebExtensions/Your_second_WebExtension /pt-BR/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissões /pt-BR/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions @@ -484,27 +442,16 @@ /pt-BR/docs/Mozilla/Add-ons/WebExtensions/user_interface/Itens_do_menu_de_contexto /pt-BR/docs/Mozilla/Add-ons/WebExtensions/user_interface/Context_menu_items /pt-BR/docs/Mozilla/Firefox/Novas_funcionalidades /pt-BR/docs/Mozilla/Firefox/Experimental_features /pt-BR/docs/Mozilla/Firefox/Releases/3/Zoom_de_página_inteira /pt-BR/docs/Mozilla/Firefox/Releases/3/Full_page_zoom -/pt-BR/docs/Online_and_offline_events /pt-BR/docs/orphaned/Web/API/NavigatorOnLine/Online_and_offline_events -/pt-BR/docs/Projeto:Como_ajudar_com_MDN /pt-BR/docs/conflicting/MDN/Contribute/Getting_started -/pt-BR/docs/Projeto:Como_ajudar_com_MDN-redirect-1 /pt-BR/docs/conflicting/MDN/Contribute/Getting_started -/pt-BR/docs/Projeto:Como_ajudar_com_MDN-redirect-2 /pt-BR/docs/conflicting/MDN/Contribute/Getting_started /pt-BR/docs/Quirks_Mode_and_Standards_Mode /pt-BR/docs/Web/HTML/Quirks_Mode_and_Standards_Mode /pt-BR/docs/SVG /pt-BR/docs/Web/SVG /pt-BR/docs/SVG/Element /pt-BR/docs/Web/SVG/Element /pt-BR/docs/SVG/Element/desc /pt-BR/docs/Web/SVG/Element/desc /pt-BR/docs/SVG/Element/svg /pt-BR/docs/Web/SVG/Element/svg /pt-BR/docs/SVG/Element/texto /pt-BR/docs/Web/SVG/Element/text -/pt-BR/docs/Sections_and_Outlines_of_an_HTML5_document /pt-BR/docs/orphaned/Web/Guide/HTML/Using_HTML_sections_and_outlines /pt-BR/docs/Security/CSP/Utilizando_Politicas_De_Seguranca_De_Conteudo /pt-BR/docs/Web/HTTP/CSP -/pt-BR/docs/Seções_e_estrutura_HTML5 /pt-BR/docs/orphaned/Web/Guide/HTML/Using_HTML_sections_and_outlines /pt-BR/docs/The_XSLT_JavaScript_Interface_in_Gecko /pt-BR/docs/Web/XSLT/XSLT_JS_interface_in_Gecko /pt-BR/docs/The_XSLT_JavaScript_Interface_in_Gecko/Advanced_Example /pt-BR/docs/Web/XSLT/XSLT_JS_interface_in_Gecko/Advanced_Example -/pt-BR/docs/Tools/Add-ons /pt-BR/docs/orphaned/Tools/Add-ons -/pt-BR/docs/Tools/Add-ons/DOM_Inspector_Pt-Br /pt-BR/docs/orphaned/Tools/Add-ons/DOM_Inspector -/pt-BR/docs/Tools/CSS_Coverage /pt-BR/docs/orphaned/Tools/CSS_Coverage /pt-BR/docs/Tools/Debugger/How_to/Examine,_modify,_and_watch_variables /pt-BR/docs/Tools/Debugger/How_to/Set_Watch_Expressions -/pt-BR/docs/Tools/Debugger_(before_Firefox_52) /pt-BR/docs/orphaned/Tools/Debugger_(before_Firefox_52) -/pt-BR/docs/Tools/Debugger_(before_Firefox_52)/Disable_breakpoints /pt-BR/docs/orphaned/Tools/Debugger_(before_Firefox_52)/Disable_breakpoints /pt-BR/docs/Tools/Depurador /pt-BR/docs/Tools/Debugger /pt-BR/docs/Tools/Depurador/Set_a_logpoint /pt-BR/docs/Tools/Debugger/Set_a_logpoint /pt-BR/docs/Tools/Depuração_Remota /pt-BR/docs/Tools/Remote_Debugging @@ -512,24 +459,18 @@ /pt-BR/docs/Tools/Inspetor_de_Armazenamento /pt-BR/docs/Tools/Storage_Inspector /pt-BR/docs/Tools/Medir_uma_porcao_da_pagina /pt-BR/docs/Tools/Measure_a_portion_of_the_page /pt-BR/docs/Tools/Modo_Design_Adaptavel /pt-BR/docs/Tools/Responsive_Design_Mode -/pt-BR/docs/Tools/Notas_de_lancamento /pt-BR/docs/conflicting/Mozilla/Firefox/Releases /pt-BR/docs/Tools/Page_Inspector/How_to/Examinando_eventos_escuta /pt-BR/docs/Tools/Page_Inspector/How_to/Examine_event_listeners /pt-BR/docs/Tools/Page_Inspector/How_to/Trabalho_Com_Animaçoes /pt-BR/docs/Tools/Page_Inspector/How_to/Work_with_animations /pt-BR/docs/Tools/Simulador_Firefox_OS_1.1 /pt-BR/docs/Tools/Firefox_OS_1.1_Simulator /pt-BR/docs/Tools/Web_Console/Opening_the_Web_Console /pt-BR/docs/Tools/Web_Console/UI_Tour /pt-BR/docs/Tools/atuação /pt-BR/docs/Tools/Performance -/pt-BR/docs/Using_HTML5_audio_and_video /pt-BR/docs/conflicting/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content /pt-BR/docs/Using_files_from_web_applications /pt-BR/docs/Web/API/File/Using_files_from_web_applications /pt-BR/docs/Using_geolocation /pt-BR/docs/Web/API/Geolocation_API -/pt-BR/docs/Utilizando_áudio_e_vídeo_com_HTML5 /pt-BR/docs/conflicting/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content /pt-BR/docs/Web/API/API_Push /pt-BR/docs/Web/API/Push_API /pt-BR/docs/Web/API/API_Push/Best_Practices /pt-BR/docs/Web/API/Push_API/Best_Practices /pt-BR/docs/Web/API/API_Web_Audio /pt-BR/docs/Web/API/Web_Audio_API /pt-BR/docs/Web/API/API_Web_Audio/Sintetizador_simples /pt-BR/docs/Web/API/Web_Audio_API/Simple_synth /pt-BR/docs/Web/API/API_de_Desempenho /pt-BR/docs/Web/API/Performance_API -/pt-BR/docs/Web/API/AbstractWorker /pt-BR/docs/orphaned/Web/API/AbstractWorker -/pt-BR/docs/Web/API/AbstractWorker/onerror /pt-BR/docs/orphaned/Web/API/AbstractWorker/onerror -/pt-BR/docs/Web/API/Ambient_Light_Events /pt-BR/docs/orphaned/Web/API/Ambient_Light_Events /pt-BR/docs/Web/API/ArrayBuffer /pt-BR/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer /pt-BR/docs/Web/API/AudioContext/currentTime /pt-BR/docs/Web/API/BaseAudioContext/currentTime /pt-BR/docs/Web/API/BatteryManager.charging /pt-BR/docs/Web/API/BatteryManager/charging @@ -541,18 +482,9 @@ /pt-BR/docs/Web/API/BatteryManager.ondischargingtimechange /pt-BR/docs/Web/API/BatteryManager/ondischargingtimechange /pt-BR/docs/Web/API/BatteryManager.onlevelchange /pt-BR/docs/Web/API/BatteryManager/onlevelchange /pt-BR/docs/Web/API/BatteryManager/ondischargintimechange /pt-BR/docs/Web/API/BatteryManager/ondischargingtimechange -/pt-BR/docs/Web/API/Body /pt-BR/docs/orphaned/Web/API/Body -/pt-BR/docs/Web/API/Body/json /pt-BR/docs/orphaned/Web/API/Body/json -/pt-BR/docs/Web/API/ChildNode /pt-BR/docs/orphaned/Web/API/ChildNode -/pt-BR/docs/Web/API/ChildNode/after /pt-BR/docs/orphaned/Web/API/ChildNode/after -/pt-BR/docs/Web/API/ChildNode/remove /pt-BR/docs/orphaned/Web/API/ChildNode/remove /pt-BR/docs/Web/API/Console.timeEnd /pt-BR/docs/Web/API/Console/timeEnd /pt-BR/docs/Web/API/Coordinates /pt-BR/docs/Web/API/GeolocationCoordinates /pt-BR/docs/Web/API/Coordinates/altitude /pt-BR/docs/Web/API/GeolocationCoordinates/altitude -/pt-BR/docs/Web/API/CryptoKey/algorithm /pt-BR/docs/conflicting/Web/API/CryptoKey -/pt-BR/docs/Web/API/CryptoKey/extractable /pt-BR/docs/conflicting/Web/API/CryptoKey_53ae81677f4d9298717f2f245ae4da0d -/pt-BR/docs/Web/API/CryptoKey/type /pt-BR/docs/conflicting/Web/API/CryptoKey_33bd21ca8f20b4cd8c7b8c762e2fc597 -/pt-BR/docs/Web/API/CryptoKey/usages /pt-BR/docs/conflicting/Web/API/CryptoKey_f39d256ef7fbd1cf0a1f26de1e887ae7 /pt-BR/docs/Web/API/DeviceAcceleration /pt-BR/docs/Web/API/DeviceMotionEventAcceleration /pt-BR/docs/Web/API/DeviceRotationRate /pt-BR/docs/Web/API/DeviceMotionEventRotationRate /pt-BR/docs/Web/API/Document.querySelector /pt-BR/docs/Web/API/Document/querySelector @@ -564,7 +496,6 @@ /pt-BR/docs/Web/API/DocumentOrShadowRoot/activeElement /pt-BR/docs/Web/API/Document/activeElement /pt-BR/docs/Web/API/DocumentOrShadowRoot/elementFromPoint /pt-BR/docs/Web/API/Document/elementFromPoint /pt-BR/docs/Web/API/DocumentOrShadowRoot/getSelection /pt-BR/docs/Web/API/Document/getSelection -/pt-BR/docs/Web/API/Document_Object_Model/Events /pt-BR/docs/orphaned/Web/API/Document_Object_Model/Events /pt-BR/docs/Web/API/DocumentoXML /pt-BR/docs/Web/API/XMLDocument /pt-BR/docs/Web/API/Element.addEventListener /pt-BR/docs/Web/API/EventTarget/addEventListener /pt-BR/docs/Web/API/Element.getAttribute /pt-BR/docs/Web/API/Element/getAttribute @@ -574,31 +505,12 @@ /pt-BR/docs/Web/API/Element.removeAttribute /pt-BR/docs/Web/API/Element/removeAttribute /pt-BR/docs/Web/API/Element/accessKey /pt-BR/docs/Web/API/HTMLElement/accessKey /pt-BR/docs/Web/API/Element/addEventListener /pt-BR/docs/Web/API/EventTarget/addEventListener -/pt-BR/docs/Web/API/Element/name /pt-BR/docs/conflicting/Web/API /pt-BR/docs/Web/API/Event/Comparativo_entre_Event_Targets /pt-BR/docs/Web/API/Event/Comparison_of_Event_Targets /pt-BR/docs/Web/API/Fetch_API/Uso_de_busca_Cross-global /pt-BR/docs/Web/API/Fetch_API/Cross-global_fetch_usage /pt-BR/docs/Web/API/HTMLContentElement/Seletor /pt-BR/docs/Web/API/HTMLContentElement/select -/pt-BR/docs/Web/API/HTMLElement/blur /pt-BR/docs/orphaned/Web/API/HTMLOrForeignElement/blur -/pt-BR/docs/Web/API/HTMLElement/dataset /pt-BR/docs/orphaned/Web/API/HTMLOrForeignElement/dataset -/pt-BR/docs/Web/API/HTMLElement/focus /pt-BR/docs/orphaned/Web/API/HTMLOrForeignElement/focus -/pt-BR/docs/Web/API/HTMLOrForeignElement/blur /pt-BR/docs/orphaned/Web/API/HTMLOrForeignElement/blur -/pt-BR/docs/Web/API/HTMLOrForeignElement/dataset /pt-BR/docs/orphaned/Web/API/HTMLOrForeignElement/dataset -/pt-BR/docs/Web/API/HTMLOrForeignElement/focus /pt-BR/docs/orphaned/Web/API/HTMLOrForeignElement/focus /pt-BR/docs/Web/API/History_API/Exemplo /pt-BR/docs/Web/API/History_API/Example -/pt-BR/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB /pt-BR/docs/orphaned/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB /pt-BR/docs/Web/API/IndexedDB_API/Usando_IndexedDB /pt-BR/docs/Web/API/IndexedDB_API/Using_IndexedDB /pt-BR/docs/Web/API/Navigator.battery /pt-BR/docs/Web/API/Navigator/battery -/pt-BR/docs/Web/API/NavigatorID /pt-BR/docs/orphaned/Web/API/NavigatorID -/pt-BR/docs/Web/API/NavigatorID.platform /pt-BR/docs/orphaned/Web/API/NavigatorID/platform -/pt-BR/docs/Web/API/NavigatorID/platform /pt-BR/docs/orphaned/Web/API/NavigatorID/platform -/pt-BR/docs/Web/API/NavigatorID/userAgent /pt-BR/docs/orphaned/Web/API/NavigatorID/userAgent -/pt-BR/docs/Web/API/NavigatorLanguage /pt-BR/docs/orphaned/Web/API/NavigatorLanguage -/pt-BR/docs/Web/API/NavigatorLanguage/language /pt-BR/docs/orphaned/Web/API/NavigatorLanguage/language -/pt-BR/docs/Web/API/NavigatorOnLine /pt-BR/docs/orphaned/Web/API/NavigatorOnLine -/pt-BR/docs/Web/API/NavigatorOnLine/Online_and_offline_events /pt-BR/docs/orphaned/Web/API/NavigatorOnLine/Online_and_offline_events -/pt-BR/docs/Web/API/NavigatorOnLine/onLine /pt-BR/docs/orphaned/Web/API/NavigatorOnLine/onLine -/pt-BR/docs/Web/API/NavigatorPlugins /pt-BR/docs/orphaned/Web/API/NavigatorPlugins -/pt-BR/docs/Web/API/NavigatorPlugins/javaEnabled /pt-BR/docs/orphaned/Web/API/NavigatorPlugins/javaEnabled /pt-BR/docs/Web/API/Node.appendChild /pt-BR/docs/Web/API/Node/appendChild /pt-BR/docs/Web/API/Node.childNodes /pt-BR/docs/Web/API/Node/childNodes /pt-BR/docs/Web/API/Node.contains /pt-BR/docs/Web/API/Node/contains @@ -607,16 +519,11 @@ /pt-BR/docs/Web/API/Node.previousSibling /pt-BR/docs/Web/API/Node/previousSibling /pt-BR/docs/Web/API/Node.removeChild /pt-BR/docs/Web/API/Node/removeChild /pt-BR/docs/Web/API/Node.replaceChild /pt-BR/docs/Web/API/Node/replaceChild -/pt-BR/docs/Web/API/Node/Entendendo_o_uso_do_método_AppendChild-javascript /pt-BR/docs/orphaned/Web/API/Node/Entendendo_o_uso_do_método_AppendChild-javascript /pt-BR/docs/Web/API/Node/innerText /pt-BR/docs/Web/API/HTMLElement/innerText -/pt-BR/docs/Web/API/ParentNode /pt-BR/docs/orphaned/Web/API/ParentNode /pt-BR/docs/Web/API/ParentNode/childElementCount /pt-BR/docs/Web/API/Element/childElementCount -/pt-BR/docs/Web/API/ParentNode/children /pt-BR/docs/orphaned/Web/API/ParentNode/children -/pt-BR/docs/Web/API/ParentNode/querySelector /pt-BR/docs/orphaned/Web/API/ParentNode/querySelector /pt-BR/docs/Web/API/Position /pt-BR/docs/Web/API/GeolocationPosition /pt-BR/docs/Web/API/Position/coords /pt-BR/docs/Web/API/GeolocationPosition/coords /pt-BR/docs/Web/API/PositionError /pt-BR/docs/Web/API/GeolocationPositionError -/pt-BR/docs/Web/API/RandomSource /pt-BR/docs/conflicting/Web/API/Crypto/getRandomValues /pt-BR/docs/Web/API/RandomSource/getRandomValues /pt-BR/docs/Web/API/Crypto/getRandomValues /pt-BR/docs/Web/API/SVGAElement/SVGAlement.target /pt-BR/docs/Web/API/SVGAElement/target /pt-BR/docs/Web/API/Seleção /pt-BR/docs/Web/API/Selection @@ -628,15 +535,9 @@ /pt-BR/docs/Web/API/Web_Storage_API_pt_br/Using_the_Web_Storage_API /pt-BR/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API /pt-BR/docs/Web/API/Window.alert /pt-BR/docs/Web/API/Window/alert /pt-BR/docs/Web/API/Window.navigator /pt-BR/docs/Web/API/Window/navigator -/pt-BR/docs/Web/API/Window.onscroll /pt-BR/docs/conflicting/Web/API/GlobalEventHandlers/onscroll /pt-BR/docs/Web/API/Window.openDialog /pt-BR/docs/Web/API/Window/openDialog -/pt-BR/docs/Web/API/Window/URL /pt-BR/docs/conflicting/Web/API/URL /pt-BR/docs/Web/API/Window/Window.localStorage /pt-BR/docs/Web/API/Window/localStorage -/pt-BR/docs/Web/API/Window/ondevicelight /pt-BR/docs/orphaned/Web/API/Window/ondevicelight -/pt-BR/docs/Web/API/Window/onscroll /pt-BR/docs/conflicting/Web/API/GlobalEventHandlers/onscroll -/pt-BR/docs/Web/API/WindowBase64 /pt-BR/docs/conflicting/Web/API/WindowOrWorkerGlobalScope /pt-BR/docs/Web/API/WindowBase64/atob /pt-BR/docs/Web/API/WindowOrWorkerGlobalScope/atob -/pt-BR/docs/Web/API/WindowTimers /pt-BR/docs/conflicting/Web/API/WindowOrWorkerGlobalScope_e2691f7ad05781a30c5fc5bb3b3f633a /pt-BR/docs/Web/API/WindowTimers.clearTimeout /pt-BR/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout /pt-BR/docs/Web/API/WindowTimers/clearTimeout /pt-BR/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout /pt-BR/docs/Web/API/XMLHttpRequest/Requisicoes_sincronas_e_assincronas /pt-BR/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests @@ -653,19 +554,14 @@ /pt-BR/docs/Web/Accessibility/ARIA/ARIA_Techniques/Utilizando_o_alert_role /pt-BR/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role /pt-BR/docs/Web/Accessibility/ARIA/Guia_para_implementar_o_leitor_de_tela_ARIA /pt-BR/docs/Web/Accessibility/ARIA/ARIA_Screen_Reader_Implementors_Guide /pt-BR/docs/Web/Accessibility/ARIA/forms/Dicas_básicas_de_form /pt-BR/docs/Web/Accessibility/ARIA/forms/Basic_form_hints -/pt-BR/docs/Web/Accessibility/ARIA/widgets/Visão_geral /pt-BR/docs/conflicting/Web/Accessibility/ARIA/widgets -/pt-BR/docs/Web/Accessibility/ARIA/widgets/overview /pt-BR/docs/conflicting/Web/Accessibility/ARIA/widgets /pt-BR/docs/Web/Acessibilidade /pt-BR/docs/Web/Accessibility /pt-BR/docs/Web/Acessibilidade/Accessibilidade_para_plataforma_movel /pt-BR/docs/Web/Accessibility/Mobile_accessibility_checklist /pt-BR/docs/Web/Acessibilidade/An_overview_of_accessible_web_applications_and_widgets /pt-BR/docs/Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets -/pt-BR/docs/Web/Acessibilidade/Desenvolvimento_Web /pt-BR/docs/conflicting/Web/Accessibility /pt-BR/docs/Web/Acessibilidade/Entendendo_WCAG /pt-BR/docs/Web/Accessibility/Understanding_WCAG /pt-BR/docs/Web/Acessibilidade/Entendendo_WCAG/Keyboard /pt-BR/docs/Web/Accessibility/Understanding_WCAG/Keyboard -/pt-BR/docs/Web/Acessibilidade/Problemas_com_JAWS_no_Firefox /pt-BR/docs/orphaned/Web/Accessibility/JAWS_Issues_with_Firefox /pt-BR/docs/Web/Apps/Progressive /pt-BR/docs/Web/Progressive_web_apps /pt-BR/docs/Web/Apps/Progressive/Introdução /pt-BR/docs/Web/Progressive_web_apps/Introduction /pt-BR/docs/Web/CSS/-moz-box-ordinal-group /pt-BR/docs/Web/CSS/box-ordinal-group -/pt-BR/docs/Web/CSS/-moz-cell /pt-BR/docs/conflicting/Web/CSS/cursor /pt-BR/docs/Web/CSS/CSS_Animations/Usando_animações_CSS /pt-BR/docs/Web/CSS/CSS_Animations/Using_CSS_animations /pt-BR/docs/Web/CSS/CSS_Background_and_Borders /pt-BR/docs/Web/CSS/CSS_Backgrounds_and_Borders /pt-BR/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds /pt-BR/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds @@ -679,14 +575,8 @@ /pt-BR/docs/Web/CSS/Comentário /pt-BR/docs/Web/CSS/Comments /pt-BR/docs/Web/CSS/Elemento_substituido /pt-BR/docs/Web/CSS/Replaced_element /pt-BR/docs/Web/CSS/General_sibling_selectors /pt-BR/docs/Web/CSS/General_sibling_combinator -/pt-BR/docs/Web/CSS/Getting_Started /pt-BR/docs/conflicting/Learn/CSS/First_steps -/pt-BR/docs/Web/CSS/Getting_Started/Cascading_and_inheritance /pt-BR/docs/conflicting/Learn/CSS/Building_blocks/Cascade_and_inheritance -/pt-BR/docs/Web/CSS/Getting_Started/Como_CSS_funciona /pt-BR/docs/conflicting/Learn/CSS/First_steps/How_CSS_works /pt-BR/docs/Web/CSS/Getting_Started/JavaScript /pt-BR/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents /pt-BR/docs/Web/CSS/Getting_Started/Lists /pt-BR/docs/Learn/CSS/Styling_text/Styling_lists -/pt-BR/docs/Web/CSS/Getting_Started/Oque_é_CSS /pt-BR/docs/conflicting/Learn/CSS/First_steps/How_CSS_works_199dae2aa1447fa94457a213c989744d -/pt-BR/docs/Web/CSS/Getting_Started/Porque_usar_CSS /pt-BR/docs/conflicting/Learn/CSS/First_steps/How_CSS_works_61240ddc35a4ddd533ea33cc8ccf1c87 -/pt-BR/docs/Web/CSS/Getting_Started/Seletores /pt-BR/docs/conflicting/Learn/CSS/Building_blocks/Selectors /pt-BR/docs/Web/CSS/Modelo_Visual /pt-BR/docs/Web/CSS/Visual_formatting_model /pt-BR/docs/Web/CSS/Modelo_layout /pt-BR/docs/Web/CSS/Layout_mode /pt-BR/docs/Web/CSS/Privacidade_e_o_seletor_:visited /pt-BR/docs/Web/CSS/Privacy_and_the_:visited_selector @@ -710,14 +600,8 @@ /pt-BR/docs/Web/CSS/filter-function/opacity /pt-BR/docs/Web/CSS/filter-function/opacity() /pt-BR/docs/Web/CSS/filter-function/sepia /pt-BR/docs/Web/CSS/filter-function/sepia() /pt-BR/docs/Web/CSS/hifens /pt-BR/docs/Web/CSS/hyphens -/pt-BR/docs/Web/CSS/image-set /pt-BR/docs/orphaned/Web/CSS/image-set() -/pt-BR/docs/Web/CSS/image-set() /pt-BR/docs/orphaned/Web/CSS/image-set() /pt-BR/docs/Web/CSS/imagem /pt-BR/docs/Web/CSS/image /pt-BR/docs/Web/CSS/máscara /pt-BR/docs/Web/CSS/mask -/pt-BR/docs/Web/CSS/radial-gradient /pt-BR/docs/orphaned/Web/CSS/radial-gradient() -/pt-BR/docs/Web/CSS/radial-gradient() /pt-BR/docs/orphaned/Web/CSS/radial-gradient() -/pt-BR/docs/Web/CSS/repeating-linear-gradient /pt-BR/docs/orphaned/Web/CSS/repeating-linear-gradient() -/pt-BR/docs/Web/CSS/repeating-linear-gradient() /pt-BR/docs/orphaned/Web/CSS/repeating-linear-gradient() /pt-BR/docs/Web/CSS/sintaxe /pt-BR/docs/Web/CSS/Syntax /pt-BR/docs/Web/CSS/transform-function/matrix /pt-BR/docs/Web/CSS/transform-function/matrix() /pt-BR/docs/Web/CSS/transform-function/perspective /pt-BR/docs/Web/CSS/transform-function/perspective() @@ -751,16 +635,9 @@ /pt-BR/docs/Web/Events/resize /pt-BR/docs/Web/API/Window/resize_event /pt-BR/docs/Web/Events/touchstart /pt-BR/docs/Web/API/Element/touchstart_event /pt-BR/docs/Web/Guide/CSS/CSS_Media_queries /pt-BR/docs/Web/CSS/Media_Queries/Using_media_queries -/pt-BR/docs/Web/Guide/CSS/CSS_media_queries_(consultas_de_mídia_em_CSS) /pt-BR/docs/orphaned/Web/Guide/CSS/CSS_media_queries_(consultas_de_mídia_em_CSS) /pt-BR/docs/Web/Guide/CSS/Scaling_background_images /pt-BR/docs/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images /pt-BR/docs/Web/Guide/CSS/Understanding_z_index /pt-BR/docs/Web/CSS/CSS_Positioning/Understanding_z_index -/pt-BR/docs/Web/Guide/Events /pt-BR/docs/orphaned/Web/Guide/Events -/pt-BR/docs/Web/Guide/Events/Creating_and_triggering_events /pt-BR/docs/orphaned/Web/Guide/Events/Creating_and_triggering_events -/pt-BR/docs/Web/Guide/Events/Event_handlers /pt-BR/docs/orphaned/Web/Guide/Events/Event_handlers -/pt-BR/docs/Web/Guide/Events/Mutation_events /pt-BR/docs/orphaned/Web/Guide/Events/Mutation_events -/pt-BR/docs/Web/Guide/Events/Overview_of_Events_and_Handlers /pt-BR/docs/orphaned/Web/Guide/Events/Overview_of_Events_and_Handlers /pt-BR/docs/Web/Guide/Events/Touch_events /pt-BR/docs/Web/API/Touch_events -/pt-BR/docs/Web/Guide/Events/criando_e_disparando_eventos /pt-BR/docs/orphaned/Web/Guide/Events/Creating_and_triggering_events /pt-BR/docs/Web/Guide/Gráficos /pt-BR/docs/Web/Guide/Graphics /pt-BR/docs/Web/Guide/HTML/Canvas_tutorial /pt-BR/docs/Web/API/Canvas_API/Tutorial /pt-BR/docs/Web/Guide/HTML/Canvas_tutorial/Advanced_animations /pt-BR/docs/Web/API/Canvas_API/Tutorial/Advanced_animations @@ -783,9 +660,6 @@ /pt-BR/docs/Web/Guide/HTML/Forms/Meu_primeiro_formulario_HTML /pt-BR/docs/Learn/Forms/Your_first_form /pt-BR/docs/Web/Guide/HTML/Forms/Os_widgets_nativos /pt-BR/docs/Learn/Forms/Basic_native_form_controls /pt-BR/docs/Web/Guide/HTML/Forms/Sending_and_retrieving_form_data /pt-BR/docs/Learn/Forms/Sending_and_retrieving_form_data -/pt-BR/docs/Web/Guide/HTML/HTML5 /pt-BR/docs/orphaned/Web/Guide/HTML/HTML5 -/pt-BR/docs/Web/Guide/HTML/HTML5/Introduction_to_HTML5 /pt-BR/docs/orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5 -/pt-BR/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines /pt-BR/docs/orphaned/Web/Guide/HTML/Using_HTML_sections_and_outlines /pt-BR/docs/Web/Guide/HTML/Using_data_attributes /pt-BR/docs/Learn/HTML/Howto/Use_data_attributes /pt-BR/docs/Web/Guide/Introducao_ao_Desenvolvimento_Web /pt-BR/docs/Web/Guide/Introduction_to_Web_development /pt-BR/docs/Web/HTML/CORS_imagens_habilitadas /pt-BR/docs/Web/HTML/CORS_enabled_image @@ -794,20 +668,14 @@ /pt-BR/docs/Web/HTML/Controlando_verificacao_ortografica_em_formularios_HTML /pt-BR/docs/Web/HTML/Global_attributes/spellcheck /pt-BR/docs/Web/HTML/Dicas_para_criar_páginas_HTML_de_carregamento_rápido /pt-BR/docs/Learn/HTML/Howto/Author_fast-loading_HTML_pages /pt-BR/docs/Web/HTML/Element/Input/data /pt-BR/docs/Web/HTML/Element/input/date -/pt-BR/docs/Web/HTML/Element/command /pt-BR/docs/orphaned/Web/HTML/Element/command /pt-BR/docs/Web/HTML/Element/conteúdo /pt-BR/docs/Web/HTML/Element/content /pt-BR/docs/Web/HTML/Element/figura /pt-BR/docs/Web/HTML/Element/figure /pt-BR/docs/Web/HTML/Elementos_block-level /pt-BR/docs/Web/HTML/Block-level_elements /pt-BR/docs/Web/HTML/Elementos_nlock-level /pt-BR/docs/Web/HTML/Block-level_elements -/pt-BR/docs/Web/HTML/HTML5 /pt-BR/docs/orphaned/Web/Guide/HTML/HTML5 /pt-BR/docs/Web/HTML/HTML5/HTML5_element_list /pt-BR/docs/Web/HTML/Element -/pt-BR/docs/Web/HTML/HTML5/Introduction_to_HTML5 /pt-BR/docs/orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5 /pt-BR/docs/Web/HTML/Inline_elemente /pt-BR/docs/Web/HTML/Inline_elements /pt-BR/docs/Web/HTML/Optimizing_your_pages_for_speculative_parsing /pt-BR/docs/Glossary/speculative_parsing -/pt-BR/docs/Web/HTML/Preloading_content /pt-BR/docs/orphaned/Web/HTML/Preloading_content /pt-BR/docs/Web/HTML/ReferenciaHTML /pt-BR/docs/Web/HTML/Reference -/pt-BR/docs/Web/HTML/Using_HTML5_audio_and_video /pt-BR/docs/conflicting/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content -/pt-BR/docs/Web/HTML/favicon /pt-BR/docs/orphaned/Web/HTML/favicon /pt-BR/docs/Web/HTML/formatos_midia_suportados /pt-BR/docs/Web/Media/Formats /pt-BR/docs/Web/HTML/microformatos /pt-BR/docs/Web/HTML/microformats /pt-BR/docs/Web/HTTP/Basico_sobre_HTTP /pt-BR/docs/Web/HTTP/Basics_of_HTTP @@ -824,16 +692,13 @@ /pt-BR/docs/Web/HTTP/Headers/Localização /pt-BR/docs/Web/HTTP/Headers/Location /pt-BR/docs/Web/HTTP/Mensagens /pt-BR/docs/Web/HTTP/Messages /pt-BR/docs/Web/HTTP/Redirecionamento /pt-BR/docs/Web/HTTP/Redirections -/pt-BR/docs/Web/HTTP/Server-Side_Access_Control /pt-BR/docs/conflicting/Web/HTTP/CORS /pt-BR/docs/Web/JavaScript/Enumerabilidade_e_posse_de_propriedades /pt-BR/docs/Web/JavaScript/Enumerability_and_ownership_of_properties /pt-BR/docs/Web/JavaScript/Guide/About /pt-BR/docs/Web/JavaScript/Guide/Introduction /pt-BR/docs/Web/JavaScript/Guide/Closures /pt-BR/docs/Web/JavaScript/Closures -/pt-BR/docs/Web/JavaScript/Guide/Coleções_chaveadas /pt-BR/docs/orphaned/Web/JavaScript/Guide/Coleções_chaveadas /pt-BR/docs/Web/JavaScript/Guide/Declarações /pt-BR/docs/Web/JavaScript/Guide/Control_flow_and_error_handling /pt-BR/docs/Web/JavaScript/Guide/Detalhes_do_Modelo_do_Objeto /pt-BR/docs/Web/JavaScript/Guide/Details_of_the_Object_Model /pt-BR/docs/Web/JavaScript/Guide/Formatando_texto /pt-BR/docs/Web/JavaScript/Guide/Text_formatting /pt-BR/docs/Web/JavaScript/Guide/Funções /pt-BR/docs/Web/JavaScript/Guide/Functions -/pt-BR/docs/Web/JavaScript/Guide/Igualdade /pt-BR/docs/conflicting/Web/JavaScript/Equality_comparisons_and_sameness /pt-BR/docs/Web/JavaScript/Guide/Inheritance_Revisited /pt-BR/docs/Web/JavaScript/Inheritance_and_the_prototype_chain /pt-BR/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain /pt-BR/docs/Web/JavaScript/Inheritance_and_the_prototype_chain /pt-BR/docs/Web/JavaScript/Guide/Iteratores_e_geradores /pt-BR/docs/Web/JavaScript/Guide/Iterators_and_Generators @@ -841,11 +706,9 @@ /pt-BR/docs/Web/JavaScript/Guide/Lacos_e_iteracoes /pt-BR/docs/Web/JavaScript/Guide/Loops_and_iteration /pt-BR/docs/Web/JavaScript/Guide/Módulos /pt-BR/docs/Web/JavaScript/Guide/Modules /pt-BR/docs/Web/JavaScript/Guide/Numeros_e_datas /pt-BR/docs/Web/JavaScript/Guide/Numbers_and_dates -/pt-BR/docs/Web/JavaScript/Guide/Sintaxe_e_tipos /pt-BR/docs/orphaned/Web/JavaScript/Guide/Sintaxe_e_tipos /pt-BR/docs/Web/JavaScript/Guide/Trabalhando_com_Objetos /pt-BR/docs/Web/JavaScript/Guide/Working_with_Objects /pt-BR/docs/Web/JavaScript/Guide/Usando_promises /pt-BR/docs/Web/JavaScript/Guide/Using_promises /pt-BR/docs/Web/JavaScript/Guide/Values,_variables,_and_literals /pt-BR/docs/Web/JavaScript/Guide/Grammar_and_types -/pt-BR/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript /pt-BR/docs/conflicting/Learn/JavaScript/Objects /pt-BR/docs/Web/JavaScript/Outras_ferramentas_JavaScript /pt-BR/docs/Tools /pt-BR/docs/Web/JavaScript/Reference/Errors/Fata_parênteses_após_lista_argumento /pt-BR/docs/Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list /pt-BR/docs/Web/JavaScript/Reference/Errors/Fecha_chaves_esquecida_apos_lista_propriedades /pt-BR/docs/Web/JavaScript/Reference/Errors/Missing_curly_after_property_list @@ -855,79 +718,39 @@ /pt-BR/docs/Web/JavaScript/Reference/Functions/Parametros_Predefinidos /pt-BR/docs/Web/JavaScript/Reference/Functions/Default_parameters /pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array/contains /pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array/includes /pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array/filtro /pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array/filter -/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype /pt-BR/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Array/prototype -/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/BigInt/prototype /pt-BR/docs/orphaned/Web/JavaScript/Reference/Global_Objects/BigInt/prototype -/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Boolean/prototype /pt-BR/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Boolean -/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype /pt-BR/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Function -/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/prototype /pt-BR/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat -/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Map /pt-BR/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Map -/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Map/clear /pt-BR/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Map/clear -/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Map/delete /pt-BR/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Map/delete -/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Map/entries /pt-BR/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Map/entries -/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Map/forEach /pt-BR/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Map/forEach -/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Map/get /pt-BR/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Map/get -/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Map/has /pt-BR/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Map/has -/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Map/keys /pt-BR/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Map/keys -/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Map/prototype /pt-BR/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Map -/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Map/set /pt-BR/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Map/set -/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Map/size /pt-BR/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Map/size -/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Map/values /pt-BR/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Map/values -/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Number/prototype /pt-BR/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Number /pt-BR/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat /pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat -/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat/prototype /pt-BR/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat -/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype /pt-BR/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Object -/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Promise/prototype /pt-BR/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Promise /pt-BR/docs/Web/JavaScript/Reference/Global_Objects/RelativeTimeFormat /pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat -/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Set/prototype /pt-BR/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Set -/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/String/prototype /pt-BR/docs/conflicting/Web/JavaScript/Reference/Global_Objects/String -/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/WeakMap/prototype /pt-BR/docs/conflicting/Web/JavaScript/Reference/Global_Objects/WeakMap /pt-BR/docs/Web/JavaScript/Reference/Indice_metodos_js /pt-BR/docs/Web/JavaScript/Reference -/pt-BR/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators /pt-BR/docs/conflicting/Web/JavaScript/Reference/Operators /pt-BR/docs/Web/JavaScript/Reference/Operators/Atribuicao_via_desestruturacao /pt-BR/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment -/pt-BR/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators /pt-BR/docs/conflicting/Web/JavaScript/Reference/Operators_7c8eb9475d97a4a734c5991857698560 /pt-BR/docs/Web/JavaScript/Reference/Operators/Inicializador_Objeto /pt-BR/docs/Web/JavaScript/Reference/Operators/Object_initializer /pt-BR/docs/Web/JavaScript/Reference/Operators/Operador_Condicional /pt-BR/docs/Web/JavaScript/Reference/Operators/Conditional_Operator /pt-BR/docs/Web/JavaScript/Reference/Operators/Operador_Virgula /pt-BR/docs/Web/JavaScript/Reference/Operators/Comma_Operator -/pt-BR/docs/Web/JavaScript/Reference/Operators/Operadores_Logicos /pt-BR/docs/conflicting/Web/JavaScript/Reference/Operators_8fa8b34b0547a749514637a15d386886 -/pt-BR/docs/Web/JavaScript/Reference/Operators/Operadores_de_comparação /pt-BR/docs/conflicting/Web/JavaScript/Reference/Operators_0d2e4b8154642b5a9dbd76a2a48cf96a -/pt-BR/docs/Web/JavaScript/Reference/Operators/Pipeline_operator /pt-BR/docs/orphaned/Web/JavaScript/Reference/Operators/Pipeline_operator -/pt-BR/docs/Web/JavaScript/Reference/Operators/Spread_operator /pt-BR/docs/conflicting/Web/JavaScript/Reference/Operators/Spread_syntax /pt-BR/docs/Web/JavaScript/Reference/Operators/operador_de_coalescencia_nula /pt-BR/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator /pt-BR/docs/Web/JavaScript/Reference/Properties_Index /pt-BR/docs/Web/JavaScript/Reference -/pt-BR/docs/Web/JavaScript/Reference/Statements/default /pt-BR/docs/conflicting/Web/JavaScript/Reference/Statements/switch /pt-BR/docs/Web/JavaScript/Reference/Statements/funcoes_assincronas /pt-BR/docs/Web/JavaScript/Reference/Statements/async_function /pt-BR/docs/Web/JavaScript/Reference/template_strings /pt-BR/docs/Web/JavaScript/Reference/Template_literals /pt-BR/docs/Web/MathML/Exemplos /pt-BR/docs/Web/MathML/Examples /pt-BR/docs/Web/Performance/caminho_de_renderizacao_critico /pt-BR/docs/Web/Performance/Critical_rendering_path /pt-BR/docs/Web/Progressive_web_apps/Introdução /pt-BR/docs/Web/Progressive_web_apps/Introduction -/pt-BR/docs/Web/Reference /pt-BR/docs/orphaned/Web/Reference -/pt-BR/docs/Web/Reference/API /pt-BR/docs/orphaned/Web/Reference/API -/pt-BR/docs/Web/SVG/Element/color-profile /pt-BR/docs/orphaned/Web/SVG/Element/color-profile /pt-BR/docs/Web/SVG/Element/texto /pt-BR/docs/Web/SVG/Element/text /pt-BR/docs/Web/SVG/Intensivo_de_Namespaces /pt-BR/docs/Web/SVG/Namespaces_Crash_Course -/pt-BR/docs/Web/Security/Básico_de_Segurança_da_Informação /pt-BR/docs/orphaned/Web/Security/Information_Security_Basics /pt-BR/docs/Web/Tutoriais /pt-BR/docs/Web/Tutorials /pt-BR/docs/Web/WebGL /pt-BR/docs/Web/API/WebGL_API /pt-BR/docs/Web/Web_Components/Usando_custom_elements /pt-BR/docs/Web/Web_Components/Using_custom_elements -/pt-BR/docs/WebAPI /pt-BR/docs/conflicting/Web/API_dd04ca1265cb79b990b8120e5f5070d3 /pt-BR/docs/WebAPI/Battery_Status /pt-BR/docs/Web/API/Battery_Status_API /pt-BR/docs/WebAPI/Network_Information /pt-BR/docs/Web/API/Network_Information_API /pt-BR/docs/WebAssembly/Entendendo_o_formato_textual_do_WebAssembly /pt-BR/docs/WebAssembly/Understanding_the_text_format /pt-BR/docs/WebAssembly/Usando_a_API_JavaScript_do_WebAssembly /pt-BR/docs/WebAssembly/Using_the_JavaScript_API /pt-BR/docs/WebGL /pt-BR/docs/Web/API/WebGL_API -/pt-BR/docs/WebRTC /pt-BR/docs/conflicting/Web/API/WebRTC_API /pt-BR/docs/WebRTC/navigator.getUserMedia /pt-BR/docs/Web/API/Navigator/getUserMedia /pt-BR/docs/WebSockets /pt-BR/docs/Web/API/WebSockets_API /pt-BR/docs/WebSockets/Escrevendo_aplicacoes_cliente_WebSocket /pt-BR/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications /pt-BR/docs/WebSockets/Writing_WebSocket_server /pt-BR/docs/Web/API/WebSockets_API/Writing_WebSocket_server /pt-BR/docs/WebSockets/Writing_WebSocket_servers /pt-BR/docs/Web/API/WebSockets_API/Writing_WebSocket_servers -/pt-BR/docs/Web_Development/Mobile /pt-BR/docs/conflicting/Web/Guide/Mobile -/pt-BR/docs/Web_Development/Mobile/Design_responsivo /pt-BR/docs/conflicting/Web/Progressive_web_apps /pt-BR/docs/Web_Development/Mobile/Mobile-friendliness /pt-BR/docs/Web/Guide/Mobile/Mobile-friendliness /pt-BR/docs/Web_Development/Mobile/Sites_separados /pt-BR/docs/Web/Guide/Mobile/Separate_sites /pt-BR/docs/XHTML /pt-BR/docs/Glossary/XHTML /pt-BR/docs/c_temp /pt-BR/docs/Web/API/Console -/pt-BR/docs/desenvolvimento_web /pt-BR/docs/conflicting/Web/Guide /pt-BR/docs/dez_anos_de_MDN /pt-BR/docs/MDN/At_ten /pt-BR/docs/en /en-US/ /pt-BR/docs/mask /pt-BR/docs/Web/CSS/mask diff --git a/files/pt-br/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/pt-br/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html deleted file mode 100644 index 24d7a8a170..0000000000 --- a/files/pt-br/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html +++ /dev/null @@ -1,129 +0,0 @@ ---- -title: Cascata e herança -slug: conflicting/Learn/CSS/Building_blocks/Cascade_and_inheritance -tags: - - Guía - - Iniciante -translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance -translation_of_original: Web/Guide/CSS/Getting_started/Cascading_and_inheritance -original_slug: Web/CSS/Getting_Started/Cascading_and_inheritance ---- -

{{ CSSTutorialTOC() }}

- -

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/How_CSS_works", "How CSS works.")}}Essa é a quarta seção do  Primeiros Passos (Tutorial CSS); Ela descreve como folhas de estilos interagem em cascata e como elementos herdam os estilos dos seus pais. Você pode usar herança para alterar o estilo de varios elementos da sua página de uma unica vez.

- -

Informação: Cascata e Herança

- -

O estilo final de um elemento pode ser setado em varios locais diferentes, que interagem entre si de uma forma complexa. Está forma de interação torna o CSS poderoso, mas pode torna-lo confuso e dificil de depurar.

- -

Existem três fontes principais de estilos que constituem a cascata. São elas:

- - - -

O estilo do usuario modificam o estilo padão do navegador e o estilo do desenvolvedor da página modifica ambos os outros estilos. Neste tutorial você estará desenvolvendo as folhas de estilos.

- -
-
Exemplo
- -

Quando você ler este documento em um navegador, parte dos estilos dele são definidos pelo próprio navegador.

- -

Parte pode ser definida em configurações personanizadas no navegador. No Firefox, esta configurações podem ser personalizadas na janela de preferências, ou você pode especificar os estilos no arquivo userContent.css do seu navegador.

- -

Parte dos estilos vem de folhas de estilo ligadas ao documento pelo servidor da wiki.

-
- -

Quando você abre o documento de exemplo em seu navegador, alguns elementos {{ HTMLElement("strong") }}  vem em negrito. Isto vem das configurações padrão do seu navegador.

- -

Os {{ HTMLElement("strong") }} são vermelhos. Isto vem da sua própria folha de estilo (previamente definida).

- -

Os {{HTMLElement ("strong")}} elementos também herdam muito do {{HTMLElement ("p")}} estilo do elemento, porque eles são seus filhos. Da mesma forma, o {{HTMLElement ("p")}} elemento herda grande parte da {{HTMLElement ("body")}} estilo do elemento.

- -

Para os estilos em cascata, as folhas de estilo do autor têm prioridade, depois as folhas de estilo leitor, e enfim os padrões do navegador.

- -

Para estilos herdados, o estilo próprio de um nó filho tem prioridade sobre estilo herdado de seu pai.

- -

Estas não são as únicas prioridades a serem aplicadas. Mais tarde, uma página deste tutorial explicará.

- -

Mais detalhes

- -
-

CSS também fornece uma maneira para que o leitor anule o estilo do autor do documento, usando a palavra-chave! Important. 

- -

Isto significa que, como autor do documento, você não poderá prever exatamente o que os leitores irão ver.

- -

Se você quiser saber todos os detalhes da cascata e herança, consulte  Assigning property values, Cascading, and Inheritance na especificação do CSS

-
- -

Ação: Usando herança

- -
    -
  1. Edite o seu arquivo CSS.
    2. -
  2. Adicione esta linha, copiando e colando-lo. Realmente não importa se você adicioná-lo acima ou abaixo da linha que já está lá. No entanto, adicionando-o no topo é mais lógico, porque em seu documento a {{ HTMLElement("p") }} elemento pai do {{ HTMLElement("strong") }} element: - 
    p {color: blue; text-decoration: underline;}
-
    -
    3. -
  3. Agora atualize seu navegador para ver o efeito no seu documento de amostra. O subjacente afeta todo o texto no parágrafo, incluindo as letras iniciais. Os elementos {{ HTMLElement("strong") }} herdaram o estilo sublinhado a partir de seu elemento pai {{ HTMLElement("p") }}.
    - -

    Mas os elementos {{ HTMLElement("strong") }} ainda são vermelhos. A cor vermelha é o seu próprio estilo, por isso tem prioridade sobre a cor azul de seu elemento pai {{ HTMLElement("p") }}.

    -
    4. -
- - -
- - - - - - - - -
Antes
Cascading Style Sheets
- - - - - - - - -
Depois
Cascading Style Sheets
- -
-
Desafio
-Mude o seu estilo de modo que somente as letras vermelhas sublinhadas: - - - - - - - -
Cascading Style Sheets
- -
-
Possible solution
- -

Move the declaration for underlining from the rule for {{ HTMLElement("p") }} to the one for {{ HTMLElement("strong") }}. The resulting file looks like this:

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

 

-Hide solution
-Veja a solução do desafio.
- -

Qual o próximo?

- -

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors", "Selectors")}} Sua folha de estilo de amostra especifica estilos para as tags, <p> e <strong>, mudando o estilo dos elementos correspondentes em todo o documento. A próxima seção descreve como especificar mais seletores.

diff --git a/files/pt-br/conflicting/learn/css/building_blocks/selectors/index.html b/files/pt-br/conflicting/learn/css/building_blocks/selectors/index.html deleted file mode 100644 index 4555e39b04..0000000000 --- a/files/pt-br/conflicting/learn/css/building_blocks/selectors/index.html +++ /dev/null @@ -1,431 +0,0 @@ ---- -title: Seletores -slug: conflicting/Learn/CSS/Building_blocks/Selectors -translation_of: Learn/CSS/Building_blocks/Selectors -translation_of_original: Web/Guide/CSS/Getting_started/Selectors -original_slug: Web/CSS/Getting_Started/Seletores ---- -

{{ CSSTutorialTOC() }}

- -

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascading & inheritance")}}Esta é a 5ª seção de Primeiros passos (Tutorial Css), ela explica como você pode aplicar estilos seletivamente e como diferentes tipos de seletores possuem diferentes prioridades. Você adiciona mais atributos para tags no seu documento e como você pode usa-los em sua folha de estilos.

- -

Informações: Seletores

- -

CSS tem sua propria terminologia para descrever a linguagem CSS. Anteriormente nesse tutorial, você criou linha no seu stylesheet como esta:

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

No CSS, este código inteiro é uma regra. Esta regra inicia com strong, que é um seletor. Ele seleciona os elementos do DOM aos quais a regra se aplica.

- -
-
Mais detalhes
- -

A parte dentro das chaves é a declaração.

- -

A palavra-chave color é uma propriedade e red é um valor.

- -

O ponto e vírgula depois do par propriedade-valor o separa de outros pares propriedade-valor na mesma declaração.

- -

Esse tutorial se refere ao seletor strong como um seletor de tag. A Especificação do CSS se refere a este seletor como seletor de tipo.

-
- -

Esta página de tutorial explica mais sobre os seletores que você pode utilizar nas regras CSS.

- -

Em adição aos nomes das tags, você pode usar valores de atributos nos seletores. Isso permite que as regras sejam mais específicas.

- -

Dois atributos são especiais para o CSS. São eles o class e o id.

- -

Seletores com Classe

- -

Use o atributo class em um elemento para atribuir o elemento a uma determinada classe. O nome da classe é de sua escolha. Muitos elementos em um documento podem pertencer a mesma classe.

- -

Em seu CSS, digite um ponto final antes do nome da classe para usar como um seletor.

- -

Seletores com ID

- -

Use o atributo id em um elemento para atribuir um ID a esse elemento. O nome do ID é de sua escolha e ele deve ser único no documento.

- -

Em seu CSS, digite cerquilha (#) antes do ID quanto estiver usando em um seletor ID.

- -
-
Exemplo
-Esta tag HTML tem tanto um atributo class quanto um atributo id: - -
<p class="chave" id="principal">
-
- -

O valor de id, principal, precisa ser unico no documento, mas outras tags no documento podem ter o atributo class com o mesmo nome, chave.

- -

Em uma folha de estilo CSS, esta regra torna verde todos os elementos da classe chave. (Eles podem ou não serem elementos {{ HTMLElement("p") }}.)

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

Esta regra torna negrito um elemento com id principal:

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

Seletores de Atributo

- -

Você não está restrito aos dois atributos especiais, class e id. Você pode especificar outros atributos usando colchetes. Dentro dos colchetes você insere o nome do atributo, opcionalmente seguido por um operador correspondente e um valor. Além disso, a seleção pode ser feita case-insensitive adicionando um "i" depois do valor, mas nem todos os browsers suportam esta funcionalidade ainda. Exemplos:

- -
-
[disabled]
-
Seleciona todos os elementos com o atributo "disabled".
-
[type='button']
-
Seleciona todos os elementos do tipo "button".
-
[class~=key]
-
Seleciona elementos com a classe "key" (mas não ex: "keyed", "monkey", "buckeye"). Funcionalmente equivalente a .key.
-
[lang|=es]
-
Selects elements specified as Spanish. This includes "es" and "es-MX" but not "eu-ES" (which is Basque).
-
[title*="example" i]
-
Seleciona elementos cujo título contém "exemplo", ignorando maiúsculas e minúsculas. Nos navegadores que não suportam o sinalizador "i", esse seletor provavelmente não corresponderá a nenhum elemento.
-
a[href^="https://"]
-
Seleciona links seguros.
-
img[src$=".png"]
-
IIndiretamente seleciona imagens PNG; qualquer imagem que seja PNG mas que a URL não termine em ".png" (como quando elas são uma query string) não serão selecionadas.
-
- -

Seletores de pseudo-classes

- -

Uma pseudo-classe em CSS é uma palavra-chave adicionada aos seletores que especifica um estado especial do elemento a ser selecionado. Por exemplo  {{ Cssxref(":hover") }}, aplicará um estilo quando o usuário passar o mouse sobre o elemento especificado pelo seletor.

- -

Pseudo-classes, juntas com pseudo-elementos, te deixa aplicar um estilo para um elemento não apenas em relação ao conteúdo da árvore do documento, mas também em relação à fatores externos como o histórico do navegador ({{ cssxref(":visited") }}, por exemplo), o estado do conteúdo (como {{ cssxref(":checked") }} no mesmo elemento do formulário), ou a posição do mouse (como {{ cssxref(":hover") }} que te permite saber se o mouse está sobre um elemento ou não). Para ver uma lista completa de seletores, visite CSS3 Selectors working spec.

- -
-
Syntax
- -
selector:pseudo-class {
-  property: value;
-}
-
-
- -

Lista de pseudo-classes

- - - -

Informação: Especificidade

- -

Várias regras podem ter seletores que correspondem ao mesmo elemento. Se uma propriedade recebeu apenas uma regra, não há conflito e a propriedade será definida ao elemento. Se são aplicadas mais do que uma regra a um elemento e definido a mesma propriedade, então o CSS dará prioridade à regra que tem o seletor mais específico. Um seletor ID é mais específico do que um seletor de classe, pseudo-classe ou atributo, que por sua vez é mais específico do que um de tag ou de pseudo-elemento.

- -
-
Mais detalhes
- -

Você também pode combinar seletores, fazendo um seletor mais específico. Por exemplo, o seletor .key seleciona todos os elementos que têm a classe com o nome key. O seletor p.key seleciona só os elementos {{ HTMLElement("p") }} nomeados com a classe key.

-
- -

Se a folha de estilo possui regras conflitantes e elas são igualmente específicas, então o CSS dará prioridade à regra que é posterior na folha de estilo.

- -

Quando você tem um problema com regras conflitantes, tente resolvê-los tornando uma das regras mais específicas, para que ela seja priorizada. Se você não pode fazer isto, tente mover uma das regras perto do fim da folha de estilo e então ela será priorizada.

- -

Information: Selectors based on relationships

- -

CSS has some ways to select elements based on the relationships between elements. You can use these to make selectors that are more specific.

- - - - - - - - - - - - - - - - - - - - - - - - - -
Common selectors based on relationships
SelectorSelects
A EAny E element that is a descendant of an A element (that is: a child, or a child of a child, etc.)
A > EAny E element that is a child (i.e. direct descendant) of an A element
E:first-childAny E element that is the first child of its parent
B + EAny E element that is the next sibling of a B element (that is: the next child of the same parent)
- -

You can combine these to express complex relationships.

- -

You can also use the symbol * (asterisk) to mean "any element".

- -
-
Example
- -

An HTML table has an id attribute, but its rows and cells do not have individual identifiers:

- -
<table id="data-table-1">
-...
-<tr>
-<td>Prefix</td>
-<td>0001</td>
-<td>default</td>
-</tr>
-...
-
- -

These rules make the first cell in each row underline, and the sibling of first cell in each row strikethroughted (in example 2.nd cell) . They only affect one specific table in the document:

- -
    #data-table-1 td:first-child {text-decoration: underline;}
-    #data-table-1 td:first-child + td {text-decoration: line-through;}
-
- -

The result looks like:

- - - - - - - -
- - - - - - - - -
Prefix0001default
-
-
- -
-
More details
- -

In the usual way, if you make a selector more specific, then you increase its priority.

- -

If you use these techniques, you avoid the need to specify class or id attributes on so many tags in your document. Instead, CSS does the work.

- -

In large designs where speed is important, you can make your stylesheets more efficient by avoiding complex rules that depend on relationships between elements.

- -

For more examples about tables, see Tables in the CSS Reference page.

-
- -

Action: Using class and ID selectors

- -
    -
  1. Edit your HTML file, and duplicate the paragraph by copying and pasting it.
    2. -
  2. Then add id and class attributes to the first copy, and an id attribute to the second copy as shown below. Alternatively, copy and paste the entire file again: - 
    <!doctype html>
-<html>
-  <head>
-  <meta charset="UTF-8">
-  <title>Sample document</title>
-  <link rel="stylesheet" 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>
-
    -
    3. -
  3. Now edit your CSS file. Replace the entire contents with: - 
    strong { color: red; }
-.carrot { color: orange; }
-.spinach { color: green; }
-#first { font-style: italic; }
-
    -
    4. -
  4. Save the files and refresh your browser to see the result: - - - - - - - - - -
    Cascading Style Sheets
    Cascading Style Sheets
    - -

    You can try rearranging the lines in your CSS file to show that the order has no effect.

    - -

    The class selectors .carrot and .spinach have priority over the tag selector strong.

    - -

    The ID selector #first has priority over the class and tag selectors.

    -
    5. -
- -
-
Challenges
- -
    -
  1. Without changing your HTML file, add a single rule to your CSS file that keeps all the initial letters that same color as they are now, but makes all the other text in the second paragraph blue: - - - - - - - - - -
    Cascading Style Sheets
    Cascading Style Sheets
    -
    2. -
  2. Now change the rule you have just added (without changing anything else), to make the first paragraph blue too: - - - - - - - - - -
    Cascading Style Sheets
    Cascading Style Sheets
    -
    3. -
- -
-
Possible solution
- -
    -
  1. Add a rule with an ID selector of #second and a declaration color: blue;, as shown below: - - 
    #second { color: blue; }
-
    - A more specific selector, p#second also works.
    2. -
  2. Change the selector of the new rule to be a tag selector using p: - 
    p { color: blue; }
-
    -
    3. -
-Hide solution
-See a solution for the challenge.
- -

Action: Using pseudo-classes selectors

- -
    -
  1. Create an HTML file with following content: - 
    <!doctype html>
-<html>
-  <head>
-  <meta charset="UTF-8">
-  <title>Sample document</title>
-  <link rel="stylesheet" href="style1.css">
-  </head>
-  <body>
-    <p>Go to our <a class="homepage" href="http://www.example.com/" title="Home page">Home page</a>.</p>
-  </body>
-</html>
-
    -
    2. -
  2. Now edit your CSS file. Replace the entire contents with: - 
    a.homepage:link, a.homepage:visited {
-  padding: 1px 10px 1px 10px;
-  color: #fff;
-  background: #555;
-  border-radius: 3px;
-  border: 1px outset rgba(50,50,50,.5);
-  font-family: georgia, serif;
-  font-size: 14px;
-  font-style: italic;
-  text-decoration: none;
-}
-
-a.homepage:hover, a.homepage:focus, a.homepage:active {
-  background-color: #666;
-}
-
    -
    3. -
  3. Save the files and refresh your browser to see the result (put the mouse over the following link to see the effect): - - - - - - -
    Go to our Home page
    -
    4. -
- -

Action: Using selectors based on relationships and pseudo-classes

- -

With selectors based on relationships and pseudo-classes you can create complex cascade algorithms. This is a common technique used, for example, in order to create pure-CSS dropdown menus (that is only CSS, without using JavaScript). The essence of this technique is the creation of a rule like the following:

- -
div.menu-bar ul ul {
-  display: none;
-}
-
-div.menu-bar li:hover > ul {
-  display: block;
-}
- -

to be applied to an HTML structure like the following:

- -
<div class="menu-bar">
-  <ul>
-    <li>
-      <a href="example.html">Menu</a>
-      <ul>
-        <li>
-          <a href="example.html">Link</a>
-        </li>
-        <li>
-          <a class="menu-nav" href="example.html">Submenu</a>
-          <ul>
-            <li>
-              <a class="menu-nav" href="example.html">Submenu</a>
-              <ul>
-                <li><a href="example.html">Link</a></li>
-                <li><a href="example.html">Link</a></li>
-                <li><a href="example.html">Link</a></li>
-                <li><a href="example.html">Link</a></li>
-              </ul>
-            </li>
-            <li><a href="example.html">Link</a></li>
-          </ul>
-        </li>
-      </ul>
-    </li>
-  </ul>
-</div>
-
- -

See our complete CSS-based dropdown menu example for a possible cue.

- -

What next?

- -

Your sample stylesheet is starting to look dense and complicated. The next section describes ways to make CSS easier to read.{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS", "Readable CSS")}}

diff --git a/files/pt-br/conflicting/learn/css/first_steps/how_css_works/index.html b/files/pt-br/conflicting/learn/css/first_steps/how_css_works/index.html deleted file mode 100644 index 6a66017083..0000000000 --- a/files/pt-br/conflicting/learn/css/first_steps/how_css_works/index.html +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: Como o CSS funciona -slug: conflicting/Learn/CSS/First_steps/How_CSS_works -tags: - - CSS:PrimeirosPassos - - Guía - - Iniciante - - Web -translation_of: Learn/CSS/First_steps/How_CSS_works -translation_of_original: Web/Guide/CSS/Getting_started/How_CSS_works -original_slug: Web/CSS/Getting_Started/Como_CSS_funciona ---- -

{{ CSSTutorialTOC() }}

- -

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "Why use CSS?") }} Essa terceira seção do tutorial CSS Getting Started mostra como o CSS funciona no seu navegador e a finalidade do Modelo de Objeto de Documento (DOM). Você vai aprender também como analizar seu documento de exemplo. 

- -

Informação: Como o CSS funciona

- -

Quando um navegador exibe um documento, ele deve combinar o conteúdo do documento com as informações de estilo. Ele processa o documento em duas etapas:

- -
    -
  1. O navegador converte a linguagem de marcação e o CSS  no DOM (Modelo de Objeto de Documento). O DOM representa o documento na memória do computador. Ele combina o conteúdo do documento com seu estilo.
    2. -
  2. O navegador exibe o conteúdo do DOM.
    3. -
- -

Uma linguagem de marcação utiliza elementos para definir a estrutura do documento. Você marca um elemento usando tags, que são sequências que começam com '<' e terminam com '>'. A maioria dos elementos possui tags emparelhadas, uma tag de início e uma tag final. Para a tag inicial, coloque o elemento entre '<' e '>'. Para a tag final, coloque um '/' depois do '<' e antes do nome do elemento.

- -

Dependendo da linguagem de marcação, alguns elementos possuem apenas uma tag de início, ou uma única tag em que '/' vem após o nome do elemento. Um elemento pode também ser um recipiente e incluir outros elementos entre sua tag inicial e final. Lembre-se de sempre fechar as tags dentro do recipiente.

- -

O DOM tem uma estrutura de árvore. Cada elemento, atributo e execução de texto na linguagem de marcação se torna um nó na estrutura da árvore. Os nós são definidos pelas suas relações com outros nós do DOM. Alguns elementos são pais de nós filhos, e nós filhos possuem irmãos.

- -

Entender o DOM ajuda você no design, na depuração e manutenção do seu CSS, porque o DOM é onde o CSS e o conteúdo do documento se encontram.

- -
-
Exemplo
-No seu documento de exemplo, a tag <p>  e seu final </p> criam um recipiente: - -
<p>
-  <strong>C</strong>ascading
-  <strong>S</strong>tyle
-  <strong>S</strong>heets
-</p>
-
- -

Exemplo em tempo real

- -

http://jsfiddle.net/djaniketster/6jbpS/

- -

No Dom, o nó 'P' correspondente é um pai. Seus filhos são os nós 'strongs' e os nós de texto. Os nós 'strong'  são eles próprios pais, com nós de texto como filhos.

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

Ação: Analisando um DOM

- -

Utilizando Inspetor DOM

- -

Para analisar um DOM, você precisa de um programa especial. Você pode utilizar o add-on Inspetor DOM do Mozilla (DOMi)  para analisar um DOM. Você apenas precisa instalar o add-on (veja mais detalhes abaixo).

- -
    -
  1. Use seu navegador Mozilla para abrir seu documento HTML de exemplo.
    2. -
  2. Na barra de menu do seu navegador, escolha Ferramentas  > Inspetor DOM, ou Ferramentas > Desenvolvimento Web > Inspetor DOM. -
    -
    Mais detalhes
    - -

    Se o seu navegador Mozilla não ter o DOMi, você pode instalá-lo a partir do site de Add-ons  e reiniciar seu navegador.  Depois, retorne para esse tutorial.

    - -

    Se você não quiser instalar o DOMi ( ou você está usuando um navegador que não seja Mozilla), você pode usar Raio-X Goggles na Web, conforme descrito na próxima seção. Ou você pode pular essa seção e ir direto para a próxima página. Ignorar essa seção não interfere no restante do tutorial.

    -
    -
    3. -
  3. No DOMi, expanda o nó do seu documento clicando em suas flechas. -

    Nota:  Espaçamentos em seu HTML pode fazer com que DOMi mostre alguns nós vazios de textos, que você pode ignorar.

    - -

    Parte do resultado você deverá ficar como mostrado abaixo, dependendo de qual nó você tenha expandido:

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

    Ao selecionar qualquer nó, você pode usar o painel do lado direito do DOMi para saber mais sobre o nó. Por exemplo, quando você seleciona um nó de texto, DOMi exibe o texto no painel do lado direito.

    - -

    Quando você seleciona um nó de elemento, DOMi analisa e fornece uma enorme quantidade de informações em seu painel do lado direito. Informação de estilo é apenas parte da informação que ele fornece.

    -
    4. -
- -
-
Desafio
- -

No DOMi, clique em um nó STRONG.

- -

Use o painel do lado direito do DOMi para descobrir onde a cor do nó está definida como vermelho, e onde sua aparência é mais arrojada do que um texto normal.

- - -
-
Possible solution
- -

In the menu above the right-hand pane, choose CSS Rules. You see two items listed, one that references an internal resource and one that references your stylesheet file. The internal resource defines the font-weight property as bolder; your stylesheet defines the color property as red.

-Hide solution
-Veja a solução para o desafio.
- -

Usando Raio-X Goggles da Web

- -

Raio-X Goggles da Web exibe menos informação do que o Inspetor DOM, mas é mais simples de instalar e usar.

- -
    -
  1. Vá para a página inicial do Raio-X Goggles da Web.
    2. -
  2. Arraste o link do bookmarklet na página para a barra de ferramentas do seu navegador.
    3. -
  3. Abra o seu documento HTML de exemplo.
    4. -
  4. Ative o Raio-X Goggles da Web clicando no bookmarklet na sua barra de ferramentas.
    5. -
  5. Mova o ponteiro do mouse ao redor sobre o documento para ver os elementos.
    6. -
- -

O que vem depois?

- -

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascading & Inheritance") }}Se você aceitou o desafio, você viu que as informações de estilo de mais de um ligar interagem para criar o estilo final para um elemento. A próxima página explica mais sobre essas interações.

diff --git a/files/pt-br/conflicting/learn/css/first_steps/how_css_works_199dae2aa1447fa94457a213c989744d/index.html b/files/pt-br/conflicting/learn/css/first_steps/how_css_works_199dae2aa1447fa94457a213c989744d/index.html deleted file mode 100644 index 8050022bae..0000000000 --- a/files/pt-br/conflicting/learn/css/first_steps/how_css_works_199dae2aa1447fa94457a213c989744d/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: O que é CSS -slug: >- - conflicting/Learn/CSS/First_steps/How_CSS_works_199dae2aa1447fa94457a213c989744d -translation_of: Learn/CSS/First_steps/How_CSS_works -translation_of_original: Web/Guide/CSS/Getting_started/What_is_CSS -original_slug: Web/CSS/Getting_Started/Oque_é_CSS ---- -

{{ CSSTutorialTOC() }}

- -

{{previousPage("/en-US/docs/CSS/Getting_Started", "Getting started")}} Esta é a primeira seção do tutorial de  introdução as CSS  e explica o que é CSS. Você criará um documento simples para trabalhar com CSS nelas nas próximas seções.

- -

O que é CSS ?

- -

Cascading Style Sheets (CSS) é uma linguagem para especificar como os documentos são apresentados aos usuários (Estilo do documento).

- -

Um documento é um conjunto de informações que são estruturadas utilizando uma linguagem de marcação.

- -
-
Examples
- -
    -
  • Um documento, é uma página da web como esta que você está lendo.
    - A informação que você vê em uma página web  é geralmente estruturado utilizando a linguagem de marcação HTML (HyperText Markup Language).
    • -
  • Dialogos, também chamados de Janelas Modais de um aplicativo,  são frequentemente documentos.
    - Tais diálogos podem também ser estruturados usando linguagem de marcação, como XUL. Este é frequentemente o caso em aplicações Mozilla, mas não é um caso comum.
    • -
-
- -

Neste tutorial, temos boxes com o título Mais detalhes como o box abaixo, contento informações opcionais. Se você estiver com pressa para avançar com este tutorial, sinta-se a vontade para ignorar estas boxes e avançar com o tutorial, talvez lê-lo mais tarde. Caso contrário lê-los quando chegar a eles, e talvez siga os links para saber mais.

- -
-
Mais detalhes
- -

Um documento não é a mesma coisa que um arquivo, ele pode ou não estar armazenado em um arquivo.

- -

Por exemplo, o texto que você está lendo agora não é armazenado em um arquivo. Quando seu navegador solicita esta pagina, o servidor consulta um banco de dados e gera o documento, reunindo partes do documento a partir de muitos arquivos. No entanto, neste tutorial você irá trabalhar com documentos que estão armazenados em arquivos.

- -

Para mais informações sobre documentos e linguagens de marcação, consulte outras partes deste exemplo de site de web:

- - - - - - - - - - - - - - - - - - - - -
HTMLpara paginas web
XMLpara documentos estruturados em geral
SVGpara gráficos
XULpara interfaces de usuários em Mozilla
- -

Na Parte II deste tutorial você verá exemplos dessas linguagens de marcação.

-
- -

Apresentar um documento ao usuário significa convertê-lo em uma forma que os seres humanos possam fazer uso. Navegadores como Firefox, Chrome ou Internet Explorer, são projetados para apresentar documentos visualmente  — por exemplo, na tela de um computador, projetor ou impressora.

- -
-
Mais detalhes
- -

CSS não é apenas para navegadores, e nem apenas para apresentação visual. Na terminoloia formal de CSS, o programa que apresenta  um documento a um usuário  é chamado de user agent (UA), no Brasil agente de usuário. Um navegador é apenas um UA. No entanto, na parte I deste Tutorial você vai apenas trabalhar com CSS no navegador.

- -

Para mais definições formais sobre  terminologia relacionadas com CSS, veja Definições na especificação CSS.

-
- -

Ação: Criando um documento

- -
    -
  1. Use seu computador para criar um novo diretório e um novo arquivo de texto dentro deste dire†ório. O arquivo terá o documento.
    2. -
  2. Copie e cole o código HTML abaixo . Salve o arquivo usando o nome doc1.html - 
    <!DOCTYPE html>
-<html>
-  <head>
-  <meta charset="UTF-8">
-  <title>Documento de exemplo</title>
-  </head>
-
-  <body>
-    <p>
-      <strong>C</strong>ascading
-      <strong>S</strong>tyle
-      <strong>S</strong>heets
-    </p>
-  </body>
-</html>
-
    -
    3. -
  3. No seu navegador, abra uma nova aba ou uma nova janela, e abra o arquivo que você acabou de salvar. -

    Você deve ver o texto  com as letras iniciais em negrito, como este:

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

    O que você vê no seu  navegador, pode não ser exatamente o mesmo que este, por causa das configurações em seu navegador e neste tutorial. Se existirem diferenças nas fontes espaçamentos ou cores que você vê, elas não são importantes.

    -
    4. -
- -

O que veremos depois?

- -

{{nextPage("/en-US/docs/CSS/Getting_Started/Why_use_CSS", "Why use CSS?")}}Seu documento ainda não usa CSS. Na próxima seção você usará CSS para especificar o estilo.

diff --git a/files/pt-br/conflicting/learn/css/first_steps/how_css_works_61240ddc35a4ddd533ea33cc8ccf1c87/index.html b/files/pt-br/conflicting/learn/css/first_steps/how_css_works_61240ddc35a4ddd533ea33cc8ccf1c87/index.html deleted file mode 100644 index cf66eb6b51..0000000000 --- a/files/pt-br/conflicting/learn/css/first_steps/how_css_works_61240ddc35a4ddd533ea33cc8ccf1c87/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: Por que usar CSS? -slug: >- - conflicting/Learn/CSS/First_steps/How_CSS_works_61240ddc35a4ddd533ea33cc8ccf1c87 -translation_of: Learn/CSS/First_steps/How_CSS_works -translation_of_original: Web/Guide/CSS/Getting_started/Why_use_CSS -original_slug: Web/CSS/Getting_Started/Porque_usar_CSS ---- -

{{ CSSTutorialTOC() }}

- -

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/What_is_CSS", "What is CSS?") }}Esta segunda parte do  CSS Getting Started tutorial explica a relação entre as CSS e o documento. No exercício você aprenderá como criar uma folha de estilos e linka-la para o documento que você criou para sua seção.

- -

Informação: Por que usar CSS?

- -

As CSS são usadas para definir estilos para os seus documentos, incluindo o design, layout e as variações na exbição para diferentes dispositivos e tamanho de tela. Você pode colocar suas CSS dentro da tag <head> do seu documento com uma folha de estilos incorporada, ou anexar uma folha de estilos externa . Para linkar uma folha de estilos externa para o seu documento é simples, adicione um link para a sua folha de estilos  na tag <head> de seu documento.

- -

Uma folha de estilo externa, tem muitas vantagens.:

- - - -
-
Exemplo
- -

Usando CSS, você armazena as informações de estilo em arquivos comuns que todas as páginas compartilham. Por exemplo, quando você linka varios documentos para a mesma folha de estilo que define a cor dos cabeçalhos h2, você pode aplicar o estilo para tags de cabeçalho h2 globalmente alterando apenas um atributo css..

- -

Quando um usuario exibe uma página web, o navegador do usuário carrega as informações de estilo  juntamente com o conteúdo da página.

- -

Quando um usuário imprime uma página da web,você pode fornecer informações de estilo diferente, que faz com que a página impressa fique de fácil leitura.

-
- -

Como o HTML e o CSS trabalham juntos? Em geral, você usa HTML para descrever o conteúdo do documento, não o estilo do documento. Você usa CSS para especificar o estilo do documento, e não o seu conteúdo.  Mais adiante neste tutorial, você verá algumas exceções a esta disposição.

- -
-
Mais detalhes
- -

Uma linguagem de marcação como HTML também fornece maneiras de especificar estilo.

- -

Por exemplo, você pode usar a tag <b> para fazer o texto em negrito, e pode especificar a cor de fundo  na sua tag <body>.

- -

Quando você usa CSS, normalmente evita usar esses recursos da linguagem de marcação, para deixar informações de estilo em um unico lugar.

-
- -

Ação: Criando uma folha de estilo

- -
    -
  1. Crie outro arquivo de texto no mesmo diretório que o documento doc1.html você criou na primeira seção.
    2. -
  2. Salve seu documento como: style1.css. Este arquivo será sua folha de estilos.
    3. -
  3. Em seu CSS, cole a linha abaixo, e salve o arquivo: - 
    strong {color: red;}
-
    -
    4. -
- -

Linkando seu documento para sua folha de estilo

- -
    -
  1. Para linkar seu documento para sua folha de estilos, edite seu arquivo HTML. Adicionando o código abaixo: - 
    <!DOCTYPE html>
-<html>
-  <head>
-  <meta charset="UTF-8">
-  <title>Documento Simples com CSS</title>
-  <link rel="stylesheet" href="style1.css">
-  </head>
-  <body>
-    <p>
-      <strong>C</strong>ascading
-      <strong>S</strong>tyle
-      <strong>S</strong>heets
-    </p>
-  </body>
-</html>
-
    -
    2. -
  2. Salve o arquivo e atualize seu navegador. Sua folha de estilos fez com que as letras iniciais ficassem vermelhas: - - - - - - -
    Cascading Style Sheets
    -
    3. -
- -

{{ LiveSampleLink('Action.3A_Creating_a_stylesheet', 'View above Demo') }}

- -
-
Desafio
- -

Além do vermelho, as CSS permitem que você escolha alguns outros nomes de cores.

- -

Encontre mais cinco nomes de cores que as CSS trabalham.

- -
-
Possible solution
- -

CSS supports common color names like orange, yellow, blue, green, or black. It also supports some more exotic color names like chartreuse, fuschia, or burlywood. See CSS Color value for a complete list as well as other ways of specifying colors.

-Hide solution
-Veja a solução para este desafio.
- -

O que veremos?

- -

{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_started/How_CSS_works", "How CSS works.")}}Agora você tem um documento de exemplo linkando a uma folha de estilos, você está pronto para  aprender mais sobre como seu navegador trabalha e exibe um documento.

diff --git a/files/pt-br/conflicting/learn/css/first_steps/index.html b/files/pt-br/conflicting/learn/css/first_steps/index.html deleted file mode 100644 index c5d5ad680c..0000000000 --- a/files/pt-br/conflicting/learn/css/first_steps/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: Iniciando com o CSS -slug: conflicting/Learn/CSS/First_steps -tags: - - CSS - - Guia(2) - - Guía - - Iniciante - - Web -translation_of: Learn/CSS/First_steps -translation_of_original: Web/Guide/CSS/Getting_started -original_slug: Web/CSS/Getting_Started ---- -

 

- -

Introdução

- -

Esse tutorial é uma introdução ao Cascading Style Sheets (CSS) e aos seus recursos básicos, com exemplos práticos que você mesmo pode tentar no seu próprio computador. Está dividido em duas partes:

- - - - - -

Esse tutorial é baseado na Especificação do CSS 2.1.

- -

Quem deve usar esse tutorial?

- -

Esse tutorial é, principalmente, para iniciantes no CSS.

- -

Se você é um iniciante, utilize a parte I deste tutorial para entender o CSS e como usá-lo. Depois utilize a parte II para entender seu escopo nas plataformas Mozilla.

- -

Se você já conhece alguma coisa de CSS, sinta-se à vontade para pular as partes deste tutorial que já conhece, focando apenas no que interessa.

- -

Se você já é um desenvolvedor CSS experiente mas não com Mozilla, você pode pular para a parte II.

- -

O que você precisa saber antes de começar?

- -

Para seguir a maior parte deste tutorial você precisa de um editor de texto e, especificamente para a parte II, um navegador Mozilla (Firefox, Camino ou SeaMonkey). Você também vai precisar saber como utilizá-los.

- -

Se você não quiser trabalhar com arquivos, então você pode apenas ler o tutorial e observar as imagens, embora essa seja a maneira menos proveitosa de se aprender.

- -

Algumas partes desse tutorial exigem outro software Mozilla, mas elas são opcionais. Se você não quiser baixar este outro software Mozilla, você pode ignorá-las. O software referenciado por esse tutorial inclui:

- - - -

Nota: O CSS fornece alguns modos de se trabalhar com cores e algumas partes desse tutorial dependem de cores. Para que você possa seguir facilmente por essas partes, você vai precisar de um monitor colorido e visão colorida normal.

- -

Como usar esse tutorial

- -

Para usar esse tutorial, leia as páginas cuidadosamente e em sequência. Se você perder alguma página pode ser que encontre alguma dificuldade para entender as seguintes.

- -

Em cada página, use a sessão de Informação para entender como o CSS trabalha. Use a sessão de Ação para tentar usar o CSS no seu próprio computador.

- -

Para testar seu entendimento, faça o desafio do fim de cada página. Os links para as soluções podem ser encontrados no próprio desafio, dessa forma você não precisa olhá-las caso não queira.

- -

Para entender mais do CSS, leia as informações que você pode encontrar nos campos com a legenda Mais detalhes (More details). Utilize os links para encontrar informações de referência sobre o CSS.

- -

Parte I do Tutorial

- -

Uma guia básico passo a passo do CSS

- -
    -
  1. O que é o CSS
    2. -
  2. Porque usar o CSS
    3. -
  3. Como o CSS funciona
    4. -
  4. Cascata e herança
    5. -
  5. Seletores
    6. -
  6. CSS legível
    7. -
  7. Estilos de texto
    8. -
  8. Cores
    9. -
  9. Conteúdo
    10. -
  10. Listas
    11. -
  11. Caixas
    12. -
  12. Layout
    13. -
  13. Tabelas
    14. -
  14. Mídia
    15. -
- -

Parte II do Tutorial

- -

Exemplos do uso do CSS juntamente com outras tecnologias

- -
    -
  1. JavaScript
    2. -
  2. Gráficos SVG
    3. -
  3. Dados XML
    4. -
  4. Ligações XBL
    5. -
  5. Interfaces de usuário XUL
    6. -
- -

{{ CSSTutorialTOC() }}

- -

{{ languages( { "es": "es/CSS/Introducción", "de": "de/CSS/Einführung", "fr": "fr/CSS/Premiers_pas", "it": "it/Conoscere_i_CSS", "ja": "ja/CSS/Getting_Started", "nl": "nl/CSS/Voor_Beginners", "pl": "pl/CSS/Na_pocz\u0105tek", "pt": "pt/CSS/Como_come\u00e7ar", "zh-cn": "cn/CSS/\u5f00\u59cb" } ) }}

diff --git a/files/pt-br/conflicting/learn/html/multimedia_and_embedding/video_and_audio_content/index.html b/files/pt-br/conflicting/learn/html/multimedia_and_embedding/video_and_audio_content/index.html deleted file mode 100644 index 6b1c4dcec9..0000000000 --- a/files/pt-br/conflicting/learn/html/multimedia_and_embedding/video_and_audio_content/index.html +++ /dev/null @@ -1,241 +0,0 @@ ---- -title: Utilizando áudio e vídeo com HTML5 -slug: conflicting/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content -translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content -translation_of_original: Web/Guide/HTML/Using_HTML5_audio_and_video -original_slug: Web/HTML/Using_HTML5_audio_and_video ---- -

O HTML5 introduz o suporte de mídia embutido por meio dos elementos {{ HTMLElement("audio") }} e {{ HTMLElement("video") }}, oferecendo a possibilidade de incorporar facilmente mídia em documentos HTML.

- -

Incorporando mídia:

- -

Incorporar mídia em documentos HTML é simples:

- -
<video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls>
-  Seu navegador não suporta o elemento <code>video</code>.
-</video>
-
- -

Esse exemplo reproduz uma amostra de vídeo, com controles de reprodução, a partir do site Theora.

- -

Aqui há um exemplo de áudio incorporado em um documento HTML

- -
<audio src="/test/audio.ogg">
-<p>Seu nevegador não suporta o elemento audio.</p>
-</audio>
-
- -

O atributo src pode ser a URL do arquivo de áudio ou o caminho do arquivo no sistema local.

- -
<audio src="audio.ogg" controls autoplay loop>
-<p>Seu navegador não suporta o elemento audio </p>
-</audio>
-
- -

Esse exemplo de código usa atributos do elemento {{ HTMLElement("audio") }}:

- - - -
<audio src="audio.mp3" preload="auto" controls></audio>
-
- -

O atributo preload é usado em elementos audio para carregar arquivos grandes. Ele pode assumir 3 valores:

- - - -

Vários arquivos podem ser especificados utilizando o elemento {{ HTMLElement("source") }} para disponibilizar vídeo ou áudio codificados em formatos diferentes para navegadores diferentes. Por exemplo:

- -
<video controls>
-  <source src="foo.ogg" type="video/ogg">
-  <source src="foo.mp4" type="video/mp4">
-  Seu navegador não suporta o elemento <code>video</code>.
-</video>
-
- -

Isso reproduz o arquivo Ogg em navegadores que suportam o formato Ogg. Se o navegador não suportar Ogg, o navegador reproduz o arquivo  MPEG-4. Veja também a lista media formats supported by the audio and video elements para detalhes.

- -

Também é possível especificar os codecs que o arquivo de mídia requer; isso permite que o navegador faça escolhas mais inteligentes:

- -
<video controls>
-  <source src="foo.ogg" type="video/ogg; codecs=dirac, speex">
-  Seu navegador não suporta o elemento <code>video</code>.
-</video>
- -

Aqui é especificado que o vídeo usa os codecs Dirac e Speex. Se o navegador suportar Ogg, mas não suportar os codecs especificados, o vídeo não será reproduzido.

- -

Se o atributo type não estiver especificado, o tipo de mídia é obtido no servidor e é verificado se o navegador consegue reproduzi-lo; se ele não pode ser renderizado, o próximo source é verificado. Se nenhum dos elementps source pode ser utilizado, um evento error é enviado para o elemento video. Se o atributo type estiver especificado, ele é comparado aos tipos que o navegador consegue reproduzir, e se ele não for reconhecido, o servidor não é verificado; ao invés disso, o próximo source é verificado.

- -

Veja Media events para uma lista completa de eventos relacionados a reprodução de mídia. Para detalhes sobre os formatos de mídia suportados por vários navegadores, veja Media formats supported by the audio and video elements.

- -

Controlando a reprodução de mídia

- -

Após a mídia ser incorporada utilizando no documento HTML utilizando os novos elementos, é possível controla-los com código de JavaScript. Por exemplo, para começar (ou repetir) a reprodução, você pode fazer isto:

- -
var v = document.getElementsByTagName("video")[0];
-v.play();
-
- -

A primeira linha pega o primeiro elemento video, e a segunda chama o método play() do elemento, como definido na interface {{ interface("nsIDOMHTMLMediaElement") }}, que é utilizada para implementar elementos de mídia

- -

Controlando um reprodutor de áudio para reproduzir, pausar, aumentar e diminuir o volume usando JavaScript é simples.

- -
<audio id="demo" src="audio.mp3"></audio>
-<div>
-  <button onclick="document.getElementById('demo').play()">Reproduzir o áudio</button>
-  <button onclick="document.getElementById('demo').pause()">Pausar o áudio</button>
-  <button onclick="document.getElementById('demo').volume+=0.1">Aumentar o volume</button>
-  <button onclick="document.getElementById('demo').volume-=0.1">Diminuir o volume</button>
-</div>
-
- -

Parando o download de mídia

- -

Embora parar a reprodução de mídia seja fácil usando o método pause() do elemento, o navegador continua baixando a mídia até que o elemento de mídia seja excluído por meio da coleção de lixo.

- -

Esta é um modo para parar o download imediatamente:

- -
var mediaElement = document.getElementById("myMediaElementID");
-mediaElement.pause();
-mediaElement.src = "";
-
- -

Ao definir o atributo src do elemento de mídia para uma string vazia, o decodificador interno do elemento é destruído, o que para o download.

- - - -

Elementos de mídia provemsuporte para mover a posição atual para pontos específicos do conteúdo da mídia. Iso é feito ao definir o valor da propriedade currentTime no elemento; veja {{ domxref("HTMLMediaElement") }} para mais detalhes sobre as propriedades do elemento. Simplesmente defina o valor para o tempo, em segundos, em que você quer que a reprodução do vídeo continue.

- -

Você pode usar a propriedade seekable para determinar os valores em que é possível ir no momento. Essa propriedade retorna o objeto {{ domxref("TimeRanges") }} listando os intervalos de tempo em que você pode navegar.

- -
var mediaElement = document.getElementById('mediaElementID');
-mediaElement.seekable.start();  // Retorna o tempo em que o arquivo começa (em segundos)
-mediaElement.seekable.end();    // Retorna o tempo em que o arquivo termina (em segundos)
-mediaElement.currentTime = 122; // Ir para 122 segundos
-mediaElement.played.end();      // Retorna o numero de segundos que o navegador reproduziu
-
- -

Especificando o intervalo de reprodução

- -

Quado especificando a URI de um elemento {{ HTMLElement("audio") }} ou {{ HTMLElement("video") }}, você pode incluir opcionalmente informações adicionais para especificar a parte da mídia a ser reproduzida. Para fazer isso, use uma hashtag ("#") seguida pela descrição do fragmento da mídia.

- -

O intervalo é especificado usando a sintaxe:

- -
#t=[tempoinicial],[tempofinal]
-
- -

O tempo pode ser especificado como um nímero de segundos (como um valor de ponto flutuante) ou no formato horas:minutos:segundos (como 2:05:01 para 2 horas, 5 minutos, e 1 segundo).

- -

Alguns exemplos:

- -
-
http://foo.com/video.ogg#t=10,20
-
Especifica que o intervalo entre 10 e 20 segundos deve ser reproduzido.
-
http://foo.com/video.ogg#t=,10.5
-
Especifica que o vídeo deve ser reproduzido do início até 10,5 segundos.
-
http://foo.com/video.ogg#t=,02:00:00
-
Especifica que o vídeo deve ser reproduzido do início até 2 horas.
-
http://foo.com/video.ogg#t=60,
-
Especifica que o vídeo deve começar aos 60 segundos e ser reproduzido até o final.
-
- -
-

{{ gecko_callout_heading("9.0") }}

- -

O intervalo de reprodução foi adicionado à especificação URI od elemeto media no Gecko 9.0 {{ geckoRelease("9.0") }}. Atualmente, é a única parte da Media Fragments URI specification implementada pelo Gecko, e somente pode ser utilizada para especificar a fonte dos elementos media, e não na barra de endereço.

-
- -

Opções alternativas

- -

O HTML inclui elementos que podem ser colocados entre as tags iniciais e finais de codigo que é processado por navegadores que não suportam mídia em HTML5. É possível aproveitar esse fato para prover alternativas para esses navegadores.

- -

Esa seção mostra duas alternativas possíveis para vídeos. Em cada caso, se o naegador suportar HTML5, ele é usado; se não for posível, a alternativa é utilizada.

- -

Utilizando Flash

- -

Você pode utilizar Flash para reproduzir um vídeo no formato Flash caso o elemento {{ HTMLElement("video") }} não seja suportado:

- -
<video src="video.ogv" controls>
-    <object data="flvplayer.swf" type="application/x-shockwave-flash">
-      <param value="flvplayer.swf" name="movie"/>
-    </object>
-</video>
-
- -

Note que você não deve incluir classid na tag object para que outros navegadores além do Internet Explorer sejam compatíveis.

- -

Reproduzindo vídeos em Ogg usando uma applet Java

- -

Existe uma applet Java chamada Cortado que você pode utilizar como alternativa para reproduzir vídeos em Ogg em navegadores que possuem suporte a Java, mas não suportam vídeos em HTML5:

- -
<video src="my_ogg_video.ogg" controls width="320" height="240">
-  <object type="application/x-java-applet"
-          width="320" height="240">
-     <param name="archive" value="cortado.jar">
-     <param name="code" value="com.fluendo.player.Cortado.class">
-     <param name="url" value="my_ogg_video.ogg">
-     <p>You need to install Java to play this file.</p>
-  </object>
-</video>
-
- -

Se você não criar um elemento filho alternativo do elemento objeto cortado, como o elemento {{ HTMLElement("p") }} mostrado acima, o Firefox 3.5 que conseguem reproduzir o vídeo mas não tem Java instalado vao informar incorretamente ao usuário que ele precisa instalar um plugin para visualizar o conteúdo da página.

- -

{{ h1_gecko_minversion("Error handling", "2.0") }}

- -

A partir do Gecko 2.0 {{ geckoRelease("2.0") }}, o gerenciamento de erros é revisada para corresponder à última versão da especificação do HTML5. Ao invés do evento error ser enviado ao elemento media, ele é enviado ao elemento filho {{ HTMLElement("source") }} correspondente às fontes em que ocorreram o erro.

- -

Isso permite que você detecte que fonte falhou, o que pode ser útil. Considere esse código HTML:

- -
<video>
-<source id="mp4_src"
-        src="video.mp4"
-        type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
-</source>
-<source id="3gp_src"
-        src="video.3gp"
-        type='video/3gpp; codecs="mp4v.20.8, samr"'>
-</source>
-<source id="ogg_src"
-        src="video.ogv"
-        type='video/ogg; codecs="theora, vorbis"'>
-</source>
-</video>
- -

Como o FIrefox não suporta MP4 e 3GP por serem patenteados, os elementos {{ HTMLElement("source") }} com os IDs "mp4_src" e "3gp_src" vão receber eventos error antes que o rescurso Ogg seja carregado. As fontes são testadas na ordem em que aparecem, e assim que uma é carregada de maneira correta, o resto das fontes não são testadas.

- -

Detectando quando nenhuma fonte foi carregada

- -

Para detectar que todos os elementos filhos {{ HTMLElement("source") }} falharam, confira os valores do atributo networkState do elemento media. Se esse valor for HTMLMediaElement.NETWORK_NO_SOURCE, você saberá que todas as fontes falharam o carregamento.

- -

Se nesse ponto você inserir uma outra fonte ao inserir um novo elemento {{ HTMLElement("source") }} como filho do elemento media, o Gecko tenta carregar o recurso especificado.

- -

Veja também

- - - -

{{ HTML5ArticleTOC() }}

- -
{{ languages({ "fr": "fr/Utilisation_d'audio_et_video_dans_Firefox", "es": "es/Usando_audio_y_video_en_Firefox", "ja": "ja/Using_HTML5_audio_and_video","zh-cn":"zh-cn/Using_HTML5_audio_and_video" }) }}
diff --git a/files/pt-br/conflicting/learn/javascript/objects/index.html b/files/pt-br/conflicting/learn/javascript/objects/index.html deleted file mode 100644 index 76ab6bff3d..0000000000 --- a/files/pt-br/conflicting/learn/javascript/objects/index.html +++ /dev/null @@ -1,353 +0,0 @@ ---- -title: Introdução ao JavaScript Orientado a Objeto -slug: conflicting/Learn/JavaScript/Objects -tags: - - Construtor - - Encapsular - - Herança - - Intermediário - - Membros - - Objeto - - Orientado a Objeto - - POO -translation_of: Learn/JavaScript/Objects -translation_of_original: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript -original_slug: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript ---- -

JavaScript tem fortes capacidades de programação orientada a objetos, apesar de ocorrerem algumas discussões devido às diferenças da orientação a objetos no JavaScript em comparação com outras linguagens.

- -

Esse artigo começa com uma introdução à programação orientada a objetos, em seguida, revisa o modelo de objetos em JavaScript e, por fim, demonstra conceitos de programação orientada a objetos no JavaScript.

- -

Revisão do Javascript

- -

Se você não se sente confiante com conceitos de JavaScript como variáveis, tipos, funções e escopo, você pode ler sobre estes tópicos em Uma reintrodução ao JavaScript. Você também pode consultar o Core JavaScript 1.5 Guide.

- -

Programação Orientada a Objetos

- -

Programação Orientada a Objetos é um paradigma de programação que usa abstração para criar modelos baseados no mundo real. POO usa várias técnicas vindas de paradigmas previamente estabelecidos, incluindo modularidade, polimorfismo e encapsulamento. Atualmente, muitas linguagens de programação populares (como Java, JavaScript, C #, C ++, Python, PHP, Ruby e Objective-C) permitem a programação orientada a objetos (POO).

- -

A POO pode ser vista como o projeto de software utilizando uma coleção de objetos em cooperação, em oposição a uma vista tradicional, em que um programa pode ser visto como uma série de funções, ou simplesmente como uma lista de instruções para o computador. Em OOP, cada objeto é capaz de receber mensagens, processar dados e envio de mensagens para outros objetos. Cada objeto pode ser visto como uma pequena máquina independente, com um papel ou responsabilidade distinta.

- -

A POO se destina a promover uma maior flexibilidade e facilidade de manutenção na aplicação, e é muito popular em engenharia de softwares de grande escala. Em virtude de sua forte ênfase na modularidade, código orientado a objetos destina-se a ser mais simples de desenvolver e mais fácil de entender mais tarde, prestando-se a uma análise mais direta, codificação e compreensão de situações e procedimentos mais complexos do que nos métodos de programação menos modulares.

- -

Terminologia

- -
-
Namespaces
-
Um recipiente que permite empacotar todas as funcionalidades em um nome único e específico da aplicação.
-
- -
-
Classe
-
Define as características do objeto. Uma classe é uma definição modelo das propriedades e métodos de um objeto.
-
Objeto
-
Um exemplar de uma classe.
-
Atributo
-
Uma característica do objeto, como cor, modelo, fabricante se estivemos representando um veículo, por exemplo.
-
Método
-
Uma ação do objeto, como ligar, desligar, frear se estivemos representando um veículo, por exemplo. É uma subrotina ou função associada a uma classe.
-
Construtor
-
Um método chamado assim que um novo exemplar do objeto for criado. Ele geralmente tem o mesmo nome da classe que o contém.
-
Herança
-
Uma classe pode herdar características de outra classe.
-
Encapsulamento
-
Uma maneira de agrupar os dados e os métodos que usam os dados.
-
Abstração
-
A conjunção de herança complexa, métodos, propriedades de um objeto devem refletir adequadamente um modelo da realidade.
-
Polimorfismo
-
Diferentes classes podem definir o mesmo método ou propriedade.
-
- -

Para uma descrição mais extensiva sobre programação orientada a objetos, veja Orientação a objetos na Wikipédia.

- -

Programação Baseada em Protótipos

- -

Programação baseada em protótipos é um estilo de programação orientada a objetos na qual não temos presença de classes. Em vez disso, a reutilização de comportamento (equivalente à herança das linguagens baseadas em classes) é realizada através de um processo de decorar (ou expandir) objetos existentes que servem como protótipos. Este modelo também é conhecido como sem classes, orientado a protótipo, ou programação baseada em exemplares.

- -

O exemplo original (e o mais canônico ) de uma linguagem baseada em protótipo é a linguagem de programação Self desenvolvida por David Ungar e Randall Smith.  No entanto, o estilo de programação sem classes tem se tornado mais popular recentemente, e foi adotado por linguagens de programação como JavaScript, Cecil, NewtonScript, lo, MOO, REBOL, Kevo, Squeak (quando se utiliza o framework Viewer para manipular componentes do Morphic) e várias outras.

- -

Programação Orientada a Objetos em Javascript

- -

Namespaces

- -

Um namespace é um recipiente que permite aos desenvolvedores agrupar funcionalidades em um único nome específico para uma aplicação. Em JavaScript, um namespace é simplesmente outro objeto contendo métodos, propriedades e objetos.

- -
-

Nota: É importante notar que, em Javascript, não existe diferença a nível da linguagem entre objetos normais e namespaces. Isso é diferente do que ocorre em muitas outras linguagens orientadas a objetos, e pode ser causa de confusão entre programadores(as) JavaScript novatos(as).

-
- -

A ideia por trás de criar um namespace em JavaScript é simples: cria-se um objeto global e todas as variáveis, métodos e chamadas de função tornam-se propriedades daquele objeto. O uso de namespaces também reduz a chance de conflitos de nomes em uma aplicação, já que os objetos de cada aplicação são propriedades de um objeto global definido pela aplicação.

- -

Vamos criar um objeto global chamado MEUAPP:

- -
// namespaces global
-var MEUAPP = MEUAPP || {};
- -

No código acima, primeiro verificamos se MEUAPP já está definido (no mesmo arquivo ou em outro). Se estiver, usamos o objeto MEUAPP global existente. Caso contrário, criamos um objeto vazio chamado MEUAPP, que encapsula métodos, variáveis e objetos

- -

Podemos também criar sub-espaços de nomes.

- -
// sub namespaces
-MEUAPP.eventos = {};
- -

A seguir, temos a sintaxe para criar um namespace e adicionar variáveis, funções e um método:

- -
// Criando um recipiente chamado MEUAPP.metodosEmComum
-// para métodos e propriedades em comum
-
-MEUAPP.metodosEmComum = {
-
-  regexParaNome: "", // definindo uma expressao regular
-                     // para validação de nomes
-
-  regexParaTelefone: "",  // define uma expressao regular para
-                          //validacao de numeros de telefone
-}
-
-// Objeto junto a declaracoes de método
-
-MEUAPP.eventos = {
-
-    adicionarTratador: function(elemento, tipo, funcao) {
-
-    // codigos
-
-    },
-
-    removerTratador: function(elemento, tipo, funcao) {
-
-    // codigos
-
-    },
-
-    obterEvento: function(e) {
-
-    // codigos
-
-    }
-
-    // é possível adicionar outros métodos e propriedades
-
-}
-
-// Sintaxe para usar o método adicionarTratador:
-
-MEUAPP.eventos.adicionarTratador("youre1", "tipo", tratador);
- -

Objetos inclusos por padrão

- -

JavaScript tem vários objetos incluídos em seu núcleo; por exemplo, objetos como Math, Object, Array, e String. O exemplo abaixo mostra como usar o objeto Math para obter um número aleatório usando seu método random().

- -
console.log(Math.random());
-
- -
Nota: Este e todos os exemplos a seguir presumem que uma função console.log() está definida globalmente. A função console.log() não faz parte do JavaScript em si, mas muitos navegadores a implementam para ajudar no processo de depuração.
- -

Veja Core JavaScript 1.5 Reference:Global Objects para a lista dos objetos inclusos por padrão em JavaScript.

- -

Cada objeto em JavaScript é um exemplar do objeto Object e, portanto, herda todas as suas propriedades e métodos.

- -

Objetos Personalizados

- -

A Classe

- -

JavaScript é uma linguagem baseada em protótipos e não contém a declaração class, como vemos em C++ ou Java. Isso, às vezes, causa confusão em programadores(as) acostumados(as) a linguagens com uma declaração para classes. Em vez disto, JavaScript usa funções como classes. Definir uma classe-função é tão fácil quanto definir uma função. No exemplo abaixo, nós definimos uma nova classe chamada Pessoa.

- -
var Pessoa = function () {};
- -

O objeto (exemplar de uma classe)

- -

Para criar um novo exemplar de um objeto obj, usamos a declaração new obj, atribuindo o resultado (que é do tipo obj) a uma variável que será acessada depois.

- -

No exemplo acima, definimos uma classe chamada Pessoa. No exemplo abaixo, criamos dois exemplares (pessoa1 e pessoa2).

- -
var pessoa1 = new Pessoa();
-var pessoa2 = new Pessoa();
-
- -
Nota: Por favor, veja também Object.create para um novo e alternativo método que cria um exemplar não-inicializado.
- -

O Construtor

- -

O construtor é chamado no momento que o exemplar do objeto é criado. O construtor é um método da classe. Em JavaScript, a função serve como o construtor do objeto. Portanto, não há a necessidade de definir explicitamente um método construtor. Toda ação declarada na classe é executada no momento da criação.

- -

O construtor é usado para definir as propriedades do objeto ou para chamar metodos que preparem o objeto para o uso. O acréscimo de métodos e suas definições à classe funciona através do uso uma sintaxe diferente, descrita mais adiante, nesse artigo.

- -

No exemplo abaixo, o construtor da classe Pessoa envia uma mensagem ao log quando um exemplar de Pessoa é criado.

- -
var Pessoa = function () {
-  console.log("exemplar criado");
-}
-
-var pessoa1 = new Pessoa();
-var pessoa2 = new Pessoa();
-
- -

Propriedades (atributos de objetos)

- -

Propriedades são variáveis contidas em uma classe; cada exemplar do objeto tem essas propriedades. Propriedades devem ser definidas no construtor (ou função) da classe, de modo que sejam criados em cada exemplar.

- -

A palavra-chave this, que se refere ao objeto atual, te permite trabalhar com propriedades do lado de dentro da classe. Acessos (leitura ou escrita) uma propriedade do lado de fora da classe são feitos com a sintaxe NomeDoExemplar.Propriedade, assim como em C++, Java e várias outras linguagens. (Dentro da classe, a sintaxe this.Propriedade é usada para obter ou atribuir um valor ao objeto.)

- -
var Pessoa = function(nome) {
-  this.nome = nome;
-  console.log('Exemplar de Pessoa criado');
-};
-
-var pessoa1 = new Pessoa('Alice');
-var pessoa2 = new Pessoa('Bob');
-
-// mostrando as propriedades nome dos objetos
-console.log('pessoa1 é ' + pessoa1.nome); // envia "pessoa1 é Alice" ao log
-console.log('pessoa2 é ' + pessoa2.nome); // envia "pessoa2 é Bob" ao log
- -

Métodos

- -

Métodos são funções (e definidos como funções), mas seguem a mesma lógica das propriedades. Chamar um método é parecido com acessar uma propriedade, mas você coloca () no final do nome do método, possivelmente com argumentos. Para definir um método, atribua uma função a uma propriedade com nome do prototype da classe. Depois disso, você pode chamar o método do objeto usando o mesmo nome ao qual você atribuiu a função.

- -

No exemplo abaixo, definimos e usarmos o método dizerOla() na classe Pessoa .

- -
var Pessoa = function (genero) {
-  this.genero = genero;
-  alert('Pessoa instanciada');
-}
-
-Pessoa.prototype.dizerOla = function()
-{
-  alert ('hello');
-};
-
-var pessoa1 = new Pessoa('Masculino');
-var pessoa2 = new Pessoa('Feminino');
-
-// Chamando o método dizerOla em Pessoa .
-pessoa1.dizerOla(); // hello
-
- -

Em JavaScript métodos são funções normais de objetos que são vinculados a uma classe/objeto como uma propriedade, o que significa que eles podem ser invocados "fora de contexto" . Considere o seguinte exemplo de código: 

- -
function Pessoa(genero) {
-  this.genero = genero;
-}
-
-Pessoa.prototype.dizGenero = function()
-{
-  alert(this.genero);
-};
-
-var pessoa1 = new Pessoa('Masculino');
-var informaGenero = pessoa1.dizGenero;
-
-pessoa1.dizGenero(); // 'Masculino'
-informaGenero(); // undefined
-alert(informaGenero === pessoa1.dizGenero); //true
-alert(informaGenero === Pessoa.prototype.dizGenero); //true
-
- -

Este exemplo demonstra vários conceitos de uma vez. Mostrando que não existem "métodos por objetos " em Javascript as referências ao método apontam para a mesma função, aquela que definimos primeiro usando prototype. JavaScript "liga" o "contexto de objeto" atual à variável especial "this", quando uma função é invocada como um método (ou propriedade para ser exato) de um objeto. Isso equivale a chamar o método "call" do objeto Function, da seguinte maneira:

- -
informaGenero.call(pessoa1); //alerts 'Masculino'
-
- -
Veja mais sobre em Function.call e Function.apply
- -

Herança

- -

Herança é uma maneira de criar uma classe como uma versão especializados de uma ou mais classes (JavaScript suporta apenas herança de classe única). A classe especializada é comumente chamada de filha, e a outra classe é comumente chamada de pai. Em JavaScript você faz isso nomeando uma instância da classe pai para a classe filha, e então especializa-a. Em navegadores modernos você também pode usar Object.create para implementar herança.

- -
-

JavaScript não detecta o  prototype.constructor da classe filha, veja a propriedade Core JavaScript 1.5 Reference:Global Objects:Object:prototype, então devemos declará-la manualmente.

-
- -

No exemplo abaixo, nós definimos a classe Estudante como filha da classe Pessoa. Então redefinimos o método dizOi() e cria o método dizTchau().

- -
// define a classe Pessoa
-function Pessoa() {}
-
-Pessoa.prototype.caminhar = function(){
-  alert ('Estou Caminhando!');
-};
-Pessoa.prototype.dizOi = function(){
-  alert ('Oi!');
-};
-
-// define a classe  Estudante
-function Estudante() {
-  // Chama o método pai
-  Pessoa.call(this);
-}
-
-// herda de Pessoa
-Estudante.prototype = new Pessoa();
-
-// corrige o ponteiro construtor, que aponta para Pessoa
-Estudante.prototype.constructor = Estudante;
-
-// adiciona o método dizOi
-Estudante.prototype.dizOi = function(){
-  alert('Oi, eu sou estudante');
-}
-
-// adiciona o método dizTchau
-Estudante.prototype.dizTchau = function(){
-  alert('tchau');
-}
-
-var estudante1 = new Estudante();
-estudante1.dizOi();
-estudante1.caminhar();
-estudante1.dizTchau();
-
-// checa a herança
-alert(estudante1 instanceof Pessoa); // true
-alert(estudante1 instanceof Estudante); // true
-
- -

Utilizando Object.create a linha de herança deveria ser:

- -
Estudante.prototype = Object.create(Pessoa.prototype);
- -

Encapsulamento

- -

Em exemplo anterior, Estudante não precisava saber como o método caminhar() da classe Pessoa seria implementada, mas ainda pode utilizar esté método; a classe Estudante não possui necessidade explícita de definir o método desde que não queremos alterar-lo. Isso se chama encapsulamento, pelo qual cada classe herda os métodos de seu pai e só precisa definir as coisas que deseja mudar.

- -

Abstração

- -

A Abstração é uma mecânica que permite modelar a parte atual do problema no trabalho.  Isso pode ser alcançado com herança (especialização), ou composição. JavaScript alcança especialização por herança, e composição por deixando instâncias de classes ser os valores de atributos de outros objetos.

- -

A Função de classe do JavaScript é hedar da classe Object (isso demonstra a especialização do modelo). e a propriedade Function.prototype é uma instância de Object (isso demonstra composição)

- -
var foo = function(){};
-alert( 'foo é um Function: ' + (foo instanceof Function) );
-alert( 'foo.prototype é um Object: ' + (foo.prototype instanceof Object) );
-
- -

Polimorfismo

- -

Assim como todos os métodos e propriedades são definidos dentro da propriedade prototype, classes diferentes podem definir métodos com o mesmo nome; os métodos tem como escopo a classe a qual foram definidos, a menos que duas classes possuam uma relação pai-filho. (ex.: uma herda da outra numa cadeia de herança).

- -

Notas

- -

As técnicas apresentadas nesse artigo para implementar programação orientada objetos em JavaScript não são as únicas que podem ser usadas.

- -

As técnicas utilizadas nesse artigo não usam nenhum tipo de hacks, nem tenta implantar teorias de outras linguagens em JavaScript. 

- -

Existem outras técnicas que fazem um uso ainda mais avançado de programação orientada a  objetos em JavaScript, mas estão além desse artigo introdutório.

- -

Referências

- -
    -
  1. Mozilla. "Core JavaScript 1.5 Guide", https://developer.mozilla.org/docs/Web/JavaScript/Guide
    2. -
  2. Wikipedia. "Object-oriented programming", http://en.wikipedia.org/wiki/Object-...ed_programming
    3. -
- -
-

Original Document Information

- -
    -
  • Author(s): Fernando Trasviña <f_trasvina at hotmail dot com>
    • -
  • Copyright Information: © 1998-2005 by individual mozilla.org contributors; content available under a Creative Commons license
    • -
-
- -

Es: https://developer.mozilla.org/es/docs/Introducción_a_JavaScript_orientado_a_objetos 

diff --git a/files/pt-br/conflicting/mdn/contribute/getting_started/index.html b/files/pt-br/conflicting/mdn/contribute/getting_started/index.html deleted file mode 100644 index da98995df7..0000000000 --- a/files/pt-br/conflicting/mdn/contribute/getting_started/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: Como ajudar a MDN -slug: conflicting/MDN/Contribute/Getting_started -translation_of: MDN/Contribute/Getting_started -translation_of_original: MDN/Contribute/Tasks -original_slug: Projeto:Como_ajudar_com_MDN ---- -
{{MDNSidebar}}
- -

Somos uma comunidade aberta de desenvolvedores criando recursos para uma web ainda melhor, independente do nosso navegador, programas ou marca. Qualquer um pode contribuir e cada pessoa que participa nos faz mais forte. Juntos, podemos continuar a impulsionar a inovação na web para servir o bem maior. Tudo começa aqui, com você.

- -

Junte-se a Comunidade

- -

Se quiser conselhos, ajuda, ou apenas nos conhecer, por favor, junte-se a nós nos seguintes canais:

- -

Canais no IRC – para conversar com colaboradores MDN:

- - - -

A reunião da comunidade MDN acontece a cada duas quartas-feiras às 10:00 da manhã, horário do pacífico (18:00 UTC inverno; 17:00 UTC verão) no canal  #devmo no irc.mozilla.org.

- -

Para entrar no IRC, siga essas instruções da wiki: https://wiki.mozilla.org/IRC#Getting_Started

- -

Listas de Email – comunicações menos frequentes para toda a comunidade MDN:

- - - -

Acesse o MDN

- -

Para adicionar, editar, ou traduzir um documento, você precisará entrar no site da MDN:

- -

https://developer.org

- -

Uma vez no site, você terá que criar uma conta na MDN. A Mozilla Developer Network usa o Persona (também conhecido como BrowserID) para gerenciar contas. O Persona é uma opção segura e fácil que protege a privacidade do usuário.

- -

Criando sua conta

- -
    -
  1. Clique no botão Entrar na parte superior da página. Uma janela abrirá com o login do Persona.
    - Screenshot of MDN site header, including Sign In button
    2. -
  2. Coloque o seu endereço de e-mail e clique em próximo.
    - Screenshot of the Persona window for a new user
    3. -
- -

O que acontece depois dependerá se você já usou este endereço de e-mail com o Persona antes.

- -
    -
  1. Se você ainda não tiver o e-mail no Persona, uma janela abrirá solicitando que você escolha uma senha. Digite a senha duas vezes e clique em verificar.
    2. -
  2. Screenshot of the Persona window for setting a password -
      -
    1. Faça a verificação do seu e-mail, acessando sua conta. Você receberá um e-mail do BrowserID@browserid.org (verifique sua caixa de SPAM se necessário).
      2. -
    2. Ao abrir o e-mail clique no link de registro.
      3. -
    3. Digite a senha para este endereço de e-mail (duas vezes), e clique em Concluir. Na guia MDN ou na janela (onde originalmente você clicou para entrar), o MDN mostrará uma página de criação de conta.
      4. -
    4. Digite um nome de usuário para associar à sua conta e clique em criar novo perfil. Observe que o nome de usuário não pode conter espaços.
      5. -
    -
    3. -
  3. Se você já usou o Persona antes, digite sua senha existente para este endereço de e-mail e clique em verificar.
    4. -
- -

Parabéns, agora você tem uma conta na MDN e poderá criar, editar e traduzir o conteúdo da documentação.

- -

Editando um conteúdo na MDN

- -

Comece editando uma página

- -
    -
  1. Verifique se você está logado na MDN (veja a seção acima para instruções)
    2. -
  2. Mude a página para o modo de edição. O conteúdo da página aparecerá dentro de um editor.
    - Screenshot of History, Watch, and Edit buttons in MDN
    - Screenshot of MDN editor
    3. -
- -

Salve o seu trabalho

- -

O editor do MDN oferece várias maneiras para você verificar e salvar seu trabalho.
- Screenshot of MDN's file management buttons, including "Save and Keep Editing", "Save Changes", "Preview Changes" and "Discard Changes"

- -
    -
  1. Save changes: Salva as alterações e sai do modo de edição, voltando à página para modo de leitura. Este é o mesmo que o botão Salvar e Sair na barra de ferramentas do editor.
    2. -
  2. Save and keep editing: Salva as alterações, mantendo-se no modo de edição. Este é o mesmo que o botão de Salvar e Continuar Editando na barra de ferramentas do editor.
    3. -
  3. Preview changes: Aplica as alterações em outra aba do navegador. Esta aba executa todos os modelos que são referenciados na página, para que você possa ver como os modelos aparecerão para os leitores.
    4. -
  4. Discard changes: Joga fora suas alterações desde a última gravação, e retorna a página para modo de leitura.
    5. -
- -

Modifique a informação da página

- -

Enquanto uma página está em modo de edição, você pode modificar alguns metadados da mesma. Clique no botão "i" para abrir os campos de informações das páginas.

- - - -

Quaisquer alterações a estes campos são salvos quando você salva a página como um todo.

- -

Formatação do Texto

- -

O editor oferece várias ferramentas, que poderão ajuda-lo a formatar o texto. Algumas delas são comuns em muitos editores e não precisam de explicação.

- - - -

Traduzindo uma página

- -
    -
  1. No menu Languages​​, clique em Add Translation.
    - Screenshot of MDN's languages menu, with "Add translation" selected
    2. -
  2. A página do idioma selecionado aparecerá.
    - Screenshot of MDN's list of languages available for translation
    3. -
  3. Clique no idioma que deseja traduzir. Deverá abrir o Translating Article, com o texto no idioma original apresentado no lado esquerdo.
    - Screenshot of MDN's translation user interface
    4. -
  4. Traduza o título e o conteúdo da página para a língua selecionada. Para isso, clique no botão "i" para aparecer as informações que você pode editar.
    5. -
  5. Clique em salvar mudanças quando tiver terminado.
    6. -
- -

Nota: Os elementos da interface do usuário "Translating Article" são inicialmente mostrados em Inglês.

- -

Editando uma página traduzida

- -

Em uma página traduzida, clique no botão Editar (que pode estar na sua língua nativa). A "Visão do Artigo Traduzido" se abrirá.
- Screenshot of MDN's translation user interface

diff --git a/files/pt-br/conflicting/mozilla/add-ons/index.html b/files/pt-br/conflicting/mozilla/add-ons/index.html deleted file mode 100644 index 7cce58b45b..0000000000 --- a/files/pt-br/conflicting/mozilla/add-ons/index.html +++ /dev/null @@ -1,264 +0,0 @@ ---- -title: Construindo um complemento -slug: conflicting/Mozilla/Add-ons -tags: - - Add-ons - - Complementos - - Tutorial -translation_of: Mozilla/Add-ons -translation_of_original: Building_an_Extension -original_slug: Construindo_um_complemento ---- -

Introdução

-

This tutorial will take you through the steps required to build a very basic extension - one which adds a status bar panel to the Firefox browser containing the text "Hello, World!".

-
- Note: The extension created by this tutorial won't work in Firefox versions that don't have a static status bar (that is, Firefox 4 and up). You can find a more up-to-date tutorial in the XUL School tutorial The Essentials of an Extension.
-

Since Firefox 4 (and other Mozilla 2 based applications) there are two types of extensions:

- -

This article explains how to build a traditional extension for Firefox. For information on bootstrapped or restartless extensions, see Bootstrapped extensions.

-

For a tutorial on building an extension for Thunderbird, see Building a Thunderbird extension.

-

Início rápido

-

A Hello World extension similar to what you can generate with the Extension Wizard is explained line-by-line in another tutorial from MozillaZine Knowledge Base.

-

Configurando o ambiente de desenvolvimento

-

Extensions are packaged and distributed in ZIP files or Bundles, with the XPI file extension.

-

An example of the content within a typical XPI file:

-
my_extension.xpi:                         //Equal to a folder named my_extension/
-          /install.rdf                    //General information about your extension
-          /chrome.manifest                //Registers your content with the Chrome engine
-          /chrome/
-          /chrome/content/                //Contents of your extension such as XUL and JavaScript files
-          /chrome/icons/default/*         //Default Icons of the extension
-          /chrome/locale/*                //Building an Extension# Localization
-          /defaults/preferences/*.js      //Building an Extension# Defaults Files
-          /plugins/*
-          /components/*
-          /components/cmdline.js
-

We'll want to create a file structure similar to the one above for our tutorial, so let's begin by creating a folder for your extension somewhere on your hard disk (e.g. C:\extensions\my_extension\ or ~/extensions/my_extension/). Inside your new extension folder, create another folder called chrome, and inside the chrome folder create a folder called content.

-

Inside the root directory of your extension folder, create two new empty text files, called chrome.manifest and install.rdf. In the chrome/content directory, create a new empty text file called sample.xul.

-

You should end up with this directory structure:

- -

<pre> #!/bin/sh h=$HOME/moExt mkdir -p $h/my_extension/chrome/content touch $h/my_extension/chrome.manifest $h/my_extension/install.rdf </pre> Please read the additional information about setting up your development environment in the article Setting up extension development environment.

-

{{ gecko_minversion_note("1.9.2", "Starting in Gecko 1.9.2 (Firefox 3.6), you can also simply include an icon, named icon.png, in the base directory of the add-on. This allows your add-on's icon to be displayed even when the add-on is disabled, or if the manifest is missing an iconURL entry.") }}

-

Criando o Manifesto de Instalação

-

Open the file called install.rdf that you created at the top of your extension's folder hierarchy and put this inside:

-
<?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@example.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.5</em:minVersion>
-        <em:maxVersion>4.0.*</em:maxVersion>
-      </Description>
-    </em:targetApplication>
-
-    <!-- Front End MetaData -->
-    <em:name>sample</em:name>
-    <em:description>A test extension</em:description>
-    <em:creator>Your Name Here</em:creator>
-    <em:homepageURL>http://www.example.com/</em:homepageURL>
-  </Description>
-</RDF>
-
- -
- Note: If you get a message that the install.rdf is malformed, it is helpful to load it into Firefox using the File->Open File command and it will report XML errors to you.
-

Extensions designed to work with Firefox 2.0.0.x at the latest should set the maximum version to "2.0.0.*". Extensions designed to work with Firefox 1.5.0.x at the latest should set the maximum version to "1.5.0.*".

-

See Install Manifests for a complete listing of the required and optional properties.

-

Save the file.

-

Extendendo o navegador com XUL

-

Firefox's user interface is written in XUL and JavaScript. XUL is an XML grammar that provides user interface widgets like buttons, menus, toolbars, trees, etc. User actions are bound to functionality using JavaScript.

-

To extend the browser, we modify parts of the browser UI by adding or modifying widgets. We add widgets by inserting new XUL DOM elements into the browser window and modify them by using script and attaching event handlers.

-

The browser is implemented in a XUL file called browser.xul ($FIREFOX_INSTALL_DIR/chrome/browser.jar contains content/browser/browser.xul). In browser.xul we can find the status bar, which looks something like this:

-
<statusbar id="status-bar">
- ... <statusbarpanel>s ...
-</statusbar>
-
-

<statusbar id="status-bar"> is a "merge point" for a XUL Overlay.

-

XUL Overlays

-

XUL Overlays are a way of attaching other UI widgets to a XUL document at runtime. A XUL Overlay is a .xul file that specifies XUL fragments to insert at specific merge points within a "master" document. These fragments can specify widgets to be inserted, removed, or modified.

-

Example XUL Overlay Document

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

The <statusbar> called status-bar specifies the "merge point" within the browser window that we want to attach to.

-

The <statusbarpanel> child is a new widget that we want to insert within the merge point.

-

Take this sample code above and save it into your file called sample.xul inside the chrome/content folder you created.

-

For more information about merging widgets and modifying the user interface using Overlays, see below.

-

Chrome URIs

-

XUL files are part of "Chrome Packages" - bundles of user interface components which are loaded via chrome:// URIs. Rather than load the browser from disk using a file:// URI (since the location of Firefox on the system can change from platform to platform and system to system), Mozilla developers came up with a solution for creating URIs to XUL content that the installed application knows about.

-

The browser window is: chrome://browser/content/browser.xul. Try typing this URL into the location bar in Firefox!

-

Chrome URIs consist of several components:

- -

So, chrome://foo/skin/bar.png loads the file bar.png from the foo theme's skin section.

-

When you load content using a Chrome URI, Firefox uses the Chrome Registry to translate these URIs into the actual source files on disk (or in JAR packages).

-

Criando um Manifesto Chrome

-

For more information on Chrome Manifests and the properties they support, see the Chrome Manifest Reference.

-

Open the file called chrome.manifest that you created alongside the chrome directory at the root of your extension's source folder hierarchy.

-

Add in this code:

-
content     sample    chrome/content/
-
-

(Don't forget the trailing slash, "/"! Without it, the package won't be registered.)

-

This specifies the:

-
    -
  1. type of material within a chrome package
    2. -
  2. name of the chrome package (make sure you use all lowercase characters for the package name ("sample") as Firefox/Thunderbird doesn't support mixed/camel case in version 2 and earlier - {{ Bug("132183") }})
    3. -
  3. location of the chrome packages' files
    4. -
-

So, this line says that for a chrome package sample, we can find its content files at the location chrome/content which is a path relative to the location of chrome.manifest.

-

Note that content, locale, and skin files must be kept inside folders called content, locale, and skin within your chrome subdirectory.

-

Save the file. When you launch Firefox with your extension (later in this tutorial), this will register the chrome package.

-

Register an Overlay

-

You need Firefox to merge your overlay with the browser window whenever it displays one. So add this line to your chrome.manifest file:

-
overlay chrome://browser/content/browser.xul chrome://sample/content/sample.xul
-
-

This tells Firefox to merge sample.xul into browser.xul when browser.xul loads.

-

Teste

-

First, we need to tell Firefox about your extension. During the development phase for Firefox versions 2.0 and higher, you can point Firefox to the folder where you are developing the extension, and it'll load it up every time you restart Firefox.

-
    -
  1. Locate your profile folder and beneath it the profile you want to work with (e.g., Firefox/Profiles/<profile_id>.default/).
    2. -
  2. Open the extensions/ folder, creating it if need be.
    3. -
  3. Create a new text file and put the full path to your development folder inside (e.g., C:\extensions\my_extension\ or ~/extensions/my_extension/). Windows users should retain the OS slash direction, and everyone should remember to include a closing slash and remove any trailing spaces.
    4. -
  4. Save the file with the id of your extension as its name (e.g., sample@example.net). No file extension.
    5. -
-

Now you should be ready to test your extension!

-

Start Firefox. Firefox will detect the text link to your extension directory and install the Extension. When the browser window appears you should see the text "Hello, World!" on the right side of the status bar panel.

-

You can now go back and make changes to the .xul file, close and restart Firefox, and they should appear.

-

Empacotando

-

Now that your extension works, you can package it for deployment and installation.

-

Zip up the contents of your extension's folder (not the extension folder itself), and rename the zip file to have a .xpi extension. In Windows XP, you can do this easily by selecting all the files and subfolders in your extension folder, right click and choose "Send To -> Compressed (Zipped) Folder". A .zip file will be created for you. Just rename it and you're done!

-

On Mac OS X, you can right-click on the contents of the extension's folder and choose "Create Archive of..." to make the zip file. However, since Mac OS X adds hidden files to folders in order to track file metadata, you should instead use the Terminal, delete the hidden files (whose names begin with a period), and then use the zip command on the command line to create the zip file.

-

On Linux, you would likewise use the command-line zip tool.

-

If you have the 'Extension Builder' extension installed, it can compile the .xpi file for you (Tools -> Extension Developer -> Extension Builder). Merely navigate to the directory where your extension is (install.rdf, etc.), and hit the Build Extension button. This extension has a slew of tools to make development easier.

-

Now upload the .xpi file to your server, making sure it's served as application/x-xpinstall. You can link to it and allow people to download and install it. For the purposes of just testing our .xpi file we can just drag it into the extensions window via Tools -> Extensions in Firefox 1.5.0.x, or Tools -> Add-ons in later versions.

-

Instalando a partir de uma página web

-

There are a variety of ways you can install extensions from web pages, including direct linking to the XPI files and using the InstallTrigger object. Extension and web authors are encouraged to use the InstallTrigger method to install XPIs, as it provides the best experience to users.

-

Usando addons.mozilla.org

-

Mozilla Add-ons is a distribution site where you can host your extension for free. Your extension will be hosted on Mozilla's mirror network to guarantee your download even though it might be very popular. Mozilla's site also provides users easier installation, and will automatically make your newer versions available to users of your existing versions when you upload them. In addition Mozilla Add-ons allows users to comment and provide feedback on your extension. It is highly recommended that you use Mozilla Add-ons to distribute your extensions!

-

Visit http://addons.mozilla.org/developers/ to create an account and begin distributing your extensions!

-

Note: Your Extension will be passed faster and downloaded more if you have a good description and some screenshots of the extension in action.

-

Instalando complementos usando uma instalador um instalador separado

-

It's possible to install an extension in a special directory and it will be installed the next time the application starts. The extension will be available to any profile. See Installing extensions for more information.

-

On Windows, information about extensions can be added to the registry, and the extensions will automatically be picked up the next time the application starts. This allows application installers to easily add integration hooks as extensions. See Adding Extensions using the Windows Registry for more information.

-

Mais sobre XUL Overlays

-

In addition to appending UI widgets to the merge point, you can use XUL fragments within Overlays to:

- -
<statusbarpanel position="1" ...  />
-
-<statusbarpanel insertbefore="other-id" ...  />
-
-<statusbarpanel insertafter="other-id" ...  />
-
-

Criando novos componentes de interface com o usuário

-

You can create your own windows and dialog boxes as separate .xul files, provide functionality by implementing user actions in .js files, using DOM methods to manipulate UI widgets. You can use style rules in .css files to attach images, set colors, etc.

-

View the XUL documentation for more resources for XUL developers.

-

Arquivos padrão

-

Defaults files that you use to seed a user's profile with should be placed in defaults/ under the root of your extension's folder hierarchy. Default preferences .js files should be stored in defaults/preferences/ - when you place them here they will be automatically loaded by Firefox's preferences system when it starts so that you can access them using the Preferences API.

-

An example default preference file:

-
pref("extensions.sample.username", "Joe"); //a string pref
-pref("extensions.sample.sort", 2); //an int pref
-pref("extensions.sample.showAdvanced", true); //a boolean pref
-
-

Componentes XPCOM

-

Firefox supports XPCOM components in extensions. You can create your own components easily in JavaScript or in C++ (using the Gecko SDK).

-

Place all of your .js or .dll files in the components/ directory - they are automatically registered the first time Firefox runs after your extension is installed.

-

For more information see How to Build an XPCOM Component in Javascript, How to build a binary XPCOM component using Visual Studio, and the Creating XPCOM Components book.

-

Aplicação de linha de comando

-

One of the possible uses of custom XPCOM components is adding a command line handler to Firefox or Thunderbird. You can use this technique to run your extension as an application:

-
 firefox.exe -myapp
-
-

I should move the useful parts of this to the Command Line page. -Nickolay This is done by adding a component containing the function... function NSGetModule(comMgr, fileSpec) { return myAppHandlerModule; } This function is run by firefox each time firefox is started. Firefox registers the myAppHandlerModule's by calling its 'registerSelf()'. Then it obtains the myAppHandlerModule's handler factory via 'getClassObject()'. The handler factory is then used to create the handle using its 'createInstance(). Finally, the handle's 'handle(cmdline)' processes the command line cmdline's handleFlagWithParam() and handleFlag(). See Chrome: Command Line and a forum discussion for details.

-

Localização

-

To support more than one language, you should separate strings from your content using entities and string bundles. It is much easier to do this while you are developing your extension, rather than come back and do it later!

-

Localization information is stored in the locale directory for the extension. For example, to add a locale to our sample extension, create two directories nested as "locale/en-US" in chrome (where the "content" directory is located) and add the following line to the chrome.manifest file:

-
locale sample en-US chrome/locale/en-US/
-
-

To create localizable attribute values in XUL, you can place the values in a .dtd file (sample.dtd for our sample extension). This file should be placed in the locale directory and looks like this:

-
<!ENTITY  my-panel.label  "Hello, World">
-
-

And then include it at the top of your XUL document (but underneath the "<?xml version"1.0"?>") like so:

-
<?xml version="1.0"?>
-<!DOCTYPE window SYSTEM "chrome://packagename/locale/filename.dtd">
-...
-
-

where window is the localName value of the root element of the XUL document, and the value of the SYSTEM property is the chrome URI to the entity file.

-

For our sample extension, replace window with overlay (root element), packagename with sample, and filename.dtd with sample.dtd.

-

To use the entities, modify your XUL to look like this:

-
<statusbarpanel id="my-panel" label="&my-panel.label;"  />
-
-

The Chrome Registry will make sure the entity file is loaded from the localization bundle corresponding to the selected locale.

-

For strings that you use in script, create a .properties file, a text file that has a string on each line in this format:

-
key=value
-
-

and then use {{ interface("nsIStringBundleService") }}/{{ interface("nsIStringBundle") }} or the {{ XULElem("stringbundle") }} tag to load the values into script.

-

Entendendo o navegador

-

Use the DOM Inspector to inspect the browser window or any other XUL window you want to extend.

-

Note: DOM Inspector is not part of the Standard Firefox installation. Since Firefox 3 Beta 4, the DOM Inspector has been available from Firefox Add-ons as a standalone extension. For earlier versions, you must reinstall with the Custom install path and choose DOM Inspector (or Developer Tools in Firefox 1.5) if there is not a "DOM Inspector" item in your browser's Tools menu.

-

Use the point-and-click node finder button at the top left of the DOM Inspector's toolbar to click on a node in the XUL window visually to select it. When you do this, the DOM inspector's DOM hierarchy tree view will jump to the node you clicked on.

-

Use the DOM Inspector's right side panel to discover merge points with ids that you can use to insert your elements from overlays. If you cannot discover an element with an id that you can merge into, you may need to attach a script in your overlay and insert your elements when the load event fires on the master XUL window.

-

Debugando complementos

-

Analytical Tools for Debugging

- -

printf debugging

- -

Advanced debugging

- -

Further information

- diff --git a/files/pt-br/conflicting/mozilla/firefox/releases/index.html b/files/pt-br/conflicting/mozilla/firefox/releases/index.html deleted file mode 100644 index 91ec12dec7..0000000000 --- a/files/pt-br/conflicting/mozilla/firefox/releases/index.html +++ /dev/null @@ -1,429 +0,0 @@ ---- -title: Notas de lançamento -slug: conflicting/Mozilla/Firefox/Releases -tags: - - Notas de lançamento -translation_of: Mozilla/Firefox/Releases -translation_of_original: Tools/Release_notes -original_slug: Tools/Notas_de_lancamento ---- -
{{ToolsSidebar}}

Firefox 53

- - - -

Todas ferramentas de desenvolvimento tiveram os erros corrigidos entre os Firefox 52 e 53.

- -

Firefox 52

- - - -

All devtools bugs fixed between Firefox 51 and Firefox 52.

- -

Firefox 51

- - - -

All devtools bugs fixed between Firefox 50 and Firefox 51.

- -

Firefox 50

- - - -

All devtools bugs fixed between Firefox 49 and Firefox 50.

- -

Firefox 49

- - - -

All devtools bugs fixed between Firefox 48 and Firefox 49.

- -

Firefox 48

- -

Highlights:

- - - -

All devtools bugs fixed between Firefox 47 and Firefox 48.

- -

Firefox 47

- -

Highlights:

- - - -

All devtools bugs fixed between Firefox 46 and Firefox 47.

- -

Firefox 46

- -

Highlights:

- - - -

All devtools bugs fixed between Firefox 45 and Firefox 46.

- -

Firefox 45

- -

Highlights:

- - - -

All devtools bugs fixed between Firefox 44 and Firefox 45.

- -

Firefox 44

- -

Highlights:

- - - -

All devtools bugs fixed between Firefox 43 and Firefox 44.

- -

Firefox 43

- -

Highlights:

- - - -

All devtools bugs fixed between Firefox 42 and Firefox 43.

- -

Firefox 42

- -

Highlights:

- - - -

All devtools bugs fixed between Firefox 41 and Firefox 42.

- -

Firefox 41

- -

Highlights:

- - - -

All devtools bugs fixed between Firefox 40 and Firefox 41. Note that many of these bugs, especially those relating to the performance tools, were uplifted to Firefox 40.

- -

Firefox 40

- -

Highlights:

- - - -

More:

- - - -

Everything: all devtools bugs fixed between Firefox 39 and Firefox 40.

- -

Firefox 39

- -

Highlights:

- - - -

All devtools bugs fixed between Firefox 38 and Firefox 39.

- -

Firefox 38

- -

Destaques:

- - - -

All devtools bugs fixed between Firefox 37 and Firefox 38.

- -

Firefox 37

- -

Destaques:

- - - -

All devtools bugs fixed between Firefox 36 and Firefox 37.

- -

Firefox 36

- -

Destaques:

- - - -

All devtools bugs fixed between Firefox 35 and Firefox 36.

- -

Firefox 35

- -

Destaques:

- - - -

All devtools bugs fixed between Firefox 34 and Firefox 35.

- -

Firefox 34

- -

Destaques:

- - - -

All devtools bugs fixed between Firefox 33 and Firefox 34.

- -

Firefox 33

- -

Destaques:

- - - -

Mais detalhes:

- - - -

All devtools bugs fixed between Firefox 32 and Firefox 33.

- -

Firefox 32

- -

Destaques:

- - - -

Mais detalhes:

- - - -

All devtools bugs fixed between Firefox 31 and Firefox 32.

- -

Firefox 31

- -

Destaques:

- - - -

Mais detalhes:

- - - -

All devtools bugs fixed between Firefox 30 and Firefox 31.

- -

Firefox 30

- -

Destaques:

- - - -

Mais detalhes:

- - - -

All devtools bugs fixed between Firefox 29 and Firefox 30.

- -

Firefox 29

- -

Firefox 29 Hacks post. Highlights:

- - - -

Firefox 28

- -

Firefox 28 Hacks post. Highlights:

- - - -

Firefox 27

- -

Firefox 27 Hacks post. Highlights:

- - diff --git a/files/pt-br/conflicting/web/accessibility/aria/widgets/index.html b/files/pt-br/conflicting/web/accessibility/aria/widgets/index.html deleted file mode 100644 index ec24fdd8c3..0000000000 --- a/files/pt-br/conflicting/web/accessibility/aria/widgets/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: Visão geral -slug: conflicting/Web/Accessibility/ARIA/widgets -tags: - - Acessibilidade - - JavaScript - - Landing - - PrecisaAtualizar -translation_of: Web/Accessibility/ARIA/widgets/overview -original_slug: Web/Accessibility/ARIA/widgets/overview ---- -
Aviso: precisa de atualização
- -

Introdução 

- -

Alguns exemplos funcionais e boas práticas na construção de widgets acessíveis aplicando JavaScript.

- -

Recursos Gerais

- - - -

Caixa de seleção

- - - - - - - -

Deslizantes

- - - -

Abas

- - - -

Combo-box

- - - - - - - -

Validação de Formulários

- - - -

Tabelas

- - diff --git a/files/pt-br/conflicting/web/accessibility/index.html b/files/pt-br/conflicting/web/accessibility/index.html deleted file mode 100644 index 98cab87efa..0000000000 --- a/files/pt-br/conflicting/web/accessibility/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: Desenvolvimento Web -slug: conflicting/Web/Accessibility -tags: - - ARIA - - Accessibility - - Acessibilidade - - DHTML - - Desenvolvimento Web - - WebMechanics - - Widgets acessíveis - - XUL -translation_of: Web/Accessibility -translation_of_original: Web/Accessibility/Web_Development -original_slug: Web/Acessibilidade/Desenvolvimento_Web ---- -

Este documento oferece mais informações para os desenvolvedores sobre as acessibilidades web e XUL

- - - - - - - - -
-

Acessibilidade na Rede Mundial

- -
-
ARIA para desenvolvedores
-
O conjunto ARIA possibilita a acessibilidade em conteúdo dinâmico HTML. São exemplos de uso de ARIA os conteúdos de regiões dinâmicas e widgets com JavaScript.
-
JavaScript para widgets navegáveis pelo teclado
-
Até agora, programadores web construiam seus modelos de widgets baseados em <div> e <span>, por faltarem as técnicas adequadas. A acessibilidade através do teclado é parte das exigências mínimas para a acessibilidade, das quais todos os desenvolvedores devem ter consciência.
-
- -

Acessibilidade XUL

- -
-
 
-
Construindo componentes personalizados e acessíveis com XUL
-
A utilização das técnicas de acessibilidade DHTML, a fim de tornar acessíveis os componentes customizados com a XUL.
-
Acessibilidade XUL - diretrizes de autoria
-
Quando a autoria está de acordo com estas diretrizes, a XUL é capaz de gerar interfaces acessíveis. Codificadores, revisores, construtores e engenheiros de produção (QA) devem se familiarizar com elas.
-
- 		-

Recursos Externos

- -
-
Mergulhe na Acessibilidade
-
Este livro responde a duas questões e a primeira, é: "Por que eu devo tornar meu sítio mais acessível?". A segunda, é: "Como eu posso fazer meu sítio mais acessível?"
-
Construindo páginas acessíveis
-
Uma boa lista sobre acessiblidade na rede mundial, feita pela IBM.
-
-
- -

 

diff --git a/files/pt-br/conflicting/web/api/crypto/getrandomvalues/index.html b/files/pt-br/conflicting/web/api/crypto/getrandomvalues/index.html deleted file mode 100644 index 77f6ade2cc..0000000000 --- a/files/pt-br/conflicting/web/api/crypto/getrandomvalues/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: RandomSource -slug: conflicting/Web/API/Crypto/getRandomValues -tags: - - API - - Interface - - RandomSource - - Referencia - - Web Crypto API -translation_of: Web/API/Crypto/getRandomValues -translation_of_original: Web/API/RandomSource -original_slug: Web/API/RandomSource ---- -

{{APIRef("Web Crypto API")}}

- -

RandomSource representa uma fonte criptografada segura de números aleatórios. É disponível via objeto {{domxref("Crypto")}} do objeto global: {{domxref("Window.crypto")}} em páginas Web, {{domxref("WorkerGlobalScope.crypto")}} em trabalhadores.

- -

RandomSource não é uma interface e nenhum objeto deste tipo pode ser criado.

- -

Propriedades

- -

RandomSource não define ou herda nenhuma propriedade.

- -
-
- -

Métodos

- -
-
{{ domxref("RandomSource.getRandomValues()") }}
-
Completa o {{ domxref("ArrayBufferView") }} com valores aleatoriamente criptografados.
-
- -

Especificação

- - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{SpecName('Web Crypto API', '#dfn-RandomSource')}}{{Spec2('Web Crypto API')}}Definição inicial.
- -

Compatibilidade de Browser

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico11.0 {{ webkitbug("22049") }}{{CompatGeckoDesktop(21)}} [1]11.015.03.1
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico{{ CompatNo() }}23{{CompatGeckoMobile(21)}}{{ CompatNo() }}{{ CompatNo() }}6
-
- -

[1] Apesar da RandomSource estar disponível apenas a partir da versão Firefox 26, ela já estava implementada na versão Firefox 21.

- -

Veja também

- - diff --git a/files/pt-br/conflicting/web/api/cryptokey/index.html b/files/pt-br/conflicting/web/api/cryptokey/index.html deleted file mode 100644 index c3357ad127..0000000000 --- a/files/pt-br/conflicting/web/api/cryptokey/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: CryptoKey.algorithm -slug: conflicting/Web/API/CryptoKey -tags: - - API - - CryptoKey - - Propriedade - - Read-only - - Referencia - - Web Crypto API -translation_of: Web/API/CryptoKey -translation_of_original: Web/API/CryptoKey/algorithm -original_slug: Web/API/CryptoKey/algorithm ---- -

{{APIRef("Web Crypto API")}}

- -

A propriedade CryptoKey.algorithm de apenas leitura é um valor opaco contendo todas as informações sobre o algoritmo relacionado à key.

- -

Implementações diferentes tem diferentes tipos de valores opacos para os mesmos: tal objeto não pode ser compartilhado.

- -

Sintaxe

- -
result = key.algorithm
-
- -

Valor de retorno

- - - -

Especificações

- - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{ SpecName('Web Crypto API', '#dfn-CryptoKey-algorithm', 'CryptoKey.algorithm') }}{{ Spec2('Web Crypto API') }}Definição inicial.
- -

Compatibilidade de Browser

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico{{ CompatChrome(37) }}{{CompatVersionUnknown}}{{ CompatGeckoDesktop(34) }}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatNo }}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico{{CompatVersionUnknown}}37{{CompatVersionUnknown}}{{ CompatGeckoMobile(34) }}{{ CompatNo }}{{ CompatUnknown() }}{{ CompatNo }}
-
- -

Veja também

- - - -

Dicionário

- -

"Key" = "Chave"

diff --git a/files/pt-br/conflicting/web/api/cryptokey_33bd21ca8f20b4cd8c7b8c762e2fc597/index.html b/files/pt-br/conflicting/web/api/cryptokey_33bd21ca8f20b4cd8c7b8c762e2fc597/index.html deleted file mode 100644 index aa0e144712..0000000000 --- a/files/pt-br/conflicting/web/api/cryptokey_33bd21ca8f20b4cd8c7b8c762e2fc597/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: CryptoKey.type -slug: conflicting/Web/API/CryptoKey_33bd21ca8f20b4cd8c7b8c762e2fc597 -tags: - - API - - Apenas Leitura - - CryptoKey - - Propriedades - - Referencia - - Web Crypto API -translation_of: Web/API/CryptoKey -translation_of_original: Web/API/CryptoKey/type -original_slug: Web/API/CryptoKey/type ---- -

{{APIRef("Web Crypto API")}}

- -

O CryptoKey.type é uma propriedade de apenas leitura que indica o tipo de key: se for uma key para um algoritmo simétrico ("secret") ou, para um algoritmo assimétrico, ("public" ou "private", dependendo do seu propósito).

- -

Sintaxe

- -
result = key.type
-
- -

Valor de retorno

- - - -

Especificações

- - - - - - - - - - - - - - -
EspecificaçõesStatusComentário
{{ SpecName('Web Crypto API', '#dfn-CryptoKey-type', 'CryptoKey.type') }}{{ Spec2('Web Crypto API') }}Definição inicial.
- -

Compatibilidade de Browser

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticasChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico{{ CompatChrome(37) }}{{CompatVersionUnknown}}{{ CompatGeckoDesktop(34) }}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatNo }}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticasAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico{{CompatVersionUnknown}}37{{CompatVersionUnknown}}{{ CompatGeckoMobile(34) }}{{ CompatNo }}{{ CompatUnknown() }}{{ CompatNo }}
-
- -

Veja também

- - - -

Dicionário:

- -

"Key" = "Chave"

diff --git a/files/pt-br/conflicting/web/api/cryptokey_53ae81677f4d9298717f2f245ae4da0d/index.html b/files/pt-br/conflicting/web/api/cryptokey_53ae81677f4d9298717f2f245ae4da0d/index.html deleted file mode 100644 index ef55c0bd81..0000000000 --- a/files/pt-br/conflicting/web/api/cryptokey_53ae81677f4d9298717f2f245ae4da0d/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: CryptoKey.extractable -slug: conflicting/Web/API/CryptoKey_53ae81677f4d9298717f2f245ae4da0d -tags: - - API - - CryptoKey - - Propriedade - - Read-only - - Referencia - - Web Crypto API -translation_of: Web/API/CryptoKey -translation_of_original: Web/API/CryptoKey/extractable -original_slug: Web/API/CryptoKey/extractable ---- -

{{APIRef("Web Crypto API")}}

- -

A propriedade de apenas leitura CryptoKey.extractable que indica se a key bruta do material pode ser extraída, para por exemplo arquivá-la.

- -

Sintaxe

- -
result = key.extractable
-
- -

Valor de retorno

- - - -

Especificações

- - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{ SpecName('Web Crypto API', '#dfn-CryptoKey-extractable', 'CryptoKey.extractable') }}{{ Spec2('Web Crypto API') }}Definição inicial.
- -

Compatibilidade de Browser

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico{{ CompatChrome(37) }}{{CompatVersionUnknown}}{{ CompatGeckoDesktop(34) }}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatNo }}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico{{CompatVersionUnknown}}37{{CompatVersionUnknown}}{{ CompatGeckoMobile(34) }}{{ CompatNo }}{{ CompatUnknown() }}{{ CompatNo }}
-
- -

Veja também

- - - -

Dicionário

- -

"Key" = "Chave"

diff --git a/files/pt-br/conflicting/web/api/cryptokey_f39d256ef7fbd1cf0a1f26de1e887ae7/index.html b/files/pt-br/conflicting/web/api/cryptokey_f39d256ef7fbd1cf0a1f26de1e887ae7/index.html deleted file mode 100644 index af426c976c..0000000000 --- a/files/pt-br/conflicting/web/api/cryptokey_f39d256ef7fbd1cf0a1f26de1e887ae7/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: CryptoKey.usages -slug: conflicting/Web/API/CryptoKey_f39d256ef7fbd1cf0a1f26de1e887ae7 -tags: - - API - - CryptoKey - - Propriedade - - Read-only - - Referencia - - Web Crypto API -translation_of: Web/API/CryptoKey -translation_of_original: Web/API/CryptoKey/usages -original_slug: Web/API/CryptoKey/usages ---- -

{{APIRef("Web Crypto API")}}

- -

A propriedade de apenas leitura CryptoKey.usages é um conjunto enumerado que indica os propósitos da key.

- -

Possíveis valores são:

- - - -

Sintaxe

- -
result = key.usages
-
- -

Valor de retorno

- - - -

Especificações

- - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{ SpecName('Web Crypto API', '#dfn-CryptoKey-usages', 'CryptoKey.usages') }}{{ Spec2('Web Crypto API') }}Definição inicial.
- -

Compatibilidade de Browser

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico{{ CompatChrome(37) }}{{CompatVersionUnknown}}{{ CompatGeckoDesktop(34) }}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatNo }}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico{{CompatVersionUnknown}}37{{CompatVersionUnknown}}{{ CompatGeckoMobile(34) }}{{ CompatNo }}{{ CompatUnknown() }}{{ CompatNo }}
-
- -

Veja também

- - - -

Dicionário:

- -

"Key" = "Chave"

diff --git a/files/pt-br/conflicting/web/api/document_object_model/index.html b/files/pt-br/conflicting/web/api/document_object_model/index.html deleted file mode 100644 index ef2930bbcb..0000000000 --- a/files/pt-br/conflicting/web/api/document_object_model/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: Document Object Model (DOM) -slug: conflicting/Web/API/Document_Object_Model -tags: - - DOM - - NeedsTranslation - - References - - TopicStub -translation_of: Web/API/Document_Object_Model -translation_of_original: DOM -original_slug: DOM ---- -
- Using the W3C DOM Level 1 Core
- Introduction to the W3C DOM.
-
-

The Document Object Model (DOM) is an API for HTML and XML documents. It provides a structural representation of the document, enabling you to modify its content and visual presentation by using a scripting language such as JavaScript.

-
-
-
-

Documentation about the DOM

-
-
- Gecko DOM Reference
-
- The Gecko Document Object Model Reference.
-
- About the Document Object Model
-
- A short introduction to the DOM.
-
- The DOM and JavaScript
-
- What is the DOM? What is JavaScript? How do I use them together on my web page? This document answers these questions and more.
-
- Using dynamic styling information
-
- How to obtain information on and manipulate styling via the DOM.
-
- DOM event reference
-
- Lists all the DOM events and their meanings.
-
- History API: Manipulating the browser history
-
- Demonstrates the HTML5-introduced DOM {{ domxref("window.history") }} object, allowing dynamic changes to the browser history.
-
- File API: Using files from web applications
-
- Describes the HTML5-introduced capability to select a local file and read data from it.
-
- Using the Page Visibility API
-
- Explains how to detect and use information about a web page being in the foreground or in the background.
-
- Fullscreen API: Using the fullscreen mode
-
- Describes how to set up a page that use the whole screen, without any browser UI around it.
-
- Determining the dimensions of elements
-
- How to figure out the right way to determine the dimensions of elements, given your needs.
-
- Dynamically modifying XUL-based user interface
-
- The basics of manipulating the XUL UI with DOM methods.
-
-

View All...

-
-
-

Getting help from the community

-

You need help on a DOM-related problem and can't find the solution in the documentation?

-
    -
  • Consult the dedicated Mozilla forum: {{ DiscussionList("dev-tech-dom", "mozilla.dev.tech.dom") }}
    • -
-

Tools easing working with the DOM

- -

View All...

- - -
-
-

 

diff --git a/files/pt-br/conflicting/web/api/globaleventhandlers/onscroll/index.html b/files/pt-br/conflicting/web/api/globaleventhandlers/onscroll/index.html deleted file mode 100644 index 03eb4f79de..0000000000 --- a/files/pt-br/conflicting/web/api/globaleventhandlers/onscroll/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: window.onscroll -slug: conflicting/Web/API/GlobalEventHandlers/onscroll -translation_of: Web/API/GlobalEventHandlers/onscroll -translation_of_original: Web/API/Window/onscroll -original_slug: Web/API/Window/onscroll ---- -

{{ ApiRef() }}

-

Sumário

-

Especifica a função a ser chamada quando é feito o scroll na janela.

-

Sintaxe

-
window.onscroll = funcRef;
-
- -

Exemplos

-

Exemplo 1: Genérico

-
window.onscroll = function (oEvent) {
-  // executa um bloco de código ou funções, quando o scroll é feito na janela.
-}
-
-

Examplo 2: Dectando a rolagem

-

O exemplo a seguir, irá disparar um alerta sempre que o usuário rolar a página .

-
<!doctype html>
-<html>
-<head>
-<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-<title>onscroll test</title>
-<script type="text/javascript">
-window.onscroll = scroll;
-
-function scroll () {
- alert("evento scroll detectado! " + window.pageXOffset + " " + window.pageYOffset);
- // nota: você pode usar window.innerWidth e window.innerHeight para obter a largura e altura da área de visão.
-}
-</script>
-</head>
-
-<body>
-<p>Redimensione a janela</p>
-<p>para um tamanho pequeno,</p>
-<p>e use a barra de rolagem</p>
-<p>para mover ao redor do conteúdo da página</p>
-<p>na janela.</p>
-</body>
-</html>
-
- -

O exemplo a seguir irá mostrar um link( uma imagem de seta ) no topo da página quando a rolagem vertical atingir 500 pixels

-

 

-
<!doctype html>
-<html>
-<head>
-<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-<title>MDN Example</title>
-<script type="text/javascript">
-var bAppended = false, oBookmark = document.createElement("div");
-oBookmark.id = "arrowUp";
-oBookmark.innerHTML = "<a href=\"#\" title=\"Top of the page.\">&uarr;<\/a>";
-
-onscroll = function() {
-  var nVScroll = document.documentElement.scrollTop || document.body.scrollTop;
-  bAppended = nVScroll > 500 ?
-    bAppended || (document.body.appendChild(oBookmark), true)
-    : bAppended && (document.body.removeChild(oBookmark), false);
-};
-</script>
-<style type="text/css">
-#arrowUp {
-  position: fixed;
-  height: auto;
-  width: auto;
-  right: 10px;
-  top: 10px;
-  font-size: 48px;
-}
-#arrowUp a {
-  text-decoration: none;
-  color: black;
-  font-weight: bold;
-  font-family: serif;
-}
-</style>
-</head>
-
-<body>
-<p>Conteúdo da página aqui!</p>
-</body>
-
-</html>
-

Notas

-

{{ Bug(189308) }}, nas versões antigas do Gecko, o evento 'onscroll' era executado apenas quando a barra de rolagem era arrastada, não quando utilizada a seta do teclado ou scroll do mouse.
- Esse bug foi corrigido no Gecko 1.8/Firefox 1.5

-

Quando o window.scrollX/scrollY não é 0 -- considerando que o scroll ocorreu por algum script ou uma ação manual -- recarregando a página irá disparar o evento onscroll imediatamente.

-

Especificação

- -

{{ languages( { "zh-cn": "zh-cn/DOM/window.onscroll"} ) }}

diff --git a/files/pt-br/conflicting/web/api/html_drag_and_drop_api/index.html b/files/pt-br/conflicting/web/api/html_drag_and_drop_api/index.html deleted file mode 100644 index e8dd96166b..0000000000 --- a/files/pt-br/conflicting/web/api/html_drag_and_drop_api/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: DragDrop -slug: conflicting/Web/API/HTML_Drag_and_Drop_API -tags: - - NeedsTranslation - - TopicStub -translation_of: Web/API/HTML_Drag_and_Drop_API -translation_of_original: DragDrop -original_slug: DragDrop ---- -

 

-

See https://developer.mozilla.org/en-US/docs/DragDrop/Drag_and_Drop

diff --git a/files/pt-br/conflicting/web/api/index.html b/files/pt-br/conflicting/web/api/index.html deleted file mode 100644 index 0755dab0cf..0000000000 --- a/files/pt-br/conflicting/web/api/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: Element.name -slug: conflicting/Web/API -tags: - - API - - DOM - - Element - - NeedsBrowserCompatibility - - NeedsUpdate - - Property - - Reference - - Web -translation_of: Web/API -translation_of_original: Web/API/Element/name -original_slug: Web/API/Element/name ---- -

{{ APIRef("DOM") }}

- -

Summary

- -

name recebe ou ajusta uma propriedade name de um objeto do DOM; ele se aplica somente aos seguintes elementos: {{ HTMLelement("a") }}, {{ HTMLelement("applet") }}, {{ HTMLelement("button") }}, {{ HTMLelement("form") }}, {{ HTMLelement("frame") }}, {{ HTMLelement("iframe") }}, {{ HTMLelement("img") }}, {{ HTMLelement("input") }}, {{ HTMLelement("map") }}, {{ HTMLelement("meta") }}, {{ HTMLelement("object") }}, {{ HTMLelement("param") }}, {{ HTMLelement("select") }} e {{ HTMLelement("textarea") }}.

- -
-

Nota: A propriedade name não existe para outros elementos; diferente de tagName e nodeName, ela não é uma propriedade das interfaces {{domxref("Node")}}, {{domxref("Element")}} ou {{domxref("HTMLElement")}}.

-
- -

name pode ser usada no método {{ domxref("document.getElementsByName()") }}, em um form ou com uma coleção de elementos de formulário. Ela pode retornar um único elemento ou uma coleção quando usada com um formulário ou elementos de coleção.

- -

Sintaxe

- -
HTMLElement.name = string;
-var elName = HTMLElement.name;
-
-var fControl = HTMLFormElement.elementName;
-var controlCollection = HTMLFormElement.elements.elementName;
-
- -

Exemplo

- -
<form action="" name="formA">
-  <input type="text" value="foo">
-</form>
-
-<script type="text/javascript">
-
-  // Recebe uma referência ao primeiro elemento no formulário
-  var formElement = document.forms['formA'].elements[0];
-
-  // Fornece um name a ele
-  formElement.name = 'inputA';
-
-  // Exibe o valor do input
-  alert(document.forms['formA'].elements['inputA'].value);
-
-</script>
-
- -

Notas

- -

No Internet Explorer (IE), não é possível ajustar ou modificar a propriedade name de objetos do DOM criados com {{ domxref("document.createElement()") }}.

- -

Especificação

- -

Especificação W3C DOM 2 HTML:

- - diff --git a/files/pt-br/conflicting/web/api/url/index.html b/files/pt-br/conflicting/web/api/url/index.html deleted file mode 100644 index a4ffb566f8..0000000000 --- a/files/pt-br/conflicting/web/api/url/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: Window.URL -slug: conflicting/Web/API/URL -translation_of: Web/API/URL -translation_of_original: Web/API/Window/URL -original_slug: Web/API/Window/URL ---- -

{{ApiRef("Window")}}{{SeeCompatTable}}

- -

A propriedade Window.URL retorna um objeto que fornece métodos estáticos usados para criar e gerenciar URLs de objeto. Também pode ser chamado como um construtor para construir objetos {{domxref("URL")}}.

- -

{{AvailableInWorkers}}

- -

Sintaxe

- -

Chamando um método estático:

- -
img.src = URL.{{domxref("URL.createObjectURL", "createObjectURL")}}(blob);
- -

Construindo um novo objeto:

- -
var url = new {{domxref("URL.URL", "URL")}}("../cats/", "https://www.example.com/dogs/");
- -

Especificação

- - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{SpecName('URL', '#dom-url', 'URL')}}{{Spec2('URL')}}Initial definition
- -

Compatibilidade do navegador

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support8.0[2]{{CompatGeckoDesktop("2.0")}}[1]
- {{CompatGeckoDesktop("19.0")}}		10.015.0[2]6.0[2]
- 7.0
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}[2]{{CompatGeckoMobile("14.0")}}[1]
- {{CompatGeckoMobile("19.0")}}		{{CompatVersionUnknown}}15.0[2]6.0[2]
-
- -

[1] Do Gecko 2 (Firefox 4) ao Gecko 18 incluído, o Gecko retornou um objeto com o tipo interno nsIDOMMozURLProperty não padrão. Na prática, isso não fez diferença.

- -

[2] Implementado sob o nome não padronizado webkitURL.

- -

Veja também

- - diff --git a/files/pt-br/conflicting/web/api/webrtc_api/index.html b/files/pt-br/conflicting/web/api/webrtc_api/index.html deleted file mode 100644 index 5f6c532f3a..0000000000 --- a/files/pt-br/conflicting/web/api/webrtc_api/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: WebRTC -slug: conflicting/Web/API/WebRTC_API -tags: - - Media - - NeedsContent - - NeedsTranslation - - TopicStub - - WebRTC -translation_of: Web/API/WebRTC_API -translation_of_original: WebRTC -original_slug: WebRTC ---- -

O RTC na WebRTC significa comunicações em tempo real, tecnologia que permite transmissão de áudio/vídeo e compartilhamento de dados entre navegador clientes (pares). Como um conjunto de padrões, a WebRTC fornece a qualquer navegador com à capacidade de compartilhar dados de aplicativos e realizar teleconferências de ponto a ponto, sem a necessidade de instalar plug-ins ou software de terceiros.

- -

Os componentes WebRTC são acessados com APIs JavaScript. Atualmente em desenvolvimento estão a API Network Stream, que representa um fluxo de dados de áudio ou vídeo, e a API PeerConnection, que permite que dois ou mais usuários se comuniquem entre navegadores. Também está em desenvolvimento uma API DataChannel que permite a comunicação de outros tipos de dados para jogos em tempo real, bate-papo de texto, transferência de arquivos e assim por diante.

- -
-

Note: Grande parte desse co nteúdo está desatualizado. Vamos atualizá-lo em breve.

-
- -

Quer descobrir WebRTC? Assista a este vídeo introdutório na web!!

- - - - - - - - -
-

Documentação sobre WebRTC

- -
-
Introdução ao WebRTC
-
Um guia introdutório sobre o que é WebRTC e como funciona. -
-
Usando a API Network Stream
-
Um guia para usar a API Network Stream para transmitir áudio e vídeo.
-
Comunicações ponto a ponto com WebRTC
-
Como executar comunicações ponto a ponto usando as APIs WebRTC.
-
Capturando imagens de uma webcam
-
Um guia introdutório sobre o que é WebRTC e como funciona.
-
API MediaStream
-
A API que suporta a geração e manipulação de objetos de fluxo de mídia.
-
getUserMedia()
-
A função de navegador que fornece acesso aos dispositivos de mídia do sistema.
-
- -

Saiba mais...

- -

Exemplos

- - - 		-

Obter ajuda da comunidade

-Ao desenvolver sites e aplicações web que aproveitarão as tecnologias WebRTC, pode ser útil conversar com outras pessoas do mesmo modo.

- -
    -
  • Consulte o fórum de tópicos da mídia: {{ DiscussionList("dev-media", "mozilla.dev.media") }}
    • -
- -
    -
  • Faça sua pergunta no canal IRC de mídia da Mozilla: #media
    • -
- -

Não se esqueça da etiqueta...

- - - - -

Recursos

- - -
diff --git a/files/pt-br/conflicting/web/api/windoworworkerglobalscope/index.html b/files/pt-br/conflicting/web/api/windoworworkerglobalscope/index.html deleted file mode 100644 index 69bc73a64f..0000000000 --- a/files/pt-br/conflicting/web/api/windoworworkerglobalscope/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: WindowBase64 -slug: conflicting/Web/API/WindowOrWorkerGlobalScope -tags: - - API - - HTML-DOM - - Helper - - NeedsTranslation - - TopicStub - - WindowBase64 -translation_of: Web/API/WindowOrWorkerGlobalScope -translation_of_original: Web/API/WindowBase64 -original_slug: Web/API/WindowBase64 ---- -

{{APIRef("HTML DOM")}}

- -

The WindowBase64 helper contains utility methods to convert data to and from base64, a binary-to-text encoding scheme. For example it is used in data URIs.

- -

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 helper neither defines nor inherits any properties.

- -

Methods

- -

This helper does not inherit any methods.

- -
-
{{domxref("WindowBase64.atob()")}}
-
Decodes a string of data which has been encoded using base-64 encoding.
-
{{domxref("WindowBase64.btoa()")}}
-
Creates a base-64 encoded ASCII string from a string of binary data.
-
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#windowbase64', 'WindowBase64')}}{{Spec2('HTML WHATWG')}}No change since the latest snapshot, {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', '#windowbase64', 'WindowBase64')}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName("HTML WHATWG")}}. No change.
{{SpecName("HTML5 W3C", "#windowbase64", "WindowBase64")}}{{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]{{CompatVersionUnknown}}10.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Basic support{{CompatGeckoMobile(1)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

[1]  atob() is also available to XPCOM components implemented in JavaScript, even though {{domxref("Window")}} is not the global object in components.

- -

See also

- - diff --git a/files/pt-br/conflicting/web/api/windoworworkerglobalscope_e2691f7ad05781a30c5fc5bb3b3f633a/index.html b/files/pt-br/conflicting/web/api/windoworworkerglobalscope_e2691f7ad05781a30c5fc5bb3b3f633a/index.html deleted file mode 100644 index 4fbad68ef6..0000000000 --- a/files/pt-br/conflicting/web/api/windoworworkerglobalscope_e2691f7ad05781a30c5fc5bb3b3f633a/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: WindowTimers -slug: conflicting/Web/API/WindowOrWorkerGlobalScope_e2691f7ad05781a30c5fc5bb3b3f633a -translation_of: Web/API/WindowOrWorkerGlobalScope -translation_of_original: Web/API/WindowTimers -original_slug: Web/API/WindowTimers ---- -
{{APIRef("HTML DOM")}}
- -

WindowTimers contains utility methods to set and clear timers.

- -

There is no object of this type, though the context object, either the {{domxref("Window")}} for regular browsing scope, or the {{domxref("WorkerGlobalScope")}}  for workers, implements it.

- -

Properties

- -

This interface do not define any property, nor inherit any.

- -

Methods

- -

This interface do not inherit any method.

- -
-
{{domxref("WindowTimers.clearInterval()")}}
-
Cancels the repeated execution set using {{domxref("WindowTimers.setInterval()")}}.
-
{{domxref("WindowTimers.clearTimeout()")}}
-
Cancels the repeated 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/pt-br/conflicting/web/api_dd04ca1265cb79b990b8120e5f5070d3/index.html b/files/pt-br/conflicting/web/api_dd04ca1265cb79b990b8120e5f5070d3/index.html deleted file mode 100644 index f8041d40bb..0000000000 --- a/files/pt-br/conflicting/web/api_dd04ca1265cb79b990b8120e5f5070d3/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: WebAPI -slug: conflicting/Web/API_dd04ca1265cb79b990b8120e5f5070d3 -tags: - - Apps - - DOM - - Firefox OS - - Mobile -translation_of: Web/API -translation_of_original: WebAPI -original_slug: WebAPI ---- -

WebAPI é um termo usado para se referir a um conjunto de compatibilidade de dispositivos e acessar APIs que permitem que aplicativos Web e conteúdos para acessar o hardware do dispositivo (como o estado da bateria ou o hardware de vibração do dispositivo), bem como o acesso aos dados armazenados no dispositivo (como como o calendário ou lista de contatos). Ao acrescentar estas APIs, esperamos expandir o que a Web pode fazer hoje e apenas plataformas proprietárias foram capazes de fazer no passado.

- -
-

Nota: Esta documentação é maior do que parece, os links ainda não estão todos adicionados aqui. Estamos trabalhando ativamente para melhorar isso e esperamos ver as coisas muito melhor nas próximas semanas. Veja a página de status da documentação da WebAPI, onde estamos acompanhando o trabalho em documentos WebAPI.

-
- -
-

Nota: para uma breve explicação de cada distintivo, consulte a documentação do pacote de aplicativos.

-
- -
-
-

APIs de Comunicação

- -
-
Network Information API (API de Informação de Rede)
-
Fornece informações básicas sobre a conexão de rede atual, como a velocidade de conexão.
-
Bluetooth {{NonStandardBadge}}
-
A API WebBluetooth fornece acesso de baixo nível ao hardware Bluetooth do dispositivo.
-
Mobile Connection API (API de Conexão Móvel) {{NonStandardBadge}}
-
Expões informações sobre a conectividade do celular, como a força do sinal, informação da operadora, assim por diante.
-
Network Stats API (API de Estatísticas de Rede) {{NonStandardBadge}}
-
Monitora a utilização de dados e expõe esses dados para aplicações privilegiadas.
-
Telephony (Telefonia) {{NonStandardBadge}}
-
Permite aplicações efectuar e atender chamadas telefônicas e usar a interface de usuário de telefonia embutida.
-
WebSMS {{NonStandardBadge}}
-
Permite que aplicações enviem e recebam mensagens de texto SMS, bem como para acessar e gerenciar as mensagens armazenadas no dispositivo.
-
WiFi Information API (API de Informações WiFi) {{NonStandardBadge}}
-
-
-
Uma API privilegiada que fornece informações sobre a força do sinal, o nome da rede atual, as redes Wi-Fi disponíveis, e assim por diante.
-
-
-
- -

APIs de Acesso ao Hardware

- -
-
Ambiente Light Sensor API (API do Sensor de Luz Ambiente)
-
Fornece acesso ao sensor de luz ambiente, que permite que seu aplicativo detecte o nível de luz ao redor do dispositivo.
-
Battery Status API (API de Estado da Bateria)
-
Fornece informações sobre nível de carregamento da bateria e quando ou não o dispositivo está plugado e carregando.
-
Geolocation API (API de Geolocalização)
-
Provê informação sobre a localização física do dispositivo.
-
Pointer Lock API (API de Bloqueio do mouse)
-
Permitir aplicativos bloquearem o acesso ao mouse e ter acesso a deltas de movimento ao invés de coordenadas absolutas, o que é ótimo para jogos.
-
Proximity API (API de Proximidade)
-
Permite dectar a proximidade do dispositivo a objetos próximos, como o rosto do usuário.
-
Device Orientation API (API de Orientação do Dispositivo)
-
Fornece notificações quando a orientação do dispositivo muda.
-
Screen Orientation API (API de Orientação de Tela)
-
Fornece notificações quando a tela do dispositivo muda. Você também uasr a API para permitir seu aplicativo indicar qual orientação é preferida.
-
Vibration API (API de Vibração)
-
Permite aplicativos controlarem o hardware de vibração do dispositivo para coisas como feedback tátil em jogos. Não é a intenção para utilização como vibrações de notificação. Veja a API de Alarme para isso.
-
Camera API (API de Camera) {{NonStandardBadge}}
-
Permite aplicativos tirarem fotograficas e/ou gravar vídeos usando a camera do dispositivo.
-
Power Management API (API Gerenciamento de Energia) {{NonStandardBadge}}
-
Permite aplicativos ligar ou desligar a tela, CPU e energia do dispositivo, assim por diante. Também fornece suporte para verificar a inspecionar recursos em eventos de bloqueio.Ver todos...
-
-
- -
-

APIs de Gerenciamento de Dados

- -
-
FileHandle API
-
Fornece suporte para escrever arquivos com suporte a bloqueio.
-
IndexedDB
-
Armazenamento do lado do cliente de dados estruturados, com suporte para pesquisas de alto desempenho.
-
Settings API (API de Configurações) {{NonStandardBadge}}
-
Permite apps examinarem e alterar todas opções de configuração do sistema que são permanentemente armazenadas no dispositivo.
-
- -

Outras APIs

- -
-
Alarm API (API de Alarme)
-
Permite apps agendarem notificações. Também fornece suporte para automaticamente abrir um app em um tempo específico.
-
Simple Push API
-
Permite a plataforma enviar mensagens de notificação para aplicações específicas.
-
Notificações Web
-
Permites aplicações enviarem notificacões mostradas no nível do sistema.
-
Apps API {{NonStandardBadge}}
-
As WebApps APIs abertas fornecem suporte para instalar e gerenciar WebApps. Em complemento, suporte é dado para permitir apps determinem informações de pagamento.
-
Web Activities (Atividades Web) {{NonStandardBadge}}
-
Permite um app delegar uma atividade para outro app; por exemplo, um app pode perguntar outro app para selecionar (ou criar) e retornar uma foto. Tipicamente o usuário é capaz de configurar que apps são usados para cada atividade.
-
WebPayment API (API Pagamento Web) {{NonStandardBadge}}
-
Permite conteúdos web iniciar pagamentos e restituição para bens virtuais.
-
Browser API {{NonStandardBadge}}
-
Fornece suporte para a construção de um navegador Web completamente utilizando tecnologias da Web (em essência, um navegador em um navegador).
-
- -
-
Idle API(Notificações em Segundo Plano)
-
Permite apps receberem notificações quando o usuário não estiver ativamente utilizando o dispositivo.
-
Permissions API(API de Permissões) {{NonStandardBadge}}
-
Gerencia permissão de apps em localização centralizada. Utilizado pelo app de Configurações.
-
Time/Clock API (API de Tempo/Relógio)  {{NonStandardBadge}}
-
Fornece suporte para configuração do tempo atual. O fuso horário é definido utilizando a Settings API (API de Configurações).
-
- -

Comunidade WebAPI

- -

Se você precisa de ajuda com alguma dessas APIs, aqui estão várias maneiras que você pode conversar com outros desenvolvedores que as estão utilizando.

- -
    -
  • Consultar forum de WebAPI {{DiscussionList("dev-webapi", "mozilla.dev.webapi")}}
    • -
  • Visite o canal no IRC WebAPI: #webapi
    • -
- -

Don't forget about the netiquette...

- - - - -
-
- -

 

diff --git a/files/pt-br/conflicting/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html b/files/pt-br/conflicting/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html deleted file mode 100644 index 48fdec5b1a..0000000000 --- a/files/pt-br/conflicting/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html +++ /dev/null @@ -1,329 +0,0 @@ ---- -title: Usando CSS flexible boxes (Caixas Flexíveis) -slug: conflicting/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox -translation_of_original: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes -original_slug: CSS/Usando_caixas_flexiveis_css ---- -

{{ SeeCompatTable() }}

- -

CSS Flexible Box Layout Model (Modelo de Layout Caixas Flexíveis de CSS), também conhecida como "flexbox", é parte do rascunho da especificação do CSS3. Ele provê uma CSS Box Model otimizada para o design de interfaces com o usuário. Elementos filhos no layout flex podem ser posicionados em qualquer direção e possuem dimensões flexíveis para se adaptar ao espaço disponível. Posicionar esses nodos filhos pode ser feito facilmente, e layouts complexos podem ser construídos de uma maneira mais clara e limpa. A ordem de exibição dos elementos é independente da ordem no código fonte.

- -
Nota: a especificação de CSS Flexible Boxes Layout ainda é um rascunho, portanto todas as propriedade devem ser prefixadas com -ms-, -moz-, -o- e -webkit- para garantir a compatibilidade com os navegadores Internet Explorer, Firefox (Gecko), Opera e Chrome/Safari (Webkit), respectivamente.
- -

Veja Flexbox para uma introdução à API.

- -

Conceito de Caixas Flexíveis

- -

O algoritmo de layout flexbox é agnóstico a direcionamento, em oposição ao layout de bloco (block layout), que é orientado verticalmente, ou ao layout inline, que é orientado horizontamente. Enquanto o layout de bloco funciona bem para páginas, ele carece de definição suficiente para suportar componentes de aplicação que necessitam mudar de orientação, tamanho, aumentar ou encolher, redirecionar da vertical para horizontal, e assim por diante. Flexbox layout é o mais apropriado para os componentes de uma aplicação, ou layouts de pequena escala, enquanto o (emergente) layout de Grid (Grid layout) é planejado para larga escala. Ambos fazem parte de um esforço mais amplo com o CSS3 para proporcionar uma maior interoperabilidade de aplicações web com diferentes agentes de usuário, diferentes modos de escrita, e outras demandas de flexibilidade.

- -

Terminologia de Caixas Flexíveis

- -

Ainda que a discussão sobre flexbox gire em torno de termos como eixos horizontais ou em linha, ou eixos verticais ou em bloco, faz-se necessário uma nova terminologia para melhor descrever esse novo modelo. O diagrama abaixo ilustra os termos que serão apresentados a seguir. Ele mostra um container flex que tem uma direção no sentido da linha (NT: flex-direction of row), o que significa que os itens flex seguem uns aos outros horizontalmente através do eixo principal (NT: main axis) de acordo com o sentido de escrita (sentido em que o texto flui), nesse caso da esquerda para a direita.

- -

flex_terms.png

- -
-
Container Flex
-
O elemento pai sobre o qual os itens flex estão contidos. Um container flex é definido usando os valores flex ou inline-flex da propriedade display.
-
Item Flex
-
-

Cada nó filho de um container flex é um item flex. Quando um texto é adicionado diretamente ao container flex, ele é encapsulado e um item flex anônimo.

- -
Nota: Se um bloco anônimo contém apenas espaços em braco, o box poderá não ser gerado se ele tiver a propriedade display:none.
- -
Nota: Os filhos de um container flex que que possuem posicionamento absoluto são posicionados staticamente de acordo com o canto inicial (NT: head start corner) do container flex pai.
-
-
Eixos
-
-

Cada layout flexbox possui dois eixos: o eixo principal (NT: main axis), por onde os itens flex seguem uns aos outros e o eixo cruzado (NT: cross axis), perpendicular ao eixo principal.

- -
    -
  • A propriedade flex-direction define o eixo principal.
    • -
  • A propriedade justify-content define como os itens flex são posicionados sobre o eixo principal em uma determinada linha.
    • -
  • A propriedade align-items define o padrão sobre como os itens flex são posicionados sobre o eixo cruzado em uma determinada linha.
    • -
  • A propriedade align-self define como um determinado item flex deve ser alinhado no eixo principal. Essa propriedade sobrescreve o padrão estabelecido por align-items.
    • -
-
-
Directions
-
-

The main start/main end and cross start/cross end sides pairs of the flex container describe the origin and terminus of the flow of flex items. They follow the main axis and cross axis of the flex container in the vector established by the writing-mode (left-to-right, right-to-left, etc.).

- -
    -
  • The order property assigns elements to ordinal groups and determines which elements appear first.
    • -
  • The flex-flow property shorthands the flex-direction and flex-wrap properties to lay out the flex items.
    • -
-
-
Lines
-
-

Flex items can be laid out on either a single line or on several lines according to the flex-wrap property, which controls the direction of the cross axis and the direction in which new lines are stacked.

-
-
Dimensions
-
-

The flex items' agnostic equivalents of height and width are main size and cross size, which respectively follow the main axis and cross axis of the flex container.

- - -
-
- -

Designando uma flexible box

- -

Para designar o CSS parar elementos usandos esse estilo, a propriedade display deve ser setada da seguinte forma:

- -
display :  flex
- -

ou

- -
display : inline-flex
- -

Definindo o elemento como flex container e seus filhos como flex items. O valor flex faz o conteiner uma elemento de block-level. O valor inline-flex faz o flex conteiner um elemento  inline-level atmico.

- -
Note: For the vendor prefix tag, append the string on the display property (not on the display attribute itself). For example, display : -webkit-flex.
- -

Flexible box properties

- -

 {{ page("/en-US/docs/CSS/Flexbox", "flex- properties") }} 

- -
-
- -

Propriedades que não afetam container flexíveis

- -

Desde que os containers flexíveis usam um algoritmo de layout diferente, algumas propriedades não fazem sentido em um container flex.

- - - -

Examples

- -

These examples run in Chrome version 21 (or Chrome Canary which you can install in addition to Chrome). You can run the examples by creating a file with the code provided and loading it in Chrome Canary.

- -

Basic flex example

- -

This basic example shows how to apply "flexibility" to an element, and how sibling elements behave in a flexible state. 

- -
​<!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;
-
-      -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

- -

This example demonstrates how flexbox provides the ability to dynamically change the layout for different screen resolutions. The following diagram illustrates the transformation.

- -

HolyGrailLayout.png

- -

Illustrated here is the case where the page layout suited to a browser window must be optimized for a smart phone window. Not only must the elements reduce in size, but the order in which they are presented must change. Flexbox makes this very simple.

- -
​
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <style>
-
-  body {
-   font: 24px Helvetica;
-   background: #999999;
-  }
-
-  #main {
-   min-height: 800px;
-   margin: 0px;
-   padding: 0px;
-   display: -webkit-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-flow: 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>
- -

Things to keep in mind

- -

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.

- -

Flexibles 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{{ CompatUnknown() }}21.0{{ property_prefix("-webkit") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
diff --git a/files/pt-br/conflicting/web/css/cursor/index.html b/files/pt-br/conflicting/web/css/cursor/index.html deleted file mode 100644 index 868643493e..0000000000 --- a/files/pt-br/conflicting/web/css/cursor/index.html +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: '-moz-cell' -slug: conflicting/Web/CSS/cursor -translation_of: Web/CSS/cursor -translation_of_original: Web/CSS/-moz-cell -original_slug: Web/CSS/-moz-cell ---- -
{{CSSRef}} {{deprecated_header}}
- -

Não use esse valor! Use o valor cursor {{cssxref("cursor#cell","cell")}} em seu lugar.

diff --git a/files/pt-br/conflicting/web/guide/index.html b/files/pt-br/conflicting/web/guide/index.html deleted file mode 100644 index 946da629f5..0000000000 --- a/files/pt-br/conflicting/web/guide/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: Desenvolvimento Web -slug: conflicting/Web/Guide -translation_of: Web/Guide -translation_of_original: Web_Development -original_slug: desenvolvimento_web ---- -

Desenvolvimento web compreende todos os aspectos do desenvolvimento de um site ou aplicação web.

-

Aprenda a criar qualquer coisa desde um site simples até sites complexos e altamente interativos que incluem as mais recentes tecnologias da Web, lendo os artigos que você encontrará aqui.

- - - - - - - -
-

Documentation topics

-

Technologies

-
-
- Introduction to Web development
-
- A guide to learning how to develop for the Web.
-
- HTML
-
- HyperText Markup Language is the basic language for creating web pages and other documents displayed in a browser.
-
- CSS
-
- Cascading Style Sheets make it possible to do advanced layout and page design on the Web.
-
- JavaScript
-
- JavaScript is the most commonly used scripting language for developing web applications; it's also used in the development of Mozilla-based software.
-
- 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.
-
-

Strategies

-
-
- Web standards
-
- Learn how to make your Web site or application reach the largest number of users through compatibility with the open Web.
-
- Responsive Web design
-
- 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.
-
- Mobile Web development
-
- 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.
-
- Mozilla Web developer FAQ
-
- Frequently asked questions from Web developers. With answers!
-
-

View All...

- 		-

Community

- -

Tools

- -

View All...

-
-

 

diff --git a/files/pt-br/conflicting/web/guide/mobile/index.html b/files/pt-br/conflicting/web/guide/mobile/index.html deleted file mode 100644 index 9396f67ed5..0000000000 --- a/files/pt-br/conflicting/web/guide/mobile/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: Desenvolvimento Web móvel -slug: conflicting/Web/Guide/Mobile -tags: - - Mobile - - TopicStub - - Web Development -translation_of: Web/Guide/Mobile -translation_of_original: Web_Development/Mobile -original_slug: Web_Development/Mobile ---- -

Desenvolvimento de sites para ser visualizado em dispositivos móveis requer abordagens que certifique-se de que um site funciona também em dispositivos móveis, como faz em navegadores desktop. Os seguintes artigos descrevem algumas dessas abordagens.

- diff --git a/files/pt-br/conflicting/web/http/cors/index.html b/files/pt-br/conflicting/web/http/cors/index.html deleted file mode 100644 index a0062279d9..0000000000 --- a/files/pt-br/conflicting/web/http/cors/index.html +++ /dev/null @@ -1,214 +0,0 @@ ---- -title: Controle de Acesso do lado do servidor (CORS) -slug: conflicting/Web/HTTP/CORS -translation_of: Web/HTTP/CORS -translation_of_original: Web/HTTP/Server-Side_Access_Control -original_slug: Web/HTTP/Server-Side_Access_Control ---- -

Os sistemas de controle de acesso realizam   identificação de autorização ,  autenticação , aprovação de acesso e prestação de contas de entidades por meio de credenciais de login, incluindo  senhas , números de identificação pessoal (PINs),   varreduras biométricas e chaves físicas ou eletrônicas.

- -

O controle de acesso é uma técnica de segurança que pode ser usada para regular quem ou o que pode exibir ou usar recursos em um ambiente de computação.

- -

{{HTTPSidebar}}

- -

Os navegadores enviam Cabeçalhos HTTP específicos para solicitações entre sites iniciadas de dentro XMLHttpRequest ou da Fetch Api . Eles também esperam ver cabeçalhos HTTP específicos enviados de volta com respostas entre sites. Uma visão geral desses cabeçalhos, incluindo amostra de código JavaScript que inicia solicitações e processa respostas do servidor, além de uma discussão sobre cada cabeçalho, pode ser encontrada no artigo HTTP Access Control (CORS) article e deve ser lida como um artigo complementar para este. Este artigo aborda o processamento de solicitações de controle de acesso e a formulação de respostas de controle de acessoem PHP. O público-alvo deste artigo são programadores ou administradores de servidores. Embora os exemplos de código mostrados aqui estejam em PHP, conceitos semelhantes se aplicam ao ASP.net, Perl, Python, Java, etc .; em geral, esses conceitos podem ser aplicados a qualquer ambiente de programação do servidor que processa solicitações HTTP e formula dinamicamente respostas HTTP.

- -

Discussão de cabeçalhos HTTP

- -

O artigo que cobre os cabeçalhos HTTP usados por clientes e servidores deve ser considerado leitura de pré-requisito.

- -

Amostras de código de trabalho

- -

Os trechos de PHP (e as invocações de JavaScript para o servidor) nas seções subseqüentes são obtidos das amostras de código de trabalho postadas aqui. Eles funcionarão em navegadores que implementam sites cruzados {{domxref("XMLHttpRequest")}}.

- -

Solicitações simples entre sites

- -

Solicitações simples de controle de acesso são iniciadas quando:

- - - -

Nesse caso, as respostas podem ser enviadas de volta com base em algumas considerações.

- - - -

A seção Solicitações de controle de acesso simples mostra as trocas de cabeçalho entre cliente e servidor. Aqui está um segmento de código PHP que lida com uma solicitação simples:

- -
<?php
-
-// Consideremos acesso apenas ao domínio arunranga.com
-// Que achamos seguro acessar esse recurso como aplicattion / xml
-
-if($_SERVER['HTTP_ORIGIN'] == "http://arunranga.com") {
-    header('Access-Control-Allow-Origin: http://arunranga.com');
-    header('Content-type: application/xml');
-    readfile('arunerDotNetResource.xml');
-} else {
-  header('Content-Type: text/html');
-  echo "<html>";
-  echo "<head>";
-  echo "   <title>Another Resource</title>";
-  echo "</head>";
-  echo "<body>",
-       "<p>This resource behaves two-fold:";
-  echo "<ul>",
-         "<li>If accessed from <code>http://arunranga.com</code> it returns an XML document</li>";
-  echo   "<li>If accessed from any other origin including from simply typing in the URL into the browser's address bar,";
-  echo   "you get this HTML document</li>",
-       "</ul>",
-     "</body>",
-   "</html>";
-}
-?>
-
- -

O Origin item acima verifica se o cabeçalho enviado pelo navegador (obtido através de $ _SERVER ['HTTP_ORIGIN']]) corresponde a ' http://arunranga.com '. Se sim, ele retorna . Este exemplo pode ser visto em execução aqui . Access-Control-Allow-Origin: http://arunranga.com

- -

Solicitações comprovadas

- -

Solicitações de controle de acesso comprovadas ocorrem quando:

- - - -

A seção Solicitações de controle de acesso comprovado mostra uma troca de cabeçalho entre cliente e servidor. Um recurso do servidor que responde a uma solicitação de comprovação precisa poder fazer as seguintes determinações:

- - - -

Aqui está um exemplo no PHP de manipulação de uma solicitação preflighted :

- -
<?php
-
-if($_SERVER['REQUEST_METHOD'] == "GET") {
-
-  header('Content-Type: text/plain');
-  echo "This HTTP resource is designed to handle POSTed XML input";
-  echo "from arunranga.com and not be retrieved with GET";
-
-} elseif($_SERVER['REQUEST_METHOD'] == "OPTIONS") {
-  // Diga ao cliente que apoiamos arunranga.com
-  // e que esse comprovante seja válido por 20 dias
-
-  if($_SERVER['HTTP_ORIGIN'] == "http://arunranga.com") {
-    header('Access-Control-Allow-Origin: http://arunranga.com');
-    header('Access-Control-Allow-Methods: POST, GET, OPTIONS');
-    header('Access-Control-Allow-Headers: X-PINGARUNER');
-    header('Access-Control-Max-Age: 1728000');
-    header("Content-Length: 0");
-    header("Content-Type: text/plain");
-    //exit(0);
-  } else {
-    header("HTTP/1.1 403 Access Forbidden");
-    header("Content-Type: text/plain");
-    echo "You cannot repeat this request";
-  }
-
-} elseif($_SERVER['REQUEST_METHOD'] == "POST") {
-  //  Manipula o post primeiro obtendo o blob XML POST
-  // e, em seguida, fazendo algo e enviando resultados para o cliente
-
-  if($_SERVER['HTTP_ORIGIN'] == "http://arunranga.com") {
-    $postData = file_get_contents('php://input');
-    $document = simplexml_load_string($postData);
-
-    // Faça algo com os dados POST
-
-    $ping = $_SERVER['HTTP_X_PINGARUNER'];
-
-    header('Access-Control-Allow-Origin: http://arunranga.com');
-    header('Content-Type: text/plain');
-    echo // some string response after processing
-  } else {
-    die("POSTing Only Allowed from arunranga.com");
-  }
-} else {
-    die("No Other Methods Allowed");
-}
-?>
-
- -

Observe os cabeçalhos apropriados sendo enviados de volta em resposta à OPTIONS comprovação, bem como aos POST dados. Um recurso lida com a comprovação e com a solicitação real. Na resposta à OPTIONS solicitação, o servidor notifica o cliente de que a solicitação real pode realmente ser feita com o POST método e campos de cabeçalho como X-PINGARUNERpodem ser enviados com a solicitação real. Este exemplo pode ser visto em execução aqui .

- -

Solicitações credenciadas

- -

Solicitações de controle de acesso credenciadas - ou seja, solicitações acompanhadas de informações sobre cookies ou autenticação HTTP (e que esperam que os cookies sejam enviados com respostas) - podem ser simples ou comprovadas , dependendo dos métodos de solicitação utilizados.

- -

Em um cenário de solicitação simples , a solicitação será enviada com cookies (por exemplo, se o withCredentials sinalizador estiver ativado XMLHttpRequest). Se o servidor responder com anexado à resposta credenciada, a resposta será aceita pelo cliente e exposta ao conteúdo da web. Em uma solicitação comprovada , Se o servidor responder com Access-Control-Allow-Credentials: true anexado à resposta credenciada, a resposta será aceita pelo cliente e exposta ao conteúdo da Web. Em uma Solicitação Comprovada, o servidor pode responder com Acesso-Controle-Permitir Credenciais: true à solicitação OPTIONS.

- -

Aqui está um PHP que lida com solicitações credenciadas:

- -
<?php
-
-if($_SERVER['REQUEST_METHOD'] == "GET") {
-  header('Access-Control-Allow-Origin: http://arunranga.com');
-  header('Access-Control-Allow-Credentials: true');
-  header('Cache-Control: no-cache');
-  header('Pragma: no-cache');
-  header('Content-Type: text/plain');
-
-  // Primeiro, veja se existe um cookie
-  if (!isset($_COOKIE["pageAccess"])) {
-    setcookie("pageAccess", 1, time()+2592000);
-    echo 'I do not know you or anyone like you so I am going to';
-    echo 'mark you with a Cookie :-)';
-  } else {
-    $accesses = $_COOKIE['pageAccess'];
-    setcookie('pageAccess', ++$accesses, time()+2592000);
-    echo 'Hello -- I know you or something a lot like you!';
-    echo 'You have been to ', $_SERVER['SERVER_NAME'], ';
-    echo 'at least ', $accesses-1, ' time(s) before!';
-  }
-} elseif($_SERVER['REQUEST_METHOD'] == "OPTIONS") {
-  // Diga ao cliente que esse comprovante permanece válido por apenas 20 dias
-  if($_SERVER['HTTP_ORIGIN'] == "http://arunranga.com") {
-    header('Access-Control-Allow-Origin: http://arunranga.com');
-    header('Access-Control-Allow-Methods: GET, OPTIONS');
-    header('Access-Control-Allow-Credentials: true');
-    header('Access-Control-Max-Age: 1728000');
-    header("Content-Length: 0");
-    header("Content-Type: text/plain");
-  } else {
-    header("HTTP/1.1 403 Access Forbidden");
-    header("Content-Type: text/plain");
-    echo "You cannot repeat this request";
-  }
-} else {
-  die("This HTTP Resource can ONLY be accessed with GET or OPTIONS");
-}
-?>
-
- -

Observe que, no caso de solicitações credenciadas, o Access-Control-Allow-Origin: cabeçalho não deve ter um valor curinga de "*". Ele deve mencionar um domínio de origem válido. O exemplo acima pode ser visto em execução aqui .

- -

Exemplos do Apache

- -

Restringir o acesso a determinados URIs

- -

Um truque útil é usar uma reescrita do Apache, variável de ambiente e cabeçalhos para aplicar Access-Control-Allow-*a determinados URIs. Isso é útil, por exemplo, para restringir solicitações de origem cruzada a GET /api(.*).jsonsolicitações sem credenciais:

- -
RewriteRule ^/api(.*)\.json$ /api$1.json [CORS=True]
-Header set Access-Control-Allow-Origin "*" env=CORS
-Header set Access-Control-Allow-Methods "GET" env=CORS
-Header set Access-Control-Allow-Credentials "false" env=CORS
-
- -

Veja também

- - diff --git a/files/pt-br/conflicting/web/javascript/equality_comparisons_and_sameness/index.html b/files/pt-br/conflicting/web/javascript/equality_comparisons_and_sameness/index.html deleted file mode 100644 index 6248d01153..0000000000 --- a/files/pt-br/conflicting/web/javascript/equality_comparisons_and_sameness/index.html +++ /dev/null @@ -1,260 +0,0 @@ ---- -title: Igualdade em JavaScript -slug: conflicting/Web/JavaScript/Equality_comparisons_and_sameness -translation_of: Web/JavaScript/Equality_comparisons_and_sameness -translation_of_original: Web/JavaScript/Guide/Sameness -original_slug: Web/JavaScript/Guide/Igualdade ---- -

A ES6 possui três facilidades internas para determinar se algum x e algum y são "os mesmos". Elas são: igualdade ou "igual duplo" (==), igualdade rigorosa ou "igual triplo" (===), e Object.is. (Note que Object.is foi adicionado na ES6. Ambos igual duplo e igual triplo existiam antes da ES6, e seu comportamento permanece o mesmo.)

-

Visão geral

-

Para demonstração, aqui estão as três comparações de igualdade em uso:

-
x == y
-
x === y
-
Object.is(x, y)
-

De modo breve, o operador igual duplo irá realizar uma conversão de tipo na hora de  comparar duas coisas; o operador igual triplo fará a mesma comparação sem conversão de tipo (simplesmente sempre retornando false se os tipos forem diferentes); e Object.is se comportará da mesma forma que o operador igual triplo, mas lidando de forma especial com NaN e -0 e +0 de modo que os dois últimos não são considerados os mesmos, enquanto que Object.is(NaN, NaN) será true. (Comparar NaN com NaN geralmente—i.e., usando-se o operador igual duplo ou o operador igual triplo—resulta em false, de acordo com a IEEE 754.)

-

Note que a distinção entre todas essas formas de comparação tem a ver com a forma com que lidam com primitivos; nenhuma delas compara se os parâmetros são conceitualmente similares em estrutura. Para quaisquer objetos não-primitivos x e y que têm a mesma estrutura mas que são objetos distintos, todas as formas de comparação acima resultarão no valor false.

-

Por exemplo:

-
let x = { value: 17 };
-let y = { value: 17 };
-console.log(Object.is(x, y)); // false;
-console.log(x === y);         // false
-console.log(x == y);          // false
-

Igualdade abstrata, igualdade rigorosa, e mesmo valor

-

Na ES5, a comparação realizada por == é descrita na Seção 11.9.3, O Algoritmo de Igualdade Abstrata. A comparação === é descrita em 11.9.6, O Algoritmo de Igualdade Rigorosa. (Dê uma olhada nestes. Eles são rápidos e legíveis. Dica: leia o algoritmo de igualdade rigorosa primeiro.) A ES5 também descreve, na Seção 9.12, O Algoritmo de MesmoValor para ser usado internamente pelo engine JS. Ele é em sua maioria similar ao Algoritmo de Igualdade Rigorosa, com exceção de que 11.9.6.4 e 9.12.4 diferem na forma de lidar com Numbers (números). A ES6 simplesmente propõe expôr esse algoritmo através de Object.is.

-

Podemos ver que com os operadores igual duplo e igual triplo, com a exceção de fazer uma checagem de tipo de início em 11.9.6.1, o Algoritmo de Igualdade Rigorosa é um subconjunto do Algoritmo de Igualdade Abstrata, pois 11.9.6.2–7 corresponde a 11.9.3.1.a–f.

-

Um modelo para entender comparações de igualdade?

-

Antes da ES6, você pode ter dito, a respeito dos operadores igual duplo e igual triplo, que um é uma versão "melhorada" do outro. Por exemplo, alguém poderia dizer que o operador igual duplo é uma versão extendidad do operador igual triplo, pois o primeiro faz tudo que o último faz, com conversão de tipo em seus operandos (por exemplo, de modo que 6 == "6"). Alternativamente, alguém poderia dizer que o operador igual triplo é uma versão melhorada do operador igual duplo, pois requer que os dois operandos sejam do mesmo tipo. Qual é melhor depende de qual é a sua idéia de patamar.

-

No entanto, essa forma de pensar sobre os operados de igualdade internos não é um modelo que pode ser "esticado" para permitir um lugar para o Object.is da ES6 nesse "espectro". O Object.is não é simplesmente "menos restrito" do que o operador igual duplo ou "mais restrito" do que o operador igual triplo, nem cabe em algum lugar entre esses níveis (isto é, sendo mais restrito que o operador igual duplo, mas menos restrito que o operador igual triplo). Nós podemos ver da tabela de comparações de igualdade abaixo que isto é devido à forma com que Object.is lida com NaN. Perceba que se Object.is(NaN, NaN) resultasse no valor false, nós poderíamos dizer que ele cabe no espectro pouco restrito/restrito como uma forma ainda mais restrita do operador igual triplo, uma que faz distinção entre -0 e +0. A forma de lidar com NaN significa que isso não é verdade, no entanto. Infelizmente, Object.is simplesmente deve ser considerado em termos de duas características específicas, ao invés de sua rigorosidade (ou falta da mesma) com respeito aos operadores de igualdade.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Comparações de Igualdade
xy=====Object.is
undefinedundefinedtruetruetrue
nullnulltruetruetrue
truetruetruetruetrue
falsefalsetruetruetrue
"foo""foo"truetruetrue
{ foo: "bar" }xtruetruetrue
00truetruetrue
+0-0truetruefalse
0falsetruefalsefalse
""falsetruefalsefalse
""0truefalsefalse
"0"0truefalsefalse
"17"17truefalsefalse
new String("foo")"foo"truefalsefalse
nullundefinedtruefalsefalse
nullfalsefalsefalsefalse
undefinedfalsefalsefalsefalse
{ foo: "bar" }{ foo: "bar" }falsefalsefalse
new String("foo")new String("foo")falsefalsefalse
0nullfalsefalsefalse
0NaNfalsefalsefalse
"foo"NaNfalsefalsefalse
NaNNaNfalsefalsetrue
-

Quando usar Object.is versus o operador igual triplo

-

Além da forma com que trata o valor it NaN, de modo geral, o único caso em o comportamento especial de Object.is com a relação a zeros é capaz de ser de interesse é na busca de certos esquemas de metaprogramação, especialmente em relação a descritores de propriedade quando é desejável que seu trabalho espelhe algumas das características de Object.defineProperty. Se seu caso de uso não requer isso, sugere-se evitar-se Object.is e usar-se o operador === ao invés disso. Mesmo se seus requerimentos envolvem que comparações entre dois valores NaN resultem em true, de modo geral é mais fácil fazer-se uma checagem especial por NaNs (usando-se o método isNaN disponíveis de versões anteritores da ECMAScript) do que lidar com como computações externas possam afetar o sinal de quaisquer zeros que você possa encontrar em sua comparação.

-

Aqui está uma lista não-exaustiva de métodos e operadores internos que podem fazer com que uma distinção entre -0 e +0 se manifeste em seu código:

-
-
- - (negação unária)
-
-
-
-

É óbvio que negar 0 produz -0. Mas a abstração de uma expressão pode fazer com o valor -0 apareça de modo despercebido. Por exemplo, considere o seguinte:

- 
let stoppingForce = obj.mass * -obj.velocity
-

Se obj.velocity é 0 (ou resulta no valor 0), um -0 é introduzido naquele ponto e propaga-se para stoppingForce.

-
-
-
-
- Math.atan2
-
- Math.ceil
-
- Math.pow
-
- Math.round
-
-
-
- É possível que um -0 seja introduzido em uma expressão como um valor de retorno desses métodos em alguns casos, mesmo quando nenhum -0 existe como um dos parâmetros. Por exemplo, usando-se Math.pow para elevar o valor -Infinity à potência de qualquer expoente negativo ímpar resulta no valor -0. Veja a documentação para os métodos individuais.
-
-
-
- Math.floor
-
- Math.max
-
- Math.min
-
- Math.sin
-
- Math.sqrt
-
- Math.tan
-
-
-
- É possível obter-se um valor de retorno -0 desses métodos em alguns casos quando um -0 existe como um dos parâmetros. Por exemplo, Math.min(-0, +0) resulta no valor -0. Veja a documentação para os métodos individuais.
-
-
-
- ~
-
- <<
-
- >>
-
- Cada um desses operadores usa o algoritmo ToInt32 internamente. Uma vez que só há uma representação para o valor 0 no tipo inteiro de 32 bits interno, o valor -0 não irá sobreviver a um arredondamento depois de uma operação inversa. Por exemplo, ambos Object.is(~~(-0), -0) e Object.is(-0 << 2 >> 2, -0) resultam no valor false.
-
-

Contar com Object.is quando o sinal de zeros não é levado em consideração pode ser problemático. É claro que quando a intenção é distinguir entre -0 e +0, ele faz exatamente o que é desejado.gual

diff --git a/files/pt-br/conflicting/web/javascript/reference/global_objects/boolean/index.html b/files/pt-br/conflicting/web/javascript/reference/global_objects/boolean/index.html deleted file mode 100644 index 7a36613082..0000000000 --- a/files/pt-br/conflicting/web/javascript/reference/global_objects/boolean/index.html +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: Boolean.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/Boolean -translation_of: Web/JavaScript/Reference/Global_Objects/Boolean -translation_of_original: Web/JavaScript/Reference/Global_Objects/Boolean/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/Boolean/prototype ---- -
{{JSRef}}
- -

A propriedade Boolean.prototype representa o prototype para o construtor de {{jsxref("Boolean")}}.

- -
{{js_property_attributes(0, 0, 0)}}
- -

Descrição

- -

Instancias de {{jsxref("Boolean")}} herdam de Boolean.prototype. Você pode usar os construtores do objeto prototype para adicionar propriedados ou metodos para todas as instancias de {{jsxref("Boolean")}} instances.

- -

Propriedades

- -
-
Boolean.prototype.constructor
-
Retorna a função que criou a instancia do prototype. Esta é a função {{jsxref("Boolean")}} por padrão.
-
- -

Métodos

- -
-
{{jsxref("Boolean.prototype.toSource()")}} {{non-standard_inline}}
-
Retorna a string contendo o codigo do objeto {{jsxref("Boolean")}} ;  pode-se usar esta string para criar um objeto equivalente. Sobreescreve o método {{jsxref("Object.prototype.toSource()")}}.
-
{{jsxref("Boolean.prototype.toString()")}}
-
Retorna uma string com valor "true" ou "false" dependendo qual o valor do objeto. Sobreescreve o método {{jsxref("Object.prototype.toString()")}}.
-
{{jsxref("Boolean.prototype.valueOf()")}}
-
Retorna o valor primitivo do objeto {{jsxref("Boolean")}}. Sobreescreve o método {{jsxref("Object.prototype.valueOf()")}}.
-
- -

Especificações

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{SpecName('ES1')}}{{Spec2('ES1')}}Definição inicial. Implementano no JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.6.3.1', 'Boolean.prototype')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-boolean.prototype', 'Boolean.prototype')}}{{Spec2('ES6')}} 
- -

Browser compatibility

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
diff --git a/files/pt-br/conflicting/web/javascript/reference/global_objects/function/index.html b/files/pt-br/conflicting/web/javascript/reference/global_objects/function/index.html deleted file mode 100644 index 5c6a594ef3..0000000000 --- a/files/pt-br/conflicting/web/javascript/reference/global_objects/function/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: Function.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/Function -translation_of: Web/JavaScript/Reference/Global_Objects/Function -translation_of_original: Web/JavaScript/Reference/Global_Objects/Function/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/Function/prototype ---- -
{{JSRef}}
- -

A propriedade Function.prototype representa o objeto prototype de {{jsxref("Function")}}.

- -

Descrição

- -

Objetos {{jsxref("Function")}} herdam de Function.prototype.  Function.prototype não pode ser modificado.

- -

Propriedades

- -
-
{{jsxref("Function.arguments")}} {{deprecated_inline}}
-
Um vetor correspondente aos argumentos passados a uma função. Isto é depreciado como propriedade de {{jsxref("Function")}}. Use em vez disso o objeto {{jsxref("Functions/arguments", "arguments")}} disponível dentro da função.
-
{{jsxref("Function.arity")}} {{obsolete_inline}}
-
Usado para especificar o número de argumentos esperados pela função. Foi removido, utilize em vez disso a propriedade {{jsxref("Function.length", "length")}}.
-
{{jsxref("Function.caller")}} {{non-standard_inline}}
-
Especifica a função que invocou a função sendo executada.
-
{{jsxref("Function.length")}}
-
Especifica o número de argumentos esperados pela função.
-
{{jsxref("Function.name")}}
-
O nome da função.
-
{{jsxref("Function.displayName")}} {{non-standard_inline}}
-
O nome de exibição da função.
-
Function.prototype.constructor
-
Especifica a função que cria o prototype do objeto. Veja {{jsxref("Object.prototype.constructor")}} para mais detalhes.
-
- -

Métodos

- -
-
{{jsxref("Function.prototype.apply()")}}
-
Chama uma função e define seu this com o valor fornecido. Argumentos podem ser passados como um objeto {{jsxref("Array")}}.
-
{{jsxref("Function.prototype.bind()")}}
-
Cria uma nova função que, quando chamada, tem seu this definido com o valor fornecido, com uma sequência de argumentos determinada precedendo quaisquer argumentos fornecidos quando a nova função é chamada.
-
{{jsxref("Function.prototype.call()")}}
-
Chama (executa) uma função e define seu this com o valor fornecido. Argumentos podem ser passados como são.
-
{{jsxref("Function.prototype.isGenerator()")}} {{non-standard_inline}}
-
Retorna true se a função é um gerador; se não, retorna false.
-
{{jsxref("Function.prototype.toSource()")}} {{non-standard_inline}}
-
Retorna uma string representando o código-fonte da função. Sobrescreve o método {{jsxref("Object.prototype.toSource")}}.
-
{{jsxref("Function.prototype.toString()")}}
-
Retorna uma string representando o código-fonte da função. Sobrescreve o método {{jsxref("Object.prototype.toString")}}.
-
- -

Especificações

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('ES1')}}{{Spec2('ES1')}}Definição inicial. Implementada no 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')}}
- -

Compatibilidade com navegadores

- -
-

{{Compat("javascript.builtins.Function.prototype")}}

-
- -

Veja também

- - diff --git a/files/pt-br/conflicting/web/javascript/reference/global_objects/intl/numberformat/index.html b/files/pt-br/conflicting/web/javascript/reference/global_objects/intl/numberformat/index.html deleted file mode 100644 index 50ffddd6b3..0000000000 --- a/files/pt-br/conflicting/web/javascript/reference/global_objects/intl/numberformat/index.html +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: Intl.NumberFormat.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat -tags: - - Internacionalização - - JavaScript - - NumberFormat - - Property - - Propriedade - - Prototipo - - Prototype -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat -translation_of_original: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/prototype ---- -
{{JSRef}}
- -

A propriedade Intl.NumberFormat.prototype representa o objeto do protótipo do construtor de {{jsxref("NumberFormat", "Intl.NumberFormat")}}.

- -
{{js_property_attributes(0, 0, 0)}}
- -

Descrição

- -

Veja {{jsxref("NumberFormat")}} para uma descrição sobre instâncias de Intl.NumberFormat.

- -

As instâncias de {{jsxref("NumberFormat", "Intl.NumberFormat")}} herdam de Intl.NumberFormat.prototype. Modificações ao objeto do protótipo são herdados por todas as instâncias de {{jsxref("NumberFormat", "Intl.NumberFormat")}}.

- -

Propriedades

- -
-
Intl.NumberFormat.prototype.constructor
-
Uma referência a Intl.NumberFormat.
-
{{jsxref("NumberFormat.format", "Intl.NumberFormat.prototype.format")}}
-
Getter; retorna uma função que formata um número de acordo com a localização e as opçõe de formatação do objeto {{jsxref("NumberFormat")}}.
-
- -

Métodos

- -
-
{{jsxref("NumberFormat.resolvedOptions", "Intl.NumberFormat.prototype.resolvedOptions()")}}
-
Retorna um novo objeto com propriedades refletindo a localização e as opções de agrupamento obtidos durante a inicialização do objeto.
-
- -

Especificações

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaçãoStatusComentários
{{SpecName('ES Int 1.0', '#sec-11.2.1', 'Intl.NumberFormat.prototype')}}{{Spec2('ES Int 1.0')}}Definição inicial.
{{SpecName('ES Int 2.0', '#sec-11.2.1', 'Intl.NumberFormat.prototype')}}{{Spec2('ES Int 2.0')}} 
{{SpecName('ES Int Draft', '#sec-Intl.NumberFormat.prototype', 'Intl.NumberFormat.prototype')}}{{Spec2('ES Int Draft')}} 
- -

Compatibilidade do navegador

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticasChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suporte básico{{CompatChrome("24")}}{{CompatGeckoDesktop("29")}}{{CompatIE("11")}}{{CompatOpera("15")}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticasAndroidChrome for AndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suporte básico{{CompatNo}}{{CompatChrome("26")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

Veja também

- - diff --git a/files/pt-br/conflicting/web/javascript/reference/global_objects/map/index.html b/files/pt-br/conflicting/web/javascript/reference/global_objects/map/index.html deleted file mode 100644 index 66e5c4d1c4..0000000000 --- a/files/pt-br/conflicting/web/javascript/reference/global_objects/map/index.html +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: Map.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/Map -tags: - - ECMAScript 2015 - - JavaScript - - Mapa - - Propriedade -translation_of: Web/JavaScript/Reference/Global_Objects/Map -translation_of_original: Web/JavaScript/Reference/Global_Objects/Map/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/Map/prototype ---- -
{{JSRef}}
- -

A propriedade Map.prototype representa o protótipo para o construtor {{jsxref("Map")}}.

- -
{{js_property_attributes(0,0,0)}}
- -

Descrição

- -

Instâncias de {{jsxref("Map")}} herdam de {{jsxref("Map.prototype")}}. Você pode utilizar o objeto protótipo do  construtor para adicionar propriedades ou métodos para todas as instâncias de Map.

- -

Propriedades

- -
-
Map.prototype.constructor
-
Retorna a função que criou um protótipo da instância. Isso é a funçao de {{jsxref("Map")}} por padrão.
-
{{jsxref("Map.prototype.size")}}
-
Retorna o número de pares chave/valor no objeto Map.
-
- -

Metódos

- -
-
{{jsxref("Map.prototype.clear()")}}
-
Remove todas os pares chave/valor do objeto Map.
-
{{jsxref("Map.delete", "Map.prototype.delete(chave)")}}
-
Remove qualquer valor associado à chave passada e retorna o valor que Map.prototype.has(chave) deveria retornar anteriormente. Map.prototype.has(chave) irá retornar false após tal remoção ser feita.
-
{{jsxref("Map.prototype.entries()")}}
-
Retorna um novo objeto Iterador que contem um array de [chave, valor] para cada elemento no objeto Map pela ordem de inserção.
-
{{jsxref("Map.forEach", "Map.prototype.forEach(callbackFn[, thisArg])")}}
-
Chama callbackFn uma vez para cada par chave/valor presente no objeto Map, pela ordem de inserção. Se um parâmetro thisArg for fornecido para o forEach, ele será utilizado como o valor this para cada callback.
-
{{jsxref("Map.get", "Map.prototype.get(chave)")}}
-
Retorna o valor associado para a chave, ou undefined se esta não existir no objeto Map.
-
{{jsxref("Map.has", "Map.prototype.has(key)")}}
-
Retorna um valor booleano caso um valor tenha sido associado à chave no objeto Map ou não.
-
{{jsxref("Map.prototype.keys()")}}
-
Retorna um novo objeto Iterador que contem as chaves para cada elemento no objeto Map object pela ordem de inserção.
-
{{jsxref("Map.set", "Map.prototype.set(key, value)")}}
-
Configura o valor par a chave no objeto Map. Retorna o objeto Map.
-
{{jsxref("Map.prototype.values()")}}
-
Retorna um novo objeto Iterador que contém os valores para cada elemento no objeto Map pela ordem de inserção.
-
{{jsxref("Map.@@iterator", "Map.prototype[@@iterator]()")}}
-
Retorna um novo objeto Iterator que contém um array de [chave, valor] para cada elemento no objeto Map pela ordem de inserção.
-
- -

Especificações

- - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('ES2015', '#sec-map.prototype', 'Map.prototype')}}{{Spec2('ES2015')}}Definição inicial.
{{SpecName('ESDraft', '#sec-map.prototype', 'Map.prototype')}}{{Spec2('ESDraft')}} 
- -

Compatibilidade com os navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support38{{ CompatGeckoDesktop("13") }}11257.1
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}38{{CompatGeckoMobile("13")}}{{CompatNo}}{{CompatNo}} -

8

-
-
- -

Veja também

- - diff --git a/files/pt-br/conflicting/web/javascript/reference/global_objects/number/index.html b/files/pt-br/conflicting/web/javascript/reference/global_objects/number/index.html deleted file mode 100644 index d034d79336..0000000000 --- a/files/pt-br/conflicting/web/javascript/reference/global_objects/number/index.html +++ /dev/null @@ -1,141 +0,0 @@ ---- -title: Number.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/Number -tags: - - JavaScript - - Número - - Propriedade - - Prototipo -translation_of: Web/JavaScript/Reference/Global_Objects/Number -translation_of_original: Web/JavaScript/Reference/Global_Objects/Number/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/Number/prototype ---- -
{{JSRef}}
- -

A propriedade Number.prototype representa o protótipo para o construtor {{jsxref("Number")}}.

- -
{{js_property_attributes(0, 0, 0)}}
- -

Descrição

- -

Todas instâncias {{jsxref("Number")}} herdam de Number.prototype. O objeto 'prototype' do construtor {{jsxref("Number")}} pode ser modificado para afetar todas instâncias {{jsxref( "Number")}}.

- -

Propriedades

- -
-
Number.prototype.constructor
-
Retorna a função que criou esta instância do objeto. Por padrão, este é o objeto {{jsxref("Number")}}.
-
- -

Métodos

- -
-
{{jsxref("Number.prototype.toExponential()")}}
-
Retorna uma 'string' representando o número em notação exponencial.
-
{{jsxref("Number.prototype.toFixed()")}}
-
Retorna uma 'string' representando o número em notação em ponto fixo.
-
{{jsxref("Number.prototype.toLocaleString()")}}
-
Retorna uma 'string'  com uma representação sensível ao idioma deste número.  Substitui o método {{jsxref("Object.prototype.toLocaleString()")}}.
-
{{jsxref("Number.prototype.toPrecision()")}}
-
Retorna uma 'string' representando o número para uma precisão específica em notação ponto fixo ou exponencial.
-
{{jsxref("Number.prototype.toSource()")}} {{non-standard_inline}}
-
Retorna uma objeto literal representando um objeto específicado {{jsxref("Number")}}; você pode usar este valor para criar um novo objeto. Substitui o método {{jsxref("Object.prototype.toSource()")}}.
-
{{jsxref("Number.prototype.toString()")}}
-
Retorna uma 'string' representando o objeto especificado na raiz especificada (base). Substitui o método {{jsxref("Object.prototype.toString()")}}.
-
{{jsxref("Number.prototype.valueOf()")}}
-
Retorna o valor primitivo do objeto especificado. Substitui o método {{jsxref("Object.prototype.valueOf()")}}.
-
- -

Especificações

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaçãoSituaçãoComentários
{{SpecName('ES1')}}{{Spec2('ES1')}}Definição inicial. Implementado em JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.7.4', 'Number')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-properties-of-the-number-prototype-object', 'Number')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-properties-of-the-number-prototype-object', 'Number')}}{{Spec2('ESDraft')}} 
- -

Compatibilidade de navegadores

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - - - -
ConfiguraçãoChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
ConfiguraçãoAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Veja também

- - diff --git a/files/pt-br/conflicting/web/javascript/reference/global_objects/object/index.html b/files/pt-br/conflicting/web/javascript/reference/global_objects/object/index.html deleted file mode 100644 index d71b6247e2..0000000000 --- a/files/pt-br/conflicting/web/javascript/reference/global_objects/object/index.html +++ /dev/null @@ -1,228 +0,0 @@ ---- -title: Object.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/Object -tags: - - JavaScript - - Objeto - - Propriedade -translation_of: Web/JavaScript/Reference/Global_Objects/Object -translation_of_original: Web/JavaScript/Reference/Global_Objects/Object/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/Object/prototype ---- -
{{JSRef("Global_Objects", "Object")}}
- -

Sumário

- -

A propriedade Object.prototype representa o {{jsxref("Global_Objects/Object", "Object")}} protótipo do objeto.

- -

{{js_property_attributes(0, 0, 0)}}

- -

Descrição

- -

Praticamente todos os objetos em JavaScript descendem de {{jsxref("Global_Objects/Object", "Object")}}; todos os métodos e propriedades herdados de Object.prototype, embora possam ser sobrescritos (exceto um Objeto com protótipo nulo, i.e. Object.create(null)). Por exemplo, outros protótipos construtores sobrescrevem a propriedade construtora e fornece seus próprios {{jsxref("Object.prototype.toString()", "toString()")}} métodos.

- -

Modificações no Objeto protótipo do objeto são propagadas a todos objetos através do encadeamento de protótipos, a menos que as propriedades e métodos  submetidos às mudanças sejam sobrescritos mais além no encadeamento dos protótipos. Este recurso oferece um mecânismo muito poderoso apesar de perigoso para sobrescrita e extensão de objetos.

- -

Propriedades

- -
-
{{jsxref("Object.prototype.constructor")}}
-
Especifica a função que cria um objeto protótipo.
-
{{jsxref("Object.prototype.__proto__")}} {{non-standard_inline}}
-
Aponta para o objeto que foi usado como protótipo quando o objeto foi instanciado.
-
{{jsxref("Object.prototype.__noSuchMethod__")}} {{non-standard_inline}}
-
Permite definir uma função que será executada quando um membro indefinido do objeto for chamado como método.
-
{{jsxref("Object.prototype.__count__")}} {{obsolete_inline}}
-
Usado para retornar um número de propriedades enumeráveis diretamente num objeto definido pelo usuário, mas foi removida.
-
{{jsxref("Object.prototype.__parent__")}} {{obsolete_inline}}
-
Usado para apontar a um contexto do objeto, mas foi removida.
-
- -

Métodos

- -
-
{{jsxref("Object.prototype.__defineGetter__()")}} {{non-standard_inline}} {{deprecated_inline}}
-
Associa uma função com uma propriedade que, quando acessada, executa uma função e retorna seu valor de retorno.
-
{{jsxref("Object.prototype.__defineSetter__()")}} {{non-standard_inline}} {{deprecated_inline}}
-
Associa uma função com uma propriedade que, quando definida, executa uma função que modifica a propriedade.
-
{{jsxref("Object.prototype.__lookupGetter__()")}} {{non-standard_inline}} {{deprecated_inline}}
-
Retorna a função associada com a propriedade específicada pelo {{jsxref("Object.defineGetter", "__defineGetter__")}} método.
-
{{jsxref("Object.prototype.__lookupSetter__()")}} {{non-standard_inline}} {{deprecated_inline}}
-
Retorna a função associada com a propriedade especificada pelo {{jsxref("Object.defineSetter", "__defineSetter__")}} método.
-
{{jsxref("Object.prototype.hasOwnProperty()")}}
-
Retorna um boolean indicando se um objeto contém a propriedade especificada como uma propriedade direta de um objeto e não herdada através da cadeia de protótipo.
-
{{jsxref("Object.prototype.isPrototypeOf()")}}
-
Retorna uma indicação booleana se o objeto especificado está na cadeia de protótipo do objeto este método é chamado.
-
{{jsxref("Object.prototype.propertyIsEnumerable()")}}
-
Retorna um boolean indicando se o atributo interno ECMAScript DontEnum attribute está definido.
-
{{jsxref("Object.prototype.toSource()")}} {{non-standard_inline}}
-
Retorna uma string contendo o código de um objeto literal representando o objeto que este método é  chamado; você pode usar este valor para criar um novo objeto.
-
{{jsxref("Object.prototype.toLocaleString()")}}
-
Chama {{jsxref("Object.toString", "toString()")}}.
-
{{jsxref("Object.prototype.toString()")}}
-
Retorna uma representação do objeto em forma de string.
-
{{jsxref("Object.prototype.unwatch()")}} {{non-standard_inline}}
-
Remove um ponto de escuta da propriedade do objeto.
-
{{jsxref("Object.prototype.valueOf()")}}
-
Retorna o valor primitivo do objeto especificado.
-
{{jsxref("Object.prototype.watch()")}} {{non-standard_inline}}
-
Adiciona um ponto de escuta à propriedade do objeto.
-
{{jsxref("Object.prototype.eval()")}} {{obsolete_inline}}
-
Usado para avaliar uma string de código JavaScript no contexto do objeto especificado, mas foi removido.
-
- -

Exemplos

- -

Quando é alterado o comportamento de um método de um Objeto protótipo, considere injetar código envolvendo sua extensão antes ou depois ta lógica existente. Por exemplo, este (não testado) código irá pré-condicionalmente executar uma lógica personalizada antes da lógica embutida ou a extensão de alguém será executada.

- -

Quando uma função é chamada os argumentos para a chamada são segurados no array de argumentos como "variável". Por exemplo, na chamada "minhaFuncao(a, b, c)", os argumentos no corpo da minhaFuncao irão conter 3 elementos array correspondentes a (a, b, c). Quando modificamos os protótipos com ganchos, simplesmente passamos this & a variável arguments (o estado de chamada) para o comportamento atual pela chamada apply() na função. Este padrão pode ser usado por qualquer protótipo, tal como Node.prototype, Function.prototype, etc.

- -
var current = Object.prototype.valueOf;
-
-// Desde que minha propriedade "-prop-value" é transversal e não está
-// sempre na mesma cadeia de protótipo, desejo modificar Object.prototype:
-Object.prototype.valueOf = function() {
-  if (this.hasOwnProperty("-prop-value") {
-    return this["-prop-value"];
-  } else {
-    // Isto não parece com um de meus objetos, então vamos retroceder ao
-    // comportamento padrão para reproduzir o comportamento atual o que
-    // pudermos. O apply se comporta como o"super" em outras linguagens.
-    // Mesmo que valueOf() não receba argumentos, alguns outros ganchos podem.
-    return current.apply(this, arguments);
-  }
-}
- -

Desde que JavaScript não tem exatamente objetos de subclasse, protótipo é uma forma usual de trabalhar para fazer um objeto "classe base" de certas funções que agem como objetos. Por exemplo:

- -
var Person = function() {
-  this.canTalk = true;
-  this.greet = function() {
-    if (this.canTalk) {
-      console.log('Hi, I\'m ' + this.name);
-    }
-  };
-};
-
-var Employee = function(name, title) {
-  this.name = name;
-  this.title = title;
-  this.greet = function() {
-    if (this.canTalk) {
-      console.log("Hi, I'm " + this.name + ", the " + this.title);
-    }
-  };
-};
-Employee.prototype = new Person();
-
-var Customer = function(name) {
-  this.name = name;
-};
-Customer.prototype = new Person();
-
-var Mime = function(name) {
-  this.name = name;
-  this.canTalk = false;
-};
-Mime.prototype = new Person();
-
-var bob = new Employee('Bob', 'Builder');
-var joe = new Customer('Joe');
-var rg = new Employee('Red Green', 'Handyman');
-var mike = new Customer('Mike');
-var mime = new Mime('Mime');
-bob.greet();
-joe.greet();
-rg.greet();
-mike.greet();
-mime.greet();
-
- -

O retorno será:

- -
Hi, I'm Bob, the Builder
-Hi, I'm Joe
-Hi, I'm Red Green, the Handyman
-Hi, I'm Mike
-
- -

Especificações

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaçõesSituaçãoComentário
ECMAScript 1st Edition. Implemented in JavaScript 1.0.PadrãoDefinição inicial.
{{SpecName('ES5.1', '#sec-15.2.3.1', 'Object.prototype')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-object.prototype', 'Object.prototype')}}{{Spec2('ES6')}} 
- -

Compatibilidade com Navegadores

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
AspectoChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
AspectoAndroidChrome para AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico.{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

 

diff --git a/files/pt-br/conflicting/web/javascript/reference/global_objects/promise/index.html b/files/pt-br/conflicting/web/javascript/reference/global_objects/promise/index.html deleted file mode 100644 index 4a914e3e34..0000000000 --- a/files/pt-br/conflicting/web/javascript/reference/global_objects/promise/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: Promise.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/Promise -translation_of: Web/JavaScript/Reference/Global_Objects/Promise -translation_of_original: Web/JavaScript/Reference/Global_Objects/Promise/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/Promise/prototype ---- -
{{JSRef("Global_Objects", "Promise")}}
- -

Sumário

- -

A propriedade Promise.prototype representa o protótipo para o construtor {{jsxref("Promise")}}.

- -
{{js_property_attributes(0,0,0)}}
- -

Descrição

- -

{{jsxref("Promise")}} instância herdada de {{jsxref("Promise.prototype")}}. Você pode usar o objeto construtor para adicionar propriedades ou métodos  para todas as instâncias de Promise.

- -

Propriedades

- -
-
Promise.prototype.constructor
-
Retorna a função que cria uma instância. Isso é a função padrão {{jsxref("Promise")}}.
-
- -

Métodos

- -
-
{{jsxref("Promise.catch", "Promise.prototype.catch(onRejected)")}}
-
Adiciona um callback que trata rejeição para a promise e, retorna uma nova promise resolvendo o valor retornado do callback, se ele for chamado, ou para seu valor original de conclusão se a promise for realizada.
-
{{jsxref("Promise.then", "Promise.prototype.then(onFulfilled, onRejected)")}}
-
Adiciona os métodos de tratamento da realização e rejeição da promise e, retorna uma nova promise resolvendo para o valor do método chamado.
-
- -

Especificações

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('ES6', '#sec-promise.prototype', 'Promise.prototype')}}{{Spec2('ES6')}}Initial definition.
- -

Browser compatibility

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support32{{CompatGeckoDesktop(24.0)}} as Future
- {{CompatGeckoDesktop(25.0)}} as Promise behind a flag[1]
- {{CompatGeckoDesktop(29.0)}} by default		{{CompatNo}}197.1
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatGeckoMobile(24.0)}} as Future
- {{CompatGeckoMobile(25.0)}} as Promise behind a flag[1]
- {{CompatGeckoMobile(29.0)}} by default		{{CompatNo}}{{CompatNo}}iOS 832
-
- -

[1] Gecko 24 has an experimental implementation of Promise, under the initial name of Future. It got renamed to its final name in Gecko 25, but disabled by default behind the flag dom.promise.enabled. Bug 918806 enabled Promises by default in Gecko 29.

- -

See also

- - diff --git a/files/pt-br/conflicting/web/javascript/reference/global_objects/set/index.html b/files/pt-br/conflicting/web/javascript/reference/global_objects/set/index.html deleted file mode 100644 index 955b187c6f..0000000000 --- a/files/pt-br/conflicting/web/javascript/reference/global_objects/set/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: Set.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/Set -tags: - - Propriedade - - Prototipo - - set -translation_of: Web/JavaScript/Reference/Global_Objects/Set -translation_of_original: Web/JavaScript/Reference/Global_Objects/Set/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/Set/prototype ---- -
{{JSRef}}
- -

A propriedade Set.prototype representa o protótipo do construtor do objeto {{jsxref("Set")}}.

- -
{{js_property_attributes(0,0,0)}}
- -

Descrição

- -

Instâncias de {{jsxref("Set")}} herdam de {{jsxref("Set.prototype")}}. Você pode usar o construtor do objeto protótipo para adicionar propriedades ou métodos para todas as instâncias de Set .

- -

Propriedades

- -
-
Set.prototype.constructor
-
Retorna a função que criou o protótipo de uma instância. Esta é a função {{jsxref("Set")}} por padrão.
-
{{jsxref("Set.prototype.size")}}
-
Retorna o número de valores no objeto Set.
-
- -

Métodos

- -
-
{{jsxref("Set.add", "Set.prototype.add(value)")}}
-
Anexa um novo elemento com o valor passado ao objeto Set . Retorna o objeto Set.
-
{{jsxref("Set.prototype.clear()")}}
-
Remove todos os elementos do objeto Set.
-
{{jsxref("Set.delete", "Set.prototype.delete(value)")}}
-
Remove o elemento associado ao value e retorna o valor que Set.prototype.has(value) teria retornado anteriormente. Set.prototype.has(value) irá retornar false depois disso.
-
{{jsxref("Set.prototype.entries()")}}
-
Retorna um novo objeto Iterator que contém um array de [value, value] para cada elemento no objeto Set , em ordem de inserção. Isso é similar ao objeto Map, para que cada entrada tenha o mesmo valor para sua chave evalor aqui.
-
{{jsxref("Set.forEach", "Set.prototype.forEach(callbackFn[, thisArg])")}}
-
Chama callbackFn uma vez para cada valor presente no objeto Set, em ordem de inserção. Se um parâmetro thisArg for passado para o forEach, ele será usado como valor de this para cada callback.
-
{{jsxref("Set.has", "Set.prototype.has(value)")}}
-
Retorna um booleano afirmando se um elemento está presente com o dado valor no objeto Set ou não.
-
{{jsxref("Set.prototype.keys()")}}
-
É a mesma função que a função values() e retorna um novo objeto Iterator que contém os valores para cada elemento no objeto Set  em ordem de inserção.
-
{{jsxref("Set.prototype.values()")}}
-
Retorna um novo objeto Iterator que contém os values para cada elemento no objeto Set  em ordem de inserção.
-
{{jsxref("Set.prototype.@@iterator()", "Set.prototype[@@iterator]()")}}
-
Retorna um novo objeto Iterator que contém os values para cada elemento do objeto Set em ordem de inserção.
-
- -

Especificações

- - - - - - - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{SpecName('ES2015', '#sec-set.prototype', 'Set.prototype')}}{{Spec2('ES2015')}}Definição inicial.
{{SpecName('ESDraft', '#sec-set.prototype', 'Set.prototype')}}{{Spec2('ESDraft')}} 
- -

Compatibilidade de navegadores

- - - -

{{Compat("javascript.builtins.Set.prototype")}}

- -

Veja também

- - diff --git a/files/pt-br/conflicting/web/javascript/reference/global_objects/string/index.html b/files/pt-br/conflicting/web/javascript/reference/global_objects/string/index.html deleted file mode 100644 index ea98bd39c7..0000000000 --- a/files/pt-br/conflicting/web/javascript/reference/global_objects/string/index.html +++ /dev/null @@ -1,176 +0,0 @@ ---- -title: String.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/String -translation_of: Web/JavaScript/Reference/Global_Objects/String -translation_of_original: Web/JavaScript/Reference/Global_Objects/String/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/String/prototype ---- -
{{JSRef}}
- -

A String.prototype representa o prototipo de objeto  {{jsxref("String")}}.

- -
{{js_property_attributes(0, 0, 0)}}
- -

Descrição

- -

Todas as instâncias {{jsxref("String")}} herdam de String.prototype. Alterações na String são propagadas para todas as instâncias {{jsxref("String")}}.

- -

Propriedades

- -
-
String.prototype.constructor
-
Especifica a função que cria o protótipo de um objeto.
-
{{jsxref("String.prototype.length")}}
-
Reflete o comprimento da string.
-
N
-
Usado para acessar o caractere na posição N onde N é um número inteiro entre 0 e um menor que o valor da length. Estas propriedades são apenas de leitura.
-
- -

Métodos

- -

Métodos não relacionados ao HTML

- -
-
{{jsxref("String.prototype.charAt()")}}
-
Retorna o caractere (exatamente uma unidade de código UTF-16) no índice especificado.
-
{{jsxref("String.prototype.charCodeAt()")}}
-
Retorna um número que é o valor da unidade de código UTF-16 em dado índice.
-
{{jsxref("String.prototype.codePointAt()")}}
-
Retorna um número inteiro não negativo Number que é o valor de posição de código da posição de código inicial em dado índice.
-
{{jsxref("String.prototype.concat()")}}
-
Combina o texto de duas strings e retorna uma nova string.
-
{{jsxref("String.prototype.includes()")}}
-
 Determina se uma string deve ser encontrada dentro de outra string.
-
{{jsxref("String.prototype.endsWith()")}}
-
Determina se uma string termina com os caracteres de outra string.
-
{{jsxref("String.prototype.indexOf()")}}
-
Retorna o índice dentro do objeto String chamado da primeira ocorrência do valor especificado, ou -1 se não encontrado.
-
{{jsxref("String.prototype.lastIndexOf()")}}
-
Retorna o índice dentro do objeto String chamado da última ocorrência do valor especificado, ou -1 se não encontrado.
-
{{jsxref("String.prototype.localeCompare()")}}
-
Retorna um número indicando se uma string de referência vem antes ou depois ou é o mesmo que uma string dada em ordem de classificação.
-
{{jsxref("String.prototype.match()")}}
-
Usado para combinar uma expressão regular com uma string.
-
{{jsxref("String.prototype.normalize()")}}
-
Retorna o Formulário de Normalização Unicode do valor string chamado.
-
{{jsxref("String.prototype.padEnd()")}}
-
Empacota a string atual desde o final com uma string dada para criar uma nova string de um dado comprimento.
-
{{jsxref("String.prototype.padStart()")}}
-
Empacota a string atual desde o início com uma string dada para criar uma nova string de um dado comprimento.
-
{{jsxref("String.prototype.quote()")}} {{obsolete_inline}}
-
Envolve a cadeia entre aspas duplas ("" ").
-
{{jsxref("String.prototype.repeat()")}}
-
Retorna uma string consistindo elementos do objeto repetido pelas vezes definidas.
-
{{jsxref("String.prototype.replace()")}}
-
Usado para encontrar uma combinação entre uma expressão regular e uma string, e para substituir uma substring combinada com uma nova substring.
-
{{jsxref("String.prototype.search()")}}
-
Executa a procura por uma combinação entre uma expressão regular e uma string especificada.
-
{{jsxref("String.prototype.slice()")}}
-
Extrai uma seção de uma string e retorna uma nova string.
-
{{jsxref("String.prototype.split()")}}
-
Separa um objeto String em um array de strings separando a string em substrings.
-
{{jsxref("String.prototype.startsWith()")}}
-
Determina se uma string começa com os caracteres de outra string.
-
{{jsxref("String.prototype.substr()")}}
-
Retorna os caracteres em uma string começando no local especificado através do número especificado de caracteres.
-
{{jsxref("String.prototype.substring()")}}
-
Retorna os caracteres em uma string entre dois índices na string.
-
{{jsxref("String.prototype.toLocaleLowerCase()")}}
-
Os caracteres dentro de uma string são convertidos para letras minúsculas enquanto respeita a localidade atual. Para a maioria das línguas, irá retornar o mesmo que toLowerCase().
-
{{jsxref("String.prototype.toLocaleUpperCase()")}}
-
Os caracteres dentro de uma string são convertidas para letra maiúscula enquanto respeita a localidade atual. Para a maioria das línguas, irá retornar o mesmo que toUpperCase().
-
{{jsxref("String.prototype.toLowerCase()")}}
-
Retorna o valor da string de chamada convertido em minúsculas.
-
{{jsxref("String.prototype.toSource()")}} {{non-standard_inline}}
-
Retorna um objeto literal representando o objeto especificado; Você pode usar esse valor para criar um novo objeto. Substitui o metodo:{{jsxref("Object.prototype.toSource()")}}
-
{{jsxref("String.prototype.toString()")}}
-
Retorna uma string que representa o objeto especificado. Substitui o metodo:{{jsxref("Object.prototype.toString()")}}
-
{{jsxref("String.prototype.toUpperCase()")}}
-
Retorna o valor da string de chamada convertido em maiúscula.
-
{{jsxref("String.prototype.trim()")}}
-
Retira o espaço em branco desde o início e o fim da string. Parte do padrão ECMAScript 5.
-
{{jsxref("String.prototype.trimLeft()")}} {{non-standard_inline}}
-
Retira o espaço em branco do lado esquerdo da string.
-
{{jsxref("String.prototype.trimRight()")}} {{non-standard_inline}}
-
Retira o espaço em branco do lado esquerdo da string.
-
{{jsxref("String.prototype.valueOf()")}}
-
Retorna o valor primitivo do objeto especificado. Substitui o metodo: {{jsxref("Object.prototype.valueOf()")}} 
-
{{jsxref("String.prototype.@@iterator()", "String.prototype[@@iterator]()")}}
-
Retorna um novo objeto  Iterator que repete sobre os pontos de código de um valor String, retornando cada ponto de código como um valor String.
-
- -

Métodos de envoltório HTML

- -

Esses métodos são de uso limitado, pois fornecem apenas um subconjunto das tags e atributos HTML disponíveis.

- -
-
{{jsxref("String.prototype.anchor()")}}
-
{{htmlattrxref("name", "a", "<a name=\"name\">")}} (alvo hipertexto)
-
{{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\">")}} (link para 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")}}
-
- -

Especificações

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacoesStatusComentarios
{{SpecName('ES1')}}{{Spec2('ES1')}}Definição inicial.
{{SpecName('ES5.1', '#sec-15.5.3.1', 'String.prototype')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-string.prototype', 'String.prototype')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-string.prototype', 'String.prototype')}}{{Spec2('ESDraft')}} 
- -

Compatibilidade com navegadores

- -

{{Compat("javascript.builtins.String.prototype")}}

- -

Veja também 

- - diff --git a/files/pt-br/conflicting/web/javascript/reference/global_objects/weakmap/index.html b/files/pt-br/conflicting/web/javascript/reference/global_objects/weakmap/index.html deleted file mode 100644 index a6d5051c36..0000000000 --- a/files/pt-br/conflicting/web/javascript/reference/global_objects/weakmap/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: WeakMap.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/WeakMap -translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap -translation_of_original: Web/JavaScript/Reference/Global_Objects/WeakMap/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/WeakMap/prototype ---- -
{{JSRef("Global_Objects", "WeakMap")}}
- -

Sumário

- -

A propriedade WeakMap.prototype representa o prototype fara o construtor {{jsxref("WeakMap")}}.

- -
{{js_property_attributes(0,0,0)}}
- -

Descrição

- -

Instâncias {{jsxref("WeakMap")}} herdam de {{jsxref("WeakMap.prototype")}}. Você pode usar o objeto prototype do construtor para adicionar propriedades ou métodos para todas as instâncias WeakMap.

- -

Propriedades

- -
-
WeakMap.prototype.constructor
-
Retorna a função construtora das instâncias, neste caso a própria {{jsxref("WeakMap")}}.
-
- -

Metodos

- -
-
{{jsxref("WeakMap.prototype.clear()")}}
-
Remove todos os pares chave/valor do objeto WeakMap
-
{{jsxref("WeakMap.delete", "WeakMap.prototype.delete(key)")}}
-
Remove qualquer valor associado à  key. WeakMap.prototype.has(key) e retorna false após.
-
{{jsxref("WeakMap.get", "WeakMap.prototype.get(key)")}}
-
Retorna o valor associado a key, ou undefined se nenhum existir.
-
{{jsxref("WeakMap.has", "WeakMap.prototype.has(key)")}}
-
Retorna um Boolean verificando se há algum valor associado a key no objeto WeakMap ou não.
-
{{jsxref("WeakMap.set", "WeakMap.prototype.set(key, value)")}}
-
Configura um valor para key no objeto WeakMap. Retorna undefined.
-
- -

Especificações

- - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{SpecName('ES6', '#sec-weakmap.prototype', 'WeakMap.prototype')}}{{Spec2('ES6')}}Especificação inicial.
- -

Compatibilidade de browsers 

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
RecursoChromeFirefox (SpiderMonkey)Internet ExplorerOperaSafari
Suporte básico{{CompatVersionUnknown}}{{CompatGeckoDesktop("6.0")}}11{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - -
RecursoAndroidFirefox Mobile (SpiderMonkey)IE MobileOpera MobileSafari Mobile
Suporte básico{{CompatNo}}{{CompatGeckoMobile("6.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

Notas para o Chrome

- - - -

Veja também

- - diff --git a/files/pt-br/conflicting/web/javascript/reference/operators/index.html b/files/pt-br/conflicting/web/javascript/reference/operators/index.html deleted file mode 100644 index e9ec88b42e..0000000000 --- a/files/pt-br/conflicting/web/javascript/reference/operators/index.html +++ /dev/null @@ -1,330 +0,0 @@ ---- -title: Arithmetic operators -slug: conflicting/Web/JavaScript/Reference/Operators -tags: - - JavaScript - - Operadores -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: Web/JavaScript/Reference/Operators/Arithmetic_Operators -original_slug: Web/JavaScript/Reference/Operators/Arithmetic_Operators ---- -
{{jsSidebar("Operadores")}}
- -

Operadores aritméticos tem valores numéricos (literais ou variáveis) como seus operadores e retornam um valor numérico único. Os operadores aritméticos padrões são adição (+), subtração (-), multiplicação (*), e divisão (/).

- -

Adição (+)

- -

O operador de adição produz a soma dos operadores numéricos ou a concatenação de strings.

- -

Sintaxe

- -
Operador: x + y
-
- -

Exemplos

- -
// Número + Número -> adição
-1 + 2 // 3
-
-// Booleano + Número -> adição
-true + 1 // 2
-
-// Booleano + Booleano -> adição
-false + false // 0
-
-// Número + String -> concatenação
-5 + "foo" // "5foo"
-
-// String + Booleano -> concatenação
-"foo" + false // "foofalse"
-
-// String + String -> concatenação
-"foo" + "bar" // "foobar"
-
- -

Subtração (-)

- -

O operador de subtração subtrai os dois operandos, produzindo sua diferença.

- -

Sintaxe

- -
Operador: x - y
-
- -

Exemplos

- -
5 - 3 // 2
-3 - 5 // -2
-"foo" - 3 // NaN
- -

Divisão (/)

- -

O operador de divisão produz o quociente de seus operandos onde o operando da esquerda é o dividendo e o da direita é o divisor.

- -

Sintaxe

- -
Operador: x / y
-
- -

Exemplos

- -
1 / 2      // retorna 0.5 em JavaScript
-1 / 2      // retorna 0 em Java
-// (nenhum dos números é explicitamente um número de ponto flutuante)
-
-1.0 / 2.0  // retorna 0.5 em JavaScript e Java
-
-2.0 / 0    // retorna Infinity em JavaScript
-2.0 / 0.0  // retorna Infinity também
-2.0 / -0.0 // retorna -Infinity em JavaScript
- -

Multiplicação (*)

- -

O operador de multiplicação produz o produto dos operandos.

- -

Sintaxe

- -
Operador: x * y
-
- -

Exemplos

- -
2 * 2 // 4
--2 * 2 // -4
-Infinity * 0 // NaN
-Infinity * Infinity // Infinity
-"foo" * 2 // NaN
-
- -

Módulo (%)

- -

O operador de módulo retorna o primeiro operando módulo o segundo, isto é, var1 módulo var2, na sentença anterior, onde var1 e var 2 são variáveis. A função módulo é o resto inteiro da divisão de var1 por var2. Existe uma proposta de ter um operador real de módulo em uma versão futura do ECMAScript.

- -

Sintaxe

- -
Operador: var1 % var2
-
- -

Examples

- -
12 % 5 // 2
--1 % 2 // -1
-NaN % 2 // NaN
-
- -

Exponenciação (**)

- -

O operador de exponenciação retorna o resultado do primeiro operando elevado ao segundo operando. É o mesmo que var1var2, onde var1 e var2 são variáveis. O operador de exponenciação é associativo à direita, ou seja, a ** b ** c é igual a a ** (b ** c).

- -

Sintaxe

- -
Operador: var1 ** var2
-
- -

Notas

- -

Em várias linguagens como PHP e Python e outras que tem o operador de exponenciação (**), a exponenciação tem prioridade do que operações unárias, como + e  -, mas tem algumas exceções. Por exemplo, no Bash o operador ** é definido por ter menos prioridade do que operadores unários. No JavaScript, é impossível escrever uma expressão de exponenciação ambígua, i.e. você não pode colocar um operador unário (+/-/~/!/delete/void/typeof) imediatamente antes do número base.

- -
-2 ** 2;
-// 4 no Bash, -4 em outras linguagens.
-// Isso é inválido no JavaScript, pois a operação é ambígua.
-
-
--(2 ** 2);
-// -4 no JavaScript e a intenção do autor não é ambígua.
-
- -

Exemplos

- -
2 ** 3 // 8
-3 ** 2 // 9
-3 ** 2.5 // 15.588457268119896
-10 ** -1 // 0.1
-NaN ** 2 // NaN
-
-2 ** 3 ** 2 // 512
-2 ** (3 ** 2) // 512
-(2 ** 3) ** 2 // 64
-
- -

Para inverter o sinal do resultado de uma expressão de exponenciação:

- -
-(2 ** 2) // -4
-
- -

Para forçar a base de uma expressão de exponenciação para ser um número negativo:

- -
(-2) ** 2 // 4
-
- -
-

Nota: JavaScript também tem  um operador de lógica binária ^ (XOR). ** e ^ são diferentes (por exemplo : 2 ** 3 === 8 enquanto 2 ^ 3 === 1.)

-
- -

Incremento (++)

- -

O operador de incremento incrementa (adiciona um a) seu operando e retorna um valor;

- - - -

Sintaxe

- -
Operador: x++ or ++x
-
- -

Exemplos

- -
// Posfixo
-var x = 3;
-y = x++; // y = 3, x = 4
-
-// Prefixo
-var a = 2;
-b = ++a; // a = 3, b = 3
-
- -

Decremento (--)

- -

O operador de decremento decrementa (subtrai um de) seu operando e retorna um valor.

- - - -

Sintaxe

- -
Operador: x-- or --x
-
- -

Exemplos

- -
// Posfixo
-var x = 3;
-y = x--; // y = 3, x = 2
-
-// Prefixo
-var a = 2;
-b = --a; // a = 1, b = 1
-
- -

Negação Unária (-)

- -

O operador de negação unária precede seu operando e o nega.

- -

Sintaxe

- -
Operador: -x
-
- -

Exemplos

- -
var x = 3;
-y = -x; // y = -3, x = 3
-
- -

Soma Unária (+)

- -

O operador de soma unária precede seu operando e calcula para seu operando mas tenta convertê-lo para um número, caso ainda não o seja. Apesar da negação unária (-) também poder converter não-números, a soma unária é a forma mais rápida e a forma preferida de converter alguma coisa em um número, porque ele não realiza nenhuma outra operação no número. Ele pode converter strings que representam inteiros e ponto flutuante, bem como os valores de não-string true, false, e null. Inteiros em formato decimal e hexadecimal ("0x"-prefixado) são suportados. Números negativos são suportados (não os hexadecimais). Caso não possa analisar um determinado valor, o operador retornará NaN.

- -

Sintaxe

- -
Operador: +x
-
- -

Exemplos

- -
+3     // 3
-+"3"   // 3
-+true  // 1
-+false // 0
-+null  // 0
-
- -

Especificações

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
ECMAScript 1ª Edição.PadrãoDefinição inicial.
{{SpecName('ES5.1', '#sec-11.3')}}{{Spec2('ES5.1')}}Definido em várias seções da especificação: Operadores aditivos, Operadores Multiplicativos, Expressões Posfixas, Operadores Unários.
{{SpecName('ES6', '#sec-postfix-expressions')}}{{Spec2('ES6')}}Definido em várias seções da especificação: Operadores aditivos, Operadores Multiplicativos, Expressões Posfixas, Operadores Unários.
- -

Compatibilidade com navegadores

- -

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

Veja também

- - diff --git a/files/pt-br/conflicting/web/javascript/reference/operators/spread_syntax/index.html b/files/pt-br/conflicting/web/javascript/reference/operators/spread_syntax/index.html deleted file mode 100644 index dd25a185a7..0000000000 --- a/files/pt-br/conflicting/web/javascript/reference/operators/spread_syntax/index.html +++ /dev/null @@ -1,202 +0,0 @@ ---- -title: Spread operator -slug: conflicting/Web/JavaScript/Reference/Operators/Spread_syntax -tags: - - JavaScript - - Operador -translation_of: Web/JavaScript/Reference/Operators/Spread_syntax -translation_of_original: Web/JavaScript/Reference/Operators/Spread_operator -original_slug: Web/JavaScript/Reference/Operators/Spread_operator ---- -
{{jsSidebar("Operators")}}
- -

A sintaxe de propagação (Spread) permite que um objeto iterável, como um array ou string, seja expandida em locais onde zero ou mais argumentos (para chamadas de função) ou elementos (para literais de array) sejam esperados ou uma expressão de objeto seja expandida em locais onde zero ou mais pares de chave-valor (para literais de objeto) são esperados.

- -

Sintaxe

- -

Para chamadas de função:

- -
minhaFuncao(...objIteravel);
-
- -

Para array literais:

- -
[...objIteravel, 4, 5, 6]
- -

Desestruturação:

- -
[a, b, ...objIteravel] = [1, 2, 3, 4, 5];
- -

Exemplos

- -

Uma melhor aplicação

- -

Exemplo: é comum usar {{jsxref( "Function.prototype.apply")}} em casos onde você quer usar um array como argumentos em uma função.

- -
function minhaFuncao(x, y, z) { }
-var args = [0, 1, 2];
-minhaFuncao.apply(null, args);
- -

Com o spread do ES2015 você pode agora escrever isso acima como:

- -
function minhaFuncao(x, y, z) { }
-var args = [0, 1, 2];
-minhaFuncao(...args);
- -

Qualquer argumento na lista de argumento pode usar a sintaxe spread e pode ser usado várias vezes.

- -
function minhaFuncao(v, w, x, y, z) { }
-var args = [0, 1];
-minhaFuncao(-1, ...args, 2, ...[3]);
- -

Um literal array mais poderoso

- -

Exemplo:  Hoje se você tiver um array e quer criar um novo array com esse existente fazendo parte dele, a sintaxe literal do array não é mais suficiente e você deve voltar para o código imperativo, usando uma combinação de push, splice, concat, etc. Com a sintaxe spread isso se torna muito mais sucinto:

- -
var partes = ['ombros', 'joelhos'];
-var letra = ['cabeca', ...partes, 'e', 'dedos']; // ["cabeca", "ombros", "joelhos", "e", "dedos"]
-
- -

Assim como em spread para listas de argumentos ... pode ser usado em qualquer lugar no literal do array e pode ser usado várias vezes.

- -

Apply para new

- -

Exemplo: No ES5 não é possível usar new com apply. (Em ES5 termos, apply faz uma [[Call]] e nao um [[Construct]].) Em ES2015 a sintaxe spread naturalmente suporta isso:

- -
var camposData = lerCamposData(bancoDeDados);
-var d = new Date(...camposData);
- -

Um push melhor

- -

Exemplo: {{jsxref("Global_Objects/Array/push", "push")}} é frequentemente usado para adicionar um array no final de um array existente. No ES5 isso é geralmente feito assim:

- -
var arr1 = [0, 1, 2];
-var arr2 = [3, 4, 5];
-// Acrescenta todos itens do arr2 ao arr1
-Array.prototype.push.apply(arr1, arr2);
- -

No ES2015 com spread isso se torna:

- -
var arr1 = [0, 1, 2];
-var arr2 = [3, 4, 5];
-arr1.push(...arr2);
- -

Especificações

- - - - - - - - - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{SpecName('ES2015', '#sec-array-initializer')}}{{Spec2('ES2015')}}Definido em várias seções da especificação: Inicializador do array, Listas de argumento
{{SpecName('ESDraft', '#sec-array-initializer')}}{{Spec2('ESDraft')}} 
- -

Compatibilidade com browser

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Operação spread em array literais{{CompatChrome("46")}}{{ CompatGeckoDesktop("16") }}{{CompatNo}}{{CompatNo}}7.1
Operação spread em chamadas de função{{CompatChrome("46")}}{{ CompatGeckoDesktop("27") }}{{CompatNo}}{{CompatNo}}7.1
Operação spread em desestruturação{{CompatNo}}{{ CompatGeckoDesktop("34") }}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Operação spread em array literais{{CompatNo}}{{CompatChrome("46")}}{{ CompatGeckoMobile("16") }}{{CompatNo}}{{CompatNo}}8{{CompatChrome("46")}}
Operação spread em chamadas de função{{CompatNo}}{{CompatChrome("46")}}{{ CompatGeckoMobile("27") }}{{CompatNo}}{{CompatNo}}8{{CompatChrome("46")}}
Operação spread em desestruturação{{CompatNo}}{{CompatNo}}{{ CompatGeckoDesktop("34") }}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}
-
- -

Veja também

- - diff --git a/files/pt-br/conflicting/web/javascript/reference/operators_0d2e4b8154642b5a9dbd76a2a48cf96a/index.html b/files/pt-br/conflicting/web/javascript/reference/operators_0d2e4b8154642b5a9dbd76a2a48cf96a/index.html deleted file mode 100644 index 24a222bb43..0000000000 --- a/files/pt-br/conflicting/web/javascript/reference/operators_0d2e4b8154642b5a9dbd76a2a48cf96a/index.html +++ /dev/null @@ -1,251 +0,0 @@ ---- -title: Operadores de comparação -slug: >- - conflicting/Web/JavaScript/Reference/Operators_0d2e4b8154642b5a9dbd76a2a48cf96a -tags: - - Comparando String - - Comparação - - Igualdade - - Operadores - - Relacionais -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: Web/JavaScript/Reference/Operators/Comparison_Operators -original_slug: Web/JavaScript/Reference/Operators/Operadores_de_comparação ---- -
{{jsSidebar("Operators")}}
- -

O JavaScript possui comparações estritas e conversão de tipos. Uma comparação estrita (e.g., ===) somente é verdade se os operandos forem do mesmo tipo e de conteúdo correspondente. A comparação abstrata mais comumente utilizada (e.g. ==) converte os operandos no mesmo tipo antes da comparação. Para comparações abstratas relacionais (e.g., <=), os operandos são primeiro convertidos em primitivos, depois para o mesmo tipo, depois comparados.

- -

Strings são comparadas baseadas na ordenação lexicografica padrão, usando valores Unicode.

- -
{{EmbedInteractiveExample("pages/js/expressions-comparisonoperators.html")}}
- - - -

Características de comparação:

- - - -

Operadores de Igualdade 

- -

Igualdade (==)

- -

O operador de igualdade converte o operando se ele não for do mesmo tipo, então aplica a comparação estrita. Se ambos os operandos são objetos, então o JavaScript compara referencias internas que são iguais quando os operandos se referem ao mesmo objeto em memória.

- -

Sintaxe

- -
x == y
-
- -

Exemplos

- -
1    ==  1         // verdade
-'1'  ==  1         // verdade
-1    == '1'        // verdade
-0    == false      // verdade
-0    == null       // falso
-var object1 = {'key': 'value'}, object2 = {'key': 'value'};
-object1 == object2 // falso
-0    == undefined  // falso
-null == undefined  // verdade
-
- -

Desigualdade (!=)

- -

O operador de desigualdade retorna true (verdade) se os operandos não são iguais. Se os dois operandos não são do mesmo tipo, o JavaScript tenta converter os operandos para o tipo apropriado para a comparação. Se ambos os operandos são objetos, então o JavaScript compara referências internas que não são iguais quando os operandos se referem a objetos diferentes na memória.

- -

Sintaxe

- -
x != y
- -

Exemplos

- -
1 !=   2     // verdade
-1 !=  '1'    // falso
-1 !=  "1"    // falso
-1 !=  true   // falso
-0 !=  false  // falso
-
- -

Identidade / igualdade estrita (===)

- -

O operador de identidade retorna true (verdade) se os operandos são estritamente iguais (veja acima) sem conversão de tipo. 

- -

Sintaxe

- -
x === y
- -

Exemplos

- -
3 === 3   // verdade
-3 === '3' // falso
-var object1 = {'key': 'value'}, object2 = {'key': 'value'};
-object1 === object2 //f also
- -

Non-identity / desigualdade estrita (!==)

- -

O operador desigualdade estrita (Non-identity) retorna verdadeiro se os operandos não são iguais e / ou não são do mesmo tipo.

- -

Sintaxe

- -
x !== y
- -

Exemplos

- -
3 !== '3' // verdade
-4 !== 3   // verdade
-
- -

Operadores relacionais

- -

Cada um desses operadores chamará a função valueOf () em cada operando antes que uma comparação seja feita.

- -

Operador Maior (>)

- -

O operador de Maior retorna true se o operando da esquerda for maior que o operando da direita.

- -

Sintaxe

- -
x > y
- -

Exemplos

- -
4 > 3 // verdade
-
- -

Operador maior ou igual (>=)

- -

O operador maior ou igual retorna true se o operando da esquerda for maior ou igual ao operando da direita.

- -

Sintaxe

- -
 x >= y
- -

Exemplos

- -
4 >= 3 // verdade
-3 >= 3 // verdade
-
- -

Operador Menor (<)

- -

O operador menor retorna true (verdadeiro) se o operando da esquerda for menor que o operando da direita.

- -

Sintaxe

- -
 x < y
- -

Exemplos

- -
3 < 4 // verdade
-
- -

Operador menor ou igual (<=)

- -

O operador menor ou igual retorna true (verdadeiro) se o operando da esquerda for menor ou igual ao operando da direita.

- -

Sintaxe

- -
 x <= y
- -

Exemplos

- -
3 <= 4 // verdade
-
- -

Usando Operadores de Igualdade

- -

Os operadores de igualdade padrão (== e! =) Usam o Algoritmo de Comparação de Igualdade Abstrata 

- -

para comparar dois operandos. Se os operandos forem de tipos diferentes, ele tentará convertê-los para o mesmo tipo antes de fazer a comparação. Por exemplo, na expressão 5 == '5', a sequência à direita é convertida em {{jsxref ("Number" )}} antes da comparação ser feita.

- -

Os operadores de igualdade estrita (=== e! ==) usam o Algoritmo de comparação estrita de igualdade e se destinam a executar comparações de igualdade em operandos do mesmo tipo. Se os operandos são de tipos diferentes, o resultado é sempre falso, então 5! == '5'.
-
- Use operadores de igualdade estrita se os operandos precisarem ser de um tipo específico e também de valor ou se o tipo exato dos operandos for importante. Caso contrário, use os operadores de igualdade padrão, que permitem comparar a identidade de dois operandos, mesmo que não sejam do mesmo tipo.
-
- Quando a conversão de tipos está envolvida na comparação (por exemplo, comparação não estrita), o JavaScript converte os tipos {{jsxref ("String")}}, {{jsxref ("Number")}}, {{jsxref ("Booleano" )}} ou {{jsxref ("Object")}}) operandos da seguinte forma:

- - - -
Nota: Os objetos String são do Tipo Objeto, não String! Os objetos de string raramente são usados, portanto, os seguintes resultados podem ser surpreendentes:
- -
// true, pois ambos os operandos são do tipo String (ou seja, primitivos de string):
-'foo' === 'foo'
-
-var a = new String('foo');
-var b = new String('foo');
-
-// falso (false) pois a e b, embora do tipo "Objeto", são instâncias diferentes
-a == b
-
-// falso (false) pois a e b, embora do tipo "Objeto", são instâncias diferentes
-a === b
-
-// verdadeiro (true) pois o objeto a e 'foo' (String) são de tipos diferentes e, o Objeto (a)
-// é convertido para String ('foo') antes da comparação
-a == 'foo'
- -

Especificações

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{SpecName('ES1')}}{{Spec2('ES1')}}Definição Inicial. Implementado em JavaScript 1.0
{{SpecName('ES3')}}{{Spec2('ES3')}}Adicionandos os operadores === e !== . Implementado em JavaScript 1.3
{{SpecName('ES5.1', '#sec-11.8')}}{{Spec2('ES5.1')}}Definidos em várias seções das especificações: Operadores Relacionais , Operadores de Igualdade
{{SpecName('ES6', '#sec-relational-operators')}}{{Spec2('ES6')}}Definidos em várias seções das especificações: Operadores Relacionais , Operadores de Igualdade
{{SpecName('ESDraft', '#sec-relational-operators')}}{{Spec2('ESDraft')}}Definidos em várias seções das especificações: Operadores Relacionais , Operadores de Igualdade
- -

Compatibilidade com navegadores

- -

{{Compat("javascript.operators.comparison")}}

- -

Consulte também

- - - -
-
-
diff --git a/files/pt-br/conflicting/web/javascript/reference/operators_7c8eb9475d97a4a734c5991857698560/index.html b/files/pt-br/conflicting/web/javascript/reference/operators_7c8eb9475d97a4a734c5991857698560/index.html deleted file mode 100644 index e265714e18..0000000000 --- a/files/pt-br/conflicting/web/javascript/reference/operators_7c8eb9475d97a4a734c5991857698560/index.html +++ /dev/null @@ -1,557 +0,0 @@ ---- -title: Bitwise operators -slug: >- - conflicting/Web/JavaScript/Reference/Operators_7c8eb9475d97a4a734c5991857698560 -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: Web/JavaScript/Reference/Operators/Bitwise_Operators -original_slug: Web/JavaScript/Reference/Operators/Bitwise_Operators ---- -
{{jsSidebar("Operators")}}
- -
- -
Operadores bit-a-bit são são operadores tratados como sequência de 32 bits ( zeros e uns ), preferencialmente como decimal, hexadecimal, ou números octais. Por exemplo, o número decimal 9 tinha como representação binária de 1001. Operadores bit-a-bit realizam as operações em tais representações binárias, mas retornam valores numéricos no padrão Javascript.
- -
{{EmbedInteractiveExample("pages/js/expressions-bitwiseoperators.html")}}
- - - -

A seguinte tabela resume os Operadores bit-a-bit:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OperadorUsoDescrição
Bitwise ANDa & bRetorna 1 em cada posição de bit para à qual o bit correspondente de ambos eram 1s.
Bitwise ORa | b -

Retorna 1 para cada posição de bit para à qual o correspondente de um ou ambos eram 1s.

-
Bitwise XORa ^ bRetorna 1 para cada posição de bit para à qual o bit correspondente de um mas não ambos eram 1s.
Bitwise NOT~ aInverte os bits de seus operandos.
Left shifta << bJogam a  em representação binária b (< 32) bits à esquerda, mudando de zeros à diretia.
Sign-propagating right shifta >> bJogam a  em representação binária b (< 32) bits à direita, descartando bits que foram tornados off.
Zero-fill right shifta >>> b  Jogam a  em representação binária b (< 32) bits à direita, descartando bits que foram tornados off, e jogando 0s para à esquerda.
- -

Inteiros assinados em 32-bit

- -

Os operandos de todos os operadores bit-a-bit são assinados como inteiros de 32-bit em duas formas complementares. Duas formas complementares significa que uma negativa contrapartida (e.g. 5 vs. -5) são todos os bits daqueles números invertidos (bit-a-bit NOT de um número, a.k.a. complementos de um número) mais um. Por example, os seguintes encodes inteiros são 314:

- -
00000000000000000000000100111010
-
- -

Os seguintes encodes ~314, i.e. são os únicos complementos de  314:

- -
11111111111111111111111011000101
-
- -

Finalmente, os seguintes encodes -314, i.e. são dois complementos de 314:

- -
11111111111111111111111011000110
-
- -

As duas garantias complementares daquele bit mais à esquerda que é zero quando o número é positivo e 1 quando o número é negativo. Aliás, isto é chamado de sign bit ou bit assinalado.

- -

O número 0 é o inteiro composto completamente de 0 bits.

- -
0 (base 10) = 00000000000000000000000000000000 (base 2)
-
- -

O número -1 é o inteiro que é composto completamente de 1 bits.

- -
-1 (base 10) = 11111111111111111111111111111111 (base 2)
-
- -

O número -2147483648 (representação hexadecimal: -0x80000000) é o inteiro completamente composto de 0 bits exceto o primeiro (left-most) único.

- -
-2147483648 (base 10) = 10000000000000000000000000000000 (base 2)
-
- -

O número 2147483647 (representação hexadecimal: 0x7fffffff) é o inteiro composto completamente por bits 1, exceto pelo primeiro (o mais à esquerda).

- -
2147483647 (base 10) = 01111111111111111111111111111111 (base 2)
-
- -

Os números -2147483648 e 2147483647 são, respectivamente, o minimo e o máximo inteiro representáveis atráves de um número de 32 bits assinados.

- -

Operadores lógico bit-abit

- -

Conceitualmente, os operadores lógicos bit-abit funcionam da seguinte forma:

- - - -

& (Bitwise AND)

- -

Performa a operação AND em cada par de bits. a AND b retorna 1, apenas quando a e b são 1. A tabela verdade para a operação AND é:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
aba AND b
000
010
100
111
- -
.    9 (base 10) = 00000000000000000000000000001001 (base 2)
-    14 (base 10) = 00000000000000000000000000001110 (base 2)
-                   --------------------------------
-14 & 9 (base 10) = 00000000000000000000000000001000 (base 2) = 8 (base 10)
-
- -

Performar a operação AND bit-a-bit de qualquer número x com 0 retornará 0. Performar a operação AND bit-a-bit de qualquer número x com -1 retornará x.

- -

| (Bitwise OR)

- -

Performa a operação OR em cada par de bits. a OR b retorna 1 se pelo menos a ou pelo menos b é 1. As tabela versão para a operação OR é:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
aba OR b
000
011
101
111
- -
.    9 (base 10) = 00000000000000000000000000001001 (base 2)
-    14 (base 10) = 00000000000000000000000000001110 (base 2)
-                   --------------------------------
-14 | 9 (base 10) = 00000000000000000000000000001111 (base 2) = 15 (base 10)
-
- -

Performar a operação OR de qulalquer número x com 0 retornará 0. Performar a operação OR de qualquer número X com -1 retornará -1.

- -

^ (Bitwise XOR)

- -

Performs the XOR operation on each pair of bits. a XOR b yields 1 if a and b are different. The truth table for the XOR operation is:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
aba XOR b
000
011
101
110
- -
.    9 (base 10) = 00000000000000000000000000001001 (base 2)
-    14 (base 10) = 00000000000000000000000000001110 (base 2)
-                   --------------------------------
-14 ^ 9 (base 10) = 00000000000000000000000000000111 (base 2) = 7 (base 10)
-
- -

Bitwise XORing any number x with 0 yields x. Bitwise XORing any number x with -1 yields ~x.

- -

~ (Bitwise NOT)

- -

Performs the NOT operator on each bit. NOT a yields the inverted value (a.k.a. one's complement) of a. The truth table for the NOT operation is:

- - - - - - - - - - - - - - - - -
aNOT a
01
10
- -
 9 (base 10) = 00000000000000000000000000001001 (base 2)
-               --------------------------------
-~9 (base 10) = 11111111111111111111111111110110 (base 2) = -10 (base 10)
-
- -

Bitwise NOTing any number x yields -(x + 1). For example, ~-5 yields 4.

- -

Note that due to using 32-bit representation for numbers both ~-1 and ~4294967295 (232-1) results in 0.

- -

Operadores de deslocamento bit a bit

- -

The bitwise shift operators take two operands: the first is a quantity to be shifted, and the second specifies the number of bit positions by which the first operand is to be shifted. The direction of the shift operation is controlled by the operator used.

- -

Shift operators convert their operands to 32-bit integers in big-endian order and return a result of the same type as the left operand. The right operand should be less than 32, but if not only the low five bits will be used.

- -

<< (Left shift)

- -

This operator shifts the first operand the specified number of bits to the left. Excess bits shifted off to the left are discarded. Zero bits are shifted in from the right.

- -

For example, 9 << 2 yields 36:

- -
.    9 (base 10): 00000000000000000000000000001001 (base 2)
-                  --------------------------------
-9 << 2 (base 10): 00000000000000000000000000100100 (base 2) = 36 (base 10)
-
- -

Bitwise shifting any number x to the left by y bits yields x * 2 ** y.

- -

>> (Sign-propagating right shift)

- -

This operator shifts the first operand the specified number of bits to the right. Excess bits shifted off to the right are discarded. Copies of the leftmost bit are shifted in from the left. Since the new leftmost bit has the same value as the previous leftmost bit, the sign bit (the leftmost bit) does not change. Hence the name "sign-propagating".

- -

For example, 9 >> 2 yields 2:

- -
.    9 (base 10): 00000000000000000000000000001001 (base 2)
-                  --------------------------------
-9 >> 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10)
-
- -

Likewise, -9 >> 2 yields -3, because the sign is preserved:

- -
.    -9 (base 10): 11111111111111111111111111110111 (base 2)
-                   --------------------------------
--9 >> 2 (base 10): 11111111111111111111111111111101 (base 2) = -3 (base 10)
-
- -

>>> (Zero-fill right shift)

- -

This operator shifts the first operand the specified number of bits to the right. Excess bits shifted off to the right are discarded. Zero bits are shifted in from the left. The sign bit becomes 0, so the result is always non-negative.

- -

For non-negative numbers, zero-fill right shift and sign-propagating right shift yield the same result. For example, 9 >>> 2 yields 2, the same as 9 >> 2:

- -
.     9 (base 10): 00000000000000000000000000001001 (base 2)
-                   --------------------------------
-9 >>> 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10)
-
- -

However, this is not the case for negative numbers. For example, -9 >>> 2 yields 1073741821, which is different than -9 >> 2 (which yields -3):

- -
.     -9 (base 10): 11111111111111111111111111110111 (base 2)
-                    --------------------------------
--9 >>> 2 (base 10): 00111111111111111111111111111101 (base 2) = 1073741821 (base 10)
-
- -

Examples

- -

Flags and bitmasks

- -

The bitwise logical operators are often used to create, manipulate, and read sequences of flags, which are like binary variables. Variables could be used instead of these sequences, but binary flags take much less memory (by a factor of 32).

- -

Suppose there are 4 flags:

- - - -

These flags are represented by a sequence of bits: DCBA. When a flag is set, it has a value of 1. When a flag is cleared, it has a value of 0. Suppose a variable flags has the binary value 0101:

- -
var flags = 5;   // binary 0101
-
- -

This value indicates:

- - - -

Since bitwise operators are 32-bit, 0101 is actually 00000000000000000000000000000101, but the preceding zeroes can be neglected since they contain no meaningful information.

- -

A bitmask is a sequence of bits that can manipulate and/or read flags. Typically, a "primitive" bitmask for each flag is defined:

- -
var FLAG_A = 1; // 0001
-var FLAG_B = 2; // 0010
-var FLAG_C = 4; // 0100
-var FLAG_D = 8; // 1000
-
- -

New bitmasks can be created by using the bitwise logical operators on these primitive bitmasks. For example, the bitmask 1011 can be created by ORing FLAG_A, FLAG_B, and FLAG_D:

- -
var mask = FLAG_A | FLAG_B | FLAG_D; // 0001 | 0010 | 1000 => 1011
-
- -

Individual flag values can be extracted by ANDing them with a bitmask, where each bit with the value of one will "extract" the corresponding flag. The bitmask masks out the non-relevant flags by ANDing with zeroes (hence the term "bitmask"). For example, the bitmask 0100 can be used to see if flag C is set:

- -
// if we own a cat
-if (flags & FLAG_C) { // 0101 & 0100 => 0100 => true
-   // do stuff
-}
-
- -

A bitmask with multiple set flags acts like an "either/or". For example, the following two are equivalent:

- -
// if we own a bat or we own a cat
-// (0101 & 0010) || (0101 & 0100) => 0000 || 0100 => true
-if ((flags & FLAG_B) || (flags & FLAG_C)) {
-   // do stuff
-}
-
- -
// if we own a bat or cat
-var mask = FLAG_B | FLAG_C; // 0010 | 0100 => 0110
-if (flags & mask) { // 0101 & 0110 => 0100 => true
-   // do stuff
-}
-
- -

Flags can be set by ORing them with a bitmask, where each bit with the value one will set the corresponding flag, if that flag isn't already set. For example, the bitmask 1100 can be used to set flags C and D:

- -
// yes, we own a cat and a duck
-var mask = FLAG_C | FLAG_D; // 0100 | 1000 => 1100
-flags |= mask;   // 0101 | 1100 => 1101
-
- -

Flags can be cleared by ANDing them with a bitmask, where each bit with the value zero will clear the corresponding flag, if it isn't already cleared. This bitmask can be created by NOTing primitive bitmasks. For example, the bitmask 1010 can be used to clear flags A and C:

- -
// no, we don't have an ant problem or own a cat
-var mask = ~(FLAG_A | FLAG_C); // ~0101 => 1010
-flags &= mask;   // 1101 & 1010 => 1000
-
- -

The mask could also have been created with ~FLAG_A & ~FLAG_C (De Morgan's law):

- -
// no, we don't have an ant problem, and we don't own a cat
-var mask = ~FLAG_A & ~FLAG_C;
-flags &= mask;   // 1101 & 1010 => 1000
-
- -

Flags can be toggled by XORing them with a bitmask, where each bit with the value one will toggle the corresponding flag. For example, the bitmask 0110 can be used to toggle flags B and C:

- -
// if we didn't have a bat, we have one now,
-// and if we did have one, bye-bye bat
-// same thing for cats
-var mask = FLAG_B | FLAG_C;
-flags = flags ^ mask;   // 1100 ^ 0110 => 1010
-
- -

Finally, the flags can all be flipped with the NOT operator:

- -
// entering parallel universe...
-flags = ~flags;    // ~1010 => 0101
-
- -

Conversion snippets

- -

Convert a binary String to a decimal Number:

- -
var sBinString = '1011';
-var nMyNumber = parseInt(sBinString, 2);
-alert(nMyNumber); // prints 11, i.e. 1011
-
- -

Convert a decimal Number to a binary String:

- -
var nMyNumber = 11;
-var sBinString = nMyNumber.toString(2);
-alert(sBinString); // prints 1011, i.e. 11
-
- -

Automate Mask Creation

- -

You can create multiple masks from a set of Boolean values, like this:

- -
function createMask() {
-  var nMask = 0, nFlag = 0, nLen = arguments.length > 32 ? 32 : arguments.length;
-  for (nFlag; nFlag < nLen; nMask |= arguments[nFlag] << nFlag++);
-  return nMask;
-}
-var mask1 = createMask(true, true, false, true); // 11, i.e.: 1011
-var mask2 = createMask(false, false, true); // 4, i.e.: 0100
-var mask3 = createMask(true); // 1, i.e.: 0001
-// etc.
-
-alert(mask1); // prints 11, i.e.: 1011
-
- -

Reverse algorithm: an array of booleans from a mask

- -

If you want to create an Array of Booleans from a mask you can use this code:

- -
function arrayFromMask(nMask) {
-  // nMask must be between -2147483648 and 2147483647
-  if (nMask > 0x7fffffff || nMask < -0x80000000) {
-    throw new TypeError('arrayFromMask - out of range');
-  }
-  for (var nShifted = nMask, aFromMask = []; nShifted;
-       aFromMask.push(Boolean(nShifted & 1)), nShifted >>>= 1);
-  return aFromMask;
-}
-
-var array1 = arrayFromMask(11);
-var array2 = arrayFromMask(4);
-var array3 = arrayFromMask(1);
-
-alert('[' + array1.join(', ') + ']');
-// prints "[true, true, false, true]", i.e.: 11, i.e.: 1011
-
- -

You can test both algorithms at the same time…

- -
var nTest = 19; // our custom mask
-var nResult = createMask.apply(this, arrayFromMask(nTest));
-
-alert(nResult); // 19
-
- -

For the didactic purpose only (since there is the Number.toString(2) method), we show how it is possible to modify the arrayFromMask algorithm in order to create a String containing the binary representation of a Number, rather than an Array of Booleans:

- -
function createBinaryString(nMask) {
-  // nMask must be between -2147483648 and 2147483647
-  for (var nFlag = 0, nShifted = nMask, sMask = ''; nFlag < 32;
-       nFlag++, sMask += String(nShifted >>> 31), nShifted <<= 1);
-  return sMask;
-}
-
-var string1 = createBinaryString(11);
-var string2 = createBinaryString(4);
-var string3 = createBinaryString(1);
-
-alert(string1);
-// prints 00000000000000000000000000001011, i.e. 11
-
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('ES1')}}{{Spec2('ES1')}}Initial definition.
{{SpecName('ES5.1', '#sec-11.7')}}{{Spec2('ES5.1')}}Defined in several sections of the specification: Bitwise NOT operator, Bitwise shift operators, Binary bitwise operators
{{SpecName('ES6', '#sec-bitwise-shift-operators')}}{{Spec2('ES6')}}Defined in several sections of the specification: Bitwise NOT operator, Bitwise shift operators, Binary bitwise operators
{{SpecName('ESDraft', '#sec-bitwise-shift-operators')}}{{Spec2('ESDraft')}}Defined in several sections of the specification: Bitwise NOT operator, Bitwise shift operators, Binary bitwise operators
- -

Compatibilidade com navegadores

- -

{{Compat("javascript.operators.bitwise")}}

- -

See also

- - diff --git a/files/pt-br/conflicting/web/javascript/reference/operators_8fa8b34b0547a749514637a15d386886/index.html b/files/pt-br/conflicting/web/javascript/reference/operators_8fa8b34b0547a749514637a15d386886/index.html deleted file mode 100644 index dd222f5285..0000000000 --- a/files/pt-br/conflicting/web/javascript/reference/operators_8fa8b34b0547a749514637a15d386886/index.html +++ /dev/null @@ -1,345 +0,0 @@ ---- -title: Operadores Lógicos -slug: >- - conflicting/Web/JavaScript/Reference/Operators_8fa8b34b0547a749514637a15d386886 -tags: - - Operador - - Operadores lógicos - - Referencia - - e - - não - - ou -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: Web/JavaScript/Reference/Operators/Logical_Operators -original_slug: Web/JavaScript/Reference/Operators/Operadores_Logicos ---- -
{{jsSidebar("Operators")}}
- -

Resumo

- -

Operadores lógicos são tipicamente usados com valores Booleanos (lógicos). Quando eles o são, retornam um valor booleano. Porém, os operadores && e || de fato retornam o valor de um dos operandos especificos, então se esses operadores são usados com valores não booleanos, eles podem retornar um valor não booleano.

- -

Descrição

- -

Os operadores lógicos são descritos na tabela abaixo:

- - - - - - - - - - - - - - - - - - - - - - - - -
OperadorUtilizaçãoDescrição
Logical AND (&&)expr1 && expr2Retorna expr1 se essa pode ser convertido para falso; senão, retorna expr2. Dessa forma, quando usado para valores Booleanos, && retorna verdadeiro se ambos os operandos forem verdadeiro ; senão, retorna falso.
Logical OR (||)expr1 || expr2Retorna expr1 se essa pode ser convertido para verdadeiro; senão, retorna expr2. Dessa forma, quando usado para valores Booleanos, || retorna verdadeiro se qualquer dos operandos for verdadeiro; se ambos são falso, retorna falso.
Logical NOT (!)!expr -

Retorna falsose o seu operando pode ser convertido para verdadeiro; senão, retorna verdadeiro.

-
- -

Se um valor pode ser convertido para verdadeiro, este valor é chamado de {{Glossary("truthy")}}. Se um valor pode ser convertido para falso, este valor é chamado de {{Glossary("falsy")}}.

- -

Exemplos de expressões que podem ser convertidas para falso são:

- - - -

Mesmo que os operadores && and || possam ser utilizados com operandos que não são valores Booleanos, eles ainda podem ser considerados como operadores booleanos visto que seus valores de saída sempre podem ser convertidos em valores booleanos.

- -

Avaliação de Curto-Circuito (Short-Circuit) 

- -

Como as expressões lógicas são avaliadas da esquerda pra direita, elas são testadas para possível avaliação de "curto-circuito" ("short-circuit") utilizando as seguintes regras:

- - - -

As regras de lógica garantem que essas avaliações estejam sempre corretas. Repare que a porção qualquer coisa das expressões acima não é avaliada, logo qualquer problema oriundo de tê-lo feito não é consumado. Note também  que a parte qualquer coisa das expressões acima pode ser qualquer expressão lógica unitária (conforme é indicado pelos parênteses).

- -

Por exemplo, as duas funções a seguir são equivalentes.

- -
function shortCircuitEvaluation() {
-  // logical OR (||)
-  doSomething() || doSomethingElse();
-
-  // logical AND (&&)
-  doSomething() && doSomethingElse();
-}
-
-function equivalentEvaluation() {
-
-  // logical OR (||)
-  var orFlag = doSomething();
-  if (!orFlag) {
-    doSomethingElse();
-  }
-
-
-  // logical AND (&&)
-  var andFlag = doSomething();
-  if (andFlag) {
-    doSomethingElse();
-  }
-}
- -

Contudo, as expressões a seguir não são equivalentes, devido a precedência do operador, e reforçam a importância de que o operador do lado direito (right hand) seja uma única expressão (agrupada com o uso de parênteses, caso seja necessário).

- -
 false && true || true       // retorna true
- false && (true || true)     // retorna falso
- -

AND Lógico (&&)

- -

O código a seguir demonstra exemplos do operador && (AND lógico). 

- -
a1 = true  && true       // t && t retorna true
-a2 = true  && false      // t && f retorna false
-a3 = false && true       // f && t retorna false
-a4 = false && (3 == 4)   // f && f retorna false
-a5 = 'Cat' && 'Dog'      // t && t retorna "Dog"
-a6 = false && 'Cat'      // f && t retorna false
-a7 = 'Cat' && false      // t && f retorna false
-a8 = ''    && false      // f && f retorna ""
-a9 = false && ''         // f && t retorna false
-
- -

OR Lógico (||)

- -

O código a seguir demonstra exemplos do operador || (OR lógico).

- -
o1 = true  || true       // t || t retorna true
-o2 = false || true       // f || t retorna true
-o3 = true  || false      // t || f retorna true
-o4 = false || (3 == 4)   // f || f retorna false
-o5 = 'Cat' || 'Dog'      // t || t retorna "Cat"
-o6 = false || 'Cat'      // f || t retorna "Cat"
-o7 = 'Cat' || false      // t || f retorna "Cat"
-o8 = ''    || false      // f || f retorna false
-o9 = false || ''         // f || f retorna ""
- -

NOT Logico (!)

- -

O código a seguir demonstra exemplos do operador ! (NOT lógico) .

- -
n1 = !true               // !t returns false
-n2 = !false              // !f returns true
-n3 = !'Cat'              // !t returns false
- -

Regras de conversão

- -

Convertendo AND para OR

- -

A operação a seguir, envolvendo Booleanos:

- -
bCondition1 && bCondition2
- -

é sempre igual a:

- -
!(!bCondition1 || !bCondition2)
- -

Convertendo OR to AND

- -

A operação a seguir, envolvendo Booleanos:

- -
bCondition1 || bCondition2
- -

é sempre igual a:

- -
!(!bCondition1 && !bCondition2)
- -

Convertendo entre dois NOT

- -

A seguinte operação envolvendo Booleanos:

- -
!!bCondition
- -

é sempre igual a:

- -
bCondition
- -

Removendo parenteses aninhados

- -

Como as expressões lógicas são avaliadas da esquerda pra direita, é sempre possível remover os parênteses de uma expressão complexa seguindo algumas regras:

- -

Removendo AND aninhado

- -

A seguinte operação composta envolvendo Booleanos:

- -
bCondition1 || (bCondition2 && bCondition3)
- -

é igual a :

- -
bCondition1 || bCondition2 && bCondition3
- -

Removendo OR aninhado

- -

A operação composta a seguir, envolvendo Booleanos:

- -
bCondition1 && (bCondition2 || bCondition3)
- -

é sempre igual a:

- -
!(!bCondition1 || !bCondition2 && !bCondition3)
- -

Especificações

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaçãoEstatusComentário
ECMAScript 1st Edition.StandardInitial definition.
{{SpecName('ES5.1', '#sec-11.4.9', 'Logical NOT Operator')}}
- {{SpecName('ES5.1', '#sec-11.11', 'Binary Logical Operators')}}		{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-logical-not-operator', 'Logical NOT operator')}}
- {{SpecName('ES6', '#sec-binary-logical-operators', 'Binary Logical Operators')}}		{{Spec2('ES6')}}
- -

Compatibilidade com o Navegador

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
RecursoChromeFirefox (Gecko)Internet ExplorerOperaSafari
Logical AND (&&){{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Logical OR (||){{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Logical NOT (!){{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome para AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Logical AND (&&){{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Logical OR (||){{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Logical NOT (!){{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -

Retrocompatibilidade: Comportamento no  JavaScript 1.0 e1.1

- -

Os operadores  && and || se comportam da seguinte maneira:

- - - - - - - - - - - - - - - - - - - -
OperadorUtilizaçãoComportamento
&&expr1 && expr2Se o primeiro operando (expr1) pode ser convertido para falso, o operador &&  retorna false ao invés do valor do expr1.
||expr1 || expr2If the first operand (expr1) can be converted to true, the || operator retorna true rather than the value of expr1.
- -

Veja Também

- - diff --git a/files/pt-br/conflicting/web/javascript/reference/statements/switch/index.html b/files/pt-br/conflicting/web/javascript/reference/statements/switch/index.html deleted file mode 100644 index 769a86e29f..0000000000 --- a/files/pt-br/conflicting/web/javascript/reference/statements/switch/index.html +++ /dev/null @@ -1,188 +0,0 @@ ---- -title: default -slug: conflicting/Web/JavaScript/Reference/Statements/switch -tags: - - JavaScript - - Keyword - - Palavra-chave -translation_of: Web/JavaScript/Reference/Statements/switch -translation_of_original: Web/JavaScript/Reference/Statements/default -original_slug: Web/JavaScript/Reference/Statements/default ---- -
{{jsSidebar("Statements")}}
- -

A palavra-chave default pode ser usada em duas situações no JavaScript: com uma declaração {{jsxref("Statements/switch", "switch")}}, ou com uma declaração {{jsxref("Statements/export", "export")}}.

- -

Sintaxe

- -

Com uma declaração {{jsxref("Statements/switch", "switch")}}:

- -
switch (expressao) {
-  case value1:
-    //Declarações executadas quando o resultado da expressao for value1
-    [break;]
-  default:
-    //Declarações executadas quando nenhum dos valores for igual o da expressao
-    [break;]
-}
- -

Com a declaração {{jsxref("Statements/export", "export")}}:

- -
export default nameN
- -

Descrição

- -

Para mais detalhes, veja as páginas:

- - - -

Exemplos

- -

Usando default em declarações switch

- -

No exemplo a seguir, se a variável expr for "Laranjas" ou "Maças", o programa encontra os valores com o case "Laranjas" ou "Maças"  e executa a declaração correspondente. A palavra-chave default vai ajudar em qualquer outro caso e executará a declaração associada.

- -
switch (expr) {
-  case 'Laranjas':
-    console.log('Laranjas custam R$0,59.');
-    break;
-  case 'Maças':
-    console.log('Maças custam R$0,32.');
-    break;
-  default:
-    console.log('Desculpe, nós não temos ' + expr + '.');
-}
- -

Usando default com export

- -

Se você quiser exportar apenas um valor ou precisa de um valor fallback para um módulo, uma exportação padrão (default export) pode ser usada:

- -
// module "my-module.js"
-let cube = function cube(x) {
-  return x * x * x;
-};
-export default cube;
- -

Então, no outro script, isso pode ser passado direto para o import do default export:

- -
// module "my-module.js"
-import myFunction from 'my-module';
-console.log(myFunction(3)); // 27
-
- -

Especificações

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaçãoSituaçãoComentário
{{SpecName('ES6', '#sec-switch-statement', 'switch statement')}}{{Spec2('ES6')}} 
{{SpecName('ES6', '#sec-exports', 'Exports')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-switch-statement', 'switch statement')}}{{Spec2('ESDraft')}} 
{{SpecName('ESDraft', '#sec-exports', 'Exports')}}{{Spec2('ESDraft')}} 
- -

Compatibilidade de navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Switch default{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Export default{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Switch default{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Export default{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

Veja também

- - diff --git a/files/pt-br/conflicting/web/progressive_web_apps/index.html b/files/pt-br/conflicting/web/progressive_web_apps/index.html deleted file mode 100644 index 43a6e52cbd..0000000000 --- a/files/pt-br/conflicting/web/progressive_web_apps/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: Design Responsivo -slug: conflicting/Web/Progressive_web_apps -translation_of: Web/Progressive_web_apps -translation_of_original: Web/Guide/Responsive_design -original_slug: Web_Development/Mobile/Design_responsivo ---- -

Como uma reação aos problemas associados com a abordagem de sites separados para desenvolvimento de sites para celular e desktop, uma ideia relativamente nova (que é atualmente bastante antiga) está crescendo em popularidade: abandona a detecção do agente de usuário, e em vez disso faz sua pagína responder no lado cliente aos recursos do navegador. Esta abordagem, introduzida por Ethan Marcotte em seu artigo para A List Apart, veio a ser conhecido como Responsive Web Design. Como a abordagem de sites separados, WebDesgin Responsivo tem aspectos positivos e negativos.

- -

As Vantagens

- -

Embora ele não foi inicialmente proposto como metodo para criação de sites móveis, design responsivo foi recentemente ganhou muita atenção como uma forma de tomar alguns primeiros passos no sentido de amizade móvel no lugar de um site móvel separado.

- -
    -
  1. Economiza tempo e dinheiro, como não há uma necessidade de manter sites separados para diferentes dispositivos.
    2. -
  2. Design Responsivo fornece cada página com uma URL única e original.
    3. -
  3. Estatísticas de compartilhamento social (Curtidas no Facebook, Tweets, +1 no Google+) não dividem, desde que as versões desktop e móveis de páginas web usam uma URL única e exclusiva.
    4. -
  4. Design Responsivo não se preocupa sobre agentes de usuário.
    5. -
- -

Há alguns aspectos muito bom para essa abordagem. Desde que ele não confie na detecção do agente de usuário, é mais resistente e à prova futurística da abordagem de sites separados. Para sites simples, ele também pode ser significativamente mais fácil de implementar e manter do que outras opções.

- -

Os Negativos

- -

Essa abordagem não é sem suas limitações. Porque o conteúdo deve ser alterado no lado cliente com JavaScript, apenas mínimas alterações de conteúdo são encorajadas. Em geral, as coisas podem ficar muito cabeludo muito rapidamente se você estiver tentando codificar dois conjuntos distintos de JavaScript para funcionar com o mesmo DOM. Esta é uma grande razão por que aplicativos web não tendem a adotar esta abordagem.

- -

Dar a seu site existente um design responsivo também envolve uma reconfiguração de seus estilos se você não está ostentando ainda um layout flexível. Esta poderia ser uma benção disfarçada, embora; fazer o layout do seu site responsivo poderia ser uma boa oportunidade para modernizar e limpar o CSS do seu site.

- -

Finalmente, uma vez que você está adicionando o código para seus scripts e estilos, desempenho pode ser pior do que a abordagem de Sites Separados. Não há realmente nenhuma maneira de contonar isso, embora uma refatoração pensativo de seus scripts e estilos pode realmente salvar alguns bytes em longo prazo.

- -

Quando há que escolher esta opção

- -

teixido_responsive-300x177.pngComo mencionado acima, porque as alterações de conteúdo podem ser difíceis, quando você usar essa abordagem, você não é capaz de dar aos usuários uma experiência surpreendentemente diferente no celular sem um aumento significativo na complexidade de código. Disse que, se as versões desktop e móvel do seu site são muito semelhantes, então esta abordagem é uma ótima opção. É bem adequado para sites centrados em documentos cujo um caso de uso primário é consistente em dispositivos, como as páginas de produtos. Você pode notar que os exemplos abaixo são todos blogs ou portfolios!

- -

Exemplos

- -

Embora não seja tão popular como a abordagem de locais diferentes, existem mais e mais sites que empregam essa técnica todos os dias. Felizmente, uma vez que todo o código é lado cliente, se você gostaria de ver como um site tecnicamente implementa esta abordagem, é tão simples como visitar o site e clicando em “Ver Código-Fonte da Página.” Aqui estão alguns exemplos:

- - - -

Apesar de ser uma abordagem relativamente jovem, já existem algumas prátivas recomendadas emergentes. Por exemplo, se você estiver criando um site do zero com essa opção em mente, é geralmente útil para criar um design de tela pequena primeiro, para que as restrições do site móvel com você desde o início. Também é ótimo para usar o aprimoramento progressivo para seus estilos em vez de ocultar elementos do seus site existente com media queries. Desta forma, navegadores mais antigos que podem não oferecer suporte a media queries ainda mostrem o layout adequado. Uma excelente apresentação sobre o mérito desse método está disponível aqui.

- -

Abordagem para desenvolvimento web móvel

- -

Consulte os seguintes artigos de abaixo e outras abordagens ao desenvolvimento para plataformas móveis.

- - - -

Veja também

- - - -
-

Informação Original do Documento

- -

Originalmente publicado em 27 de Maio de 2011 no blog Mozilla Webdev como "Approaches to Mobile Web Development Part 3 - Responsive Design", por Jason Grlicky.

-
diff --git "a/files/pt-br/orphaned/glossary/tratando_formul\303\241rios_com_php/index.html" "b/files/pt-br/orphaned/glossary/tratando_formul\303\241rios_com_php/index.html" deleted file mode 100644 index fc4c7baa22..0000000000 --- "a/files/pt-br/orphaned/glossary/tratando_formul\303\241rios_com_php/index.html" +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: Tratando Formulários com PHP -slug: orphaned/Glossary/Tratando_Formulários_com_PHP -tags: - - Método POST - - PHP -translation_of: Glossary/Tratando_Formulários_com_PHP -original_slug: Glossario/Tratando_Formulários_com_PHP ---- -

Uma das características mais fortes do PHP é o jeito como ele trata formulários HTML. O conceito básico que é importante entender é que qualquer elemento de formulário irá automaticamente ficar disponível para seus scripts PHP. Por favor leia a seção Variáveis externas do PHP para mais informações e exemplos de como usar formulários com PHP. Aqui vai um exemplo de formulário HTML:

- -

Enviando Dados com método POST

- -

 

- -
<form action="arquivo.php" method="post">
- <p>Nome: <input type="text" name="nnome" /></p>
- <p>idade: <input type="text" name="idade" /></p>
- <p><input type="submit" /></p>
-</form>
- -

 

diff --git a/files/pt-br/orphaned/hello_world_rust/index.html b/files/pt-br/orphaned/hello_world_rust/index.html deleted file mode 100644 index baef01d161..0000000000 --- a/files/pt-br/orphaned/hello_world_rust/index.html +++ /dev/null @@ -1,192 +0,0 @@ ---- -title: Hello World Rust -slug: orphaned/Hello_World_Rust -tags: - - Performance - - baixo-nível - - brazil - - compilada - - compile - - hello world - - low-level - - programar - - programming - - pt-br - - rust - - rustontherocks - - servo -original_slug: Hello_World_Rust ---- -

Hello, World!

- -

 

- -

 

- -

Que tal  escrevermos um clássico programa em Rust?

- -

 

- -

Uma coisa legal sobre começar com programas simples é o fato de que você percebe que o seu compilador não está somente instalado como também está funcionando propriamente.

- -

 

- -

A primeira coisa que nós precisamos fazer é criar um local para que possamos organizar nossos códigos. Eu gosto de criar uma pasta projetos dentro da minha pasta home. Lembrando que o Rust não se importa com o local onde o seu código se encontra.

- -

 

- -

Isso nos leva a uma outro detalhe: eu estou  assumindo que você já tem uma certa familiaridade com a linha de comando. Se você preferir utilizar uma IDE ao invés da linha de comando, você talvez queira dar uma olhada no SolidOak(https://github.com/oakes/SolidOak ), ou qualquer plugin disponível para a sua IDE preferida. Existem por aí um bom número de extensões com qualidade variável em desenvolvimento por parte da comunidade. A equipe Rust também desenvolve plugins para vários editores(https://github.com/rust-lang/rust/blob/master/src/etc/CONFIGS.md ).

- -

 

- -

Dito isso, vamos criar um deretório dentro da nossa pasta projetos.

- -

 

- -

$ mkdir ~/projects

- -

$ cd ~/projects

- -

$ mkdir hello_world

- -

$ cd hello_world

- -

 

- -

Caso você esteja no Windows e não esteja utilizando PowerShell, talvez o ~ não funcione. Consulte a documentação do seu shell para mais detalhes.

- -

 

- -

Vamos criar um arquivo para o nosso código. Nós chamamos nosso arquivo de main.rs. Arquivos Rust são sempre terminados com a extensão .rs. Caso você esteja utilizando mais de uma palavra no nome de seu arquivo, é preferível que você utilize o underscore/underline: hello_world.rs ao invés de concatenar tudo como: helloword.rs. No mundo rust isso é chamado de snake_case.

- -

 

- -

Agora que você já tem o seu arquivo abra-o e digite o seguinte código:

- -

 

- -

fn main() {

- -

println!("Hello, world!");

- -

}

- -

 

- -

Salve o arquivo e digite o seguinte no seu terminal:

- -

 

- -

$ rustc main.rs

- -

$ ./main # ou main.exe no Windows

- -

Hello, world!

- -

 

- -

Sucesso!

- -

 

- -

Agora, como diria Jack: "Vamos por partes...".

- -

 

- -

fn main() {

- -

 

- -

}

- -

 

- -

Estas linhas definem uma função em Rust. A função main é de fato especial: ela é o começo de todo programa feito em Rust. Essas primeiras linhas dizem “Eu estou declarando uma função chamada main que não possui nenhum argumento e não retorna valor nenhum.” Caso tivesse argumentos eles estariam dentro dos parênteses (( )), e como não estamos retornando nada nós podemos omitir o tipo de retorno inteiramente. Falaremos mais sobre isso em tutoriais futuros.

- -

 

- -

Você também deve notar que a função é envolta por chaves ({ }). Rust exige chaves em volta do escopo das funções. Também é considerado uma boa prática abrir chaves na mesma linha onde foi declarada a função.

- -

 

- -

Próxima linha:

- -

 

- -

println!("Hello, world!");

- -

 

- -

Esta linha faz todo o trabalho do nosso pequeno programa. Existem inúmeros detalhes importantes nela. Lembre-se de configurar o seu editor para que utilize quatro espaços para fazer a identação. É disponibilizado várias configurações para alguns editores (https://github.com/rust-lang/rust/blob/master/src/etc/CONFIGS.md).

- -

 

- -

O segundo ponto é a parte do println!( ).

- -

Este trecho de código chama uma macro(http://doc.rust-lang.org/book/macros.html) Rust, que é a forma como Rust realiza a metaprogramação. Se ao invés de uma macro fosse uma função, teríamos algo como: println( ). Para o nosso propósito aqui, nós não precisamos nos preocupar com essa diferença. Apenas saiba que algumas vezes você irá ver ' ! ', o que indica uma chamada de macro e não uma chamada de função normal. Rust implementa println!( ) como uma macro e não como uma simples função por alguns bons motivos, contudo, como dito, não se faz necessário explicar agora.

- -

Uma última ressalva:se você já usou macros em outras linguagens como C/C++, você verá que as macros do Rust são bastante diferentes. Não fique assustado com as macros. Nós vamos entendendo melhor ao longo dos próximos tutoriais.

- -

 

- -

Próximo, "Hello, world!" é uma 'string'. Strings são geralmente bastante complicadas em uma 'system language', e ainda mais, temos uma string estáticamente alocada. Caso você queira ler mais sobre alocação, confira este link: http://doc.rust-lang.org/book/the-stack-and-the-heap.html, mas por hora não se faz necessário.

- -

Voltando, nós passamos a nossa string como um argumento para a macro println!, que por sua vez imprime na tela a nossa 'string'. Fácil!

- -

 

- -

Finalmente, a nossa linha de código termina com um ponto e vírgula ( ; ). Rust é uma linguagem orientada à expressões, o que significa que a maior parte da linguagem são expressões e não apenas declarações. O ; é usado para indicar que uma expressão terminou e que a próxima está prestes a começar. A grande maioria das linhas de código em Rust acabarão com ;.

- -

 

- -

Por fim, compilar e executar.

- -

Para compilar usamos o nosso compilador rustc e em seguida passamos o nome do nosso arquivo:

- -

 

- -

$ rustc main.rs

- -

 

- -

Caso você tenha experiência com C/C++ verá que existe semelhança com o gcc e clang. Após o comando, Rust gerará um binário executável. Podemos vê-lo utilizando o comando ls:

- -

 

- -

$ ls

- -

mainmain.rs

- -

 

- -

No Windows:

- -

$ dir

- -

main.exemain.rs

- -

 

- -

Agora temos dois arquivos, o nosso código com a extensão .rs e o executável(main.exe para Windows ou main para os demais).

- -

 

- -

$ ./main # or main.exe on Windows

- -

 

- -

O comando acima exibe a nossa string hello, world! no terminal.

- -

 

- -

Caso você venha de alguma linguagem dinâmica como Ruby, Python ou Javascript épossível que você nunca tenha feito esses dois passos anteriores em separado. Rust é uma linguagem “anteriormente compilada”, o que significa que você pode compilar um programa e compartilhar com alguém que não tenha Rust instalado e essa pessoa irá conseguir executar numa boa. Agora, se você compartilhar um arquivo .rb ou .py ou .js a pessoa com quem você compartilhou precisará ter Ruby/Python/Javascript instalado, em contra-partida com estas linguagens você compila e roda em um único comando. Tudo é uma questão de escolha quando se trata de padrões de linguagem e Rust fez as dele.

- -

 

- -

Parabéns! Você oficialmente escreveu seu primeiro programa em Rust. Isso lhe torna um programador Rust! Bem-vindo!!!

- -

 

- -

 

- -

 

diff --git a/files/pt-br/orphaned/instalando_rust/index.html b/files/pt-br/orphaned/instalando_rust/index.html deleted file mode 100644 index cf7c77a442..0000000000 --- a/files/pt-br/orphaned/instalando_rust/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: Instalando Rust -slug: orphaned/Instalando_Rust -tags: - - Linux - - Tutorial - - Windows - - baixo nivel - - brasil - - brazil - - hello world - - install - - low-level - - programming - - rust - - rustontherocks - - system language -original_slug: Instalando_Rust ---- -

Instalando o Rust

- -

 

- -

O primeiro passo é instalar. Existem várias maneiras de se instalar o Rust, porém a maneiras mais fácil é através do script 'rustup'. Se o seu sistema é Gnu/Linux ou Mac, eis o que você precisa fazer:

- -

 

- -
-

$ curl -sf -L https://static.rust-lang.org/rustup.sh | sh

-
- -

 

- -

Se você está preocupado com a potencial brecha de segurança de usar curl | sh , por favor continue lendo e veja a nossa alternativa abaixo. Sinta-se à vontade para fazer o processo em dois passos:

- -

 

- -
-

$ curl -f -L https://static.rust-lang.org/rustup.sh -O

- -

$ sh rustup.sh

-
- -

 

- -
-

Se você utiliza Windows, por favor baixe o instalador correto para a sua máquina:

- -

 

- -

32bits https://static.rust-lang.org/dist/rust-1.0.0-beta-i686-pc-windows-gnu.msi

- -

 

- -

64bits https://static.rust-lang.org/dist/rust-1.0.0-beta-x86_64-pc-windows-gnu.msi

-
- -

Ah, antes que eu esqueça!

- -

 

- -

Plataformas oficialmente suportadas:

- -

 

- -
-

Windows (7, 8, Server 2008 R2)

- -

Gnu/Linux(2.6.18 ou posterior, várias distribuições), x86 e x86-64

- -

OSX 10.7(Lion) ou posterior, x86 e x86-64

-
- -
-
- -

Rust foi bastante testado nestas plataformas e em algumas outras, como android. Mas estas são as mais amigáveis para se trabalhar, uma vez que foram as mais testadas.

- -

 

- -

Finalmente, um comentário sobre Windows. Rust considerou Windows como uma plataforma de primeira classe na fase de lançamento. Contudo, se formos honestos precisamos dizer que a experiência no Windows não é tão boa quanto no Gnu/Linux e OS X. Estamos trabalhando para melhorar isso! Se alguma coisa não funcionar, é um 'bug'. Por favor avise-nos caso isso venha a acontecer. Cada 'commit' é testado no Windows assim como em qualquer outra plataforma.

- -

 

- -

Se você tem Rust instalado, você pode abrir um terminal e digitar o seguinte:

- -

 

- -
-

$ rustc –version

-
- -

 

- -

Você deverá ver como saída o número da versão do Rust que está instalada, o 'commit hash', a data do 'commit' e a data que foi compilado.

- -

 

- -
-

rustc 1.0.0-beta (9854143cb 2015-04-02) (built 2015-04-02)

-
- -

 

- -

Caso você veja uma saída parecida com essa, parabéns Rust foi instalado com sucesso!

- -

 

- -
-

O instalador oficial também instala uma cópia da documentação para que você possa lê-la offline. Em sistemas UNIX, /usr/local/share/doc/rust é o local onde ela se encontra. No windows a documentação encontra-se na pasta share/doc dentro do local onde o Rust foi instalado.

- -

 

-
- -

Caso você não tenha obtido uma saída como a saida mostrada aqui, existem inúmeros lugares que você poderá pedir ajuda. O mais indicado é o canal do Rust no IRC (#rust) no servidor da mozilla (irc.mozilla.org). Você poderá acessar diretamente clicando neste link: https://client02.chat.mibbit.com/server=irc.mozilla.org&channel=%23rust .

- -

 

- -
-

Outro importantes links...

- -

 

- -

fórum dos usuários https://users.rust-lang.org/

- -

RoR Project http://rustontherocks.org

- -

Stack Overflow http://stackoverflow.com/questions/tagged/rust

- -

 

- -

 

-
diff --git a/files/pt-br/orphaned/learn/how_to_contribute/index.html b/files/pt-br/orphaned/learn/how_to_contribute/index.html deleted file mode 100644 index 63586e3320..0000000000 --- a/files/pt-br/orphaned/learn/how_to_contribute/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: Como contribuir para a área de aprendizagem da MDN -slug: orphaned/Learn/How_to_contribute -tags: - - Documentação - - Guia(2) - - Iniciante - - MDN Meta - - aprendizado - - contribuir - - prioridde - - pt-br -translation_of: Learn/How_to_contribute -original_slug: Aprender/Como_contribuir ---- -

Se você está aqui pela primeira vez ou após uma pesquisa mais aprofundada, é porque provavelmente você está interessado em contribuir para a área de aprendizado da MDN. Isto é uma excelente notícia!

- -

Nesta página, você irá encontrar tudo o que você precisa para começar a ajudar a melhorar o conteúdo de aprendizado da MDN. Existem muitas coisas que você pode fazer, dependendo de quanto tempo você tem disponível ou se você éum iniciante, um desenvolvedor web, ou um professor.

- -
-

Nota: se você já é um contribuinte do MDN, não hesite em checar novamente a pagina com o status da documentação para acompanhar o trabalho que tem sido feito e ver quais prioridades estão sendo escritas.

-
- -
-

Nota: Os contribuintes estão utilizando um painel na Trello para organizar as suas tarefas. Se você quiser utilizar esta ferramenta, apena se registre na Trello e procure por Jeremie lhe dar acesso de escrita ao painel.

-
- -

Encontre tarefas específicas

- -

Uma forma comum que as pessoas usam para contribuir para a Área de aprendizado é lendo os artigos, corrigindo erros de digitação e sugerindo melhorias. Adição de exemplos no nosso repositório do github também é bem vindo e entre em contato conosco se você quiser pedir o que mais precisar.

- -

Contribuir é um ótimo modo de se divertir enquanto aprende novas coisas. Se você se sentir perdido ou tiver dúvidas, não hesite em chegar até nós no "Fórum de conversa e aprendizado" ou no canal IRC (Veja o final da página para mais detalhes). Chris Mills é o "topic driver" da Área de aprendizado - você também poderia tentar contatá-lo diretamente.

- -

As sessões a seguir oferecem algumas ideias gerais de tipos de tarefas que você pode fazer.

- -

Eu sou um iniciante

- -

Isto é incrível!  Iniciantes são muito importantes e valiosos para criar e dar feedback sobre o material de aprendizado. Você possui uma perspectiva única destes artigos já que você faz parte do público alvo, o que pode torna-lo um membro valioso da nossa equipe. De fato, se você está utilizando um dos nossos artigos para aprender algo e você ficar preso, ou de alguma forma achar o artigo confuso, você pode consertar isso ou nos contar sobre o problema para nós nos certificarmos que isso será corrigido.

- -

Contribuir também é uma ótima maneira de se divertir enquanto aprende coisas novas se você se sentir perdido ou tiver perguntas, não hesite em nos contatar na nossa lista de e-mail ou no nosso canal IRC (obtenha detalhes na parte inferior desta página).

- -

Aqui temos algumas sugestões de como você pode contribuir:

- -
-
Adicionar tags para os nossos artigos (5 min)
-
Adicionar tags para o conteúdo do MDN é uma das maneiras mais fáceis de contribuir para a MDN. Uma de nossas diversas características é utilizar tags para ajudar no contexto da informação, é muito valioso contribuir com as tags. Para começar, dê uma olhada nesta lista de entradas do glosário e artigos de aprendizagem sem nenhuma tag.
-
Escrever e revisar entradas no glossário (15 min)
-
Como um iniciante, precisamos dos seus olhos ainda frescos olhando para o nosso conteúdo. Se você achar a entrada no glossário difícil de compreender, isto significa que está entrada precisa ser melhorada. Sinta-se livre para fazer qualquer mudança que você ache necessária. Se você acredita não ter a habilidade necessária para editar a entrada por você mesmo, nos comunique através da nossa lista de e-mail.
-
Escrever uma nova entrada no glossário (1 horas)
-
Esta é a maneira mais efetiva de aprender algo novo. Pegue um conceito sobre o qual você deseja aprender, e conforme você aprende sobre ele, escreva uma entrada no glossário. Explicar algo para os outros é uma ótima maneira de consolidar o conhecimento no seu cérebro, e ajudar para que as coisas possam fazer mais sentido para você, tudo enquanto ajuda outras pessoas. Todo mundo ganha!.
-
Ler e revisar um artigo de aprendizagem (2 horas)
-
É muito parecido com revisar entradas no glossário (veja acima); apenas leva mais tempo, geralmente estes artigos são um pouco maiores.
-
- -

Eu sou um desenvolvedor web

- -

Fantástico! Suas habilidades técnicas são tudo o que nós precisamos para certeza que fornecemos um conteúdo preciso para os iniciantes. Como esta parte específica do MDN é dedicada à aprendizagem da Web, certifique-se que as suas explicações são as mais simples possíveis, simples, porém úteis. É mais importante ser compreensível do que ser excessivamente precisa.

- -
-
Escrever e revisar entradas no glossário (15 min)
-
Como um desenvolvedor web, nós precisamos de você tenha certeza que o nosso conteúdo é tecnicamente preciso, sem ser muito tedioso. Sinta-se livre para fazer qualquer mudança que você achar necessário. Se você quiser discutir o conteúdo antes da edição, nos contate na nossa lista de e-mail ou canal IRC.
-
Escrever uma nova entrada no glossário (1 hora)
-
Esclarecer termos técnicos é uma boa forma de aprender e ser ao mesmo tempo tecnicamente preciso e simples. Os iniciantes vão agradecer por isso. Nós temos muitos termos indefinidos que precisam da sua atenção. Pegue um e você já estará pronto para começar.
-
Escrever e revisar artigos de prendizagem (2 hora)
-
Esta é a mesma coisa que revisar uma entrada do glossário (ver acima); ela só leva um pouco mais de tempo pois estes artigos são um pouco maiores.
-
Escrever um novo artigo de aprendizagem (4 horas)
-
A MDN está em falta de alguns artigos simples sobre o uso de tecnologias web (HTML, CSS, JavaScript, etc). Temos também alguns conteúdos antigos na MDN que merecem ser revisados e reformulados. Leve as suas habilidades ao limite para tornar as tecnologias da Web utilizáveis mesmo para os iniciantes.
-
Criar exercícios, exemplos de código e ferramentas de aprendizagem interativas (? horas)
-
Todos os nossos artigos de aprendizagem exigem que chamamos de "aprendizagem ativa", porque as pessoas aprendem melhor fazendo algo por si mesmas. Tais materiais são exercícios ou conteúdos interativos que ajudam o usuário a aplicar e manipular os conceitos descritos em um artigo. Há muitas formas possíveis de tornar os conteúdos de aprendizagem interativos, desde a criação de amostras de código com JSFiddle, ou similar, liberte a sua criatividade para a construção de conteúdo interativo com Thimble.
-
- -

Eu sou um professor

- -

A MDN tem uma longa história de excelência técnica, mas falta profundidade de compreensão da melhor maneira de ensinar conceitos para os recém-chegados. E é aqui que precisamos de você, como um professor ou educador. Você pode nos ajudar a garantir que os nossos materiais possuam uma boa didática, e que sejam práticos para os nossos leitores.

- -
-
Ler e revisar uma entrada no glossário (15 min)
-
Confira uma entrada de glossário e sinta-se livre para fazer qualquer alteração que você ache necessária. Se você quiser discutir sobre o conteúdo antes da edição, entre em contato conosco na nossa lista de e-mail ou canal IRC.
-
Escrever uma nova entrada no glossário  (1 hora)
-
Definições claras, simples de termos e conceitos básicos no glossário são fundamentais para atender às necessidades dos iniciantes. Sua experiência como educador pode ajudar a criar excelentes entradas de glossário; temos muitos termos indefinidos que precisam da sua atenção. Escolha um e vá a diante.
-
Adicionar ilustrações/ou esquemas para os artigos (1 hora)
-
Como você deve saber, as ilustrações são uma parte valiosa de qualquer conteúdo de aprendizagem. Isso é algo que muitas vezes não temos na MDN e suas habilidades podem fazer a diferença nessa área. Confira os artigos que necessitam conteúdo ilustrativo e pegue um que você queira criar gráficos.
-
Ler e revisar um artigo de aprendizagem (2 horas)
-
Isto é semelhante a revisar entradas de glossário (veja acima), mas exige mais tempo porque os artigos são um pouco maiores.
-
Escrever um novo artigo de aprendizagem (4 horas)
-
Precisamos de artigos simples e diretos sobre o ecossistema da Web e outros temas funcionais em torno deste tema. Uma vez que estes artigos de aprendizagem precisam ser educativos ao invés de tentar literalmente cobrir tudo que há para saber, sua experiência em saber o que cobrir será um grande trunfo.
-
Criar exercícios, questionários e ferramentas interativas de aprendizado (? horas)
-
Todos os nossos artigos de aprendizagem exigem "aprendizagem ativa". Tais materiais são exercícios ou conteúdo interativo que ajudam ao usuário aprender a usar e expandir os conceitos descritos em um artigo. Há muitas coisas que você pode fazer aqui, você pode ciar questionários para a construção de conteúdo interativo com o Thimble. Solte a sua criatividade!
-
Criar planos de aprendizagem (? horas)
-
A fim de fornecer tutoriais compreensíveis, precisamos moldar o nosso conteúdo em planos de aprendizagem. Esta é uma maneira de reunir o conteúdo existente e descobrir o que está faltando para criar um bom artigo de aprendizagem.
-
diff --git a/files/pt-br/orphaned/learn/html/forms/html5_updates/index.html b/files/pt-br/orphaned/learn/html/forms/html5_updates/index.html deleted file mode 100644 index 40721d4f3c..0000000000 --- a/files/pt-br/orphaned/learn/html/forms/html5_updates/index.html +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: Formulários em HTML -slug: orphaned/Learn/HTML/Forms/HTML5_updates -translation_of: Learn/HTML/Forms/HTML5_updates -original_slug: HTML/Forms_in_HTML ---- -

{{ gecko_minversion_header("2") }}

- -

Elementos e atributos de formulários em HTML5 proporcionam um grau de marcação semântica maior que HTML4 e remove grande parte da tediosa necessidade de se mexer com scripts e estilos que era necessária em HTML4. As características dos formulários em HTML5 proporcionam uma melhor experiência para usuários por tornarem formulários mais consistentes entre diferentes sites e dar um feedback imediato ao usuário sobre a entrada de dados. Eles também oferecem essa experiência para usuários que possuem scripts desabilitados em seus navegadores.

- -

Este tópico descreve itens novos ou modificados que são suportados por Gecko/Firefox, versão 4 ou mais recente.

- -

O elemento <input>

- -

O elemento {{ HTMLElement("input") }} tem novos valores para o atributo {{ htmlattrxref("type", "input") }}.

- - - -

O elemento {{ HTMLElement("input") }} também tem novos atributos:

- - - -

O elemento <form>

- -

O elemento {{ HTMLElement("form") }} possui um novo atributo:

- - - -

O elemento <datalist>

- -

O elemento {{ HTMLElement("datalist") }} representa a lista de elementos {{ HTMLElement("option") }} to suggest when filling an {{ HTMLElement("input") }} field.

- -

Você pode usar o atributo {{ htmlattrxref("list", "input") }} em um elemento {{ HTMLElement("input") }} para ligar um específico campo de entrada com um específico elemento {{ HTMLElement("datalist") }}.

- -

O elemento <output>

- -

O elemento {{ HTMLElement("output") }} representa o resultado de um cálculo.

- -

Você pode usar o atributo {{ htmlattrxref("for", "output") }} para especificar uma relação entre o elemento {{ HTMLElement("output") }} e outros elementos no documento que afetam o resultado do cálculo (por exemplo, como entradas ou parâmetros). O valor do atributo {{ htmlattrxref("for", "output") }} é uma lista de IDs separados por espaço de outros elementos.

- -

{{ non-standard_inline() }} Gecko 2.0 (mas não necessariamente outras engines de navegador) suportasupports defining custom validity constraints e mensagens de erro de elementos {{ HTMLElement("output") }} , e portanto aplica as pseudo-classes CSS {{ Cssxref(":invalid") }}, {{ Cssxref(":valid") }}, {{ Cssxref(":-moz-ui-invalid") }}, e {{ Cssxref(":-moz-ui-valid") }} a eles. Isso pode ser útil em situações quando o resultado calculadoThis can be helpful in situations where the calculated result violates a business rule, but no specific input value does (for example, "The total of percentages must not exceed 100").

- -

O atributo placeholder

- -

O atributo {{ htmlattrxref("placeholder", "input") }} nos elementos {{ HTMLElement("input") }} e {{ HTMLElement("textarea") }} fornecem uma dica para o usuário do que pode ser inserido no campo. O texto do placeholder não pode conter caracteres de quebra de linha.

- -

O atributo autofocus

- -

O atributo {{ htmlattrxref("autofocus", "input") }} permite você especificar um campo de formulário que será focado automaticamente quando a página carregar. No documento, apenas um campo pode ter o atributo autofocus, que é um booleano. Este atributo pode ser aplicado aos seguintes elementos: {{ HTMLElement("input") }}, {{ HTMLElement("button") }}, {{ HTMLElement("select") }}, and {{ HTMLElement("textarea") }}. A única exceção é que o atributo autofocus não pode ser aplicado a um elemento {{ HTMLElement("input") }} caso  seu atributo {{ htmlattrxref("type", "input") }} seja hidden.

- -

The label.control DOM property

- -

The HTMLLabelElement DOM interface provides an extra property, in addition to the properties that correspond to the HTML {{ HTMLElement("label") }} element attributes. The control property returns the labeled control, that is, the control that the label is for, which is determined by the {{ htmlattrxref("for", "label") }} attribute (if it is defined) or by the first descendant control element.

- -

Constraint Validation

- -

HTML5 provides syntax and API items to support client-side validation of forms. While this functionality does not replace server-side validation, which is still necessary for security and data integrity, client-side validation can support a better user experience by giving the user immediate feedback about input data.

- -

If the title attribute is set on the {{ HTMLElement("input") }} element, that string is displayed in a tooltip when validation fails. If the title is set to the empty string, no tooltip is displayed. If the title attribute isn't set, the standard validation message (as specified by the {{ htmlattrxref("x-moz-errormessage") }} attribute or by calling the setCustomValidity() method) is displayed instead.

- -
Note: Constraint validation is not supported on {{ HTMLElement("button") }} elements in a form; to style a button based on the validity of the associated form, use the {{ cssxref(":-moz-submit-invalid") }} pseudo-class.
- -

HTML Syntax for Constraint Validation

- -

The following items in HTML5 syntax can be used to specify constraints on form data.

- - - -

In addition, you can prevent constraint validation by specifying the {{ htmlattrxref("novalidate", "form") }} attribute on the {{ HTMLElement("form") }}, or the {{ htmlattrxref("formnovalidate", "button") }} attribute on the {{ HTMLElement("button") }} element and on the {{ HTMLElement("input") }} element (when {{ htmlattrxref("type", "input") }} is submit or image). These attributes indicate that the form is not to be validated when it is submitted.

- -

Constraint Validation API

- -

The following DOM properties and methods related to constraint validation are available to client-side scripts:

- - - -

{{ languages({"es": "es/HTML/HTML5/Formularios_en_HTML5", "ja": "ja/HTML/HTML5/Forms_in_HTML5", "ko": "ko/HTML/HTML에서_폼"}) }}

- -

{{ HTML5ArticleTOC() }}

diff --git a/files/pt-br/orphaned/mdn/community/index.html b/files/pt-br/orphaned/mdn/community/index.html deleted file mode 100644 index 7f0ccafa6d..0000000000 --- a/files/pt-br/orphaned/mdn/community/index.html +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: Participe da comunidade MDN -slug: orphaned/MDN/Community -tags: - - Comunidade - - Guia(2) - - Iniciando -translation_of: MDN/Community -original_slug: MDN/Comunidade ---- -
{{MDNSidebar}}
- -
-

A Documentação Web da MDN é mais que uma wiki: É uma comunidade de desenvolvedores trabalhando juntos para fazer do MDN um excelente material para desenvolvedores que usam as tecnologias abertas da Web.

-
- -

Adoraríamos se você contribuísse com o MDN, mas adoraríamos ainda mais se participasse da comunidade MDN. Veja como se conectar, em três passos fáceis:

- -
    -
  1. Crie uma conta no MDN.
    2. -
  2. Participe das conversas.
    3. -
  3. Siga o que está acontecendo.
    4. -
- -

Como a comunidade funciona

- -

A seguir, mais artigos que descrevem a comunidade MDN.

- -
-
-
-
Cargos da comunidade
-
Existem vários cargos dentro da comunidade MDN com responsabilidades específicas.
-
Sprints de documentação
-
Este é um guia para organizar uma sprint de documentação. Ele contém recomendações e dicas de pessoas que já organizaram sprints de documentação, para te ajudar a organizar uma também.
-
Siga o que está acontecendo
-
A MDN chega até você através da comunidade da Rede de Desenvolvedores da Mozilla. Aqui estão algumas formas das quais nós compartilhamos informações sobre o que fazemos.
-
- -
-
-
-
diff --git a/files/pt-br/orphaned/mdn/community/whats_happening/index.html b/files/pt-br/orphaned/mdn/community/whats_happening/index.html deleted file mode 100644 index 842f8b7fdf..0000000000 --- a/files/pt-br/orphaned/mdn/community/whats_happening/index.html +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: Siga o que está acontecendo -slug: orphaned/MDN/Community/Whats_happening -translation_of: MDN/Community/Whats_happening -original_slug: MDN/Comunidade/Whats_happening ---- -
{{MDNSidebar}}

MDN is brought to you by Mozilla's Developer Engagement community. Here are some ways to that we share information about what we're doing.

- -

Blogs

- -
-
Mozilla Hacks
-
News about and in-depth coverage of Web and Mozilla technologies and features.
-
Engaging Developers
-
Promoting activity and discussion amongst the community involved in Developer Relations at Mozilla.
-
- -

Streams of ephemera

- - - -

Status boards and dashboards

- -

The MDN documentation team maintains a Trello board on which our projects are tracked. This board is read-only but will let you see what's being worked on and what we hope to do soon, and may help you figure out where you can help.

- -

In addtion, take a look at the Documentation status pages to see what's going on across the full breadth of MDN content. You'll be able to see what articles need to be written or updated, what topics need the most help, and much, much more.

- -

MDN community meetings

- -

Community meetings occur every two weeks on Wednesdays, 10:00 US Pacific time (UTC-0800 October-March, UTC-0700 in March-October), in the #mdn IRC channel. See the MDN community meetings wiki page for agendas and notes from past meetings.

- -

The MDN Events calendar contains MDN community meetings, doc sprints, and other MDN-related events.

diff --git a/files/pt-br/orphaned/mdn/community/working_in_community/index.html b/files/pt-br/orphaned/mdn/community/working_in_community/index.html deleted file mode 100644 index 09ede56d3c..0000000000 --- a/files/pt-br/orphaned/mdn/community/working_in_community/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: Trabalhando em comunidade -slug: orphaned/MDN/Community/Working_in_community -translation_of: MDN/Community/Working_in_community -original_slug: MDN/Comunidade/Trabalhando_em_comunidade ---- -
{{MDNSidebar}}
- -

Uma importante parte de contribuir com a documentação da MDN em qualquer escala significativa é saber como trabalhar como parte da comunidade MDN. Esse artigo oferece dicas sobre como você pode tirar o melhor proveito das suas interações com outros escritores e outros times de desenvolvimento.

- -

Dicas gerais de etiqueta

- -

Aqui estão algumas dicas gerais de conduta quando trabalhando na comunidade Mozilla.

- - - -

Tenha sensatez

- -

Sempre seja sensato e respeitoso quando se comunicar com os outros.

- -

Gentilmente aponte os erros

- -

Se seu propósito em contatar alguém é para pedi-los para fazer alguma coisa diferentemente, ou apontar enganos que eles estão cometendo (especialmente se eles repetidamente estão fazendo isto), inicie sua mensagem com um comentário positivo. Isto suaviza o impacto, por assim dizer, e demonstra que você está tentando ser prestativo, ao invés de definir você como o cara mau.

- -

Por exemplo, se um novo contribuidor tiver criado muitos páginas sem tags, e você gostaria de pontuar esse problema, sua mensagem para eles podem ser desta forma (o que você precisa mudar para cada caso está sublinhado):

- -
-

Oi, MrBigglesworth, eu tenho que notificar suas contribuições para a documentação da Wormhole API e isto é fantástico ter sua ajuda! Eu particularmente gosto do modo que você equilibra seu nível de detalhes com legibilidade. Dito isto, contudo, você poderia fazer estes artigos sempre melhores e mais pertinentes se adicionar as corretas tags para as páginas enquanto você elabora.

- -

Veja o MDN guia de etiquetas (https://developer.mozilla.org/pt-BR/docs/MDN/Contribute/guia/Como-marcar-as-paginas-corretamente) para detalhes.

- -

Obrigado novamente, e aguardo suas futuras contribuições!

-
- -

Compartilhe conhecimento

- -

Assim que você participa do projeto MDN, é útil saber o que está acontecendo, e interagir com outros membros de sua comunidade. Para conversar com outros em nossa comunidade, você pode seguir e compartilhar ideias, status atualizado, e mais. Nós também temos ferramentas e informações que podem ajudar você a saber o que está sendo feito, e por quem.

- -

Canais de comunicação

- -

Há muitos caminhos que você pode engajar como membro da comunidade (como desenvolvedor ou como escritor), cada um tem algumas regras particulares de etiqueta.

- -

Bugzilla

- -

Quando escrever documentação para cobrir mudanças implementadas como um resultado de um bug no Bugzilla, você frequentemente interagirá com pessoas envolvidas naquele projeto. Seja claro para continuar o guia de etiqueta Bugzilla em mente em todas às vezes!

- -

E-mail

- -

Algumas vezes, uma troca de e-mail privado entre você e uma ou mais pessoas, é o caminho para seguir, se você possuir os endereços de e-mails deles.

- -
-

Nota: Como regra geral, se alguém postou o endereço de e-mail pessoal em documentos sobre a tecnologia que você está documentando, ou deu a você o endereço de e-mail pessoal, ou geralmente tem um endereço de e-mail bem conhecido, então o e-mail torna-se uma abordagem aceitável como "primeiro contato". Se você precisa "escavar" mais sobre o assunto, provavelmente você deve tentar obter aguma permissão no Matrix ou em uma lista de discussão primeiro, a menos que você tenha esgotado todas as outras tentativas de entrar em contato.

-
- -

Ferramenta de status de conteúdo

- -

Nós temos muitas ferramentas úteis que fornecem informações sobre o status do conteúdo da documentação.

- -
-
Painel de Controle (Dashboard ) para revisão
-
O painel de controle para revisão providencia uma ferramenta fantástica para revisar mudanças feitas para o conteúdo do MDN. Você pode ver as histórias recentes, ou escolher um período de tempo para vê-las, e filtrar resultados com base em características como localidade, nome de contribuidores, e tópicos. Uma vez que você está olhando para um conjunto de revisões, você pode ver as mudanças feitas em cada revisão, abrir rapidamente a página, ver um histórico completo ou até reverter as alterações (se você tiver esses privilégios).
-
Visão geral do status da documentação
-
Nossa visão geral do status da documentação página providencia uma lista de todas as áreas do MDN que você tem configurado pela trilha de status, com informações sobre como muitas páginas são necessárias diferentes tipos de trabalho feito. Clique através de um particular tópico de área para ver detalhadas listas de conteúdo que necessitam trabalhar, tais como páginas que não tem tags, ou são tags com indicadores que certos tipos de trabalhos necessários para ser feito. Você pode mesmo ver listas de páginas que não tem sido atualizado em um longo tempo e pode se desatualizado, tão bem quanto uma lista de bugs que tem sido sinalizado como impactante na documentação daquela área.
-
Documentação dos planos de projetos
-
Nós temos um número de projetos escritos que estão no estágio de planejamento, ou são largos e em progresso, para o qual nós temos escrito documento de planejamento para ajudar-nos a guardar a trilha daquilo que nós precisamos fazer.
-
MDN Trello board
-
The MDN staff writers use a Trello board to manage current and future documentation projects. You can take a look to see what we're doing and how it's going, and you can see what projects we'd like to see happen soon. Some of those will be taken on by staff writers, but you should feel free to take one over if you like! For more information about how this board is used and how you can use it, you can read this page.
-
- -

A comunidade de desenvolvimento

- -

Possivelmente o mais importante relacionamento para desenvolver e manter, como um membro da comunidade de escrita do MDN, são aqueles que você desenvolve e sustenta com os desenvolvedores. Eles criam o software que nós estamos desenvolvendo, mas eles são também os mais usuais recursos de informações que nós temos. É crucial que nós mantenhamos bons relacionamentos com os desenvolvedores, pois são como você, vão responder suas questões rapidamente, precisamente, e completamente!

- -

Em adição, você representa a comunidade de escrita MDN.

- -

Por favor ajude a garantir que nós mantenhamos nosso excelente relacionamento de trabalho com a equipe dev para fazer toda a interação entre eles e a equipe de escrita seja ótima.

- -

Em uma nota de relato, um grande caminho para encontrar a pessoa certa para falar olhe nas listas dos responsáveis dos módulos.

- -

A comunidade de escrita

- -

A comunidade de escrita é muito grande. Enquanto o número de frequentes extremos, ou contribuidores de grande escala é relativamente pequeno, Há muitas dezenas ou centenas de pessoas que contribuem de vez em quando. Felizmente, estas são grandes pessoas maravilhosas com um genuíno amor da web, Mozilla, e/ou documentação, e interagem com eles e quase sempre muito bonito.

- -

Veja o artigo una a comunidade para mais informações sobre a comunidade MDN.

- -

Veja também

- - diff --git a/files/pt-br/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html b/files/pt-br/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html deleted file mode 100644 index 10410e5a37..0000000000 --- a/files/pt-br/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: Como criar uma conta na MDN -slug: orphaned/MDN/Contribute/Howto/Create_an_MDN_account -tags: - - Conta - - Guia(2) - - Início(2) - - Novato - - como fazer -translation_of: MDN/Contribute/Howto/Create_an_MDN_account -original_slug: MDN/Contribute/guia/Create_an_MDN_account ---- -
{{MDNSidebar}}
- -

Para fazer quaisquer alterações sobre o conteúdo do MDN (tanto editando uma página como contribuindo com uma demonstração), você precisará de um perfil MDN. Não se preocupe, você não precisa de um perfil se tudo o que você pretende é ler e pesquisar no MDN! Esse guia simples vai ajudá-lo a configurar seu perfil MDN.

- -
Por que o MDN precisa do meu endereço de email?
-
-Seu endereço de email é usado para recuperação da conta, e se necessário por administradores do MDN para contatá-lo sobre sua conta ou sua atividade no site.
-
-Além disso, você pode opcionalmente inscrever-se para receber notificações (como quando uma página específica é modificada) e mensagens (por exemplo, se você optar por se juntar ao nosso time de testes beta, você poderá receber email sobre novas funcionalidades que precisam ser testadas).
-
-Seu endereço de email nunca é mostrado no MDN e será usado apenas de acordo com nossa política de privacidade.
- -

Assim que você tiver decidido que quer contribuir para o MDN, aqui está tudo que você deve fazer para configurar o seu perfil:

- -
    -
  1. No topo de qualquer página no MDN você vai encontrar um botão chamado "Entrar". Passe o seu mouse sobre ele(ou toque nele caso você esteja em um dispositivo móvel) para mostrar uma lista de serviços de autenticação que disponibilizamos para se inscrever no MDN.
    2. -
  2. Selecione um serviço com o qual você irá se inscrever. Atualmente, somente a inscrição com o GitHub está disponível. Note que, se você selecionar o GitHub, um vínculo com a sua conta do GitHub será incluída em seu perfil público na página pessoal do MDN.
    3. -
  3. Siga os passos do serviço para conectar sua conta ao MDN.
    4. -
  4. Uma vez que o serviço de autenticação retorná-lo ao MDN, será solicitado a você que entre com seu nome de usuário e endereço de email. Seu nome de usuário será mostrado publicamente para creditá-lo sobre trabalhos que você concluiu. Não use o seu endereço de email como seu nome de usuário.
    5. -
  5. Clique no botão "Criar meu perfil MDN".
    6. -
  6. Se o endereço de email que você especificou no passo 4 não é o mesmo que você usa no serviço de autenticação, você precisará checar seu email e clicar no link do email de confirmação que foi enviado para você.
    7. -
- -

É isso! Você adquiriu uma conta MDN, e você pode imediatamente editar ou marcar páginas e postar demonstrações!

- -

Você pode clicar no seu nome no topo de qualquer página MDN para ver o seu perfil público. A partir de lá, você pode clicar o botão de "Editar" para fazer modificações ou adições no seu perfil, assim você pode compartilhar mais sobre seus interesses, adicionar links para sua conta do Twitter ou blog, e assim por diante.

- -
-

Observação: Novos nomes de usuário não podem conter espaços ou o caractere "@". Tenha em mente que o seu nome de usuário será mostrado publicamente para identificar o trabalho que você fez!

-
- -

 

diff --git a/files/pt-br/orphaned/mdn/contribute/howto/do_a_technical_review/index.html b/files/pt-br/orphaned/mdn/contribute/howto/do_a_technical_review/index.html deleted file mode 100644 index 2651c5f134..0000000000 --- a/files/pt-br/orphaned/mdn/contribute/howto/do_a_technical_review/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: Como fazer uma revisão técnica -slug: orphaned/MDN/Contribute/Howto/Do_a_technical_review -tags: - - Documentação - - Guía - - MDN Meta - - Revisão - - como fazer -translation_of: MDN/Contribute/Howto/Do_a_technical_review -original_slug: MDN/Contribute/guia/Do_a_technical_review ---- -
{{MDNSidebar}}

Uma Revisão técnica consiste em revisar a precisão técnica e a integridade de um artigo e corrigi-lo, se necessário. Se um escritor de um artigo procura alguém para verificar o conteúdo técnico do artigo, então ele marca a opção "Análise técnica" durante a edição. Muitas vezes, o escritor contata um engenheiro específico para realizar a revisão técnica, mas qualquer pessoa com experiência técnica no tópico pode fazer um.

- -

Este artigo descreve como realizar uma revisão técnica, ajudando assim a garantir que o conteúdo do MDN seja exato.

- -
-
Como é essa tarefa?
-
Revisar e corrigir artigos com precisão técnica e completude.
-
Onde deve ser feita?
-
Em artigos específicos aonde estão marcados como uma revisão técnica.
-
O que você precisa saber para fazer a tarefa?
-
-
    -
  • Conhecimento avançado (especialista) sobre o tópico do artigo que você está revisando. Se a leitura do artigo não lhe ensinou nada de novo, considere-se um especialista.
    • -
  • Como editar um artigo wiki no MDN
    • -
-
-
Quais são os passos para fazê-lo?
-
-
    -
  1. Escolha um artigo para revisar: -
      -
    1. Vá até a lista de páginas que necessitam de revisão técnica. Lá estará listado todas as páginas as quais uma revisão técnica foi solicitada.
      2. -
    2. Escolha uma página cujo tópico você conheça muito.
      3. -
    3. Clique no link do artigo para carregar a página.
      4. -
    -
    2. -
  2. Leia o artigo, prestando atenção aos detalhes técnicos: o artigo está correto? Falta alguma coisa? Não hesite em mudar para uma página diferente se o primeiro que você escolher não se adequar a você.
    3. -
  3. Se não houver erros, você não precisa editar o artigo para marcá-lo como revisado. Procure a caixa "revisão rápida" na barra lateral esquerda da página. Esta caixa amarela lista todas as revisões pendentes e permite que você desmarque a revisão já realizada. Em caso de uma revisão técnica solicita será apresentado desse modo:
    -
    4. -
  4. Desmarque a opção Técnico e clique em salvar.
    5. -
  5. Se você encontrar erros que precisam ser corrigidos, você também pode solicitar uma nova revisão apartir do editor. Aqui estão os passos: -
      -
    1. Para editar a página clique no botão editar no canto superior da página; desse modo você estará acessando o editor do MDN.
      2. -
    2. Corrija qualquer informação técnica que não esteja correta e/ou adicione qualquer informação importante que esteja faltando.
      3. -
    3. Digite um Comentário da revisão na parte inferior do artigo. Esta é uma breve mensagem que descreve o que você fez, como "Revisão técnica concluída". Se você corrigiu as informações, inclua isso em seu comentário, por exemplo, "Análise técnica e descrições de parâmetros fixos". Isso ajuda outros contribuidores e editores de sites a saber o que você mudou e por quê. Você também pode mencionar se houve partes específicas que você não se sentiu qualificado para revisar.
      4. -
    4. Clique no botão PUBLICAR.
      5. -
    -
    6. -
- Parabéns! Você terminou sua primeira revisão técnica. Obrigado pela ajuda!
-
diff --git a/files/pt-br/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html b/files/pt-br/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html deleted file mode 100644 index d1e9b29246..0000000000 --- a/files/pt-br/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: Como fazer uma revisão editorial -slug: orphaned/MDN/Contribute/Howto/Do_an_editorial_review -tags: - - Documentação - - Guia(2) - - MDN Meta - - Revisão - - como fazer -translation_of: MDN/Contribute/Howto/Do_an_editorial_review -original_slug: MDN/Contribute/guia/Do_an_editorial_review ---- -
{{MDNSidebar}}
- -

A revisão editorial consiste em corrigir erros gramaticais e no modo de se expressar em um artigo. Nem todos contribuidores são experientes em linguagens, mas, independentemente dos seus conhecimentos, terão contribuído com artigos extremamente úteis, que precisam da aplicação de técnicas de revisão; Isso é feito em uma revisão editorial.

- -

Esse artigo descreve como fazer uma revisão editorial, assim ajudando para assegurar que o conteúdo do MDN é preciso.

- -
-
Qual é a tarefa?
-
Edição e revisão de artigos que estiverem marcados como "precisando de revisão editorial."
-
Onde é que isso precisa ser feito?
-
Em artigos específicos que são marcados como "precisando de revisão editorial."
-
O que é preciso conhecer para fazer essa tarefa?
-
Você precisa ter um bom dominio do idioma Ingles e habilidades de ortografia e gramática. Uma revisão editorial consiste em garantir que a gramática, ortografia e redação estejão corretas e fazendo sentido; E que o guia de estilo de escrita MDN seja seguido.
-
Quais são os passos a seguir?
-
-
    -
  1. Escolha um artigo para revisão: -
      -
    1. Vá para a lista de artigos que precisam de revisão editorial.  Essa lista contém todas as páginas que precisam de revisão editorial.
      2. -
    2. Escolha uma página que tenha título em português que não comece com Template:(Template: Páginas que contém macro-códigos MDN)
      3. -
    3. Clique no link do artigo para carregar a página.
      4. -
    -
    2. -
  2. Quando a página estiver carregada, clique no botão Editar próximo ao topo da página; Isso colocará você no editor MDN. Não hesite em trocar para uma página diferente se você não entendeu bem a página atual.
    3. -
  3. Se não houver erros, você não precisa editar o artigo para marca-lo como revisado. Olhe para uma caixa de "revisão rápida" a esquerda da barra de navegação:
    4. -
- -

               Selecione a caixa Editorial , e clique em Review Completed.

- -

4. Se você precisa consertar erros que precisam correção:

- -
    -
  1. Clique no botão Editar próximo ao topo da página; Isso colocará você no editor MDN.
    2. -
  2. Corrija todas palavras e a gramática ou erros de uso.
    3. -
  3. Digite um Comentário de Revisão na parte de baixo do artigo, algo como 'Editorial revisado, foram corrigidos alguns erros de gramática e ortografia'.
    4. -
  4. Tire a seleção da caixa Editorial abaixo do Revisão necessária?
    5. -
  5. Clique no botão Salvar alterações.
    6. -
- -
-

Por razões de perfomance, sua edição pode não aparecer logo na página.

-
-
-
diff --git a/files/pt-br/orphaned/mdn/contribute/howto/set_the_summary_for_a_page/index.html b/files/pt-br/orphaned/mdn/contribute/howto/set_the_summary_for_a_page/index.html deleted file mode 100644 index 0019d0a7e7..0000000000 --- a/files/pt-br/orphaned/mdn/contribute/howto/set_the_summary_for_a_page/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: Como definir o resumo de uma página -slug: orphaned/MDN/Contribute/Howto/Set_the_summary_for_a_page -tags: - - Como - - Guia(2) - - MDN Meta -translation_of: MDN/Contribute/Howto/Set_the_summary_for_a_page -original_slug: MDN/Contribute/guia/Set_the_summary_for_a_page ---- -
{{MDNSidebar}}

Você pode definir o sumário de uma página no MDN, para ser usado de várias maneiras, incluindo em resultados de pesquisa, em outras páginas MDN como tópico de página de regiões, e em dicas. E o texto deve fazer sentido tanto ao contexto da página, como quando mostrado em outro contexto, sem o restante do conteúdo da página.

- -

Um sumário pode ser bem definido com a página. Caso não seja bem definido, normalmente a primeira frase é usada, e nem sempre esta é a melhor maneira de se apresentar o conteúdo da página.

- - - - - - - - - - - - - - - - - - - - -
Qual é a tarefa?Marcando o texto dentro de uma página que deve ser usado como seu resumo em outros contextos; esta tarefa pode incluir, se necessário escrever um texto adequado.
Onde isto deve ser feito?Em páginas que não possuem um resumo ou têm um resumo menos do que ótimo.
O que você deve saber para fazer a tarefa?Capacidade de usar o editor MDN; boas habilidades de escrita em inglês; familiaridade suficiente com o tema da página para escrever um bom resumo.
Quais são os passos a fazer? -
    -
  1. Escolha uma página para fazer o resumo: -
      -
    1. Na página MDN documentation status, clique sob o link Sections para um tema que você conhece um pouco sobre (por exemplo, HTML):
      -
      2. -
    2. Na página de status da documentação do tópico, clique no cabeçalho de páginas na tabela de 
      3. -
    3. Resumo. Isso leva você a um índice de todas as páginas em que seção do tópico; Ele mostra a página 
      4. -
    4. de links na coluna da esquerda e as tags e resumos na coluna à direita:
      5. -
      6. -
    6. Escolha uma página que está faltando um resumo, ou que tem um resumo fraco:
      -
      7. -
    7. Clique no link para ir para essa página.
      8. -
    -
    2. -
  2. Clique em Editar para abrir a página no editor MDN.
    3. -
  3. Procure uma frase ou duas, que funcionam como um resumo fora de contexto. Se necessário, edite o conteúdo existente para criar ou modificar frases para ser um bom resumo.
    4. -
  4. Selecionar o texto a ser usado como um resumo.
    5. -
  5. Nos estilos de elementos gráficos da barra de ferramentas do editor, selecione Resumo SEO. (No código fonte da página, isso cria uma {{HTMLElement("span")}} elemento com class = "seoSummary " em torno do texto selecionado.)
    -
    6. -
  6. Salve suas alterações com um comentário de revisão em como "Definir a página Resumo."
    7. -
-
- -

 

- -

 

- -

 

diff --git a/files/pt-br/orphaned/mdn/contribute/howto/tag_javascript_pages/index.html b/files/pt-br/orphaned/mdn/contribute/howto/tag_javascript_pages/index.html deleted file mode 100644 index 66db20d0e5..0000000000 --- a/files/pt-br/orphaned/mdn/contribute/howto/tag_javascript_pages/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: Como marcar páginas de JavaScript -slug: orphaned/MDN/Contribute/Howto/Tag_JavaScript_pages -tags: - - Como - - Guia(2) - - JavaScript - - MDN Meta -translation_of: MDN/Contribute/Howto/Tag_JavaScript_pages -original_slug: MDN/Contribute/guia/Tag_JavaScript_pages ---- -
{{MDNSidebar}}

O tagueamento consiste na adição de meta-informações para as páginas de modo que o conteúdo relacionado possa ser agrupado, como por exemplo em uma ferramenta de pesquisa.

- - - - - - - - - - - - - - - - -
E onde isso precisa ser feito?Dentro de páginas especificas relacionadas com Javascript e sem marcação.
O que é preciso saber para fazer a tarefa ? -
    -
  • O basico de javascript como saber o que é um metodo ou uma propriedade.
    • -
-
Quais são os passos para fazê-lo? -
    -
  1. Escolha uma das paginas na lista 'linkada' acima.
    2. -
  2. Click no link do artigo e carregue a página.
    3. -
  3. Uma vez que a página foi carregada, clique no botão Editar no topo, isso deve lhe posicionar no editor MDN.
    4. -
  4. Pelo menos uma tag Javascript deve ser adicionada. Aqui estão algumas outras tags possíveis para adicionar: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    TagA página que está em uso.
    Methodmétodo
    PropertyPropriedade
    prototypeprotótipo
    Object type namemétodo de um objeto; por exemplo String.fromCharCode deve ser a sequência da tag String
    ECMAScript6 and Experimentalrecursos adicionados na nova versão do ECMAScript
    Deprecatedrecursos obsoletos (cujo o uso é desencorajado, mas ainda suportada)
    Obsoleterecursos obsoletos (que não são mais suportados em browsers modernos)
    othersver as normas de tagueamento MDN para aplicar outras tags possíveis.
    -
    5. -
  5. Salve com um comentário.
    6. -
  6. E está pronto!
    7. -
-
diff --git a/files/pt-br/orphaned/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html b/files/pt-br/orphaned/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html deleted file mode 100644 index 6a8d7e9bb0..0000000000 --- a/files/pt-br/orphaned/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: Como escrever um artigo para ajudar as pessoas aprender sobre a Web -slug: orphaned/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web -tags: - - Guía - - MDN Meta - - aprendizado - - como fazer -translation_of: MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web -original_slug: MDN/Contribute/guia/Escreva_um_artigo_para_ajudar_aprender_sobre_a_Web ---- -
{{MDNSidebar}}
- -

MDN's Área de aprendizado é a nossa casa para artigos que introduzem conceitos Web para novos desenvolvedores. Uma vez que seu conteúdo é voltado para iniciantes, este é um ótimo lugar para compartilhar seu conhecimento e ajudar visitantes a conhecer a Web. É importante ter certeza que novos desenvolvedores podem seguir o conteúdo, então nós damos atenção especial para isto.

- -

Este artigo explica como escrever para a  Área de aprendizado.

- -

Como escrever um artigo na Área de aprendizado

- -

Para começar a contribuir com seu conhecimento, simplesmente clique no botão verde e grande, então siga os cinco passos abaixo. Se você está procurando por ideias, por favor dê uma olhada no nosso quadro de time Trello!

- -

Escreva um artigo de aprendizado

- -

Este artigo pode não acabar exatamente no lugar certo, mas pelo menos no MDN. Se você deseja falar com alguém sobre mover ele para o lugar certo, por favor  Contate-nos.

- -

Passo 1: Escreva uma linha-dupla

- -

A primeira frase do seu artigo precisa resumir sobre qual conteúdo você irá falar e a segunda deve ser um pouco mais específica sobre os itens que você vai inserir no seu artigo. Por exemplo:

- -
-

Enquanto que os arquivos {{glossary("HTML")}} contém conteúdo estruturado, {{Glossary("CSS")}}, outra grande tecnologia Web, faz o conteúdo aparecer do jeito que você quer. Neste artigo nós vamos cobrir como esta tecnologia funciona, e como escrever seu próprio exemplo básico.

-
- -

Note como o exemplo explica brevemente que CSS é uma importante tecnologia Web usada para estilizar páginas. Isto é suficiente para o leitor ter uma boa ideia sobre o quê o artigo fala.

- -

Porque os artigos da Área de Aprendizado primeiramente foca em iniciantes, cada artigo deve cobrir um tópico direto, então não sobrecarregará o leitor com muita informação nova. Se você não resumir o artigo em uma sentença, você pode estar tentando fazer muito em somente um artigo!

- -

Passo 2: Adicionar uma top box

- -

Então adicione uma top box para ajudar os leitores com dicas sobre onde eles estão no processo de aprendizagem.  Aqui é um exemplo de top box do "Entendendo URLs e suas estruturas". Você pode usar este artigo como um modelo quando estiver escrevendo o seu próprio.

- - - - - - - - - - - - -
Pré-requisitos:Você primeiro precisa saber Como a Internet funciona, O que é um servidor Web, and Os conceitos por trás dos links na web.
Objetivo:Você vai aprender o que é uma URL e como ela funciona na Web.
- -
-
Pré-requisitos
-
O que o leitor, principalmente, precisa saber para seguir este artigo? Quando possível, faça um link de cada pré-requisito para outro artigo da Área de Aprendizado cobrindo o conceito (a menos que este seja um artigo básico que não precisa de nenhum conhecimento anterior).
-
Objetivos
-
Esta seção explica brevemente o que o leitor vai aprender no curso da leitura. Este é um pouco diferente da linha-um; a linha-um resume o tópico do artigo, enquando a seção objetivos especificamente descreve o que o leitor pode esperar ao terminar de ler todo o artigo.
-
 
-
- -
-

Nota: Para criar esta tabela você pode copiar e colar a tabela do exemplo acima, ou usar a ferramenta do editor do MDN Tabela. Se você escolher usar a ferramenta Tabela, você precisa especificamente adicionar uma classe CSS learn-box adicional a classe padrão standard-table. Para fazer isto, quando você criar ou editar as propriedades da tabela, vá no painel "Avançado" e no campo Classes mudar para "standard-table learn-box".

-
- -

Passo 3: Escreva uma descrição completa

- -

Próximo: escreva uma longa descrição que forneça uma visão geral do artigo, destacando os conceitos principais. Não esqueça de explicar por quê o leitor deve pegar seu tempo para aprender este tópico e ler seu artigo!

- -

Passo 4: Vá fundo

- -

Quando você tiver terminado com tudo isso, você pode finalmente ir fundo no tema. Você pode estruturar esta parde do seu artigo como você quiser (Por quanto sinta-se livre para consultar nosso guia de estilo). Esta é sua chance de brilhar! Entre nos detalhes explicando o tema que você está escrevendo. Forneça links de referência para a documentação completa, explique como a tecnologia funciona em detalhe, forneça detalhes da sintaxe e usabilidade, e mais. É com você!

- -

Como um guia, aqui são algumas dicas de escrita para iniciantes:

- - - -

Dê uma olhada nas primeiras seções do nosso artigo Funções - blocos reutilizáveis de código para uma boa seção descritiva.

- -

Passo 5: Forneça material de "aprendizado ativo"

- -

Para ilustrar o artigo e ajudar o leitor a entender melhor o que ele está aprendendo, esteja certo de fornecer exercícios, tutoriais e tarefas para completar. Tendo eles praticando, e ativamente usando e experimentando os conceitos que seu artigo explica, você pode ajudar a fixar a informação no cérebro do leitor.

- -

Você pode escolher incluir os exemplos diretamente nas páginas como  exemplos ao vivo, ou fazer links para eles se eles não funciona como exemplos ao vivo. Se você está interessado em ajudar a criar estes materiais de valores, por favor leia o artigo Criar um exercício interativo para ajudar o Aprendendo a Web.

- -

Se você não pode fornecer links para materiais de aprendizado ativo (você não conhece nenhum ou não tem tempo para criar), você deveria adicionar uma tag {{Tag("NeedsActiveLearning")}} para o artigo. Assim outros contribuintes podem encontrar artigos que precisam de materiais de aprendizado ativo e talvez ajudar você com isto.

- -

Dê uma olhada no Aprendizado ativo: selecionando diferentes elementos para um exemplo de exercício de aprendizado interativo, ou Aprendizado ativo: Jogando com escopo para um estilo diferente de exercício que permite fazer download de um template no dispositivo do leitor e modificá-lo seguindo os passos fornecidos.

- -

Passo 6: Tenha o artigo revisto e colocado no menu de navegação da Área de aprendizado

- -

Depois de ter escrito seu artigo, deixe-nos saber para podermos dar uma olhada, fazer uma revisão e sugerir melhorias. Novamente, veja nossa seção Contato, é a melhor maneira de manter contato.

- -

Outra parte na finalização do seu artigo é colocar ele na área principal no menu de navegação da Área de Aprendizado. Este menu é gerado pelo LearnSidebar macro, o qual você precisa de privilégios especiais para editar, então, novamente, converse com alguém do nosso time sobre adicionar isto.

- -

Você deveria pelo menos adicionar isso na sua página - isto é feito adicionando a chamada do macro \{{LearnSidebar}} dentro de um parágrafo no topo da sua página

- - - -

Artigos sugeridos

- -

Então você quer contribuir, mas você não tem certeza sobre o que escrever?

- -

O time da Área de aprendizado mantém um quadro Trello com ideias de artigos para escrever. Sinta-se livre para pegar um e começar a trabalhar!

- -

 

- -

 

diff --git a/files/pt-br/orphaned/mdn/contribute/processes/cross-team_collaboration_tactics/index.html b/files/pt-br/orphaned/mdn/contribute/processes/cross-team_collaboration_tactics/index.html deleted file mode 100644 index d87f3eacad..0000000000 --- a/files/pt-br/orphaned/mdn/contribute/processes/cross-team_collaboration_tactics/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: Táticas de colaboração intra equipe para documentação -slug: orphaned/MDN/Contribute/Processes/Cross-team_collaboration_tactics -tags: - - Documentação - - Guia(2) - - Guía - - MDN - - Projeto MDC -translation_of: MDN/Contribute/Processes/Cross-team_collaboration_tactics -original_slug: MDN/Contribute/Collaboration_tactics ---- -
{{MDNSidebar}}
- -

Uma coisa que aprendemos na MDN é que quando equipes de desenvolvimento e documentação de um dado projeto, API ou tecnologia trabalham próximas uma da outra—e juntas— a documentação ganha uma qualidade inacreditável. Este guia sugere algumas táticas para que equipes de desenvolvimento e documentação trabalhem de mãos dadas.

- -
-

Nota: Este artigo é um trabalho em progresso, um documento aberto. Caso você conheça outras maneiras de integrar equipes de desenvolvimento e documentação, convidamos você à dividi-las conosco aqui!

-
- -

Integrando-se

- -

Idealmente, quando o desenvolvimento de uma nova tecnologia ou projeto são concebidos, a equipe de desenvolvimento avisa a equipe de documentação que algo novo está à caminho e precisará ser documentado. Algumas vezes não é isso que acontece, e a equipe MDN monitora a Bugzilla observando todo trabalho que precisará ser documentado, porém em um mundo perfeito, nós receberemos um aviso prévio de maneira mais direta.

- -

A melhor maneira de notificar a equipe MDN sobre um novo projeto o qual precisamos ficar cientes é preenchendo uma requisição de documentação de defeito. Fornecer uma lista de contatos em conjunto com as respectivas dúvidas é uma ótima maneira de ajudar! Incluir links para os defeitos relacionados ao projeto também é uma grande ajuda.

- -

Compartilhando informação

- -

Existem diversas maneiras úteis e diferentes de compartilhar informação. Apresentamos algumas sugestões a seguir.

- -

Defeitos

- -

Certificar-se de que a equipe de documentação está ciente dos defeitos que refletem na documentação é de grande ajuda. O uso adequado das palavras-chaves de documentação e desenvolvimento e das tags de comentários leva tempo. Consulte Atualizando documentação para mais informações.

- -

Reuniões

- -

Equipes de desenvolvimento realizam reuniões frequentemente. Sempre que possível e necessário(e muitas vezes é bastante necessário), a equipe MDN tenta enviar alguém para assistir estas reuniões. Esta é uma boa maneira de saber o que esta acontecendo, como os horários estão dispostos, e assim por diante.

- -

Além disso, os profisionais que trabalham em grandes áreas de documentação, tais como documentação de APIs Web, muitas vezes realizam reuniões para acompanhar a evolução da documentação. Estes profissionais adoram ter um desenvolvedor à disposição para participar de tais reuniões; acaba sendo incrivelmente útil para todos os envolvidos.

- -

Estas reuniões geralmente são curtas e possuem uma agenda similar a esta:

- -
    -
  1. Atualizações sobre o andamento das atividades de documentação.
    2. -
  2. Perguntas/atualizações da equipe de desenvolvimento para a equipe de documentação: pode incluir perguntas sobre a evolução de documentos específicos, informações sobre conteúdo específico que é urgentemente necessário, notas sobre problemas com conteúdo já existente, e assim por diante.
    3. -
  3. Perguntas/atualizações da equipe de documentação para a equipe de desenvolvimento: esta é uma oportunidade para a equipe de documentação perguntar sobre possíveis bugs, se alguém pode se disponibilizar para revisar algum documento específico, se há um engenheiro em específico que esteja disponível para responder perguntas sobre uma determinada API, esse tipo de coisa.
    4. -
- -

Reuniões de documentação de APIs Web  têm sido realizadas por meses em Vidyo, com grande sucesso. Cada semana, a equipe de desenvolvimento da API Web têm pelo menos um membro (e muitas vezes dois) para a reunião, e temos sido extremamente produtivos, realizando as reuiniões em 15 minutos ou menos.

- -

Semanas de trabalho

- -

Convide os responsáveis pela documentação para acompanhar a equipe de desenvolvimento em uma semana de trabalho ou reunião. Isto tem muitas vantagens, incluindo:

- - - -

Se você não sabe se existe um membro para documentação atribuído ao tópico da sua área acompanhando sua semana de trabalho, não hesite em enviar um e-mail para o líder da equipe de documentação, Eric Shepherd, e ele buscará saber se alguém poderá auxiliar. Ele buscará alguém lá (ou melhor, buscará um membro exlusivo para documentação no seu projeto)! Tenha em mente, porém, que a equipe de documentação é pequena, então encontrar alguém para acompanhar uma semana de trabalho em um curto prazo é uma tarefa complicada.

- -

Páginas de estado de documentação

- -

Grandes projetos de documentação na MDN agora utilizam páginas de estados a fim de acompanhar o que falta ser feito, e o que já foi feito, para conseguir realizar o trabalho. Tais páginas fornecem uma lista de tarefas a serem realizadas, bem como o estado de cada tarefa.

diff --git a/files/pt-br/orphaned/mdn/dashboards/index.html b/files/pt-br/orphaned/mdn/dashboards/index.html deleted file mode 100644 index ff496d8bbf..0000000000 --- a/files/pt-br/orphaned/mdn/dashboards/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: Painéis -slug: orphaned/MDN/Dashboards -tags: - - MDN Meta - - Rascunho - - Visão Geral - - painéis -translation_of: MDN/Dashboards -original_slug: MDN/Paineis ---- -
{{MDNSidebar}}{{Draft}}
- -

Aqui estão alguns painéis que exibem algumas métricas.

- -

Saiba mais sobre nossos Editores

- -

{{SubpagesWithSummaries}}

diff --git a/files/pt-br/orphaned/mdn/editor/basics/index.html b/files/pt-br/orphaned/mdn/editor/basics/index.html deleted file mode 100644 index bc1805b308..0000000000 --- a/files/pt-br/orphaned/mdn/editor/basics/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: Elementos de Interface do Editor -slug: orphaned/MDN/Editor/Basics -translation_of: MDN/Editor/Basics -original_slug: MDN/Editor/Basics ---- -
{{MDNSidebar}}
- -

O editor WYSIWYG embutido no MDN foi projetado para fazer com que seja o mais fácil possível criar, editar, e aprimorar artigos e praticamente qualquer outra página do site. A janela do editor, como mostrada abaixo, consiste em oito áreas principais. Este guia oferece informações sobre cada seção para que você saiba como utilizar inteiramente nosso ambiente de edição.

- -
-

Estamos constantemente trabalhando em melhorias para o MDN, então haverá momentos em que este documento ou as capturas de tela abaixo estejam um pouco desatualizados. Portanto, iremos atualizar este documento periodicamente, evitando que se torne inutilizável.

-
- -

Screenshot of the editor UI (August 2017) with each section labeled

- -

A interface do editor contém as seguintes seções, como mostrado acima. Clique abaixo para ler sobre cada seção do editor respectivamente.

- - - -

Caixa de ediçao

- -

A caixa de edição é, evidementente, onde você irá realmente produzir o seu texto.

- -

Clicando com o botão direito na caixa de edição, exibe-se opções apropriadas adicionais dependendo de onde você clicar: clicar com o botão direito do mouse em uma tabela irá mostrar opções relacionadas à tabela e clicar com o botão direito em uma lista, irá apresentar opções sobre àquela lista, por exemplo. Por padrão o editor utiliza seu próprio menu quando você clica com o botão direito no editor. Para acessar o menu padrão do seu navegador (como acessar a lista de correções do corretor ortográfico do Firefox), mantenha pressionada a tecla Shift ou a tecla Control (tecla Command no Mac OS X) enquanto estiver clicando.

- -

Quando estiver trabalhando na caixa de edição, você pode usar essas teclas de atalho.

- -

Comentários de revisão

- -

Depois de fazer suas alterações, é extremamente recomendável que você adicione um comentário para sua revisão. Ele ficará disponível no histórico de revisão da página, assim como no Painel de controle. Isto irá ajudar a explicar ou justificar suas alterações para os outros que revisarão o seu trabalho depois. Para adicionar um comentário de revisão, escrevá-o na caixa de comentário antes de clicar em um dos dois botões de Publicar na parte superior e inferior da página.

- -

Existem algumas razões pelas quais isto é útil:

- - - -

Review requests

- -

The MDN community uses reviews to try to monitor and improve the quality of MDN's content. This works by setting a flag on an article indicating that a review is needed. You can learn more about technical reviews and editorial review in the How to guides.

- -

To request a review on the article you've worked on, toggle on the checkbox next to the type of review that's needed. Technical reviews should be requested any time you make changes to the explanation of how something technical works, while editorial reviews are a good idea when you've made changes and would like someone to review your writing and style choices.

- -

While selecting a review checkbox adds the article to the lists of those needing technical review or needing editorial review, it does not guarantee that anyone will immediately review the article. For technical reviews, it's a good idea to directly contact a subject-matter expert in the relevant technical area. For editorial reviews, you can post in the MDN discussion forum to request that someone review your changes.

- -

Be sure to click one of the Publish buttons after making your selections, to commit your review request.

- -

See also

- - - - diff --git a/files/pt-br/orphaned/mdn/editor/index.html b/files/pt-br/orphaned/mdn/editor/index.html deleted file mode 100644 index dc516147af..0000000000 --- a/files/pt-br/orphaned/mdn/editor/index.html +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: Guia do editor MDN -slug: orphaned/MDN/Editor -translation_of: MDN/Editor -original_slug: MDN/Editor ---- -
{{MDNSidebar}}

O editor WYSIWYG (what-you-see-is-what-you-get) oferecido pela Mozilla Developer Network wiki torna fácil a contribuição de conteúdo novo. O guia de editor MDN fornece algumas informações sobre como usar o editor, assim como algumas informações sobre recursos úteis que podem melhorar sua produtividade. Por favor, certifique-se de ler (e está de acordo com) o Mozilla Terms antes de editar ou criar novas páginas.

- -

O Guia de estilo MDN oferece informação sobre como formatar e estilizar o conteúdo em si, incluindo as nossas regras de gramática e ortografia preferenciais.

-

{{LandingPageListSubpages}}

-

{{EditorGuideQuicklinks}}

diff --git a/files/pt-br/orphaned/mdn/tools/page_regeneration/index.html b/files/pt-br/orphaned/mdn/tools/page_regeneration/index.html deleted file mode 100644 index fed90e8565..0000000000 --- a/files/pt-br/orphaned/mdn/tools/page_regeneration/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: Page regeneration -slug: orphaned/MDN/Tools/Page_regeneration -tags: - - Ferramentas - - Guia(2) - - MDN Meta - - Page-level -translation_of: MDN/Tools/Page_regeneration -original_slug: MDN/Tools/Page_regeneration ---- -
{{MDNSidebar}}

O site da MDN cacheia as páginas para melhorar a performance. Como resultado, as mudanças que você salva nas páginas podem não aparecer imediatamente. Muitas vezes, mas nem sempre, o banner aparece na página indicando que uma atualização para aquela página está em progresso. Você pode fazer uma "atualização forçada" no seu navegador para recarregar a página do servidor, mas isso pode não ter efeito se a atualização no servidor não estiver completa.

- -

Algumas páginas (especialmente landing pages) utilizam macros para gerar e atualizar o conteúdo automaticamente. Para landing pages, fazer isso assegura que novos artigos vão automaticamente ser listados na página, sem que um editor tenha que adicioná-los manualmente. Isso é bem conveniente para contribuidores de longas datas e evita que o trabalho dos novatos seja perdido aleatoriamente devido eles não saberem como o inserir o link hierarquicamente para seus artigos.

- -

Isso também pode ser feito quando a transclusão de conteúdo de uma pátina para outras páginas (usando por exemplo, o macro {{TemplateLink("Page")}}).

- -

Devido ao cache da MDN ter renderizado o conteúdo para melhorar a performance, mudanças feitas no material fonte (como a saída dos macros ou páginas transcluídas) não são automaticamente refletidas na páginas. Se você espera mudanças frequentes feitas nesses materiais fonte, você pode considerar habilitar a regeneração automática de páginas.

- -

Para habilitar a regeneração automática de páginas:

- -
    -
  1. Clique no botão Editar na página para entrar no modo de edição.
    2. -
  2. Abaixo do título da página, clique em Editar o título e propriedades localizado perto do título da página. Os metadados da página aparecerão.
    3. -
  3. Selecione um valor para Tempo máximo de regeneração. Esse valor determina o intervalo de tempo que as páginas serão refeitas, incluindo a reexecução de seus macros. Tipicamente, nós utilizamos de 4 a 8 horas. Para uma tecnologia em que a documentação está mudando rapidamente, você pode mudar para um número menor.
    4. -
  4. Salve suas mudanças para a página. É uma boa prática fazer a revisão dos comentários para descrever o que você fez, tipo: "Mudei o tempo máximo de renderização para 4 horas".
    5. -
- -

Essa página vai ser regerada automaticamente no tempo que você especificou.

- -
-

A opção "Editar títilo e propriedades da página" não está disponível enquanto você cria uma nova página. Você terá que salvar as alterações e reabrir a página para vê-la.

-
diff --git a/files/pt-br/orphaned/mozilla/add-ons/webextensions/temporary_installation_in_firefox/index.html b/files/pt-br/orphaned/mozilla/add-ons/webextensions/temporary_installation_in_firefox/index.html deleted file mode 100644 index 47eff12a4c..0000000000 --- a/files/pt-br/orphaned/mozilla/add-ons/webextensions/temporary_installation_in_firefox/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: Empacotando e Instalando -slug: orphaned/Mozilla/Add-ons/WebExtensions/Temporary_Installation_in_Firefox -translation_of: Mozilla/Add-ons/WebExtensions/Temporary_Installation_in_Firefox -translation_of_original: Mozilla/Add-ons/WebExtensions/Packaging_and_installation -original_slug: Mozilla/Add-ons/WebExtensions/Empacotando_e_instalando ---- -

Packaging your extension

- -
-

Nós estamos trabalhando em uma GUI  para empacotar e carregar extensões. Veja Bug 1185460 para mais informações. Enquanto isso, siga as etapas abaixo.

-
- -

Firefox extensões são empacotados como arquivos XPI, que nada mais são arquivos ZIP mas com extensão ".xpi".

- -

Uma dica para empacotar o arquivo você precisa "zipar" todos os arquivos que está na root do seu diretório.

- -

Windows

- -
    -
  1. Abra a pasta com seus arquivos da extensão.
    2. -
  2. Selecione todos os arquivos.
    3. -
  3. Clique com o direito e escolha Enviar para → Pasta Compactada.
    4. -
  4. Renomeie o arquivo de "something.zip" para "something.xpi".
    5. -
- -

- -

Mac OS X

- -
    -
  1. Abra a pasta com seus arquivos da extensão.
    2. -
  2. Selecione todos os arquivos.
    3. -
  3. Clique com o direito e escolha Compress n Items.
    4. -
  4. Renomeie o arquivo de Archive.zip para something.xpi.
    5. -
- -

- -

Linux / Mac OS X Terminal

- -
    -
  1. cd path/to/my-extension/
    2. -
  2. zip -r ../my-extension.xpi *
    3. -
- -

Installing your extension

- -
    -
  1. Digite no caminho de URL about:addons
    2. -
  2. Clique e araste o arquivo XPI para dentro da página, ou abra o menu de ferramentas e escolha "Install Add-On From File..."
    3. -
  3. Clique instalar no dialog que irá aparecer
    4. -
- -

Instalando suas extensões no Firefox OS

- -

You can install your extension from WebIDE running on a Desktop connected via USB or Wifi. Open "path/to/my-extension/" as a Packaged App in WebIDE.

- -

When the manifest.json validation status is valid you will be able to Install and Run your extension on the attached Firefox OS device running a nightly build of Firefox OS.

- -

The extension will first have to be enabled in Settings->Add-ons on the Firefox OS device.

- -

Soluções de problemas

- -

There are a few common problems that you might run into:

- -

"Este add-on não poderá ser instalado porque não pode ser verificado."

- - - -

"Este add-on não pode ser instalado porque pode está corrompido."

- - - -

Nada aconteceu

- - - -

Observe o console

- -

Some additional error information relating to how your extension was extracted and loaded might be available in the Browser Console.

diff --git a/files/pt-br/orphaned/tools/add-ons/dom_inspector/index.html b/files/pt-br/orphaned/tools/add-ons/dom_inspector/index.html deleted file mode 100644 index 797450921e..0000000000 --- a/files/pt-br/orphaned/tools/add-ons/dom_inspector/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: DOM Inspector (Em Pt-Br) -slug: orphaned/Tools/Add-ons/DOM_Inspector -tags: - - DOM - - DOM:Tools - - DOM_Inspector - - DOM_PT-BR - - Extensions - - Ferramentas - - Inspector - - Theme - - Tools - - Web - - Web Developer - - XUL - - XUL:Tools - - dev - - xu -translation_of: Tools/Add-ons/DOM_Inspector -original_slug: Tools/Add-ons/DOM_Inspector_Pt-Br ---- -
{{ToolsSidebar}}

O DOM Inspector (também conhecido como DOMi) é uma ferramenta de desennvolvimento usada para inspecionar, browse, e editar o DOM (Document Object Model) de documentos - usando páginas da web ou windows XUL . A hierarquia do DOM pode ser navegada usando dois paíneis (two-paned) janela que permite uma variedade de pontos de vista diferentes sobre o documento e todos os nós dentro.

- -
-

Esta ferramenta é um add-on para XUL-based em aplicações como o Firefox e o Thunderbird. Se você está procurando o DOM inspector ele está incorporado no Firefox, consulte a documetação para o Page Inspector. 

-
- -

Documentação

- -
-
Introdução ao DOM Inspector
-
-
-
Aqui um tutorial que irá ajudá-lo a começar com o DOM Inspector.
-
-
-
- -
-
DOM Inspector FAQ
-
Perguntas e Respostas comuns sobre o DOM Inspector.
-
- -
-
Página DOM Inspector no MozillaZine
-
Mais informaçãoe sobre o DOM Inspector.
-
Como criar um DOM Inspector
-
Postagens sobre como criar o DOM Inspector do início
-
- -

Obter DOM Inspector

- -
-
Firefox & Thunderbird
-
Você pode Baixar e Instalar o DOM Inspector para o AMO web site. (Usuarios de navegador Thunderbird AMO em Firefox deve salvar o link de instalação, ou visitar a página do DOM Inspector para Thunderbird.).
-
- -
-
Thunderbird 2
-
DOM Inspector para Thunderbird 2 está disponível para Thunderbird Add-ons. Ou, construa você mesmo no Thunderbird com as seguintes opções:
-
- -
ac_add_options --enable-extensions="default inspector"
-ac_add_options --enable-inspector-apis
-
- -
-
Mozilla Suite e SeaMonkey
-
Select Tools > Web Development > DOM Inspector.
-
Você pode instalar o painel lateral através de:
-
Edit > Preferences > Advanced > DOM Inspector
-
Então basta abrir o painel inspector e visitar um Web Site..
-
- -

Relatar um bug no DOM Inspector

- -

Use um nome conveniente "DOM Inspector" componente no Bugzilla.

- -

Para descobrir o DOM Inspector code e onde vive, consulte o DOM Inspector lista de módulos (DOM Inspector module listing).

- -

{{ languages( { "es": "es/DOM_Inspector", "it": "it/DOM_Inspector", "fr": "fr/Inspecteur_DOM", "ja": "ja/DOM_Inspector", "ko": "ko/DOM_Inspector", "pl": "pl/Inspektor_DOM" } ) }}

diff --git a/files/pt-br/orphaned/tools/add-ons/index.html b/files/pt-br/orphaned/tools/add-ons/index.html deleted file mode 100644 index 095399ef16..0000000000 --- a/files/pt-br/orphaned/tools/add-ons/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: Add-ons -slug: orphaned/Tools/Add-ons -tags: - - Add-ons - - Monitor de WebSocket - - Mozilla - - dev -translation_of: Tools/Add-ons -original_slug: Tools/Add-ons ---- -
{{ToolsSidebar}}

Ferramenta de desenvolvimento não incorporados ao Firefox, mas envia complementos separados (Add-ons).

- -
-
Monitor de WebSocket
-
-
-
Examine os dados trocados em uma conexão de WebSockets.
-
-
-
 
-
diff --git a/files/pt-br/orphaned/tools/css_coverage/index.html b/files/pt-br/orphaned/tools/css_coverage/index.html deleted file mode 100644 index e23e49f7f1..0000000000 --- a/files/pt-br/orphaned/tools/css_coverage/index.html +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: CSS Coverage -slug: orphaned/Tools/CSS_Coverage -tags: - - CSS - - cobertura CSS -translation_of: Tools/CSS_Coverage -original_slug: Tools/CSS_Coverage ---- -
{{ToolsSidebar}}
-

Este componente é experimental e não está ainda avaliado no Firefox

-
- -

CSS cobertura é um conjunto de comandos para Ferramentas de desenvolvimento Firefox que ajuda, desembaraçar a bagunça CSS pelo CSS que não está sendo usado, e indicando as artes de seus arquivos CSS que são necessárias para a renderização inicial.

- -

Essas ferramentas são de algum modo experimental porque a definição de "uso".é complicado, mas se espera que dará uma ajuda no trabalho do que está acontecendo.

- -

O caminho que eles usam no geral é:

- - - -

Um outro comando ("csscoverage oneshot") permite você efetivamente rodar ("csscoverage start; csscoverage stop").

- -

O que "uso" significa?

- -

TL;DR:

- -

CSS cobertura checa se o tag#id.class seletor no exemplo abaixo existe em um conjunto de páginas web.

- -
@media thing {
-  tag#id.class:hover {
-    foo: bar;
-  }
-}
- -

Porque?

- -

Supostamente seu CSS tem o seguinte: Se, durante o teste, seu mouse não entrar o span. Esta regra é usada?

- -
<style>
-  span:hover {
-    color: purple;
-  }
-</style>
-
-<span>Test</span>
-
- -

Tecnicamente span:hover não foi usado naquela palavra 'Test' não foi sempre colorido roxo, no entanto a cobertura CSS é realmente sobre estar vendo quais regras são relevantes ou irrelevantes, e span:hover claramente tem relevância para a página..

- -

Similarmente, suponha que o seu CSS tenha o seguinte:

- -
<style>
-  @media tv {
-    span {
-      color: purple;
-    }
-  }
-</style>
-
-<span>Test</span>
-
- -

Você deve estar querendo plugar uma TV dentro de seu ambiente em ordem para medir relevância? 

- -

Mas 'use' não é somente sobre relevância 

- -

É a seguinte regra relevante:

- -
<style>
-  span { }
-</style>
-
-<span>Test</span>
-
- -

Isto pode ser argumentado que não é relevante porque não tem efeito na página e pode portanto se seguramente removido

- -

No entanto acontece o seguinte:

- -
<style>
-  span {
-    -o-text-curl: minor;
-  }
-</style>
-
-<span>Test</span>
-
- -

Conhecendo se isto é ou não provável requer o uso de mecanismo de pesquisa e alguma técnica analítca, e pode até mesmo saber a versão do browser suportado em seu site. Estas são todas consideradas além do escopo desta ferramenta até a singularidade.

- -

Isto também explica o porquê da div de regra é considerada "usada" no seguinte exemplo.

- -
<style>
-  div { color: red; }
-  span { color: blue; }
-</style>
-
-<div><span>Test</span></div>
-
- -

Pode ser argumentado que a div em regra não é usada desde que não afete a renderização final da página, no entanto considere esta alternativa definição:

- -
<style>
-  div { color: red; border: none; }
-  span { color: blue; }
-</style>
-
- -

Dífícil saber se a borda em regra é usada, e há muitas outras variações; considere opacidade, visibilidade e conversão de cor ao qual está mais complicando a definição de "uso". Para guardar uma coisa simples, "uso" significaque o seletor acerta um elemento.

- -

Claramente se uma folha de estilo que você alterou durante um teste contém uma regra para um particular página que não é visto durante o teste, então nós marcaremos que esta regra é não "usada" apesar de haver sido vezes alterado. Então vale dobrar  checando antes de você remover as regras do arquivo CSS.

- -

Ressalvas

- -

Tenha consciência destas coisas:

- - - -

Erros

- -

Nós estamos trabalhando em um número de imortantes bugs ( erros ):

- - diff --git a/files/pt-br/orphaned/tools/debugger_(before_firefox_52)/disable_breakpoints/index.html b/files/pt-br/orphaned/tools/debugger_(before_firefox_52)/disable_breakpoints/index.html deleted file mode 100644 index d3a58117d7..0000000000 --- a/files/pt-br/orphaned/tools/debugger_(before_firefox_52)/disable_breakpoints/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Desabilitar breakpoints -slug: orphaned/Tools/Debugger_(before_Firefox_52)/Disable_breakpoints -tags: - - breakpoint - - breakpoints -translation_of: Tools/Debugger_(before_Firefox_52)/Disable_breakpoints -original_slug: Tools/Debugger_(before_Firefox_52)/Disable_breakpoints ---- -
{{ToolsSidebar}}

Para desabilitar um breakpoint, desmarqueo check box próximo ao breakpoint's entrada no Source list pane:

- -

- -

Alternativamente, ativar o menu de contexto enquanto o ponteiro do mouse estiver sobre a entrada do breakpoint no source list pane, e selecione "Desabilitar breakpoint".

- -

Você pode também remover um brekpoint somente apertando na seta que o representa.

- -

Para desabilitar/habilitar todos os breakpoints, use o "Toggle all breakpoints" botão no Source list pane:

- -

diff --git a/files/pt-br/orphaned/tools/debugger_(before_firefox_52)/index.html b/files/pt-br/orphaned/tools/debugger_(before_firefox_52)/index.html deleted file mode 100644 index bd8046254a..0000000000 --- a/files/pt-br/orphaned/tools/debugger_(before_firefox_52)/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: Debugger (before Firefox 52) -slug: orphaned/Tools/Debugger_(before_Firefox_52) -tags: - - NeedsTranslation - - TopicStub -translation_of: Tools/Debugger_(before_Firefox_52) -original_slug: Tools/Debugger_(before_Firefox_52) ---- -
{{ToolsSidebar}}
-

This page describes the JavaScript Debugger as it appears before Firefox 52.

- -

See what it looks like from Firefox 52 onwards.

-
- -

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/pt-br/orphaned/web/accessibility/jaws_issues_with_firefox/index.html b/files/pt-br/orphaned/web/accessibility/jaws_issues_with_firefox/index.html deleted file mode 100644 index 40fc26b856..0000000000 --- a/files/pt-br/orphaned/web/accessibility/jaws_issues_with_firefox/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: Problemas com JAWS no Firefox -slug: orphaned/Web/Accessibility/JAWS_Issues_with_Firefox -tags: - - Acessibilidade - - Obsolento -translation_of: Web/Accessibility/JAWS_Issues_with_Firefox -original_slug: Web/Acessibilidade/Problemas_com_JAWS_no_Firefox ---- -

Problemas JAWS Firefox conhecidos

- -

Esse artigo não é mais relevante. Por favor, veja o FAQ no site de suporte Mozilla.

diff --git a/files/pt-br/orphaned/web/api/abstractworker/index.html b/files/pt-br/orphaned/web/api/abstractworker/index.html deleted file mode 100644 index 2b5355f865..0000000000 --- a/files/pt-br/orphaned/web/api/abstractworker/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: AbstractWorker -slug: orphaned/Web/API/AbstractWorker -translation_of: Web/API/AbstractWorker -original_slug: Web/API/AbstractWorker ---- -

{{ APIRef("Web Workers API") }}

- -

Resumo

- -

A interface AbstractWorker abstrai propriedades e métodos comuns para todo o tipo de Workers, sendo {{domxref("Worker")}} ou {{domxref("SharedWorker")}}.

- -

Propriedades

- -

A interface AbstractWorker não herda qualquer propriedade..

- -
-
{{domxref("AbstractWorker.onerror")}}
-
É um {{ domxref("EventListener") }} que é chamado sempre que um {{domxref("ErrorEvent")}} do tipo error borbulha através do Worker.
-
- -

Métodos

- -

A interface AbstractWorker não implementa ou herda qualquer método.

- -

Especificações

- - - - - - - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{SpecName('HTML WHATWG', "#the-abstractworker-abstract-interface", "AbstractWorker")}}{{Spec2('HTML WHATWG')}}Sem mudanças para {{SpecName("Web Workers")}}.
{{SpecName('Web Workers', "#the-abstractworker-abstract-interface", "AbstractWorker")}}{{Spec2('HTML5 W3C')}}Definição Inicial
- -

Compatibilidade de Browser

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
RecursoChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suporte Básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - -
RecursoAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suporte Básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Veja também

- - - -

 

diff --git a/files/pt-br/orphaned/web/api/abstractworker/onerror/index.html b/files/pt-br/orphaned/web/api/abstractworker/onerror/index.html deleted file mode 100644 index 9ad74fd3fe..0000000000 --- a/files/pt-br/orphaned/web/api/abstractworker/onerror/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: AbstractWorker.onerror -slug: orphaned/Web/API/AbstractWorker/onerror -translation_of: Web/API/AbstractWorker/onerror -original_slug: Web/API/AbstractWorker/onerror ---- -

{{ APIRef("Web Workers API") }}

- -

Resumo

- -

A propriedade AbstractWorker.onerror da interface {{domxref("AbstractWorker")}} representa um {{event("Event_handlers", "event handler")}}, que é uma função a ser chamada quando o evento {{event("error")}} ocorre através de um balão de notificação {{domxref("Worker")}}.

- -

Sintaxe

- -
myWorker.onerror = function() { ... };
- -

Exemplo

- -

O seguinte trecho de código mostra criação de um objeto Worker usando o construtor de Worker() e criando um manipulador onerror no objeto resultante:

- -
var myWorker = new Worker("worker.js");
-
-myWorker.onerror = function() {
-  console.log('Há um erro com o seu worker!');
-}
- -

Especificações

- - - - - - - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{SpecName('HTML WHATWG', "#handler-abstractworker-onerror", "AbstractWorker.onerror")}}{{Spec2('HTML WHATWG')}}Nenhuma mudança em {{SpecName("Web Workers")}}.
{{SpecName('Web Workers', "#handler-abstractworker-onerror", "AbstractWorker.onerror")}}{{Spec2('Web Workers')}}Definição inicial.
- -

Compatibilidade dos Navegadores

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticasChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suporte básico{{CompatChrome(4)}}{{CompatGeckoDesktop("1.9.1")}}1010.64
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticasAndroidFirefox Mobile (Gecko)Firefox OS (Gecko)IE PhoneOpera MobileSafari Mobile
Suporte básico4.4{{CompatGeckoMobile("1.9.1")}}1.0.11011.55.1
-
- -

Veja também

- - diff --git a/files/pt-br/orphaned/web/api/ambient_light_events/index.html b/files/pt-br/orphaned/web/api/ambient_light_events/index.html deleted file mode 100644 index 92bcf75e04..0000000000 --- a/files/pt-br/orphaned/web/api/ambient_light_events/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: Ambient Light Events -slug: orphaned/Web/API/Ambient_Light_Events -tags: - - Ambiente de luz - - Ambiente de luz API - - Ambiente e luz HTML5 API -translation_of: Web/API/Ambient_Light_Events -original_slug: Web/API/Ambient_Light_Events ---- -
Os eventos de luz ambiente são uma maneira útil de tornar uma página da Web ou uma aplicação consciente de qualquer alteração na intensidade da luz. Isso permite que eles reajam a tal mudança, por exemplo alterando o contraste de cores da interface do usuário (UI) ou alterando a exposição necessária para tirar uma foto.
- -
 
- -

Eventos de  luz

- -

Quando o sensor de luz de um dispositivo detecta uma mudança no nível de luz, ele notifica o navegador dessa alteração. Quando o navegador obtém tal notificação, ele dispara um evento DeviceLightEvent que fornece informações sobre a intensidade da luz exata.

- -

Este evento pode ser capturado no nível do objeto da janela usando o método addEventListener (usando o nome do evento devicelight) ou anexando um manipulador de eventos à propriedade window.ondevicelight.

- -

Uma vez capturado, o objeto de evento dá acesso à intensidade da luz expressa em lux através da propriedade DeviceLightEvent.value.

- -

Exemplo

- -
window.addEventListener('devicelight', function(event) {
-  var html = document.getElementsByTagName('html')[0];
-
-  if (event.value < 50) {
-    html.classList.add('darklight');
-    html.classList.remove('brightlight');
-  } else {
-    html.classList.add('brightlight');
-    html.classList.remove('darklight');
-  }
-});
- -

Especificações

- - - - - - - - - - - - - - - - -
EspecificaçãoEstatusComentário
Sensor de luz ambiente A definição de "Ambient Light Events" nessa especificação. -

Rascunho do Editor

- 		Definição inicial
- -

Compatibilidade do navegador

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
{{domxref("DeviceLightEvent")}}{{CompatNo}}{{CompatGeckoDesktop("22.0")}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
{{domxref("DeviceLightEvent")}}{{CompatNo}}support{{CompatGeckoMobile("15.0")}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

[1] O evento "devicelight" é implementado e a preferência ativada por padrão no Firefox Mobile para Android (15.0) e no Firefox OS (B2G). Começando com Gecko 22.0 geckoRelease ("22.0"), uma implementação de desktop para Mac OS X também está disponível. O suporte para o Windows 7 está em andamento (veja bug (754199)).

- -

Veja também

- - diff --git a/files/pt-br/orphaned/web/api/body/index.html b/files/pt-br/orphaned/web/api/body/index.html deleted file mode 100644 index fb7edd01c1..0000000000 --- a/files/pt-br/orphaned/web/api/body/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: Body -slug: orphaned/Web/API/Body -tags: - - API - - BODY - - Experimental - - Fetch - - Fetch API - - Interface - - NeedsTranslation - - Reference - - TopicStub - - request -translation_of: Web/API/Body -original_slug: Web/API/Body ---- -
{{ APIRef("Fetch") }}
- -

The Body {{glossary("mixin")}} of the Fetch API represents the body of the response/request, allowing you to declare what its content type is and how it should be handled.

- -

Body is implemented by both {{domxref("Request")}} and {{domxref("Response")}}. This provides these objects with an associated body (a stream), a used flag (initially unset), and a MIME type (initially the empty byte sequence).

- -

Properties

- -
-
{{domxref("Body.body")}} {{readonlyInline}}
-
A simple getter used to expose a {{domxref("ReadableStream")}} of the body contents.
-
{{domxref("Body.bodyUsed")}} {{readonlyInline}}
-
A {{jsxref("Boolean")}} that indicates whether the body has been read.
-
- -

Methods

- -
-
{{domxref("Body.arrayBuffer()")}}
-
Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with an {{jsxref("ArrayBuffer")}}.
-
{{domxref("Body.blob()")}}
-
Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("Blob")}}.
-
{{domxref("Body.formData()")}}
-
Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("FormData")}} object.
-
{{domxref("Body.json()")}}
-
Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with the result of parsing the body text as {{jsxref("JSON")}}.
-
{{domxref("Body.text()")}}
-
Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("USVString")}} (text). The response is always decoded using UTF-8.
-
- -

Examples

- -

The example below uses a simple fetch call to grab an image and display it in an {{htmlelement("img")}} tag. You'll notice that since we are requesting an image, we need to run {{domxref("Body.blob","Body.blob()")}} ({{domxref("Response")}} implements body) to give the response its correct MIME type.

- -

HTML Content

- -
<img class="my-image" src="https://wikipedia.org/static/images/project-logos/frwiki-1.5x.png">
-
- -

JS Content

- -
const myImage = document.querySelector('.my-image');
-fetch('https://upload.wikimedia.org/wikipedia/commons/7/77/Delete_key1.jpg')
-	.then(res => res.blob())
-	.then(res => {
-		const objectURL = URL.createObjectURL(res);
-		myImage.src = objectURL;
-});
- -

{{ EmbedLiveSample('Examples', '100%', '250px') }}

- -

Specifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Fetch','#body-mixin','Body')}}{{Spec2('Fetch')}}
- -

Browser compatibility

- - - -

{{Compat("api.Body")}}

- -

See also

- - diff --git a/files/pt-br/orphaned/web/api/body/json/index.html b/files/pt-br/orphaned/web/api/body/json/index.html deleted file mode 100644 index e49273e9ba..0000000000 --- a/files/pt-br/orphaned/web/api/body/json/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: Body.json() -slug: orphaned/Web/API/Body/json -tags: - - API - - Experimental - - Fetch - - JSON - - Referencia -translation_of: Web/API/Body/json -original_slug: Web/API/Body/json ---- -
{{APIRef("Fetch API")}}
- -

O método json()  do mixin {{DOMxRef("Body")}} usa uma stream do objeto {{DOMxRef("Response")}} para tratar. O método json() retorna uma Promise como resultado do processamento da stream, retornando um objeto {{JSxRef("JSON")}} em caso de sucesso.

- -

Syntaxe

- -
response.json().then(data => {
-  // do something with your data
-});
- -

Parâmetros

- -

Nenhum.

- -

Retorno

- -

Uma {{jsxref("Promise")}} que retorna um objeto Javascript no método resolve(). Pode ser qualquer tipo que pode ser representado com JSON — objeto, array, string, numeral...

- -

Exemplo

- -

Em nosso exemplo de fetch em json (teste aqui a busca em json com fetch), nós criamos uma nova requisição usando o constructor de {{DOMxRef("Request.Request", "Request()")}}, e em seguimos a usamos para buscar um arquivo .json. Quando o fetch é bem-sucedido, nós lemos e tratamos a stream com o método json(), lê os valores em forma de objeto retornados como esperado e inserimos na lista para exibir os dados dos produtos.

- -
const myList = document.querySelector('ul');
-const myRequest = new Request('products.json');
-
-fetch(myRequest)
-  .then(response => response.json())
-  .then(data => {
-    for (const product of data.products) {
-      let listItem = document.createElement('li');
-      listItem.appendChild(
-        document.createElement('strong')
-      ).textContent = product.Name;
-      listItem.append(
-        ` can be found in ${
-          product.Location
-        }. Cost: `
-      );
-      listItem.appendChild(
-        document.createElement('strong')
-      ).textContent = `£${product.Price}`;
-      myList.appendChild(listItem);
-    }
-  })
-  .catch(console.error);
- -

Especificações

- - - - - - - - - - - - - - - - -
SpecificaçõesStatusComentários
{{SpecName("Fetch", "#dom-body-json", "Body.json()")}}{{Spec2("Fetch")}}Definição Inicial
- -

Compatibilidade de Navegador

- - - -

{{Compat("api.Body.json")}}

- -

Veja também

- - diff --git a/files/pt-br/orphaned/web/api/childnode/after/index.html b/files/pt-br/orphaned/web/api/childnode/after/index.html deleted file mode 100644 index 8fa84d11ee..0000000000 --- a/files/pt-br/orphaned/web/api/childnode/after/index.html +++ /dev/null @@ -1,186 +0,0 @@ ---- -title: ChildNode.after() -slug: orphaned/Web/API/ChildNode/after -tags: - - API - - DOM - - Experimental - - Nó - - Referencia - - metodo -translation_of: Web/API/ChildNode/after -original_slug: Web/API/ChildNode/after ---- -
{{APIRef("DOM")}} {{SeeCompatTable}}
- -

The ChildNode.after() method inserts a set of {{domxref("Node")}} or {{domxref("DOMString")}} objects in the children list of this ChildNode's parent, just after this ChildNode. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.

- -

Sintaxe

- -
[Throws, Unscopable]
-void ChildNode.after((Node or DOMString)... nodes);
-
- -

Parâmetros

- -
-
nós
-
A set of {{domxref("Node")}} or {{domxref("DOMString")}} objects to insert.
-
- -

Exceções

- - - -

Exemplos

- -

Inserindo uum elemento

- -
var parente = document.createElement("div");
-var filho = document.createElement("p");
-parente.appendChild(filho);
-var span = document.createElement("span");
-
-filho.after(span);
-
-console.log(parente.outerHTML);
-// "<div><p></p><span></span></div>"
-
- -

Inserindo texto

- -
var parente = document.createElement("div");
-var filho = document.createElement("p");
-parente.appendChild(filho);
-
-filho.after("Text");
-
-console.log(parente.outerHTML);
-// "<div><p></p>Text</div>"
- -

Inserindo um elemento e um texto 

- -
var parente = document.createElement("div");
-var filho = document.createElement("p");
-parente.appendChild(filho);
-var span = document.createElement("span");
-
-filho.after(span, "Text");
-
-console.log(parente.outerHTML);
-// "<div><p></p><span></span>Text</div>"
- -

ChildNode.after() is unscopable

- -

The after() method is not scoped into the with statement. Veja {{jsxref("Symbol.unscopables")}} para maior infomação.

- -
with(node) {
-  after("foo");
-}
-// ReferenceError: after is not defined
- -

Polyfill

- -

Você pode usar polyfill com  o método  after()  no Internet Explorer 9 e com o seguinte código:

- -
//from: https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/after()/after().md
-(function (arr) {
-  arr.forEach(function (item) {
-    if (item.hasOwnProperty('after')) {
-      return;
-    }
-    Object.defineProperty(item, 'after', {
-      configurable: true,
-      enumerable: true,
-      writable: true,
-      value: function after() {
-        var argArr = Array.prototype.slice.call(arguments),
-          docFrag = document.createDocumentFragment();
-
-        argArr.forEach(function (argItem) {
-          var isNode = argItem instanceof Node;
-          docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
-        });
-
-        this.parentNode.insertBefore(docFrag, this.nextSibling);
-      }
-    });
-  });
-})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);
- -

 

- -
//https://github.com/FabioVergani/js-Polyfill_Element.prototype.after/blob/master/after.js
-
-(function(x){
- var o=x.prototype,p='after';
- if(!o[p]){
-    o[p]=function(){
-     var e, m=arguments, l=m.length, i=0, t=this, p=t.parentNode, n=Node, s=String, d=document;
-     if(p!==null){
-        while(i<l){
-         e=m[i];
-         if(e instanceof n){
-            t=t.nextSibling;
-            if(t!==null){
-                p.insertBefore(e,t);
-            }else{
-                p.appendChild(e);
-            };
-         }else{
-            p.appendChild(d.createTextNode(s(e)));
-         };
-         ++i;
-        };
-     };
-    };
- };
-})(Element);
-
-
-
-/*
-min:
-
-(function(x){
- var o=x.prototype;
- o.after||(o.after=function(){var e,m=arguments,l=m.length,i=0,t=this,p=t.parentNode,n=Node,s=String,d=document;if(p!==null){while(i<l){((e=m[i]) instanceof n)?(((t=t.nextSibling )!==null)?p.insertBefore(e,t):p.appendChild(e)):p.appendChild(d.createTextNode(s(e)));++i;}}});
-}(Element));
-
-*/
-
- -

 

- -

Especificação

- - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{SpecName('DOM WHATWG', '#dom-childnode-after', 'ChildNode.after()')}}{{Spec2('DOM WHATWG')}}Initial definition.
- -

Compatibilidade com navegadores

- -

{{Compat("api.ChildNode.after")}}

- -

Veja mais

- - diff --git a/files/pt-br/orphaned/web/api/childnode/index.html b/files/pt-br/orphaned/web/api/childnode/index.html deleted file mode 100644 index 282b89ee3a..0000000000 --- a/files/pt-br/orphaned/web/api/childnode/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: ChildNode -slug: orphaned/Web/API/ChildNode -tags: - - API - - DOM - - Experimental - - Interface - - NeedsTranslation - - Node - - TopicStub -translation_of: Web/API/ChildNode -original_slug: Web/API/ChildNode ---- -
{{APIRef("DOM")}}
- -
A interface ChildNode contém métodos que são particulares para os objetos
- -

{{domxref("Node")}} que podem ter um pai.

- -

ChildNode é uma interface bruta e nenhum objeto desse tipo pode ser criado; eles são implementados pelos objetos {{domxref("Element")}}, {{domxref("DocumentType")}}, e {{domxref("CharacterData")}}.

- -

Propriedades

- -

Não há propriedades herdadas nem específicas.

- -

Métodos

- -

Não há métodos herdados.

- -
-
{{domxref("ChildNode.remove()")}} {{experimental_inline}}
-
Removes this ChildNode from the children list of its parent.
-
{{domxref("ChildNode.before()")}} {{experimental_inline}}
-
Inserts a set of {{domxref("Node")}} or {{domxref("DOMString")}} objects in the children list of this ChildNode's parent, just before this ChildNode. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.
-
{{domxref("ChildNode.after()")}} {{experimental_inline}}
-
Inserts a set of {{domxref("Node")}} or {{domxref("DOMString")}} objects in the children list of this ChildNode's parent, just after this ChildNode. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.
-
{{domxref("ChildNode.replaceWith()")}} {{experimental_inline}}
-
Replaces this ChildNode in the children list of its parent with a set of {{domxref("Node")}} or {{domxref("DOMString")}} objects. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.
-
- -

Especificações

- - - - - - - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{SpecName('DOM WHATWG', '#interface-childnode', 'ChildNode')}}{{Spec2('DOM WHATWG')}}Split the ElementTraversal interface in {{domxref("ParentNode")}} and ChildNode. previousElementSibling and nextElementSibling are now defined on the latter. The {{domxref("CharacterData")}} and {{domxref("DocumentType")}} implemented the new interfaces. Added the remove(), before(), after() and replaceWith() methods.
{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}{{Spec2('Element Traversal')}}Added the initial definition of its properties to the ElementTraversal pure interface and use it on {{domxref("Element")}}.
- -

Polyfill

- -

External on github: childNode.js

- -

Compatibilidade com navegadores

- -

{{Compat("api.ChildNode")}}

- -

See also

- - diff --git a/files/pt-br/orphaned/web/api/childnode/remove/index.html b/files/pt-br/orphaned/web/api/childnode/remove/index.html deleted file mode 100644 index 57dcc06698..0000000000 --- a/files/pt-br/orphaned/web/api/childnode/remove/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: ChildNode.remove() -slug: orphaned/Web/API/ChildNode/remove -tags: - - API - - ChildNode - - DOM - - Experimental - - Método(2) - - remove -translation_of: Web/API/ChildNode/remove -original_slug: Web/API/ChildNode/remove ---- -
{{APIRef("DOM")}}
- -

O método ChildNode.remove() remove o objeto da árvore a que ele pertence.

- -

Sintase

- -
elementNodeReference.remove();
-
- -

Exemplo

- -

Usando remove()

- -
<div id="div-01">Here is div-01</div>
-<div id="div-02">Here is div-02</div>
-<div id="div-03">Here is div-03</div>
-
- -
var el = document.getElementById('div-01');
-el.nextElementSibling.remove(); // Remove o div com o id 'div-02'
-
- -

ChildNode.remove() não tem escopo

- -

O método remove() não tem escopo na função with. Veja {{jsxref("Symbol.unscopables")}} para mais informação.

- -
with(node) {
-  remove();
-}
-// ReferenceError: remove is not defined
- -

Polyfill

- -

Você pode evitar incompatibilidade ao usar o método remove() no Internet Explorer 9 em diante com o seguinte código:

- -
// de: https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/remove()/remove().md
-(function (arr) {
-  arr.forEach(function (item) {
-    if (item.hasOwnProperty('remove')) {
-      return;
-    }
-    Object.defineProperty(item, 'remove', {
-      configurable: true,
-      enumerable: true,
-      writable: true,
-      value: function remove() {
-        this.parentNode.removeChild(this);
-      }
-    });
-  });
-})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);
- -

Especificações

- - - - - - - - - - - - - - - - - - - -
EspecificaçãoSituaçãoComentário
{{SpecName('DOM WHATWG', '#dom-childnode-remove', 'ChildNode.remove')}}{{Spec2('DOM WHATWG')}}Definição Inicial.
{{SpecName('DOM4', '#dom-childnode-remove', 'ChildNode.remove')}}{{Spec2('DOM4')}} 
- -

Compatibilidade de navegadores

- -
{{Compat("api.ChildNode.remove")}}
- -

 

- -

Veja também

- - diff --git a/files/pt-br/orphaned/web/api/document_object_model/events/index.html b/files/pt-br/orphaned/web/api/document_object_model/events/index.html deleted file mode 100644 index 76e6ec64e1..0000000000 --- a/files/pt-br/orphaned/web/api/document_object_model/events/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: Events and the DOM -slug: orphaned/Web/API/Document_Object_Model/Events -translation_of: Web/API/Document_Object_Model/Events -original_slug: Web/API/Document_Object_Model/Events ---- -
{{DefaultAPISidebar("DOM")}}
- -

Introdução

- -

Este capítulo descreve o Modelo de Eventos do DOM. A interface de Eventos é descrita, assim como a interface para registro de eventos em nodes(ou nódulos) no DOM, e event listeners, e vários outros exemplos que mostram como diversas interfaces de evento se relacionam uma com a outraThere is an excellent diagram that clearly explains the three phases of event flow through the DOM in the DOM Level 3 Events draft.

- -

Existe um excelente diagrama que explica claramente as três fases do percurso de eventos no DOM em DOM Level 3 Events draft.

- -

Registrando event listeners

- -

Existem 3 formas de registrar uma manipulação de eventos para um elemento DOM.

- -

{{domxref("EventTarget.addEventListener")}}

- -
// Assuming myButton is a button element
-myButton.addEventListener('click', greet, false)
-function greet(event){
-    // print and have a look at the event object
-    // always print arguments in case of overlooking any other arguments
-    console.log('greet:', arguments)
-    alert('hello world')
-}
-
- -

Este é o método que você deve usar em páginas web modernas.

- -
-

Nota: Internet Explorer 6–8 não suportavam este método, oferecendo uma API {{domxref("EventTarget.attachEvent")}} parecida no lugar. Para compatibilidade cross-browser, use uma das muitas bibliotecas JavaScript disponíveis.

-
- -

Mais detalhes podem encontrada na página de referência {{domxref("EventTarget.addEventListener")}}.

- -

atributo HTML

- -
<button onclick="alert('Hello world!')">
-
- -

O código JavaScript no atributo é passado para o objeto Evento através do parâmetro event . O valor return é tratado de uma maneira especial, descrita na especificação HTML.

- -
-

Cuidado: Este método deve ser evitado! Ele suja a marcação, e a faz menos legível. Preocupações com o conteúdo/estrutura e comportamento não são bem separadas, tornando mais díficil encontrar um bug.

-
- -

DOM element properties

- -
// Supondo que myButton seja um elemento button
-myButton.onclick = function(event){alert('Hello world')}
-
- -

A função pode ser definida para receber um parâmetro event . O valor return é tratado de maneira especial, descrita na especificação HTML.

- -

O problema deste método é que apenas uma manipulação pode ser definida por elemento e por evento.

- -

Acessando interfaces doEvento

- -

Manipulações do Evento podem ser atribuídas a vários objetos (incluindo elementos DOM, documentos, o {{domxref("window")}} object, etc.). Quando um evento ocorre, o objeto do evento é criado e passado sequencialmente ao event listeners.

- -

A interface {{domxref("Event")}} é acessível de dentro da função manipuladora, atrás do objeto evento passado como primeiro argumento. O seguinte exemplo simples mostra como um objeto evento é passado á função manipuladora do evento, e pode usado de dentro de tal função.

- -
function print(evt) {
-  // the evt parameter is automatically assigned the event object
-  // take care of the differences between console.log & alert
-  console.log('print:', evt)
-  alert(evt)
-}
-// any function should have an appropriate name, that's what called semantic
-table_el.onclick = print
-
- - - - diff --git a/files/pt-br/orphaned/web/api/htmlorforeignelement/dataset/index.html b/files/pt-br/orphaned/web/api/htmlorforeignelement/dataset/index.html deleted file mode 100644 index 43394c700b..0000000000 --- a/files/pt-br/orphaned/web/api/htmlorforeignelement/dataset/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: HTMLElement.dataset -slug: orphaned/Web/API/HTMLOrForeignElement/dataset -translation_of: Web/API/HTMLOrForeignElement/dataset -original_slug: Web/API/HTMLOrForeignElement/dataset ---- -

{{ APIRef }}

- -

A propriedade HTMLElement.dataset permite o acesso, em modo de leitura e escrita, a todos os atributos de dados personalizado (data-*) no elemento. Ele é um mapa de DOMString, com uma entrada para cada atributo de dados personalizado.

- -

O nome de um atributo de dados customizado inicia com data-. Ele deve conter somente letras, números e os seguintes caracteres: dash (-), dot (.), collon(:), underscore (_). Além disso, ele não deve conter letras ASCII captalizadas (A à Z).

- -

Um atributo de dados personalizado é transformado em uma chave para uma entrada no {{ domxref("DOMStringMap") }} de acordo com as seguintes regras

- - - -

A transformação oposta, que mapeia uma chave para um nome de atributo, usa as seguintes regras:

- - - -

A restrição nas regras acima garantem que as duas trasnformações são inversa uma da outra.

- -

Por exemplo, o atributo data-abc-def corresponde a chave abcDef.

- -

Sintaxe

- -
string = element.dataset.camelCasedName;
-element.dataset.camelCasedName = string;
- -

Exemplos

- -
<div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe
-</div>
-
-var el = document.querySelector('#user');
-
-// el.id == 'user'
-// el.dataset.id === '1234567890'
-// el.dataset.user === 'johndoe'
-// el.dataset.dateOfBirth === ''
-
-el.dataset.dateOfBirth = '1960-10-03'; // set the DOB.
-
-// 'someDataAttr' in el.dataset === false
-
-el.dataset.someDataAttr = 'mydata';
-// 'someDataAttr' in el.dataset === true
-
- -

Especificações

- - - - - - - - - - - - - - - - - - - - - - - - -
EspeficicaçãoStatusComentário
{{SpecName('HTML WHATWG', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML WHATWG')}}Sem mudanças desde o último  snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML5.1')}}Snapshot de {{SpecName('HTML WHATWG')}}, sem mudanças desde {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML5 W3C')}}Snapshot de {{SpecName('HTML WHATWG')}}, definição inicial.
- -

Compatibilidade com navegadores

- -

{{Compat("api.HTMLElement.dataset")}}

- -

Veja também

- - diff --git a/files/pt-br/orphaned/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html b/files/pt-br/orphaned/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html deleted file mode 100644 index ae5b41c66d..0000000000 --- a/files/pt-br/orphaned/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html +++ /dev/null @@ -1,250 +0,0 @@ ---- -title: Conceitos Básicos sobre IndexedDb -slug: orphaned/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB -tags: - - Avançado - - IndexedDB - - conceitos -translation_of: Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB -original_slug: Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB ---- -

{{DefaultAPISidebar("IndexedDB")}}

- -
-

IndexedDB é uma forma de você armazenar dados no browser do usuário. Permite criar aplicativos da Web com habilidades de consulta ricas, independentemente da disponibilidade da rede, esses aplicativos podem trabalhar on-line e off-line. IndexedDB é útil para aplicativos que armazenam uma grande quantidade de dados (por exemplo, um catálogo de DVDs em uma biblioteca de empréstimos) e aplicativos que não precisam de conectividade persistente à Internet para trabalhar (por exemplo, clientes de e-mail, listas de tarefas e Blocos de notas).

-
- -

Sobre esse documento

- -

Essa introdução discute conceitos essenciais e a terminologia do IndexedDB. Ele vai ter dar um visão geral e explicar conceitos chaves.

- -

Você vai achar útil:

- - - -

Visão geral do IndexedDB

- -

IndexedDB permite você armazenar e consultar objetos que são indexados com uma chave. Todas as mudanças na base dados são feitas por transações. Como a maioria soluções de armazenamento web, IndexedDB segue a política de mesma origem. Então enquanto você pode acessar dados armazenados em um domínio, você não pode acessar em diferentes domínios.

- -

IndexedDB é uma API assíncrona que pode ser usada em diversos contextos, incluindo WebWorkers. Isso permite o uso de uma versão síncrona também, para o uso em web workers, mas isso foi removido da especificação por falta de interesse da comunidade web.

- -


- IndexedDB foi pensado para ser uma especificação concorrente ao banco de dados WebSQL, mas o W3C depreciou o WebSQL em 18 de novembro de 2010. Embora IndexedDB e WebSQL sejam soluções para armazenamento, eles não oferecem as mesmas funcionalidades. WebSQL Database é um sistema de acesso a banco de dados relacional, enquanto que IndexedDB é um sistema de tabelas indexadas.

- -

Principais conceitos

- -

 Se você já trabalhou com outros tipos de banco de dados, você pode esquecer enquanto trabalha com IndexedDB. E tenha esses importantes conceitos em mente:

- - - -

 

- - - -

Definições

- -

Essa seção define e explica os termos usado na API IndexedDB.

- -

Base de dados

- -
-
Base de dados
-
Um repositório de informação, normalmente é composto por um ou mais object stores. cada base de dados deve possuir: -
    -
  • Name. This identifies the database within a specific origin and stays constant throughout its lifetime. The name can be any string value (including an empty string).
    • -
  • -

    Current version. When a database is first created, its version is the integer 1 if not specified otherwise. Each database can have only one version at any given time.

    -
    • -
-
-
durable
-
-

In Firefox, IndexedDB used to be durable, meaning that in a readwrite transaction {{domxref("IDBTransaction.oncomplete")}} was fired only when all data was guaranteed to have been flushed to disk.

- -

As of Firefox 40, IndexedDB transactions have relaxed durability guarantees to increase performance (see {{Bug("1112702")}}), which is the same behaviour as other IndexedDB-supporting browsers. In this case the {{Event("complete")}} event is fired after the OS has been told to write the data but potentially before that data has actually been flushed to disk. The event may thus be delivered quicker than before, however, there exists a small chance that the entire transaction will be lost if the OS crashes or there is a loss of system power before the data is flushed to disk. Since such catastrophic events are rare, most consumers should not need to concern themselves further.

- -
-

Note: In Firefox, if you wish to ensure durability for some reason (e.g. you're storing critical data that cannot be recomputed later) you can force a transaction to flush to disk before delivering the complete event by creating a transaction using the experimental (non-standard) readwriteflush mode (see {{domxref("IDBDatabase.transaction")}}.) This is currently experimental, and can only be used if the dom.indexedDB.experimental pref is set to true in about:config.

-
-
-
object store
-
-

The mechanism by which data is stored in the database. The object store persistently holds records, which are key-value pairs. Records within an object store are sorted according to the keys in an ascending order.

- -

Every object store must have a name that is unique within its database. The object store can optionally have a key generator and a key path. If the object store has a key path, it is using in-line keys; otherwise, it is using out-of-line keys.

- -

For the reference documentation on object store, see IDBObjectStore or IDBObjectStoreSync.

-
-
version
-
When a database is first created, its version is the integer 1. Each database has one version at a time; a database can't exist in multiple versions at once. The only way to change the version is by opening it with a greater version than the current one. This will start a versionchange transaction and fire an upgradeneeded event. The only place where the schema of the database can be updated is inside the handler of that event.
-
Note: This definition describes the most recent specification, which is only implemented in up-to-date browsers. Old browsers implemented the now deprecated and removed IDBDatabase.setVersion() method.
-
database connection
-
An operation created by opening a database. A given database can have multiple connections at the same time.
-
transaction
-
-

An atomic set of data-access and data-modification operations on a particular database. It is how you interact with the data in a database. In fact, any reading or changing of data in the database must happen in a transaction.

- -

A database connection can have several active transaction associated with it at a time, so long as the writing transactions do not have overlapping scopes. The scope of transactions, which is defined at creation, determines which object stores the transaction can interact with and remains constant for the lifetime of the transaction. So, for example, if a database connection already has a writing transaction with a scope that just covers the flyingMonkey object store, you can start a second transaction with a scope of the unicornCentaur and unicornPegasus object stores. As for reading transactions, you can have several of them — even overlapping ones.

- -

Transactions are expected to be short-lived, so the browser can terminate a transaction that takes too long, in order to free up storage resources that the long-running transaction has locked. You can abort the transaction, which rolls back the changes made to the database in the transaction. And you don't even have to wait for the transaction to start or be active to abort it.

- -

The three modes of transactions are: readwrite, readonly, and versionchange. The only way to create and delete object stores and indexes is by using a versionchange transaction. To learn more about transaction types, see the reference article for IndexedDB.

- -

Because everything happens within a transaction, it is a very important concept in IndexedDB. To learn more about transactions, especially on how they relate to versioning, see IDBTransaction, which also has reference documentation. For the documentation on the synchronous API, see IDBTransactionSync.

-
-
request
-
The operation by which reading and writing on a database is done. Every request represents one read or write operation.
-
index
-
-

An index is a specialized object store for looking up records in another object store, called the referenced object store. The index is a persistent key-value storage where the value part of its records is the key part of a record in the referenced object store. The records in an index are automatically populated whenever records in the referenced object store are inserted, updated, or deleted. Each record in an index can point to only one record in its referenced object store, but several indexes can reference the same object store. When the object store changes, all indexes that refer to the object store are automatically updated.

- -

Alternatively, you can also look up records in an object store using the key.

- -

To learn more on using indexes, see Using IndexedDB. For the reference documentation on index, see IDBKeyRange.

-
-
- -

Chave e valor

- -
-
key
-
-

A data value by which stored values are organized and retrieved in the object store. The object store can derive the key from one of three sources: a key generator, a key path, or an explicitly specified value. The key must be of a data type that has a number that is greater than the one before it. Each record in an object store must have a key that is unique within the same store, so you cannot have multiple records with the same key in a given object store.

- -

A key can be one of the following types: string, date, float, a binary blob, and array. For arrays, the key can range from an empty value to infinity. And you can include an array within an array.

- -

Alternatively, you can also look up records in an object store using the index.

-
-
key generator
-
A mechanism for producing new keys in an ordered sequence. If an object store does not have a key generator, then the application must provide keys for records being stored. Generators are not shared between stores. This is more a browser implementation detail, because in web development, you don't really create or access key generators.
-
in-line key
-
A key that is stored as part of the stored value. It is found using a key path. An in-line key can be generated using a generator. After the key has been generated, it can then be stored in the value using the key path or it can also be used as a key.
-
out-of-line key
-
A key that is stored separately from the value being stored.
-
key path
-
Defines where the browser should extract the key from in the object store or index. A valid key path can include one of the following: an empty string, a JavaScript identifier, or multiple JavaScript identifiers separated by periods or an array containing any of those. It cannot include spaces.
-
value
-
-

Each record has a value, which could include anything that can be expressed in JavaScript, including boolean, number, string, date, object, array, regexp, undefined, and null.

- -

When an object or array is stored, the properties and values in that object or array can also be anything that is a valid value.

- -

Blobs and files can be stored, cf. specification.

-
-
- -

Intervalo e escopo

- -
-
scope
-
The set of object stores and indexes to which a transaction applies. The scopes of read-only transactions can overlap and execute at the same time. On the other hand, the scopes of writing transactions cannot overlap. You can still start several transactions with the same scope at the same time, but they just queue up and execute one after another.
-
cursor
-
A mechanism for iterating over multiple records with a key range. The cursor has a source that indicates which index or object store it is iterating. It has a position within the range, and moves in a direction that is increasing or decreasing in the order of record keys. For the reference documentation on cursors, see IDBCursor or IDBCursorSync.
-
key range
-
-

A continuous interval over some data type used for keys. Records can be retrieved from object stores and indexes using keys or a range of keys. You can limit or filter the range using lower and upper bounds. For example, you can iterate over all values of a key between x and y.

- -

For the reference documentation on key range, see IDBKeyRange.

-
-
- -

Limitações

- -

IndexedDB is designed to cover most cases that need client-side storage. However, it is not designed for a few cases like the following:

- - - -

In addition, be aware that browsers can wipe out the database, such as in the following conditions:

- - - -

The exact circumstances and browser capabilities change over time, but the general philosophy of the browser vendors is to make the best effort to keep the data when possible.

- -

Próximos passos

- -

With these big concepts under our belts, we can get to more concrete stuff. For a tutorial on how to use the API, see Using IndexedDB.

- -

See also

- -

Especificação

- - - -

Referência

- - - -

Tutoriais

- - - -

Artigo relacionado

- - diff --git "a/files/pt-br/orphaned/web/api/node/entendendo_o_uso_do_m\303\251todo_appendchild-javascript/index.html" "b/files/pt-br/orphaned/web/api/node/entendendo_o_uso_do_m\303\251todo_appendchild-javascript/index.html" deleted file mode 100644 index a068a36455..0000000000 --- "a/files/pt-br/orphaned/web/api/node/entendendo_o_uso_do_m\303\251todo_appendchild-javascript/index.html" +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: Entendendo o uso do método appendChild em javascript -slug: orphaned/Web/API/Node/Entendendo_o_uso_do_método_AppendChild-javascript -original_slug: Web/API/Node/Entendendo_o_uso_do_método_AppendChild-javascript ---- -
{{ApiRef("DOM")}}
- -

Resumo

- -

Adiciona um nó ao final da lista de filhos de um nó pai especificado. Se o nó já existir no documento, ele é removido de seu nó pai atual antes de ser adicionado ao novo pai.

- -

Sintaxe

- -
var filho = elemento.appendChild(filho);
- - - -

Descrição

- -

O método appendChild devolve uma referência ao nó adicionado.

- -

Exemplo

- -
// Cria um novo elemento de parágrafo e adiciona-o ao final do documento
-var p = document.createElement("p");
-document.body.appendChild(p);
- -

Notas

- -

Se filho é uma referência a um nó existente no documento, appendChild vai movê-lo de sua posição atual para a nova posição (i.e, não é necessário remover o nó de seu pai atual antes de adicioná-lo a outro nó).

- -

Isso também significa que um nó não pode estar em dois lugares do documento ao mesmo tempo. Assim, se o nó já tem um pai, ele é primeiro removido para, só então, ser adicionado na nova posição.

- -

Você pode usar o método {{domxref("Node.cloneNode")}} para criar uma cópia do nó antes de adicioná-lo ao novo pai. (Note que cópias feitas com o método cloneNode não serão mantidas sincronizadas automaticamente)

- -

Este método não permite mover nós entre documentos diferentes. Se você quiser adicionar um nó de um documento diferente (por exemplo para mostrar o resultado de uma requisição AJAX), você precisa primeiro usar o método {{domxref("document.importNode")}}.

- -

appendChild() é um dos métodos fundamentais da programação para a web usando o DOM. O método appendChild() insere um novo nó na estrutura do DOM de um documento, e é a segunda parte do processo criar-e-adicionar tão importante na construção de páginas web programaticamente.

- -

Especificação

- - - -

Ver também

- - diff --git a/files/pt-br/orphaned/web/api/parentnode/children/index.html b/files/pt-br/orphaned/web/api/parentnode/children/index.html deleted file mode 100644 index 64c0f40d68..0000000000 --- a/files/pt-br/orphaned/web/api/parentnode/children/index.html +++ /dev/null @@ -1,132 +0,0 @@ ---- -title: ParentNode.children -slug: orphaned/Web/API/ParentNode/children -translation_of: Web/API/ParentNode/children -original_slug: Web/API/ParentNode/children ---- -

{{ APIRef("DOM") }}

- -

Node.children é uma propriedade exclusivamente de leitura que retorna uma coleção {{domxref("HTMLCollection")}} dos elementos filhos do nó.

- -

Sintaxe

- -
var elList = elementNodeReference.children;
- -

elList é uma {{ domxref("HTMLCollection") }}, que é uma lista ordenada de uma coleção de elementos do DOM que são filhos do elementNodeReference. Se não existir nenhum elemento filho, o elList não terá elemento algum sua propriedade length será 0.

- -

Exemplo

- -
// pEl é uma referência à um elemento <p>
-var elementChildren = pEl.children;
-for (var i = 0; i < elementChildren.length; i++) {
-    console.log(elementChildren[i].tagName);
-    // NOTE: elementChildren é uma lista viva, adicionar ou remover filhos de pEl
-    // mudará instantaneamente o valor retornado por elementChildren
-}
-
- -

Especificação

- - - - - - - - - - - - - - -
EspecificaçãoStatusComment
{{SpecName('DOM WHATWG', '#dom-parentnode-children', 'ParentNode.children')}}{{Spec2('DOM WHATWG')}}Definição inicial.
- -

Compatibilidade de navegadores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerEdgeOperaSafari
Basic support (on {{domxref("Element")}})1.0{{CompatGeckoDesktop("1.9.1")}}9.0 [1]38.010.04.0
Support on {{domxref("Document")}} and {{domxref("DocumentFragment")}} {{experimental_inline}}29.0{{CompatGeckoDesktop("25.0")}}{{CompatNo}}{{CompatNo}}16.0{{CompatNo}}
Support on {{domxref("SVGElement")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support (on {{domxref("Element")}}){{ CompatVersionUnknown() }}{{CompatGeckoMobile("1.9.1")}}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Support on {{domxref("Document")}} and {{domxref("DocumentFragment")}} {{experimental_inline}}{{CompatVersionUnknown}}{{CompatGeckoMobile("25.0")}}{{CompatNo}}16.0{{CompatNo}}
-
- -

[1] Internet Explorer 6, 7 e 8 suportaram esse método, mas erroneamente incluiam nós de {{domxref("Comment")}}.

- -

See also

- - diff --git a/files/pt-br/orphaned/web/api/parentnode/index.html b/files/pt-br/orphaned/web/api/parentnode/index.html deleted file mode 100644 index fd327f7adf..0000000000 --- a/files/pt-br/orphaned/web/api/parentnode/index.html +++ /dev/null @@ -1,164 +0,0 @@ ---- -title: ParentNode -slug: orphaned/Web/API/ParentNode -tags: - - API - - DOM - - NeedsTranslation - - TopicStub -translation_of: Web/API/ParentNode -original_slug: Web/API/ParentNode ---- -
{{APIRef("DOM")}}
- -

The ParentNode interface contains methods that are particular to {{domxref("Node")}} objects that can have children.

- -

ParentNode is a raw interface and no object of this type can be created; it is implemented by {{domxref("Element")}}, {{domxref("Document")}}, and {{domxref("DocumentFragment")}} objects.

- -

Properties

- -
-
{{ domxref("ParentNode.children") }} {{experimental_inline}} {{readonlyInline}}
-
Returns a live {{domxref("HTMLCollection")}} containing all objects of type {{domxref("Element")}} that are children of this ParentNode.
-
{{ domxref("ParentNode.firstElementChild") }} {{experimental_inline}} {{readonlyInline}}
-
Returns the {{domxref("Element")}} that is the first child of this ParentNode, or null if there is none.
-
{{ domxref("ParentNode.lastElementChild") }} {{experimental_inline}} {{readonlyInline}}
-
Returns the {{domxref("Element")}} that is the last child of this ParentNode, or null if there is none.
-
{{ domxref("ParentNode.childElementCount") }} {{experimental_inline}} {{readonlyInline}}
-
Returns an unsigned long giving the amount of children that the object has.
-
- -

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

Specification

- - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-parentnode-firstelementchild', 'ParentNode.firstElementChild')}}{{Spec2('DOM WHATWG')}}Splitted the ElementTraversal interface in {{domxref("ChildNode")}} and ParentNode. The firstElementChild, lastElementChild, and childElementCount properties are now defined on the latter.
- The {{domxref("Document")}} and {{domxref("DocumentFragment")}} implemented the new interfaces.
- Added the children property.
- Added the append() and prepend() methods.
{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}{{Spec2('Element Traversal')}}Added the initial definition of its properties to the ElementTraversal pure interface and use it on {{domxref("Element")}}.
- -

Browser compatibility

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support (on {{domxref("Element")}}){{CompatChrome(1.0)}}{{CompatGeckoDesktop("1.9.1")}}9.0 [1]10.04.0
Support on {{domxref("Document")}} and {{domxref("DocumentFragment")}} {{experimental_inline}}{{CompatChrome(29.0)}}{{CompatGeckoDesktop(25)}}{{CompatNo}}16.0{{CompatNo}}
append() and prepend() {{experimental_inline}}{{CompatChrome(54.0)}}{{CompatGeckoDesktop(49)}}{{CompatVersionUnknown}}{{CompatOpera(39)}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Mobile
Basic support (on {{domxref("Element")}}){{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.9.1")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Support on {{domxref("Document")}} and {{domxref("DocumentFragment")}} {{experimental_inline}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(25)}}{{CompatNo}}16.0{{CompatNo}}{{CompatVersionUnknown}}
append() and prepend() {{experimental_inline}}{{CompatNo}}{{CompatChrome(54.0)}}{{CompatGeckoMobile(49)}}{{CompatNo}}{{CompatOperaMobile(39)}}{{CompatNo}}{{CompatChrome(54.0)}}
-
- -

[1] Internet Explorer 6, 7 and 8 supported it, but erroneously returns {{domxref("Comment")}} nodes as part of the results.

- -

See also

- - diff --git a/files/pt-br/orphaned/web/api/parentnode/queryselector/index.html b/files/pt-br/orphaned/web/api/parentnode/queryselector/index.html deleted file mode 100644 index db43662895..0000000000 --- a/files/pt-br/orphaned/web/api/parentnode/queryselector/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: ParentNode.querySelector() -slug: orphaned/Web/API/ParentNode/querySelector -tags: - - PrecisaDeExemplo - - Projeto - - Referencia - - Seletores - - metodo -translation_of: Web/API/ParentNode/querySelector -original_slug: Web/API/ParentNode/querySelector ---- -

{{APIRef("DOM")}}{{Draft}}

- -

O {{DOMxRef("ParentNode")}} mixin define o querySelector() método como retornar um {{DOMxRef("Element")}} representando o primeiro elemento que corresponde ao grupo especificado de seletores que são descendentes do objeto no qual o método foi chamado.

- -

Se você precisar de todos os elementos correspondentes à lista de seletores, use{{DOMxRef("ParentNode.querySelectorAll", "querySelectorAll()")}} instead.

- -
-

Nota: Este método é implementado como {{DOMxRef("Document.querySelector()")}}, {{DOMxRef("DocumentFragment.querySelector()")}} e {{DOMxRef("Element.querySelector()")}}.

-
- -

Sintaxe

- -
element = parentNode.querySelector(selectors);
-
- -

Parâmetros

- -
-
selectors
-
Um {{DOMxRef("DOMString")}} contendo um ou mais seletores para comparar. Essa sequência deve ser um válido lista de seletores compostos suportado pelo navegador; se não for, um SyntaxError exceção é lançada. Veja Localizando elementos DOM usando seletores para obter mais informações sobre o uso de seletores para identificar elementos. Vários seletores podem ser especificados, separando-os usando vírgulas.
-
- -
-

Nota: Os caracteres que não fazem parte da sintaxe CSS padrão devem ser escapados usando um caractere de barra invertida. Como o JavaScript também usa escape de backspace, deve-se tomar cuidado especial ao escrever literais de string usando esses caracteres. Veja {{anch("Escaping special characters")}} Para maiores informações.

-
- -

Valor de retorno

- -

O primeiro {{DOMxRef("Element")}} que corresponda a pelo menos um dos seletores ou null se esse elemento não for encontrado.

- -
-

Nota: Se o especificado selectors inclua um CSS pseudo-elemento, o valor retornado é sempre null.

-
- -

Exceções

- -
-
SyntaxError
-
A sintaxe do especificado selectors string não é válida.
-
- -

Especificações

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{SpecName("DOM WHATWG", "#dom-parentnode-queryselector", "ParentNode.querySelector()")}}{{Spec2("DOM WHATWG")}}Padrão de vida
{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselector", "ParentNode.querySelector()")}}{{Spec2("Selectors API Level 2")}}Sem alteração
{{SpecName("DOM4", "#dom-parentnode-queryselector", "ParentNode.querySelector()")}}{{Spec2("DOM4")}}Definição inicial
{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}{{Spec2("Selectors API Level 1")}}Definição original
- -

Compatibilidade com navegadores

- -

{{Compat("api.ParentNode.querySelector")}}

- -

Veja também

- - diff --git a/files/pt-br/orphaned/web/api/window/ondevicelight/index.html b/files/pt-br/orphaned/web/api/window/ondevicelight/index.html deleted file mode 100644 index 6e8733e6cb..0000000000 --- a/files/pt-br/orphaned/web/api/window/ondevicelight/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: Window.ondevicelight -slug: orphaned/Web/API/Window/ondevicelight -translation_of: Web/API/Window/ondevicelight -original_slug: Web/API/Window/ondevicelight ---- -
{{APIRef}}
- -

Especifica um event listener para receber eventos {{event("devicelight")}}. Esses eventos ocorrem quando um dispositivo com sensores de nível de luz detecta uma mudança na intensidade do nível de luz do ambiente.

- -

Sintaxe

- -
window.ondevicelight = funcRef
- -

Onde funcRef é a função a ser chamada quando o evento {{event("devicelight")}} ocorre. Estes eventos são do tipo {{domxref("DeviceLightEvent")}}.

- -

Especificações

- - - - - - - - - - - - - - - - -
SpecificaçãoStatusComment
{{SpecName('AmbientLight', '#event-handlers', 'Ambient Light Events')}}{{Spec2('AmbientLight')}}Initial definition
- -

Compatibilidade com os Navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatNo}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("22.0")}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatGeckoMobile("15.0")}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

[1] The {{event("devicelight")}} event is implemented and by preference enabled by default in Firefox Mobile for Android (15.0) and in Firefox OS (B2G). Starting with Gecko 22.0 {{geckoRelease("22.0")}}, a desktop implementation for Mac OS X is also available. Support for Windows 7 is in progress (see {{bug(754199)}}).

- -

Veja também

- - diff --git a/files/pt-br/orphaned/web/css/image-set()/index.html b/files/pt-br/orphaned/web/css/image-set()/index.html deleted file mode 100644 index b85425c4f1..0000000000 --- a/files/pt-br/orphaned/web/css/image-set()/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: image-set() -slug: orphaned/Web/CSS/image-set() -translation_of: Web/CSS/image-set() -original_slug: Web/CSS/image-set() ---- -
{{cssref}}
- -

A notação de função CSS image-set() é um método de deixar o navegador escolher a imagem CSS mais apropriada de um dado conjunto, principalmente para telas de alta densidade de pixels.

- -

Resolução e largura de banda diferem por dispositivo e acesso à rede. A função image-set() oferece a resolução de imagem mais apropriada para o dispositivo de um usuário, fornecendo um conjunto de opções de imagem — cada uma com uma declaração de resolução associada — da qual o navegador escolhe o mais apropriado para o dispositivo e as configurações. A resolução pode ser usada como um proxy para o tamanho do arquivo — um agente de usuário em uma conexão móvel lenta, com uma tela de alta resolução, pode preferir receber imagens de baixa resolução em vez de aguardar uma imagem de alta resolução carregar.

- -

image-set() permite que o autor forneça opções em vez de determinar o que cada usuário individual precisa.

- -

Sintaxe

- -
image-set() = image-set( <image-set-option># )
-where <image-set-option> = [ <image> | <string> ] <resolution> and
-      <string> is an <url>
-
- -

Valores

- -

Mais comumente, você verá um valor de  url() <string>, mas o <image> pode ser qualquer tipo de imagem, exceto para um conjunto de imagens. A função image-set() não pode ser aninhada dentro de outra função image-set().

- -

unidades <resolution> incluem x ou ddpx, para pontos por unidade de pixel, dpi, para pontos por polegada, e dpcm para pontos per centímetro. Toda imagem dentro de image-set() deve ter uma única resolução.

- -

Exemplos

- -
background-image: image-set( "cat.png" 1x,
-                             "cat-2x.png" 2x);
- -

Este exemplo mostra como usar image-set() para fornecer duas opções alternativas {{cssxref("background-image")}}, escolhidas dependendo da resolução necessária: uma versão normal e uma versão de alta-resolução.

- -

Preocupações de Acessibilidade

- -

Tecnologia assistiva não pode analisar imagens de fundo. Se a imagem contiver informações críticas para entender a finalidade geral da página, é melhor descrevê-la semanticamente no documento.

- - - -

Especificações

- - - - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{SpecName('CSS4 Images', '#image-set-notation', 'The image-set() notation')}}{{Spec2('CSS4 Images')}} 
- -

Compatibilidade com navegadores

- -

{{Compat("css.types.image.image-set")}}

- -

Veja também

- - diff --git a/files/pt-br/orphaned/web/css/radial-gradient()/index.html b/files/pt-br/orphaned/web/css/radial-gradient()/index.html deleted file mode 100644 index 094be5d107..0000000000 --- a/files/pt-br/orphaned/web/css/radial-gradient()/index.html +++ /dev/null @@ -1,210 +0,0 @@ ---- -title: radial-gradient() -slug: orphaned/Web/CSS/radial-gradient() -translation_of: Web/CSS/radial-gradient() -original_slug: Web/CSS/radial-gradient() ---- -

{{ CSSRef() }}

- -

Resumo

- -

A função do CSS radial-gradient() cria uma {{cssxref("<image>")}} que representa um gradiente de cores irradiando de uma origem, o centro do gradiente. O resultado dessa função é um objeto do CSS do tipo {{cssxref("<gradient>")}}.

- -

Gradientes radiais são definidos pelo seu centro, o contorno e a posição da forma de fechamento (ending shape) e as paradas de cor (color stops). O gradiente radial consiste de formas concêntricas uniformemente escaladas partindo do centro até sua forma de fechamento, indo potencialmente além, com a mesma forma da forma de fechamento. As paradas de cor são posicionadas num raio de gradiente virtual saindo do centro horizontalmente para a direita. O posicionamento das porcentagens das paradas de cor são relativas à interseção entre a forma de fechamento e esse raio de gradiente representando 100%. Cada forma é monocromática e a cor, definida pela cor no raio de gradiente que intersecta.

- -

Formas de fechamento podem ser apenas círculo (circle) ou elipse (ellipse).

- -

Como qualquer outro gradiente, um gradiente radial do CSS não é uma <cor> do CSS, mas uma imagem sem dimensões intrínsecas, i. e. uma imagem sem tamanho natural ou preferencial, tampouco proporção. Seu tamanho concreto será idêntico ao tamanho do elemento ao qual for aplicado.

- -

A função radial-gradient não permite criar gradientes repetitivos. Para esse efeito, use a função do CSS {{ Cssxref("repeating-radial-gradient") }}.

- -

Sintaxe

- -
Gramática formal: radial-gradient( [ circle || <length> ] [ at <position> ]? ,
-| [ ellipse || [<length> | <percentage> ]{2}] [ at <position> ]? ,
-| [ [ circle | ellipse ] || <extent-keyword> ] [ at <position> ]? ,
-| at <position> ,
-<color-stop> [ , <color-stop> ]+ )
-
- -

Valores

- -
-
<position>
-
Uma {{cssxref("<position>")}}, interpretada da mesma forma que {{Cssxref("background-position")}} ou {{Cssxref("transform-origin")}}. Se omitida, assume o padrão center.
-
<shape>
-
A forma do gradiente. Esse valor é circle (indicando que a forma do gradiente é um círculo com raio constante) ou ellipse (indicando que a forma é uma elipse com os eixos alinhados ao elemento). O valor padrão é ellipse.
-
<size>
-
O tamanho do gradiente. Essa valor é uma das {{anch("Restrições de tamanho")}} listada abaixo.
-
<color-stop>
-
Representando uma cor fixa num determinado ponto, esse valor é composto por um valor {{cssxref("<color>")}}, seguido de uma posição de parada opcional (uma {{cssxref("<percentage>")}} ou uma {{cssxref("<length>")}} referente ao raio de gradiente virtual). Uma porcentagem de 0%, ou um tamanho de 0 representa o centro do gradiente e o valor 100% a interseção da forma de fechamento com o raio de gradiente virtual. Valores de porcentagem intermediários são posicionados linearmente no raio de gradiente.
-
<extent-keyword>
-
Palavras-chave descrevendo quão grande a forma de fechamento deve ser. Os possíveis valores são:
-
- - - - - - - - - - - - - - - - - - - - - - - -
ConstanteDescrição
closest-sideA forma de fechamento do gradiente encontra o lado do elemento mais próximo ao seu centro (para círculos) ou encontra ambos os lados vertical e horizontal mais próximos ao centro (para elipses).
closest-cornerA forma de fechamento do gradiente tem o tamanho exato para encontrar o canto da caixa mais próximo ao seu centro.
farthest-sideSimilar ao closest-side, mas a forma de fechamento fica com o tamanho necessário para encontrar o lado do elemento mais distante do centro do gradiente (ou lados vertical e horizontal).
farthest-cornerA forma de fechamento do gradiente tem o tamanho exato para encontrar o canto da caixa mais distante de seu centro.
- Rascunhos preliminares incluiam outras palavras-chave (cover e contain) como sinônimos dos valores do padrão farthest-corner e closest-side respectivamente. Use somente os valores do padrão, uma vez que algumas implementações podem já ter removido suporte a esses valores mais antigos.
-
- -

Exemplos

- -
ellipse farthest-corner
- -
background-image: radial-gradient(ellipse farthest-corner at 45px 45px , #00FFFF 0%, rgba(0, 0, 255, 0) 50%, #0000FF 95%);
-
- -
470px 47px
- -
background-image: radial-gradient(ellipse farthest-corner at 470px 47px , #FFFF80 20%, rgba(204, 153, 153, 0.4) 30%, #E6E6FF 60%);
-
- -
farthest-corner
- -
background-image: radial-gradient(farthest-corner at 45px 45px , #FF0000 0%, #0000FF 100%);
- -
16px radius fuzzy circle
- -
background-image: radial-gradient(16px at 60px 50% , #000000 0%, #000000 14px, rgba(0, 0, 0, 0.3) 18px, rgba(0, 0, 0, 0) 19px);
-
- -

Especificações

- - - - - - - - - - - - - - - - -
EspecificaçãoStatusComentários
{{ SpecName('CSS3 Images', '#radial-gradients', 'radial-gradients()') }}{{ Spec2('CSS3 Images') }} 
- -

Compatibilidade de navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FuncionalidadeFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Suporte básico (suporte à função radial-gradient(), mas não necessariamente com a sintaxe final){{ CompatGeckoDesktop("1.9.2") }}{{ property_prefix("-moz") }} [3]
- {{ CompatGeckoDesktop("16") }}		10.0 (534.16){{ property_prefix("-webkit") }} [2][3]10.0 [1]11.60{{ property_prefix("-o") }}5.1{{ property_prefix("-webkit") }}[2]
Sintaxe legada do webkit {{ non-standard_inline() }}{{ CompatNo() }}3{{ property_prefix("-webkit") }} [2]{{ CompatNo() }}{{ CompatNo() }}4.0{{ property_prefix("-webkit") }} [2]
Sintaxe at (sintaxe do padrão final){{ CompatGeckoDesktop("10") }}{{ property_prefix("-moz") }} [3]
- {{ CompatGeckoDesktop("16") }}		{{ CompatNo() }}10.011.60{{ property_prefix("-o") }} [3]
- Presto 2.12 will remove the prefix.		{{ CompatNo() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FuncionalidadeAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suporte básico (suporte à função radial-gradient(), mas não necessariamente com a sintaxe final){{CompatVersionUnknown}}{{ CompatGeckoMobile("1.9.2") }}{{ property_prefix("-moz") }} [3]
- {{ CompatGeckoMobile("16") }}		{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Sintaxe legada do webkit {{ non-standard_inline() }}{{CompatUnknown}}{{ CompatNo() }}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Sintaxe at (sintaxe do padrão final){{CompatUnknown}}{{ CompatGeckoMobile("10") }}{{ property_prefix("-moz") }} [3]
- {{ CompatGeckoMobile("16") }}		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

[1] Internet Explorer 5.5 a 9.0 suportam a funcionalidade proprietária filter: progid:DXImageTransform.Microsoft.Gradient() filter.

- -

[2] WebKit desde 528 suporta a função legada -webkit-gradient(radial,…). Veja também o suporte atual para gradientes radiais.

- -

[3] Firefox 3.6 e Webkit implementaram uma sintaxe anterior, prefixada.

- -

Veja também

- - diff --git a/files/pt-br/orphaned/web/css/repeating-linear-gradient()/index.html b/files/pt-br/orphaned/web/css/repeating-linear-gradient()/index.html deleted file mode 100644 index 259e9fe941..0000000000 --- a/files/pt-br/orphaned/web/css/repeating-linear-gradient()/index.html +++ /dev/null @@ -1,154 +0,0 @@ ---- -title: repeating-linear-gradient -slug: orphaned/Web/CSS/repeating-linear-gradient() -translation_of: Web/CSS/repeating-linear-gradient() -original_slug: Web/CSS/repeating-linear-gradient() ---- -

{{ CSSRef() }}

- -

Summary

- -

A função CSS repeating-linear-gradient cria uma {{cssxref("<image>")}} de repetidos gradientes. Isso funciona da mesma forma, e recebe os mesmos argumentos dos gradientes lineares básicos, como descrito em {{ cssxref("linear-gradient") }}, mas ele automaticamente repete as paradas das cores infinitamente em ambas as direções, com suas posições trocadas por múltiplos da diferença entre a posição da última parada de cor e a posição da primeira.

- -

The consequence is that an end color of a gradient always coincide with a start color. If both are not identical, this will result in a sharp transition.

- -

Like any other gradient, a repeating CSS linear gradient is not a CSS <color> but an image with no intrinsic dimensions; that is, it has no natural or preferred size, nor ratio. Its concrete size will match the one of the element it applies to.

- -

Mozilla currently only supports CSS gradients as values of the {{ Cssxref("background-image") }} property, as well as within the shorthand {{ Cssxref("background") }}. You specify a gradient value instead of an image URL.

- -

Syntax

- -
Formal grammar: repeating-linear-gradient(  [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
-                                            \---------------------------------/ \----------------------------/
-                                              Definition of the gradient line         List of color stops
-
-                              where <side-or-corner> = [left | right] || [top | bottom]
-                                and <color-stop>     = <color> [ <percentage> | <length> ]?
-
- -
repeating-linear-gradient( 45deg, blue, red );           /* A repeating gradient on 45deg axe starting blue and finishing red */
-repeating-linear-gradient( to left top, blue, red);      /* A repeating gradient going from the bottom right to the top left
-                                                            starting blue and finishing red */
-
-repeating-linear-gradient( 0deg, blue, green 40%, red ); /* A repeating gradient going from the bottom to top, starting blue,
-                                                            being green after 40% and finishing red */
-
- -

Values

- -
-
<side-or-corner>
-
Represents the position of the starting-point of the gradient line. It consists of two keywords: the first one indicates the horizontal side, left or right, and the second one the vertical side, top or bottom. The order is not relevant and each of the keyword is optional.
- The values to top, to bottom, to left and to right are translated into the angles 0deg, 180deg, 270deg, 90deg respectively. The others are translated into an angle that let the starting-point to be in the same quadrant than the described corner and so that the line defined by the starting-point and the corner is perpendicular to the gradient line. That way, the color described by the <color-stop> will exactly apply to the corner point. This is sometimes called the "magic corner" property. The end-point of the gradient line is the symmetrical point of the starting-point on the other direction of the center box.
-
<angle>
-
An angle of direction for the gradient. See {{ cssxref("<angle>") }}.
-
<color-stop>
-
This value is comprised of a {{cssxref("<color>")}} value, followed by an optional stop position (either a percentage between 0% and 100% or a {{cssxref("<length>")}} along the gradient axis).
- Rendering of color-stops in CSS gradients follows the same rules as color-stops in SVG gradients.
-
- -

Examples

- -
background: repeating-linear-gradient(to bottom right, red, red 5px, white 5px, white 10px);
-
- -

Specifications

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{ SpecName('CSS3 Images', '#repeating-gradients', 'repeating-linear-gradient()') }}{{ Spec2('CSS3 Images') }} 
- -

Browser compatibility

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support (on {{ cssxref("background") }} and {{ cssxref("background-image") }}){{ CompatGeckoDesktop("1.9.2") }}{{ property_prefix("-moz") }}[3]
- {{ CompatGeckoDesktop("16") }}		10.0 (534.16){{ property_prefix("-webkit") }} [2][3]10.0 [1]11.10{{ property_prefix("-o") }} [3]5.1{{ property_prefix("-webkit") }}[2][3]
On any properties that accept {{cssxref("<image>")}}{{ CompatNo() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}
Legacy webkit syntax{{ non-standard_inline() }}{{ CompatNo() }}3{{ property_prefix("-webkit") }} [2]{{ CompatNo() }}{{ CompatNo() }}4.0{{ property_prefix("-webkit") }}[2]
Legacy from syntax (without to){{ non-standard_inline() }}{{ CompatGeckoDesktop("1.9.2") }}{{ property_prefix("-moz") }} [4]
- Removed in {{ CompatGeckoDesktop("16") }}		10.0 (534.16){{ property_prefix("-webkit") }} [2]10.011.10{{ property_prefix("-o") }}[4]5.1{{ property_prefix("-webkit") }}[2]
to syntax{{ CompatGeckoDesktop("10") }}{{ property_prefix("-moz") }}[4]
- {{ CompatGeckoDesktop("16") }}		{{ CompatNo() }}10.011.60{{ property_prefix("-o") }}[4]
- Presto 2.12 will remove the prefix.		{{ CompatNo() }}
- -

[1] Internet Explorer 5.5 through 9.0 supports proprietary filter: progid:DXImageTransform.Microsoft.Gradient() filter.

- -

[2] WebKit since 528 supports the legacy -webkit-gradient(linear,…) function. As of WebKit 534.16, it also supports the standard gradient syntax. Unlike in Gecko, in legacy WebKit you cannot specify both a position and angle in -webkit-linear-gradient(). You can achieve the same effect by offsetting the color stops.

- -

[3] Gecko, Opera & Webkit considers {{cssxref("<angle>")}} to start to the right, instead of the top. I.e. it considered an angle of to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right. This is different from the latest specification where an angle of 0deg as a direction indicator points to the top.

- -

[4] Firefox 3.6 and Opera 11.10 implemented, prefixed, an early syntax where the starting corner or side was indicated without the to keyword, and effectively considered as a from position. The to syntax has been added in Firefox 10 and Opera 11.60 , at first without removing the deprecated syntax and translation between the two is trivial:

- -
-moz-repeating-linear-gradient(to top left, blue, red);
- -

is the same as:

- -
-moz-repeating-linear-gradient(bottom right, blue, red);
- -

The legacy syntax, without to, is planned to go away when the prefix is removed.

- -

See also

- - diff --git "a/files/pt-br/orphaned/web/guide/css/css_media_queries_(consultas_de_m\303\255dia_em_css)/index.html" "b/files/pt-br/orphaned/web/guide/css/css_media_queries_(consultas_de_m\303\255dia_em_css)/index.html" deleted file mode 100644 index ac24931ebe..0000000000 --- "a/files/pt-br/orphaned/web/guide/css/css_media_queries_(consultas_de_m\303\255dia_em_css)/index.html" +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Usando CSS media queries (consultas de mídia em CSS) -slug: orphaned/Web/Guide/CSS/CSS_media_queries_(consultas_de_mídia_em_CSS) -tags: - - CSS - - Guía - - Iniciante - - media query -original_slug: Web/Guide/CSS/CSS_media_queries_(consultas_de_mídia_em_CSS) ---- -

Uma media query (consulta de mídia) consiste de um tipo de mídia e de, ao menos, uma expressão que restringe o escopo dos estilos CSS pelo uso de propriedades de mídia, como width (largura), height (altura) e color (cor). Media queries, incluídas na especificação CSS3, permitem que a apresentação do conteúdo se adapte a uma variedade de dispositivos de exibição sem a necessidade de mudar o próprio conteúdo.

- -

Sintaxe

- -

Consultas de mídia consistem em tipos de mídia opcional e podem, de acordo com a especificação CSS3, conter entre nenhuma ou mais expressões, declararadas como propriedades de mídia, que podem conter condições de estado verdadeiras ou falsas. O resultado de uma query (consulta) será verdadeiro se o tipo de mídia especificado nela corresponder ao tipo do dispositivo onde o documento é exibido e todas as expressões contidas na consulta forem verdadeiras.

- -

Fonte:

- -

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

- -

 

diff --git a/files/pt-br/orphaned/web/guide/events/creating_and_triggering_events/index.html b/files/pt-br/orphaned/web/guide/events/creating_and_triggering_events/index.html deleted file mode 100644 index ec531e58e0..0000000000 --- a/files/pt-br/orphaned/web/guide/events/creating_and_triggering_events/index.html +++ /dev/null @@ -1,146 +0,0 @@ ---- -title: Criando e disparando eventos -slug: orphaned/Web/Guide/Events/Creating_and_triggering_events -tags: - - Avançado - - DOM - - Guía - - JavaScript - - eventos -translation_of: Web/Guide/Events/Creating_and_triggering_events -original_slug: Web/Guide/Events/Creating_and_triggering_events ---- -

Este artigo demonstra como criar e disparar eventos DOM. Tais eventos são comumente chamados eventos sintéticos, oposto aos eventos disparados pelo próprio navegador.

- -

Criando eventos customizados

- -

Eventos podem ser criados com o construtor Event da seguinte forma:

- -
var event = new Event('build');
-
-// Ouve pelo evento.
-elem.addEventListener('build', function (e) { ... }, false);
-
-// Dispara o evento.
-elem.dispatchEvent(event);
- -

Este construtor é suportado na maioria dos navegadores modernos (com o Internet Explorer sendo exceção). Para uma abordagem mais verbosa (a qual é suportada pelo Internet Explorer), veja a forma antiga abaixo.

- -

Adicionando dados customizados – CustomEvent()

- -

Para adicionar mais dados ao objeto do evento, usa-se a interface CustomEvent, a qual possui a propriedade detail que pode ser utilizada para fornecer dados customizados.

- -

Por exemplo, o evento pode ser criado da seguinte forma:

- -
var event = new CustomEvent('build', { 'detail': elem.dataset.time });
- -

Isso permitirá que você acesse dados customizados no listener do evento:

- -
function eventHandler(e) {
-  console.log('The time is: ' + e.detail);
-}
-
- -

A forma antiga

- -

A forma antiga de criar eventos possui uma abordagem mais verbosa, tendo APIs inspiradas em Java. Abaixo temos um exemplo:

- -
// Cria o evento.
-var event = document.createEvent('Event');
-
-// Define que o nome do evento é 'build'.
-event.initEvent('build', true, true);
-
-// Ouve pelo evento.
-elem.addEventListener('build', function (e) {
-  // e.target é igual a elem, neste caso
-}, false);
-
-// O alvo do evento pode ser qualquer instância de Element ou EventTarget.
-elem.dispatchEvent(event);
-
-
- -

Disparando eventos nativos

- -

Este exemplo mostra a simulação de um clique (isto é, gera um um clique de forma programatica) sobre um checkbox usando métodos DOM. Veja o exemplo em ação.

- -
function simulateClick() {
-  var event = new MouseEvent('click', {
-    'view': window,
-    'bubbles': true,
-    'cancelable': true
-  });
-
-  var cb = document.getElementById('checkbox');
-  var cancelled = !cb.dispatchEvent(event);
-
-  if (cancelled) {
-    // Um listener invocou o método preventDefault.
-    alert("Cancelado");
-  } else {
-    // Nenhum listener invocou o método preventDefault.
-    alert("Não cancelado");
-  }
-}
- -

Compatibilidade com navegadores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)EdgeInternet ExplorerOperaSafari (WebKit)
construtor Event()1511{{CompatVersionUnknown}}1111.606
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}6
-
- -

Veja também

- - diff --git a/files/pt-br/orphaned/web/guide/events/event_handlers/index.html b/files/pt-br/orphaned/web/guide/events/event_handlers/index.html deleted file mode 100644 index 34fdcb15f8..0000000000 --- a/files/pt-br/orphaned/web/guide/events/event_handlers/index.html +++ /dev/null @@ -1,165 +0,0 @@ ---- -title: DOM onevent handlers -slug: orphaned/Web/Guide/Events/Event_handlers -translation_of: Web/Guide/Events/Event_handlers -original_slug: Web/Guide/Events/Event_handlers ---- -

A plataforma web oferece várias maneiras de trabalhar com o DOM events. Duas abordagens comuns são: {{domxref("EventTarget.addEventListener", "addEventListener()")}} e o específico onevent que dispara um evento. Este artigo se concentra em como o último funciona.

- -

Registering onevent handlers

- -

The onevent handlers are properties on certain DOM elements to manage how that element reacts to events. Elements can be interactive (links, buttons, images, forms, and so forth) or non-interactive (such as the base <body> element). Events are actions like:

- - - -

The on-event handler is usually named with the event it reacts to, like onclick, onkeypress, onfocus, etc.

- -

You can specify an on<…> event handler for a particular event (such as {{event("click")}}) for a given object in different ways:

- - - -

An onevent event handler property serves as a placeholder of sorts, to which a single event handler can be assigned. In order to allow multiple handlers to be installed for the same event on a given object, you can call its {{domxref("EventTarget.addEventListener", "addEventListener()")}} method, which manages a list of handlers for the given event on the object. A handler can then be removed from the object by calling its {{domxref("EventTarget.removeEventListener", "removeEventListener()")}} function.

- -

When an event occurs that applies to an element, each of its event handlers is called to allow them to handle the event, one after another. You don't need to call them yourself, although you can do so in many cases to easily simulate an event taking place. For example, given a button object myButton, you can do myButton.onclick(myEventObject) to call the event handler directly. If the event handler doesn't access any data form the event object, you can leave out the event when calling onclick().

- -

This continues until every handler has been called, unless one of the event handlers explicitly halts the processing of the event by calling {{domxref("Event.stopPropagation", "stopPropagation()")}} on the event object itself.

- -

Non-element objects

- -

Event handlers can also be set with properties on non-element objects that generate events, like {{ domxref("window") }}, {{ domxref("document") }}, {{ domxref("XMLHttpRequest") }}, and others. For example, for the progress event on instances of XMLHttpRequest:

- -
const xhr = new XMLHttpRequest();
-xhr.onprogress = function() { … };
- -

HTML onevent attributes

- -

HTML elements have attributes named onevent which can be used to register a handler for an event directly within the HTML code. When the element is built from the HTML, the value of its onevent attributes are copied to the DOM object that represents the element, so that accessing the attributes' values using JavaScript will get the value set in the HTML.

- -

Further changes to the HTML attribute value can be done via the setAttribute method; Making changes to the JavaScript property will have no effect.

- -

HTML

- -

Given this HTML document:

- -
<p>Demonstrating quirks of <code>on<em>event</em></code> HTML attributes on
-   <a onclick="log('Click!')">these three words</a>.
-</p>
-
-<div></div>
- -

JavaScript

- -

Then this JavaScript demonstrates that the value of the HTML attribute is unaffected by changes to the JavaScript object's property.

- -
let logElement = document.querySelector('div');
-let el = document.querySelector("a");
-
-function log(msg) { logElement.innerHTML += `${msg}<br>` };
-function anchorOnClick(event) { log("Changed onclick handler") };
-
-// Original Handler
-log(`Element's onclick as a JavaScript property: <code> ${el.onclick.toString()} </code>`);
-
-//Changing handler using .onclick
-log('<br>Changing onclick handler using <strong> onclick property </strong> ');
-
-el.onclick = anchorOnClick;
-
-log(`Changed the property to: <code> ${el.onclick.toString()} </code>`);
-log(`But the HTML attribute is unchanged: <code> ${el.getAttribute("onclick")} </code><br>`);
-
-//Changing handler using .setAttribute
-log('<hr/><br> Changing onclick handler using <strong> setAttribute method </strong> ');
-el.setAttribute("onclick", 'anchorOnClick(event)');
-
-log(`Changed the property to: <code> ${el.onclick.toString()} </code>`);
-log(`Now even the HTML attribute has changed: <code> ${el.getAttribute("onclick")} </code><br>`);
- -

Result

- -

{{ EmbedLiveSample('HTML_onevent_attributes', '', '', '', 'Web/Guide/Events/Event_handlers') }}

- -

For historical reasons, some attributes/properties on the {{HTMLElement("body")}} and {{HTMLElement("frameset")}} elements instead set event handlers on their parent {{domxref("Window")}} object. (The HTML specification names these: onblur, onerror, onfocus, onload, and onscroll.)

- -

Event handler's parameters, this binding, and the return value

- -

When the event handler is specified as an HTML attribute, the specified code is wrapped into a function with the following parameters:

- - - -

When the event handler is invoked, the this keyword inside the handler is set to the DOM element on which the handler is registered. For more details, see the this keyword documentation.

- -

The return value from the handler determines if the event is canceled. The specific handling of the return value depends on the kind of event; for details, see "The event handler processing algorithm" in the HTML specification.

- -

When the event handler is invoked

- -
-

TBD (non-capturing listener)

-
- -

Terminology

- -

The term event handler may refer to:

- - - -

When discussing the various methods of listening to events:

- - - -

Specifications

- - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'webappapis.html#event-handler-attributes', 'event handlers')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'webappapis.html#event-handler-attributes', 'event handlers')}}{{Spec2('HTML5 W3C')}}
- -

Browser compatibility

- -

Detecting the presence of event handler properties

- -

You can detect the presence of an event handler property with the JavaScript in operator. For example:

- -
if ("onsomenewfeature" in window) {
-  /* do something amazing */
-}
-
- -

Event handlers and prototypes

- -

You can't set or access the values of any IDL-defined attributes on DOM prototype objects. That means you can't, for example, change Window.prototype.onload. In the past, event handlers (onload, etc.) weren't implemented as IDL attributes in Gecko, so you were able to do this for those. Now you can't. This improves compatibility.

diff --git a/files/pt-br/orphaned/web/guide/events/index.html b/files/pt-br/orphaned/web/guide/events/index.html deleted file mode 100644 index d705b4757c..0000000000 --- a/files/pt-br/orphaned/web/guide/events/index.html +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: Event developer guide -slug: orphaned/Web/Guide/Events -tags: - - DOM - - Event - - Guide - - NeedsTranslation - - TopicStub - - events -translation_of: Web/Guide/Events -original_slug: Web/Guide/Events ---- -

{{draft()}}

-

Events refers both to a design pattern used for the asynchronous handling of various incidents which occur in the lifetime of a web page and to the naming, characterization, and use of a large number of incidents of different types.

-

The overview page provides an introduction to the design pattern and a summary of the types of incidents which are defined and reacted to by modern web browsers.

-

The custom events page describes how the event code design pattern can be used in custom code to define new event types emitted by user objects, register listener functions to handle those events, and trigger the events in user code.

-

The remaining pages describe how to use events of different kinds defined by web browsers. Unfortunately, these events have been defined piece by piece as web browsers have evolved so that there is no satisfying systematic characterization of the events built-in or defined by modern web browsers.

-

The device on which the web browser is running can trigger events, for example due to a change in its position and orientation in the real world, as discussed partially by the page on orientation coordinate systems and the page on the use of 3D transforms. That is different, but similar, to the change in device vertical orientation. 

-

The window in which the browser is displayed which might trigger events, for example, change size if the user maximizes the window or otherwise changes it.

-

The process loading of a web page might trigger events in response to the completion of different steps in the downloading, parsing, and rendering of the web page for display to the user.

-

The user interaction with the web page contents might trigger events. The events triggered by user interaction evolved during the early years of browser design and include a complicated system defining the sequence in which events will be called and the manner in which that sequence can be controlled. The different types of user interaction driven events include:

- -

The modification of the web page in structure or content might trigger some events, as is explained in the mutation events page, but the use of these events has been deprecated in favour of the lighter Mutation Observer approach.

-

The media streams embedded in the HTML documents might trigger some events, as explained in the media events page.

-

The network requests made by a web page might trigger some events.

-

There are many other sources of events defined by web browsers for which pages are not yet available in this guide.

-
-

Note: This Event Developer Guide needs substantial work. The structure needs to be reorganized and the pages rewritten. Our hope is that everything you need to know about events will go under here.

-
-

Docs

-

{{LandingPageListSubpages}}

diff --git a/files/pt-br/orphaned/web/guide/events/mutation_events/index.html b/files/pt-br/orphaned/web/guide/events/mutation_events/index.html deleted file mode 100644 index c60653c55c..0000000000 --- a/files/pt-br/orphaned/web/guide/events/mutation_events/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: Mutation events -slug: orphaned/Web/Guide/Events/Mutation_events -translation_of: Web/Guide/Events/Mutation_events -original_slug: Web/Guide/Events/Mutation_events ---- -

{{deprecated_header()}}

- -

Mutation events fornecem um mecanismo, para uma página web ou uma extensão, de notificação sobre as alterações feitas no DOM. Utilize ao invés, se possível, Mutation Observers.

- -

Prefácio

- -

Os eventos de mutação foram marcados como em desuso na DOM Events specification pelo fato do projeto da API ser falho (veja detalhes no "DOM Mutation Events Replacement: The Story So Far / Existing Points of Consensus" publicado em public-webapps).

- -

Mutation Observers são a proposta de substituição para eventos de mutação no DOM4. Eles devem ser incluídos no Firefox 14 e Chrome 18.

- -

As razões práticas para evitar os eventos de mutação são problemas de desempenho e suporte cross-browser.

- -

Performance

- -

Adicionando listeners de mutação do DOM a um documento degrada o desempenho profundamente de outras modificações DOM para esse documento (tornando-os 1.5 - 7 vezes mais lento!). Além disso, remover os listeners não reverte o dano.

- -

O efeito de desempenho é limitado aos documentos que têm os listeners de evento de mutação.

- -

Suporte cross-browser

- -

Esses eventos não são implementados de forma consistente entre os diferentes navegadores, por exemplo:

- - - -

Dottoro suporte a eventos de mutação nos navegadores.

- -

Lista de mutation events

- -

Listado a seguir todos os eventos de mutação, como definido no DOM Level 3 Events specification:

- - - -

Uso

- -

Você pode registrar um listener para eventos de mutação usando element.addEventListener, como mostrado a seguir:

- -
element.addEventListener("DOMNodeInserted", function (event) {
-  // ...
-}, false);
-
- -

O objeto event é transmitido para o listener em um {{ domxref("MutationEvent") }} (veja sua definição na especificação) para a maioria dos eventos, e {{ domxref("MutationNameEvent") }} para DOMAttributeNameChanged e DOMElementNameChanged.

diff --git a/files/pt-br/orphaned/web/guide/events/overview_of_events_and_handlers/index.html b/files/pt-br/orphaned/web/guide/events/overview_of_events_and_handlers/index.html deleted file mode 100644 index 950ddd0b4f..0000000000 --- a/files/pt-br/orphaned/web/guide/events/overview_of_events_and_handlers/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: Uma visão geral sobre Events e Handlers -slug: orphaned/Web/Guide/Events/Overview_of_Events_and_Handlers -translation_of: Web/Guide/Events/Overview_of_Events_and_Handlers -original_slug: Web/Guide/Events/Overview_of_Events_and_Handlers ---- -
-

Este artigo apresenta uma visão geral sobre o design pattern usado para reagir a alterações que ocorrem quando o navegador acessa uma página, e dá um resumo sobre como os navegadores modernos reagem a eles.

-
- -

Eventos e a manipulação de eventos fornecem uma técnica essencial em JavaScript para reagir a algum incidente quando o navegador acessa uma página, incluindo eventos de preparação para exibir a página, ou interação com algum conteúdo da página que estejam relacionados com o dispositivo onde o navagador está rodando, e muitas outras, como reprodução de áudio ou vídeo.

- -

A manipulação de eventos tornou-se imprescindível com a evolução e mudança na arquitetura de renderização dos navegadores em relação a forma de busca e carregamento de informações na página. No início, os navegadores esperavam e recebiam os dados e recursos associados a página para analisar, processar e apresentar a página ao usuário. A página permanecia inalterada até uma requisição para um novo link. Atualmente, com a mudança para páginas dinâmicas, os navegadores estão sempre em um loop contínuo, processando, desenhando, apresentando conteúdo e esperando de algum novo evento. Os gatilhos (triggers) de evento podem ser a conclusão do carregamento de um arquivo na rede, por exemplo, uma imagem que agora pode ser mostrada na tela, a conclusão da análise de um recurso pelo navegador, o processamento do conteúdo HTML de uma página, a interação de um usuário com o conteúdo da página, com o clique em um botão. Douglas Crockford explica essa mudança de maneira eficaz em sua palestra, An Inconvenient API: The Theory of the DOM.

- -

With the change to dynamic page rendering, browsers loop continuously between processing, drawing, presenting content, and waiting for some new event trigger. Event triggers include the completion of the loading of a resource on the network e.g., downloads an image that can now be drawn on the screen, the completion of parsing a resource by the browser e.g., processes the HTML content of a page, the interaction of a user with the contents of the page e.g., clicks a button. Douglas Crockford explains this change effectively in several lectures, notably his talk, An Inconvenient API: The Theory of the DOM, which shows the change in flow from the original browser flow

- -
A comparison of the sequential and event-driven browser load sequences.
- -

to the event driven browser. The latter approach changes the last steps from a single flow into a perpetual loop, where waiting for and handling the incidence of new events follows painting. The innovation of the dynamic approach allows for a page to be partially rendered even when the browser has not finished retrieving all resources; this approach also allows for event driven actions, which JavaScript leverages. (The talk is available from several sources, including this one.) Currently, all execution environments for JavaScript code use events and event handling.

- -

The event design pattern

- -

The event system, at its core, is simply a programming design pattern. The pattern starts with an agreement over a kind of event and:

- - - -

The pattern is implemented by

- - - -

The function is said to be a 'listener' or a 'handler' with both names used interchangeably. This pattern can easily be followed using completely custom code, as explained in the article on custom events. The pattern is also used by modern web browsers which define many events emitted in response to user input or browser activity.

- -

Modern web browsers follow the event pattern using a standardized approach. Browsers use as the data structure for the properties of the event, an object derived from the EventPrototype object. Browsers use as the registration method for the function which will handle those data structures a method called addEventListener which expects as arguments a string event type name and the handler function. Finally, browsers define a large number of objects as event emitters and define a wide variety of event types generated by the objects.

- -

Button Event Handler Demo

- -

For example, browser button elements are intended to emit events named 'click' in response to a mouse click or, when displayed in touch sensitive surfaces, to a finger tap. We could define in the HTML page a button as:

- -
<button id="buttonOne">Click here to emit a 'click' event</button>
- -

and, in our JavaScript code, we could first define a function to listen to that 'click' event:

- -
var example_click_handler = function (ev){
-    var objKind = (ev instanceof Event) ? "EventPrototype" : "ObjectPrototype";
-    alert("We got a click event at " + ev.timeStamp + " with an argument object derived from: " + objKind );
-};
- -

and second register our function with the the Button object, either on the scripting side using the DOM (Document Object Model) representation of the HTML page:

- -
var buttonDOMElement = document.querySelector('#buttonOne');
-buttonDOMElement.addEventListener('click', example_click_handler);
- -

or within the HTML page by adding the function as the value of the 'onclick' attribute, although this second approach is usually only used in very simple web pages.

- -

{{ EmbedLiveSample('Button_Event_Handler') }}

- -

This code relies on the agreement that there is a kind of event called 'click' which will call any listener (or 'handler') function with an Event object argument (actually, in this case a derivative MouseEvent object) and which will be fired by HTML button elements after user interaction. The code has no visible effect until a user interacts with the button either by placing the mouse pointer over the HTML button and clicking on the left mouse button or by placing a finger or stylus of some kind on the screen above the HTML button; when that happens, the buttonDOMElement JavaScript object would call the example_click_handler function with an Event object as an argument. The function, in turn, would perform whatever action was chosen by the programmer, in this case to open an HTML alert dialog. Note that the handler has access to the ev object since it is passed as an argument; the object has information about the event, notably the time at which the event occurred.

- -

As a second example, much modern JavaScript integrated into web pages is wrapped into an event function call to ensure that the code is only executed when the HTML has been processed and is available for alteration or decoration. For example, code might be attached as:

- -
var funcInit = function(){
-    // user code goes here and can safely address all the HTML elements from the page
-    // since the document has successfully been 'loaded'
-}
-document.addEventListener('DOMContentLoaded', funcInit);
-
- -

so that this code will only be executed after the document object emits the 'DOMContentLoaded' event because the HTML has been parsed and Javasript objects created representing each of the nodes of the HTML document. Note that in this example, the code does not even name the event argument to the function because the code never needs to use the data structure describing the event; rather, the code merely needs to wait to run until after then event has happened.

- -

The pattern is therefore easy to learn and implement. The difficulty with events comes from learning the wide variety of events which are generated in modern web browsers. There is also some subtlety in learning how to write the handler functions since such code works asynchronously and potentially will run repeatedly but in slightly different situations.

- -

Notable events

- -

Web browsers define a large number of events so it is not practical to list them all. The Event Reference attempts to maintain a list of the standard Events used in modern web browsers.

- -

In general, we can distinguish events of different kinds based on the object emitting the event including:

- - - -

although this list is currently incomplete.

- -

Some notable events are:

- -
-

Note: This list of events will need work to make relevant; that work is awaiting some global reorganization work on the documents. This will also need finding a good explanation of the events involved during page loading, such as discussed partially in this web page or in this Stack Overflow question.

-
- - - - - -

The Event object hierarchy

- -

The web browser defines many events of different kinds. Each definition includes, as the data structure passed to the handler function, an object which inherits from the EventPrototype object.

- -

A partial diagram of the class hierarchy of event objects is:

- -
-

Note: This diagram is incomplete.

-
- -

- -

The Web API Documentation contains a page defining the Event object which also includes the known DOM event subclasses of the Event object.

- -

Documents

- -

Three sources on the MDN (Mozilla Developer Network) web site are particularly useful for programmers wanting to work with events:

- - diff --git a/files/pt-br/orphaned/web/guide/html/html5/index.html b/files/pt-br/orphaned/web/guide/html/html5/index.html deleted file mode 100644 index 70e852c9cb..0000000000 --- a/files/pt-br/orphaned/web/guide/html/html5/index.html +++ /dev/null @@ -1,300 +0,0 @@ ---- -title: HTML5 -slug: orphaned/Web/Guide/HTML/HTML5 -tags: - - Desenvolvimento Web - - Guía - - HTML - - HTML5 - - Visão Geral - - Web -translation_of: Web/Guide/HTML/HTML5 -original_slug: Web/Guide/HTML/HTML5 ---- -

HTML5 é a mais recente evolução do padrão que define o HTML. O termo representa dois conceitos diferentes:

- - - -

Criada para ser utilizável por todos os desenvolvedores da Web Aberta, essa página de referências faz ligações a inúmeros recursos do HTML5, classificados em diversos grupos, baseando-se em suas funções;

- - - -
- -
- -

 Semântica 

- -
-
Seções e estruturas em HTML
-
Uma visão geral sobre as novas estruturas e novos elementos de seção do HTML5: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}} e {{HTMLElement("aside")}}
-
Utilizando áudio e vídeo com HTML5
-
Os elementos {{HTMLElement("audio")}} e {{HTMLElement("video")}} incorporam e permitem manipulação de novos conteúdos multimídia. 
-
Formulários em HTML5 
-
Uma visão geral sobre as melhorias dos formulários web com o HTML5: a API de validação de restrição, novos valores para o atributo {{htmlattrxref("type", "input")}} dos {{HTMLElement("input")}} e o novo elemento {{HTMLElement("output")}}.
-
Novos elementos semânticos
-
Seções laterais, mídia e elementos de formulário: há diversos novos elementos, como {{HTMLElement("mark")}}, {{HTMLElement("figure")}}, {{HTMLElement("figcaption")}}, {{HTMLElement("data")}}, {{HTMLElement("time")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, ou {{HTMLElement("meter")}} e {{HTMLElement("main")}}, incrementando o montante de elementos válidos do HTML5.
-
Melhorias no {{HTMLElement("iframe")}}
-
Usando os atributos {{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}}, e {{htmlattrxref("srcdoc", "iframe")}} , autores podem ser precisos sobre o nível de segurança e a renderização desejada de um elemento {{HTMLElement("iframe")}}.
-
​MathML
-
Viabiliza a inserção direta de fórmulas matemáticas no código HTML5.
-
Introdução ao HTML5
-
Este artigo introduz como indicar para o navegador que você está usando HTML5 em sua página ou aplicação web. 
-
HTML5 parser compatível
-
O parser, que torna os bytes de um HTML em DOM, foi extendido e agora define precisamente o comportamento em todos os casos, mesmo quando se depara com código HTML inválido. Isso viabiliza uma grandiosa previsibilidade e interoperabilidade entre navegadores compatíveis com o HTML5.
-
- -

Conectividade

- -
-
Web Sockets
-
Permite a criação de uma conexão permanente entre a página e o servidor para que estes possam trocar dados através desta ligação.
-
Eventos do servidor
-
Permite que o servidor envie eventos para um cliente, ao contrário do paradigma clássico onde o servidor pode enviar apenas dados em resposta às requests do cliente.
-
WebRTC
-
WebRTC (Comunicação em tempo real), permite conexões entre usuários e controle de videoconferência diretamente no browser, sem necessidade de um plugin ou aplicação externa.
-
- -

Offline e armazenamento

- -
-
Recursos offline: cache de aplicação
-
Firefox possui suporte completo às especificações dos recursos offlines do HTML5. A maioria dos outros navegadores suportam apenas parte deste recurso.
-
Eventos online e offline
-
-

Firefox 3 dá suporte aos eventos WHATWG online e offline, o que permite que aplicações e extensões percebam quando há conexão de Internet, assim como permite a detecção das oscilações de conexão. 

-
-
WHATWG 
-
Sessão client-side e armazenamento persistente permite que aplicações web armazenem dados de forma estruturada no lado do cliente.
-
IndexedDB
-
É um padrão web para armazenamento de quantidades significativas de dados estruturados no navegador e para alta performace de busca nestes dados, usando índices.
-
Uso de arquivos de aplicações web
-
Foi adicionado ao Gecko o suporte à nova API de arquivos do HTML5, tornando possível o acesso de arquivos locais pelas aplicações. Isso inclui suporte para seleções de múltiplos arquivos usando {{HTMLElement("input")}} do novo tipo file do HTML5. Há também o FileReader.
-
- -

Multimídia

- -
-
Utilizando áudio e vídeo com HTML5
-
Os elementos {{HTMLElement("audio")}} e {{HTMLElement("video")}} incluem e permitem a manipulação de novos conteúdos multimídia.
-
WebRTC
-
Permite conexões entre usuários e controle de videoconferência diretamente no browser, sem necessidade de um plugin ou aplicação externa.
-
API da câmera
-
Permite o uso, manipulação e armazenamento de uma imagem diretamente da câmera do computador.
-
Track e WebVTT
-
O elemento {{HTMLElement("track")}} permite legendas e capítulos. WebVTT é o formato de texto do track {{HTMLElement("track")}}.
-
- -

Gráficos e efeitos 3D

- -
-
Canvas
-
Aprenda sobre o novo elemento {{HTMLElement("canvas")}} e como utilizá-lo para desenhar gráficos e objetos no Firefox.
-
API de texto para {{HTMLElement("canvas")}}
-
O elemento {{HTMLElement("canvas")}} agora dá suporte à  API de texto do HTML5.
-
WebGL
-
WebGL traz gráficos 3D à Web, introduzindo uma API que se aproxima bastante à OpenGL ES 2.0, que pode ser usada em elementos {{HTMLElement("canvas")}}.
-
SVG
-
Um formato de imagens vetoriais baseada em XML que pode ser diretamente embutido no HTML5.
-
- -

Performance e integração

- -
-
Web Workers
-
Permite a delegação da evolução do JavaScript para threads em segundo plano, permitindo que essas atividades sejam prevenidas e assim não deixando as interações dos eventos lentas.
-
XMLHttpRequest level 2
-
Permite buscar de forma assíncrona algumas partes da página, permitindo apresentar na tela conteúdo dinâmico, variando de acordo com o tempo e ações do usuário. Está é a tecnologia por trás do Ajax.
-
Motor JIT-compiling para JavaScript
-
A nova e poderosa geração de motores JavaScript é muito mais poderosa, levando para uma maior performance.
-
History API
-
Permite a manipulação do histórico do navegador. Isso é especialmente útil para páginas que carregam novas informações interativas.
-
O atributo contentEditable: Transforme seu website em uma wiki!
-
O HTML5 padronizou o atributo contentEditable. Saiba mais sobre este recurso.
-
Arrastar e soltar
-
A API do HTML5 permite suportar o recurso de arrastar e soltar (dragging and dropping) items dentro e entre sites da web. Isso também fornece uma simples API para fazer o uso de extensões e aplicações baseadas na Mozilla.
-
Foco de gestão em HTML
-
O novo HTML5 activeElement e hasFocus são atributos suportados.
-
Manipuladores de protocolos beseados na web
-
Agora você pode registrar aplicações web com manipuladores de protocolos utilizando o método thenavigator.registerProtocolHandler().
-
requestAnimationFrame
-
Permite o controle de animações de renderização para obter a performance ideal.
-
API Fullscreen
-
Controla o uso de toda a tela para uma página web ou aplicação, sem mostrar a interface de UI do navegador.
-
API bloqueio de ponteiro
-
Permite o bloqueio do ponteiro para o conteúdo, para jogos e aplicações semelhantes para não perder o foco quanto o ponteiro atinge o limite da janela.
-
Eventos online e offline
-
A fim de construir uma boa aplicação web offline, você precisa saber quando sua aplicação é realmente offline. Aliás, você também precisa saber quando sua aplicação foi retornada por um status online novamente.
-
- -

Acesso à dispositivos

- -
-
Usando a API da câmera
-
É permitido o uso, manipulação, e armazenar imagens através câmeras dos computadores.
-
Eventos touch
-
Manipuladores para reagir a eventos criados por um usuário ao pressionar em telas sensíveis ao toque (touch screens).
-
Utilizando geolocalização
-
Deixa que os navegadores localizem a posição do usuário utilizando a geolocalização.
-
Detectando a orientaçåo do dispositivo
-
Coleta a informação quando o dispositivo em que o browser está rodando muda sua orientação de tela. Isto pode ser utilizado como um dispositivo de entrada (por exemplo, para fazer jogos que utiliza à posiçao do dispositivo) ou para adaptar o layout de uma pagina para a orientaçao da tela (vertical ou horizontal).
-
Pointer Lock API
-
Permite que o cursor fique limitado às medidas do conteúdo da aplicação, assim, jogos e outras aplicações não perdem o foto quando o cursos ultrapassa os limites do conteúdo.
-
- -

Estilização

- -

CSS foi estendido para ser capaz de estilo elementos de uma forma muito mais complexa. Sua extensão, também conhecido como CSS3, mas, como o CSS não segue uma especificação padrão, alguns módulos podem não estar necessariamente na versão 3,. Alguns estão na versão 3 e outros até na 1. Chamar de CSS3 é apenas uma convenção.

- -
-
Novas caracteristicas dos estilos de background
-
Agora é possível determinar uma sombra à um elemento, usando a propriedade box-shadow e também podemos definir diversos backgrounds para um elemento.
-
More fancy borders
-
Também é possível utilizar imagens para estilizar bordas, usando a propriedade border-image. Bordas arredondadas são suportadas através da propriedade border-radius.
-
Animating your style
-
Utilizando transition para animar diferentes estágios de determinadas propriedades ou usando animation para animar trechos da página sem precisar usar o JavaScript com algum evento vinculado, permitindo total controle sobre movimentação de elementos. 
-
Using CSS Transitions to animate between different states or using CSS Animationsto 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. Eles podem controlar text-overflow e hyphenation, mas tambem pode adicionar um shadow a ele ou controlar mais precisamente a sua decorations. Tipos de letras personalizadas podem ser baixadas e aplicadas gracas a nova@font-face at-rule.
-
Novos layouts de apresentaçoes
-
A fim de melhorar a flexibilidade dos modelos, foram adicionados, dois novos esquemas: o CSS multi-column layouts e CSS flexible box layout.
-
- - - -

(Alguns outros artigos relacionados com HTML5.)

- -

Introdução ao HTML5

- -
-
Introdução ao HTML5
-
Este artigo introduz como utilizar HTML5 no desenho de site ou de sua aplicação.
-
- -

Elementos do HTML5

- -
-
Lista de tags / elementos do HTML5
-
Esta página contém uma tabela com todos os elementos (tags) baseado no rascunho atual das especificações do HTML5.
-
- -
-
Utilizando audio e video
-
Adicionando suporte aos elementos do HTML5 {{ HTMLElement("audio") }} e {{ HTMLElement("video") }} ao Firefox 3.5.
-
Formulários em HTML5
-
Veja as melhorias para formulários web em HTML5: a API de validação de restrição, vários novos atributos, novos valores para {{ HTMLElement("input") }} atributo {{ htmlattrxref("type", "input") }} e os novo elemento {{ HTMLElement("output") }}.
-
Seções e esboços em HTML5
-
Veja os novos elementos para delinear e seccionar em HTML5: {{ HTMLElement("section") }}, {{ HTMLElement("article") }}, {{ HTMLElement("nav") }}, {{ HTMLElement("header") }}, {{ HTMLElement("footer") }}, {{ HTMLElement("aside") }} and {{ HTMLElement("hgroup") }}.
-
O elemento {{ HTMLElement("mark") }}
-
Este elemento é usado para marcar em destaque um texto de especial relevância.
-
O elemento {{ HTMLElement("figure") }} e {{ HTMLElement("figcaption") }}
-
Este elemento permite adicionar figuras e ilustrações, com uma eventual legenda, colocado abaixo do texto principal.
-
- -

Suporte Canvas

- -
-
Tutorial Canvas
-
 Apreda sobre o novo elemento {{ HTMLElement("canvas") }} e como desenhar gráficos e outros objetos no Firefox.
-
HTML5 API texto para elemento <canvas>
-
HTML5 API texto agora é suportado pelo {{ HTMLElement("canvas") }}.
-
- -
-

Recursos de aplicações web

-
- -
-
Recursos Offline
-
O Firefox suporta completamente as especificações de HTML5 para  recurso offline. A maioria dos outros navegadores tem algum nível de suporte aos recursos offline.
-
Eventos online e offline
-
O Firefox 3 suporta WHATWG eventos online e offline, que permitem que aplicações e extensões detectem se há ou não uma conexão ativa com Internet, bem como detecta quando a conexão conecta e desconecta.
-
Sessão WHATWG do lado cliente e armazenamento persistente (aka DOM Storage)
-
A sessão do lado cliente e o armazenamento persistente permitem que as aplicações web armazenem dados estruturados no lado  cliente.
-
O atributo contentEditable: transforma seu website em um wiki!
-
O HTML5 tem um atributo padronizado contentEditable. Saiba mais sobre este recurso.
-
Usando arquivos de aplicações web
-
Suporta para a nova HTML5 API de arquivo foi adicionada ao Gecko, tornando possível as aplicações web para acessarem arquivos locais selecionados pelo usuário. Isso inclui suporte para selecionar vários arquivos usando o novo elemento HTML {{ HTMLElement("input") }} do type arquivo de multiplos atributos.
-
- -

Recursos DOM

- -
-
getElementsByClassName
-
O método getElementsByClassName no Document e Element nodes são suportados. Estes métodos permitem encontrar elementos de uma classe ou de uma lista de classes.
-
Arrastar e soltar
-
A HTML5 API drag and drop permite suporte para arrastar e soltar itens dentro e entre web sites. Isto também proporciona uma API simples para uso de extensões e aplicativos baseados em Mozilla.
-
Foco na gestão do HTML
-
Os novos activeElement e hasFocus são atributos suportados pelo HTML5..
-
Manipuladores de protocolo baseado em web
-
Agora você pode registrar uma aplicação web como um manipulador de protocolo usando o método  navigator.registerProtocolHandler().
-
- -

HTML parser

- -

O Gecko é compatível com HTML5 parser—que transforma os bytes de documento HTML em um DOM—foi ativado por padrão a partir de maio de 2010. (Note que a versão do HTML5 parser que foi incluída no Gecko 1.9.2 / Firefox 3.6 tem bastante erros e não é recomendado para uso real.)

- -

Alterações adicionais

- - - -

Tecnologias muitas vezes chamado de parte do HTML5 que não são

- -

Estas são muitas vezes consideradas em conjunto com um uso amplo termo de "HTML5", mas não são realmente parte do W3C HTML5 Spec.

- - - -

Veja também

- -

Alterações nas versões do Firefox que afetam os desenvolvedores da Web:

- - - -
-

{{ languages( {"es": "es/HTML/HTML5", "fr": "fr/HTML/HTML5", "ja": "ja/HTML/HTML5" , "ko": "ko/HTML/HTML5" , "pl": "pl/HTML/HTML5", "pt": "pt/HTML/HTML5", "zh-cn": "cn/HTML/HTML5", "zh-tw": "zh_tw/HTML/HTML5", "pt-br": "pt-br/HTML/HTML5"} ) }}

-
diff --git a/files/pt-br/orphaned/web/guide/html/html5/introduction_to_html5/index.html b/files/pt-br/orphaned/web/guide/html/html5/introduction_to_html5/index.html deleted file mode 100644 index a36dbb612f..0000000000 --- a/files/pt-br/orphaned/web/guide/html/html5/introduction_to_html5/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Introdução ao HTML5 -slug: orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5 -translation_of: Web/Guide/HTML/HTML5/Introduction_to_HTML5 -original_slug: Web/Guide/HTML/HTML5/Introduction_to_HTML5 ---- -

HTML5 é a mais nova versão do padrão HTML. Ele oferece novas funcionalidades para proporcionar não somente mídias diversas, mas para melhorar o suporte para criar aplicações web que possam interagir com o usuário, seus dados locais, e servidores mais facilmente e efetivamente.

- -

Pelo fato do HTML5 estar ainda no estágio de projeto, mudanças nas especificações são inevitáveis. Por isso, nem todas as funcionalidades são fornecidas por todos os navegadores. Entretanto, o Gecko (e por consequência, o Firefox) tem um bom suporte inicial para o HTML5, e o trabalho continua rumo a fornecer mais e mais de suas funcionalidades. O Gecko começou a fornecer algumas funcionalidades do HTML5 na versão 1.8.1. Você também pode encontrar uma lista das funcionalides do HTML5 que o Gecko suporta na página principal do HTML5. Para informação detalhada sobre o suporte de vários navegadores quanto às funcionalidades do HTML5, veja o site CanIUse.

- -

Seu primeiro passo: O doctype do HTML5

- -

O doctype para o HTML5 é muito simples. Para indicar que seu conteúdo HTML usa HTML5, simplesmente use:

- -
<!DOCTYPE html>
-
- -

Esse simples doctype causará até os navegadores que não oferecem suporte ao HTML5 a entrar no modo dos padrões, isso significa que eles interpretarão as partes já estabelecidas pelo HTML em um modo "compatível" com HTML5, ignorando as novas funcionalidades que ele não suporta.

- -
-

{{ languages( {"ja": "ja/HTML/HTML5/Introduction to HTML5", "fr":"fr/HTML/Introduction_à_HTML5", "pt": "pt/HTML/HTML5/Introdução_ao_HTML5", "pt-BR": "pt-BR/HTML/HTML5/Introdução_ao_HTML5"} ) }}

-
- -

 

diff --git a/files/pt-br/orphaned/web/guide/html/using_html_sections_and_outlines/index.html b/files/pt-br/orphaned/web/guide/html/using_html_sections_and_outlines/index.html deleted file mode 100644 index 09144f9ce4..0000000000 --- a/files/pt-br/orphaned/web/guide/html/using_html_sections_and_outlines/index.html +++ /dev/null @@ -1,411 +0,0 @@ ---- -title: Seções e estrutura de um documento HTML5 -slug: orphaned/Web/Guide/HTML/Using_HTML_sections_and_outlines -translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines -original_slug: Web/Guide/HTML/Using_HTML_sections_and_outlines ---- -
-

Importante: Atualmente não há implementações conhecidas do algorítmo de estrutura em navegadores gráficos ou user agents de tecnologia assistiva, apesar disso o algorítmo é implementado em outro software como em verificadores de conformidade. Assim, ao algorítmo de estrutura não pode ser confiada a  entrega da estrutura do documento para os usuários. Autores são aconselhados a usar níveis de cabeçalho (h1-h6) para transmitir a estrutura do documento.

-
- -

A especificação HTML5 traz diversos novos elementos aos desenvolvedores web, permitindo-os descrever a estrutura de um documento web com semânticas padronizadas. Este documento descreve esses elementos e como utilizá-los para definir a estrutura desejada para qualquer documento.

- -

Estrutura de um documento em HTML4

- -

A estrutura de um documento, ou seja, a estrutura semântica do que está entre <body> e </body>, é fundamental para a apresentação da página ao usuário. O HTML4 usa a noção de seções e subseções de um documento para descrever sua estrutura. Uma seção é definida por um Elemento HTML de Divisão ({{ HTMLElement("div") }}) com Elementos HTML de Cabeçalho ({{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, ou {{ HTMLElement("h6") }}) dentro de si, definindo seu título. As relações desses elementos levam à estrutura do documento.

- -

Então a seguinte marcação:

- -
<div class="section" id="elefantes-da-floresta" >
-<h1>Elefantes da floresta</h1>
-<p>Nesta seção, discutiremos os poucos conhecidos elefantes da floresta.
-...esta seção continua...
-<div class="subsection" id="floresta-habitat">
-<h2>Habitat</h2>
-<p>Os elefantes da floresta não vivem em árvores mas sim entre elas.
-...esta subseção continua...
-</div>
-</div>
-
- -

leva à seguinte estrutura (sem os marcadores 1. e 1.1 de nível) :

- -
1. Elefantes da floresta
-   1.1 Habitat
-
- -

Os elementos {{ HTMLElement("div") }} não são obrigatórios para definir uma nova seção. A mera presença de um Elemento de Cabeçalho HTML é suficiente para implicar uma nova seção. Portanto,

- -
<h1>Elefantes da floresta</h1>
-<p>Nesta seção, discutiremos os pouco conhecidos elefantes da floresta.
-...esta seção continua...
-<h2>Habitat</h2>
-<p>Os elefantes da floresta não vivem em árvores mas sim entre elas.
-...esta subseção continua...
-<h2>Dieta</h2>
-<h1>Esquilo da mongólia</h1>
-
- -

leva à:

- -
1. Elefantes da floresta
-   1.1 Habitat
-   1.2 Dieta
-2. Esquilo da mongólia
-
- -

Problemas resolvidos pelo HTML5

- -

A definição HTML 4 da estrutura de um documento e seu algoritmo de estruturação implícita é muito irregular e leva a inúmeros problemas:

- -
    -
  1. O uso do {{HTMLElement("div")}} para definir seções semânticas, sem definir valores específicos para o atributo class torna a automação do algoritmo de saída inviável ("Este{{HTMLElement("div")}}é parte  da estrutura da página, definindo uma seção ou uma subsseção?" ou "é apenas um  {{HTMLElement("div")}} representativo, usado apenas para definição de estilo?"). Em outras palavras, a perspectiva do HTML4 é muito imprecisa em relação a o que é uma seção e como seu escopo é definido. Geração automática de estrutura é importante, especialmente para tecnologias assistivas, que são apropriadas para adaptar a forma de apresentação da informação para os usuários de acordo com a estrutura do documento. O HTML5 elimina a necessidade dos elementos {{HTMLElement("div")}} do algoritmo de estruturação introduzindo um novo elemento, O  {{HTMLElement("section")}}, o elemento de Seção do HTML. 
    2. -
  2. Mesclar diversos documentos é uma tarefa complicada: a inclusão de um subdocumento em um documento principal significa pequenas alterações nos elementos de cabeçalho de modo que a estrutura geral do novo documento continue sólida. Isso é resolvido no HTML5 com a introdução dos elementos de seção ({{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}} e {{HTMLElement("aside")}}), que são sempre subseções das seções ancestrais mais próximas, independentemente das seções criadas pelos elementos de cabeçalhos internos de cada subseção.
    3. -
  3. No HTML4, toda seção é parte da estrutura do documento. Mas documentos não lineares são frequentes. Um documento pode ter seções especiais contendo informações que não fazem parte, a não ser que seja relatado, do conteúdo principal, como um bloco de avisos ou uma caixa de explicação. O HTML5 introduz o elemento {{HTMLElement("aside")}}, permitindo assim que tal seção não seja parte da estrutura principal do documento.
    4. -
  4. Novamente, no HTML4 pelo fato de todas as seções semânticas com a tag {{HTMLElement("div")}} fazerem parte da estrutura do documento, não há formas de haver seções que contenham informações relacionadas não ao documento em si, mas ao site no geral, como logos, menus, tabelas de conteúdos, copyright ou avisos legais. Com esse propósito, o HTML5 introduz três novos elementos: {{HTMLElement("nav")}} para coleções de links (tal como uma tabela de conteúdos), {{HTMLElement("footer")}} e {{HTMLElement("header")}} para informações relacionadas ao site. Perceba que {{HTMLElement("footer")}} e {{HTMLElement("header")}} não são conteúdos de seção como o {{HTMLElement("section")}}, ao invés disso, eles existem para delimitar semanticamente partes de uma seção.
    5. -
- -

- -

Resumindo, o HTML5 traz precisão às divisões do documento em seções e aos recursos de cabeçalho, permitindo que a estrutura seja previsível e possa ser usada para melhorar a experiência do usuário.

- -

The HTML5 Outline Algorithm

- -

Definindo seções em HTML5

- -

Todo conteúdo que está dentro do elemento {{ HTMLElement("body") }}  é parte de uma seção. Seções em  HTML5 podem ser encaixadas(aninhadas). Com base na seção principal, definida pelo elemento {{ HTMLElement("body") }}, section os limites são definidos tanto explicitamente ou implicitamente. Explicitly-defined sections are the content within {{ HTMLElement("body") }},  {{ HTMLElement("section") }},  {{ HTMLElement("article") }},  {{ HTMLElement("aside") }}, {{ HTMLElement("footer") }},  {{ HTMLElement("header") }}, and {{ HTMLElement("nav") }} tags. 

- -
Nota: Cada seção pode ter sua própria hierarquia de cabeçalho  {{ HTMLElement("h1") }}. Veja Definindo cabeçalhos com HTML5.
- -

Exemplo:

- -
<section>
-  <h1>Elefantes da floresta</h1>
-  <section>
-    <h1>Introdução</h1>
-    <p>Nesta seção, nós discutimos os menores elefantes florestais conhecidos.<p>
-  </section>
-  <section>
-    <h1>Habitat</h1>
-    <P>Elefantes florestais não vivem em árvores mas entre eles.</p>
-  </section>
-  <aside>
-    <p>Bloco publicitário</p>
-  </aside>
-</section>
-<footer>
-  <p>(c) 2010 O Exemplo de empresa</p>
-</footer>
-
- -

Esse snippet HTML define duas seções de nível superior:

- -
 <section>
-  <h1> Elefantes da floresta </h1>
-  <section>
-    <h1> Introdução </h1>
-    <p> Nesta seção, discutiremos os elefantes da floresta menos conhecidos.</p>
-  </section>
-  <section>
-    <h1> Habitat </h1>
-    <p>Os elefantes da floresta não vivem em árvores, mas entre eles.</p>
-  </section>
-  <aside>
-    <p> bloco de publicidade</p>
-  </aside>
-</section>
-<footer>
-  <p> (c) 2010 A empresa exemplo</p>
-</footer>
- -

A primeira seção possui três subseções:

- -
<section>
-   <h1>Forest elephants</h1>
-   <section>
-     <h1>Introduction</h1>
-     <p>In this section, we discuss the lesser known forest elephants.
-   </section>
-   <section>
-     <h1>Habitat</h1>
-     <P>Forest elephants do not live in trees but among them.
-   </section>
-   <aside>
-     <p>advertising block
-   </aside>
- </section>
- <footer>
-   <p>(c) 2010 The Example company
- </footer>
- -

Isso leva à seguinte estrutura:

- -
1. Forest elephants
-   1.1 Introduction
-   1.2 Habitat
-   1.3 Section (aside)
-
- -

Definindo cabeçalho com HTML5

- -

Enquanto os elementos de corte em HTML definem a estrutura do documento, um esboço também precisa de títulos para ser útil. A regra básica é simples: o primeiro elemento de cabeçalho HTML (um de {{HTMLElement ("h1")}}, {{HTMLElement ("h2")}}, {{HTMLElement ("h3")}}, {{HTMLElement ("h4")}}, {{HTMLElement ("h5")}}, {{HTMLElement ("h6")}}) define o cabeçalho da seção atual.

- -

Os elementos de cabeçalho têm uma classificação fornecida pelo número no nome do elemento, onde {{HTMLElement ("h1")}} tem a classificação mais alta e {{HTMLElement ("h6")}}} tem a classificação mais baixa. A classificação relativa é importante apenas dentro de uma seção; a estrutura das seções determina o contorno, não a classificação do cabeçalho das seções. Por exemplo, este código:

- -
<section>
-  <h1>Forest elephants</h1>
-  <p>In this section, we discuss the lesser known forest elephants.
-     ...this section continues...
-  <section>
-     <h2>Habitat</h2>
-     <p>Forest elephants do not live in trees but among them.
-        ...this subsection continues...
-  </section>
-</section>
-<section>
-  <h3>Mongolian gerbils</h3>
-  <p>In this section, we discuss the famous mongolian gerbils.
-     ...this section continues...
-</section>
-
- -

leva ao seguinte esboço:

- -
1. Elefantes da floresta
-   1.1 Habitat
-2. Gerbos da Mongólia
- -

Observe que a classificação do elemento de cabeçalho (no exemplo {{HTMLElement ("h1")}}} para a primeira seção de nível superior, {{HTMLElement ("h2")}} para a subseção e {{HTMLElement ("h3 ")}} para a segunda seção de nível superior) não é importante. (Qualquer classificação pode ser usada como cabeçalho de uma seção definida explicitamente, embora essa prática não seja recomendada.)

- -

Seção implícita

- -

Como os Elementos de Seção HTML5 não são obrigatórios para definir um esboço, para manter a compatibilidade com a Web existente dominada pelo HTML4, existe uma maneira de definir seções sem eles. Isso é chamado de corte implícito.

- -

Os elementos de cabeçalhos HTML ({{HTMLElement ("h1")}} a {{HTMLElement ("h6")}}) definem uma nova seção implícita quando eles não são o primeiro cabeçalho de suas seções pai, explícitas. A maneira como esta seção implícita é posicionada no contorno é definida por sua classificação relativa com o cabeçalho anterior na seção pai. Se tiver uma classificação inferior à do título do cabeçalho anterior, abrirá uma subseção implícita da seção. Este código:

- -
<section>
-  <h1> Elefantes da floresta </h1>
-  <p> Nesta seção, discutiremos os elefantes da floresta menos conhecidos.
-    ... esta seção continua ...
-  <h3 class = "subseção implícita"> Habitat </h3>
-    <p>Os elefantes da floresta não vivem em árvores, mas entre elas.
-      ... esta subseção continua ...</p>
-</section>
-
- -

levando ao seguinte esboço:

- -
1. Elefantes da floresta
-   1.1 Habitat (definido implicitamente pelo elemento h3)
-
- -

Se for da mesma classificação que o título do cabeçalho anterior, fecha a seção anterior (que pode ter sido explícita!) e abre uma nova implícita no mesmo nível:

- -
<section>
-  <h1> Elefantes da floresta </h1>
-  <p> Nesta seção, discutiremos os elefantes da floresta menos conhecidos.
-    ... esta seção continua ...
-  <h1 class = "seção implícita"> Gerbos da Mongólia </h1>
-  <p>Os gerbos da Mongólia são pequenos mamíferos fofos.
-    ... esta seção continua ...</p>
-</section>
-
- -

levando ao seguinte esboço:

- -
1. Elefantes da floresta
-2. Gerbos da Mongólia (implicitamente definidos pelo elemento h1, que fechou a seção anterior ao mesmo tempo)
-
- -

Se tiver uma classificação mais alta que o título do cabeçalho anterior, fecha a seção anterior e abre uma nova implícita no nível mais alto:

- -
<body>
-  <h1> Mamíferos </h1>
-  <h2> Baleias </h2>
-  <p> Nesta seção, discutimos as baleias nadadoras.
-    ... esta seção continua ...</p>
-  <section>
-    <h3> Elefantes da floresta </h3>
-    <p> Nesta seção, discutiremos os elefantes da floresta menos conhecidos.
-      ... esta seção continua ...</p>
-    <h3> Gerbos da Mongólia </h3>
-      <p> Hordas de gerbos se espalharam muito além da Mongólia.
-        ... esta subseção continua ...</p>
-    <h2> Répteis </h2>
-      <p>Répteis são animais com sangue frio.
-        ... esta subseção continua ...</p>
-  </section>
-</body>
-
- -

levando ao seguinte esboço:

- -
1. Mamíferos
-   1.1 Baleias (definidos implicitamente pelo elemento h2)
-   1.2 Elefantes da floresta (definidos explicitamente pelo elemento de seção)
-   1.3 Gerbos da Mongólia (implicitamente definidos pelo elemento h3, que fecha a seção anterior ao mesmo tempo)
-   1.4 Répteis (definidos implicitamente pelo elemento h2, que fecha a seção anterior ao mesmo tempo)
-
-
- -

Este não é o esquema que se pode esperar olhando rapidamente para as tags de cabeçalho. Para tornar sua marcação compreensível por humanos, é uma boa prática usar tags explícitas para abrir e fechar seções e corresponder a classificação do cabeçalho ao nível de aninhamento de seção pretendido. No entanto, isso não é exigido pela especificação do HTML5. Se você achar que os navegadores estão processando o esboço do documento de maneiras inesperadas, verifique se há seções que estão implicitamente fechadas pelos elementos de cabeçalho.

- -

Uma exceção à regra geral de que a classificação do cabeçalho deve corresponder ao nível de aninhamento de seção é para seções que podem ser reutilizadas em vários documentos. Por exemplo, uma seção pode ser armazenada em um CMS (Content Management System) e montada em documentos em tempo de execução. Nesse caso, uma boa prática é começar em {{HTMLElement ("h1")}} para o nível de cabeçalho superior da seção reutilizável. O nível de aninhamento da seção reutilizável será determinado pela hierarquia da seção do documento em que ela aparece. Tags de seção explícitas ainda são úteis nesse caso.

- -

Sobrepondo seções implícitas

- -

 Às vezes, uma seção precisa ter vários títulos. Alguns casos comuns são:

- - - -

Devido ao corte implícito, isso não é possível sem a ajuda do Elemento do Grupo de Cabeçalhos HTML ({{HTMLElement ("hgroup")}} introduzido no HTML5). Ele oculta todos os títulos de cabeçalhos do esboço, exceto o primeiro, permitindo uma substituição do corte implícito. Com esse elemento, o exemplo do livro secundário:

- -
<section>
-  <hgroup>
-    <h1>Justine</h1>
-    <h2>Les Malheurs de la vertu</h2>
-  </hgroup>
-</section>
-
- -

leads to the following outline:

- -
1. Justine
-
- -

Caminhos de seção

- -

 Uma raiz de seção é um elemento HTML que pode ter seu próprio esboço, mas as seções e os títulos de cabeçalho dentro deles não contribuem para o esboço de seus ancestrais. Ao lado de {{HTMLElement ("body")}}, que é a raiz de seção lógica de um documento, geralmente são elementos que introduzem conteúdo externo na página: {{HTMLElement ("blockquote")}}, {{HTMLElement ("detalhes ")}}, {{HTMLElement (" fieldset ")}}, {{HTMLElement (" figura ")}} e {{HTMLElement (" td ")}}.

- -

Exemplo:

- -
<section>
-  <h1> Elefantes da floresta </h1>
-  <section>
-    <h2> Introdução </h2>
-    <p> Nesta seção, discutiremos os elefantes da floresta menos conhecidos</p>
-  </section>
-  <section>
-    <h2> Habitat </h2>
-    <p>Os elefantes da floresta não vivem em árvores, mas entre eles. Vamos
-      veja o que os cientistas estão dizendo em "<cite> O elefante da floresta em Bornéu </cite>":
-    <blockquote>
-      <h1> Bornéu</h1>
-      <p> O elemento florestal vive em Bornéu ...</p>
-    </blockquote>
-  </section>
-</section>
-
- -

Este exemplo resulta no seguinte esboço:

- -
1. Elefantes da floresta
-   1.1 Introdução
-   1.2 Habitat
-
- -

Este esboço não contém o esboço interno do elemento {{HTMLElement ("blockquote")}}, que, sendo uma citação externa, é uma raiz de seção e isola seu esboço interno.

- -

Seções de fora da estrutura

- -

O HTML5 apresenta quatro novos elementos que permitem definir seções que não pertencem ao esquema principal de um documento da web:

- -
    -
  1. O elemento HTML Aside Section ({{HTMLElement ("apart")}})) define uma seção que, embora relacionada ao elemento principal, não pertence ao fluxo principal, como uma caixa de explicação ou um anúncio. Ele tem seu próprio esboço, mas não pertence ao principal.
    2. -
  2. O elemento de seção de navegação HTML ({{HTMLElement ("nav")}}) define uma seção que contém links de navegação. Pode haver vários deles em um documento, por exemplo, um com links internos da página, como uma tabela de conteúdo, e outro com links de navegação no site. Esses links não fazem parte do fluxo e estrutura de tópicos principais e geralmente não podem ser renderizados inicialmente pelo leitor de tela e tecnologia assistida semelhante.
    3. -
  3. O elemento da seção de cabeçalho HTML ({{HTMLElement ("header")}}) define um cabeçalho da página, geralmente contendo o logotipo e o nome do site e, possivelmente, um menu horizontal. Apesar do nome, ele não está necessariamente posicionado no início da página.
    4. -
  4. O elemento HTML da seção do rodapé ({{HTMLElement ("rodapé")}}) define um rodapé da página, normalmente contendo os direitos autorais e legais observados e algumas vezes alguns links. Apesar do nome, ele não está necessariamente posicionado na parte inferior da página.
    5. -
- -

Endereços e horário de publicação nos elementos de seção

- -

O autor de um documento geralmente deseja publicar algumas informações de contato, como o nome e o endereço do autor. O HTML4 permitiu isso por meio do elemento {{HTMLElement ("address")}}, que foi estendido no HTML5.

- -

Um documento pode ser feito de seções diferentes de diferentes autores. Uma seção de outro autor que não a da página principal é definida usando o elemento {{HTMLElement ("article")}}. Consequentemente, o elemento {{HTMLElement ("address")}} agora está vinculado ao seu ancestral mais próximo {{HTMLElement ("body")}} ou {{HTMLElement ("article")}}.

- -

Da mesma forma, o novo elemento HTML5 {{HTMLElement ("time")}}, com seu conjunto de atributos booleanos {{htmlattrxref ("pubdate", "time")}}, representa a data de publicação associada ao documento inteiro, respectivamente ao artigo, relacionado ao ancestral mais próximo {{HTMLElement ("body")}} ou {{HTMLElement ("article")}}.

- -

Usando elementos HTML5 em navegadores não-HTML5

- -

Os elementos de seções e títulos devem funcionar na maioria dos navegadores não HTML5. Embora não sejam suportados, eles não precisam de uma interface DOM (Document Object Model) especial e precisam apenas de um estilo CSS específico, pois elementos desconhecidos são estilizados como display: inline por padrão:

- -
section, article, aside, footer, header, nav, hgroup {
-  display:block;
-}
-
- -

É claro que o Desenvolvedor Web pode estilizá-los de maneira diferente, mas lembre-se de que em um navegador que não dar suporte ao HTML5, o estilo padrão é diferente do esperado para esses elementos. Observe também que o elemento {{HTMLElement ("time")}} não foi incluído, porque o estilo padrão para ele em um navegador que não suporta HTML5 é o mesmo que em um navegador compatível com HTML5.

- -

Esse método tem sua limitação, pois alguns navegadores não permitem o estilo de elementos não suportados. Que é o caso do Internet Explorer (versão 8 e anterior), que precisa de um script específico para permitir isso:

- -
<!--[if lt IE 9]>
-  <script>
-    document.createElement("header" );
-    document.createElement("footer" );
-    document.createElement("section");
-    document.createElement("aside"  );
-    document.createElement("nav"    );
-    document.createElement("article");
-    document.createElement("hgroup" );
-    document.createElement("time"   );
-  </script>
-<![endif]-->
-
- -

Esse script significa que, no caso do Internet Explorer (8 e versões anteriores), o script deve ser ativado para exibir os elementos de seção e títulos do HTML5 corretamente. Caso contrário, eles não serão exibidos, o que pode ser problemático, pois esses elementos provavelmente definem a estrutura da página inteira. É por isso que um elemento explícito {{HTMLElement ("noscript")}} deve ser adicionado para este caso:

- -
<noscript>
-  <strong> Aviso! </strong>
-  Como o seu navegador não suporta HTML5, alguns elementos são simulados usando o JScript.
-  Infelizmente, seu navegador desativou o script. Ative-o para exibir esta página.
-</noscript>
-
- -

Isso leva ao código a seguir para permitir o suporte das seções e elementos dos cabeçalhos HTML5 em navegadores que não suportam HTML5, mesmo para o Internet Explorer (8 e versões anteriores), com um plano b adequado para o caso em que este último navegador está configurado para não usar scripts :

- -
<!--[if lt IE 9]>
-  <script>
-    document.createElement("header" );
-    document.createElement("footer" );
-    document.createElement("section");
-    document.createElement("aside"  );
-    document.createElement("nav"    );
-    document.createElement("article");
-    document.createElement("hgroup" );
-    document.createElement("time"   );
-  </script>
-  <noscript>
-     <strong>Aviso !</strong>
-     Seu navegador web não suporta HTML5, e devido a isso alguns recursos são simulados usando JScript.
-     Infelizmente seu navegador desativou a execução de scripts. Por favor ative esse recurso para que esta página seja exibida corretamente.
-  </noscript>
-<![endif]--> 
-
- -

Conclusão

- -

Os novos elementos de seção e cabeçalho introduzidos no HTML5 trazem consigo a habilidade de descrever a estrutura de um documento web de modo padronizado. Eles trazem uma grande vantagem para pessoas com navegadores HTML5 e que precisam da estrutura para ajudá-las a entender a página, por exemplo pessoas que utilizam alguma tecnologia assistiva. Esses novos elementos semânticos são simples de usar e, com pouquíssimo trabalho, podem funcionar também em navegadores não-HTML5. Portanto eles devem ser utilizados sem restrição.

diff --git a/files/pt-br/orphaned/web/html/element/command/index.html b/files/pt-br/orphaned/web/html/element/command/index.html deleted file mode 100644 index 849232e71d..0000000000 --- a/files/pt-br/orphaned/web/html/element/command/index.html +++ /dev/null @@ -1,130 +0,0 @@ ---- -title: command -slug: orphaned/Web/HTML/Element/command -translation_of: Web/HTML/Element/command -original_slug: Web/HTML/Element/command ---- -

Sumário

- -

O elemento command representa um comando que o usuário pode chamar.

- -

Contexto de uso

- - - - - - - - - - - - - - - - - - - - - - - - -
Categorias de conteúdoFlow content, phrasing content
Elementos permitidosNenhum, é um elemento vazio.
Omissão de tagDeve ter uma tag inicial, mas não deve ter uma tag final.
Elementos pais permitidosQualquer elemento que aceite phrasing content.
Documento normativoHTML5, section 4.11.3
- -

Atributos

- -

Como todos ou outros elementos HTML, esse elemento suporta os global attributes.

- -
-
{{ htmlattrdef("checked") }}
-
Indica se o comando está selecionado ou não. Deve ser omitido a não ser que o atributo type seja checkbox ou radio.
-
{{ htmlattrdef("disabled") }}
-
Indica que o elemento não está disponível.
-
{{ htmlattrdef("icon") }}
-
Atribui uma figura para representar o comando.
-
{{ htmlattrdef("label") }}
-
O nome do comando, como será mostrado para o usuário.
-
{{ htmlattrdef("radiogroup") }}
-
Esse atributo dá o nome de um grupo de comandos, com type sendo radio, que vai ser ativado quando o comando for ativado. Esse atributo deve ser omitido a não ser que o atributo type seja radio.
-
{{ htmlattrdef("type") }}
-
Esse atributo indica o tipo do comando. Pode ter somente os seguintes valores: -
    -
  • -

    command ou vazio que é o estado padrão e indica que é um comando normal.

    -
    • -
  • -

    checkbox indica que o comando pode ser alternado utilizando uma caixa de seleção.

    -
    • -
  • -

    radio indica que o comando pode ser alternado utilizando uma radiobutton.

    -
    • -
-
-
- -

Interface do DOM

- -

Esse elemetno implementa a interface HTMLCommandElement.

- -

Exemplos

- -
<command type="command" label="Save" icon="icons/save.png" onclick="save()">
-
- -

Compatibilidade de navegadores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
RecursoChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
-
- -
- - - - - - - - - - - - - - - - - - - -
RecursoAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
-
- -

 

- -

{{ languages( { "zh-cn": "zh-cn/HTML/Element/command" } ) }}

diff --git a/files/pt-br/orphaned/web/html/favicon/index.html b/files/pt-br/orphaned/web/html/favicon/index.html deleted file mode 100644 index 019f336089..0000000000 --- a/files/pt-br/orphaned/web/html/favicon/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: favicon -slug: orphaned/Web/HTML/favicon -original_slug: Web/HTML/favicon ---- -

 

- -

 

- -

Comentário da revisão

- -
-

 

- -

Diga-nos porque fez adições e alterações. É opcional, mas irá fazer com que o histórico da página seja mais fácil de entender.

-
- -
-

É necessário revisão?

- -
    -
    • -
    • -
-
- -
-

 

-
- -

Tags

- -

 

diff --git a/files/pt-br/orphaned/web/html/preloading_content/index.html b/files/pt-br/orphaned/web/html/preloading_content/index.html deleted file mode 100644 index 3c9e184272..0000000000 --- a/files/pt-br/orphaned/web/html/preloading_content/index.html +++ /dev/null @@ -1,238 +0,0 @@ ---- -title: Preloading content with rel="preload" -slug: orphaned/Web/HTML/Preloading_content -translation_of: Web/HTML/Preloading_content -original_slug: Web/HTML/Preloading_content ---- -

O valor preload do atributo rel do elemento <link> permite que você escreva solicitações de busca declarativas em seu elemento <head> do HTML, especificando recursos que suas páginas vão precisar logo após o carregamento. Você também pode querer que estes recursos sejam pré-carregados no início do ciclo de vida da página e depois que o mecanismo de renderização do navegador comece a agir. Isso garante que estarão disponíveis mais cedo e que seja menos provável que sua página seja bloqueada do processo de renderizar. Isso aumenta a performance da página. Este artigo oferece um guia básico de como preload funciona.

- -

O básico

- -

Você comumente usa o elemento <link> quando carrega um arquivo de estilo CSS para sua pagina com:

- -
<link rel="stylesheet" href="styles/main.css">
- -

No entanto, aqui nós usamos rel com valor preload, que transforma o elemento <link> em um preloader para praticamente qualquer recurso que você precisar. Você também precisa especificar

- - - -

Um exemplo simples pode se parecer com o seguinte (veja seus JS and CSS example source, e also live):

- -
<head>
-  <meta charset="utf-8">
-  <title>JS and CSS preload example</title>
-
-  <link rel="preload" href="style.css" as="style">
-  <link rel="preload" href="main.js" as="script">
-
-  <link rel="stylesheet" href="style.css">
-</head>
-
-<body>
-  <h1>bouncing balls</h1>
-  <canvas></canvas>
-
-  <script src="main.js"></script>
-</body>
- -

Aqui estamos pré-carregando seus arquivos CSS e JavaScript de forma que estarão disponíveis assim que forem necessários mais tarde durante a renderização da página. Este exemplo é um pouco trivial, visto que o browser provavelmente descobre os elementos <link rel="stylesheet">  e <script> no mesmo pedaço de HTML que os preloads, mas o benefício pode ser visto mais claramente, quanto mais tarde os recursos são descobertos e quanto maiores forem eles. Por exemplo:

- - - -

preload também possui outras vantagens. Usando o atributo as para especificar o tipo de conteúdo a ser pre-carregado permite que o browser:

- - - -

Qual tipo de conteúdo pode ser pré-carregado?

- -

Muitos diferentes tipos de conteúdo podem ser pré-carregados. Os valores possíveis para o atributo as são os seguintes:

- - - -
-

Nota: Você pode ler um pouco mais sobre estes valores e os recursos da web que eles esperam consumir na especificação Preload — veja link element extensions. Observe também que a lista completa de valores que o atributo as  pode assumir é regida pelas definiçoes nas especificaçoes Fetch — veja request destinations.

-
- -

Incluindo um tipo MIME

- -

<link> pode aceitar um atributo {{htmlattrxref("type", "link")}}, o qual contém o MIME type do recurso para o qual o elemento está apontando. Isto é especialmente útil quando pre-carregando recursos — o browser usará o valor do atributo type para trabalhar se ele suportar o recurso, e irá somente iniciar o carregamento se este for o caso, ignorando se não for.

- -

Você pode ver um exemplo disto no nosso exemplo de video (veja o full source code, e também the live version):

- -
<head>
-  <meta charset="utf-8">
-  <title>Video preload example</title>
-
-  <link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4">
-</head>
-<body>
-  <video controls>
-    <source src="sintel-short.mp4" type="video/mp4">
-    <source src="sintel-short.webm" type="video/webm">
-    <p>Your browser doesn't support HTML5 video. Here is a <a href="sintel-short.mp4">link to the video</a> instead.</p>
-  </video>
-</body>
- -

Então neste caso, navegadores que suportem MP4s vão pré-carregar e usar MP4, fazendo o reprodutor de video esperançosamente mais suave/mais responsivo para os usuários. Browsers que não suportem MP4 podem continuar carregando versao WebM, mas não tem as vantagens do pré-carregamento. Isto mostra como conteudo pré-carregado pode ser combinado com a filosofia de aprimoramento progressivo.

- -

Buscas de origem cruzada

- -

Se você tem no seu site as configurações de CORS funcionando corretamente, você pode pré-carregar com sucesso recursos de origem cruzada, desde que você defina um atributo {{htmlattrxref("crossorigin","link")}} no seu elemento <link>.

- -

Um caso interessante em que isso se aplica mesmo se a busca não é de origem cruzada é arquivos de fonte. Por várias razões, elas precisam ser buscadas usando o modo anônimo CORS (veja Font fetching requirements se você esta interesado em todos os detalhes).

- -

Vamos usar este caso como um exemplo, em primeiro lugar porque o carregamento de fontes é realmente um bom caso de uso para pré-carregamento e, em segundo lugar, porque é mais fácil do que configurar um exemplo de solicitação de origem cruzada. Voce pode ver o exemplo completo no source code on GitHub (also see it live):

- -
<head>
-  <meta charset="utf-8">
-  <title>Web font example</title>
-
-  <link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
-  <link rel="preload" href="fonts/zantroke-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
-
-  <link href="style.css" rel="stylesheet" type="text/css">
-</head>
-<body>
-  ...
-</body>
- -

Você verá aqui que não apenas estamos fornecendo as dicas do tipo MIME nos atributos de tipo, mas também estamos fornecendo o atributo  crossorigin para lidar com os problemas de CORS..

- -

Adicionando media

- -

Um bom recurso de alemento <link> é sua abilidade de aceitar atributos {{htmlattrxref("media", "link")}}. Estes podem aceitar media types ou full-blown media queries, permitindo que você faça o pré-carregamento responsivo!

- -

Vamos ver um exemplo simples (see it on GitHub — source code, live example):

- -
<head>
-  <meta charset="utf-8">
-  <title>Responsive preload example</title>
-
-  <link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600px)">
-  <link rel="preload" href="bg-image-wide.png" as="image" media="(min-width: 601px)">
-
-  <link rel="stylesheet" href="main.css">
-</head>
-<body>
-  <header>
-    <h1>My site</h1>
-  </header>
-
-  <script>
-    var mediaQueryList = window.matchMedia("(max-width: 600px)");
-    var header = document.querySelector('header');
-
-    if(mediaQueryList.matches) {
-      header.style.backgroundImage = 'url(bg-image-narrow.png)';
-    } else {
-      header.style.backgroundImage = 'url(bg-image-wide.png)';
-    }
-  </script>
-</body>
- -

Você verá que estamos incluindo atributos de mídia em nossos <link> elementos, de modo que um estreita imagem é pre-carregada se o usuario estiver em um dispositivo de tela estreita, e uma imagem mais ampla é carregada se eles estiverem em um dispositivo de tela maior. Ainda precisamos anexar a imagem correta ao cabeçalho, dependendo do resultado — nos usamos {{domxref("Window.matchMedia")}} / {{domxref("MediaQueryList")}} para fazer isso (veja Testing media queries para mais informaçoes sobre isso).

- -

Isso torna muito mais provável que a fonte estará disponível no momento em que a renderização da página for concluída, reduzindo os problemas de FOUT (flash de texto sem estilo).

- -

Note que isso não precisa ser limitado a imagens, ou até mesmo arquivos do mesmo tipo - pense grande! Talvez você pré-carregue e exiba um diagrama SVG simples se o usuário estiver em uma tela estreita em que a largura de banda e CPU é potencialmente mais limitada ou pré-carregue um bloco complexo de JavaScript e use-o para renderizar um modelo 3D interativo se os recursos do usuário forem mais abundantes.

- -

Scripting and preloads

- -

Outra coisa legal sobre preloads é que você pode executá-los completamente com script, se desejar. Por exemplo, aqui estamos criando uma instancia {{domxref("HTMLLinkElement")}}, em seguida anexando-o ao DOM:

- -
var preloadLink = document.createElement("link");
-preloadLink.href = "myscript.js";
-preloadLink.rel = "preload";
-preloadLink.as = "script";
-document.head.appendChild(preloadLink);
-
- -

Isso significa que o navegador pré-carregará o arquivo JavaScript, mas ainda não o utilizará.

- -

Para usalo, você poderia fazer isso quando desejado:

- -
var preloadedScript = document.createElement("script");
-preloadedScript.src = "myscript.js";
-document.body.appendChild(preloadedScript);
-
- -

Isso é útil quando você deseja pré-carregar um script, mas adia executá-lo até exatamente quando precisar.

- -

Outros mecanismos de pré-carregamento de recursos

- -

Existem outros recursos de pré-carregamento, mas nenhum é tão adequado ao propósito  <link rel="preload">:

- - - -

Especificações

- - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Preload','#x2.link-type-preload','preload')}}{{Spec2('Preload')}}mais detalhes sobre  preload.
{{SpecName('HTML WHATWG', 'link-type-preload', 'rel=preload')}}{{Spec2('HTML WHATWG')}}definições de rel=preload.
- -

Compatibilidade com navegadores

- -

{{Compat("html.elements.link.rel.preload")}}

- -

Veja também

- - - -

{{QuickLinksWithSubpages("/en-US/docs/Web/HTML")}}

diff --git "a/files/pt-br/orphaned/web/javascript/guide/cole\303\247\303\265es_chaveadas/index.html" "b/files/pt-br/orphaned/web/javascript/guide/cole\303\247\303\265es_chaveadas/index.html" deleted file mode 100644 index 0328d76216..0000000000 --- "a/files/pt-br/orphaned/web/javascript/guide/cole\303\247\303\265es_chaveadas/index.html" +++ /dev/null @@ -1,150 +0,0 @@ ---- -title: Coleções chaveadas -slug: orphaned/Web/JavaScript/Guide/Coleções_chaveadas -tags: - - Coleções - - Guía - - JavaScript - - Mapas -original_slug: Web/JavaScript/Guide/Coleções_chaveadas ---- -
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Indexed_Collections", "Web/JavaScript/Guide/Working_with_Objects")}}
- -

This chapter introduces collections of data which are ordered by a key; Map and Set objects contain elements which are iterable in the order of insertion.

- -

Maps

- -

Map object

- -

ECMAScript 6 introduces a new data structure to map values to values. A {{jsxref("Map")}} object is a simple key/value map and can iterate its elements in insertion order

- -

The following code shows some basic operations with a Map. See also the {{jsxref("Map")}} reference page for more examples and the complete API. You can use a {{jsxref("Statements/for...of","for...of")}} loop to return an array of [key, value] for each iteration.

- -
var sayings = new Map();
-sayings.set("dog", "woof");
-sayings.set("cat", "meow");
-sayings.set("elephant", "toot");
-sayings.size; // 3
-sayings.get("fox"); // undefined
-sayings.has("bird"); // false
-sayings.delete("dog");
-
-for (var [key, value] of sayings) {
-  console.log(key + " goes " + value);
-}
-// "cat goes meow"
-// "elephant goes toot"
-
- -

Object and Map compared

- -

Traditionally, {{jsxref("Object", "objects", "", 1)}} have been used to map strings to values. Objects allow you to set keys to values, retrieve those values, delete keys, and detect whether something is stored at a key. Map objects, however, have a few more advantages that make them better maps.

- - - -

These two tips can help you to decide whether to use a Map or an Object:

- - - -

WeakMap object

- -

The {{jsxref("WeakMap")}} object is a collection of key/value pairs in which the keys are objects only and the values can be arbitrary values. The object references in the keys are held weakly meaning that they are target of garbage collection (GC) if there is no other reference to the object anymore. The WeakMap API is the same as the Map API.

- -

One difference to Map objects is that WeakMap keys are not enumerable (i.e. there is no method giving you a list of the keys). If they were, the list would depend on the state of garbage collection, introducing non-determinism.

- -

For more information and example code, see also "Why WeakMap?" on the {{jsxref("WeakMap")}} reference page.

- -

One use case of WeakMap objects is to store private data for an object or to hide implementation details. The following example is from Nick Fitzgerald blog post "Hiding Implementation Details with ECMAScript 6 WeakMaps". The private data and methods belong inside the object and are stored in the privates WeakMap object. Everything exposed on the instance and prototype is public; everything else is inaccessible from the outside world because privates is not exported from the module

- -
const privates = new WeakMap();
-
-function Public() {
-  const me = {
-    // Private data goes here
-  };
-  privates.set(this, me);
-}
-
-Public.prototype.method = function () {
-  const me = privates.get(this);
-  // Do stuff with private data in `me`...
-};
-
-module.exports = Public;
-
- -

Sets

- -

Set object

- -

{{jsxref("Set")}} objects are collections of values. You can iterate its elements in insertion order. A value in a Set may only occur once; it is unique in the Set's collection.

- -

The following code shows some basic operations with a Set. See also the {{jsxref("Set")}} reference page for more examples and the complete API.

- -
var mySet = new Set();
-mySet.add(1);
-mySet.add("some text");
-mySet.add("foo");
-
-mySet.has(1); // true
-mySet.delete("foo");
-mySet.size; // 2
-
-for (let item of mySet) console.log(item);
-// 1
-// "some text"
-
- -

Converting between Array and Set

- -

You can create an {{jsxref("Array")}} from a Set using {{jsxref("Array.from")}} or the spread operator. Also, the Set constructor accepts an Array to convert in the other direction. Note again that Set objects store unique values, so any duplicate elements from an Array are deleted when converting.

- -
Array.from(mySet);
-[...mySet2];
-
-mySet2 = new Set([1,2,3,4]);
-
- -

Array and Set compared

- -

Traditionally, a set of elements has been stored in arrays in JavaScript in a lot of situations. The new Set object, however, has some advantages:

- - - -

WeakSet object

- -

{{jsxref("WeakSet")}} objects are collections of objects. An object in the WeakSet may only occur once; it is unique in the WeakSet's collection and objects are not enumerable.

- -

The main differences to the {{jsxref("Set")}} object are:

- - - -

The use cases of WeakSet objects are limited. They will not leak memory so it can be safe to use DOM elements as a key and mark them for tracking purposes, for example.

- -

Key and value equality of Map and Set

- -

Both, the key equality of Map objects and the value equality of Set objects, are based on the "same-value-zero algorithm":

- - - -

{{PreviousNext("Web/JavaScript/Guide/Indexed_Collections", "Web/JavaScript/Guide/Working_with_Objects")}}

diff --git a/files/pt-br/orphaned/web/javascript/guide/sintaxe_e_tipos/index.html b/files/pt-br/orphaned/web/javascript/guide/sintaxe_e_tipos/index.html deleted file mode 100644 index 2bf5fe39b9..0000000000 --- a/files/pt-br/orphaned/web/javascript/guide/sintaxe_e_tipos/index.html +++ /dev/null @@ -1,584 +0,0 @@ ---- -title: Sintaxe e tipos -slug: orphaned/Web/JavaScript/Guide/Sintaxe_e_tipos -original_slug: Web/JavaScript/Guide/Sintaxe_e_tipos ---- -
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Control_flow_and_error_handling")}}
- -

Este capítulo trata sobre a sintaxe básica do JavaScript, declarações de variáveis, tipos de dados e literais.

- -

Sintaxe básica

- -

JavaScript pega emprestado a maior parte de sua sintaxe do Java, mas também é influenciado por Awk, Perl e Python.

- -

JavaScript é case-sensitive e usa o conjunto de caracteres Unicode.

- -

No JavaScript, instruções são chamadas de {{Glossary("Statement", "declarações")}} e são separadas por um ponto e vírgula (;). Espaços, tabulação e uma nova linha são chamados de espaços em branco. O código fonte dos scripts em JavaScript são lidos da esquerda para a direita e são convertidos em uma sequência de elementos de entrada como simbolos, caracteres de controle, terminadores de linha, comentários ou espaço em branco. ECMAScript também define determinadas palavras-chave e literais, e tem regras para inserção automática de ponto e vírgula (ASI) para terminar as declarações. No entanto, recomenda-se sempre adicionar ponto e vírgula no final de suas declarações; isso evitará alguns imprevistos. Para obter mais informações, consulte a referência detalhada sobre a gramática léxica do JavaScript.

- -

Comentários

- -

A sintaxe dos comentários em JavaScript é semelhante como em C++ e em muitas outras linguagens:

- -
// comentário de uma linha
-
-/* isto é um comentário longo
-   de múltiplas linhas.
- */
-
-/* Você não pode, porém, /* aninhar comentários */ SyntaxError */
- -

Declarações

- -

Existem três tipos de declarações em JavaScript.

- -
-
{{jsxref("Statements/var", "var")}}
-
Declara uma variável, opcionalmente, inicializando-a com um valor.
-
{{experimental_inline}} {{jsxref("Statements/let", "let")}}
-
Declara uma variável local de escopo do bloco, opcionalmente, inicializando-a com um valor.
-
{{experimental_inline}} {{jsxref("Statements/const", "const")}}
-
Declara uma constante apenas de leitura.
-
- -

Variáveis

- -

Você usa variáveis como nomes simbólicos para os valores em sua aplicação. O nome das variáveis, chamados de {{Glossary("Identifier", "identificadores")}}, obedecem determinadas regras.

- -

Um identificador JavaScript deve começar com uma letra, underline (_), ou cifrão ($); os caracteres subsequentes podem também ser números (0-9). Devido JavaScript ser case-sensitive, letras incluem caracteres de "A" a "Z" (maiúsculos) e caracteres de "a" a "z" (minúsculos).

- -

Você pode usar a ISO 8859-1 ou caracteres Unicode tal como os identificadores å e ü. Você pode também usar as sequências de escape Unicode como caracteres e identificadores.

- -

Alguns exemplos de nomes legais são Numeros_visitas, temp99, e _nome.

- -

Declarando variáveis

- -

Você pode declarar uma variável de três formas:

- - - -

Classificando variáveis

- -

Uma variável declarada usando a declaração var ou let sem especificar o valor inicial tem o valor  {{jsxref("undefined")}}.

- -

Uma tentativa de acessar uma variável não declarada resultará no lançamento de uma exceção {{jsxref("ReferenceError")}}:

- -
var a;
-console.log("O valor de a é " + a); // saída "O valor de a é undefined"
-console.log("O valor de b é " + b); // throws ReferenceError exception
-
- -

Você pode usar undefined para determinar se uma variável tem um valor. No código a seguir, não é atribuído um valor de entrada na variável e a declaração if será avaliada como verdadeira (true).

- -
var input;
-if(input === undefined){
-  facaIsto();
-} else {
-  facaAquilo();
-}
-
- -

O valor undefined se comporta como falso (false), quando usado em um contexto booleano. Por exemplo, o código a seguir executa a função myFunction devido o elemento myArray ser undefined:

- -
var myArray = [];
-if (!myArray[0]) myFunction();
-
- -

O valor undefined converte-se para NaN quando usado no contexto numérico.

- -
var a;
-a + 2;  // Avaliado como NaN
-
- -

Quando você avalia uma variável nula, o valor nulo se comporta como 0 em contextos numéricos e como falso em contextos booleanos. Por exemplo:

- -
var n = null;
-console.log(n * 32); // a saída para o console será 0.
-
- -

Escopo de variável

- -

Quando você declara uma váriavel fora de qualquer função, ela é chamada de variável global, porque está disponível para qualquer outro código no documento atual. Quando você declara uma variável dentro de uma função, é chamada de variável local,  pois ela está disponível somente dentro dessa função.

- -

JavaScript antes do ECMAScript 6 não possuía escopo de declaração de bloco; pelo contrário, uma variável declarada dentro de um bloco de uma função é uma variável local (ou contexto global) do bloco que está inserido a função. Por exemplo o código a seguir exibirá 5, porque o escopo de x está na função (ou contexto global) no qual x é declarado, não o bloco, que neste caso é a declaração if. 

- -
if (true) {
-  var x = 5;
-}
-console.log(x);  // 5
-
- -

Esse comportamento é alterado, quando usado a declaração let introduzida pelo ECMAScript 6.

- -
if (true) {
-  let y = 5;
-}
-console.log(y);  // ReferenceError: y não está definido
-
- -

Hoisting

- -

Outra coisa incomum sobre variáveis em JavaScript é que você pode utilizar a variável e declará-la depois, sem obter uma exceção. Este conceito é conhecido como hoisting; variáveis em JavaScript são num sentido "hoisted" ou lançada para o topo da função ou declaração. No entanto, as variáveis que são "hoisted" retornarão um valor undefined. Então, mesmo se você usar ou referir a variável e depois declará-la e inicializá-la, ela ainda retornará undefined.

- -
/**
- * Exemplo 1
- */
-console.log(x === undefined); // exibe "true"
-var x = 3;
-
-/**
- * Exemplo 2
- */
-// returnará um valor undefined
-var myvar = "my value";
-
-(function() {
-  console.log(myvar); // undefined
-  var myvar = "local value";
-})();
-
- -

Os exemplos acima serão interpretados como:

- -
/**
- * Exemplo 1
- */
-var x;
-console.log(x === undefined); // exibe "true"
-x = 3;
-
-/**
- * Exemplo 2
- */
-var myvar = "um valor";
-
-(function() {
-  var myvar;
-  console.log(myvar); // undefined
-  myvar = "valor local";
-})();
-
- -

Devido o hoisting, todas as declarações var em uma função devem ser colocadas no início da função. Essa recomendação de prática deixa o código mais legível.

- -

Variáveis Globais

- -

Variáveis globais são propriedades do objeto global. Em páginas web o objeto global é a {{domxref("window")}}, assim você pode configurar e acessar variáveis globais utilizando a sintaxe window.variavel. 

- -

Consequentemente, você pode acessar variáveis globais declaradas em uma janela ou frame ou frame de outra janela. Por exemplo, se uma variável chamada phoneNumber é declarada em um documento, você pode consultar esta variável de um frame como parent.phoneNumber.

- -

Constantes

- -

Você pode criar uma constante apenas de leitura por meio da palavra-chave {{jsxref("Statements/const", "const")}}. A sintaxe de um identificador de uma constante é semelhante ao identificador de uma variável: deve começar com uma letra, underline ou cifrão e pode conter caracteres alfabético, numérico ou underline.

- -
const prefix = '212';
-
- -

Uma constante não pode alterar seu valor por meio de uma atribuição ou ao ser declarada novamente enquanto o script é executado. Deve ser inicializada com um valor.

- -

As regras de escopo para as constantes são as mesmas para as váriaveis let de escopo de bloco. Se a palavra-chave const for omitida, o identificado é adotado para representar uma variável.

- -

Você não pode declarar uma constante com o mesmo nome de uma função ou variável que estão no mesmo escopo. Por exemplo: 

- -
// Isto irá causar um  erro
-function f() {};
-const f = 5;
-
-// Isto também irá causar um erro.
-function f() {
-  const g = 5;
-  var g;
-
-  //declarações
-}
-
- -

Estrutura de dados e tipos

- -

Tipos de dados

- -

O mais recente padrão ECMAScript define sete tipos de dados:

- - - -

Embora esses tipos de dados sejam uma quantidade relativamente pequena, eles permitem realizar funções úteis em suas aplicações.  {{jsxref("Object", "Objetos")}} e {{jsxref("Function", "funçõess")}} são outros elementos fundamentais na linguagem. Você pode pensar em objetos como recipientes para os valores, e funções como métodos que suas aplicações podem executar.

- -

Conversão de tipos de dados

- -

JavaScript é uma linguagem dinamicamente tipada. Isso significa que você não precisa especificar o tipo de dado de uma variável quando declará-la, e tipos de dados são convertidos automaticamente conforme a necessidade durante a execução do script. Então, por exemplo, você pode definir uma variável da seguinte forma:

- -
var answer = 42;
-
- -

E depois, você pode atribuir uma string para a mesma variável, por exemplo:

- -
answer = "Obrigado pelos peixes...";
-
- -

Devido JavaScript ser dinamicamente tipado, essa declaração não gera uma mensagem de erro.

- -

Em expressões envolvendo valores numérico e string com o operador +, JavaScript converte valores numérico para strings. Por exemplo, considere a seguinte declaração:

- -
x = "A resposta é " + 42 // "A resposta é 42"
-y = 42 + " é a resposta" // "42 é a resposta"
-
- -

Nas declarações envolvendo outros operadores,  JavaScript não converte valores numérico para strings. Por exemplo:

- -
"37" - 7 // 30
-"37" + 7 // "377"
-
- -

Convertendo strings para números

- -

No caso de um valor que representa um número está armazenado na memória como uma string, existem métodos para a conversão.

- - - -

parseInt irá retornar apenas números inteiros, então seu uso é restrito para a casa dos decimais. Além disso, é uma boa prática ao usar parseInt incluir o parâmetro da base. O parâmetro da base é usado para especificar qual sistema númerico deve ser usado.

- -

Uma método alternativo de conversão de um número em forma de string é com o operador + (operador soma):

- -
"1.1" + "1.1" = "1.11.1"
-(+"1.1") + (+"1.1") = 2.2
-// Nota: Os parênteses foram usados para deixar mais legível o código, ele não é requirido.
- -

Literais

- -

Você usa literais para representar valores em JavaScript. Estes são valores fixados, não variáveis, que você literalmente insere em seu script. Esta seção descreve os seguintes tipos literais:

- - - -

Array literal

- -

Um literal de array é uma lista de zero ou mais expressões, onde cada uma delas representam um elemento do array, inseridas entre colchetes ([]). Quando você cria um array usando um array literal, ele é inicializado  com os valores especificados como seus elementos, e seu comprimento é definido com o  número de elementos especificados.

- -

O exemplo a seguir cria um array coffees com três elementos e um comprimento de três:

- -
var coffees = ["French Roast", "Colombian", "Kona"];
-
- -
-

Nota : Um array literal é um tipo de inicializador de objetos. Veja Usando inicializadores de Objetos.

-
- -

Se um array é criado usando um literal no topo do script, JavaScript interpreta o array cada vez que avalia a expressão que contêm o array literal. Além disso, um literal usado em uma função é criado cada vez que a função é chamada.

- -

Array literal são também um array de objetos. Veja  {{jsxref("Array")}} e Coleções indexadas para detalhes sobre array de objetos.

- -

Vírgulas extras em array literal

- -

Você não precisa especificar todos os elementos em um array literal. Se você colocar duas vírgulas em uma linha, o array é criado com undefined para os elementos não especificados. O exemplo a seguir cria um array chamado fish:

- -
var fish = ["Lion", , "Angel"];
-
- -

Esse array tem dois elementos com valores e um elemento vazio (fish[0] é "Lion", fish[1] é undefined, e fish[2] é "Angel" ).

- -

Se você incluir uma vírgula à direita no final da lista dos elementos, a vírgula é ignorada. No exemplo a seguir, o comprimento do array é três. Não há nenhum myList[3]. Todas as outras vírgulas na lista indicam um novo elemento.

- -
-

Nota : Vírgulas à direita podem criar erros em algumas versões de navegadores web antigos, é recomendável removê-las.

-
- -
var myList = ['home', , 'school', ];
-
- -

No exemplo a seguir, o comprimento do array é quatro, e myList[0] e myList[2] são undefined.

- -
var myList = [ , 'home', , 'school'];
-
- -

No exemplo a seguir, o comprimento do array é quatro, e myList[1] e myList[3] são undefined. Apenas a última vírgula é ignorada.

- -
var myList = ['home', , 'school', , ];
-
- -

Entender o comportamento de vírgulas extras é importante para a compreensão da linguagem JavaScript, no entanto, quando você escrever seu próprio código: declarar explicitamente os elementos em falta como undefined vai aumentar a clareza do código, e consequentemente na sua manutenção.

- -

Literais Boolean

- -

O tipo Boolean tem dois valores literal: true e false.

- -

Não confunda os valores primitivos Boolean true e false com os valores true e false do objeto Boolean. O objeto Boolean é um invólucro em torno do tipo de dado primitivo. Veja {{jsxref("Boolean")}} para mais informação.

- -

Inteiros

- -

Inteiros podem sem expressos em decimal (base 10), hexadecimal (base 16), octal (base 8) e binário (base 2).

- - - -

Alguns exemplos de inteiros literal são:

- -
0, 117 and -345 (decimal, base 10)
-015, 0001 and -077 (octal, base 8)
-0x1123, 0x00111 and -0xF1A7 (hexadecimal, "hex" or base 16)
-0b11, 0b0011 and -0b11 (binário, base 2)
-
- -

Para maiores informações, veja Literais numérico na referência Léxica.

- -

Literais de ponto flutuante

- -

Um literal de ponto flutuante pode ter as seguintes partes:

- - - -

O expoente é um "e" ou "E" seguido por um inteiro, que pode ter sinal (precedido por "+" ou "-"). Um literal de ponto flutuante  deve ter no mínimo um dígito e um ponto decimal ou "e" (ou "E").

- -

Mais sucintamente, a sintaxe é:

- -
[(+|-)][digitos][.digitos][(E|e)[(+|-)]digitos]
-
- -

Por exemplo:

- -
3.1415926
--.123456789
--3.1E+12
-.1e-23
-
- -

Objeto literal

- -

Um objeto literal é uma lista de zero ou mais pares de nomes de propriedades e valores associados de de um objeto, colocado entre chaves ({}). Você não deve usar um objeto literal no início de uma declaração. Isso levará a um erro ou não se comportará conforme o esperado, porque o { será interpretado como início de um bloco.

- -

Segue um exemplo de um objeto literal. O primeiro elemento do objeto car define uma propriedade, myCar, e atribui para ele uma nova string, "Saturn"; o segundo elemento, a propriedade getCar, é imediatamente atribuído o resultado de chamar uma função (carTypes("Honda")); o terceiro elemento, a propriedade especial, usa uma variável existente (sales).

- -
var sales = "Toyota";
-
-function carTypes(name) {
-  if (name == "Honda") {
-    return name;
-  } else {
-    return "Sorry, we don't sell " + 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
-
- -

Além disso, você pode usar um literal numérico ou string para o nome de uma propriedade ou aninhar um objeto dentro do outro. O exemplo a seguir usar essas opções.

- -
var car = { manyCars: {a: "Saab", "b": "Jeep"}, 7: "Mazda" };
-
-console.log(car.manyCars.b); // Jeep
-console.log(car[7]); // Mazda
-
- -

Nomes de propriedades de objeto podem ser qualquer string, incluindo uma string vazia. Caso o nome da propriedade não seja um {{Glossary("Identifier","identificador")}} JavaScript ou número, ele deve ser colocado entre aspas. Nomes de propriedades que não possuem identificadores válido, também não podem ser acessadas pela propriedade de ponto (.), mas podem ser acessadas e definidas com a notação do tipo array ("[]").

- -
var unusualPropertyNames = {
-  "": "Uma string vazia",
-  "!": "Bang!"
-}
-console.log(unusualPropertyNames."");   // SyntaxError: string inesperada
-console.log(unusualPropertyNames[""]);  // Um string vazia
-console.log(unusualPropertyNames.!);    // SyntaxError: símbolo ! inesperado
-console.log(unusualPropertyNames["!"]); // Bang!
- -

Observe:

- -
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 não está definido
-console.log(foo["a"]); // alpha
-console.log(foo["2"]); // two
-
- -

String Literal

- -

Uma string literal são zero ou mais caracteres dispostos em aspas duplas (") ou aspas simples ('). Uma sequência de caracteres deve ser delimitada por aspas do mesmo tipo; ou seja,  as duas aspas simples ou ambas aspas duplas. A seguir um exemplo de strings literais.

- -
"foo"
-'bar'
-"1234"
-"um linha \n outra linha"
-"John's cat"
-
- -

Você pode chamar qualquer um dos métodos do objeto string em uma string literal - JavaScript automaticamente converte a string literal para um objeto string temporário, chama o método, em seguida, descarta o objeto string temporário. Você também pode usar a propriedade String.length com uma string literal:

- -
console.log("John's cat".length)
-// Irá exibir a quantidade de caracteres na string incluindo o espaço em branco.
-// Nesse caso, 10 caracteres.
-
- -

Você deve usar string literal, a não ser que você precise usar um objeto string. Veja {{jsxref("String")}} para detalhes sobre objetos de strings.

- -

Uso de caracteres especiais em string

- -

Além dos caracteres comuns, você também pode incluir caracteres especiais em strings, como mostrado no exemplo a seguir.

- -
"uma linha \n outra linha"
-
- -

A tabela a seguir lista os caracteres especiais que podem ser usados em strings no JavaScript.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Tabela: Caracteres especiais no JavaScript
CaracterDescrição
\0Byte nulo
\bBackspace
\fAlimentador de formulário
\nNova linha
\rRetorno do carro
\tTabulação
\vTabulação vertical
\'Apóstrofo ou aspas simples
\"Aspas dupla
\\Caractere de barra invertida
\XXX -

Caractere com a codificação Latin-1 especificada por três dígitos octal XXX entre 0 e 377. Por exemplo, \251 é sequência octal para o símbolo de direitos autorais.

-
\xXX -

Caractere com a codificação Latin-1 especificada por dois dígitos hexadecimal XX entre 00 e FF. Por exemplo, \xA9 é a sequência hexadecimal para o símbolo de direitos autorais.

-
\uXXXX -

Caractere Unicode especificado por quatro dígitos hexadecimal XXXX. Por exemplo, \u00A9 é a sequência Unicode para o símbolo de direitos autorais. Veja sequências de escape Unicode.

-
- -

Caracteres de escape

- -

Para caracteres não listados na tabela, se precedidos de barra invertida ela é ignorada, seu uso está absoleto e deve ser ignorado.

- -

Você pode inserir uma aspa dentro de uma string precendendo-a com uma barra invertida. Isso  é conhecido como escaping das aspas. Por exemplo:

- -
var quote = "Ele lê \"The Cremation of Sam McGee\" de R.W. Service.";
-console.log(quote);
-
- -

O resultado disso seria:

- -
Ele lê "The Cremation of Sam McGee" de R.W. Service.
-
- -

Para incluir uma barra invertida dentro de uma string, você deve escapar o caractere de barra invertida. Por exemplo, para atribuir o caminho do arquivo c:\temp para uma string, utilize o seguinte:

- -
var home = "c:\\temp";
-
- -

Você também pode escapar quebras de linhas, precedendo-as com barra invertida. A barra invertida e a quebra de linha são ambas removidas da string.

- -
var str = "esta string \
-está quebrada \
-em várias\
-linhas."
-console.log(str);   // esta string está quebrada em várias linhas.
-
- -

Embora JavaScript não tenha sintaxe "heredoc", você pode adicionar uma quebra de linha e um escape de quebra de linha no final de cada linha:

- -
var poem =
-"Rosas são vermelhas,\n\
-Violetas são azul.\n\
-Eu sou esquizofrênico,\n\
-e é isso que sou."
-
- -

Mais informação

- -

Este capítulo focou na sintaxe básica das declarações e tipos. Para saber mais sobre a linguagem JavaScript, veja também os seguintes capítulos deste guia:

- - - -

No próximo capítulo, veremos a construção de controle de fluxos e manipulação de erro.

- -

{{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Control_flow_and_error_handling")}}

diff --git a/files/pt-br/orphaned/web/javascript/reference/global_objects/array/prototype/index.html b/files/pt-br/orphaned/web/javascript/reference/global_objects/array/prototype/index.html deleted file mode 100644 index e7084dd594..0000000000 --- a/files/pt-br/orphaned/web/javascript/reference/global_objects/array/prototype/index.html +++ /dev/null @@ -1,207 +0,0 @@ ---- -title: Array.prototype -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Array/prototype -tags: - - Array - - JavaScript - - Propriedade -translation_of: Web/JavaScript/Reference/Global_Objects/Array/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/Array/prototype ---- -
{{JSRef}}
- -

Descrição

- -

Instâncias de {{jsxref("Global_Objects/Array", "Array")}} herdam de Array.prototype. Como em todos os construtores, você pode mudar o  protótipo desse construtor para modificar todas as instâncias de {{jsxref("Global_Objects/Array", "Array")}}.

- -

Contudo, a adição de métodos não-padronizados ao objeto array pode causar problemas futuros, seja com seu próprio código, ou na adição de novas funcionalidades ao JavaScript.

- -

Um fato pouco conhecido: O próprio Array.prototype é um {{jsxref("Global_Objects/Array", "Array")}}

- -
Array.isArray(Array.prototype); // true
-
- -

Propriedades

- -
-
Array.prototype.constructor
-
Especifica a função que cria um objeto do protótipo.
-  
-
{{jsxref("Array.prototype.length")}}
-
Reflete o número de elementos em um array.
-
- -

Métodos

- -

Métodos modificadores

- -

Esses métodos modificam o array:

- -
-
{{jsxref("Array.prototype.copyWithin()")}} {{experimental_inline}}
-
Copia uma sequência de elementos do array dentro do array.
-
{{jsxref("Array.prototype.fill()")}} {{experimental_inline}}
-
Preenche todos os elementos de um array com um elemento estático, começando de um índice inicial até um índice final.
-
{{jsxref("Array.prototype.pop()")}}
-
Remove e retorna o último elemento de um array.
-
{{jsxref("Array.prototype.push()")}}
-
Adiciona um ou mais elementos ao fim de um array e retorna o novo comprimeiro do array.
-
{{jsxref("Array.prototype.reverse()")}}
-
Reverte a ordem dos elementos de um array - o primeiro vira o último e o último vira o primeiro.
-
{{jsxref("Array.prototype.shift()")}}
-
Remove o primeiro elemento de um array e o retorna.
-
{{jsxref("Array.prototype.sort()")}}
-
Ordena os elementos do array em questão e retorna o array.
-
{{jsxref("Array.prototype.splice()")}}
-
Adiciona e/ou remove elementos de um array.
-
{{jsxref("Array.prototype.unshift()")}}
-
Adiciona um ou mais elementos ao início de um array e retorna o novo comprimento do array.
-
- -

Métodos de acesso

- -

Esses métodos não modificam o array, mas sim retornam alguma representação dele.

- -
-
{{jsxref("Array.prototype.concat()")}}
-
Retorna um novo array formado por esse array concatenado com outro(s) array(s) e/ou valores.
-
{{jsxref("Array.prototype.contains()")}} {{experimental_inline}}
-
Verifica se o array possui cer, retornandotrue ou false apropriadamente.
-
{{jsxref("Array.prototype.join()")}}
-
Retorna uma string com todos os elementos do array
-
{{jsxref("Array.prototype.slice()")}}
-
Retorna um novo array com uma parte do array sobre o qual o método foi chamado
-
{{jsxref("Array.prototype.toSource()")}} {{non-standard_inline}}
-
Retorna um array literal representando o array especificado; você pode usar esse valor para criar um novo array. Esse método sobrescreve o método {{jsxref("Object.prototype.toSource()")}}.
-
{{jsxref("Array.prototype.toString()")}}
-
Retonar uma string representando o array e seus elementos. Esse método sobrescreve o método {{jsxref("Object.prototype.toString()")}}.
-
{{jsxref("Array.prototype.toLocaleString()")}}
-
Retonar uma string adequada ao idioma do usuário representando o array e seus elementos. Esse método sobrescreve o método {{jsxref("Object.prototype.toLocaleString()")}}.
-
{{jsxref("Array.prototype.indexOf()")}}
-
Representa o índice da primeira ocorrência de um valor especificado no array, ou -1 se o valor não estiver incluso no array.
-
{{jsxref("Array.prototype.lastIndexOf()")}}
-
Representa o índice da última ocorrência de um valor especificado no array, ou -1 se o valor não estiver incluso no array
-
- -

Métodos de iteração

- -

Vários métodos tomam como funções de argumento para serem chamados de volta ao processar o array. Quando esses métodos são chamados, o `length` do array é amostrado e qualquer elemento adicionado além deste comprimento (length)  de dentro da função (callback) não é visitado. Outras alterações para o array (Definindo o valor de ou apagando um elemento) pode afetar os resultados da operação se o método visita o elemento alterado posteriormente. Enquanto o comportamento específico destes métodos nestes casos é bem definido, não se deve confiar nisso para não confundir os outros que possoam ler seu código. Em vez disso, deve-se copiar para um novo array para modificá-lo.

- -
-
{{jsxref("Array.prototype.forEach()")}}
-
Chama a função para cada elemento no array.
-
{{jsxref("Array.prototype.entries()")}} {{experimental_inline}}
-
Retorna um novo objeto Array Iterator que contem o par chave/valor para cada índice no array.
-
{{jsxref("Array.prototype.every()")}}
-
Retorna true se todos elementos no array satisfizer a função de teste fornecida.
-
{{jsxref("Array.prototype.some()")}}
-
Retorna true se pelo menos um elemento no array satisfizer a função de teste fornecida.
-
{{jsxref("Array.prototype.filter()")}}
-
Cria um novo array com todos os elementos do array para qual a função de filtragem fornecida retorne true.
-
{{jsxref("Array.prototype.find()")}} {{experimental_inline}}
-
Retorna o valor encontrado no array, se um elemento no array satisfizer a funçào de teste fornecida ou  `undefined` se não for encontrado.
-
{{jsxref("Array.prototype.findIndex()")}} {{experimental_inline}}
-
Retorna o índice no array, se um elemento no array satisfizer a função de teste fornecida ou -1 se não for encontrado.
-
{{jsxref("Array.prototype.keys()")}} {{experimental_inline}}
-
Retorna um novo Array Iterator que contem a chave para cada índice no array.
-
{{jsxref("Array.prototype.map()")}}
-
Cria um novo array com os resultados da função fornecida chamada em cada elemento na array.
-
{{jsxref("Array.prototype.reduce()")}}
-
Aplica uma função contra um acumulador e cada valor do array (da esquerda para direita) para reduzi-los a um único valor.
-
{{jsxref("Array.prototype.reduceRight()")}}
-
Aplica uma função contra um acumulador e cada valor do array (da direita para esquerda) para reduzi-los a um único valor.
-
{{jsxref("Array.prototype.values()")}} {{experimental_inline}}
-
Retorna um novo objeto Array Iterator que contem os valores de cada índice no array.
-
{{jsxref("Array.prototype.@@iterator()", "Array.prototype[@@iterator]()")}} {{experimental_inline}}
-
Retorna um novo objeto Array Iterator que contem os valores de cada índice no array.
-
- -

Métodos genéricos

- -

Vários métodos do objeto Array em Javascript foram feitos para serem aplicados genericamentes em todos os objetos que "pareçam" Arrays. Isso é, eles podem ser usados em qualquer objeto que possuam uma propriedade length (comprimento), e que possa ser usado a partir de propriedades numéricas (como índices no formato array[5]). Alguns métodos, como {{jsxref("Array.join", "join")}}, apenas lêem e as propriedades numéricas do objeto sobre o qual eles sãochamados. Outros, como {{jsxref("Array.reverse", "reverse")}}, exigem que as propriedades numéricas e length sejam mutáveis; sendo assim, esses métodos não podem ser chamados em objetos como {{jsxref("Global_Objects/String", "String")}}, que não permitem que nenhuma das duas propriedades sejam modificadas.

- -

Especifiações

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaçãoSituaçãoComentário
ECMAScript 1st Edition.PadrãoDefinição inicial
{{SpecName('ES5.1', '#sec-15.4.3.1', 'Array.prototype')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-array.prototype', 'Array.prototype')}}{{Spec2('ES6')}} 
- -

Compatibilidade com Navegadores

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Veja também

- - diff --git a/files/pt-br/orphaned/web/javascript/reference/global_objects/bigint/prototype/index.html b/files/pt-br/orphaned/web/javascript/reference/global_objects/bigint/prototype/index.html deleted file mode 100644 index 7b5395be96..0000000000 --- a/files/pt-br/orphaned/web/javascript/reference/global_objects/bigint/prototype/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: BigInt.prototype -slug: orphaned/Web/JavaScript/Reference/Global_Objects/BigInt/prototype -tags: - - BigInt - - JavaScript - - Propriedade - - Prototipo - - Referencia -translation_of: Web/JavaScript/Reference/Global_Objects/BigInt/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/BigInt/prototype ---- -
{{JSRef}}
- -

A propriedade BigInt.prototype representa o protótipo para o  construtor {{JSxRef("BigInt")}} .

- -

{{JS_Property_Attributes(0, 0, 0)}}

- -

Descrição

- -

Todas instância de {{JSxRef("BigInt")}} herdam de BigInt.prototype. O objeto protótipo do construtor {{JSxRef("BigInt")}} pode ser modificado para afetar todas instâncias de {{JSxRef( "BigInt")}} .

- -

Propriedades

- -
-
BigInt.prototype.constructor
-
Retorna a função que cria instâncias deste objeto. Por padrão é o objeto
- {{JSxRef("BigInt")}}.
-
- -

Métodos

- -
-
{{JSxRef("BigInt.prototype.toLocaleString()")}}
-
Retorna uma string com uma representação sensível ao idioma para este número. Sobrescreve o método {{JSxRef("Object.prototype.toLocaleString()")}}
-  
-
{{JSxRef("BigInt.prototype.toString()")}}
-
Retorna uma string respresentando o objeto específicado em um base específica. Sobrescreve o método {{JSxRef("Object.prototype.toString()")}} .
-
{{JSxRef("BigInt.prototype.valueOf()")}}
-
Retorna o valor primitivo de um objeto específicado. Sobrescreve o método {{JSxRef("Object.prototype.valueOf()")}}.
-
- -

Especificações

- - - - - - - - - - - - -
EspecificaçõesEstado
{{SpecName('ESDraft', '#sec-bigint.prototype', 'BigInt.prototype')}}{{Spec2('ESDraft')}}
- -

Compatibilidade com navegadores

- -

{{Compat("javascript.builtins.BigInt.prototype")}}

diff --git a/files/pt-br/orphaned/web/javascript/reference/global_objects/map/clear/index.html b/files/pt-br/orphaned/web/javascript/reference/global_objects/map/clear/index.html deleted file mode 100644 index 393ee10017..0000000000 --- a/files/pt-br/orphaned/web/javascript/reference/global_objects/map/clear/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: Map.prototype.clear() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/clear -tags: - - ECMAScript 2015 - - JavaScript - - Mapa - - Prototipo - - metodo -translation_of: Web/JavaScript/Reference/Global_Objects/Map/clear -original_slug: Web/JavaScript/Reference/Global_Objects/Map/clear ---- -
{{JSRef}}
- -

O método clear() remove todos os elementos de um objeto Map.

- -

Sintaxe

- -
meuMapa.clear();
- -

Valor retornado

- -

{{jsxref("undefined")}}.

- -

Exemplos

- -

Usando o método clear

- -
var meuMapa = new Map();
-meuMapa.set('bar', 'baz');
-meuMapa.set(1, 'foo');
-
-meuMapa.size;       // 2
-meuMapa.has('bar'); // true
-
-meuMapa.clear();
-
-meuMapa.size;       // 0
-meuMapa.has('bar')  // false
-
- -

Especificações

- - - - - - - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{SpecName('ES2015', '#sec-map.prototype.clear', 'Map.prototype.clear')}}{{Spec2('ES2015')}}Definição inicial.
{{SpecName('ESDraft', '#sec-map.prototype.clear', 'Map.prototype.clear')}}{{Spec2('ESDraft')}} 
- -

Compatibilidade com os navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support38{{CompatGeckoDesktop("19.0")}}11257.1
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}38{{CompatGeckoMobile("19.0")}}{{CompatNo}}{{CompatNo}}8
-
- -

Veja também

- - diff --git a/files/pt-br/orphaned/web/javascript/reference/global_objects/map/delete/index.html b/files/pt-br/orphaned/web/javascript/reference/global_objects/map/delete/index.html deleted file mode 100644 index 41631bb2cc..0000000000 --- a/files/pt-br/orphaned/web/javascript/reference/global_objects/map/delete/index.html +++ /dev/null @@ -1,121 +0,0 @@ ---- -title: Map.prototype.delete() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/delete -tags: - - ECMAScript 2015 - - JavaScript - - Mapa - - Prototipo - - metodo -translation_of: Web/JavaScript/Reference/Global_Objects/Map/delete -original_slug: Web/JavaScript/Reference/Global_Objects/Map/delete ---- -
{{JSRef}}
- -

O método delete() remove o elemento especificado de um objeto Map.

- -

Sintaxe

- -
meuMapa.delete(chave);
- -

Parâmetros

- -
-
key
-
Obrigatório. A chave do elemento a ser removido do objeto Map.
-
- -

Valor retornado

- -

Retorna true se um elemento existia no objeto Map e foi removido, ou false se o elemento não existia.

- -

Exemplos

- -

Usando o método delete

- -
var meuMapa = new Map();
-meuMapa.set('bar', 'foo');
-
-meuMapa.delete('bar'); // Retorna true. Removido com sucesso.
-meuMapa.has('bar');    // Retorna false. O elemento com valor "bar" já não existe mais no mapa.
-
- -

Especificações

- - - - - - - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{SpecName('ES2015', '#sec-map.prototype.delete', 'Map.prototype.delete')}}{{Spec2('ES2015')}}Definição inicial.
{{SpecName('ESDraft', '#sec-map.prototype.delete', 'Map.prototype.delete')}}{{Spec2('ESDraft')}} 
- -

Compatibilidade com os navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support38{{CompatGeckoDesktop("13.0")}}11257.1
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}38{{CompatGeckoMobile("13.0")}}{{CompatNo}}{{CompatNo}}8
-
- -

Veja também

- - diff --git a/files/pt-br/orphaned/web/javascript/reference/global_objects/map/entries/index.html b/files/pt-br/orphaned/web/javascript/reference/global_objects/map/entries/index.html deleted file mode 100644 index 8ca232d906..0000000000 --- a/files/pt-br/orphaned/web/javascript/reference/global_objects/map/entries/index.html +++ /dev/null @@ -1,121 +0,0 @@ ---- -title: Map.prototype.entries() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/entries -tags: - - ECMAScript 2015 - - Iterador - - JavaScript - - Mapa - - Prototipo - - metodo -translation_of: Web/JavaScript/Reference/Global_Objects/Map/entries -original_slug: Web/JavaScript/Reference/Global_Objects/Map/entries ---- -
{{JSRef}}
- -

O método entries() retorna um novo objeto Iterador que contém os pares [chave, valor] para cada elemento no objeto Map pela ordem de inserção.

- -

Sintaxe

- -
meuMapa.entries()
- -

Retorna o valor

- -

Um novo objeto iterador de {{jsxref("Map")}}.

- -

Exemplos

- -

Usando entries()

- -
var meuMap = new Map();
-meuMap.set('0', 'foo');
-meuMap.set(1, 'bar');
-meuMap.set({}, 'baz');
-
-var mapIter = myMap.entries();
-
-console.log(mapIter.next().value); // ["0", "foo"]
-console.log(mapIter.next().value); // [1, "bar"]
-console.log(mapIter.next().value); // [Object, "baz"]
-
- -

Especificações

- - - - - - - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{SpecName('ES2015', '#sec-map.prototype.entries', 'Map.prototype.entries')}}{{Spec2('ES2015')}}Definição inicial.
{{SpecName('ESDraft', '#sec-map.prototype.entries', 'Map.prototype.entries')}}{{Spec2('ESDraft')}} 
- -

Compatibilidade com os navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support38{{ CompatGeckoDesktop("20") }}{{CompatNo}}257.1
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}38{{CompatGeckoMobile("20")}}{{CompatNo}}{{CompatNo}}8
-
- -

Veja também

- - diff --git a/files/pt-br/orphaned/web/javascript/reference/global_objects/map/foreach/index.html b/files/pt-br/orphaned/web/javascript/reference/global_objects/map/foreach/index.html deleted file mode 100644 index c0387a1e74..0000000000 --- a/files/pt-br/orphaned/web/javascript/reference/global_objects/map/foreach/index.html +++ /dev/null @@ -1,147 +0,0 @@ ---- -title: Map.prototype.forEach() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/forEach -tags: - - ECMAScript 2015 - - JavaScript - - Mapa - - Prototipo - - metodo -translation_of: Web/JavaScript/Reference/Global_Objects/Map/forEach -original_slug: Web/JavaScript/Reference/Global_Objects/Map/forEach ---- -
{{JSRef}}
- -

O método forEach() executa uma função fornecida uma vez para cada par de chave/valor no objeto Map, pela ordem de inserção.

- -

Sintaxe

- -
meuMapa.forEach(callback[, thisArg])
- -

Parâmetros

- -
-
callback
-
Função a ser executada para cada elemento.
-
thisArg
-
Valor a utilizar como o this quando estiver executando o callback.
-
- -

Valor de retorno

- -

{{jsxref("undefined")}}.

- -

Descrição

- -

O método forEach executa o callback fornecido uma vez para cada chave existente no mapa. Ele não é invocado para as chaves que foram removidas. No entanto, ele é executado para ítens que estão presentes mesmo com o valor undefined.

- -

callback é invocado com três argumentos:

- - - -

Se um parâmetro thisArg for fornecido ao forEach, ele será passado ao callback quando invocado, e será utilizado como o valor de seu this.  De outra forma, o valor undefined será passado como o valor de seu this.  O valor this observável em última instância por callback é determinado de acordo com as regras comuns para determinar o this sendo visto por uma função.

- -

Cada valor é visitado uma vez, exceto para o caso em que ele foi removido e re-adicionado antes do forEach ter acabado de ser executado. o callback não é invocado para valores removidos antes de serem visitados. Novos valores adicionados antes do forEach ter acabado serão visitados.

- -

forEach executa a função de callback uma vez para cada elemento no objeto Map; ele não retorna um valor.

- -

Exemplos

- -

Imprimindo o conteúdo de um objeto Map

- -

O código a seguir registra uma linha de log para cada elemento no objeto Map:

- -
function registrarElementosDoMapa(valor, chave, mapa) {
-    console.log(`m[${chave}] = ${valor}`);
-}
-new Map([['foo', 3], ['bar', {}], ['baz', undefined]]).forEach(registrarElementosDoMapa);
-// logs:
-// "m[foo] = 3"
-// "m[bar] = [object Object]"
-// "m[baz] = undefined"
-
- -

Especificações

- - - - - - - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{SpecName('ES2015', '#sec-map.prototype.foreach', 'Map.prototype.forEach')}}{{Spec2('ES2015')}}Definição inicial.
{{SpecName('ESDraft', '#sec-map.prototype.foreach', 'Map.prototype.forEach')}}{{Spec2('ESDraft')}}
- -

Compatibilidade com os navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support38{{CompatGeckoDesktop("25.0")}}11257.1
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}38{{CompatGeckoMobile("25.0")}}{{CompatNo}}{{CompatNo}}8
-
- -

Veja também

- - diff --git a/files/pt-br/orphaned/web/javascript/reference/global_objects/map/get/index.html b/files/pt-br/orphaned/web/javascript/reference/global_objects/map/get/index.html deleted file mode 100644 index 9c8b66e302..0000000000 --- a/files/pt-br/orphaned/web/javascript/reference/global_objects/map/get/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: Map.prototype.get() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/get -tags: - - ECMAScript 2015 - - JavaScript - - Map - - Prototype - - metodo -translation_of: Web/JavaScript/Reference/Global_Objects/Map/get -original_slug: Web/JavaScript/Reference/Global_Objects/Map/get ---- -
{{JSRef}}
- -

O método get() retorna um elemento específico de um objeto de Map.

- -

Sintaxe

- -
myMap.get(chave);
- -

Parâmetros

- -
-
chave
-
Obrigatório. A chave do elemento para retornar do objeto de Map.
-
- -

Valor de retorno

- -

Retorna o elemento associado com a chave específica ou undefined se a chave não puder ser encontrada no objeto de Map.

- -

Exemplos

- -

Usando o métodoget

- -
var myMap = new Map();
-myMap.set('bar', 'foo');
-
-myMap.get('bar');  // Retorna "foo".
-myMap.get('baz');  // Retorna undefined.
-
- -

Especificações

- - - - - - - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{SpecName('ES2015', '#sec-map.prototype.get', 'Map.prototype.get')}}{{Spec2('ES2015')}}Definição inicial.
{{SpecName('ESDraft', '#sec-map.prototype.get', 'Map.prototype.get')}}{{Spec2('ESDraft')}} 
- -

Compatibilidade com navegadores

- -

{{Compat("javascript.builtins.Map.get")}}

- -

Veja também

- - diff --git a/files/pt-br/orphaned/web/javascript/reference/global_objects/map/has/index.html b/files/pt-br/orphaned/web/javascript/reference/global_objects/map/has/index.html deleted file mode 100644 index c929b131d7..0000000000 --- a/files/pt-br/orphaned/web/javascript/reference/global_objects/map/has/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: Map.prototype.has() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/has -translation_of: Web/JavaScript/Reference/Global_Objects/Map/has -original_slug: Web/JavaScript/Reference/Global_Objects/Map/has ---- -
{{JSRef}}
- -

O método has() retorna um valor booleano indicando quando um elemento com a chave especificada existe ou não

- -
{{EmbedInteractiveExample("pages/js/map-prototype-has.html")}}
- - - -

Sintaxe

- -
myMap.has(key);
- -

Parametros

- -
-
key
-
Necessário. A chave para verificar a presença do elemento no objeto Map.
-
- -

Valor retornado

- -
-
Booleano
-
Retorna true se um elemento com a chave especificada existe no objeto Map; caso contrário: false.
-
- -

Exemplos

- -

Usando o método has

- -
var myMap = new Map();
-myMap.set('bar', "foo");
-
-myMap.has('bar');  // retorna true
-myMap.has('foo'); // retorna false
-myMap.has('barz');  // retorna false
-
- -

Especificações

- - - - - - - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{SpecName('ES2015', '#sec-map.prototype.has', 'Map.prototype.has')}}{{Spec2('ES2015')}}Definição inicial.
{{SpecName('ESDraft', '#sec-map.prototype.has', 'Map.prototype.has')}}{{Spec2('ESDraft')}}
- -

Compatibilidade com navegadores

- -

{{Compat("javascript.builtins.Map.has")}}

- -

Veja também

- - diff --git a/files/pt-br/orphaned/web/javascript/reference/global_objects/map/index.html b/files/pt-br/orphaned/web/javascript/reference/global_objects/map/index.html deleted file mode 100644 index cf8c3bfab2..0000000000 --- a/files/pt-br/orphaned/web/javascript/reference/global_objects/map/index.html +++ /dev/null @@ -1,226 +0,0 @@ ---- -title: Map -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map -tags: - - ECMAScript 2015 - - JavaScript - - Map - - Mapa -translation_of: Web/JavaScript/Reference/Global_Objects/Map -original_slug: Web/JavaScript/Reference/Global_Objects/Map ---- -
{{JSRef}}
- -

O objeto Map é um mapa simples de chave/valor. Qualquer valor (objeto e {{Glossary("Primitive", "valores primitivos")}}) pode ser usado como uma chave ou um valor.

- -

Sintaxe

- -
new Map([iterable])
-
- -

Parâmetros

- -
-
iterable
-
-

Iterable é um Array ou outro objeto iterável cujos elementos são pares de chave-valor (2-element Arrays). Cada par de chave-valor é adicionado ao novo Map. null é tratado como undefined.

-
-
- -

Descrição

- -

Um objeto Map itera seus elementos em ordem de inserção — um loop {{jsxref("Statements/for...of", "for...of")}} retorna um array de [chave, valor] para cada iteração.

- -

Deve-se notar que um Map que é um mapa de um objeto, especialmente, um dicionário de dicionários somente irá mapear apenas para a ordem de inserção -- que é aleatória e não ordenada.

- -

Igualidade de valores

- -

A igualdade das chaves é baseada no algoritmo "SameValueZero" (mesmo valor): NaN é considerado igual à NaN (mesmo que NaN !== NaN) e todos os outros valores são considerados iguals de acordo com a semantica do operador ===. Em versões anteriores do rascunho ECMAScript 2015 draft -0 and +0 eram considerados diferentes (mesmo que -0 === +0), isto foi trocado em versões posteriores e foi aplicado no Gecko 29 {{geckoRelease("29")}} ({{bug("952870")}}) e em uma build recente nightly do Chrome.

- -

Objetos e mapas comparados

- -

{{jsxref("Object", "Objects")}} são similares a Maps onde ambos deixam adicionar chaves para valores, recuperar estes valores, apagar chaves, e detectar quando algo foi adicionado em uma chave. Por causa disso (e porque não existem alternativas pré-construidas), Objects historicamente foram usados como Maps; no entanto, existem diferenças importantes entre Objects e Maps que fazem o uso do Map melhor:

- - - -

Isto não significa que você deve usar Maps em todo lugar, objetos ainda serão usados na maioria dos casos. Instancias de Map são úteis somente para coleções, e você deve considerar adaptar seu codigo onde você usou objetos para isto anteriormente. Objects devem ser usados como registros, com campos e métodos.
- Se você não tem certeza qual usar, pergunte-se as seguintes questões:

- - - -

Se você respondeu "sim" em qualquer uma dessas questões, é um sinal de que você quer utilizar um  Map. Se ao invés disto você tem um numero fixo de keys, trabalhe eles individualmente, e faça diferenciação entre o uso deles, você quer um objeto.

- -

Propriedades

- -
-
Map.length
-
O tamanho do mapa é 0.
-
{{jsxref("Map.@@species", "get Map[@@species]")}}
-
A função construtora que é usada para criar objetos derivados.
-
{{jsxref("Map.prototype")}}
-
Representa o prototype para o construtor de Map. Permite a adição de propriedades para todos os objetos Map.
-
- -

Instâncias de Map

- -

Todas as instancias de Map herdam de {{jsxref("Map.prototype")}}.

- -

Propriedades

- -

{{page('pt-BR/Web/JavaScript/Reference/Global_Objects/Map/prototype','Properties')}}

- -

Métodos

- -

{{page('pt-BR/Web/JavaScript/Reference/Global_Objects/Map/prototype','Methods')}}

- -

Exemplos

- -

Usando o objeto Map

- -
var myMap = new Map();
-
-var keyString = "uma string",
-    keyObj = {},
-    keyFunc = function () {};
-
-// configurando os valores
-myMap.set(keyString, "valor associado com 'uma string'");
-myMap.set(keyObj, "valor associado com keyObj");
-myMap.set(keyFunc, "valor associado com keyFunc");
-
-myMap.size; // 3
-
-// obtendo os valores
-myMap.get(keyString);    // "valor associado com 'uma string'"
-myMap.get(keyObj);       // "valor associado com keyObj"
-myMap.get(keyFunc);      // "valor associado com keyFunc"
-
-myMap.get("uma string"); // "valor associado com 'uma string'"
-                         // pois keyString === 'uma string'
-myMap.get({});           // undefined, pois keyObj !== {}
-myMap.get(function() {}) // undefined, pois keyFunc !== function () {}
-
- -

Usando NaN como Map keys

- -

NaN pode também ser usado como key. Mesmo que NaN não seja igual a ele mesmo (NaN !== NaN)  é true, o seguinte exemplo funciona, porquê NaNs são indistinguíveis uma para o outro:

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

Iterando Maps com for..of

- -

Maps podem ser iterados usando um for..of :

- -
var myMap = new Map();
-myMap.set(0, "zero");
-myMap.set(1, "um");
-for (var [key, value] of myMap) {
-  console.log(key + " = " + value);
-}
-// 0 = zero
-// 1 = um
-
-for (var key of myMap.keys()) {
-  console.log(key);
-}
-// 0
-// 1
-
-for (var value of myMap.values()) {
-  console.log(value);
-}
-// zero
-// um
-
-for (var [key, value] of myMap.entries()) {
-  console.log(key + " = " + value);
-}
-// 0 = zero
-// 1 = um
-
- -

Iterando Maps com forEach()

- -

Maps podem ser iterados usando um forEach():

- -
myMap.forEach(function(value, key) {
-  console.log(key + " = " + value);
-}, myMap)
-// Mostrará 2 logs; o primeiro com "0 = zero" e o segundo com "1 = um"
-
- -

Relação com objetos Array

- -
var kvArray = [["key1", "value1"], ["key2", "value2"]];
-
-// Utiliza o construtor padrão de Map para converter um Array de 2 dimensões de chave-valor Array em um mapa
-var myMap = new Map(kvArray);
-
-myMap.get("key1"); // retorna "value1"
-
-// Utiliza Array.from para converter um mapa em um Array de 2 dimensões de chave-valor
-console.log(Array.from(myMap)) // Mostrará exatamente o mesmo Array que kvArray
-
-// Uma forma mais sucinta de realizar a mesma conversão com o operador spread
-console.log([...myMap]);
-
-// Ou usa o operador spread nas chaves ou valores para o iterador pegar
-// um array com somente as chaves ou valores
-console.log([...myMap.keys()]); // Mostrará ["key1", "key2"]
-
- -

Especificações

- - - - - - - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{SpecName('ES6', '#sec-map-objects', 'Map')}}{{Spec2('ES6')}}Definição inicial.
{{SpecName('ESDraft', '#sec-map-objects', 'Map')}}{{Spec2('ESDraft')}}
- -

Compatibilidade com os navegadores

- -

{{Compat("javascript.builtins.Map")}}

- -

[1] Começando com Chrome 31, a feature ficou disponível sob modificação de configurações. Em chrome://flags, ative a entrada activate “Enable Experimental JavaScript”.

- -

Ver também

- - diff --git a/files/pt-br/orphaned/web/javascript/reference/global_objects/map/keys/index.html b/files/pt-br/orphaned/web/javascript/reference/global_objects/map/keys/index.html deleted file mode 100644 index 1a68389071..0000000000 --- a/files/pt-br/orphaned/web/javascript/reference/global_objects/map/keys/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: Map.prototype.keys() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/keys -translation_of: Web/JavaScript/Reference/Global_Objects/Map/keys -original_slug: Web/JavaScript/Reference/Global_Objects/Map/keys ---- -
{{JSRef}}
- -
O método keys() retorna um novo objeto do tipo Iterator que contem uma chave para cada elemento dentro do objeto Map na ordem que foram inseridos.
- -

 

- -

Sintaxe

- -
myMap.keys()
- -

Tipo de Retorno

- -

Um novo objeto {{jsxref("Map")}}.

- -

Exemplos

- -

Usando keys()

- -
var myMap = new Map();
-myMap.set("0", "foo");
-myMap.set(1, "bar");
-myMap.set({}, "baz");
-
-var mapIter = myMap.keys();
-
-console.log(mapIter.next().value); // "0"
-console.log(mapIter.next().value); // 1
-console.log(mapIter.next().value); // Object
-
- -

Especificações

- - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('ES6', '#sec-map.prototype.keys', 'Map.prototype.keys')}}{{Spec2('ES6')}}Definição inicial.
{{SpecName('ESDraft', '#sec-map.prototype.keys', 'Map.prototype.keys')}}{{Spec2('ESDraft')}} 
- -

Compatibilidade com navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support38{{CompatGeckoDesktop("20")}}{{CompatNo}}257.1
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}38{{CompatGeckoMobile("20") }}{{CompatNo}}{{CompatNo}}8
-
- -

Veja também

- - diff --git a/files/pt-br/orphaned/web/javascript/reference/global_objects/map/set/index.html b/files/pt-br/orphaned/web/javascript/reference/global_objects/map/set/index.html deleted file mode 100644 index e381342aba..0000000000 --- a/files/pt-br/orphaned/web/javascript/reference/global_objects/map/set/index.html +++ /dev/null @@ -1,138 +0,0 @@ ---- -title: Map.prototype.set() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/set -tags: - - ECMAScript 2015 - - JavaScript - - Map - - Prototype - - metodo -translation_of: Web/JavaScript/Reference/Global_Objects/Map/set -original_slug: Web/JavaScript/Reference/Global_Objects/Map/set ---- -
{{JSRef}}
- -

O método set() adiciona ou atualiza um elemento com uma chave e valor específicos a um objeto de Map.

- -

Sintaxe

- -
myMap.set(chave, valor);
- -

Parâmetros

- -
-
chave
-
Obrigatório. A chave do elemento para adicionar ao objeto de Map.
-
valor
-
Obrigatório. O valor do elemento para adicionar ao objeto de Map.
-
- -

Valor de retorno

- -

O objeto de Map.

- -

Exemplos

- -

Usando o método set 

- -
var myMap = new Map();
-
-// adiciona novos elementos ao map
-myMap.set('bar', 'foo');
-myMap.set(1, 'foobar');
-
-// Atualiza um elemento no map
-myMap.set('bar', 'baz');
-
- -

Especificações

- - - - - - - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{SpecName('ES2015', '#sec-map.prototype.set', 'Map.prototype.set')}}{{Spec2('ES2015')}}Definição    inicial.
{{SpecName('ESDraft', '#sec-map.prototype.set', 'Map.prototype.set')}}{{Spec2('ESDraft')}} 
- -

Compatibilidade de navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support38{{CompatVersionUnknown}}{{CompatGeckoDesktop("13.0")}}11257.1
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}38{{CompatVersionUnknown}}{{CompatGeckoMobile("13.0")}}{{CompatNo}}{{CompatNo}}8
-
- -

Notas sobre compatibilidade

- - - -

Veja também

- - diff --git a/files/pt-br/orphaned/web/javascript/reference/global_objects/map/size/index.html b/files/pt-br/orphaned/web/javascript/reference/global_objects/map/size/index.html deleted file mode 100644 index f174ba9976..0000000000 --- a/files/pt-br/orphaned/web/javascript/reference/global_objects/map/size/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: Map.prototype.size -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/size -translation_of: Web/JavaScript/Reference/Global_Objects/Map/size -original_slug: Web/JavaScript/Reference/Global_Objects/Map/size ---- -
{{JSRef}}
- -

A propriedade de acesso size retorna o número de elementos em um objeto {{jsxref("Map")}}.

- -

Descrição

- -

O valor de size é um integer representando quantas entradas o objeto Map tem. Uma function set de acesso ao size é undefined; você não pode trocar esta propriedade.

- -

Exemplos

- -

Usando size

- -
var myMap = new Map();
-myMap.set("a", "alpha");
-myMap.set("b", "beta");
-myMap.set("g", "gamma");
-
-myMap.size // 3
-
- -

Especificações

- - - - - - - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{SpecName('ES6', '#sec-get-map.prototype.size', 'Map.prototype.size')}}{{Spec2('ES6')}}Definição Inicial.
{{SpecName('ESDraft', '#sec-get-map.prototype.size', 'Map.prototype.size')}}{{Spec2('ESDraft')}} 
- -

Compatibilidade com os navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support38{{ CompatGeckoDesktop("19") }}{{ CompatIE("11") }}257.1
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}38{{CompatGeckoMobile("19")}}{{CompatNo}}{{CompatNo}}8
-
- -

Gecko - Notas específicas

- - - -

Ver também

- - diff --git a/files/pt-br/orphaned/web/javascript/reference/global_objects/map/values/index.html b/files/pt-br/orphaned/web/javascript/reference/global_objects/map/values/index.html deleted file mode 100644 index 67c68e2437..0000000000 --- a/files/pt-br/orphaned/web/javascript/reference/global_objects/map/values/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: Map.prototype.values() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/values -tags: - - Iterador - - Mapa - - metodo -translation_of: Web/JavaScript/Reference/Global_Objects/Map/values -original_slug: Web/JavaScript/Reference/Global_Objects/Map/values ---- -
{{JSRef}}
- -

O método values() retorna um novo objeto Iterator que contém os valores de cada elemento do objeto Map em ordem de inserção.

- -
{{EmbedInteractiveExample("pages/js/map-prototype-values.html")}}
- - - -

Sintaxe

- -
meuMap.values()
- -

Valor de retorno

- -

Um novo objeto iterador do {{jsxref("Map")}}.

- -

Exemplos

- -

Usando o values()

- -
var meuMap = new Map();
-meuMap.set('0', 'foo');
-meuMap.set(1, 'bar');
-meuMap.set({}, 'baz');
-
-var mapIter = myMap.values();
-
-console.log(mapIter.next().value); // "foo"
-console.log(mapIter.next().value); // "bar"
-console.log(mapIter.next().value); // "baz"
- -

Especificações

- - - - - - - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{SpecName('ES2015', '#sec-map.prototype.values', 'Map.prototype.values')}}{{Spec2('ES2015')}}Initial definition.
{{SpecName('ESDraft', '#sec-map.prototype.values', 'Map.prototype.values')}}{{Spec2('ESDraft')}} 
- -

Compatibilidade de navegadores

- - - -

{{Compat("javascript.builtins.Map.values")}}

- -

Veja também

- - diff --git a/files/pt-br/orphaned/web/javascript/reference/operators/pipeline_operator/index.html b/files/pt-br/orphaned/web/javascript/reference/operators/pipeline_operator/index.html deleted file mode 100644 index 84ea16c7bc..0000000000 --- a/files/pt-br/orphaned/web/javascript/reference/operators/pipeline_operator/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: Operador Pipeline -slug: orphaned/Web/JavaScript/Reference/Operators/Pipeline_operator -translation_of: Web/JavaScript/Reference/Operators/Pipeline_operator -original_slug: Web/JavaScript/Reference/Operators/Pipeline_operator ---- -
{{jsSidebar("Operators")}} {{SeeCompatTable}}
- -

O operador experimental pipeline |> (atualmente no estágio 1) permite a criação de chamadas de funções encadeadas de maneira legível. Basicamente, o operador de pipeline fornece açúcar sintático em uma chamada de função com um único argumento, permitindo que você escreva

- -

'%21' |> decodeURI ao invés de decodeURI('%21').

- -

Sintaxe

- -
expressão |> função
- -

Exemplos

- -

Chamadas de funções encadeadas

- -

 

- -

O operador de pipeline pode melhorar a legibilidade ao encadear várias funções.

- -
const double = (n) => n * 2;
-const increment = (n) => n + 1;
-
-// sem o perador pipeline
-double(increment(double(double(5)))); // 42
-
-// com o operador pipeline
-5 |> double |> double |> increment |> double; // 42
-
- -

Especificações

- - - - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
Pipeline operator draftEstágio 1Não faz parte da especificação ECMAScript ainda.
- -

Compatibilidade com os navegadores

- -
- - -

{{Compat("javascript.operators.pipeline")}}

-
- -

Ver também

- - diff --git a/files/pt-br/orphaned/web/reference/api/index.html b/files/pt-br/orphaned/web/reference/api/index.html deleted file mode 100644 index c776c696d5..0000000000 --- a/files/pt-br/orphaned/web/reference/api/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: Referências API Web -slug: orphaned/Web/Reference/API -translation_of: Web/Reference/API -original_slug: Web/Reference/API ---- -

A internet oferece uma vasta gama de APIs para facilitar a execução de várias tarefas úteis. Elas podem ser usadas através de códigos JavaScript e permitem que você execute pequenos ajustes no elemento {{domxref("window")}} ou {{domxref("element")}} até gerar efeitos de vídeo e áudio usando APIs como WebGL e Web Audio.

- -

Todas as interfaces disponíveis pelas APIs estão listadas individualmente na página de início.

- -


- Existe também uma lista de com todos os eventos disponíveis na Referencia de Eventos.

- -
-
-
-
Document Object Model
-
O DOM é uma API que permite acessar e modificar o documento atual. Permite a manipulação dos elementos {{domxref("Node")}} e {{domxref("Element")}} do documento. HTML, XML e SVG estenderam o DOM para manipular seus elementos específicos.
-
 
-
APIs para dispositivos
-
Estas APIs permitem o acesso a vários recursos de hardware disponíveis para páginas Web e aplicações, como por exemplo Ambient Light Sensor API, Battery Status API, Geolocation API, Pointer Lock API, Proximity API, Device Orientation API, Screen Orientation API e Vibration API.
-
APIs de comunicação
-
Estas APIs permitem a comunicação da página ou aplicativo web com outras páginas e dispositivos, como por exemplo Network Information API, Web Notifications e Simple Push API.
-
APIs de gestão de dados
-
Os dados de usuários podem ser manipulados e usados usando estas APIs, como por exemplo FileHandle API e IndexedDB.
-
- -

Além das APIs citadas, que podem ser usadas para qualquer site ou aplicativo, um conjunto de APIs muito poderosas da Mozilla estão disponíveis para APIs privilegiadas e certificadas.

- -
-
APIs Privilegiadas
-
A aplicação privilegiada é um aplicativo instalado que tem seus direitos específicados pelo usuário. As APIs privilegiadas incluem TCP Socket API, Contacts API, Device Storage API, Browser API e Camera API.
-
APIs Certificadas
-
A aplicação certificada é uma aplicação de baixo nível para realizar operações críticas e vitais em um sistema operacional como o Firefox OS, permitindo a interação de aplicações menos privilegiadas com as certificadas utilizando Web Activities. As APIs Certificadas incluem Bluetooth API, Mobile Connection API, Network Stats API, Telephony, WebSMS, WiFi Information API, Power Management API, Settings API, Idle API, Permissions API e Time/Clock API.
-
-
- -
-

Comunidade

- -

Entre na comunidade Web API em nossas discussões ou grupos:

- - - -

Alem disso você pode participar de discussões ao vivo no canal #webapi no IRC.

- - - -

Estes tópicos podem ser interessantes para você:

- - -
-
- -

 

diff --git a/files/pt-br/orphaned/web/reference/index.html b/files/pt-br/orphaned/web/reference/index.html deleted file mode 100644 index 1206eceb45..0000000000 --- a/files/pt-br/orphaned/web/reference/index.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: Referências de tecnologias Web -slug: orphaned/Web/Reference -tags: - - Landing - - Referências - - Tecnologias - - Web -translation_of: Web/Reference -original_slug: Web/Reference ---- -

A web aberta é baseada em várias tecnologias que, juntas, podem ser usadas para criar tudo, desde sites simples até poderosas aplicações web. Abaixo, você encontrará uma seleção de links das principais documentações de cada um.

- -
-

Se você é novo no desenvolvimento web, considere começar pela nossa área de aprendizado, que é recheada com tutoriais, passo a passo, que vai te guiar de um total iniciante no desenvolvimento web a pelo menos um semi-profissional!

- -
-
HTML — Estruturando a web
-
A Linguagem de Marcação de Hipertexto (em inglês: HyperText Markup Language) é usada para definir e descrever semanticamente o conteúdo (marcação) de uma página web em um formato estruturado. O HTML fornece um meio de criar documentos compostos por blocos chamados de elementos HTML que são marcados por tags, usando parênteses angulares < >. Alguns introduzem o conteúdo diretamente na página, outros fornecem informações sobre o texto do documento e podem incluir outras tags como subelementos. Obviamente, os navegadores não os exibem, pois são usados ​​para interpretar o conteúdo da página.
-
- Introdução ao HTML | Aprenda HTML | HTML5 | Guia para desenvolvedores | Referência de elementos | Referência
-
CSS — Estilizando a web
-
As Folhas de Estilo em Cascata (em inglês: Cascading Style Sheets) são usadas ​​para descrever a aparência dos conteúdos web
-
- Introdução ao CSS | Começando com o CSS | Aprenda CSS | Questões comuns sobre o CSS | Referência
-
JavaScript — Scripts dinâmicos no lado do cliente
-
O JavaScript é uma linguagem de programação usada para adicionar interatividade e outros recursos dinâmicos nos sites.
-
Aprenda JavaScript | Guia para desenvolvedores | Referência
-
-
diff --git a/files/pt-br/orphaned/web/security/information_security_basics/index.html b/files/pt-br/orphaned/web/security/information_security_basics/index.html deleted file mode 100644 index 99607e0201..0000000000 --- a/files/pt-br/orphaned/web/security/information_security_basics/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: Básico de Segurança da Informação -slug: orphaned/Web/Security/Information_Security_Basics -tags: - - Iniciante - - Segurança -translation_of: Web/Security/Information_Security_Basics -original_slug: Web/Security/Básico_de_Segurança_da_Informação ---- -

Entender o básico de segurança da informação pode ajudar você a evitar que seu software ou website estejam inseguros e vulneráveis a fraquezas que podem ser exploradas para ganhos financeiros ou outros motivos maliciosos. Estes artigos podem ajudar você a aprender o que você precisa. Com essa informação, você estará ciente do papel e importância da segurança no ciclo de desenvolvimento de software, além da distribuição do seu conteúdo.

- -

Confidencialidade, Integridade e Disponibilidade

- -
-
Descreve os objetivos de segurança primários, que são absolutamente fundamentais para o entendimento de segurança
-
Vulnerabilidades
-
Define as principais categorias de vulnerabilidades e discute a presença de vulnerabilidades em todo software
-
Ameaças
-
Introduz brevemente os principais conceitos de ameaças
-
Controles de Segurança
-
Define as principais categorias de controle de segurança e discute suas potenciais desvantagens
-
Segurança TCP/IP
-
Uma visão geral do modelo TCP/IP, com um foco em considerações de segurança para SSL
-
- -

Veja também

- - diff --git a/files/pt-br/orphaned/web/svg/element/color-profile/index.html b/files/pt-br/orphaned/web/svg/element/color-profile/index.html deleted file mode 100644 index 31261469be..0000000000 --- a/files/pt-br/orphaned/web/svg/element/color-profile/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: color-profile -slug: orphaned/Web/SVG/Element/color-profile -tags: - - Elemento - - Perfil de Cor - - Referencia - - SVG -translation_of: Web/SVG/Element/color-profile -original_slug: Web/SVG/Element/color-profile ---- -
{{SVGRef}}
- -

O elemento permite descrever o perfil de cor utilizado para a imagem.

- -

Contexto de uso

- -

{{svginfo}}

- -

Exemplo

- -

Atributos

- -

Atributos globais

- - - -

Atributos específicos

- - - -

Interface DOM

- -

Este elemento implementa a interface do SVGColorProfileElement.

- -

Compatibilidade dos navegadores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
RecursoChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico{{ CompatNo() }}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatNo() }}{{ CompatNo() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
RecursoAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
-
- -

A tabela é baseada nessas fontes.

-- cgit v1.2.3-54-g00ecf