From 68fc8e96a9629e73469ed457abd955e548ec670c Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:49:58 +0100 Subject: unslug pt-br: move --- .../index.html | 234 ++ .../index.html | 35 + .../usando_o_atributo_aria-labelledby/index.html | 158 - .../usando_o_atributo_aria-required/index.html | 83 - .../usando_o_slider_role/index.html | 125 - .../using_the_alert_role/index.html | 145 + .../using_the_aria-labelledby_attribute/index.html | 158 + .../using_the_aria-required_attribute/index.html | 83 + .../using_the_slider_role/index.html | 125 + .../utilizando_o_alert_role/index.html | 145 - .../aria/forms/basic_form_hints/index.html | 118 + .../forms/dicas_b\303\241sicas_de_form/index.html" | 118 - .../index.html | 35 - .../accessibility/aria/widgets/overview/index.html | 72 + .../aria/widgets/vis\303\243o_geral/index.html" | 72 - files/pt-br/web/accessibility/index.html | 52 + .../mobile_accessibility_checklist/index.html | 100 + .../accessibility/understanding_wcag/index.html | 57 + .../understanding_wcag/keyboard/index.html | 87 + .../index.html | 100 - .../index.html | 234 -- .../acessibilidade/desenvolvimento_web/index.html | 55 - .../web/acessibilidade/entendendo_wcag/index.html | 57 - .../entendendo_wcag/keyboard/index.html | 87 - files/pt-br/web/acessibilidade/index.html | 52 - .../problemas_com_jaws_no_firefox/index.html | 11 - files/pt-br/web/api/api_de_desempenho/index.html | 138 - .../web/api/api_push/best_practices/index.html | 73 - files/pt-br/web/api/api_push/index.html | 172 -- files/pt-br/web/api/api_web_audio/index.html | 480 --- .../api_web_audio/sintetizador_simples/index.html | 579 ---- .../web/api/audiocontext/currenttime/index.html | 114 - .../api/baseaudiocontext/currenttime/index.html | 114 + files/pt-br/web/api/battery_status_api/index.html | 58 + .../ondischargingtimechange/index.html | 35 + .../ondischargintimechange/index.html | 35 - .../api/canvas_api/a_basic_ray-caster/index.html | 76 + files/pt-br/web/api/canvas_api/index.html | 134 + .../tutorial/advanced_animations/index.html | 386 +++ .../tutorial/applying_styles_and_colors/index.html | 725 +++++ .../tutorial/basic_animations/index.html | 331 ++ .../api/canvas_api/tutorial/basic_usage/index.html | 153 + .../tutorial/compositing/example/index.html | 294 ++ .../api/canvas_api/tutorial/compositing/index.html | 112 + .../canvas_api/tutorial/drawing_shapes/index.html | 581 ++++ .../canvas_api/tutorial/drawing_text/index.html | 169 + .../web/api/canvas_api/tutorial/finale/index.html | 49 + files/pt-br/web/api/canvas_api/tutorial/index.html | 56 + .../tutorial/optimizing_canvas/index.html | 115 + .../canvas_api/tutorial/using_images/index.html | 333 ++ .../web/api/crypto/getrandomvalues/index.html | 116 + files/pt-br/web/api/cryptokey/algorithm/index.html | 113 - .../pt-br/web/api/cryptokey/extractable/index.html | 111 - files/pt-br/web/api/cryptokey/type/index.html | 118 - files/pt-br/web/api/cryptokey/usages/index.html | 124 - files/pt-br/web/api/deviceacceleration/index.html | 43 - .../api/devicemotioneventacceleration/index.html | 43 + .../api/devicemotioneventrotationrate/index.html | 93 + files/pt-br/web/api/devicerotationrate/index.html | 93 - .../web/api/document/activeelement/index.html | 165 - .../web/api/document/elementfrompoint/index.html | 133 - .../web/api/document/elementoregistrado/index.html | 132 - .../pt-br/web/api/document/getselection/index.html | 9 - .../api/document/readystatechange_event/index.html | 83 + .../web/api/document/registerelement/index.html | 132 + .../api/document_object_model/events/index.html | 82 + .../api/document_object_model/examples/index.html | 376 +++ .../how_to_create_a_dom_tree/index.html | 145 + .../pt-br/web/api/document_object_model/index.html | 379 +++ .../document_object_model/introduction/index.html | 251 ++ .../document_object_model/whitespace/index.html | 227 ++ .../documentorshadowroot/activeelement/index.html | 165 + .../elementfrompoint/index.html | 133 + .../documentorshadowroot/getselection/index.html | 9 + files/pt-br/web/api/element/accesskey/index.html | 19 - .../web/api/element/addeventlistener/index.html | 322 -- files/pt-br/web/api/element/blur_event/index.html | 154 + files/pt-br/web/api/element/focus_event/index.html | 137 + .../pt-br/web/api/element/focusin_event/index.html | 125 + .../web/api/element/focusout_event/index.html | 125 + files/pt-br/web/api/element/name/index.html | 80 - .../comparativo_entre_event_targets/index.html | 167 - .../event/comparison_of_event_targets/index.html | 167 + .../api/eventtarget/addeventlistener/index.html | 322 ++ .../fetch_api/cross-global_fetch_usage/index.html | 35 + .../fetch_api/uso_de_busca_cross-global/index.html | 35 - files/pt-br/web/api/geolocation_api/index.html | 227 ++ files/pt-br/web/api/history_api/example/index.html | 418 +++ files/pt-br/web/api/history_api/exemplo/index.html | 418 --- .../file_drag_and_drop/index.html | 91 + .../web/api/html_drag_and_drop_api/index.html | 258 ++ .../web/api/htmlcontentelement/select/index.html | 98 + .../web/api/htmlcontentelement/seletor/index.html | 98 - .../pt-br/web/api/htmlelement/accesskey/index.html | 19 + files/pt-br/web/api/htmlelement/blur/index.html | 89 - files/pt-br/web/api/htmlelement/dataset/index.html | 97 - files/pt-br/web/api/htmlelement/focus/index.html | 62 - .../pt-br/web/api/htmlelement/innertext/index.html | 86 + .../web/api/htmlelement/input_event/index.html | 248 ++ .../api/htmlmediaelement/abort_event/index.html | 70 + .../web/api/htmlorforeignelement/blur/index.html | 89 + .../api/htmlorforeignelement/dataset/index.html | 97 + .../web/api/htmlorforeignelement/focus/index.html | 62 + .../api/indexeddb_api/usando_indexeddb/index.html | 1281 -------- .../api/indexeddb_api/using_indexeddb/index.html | 1281 ++++++++ .../web/api/network_information_api/index.html | 56 + .../index.html" | 55 - files/pt-br/web/api/node/innertext/index.html | 86 - files/pt-br/web/api/notificacoes/index.html | 217 -- files/pt-br/web/api/notification/index.html | 217 ++ files/pt-br/web/api/performance_api/index.html | 138 + .../web/api/push_api/best_practices/index.html | 73 + files/pt-br/web/api/push_api/index.html | 172 ++ .../api/randomsource/getrandomvalues/index.html | 116 - files/pt-br/web/api/randomsource/index.html | 109 - files/pt-br/web/api/selection/index.html | 206 ++ .../web/api/sele\303\247\303\243o/index.html" | 206 -- .../api/svgaelement/svgalement.target/index.html | 106 - files/pt-br/web/api/svgaelement/target/index.html | 106 + files/pt-br/web/api/touch_events/index.html | 353 +++ .../usando_a_web_animations_api/index.html | 358 --- .../using_the_web_animations_api/index.html | 358 +++ files/pt-br/web/api/web_audio_api/index.html | 480 +++ .../web/api/web_audio_api/simple_synth/index.html | 579 ++++ files/pt-br/web/api/web_storage_api/index.html | 139 + .../using_the_web_storage_api/index.html | 267 ++ .../pt-br/web/api/web_storage_api_pt_br/index.html | 139 - .../using_the_web_storage_api/index.html | 267 -- .../index.html | 226 ++ .../index.html | 226 -- .../simple_rtcdatachannel_sample/index.html | 272 ++ .../simples_rtcdatachannel_amostra/index.html | 272 -- files/pt-br/web/api/websockets_api/index.html | 178 ++ .../index.html | 182 ++ .../writing_websocket_server/index.html | 237 ++ .../writing_websocket_servers/index.html | 263 ++ .../web/api/window/beforeunload_event/index.html | 106 + .../api/window/domcontentloaded_event/index.html | 177 ++ files/pt-br/web/api/window/load_event/index.html | 89 + files/pt-br/web/api/window/localstorage/index.html | 123 + files/pt-br/web/api/window/onscroll/index.html | 99 - files/pt-br/web/api/window/url/index.html | 101 - .../web/api/window/window.localstorage/index.html | 123 - files/pt-br/web/api/windowbase64/atob/index.html | 72 - files/pt-br/web/api/windowbase64/index.html | 121 - .../api/windoworworkerglobalscope/atob/index.html | 72 + .../cleartimeout/index.html | 100 + .../web/api/windowtimers/cleartimeout/index.html | 100 - files/pt-br/web/api/windowtimers/index.html | 117 - .../requisicoes_sincronas_e_assincronas/index.html | 234 -- .../index.html | 234 ++ .../usando_xmlhttprequest/index.html | 688 ----- .../xmlhttprequest/using_xmlhttprequest/index.html | 688 +++++ .../web/css/-moz-box-ordinal-group/index.html | 60 - files/pt-br/web/css/-moz-cell/index.html | 9 - files/pt-br/web/css/actual_value/index.html | 34 + files/pt-br/web/css/attribute_selectors/index.html | 158 + files/pt-br/web/css/box-ordinal-group/index.html | 60 + files/pt-br/web/css/box_model/index.html | 62 - "files/pt-br/web/css/coment\303\241rio/index.html" | 49 - files/pt-br/web/css/comments/index.html | 49 + files/pt-br/web/css/computed_value/index.html | 56 + .../usando_anima\303\247\303\265es_css/index.html" | 332 -- .../css_animations/using_css_animations/index.html | 332 ++ .../border-image_generator/index.html | 2627 ++++++++++++++++ .../border-radius_generator/index.html | 1593 ++++++++++ .../web/css/css_background_and_borders/index.html | 155 - .../using_css_multiple_backgrounds/index.html | 58 - .../web/css/css_backgrounds_and_borders/index.html | 155 + .../resizing_background_images/index.html | 109 + .../using_multiple_backgrounds/index.html | 58 + .../introduction_to_the_css_box_model/index.html | 62 + .../css/css_box_model/margin_collapsing/index.html | 74 - .../mastering_margin_collapsing/index.html | 74 + .../css/css_colors/color_picker_tool/index.html | 3241 ++++++++++++++++++++ .../web/css/css_colors/seletor_de_cores/index.html | 3241 -------------------- .../basic_concepts_of_flexbox/index.html | 239 ++ .../conceitos_basicos_do_flexbox/index.html | 239 -- .../index.html | 47 - .../implementing_image_sprites_in_css/index.html | 47 + .../understanding_z_index/index.html | 48 + files/pt-br/web/css/css_reference/index.html | 75 - files/pt-br/web/css/css_selectors/index.html | 150 + files/pt-br/web/css/css_tipos/index.html | 64 - files/pt-br/web/css/css_types/index.html | 64 + .../pt-br/web/css/elemento_substituido/index.html | 40 - .../cascading_and_inheritance/index.html | 128 - .../getting_started/como_css_funciona/index.html | 126 - files/pt-br/web/css/getting_started/index.html | 98 - .../web/css/getting_started/javascript/index.html | 140 - .../pt-br/web/css/getting_started/lists/index.html | 272 -- .../getting_started/oque_é_css/index.html | 112 - .../css/getting_started/porque_usar_css/index.html | 106 - .../web/css/getting_started/seletores/index.html | 430 --- files/pt-br/web/css/hifens/index.html | 902 ------ files/pt-br/web/css/hyphens/index.html | 902 ++++++ files/pt-br/web/css/image/index.html | 157 + files/pt-br/web/css/imagem/index.html | 157 - files/pt-br/web/css/initial_value/index.html | 30 + files/pt-br/web/css/layout_mode/index.html | 25 + files/pt-br/web/css/mask/index.html | 150 + .../media_queries/using_media_queries/index.html | 639 ++++ files/pt-br/web/css/modelo_layout/index.html | 25 - files/pt-br/web/css/modelo_visual/index.html | 227 -- files/pt-br/web/css/overflow-wrap/index.html | 117 + .../index.html | 76 - .../index.html | 76 + files/pt-br/web/css/pseudo-elementos/index.html | 104 - files/pt-br/web/css/pseudo-elements/index.html | 104 + files/pt-br/web/css/reference/index.html | 75 + files/pt-br/web/css/replaced_element/index.html | 40 + files/pt-br/web/css/resolved_value/index.html | 40 + .../pt-br/web/css/seletor_de_atributos/index.html | 158 - files/pt-br/web/css/seletor_universal/index.html | 105 - files/pt-br/web/css/seletores_css/index.html | 150 - files/pt-br/web/css/sintaxe/index.html | 70 - files/pt-br/web/css/sintexe_valor/index.html | 436 --- files/pt-br/web/css/specified_value/index.html | 44 + files/pt-br/web/css/syntax/index.html | 70 + .../css/tools/border-image_generator/index.html | 2627 ---------------- .../css/tools/border-radius_generator/index.html | 1593 ---------- files/pt-br/web/css/universal_selectors/index.html | 105 + files/pt-br/web/css/used_value/index.html | 114 + files/pt-br/web/css/valor_atual/index.html | 34 - files/pt-br/web/css/valor_computado/index.html | 56 - files/pt-br/web/css/valor_espeficifco/index.html | 44 - files/pt-br/web/css/valor_inicial/index.html | 30 - files/pt-br/web/css/valor_resolvido/index.html | 40 - files/pt-br/web/css/valor_usado/index.html | 114 - .../web/css/value_definition_syntax/index.html | 436 +++ .../web/css/visual_formatting_model/index.html | 227 ++ files/pt-br/web/css/word-wrap/index.html | 117 - files/pt-br/web/events/abort/index.html | 70 - files/pt-br/web/events/beforeunload/index.html | 106 - files/pt-br/web/events/blur/index.html | 154 - files/pt-br/web/events/domcontentloaded/index.html | 177 -- files/pt-br/web/events/focus/index.html | 137 - files/pt-br/web/events/focusin/index.html | 125 - files/pt-br/web/events/focusout/index.html | 125 - files/pt-br/web/events/input/index.html | 248 -- files/pt-br/web/events/load/index.html | 89 - files/pt-br/web/events/readystatechange/index.html | 83 - .../web/guide/css/css_media_queries/index.html | 639 ---- .../index.html" | 20 - .../guide/css/scaling_background_images/index.html | 109 - .../web/guide/css/understanding_z_index/index.html | 48 - .../creating_and_triggering_events/index.html | 145 + .../events/criando_e_disparando_eventos/index.html | 145 - .../pt-br/web/guide/events/touch_events/index.html | 353 --- files/pt-br/web/guide/graphics/index.html | 49 + "files/pt-br/web/guide/gr\303\241ficos/index.html" | 49 - .../canvas_tutorial/advanced_animations/index.html | 386 --- .../applying_styles_and_colors/index.html | 725 ----- .../canvas_tutorial/basic_animations/index.html | 331 -- .../canvas_tutorial/compositing/exemplo/index.html | 294 -- .../html/canvas_tutorial/compositing/index.html | 112 - .../canvas_tutorial/conclus\303\243o/index.html" | 49 - .../html/canvas_tutorial/drawing_shapes/index.html | 581 ---- .../html/canvas_tutorial/drawing_text/index.html | 169 - .../web/guide/html/canvas_tutorial/index.html | 56 - .../canvas_tutorial/otimizando_canvas/index.html | 115 - .../html/canvas_tutorial/using_images/index.html | 333 -- .../canvas_tutorial/utilizacao_basica/index.html | 153 - .../guide/html/categorias_de_conteudo/index.html | 148 - .../web/guide/html/content_categories/index.html | 148 + .../web/guide/html/content_editable/index.html | 57 - .../web/guide/html/editable_content/index.html | 57 + .../guide/html/forms/form_validation/index.html | 813 ----- .../how_to_build_custom_form_widgets/index.html | 786 ----- .../forms/how_to_structure_an_html_form/index.html | 304 -- files/pt-br/web/guide/html/forms/index.html | 79 - .../forms/meu_primeiro_formulario_html/index.html | 270 -- .../guide/html/forms/os_widgets_nativos/index.html | 701 ----- .../sending_and_retrieving_form_data/index.html | 251 -- files/pt-br/web/guide/html/html5/index.html | 299 ++ .../html/html5/introduction_to_html5/index.html | 23 + .../guide/html/using_data_attributes/index.html | 72 - .../using_html_sections_and_outlines/index.html | 416 +++ .../introducao_ao_desenvolvimento_web/index.html | 97 - .../introduction_to_web_development/index.html | 97 + .../guide/mobile/mobile-friendliness/index.html | 30 + .../web/guide/mobile/separate_sites/index.html | 30 + files/pt-br/web/html/attributes/index.html | 578 ++++ .../pt-br/web/html/block-level_elements/index.html | 126 + .../web/html/canvas/a_basic_ray-caster/index.html | 76 - files/pt-br/web/html/canvas/index.html | 134 - .../index.html | 69 - files/pt-br/web/html/cors_enabled_image/index.html | 113 + .../web/html/cors_imagens_habilitadas/index.html | 113 - .../index.html" | 135 - files/pt-br/web/html/element/command/index.html | 129 - files/pt-br/web/html/element/content/index.html | 101 + .../web/html/element/conte\303\272do/index.html" | 101 - files/pt-br/web/html/element/figura/index.html | 193 -- files/pt-br/web/html/element/figure/index.html | 193 ++ files/pt-br/web/html/element/input/data/index.html | 430 --- files/pt-br/web/html/element/input/date/index.html | 430 +++ .../web/html/elementos_block-level/index.html | 126 - files/pt-br/web/html/favicon/index.html | 32 - .../web/html/formatos_midia_suportados/index.html | 526 ---- .../html/global_attributes/spellcheck/index.html | 69 + files/pt-br/web/html/html5/index.html | 299 -- .../html/html5/introduction_to_html5/index.html | 23 - files/pt-br/web/html/inline_elemente/index.html | 29 - files/pt-br/web/html/inline_elements/index.html | 29 + files/pt-br/web/html/microformatos/index.html | 444 --- files/pt-br/web/html/microformats/index.html | 444 +++ .../index.html | 23 - files/pt-br/web/html/reference/index.html | 25 + files/pt-br/web/html/referenciahtml/index.html | 25 - .../html/using_html5_audio_and_video/index.html | 240 -- .../identifying_resources_on_the_web/index.html | 183 -- files/pt-br/web/http/basico_sobre_http/index.html | 61 - .../complete_list_of_mime_types/index.html | 336 -- .../http/basico_sobre_http/mime_types/index.html | 314 -- .../identifying_resources_on_the_web/index.html | 183 ++ files/pt-br/web/http/basics_of_http/index.html | 61 + .../mime_types/common_types/index.html | 336 ++ .../web/http/basics_of_http/mime_types/index.html | 314 ++ files/pt-br/web/http/caching/index.html | 157 + files/pt-br/web/http/compression/index.html | 72 + .../pt-br/web/http/compress\303\243o/index.html" | 72 - .../connection_management_in_http_1.x/index.html | 94 + .../pt-br/web/http/controle_acesso_cors/index.html | 553 ---- files/pt-br/web/http/cors/index.html | 553 ++++ .../index.html" | 94 - .../web/http/headers/conex\303\243o/index.html" | 54 - files/pt-br/web/http/headers/connection/index.html | 54 + .../headers/localiza\303\247\303\243o/index.html" | 82 - files/pt-br/web/http/headers/location/index.html | 82 + files/pt-br/web/http/http/index.html | 157 - files/pt-br/web/http/mensagens/index.html | 146 - files/pt-br/web/http/messages/index.html | 146 + files/pt-br/web/http/redirecionamento/index.html | 260 -- files/pt-br/web/http/redirections/index.html | 260 ++ .../web/http/server-side_access_control/index.html | 213 -- files/pt-br/web/javascript/closures/index.html | 336 ++ .../index.html | 280 -- .../index.html | 280 ++ .../pt-br/web/javascript/guide/closures/index.html | 336 -- .../cole\303\247\303\265es_chaveadas/index.html" | 149 - .../control_flow_and_error_handling/index.html | 429 +++ .../guide/declara\303\247\303\265es/index.html" | 429 --- .../guide/details_of_the_object_model/index.html | 705 +++++ .../guide/detalhes_do_modelo_do_objeto/index.html | 705 ----- .../javascript/guide/formatando_texto/index.html | 250 -- .../web/javascript/guide/functions/index.html | 640 ++++ .../guide/fun\303\247\303\265es/index.html" | 640 ---- .../javascript/guide/grammar_and_types/index.html | 601 ++++ .../web/javascript/guide/igualdade/index.html | 259 -- .../inheritance_and_the_prototype_chain/index.html | 193 -- .../guide/iteratores_e_geradores/index.html | 161 - .../guide/iterators_and_generators/index.html | 161 + .../javascript/guide/lacos_e_iteracoes/index.html | 333 -- .../guide/loops_and_iteration/index.html | 333 ++ .../pt-br/web/javascript/guide/modules/index.html | 454 +++ .../javascript/guide/m\303\263dulos/index.html" | 454 --- .../javascript/guide/numbers_and_dates/index.html | 374 +++ .../javascript/guide/numeros_e_datas/index.html | 374 --- .../javascript/guide/sintaxe_e_tipos/index.html | 583 ---- .../javascript/guide/text_formatting/index.html | 250 ++ .../guide/trabalhando_com_objetos/index.html | 494 --- .../javascript/guide/usando_promises/index.html | 269 -- .../web/javascript/guide/using_promises/index.html | 269 ++ .../values,_variables,_and_literals/index.html | 601 ---- .../guide/working_with_objects/index.html | 494 +++ .../inheritance_and_the_prototype_chain/index.html | 193 ++ .../index.html | 352 --- .../index.html" | 38 - .../index.html | 52 - .../missing_curly_after_property_list/index.html | 52 + .../index.html | 38 + .../reference/errors/not_defined/index.html | 66 + .../errors/n\303\243o_definido/index.html" | 66 - .../index.html" | 116 - .../errors/unnamed_function_statement/index.html | 116 + .../functions/default_parameters/index.html | 210 ++ .../functions/definicoes_metodos/index.html | 200 -- .../functions/method_definitions/index.html | 200 ++ .../functions/parametros_predefinidos/index.html | 210 -- .../global_objects/array/contains/index.html | 106 - .../global_objects/array/filter/index.html | 227 ++ .../global_objects/array/filtro/index.html | 227 -- .../global_objects/array/includes/index.html | 106 + .../global_objects/array/prototype/index.html | 206 -- .../global_objects/bigint/prototype/index.html | 61 - .../global_objects/boolean/prototype/index.html | 112 - .../global_objects/function/prototype/index.html | 95 - .../intl/numberformat/prototype/index.html | 126 - .../global_objects/map/prototype/index.html | 136 - .../global_objects/number/prototype/index.html | 140 - .../global_objects/object/prototype/index.html | 227 -- .../global_objects/promise/prototype/index.html | 114 - .../global_objects/set/prototype/index.html | 85 - .../global_objects/string/prototype/index.html | 177 -- .../global_objects/weakmap/prototype/index.html | 118 - .../operators/arithmetic_operators/index.html | 329 -- .../atribuicao_via_desestruturacao/index.html | 445 --- .../operators/bitwise_operators/index.html | 559 ---- .../reference/operators/comma_operator/index.html | 102 + .../operators/conditional_operator/index.html | 171 ++ .../operators/destructuring_assignment/index.html | 445 +++ .../operators/inicializador_objeto/index.html | 392 --- .../nullish_coalescing_operator/index.html | 159 + .../operators/object_initializer/index.html | 392 +++ .../operators/operador_condicional/index.html | 171 -- .../operador_de_coalescencia_nula/index.html | 159 - .../operators/operador_virgula/index.html | 102 - .../index.html" | 251 -- .../operators/operadores_logicos/index.html | 343 --- .../reference/operators/spread_operator/index.html | 201 -- .../reference/statements/async_function/index.html | 149 + .../reference/statements/default/index.html | 187 -- .../statements/funcoes_assincronas/index.html | 149 - .../reference/template_literals/index.html | 140 + .../reference/template_strings/index.html | 140 - files/pt-br/web/mathml/examples/index.html | 20 + files/pt-br/web/mathml/exemplos/index.html | 20 - files/pt-br/web/media/formats/index.html | 526 ++++ .../caminho_de_renderizacao_critico/index.html | 60 - .../performance/critical_rendering_path/index.html | 60 + .../progressive_web_apps/introduction/index.html | 90 + .../introdu\303\247\303\243o/index.html" | 90 - .../index.html" | 32 - .../web/svg/intensivo_de_namespaces/index.html | 186 -- .../web/svg/namespaces_crash_course/index.html | 186 ++ files/pt-br/web/tutoriais/index.html | 253 -- files/pt-br/web/tutorials/index.html | 253 ++ .../usando_custom_elements/index.html | 289 -- .../using_custom_elements/index.html | 289 ++ .../advanced_example/index.html | 100 + .../web/xslt/xslt_js_interface_in_gecko/index.html | 24 + 432 files changed, 45282 insertions(+), 52489 deletions(-) create mode 100644 files/pt-br/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html create mode 100644 files/pt-br/web/accessibility/aria/aria_screen_reader_implementors_guide/index.html delete mode 100644 files/pt-br/web/accessibility/aria/aria_techniques/usando_o_atributo_aria-labelledby/index.html delete mode 100644 files/pt-br/web/accessibility/aria/aria_techniques/usando_o_atributo_aria-required/index.html delete mode 100644 files/pt-br/web/accessibility/aria/aria_techniques/usando_o_slider_role/index.html create mode 100644 files/pt-br/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html create mode 100644 files/pt-br/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html create mode 100644 files/pt-br/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html create mode 100644 files/pt-br/web/accessibility/aria/aria_techniques/using_the_slider_role/index.html delete mode 100644 files/pt-br/web/accessibility/aria/aria_techniques/utilizando_o_alert_role/index.html create mode 100644 files/pt-br/web/accessibility/aria/forms/basic_form_hints/index.html delete mode 100644 "files/pt-br/web/accessibility/aria/forms/dicas_b\303\241sicas_de_form/index.html" delete mode 100644 files/pt-br/web/accessibility/aria/guia_para_implementar_o_leitor_de_tela_aria/index.html create mode 100644 files/pt-br/web/accessibility/aria/widgets/overview/index.html delete mode 100644 "files/pt-br/web/accessibility/aria/widgets/vis\303\243o_geral/index.html" create mode 100644 files/pt-br/web/accessibility/index.html create mode 100644 files/pt-br/web/accessibility/mobile_accessibility_checklist/index.html create mode 100644 files/pt-br/web/accessibility/understanding_wcag/index.html create mode 100644 files/pt-br/web/accessibility/understanding_wcag/keyboard/index.html delete mode 100644 files/pt-br/web/acessibilidade/accessibilidade_para_plataforma_movel/index.html delete mode 100644 files/pt-br/web/acessibilidade/an_overview_of_accessible_web_applications_and_widgets/index.html delete mode 100644 files/pt-br/web/acessibilidade/desenvolvimento_web/index.html delete mode 100644 files/pt-br/web/acessibilidade/entendendo_wcag/index.html delete mode 100644 files/pt-br/web/acessibilidade/entendendo_wcag/keyboard/index.html delete mode 100644 files/pt-br/web/acessibilidade/index.html delete mode 100644 files/pt-br/web/acessibilidade/problemas_com_jaws_no_firefox/index.html delete mode 100644 files/pt-br/web/api/api_de_desempenho/index.html delete mode 100644 files/pt-br/web/api/api_push/best_practices/index.html delete mode 100644 files/pt-br/web/api/api_push/index.html delete mode 100644 files/pt-br/web/api/api_web_audio/index.html delete mode 100644 files/pt-br/web/api/api_web_audio/sintetizador_simples/index.html delete mode 100644 files/pt-br/web/api/audiocontext/currenttime/index.html create mode 100644 files/pt-br/web/api/baseaudiocontext/currenttime/index.html create mode 100644 files/pt-br/web/api/battery_status_api/index.html create mode 100644 files/pt-br/web/api/batterymanager/ondischargingtimechange/index.html delete mode 100644 files/pt-br/web/api/batterymanager/ondischargintimechange/index.html create mode 100644 files/pt-br/web/api/canvas_api/a_basic_ray-caster/index.html create mode 100644 files/pt-br/web/api/canvas_api/index.html create mode 100644 files/pt-br/web/api/canvas_api/tutorial/advanced_animations/index.html create mode 100644 files/pt-br/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html create mode 100644 files/pt-br/web/api/canvas_api/tutorial/basic_animations/index.html create mode 100644 files/pt-br/web/api/canvas_api/tutorial/basic_usage/index.html create mode 100644 files/pt-br/web/api/canvas_api/tutorial/compositing/example/index.html create mode 100644 files/pt-br/web/api/canvas_api/tutorial/compositing/index.html create mode 100644 files/pt-br/web/api/canvas_api/tutorial/drawing_shapes/index.html create mode 100644 files/pt-br/web/api/canvas_api/tutorial/drawing_text/index.html create mode 100644 files/pt-br/web/api/canvas_api/tutorial/finale/index.html create mode 100644 files/pt-br/web/api/canvas_api/tutorial/index.html create mode 100644 files/pt-br/web/api/canvas_api/tutorial/optimizing_canvas/index.html create mode 100644 files/pt-br/web/api/canvas_api/tutorial/using_images/index.html create mode 100644 files/pt-br/web/api/crypto/getrandomvalues/index.html delete mode 100644 files/pt-br/web/api/cryptokey/algorithm/index.html delete mode 100644 files/pt-br/web/api/cryptokey/extractable/index.html delete mode 100644 files/pt-br/web/api/cryptokey/type/index.html delete mode 100644 files/pt-br/web/api/cryptokey/usages/index.html delete mode 100644 files/pt-br/web/api/deviceacceleration/index.html create mode 100644 files/pt-br/web/api/devicemotioneventacceleration/index.html create mode 100644 files/pt-br/web/api/devicemotioneventrotationrate/index.html delete mode 100644 files/pt-br/web/api/devicerotationrate/index.html delete mode 100644 files/pt-br/web/api/document/activeelement/index.html delete mode 100644 files/pt-br/web/api/document/elementfrompoint/index.html delete mode 100644 files/pt-br/web/api/document/elementoregistrado/index.html delete mode 100644 files/pt-br/web/api/document/getselection/index.html create mode 100644 files/pt-br/web/api/document/readystatechange_event/index.html create mode 100644 files/pt-br/web/api/document/registerelement/index.html create mode 100644 files/pt-br/web/api/document_object_model/events/index.html create mode 100644 files/pt-br/web/api/document_object_model/examples/index.html create mode 100644 files/pt-br/web/api/document_object_model/how_to_create_a_dom_tree/index.html create mode 100644 files/pt-br/web/api/document_object_model/index.html create mode 100644 files/pt-br/web/api/document_object_model/introduction/index.html create mode 100644 files/pt-br/web/api/document_object_model/whitespace/index.html create mode 100644 files/pt-br/web/api/documentorshadowroot/activeelement/index.html create mode 100644 files/pt-br/web/api/documentorshadowroot/elementfrompoint/index.html create mode 100644 files/pt-br/web/api/documentorshadowroot/getselection/index.html delete mode 100644 files/pt-br/web/api/element/accesskey/index.html delete mode 100644 files/pt-br/web/api/element/addeventlistener/index.html create mode 100644 files/pt-br/web/api/element/blur_event/index.html create mode 100644 files/pt-br/web/api/element/focus_event/index.html create mode 100644 files/pt-br/web/api/element/focusin_event/index.html create mode 100644 files/pt-br/web/api/element/focusout_event/index.html delete mode 100644 files/pt-br/web/api/element/name/index.html delete mode 100644 files/pt-br/web/api/event/comparativo_entre_event_targets/index.html create mode 100644 files/pt-br/web/api/event/comparison_of_event_targets/index.html create mode 100644 files/pt-br/web/api/eventtarget/addeventlistener/index.html create mode 100644 files/pt-br/web/api/fetch_api/cross-global_fetch_usage/index.html delete mode 100644 files/pt-br/web/api/fetch_api/uso_de_busca_cross-global/index.html create mode 100644 files/pt-br/web/api/geolocation_api/index.html create mode 100644 files/pt-br/web/api/history_api/example/index.html delete mode 100644 files/pt-br/web/api/history_api/exemplo/index.html create mode 100644 files/pt-br/web/api/html_drag_and_drop_api/file_drag_and_drop/index.html create mode 100644 files/pt-br/web/api/html_drag_and_drop_api/index.html create mode 100644 files/pt-br/web/api/htmlcontentelement/select/index.html delete mode 100644 files/pt-br/web/api/htmlcontentelement/seletor/index.html create mode 100644 files/pt-br/web/api/htmlelement/accesskey/index.html delete mode 100644 files/pt-br/web/api/htmlelement/blur/index.html delete mode 100644 files/pt-br/web/api/htmlelement/dataset/index.html delete mode 100644 files/pt-br/web/api/htmlelement/focus/index.html create mode 100644 files/pt-br/web/api/htmlelement/innertext/index.html create mode 100644 files/pt-br/web/api/htmlelement/input_event/index.html create mode 100644 files/pt-br/web/api/htmlmediaelement/abort_event/index.html create mode 100644 files/pt-br/web/api/htmlorforeignelement/blur/index.html create mode 100644 files/pt-br/web/api/htmlorforeignelement/dataset/index.html create mode 100644 files/pt-br/web/api/htmlorforeignelement/focus/index.html delete mode 100644 files/pt-br/web/api/indexeddb_api/usando_indexeddb/index.html create mode 100644 files/pt-br/web/api/indexeddb_api/using_indexeddb/index.html create mode 100644 files/pt-br/web/api/network_information_api/index.html delete mode 100644 "files/pt-br/web/api/node/entendendo_o_uso_do_m\303\251todo_appendchild-javascript/index.html" delete mode 100644 files/pt-br/web/api/node/innertext/index.html delete mode 100644 files/pt-br/web/api/notificacoes/index.html create mode 100644 files/pt-br/web/api/notification/index.html create mode 100644 files/pt-br/web/api/performance_api/index.html create mode 100644 files/pt-br/web/api/push_api/best_practices/index.html create mode 100644 files/pt-br/web/api/push_api/index.html delete mode 100644 files/pt-br/web/api/randomsource/getrandomvalues/index.html delete mode 100644 files/pt-br/web/api/randomsource/index.html create mode 100644 files/pt-br/web/api/selection/index.html delete mode 100644 "files/pt-br/web/api/sele\303\247\303\243o/index.html" delete mode 100644 files/pt-br/web/api/svgaelement/svgalement.target/index.html create mode 100644 files/pt-br/web/api/svgaelement/target/index.html create mode 100644 files/pt-br/web/api/touch_events/index.html delete mode 100644 files/pt-br/web/api/web_animations_api/usando_a_web_animations_api/index.html create mode 100644 files/pt-br/web/api/web_animations_api/using_the_web_animations_api/index.html create mode 100644 files/pt-br/web/api/web_audio_api/index.html create mode 100644 files/pt-br/web/api/web_audio_api/simple_synth/index.html create mode 100644 files/pt-br/web/api/web_storage_api/index.html create mode 100644 files/pt-br/web/api/web_storage_api/using_the_web_storage_api/index.html delete mode 100644 files/pt-br/web/api/web_storage_api_pt_br/index.html delete mode 100644 files/pt-br/web/api/web_storage_api_pt_br/using_the_web_storage_api/index.html create mode 100644 files/pt-br/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html delete mode 100644 files/pt-br/web/api/webgl_api/tutorial/adicionando_conteudo_2d_a_um_contexto_webgl/index.html create mode 100644 files/pt-br/web/api/webrtc_api/simple_rtcdatachannel_sample/index.html delete mode 100644 files/pt-br/web/api/webrtc_api/simples_rtcdatachannel_amostra/index.html create mode 100644 files/pt-br/web/api/websockets_api/index.html create mode 100644 files/pt-br/web/api/websockets_api/writing_websocket_client_applications/index.html create mode 100644 files/pt-br/web/api/websockets_api/writing_websocket_server/index.html create mode 100644 files/pt-br/web/api/websockets_api/writing_websocket_servers/index.html create mode 100644 files/pt-br/web/api/window/beforeunload_event/index.html create mode 100644 files/pt-br/web/api/window/domcontentloaded_event/index.html create mode 100644 files/pt-br/web/api/window/load_event/index.html create mode 100644 files/pt-br/web/api/window/localstorage/index.html delete mode 100644 files/pt-br/web/api/window/onscroll/index.html delete mode 100644 files/pt-br/web/api/window/url/index.html delete mode 100644 files/pt-br/web/api/window/window.localstorage/index.html delete mode 100644 files/pt-br/web/api/windowbase64/atob/index.html delete mode 100644 files/pt-br/web/api/windowbase64/index.html create mode 100644 files/pt-br/web/api/windoworworkerglobalscope/atob/index.html create mode 100644 files/pt-br/web/api/windoworworkerglobalscope/cleartimeout/index.html delete mode 100644 files/pt-br/web/api/windowtimers/cleartimeout/index.html delete mode 100644 files/pt-br/web/api/windowtimers/index.html delete mode 100644 files/pt-br/web/api/xmlhttprequest/requisicoes_sincronas_e_assincronas/index.html create mode 100644 files/pt-br/web/api/xmlhttprequest/synchronous_and_asynchronous_requests/index.html delete mode 100644 files/pt-br/web/api/xmlhttprequest/usando_xmlhttprequest/index.html create mode 100644 files/pt-br/web/api/xmlhttprequest/using_xmlhttprequest/index.html delete mode 100644 files/pt-br/web/css/-moz-box-ordinal-group/index.html delete mode 100644 files/pt-br/web/css/-moz-cell/index.html create mode 100644 files/pt-br/web/css/actual_value/index.html create mode 100644 files/pt-br/web/css/attribute_selectors/index.html create mode 100644 files/pt-br/web/css/box-ordinal-group/index.html delete mode 100644 files/pt-br/web/css/box_model/index.html delete mode 100644 "files/pt-br/web/css/coment\303\241rio/index.html" create mode 100644 files/pt-br/web/css/comments/index.html create mode 100644 files/pt-br/web/css/computed_value/index.html delete mode 100644 "files/pt-br/web/css/css_animations/usando_anima\303\247\303\265es_css/index.html" create mode 100644 files/pt-br/web/css/css_animations/using_css_animations/index.html create mode 100644 files/pt-br/web/css/css_background_and_borders/border-image_generator/index.html create mode 100644 files/pt-br/web/css/css_background_and_borders/border-radius_generator/index.html delete mode 100644 files/pt-br/web/css/css_background_and_borders/index.html delete mode 100644 files/pt-br/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html create mode 100644 files/pt-br/web/css/css_backgrounds_and_borders/index.html create mode 100644 files/pt-br/web/css/css_backgrounds_and_borders/resizing_background_images/index.html create mode 100644 files/pt-br/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html create mode 100644 files/pt-br/web/css/css_box_model/introduction_to_the_css_box_model/index.html delete mode 100644 files/pt-br/web/css/css_box_model/margin_collapsing/index.html create mode 100644 files/pt-br/web/css/css_box_model/mastering_margin_collapsing/index.html create mode 100644 files/pt-br/web/css/css_colors/color_picker_tool/index.html delete mode 100644 files/pt-br/web/css/css_colors/seletor_de_cores/index.html create mode 100644 files/pt-br/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html delete mode 100644 files/pt-br/web/css/css_flexible_box_layout/conceitos_basicos_do_flexbox/index.html delete mode 100644 files/pt-br/web/css/css_images/implementando_sprites_de_imagens_em_css/index.html create mode 100644 files/pt-br/web/css/css_images/implementing_image_sprites_in_css/index.html create mode 100644 files/pt-br/web/css/css_positioning/understanding_z_index/index.html delete mode 100644 files/pt-br/web/css/css_reference/index.html create mode 100644 files/pt-br/web/css/css_selectors/index.html delete mode 100644 files/pt-br/web/css/css_tipos/index.html create mode 100644 files/pt-br/web/css/css_types/index.html delete mode 100644 files/pt-br/web/css/elemento_substituido/index.html delete mode 100644 files/pt-br/web/css/getting_started/cascading_and_inheritance/index.html delete mode 100644 files/pt-br/web/css/getting_started/como_css_funciona/index.html delete mode 100644 files/pt-br/web/css/getting_started/index.html delete mode 100644 files/pt-br/web/css/getting_started/javascript/index.html delete mode 100644 files/pt-br/web/css/getting_started/lists/index.html delete mode 100644 files/pt-br/web/css/getting_started/oque_é_css/index.html delete mode 100644 files/pt-br/web/css/getting_started/porque_usar_css/index.html delete mode 100644 files/pt-br/web/css/getting_started/seletores/index.html delete mode 100644 files/pt-br/web/css/hifens/index.html create mode 100644 files/pt-br/web/css/hyphens/index.html create mode 100644 files/pt-br/web/css/image/index.html delete mode 100644 files/pt-br/web/css/imagem/index.html create mode 100644 files/pt-br/web/css/initial_value/index.html create mode 100644 files/pt-br/web/css/layout_mode/index.html create mode 100644 files/pt-br/web/css/mask/index.html create mode 100644 files/pt-br/web/css/media_queries/using_media_queries/index.html delete mode 100644 files/pt-br/web/css/modelo_layout/index.html delete mode 100644 files/pt-br/web/css/modelo_visual/index.html create mode 100644 files/pt-br/web/css/overflow-wrap/index.html delete mode 100644 files/pt-br/web/css/privacidade_e_o_seletor__colon_visited/index.html create mode 100644 files/pt-br/web/css/privacy_and_the__colon_visited_selector/index.html delete mode 100644 files/pt-br/web/css/pseudo-elementos/index.html create mode 100644 files/pt-br/web/css/pseudo-elements/index.html create mode 100644 files/pt-br/web/css/reference/index.html create mode 100644 files/pt-br/web/css/replaced_element/index.html create mode 100644 files/pt-br/web/css/resolved_value/index.html delete mode 100644 files/pt-br/web/css/seletor_de_atributos/index.html delete mode 100644 files/pt-br/web/css/seletor_universal/index.html delete mode 100644 files/pt-br/web/css/seletores_css/index.html delete mode 100644 files/pt-br/web/css/sintaxe/index.html delete mode 100644 files/pt-br/web/css/sintexe_valor/index.html create mode 100644 files/pt-br/web/css/specified_value/index.html create mode 100644 files/pt-br/web/css/syntax/index.html delete mode 100644 files/pt-br/web/css/tools/border-image_generator/index.html delete mode 100644 files/pt-br/web/css/tools/border-radius_generator/index.html create mode 100644 files/pt-br/web/css/universal_selectors/index.html create mode 100644 files/pt-br/web/css/used_value/index.html delete mode 100644 files/pt-br/web/css/valor_atual/index.html delete mode 100644 files/pt-br/web/css/valor_computado/index.html delete mode 100644 files/pt-br/web/css/valor_espeficifco/index.html delete mode 100644 files/pt-br/web/css/valor_inicial/index.html delete mode 100644 files/pt-br/web/css/valor_resolvido/index.html delete mode 100644 files/pt-br/web/css/valor_usado/index.html create mode 100644 files/pt-br/web/css/value_definition_syntax/index.html create mode 100644 files/pt-br/web/css/visual_formatting_model/index.html delete mode 100644 files/pt-br/web/css/word-wrap/index.html delete mode 100644 files/pt-br/web/events/abort/index.html delete mode 100644 files/pt-br/web/events/beforeunload/index.html delete mode 100644 files/pt-br/web/events/blur/index.html delete mode 100644 files/pt-br/web/events/domcontentloaded/index.html delete mode 100644 files/pt-br/web/events/focus/index.html delete mode 100644 files/pt-br/web/events/focusin/index.html delete mode 100644 files/pt-br/web/events/focusout/index.html delete mode 100644 files/pt-br/web/events/input/index.html delete mode 100644 files/pt-br/web/events/load/index.html delete mode 100644 files/pt-br/web/events/readystatechange/index.html delete mode 100644 files/pt-br/web/guide/css/css_media_queries/index.html delete mode 100644 "files/pt-br/web/guide/css/css_media_queries_(consultas_de_m\303\255dia_em_css)/index.html" delete mode 100644 files/pt-br/web/guide/css/scaling_background_images/index.html delete mode 100644 files/pt-br/web/guide/css/understanding_z_index/index.html create mode 100644 files/pt-br/web/guide/events/creating_and_triggering_events/index.html delete mode 100644 files/pt-br/web/guide/events/criando_e_disparando_eventos/index.html delete mode 100644 files/pt-br/web/guide/events/touch_events/index.html create mode 100644 files/pt-br/web/guide/graphics/index.html delete mode 100644 "files/pt-br/web/guide/gr\303\241ficos/index.html" delete mode 100644 files/pt-br/web/guide/html/canvas_tutorial/advanced_animations/index.html delete mode 100644 files/pt-br/web/guide/html/canvas_tutorial/applying_styles_and_colors/index.html delete mode 100644 files/pt-br/web/guide/html/canvas_tutorial/basic_animations/index.html delete mode 100644 files/pt-br/web/guide/html/canvas_tutorial/compositing/exemplo/index.html delete mode 100644 files/pt-br/web/guide/html/canvas_tutorial/compositing/index.html delete mode 100644 "files/pt-br/web/guide/html/canvas_tutorial/conclus\303\243o/index.html" delete mode 100644 files/pt-br/web/guide/html/canvas_tutorial/drawing_shapes/index.html delete mode 100644 files/pt-br/web/guide/html/canvas_tutorial/drawing_text/index.html delete mode 100644 files/pt-br/web/guide/html/canvas_tutorial/index.html delete mode 100644 files/pt-br/web/guide/html/canvas_tutorial/otimizando_canvas/index.html delete mode 100644 files/pt-br/web/guide/html/canvas_tutorial/using_images/index.html delete mode 100644 files/pt-br/web/guide/html/canvas_tutorial/utilizacao_basica/index.html delete mode 100644 files/pt-br/web/guide/html/categorias_de_conteudo/index.html create mode 100644 files/pt-br/web/guide/html/content_categories/index.html delete mode 100644 files/pt-br/web/guide/html/content_editable/index.html create mode 100644 files/pt-br/web/guide/html/editable_content/index.html delete mode 100644 files/pt-br/web/guide/html/forms/form_validation/index.html delete mode 100644 files/pt-br/web/guide/html/forms/how_to_build_custom_form_widgets/index.html delete mode 100644 files/pt-br/web/guide/html/forms/how_to_structure_an_html_form/index.html delete mode 100644 files/pt-br/web/guide/html/forms/index.html delete mode 100644 files/pt-br/web/guide/html/forms/meu_primeiro_formulario_html/index.html delete mode 100644 files/pt-br/web/guide/html/forms/os_widgets_nativos/index.html delete mode 100644 files/pt-br/web/guide/html/forms/sending_and_retrieving_form_data/index.html create mode 100644 files/pt-br/web/guide/html/html5/index.html create mode 100644 files/pt-br/web/guide/html/html5/introduction_to_html5/index.html delete mode 100644 files/pt-br/web/guide/html/using_data_attributes/index.html create mode 100644 files/pt-br/web/guide/html/using_html_sections_and_outlines/index.html delete mode 100644 files/pt-br/web/guide/introducao_ao_desenvolvimento_web/index.html create mode 100644 files/pt-br/web/guide/introduction_to_web_development/index.html create mode 100644 files/pt-br/web/guide/mobile/mobile-friendliness/index.html create mode 100644 files/pt-br/web/guide/mobile/separate_sites/index.html create mode 100644 files/pt-br/web/html/attributes/index.html create mode 100644 files/pt-br/web/html/block-level_elements/index.html delete mode 100644 files/pt-br/web/html/canvas/a_basic_ray-caster/index.html delete mode 100644 files/pt-br/web/html/canvas/index.html delete mode 100644 files/pt-br/web/html/controlando_verificacao_ortografica_em_formularios_html/index.html create mode 100644 files/pt-br/web/html/cors_enabled_image/index.html delete mode 100644 files/pt-br/web/html/cors_imagens_habilitadas/index.html delete mode 100644 "files/pt-br/web/html/dicas_para_criar_p\303\241ginas_html_de_carregamento_r\303\241pido/index.html" delete mode 100644 files/pt-br/web/html/element/command/index.html create mode 100644 files/pt-br/web/html/element/content/index.html delete mode 100644 "files/pt-br/web/html/element/conte\303\272do/index.html" delete mode 100644 files/pt-br/web/html/element/figura/index.html create mode 100644 files/pt-br/web/html/element/figure/index.html delete mode 100644 files/pt-br/web/html/element/input/data/index.html create mode 100644 files/pt-br/web/html/element/input/date/index.html delete mode 100644 files/pt-br/web/html/elementos_block-level/index.html delete mode 100644 files/pt-br/web/html/favicon/index.html delete mode 100644 files/pt-br/web/html/formatos_midia_suportados/index.html create mode 100644 files/pt-br/web/html/global_attributes/spellcheck/index.html delete mode 100644 files/pt-br/web/html/html5/index.html delete mode 100644 files/pt-br/web/html/html5/introduction_to_html5/index.html delete mode 100644 files/pt-br/web/html/inline_elemente/index.html create mode 100644 files/pt-br/web/html/inline_elements/index.html delete mode 100644 files/pt-br/web/html/microformatos/index.html create mode 100644 files/pt-br/web/html/microformats/index.html delete mode 100644 files/pt-br/web/html/optimizing_your_pages_for_speculative_parsing/index.html create mode 100644 files/pt-br/web/html/reference/index.html delete mode 100644 files/pt-br/web/html/referenciahtml/index.html delete mode 100644 files/pt-br/web/html/using_html5_audio_and_video/index.html delete mode 100644 files/pt-br/web/http/basico_sobre_http/identifying_resources_on_the_web/index.html delete mode 100644 files/pt-br/web/http/basico_sobre_http/index.html delete mode 100644 files/pt-br/web/http/basico_sobre_http/mime_types/complete_list_of_mime_types/index.html delete mode 100644 files/pt-br/web/http/basico_sobre_http/mime_types/index.html create mode 100644 files/pt-br/web/http/basics_of_http/identifying_resources_on_the_web/index.html create mode 100644 files/pt-br/web/http/basics_of_http/index.html create mode 100644 files/pt-br/web/http/basics_of_http/mime_types/common_types/index.html create mode 100644 files/pt-br/web/http/basics_of_http/mime_types/index.html create mode 100644 files/pt-br/web/http/caching/index.html create mode 100644 files/pt-br/web/http/compression/index.html delete mode 100644 "files/pt-br/web/http/compress\303\243o/index.html" create mode 100644 files/pt-br/web/http/connection_management_in_http_1.x/index.html delete mode 100644 files/pt-br/web/http/controle_acesso_cors/index.html create mode 100644 files/pt-br/web/http/cors/index.html delete mode 100644 "files/pt-br/web/http/gerenciamento_de_conex\303\243o_em_http_1.x/index.html" delete mode 100644 "files/pt-br/web/http/headers/conex\303\243o/index.html" create mode 100644 files/pt-br/web/http/headers/connection/index.html delete mode 100644 "files/pt-br/web/http/headers/localiza\303\247\303\243o/index.html" create mode 100644 files/pt-br/web/http/headers/location/index.html delete mode 100644 files/pt-br/web/http/http/index.html delete mode 100644 files/pt-br/web/http/mensagens/index.html create mode 100644 files/pt-br/web/http/messages/index.html delete mode 100644 files/pt-br/web/http/redirecionamento/index.html create mode 100644 files/pt-br/web/http/redirections/index.html delete mode 100644 files/pt-br/web/http/server-side_access_control/index.html create mode 100644 files/pt-br/web/javascript/closures/index.html delete mode 100644 files/pt-br/web/javascript/enumerabilidade_e_posse_de_propriedades/index.html create mode 100644 files/pt-br/web/javascript/enumerability_and_ownership_of_properties/index.html delete mode 100644 files/pt-br/web/javascript/guide/closures/index.html delete mode 100644 "files/pt-br/web/javascript/guide/cole\303\247\303\265es_chaveadas/index.html" create mode 100644 files/pt-br/web/javascript/guide/control_flow_and_error_handling/index.html delete mode 100644 "files/pt-br/web/javascript/guide/declara\303\247\303\265es/index.html" create mode 100644 files/pt-br/web/javascript/guide/details_of_the_object_model/index.html delete mode 100644 files/pt-br/web/javascript/guide/detalhes_do_modelo_do_objeto/index.html delete mode 100644 files/pt-br/web/javascript/guide/formatando_texto/index.html create mode 100644 files/pt-br/web/javascript/guide/functions/index.html delete mode 100644 "files/pt-br/web/javascript/guide/fun\303\247\303\265es/index.html" create mode 100644 files/pt-br/web/javascript/guide/grammar_and_types/index.html delete mode 100644 files/pt-br/web/javascript/guide/igualdade/index.html delete mode 100644 files/pt-br/web/javascript/guide/inheritance_and_the_prototype_chain/index.html delete mode 100644 files/pt-br/web/javascript/guide/iteratores_e_geradores/index.html create mode 100644 files/pt-br/web/javascript/guide/iterators_and_generators/index.html delete mode 100644 files/pt-br/web/javascript/guide/lacos_e_iteracoes/index.html create mode 100644 files/pt-br/web/javascript/guide/loops_and_iteration/index.html create mode 100644 files/pt-br/web/javascript/guide/modules/index.html delete mode 100644 "files/pt-br/web/javascript/guide/m\303\263dulos/index.html" create mode 100644 files/pt-br/web/javascript/guide/numbers_and_dates/index.html delete mode 100644 files/pt-br/web/javascript/guide/numeros_e_datas/index.html delete mode 100644 files/pt-br/web/javascript/guide/sintaxe_e_tipos/index.html create mode 100644 files/pt-br/web/javascript/guide/text_formatting/index.html delete mode 100644 files/pt-br/web/javascript/guide/trabalhando_com_objetos/index.html delete mode 100644 files/pt-br/web/javascript/guide/usando_promises/index.html create mode 100644 files/pt-br/web/javascript/guide/using_promises/index.html delete mode 100644 files/pt-br/web/javascript/guide/values,_variables,_and_literals/index.html create mode 100644 files/pt-br/web/javascript/guide/working_with_objects/index.html create mode 100644 files/pt-br/web/javascript/inheritance_and_the_prototype_chain/index.html delete mode 100644 files/pt-br/web/javascript/introduction_to_object-oriented_javascript/index.html delete mode 100644 "files/pt-br/web/javascript/reference/errors/fata_par\303\252nteses_ap\303\263s_lista_argumento/index.html" delete mode 100644 files/pt-br/web/javascript/reference/errors/fecha_chaves_esquecida_apos_lista_propriedades/index.html create mode 100644 files/pt-br/web/javascript/reference/errors/missing_curly_after_property_list/index.html create mode 100644 files/pt-br/web/javascript/reference/errors/missing_parenthesis_after_argument_list/index.html create mode 100644 files/pt-br/web/javascript/reference/errors/not_defined/index.html delete mode 100644 "files/pt-br/web/javascript/reference/errors/n\303\243o_definido/index.html" delete mode 100644 "files/pt-br/web/javascript/reference/errors/n\303\243onomeado_func\303\243o_declara\303\247\303\243o/index.html" create mode 100644 files/pt-br/web/javascript/reference/errors/unnamed_function_statement/index.html create mode 100644 files/pt-br/web/javascript/reference/functions/default_parameters/index.html delete mode 100644 files/pt-br/web/javascript/reference/functions/definicoes_metodos/index.html create mode 100644 files/pt-br/web/javascript/reference/functions/method_definitions/index.html delete mode 100644 files/pt-br/web/javascript/reference/functions/parametros_predefinidos/index.html delete mode 100644 files/pt-br/web/javascript/reference/global_objects/array/contains/index.html create mode 100644 files/pt-br/web/javascript/reference/global_objects/array/filter/index.html delete mode 100644 files/pt-br/web/javascript/reference/global_objects/array/filtro/index.html create mode 100644 files/pt-br/web/javascript/reference/global_objects/array/includes/index.html delete mode 100644 files/pt-br/web/javascript/reference/global_objects/array/prototype/index.html delete mode 100644 files/pt-br/web/javascript/reference/global_objects/bigint/prototype/index.html delete mode 100644 files/pt-br/web/javascript/reference/global_objects/boolean/prototype/index.html delete mode 100644 files/pt-br/web/javascript/reference/global_objects/function/prototype/index.html delete mode 100644 files/pt-br/web/javascript/reference/global_objects/intl/numberformat/prototype/index.html delete mode 100644 files/pt-br/web/javascript/reference/global_objects/map/prototype/index.html delete mode 100644 files/pt-br/web/javascript/reference/global_objects/number/prototype/index.html delete mode 100644 files/pt-br/web/javascript/reference/global_objects/object/prototype/index.html delete mode 100644 files/pt-br/web/javascript/reference/global_objects/promise/prototype/index.html delete mode 100644 files/pt-br/web/javascript/reference/global_objects/set/prototype/index.html delete mode 100644 files/pt-br/web/javascript/reference/global_objects/string/prototype/index.html delete mode 100644 files/pt-br/web/javascript/reference/global_objects/weakmap/prototype/index.html delete mode 100644 files/pt-br/web/javascript/reference/operators/arithmetic_operators/index.html delete mode 100644 files/pt-br/web/javascript/reference/operators/atribuicao_via_desestruturacao/index.html delete mode 100644 files/pt-br/web/javascript/reference/operators/bitwise_operators/index.html create mode 100644 files/pt-br/web/javascript/reference/operators/comma_operator/index.html create mode 100644 files/pt-br/web/javascript/reference/operators/conditional_operator/index.html create mode 100644 files/pt-br/web/javascript/reference/operators/destructuring_assignment/index.html delete mode 100644 files/pt-br/web/javascript/reference/operators/inicializador_objeto/index.html create mode 100644 files/pt-br/web/javascript/reference/operators/nullish_coalescing_operator/index.html create mode 100644 files/pt-br/web/javascript/reference/operators/object_initializer/index.html delete mode 100644 files/pt-br/web/javascript/reference/operators/operador_condicional/index.html delete mode 100644 files/pt-br/web/javascript/reference/operators/operador_de_coalescencia_nula/index.html delete mode 100644 files/pt-br/web/javascript/reference/operators/operador_virgula/index.html delete mode 100644 "files/pt-br/web/javascript/reference/operators/operadores_de_compara\303\247\303\243o/index.html" delete mode 100644 files/pt-br/web/javascript/reference/operators/operadores_logicos/index.html delete mode 100644 files/pt-br/web/javascript/reference/operators/spread_operator/index.html create mode 100644 files/pt-br/web/javascript/reference/statements/async_function/index.html delete mode 100644 files/pt-br/web/javascript/reference/statements/default/index.html delete mode 100644 files/pt-br/web/javascript/reference/statements/funcoes_assincronas/index.html create mode 100644 files/pt-br/web/javascript/reference/template_literals/index.html delete mode 100644 files/pt-br/web/javascript/reference/template_strings/index.html create mode 100644 files/pt-br/web/mathml/examples/index.html delete mode 100644 files/pt-br/web/mathml/exemplos/index.html create mode 100644 files/pt-br/web/media/formats/index.html delete mode 100644 files/pt-br/web/performance/caminho_de_renderizacao_critico/index.html create mode 100644 files/pt-br/web/performance/critical_rendering_path/index.html create mode 100644 files/pt-br/web/progressive_web_apps/introduction/index.html delete mode 100644 "files/pt-br/web/progressive_web_apps/introdu\303\247\303\243o/index.html" delete mode 100644 "files/pt-br/web/security/b\303\241sico_de_seguran\303\247a_da_informa\303\247\303\243o/index.html" delete mode 100644 files/pt-br/web/svg/intensivo_de_namespaces/index.html create mode 100644 files/pt-br/web/svg/namespaces_crash_course/index.html delete mode 100644 files/pt-br/web/tutoriais/index.html create mode 100644 files/pt-br/web/tutorials/index.html delete mode 100644 files/pt-br/web/web_components/usando_custom_elements/index.html create mode 100644 files/pt-br/web/web_components/using_custom_elements/index.html create mode 100644 files/pt-br/web/xslt/xslt_js_interface_in_gecko/advanced_example/index.html create mode 100644 files/pt-br/web/xslt/xslt_js_interface_in_gecko/index.html (limited to 'files/pt-br/web') diff --git a/files/pt-br/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html b/files/pt-br/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html new file mode 100644 index 0000000000..df43b575a6 --- /dev/null +++ b/files/pt-br/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html @@ -0,0 +1,234 @@ +--- +title: Visão geral da acessibilidade nas aplicações web e widgets +slug: Web/Acessibilidade/An_overview_of_accessible_web_applications_and_widgets +tags: + - ARIA + - Accessibility + - Acessibilidade + - Aplicativos Web + - CSS + - DHTML + - Guía + - HTML+ARIA + - Navegação+Teclado + - WAI-ARA + - Widgets +translation_of: Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets +--- +

A Rede Mundial está mudando. Estatísticamente, os sítios baseados em páginas estão, cada vez mais, sendo repostos por aplicações dinâmicas, em estilo Ambiente, que fazem uso intenso de JavaScript e AJAX. Estilistas estão criando novos widgets e controles inteiramente com a combinação de JavaScript, HTML e CSS. Este salto tem o potencial de aperfeiçoar, dramaticamente, a capacidade de resposta e a usabilidade da Rede, mas milhares de utilizadores estão sob o risco de exclusão, devido a algumas lacunas na acessibilidade. A JavaScript tem, tradicionalmente, tido a reputação de ser inviável para quem usa tecnologias assistivas, como leitores de tela mas, agora, existem maneiras de criar interfaces de utilização dinâmicas acessíveis a uma ampla variedade de pessoas.

+ +

O problema

+ +

A maior parte do conjunto de ferramentas JavaScript oferece uma biblioteca de utilização de widgets que imita o comportamento de interfaces de Ambiente familiares. Deslizantes, barras de menus, visão de arquivos em lista e muito mais pode ser construído com uma combinação de JavaScript, CSS e HTML. Uma vez que a especificação da HTML 4 não fornece etiquetas integradas (built-in tags) que descrevam estes tipos de widgets semanticamente, os desenvolvedores recorrem ao uso de elementos genéricos, tais como <div> e <span>. Embora isto resulte em um widget que se pareça com seu duplo de ambiente, geralmente não existe informação semântica suficiente, na marcação, para torná-lo utilizável por uma tecnologia assistiva. Teor dinâmico em uma página da Rede Mundial pode ser particularmente problemático para quem, por alguma razão, não pode ver a tela. Cotações de ações, alimentação instantânea de atualizações do twitter, indicadores de progresso e conteúdos similares alteram o DOM, enquanto uma tecnologia assistiva (TA/AT) pode não ser alertada disso. Aqui é onde o conjunto ARIA entra.

+ +

Exemplo 1: Marcação para um widget de abas construído sem as indicações ARIA. Não existem informações semânticas, na marcação, que descrevam a sua forma, nem a sua função.

+ +
<!-- This is a tabs widget. How would you know, looking only at the markup? -->
+<ol>
+  <li id="ch1Tab">
+    <a href="#ch1Panel">Chapter 1</a>
+  </li>
+  <li id="ch2Tab">
+    <a href="#ch2Panel">Chapter 2</a>
+  </li>
+  <li id="quizTab">
+    <a href="#quizPanel">Quiz</a>
+  </li>
+</ol>
+
+<div>
+  <div id="ch1Panel">Chapter 1 content goes here</div>
+  <div id="ch2Panel">Chapter 2 content goes here</div>
+  <div id="quizPanel">Quiz content goes here</div>
+</div>
+ +

Exemplo 2: Como o widget de abas pode ser visto. Seus utilizadores podem reconhecer sua aparência, mas não há semântica legível por mecanismos de tecnologias assistivas.
+ Screenshot of the tabs widget

+ +

ARIA

+ +

As definições para WAI-ARIA Accessible Rich Internet Applications (Aplicações Ricas para uma Internete Acessível), da W3C -  Web Accessibility Initiative (Iniciativa pela Acessibilidade na Rede Mundial/World Wide Web Consortium-W3C) - oferecem uma via para a adição das necessidades semânticas perdidas pelas tecnologias assistivas, como os leitores de tela. O conjunto ARIA possibilita que desenvolvedores possam descrever seus widgets de forma mais detalhada com a inclusão de atributos especiais à marcação. Projetado para preencher a lacuna entre o padrão de rotulagem HTML e os controles com estilo ambiente encontrados em aplicações dinâmicas pela web, o conjunto ARIA fornece funções (roles) e estados (states) que descrevem o comportamento da maioria das interfaces de utilização dos widgets conhecidas.

+ +

A especificação ARIA está dividida em três tipos diferentes de atributos: funções (roles), estados (states) e propriedades (properties). As funções (roles) descrevem os widgets que não estão disponíveis de outra forma em HTML 4, como deslizantes, barras de menu, abas e diálogos. As propriedades (properties) descrevem as características desses widgets - se podem ser arrastados (draggable), se existe algum elemento obrigatório, ou se trazem uma janela de explosão (popup) associada. Os estados (states) descrevem a interação atual de um elemento, informando à tecnlogia assistiva se este se encontra ativo, desativado, selecionado, ou oculto.

+ +

Os atributos ARIA são projetados para serem interpretados automaticamente pelo navegador e traduzidos para as APIs (Application Programming Interface/Interface de Programação de Aplicativo) de acessibilidade nativas do sistema operacional. Quando o conjunto ARIA está presente as tecnologias assistivas são capazes de reconhecer e interagir com os controles personalizados pela  JavaScript da mesma forma que fazem com os seus equivalentes de ambiente. Isto tem o potencial de oferecer uma experiência de utilização muito mais consistente do que aquela que foi possível nas gerações anteriores das aplicações da Rede, uma vez que os utilizadores de tecnologias assistivas podem empregar todo o seu conhecimento sobre o funcionamento das aplicações de ambiente, ao usar aquelas que são baseadas na web.

+ +

Exemplo 3: Marcação para um widget de abas com os atributos ARIA adicionados:

+ +
<!-- Now *these* are Tabs! -->
+<!-- We've added role attributes to describe the tab list and each tab. -->
+<ol role="tablist">
+  <li id="ch1Tab" role="tab">
+    <a href="#ch1Panel">Chapter 1</a>
+  </li>
+  <li id="ch2Tab" role="tab">
+    <a href="#ch2Panel">Chapter 2</a>
+  </li>
+  <li id="quizTab" role="tab">
+    <a href="#quizPanel">Quiz</a>
+  </li>
+</ol>
+
+<div>
+  <!-- Notice the role and aria-labelledby attributes we've added to describe these panels. -->
+  <div id="ch1Panel" role="tabpanel" aria-labelledby="ch1Tab">Chapter 1 content goes here</div>
+  <div id="ch2Panel" role="tabpanel" aria-labelledby="ch2Tab">Chapter 2 content goes here</div>
+  <div id="quizPanel" role="tabpanel" aria-labelledby="quizTab">Quiz content goes here</div>
+</div>
+
+ +

O conjunto ARIA tem suporte nas últimas versões de todos os maiores navegadores, incluindo Firefox, Safari, Opera, Chrome e Internet Explorer. Muitas das tecnologias assistivas, como as de código aberto NVDA e os leitores de tela Orca, da mesma foma, trazem suporte ao ARIA. Progressivamente, as bibliotecas  JavaScript para widget, tais como  jQuery UI, YUI, Google Closure e Dojo Dijit também incluem as marcações ARIA.

+ +

Mudanças na apresentação

+ +

Mudanças de apresentação dinâmicas agregam o uso de CSS para alterar a aparência do conteúdo (uma borda vermelha em volta de algum dado inválido, ou a troca da cor de fundo de uma caixa de seleção já marcada), bem como quando um item é exibido, ou escondido.

+ +

Mudanças de estado

+ +

O conjunto ARIA provê atributos para declarar o estado atual da interface de utilização de um widget. Os exemplos abrangem (mas não são apenas estes, com certeza( :

+ + + +

(Para uma lista completa de estados ARIA, consulte a ARIA list of states and properties (lista de estados e propriedades ARIA).

+ +

Os desenvolvedores devem dar preferência ao uso dos estados ARIA para indicar a situação atual dos elementos widgets na interface de utilização (UI) e os seletores de atributos CSS para alterar a sua aparência, com base nas mudanças desses estados (em vez de usar um roteiro (script) para mudar um nome de classe de um elemento).

+ +

A Open Ajax Alliance (OAA - Aliança OpenAJAX ) disponibiliza um exemplo de um seletor de atributos CSS baseado nos estados ARIA (em inglês) - an example of CSS attribute selectors based on ARIA states. O exemplo mostra a interface de um editor WYS/WYG com um sistema de menu dinâmico. Os itens selecionados no menu, como o tipo de fonte estão, visualmente, distintos dos outros. As partes importantes do exemplo são explicadas a seguir.

+ +

Neste exemplo, a HTML para um menu tem a forma exibida abaixo. Note como, nas linhas 7 e 13, a propriedade (property) aria-checked é usada para declarar o estado da seleção dos itens do menu.

+ +

Exemplo 1a: HTML para um menu selecionável (adaptado da  http://www.oaa-accessibility.org/example/25/).

+ +
<ul id="fontMenu" class="menu" role="menu" aria-hidden="true">
+  <li id="sans-serif"
+      class="menu-item"
+      role="menuitemradio"
+      tabindex="-1"
+      aria-controls="st1"
+      aria-checked="true">Sans-serif</li>
+  <li id="serif"
+      class="menu-item"
+      role="menuitemradio"
+      tabindex="-1"
+      aria-controls="st1"
+      aria-checked="false">Serif</li>
+  ...
+
+ +

A CSS usada para alterar a aparência do item selecionado é mostrada no Exemplo 1b. Perceba que não existe um nome de classe (classname) de personalização, apenas o estado do atributo aria-checked, na linha 1.

+ +

Exemplo 1b: Seletor baseado em atributo para indicar um estado (da  http://www.oaa-accessibility.org/example/25/).

+ +
li[aria-checked="true"] {
+  font-weight: bold;
+  background-image: url('images/dot.png');
+  background-repeat: no-repeat;
+  background-position: 5px 10px;
+}
+
+ +

O  JavaScript para atualizar a propriedade aria-checked tem a forma exibida no Exemplo 1c. Repare que o roteiro (script) apenas atualiza o atributo aria-checked (linhas 3 e 8); também não é necessário adicionar, ou remover, um nome de classe personalizada.

+ +

Exemplo 1c: A  JavaScript atualiza o atributo aria-checked  (baseado em  http://www.oaa-accessibility.org/example/25/).

+ +
var processMenuChoice = function(item) {
+  // 'check' the selected item
+  item.setAttribute('aria-checked', 'true');
+  // 'un-check' the other menu items
+  var sib = item.parentNode.firstChild;
+  for (; sib; sib = sib.nextSibling ) {
+    if ( sib.nodeType === 1 && sib !== item ) {
+      sib.setAttribute('aria-checked', 'false');
+    }
+  }
+};
+
+ +

Alterações visuais

+ +

Quando o conteúdo visual é alterado (isto é, um elemento é escondido, ou mostrado), os desenvolvedores devem mudar o valor da propriedade aria-hidden. As técnicas descritas acima devem ser usadas, a fim de declarar a CSS para ocultar um elemento utilizando display:none (exibir:nenhum).

+ +

O sítio da Open Ajax Alliance fornece um exemplo de uma dica de tela (tooltip) que utiliza o estado aria-hidden para controlar a sua visibilidade (em inglês) an example of a tooltip that uses aria-hidden to control the visibility of the tooltip. O exemplo mostra um formulário web simples, com caixas de dicas de tela contendo instruções associadas aos campos de entrada. As partes relevantes deste exemplo estão explicadas abaixo.

+ +

Aqui, a HTML para a dica de tela tem a forma exibida no Exemplo 2a. A linha 9 configura o estado da aria-hidden para true.

+ +

Exemplo 2a: HTML para dicas de tela (adaptado de  http://www.oaa-accessibility.org/example/39/).

+ +
<div class="text">
+    <label id="tp1-label" for="first">First Name:</label>
+    <input type="text" id="first" name="first" size="20"
+           aria-labelledby="tp1-label"
+           aria-describedby="tp1"
+           aria-required="false" />
+    <div id="tp1" class="tooltip"
+         role="tooltip"
+         aria-hidden="true">Your first name is optional</div>
+</div>
+
+ +

A CSS para esta marcação está explicada no Exemplo 2b. Veja que não há uso de classname personalizada, apenas o estado do atributo aria-hidden, na linha 1.

+ +

Exemplo 2b:  Seletor basedo em atributo para indicar um estado  (de http://www.oaa-accessibility.org/example/39/).

+ +
div.tooltip[aria-hidden="true"] {
+  display: none;
+  }
+
+ +

O JavaScript que atualiza a propriedade aria-hidden tem a forma exposta no Exemplo 2c. Observe que o roteiro apenas atualiza o atributo aria-hidden (linha 2); não é necessário adicionar, nem remover, uma classname customizada.

+ +

Exemplo 2c: JavaScript para atualização do atributo aria-checked (com base em http://www.oaa-accessibility.org/example/39/).

+ +
var showTip = function(el) {
+  el.setAttribute('aria-hidden', 'false');
+}
+ +

Mudança de Atributo (Role)

+ +
Em construção
+ +

O conjunto ARIA possibilita que os desenvolvedores possam declarar uma função semântica para um elemento que, de outro modo, não a apresentaria, ou a ofereceria de forma incorreta. Por exemplo, quando alguma lista desordenada é utilizada para criar um menu, à {{ HTMLElement("ul") }} deve ser dada uma role de menubar e cada {{ HTMLElement("li") }} deve ter uma role de menuitem.

+ +

O papel (role) de um elemento não deve mudar. Em vez disso, remova o elemento original e ocupe seu lugar com um elemento que tenha a função (role) nova.

+ +

Por exemplo, considere um widget de edição "inline": um componente que possibilita que seus utilizadores sejam capazes de editar uma parte de um texto, sem mudar toda a composição. Este componente carrega o modo "visualizar", no qual o texto não pode ser modificado, mas pode ser ativado e um modo "editar", no qual o texto pode ser alterado. Se você o desenvolve, pode ter a tentação de implementar o modo "visualizar" com o uso do elemento texto "somente leitura"  {{ HTMLElement("input") }}, definindo a sua ARIA role para button e, em seguida, alternando para o modo "editar", para tornar o elemento apto à gravação e removendo o atributo role no modo "editar" (desde que os elementos {{ HTMLElement("input") }} tenham as suas próprias funções semânticas).

+ +

Não faça isso. Em substituição, implemente o modo "visualizar" usando um elemento completamente diferente, tal como uma {{ HTMLElement("div") }}, ou {{ HTMLElement("span") }} com uma role de button e o modo « edit » utilizando um elemento texto {{ HTMLElement("input") }}.

+ +

Mudanças assíncronas de conteúdo

+ +
Em construção. Veja, também, Regiões Dinâmicas
+ + + +

Muitas vezes, os desenvolvedores negligenciam o suporte ao teclado quando criam widgets personalizados. Para ser acessível a uma gama maior de pessoas, todas as configurações de uma aplicação web, ou de um widget, devem oferecer controles pelo teclado, sem a necessidade de um rato. Na prática isto, frequentemente, envolve as convenções suportadas por widgets similares, de ambiente, tirando plena vantagem das teclas Tab, Entra, Barra de Espaço e Setas.

+ +

Tradicionalmente, a navegação pelo teclado na web tem sido limitada à tecla Tab, que é pressionada para dar foco a cada botão, vínculo, ou formulário na página, em uma ordenação linear e Shift-Tab para navegar em sentido contrário (navegação regresssiva). É uma forma unidimensional de navegação - para frente e para trás, um elemento por vez. Em páginas mais pesadas, alguém que navegue apenas pelo teclado deve pressioná-lo dezenas de vezes antes de alcançar a seção desejada. Implementar as convenções para teclado no modelo ambiente, para a web, tem o potencial de tornar a navegação significativamente mais rápida para essas pessoas.

+ +

Aqui está um resumo sobre como a navegação pelo teclado deve funcionar, com a habilitação do conjunto ARIA, na aplicação web:

+ + + +

Assim, para o exemplo de widget de abas acima, a pessoa que estiver navegando deve ser capaz de entrar e sair da caixa que o contém usando as teclas "Tab" e "Shift+Tab" ( a <ol> na nossa marcação). Uma vez que o foco, pelo teclado, estiver dentro do contêiner, as teclas de setas devem permitir a navegação entre as suas diferentes guias (os elementos <li> ). A partir daqui as convenções variam de plataforma para plataforma. No Windows, a próxima aba deve ser ativada, automaticamente, quando as teclas de setas forem pressionadas. Em Mac OS X, seus utilizadores ativam a próxima aba pressionando a tecla "Entra", ou a "barra de espaço". Um  tutorial abrangente, para a criação de widgets, com navegação pelo teclado, descreve como implementar esse comportamento utilizando JavaScript Keyboard-navigable JavaScript widgets (JavaScript para widgets navegáveis pelo teclado).

+ +

Para mais detalhes sobre as convenções da navegação pelo teclado em modelo ambiente, um guia completo (em inglês) DHTML style guide (guia de estilos da HTML Dinâmica) está disponível. Este guia oferece uma visão global de como a navegação pelo teclado deve funcionar em cada tipo de widget suportado pelo conjunto ARIA. A  W3C também oferece um documento que ajuda muito, ARIA Best Practices, incluindo a navegação pelo teclado e as convenções de atalhos para uma variedade de widgets.

+ +

Veja, também

+ + diff --git a/files/pt-br/web/accessibility/aria/aria_screen_reader_implementors_guide/index.html b/files/pt-br/web/accessibility/aria/aria_screen_reader_implementors_guide/index.html new file mode 100644 index 0000000000..73b9605ef1 --- /dev/null +++ b/files/pt-br/web/accessibility/aria/aria_screen_reader_implementors_guide/index.html @@ -0,0 +1,35 @@ +--- +title: Guia para implementar o leitor de tela ARIA +slug: Web/Accessibility/ARIA/Guia_para_implementar_o_leitor_de_tela_ARIA +tags: + - ARIA + - Acessibilidade +translation_of: Web/Accessibility/ARIA/ARIA_Screen_Reader_Implementors_Guide +--- +

Regiões Ativas

+ +

Este é apenas um guia. Uma marcação de região ativa é uma área complexa que é algo aberto à interpretações. O que segue pretende prover um guia de implementação que respeita a necessidade dos desenvolvedores de leitores de tela para tentar novas coisas. A intenção é chegar a um balanço entre providenciar um guia útil em como usar o significado de marcação pretendido

+ +

Interpretando a marcação de região ativa WAI-ARIA

+ +
    +
  1. Mudanças ativas são são dicas: Em geral marcação de região ativa é dado pelo autor como dicas, e a tecnologia assistiva pode permitir , site or even region-specific settings, assim como heurística para ajudar com mudanças ativas nas páginas que não têm dicas WAI-ARIA.
    2. +
  2. Opcionalmente, criar uma segunda, queue adicional se o usuário configurar um segundo canal de hardware: Se há dois canais para apresentação (i.e. text-to-speech e display Braile), então duas queues podem ser mantidas para permitir apresentação paralela. Os canais poderiam se configurados pelo usuário para apresentar regiões ativas baseada em vez ou prioridades.
    3. +
  3. Regiões ocupadas: Qualquer alteração numa região marcada com aria-busy="true" não deve ser adicionada à queue até que aquele atributo seja limpo.
    4. +
  4. Prioridade (aria-live ou a partir da vez) tem primeira precedência: itens deveriam ser adicionados à queue baseadas no seu nível de prioridade da propriedade aria-live ou inerente da vez (i.e. role="log" é prioridade por padrão). Itens assertivos são os primeiros então nível de prioridade. Alternativamente, implementações podem escolher ter uma política de limpeza mais items de prioridade, i.e. itens assertivos limpam qualquer item de prioridade da queue.
    5. +
  5. Tempo toma a segunda procedência: Priorizar itens com o mesmo nível de prioridade de acordo com quando o evento ocorre (eventos anteriores vêm primeiro). Itens presentes do mesmo nível de prioridade na ordem do que ocorreu primeiro.
    6. +
  6. Regiões atômicas (aria-atomic="true")  com mudanças múltiplas não deveriam estar presentes duas vezes com o mesmo conrteúdo. Como um novo evento para uma região atômica é adicionada à queue e remove um evento anterior para a mesma região. É provavelmente desejável que tenha pelo menos um pequeno timeout antes de apresentar mudanças numa região atômica, com a finalidade de evitar apresentar a região duas vezes para duas mudançasque ocorrem rapidamente uma após a outra.
    7. +
  7. Inclua labels quando estiver apresntando mudanças: se a mudança ocorre em algo com um label de alguma forma  semântico, fale o label. Isso é particularmente importante para mudanças em data cells, onde os headers column e row fornecem informação contextual importante.
    8. +
+ +

Ideias para Configurações e Heurística

+ +
    +
  1. Permitir uma voz diferente (em text-to-speech) ou outras características de apresentação para setar mudanças ativas seperadamente.
    2. +
  2. Quando não há marcação WAI-ARIA presente, automaticamente apresenta algumas mudanças a mesnos que o usuário configure todas as mudanças ativas para desligado. Por exemplo, mudanças automáticas de fala que são causadas pela própria entrada do usuário, como parte do contexto daquela entrada.
    3. +
  3. Permitir configurações globais para desligar a apresentação de mudanças ativas, apresentar todas as mudanças ativas, use marcação, ou seja "esperto" (use heurística).
    4. +
+ +

Detalhes para Processamento via APIs Platform Acessibility

+ +

Esperamos que o desenvolvedor do navegador irá trabalhar para fornecer implementações consistentes. A imlementação mais completa das regiões ativas atualmente está no Firefox 3. Aqui está como regiões ativas WAI-ARIA são expostas no Firefox 3.

diff --git a/files/pt-br/web/accessibility/aria/aria_techniques/usando_o_atributo_aria-labelledby/index.html b/files/pt-br/web/accessibility/aria/aria_techniques/usando_o_atributo_aria-labelledby/index.html deleted file mode 100644 index cd7cb90bb9..0000000000 --- a/files/pt-br/web/accessibility/aria/aria_techniques/usando_o_atributo_aria-labelledby/index.html +++ /dev/null @@ -1,158 +0,0 @@ ---- -title: Usando o atributo aria-labelledby -slug: Web/Accessibility/ARIA/ARIA_Techniques/Usando_o_atributo_aria-labelledby -tags: - - ARIA - - Acessibilidade - - PrecisaDeConteúdo -translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute ---- -

Descrição

- -

Essa técnica demonstra como usar o atributo aria-labelledby.

- -

O atributo aria-labelledby é usado para indicar os IDs de elementos que são os rótulos para o objeto. É usado para estabelecer uma relação entre widgets ou grupos e suas labels. Usuários de tecnologias assistivas como leitores de telas navegam tipicamente uma página através de TABs entre as áreas da tela. Se uma label não está associada com um elemento input, widget ou grupo, não será legível por leitor de tela.

- -

aria-labelledby é muito similar ao aria-describedby: uma label descreve a essência de um objeto, enquanto uma descrição prove mais informação que o usuário pode precisar.

- -

O atributo aria-labelledby não é usado somente para elementos de formulário; é também usado para associar texto estático com widgets, grupos de elementos, painéis, regiões que tem um cabeçalho, definições e mais. A seção {{ anch("Exemplos") }} abaixo fornece mais informação sobre como usar os atributos nesses casos.

- -

aria-labelledby podem ser usadas em conjunto com o elemento {{ HTMLElement("label") }} (usando o atributo for) para melhorar a compatibilidade com user agents que não suportam ainda ARIA.

- -

Esse atributo pode ser usado com qualquer elemento HTML de formulário; não é limitado a elementos que tem uma role ARIA atribuída.

- -

Value

- -

Uma lista de IDs do elemento separada por espaços

- -

Possíveis efeitos em user agents e tecnologias assistivas 

- -

Quando ambos aria-labelledby e aria-label são usados, user agents dão precedência ao aria-labelledby quando computam o nome da propriedade acessível.

- -
Nota: Opinões podem diferir em como as tecnologias assistivas devem manipular essa técnica. A informação fornecida acima é uma dessas opiniões e portanto não normativa.
- -

Exemplos

- -

Exemplo 1: Múltiplas Labels

- -

No exemplo abaixo, cada campo input é rotulado por tanto por seu próprio rótulo individual como pelo rótulo do grupo:

- -
<div id="billing">Endereço de Cobrança</div>
-
-<div>
-    <div id="name">Nome</div>
-    <input type="text" aria-labelledby="name billing"/>
-</div>
-<div>
-    <div id="address">Endereço</div>
-    <input type="text" aria-labelledby="address billing"/>
-</div>
-
- -

Exemplo 2: Associando Cabeçalhos com Regiões

- -

No exemplo abaixo, elementos de cabeçalho estão associados com o conteúdo que eles seguem. Note que a região sendo referenciada é a que contem o cabeçalho.

- -
<div role="main" aria-labelledby="foo">
-   <h1 id="foo">Incêndios selvagens se espalham por San Diego Hills</h1>
-   Fortes ventos expandem o fogo inflamado pelas altas temperaturas ...
-</div>
-
- -

Exemplo 3: Radio Groups

- -

No exemplo abaixo,  o container de um radiogroup  é associado com suas labels usando o atributo aria-labelledby:

- -
<div id="radio_label">Meu radio label</div>
-<ul role="radiogroup" aria-labelledby="radio_label">
-    <li role="radio">Item #1</li>
-    <li role="radio">Item #2</li>
-    <li role="radio">Item #3</li>
-</ul>
-
- -

Exemplo 4: Dialog Label

- -

No exemplo abaixo, o elemento cabeçalho que rotula o dialog é referenciado pelo atributo aria-labelledby:

- -
<div role="dialog" aria-labelledby="dialogheader">
-    <h2 id="dialogheader">Escolha um Arquivo</h2>
-    ... Conteúdo do Dialog
-</div>
-
- -

Exemplo 5: Definição Inline

- -

No exemplo abaixo, a definição de um termo que é descrita no fluxo natural da narrativa é associada com o próprio termo usando o atributo aria-labelledby:

- -
<p>O médico explicou que tinha sido um <dfn id="placebo">placebo</dfn>, ou <span role="definition" aria-labelledby="placebo">
-ou a uma preparação mais inerte prescrito para o alívio mental do paciente do que por seu efeito real sobre um distúrbio.</span>
-</p>
-
- -

Exemplo 6: Definições de Listas

- -

No exemplo abaixo, as definições numa lista formal de definições são associadas com os termos que eles definem usando o atributo aria-labelledby:

- -
<dl>
-    <dt id="anathema">anátema</dt>
-    <dd role="definition" aria-labelledby="anathema">uma proibição ou maldição solenemente pronunciada pela autoridade eclesiástica
-                                                     e acompanhada por excomunhão</dd>
-    <dd role="definition" aria-labelledby="anathema">uma vigorosa denúncia</dd>
-
-    <dt id="homily">homilia</dt>
-    <dd role="definition" aria-labelledby="homily">um sermão usualmente curto</dd>
-    <dd role="definition" aria-labelledby="homily">uma leitura ou discurso sobre ou de um tema moral</dd>
-
-</dl>
-
- -

Exemplo 7: Menus

- -

No exemplo abaixo, um menu popup é associado com sua label usando o atributo aria-labelledby:

- -
<div role="menubar">
-    <div role="menuitem" aria-haspopup="true" id="fileMenu">Arquivo</div>
-    <div role="menu" aria-labelledby="fileMenu">
-        <div role="menuitem">Abrir</div>
-        <div role="menuitem">Salvar</div>
-        <div role="menuitem">Salvar como ...</div>
-        ...
-    </div>
-    ...
-</div>
-
- -

Exemplos Funcionais:

- - - -

Notas 

- -

O mapeamento mais comum de uma - API de acessibilidade -  para um rótulo é a propriedade acessível name

- -

Usado pelas regras ARIA

- -

todos os elementos de markup base

- -

Técnicas ARIA relacionadas

- - - -

Compatibilidade

- -

TBD: Adicionar informação de suporte para combinações de produto UA e AT

- -

Recursos Adicionais

- - diff --git a/files/pt-br/web/accessibility/aria/aria_techniques/usando_o_atributo_aria-required/index.html b/files/pt-br/web/accessibility/aria/aria_techniques/usando_o_atributo_aria-required/index.html deleted file mode 100644 index e93611b182..0000000000 --- a/files/pt-br/web/accessibility/aria/aria_techniques/usando_o_atributo_aria-required/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: Usando o atributo aria-required -slug: Web/Accessibility/ARIA/ARIA_Techniques/Usando_o_atributo_aria-required -tags: - - ARIA - - Acessibilidade -translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute ---- -
-
-

Descrição

- -

O atributo aria-required é usado para indicar que a entrada do usuário é obrigatória em um elemento antes que um formulário possa ser enviado. Este atributo pode ser usado com qualquer elemento de formulário HTML típico; não se limita a elementos que têm uma  role atribuída.

- -

{{ HTMLVersionInline("5") }} agora tem o atributo required, mas aria-required ainda é útil para agentes de usuário que não suportam ainda HTML5.

- -

Valor

- -

true ou false (Padrão: false)

- -

Possíveis efeitos nos agentes de usuários e tecnologia assistiva 

- -

Os leitores de tela devem anunciar o campo como obrigatório.

- -

Observe que esse atributo não alterará automaticamente a apresentação do campo.

- -
Nota: Opiniões podem diferir em como a tecnologia assistiva deve lidar com esta técnica. A informação fornecida acima é uma dessas opiniões e, portanto, não é normativa.
- -

Exemplos

- -

Exemplo 1: Um simples formulário

- -

 

- -
 <form action="post">
-     <label for="firstName">First name:</label>
-     <input id="firstName" type="text" aria-required="true" />
-     <br/>
-     <label for="lastName">Last name:</label>
-     <input id="lastName" type="text" aria-required="true" />
-     <br/>
-     <label for="streetAddress">Street address:</label>
-     <input id="streetAddress" type="text" />
- </form>
-
- -

Exemplos de trabalho:

- -

Exemplo de Tooltip  (inclui o uso do atributo aria-required)

- -

Notas 

- -

Usado em ARIA roles

- -
    -
  • Combobox
    • -
  • Gridcell
    • -
  • Listbox
    • -
  • Radiogroup
    • -
  • Spinbutton
    • -
  • Textbox
    • -
  • Tree
    • -
- -

Técnicas relacionadas com ARIA

- - - -

Compatibilidade

- -

TBD: Add support information for common UA and AT product combinations

- -

Recursos adicionais

- - -
-
diff --git a/files/pt-br/web/accessibility/aria/aria_techniques/usando_o_slider_role/index.html b/files/pt-br/web/accessibility/aria/aria_techniques/usando_o_slider_role/index.html deleted file mode 100644 index 18532f5f25..0000000000 --- a/files/pt-br/web/accessibility/aria/aria_techniques/usando_o_slider_role/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: Usando o slider role -slug: Web/Accessibility/ARIA/ARIA_Techniques/Usando_o_slider_role -translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role ---- -

Descrição

- -

Essa técnica demosntrará como usar o slider role. 

- -

The slider role is used for markup that allows a user to select a value from within a given range. The slider role is assigned to the "thumb," the control that is adjusted to change the value. Typically, another element is styled to visually represent the range of possible valued, and the thumb positioned visually to represent the value within that range. As the user interacts with the thumb, the application must programmatically adjust the slider's aria-valuenow (and possible aria-valuetext) attribute to reflect the current value. See the {{ anch("Examples") }} section below for more information.

- -

Keyboard And Focus

- -

The slider should be keyboard focusable and operable. When the user tabs focus to the slider, it should land on the thumb: the control a mouse user would drag. Arrow keys should operate as follows (localization for right-to-left languages should reverse the direction of the arrows):

- - - - - - - - - - - - - - - - - - - - - - -
Tecla(s)Ação
Setas para direita e para cima Incrementa o valor selecionado
Setas para esquerda e para baixoDecrementa o valor selecionado
Page Up and Page DownOptionally increase and decrease the value by a set amount (e.g. by 10 on a range from 0 to 100)
- -

Possible effects on user agents and assistive technology 

- -

 

- -
Note: Opinions may differ on how assistive technology should handle this technique. The information provided above is one of those opinions and therefore not normative.
- -

Examplos

- -

Examplo 1: Escala numérica simples

- -

In the example below, a simple slider is used to select a value between 1 and 100. The current volume is 50. The application will programmatically update the value of aria-valuenow in response to user input.

- -
<label for="fader">Volume</label>
-<input type="range"
-  id="fader"
-  min="1"
-  max="100"
-  value="50"
-  step="1"
-  aria-valuemin="1"
-  aria-valuemax="100"
-  aria-valuenow="50"
-  oninput="outputUpdate(value)">
-<output for="fader" id="volume">50</output>
-
- -

The following code snippet allows you to return the output as it is updated by user input:

- -
function outputUpdate(vol) {
-  document.querySelector('#volume').value = vol;
-}
-
- -

Examplo 2: Valores de texto

- -

Sometimes, a slider is used to choose a value that is not, semantically, a number. In these cases, the aria-valuetext attribute is used to provide the appropriate text name for the currently selected value. In the example below, the slider is used to select a day of the week.

- -
<label for="day-handle">Days</label>
-<div class="day-slider">
-  <div id="day-handle" class="day-slider-handle" role="slider" aria-labelledby="day-handle"
-     aria-valuemin="1"
-     aria-valuemax="7"
-     aria-valuenow="2"
-     aria-valuetext="Monday">
- </div>
-</div>
-
- -

The code snippet below shows a function that responds to user input and updates the aria-valuenow and aria-valuetext attributes:

- -
var dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
-var updateSlider = function (newValue) {
-    var handle = document.getElementById("day-handle");
-    handle.setAttribute("aria-valuenow", newValue.toString());
-    handle.setAttribute("aria-valuetext", dayNames[newValue]);
-};
-
- -

Working Examples:

- - - -

Notas 

- -

Atributos ARIA usados

- - - - - -

Compatibility

- -

TBD: Add support information for common UA and AT product combinations

- -

Recursos Adicionais

- - diff --git a/files/pt-br/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html b/files/pt-br/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html new file mode 100644 index 0000000000..25d3222fcd --- /dev/null +++ b/files/pt-br/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html @@ -0,0 +1,145 @@ +--- +title: Utilizando a função "alerta" +slug: Web/Accessibility/ARIA/ARIA_Techniques/Utilizando_o_alert_role +tags: + - ARIA + - Accessibility + - Acessibilidade + - Alertas + - Avançado + - CSS + - Caixas de aviso + - Configuração role + - Guía + - HTML+ARIA + - NeedsContent + - PrecisaDeConteúdo + - WAI-ARIA + - wcag1.2.1 + - wcag3.3.1 +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role +--- +

Descrição

+ +
+

Esta técnica mostra como utilizar o atributo role alert e demonstra seu efeito em navegadores e tecnologias assistivas.

+
+ +

O atributo de alerta é utilizado para comunicar alguma mensagem importante e, frequentemente, urgente. Quando este atributo (role) estiver ligado a um elemento, o navegador vai enviar um evento acessível de alerta aos produtos de tecnologia assistiva que, então, poderão notificar seus utilizadores sobre o que estiver acontecendo. O atributo alert é mais útil para as informações que requerem a atenção imediata na tela. Por exemplo:

+ + + +

Por causa da sua natureza intrusiva, o atributo de alerta deve ser usado moderadamente e, apenas, nas situações que exigirem atenção imediata. Mudanças dinâmicas que são menos urgentes devem receber um método menos agressivo, tal como a aria-live="polite", ou outros atributos (roles) para regiões dinâmicas.

+ +

Efeitos possíveis sobre as tecnologias assistivas e seus utilizadores

+ +

Quando o atributo (role) alerta é adicionado a um elemento, ou este se torna visível, o identificador de navegação (user agent) deve fazer o seguinte:

+ + + +

Os produtos de tecnologias assistivas devem atender tal evento e notificar seus utilizadores, em conformidade.

+ + + +
Nota: As opiniões podem divergir sobre como uma tecnologia assistiva deve gerenciar esta técnica. A informação oferecida acima é uma dessas opiniões e, portanto, não é normativa.
+ +

Exemplos

+ +

Exemplo 1: Adicionando o atributo (role) no código HTML:

+ +

O trecho abaixo mostra como o atributo role alert é inserido, diretamente, no código-fonte HTML. No momento em que o elemento termina de carregar, o leitor de tela deve ser notificado do alerta. Se o elemento já estiver no código-fonte original quando a página carregar, o leitor de tela vai anunciar o erro imediatamente após a apresentação do título da página.

+ +
<h2 role="alert">Your form could not be submitted because of 3 validation errors.(Seu formulário não pode ser submetido devido a 3 erros de validação)</h2>
+ +

Exemplo 2: Adicionando, dinamicamente, um elemento com a função de alerta:

+ +

Esta parte mostra como criar, de forma dinâmica, um elemento com uma função de alerta e como adicioná-lo à estrutura do documento:

+ +
var myAlert = document.createElement("p");
+myAlert.setAttribute("role", "alert");
+var myAlertText = document.createTextNode("You must agree with our terms of service to create an account.(Você deve concordar com os nossos termos de serviço, a fim de criar uma conta)");
+myAlert.appendChild(myAlertText);
+document.body.appendChild(myAlertText);
+
+ +

Nota: O mesmo resultado pode ser obtido com menos código, quando se utiliza uma biblioteca de script, como jQuery:

+ +
$("<p role='alert'>You must agree with our terms of service to create an account.(Você deve concordar com os nossos termos de serviço para criar uma conta)</p>").appendTo(document.body);
+
+ +

Exemplo 3: Adicionando a função de alerta a um elemento existente:

+ +

Às vezes é preferível adicionar uma função de alerta a um elemento que já está visível na página, a criar um novo elemento. Isto possibilita que os desenvolvedores reiterem a informação que virá a ser mais importante, ou urgente, para os utilizadores. Por exemplo, um controle de formulário pode ter uma instrução sobre o valor esperado. Caso um valor diferente seja inserido, o role="alert" pode ser adicionado ao texto de instrução e, então, o leitor de tela o anuncia como um alerta. O pseudo código, no fragmento abaixo, ilustra esta abordagem:

+ +
<p id="formInstruction">You must select at least 3 options</p>
+
+ +
// When the user tries to submit the form with less than 3 checkboxes selected (Quando houver a tentativa de submissão do formulário com menos de 3 caixas de seleção marcadas):
+document.getElementById("formInstruction").setAttribute("role", "alert");
+ +

Exemplo 4: Construindo um elemento com uma função de alerta visível:

+ +

Se um elemento já tem o atributo role="alert" e é, inicialmente, escondido pelo uso da CSS, torná-lo visível o faz disparar como se estivesse adicionado à página. Isto significa que um alerta existente pode ser "utilizado" múltiplas vezes. 

+ +

Nota: Na maioria dos casos, esta abordagem não é recomendada, porque não é a ideal para esconder erro, ou alerta de texto, que não for aplicável no momento. Utilizadores de tecnologias assistivas antigas podem, ainda, perceber o texto de alerta, mesmo quando este não devesse ser aplicado, fazendo com que acreditem, incorretamente, que há um problema.

+ +
.hidden {
+  display:none;
+}
+
+ +
<p id="expirationWarning" role="alert" class="hidden">Your log in session will expire in 2 minutes(A sua sessão vai expirar em 2 minutos)</p>
+
+ +
// removing the 'hidden' class makes the element visible, which will make the screen reader announce the alert:(Remover a classe "hidden" faz o leitor de tela anunciar o alerta)
+document.getElementById("expirationWarning").className = "";
+ +

Exemplos de Trabalhos:

+ + + +

Notas:

+ + + +

Atributos ARIA utilizados

+ + + +

Técnicas ARIA relacionadas

+ + + +

Compatibilidade

+ +

TBD: Adicionar informações de suporte para UA comum e combinações de produtos TA / AT

+ +

Recursos Adicionais

+ + + +

 

diff --git a/files/pt-br/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html b/files/pt-br/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html new file mode 100644 index 0000000000..cd7cb90bb9 --- /dev/null +++ b/files/pt-br/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html @@ -0,0 +1,158 @@ +--- +title: Usando o atributo aria-labelledby +slug: Web/Accessibility/ARIA/ARIA_Techniques/Usando_o_atributo_aria-labelledby +tags: + - ARIA + - Acessibilidade + - PrecisaDeConteúdo +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute +--- +

Descrição

+ +

Essa técnica demonstra como usar o atributo aria-labelledby.

+ +

O atributo aria-labelledby é usado para indicar os IDs de elementos que são os rótulos para o objeto. É usado para estabelecer uma relação entre widgets ou grupos e suas labels. Usuários de tecnologias assistivas como leitores de telas navegam tipicamente uma página através de TABs entre as áreas da tela. Se uma label não está associada com um elemento input, widget ou grupo, não será legível por leitor de tela.

+ +

aria-labelledby é muito similar ao aria-describedby: uma label descreve a essência de um objeto, enquanto uma descrição prove mais informação que o usuário pode precisar.

+ +

O atributo aria-labelledby não é usado somente para elementos de formulário; é também usado para associar texto estático com widgets, grupos de elementos, painéis, regiões que tem um cabeçalho, definições e mais. A seção {{ anch("Exemplos") }} abaixo fornece mais informação sobre como usar os atributos nesses casos.

+ +

aria-labelledby podem ser usadas em conjunto com o elemento {{ HTMLElement("label") }} (usando o atributo for) para melhorar a compatibilidade com user agents que não suportam ainda ARIA.

+ +

Esse atributo pode ser usado com qualquer elemento HTML de formulário; não é limitado a elementos que tem uma role ARIA atribuída.

+ +

Value

+ +

Uma lista de IDs do elemento separada por espaços

+ +

Possíveis efeitos em user agents e tecnologias assistivas 

+ +

Quando ambos aria-labelledby e aria-label são usados, user agents dão precedência ao aria-labelledby quando computam o nome da propriedade acessível.

+ +
Nota: Opinões podem diferir em como as tecnologias assistivas devem manipular essa técnica. A informação fornecida acima é uma dessas opiniões e portanto não normativa.
+ +

Exemplos

+ +

Exemplo 1: Múltiplas Labels

+ +

No exemplo abaixo, cada campo input é rotulado por tanto por seu próprio rótulo individual como pelo rótulo do grupo:

+ +
<div id="billing">Endereço de Cobrança</div>
+
+<div>
+    <div id="name">Nome</div>
+    <input type="text" aria-labelledby="name billing"/>
+</div>
+<div>
+    <div id="address">Endereço</div>
+    <input type="text" aria-labelledby="address billing"/>
+</div>
+
+ +

Exemplo 2: Associando Cabeçalhos com Regiões

+ +

No exemplo abaixo, elementos de cabeçalho estão associados com o conteúdo que eles seguem. Note que a região sendo referenciada é a que contem o cabeçalho.

+ +
<div role="main" aria-labelledby="foo">
+   <h1 id="foo">Incêndios selvagens se espalham por San Diego Hills</h1>
+   Fortes ventos expandem o fogo inflamado pelas altas temperaturas ...
+</div>
+
+ +

Exemplo 3: Radio Groups

+ +

No exemplo abaixo,  o container de um radiogroup  é associado com suas labels usando o atributo aria-labelledby:

+ +
<div id="radio_label">Meu radio label</div>
+<ul role="radiogroup" aria-labelledby="radio_label">
+    <li role="radio">Item #1</li>
+    <li role="radio">Item #2</li>
+    <li role="radio">Item #3</li>
+</ul>
+
+ +

Exemplo 4: Dialog Label

+ +

No exemplo abaixo, o elemento cabeçalho que rotula o dialog é referenciado pelo atributo aria-labelledby:

+ +
<div role="dialog" aria-labelledby="dialogheader">
+    <h2 id="dialogheader">Escolha um Arquivo</h2>
+    ... Conteúdo do Dialog
+</div>
+
+ +

Exemplo 5: Definição Inline

+ +

No exemplo abaixo, a definição de um termo que é descrita no fluxo natural da narrativa é associada com o próprio termo usando o atributo aria-labelledby:

+ +
<p>O médico explicou que tinha sido um <dfn id="placebo">placebo</dfn>, ou <span role="definition" aria-labelledby="placebo">
+ou a uma preparação mais inerte prescrito para o alívio mental do paciente do que por seu efeito real sobre um distúrbio.</span>
+</p>
+
+ +

Exemplo 6: Definições de Listas

+ +

No exemplo abaixo, as definições numa lista formal de definições são associadas com os termos que eles definem usando o atributo aria-labelledby:

+ +
<dl>
+    <dt id="anathema">anátema</dt>
+    <dd role="definition" aria-labelledby="anathema">uma proibição ou maldição solenemente pronunciada pela autoridade eclesiástica
+                                                     e acompanhada por excomunhão</dd>
+    <dd role="definition" aria-labelledby="anathema">uma vigorosa denúncia</dd>
+
+    <dt id="homily">homilia</dt>
+    <dd role="definition" aria-labelledby="homily">um sermão usualmente curto</dd>
+    <dd role="definition" aria-labelledby="homily">uma leitura ou discurso sobre ou de um tema moral</dd>
+
+</dl>
+
+ +

Exemplo 7: Menus

+ +

No exemplo abaixo, um menu popup é associado com sua label usando o atributo aria-labelledby:

+ +
<div role="menubar">
+    <div role="menuitem" aria-haspopup="true" id="fileMenu">Arquivo</div>
+    <div role="menu" aria-labelledby="fileMenu">
+        <div role="menuitem">Abrir</div>
+        <div role="menuitem">Salvar</div>
+        <div role="menuitem">Salvar como ...</div>
+        ...
+    </div>
+    ...
+</div>
+
+ +

Exemplos Funcionais:

+ + + +

Notas 

+ +

O mapeamento mais comum de uma + API de acessibilidade +  para um rótulo é a propriedade acessível name

+ +

Usado pelas regras ARIA

+ +

todos os elementos de markup base

+ +

Técnicas ARIA relacionadas

+ + + +

Compatibilidade

+ +

TBD: Adicionar informação de suporte para combinações de produto UA e AT

+ +

Recursos Adicionais

+ + diff --git a/files/pt-br/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html b/files/pt-br/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html new file mode 100644 index 0000000000..e93611b182 --- /dev/null +++ b/files/pt-br/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html @@ -0,0 +1,83 @@ +--- +title: Usando o atributo aria-required +slug: Web/Accessibility/ARIA/ARIA_Techniques/Usando_o_atributo_aria-required +tags: + - ARIA + - Acessibilidade +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute +--- +
+
+

Descrição

+ +

O atributo aria-required é usado para indicar que a entrada do usuário é obrigatória em um elemento antes que um formulário possa ser enviado. Este atributo pode ser usado com qualquer elemento de formulário HTML típico; não se limita a elementos que têm uma  role atribuída.

+ +

{{ HTMLVersionInline("5") }} agora tem o atributo required, mas aria-required ainda é útil para agentes de usuário que não suportam ainda HTML5.

+ +

Valor

+ +

true ou false (Padrão: false)

+ +

Possíveis efeitos nos agentes de usuários e tecnologia assistiva 

+ +

Os leitores de tela devem anunciar o campo como obrigatório.

+ +

Observe que esse atributo não alterará automaticamente a apresentação do campo.

+ +
Nota: Opiniões podem diferir em como a tecnologia assistiva deve lidar com esta técnica. A informação fornecida acima é uma dessas opiniões e, portanto, não é normativa.
+ +

Exemplos

+ +

Exemplo 1: Um simples formulário

+ +

 

+ +
 <form action="post">
+     <label for="firstName">First name:</label>
+     <input id="firstName" type="text" aria-required="true" />
+     <br/>
+     <label for="lastName">Last name:</label>
+     <input id="lastName" type="text" aria-required="true" />
+     <br/>
+     <label for="streetAddress">Street address:</label>
+     <input id="streetAddress" type="text" />
+ </form>
+
+ +

Exemplos de trabalho:

+ +

Exemplo de Tooltip  (inclui o uso do atributo aria-required)

+ +

Notas 

+ +

Usado em ARIA roles

+ +
    +
  • Combobox
    • +
  • Gridcell
    • +
  • Listbox
    • +
  • Radiogroup
    • +
  • Spinbutton
    • +
  • Textbox
    • +
  • Tree
    • +
+ +

Técnicas relacionadas com ARIA

+ + + +

Compatibilidade

+ +

TBD: Add support information for common UA and AT product combinations

+ +

Recursos adicionais

+ + +
+
diff --git a/files/pt-br/web/accessibility/aria/aria_techniques/using_the_slider_role/index.html b/files/pt-br/web/accessibility/aria/aria_techniques/using_the_slider_role/index.html new file mode 100644 index 0000000000..18532f5f25 --- /dev/null +++ b/files/pt-br/web/accessibility/aria/aria_techniques/using_the_slider_role/index.html @@ -0,0 +1,125 @@ +--- +title: Usando o slider role +slug: Web/Accessibility/ARIA/ARIA_Techniques/Usando_o_slider_role +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role +--- +

Descrição

+ +

Essa técnica demosntrará como usar o slider role. 

+ +

The slider role is used for markup that allows a user to select a value from within a given range. The slider role is assigned to the "thumb," the control that is adjusted to change the value. Typically, another element is styled to visually represent the range of possible valued, and the thumb positioned visually to represent the value within that range. As the user interacts with the thumb, the application must programmatically adjust the slider's aria-valuenow (and possible aria-valuetext) attribute to reflect the current value. See the {{ anch("Examples") }} section below for more information.

+ +

Keyboard And Focus

+ +

The slider should be keyboard focusable and operable. When the user tabs focus to the slider, it should land on the thumb: the control a mouse user would drag. Arrow keys should operate as follows (localization for right-to-left languages should reverse the direction of the arrows):

+ + + + + + + + + + + + + + + + + + + + + + +
Tecla(s)Ação
Setas para direita e para cima Incrementa o valor selecionado
Setas para esquerda e para baixoDecrementa o valor selecionado
Page Up and Page DownOptionally increase and decrease the value by a set amount (e.g. by 10 on a range from 0 to 100)
+ +

Possible effects on user agents and assistive technology 

+ +

 

+ +
Note: Opinions may differ on how assistive technology should handle this technique. The information provided above is one of those opinions and therefore not normative.
+ +

Examplos

+ +

Examplo 1: Escala numérica simples

+ +

In the example below, a simple slider is used to select a value between 1 and 100. The current volume is 50. The application will programmatically update the value of aria-valuenow in response to user input.

+ +
<label for="fader">Volume</label>
+<input type="range"
+  id="fader"
+  min="1"
+  max="100"
+  value="50"
+  step="1"
+  aria-valuemin="1"
+  aria-valuemax="100"
+  aria-valuenow="50"
+  oninput="outputUpdate(value)">
+<output for="fader" id="volume">50</output>
+
+ +

The following code snippet allows you to return the output as it is updated by user input:

+ +
function outputUpdate(vol) {
+  document.querySelector('#volume').value = vol;
+}
+
+ +

Examplo 2: Valores de texto

+ +

Sometimes, a slider is used to choose a value that is not, semantically, a number. In these cases, the aria-valuetext attribute is used to provide the appropriate text name for the currently selected value. In the example below, the slider is used to select a day of the week.

+ +
<label for="day-handle">Days</label>
+<div class="day-slider">
+  <div id="day-handle" class="day-slider-handle" role="slider" aria-labelledby="day-handle"
+     aria-valuemin="1"
+     aria-valuemax="7"
+     aria-valuenow="2"
+     aria-valuetext="Monday">
+ </div>
+</div>
+
+ +

The code snippet below shows a function that responds to user input and updates the aria-valuenow and aria-valuetext attributes:

+ +
var dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
+var updateSlider = function (newValue) {
+    var handle = document.getElementById("day-handle");
+    handle.setAttribute("aria-valuenow", newValue.toString());
+    handle.setAttribute("aria-valuetext", dayNames[newValue]);
+};
+
+ +

Working Examples:

+ + + +

Notas 

+ +

Atributos ARIA usados

+ + + + + +

Compatibility

+ +

TBD: Add support information for common UA and AT product combinations

+ +

Recursos Adicionais

+ + diff --git a/files/pt-br/web/accessibility/aria/aria_techniques/utilizando_o_alert_role/index.html b/files/pt-br/web/accessibility/aria/aria_techniques/utilizando_o_alert_role/index.html deleted file mode 100644 index 25d3222fcd..0000000000 --- a/files/pt-br/web/accessibility/aria/aria_techniques/utilizando_o_alert_role/index.html +++ /dev/null @@ -1,145 +0,0 @@ ---- -title: Utilizando a função "alerta" -slug: Web/Accessibility/ARIA/ARIA_Techniques/Utilizando_o_alert_role -tags: - - ARIA - - Accessibility - - Acessibilidade - - Alertas - - Avançado - - CSS - - Caixas de aviso - - Configuração role - - Guía - - HTML+ARIA - - NeedsContent - - PrecisaDeConteúdo - - WAI-ARIA - - wcag1.2.1 - - wcag3.3.1 -translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role ---- -

Descrição

- -
-

Esta técnica mostra como utilizar o atributo role alert e demonstra seu efeito em navegadores e tecnologias assistivas.

-
- -

O atributo de alerta é utilizado para comunicar alguma mensagem importante e, frequentemente, urgente. Quando este atributo (role) estiver ligado a um elemento, o navegador vai enviar um evento acessível de alerta aos produtos de tecnologia assistiva que, então, poderão notificar seus utilizadores sobre o que estiver acontecendo. O atributo alert é mais útil para as informações que requerem a atenção imediata na tela. Por exemplo:

- - - -

Por causa da sua natureza intrusiva, o atributo de alerta deve ser usado moderadamente e, apenas, nas situações que exigirem atenção imediata. Mudanças dinâmicas que são menos urgentes devem receber um método menos agressivo, tal como a aria-live="polite", ou outros atributos (roles) para regiões dinâmicas.

- -

Efeitos possíveis sobre as tecnologias assistivas e seus utilizadores

- -

Quando o atributo (role) alerta é adicionado a um elemento, ou este se torna visível, o identificador de navegação (user agent) deve fazer o seguinte:

- - - -

Os produtos de tecnologias assistivas devem atender tal evento e notificar seus utilizadores, em conformidade.

- - - -
Nota: As opiniões podem divergir sobre como uma tecnologia assistiva deve gerenciar esta técnica. A informação oferecida acima é uma dessas opiniões e, portanto, não é normativa.
- -

Exemplos

- -

Exemplo 1: Adicionando o atributo (role) no código HTML:

- -

O trecho abaixo mostra como o atributo role alert é inserido, diretamente, no código-fonte HTML. No momento em que o elemento termina de carregar, o leitor de tela deve ser notificado do alerta. Se o elemento já estiver no código-fonte original quando a página carregar, o leitor de tela vai anunciar o erro imediatamente após a apresentação do título da página.

- -
<h2 role="alert">Your form could not be submitted because of 3 validation errors.(Seu formulário não pode ser submetido devido a 3 erros de validação)</h2>
- -

Exemplo 2: Adicionando, dinamicamente, um elemento com a função de alerta:

- -

Esta parte mostra como criar, de forma dinâmica, um elemento com uma função de alerta e como adicioná-lo à estrutura do documento:

- -
var myAlert = document.createElement("p");
-myAlert.setAttribute("role", "alert");
-var myAlertText = document.createTextNode("You must agree with our terms of service to create an account.(Você deve concordar com os nossos termos de serviço, a fim de criar uma conta)");
-myAlert.appendChild(myAlertText);
-document.body.appendChild(myAlertText);
-
- -

Nota: O mesmo resultado pode ser obtido com menos código, quando se utiliza uma biblioteca de script, como jQuery:

- -
$("<p role='alert'>You must agree with our terms of service to create an account.(Você deve concordar com os nossos termos de serviço para criar uma conta)</p>").appendTo(document.body);
-
- -

Exemplo 3: Adicionando a função de alerta a um elemento existente:

- -

Às vezes é preferível adicionar uma função de alerta a um elemento que já está visível na página, a criar um novo elemento. Isto possibilita que os desenvolvedores reiterem a informação que virá a ser mais importante, ou urgente, para os utilizadores. Por exemplo, um controle de formulário pode ter uma instrução sobre o valor esperado. Caso um valor diferente seja inserido, o role="alert" pode ser adicionado ao texto de instrução e, então, o leitor de tela o anuncia como um alerta. O pseudo código, no fragmento abaixo, ilustra esta abordagem:

- -
<p id="formInstruction">You must select at least 3 options</p>
-
- -
// When the user tries to submit the form with less than 3 checkboxes selected (Quando houver a tentativa de submissão do formulário com menos de 3 caixas de seleção marcadas):
-document.getElementById("formInstruction").setAttribute("role", "alert");
- -

Exemplo 4: Construindo um elemento com uma função de alerta visível:

- -

Se um elemento já tem o atributo role="alert" e é, inicialmente, escondido pelo uso da CSS, torná-lo visível o faz disparar como se estivesse adicionado à página. Isto significa que um alerta existente pode ser "utilizado" múltiplas vezes. 

- -

Nota: Na maioria dos casos, esta abordagem não é recomendada, porque não é a ideal para esconder erro, ou alerta de texto, que não for aplicável no momento. Utilizadores de tecnologias assistivas antigas podem, ainda, perceber o texto de alerta, mesmo quando este não devesse ser aplicado, fazendo com que acreditem, incorretamente, que há um problema.

- -
.hidden {
-  display:none;
-}
-
- -
<p id="expirationWarning" role="alert" class="hidden">Your log in session will expire in 2 minutes(A sua sessão vai expirar em 2 minutos)</p>
-
- -
// removing the 'hidden' class makes the element visible, which will make the screen reader announce the alert:(Remover a classe "hidden" faz o leitor de tela anunciar o alerta)
-document.getElementById("expirationWarning").className = "";
- -

Exemplos de Trabalhos:

- - - -

Notas:

- - - -

Atributos ARIA utilizados

- - - -

Técnicas ARIA relacionadas

- - - -

Compatibilidade

- -

TBD: Adicionar informações de suporte para UA comum e combinações de produtos TA / AT

- -

Recursos Adicionais

- - - -

 

diff --git a/files/pt-br/web/accessibility/aria/forms/basic_form_hints/index.html b/files/pt-br/web/accessibility/aria/forms/basic_form_hints/index.html new file mode 100644 index 0000000000..722c60d420 --- /dev/null +++ b/files/pt-br/web/accessibility/aria/forms/basic_form_hints/index.html @@ -0,0 +1,118 @@ +--- +title: Dicas básicas de form +slug: Web/Accessibility/ARIA/forms/Dicas_básicas_de_form +translation_of: Web/Accessibility/ARIA/forms/Basic_form_hints +--- +
+

Form labels

+
+ +

Quando estiver implementando forms usando elementos HTML tradicionais relacionados à foms, é importante fornecer labels para controles e para explicitamente associar um label com o seu ocntrole. Quando um usuário de leitor de tela navega uma página, o leitor de tel irá descrever os controles do form, mas sem uma associação direta entre o controle e seu label, o leitor de tela não tem maneira de saber qual label é o correto.

+ +

O exemplo abaixo mostra um form simples com labels. Note que cada elemento {{HTMLElement("input")}} tem um id, e cada elemento {{HTMLElement("label")}} tem um atributo for indicando o id do {{HTMLElement("input")}} associado.

+ +

Exempl0 1. Form simples com labels

+ +
<form>
+  <ul>
+    <li>
+      <input id="wine-1" type="checkbox" value="riesling"/>
+      <label for="wine-1">Berg Rottland Riesling</label>
+    </li>
+    <li>
+      <input id="wine-2" type="checkbox" value="weissbergunder"/>
+      <label for="wine-2">Weissbergunder</label>
+    </li>
+    <li>
+      <input id="wine-3" type="checkbox" value="pinot-grigio"/>
+      <label for="wine-3">Pinot Grigio</label>
+    </li>
+    <li>
+      <input id="wine-4" type="checkbox" value="gewurztraminer"/>
+      <label for="wine-4">Berg Rottland Riesling</label>
+    </li>
+  </ul>
+</form>
+
+ +

Rotulando com ARIA

+ +

O elemento HTML {{HTMLElement("label")}} é apropriado para elementos relacionados com form, mas muitos controles de form são implementados como widget JavaScript dinâmico, usando {{HTMLElement("div")}}s ou {{HTMLElement("span")}}s. WAI-ARIA, a especificação de Aplicações Internet Ricas em Acessibilidade da W3C Iniciativa de Acessibilidade Web, fornece o atributo aria-labelledby para esses casos.

+ +

O exemplo abaixo mostra um grupo de botões rádio usando um lista não ordenada. Note que na linha 3, o elemento {{HTMLElement("li")}} seta o atributo aria-labelledby para "rg1_label," o id do elemento {{HTMLElement("h3")}} na linha 1, que é o label para o grupo rádio.

+ +

Exemplo 2. Um grupo rádio implementado usando uma lista não ordenada (adaptado de http://www.oaa-accessibility.org/examplep/radio1/)

+ +
<h3 id="rg1_label">Lunch Options</h3>
+
+<ul class="radiogroup" id="rg1"  role="radiogroup" aria-labelledby="rg1_label">
+  <li id="r1"  tabindex="-1" role="radio" aria-checked="false">
+    <img role="presentation" src="radio-unchecked.gif" /> Thai
+  </li>
+  <li id="r2"  tabindex="-1" role="radio"  aria-checked="false">
+    <img role="presentation" src="radio-unchecked.gif" /> Subway
+  </li>
+  <li id="r3"   tabindex="0" role="radio" aria-checked="true">
+    <img role="presentation" src="radio-checked.gif" /> Radio Maria
+  </li>
+</ul>
+
+ +

Descrevendo com ARIA

+ +

Controles form às vezes tem uma descrição associada com eles, em adição ao label. ARIA fornece o atributo aria-describedby para diretamente associar a descrição com o controle.

+ +

O exemplo abaixo mostra um elemento {{HTMLElement("button")}} que é descrito por uma sentença num elemento {{HTMLElement("div")}} separado. O atributo aria-describedby no {{HTMLElement("button")}} referencia o id de {{HTMLElement("div")}}.

+ +

Exemplo 3. Um botão descrito por um elemento separado.

+ +
<button aria-describedby="descriptionRevert">Revert</button>
+<div id="descriptionRevert">Reverting will undo any changes that have been made since the last save.</div>
+ +

(Note que o atributo aria-describedby é usado para outros propósitos, além de controles do form.)

+ +

Campos inválidos e obrigatórios

+ +

Web developers tipicamente usam estratégias de apresentação para indicar campos obrigatórios ou campos inválidos, mas tecnologias assistivas (TAs) não podem necessariamente inferir essa informação a partir da apresentação. ARIA fornece atributos para indicar que os controles do form são obrigatórios ou inválidos:

+ + + +

O exemplo abaixo mostra um form simples com três campos. Nas linhas 4 e 12, o atributo aria-required é setado para true (em adição aos asteriscos próximos aos labels) indicando que os campos de nome e e-mail são obrigatórios. A segunda parte do exemplo é um trecho de JavaScript que valida o e-mail e seta o atributo aria-invalid do campo e-mail (linha 12 do HTML) de acordo com o resultado (em adição à mudança de apresentação do elemento).

+ +

Exemplo 4a. Um form com campos obrigatórios.

+ +
<form>
+  <div>
+    <label for="name">* Name:</label>
+    <input type="text" value="name" id="name" aria-required="true"/>
+  </div>
+  <div>
+    <label for="phone">Phone:</label>
+    <input type="text" value="phone" id="phone" aria-required="false"/>
+  </div>
+  <div>
+    <label for="email">* E-mail:</label>
+    <input type="text" value="email" id="email" aria-required="true"/>
+  </div>
+</form>
+ +

Exemplo 4b. Parte de um script que valida a entrada no form.

+ +
var validate = function () {
+  var emailElement = document.getElementById(emailFieldId);
+  var valid = emailValid(formData.email); // returns true if valid, false otherwise
+
+  emailElement.setAttribute("aria-invalid", !valid);
+  setElementBorderColour(emailElement, valid); // sets the border to red if second arg is false
+};
+ +

Fornecendo Mensagens de Erro Úteis

+ +

Leia como usar alertas ARIA para melhorar forms.

+ +
A ser decidido: devemos ou combinar em um artigo ou separar em técnicas, ou ambos. Além disso, é ARIA marcação apropriada para mensagens de erro em uma página carregada após a validação do lado do servidor?
+ +

Para maiores informações usando ARIA para acessibilidade de forms, veja o documento Práticas de Cricação de WAI-ARIA.

diff --git "a/files/pt-br/web/accessibility/aria/forms/dicas_b\303\241sicas_de_form/index.html" "b/files/pt-br/web/accessibility/aria/forms/dicas_b\303\241sicas_de_form/index.html" deleted file mode 100644 index 722c60d420..0000000000 --- "a/files/pt-br/web/accessibility/aria/forms/dicas_b\303\241sicas_de_form/index.html" +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: Dicas básicas de form -slug: Web/Accessibility/ARIA/forms/Dicas_básicas_de_form -translation_of: Web/Accessibility/ARIA/forms/Basic_form_hints ---- -
-

Form labels

-
- -

Quando estiver implementando forms usando elementos HTML tradicionais relacionados à foms, é importante fornecer labels para controles e para explicitamente associar um label com o seu ocntrole. Quando um usuário de leitor de tela navega uma página, o leitor de tel irá descrever os controles do form, mas sem uma associação direta entre o controle e seu label, o leitor de tela não tem maneira de saber qual label é o correto.

- -

O exemplo abaixo mostra um form simples com labels. Note que cada elemento {{HTMLElement("input")}} tem um id, e cada elemento {{HTMLElement("label")}} tem um atributo for indicando o id do {{HTMLElement("input")}} associado.

- -

Exempl0 1. Form simples com labels

- -
<form>
-  <ul>
-    <li>
-      <input id="wine-1" type="checkbox" value="riesling"/>
-      <label for="wine-1">Berg Rottland Riesling</label>
-    </li>
-    <li>
-      <input id="wine-2" type="checkbox" value="weissbergunder"/>
-      <label for="wine-2">Weissbergunder</label>
-    </li>
-    <li>
-      <input id="wine-3" type="checkbox" value="pinot-grigio"/>
-      <label for="wine-3">Pinot Grigio</label>
-    </li>
-    <li>
-      <input id="wine-4" type="checkbox" value="gewurztraminer"/>
-      <label for="wine-4">Berg Rottland Riesling</label>
-    </li>
-  </ul>
-</form>
-
- -

Rotulando com ARIA

- -

O elemento HTML {{HTMLElement("label")}} é apropriado para elementos relacionados com form, mas muitos controles de form são implementados como widget JavaScript dinâmico, usando {{HTMLElement("div")}}s ou {{HTMLElement("span")}}s. WAI-ARIA, a especificação de Aplicações Internet Ricas em Acessibilidade da W3C Iniciativa de Acessibilidade Web, fornece o atributo aria-labelledby para esses casos.

- -

O exemplo abaixo mostra um grupo de botões rádio usando um lista não ordenada. Note que na linha 3, o elemento {{HTMLElement("li")}} seta o atributo aria-labelledby para "rg1_label," o id do elemento {{HTMLElement("h3")}} na linha 1, que é o label para o grupo rádio.

- -

Exemplo 2. Um grupo rádio implementado usando uma lista não ordenada (adaptado de http://www.oaa-accessibility.org/examplep/radio1/)

- -
<h3 id="rg1_label">Lunch Options</h3>
-
-<ul class="radiogroup" id="rg1"  role="radiogroup" aria-labelledby="rg1_label">
-  <li id="r1"  tabindex="-1" role="radio" aria-checked="false">
-    <img role="presentation" src="radio-unchecked.gif" /> Thai
-  </li>
-  <li id="r2"  tabindex="-1" role="radio"  aria-checked="false">
-    <img role="presentation" src="radio-unchecked.gif" /> Subway
-  </li>
-  <li id="r3"   tabindex="0" role="radio" aria-checked="true">
-    <img role="presentation" src="radio-checked.gif" /> Radio Maria
-  </li>
-</ul>
-
- -

Descrevendo com ARIA

- -

Controles form às vezes tem uma descrição associada com eles, em adição ao label. ARIA fornece o atributo aria-describedby para diretamente associar a descrição com o controle.

- -

O exemplo abaixo mostra um elemento {{HTMLElement("button")}} que é descrito por uma sentença num elemento {{HTMLElement("div")}} separado. O atributo aria-describedby no {{HTMLElement("button")}} referencia o id de {{HTMLElement("div")}}.

- -

Exemplo 3. Um botão descrito por um elemento separado.

- -
<button aria-describedby="descriptionRevert">Revert</button>
-<div id="descriptionRevert">Reverting will undo any changes that have been made since the last save.</div>
- -

(Note que o atributo aria-describedby é usado para outros propósitos, além de controles do form.)

- -

Campos inválidos e obrigatórios

- -

Web developers tipicamente usam estratégias de apresentação para indicar campos obrigatórios ou campos inválidos, mas tecnologias assistivas (TAs) não podem necessariamente inferir essa informação a partir da apresentação. ARIA fornece atributos para indicar que os controles do form são obrigatórios ou inválidos:

- - - -

O exemplo abaixo mostra um form simples com três campos. Nas linhas 4 e 12, o atributo aria-required é setado para true (em adição aos asteriscos próximos aos labels) indicando que os campos de nome e e-mail são obrigatórios. A segunda parte do exemplo é um trecho de JavaScript que valida o e-mail e seta o atributo aria-invalid do campo e-mail (linha 12 do HTML) de acordo com o resultado (em adição à mudança de apresentação do elemento).

- -

Exemplo 4a. Um form com campos obrigatórios.

- -
<form>
-  <div>
-    <label for="name">* Name:</label>
-    <input type="text" value="name" id="name" aria-required="true"/>
-  </div>
-  <div>
-    <label for="phone">Phone:</label>
-    <input type="text" value="phone" id="phone" aria-required="false"/>
-  </div>
-  <div>
-    <label for="email">* E-mail:</label>
-    <input type="text" value="email" id="email" aria-required="true"/>
-  </div>
-</form>
- -

Exemplo 4b. Parte de um script que valida a entrada no form.

- -
var validate = function () {
-  var emailElement = document.getElementById(emailFieldId);
-  var valid = emailValid(formData.email); // returns true if valid, false otherwise
-
-  emailElement.setAttribute("aria-invalid", !valid);
-  setElementBorderColour(emailElement, valid); // sets the border to red if second arg is false
-};
- -

Fornecendo Mensagens de Erro Úteis

- -

Leia como usar alertas ARIA para melhorar forms.

- -
A ser decidido: devemos ou combinar em um artigo ou separar em técnicas, ou ambos. Além disso, é ARIA marcação apropriada para mensagens de erro em uma página carregada após a validação do lado do servidor?
- -

Para maiores informações usando ARIA para acessibilidade de forms, veja o documento Práticas de Cricação de WAI-ARIA.

diff --git a/files/pt-br/web/accessibility/aria/guia_para_implementar_o_leitor_de_tela_aria/index.html b/files/pt-br/web/accessibility/aria/guia_para_implementar_o_leitor_de_tela_aria/index.html deleted file mode 100644 index 73b9605ef1..0000000000 --- a/files/pt-br/web/accessibility/aria/guia_para_implementar_o_leitor_de_tela_aria/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: Guia para implementar o leitor de tela ARIA -slug: Web/Accessibility/ARIA/Guia_para_implementar_o_leitor_de_tela_ARIA -tags: - - ARIA - - Acessibilidade -translation_of: Web/Accessibility/ARIA/ARIA_Screen_Reader_Implementors_Guide ---- -

Regiões Ativas

- -

Este é apenas um guia. Uma marcação de região ativa é uma área complexa que é algo aberto à interpretações. O que segue pretende prover um guia de implementação que respeita a necessidade dos desenvolvedores de leitores de tela para tentar novas coisas. A intenção é chegar a um balanço entre providenciar um guia útil em como usar o significado de marcação pretendido

- -

Interpretando a marcação de região ativa WAI-ARIA

- -
    -
  1. Mudanças ativas são são dicas: Em geral marcação de região ativa é dado pelo autor como dicas, e a tecnologia assistiva pode permitir , site or even region-specific settings, assim como heurística para ajudar com mudanças ativas nas páginas que não têm dicas WAI-ARIA.
    2. -
  2. Opcionalmente, criar uma segunda, queue adicional se o usuário configurar um segundo canal de hardware: Se há dois canais para apresentação (i.e. text-to-speech e display Braile), então duas queues podem ser mantidas para permitir apresentação paralela. Os canais poderiam se configurados pelo usuário para apresentar regiões ativas baseada em vez ou prioridades.
    3. -
  3. Regiões ocupadas: Qualquer alteração numa região marcada com aria-busy="true" não deve ser adicionada à queue até que aquele atributo seja limpo.
    4. -
  4. Prioridade (aria-live ou a partir da vez) tem primeira precedência: itens deveriam ser adicionados à queue baseadas no seu nível de prioridade da propriedade aria-live ou inerente da vez (i.e. role="log" é prioridade por padrão). Itens assertivos são os primeiros então nível de prioridade. Alternativamente, implementações podem escolher ter uma política de limpeza mais items de prioridade, i.e. itens assertivos limpam qualquer item de prioridade da queue.
    5. -
  5. Tempo toma a segunda procedência: Priorizar itens com o mesmo nível de prioridade de acordo com quando o evento ocorre (eventos anteriores vêm primeiro). Itens presentes do mesmo nível de prioridade na ordem do que ocorreu primeiro.
    6. -
  6. Regiões atômicas (aria-atomic="true")  com mudanças múltiplas não deveriam estar presentes duas vezes com o mesmo conrteúdo. Como um novo evento para uma região atômica é adicionada à queue e remove um evento anterior para a mesma região. É provavelmente desejável que tenha pelo menos um pequeno timeout antes de apresentar mudanças numa região atômica, com a finalidade de evitar apresentar a região duas vezes para duas mudançasque ocorrem rapidamente uma após a outra.
    7. -
  7. Inclua labels quando estiver apresntando mudanças: se a mudança ocorre em algo com um label de alguma forma  semântico, fale o label. Isso é particularmente importante para mudanças em data cells, onde os headers column e row fornecem informação contextual importante.
    8. -
- -

Ideias para Configurações e Heurística

- -
    -
  1. Permitir uma voz diferente (em text-to-speech) ou outras características de apresentação para setar mudanças ativas seperadamente.
    2. -
  2. Quando não há marcação WAI-ARIA presente, automaticamente apresenta algumas mudanças a mesnos que o usuário configure todas as mudanças ativas para desligado. Por exemplo, mudanças automáticas de fala que são causadas pela própria entrada do usuário, como parte do contexto daquela entrada.
    3. -
  3. Permitir configurações globais para desligar a apresentação de mudanças ativas, apresentar todas as mudanças ativas, use marcação, ou seja "esperto" (use heurística).
    4. -
- -

Detalhes para Processamento via APIs Platform Acessibility

- -

Esperamos que o desenvolvedor do navegador irá trabalhar para fornecer implementações consistentes. A imlementação mais completa das regiões ativas atualmente está no Firefox 3. Aqui está como regiões ativas WAI-ARIA são expostas no Firefox 3.

diff --git a/files/pt-br/web/accessibility/aria/widgets/overview/index.html b/files/pt-br/web/accessibility/aria/widgets/overview/index.html new file mode 100644 index 0000000000..6e8cb06ae2 --- /dev/null +++ b/files/pt-br/web/accessibility/aria/widgets/overview/index.html @@ -0,0 +1,72 @@ +--- +title: Visão geral +slug: Web/Accessibility/ARIA/widgets/Visão_geral +tags: + - Acessibilidade + - JavaScript + - Landing + - PrecisaAtualizar +translation_of: 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/web/accessibility/aria/widgets/vis\303\243o_geral/index.html" "b/files/pt-br/web/accessibility/aria/widgets/vis\303\243o_geral/index.html" deleted file mode 100644 index 6e8cb06ae2..0000000000 --- "a/files/pt-br/web/accessibility/aria/widgets/vis\303\243o_geral/index.html" +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: Visão geral -slug: Web/Accessibility/ARIA/widgets/Visão_geral -tags: - - Acessibilidade - - JavaScript - - Landing - - PrecisaAtualizar -translation_of: 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/web/accessibility/index.html b/files/pt-br/web/accessibility/index.html new file mode 100644 index 0000000000..b494b06163 --- /dev/null +++ b/files/pt-br/web/accessibility/index.html @@ -0,0 +1,52 @@ +--- +title: Acessibilidade +slug: Web/Acessibilidade +tags: + - ARIA + - Acessibilidade + - Avançado + - Desenvolvimento Web + - TA - Tecnologias Assistivas +translation_of: Web/Accessibility +--- +

Acessiblidade no desenvolvimento Web significa permitir que o máximo possível de pessoas possa acessar os sites da web mesmo quando suas habilidades são limitadas de alguma forma. Aqui nós fornecemos informações sobre o desenvolvimento de conteúdo acessível.

+ +

"A palavra Acessibilidade é, frequentemente, usada para descrever facilidades ou assistências às pessoas com necessidades especiais, como em acessível para cadeirantes. Isto pode se estender para o Sistema Braille, rampas para cadeirantes, sinais sonoros em passagens de pedestres, modelos de páginas e assim por diante". Acessibilidade na Wikipedia

+ +

"A Web é, fundamentalmente, projetada para funcionar para todas as pessoas, independentemente de máquina, programas, língua, cultura, localização ou capacidade física ou mental de seus utilizadores. Quando a web atende a esses requisitos, ela se torna acessível a pessoas com dificuldades auditivas, motoras, visuais e cognitivas". W3C - Acessibilidade

+ +
+
+

Documentação

+ +
+
Desenvolvimento Web
+
Uma coleção de artigos destinados a mostrar as principais questões de desenvolvimento web no mundo da acessibilidade.
+
ARIA
+
Uma coleção de artigos para aprender como usar ARIA e tornar seus documentos HTML mais acessíveis.
+
Desenvolvimento de tecnologias assistivas (TA)
+
Uma coleção de artigos direcionados a desenvolvedores de tecnologias assistivas.
+
Acessibilidade em dispositivos móveis
+
Esse documento fornece uma breve lista das necessidades da acessibilidade para desenvolvedores de aplicativos móveis.
+
+ +

Ver todos os artigos sobre Acessibilidade...

+
+ +
+

Ferramentas para desenvolvedores web

+ + + + + +

Outras páginas úteis

+ + +
+
diff --git a/files/pt-br/web/accessibility/mobile_accessibility_checklist/index.html b/files/pt-br/web/accessibility/mobile_accessibility_checklist/index.html new file mode 100644 index 0000000000..29d407c175 --- /dev/null +++ b/files/pt-br/web/accessibility/mobile_accessibility_checklist/index.html @@ -0,0 +1,100 @@ +--- +title: Acessibilidade para plataforma móvel +slug: Web/Acessibilidade/Accessibilidade_para_plataforma_movel +tags: + - Acessibilidade + - Firefox OS + - Guías + - Móveis +translation_of: Web/Accessibility/Mobile_accessibility_checklist +--- +
+

Este documento contém uma lista concisa de requisitos para desenvolvedores de aplicativos móveis. Tem como intenção evoluir continuamente conforme forem aparecendo outros padrões.

+
+ +

Cor

+ + + +
+

   Jon Snook escreveu um útil Colour Contrast Checker  que é usado para checar o contraste de cores entre o background e o foreground. De maneira alternativa o Tanaguru Contrast-Finder faz um trabalho similar, mas também sugeste melhores contrastes de cores considerando as usadas.

+
+ +

Visibilidade

+ + + +

Foco

+ + + +

Textos Equivalentes

+ + + +

Manipulação de Estado

+ + + +

Orientações gerais

+ + + +
+

Tanaguru's automated accessibility testing service fornece uma maneira útil para descobrir alguns erros de acessibilidade que ocorrem em páginas web, ou instalando aplicativos web (ex: Firefox OS.) Você pode encontrar mais sobre a técnica de implementação do Tanaguru, como também contribuir para o projeto tanaguru.org.

+
+ +
+

A versão original desse documento foi escrita por Yura Zenevich.

+
+ +

 

diff --git a/files/pt-br/web/accessibility/understanding_wcag/index.html b/files/pt-br/web/accessibility/understanding_wcag/index.html new file mode 100644 index 0000000000..392c1008b7 --- /dev/null +++ b/files/pt-br/web/accessibility/understanding_wcag/index.html @@ -0,0 +1,57 @@ +--- +title: Entendendo as Diretrizes de Acessibilidade do Conteúdo Web +slug: Web/Acessibilidade/Entendendo_WCAG +tags: + - WCAG + - Web Content Accessibility Guidelines +translation_of: Web/Accessibility/Understanding_WCAG +--- +

Este conjunto de artigos fornece explicações rápidas para ajudá-lo a entender as etapas que devem ser seguidas para estar em conformidade com as recomendações descritas nas Diretrizes de Acessibilidade para Conteúdo Web 2.0 ou 2.1 do W3C (ou apenas WCAG, para as finalidades deste artigo).

+ +

O WCAG 2.0 e 2.1 fornece um conjunto detalhado de diretrizes para tornar o conteúdo web mais acessível para pessoas com uma ampla variedade de deficiências. Isso é compreensivo, porém incrivelmente detalhado e muito difícil de obter uma compreensão rápida disso. Por essa razão, nós fizemos uma sumário com os passos práticosque você precisa saber para satisfazer as diferentes recomendações, com mais alguns link para mais detalhes do que está sendo solicitado.

+ +

Os quatro princípios

+ +

WCAG is broadly broken down into four principles — major things that web content must be to be considered accessible (see Understanding the Four Principles of Accessibility for the WCAG definitions).

+ +

Each of the links below will take you to pages that further expand on these areas, giving you practical advice on how to write your web content so it conforms to the success criteria outlined in each of the WCAG 2.0 and 2.1 guidelines that further sub-divides each principle.

+ + + +

Should I use WCAG 2.0 or 2.1?

+ +

WCAG 2.1 is the most recent and relevant accessibility standard. Use WCAG 2.1 to help more people with disabilities and reduce the future legal risk for web site owners. Target WCAG 2.0 first when allocating resources. Then step up to WCAG 2.1. 

+ +

O que é o WCAG 2.1?

+ +

WCAG 2.1 was published as an official recommendation on 05 June 2018. The European Union (EU) adopted WCAG 2.1 as the digital accessibility standard in September 2018. W3C published a press release WCAG 2.1 Adoption in Europe. 

+ +

WCAG 2.1 includes:

+ + + + + +

This guide is intended to provide practical information to help you build better, more accessible websites. However, we are not lawyers, and none of this constitutes legal advice. If you are worried about the legal implications of web accessibility, we'd recommend that you check the specific legislation governing accessibility for the web/public resources in your country or locale, and seek the advice of a qualified lawyer.

+ +

O que é acessibilidade? e particulamente o Guia de Acessibilidade e a seção de regras fornecem mais informações relacionadas.

diff --git a/files/pt-br/web/accessibility/understanding_wcag/keyboard/index.html b/files/pt-br/web/accessibility/understanding_wcag/keyboard/index.html new file mode 100644 index 0000000000..905c6d062f --- /dev/null +++ b/files/pt-br/web/accessibility/understanding_wcag/keyboard/index.html @@ -0,0 +1,87 @@ +--- +title: Keyboard +slug: Web/Acessibilidade/Entendendo_WCAG/Keyboard +translation_of: Web/Accessibility/Understanding_WCAG/Keyboard +--- +
To be fully accessible, a web page must be operable by someone using only a keyboard to access and control it. This includes users of screen readers, but can also include users who have trouble operating a pointing device such as a mouse or trackball, or whose mouse is not working at the moment, or who simply prefer to use a keyboard for input whenever possible.
+ +

Focusable elements should have interactive semantics

+ +

If an element can be focused using the keyboard, then it should be interactive; that is, the user should be able to do something to it and produce a change of some kind (for example, activating a link or changing an option).

+ +
+

Note: One important exception to this rule is if the element has role="document" applied to it, inside an interactive context (such as role="application"). In such a case, focusing the nested document is the only way of returning assistive technology to a non-interactive state (often called "browse mode").

+
+ +

Most interactive elements are focusable by default; you can make an element focusable by adding a tabindex=0 attribute value to it. However, you should only add tabindex if you have also made the element interactive, for example, by defining appropriate event handlers keyboard events.

+ +

See also

+ + + +

Avoid using tabindex attribute greater than zero

+ +

The tabindex attribute indicates that an element is focusable using the keyboard. A value of zero indicates that the element is part of the default focus order, which is based on the ordering of elements in the HTML document. A positive value puts the element ahead of those in the default ordering; elements with positive values are focused in the order of their tabindex values (1, then 2, then 3, etc.).

+ +

This creates confusion for keyboard-only users when the focus order differs from the logical order of the page. A better strategy is to structure the HTML document so that focusable elements are in a logical order, without the need to re-order them with positive tabindex values.

+ +

See also

+ + + +

Clickable elements must be focusable and should have interactive semantics

+ +

If an element can be clicked with a pointing device, such as a mouse, then it should also be focusable using the keyboard, and the user should be able to do something by interacting with it.

+ +

An element is clickable if it has an onclick event handler defined. You can make it focusable by adding a tabindex=0 attribute value to it. You can make it operable with the keyboard by defining an onkeydown event handler; in most cases, the action taken by event handler should be the same for both types of events.

+ +

See also

+ + + +

Interactive elements must be able to be activated using a keyboard

+ +

If the user can interact with an element using touch or a pointing device, then the element should also support interacting using the keyboard. That is, if you have defined event handlers for touch or click events, you should also define them for keyboard events. The keyboard event handlers should enable the effectively the same interaction as the touch or click handlers.

+ +

See also

+ + + +

Interactive elements must be focusable

+ +

If the user can interact with an element (for example, using touch or a pointing device), then it should be focusable using the keyboard. You can make it focusable by adding a tabindex=0 attribute value to it. That will add the element to the list of elements that can be focused by pressing the Tab key, in the sequence of such elements as defined in the HTML document.

+ +

See also

+ + + +

Focusable element must have focus styling

+ +

Any element that can receive keyboard focus should have visible styling that indicates when the element is focused. You can do this with the :focus CSS pseudo-class.

+ +

Standard focusable elements such as links and input fields are given special styling by the browser by default, so you might not need to specify focus styling for such elements, unless you want the focus styling to be more distinctive.

+ +

If you create your own focusable components, be sure that you also define focus styling for them.

+ +

See also

+ + diff --git a/files/pt-br/web/acessibilidade/accessibilidade_para_plataforma_movel/index.html b/files/pt-br/web/acessibilidade/accessibilidade_para_plataforma_movel/index.html deleted file mode 100644 index 29d407c175..0000000000 --- a/files/pt-br/web/acessibilidade/accessibilidade_para_plataforma_movel/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: Acessibilidade para plataforma móvel -slug: Web/Acessibilidade/Accessibilidade_para_plataforma_movel -tags: - - Acessibilidade - - Firefox OS - - Guías - - Móveis -translation_of: Web/Accessibility/Mobile_accessibility_checklist ---- -
-

Este documento contém uma lista concisa de requisitos para desenvolvedores de aplicativos móveis. Tem como intenção evoluir continuamente conforme forem aparecendo outros padrões.

-
- -

Cor

- - - -
-

   Jon Snook escreveu um útil Colour Contrast Checker  que é usado para checar o contraste de cores entre o background e o foreground. De maneira alternativa o Tanaguru Contrast-Finder faz um trabalho similar, mas também sugeste melhores contrastes de cores considerando as usadas.

-
- -

Visibilidade

- - - -

Foco

- - - -

Textos Equivalentes

- - - -

Manipulação de Estado

- - - -

Orientações gerais

- - - -
-

Tanaguru's automated accessibility testing service fornece uma maneira útil para descobrir alguns erros de acessibilidade que ocorrem em páginas web, ou instalando aplicativos web (ex: Firefox OS.) Você pode encontrar mais sobre a técnica de implementação do Tanaguru, como também contribuir para o projeto tanaguru.org.

-
- -
-

A versão original desse documento foi escrita por Yura Zenevich.

-
- -

 

diff --git a/files/pt-br/web/acessibilidade/an_overview_of_accessible_web_applications_and_widgets/index.html b/files/pt-br/web/acessibilidade/an_overview_of_accessible_web_applications_and_widgets/index.html deleted file mode 100644 index df43b575a6..0000000000 --- a/files/pt-br/web/acessibilidade/an_overview_of_accessible_web_applications_and_widgets/index.html +++ /dev/null @@ -1,234 +0,0 @@ ---- -title: Visão geral da acessibilidade nas aplicações web e widgets -slug: Web/Acessibilidade/An_overview_of_accessible_web_applications_and_widgets -tags: - - ARIA - - Accessibility - - Acessibilidade - - Aplicativos Web - - CSS - - DHTML - - Guía - - HTML+ARIA - - Navegação+Teclado - - WAI-ARA - - Widgets -translation_of: Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets ---- -

A Rede Mundial está mudando. Estatísticamente, os sítios baseados em páginas estão, cada vez mais, sendo repostos por aplicações dinâmicas, em estilo Ambiente, que fazem uso intenso de JavaScript e AJAX. Estilistas estão criando novos widgets e controles inteiramente com a combinação de JavaScript, HTML e CSS. Este salto tem o potencial de aperfeiçoar, dramaticamente, a capacidade de resposta e a usabilidade da Rede, mas milhares de utilizadores estão sob o risco de exclusão, devido a algumas lacunas na acessibilidade. A JavaScript tem, tradicionalmente, tido a reputação de ser inviável para quem usa tecnologias assistivas, como leitores de tela mas, agora, existem maneiras de criar interfaces de utilização dinâmicas acessíveis a uma ampla variedade de pessoas.

- -

O problema

- -

A maior parte do conjunto de ferramentas JavaScript oferece uma biblioteca de utilização de widgets que imita o comportamento de interfaces de Ambiente familiares. Deslizantes, barras de menus, visão de arquivos em lista e muito mais pode ser construído com uma combinação de JavaScript, CSS e HTML. Uma vez que a especificação da HTML 4 não fornece etiquetas integradas (built-in tags) que descrevam estes tipos de widgets semanticamente, os desenvolvedores recorrem ao uso de elementos genéricos, tais como <div> e <span>. Embora isto resulte em um widget que se pareça com seu duplo de ambiente, geralmente não existe informação semântica suficiente, na marcação, para torná-lo utilizável por uma tecnologia assistiva. Teor dinâmico em uma página da Rede Mundial pode ser particularmente problemático para quem, por alguma razão, não pode ver a tela. Cotações de ações, alimentação instantânea de atualizações do twitter, indicadores de progresso e conteúdos similares alteram o DOM, enquanto uma tecnologia assistiva (TA/AT) pode não ser alertada disso. Aqui é onde o conjunto ARIA entra.

- -

Exemplo 1: Marcação para um widget de abas construído sem as indicações ARIA. Não existem informações semânticas, na marcação, que descrevam a sua forma, nem a sua função.

- -
<!-- This is a tabs widget. How would you know, looking only at the markup? -->
-<ol>
-  <li id="ch1Tab">
-    <a href="#ch1Panel">Chapter 1</a>
-  </li>
-  <li id="ch2Tab">
-    <a href="#ch2Panel">Chapter 2</a>
-  </li>
-  <li id="quizTab">
-    <a href="#quizPanel">Quiz</a>
-  </li>
-</ol>
-
-<div>
-  <div id="ch1Panel">Chapter 1 content goes here</div>
-  <div id="ch2Panel">Chapter 2 content goes here</div>
-  <div id="quizPanel">Quiz content goes here</div>
-</div>
- -

Exemplo 2: Como o widget de abas pode ser visto. Seus utilizadores podem reconhecer sua aparência, mas não há semântica legível por mecanismos de tecnologias assistivas.
- Screenshot of the tabs widget

- -

ARIA

- -

As definições para WAI-ARIA Accessible Rich Internet Applications (Aplicações Ricas para uma Internete Acessível), da W3C -  Web Accessibility Initiative (Iniciativa pela Acessibilidade na Rede Mundial/World Wide Web Consortium-W3C) - oferecem uma via para a adição das necessidades semânticas perdidas pelas tecnologias assistivas, como os leitores de tela. O conjunto ARIA possibilita que desenvolvedores possam descrever seus widgets de forma mais detalhada com a inclusão de atributos especiais à marcação. Projetado para preencher a lacuna entre o padrão de rotulagem HTML e os controles com estilo ambiente encontrados em aplicações dinâmicas pela web, o conjunto ARIA fornece funções (roles) e estados (states) que descrevem o comportamento da maioria das interfaces de utilização dos widgets conhecidas.

- -

A especificação ARIA está dividida em três tipos diferentes de atributos: funções (roles), estados (states) e propriedades (properties). As funções (roles) descrevem os widgets que não estão disponíveis de outra forma em HTML 4, como deslizantes, barras de menu, abas e diálogos. As propriedades (properties) descrevem as características desses widgets - se podem ser arrastados (draggable), se existe algum elemento obrigatório, ou se trazem uma janela de explosão (popup) associada. Os estados (states) descrevem a interação atual de um elemento, informando à tecnlogia assistiva se este se encontra ativo, desativado, selecionado, ou oculto.

- -

Os atributos ARIA são projetados para serem interpretados automaticamente pelo navegador e traduzidos para as APIs (Application Programming Interface/Interface de Programação de Aplicativo) de acessibilidade nativas do sistema operacional. Quando o conjunto ARIA está presente as tecnologias assistivas são capazes de reconhecer e interagir com os controles personalizados pela  JavaScript da mesma forma que fazem com os seus equivalentes de ambiente. Isto tem o potencial de oferecer uma experiência de utilização muito mais consistente do que aquela que foi possível nas gerações anteriores das aplicações da Rede, uma vez que os utilizadores de tecnologias assistivas podem empregar todo o seu conhecimento sobre o funcionamento das aplicações de ambiente, ao usar aquelas que são baseadas na web.

- -

Exemplo 3: Marcação para um widget de abas com os atributos ARIA adicionados:

- -
<!-- Now *these* are Tabs! -->
-<!-- We've added role attributes to describe the tab list and each tab. -->
-<ol role="tablist">
-  <li id="ch1Tab" role="tab">
-    <a href="#ch1Panel">Chapter 1</a>
-  </li>
-  <li id="ch2Tab" role="tab">
-    <a href="#ch2Panel">Chapter 2</a>
-  </li>
-  <li id="quizTab" role="tab">
-    <a href="#quizPanel">Quiz</a>
-  </li>
-</ol>
-
-<div>
-  <!-- Notice the role and aria-labelledby attributes we've added to describe these panels. -->
-  <div id="ch1Panel" role="tabpanel" aria-labelledby="ch1Tab">Chapter 1 content goes here</div>
-  <div id="ch2Panel" role="tabpanel" aria-labelledby="ch2Tab">Chapter 2 content goes here</div>
-  <div id="quizPanel" role="tabpanel" aria-labelledby="quizTab">Quiz content goes here</div>
-</div>
-
- -

O conjunto ARIA tem suporte nas últimas versões de todos os maiores navegadores, incluindo Firefox, Safari, Opera, Chrome e Internet Explorer. Muitas das tecnologias assistivas, como as de código aberto NVDA e os leitores de tela Orca, da mesma foma, trazem suporte ao ARIA. Progressivamente, as bibliotecas  JavaScript para widget, tais como  jQuery UI, YUI, Google Closure e Dojo Dijit também incluem as marcações ARIA.

- -

Mudanças na apresentação

- -

Mudanças de apresentação dinâmicas agregam o uso de CSS para alterar a aparência do conteúdo (uma borda vermelha em volta de algum dado inválido, ou a troca da cor de fundo de uma caixa de seleção já marcada), bem como quando um item é exibido, ou escondido.

- -

Mudanças de estado

- -

O conjunto ARIA provê atributos para declarar o estado atual da interface de utilização de um widget. Os exemplos abrangem (mas não são apenas estes, com certeza( :

- - - -

(Para uma lista completa de estados ARIA, consulte a ARIA list of states and properties (lista de estados e propriedades ARIA).

- -

Os desenvolvedores devem dar preferência ao uso dos estados ARIA para indicar a situação atual dos elementos widgets na interface de utilização (UI) e os seletores de atributos CSS para alterar a sua aparência, com base nas mudanças desses estados (em vez de usar um roteiro (script) para mudar um nome de classe de um elemento).

- -

A Open Ajax Alliance (OAA - Aliança OpenAJAX ) disponibiliza um exemplo de um seletor de atributos CSS baseado nos estados ARIA (em inglês) - an example of CSS attribute selectors based on ARIA states. O exemplo mostra a interface de um editor WYS/WYG com um sistema de menu dinâmico. Os itens selecionados no menu, como o tipo de fonte estão, visualmente, distintos dos outros. As partes importantes do exemplo são explicadas a seguir.

- -

Neste exemplo, a HTML para um menu tem a forma exibida abaixo. Note como, nas linhas 7 e 13, a propriedade (property) aria-checked é usada para declarar o estado da seleção dos itens do menu.

- -

Exemplo 1a: HTML para um menu selecionável (adaptado da  http://www.oaa-accessibility.org/example/25/).

- -
<ul id="fontMenu" class="menu" role="menu" aria-hidden="true">
-  <li id="sans-serif"
-      class="menu-item"
-      role="menuitemradio"
-      tabindex="-1"
-      aria-controls="st1"
-      aria-checked="true">Sans-serif</li>
-  <li id="serif"
-      class="menu-item"
-      role="menuitemradio"
-      tabindex="-1"
-      aria-controls="st1"
-      aria-checked="false">Serif</li>
-  ...
-
- -

A CSS usada para alterar a aparência do item selecionado é mostrada no Exemplo 1b. Perceba que não existe um nome de classe (classname) de personalização, apenas o estado do atributo aria-checked, na linha 1.

- -

Exemplo 1b: Seletor baseado em atributo para indicar um estado (da  http://www.oaa-accessibility.org/example/25/).

- -
li[aria-checked="true"] {
-  font-weight: bold;
-  background-image: url('images/dot.png');
-  background-repeat: no-repeat;
-  background-position: 5px 10px;
-}
-
- -

O  JavaScript para atualizar a propriedade aria-checked tem a forma exibida no Exemplo 1c. Repare que o roteiro (script) apenas atualiza o atributo aria-checked (linhas 3 e 8); também não é necessário adicionar, ou remover, um nome de classe personalizada.

- -

Exemplo 1c: A  JavaScript atualiza o atributo aria-checked  (baseado em  http://www.oaa-accessibility.org/example/25/).

- -
var processMenuChoice = function(item) {
-  // 'check' the selected item
-  item.setAttribute('aria-checked', 'true');
-  // 'un-check' the other menu items
-  var sib = item.parentNode.firstChild;
-  for (; sib; sib = sib.nextSibling ) {
-    if ( sib.nodeType === 1 && sib !== item ) {
-      sib.setAttribute('aria-checked', 'false');
-    }
-  }
-};
-
- -

Alterações visuais

- -

Quando o conteúdo visual é alterado (isto é, um elemento é escondido, ou mostrado), os desenvolvedores devem mudar o valor da propriedade aria-hidden. As técnicas descritas acima devem ser usadas, a fim de declarar a CSS para ocultar um elemento utilizando display:none (exibir:nenhum).

- -

O sítio da Open Ajax Alliance fornece um exemplo de uma dica de tela (tooltip) que utiliza o estado aria-hidden para controlar a sua visibilidade (em inglês) an example of a tooltip that uses aria-hidden to control the visibility of the tooltip. O exemplo mostra um formulário web simples, com caixas de dicas de tela contendo instruções associadas aos campos de entrada. As partes relevantes deste exemplo estão explicadas abaixo.

- -

Aqui, a HTML para a dica de tela tem a forma exibida no Exemplo 2a. A linha 9 configura o estado da aria-hidden para true.

- -

Exemplo 2a: HTML para dicas de tela (adaptado de  http://www.oaa-accessibility.org/example/39/).

- -
<div class="text">
-    <label id="tp1-label" for="first">First Name:</label>
-    <input type="text" id="first" name="first" size="20"
-           aria-labelledby="tp1-label"
-           aria-describedby="tp1"
-           aria-required="false" />
-    <div id="tp1" class="tooltip"
-         role="tooltip"
-         aria-hidden="true">Your first name is optional</div>
-</div>
-
- -

A CSS para esta marcação está explicada no Exemplo 2b. Veja que não há uso de classname personalizada, apenas o estado do atributo aria-hidden, na linha 1.

- -

Exemplo 2b:  Seletor basedo em atributo para indicar um estado  (de http://www.oaa-accessibility.org/example/39/).

- -
div.tooltip[aria-hidden="true"] {
-  display: none;
-  }
-
- -

O JavaScript que atualiza a propriedade aria-hidden tem a forma exposta no Exemplo 2c. Observe que o roteiro apenas atualiza o atributo aria-hidden (linha 2); não é necessário adicionar, nem remover, uma classname customizada.

- -

Exemplo 2c: JavaScript para atualização do atributo aria-checked (com base em http://www.oaa-accessibility.org/example/39/).

- -
var showTip = function(el) {
-  el.setAttribute('aria-hidden', 'false');
-}
- -

Mudança de Atributo (Role)

- -
Em construção
- -

O conjunto ARIA possibilita que os desenvolvedores possam declarar uma função semântica para um elemento que, de outro modo, não a apresentaria, ou a ofereceria de forma incorreta. Por exemplo, quando alguma lista desordenada é utilizada para criar um menu, à {{ HTMLElement("ul") }} deve ser dada uma role de menubar e cada {{ HTMLElement("li") }} deve ter uma role de menuitem.

- -

O papel (role) de um elemento não deve mudar. Em vez disso, remova o elemento original e ocupe seu lugar com um elemento que tenha a função (role) nova.

- -

Por exemplo, considere um widget de edição "inline": um componente que possibilita que seus utilizadores sejam capazes de editar uma parte de um texto, sem mudar toda a composição. Este componente carrega o modo "visualizar", no qual o texto não pode ser modificado, mas pode ser ativado e um modo "editar", no qual o texto pode ser alterado. Se você o desenvolve, pode ter a tentação de implementar o modo "visualizar" com o uso do elemento texto "somente leitura"  {{ HTMLElement("input") }}, definindo a sua ARIA role para button e, em seguida, alternando para o modo "editar", para tornar o elemento apto à gravação e removendo o atributo role no modo "editar" (desde que os elementos {{ HTMLElement("input") }} tenham as suas próprias funções semânticas).

- -

Não faça isso. Em substituição, implemente o modo "visualizar" usando um elemento completamente diferente, tal como uma {{ HTMLElement("div") }}, ou {{ HTMLElement("span") }} com uma role de button e o modo « edit » utilizando um elemento texto {{ HTMLElement("input") }}.

- -

Mudanças assíncronas de conteúdo

- -
Em construção. Veja, também, Regiões Dinâmicas
- - - -

Muitas vezes, os desenvolvedores negligenciam o suporte ao teclado quando criam widgets personalizados. Para ser acessível a uma gama maior de pessoas, todas as configurações de uma aplicação web, ou de um widget, devem oferecer controles pelo teclado, sem a necessidade de um rato. Na prática isto, frequentemente, envolve as convenções suportadas por widgets similares, de ambiente, tirando plena vantagem das teclas Tab, Entra, Barra de Espaço e Setas.

- -

Tradicionalmente, a navegação pelo teclado na web tem sido limitada à tecla Tab, que é pressionada para dar foco a cada botão, vínculo, ou formulário na página, em uma ordenação linear e Shift-Tab para navegar em sentido contrário (navegação regresssiva). É uma forma unidimensional de navegação - para frente e para trás, um elemento por vez. Em páginas mais pesadas, alguém que navegue apenas pelo teclado deve pressioná-lo dezenas de vezes antes de alcançar a seção desejada. Implementar as convenções para teclado no modelo ambiente, para a web, tem o potencial de tornar a navegação significativamente mais rápida para essas pessoas.

- -

Aqui está um resumo sobre como a navegação pelo teclado deve funcionar, com a habilitação do conjunto ARIA, na aplicação web:

- - - -

Assim, para o exemplo de widget de abas acima, a pessoa que estiver navegando deve ser capaz de entrar e sair da caixa que o contém usando as teclas "Tab" e "Shift+Tab" ( a <ol> na nossa marcação). Uma vez que o foco, pelo teclado, estiver dentro do contêiner, as teclas de setas devem permitir a navegação entre as suas diferentes guias (os elementos <li> ). A partir daqui as convenções variam de plataforma para plataforma. No Windows, a próxima aba deve ser ativada, automaticamente, quando as teclas de setas forem pressionadas. Em Mac OS X, seus utilizadores ativam a próxima aba pressionando a tecla "Entra", ou a "barra de espaço". Um  tutorial abrangente, para a criação de widgets, com navegação pelo teclado, descreve como implementar esse comportamento utilizando JavaScript Keyboard-navigable JavaScript widgets (JavaScript para widgets navegáveis pelo teclado).

- -

Para mais detalhes sobre as convenções da navegação pelo teclado em modelo ambiente, um guia completo (em inglês) DHTML style guide (guia de estilos da HTML Dinâmica) está disponível. Este guia oferece uma visão global de como a navegação pelo teclado deve funcionar em cada tipo de widget suportado pelo conjunto ARIA. A  W3C também oferece um documento que ajuda muito, ARIA Best Practices, incluindo a navegação pelo teclado e as convenções de atalhos para uma variedade de widgets.

- -

Veja, também

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

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/web/acessibilidade/entendendo_wcag/index.html b/files/pt-br/web/acessibilidade/entendendo_wcag/index.html deleted file mode 100644 index 392c1008b7..0000000000 --- a/files/pt-br/web/acessibilidade/entendendo_wcag/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: Entendendo as Diretrizes de Acessibilidade do Conteúdo Web -slug: Web/Acessibilidade/Entendendo_WCAG -tags: - - WCAG - - Web Content Accessibility Guidelines -translation_of: Web/Accessibility/Understanding_WCAG ---- -

Este conjunto de artigos fornece explicações rápidas para ajudá-lo a entender as etapas que devem ser seguidas para estar em conformidade com as recomendações descritas nas Diretrizes de Acessibilidade para Conteúdo Web 2.0 ou 2.1 do W3C (ou apenas WCAG, para as finalidades deste artigo).

- -

O WCAG 2.0 e 2.1 fornece um conjunto detalhado de diretrizes para tornar o conteúdo web mais acessível para pessoas com uma ampla variedade de deficiências. Isso é compreensivo, porém incrivelmente detalhado e muito difícil de obter uma compreensão rápida disso. Por essa razão, nós fizemos uma sumário com os passos práticosque você precisa saber para satisfazer as diferentes recomendações, com mais alguns link para mais detalhes do que está sendo solicitado.

- -

Os quatro princípios

- -

WCAG is broadly broken down into four principles — major things that web content must be to be considered accessible (see Understanding the Four Principles of Accessibility for the WCAG definitions).

- -

Each of the links below will take you to pages that further expand on these areas, giving you practical advice on how to write your web content so it conforms to the success criteria outlined in each of the WCAG 2.0 and 2.1 guidelines that further sub-divides each principle.

- - - -

Should I use WCAG 2.0 or 2.1?

- -

WCAG 2.1 is the most recent and relevant accessibility standard. Use WCAG 2.1 to help more people with disabilities and reduce the future legal risk for web site owners. Target WCAG 2.0 first when allocating resources. Then step up to WCAG 2.1. 

- -

O que é o WCAG 2.1?

- -

WCAG 2.1 was published as an official recommendation on 05 June 2018. The European Union (EU) adopted WCAG 2.1 as the digital accessibility standard in September 2018. W3C published a press release WCAG 2.1 Adoption in Europe. 

- -

WCAG 2.1 includes:

- - - - - -

This guide is intended to provide practical information to help you build better, more accessible websites. However, we are not lawyers, and none of this constitutes legal advice. If you are worried about the legal implications of web accessibility, we'd recommend that you check the specific legislation governing accessibility for the web/public resources in your country or locale, and seek the advice of a qualified lawyer.

- -

O que é acessibilidade? e particulamente o Guia de Acessibilidade e a seção de regras fornecem mais informações relacionadas.

diff --git a/files/pt-br/web/acessibilidade/entendendo_wcag/keyboard/index.html b/files/pt-br/web/acessibilidade/entendendo_wcag/keyboard/index.html deleted file mode 100644 index 905c6d062f..0000000000 --- a/files/pt-br/web/acessibilidade/entendendo_wcag/keyboard/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: Keyboard -slug: Web/Acessibilidade/Entendendo_WCAG/Keyboard -translation_of: Web/Accessibility/Understanding_WCAG/Keyboard ---- -
To be fully accessible, a web page must be operable by someone using only a keyboard to access and control it. This includes users of screen readers, but can also include users who have trouble operating a pointing device such as a mouse or trackball, or whose mouse is not working at the moment, or who simply prefer to use a keyboard for input whenever possible.
- -

Focusable elements should have interactive semantics

- -

If an element can be focused using the keyboard, then it should be interactive; that is, the user should be able to do something to it and produce a change of some kind (for example, activating a link or changing an option).

- -
-

Note: One important exception to this rule is if the element has role="document" applied to it, inside an interactive context (such as role="application"). In such a case, focusing the nested document is the only way of returning assistive technology to a non-interactive state (often called "browse mode").

-
- -

Most interactive elements are focusable by default; you can make an element focusable by adding a tabindex=0 attribute value to it. However, you should only add tabindex if you have also made the element interactive, for example, by defining appropriate event handlers keyboard events.

- -

See also

- - - -

Avoid using tabindex attribute greater than zero

- -

The tabindex attribute indicates that an element is focusable using the keyboard. A value of zero indicates that the element is part of the default focus order, which is based on the ordering of elements in the HTML document. A positive value puts the element ahead of those in the default ordering; elements with positive values are focused in the order of their tabindex values (1, then 2, then 3, etc.).

- -

This creates confusion for keyboard-only users when the focus order differs from the logical order of the page. A better strategy is to structure the HTML document so that focusable elements are in a logical order, without the need to re-order them with positive tabindex values.

- -

See also

- - - -

Clickable elements must be focusable and should have interactive semantics

- -

If an element can be clicked with a pointing device, such as a mouse, then it should also be focusable using the keyboard, and the user should be able to do something by interacting with it.

- -

An element is clickable if it has an onclick event handler defined. You can make it focusable by adding a tabindex=0 attribute value to it. You can make it operable with the keyboard by defining an onkeydown event handler; in most cases, the action taken by event handler should be the same for both types of events.

- -

See also

- - - -

Interactive elements must be able to be activated using a keyboard

- -

If the user can interact with an element using touch or a pointing device, then the element should also support interacting using the keyboard. That is, if you have defined event handlers for touch or click events, you should also define them for keyboard events. The keyboard event handlers should enable the effectively the same interaction as the touch or click handlers.

- -

See also

- - - -

Interactive elements must be focusable

- -

If the user can interact with an element (for example, using touch or a pointing device), then it should be focusable using the keyboard. You can make it focusable by adding a tabindex=0 attribute value to it. That will add the element to the list of elements that can be focused by pressing the Tab key, in the sequence of such elements as defined in the HTML document.

- -

See also

- - - -

Focusable element must have focus styling

- -

Any element that can receive keyboard focus should have visible styling that indicates when the element is focused. You can do this with the :focus CSS pseudo-class.

- -

Standard focusable elements such as links and input fields are given special styling by the browser by default, so you might not need to specify focus styling for such elements, unless you want the focus styling to be more distinctive.

- -

If you create your own focusable components, be sure that you also define focus styling for them.

- -

See also

- - diff --git a/files/pt-br/web/acessibilidade/index.html b/files/pt-br/web/acessibilidade/index.html deleted file mode 100644 index b494b06163..0000000000 --- a/files/pt-br/web/acessibilidade/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: Acessibilidade -slug: Web/Acessibilidade -tags: - - ARIA - - Acessibilidade - - Avançado - - Desenvolvimento Web - - TA - Tecnologias Assistivas -translation_of: Web/Accessibility ---- -

Acessiblidade no desenvolvimento Web significa permitir que o máximo possível de pessoas possa acessar os sites da web mesmo quando suas habilidades são limitadas de alguma forma. Aqui nós fornecemos informações sobre o desenvolvimento de conteúdo acessível.

- -

"A palavra Acessibilidade é, frequentemente, usada para descrever facilidades ou assistências às pessoas com necessidades especiais, como em acessível para cadeirantes. Isto pode se estender para o Sistema Braille, rampas para cadeirantes, sinais sonoros em passagens de pedestres, modelos de páginas e assim por diante". Acessibilidade na Wikipedia

- -

"A Web é, fundamentalmente, projetada para funcionar para todas as pessoas, independentemente de máquina, programas, língua, cultura, localização ou capacidade física ou mental de seus utilizadores. Quando a web atende a esses requisitos, ela se torna acessível a pessoas com dificuldades auditivas, motoras, visuais e cognitivas". W3C - Acessibilidade

- -
-
-

Documentação

- -
-
Desenvolvimento Web
-
Uma coleção de artigos destinados a mostrar as principais questões de desenvolvimento web no mundo da acessibilidade.
-
ARIA
-
Uma coleção de artigos para aprender como usar ARIA e tornar seus documentos HTML mais acessíveis.
-
Desenvolvimento de tecnologias assistivas (TA)
-
Uma coleção de artigos direcionados a desenvolvedores de tecnologias assistivas.
-
Acessibilidade em dispositivos móveis
-
Esse documento fornece uma breve lista das necessidades da acessibilidade para desenvolvedores de aplicativos móveis.
-
- -

Ver todos os artigos sobre Acessibilidade...

-
- -
-

Ferramentas para desenvolvedores web

- - - - - -

Outras páginas úteis

- - -
-
diff --git a/files/pt-br/web/acessibilidade/problemas_com_jaws_no_firefox/index.html b/files/pt-br/web/acessibilidade/problemas_com_jaws_no_firefox/index.html deleted file mode 100644 index 65fe989377..0000000000 --- a/files/pt-br/web/acessibilidade/problemas_com_jaws_no_firefox/index.html +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: Problemas com JAWS no Firefox -slug: Web/Acessibilidade/Problemas_com_JAWS_no_Firefox -tags: - - Acessibilidade - - Obsolento -translation_of: Web/Accessibility/JAWS_Issues_with_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/web/api/api_de_desempenho/index.html b/files/pt-br/web/api/api_de_desempenho/index.html deleted file mode 100644 index 1b6997e293..0000000000 --- a/files/pt-br/web/api/api_de_desempenho/index.html +++ /dev/null @@ -1,138 +0,0 @@ ---- -title: API de Desempenho -slug: Web/API/API_de_Desempenho -translation_of: Web/API/Performance_API ---- -
{{DefaultAPISidebar("High Resolution Time")}}
- -

The High Resolution Time standard defines a {{domxref("Performance")}} interface that supports client-side latency measurements within applications. The {{domxref("Performance")}} interfaces are considered high resolution because they are accurate to a thousandth of a millisecond (subject to hardware or software constraints). The interfaces support a number of use cases including calculating frame-rates (potentially important in animations) and benchmarking (such as the time to load a resource).

- -

Since a platform's system clock is subject to various skews (such as NTP adjustments), the interfaces support a monotonic clock i.e. a clock that is always increasing. As such, the Performance API defines a {{domxref("DOMHighResTimeStamp")}} type rather than using the {{jsxref("Date.now","Date.now()")}} interface.

- -

DOMHighResTimeStamp

- -

The {{domxref("DOMHighResTimeStamp")}} type, as its name implies, represents a high resolution point in time. This type is a double and is used by the performance interfaces. The value could be a discrete point in time or the difference in time between two discrete points in time.

- -

The unit of DOMHighResTimeStamp is milliseconds and should be accurate to 5 µs (microseconds). However, If the browser is unable to provide a time value accurate to 5 microseconds (because, for example, due to hardware or software constraints), the browser can represent the value as a time in milliseconds accurate to a millisecond.

- -

Methods

- -

The {{domxref("Performance")}} interface has two methods. The {{domxref("Performance.now","now()")}} method returns a {{domxref("DOMHighResTimeStamp")}} whose value that depends on the {{domxref("PerformanceTiming.navigationStart","navigation start")}} and scope. If the scope is a window, the value is the time the browser context was created and if the scope is a {{domxref("Worker","worker")}}, the value is the time the worker was created.

- -

The {{domxref("Performance.toJSON","toJSON()")}} method returns a serialization of the {{domxref("Performance")}} object, for those attributes that can be serialized.

- -

Properties

- -

The {{domxref("Performance")}} interface has two properties. The {{domxref("Performance.timing","timing")}} property returns a {{domxref("PerformanceTiming")}} object containing latency-related performance information such as the start of navigation time, start and end times for redirects, start and end times for responses, etc.

- -

The {{domxref("Performance.navigation","navigation")}} property returns a {{domxref("PerformanceNavigation")}} object representing the type of navigation that occurs in the given browsing context, such as the page was navigated to from history, the page was navigated to by following a link, etc.

- -

Interfaces

- -
-
{{domxref('Performance')}}
-
Provides methods and properties containing timing-related performance information for the given page.
-
{{domxref('PerformanceEntry')}}
-
Provides methods and properties the encapsulate a single performance metric that is part of the performance timeline.
-
{{domxref('PerformanceFrameTiming')}}
-
Provides methods and properties containing frame timing data about the browser's event loop.
-
{{domxref('PerformanceMark')}}
-
An abstract interface for performance entries with an entry type of "mark". Entries of this type are created by calling performance.mark() to add a named DOMHighResTimeStamp (the mark) to the browser's performance timeline.
-
{{domxref('PerformanceMeasure')}}
-
An abstract interface for performance entries with an entry type of "measure". Entries of this type are created by calling performance.measure() to add a namedDOMHighResTimeStamp (the measure) between two marks to the browser's performance timeline.
-
{{domxref('PerformanceNavigationTiming')}}
-
Provides methods and properties to store and retrieve high resolution timestamps or metrics regarding the browser's document navigation events.
-
{{domxref('PerformanceObserver')}}
-
Provides methods and properties used to observe performance measurement events and be notified of new performance entries as they are recorded in the browser's performance timeline.
-
{{domxref('PerformanceResourceTiming')}}
-
Provides methods and properties for retrieving and analyzing detailed network timing data regarding the loading of an application's resources.
-
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Highres Time')}}{{Spec2('Highres Time')}}Initial definition.
{{SpecName('Highres Time Level 2')}}{{Spec2('Highres Time Level 2')}}Adds performance attribute on Window and WorkerGlobalScope.
{{SpecName('Highres Time Level 3')}}{{Spec2('Highres Time Level 3')}}Add timeOrigin property to Performance interface.
{{SpecName('Frame Timing')}}{{Spec2('Frame Timing')}}Adds PerformanceFrameTiming interface.
{{SpecName('Navigation Timing')}}{{Spec2('Navigation Timing')}}Adds the PerformanceTiming and PerformanceNavigation interfaces. Adds timing and navigation properties to the Performance interface.
{{SpecName('Navigation Timing Level 2')}}{{Spec2('Navigation Timing Level 2')}}Adds the PerformanceNavigationTiming interface. Obsolete's the the PerformanceTiming interface, the PerformanceNavigation interface, as well as the timing and navigation properties to the Performance interface.
{{SpecName('Performance Timeline')}}{{Spec2('Performance Timeline')}}Adds the PerformanceEntry interface, the PerformanceEntryList type, as well as the getEntries(), getEntriesByType(), and getEntriesByName() methods on the Performance interface.
{{SpecName('Performance Timeline Level 2')}}{{Spec2('Performance Timeline Level 2')}}Adds serializer to the PerformanceEntry interface as well as adding the PerformanceObserver interface and callback
{{SpecName('Resource Timing')}}{{Spec2('Resource Timing')}}Adds the PerformanceResourceTiming interface. Adds the clearResourceTimings() method, the setResourceTimingBufferSize() method, and the onresourcetimingbufferfull event handler to the Performance interface. Also adds the Timing-Allow-Origin response header.
{{SpecName('Resource Timing 2')}}{{Spec2('Resource Timing 2')}}Adds the nextHopProtocol, workerStart, transferSize, encodedBodySize, and decodedBodySize properties to the PerformanceResourceTiming interface.
{{SpecName('Resource Timing 3')}}{{Spec2('Resource Timing 3')}}
{{SpecName('User Timing')}}{{Spec2('User Timing')}}Adds mark(), clearMarks(), measure() and clearMeasures() methods to the Performance interface. Adds the PerformanceMark and PeformanceMeasure interfaces.
{{SpecName('User Timing Level 2')}}{{Spec2('User Timing Level 2')}}
- -

Implementation status

- -

As shown in the {{domxref("Performance")}} interface's Browser Compatibility table, most of these interfaces are broadly implemented by desktop browsers.

- -

To test your browser's support for the {{domxref("Performance")}} interface, run the perf-api-support application.

- -

See Also

- - diff --git a/files/pt-br/web/api/api_push/best_practices/index.html b/files/pt-br/web/api/api_push/best_practices/index.html deleted file mode 100644 index 9b0fafd2b7..0000000000 --- a/files/pt-br/web/api/api_push/best_practices/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: Melhores práticas -slug: Web/API/API_Push/Best_Practices -tags: - - Apps - - Iniciante - - Melhores Práticas - - Notificações - - Push API - - Usabilidade -translation_of: Web/API/Push_API/Best_Practices ---- -

{{draft}}

- -

Este artigo proporciona um compilado das melhores práticas a serem usadas enquanto estiver desenvolvendo websites e aplicações que usem Notificações push para engajamento de usuários.

- -
-

“Se feito de uma maneira correta, as notificações ajudam os usuarios, se não, so irritam.” — Conversa entre dois desenvolvedores a respeito da etica das notificações push.

-
- -

Visão Geral do web push notifications

- -

Notificações Web Push (criadas usando uma combinação das APIs de Notificações, Push e Service Worker) são parte de um movimento crescente em que desenvolvedores e comerciantes estão usando para conseguir atenção para seus sites. Uma procura rápida pelo termo "web push notifications", irá resultar em vários artigos, em que especialistas em marketing que acreditam que deve-se usar a API de Push para recapturar a atenção de pessoas que saíram de seu site para que possam terminar o que estavam fazendo, por exemplo, uma compra, ou então enviar as últimas notícias e até recomendação de produtos

- -

O Lado obscuro

- -

Essa novidade oferece uma oportunidade nova e inexplorada para sites empresariais chegarem aos seus consumidores finais. Seu usuário trocou de aba para responder um email? Consiga-os de volta com uma oferta que expira em um tempo limitado ou oferecendo frete grátis, o qual ele não vai poder ignorar

- -

Mas sério, qual o melhor uso das notificações push? Ou é apenas uma nova interação dos bons e velhos pop-ups?

- -
-

“O envio de notificações push não corre o risco de acabar na pasta de spam. Nem pode ser bloqueado por bloqueadores de anúncios. Ele aparece na sua área de trabalho, mesmo quando o site está fechado. No celular, ele aparece na barra de notificações, assim como as notificações por push do aplicativo, mesmo quando o navegador não está em execução.” — um site de marketing anonimo

-
- -

Bons usos das notificações

- -

Mas há também um lado bom no que se diz respeito as notificações por push. Digamos que você e sua equipe usem normalmente um programa de bate-papo para se comunicar, mas hoje você está feliz e saltitante trabalhando e surge um problema. Digamos que seu gerente tenha encontrado um problema nas aprovações e queira receber seu feedback sobre algo antes que ela prossiga.

- -

Neste documento, falaremos sobre o uso correto das notificações por push da web. Às vezes, eles podem eliminar a frustração e o aborrecimento e, às vezes, causá-los. Cabe a você, como desenvolvedor, fazer recomendações (e decisões) sábias sobre o uso de notificações por push.

- -

O que se espera alcançar com as notificações push?

- -

Como tudo, com grande poder vem uma grande responsabilidade. Toda notificação push devem ser úteis e sensíveis ao tempo, o usuário sempre deve fornecer a permissão antes de recebe-la primeiro e deve-se oferecer uma maneira fácil de optar por não receber mais no futuro.

- -

Temos que responder algumas perguntas basicas para verificar se as notificações são necessarias:

- - - -

Além da questão de saber se uma notificação por push é necessária, existem muitas variedades de notificações por push, variando de casual e efêmera a persistente e exigente.

- -

Aconselhamos que você use as notificações que exigem uma interação de forma conciente e com moderação, pois estas podem irritar seu usuario e afasta-lo. Suas notificações devem ser acolhedoras, não hostis.

- -

Gerando confiança

- -

Alguns estudos mostraram que até 60% das notificações por push não chegam ao usuário final. Permitir que seu usuario receba notificações por push em tempo real exige confiança, por parte do aplicativo. Você pode criar confiança ao ter um site bem projetado que forneça um bom conteúdo e que mostre respeito pelo usuário alem de um valor claro para que o usuario aceite as notificações push.

- -

Mitigações dos navegadores

- -

Por causa dos abusos da utilização das notificações por push no passado, os desenvolvedores de navegadores começaram a implementar estratégias para ajudar a mitigar esse problema. Por exemplo, o Safari 12.1 agora exige - e outros navegadores já o fazem ou estão planejando[1] fazer—que o usuário interaja com a página de alguma forma antes que ela possa solicitar permissão para executar notificações por push, assim como já acontece com os popups. Isso pelo menos impede que o usuário receba espontaneamente essa pergunta em páginas da Web que apenas olharam de uma só vez, raramente ou nunca mais.

- -

[1] No caso do Firefox, veja {{bug(1524619)}}, podemos observar que Firefox 68 implementa isso, desabilitado por padrão, usando a preferência dom.webnotifications.requireuserinteraction.

- -

Veja também

- - diff --git a/files/pt-br/web/api/api_push/index.html b/files/pt-br/web/api/api_push/index.html deleted file mode 100644 index 563b711cd8..0000000000 --- a/files/pt-br/web/api/api_push/index.html +++ /dev/null @@ -1,172 +0,0 @@ ---- -title: API Push -slug: Web/API/API_Push -tags: - - API - - Experimental - - Notificações - - Push - - Referencia - - Service Workers -translation_of: Web/API/Push_API ---- -
{{DefaultAPISidebar("Push API")}}{{SeeCompatTable}}
- -

A API Push torna possível que aplicações web recebam mensagens enviadas a elas de um servidor, indepententemente de aplicação estar ou não em primeiro plano, ou até mesmo carregada, em um agente de usuário. Isso permite que desenvolvedores entreguem notificações e atualizações assíncronas a usuários que optarem por elas, resultando num melhor engajamento com conteúdo novo oportuno.

- -
-

Nota: Esta documentação cobre a especificação W3C da API Push; se você procura pela documentação do sistema de notificação proprietária do mecanismo push, veja Simple Push.

-
- -

Conceitos e uso de Push

- -

Para uma aplicação receber mensagens push, ela precisa ter um service worker ativo. Quando o service worker está ativo, ele pode se inscrever para utilizar notificações push {{domxref("PushManager.subscribe()")}}.

- -

O resultado de {{domxref("PushSubscription")}} inclui toda informação que a aplicação precisa para receber uma mensagem push: um endpoint e a chave encriptada necessária para o envio de dados.

- -

O service worker será iniciado conforme o necessário para lidar com as mensagens recebidas, que são entregues ao manipulador de evento {{domxref("ServiceWorkerGlobalScope.onpush")}} . Isto permite que a aplicação reaja a cada mensagem recebida, por exemplo para exibir a notificação ao usuário (usando {{domxref("ServiceWorkerRegistration.showNotification()")}}.)

- -

Cada assinatura é única para um service worker.  O endpoint para a assinatura é uma capability URL única: o conhecimento do endpoint é tudo que é necessário para enviar uma mensagem para sua aplicação. A URL do endpoint precisa ser mantida em segredo, ou outras aplicações estranhas poderão enviar mensagens push para a sua aplicação.

- -

A ativação de um service worker para entregar mensagens push pode resultar em um aumento de uso de recursos, particularmente de bateria. Diferentes navegadores tem diferentes formas para lidar com isso — atualmente não existe uma forma padrão. Firefox permite um número limitado (cota) de mensagens push para serem enviadas para uma aplicação, embora as mensagens Push que gerem notificações são isentas deste limite.  O limite é atualizado a cada site visitado. Numa comparação, Chrome não aplica nenhum limite, mas requer que cada mensagem push exiba uma notificação.

- -
-

Nota: A partir do Gecko 44, a cota permitida de mensagens push por aplicação não é incrementada quando uma nova notificação é disparada quando outra está visível, por um período de três segundos. Isso lida com casos em que várias notificações são recebidas ao mesmo tempo, mas nem todas estão visíveis.

-
- -
-

Nota: Chrome atualmente requer que você crie um projeto no Google Cloud Messaging para enviar mensagens push e use um número do projeto e chave da API para o envio de notificações push. Isto também requer um app manifest com alguns parâmetros especiais para usar o serviço. Essa restrição deverá ser removida no futuro.

-
- -

Interfaces

- -
-
{{domxref("PushEvent")}}
-
Representa uma ação push enviada para o global scope de um {{domxref("ServiceWorker")}}. Ele contém informações enviadas de uma aplicação para um {{domxref("PushSubscription")}}.
-
{{domxref("PushManager")}}
-
Fornece uma forma de receber notificações de servidor third-party bem como solicitar URL para notificações push. Essa interface substitui a funcionalidade oferecida que está obsoleta {{domxref("PushRegistrationManager")}} interface.
-
{{domxref("PushMessageData")}}
-
Fornece acesso aos dados push enviados por um servidor, e inclui métodos para manipular os dados recebidos.
-
{{domxref("PushSubscription")}}
-
Fornece a URL de assinatura do endpoint e permite o cancelamento da assinatura de um serviço push.
-
- -

Service worker additions

- -

As seguintes informações adicionais para a Service Worker API foram especificadas na Push API spec, para fornecer um ponto de entrada para usar mensagens Push, e para monitorar e responder os eventos de envio e assinatura.

- -
-
{{domxref("ServiceWorkerRegistration.pushManager")}} {{readonlyinline}}
-
Retorna uma referência para a interface {{domxref("PushManager")}} para administrar assinaturas push incluindo subscrever, obter uma assinatura ativa e acessar o status de permissão de envio. Este é o ponto de entrada para usar mensagens Push.
-
{{domxref("ServiceWorkerGlobalScope.onpush")}}
-
Um manipulador de eventos disparado sempre que um evento  {{Event("push")}} ocorre; isto é, sempre que uma mensagem do servidor de envio for recebida.
-
{{domxref("ServiceWorkerGlobalScope.onpushsubscriptionchange")}}
-
Um manipulador de eventos disparado sempre que um evento  {{Event("pushsubscriptionchange")}} ocorre; por exemplo, quando uma assinatura push está inválida, ou está prestes a ser invalidada (ex. quando um serviço push service define um tempo de expiração.)
-
- -

Especificações

- - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{SpecName("Push API")}}{{Spec2("Push API")}}Definição Inicial
- -

Compatibilidade em Browsers

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
FuncionalidadeChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suporte básico{{CompatChrome(42.0)}}{{CompatGeckoDesktop(44.0)}}[1]{{CompatNo}}[2]{{CompatUnknown}}{{CompatUnknown}}
{{domxref("PushEvent.data")}},
- {{domxref("PushMessageData")}}		{{CompatNo}}{{CompatGeckoDesktop(44.0)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FuncionalidadeAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Suporte básico{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}[2]{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(42.0)}}
{{domxref("PushEvent.data")}},
- {{domxref("PushMessageData")}}		{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

[1] Atualmente disponível apenas nas versões desktop do Firefox; ainda, mensagens push são encaminhadas apenas quando o Firefox está em execução.

- -

[2] Ainda não implementado. Veja Microsoft Edge status information.

- -

Veja também

- - diff --git a/files/pt-br/web/api/api_web_audio/index.html b/files/pt-br/web/api/api_web_audio/index.html deleted file mode 100644 index 8f582eb524..0000000000 --- a/files/pt-br/web/api/api_web_audio/index.html +++ /dev/null @@ -1,480 +0,0 @@ ---- -title: API Web Áudio -slug: Web/API/API_Web_Audio -tags: - - Web Audio API - - api de áudio - - áudio api - - áudio web -translation_of: Web/API/Web_Audio_API ---- -
-

A API de áudio da web disponibiliza um poderoso e versátil sistema de controle de áudio para a Web, permitindo aos desenvolvedores escolher arquivos de áudio, adicionar efeitos a estes arquivos, criar reprodutores de áudio, aplicar spatial effects (como panning) e muito mais.

-
- -

Web audio: conceitos e uso

- -

A API de Web audio envolve manipulação de operações com áudio dentro de um contexto de áudio, e foi desenvolvida para permitir o roteamento modular. Operações básicas de áudio são feitas com audio nodes (nós de áudio), que são ligados para formar gráficos de roteamento de áudio. Várias fontes - com diferentes tipos de layout de canal - são suportados mesmo em um único contexto. Este design modular permite flexibilidade para criar funções de áudio complexas com efeitos dinâmicos.

- -

Audio nodes são ligados pelas suas entradas e saídas, formando uma cadeia que começa com uma ou mais fontes, passa por um ou mais nodes e então acaba em um destino (embora você não tenha que fornecer um destino, por exemplo, se você quiser apenas visualizar alguns dados de áudio). Um fluxo de trabalho simples, com Web áudio, seria algo parecido com isso:

- -
    -
  1. Crie um contexto de áudio
    2. -
  2. Dentro do contexto, crie fontes de áudio — como <audio>, oscilador, stream
    3. -
  3. Crie efeitos de áudio, como reverb, biquad filter, panner, compressor
    4. -
  4. Escolha o destino final de áudio, por exemplo os auto-falantes de seu sistema
    5. -
  5. Conecte as fontes de áudio com os efeitos, e os efeitos com o destino.
    6. -
- -

A simple box diagram with an outer box labeled Audio context, and three inner boxes labeled Sources, Effects and Destination. The three inner boxes have arrow between them pointing from left to right, indicating the flow of audio information.

- -

O sincronismo é controlado com alta precisão e baixa latência, permitindo aos desenvolvedores escrever códigos que respondam com precisão a eventos e capazes de gerar exemplos específicos, mesmo com uma alta taxa de amostragem. Dessa forma, aplicações como baterias eletrônicas e seqüenciadores estarão facilmente ao alcance dos desenvolvedores.

- -

A API de Web Audio também permite o controle de como o áudio será ordenado. Usando um sistema baseado em um modelo de source-listener, a API permite controlar os painéis de modelo para serem usados e tratados com atenuação de distância induzida ou doppler shift induzido por uma fonte em movimento (ou um ouvinte em movimento).

- -
-

Nota: Você pode ver mais detalhes sobre a teoria da API de Web Audio em nosso artigo Basic concepts behind Web Audio API.

-
- -

Web Audio: Interfaces da API

- -

A API de Web Audio possui um total de 28 interfaces e eventos associados, que nós dividimos e categorizamos em 9 funcionalidades.

- -

Definições gerais de grafos de áudio (audio graph)

- -

Definições gerais que moldam os grafos de áudio no uso da API de Web Audio.

- -
-
{{domxref("AudioContext")}}
-
A interface AudioContext representa um grafo de processamento de áudio construído a partir de módulos de áudio ligados entre si, cada um representado por um {{domxref("AudioNode")}}. Um contexto de áudio (audio context) controla a criação dosnós que ele contém e a execução do processamento de áudio, ou a decodificação. Como tudo acontece dentro de um contexto, você deve criar um AudioContext antes de fazer qualquer outra coisa.
-
{{domxref("AudioNode")}}
-
A interface AudioNode representa um módulo de processamento de áudio como uma fonte de áudio (por exemplo, um HTML {{HTMLElement("áudio")}} ou um elemento {{HTMLElement("vídeo")}}), destino de áudio, módulo de processamento intermediário (por exemplo, um filtro como {{domxref("BiquadFilterNode")}}, ou controle de volume, como {{domxref("GainNode")}}).
-
{{domxref("AudioParam")}}
-
A interface AudioParam representa um parâmetro relacionado ao áudio, como um parâmetro de um {{domxref("AudioNode")}}. Ele pode ser configurado com um valor específico ou uma mudança de valor, e pode ser programado para "acontecer" em um momento específico e seguindo um padrão específico.
-
{{event("ended_(Web_Audio)", "ended")}} (event)
-
O evento ended é disparado quando a reprodução parou porque o fim da mídia foi atingido.
-
- -

Definindo fontes de áudio

- -

Interfaces que definem fontes de áudio para uso na API de Web Audio.

- -
-
{{domxref("OscillatorNode")}}
-
A interface OscillatorNode representa uma onda senoidal. Esta interface é um módulo de processamento de áudio que gera uma onda senoidal com determinada frequência.
-
{{domxref("AudioBuffer")}}
-
A interface AudioBuffer representa uma pequena porção de áudio armazenada na memória, criada a partir de um arquivo de áudio usando o método {{ domxref("AudioContext.decodeAudioData()") }}, ou criado com os dados brutos usando o método {{ domxref("AudioContext.createBuffer()") }}. Uma vez decodificado neste formato o áudio pode ser colocada em um {{ domxref("AudioBufferSourceNode") }}.
-
{{domxref("AudioBufferSourceNode")}}
-
A interface AudioBufferSourceNode representa uma fonte de áudio que consiste em dados de áudio na memória, armazenados em um {{domxref ("AudioBuffer")}}. É um {{domxref ("AudioNode")}} que atua como uma fonte de áudio.
-
{{domxref("MediaElementAudioSourceNode")}}
-
A interface MediaElementAudioSourceNode  representa uma fonte de audio consiste de um HTML5 {{ htmlelement("audio") }} ou {{ htmlelement("video") }} elemento. É uma {{domxref("AudioNode")}} que atua como uma fonte de áudio.
-
{{domxref("MediaStreamAudioSourceNode")}}
-
The MediaStreamAudioSourceNode interface represents an audio source consisting of a WebRTC {{domxref("MediaStream")}} (such as a webcam or microphone.) It is an {{domxref("AudioNode")}} that acts as an audio source.
-
- -

Definindo filtros de efeitos de áudio

- -

Interfaces para definição de efeitos que você deseja aplicar em suas fontes de áudio.

- -
-
{{domxref("BiquadFilterNode")}}
-
The BiquadFilterNode interface represents a simple low-order filter. It is an {{domxref("AudioNode")}} that can represent different kinds of filters, tone control devices or graphic equalizers. A BiquadFilterNode always has exactly one input and one output.
-
{{domxref("ConvolverNode")}}
-
The ConvolverNode interface is an {{domxref("AudioNode")}} that performs a Linear Convolution on a given AudioBuffer, often used to achieve a reverb effect.
-
{{domxref("DelayNode")}}
-
The DelayNode interface represents a delay-line; an {{domxref("AudioNode")}} audio-processing module that causes a delay between the arrival of an input data and its propagation to the output.
-
{{domxref("DynamicsCompressorNode")}}
-
The DynamicsCompressorNode interface provides a compression effect, which lowers the volume of the loudest parts of the signal in order to help prevent clipping and distortion that can occur when multiple sounds are played and multiplexed together at once.
-
{{domxref("GainNode")}}
-
The GainNode interface represents a change in volume. It is an {{domxref("AudioNode")}} audio-processing module that causes a given gain to be applied to the input data before its propagation to the output.
-
{{domxref("WaveShaperNode")}}
-
The WaveShaperNode interface represents a non-linear distorter. It is an {{domxref("AudioNode")}} that use a curve to apply a waveshaping distortion to the signal. Beside obvious distortion effects, it is often used to add a warm feeling to the signal.
-
{{domxref("PeriodicWave")}}
-
Used to define a periodic waveform that can be used to shape the output of an {{ domxref("OscillatorNode") }}.
-
- -

Definindo destinos de áudio

- -

Uma vez que você tenha feito o processamento do seu áudio, estas interfaces definirão aonde será a saída do áudio.

- -
-
{{domxref("AudioDestinationNode")}}
-
The AudioDestinationNode interface represents the end destination of an audio source in a given context — usually the speakers of your device.
-
{{domxref("MediaStreamAudioDestinationNode")}}
-
The MediaElementAudioSourceNode interface represents an audio destination consisting of a WebRTC {{domxref("MediaStream")}} with a single AudioMediaStreamTrack, which can be used in a similar way to a MediaStream obtained from {{ domxref("Navigator.getUserMedia") }}. It is an {{domxref("AudioNode")}} that acts as an audio destination.
-
- -

Análise dos dados e visualização

- -

Se você deseja extrair tempo, frequencia e outras informações do seu áudio, o AnalyserNode é o que você necessita.

- -
-
{{domxref("AnalyserNode")}}
-
The AnalyserNode interface represents a node able to provide real-time frequency and time-domain analysis information, for the purposes of data analysis and visualization.
-
- -

Dividindo e mesclando canais de áudio

- -

Para dividir e mesclar canais de áudio, você utilizará essas interfaces.

- -
-
{{domxref("ChannelSplitterNode")}}
-
The ChannelSplitterNode interface separates the different channels of an audio source out into a set of mono outputs.
-
{{domxref("ChannelMergerNode")}}
-
The ChannelMergerNode interface reunites different mono inputs into a single outputs. Each input will be used to fill a channel of the output.
-
- -

Audio spatialization

- -

These interfaces allow you to add audio spatialization panning effects to your audio sources.

- -
-
{{domxref("AudioListener")}}
-
The AudioListener interface represents the position and orientation of the unique person listening to the audio scene used in audio spatialization.
-
{{domxref("PannerNode")}}
-
The PannerNode interface represents the behavior of a signal in space. It is an {{domxref("AudioNode")}} audio-processing module describing its position with right-hand Cartesian coordinates, its movement using a velocity vector and its directionality using a directionality cone.
-
- -

Processamento de áudio por JavaScript

- -

Se você quiser usar um script externo para processar sua fonte de áudio, Node e eventos abaixo tornarão isto possível.

- -
-
{{domxref("ScriptProcessorNode")}}
-
The ScriptProcessorNode interface allows the generation, processing, or analyzing of audio using JavaScript. It is an {{domxref("AudioNode")}} audio-processing module that is linked to two buffers, one containing the current input, one containing the output. An event, implementing the {{domxref("AudioProcessingEvent")}} interface, is sent to the object each time the input buffer contains new data, and the event handler terminates when it has filled the output buffer with data.
-
{{event("audioprocess")}} (event)
-
The audioprocess event is fired when an input buffer of a Web Audio API {{domxref("ScriptProcessorNode")}} is ready to be processed.
-
{{domxref("AudioProcessingEvent")}}
-
The Web Audio API AudioProcessingEvent represents events that occur when a {{domxref("ScriptProcessorNode")}} input buffer is ready to be processed.
-
- -

Áudio offline

- -

Manipular áudio offline é possível com estas interfaces.

- -
-
{{domxref("OfflineAudioContext")}}
-
The OfflineAudioContext interface is an {{domxref("AudioContext")}} interface representing an audio-processing graph built from linked together {{domxref("AudioNode")}}s. In contrast with a standard AudioContext, an OfflineAudioContext doesn't really render the audio but rather generates it, as fast as it can, in a buffer.
-
{{event("complete")}} (event)
-
The complete event is fired when the rendering of an {{domxref("OfflineAudioContext")}} is terminated.
-
{{domxref("OfflineAudioCompletionEvent")}}
-
The OfflineAudioCompletionEvent represents events that occur when the processing of an {{domxref("OfflineAudioContext")}} is terminated. The {{event("complete")}} event implements this interface.
-
- -

Interfaces obsoletas

- -

As interfaces a seguir foram definidas em versões antigas das especificações da API de Web Audio, mas agora elas estão obsoletas e serão substituidas por outras interfaces.

- -
-
{{domxref("JavaScriptNode")}}
-
Used for direct audio processing via JavaScript. This interface is obsolete, and has been replaced by {{domxref("ScriptProcessorNode")}}.
-
{{domxref("WaveTableNode")}}
-
Used to define a periodic waveform. This interface is obsolete, and has been replaced by {{domxref("PeriodicWave")}}.
-
- -

Exemplo

- -

Este exemplo mostra uma grande variedade de funções da API de Web Audio que podem ser utilizadas. Você pode ver este código em ação na demo Voice-change-o-matic (também verificar o código-fonte completo no Github) - esta é uma demonstração de um modificador de voz de brinquedo experimental; aconselhamos manter seus alto-falantes baixo ao utilizá-lo, pelo menos para começar!

- -

As linhas API de Web Audio estão destacadas; se você quiser encontrar mais informações sobre os diferentes métodos, faça uma busca através das páginas de referência.

- -
var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); // define audio context
-// Webkit/blink browsers need prefix, Safari won't work without window.
-
-var voiceSelect = document.getElementById("voice"); // select box for selecting voice effect options
-var visualSelect = document.getElementById("visual"); // select box for selecting audio visualization options
-var mute = document.querySelector('.mute'); // mute button
-var drawVisual; // requestAnimationFrame
-
-var analyser = audioCtx.createAnalyser();
-var distortion = audioCtx.createWaveShaper();
-var gainNode = audioCtx.createGain();
-var biquadFilter = audioCtx.createBiquadFilter();
-
-function makeDistortionCurve(amount) { // function to make curve shape for distortion/wave shaper node to use
-  var k = typeof amount === 'number' ? amount : 50,
-    n_samples = 44100,
-    curve = new Float32Array(n_samples),
-    deg = Math.PI / 180,
-    i = 0,
-    x;
-  for ( ; i < n_samples; ++i ) {
-    x = i * 2 / n_samples - 1;
-    curve[i] = ( 3 + k ) * x * 20 * deg / ( Math.PI + k * Math.abs(x) );
-  }
-  return curve;
-};
-
-navigator.getUserMedia (
-  // constraints - only audio needed for this app
-  {
-    audio: true
-  },
-
-  // Success callback
-  function(stream) {
-    source = audioCtx.createMediaStreamSource(stream);
-    source.connect(analyser);
-    analyser.connect(distortion);
-    distortion.connect(biquadFilter);
-    biquadFilter.connect(gainNode);
-    gainNode.connect(audioCtx.destination); // connecting the different audio graph nodes together
-
-    visualize(stream);
-    voiceChange();
-
-  },
-
-  // Error callback
-  function(err) {
-    console.log('The following gUM error occured: ' + err);
-  }
-);
-
-function visualize(stream) {
-  WIDTH = canvas.width;
-  HEIGHT = canvas.height;
-
-  var visualSetting = visualSelect.value;
-  console.log(visualSetting);
-
-  if(visualSetting == "sinewave") {
-    analyser.fftSize = 2048;
-    var bufferLength = analyser.frequencyBinCount; // half the FFT value
-    var dataArray = new Uint8Array(bufferLength); // create an array to store the data
-
-    canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
-
-    function draw() {
-
-      drawVisual = requestAnimationFrame(draw);
-
-      analyser.getByteTimeDomainData(dataArray); // get waveform data and put it into the array created above
-
-      canvasCtx.fillStyle = 'rgb(200, 200, 200)'; // draw wave with canvas
-      canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
-
-      canvasCtx.lineWidth = 2;
-      canvasCtx.strokeStyle = 'rgb(0, 0, 0)';
-
-      canvasCtx.beginPath();
-
-      var sliceWidth = WIDTH * 1.0 / bufferLength;
-      var x = 0;
-
-      for(var i = 0; i < bufferLength; i++) {
-
-        var v = dataArray[i] / 128.0;
-        var y = v * HEIGHT/2;
-
-        if(i === 0) {
-          canvasCtx.moveTo(x, y);
-        } else {
-          canvasCtx.lineTo(x, y);
-        }
-
-        x += sliceWidth;
-      }
-
-      canvasCtx.lineTo(canvas.width, canvas.height/2);
-      canvasCtx.stroke();
-    };
-
-    draw();
-
-  } else if(visualSetting == "off") {
-    canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
-    canvasCtx.fillStyle = "red";
-    canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
-  }
-
-}
-
-function voiceChange() {
-  distortion.curve = new Float32Array;
-  biquadFilter.gain.value = 0; // reset the effects each time the voiceChange function is run
-
-  var voiceSetting = voiceSelect.value;
-  console.log(voiceSetting);
-
-  if(voiceSetting == "distortion") {
-    distortion.curve = makeDistortionCurve(400); // apply distortion to sound using waveshaper node
-  } else if(voiceSetting == "biquad") {
-    biquadFilter.type = "lowshelf";
-    biquadFilter.frequency.value = 1000;
-    biquadFilter.gain.value = 25; // apply lowshelf filter to sounds using biquad
-  } else if(voiceSetting == "off") {
-    console.log("Voice settings turned off"); // do nothing, as off option was chosen
-  }
-
-}
-
-// event listeners to change visualize and voice settings
-
-visualSelect.onchange = function() {
-  window.cancelAnimationFrame(drawVisual);
-  visualize(stream);
-}
-
-voiceSelect.onchange = function() {
-  voiceChange();
-}
-
-mute.onclick = voiceMute;
-
-function voiceMute() { // toggle to mute and unmute sound
-  if(mute.id == "") {
-    gainNode.gain.value = 0; // gain set to 0 to mute sound
-    mute.id = "activated";
-    mute.innerHTML = "Unmute";
-  } else {
-    gainNode.gain.value = 1; // gain set to 1 to unmute sound
-    mute.id = "";
-    mute.innerHTML = "Mute";
-  }
-}
-
- -

Especificações

- - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{SpecName('Web Audio API')}}{{Spec2('Web Audio API')}} 
- -

Compatibilidade de navegadores

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support14 {{property_prefix("webkit")}}23{{CompatNo}}15 {{property_prefix("webkit")}}
- 22 (unprefixed)		6 {{property_prefix("webkit")}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChromeFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Basic support{{CompatNo}}28 {{property_prefix("webkit")}}251.2{{CompatNo}}{{CompatNo}}6 {{property_prefix("webkit")}}
-
- -

 

- -

Veja também

- - - - diff --git a/files/pt-br/web/api/api_web_audio/sintetizador_simples/index.html b/files/pt-br/web/api/api_web_audio/sintetizador_simples/index.html deleted file mode 100644 index b0fdf2a0c4..0000000000 --- a/files/pt-br/web/api/api_web_audio/sintetizador_simples/index.html +++ /dev/null @@ -1,579 +0,0 @@ ---- -title: 'Tutorial e exemplo: Teclado de Sintetizador Simples' -slug: Web/API/API_Web_Audio/Sintetizador_simples -tags: - - Audio - - Exemplo - - Guía - - Media - - Oscilador - - Piano - - Sintetizador - - Tutorial - - Web Audio API -translation_of: Web/API/Web_Audio_API/Simple_synth ---- -
{{DefaultAPISidebar("Web Audio API")}}
- -

Este artigo apresenta o código e uma demonstração funcional de um teclado que você pode tocar usando seu mouse. O teclado lhe permite alternar entre formas de onda padrões e customizadas. Esse exemplo utiliza das seguintes interfaces de Web API: {{domxref("AudioContext")}}, {{domxref("OscillatorNode")}}, {{domxref("PeriodicWave")}}, e {{domxref("GainNode")}}.

- -

Já que {{domxref("OscillatorNode")}} é baseado no {{domxref("AudioScheduledSourceNode")}}, isso até certo ponto também é um exemplo pra isto.

- -

O Teclado Visual

- -

HTML

- -

Existem três componentes primários para o display do nosso teclado virtual. O primeito do qual é o teclado musical em si. Nós extraimos em um par de elementos {{HTMLElement("div")}} aninhados para permitir a rolagem horizontal caso as teclas não encaixem na tela.

- -

O Teclado

- -

Primeiro, criamos o espaço no qual construiremos o teclado. Estaremos construindo o teclado programaticamente, considerando que ao fazer desse jeito teremos a flexibilidade de configurar cada tecla conforme determinamos as informações apropriadas para tecla correspondente. No nosso caso, pegamos a frequência de cada tecla através de uma tabela, mas poderia ser calculado de forma algoritmica também.

- -
<div class="container">
-  <div class="keyboard"></div>
-</div>
-
- -

O {{HTMLElement("div")}} nomeado de "container" é a barra de rolagem que permite o teclado ser rolado horizontalmente se for largo demais para o espaço disponivel. As teclas em si serão inseridas no bloco de classe "keyboard".

- -

A barra de opções

- -

Abaixo do teclado, colocaremos alguns controles para configurar o camada. Por enquanto, teremos dois controles: Um para controlar o volume e outro para selecionar a forma de onda periodica usada ao gerar as notas.

- -
O controle de volume
- -

Primeiro criamos o <div> para conter a barra de opções, para ser personalizado conforme preciso. Então estabelecemos uma caixa que será apresentada no lado esquerdo da barra e colocar um rotulo e um elemento {{HTMLElement("input")}} do tipo "range". O elemento range será tipicamente apresentado como o controle da barra de rolagem ; configuramos ele para permitir qualquer valor entre 0.0 e 1.0 em cada posição.

- -
<div class="settingsBar">
-  <div class="left">
-    <span>Volume: </span>
-    <input type="range" min="0.0" max="1.0" step="0.01"
-        value="0.5" list="volumes" name="volume">
-    <datalist id="volumes">
-      <option value="0.0" label="Mute">
-      <option value="1.0" label="100%">
-    </datalist>
-  </div>
-
- -

Especificamos um valor padrão de 0.5, e provemos um elemento {{HTMLElement("datalist")}} no qual é conectado ao range usando o atributo {{htmlattrxref("name")}} para achar uma lista de opções cujo ID encaixa; nesse caso, o conjunto de informações é nomeado de "volume". isso nos permite prover um conjunto de valores comuns e strings especiais que o browser pode de forma opcional escolher mostrar de alguma maneira; e então atribuimos nomes aos valores 0.0 ("Mute") e 1.0 ("100%").

- -
A seleção de forma de onda
- -

E no lado da barra de configurações, colocamos um rótulo e um elemento {{HTMLElement("select")}} nomeado de "waveform" cujas opções correspondem as formas de onda disponiveis.

- -
  <div class="right">
-    <span>Current waveform: </span>
-    <select name="waveform">
-      <option value="sine">Sine</option>
-      <option value="square" selected>Square</option>
-      <option value="sawtooth">Sawtooth</option>
-      <option value="triangle">Triangle</option>
-      <option value="custom">Custom</option>
-    </select>
-  </div>
-</div>
- - - -

JavaScript

- -

O código em JavaScript começa inicializando algumas váriaveis.

- -
let audioContext = new (window.AudioContext || window.webkitAudioContext)();
-let oscList = [];
-let masterGainNode = null;
-
- -
    -
  1. audioContext é colocado para referenciar o objeto global {{domxref("AudioContext")}} (ou webkitAudioContext se  necessário).
    2. -
  2. oscillators está colocado para conter uma lista de todos os osciladores atualmente tocando. Ele começa nulo, afinal não há nenhum oscilador tocando ainda.
    3. -
  3. masterGainNode é colocado como nulo; durante o processo de setup, ele será configurado para contar um {{domxref("GainNode")}} no quall todos os osciladores irão se conectar para permitir o volume geral a ser controlado por apenas uma barra de rolagem.
    4. -
- -
let keyboard = document.querySelector(".keyboard");
-let wavePicker = document.querySelector("select[name='waveform']");
-let volumeControl = document.querySelector("input[name='volume']");
-
- -

Referencias aos elementos que precisaremos acessar são obtidas através dp:

- - - -
let noteFreq = null;
-let customWaveform = null;
-let sineTerms = null;
-let cosineTerms = null;
-
- -

Enfim, variaveis globais que serão usadas quando as formas de onda são criadas:

- - - -

Criando a tabela de notas

- -

A função createNoteTable() constrói a matriz noteFreq para conter uma matriz de objetos representando cada oitava. Cada oitava, possui uma propriedade para cada nota nessa oitava; O nome dessa propriedade é o nome da nota (utilizando da notação em inglês, como "C" para representar "dó"), e o valor é a frequência, em Hertz, daquela nota.

- -
function createNoteTable() {
-  let noteFreq = [];
-  for (let i=0; i< 9; i++) {
-    noteFreq[i] = [];
-  }
-
-  noteFreq[0]["A"] = 27.500000000000000;
-  noteFreq[0]["A#"] = 29.135235094880619;
-  noteFreq[0]["B"] = 30.867706328507756;
-
-  noteFreq[1]["C"] = 32.703195662574829;
-  noteFreq[1]["C#"] = 34.647828872109012;
-  noteFreq[1]["D"] = 36.708095989675945;
-  noteFreq[1]["D#"] = 38.890872965260113;
-  noteFreq[1]["E"] = 41.203444614108741;
-  noteFreq[1]["F"] = 43.653528929125485;
-  noteFreq[1]["F#"] = 46.249302838954299;
-  noteFreq[1]["G"] = 48.999429497718661;
-  noteFreq[1]["G#"] = 51.913087197493142;
-  noteFreq[1]["A"] = 55.000000000000000;
-  noteFreq[1]["A#"] = 58.270470189761239;
-  noteFreq[1]["B"] = 61.735412657015513;
-
- -

... várias oitavas não mostradas para manter breve ...

- - - -
  noteFreq[7]["C"] = 2093.004522404789077;
-  noteFreq[7]["C#"] = 2217.461047814976769;
-  noteFreq[7]["D"] = 2349.318143339260482;
-  noteFreq[7]["D#"] = 2489.015869776647285;
-  noteFreq[7]["E"] = 2637.020455302959437;
-  noteFreq[7]["F"] = 2793.825851464031075;
-  noteFreq[7]["F#"] = 2959.955381693075191;
-  noteFreq[7]["G"] = 3135.963487853994352;
-  noteFreq[7]["G#"] = 3322.437580639561108;
-  noteFreq[7]["A"] = 3520.000000000000000;
-  noteFreq[7]["A#"] = 3729.310092144719331;
-  noteFreq[7]["B"] = 3951.066410048992894;
-
-  noteFreq[8]["C"] = 4186.009044809578154;
-  return noteFreq;
-}
-
- -

O resultado é uma matriz, noteFreq, com um objeto para cada oitava. Cada objeto de oitava tem propriedades nomeadas nela onde a propriedade é o nome da nota com a notação em inglês (Como "C" para representar "dó") e o valor da propriedade é a frequência da nota em Hertz.. o objeto resultando se parece com isso:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OctaveNotes
0"A" ⇒ 27.5"A#" ⇒ 29.14"B" ⇒ 30.87
1"C" ⇒ 32.70"C#" ⇒ 34.65"D" ⇒ 36.71"D#" ⇒ 38.89"E" ⇒ 41.20"F" ⇒ 43.65"F#" ⇒ 46.25"G" ⇒ 49"G#" ⇒ 51.9"A" ⇒ 55"A#" ⇒ 58.27"B" ⇒ 61.74
2. . .
- -

Com esta tabela no lugar, podemos descobrir a frequência para uma dada nota em uma oitava particular relativamente fácil. Se queremos a frequência pra nota G# na primeira oitava, nós simplesmente usamos  noteFreq[1]["G#"] e conseguimos o valor 51.9 como resultado.

- -
-

Os valores na tabela de exemplo acima foram arredondados para duas casas decimais.

-
- - - -

Construindo o teclado

- -

A função setup() é responsavel por construir o teclado e preparar a aplicação para tocar a música.

- -
function setup() {
-  noteFreq = createNoteTable();
-
-  volumeControl.addEventListener("change", changeVolume, false);
-
-  masterGainNode = audioContext.createGain();
-  masterGainNode.connect(audioContext.destination);
-  masterGainNode.gain.value = volumeControl.value;
-
-  // Create the keys; skip any that are sharp or flat; for
-  // our purposes we don't need them. Each octave is inserted
-  // into a <div> of class "octave".
-
-  noteFreq.forEach(function(keys, idx) {
-    let keyList = Object.entries(keys);
-    let octaveElem = document.createElement("div");
-    octaveElem.className = "octave";
-
-    keyList.forEach(function(key) {
-      if (key[0].length == 1) {
-        octaveElem.appendChild(createKey(key[0], idx, key[1]));
-      }
-    });
-
-    keyboard.appendChild(octaveElem);
-  });
-
-  document.querySelector("div[data-note='B'][data-octave='5']").scrollIntoView(false);
-
-  sineTerms = new Float32Array([0, 0, 1, 0, 1]);
-  cosineTerms = new Float32Array(sineTerms.length);
-  customWaveform = audioContext.createPeriodicWave(cosineTerms, sineTerms);
-
-  for (i=0; i<9; i++) {
-      oscList[i] = {};
-  }
-}
-
-setup();
- -
    -
  1. A tabela que mapeia o nome e oitavas das notas para suas respectivas frequências é criado ao chamar createNoteTable().
    2. -
  2. Um manipulador de eventos é estabelecido ao chamar nosso velho amigo {{domxref("EventTarget.addEventListener", "addEventListener()")}} para cuidar dos eventos do {{event("change")}} no controle de ganho geral. Isso vai simplesmente atualizar o módulo de ganho de volume para o novo valor.
    3. -
  3. Em seguida, nós replicamos cada oitava na tabela de frequências das notas. Para cada oitava, usamos {{jsxref("Object.entries()")}} para conseguir uma lista de notas daquela oitava.
    4. -
  4. Criar um {{HTMLElement("div")}} para contar as notas daquela oitava (para ter um pouco de espaço entre as oitavas), e mudar o nome de classe para "octave".
    5. -
  5. Para cada tecla na oitava, checamos para ver se o nome daquela nota há mais de um caractere. Nós pulamos essas, pois estamos deixando notas sustenidas de fora deste exemplo. Do contrário, chamamos createKey(), especificando uma string, oitava, e frequência. O elemento retornado é anexado na elemento da oitava criada no passo 4.
    6. -
  6. Quando o elemento da oitava é construido, é então anexada ao teclado.
    7. -
  7. Uma vez que o teclado foi construido, nós rolamos para nota "B" na quinta oitava; isso tem o efeito de garantir que o C médio é visivel junto das notas ao redor.
    8. -
  8. Então uma forma de onda customizada é construida usando {{domxref("AudioContext.createPeriodicWave()")}}. Essa forma de onda será usada toda vez que o usuário selecionar "Custom" da seleção de formas de onda.
    9. -
  9. Enfim, a lista de osciladores é iniciada para garantir que está pronta para receber informação identificando quais osciladores estão associados com que teclas.
    10. -
- -

Criando uma tecla

- -

A função createKey()  é chamada toda vez que queremos que uma tecla seja apresentada no nosso teclado virtual. Ela cria elementos da tecla e seu rótulo, adiciona informação dos atributos ao elemento para uso posterior, e coloca modificadores de eventos para os eventos que nos importam.

- -
function createKey(note, octave, freq) {
-  let keyElement = document.createElement("div");
-  let labelElement = document.createElement("div");
-
-  keyElement.className = "key";
-  keyElement.dataset["octave"] = octave;
-  keyElement.dataset["note"] = note;
-  keyElement.dataset["frequency"] = freq;
-
-  labelElement.innerHTML = note + "<sub>" + octave + "</sub>";
-  keyElement.appendChild(labelElement);
-
-  keyElement.addEventListener("mousedown", notePressed, false);
-  keyElement.addEventListener("mouseup", noteReleased, false);
-  keyElement.addEventListener("mouseover", notePressed, false);
-  keyElement.addEventListener("mouseleave", noteReleased, false);
-
-  return keyElement;
-}
-
- -

Após criar  os elementos representando as teclas e seus rótulos, nós configuramos o elemento das teclas ao configurar sua classe para "key" (Que estabelece a aparência). Então adicionamos atributos {{htmlattrxref("data-*")}}  que contém a string da oitava da nota (attribute data-octave), representando a nota a ser tocada (attribute data-note), e frequência (attribute data-frequency) em Hertz. Isso irá nos permitir facilmente pegar informação conforme necessário ao cuidar de eventos.

- -

Fazendo música

- -

Tocando um tom

- -

O trabalho da função playTone() é tocar um tom em uma dada frequência. Isso será usado pelo modificador para eventos acionados nas teclas do teclado, para que toquem as notas apropriadas.

- -
function playTone(freq) {
-  let osc = audioContext.createOscillator();
-  osc.connect(masterGainNode);
-
-  let type = wavePicker.options[wavePicker.selectedIndex].value;
-
-  if (type == "custom") {
-    osc.setPeriodicWave(customWaveform);
-  } else {
-    osc.type = type;
-  }
-
-  osc.frequency.value = freq;
-  osc.start();
-
-  return osc;
-}
-
- -

O playTone() começa criando um novo {{domxref("OscillatorNode")}} ao chamar o método {{domxref("AudioContext.createOscillator()")}}. Então conectamos ele para o módulo de ganha geral ao chamar o novo método de osciladores {{domxref("OscillatorNode.connect()")}} method;, Que determina ao oscilador onde ele irá mandar seu output. Ao fazer isso, mudar o valor do ganho do módulo de ganho geral irá mudar o volume de todos os toms gerados.

- -

Então conseguimos o tipo de forma de onda para usar ao checar o valor do controle de seleção de formas de onda na barra de opções. Se o usuário estiver colocado como "custom", chamamos {{domxref("OscillatorNode.setPeriodicWave()")}} para configurar os osciladores para usar nossa forma de onda customizada. Fazer isso automáticamente coloca o {{domxref("OscillatorNode.type", "type")}} do oscilador como custom. Se qualquer outro tipo de forma de onda é selecionado na seleção de formas de ondas, nós simplesmente colocamos os tipos de osciladores no valor da seleção, esse valor será um entre sine, square, triangle, e sawtooth.

- -

A frequência do oscilador é colocada no valor especificado no paramêtro freq ao colocar o valor dos objetos {{domxref("Oscillator.frequency")}} {{domxref("AudioParam")}} . Então, enfim, o oscilador é iniciado e começa a produzir sons ao chamar o método {{domxref("AudioScheduledSourceNode.start()")}} .

- -

Tocando um tom

- -

Quando o evento {{event("mousedown")}} ou {{domxref("mouseover")}} ocorre em uma tecla, queremos que toque a nota correspondente. A função notePressed() é usada como o modificador de eventos para esses eventos.

- -
function notePressed(event) {
-  if (event.buttons & 1) {
-    let dataset = event.target.dataset;
-
-    if (!dataset["pressed"]) {
-      let octave = +dataset["octave"];
-      oscList[octave][dataset["note"]] = playTone(dataset["frequency"]);
-      dataset["pressed"] = "yes";
-    }
-  }
-}
-
- -

Começamos checando se o botão esquerdo do mouse é pressionado, por dois motivos. Primeiro, queremos que apenas o botão esquerdo acione as notas. Segundo, e mais importante, estamos usando isso para cuidar do {{event("mouseover")}} para casos onde o usuário arrasta de tecla a tecla, e só queremos tocar uma nota se o mouse estiver pressionado quando entrar no elemento.

- -

Se o botão do mouse estiver de fato sendo pressionado, recebemos o atributo de tecla pressionada {{htmlattrxref("dataset")}} ; isso torna fácil o acesso das informações de atributo customizadas no elemento. Procuramos por um atributo data-pressed ; caso não haja um(o que indica que a nota não está tocando ainda), chamamos playTone() para começar a tocar a nota, passando no valor dos elementos do atributo data-frequency. O valor retornado do oscilador é guardado no oscList para refêrencia futura, e data-pressed é colocado como yes para indicar que a nota está tocando para que não iniciemos novamente na próxima vez que isso for chamado.

- -

Parando um tom

- -

A função noteReleased() é o modificador de eventos chamado quando o usuário solta o botão do mouse ou move o mouse para fora da tecla que ele está tocando.

- -
function noteReleased(event) {
-  let dataset = event.target.dataset;
-
-  if (dataset && dataset["pressed"]) {
-    let octave = +dataset["octave"];
-    oscList[octave][dataset["note"]].stop();
-    delete oscList[octave][dataset["note"]];
-    delete dataset["pressed"];
-  }
-}
-
- -

noteReleased() usa os atributos customizados data-octave and data-note  para procurar os osciladores das teclas, e então chama o método de oscilador {{domxref("AudioScheduledSourceNode.stop", "stop()")}} para parar de tocar a nota. Finalmente, a entrada oscList para nota é limpa e o atributo data-pressed é removido do elemento da tecla (como identificado pelo {{domxref("event.target")}}), para indicar que a nota não está tocando no momento.

- -

Mudando o volume geral

- -

A barra de rolagem do volume na barra de opções dá uma simples interface para mudar o valor do ganho no módulo de ganho geral, então mudando o volume de todas as notas sendo tocadas. O metódo changeVolume() é o modificador do evento {{event("change")}} na barra de rolagem.

- -
function changeVolume(event) {
-  masterGainNode.gain.value = volumeControl.value
-}
-
- -

Isso simplesmente coloca o valor do módulo de ganho geral gain {{domxref("AudioParam")}} para o novo valor na barra de rolagem.

- -

Resultado

- -

Coloque tudo junto, o resultado é um simples e funcional teclado virtual que funciona com o clique:

- -

{{ EmbedLiveSample('The_video_keyboard', 680, 200) }}

- -

Veja também

- - diff --git a/files/pt-br/web/api/audiocontext/currenttime/index.html b/files/pt-br/web/api/audiocontext/currenttime/index.html deleted file mode 100644 index 71f3c9c894..0000000000 --- a/files/pt-br/web/api/audiocontext/currenttime/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: AudioContext.currentTime -slug: Web/API/AudioContext/currentTime -tags: - - API - - AudioContext - - Propriedade - - Referencia - - Web Audio API - - currentTime -translation_of: Web/API/BaseAudioContext/currentTime ---- -

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

- -
-

The currentTime read-only property of the {{ domxref("AudioContext") }} interface returns a double representing an ever-increasing hardware timestamp in seconds that can be used for scheduling audio playback, visualizing timelines, etc. It starts at 0.

-
- -

Syntax

- -
var audioCtx = new AudioContext();
-console.log(audioCtx.currentTime);
-
- -

Exemplo:

- -
var AudioContext = window.AudioContext || window.webkitAudioContext;
-var audioCtx = new AudioContext();
-// Older webkit/blink browsers require a prefix
-
-...
-
-console.log(audioCtx.currentTime);
-
- -

Especificações:

- - - - - - - - - - - - - - -
Especificações:StatusComentario
{{SpecName('Web Audio API', '#widl-AudioContext-currentTime', 'currentTime')}}{{Spec2('Web Audio API')}} 
- -

Compatibilidade:

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0{{property_prefix("webkit")}}
- 22 (unprefixed)		6.0{{property_prefix("webkit")}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}33.0
- -

 

-
- -

Veja também:

- - diff --git a/files/pt-br/web/api/baseaudiocontext/currenttime/index.html b/files/pt-br/web/api/baseaudiocontext/currenttime/index.html new file mode 100644 index 0000000000..71f3c9c894 --- /dev/null +++ b/files/pt-br/web/api/baseaudiocontext/currenttime/index.html @@ -0,0 +1,114 @@ +--- +title: AudioContext.currentTime +slug: Web/API/AudioContext/currentTime +tags: + - API + - AudioContext + - Propriedade + - Referencia + - Web Audio API + - currentTime +translation_of: Web/API/BaseAudioContext/currentTime +--- +

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

+ +
+

The currentTime read-only property of the {{ domxref("AudioContext") }} interface returns a double representing an ever-increasing hardware timestamp in seconds that can be used for scheduling audio playback, visualizing timelines, etc. It starts at 0.

+
+ +

Syntax

+ +
var audioCtx = new AudioContext();
+console.log(audioCtx.currentTime);
+
+ +

Exemplo:

+ +
var AudioContext = window.AudioContext || window.webkitAudioContext;
+var audioCtx = new AudioContext();
+// Older webkit/blink browsers require a prefix
+
+...
+
+console.log(audioCtx.currentTime);
+
+ +

Especificações:

+ + + + + + + + + + + + + + +
Especificações:StatusComentario
{{SpecName('Web Audio API', '#widl-AudioContext-currentTime', 'currentTime')}}{{Spec2('Web Audio API')}} 
+ +

Compatibilidade:

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0{{property_prefix("webkit")}}
+ 22 (unprefixed)		6.0{{property_prefix("webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}33.0
+ +

 

+
+ +

Veja também:

+ + diff --git a/files/pt-br/web/api/battery_status_api/index.html b/files/pt-br/web/api/battery_status_api/index.html new file mode 100644 index 0000000000..603750f72c --- /dev/null +++ b/files/pt-br/web/api/battery_status_api/index.html @@ -0,0 +1,58 @@ +--- +title: Battery Status API +slug: WebAPI/Battery_Status +tags: + - API + - Apps + - Batería + - Firefox OS + - Guia(2) + - Guía + - Mobile + - Obsoleto +translation_of: Web/API/Battery_Status_API +--- +
{{obsolete_header}}
+ +
{{DefaultAPISidebar("Battery API")}}
+ +

A API Battery Status, mais conhecida como Battery API, fornece informações sobre o nível de carga da bateria presente no sistema e permite que você seja notificado por eventos que são enviados quando os níveis sofrem alterações. Isto pode ser usado para ajustar a utilização de recursos do seu aplicativo, reduzindo a quantidade de energia drenada por ele quando a bateria estiver em nível baixo, ou ainda para salvar mudanças antes da bateria acabar, prevenindo a perda de dados.

+ +

A API Battery Status API estende {{domxref("Window.navigator")}} com uma propriedade {{domxref("Navigator.battery")}} que é um objeto {{domxref("BatteryManager")}},  e adiciona alguns novos eventos que você pode receber para monitorar o status da bateria.

+ +

Exemplo

+ +

Neste exemplo, nós observamos as mudanças em ambos os status de carregamento (se estamos ou não conectados e carregando) e para mudanças no nível da bateria. Isto é feito escutando pelos eventos {{event("chargingchange")}} e {{event("levelchange")}}, respectivamente.

+ +
var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery;
+
+function updateBatteryStatus() {
+  console.log("Status da bateria: " + battery.level * 100 + " %");
+
+  if (battery.charging) {
+    console.log("A bateria está carregando");
+  }
+}
+
+battery.addEventListener("chargingchange", updateBatteryStatus);
+battery.addEventListener("levelchange", updateBatteryStatus);
+updateBatteryStatus();
+
+ +

Veja também o exemplo na especificação.

+ +

Especificações

+ +

{{page("/pt-BR/docs/Web/API/BatteryManager","Specifications")}}

+ +

Compatibilidade entre navegadores

+ +

{{page("/pt-BR/docs/Web/API/BatteryManager","Browser_compatibility")}}

+ +

Veja também

+ + diff --git a/files/pt-br/web/api/batterymanager/ondischargingtimechange/index.html b/files/pt-br/web/api/batterymanager/ondischargingtimechange/index.html new file mode 100644 index 0000000000..4f5c402588 --- /dev/null +++ b/files/pt-br/web/api/batterymanager/ondischargingtimechange/index.html @@ -0,0 +1,35 @@ +--- +title: BatteryManager.ondischargingtimechange +slug: Web/API/BatteryManager/ondischargintimechange +tags: + - API + - Battery API + - Event Handler + - Propriedade + - Referencia +translation_of: Web/API/BatteryManager/ondischargingtimechange +--- +

{{APIRef("Battery API")}}

+ +

Especifica um event listener para receber eventos {{event("dischargingtimechange")}}. Esses eventos ocorrem quando a propriedade {{domxref("BatteryManager.dischargingTime","dischargingTime")}} (tempo de descarregamento) da bateria é atualizada.

+ +

Sintaxe

+ +
navigator.battery.ondischargingtimechange = funcRef
+ +

Onde funcRef é uma função para ser chamada quando o evento {{event("dischargingtimechange")}} ocorre.

+ +

Especificações

+ +

{{page("/pt-BR/docs/Web/API/BatteryManager","Specifications")}}

+ +

Compatibilidade entre navegadores

+ +

{{page("/pt-BR/docs/Web/API/BatteryManager","Browser_compatibility")}}

+ +

Veja também

+ + diff --git a/files/pt-br/web/api/batterymanager/ondischargintimechange/index.html b/files/pt-br/web/api/batterymanager/ondischargintimechange/index.html deleted file mode 100644 index 4f5c402588..0000000000 --- a/files/pt-br/web/api/batterymanager/ondischargintimechange/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: BatteryManager.ondischargingtimechange -slug: Web/API/BatteryManager/ondischargintimechange -tags: - - API - - Battery API - - Event Handler - - Propriedade - - Referencia -translation_of: Web/API/BatteryManager/ondischargingtimechange ---- -

{{APIRef("Battery API")}}

- -

Especifica um event listener para receber eventos {{event("dischargingtimechange")}}. Esses eventos ocorrem quando a propriedade {{domxref("BatteryManager.dischargingTime","dischargingTime")}} (tempo de descarregamento) da bateria é atualizada.

- -

Sintaxe

- -
navigator.battery.ondischargingtimechange = funcRef
- -

Onde funcRef é uma função para ser chamada quando o evento {{event("dischargingtimechange")}} ocorre.

- -

Especificações

- -

{{page("/pt-BR/docs/Web/API/BatteryManager","Specifications")}}

- -

Compatibilidade entre navegadores

- -

{{page("/pt-BR/docs/Web/API/BatteryManager","Browser_compatibility")}}

- -

Veja também

- - diff --git a/files/pt-br/web/api/canvas_api/a_basic_ray-caster/index.html b/files/pt-br/web/api/canvas_api/a_basic_ray-caster/index.html new file mode 100644 index 0000000000..ca188eb6f9 --- /dev/null +++ b/files/pt-br/web/api/canvas_api/a_basic_ray-caster/index.html @@ -0,0 +1,76 @@ +--- +title: A basic ray-caster +slug: Web/HTML/Canvas/A_basic_ray-caster +translation_of: Web/API/Canvas_API/A_basic_ray-caster +--- +
{{CanvasSidebar}}
+ +
+

Esse artigo disponibiliza um exemplo interessante do mundo real do uso do elemento {{HTMLElement("canvas")}} para fazer renderização via software de um ambiente em 3D utilizando ray-casting.

+
+ +

{{EmbedGHLiveSample("canvas-raycaster/index.html", 900, 300)}}

+ +

Abrir em uma nova janela

+ +

Porquê?

+ +

Depois de perceber, para meu deleite, que o elemento <canvas> que eu estava lendo sobre ele não estava apenas próximo de ser suportado pelo Firefox, mas que já estava com suporte na versão atual do Safari, eu tinha que tentar que fazer um pequeno teste.

+ +

A visão geral do canvas e o tutorial que eu encontrei no MDN são incríveis, mas ninguém havia escrito sobre animação, então eu pensei que poderia portar um exemplo de raycaster básico que eu havia trabalhado um tempo atrás, e ver e ver que tipo de performance nós podemos esperar te um pixel buffer controlado por JavaScript.

+ +

 

+ +

Como?

+ +

A ideia básica é usar o {{domxref("window.setInterval","setInterval()")}} com um delay arbitrário que corresponda a uma taxa de atualização desejada. Depois de cada intervalo uma função de atualização irá redesenhar o canvas mostrando a view atual. Eu sei que poderia ter iniciado com um exemplo mais simples, mas estou certo que o tutorial do canvas vai fazê-lo, e eu queria verificar se poderia fazer isso.

+ +

Sendo assim, a cada atualização, o raycaster verifica se você pressionou qualquer tecla por último, para conservar os cálculos não fazendo casting caso você esteja ocioso. Se você tiver pressionado, então o canvas é limpo, o solo e o céu são desenhados, a posição da câmera e/ou a orientação são atualizados, e os raios são feitos. Como os raios se cruzam paredes, então eles tornam uma tira de tela vertical na cor da parede que eles atingiram, misturado com uma versão mais escura da cor de acordo com a distância para a parede. A altura da fita também é modulada pela distância da câmera para a parede, e é desenhada centrada sobre a linha do horizonte.
+
+ O código que eu acabei com é um amálgama regurgitado dos capítulos de raycaster de um velho André LaMotheTricks do livro de Gurus de Programação de Jogos (ISBN: 0672305070), e um jaspe raycaster que encontrei online, filtrado através da minha compulsão de renomear tudo para que faça sentido Para mim, e todos os ajustes que tinham que ser feitos para fazer as coisas funcionarem bem.

+ +

 

+ +

Resultados

+ +

 

+ +


+ A tela no Safari 2.0.1 apresentou surpreendentemente bem. Com o fator de bloqueio criado para produzir slivers 8 pixels de largura, eu posso executar uma janela de 320 x 240 em 24 fps no meu Apple mini. Firefox 1.5 Beta 1 é ainda mais rápido; Eu posso executar 320 x 240 em 24 fps com 4 pixel slivers. Não exatamente um novo membro da família de software de ID, mas bastante decente considerando que é um ambiente totalmente interpretado, e eu não tenho que se preocupar com a alocação de memória ou modos de vídeo ou rotinas internas de codificação em assembler ou qualquer coisa. O código tenta ser muito eficiente, usando pesquisas de matrizes de valores pré-calculados, mas não sou um guru de otimização, então as coisas provavelmente poderiam ser escritas mais rapidamente.
+
+ Além disso, deixa muito a desejar em termos de tentar ser qualquer tipo de motor de jogo - não há texturas de parede, não sprites, sem portas, nem mesmo teleportadores para chegar a outro nível. Mas estou bastante confiante de que todas essas coisas poderiam ser adicionadas com tempo suficiente. A API de tela aceita a cópia de pixels de imagens, portanto, as texturas parecem possíveis. Vou deixar isso para outro artigo, provavelmente de outra pessoa. =)

+ +

 

+ +

O ray-caster

+ +

 

+ +


+ As pessoas agradáveis ​​aqui têm copiado manualmente meus arquivos para que você possa dar uma olhada, e para o seu prazer de hacking eu postei o conteúdo do arquivo individual como listagem de código (veja abaixo).
+
+ Então você está lá, o fogo até Safari 1.3 ou Firefox 1.5 ou outro navegador que suporta o elemento <canvas> e divirta-se!
+
+ input.js | Level.js | Player.js | RayCaster.html | RayCaster.js | trace.css | trace.js

+ +

 

+ +

 

+ +

 

+ +

 

+ +

See also

+ + diff --git a/files/pt-br/web/api/canvas_api/index.html b/files/pt-br/web/api/canvas_api/index.html new file mode 100644 index 0000000000..821909e726 --- /dev/null +++ b/files/pt-br/web/api/canvas_api/index.html @@ -0,0 +1,134 @@ +--- +title: Canvas +slug: Web/HTML/Canvas +tags: + - API + - Canvas + - Referência(2) +translation_of: Web/API/Canvas_API +--- +

{{CanvasSidebar}}

+ +

A Canvas API provê maneiras de desenhar gráficos via JavaScript e via elemento HTML {{HtmlElement("canvas")}}. Entre outras coisas, ele pode ser utilizado para animação, gráficos de jogos, visualização de dados, manipulação de fotos e processamento de vídeo em tempo real.

+ +

A Canvas API foca amplamente em gráficos 2D. A WebGL API, que também usa o elemento <canvas>, desenha gráficos 2D e 3D acelerados por hardware.

+ +

Exemplo básico

+ +

Este exemplo simples desenha um retângulo verde para um canvas.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +

O método {{domxref("Document.getElementById()")}} pega uma referência para o elemento HTML <canvas>. Em seguida, o método {{domxref("HTMLCanvasElement.getContext()")}} pega o contexto daquele elemento - a coisa sobre a qual o desenho será renderizado.

+ +

O desenho atual é feito usando a interface {{domxref("CanvasRenderingContext2D")}}. A propriedade {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} faz o retângulo verde. O método {{domxref("CanvasRenderingContext2D.fillRect()", "fillRect()")}} coloca seu canto superior direito em (10, 10) e dá a ele o tamanho de 150 unidades de largura e 100 de altura.

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.fillStyle = 'green';
+ctx.fillRect(10, 10, 150, 100);
+
+ +

Resultado

+ +

{{ EmbedLiveSample('Exemplo_básico', 700, 180) }}

+ +

Referência

+ + + +
+

Nota: As interfaces relacionadas ao WebGLRenderingContext são referenciadas sob WebGL.

+
+ +

{{domxref("CanvasCaptureMediaStream")}} é uma interface relacionada.

+ +

Guias e Tutoriais

+ +
+
+
Tutorial Canvas
+
Um tutorial compreensivo abordando o uso básico da API de Canvas e suas funcionalidades avançadas.
+
Mergulhando no Canvas HTML5
+
Uma introdução prática e extensa à API Canvas e WebGL.
+
Guia Canvas
+
Uma referência acessível para a API Canvas.
+
Demonstração: Um ray-caster básico 
+
Uma demonstração de animação ray-tracing usando canvas.
+
Manipulando vídeos usando canvas
+
Combinando {{HTMLElement("video")}} e {{HTMLElement("canvas")}} para manipular dados de vídeo em tempo real.
+
+ +

Bibliotecas

+ +

A API Canvas é extremamente poderosa, mas nem sempre é simples de usar. As bibliotecas listadas abaixo podem fazer a criação de projetos baseados em canvas mais rápida e fácil.

+ + + +
+

Nota: Veja a WebGL API para bibliotecas 2D e 3D que usam WebGL.

+
+ +

Especificações

+ +
+ + + + + + + + + + + + + + + +
EspecificaçõesEstadoComentário
{{SpecName('HTML WHATWG', '#2dcontext', 'the 2D rendering context')}}{{Spec2('HTML WHATWG')}}
+
+ +

Compatibilidade de navegador

+ +

Aplicações Mozilla ganharam suporte para <canvas> a partir do Gecko 1.8 (Firefox 1.5). O elemento foi originalmente introduzido pela Apple para o Dashboard OS X e Safari. O Internet Explorer suporta <canvas> quando inclui-se um script do projeto Explorer Canvas, da google. Google Chrome e Opera 9 também suportam <canvas>.

+ +

Ver também

+ + diff --git a/files/pt-br/web/api/canvas_api/tutorial/advanced_animations/index.html b/files/pt-br/web/api/canvas_api/tutorial/advanced_animations/index.html new file mode 100644 index 0000000000..23f072420e --- /dev/null +++ b/files/pt-br/web/api/canvas_api/tutorial/advanced_animations/index.html @@ -0,0 +1,386 @@ +--- +title: Advanced animations +slug: Web/Guide/HTML/Canvas_tutorial/Advanced_animations +tags: + - Animation + - Animations + - Canvas + - animated + - efeitos em animações +translation_of: Web/API/Canvas_API/Tutorial/Advanced_animations +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}
+ +
+

No último capítulo nós fizemos algumas animações básicas  e fomos conhecer caminhos para conseguir com que as coisas se movessem. Nesta parte prestaremos mais atenção nos movimentos e vamos adicionar algumas físicas para fazer nossas animações mais avançadas.

+
+ +

Desenhe uma bola

+ +

Nós estamos indo usar uma bola para nossa animação estudada. Então vamos pintar aquela bola desenhada no canvas. O seguinte código configurará.

+ +
<canvas id="canvas" width="600" height="300"></canvas>
+
+ +

 Como usual, nós precisamos de um contexto de desenho primeiro. Para desenhar a bola, nós criaremos um objeto bola ao qual contém propriedades e um método draw() para pintar no canvas.

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+var ball = {
+  x: 100,
+  y: 100,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+ball.draw();
+ +

Nada de especial aqui, a bola é atualmente um simples círculos e desenha com ajuda de 

+ +

{{domxref("CanvasRenderingContext2D.arc()", "arc()")}} method.

+ +

Adicionando velocidade

+ +

Agora que você tem a bola, Nós estamos prontos para adicionar uma animação como nós temos aprendido no último capítulo deste tutorial. Denovo, {{domxref("window.requestAnimationFrame()")}} ajuda-nos a controlar a animação. a bola pega o movimento adicionando um vetor de velocidade para a posição. Para cada frame, N[ós também {{domxref("CanvasRenderingContext2D.clearRect", "clear", "", 1)}}o canvas para remover velhor círculos da prioridade dos frames.

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var raf;
+
+var ball = {
+  x: 100,
+  y: 100,
+  vx: 5,
+  vy: 2,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+function draw() {
+  ctx.clearRect(0,0, canvas.width, canvas.height);
+  ball.draw();
+  ball.x += ball.vx;
+  ball.y += ball.vy;
+  raf = window.requestAnimationFrame(draw);
+}
+
+canvas.addEventListener('mouseover', function(e) {
+  raf = window.requestAnimationFrame(draw);
+});
+
+canvas.addEventListener('mouseout', function(e) {
+  window.cancelAnimationFrame(raf);
+});
+
+ball.draw();
+
+ +

Limites

+ +

Sem um teste de limite de colisão nossa bola correria para fora do canvas rapidamente. Nós precisamos checar se a posição x e y da bola está fora das dimensões do canvas e invertida a direção do vetor de velocidade. Para fazer isto, Nós adicionamos a seguinte checagem para o método draw():

+ +
if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
+  ball.vy = -ball.vy;
+}
+if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
+  ball.vx = -ball.vx;
+}
+ +

Primeira demonstração

+ +

Deixe-me ver como isto fica em ação até agora. Mova seu mouse dentro do canvas para iniciar a animação.

+ + + +

{{EmbedLiveSample("First_demo", "610", "310")}}

+ +

Aceleração

+ +

Para fazer o movimento tão real, você para jogar com a velocidade como isto, por exemplo:

+ +
ball.vy *= .99;
+ball.vy += .25;
+ +

Esta diminuição da velocidade vertical para cada frame. Assim que a bola somente saltar no chão no final.

+ + + +

{{EmbedLiveSample("Second_demo", "610", "310")}}

+ +

Efeito de arrastar

+ +

Até agora nós temos feito uso do {{domxref("CanvasRenderingContext2D.clearRect", "clearRect")}} méthodo quando limpar as prioridades do frame.Se você substituir este método com um semi-transparente {{domxref("CanvasRenderingContext2D.fillRect", "fillRect")}}, você pode fácilmente criar um efeito de arrastar.

+ +
ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
+ctx.fillRect(0, 0, canvas.width, canvas.height);
+ + + +

{{EmbedLiveSample("Third_demo", "610", "310")}}

+ +

Adicione um controle de mouse

+ +

 

+ +

Para conseguir alguns controles sobre a bola, nós podemos fazer isto seguindo nosso mouse usando o evento mouseover, por exemplo. O clique por exemplo. O evento clique que libera a bola e deixa seu limite de novo.

+ + + +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var raf;
+var running = false;
+
+var ball = {
+  x: 100,
+  y: 100,
+  vx: 5,
+  vy: 1,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+function clear() {
+  ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
+  ctx.fillRect(0,0,canvas.width,canvas.height);
+}
+
+function draw() {
+  clear();
+  ball.draw();
+  ball.x += ball.vx;
+  ball.y += ball.vy;
+
+  if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
+    ball.vy = -ball.vy;
+  }
+  if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
+    ball.vx = -ball.vx;
+  }
+
+  raf = window.requestAnimationFrame(draw);
+}
+
+canvas.addEventListener('mousemove', function(e) {
+  if (!running) {
+    clear();
+    ball.x = e.clientX;
+    ball.y = e.clientY;
+    ball.draw();
+  }
+});
+
+canvas.addEventListener('click', function(e) {
+  if (!running) {
+    raf = window.requestAnimationFrame(draw);
+    running = true;
+  }
+});
+
+canvas.addEventListener('mouseout', function(e) {
+  window.cancelAnimationFrame(raf);
+  running = false;
+});
+
+ball.draw();
+
+ +

Mova a bola usando seu mouse e libere - o com um clique.

+ +

{{EmbedLiveSample("Adding_mouse_control", "610", "310")}}

+ +

Sair

+ +

Este curto capítulo somente explica algumas técnicas para criar as mais avançadas animações. Há muito mais! Como adicionar um paddle, alguns bricks, e tornar este demo dentro de um jogo Breakout? Cheque a nossa área de Desenvolvimento de jogos para mais artigos de jogos.

+ +

Veja também:

+ + + +

{{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}

diff --git a/files/pt-br/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html b/files/pt-br/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html new file mode 100644 index 0000000000..f711570b9f --- /dev/null +++ b/files/pt-br/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html @@ -0,0 +1,725 @@ +--- +title: Aplicando estilos e cores +slug: Web/Guide/HTML/Canvas_tutorial/Applying_styles_and_colors +translation_of: Web/API/Canvas_API/Tutorial/Applying_styles_and_colors +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}}
+ +
+

No capítulo sobre desenhando formas com canvas, usamos apenas os estilos padrões de preenchimento e linha. Aqui vamos explorar as opções do canvas que temos à nossa disposição para tornar nossos desenhos um pouco mais atraentes. Você aprenderá a adicionar cores diferentes, estilos de linhas, gradientes, padrões e sombras aos seus desenhos.

+
+ +

Cores

+ +

Até agora só vimos métodos do contexto de desenho. Se quisermos aplicar cores a uma forma, existem duas propriedades importantes que podemos utilizar: fillStyle e strokeStyle.

+ +
+
{{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle = color")}}
+
Define o estilo usado ao preencher (fill) formas.
+
{{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle = color")}}
+
Define o estilo para os contornos (strokes) das formas.
+
+ +

color é uma string que representa um CSS {{cssxref("<color>")}}, um objeto gradiente, ou um objeto padrão. Examinaremos sobre objetos de gradiente e padrão mais tarde. Por padrão, a cor do contorno (stroke color) e a cor de preenchimento (fill color) estão definidos como preto (valor de cor no CSS é #000000).

+ +
+

Nota: Quando você definir as propriedades strokeStyle e/ou fillStyle , o novo valor será o padrão para todas as formas desenhadas a partir de então.  Para toda forma que você quiser uma cor diferente, você vai precisar alterar o valor da propriedade fillStyle ou strokeStyle.

+
+ +

As strings validas que você pode inserir devem, de acordo com a especificação ser valores CSS {{cssxref("<color>")}}. Cada um dos exemplos a seguir, descrevem a mesma cor.

+ +
// these all set the fillStyle to 'orange'
+
+ctx.fillStyle = 'orange';
+ctx.fillStyle = '#FFA500';
+ctx.fillStyle = 'rgb(255, 165, 0)';
+ctx.fillStyle = 'rgba(255, 165, 0, 1)';
+
+ +

Um fillStyle exemplo

+ +

Neste exemplo, nós vamos mais uma vez utilizar dois for loops para desenhar uma grade de retângulos, cada um com uma cor diferente. A imagem do resultado, deve parecer como a captura de tela. Não existe nada de muito espetacular acontecendo aqui. Nós usamos as duas variéveis i and j para gerar uma única cor em RGB para cada quadrado, e apenas modificando os valores vermelho e verde. O canal azul possui um valor fixo. Modificando os canais, você pode gerar todos os tipos de paletas. Aumentando os passos, você pode alcançar algo que se parece com a paleta de cores dos usuários de Photoshop.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  for (var i = 0; i < 6; i++) {
+    for (var j = 0; j < 6; j++) {
+      ctx.fillStyle = 'rgb(' + Math.floor(255 - 42.5 * i) + ',' +
+                       Math.floor(255 - 42.5 * j) + ',0)';
+      ctx.fillRect(j * 25, i * 25, 25, 25);
+    }
+  }
+}
+ + + +

O resultado se parece com isto:

+ +

{{EmbedLiveSample("A_fillStyle_example", 160, 160, "https://mdn.mozillademos.org/files/5417/Canvas_fillstyle.png")}}

+ +

Um strokeStyle exemplo

+ +

Este exemplo é similar com o anterior, porém utiliza a propriedade strokeStyle para alterar a cor de contorno das formas. Nós usamos o método arc()  para desenhar círculos ao invés de quadrados.

+ +
  function draw() {
+    var ctx = document.getElementById('canvas').getContext('2d');
+    for (var i = 0; i < 6; i++) {
+      for (var j = 0; j < 6; j++) {
+        ctx.strokeStyle = 'rgb(0,' + Math.floor(255 - 42.5 * i) + ',' +
+                         Math.floor(255 - 42.5 * j) + ')';
+        ctx.beginPath();
+        ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, Math.PI * 2, true);
+        ctx.stroke();
+      }
+    }
+  }
+
+ + + +

O resultado se parece com isto:

+ +

{{EmbedLiveSample("A_strokeStyle_example", "180", "180", "https://mdn.mozillademos.org/files/253/Canvas_strokestyle.png")}}

+ +
Transparência
+ Além de desenhar formas opacas na tela, também podemos desenhar formas semi-transparentes (ou translúcidas). Isso é feito definindo a propriedade globalAlpha ou atribuindo uma cor semitransparente ao estilo de stroke e / ou fill style.
+ +
+
+
{{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha = transparencyValue")}}
+
+
+

Aplica o valor de transparência especificado a todas as formas futuras desenhadas na tela. O valor deve estar entre 0,0 (totalmente transparente) e 1,0 (totalmente opaco). Este valor é 1.0 (totalmente opaco) por padrão.
+ A propriedade globalAlpha pode ser útil se você quiser desenhar muitas formas na tela com transparência semelhante, mas, caso contrário, geralmente é mais útil definir a transparência em formas individuais ao definir suas cores.

+ +

Como as propriedades strokeStyle e fillStyle aceitam os valores de cor CSS rgba, podemos usar a notação a seguir para atribuir uma cor transparente a eles.

+
+
+ +
// Assigning transparent colors to stroke and fill style
+
+ctx.strokeStyle = 'rgba(255, 0, 0, 0.5)';
+ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
+
+ +

A função rgba () é semelhante à função rgb (), mas possui um parâmetro extra. O último parâmetro define o valor da transparência dessa cor específica. O intervalo válido é novamente entre 0,0 (totalmente transparente) e 1,0 (totalmente opaco).

+ +

Um exemplo globalAlpha

+ +

Neste exemplo, desenharemos um plano de fundo de quatro quadrados coloridos diferentes. Além disso, desenharemos um conjunto de círculos semi-transparentes. A propriedade globalAlpha é configurada em 0.2, que será usada para todas as formas a partir desse ponto. Cada passo no loop for desenha um conjunto de círculos com um raio crescente. O resultado final é um gradiente radial. Ao sobrepor cada vez mais círculos um sobre o outro, reduzimos efetivamente a transparência dos círculos que já foram desenhados. Ao aumentar a contagem de etapas e, com efeito, desenhar mais círculos, o plano de fundo desapareceria completamente do centro da imagem.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  // draw background
+  ctx.fillStyle = '#FD0';
+  ctx.fillRect(0, 0, 75, 75);
+  ctx.fillStyle = '#6C0';
+  ctx.fillRect(75, 0, 75, 75);
+  ctx.fillStyle = '#09F';
+  ctx.fillRect(0, 75, 75, 75);
+  ctx.fillStyle = '#F30';
+  ctx.fillRect(75, 75, 75, 75);
+  ctx.fillStyle = '#FFF';
+
+  // set transparency value
+  ctx.globalAlpha = 0.2;
+
+  // Draw semi transparent circles
+  for (i = 0; i < 7; i++) {
+    ctx.beginPath();
+    ctx.arc(75, 75, 10 + 10 * i, 0, Math.PI * 2, true);
+    ctx.fill();
+  }
+}
+ + + +

{{EmbedLiveSample("A_globalAlpha_example", "180", "180", "https://mdn.mozillademos.org/files/232/Canvas_globalalpha.png")}}

+ +

Um exemplo usando o rgba()

+ +

Neste segundo exemplo, fazemos algo semelhante ao anterior, mas em vez de desenhar círculos uns sobre os outros, desenhei pequenos retângulos com crescente opacidade. O uso de rgba () oferece um pouco mais de controle e flexibilidade, pois podemos definir o estilo de preenchimento e traçado/stroke individualmente.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // Draw background
+  ctx.fillStyle = 'rgb(255, 221, 0)';
+  ctx.fillRect(0, 0, 150, 37.5);
+  ctx.fillStyle = 'rgb(102, 204, 0)';
+  ctx.fillRect(0, 37.5, 150, 37.5);
+  ctx.fillStyle = 'rgb(0, 153, 255)';
+  ctx.fillRect(0, 75, 150, 37.5);
+  ctx.fillStyle = 'rgb(255, 51, 0)';
+  ctx.fillRect(0, 112.5, 150, 37.5);
+
+  // Draw semi transparent rectangles
+  for (var i = 0; i < 10; i++) {
+    ctx.fillStyle = 'rgba(255, 255, 255, ' + (i + 1) / 10 + ')';
+    for (var j = 0; j < 4; j++) {
+      ctx.fillRect(5 + i * 14, 5 + j * 37.5, 14, 27.5);
+    }
+  }
+}
+ + + +

{{EmbedLiveSample("An_example_using_rgba()", "180", "180", "https://mdn.mozillademos.org/files/246/Canvas_rgba.png")}}

+ +

Line styles

+ +

Existem várias propriedades que permitem estilizar linhas.

+ +
+
{{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth = value")}}
+
Define a largura das linhas desenhadas no futuro.
+
{{domxref("CanvasRenderingContext2D.lineCap", "lineCap = type")}}
+
Define a aparência dos fins das linhas.
+
{{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin = type")}}
+
Define a aparência dos "cantos" onde as linhas se encontram.
+
{{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit = value")}}
+
Estabelece um limite na mitra quando duas linhas se juntam em um ângulo agudo, para permitir controlar a espessura da junção.
+
{{domxref("CanvasRenderingContext2D.getLineDash", "getLineDash()")}}
+
Retorna a matriz de padrão de traço de linha atual que contém um número par de números não negativos
+
{{domxref("CanvasRenderingContext2D.setLineDash", "setLineDash(segments)")}}
+
Define o padrão de traço da linha atual.
+
{{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset = value")}}
+
Especifica onde iniciar uma matriz de traços em uma linha.
+
+ +

Você entenderá melhor o que eles fazem observando os exemplos abaixo.

+ +

Um exemplo lineWidth

+ +

A largura da linha é a espessura do traçado centralizado no caminho especificado. Em outras palavras, a área desenhada se estende até a metade da largura da linha em ambos os lados do caminho.

+ +

  Como as coordenadas da tela não fazem referência direta aos pixels, deve-se tomar cuidado especial para obter linhas horizontais e verticais nítidas.

+ +

No exemplo abaixo, 10 linhas retas são desenhadas com larguras de linhas crescentes. A linha na extrema esquerda tem 1,0 unidades de largura. No entanto, as linhas de espessura à esquerda e todas as outras linhas com número inteiro ímpar não aparecem nítidas, devido ao posicionamento do caminho.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  for (var i = 0; i < 10; i++) {
+    ctx.lineWidth = 1 + i;
+    ctx.beginPath();
+    ctx.moveTo(5 + i * 14, 5);
+    ctx.lineTo(5 + i * 14, 140);
+    ctx.stroke();
+  }
+}
+
+ + + +

{{EmbedLiveSample("A_lineWidth_example", "180", "180", "https://mdn.mozillademos.org/files/239/Canvas_linewidth.png")}}

+ +

A obtenção de linhas nítidas requer a compreensão de como os caminhos são traçados. Nas imagens abaixo, a grade representa a grade de coordenadas da tela. Os quadrados entre as linhas de grade são pixels reais na tela. Na primeira imagem da grade abaixo, um retângulo de (2,1) a (5,5) é preenchido. A área inteira entre eles (vermelho claro) cai nos limites dos pixels, portanto, o retângulo preenchido resultante terá bordas nítidas.
+

+ +

Se você considerar um caminho de (3,1) a (3,5) com uma espessura de linha de 1,0, você terminará com a situação na segunda imagem. A área real a ser preenchida (azul escuro) se estende apenas até a metade dos pixels dos dois lados do caminho. Uma aproximação disso deve ser renderizada, o que significa que esses pixels são sombreados apenas parcialmente e resultam em toda a área (azul claro e azul escuro) sendo preenchida com uma cor apenas metade da escuridão da cor real do traço. É o que acontece com a linha de largura 1.0 no código de exemplo anterior.

+ +

Para corrigir isso, você precisa ser muito preciso na criação do seu caminho. Sabendo que uma linha de largura 1,0 estenderá meia unidade para ambos os lados do caminho, criar o caminho de (3,5,1) a (3,5,5) resulta na situação da terceira imagem - a largura da linha 1,0 termina completamente e preenchendo com precisão uma única linha vertical de pixel.
+  

+ +
+

Nota: Esteja ciente de que, no nosso exemplo de linha vertical, a posição Y ainda faz referência a uma posição de linha de grade inteira - se não tivesse, veríamos pixels com meia cobertura nos pontos de extremidade (mas observe também que esse comportamento depende do estilo lineCap atual cujo valor padrão é butt; você pode calcular traçados consistentes com coordenadas de meio pixel para linhas de largura ímpar, configurando o estilo lineCap como quadrado, para que a borda externa do traçado ao redor do ponto de extremidade seja estendida automaticamente para cobrir o pixel inteiro exatamente).

+ +

Observe também que apenas os pontos de extremidade inicial e final de um caminho são afetados: se um caminho for fechado com closePath (), não haverá ponto inicial e final; em vez disso, todos os pontos de extremidade no caminho são conectados ao segmento anterior e ao próximo anexado usando a configuração atual do estilo lineJoin, cujo valor padrão é mitra, com o efeito de estender automaticamente as bordas externas dos segmentos conectados ao seu ponto de interseção. que o traçado renderizado cobrirá exatamente os pixels completos centralizados em cada ponto final se esses segmentos conectados forem horizontais e / ou verticais). Veja as próximas duas seções para demonstrações desses estilos de linha adicionais.

+
+ +

Para linhas de largura uniforme, cada metade acaba sendo uma quantidade inteira de pixels, portanto, você deseja um caminho entre pixels (ou seja, (3,1) a (3,5)), em vez de no meio dos pixels .

+ +

Embora seja um pouco doloroso ao trabalhar inicialmente com gráficos 2D escalonáveis, prestar atenção à grade de pixels e à posição dos caminhos garante que seus desenhos pareçam corretos, independentemente da escala ou de qualquer outra transformação envolvida. Uma linha vertical de 1,0 largura desenhada na posição correta se tornará uma linha nítida de 2 pixels quando aumentada em 2 e aparecerá na posição correta.

+ +

Exemplo lineCap.

+ +

A propriedade lineCap determina como os pontos finais de cada linha são desenhados. Existem três valores possíveis para essa propriedade e são: bunda, redondo e quadrado. Por padrão, essa propriedade está configurada para butt.

+ +
+
butt
+
As extremidades das linhas são quadradas nos pontos finais.
+
round
+
As extremidades das linhas são arredondadas.
+ arredondadas.
+
square
+
As extremidades das linhas são ajustadas ao quadrado, adicionando uma caixa com a mesma largura e metade da altura da espessura da linha.
+
+ +

Neste exemplo, desenharemos três linhas, cada uma com um valor diferente para a propriedade lineCap. Também adicionei dois guias para ver as diferenças exatas entre os três. Cada uma dessas linhas começa e termina exatamente nesses guias.

+ +

A linha à esquerda usa a opção de topo padrão. Você notará que está desenhado completamente alinhado com as guias. O segundo está definido para usar a opção redonda. Isso adiciona um semicírculo ao final que tem um raio com metade da largura da linha. A linha à direita usa a opção quadrada. Isso adiciona uma caixa com largura igual e metade da altura da espessura da linha.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var lineCap = ['butt', 'round', 'square'];
+
+  // Draw guides
+  ctx.strokeStyle = '#09f';
+  ctx.beginPath();
+  ctx.moveTo(10, 10);
+  ctx.lineTo(140, 10);
+  ctx.moveTo(10, 140);
+  ctx.lineTo(140, 140);
+  ctx.stroke();
+
+  // Draw lines
+  ctx.strokeStyle = 'black';
+  for (var i = 0; i < lineCap.length; i++) {
+    ctx.lineWidth = 15;
+    ctx.lineCap = lineCap[i];
+    ctx.beginPath();
+    ctx.moveTo(25 + i * 50, 10);
+    ctx.lineTo(25 + i * 50, 140);
+    ctx.stroke();
+  }
+}
+
+ + + +

{{EmbedLiveSample("A_lineCap_example", "180", "180", "https://mdn.mozillademos.org/files/236/Canvas_linecap.png")}}

+ +

Um exemplo de lineJoin

+ +

A propriedade lineJoin determina como dois segmentos de conexão (de linhas, arcos ou curvas) com comprimentos diferentes de zero em uma forma são unidos (segmentos degenerados com comprimentos zero, cujos pontos finais e pontos de controle especificados são exatamente na mesma posição, são ignorados) .

+ +

Existem três valores possíveis para essa propriedade: round, chanfro e mitra. Por padrão, essa propriedade está configurada para mitra. Observe que a configuração lineJoin não terá efeito se os dois segmentos conectados tiverem a mesma direção, porque nenhuma área de junção será adicionada neste caso.

+ +
+
round
+
Arredonda os cantos de uma forma preenchendo um setor adicional de disco centralizado no ponto final comum dos segmentos conectados. O raio desses cantos arredondados é igual à metade da largura da linha.
+
bevel
+
Preenche uma área triangular adicional entre o ponto final comum dos segmentos conectados e os cantos retangulares externos separados de cada segmento.
+
miter
+
Os segmentos conectados são unidos estendendo suas bordas externas para se conectarem em um único ponto, com o efeito de preencher uma área adicional em forma de losango. Essa configuração é efetuada pela propriedade miterLimit, explicada abaixo.
+
+ +

O exemplo abaixo desenha três caminhos diferentes, demonstrando cada uma dessas três configurações de propriedade lineJoin; a saída é mostrada acima.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var lineJoin = ['round', 'bevel', 'miter'];
+  ctx.lineWidth = 10;
+  for (var i = 0; i < lineJoin.length; i++) {
+    ctx.lineJoin = lineJoin[i];
+    ctx.beginPath();
+    ctx.moveTo(-5, 5 + i * 40);
+    ctx.lineTo(35, 45 + i * 40);
+    ctx.lineTo(75, 5 + i * 40);
+    ctx.lineTo(115, 45 + i * 40);
+    ctx.lineTo(155, 5 + i * 40);
+    ctx.stroke();
+  }
+}
+
+ + + +

{{EmbedLiveSample("A_lineJoin_example", "180", "180", "https://mdn.mozillademos.org/files/237/Canvas_linejoin.png")}}

+ +

Uma demonstração da propriedade miterLimit

+ +

Como você viu no exemplo anterior, ao unir duas linhas com a opção de esquadria, as bordas externas das duas linhas de junção são estendidas até o ponto em que elas se encontram. Para linhas com ângulos amplos entre si, esse ponto não está longe do ponto de conexão interno. No entanto, à medida que os ângulos entre cada linha diminuem, a distância (comprimento da mitra) entre esses pontos aumenta exponencialmente.

+ +

A propriedade miterLimit determina a que distância o ponto de conexão externo pode ser colocado do ponto de conexão interno. Se duas linhas excederem esse valor, uma junção de chanfro será desenhada. Observe que o comprimento máximo da esquadria é o produto da largura da linha medida no sistema de coordenadas atual, pelo valor dessa propriedade miterLimit (cujo valor padrão é 10.0 no HTML {{HTMLElement ("canvas")}}}), portanto, o O miterLimit pode ser definido independentemente da escala de exibição atual ou de quaisquer transformações afins de caminhos: apenas influencia a forma efetivamente renderizada das arestas da linha.

+ +

Mais exatamente, o limite da mitra é a proporção máxima permitida do comprimento da extensão (na tela HTML, é medida entre o canto externo das arestas unidas da linha e o ponto de extremidade comum dos segmentos de conexão especificados no caminho) pela metade do espessura da linha. Pode ser definido de maneira equivalente como a proporção máxima permitida da distância entre os pontos interno e externo da junção das arestas e a largura total da linha. Em seguida, é igual ao coecante da metade do ângulo interno mínimo dos segmentos de conexão abaixo dos quais nenhuma junção de esquadria será renderizada, mas apenas uma junção de chanfro:

+ + + +

Aqui está uma pequena demonstração na qual você pode definir o mitreLimit dinamicamente e ver como isso afeta as formas na tela. As linhas azuis mostram onde estão os pontos inicial e final de cada uma das linhas no padrão em zigue-zague.

+ +

Se você especificar um valor de miterLimite abaixo de 4.2 nesta demonstração, nenhum dos cantos visíveis poderá ser uma extensão de mitra, mas apenas com um pequeno canal próximo às linhas azuis; com um limite máximo acima de 10, a maioria dos cantos nesta demonstração deve ser levada a uma meia-esquadria das linhas azuis e a altura está diminuindo entre os cantos da esquerda para a direita porque eles estão conectados com ângulos crescentes; com valores intermediários, os cantos do lado esquerdo ou apenas um canto próximo às linhas azuis e os cantos do lado direito com uma extensão de esquadria (também com uma altura decrescente).

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // Clear canvas
+  ctx.clearRect(0, 0, 150, 150);
+
+  // Draw guides
+  ctx.strokeStyle = '#09f';
+  ctx.lineWidth   = 2;
+  ctx.strokeRect(-5, 50, 160, 50);
+
+  // Set line styles
+  ctx.strokeStyle = '#000';
+  ctx.lineWidth = 10;
+
+  // check input
+  if (document.getElementById('miterLimit').value.match(/\d+(\.\d+)?/)) {
+    ctx.miterLimit = parseFloat(document.getElementById('miterLimit').value);
+  } else {
+    alert('Value must be a positive number');
+  }
+
+  // Draw lines
+  ctx.beginPath();
+  ctx.moveTo(0, 100);
+  for (i = 0; i < 24 ; i++){
+    var dy = i % 2 == 0 ? 25 : -25 ;
+    ctx.lineTo(Math.pow(i, 1.5) * 2, 75 + dy);
+  }
+  ctx.stroke();
+  return false;
+}
+
+ + + +

{{EmbedLiveSample("A_demo_of_the_miterLimit_property", "400", "180", "https://mdn.mozillademos.org/files/240/Canvas_miterlimit.png")}}

+ +

Usando linhas tracejadas

+ +

O método setLineDash e a propriedade lineDashOffset especificam o padrão de traço para as linhas. O método setLineDash aceita uma lista de números que especificam distâncias para desenhar alternadamente entre uma linha e uma lacuna. Já a propriedade lineDashOffset define a distância até onde se deve iniciar a linha.

+ +

Neste exemplo, criaremos um efeito de formigas caminhando. É uma técnica de animação frequentemente usada em computação gráfica, pois ajuda o usuário a fazer uma distinção entre a borda e o plano de fundo animando a borda. Mais tarde neste tutorial, você aprenderá como fazer animações básicas.

+ + + +
var ctx = document.getElementById('canvas').getContext('2d');
+var offset = 0;
+
+function draw() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  ctx.setLineDash([4, 2]);
+  ctx.lineDashOffset = -offset;
+  ctx.strokeRect(10, 10, 100, 100);
+}
+
+function march() {
+  offset++;
+  if (offset > 16) {
+    offset = 0;
+  }
+  draw();
+  setTimeout(march, 20);
+}
+
+march();
+ +

{{EmbedLiveSample("Using_line_dashes", "120", "120", "https://mdn.mozillademos.org/files/9853/marching-ants.png")}}

+ +

Gradients

+ +

Just like any normal drawing program, we can fill and stroke shapes using linear and radial gradients. We create a {{domxref("CanvasGradient")}} object by using one of the following methods. We can then assign this object to the fillStyle or strokeStyle properties.

+ +
+
{{domxref("CanvasRenderingContext2D.createLinearGradient", "createLinearGradient(x1, y1, x2, y2)")}}
+
Creates a linear gradient object with a starting point of (x1, y1) and an end point of (x2, y2).
+
{{domxref("CanvasRenderingContext2D.createRadialGradient", "createRadialGradient(x1, y1, r1, x2, y2, r2)")}}
+
Creates a radial gradient. The parameters represent two circles, one with its center at (x1, y1) and a radius of r1, and the other with its center at (x2, y2) with a radius of r2.
+
+ +

For example:

+ +
var lineargradient = ctx.createLinearGradient(0, 0, 150, 150);
+var radialgradient = ctx.createRadialGradient(75, 75, 0, 75, 75, 100);
+
+ +

Once we've created a CanvasGradient object we can assign colors to it by using the addColorStop() method.

+ +
+
{{domxref("CanvasGradient.addColorStop", "gradient.addColorStop(position, color)")}}
+
Creates a new color stop on the gradient object. The position is a number between 0.0 and 1.0 and defines the relative position of the color in the gradient, and the color argument must be a string representing a CSS {{cssxref("<color>")}}, indicating the color the gradient should reach at that offset into the transition.
+
+ +

You can add as many color stops to a gradient as you need. Below is a very simple linear gradient from white to black.

+ +
var lineargradient = ctx.createLinearGradient(0, 0, 150, 150);
+lineargradient.addColorStop(0, 'white');
+lineargradient.addColorStop(1, 'black');
+
+ +

A createLinearGradient example

+ +

In this example, we'll create two different gradients. As you can see here, both the strokeStyle and fillStyle properties can accept a canvasGradient object as valid input.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // Create gradients
+  var lingrad = ctx.createLinearGradient(0, 0, 0, 150);
+  lingrad.addColorStop(0, '#00ABEB');
+  lingrad.addColorStop(0.5, '#fff');
+  lingrad.addColorStop(0.5, '#26C000');
+  lingrad.addColorStop(1, '#fff');
+
+  var lingrad2 = ctx.createLinearGradient(0, 50, 0, 95);
+  lingrad2.addColorStop(0.5, '#000');
+  lingrad2.addColorStop(1, 'rgba(0, 0, 0, 0)');
+
+  // assign gradients to fill and stroke styles
+  ctx.fillStyle = lingrad;
+  ctx.strokeStyle = lingrad2;
+
+  // draw shapes
+  ctx.fillRect(10, 10, 130, 130);
+  ctx.strokeRect(50, 50, 50, 50);
+
+}
+
+ + + +

The first is a background gradient. As you can see, we assigned two colors at the same position. You do this to make very sharp color transitions—in this case from white to green. Normally, it doesn't matter in what order you define the color stops, but in this special case, it does significantly. If you keep the assignments in the order you want them to appear, this won't be a problem.

+ +

In the second gradient, we didn't assign the starting color (at position 0.0) since it wasn't strictly necessary, because it will automatically assume the color of the next color stop. Therefore, assigning the black color at position 0.5 automatically makes the gradient, from the start to this stop, black.

+ +

{{EmbedLiveSample("A_createLinearGradient_example", "180", "180", "https://mdn.mozillademos.org/files/235/Canvas_lineargradient.png")}}

+ +

A createRadialGradient example

+ +

In this example, we'll define four different radial gradients. Because we have control over the start and closing points of the gradient, we can achieve more complex effects than we would normally have in the "classic" radial gradients we see in, for instance, Photoshop (that is, a gradient with a single center point where the gradient expands outward in a circular shape).

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // Create gradients
+  var radgrad = ctx.createRadialGradient(45, 45, 10, 52, 50, 30);
+  radgrad.addColorStop(0, '#A7D30C');
+  radgrad.addColorStop(0.9, '#019F62');
+  radgrad.addColorStop(1, 'rgba(1, 159, 98, 0)');
+
+  var radgrad2 = ctx.createRadialGradient(105, 105, 20, 112, 120, 50);
+  radgrad2.addColorStop(0, '#FF5F98');
+  radgrad2.addColorStop(0.75, '#FF0188');
+  radgrad2.addColorStop(1, 'rgba(255, 1, 136, 0)');
+
+  var radgrad3 = ctx.createRadialGradient(95, 15, 15, 102, 20, 40);
+  radgrad3.addColorStop(0, '#00C9FF');
+  radgrad3.addColorStop(0.8, '#00B5E2');
+  radgrad3.addColorStop(1, 'rgba(0, 201, 255, 0)');
+
+  var radgrad4 = ctx.createRadialGradient(0, 150, 50, 0, 140, 90);
+  radgrad4.addColorStop(0, '#F4F201');
+  radgrad4.addColorStop(0.8, '#E4C700');
+  radgrad4.addColorStop(1, 'rgba(228, 199, 0, 0)');
+
+  // draw shapes
+  ctx.fillStyle = radgrad4;
+  ctx.fillRect(0, 0, 150, 150);
+  ctx.fillStyle = radgrad3;
+  ctx.fillRect(0, 0, 150, 150);
+  ctx.fillStyle = radgrad2;
+  ctx.fillRect(0, 0, 150, 150);
+  ctx.fillStyle = radgrad;
+  ctx.fillRect(0, 0, 150, 150);
+}
+
+ + + +

In this case, we've offset the starting point slightly from the end point to achieve a spherical 3D effect. It's best to try to avoid letting the inside and outside circles overlap because this results in strange effects which are hard to predict.

+ +

The last color stop in each of the four gradients uses a fully transparent color. If you want to have a nice transition from this to the previous color stop, both colors should be equal. This isn't very obvious from the code because it uses two different CSS color methods as a demonstration, but in the first gradient #019F62 = rgba(1,159,98,1).

+ +

{{EmbedLiveSample("A_createRadialGradient_example", "180", "180", "https://mdn.mozillademos.org/files/244/Canvas_radialgradient.png")}}

+ +

Patterns

+ +

In one of the examples on the previous page, we used a series of loops to create a pattern of images. There is, however, a much simpler method: the createPattern() method.

+ +
+
{{domxref("CanvasRenderingContext2D.createPattern", "createPattern(image, type)")}}
+
Creates and returns a new canvas pattern object. image is a {{domxref("CanvasImageSource")}} (that is, an {{domxref("HTMLImageElement")}}, another canvas, a {{HTMLElement("video")}} element, or the like. type is a string indicating how to use the image.
+
+ +

The type specifies how to use the image in order to create the pattern, and must be one of the following string values:

+ +
+
repeat
+
Tiles the image in both vertical and horizontal directions.
+
repeat-x
+
Tiles the image horizontally but not vertically.
+
repeat-y
+
Tiles the image vertically but not horizontally.
+
no-repeat
+
Doesn't tile the image. It's used only once.
+
+ +

We use this method to create a {{domxref("CanvasPattern")}} object which is very similar to the gradient methods we've seen above. Once we've created a pattern, we can assign it to the fillStyle or strokeStyle properties. For example:

+ +
var img = new Image();
+img.src = 'someimage.png';
+var ptrn = ctx.createPattern(img, 'repeat');
+
+ +
+

Note: Like with the drawImage() method, you must make sure the image you use is loaded before calling this method or the pattern may be drawn incorrectly.

+
+ +

A createPattern example

+ +

In this last example, we'll create a pattern to assign to the fillStyle property. The only thing worth noting is the use of the image's onload handler. This is to make sure the image is loaded before it is assigned to the pattern.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // create new image object to use as pattern
+  var img = new Image();
+  img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
+  img.onload = function() {
+
+    // create pattern
+    var ptrn = ctx.createPattern(img, 'repeat');
+    ctx.fillStyle = ptrn;
+    ctx.fillRect(0, 0, 150, 150);
+
+  }
+}
+
+ + + +

{{EmbedLiveSample("A_createPattern_example", "180", "180", "https://mdn.mozillademos.org/files/222/Canvas_createpattern.png")}}

+ +

Shadows

+ +

Using shadows involves just four properties:

+ +
+
{{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX = float")}}
+
Indicates the horizontal distance the shadow should extend from the object. This value isn't affected by the transformation matrix. The default is 0.
+
{{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY = float")}}
+
Indicates the vertical distance the shadow should extend from the object. This value isn't affected by the transformation matrix. The default is 0.
+
{{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur = float")}}
+
Indicates the size of the blurring effect; this value doesn't correspond to a number of pixels and is not affected by the current transformation matrix. The default value is 0.
+
{{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor = color")}}
+
A standard CSS color value indicating the color of the shadow effect; by default, it is fully-transparent black.
+
+ +

The properties shadowOffsetX and shadowOffsetY indicate how far the shadow should extend from the object in the X and Y directions; these values aren't affected by the current transformation matrix. Use negative values to cause the shadow to extend up or to the left, and positive values to cause the shadow to extend down or to the right. These are both 0 by default.

+ +

The shadowBlur property indicates the size of the blurring effect; this value doesn't correspond to a number of pixels and is not affected by the current transformation matrix. The default value is 0.

+ +

The shadowColor property is a standard CSS color value indicating the color of the shadow effect; by default, it is fully-transparent black.

+ +
+

Note: Shadows are only drawn for source-over compositing operations.

+
+ +

A shadowed text example

+ +

This example draws a text string with a shadowing effect.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  ctx.shadowOffsetX = 2;
+  ctx.shadowOffsetY = 2;
+  ctx.shadowBlur = 2;
+  ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
+
+  ctx.font = '20px Times New Roman';
+  ctx.fillStyle = 'Black';
+  ctx.fillText('Sample String', 5, 30);
+}
+
+ + + +

{{EmbedLiveSample("A_shadowed_text_example", "180", "100", "https://mdn.mozillademos.org/files/2505/shadowed-string.png")}}

+ +

We will look at the font property and fillText method in the next chapter about drawing text.

+ +

Canvas fill rules

+ +

When using fill (or {{domxref("CanvasRenderingContext2D.clip", "clip")}} and {{domxref("CanvasRenderingContext2D.isPointInPath", "isPointinPath")}}) you can optionally provide a fill rule algorithm by which to determine if a point is inside or outside a path and thus if it gets filled or not. This is useful when a path intersects itself or is nested.
+
+ Two values are possible:

+ + + +

In this example we are using the evenodd rule.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.beginPath();
+  ctx.arc(50, 50, 30, 0, Math.PI * 2, true);
+  ctx.arc(50, 50, 15, 0, Math.PI * 2, true);
+  ctx.fill('evenodd');
+}
+ + + +

{{EmbedLiveSample("Canvas_fill_rules", "110", "110", "https://mdn.mozillademos.org/files/9855/fill-rule.png")}}

+ +

{{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}}

diff --git a/files/pt-br/web/api/canvas_api/tutorial/basic_animations/index.html b/files/pt-br/web/api/canvas_api/tutorial/basic_animations/index.html new file mode 100644 index 0000000000..125e0874a7 --- /dev/null +++ b/files/pt-br/web/api/canvas_api/tutorial/basic_animations/index.html @@ -0,0 +1,331 @@ +--- +title: Basic animations +slug: Web/Guide/HTML/Canvas_tutorial/Basic_animations +translation_of: Web/API/Canvas_API/Tutorial/Basic_animations +--- +

Já que estamos usando JavaScript para controlar {{HTMLElement("canvas")}} elementos, também é muito fácil criar animações interativas. Fazer animações mais complexas pode levar um tempo extra; esperamos introduzir um novo artigo para auxiliar sobre isso em breve.

+ +

Provavelmente a maior limitação é que uma vez que uma forma é desenhada, ela permanece assim. Se precisarmos mover, temos que redesenhar-lá e tudo que foi desenhado antes. Demora muito tempo pra redesenhar frames complexos e a desempenho depende altamente da velocidade do computador em que está rodando.

+ +

Passos para animação básica

+ +

Estes são os passos que você precisa para desenhar um frame:

+ +
    +
  1. Limpe o canvas
    + A menos que a forma que você vai desenhar preencha o canvas completo(por exemplo, uma imagem de fundo), você precisa limpar todas as formas que foram desenhadas anteriormente. O caminho mais fácil para fazer isso é usando o método clearRect().
    2. +
  2. Salve o estado da tela
    + Se você estiver mudando alguma configuração(como estilos, transformações, etc.) que afete o estado do canvas e você quer garantir que o estado original seja usado sempre que um quadro é desenhado, você precisa salvar esse estado original.
    3. +
  3. Desenhe formas animadas
    + A etapa em que você faz a renderização real do quadro.
    4. +
  4. Restaure o estado do canvas
    + Se você salvou o estado, restaure-o antes de desenhar um novo quadro.
    5. +
+ +

Controlando uma animação

+ +

Formas são desenhos na tela usando os canvas métodos diretamente ou chamando personalizadas. Em circunstancias normais, nós somente vemos esses resultados aparecerem na tela quando o script termina de ser executado. Por exemplo, não é possível fazer uma animação dentro de um loop for.

+ +

Isso significa que precisamos de um jeito para executar nossas funções de desenho durante um período de tempo. Existem dois jeitos para controlar uma animação como essa.

+ +

Atualizações agendadas

+ +

Primeiramente há as funções {{domxref("window.setInterval()")}} e {{domxref("window.setTimeout()")}}, que podem ser usadas para chamar uma função específica durante um certo período definido de tempo.

+ +
+

Nota: O método {{domxref("window.requestAnimationFrame()")}} agora é a maneira recomendada de programar animações. Vamos atualizar esse tutorial para abortar isso em breve.

+
+ +
+
setInterval(função,atraso)
+
Inicia repetidamente executando a função específica pela função a cada milissegundo de atraso.
+
setTimeout(função,atraso)
+
Executa a função especificada pela função em milissegundos de atraso.
+
+ +

Se você não quer nenhuma interação do usuário, é melhor usar a função setInterval() que executa repeditamente o código fornecido.

+ +

Atualizar na interação do usuário

+ +

O segundo método que nós podemos usar para controlar uma animação é a entrada do usuário. Se nós quiséssimos criar um jogo, nós poderiamos usar os eventos do teclado ou mouse para controlar a animação. Ao definir {{domxref("EventListener")}}s, nós pegamos qualquer interação do usuário e executamos nossas funções da animação. 

+ +

Se você quer a interação do usuário, você pode usar uma versão menor ou a versão principal do nosso framework pra animação:

+ +
var myAnimation = new MiniDaemon(null, animateShape, 500, Infinity);
+ +

ou

+ +
var myAnimation = new Daemon(null, animateShape, 500, Infinity);
+ +

Nos exemplos abaixo, no entanto, usamos o método {{domxref("window.setInterval()")}} para controlar a animação. Na parte inferior dessa página há alguns links de exemplos que usam {{domxref("window.setTimeout()")}}.

+ +

Um sistema solar animado

+ +

Esse exemplo anima um pequeno modelo do nosso sistema solar.

+ +
var sun = new Image();
+var moon = new Image();
+var earth = new Image();
+function init(){
+  sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png';
+  moon.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png';
+  earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png';
+  setInterval(draw,100);
+}
+
+function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  ctx.globalCompositeOperation = 'destination-over';
+  ctx.clearRect(0,0,300,300); // clear canvas
+
+  ctx.fillStyle = 'rgba(0,0,0,0.4)';
+  ctx.strokeStyle = 'rgba(0,153,255,0.4)';
+  ctx.save();
+  ctx.translate(150,150);
+
+  // Earth
+  var time = new Date();
+  ctx.rotate( ((2*Math.PI)/60)*time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds() );
+  ctx.translate(105,0);
+  ctx.fillRect(0,-12,50,24); // Shadow
+  ctx.drawImage(earth,-12,-12);
+
+  // Moon
+  ctx.save();
+  ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() + ((2*Math.PI)/6000)*time.getMilliseconds() );
+  ctx.translate(0,28.5);
+  ctx.drawImage(moon,-3.5,-3.5);
+  ctx.restore();
+
+  ctx.restore();
+
+  ctx.beginPath();
+  ctx.arc(150,150,105,0,Math.PI*2,false); // Earth orbit
+  ctx.stroke();
+
+  ctx.drawImage(sun,0,0,300,300);
+}
+
+ + + +

{{EmbedLiveSample("An_animated_solar_system", "310", "310", "https://mdn.mozillademos.org/files/202/Canvas_animation1.png")}}

+ +

Um relógio animado

+ +

Esse exemplos desenha um relógio animado, mostrando sua hora atual.

+ +
function init(){
+  clock();
+  setInterval(clock,1000);
+}
+
+function clock(){
+  var now = new Date();
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.save();
+  ctx.clearRect(0,0,150,150);
+  ctx.translate(75,75);
+  ctx.scale(0.4,0.4);
+  ctx.rotate(-Math.PI/2);
+  ctx.strokeStyle = "black";
+  ctx.fillStyle = "white";
+  ctx.lineWidth = 8;
+  ctx.lineCap = "round";
+
+  // Hour marks
+  ctx.save();
+  for (var i=0;i<12;i++){
+    ctx.beginPath();
+    ctx.rotate(Math.PI/6);
+    ctx.moveTo(100,0);
+    ctx.lineTo(120,0);
+    ctx.stroke();
+  }
+  ctx.restore();
+
+  // Minute marks
+  ctx.save();
+  ctx.lineWidth = 5;
+  for (i=0;i<60;i++){
+    if (i%5!=0) {
+      ctx.beginPath();
+      ctx.moveTo(117,0);
+      ctx.lineTo(120,0);
+      ctx.stroke();
+    }
+    ctx.rotate(Math.PI/30);
+  }
+  ctx.restore();
+
+  var sec = now.getSeconds();
+  var min = now.getMinutes();
+  var hr  = now.getHours();
+  hr = hr>=12 ? hr-12 : hr;
+
+  ctx.fillStyle = "black";
+
+  // write Hours
+  ctx.save();
+  ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec )
+  ctx.lineWidth = 14;
+  ctx.beginPath();
+  ctx.moveTo(-20,0);
+  ctx.lineTo(80,0);
+  ctx.stroke();
+  ctx.restore();
+
+  // write Minutes
+  ctx.save();
+  ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec )
+  ctx.lineWidth = 10;
+  ctx.beginPath();
+  ctx.moveTo(-28,0);
+  ctx.lineTo(112,0);
+  ctx.stroke();
+  ctx.restore();
+
+  // Write seconds
+  ctx.save();
+  ctx.rotate(sec * Math.PI/30);
+  ctx.strokeStyle = "#D40000";
+  ctx.fillStyle = "#D40000";
+  ctx.lineWidth = 6;
+  ctx.beginPath();
+  ctx.moveTo(-30,0);
+  ctx.lineTo(83,0);
+  ctx.stroke();
+  ctx.beginPath();
+  ctx.arc(0,0,10,0,Math.PI*2,true);
+  ctx.fill();
+  ctx.beginPath();
+  ctx.arc(95,0,10,0,Math.PI*2,true);
+  ctx.stroke();
+  ctx.fillStyle = "rgba(0,0,0,0)";
+  ctx.arc(0,0,3,0,Math.PI*2,true);
+  ctx.fill();
+  ctx.restore();
+
+  ctx.beginPath();
+  ctx.lineWidth = 14;
+  ctx.strokeStyle = '#325FA2';
+  ctx.arc(0,0,142,0,Math.PI*2,true);
+  ctx.stroke();
+
+  ctx.restore();
+}
+ + + +

{{EmbedLiveSample("An_animated_clock", "180", "180", "https://mdn.mozillademos.org/files/203/Canvas_animation2.png")}}

+ +

Um panorama  em loop

+ +

Nesse exemplos, um panorama é rolado da esquerda pra direita. Nós estamos usando uma imagem do Parque Nacional de Yosemite que tiramos da Wikipedia, mas você pode usar qualquer imagem que fosse maior que a tela.

+ +
var img = new Image();
+
+// User Variables - customize these to change the image being scrolled, its
+// direction, and the speed.
+
+img.src = 'https://mdn.mozillademos.org/files/4553/Capitan_Meadows,_Yosemite_National_Park.jpg';
+var CanvasXSize = 800;
+var CanvasYSize = 200;
+var speed = 30; //lower is faster
+var scale = 1.05;
+var y = -4.5; //vertical offset
+
+// Main program
+
+var dx = 0.75;
+var imgW;
+var imgH;
+var x = 0;
+var clearX;
+var clearY;
+var ctx;
+
+img.onload = function() {
+    imgW = img.width*scale;
+    imgH = img.height*scale;
+    if (imgW > CanvasXSize) { x = CanvasXSize-imgW; } // image larger than canvas
+    if (imgW > CanvasXSize) { clearX = imgW; } // image larger than canvas
+    else { clearX = CanvasXSize; }
+    if (imgH > CanvasYSize) { clearY = imgH; } // image larger than canvas
+    else { clearY = CanvasYSize; }
+    //Get Canvas Element
+    ctx = document.getElementById('canvas').getContext('2d');
+    //Set Refresh Rate
+    return setInterval(draw, speed);
+}
+
+function draw() {
+    //Clear Canvas
+    ctx.clearRect(0,0,clearX,clearY);
+    //If image is <= Canvas Size
+    if (imgW <= CanvasXSize) {
+        //reset, start from beginning
+        if (x > (CanvasXSize)) { x = 0; }
+        //draw aditional image
+        if (x > (CanvasXSize-imgW)) { ctx.drawImage(img,x-CanvasXSize+1,y,imgW,imgH); }
+    }
+    //If image is > Canvas Size
+    else {
+        //reset, start from beginning
+        if (x > (CanvasXSize)) { x = CanvasXSize-imgW; }
+        //draw aditional image
+        if (x > (CanvasXSize-imgW)) { ctx.drawImage(img,x-imgW+1,y,imgW,imgH); }
+    }
+    //draw image
+    ctx.drawImage(img,x,y,imgW,imgH);
+    //amount to move
+    x += dx;
+}
+
+ +

Abaixo é o {{HTMLElement("canvas")}} em que a imagem é rolada. Note que a largura e a altura especificadas aqui devem corresponder aos valores das variáveis ​​CanvasXZSize e CanvasYSize no código JavaScript. 

+ +
<canvas id="canvas" width="800" height="200"></canvas>
+ +

Live sample

+ +

{{EmbedLiveSample("A_looping_panorama", "830", "230")}}

+ +

Outros exemplos

+ +
+
Gartic
+
Jogo de desenho para multiplayers.
+
Canvascape
+
Um jogo de aventura 3D (tiro em primeira pessoa).
+
A basic ray-caster
+
Um bom exemplo de como fazer animações usando os controles do teclado.
+
canvas adventure
+
Outro bom exemplo que usa controles de teclado.
+
An interactive Blob
+
Divirta-se com Blob.
+
Flying through a starfield
+
Voe através de estrelas, círculos ou quadrados.
+
iGrapher
+
Um exemplo que ilustra os dados do mercado de ações.
+
+ +

Veja também

+ + + +

{{PreviousNext("Web/Guide/HTML/Canvas_tutorial/Compositing", "Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas")}}

diff --git a/files/pt-br/web/api/canvas_api/tutorial/basic_usage/index.html b/files/pt-br/web/api/canvas_api/tutorial/basic_usage/index.html new file mode 100644 index 0000000000..767a5ff97c --- /dev/null +++ b/files/pt-br/web/api/canvas_api/tutorial/basic_usage/index.html @@ -0,0 +1,153 @@ +--- +title: Utilização básica do Canvas +slug: Web/Guide/HTML/Canvas_tutorial/Utilizacao_basica +tags: + - Canvas + - HTML + - Intermediário + - Tutorial + - graficos +translation_of: Web/API/Canvas_API/Tutorial/Basic_usage +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}}
+ +
Vamos começar este tutorial olhando para o elemento {{HTMLElement("canvas")}} {{Glossary("HTML")}} em si. No final desta página, você saberá como configurar um contexto de canvas 2D e desenhar um primeiro exemplo em seu navegador.
+ +

O elemento <canvas>

+ +

Vamos começar esse tutorial olhando o elemento  {{HTMLElement("canvas")}} em si.

+ +
<canvas id="tutorial" width="150" height="150"></canvas>
+
+ +

Se parece muito com o elemento <img> com a diferença de não possuir os atributos src e alt. O elemento <canvas> tem apenas dois atributos - width e height. Ambos são opcionais e podem ser aplicados utilizando as propriedades DOM respectivas. Se não forem especificados, o canvas será iniciado com 300 pixels de largura por 150 pixels de altura. O elemento pode ser redimensionado por CSS, mas durante a renderização a imagem é escalonada para caber no tamanho do layout.

+ +
+

Nota: Se as suas renderizações parecerem distorcidas, tente especificar os atributos width e height no <canvas> e não usando CSS.

+
+ +

O atributo id não é específico do elemento <canvas> mas um dos atributos padrão do HTML que pode ser aplicado em (quase) todos os elementos HTML (como o class por exemplo). É sempre uma boa ideia inserir um id pois fica muito mais fácil de capturar o elemento no seu script.

+ +

O elemento <canvas> pode ser estilizado como qualquer imagem (margem, borda, fundo, etc). Contudo, essas regras não afetarão o desenho no canvas. Nós veremos como isso é feito a seguir nesse tutorial. Quando nenhuma regra de estilo for aplicada, o canvas iniciará totalmente transparente.

+ +
+

Conteúdo alternativo

+ +

Uma vez que alguns navegadores mais antigos (em particular, versões do Internet Explorer anteriores a 9) não suportam o elemento {{HTMLElement("canvas")}}, você precisará prover um conteúdo alternativo para ser mostrado nesses navegadores.

+ +

Isto é muito simples: basta inserir o conteúdo alternativo dentro do elemento <canvas>. Navegadores que não suportam o <canvas> irão renderizar o conteúdo alternativo. Já os navegadores que suportam <canvas> irão ignorar o conteúdo alternativo, renderizando o canvas normalmente.

+ +

Por exemplo, podemos prover um texto descritivo do canvas ou uma imagem estática do conteúdo. Algo como isto:

+ +
<canvas id="stockGraph" width="150" height="150">
+  preço das ações: $3.15 +0.15
+</canvas>
+
+<canvas id="clock" width="150" height="150">
+  <img src="images/clock.png" width="150" height="150" alt=""/>
+</canvas>
+
+ +

Tag </canvas> é necessária

+ +

Ao contrário do elemento {{HTMLElement("img")}}, o elemento {{HTMLElement("canvas")}} a tag de fechamento (</canvas>) é necessária.

+ +
+

Nota: Embora as primeiras versões do navegador Safari da Apple não exijam a tag de fechamento, a especificação indica que ela é necessária para que haja maior compatibilidade, portanto não se esqueça de incluí-la. Essas versões do Safari (antes da versão 2.0) irão processar o conteúdo do alternativo, além da própria tela, a menos que você use o CSS para mascará-lo. Felizmente, os usuários dessas versões do Safari são raros hoje em dia.

+
+ +

Se o conteúdo alternativo não for necessário, um simples <canvas id="foo" ...></canvas> é totalmente compatível com todos os navegadores que suportam canvas.

+ +

O contexto de renderização

+ +

{{HTMLElement("canvas")}} cria uma superfície de desenho de tamanho fixo que expõe um ou mais contextos de renderização, que são usados ​​para criar e manipular o conteúdo mostrado. Vamos nos concentrar no contexto de renderização 2D. Outros contextos podem fornecer diferentes tipos de renderização; por exemplo, WebGL usa um contexto 3D ("experimental-WebGL") baseado em OpenGL ES.

+ +

Incialmente o canvas é branco. Para mostrar alguma coisa, primeiro um script precisa acessar o contexto de renderização e desenhar sobre ele. O elemento {{HTMLElement("canvas")}} tem um método chamado getContext(), usado para obter o contexto de renderização e suas funções de desenho. getContext() recebe o tipo de contexto como parâmetro. Para gráficos 2D, que serão abrangidos nesse tutorial, deverá ser especificado "2d".

+ +
var canvas = document.getElementById('tutorial');
+var ctx = canvas.getContext('2d');
+
+ +

A primeira linha recupera o nó DOM do elemento {{HTMLElement ("canvas")}} chamando o método {{domxref ("document.getElementById()")}}. Depois de ter o nó do elemento, podemos acessar o contexto de desenho usando o método getContext().

+ +
+

Verificação de suporte

+ +

O conteúdo alternativo é mostrado nos navegadores que não suportam o elemento {{HTMLElement("canvas")}}, mas essa checagem pode ser feita através de um script simplesmente testando a presença do método getContext():

+ +
var canvas = document.getElementById('tutorial');
+
+if (canvas.getContext){
+  var ctx = canvas.getContext('2d');
+  // codigo de desenho aqui
+} else {
+  // codigo para quando o canvas nao for suportado aqui
+}
+
+
+
+ +

Um modelo de estrutura

+ +

Aqui, um modelo minimalista, que vamos usar como ponto de partida para os exemplos posteriores:

+ +
+

Nota: não é uma boa prática incorporar um script dentro do HTML. Nós fazemos isso aqui para manter o exemplo conciso.

+
+ +
<html>
+  <head>
+    <title>Canvas tutorial</title>
+    <script type="text/javascript">
+      function draw(){
+        var canvas = document.getElementById('tutorial');
+        if (canvas.getContext){
+          var ctx = canvas.getContext('2d');
+        }
+      }
+    </script>
+    <style type="text/css">
+      canvas { border: 1px solid black; }
+    </style>
+  </head>
+  <body onload="draw();">
+    <canvas id="tutorial" width="150" height="150"></canvas>
+  </body>
+</html>
+
+ +

O script inclui a função chamada draw(), que é executada uma vez ao término do carregamento da página; este exemplo usa o evento onload do documento. Essa função, ou uma parecida, poderia usar {{domxref("window.setTimeout()")}}, {{domxref("window.setInterval()")}}, ou qualquer outro manipulador de evento, contanto que a página tenha sido carregada primeiro.

+ +

{{EmbedLiveSample("Um_modelo_de_estrutura", 160, 160)}}

+ +

Um simples exemplo

+ +

Para começar, vamos dar uma olhada num exemplo simples que desenha a interseção de dois retângulos, dos quais um deles tem uma transparência. Exploraremos em mais detalhes o funcionamento nos exemplos posteriores.

+ +
<html>
+ <head>
+  <script type="application/javascript">
+    function draw() {
+      var canvas = document.getElementById("canvas");
+      if (canvas.getContext) {
+        var ctx = canvas.getContext("2d");
+
+        ctx.fillStyle = "rgb(200,0,0)";
+        ctx.fillRect (10, 10, 55, 50);
+
+        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
+        ctx.fillRect (30, 30, 55, 50);
+      }
+    }
+  </script>
+ </head>
+ <body onload="draw();">
+   <canvas id="canvas" width="150" height="150"></canvas>
+ </body>
+</html>
+ +

Este exemplo parece assim:

+ +

{{EmbedLiveSample("Um_simples_exemplo", 160, 160, "https://mdn.mozillademos.org/files/228/canvas_ex1.png")}}

+ +

{{PreviousNext("Web/Guide/HTML/Canvas_tutorial", "Web/Guide/HTML/Canvas_tutorial/Drawing_shapes")}}

diff --git a/files/pt-br/web/api/canvas_api/tutorial/compositing/example/index.html b/files/pt-br/web/api/canvas_api/tutorial/compositing/example/index.html new file mode 100644 index 0000000000..87de5aa19d --- /dev/null +++ b/files/pt-br/web/api/canvas_api/tutorial/compositing/example/index.html @@ -0,0 +1,294 @@ +--- +title: Exemplo de Composição +slug: Web/Guide/HTML/Canvas_tutorial/Compositing/Exemplo +tags: + - Canvas + - Example + - HTML5 + - Tutorial +translation_of: Web/API/Canvas_API/Tutorial/Compositing/Example +--- +
{{CanvasSidebar}}
+ +

Esse exemplo demonstra várias operações de composição. A saída se parece assim:

+ +

{{ EmbedLiveSample('Exemplo_de_composição', '', '7240px', '', 'Web/Guide/HTML/Canvas_tutorial/Compositing/Exemplo') }}

+ +

Exemplo de composição

+ +

Este código configura os valores globais usados pelo restante do programa.

+ +
var canvas1 = document.createElement("canvas");
+var canvas2 = document.createElement("canvas");
+var gco = [ 'Source-over','Source-in','Source-out','Source-atop',
+            'Destination-over','Destination-in','Destination-out','Destination-atop',
+            'Lighter', 'Copy','XOR', 'Multiply', 'Screen', 'Overlay', 'Darken',
+            'Lighten', 'Color-dodge', 'Color-burn', 'Hard-light', 'Soft-light',
+            'Difference', 'Exclusion', 'HUE', 'Saturation', 'Color', 'Luminosity'
+          ].reverse();
+var gcoText = [
+'Essa é a configuração padrão e desenha novas formas sobre o conteúdo da tela (canvas) existente.',
+'A nova forma é desenhada apenas onde a nova forma e a tela (canvas) de destino se sobrepõem. Todo o resto é transparente. ',
+'A nova forma é desenhada onde ela não sobrepõe o conteúdo da tela (canvas) existente.',
+'A nova forma é somente desenahda onde ela sobrepõe o conteúdo da tela (canvas) existente.',
+'Novas formas são desenhadas por trás do conteúdo da tela (canvas) existente.',
+'O conteúdo da tela (canvas) existente é mantido onde ambos, a nova forma e o conteúdo da tela (canvas) existente, se sobrepõe. Todo o resto é transparente.',
+'O conteúdo existente é mantido onde ele não sobrepõe a nova forma.',
+'A tela (canvas) existente só é mantida onde ela sobrepõe a nova forma. A nova forma é desenahda por trás do conteúdo canvas.',
+'Onde ambas formas se sebrepõem a cor é determinada adicionando seus respectivos valores de cores.',
+'Somente a nova forma é mostrada.',
+'Formas são feitas transparentes onde ambos se sobrepõem e todo o resto é desenhado normalmente.',
+'Os pixels da camada superior são multiplicados pelo pixel correspondente da camada inferior. Uma imagem mais escura é o resultado. ',
+'Os pixels são invertidos, multiplicados e invertidos novamente. Uma imagem mais clara é o resultado (oposto de multiplicar)',
+'Uma combinação de multiplicação e tela. As partes escuras na camada base tornam-se mais escuras e as partes claras tornam-se mais claras.',
+'Mantêm os pixels mais escuro de ambas camadas.',
+'Mantêm os pixels mais claro de ambas camadas.',
+'Divide a camada inferior pela camada superior invertida.',
+'Divide a camada inferior invertida pela camada superior e, em seguida, inverte o resultado.',
+'Uma combinação de multiplicação e tela como sobreposição, mas com a camada superior e inferior trocada.',
+'Uma versão mais suave da luz. Preto ou branco puro não resulta em preto ou branco puro.',
+'Subtrai a camada inferior da camada superior ou vice-versa para obter sempre um valor positivo.',
+'Como diferença, mas com menor contraste.',
+'Preserva o luma e o croma da camada inferior, enquanto adota a tonalidade da camada superior.',
+'Preserva o luma e a tonalidade da camada inferior, enquanto adota o croma da camada superior.',
+'Preserva a luma da camada inferior, enquanto adota a tonalidade e o croma da camada superior.',
+'Preserva a tonalidade e o croma da camada inferior, enquanto adota a luma da camada superior.'
+          ].reverse();
+var width = 320;
+var height = 340;
+ +

Programa principal

+ +

Quando a página é carregada, esse código é executado para configurar e executar o exemplo:

+ +
window.onload = function() {
+    // lum em sRGB
+    var lum = {
+        r: 0.33,
+        g: 0.33,
+        b: 0.33
+    };
+    // redimensiona canvas
+    canvas1.width = width;
+    canvas1.height = height;
+    canvas2.width = width;
+    canvas2.height = height;
+    lightMix();
+    colorSphere();
+    runComposite();
+    return;
+};
+
+ +

E esse código, runComposite (), manipula a maior parte do trabalho, contando com várias funções utilitárias para fazer as partes difíceis.

+ +
function createCanvas() {
+    var canvas = document.createElement("canvas");
+    canvas.style.background = "url("+op_8x8.data+")";
+    canvas.style.border = "1px solid #000";
+    canvas.style.margin = "5px";
+    canvas.width = width/2;
+    canvas.height = height/2;
+    return canvas;
+}
+
+function runComposite() {
+    var dl = document.createElement("dl");
+    document.body.appendChild(dl);
+    while(gco.length) {
+        var pop = gco.pop();
+        var dt = document.createElement("dt");
+        dt.textContent = pop;
+        dl.appendChild(dt);
+        var dd = document.createElement("dd");
+        var p = document.createElement("p");
+        p.textContent = gcoText.pop();
+        dd.appendChild(p);
+
+        var canvasToDrawOn = createCanvas();
+        var canvasToDrawFrom = createCanvas();
+        var canvasToDrawResult = createCanvas();
+
+        var ctx = canvasToDrawResult.getContext('2d');
+        ctx.clearRect(0, 0, width, height)
+        ctx.save();
+        ctx.drawImage(canvas1, 0, 0, width/2, height/2);
+        ctx.globalCompositeOperation = pop;
+        ctx.drawImage(canvas2, 0, 0, width/2, height/2);
+        ctx.globalCompositeOperation = "source-over";
+        ctx.fillStyle = "rgba(0,0,0,0.8)";
+        ctx.fillRect(0, height/2 - 20, width/2, 20);
+        ctx.fillStyle = "#FFF";
+        ctx.font = "14px arial";
+        ctx.fillText(pop, 5, height/2 - 5);
+        ctx.restore();
+
+        var ctx = canvasToDrawOn.getContext('2d');
+        ctx.clearRect(0, 0, width, height)
+        ctx.save();
+        ctx.drawImage(canvas1, 0, 0, width/2, height/2);
+        ctx.fillStyle = "rgba(0,0,0,0.8)";
+        ctx.fillRect(0, height/2 - 20, width/2, 20);
+        ctx.fillStyle = "#FFF";
+        ctx.font = "14px arial";
+        ctx.fillText('Conteúdo existente', 5, height/2 - 5);
+        ctx.restore();
+
+        var ctx = canvasToDrawFrom.getContext('2d');
+        ctx.clearRect(0, 0, width, height)
+        ctx.save();
+        ctx.drawImage(canvas2, 0, 0, width/2, height/2);
+        ctx.fillStyle = "rgba(0,0,0,0.8)";
+        ctx.fillRect(0, height/2 - 20, width/2, 20);
+        ctx.fillStyle = "#FFF";
+        ctx.font = "14px arial";
+        ctx.fillText('Novo conteúdo', 5, height/2 - 5);
+        ctx.restore();
+
+        dd.appendChild(canvasToDrawOn);
+        dd.appendChild(canvasToDrawFrom);
+        dd.appendChild(canvasToDrawResult);
+
+        dl.appendChild(dd);
+    }
+};
+
+ +

Funções Utilitárias

+ +

O programa depende de várias funções utilitárias.

+ +
var lightMix = function() {
+    var ctx = canvas2.getContext("2d");
+    ctx.save();
+    ctx.globalCompositeOperation = "lighter";
+    ctx.beginPath();
+    ctx.fillStyle = "rgba(255,0,0,1)";
+    ctx.arc(100, 200, 100, Math.PI*2, 0, false);
+    ctx.fill()
+    ctx.beginPath();
+    ctx.fillStyle = "rgba(0,0,255,1)";
+    ctx.arc(220, 200, 100, Math.PI*2, 0, false);
+    ctx.fill()
+    ctx.beginPath();
+    ctx.fillStyle = "rgba(0,255,0,1)";
+    ctx.arc(160, 100, 100, Math.PI*2, 0, false);
+    ctx.fill();
+    ctx.restore();
+    ctx.beginPath();
+    ctx.fillStyle = "#f00";
+    ctx.fillRect(0,0,30,30)
+    ctx.fill();
+};
+
+ +
var colorSphere = function(element) {
+    var ctx = canvas1.getContext("2d");
+    var width = 360;
+    var halfWidth = width / 2;
+    var rotate = (1 / 360) * Math.PI * 2; // per degree
+    var offset = 0; // scrollbar offset
+    var oleft = -20;
+    var otop = -20;
+    for (var n = 0; n <= 359; n ++) {
+        var gradient = ctx.createLinearGradient(oleft + halfWidth, otop, oleft + halfWidth, otop + halfWidth);
+        var color = Color.HSV_RGB({ H: (n + 300) % 360, S: 100, V: 100 });
+        gradient.addColorStop(0, "rgba(0,0,0,0)");
+        gradient.addColorStop(0.7, "rgba("+color.R+","+color.G+","+color.B+",1)");
+        gradient.addColorStop(1, "rgba(255,255,255,1)");
+        ctx.beginPath();
+        ctx.moveTo(oleft + halfWidth, otop);
+        ctx.lineTo(oleft + halfWidth, otop + halfWidth);
+        ctx.lineTo(oleft + halfWidth + 6, otop);
+        ctx.fillStyle = gradient;
+        ctx.fill();
+        ctx.translate(oleft + halfWidth, otop + halfWidth);
+        ctx.rotate(rotate);
+        ctx.translate(-(oleft + halfWidth), -(otop + halfWidth));
+    }
+    ctx.beginPath();
+    ctx.fillStyle = "#00f";
+    ctx.fillRect(15,15,30,30)
+    ctx.fill();
+    return ctx.canvas;
+};
+
+ +
// HSV (1978) = H: Hue (tom)
+//              S: Saturation (Saturação)
+//              V: Value (Valor)
+Color = {};
+Color.HSV_RGB = function (o) {
+    var H = o.H / 360,
+        S = o.S / 100,
+        V = o.V / 100,
+        R, G, B;
+    var A, B, C, D;
+    if (S == 0) {
+        R = G = B = Math.round(V * 255);
+    } else {
+        if (H >= 1) H = 0;
+        H = 6 * H;
+        D = H - Math.floor(H);
+        A = Math.round(255 * V * (1 - S));
+        B = Math.round(255 * V * (1 - (S * D)));
+        C = Math.round(255 * V * (1 - (S * (1 - D))));
+        V = Math.round(255 * V);
+        switch (Math.floor(H)) {
+            case 0:
+                R = V;
+                G = C;
+                B = A;
+                break;
+            case 1:
+                R = B;
+                G = V;
+                B = A;
+                break;
+            case 2:
+                R = A;
+                G = V;
+                B = C;
+                break;
+            case 3:
+                R = A;
+                G = B;
+                B = V;
+                break;
+            case 4:
+                R = C;
+                G = A;
+                B = V;
+                break;
+            case 5:
+                R = V;
+                G = A;
+                B = B;
+                break;
+        }
+    }
+    return {
+        R: R,
+        G: G,
+        B: B
+    };
+};
+
+var createInterlace = function (size, color1, color2) {
+    var proto = document.createElement("canvas").getContext("2d");
+    proto.canvas.width = size * 2;
+    proto.canvas.height = size * 2;
+    proto.fillStyle = color1; // top-left
+    proto.fillRect(0, 0, size, size);
+    proto.fillStyle = color2; // top-right
+    proto.fillRect(size, 0, size, size);
+    proto.fillStyle = color2; // bottom-left
+    proto.fillRect(0, size, size, size);
+    proto.fillStyle = color1; // bottom-right
+    proto.fillRect(size, size, size, size);
+    var pattern = proto.createPattern(proto.canvas, "repeat");
+    pattern.data = proto.canvas.toDataURL();
+    return pattern;
+};
+
+var op_8x8 = createInterlace(8, "#FFF", "#eee");
diff --git a/files/pt-br/web/api/canvas_api/tutorial/compositing/index.html b/files/pt-br/web/api/canvas_api/tutorial/compositing/index.html new file mode 100644 index 0000000000..6d9ff5c33d --- /dev/null +++ b/files/pt-br/web/api/canvas_api/tutorial/compositing/index.html @@ -0,0 +1,112 @@ +--- +title: Compositing and clipping +slug: Web/Guide/HTML/Canvas_tutorial/Compositing +translation_of: Web/API/Canvas_API/Tutorial/Compositing +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Transformations", "Web/API/Canvas_API/Tutorial/Basic_animations")}}
+ +
+

Em todo os nossos exemplos prévios, formas estavam sempre desenhadas uma em cima das outras. Este é mais do que adequado para a maioria das situações, mas é limita a ordem no qual a composição das formas são construídas.

+ +

Nós podemos, no entanto, mudar este comportamento por configurar a propriedade globalCompositeOperation. Além disto, a propriedade clipe permite-nos esconder indesejáveis partes da forma.

+
+ +

globalCompositeOperation

+ +

Nós podemos somente desenhar novas formas atrás das existentes formas mas nós podemos também usar isto para mascarar certas áreas, limpar seções do canvas(não limitado para retângulos como o {{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}} métodos faz) e mais.

+ +
+
{{domxref("CanvasRenderingContext2D.globalCompositeOperation", "globalCompositeOperation = type")}}
+
Este conjunto de operações compostas para aplicar quando desenha novas formas, onde type é uma string identificando quais das 12 operações compostas usar.
+
+ +

Veja os seguintes exemplos de composição para o código dos seguintes exemplos.

+ +

{{ EmbedLiveSample('Exemplo_de_composição', '', '', '', 'Web/Guide/HTML/Canvas_tutorial/Compositing/Exemplo') }}

+ +

Caminhos de recorte (Clipping path)

+ +

Um caminho de recorte (Clipping path) é como uma forma normal canvas mas isto age como uma máscara para esconder indesejáveis partes de formas. Isto é visualizado na imagem na direita. A forma da estrela vermelha é nosso caminho de recorte. Tudo que cai do lado de fora deste caminho não sai desenhado no canvas.

+ +

Se nós compararmos caminho de recorte para a propriedade globalCompositeOperation nós temos visto acima, nós veremos dois modelos de composição que alcança mais ou menos o mesmo efeito no source-in e source-atop. A mais importante diferença entre os dois é que o caminho de recorte nunca desenha algo na tela e o caminho de recorte nunca afeta por adicionar novas formas. Isto faz o caminho do recorte ideal para desenhar múltiplos na área restrita.

+ +

No capítulo sobre formas de desenho (drawing shapes) eu somente mencionei os métodos stroke() e fill(), mas há um método que nós podemos usar com caminhos chamado clip().

+ +
+
{{domxref("CanvasRenderingContext2D.clip", "clip()")}}
+
Volta o caminho atualmente sendo construído no caminho de recorte atual.
+
+ +

Você usou clip() em vez de closePath() para fechar um caminho e voltar para dentro de um caminho de recorte em vez de contornar (stroking) ou completar (filling) o caminho.

+ +

Por padrão o elemento {{HTMLElement("canvas")}} tem um caminho de recorte que é exatamente o mesmo tamanho do canvas em si. Em outras palavras, nenhum recorte ocorreu.

+ +

Um exemplo do recorte

+ +

Neste exemplo, Nós usaremos um recorte circular para restringir o desenho do conjunto de inícios randômicos para uma região particular

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.fillRect(0, 0, 150, 150);
+  ctx.translate(75, 75);
+
+  // Create a circular clipping path
+  ctx.beginPath();
+  ctx.arc(0, 0, 60, 0, Math.PI * 2, true);
+  ctx.clip();
+
+  // draw background
+  var lingrad = ctx.createLinearGradient(0, -75, 0, 75);
+  lingrad.addColorStop(0, '#232256');
+  lingrad.addColorStop(1, '#143778');
+
+  ctx.fillStyle = lingrad;
+  ctx.fillRect(-75, -75, 150, 150);
+
+  // draw stars
+  for (var j = 1; j < 50; j++) {
+    ctx.save();
+    ctx.fillStyle = '#fff';
+    ctx.translate(75 - Math.floor(Math.random() * 150),
+                  75 - Math.floor(Math.random() * 150));
+    drawStar(ctx, Math.floor(Math.random() * 4) + 2);
+    ctx.restore();
+  }
+
+}
+
+function drawStar(ctx, r) {
+  ctx.save();
+  ctx.beginPath();
+  ctx.moveTo(r, 0);
+  for (var i = 0; i < 9; i++) {
+    ctx.rotate(Math.PI / 5);
+    if (i % 2 === 0) {
+      ctx.lineTo((r / 0.525731) * 0.200811, 0);
+    } else {
+      ctx.lineTo(r, 0);
+    }
+  }
+  ctx.closePath();
+  ctx.fill();
+  ctx.restore();
+}
+
+ + + +

Nas primeiras linhas de código, nós desenhamos um retângulo negro do tamanho do canvas como um pano de fundo, então traduzido da origem para o centro. Próximo, nós criamos o recorte circular do caminho recortado para desenhar um arco e chamá-lo clip(). Caminho de recortes são também parte do canvas com estado salvo. Se nós procuramos guardar o caminho do recorte original nós podemos ter salvo o estado do canvas antes de criar mais um.

+ +

Tudo que for desenhado depois de criado o caminho de recorte somente aparecerá dentro daquele caminho. Você pode ver isto claramente no gradiente linear que está desenhado adiante. Depois deste conjunto de de 50 randomicamente posicionadas e escaladas estrelas for desenhada. Usando a função customizada drawStar(). De novo as estrelas somente aparecerão dentro do caminho de recorte definido.

+ +

Um exemplo de recorte:

+ +

+ +

{{EmbedLiveSample("A_clip_example", "180", "180", "https://mdn.mozillademos.org/files/208/Canvas_clip.png")}}

+ +

{{PreviousNext("Web/API/Canvas_API/Tutorial/Transformations", "Web/API/Canvas_API/Tutorial/Basic_animations")}}

diff --git a/files/pt-br/web/api/canvas_api/tutorial/drawing_shapes/index.html b/files/pt-br/web/api/canvas_api/tutorial/drawing_shapes/index.html new file mode 100644 index 0000000000..f54fca780e --- /dev/null +++ b/files/pt-br/web/api/canvas_api/tutorial/drawing_shapes/index.html @@ -0,0 +1,581 @@ +--- +title: Desenhando formas com canvas +slug: Web/Guide/HTML/Canvas_tutorial/Drawing_shapes +tags: + - Canvas + - Gráficos(2) + - HTML + - HTML Canvas + - HTML5 + - Intermediário + - Tutorial +translation_of: Web/API/Canvas_API/Tutorial/Drawing_shapes +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_usage", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}}
+ +
+

Agora que criamos nosso ambiente em canvas, podemos entrar nos detalhes de como desenhar no canvas. No final deste artigo, você terá aprendido a desenhar retângulos, triângulos, linhas, arcos e curvas, proporcionando familiaridade com algumas das formas básicas. Trabalhar com caminhos (shapes) é essencial ao desenhar objetos na tela e veremos como isso pode ser feito.

+
+ +

A grade

+ +

Antes que possamos começar a desenhar, precisamos falar sobre a grade de tela ou espaço de coordenadas. O modelo HTML na página anterior tinha um elemento canvas de 150 pixels de largura e 150 pixels de altura. À direita, você verá este canvas com a grade padrão sobreposta. Normalmente 1 unidade na grade corresponde a um pixel na tela. A origem desta grade está posicionada no canto superior esquerdo (coordenadas (0,0)). Todos os elementos são colocados em relação a esta origem. Assim, a posição do canto superior esquerdo do quadrado azul, se torna x pixels dos pixels da esquerda e y a partir do topo (coordenadas (x,y)). Mais tarde nesse tutorial vamos ver como podemos traduzir a origem para uma posição diferente, girar a grade e até mesmo escaloná-la. Por enquanto vamos ficar com o padrão.

+ +

Desenhando retângulos

+ +

Diferente do {{Glossary("SVG")}} , o {{HTMLElement("canvas")}} suporta somente formas primitivas: retângulos. Todas as outras formas são criadas a partir da combinação de um ou mais caminhos (paths), lista de pontos conectados por uma linha. Felizmente, temos uma variedade de funções de desenho que tornam possíveis criar formas muito complexas.

+ +

Primeiramente vamos olhar o retângulo. Aqui está listado três funções para desenhar retângulos pelo canvas:

+ +
+
{{domxref("CanvasRenderingContext2D.fillRect", "fillRect(x, y, width, height)")}}
+
Desenha um retângulo preenchido.
+
{{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect(x, y, width, height)")}}
+
Desenha a borda do retângulo.
+
{{domxref("CanvasRenderingContext2D.clearRect", "clearRect(x, y, width, height)")}}
+
Limpa um retângulo específico, tornando-o totalmente transparente.
+
+ +

Cada umas das funções recebem os mesmos parâmetros. x e y determinam a posição no canvas (em relação a origem) no canto superior esquerdo do retângulo. O width (largura) e o height (altura) definem o tamanho do retângulo.

+ +

Abaixo esta listado a função draw() da página anterior, porém utilizando as três funções.

+ +

Exemplo de forma retangular

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    ctx.fillRect(25, 25, 100, 100);
+    ctx.clearRect(45, 45, 60, 60);
+    ctx.strokeRect(50, 50, 50, 50);
+  }
+}
+ +

O resultado desse exemplo é mostrado abaixo.

+ +

{{EmbedLiveSample('Exemplo_de_forma_retangular', 160, 160, "https://mdn.mozillademos.org/files/245/Canvas_rect.png")}}

+ +

A função fillRect() desenha um grande quadrado preto de 100 pixels. A função clearRect() por sua vez apaga um quadrado de 60x60 pixels a partir do centro, por fim, a função strokeRect() é chamada para criar uma borda de 50x50 pixels em volta do quadrado apagado.

+ +

Posteriormente veremos duas alternativas à função clearRect(), nós também aprenderemos como alterar a cor e o estilo das linhas nas camadas renderizadas.

+ +

Ao contrário das funções de paths que veremos na próxima seção, todas as três funções de retângulo desenham imediatamente no canvas.

+ +

Desenhando caminhos/regiões (paths)

+ +

Para criar uma camada usando caminhos (regiões ou paths) é necessário alguns passos extras. Primeiro, cria-se a região de desenho. Depois usa-se comandos de desenho para desenhar nesta região. Por fim, você limita a região (path). Uma vez que a região de desenho está criada, você pode traçar ou preencher o caminho para que seja renderizado. Aqui estão as funções utilizadas para isso:

+ +
+
{{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}}
+
Cria um novo path. Uma vez criado, futuros comandos de desenho são direcionados do path atual para a construção de um novo path no canvas.
+
+ +
+
Métodos de Caminhos (Path)
+
Métodos para manipuliar diferentes paths para objetos.
+
+ +
+
{{domxref("CanvasRenderingContext2D.closePath", "closePath()")}}
+
Finaliza o path para futuros comandos de desenho, fazendo com que voltem a ser direcionados ao contexto.
+
{{domxref("CanvasRenderingContext2D.stroke", "stroke()")}}
+
Desenha uma borda na camada.
+
{{domxref("CanvasRenderingContext2D.fill", "fill()")}}
+
Desenha uma forma sólida através de preenchimento.
+
+ +

O primeiro passo para criar um caminho é chamar o beginPath(). Internamente, caminhos são armazenados como uma lista de sub-caminhos (linhas, arcos, etc.) que juntos formam uma forma (shape). Sempre que esse método é chamado, a lista é redefinida e podemos começar a desenhar novas formas.

+ +
Nota: Quando o caminho atual está vazio, assim como imediatamente depois de chamar beginPath(), ou em uma tela recém-criada, o primeiro comando de construção de caminho é sempre tratado como um moveTo(), independentemente do que ele seja realmente. Por essa razão, você quase sempre vai precisar definir especificamente sua posição inicial após redefinir um caminho.
+ +

A segunda etapa é chamar os métodos que realmente especificam os caminhos a serem desenhados. Vamos ver isso em breve.

+ +


+ O terceiro, e um passo opcional, é chamar closePath(). Este método tenta fechar a forma desenhando uma linha reta do ponto atual para o início. Se a forma (shape) já foi fechada ou existe apenas um ponto na lista, esta função não faz nada.

+ +
Nota: Quando você chama fill(), todas as formas abertas são fechadas automaticamente, assim você não precisa chamar closePath(). Isso não acontece quando você chamar stroke().
+ +

Desenhando um triângulo

+ +

Por exemplo, o código para desenhar um triângulo seria algo parecido com isto:

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+    var ctx = canvas.getContext('2d');
+
+    ctx.beginPath();
+    ctx.moveTo(75,50);
+    ctx.lineTo(100,75);
+    ctx.lineTo(100,25);
+    ctx.fill();
+  }
+}
+
+ +

O resultado se parece com isso:

+ +

{{EmbedLiveSample('Desenhando_um_triângulo', 160, 160, "https://mdn.mozillademos.org/files/9847/triangle.png")}}

+ +

Desenhando

+ +

Uma função muito útil, que na verdade não desenha nada, mas torna-se parte da lista de caminhos descritos acima, é a função moveTo(). Você provavelmente pode imaginar melhor isso como se fosse o levantar uma caneta ou lápis de um ponto em um pedaço de papel e colocá-lo no próximo ponto.

+ +
+
{{domxref("CanvasRenderingContext2D.moveTo", "moveTo(x, y)")}}
+
Move a caneta (pen) para as coordenadas especificadas por x e y.
+
+ +

Quando o canvas é inicializado ou beginPath() é chamado, você normalmente vai querer usar a função moveTo() para colocar o ponto inicial em outro lugar. Poderíamos também usar moveTo() para desenhar caminhos não conectados. Dê uma olhada no rosto sorridente abaixo. Eu marquei os lugares onde eu usei o método moveTo() (as linhas vermelhas).

+ +

Caso queira tentar fazer isso, você pode usar o snippet de código abaixo. Basta colá-lo na função draw() que vimos anteriormente.

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    ctx.beginPath();
+    ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // Círculo exterior
+    ctx.moveTo(110, 75);
+    ctx.arc(75, 75, 35, 0, Math.PI, false);  // Boca (sentido horário)
+    ctx.moveTo(65, 65);
+    ctx.arc(60, 65, 5, 0, Math.PI * 2, true);  // Olho esquerdo
+    ctx.moveTo(95, 65);
+    ctx.arc(90, 65, 5, 0, Math.PI * 2, true);  // Olho direito
+    ctx.stroke();
+  }
+}
+
+ +

O resultado aparece como:

+ +

{{EmbedLiveSample("Desenhando", 160, 160, "https://mdn.mozillademos.org/files/252/Canvas_smiley.png")}}

+ +

Se você não gosta de ver linhas conectadas, você pode remover as linhas que chamam a função moveTo().

+ +
+

Nota: Para aprender mais sobre a função arc(), veja sobre {{anch("Arcos")}}.

+
+ +

Linhas

+ +

Para desenhar linhas retas, use o método lineTo().

+ +
+
{{domxref("CanvasRenderingContext2D.lineTo", "lineTo(x, y)")}}
+
Desenha uma linha do ponto atual a até a posição especificada por x e y.
+
+ +

Esse método recebe dois argumentos, x e y, que são as coordenadas do ponto final da linha. O ponto inicial é dependente de caminhos previamente desenhados, onde o ponto final do caminho anterior é o ponto inicial para o seguinte, e assim por diante. O ponto inicial também pode ser alterado usando o método moveTo().
+
+ O exemplo abaixo desenha dois triângulos, um preenchido e um delineado.

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+    var ctx = canvas.getContext('2d');
+
+    // Filled triangle
+    ctx.beginPath();
+    ctx.moveTo(25,25);
+    ctx.lineTo(105,25);
+    ctx.lineTo(25,105);
+    ctx.fill();
+
+    // Stroked triangle
+    ctx.beginPath();
+    ctx.moveTo(125,125);
+    ctx.lineTo(125,45);
+    ctx.lineTo(45,125);
+    ctx.closePath();
+    ctx.stroke();
+  }
+}
+
+ +

Isso começa chamando o método beginPath() para iniciar um novo shape path. Em seguida, usamos o método moveTo() para mover o ponto inicial para a posição desejada. Logo abaixo, duas linhas, que compõem os dois lados do triângulo, são desenhadas.

+ +

{{EmbedLiveSample("Linhas", 160, 160, "https://mdn.mozillademos.org/files/238/Canvas_lineTo.png")}}

+ +

Você notará a diferença entre o triângulo preenchido (filled) e não prenchido (stroked). Isto ocorre, como mencionado acima, porque as formas são automaticamente fechadas quando um caminho é preenchido, mas não quando são não preenchidos. Se deixássemos de fora o closePath() para os triângulos não preenchidos, apenas duas linhas teriam sido desenhadas, não um triângulo completo.

+ +

Arcos

+ +

Para desenhar arcos, nós usamos os métodos arc() ou arcTo().

+ +
+
{{domxref("CanvasRenderingContext2D.arc", "arc(x, y, radius, startAngle, endAngle, anticlockwise)")}}
+
Desenha um arco centralizado na posição (x, y) com um raio r iniciando em startAngle e terminando em endAngle apontando na direção indicada pelo sentido anti-horário (padronizando para o sentido horário).
+
{{domxref("CanvasRenderingContext2D.arcTo", "arcTo(x1, y1, x2, y2, radius)")}}
+
Desenha um arco com os pontos de controle e raio, conectados ao ponto anterior por uma linha reta.
+
+ +

Vamos dar uma olhada mais detalhada sobre o método arc, que tem seis parâmetros: x e y são as coordenadas do centro do círculo em que o arco deve ser desenhado. radius é o raio. Os parâmetros startAngle e endAngle definem os pontos inicial e final do arco em radianos, ao longo da curva do círculo. Estes são medidos a partir do eixo x. O parâmetro anticlockwise é um valor Booleano que, quando verdadeiro, desenha o arco no sentido anti-horário; Caso contrário, o arco é desenhado no sentido horário.

+ +
+

Nota: Os ângulos na função arc são medidos em radianos, não em graus. Para converter graus em radianos você pode usar a seguinte expressão JavaScript: radians = (Math.PI/180)*degrees.

+
+ +

O exemplo a seguir é um pouco mais complexo do que os que vimos anteriormente. Ele desenha 12 arcos diferentes, todos com diferentes ângulos e preenchimentos.

+ +

Os dois laços for são para iterar através das linhas e colunas de arcos. Para cada arco, é criado um novo caminho chamando beginPath(). No código, cada um dos parâmetros para o arco estão em uma variável somente para demonstração, assim você não precisa fazer isso na vida real.

+ +

As coordenadas x e y devem ser suficientemente claras. O parâmetros radius e startAngle são fixos. O endAngle começa em 180 graus (metade de um círculo) na primeira coluna e aumenta gradualmente em 90 graus, culminando em um círculo completo na última coluna.

+ +

A manipulação do parâmetro clockwise faz com que a primeira e terceira linhas sejam desenhadas como arcos no sentido horário, e a segunda e quarta linhas como arcos no sentido anti-horário. Finalmente, a instrução if faz com que a metade superior dos arcos não sejam preenchidos e a metade inferior dos arcos sejam.

+ +
+

Note: Este exemplo requer um canvas um pouco maior que as outras desta página: 150 x 200 pixels.

+
+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+    var ctx = canvas.getContext('2d');
+
+    for(var i=0;i<4;i++){
+      for(var j=0;j<3;j++){
+        ctx.beginPath();
+        var x              = 25+j*50;               // coordenada x
+        var y              = 25+i*50;               // coordenada y
+        var radius         = 20;                    // Raio do Arco
+        var startAngle     = 0;                     // Ponto inicial no círculo
+        var endAngle       = Math.PI+(Math.PI*j)/2; // Ponto final no círculo
+        var anticlockwise  = i%2==0 ? false : true; // horário ou anti-horário
+
+        ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
+
+        if (i>1){
+          ctx.fill();
+        } else {
+          ctx.stroke();
+        }
+      }
+    }
+  }
+}
+
+ +

{{EmbedLiveSample("Arcos", 160, 210, "https://mdn.mozillademos.org/files/204/Canvas_arc.png")}}

+ +

Curvas de Bézier Cúbicas e Quadráticas

+ +

O próximo tipo de caminhos disponíveis são as Curvas de Bézier, disponíveis nas variedades cubícas e quadráticas. Elas são geralmente usadas para desenhar complexas formas orgânicas.

+ +
+
{{domxref("CanvasRenderingContext2D.quadraticCurveTo", "quadraticCurveTo(cp1x, cp1y, x, y)")}}
+
Desenha uma curva de Bézier quadrática da posição atual indicada pelo cursor, até a posição final especificada por x e y, usando o controle de pontos guiados por cp1x e cp1y.
+
{{domxref("CanvasRenderingContext2D.bezierCurveTo", "bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)")}}
+
Desenha uma curva de Bézier cúbica partindo da posição atual indicada pelo cursor, até a posição final especificada por x e y, usando o controle de pontos guiados por (cp1x, cp1y) e (cp2x, cp2y).
+
+ +

A diferença entre estes métodos pode ser descrita de forma melhor usando a imagem à direita. Uma curva quadrática de Bézier tem um ponto inicial e final (pontos azuis) e apenas um ponto de controle (indicado pelo ponto vermelho) enquanto que uma curva cúbica de Bézier utiliza dois pontos de controles.

+ +

Os parâmetros x e y em ambos os métodos são as coordenadas do ponto final. cp1x e cp1y são as coordenadas do primeiro ponto de controle, e cp2x e cp2y são as coordenadas do segundo ponto de controle.

+ +

Usando curvas de Bézier quadráticas e cúbicas pode ser algo bastante desafiador, porque ao contrário de um software de desenho vetorial, como o Adobe Illustrator, não temos resultados visuais imediatos sobre o que estamos fazendo. Isso torna bastante difícil desenhar formas complexas. No exemplo a seguir, vamos desenhar algumas formas orgânicas simples, mas se você tiver tempo e, acima de tudo, paciência, formas muito mais complexas podem ser criadas.

+ +

Não há nada muito difícil nestes exemplos. Em ambos os casos vemos uma sucessão de curvas sendo desenhadas, resultando no fim, em uma forma (shape) completa.

+ +

Curvas de Bézier Quadráticas

+ +

Este exemplo usa múltiplas curvas de Bézier quadráticas para renderizar um balão de fala.

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    // Exemplo de curvas de Bézier quadráticas
+    ctx.beginPath();
+    ctx.moveTo(75,25);
+    ctx.quadraticCurveTo(25,25,25,62.5);
+    ctx.quadraticCurveTo(25,100,50,100);
+    ctx.quadraticCurveTo(50,120,30,125);
+    ctx.quadraticCurveTo(60,120,65,100);
+    ctx.quadraticCurveTo(125,100,125,62.5);
+    ctx.quadraticCurveTo(125,25,75,25);
+    ctx.stroke();
+  }
+}
+
+ +

{{EmbedLiveSample('Curvas_de_Bézier_Quadráticas', 160, 160, "https://mdn.mozillademos.org/files/243/Canvas_quadratic.png")}}

+ +

Curvas de Bézier Cúbicas

+ +

Este exemplo desenha um coração usando curvas de Bézier cúbicas.

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+    var ctx = canvas.getContext('2d');
+
+    // Exemplo de curvas de Bézier cúbicas
+    ctx.beginPath();
+    ctx.moveTo(75,40);
+    ctx.bezierCurveTo(75,37,70,25,50,25);
+    ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
+    ctx.bezierCurveTo(20,80,40,102,75,120);
+    ctx.bezierCurveTo(110,102,130,80,130,62.5);
+    ctx.bezierCurveTo(130,62.5,130,25,100,25);
+    ctx.bezierCurveTo(85,25,75,37,75,40);
+    ctx.fill();
+  }
+}
+
+ +

{{EmbedLiveSample('Curvas_de_Bézier_Cúbicas', 160, 160, "https://mdn.mozillademos.org/files/207/Canvas_bezier.png")}}

+ +

Retângulos

+ +

Além dos três métodos que vimos em {{anch("Desenhando retângulos")}}, que desenham formas retangulares diretamente no canvas, há também o método rect(), que adiciona uma forma retangular a um caminho (path) atualmente aberto.

+ +
+
{{domxref("CanvasRenderingContext2D.rect", "rect(x, y, width, height)")}}
+
+

Desenha um retângulo cujo canto superior esquerdo é especificado por (x, y) com base em uma largura (width) e uma altura (height).

+
+
+ +

Quando este método é executado, o método moveTo() é automaticamente chamado com os parâmetros (0,0). Em outras palavras, a posição atual do cursor é automaticamente redefinida para as coordenadas padrões.

+ +

Combinando Elementos

+ +

Até agora, em cada exemplo dessa página foi usada apenas um tipo de função de caminho (path) para cada forma (shape). No entanto, não há nenhuma limitação para o número ou tipos de caminhos que você pode usar para criar um shape. Então, neste exemplo final, vamos combinar todas as funções de caminho para fazer um conjunto de personagens de jogo muito conhecido.

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+    var ctx = canvas.getContext('2d');
+
+    roundedRect(ctx,12,12,150,150,15);
+    roundedRect(ctx,19,19,150,150,9);
+    roundedRect(ctx,53,53,49,33,10);
+    roundedRect(ctx,53,119,49,16,6);
+    roundedRect(ctx,135,53,49,33,10);
+    roundedRect(ctx,135,119,25,49,10);
+
+    ctx.beginPath();
+    ctx.arc(37,37,13,Math.PI/7,-Math.PI/7,false);
+    ctx.lineTo(31,37);
+    ctx.fill();
+
+    for(var i=0;i<8;i++){
+      ctx.fillRect(51+i*16,35,4,4);
+    }
+
+    for(i=0;i<6;i++){
+      ctx.fillRect(115,51+i*16,4,4);
+    }
+
+    for(i=0;i<8;i++){
+      ctx.fillRect(51+i*16,99,4,4);
+    }
+
+    ctx.beginPath();
+    ctx.moveTo(83,116);
+    ctx.lineTo(83,102);
+    ctx.bezierCurveTo(83,94,89,88,97,88);
+    ctx.bezierCurveTo(105,88,111,94,111,102);
+    ctx.lineTo(111,116);
+    ctx.lineTo(106.333,111.333);
+    ctx.lineTo(101.666,116);
+    ctx.lineTo(97,111.333);
+    ctx.lineTo(92.333,116);
+    ctx.lineTo(87.666,111.333);
+    ctx.lineTo(83,116);
+    ctx.fill();
+
+    ctx.fillStyle = "white";
+    ctx.beginPath();
+    ctx.moveTo(91,96);
+    ctx.bezierCurveTo(88,96,87,99,87,101);
+    ctx.bezierCurveTo(87,103,88,106,91,106);
+    ctx.bezierCurveTo(94,106,95,103,95,101);
+    ctx.bezierCurveTo(95,99,94,96,91,96);
+    ctx.moveTo(103,96);
+    ctx.bezierCurveTo(100,96,99,99,99,101);
+    ctx.bezierCurveTo(99,103,100,106,103,106);
+    ctx.bezierCurveTo(106,106,107,103,107,101);
+    ctx.bezierCurveTo(107,99,106,96,103,96);
+    ctx.fill();
+
+    ctx.fillStyle = "black";
+    ctx.beginPath();
+    ctx.arc(101,102,2,0,Math.PI*2,true);
+    ctx.fill();
+
+    ctx.beginPath();
+    ctx.arc(89,102,2,0,Math.PI*2,true);
+    ctx.fill();
+  }
+}
+
+// Uma função útil para desenhar um retângulo com cantos arredondados.
+
+function roundedRect(ctx,x,y,width,height,radius){
+  ctx.beginPath();
+  ctx.moveTo(x,y+radius);
+  ctx.lineTo(x,y+height-radius);
+  ctx.quadraticCurveTo(x,y+height,x+radius,y+height);
+  ctx.lineTo(x+width-radius,y+height);
+  ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius);
+  ctx.lineTo(x+width,y+radius);
+  ctx.quadraticCurveTo(x+width,y,x+width-radius,y);
+  ctx.lineTo(x+radius,y);
+  ctx.quadraticCurveTo(x,y,x,y+radius);
+  ctx.stroke();
+}
+
+ +

O resultado é:

+ +

{{EmbedLiveSample("Combinando_Elementos", 160, 160, "https://mdn.mozillademos.org/files/9849/combinations.png")}}

+ +

Não vamos discutir isso em detalhes, uma vez que é realmente muito simples. As coisas mais importantes a serem observadas são o uso da propriedade fillStyle no contexto de desenho e o uso de uma função auxiliar (neste caso roundedRect()). Usando funções auxiliares para construir um desenho frequentemente pode ser muito útil, além de reduzir a quantidade de código que você precisa, bem como a sua complexidade.

+ +

Vamos dar uma nova olhada em fillStyle, em mais detalhes, mais adiante neste tutorial. Aqui, tudo o que estamos fazendo é apenas usando-o para alterar sucessivamente a cor de preenchimento dos caminhos (paths) de cor preta (padrão) para branca.

+ +

Path2D

+ +

Como vimos no último exemplo, pode haver uma série de paths e comandos de desenho para desenhar objetos em sua tela. Para simplificar o código e melhorar o desempenho, o objeto {{domxref("Path2D")}}, disponível em versões recentes dos navegadores, permite armazenar em cache ou gravar esses comandos de desenho. Com ele, você pode construir seus paths rapidamente.
+ Vamos ver como podemos construir um objeto de Path2D:

+ +
+
{{domxref("Path2D.Path2D", "Path2D()")}}
+
+

O construtor de Path2D() retorna um objeto Path2D instanciado recentemente, opcionalmente através de um outro objeto Path2D como argumento (cria uma cópia) ou, opcionalmente, com uma string que representam dados de paths em SVG.

+
+
+ +
new Path2D();     // objeto vazio de Path2D
+new Path2D(path); // cópia de outro objeto de Path2D
+new Path2D(d);    // objeto criado a partir de paths em SVG
+ +

Todos os métodos de caminho (path methods) como moveTo, rect, arc ou quadraticCurveTo, etc., que temos de saber acima, estão disponíveis em Path2D.

+ +

A API Path2D também adiciona uma maneira de combinar caminhos usando o método addPath. Isso pode ser útil quando você deseja criar objetos com vários componentes, por exemplo.

+ +
+
{{domxref("Path2D.addPath", "Path2D.addPath(path [, transform])")}}
+
Adiciona um path para o path atual através de uma matriz de transformação opcional.
+
+ +

Exemplo de Path2D

+ +

Neste exemplo, estamos criando um retângulo e um círculo. Ambos são armazenados como um objeto de Path2D, de modo que eles estão disponíveis para uso posterior. Com a nova API Path2D, vários métodos foram atualizados como, por exemplo, opcionalmente usar um objeto Path2D em vez do path atual. Aqui, os métodos stroke e fill são usados, ​​com um argumento de path, para desenhar ambos os objetos na tela, por exemplo.

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    var rectangle = new Path2D();
+    rectangle.rect(10, 10, 50, 50);
+
+    var circle = new Path2D();
+    circle.moveTo(125, 35);
+    circle.arc(100, 35, 25, 0, 2 * Math.PI);
+
+    ctx.stroke(rectangle);
+    ctx.fill(circle);
+  }
+}
+
+ +

{{EmbedLiveSample("Exemplo_de_Path2D", 140, 110, "https://mdn.mozillademos.org/files/9851/path2d.png")}}

+ +

Usando paths em SVG

+ +

Outro recurso poderoso da nova API de Path2D é a utilização de dados de path em SVG para inicializar caminhos (paths) no canvas. Isso permite que você crie dados de paths que possam ser utilizados tanto no SVG como no canvas.

+ +

O caminho se moverá para o ponto (M10 10) e então se moverá horizontalmente 80 pontos para a direita (h 80), depois 80 pontos para baixo (v 80), então 80 pontos para a esquerda (h -80) e, por fim, volta para o início (z). Você pode ver este exemplo na página do construtor do Path2D.

+ +
var p = new Path2D('M10 10 h 80 v 80 h -80 Z');
+ +
{{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_usage", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}}
diff --git a/files/pt-br/web/api/canvas_api/tutorial/drawing_text/index.html b/files/pt-br/web/api/canvas_api/tutorial/drawing_text/index.html new file mode 100644 index 0000000000..550719e627 --- /dev/null +++ b/files/pt-br/web/api/canvas_api/tutorial/drawing_text/index.html @@ -0,0 +1,169 @@ +--- +title: Drawing text +slug: Web/Guide/HTML/Canvas_tutorial/Drawing_text +tags: + - Canvas + - Intermediário + - Tutorial + - graficos +translation_of: Web/API/Canvas_API/Tutorial/Drawing_text +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "Web/API/Canvas_API/Tutorial/Using_images")}}
+ +
+

Após entender como aplicar estilos e cores no capítulo anterior, nós veremos agora como desenhar texto dentro do contexto de uma canvas.

+
+ +

Desenhando texto

+ +

O context de renderização da canvas fornece dois métodos para renderização textual: 

+ +
+
{{domxref("CanvasRenderingContext2D.fillText", "fillText(text, x, y [, maxWidth])")}}
+
Preenche com um determinado texto as cordenadas (x,y) recebidas. Opcionalmente com uma largura máxima para o desenho.
+
{{domxref("CanvasRenderingContext2D.strokeText", "strokeText(text, x, y [, maxWidth])")}}
+
Traçeja um determinado texto nas cordenadas (x,y) recebidas. Opcionalmente com uma largura máxima para o desenho.
+
+ +

Um exemplo com fillText

+ +

O texto a seguir é rederizado utilizando fillStyle.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.font = '48px serif';
+  ctx.fillText('Hello world', 10, 50);
+}
+ + + +

{{EmbedLiveSample("A_fillText_example", 310, 110)}}

+ +

Um exemplo com strokeText

+ +

 

+ +

O texto é preenchido usando o strokeStyle atual.

+ +

 

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.font = '48px serif';
+  ctx.strokeText('Hello world', 10, 50);
+}
+ + + +

{{EmbedLiveSample("A_strokeText_example", 310, 110)}}

+ +

Estilo de Texto

+ +

Nos exemplos anteriores, já usamos a propriedade font para tornar o texto um pouco maior que o tamanho padrão. Existem mais algumas propriedades que permitem ajustar a maneira como o texto é exibido no canvas:

+ +
+
{{domxref("CanvasRenderingContext2D.font", "font = value")}}
+
The current text style being used when drawing text. This string uses the same syntax as the CSS {{cssxref("font")}} property. The default font is 10px sans-serif.
+
{{domxref("CanvasRenderingContext2D.textAlign", "textAlign = value")}}
+
Text alignment setting. Possible values: start, end, left, right or center. The default value is start.
+
{{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline = value")}}
+
Baseline alignment setting. Possible values: top, hanging, middle, alphabetic, ideographic, bottom. The default value is alphabetic.
+
{{domxref("CanvasRenderingContext2D.direction", "direction = value")}}
+
Directionality. Possible values: ltr, rtl, inherit. The default value is inherit.
+
+ +

Essas propriedades podem ser similares para você, se você trabalhou com CSS antes.

+ +

O diagrama seguinte do WHATWG demonstra as várias baselines suportadas pela propriedade do textBaselineThe top of the em square is +roughly at the top of the glyphs in a font, the hanging baseline is +where some glyphs like आ are anchored, the middle is half-way +between the top of the em square and the bottom of the em square, +the alphabetic baseline is where characters like Á, ÿ, +f, and Ω are anchored, the ideographic baseline is +where glyphs like 私 and 達 are anchored, and the bottom +of the em square is roughly at the bottom of the glyphs in a +font. The top and bottom of the bounding box can be far from these +baselines, due to glyphs extending far outside the em square.

+ +

O exemplo de uma textBaseline

+ +

Edite o código abaixo e veja as atualizações em tempo real no canvas.

+ +
ctx.font = '48px serif';
+ctx.textBaseline = 'hanging';
+ctx.strokeText('Hello world', 0, 100);
+
+ + + +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

Advanced text measurements

+ +

In the case you need to obtain more details about the text, the following method allows you to measure it.

+ +
+
{{domxref("CanvasRenderingContext2D.measureText", "measureText()")}}
+
Returns a {{domxref("TextMetrics")}} object containing the width, in pixels, that the specified text will be when drawn in the current text style.
+
+ +

The following code snippet shows how you can measure a text and get its width.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var text = ctx.measureText('foo'); // TextMetrics object
+  text.width; // 16;
+}
+
+ +

Notas específicas - Gecko

+ +

No Gecko (a engine de renderização do Firefox, Firefox OS e outras aplicações Mozilla), algumas APIs prefixadas foram implementadas em versões anteriores para escrever texto em um canvas. Essas APIs agora estão depreciadas e removidas, e não são mais garantidas para uso.

+ +

{{PreviousNext("Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "Web/API/Canvas_API/Tutorial/Using_images")}}

diff --git a/files/pt-br/web/api/canvas_api/tutorial/finale/index.html b/files/pt-br/web/api/canvas_api/tutorial/finale/index.html new file mode 100644 index 0000000000..9cd393b652 --- /dev/null +++ b/files/pt-br/web/api/canvas_api/tutorial/finale/index.html @@ -0,0 +1,49 @@ +--- +title: Conclusão +slug: Web/Guide/HTML/Canvas_tutorial/Conclusão +translation_of: Web/API/Canvas_API/Tutorial/Finale +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Optimizing_canvas")}}
+ +
+

Parabéns! Você terminou o Canvas tutorial! Este conhecimento ajudará você a fazer ótimos gráficos 2D na web.

+
+ +

Mais exemplos e tutoriais

+ +

Há uma variedade de demonstrações e mais explicações sobre canvas nesses sites:

+ +
+
Codepen.io
+
Front End Developer Playground & Code Editor no navegador.
+
HTML5CanvasTutorials
+
Exemplos para a maioria das APIs canvas.
+
31 days of Canvas tutorials
+
Uma ótima fundação para codificação visual em JavaScript .
+
Game development
+
O jogo é uma das atividades de computador mais populares. Novas tecnologias estão chegando constantemente para possibilitar o desenvolvimento de jogos melhores e mais poderosos que podem ser executados em qualquer navegador da Web compatível com os padrões.
+
+ +

Outras Web APIs

+ +

Essas APIs podem ser úteis, quando trabalhando mais com canvas e gráficos:

+ +
+
WebGL
+
API para renderização interativa de gráficos 3D.
+
SVG
+
Scalable Vector Graphics permitem que você descreva imagens como conjuntos de vetores (linhas) e formas, a fim de permitir que eles sejam redimensionados sem problemas, independentemente do tamanho em que são desenhados.
+
Web Audio
+
A Web Audio API fornece um sistema poderoso e versátil para controlar o áudio na Web, permitindo que os desenvolvedores escolham fontes de áudio, adicionem efeitos ao áudio, criem visualizações de áudio, apliquem efeitos espaciais (como panning) e muito mais.
+
+ +

Questions

+ +
+
Stackoverflow
+
Perguntas marcadas como "canvas".
+
Comentários sobre esse tutorial – A comunidade MDN de documentação
+
Se você tiver algum comentário sobre este tutorial ou quiser nos agradecer, fique à vontade para entrar em contato conosco!
+
+ +

{{PreviousNext("Web/API/Canvas_API/Tutorial/Optimizing_canvas")}}

diff --git a/files/pt-br/web/api/canvas_api/tutorial/index.html b/files/pt-br/web/api/canvas_api/tutorial/index.html new file mode 100644 index 0000000000..2f9dbab7df --- /dev/null +++ b/files/pt-br/web/api/canvas_api/tutorial/index.html @@ -0,0 +1,56 @@ +--- +title: Canvas tutorial +slug: Web/Guide/HTML/Canvas_tutorial +tags: + - Canvas + - Graphics + - Guide + - HTML + - HTML5 + - Intermediate + - Web +translation_of: Web/API/Canvas_API/Tutorial +--- +

 {{CanvasSidebar}}

+ +

<canvas> é um elemento HTML que pode ser usado para desenhar usando linguagem de "script" (normalmente JavaScript). Isto pode ser usado, por exemplo, para desenhar gráficos, fazer composições de fotos ou simples (e não tão simples) animações. As imagens à direita mostram exemplos de implementações <canvas> que serão parte deste tutorial.

+ +

Este tutorial descreve como utilizar o elemento <canvas> para desenhar gráficos 2D, iniciando com o básico. Os exemplos fornecidos devem lhe trazer algumas ideias claras sobre o que você pode fazer com o canvas e irá fornecer trechos de código que podem lhe ajudar na contrução do seu próprio conteúdo. 

+ +

Introduzido pela primeira vez no WebKit pela Apple para o OS X Dashboard, o <canvas>, desde então, tem sido implementado em navegadores. Hoje, todos os principais navegadores suportam isso.

+ +

Antes de começar

+ +

Usar o elemento <canvas> não é muito difícil, mas você precisa de um conhecimento básico sobre HTML e JavaScript. O elemento <canvas> não é suportado por alguns navegadores antigos, mas é suportado em versões recentes da maioria dos navegadores. O tamanho padrão de um canvas é de 300px * 150px (largura * altura). Porém, tamanhos customizados podem ser definidos usando as propriedades width e height do CSS. Para desenhar gráficos no canvas iremos usar um contexto de objeto JavaScript, o que criará gráficos em tempo real.

+ +

Nesse tutorial

+ + + +

Veja também

+ + + +

Nota dos contribuidores

+ +

Devido a um erro técnico lamentável que ocorreu na semana de 17 de junho de 2013, perdemos parte do histórico deste tutorial, incluindo atribuições a todos os contribuidores anteriores ao seu conteúdo. Pedimos desculpas por isso, e espero que você nos perdoe desse infeliz infortúnio.

+ +
{{ Next("Web/Guide/HTML/Canvas_tutorial/Utilizacao_basica") }}
diff --git a/files/pt-br/web/api/canvas_api/tutorial/optimizing_canvas/index.html b/files/pt-br/web/api/canvas_api/tutorial/optimizing_canvas/index.html new file mode 100644 index 0000000000..d18afddefa --- /dev/null +++ b/files/pt-br/web/api/canvas_api/tutorial/optimizing_canvas/index.html @@ -0,0 +1,115 @@ +--- +title: Otimizando canvas +slug: Web/Guide/HTML/Canvas_tutorial/Otimizando_Canvas +tags: + - Canvas + - Gráfico 2D + - Otimização +translation_of: Web/API/Canvas_API/Tutorial/Optimizing_canvas +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}
+ +
+

O elemento {{HTMLElement("canvas")}} é um dos padrões mais largamente utilizados para renderização de gráficos 2D na Web. É muito usado em jogos e em visualizações complexas. Porém, quando sítios web e aplicativos utilizam canvas até seus limites, começam a surgir problemas de perda de performance. Este artigo tem o objetivo de prover sugestões de otimização de seu elemento canvas e garantir que seu site ou aplicativo funcione melhor.

+
+ +

Dicas de performance

+ +

O que segue é uma coleção de dicas para melhorar a performance.

+ +

Pre-render similar primitives or repeating objects on an off-screen canvas

+ +

If you find yourself with complex drawing operations on each frame, consider creating an offscreen canvas, draw to it once (or whenever it changes) on the offscreen canvas, then on each frame draw the offscreen canvas.

+ +
myEntity.offscreenCanvas = document.createElement('canvas');
+myEntity.offscreenCanvas.width = myEntity.width;
+myEntity.offscreenCanvas.height = myEntity.height;
+myEntity.offscreenContext = myEntity.offscreenCanvas.getContext('2d');
+
+myEntity.render(myEntity.offscreenContext);
+
+ +

Avoid floating-point coordinates and use integers instead

+ +

Sub-pixel rendering occurs when you render objects on a canvas without whole values.

+ +
ctx.drawImage(myImage, 0.3, 0.5);
+
+ +

This causes the browser to do extra calculations to create the anti-aliasing effect. To avoid this, make sure to round all co-ordinates used in calls to {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}} using {{jsxref("Math.floor()")}}, for example.

+ +

Don’t scale images in drawImage

+ +

Cache various sizes of your images on an offscreen canvas when loading as opposed to constantly scaling them in {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}}.

+ +

Use multiple layered canvases for complex scenes

+ +

You may find you have some elements that are frequently changing and moving around whereas other things (like UI) never change. An optimization in this situation is to create layers using multiple canvas elements.

+ +

For example you could create a UI layer that sits on top of everything and is only drawn during user input. You could create game layer where the frequently updating entities exist and a background layer for entities that rarely update.

+ +
<div id="stage">
+  <canvas id="ui-layer" width="480" height="320"></canvas>
+  <canvas id="game-layer" width="480" height="320"></canvas>
+  <canvas id="background-layer" width="480" height="320"></canvas>
+</div>
+
+<style>
+  #stage {
+    width: 480px;
+    height: 320px;
+    position: relative;
+    border: 2px solid black
+  }
+  canvas { position: absolute; }
+  #ui-layer { z-index: 3 }
+  #game-layer { z-index: 2 }
+  #background-layer { z-index: 1 }
+</style>
+
+ +

CSS for large background images

+ +

If like most games you have a static background image, use a plain {{HTMLElement("div")}} element with a CSS {{cssxref("background")}} property and position it under the canvas. This will avoid drawing a large image to the canvas on every tick.

+ +

Scaling canvas using CSS transforms

+ +

CSS transforms are faster by using the GPU. Best case is to not scale the canvas or have a smaller canvas and scale up rather than a bigger canvas and scale down. For Firefox OS, target 480 x 320 px.

+ +
var scaleX = window.innerWidth / canvas.width;
+var scaleY = window.innerHeight / canvas.height;
+
+var scaleToFit = Math.min(scaleX, scaleY);
+var scaleToCover = Math.max(scaleX, scaleY);
+
+stage.style.transformOrigin = '0 0'; //scale from top left
+stage.style.transform = 'scale(' + scaleToFit + ')';
+
+ +

Turn off transparency

+ +

If your game uses canvas and doesn’t need to be transparent, set the alpha option to false when creating a drawing context with HTMLCanvasElement.getContext(). This information can be used internally to optimize rendering.

+ +
var ctx = canvas.getContext('2d', { alpha: false });
+ +

More tips

+ + + +

See also

+ + + +

{{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}

diff --git a/files/pt-br/web/api/canvas_api/tutorial/using_images/index.html b/files/pt-br/web/api/canvas_api/tutorial/using_images/index.html new file mode 100644 index 0000000000..0b0dcfe7e7 --- /dev/null +++ b/files/pt-br/web/api/canvas_api/tutorial/using_images/index.html @@ -0,0 +1,333 @@ +--- +title: Using images +slug: Web/Guide/HTML/Canvas_tutorial/Using_images +translation_of: Web/API/Canvas_API/Tutorial/Using_images +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_text", "Web/API/Canvas_API/Tutorial/Transformations" )}}
+ +
+

Até agora nós criamos nossos próprios shapes e aplicamos estilos(applied styles) a eles. Um dos recursos mais interessantes do {{HTMLElement("canvas")}} é a capacidade de usar imagens. Eles podem ser usados para composição dinâmica de fotos ou como pano de fundo de gráficos, como sprites em jogos e assim por diante. Imagens externas podem ser usadas em qualquer formato suportado pelo navegador, tais como PNG, GIF, ou JPEG. Você pode até usar a imagem produzida por outros elementos da tela na mesma página que a fonte!

+
+ +

A importação de imagens para o canvas é basicamente um processo de duas etapas:

+ +
    +
  1. Obter uma referência a um objeto {{domxref("HTMLImageElement")}} ou a outro elemento do canvas como fonte. Também é possível usar imagens fornecendo uma URL.
    2. +
  2. Desenhar a imagem no canvas usando a função drawImage() .
    3. +
+ +

Vamos dar uma olhada em como fazer isso.

+ +

Getting images to draw

+ +

The canvas API is able to use any of the following data types as an image source:

+ +
+
{{domxref("HTMLImageElement")}}
+
These are images created using the Image() constructor, as well as any {{HTMLElement("img")}} element.
+
{{domxref("SVGImageElement")}}
+
These are images embedded using the {{SVGElement("image")}} element.
+
{{domxref("HTMLVideoElement")}}
+
Using an HTML {{HTMLElement("video")}} element as your image source grabs the current frame from the video and uses it as an image.
+
{{domxref("HTMLCanvasElement")}}
+
You can use another {{HTMLElement("canvas")}} element as your image source.
+
+ +

These sources are collectively referred to by the type {{domxref("CanvasImageSource")}}.

+ +

There are several ways to get images for use on a canvas.

+ +

Using images from the same page

+ +

We can obtain a reference to images on the same page as the canvas by using one of:

+ + + +

Using images from other domains

+ +

Using the {{htmlattrxref("crossorigin", "img")}} attribute of an {{HTMLElement("img")}} element (reflected by the {{domxref("HTMLImageElement.crossOrigin")}} property), you can request permission to load an image from another domain for use in your call to drawImage(). If the hosting domain permits cross-domain access to the image, the image can be used in your canvas without tainting it; otherwise using the image will taint the canvas.

+ +

Using other canvas elements

+ +

Just as with normal images, we access other canvas elements using either the {{domxref("document.getElementsByTagName()")}} or {{domxref("document.getElementById()")}} method. Be sure you've drawn something to the source canvas before using it in your target canvas.

+ +

One of the more practical uses of this would be to use a second canvas element as a thumbnail view of the other larger canvas.

+ +

Creating an image from scratch

+ +

Another option is to create new {{domxref("HTMLImageElement")}} objects in our script. To do this, you can use the convenient Image() constructor:

+ +
var img = new Image();   // Create new img element
+img.src = 'myImage.png'; // Set source path
+
+ +

When this script gets executed, the image starts loading.

+ +

If you try to call drawImage() before the image has finished loading, it won't do anything (or, in older browsers, may even throw an exception). So you need to be sure to use the load event so you don't try this before the image has loaded:

+ +
var img = new Image();   // Create new img element
+img.addEventListener('load', function() {
+  // execute drawImage statements here
+}, false);
+img.src = 'myImage.png'; // Set source path
+
+ +

If you're only using one external image this can be a good approach, but once you need to track more than one we need to resort to something more clever. It's beyond the scope of this tutorial to look at image pre-loading tactics, but you should keep that in mind.

+ +

Embedding an image via data: URL

+ +

Another possible way to include images is via the data: url. Data URLs allow you to completely define an image as a Base64 encoded string of characters directly in your code.

+ +
var img = new Image();   // Create new img element
+img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';
+
+ +

One advantage of data URLs is that the resulting image is available immediately without another round trip to the server. Another potential advantage is that it is also possible to encapsulate in one file all of your CSS, JavaScript, HTML, and images, making it more portable to other locations.

+ +

Some disadvantages of this method are that your image is not cached, and for larger images the encoded url can become quite long.

+ +

Using frames from a video

+ +

You can also use frames from a video being presented by a {{HTMLElement("video")}} element (even if the video is not visible). For example, if you have a {{HTMLElement("video")}} element with the ID "myvideo", you can do this:

+ +
function getMyVideo() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    return document.getElementById('myvideo');
+  }
+}
+
+ +

This returns the {{domxref("HTMLVideoElement")}} object for the video, which, as covered earlier, is one of the objects that can be used as a CanvasImageSource.

+ +

Drawing images

+ +

Once we have a reference to our source image object we can use the drawImage() method to render it to the canvas. As we will see later the drawImage() method is overloaded and has several variants. In its most basic form it looks like this:

+ +
+
{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, x, y)")}}
+
Draws the CanvasImageSource specified by the image parameter at the coordinates (x, y).
+
+ +
+

SVG images must specify a width and height in the root <svg> element.

+
+ +

Example: A simple line graph

+ +

In the following example, we will use an external image as the backdrop for a small line graph. Using backdrops can make your script considerably smaller because we can avoid the need for code to generate the background. In this example, we're only using one image, so I use the image object's load event handler to execute the drawing statements. The drawImage() method places the backdrop at the coordinate (0, 0), which is the top-left corner of the canvas.

+ + + +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var img = new Image();
+  img.onload = function() {
+    ctx.drawImage(img, 0, 0);
+    ctx.beginPath();
+    ctx.moveTo(30, 96);
+    ctx.lineTo(70, 66);
+    ctx.lineTo(103, 76);
+    ctx.lineTo(170, 15);
+    ctx.stroke();
+  };
+  img.src = 'https://mdn.mozillademos.org/files/5395/backdrop.png';
+}
+ +

The resulting graph looks like this:

+ +

{{EmbedLiveSample("Example_A_simple_line_graph", 220, 160, "https://mdn.mozillademos.org/files/206/Canvas_backdrop.png")}}

+ +

Scaling

+ +

The second variant of the drawImage() method adds two new parameters and lets us place scaled images on the canvas.

+ +
+
{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, x, y, width, height)")}}
+
This adds the width and height parameters, which indicate the size to which to scale the image when drawing it onto the canvas.
+
+ +

Example: Tiling an image

+ +

In this example, we'll use an image as a wallpaper and repeat it several times on the canvas. This is done simply by looping and placing the scaled images at different positions. In the code below, the first for loop iterates over the rows. The second for loop iterates over the columns. The image is scaled to one third of its original size, which is 50x38 pixels.

+ +
+

Note: Images can become blurry when scaling up or grainy if they're scaled down too much. Scaling is probably best not done if you've got some text in it which needs to remain legible.

+
+ + + +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var img = new Image();
+  img.onload = function() {
+    for (var i = 0; i < 4; i++) {
+      for (var j = 0; j < 3; j++) {
+        ctx.drawImage(img, j * 50, i * 38, 50, 38);
+      }
+    }
+  };
+  img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
+}
+ +

The resulting canvas looks like this:

+ +

{{EmbedLiveSample("Example_Tiling_an_image", 160, 160, "https://mdn.mozillademos.org/files/251/Canvas_scale_image.png")}}

+ +

Slicing

+ +

The third and last variant of the drawImage() method has eight parameters in addition to the image source. It lets us cut out a section of the source image, then scale and draw it on our canvas.

+ +
+
{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)")}}
+
Given an image, this function takes the area of the source image specified by the rectangle whose top-left corner is (sx, sy) and whose width and height are sWidth and sHeight and draws it into the canvas, placing it on the canvas at (dx, dy) and scaling it to the size specified by dWidth and dHeight.
+
+ +

To really understand what this does, it may help to look at the image to the right. The first four parameters define the location and size of the slice on the source image. The last four parameters define the rectangle into which to draw the image on the destination canvas.

+ +

Slicing can be a useful tool when you want to make compositions. You could have all elements in a single image file and use this method to composite a complete drawing. For instance, if you want to make a chart you could have a PNG image containing all the necessary text in a single file and depending on your data could change the scale of your chart fairly easily. Another advantage is that you don't need to load every image individually, which can improve load performance.

+ +

Example: Framing an image

+ +

In this example, we'll use the same rhino as in the previous example, but we'll slice out its head and composite it into a picture frame. The picture frame image is a 24-bit PNG which includes a drop shadow. Because 24-bit PNG images include a full 8-bit alpha channel, unlike GIF and 8-bit PNG images, it can be placed onto any background without worrying about a matte color.

+ +
<html>
+ <body onload="draw();">
+   <canvas id="canvas" width="150" height="150"></canvas>
+   <div style="display:none;">
+     <img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" width="300" height="227">
+     <img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150">
+   </div>
+ </body>
+</html>
+
+ +
function draw() {
+  var canvas = document.getElementById('canvas');
+  var ctx = canvas.getContext('2d');
+
+  // Draw slice
+  ctx.drawImage(document.getElementById('source'),
+                33, 71, 104, 124, 21, 20, 87, 104);
+
+  // Draw frame
+  ctx.drawImage(document.getElementById('frame'), 0, 0);
+}
+ +

We took a different approach to loading the images this time. Instead of loading them by creating new {{domxref("HTMLImageElement")}} objects, we included them as {{HTMLElement("img")}} tags directly in our HTML source and retrieved the images from those. The images are hidden from output by setting the CSS property {{cssxref("display")}} to none for those images.

+ +

{{EmbedLiveSample("Example_Framing_an_image", 160, 160, "https://mdn.mozillademos.org/files/226/Canvas_drawimage2.jpg")}}

+ +

The script itself is very simple. Each {{HTMLElement("img")}} is assigned an ID attribute, which makes them easy to select using {{domxref("document.getElementById()")}}. We then simply use drawImage() to slice the rhino out of the first image and scale him onto the canvas, then draw the frame on top using a second drawImage() call.

+ + + +

In the final example of this chapter, we'll build a little art gallery. The gallery consists of a table containing several images. When the page is loaded, a {{HTMLElement("canvas")}}  element is inserted for each image and a frame is drawn around it.

+ +

In this case, every image has a fixed width and height, as does the frame that's drawn around them. You could enhance the script so that it uses the image's width and height to make the frame fit perfectly around it.

+ +

The code below should be self-explanatory. We loop through the {{domxref("document.images")}} container and add new canvas elements accordingly. Probably the only thing to note, for those not so familiar with the DOM, is the use of the {{domxref("Node.insertBefore")}} method. insertBefore() is a method of the parent node (a table cell) of the element (the image) before which we want to insert our new node (the canvas element).

+ +
<html>
+ <body onload="draw();">
+     <table>
+      <tr>
+        <td><img src="https://mdn.mozillademos.org/files/5399/gallery_1.jpg"></td>
+        <td><img src="https://mdn.mozillademos.org/files/5401/gallery_2.jpg"></td>
+        <td><img src="https://mdn.mozillademos.org/files/5403/gallery_3.jpg"></td>
+        <td><img src="https://mdn.mozillademos.org/files/5405/gallery_4.jpg"></td>
+      </tr>
+      <tr>
+        <td><img src="https://mdn.mozillademos.org/files/5407/gallery_5.jpg"></td>
+        <td><img src="https://mdn.mozillademos.org/files/5409/gallery_6.jpg"></td>
+        <td><img src="https://mdn.mozillademos.org/files/5411/gallery_7.jpg"></td>
+        <td><img src="https://mdn.mozillademos.org/files/5413/gallery_8.jpg"></td>
+      </tr>
+     </table>
+     <img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150">
+ </body>
+</html>
+
+ +

And here's some CSS to make things look nice:

+ +
body {
+  background: 0 -100px repeat-x url(https://mdn.mozillademos.org/files/5415/bg_gallery.png) #4F191A;
+  margin: 10px;
+}
+
+img {
+  display: none;
+}
+
+table {
+  margin: 0 auto;
+}
+
+td {
+  padding: 15px;
+}
+
+ +

Tying it all together is the JavaScript to draw our framed images:

+ +
function draw() {
+
+  // Loop through all images
+  for (var i = 0; i < document.images.length; i++) {
+
+    // Don't add a canvas for the frame image
+    if (document.images[i].getAttribute('id') != 'frame') {
+
+      // Create canvas element
+      canvas = document.createElement('canvas');
+      canvas.setAttribute('width', 132);
+      canvas.setAttribute('height', 150);
+
+      // Insert before the image
+      document.images[i].parentNode.insertBefore(canvas,document.images[i]);
+
+      ctx = canvas.getContext('2d');
+
+      // Draw image to canvas
+      ctx.drawImage(document.images[i], 15, 20);
+
+      // Add frame
+      ctx.drawImage(document.getElementById('frame'), 0, 0);
+    }
+  }
+}
+ +

{{EmbedLiveSample("Art_gallery_example", 725, 400)}}

+ +

Controlling image scaling behavior

+ +

As mentioned previously, scaling images can result in fuzzy or blocky artifacts due to the scaling process. You can use the drawing context's {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}} property to control the use of image smoothing algorithms when scaling images within your context. By default, this is true, meaning images will be smoothed when scaled. You can disable this feature like this:

+ +
ctx.mozImageSmoothingEnabled = false;
+ctx.webkitImageSmoothingEnabled = false;
+ctx.msImageSmoothingEnabled = false;
+ctx.imageSmoothingEnabled = false;
+
+ +

{{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_text", "Web/API/Canvas_API/Tutorial/Transformations")}}

diff --git a/files/pt-br/web/api/crypto/getrandomvalues/index.html b/files/pt-br/web/api/crypto/getrandomvalues/index.html new file mode 100644 index 0000000000..7e54e933ed --- /dev/null +++ b/files/pt-br/web/api/crypto/getrandomvalues/index.html @@ -0,0 +1,116 @@ +--- +title: RandomSource.getRandomValues() +slug: Web/API/RandomSource/getRandomValues +translation_of: Web/API/Crypto/getRandomValues +--- +

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

+ +

O método RandomSource.getRandomValues() permite que você obtenha valores criptográficos randômicos. O array passado como parametro é preenchido com números randômicos (randômicos no sentido criptográfico).

+ +

Para garantir performance suficiente, as implementações não estão usando um gerador de número randômico de verdade, mas estão usando um gerador de número pseudo-randômico alimentado com um valor com {{Glossary("entropia")}} suficiente. Os PRNG (pseudo-random number generator - gerador de número pseudo-randômico) usados diferem de uma implementação para a outra, mas são adequadas para usos criptográficos. As implementações precisam ter um valor de alimentação com entropia suficiente, como uma fonte de entropia a nível de sistema.

+ +

Sintaxe

+ +
cryptoObj.getRandomValues(typedArray);
+ +

Parâmetros

+ +
+
typedArray
+
É uma {{jsxref("TypedArray")}} de números inteiros, que pode ser {{jsxref("Int8Array")}}, {{jsxref("Uint8Array")}}, {{jsxref("Uint16Array")}}, {{jsxref("Int32Array")}}, ou {{jsxref("Uint32Array")}}. Todos os elementos no array serão sobrescristos com números randômicos.
+
+ +

Exceções

+ + + +

Exemplo

+ +
/* assumindo que window.crypto.getRandomValues está disponível */
+
+var array = new Uint32Array(10);
+window.crypto.getRandomValues(array);
+
+console.log("Seus números da sorte são:");
+for (var i = 0; i < array.length; i++) {
+    console.log(array[i]);
+}
+
+ +

Especificação

+ + + + + + + + + + + + + + +
EspecificaçãoEstadoComentário
{{SpecName('Web Crypto API', '#RandomSource-method-getRandomValues')}}{{Spec2('Web Crypto API')}}Definição inicial
+ + + +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support11.0 {{ webkitbug("22049") }}21.011.015.03.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatNo() }}23.021.011.0{{ CompatNo() }}6
+
+ +

Veja também

+ + diff --git a/files/pt-br/web/api/cryptokey/algorithm/index.html b/files/pt-br/web/api/cryptokey/algorithm/index.html deleted file mode 100644 index d80199a4ed..0000000000 --- a/files/pt-br/web/api/cryptokey/algorithm/index.html +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: CryptoKey.algorithm -slug: Web/API/CryptoKey/algorithm -tags: - - API - - CryptoKey - - Propriedade - - Read-only - - Referencia - - Web Crypto API -translation_of: Web/API/CryptoKey -translation_of_original: 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/web/api/cryptokey/extractable/index.html b/files/pt-br/web/api/cryptokey/extractable/index.html deleted file mode 100644 index 4fe2885cbc..0000000000 --- a/files/pt-br/web/api/cryptokey/extractable/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: CryptoKey.extractable -slug: Web/API/CryptoKey/extractable -tags: - - API - - CryptoKey - - Propriedade - - Read-only - - Referencia - - Web Crypto API -translation_of: Web/API/CryptoKey -translation_of_original: 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/web/api/cryptokey/type/index.html b/files/pt-br/web/api/cryptokey/type/index.html deleted file mode 100644 index 666de87d23..0000000000 --- a/files/pt-br/web/api/cryptokey/type/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: CryptoKey.type -slug: Web/API/CryptoKey/type -tags: - - API - - Apenas Leitura - - CryptoKey - - Propriedades - - Referencia - - Web Crypto API -translation_of: Web/API/CryptoKey -translation_of_original: 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/web/api/cryptokey/usages/index.html b/files/pt-br/web/api/cryptokey/usages/index.html deleted file mode 100644 index c74a658a32..0000000000 --- a/files/pt-br/web/api/cryptokey/usages/index.html +++ /dev/null @@ -1,124 +0,0 @@ ---- -title: CryptoKey.usages -slug: Web/API/CryptoKey/usages -tags: - - API - - CryptoKey - - Propriedade - - Read-only - - Referencia - - Web Crypto API -translation_of: Web/API/CryptoKey -translation_of_original: 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/web/api/deviceacceleration/index.html b/files/pt-br/web/api/deviceacceleration/index.html deleted file mode 100644 index e8e5432e4a..0000000000 --- a/files/pt-br/web/api/deviceacceleration/index.html +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: DeviceAcceleration -slug: Web/API/DeviceAcceleration -tags: - - API - - Experimental - - Interface -translation_of: Web/API/DeviceMotionEventAcceleration -translation_of_original: Web/API/DeviceAcceleration ---- -
{{ ApiRef("Device Orientation Events") }}{{SeeCompatTable}}
- -

Um objeto DeviceAcceleration fornece informações sobre a quantidade de aceleração que o dispositivo desempenha ao longo dos três eixos.

- -

Propriedades

- -
-
{{domxref("DeviceAcceleration.x")}} {{readonlyInline}}
-
A quantidade de aceleração ao longo do eixo X. Somente leitura.
-
{{domxref("DeviceAcceleration.y")}} {{readonlyInline}}
-
A quantidade de aceleração ao longo do eixo Y. Somente leitura.
-
{{domxref("DeviceAcceleration.z")}} {{readonlyInline}}
-
A quantidade de aceleração ao longo do eixo Z.Somente leitura.
-
- -

Especificações

- - - - - - - - - - - - - - - - -
EspecificaçõesStatusComentario
{{SpecName("Device Orientation", "#device_acceleration", "DeviceAcceleration")}}{{Spec2("Device Orientation")}}Definição inicial
diff --git a/files/pt-br/web/api/devicemotioneventacceleration/index.html b/files/pt-br/web/api/devicemotioneventacceleration/index.html new file mode 100644 index 0000000000..e8e5432e4a --- /dev/null +++ b/files/pt-br/web/api/devicemotioneventacceleration/index.html @@ -0,0 +1,43 @@ +--- +title: DeviceAcceleration +slug: Web/API/DeviceAcceleration +tags: + - API + - Experimental + - Interface +translation_of: Web/API/DeviceMotionEventAcceleration +translation_of_original: Web/API/DeviceAcceleration +--- +
{{ ApiRef("Device Orientation Events") }}{{SeeCompatTable}}
+ +

Um objeto DeviceAcceleration fornece informações sobre a quantidade de aceleração que o dispositivo desempenha ao longo dos três eixos.

+ +

Propriedades

+ +
+
{{domxref("DeviceAcceleration.x")}} {{readonlyInline}}
+
A quantidade de aceleração ao longo do eixo X. Somente leitura.
+
{{domxref("DeviceAcceleration.y")}} {{readonlyInline}}
+
A quantidade de aceleração ao longo do eixo Y. Somente leitura.
+
{{domxref("DeviceAcceleration.z")}} {{readonlyInline}}
+
A quantidade de aceleração ao longo do eixo Z.Somente leitura.
+
+ +

Especificações

+ + + + + + + + + + + + + + + + +
EspecificaçõesStatusComentario
{{SpecName("Device Orientation", "#device_acceleration", "DeviceAcceleration")}}{{Spec2("Device Orientation")}}Definição inicial
diff --git a/files/pt-br/web/api/devicemotioneventrotationrate/index.html b/files/pt-br/web/api/devicemotioneventrotationrate/index.html new file mode 100644 index 0000000000..872b3c6f25 --- /dev/null +++ b/files/pt-br/web/api/devicemotioneventrotationrate/index.html @@ -0,0 +1,93 @@ +--- +title: DeviceRotationRate +slug: Web/API/DeviceRotationRate +translation_of: Web/API/DeviceMotionEventRotationRate +translation_of_original: Web/API/DeviceRotationRate +--- +

{{ ApiRef("Device Orientation Events") }} {{SeeCompatTable}}

+ +

Um objeto DeviceRotationRate fornece informações sobre a taxa na qual o dispositivo está girando em torno de todos os três eixos.

+ +

Properties

+ +
+
{{ domxref("DeviceRotationRate.alpha") }} {{readonlyInline}}
+
A quantidade de rotação em torno do eixo Z, em graus por segundo.
+
{{ domxref("DeviceRotationRate.beta") }} {{readonlyInline}}
+
A quantidade de rotação em torno do eixo Y, em graus por segundo
+
{{ domxref("DeviceRotationRate.gamma") }} {{readonlyInline}}
+
A quantidade de rotação em torno do eixo X, em graus por segundo
+
+ +

Especificações

+ + + + + + + + + + + + + + + + +
EspecificacõesStatusComentario
{{SpecName('Device Orientation')}}{{Spec2('Device Orientation')}}Definição inicial.
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticasChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suporte básico{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticasAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/pt-br/web/api/devicerotationrate/index.html b/files/pt-br/web/api/devicerotationrate/index.html deleted file mode 100644 index 872b3c6f25..0000000000 --- a/files/pt-br/web/api/devicerotationrate/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: DeviceRotationRate -slug: Web/API/DeviceRotationRate -translation_of: Web/API/DeviceMotionEventRotationRate -translation_of_original: Web/API/DeviceRotationRate ---- -

{{ ApiRef("Device Orientation Events") }} {{SeeCompatTable}}

- -

Um objeto DeviceRotationRate fornece informações sobre a taxa na qual o dispositivo está girando em torno de todos os três eixos.

- -

Properties

- -
-
{{ domxref("DeviceRotationRate.alpha") }} {{readonlyInline}}
-
A quantidade de rotação em torno do eixo Z, em graus por segundo.
-
{{ domxref("DeviceRotationRate.beta") }} {{readonlyInline}}
-
A quantidade de rotação em torno do eixo Y, em graus por segundo
-
{{ domxref("DeviceRotationRate.gamma") }} {{readonlyInline}}
-
A quantidade de rotação em torno do eixo X, em graus por segundo
-
- -

Especificações

- - - - - - - - - - - - - - - - -
EspecificacõesStatusComentario
{{SpecName('Device Orientation')}}{{Spec2('Device Orientation')}}Definição inicial.
- - - -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticasChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suporte básico{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticasAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
diff --git a/files/pt-br/web/api/document/activeelement/index.html b/files/pt-br/web/api/document/activeelement/index.html deleted file mode 100644 index ca10f98461..0000000000 --- a/files/pt-br/web/api/document/activeelement/index.html +++ /dev/null @@ -1,165 +0,0 @@ ---- -title: Document.activeElement -slug: Web/API/Document/activeElement -tags: - - API - - Document - - HTML DOM - - Property - - Reference -translation_of: Web/API/DocumentOrShadowRoot/activeElement -translation_of_original: Web/API/Document/activeElement ---- -

{{APIRef("DOM")}}

- -

Retorna o {{ domxref("Element", "elemento") }} atualmente em foco, ou seja, o elemento que receberá os eventos do teclado caso o usuário digite algo. Esse atributo é somente-leitura.

- -

Geralmente retorna um {{ HTMLElement("input") }} ou {{ HTMLElement("textarea") }}, caso esteja com uma seleção de texto ativa. Caso esteja, pode obter mais informações sobre a seleção utilizando as propriedades selectionStart e selectionEnd. Caso o elemento em foco seja um {{ HTMLElement("select") }}(menu) ou {{ HTMLElement("input") }} do tipo button, checkbox ou radio.

- -
Note: No Mac, elementos que nao sejam campos de texto geralmente não recebem foco.
- -

Normalmente o usuário pode navegar entre os elementos que pode receber foco na página com o uso da tecla tab e ativar estes elementos com a tecla espaço (apertar um botão ou selecionar uma opção).

- -

Não confunda foco com uma seleção de texto no documento, que consiste em sua maioria de nódos de texto estáticos. Veja {{ domxref("window.getSelection()") }}.

- -

Quando não há nada selecionado, o activeElement da página é o {{ HTMLElement("body") }} ou null. 

- -
-

Este atributo é parte da seção "Em desenvolvimento" da especificação do HTML 5.

-
- -

Sintaxe

- -
var curElement = document.activeElement;
-
- -

Exemplo

- -
<!DOCTYPE HTML>
-<html>
-<head>
-    <script type="text/javascript" charset="utf-8">
-    function init() {
-
-        function onMouseUp(e) {
-            console.log(e);
-            var outputElement = document.getElementById('output-element');
-            var outputText = document.getElementById('output-text');
-            var selectedTextArea = document.activeElement;
-            var selection = selectedTextArea.value.substring(
-            selectedTextArea.selectionStart, selectedTextArea.selectionEnd);
-            outputElement.innerHTML = selectedTextArea.id;
-            outputText.innerHTML = selection;
-        }
-
-        document.getElementById("ta-example-one").addEventListener("mouseup", onMouseUp, false);
-        document.getElementById("ta-example-two").addEventListener("mouseup", onMouseUp, false);
-    }
-    </script>
-</head>
-<body onload="init()">
-<div>
-    Select some text from one of the Textareas below:
-</div>
-<form id="frm-example" action="#" accept-charset="utf-8">
-<textarea name="ta-example-one" id="ta-example-one" rows="8" cols="40">
-This is Textarea Example One:
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt, lorem a porttitor molestie, odio nibh iaculis libero, et accumsan nunc orci eu dui.
-</textarea>
-<textarea name="ta-example-two" id="ta-example-two" rows="8" cols="40">
-This is Textarea Example Two:
-Fusce ullamcorper, nisl ac porttitor adipiscing, urna orci egestas libero, ut accumsan orci lacus laoreet diam. Morbi sed euismod diam.
-</textarea>
-</form>
-Active Element Id: <span id="output-element"></span><br/>
-Selected Text: <span id="output-text"></span>
-
-</body>
-</html>
-
- -

View on JSFiddle

- -

Notas

- -

Originalmente apresentada como extensão DOM proprietária no Internet Explorer 4, esta propriedade também é suportada no Opera e Safari (versão 4 ou maior)

- -

Especificações

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'interaction.html#dom-document-activeelement', 'activeElement')}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilidade nos navegadores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support23.04 [1]9.64.0
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
- -

[1]: O IE9 tem um bug que ao tentar acessar o activeElement do {{domxref("window.parent")}} {{domxref("Document")}} de um {{HTMLElement("iframe")}}(i.e. parent.document.activeElement) é lançado um erro

- -

Eventos relacionados

- - diff --git a/files/pt-br/web/api/document/elementfrompoint/index.html b/files/pt-br/web/api/document/elementfrompoint/index.html deleted file mode 100644 index c64d67dd08..0000000000 --- a/files/pt-br/web/api/document/elementfrompoint/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: Document.elementFromPoint() -slug: Web/API/Document/elementFromPoint -tags: - - API - - CSSOM View - - Method - - NeedsMarkupWork - - NeedsMobileBrowserCompatibility - - Reference -translation_of: Web/API/DocumentOrShadowRoot/elementFromPoint -translation_of_original: Web/API/Document/elementFromPoint ---- -
{{APIRef("DOM")}}
- -

O método elementFromPoint() da interface {{domxref("Document")}} retorna o elemento de maior nível nas coordenadas especificadas.

- -

Se o elemento no ponto especificado pertencer à outro documento (por exemplo, um subdocumento em um iframe), será retornado o pai do subdocumento (o próprio iframe). Se o elemento em determinado ponto for anônimo ou for um conteudo gerado por XBL, como por exemplo barras de scroll de caixas de texto, então será retornado o primeiro elemento pai, não-anônimo (por exemplo, a própria caixa de texto).

- -

Se o ponto especificado estiver fora dos limites visíveis do documento ou tiver uma coordenada negativa, o resultado é null.

- -

Se você precisa encontrar uma posição específica dentro do elemento, use {{domxref("Document.caretPositionFromPoint()")}}.

- -

{{Note("Chamados por documentos XUL devem esperar até o evento onload ser acionado antes de chamar este método.")}}

- -

Sintaxe

- -
var element = document.elementFromPoint(x, y);
- -

Parâmetros

- -
-
x
-
Uma posição horizontal dentro do viewport atual.
-
y
-
Uma position vertical dentro do viewport atual.
-
- -

Valor retornado

- -

O objeto de nível mais alto {{domxref("Element")}} dentro das coordenadas declaradas.

- -

Exemplo

- -
<!DOCTYPE html>
-<html lang="en">
-<head>
-<title>exemplo de elementFromPoint</title>
-
-<script>
-function changeColor(newColor) {
-  elem = document.elementFromPoint(2, 2);
-  elem.style.color = newColor;
-}
-</script>
-</head>
-
-<body>
-<p id="para1">Algum texto aqui</p>
-<button onclick="changeColor('blue');">azul</button>
-<button onclick="changeColor('red');">vermelho</button>
-</body>
-</html>
-
- -

Especificações

- - - - - - - - - - - - - - -
EspecificaçãoStatusComment
{{SpecName('CSSOM View', '#dom-document-elementfrompoint', 'elementFromPoint')}}{{Spec2('CSSOM View')}}Definição Inicial.
- -

Compatibilidade entre navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FuncionalidadeChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support {{CompatChrome(4.0)}}35.510.50{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FuncionalidadeAndroidChrome para AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
diff --git a/files/pt-br/web/api/document/elementoregistrado/index.html b/files/pt-br/web/api/document/elementoregistrado/index.html deleted file mode 100644 index bff318b3a9..0000000000 --- a/files/pt-br/web/api/document/elementoregistrado/index.html +++ /dev/null @@ -1,132 +0,0 @@ ---- -title: Document.registerElement() -slug: Web/API/Document/ElementoRegistrado -tags: - - DOM - - Document.registerElement() - - ELEMENTO DOM - - Web Components - - registerElement -translation_of: Web/API/Document/registerElement ---- -

{{APIRef("DOM")}}

- -
-

Note:document.registerElement() está depreciado em favor do customElements.define().

-
- -

O método document.registerElement() registra um novo elemento personalizado no browser e returna um construtor para o novo elemento.

- -
-

Nota: Esta é uma tecnologia experimental. O browser você precisa usar suporte à componentes web. Veja Habilitando componentes web no Firefox.

-
- -

Sintaxe

- -
var constructor = document.registerElement(tag-name, options);
- -

Parâmetros

- -
-
tag-name
-
O nome do elemento personalizado. O nome precisa conter um dash (-), por exemplo minha-tag.
-
Opções{{optional_inline}}
-
-

Um projeto com propriedades protótipo como base para o elememento personalizado, e extends, uma existente tag para estender. Ambos são opcionais.

-
-
- -

Exemplo

- -

Aqui é um exemplo muito simples:

- -
var Mytag = document.registerElement('my-tag');
-
- -

Agora as novas tags são registradas no browser.

- -

Uma variável Mytag tem um construtor que você pode usar para criar um elemento my-tag nos documentos como seguem:

- -
document.body.appendChild(new Mytag());
- -

Isto insere um elemento vazio my-tag que será visível se você usar o browser para desenvolvedores. Isto não será visível se você usar a ferramenta visão da capacidade do código fonte do browser. E isto não será visível no browser a menos que você adicione alguns conteúdos para a tag. Aqui está um caminho para adicionar conteúdo a nova tag:

- -
var mytag = document.getElementsByTagName("my-tag")[0];
-mytag.textContent = "I am a my-tag element.";
- -

Especificações

- - - - - - - - - - - - - - -
EspecificaçãoEstadoComentário
{{SpecName('Custom Elements')}}{{Spec2('Custom Elements')}} -

definição inicial

-
- -

Compatibilidade do Browser

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico3531[1]{{CompatNo}}25{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico4.4.431[1]{{CompatNo}}25{{CompatNo}}
-
- -

[1] Esta API é implementada uma preferência

- -

Veja também

- - diff --git a/files/pt-br/web/api/document/getselection/index.html b/files/pt-br/web/api/document/getselection/index.html deleted file mode 100644 index 2f52375799..0000000000 --- a/files/pt-br/web/api/document/getselection/index.html +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: Document.getSelection() -slug: Web/API/Document/getSelection -translation_of: Web/API/DocumentOrShadowRoot/getSelection -translation_of_original: Web/API/Document/getSelection ---- -

{{APIRef("DOM")}}

- -

Esse método funciona de forma idêntica ao método {{domxref("Window.getSelection()")}};  Ele retorna um objeto {{domxref("Selection")}} representando o texto atualmente selecionado no documento.

diff --git a/files/pt-br/web/api/document/readystatechange_event/index.html b/files/pt-br/web/api/document/readystatechange_event/index.html new file mode 100644 index 0000000000..185350cb54 --- /dev/null +++ b/files/pt-br/web/api/document/readystatechange_event/index.html @@ -0,0 +1,83 @@ +--- +title: readystatechange +slug: Web/Events/readystatechange +translation_of: Web/API/Document/readystatechange_event +--- +

{{ApiRef}}

+ +

O evento readystatechange é ativado quando o atributo readyState de um documento é alterado.

+ +

Informações gerais

+ +
+
Especificação
+
HTML5
+
Interface
+
Event
+
Propaga
+
Não
+
Cancelável
+
Não
+
Alvo
+
Document
+
Ação Padrão
+
Nenhuma.
+
+ +

Propriedades

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
+ +

Exemplo

+ +
// alternativa ao DOMContentLoaded
+document.onreadystatechange = function () {
+    if (document.readyState == "interactive") {
+        initApplication();
+    }
+}
+
+ +

Compatibilidade entre Navegadores

+ +

Este evento tem sido suportado pelo Internet Explorer há várias versões, e pode ser usada como uma alternativa para o evento DOMContentLoaded (veja a seção cross-browser fallback).

+ +

Eventos Relacionados

+ + diff --git a/files/pt-br/web/api/document/registerelement/index.html b/files/pt-br/web/api/document/registerelement/index.html new file mode 100644 index 0000000000..bff318b3a9 --- /dev/null +++ b/files/pt-br/web/api/document/registerelement/index.html @@ -0,0 +1,132 @@ +--- +title: Document.registerElement() +slug: Web/API/Document/ElementoRegistrado +tags: + - DOM + - Document.registerElement() + - ELEMENTO DOM + - Web Components + - registerElement +translation_of: Web/API/Document/registerElement +--- +

{{APIRef("DOM")}}

+ +
+

Note:document.registerElement() está depreciado em favor do customElements.define().

+
+ +

O método document.registerElement() registra um novo elemento personalizado no browser e returna um construtor para o novo elemento.

+ +
+

Nota: Esta é uma tecnologia experimental. O browser você precisa usar suporte à componentes web. Veja Habilitando componentes web no Firefox.

+
+ +

Sintaxe

+ +
var constructor = document.registerElement(tag-name, options);
+ +

Parâmetros

+ +
+
tag-name
+
O nome do elemento personalizado. O nome precisa conter um dash (-), por exemplo minha-tag.
+
Opções{{optional_inline}}
+
+

Um projeto com propriedades protótipo como base para o elememento personalizado, e extends, uma existente tag para estender. Ambos são opcionais.

+
+
+ +

Exemplo

+ +

Aqui é um exemplo muito simples:

+ +
var Mytag = document.registerElement('my-tag');
+
+ +

Agora as novas tags são registradas no browser.

+ +

Uma variável Mytag tem um construtor que você pode usar para criar um elemento my-tag nos documentos como seguem:

+ +
document.body.appendChild(new Mytag());
+ +

Isto insere um elemento vazio my-tag que será visível se você usar o browser para desenvolvedores. Isto não será visível se você usar a ferramenta visão da capacidade do código fonte do browser. E isto não será visível no browser a menos que você adicione alguns conteúdos para a tag. Aqui está um caminho para adicionar conteúdo a nova tag:

+ +
var mytag = document.getElementsByTagName("my-tag")[0];
+mytag.textContent = "I am a my-tag element.";
+ +

Especificações

+ + + + + + + + + + + + + + +
EspecificaçãoEstadoComentário
{{SpecName('Custom Elements')}}{{Spec2('Custom Elements')}} +

definição inicial

+
+ +

Compatibilidade do Browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico3531[1]{{CompatNo}}25{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico4.4.431[1]{{CompatNo}}25{{CompatNo}}
+
+ +

[1] Esta API é implementada uma preferência

+ +

Veja também

+ + diff --git a/files/pt-br/web/api/document_object_model/events/index.html b/files/pt-br/web/api/document_object_model/events/index.html new file mode 100644 index 0000000000..4d04915450 --- /dev/null +++ b/files/pt-br/web/api/document_object_model/events/index.html @@ -0,0 +1,82 @@ +--- +title: Events and the DOM +slug: DOM/Referencia_do_DOM/Events +translation_of: 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/web/api/document_object_model/examples/index.html b/files/pt-br/web/api/document_object_model/examples/index.html new file mode 100644 index 0000000000..87ec3601e2 --- /dev/null +++ b/files/pt-br/web/api/document_object_model/examples/index.html @@ -0,0 +1,376 @@ +--- +title: Examples of web and XML development using the DOM +slug: DOM/Referencia_do_DOM/Examples +translation_of: Web/API/Document_Object_Model/Examples +--- +

Este capítulo fornece exemplos mais longos de desenvolvimento de Web e XML usando o DOM. Sempre que possível, os exemplos usam APIs, truques e padrões comuns no JavaScript para manipular o objeto de documento.

+ +

Exemplo 1: altura e largura

+ +

O exemplo a seguir mostra o uso das propriedades de altura e largura ao lado de imagens de dimensões variáveis:

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>width/height example</title>
+<script>
+function init() {
+  var arrImages = new Array(3);
+
+  arrImages[0] = document.getElementById("image1");
+  arrImages[1] = document.getElementById("image2");
+  arrImages[2] = document.getElementById("image3");
+
+  var objOutput = document.getElementById("output");
+  var strHtml = "<ul>";
+
+  for (var i = 0; i < arrImages.length; i++) {
+    strHtml += "<li>image" + (i+1) +
+            ": height=" + arrImages[i].height +
+            ", width=" + arrImages[i].width +
+            ", style.height=" + arrImages[i].style.height +
+            ", style.width=" + arrImages[i].style.width +
+            "<\/li>";
+  }
+
+  strHtml += "<\/ul>";
+
+  objOutput.innerHTML = strHtml;
+}
+</script>
+</head>
+<body onload="init();">
+
+<p>Image 1: no height, width, or style
+  <img id="image1" src="http://www.mozilla.org/images/mozilla-banner.gif">
+</p>
+
+<p>Image 2: height="50", width="500", but no style
+  <img id="image2"
+       src="http://www.mozilla.org/images/mozilla-banner.gif"
+       height="50" width="500">
+</p>
+
+<p>Image 3: no height, width, but style="height: 50px; width: 500px;"
+  <img id="image3"
+       src="http://www.mozilla.org/images/mozilla-banner.gif"
+       style="height: 50px; width: 500px;">
+</p>
+
+<div id="output"> </div>
+</body>
+</html>
+
+ +

Exemplo 2: Atributos de Imagem

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Modifying an image border</title>
+
+<script>
+function setBorderWidth(width) {
+  document.getElementById("img1").style.borderWidth = width + "px";
+}
+</script>
+</head>
+
+<body>
+<p>
+  <img id="img1"
+       src="image1.gif"
+       style="border: 5px solid green;"
+       width="100" height="100" alt="border test">
+</p>
+
+<form name="FormName">
+  <input type="button" value="Make border 20px-wide" onclick="setBorderWidth(20);" />
+  <input type="button" value="Make border 5px-wide"  onclick="setBorderWidth(5);" />
+</form>
+
+</body>
+</html>
+
+ +

Exemplo 3: Manipulando Estilos

+ +

Neste exemplo simples, algumas propriedades de estilo básicas de um elemento de parágrafo HTML são acessadas usando o objeto de estilo no elemento e as propriedades de estilo CSS do objeto, que podem ser recuperadas e definidas a partir do DOM. Neste caso, você está manipulando os estilos individuais diretamente. No próximo exemplo (veja Exemplo 4), você pode usar folhas de estilo e suas regras para alterar estilos para documentos inteiros.

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Changing color and font-size example</title>
+
+<script>
+function changeText() {
+  var p = document.getElementById("pid");
+
+  p.style.color = "blue"
+  p.style.fontSize = "18pt"
+}
+</script>
+</head>
+<body>
+
+<p id="pid" onclick="window.location.href = 'http://www.cnn.com/';">linker</p>
+
+<form>
+  <p><input value="rec" type="button" onclick="changeText();" /></p>
+</form>
+
+</body>
+</html>
+
+ +

Exemplo 4: Usando folhas de estilo

+ +

A propriedade styleSheets no objeto de documento retorna uma lista das folhas de estilo que foram carregadas nesse documento. Você pode acessar essas folhas de estilo e suas regras individualmente usando os objetos stylesheet, style e CSSRule, como demonstrado neste exemplo, que imprime todos os seletores de regras de estilo para o console.

+ +
var ss = document.styleSheets;
+
+for(var i = 0; i < ss.length; i++) {
+  for(var j = 0; j < ss[i].cssRules.length; j++) {
+    dump( ss[i].cssRules[j].selectorText + "\n" );
+  }
+}
+ +

Para um documento com uma única folha de estilo na qual as três regras a seguir são definidas:

+ +
body { background-color: darkblue; }
+p { font-face: Arial; font-size: 10pt; margin-left: .125in; }
+#lumpy { display: none; }
+
+ +

Este script produz o seguinte:

+ +
BODY
+P
+#LUMPY
+
+ +

 

+ +

Exemplo 5: Propagação de Eventos

+ +

Este exemplo demonstra como eventos disparar e são tratados no DOM de uma forma muito simples. Quando o corpo deste documento HTML é carregado, um ouvinte de evento é registrado com a linha superior da tabela. O ouvinte de eventos processa o evento executando a função stopEvent, que altera o valor na célula inferior da tabela.

+ +

No entanto, stopEvent também chama um método de objeto de evento, {{domxref ("event.stopPropagation")}}, que mantém o evento de borbulhar mais para cima no DOM. Observe que a própria tabela possui um manipulador de eventos {{domxref ("element.onclick", "onclick")}} que deve exibir uma mensagem quando a tabela é clicada. Mas o método stopEvent interrompeu a propagação e, portanto, após a atualização dos dados na tabela, a fase de evento é efetivamente encerrada e uma caixa de alerta é exibida para confirmar isso.

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Event Propagation</title>
+
+<style>
+#t-daddy { border: 1px solid red }
+#c1 { background-color: pink; }
+</style>
+
+<script>
+function stopEvent(ev) {
+  c2 = document.getElementById("c2");
+  c2.innerHTML = "hello";
+
+  // this ought to keep t-daddy from getting the click.
+  ev.stopPropagation();
+  alert("event propagation halted.");
+}
+
+function load() {
+  elem = document.getElementById("tbl1");
+  elem.addEventListener("click", stopEvent, false);
+}
+</script>
+</head>
+
+<body onload="load();">
+
+<table id="t-daddy" onclick="alert('hi');">
+  <tr id="tbl1">
+    <td id="c1">one</td>
+  </tr>
+  <tr>
+    <td id="c2">two</td>
+  </tr>
+</table>
+
+</body>
+</html>
+
+ +

Exemplo 6: getComputedStyle

+ +

Este exemplo demonstra como o método {{domxref ("window.getComputedStyle")}} pode ser usado para obter os estilos de um elemento que não são definidos usando o atributo de estilo ou com JavaScript (por exemplo, elt.style.backgroundColor = "rgb (173, 216, 230) "). Estes últimos tipos de estilos podem ser recuperados com a propriedade {{domxref ("element.style", "elt.style")}} mais direta, cujas propriedades estão listadas na Lista de Propriedades do DOM CSS.

+ +

GetComputedStyle() retorna um objeto ComputedCSSStyleDeclaration, cujas propriedades de estilo individuais podem ser referenciadas com o método getPropertyValue() desse objeto, como mostra o seguinte exemplo de documento.

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+
+<title>getComputedStyle example</title>
+
+<script>
+function cStyles() {
+  var RefDiv = document.getElementById("d1");
+  var txtHeight = document.getElementById("t1");
+  var h_style = document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("height");
+
+  txtHeight.value = h_style;
+
+  var txtWidth = document.getElementById("t2");
+  var w_style = document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("width");
+
+  txtWidth.value = w_style;
+
+  var txtBackgroundColor = document.getElementById("t3");
+  var b_style = document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("background-color");
+
+  txtBackgroundColor.value = b_style;
+}
+</script>
+
+<style>
+#d1 {
+  margin-left: 10px;
+  background-color: rgb(173, 216, 230);
+  height: 20px;
+  max-width: 20px;
+}
+</style>
+
+</head>
+
+<body>
+
+<div id="d1">&nbsp;</div>
+
+<form action="">
+  <p>
+    <button type="button" onclick="cStyles();">getComputedStyle</button>
+    height<input id="t1" type="text" value="1" />
+    max-width<input id="t2" type="text" value="2" />
+    bg-color<input id="t3" type="text" value="3" />
+  </p>
+</form>
+
+</body>
+</html>
+
+ +

Exemplo 7: Exibindo Propriedades de Evento do Objeto

+ +

Este exemplo usa métodos DOM para exibir todas as propriedades do objeto {{domxref ("window.onload")}} {{domxref ("evento")}} e seus valores em uma tabela. Ele também mostra uma técnica útil de usar um laço para iterar sobre as propriedades de um objeto para obter seus valores.

+ +

As propriedades dos objetos de evento diferem muito entre os navegadores, o WHATWG DOM Standard lista as propriedades padrão, porém muitos navegadores estenderam muito esses valores.

+ +

Coloque o seguinte código em um arquivo de texto em branco e carregue-o em uma variedade de navegadores, você ficará surpreso com o número diferente e nomes de propriedades. Você também pode querer adicionar alguns elementos na página e chamar essa função de manipuladores de eventos diferentes.

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>Show Event properties</title>
+
+<style>
+table { border-collapse: collapse; }
+thead { font-weight: bold; }
+td { padding: 2px 10px 2px 10px; }
+
+.odd { background-color: #efdfef; }
+.even { background-color: #ffffff; }
+</style>
+
+<script>
+
+function showEventProperties(e) {
+  function addCell(row, text) {
+    var cell = row.insertCell(-1);
+    cell.appendChild(document.createTextNode(text));
+  }
+
+  var e = e || window.event;
+  document.getElementById('eventType').innerHTML = e.type;
+
+  var table = document.createElement('table');
+  var thead = table.createTHead();
+  var row = thead.insertRow(-1);
+  var lableList = ['#', 'Property', 'Value'];
+  var len = lableList.length;
+
+  for (var i=0; i<len; i++) {
+    addCell(row, lableList[i]);
+  }
+
+  var tbody = document.createElement('tbody');
+  table.appendChild(tbody);
+
+  for (var p in e) {
+    row = tbody.insertRow(-1);
+    row.className = (row.rowIndex % 2)? 'odd':'even';
+    addCell(row, row.rowIndex);
+    addCell(row, p);
+    addCell(row, e[p]);
+  }
+
+  document.body.appendChild(table);
+}
+
+window.onload = function(event){
+  showEventProperties(event);
+}
+</script>
+</head>
+
+<body>
+<h1>Properties of the DOM <span id="eventType"></span> Event Object</h1>
+</body>
+
+</html>
+
+ +

Exemplo 8: Usando a interface de tabela  do DOM

+ +

A interface DOM HTMLTableElement fornece alguns métodos de conveniência para criar e manipular tabelas. Dois métodos usados com freqüência são {{domxref ("HTMLTableElement.insertRow")}} e {{domxref ("tableRow.insertCell")}}.

+ +

Para adicionar uma linha e algumas células a uma tabela existente:

+ +
<table id="table0">
+ <tr>
+  <td>Row 0 Cell 0</td>
+  <td>Row 0 Cell 1</td>
+ </tr>
+</table>
+
+<script>
+var table = document.getElementById('table0');
+var row = table.insertRow(-1);
+var cell,
+    text;
+
+for (var i = 0; i < 2; i++) {
+  cell = row.insertCell(-1);
+  text = 'Row ' + row.rowIndex + ' Cell ' + i;
+  cell.appendChild(document.createTextNode(text));
+}
+</script>
+
+ +


+ Notas

+ + + + + + diff --git a/files/pt-br/web/api/document_object_model/how_to_create_a_dom_tree/index.html b/files/pt-br/web/api/document_object_model/how_to_create_a_dom_tree/index.html new file mode 100644 index 0000000000..e6dd923fb5 --- /dev/null +++ b/files/pt-br/web/api/document_object_model/how_to_create_a_dom_tree/index.html @@ -0,0 +1,145 @@ +--- +title: How to create a DOM tree +slug: DOM/Referencia_do_DOM/How_to_create_a_DOM_tree +translation_of: Web/API/Document_object_model/How_to_create_a_DOM_tree +--- +

{{draft}}

+ +

Esta página descreve como usar DOM Core API DOM em JavaScript para criar e modificar objetos do DOM. Aplica-se a todas as aplicações baseadas em Gecko (como o Firefox), tanto em código privilegiado (extensões) como em código não privilegiado (páginas web)

+ +

Criando uma árvore DOM dinamicamente

+ +

Considere o seguinte documento XML:

+ +
<?xml version="1.0"?>
+<people>
+  <person first-name="eric" middle-initial="H" last-name="jung">
+    <address street="321 south st" city="denver" state="co" country="usa"/>
+    <address street="123 main st" city="arlington" state="ma" country="usa"/>
+  </person>
+
+  <person first-name="jed" last-name="brown">
+    <address street="321 north st" city="atlanta" state="ga" country="usa"/>
+    <address street="123 west st" city="seattle" state="wa" country="usa"/>
+    <address street="321 south avenue" city="denver" state="co" country="usa"/>
+  </person>
+</people>
+
+ +

A W3C DOM API, suportada pelo Mozilla, pode ser usada para criar uma representação na memória deste documento, da seguinte forma:

+ +
var doc = document.implementation.createDocument("", "", null);
+var peopleElem = doc.createElement("people");
+
+var personElem1 = doc.createElement("person");
+personElem1.setAttribute("first-name", "eric");
+personElem1.setAttribute("middle-initial", "h");
+personElem1.setAttribute("last-name", "jung");
+
+var addressElem1 = doc.createElement("address");
+addressElem1.setAttribute("street", "321 south st");
+addressElem1.setAttribute("city", "denver");
+addressElem1.setAttribute("state", "co");
+addressElem1.setAttribute("country", "usa");
+personElem1.appendChild(addressElem1);
+
+var addressElem2 = doc.createElement("address");
+addressElem2.setAttribute("street", "123 main st");
+addressElem2.setAttribute("city", "arlington");
+addressElem2.setAttribute("state", "ma");
+addressElem2.setAttribute("country", "usa");
+personElem1.appendChild(addressElem2);
+
+var personElem2 = doc.createElement("person");
+personElem2.setAttribute("first-name", "jed");
+personElem2.setAttribute("last-name", "brown");
+
+var addressElem3 = doc.createElement("address");
+addressElem3.setAttribute("street", "321 north st");
+addressElem3.setAttribute("city", "atlanta");
+addressElem3.setAttribute("state", "ga");
+addressElem3.setAttribute("country", "usa");
+personElem2.appendChild(addressElem3);
+
+var addressElem4 = doc.createElement("address");
+addressElem4.setAttribute("street", "123 west st");
+addressElem4.setAttribute("city", "seattle");
+addressElem4.setAttribute("state", "wa");
+addressElem4.setAttribute("country", "usa");
+personElem2.appendChild(addressElem4);
+
+var addressElem5 = doc.createElement("address");
+addressElem5.setAttribute("street", "321 south avenue");
+addressElem5.setAttribute("city", "denver");
+addressElem5.setAttribute("state", "co");
+addressElem5.setAttribute("country", "usa");
+personElem2.appendChild(addressElem5);
+
+peopleElem.appendChild(personElem1);
+peopleElem.appendChild(personElem2);
+doc.appendChild(peopleElem);
+
+ +

Veja também o capítulo DOM chapter of the XUL Tutorial.

+ +

Você pode automatizar a criação de uma árvore DOM usando um algoritmo reverso JXON em associação com a seguinte representação JSON:

+ +
{
+  "people": {
+    "person": [{
+      "address": [{
+        "@street": "321 south st",
+        "@city": "denver",
+        "@state": "co",
+        "@country": "usa"
+      }, {
+        "@street": "123 main st",
+        "@city": "arlington",
+        "@state": "ma",
+        "@country": "usa"
+      }],
+      "@first-name": "eric",
+      "@middle-initial": "H",
+      "@last-name": "jung"
+    }, {
+      "address": [{
+        "@street": "321 north st",
+        "@city": "atlanta",
+        "@state": "ga",
+        "@country": "usa"
+      }, {
+        "@street": "123 west st",
+        "@city": "seattle",
+        "@state": "wa",
+        "@country": "usa"
+      }, {
+        "@street": "321 south avenue",
+        "@city": "denver",
+        "@state": "co",
+        "@country": "usa"
+      }],
+      "@first-name": "jed",
+      "@last-name": "brown"
+    }]
+  }
+}
+
+ +

E daí?

+ +

As árvores DOM podem ser consultadas usando expressões XPath, convertidas em strings ou gravadas em arquivos locais ou remotos usando XMLSerializer (sem ter que primeiro converter para uma string), POSTed para um servidor web (via XMLHttpRequest), transformado usando XSLT, XLink, convertido para um objeto JavaScript através de um algoritmo JXON, etc.

+ +

Você pode usar árvores DOM para modelar dados que não são adequados para RDF (ou talvez você simplesmente não goste de RDF). Outra aplicação é que, uma vez que XUL é XML, a UI de sua aplicação pode ser manipulada, baixada, carregada, salva, carregada, convertida ou transformada de forma bastante fácil.

+ +

Veja também

+ + + +

{{ languages( { "fr": "fr/Comment_cr\u00e9er_un_arbre_DOM", "ja": "ja/How_to_create_a_DOM_tree", "zh-cn": "zh-cn/How_to_create_a_DOM_tree" } ) }}

diff --git a/files/pt-br/web/api/document_object_model/index.html b/files/pt-br/web/api/document_object_model/index.html new file mode 100644 index 0000000000..b0ae4420a6 --- /dev/null +++ b/files/pt-br/web/api/document_object_model/index.html @@ -0,0 +1,379 @@ +--- +title: Modelo de Objeto de Documento (DOM) +slug: DOM/Referencia_do_DOM +translation_of: Web/API/Document_Object_Model +--- +

{{DefaultAPISidebar("DOM")}}

+ +

O Modelo de Objeto de Documento  (DOM) é uma interface de programação para documentos HTML, XML e SVG . Ele fornece uma representação estruturada do documento como uma árvore. O DOM define métodos que permitem acesso à árvore, para que eles possam alterar a estrutura, estilo e conteúdo do documento. O DOM fornece uma representação do documento como um grupo estruturado de nós e objetos, possuindo várias propriedades e métodos. Os nós também podem ter manipuladores de eventos que lhe são inerentes, e uma vez que um evento é acionado, os manipuladores de eventos são executados. Essencialmente, ele conecta páginas web a scripts ou linguagens de programação.

+ +

Embora o DOM seja frequentemente acessado usando JavaScript, não é uma parte da linguagem JavaScript. Ele também pode ser acessado por outras linguagens.

+ +

Uma introdução ao DOM está disponível.

+ +

DOM interfaces

+ +
+ +
+ +

Interfaces DOM obsoletas

+ +

O Modelo de Objeto de Documento foi altamente simplificado. Para conseguir isso, as seguintes interfaces presentes na especificação DOM nível 3 ou especificação anterior foi removida. Ainda não está muito claro se alguns podem ser reintroduzidos ou não, mas por enquanto eles têm que ser considerados obsoletos e devem ser evitados:

+ +
+ +
+ +

Interfaces HTML

+ +

Um documento contendo HTML é descrito usando o {{domxref("HTMLDocument")}} interface. Nota-se que a especificação HTML também se extende a {{domxref("Document")}} interface.

+ +

Um objeto HTMLDocument também da acesso á vários recursos de navegadores como a aba ou janela, em que uma página é desenhada usando {{domxref("Window")}} interface, o {{domxref("window.style", "Style")}} associado a ele (normalmente CSS), a história do navegador relativa ao contexto, {{domxref("window.history", "History")}}. Eventualmente, {{domxref("Selection")}} é feito no documento.

+ +

HTML elemento interfaces

+ +
+ +
+ +

Outras interfaces

+ +
+ +
+ +

Obsoleto HTML interfaces

+ +
+ +
+ +

SVG interfaces

+ +

SVG elemento  interfaces

+ +
+ +
+ +

SVG data type interfaces

+ +

Aqui estão a DOM API para tipos de dados utilizados nas definições de propriedades SVG e atributos.

+ +
+

Nota: Starting in {{Gecko("5.0")}}, the following SVG-related DOM interfaces representing lists of objects are now indexable and can be accessed ; in addition, they have a length property indicating the number of items in the lists: {{domxref("SVGLengthList")}}, {{domxref("SVGNumberList")}}, {{domxref("SVGPathSegList")}}, and {{domxref("SVGPointList")}}.

+
+ +

Static type

+ +
+ +
+ +

Animated type

+ +
+ +
+ + + +
+ +
+ +

Other SVG interfaces

+ +
+ +
+ +

Veja também

+ + diff --git a/files/pt-br/web/api/document_object_model/introduction/index.html b/files/pt-br/web/api/document_object_model/introduction/index.html new file mode 100644 index 0000000000..010a5ecd54 --- /dev/null +++ b/files/pt-br/web/api/document_object_model/introduction/index.html @@ -0,0 +1,251 @@ +--- +title: Introdução ao DOM +slug: DOM/Referencia_do_DOM/Introdução +translation_of: Web/API/Document_Object_Model/Introduction +--- +

O DOM (Document Object Model) é a representação de dados dos objetos que compõem a estrutura e o conteúdo de um documento na Web. Neste guia, apresentaremos brevemente o DOM. Veremos como o DOM representa um documento {{Glossary ("HTML")}} ou {{Glossary ("XML")}} na memória e como você usa APIs para criar aplicativos e conteúdo da Web.

+ +

O que é o DOM?

+ +

O Document Object Model (DOM) é uma interface de programação para os documentos HTML e XML. Representa a página de forma que os programas possam alterar a estrutura do documento, alterar o estilo e conteúdo. O DOM representa o documento com nós e objetos, dessa forma, as linguagens de programação podem se conectar à página.

+ +

Uma página da Web é um documento. Este documento pode ser exibido na janela do navegador ou como a fonte HTML. Mas é o mesmo documento nos dois casos. O DOM (Document Object Model) representa o mesmo documento para que possa ser manipulado. O DOM é uma representação orientada a objetos da página da web, que pode ser modificada com uma linguagem de script como JavaScript.

+ +

Os padrões W3C DOM e WHATWG DOM são implementados na maioria dos navegadores modernos. Muitos navegadores estendem o padrão; portanto, é necessário ter cuidado ao usá-los na Web, onde os documentos podem ser acessados por vários navegadores com diferentes DOMs.

+ +

Por exemplo, o DOM padrão especifica que o método getElementsByTagName no código abaixo deve retornar uma lista de todos os elementos <p> no documento:

+ +
var paragraphs = document.getElementsByTagName("p");
+// paragraphs[0] is the first <p> element
+// paragraphs[1] is the second <p> element, etc.
+alert(paragraphs[0].nodeName);
+
+ +

Todas as propriedades, métodos e eventos disponíveis para manipular e criar páginas da Web são organizados em objetos (por exemplo, o objeto de document que representa o próprio documento, o objeto de table que implementa a Interface especial DOM {{domxref ("HTMLTableElement")}}}}  para acessar tabelas HTML e assim por diante). Esta documentação fornece uma referência objeto a objeto ao DOM.

+ +

O DOM moderno é construído usando várias APIs que trabalham juntas. O DOM principal define os objetos que descrevem fundamentalmente um documento e os objetos dentro dele. Isso é expandido conforme necessário por outras APIs que adicionam novos recursos e capacidades ao DOM. Por exemplo, a HTML DOM API adiciona suporte para representar documentos HTML no DOM principal.

+ +

DOM e JavaScript

+ +

O pequeno exemplo acima, como quase todos os exemplos nesta referência, é {{glossary ("JavaScript")}}. Ou seja, está escrito em JavaScript, mas usa o DOM para acessar o documento e seus elementos. O DOM não é uma linguagem de programação, mas sem ela, a linguagem JavaScript não teria nenhum modelo ou noção de páginas da web, documentos HTML, documentos XML e suas partes componentes (por exemplo, elementos). Cada elemento de um documento - o documento como um todo, o cabeçalho, as tabelas do documento, os cabeçalhos da tabela, o texto nas células da tabela - faz parte do modelo de objeto do documento desse documento, para que todos possam ser acessados e manipulados usando o método DOM e uma linguagem de script como JavaScript.

+ +

No início, o JavaScript e o DOM estavam fortemente interligados, mas, eventualmente, evoluíram para entidades separadas. O conteúdo da página é armazenado no DOM e pode ser acessado e manipulado via JavaScript, para que possamos escrever esta equação aproximada:

+ +

API (página HTML ou XML) = DOM + JS (linguagem de script)

+ +

O DOM foi projetado para ser independente de qualquer linguagem de programação específica, disponibilizando a representação estrutural do documento a partir de uma única API consistente. Embora nos concentremos exclusivamente no JavaScript nesta documentação de referência, as implementações do DOM podem ser construídas para qualquer idioma, como este exemplo em Python demonstra:

+ +
# exemplo de DOM com Python
+import xml.dom.minidom as m
+doc = m.parse(r"C:\Projects\Py\chap1.xml")
+doc.nodeName # propriedade do objeto de documento DOM
+p_list = doc.getElementsByTagName("para")
+
+ +

Para obter mais informações sobre quais tecnologias estão envolvidas na criação de JavaScript na Web, consulte JavaScript technologies overview.

+ +

Acessando o DOM

+ +

Você não precisa fazer nada de especial para começar a usar o DOM. Navegadores diferentes têm implementações diferentes do DOM, e essas implementações exibem graus variados de conformidade com o padrão DOM real (um assunto que tentamos evitar nesta documentação), mas todo navegador usa um modelo de objeto de documento para tornar as páginas da web acessíveis via JavaScript.

+ +

Quando você cria um script - seja embutido em um elemento(tag) <script> ou incluído na página da web por meio de uma instrução de carregamento de script - você pode começar imediatamente a usar a API para o {{domxref ("document")}} ou { {domxref ("Window", "window")}} elementos para manipular o próprio documento ou obter os filhos desse documento, que são os vários elementos na página da web. Sua programação DOM pode ser algo tão simples quanto o exemplo seguinte, que exibe uma mensagem de alerta usando a função {{domxref ("window.alert", "alert()")}} da função {{domxref ("Window", " window ")}} ou pode usar métodos DOM mais sofisticados para criar realmente novo conteúdo, como no extenso exemplo abaixo.

+ +

O JavaScript a seguir exibirá um alerta quando o documento for carregado (e quando todo o DOM estiver disponível para uso):

+ +
<body onload="window.alert('Welcome to my home page!');">
+
+ +

Outro exemplo. Esta função cria um novo elemento H1, adiciona texto a esse elemento e, em seguida, adiciona o H1 à árvore deste documento:

+ +
<html>
+  <head>
+    <script>
+       // run this function when the document is loaded
+       window.onload = function() {
+
+         // create a couple of elements in an otherwise empty HTML page
+         var heading = document.createElement("h1");
+         var heading_text = document.createTextNode("Big Head!");
+         heading.appendChild(heading_text);
+         document.body.appendChild(heading);
+      }
+    </script>
+  </head>
+  <body>
+  </body>
+</html>
+
+ +

Tipos de dados fundamentais

+ +

Esta referência tenta descrever os vários objetos e tipos em termos simples. Mas há vários tipos de dados diferentes sendo transmitidos pela API que você deve conhecer.

+ +
+

Nota: Como a grande maioria do código que usa o DOM gira em torno da manipulação de documentos HTML, é comum sempre se referir aos nós no DOM como elementos, pois em um documento HTML, cada nó é um elemento. Apesar de não ser estritamente precisa, a documentação que você encontrará no MDN frequentemente fará a mesma coisa, por causa de quão comum é essa suposição.

+
+ +

A tabela a seguir descreve brevemente esses tipos de dados.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Tipos de dados (Interface)Descrição
{{domxref("Document")}}Quando um membro retorna um objeto do tipo document (por exemplo, a propriedade ownerDocument de um elemento retorna o document ao qual ele pertence),esse objeto é o próprio objeto de  document raiz. O capítulo DOM document Reference descreve o objeto do document .
{{domxref("Node")}}Todo objeto localizado em um documento é um nó de algum tipo. Em um documento HTML, um objeto pode ser um nó de elemento, mas também um nó de texto ou atributo.
{{domxref("Element")}} +

O tipo do element é baseado em node. Isso se refere a um elemento ou um nó do tipo element retornado por um membro do DOM API. Ao invés de dizer, por exemplo, que o método {{domxref("document.createElement()")}}  retorna um objeto de referência para um nó, nós apenas dizemos que esse método retorna o element que acabou de ser criado no DOM. Os objetos do element  implementam a interface DOM Element e também a mais básica interface Node, sendo ambas incluídas juntas nessa referência. Em um documento HTML, elementos são ainda mais aprimorados pelas APIs HTML DOM. A interface {{domxref("HTMLElement")}} bem como outras interfaces descrevem capacidades de tipos especifícos de elementos (por exemlo, {{domxref("HTMLTableElement")}} para elementos {{HTMLElement("table")}}).

+
{{domxref("NodeList")}}Uma nodeList é um array de elementos comos os que são retornados pelo método {{domxref("document.getElementsByTagName()")}}. Itens numa nodeList são acessados por índices em uma das duas formas: +
    +
  • list.item(1)
    • +
  • list[1]
    • +
+ Esses dois são equivalentes. No primeiro, item() é o método único no objeto da nodeList. O último  usa uma sintaxe típica de array para buscar o segundo item na lista.
{{domxref("Attribute")}}Quando um attribute é retornado por um membro (por exemplo, pelo método createAttribute()), é um objeto de referência que expõe uma interface especial (embora pequena) para atributos. Atributos são nós no DOM bem como elementos, mesmo que raramente você possa usá-los como tal.
{{domxref("NamedNodeMap")}} +

 é como um array, mas os itens são acessados por nome ou índice, embora este último caso seja meramente uma conveniência para enumeração, já que eles não estão em uma ordem específica na lista. Um namedNodeMap possui um método item () para esse propósito, e você também pode adicionar e remover itens de um namedNodeMap.

+ +

Um namedNodeMap é como um array, mas os itens são acessados por nome ou índice, embora este último caso seja meramente uma conveniência para enumeração, já que eles não estão em uma ordem específica na lista. O namedNodeMap possui um método item() para esse propósito, e você também pode adicionar e remover itens de um namedNodeMap.

+
+ +

Tenha em mente algumas considerações de terminologia comuns que existem. É comum referir-se a qualquer nó {{domxref("Attribute")}} simplesmente como um attribute, por exemplo, e referir-se a um array de nós DOM como um nodeList. Você encontrará esses termos e outros a serem introduzidos e usados em toda a documentação.

+ +

DOM interfaces

+ +

Esse guia é sobre os objetos e o que você pode usar ao manipular a hierarquia do DOM. Há muitos aspectos que tornam entender como eles funcionam confuso. Por exemplo, o objeto representando o elemento HTML form pega a propriedade name da interface do HTMLFormElement mas a sua propriedade className vem da interface HTMLElement. Em ambos os casos, a propriedade que você quer está naquele objeto do formulário.

+ +

Mas o relacionamento entre objetos e interfaces que são implementadas no DOM pode ser confuso, então essa seção busca mostrar um pouco sobre as interfaces na especificação do DOM e como elas são disponibilizadas.

+ +

Interfaces e Objetos

+ +

Muitos objetos pegam emprestados de várias interfaces diferentes. O objeto table por exemplo implementa uma interface especializada {{domxref("HTMLTableElement")}}, que inclui métodos como createCaption e insertRow. Mas como é também um elemento HTML, table implementa a interface Element descrita no capítulo DOM {{domxref("Element")}} Reference. E finalmente, já que um elemento HTML é também, no que diz respeito ao DOM, um nó na árvore de nós que fazem o modelo de objeto para uma página HTML ou XML, o objeto table também implementa a interface Node mais básica, de onde deriva Element.

+ +

Quando você pegar a referência para um objeto table, como no exemplo a seguir, você rotineiramente usa todas as três interfaces de forma intercambiável no objeto, talvez sem saber.

+ +
var tabela = document.getElementById("table");
+var atributosTabela = tabela.attributes; // interface Node/Element
+for (var i = 0; i < atributosTabela.length; i++) {
+  // interface HTMLTableElement: atributo border
+  if (atributosTabela[i].nodeName.toLowerCase() == "border")
+    tabela.border = "1";
+}
+// interface HTMLTableElement: atributo summary
+table.summary = "nota: aumento de borda";
+
+ +

Interfaces Core no DOM

+ +

Essa seção lista algumas das interfaces mais utilizadas no DOM. A ideia não é descrever o que essas APIs fazem aqui mas para te dar uma ideia de que tipos de métodos e propriedades você verá bastante conforme for usando o DOM. Essas APIs são usadas nos exemplos mais extensos no capítulo de DOM Examples ao fim desse livro.

+ +

Objetos Document e window são os objetos cujas interfaces você geralmente utiliza mais frequentemente em programação DOM. De forma simples, o objeto window representa algo como o browser, e o objeto document é a raiz de todo o documento em si. Element herda dessa interface Node genérica, e juntamente com essas duas interfaces fornecem muitos dos métodos e propriedades que você utiliza em elementos individuais. Esses elementos podem também ter interfaces específicas para lidar com o tipo de dado que esses elementos contêm, como no exemplo do objeto table na seção anterior.

+ +

A seguir uma lista breve de APIs comuns em scripting de páginas web e XML usando o DOM.

+ + + +

Testando a DOM API

+ +

Esse documento fornece amostras para cada interface que você pode usar ao desenvolver. Em alguns casos, as amostras são páginas completas em HTML, com o acesso ao DOM em um elemento <script>, a interface (ex. botões) necessária para ativar o script num formulário, e os elementos HTML pelo qual o DOM opera listados também. Quando esse é o caso, você pode copiar e colar o exemplo em um novo documento HTML, salvar e rodar o exemplo pelo browser.

+ +

Há alguns casos, porém, que os exemplos são mais concisos. Para rodar exemplos que apenas demonstram o relacionamento básico da interface para os elementos HTML, você pode criar uma página teste em que as interfaces podem ser fácilmente acessadas por scripts. A simples página web a seguir fornece um elemento <script> no header em que você pode colocar funções para testar a interface, alguns elementos HTML com atributos que você consegue buscar, definir ou manipular, e a interface web do usuário necessária para chamar essas funções pelo broswer.

+ +

Você pode usar essa página teste ou criar uma similar para testar as interfaces DOM que quiser e ver como elas funcionam numa plataforma broswer. Você pode alterar os conteúdos da função test() como achar necessário, criar mais botões ou adicionar elementos se necessário.

+ +
<html>
+  <head>
+    <title>Testes DOM</title>
+    <script type="application/javascript">
+    function setBodyAttr(attr, value){
+      if (document.body) eval('document.body.'+attr+'="'+value+'"');
+      else notSupported();
+    }
+    </script>
+  </head>
+  <body>
+    <div style="margin: .5in; height: 400;">
+      <p><b><tt>text</tt></b></p>
+      <form>
+        <select onChange="setBodyAttr('text',
+        this.options[this.selectedIndex].value);">
+          <option value="black">preto
+          <option value="darkblue">azul escuro
+        </select>
+        <p><b><tt>bgColor</tt></b></p>
+        <select onChange="setBodyAttr('bgColor',
+        this.options[this.selectedIndex].value);">
+          <option value="white">branco
+          <option value="lightgrey">cinza
+        </select>
+        <p><b><tt>link</tt></b></p>
+        <select onChange="setBodyAttr('link',
+        this.options[this.selectedIndex].value);">
+          <option value="blue">azul
+          <option value="green">verde
+        </select>  <small>
+        <a href="http://algum.website.tld/pagina.html" id="amostra">
+        (link)</a></small><br>
+      </form>
+      <form>
+        <input type="button" value="version" onclick="ver()" />
+      </form>
+    </div>
+  </body>
+</html>
+
+ +

Para testar várias interfaces numa única página - por exemplo, um conjunto de propriedades que afete as cores de uma página web - você pode criar uma página de teste similar com um console inteiro de botões, textfields e outros elementos HTML. A screenshot a seguir te dá uma ideia de como interfaces podem ser agrupadas para testes.

+ +
+
Figura 0.1 Página de Teste DOM
+Image:DOM_Ref_Introduction_to_the_DOM.gif
+ +

Nesse exemplo, os menus drop-down atualizam dinamicamente os aspectos acessáveis pelo DOM na página web como o fundo (bgColor), a cor dos hiperlinks (aLink), e a cor do texto (text). Porém, ao desenhar suas páginas de teste, testar as interfaces conforme for lendo sobre elas é uma parte importante para aprender a usar o DOM de forma efetiva.

+ + + + + +
{{DefaultAPISidebar("DOM")}}
diff --git a/files/pt-br/web/api/document_object_model/whitespace/index.html b/files/pt-br/web/api/document_object_model/whitespace/index.html new file mode 100644 index 0000000000..f4bebc3678 --- /dev/null +++ b/files/pt-br/web/api/document_object_model/whitespace/index.html @@ -0,0 +1,227 @@ +--- +title: Whitespace no DOM +slug: DOM/Referencia_do_DOM/Whitespace_in_the_DOM +tags: + - DOM + - Intermediário +translation_of: Web/API/Document_Object_Model/Whitespace +--- +

O problema

+ +

A presença de espaço branco no DOM pode dificultar a manipulação da árvore de conteúdo de formas imprevisíveis. No Mozilla, todo o espaço branco no conteúdo de texto do documento original é representado no DOM (isso não inclui whitespace entre tags). (Isso é necessário internamente para que o editor possa preservar a formatação de documentos e também que white-space: pre irá funcionar em CSS). Isso significa que:

+ + + +

Em outras palavras, a árvore do DOM para o documento seguinte irá parecer como a imagem abaixo (usando "\n" para representar novas linhas):

+ +
<!-- Meu documento -->
+<html>
+<head>
+  <title>Meu documento</title>
+</head>
+<body>
+  <h1>Cabeçalho</h1>
+  <p>
+    Parágrafo
+  </p>
+</body>
+</html>
+
+ +

+ +

Isto pode fazer as coisas um pouco difíceis para qualquer usuário do DOM que quer iterar através do conteúdo, excluindo o whitespace.

+ +

Facilitando as coisas

+ +

É possível formatar o código como mostrado abaixo para contornar o problema:

+ +
<!-- Impressão bonita convencional
+     com espaços brancos (whitespaces) entre as tags:
+ -->
+<div>
+ <ul>
+  <li>Posição 1</li>
+  <li>Posição 2</li>
+  <li>Posição 3</li>
+ </ul>
+</div>
+
+<!-- Impressão bonita ajustada ao problema:
+ -->
+<div
+ ><ul
+  ><li>Posição 1</li
+  ><li>Posição 2</li
+  ><li>Posição 3</li
+ ></ul
+></div>
+
+ +


+ O código Javascript abaixo define funções diversas que fazem a manipulação de whitespace no DOM mais fácil.

+ +
/**
+ * Em todo, o whitespace é definido como um dos caracteres
+ *  "\t" TAB \u0009
+ *  "\n" LF  \u000A
+ *  "\r" CR  \u000D
+ *  " "  SPC \u0020
+ *
+ * Isto não usa o "\s" do Javascript porque inclui espaços
+ * que não quebram (e alguns outros caracteres).
+ */
+
+
+/**
+ * Determina se um conteúdo de texto do nó é inteiramente whitespace.
+ *
+ * @param nod  Um nó implementando a interface |CharacterData| (por exemplo:
+ *             |Text|, |Comment|, ou nó |CDATASection|
+ * @return     Verdadeiro se todo conteúdo de texto de |nod| é whitespace,
+ *             de outra forma é falso.
+ */
+function is_all_ws( nod )
+{
+  // Usa as características do ECMA-262 Edition 3 String e RegExp
+  return !(/[^\t\n\r ]/.test(nod.textContent));
+}
+
+
+/**
+ * Determina se um nó deve ser ignorado pela função de iterador.
+ *
+ * @param nod  Um objeto implementando a interface DOM1 |Node|.
+ * @return     verdadeiro se o nó é:
+ *                1) Um nó |Text| que é todo whitespace
+ *                2) Um nó |Comment|
+ *             do contrário é falso.
+ */
+
+function is_ignorable( nod )
+{
+  return ( nod.nodeType == 8) || // Um nó de comentário
+         ( (nod.nodeType == 3) && is_all_ws(nod) ); // um nó de texto, todo whitespace
+}
+
+/**
+ * Versão de |previousSibling| que pula nós que são inteiramente
+ * whitespace ou comentários.  (Normalmente |previousSibling| é uma propriedade
+ * de todos os nós do DOM que dá o nó irmão, o nó que é
+ * um filho do mesmo parente, que ocorre imediatamente antes do
+ * nó de referência.)
+ *
+ * @param sib  O nó de referência.
+ * @return     Ou:
+ *               1) O irmão mais próximo do |sib| que não é
+ *                  ignorável de acordo com |is_ignorable|, ou
+ *               2) nulo se tal nó não existe.
+ */
+function node_before( sib )
+{
+  while ((sib = sib.previousSibling)) {
+    if (!is_ignorable(sib)) return sib;
+  }
+  return null;
+}
+
+/**
+ * Versão de |nextSibling| que pula nós que são inteiramente
+ * whitespace ou comentários.
+ *
+ * @param sib  O nó de referência.
+ * @return     Ou:
+ *               1) O irmão mais próximo do |sib| que não é
+ *                  ignorável de acordo com |is_ignorable|, ou
+ *               2) nulo se tal nó não existe.
+ */
+function node_after( sib )
+{
+  while ((sib = sib.nextSibling)) {
+    if (!is_ignorable(sib)) return sib;
+  }
+  return null;
+}
+
+/**
+ * Versão de  |lastChild| que pula nós que são inteiramente
+ * whitespace ou comentários.  (Normalmente |lastChild| é uma propriedade
+ * de todos os nós do DOM que dá o último dos nós contidos
+ * diretamente no nó de referência.)
+ *
+ * @param sib  O nó de referência.
+ * @return     Ou:
+ *               1) O último filho do |sib| que não é
+ *                  ignorável de acordo com |is_ignorable|, ou
+ *               2) nulo se tal nó não existe.
+ */
+function last_child( par )
+{
+  var res=par.lastChild;
+  while (res) {
+    if (!is_ignorable(res)) return res;
+    res = res.previousSibling;
+  }
+  return null;
+}
+
+/**
+ * Versão de |firstChild| que pula nós que são inteiramente
+ * whitespace ou comentários.
+ *
+ * @param sib  O nó de referência.
+ * @return     Ou:
+ *               1) O primeiro nó do |sib| que não é
+ *                  ignorável de acordo com |is_ignorable|, ou
+ *               2) nulo se tal nó não existe.
+ */
+function first_child( par )
+{
+  var res=par.firstChild;
+  while (res) {
+    if (!is_ignorable(res)) return res;
+    res = res.nextSibling;
+  }
+  return null;
+}
+
+/**
+ * Versão de |data| que não inclui whitespace no início
+ * e final e normaliza todos whitespaces para um espaço individual.  (Normalmente
+ * |data| é uma propriedade de nós de texto que dá o texto do nó.)
+ *
+ * @param txt  O nó de texto do qual data deve ser retornado
+ * @return     Uma string dando os conteúdos de um nó de texto com
+ *             whitespace colapsado.
+ */
+function data_of( txt )
+{
+  var data = txt.textContent;
+  // Usa características do ECMA-262 Edition 3 String e RegExp
+  data = data.replace(/[\t\n\r ]+/g, " ");
+  if (data.charAt(0) == " ")
+    data = data.substring(1, data.length);
+  if (data.charAt(data.length - 1) == " ")
+    data = data.substring(0, data.length - 1);
+  return data;
+}
+
+ +

Exemplo

+ +

O código seguinte demonstra o uso das funções acima. Ele itera através dos filhos de um elemento (dos quais filhos são todos os elementos) para encontrar aquele cujo o texto seja "Este é o terceiro parágrafo", e então muda o atributo da classe e os conteúdos daquele parágrafo.

+ +
var cur = first_child(document.getElementById("teste"));
+while (cur)
+{
+  if (data_of(cur.firstChild) == "Este é o terceiro parágrafo.")
+  {
+      cur.className = "mágica";
+      cur.firstChild.textContent = "Este é o parágrafo mágico";
+  }
+  cur = node_after(cur);
+}
+
diff --git a/files/pt-br/web/api/documentorshadowroot/activeelement/index.html b/files/pt-br/web/api/documentorshadowroot/activeelement/index.html new file mode 100644 index 0000000000..ca10f98461 --- /dev/null +++ b/files/pt-br/web/api/documentorshadowroot/activeelement/index.html @@ -0,0 +1,165 @@ +--- +title: Document.activeElement +slug: Web/API/Document/activeElement +tags: + - API + - Document + - HTML DOM + - Property + - Reference +translation_of: Web/API/DocumentOrShadowRoot/activeElement +translation_of_original: Web/API/Document/activeElement +--- +

{{APIRef("DOM")}}

+ +

Retorna o {{ domxref("Element", "elemento") }} atualmente em foco, ou seja, o elemento que receberá os eventos do teclado caso o usuário digite algo. Esse atributo é somente-leitura.

+ +

Geralmente retorna um {{ HTMLElement("input") }} ou {{ HTMLElement("textarea") }}, caso esteja com uma seleção de texto ativa. Caso esteja, pode obter mais informações sobre a seleção utilizando as propriedades selectionStart e selectionEnd. Caso o elemento em foco seja um {{ HTMLElement("select") }}(menu) ou {{ HTMLElement("input") }} do tipo button, checkbox ou radio.

+ +
Note: No Mac, elementos que nao sejam campos de texto geralmente não recebem foco.
+ +

Normalmente o usuário pode navegar entre os elementos que pode receber foco na página com o uso da tecla tab e ativar estes elementos com a tecla espaço (apertar um botão ou selecionar uma opção).

+ +

Não confunda foco com uma seleção de texto no documento, que consiste em sua maioria de nódos de texto estáticos. Veja {{ domxref("window.getSelection()") }}.

+ +

Quando não há nada selecionado, o activeElement da página é o {{ HTMLElement("body") }} ou null. 

+ +
+

Este atributo é parte da seção "Em desenvolvimento" da especificação do HTML 5.

+
+ +

Sintaxe

+ +
var curElement = document.activeElement;
+
+ +

Exemplo

+ +
<!DOCTYPE HTML>
+<html>
+<head>
+    <script type="text/javascript" charset="utf-8">
+    function init() {
+
+        function onMouseUp(e) {
+            console.log(e);
+            var outputElement = document.getElementById('output-element');
+            var outputText = document.getElementById('output-text');
+            var selectedTextArea = document.activeElement;
+            var selection = selectedTextArea.value.substring(
+            selectedTextArea.selectionStart, selectedTextArea.selectionEnd);
+            outputElement.innerHTML = selectedTextArea.id;
+            outputText.innerHTML = selection;
+        }
+
+        document.getElementById("ta-example-one").addEventListener("mouseup", onMouseUp, false);
+        document.getElementById("ta-example-two").addEventListener("mouseup", onMouseUp, false);
+    }
+    </script>
+</head>
+<body onload="init()">
+<div>
+    Select some text from one of the Textareas below:
+</div>
+<form id="frm-example" action="#" accept-charset="utf-8">
+<textarea name="ta-example-one" id="ta-example-one" rows="8" cols="40">
+This is Textarea Example One:
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt, lorem a porttitor molestie, odio nibh iaculis libero, et accumsan nunc orci eu dui.
+</textarea>
+<textarea name="ta-example-two" id="ta-example-two" rows="8" cols="40">
+This is Textarea Example Two:
+Fusce ullamcorper, nisl ac porttitor adipiscing, urna orci egestas libero, ut accumsan orci lacus laoreet diam. Morbi sed euismod diam.
+</textarea>
+</form>
+Active Element Id: <span id="output-element"></span><br/>
+Selected Text: <span id="output-text"></span>
+
+</body>
+</html>
+
+ +

View on JSFiddle

+ +

Notas

+ +

Originalmente apresentada como extensão DOM proprietária no Internet Explorer 4, esta propriedade também é suportada no Opera e Safari (versão 4 ou maior)

+ +

Especificações

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'interaction.html#dom-document-activeelement', 'activeElement')}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilidade nos navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support23.04 [1]9.64.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

[1]: O IE9 tem um bug que ao tentar acessar o activeElement do {{domxref("window.parent")}} {{domxref("Document")}} de um {{HTMLElement("iframe")}}(i.e. parent.document.activeElement) é lançado um erro

+ +

Eventos relacionados

+ + diff --git a/files/pt-br/web/api/documentorshadowroot/elementfrompoint/index.html b/files/pt-br/web/api/documentorshadowroot/elementfrompoint/index.html new file mode 100644 index 0000000000..c64d67dd08 --- /dev/null +++ b/files/pt-br/web/api/documentorshadowroot/elementfrompoint/index.html @@ -0,0 +1,133 @@ +--- +title: Document.elementFromPoint() +slug: Web/API/Document/elementFromPoint +tags: + - API + - CSSOM View + - Method + - NeedsMarkupWork + - NeedsMobileBrowserCompatibility + - Reference +translation_of: Web/API/DocumentOrShadowRoot/elementFromPoint +translation_of_original: Web/API/Document/elementFromPoint +--- +
{{APIRef("DOM")}}
+ +

O método elementFromPoint() da interface {{domxref("Document")}} retorna o elemento de maior nível nas coordenadas especificadas.

+ +

Se o elemento no ponto especificado pertencer à outro documento (por exemplo, um subdocumento em um iframe), será retornado o pai do subdocumento (o próprio iframe). Se o elemento em determinado ponto for anônimo ou for um conteudo gerado por XBL, como por exemplo barras de scroll de caixas de texto, então será retornado o primeiro elemento pai, não-anônimo (por exemplo, a própria caixa de texto).

+ +

Se o ponto especificado estiver fora dos limites visíveis do documento ou tiver uma coordenada negativa, o resultado é null.

+ +

Se você precisa encontrar uma posição específica dentro do elemento, use {{domxref("Document.caretPositionFromPoint()")}}.

+ +

{{Note("Chamados por documentos XUL devem esperar até o evento onload ser acionado antes de chamar este método.")}}

+ +

Sintaxe

+ +
var element = document.elementFromPoint(x, y);
+ +

Parâmetros

+ +
+
x
+
Uma posição horizontal dentro do viewport atual.
+
y
+
Uma position vertical dentro do viewport atual.
+
+ +

Valor retornado

+ +

O objeto de nível mais alto {{domxref("Element")}} dentro das coordenadas declaradas.

+ +

Exemplo

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>exemplo de elementFromPoint</title>
+
+<script>
+function changeColor(newColor) {
+  elem = document.elementFromPoint(2, 2);
+  elem.style.color = newColor;
+}
+</script>
+</head>
+
+<body>
+<p id="para1">Algum texto aqui</p>
+<button onclick="changeColor('blue');">azul</button>
+<button onclick="changeColor('red');">vermelho</button>
+</body>
+</html>
+
+ +

Especificações

+ + + + + + + + + + + + + + +
EspecificaçãoStatusComment
{{SpecName('CSSOM View', '#dom-document-elementfrompoint', 'elementFromPoint')}}{{Spec2('CSSOM View')}}Definição Inicial.
+ +

Compatibilidade entre navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FuncionalidadeChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support {{CompatChrome(4.0)}}35.510.50{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FuncionalidadeAndroidChrome para AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/pt-br/web/api/documentorshadowroot/getselection/index.html b/files/pt-br/web/api/documentorshadowroot/getselection/index.html new file mode 100644 index 0000000000..2f52375799 --- /dev/null +++ b/files/pt-br/web/api/documentorshadowroot/getselection/index.html @@ -0,0 +1,9 @@ +--- +title: Document.getSelection() +slug: Web/API/Document/getSelection +translation_of: Web/API/DocumentOrShadowRoot/getSelection +translation_of_original: Web/API/Document/getSelection +--- +

{{APIRef("DOM")}}

+ +

Esse método funciona de forma idêntica ao método {{domxref("Window.getSelection()")}};  Ele retorna um objeto {{domxref("Selection")}} representando o texto atualmente selecionado no documento.

diff --git a/files/pt-br/web/api/element/accesskey/index.html b/files/pt-br/web/api/element/accesskey/index.html deleted file mode 100644 index e0425e3645..0000000000 --- a/files/pt-br/web/api/element/accesskey/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Element.accessKey -slug: Web/API/Element/accessKey -translation_of: Web/API/HTMLElement/accessKey -translation_of_original: Web/API/Element/accessKey ---- -
{{APIRef("DOM")}}
- -
 
- -

A propriedade Element.accessKey define a tecla pelo qual o usuário pode pressionar para saltar para este elemento.

- -
-

Nota: A propriedade Element.accessKey é raramente usada por causa dos conflitos múltiplos com os atalhos pré-definidos nos navegadores. Para contornar isto, os navegadores implementam o comportamento da tecla de acesso se as teclas são pressionadas com outras teclas "qualificadas" (como Alt + tecla de acesso).

-
- -

 

- -

 

diff --git a/files/pt-br/web/api/element/addeventlistener/index.html b/files/pt-br/web/api/element/addeventlistener/index.html deleted file mode 100644 index fea1e67e7b..0000000000 --- a/files/pt-br/web/api/element/addeventlistener/index.html +++ /dev/null @@ -1,322 +0,0 @@ ---- -title: Element.addEventListener() -slug: Web/API/Element/addEventListener -translation_of: Web/API/EventTarget/addEventListener ---- -

{{apiref("DOM Events")}}

- -

addEventListener() registra uma única espera de evento em um único alvo. O alvo do evento pode ser um único elemento em um documento, o documento em si, uma janela, ou um XMLHttpRequest.

- -

Para registrar mais de uma espera de evento como alvo, chame addEventListener() para o mesmo alvo mas com diferentes tipos de evento ou captura de parâmetros.

- -

Sintaxe

- -
alvo.addEventListener(type,listener[, options]);
-alvo.addEventListener(type,listener[, useCapture, wantUntrusted {{ Non-standard_inline() }}]); // Gecko/Mozilla only
- -
-
type
-
Uma linha de texto que representa o tipo de evento a ser esperado.
-
listener
-
O objeto que recebe uma notificação quando um evento do tipo especificado ocorre. Esse objeto precisa implementar a interface do EventListener, ou simplesmente executar uma função JavaScript.
-
useCapture {{ optional_inline() }}
-
Se true, useCapture indica que o usuário deseja iniciar uma captura. Depois de iniciada a captura, todos os eventos do tipo especificado serão enviados à listener registrada antes de serem enviados à qualquer EventTarget abaixo dela na hierarquia de DOMs. Eventos que borbulharem para cima na hierarquia não acionarão a escuta designada  a usar a captura. Veja Eventos DOM Nível 3 para uma explicação detalhada. Perceba que esse parâmetro não é opcional em todos os navegadores. Se não for especificado, useCapture é false.
-
wantsUntrusted {{ Non-standard_inline() }}
-
Se true, o evento pode ser acionado por conteúdo não-confiável. Veja Interação entre páginas com e sem privilégios.
-
- -
Nota: useCapture tornou-se opcional somente nas versões mais recentes dos principais navegadores; não era opcional antes do Firefox 6, por exemplo. Você deve especificar esse parâmetro para obter uma maior compatibilidade.
- - -

Exemplo

- -
<!DOCTYPE html>
-<html>
-<head>
-<title>Exemplo de Evento DOM</title>
-
-<style>
-#t { border: 1px solid red }
-#t1 { background-color: pink; }
-</style>
-
-<script>
-// Função para mudar o conteúdo de t2
-function modifyText() {
-  var t2 = document.getElementById("t2");
-  t2.firstChild.nodeValue = "three";
-}
-
-// Função para adicionar uma espera de evento em t
-function load() {
-  var el = document.getElementById("t");
-  el.addEventListener("click", modifyText, false);
-}
-
-document.addEventListener("DOMContentLoaded", load, false);
-</script>
-
-</head>
-<body>
-
-<table id="t">
-   <tr><td id="t1">one</td></tr>
-   <tr><td id="t2">two</td></tr>
-</table>
-
-</body>
-</html>
-
- -

View on JSFiddle

- -

No exemplo acima, modifyText() é uma escuta para eventos de click registrados usando addEventListener(). Um clique em qualquer lugar da tabela irá borbulhar para cima até o manipulador e executar modifyText().

- -

Se você deseja passar parâmetros para a função de escuta, você deve usar uma função anônima.

- -
<!DOCTYPE html>
-<html>
-<head>
-<title>Exemplo de Evento DOM</title>
-
-<style>
-#t { border: 1px solid red }
-#t1 { background-color: pink; }
-</style>
-
-<script>
-
-// Função para mudar o conteúdo de t2
-function modifyText(new_text) {
-  var t2 = document.getElementById("t2");
-  t2.firstChild.nodeValue = new_text;
-}
-
-// Função para adicionar uma espera de evento em t
-function load() {
-  var el = document.getElementById("t");
-  el.addEventListener("click", function(){modifyText("four")}, false);
-}
-</script>
-
-</head>
-<body onload="load();">
-
-<table id="t">
-  <tr><td id="t1">one</td></tr>
-  <tr><td id="t2">two</td></tr>
-</table>
-
-</body>
-</html>
-
- -

Notas

- -

Por que usar addEventListener?

- -

addEventListener é a maneira de registrar uma espera de evento como especificada no W3C DOM. Seus benefícios são os seguintes:

- - - -

Existe outra alternativa, uma maneira ultrapassada de registrar esperas de evento.

- -

Adicionando uma espera de evento durante um disparo de evento

- -

Se um EventListener for somado a um EventTarget enquanto está processando um evento, ele não será ativado pelas ações atuais, mas poderá ser ativado em um período posterior no fluxo de eventos, como na fase de borbulha.

- -

Múltiplas esperas de evento idênticas

- -

Se múltiplas esperas de evento idênticas forem registradas no mesmo EventTarget com os mesmos parâmetros, as versões duplicadas serão descartadas. Elas não fazem o EventListener ser disparado mais de uma vez, e, como as duplicatas são descartadas, elas não precisam ser removidas manualmente com o método removeEventListener.

- -

O valor de this no manipulador

- -

É preferível referenciar o elemento do qual a espera de evento foi disparada, como quando é usado um manipulador genérico para uma série de elementos similares. Quando anexar uma função usando addEventListener(), o valor de this é mudado — perceba que o valor de this é passado para uma função a partir do disparador.

- -

Nos exemplos acima, o valor de this em modifyText(), quando disparado pelo evento de clique, é uma referência à tabela 't'. Isso é um contraste do comportamento que acontece se o manipulador é adicionado ao HTML fonte:

- -
<table id="t" onclick="modifyText();">
-  . . .
- -

O valor de this em modifyText(), quando disparado pelo evento de clique no HTML, será uma referência ao objeto global (no caso, a janela).

- -
Nota: JavaScript 1.8.5 introduz o método Function.prototype.bind(), que permite especificar o valor que deve ser usado como this para todas as chamadas à uma determinada função. Isso evita problemas quando não é claro o que this será, dependendo do contexto do qual a sua função for chamada. Perceba, entretanto, que é preciso manter uma referência da escuta à mão, para que depois você possa removê-la.
- -

Este é um exemplo com e sem bind:

- -
var Algo = function(elemento)
-{
-  this.nome = 'Algo bom';
-  this.onclick1 = function(evento) {
-    console.log(this.nome); // indefinido, porque this é a função de escuta do clique
-  };
-  this.onclick2 = function(evento) {
-    console.log(this.nome); // 'Algo bom', porque this está como objeto Algo através do bind
-  };
-  elemento.addEventListener('click', this.onclick1, false);
-  elemento.addEventListener('click', this.onclick2.bind(this), false); // Truque de bind
-}
-
- -

Outra solução é usar uma função especial chamada handleEvent para capturar quaisquer eventos:

- -
var Algo = function(elemento)
-{
-  this.nome = 'Algo bom';
-  this.handleEvent = function(evento) {
-    console.log(this.nome); // 'Algo bom', porque this é o objeto Algo
-    switch(evento.type) {
-      case 'click':
-        // seu codigo aqui...
-        break;
-      case 'dblclick':
-        // seu codigo aqui...
-        break;
-    }
-  };
-  elemento.addEventListener('click', this, false); // Não this.handleEvent, só this
-  elemento.addEventListener('dblclick', this, false); // Não this.handleEvent, só this
-}
-
- -

Internet Explorer antigos e attachEvent

- -

Em versões do Internet Explorer anteriores ao IE9, você precisa usar attachEvent em vez do padrão addEventListener. Para dar suporte ao IE, o exemplo acima pode ser modificado para:

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

Existe um porém com attachEvent: o valor de this será a referência ao objeto window em vez do elemento do qual foi disparado.

- -

Uma maneira ultrapassada de registrar esperas de evento

- -

addEventListener() foi introduzido com as especificações de Eventos DOM 2. Antes disso, esperas de evento eram registradas assim:

- -
// Passe uma função de referência — não adicione '()' depois dela, o que chamaria a função!
-el.onclick = modifyText;
-
-// Usando uma expressão de função
-element.onclick = function() {
-    // ... lógica da função ...
-};
-
- -

Esse método substitui as esperar de evento de click no elemento, se houve alguma. Igualmente para outros outros eventos e manipuladores de evento associados, como blur (onblur), keypress (onkeypress), e assim por diante.

- -

Porque era essencialmente uma parte do DOM 0, esse método era largamente suportado e não necessitava de códigos entre-navegadores especiais; logo é normalmente usado para registrar esperas de evento dinâmicamente, a menos que atributos extras do addEventListener() sejam necessários.

- -

Problemas de memória

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

No primeiro caso, uma nova função (anônima) é criada em cada turno do loop. No segundo caso, a mesma função previamente declarada é usada como um manipulador de evento. Isso resulta em um consumo menor de memória. Além do mais, no primeiro caso, já que nenhuma referência à função anônima é mantida, não é possível chamar element.removeEventListener porque não há uma referência ao manipulador, enquanto no segundo caso é possível fazer myElement.removeEventListener("click", processEvent, false).

- -

Compatiblidade de navegadores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suporte básico1.0{{ CompatGeckoDesktop(1.0) }}9.071.0
useCapture é opcional1.06.09.011.60{{ CompatVersionUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico1.0{{ CompatGeckoMobile(1.0) }}9.06.01.0
-
- -

Notas Gecko

- - - -

Notas Webkit

- - - -

Veja também

- - - -

Especificação

- - diff --git a/files/pt-br/web/api/element/blur_event/index.html b/files/pt-br/web/api/element/blur_event/index.html new file mode 100644 index 0000000000..7eb9263be2 --- /dev/null +++ b/files/pt-br/web/api/element/blur_event/index.html @@ -0,0 +1,154 @@ +--- +title: blur (evento) +slug: Web/Events/blur +translation_of: Web/API/Element/blur_event +--- +

O evento blur é acionado quando um elemento perde foco. A diferença principal entre este evento e focusout é que apenas o segundo 'borbulha'.

+ +

Informação geral

+ +
+
Especificação
+
DOM L3
+
Interface
+
{{domxref("FocusEvent")}}
+
Borbulha
+
Não
+
Cancelável
+
Não
+
Alvo
+
Elemento
+
Ação padrão
+
Nenhuma
+
+ +

{{NoteStart}}O valor de {{domxref("Document.activeElement")}} varia entre navegadores enquanto este evento é processado ({{bug(452307)}}): O IE10 define-o para o elemento para onde o foco moverá, enquanto Firefox e Chrome muitas vezes definem-o para o body do documento.{{NoteEnd}}

+ +

Propriedades

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}Event target (DOM element)
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
relatedTarget {{readonlyInline}}{{domxref("EventTarget")}} (DOM element)null
+ +

Delegação do evento

+ +

Existem duas maneiras de implementar a delegação de eventos para este evento: usando o evento focusout nos navegadores que suportam-o, ou definindo o parâmetro "useCapture" do addEventListener para true:

+ +

Conteúdo HTML 

+ +
<form id="form">
+  <input type="text" placeholder="text input">
+  <input type="password" placeholder="password">
+</form>
+ +

Conteúdo JavaScript

+ +
var form = document.getElementById("form");
+form.addEventListener("focus", function( event ) {
+  event.target.style.background = "pink";
+}, true);
+form.addEventListener("blur", function( event ) {
+  event.target.style.background = "";
+}, true);
+ +

{{EmbedLiveSample('Event_delegation')}}

+ +

Compatibilidade entre navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico5{{CompatVersionUnknown}}{{CompatVersionUnknown}}[1]612.15.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome para AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico4.053{{CompatVersionUnknown}}{{CompatUnknown}}10.012.15.1
+
+ +

[1] Antes do Gecko 24 {{geckoRelease(24)}} a interface para este elemento era {{domxref("Event")}}, não {{domxref("FocusEvent")}}. Veja ({{bug(855741)}}).

+ +

Eventos relacionados

+ + diff --git a/files/pt-br/web/api/element/focus_event/index.html b/files/pt-br/web/api/element/focus_event/index.html new file mode 100644 index 0000000000..9f6dd7117d --- /dev/null +++ b/files/pt-br/web/api/element/focus_event/index.html @@ -0,0 +1,137 @@ +--- +title: focus +slug: Web/Events/focus +translation_of: Web/API/Element/focus_event +--- +

O evento focus é acionado assim que um elemento recebe um foco. O grande diferencial entre este evento e o evento focusin, é que esse segundo "borbulha".

+ +

Informações Gerais

+ +
+
Especificação
+
DOM L3
+
Interface
+
{{ domxref("FocusEvent") }}
+
Borbulha
+
Não
+
Cancelável
+
Não
+
Alvo
+
Element
+
Ação Padrão
+
Nenhuma.
+
+ +
Note: The interface was {{ domxref("Event") }} prior to Gecko 24 {{ geckoRelease(24) }}. ({{ bug(855741) }})
+ +

Propriedades

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}Event target (DOM element)
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
relatedTarget {{readonlyInline}}{{domxref("EventTarget")}} (DOM element)null
+ +

Eventos Delegados

+ +

Existem 2 maneiras diferentes de implementações delegados a partir de um evento: por meio da utilização do evento  focusin que todos os browsers atuais suportam tão tecnologia (todos exceto o Firefox), ou por setando o parâmetro "useCapture" do elemento  addEventListener  como true:

+ +

{{ EmbedLiveSample('Event_delegation', '', '', '', 'Web/Events/blur') }}

+ +

(Exemplo de codigo do evento blur (event))

+ +

Compatibilidade de Browser

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown()}}{{CompatUnknown()}}{{CompatUnknown()}}{{CompatUnknown()}}{{CompatUnknown()}}{{CompatUnknown()}}{{CompatUnknown()}}
+
+ +

Eventos Relacionais

+ + diff --git a/files/pt-br/web/api/element/focusin_event/index.html b/files/pt-br/web/api/element/focusin_event/index.html new file mode 100644 index 0000000000..797424de54 --- /dev/null +++ b/files/pt-br/web/api/element/focusin_event/index.html @@ -0,0 +1,125 @@ +--- +title: focusin +slug: Web/Events/focusin +translation_of: Web/API/Element/focusin_event +--- +

O evento focusin é acionado no momento em que o elemento receba o foco. A grande diferença entre esse evento e o evento  focus, é que apenas o focusin delega o seu evento para o elemento pai (conhecido como bubbling ou deletegate).

+ +

Informações Gerais

+ +
+
Especificação
+
DOM L3
+
Interface
+
{{domxref("FocusEvent")}}
+
Borbulha
+
Sim
+
Cancelável
+
Não
+
Alvo
+
Element
+
Ação Padrão
+
Nenhuma.
+
+ +

Propriedades

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}Event target losing focus.
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
relatedTarget {{readonlyInline}}{{domxref("EventTarget")}} (DOM element)Event target receiving focus.
+ +

Compatibilidade com Demais Navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(52)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(52)}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
+ +

Eventos Relacionais

+ + diff --git a/files/pt-br/web/api/element/focusout_event/index.html b/files/pt-br/web/api/element/focusout_event/index.html new file mode 100644 index 0000000000..8f72b211b2 --- /dev/null +++ b/files/pt-br/web/api/element/focusout_event/index.html @@ -0,0 +1,125 @@ +--- +title: focusout +slug: Web/Events/focusout +translation_of: Web/API/Element/focusout_event +--- +

O evento focusout é acionado assim que o elemento perde o foco. A principal diferença entre esse evento e o evento blur, é que esse ultimo não gera "borbulhas".

+ +

Informações Gerais

+ +
+
Especificação
+
DOM L3
+
Interface
+
{{domxref("FocusEvent")}}
+
Borbulha
+
Sim
+
Cancelável
+
Não
+
Alvo
+
Element
+
Ação Padrão
+
Nenhuma.
+
+ +

Propriedades

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}Event target losing focus.
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
relatedTarget {{readonlyInline}}{{domxref("EventTarget")}} (DOM element)Event target receiving focus.
+ +

Compatibilidade dos Navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(52)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(52)}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
+ +

Eventos Relcionados

+ + diff --git a/files/pt-br/web/api/element/name/index.html b/files/pt-br/web/api/element/name/index.html deleted file mode 100644 index 93f5faee9a..0000000000 --- a/files/pt-br/web/api/element/name/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: Element.name -slug: Web/API/Element/name -tags: - - API - - DOM - - Element - - NeedsBrowserCompatibility - - NeedsUpdate - - Property - - Reference - - Web -translation_of: Web/API -translation_of_original: 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/web/api/event/comparativo_entre_event_targets/index.html b/files/pt-br/web/api/event/comparativo_entre_event_targets/index.html deleted file mode 100644 index e9b2004719..0000000000 --- a/files/pt-br/web/api/event/comparativo_entre_event_targets/index.html +++ /dev/null @@ -1,167 +0,0 @@ ---- -title: Comparativo entre Event Targets -slug: Web/API/Event/Comparativo_entre_Event_Targets -tags: - - DOM - - Event - - event target -translation_of: Web/API/Event/Comparison_of_Event_Targets ---- -
{{ ApiRef() }}
- -

Event targets

- -

É facil se confundir sobre o tipo de alvo (target) que deseja-se examinar ao criar um manipulador de eventos (event handler). Este artigo se propõe a esclarecer o uso da propriedade target.

- -

Há 5 tipos de targets a se considerar:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropriedadeDefinido emObjetivo
event.targetDOM Event Interface -

O elemento do DOM à esquerda da chamada que disparou este evento, por exemplo:

- - 
-element.dispatchEvent(event)
-
-
event.currentTargetDOM Event InterfaceO EventTarget do qual o EventListeners está sendo atualmente processado. Logo que a captura e a subida do evento ocorre a mudança deste valor.
event.relatedTargetDOM MouseEvent InterfaceIdentifica um alvo secundário para o evento.
event.explicitOriginalTarget{{ Source("/dom/public/idl/events/nsIDOMNSEvent.idl", "nsIDOMNSEvent.idl") }}{{ Non-standard_inline() }} Se o evento foi redirecionado por alguma outra razão senão o cruzamento de uma fronteira anônima, este evento será colocado no alvo antes que o redirecionamento ocorra. por exemplo, eventos do mouse são redirecionados à seus elementos pais quando acontecem sobre nós de texto ({{ Bug("185889") }}), e neste caso .target mostrará o nó pai e .explicitOriginalTarget mostrará o nó texto. Diferente de .originalTarget, .explicitOriginalTarget nunca irá conter um conteúdo anônimo.
event.originalTarget{{ Source("/dom/public/idl/events/nsIDOMNSEvent.idl", "nsIDOMNSEvent.idl") }}{{ Non-standard_inline() }} O alvo original do evento, antes de qualquer redirecionamento. Veja Anonymous Content#Event_Flow_and_Targeting para mais detalhes.
- -

Uso de explicitOriginalTarget e originalTarget

- -

TODO: Disponível apensas em navegadores Mozilla-based?

- -

TODO: Adequado apenas para desenvolvedores de extensões?

- -

Exemplos

- -
<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <title>Comparison of Event Targets</title>
-    <style>
-        table {
-            border-collapse: collapse;
-            height: 150px;
-            width: 100%;
-        }
-        td {
-            border: 1px solid #ccc;
-            font-weight: bold;
-            padding: 5px;
-            min-height: 30px;
-        }
-        .standard {
-            background-color: #99ff99;
-        }
-        .non-standard {
-            background-color: #902D37;
-        }
-    </style>
-</head>
-<body>
-    <table>
-    <thead>
-        <tr>
-            <td class="standard">Original target dispatching the event <small>event.target</small></td>
-            <td class="standard">Target who's event listener is being processed <small>event.currentTarget</small></td>
-            <td class="standard">Identify other element (if any) involved in the event <small>event.relatedTarget</small></td>
-            <td class="non-standard">If there was a retargetting of the event for some reason <small> event.explicitOriginalTarget</small> contains the target before retargetting (never contains anonymous targets)</td>
-            <td class="non-standard">If there was a retargetting of the event for some reason <small> event.originalTarget</small> contains the target before retargetting (may contain anonymous targets)</td>
-        </tr>
-    </thead>
-    <tr>
-        <td id="target"></td>
-        <td id="currentTarget"></td>
-        <td id="relatedTarget"></td>
-        <td id="explicitOriginalTarget"></td>
-        <td id="originalTarget"></td>
-    </tr>
-</table>
-<p>Clicking on the text will show the difference between explicitOriginalTarget, originalTarget and target</p>
-<script>
-    function handleClicks(e) {
-        document.getElementById('target').innerHTML = e.target;
-        document.getElementById('currentTarget').innerHTML = e.currentTarget;
-        document.getElementById('relatedTarget').innerHTML = e.relatedTarget;
-        document.getElementById('explicitOriginalTarget').innerHTML = e.explicitOriginalTarget;
-        document.getElementById('originalTarget').innerHTML = e.originalTarget;
-    }
-
-    function handleMouseover(e) {
-        document.getElementById('target').innerHTML = e.target;
-        document.getElementById('relatedTarget').innerHTML = e.relatedTarget;
-    }
-
-    document.addEventListener('click', handleClicks, false);
-    document.addEventListener('mouseover', handleMouseover, false);
-</script>
-</body>
-</html>
- -

Uso de target e relatedTarget

- -

A propriedade relatedTarget do evento de mouseover mantém o nó de onde o mouse estava sobre anteriormente. Para o evento de mouseout, mantém o nó para onde o mouse se moveu.

- - - - - - - - - - - - - - - - - - - -
Tipo de Eventoevent.targetevent.relatedTarget
mouseoverO EventTarget do qual o dispositivo apontador entrou.O EventTarget do qual o dispositivo apontador saiu.
mouseoutO EventTarget do qual o dispositivo apontador saiu.O EventTarget do qual o dispositivo apontador entrou.
- -

TODO: Necessário descrição complemento sobre eventos de dragenter e dragexit.

- -

Exemplo

- -
<hbox id="outer">
-  <hbox id="inner"
-        onmouseover="dump('mouseover ' + event.relatedTarget.id + ' > ' + event.target.id + '\n');"
-        onmouseout="dump('mouseout  ' + event.target.id + ' > ' + event.relatedTarget.id + '\n');"
-        style="margin: 100px; border: 10px solid black; width: 100px; height: 100px;" />
-</hbox>
-
diff --git a/files/pt-br/web/api/event/comparison_of_event_targets/index.html b/files/pt-br/web/api/event/comparison_of_event_targets/index.html new file mode 100644 index 0000000000..e9b2004719 --- /dev/null +++ b/files/pt-br/web/api/event/comparison_of_event_targets/index.html @@ -0,0 +1,167 @@ +--- +title: Comparativo entre Event Targets +slug: Web/API/Event/Comparativo_entre_Event_Targets +tags: + - DOM + - Event + - event target +translation_of: Web/API/Event/Comparison_of_Event_Targets +--- +
{{ ApiRef() }}
+ +

Event targets

+ +

É facil se confundir sobre o tipo de alvo (target) que deseja-se examinar ao criar um manipulador de eventos (event handler). Este artigo se propõe a esclarecer o uso da propriedade target.

+ +

Há 5 tipos de targets a se considerar:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropriedadeDefinido emObjetivo
event.targetDOM Event Interface +

O elemento do DOM à esquerda da chamada que disparou este evento, por exemplo:

+ + 
+element.dispatchEvent(event)
+
+
event.currentTargetDOM Event InterfaceO EventTarget do qual o EventListeners está sendo atualmente processado. Logo que a captura e a subida do evento ocorre a mudança deste valor.
event.relatedTargetDOM MouseEvent InterfaceIdentifica um alvo secundário para o evento.
event.explicitOriginalTarget{{ Source("/dom/public/idl/events/nsIDOMNSEvent.idl", "nsIDOMNSEvent.idl") }}{{ Non-standard_inline() }} Se o evento foi redirecionado por alguma outra razão senão o cruzamento de uma fronteira anônima, este evento será colocado no alvo antes que o redirecionamento ocorra. por exemplo, eventos do mouse são redirecionados à seus elementos pais quando acontecem sobre nós de texto ({{ Bug("185889") }}), e neste caso .target mostrará o nó pai e .explicitOriginalTarget mostrará o nó texto. Diferente de .originalTarget, .explicitOriginalTarget nunca irá conter um conteúdo anônimo.
event.originalTarget{{ Source("/dom/public/idl/events/nsIDOMNSEvent.idl", "nsIDOMNSEvent.idl") }}{{ Non-standard_inline() }} O alvo original do evento, antes de qualquer redirecionamento. Veja Anonymous Content#Event_Flow_and_Targeting para mais detalhes.
+ +

Uso de explicitOriginalTarget e originalTarget

+ +

TODO: Disponível apensas em navegadores Mozilla-based?

+ +

TODO: Adequado apenas para desenvolvedores de extensões?

+ +

Exemplos

+ +
<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Comparison of Event Targets</title>
+    <style>
+        table {
+            border-collapse: collapse;
+            height: 150px;
+            width: 100%;
+        }
+        td {
+            border: 1px solid #ccc;
+            font-weight: bold;
+            padding: 5px;
+            min-height: 30px;
+        }
+        .standard {
+            background-color: #99ff99;
+        }
+        .non-standard {
+            background-color: #902D37;
+        }
+    </style>
+</head>
+<body>
+    <table>
+    <thead>
+        <tr>
+            <td class="standard">Original target dispatching the event <small>event.target</small></td>
+            <td class="standard">Target who's event listener is being processed <small>event.currentTarget</small></td>
+            <td class="standard">Identify other element (if any) involved in the event <small>event.relatedTarget</small></td>
+            <td class="non-standard">If there was a retargetting of the event for some reason <small> event.explicitOriginalTarget</small> contains the target before retargetting (never contains anonymous targets)</td>
+            <td class="non-standard">If there was a retargetting of the event for some reason <small> event.originalTarget</small> contains the target before retargetting (may contain anonymous targets)</td>
+        </tr>
+    </thead>
+    <tr>
+        <td id="target"></td>
+        <td id="currentTarget"></td>
+        <td id="relatedTarget"></td>
+        <td id="explicitOriginalTarget"></td>
+        <td id="originalTarget"></td>
+    </tr>
+</table>
+<p>Clicking on the text will show the difference between explicitOriginalTarget, originalTarget and target</p>
+<script>
+    function handleClicks(e) {
+        document.getElementById('target').innerHTML = e.target;
+        document.getElementById('currentTarget').innerHTML = e.currentTarget;
+        document.getElementById('relatedTarget').innerHTML = e.relatedTarget;
+        document.getElementById('explicitOriginalTarget').innerHTML = e.explicitOriginalTarget;
+        document.getElementById('originalTarget').innerHTML = e.originalTarget;
+    }
+
+    function handleMouseover(e) {
+        document.getElementById('target').innerHTML = e.target;
+        document.getElementById('relatedTarget').innerHTML = e.relatedTarget;
+    }
+
+    document.addEventListener('click', handleClicks, false);
+    document.addEventListener('mouseover', handleMouseover, false);
+</script>
+</body>
+</html>
+ +

Uso de target e relatedTarget

+ +

A propriedade relatedTarget do evento de mouseover mantém o nó de onde o mouse estava sobre anteriormente. Para o evento de mouseout, mantém o nó para onde o mouse se moveu.

+ + + + + + + + + + + + + + + + + + + +
Tipo de Eventoevent.targetevent.relatedTarget
mouseoverO EventTarget do qual o dispositivo apontador entrou.O EventTarget do qual o dispositivo apontador saiu.
mouseoutO EventTarget do qual o dispositivo apontador saiu.O EventTarget do qual o dispositivo apontador entrou.
+ +

TODO: Necessário descrição complemento sobre eventos de dragenter e dragexit.

+ +

Exemplo

+ +
<hbox id="outer">
+  <hbox id="inner"
+        onmouseover="dump('mouseover ' + event.relatedTarget.id + ' > ' + event.target.id + '\n');"
+        onmouseout="dump('mouseout  ' + event.target.id + ' > ' + event.relatedTarget.id + '\n');"
+        style="margin: 100px; border: 10px solid black; width: 100px; height: 100px;" />
+</hbox>
+
diff --git a/files/pt-br/web/api/eventtarget/addeventlistener/index.html b/files/pt-br/web/api/eventtarget/addeventlistener/index.html new file mode 100644 index 0000000000..fea1e67e7b --- /dev/null +++ b/files/pt-br/web/api/eventtarget/addeventlistener/index.html @@ -0,0 +1,322 @@ +--- +title: Element.addEventListener() +slug: Web/API/Element/addEventListener +translation_of: Web/API/EventTarget/addEventListener +--- +

{{apiref("DOM Events")}}

+ +

addEventListener() registra uma única espera de evento em um único alvo. O alvo do evento pode ser um único elemento em um documento, o documento em si, uma janela, ou um XMLHttpRequest.

+ +

Para registrar mais de uma espera de evento como alvo, chame addEventListener() para o mesmo alvo mas com diferentes tipos de evento ou captura de parâmetros.

+ +

Sintaxe

+ +
alvo.addEventListener(type,listener[, options]);
+alvo.addEventListener(type,listener[, useCapture, wantUntrusted {{ Non-standard_inline() }}]); // Gecko/Mozilla only
+ +
+
type
+
Uma linha de texto que representa o tipo de evento a ser esperado.
+
listener
+
O objeto que recebe uma notificação quando um evento do tipo especificado ocorre. Esse objeto precisa implementar a interface do EventListener, ou simplesmente executar uma função JavaScript.
+
useCapture {{ optional_inline() }}
+
Se true, useCapture indica que o usuário deseja iniciar uma captura. Depois de iniciada a captura, todos os eventos do tipo especificado serão enviados à listener registrada antes de serem enviados à qualquer EventTarget abaixo dela na hierarquia de DOMs. Eventos que borbulharem para cima na hierarquia não acionarão a escuta designada  a usar a captura. Veja Eventos DOM Nível 3 para uma explicação detalhada. Perceba que esse parâmetro não é opcional em todos os navegadores. Se não for especificado, useCapture é false.
+
wantsUntrusted {{ Non-standard_inline() }}
+
Se true, o evento pode ser acionado por conteúdo não-confiável. Veja Interação entre páginas com e sem privilégios.
+
+ +
Nota: useCapture tornou-se opcional somente nas versões mais recentes dos principais navegadores; não era opcional antes do Firefox 6, por exemplo. Você deve especificar esse parâmetro para obter uma maior compatibilidade.
+ + +

Exemplo

+ +
<!DOCTYPE html>
+<html>
+<head>
+<title>Exemplo de Evento DOM</title>
+
+<style>
+#t { border: 1px solid red }
+#t1 { background-color: pink; }
+</style>
+
+<script>
+// Função para mudar o conteúdo de t2
+function modifyText() {
+  var t2 = document.getElementById("t2");
+  t2.firstChild.nodeValue = "three";
+}
+
+// Função para adicionar uma espera de evento em t
+function load() {
+  var el = document.getElementById("t");
+  el.addEventListener("click", modifyText, false);
+}
+
+document.addEventListener("DOMContentLoaded", load, false);
+</script>
+
+</head>
+<body>
+
+<table id="t">
+   <tr><td id="t1">one</td></tr>
+   <tr><td id="t2">two</td></tr>
+</table>
+
+</body>
+</html>
+
+ +

View on JSFiddle

+ +

No exemplo acima, modifyText() é uma escuta para eventos de click registrados usando addEventListener(). Um clique em qualquer lugar da tabela irá borbulhar para cima até o manipulador e executar modifyText().

+ +

Se você deseja passar parâmetros para a função de escuta, você deve usar uma função anônima.

+ +
<!DOCTYPE html>
+<html>
+<head>
+<title>Exemplo de Evento DOM</title>
+
+<style>
+#t { border: 1px solid red }
+#t1 { background-color: pink; }
+</style>
+
+<script>
+
+// Função para mudar o conteúdo de t2
+function modifyText(new_text) {
+  var t2 = document.getElementById("t2");
+  t2.firstChild.nodeValue = new_text;
+}
+
+// Função para adicionar uma espera de evento em t
+function load() {
+  var el = document.getElementById("t");
+  el.addEventListener("click", function(){modifyText("four")}, false);
+}
+</script>
+
+</head>
+<body onload="load();">
+
+<table id="t">
+  <tr><td id="t1">one</td></tr>
+  <tr><td id="t2">two</td></tr>
+</table>
+
+</body>
+</html>
+
+ +

Notas

+ +

Por que usar addEventListener?

+ +

addEventListener é a maneira de registrar uma espera de evento como especificada no W3C DOM. Seus benefícios são os seguintes:

+ + + +

Existe outra alternativa, uma maneira ultrapassada de registrar esperas de evento.

+ +

Adicionando uma espera de evento durante um disparo de evento

+ +

Se um EventListener for somado a um EventTarget enquanto está processando um evento, ele não será ativado pelas ações atuais, mas poderá ser ativado em um período posterior no fluxo de eventos, como na fase de borbulha.

+ +

Múltiplas esperas de evento idênticas

+ +

Se múltiplas esperas de evento idênticas forem registradas no mesmo EventTarget com os mesmos parâmetros, as versões duplicadas serão descartadas. Elas não fazem o EventListener ser disparado mais de uma vez, e, como as duplicatas são descartadas, elas não precisam ser removidas manualmente com o método removeEventListener.

+ +

O valor de this no manipulador

+ +

É preferível referenciar o elemento do qual a espera de evento foi disparada, como quando é usado um manipulador genérico para uma série de elementos similares. Quando anexar uma função usando addEventListener(), o valor de this é mudado — perceba que o valor de this é passado para uma função a partir do disparador.

+ +

Nos exemplos acima, o valor de this em modifyText(), quando disparado pelo evento de clique, é uma referência à tabela 't'. Isso é um contraste do comportamento que acontece se o manipulador é adicionado ao HTML fonte:

+ +
<table id="t" onclick="modifyText();">
+  . . .
+ +

O valor de this em modifyText(), quando disparado pelo evento de clique no HTML, será uma referência ao objeto global (no caso, a janela).

+ +
Nota: JavaScript 1.8.5 introduz o método Function.prototype.bind(), que permite especificar o valor que deve ser usado como this para todas as chamadas à uma determinada função. Isso evita problemas quando não é claro o que this será, dependendo do contexto do qual a sua função for chamada. Perceba, entretanto, que é preciso manter uma referência da escuta à mão, para que depois você possa removê-la.
+ +

Este é um exemplo com e sem bind:

+ +
var Algo = function(elemento)
+{
+  this.nome = 'Algo bom';
+  this.onclick1 = function(evento) {
+    console.log(this.nome); // indefinido, porque this é a função de escuta do clique
+  };
+  this.onclick2 = function(evento) {
+    console.log(this.nome); // 'Algo bom', porque this está como objeto Algo através do bind
+  };
+  elemento.addEventListener('click', this.onclick1, false);
+  elemento.addEventListener('click', this.onclick2.bind(this), false); // Truque de bind
+}
+
+ +

Outra solução é usar uma função especial chamada handleEvent para capturar quaisquer eventos:

+ +
var Algo = function(elemento)
+{
+  this.nome = 'Algo bom';
+  this.handleEvent = function(evento) {
+    console.log(this.nome); // 'Algo bom', porque this é o objeto Algo
+    switch(evento.type) {
+      case 'click':
+        // seu codigo aqui...
+        break;
+      case 'dblclick':
+        // seu codigo aqui...
+        break;
+    }
+  };
+  elemento.addEventListener('click', this, false); // Não this.handleEvent, só this
+  elemento.addEventListener('dblclick', this, false); // Não this.handleEvent, só this
+}
+
+ +

Internet Explorer antigos e attachEvent

+ +

Em versões do Internet Explorer anteriores ao IE9, você precisa usar attachEvent em vez do padrão addEventListener. Para dar suporte ao IE, o exemplo acima pode ser modificado para:

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

Existe um porém com attachEvent: o valor de this será a referência ao objeto window em vez do elemento do qual foi disparado.

+ +

Uma maneira ultrapassada de registrar esperas de evento

+ +

addEventListener() foi introduzido com as especificações de Eventos DOM 2. Antes disso, esperas de evento eram registradas assim:

+ +
// Passe uma função de referência — não adicione '()' depois dela, o que chamaria a função!
+el.onclick = modifyText;
+
+// Usando uma expressão de função
+element.onclick = function() {
+    // ... lógica da função ...
+};
+
+ +

Esse método substitui as esperar de evento de click no elemento, se houve alguma. Igualmente para outros outros eventos e manipuladores de evento associados, como blur (onblur), keypress (onkeypress), e assim por diante.

+ +

Porque era essencialmente uma parte do DOM 0, esse método era largamente suportado e não necessitava de códigos entre-navegadores especiais; logo é normalmente usado para registrar esperas de evento dinâmicamente, a menos que atributos extras do addEventListener() sejam necessários.

+ +

Problemas de memória

+ +
var i;
+var els = document.getElementsByTagName('*');
+
+// Caso 1
+for(i=0 ; i<els.length ; i++){
+  els[i].addEventListener("click", function(e){/*fazer algo*/}, false});
+}
+
+// Caso 2
+function processarEvento(e){
+  /*fazer algo*/
+}
+
+for(i=0 ; i<els.length ; i++){
+  els[i].addEventListener("click", processarEvento, false});
+}
+
+
+ +

No primeiro caso, uma nova função (anônima) é criada em cada turno do loop. No segundo caso, a mesma função previamente declarada é usada como um manipulador de evento. Isso resulta em um consumo menor de memória. Além do mais, no primeiro caso, já que nenhuma referência à função anônima é mantida, não é possível chamar element.removeEventListener porque não há uma referência ao manipulador, enquanto no segundo caso é possível fazer myElement.removeEventListener("click", processEvent, false).

+ +

Compatiblidade de navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suporte básico1.0{{ CompatGeckoDesktop(1.0) }}9.071.0
useCapture é opcional1.06.09.011.60{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico1.0{{ CompatGeckoMobile(1.0) }}9.06.01.0
+
+ +

Notas Gecko

+ + + +

Notas Webkit

+ + + +

Veja também

+ + + +

Especificação

+ + diff --git a/files/pt-br/web/api/fetch_api/cross-global_fetch_usage/index.html b/files/pt-br/web/api/fetch_api/cross-global_fetch_usage/index.html new file mode 100644 index 0000000000..c569966b5a --- /dev/null +++ b/files/pt-br/web/api/fetch_api/cross-global_fetch_usage/index.html @@ -0,0 +1,35 @@ +--- +title: Uso de busca Cross-global +slug: Web/API/Fetch_API/Uso_de_busca_Cross-global +translation_of: Web/API/Fetch_API/Cross-global_fetch_usage +--- +

 

+ +

Este artigo explica um "edge case" (um problema ou situação que ocorre apenas em um parâmetro operacional extremo) que ocorre ao utilizar fetch (e potencialmente outras APIs que exibem o mesmo tipo de comportamento de recuperação de recurso). Quando uma busca de cross-origin envolvendo uma URL relativa é iniciada a partir de um {{htmlelement ("iframe")}}, a URL relativa costumava ser resolvida na localização global atual, em vez da localização do iframe.

+ +

O "edge case"

+ +

Muitos sites nunca se deparam com este caso extremo. Para que isso aconteça:

+ + + +

O problema

+ +

No passado, resolveríamos o URL relativo contra o global atual, por exemplo:

+ +
let absolute = new URL(relative, window.location.href)
+ +

Isto não é um problema como tal. É que diferentes APIs que exibem esse tipo de comportamento estavam fazendo isso de maneira inconsistente com o comportamento definido na especificação, o que poderia levar a problemas mais adiante.

+ +

A solução

+ +

No Firefox 60 em diante, o Mozilla resolve a URL relativa contra o global que possui a função fetch() que está sendo usada (veja {{bug (1432272)}}). Portanto, no caso descrito acima, ele é resolvido em relação à localização do iframe:

+ +
let absolute = new URL(relative, frame.contentWindow.location.href)
+ +

Há muita discussão em andamento sobre a obtenção de novas especificações para se alinhar a essa mudança de comportamento, a fim de mitigar possíveis problemas no futuro.

diff --git a/files/pt-br/web/api/fetch_api/uso_de_busca_cross-global/index.html b/files/pt-br/web/api/fetch_api/uso_de_busca_cross-global/index.html deleted file mode 100644 index c569966b5a..0000000000 --- a/files/pt-br/web/api/fetch_api/uso_de_busca_cross-global/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: Uso de busca Cross-global -slug: Web/API/Fetch_API/Uso_de_busca_Cross-global -translation_of: Web/API/Fetch_API/Cross-global_fetch_usage ---- -

 

- -

Este artigo explica um "edge case" (um problema ou situação que ocorre apenas em um parâmetro operacional extremo) que ocorre ao utilizar fetch (e potencialmente outras APIs que exibem o mesmo tipo de comportamento de recuperação de recurso). Quando uma busca de cross-origin envolvendo uma URL relativa é iniciada a partir de um {{htmlelement ("iframe")}}, a URL relativa costumava ser resolvida na localização global atual, em vez da localização do iframe.

- -

O "edge case"

- -

Muitos sites nunca se deparam com este caso extremo. Para que isso aconteça:

- - - -

O problema

- -

No passado, resolveríamos o URL relativo contra o global atual, por exemplo:

- -
let absolute = new URL(relative, window.location.href)
- -

Isto não é um problema como tal. É que diferentes APIs que exibem esse tipo de comportamento estavam fazendo isso de maneira inconsistente com o comportamento definido na especificação, o que poderia levar a problemas mais adiante.

- -

A solução

- -

No Firefox 60 em diante, o Mozilla resolve a URL relativa contra o global que possui a função fetch() que está sendo usada (veja {{bug (1432272)}}). Portanto, no caso descrito acima, ele é resolvido em relação à localização do iframe:

- -
let absolute = new URL(relative, frame.contentWindow.location.href)
- -

Há muita discussão em andamento sobre a obtenção de novas especificações para se alinhar a essa mudança de comportamento, a fim de mitigar possíveis problemas no futuro.

diff --git a/files/pt-br/web/api/geolocation_api/index.html b/files/pt-br/web/api/geolocation_api/index.html new file mode 100644 index 0000000000..b6799afa16 --- /dev/null +++ b/files/pt-br/web/api/geolocation_api/index.html @@ -0,0 +1,227 @@ +--- +title: Usando geolocation +slug: Using_geolocation +tags: + - Geolocation API + - Guia(2) +translation_of: Web/API/Geolocation_API +--- +

A API geolocation permite que o usuário forneça sua localização a aplicativos web se ele desejar. Por questões de privacidade, o usuário é perguntado se permite fornecer informações de localização.

+ +

O objeto geolocation

+ +

O aplicativo de geolocalização é utilizado através de um objeto filho chamado geolocation localizado dentro do objeto navigator.  Se o objeto existe, os serviços de geolocalização estarão disponíveis. Você pode adicionalmente testar a presença da geolocalização:

+ +
if ("geolocation" in navigator) {
+  /* geolocation is available */
+} else {
+  alert("I'm sorry, but geolocation services are not supported by your browser.");
+}
+
+ +

{{ gecko_minversion_header("1.9.2") }}

+ +

Ao iniciar no Gecko 1.9.2 (Firefox 3.6), add-ons podem obter o objeto de geolocalização obtendo a referência para o serviço de geolocaliazação como se ve a seguir:

+ +
var geolocation = Components.classes["@mozilla.org/geolocation;1"]
+                            .getService(Components.interfaces.nsIDOMGeoGeolocation);
+
+ +

Obtendo a posição atual

+ +

Para obter a localização atual do usuário, você pode utiliza o método getCurrentPosition().  Isto inicia uma requisição assíncrona para identificar a posição do usuário, e consulta o hardware de localização para conseguir informações atualizadas. Quando a posição é determinada, uma rotina específica de retorno é executada. Você pode opcionalmente gerar uma segunda rotina de retorno se um erro ocorrer.  Um terceiro, e opcional, parâmetro é a interface "opções" onde você pode configurar o tempo máximo da posição recebida e o tempo a se esperar por uma solicitação.

+ +

Use getCurrentPosition() se você deseja uma única posição rapidamente, independente da precisão.  Dispositivos com GPS, por exemplo, podem levar um minuto ou mais para conseguir a localização, e portanto dados menos precisos (localização do IP location ou rede wifi) podem retornar do método getCurrentPosition().

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

O exemplo acima irá fazer a função the do_something() executar quando a localização for obtida.

+ +

Verificando a posição atual

+ +
Se os dados de posição mudam (sejam pelo movimento do dispositivo ou se uma informação mais precisa for recebida), se pode configurar um retorno que é feito com esta informação de posição atual. Isto é feito usando a função watchPosition(), a qual tem os mesmos parâmetros de entrada da função getCurrentPosition(). Seu retorno é chamada múltiplas vezes, permitindo que o navegador ou atualize sua posição enquanto você se move, ou forneça uma localização mais precisa enquanto diferentes técnicas são usadas para localizar sua posição. O erro do retorno, o qual é opcional assim como no getCurrentPosition(), é chamado uma única vez, se nenhum resultado válido retornar.
+ +

O watchPosition() pode ser usado sem que não haja a chamada inicial de getCurrentPosition().

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

O método watchPosition() retorna um número de ID que pode ser usado para identificar a posição solicitada; você pode usar esse valor em conjunto com o método clearWatch(), parando a localização do usuário.

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

watchPosition()retorna um callback sucesso e erro (como getCurrentPosition) e um objeto positionObjects, que pode ter três propriedades:

+ + + +

Segue uma chamada para watchPosition:

+ +
var wpid = navigator.geolocation.watchPosition(geo_success, geo_error, {enableHighAccuracy:true, maximumAge:30000, timeout:27000});
+ +

Exemplo de watchPosition em uso: thedotproduct.org/posts/a-simple-example-of-navigatorgeolocationwatchposition
+ 

+ +

Imprimindo uma posição

+ +

A localização do usuário é impressa usando o objeto Position, que tem os seguintes campos:

+ +
+
timestamp
+
Momento em que a leitura foi feita, como DOMTimeStamp.
+
coords
+
Objecto nsIDOMGeoPositionCoords indicando a localização.
+
address {{ gecko_minversion_inline("1.9.2") }} {{obsolete_inline("14.0")}}
+
{{ interface("nsIDOMGeoPositionAddress") }} objeto especificando o endereço correspondente, se disponível.
+
+ +


+ Manipulação de erros

+ +

Retornando o callback de erro, se fornecido, chamar getCurrentPosition() e watchPosition(), tem a seguinte assinatura:

+ +
function errorCallback(PositionError error);
+
+ +

O PositionError tem a seguinte estrutura de campos:

+ +
+
code
+
Um código de erro numérico dos seguintes procedimentos:
+
UNKNOWN_ERROR (valor numérico 0)
+
O processo de aquisição de localização falhou devido a um erro de qualquer outro código nesta interface.
+
PERMISSION_DENIED (valor numérico 1)
+
O processo de aquisição da localização falhou porque a origem aplicativo não tem permissão para usar a API de Geolocalização.
+
POSITION_UNAVAILABLE (valor numérico 2)
+
A posição do dispositivo não pôde ser determinada. Um ou mais provedores de localização utilizados no processo de aquisição local gerou um erro interno que falou o processo completamente.
+
TIMEOUT (numeric value 3)
+
O comprimento máximo de tempo especificado.
+
message
+
Uma mensagem de erro legível para uso em registros e depuração, mas não para exibir para o usuário.
+
+ +

Compatibilidade do navegador

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NavegadorSuporte BásicoGeolocation Level 2
Internet ExplorerIE9 RC---
Firefox (Gecko)3.5 (1.9.1)---
Opera10.60---
Safari | Chrome | WebKit5 | 5 | 533---
+ +

Solicitando permissão

+ +

Qualquer add-on hospedado em addons.mozilla.org, que faz uso de dados de geolocalização, deve solicitar antes uma permissão. A função a seguir vai solicitar a permissão de um modo semelhante ao prompt. A resposta do usuário será salva no parâmetro pref. A função fornecida no parâmetro de callback será chamado com um valor booleano que indica a resposta do usuário. Se for true, o add-on poderá retornar dados de geolocalização.

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

Veja também

+ + + +
{{ HTML5ArticleTOC() }}
diff --git a/files/pt-br/web/api/history_api/example/index.html b/files/pt-br/web/api/history_api/example/index.html new file mode 100644 index 0000000000..a4dfc4b68f --- /dev/null +++ b/files/pt-br/web/api/history_api/example/index.html @@ -0,0 +1,418 @@ +--- +title: Exemplo de navegação Ajax +slug: Web/API/History_API/Exemplo +tags: + - Exemplo navegação ajax +translation_of: Web/API/History_API/Example +--- +

Esse é um exemplo de um web site em AJAX web site composto por apenas três páginas (first_page.php, second_page.php e third_page.php). Para ver como funciona, crie os arquivos a seguir (ou git clone https://github.com/giabao/mdn-ajax-nav-example.git ):

+ +
Nota: Para integrar completamente os elementos {{HTMLElement("form")}} com esse mecanismo, porfavor dê uma olhada no parágrafo Enviando formulários e enviando arquivos.
+ +

first_page.php:

+ +
+
<?php
+    $page_title = "Primeira página";
+
+    $as_json = false;
+    if (isset($_GET["view_as"]) && $_GET["view_as"] == "json") {
+        $as_json = true;
+        ob_start();
+    } else {
+?>
+<!doctype html>
+<html>
+<head>
+<?php
+        include "include/header.php";
+        echo "<title>" . $page_title . "</title>";
+?>
+</head>
+
+<body>
+
+<?php include "include/before_content.php"; ?>
+
+<p>Esse parágrafo só é mostrado quando a navegação começa em <strong>first_page.php</strong>.</p>
+
+<div id="ajax-content">
+<?php } ?>
+
+    <p>Esse é o conteúdo de <strong>first_page.php</strong>.</p>
+
+<?php
+    if ($as_json) {
+        echo json_encode(array("page" => $page_title, "content" => ob_get_clean()));
+    } else {
+?>
+</div>
+
+<p>Esse parágrafo só é mostrado quando a navegação começa em <strong>first_page.php</strong>.</p>
+
+<?php
+        include "include/after_content.php";
+        echo "</body>\n</html>";
+    }
+?>
+
+
+ +

second_page.php:

+ +
+
<?php
+    $page_title = "Segunda página";
+
+    $as_json = false;
+    if (isset($_GET["view_as"]) && $_GET["view_as"] == "json") {
+        $as_json = true;
+        ob_start();
+    } else {
+?>
+<!doctype html>
+<html>
+<head>
+<?php
+        include "include/header.php";
+        echo "<title>" . $page_title . "</title>";
+?>
+</head>
+
+<body>
+
+<?php include "include/before_content.php"; ?>
+
+<p>Esse parágrafo só é mostrado quando a navegação começa em <strong>second_page.php</strong>.</p>
+
+<div id="ajax-content">
+<?php } ?>
+
+    <p>Esse é o conteúdo de <strong>second_page.php</strong>.</p>
+
+<?php
+    if ($as_json) {
+        echo json_encode(array("page" => $page_title, "content" => ob_get_clean()));
+    } else {
+?>
+</div>
+
+<p>Esse parágrafo só é mostrado quando a navegação começa em <strong>second_page.php</strong>.</p>
+
+<?php
+        include "include/after_content.php";
+        echo "</body>\n</html>";
+    }
+?>
+
+
+ +

third_page.php:

+ +
+
<?php
+    $page_title = "Terceira página";
+    $page_content = "<p>Esse é o conteúdo de <strong>third_page.php</strong>. This content is stored into a php variable.</p>";
+
+    if (isset($_GET["view_as"]) && $_GET["view_as"] == "json") {
+        echo json_encode(array("page" => $page_title, "content" => $page_content));
+    } else {
+?>
+<!doctype html>
+<html>
+<head>
+<?php
+        include "include/header.php";
+        echo "<title>" . $page_title . "</title>";
+?>
+</head>
+
+<body>
+
+<?php include "include/before_content.php"; ?>
+
+<p>Esse parágrafo só é mostrado quando a navegação começa em <strong>third_page.php</strong>.</p>
+
+<div id="ajax-content">
+<?php echo $page_content; ?>
+</div>
+
+<p>Esse parágrafo só é mostrado quando a navegação começa em <strong>third_page.php</strong>.</p>
+
+<?php
+        include "include/after_content.php";
+        echo "</body>\n</html>";
+    }
+?>
+
+
+ +

css/style.css:

+ +
#ajax-loader {
+    position: fixed;
+    display: table;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+#ajax-loader > div {
+    display: table-cell;
+    width: 100%;
+    height: 100%;
+    vertical-align: middle;
+    text-align: center;
+    background-color: #000000;
+    opacity: 0.65;
+}
+
+ +

include/after_content.php:

+ +
<p>Esse é o rodapé. Ele é compartilhado entre todas as páginas ajax.</p>
+
+ +

include/before_content.php:

+ +
<p>
+[ <a class="ajax-nav" href="first_page.php">Primeiro exemplo</a>
+| <a class="ajax-nav" href="second_page.php">Segundo exemplo</a>
+| <a class="ajax-nav" href="third_page.php">Terceiro exemplo</a>
+| <a class="ajax-nav" href="unexisting.php">Página inexistente</a> ]
+</p>
+
+
+ +

include/header.php:

+ +
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<script type="text/javascript" src="js/ajax_nav.js"></script>
+<link rel="stylesheet" href="css/style.css" />
+
+ +

js/ajax_nav.js:

+ +

(antes de implementar em um ambiente de trabalho, porfavor leia a nota sobre a compatibilidade de declaração de const)

+ +
+
"use strict";
+
+const ajaxRequest = new (function () {
+
+    function closeReq () {
+        oLoadingBox.parentNode && document.body.removeChild(oLoadingBox);
+        bIsLoading = false;
+    }
+
+    function abortReq () {
+        if (!bIsLoading) { return; }
+        oReq.abort();
+        closeReq();
+    }
+
+    function ajaxError () {
+        alert("Unknown error.");
+    }
+
+    function ajaxLoad () {
+        var vMsg, nStatus = this.status;
+        switch (nStatus) {
+            case 200:
+                vMsg = JSON.parse(this.responseText);
+                document.title = oPageInfo.title = vMsg.page;
+                document.getElementById(sTargetId).innerHTML = vMsg.content;
+                if (bUpdateURL) {
+                    history.pushState(oPageInfo, oPageInfo.title, oPageInfo.url);
+                    bUpdateURL = false;
+                }
+                break;
+            default:
+                vMsg = nStatus + ": " + (oHTTPStatus[nStatus] || "Unknown");
+                switch (Math.floor(nStatus / 100)) {
+                    /*
+                    case 1:
+                        // Informational 1xx
+                        console.log("Information code " + vMsg);
+                        break;
+                    case 2:
+                        // Successful 2xx
+                        console.log("Successful code " + vMsg);
+                        break;
+                    case 3:
+                        // Redirection 3xx
+                        console.log("Redirection code " + vMsg);
+                        break;
+                    */
+                    case 4:
+                        /* Client Error 4xx */
+                        alert("Client Error #" + vMsg);
+                        break;
+                    case 5:
+                        /* Server Error 5xx */
+                        alert("Server Error #" + vMsg);
+                        break;
+                    default:
+                        /* Unknown status */
+                        ajaxError();
+                }
+        }
+        closeReq();
+    }
+
+    function filterURL (sURL, sViewMode) {
+        return sURL.replace(rSearch, "") + ("?" + sURL.replace(rHost, "&").replace(rView, sViewMode ? "&" + sViewKey + "=" + sViewMode : "").slice(1)).replace(rEndQstMark, "");
+    }
+
+    function getPage (sPage) {
+        if (bIsLoading) { return; }
+        oReq = new XMLHttpRequest();
+        bIsLoading = true;
+        oReq.onload = ajaxLoad;
+        oReq.onerror = ajaxError;
+        if (sPage) { oPageInfo.url = filterURL(sPage, null); }
+        oReq.open("get", filterURL(oPageInfo.url, "json"), true);
+        oReq.send();
+        oLoadingBox.parentNode || document.body.appendChild(oLoadingBox);
+    }
+
+    function requestPage (sURL) {
+        if (history.pushState) {
+            bUpdateURL = true;
+            getPage(sURL);
+        } else {
+            /* Ajax navigation is not supported */
+            location.assign(sURL);
+        }
+    }
+
+    function processLink () {
+        if (this.className === sAjaxClass) {
+            requestPage(this.href);
+            return false;
+        }
+        return true;
+    }
+
+    function init () {
+        oPageInfo.title = document.title;
+        history.replaceState(oPageInfo, oPageInfo.title, oPageInfo.url);
+        for (var oLink, nIdx = 0, nLen = document.links.length; nIdx < nLen; document.links[nIdx++].onclick = processLink);
+    }
+
+    const
+
+        /* customizable constants */
+        sTargetId = "ajax-content", sViewKey = "view_as", sAjaxClass = "ajax-nav",
+
+        /* not customizable constants */
+        rSearch = /\?.*$/, rHost = /^[^\?]*\?*&*/, rView = new RegExp("&" + sViewKey + "\\=[^&]*|&*$", "i"), rEndQstMark = /\?$/,
+        oLoadingBox = document.createElement("div"), oCover = document.createElement("div"), oLoadingImg = new Image(),
+        oPageInfo = {
+            title: null,
+            url: location.href
+        }, oHTTPStatus = /* http://www.iana.org/assignments/http-status-codes/http-status-codes.xml */ {
+            100: "Continue",
+            101: "Switching Protocols",
+            102: "Processing",
+            200: "OK",
+            201: "Created",
+            202: "Accepted",
+            203: "Non-Authoritative Information",
+            204: "No Content",
+            205: "Reset Content",
+            206: "Partial Content",
+            207: "Multi-Status",
+            208: "Already Reported",
+            226: "IM Used",
+            300: "Multiple Choices",
+            301: "Moved Permanently",
+            302: "Found",
+            303: "See Other",
+            304: "Not Modified",
+            305: "Use Proxy",
+            306: "Reserved",
+            307: "Temporary Redirect",
+            308: "Permanent Redirect",
+            400: "Bad Request",
+            401: "Unauthorized",
+            402: "Payment Required",
+            403: "Forbidden",
+            404: "Not Found",
+            405: "Method Not Allowed",
+            406: "Not Acceptable",
+            407: "Proxy Authentication Required",
+            408: "Request Timeout",
+            409: "Conflict",
+            410: "Gone",
+            411: "Length Required",
+            412: "Precondition Failed",
+            413: "Request Entity Too Large",
+            414: "Request-URI Too Long",
+            415: "Unsupported Media Type",
+            416: "Requested Range Not Satisfiable",
+            417: "Expectation Failed",
+            422: "Unprocessable Entity",
+            423: "Locked",
+            424: "Failed Dependency",
+            425: "Unassigned",
+            426: "Upgrade Required",
+            427: "Unassigned",
+            428: "Precondition Required",
+            429: "Too Many Requests",
+            430: "Unassigned",
+            431: "Request Header Fields Too Large",
+            500: "Internal Server Error",
+            501: "Not Implemented",
+            502: "Bad Gateway",
+            503: "Service Unavailable",
+            504: "Gateway Timeout",
+            505: "HTTP Version Not Supported",
+            506: "Variant Also Negotiates (Experimental)",
+            507: "Insufficient Storage",
+            508: "Loop Detected",
+            509: "Unassigned",
+            510: "Not Extended",
+            511: "Network Authentication Required"
+        };
+
+    var
+
+        oReq, bIsLoading = false, bUpdateURL = false;
+
+    oLoadingBox.id = "ajax-loader";
+    oCover.onclick = abortReq;
+    oLoadingImg.src = "data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==";
+    oCover.appendChild(oLoadingImg);
+    oLoadingBox.appendChild(oCover);
+
+    onpopstate = function (oEvent) {
+        bUpdateURL = false;
+        oPageInfo.title = oEvent.state.title;
+        oPageInfo.url = oEvent.state.url;
+        getPage();
+    };
+
+    window.addEventListener ? addEventListener("load", init, false) : window.attachEvent ? attachEvent("onload", init) : (onload = init);
+
+    // Public methods
+
+    this.open = requestPage;
+    this.stop = abortReq;
+    this.rebuildLinks = init;
+
+})();
+
+
+ +
Nota: A atual implementação de const (declaração de constante) não é parte do ECMAScript 5. É suportada no Firefox e no Chrome (V8) e parcialmente suportada no Opera 9+ e no Safari. Ela  não é suportada nas versões do Internet Explorer 6 ao 9, ou na versão preview do Internet Explorer 10. const será definida no ECMAScript 6, mas com semânticas diferentes. Similarmente ao que acontece com variáveis definidas como let, constantes declaradas com const serão block-scoped, limitando seu escopo no bloco. Nós só usamos isso com propósito didático. Se você quer total compatibilidade com os navegadores, substitua todas as declarações const por declarações var.
+ +

Para mais informações, veja: Manipulando o histórico do navegador.

+ +

Veja também

+ + diff --git a/files/pt-br/web/api/history_api/exemplo/index.html b/files/pt-br/web/api/history_api/exemplo/index.html deleted file mode 100644 index a4dfc4b68f..0000000000 --- a/files/pt-br/web/api/history_api/exemplo/index.html +++ /dev/null @@ -1,418 +0,0 @@ ---- -title: Exemplo de navegação Ajax -slug: Web/API/History_API/Exemplo -tags: - - Exemplo navegação ajax -translation_of: Web/API/History_API/Example ---- -

Esse é um exemplo de um web site em AJAX web site composto por apenas três páginas (first_page.php, second_page.php e third_page.php). Para ver como funciona, crie os arquivos a seguir (ou git clone https://github.com/giabao/mdn-ajax-nav-example.git ):

- -
Nota: Para integrar completamente os elementos {{HTMLElement("form")}} com esse mecanismo, porfavor dê uma olhada no parágrafo Enviando formulários e enviando arquivos.
- -

first_page.php:

- -
-
<?php
-    $page_title = "Primeira página";
-
-    $as_json = false;
-    if (isset($_GET["view_as"]) && $_GET["view_as"] == "json") {
-        $as_json = true;
-        ob_start();
-    } else {
-?>
-<!doctype html>
-<html>
-<head>
-<?php
-        include "include/header.php";
-        echo "<title>" . $page_title . "</title>";
-?>
-</head>
-
-<body>
-
-<?php include "include/before_content.php"; ?>
-
-<p>Esse parágrafo só é mostrado quando a navegação começa em <strong>first_page.php</strong>.</p>
-
-<div id="ajax-content">
-<?php } ?>
-
-    <p>Esse é o conteúdo de <strong>first_page.php</strong>.</p>
-
-<?php
-    if ($as_json) {
-        echo json_encode(array("page" => $page_title, "content" => ob_get_clean()));
-    } else {
-?>
-</div>
-
-<p>Esse parágrafo só é mostrado quando a navegação começa em <strong>first_page.php</strong>.</p>
-
-<?php
-        include "include/after_content.php";
-        echo "</body>\n</html>";
-    }
-?>
-
-
- -

second_page.php:

- -
-
<?php
-    $page_title = "Segunda página";
-
-    $as_json = false;
-    if (isset($_GET["view_as"]) && $_GET["view_as"] == "json") {
-        $as_json = true;
-        ob_start();
-    } else {
-?>
-<!doctype html>
-<html>
-<head>
-<?php
-        include "include/header.php";
-        echo "<title>" . $page_title . "</title>";
-?>
-</head>
-
-<body>
-
-<?php include "include/before_content.php"; ?>
-
-<p>Esse parágrafo só é mostrado quando a navegação começa em <strong>second_page.php</strong>.</p>
-
-<div id="ajax-content">
-<?php } ?>
-
-    <p>Esse é o conteúdo de <strong>second_page.php</strong>.</p>
-
-<?php
-    if ($as_json) {
-        echo json_encode(array("page" => $page_title, "content" => ob_get_clean()));
-    } else {
-?>
-</div>
-
-<p>Esse parágrafo só é mostrado quando a navegação começa em <strong>second_page.php</strong>.</p>
-
-<?php
-        include "include/after_content.php";
-        echo "</body>\n</html>";
-    }
-?>
-
-
- -

third_page.php:

- -
-
<?php
-    $page_title = "Terceira página";
-    $page_content = "<p>Esse é o conteúdo de <strong>third_page.php</strong>. This content is stored into a php variable.</p>";
-
-    if (isset($_GET["view_as"]) && $_GET["view_as"] == "json") {
-        echo json_encode(array("page" => $page_title, "content" => $page_content));
-    } else {
-?>
-<!doctype html>
-<html>
-<head>
-<?php
-        include "include/header.php";
-        echo "<title>" . $page_title . "</title>";
-?>
-</head>
-
-<body>
-
-<?php include "include/before_content.php"; ?>
-
-<p>Esse parágrafo só é mostrado quando a navegação começa em <strong>third_page.php</strong>.</p>
-
-<div id="ajax-content">
-<?php echo $page_content; ?>
-</div>
-
-<p>Esse parágrafo só é mostrado quando a navegação começa em <strong>third_page.php</strong>.</p>
-
-<?php
-        include "include/after_content.php";
-        echo "</body>\n</html>";
-    }
-?>
-
-
- -

css/style.css:

- -
#ajax-loader {
-    position: fixed;
-    display: table;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-}
-
-#ajax-loader > div {
-    display: table-cell;
-    width: 100%;
-    height: 100%;
-    vertical-align: middle;
-    text-align: center;
-    background-color: #000000;
-    opacity: 0.65;
-}
-
- -

include/after_content.php:

- -
<p>Esse é o rodapé. Ele é compartilhado entre todas as páginas ajax.</p>
-
- -

include/before_content.php:

- -
<p>
-[ <a class="ajax-nav" href="first_page.php">Primeiro exemplo</a>
-| <a class="ajax-nav" href="second_page.php">Segundo exemplo</a>
-| <a class="ajax-nav" href="third_page.php">Terceiro exemplo</a>
-| <a class="ajax-nav" href="unexisting.php">Página inexistente</a> ]
-</p>
-
-
- -

include/header.php:

- -
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-<script type="text/javascript" src="js/ajax_nav.js"></script>
-<link rel="stylesheet" href="css/style.css" />
-
- -

js/ajax_nav.js:

- -

(antes de implementar em um ambiente de trabalho, porfavor leia a nota sobre a compatibilidade de declaração de const)

- -
-
"use strict";
-
-const ajaxRequest = new (function () {
-
-    function closeReq () {
-        oLoadingBox.parentNode && document.body.removeChild(oLoadingBox);
-        bIsLoading = false;
-    }
-
-    function abortReq () {
-        if (!bIsLoading) { return; }
-        oReq.abort();
-        closeReq();
-    }
-
-    function ajaxError () {
-        alert("Unknown error.");
-    }
-
-    function ajaxLoad () {
-        var vMsg, nStatus = this.status;
-        switch (nStatus) {
-            case 200:
-                vMsg = JSON.parse(this.responseText);
-                document.title = oPageInfo.title = vMsg.page;
-                document.getElementById(sTargetId).innerHTML = vMsg.content;
-                if (bUpdateURL) {
-                    history.pushState(oPageInfo, oPageInfo.title, oPageInfo.url);
-                    bUpdateURL = false;
-                }
-                break;
-            default:
-                vMsg = nStatus + ": " + (oHTTPStatus[nStatus] || "Unknown");
-                switch (Math.floor(nStatus / 100)) {
-                    /*
-                    case 1:
-                        // Informational 1xx
-                        console.log("Information code " + vMsg);
-                        break;
-                    case 2:
-                        // Successful 2xx
-                        console.log("Successful code " + vMsg);
-                        break;
-                    case 3:
-                        // Redirection 3xx
-                        console.log("Redirection code " + vMsg);
-                        break;
-                    */
-                    case 4:
-                        /* Client Error 4xx */
-                        alert("Client Error #" + vMsg);
-                        break;
-                    case 5:
-                        /* Server Error 5xx */
-                        alert("Server Error #" + vMsg);
-                        break;
-                    default:
-                        /* Unknown status */
-                        ajaxError();
-                }
-        }
-        closeReq();
-    }
-
-    function filterURL (sURL, sViewMode) {
-        return sURL.replace(rSearch, "") + ("?" + sURL.replace(rHost, "&").replace(rView, sViewMode ? "&" + sViewKey + "=" + sViewMode : "").slice(1)).replace(rEndQstMark, "");
-    }
-
-    function getPage (sPage) {
-        if (bIsLoading) { return; }
-        oReq = new XMLHttpRequest();
-        bIsLoading = true;
-        oReq.onload = ajaxLoad;
-        oReq.onerror = ajaxError;
-        if (sPage) { oPageInfo.url = filterURL(sPage, null); }
-        oReq.open("get", filterURL(oPageInfo.url, "json"), true);
-        oReq.send();
-        oLoadingBox.parentNode || document.body.appendChild(oLoadingBox);
-    }
-
-    function requestPage (sURL) {
-        if (history.pushState) {
-            bUpdateURL = true;
-            getPage(sURL);
-        } else {
-            /* Ajax navigation is not supported */
-            location.assign(sURL);
-        }
-    }
-
-    function processLink () {
-        if (this.className === sAjaxClass) {
-            requestPage(this.href);
-            return false;
-        }
-        return true;
-    }
-
-    function init () {
-        oPageInfo.title = document.title;
-        history.replaceState(oPageInfo, oPageInfo.title, oPageInfo.url);
-        for (var oLink, nIdx = 0, nLen = document.links.length; nIdx < nLen; document.links[nIdx++].onclick = processLink);
-    }
-
-    const
-
-        /* customizable constants */
-        sTargetId = "ajax-content", sViewKey = "view_as", sAjaxClass = "ajax-nav",
-
-        /* not customizable constants */
-        rSearch = /\?.*$/, rHost = /^[^\?]*\?*&*/, rView = new RegExp("&" + sViewKey + "\\=[^&]*|&*$", "i"), rEndQstMark = /\?$/,
-        oLoadingBox = document.createElement("div"), oCover = document.createElement("div"), oLoadingImg = new Image(),
-        oPageInfo = {
-            title: null,
-            url: location.href
-        }, oHTTPStatus = /* http://www.iana.org/assignments/http-status-codes/http-status-codes.xml */ {
-            100: "Continue",
-            101: "Switching Protocols",
-            102: "Processing",
-            200: "OK",
-            201: "Created",
-            202: "Accepted",
-            203: "Non-Authoritative Information",
-            204: "No Content",
-            205: "Reset Content",
-            206: "Partial Content",
-            207: "Multi-Status",
-            208: "Already Reported",
-            226: "IM Used",
-            300: "Multiple Choices",
-            301: "Moved Permanently",
-            302: "Found",
-            303: "See Other",
-            304: "Not Modified",
-            305: "Use Proxy",
-            306: "Reserved",
-            307: "Temporary Redirect",
-            308: "Permanent Redirect",
-            400: "Bad Request",
-            401: "Unauthorized",
-            402: "Payment Required",
-            403: "Forbidden",
-            404: "Not Found",
-            405: "Method Not Allowed",
-            406: "Not Acceptable",
-            407: "Proxy Authentication Required",
-            408: "Request Timeout",
-            409: "Conflict",
-            410: "Gone",
-            411: "Length Required",
-            412: "Precondition Failed",
-            413: "Request Entity Too Large",
-            414: "Request-URI Too Long",
-            415: "Unsupported Media Type",
-            416: "Requested Range Not Satisfiable",
-            417: "Expectation Failed",
-            422: "Unprocessable Entity",
-            423: "Locked",
-            424: "Failed Dependency",
-            425: "Unassigned",
-            426: "Upgrade Required",
-            427: "Unassigned",
-            428: "Precondition Required",
-            429: "Too Many Requests",
-            430: "Unassigned",
-            431: "Request Header Fields Too Large",
-            500: "Internal Server Error",
-            501: "Not Implemented",
-            502: "Bad Gateway",
-            503: "Service Unavailable",
-            504: "Gateway Timeout",
-            505: "HTTP Version Not Supported",
-            506: "Variant Also Negotiates (Experimental)",
-            507: "Insufficient Storage",
-            508: "Loop Detected",
-            509: "Unassigned",
-            510: "Not Extended",
-            511: "Network Authentication Required"
-        };
-
-    var
-
-        oReq, bIsLoading = false, bUpdateURL = false;
-
-    oLoadingBox.id = "ajax-loader";
-    oCover.onclick = abortReq;
-    oLoadingImg.src = "data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==";
-    oCover.appendChild(oLoadingImg);
-    oLoadingBox.appendChild(oCover);
-
-    onpopstate = function (oEvent) {
-        bUpdateURL = false;
-        oPageInfo.title = oEvent.state.title;
-        oPageInfo.url = oEvent.state.url;
-        getPage();
-    };
-
-    window.addEventListener ? addEventListener("load", init, false) : window.attachEvent ? attachEvent("onload", init) : (onload = init);
-
-    // Public methods
-
-    this.open = requestPage;
-    this.stop = abortReq;
-    this.rebuildLinks = init;
-
-})();
-
-
- -
Nota: A atual implementação de const (declaração de constante) não é parte do ECMAScript 5. É suportada no Firefox e no Chrome (V8) e parcialmente suportada no Opera 9+ e no Safari. Ela  não é suportada nas versões do Internet Explorer 6 ao 9, ou na versão preview do Internet Explorer 10. const será definida no ECMAScript 6, mas com semânticas diferentes. Similarmente ao que acontece com variáveis definidas como let, constantes declaradas com const serão block-scoped, limitando seu escopo no bloco. Nós só usamos isso com propósito didático. Se você quer total compatibilidade com os navegadores, substitua todas as declarações const por declarações var.
- -

Para mais informações, veja: Manipulando o histórico do navegador.

- -

Veja também

- - diff --git a/files/pt-br/web/api/html_drag_and_drop_api/file_drag_and_drop/index.html b/files/pt-br/web/api/html_drag_and_drop_api/file_drag_and_drop/index.html new file mode 100644 index 0000000000..13609ee260 --- /dev/null +++ b/files/pt-br/web/api/html_drag_and_drop_api/file_drag_and_drop/index.html @@ -0,0 +1,91 @@ +--- +title: Arrastar e soltar arquivos +slug: DragDrop/Drag_and_Drop/Arrastar_e_soltar_arquivos +translation_of: Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop +--- +

{{DefaultAPISidebar("HTML Drag and Drop API")}}

+ +

As interfaces HTML Drag and Drop permitem que os aplicativos da Web arrastem e soltem arquivos em uma página da Web. Este documento descreve como um aplicativo pode aceitar um ou mais arquivos que são arrastados do gerenciador de arquivos da plataforma subjacente e soltado s em uma página da Web.

+ +

Os principais passos para o drag and drop é definir a drop zone (ou seja  definir um elemento para a queda dos arquivos) e definir  event handlers para os eventos {{event("drop")}} e {{event("dragover")}} . Essas etapas são descritas abaixo, incluindo exemplos de trechos de código. O codigo fonte esta disponivel em MDN's drag-and-drop repository (pull requests e/ou issues são bem-vindas).

+ +

Nota: {{domxref("HTML_Drag_and_Drop_API","HTML drag and drop")}}Define duas APIs diferentes para suportar arrastar e soltar arquivos. Uma API é a interface {{domxref("DataTransfer")}} e a segunda API é a interface {{domxref("DataTransferItem")}} e {{domxref("DataTransferItemList")}}. Este exemplo ilustra o uso de ambas as APIs (e não usa nehuma interface específica do Gecko).

+ +

Definindo a drop zone

+ +

O elemento de destino do evento {{event("drop")}} precisa de um event handler global  {{domxref("GlobalEventHandlers.ondrop","ondrop")}} O seguinte trecho de código mostra como isso é feito com um elemento: {{HTMLelement("div")}}

+ +
<div id="drop_zone" ondrop="dropHandler(event);">
+  <p>Drag one or more files to this Drop Zone ...</p>
+</div>
+ +

Normalmente, um aplicativo inclui um event handler {{event("dragover")}} no elemento de destino do drop e esse manipulador desativará o comportamento de arraste padrão do navegador. Para adicionar esse handler, você precisa incluir um event handler global {{domxref("GlobalEventHandlers.ondragover","ondragover")}}:

+ +
<div id="drop_zone" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);">
+  <p>Drag one or more files to this Drop Zone ...</p>
+</div>
+
+ +

Por fim, um aplicativo pode querer estilizar o elemento da drop zone para indicar visualmente que o elemento é uma drop zone. Neste exemplo, o elemento da drop zone usa o seguinte estilo:

+ +
#drop_zone {
+  border: 5px solid blue;
+  width:  200px;
+  height: 100px;
+}
+
+ +
+

Nota: Observe que os eventos dragstart e dragend não são acionados ao arrastar um arquivo para o navegador do OS.

+
+ +

Processo de drop

+ +

O evento {{event("drop")}} é acionado quando o usuário solta o(s) arquivo(s)  no drop handler, se o navegador suportar a interface {{domxref("DataTransferItemList")}} o metodo {{domxref("DataTransferItem.getAsFile","getAsFile()")}} será usado para acessar cada arquivo; caso contrário, a interface {{domxref("DataTransfer")}} usara a propriedade {{domxref("DataTransfer.files","files")}} para acessar cada arquivo.

+ +

Este exemplo mostra como escrever o nome de cada arquivo arrastado,  no console. Em um aplicativo real, um aplicativo pode querer processar um arquivo usando o {{domxref("File","File API")}}.

+ +

Observe que neste exemplo, Qualquer item de arrasto que não seja um arquivo é ignorado.

+ +
function dropHandler(ev) {
+  console.log('File(s) dropped');
+
+  // Impedir o comportamento padrão (impedir que o arquivo seja aberto)
+  ev.preventDefault();
+
+  if (ev.dataTransfer.items) {
+    // Use a interface DataTransferItemList para acessar o (s) arquivo (s)
+    for (var i = 0; i < ev.dataTransfer.items.length; i++) {
+      // Se os itens soltos não forem arquivos, rejeite-os
+      if (ev.dataTransfer.items[i].kind === 'file') {
+        var file = ev.dataTransfer.items[i].getAsFile();
+        console.log('... file[' + i + '].name = ' + file.name);
+      }
+    }
+  } else {
+    // Use a interface DataTransfer para acessar o (s) arquivo (s)
+    for (var i = 0; i < ev.dataTransfer.files.length; i++) {
+      console.log('... file[' + i + '].name = ' + ev.dataTransfer.files[i].name);
+    }
+  }
+}
+ +

Impedir o evento de arrastar padrão do navegador

+ +

O seguinte event handler {{event("dragover")}} chama {{domxref("Event.preventDefault","preventDefault()")}} para desativar o manipulador padrão de arrastar e soltar do navegador.

+ +
function dragOverHandler(ev) {
+  console.log('File(s) in drop zone');
+
+  // Impedir o comportamento padrão (impedir que o arquivo seja aberto)
+  ev.preventDefault();
+}
+
+ +

Veja também

+ + diff --git a/files/pt-br/web/api/html_drag_and_drop_api/index.html b/files/pt-br/web/api/html_drag_and_drop_api/index.html new file mode 100644 index 0000000000..10e5592b91 --- /dev/null +++ b/files/pt-br/web/api/html_drag_and_drop_api/index.html @@ -0,0 +1,258 @@ +--- +title: Arrastar e soltar +slug: DragDrop/Drag_and_Drop +tags: + - Avançado + - Guia(2) + - HTML5 + - Visão Geral + - XUL + - arrastar e soltar + - eventos +translation_of: Web/API/HTML_Drag_and_Drop_API +--- +

{{DefaultAPISidebar("HTML Drag and Drop API")}}

+ +

As interfaces de Drag and Drop (arrastar e soltar) habilitam aplicações a usar funcionalidades de arrastar e soltar através do navegador. Por exemplo, com essas funcionalidades, o usuário pode selecionar elementos arrastáveis (draggable) com o mouse, arrastar elementos até um elemento soltável (droppable), e soltar o elemento ao soltar o botão do mouse. Uma representação translúcida de elementos arrastáveis (draggable) seguem o ponteiro do mouse durante a operação de arrastar (drag).

+ +

Para web sites, extensões e aplicações XUL, você pode customizar os tipos de elementos que podem se tornar arrastáveis (draggable) e o tipo de retorno que o elemento arrastável produz, assim como os elementos soltáveis (droppable).

+ +

NT: Para manter a tradução mais precisa e coesa, a partir daqui iremos manter os termos drag e drop e seus variantes conforme texto original. Sendo portanto mantidos também os termos draggable e droppable.

+ +

Este documento é uma visão geral do drag and drop no HTML. Ele inclui uma descrição de suas interfaces, funcionalidades básicas de como permitir a adesão de funcionalidades arrastar e soltar em uma aplicação e um sumário da interoperabilidade entre interfaces.

+ +

Eventos Drag

+ +

O drag and drop em HTML usa o {{domxref("Event","modelo de eventos DOM")}} e os {{domxref("DragEvent","eventos drag")}} são hereditários dos {{domxref("MouseEvent","eventos do mouse")}}. Uma operação típica de drag começa quando o usuário seleciona um elemento arrastável com o mouse, move o mouse até um elemento soltável (droppable) e solta o mouse. Durante as operações, diversos tipos de evento são acionados e alguns podem até ser acionados multiplas vezes (como por exemplo os tipos de evento {{event("drag")}} e {{event("dragover")}}.

+ +

Todos os tipos de evento drag são associados a um manipulador global de eventos. Cada tipo de evento drag e cada atributo drag global tem um documento de referência que o descreve. A tabela a seguir descreve brevemente os tipos de evento e um link de referência para seu documento.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EventOn Event HandlerDescription
{{event('drag')}}{{domxref('GlobalEventHandlers.ondrag','ondrag')}}Acionado quando um elemento ou seleção de texto está sendo arrastado.
{{event('dragend')}}{{domxref('GlobalEventHandlers.ondragend','ondragend')}}Acionado quando uma operação de arrastar está terminando (por eexmplo, ao soltar o botão do mouse ou pressionar a tecla esc). (Veja Terminando um evento Drag.)
{{event('dragenter')}}{{domxref('GlobalEventHandlers.ondragenter','ondragenter')}}Acionado quando um elemento arrastável ou seleção de texto entra em um ponto de soltura (drop target). (Veja Determinando Drop Targets.)
{{event('dragexit')}}{{domxref('GlobalEventHandlers.ondragexit','ondragexit')}}Acionado quando um elemento não é mais o ponto de seleção imediata da operação drag.
{{event('dragleave')}}{{domxref('GlobalEventHandlers.ondragleave','ondragleave')}}Acionado quando um elemento arrastável ou seleção de texto abandona um ponto de soltura (drop target) válido.
{{event('dragover')}}{{domxref('GlobalEventHandlers.ondragover','ondragover')}}Acionado quando um elemento ou seleção de texto está sendo arrastado sobre um ponto de soltura válido (a cada aproximadamente 100 milisegundos).
{{event('dragstart')}}{{domxref('GlobalEventHandlers.ondragstart','ondragstart')}}Acionado quando o usuário começa a arrastar um elemento válido ou seleção de texto. (Veja Começando uma Operação Drag.)
{{event('drop')}}{{domxref('GlobalEventHandlers.ondrop','ondrop')}}Acionado quando um elemento ou seleção de texto é solta em um ponto d soltura (drop target) válido. (Veja Realizando um Drop.)
+ +

Note que eventos dragstart e dragend não são acionados ao arrastar um arquivo vindo do sistema operacional para o navegador.

+ +

Interfaces

+ +

A interface HTML drag and drop é composta pelos eventos {{domxref("DragEvent")}}, {{domxref("DataTransfer")}}, {{domxref("DataTransferItem")}} e {{domxref("DataTransferItemList")}}.

+ +

A interface {{domxref("DragEvent")}} consiste de um construtor e uma propriedade, a propriedade {{domxref("DragEvent.dataTransfer","dataTransfer")}} que é um objeto {{domxref("DataTransfer")}}. Os objetos {{domxref("DataTransfer")}} incluem estados do evento drag como o tipo de drag sendo feito (por exemplo copy ou move), os dados do do evento drag (um ou mais itens) e o tipo de cada item drag (um MIME type). Objetos {{domxref("DataTransfer")}} também contém métodos para adicionar itens aos dados do drag e remover um item. As interfaces {{domxref("DragEvent")}} e {{domxref("DataTransfer")}} devem as únicas necessárias para adicionar capacidades de drag and drop para uma aplicação. Entretanto, note que o Firefox provê suporte para apenas algumas {{anch("Gecko specific interfaces","Gecko-specific extensions")}} ao objeto {{domxref("DataTransfer")}}, apesar de entretanto essas extensões funcionarem apenas no Firefox.

+ +

Cada objeto {{domxref("DataTransfer")}} contém uma propriedade {{domxref("DataTransfer.items","items")}} que é uma {{domxref("DataTransferItemList","lista")}} dos objetos {{domxref("DataTransferItem")}}. Cada objeto {{domxref("DataTransferItem")}} representa um único drag item e cada item tem uma propriedade {{domxref("DataTransferItem.kind","kind (tipo)")}} que é o tipo(kind) de data (seja ela string ou file) e uma propriedade {{domxref("DataTransferItem.type","type (tipo)")}} que é o tipo de dado do item (ou seja, MIME type). O objeto {{domxref("DataTransferItem")}} também contém métodos para conseguir dados do item arrastável.

+ +

O objeto {{domxref("DataTransferItemList")}} é uma lista de objetos {{domxref("DataTransferItem")}}. A lista de objetos contém métodos para: adicionar um item para uma lista, remover um item de uma lista e limpar a lista com todos os itens.

+ +

A diferença chave entre das interfaces {{domxref("DataTransfer")}} e {{domxref("DataTransferItem")}} é que a primeira usa o método síncrono {{domxref("DataTransfer.getData","getData()")}} para acessar os dados de um item arrastável, e a segunda usa o método assíncrono {{domxref("DataTransferItem.getAsString","getAsString()")}} para acessá-lo.

+ +

Note: as interfaces {{domxref("DragEvent")}} e a {{domxref("DataTransfer")}} são vastamente interoperáveis com navegadores desktop. Entretanto, as interfaces {{domxref("DataTransferItem")}} e {{domxref("DataTransferItemList")}} tem suporte limitado entre navegadores. Veja {{anch("Interoperabildade")}} para mais informações.

+ +

Interfaces específicas para o Gecko

+ +

A Mozilla e o Firefox suportam algumas funcionalidades fora dos padrões do modelo drag and drop. Elas são cfunções convenientes para facilitar o arraste múltiplo de elementos e a manipulação de dados que não são strings (como arquivos). Para mais informações, veja Dragging and Dropping Multiple Items. Para mais informações, veja a página de referência {{domxref("DataTransfer")}} para todas as propriedades específicas para o Gecko e Métodos específicos para o Gecko.

+ +

O básico

+ +

Esta seção dispõe de um resumo das etapas básicas para adicionar a funcionalidade drag and drop à uma aplicação. Cada seção inclui uma descrição da etapa, um breve exemplo em código, e links para informações adicionais.

+ +

Identificando o que é arrastável (draggable)

+ +

Para fazer um elemento se tornar arrastável, é necessária a adição de um atributo {{htmlattrxref("draggable")}} além da adição do manipulador de eventos global {{domxref("GlobalEventHandlers.ondragstart","ondragstart")}}, conforme descrito no exemplo a seguir

+ +
function dragstart_handler(ev) {
+ console.log("dragStart");
+ // Adiciona o id do elemento em questão ao objeto de transferência de dados (dataTransfer)
+ ev.dataTransfer.setData("text/plain", ev.target.id);
+}
+
+<body>
+ <p id="p1" draggable="true" ondragstart="dragstart_handler(event);">Este elemento é arrastável.</p>
+</body>
+
+ +

Veja a referência do atributo draggable e o Guia de operações drag para mais informações.

+ +

Defina os dados do drag

+ +

A aplicação é livre para incluir qualquer quantidade de dados do item em uma operação drag. Cada dado de um item é uma {{domxref("DOMString","string")}} de um tipo particular, tipicamente um MIME type como por exemplo text/html.

+ +

Cada {{domxref("DragEvent","evento drag")}} tem uma propriedade {{domxref("DragEvent.dataTransfer","dataTransfer")}} que segura os dados do evento. Essa propridade (que é um objeto {{domxref("DataTransfer")}}) também tem um método para gerenciar os dados do arraste (drag). O método {{domxref("DataTransfer.setData","setData()")}} é usado para adicionar um item aos dados do arraste, como demonstrado no exemplo a seguir.

+ +
function dragstart_handler(ev) {
+  // Adiciona os dados do arraste (drag)
+  ev.dataTransfer.setData("text/plain", ev.target.id);
+  ev.dataTransfer.setData("text/html", "<p>Parágrafo de exemplo</p>");
+  ev.dataTransfer.setData("text/uri-list", "http://developer.mozilla.org");
+}
+
+ +

Para uma lista de tipos de dados mais comuns utilizados pelo drag and drop (como texto, HTML, links, e files), veja Tipos recomendados de Drag Types e para mais informações sobre os dados do arraste (drag data), veja Drag Data.

+ +

Defina uma imagem de arraste (drag image)

+ +

Por padrão, o navegador provê uma imagem que aparece por trás do ponteiro do mouse durante uma operação de arraste. Entretanto, uma aplicação pode definir uma imagem customizada utilizando o método {{domxref("DataTransfer.setDragImage","setDragImage()")}} como demonstrado no exemplo a seguir.

+ +
function dragstart_handler(ev) {
+  // Cria uma imagem e então a utiliza como a "drag image".
+  // NOTA: mude "example.gif" como uma imagem existente, caso contrário
+  // ela não será criada e a imagem padrão será utilizada como padrão.
+  var img = new Image();
+  img.src = 'example.gif';
+  ev.dataTransfer.setDragImage(img, 10, 10);
+}
+
+ +

Para aprender mais sobre arrastar imagens de retorno, veja Definindo a imagem de retorno do arraste (Drag).

+ +

Defina o efeito do arraste (Drag effect)

+ +

A propriedade {{domxref("DataTransfer.dropEffect","dropEffect")}} é usada para controlar o retorno (geralmente visual) que é dado ao usuário durante uma operação drag and drop. Ela afeta qual cursor o navegador irá mostrar enquanto o arraste é realizado. Por exemplo, quando o usuário passa sobre (famoso hover) o ponto de soltura (drop target), o cursor do navegador pode indicar o tipo de operação que irá acontecer.

+ +

Três efeitos podem ser definidos: 

+ +

copy indica que os dados sendo arrastados podem ser copiados da localização atual para a localização de destino (localização do drop). 

+ +

move indica que os dados sendo arrastados irá ser movido.

+ +

link indica que alguma forma de relação ou conexão será criada entre a localização de origem (source) e de destino (drop). 

+ +

Durante a operação de arraste, os efeitos do arraste (drag) podem ser modificados para determinar que certos efeitos são permitidos em determinadas localizações. Se permitido, uma soltura (drop) pode ocorrer naquela localização.

+ +

O exemplo a seguir mostra como utilizar essa propriedade.

+ +
function dragstart_handler(ev) {
+  // Determina o efeito de arraste para copy
+  ev.dataTransfer.dropEffect = "copy";
+}
+
+ +

Veja Efeitos do Arraste (Drag Effects) para mais detalhes.

+ +

Defina uma zona de soltura (drop zone)

+ +

Por padrão, o navegador previne tudo que possa acontecer ao soltar alguma coisa em um elemento HTML. Para mudar esse comportamento de forma que um elemento se torne uma zona de soltura (drop zone) ou que seja soltável (droppable), o elemento precisa ter ambos os atributos  {{domxref("GlobalEventHandlers.ondragover","ondragover")}} e {{domxref("GlobalEventHandlers.ondrop","ondrop")}}. O exemplo a seguir mostra como utilizar esses atributos e inclui manipuladores básicos de evento para cada um.

+ +
function dragover_handler(ev) {
+ ev.preventDefault();
+ // Define o dropEffect para ser do tipo move
+ ev.dataTransfer.dropEffect = "move"
+}
+function drop_handler(ev) {
+ ev.preventDefault();
+ // Pega o id do alvo e adiciona o elemento que foi movido para o DOM do alvo
+ var data = ev.dataTransfer.getData("text");
+ ev.target.appendChild(document.getElementById(data));
+}
+<body>
+ <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Zona de Soltura (Drop Zone)</div>
+</body>
+
+ +

Note que cada manipulador chama {{domxref("Event.preventDefault","preventDefault()")}} para previnir o processamento adicional de eventos (como eventos touch ou eventos pointer).

+ +

Para mais informações, veja Especificando pontos de soltura (Drop Targets).

+ +

Manipulando o efeito de soltura (drop)

+ +

O manipulador do evento {{event("drop")}} é livre para processar os dados do arraste (drag) de maneira específica em uma aplicação. Tipicamente, uma aplicação usaria o método {{domxref("DataTransfer.getData","getData()")}} para reter os itens arrastados e processá-los de acordo. A semântica da aplicação pode ser diferente dependendo do valor do {{domxref("DataTransfer.dropEffect","dropEffect")}} e/ou o estado da chave que o modifica.

+ +

O exemplo a seguir mostra o manipulador de soltura (drop handler) pegando o id do elemento de origem atráves dos dados de drag (drag data) e então usando o id para mover o elemento de sua origem para o elemento de soltura (drop element).

+ +
function dragstart_handler(ev) {
+ // Adiciona o id do elemento alvo para o objeto de transferência de dados
+ ev.dataTransfer.setData("text/plain", ev.target.id);
+ ev.dropEffect = "move";
+}
+function dragover_handler(ev) {
+ ev.preventDefault();
+ // Define o dropEffect para ser do tipo move
+ ev.dataTransfer.dropEffect = "move"
+}
+function drop_handler(ev) {
+ ev.preventDefault();
+ // Pega o id do alvo e adiciona o elemento que foi movido para o DOM do alvo
+ var data = ev.dataTransfer.getData("text");
+ ev.target.appendChild(document.getElementById(data));
+}
+<body>
+ <p id="p1" draggable="true" ondragstart="dragstart_handler(event);">Este elemento é arrastável.</p>
+ <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Zona de Soltura (Drop Zone)</div>
+</body>
+
+ +

Para mais informações, veja Realizando uma soltura (Drop).

+ +

Fim da soltura (Drag end)

+ +

No início da operação de arraste (drag), o evento {{event("dragend")}} é acionado no elemento de origem (source) - o elemento que foi o alvo do início do arraste (drag start). Este evento é acionado sempre quando o arraste é completado ou cancelado. O manipulador de eventos {{event("dragend")}} pode verificar o valor da propriedade {{domxref("DataTransfer.dropEffect","dropEffect")}} para determinar se a operação de arraste foi bem sucedida ou não.

+ +

Para mais informações sobre manipular o final de uma operação de arraste, veja Finalizando um arraste (Drag).

+ +

Interoperabilidade

+ +

Como podem ser visto no DataTransferItem interface's Browser Compatibility table, drag-and-drop a interoperabilidade é relativamente ampla emtre ps brpwsers desktop (exceto as interfaces {{domxref("DataTransferItem")}} e {{domxref("DataTransferItemList")}}  que tem o menor suport). Estes dados tambem indica que o suporte ao drag and drop entre browser mobile é muito menor.

+ +

Exemplos e demonstrações

+ + + +

Veja também

+ + diff --git a/files/pt-br/web/api/htmlcontentelement/select/index.html b/files/pt-br/web/api/htmlcontentelement/select/index.html new file mode 100644 index 0000000000..63fae05c69 --- /dev/null +++ b/files/pt-br/web/api/htmlcontentelement/select/index.html @@ -0,0 +1,98 @@ +--- +title: HTMLContentElement.select +slug: Web/API/HTMLContentElement/Seletor +tags: + - API + - HTMLContentElement + - HTMLContentElement.select + - Select +translation_of: Web/API/HTMLContentElement/select +--- +

{{ APIRef("Web Components") }}

+ +

A propriedade HTMLContentElement.select reflete o atributo selecionado. É um {{domxref("DOMString")}} contendo uma lista de spaço-separado de seletores CSS que seleciona o conteúdo para inserir em lugar do elemento <content>.

+ +

Sintaxe

+ +
object.select = "CSSselector CSSselector ...";
+
+ +

Exemplo

+ +
// Select <h1> elements and elements with class="error"
+myContentObject.select = "h1 .error";
+ +

Especificações

+ + + + + + + + + + + + + + +
EspecificaçõesStatusCommentário
{{SpecName('Shadow DOM', '#the-content-element', 'content')}}{{Spec2('Shadow DOM')}} 
+ +

Compatibilidade do browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
ComponenteChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suporte básico35{{CompatGeckoDesktop("28")}} [1]{{CompatNo}}26{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suporte básico37{{CompatGeckoMobile("28")}} [1]{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Se Shadow DOM não estiver habilitado no Firefox, os elementos <content> se comportarão como {{domxref("HTMLUnknownElement")}}. Shadow DOM foi o primeiro implementado no Firefox 28 e está atrás de uma preferência, dom.webcomponents.enabled, ao qual é desabilitado por padrão.

+ +

Veja também

+ + diff --git a/files/pt-br/web/api/htmlcontentelement/seletor/index.html b/files/pt-br/web/api/htmlcontentelement/seletor/index.html deleted file mode 100644 index 63fae05c69..0000000000 --- a/files/pt-br/web/api/htmlcontentelement/seletor/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: HTMLContentElement.select -slug: Web/API/HTMLContentElement/Seletor -tags: - - API - - HTMLContentElement - - HTMLContentElement.select - - Select -translation_of: Web/API/HTMLContentElement/select ---- -

{{ APIRef("Web Components") }}

- -

A propriedade HTMLContentElement.select reflete o atributo selecionado. É um {{domxref("DOMString")}} contendo uma lista de spaço-separado de seletores CSS que seleciona o conteúdo para inserir em lugar do elemento <content>.

- -

Sintaxe

- -
object.select = "CSSselector CSSselector ...";
-
- -

Exemplo

- -
// Select <h1> elements and elements with class="error"
-myContentObject.select = "h1 .error";
- -

Especificações

- - - - - - - - - - - - - - -
EspecificaçõesStatusCommentário
{{SpecName('Shadow DOM', '#the-content-element', 'content')}}{{Spec2('Shadow DOM')}} 
- -

Compatibilidade do browser

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
ComponenteChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suporte básico35{{CompatGeckoDesktop("28")}} [1]{{CompatNo}}26{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suporte básico37{{CompatGeckoMobile("28")}} [1]{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

[1] Se Shadow DOM não estiver habilitado no Firefox, os elementos <content> se comportarão como {{domxref("HTMLUnknownElement")}}. Shadow DOM foi o primeiro implementado no Firefox 28 e está atrás de uma preferência, dom.webcomponents.enabled, ao qual é desabilitado por padrão.

- -

Veja também

- - diff --git a/files/pt-br/web/api/htmlelement/accesskey/index.html b/files/pt-br/web/api/htmlelement/accesskey/index.html new file mode 100644 index 0000000000..e0425e3645 --- /dev/null +++ b/files/pt-br/web/api/htmlelement/accesskey/index.html @@ -0,0 +1,19 @@ +--- +title: Element.accessKey +slug: Web/API/Element/accessKey +translation_of: Web/API/HTMLElement/accessKey +translation_of_original: Web/API/Element/accessKey +--- +
{{APIRef("DOM")}}
+ +
 
+ +

A propriedade Element.accessKey define a tecla pelo qual o usuário pode pressionar para saltar para este elemento.

+ +
+

Nota: A propriedade Element.accessKey é raramente usada por causa dos conflitos múltiplos com os atalhos pré-definidos nos navegadores. Para contornar isto, os navegadores implementam o comportamento da tecla de acesso se as teclas são pressionadas com outras teclas "qualificadas" (como Alt + tecla de acesso).

+
+ +

 

+ +

 

diff --git a/files/pt-br/web/api/htmlelement/blur/index.html b/files/pt-br/web/api/htmlelement/blur/index.html deleted file mode 100644 index 25a2273aec..0000000000 --- a/files/pt-br/web/api/htmlelement/blur/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: HTMLElement.blur() -slug: Web/API/HTMLElement/blur -tags: - - API - - DOM HTML - - Foco - - HTMLElement - - Referencia - - metodo -translation_of: Web/API/HTMLOrForeignElement/blur ---- -
{{ APIRef("HTML DOM") }}
- -

O método HTMLElement.blur() remove o foco do teclado no elemento corrente.

- -

Sintaxe

- -
elemento.blur();
- -

Exemplos

- -

Removendo o foco de um input de texto

- -

HTML

- -
<input type="text" id="meuTexto" value="Texto Exemplo">
-<br><br>
-<button type="button" onclick="focusInput()">Clique para definir o foco</button>
-<button type="button" onclick="blurInput()">Clique para remover o foco</button>
- -

JavaScript

- -
function focusInput() {
-  document.getElementById('meuTexto').focus();
-}
-function blurInput() {
-  document.getElementById('meuTexto').blur();
-}
- -

Resultado

- -

{{ EmbedLiveSample('Remove_focus_from_a_text_input') }}

- -

Especificação

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{SpecName('HTML WHATWG', 'editing.html#dom-blur', 'blur')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5.1', 'editing.html#blur()-0', 'blur')}}{{Spec2('HTML5.1')}} 
{{SpecName('HTML5 W3C', 'editing.html#dom-blur', 'blur')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('DOM2 HTML', 'html.html#ID-28216144', 'blur')}}{{Spec2('DOM2 HTML')}} 
- -

Compatibilidade com navegadores

- - - -

{{Compat("api.HTMLElement.blur")}}

- -

Veja também

- - diff --git a/files/pt-br/web/api/htmlelement/dataset/index.html b/files/pt-br/web/api/htmlelement/dataset/index.html deleted file mode 100644 index 2cb4ba63b0..0000000000 --- a/files/pt-br/web/api/htmlelement/dataset/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: HTMLElement.dataset -slug: Web/API/HTMLElement/dataset -translation_of: 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 Browsers

- - - -

{{Compat("api.HTMLElement.dataset")}}

- -

Veja também

- - diff --git a/files/pt-br/web/api/htmlelement/focus/index.html b/files/pt-br/web/api/htmlelement/focus/index.html deleted file mode 100644 index 8f798b3d86..0000000000 --- a/files/pt-br/web/api/htmlelement/focus/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: HTMLElement.focus() -slug: Web/API/HTMLElement/focus -translation_of: Web/API/HTMLOrForeignElement/focus ---- -
{{ APIRef("HTML DOM") }}
- -

O método HTMLElement.focus()  seta o foco em um determinado elemento em especifico, caso esse elemento permita ter o foco neste elemento.

- -

Síntaxe

- -
element.focus()
- -

Especificação

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{SpecName('HTML WHATWG', 'editing.html#dom-focus', 'focus')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5.1', 'editing.html#focus()-0', 'focus')}}{{Spec2('HTML5.1')}} 
{{SpecName('HTML5 W3C', 'editing.html#dom-focus', 'focus')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('DOM2 HTML', 'html.html#ID-32130014', 'focus')}}{{Spec2('DOM2 HTML')}} 
{{SpecName('DOM1', 'level-one-html.html#method-focus', 'focus')}}{{Spec2('DOM1')}} 
- -

Notas

- -

Caso você utilize o HTMLElement.focus() por meio da manipulação de um evento mousedown , você deve utilizar o evento event.preventDefault() a fim de o foco não sair do arquivo HTMLElement.

- -

Veja também

- - diff --git a/files/pt-br/web/api/htmlelement/innertext/index.html b/files/pt-br/web/api/htmlelement/innertext/index.html new file mode 100644 index 0000000000..1ab5e81027 --- /dev/null +++ b/files/pt-br/web/api/htmlelement/innertext/index.html @@ -0,0 +1,86 @@ +--- +title: Node.innerText +slug: Web/API/Node/innerText +translation_of: Web/API/HTMLElement/innerText +--- +
{{APIRef("DOM")}}
+ +

Resumo

+ +

Node.innerText é uma propriedade que representa o conteúdo textual "renderizado" de um nó e seus descendentes. Usada como getter, retorna de maneira aproximada o texto que o usuário obteria caso tivesse selecionado o conteúdo e copiado para a área de transferência. Este recurso fora introduzido originalmente pelo Internet Explorer, mas foi oficialmente especificado no padrão HTML apenas em 2016, sendo adotado por todos os principais navegadores a partir de então.

+ +

{{domxref("Node.textContent")}} é uma alternativa similar, embora existam diferenças significativas entre as duas.

+ +

Especificação

+ + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName('HTML WHATWG', 'dom.html#the-innertext-idl-attribute', 'innerText')}}{{Spec2('HTML WHATWG')}}Introduzida, baseado no rascunho da especifição de innerText. Ver whatwg/html#465 e whatwg/compat#5 para histórico.
+ +

Compatibilidade de navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
RecursoChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suporte básico4{{ CompatGeckoDesktop(45) }}69.6 (provavelmente antes)3
+
+ +
+ + + + + + + + + + + + + + + + + + + +
RecursoAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico2.3 (provavelmente antes){{ CompatGeckoMobile(45) }}10 (provavelmente antes)124.1 (provavelmente antes)
+
+ +

Ver também

+ + diff --git a/files/pt-br/web/api/htmlelement/input_event/index.html b/files/pt-br/web/api/htmlelement/input_event/index.html new file mode 100644 index 0000000000..dd69baf988 --- /dev/null +++ b/files/pt-br/web/api/htmlelement/input_event/index.html @@ -0,0 +1,248 @@ +--- +title: input +slug: Web/Events/input +translation_of: Web/API/HTMLElement/input_event +--- +

O evento input do DOM é disparado sincronicamente quando o valor de um elemento {{HTMLElement("input")}}, {{HTMLElement("select")}}, ou {{HTMLElement("textarea")}} é alterado. (Para elementos input com type=checkbox ou type=radio, o evento input não é disparado quando o usuário clica no elemento, porque o valor do atributo não é alterado.) Além disso, o evento é disparado no contenteditable editors quando o seu conteúdo é alterado. Nesse caso, O alvo do evento é o elemento host da edição. Se houver dois ou mais elementos que tenha contenteditable como true, o "host de edição" é o elemento antepassado mais próximo cujo pai não é editável. Similarmente, ele também é disparado no element raiz do designMode editors.

+ +

Informações gerais

+ +
+
Specification
+
HTML5, DOM Level 3 Events
+
Interface
+
{{domxref("Event")}}, {{domxref("InputEvent")}}
+
Bubbles
+
Yes
+
Cancelable
+
No
+
Target
+
Element
+
Default Action
+
The value or the content is modified.
+
+ +

Propriedades

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
+ +

Compatibilidade dos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}[1]9[2]{{CompatVersionUnknown}}[3]{{CompatVersionUnknown}}
immediately after compositionupdate{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("12")}}{{CompatVersionUnknown}}15{{CompatVersionUnknown}}
on contenteditable element{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("14")}}{{CompatNo}}[4] +

 

+ 		15{{CompatVersionUnknown}}
when designMode is "on"{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("14")}}{{CompatNo}}15{{CompatVersionUnknown}}
data{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
isComposing{{CompatNo}}{{CompatUnknown}}{{CompatGeckoDesktop("31")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
<select>{{CompatVersionUnknown}}{{CompatNo}}{{CompatGeckoDesktop("49")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
immediately after compositionupdate{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("12")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
on contenteditable element{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("14")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
when designMode is "on"{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("14")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
data{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
isComposing{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatGeckoMobile("31")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
<select>{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Prior to Gecko 12.0 {{geckoRelease("12.0")}}, Gecko didn't fire input events while composition was ongoing using IMEs or when dead keys were used on Mac OS X.

+ +

[2] IE 9 does not fire an input event when the user deletes characters from an input (e.g. by pressing Backspace or Delete, or using the "Cut" operation).

+ +

[3] Prior to Opera 15, Opera did not fire an input event after dropping text in an input field.

+ +

[4] The event target is the innermost element at the caret position.

+ +

Veja também

+ + + +

Also the change event is related. change fires less often than input – it only fires when the changes are committed by the user.

diff --git a/files/pt-br/web/api/htmlmediaelement/abort_event/index.html b/files/pt-br/web/api/htmlmediaelement/abort_event/index.html new file mode 100644 index 0000000000..62243a2762 --- /dev/null +++ b/files/pt-br/web/api/htmlmediaelement/abort_event/index.html @@ -0,0 +1,70 @@ +--- +title: abort +slug: Web/Events/abort +translation_of: Web/API/HTMLMediaElement/abort_event +translation_of_original: Web/Events/abort +--- +

O evento abort é disparado quando o carregamento de um recurso foi interrompido.

+ +

Informações Gerais

+ +
+
Especificação
+
DOM L3
+
Interface
+
{{domxref("UIEvent")}} se gerado a partir da interface do usuário, caso contrário será {{domxref("Event")}}.
+
Bubbles
+
Não
+
Cancelável
+
Não
+
Alvo
+
{{domxref("Element")}}
+
Ação Padrão
+
Nenhuma
+
+ +

Propriedades

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropriedadeTipoDescrição
target {{readOnlyInline}}{{domxref("EventTarget")}}O evento alvo (O mais elevado da árvore DOM).
type {{readOnlyInline}}{{domxref("DOMString")}}O tipo de evento.
bubbles {{readOnlyInline}}{{domxref("Boolean")}}O evento é normalmente bubble?
cancelable {{readOnlyInline}}{{domxref("Boolean")}}É possível cancelar o evento?
view {{readOnlyInline}}{{domxref("WindowProxy")}}{{domxref("document.defaultView")}} (window do documento)
detail {{readOnlyInline}}long (float)0.
+
diff --git a/files/pt-br/web/api/htmlorforeignelement/blur/index.html b/files/pt-br/web/api/htmlorforeignelement/blur/index.html new file mode 100644 index 0000000000..25a2273aec --- /dev/null +++ b/files/pt-br/web/api/htmlorforeignelement/blur/index.html @@ -0,0 +1,89 @@ +--- +title: HTMLElement.blur() +slug: Web/API/HTMLElement/blur +tags: + - API + - DOM HTML + - Foco + - HTMLElement + - Referencia + - metodo +translation_of: Web/API/HTMLOrForeignElement/blur +--- +
{{ APIRef("HTML DOM") }}
+ +

O método HTMLElement.blur() remove o foco do teclado no elemento corrente.

+ +

Sintaxe

+ +
elemento.blur();
+ +

Exemplos

+ +

Removendo o foco de um input de texto

+ +

HTML

+ +
<input type="text" id="meuTexto" value="Texto Exemplo">
+<br><br>
+<button type="button" onclick="focusInput()">Clique para definir o foco</button>
+<button type="button" onclick="blurInput()">Clique para remover o foco</button>
+ +

JavaScript

+ +
function focusInput() {
+  document.getElementById('meuTexto').focus();
+}
+function blurInput() {
+  document.getElementById('meuTexto').blur();
+}
+ +

Resultado

+ +

{{ EmbedLiveSample('Remove_focus_from_a_text_input') }}

+ +

Especificação

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName('HTML WHATWG', 'editing.html#dom-blur', 'blur')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5.1', 'editing.html#blur()-0', 'blur')}}{{Spec2('HTML5.1')}} 
{{SpecName('HTML5 W3C', 'editing.html#dom-blur', 'blur')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('DOM2 HTML', 'html.html#ID-28216144', 'blur')}}{{Spec2('DOM2 HTML')}} 
+ +

Compatibilidade com navegadores

+ + + +

{{Compat("api.HTMLElement.blur")}}

+ +

Veja também

+ + diff --git a/files/pt-br/web/api/htmlorforeignelement/dataset/index.html b/files/pt-br/web/api/htmlorforeignelement/dataset/index.html new file mode 100644 index 0000000000..2cb4ba63b0 --- /dev/null +++ b/files/pt-br/web/api/htmlorforeignelement/dataset/index.html @@ -0,0 +1,97 @@ +--- +title: HTMLElement.dataset +slug: Web/API/HTMLElement/dataset +translation_of: 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 Browsers

+ + + +

{{Compat("api.HTMLElement.dataset")}}

+ +

Veja também

+ + diff --git a/files/pt-br/web/api/htmlorforeignelement/focus/index.html b/files/pt-br/web/api/htmlorforeignelement/focus/index.html new file mode 100644 index 0000000000..8f798b3d86 --- /dev/null +++ b/files/pt-br/web/api/htmlorforeignelement/focus/index.html @@ -0,0 +1,62 @@ +--- +title: HTMLElement.focus() +slug: Web/API/HTMLElement/focus +translation_of: Web/API/HTMLOrForeignElement/focus +--- +
{{ APIRef("HTML DOM") }}
+ +

O método HTMLElement.focus()  seta o foco em um determinado elemento em especifico, caso esse elemento permita ter o foco neste elemento.

+ +

Síntaxe

+ +
element.focus()
+ +

Especificação

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName('HTML WHATWG', 'editing.html#dom-focus', 'focus')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5.1', 'editing.html#focus()-0', 'focus')}}{{Spec2('HTML5.1')}} 
{{SpecName('HTML5 W3C', 'editing.html#dom-focus', 'focus')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('DOM2 HTML', 'html.html#ID-32130014', 'focus')}}{{Spec2('DOM2 HTML')}} 
{{SpecName('DOM1', 'level-one-html.html#method-focus', 'focus')}}{{Spec2('DOM1')}} 
+ +

Notas

+ +

Caso você utilize o HTMLElement.focus() por meio da manipulação de um evento mousedown , você deve utilizar o evento event.preventDefault() a fim de o foco não sair do arquivo HTMLElement.

+ +

Veja também

+ + diff --git a/files/pt-br/web/api/indexeddb_api/usando_indexeddb/index.html b/files/pt-br/web/api/indexeddb_api/usando_indexeddb/index.html deleted file mode 100644 index da14879b31..0000000000 --- a/files/pt-br/web/api/indexeddb_api/usando_indexeddb/index.html +++ /dev/null @@ -1,1281 +0,0 @@ ---- -title: Usando IndexedDB -slug: Web/API/IndexedDB_API/Usando_IndexedDB -tags: - - API IndexedDB Tutorial Avançado -translation_of: Web/API/IndexedDB_API/Using_IndexedDB ---- -
-

IndexedDB é uma forma de armazenar dados no navegador do usuário. Com ele você pode criar aplicações web com possibilidade de fazer query sem necessidade de conexão, suas aplicações podem funcionar tanto online quanto offline. 

-
- -

Sobre esse documento

- -

Esse tutorial utiliza a API assíncrona do IndexedDB. Se você não está familiarizado com IndexedDB, você pode ler Conceitos básicos sobre IndexedDB.

- -

Para a documentação de referência, veja o artigo sobre API IndexedDB, pois nele contém os tipos de objetos utilizados no IndexedDB,  como também métodos da API, tanto síncrona como assíncrona. 

- -

Padrão básico

- -

O IndexedDB encoraja o uso do seguinte padrão:

- -
    -
  1. Abrir um banco de dados.
    2. -
  2. Criar um ObjectStore ao atualizar o banco. 
    3. -
  3. Iniciar uma transação e e faz um request para fazer alguma operação no banco, como adicionar ou obter dados.
    4. -
  4. -
    Esperar a operação ser completada ouvindo algum evento DOM.
    -
    5. -
  5. -
    Fazer algo com o resultado da query (que pode ser obtida pelo objeto request).
    -
    6. -
- -

OK, então, agora com esses conceitos em mente, nós podemos fazer coisas mais concretas.

- -

Criando e estruturando o banco

- -

Pelo fato  da especificação ainda estar evoluindo, as implementações do IndexedDB tem prefixos de navegadores. Os navegadores podem ter implementações diferentes da API IndexedDB até a especificação ser consolidada. Mas uma vez que tudo chegar a um consenso, os navegadores tirarão seus prefixos. Atualmente, algumas implementações removeram o prefixo: Internet Explorer 10, Firefox 16, Chrome 24. Quando eles usam prefixo, navegadores baseados no Gecko usam o prefixo moz, enquanto os navegadores baseados no WebKit usam o prefixo webkit.

- -

Usando uma versão experimental do IndexedDB

- -

Se você quiser testar seu código em navegadores que usam prefixo, você pode usar o código abaixo:  

- -
// Na linha abaixo, você deve incluir os prefixos do navegador que você vai testar.
-window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
-// Não use "var indexedDB = ..." se você não está numa function.
-// Posteriormente, você pode precisar de referências de algum objeto window.IDB*:
-window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
-window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
-// (Mozilla nunca usou prefixo nesses objetos, então não precisamos window.mozIDB*)
- -

Tome cuidado, implementações prefixadas podem estar com bugs ou implementando especificações antigas. Portanto, não é recomendado usar em produção. É preferível não usar IndexedDB em navegadores antigos:

- -
if (!window.indexedDB) {
-    window.alert("Seu navegador não suporta uma versão estável do IndexedDB. Alguns recursos não estarão disponíveis.");
-}
-
- -

Abrindo um banco

- -

Começamos todo o processo assim:

- -
// Abrindo o banco de dados
-var request = window.indexedDB.open("DBteste", 3);
-
- -

Abrir um banco é como qualquer outra operação — Você tem que "requerer (request)".

- -

A requisição de abertura não abre o banco ou inicia a transação. A chamada da função open() retorna um objeto IDBOpenDBRequest com o resultado (success) ou um erro que você terá que tratar. Muitas outras funções assíncronas no IndexedDB fazem a mesma coisa - retornam um objeto IDBRequest com o resultado ou erro. O resultado para a função open é uma instância de IDBDatabase.

- -

O segundo parâmetro para o método open é a versão do banco. A versão do banco determina seu schema — os registros no banco e sua estrutura. Se o banco não existe ainda, ele é criado pela operação open, então o evento onupgradeneeded é chamado e você cria o schema do banco nesse evento. Se o banco existe mas você está fornecendo um novo número de versão, o evento onupgradeneeded é chamado imediatamente, permitindo você tratar a atualização do schema. Para mais informações sobre isso veja Updating the version of the database.

- -
-

O número de versão é um unsigned long long, o que significa que ele pode ver um inteiro muito grande. Isso também significa que você não pode usar float, pois ele será convertido em um inteiro pequeno e a transação pode não acontecer, ou o evento upgradeneeded pode não ser chamado. Então se você usar 2.4 como versão:

- -
var request = indexedDB.open("DBteste", 2.4); // não faça isso, pois a versão será convertida para 2.
-
- -

Gerenciando handlers

- -

A primeira coisa que você vai querer fazer em quase todos os requests é tratar os casos de success e error:

- -
request.onerror = function(event) {
-  // Fazer algo com request.errorCode!
-};
-request.onsuccess = function(event) {
-  // Fazer algo com request.result!
-};
- -

Qual das duas funções, onsuccess() ou onerror(),  será chamada? Se tudo correr bem, o evento de sucesso (que é um evento DOM event com propriedade type setada "success") é chamado com request como seu target. Uma vez chamado, a função onsuccess() no request é chamada com o evento de sucesso em seu contexto. Por outro lado, se acontecer algum problema, um evento de erro (que é um evento DOM com a propriedade type setada para "error") é chamado no request. Então a função onerror()  com o evento erro em seu contexto.

- -

A API IndexedDB é feita para minimizar a necessidade de manipular erros, então você não fará muitos eventos de erro (ao menos, se você usar a API!) No  caso de abrir um banco, portanto, existe algumas condições comuns para eventos de erro. O problema mais comum é o usuário não dar permissão para criar o banco. Um dos principais objetivos do IndexedDB é permitir muitos dados serem armazenados para uso offline. (Para aprender mais sobre o quanto cada navegador pode armazenar, veja Storage limits).  

- -

Obviamente, navegadores não querem armazenar dados que poluem seu computador, então o navegador mostra uma mensagem ao usuário na primeira vez que um aplicativo tenta abrir o IndexedDB. O usuário pode escolher permitir ou negar acesso. O IndexedDB também é desabilitado no modo privado dos navegadores (ctrl+shift+N no Chrome e ctrl+shift+P no Firefox). Isso acontece porque o intuito do modo privado é não deixar rastros na navegação.

- -

Agora, assumindo que o usuário aprovou seu request para criar o banco, e você recebeu success; Qual é o próximo passo? O request foi gerado com a chamada de indexedDB.open(), e request.result é uma instância de IDBDatabase, e você definitivamente vai querer armazenar isso para usar depois. Veja abaixo:

- -
var db;
-var request = indexedDB.open("DBteste");
-request.onerror = function(event) {
-  alert("Você não habilitou minha web app para usar IndexedDB?!");
-};
-request.onsuccess = function(event) {
-  db = request.result;
-};
-
- -

Tratando Erros

- -

Como mencionado acima, o evento de erro é chamado quando o request dá erro. Se você quer evitar manipuladores de erro a cada request, você pode adicionar um único manipulador de erro no objeto db, como abaixo:

- -
db.onerror = function(event) {
-  // Função genérica para tratar os erros de todos os requests desse banco!
-  alert("Database error: " + event.target.errorCode);
-};
-
- -

Um dos erros mais comuns ao abrir o banco é VER_ERR. Ele indica que a versão do banco existente é maior que a versão que você quer abrir.

- -

Criando ou atualizando a versão do banco

- -

Quando você cria um novo banco ou aumenta sua versão, o evento onupgradeneeded será chamado. No manipulador deste evento, você deve criar o objectStore necessário para a versão do banco:

- -
// Este evento é implementado somente em navegadores mais recentes
-request.onupgradeneeded = function(event) {
-  var db = event.target.result;
-
-  // cria um objectStore para esse banco
-  var objectStore = db.createObjectStore("nome", { keyPath: "minhaChave" });
-};
- -

Neste caso, o banco já terá objectStores de suas versões anteriores, então você não terá que criar esses objectStores de novo. Você somente precisará criar um novo objectStore qualquer, ou deletar objectStores da versão anterior que não serão utilizados. Se você precisa mudar um objectStore existente (mudar o keyPath, por exemplo),  então você precisa deletar o objectStore antigo e criá-lo novamente com as novas opções. (Note que isso irá deletar a informação no objectStore! Se você precisa salvar a informação, você deve ler isso e salvá-lo em algum lugar antes de atualizar o banco.)

- -

Blink/Webkit suporta a versão atual da especificação, nas versões do Chrome 23+ e Opera 17+; IE10+ também suporta. Outros motores e versões antigas não implementam a versão atual da especificação e não suportam a assinatura indexedDB.open(name, version).onupgradeneeded ainda.  Para mais informação sobre como atualizar a versão do banco em Webkit/Blink, veja IDBDatabase reference article.

- -

Estruturando o banco

- -

Agora a estrutura do banco. IndexedDB usa "armazens de objetos" em vez de tabelas, e um único banco de dados pode conter qualquer número de "armazem de objetos". Sempre que um valor é armazenado num objectStore, ele é associado a uma chave. Existe várias maneiras diferentes de uma chave ser mostrada, dependendo do que o objectStore usa, um key path ou key generator.

- -

A tabela abaixo mostra as direfentes chaves suportadas:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Key Path (keyPath)Key Generator (autoIncrement)Description
NãoNãoEste objectStore pode ter qualquer tipo de valor primitivo como número ou string. Você deve suprir uma chave separada sempre que adicionar um novo valor.
SimNãoEste objectStore pode simplesmente armazenar objetos JavaScript. O objeto deve ter uma propriedade com o mesmo nome do key path.
NãoSimEste objectStore pode possuir qualquer tipo de valor. A chave é gerada para você, automaticamente, ou você pode suprir uma chave separada, caso utilize uma chave específica.
SimSimEste objectStore suporta somente objetos JavaScript. Normalmente uma chave é gerada e o valor dela é armazenado no objeto em uma propriedade com o mesmo nome da key path. Portanto, se a propriedade já existe, o valor dela será usado como chave, em vez do valor gerado.
- -

Você também pode criar índices em qualquer objectStore. Um indice deixa você olhar os valores armazenados no objectStore usando o valor de uma propriedade do objectStore, em vez de sua chave.

- -

Adicionalmente, indices tem a habilidade de forçar restrições simples nos dados armazenados. Setando uma flag única quando criar o índice, reforça que dois objetos são armazenados contendo o mesmo valor para o key path do índice. Então, por exemplo, se você tem um objeto armazenado que tem um conjunto de pessoas, e você quer ter certeza que ninguém tera o mesmo e-mail, você pode usar um índice com flag única para forçar isso.

- -

Isso soa meio confuso, mas este exemplo pode iluminar o conceito. Primeiro, vamos definir alguns dados a serem usados no exemplo:

- -
// Isso é o que os dados de nossos clientes será.
-const DadosClientes = [
-  { ssn: "444-44-4444", nome: "Bill", idade: 35, email: "bill@company.com" },
-  { ssn: "555-55-5555", nome: "Donna", idade: 32, email: "donna@home.org" }
-];
-
- -

Agora  vamos ver  ccomo criar um IndexedDB para armazenar nossos dados:

- -
const dbName = "clientes";
-
-var request = indexedDB.open(dbName, 2);
-
-request.onerror = function(event) {
-  // Tratar erros.
-};
-request.onupgradeneeded = function(event) {
-  var db = event.target.result;
-
-  // Cria um objectStore para conter a informação sobre nossos clientes. Nós vamos
-  // usar "ssn" como key path porque sabemos que é único;
-  var objectStore = db.createObjectStore("clientes", { keyPath: "ssn" });
-
-  // Cria um índice para buscar clientes pelo nome. Podemos ter nomes
-  // duplicados, então não podemos usar como índice único.
-  objectStore.createIndex("nome", "nome", { unique: false });
-
-  // Cria um índice para buscar clientes por email. Queremos ter certeza
-  // que não teremos 2 clientes com o mesmo e-mail;
-  objectStore.createIndex("email", "email", { unique: true });
-
-  // Usando transação oncomplete para afirmar que a criação do objectStore
-  // é terminada antes de adicionar algum dado nele.
-  objectStore.transaction.oncomplete = function(event) {
-    // Armazenando valores no novo objectStore.
-    var clientesObjectStore = db.transaction("clientes", "readwrite").objectStore("clientes");
-    for (var i in DadosClientes) {
-      clientesObjectStore.add(DadosClientes[i]);
-    }
-  }
-};
-
- -

Como falamos antes, onupgradeneeded é o único lugar onde você pode alterar a estrutura do banco. Nele você pode criar e deletar objectStores e construir ou remover índices.

- -
Armazens de objetos são criados com uma única chamada de createObjectStore(). O método pega o nome do armazem e um objeto parâmetro. Mesmo que o objeto parâmetro seja opcional, ele é muito importante porque ele deixa você definir propriedades importantes e ajustar tipos de dados que você quer criar. No nosso caso, nós obtemos um objectStore chamado "clientes" e definimos um keyPath, que é a propriedade que faz um objeto individual ser único no banco. Essa propriedade, nesse exemplo, é "ssn", que simboliza o cpf (social security number), que é único. O "ssn" deve ser apresentado em cada objeto armazenado no objectStore. 
- -

Nós também criamos um índice chamado "nome" ligado à propriedade nome. Assim como o createObjectStore(), o createIndex() tem um parâmetro opcional options que cuida do tipo de índice que você quer criar. Adicionando objetos que não tem a propriedade nome terá sucesso, porém esses objetos não aparecerão no índice "nome".

- -

Nós podemos obter os objetos de clientes armazenados usando os ssn da objectStore diretamente, ou usando os nomes usados no índice. Para aprender como isso é feito, veja a seção usando um índice.

- -

Usando um key generator

- -

Setando uma flag autoIncrement ao criar o objectStore habilitará o key generator. Por padrão ele não é setado.

- -

Com o key generator, a chave será gerada automaticamente quando você adicionar algum valor no objectStore. O atual número do key generator é sempre setado 1 quando a primeira key generator do objectStore é criada. Basicamente a próxima chave recebe o incremento de 1. O número atual da key generator nunca decresce,  a não ser se alguma operação do banco for revertida, como numa transação abortada, por exemplo. No entanto, deletar um registro ou limpar todos os registros nunca afeta o key generator dos objectStores.

- -

Nós podemos criar outro objectStore com o key generator como abaixo:

- -
// Abrindo o indexedDB.
-var request = indexedDB.open(dbName, 3);
-
-request.onupgradeneeded = function (event) {
-
-    var db = event.target.result;
-
-    // Criando outro objeto chamado "names" com o autoIncrement setado.
-    var objStore = db.createObjectStore("names", { autoIncrement : true });
-
-    // Porque "names" tem o the key generator, a chave para o nome é gerada automaticamente.
-    // Os registros adicionados serão assim:
-    // key : 1 => value : "Bill"
-    // key : 2 => value : "Donna"
-    for (var i in DadosClientes) {
-        objStore.add(DadosClientes[i].nome);
-    }
-}
- -

Para mais detalhes veja "W3C Key Generators".

- -

Adicionando, obtendo e removendo dados

- -

Antes de fazer qualquer coisa em um novo banco, você precisa iniciar uma transação. Transações estão no objeto database, e você tem que especificar qual objectStore você quer na transaction. Uma vez que você está dentro da transação, você pode acessar os objectStores  com seus dados e fazer os requests. Depois, você precisa decidir se você vai fazer mudanças no banco ou se você simplesmente quer ler esses dados. Transações tem três modos disponíveis: readonly, readwrite, and versionchange.

- -

Para mudar o "schema" ou estrutura do banco — o que envolve criar ou deletar objectStores ou índices — a transação deve ser em modo versionchange. Esta transação é aberta chamando o método {{domxref("IDBFactory.open")}} especificando a  version. (Em navegadores com WebKit que não tem a ultima especificação implementada, o método {{domxref("IDBFactory.open")}} tem apenas um parâmetro, o nome do banco; então você deve chamar {{domxref("IDBVersionChangeRequest.setVersion")}} para estabelecer uma transação versionchange.)

- -

Para ler os registros de um objectStore existente, a transação pode ser tanto readonly quanto readwrite. Para fazer mudanças em um objectStore existente, a transação deve ser em modo readwrite. Você abre essas transações usando {{domxref("IDBDatabase.transaction")}}. O método aceita dois parâmetros: o storeNames (o escopo, definido como um array de objectStores que você quer acessar) e o modo (readonly or readwrite) da transação. O método retorna o objeto detransação contendo o método {{domxref("IDBIndex.objectStore")}}, que você pode usar para acessar seu objectStore. Por padrão, quando nenhum modo é especificado, a transação é aberta no modo readonly.

- -

Você pode deixar o acesso aos dados mais rápido usando o escopo correto e o modo correto de transação. Aqui vai algumas dicas:

- - - -

Adicionando dados no banco

- -

Se você acabou de criar o banco, então você provavelmente quer escrever algo nele. Veja abaixo:

- -
var transaction = db.transaction(["clientes"], "readwrite");
-// Nota: Implementações mais antigas usam uma versão IDBTransaction.READ_WRITE antiga em vez de "readwrite".
-// Então, para suportar versões antigas, escreva:
-// var transaction = db.transaction(["clientes"], IDBTransaction.READ_WRITE);
- -

A função transaction() tem dois argumentos (opcionais) e retorna um objeto de transação. O primeiro argumento é uma lista de objectStores que serão trabalhados na transação. Você pode passar um array vazio se você quer uma transação com todos os objectStores, mas não faça isso pois a especificação diz que um array vazio pode gerar um erro InvalidAccessError. Se você não especificar nada no segundo parâmetro, você tem uma transação read-only. Se você quer escrever no banco, use "readwrite".

- -

Agora que você tem uma transação, você precisa entender seu tempo de uso. Transações são amarradas a um evento. Se você faz uma transação fora de um evento, ela ficará inativa. A única maneira de manter uma transação ativa é fazer um request nela. Quando o request acabar você terá a oportunidade de extender a transação durante o callback. Se você tentar extender uma transação dentro de um evento, então ela tornará inativa. Se existir requests pendentes, a transação continua ativa. O tempo de vida de uma transação é realmente simples mas deve ser usada em um curto espaço de tempo. Outros exemplos poderão ajudá-lo. Se você começar a ver TRANSACTION_INACTIVE_ERR error então você está fazendo algo errado.

- -

Transações podem receber eventos DOM de três tipos diferentes: error, abort, e complete. Nós falamos sobre o error, ou seja, a transação recebe um error sempre que o request gerar erro. Um ponto mais sutil é que o comportamento padrão de um erro é abortar a transação na qual ele estava. A menos que você manipule o erro chamando preventDefault() e fazendo algo depois, a transaçaõ inteira será desfeita. Este design força você a pensar sobre manipulação de erros, mas você pode sempre adicionar um manipulador de todos os erros se a manipulação separada estiver complicada. Se você não tratar o erro ou chamar abort() na transação, então a transação é desfeita (roll back) e o evento abort é chamado. Por outro lado, depois de todo request completado, você tem um evento complete. Se você fazer várias operações no banco, então seguir as operações de transações pode ser um caminho a seguir.

- -

Agora que você tem uma transação, você precisará obter um objectStore dela. Transações somente deixam você obter um objectStore citado na transação. Então você pode adicionar os dados que precisa.

- -
// Faz algo após a inserção dos dados.
-transaction.oncomplete = function(event) {
-  alert("Pronto!");
-};
-
-transaction.onerror = function(event) {
-  // Não esquecer de tratar os erros!
-};
-
-var objectStore = transaction.objectStore("clientes");
-for (var i in DadosClientes) {
-  var request = objectStore.add(DadosClientes[i]);
-  request.onsuccess = function(event) {
-    // event.target.result == DadosClientes[i].ssn;
-  };
-}
- -

O result de um request gerado de uma chamada de add() é a chave do valor  que foi adicionado. Então neste caso, ele deve ser igual ao valor do ssn do objeto que foi adicionado, desde que o objeto use o ssn como key path. Note que a função add() não deixa nenhum objeto ser adicionado com a mesma chave. Se você está tentando modificar um registro existente, você deve usar o put(), como explica a seção  {{ anch("Updating an entry in the database") }}.

- -

Removendo dados do banco

- -

Para remoção o código é parecido:

- -
var request = db.transaction(["clientes"], "readwrite")
-                .objectStore("clientes")
-                .delete("444-44-4444");
-request.onsuccess = function(event) {
-  // Pronto!
-};
- -

Obtendo dados do banco

- -

Agora que o banco tem algumas informações nele, você pode obtê-las de diferentes maneiras. Primeiro, um get() simples. Você precisa informar a chave do valor a ser obtido:

- -
var transaction = db.transaction(["clientes"]);
-var objectStore = transaction.objectStore("clientes");
-var request = objectStore.get("444-44-4444");
-request.onerror = function(event) {
-  // Tratar erro!
-};
-request.onsuccess = function(event) {
-  // Fazer algo com request.result!
-  alert("O nome do SSN 444-44-4444 é " + request.result.name);
-};
- -

Veja agora de maneira resumida:

- -
db.transaction("clientes").objectStore("clientes").get("444-44-4444").onsuccess = function(event) {
-  alert("O nome do SSN 444-44-4444 é " + request.result.name);
-};
- -

Viu como funciona? Desde que exista um objectStore, você pode evitar passar uma lista de objectStores que precisa na transação e passar apenas o nome como string. Você também pode ler do banco, apenas, então não precisará de uma transação "readwrite". Chamando transaction() com nenhum modo especificado, você terá uma transação "readonly". Outra consideração é que você não necessita salvar o request em uma variável. Desde que o evento DOM tenha o target que você precisará para obter a propriedade result.

- -
-

Note: Você pode deixar o acesso aos dados mais rápido limitando o escopo e o modo de transação. Veja algumas dicas:

- - -
- -

Atualizando um registro no banco

- -

Agora que obtemos algum dado, atualizá-ls é inserí-los novamente no IndexedDB é bem simples. Vamos atualizar o exemplo anterior:

- -
var objectStore = db.transaction(["clientes"], "readwrite").objectStore("clientes");
-var request = objectStore.get("444-44-4444");
-request.onerror = function(event) {
-  // Tratar erro
-};
-request.onsuccess = function(event) {
-  // Obter os valores antigos
-  var data = request.result;
-
-  // atualizar algum dado
-  data.age = 42;
-
-  // Atulizar esse dado no banco
-  var requestUpdate = objectStore.put(data);
-   requestUpdate.onerror = function(event) {
-     // Tratar erro
-   };
-   requestUpdate.onsuccess = function(event) {
-     // Sucesso na atualização \o/
-   };
-};
- -

Criamos uma objectStore e obtemos um cliente dele, identificado pelo ssn (444-44-4444). Nós atualizamos o objeto, passando-o como parâmetro de um método put de outro request (requestUpdate) sobrescrevendo o valor antigo.

- -
-

Note que neste caso nós temos que especificar a transação readwrite porque nós queremos escrever no banco, não somente ler os dados dele.

-
- -

Usando um cursor

- -

Ao usar o método get() você precisa saber a chave do objeto que deseja obter. Se você quer passear entre todos os valores do seu objectStore, então você pode usar um cursor. Veja:

- -
var objectStore = db.transaction("cliente").objectStore("cliente");
-
-objectStore.openCursor().onsuccess = function(event) {
-  var cursor = event.target.result;
-  if (cursor) {
-    alert("O nome do SSN " + cursor.key + " é " + cursor.value.name);
-    cursor.continue();
-  }
-  else {
-    alert("Não existe mais registros!");
-  }
-};
- -

A função openCursor() tem vários argumentos. Primeiro, você pode limitar o número de itens obtidos usando uma chave que veremos logo abaixo. Segundo, você pode especificar a direção que deseja iterar. No exemplo acima, nós estamos iterando em todos os objetos em ordem ascendente. O callback de sucesso para cursor é um pouco especial. O objeto cursor já é o result do request (acima nós usamos event.target.result). Então a chave atual e o valor pode ser encontrado na propriedade key e value do objeto cursor. Se você quer manter adiante, então você usa o método continue(). Quando você chegar ao fim dos dados (ou se não existem registros encontrados no openCursor()) você ainda tem um callback de sucesso, mas a propriedade result fica undefined.

- -

Um padrão comum para cursores é obter todos os objetos em um objectStore e adicioná-los a um array como este:

- -
var clientes = [];
-
-objectStore.openCursor().onsuccess = function(event) {
-  var cursor = event.target.result;
-  if (cursor) {
-    clientes.push(cursor.value);
-    cursor.continue();
-  }
-  else {
-    alert("Todos os clientes: " + clientes);
-  }
-};
- -
-

Note: Mozilla também implementou o método getAll() para ser usado nesse caso (e getAllKeys(), que está atualmente dentro da preferência do dom.indexedDB.experimental em about:config). Estes métodos não são parte do padrão IndexedDB, então eles podem desaparecer no futuro. Nós adicionamos porque achamos útil. O código abaixo faz o mesmo que o código acima:

- -
objectStore.getAll().onsuccess = function(event) {
-  alert("Todos os clientes: " + event.target.result);
-};
- -

Existe um custo de performance associado com a propriedade value do cursor, porque o objeto é criado de forma lenta. Quando você usa getAll() por exemplo, Gecko deve criar todos os objetos de uma vez. Se você está somente interessado em cada chave, é muito melhor usar o cursor do que usar o getAll(). Se você está tentando obter um array de todos os objetos, então é melhor usar o getAll().

-
- -

Usando um índice

- -

Armazenar dados de um cliente usando o SSN como chave é lógico pois o SSN identifica o cliente de forma única. Se você precisa obter um cliente pelo seu nome, portanto, você precisará iterar todos os registros no banco e comparar os nomes até achar o que você procura. Buscar dessa maneira é algo lento, então criamos um índice.

- -
var index = objectStore.index("nome");
-index.get("John").onsuccess = function(event) {
-  alert("O SSN de John é " + event.target.result.ssn);
-};
- -

O cursor "nome" não é único, então pode existir mais de um registro com o nome igual a "John". Neste caso você sempre obtem o registro com a chave de menor valor.

- -

Se você precisa acessar todos os registros retornados, você pode usar um cursor. Você pode abrir dois tipos de cursores. Um cursor normal mapeia o índice ao objeto na objectStore. Uma cursor-chave mapeia o a propriedade índice à chave usada para armazenar o objeto. As diferenças são ilustradas abaixo:

- -
// Usando um cursor normal para obter todos os objetos
-index.openCursor().onsuccess = function(event) {
-  var cursor = event.target.result;
-  if (cursor) {
-    // cursor.key é um nome, como "Bill", e cursor.value é o objeto inteiro.
-    alert("Nome: " + cursor.key + ", SSN: " + cursor.value.ssn + ", email: " + cursor.value.email);
-    cursor.continue();
-  }
-};
-
-// Usando um cursor-chave para obter todos os objetos
-index.openKeyCursor().onsuccess = function(event) {
-  var cursor = event.target.result;
-  if (cursor) {
-    // cursor.key é o nome, como "Bill", e cursor.value é o SSN (chave).
-    // Não tem como obter o resto do objeto
-    alert("Nome: " + cursor.key + ", SSN: " + cursor.value);
-    cursor.continue();
-  }
-};
- -

Especificando o número e a direção dos cursores

- -

Se você gostaria de limitar o número de valores retornados pelo cursor, você pode usar um objeto IDBKeyRange e passar isso como o primeiro argumento ao openCursor() ou openKeyCursor(). Você pode fazer um key range que permite um único valor, ou valores acima ou abaixo do especificado. O limite pode ser fechado (o key range inclui os valores dados) ou aberto (o key range não inclue os valores dados). Veja como funciona:

- -
// Somente se for igual "Donna"
-var singleKeyRange = IDBKeyRange.only("Donna");
-
-// Combinações menores que "Bill", incluindo "Bill"
-var lowerBoundKeyRange = IDBKeyRange.lowerBound("Bill");
-
-// Combinações menores que "Bill", sem incluir "Bill"
-var lowerBoundOpenKeyRange = IDBKeyRange.lowerBound("Bill", true);
-
-// Combinações maiores que Donna, não incluindo "Donna"
-var upperBoundOpenKeyRange = IDBKeyRange.upperBound("Donna", true);
-
-// Combinações entre "Bill" e "Donna", sem incluir "Donna"
-var boundKeyRange = IDBKeyRange.bound("Bill", "Donna", false, true);
-
-// Para usar qualquer um desses key ranges, basta passar como primeiro parâmetro de openCursor()/openKeyCursor()
-index.openCursor(boundKeyRange).onsuccess = function(event) {
-  var cursor = event.target.result;
-  if (cursor) {
-    // Faz algo com o que encontrar
-    cursor.continue();
-  }
-};
- -

As vezes você pode querer iterar em ordem decrescente, em vez de crescente, alterando o segundo parâmetro de openCursor():

- -
objectStore.openCursor(boundKeyRange, "prev").onsuccess = function(event) {
-  var cursor = event.target.result;
-  if (cursor) {
-    // Prev indica ordem decrescente
-    cursor.continue();
-  }
-};
- -

Se você apenas quer especificar a ordem sem key range, é só passar null no primeiro parâmetro:

- -
objectStore.openCursor(null, "prev").onsuccess = function(event) {
-  var cursor = event.target.result;
-  if (cursor) {
-    // Faça algo com os resultados.
-    cursor.continue();
-  }
-};
- -

Uma vez que o índice "nome" não é único, pode existir várias entradas onde o nome é o mesmo. Isso não acontece com objectStores porque a chave deve ser sempre única. Se você deseja filtrar valores duplicados numa iteração do cursor, você pode passar nextunique (ou prevunique se quiser decrescer) como parâmetro de direção. Quando nextunique ou prevunique é usado, o registro com menor chave é retornado.

- -
index.openKeyCursor(null, "nextunique").onsuccess = function(event) {
-  var cursor = event.target.result;
-  if (cursor) {
-    // Faça algo com os registros.
-    cursor.continue();
-  }
-};
- -

Veja "IDBCursor Constants" para parâmetros válidos.

- -

Mudança de versão quando a web app está aberta em outra aba.

- -

Quando sua web app muda a versão você precisa considerar o que vai acontecer se o usuário está na versão antiga em uma aba, e carrega a versão nova na outra. Quando você chamar o open() com a versão mais nova, um evento onblocked  é chamado até que a aba da versão antiga seja fechada ou recarregada. Veja abaixo:

- -
var openReq = mozIndexedDB.open("DBteste", 2);
-
-openReq.onblocked = function(event) {
-  // Se existe outra aba com a versão antiga
-  alert("Existe uma versão antiga da web app aberta em outra aba, feche-a por favor!");
-};
-
-openReq.onupgradeneeded = function(event) {
-  // Se estiver tudo fechado, então faça as devidas alterações
-  db.createObjectStore(/* ... */);
-  useDatabase(db);
-}
-
-openReq.onsuccess = function(event) {
-  var db = event.target.result;
-  useDatabase(db);
-  return;
-}
-
-function useDatabase(db) {
-  // Esteja certo de que adicionou um evento para notificar se a página muda a versão
-  // Nós devemos fechar o banco. Isso permite à outra página ser atualizada
-  // Se você não fizer isso a atualização não acontecerá até fechar as abas.
-  db.onversionchange = function(event) {
-    db.close();
-    alert("Uma nova versão desta web app está pronta. Atualiza, por favor!");
-  };
-
-  // Fazer algo com os bancos
-}
-
- -

Segurança

- -

IndexedDB usa o princípio de mesma origem, o que significa que o banco só será acessado pelo site que o criou.

- -

É importante notar que o IndexedDB não funciona para conteúdo carregado em um frame de outro site (seja {{ HTMLElement("frame") }} ou {{ HTMLElement("iframe") }}. Esta é uma política de segurança e privacidade análoga ao bloqueio de cookies de terceiros. Para mais detalhes, veja {{ bug(595307) }}.

- -

Alerta sobre fechar o navegador

- -

Quando o navegador é fechado, qualquer transação pendente no IndexedDB será abortada (silenciosamente) — ele não vai completar, nem chamar o evento de erro.  Uma vez que o usuário pode sair do navegador, em qualquer momento, isto significa que você não pode confiar em qualquer transação específica para completar ou para saber que ela não foi concluída. Existem várias implicações nesse comportamento.

- -

Primeiro, você deve ter o cuidado de sempre deixar seu banco de dados em um estado consistente, no final de cada transação. Por exemplo, suponha que você está usando IndexedDB para armazenar uma lista de itens que permitem ao usuário editar. Você salvar a lista após a edição, limpando o armazenamento de objetos e, em seguida, escrever a nova lista. Se você limpar o armazenamento de objetos em uma transação e escrever a nova lista em outra transação, há um perigo de que o navegador irá fechar após a limpeza de dados e antes da gravação, deixando-o com um banco de dados vazio. Para evitar isso, você deve combinar tanto a limpeza quanto a gravação em uma única transação.

- -

Em segundo lugar, você nunca deve amarrar as operações de banco de dados ao evento unload. Se o evento unload é acionado pelo fechamento do navegador, todas as transações criadas no unload nunca serão concluídas. Uma abordagem intuitiva para manter algumas informações em sessões do navegador é lê-la a partir do banco de dados quando o navegador (ou uma determinada página) é aberta, atualizá-la assim que o usuário interagir com o navegador, e depois salvá-lo para o banco de dados quando o navegador (ou página) será fechada. No entanto, isso não vai funcionar. As transações de banco de dados será criado no unload, mas como elas são assíncronas, serão abortadas antes que eles possam executar.

- -

De fato, não existe uma maneira de garantir que as transações no IndexedDBserão completadas, mesmo com o fechamento padrão do navegador. Ver {{ bug(870645) }}.

- -

Exemplo de IndexedDB

- -

HTML

- -
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
-
-    <h1>IndexedDB Demo: storing blobs, e-publication example</h1>
-    <div class="note">
-      <p>
-        Works and tested with:
-      </p>
-      <div id="compat">
-      </div>
-    </div>
-
-    <div id="msg">
-    </div>
-
-    <form id="register-form">
-      <table>
-        <tbody>
-          <tr>
-            <td>
-              <label for="pub-title" class="required">
-                Title:
-              </label>
-            </td>
-            <td>
-              <input type="text" id="pub-title" name="pub-title" />
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <label for="pub-biblioid" class="required">
-                Bibliographic ID:<br/>
-                <span class="note">(ISBN, ISSN, etc.)</span>
-              </label>
-            </td>
-            <td>
-              <input type="text" id="pub-biblioid" name="pub-biblioid"/>
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <label for="pub-year">
-                Year:
-              </label>
-            </td>
-            <td>
-              <input type="number" id="pub-year" name="pub-year" />
-            </td>
-          </tr>
-        </tbody>
-        <tbody>
-          <tr>
-            <td>
-              <label for="pub-file">
-                File image:
-              </label>
-            </td>
-            <td>
-              <input type="file" id="pub-file"/>
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <label for="pub-file-url">
-                Online-file image URL:<br/>
-                <span class="note">(same origin URL)</span>
-              </label>
-            </td>
-            <td>
-              <input type="text" id="pub-file-url" name="pub-file-url"/>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-
-      <div class="button-pane">
-        <input type="button" id="add-button" value="Add Publication" />
-        <input type="reset" id="register-form-reset"/>
-      </div>
-    </form>
-
-    <form id="delete-form">
-      <table>
-        <tbody>
-          <tr>
-            <td>
-              <label for="pub-biblioid-to-delete">
-                Bibliographic ID:<br/>
-                <span class="note">(ISBN, ISSN, etc.)</span>
-              </label>
-            </td>
-            <td>
-              <input type="text" id="pub-biblioid-to-delete"
-                     name="pub-biblioid-to-delete" />
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <label for="key-to-delete">
-                Key:<br/>
-                <span class="note">(for example 1, 2, 3, etc.)</span>
-              </label>
-            </td>
-            <td>
-              <input type="text" id="key-to-delete"
-                     name="key-to-delete" />
-            </td>
-          </tr>
-        </tbody>
-      </table>
-      <div class="button-pane">
-        <input type="button" id="delete-button" value="Delete Publication" />
-        <input type="button" id="clear-store-button"
-               value="Clear the whole store" class="destructive" />
-      </div>
-    </form>
-
-    <form id="search-form">
-      <div class="button-pane">
-        <input type="button" id="search-list-button"
-               value="List database content" />
-      </div>
-    </form>
-
-    <div>
-      <div id="pub-msg">
-      </div>
-      <div id="pub-viewer">
-      </div>
-      <ul id="pub-list">
-      </ul>
-    </div>
-
- -

CSS Content

- -
body {
-  font-size: 0.8em;
-  font-family: Sans-Serif;
-}
-
-form {
-  background-color: #cccccc;
-  border-radius: 0.3em;
-  display: inline-block;
-  margin-bottom: 0.5em;
-  padding: 1em;
-}
-
-table {
-  border-collapse: collapse;
-}
-
-input {
-  padding: 0.3em;
-  border-color: #cccccc;
-  border-radius: 0.3em;
-}
-
-.required:after {
-  content: "*";
-  color: red;
-}
-
-.button-pane {
-  margin-top: 1em;
-}
-
-#pub-viewer {
-  float: right;
-  width: 48%;
-  height: 20em;
-  border: solid #d092ff 0.1em;
-}
-#pub-viewer iframe {
-  width: 100%;
-  height: 100%;
-}
-
-#pub-list {
-  width: 46%;
-  background-color: #eeeeee;
-  border-radius: 0.3em;
-}
-#pub-list li {
-  padding-top: 0.5em;
-  padding-bottom: 0.5em;
-  padding-right: 0.5em;
-}
-
-#msg {
-  margin-bottom: 1em;
-}
-
-.action-success {
-  padding: 0.5em;
-  color: #00d21e;
-  background-color: #eeeeee;
-  border-radius: 0.2em;
-}
-
-.action-failure {
-  padding: 0.5em;
-  color: #ff1408;
-  background-color: #eeeeee;
-  border-radius: 0.2em;
-}
-
-.note {
-  font-size: smaller;
-}
-
-.destructive {
-  background-color: orange;
-}
-.destructive:hover {
-  background-color: #ff8000;
-}
-.destructive:active {
-  background-color: red;
-}
-
- -

 

- -

JavaScript Content

- -
(function () {
-  var COMPAT_ENVS = [
-    ['Firefox', ">= 16.0"],
-    ['Google Chrome',
-     ">= 24.0 (you may need to get Google Chrome Canary), NO Blob storage support"]
-  ];
-  var compat = $('#compat');
-  compat.empty();
-  compat.append('<ul id="compat-list"></ul>');
-  COMPAT_ENVS.forEach(function(val, idx, array) {
-    $('#compat-list').append('<li>' + val[0] + ': ' + val[1] + '</li>');
-  });
-
-  const DB_NAME = 'mdn-demo-indexeddb-epublications';
-  const DB_VERSION = 1; // Use a long long for this value (don't use a float)
-  const DB_STORE_NAME = 'publications';
-
-  var db;
-
-  // Used to keep track of which view is displayed to avoid uselessly reloading it
-  var current_view_pub_key;
-
-  function openDb() {
-    console.log("openDb ...");
-    var req = indexedDB.open(DB_NAME, DB_VERSION);
-    req.onsuccess = function (evt) {
-      // Better use "this" than "req" to get the result to avoid problems with
-      // garbage collection.
-      // db = req.result;
-      db = this.result;
-      console.log("openDb DONE");
-    };
-    req.onerror = function (evt) {
-      console.error("openDb:", evt.target.errorCode);
-    };
-
-    req.onupgradeneeded = function (evt) {
-      console.log("openDb.onupgradeneeded");
-      var store = evt.currentTarget.result.createObjectStore(
-        DB_STORE_NAME, { keyPath: 'id', autoIncrement: true });
-
-      store.createIndex('biblioid', 'biblioid', { unique: true });
-      store.createIndex('title', 'title', { unique: false });
-      store.createIndex('year', 'year', { unique: false });
-    };
-  }
-
-  /**
-   * @param {string} store_name
-   * @param {string} mode either "readonly" or "readwrite"
-   */
-  function getObjectStore(store_name, mode) {
-    var tx = db.transaction(store_name, mode);
-    return tx.objectStore(store_name);
-  }
-
-  function clearObjectStore(store_name) {
-    var store = getObjectStore(DB_STORE_NAME, 'readwrite');
-    var req = store.clear();
-    req.onsuccess = function(evt) {
-      displayActionSuccess("Store cleared");
-      displayPubList(store);
-    };
-    req.onerror = function (evt) {
-      console.error("clearObjectStore:", evt.target.errorCode);
-      displayActionFailure(this.error);
-    };
-  }
-
-  function getBlob(key, store, success_callback) {
-    var req = store.get(key);
-    req.onsuccess = function(evt) {
-      var value = evt.target.result;
-      if (value)
-        success_callback(value.blob);
-    };
-  }
-
-  /**
-   * @param {IDBObjectStore=} store
-   */
-  function displayPubList(store) {
-    console.log("displayPubList");
-
-    if (typeof store == 'undefined')
-      store = getObjectStore(DB_STORE_NAME, 'readonly');
-
-    var pub_msg = $('#pub-msg');
-    pub_msg.empty();
-    var pub_list = $('#pub-list');
-    pub_list.empty();
-    // Resetting the iframe so that it doesn't display previous content
-    newViewerFrame();
-
-    var req;
-    req = store.count();
-    // Requests are executed in the order in which they were made against the
-    // transaction, and their results are returned in the same order.
-    // Thus the count text below will be displayed before the actual pub list
-    // (not that it is algorithmically important in this case).
-    req.onsuccess = function(evt) {
-      pub_msg.append('<p>There are <strong>' + evt.target.result +
-                     '</strong> record(s) in the object store.</p>');
-    };
-    req.onerror = function(evt) {
-      console.error("add error", this.error);
-      displayActionFailure(this.error);
-    };
-
-    var i = 0;
-    req = store.openCursor();
-    req.onsuccess = function(evt) {
-      var cursor = evt.target.result;
-
-      // If the cursor is pointing at something, ask for the data
-      if (cursor) {
-        console.log("displayPubList cursor:", cursor);
-        req = store.get(cursor.key);
-        req.onsuccess = function (evt) {
-          var value = evt.target.result;
-          var list_item = $('<li>' +
-                            '[' + cursor.key + '] ' +
-                            '(biblioid: ' + value.biblioid + ') ' +
-                            value.title +
-                            '</li>');
-          if (value.year != null)
-            list_item.append(' - ' + value.year);
-
-          if (value.hasOwnProperty('blob') &&
-              typeof value.blob != 'undefined') {
-            var link = $('<a href="' + cursor.key + '">File</a>');
-            link.on('click', function() { return false; });
-            link.on('mouseenter', function(evt) {
-                      setInViewer(evt.target.getAttribute('href')); });
-            list_item.append(' / ');
-            list_item.append(link);
-          } else {
-            list_item.append(" / No attached file");
-          }
-          pub_list.append(list_item);
-        };
-
-        // Move on to the next object in store
-        cursor.continue();
-
-        // This counter serves only to create distinct ids
-        i++;
-      } else {
-        console.log("No more entries");
-      }
-    };
-  }
-
-  function newViewerFrame() {
-    var viewer = $('#pub-viewer');
-    viewer.empty();
-    var iframe = $('<iframe />');
-    viewer.append(iframe);
-    return iframe;
-  }
-
-  function setInViewer(key) {
-    console.log("setInViewer:", arguments);
-    key = Number(key);
-    if (key == current_view_pub_key)
-      return;
-
-    current_view_pub_key = key;
-
-    var store = getObjectStore(DB_STORE_NAME, 'readonly');
-    getBlob(key, store, function(blob) {
-      console.log("setInViewer blob:", blob);
-      var iframe = newViewerFrame();
-
-      // It is not possible to set a direct link to the
-      // blob to provide a mean to directly download it.
-      if (blob.type == 'text/html') {
-        var reader = new FileReader();
-        reader.onload = (function(evt) {
-          var html = evt.target.result;
-          iframe.load(function() {
-            $(this).contents().find('html').html(html);
-          });
-        });
-        reader.readAsText(blob);
-      } else if (blob.type.indexOf('image/') == 0) {
-        iframe.load(function() {
-          var img_id = 'image-' + key;
-          var img = $('<img id="' + img_id + '"/>');
-          $(this).contents().find('body').html(img);
-          var obj_url = window.URL.createObjectURL(blob);
-          $(this).contents().find('#' + img_id).attr('src', obj_url);
-          window.URL.revokeObjectURL(obj_url);
-        });
-      } else if (blob.type == 'application/pdf') {
-        $('*').css('cursor', 'wait');
-        var obj_url = window.URL.createObjectURL(blob);
-        iframe.load(function() {
-          $('*').css('cursor', 'auto');
-        });
-        iframe.attr('src', obj_url);
-        window.URL.revokeObjectURL(obj_url);
-      } else {
-        iframe.load(function() {
-          $(this).contents().find('body').html("No view available");
-        });
-      }
-
-    });
-  }
-
-  /**
-   * @param {string} biblioid
-   * @param {string} title
-   * @param {number} year
-   * @param {string} url the URL of the image to download and store in the local
-   *   IndexedDB database. The resource behind this URL is subjected to the
-   *   "Same origin policy", thus for this method to work, the URL must come from
-   *   the same origin as the web site/app this code is deployed on.
-   */
-  function addPublicationFromUrl(biblioid, title, year, url) {
-    console.log("addPublicationFromUrl:", arguments);
-
-    var xhr = new XMLHttpRequest();
-    xhr.open('GET', url, true);
-    // Setting the wanted responseType to "blob"
-    // http://www.w3.org/TR/XMLHttpRequest2/#the-response-attribute
-    xhr.responseType = 'blob';
-    xhr.onload = function (evt) {
-                           if (xhr.status == 200) {
-                             console.log("Blob retrieved");
-                             var blob = xhr.response;
-                             console.log("Blob:", blob);
-                             addPublication(biblioid, title, year, blob);
-                           } else {
-                             console.error("addPublicationFromUrl error:",
-                                           xhr.responseText, xhr.status);
-                           }
-                         };
-    xhr.send();
-
-    // We can't use jQuery here because as of jQuery 1.8.3 the new "blob"
-    // responseType is not handled.
-    // http://bugs.jquery.com/ticket/11461
-    // http://bugs.jquery.com/ticket/7248
-    // $.ajax({
-    //   url: url,
-    //   type: 'GET',
-    //   xhrFields: { responseType: 'blob' },
-    //   success: function(data, textStatus, jqXHR) {
-    //     console.log("Blob retrieved");
-    //     console.log("Blob:", data);
-    //     // addPublication(biblioid, title, year, data);
-    //   },
-    //   error: function(jqXHR, textStatus, errorThrown) {
-    //     console.error(errorThrown);
-    //     displayActionFailure("Error during blob retrieval");
-    //   }
-    // });
-  }
-
-  /**
-   * @param {string} biblioid
-   * @param {string} title
-   * @param {number} year
-   * @param {Blob=} blob
-   */
-  function addPublication(biblioid, title, year, blob) {
-    console.log("addPublication arguments:", arguments);
-    var obj = { biblioid: biblioid, title: title, year: year };
-    if (typeof blob != 'undefined')
-      obj.blob = blob;
-
-    var store = getObjectStore(DB_STORE_NAME, 'readwrite');
-    var req;
-    try {
-      req = store.add(obj);
-    } catch (e) {
-      if (e.name == 'DataCloneError')
-        displayActionFailure("This engine doesn't know how to clone a Blob, " +
-                             "use Firefox");
-      throw e;
-    }
-    req.onsuccess = function (evt) {
-      console.log("Insertion in DB successful");
-      displayActionSuccess();
-      displayPubList(store);
-    };
-    req.onerror = function() {
-      console.error("addPublication error", this.error);
-      displayActionFailure(this.error);
-    };
-  }
-
-  /**
-   * @param {string} biblioid
-   */
-  function deletePublicationFromBib(biblioid) {
-    console.log("deletePublication:", arguments);
-    var store = getObjectStore(DB_STORE_NAME, 'readwrite');
-    var req = store.index('biblioid');
-    req.get(biblioid).onsuccess = function(evt) {
-      if (typeof evt.target.result == 'undefined') {
-        displayActionFailure("No matching record found");
-        return;
-      }
-      deletePublication(evt.target.result.id, store);
-    };
-    req.onerror = function (evt) {
-      console.error("deletePublicationFromBib:", evt.target.errorCode);
-    };
-  }
-
-  /**
-   * @param {number} key
-   * @param {IDBObjectStore=} store
-   */
-  function deletePublication(key, store) {
-    console.log("deletePublication:", arguments);
-
-    if (typeof store == 'undefined')
-      store = getObjectStore(DB_STORE_NAME, 'readwrite');
-
-    // As per spec http://www.w3.org/TR/IndexedDB/#object-store-deletion-operation
-    // the result of the Object Store Deletion Operation algorithm is
-    // undefined, so it's not possible to know if some records were actually
-    // deleted by looking at the request result.
-    var req = store.get(key);
-    req.onsuccess = function(evt) {
-      var record = evt.target.result;
-      console.log("record:", record);
-      if (typeof record == 'undefined') {
-        displayActionFailure("No matching record found");
-        return;
-      }
-      // Warning: The exact same key used for creation needs to be passed for
-      // the deletion. If the key was a Number for creation, then it needs to
-      // be a Number for deletion.
-      req = store.delete(key);
-      req.onsuccess = function(evt) {
-        console.log("evt:", evt);
-        console.log("evt.target:", evt.target);
-        console.log("evt.target.result:", evt.target.result);
-        console.log("delete successful");
-        displayActionSuccess("Deletion successful");
-        displayPubList(store);
-      };
-      req.onerror = function (evt) {
-        console.error("deletePublication:", evt.target.errorCode);
-      };
-    };
-    req.onerror = function (evt) {
-      console.error("deletePublication:", evt.target.errorCode);
-      };
-  }
-
-  function displayActionSuccess(msg) {
-    msg = typeof msg != 'undefined' ? "Success: " + msg : "Success";
-    $('#msg').html('<span class="action-success">' + msg + '</span>');
-  }
-  function displayActionFailure(msg) {
-    msg = typeof msg != 'undefined' ? "Failure: " + msg : "Failure";
-    $('#msg').html('<span class="action-failure">' + msg + '</span>');
-  }
-  function resetActionStatus() {
-    console.log("resetActionStatus ...");
-    $('#msg').empty();
-    console.log("resetActionStatus DONE");
-  }
-
-  function addEventListeners() {
-    console.log("addEventListeners");
-
-    $('#register-form-reset').click(function(evt) {
-      resetActionStatus();
-    });
-
-    $('#add-button').click(function(evt) {
-      console.log("add ...");
-      var title = $('#pub-title').val();
-      var biblioid = $('#pub-biblioid').val();
-      if (!title || !biblioid) {
-        displayActionFailure("Required field(s) missing");
-        return;
-      }
-      var year = $('#pub-year').val();
-      if (year != '') {
-        // Better use Number.isInteger if the engine has EcmaScript 6
-        if (isNaN(year))  {
-          displayActionFailure("Invalid year");
-          return;
-        }
-        year = Number(year);
-      } else {
-        year = null;
-      }
-
-      var file_input = $('#pub-file');
-      var selected_file = file_input.get(0).files[0];
-      console.log("selected_file:", selected_file);
-      // Keeping a reference on how to reset the file input in the UI once we
-      // have its value, but instead of doing that we rather use a "reset" type
-      // input in the HTML form.
-      //file_input.val(null);
-      var file_url = $('#pub-file-url').val();
-      if (selected_file) {
-        addPublication(biblioid, title, year, selected_file);
-      } else if (file_url) {
-        addPublicationFromUrl(biblioid, title, year, file_url);
-      } else {
-        addPublication(biblioid, title, year);
-      }
-
-    });
-
-    $('#delete-button').click(function(evt) {
-      console.log("delete ...");
-      var biblioid = $('#pub-biblioid-to-delete').val();
-      var key = $('#key-to-delete').val();
-
-      if (biblioid != '') {
-        deletePublicationFromBib(biblioid);
-      } else if (key != '') {
-        // Better use Number.isInteger if the engine has EcmaScript 6
-        if (key == '' || isNaN(key))  {
-          displayActionFailure("Invalid key");
-          return;
-        }
-        key = Number(key);
-        deletePublication(key);
-      }
-    });
-
-    $('#clear-store-button').click(function(evt) {
-      clearObjectStore();
-    });
-
-    var search_button = $('#search-list-button');
-    search_button.click(function(evt) {
-      displayPubList();
-    });
-
-  }
-
-  openDb();
-  addEventListeners();
-
-})(); // Immediately-Invoked Function Expression (IIFE)
-
- -

{{ LiveSampleLink('Full_IndexedDB_example', "Test the online live demo") }}

- -

Ver também

- -

Uma leitura adicional para você encontrar mais informações.

- -

Refências

- - - -

Guias e tutoriais

- - diff --git a/files/pt-br/web/api/indexeddb_api/using_indexeddb/index.html b/files/pt-br/web/api/indexeddb_api/using_indexeddb/index.html new file mode 100644 index 0000000000..da14879b31 --- /dev/null +++ b/files/pt-br/web/api/indexeddb_api/using_indexeddb/index.html @@ -0,0 +1,1281 @@ +--- +title: Usando IndexedDB +slug: Web/API/IndexedDB_API/Usando_IndexedDB +tags: + - API IndexedDB Tutorial Avançado +translation_of: Web/API/IndexedDB_API/Using_IndexedDB +--- +
+

IndexedDB é uma forma de armazenar dados no navegador do usuário. Com ele você pode criar aplicações web com possibilidade de fazer query sem necessidade de conexão, suas aplicações podem funcionar tanto online quanto offline. 

+
+ +

Sobre esse documento

+ +

Esse tutorial utiliza a API assíncrona do IndexedDB. Se você não está familiarizado com IndexedDB, você pode ler Conceitos básicos sobre IndexedDB.

+ +

Para a documentação de referência, veja o artigo sobre API IndexedDB, pois nele contém os tipos de objetos utilizados no IndexedDB,  como também métodos da API, tanto síncrona como assíncrona. 

+ +

Padrão básico

+ +

O IndexedDB encoraja o uso do seguinte padrão:

+ +
    +
  1. Abrir um banco de dados.
    2. +
  2. Criar um ObjectStore ao atualizar o banco. 
    3. +
  3. Iniciar uma transação e e faz um request para fazer alguma operação no banco, como adicionar ou obter dados.
    4. +
  4. +
    Esperar a operação ser completada ouvindo algum evento DOM.
    +
    5. +
  5. +
    Fazer algo com o resultado da query (que pode ser obtida pelo objeto request).
    +
    6. +
+ +

OK, então, agora com esses conceitos em mente, nós podemos fazer coisas mais concretas.

+ +

Criando e estruturando o banco

+ +

Pelo fato  da especificação ainda estar evoluindo, as implementações do IndexedDB tem prefixos de navegadores. Os navegadores podem ter implementações diferentes da API IndexedDB até a especificação ser consolidada. Mas uma vez que tudo chegar a um consenso, os navegadores tirarão seus prefixos. Atualmente, algumas implementações removeram o prefixo: Internet Explorer 10, Firefox 16, Chrome 24. Quando eles usam prefixo, navegadores baseados no Gecko usam o prefixo moz, enquanto os navegadores baseados no WebKit usam o prefixo webkit.

+ +

Usando uma versão experimental do IndexedDB

+ +

Se você quiser testar seu código em navegadores que usam prefixo, você pode usar o código abaixo:  

+ +
// Na linha abaixo, você deve incluir os prefixos do navegador que você vai testar.
+window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
+// Não use "var indexedDB = ..." se você não está numa function.
+// Posteriormente, você pode precisar de referências de algum objeto window.IDB*:
+window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
+window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
+// (Mozilla nunca usou prefixo nesses objetos, então não precisamos window.mozIDB*)
+ +

Tome cuidado, implementações prefixadas podem estar com bugs ou implementando especificações antigas. Portanto, não é recomendado usar em produção. É preferível não usar IndexedDB em navegadores antigos:

+ +
if (!window.indexedDB) {
+    window.alert("Seu navegador não suporta uma versão estável do IndexedDB. Alguns recursos não estarão disponíveis.");
+}
+
+ +

Abrindo um banco

+ +

Começamos todo o processo assim:

+ +
// Abrindo o banco de dados
+var request = window.indexedDB.open("DBteste", 3);
+
+ +

Abrir um banco é como qualquer outra operação — Você tem que "requerer (request)".

+ +

A requisição de abertura não abre o banco ou inicia a transação. A chamada da função open() retorna um objeto IDBOpenDBRequest com o resultado (success) ou um erro que você terá que tratar. Muitas outras funções assíncronas no IndexedDB fazem a mesma coisa - retornam um objeto IDBRequest com o resultado ou erro. O resultado para a função open é uma instância de IDBDatabase.

+ +

O segundo parâmetro para o método open é a versão do banco. A versão do banco determina seu schema — os registros no banco e sua estrutura. Se o banco não existe ainda, ele é criado pela operação open, então o evento onupgradeneeded é chamado e você cria o schema do banco nesse evento. Se o banco existe mas você está fornecendo um novo número de versão, o evento onupgradeneeded é chamado imediatamente, permitindo você tratar a atualização do schema. Para mais informações sobre isso veja Updating the version of the database.

+ +
+

O número de versão é um unsigned long long, o que significa que ele pode ver um inteiro muito grande. Isso também significa que você não pode usar float, pois ele será convertido em um inteiro pequeno e a transação pode não acontecer, ou o evento upgradeneeded pode não ser chamado. Então se você usar 2.4 como versão:

+ +
var request = indexedDB.open("DBteste", 2.4); // não faça isso, pois a versão será convertida para 2.
+
+ +

Gerenciando handlers

+ +

A primeira coisa que você vai querer fazer em quase todos os requests é tratar os casos de success e error:

+ +
request.onerror = function(event) {
+  // Fazer algo com request.errorCode!
+};
+request.onsuccess = function(event) {
+  // Fazer algo com request.result!
+};
+ +

Qual das duas funções, onsuccess() ou onerror(),  será chamada? Se tudo correr bem, o evento de sucesso (que é um evento DOM event com propriedade type setada "success") é chamado com request como seu target. Uma vez chamado, a função onsuccess() no request é chamada com o evento de sucesso em seu contexto. Por outro lado, se acontecer algum problema, um evento de erro (que é um evento DOM com a propriedade type setada para "error") é chamado no request. Então a função onerror()  com o evento erro em seu contexto.

+ +

A API IndexedDB é feita para minimizar a necessidade de manipular erros, então você não fará muitos eventos de erro (ao menos, se você usar a API!) No  caso de abrir um banco, portanto, existe algumas condições comuns para eventos de erro. O problema mais comum é o usuário não dar permissão para criar o banco. Um dos principais objetivos do IndexedDB é permitir muitos dados serem armazenados para uso offline. (Para aprender mais sobre o quanto cada navegador pode armazenar, veja Storage limits).  

+ +

Obviamente, navegadores não querem armazenar dados que poluem seu computador, então o navegador mostra uma mensagem ao usuário na primeira vez que um aplicativo tenta abrir o IndexedDB. O usuário pode escolher permitir ou negar acesso. O IndexedDB também é desabilitado no modo privado dos navegadores (ctrl+shift+N no Chrome e ctrl+shift+P no Firefox). Isso acontece porque o intuito do modo privado é não deixar rastros na navegação.

+ +

Agora, assumindo que o usuário aprovou seu request para criar o banco, e você recebeu success; Qual é o próximo passo? O request foi gerado com a chamada de indexedDB.open(), e request.result é uma instância de IDBDatabase, e você definitivamente vai querer armazenar isso para usar depois. Veja abaixo:

+ +
var db;
+var request = indexedDB.open("DBteste");
+request.onerror = function(event) {
+  alert("Você não habilitou minha web app para usar IndexedDB?!");
+};
+request.onsuccess = function(event) {
+  db = request.result;
+};
+
+ +

Tratando Erros

+ +

Como mencionado acima, o evento de erro é chamado quando o request dá erro. Se você quer evitar manipuladores de erro a cada request, você pode adicionar um único manipulador de erro no objeto db, como abaixo:

+ +
db.onerror = function(event) {
+  // Função genérica para tratar os erros de todos os requests desse banco!
+  alert("Database error: " + event.target.errorCode);
+};
+
+ +

Um dos erros mais comuns ao abrir o banco é VER_ERR. Ele indica que a versão do banco existente é maior que a versão que você quer abrir.

+ +

Criando ou atualizando a versão do banco

+ +

Quando você cria um novo banco ou aumenta sua versão, o evento onupgradeneeded será chamado. No manipulador deste evento, você deve criar o objectStore necessário para a versão do banco:

+ +
// Este evento é implementado somente em navegadores mais recentes
+request.onupgradeneeded = function(event) {
+  var db = event.target.result;
+
+  // cria um objectStore para esse banco
+  var objectStore = db.createObjectStore("nome", { keyPath: "minhaChave" });
+};
+ +

Neste caso, o banco já terá objectStores de suas versões anteriores, então você não terá que criar esses objectStores de novo. Você somente precisará criar um novo objectStore qualquer, ou deletar objectStores da versão anterior que não serão utilizados. Se você precisa mudar um objectStore existente (mudar o keyPath, por exemplo),  então você precisa deletar o objectStore antigo e criá-lo novamente com as novas opções. (Note que isso irá deletar a informação no objectStore! Se você precisa salvar a informação, você deve ler isso e salvá-lo em algum lugar antes de atualizar o banco.)

+ +

Blink/Webkit suporta a versão atual da especificação, nas versões do Chrome 23+ e Opera 17+; IE10+ também suporta. Outros motores e versões antigas não implementam a versão atual da especificação e não suportam a assinatura indexedDB.open(name, version).onupgradeneeded ainda.  Para mais informação sobre como atualizar a versão do banco em Webkit/Blink, veja IDBDatabase reference article.

+ +

Estruturando o banco

+ +

Agora a estrutura do banco. IndexedDB usa "armazens de objetos" em vez de tabelas, e um único banco de dados pode conter qualquer número de "armazem de objetos". Sempre que um valor é armazenado num objectStore, ele é associado a uma chave. Existe várias maneiras diferentes de uma chave ser mostrada, dependendo do que o objectStore usa, um key path ou key generator.

+ +

A tabela abaixo mostra as direfentes chaves suportadas:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Key Path (keyPath)Key Generator (autoIncrement)Description
NãoNãoEste objectStore pode ter qualquer tipo de valor primitivo como número ou string. Você deve suprir uma chave separada sempre que adicionar um novo valor.
SimNãoEste objectStore pode simplesmente armazenar objetos JavaScript. O objeto deve ter uma propriedade com o mesmo nome do key path.
NãoSimEste objectStore pode possuir qualquer tipo de valor. A chave é gerada para você, automaticamente, ou você pode suprir uma chave separada, caso utilize uma chave específica.
SimSimEste objectStore suporta somente objetos JavaScript. Normalmente uma chave é gerada e o valor dela é armazenado no objeto em uma propriedade com o mesmo nome da key path. Portanto, se a propriedade já existe, o valor dela será usado como chave, em vez do valor gerado.
+ +

Você também pode criar índices em qualquer objectStore. Um indice deixa você olhar os valores armazenados no objectStore usando o valor de uma propriedade do objectStore, em vez de sua chave.

+ +

Adicionalmente, indices tem a habilidade de forçar restrições simples nos dados armazenados. Setando uma flag única quando criar o índice, reforça que dois objetos são armazenados contendo o mesmo valor para o key path do índice. Então, por exemplo, se você tem um objeto armazenado que tem um conjunto de pessoas, e você quer ter certeza que ninguém tera o mesmo e-mail, você pode usar um índice com flag única para forçar isso.

+ +

Isso soa meio confuso, mas este exemplo pode iluminar o conceito. Primeiro, vamos definir alguns dados a serem usados no exemplo:

+ +
// Isso é o que os dados de nossos clientes será.
+const DadosClientes = [
+  { ssn: "444-44-4444", nome: "Bill", idade: 35, email: "bill@company.com" },
+  { ssn: "555-55-5555", nome: "Donna", idade: 32, email: "donna@home.org" }
+];
+
+ +

Agora  vamos ver  ccomo criar um IndexedDB para armazenar nossos dados:

+ +
const dbName = "clientes";
+
+var request = indexedDB.open(dbName, 2);
+
+request.onerror = function(event) {
+  // Tratar erros.
+};
+request.onupgradeneeded = function(event) {
+  var db = event.target.result;
+
+  // Cria um objectStore para conter a informação sobre nossos clientes. Nós vamos
+  // usar "ssn" como key path porque sabemos que é único;
+  var objectStore = db.createObjectStore("clientes", { keyPath: "ssn" });
+
+  // Cria um índice para buscar clientes pelo nome. Podemos ter nomes
+  // duplicados, então não podemos usar como índice único.
+  objectStore.createIndex("nome", "nome", { unique: false });
+
+  // Cria um índice para buscar clientes por email. Queremos ter certeza
+  // que não teremos 2 clientes com o mesmo e-mail;
+  objectStore.createIndex("email", "email", { unique: true });
+
+  // Usando transação oncomplete para afirmar que a criação do objectStore
+  // é terminada antes de adicionar algum dado nele.
+  objectStore.transaction.oncomplete = function(event) {
+    // Armazenando valores no novo objectStore.
+    var clientesObjectStore = db.transaction("clientes", "readwrite").objectStore("clientes");
+    for (var i in DadosClientes) {
+      clientesObjectStore.add(DadosClientes[i]);
+    }
+  }
+};
+
+ +

Como falamos antes, onupgradeneeded é o único lugar onde você pode alterar a estrutura do banco. Nele você pode criar e deletar objectStores e construir ou remover índices.

+ +
Armazens de objetos são criados com uma única chamada de createObjectStore(). O método pega o nome do armazem e um objeto parâmetro. Mesmo que o objeto parâmetro seja opcional, ele é muito importante porque ele deixa você definir propriedades importantes e ajustar tipos de dados que você quer criar. No nosso caso, nós obtemos um objectStore chamado "clientes" e definimos um keyPath, que é a propriedade que faz um objeto individual ser único no banco. Essa propriedade, nesse exemplo, é "ssn", que simboliza o cpf (social security number), que é único. O "ssn" deve ser apresentado em cada objeto armazenado no objectStore. 
+ +

Nós também criamos um índice chamado "nome" ligado à propriedade nome. Assim como o createObjectStore(), o createIndex() tem um parâmetro opcional options que cuida do tipo de índice que você quer criar. Adicionando objetos que não tem a propriedade nome terá sucesso, porém esses objetos não aparecerão no índice "nome".

+ +

Nós podemos obter os objetos de clientes armazenados usando os ssn da objectStore diretamente, ou usando os nomes usados no índice. Para aprender como isso é feito, veja a seção usando um índice.

+ +

Usando um key generator

+ +

Setando uma flag autoIncrement ao criar o objectStore habilitará o key generator. Por padrão ele não é setado.

+ +

Com o key generator, a chave será gerada automaticamente quando você adicionar algum valor no objectStore. O atual número do key generator é sempre setado 1 quando a primeira key generator do objectStore é criada. Basicamente a próxima chave recebe o incremento de 1. O número atual da key generator nunca decresce,  a não ser se alguma operação do banco for revertida, como numa transação abortada, por exemplo. No entanto, deletar um registro ou limpar todos os registros nunca afeta o key generator dos objectStores.

+ +

Nós podemos criar outro objectStore com o key generator como abaixo:

+ +
// Abrindo o indexedDB.
+var request = indexedDB.open(dbName, 3);
+
+request.onupgradeneeded = function (event) {
+
+    var db = event.target.result;
+
+    // Criando outro objeto chamado "names" com o autoIncrement setado.
+    var objStore = db.createObjectStore("names", { autoIncrement : true });
+
+    // Porque "names" tem o the key generator, a chave para o nome é gerada automaticamente.
+    // Os registros adicionados serão assim:
+    // key : 1 => value : "Bill"
+    // key : 2 => value : "Donna"
+    for (var i in DadosClientes) {
+        objStore.add(DadosClientes[i].nome);
+    }
+}
+ +

Para mais detalhes veja "W3C Key Generators".

+ +

Adicionando, obtendo e removendo dados

+ +

Antes de fazer qualquer coisa em um novo banco, você precisa iniciar uma transação. Transações estão no objeto database, e você tem que especificar qual objectStore você quer na transaction. Uma vez que você está dentro da transação, você pode acessar os objectStores  com seus dados e fazer os requests. Depois, você precisa decidir se você vai fazer mudanças no banco ou se você simplesmente quer ler esses dados. Transações tem três modos disponíveis: readonly, readwrite, and versionchange.

+ +

Para mudar o "schema" ou estrutura do banco — o que envolve criar ou deletar objectStores ou índices — a transação deve ser em modo versionchange. Esta transação é aberta chamando o método {{domxref("IDBFactory.open")}} especificando a  version. (Em navegadores com WebKit que não tem a ultima especificação implementada, o método {{domxref("IDBFactory.open")}} tem apenas um parâmetro, o nome do banco; então você deve chamar {{domxref("IDBVersionChangeRequest.setVersion")}} para estabelecer uma transação versionchange.)

+ +

Para ler os registros de um objectStore existente, a transação pode ser tanto readonly quanto readwrite. Para fazer mudanças em um objectStore existente, a transação deve ser em modo readwrite. Você abre essas transações usando {{domxref("IDBDatabase.transaction")}}. O método aceita dois parâmetros: o storeNames (o escopo, definido como um array de objectStores que você quer acessar) e o modo (readonly or readwrite) da transação. O método retorna o objeto detransação contendo o método {{domxref("IDBIndex.objectStore")}}, que você pode usar para acessar seu objectStore. Por padrão, quando nenhum modo é especificado, a transação é aberta no modo readonly.

+ +

Você pode deixar o acesso aos dados mais rápido usando o escopo correto e o modo correto de transação. Aqui vai algumas dicas:

+ + + +

Adicionando dados no banco

+ +

Se você acabou de criar o banco, então você provavelmente quer escrever algo nele. Veja abaixo:

+ +
var transaction = db.transaction(["clientes"], "readwrite");
+// Nota: Implementações mais antigas usam uma versão IDBTransaction.READ_WRITE antiga em vez de "readwrite".
+// Então, para suportar versões antigas, escreva:
+// var transaction = db.transaction(["clientes"], IDBTransaction.READ_WRITE);
+ +

A função transaction() tem dois argumentos (opcionais) e retorna um objeto de transação. O primeiro argumento é uma lista de objectStores que serão trabalhados na transação. Você pode passar um array vazio se você quer uma transação com todos os objectStores, mas não faça isso pois a especificação diz que um array vazio pode gerar um erro InvalidAccessError. Se você não especificar nada no segundo parâmetro, você tem uma transação read-only. Se você quer escrever no banco, use "readwrite".

+ +

Agora que você tem uma transação, você precisa entender seu tempo de uso. Transações são amarradas a um evento. Se você faz uma transação fora de um evento, ela ficará inativa. A única maneira de manter uma transação ativa é fazer um request nela. Quando o request acabar você terá a oportunidade de extender a transação durante o callback. Se você tentar extender uma transação dentro de um evento, então ela tornará inativa. Se existir requests pendentes, a transação continua ativa. O tempo de vida de uma transação é realmente simples mas deve ser usada em um curto espaço de tempo. Outros exemplos poderão ajudá-lo. Se você começar a ver TRANSACTION_INACTIVE_ERR error então você está fazendo algo errado.

+ +

Transações podem receber eventos DOM de três tipos diferentes: error, abort, e complete. Nós falamos sobre o error, ou seja, a transação recebe um error sempre que o request gerar erro. Um ponto mais sutil é que o comportamento padrão de um erro é abortar a transação na qual ele estava. A menos que você manipule o erro chamando preventDefault() e fazendo algo depois, a transaçaõ inteira será desfeita. Este design força você a pensar sobre manipulação de erros, mas você pode sempre adicionar um manipulador de todos os erros se a manipulação separada estiver complicada. Se você não tratar o erro ou chamar abort() na transação, então a transação é desfeita (roll back) e o evento abort é chamado. Por outro lado, depois de todo request completado, você tem um evento complete. Se você fazer várias operações no banco, então seguir as operações de transações pode ser um caminho a seguir.

+ +

Agora que você tem uma transação, você precisará obter um objectStore dela. Transações somente deixam você obter um objectStore citado na transação. Então você pode adicionar os dados que precisa.

+ +
// Faz algo após a inserção dos dados.
+transaction.oncomplete = function(event) {
+  alert("Pronto!");
+};
+
+transaction.onerror = function(event) {
+  // Não esquecer de tratar os erros!
+};
+
+var objectStore = transaction.objectStore("clientes");
+for (var i in DadosClientes) {
+  var request = objectStore.add(DadosClientes[i]);
+  request.onsuccess = function(event) {
+    // event.target.result == DadosClientes[i].ssn;
+  };
+}
+ +

O result de um request gerado de uma chamada de add() é a chave do valor  que foi adicionado. Então neste caso, ele deve ser igual ao valor do ssn do objeto que foi adicionado, desde que o objeto use o ssn como key path. Note que a função add() não deixa nenhum objeto ser adicionado com a mesma chave. Se você está tentando modificar um registro existente, você deve usar o put(), como explica a seção  {{ anch("Updating an entry in the database") }}.

+ +

Removendo dados do banco

+ +

Para remoção o código é parecido:

+ +
var request = db.transaction(["clientes"], "readwrite")
+                .objectStore("clientes")
+                .delete("444-44-4444");
+request.onsuccess = function(event) {
+  // Pronto!
+};
+ +

Obtendo dados do banco

+ +

Agora que o banco tem algumas informações nele, você pode obtê-las de diferentes maneiras. Primeiro, um get() simples. Você precisa informar a chave do valor a ser obtido:

+ +
var transaction = db.transaction(["clientes"]);
+var objectStore = transaction.objectStore("clientes");
+var request = objectStore.get("444-44-4444");
+request.onerror = function(event) {
+  // Tratar erro!
+};
+request.onsuccess = function(event) {
+  // Fazer algo com request.result!
+  alert("O nome do SSN 444-44-4444 é " + request.result.name);
+};
+ +

Veja agora de maneira resumida:

+ +
db.transaction("clientes").objectStore("clientes").get("444-44-4444").onsuccess = function(event) {
+  alert("O nome do SSN 444-44-4444 é " + request.result.name);
+};
+ +

Viu como funciona? Desde que exista um objectStore, você pode evitar passar uma lista de objectStores que precisa na transação e passar apenas o nome como string. Você também pode ler do banco, apenas, então não precisará de uma transação "readwrite". Chamando transaction() com nenhum modo especificado, você terá uma transação "readonly". Outra consideração é que você não necessita salvar o request em uma variável. Desde que o evento DOM tenha o target que você precisará para obter a propriedade result.

+ +
+

Note: Você pode deixar o acesso aos dados mais rápido limitando o escopo e o modo de transação. Veja algumas dicas:

+ + +
+ +

Atualizando um registro no banco

+ +

Agora que obtemos algum dado, atualizá-ls é inserí-los novamente no IndexedDB é bem simples. Vamos atualizar o exemplo anterior:

+ +
var objectStore = db.transaction(["clientes"], "readwrite").objectStore("clientes");
+var request = objectStore.get("444-44-4444");
+request.onerror = function(event) {
+  // Tratar erro
+};
+request.onsuccess = function(event) {
+  // Obter os valores antigos
+  var data = request.result;
+
+  // atualizar algum dado
+  data.age = 42;
+
+  // Atulizar esse dado no banco
+  var requestUpdate = objectStore.put(data);
+   requestUpdate.onerror = function(event) {
+     // Tratar erro
+   };
+   requestUpdate.onsuccess = function(event) {
+     // Sucesso na atualização \o/
+   };
+};
+ +

Criamos uma objectStore e obtemos um cliente dele, identificado pelo ssn (444-44-4444). Nós atualizamos o objeto, passando-o como parâmetro de um método put de outro request (requestUpdate) sobrescrevendo o valor antigo.

+ +
+

Note que neste caso nós temos que especificar a transação readwrite porque nós queremos escrever no banco, não somente ler os dados dele.

+
+ +

Usando um cursor

+ +

Ao usar o método get() você precisa saber a chave do objeto que deseja obter. Se você quer passear entre todos os valores do seu objectStore, então você pode usar um cursor. Veja:

+ +
var objectStore = db.transaction("cliente").objectStore("cliente");
+
+objectStore.openCursor().onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    alert("O nome do SSN " + cursor.key + " é " + cursor.value.name);
+    cursor.continue();
+  }
+  else {
+    alert("Não existe mais registros!");
+  }
+};
+ +

A função openCursor() tem vários argumentos. Primeiro, você pode limitar o número de itens obtidos usando uma chave que veremos logo abaixo. Segundo, você pode especificar a direção que deseja iterar. No exemplo acima, nós estamos iterando em todos os objetos em ordem ascendente. O callback de sucesso para cursor é um pouco especial. O objeto cursor já é o result do request (acima nós usamos event.target.result). Então a chave atual e o valor pode ser encontrado na propriedade key e value do objeto cursor. Se você quer manter adiante, então você usa o método continue(). Quando você chegar ao fim dos dados (ou se não existem registros encontrados no openCursor()) você ainda tem um callback de sucesso, mas a propriedade result fica undefined.

+ +

Um padrão comum para cursores é obter todos os objetos em um objectStore e adicioná-los a um array como este:

+ +
var clientes = [];
+
+objectStore.openCursor().onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    clientes.push(cursor.value);
+    cursor.continue();
+  }
+  else {
+    alert("Todos os clientes: " + clientes);
+  }
+};
+ +
+

Note: Mozilla também implementou o método getAll() para ser usado nesse caso (e getAllKeys(), que está atualmente dentro da preferência do dom.indexedDB.experimental em about:config). Estes métodos não são parte do padrão IndexedDB, então eles podem desaparecer no futuro. Nós adicionamos porque achamos útil. O código abaixo faz o mesmo que o código acima:

+ +
objectStore.getAll().onsuccess = function(event) {
+  alert("Todos os clientes: " + event.target.result);
+};
+ +

Existe um custo de performance associado com a propriedade value do cursor, porque o objeto é criado de forma lenta. Quando você usa getAll() por exemplo, Gecko deve criar todos os objetos de uma vez. Se você está somente interessado em cada chave, é muito melhor usar o cursor do que usar o getAll(). Se você está tentando obter um array de todos os objetos, então é melhor usar o getAll().

+
+ +

Usando um índice

+ +

Armazenar dados de um cliente usando o SSN como chave é lógico pois o SSN identifica o cliente de forma única. Se você precisa obter um cliente pelo seu nome, portanto, você precisará iterar todos os registros no banco e comparar os nomes até achar o que você procura. Buscar dessa maneira é algo lento, então criamos um índice.

+ +
var index = objectStore.index("nome");
+index.get("John").onsuccess = function(event) {
+  alert("O SSN de John é " + event.target.result.ssn);
+};
+ +

O cursor "nome" não é único, então pode existir mais de um registro com o nome igual a "John". Neste caso você sempre obtem o registro com a chave de menor valor.

+ +

Se você precisa acessar todos os registros retornados, você pode usar um cursor. Você pode abrir dois tipos de cursores. Um cursor normal mapeia o índice ao objeto na objectStore. Uma cursor-chave mapeia o a propriedade índice à chave usada para armazenar o objeto. As diferenças são ilustradas abaixo:

+ +
// Usando um cursor normal para obter todos os objetos
+index.openCursor().onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // cursor.key é um nome, como "Bill", e cursor.value é o objeto inteiro.
+    alert("Nome: " + cursor.key + ", SSN: " + cursor.value.ssn + ", email: " + cursor.value.email);
+    cursor.continue();
+  }
+};
+
+// Usando um cursor-chave para obter todos os objetos
+index.openKeyCursor().onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // cursor.key é o nome, como "Bill", e cursor.value é o SSN (chave).
+    // Não tem como obter o resto do objeto
+    alert("Nome: " + cursor.key + ", SSN: " + cursor.value);
+    cursor.continue();
+  }
+};
+ +

Especificando o número e a direção dos cursores

+ +

Se você gostaria de limitar o número de valores retornados pelo cursor, você pode usar um objeto IDBKeyRange e passar isso como o primeiro argumento ao openCursor() ou openKeyCursor(). Você pode fazer um key range que permite um único valor, ou valores acima ou abaixo do especificado. O limite pode ser fechado (o key range inclui os valores dados) ou aberto (o key range não inclue os valores dados). Veja como funciona:

+ +
// Somente se for igual "Donna"
+var singleKeyRange = IDBKeyRange.only("Donna");
+
+// Combinações menores que "Bill", incluindo "Bill"
+var lowerBoundKeyRange = IDBKeyRange.lowerBound("Bill");
+
+// Combinações menores que "Bill", sem incluir "Bill"
+var lowerBoundOpenKeyRange = IDBKeyRange.lowerBound("Bill", true);
+
+// Combinações maiores que Donna, não incluindo "Donna"
+var upperBoundOpenKeyRange = IDBKeyRange.upperBound("Donna", true);
+
+// Combinações entre "Bill" e "Donna", sem incluir "Donna"
+var boundKeyRange = IDBKeyRange.bound("Bill", "Donna", false, true);
+
+// Para usar qualquer um desses key ranges, basta passar como primeiro parâmetro de openCursor()/openKeyCursor()
+index.openCursor(boundKeyRange).onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // Faz algo com o que encontrar
+    cursor.continue();
+  }
+};
+ +

As vezes você pode querer iterar em ordem decrescente, em vez de crescente, alterando o segundo parâmetro de openCursor():

+ +
objectStore.openCursor(boundKeyRange, "prev").onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // Prev indica ordem decrescente
+    cursor.continue();
+  }
+};
+ +

Se você apenas quer especificar a ordem sem key range, é só passar null no primeiro parâmetro:

+ +
objectStore.openCursor(null, "prev").onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // Faça algo com os resultados.
+    cursor.continue();
+  }
+};
+ +

Uma vez que o índice "nome" não é único, pode existir várias entradas onde o nome é o mesmo. Isso não acontece com objectStores porque a chave deve ser sempre única. Se você deseja filtrar valores duplicados numa iteração do cursor, você pode passar nextunique (ou prevunique se quiser decrescer) como parâmetro de direção. Quando nextunique ou prevunique é usado, o registro com menor chave é retornado.

+ +
index.openKeyCursor(null, "nextunique").onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // Faça algo com os registros.
+    cursor.continue();
+  }
+};
+ +

Veja "IDBCursor Constants" para parâmetros válidos.

+ +

Mudança de versão quando a web app está aberta em outra aba.

+ +

Quando sua web app muda a versão você precisa considerar o que vai acontecer se o usuário está na versão antiga em uma aba, e carrega a versão nova na outra. Quando você chamar o open() com a versão mais nova, um evento onblocked  é chamado até que a aba da versão antiga seja fechada ou recarregada. Veja abaixo:

+ +
var openReq = mozIndexedDB.open("DBteste", 2);
+
+openReq.onblocked = function(event) {
+  // Se existe outra aba com a versão antiga
+  alert("Existe uma versão antiga da web app aberta em outra aba, feche-a por favor!");
+};
+
+openReq.onupgradeneeded = function(event) {
+  // Se estiver tudo fechado, então faça as devidas alterações
+  db.createObjectStore(/* ... */);
+  useDatabase(db);
+}
+
+openReq.onsuccess = function(event) {
+  var db = event.target.result;
+  useDatabase(db);
+  return;
+}
+
+function useDatabase(db) {
+  // Esteja certo de que adicionou um evento para notificar se a página muda a versão
+  // Nós devemos fechar o banco. Isso permite à outra página ser atualizada
+  // Se você não fizer isso a atualização não acontecerá até fechar as abas.
+  db.onversionchange = function(event) {
+    db.close();
+    alert("Uma nova versão desta web app está pronta. Atualiza, por favor!");
+  };
+
+  // Fazer algo com os bancos
+}
+
+ +

Segurança

+ +

IndexedDB usa o princípio de mesma origem, o que significa que o banco só será acessado pelo site que o criou.

+ +

É importante notar que o IndexedDB não funciona para conteúdo carregado em um frame de outro site (seja {{ HTMLElement("frame") }} ou {{ HTMLElement("iframe") }}. Esta é uma política de segurança e privacidade análoga ao bloqueio de cookies de terceiros. Para mais detalhes, veja {{ bug(595307) }}.

+ +

Alerta sobre fechar o navegador

+ +

Quando o navegador é fechado, qualquer transação pendente no IndexedDB será abortada (silenciosamente) — ele não vai completar, nem chamar o evento de erro.  Uma vez que o usuário pode sair do navegador, em qualquer momento, isto significa que você não pode confiar em qualquer transação específica para completar ou para saber que ela não foi concluída. Existem várias implicações nesse comportamento.

+ +

Primeiro, você deve ter o cuidado de sempre deixar seu banco de dados em um estado consistente, no final de cada transação. Por exemplo, suponha que você está usando IndexedDB para armazenar uma lista de itens que permitem ao usuário editar. Você salvar a lista após a edição, limpando o armazenamento de objetos e, em seguida, escrever a nova lista. Se você limpar o armazenamento de objetos em uma transação e escrever a nova lista em outra transação, há um perigo de que o navegador irá fechar após a limpeza de dados e antes da gravação, deixando-o com um banco de dados vazio. Para evitar isso, você deve combinar tanto a limpeza quanto a gravação em uma única transação.

+ +

Em segundo lugar, você nunca deve amarrar as operações de banco de dados ao evento unload. Se o evento unload é acionado pelo fechamento do navegador, todas as transações criadas no unload nunca serão concluídas. Uma abordagem intuitiva para manter algumas informações em sessões do navegador é lê-la a partir do banco de dados quando o navegador (ou uma determinada página) é aberta, atualizá-la assim que o usuário interagir com o navegador, e depois salvá-lo para o banco de dados quando o navegador (ou página) será fechada. No entanto, isso não vai funcionar. As transações de banco de dados será criado no unload, mas como elas são assíncronas, serão abortadas antes que eles possam executar.

+ +

De fato, não existe uma maneira de garantir que as transações no IndexedDBserão completadas, mesmo com o fechamento padrão do navegador. Ver {{ bug(870645) }}.

+ +

Exemplo de IndexedDB

+ +

HTML

+ +
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
+
+    <h1>IndexedDB Demo: storing blobs, e-publication example</h1>
+    <div class="note">
+      <p>
+        Works and tested with:
+      </p>
+      <div id="compat">
+      </div>
+    </div>
+
+    <div id="msg">
+    </div>
+
+    <form id="register-form">
+      <table>
+        <tbody>
+          <tr>
+            <td>
+              <label for="pub-title" class="required">
+                Title:
+              </label>
+            </td>
+            <td>
+              <input type="text" id="pub-title" name="pub-title" />
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <label for="pub-biblioid" class="required">
+                Bibliographic ID:<br/>
+                <span class="note">(ISBN, ISSN, etc.)</span>
+              </label>
+            </td>
+            <td>
+              <input type="text" id="pub-biblioid" name="pub-biblioid"/>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <label for="pub-year">
+                Year:
+              </label>
+            </td>
+            <td>
+              <input type="number" id="pub-year" name="pub-year" />
+            </td>
+          </tr>
+        </tbody>
+        <tbody>
+          <tr>
+            <td>
+              <label for="pub-file">
+                File image:
+              </label>
+            </td>
+            <td>
+              <input type="file" id="pub-file"/>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <label for="pub-file-url">
+                Online-file image URL:<br/>
+                <span class="note">(same origin URL)</span>
+              </label>
+            </td>
+            <td>
+              <input type="text" id="pub-file-url" name="pub-file-url"/>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+
+      <div class="button-pane">
+        <input type="button" id="add-button" value="Add Publication" />
+        <input type="reset" id="register-form-reset"/>
+      </div>
+    </form>
+
+    <form id="delete-form">
+      <table>
+        <tbody>
+          <tr>
+            <td>
+              <label for="pub-biblioid-to-delete">
+                Bibliographic ID:<br/>
+                <span class="note">(ISBN, ISSN, etc.)</span>
+              </label>
+            </td>
+            <td>
+              <input type="text" id="pub-biblioid-to-delete"
+                     name="pub-biblioid-to-delete" />
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <label for="key-to-delete">
+                Key:<br/>
+                <span class="note">(for example 1, 2, 3, etc.)</span>
+              </label>
+            </td>
+            <td>
+              <input type="text" id="key-to-delete"
+                     name="key-to-delete" />
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      <div class="button-pane">
+        <input type="button" id="delete-button" value="Delete Publication" />
+        <input type="button" id="clear-store-button"
+               value="Clear the whole store" class="destructive" />
+      </div>
+    </form>
+
+    <form id="search-form">
+      <div class="button-pane">
+        <input type="button" id="search-list-button"
+               value="List database content" />
+      </div>
+    </form>
+
+    <div>
+      <div id="pub-msg">
+      </div>
+      <div id="pub-viewer">
+      </div>
+      <ul id="pub-list">
+      </ul>
+    </div>
+
+ +

CSS Content

+ +
body {
+  font-size: 0.8em;
+  font-family: Sans-Serif;
+}
+
+form {
+  background-color: #cccccc;
+  border-radius: 0.3em;
+  display: inline-block;
+  margin-bottom: 0.5em;
+  padding: 1em;
+}
+
+table {
+  border-collapse: collapse;
+}
+
+input {
+  padding: 0.3em;
+  border-color: #cccccc;
+  border-radius: 0.3em;
+}
+
+.required:after {
+  content: "*";
+  color: red;
+}
+
+.button-pane {
+  margin-top: 1em;
+}
+
+#pub-viewer {
+  float: right;
+  width: 48%;
+  height: 20em;
+  border: solid #d092ff 0.1em;
+}
+#pub-viewer iframe {
+  width: 100%;
+  height: 100%;
+}
+
+#pub-list {
+  width: 46%;
+  background-color: #eeeeee;
+  border-radius: 0.3em;
+}
+#pub-list li {
+  padding-top: 0.5em;
+  padding-bottom: 0.5em;
+  padding-right: 0.5em;
+}
+
+#msg {
+  margin-bottom: 1em;
+}
+
+.action-success {
+  padding: 0.5em;
+  color: #00d21e;
+  background-color: #eeeeee;
+  border-radius: 0.2em;
+}
+
+.action-failure {
+  padding: 0.5em;
+  color: #ff1408;
+  background-color: #eeeeee;
+  border-radius: 0.2em;
+}
+
+.note {
+  font-size: smaller;
+}
+
+.destructive {
+  background-color: orange;
+}
+.destructive:hover {
+  background-color: #ff8000;
+}
+.destructive:active {
+  background-color: red;
+}
+
+ +

 

+ +

JavaScript Content

+ +
(function () {
+  var COMPAT_ENVS = [
+    ['Firefox', ">= 16.0"],
+    ['Google Chrome',
+     ">= 24.0 (you may need to get Google Chrome Canary), NO Blob storage support"]
+  ];
+  var compat = $('#compat');
+  compat.empty();
+  compat.append('<ul id="compat-list"></ul>');
+  COMPAT_ENVS.forEach(function(val, idx, array) {
+    $('#compat-list').append('<li>' + val[0] + ': ' + val[1] + '</li>');
+  });
+
+  const DB_NAME = 'mdn-demo-indexeddb-epublications';
+  const DB_VERSION = 1; // Use a long long for this value (don't use a float)
+  const DB_STORE_NAME = 'publications';
+
+  var db;
+
+  // Used to keep track of which view is displayed to avoid uselessly reloading it
+  var current_view_pub_key;
+
+  function openDb() {
+    console.log("openDb ...");
+    var req = indexedDB.open(DB_NAME, DB_VERSION);
+    req.onsuccess = function (evt) {
+      // Better use "this" than "req" to get the result to avoid problems with
+      // garbage collection.
+      // db = req.result;
+      db = this.result;
+      console.log("openDb DONE");
+    };
+    req.onerror = function (evt) {
+      console.error("openDb:", evt.target.errorCode);
+    };
+
+    req.onupgradeneeded = function (evt) {
+      console.log("openDb.onupgradeneeded");
+      var store = evt.currentTarget.result.createObjectStore(
+        DB_STORE_NAME, { keyPath: 'id', autoIncrement: true });
+
+      store.createIndex('biblioid', 'biblioid', { unique: true });
+      store.createIndex('title', 'title', { unique: false });
+      store.createIndex('year', 'year', { unique: false });
+    };
+  }
+
+  /**
+   * @param {string} store_name
+   * @param {string} mode either "readonly" or "readwrite"
+   */
+  function getObjectStore(store_name, mode) {
+    var tx = db.transaction(store_name, mode);
+    return tx.objectStore(store_name);
+  }
+
+  function clearObjectStore(store_name) {
+    var store = getObjectStore(DB_STORE_NAME, 'readwrite');
+    var req = store.clear();
+    req.onsuccess = function(evt) {
+      displayActionSuccess("Store cleared");
+      displayPubList(store);
+    };
+    req.onerror = function (evt) {
+      console.error("clearObjectStore:", evt.target.errorCode);
+      displayActionFailure(this.error);
+    };
+  }
+
+  function getBlob(key, store, success_callback) {
+    var req = store.get(key);
+    req.onsuccess = function(evt) {
+      var value = evt.target.result;
+      if (value)
+        success_callback(value.blob);
+    };
+  }
+
+  /**
+   * @param {IDBObjectStore=} store
+   */
+  function displayPubList(store) {
+    console.log("displayPubList");
+
+    if (typeof store == 'undefined')
+      store = getObjectStore(DB_STORE_NAME, 'readonly');
+
+    var pub_msg = $('#pub-msg');
+    pub_msg.empty();
+    var pub_list = $('#pub-list');
+    pub_list.empty();
+    // Resetting the iframe so that it doesn't display previous content
+    newViewerFrame();
+
+    var req;
+    req = store.count();
+    // Requests are executed in the order in which they were made against the
+    // transaction, and their results are returned in the same order.
+    // Thus the count text below will be displayed before the actual pub list
+    // (not that it is algorithmically important in this case).
+    req.onsuccess = function(evt) {
+      pub_msg.append('<p>There are <strong>' + evt.target.result +
+                     '</strong> record(s) in the object store.</p>');
+    };
+    req.onerror = function(evt) {
+      console.error("add error", this.error);
+      displayActionFailure(this.error);
+    };
+
+    var i = 0;
+    req = store.openCursor();
+    req.onsuccess = function(evt) {
+      var cursor = evt.target.result;
+
+      // If the cursor is pointing at something, ask for the data
+      if (cursor) {
+        console.log("displayPubList cursor:", cursor);
+        req = store.get(cursor.key);
+        req.onsuccess = function (evt) {
+          var value = evt.target.result;
+          var list_item = $('<li>' +
+                            '[' + cursor.key + '] ' +
+                            '(biblioid: ' + value.biblioid + ') ' +
+                            value.title +
+                            '</li>');
+          if (value.year != null)
+            list_item.append(' - ' + value.year);
+
+          if (value.hasOwnProperty('blob') &&
+              typeof value.blob != 'undefined') {
+            var link = $('<a href="' + cursor.key + '">File</a>');
+            link.on('click', function() { return false; });
+            link.on('mouseenter', function(evt) {
+                      setInViewer(evt.target.getAttribute('href')); });
+            list_item.append(' / ');
+            list_item.append(link);
+          } else {
+            list_item.append(" / No attached file");
+          }
+          pub_list.append(list_item);
+        };
+
+        // Move on to the next object in store
+        cursor.continue();
+
+        // This counter serves only to create distinct ids
+        i++;
+      } else {
+        console.log("No more entries");
+      }
+    };
+  }
+
+  function newViewerFrame() {
+    var viewer = $('#pub-viewer');
+    viewer.empty();
+    var iframe = $('<iframe />');
+    viewer.append(iframe);
+    return iframe;
+  }
+
+  function setInViewer(key) {
+    console.log("setInViewer:", arguments);
+    key = Number(key);
+    if (key == current_view_pub_key)
+      return;
+
+    current_view_pub_key = key;
+
+    var store = getObjectStore(DB_STORE_NAME, 'readonly');
+    getBlob(key, store, function(blob) {
+      console.log("setInViewer blob:", blob);
+      var iframe = newViewerFrame();
+
+      // It is not possible to set a direct link to the
+      // blob to provide a mean to directly download it.
+      if (blob.type == 'text/html') {
+        var reader = new FileReader();
+        reader.onload = (function(evt) {
+          var html = evt.target.result;
+          iframe.load(function() {
+            $(this).contents().find('html').html(html);
+          });
+        });
+        reader.readAsText(blob);
+      } else if (blob.type.indexOf('image/') == 0) {
+        iframe.load(function() {
+          var img_id = 'image-' + key;
+          var img = $('<img id="' + img_id + '"/>');
+          $(this).contents().find('body').html(img);
+          var obj_url = window.URL.createObjectURL(blob);
+          $(this).contents().find('#' + img_id).attr('src', obj_url);
+          window.URL.revokeObjectURL(obj_url);
+        });
+      } else if (blob.type == 'application/pdf') {
+        $('*').css('cursor', 'wait');
+        var obj_url = window.URL.createObjectURL(blob);
+        iframe.load(function() {
+          $('*').css('cursor', 'auto');
+        });
+        iframe.attr('src', obj_url);
+        window.URL.revokeObjectURL(obj_url);
+      } else {
+        iframe.load(function() {
+          $(this).contents().find('body').html("No view available");
+        });
+      }
+
+    });
+  }
+
+  /**
+   * @param {string} biblioid
+   * @param {string} title
+   * @param {number} year
+   * @param {string} url the URL of the image to download and store in the local
+   *   IndexedDB database. The resource behind this URL is subjected to the
+   *   "Same origin policy", thus for this method to work, the URL must come from
+   *   the same origin as the web site/app this code is deployed on.
+   */
+  function addPublicationFromUrl(biblioid, title, year, url) {
+    console.log("addPublicationFromUrl:", arguments);
+
+    var xhr = new XMLHttpRequest();
+    xhr.open('GET', url, true);
+    // Setting the wanted responseType to "blob"
+    // http://www.w3.org/TR/XMLHttpRequest2/#the-response-attribute
+    xhr.responseType = 'blob';
+    xhr.onload = function (evt) {
+                           if (xhr.status == 200) {
+                             console.log("Blob retrieved");
+                             var blob = xhr.response;
+                             console.log("Blob:", blob);
+                             addPublication(biblioid, title, year, blob);
+                           } else {
+                             console.error("addPublicationFromUrl error:",
+                                           xhr.responseText, xhr.status);
+                           }
+                         };
+    xhr.send();
+
+    // We can't use jQuery here because as of jQuery 1.8.3 the new "blob"
+    // responseType is not handled.
+    // http://bugs.jquery.com/ticket/11461
+    // http://bugs.jquery.com/ticket/7248
+    // $.ajax({
+    //   url: url,
+    //   type: 'GET',
+    //   xhrFields: { responseType: 'blob' },
+    //   success: function(data, textStatus, jqXHR) {
+    //     console.log("Blob retrieved");
+    //     console.log("Blob:", data);
+    //     // addPublication(biblioid, title, year, data);
+    //   },
+    //   error: function(jqXHR, textStatus, errorThrown) {
+    //     console.error(errorThrown);
+    //     displayActionFailure("Error during blob retrieval");
+    //   }
+    // });
+  }
+
+  /**
+   * @param {string} biblioid
+   * @param {string} title
+   * @param {number} year
+   * @param {Blob=} blob
+   */
+  function addPublication(biblioid, title, year, blob) {
+    console.log("addPublication arguments:", arguments);
+    var obj = { biblioid: biblioid, title: title, year: year };
+    if (typeof blob != 'undefined')
+      obj.blob = blob;
+
+    var store = getObjectStore(DB_STORE_NAME, 'readwrite');
+    var req;
+    try {
+      req = store.add(obj);
+    } catch (e) {
+      if (e.name == 'DataCloneError')
+        displayActionFailure("This engine doesn't know how to clone a Blob, " +
+                             "use Firefox");
+      throw e;
+    }
+    req.onsuccess = function (evt) {
+      console.log("Insertion in DB successful");
+      displayActionSuccess();
+      displayPubList(store);
+    };
+    req.onerror = function() {
+      console.error("addPublication error", this.error);
+      displayActionFailure(this.error);
+    };
+  }
+
+  /**
+   * @param {string} biblioid
+   */
+  function deletePublicationFromBib(biblioid) {
+    console.log("deletePublication:", arguments);
+    var store = getObjectStore(DB_STORE_NAME, 'readwrite');
+    var req = store.index('biblioid');
+    req.get(biblioid).onsuccess = function(evt) {
+      if (typeof evt.target.result == 'undefined') {
+        displayActionFailure("No matching record found");
+        return;
+      }
+      deletePublication(evt.target.result.id, store);
+    };
+    req.onerror = function (evt) {
+      console.error("deletePublicationFromBib:", evt.target.errorCode);
+    };
+  }
+
+  /**
+   * @param {number} key
+   * @param {IDBObjectStore=} store
+   */
+  function deletePublication(key, store) {
+    console.log("deletePublication:", arguments);
+
+    if (typeof store == 'undefined')
+      store = getObjectStore(DB_STORE_NAME, 'readwrite');
+
+    // As per spec http://www.w3.org/TR/IndexedDB/#object-store-deletion-operation
+    // the result of the Object Store Deletion Operation algorithm is
+    // undefined, so it's not possible to know if some records were actually
+    // deleted by looking at the request result.
+    var req = store.get(key);
+    req.onsuccess = function(evt) {
+      var record = evt.target.result;
+      console.log("record:", record);
+      if (typeof record == 'undefined') {
+        displayActionFailure("No matching record found");
+        return;
+      }
+      // Warning: The exact same key used for creation needs to be passed for
+      // the deletion. If the key was a Number for creation, then it needs to
+      // be a Number for deletion.
+      req = store.delete(key);
+      req.onsuccess = function(evt) {
+        console.log("evt:", evt);
+        console.log("evt.target:", evt.target);
+        console.log("evt.target.result:", evt.target.result);
+        console.log("delete successful");
+        displayActionSuccess("Deletion successful");
+        displayPubList(store);
+      };
+      req.onerror = function (evt) {
+        console.error("deletePublication:", evt.target.errorCode);
+      };
+    };
+    req.onerror = function (evt) {
+      console.error("deletePublication:", evt.target.errorCode);
+      };
+  }
+
+  function displayActionSuccess(msg) {
+    msg = typeof msg != 'undefined' ? "Success: " + msg : "Success";
+    $('#msg').html('<span class="action-success">' + msg + '</span>');
+  }
+  function displayActionFailure(msg) {
+    msg = typeof msg != 'undefined' ? "Failure: " + msg : "Failure";
+    $('#msg').html('<span class="action-failure">' + msg + '</span>');
+  }
+  function resetActionStatus() {
+    console.log("resetActionStatus ...");
+    $('#msg').empty();
+    console.log("resetActionStatus DONE");
+  }
+
+  function addEventListeners() {
+    console.log("addEventListeners");
+
+    $('#register-form-reset').click(function(evt) {
+      resetActionStatus();
+    });
+
+    $('#add-button').click(function(evt) {
+      console.log("add ...");
+      var title = $('#pub-title').val();
+      var biblioid = $('#pub-biblioid').val();
+      if (!title || !biblioid) {
+        displayActionFailure("Required field(s) missing");
+        return;
+      }
+      var year = $('#pub-year').val();
+      if (year != '') {
+        // Better use Number.isInteger if the engine has EcmaScript 6
+        if (isNaN(year))  {
+          displayActionFailure("Invalid year");
+          return;
+        }
+        year = Number(year);
+      } else {
+        year = null;
+      }
+
+      var file_input = $('#pub-file');
+      var selected_file = file_input.get(0).files[0];
+      console.log("selected_file:", selected_file);
+      // Keeping a reference on how to reset the file input in the UI once we
+      // have its value, but instead of doing that we rather use a "reset" type
+      // input in the HTML form.
+      //file_input.val(null);
+      var file_url = $('#pub-file-url').val();
+      if (selected_file) {
+        addPublication(biblioid, title, year, selected_file);
+      } else if (file_url) {
+        addPublicationFromUrl(biblioid, title, year, file_url);
+      } else {
+        addPublication(biblioid, title, year);
+      }
+
+    });
+
+    $('#delete-button').click(function(evt) {
+      console.log("delete ...");
+      var biblioid = $('#pub-biblioid-to-delete').val();
+      var key = $('#key-to-delete').val();
+
+      if (biblioid != '') {
+        deletePublicationFromBib(biblioid);
+      } else if (key != '') {
+        // Better use Number.isInteger if the engine has EcmaScript 6
+        if (key == '' || isNaN(key))  {
+          displayActionFailure("Invalid key");
+          return;
+        }
+        key = Number(key);
+        deletePublication(key);
+      }
+    });
+
+    $('#clear-store-button').click(function(evt) {
+      clearObjectStore();
+    });
+
+    var search_button = $('#search-list-button');
+    search_button.click(function(evt) {
+      displayPubList();
+    });
+
+  }
+
+  openDb();
+  addEventListeners();
+
+})(); // Immediately-Invoked Function Expression (IIFE)
+
+ +

{{ LiveSampleLink('Full_IndexedDB_example', "Test the online live demo") }}

+ +

Ver também

+ +

Uma leitura adicional para você encontrar mais informações.

+ +

Refências

+ + + +

Guias e tutoriais

+ + diff --git a/files/pt-br/web/api/network_information_api/index.html b/files/pt-br/web/api/network_information_api/index.html new file mode 100644 index 0000000000..032fc54169 --- /dev/null +++ b/files/pt-br/web/api/network_information_api/index.html @@ -0,0 +1,56 @@ +--- +title: Network Information API +slug: WebAPI/Network_Information +translation_of: Web/API/Network_Information_API +--- +

{{ SeeCompatTable() }}

+ +

A API de Informações de Rede fornece informação sobre a conexão do sistema, assim como a banda atual do dispositivo do usuário ou qualquer conexão que seja medida. Essa pode também ser usada para selecionar conteúdo de alta ou baixa definição baseado na conexão do usuário. Toda a API consiste na adição da interface domxref("Connection") e uma única propriedade a interface {{domxref("Navigator")}}: {{domxref("Navigator.connection")}}.

+ +

Detectando mudanças de conexão

+ +

Este é um exemplo vê mudança na conexão do usuário. Essa é similar a como uma app pode alertar quando o usuário move de uma conexão de alto para baixo custo por exemplo, a fim de reduzir a demanda da banda para previnir que o usuário seja submetido a cargos substanciais.

+ +
var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
+
+function updateConnectionStatus() {
+  alert("Connection bandwidth: " + connection.bandwidth + " MB/s");
+  if (connection.metered) {
+    alert("The connection is metered!");
+  }
+}
+
+connection.addEventListener("change", updateConnectionStatus);
+updateConnectionStatus();
+
+ +

Especificações

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('Network Information', '', 'Network Information API') }}{{ Spec2('Network Information') }}Initial specification
+ +

Compatibilidade com Navegadores

+ +

{{Page('/en-US/docs/Web/API/window.navigator.connection','Browser compatibility')}}

+ +

Veja também

+ + diff --git "a/files/pt-br/web/api/node/entendendo_o_uso_do_m\303\251todo_appendchild-javascript/index.html" "b/files/pt-br/web/api/node/entendendo_o_uso_do_m\303\251todo_appendchild-javascript/index.html" deleted file mode 100644 index a05abeae88..0000000000 --- "a/files/pt-br/web/api/node/entendendo_o_uso_do_m\303\251todo_appendchild-javascript/index.html" +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: Entendendo o uso do método appendChild em javascript -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/web/api/node/innertext/index.html b/files/pt-br/web/api/node/innertext/index.html deleted file mode 100644 index 1ab5e81027..0000000000 --- a/files/pt-br/web/api/node/innertext/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: Node.innerText -slug: Web/API/Node/innerText -translation_of: Web/API/HTMLElement/innerText ---- -
{{APIRef("DOM")}}
- -

Resumo

- -

Node.innerText é uma propriedade que representa o conteúdo textual "renderizado" de um nó e seus descendentes. Usada como getter, retorna de maneira aproximada o texto que o usuário obteria caso tivesse selecionado o conteúdo e copiado para a área de transferência. Este recurso fora introduzido originalmente pelo Internet Explorer, mas foi oficialmente especificado no padrão HTML apenas em 2016, sendo adotado por todos os principais navegadores a partir de então.

- -

{{domxref("Node.textContent")}} é uma alternativa similar, embora existam diferenças significativas entre as duas.

- -

Especificação

- - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{SpecName('HTML WHATWG', 'dom.html#the-innertext-idl-attribute', 'innerText')}}{{Spec2('HTML WHATWG')}}Introduzida, baseado no rascunho da especifição de innerText. Ver whatwg/html#465 e whatwg/compat#5 para histórico.
- -

Compatibilidade de navegadores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
RecursoChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suporte básico4{{ CompatGeckoDesktop(45) }}69.6 (provavelmente antes)3
-
- -
- - - - - - - - - - - - - - - - - - - -
RecursoAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico2.3 (provavelmente antes){{ CompatGeckoMobile(45) }}10 (provavelmente antes)124.1 (provavelmente antes)
-
- -

Ver também

- - diff --git a/files/pt-br/web/api/notificacoes/index.html b/files/pt-br/web/api/notificacoes/index.html deleted file mode 100644 index 9103aac190..0000000000 --- a/files/pt-br/web/api/notificacoes/index.html +++ /dev/null @@ -1,217 +0,0 @@ ---- -title: Notificações -slug: Web/API/notificacoes -tags: - - API - - Interface - - Notificações -translation_of: Web/API/Notification ---- -

{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}

- -

A interface da API de Notificações é usada para configurar e exibir notificações  na área de trabalho do usuário. A aparência e algumas funcionalidades específicas das notificações variam entre as plataformas mas geralmente eles fornecem uma forma assíncrona de prover informações para o usuário.

- - -

Construtor

- -
-
{{domxref("Notification.Notification", "Notification()")}}
-
Cria uma nova instancia do objeto {{domxref('Notification')}}.
-
- -

Propriedades

- -

Propriedades estáticas

- -

Estas propriedades estão disponíveis apenas no próprio objeto  Notification.

- -
-
{{domxref("Notification.permission")}} {{readonlyinline}}
-
-
-
-
- -
-
Uma sequência de caracteres que representa a permissão atual para exibir notificações. Valor possíveis são: "denied" (o usuário se recusa a ter notificações exibidas), "granted" (o usuário aceita ter notificações exibidas) ou "default" (a escolha do usuário é desconhecido e, portanto, o navegador irá agir como se o valor foram negados).
-
-
-
- -

Propriedades da instância

- -

Estas propriedades estão disponíveis apenas em instâncias do objeto Notification.

- -
-
{{domxref("Notification.title")}} {{readonlyinline}}
-
Retorna o título da notificação conforme foi definido no parâmetro opções do construtor.
-
{{domxref("Notification.dir")}} {{readonlyinline}}
-
A direção do texto da notificação, conforme especificado no parâmetro opções do construtor.
-
{{domxref("Notification.lang")}} {{readonlyinline}}
-
-
-
O código de idioma da notificação, conforme especificado no parâmetro opções do construtor.
-
-
-
{{domxref("Notification.body")}} {{readonlyinline}}
-
O corpo(mensagem) da notificação, conforme especificado no parâmetro opções do construtor.
-
{{domxref("Notification.tag")}} {{readonlyinline}}
-
O ID da notificação (se houver), conforme especificado no parâmetro opções do construtor.
-
{{domxref("Notification.icon")}} {{readonlyinline}}
-
A URL da imagem usada como um ícone da notificação, conforme especificado no parâmetro opções do construtor.
-
{{domxref("Notification.data")}} {{readonlyinline}}
-
Retorna um clone estruturado de dados da notificação.
-
{{domxref("Notification.silent")}} {{readonlyinline}}
-
-
-
Especifica se a notificação deve ser silenciosa, ou seja, sons ou vibrações não devem ser emitidos, independentemente das configurações do dispositivo.
-
-
-
- -

Propriedades não suportadas

- -

As propriedades a seguir estão listados na especificação mais up-to-date, mas não são suportadas em quaisquer navegadores ainda. É aconselhável manter a verificação de volta regularmente para ver se o status destes actualiza, e deixe-nos saber se você encontrar qualquer informações desatualizadas.

- -
-
{{domxref("Notification.noscreen")}} {{readonlyinline}}
-
-
-
Especifica se o disparo notificação deve permitir que a tela do dispositivo ou não.
-
-
-
{{domxref("Notification.renotify")}} {{readonlyinline}}
-
-
-
Especifica se o usuário deve ser notificado após uma nova notificação substitui um antigo.
-
-
-
{{domxref("Notification.sound")}} {{readonlyinline}}
-
Especifica um recurso de som para reproduzir durante o disparo da notificação, em vez do som de notificação do sistema padrão.
-
{{domxref("Notification.sticky")}} {{readonlyinline}}
-
Especifica se a notificação deve ser "fixa", ou seja, não facilmente eliminável pelo usuário.
-
{{domxref("Notification.vibrate")}} {{readonlyinline}}
-
Especifica um padrão de vibração para dispositivos com hardware de vibração.
-
- -

Manipuladores de Eventos

- -
-
{{domxref("Notification.onclick")}}
-
O manipulador para o evento {{event("click")}} é acionado cada vez que o usuário clica sobre a notificação.
-
{{domxref("Notification.onerror")}}
-
O manipulador para o evento {{event("error")}} é acionado quando a notificação encontra um erro.
-
- -

Manipuladores Obsoletos

- -

Os seguintes manipuladores de eventos ainda são suportados, conforme listado na seção {{anch("browser compatibility")}}. Estes serão listados abaixo, mas não são listados na especificação atual. Saiba que eles são obsoletos, e pode parar de funcionar em versões futuras do navegador.

- -
-
{{domxref("Notification.onclose")}}
-
Manipulador do evento {{event("close")}} é acionado quando a notificação é fechada.
-
{{domxref("Notification.onshow")}}
-
Manipulador do evento {{event("show")}}. é acionado quando a notificação é exibida.
-
- -

Métodos

- -

Métodos Estáticos

- -

Estes métodos estão disponíveis apenas no próprio objeto Notification.

- -
-
{{domxref("Notification.requestPermission()")}}
-
-
-
Solicita a permissão do usuário para exibir notificações.
-
-
-
- -

Métodos de instância

- -

Estas propriedades estão disponíveis apenas no objeto Notification ou através do seu prototype. O objeto de notificação também herda a interface {{domxref("EventTarget")}}.

- -
-
{{domxref("Notification.close()")}}
-
Programaticamente fecha uma notificação.
-
- -

Exemplos

- -

Leve em conta este HTML básico:

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

É possível enviar uma notificação da seguinte forma - aqui nós apresentamos um conjunto bastante detalhado e completo de código que você pode usar se você quiser verificar primeiro se as notificações são suportados, em seguida, verifique se a permissão foi concedida para a origem atual para enviar notificações, em seguida, solicitar permissão, se necessário, antes, em seguida, enviar uma notificação.

- -
function notifyMe() {
-  // Verifica se o browser suporta notificações
-  if (!("Notification" in window)) {
-    alert("Este browser não suporta notificações de Desktop");
-  }
-
-  // Let's check whether notification permissions have already been granted
-  else if (Notification.permission === "granted") {
-    // If it's okay let's create a notification
-    var notification = new Notification("Hi there!");
-  }
-
-  // Otherwise, we need to ask the user for permission
-  else if (Notification.permission !== 'denied') {
-    Notification.requestPermission(function (permission) {
-      // If the user accepts, let's create a notification
-      if (permission === "granted") {
-        var notification = new Notification("Hi there!");
-      }
-    });
-  }
-
-  // At last, if the user has denied notifications, and you
-  // want to be respectful there is no need to bother them any more.
-}
- -

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

- -

Em muitos casos, você não precisa estar presente detalhado. Por exemplo, na nosso Emogotchi demo (veja o código fonte), basta simlesmente executar {{domxref("Notification.requestPermission")}} independentemente de se certificar de que pode obter permissão para enviar notificações:

- -
Notification.requestPermission();
- -

Em seguida executar um simples spawnNotification() quando queremos disparar uma notificação — este é passado argumentos para especificar o, ícone corpo e título que queremos, então ele cria as opções necessárias objeto e dispara a notificação usando o construtor {{domxref("Notification.Notification","Notification()")}}.

- -
function spawnNotification(corpo,icone,titulo) {
-  var opcoes = {
-      body: corpo,
-      icon: icone
-  }
-  var n = new Notification(titulo,opcoes);
-}
- -

Especificações

- - - - - - - - - - - - - - -
EspecificaçãoEstadoComentário
{{SpecName('Web Notifications')}}{{Spec2('Web Notifications')}}Living standard
- -

Compatibilidade dos Navegadores

- - - -

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

-

Veja também

- - diff --git a/files/pt-br/web/api/notification/index.html b/files/pt-br/web/api/notification/index.html new file mode 100644 index 0000000000..9103aac190 --- /dev/null +++ b/files/pt-br/web/api/notification/index.html @@ -0,0 +1,217 @@ +--- +title: Notificações +slug: Web/API/notificacoes +tags: + - API + - Interface + - Notificações +translation_of: Web/API/Notification +--- +

{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}

+ +

A interface da API de Notificações é usada para configurar e exibir notificações  na área de trabalho do usuário. A aparência e algumas funcionalidades específicas das notificações variam entre as plataformas mas geralmente eles fornecem uma forma assíncrona de prover informações para o usuário.

+ + +

Construtor

+ +
+
{{domxref("Notification.Notification", "Notification()")}}
+
Cria uma nova instancia do objeto {{domxref('Notification')}}.
+
+ +

Propriedades

+ +

Propriedades estáticas

+ +

Estas propriedades estão disponíveis apenas no próprio objeto  Notification.

+ +
+
{{domxref("Notification.permission")}} {{readonlyinline}}
+
+
+
+
+ +
+
Uma sequência de caracteres que representa a permissão atual para exibir notificações. Valor possíveis são: "denied" (o usuário se recusa a ter notificações exibidas), "granted" (o usuário aceita ter notificações exibidas) ou "default" (a escolha do usuário é desconhecido e, portanto, o navegador irá agir como se o valor foram negados).
+
+
+
+ +

Propriedades da instância

+ +

Estas propriedades estão disponíveis apenas em instâncias do objeto Notification.

+ +
+
{{domxref("Notification.title")}} {{readonlyinline}}
+
Retorna o título da notificação conforme foi definido no parâmetro opções do construtor.
+
{{domxref("Notification.dir")}} {{readonlyinline}}
+
A direção do texto da notificação, conforme especificado no parâmetro opções do construtor.
+
{{domxref("Notification.lang")}} {{readonlyinline}}
+
+
+
O código de idioma da notificação, conforme especificado no parâmetro opções do construtor.
+
+
+
{{domxref("Notification.body")}} {{readonlyinline}}
+
O corpo(mensagem) da notificação, conforme especificado no parâmetro opções do construtor.
+
{{domxref("Notification.tag")}} {{readonlyinline}}
+
O ID da notificação (se houver), conforme especificado no parâmetro opções do construtor.
+
{{domxref("Notification.icon")}} {{readonlyinline}}
+
A URL da imagem usada como um ícone da notificação, conforme especificado no parâmetro opções do construtor.
+
{{domxref("Notification.data")}} {{readonlyinline}}
+
Retorna um clone estruturado de dados da notificação.
+
{{domxref("Notification.silent")}} {{readonlyinline}}
+
+
+
Especifica se a notificação deve ser silenciosa, ou seja, sons ou vibrações não devem ser emitidos, independentemente das configurações do dispositivo.
+
+
+
+ +

Propriedades não suportadas

+ +

As propriedades a seguir estão listados na especificação mais up-to-date, mas não são suportadas em quaisquer navegadores ainda. É aconselhável manter a verificação de volta regularmente para ver se o status destes actualiza, e deixe-nos saber se você encontrar qualquer informações desatualizadas.

+ +
+
{{domxref("Notification.noscreen")}} {{readonlyinline}}
+
+
+
Especifica se o disparo notificação deve permitir que a tela do dispositivo ou não.
+
+
+
{{domxref("Notification.renotify")}} {{readonlyinline}}
+
+
+
Especifica se o usuário deve ser notificado após uma nova notificação substitui um antigo.
+
+
+
{{domxref("Notification.sound")}} {{readonlyinline}}
+
Especifica um recurso de som para reproduzir durante o disparo da notificação, em vez do som de notificação do sistema padrão.
+
{{domxref("Notification.sticky")}} {{readonlyinline}}
+
Especifica se a notificação deve ser "fixa", ou seja, não facilmente eliminável pelo usuário.
+
{{domxref("Notification.vibrate")}} {{readonlyinline}}
+
Especifica um padrão de vibração para dispositivos com hardware de vibração.
+
+ +

Manipuladores de Eventos

+ +
+
{{domxref("Notification.onclick")}}
+
O manipulador para o evento {{event("click")}} é acionado cada vez que o usuário clica sobre a notificação.
+
{{domxref("Notification.onerror")}}
+
O manipulador para o evento {{event("error")}} é acionado quando a notificação encontra um erro.
+
+ +

Manipuladores Obsoletos

+ +

Os seguintes manipuladores de eventos ainda são suportados, conforme listado na seção {{anch("browser compatibility")}}. Estes serão listados abaixo, mas não são listados na especificação atual. Saiba que eles são obsoletos, e pode parar de funcionar em versões futuras do navegador.

+ +
+
{{domxref("Notification.onclose")}}
+
Manipulador do evento {{event("close")}} é acionado quando a notificação é fechada.
+
{{domxref("Notification.onshow")}}
+
Manipulador do evento {{event("show")}}. é acionado quando a notificação é exibida.
+
+ +

Métodos

+ +

Métodos Estáticos

+ +

Estes métodos estão disponíveis apenas no próprio objeto Notification.

+ +
+
{{domxref("Notification.requestPermission()")}}
+
+
+
Solicita a permissão do usuário para exibir notificações.
+
+
+
+ +

Métodos de instância

+ +

Estas propriedades estão disponíveis apenas no objeto Notification ou através do seu prototype. O objeto de notificação também herda a interface {{domxref("EventTarget")}}.

+ +
+
{{domxref("Notification.close()")}}
+
Programaticamente fecha uma notificação.
+
+ +

Exemplos

+ +

Leve em conta este HTML básico:

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

É possível enviar uma notificação da seguinte forma - aqui nós apresentamos um conjunto bastante detalhado e completo de código que você pode usar se você quiser verificar primeiro se as notificações são suportados, em seguida, verifique se a permissão foi concedida para a origem atual para enviar notificações, em seguida, solicitar permissão, se necessário, antes, em seguida, enviar uma notificação.

+ +
function notifyMe() {
+  // Verifica se o browser suporta notificações
+  if (!("Notification" in window)) {
+    alert("Este browser não suporta notificações de Desktop");
+  }
+
+  // Let's check whether notification permissions have already been granted
+  else if (Notification.permission === "granted") {
+    // If it's okay let's create a notification
+    var notification = new Notification("Hi there!");
+  }
+
+  // Otherwise, we need to ask the user for permission
+  else if (Notification.permission !== 'denied') {
+    Notification.requestPermission(function (permission) {
+      // If the user accepts, let's create a notification
+      if (permission === "granted") {
+        var notification = new Notification("Hi there!");
+      }
+    });
+  }
+
+  // At last, if the user has denied notifications, and you
+  // want to be respectful there is no need to bother them any more.
+}
+ +

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

+ +

Em muitos casos, você não precisa estar presente detalhado. Por exemplo, na nosso Emogotchi demo (veja o código fonte), basta simlesmente executar {{domxref("Notification.requestPermission")}} independentemente de se certificar de que pode obter permissão para enviar notificações:

+ +
Notification.requestPermission();
+ +

Em seguida executar um simples spawnNotification() quando queremos disparar uma notificação — este é passado argumentos para especificar o, ícone corpo e título que queremos, então ele cria as opções necessárias objeto e dispara a notificação usando o construtor {{domxref("Notification.Notification","Notification()")}}.

+ +
function spawnNotification(corpo,icone,titulo) {
+  var opcoes = {
+      body: corpo,
+      icon: icone
+  }
+  var n = new Notification(titulo,opcoes);
+}
+ +

Especificações

+ + + + + + + + + + + + + + +
EspecificaçãoEstadoComentário
{{SpecName('Web Notifications')}}{{Spec2('Web Notifications')}}Living standard
+ +

Compatibilidade dos Navegadores

+ + + +

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

+

Veja também

+ + diff --git a/files/pt-br/web/api/performance_api/index.html b/files/pt-br/web/api/performance_api/index.html new file mode 100644 index 0000000000..1b6997e293 --- /dev/null +++ b/files/pt-br/web/api/performance_api/index.html @@ -0,0 +1,138 @@ +--- +title: API de Desempenho +slug: Web/API/API_de_Desempenho +translation_of: Web/API/Performance_API +--- +
{{DefaultAPISidebar("High Resolution Time")}}
+ +

The High Resolution Time standard defines a {{domxref("Performance")}} interface that supports client-side latency measurements within applications. The {{domxref("Performance")}} interfaces are considered high resolution because they are accurate to a thousandth of a millisecond (subject to hardware or software constraints). The interfaces support a number of use cases including calculating frame-rates (potentially important in animations) and benchmarking (such as the time to load a resource).

+ +

Since a platform's system clock is subject to various skews (such as NTP adjustments), the interfaces support a monotonic clock i.e. a clock that is always increasing. As such, the Performance API defines a {{domxref("DOMHighResTimeStamp")}} type rather than using the {{jsxref("Date.now","Date.now()")}} interface.

+ +

DOMHighResTimeStamp

+ +

The {{domxref("DOMHighResTimeStamp")}} type, as its name implies, represents a high resolution point in time. This type is a double and is used by the performance interfaces. The value could be a discrete point in time or the difference in time between two discrete points in time.

+ +

The unit of DOMHighResTimeStamp is milliseconds and should be accurate to 5 µs (microseconds). However, If the browser is unable to provide a time value accurate to 5 microseconds (because, for example, due to hardware or software constraints), the browser can represent the value as a time in milliseconds accurate to a millisecond.

+ +

Methods

+ +

The {{domxref("Performance")}} interface has two methods. The {{domxref("Performance.now","now()")}} method returns a {{domxref("DOMHighResTimeStamp")}} whose value that depends on the {{domxref("PerformanceTiming.navigationStart","navigation start")}} and scope. If the scope is a window, the value is the time the browser context was created and if the scope is a {{domxref("Worker","worker")}}, the value is the time the worker was created.

+ +

The {{domxref("Performance.toJSON","toJSON()")}} method returns a serialization of the {{domxref("Performance")}} object, for those attributes that can be serialized.

+ +

Properties

+ +

The {{domxref("Performance")}} interface has two properties. The {{domxref("Performance.timing","timing")}} property returns a {{domxref("PerformanceTiming")}} object containing latency-related performance information such as the start of navigation time, start and end times for redirects, start and end times for responses, etc.

+ +

The {{domxref("Performance.navigation","navigation")}} property returns a {{domxref("PerformanceNavigation")}} object representing the type of navigation that occurs in the given browsing context, such as the page was navigated to from history, the page was navigated to by following a link, etc.

+ +

Interfaces

+ +
+
{{domxref('Performance')}}
+
Provides methods and properties containing timing-related performance information for the given page.
+
{{domxref('PerformanceEntry')}}
+
Provides methods and properties the encapsulate a single performance metric that is part of the performance timeline.
+
{{domxref('PerformanceFrameTiming')}}
+
Provides methods and properties containing frame timing data about the browser's event loop.
+
{{domxref('PerformanceMark')}}
+
An abstract interface for performance entries with an entry type of "mark". Entries of this type are created by calling performance.mark() to add a named DOMHighResTimeStamp (the mark) to the browser's performance timeline.
+
{{domxref('PerformanceMeasure')}}
+
An abstract interface for performance entries with an entry type of "measure". Entries of this type are created by calling performance.measure() to add a namedDOMHighResTimeStamp (the measure) between two marks to the browser's performance timeline.
+
{{domxref('PerformanceNavigationTiming')}}
+
Provides methods and properties to store and retrieve high resolution timestamps or metrics regarding the browser's document navigation events.
+
{{domxref('PerformanceObserver')}}
+
Provides methods and properties used to observe performance measurement events and be notified of new performance entries as they are recorded in the browser's performance timeline.
+
{{domxref('PerformanceResourceTiming')}}
+
Provides methods and properties for retrieving and analyzing detailed network timing data regarding the loading of an application's resources.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Highres Time')}}{{Spec2('Highres Time')}}Initial definition.
{{SpecName('Highres Time Level 2')}}{{Spec2('Highres Time Level 2')}}Adds performance attribute on Window and WorkerGlobalScope.
{{SpecName('Highres Time Level 3')}}{{Spec2('Highres Time Level 3')}}Add timeOrigin property to Performance interface.
{{SpecName('Frame Timing')}}{{Spec2('Frame Timing')}}Adds PerformanceFrameTiming interface.
{{SpecName('Navigation Timing')}}{{Spec2('Navigation Timing')}}Adds the PerformanceTiming and PerformanceNavigation interfaces. Adds timing and navigation properties to the Performance interface.
{{SpecName('Navigation Timing Level 2')}}{{Spec2('Navigation Timing Level 2')}}Adds the PerformanceNavigationTiming interface. Obsolete's the the PerformanceTiming interface, the PerformanceNavigation interface, as well as the timing and navigation properties to the Performance interface.
{{SpecName('Performance Timeline')}}{{Spec2('Performance Timeline')}}Adds the PerformanceEntry interface, the PerformanceEntryList type, as well as the getEntries(), getEntriesByType(), and getEntriesByName() methods on the Performance interface.
{{SpecName('Performance Timeline Level 2')}}{{Spec2('Performance Timeline Level 2')}}Adds serializer to the PerformanceEntry interface as well as adding the PerformanceObserver interface and callback
{{SpecName('Resource Timing')}}{{Spec2('Resource Timing')}}Adds the PerformanceResourceTiming interface. Adds the clearResourceTimings() method, the setResourceTimingBufferSize() method, and the onresourcetimingbufferfull event handler to the Performance interface. Also adds the Timing-Allow-Origin response header.
{{SpecName('Resource Timing 2')}}{{Spec2('Resource Timing 2')}}Adds the nextHopProtocol, workerStart, transferSize, encodedBodySize, and decodedBodySize properties to the PerformanceResourceTiming interface.
{{SpecName('Resource Timing 3')}}{{Spec2('Resource Timing 3')}}
{{SpecName('User Timing')}}{{Spec2('User Timing')}}Adds mark(), clearMarks(), measure() and clearMeasures() methods to the Performance interface. Adds the PerformanceMark and PeformanceMeasure interfaces.
{{SpecName('User Timing Level 2')}}{{Spec2('User Timing Level 2')}}
+ +

Implementation status

+ +

As shown in the {{domxref("Performance")}} interface's Browser Compatibility table, most of these interfaces are broadly implemented by desktop browsers.

+ +

To test your browser's support for the {{domxref("Performance")}} interface, run the perf-api-support application.

+ +

See Also

+ + diff --git a/files/pt-br/web/api/push_api/best_practices/index.html b/files/pt-br/web/api/push_api/best_practices/index.html new file mode 100644 index 0000000000..9b0fafd2b7 --- /dev/null +++ b/files/pt-br/web/api/push_api/best_practices/index.html @@ -0,0 +1,73 @@ +--- +title: Melhores práticas +slug: Web/API/API_Push/Best_Practices +tags: + - Apps + - Iniciante + - Melhores Práticas + - Notificações + - Push API + - Usabilidade +translation_of: Web/API/Push_API/Best_Practices +--- +

{{draft}}

+ +

Este artigo proporciona um compilado das melhores práticas a serem usadas enquanto estiver desenvolvendo websites e aplicações que usem Notificações push para engajamento de usuários.

+ +
+

“Se feito de uma maneira correta, as notificações ajudam os usuarios, se não, so irritam.” — Conversa entre dois desenvolvedores a respeito da etica das notificações push.

+
+ +

Visão Geral do web push notifications

+ +

Notificações Web Push (criadas usando uma combinação das APIs de Notificações, Push e Service Worker) são parte de um movimento crescente em que desenvolvedores e comerciantes estão usando para conseguir atenção para seus sites. Uma procura rápida pelo termo "web push notifications", irá resultar em vários artigos, em que especialistas em marketing que acreditam que deve-se usar a API de Push para recapturar a atenção de pessoas que saíram de seu site para que possam terminar o que estavam fazendo, por exemplo, uma compra, ou então enviar as últimas notícias e até recomendação de produtos

+ +

O Lado obscuro

+ +

Essa novidade oferece uma oportunidade nova e inexplorada para sites empresariais chegarem aos seus consumidores finais. Seu usuário trocou de aba para responder um email? Consiga-os de volta com uma oferta que expira em um tempo limitado ou oferecendo frete grátis, o qual ele não vai poder ignorar

+ +

Mas sério, qual o melhor uso das notificações push? Ou é apenas uma nova interação dos bons e velhos pop-ups?

+ +
+

“O envio de notificações push não corre o risco de acabar na pasta de spam. Nem pode ser bloqueado por bloqueadores de anúncios. Ele aparece na sua área de trabalho, mesmo quando o site está fechado. No celular, ele aparece na barra de notificações, assim como as notificações por push do aplicativo, mesmo quando o navegador não está em execução.” — um site de marketing anonimo

+
+ +

Bons usos das notificações

+ +

Mas há também um lado bom no que se diz respeito as notificações por push. Digamos que você e sua equipe usem normalmente um programa de bate-papo para se comunicar, mas hoje você está feliz e saltitante trabalhando e surge um problema. Digamos que seu gerente tenha encontrado um problema nas aprovações e queira receber seu feedback sobre algo antes que ela prossiga.

+ +

Neste documento, falaremos sobre o uso correto das notificações por push da web. Às vezes, eles podem eliminar a frustração e o aborrecimento e, às vezes, causá-los. Cabe a você, como desenvolvedor, fazer recomendações (e decisões) sábias sobre o uso de notificações por push.

+ +

O que se espera alcançar com as notificações push?

+ +

Como tudo, com grande poder vem uma grande responsabilidade. Toda notificação push devem ser úteis e sensíveis ao tempo, o usuário sempre deve fornecer a permissão antes de recebe-la primeiro e deve-se oferecer uma maneira fácil de optar por não receber mais no futuro.

+ +

Temos que responder algumas perguntas basicas para verificar se as notificações são necessarias:

+ + + +

Além da questão de saber se uma notificação por push é necessária, existem muitas variedades de notificações por push, variando de casual e efêmera a persistente e exigente.

+ +

Aconselhamos que você use as notificações que exigem uma interação de forma conciente e com moderação, pois estas podem irritar seu usuario e afasta-lo. Suas notificações devem ser acolhedoras, não hostis.

+ +

Gerando confiança

+ +

Alguns estudos mostraram que até 60% das notificações por push não chegam ao usuário final. Permitir que seu usuario receba notificações por push em tempo real exige confiança, por parte do aplicativo. Você pode criar confiança ao ter um site bem projetado que forneça um bom conteúdo e que mostre respeito pelo usuário alem de um valor claro para que o usuario aceite as notificações push.

+ +

Mitigações dos navegadores

+ +

Por causa dos abusos da utilização das notificações por push no passado, os desenvolvedores de navegadores começaram a implementar estratégias para ajudar a mitigar esse problema. Por exemplo, o Safari 12.1 agora exige - e outros navegadores já o fazem ou estão planejando[1] fazer—que o usuário interaja com a página de alguma forma antes que ela possa solicitar permissão para executar notificações por push, assim como já acontece com os popups. Isso pelo menos impede que o usuário receba espontaneamente essa pergunta em páginas da Web que apenas olharam de uma só vez, raramente ou nunca mais.

+ +

[1] No caso do Firefox, veja {{bug(1524619)}}, podemos observar que Firefox 68 implementa isso, desabilitado por padrão, usando a preferência dom.webnotifications.requireuserinteraction.

+ +

Veja também

+ + diff --git a/files/pt-br/web/api/push_api/index.html b/files/pt-br/web/api/push_api/index.html new file mode 100644 index 0000000000..563b711cd8 --- /dev/null +++ b/files/pt-br/web/api/push_api/index.html @@ -0,0 +1,172 @@ +--- +title: API Push +slug: Web/API/API_Push +tags: + - API + - Experimental + - Notificações + - Push + - Referencia + - Service Workers +translation_of: Web/API/Push_API +--- +
{{DefaultAPISidebar("Push API")}}{{SeeCompatTable}}
+ +

A API Push torna possível que aplicações web recebam mensagens enviadas a elas de um servidor, indepententemente de aplicação estar ou não em primeiro plano, ou até mesmo carregada, em um agente de usuário. Isso permite que desenvolvedores entreguem notificações e atualizações assíncronas a usuários que optarem por elas, resultando num melhor engajamento com conteúdo novo oportuno.

+ +
+

Nota: Esta documentação cobre a especificação W3C da API Push; se você procura pela documentação do sistema de notificação proprietária do mecanismo push, veja Simple Push.

+
+ +

Conceitos e uso de Push

+ +

Para uma aplicação receber mensagens push, ela precisa ter um service worker ativo. Quando o service worker está ativo, ele pode se inscrever para utilizar notificações push {{domxref("PushManager.subscribe()")}}.

+ +

O resultado de {{domxref("PushSubscription")}} inclui toda informação que a aplicação precisa para receber uma mensagem push: um endpoint e a chave encriptada necessária para o envio de dados.

+ +

O service worker será iniciado conforme o necessário para lidar com as mensagens recebidas, que são entregues ao manipulador de evento {{domxref("ServiceWorkerGlobalScope.onpush")}} . Isto permite que a aplicação reaja a cada mensagem recebida, por exemplo para exibir a notificação ao usuário (usando {{domxref("ServiceWorkerRegistration.showNotification()")}}.)

+ +

Cada assinatura é única para um service worker.  O endpoint para a assinatura é uma capability URL única: o conhecimento do endpoint é tudo que é necessário para enviar uma mensagem para sua aplicação. A URL do endpoint precisa ser mantida em segredo, ou outras aplicações estranhas poderão enviar mensagens push para a sua aplicação.

+ +

A ativação de um service worker para entregar mensagens push pode resultar em um aumento de uso de recursos, particularmente de bateria. Diferentes navegadores tem diferentes formas para lidar com isso — atualmente não existe uma forma padrão. Firefox permite um número limitado (cota) de mensagens push para serem enviadas para uma aplicação, embora as mensagens Push que gerem notificações são isentas deste limite.  O limite é atualizado a cada site visitado. Numa comparação, Chrome não aplica nenhum limite, mas requer que cada mensagem push exiba uma notificação.

+ +
+

Nota: A partir do Gecko 44, a cota permitida de mensagens push por aplicação não é incrementada quando uma nova notificação é disparada quando outra está visível, por um período de três segundos. Isso lida com casos em que várias notificações são recebidas ao mesmo tempo, mas nem todas estão visíveis.

+
+ +
+

Nota: Chrome atualmente requer que você crie um projeto no Google Cloud Messaging para enviar mensagens push e use um número do projeto e chave da API para o envio de notificações push. Isto também requer um app manifest com alguns parâmetros especiais para usar o serviço. Essa restrição deverá ser removida no futuro.

+
+ +

Interfaces

+ +
+
{{domxref("PushEvent")}}
+
Representa uma ação push enviada para o global scope de um {{domxref("ServiceWorker")}}. Ele contém informações enviadas de uma aplicação para um {{domxref("PushSubscription")}}.
+
{{domxref("PushManager")}}
+
Fornece uma forma de receber notificações de servidor third-party bem como solicitar URL para notificações push. Essa interface substitui a funcionalidade oferecida que está obsoleta {{domxref("PushRegistrationManager")}} interface.
+
{{domxref("PushMessageData")}}
+
Fornece acesso aos dados push enviados por um servidor, e inclui métodos para manipular os dados recebidos.
+
{{domxref("PushSubscription")}}
+
Fornece a URL de assinatura do endpoint e permite o cancelamento da assinatura de um serviço push.
+
+ +

Service worker additions

+ +

As seguintes informações adicionais para a Service Worker API foram especificadas na Push API spec, para fornecer um ponto de entrada para usar mensagens Push, e para monitorar e responder os eventos de envio e assinatura.

+ +
+
{{domxref("ServiceWorkerRegistration.pushManager")}} {{readonlyinline}}
+
Retorna uma referência para a interface {{domxref("PushManager")}} para administrar assinaturas push incluindo subscrever, obter uma assinatura ativa e acessar o status de permissão de envio. Este é o ponto de entrada para usar mensagens Push.
+
{{domxref("ServiceWorkerGlobalScope.onpush")}}
+
Um manipulador de eventos disparado sempre que um evento  {{Event("push")}} ocorre; isto é, sempre que uma mensagem do servidor de envio for recebida.
+
{{domxref("ServiceWorkerGlobalScope.onpushsubscriptionchange")}}
+
Um manipulador de eventos disparado sempre que um evento  {{Event("pushsubscriptionchange")}} ocorre; por exemplo, quando uma assinatura push está inválida, ou está prestes a ser invalidada (ex. quando um serviço push service define um tempo de expiração.)
+
+ +

Especificações

+ + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName("Push API")}}{{Spec2("Push API")}}Definição Inicial
+ +

Compatibilidade em Browsers

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FuncionalidadeChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suporte básico{{CompatChrome(42.0)}}{{CompatGeckoDesktop(44.0)}}[1]{{CompatNo}}[2]{{CompatUnknown}}{{CompatUnknown}}
{{domxref("PushEvent.data")}},
+ {{domxref("PushMessageData")}}		{{CompatNo}}{{CompatGeckoDesktop(44.0)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FuncionalidadeAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Suporte básico{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}[2]{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(42.0)}}
{{domxref("PushEvent.data")}},
+ {{domxref("PushMessageData")}}		{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Atualmente disponível apenas nas versões desktop do Firefox; ainda, mensagens push são encaminhadas apenas quando o Firefox está em execução.

+ +

[2] Ainda não implementado. Veja Microsoft Edge status information.

+ +

Veja também

+ + diff --git a/files/pt-br/web/api/randomsource/getrandomvalues/index.html b/files/pt-br/web/api/randomsource/getrandomvalues/index.html deleted file mode 100644 index 7e54e933ed..0000000000 --- a/files/pt-br/web/api/randomsource/getrandomvalues/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: RandomSource.getRandomValues() -slug: Web/API/RandomSource/getRandomValues -translation_of: Web/API/Crypto/getRandomValues ---- -

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

- -

O método RandomSource.getRandomValues() permite que você obtenha valores criptográficos randômicos. O array passado como parametro é preenchido com números randômicos (randômicos no sentido criptográfico).

- -

Para garantir performance suficiente, as implementações não estão usando um gerador de número randômico de verdade, mas estão usando um gerador de número pseudo-randômico alimentado com um valor com {{Glossary("entropia")}} suficiente. Os PRNG (pseudo-random number generator - gerador de número pseudo-randômico) usados diferem de uma implementação para a outra, mas são adequadas para usos criptográficos. As implementações precisam ter um valor de alimentação com entropia suficiente, como uma fonte de entropia a nível de sistema.

- -

Sintaxe

- -
cryptoObj.getRandomValues(typedArray);
- -

Parâmetros

- -
-
typedArray
-
É uma {{jsxref("TypedArray")}} de números inteiros, que pode ser {{jsxref("Int8Array")}}, {{jsxref("Uint8Array")}}, {{jsxref("Uint16Array")}}, {{jsxref("Int32Array")}}, ou {{jsxref("Uint32Array")}}. Todos os elementos no array serão sobrescristos com números randômicos.
-
- -

Exceções

- - - -

Exemplo

- -
/* assumindo que window.crypto.getRandomValues está disponível */
-
-var array = new Uint32Array(10);
-window.crypto.getRandomValues(array);
-
-console.log("Seus números da sorte são:");
-for (var i = 0; i < array.length; i++) {
-    console.log(array[i]);
-}
-
- -

Especificação

- - - - - - - - - - - - - - -
EspecificaçãoEstadoComentário
{{SpecName('Web Crypto API', '#RandomSource-method-getRandomValues')}}{{Spec2('Web Crypto API')}}Definição inicial
- - - -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support11.0 {{ webkitbug("22049") }}21.011.015.03.1
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatNo() }}23.021.011.0{{ CompatNo() }}6
-
- -

Veja também

- - diff --git a/files/pt-br/web/api/randomsource/index.html b/files/pt-br/web/api/randomsource/index.html deleted file mode 100644 index e0dbd0a970..0000000000 --- a/files/pt-br/web/api/randomsource/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: RandomSource -slug: Web/API/RandomSource -tags: - - API - - Interface - - RandomSource - - Referencia - - Web Crypto API -translation_of: Web/API/Crypto/getRandomValues -translation_of_original: 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/web/api/selection/index.html b/files/pt-br/web/api/selection/index.html new file mode 100644 index 0000000000..9cac677942 --- /dev/null +++ b/files/pt-br/web/api/selection/index.html @@ -0,0 +1,206 @@ +--- +title: Seleção +slug: Web/API/Seleção +tags: + - API + - Experimental + - Interface + - Referencia + - Seleção +translation_of: Web/API/Selection +--- +
{{ ApiRef("DOM") }}{{SeeCompatTable}}
+ +

Um objeto Selection representa um intervalo do texto selecionado pelo usuário ou a posição atual do cursor. Para obter o objeto Selection para inspecionar ou modificar, use {{DOMxRef("Window.getSelection()")}}.

+ +

O usuário pode fazer a seleção da esquerda para a direita (na orientação do documento) ou da direita para a esquerta (orientação inversa do documento). O atributo anchor (âncora) é onde o usuário iniciou a seleção e o atributo focus (foco) é onde o usuário terminou a seleção. Se você fizer a seleção utilizando um mouse no desktop, o anchor é definido onde você pressionou o botão do mouse e o focus é definido onde você soltou o botão do mouse. Anchor e focus não devem ser confundidos com a posição inicial e final da seleção, pois o anchor pode ser definido antes do focus ou vice versa, dependendo da direção em que você fez sua seleção.

+ +

Propriedades

+ +
+
{{DOMxRef("Selection.anchorNode")}}{{ReadOnlyInline}}
+
Retorna o {{DOMxRef("Node")}} onde a seleção começou.
+
{{DOMxRef("Selection.anchorOffset")}}{{ReadOnlyInline}}
+
Retorna um número representando o deslocamento do anchor dentro do elemento Se o elemento for do tipo text node, o número retornado será o número de caracteres no elemento que precedem o anchor (clique inicial da seleção). Se o elemento for do tipo element (qualquer tag html que não seja text node), o número retornado será o número de nós filhos do elemento que precedem o anchor.
+
{{DOMxRef("Selection.focusNode")}}{{ReadOnlyInline}}
+
Retorna o {{DOMxRef("Node")}} onde a seleção termina.
+
{{DOMxRef("Selection.focusOffset")}}{{ReadOnlyInline}}
+
Retorna um número representando o deslocamento do focus dentro do elemento Se o elemento for do tipo text node, o número retornado será o número de caracteres no elemento que precedem o focus (posição onde o mouse foi solto). Se o elemento for do tipo element (qualquer tag html que não seja text node), o número retornado será o número de nós filhos do elemento que precedem o focus.
+
{{DOMxRef("Selection.isCollapsed")}}{{ReadOnlyInline}}
+
Retorna um valor booleano indicando se o início e o final da seleção são a mesma posição, ou seja, começou e terminou no mesmo lugar.
+
{{DOMxRef("Selection.rangeCount")}}{{ReadOnlyInline}}
+
Retorna no número de intervalos da seleção.
+
{{DOMxRef("Selection.type")}}{{ReadOnlyInline}}
+
Retorna um {{DOMxRef("DOMString")}} descrevento o tipo da seleção atual.
+
+ +

Métodos

+ +
+
{{DOMxRef("Selection.addRange()")}}
+
Um objeto {{DOMxRef("Range")}} que será adicionado na seleção.
+
{{DOMxRef("Selection.collapse()")}}
+
Colapsa a seleção atual em um único ponto.
+
{{DOMxRef("Selection.collapseToEnd()")}}
+
Colapsa a seleção para o final do último intervalo na seleção.
+
{{DOMxRef("Selection.collapseToStart()")}}
+
Colapsa a seleção para o início do primeiro intervalo na seleção.
+
{{DOMxRef("Selection.containsNode()")}}
+
Indica se um certo nó é parte da seleção.
+
{{DOMxRef("Selection.deleteFromDocument()")}}
+
Apaga o conteúdo da seleção do documento.
+
{{DOMxRef("Selection.empty()")}}
+
Remove todos os intervalos da seleção. Este é um apelido para removeAllRanges() — Veja {{DOMxRef("Selection.removeAllRanges()")}} para mais detalhes.
+
{{DOMxRef("Selection.extend()")}}
+
Move o focus (final da seleção) para um ponto específico.
+
{{DOMxRef("Selection.getRangeAt()")}}
+
Retorna um objeto {{DOMxRef("Range")}} represetando um dos intervalos atualmente selecionados.
+
{{DOMxRef("Selection.modify()")}}{{Non-standard_Inline}}
+
Altera a seleção atual.
+
{{DOMxRef("Selection.removeRange()")}}
+
Remove um intervalo da seleção.
+
{{DOMxRef("Selection.removeAllRanges()")}}
+
Remove todos os intervalos da seleção.
+
{{DOMxRef("Selection.selectAllChildren()")}}
+
Adiciona todos os filhos do nó especificado para a seleção.
+
{{DOMxRef("Selection.setBaseAndExtent()")}}
+
Define que a seleção será um intervalo incluindo todos ou partes dos dois nós DOM especificados, e qualquer conteúdo entre esses nós.
+
{{DOMxRef("Selection.setPosition()")}}
+
Colapsa a seleção atual para um único ponto. Este é um apelido para collapse() — Veja {{DOMxRef("Selection.collapse()")}} para mais detalhes.
+
{{DOMxRef("Selection.toString()")}}
+
Retorna uma string atualmente representada pelo objeto selection, i.e. o texto atualmente selecionado.
+
+ +

Notas

+ +

Representação da seleção em formato de String

+ +

Chamando a função {{DOMxRef("Selection.toString()")}} retorna o texto selecionado, e.g.:

+ +
var selObj = window.getSelection();
+window.alert(selObj);
+
+ +

Perceba que usando um objeto selection como argumento de window.alert executará o metodo toString automaticamente.

+ +

Multiplos intervalos em uma seleção

+ +

Um objeto selection representa os {{DOMxRef("range","intervalos")}} que o usuário selecionou.
+ Normalmente é apenas um intervalo, acessado da seguinte forma:

+ +
+
var selObj = window.getSelection();
+var range  = selObj.getRangeAt(0);
+
+ + + +

Como consta nas Especificações da API de seleção, a API foi inicialmente criada pela Netscape e usados multiplos intervalos, por instância, para permitir ao usuário selecionar uma coluna de uma {{HTMLElement("table")}}. Outros navegadores como Gecko não implementaram multiplos intervalos, e a especificação exige que a seleção sempre tenha um único intervalo.

+ +

Seleção e foco de input

+ +

Seleção e foco de input (indicado por {{DOMxRef("Document.activeElement")}}) tem uma relação complexa, que depende do navegador. Para um código compatível com vários navegadores, o melhor é manter os códigos separados.

+ +

O Safari e o Chrome (ao contrário do Firefox) historicamente foca no elemento contendo a seleção quando a seleção é modificada programaticamente, mas isto pode mudar no futuro (veja W3C bug 14383 e {{WebKitBug("38696")}}).

+ +

Comportamento da API de Seleção em termos de edição e alterações de foco do host

+ +

A API de Seleção tem um comportamento comum (i.e. compartilhado entre navegadores) que define como o comportamento do foco muda para elemento editável, após alguns desses métodos serem executados.

+ +

Os comportamentos são que um elemento editado recebe o foco se anteriormente a seleção estiver fora dele, então um método da API de seleção é executado e causa uma nova seleção que será feita em um único intervalo dentro do elemento sendo editado. O foco então é movido para o final do elemento.

+ +
+

Nota: Os métodos da API de seleção, move o foco apenas para o elemento sendo editado, não para outro elemento que pode receber o foco (e.g. {{HTMLElement("a")}}).

+
+ +

O comportamento acima é aplicado para as seleções feitas usando os seguintes métodos:

+ + + +

e quando o intervalo é modificado usando os seguintes métodos:

+ + + +

Glossário

+ +

Outras palavras chaves usadas nesta seção.

+ +
+
anchor
+
O anchor de uma seleção é o ponto inicial da seleção. Quando a seleção é feita com um mouse, é onde o botão do mouse é inicialmente pressionado. Quando o usuário altera a seleção usando o mouse ou teclado, o anchor não move.
+
Elemento editável
+
Um elemento editável — i.e. um elemento HTML com o atributo {{htmlattrxref("contenteditable")}} definido, ou o HTML filho de um documento estiver com o {{DOMxRef("Document.designMode", "designMode")}} habilitado.
+
foco de uma seleção
+
O foco da seleção é o ponto final da seleção. Quando feita a seleção com um mouse, o focus é onde o botão do mouse foi solto. Quando o usuário muda a seleção usando o mouse ou teclado, o focus é o final da seleção que move. Nota: Não é o mesmo que o elemento selecionado do documento, como retornado em {{DOMxRef("document.activeElement")}}.
+
intervalo
+
Um intervalo é uma parte contínua do documento. Um intervalo pode conter nós inteiros ou partes de nós, como uma parte de um text node. Um usuário normalmente irá selecionar um único intervalo por vez, mas é possível que o usuário selecione multiplos intervalos (e.g. usando a tecla Control). Um intervalo pode ser obtido de uma seleção como um objeto {{DOMxRef("range")}}. Um objeto de intervalo pode ser criado no DOM e programaticamente adicionada ou removida de uma seleção.
+
+ +

Especificações

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Selection API", "#selection-interface", "Seleção")}}{{Spec2("Selection API")}}A especificação da API de Seleção é baseada na especificação da API de edição HTML e focada na funcionalidade relacionada à seleção.
{{SpecName("HTML Editing", "#selection", "Seleção")}}{{Spec2("HTML Editing")}}Definição incial (antiga).
+ +

Compatibilidade de navegadores

+ + + +

{{Compat("api.Selection")}}

+ +

Veja também

+ + + +

Notas da Gecko

+ + + +
+
diff --git "a/files/pt-br/web/api/sele\303\247\303\243o/index.html" "b/files/pt-br/web/api/sele\303\247\303\243o/index.html" deleted file mode 100644 index 9cac677942..0000000000 --- "a/files/pt-br/web/api/sele\303\247\303\243o/index.html" +++ /dev/null @@ -1,206 +0,0 @@ ---- -title: Seleção -slug: Web/API/Seleção -tags: - - API - - Experimental - - Interface - - Referencia - - Seleção -translation_of: Web/API/Selection ---- -
{{ ApiRef("DOM") }}{{SeeCompatTable}}
- -

Um objeto Selection representa um intervalo do texto selecionado pelo usuário ou a posição atual do cursor. Para obter o objeto Selection para inspecionar ou modificar, use {{DOMxRef("Window.getSelection()")}}.

- -

O usuário pode fazer a seleção da esquerda para a direita (na orientação do documento) ou da direita para a esquerta (orientação inversa do documento). O atributo anchor (âncora) é onde o usuário iniciou a seleção e o atributo focus (foco) é onde o usuário terminou a seleção. Se você fizer a seleção utilizando um mouse no desktop, o anchor é definido onde você pressionou o botão do mouse e o focus é definido onde você soltou o botão do mouse. Anchor e focus não devem ser confundidos com a posição inicial e final da seleção, pois o anchor pode ser definido antes do focus ou vice versa, dependendo da direção em que você fez sua seleção.

- -

Propriedades

- -
-
{{DOMxRef("Selection.anchorNode")}}{{ReadOnlyInline}}
-
Retorna o {{DOMxRef("Node")}} onde a seleção começou.
-
{{DOMxRef("Selection.anchorOffset")}}{{ReadOnlyInline}}
-
Retorna um número representando o deslocamento do anchor dentro do elemento Se o elemento for do tipo text node, o número retornado será o número de caracteres no elemento que precedem o anchor (clique inicial da seleção). Se o elemento for do tipo element (qualquer tag html que não seja text node), o número retornado será o número de nós filhos do elemento que precedem o anchor.
-
{{DOMxRef("Selection.focusNode")}}{{ReadOnlyInline}}
-
Retorna o {{DOMxRef("Node")}} onde a seleção termina.
-
{{DOMxRef("Selection.focusOffset")}}{{ReadOnlyInline}}
-
Retorna um número representando o deslocamento do focus dentro do elemento Se o elemento for do tipo text node, o número retornado será o número de caracteres no elemento que precedem o focus (posição onde o mouse foi solto). Se o elemento for do tipo element (qualquer tag html que não seja text node), o número retornado será o número de nós filhos do elemento que precedem o focus.
-
{{DOMxRef("Selection.isCollapsed")}}{{ReadOnlyInline}}
-
Retorna um valor booleano indicando se o início e o final da seleção são a mesma posição, ou seja, começou e terminou no mesmo lugar.
-
{{DOMxRef("Selection.rangeCount")}}{{ReadOnlyInline}}
-
Retorna no número de intervalos da seleção.
-
{{DOMxRef("Selection.type")}}{{ReadOnlyInline}}
-
Retorna um {{DOMxRef("DOMString")}} descrevento o tipo da seleção atual.
-
- -

Métodos

- -
-
{{DOMxRef("Selection.addRange()")}}
-
Um objeto {{DOMxRef("Range")}} que será adicionado na seleção.
-
{{DOMxRef("Selection.collapse()")}}
-
Colapsa a seleção atual em um único ponto.
-
{{DOMxRef("Selection.collapseToEnd()")}}
-
Colapsa a seleção para o final do último intervalo na seleção.
-
{{DOMxRef("Selection.collapseToStart()")}}
-
Colapsa a seleção para o início do primeiro intervalo na seleção.
-
{{DOMxRef("Selection.containsNode()")}}
-
Indica se um certo nó é parte da seleção.
-
{{DOMxRef("Selection.deleteFromDocument()")}}
-
Apaga o conteúdo da seleção do documento.
-
{{DOMxRef("Selection.empty()")}}
-
Remove todos os intervalos da seleção. Este é um apelido para removeAllRanges() — Veja {{DOMxRef("Selection.removeAllRanges()")}} para mais detalhes.
-
{{DOMxRef("Selection.extend()")}}
-
Move o focus (final da seleção) para um ponto específico.
-
{{DOMxRef("Selection.getRangeAt()")}}
-
Retorna um objeto {{DOMxRef("Range")}} represetando um dos intervalos atualmente selecionados.
-
{{DOMxRef("Selection.modify()")}}{{Non-standard_Inline}}
-
Altera a seleção atual.
-
{{DOMxRef("Selection.removeRange()")}}
-
Remove um intervalo da seleção.
-
{{DOMxRef("Selection.removeAllRanges()")}}
-
Remove todos os intervalos da seleção.
-
{{DOMxRef("Selection.selectAllChildren()")}}
-
Adiciona todos os filhos do nó especificado para a seleção.
-
{{DOMxRef("Selection.setBaseAndExtent()")}}
-
Define que a seleção será um intervalo incluindo todos ou partes dos dois nós DOM especificados, e qualquer conteúdo entre esses nós.
-
{{DOMxRef("Selection.setPosition()")}}
-
Colapsa a seleção atual para um único ponto. Este é um apelido para collapse() — Veja {{DOMxRef("Selection.collapse()")}} para mais detalhes.
-
{{DOMxRef("Selection.toString()")}}
-
Retorna uma string atualmente representada pelo objeto selection, i.e. o texto atualmente selecionado.
-
- -

Notas

- -

Representação da seleção em formato de String

- -

Chamando a função {{DOMxRef("Selection.toString()")}} retorna o texto selecionado, e.g.:

- -
var selObj = window.getSelection();
-window.alert(selObj);
-
- -

Perceba que usando um objeto selection como argumento de window.alert executará o metodo toString automaticamente.

- -

Multiplos intervalos em uma seleção

- -

Um objeto selection representa os {{DOMxRef("range","intervalos")}} que o usuário selecionou.
- Normalmente é apenas um intervalo, acessado da seguinte forma:

- -
-
var selObj = window.getSelection();
-var range  = selObj.getRangeAt(0);
-
- - - -

Como consta nas Especificações da API de seleção, a API foi inicialmente criada pela Netscape e usados multiplos intervalos, por instância, para permitir ao usuário selecionar uma coluna de uma {{HTMLElement("table")}}. Outros navegadores como Gecko não implementaram multiplos intervalos, e a especificação exige que a seleção sempre tenha um único intervalo.

- -

Seleção e foco de input

- -

Seleção e foco de input (indicado por {{DOMxRef("Document.activeElement")}}) tem uma relação complexa, que depende do navegador. Para um código compatível com vários navegadores, o melhor é manter os códigos separados.

- -

O Safari e o Chrome (ao contrário do Firefox) historicamente foca no elemento contendo a seleção quando a seleção é modificada programaticamente, mas isto pode mudar no futuro (veja W3C bug 14383 e {{WebKitBug("38696")}}).

- -

Comportamento da API de Seleção em termos de edição e alterações de foco do host

- -

A API de Seleção tem um comportamento comum (i.e. compartilhado entre navegadores) que define como o comportamento do foco muda para elemento editável, após alguns desses métodos serem executados.

- -

Os comportamentos são que um elemento editado recebe o foco se anteriormente a seleção estiver fora dele, então um método da API de seleção é executado e causa uma nova seleção que será feita em um único intervalo dentro do elemento sendo editado. O foco então é movido para o final do elemento.

- -
-

Nota: Os métodos da API de seleção, move o foco apenas para o elemento sendo editado, não para outro elemento que pode receber o foco (e.g. {{HTMLElement("a")}}).

-
- -

O comportamento acima é aplicado para as seleções feitas usando os seguintes métodos:

- - - -

e quando o intervalo é modificado usando os seguintes métodos:

- - - -

Glossário

- -

Outras palavras chaves usadas nesta seção.

- -
-
anchor
-
O anchor de uma seleção é o ponto inicial da seleção. Quando a seleção é feita com um mouse, é onde o botão do mouse é inicialmente pressionado. Quando o usuário altera a seleção usando o mouse ou teclado, o anchor não move.
-
Elemento editável
-
Um elemento editável — i.e. um elemento HTML com o atributo {{htmlattrxref("contenteditable")}} definido, ou o HTML filho de um documento estiver com o {{DOMxRef("Document.designMode", "designMode")}} habilitado.
-
foco de uma seleção
-
O foco da seleção é o ponto final da seleção. Quando feita a seleção com um mouse, o focus é onde o botão do mouse foi solto. Quando o usuário muda a seleção usando o mouse ou teclado, o focus é o final da seleção que move. Nota: Não é o mesmo que o elemento selecionado do documento, como retornado em {{DOMxRef("document.activeElement")}}.
-
intervalo
-
Um intervalo é uma parte contínua do documento. Um intervalo pode conter nós inteiros ou partes de nós, como uma parte de um text node. Um usuário normalmente irá selecionar um único intervalo por vez, mas é possível que o usuário selecione multiplos intervalos (e.g. usando a tecla Control). Um intervalo pode ser obtido de uma seleção como um objeto {{DOMxRef("range")}}. Um objeto de intervalo pode ser criado no DOM e programaticamente adicionada ou removida de uma seleção.
-
- -

Especificações

- - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("Selection API", "#selection-interface", "Seleção")}}{{Spec2("Selection API")}}A especificação da API de Seleção é baseada na especificação da API de edição HTML e focada na funcionalidade relacionada à seleção.
{{SpecName("HTML Editing", "#selection", "Seleção")}}{{Spec2("HTML Editing")}}Definição incial (antiga).
- -

Compatibilidade de navegadores

- - - -

{{Compat("api.Selection")}}

- -

Veja também

- - - -

Notas da Gecko

- - - -
-
diff --git a/files/pt-br/web/api/svgaelement/svgalement.target/index.html b/files/pt-br/web/api/svgaelement/svgalement.target/index.html deleted file mode 100644 index e197ee81e5..0000000000 --- a/files/pt-br/web/api/svgaelement/svgalement.target/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: SVGAElement.target -slug: Web/API/SVGAElement/SVGAlement.target -tags: - - Imagem vetorial - - Vetores -translation_of: Web/API/SVGAElement/target -translation_of_original: Web/API/SVGAElement/SVGAlement.target ---- -

{{APIRef("SVGAElement")}}

- -

O SVGAElement.target propriedade somente ler de {{domxref("SVGAElement")}} retorna um objeto {{domxref("SVGAnimatedString")}} que especifica a porção de um alvo sendo ele "window", "frame" ou "pane" no qual um documento será aberto quando o link for acionado.

- -

Esta propriedade é usada quando existem dois ou mais possiveis alvos(destinos) para o documento, por exemplo, quando o documento pai é um arquivo .html ou .xhtml com varias telas (multi-frame).

- -

Sintaxe

- -
myLink.target = 'value';
- -

Valor

- -

Um {{domxref("SVGAnimatedString")}} indica o destino final do recurso que abre o documento assim que o link é acionado.

- -

Valores para {{domxref("target")}} você pode ver aqui.

- -

Exemplo

- -

O código é foi retirado de "SVGAElement example code"

- -
...
-var linkRef = document.querySelector('a');
-linkRef.target ='_blank';
-...
- -

Especificações

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('SVG1.1', 'text.html#InterfaceSVGAElement', 'target')}}{{Spec2('SVG1.1')}} 
- -

Compatibilidade com o navegador

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}9.0{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -

Veja também

- - diff --git a/files/pt-br/web/api/svgaelement/target/index.html b/files/pt-br/web/api/svgaelement/target/index.html new file mode 100644 index 0000000000..e197ee81e5 --- /dev/null +++ b/files/pt-br/web/api/svgaelement/target/index.html @@ -0,0 +1,106 @@ +--- +title: SVGAElement.target +slug: Web/API/SVGAElement/SVGAlement.target +tags: + - Imagem vetorial + - Vetores +translation_of: Web/API/SVGAElement/target +translation_of_original: Web/API/SVGAElement/SVGAlement.target +--- +

{{APIRef("SVGAElement")}}

+ +

O SVGAElement.target propriedade somente ler de {{domxref("SVGAElement")}} retorna um objeto {{domxref("SVGAnimatedString")}} que especifica a porção de um alvo sendo ele "window", "frame" ou "pane" no qual um documento será aberto quando o link for acionado.

+ +

Esta propriedade é usada quando existem dois ou mais possiveis alvos(destinos) para o documento, por exemplo, quando o documento pai é um arquivo .html ou .xhtml com varias telas (multi-frame).

+ +

Sintaxe

+ +
myLink.target = 'value';
+ +

Valor

+ +

Um {{domxref("SVGAnimatedString")}} indica o destino final do recurso que abre o documento assim que o link é acionado.

+ +

Valores para {{domxref("target")}} você pode ver aqui.

+ +

Exemplo

+ +

O código é foi retirado de "SVGAElement example code"

+ +
...
+var linkRef = document.querySelector('a');
+linkRef.target ='_blank';
+...
+ +

Especificações

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('SVG1.1', 'text.html#InterfaceSVGAElement', 'target')}}{{Spec2('SVG1.1')}} 
+ +

Compatibilidade com o navegador

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}9.0{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

Veja também

+ + diff --git a/files/pt-br/web/api/touch_events/index.html b/files/pt-br/web/api/touch_events/index.html new file mode 100644 index 0000000000..df21cdf335 --- /dev/null +++ b/files/pt-br/web/api/touch_events/index.html @@ -0,0 +1,353 @@ +--- +title: Eventos do Toque +slug: Web/Guide/Events/Touch_events +tags: + - Avançado + - DOM + - Evento + - Guía + - Mobile + - Visualização +translation_of: Web/API/Touch_events +--- +

Com a finalidade de fornecer suporte de qualidade para interfaces baseadas em toque (touch), os eventos de touch oferecem a capacidade de interpretar a atividade em telas sensíveis ao toque ou trackpads.

+ +

Definições

+ +
+
Surface
+
A superfície sensível ao toque. Pode ser uma tela ou trackpad.
+
+ +
+
Touch point
+
Um ponto de contato com a superfície. Pode ser um dedo (ou cotovelo, orelha, nariz, o que seja, mas provavelmente, um dedo) ou uma caneta.
+
+ +

Interfaces

+ +
+
{{ domxref("TouchEvent") }}
+
Representa um evento quando ocorre o estado de toque na superfície.
+
{{ domxref("Touch") }}
+
Representa um único ponto de contato entre o usuário e a superfície sensível a toque.
+
{{ domxref("TouchList") }}
+
Representa um grupo de toques, isto é usado quando usuário tem por exemplo, vários dedos ao mesmo tempo sobre a superfície.
+
{{ domxref("DocumentTouch") }}
+
Contém métodos de conveniência para criar {{ domxref("Touch") }} e objetos {{ domxref("TouchList") }} .
+
+ +

Exemplo

+ +

Este exemplo acompanha múltiplos pontos de contato de cada vez, permitindo o usuário desenhe em um {{ HTMLElement("canvas") }} com mais de um dedo por vez. Ele só funcionará em um browser que tenha suporte a eventos de toque.

+ +
Nota: O texto a seguir utiliza o termo "finger" quando descreve o contato com a superfície, mas poderia, é claro, ser também uma caneta ou outro método de contato.
+ +

Crie um canvas

+ +
<canvas id="canvas" width="600" height="600" style="border:solid black 1px;">
+  Seu browser não tem suporte ao elemento canvas.
+</canvas>
+<br>
+<button onclick="startup()">Initialize</button>
+<br>
+Log: <pre id="log" style="border: 1px solid #ccc;"></pre>
+
+ +

Configurado os eventos

+ +

Quando uma página é carregada, a função startup() mostrada abaixo deve ser chamada pelo nosso elemento {{ HTMLElement("body") }} através do atributo onload (Mas no exemplo usamos um botão para adicioná-lo, devido as limitações do MDN live example system).

+ +
function startup() {
+  var el = document.getElementsByTagName("canvas")[0];
+  el.addEventListener("touchstart", handleStart, false);
+  el.addEventListener("touchend", handleEnd, false);
+  el.addEventListener("touchcancel", handleCancel, false);
+  el.addEventListener("touchleave", handleEnd, false);
+  el.addEventListener("touchmove", handleMove, false);
+  log("initialized.");
+}
+
+ +

Define simplesmento todos os ouvintes dos eventos do nosso elemento {{ HTMLElement("canvas") }} para que possamos trabalhar com os eventos de toque quando eles ocorrerem.

+ +

Rastreando novos toques

+ +

Vamos acompanhar os toques em seu progresso.

+ +
var ongoingTouches = new Array; 
+ +

Quando ocorre um evento touchstart, indicando que um novo toque na superfície tenha ocorrido, a função abaixo handleStart() é chamada. 

+ +
function handleStart(evt) {
+  evt.preventDefault();
+  log("touchstart.");
+  var el = document.getElementsByTagName("canvas")[0];
+  var ctx = el.getContext("2d");
+  var touches = evt.changedTouches;
+
+  for (var i=0; i < touches.length; i++) {
+    log("touchstart:"+i+"...");
+    ongoingTouches.push(copyTouch(touches[i]));
+    var color = colorForTouch(touches[i]);
+    ctx.beginPath();
+    ctx.arc(touches[i].pageX, touches[i].pageY, 4, 0,2*Math.PI, false);  // a circle at the start
+    ctx.fillStyle = color;
+    ctx.fill();
+    log("touchstart:"+i+".");
+  }
+}
+
+ +

A chamada {{ domxref("event.preventDefault()") }} mantem o browser a processa o evento de toque ( isso também previne que um mouse event seja despachado). Então, temos o contexto e puxamos a lista de pontos de contato disparados noa propriedade do evento {{ domxref("TouchEvent.changedTouches") }}.

+ +

Depois disso, nós iteramos sobre todos os objetos {{ domxref("Touch") }} da lista e os adicionamos em um array de pontos de contatos ativos e definimos o ponto inicial para desenhar um pequeno circulo; estamos usando um raio de 4 pixels, então um círculo de 4 pixels irá aparecer em nosso canvas.

+ +

Desenhando movimento do toque

+ +

Cada vez que um ou mais dedos se movem, um evento de TouchMove é disparado, assim chamando nossa função handleMove(). A sua responsabilidade neste exemplo é atualizar as informações armazenadas e desenhar uma linha a partir da posição anterior para a atual de cada toque.

+ +
function handleMove(evt) {
+  evt.preventDefault();
+  var el = document.getElementsByTagName("canvas")[0];
+  var ctx = el.getContext("2d");
+  var touches = evt.changedTouches;
+
+  for (var i=0; i < touches.length; i++) {
+    var color = colorForTouch(touches[i]);
+    var idx = ongoingTouchIndexById(touches[i].identifier);
+
+    if(idx >= 0) {
+      log("continuing touch "+idx);
+      ctx.beginPath();
+      log("ctx.moveTo("+ongoingTouches[idx].pageX+", "+ongoingTouches[idx].pageY+");");
+      ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY);
+      log("ctx.lineTo("+touches[i].pageX+", "+touches[i].pageY+");");
+      ctx.lineTo(touches[i].pageX, touches[i].pageY);
+      ctx.lineWidth = 4;
+      ctx.strokeStyle = color;
+      ctx.stroke();
+
+      ongoingTouches.splice(idx, 1, copyTouch(touches[i]));  // swap in the new touch record
+      log(".");
+    } else {
+      log("can't figure out which touch to continue");
+    }
+  }
+}
+
+ +

Esta interação sobre os toques também muda, mas parece em cache as  informações em um array para cada toque anterior, a fim de determinar um pont de partida e o destino para o desenho do trajeto. Isto é feito para olhar cada touch da propriedade {{ domxref("Touch.identifier") }}. Esta propriedade é um número inteiro único para cada toque, e mantém-se consistente para cada evento durante o tempo de contato de cada dedo como a superfície.

+ +

Isto permite obter as coordenadas da posição anterior de cada contato e usar os métodos de contexto apropriado para desenhar uma linha que une as duas posições.

+ +

Depois de desenhar a linha, nós chamamos Array.splice() para substituir as informações previas sobre o ponto de toque com a informação atual no array ongoingTouches.

+ +

Gerenciando o final do evento de toque 

+ +

Quando o usuário retira o dedo da superfície , um evento touchend é disparado.  Da mesma forma, se o dedo deslisa para fora do canvas, nós teremos um evento touchleave disparado. Nós tratamos da mesma forma em ambos os casos:  chamamos  a função handleEnd(). A sua missão é desenhar uma linha para o final do ponto de toque e remover o ponto de toque da lista ongoing.

+ +
function handleEnd(evt) {
+  evt.preventDefault();
+  log("touchend/touchleave.");
+  var el = document.getElementsByTagName("canvas")[0];
+  var ctx = el.getContext("2d");
+  var touches = evt.changedTouches;
+
+  for (var i=0; i < touches.length; i++) {
+    var color = colorForTouch(touches[i]);
+    var idx = ongoingTouchIndexById(touches[i].identifier);
+
+    if(idx >= 0) {
+      ctx.lineWidth = 4;
+      ctx.fillStyle = color;
+      ctx.beginPath();
+      ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY);
+      ctx.lineTo(touches[i].pageX, touches[i].pageY);
+      ctx.fillRect(touches[i].pageX-4, touches[i].pageY-4, 8, 8);  // and a square at the end
+      ongoingTouches.splice(idx, 1);  // remove it; we're done
+    } else {
+      log("can't figure out which touch to end");
+    }
+  }
+}
+
+ +

Isto é muito semelhante a função anterior, as únicas diferenças reais são o desenho de um pequeno quadrado para marcar o fim e quando chamamos Array.splice(), nós simplesmente removemos a antiga entrada da lista de toque do ongoing, sem adição das informações atualizadas. O resultado é que paramos o tracking do ponto de contato.

+ +

Tratando toques cancelados

+ +

Se o dedo do usuário deslisa em uma UI de um navegador, ou o toque de outra forma precisa ser cancelado, o evento touchcancel é disparado e nos chamamaos a função handleCancel().

+ +
function handleCancel(evt) {
+  evt.preventDefault();
+  log("touchcancel.");
+  var touches = evt.changedTouches;
+
+  for (var i=0; i < touches.length; i++) {
+    ongoingTouches.splice(i, 1);  // remove it; we're done
+  }
+}
+
+ +

Uma vez que a idéia dé cancelar imediatamento o toque, nós simplesmente removemos da lista de ongoing sem desenhar uma linha final.

+ +

Funções de conveniência

+ +

Este exemplo usa duas funções de conveniência que deve ser olhado rapidamente para ajudar a fazer o resto do código mais claro

+ +

Selecionando a cor para cada toque

+ +

A fim de fazer cada toque desenhar com uma cor diferente, a função  colorForTouch()  é usada para escolher uma cor com base em um identificador único do toque, Este identificador é um número opaco, mas pelo menos podemos conta com ele diferindo entre os toques ativos no momento.

+ +
function colorForTouch(touch) {
+  var r = touch.identifier % 16;
+  var g = Math.floor(touch.identifier / 3) % 16;
+  var b = Math.floor(touch.identifier / 7) % 16;
+  r = r.toString(16); // make it a hex digit
+  g = g.toString(16); // make it a hex digit
+  b = b.toString(16); // make it a hex digit
+  var color = "#" + r + g + b;
+  log("color for touch with identifier " + touch.identifier + " = " + color);
+  return color;
+}
+
+ +

O resultado desta função é uma string que pode ser usada ao chamar as funções {{ HTMLElement("canvas") }} para setar a cor do desenho. Por exemplo, para um valor  {{ domxref("Touch.identifier") }} de 10, o resultado será a string "#aaa".

+ +

Copiando touch objects

+ +

Alguns browsers (mobile Safari, por exemplo) re-usa touch objects entre os eventos, por isso é melhor ter cuidado para copiar os bits, em vez de fazer referência a todo objeto.

+ +
function copyTouch(touch) {
+  return { identifier: touch.identifier, pageX: touch.pageX, pageY: touch.pageY };
+}
+ +

Encontrando um toque ongoing

+ +

A função ongoingTouchIndexById() abaixo verifica através do array ongoingTouches para encontrar o toque correspondente ao indentificador passado, então ele retorna o índice do touch no array.

+ +
function ongoingTouchIndexById(idToFind) {
+  for (var i=0; i < ongoingTouches.length; i++) {
+    var id = ongoingTouches[i].identifier;
+
+    if (id == idToFind) {
+      return i;
+    }
+  }
+  return -1;    // não econtrado
+}
+
+ +

Mostrando o que está acontecendo

+ +
function log(msg) {
+  var p = document.getElementById('log');
+  p.innerHTML = msg + "\n" + p.innerHTML;
+}
+ +

If your browser supports it, you can {{ LiveSampleLink('Example', 'see it live') }}.

+ +

jsFiddle example

+ +

Additional tips

+ +

This section provides additional tips on how to handle touch events in your web application.

+ +

Handling clicks

+ +

Since calling preventDefault() on a touchstart or the first touchmove event of a series prevents the corresponding mouse events from firing, it's common to call preventDefault() on touchmove rather than touchstart. That way, mouse events can still fire and things like links will continue to work. Alternatively, some frameworks have taken to refiring touch events as mouse events for this same purpose. (This example is oversimplified and may result in strange behavior. It is only intended as a guide.)

+ +
function onTouch(evt) {
+  evt.preventDefault();
+  if (evt.touches.length > 1 || (evt.type == "touchend" && evt.touches.length > 0))
+    return;
+
+  var newEvt = document.createEvent("MouseEvents");
+  var type = null;
+  var touch = null;
+  switch (evt.type) {
+    case "touchstart":    type = "mousedown";    touch = evt.changedTouches[0];break;
+    case "touchmove":        type = "mousemove";    touch = evt.changedTouches[0];break;
+    case "touchend":        type = "mouseup";    touch = evt.changedTouches[0];break;
+  }
+  newEvt.initMouseEvent(type, true, true, evt.originalTarget.ownerDocument.defaultView, 0,
+    touch.screenX, touch.screenY, touch.clientX, touch.clientY,
+    evt.ctrlKey, evt.altKey, evt.shirtKey, evt.metaKey, 0, null);
+  evt.originalTarget.dispatchEvent(newEvt);
+}
+
+ +

Calling preventDefault() only on a second touch

+ +

One technique for preventing things like pinchZoom on a page is to call preventDefault() on the second touch in a series. This behavior is not well defined in the touch events spec, and results in different behavior for different browsers (i.e., iOS will prevent zooming but still allow panning with both fingers; Android will allow zooming but not panning; Opera and Firefox currently prevent all panning and zooming.) Currently, it's not recommended to depend on any particular behavior in this case, but rather to depend on meta viewport to prevent zooming.

+ +
+
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatChrome("22.0") }}{{ CompatGeckoDesktop("18.0") }}
+ Disabled with 24 ({{ bug(888304) }})		{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}(Yes){{ CompatGeckoMobile("6.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

Gecko notes

+ +

The dom.w3c_touch_events.enabled tri-state preference can be used to disable (0), enable (1), and auto-detect(2) support for standard touch events; by default, they're on auto-detect(2). After changing the preference, you must restart the browser for the changes to take effect.

+ +
+

Prior to {{Gecko("12.0")}}, Gecko did not support multi-touch; only one touch at a time was reported.

+
+ +
+

Note: As of {{Gecko("24.0")}}, the touch events support introduced with {{Gecko("18.0")}} has been disabled on the desktop version of Firefox, as some popular sites including Google and Twitter are not working properly. Once the bug is fixed, the API will be enabled again. To enable it anyway, open about:config and set the dom.w3c_touch_events.enabled pref to 2. The mobile versions including Firefox for Android and Firefox OS are not affected by this change. Also, the API has been enabled on the Metro-style version of Firefox for Windows 8.

+
+ +
Note: Prior to {{Gecko("6.0") }}, Gecko offered a proprietary touch event API. That API is now deprecated; you should switch to this one.
diff --git a/files/pt-br/web/api/web_animations_api/usando_a_web_animations_api/index.html b/files/pt-br/web/api/web_animations_api/usando_a_web_animations_api/index.html deleted file mode 100644 index 2743f68d65..0000000000 --- a/files/pt-br/web/api/web_animations_api/usando_a_web_animations_api/index.html +++ /dev/null @@ -1,358 +0,0 @@ ---- -title: Usando a Web Animations API -slug: Web/API/Web_Animations_API/Usando_a_Web_Animations_API -tags: - - Alice - - Animação - - CSS - - Guía - - Iniciante - - JavaScript - - Timing - - Tutorial - - animar - - duration - - keyframes - - pausar - - pause - - play - - quadro-chave - - reverse - - web animations api -translation_of: Web/API/Web_Animations_API/Using_the_Web_Animations_API ---- -

{{DefaultAPISidebar("Web Animations")}}

- -

A Web Animations API nos possibilita criar animações e controlar sua reprodução pelo JavaScript. Esse artigo vai te demonstrar esses conceitos com demonstrações e tutoriais com o temática de Alice no País das Maravilhas.

- -

Conhecendo a Web Animations API

- -

A Web Animations API abre a engine de animação do browser para os desenvolvedores manipularem via JavaScript. Esta API foi construída para se basear nas implementações das Animações CSS e Transições CSS, e deixam a porta aberta para futuros efeitos de animação. É um dos métodos mais performáticos para se animar na Web, permitindo que o browser faça internamente suas próprias otimizações, sem precisar depender de hacks, coerções ou {{domxref("Window.requestAnimationFrame()")}}.

- -

Com a Web Animations API, podemos transferir as animações interativas das folhas de estilo para o JavaScript, separando comportamento de apresentação. Não vamos precisar mais depender de técnicas muito dependentes do DOM como propriedades do CSS e escopo de classes para controlar a direção da reprodução. E diferente de CSS puro e declarativo, JavaScript também te possibilita definir dinâmicamente valores: de propriedades à duração. Para criar bibilotecas de animação à criar animações interativas, a Web Animations API pode ser a ferramenta perfeita para o trabalho. Vamos ver o que ela pode fazer!

- -

Suporte de Navegadores

- -

O suporte básico para as funcionalidades da Web Animations API discutidas neste artigo estão disponíveis no Firefox 48+, Chrome 36+ e Safari 13.1+. Também existe um polyfill prático que verifica o suporte e adiciona as funcionalidades onde for necessário.

- -

Escrevendo Animações CSS com a Web Animations API

- -

Uma das maneiras mais familiares de abordar a Web Animations API é começar com algo que boa parte dos desenvolvedores web já utilizaram antes: Animações CSS. Animações CSS tem uma sintaxe familiar que funciona bem para nossa demonstração.

- -

A versão CSS

- -

Aqui temos uma animação escrita com CSS mostrando Alice caindo no buraco de coelho que leva ao País das Maravilhas (veja o código completo no Codepen):

- -

Alice Tumbling down the rabbit's hole.

- -

Perceba que o fundo se mexe, a Alice gira e sua cor muda em sincronia com o giro. Nós vamos focar somente na Alice para este tutorial. Segue a versão simplificada do CSS que controla a animação da Alice:

- -
#alice {
-  animation: aliceTumbling infinite 3s linear;
-}
-
-@keyframes aliceTumbling {
-  0% {
-    color: #000;
-    transform: rotate(0) translate3D(-50%, -50%, 0);
-  }
-  30% {
-    color: #431236;
-  }
-  100% {
-    color: #000;
-    transform: rotate(360deg) translate3D(-50%, -50%, 0);
-  }
-}
- -

Isso muda a cor da Alice e a rotação do `transform` por 3 segundos em um ritmo constante (linear) e se repete infinitamente. No bloco do @keyframes podemos ver que em 30% de cada repetição (por volta dos 900ms), a cor da Alice muda de preto para um vinho, e volta para o preto no final do loop.

- -

Mudando para o JavaScript

- -

Agora vamos tentar criar a mesma animação usando a Web Animations API.

- -

Representando keyframes

- -

A primeira coisa que precisamos fazer é criar um Objeto Keyframe correspondente ao nosso bloco @keyframes do CSS:

- -
var aliceTumbling = [
-  { transform: 'rotate(0) translate3D(-50%, -50%, 0)', color: '#000' },
-  { color: '#431236', offset: 0.3},
-  { transform: 'rotate(360deg) translate3D(-50%, -50%, 0)', color: '#000' }
-];
- -

Aqui estávamos utilizando uma array contendo múltiplos objetos. Cada objeto representa uma chave do CSS original. Contudo, diferente do CSS, a Web Animations API não precisa informar explicitamente as porcentagens temporais para cada chave, o JS automaticamente divide a animação em partes iguais baseado no número de chaves que você forneceu. Isso significa que um objeto Keyframe com três chaves vai reproduzir a chave do meio em 50% do tempo de cada loop, exceto se for definido o contrário.

- -

Quando queremos explicitamente definir um timing diferente para essas outras chaves, podemos especificar um offset diretamente no objeto, separado do resto da declaração por uma vírgula. No exemplo acima, para definir que a cor da Alice muda em 30% do tempo (e não 50%), nós definiremos como offset: 0.3.

- -

Atualmente, devem ser definidos pelo menos dois keyframes (representando o início e fim de estado das sequências de animação). Se a sua lista de keyframes somente tem uma entrada, {{domxref("Element.animate()")}} pode disparar uma exceção NotSupportedErro em alguns browsers até eles serem atualizados.

- -

Então recapitulando: as chaves são espaçadas igualmente por padrão, exceto se você definir um offset para uma chave. Útil, não?

- -

Representando propriedades temporais

- -

Nós precisamos criar também um objeto de propriedades temporais (um objeto {{domxref("AnimationEffectTimingProperties")}}) correspondente aos valores da animação da Alice:

- -
var aliceTiming = {
-  duration: 3000,
-  iterations: Infinity
-}
- -

Você pode notar algumas diferenças aqui comparando com os valores equivalentes representados no CSS:

- - - -
-

Existem algumas pequenas diferenças de terminologia entre o CSS Animations e o Web Animations. Por exemplo, Web Animations não usa a string "infinite", e sim a keyword JavaScript Infinity. E no lugar de timing-function, usamos easing. Não estamos citando um valor de easing aqui pois, diferente das Animações CSS onde o valor padrão do animation-timing-function é ease, na Web Animations API o padrão é linear — o que nós já queremos para a animação da Alice.

-
- -

Juntando as peças

- -

Agora vamos juntar o que já fizemos com o método {{domxref("Element.animate()")}}:

- -
document.getElementById("alice").animate(
-  aliceTumbling,
-  aliceTiming
-)
- -

E pronto: a animação começa a tocar (veja a versão final no Codepen).

- -

O método animate() pode ser chamado em qualquer elemento do DOM que pode ser animado com CSS. E pode ser escrito de algumas maneiras. Ao invés de criar objetos para os keyframes e propriedades temporais, podemos passar seus valores diretamentes, tipo:

- -
document.getElementById("alice").animate(
-  [
-    { transform: 'rotate(0) translate3D(-50%, -50%, 0)', color: '#000' },
-    { color: '#431236', offset: 0.3},
-    { transform: 'rotate(360deg) translate3D(-50%, -50%, 0)', color: '#000' }
-  ], {
-    duration: 3000,
-    iterations: Infinity
-  }
-);
- -

E se nós precisarmos somente especificar a duração da animação e não suas iterações (por padrão, a animação roda uma ), podemos passar só os milisegundos após o array:

- -
document.getElementById("alice").animate(
-  [
-    { transform: 'rotate(0) translate3D(-50%, -50%, 0)', color: '#000' },
-    { color: '#431236', offset: 0.3},
-    { transform: 'rotate(360deg) translate3D(-50%, -50%, 0)', color: '#000' }
-  ], 3000);
- -

Controlando a reprodução com play(), pause(), reverse() e updatePlaybackRate()

- -

Por mais que possamos escrever Animações CSS utilizando a Web Animations API, a API realmente mostra seu potencial quando precisamos manipular a reprodução da animação. A Web Animations API fornece vários métodos úteis para controlar a reprodução. Vamos dar uma olhada em como pausar e tocar animações no jogo da Alice Crescendo/Encolhendo (confira o código completo no Codepen):

- -

Playing the growing and shrinking game with Alice.

- -

Nesse jogo, Alice tem uma animação que a encolhe ou aumenta seu tamanho, que controlamos por uma garrafa e um cupcake. Cada um tem sua própria animação.

- -

Pausando e tocando animações

- -

Vamos falar sobre a animação da Alice depois, mas por enquanto, vamos dissecar esta animação do cupcake.

- -
var nommingCake = document.getElementById('eat-me_sprite').animate(
-[
-  { transform: 'translateY(0)' },
-  { transform: 'translateY(-80%)' }
-], {
-  fill: 'forwards',
-  easing: 'steps(4, end)',
-  duration: aliceChange.effect.timing.duration / 2
-});
- -

O método {{domxref("Element.animate()")}} vai rodar imediatamente depois de ser chamado. Para evitar que o bolinho se coma sozinho antes da interação do usuário, chamamos o {{domxref("Animation.pause()")}} imediatamente depois de criar a animação:

- -
nommingCake.pause();
- -

Agora nós podemos usar o método {{domxref("Animation.play()")}} para rodar assim que for o momento:

- -
nommingCake.play();
- -

Especificamente, nós queremos linka-lo à animação da Alice, para ela crescer assim que o cupcake é mordido. Podemos fazer isso com a seguinte função:

- -
var growAlice = function() {
-
-  // Play Alice's animation.
-  aliceChange.play();
-
-  // Play the cake's animation.
-  nommingCake.play();
-
-}
- -

Quando o usuário clicar ou pressionar seu dedo no bolinho em uma tela de toque, podemos chamar a função growAlice para fazer todas as animações tocarem:

- -
cake.addEventListener("mousedown", growAlice, false);
-cake.addEventListener("touchstart", growAlice, false);
- -

Outros métodos úteis

- - - -

Vamos dar uma olhada primeiro no método playbackRate — um valor negativo vai fazer a animação tocar ao contrário. Quando Alice bebe da garrafa, ela encolhe. Isso porque a garrafa muda o playbackRate da animação de 1 para -1:

- -
var shrinkAlice = function() {
-  aliceChange.playbackRate = -1;
-  aliceChange.play();
-}
-
-bottle.addEventListener("mousedown", shrinkAlice, false);
-bottle.addEventListener("touchstart", shrinkAlice, false);
- -

Em Alice Através do Espelho, Alice viaja para um mundo onde ela deve correr para se manter no lugar — e correr com o dobro de velocidade para avançar! No exemplo da Corrida da Rainha Vermelha, Alice e a Rainha Vermelha estão correndo para se manter no lugar (veja o código completo no Codepen):

- -

Alice and the Red Queen race to get to the next square in this game.

- -

Já que crianças pequenas se cansam facilmente, diferente de peças de xadrez autônomas, Alice está constantemente desacelerando. Nós podemos fazer isso definindo uma queda no playbackRate da animação dela. Usamos o updatePlaybackRate() no lugar de definir manualmente o playbackRate, já que isso produz uma atualização mais suave:

- -
setInterval( function() {
-
-  // Make sure the playback rate never falls below .4
-  if (redQueen_alice.playbackRate > .4) {
-    redQueen_alice.updatePlaybackRate(redQueen_alice.playbackRate * .9);
-  }
-
-}, 3000);
- -

Mas impulsioná-las clicando ou tocando na tela aumenta a velocidade delas por multiplicar o playbackRate:

- -
var goFaster = function() {
-  redQueen_alice.updatePlaybackRate(redQueen_alice.playbackRate * 1.1);
-}
-
-document.addEventListener("click", goFaster);
-document.addEventListener("touchstart", goFaster);
- -

Os elementos do fundo também tem playbackRates que também são afetados pelo clique ou toque na tela. O que acontece quando você faz Alice e a Rainha Vermelha correrem com o dobro da velocidade? O que acontece quando você as deixa desacelerar?

- -

Extraindo informação das animações

- -

Imagine outras maneiras de utilizar o playbackRate, como melhorar a acessibilidade para usuários com disfunções vestibulares permitindo que eles desacelerem as animações do site todo. Isso é impossível de fazer via CSS sem recalcular todas as regras, mas com a Web Animations API, podemos utilizar o método {{domxref("document.getAnimations()")}} para iterar todas animações de uma página e dividir pela metade seu playbackRate, como por exemplo:

- -
document.getAnimations().forEach(
-  function (animation) {
-    animation.updatePlaybackRate(animation.playbackRate * .5);
-  }
-);
- -

Com a Web Animations API, você só precisa mudar uma simples propriedade!

- -

Outra coisa que é difícil de fazer somente com Animações CSS é criar dependências de valores fornecidos por outras animações. Por exemplo, no logo Aumentando e Encolhendo Alice, você pode ter notado algo estranho sobre a duração do bolinho:

- -
duration: aliceChange.effect.getComputedTiming().duration / 2
- -

Para entender o que está acontecendo, vamos dar uma olhada na animação da Alice:

- -
var aliceChange = document.getElementById('alice').animate(
-  [
-    { transform: 'translate(-50%, -50%) scale(.5)' },
-    { transform: 'translate(-50%, -50%) scale(2)' }
-  ], {
-    duration: 8000,
-    easing: 'ease-in-out',
-    fill: 'both'
-  });
- -

A animação da Alice a fazia ir de metade de seu tamanho para o dobro em 8 segundos. Então nós a pausamos:

- -
aliceChange.pause();
- -

Se pausassemos no início da animação, ela começaria com metade de seu tamanho original, como se já tivesse bebido a garrafa toda! Então nós precisamos definir o estado inicial da animação no meio. Podemos fazer isso definindo o {{domxref("Animation.currentTime")}} para 4 segundos, como no exemplo abaixo:

- -
aliceChange.currentTime = 4000;
- -

Mas enquanto trabalhamos nessa animação, vamos mudar bastante a duração da Alice. Não seria melhor definir essa currentTime dinamicamente? Assim não precisariamos fazer duas atualizações de uma vez só. Podemos fazer isso referenciando a propriedade {{domxref("Animation.effect")}}, que retorna um objeto que contém todos os detalhes sobre o(s) efeito(s) ativos na Alice:

- -
aliceChange.currentTime = aliceChange.effect.getComputedTiming().duration / 2;
- -

O effect nos permite acessar os keyframes e propriedades temporais da animação — aliceChange.effect.getComputedTiming() aponta para o objeto timing da Alice (cujo tipo é {{domxref("ComputedEffectTiming")}}) — que contem o {{domxref("ComputedEffectTiming.duration")}} dela. Podemos dividir sua duração pela metade para definir a metade da animação para a linha do tempo da animação da Alice, assim ela começaria com o tamanho normal. Então nós podemos reverter e tocar a animação dela em qualquer direção para encolher ou aumentar seu tamanho!

- -

E nós podemos fazer a mesma coisa quando definimos as durações da garrafa e do bolinho:

- -
var drinking = document.getElementById('liquid').animate(
-[
-  { height: '100%' },
-  { height: '0' }
-], {
-  fill: 'forwards',
-  duration: aliceChange.effect.getComputedTiming().duration / 2
-});
-drinking.pause();
- -

Agora todas as três animações estão ligadas por apenas um duration, que pode ser modificado facilmente em um só lugar do código.

- -

Nós também podemos utilizar a Web Animations API para descobrir o quanto da linha do tempo já foi percorrido. O jogo acaba quando o seu bolinho acaba ou você esvazia a garrafa. A vinheta que é apresentada aos jogadores depende do quão longe a Alice estava em sua animação, seja ficando grande demais pra caber na portinha ou pequena demais pra não conseguir mais alcançar a chave para abrir a porta. Podemos descobrir se ela está nesses extremos pegando o currentTime da sua animação e dividir pelo activeDuration:

- -
var endGame = function() {
-
-  // get Alice's timeline's playhead location
-  var alicePlayhead = aliceChange.currentTime;
-  var aliceTimeline = aliceChange.effect.getComputedTiming().activeDuration;
-
-  // stops Alice's and other animations
-  stopPlayingAlice();
-
-  // depending on which third it falls into
-  var aliceHeight = alicePlayhead / aliceTimeline;
-
-  if (aliceHeight <= .333){
-    // Alice got smaller!
-    ...
-
-  } else if (aliceHeight >= .666) {
-    // Alice got bigger!
-    ...
-
-  } else {
-    // Alice didn't change significantly
-    ...
-
-  }
-}
-
- -
-

Nota: getAnimations() e effect não estão disponíveis em todos os browsers no momento em que este artigo foi escrito, mas o polyfill possibilita utilizá-los agora.

-
- -

Callbacks e promises

- -

Animações e Transições CSS tem seus event listeners próprios, que também são possíveis com a Web Animations API:

- - - -

Aqui nós definimos os callbacks para o bolinho, a garrafa e para Alice para disparar a função endGame:

- -
// When the cake or bottle runs out...
-nommingCake.onfinish = endGame;
-drinking.onfinish = endGame;
-
-// ...or Alice reaches the end of her animation
-aliceChange.onfinish = endGame;
-
-
- -

Ainda melhor, a Web Animations API também fornece uma promise finished que será resolvida quando a animação é completada, e rejeitada se for cancelada.

- -

Conclusão

- -

Essas são as funcionalidades básicas da Web Animations API, a maioria delas já estão sendo suportadas pelas últimas versões do Chrome, Firefox e Safari. Agora você está pronto pra "cair na toca do coelho" de animar utilizando o browser e pronto pra escrever e experimentar com sua própria animação! Se você está utilizando a API e deseja compartilha, tente usar a hashtag #WAAPI. Nós estaremos de olho e vamos escrever mais tutoriais para cobrir funcionalidades futuras assim que o suporte aumentar!

- -

Veja também

- - diff --git a/files/pt-br/web/api/web_animations_api/using_the_web_animations_api/index.html b/files/pt-br/web/api/web_animations_api/using_the_web_animations_api/index.html new file mode 100644 index 0000000000..2743f68d65 --- /dev/null +++ b/files/pt-br/web/api/web_animations_api/using_the_web_animations_api/index.html @@ -0,0 +1,358 @@ +--- +title: Usando a Web Animations API +slug: Web/API/Web_Animations_API/Usando_a_Web_Animations_API +tags: + - Alice + - Animação + - CSS + - Guía + - Iniciante + - JavaScript + - Timing + - Tutorial + - animar + - duration + - keyframes + - pausar + - pause + - play + - quadro-chave + - reverse + - web animations api +translation_of: Web/API/Web_Animations_API/Using_the_Web_Animations_API +--- +

{{DefaultAPISidebar("Web Animations")}}

+ +

A Web Animations API nos possibilita criar animações e controlar sua reprodução pelo JavaScript. Esse artigo vai te demonstrar esses conceitos com demonstrações e tutoriais com o temática de Alice no País das Maravilhas.

+ +

Conhecendo a Web Animations API

+ +

A Web Animations API abre a engine de animação do browser para os desenvolvedores manipularem via JavaScript. Esta API foi construída para se basear nas implementações das Animações CSS e Transições CSS, e deixam a porta aberta para futuros efeitos de animação. É um dos métodos mais performáticos para se animar na Web, permitindo que o browser faça internamente suas próprias otimizações, sem precisar depender de hacks, coerções ou {{domxref("Window.requestAnimationFrame()")}}.

+ +

Com a Web Animations API, podemos transferir as animações interativas das folhas de estilo para o JavaScript, separando comportamento de apresentação. Não vamos precisar mais depender de técnicas muito dependentes do DOM como propriedades do CSS e escopo de classes para controlar a direção da reprodução. E diferente de CSS puro e declarativo, JavaScript também te possibilita definir dinâmicamente valores: de propriedades à duração. Para criar bibilotecas de animação à criar animações interativas, a Web Animations API pode ser a ferramenta perfeita para o trabalho. Vamos ver o que ela pode fazer!

+ +

Suporte de Navegadores

+ +

O suporte básico para as funcionalidades da Web Animations API discutidas neste artigo estão disponíveis no Firefox 48+, Chrome 36+ e Safari 13.1+. Também existe um polyfill prático que verifica o suporte e adiciona as funcionalidades onde for necessário.

+ +

Escrevendo Animações CSS com a Web Animations API

+ +

Uma das maneiras mais familiares de abordar a Web Animations API é começar com algo que boa parte dos desenvolvedores web já utilizaram antes: Animações CSS. Animações CSS tem uma sintaxe familiar que funciona bem para nossa demonstração.

+ +

A versão CSS

+ +

Aqui temos uma animação escrita com CSS mostrando Alice caindo no buraco de coelho que leva ao País das Maravilhas (veja o código completo no Codepen):

+ +

Alice Tumbling down the rabbit's hole.

+ +

Perceba que o fundo se mexe, a Alice gira e sua cor muda em sincronia com o giro. Nós vamos focar somente na Alice para este tutorial. Segue a versão simplificada do CSS que controla a animação da Alice:

+ +
#alice {
+  animation: aliceTumbling infinite 3s linear;
+}
+
+@keyframes aliceTumbling {
+  0% {
+    color: #000;
+    transform: rotate(0) translate3D(-50%, -50%, 0);
+  }
+  30% {
+    color: #431236;
+  }
+  100% {
+    color: #000;
+    transform: rotate(360deg) translate3D(-50%, -50%, 0);
+  }
+}
+ +

Isso muda a cor da Alice e a rotação do `transform` por 3 segundos em um ritmo constante (linear) e se repete infinitamente. No bloco do @keyframes podemos ver que em 30% de cada repetição (por volta dos 900ms), a cor da Alice muda de preto para um vinho, e volta para o preto no final do loop.

+ +

Mudando para o JavaScript

+ +

Agora vamos tentar criar a mesma animação usando a Web Animations API.

+ +

Representando keyframes

+ +

A primeira coisa que precisamos fazer é criar um Objeto Keyframe correspondente ao nosso bloco @keyframes do CSS:

+ +
var aliceTumbling = [
+  { transform: 'rotate(0) translate3D(-50%, -50%, 0)', color: '#000' },
+  { color: '#431236', offset: 0.3},
+  { transform: 'rotate(360deg) translate3D(-50%, -50%, 0)', color: '#000' }
+];
+ +

Aqui estávamos utilizando uma array contendo múltiplos objetos. Cada objeto representa uma chave do CSS original. Contudo, diferente do CSS, a Web Animations API não precisa informar explicitamente as porcentagens temporais para cada chave, o JS automaticamente divide a animação em partes iguais baseado no número de chaves que você forneceu. Isso significa que um objeto Keyframe com três chaves vai reproduzir a chave do meio em 50% do tempo de cada loop, exceto se for definido o contrário.

+ +

Quando queremos explicitamente definir um timing diferente para essas outras chaves, podemos especificar um offset diretamente no objeto, separado do resto da declaração por uma vírgula. No exemplo acima, para definir que a cor da Alice muda em 30% do tempo (e não 50%), nós definiremos como offset: 0.3.

+ +

Atualmente, devem ser definidos pelo menos dois keyframes (representando o início e fim de estado das sequências de animação). Se a sua lista de keyframes somente tem uma entrada, {{domxref("Element.animate()")}} pode disparar uma exceção NotSupportedErro em alguns browsers até eles serem atualizados.

+ +

Então recapitulando: as chaves são espaçadas igualmente por padrão, exceto se você definir um offset para uma chave. Útil, não?

+ +

Representando propriedades temporais

+ +

Nós precisamos criar também um objeto de propriedades temporais (um objeto {{domxref("AnimationEffectTimingProperties")}}) correspondente aos valores da animação da Alice:

+ +
var aliceTiming = {
+  duration: 3000,
+  iterations: Infinity
+}
+ +

Você pode notar algumas diferenças aqui comparando com os valores equivalentes representados no CSS:

+ + + +
+

Existem algumas pequenas diferenças de terminologia entre o CSS Animations e o Web Animations. Por exemplo, Web Animations não usa a string "infinite", e sim a keyword JavaScript Infinity. E no lugar de timing-function, usamos easing. Não estamos citando um valor de easing aqui pois, diferente das Animações CSS onde o valor padrão do animation-timing-function é ease, na Web Animations API o padrão é linear — o que nós já queremos para a animação da Alice.

+
+ +

Juntando as peças

+ +

Agora vamos juntar o que já fizemos com o método {{domxref("Element.animate()")}}:

+ +
document.getElementById("alice").animate(
+  aliceTumbling,
+  aliceTiming
+)
+ +

E pronto: a animação começa a tocar (veja a versão final no Codepen).

+ +

O método animate() pode ser chamado em qualquer elemento do DOM que pode ser animado com CSS. E pode ser escrito de algumas maneiras. Ao invés de criar objetos para os keyframes e propriedades temporais, podemos passar seus valores diretamentes, tipo:

+ +
document.getElementById("alice").animate(
+  [
+    { transform: 'rotate(0) translate3D(-50%, -50%, 0)', color: '#000' },
+    { color: '#431236', offset: 0.3},
+    { transform: 'rotate(360deg) translate3D(-50%, -50%, 0)', color: '#000' }
+  ], {
+    duration: 3000,
+    iterations: Infinity
+  }
+);
+ +

E se nós precisarmos somente especificar a duração da animação e não suas iterações (por padrão, a animação roda uma ), podemos passar só os milisegundos após o array:

+ +
document.getElementById("alice").animate(
+  [
+    { transform: 'rotate(0) translate3D(-50%, -50%, 0)', color: '#000' },
+    { color: '#431236', offset: 0.3},
+    { transform: 'rotate(360deg) translate3D(-50%, -50%, 0)', color: '#000' }
+  ], 3000);
+ +

Controlando a reprodução com play(), pause(), reverse() e updatePlaybackRate()

+ +

Por mais que possamos escrever Animações CSS utilizando a Web Animations API, a API realmente mostra seu potencial quando precisamos manipular a reprodução da animação. A Web Animations API fornece vários métodos úteis para controlar a reprodução. Vamos dar uma olhada em como pausar e tocar animações no jogo da Alice Crescendo/Encolhendo (confira o código completo no Codepen):

+ +

Playing the growing and shrinking game with Alice.

+ +

Nesse jogo, Alice tem uma animação que a encolhe ou aumenta seu tamanho, que controlamos por uma garrafa e um cupcake. Cada um tem sua própria animação.

+ +

Pausando e tocando animações

+ +

Vamos falar sobre a animação da Alice depois, mas por enquanto, vamos dissecar esta animação do cupcake.

+ +
var nommingCake = document.getElementById('eat-me_sprite').animate(
+[
+  { transform: 'translateY(0)' },
+  { transform: 'translateY(-80%)' }
+], {
+  fill: 'forwards',
+  easing: 'steps(4, end)',
+  duration: aliceChange.effect.timing.duration / 2
+});
+ +

O método {{domxref("Element.animate()")}} vai rodar imediatamente depois de ser chamado. Para evitar que o bolinho se coma sozinho antes da interação do usuário, chamamos o {{domxref("Animation.pause()")}} imediatamente depois de criar a animação:

+ +
nommingCake.pause();
+ +

Agora nós podemos usar o método {{domxref("Animation.play()")}} para rodar assim que for o momento:

+ +
nommingCake.play();
+ +

Especificamente, nós queremos linka-lo à animação da Alice, para ela crescer assim que o cupcake é mordido. Podemos fazer isso com a seguinte função:

+ +
var growAlice = function() {
+
+  // Play Alice's animation.
+  aliceChange.play();
+
+  // Play the cake's animation.
+  nommingCake.play();
+
+}
+ +

Quando o usuário clicar ou pressionar seu dedo no bolinho em uma tela de toque, podemos chamar a função growAlice para fazer todas as animações tocarem:

+ +
cake.addEventListener("mousedown", growAlice, false);
+cake.addEventListener("touchstart", growAlice, false);
+ +

Outros métodos úteis

+ + + +

Vamos dar uma olhada primeiro no método playbackRate — um valor negativo vai fazer a animação tocar ao contrário. Quando Alice bebe da garrafa, ela encolhe. Isso porque a garrafa muda o playbackRate da animação de 1 para -1:

+ +
var shrinkAlice = function() {
+  aliceChange.playbackRate = -1;
+  aliceChange.play();
+}
+
+bottle.addEventListener("mousedown", shrinkAlice, false);
+bottle.addEventListener("touchstart", shrinkAlice, false);
+ +

Em Alice Através do Espelho, Alice viaja para um mundo onde ela deve correr para se manter no lugar — e correr com o dobro de velocidade para avançar! No exemplo da Corrida da Rainha Vermelha, Alice e a Rainha Vermelha estão correndo para se manter no lugar (veja o código completo no Codepen):

+ +

Alice and the Red Queen race to get to the next square in this game.

+ +

Já que crianças pequenas se cansam facilmente, diferente de peças de xadrez autônomas, Alice está constantemente desacelerando. Nós podemos fazer isso definindo uma queda no playbackRate da animação dela. Usamos o updatePlaybackRate() no lugar de definir manualmente o playbackRate, já que isso produz uma atualização mais suave:

+ +
setInterval( function() {
+
+  // Make sure the playback rate never falls below .4
+  if (redQueen_alice.playbackRate > .4) {
+    redQueen_alice.updatePlaybackRate(redQueen_alice.playbackRate * .9);
+  }
+
+}, 3000);
+ +

Mas impulsioná-las clicando ou tocando na tela aumenta a velocidade delas por multiplicar o playbackRate:

+ +
var goFaster = function() {
+  redQueen_alice.updatePlaybackRate(redQueen_alice.playbackRate * 1.1);
+}
+
+document.addEventListener("click", goFaster);
+document.addEventListener("touchstart", goFaster);
+ +

Os elementos do fundo também tem playbackRates que também são afetados pelo clique ou toque na tela. O que acontece quando você faz Alice e a Rainha Vermelha correrem com o dobro da velocidade? O que acontece quando você as deixa desacelerar?

+ +

Extraindo informação das animações

+ +

Imagine outras maneiras de utilizar o playbackRate, como melhorar a acessibilidade para usuários com disfunções vestibulares permitindo que eles desacelerem as animações do site todo. Isso é impossível de fazer via CSS sem recalcular todas as regras, mas com a Web Animations API, podemos utilizar o método {{domxref("document.getAnimations()")}} para iterar todas animações de uma página e dividir pela metade seu playbackRate, como por exemplo:

+ +
document.getAnimations().forEach(
+  function (animation) {
+    animation.updatePlaybackRate(animation.playbackRate * .5);
+  }
+);
+ +

Com a Web Animations API, você só precisa mudar uma simples propriedade!

+ +

Outra coisa que é difícil de fazer somente com Animações CSS é criar dependências de valores fornecidos por outras animações. Por exemplo, no logo Aumentando e Encolhendo Alice, você pode ter notado algo estranho sobre a duração do bolinho:

+ +
duration: aliceChange.effect.getComputedTiming().duration / 2
+ +

Para entender o que está acontecendo, vamos dar uma olhada na animação da Alice:

+ +
var aliceChange = document.getElementById('alice').animate(
+  [
+    { transform: 'translate(-50%, -50%) scale(.5)' },
+    { transform: 'translate(-50%, -50%) scale(2)' }
+  ], {
+    duration: 8000,
+    easing: 'ease-in-out',
+    fill: 'both'
+  });
+ +

A animação da Alice a fazia ir de metade de seu tamanho para o dobro em 8 segundos. Então nós a pausamos:

+ +
aliceChange.pause();
+ +

Se pausassemos no início da animação, ela começaria com metade de seu tamanho original, como se já tivesse bebido a garrafa toda! Então nós precisamos definir o estado inicial da animação no meio. Podemos fazer isso definindo o {{domxref("Animation.currentTime")}} para 4 segundos, como no exemplo abaixo:

+ +
aliceChange.currentTime = 4000;
+ +

Mas enquanto trabalhamos nessa animação, vamos mudar bastante a duração da Alice. Não seria melhor definir essa currentTime dinamicamente? Assim não precisariamos fazer duas atualizações de uma vez só. Podemos fazer isso referenciando a propriedade {{domxref("Animation.effect")}}, que retorna um objeto que contém todos os detalhes sobre o(s) efeito(s) ativos na Alice:

+ +
aliceChange.currentTime = aliceChange.effect.getComputedTiming().duration / 2;
+ +

O effect nos permite acessar os keyframes e propriedades temporais da animação — aliceChange.effect.getComputedTiming() aponta para o objeto timing da Alice (cujo tipo é {{domxref("ComputedEffectTiming")}}) — que contem o {{domxref("ComputedEffectTiming.duration")}} dela. Podemos dividir sua duração pela metade para definir a metade da animação para a linha do tempo da animação da Alice, assim ela começaria com o tamanho normal. Então nós podemos reverter e tocar a animação dela em qualquer direção para encolher ou aumentar seu tamanho!

+ +

E nós podemos fazer a mesma coisa quando definimos as durações da garrafa e do bolinho:

+ +
var drinking = document.getElementById('liquid').animate(
+[
+  { height: '100%' },
+  { height: '0' }
+], {
+  fill: 'forwards',
+  duration: aliceChange.effect.getComputedTiming().duration / 2
+});
+drinking.pause();
+ +

Agora todas as três animações estão ligadas por apenas um duration, que pode ser modificado facilmente em um só lugar do código.

+ +

Nós também podemos utilizar a Web Animations API para descobrir o quanto da linha do tempo já foi percorrido. O jogo acaba quando o seu bolinho acaba ou você esvazia a garrafa. A vinheta que é apresentada aos jogadores depende do quão longe a Alice estava em sua animação, seja ficando grande demais pra caber na portinha ou pequena demais pra não conseguir mais alcançar a chave para abrir a porta. Podemos descobrir se ela está nesses extremos pegando o currentTime da sua animação e dividir pelo activeDuration:

+ +
var endGame = function() {
+
+  // get Alice's timeline's playhead location
+  var alicePlayhead = aliceChange.currentTime;
+  var aliceTimeline = aliceChange.effect.getComputedTiming().activeDuration;
+
+  // stops Alice's and other animations
+  stopPlayingAlice();
+
+  // depending on which third it falls into
+  var aliceHeight = alicePlayhead / aliceTimeline;
+
+  if (aliceHeight <= .333){
+    // Alice got smaller!
+    ...
+
+  } else if (aliceHeight >= .666) {
+    // Alice got bigger!
+    ...
+
+  } else {
+    // Alice didn't change significantly
+    ...
+
+  }
+}
+
+ +
+

Nota: getAnimations() e effect não estão disponíveis em todos os browsers no momento em que este artigo foi escrito, mas o polyfill possibilita utilizá-los agora.

+
+ +

Callbacks e promises

+ +

Animações e Transições CSS tem seus event listeners próprios, que também são possíveis com a Web Animations API:

+ + + +

Aqui nós definimos os callbacks para o bolinho, a garrafa e para Alice para disparar a função endGame:

+ +
// When the cake or bottle runs out...
+nommingCake.onfinish = endGame;
+drinking.onfinish = endGame;
+
+// ...or Alice reaches the end of her animation
+aliceChange.onfinish = endGame;
+
+
+ +

Ainda melhor, a Web Animations API também fornece uma promise finished que será resolvida quando a animação é completada, e rejeitada se for cancelada.

+ +

Conclusão

+ +

Essas são as funcionalidades básicas da Web Animations API, a maioria delas já estão sendo suportadas pelas últimas versões do Chrome, Firefox e Safari. Agora você está pronto pra "cair na toca do coelho" de animar utilizando o browser e pronto pra escrever e experimentar com sua própria animação! Se você está utilizando a API e deseja compartilha, tente usar a hashtag #WAAPI. Nós estaremos de olho e vamos escrever mais tutoriais para cobrir funcionalidades futuras assim que o suporte aumentar!

+ +

Veja também

+ + diff --git a/files/pt-br/web/api/web_audio_api/index.html b/files/pt-br/web/api/web_audio_api/index.html new file mode 100644 index 0000000000..8f582eb524 --- /dev/null +++ b/files/pt-br/web/api/web_audio_api/index.html @@ -0,0 +1,480 @@ +--- +title: API Web Áudio +slug: Web/API/API_Web_Audio +tags: + - Web Audio API + - api de áudio + - áudio api + - áudio web +translation_of: Web/API/Web_Audio_API +--- +
+

A API de áudio da web disponibiliza um poderoso e versátil sistema de controle de áudio para a Web, permitindo aos desenvolvedores escolher arquivos de áudio, adicionar efeitos a estes arquivos, criar reprodutores de áudio, aplicar spatial effects (como panning) e muito mais.

+
+ +

Web audio: conceitos e uso

+ +

A API de Web audio envolve manipulação de operações com áudio dentro de um contexto de áudio, e foi desenvolvida para permitir o roteamento modular. Operações básicas de áudio são feitas com audio nodes (nós de áudio), que são ligados para formar gráficos de roteamento de áudio. Várias fontes - com diferentes tipos de layout de canal - são suportados mesmo em um único contexto. Este design modular permite flexibilidade para criar funções de áudio complexas com efeitos dinâmicos.

+ +

Audio nodes são ligados pelas suas entradas e saídas, formando uma cadeia que começa com uma ou mais fontes, passa por um ou mais nodes e então acaba em um destino (embora você não tenha que fornecer um destino, por exemplo, se você quiser apenas visualizar alguns dados de áudio). Um fluxo de trabalho simples, com Web áudio, seria algo parecido com isso:

+ +
    +
  1. Crie um contexto de áudio
    2. +
  2. Dentro do contexto, crie fontes de áudio — como <audio>, oscilador, stream
    3. +
  3. Crie efeitos de áudio, como reverb, biquad filter, panner, compressor
    4. +
  4. Escolha o destino final de áudio, por exemplo os auto-falantes de seu sistema
    5. +
  5. Conecte as fontes de áudio com os efeitos, e os efeitos com o destino.
    6. +
+ +

A simple box diagram with an outer box labeled Audio context, and three inner boxes labeled Sources, Effects and Destination. The three inner boxes have arrow between them pointing from left to right, indicating the flow of audio information.

+ +

O sincronismo é controlado com alta precisão e baixa latência, permitindo aos desenvolvedores escrever códigos que respondam com precisão a eventos e capazes de gerar exemplos específicos, mesmo com uma alta taxa de amostragem. Dessa forma, aplicações como baterias eletrônicas e seqüenciadores estarão facilmente ao alcance dos desenvolvedores.

+ +

A API de Web Audio também permite o controle de como o áudio será ordenado. Usando um sistema baseado em um modelo de source-listener, a API permite controlar os painéis de modelo para serem usados e tratados com atenuação de distância induzida ou doppler shift induzido por uma fonte em movimento (ou um ouvinte em movimento).

+ +
+

Nota: Você pode ver mais detalhes sobre a teoria da API de Web Audio em nosso artigo Basic concepts behind Web Audio API.

+
+ +

Web Audio: Interfaces da API

+ +

A API de Web Audio possui um total de 28 interfaces e eventos associados, que nós dividimos e categorizamos em 9 funcionalidades.

+ +

Definições gerais de grafos de áudio (audio graph)

+ +

Definições gerais que moldam os grafos de áudio no uso da API de Web Audio.

+ +
+
{{domxref("AudioContext")}}
+
A interface AudioContext representa um grafo de processamento de áudio construído a partir de módulos de áudio ligados entre si, cada um representado por um {{domxref("AudioNode")}}. Um contexto de áudio (audio context) controla a criação dosnós que ele contém e a execução do processamento de áudio, ou a decodificação. Como tudo acontece dentro de um contexto, você deve criar um AudioContext antes de fazer qualquer outra coisa.
+
{{domxref("AudioNode")}}
+
A interface AudioNode representa um módulo de processamento de áudio como uma fonte de áudio (por exemplo, um HTML {{HTMLElement("áudio")}} ou um elemento {{HTMLElement("vídeo")}}), destino de áudio, módulo de processamento intermediário (por exemplo, um filtro como {{domxref("BiquadFilterNode")}}, ou controle de volume, como {{domxref("GainNode")}}).
+
{{domxref("AudioParam")}}
+
A interface AudioParam representa um parâmetro relacionado ao áudio, como um parâmetro de um {{domxref("AudioNode")}}. Ele pode ser configurado com um valor específico ou uma mudança de valor, e pode ser programado para "acontecer" em um momento específico e seguindo um padrão específico.
+
{{event("ended_(Web_Audio)", "ended")}} (event)
+
O evento ended é disparado quando a reprodução parou porque o fim da mídia foi atingido.
+
+ +

Definindo fontes de áudio

+ +

Interfaces que definem fontes de áudio para uso na API de Web Audio.

+ +
+
{{domxref("OscillatorNode")}}
+
A interface OscillatorNode representa uma onda senoidal. Esta interface é um módulo de processamento de áudio que gera uma onda senoidal com determinada frequência.
+
{{domxref("AudioBuffer")}}
+
A interface AudioBuffer representa uma pequena porção de áudio armazenada na memória, criada a partir de um arquivo de áudio usando o método {{ domxref("AudioContext.decodeAudioData()") }}, ou criado com os dados brutos usando o método {{ domxref("AudioContext.createBuffer()") }}. Uma vez decodificado neste formato o áudio pode ser colocada em um {{ domxref("AudioBufferSourceNode") }}.
+
{{domxref("AudioBufferSourceNode")}}
+
A interface AudioBufferSourceNode representa uma fonte de áudio que consiste em dados de áudio na memória, armazenados em um {{domxref ("AudioBuffer")}}. É um {{domxref ("AudioNode")}} que atua como uma fonte de áudio.
+
{{domxref("MediaElementAudioSourceNode")}}
+
A interface MediaElementAudioSourceNode  representa uma fonte de audio consiste de um HTML5 {{ htmlelement("audio") }} ou {{ htmlelement("video") }} elemento. É uma {{domxref("AudioNode")}} que atua como uma fonte de áudio.
+
{{domxref("MediaStreamAudioSourceNode")}}
+
The MediaStreamAudioSourceNode interface represents an audio source consisting of a WebRTC {{domxref("MediaStream")}} (such as a webcam or microphone.) It is an {{domxref("AudioNode")}} that acts as an audio source.
+
+ +

Definindo filtros de efeitos de áudio

+ +

Interfaces para definição de efeitos que você deseja aplicar em suas fontes de áudio.

+ +
+
{{domxref("BiquadFilterNode")}}
+
The BiquadFilterNode interface represents a simple low-order filter. It is an {{domxref("AudioNode")}} that can represent different kinds of filters, tone control devices or graphic equalizers. A BiquadFilterNode always has exactly one input and one output.
+
{{domxref("ConvolverNode")}}
+
The ConvolverNode interface is an {{domxref("AudioNode")}} that performs a Linear Convolution on a given AudioBuffer, often used to achieve a reverb effect.
+
{{domxref("DelayNode")}}
+
The DelayNode interface represents a delay-line; an {{domxref("AudioNode")}} audio-processing module that causes a delay between the arrival of an input data and its propagation to the output.
+
{{domxref("DynamicsCompressorNode")}}
+
The DynamicsCompressorNode interface provides a compression effect, which lowers the volume of the loudest parts of the signal in order to help prevent clipping and distortion that can occur when multiple sounds are played and multiplexed together at once.
+
{{domxref("GainNode")}}
+
The GainNode interface represents a change in volume. It is an {{domxref("AudioNode")}} audio-processing module that causes a given gain to be applied to the input data before its propagation to the output.
+
{{domxref("WaveShaperNode")}}
+
The WaveShaperNode interface represents a non-linear distorter. It is an {{domxref("AudioNode")}} that use a curve to apply a waveshaping distortion to the signal. Beside obvious distortion effects, it is often used to add a warm feeling to the signal.
+
{{domxref("PeriodicWave")}}
+
Used to define a periodic waveform that can be used to shape the output of an {{ domxref("OscillatorNode") }}.
+
+ +

Definindo destinos de áudio

+ +

Uma vez que você tenha feito o processamento do seu áudio, estas interfaces definirão aonde será a saída do áudio.

+ +
+
{{domxref("AudioDestinationNode")}}
+
The AudioDestinationNode interface represents the end destination of an audio source in a given context — usually the speakers of your device.
+
{{domxref("MediaStreamAudioDestinationNode")}}
+
The MediaElementAudioSourceNode interface represents an audio destination consisting of a WebRTC {{domxref("MediaStream")}} with a single AudioMediaStreamTrack, which can be used in a similar way to a MediaStream obtained from {{ domxref("Navigator.getUserMedia") }}. It is an {{domxref("AudioNode")}} that acts as an audio destination.
+
+ +

Análise dos dados e visualização

+ +

Se você deseja extrair tempo, frequencia e outras informações do seu áudio, o AnalyserNode é o que você necessita.

+ +
+
{{domxref("AnalyserNode")}}
+
The AnalyserNode interface represents a node able to provide real-time frequency and time-domain analysis information, for the purposes of data analysis and visualization.
+
+ +

Dividindo e mesclando canais de áudio

+ +

Para dividir e mesclar canais de áudio, você utilizará essas interfaces.

+ +
+
{{domxref("ChannelSplitterNode")}}
+
The ChannelSplitterNode interface separates the different channels of an audio source out into a set of mono outputs.
+
{{domxref("ChannelMergerNode")}}
+
The ChannelMergerNode interface reunites different mono inputs into a single outputs. Each input will be used to fill a channel of the output.
+
+ +

Audio spatialization

+ +

These interfaces allow you to add audio spatialization panning effects to your audio sources.

+ +
+
{{domxref("AudioListener")}}
+
The AudioListener interface represents the position and orientation of the unique person listening to the audio scene used in audio spatialization.
+
{{domxref("PannerNode")}}
+
The PannerNode interface represents the behavior of a signal in space. It is an {{domxref("AudioNode")}} audio-processing module describing its position with right-hand Cartesian coordinates, its movement using a velocity vector and its directionality using a directionality cone.
+
+ +

Processamento de áudio por JavaScript

+ +

Se você quiser usar um script externo para processar sua fonte de áudio, Node e eventos abaixo tornarão isto possível.

+ +
+
{{domxref("ScriptProcessorNode")}}
+
The ScriptProcessorNode interface allows the generation, processing, or analyzing of audio using JavaScript. It is an {{domxref("AudioNode")}} audio-processing module that is linked to two buffers, one containing the current input, one containing the output. An event, implementing the {{domxref("AudioProcessingEvent")}} interface, is sent to the object each time the input buffer contains new data, and the event handler terminates when it has filled the output buffer with data.
+
{{event("audioprocess")}} (event)
+
The audioprocess event is fired when an input buffer of a Web Audio API {{domxref("ScriptProcessorNode")}} is ready to be processed.
+
{{domxref("AudioProcessingEvent")}}
+
The Web Audio API AudioProcessingEvent represents events that occur when a {{domxref("ScriptProcessorNode")}} input buffer is ready to be processed.
+
+ +

Áudio offline

+ +

Manipular áudio offline é possível com estas interfaces.

+ +
+
{{domxref("OfflineAudioContext")}}
+
The OfflineAudioContext interface is an {{domxref("AudioContext")}} interface representing an audio-processing graph built from linked together {{domxref("AudioNode")}}s. In contrast with a standard AudioContext, an OfflineAudioContext doesn't really render the audio but rather generates it, as fast as it can, in a buffer.
+
{{event("complete")}} (event)
+
The complete event is fired when the rendering of an {{domxref("OfflineAudioContext")}} is terminated.
+
{{domxref("OfflineAudioCompletionEvent")}}
+
The OfflineAudioCompletionEvent represents events that occur when the processing of an {{domxref("OfflineAudioContext")}} is terminated. The {{event("complete")}} event implements this interface.
+
+ +

Interfaces obsoletas

+ +

As interfaces a seguir foram definidas em versões antigas das especificações da API de Web Audio, mas agora elas estão obsoletas e serão substituidas por outras interfaces.

+ +
+
{{domxref("JavaScriptNode")}}
+
Used for direct audio processing via JavaScript. This interface is obsolete, and has been replaced by {{domxref("ScriptProcessorNode")}}.
+
{{domxref("WaveTableNode")}}
+
Used to define a periodic waveform. This interface is obsolete, and has been replaced by {{domxref("PeriodicWave")}}.
+
+ +

Exemplo

+ +

Este exemplo mostra uma grande variedade de funções da API de Web Audio que podem ser utilizadas. Você pode ver este código em ação na demo Voice-change-o-matic (também verificar o código-fonte completo no Github) - esta é uma demonstração de um modificador de voz de brinquedo experimental; aconselhamos manter seus alto-falantes baixo ao utilizá-lo, pelo menos para começar!

+ +

As linhas API de Web Audio estão destacadas; se você quiser encontrar mais informações sobre os diferentes métodos, faça uma busca através das páginas de referência.

+ +
var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); // define audio context
+// Webkit/blink browsers need prefix, Safari won't work without window.
+
+var voiceSelect = document.getElementById("voice"); // select box for selecting voice effect options
+var visualSelect = document.getElementById("visual"); // select box for selecting audio visualization options
+var mute = document.querySelector('.mute'); // mute button
+var drawVisual; // requestAnimationFrame
+
+var analyser = audioCtx.createAnalyser();
+var distortion = audioCtx.createWaveShaper();
+var gainNode = audioCtx.createGain();
+var biquadFilter = audioCtx.createBiquadFilter();
+
+function makeDistortionCurve(amount) { // function to make curve shape for distortion/wave shaper node to use
+  var k = typeof amount === 'number' ? amount : 50,
+    n_samples = 44100,
+    curve = new Float32Array(n_samples),
+    deg = Math.PI / 180,
+    i = 0,
+    x;
+  for ( ; i < n_samples; ++i ) {
+    x = i * 2 / n_samples - 1;
+    curve[i] = ( 3 + k ) * x * 20 * deg / ( Math.PI + k * Math.abs(x) );
+  }
+  return curve;
+};
+
+navigator.getUserMedia (
+  // constraints - only audio needed for this app
+  {
+    audio: true
+  },
+
+  // Success callback
+  function(stream) {
+    source = audioCtx.createMediaStreamSource(stream);
+    source.connect(analyser);
+    analyser.connect(distortion);
+    distortion.connect(biquadFilter);
+    biquadFilter.connect(gainNode);
+    gainNode.connect(audioCtx.destination); // connecting the different audio graph nodes together
+
+    visualize(stream);
+    voiceChange();
+
+  },
+
+  // Error callback
+  function(err) {
+    console.log('The following gUM error occured: ' + err);
+  }
+);
+
+function visualize(stream) {
+  WIDTH = canvas.width;
+  HEIGHT = canvas.height;
+
+  var visualSetting = visualSelect.value;
+  console.log(visualSetting);
+
+  if(visualSetting == "sinewave") {
+    analyser.fftSize = 2048;
+    var bufferLength = analyser.frequencyBinCount; // half the FFT value
+    var dataArray = new Uint8Array(bufferLength); // create an array to store the data
+
+    canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
+
+    function draw() {
+
+      drawVisual = requestAnimationFrame(draw);
+
+      analyser.getByteTimeDomainData(dataArray); // get waveform data and put it into the array created above
+
+      canvasCtx.fillStyle = 'rgb(200, 200, 200)'; // draw wave with canvas
+      canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
+
+      canvasCtx.lineWidth = 2;
+      canvasCtx.strokeStyle = 'rgb(0, 0, 0)';
+
+      canvasCtx.beginPath();
+
+      var sliceWidth = WIDTH * 1.0 / bufferLength;
+      var x = 0;
+
+      for(var i = 0; i < bufferLength; i++) {
+
+        var v = dataArray[i] / 128.0;
+        var y = v * HEIGHT/2;
+
+        if(i === 0) {
+          canvasCtx.moveTo(x, y);
+        } else {
+          canvasCtx.lineTo(x, y);
+        }
+
+        x += sliceWidth;
+      }
+
+      canvasCtx.lineTo(canvas.width, canvas.height/2);
+      canvasCtx.stroke();
+    };
+
+    draw();
+
+  } else if(visualSetting == "off") {
+    canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
+    canvasCtx.fillStyle = "red";
+    canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
+  }
+
+}
+
+function voiceChange() {
+  distortion.curve = new Float32Array;
+  biquadFilter.gain.value = 0; // reset the effects each time the voiceChange function is run
+
+  var voiceSetting = voiceSelect.value;
+  console.log(voiceSetting);
+
+  if(voiceSetting == "distortion") {
+    distortion.curve = makeDistortionCurve(400); // apply distortion to sound using waveshaper node
+  } else if(voiceSetting == "biquad") {
+    biquadFilter.type = "lowshelf";
+    biquadFilter.frequency.value = 1000;
+    biquadFilter.gain.value = 25; // apply lowshelf filter to sounds using biquad
+  } else if(voiceSetting == "off") {
+    console.log("Voice settings turned off"); // do nothing, as off option was chosen
+  }
+
+}
+
+// event listeners to change visualize and voice settings
+
+visualSelect.onchange = function() {
+  window.cancelAnimationFrame(drawVisual);
+  visualize(stream);
+}
+
+voiceSelect.onchange = function() {
+  voiceChange();
+}
+
+mute.onclick = voiceMute;
+
+function voiceMute() { // toggle to mute and unmute sound
+  if(mute.id == "") {
+    gainNode.gain.value = 0; // gain set to 0 to mute sound
+    mute.id = "activated";
+    mute.innerHTML = "Unmute";
+  } else {
+    gainNode.gain.value = 1; // gain set to 1 to unmute sound
+    mute.id = "";
+    mute.innerHTML = "Mute";
+  }
+}
+
+ +

Especificações

+ + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName('Web Audio API')}}{{Spec2('Web Audio API')}} 
+ +

Compatibilidade de navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support14 {{property_prefix("webkit")}}23{{CompatNo}}15 {{property_prefix("webkit")}}
+ 22 (unprefixed)		6 {{property_prefix("webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChromeFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Basic support{{CompatNo}}28 {{property_prefix("webkit")}}251.2{{CompatNo}}{{CompatNo}}6 {{property_prefix("webkit")}}
+
+ +

 

+ +

Veja também

+ + + + diff --git a/files/pt-br/web/api/web_audio_api/simple_synth/index.html b/files/pt-br/web/api/web_audio_api/simple_synth/index.html new file mode 100644 index 0000000000..b0fdf2a0c4 --- /dev/null +++ b/files/pt-br/web/api/web_audio_api/simple_synth/index.html @@ -0,0 +1,579 @@ +--- +title: 'Tutorial e exemplo: Teclado de Sintetizador Simples' +slug: Web/API/API_Web_Audio/Sintetizador_simples +tags: + - Audio + - Exemplo + - Guía + - Media + - Oscilador + - Piano + - Sintetizador + - Tutorial + - Web Audio API +translation_of: Web/API/Web_Audio_API/Simple_synth +--- +
{{DefaultAPISidebar("Web Audio API")}}
+ +

Este artigo apresenta o código e uma demonstração funcional de um teclado que você pode tocar usando seu mouse. O teclado lhe permite alternar entre formas de onda padrões e customizadas. Esse exemplo utiliza das seguintes interfaces de Web API: {{domxref("AudioContext")}}, {{domxref("OscillatorNode")}}, {{domxref("PeriodicWave")}}, e {{domxref("GainNode")}}.

+ +

Já que {{domxref("OscillatorNode")}} é baseado no {{domxref("AudioScheduledSourceNode")}}, isso até certo ponto também é um exemplo pra isto.

+ +

O Teclado Visual

+ +

HTML

+ +

Existem três componentes primários para o display do nosso teclado virtual. O primeito do qual é o teclado musical em si. Nós extraimos em um par de elementos {{HTMLElement("div")}} aninhados para permitir a rolagem horizontal caso as teclas não encaixem na tela.

+ +

O Teclado

+ +

Primeiro, criamos o espaço no qual construiremos o teclado. Estaremos construindo o teclado programaticamente, considerando que ao fazer desse jeito teremos a flexibilidade de configurar cada tecla conforme determinamos as informações apropriadas para tecla correspondente. No nosso caso, pegamos a frequência de cada tecla através de uma tabela, mas poderia ser calculado de forma algoritmica também.

+ +
<div class="container">
+  <div class="keyboard"></div>
+</div>
+
+ +

O {{HTMLElement("div")}} nomeado de "container" é a barra de rolagem que permite o teclado ser rolado horizontalmente se for largo demais para o espaço disponivel. As teclas em si serão inseridas no bloco de classe "keyboard".

+ +

A barra de opções

+ +

Abaixo do teclado, colocaremos alguns controles para configurar o camada. Por enquanto, teremos dois controles: Um para controlar o volume e outro para selecionar a forma de onda periodica usada ao gerar as notas.

+ +
O controle de volume
+ +

Primeiro criamos o <div> para conter a barra de opções, para ser personalizado conforme preciso. Então estabelecemos uma caixa que será apresentada no lado esquerdo da barra e colocar um rotulo e um elemento {{HTMLElement("input")}} do tipo "range". O elemento range será tipicamente apresentado como o controle da barra de rolagem ; configuramos ele para permitir qualquer valor entre 0.0 e 1.0 em cada posição.

+ +
<div class="settingsBar">
+  <div class="left">
+    <span>Volume: </span>
+    <input type="range" min="0.0" max="1.0" step="0.01"
+        value="0.5" list="volumes" name="volume">
+    <datalist id="volumes">
+      <option value="0.0" label="Mute">
+      <option value="1.0" label="100%">
+    </datalist>
+  </div>
+
+ +

Especificamos um valor padrão de 0.5, e provemos um elemento {{HTMLElement("datalist")}} no qual é conectado ao range usando o atributo {{htmlattrxref("name")}} para achar uma lista de opções cujo ID encaixa; nesse caso, o conjunto de informações é nomeado de "volume". isso nos permite prover um conjunto de valores comuns e strings especiais que o browser pode de forma opcional escolher mostrar de alguma maneira; e então atribuimos nomes aos valores 0.0 ("Mute") e 1.0 ("100%").

+ +
A seleção de forma de onda
+ +

E no lado da barra de configurações, colocamos um rótulo e um elemento {{HTMLElement("select")}} nomeado de "waveform" cujas opções correspondem as formas de onda disponiveis.

+ +
  <div class="right">
+    <span>Current waveform: </span>
+    <select name="waveform">
+      <option value="sine">Sine</option>
+      <option value="square" selected>Square</option>
+      <option value="sawtooth">Sawtooth</option>
+      <option value="triangle">Triangle</option>
+      <option value="custom">Custom</option>
+    </select>
+  </div>
+</div>
+ + + +

JavaScript

+ +

O código em JavaScript começa inicializando algumas váriaveis.

+ +
let audioContext = new (window.AudioContext || window.webkitAudioContext)();
+let oscList = [];
+let masterGainNode = null;
+
+ +
    +
  1. audioContext é colocado para referenciar o objeto global {{domxref("AudioContext")}} (ou webkitAudioContext se  necessário).
    2. +
  2. oscillators está colocado para conter uma lista de todos os osciladores atualmente tocando. Ele começa nulo, afinal não há nenhum oscilador tocando ainda.
    3. +
  3. masterGainNode é colocado como nulo; durante o processo de setup, ele será configurado para contar um {{domxref("GainNode")}} no quall todos os osciladores irão se conectar para permitir o volume geral a ser controlado por apenas uma barra de rolagem.
    4. +
+ +
let keyboard = document.querySelector(".keyboard");
+let wavePicker = document.querySelector("select[name='waveform']");
+let volumeControl = document.querySelector("input[name='volume']");
+
+ +

Referencias aos elementos que precisaremos acessar são obtidas através dp:

+ + + +
let noteFreq = null;
+let customWaveform = null;
+let sineTerms = null;
+let cosineTerms = null;
+
+ +

Enfim, variaveis globais que serão usadas quando as formas de onda são criadas:

+ + + +

Criando a tabela de notas

+ +

A função createNoteTable() constrói a matriz noteFreq para conter uma matriz de objetos representando cada oitava. Cada oitava, possui uma propriedade para cada nota nessa oitava; O nome dessa propriedade é o nome da nota (utilizando da notação em inglês, como "C" para representar "dó"), e o valor é a frequência, em Hertz, daquela nota.

+ +
function createNoteTable() {
+  let noteFreq = [];
+  for (let i=0; i< 9; i++) {
+    noteFreq[i] = [];
+  }
+
+  noteFreq[0]["A"] = 27.500000000000000;
+  noteFreq[0]["A#"] = 29.135235094880619;
+  noteFreq[0]["B"] = 30.867706328507756;
+
+  noteFreq[1]["C"] = 32.703195662574829;
+  noteFreq[1]["C#"] = 34.647828872109012;
+  noteFreq[1]["D"] = 36.708095989675945;
+  noteFreq[1]["D#"] = 38.890872965260113;
+  noteFreq[1]["E"] = 41.203444614108741;
+  noteFreq[1]["F"] = 43.653528929125485;
+  noteFreq[1]["F#"] = 46.249302838954299;
+  noteFreq[1]["G"] = 48.999429497718661;
+  noteFreq[1]["G#"] = 51.913087197493142;
+  noteFreq[1]["A"] = 55.000000000000000;
+  noteFreq[1]["A#"] = 58.270470189761239;
+  noteFreq[1]["B"] = 61.735412657015513;
+
+ +

... várias oitavas não mostradas para manter breve ...

+ + + +
  noteFreq[7]["C"] = 2093.004522404789077;
+  noteFreq[7]["C#"] = 2217.461047814976769;
+  noteFreq[7]["D"] = 2349.318143339260482;
+  noteFreq[7]["D#"] = 2489.015869776647285;
+  noteFreq[7]["E"] = 2637.020455302959437;
+  noteFreq[7]["F"] = 2793.825851464031075;
+  noteFreq[7]["F#"] = 2959.955381693075191;
+  noteFreq[7]["G"] = 3135.963487853994352;
+  noteFreq[7]["G#"] = 3322.437580639561108;
+  noteFreq[7]["A"] = 3520.000000000000000;
+  noteFreq[7]["A#"] = 3729.310092144719331;
+  noteFreq[7]["B"] = 3951.066410048992894;
+
+  noteFreq[8]["C"] = 4186.009044809578154;
+  return noteFreq;
+}
+
+ +

O resultado é uma matriz, noteFreq, com um objeto para cada oitava. Cada objeto de oitava tem propriedades nomeadas nela onde a propriedade é o nome da nota com a notação em inglês (Como "C" para representar "dó") e o valor da propriedade é a frequência da nota em Hertz.. o objeto resultando se parece com isso:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OctaveNotes
0"A" ⇒ 27.5"A#" ⇒ 29.14"B" ⇒ 30.87
1"C" ⇒ 32.70"C#" ⇒ 34.65"D" ⇒ 36.71"D#" ⇒ 38.89"E" ⇒ 41.20"F" ⇒ 43.65"F#" ⇒ 46.25"G" ⇒ 49"G#" ⇒ 51.9"A" ⇒ 55"A#" ⇒ 58.27"B" ⇒ 61.74
2. . .
+ +

Com esta tabela no lugar, podemos descobrir a frequência para uma dada nota em uma oitava particular relativamente fácil. Se queremos a frequência pra nota G# na primeira oitava, nós simplesmente usamos  noteFreq[1]["G#"] e conseguimos o valor 51.9 como resultado.

+ +
+

Os valores na tabela de exemplo acima foram arredondados para duas casas decimais.

+
+ + + +

Construindo o teclado

+ +

A função setup() é responsavel por construir o teclado e preparar a aplicação para tocar a música.

+ +
function setup() {
+  noteFreq = createNoteTable();
+
+  volumeControl.addEventListener("change", changeVolume, false);
+
+  masterGainNode = audioContext.createGain();
+  masterGainNode.connect(audioContext.destination);
+  masterGainNode.gain.value = volumeControl.value;
+
+  // Create the keys; skip any that are sharp or flat; for
+  // our purposes we don't need them. Each octave is inserted
+  // into a <div> of class "octave".
+
+  noteFreq.forEach(function(keys, idx) {
+    let keyList = Object.entries(keys);
+    let octaveElem = document.createElement("div");
+    octaveElem.className = "octave";
+
+    keyList.forEach(function(key) {
+      if (key[0].length == 1) {
+        octaveElem.appendChild(createKey(key[0], idx, key[1]));
+      }
+    });
+
+    keyboard.appendChild(octaveElem);
+  });
+
+  document.querySelector("div[data-note='B'][data-octave='5']").scrollIntoView(false);
+
+  sineTerms = new Float32Array([0, 0, 1, 0, 1]);
+  cosineTerms = new Float32Array(sineTerms.length);
+  customWaveform = audioContext.createPeriodicWave(cosineTerms, sineTerms);
+
+  for (i=0; i<9; i++) {
+      oscList[i] = {};
+  }
+}
+
+setup();
+ +
    +
  1. A tabela que mapeia o nome e oitavas das notas para suas respectivas frequências é criado ao chamar createNoteTable().
    2. +
  2. Um manipulador de eventos é estabelecido ao chamar nosso velho amigo {{domxref("EventTarget.addEventListener", "addEventListener()")}} para cuidar dos eventos do {{event("change")}} no controle de ganho geral. Isso vai simplesmente atualizar o módulo de ganho de volume para o novo valor.
    3. +
  3. Em seguida, nós replicamos cada oitava na tabela de frequências das notas. Para cada oitava, usamos {{jsxref("Object.entries()")}} para conseguir uma lista de notas daquela oitava.
    4. +
  4. Criar um {{HTMLElement("div")}} para contar as notas daquela oitava (para ter um pouco de espaço entre as oitavas), e mudar o nome de classe para "octave".
    5. +
  5. Para cada tecla na oitava, checamos para ver se o nome daquela nota há mais de um caractere. Nós pulamos essas, pois estamos deixando notas sustenidas de fora deste exemplo. Do contrário, chamamos createKey(), especificando uma string, oitava, e frequência. O elemento retornado é anexado na elemento da oitava criada no passo 4.
    6. +
  6. Quando o elemento da oitava é construido, é então anexada ao teclado.
    7. +
  7. Uma vez que o teclado foi construido, nós rolamos para nota "B" na quinta oitava; isso tem o efeito de garantir que o C médio é visivel junto das notas ao redor.
    8. +
  8. Então uma forma de onda customizada é construida usando {{domxref("AudioContext.createPeriodicWave()")}}. Essa forma de onda será usada toda vez que o usuário selecionar "Custom" da seleção de formas de onda.
    9. +
  9. Enfim, a lista de osciladores é iniciada para garantir que está pronta para receber informação identificando quais osciladores estão associados com que teclas.
    10. +
+ +

Criando uma tecla

+ +

A função createKey()  é chamada toda vez que queremos que uma tecla seja apresentada no nosso teclado virtual. Ela cria elementos da tecla e seu rótulo, adiciona informação dos atributos ao elemento para uso posterior, e coloca modificadores de eventos para os eventos que nos importam.

+ +
function createKey(note, octave, freq) {
+  let keyElement = document.createElement("div");
+  let labelElement = document.createElement("div");
+
+  keyElement.className = "key";
+  keyElement.dataset["octave"] = octave;
+  keyElement.dataset["note"] = note;
+  keyElement.dataset["frequency"] = freq;
+
+  labelElement.innerHTML = note + "<sub>" + octave + "</sub>";
+  keyElement.appendChild(labelElement);
+
+  keyElement.addEventListener("mousedown", notePressed, false);
+  keyElement.addEventListener("mouseup", noteReleased, false);
+  keyElement.addEventListener("mouseover", notePressed, false);
+  keyElement.addEventListener("mouseleave", noteReleased, false);
+
+  return keyElement;
+}
+
+ +

Após criar  os elementos representando as teclas e seus rótulos, nós configuramos o elemento das teclas ao configurar sua classe para "key" (Que estabelece a aparência). Então adicionamos atributos {{htmlattrxref("data-*")}}  que contém a string da oitava da nota (attribute data-octave), representando a nota a ser tocada (attribute data-note), e frequência (attribute data-frequency) em Hertz. Isso irá nos permitir facilmente pegar informação conforme necessário ao cuidar de eventos.

+ +

Fazendo música

+ +

Tocando um tom

+ +

O trabalho da função playTone() é tocar um tom em uma dada frequência. Isso será usado pelo modificador para eventos acionados nas teclas do teclado, para que toquem as notas apropriadas.

+ +
function playTone(freq) {
+  let osc = audioContext.createOscillator();
+  osc.connect(masterGainNode);
+
+  let type = wavePicker.options[wavePicker.selectedIndex].value;
+
+  if (type == "custom") {
+    osc.setPeriodicWave(customWaveform);
+  } else {
+    osc.type = type;
+  }
+
+  osc.frequency.value = freq;
+  osc.start();
+
+  return osc;
+}
+
+ +

O playTone() começa criando um novo {{domxref("OscillatorNode")}} ao chamar o método {{domxref("AudioContext.createOscillator()")}}. Então conectamos ele para o módulo de ganha geral ao chamar o novo método de osciladores {{domxref("OscillatorNode.connect()")}} method;, Que determina ao oscilador onde ele irá mandar seu output. Ao fazer isso, mudar o valor do ganho do módulo de ganho geral irá mudar o volume de todos os toms gerados.

+ +

Então conseguimos o tipo de forma de onda para usar ao checar o valor do controle de seleção de formas de onda na barra de opções. Se o usuário estiver colocado como "custom", chamamos {{domxref("OscillatorNode.setPeriodicWave()")}} para configurar os osciladores para usar nossa forma de onda customizada. Fazer isso automáticamente coloca o {{domxref("OscillatorNode.type", "type")}} do oscilador como custom. Se qualquer outro tipo de forma de onda é selecionado na seleção de formas de ondas, nós simplesmente colocamos os tipos de osciladores no valor da seleção, esse valor será um entre sine, square, triangle, e sawtooth.

+ +

A frequência do oscilador é colocada no valor especificado no paramêtro freq ao colocar o valor dos objetos {{domxref("Oscillator.frequency")}} {{domxref("AudioParam")}} . Então, enfim, o oscilador é iniciado e começa a produzir sons ao chamar o método {{domxref("AudioScheduledSourceNode.start()")}} .

+ +

Tocando um tom

+ +

Quando o evento {{event("mousedown")}} ou {{domxref("mouseover")}} ocorre em uma tecla, queremos que toque a nota correspondente. A função notePressed() é usada como o modificador de eventos para esses eventos.

+ +
function notePressed(event) {
+  if (event.buttons & 1) {
+    let dataset = event.target.dataset;
+
+    if (!dataset["pressed"]) {
+      let octave = +dataset["octave"];
+      oscList[octave][dataset["note"]] = playTone(dataset["frequency"]);
+      dataset["pressed"] = "yes";
+    }
+  }
+}
+
+ +

Começamos checando se o botão esquerdo do mouse é pressionado, por dois motivos. Primeiro, queremos que apenas o botão esquerdo acione as notas. Segundo, e mais importante, estamos usando isso para cuidar do {{event("mouseover")}} para casos onde o usuário arrasta de tecla a tecla, e só queremos tocar uma nota se o mouse estiver pressionado quando entrar no elemento.

+ +

Se o botão do mouse estiver de fato sendo pressionado, recebemos o atributo de tecla pressionada {{htmlattrxref("dataset")}} ; isso torna fácil o acesso das informações de atributo customizadas no elemento. Procuramos por um atributo data-pressed ; caso não haja um(o que indica que a nota não está tocando ainda), chamamos playTone() para começar a tocar a nota, passando no valor dos elementos do atributo data-frequency. O valor retornado do oscilador é guardado no oscList para refêrencia futura, e data-pressed é colocado como yes para indicar que a nota está tocando para que não iniciemos novamente na próxima vez que isso for chamado.

+ +

Parando um tom

+ +

A função noteReleased() é o modificador de eventos chamado quando o usuário solta o botão do mouse ou move o mouse para fora da tecla que ele está tocando.

+ +
function noteReleased(event) {
+  let dataset = event.target.dataset;
+
+  if (dataset && dataset["pressed"]) {
+    let octave = +dataset["octave"];
+    oscList[octave][dataset["note"]].stop();
+    delete oscList[octave][dataset["note"]];
+    delete dataset["pressed"];
+  }
+}
+
+ +

noteReleased() usa os atributos customizados data-octave and data-note  para procurar os osciladores das teclas, e então chama o método de oscilador {{domxref("AudioScheduledSourceNode.stop", "stop()")}} para parar de tocar a nota. Finalmente, a entrada oscList para nota é limpa e o atributo data-pressed é removido do elemento da tecla (como identificado pelo {{domxref("event.target")}}), para indicar que a nota não está tocando no momento.

+ +

Mudando o volume geral

+ +

A barra de rolagem do volume na barra de opções dá uma simples interface para mudar o valor do ganho no módulo de ganho geral, então mudando o volume de todas as notas sendo tocadas. O metódo changeVolume() é o modificador do evento {{event("change")}} na barra de rolagem.

+ +
function changeVolume(event) {
+  masterGainNode.gain.value = volumeControl.value
+}
+
+ +

Isso simplesmente coloca o valor do módulo de ganho geral gain {{domxref("AudioParam")}} para o novo valor na barra de rolagem.

+ +

Resultado

+ +

Coloque tudo junto, o resultado é um simples e funcional teclado virtual que funciona com o clique:

+ +

{{ EmbedLiveSample('The_video_keyboard', 680, 200) }}

+ +

Veja também

+ + diff --git a/files/pt-br/web/api/web_storage_api/index.html b/files/pt-br/web/api/web_storage_api/index.html new file mode 100644 index 0000000000..f4e16bd9e7 --- /dev/null +++ b/files/pt-br/web/api/web_storage_api/index.html @@ -0,0 +1,139 @@ +--- +title: API de Armazenamento na Web +slug: Web/API/Web_Storage_API_pt_br +translation_of: Web/API/Web_Storage_API +--- +

{{DefaultAPISidebar("Web Storage API")}}

+ +

A  API de armazenamento na web (Web Storage) fornece mecanismos para que os navegadores possam armazenar dados através de chave/valor de uma forma mais eficiente que os cookies.

+ +

Armazenamento na Web conceitos e formas de uso

+ +

A API de Web Storage fornece duas maneiras de armazenar dados:

+ + + +

Esses mecanismos estão disponíveis a partir das seguintes propriedades {{domxref("Window.sessionStorage")}} e {{domxref("Window.localStorage")}} (para um maior suporte, o objeto Window implementa os objetos  Window.LocalStorage e Window.SessionStorage) — ao invocar uma dessas propriedades, é criada uma instância do objeto {{domxref("Storage")}}, que fornece métodos para inserir, recuperar e remover os dados. Sempre será utilizado um objeto diferente para cada origem de sessionStorage e localStorage, dessa forma o controle de ambos é realizado de forma separada.

+ +
+

Nota: O acesso a API de Web storage a partir de IFrames de terceiros é negado se o usuário desabilitou cookies de terceiros (Firefox implementa esse comportamento a partir da versão 43 em diante).

+
+ +
+

Nota: Web Storage não é o mesmo que mozStorage (interface XPCOM da Mozilla para o SQLite) ou Session store API (uma forma de armazenamento XPCOM para uso de extensões).

+
+ +

Interfaces de Armazenamento na Web

+ +
+
{{domxref("Storage")}}
+
Permite que você insira, recupere e remova dados de um domínio no storage(session ou local).
+
{{domxref("Window")}}
+
A API de Web Storage estende o objeto {{domxref("Window")}} com duas novas propriedades — {{domxref("Window.sessionStorage")}} e {{domxref("Window.localStorage")}} —  fornecendo acesso à sessão do domínio atual e local para o objeto {{domxref("Storage")}} respectivamente.
+
{{domxref("StorageEvent")}}
+
+

Um evento de storage é chamado em um objeto window do documento quando ocorre uma mudança no storage.

+
+
+ +

Exemplos

+ +

Para desmonstrar o uso de web storage, nós criamos um exemplo simples, chamado Web Storage Demo. A página da demo landing page oferece funcionalidades que permitem alterar a cor, fonte e imagem que é exibida na página. Quando você escolhe uma opção diferente, a página será atualizada imediatamente. Além disso, sua escolha foi armazenada em localStorage,  para que quando você feche o navegador e abra novamente para acessar a página, suas escolhas sejam lembradas.

+ +

Nós também fornecemos um event output page —  para quando você abrir a página em outra aba,  as informações sejam atualizadas através da chamada de um {{event("StorageEvent")}}.

+ +

Especificações

+ + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName('Web Storage')}}{{Spec2('Web Storage')}}
+ +

Compatibilidade com os Navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropriedadeChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage43.5810.504
sessionStorage52810.504
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suporte básico2.1{{ CompatUnknown }}811iOS 3.2
+
+ +

Todos os navegadores têm espaços de armazenamento diferentes tanto para localStorage quanto para sessionStorage. Veja um resumo detalhado da capacidade de armazenamento de vários navegadores.

+ +
+

Nota: Desde iOS 5.1, o Safari armazena dados móveis de LocalStorage na pasta cache, que está sujeito a limpeza pelo OS, além disso o espaço de armazenamento é curto.

+
+ + + +

Boa parte dos navegadores atuais suportam a opção de privacidade chamada modo de "Navegação privada ou anônima", que basicamente torna a sessão de navegação privada e não deixa rastros depois que o navegador é fechado. Este modo é incompatível com armazenamento na Web por razões óbvias. Os fabricantes de navegadores estão experimentando com diferentes cenários como lidar com essa incompatibilidade.

+ +

A maioria dos navegadores optaram por uma estratégia onde as APIs de armazenamento ainda estão disponíveis e, aparentemente, funcional, com a grande diferença de que todos os dados armazenados é apagado depois que o navegador é fechado. Para estes navegadores ainda existem diferentes interpretações sobre o que deve ser feito com os dados existentes armazenados (a partir de uma sessão de navegação regular). E quanto   a leitura dos dados se o navegador estiver no modo privado? Há alguns navegadores, principalmente Safari, que optaram por uma solução em que o armazenamento está disponível, mas está vazio e tem uma quota de 0 bytes atribuídos, tornando impossível o armazenamento de dados.

+ +

Os desenvolvedores devem estar cientes e considerar as diferentes formas de implementações ao desenvolverem sites dependendo das APIs Web Storage. Para mais informações, leia neste post escrito no blog do WHATWG que lida especificamente com este tópico.

+ +

Veja também

+ +

Usando a API Web Storage

diff --git a/files/pt-br/web/api/web_storage_api/using_the_web_storage_api/index.html b/files/pt-br/web/api/web_storage_api/using_the_web_storage_api/index.html new file mode 100644 index 0000000000..eb9807f0ef --- /dev/null +++ b/files/pt-br/web/api/web_storage_api/using_the_web_storage_api/index.html @@ -0,0 +1,267 @@ +--- +title: Usando a API Web Storage +slug: Web/API/Web_Storage_API_pt_br/Using_the_Web_Storage_API +tags: + - API + - Guía + - Storage + - Web Storage API + - localStorage + - sessionStorage +translation_of: Web/API/Web_Storage_API/Using_the_Web_Storage_API +--- +
{{DefaultAPISidebar("Web Storage API")}}
+ +
+

A API Web Storage fornece mecanismos pelos quais os navegadores podem armazenar pares de chaves/valores de uma maneira muito mais segura e intuitiva do que usar cookies. Este artigo fornece um passo a passo sobre como usar essa tecnologia.

+
+ +

Conceitos básicos

+ +

Objetos Storage são simples conjuntos contendo pares de chave/valor, de forma parecida com objetos, porém eles permanecem intactos mesmo após a página ser recarregada. As chaves e valores são sempre strings (note que chaves cujo nome seja um número inteiro serão automaticamente convertidas par strings, assim como acontece nos objetos). Você pode acessar esses valores como você faria com um objeto ou usando os métodos {{domxref("Storage.getItem()")}} e {{domxref("Storage.setItem()")}}. As três linhas seguintes definem o valor de corDefinida de maneiras diferentes, mas com o mesmo resultado:

+ +
localStorage.corDefinida = '#a4509b';
+localStorage['corDefinida'] = '#a4509b';
+localStorage.setItem('corDefinida', '#a4509b');
+ +
+

Nota: Recomendamos que você utilize a API Web Storage (setItem, getItem, removeItem, key, length) para evitar as armadilhas associadas ao uso de objetos literais como mapas de chave-valor.

+
+ +

Os dois mecanismos presentes na Web Storage são os seguintes:

+ + + +

Esses mecanismos estão disponíveis através das propriedades {{domxref("Window.sessionStorage")}} e {{domxref("Window.localStorage")}} (de forma mais específica, em navegadores compatíveis, o objeto Window implementa os objetos WindowLocalStorage e WindowSessionStorage, aos quais as propriedades localStorage and sessionStorage pertencem, respectivamente) — invocar uma dessas propriedades irá criar uma instância do objeto {{domxref("Storage")}}, através do qual itens de dados podem ser definidos, acessados e removidos. Cada origem recebe objetos Storage diferentes para sessionStorage and localStorage — eles operam e são controlados separadamente.

+ +

Por exemplo, chamar localStorage pela primeira vez em um documento retornará um objeto {{domxref("Storage")}}; chamar sessionStorage em um documento retornará um outro objeto {{domxref("Storage")}}. Ambos podem ser manipulados da mesma maneira, mas de forma isolada.

+ +

Detectando a disponibilidade do localStorage

+ +

Para poder usarmos o localStorage, devemos antes verificar se ele é compatível e está disponível na sessão atual de navegação.

+ +

Testando a disponibilidade

+ +

Navegadores compatíveis com localStorage terão uma propriedade no objeto window chamada localStorage. Contudo, por várias razões, apenas verificar se essa propriedade existe pode gerar erros. Se ela existir, ainda não haverá garantias de que o localStorage está de fato disponível para uso, já que vários navegadores fornecem opções que desativam o localStorage. Dessa forma, um navegador pode ser compatível com o localStorage, mas também pode não torná-lo disponível para os scripts usarem. One example of that is Safari, which in Private Browsing mode gives us an empty localStorage object with a quota of zero, effectively making it unusable. However, we might still get a legitimate QuotaExceededError, which only means that we've used up all available storage space, but storage is actually available. Our feature detect should take these scenarios into account.

+ +

Here is a function that detects whether localStorage is both supported and available:

+ +
function storageAvailable(type) {
+    try {
+        var storage = window[type],
+            x = '__storage_test__';
+        storage.setItem(x, x);
+        storage.removeItem(x);
+        return true;
+    }
+    catch(e) {
+        return e instanceof DOMException && (
+            // everything except Firefox
+            e.code === 22 ||
+            // Firefox
+            e.code === 1014 ||
+            // test name field too, because code might not be present
+            // everything except Firefox
+            e.name === 'QuotaExceededError' ||
+            // Firefox
+            e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
+            // acknowledge QuotaExceededError only if there's something already stored
+            storage.length !== 0;
+    }
+}
+ +

And here is how you would use it:

+ +
if (storageAvailable('localStorage')) {
+  // Yippee! We can use localStorage awesomeness
+}
+else {
+  // Too bad, no localStorage for us
+}
+ +

You can test for sessionStorage instead by calling storageAvailable('sessionStorage').

+ +

See here for a brief history of feature-detecting localStorage.

+ +

Example

+ +

To illustrate some typical web storage usage, we have created a simple example, imaginatively called Web Storage Demo. The landing page provides controls that can be used to customize the color, font, and decorative image:

+ +

When you choose different options, the page is instantly updated; in addition, your choices are stored in localStorage, so that when you leave the page and load it again, later on, your choices are remembered.

+ +

We have also provided an event output page — if you load this page in another tab, then make changes to your choices in the landing page, you'll see the updated storage information outputted as a {{domxref("StorageEvent")}} is fired.

+ +

+ +
+

Note: As well as viewing the example pages live using the above links, you can also check out the source code.

+
+ +

Testing whether your storage has been populated

+ +

To start with on main.js, we will test whether the storage object has already been populated (i.e., the page was previously accessed):

+ +
if(!localStorage.getItem('bgcolor')) {
+  populateStorage();
+} else {
+  setStyles();
+}
+ +

The {{domxref("Storage.getItem()")}} method is used to get a data item from storage; in this case, we are testing to see whether the bgcolor item exists; if not, we run populateStorage() to add the existing customization values to the storage. If there are already values there, we run setStyles() to update the page styling with the stored values.

+ +

Note: You could also use {{domxref("Storage.length")}} to test whether the storage object is empty or not.

+ +

Getting values from storage

+ +

As noted above, values can be retrieved from storage using {{domxref("Storage.getItem()")}}. This takes the key of the data item as an argument, and returns the data value. For example:

+ +
function setStyles() {
+  var currentColor = localStorage.getItem('bgcolor');
+  var currentFont = localStorage.getItem('font');
+  var currentImage = localStorage.getItem('image');
+
+  document.getElementById('bgcolor').value = currentColor;
+  document.getElementById('font').value = currentFont;
+  document.getElementById('image').value = currentImage;
+
+  htmlElem.style.backgroundColor = '#' + currentColor;
+  pElem.style.fontFamily = currentFont;
+  imgElem.setAttribute('src', currentImage);
+}
+ +

Here, the first three lines grab the values from local storage. Next, we set the values displayed in the form elements to those values, so that they keep in sync when you reload the page. Finally, we update the styles/decorative image on the page, so your customization options come up again on reload.

+ +

Setting values in storage

+ +

{{domxref("Storage.setItem()")}} is used both to create new data items, and (if the data item already exists) update existing values. This takes two arguments — the key of the data item to create/modify, and the value to store in it.

+ +
function populateStorage() {
+  localStorage.setItem('bgcolor', document.getElementById('bgcolor').value);
+  localStorage.setItem('font', document.getElementById('font').value);
+  localStorage.setItem('image', document.getElementById('image').value);
+
+  setStyles();
+}
+ +

The populateStorage() function sets three items in local storage — the background color, font, and image path. It then runs the setStyles() function to update the page styles, etc.

+ +

We've also included an onchange handler on each form element so that the data and styling are updated whenever a form value is changed:

+ +
bgcolorForm.onchange = populateStorage;
+fontForm.onchange = populateStorage;
+imageForm.onchange = populateStorage;
+ +

Responding to storage changes with the StorageEvent

+ +

The {{domxref("StorageEvent")}} is fired whenever a change is made to the {{domxref("Storage")}} object (note that this event is not fired for sessionStorage changes). This won't work on the same page that is making the changes — it is really a way for other pages on the domain using the storage to sync any changes that are made. Pages on other domains can't access the same storage objects.

+ +

On the events page (see events.js) the only JavaScript is as follows:

+ +
window.addEventListener('storage', function(e) {
+  document.querySelector('.my-key').textContent = e.key;
+  document.querySelector('.my-old').textContent = e.oldValue;
+  document.querySelector('.my-new').textContent = e.newValue;
+  document.querySelector('.my-url').textContent = e.url;
+  document.querySelector('.my-storage').textContent = e.storageArea;
+});
+ +

Here we add an event listener to the window object that fires when the {{domxref("Storage")}} object associated with the current origin is changed. As you can see above, the event object associated with this event has a number of properties containing useful information — the key of the data that changed, the old value before the change, the new value after that change, the URL of the document that changed the storage, and the storage object itself.

+ +

Deleting data records

+ +

Web Storage also provides a couple of simple methods to remove data. We don't use these in our demo, but they are very simple to add to your project:

+ + + +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'webstorage.html#webstorage')}}{{Spec2('HTML WHATWG')}} 
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage43.5810.504
sessionStorage52810.504
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1{{ CompatUnknown }}811iOS 3.2
+
+ +

All browsers have varying capacity levels for both localStorage and sessionStorage. Here is a detailed rundown of all the storage capacities for various browsers.

+ +
+

Note: since iOS 5.1, Safari Mobile stores localStorage data in the cache folder, which is subject to occasional cleanup, at the behest of the OS, typically if space is short.

+
+ +

See also

+ + diff --git a/files/pt-br/web/api/web_storage_api_pt_br/index.html b/files/pt-br/web/api/web_storage_api_pt_br/index.html deleted file mode 100644 index f4e16bd9e7..0000000000 --- a/files/pt-br/web/api/web_storage_api_pt_br/index.html +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: API de Armazenamento na Web -slug: Web/API/Web_Storage_API_pt_br -translation_of: Web/API/Web_Storage_API ---- -

{{DefaultAPISidebar("Web Storage API")}}

- -

A  API de armazenamento na web (Web Storage) fornece mecanismos para que os navegadores possam armazenar dados através de chave/valor de uma forma mais eficiente que os cookies.

- -

Armazenamento na Web conceitos e formas de uso

- -

A API de Web Storage fornece duas maneiras de armazenar dados:

- - - -

Esses mecanismos estão disponíveis a partir das seguintes propriedades {{domxref("Window.sessionStorage")}} e {{domxref("Window.localStorage")}} (para um maior suporte, o objeto Window implementa os objetos  Window.LocalStorage e Window.SessionStorage) — ao invocar uma dessas propriedades, é criada uma instância do objeto {{domxref("Storage")}}, que fornece métodos para inserir, recuperar e remover os dados. Sempre será utilizado um objeto diferente para cada origem de sessionStorage e localStorage, dessa forma o controle de ambos é realizado de forma separada.

- -
-

Nota: O acesso a API de Web storage a partir de IFrames de terceiros é negado se o usuário desabilitou cookies de terceiros (Firefox implementa esse comportamento a partir da versão 43 em diante).

-
- -
-

Nota: Web Storage não é o mesmo que mozStorage (interface XPCOM da Mozilla para o SQLite) ou Session store API (uma forma de armazenamento XPCOM para uso de extensões).

-
- -

Interfaces de Armazenamento na Web

- -
-
{{domxref("Storage")}}
-
Permite que você insira, recupere e remova dados de um domínio no storage(session ou local).
-
{{domxref("Window")}}
-
A API de Web Storage estende o objeto {{domxref("Window")}} com duas novas propriedades — {{domxref("Window.sessionStorage")}} e {{domxref("Window.localStorage")}} —  fornecendo acesso à sessão do domínio atual e local para o objeto {{domxref("Storage")}} respectivamente.
-
{{domxref("StorageEvent")}}
-
-

Um evento de storage é chamado em um objeto window do documento quando ocorre uma mudança no storage.

-
-
- -

Exemplos

- -

Para desmonstrar o uso de web storage, nós criamos um exemplo simples, chamado Web Storage Demo. A página da demo landing page oferece funcionalidades que permitem alterar a cor, fonte e imagem que é exibida na página. Quando você escolhe uma opção diferente, a página será atualizada imediatamente. Além disso, sua escolha foi armazenada em localStorage,  para que quando você feche o navegador e abra novamente para acessar a página, suas escolhas sejam lembradas.

- -

Nós também fornecemos um event output page —  para quando você abrir a página em outra aba,  as informações sejam atualizadas através da chamada de um {{event("StorageEvent")}}.

- -

Especificações

- - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{SpecName('Web Storage')}}{{Spec2('Web Storage')}}
- -

Compatibilidade com os Navegadores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropriedadeChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage43.5810.504
sessionStorage52810.504
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suporte básico2.1{{ CompatUnknown }}811iOS 3.2
-
- -

Todos os navegadores têm espaços de armazenamento diferentes tanto para localStorage quanto para sessionStorage. Veja um resumo detalhado da capacidade de armazenamento de vários navegadores.

- -
-

Nota: Desde iOS 5.1, o Safari armazena dados móveis de LocalStorage na pasta cache, que está sujeito a limpeza pelo OS, além disso o espaço de armazenamento é curto.

-
- - - -

Boa parte dos navegadores atuais suportam a opção de privacidade chamada modo de "Navegação privada ou anônima", que basicamente torna a sessão de navegação privada e não deixa rastros depois que o navegador é fechado. Este modo é incompatível com armazenamento na Web por razões óbvias. Os fabricantes de navegadores estão experimentando com diferentes cenários como lidar com essa incompatibilidade.

- -

A maioria dos navegadores optaram por uma estratégia onde as APIs de armazenamento ainda estão disponíveis e, aparentemente, funcional, com a grande diferença de que todos os dados armazenados é apagado depois que o navegador é fechado. Para estes navegadores ainda existem diferentes interpretações sobre o que deve ser feito com os dados existentes armazenados (a partir de uma sessão de navegação regular). E quanto   a leitura dos dados se o navegador estiver no modo privado? Há alguns navegadores, principalmente Safari, que optaram por uma solução em que o armazenamento está disponível, mas está vazio e tem uma quota de 0 bytes atribuídos, tornando impossível o armazenamento de dados.

- -

Os desenvolvedores devem estar cientes e considerar as diferentes formas de implementações ao desenvolverem sites dependendo das APIs Web Storage. Para mais informações, leia neste post escrito no blog do WHATWG que lida especificamente com este tópico.

- -

Veja também

- -

Usando a API Web Storage

diff --git a/files/pt-br/web/api/web_storage_api_pt_br/using_the_web_storage_api/index.html b/files/pt-br/web/api/web_storage_api_pt_br/using_the_web_storage_api/index.html deleted file mode 100644 index eb9807f0ef..0000000000 --- a/files/pt-br/web/api/web_storage_api_pt_br/using_the_web_storage_api/index.html +++ /dev/null @@ -1,267 +0,0 @@ ---- -title: Usando a API Web Storage -slug: Web/API/Web_Storage_API_pt_br/Using_the_Web_Storage_API -tags: - - API - - Guía - - Storage - - Web Storage API - - localStorage - - sessionStorage -translation_of: Web/API/Web_Storage_API/Using_the_Web_Storage_API ---- -
{{DefaultAPISidebar("Web Storage API")}}
- -
-

A API Web Storage fornece mecanismos pelos quais os navegadores podem armazenar pares de chaves/valores de uma maneira muito mais segura e intuitiva do que usar cookies. Este artigo fornece um passo a passo sobre como usar essa tecnologia.

-
- -

Conceitos básicos

- -

Objetos Storage são simples conjuntos contendo pares de chave/valor, de forma parecida com objetos, porém eles permanecem intactos mesmo após a página ser recarregada. As chaves e valores são sempre strings (note que chaves cujo nome seja um número inteiro serão automaticamente convertidas par strings, assim como acontece nos objetos). Você pode acessar esses valores como você faria com um objeto ou usando os métodos {{domxref("Storage.getItem()")}} e {{domxref("Storage.setItem()")}}. As três linhas seguintes definem o valor de corDefinida de maneiras diferentes, mas com o mesmo resultado:

- -
localStorage.corDefinida = '#a4509b';
-localStorage['corDefinida'] = '#a4509b';
-localStorage.setItem('corDefinida', '#a4509b');
- -
-

Nota: Recomendamos que você utilize a API Web Storage (setItem, getItem, removeItem, key, length) para evitar as armadilhas associadas ao uso de objetos literais como mapas de chave-valor.

-
- -

Os dois mecanismos presentes na Web Storage são os seguintes:

- - - -

Esses mecanismos estão disponíveis através das propriedades {{domxref("Window.sessionStorage")}} e {{domxref("Window.localStorage")}} (de forma mais específica, em navegadores compatíveis, o objeto Window implementa os objetos WindowLocalStorage e WindowSessionStorage, aos quais as propriedades localStorage and sessionStorage pertencem, respectivamente) — invocar uma dessas propriedades irá criar uma instância do objeto {{domxref("Storage")}}, através do qual itens de dados podem ser definidos, acessados e removidos. Cada origem recebe objetos Storage diferentes para sessionStorage and localStorage — eles operam e são controlados separadamente.

- -

Por exemplo, chamar localStorage pela primeira vez em um documento retornará um objeto {{domxref("Storage")}}; chamar sessionStorage em um documento retornará um outro objeto {{domxref("Storage")}}. Ambos podem ser manipulados da mesma maneira, mas de forma isolada.

- -

Detectando a disponibilidade do localStorage

- -

Para poder usarmos o localStorage, devemos antes verificar se ele é compatível e está disponível na sessão atual de navegação.

- -

Testando a disponibilidade

- -

Navegadores compatíveis com localStorage terão uma propriedade no objeto window chamada localStorage. Contudo, por várias razões, apenas verificar se essa propriedade existe pode gerar erros. Se ela existir, ainda não haverá garantias de que o localStorage está de fato disponível para uso, já que vários navegadores fornecem opções que desativam o localStorage. Dessa forma, um navegador pode ser compatível com o localStorage, mas também pode não torná-lo disponível para os scripts usarem. One example of that is Safari, which in Private Browsing mode gives us an empty localStorage object with a quota of zero, effectively making it unusable. However, we might still get a legitimate QuotaExceededError, which only means that we've used up all available storage space, but storage is actually available. Our feature detect should take these scenarios into account.

- -

Here is a function that detects whether localStorage is both supported and available:

- -
function storageAvailable(type) {
-    try {
-        var storage = window[type],
-            x = '__storage_test__';
-        storage.setItem(x, x);
-        storage.removeItem(x);
-        return true;
-    }
-    catch(e) {
-        return e instanceof DOMException && (
-            // everything except Firefox
-            e.code === 22 ||
-            // Firefox
-            e.code === 1014 ||
-            // test name field too, because code might not be present
-            // everything except Firefox
-            e.name === 'QuotaExceededError' ||
-            // Firefox
-            e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
-            // acknowledge QuotaExceededError only if there's something already stored
-            storage.length !== 0;
-    }
-}
- -

And here is how you would use it:

- -
if (storageAvailable('localStorage')) {
-  // Yippee! We can use localStorage awesomeness
-}
-else {
-  // Too bad, no localStorage for us
-}
- -

You can test for sessionStorage instead by calling storageAvailable('sessionStorage').

- -

See here for a brief history of feature-detecting localStorage.

- -

Example

- -

To illustrate some typical web storage usage, we have created a simple example, imaginatively called Web Storage Demo. The landing page provides controls that can be used to customize the color, font, and decorative image:

- -

When you choose different options, the page is instantly updated; in addition, your choices are stored in localStorage, so that when you leave the page and load it again, later on, your choices are remembered.

- -

We have also provided an event output page — if you load this page in another tab, then make changes to your choices in the landing page, you'll see the updated storage information outputted as a {{domxref("StorageEvent")}} is fired.

- -

- -
-

Note: As well as viewing the example pages live using the above links, you can also check out the source code.

-
- -

Testing whether your storage has been populated

- -

To start with on main.js, we will test whether the storage object has already been populated (i.e., the page was previously accessed):

- -
if(!localStorage.getItem('bgcolor')) {
-  populateStorage();
-} else {
-  setStyles();
-}
- -

The {{domxref("Storage.getItem()")}} method is used to get a data item from storage; in this case, we are testing to see whether the bgcolor item exists; if not, we run populateStorage() to add the existing customization values to the storage. If there are already values there, we run setStyles() to update the page styling with the stored values.

- -

Note: You could also use {{domxref("Storage.length")}} to test whether the storage object is empty or not.

- -

Getting values from storage

- -

As noted above, values can be retrieved from storage using {{domxref("Storage.getItem()")}}. This takes the key of the data item as an argument, and returns the data value. For example:

- -
function setStyles() {
-  var currentColor = localStorage.getItem('bgcolor');
-  var currentFont = localStorage.getItem('font');
-  var currentImage = localStorage.getItem('image');
-
-  document.getElementById('bgcolor').value = currentColor;
-  document.getElementById('font').value = currentFont;
-  document.getElementById('image').value = currentImage;
-
-  htmlElem.style.backgroundColor = '#' + currentColor;
-  pElem.style.fontFamily = currentFont;
-  imgElem.setAttribute('src', currentImage);
-}
- -

Here, the first three lines grab the values from local storage. Next, we set the values displayed in the form elements to those values, so that they keep in sync when you reload the page. Finally, we update the styles/decorative image on the page, so your customization options come up again on reload.

- -

Setting values in storage

- -

{{domxref("Storage.setItem()")}} is used both to create new data items, and (if the data item already exists) update existing values. This takes two arguments — the key of the data item to create/modify, and the value to store in it.

- -
function populateStorage() {
-  localStorage.setItem('bgcolor', document.getElementById('bgcolor').value);
-  localStorage.setItem('font', document.getElementById('font').value);
-  localStorage.setItem('image', document.getElementById('image').value);
-
-  setStyles();
-}
- -

The populateStorage() function sets three items in local storage — the background color, font, and image path. It then runs the setStyles() function to update the page styles, etc.

- -

We've also included an onchange handler on each form element so that the data and styling are updated whenever a form value is changed:

- -
bgcolorForm.onchange = populateStorage;
-fontForm.onchange = populateStorage;
-imageForm.onchange = populateStorage;
- -

Responding to storage changes with the StorageEvent

- -

The {{domxref("StorageEvent")}} is fired whenever a change is made to the {{domxref("Storage")}} object (note that this event is not fired for sessionStorage changes). This won't work on the same page that is making the changes — it is really a way for other pages on the domain using the storage to sync any changes that are made. Pages on other domains can't access the same storage objects.

- -

On the events page (see events.js) the only JavaScript is as follows:

- -
window.addEventListener('storage', function(e) {
-  document.querySelector('.my-key').textContent = e.key;
-  document.querySelector('.my-old').textContent = e.oldValue;
-  document.querySelector('.my-new').textContent = e.newValue;
-  document.querySelector('.my-url').textContent = e.url;
-  document.querySelector('.my-storage').textContent = e.storageArea;
-});
- -

Here we add an event listener to the window object that fires when the {{domxref("Storage")}} object associated with the current origin is changed. As you can see above, the event object associated with this event has a number of properties containing useful information — the key of the data that changed, the old value before the change, the new value after that change, the URL of the document that changed the storage, and the storage object itself.

- -

Deleting data records

- -

Web Storage also provides a couple of simple methods to remove data. We don't use these in our demo, but they are very simple to add to your project:

- - - -

Specifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'webstorage.html#webstorage')}}{{Spec2('HTML WHATWG')}} 
- -

Browser compatibility

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage43.5810.504
sessionStorage52810.504
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1{{ CompatUnknown }}811iOS 3.2
-
- -

All browsers have varying capacity levels for both localStorage and sessionStorage. Here is a detailed rundown of all the storage capacities for various browsers.

- -
-

Note: since iOS 5.1, Safari Mobile stores localStorage data in the cache folder, which is subject to occasional cleanup, at the behest of the OS, typically if space is short.

-
- -

See also

- - diff --git a/files/pt-br/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html b/files/pt-br/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html new file mode 100644 index 0000000000..7b4f6384f6 --- /dev/null +++ b/files/pt-br/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html @@ -0,0 +1,226 @@ +--- +title: Adicionando conteúdo 2D a um contexto WebGL +slug: Web/API/WebGL_API/Tutorial/Adicionando_conteudo_2D_a_um_contexto_WebGL +tags: + - Tutorial + - WebGL +translation_of: Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context +--- +

{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL")}}

+ +

Uma vez que você tenha  criado um contexto WebGL com sucesso, você pode iniciar a renderizar nele. O mais simples que podemos fazer é desenhar um objeto 2D não texturizado. Então vamos começar por aí, construindo o código necessário para se desenhar um quadrado.

+ +

Desenhando a cena

+ +

A coisa mais importante para se entender antes de começarmos é que, mesmo que estejamos só renderizando um objeto bidimensional nesse exemplo, nós ainda estamos desenhamos em um espaço 3d. Portanto, ainda precisamos estabelecer os shaders que irão criar a cor para a nossa cena simples, assim como desenhar o objeto. Eles irão estabelecer como o quadrado irá aparecer na tela.

+ +

Inicializando os shaders

+ +

Shaders são especificados ao usar a Linguagem de Shading OpenGL ES. Com o intuito de tornar mais fácil para manter e atualizar nosso conteúdo, nós podemos escrever nosso código que carrega os shaders para buscá-los no documento HTML, ao invés de termos de criar tudo em JavaScript. Vamos dar uma olhada na nossa rotina initShaders(), que cuida dessa tarefa:

+ +
function initShaders() {
+  var fragmentShader = getShader(gl, "shader-fs");
+  var vertexShader = getShader(gl, "shader-vs");
+
+  // Cria o progrma shader
+
+  shaderProgram = gl.createProgram();
+  gl.attachShader(shaderProgram, vertexShader);
+  gl.attachShader(shaderProgram, fragmentShader);
+  gl.linkProgram(shaderProgram);
+
+  // Se falhar ao criar o progrma shader, alerta
+
+  if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
+    alert("Não foi possível inicializar o programa shader.");
+  }
+
+  gl.useProgram(shaderProgram);
+
+  vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
+  gl.enableVertexAttribArray(vertexPositionAttribute);
+}
+
+
+ +

Dois programas estão sendo inicializados por essa rotina; o primeiro, fragment shader, é carregado a partir do elemento HTML com o id "shader-fs". O segundo, vertex shader, é carregado pelo elemento HTML com o id "shader-vs". Nós vamos analisar a função getShader() no próximo tutorial; Essa rotina, na verdade, lida com a parte de puxar os programas shader da DOM.

+ +

Então nós criamos o programa shader chamando do objeto WebGL a função createProgram(), anexamos dois shaders nele e fazemos o link com o programa shader. Depois de fazer isso, o parametro LINK_STATUS do objeto g1 é checado para ter certeza de que o link foi criado com sucesso; Se sim, nós ativamos o novo programa shader.

+ +

Carregando os shaders da DOM

+ +

A rotina getShader() busca um programa shader com o nome específico do DOM, retornando o programa shader compilado para o requisitante, ou null se ele não pode ser carregado ou compilado.

+ +
function getShader(gl, id) {
+  var shaderScript, theSource, currentChild, shader;
+
+  shaderScript = document.getElementById(id);
+
+  if (!shaderScript) {
+    return null;
+  }
+
+  theSource = "";
+  currentChild = shaderScript.firstChild;
+
+  while(currentChild) {
+    if (currentChild.nodeType == currentChild.TEXT_NODE) {
+      theSource += currentChild.textContent;
+    }
+
+    currentChild = currentChild.nextSibling;
+  }
+
+ +

Uma vez que o elemento com o ID específico é encontrado, seu texto é lido na variável theSource.

+ +
  if (shaderScript.type == "x-shader/x-fragment") {
+    shader = gl.createShader(gl.FRAGMENT_SHADER);
+  } else if (shaderScript.type == "x-shader/x-vertex") {
+    shader = gl.createShader(gl.VERTEX_SHADER);
+  } else {
+     // Tipo de shader desconhecido
+     return null;
+  }
+ +

Uma vez que o código para o shader tenha sido lido, nós observamos o tipo MIME do objeto shader para determinar se é um sombreamento de vértice (MIME type "x-shader/x-vertex") ou um fragmento de shader (MIME type "x-shader/x-fragment"), em seguinda crie um tipo de shader apropriado para a partir do código fonte recuperado.

+ +
  gl.shaderSource(shader, theSource);
+
+  // Compile o programa shader
+  gl.compileShader(shader);
+
+  // Veja se ele compila com sucesso
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+      alert("Um erro ocorreu ao compilar os shaders: " + gl.getShaderInfoLog(shader));
+      return null;
+  }
+
+  return shader;
+}
+
+ +

Finalmente, a fonte é passada para o shader e compilada. Se um erro ocorrer enquanto o shader estiver compilando, nós mostraremos um alerta e retornaremos null; Caso contrário, o shader recém compilado é retornado para o requisitante.

+ +

Os shaders

+ +

Agora, nós precisamos adicionar os programas shaders ao HTML para descrever nosso documento. Os detalhes sobre como os shaders trabalham estão além do escopo deste artigo, assim como a sintaxe da linguagem do shader.

+ +

Fragmentos shader

+ +

Cada pixel é um poligono chamado de fragmento (fragment) na linguagem GL. O trabalho do fragmento de shader é estabelecer a cor de cada pixel. Ness caso, nós estamos apenas definindo a cor branca para cada pixel.

+ +

g1_FragColor é um construtor de variável GL que é utilizado para a cor do fragmento. Altere seu valor para definir a cor do pixel, como mostrado abaixo.

+ +
<script id="shader-fs" type="x-shader/x-fragment">
+  void main(void) {
+    gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
+  }
+</script>
+
+ +

Vértice do shader

+ +

A vértice (vertex) do shader define a posição e a forma de cada vértice.

+ +
<script id="shader-vs" type="x-shader/x-vertex">
+  attribute vec3 aVertexPosition;
+
+  uniform mat4 uMVMatrix;
+  uniform mat4 uPMatrix;
+
+  void main(void) {
+    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
+  }
+</script>
+
+ +

Criando um objeto

+ +

Before we can render our square, we need to create the buffer that contains its vertices. We'll do that using a function we call initBuffers(); as we explore more advanced WebGL concepts, this routine will be augmented to create more -- and more complex -- 3D objects.

+ +
var horizAspect = 480.0/640.0;
+
+function initBuffers() {
+  squareVerticesBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesBuffer);
+
+  var vertices = [
+    1.0,  1.0,  0.0,
+    -1.0, 1.0,  0.0,
+    1.0,  -1.0, 0.0,
+    -1.0, -1.0, 0.0
+  ];
+
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
+}
+
+ +

This routine is pretty simplistic given the basic nature of the scene in this example. It starts by calling the gl object's createBuffer() method to obtain a buffer into which we'll store the vertices. This is then bound to the context by calling the bindBuffer() method.

+ +

Once that's done, we create a JavaScript array containing the coordinates for each vertex of the square. This is then converted into an array of WebGL floats and passed into the gl object's bufferData() method to establish the vertices for the object.

+ +

Desenhando a cena

+ +

Once the shaders are established and the object constructed, we can actually render the scene. Since we're not animating anything in this example, our drawScene() function is very simple. It uses a few utility routines we'll cover shortly.

+ +
function drawScene() {
+  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+
+  perspectiveMatrix = makePerspective(45, 640.0/480.0, 0.1, 100.0);
+
+  loadIdentity();
+  mvTranslate([-0.0, 0.0, -6.0]);
+
+  gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesBuffer);
+  gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);
+  setMatrixUniforms();
+  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+}
+
+ +

The first step is to clear the context to our background color; then we establish the camera's perspective. We set a field of view of 45°, with a width to height ratio of 640/480 (the dimensions of our canvas). We also specify that we only want objects between 0.1 and 100 units from the camera to be rendered.

+ +

Then we establish the position of the square by loading the identity position and translating away from the camera by 6 units. After that, we bind the square's vertex buffer to the context, configure it, and draw the object by calling the drawArrays() method.

+ +

{{EmbedGHLiveSample('webgl-examples/tutorial/sample2/index.html', 670, 510) }}

+ +

View the complete code | Open this demo on a new page

+ +

Operações úteis da Matrix

+ +

Matrix operations are complicated enough. Nobody really wants to write all the code needed to handle them on their own. Fortunately, there's Sylvester, a very handy library for handling vector and matrix operations from JavaScript.

+ +

The glUtils.js file used by this demo is used by a number of WebGL demos floating around on the Web. Nobody seems entirely clear on where it came from, but it does simplify the use of Sylvester even further by adding methods for building special types of matrices, as well as outputting HTML for displaying them.

+ +

In addition, this demo defines a few helpful routines to interface with these libraries for specific tasks. What exactly they do is beyond the scope of this demo, but there are plenty of good references on matrices available online; see the {{ anch("See also") }} section for a list of a few.

+ +
function loadIdentity() {
+  mvMatrix = Matrix.I(4);
+}
+
+function multMatrix(m) {
+  mvMatrix = mvMatrix.x(m);
+}
+
+function mvTranslate(v) {
+  multMatrix(Matrix.Translation($V([v[0], v[1], v[2]])).ensure4x4());
+}
+
+function setMatrixUniforms() {
+  var pUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
+  gl.uniformMatrix4fv(pUniform, false, new Float32Array(perspectiveMatrix.flatten()));
+
+  var mvUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
+  gl.uniformMatrix4fv(mvUniform, false, new Float32Array(mvMatrix.flatten()));
+}
+
+ +

Ver Também

+ + + +

{{PreviousNext("Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL")}}

diff --git a/files/pt-br/web/api/webgl_api/tutorial/adicionando_conteudo_2d_a_um_contexto_webgl/index.html b/files/pt-br/web/api/webgl_api/tutorial/adicionando_conteudo_2d_a_um_contexto_webgl/index.html deleted file mode 100644 index 7b4f6384f6..0000000000 --- a/files/pt-br/web/api/webgl_api/tutorial/adicionando_conteudo_2d_a_um_contexto_webgl/index.html +++ /dev/null @@ -1,226 +0,0 @@ ---- -title: Adicionando conteúdo 2D a um contexto WebGL -slug: Web/API/WebGL_API/Tutorial/Adicionando_conteudo_2D_a_um_contexto_WebGL -tags: - - Tutorial - - WebGL -translation_of: Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context ---- -

{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL")}}

- -

Uma vez que você tenha  criado um contexto WebGL com sucesso, você pode iniciar a renderizar nele. O mais simples que podemos fazer é desenhar um objeto 2D não texturizado. Então vamos começar por aí, construindo o código necessário para se desenhar um quadrado.

- -

Desenhando a cena

- -

A coisa mais importante para se entender antes de começarmos é que, mesmo que estejamos só renderizando um objeto bidimensional nesse exemplo, nós ainda estamos desenhamos em um espaço 3d. Portanto, ainda precisamos estabelecer os shaders que irão criar a cor para a nossa cena simples, assim como desenhar o objeto. Eles irão estabelecer como o quadrado irá aparecer na tela.

- -

Inicializando os shaders

- -

Shaders são especificados ao usar a Linguagem de Shading OpenGL ES. Com o intuito de tornar mais fácil para manter e atualizar nosso conteúdo, nós podemos escrever nosso código que carrega os shaders para buscá-los no documento HTML, ao invés de termos de criar tudo em JavaScript. Vamos dar uma olhada na nossa rotina initShaders(), que cuida dessa tarefa:

- -
function initShaders() {
-  var fragmentShader = getShader(gl, "shader-fs");
-  var vertexShader = getShader(gl, "shader-vs");
-
-  // Cria o progrma shader
-
-  shaderProgram = gl.createProgram();
-  gl.attachShader(shaderProgram, vertexShader);
-  gl.attachShader(shaderProgram, fragmentShader);
-  gl.linkProgram(shaderProgram);
-
-  // Se falhar ao criar o progrma shader, alerta
-
-  if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
-    alert("Não foi possível inicializar o programa shader.");
-  }
-
-  gl.useProgram(shaderProgram);
-
-  vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
-  gl.enableVertexAttribArray(vertexPositionAttribute);
-}
-
-
- -

Dois programas estão sendo inicializados por essa rotina; o primeiro, fragment shader, é carregado a partir do elemento HTML com o id "shader-fs". O segundo, vertex shader, é carregado pelo elemento HTML com o id "shader-vs". Nós vamos analisar a função getShader() no próximo tutorial; Essa rotina, na verdade, lida com a parte de puxar os programas shader da DOM.

- -

Então nós criamos o programa shader chamando do objeto WebGL a função createProgram(), anexamos dois shaders nele e fazemos o link com o programa shader. Depois de fazer isso, o parametro LINK_STATUS do objeto g1 é checado para ter certeza de que o link foi criado com sucesso; Se sim, nós ativamos o novo programa shader.

- -

Carregando os shaders da DOM

- -

A rotina getShader() busca um programa shader com o nome específico do DOM, retornando o programa shader compilado para o requisitante, ou null se ele não pode ser carregado ou compilado.

- -
function getShader(gl, id) {
-  var shaderScript, theSource, currentChild, shader;
-
-  shaderScript = document.getElementById(id);
-
-  if (!shaderScript) {
-    return null;
-  }
-
-  theSource = "";
-  currentChild = shaderScript.firstChild;
-
-  while(currentChild) {
-    if (currentChild.nodeType == currentChild.TEXT_NODE) {
-      theSource += currentChild.textContent;
-    }
-
-    currentChild = currentChild.nextSibling;
-  }
-
- -

Uma vez que o elemento com o ID específico é encontrado, seu texto é lido na variável theSource.

- -
  if (shaderScript.type == "x-shader/x-fragment") {
-    shader = gl.createShader(gl.FRAGMENT_SHADER);
-  } else if (shaderScript.type == "x-shader/x-vertex") {
-    shader = gl.createShader(gl.VERTEX_SHADER);
-  } else {
-     // Tipo de shader desconhecido
-     return null;
-  }
- -

Uma vez que o código para o shader tenha sido lido, nós observamos o tipo MIME do objeto shader para determinar se é um sombreamento de vértice (MIME type "x-shader/x-vertex") ou um fragmento de shader (MIME type "x-shader/x-fragment"), em seguinda crie um tipo de shader apropriado para a partir do código fonte recuperado.

- -
  gl.shaderSource(shader, theSource);
-
-  // Compile o programa shader
-  gl.compileShader(shader);
-
-  // Veja se ele compila com sucesso
-  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
-      alert("Um erro ocorreu ao compilar os shaders: " + gl.getShaderInfoLog(shader));
-      return null;
-  }
-
-  return shader;
-}
-
- -

Finalmente, a fonte é passada para o shader e compilada. Se um erro ocorrer enquanto o shader estiver compilando, nós mostraremos um alerta e retornaremos null; Caso contrário, o shader recém compilado é retornado para o requisitante.

- -

Os shaders

- -

Agora, nós precisamos adicionar os programas shaders ao HTML para descrever nosso documento. Os detalhes sobre como os shaders trabalham estão além do escopo deste artigo, assim como a sintaxe da linguagem do shader.

- -

Fragmentos shader

- -

Cada pixel é um poligono chamado de fragmento (fragment) na linguagem GL. O trabalho do fragmento de shader é estabelecer a cor de cada pixel. Ness caso, nós estamos apenas definindo a cor branca para cada pixel.

- -

g1_FragColor é um construtor de variável GL que é utilizado para a cor do fragmento. Altere seu valor para definir a cor do pixel, como mostrado abaixo.

- -
<script id="shader-fs" type="x-shader/x-fragment">
-  void main(void) {
-    gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
-  }
-</script>
-
- -

Vértice do shader

- -

A vértice (vertex) do shader define a posição e a forma de cada vértice.

- -
<script id="shader-vs" type="x-shader/x-vertex">
-  attribute vec3 aVertexPosition;
-
-  uniform mat4 uMVMatrix;
-  uniform mat4 uPMatrix;
-
-  void main(void) {
-    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
-  }
-</script>
-
- -

Criando um objeto

- -

Before we can render our square, we need to create the buffer that contains its vertices. We'll do that using a function we call initBuffers(); as we explore more advanced WebGL concepts, this routine will be augmented to create more -- and more complex -- 3D objects.

- -
var horizAspect = 480.0/640.0;
-
-function initBuffers() {
-  squareVerticesBuffer = gl.createBuffer();
-  gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesBuffer);
-
-  var vertices = [
-    1.0,  1.0,  0.0,
-    -1.0, 1.0,  0.0,
-    1.0,  -1.0, 0.0,
-    -1.0, -1.0, 0.0
-  ];
-
-  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
-}
-
- -

This routine is pretty simplistic given the basic nature of the scene in this example. It starts by calling the gl object's createBuffer() method to obtain a buffer into which we'll store the vertices. This is then bound to the context by calling the bindBuffer() method.

- -

Once that's done, we create a JavaScript array containing the coordinates for each vertex of the square. This is then converted into an array of WebGL floats and passed into the gl object's bufferData() method to establish the vertices for the object.

- -

Desenhando a cena

- -

Once the shaders are established and the object constructed, we can actually render the scene. Since we're not animating anything in this example, our drawScene() function is very simple. It uses a few utility routines we'll cover shortly.

- -
function drawScene() {
-  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
-
-  perspectiveMatrix = makePerspective(45, 640.0/480.0, 0.1, 100.0);
-
-  loadIdentity();
-  mvTranslate([-0.0, 0.0, -6.0]);
-
-  gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesBuffer);
-  gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);
-  setMatrixUniforms();
-  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
-}
-
- -

The first step is to clear the context to our background color; then we establish the camera's perspective. We set a field of view of 45°, with a width to height ratio of 640/480 (the dimensions of our canvas). We also specify that we only want objects between 0.1 and 100 units from the camera to be rendered.

- -

Then we establish the position of the square by loading the identity position and translating away from the camera by 6 units. After that, we bind the square's vertex buffer to the context, configure it, and draw the object by calling the drawArrays() method.

- -

{{EmbedGHLiveSample('webgl-examples/tutorial/sample2/index.html', 670, 510) }}

- -

View the complete code | Open this demo on a new page

- -

Operações úteis da Matrix

- -

Matrix operations are complicated enough. Nobody really wants to write all the code needed to handle them on their own. Fortunately, there's Sylvester, a very handy library for handling vector and matrix operations from JavaScript.

- -

The glUtils.js file used by this demo is used by a number of WebGL demos floating around on the Web. Nobody seems entirely clear on where it came from, but it does simplify the use of Sylvester even further by adding methods for building special types of matrices, as well as outputting HTML for displaying them.

- -

In addition, this demo defines a few helpful routines to interface with these libraries for specific tasks. What exactly they do is beyond the scope of this demo, but there are plenty of good references on matrices available online; see the {{ anch("See also") }} section for a list of a few.

- -
function loadIdentity() {
-  mvMatrix = Matrix.I(4);
-}
-
-function multMatrix(m) {
-  mvMatrix = mvMatrix.x(m);
-}
-
-function mvTranslate(v) {
-  multMatrix(Matrix.Translation($V([v[0], v[1], v[2]])).ensure4x4());
-}
-
-function setMatrixUniforms() {
-  var pUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
-  gl.uniformMatrix4fv(pUniform, false, new Float32Array(perspectiveMatrix.flatten()));
-
-  var mvUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
-  gl.uniformMatrix4fv(mvUniform, false, new Float32Array(mvMatrix.flatten()));
-}
-
- -

Ver Também

- - - -

{{PreviousNext("Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL")}}

diff --git a/files/pt-br/web/api/webrtc_api/simple_rtcdatachannel_sample/index.html b/files/pt-br/web/api/webrtc_api/simple_rtcdatachannel_sample/index.html new file mode 100644 index 0000000000..72ac37e56a --- /dev/null +++ b/files/pt-br/web/api/webrtc_api/simple_rtcdatachannel_sample/index.html @@ -0,0 +1,272 @@ +--- +title: Uma simples amostra de RTCDataChannel +slug: Web/API/WebRTC_API/Simples_RTCDataChannel_amostra +translation_of: Web/API/WebRTC_API/Simple_RTCDataChannel_sample +--- +

{{WebRTCSidebar}}

+ +

A interface {{domxref("RTCDataChannel")}} é um recurso da WebRTC API que permite abrir um canal entre dois pares sobre os quais você pode enviar e receber dados arbitrários. A API é intencionalmente semelhante à WebSocket API, de modo que o mesmo modelo de programação pode ser usado para ambos.

+ +

Neste exemplo, abriremos um {{domxref("RTCDataChannel")}} para realizar a conexão entre dois elementos na mesma página. Embora seja obviamente um cenário artificial, é útil para demonstrar o fluxo de conexão entre dois pares. Vamos cobrir a mecânica necessária para conectar, transmitir e receber dados, mas vamos deixar para outro exemplo os detalhes sobre como localizar e se conectar a um computador remoto.

+ +

O HTML

+ +

Primeiro, vamos dar uma olhada rápida no HTML que é necessário. Não há nada incrivelmente complicado aqui. Primeiro, temos um par de botões para estabelecer e fechar a conexão:

+ +
<button id="connectButton" name="connectButton" class="buttonleft">
+  Conectar
+</button>
+<button id="disconnectButton" name="disconnectButton" class="buttonright" disabled>
+  Desconectar
+</button>
+ +

Depois, há uma caixa que contém o campo de input no qual o usuário pode digitar uma mensagem para transmitir, com um botão para enviar o texto digitado. Este {{HTMLElement("div")}} será o primeiro ponto (peer) no canal.

+ +
  <div class="messagebox">
+    <label for="message">Insira a mensagem:
+      <input type="text" name="message" id="message" placeholder="Texto da mensagem"
+              inputmode="latin" size=60 maxlength=120 disabled>
+    </label>
+    <button id="sendButton" name="sendButton" class="buttonright" disabled>
+      Enviar
+    </button>
+  </div>
+ +

Finalmente, há uma pequena caixa na qual vamos inserir as mensagens. Este bloco {{HTMLElement("div")}} será o segundo ponto do par (peer).

+ +
<div class="messagebox" id="receivebox">
+  <p>Mensagens recebidas:</p>
+</div>
+ +

O código JavaScript

+ +

Como você pode simplesmente ver o próprio código no GitHub, abaixo, analisaremos as partes do código que fazem o trabalho pesado.

+ +

A WebRTC API faz um intenso uso de {{jsxref("Promise")}}s. Que tornam muito fácil encadear as etapas do processo de conexão; Se você ainda não leu sobre esta funcionalidade do ECMAScript 2015, você deveria ler sobre eles. Da mesma forma, este exemplo usa arrow functions para simplificar a sintaxe.

+ +

Começando

+ +

Quando o script é executado, configuramos um {{event("load")}} ouvinte de eventos (event listener), De modo que, uma vez que a página esteja totalmente carregada, nossa função startup() seja chamada.

+ +
function startup() {
+  connectButton = document.getElementById('connectButton');
+  disconnectButton = document.getElementById('disconnectButton');
+  sendButton = document.getElementById('sendButton');
+  messageInputBox = document.getElementById('message');
+  receiveBox = document.getElementById('receivebox');
+
+  // Define os ouvintes de eventos para os elementos da interface do usuário
+
+  connectButton.addEventListener('click', connectPeers, false);
+  disconnectButton.addEventListener('click', disconnectPeers, false);
+  sendButton.addEventListener('click', sendMessage, false);
+}
+ +

Isso é bastante direto. Pegamos referências de todos os elementos da página que precisaremos acessar e, em seguida, configuramos {{domxref("EventListener", "event listeners")}} nos três botões.

+ +

Estabelecendo uma conexão

+ +

Quando o usuário clica no botão "Conectar", o método connectPeers() é chamado. Para que fique mais claro, iremos quebrar o código em mais partes, e analisar um pouco de cada vez.

+ +
+

Nota: Mesmo que ambas as extremidades da nossa conexão estejam na mesma página, vamos nos referir ao ponto que inicia a conexão como "local", e ao outro como sendo o "remoto".

+
+ +

Configurando o ponto local (local peer)

+ +
localConnection = new RTCPeerConnection();
+
+sendChannel = localConnection.createDataChannel("sendChannel");
+sendChannel.onopen = handleSendChannelStatusChange;
+sendChannel.onclose = handleSendChannelStatusChange;
+
+ +

O primeiro passo é criar o ponto "local" da conexão. Este é o ponto que enviará o pedido de conexão. O próximo passo é criar o {{domxref("RTCDataChannel")}} chamando {{domxref("RTCPeerConnection.createDataChannel()")}} e configurando ouvintes de eventos (event listeners) para monitorar o canal, e para que possamos saber quando ele for aberto e fechado (isto é, quando o canal está conectado ou desconectado dentro dessa conexão entre pares (peer connection)).

+ +

É importante ter em mente que cada extremidade do canal tem seu próprio objeto {{domxref("RTCDataChannel")}} .

+ +

Configurando o ponto remoto (remote peer)

+ +
remoteConnection = new RTCPeerConnection();
+remoteConnection.ondatachannel = receiveChannelCallback;
+ +

O ponto remoto está configurado de forma semelhante, exceto que não precisamos nós mesmos criar explicitamente um {{domxref("RTCDataChannel")}} , uma vez que vamos ser conectados através do canal estabelecido acima. Em vez disso, criamos um {{event("datachannel")}} manipulador de eventos (event handler); Isso será chamado quando o canal de dados (data channel) for aberto; Este manipulador (handler) receberá um objeto RTCDataChannel; você verá isso abaixo.

+ +

Configurando  ICE candidates

+ +

O próximo passo é configurar cada conexão com os ouvintes do ICE que serão chamados quando houver um novo candidato ICE para comunicar com o outro lado.

+ +
+

Nota: Em um cenário do mundo real em que os dois pares não estão sendo executados no mesmo contexto, o processo é um pouco mais complexo; Cada lado fornece, um de cada vez, um sugestão sobre como conectar (por exemplo, UDP, UDP com um relay, TCP, etc.) chamando {{domxref("RTCPeerConnection.addIceCandidate()")}}, e eles vão de um lado para outro até chegarem a um acordo. Mas aqui, acabamos de aceitar a primeira oferta de cada lado, uma vez que não existe uma rede real envolvida.

+
+ +
    localConnection.onicecandidate = e => !e.candidate
+        || remoteConnection.addIceCandidate(e.candidate)
+        .catch(handleAddCandidateError);
+
+    remoteConnection.onicecandidate = e => !e.candidate
+        || localConnection.addIceCandidate(e.candidate)
+        .catch(handleAddCandidateError);
+ +

Configuramos cada {{domxref("RTCPeerConnection")}} para ter um manipulador de eventos (event handler) para o evento {{event("icecandidate")}} .

+ +

Iniciando a tentativa de conexão

+ +

A última coisa que precisamos fazer para começar a conectar nossos pares é criar uma oferta de conexão.

+ +
    localConnection.createOffer()
+    .then(offer => localConnection.setLocalDescription(offer))
+    .then(() => remoteConnection.setRemoteDescription(localConnection.localDescription))
+    .then(() => remoteConnection.createAnswer())
+    .then(answer => remoteConnection.setLocalDescription(answer))
+    .then(() => localConnection.setRemoteDescription(remoteConnection.localDescription))
+    .catch(handleCreateDescriptionError);
+ +

Vamos passar por isto linha por linha e decifrar o que significa.

+ +
    +
  1. Primeiro chamamos {{domxref("RTCPeerConnection.createOffer()")}} método para criar um resumo {{Glossary("SDP")}} (Session Description Protocol) descrevendo a conexão que queremos fazer. Este método aceita, opcionalmente, um objeto com restrições a serem suportadas pela conexão para atender às suas necessidades, como no caso da conexão precisar suportar áudio, vídeo ou ambos. Em nosso exemplo simples, não temos restrições.
    2. +
  2. Se a oferta for criada com sucesso, passamos o resumo junto ao método de conexões locais {{domxref("RTCPeerConnection.setLocalDescription()")}} . Isso configura o ponto local da conexão.
    3. +
  3. O próximo passo é conectar o ponto local ao remoto comunicando ao ponto remoto sobre ele. Isso é feito chamando remoteConnection.{{domxref("RTCPeerConnection.setRemoteDescription()")}}. Agora o remoteConnection conhece a conexão que está sendo construída.
    4. +
  4. Isso significa que é hora do ponto remoto responder. Ele faz isso chamando o método {{domxref("RTCPeerConnection.createAnswer", "createAnswer()")}} . Isso gera um resumo de SDP que descreve a conexão que o ponto remoto está disposto e capaz de estabelecer. Essa configuração está em algum lugar na união das opções que ambos os pares podem suportar.
    5. +
  5. Uma vez que a resposta foi criada, ela é passada para o remoteConnection chamando {{domxref("RTCPeerConnection.setLocalDescription()")}}. Isso estabelece o ponto remoto da conexão (que, para o ponto remoto, é o ponto local. Isso pode parecer confuso, mas você irá se acostumar com isso.
    6. +
  6. Finalmente, a descrição local das conexões remotas está configurada para se referir ao ponto remoto, chamando localConnection's {{domxref("RTCPeerConnection.setRemoteDescription()")}}.
    7. +
  7. O catch() chama uma rotina que lida com os erros que ocorrem.
    8. +
+ +
+

Nota: Mais uma vez, esse processo não é uma implementação do mundo real; No uso normal, há dois pedaços de código executados em duas máquinas, interagindo e negociando a conexão.

+
+ +

Manipulação da conexão de pares bem sucedida

+ +

Como cada lado da conexão peer-to-peer é conectado com sucesso, o evento correspondente {{domxref("RTCPeerConnection")}}'s {{event("icecandidate")}} é disparado. Esses manipuladores podem fazer o que for necessário, mas, neste exemplo, tudo o que precisamos fazer é atualizar a interface do usuário:

+ +
  function handleLocalAddCandidateSuccess() {
+    connectButton.disabled = true;
+  }
+
+  function handleRemoteAddCandidateSuccess() {
+    disconnectButton.disabled = false;
+  }
+ +

A única coisa que fazemos aqui é desativar o botão "Conectar" quando o ponto local estiver conectado e ativar o botão "Desconectar" quando o ponto remoto se conectar.

+ +

Conectando o canal de dados

+ +

Uma vez que o {{domxref("RTCPeerConnection")}} é aberto, o evento {{event("datachannel")}} é enviado para o ponto remoto para completar o processo de abertura do canal de dados; Isso invoca nosso método receiveChannelCallback(), que se parece com isso:

+ +
  function receiveChannelCallback(event) {
+    receiveChannel = event.channel;
+    receiveChannel.onmessage = handleReceiveMessage;
+    receiveChannel.onopen = handleReceiveChannelStatusChange;
+    receiveChannel.onclose = handleReceiveChannelStatusChange;
+  }
+ +

O evento{{event("datachannel")}} inclui, em sua propriedade de canal, uma referência a um {{domxref("RTCDataChannel")}} Representando o ponto remoto do canal. Isso é salvo, e nós configuramos, no canal, ouvintes de eventos para os eventos que queremos manipular. Uma vez feito isso, nosso método handleReceiveMessage() Será chamado cada vez que os dados são recebidos pelo ponto remoto, e o método handleReceiveChannelStatusChange() será chamado sempre que mudar o estado da conexão do canal, para que possamos reagir quando o canal estiver totalmente aberto e quando ele for fechado.

+ +

Lidando com as mudanças de status do canal

+ +

Ambos nossos pontos locais e remotos usam um único método para lidar com eventos que indicam alguma alteração no status da conexão do canal.

+ +

Quando o ponto local experimenta um evento aberto ou fechado, o métodohandleSendChannelStatusChange() é chamado:

+ +
  function handleSendChannelStatusChange(event) {
+    if (sendChannel) {
+      var state = sendChannel.readyState;
+
+      if (state === "open") {
+        messageInputBox.disabled = false;
+        messageInputBox.focus();
+        sendButton.disabled = false;
+        disconnectButton.disabled = false;
+        connectButton.disabled = true;
+      } else {
+        messageInputBox.disabled = true;
+        sendButton.disabled = true;
+        connectButton.disabled = false;
+        disconnectButton.disabled = true;
+      }
+    }
+  }
+ +

Se o estado do canal mudou para "open", isso indica que terminamos de estabelecer o link entre os dois pares. A interface do usuário é atualizada de forma correspondente: ativando o elemento de input de texto para a mensagem a ser enviada, focando este elemento de input para que o usuário comece imediatamente a digitar, habilitando os botões "Enviar" e "Desconectar", que são agora utilizáveis, E desativando o botão "Conectar", uma vez que não é necessário quando a conexão está aberta.

+ +

Se o estado do canal mudou para "closed", ocorre o conjunto oposto de ações: a caixa de entrada de texto e o botão "Enviar" estão desativados, o botão "Conectar" está habilitado para que o usuário possa abrir uma nova conexão se desejar, e o botão "Desconectar" está desativado, uma vez que não é útil quando não existe conexão.

+ +

Nosso exemplo de par remoto, por outro lado, ignora os eventos de alteração de status, exceto para registrar o evento no console:

+ +
  function handleReceiveChannelStatusChange(event) {
+    if (receiveChannel) {
+      console.log("Receive channel's status has changed to " +
+                  receiveChannel.readyState);
+    }
+  }
+ +

O método handleReceiveChannelStatusChange() recebe como parâmetro de entrada o evento que ocorreu; Este será um {{domxref("RTCDataChannelEvent")}}.

+ +

Enviando mensagens

+ +

Quando o usuário pressiona o botão "Enviar", o método sendMessage() que estabelecemos como o manipulador para o evento do botão {{event("click")}} é chamado. Esse método é bastante simples:

+ +
  function sendMessage() {
+    var message = messageInputBox.value;
+    sendChannel.send(message);
+
+    messageInputBox.value = "";
+    messageInputBox.focus();
+  }
+ +

Primeiro, o texto da mensagem é obtido dos atributos do elemento de input {{htmlattrxref("value", "input")}} . Isso é enviado para o ponto remoto, ligando para {{domxref("RTCDataChannel.send", "sendChannel.send()")}}. E está tudo aí! O resto deste método é apenas um pouco de açúcar para experiência do usuário - a caixa de entrada é esvaziada e re-focada para que o usuário comece imediatamente a digitar outra mensagem.

+ +

Recebendo mensagens

+ +

Quando ocorre um evento de "mensagem" no canal remoto, nosso método handleReceiveMessage() é chamado como o manipulador de eventos.

+ +
  function handleReceiveMessage(event) {
+    var el = document.createElement("p");
+    var txtNode = document.createTextNode(event.data);
+
+    el.appendChild(txtNode);
+    receiveBox.appendChild(el);
+  }
+ +

Este método simplesmente executa alguns injeções básicas {{Glossary("DOM")}} ; cria um novo {{HTMLElement("p")}} (paragraph) elemento, então cria um novo nó {{domxref("Text")}} contendo o texto da mensagem, que é recebido na propriedade de dados do evento. Este nó de texto é anexado como um filho do novo elemento, que é então inserido no bloco receiveBox, fazendo com que ele desenhe na janela do navegador.

+ +

Desconectando os pares (peers)

+ +

Quando o usuário clica no botão "Desconectar", o método disconnectPeers() previamente configurado como o manipulador desse botão é chamado.

+ +
  function disconnectPeers() {
+
+    // Close the RTCDataChannels if they're open.
+
+    sendChannel.close();
+    receiveChannel.close();
+
+    // Close the RTCPeerConnections
+
+    localConnection.close();
+    remoteConnection.close();
+
+    sendChannel = null;
+    receiveChannel = null;
+    localConnection = null;
+    remoteConnection = null;
+
+    // Update user interface elements
+
+    connectButton.disabled = false;
+    disconnectButton.disabled = true;
+    sendButton.disabled = true;
+
+    messageInputBox.value = "";
+    messageInputBox.disabled = true;
+  }
+
+ +

Isso começa por fechar cada par {{domxref("RTCDataChannel")}}, então, de forma semelhante, cada um {{domxref("RTCPeerConnection")}}. Então, todas as referências salvas desses objetos são definidas como null para evitar a reutilização acidental, e a interface do usuário é atualizada para refletir o fato de que a conexão foi fechada.

+ +

Próximos passos

+ +

Você poderia tentar este exemplo e dar uma olhada no código fonte webrtc-simple-datachannel, disponível no GitHub.

diff --git a/files/pt-br/web/api/webrtc_api/simples_rtcdatachannel_amostra/index.html b/files/pt-br/web/api/webrtc_api/simples_rtcdatachannel_amostra/index.html deleted file mode 100644 index 72ac37e56a..0000000000 --- a/files/pt-br/web/api/webrtc_api/simples_rtcdatachannel_amostra/index.html +++ /dev/null @@ -1,272 +0,0 @@ ---- -title: Uma simples amostra de RTCDataChannel -slug: Web/API/WebRTC_API/Simples_RTCDataChannel_amostra -translation_of: Web/API/WebRTC_API/Simple_RTCDataChannel_sample ---- -

{{WebRTCSidebar}}

- -

A interface {{domxref("RTCDataChannel")}} é um recurso da WebRTC API que permite abrir um canal entre dois pares sobre os quais você pode enviar e receber dados arbitrários. A API é intencionalmente semelhante à WebSocket API, de modo que o mesmo modelo de programação pode ser usado para ambos.

- -

Neste exemplo, abriremos um {{domxref("RTCDataChannel")}} para realizar a conexão entre dois elementos na mesma página. Embora seja obviamente um cenário artificial, é útil para demonstrar o fluxo de conexão entre dois pares. Vamos cobrir a mecânica necessária para conectar, transmitir e receber dados, mas vamos deixar para outro exemplo os detalhes sobre como localizar e se conectar a um computador remoto.

- -

O HTML

- -

Primeiro, vamos dar uma olhada rápida no HTML que é necessário. Não há nada incrivelmente complicado aqui. Primeiro, temos um par de botões para estabelecer e fechar a conexão:

- -
<button id="connectButton" name="connectButton" class="buttonleft">
-  Conectar
-</button>
-<button id="disconnectButton" name="disconnectButton" class="buttonright" disabled>
-  Desconectar
-</button>
- -

Depois, há uma caixa que contém o campo de input no qual o usuário pode digitar uma mensagem para transmitir, com um botão para enviar o texto digitado. Este {{HTMLElement("div")}} será o primeiro ponto (peer) no canal.

- -
  <div class="messagebox">
-    <label for="message">Insira a mensagem:
-      <input type="text" name="message" id="message" placeholder="Texto da mensagem"
-              inputmode="latin" size=60 maxlength=120 disabled>
-    </label>
-    <button id="sendButton" name="sendButton" class="buttonright" disabled>
-      Enviar
-    </button>
-  </div>
- -

Finalmente, há uma pequena caixa na qual vamos inserir as mensagens. Este bloco {{HTMLElement("div")}} será o segundo ponto do par (peer).

- -
<div class="messagebox" id="receivebox">
-  <p>Mensagens recebidas:</p>
-</div>
- -

O código JavaScript

- -

Como você pode simplesmente ver o próprio código no GitHub, abaixo, analisaremos as partes do código que fazem o trabalho pesado.

- -

A WebRTC API faz um intenso uso de {{jsxref("Promise")}}s. Que tornam muito fácil encadear as etapas do processo de conexão; Se você ainda não leu sobre esta funcionalidade do ECMAScript 2015, você deveria ler sobre eles. Da mesma forma, este exemplo usa arrow functions para simplificar a sintaxe.

- -

Começando

- -

Quando o script é executado, configuramos um {{event("load")}} ouvinte de eventos (event listener), De modo que, uma vez que a página esteja totalmente carregada, nossa função startup() seja chamada.

- -
function startup() {
-  connectButton = document.getElementById('connectButton');
-  disconnectButton = document.getElementById('disconnectButton');
-  sendButton = document.getElementById('sendButton');
-  messageInputBox = document.getElementById('message');
-  receiveBox = document.getElementById('receivebox');
-
-  // Define os ouvintes de eventos para os elementos da interface do usuário
-
-  connectButton.addEventListener('click', connectPeers, false);
-  disconnectButton.addEventListener('click', disconnectPeers, false);
-  sendButton.addEventListener('click', sendMessage, false);
-}
- -

Isso é bastante direto. Pegamos referências de todos os elementos da página que precisaremos acessar e, em seguida, configuramos {{domxref("EventListener", "event listeners")}} nos três botões.

- -

Estabelecendo uma conexão

- -

Quando o usuário clica no botão "Conectar", o método connectPeers() é chamado. Para que fique mais claro, iremos quebrar o código em mais partes, e analisar um pouco de cada vez.

- -
-

Nota: Mesmo que ambas as extremidades da nossa conexão estejam na mesma página, vamos nos referir ao ponto que inicia a conexão como "local", e ao outro como sendo o "remoto".

-
- -

Configurando o ponto local (local peer)

- -
localConnection = new RTCPeerConnection();
-
-sendChannel = localConnection.createDataChannel("sendChannel");
-sendChannel.onopen = handleSendChannelStatusChange;
-sendChannel.onclose = handleSendChannelStatusChange;
-
- -

O primeiro passo é criar o ponto "local" da conexão. Este é o ponto que enviará o pedido de conexão. O próximo passo é criar o {{domxref("RTCDataChannel")}} chamando {{domxref("RTCPeerConnection.createDataChannel()")}} e configurando ouvintes de eventos (event listeners) para monitorar o canal, e para que possamos saber quando ele for aberto e fechado (isto é, quando o canal está conectado ou desconectado dentro dessa conexão entre pares (peer connection)).

- -

É importante ter em mente que cada extremidade do canal tem seu próprio objeto {{domxref("RTCDataChannel")}} .

- -

Configurando o ponto remoto (remote peer)

- -
remoteConnection = new RTCPeerConnection();
-remoteConnection.ondatachannel = receiveChannelCallback;
- -

O ponto remoto está configurado de forma semelhante, exceto que não precisamos nós mesmos criar explicitamente um {{domxref("RTCDataChannel")}} , uma vez que vamos ser conectados através do canal estabelecido acima. Em vez disso, criamos um {{event("datachannel")}} manipulador de eventos (event handler); Isso será chamado quando o canal de dados (data channel) for aberto; Este manipulador (handler) receberá um objeto RTCDataChannel; você verá isso abaixo.

- -

Configurando  ICE candidates

- -

O próximo passo é configurar cada conexão com os ouvintes do ICE que serão chamados quando houver um novo candidato ICE para comunicar com o outro lado.

- -
-

Nota: Em um cenário do mundo real em que os dois pares não estão sendo executados no mesmo contexto, o processo é um pouco mais complexo; Cada lado fornece, um de cada vez, um sugestão sobre como conectar (por exemplo, UDP, UDP com um relay, TCP, etc.) chamando {{domxref("RTCPeerConnection.addIceCandidate()")}}, e eles vão de um lado para outro até chegarem a um acordo. Mas aqui, acabamos de aceitar a primeira oferta de cada lado, uma vez que não existe uma rede real envolvida.

-
- -
    localConnection.onicecandidate = e => !e.candidate
-        || remoteConnection.addIceCandidate(e.candidate)
-        .catch(handleAddCandidateError);
-
-    remoteConnection.onicecandidate = e => !e.candidate
-        || localConnection.addIceCandidate(e.candidate)
-        .catch(handleAddCandidateError);
- -

Configuramos cada {{domxref("RTCPeerConnection")}} para ter um manipulador de eventos (event handler) para o evento {{event("icecandidate")}} .

- -

Iniciando a tentativa de conexão

- -

A última coisa que precisamos fazer para começar a conectar nossos pares é criar uma oferta de conexão.

- -
    localConnection.createOffer()
-    .then(offer => localConnection.setLocalDescription(offer))
-    .then(() => remoteConnection.setRemoteDescription(localConnection.localDescription))
-    .then(() => remoteConnection.createAnswer())
-    .then(answer => remoteConnection.setLocalDescription(answer))
-    .then(() => localConnection.setRemoteDescription(remoteConnection.localDescription))
-    .catch(handleCreateDescriptionError);
- -

Vamos passar por isto linha por linha e decifrar o que significa.

- -
    -
  1. Primeiro chamamos {{domxref("RTCPeerConnection.createOffer()")}} método para criar um resumo {{Glossary("SDP")}} (Session Description Protocol) descrevendo a conexão que queremos fazer. Este método aceita, opcionalmente, um objeto com restrições a serem suportadas pela conexão para atender às suas necessidades, como no caso da conexão precisar suportar áudio, vídeo ou ambos. Em nosso exemplo simples, não temos restrições.
    2. -
  2. Se a oferta for criada com sucesso, passamos o resumo junto ao método de conexões locais {{domxref("RTCPeerConnection.setLocalDescription()")}} . Isso configura o ponto local da conexão.
    3. -
  3. O próximo passo é conectar o ponto local ao remoto comunicando ao ponto remoto sobre ele. Isso é feito chamando remoteConnection.{{domxref("RTCPeerConnection.setRemoteDescription()")}}. Agora o remoteConnection conhece a conexão que está sendo construída.
    4. -
  4. Isso significa que é hora do ponto remoto responder. Ele faz isso chamando o método {{domxref("RTCPeerConnection.createAnswer", "createAnswer()")}} . Isso gera um resumo de SDP que descreve a conexão que o ponto remoto está disposto e capaz de estabelecer. Essa configuração está em algum lugar na união das opções que ambos os pares podem suportar.
    5. -
  5. Uma vez que a resposta foi criada, ela é passada para o remoteConnection chamando {{domxref("RTCPeerConnection.setLocalDescription()")}}. Isso estabelece o ponto remoto da conexão (que, para o ponto remoto, é o ponto local. Isso pode parecer confuso, mas você irá se acostumar com isso.
    6. -
  6. Finalmente, a descrição local das conexões remotas está configurada para se referir ao ponto remoto, chamando localConnection's {{domxref("RTCPeerConnection.setRemoteDescription()")}}.
    7. -
  7. O catch() chama uma rotina que lida com os erros que ocorrem.
    8. -
- -
-

Nota: Mais uma vez, esse processo não é uma implementação do mundo real; No uso normal, há dois pedaços de código executados em duas máquinas, interagindo e negociando a conexão.

-
- -

Manipulação da conexão de pares bem sucedida

- -

Como cada lado da conexão peer-to-peer é conectado com sucesso, o evento correspondente {{domxref("RTCPeerConnection")}}'s {{event("icecandidate")}} é disparado. Esses manipuladores podem fazer o que for necessário, mas, neste exemplo, tudo o que precisamos fazer é atualizar a interface do usuário:

- -
  function handleLocalAddCandidateSuccess() {
-    connectButton.disabled = true;
-  }
-
-  function handleRemoteAddCandidateSuccess() {
-    disconnectButton.disabled = false;
-  }
- -

A única coisa que fazemos aqui é desativar o botão "Conectar" quando o ponto local estiver conectado e ativar o botão "Desconectar" quando o ponto remoto se conectar.

- -

Conectando o canal de dados

- -

Uma vez que o {{domxref("RTCPeerConnection")}} é aberto, o evento {{event("datachannel")}} é enviado para o ponto remoto para completar o processo de abertura do canal de dados; Isso invoca nosso método receiveChannelCallback(), que se parece com isso:

- -
  function receiveChannelCallback(event) {
-    receiveChannel = event.channel;
-    receiveChannel.onmessage = handleReceiveMessage;
-    receiveChannel.onopen = handleReceiveChannelStatusChange;
-    receiveChannel.onclose = handleReceiveChannelStatusChange;
-  }
- -

O evento{{event("datachannel")}} inclui, em sua propriedade de canal, uma referência a um {{domxref("RTCDataChannel")}} Representando o ponto remoto do canal. Isso é salvo, e nós configuramos, no canal, ouvintes de eventos para os eventos que queremos manipular. Uma vez feito isso, nosso método handleReceiveMessage() Será chamado cada vez que os dados são recebidos pelo ponto remoto, e o método handleReceiveChannelStatusChange() será chamado sempre que mudar o estado da conexão do canal, para que possamos reagir quando o canal estiver totalmente aberto e quando ele for fechado.

- -

Lidando com as mudanças de status do canal

- -

Ambos nossos pontos locais e remotos usam um único método para lidar com eventos que indicam alguma alteração no status da conexão do canal.

- -

Quando o ponto local experimenta um evento aberto ou fechado, o métodohandleSendChannelStatusChange() é chamado:

- -
  function handleSendChannelStatusChange(event) {
-    if (sendChannel) {
-      var state = sendChannel.readyState;
-
-      if (state === "open") {
-        messageInputBox.disabled = false;
-        messageInputBox.focus();
-        sendButton.disabled = false;
-        disconnectButton.disabled = false;
-        connectButton.disabled = true;
-      } else {
-        messageInputBox.disabled = true;
-        sendButton.disabled = true;
-        connectButton.disabled = false;
-        disconnectButton.disabled = true;
-      }
-    }
-  }
- -

Se o estado do canal mudou para "open", isso indica que terminamos de estabelecer o link entre os dois pares. A interface do usuário é atualizada de forma correspondente: ativando o elemento de input de texto para a mensagem a ser enviada, focando este elemento de input para que o usuário comece imediatamente a digitar, habilitando os botões "Enviar" e "Desconectar", que são agora utilizáveis, E desativando o botão "Conectar", uma vez que não é necessário quando a conexão está aberta.

- -

Se o estado do canal mudou para "closed", ocorre o conjunto oposto de ações: a caixa de entrada de texto e o botão "Enviar" estão desativados, o botão "Conectar" está habilitado para que o usuário possa abrir uma nova conexão se desejar, e o botão "Desconectar" está desativado, uma vez que não é útil quando não existe conexão.

- -

Nosso exemplo de par remoto, por outro lado, ignora os eventos de alteração de status, exceto para registrar o evento no console:

- -
  function handleReceiveChannelStatusChange(event) {
-    if (receiveChannel) {
-      console.log("Receive channel's status has changed to " +
-                  receiveChannel.readyState);
-    }
-  }
- -

O método handleReceiveChannelStatusChange() recebe como parâmetro de entrada o evento que ocorreu; Este será um {{domxref("RTCDataChannelEvent")}}.

- -

Enviando mensagens

- -

Quando o usuário pressiona o botão "Enviar", o método sendMessage() que estabelecemos como o manipulador para o evento do botão {{event("click")}} é chamado. Esse método é bastante simples:

- -
  function sendMessage() {
-    var message = messageInputBox.value;
-    sendChannel.send(message);
-
-    messageInputBox.value = "";
-    messageInputBox.focus();
-  }
- -

Primeiro, o texto da mensagem é obtido dos atributos do elemento de input {{htmlattrxref("value", "input")}} . Isso é enviado para o ponto remoto, ligando para {{domxref("RTCDataChannel.send", "sendChannel.send()")}}. E está tudo aí! O resto deste método é apenas um pouco de açúcar para experiência do usuário - a caixa de entrada é esvaziada e re-focada para que o usuário comece imediatamente a digitar outra mensagem.

- -

Recebendo mensagens

- -

Quando ocorre um evento de "mensagem" no canal remoto, nosso método handleReceiveMessage() é chamado como o manipulador de eventos.

- -
  function handleReceiveMessage(event) {
-    var el = document.createElement("p");
-    var txtNode = document.createTextNode(event.data);
-
-    el.appendChild(txtNode);
-    receiveBox.appendChild(el);
-  }
- -

Este método simplesmente executa alguns injeções básicas {{Glossary("DOM")}} ; cria um novo {{HTMLElement("p")}} (paragraph) elemento, então cria um novo nó {{domxref("Text")}} contendo o texto da mensagem, que é recebido na propriedade de dados do evento. Este nó de texto é anexado como um filho do novo elemento, que é então inserido no bloco receiveBox, fazendo com que ele desenhe na janela do navegador.

- -

Desconectando os pares (peers)

- -

Quando o usuário clica no botão "Desconectar", o método disconnectPeers() previamente configurado como o manipulador desse botão é chamado.

- -
  function disconnectPeers() {
-
-    // Close the RTCDataChannels if they're open.
-
-    sendChannel.close();
-    receiveChannel.close();
-
-    // Close the RTCPeerConnections
-
-    localConnection.close();
-    remoteConnection.close();
-
-    sendChannel = null;
-    receiveChannel = null;
-    localConnection = null;
-    remoteConnection = null;
-
-    // Update user interface elements
-
-    connectButton.disabled = false;
-    disconnectButton.disabled = true;
-    sendButton.disabled = true;
-
-    messageInputBox.value = "";
-    messageInputBox.disabled = true;
-  }
-
- -

Isso começa por fechar cada par {{domxref("RTCDataChannel")}}, então, de forma semelhante, cada um {{domxref("RTCPeerConnection")}}. Então, todas as referências salvas desses objetos são definidas como null para evitar a reutilização acidental, e a interface do usuário é atualizada para refletir o fato de que a conexão foi fechada.

- -

Próximos passos

- -

Você poderia tentar este exemplo e dar uma olhada no código fonte webrtc-simple-datachannel, disponível no GitHub.

diff --git a/files/pt-br/web/api/websockets_api/index.html b/files/pt-br/web/api/websockets_api/index.html new file mode 100644 index 0000000000..1a24b9d86a --- /dev/null +++ b/files/pt-br/web/api/websockets_api/index.html @@ -0,0 +1,178 @@ +--- +title: WebSockets +slug: WebSockets +tags: + - Referencia + - Sumario + - WebSockets +translation_of: Web/API/WebSockets_API +--- +

WebSockets é uma tecnologia avançada que torna possível abrir uma sessão de comunicação interativa entre o navegador do usuário e um servidor. Com esta API, você pode enviar mensagens para um servidor e receber respostas orientadas a eventos sem ter que consultar o servidor para obter uma resposta.

+ +
+
+

Documentação

+ +
+
Escrevendo aplicações cliente WebSocket
+
Um tutorial para escrever clientes WebSocket para ser executado no browser.
+
Referencias WebSockets
+
Uma referência para a API WebSocket do lado do cliente.
+
(TBD)Escrevendo servidores WebSocket
+
Um guia para escrever código do lado do servidor para lidar com o protocolo WebSocket.
+
+ +

Saiba mais...

+
+ +
+

Ferramentas

+ + + + + + +
+
+ +

Veja Também

+ + + + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticasChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte a versão 76 {{obsolete_inline}}6{{CompatGeckoDesktop("2.0")}}{{CompatNo}}11.00 (desativado)5.0.1
Protocolo suporta versão 7 {{obsolete_inline}}{{CompatNo}}{{CompatGeckoDesktop("6.0")}}
+ {{property_prefix("Moz")}}		{{CompatNo}}{{CompatNo}}{{CompatNo}}
Protocolo suporta versão 10 {{obsolete_inline}}14{{CompatGeckoDesktop("7.0")}}
+ {{property_prefix("Moz")}}		HTML5 Labs{{CompatUnknown}}{{CompatUnknown}}
Suporte padrão - RFC 645516{{CompatGeckoDesktop("11.0")}}1012.106.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticasAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte a versão 76 {{obsolete_inline}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Protocolo suporta versão 7 {{obsolete_inline}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Protocolo suporta versão 8 (IETF rascunho 10) {{obsolete_inline}}{{CompatUnknown}}{{CompatGeckoMobile("7.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Suporte padrão - RFC 645516 (Chrome){{CompatGeckoDesktop("11.0")}}{{CompatUnknown}}12.106.0
+
+ +

Notas Gecko

+ +

O suporte a WebSockets no Firefox continua acompanhando as constantes especificações do WebSocket. O Firefox 6 implementa a versão 7 do protocolo subjacente, enquanto o Firefox 7 implementa a versão 8 (conforme especificado pelo rascunho IETF 10). O Firefox móvel recebeu suporte WebSocket no Firefox mobile 7.0.

+ +

Gecko 6.0

+ +

Antes do Gecko 6.0 {{geckoRelease("6.0")}}, estava incorreto, um objeto WebSocket que alguns sites implicavam que os serviços WebSocket não eram prefixados. Este objeto foi renomeado para MozWebSocket.

+ +

Gecko 7.0

+ +

Iniciado no Gecko 7.0 {{geckoRelease("7.0")}}, o network.websocket.max-connections preferencialmente usado para determinar o número máximo de conexões do WebSocket que pode m ser abertas de cada vez. O valor padrão é 200.

+ +

Gecko 8.0

+ +

Iniciado no Gecko 8.0 {{geckoRelease("8.0")}}, a extensão de fluxo de expansão para o protocolo WebSocket foi desativada, por estar obsoleta nas especificações. Isso resolve incompatibilidades com alguns sites.

+ +

Gecko 11.0

+ +

Antes do Gecko 11.0, as mensagens recebidas e enviadas estavam limitadas a 16 MB de tamanho. Agora elas podem ter até 2 GB de tamanho. Note, no entanto, que as limitações de memória (especialmente em dispositivos móveis) tornam isso apenas teoria, não se aplica à prática. Na realidade, as transferências desse tamanho falharão em dispositivos que não possuem memória suficiente.

+ +

Além disso, o ArrayBuffer envia e recebe suporte para dados binários

+ +

Iniciado no Gecko 11.0, a API do WebSocket já não é prefixada.

+ +
Atenção:Entre outras coisas, um motivo chave para o WebSockets estar desativado por padrão no Firefox 4 e 5 é a descoberta de um Problema de segurança no design do protocolo. Isso foi corrigido no Firefox 6 implementando uma versão mais recente do protocolo que corrige o problema.
diff --git a/files/pt-br/web/api/websockets_api/writing_websocket_client_applications/index.html b/files/pt-br/web/api/websockets_api/writing_websocket_client_applications/index.html new file mode 100644 index 0000000000..af608ae641 --- /dev/null +++ b/files/pt-br/web/api/websockets_api/writing_websocket_client_applications/index.html @@ -0,0 +1,182 @@ +--- +title: Escrevendo aplicações cliente WebSocket +slug: WebSockets/Escrevendo_aplicacoes_cliente_WebSocket +tags: + - Cliente + - Exemplo + - Guía + - WebSocket API +translation_of: Web/API/WebSockets_API/Writing_WebSocket_client_applications +--- +

Aplicações cliente usam o WebSocket API para se comunicar com WebSocket servers sob o protocolo WebSocket.

+ +

{{AvailableInWorkers}}

+ +
+

O fragmento de código neste artigo foi tomado de um exemplo de chat usando WebSocket. veja o código, então experimente o exemplo. O exemplo atual possui um bug; ele está tentando usar WebSockets inseguro e precisa ser atualizado para usar WebSocokets seguro. Iremos arrumar isso em breve!

+
+ +

Criando um objeto WebSocket 

+ +

Para se comunicar utilizando o protocolo WebSocket, você precisa criar um objeto WebSocket, que automaticamente tentará abrir a conexão com o servidor.

+ +

O construtor WebSocket aceita dois campos, um obrigatório e um opcional:

+ +
WebSocket WebSocket(
+  in DOMString url,
+  in optional DOMString protocols
+);
+
+ +
+
url
+
A URL para se conectar. Esta deve ser a URL para qual o WebSocket irá responder.
+
protocols {{ optional_inline() }}
+
Uma única string indicando o protocolo ou uma array de strings de protocolos. Estas strings são usadas para indicar sub-protocolos, de forma que um único servidor pode implementar múltiplos sub-protocolos WebSocket (por exemplo, você pode querer que um servidor seja capaz de lidar com diferentes tipos de interações a depender do protocol especificado). Se não especificar uma string de protocolo, uma string vazia é assumida.
+
+ +

O construtor lançará a exceção SECURITY_ERR se o destino não permitir acesso. Isso pode acontecer se você tentar utilizar uma conexão insegura (a maioria dos {{Glossary("user agent", "user agents")}} agora necessitam de um link seguro para todas as conexões WebSocket, a menos que estejam no mesmo dispositivo ou na mesma rede).

+ +
+
+ +

Erros de Conexão

+ +

Se um erro ocorrer durante a tentativa de conexão, primeiro um simpes evento com o nome "error" é enviado ao objeto WebSocket  (invocando, assim, seu manipulador onerror), e então o CloseEvent é enviado ao objeto WebSocket (invocando o manipulador onclose) para indicar a razão pela qual a conexão foi fechada.

+ +

O browser pode exibir uma descrição de erro mais detalhada na saída do console, ou mesmo um código de encerramento conforme definido na RFC 6455, Section 7.4 através do CloseEvent. Está implementado a partir do Firefox 11.

+ +

Exemplos

+ +

Neste simples exemplo, criaremos um novo WebSocket, conectando ao servidor em ws://www.example.com/socketserver. Neste exemplo utilizaremos um protocolo customizado denominado "protocolOne", embora possa ser omitido.

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

No retorno, exampleSocket.readyState está como CONNECTING. O readyState se tornará OPEN quando a conexão estiver pronta para transferir dados.

+ +

Se quiser abrir uma conexão e for flexível quanto aos protocolos suportados, você pode especificar um array de protocolos:

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

Uma vez que a conexão for estabelecida (isso é, readyState está OPEN), exampleSocket.protocol informará qual protocolo o servidor selecionou.

+ +

Nos exemplos acima, ws foi substituído por http, de forma similar wss substitui https. Estabelecer uma conexão WebSocket depende do Mecanismo de Aprimoramento HTTP, de forma que o pedido para atualização de protocolo está implícito quando endereçamos o servidor HTTP como ws://www.example.com ou wss://www.example.com.

+ +

Enviando dados ao servidor

+ +

Uma vez a conexão aberta, você pode iniciar a transmisão de dados ao servidor. Para tanto, chame o método send() do WebSocket para cada mensagem que queira enviar:

+ +
exampleSocket.send("Aqui vai algum texto que o servidor esteja aguardando urgentemente!");
+
+ +

Você pode enviar dados como uma string, {{ domxref("Blob") }}, ou um ArrayBuffer.

+ +
Note: Nas versões anteriores à 11, o Firefox suporta apenas o envio de dados como string.
+ +

Visto que estabelecer uma conexão funciona de forma assícrona e, consequentemente, propensa a erros, não há garantia de sucesso ao chamar o método send() imediatamente após criar um objeto WebSocket. Podemos, pelo menos, ter certeza de que a tentativa de envio dos dados apenas ocorre quando uma conexão é estabelecida definindo um manipulador de eventos onopen:

+ +
exampleSocket.onopen = function (event) {
+  exampleSocket.send("Aqui vai algum texto que o servidor esteja aguardando urgentemente!");
+};
+
+ +

Utilizando JSON para transmitir objetos

+ +

Uma forma conveniente é usar JSON para enviar dados razoavelmente complexos ao servidor. Por exemplo, um aplicação de chat pode interagir  com o servidor empregando um protocolo que utilize pacotes de dados  JSON encapsulados:

+ +
// Enviar texto para todos os usuarios atraves do servidor
+function sendText() {
+  // Construir um objeto do tipo msg contendo o dado que o servidor precisa processar a partir do cliente de chat.
+  var msg = {
+    type: "message",
+    text: document.getElementById("text").value,
+    id:   clientID,
+    date: Date.now()
+  };
+
+  // Enviar o objeto msg como um JSON em formato de string.
+  exampleSocket.send(JSON.stringify(msg));
+
+  // Esvaziar o campo input do elemento text, pronto pra receber a próxima linha de texto do usuário.
+  document.getElementById("text").value = "";
+}
+
+ +

Recebendo mensagens do servidor

+ +

A API WebSockets é dirigida por eventos; quando mensagens são recebidas, um evento de "mensagem" é entregue à função onmessage. Para começar a ouvir os dados de entrada, você pode fazer algo conforme o exemplo abaixo:

+ +
exampleSocket.onmessage = function (event) {
+  console.log(event.data);
+}
+
+ +

Recebendo e interpretando objetos JSON

+ +

Vamos considerar que a aplicação cliente de chat remete o envio de dados {{ anch("Utilizando JSON para transmitir objetos") }}. Existem diversos tipos de pacotes de dados que o cliente pode receber, tais como:

+ + + +

O código que interpreta as mensagens de entrada se parecerá com esse:

+ +
exampleSocket.onmessage = function(event) {
+  var f = document.getElementById("chatbox").contentDocument;
+  var text = "";
+  var msg = JSON.parse(event.data);
+  var time = new Date(msg.date);
+  var timeStr = time.toLocaleTimeString();
+
+  switch(msg.type) {
+    case "id":
+      clientID = msg.id;
+      setUsername();
+      break;
+    case "username":
+      text = "<b>User <em>" + msg.name + "</em> signed in at " + timeStr + "</b><br>";
+      break;
+    case "message":
+      text = "(" + timeStr + ") <b>" + msg.name + "</b>: " + msg.text + "<br>";
+      break;
+    case "rejectusername":
+      text = "<b>Seu usuario foi configurado como <em>" + msg.name + "</em> porque o nome que você escolheu está em uso.</b><br>"
+      break;
+    case "userlist":
+      var ul = "";
+      for (i=0; i < msg.users.length; i++) {
+        ul += msg.users[i] + "<br>";
+      }
+      document.getElementById("userlistbox").innerHTML = ul;
+      break;
+  }
+
+  if (text.length) {
+    f.write(text);
+    document.getElementById("chatbox").contentWindow.scrollByPages(1);
+  }
+};
+
+ +

Aqui utilizamos JSON.parse() para conveter o objeto JSON de volta ao objeto original, em seguida, examine e aja de acordo com seu conteúdo.

+ +

Formato de dados de texto

+ +

O formato de Texto recebido através de uma conexão WebSocket está no formato UTF-8.

+ +

Fechando a conexão

+ +

Quando finalizar o uso da conexão WebSocket, invoque o método close():

+ +
exampleSocket.close();
+
+ +

Pode ser útil examinar o atributo bufferedAmount do socket  antes de tentar fechar a conexão para determinar se qualquer dado ainda está pendente de transmissão na rede. 

+ +

Considerações de segurança

+ +

WebSockets não devem ser utilizados em um contexto de um ambiente misto, isto é, você não deveria abrir uma conexão não-segura a partir de uma página previamente carregada utilizando HTTPS, ou vice-versa. A maioria dos browsers atuamente apenas permitem conexões seguras pelo Websocke, e não mais suportam contextos diferentes desse.

diff --git a/files/pt-br/web/api/websockets_api/writing_websocket_server/index.html b/files/pt-br/web/api/websockets_api/writing_websocket_server/index.html new file mode 100644 index 0000000000..553ba11aec --- /dev/null +++ b/files/pt-br/web/api/websockets_api/writing_websocket_server/index.html @@ -0,0 +1,237 @@ +--- +title: 'Escrevendo um servidor WebSocket em C #' +slug: WebSockets/Writing_WebSocket_server +translation_of: Web/API/WebSockets_API/Writing_WebSocket_server +--- +

Introdução

+ +

Se você quiser usar uma API WebSocket, você precisara ter um servidor. Neste artigo vou mostrar como escrever um WebSocket em C#. Você pode fazer isso em qualquer linguagem server-side, mas para manter as coisas simples e mais compreensíveis eu escolhi uma linguagem Microsoft.

+ +

Este servidor está em conformidade com a RFC 6455, por isso irá tratar apenas as conexões com os navegadores Chrome versão 16, Firefox 11, IE 10 ou superior. 

+ +

Primeiros passos

+ +

Os WebSocket´s se comunicam através de uma conexão TCP (Transmission Control Protocol), felizmente o C# possui a classe TcpListener que, como o nome sugere, tem a função de escutar (Listener) as comunicações via TCP. A classe TcpListener está no namespace System.Net.Sockets.

+ +
+

É uma boa idéia usar a palavra chave using para escrever menos. Isso significa que não é preciso você reescrever o namespace toda vez que usar uma classe dele.

+
+ +

TcpListener

+ +

Construtor:

+ +
TcpListener(System.Net.IPAddress localaddr, int port)
+ +

Aqui você define onde o servidor será acessível.

+ +
+

Para setar facilmente o tipo esperado no primeiro parâmetro, use o método estático Parse da classe IPAddress.

+
+ +

Métodos:

+ + + +

Veja como usar o que aprendemos:

+ +
​using System.Net.Sockets;
+using System.Net;
+using System;
+
+class Server {
+    public static void Main() {
+        TcpListener server = new TcpListener(IPAddress.Parse("127.0.0.1"), 80);
+
+        server.Start();
+        Console.WriteLine("Server has started on 127.0.0.1:80.{0}Waiting for a connection...", Environment.NewLine);
+
+        TcpClient client = server.AcceptTcpClient();
+
+        Console.WriteLine("A client connected.");
+    }
+}
+
+ +

TcpClient

+ +

Métodos:

+ + + +

Propriedades:

+ + + +

NetworkStream

+ +

Métodos:

+ +
Write(Byte[] buffer, int offset, int size)
+ +

Grava bytes do buffer, offset e size determinam o tamanho da mensagem.

+ +
Read(Byte[] buffer, int offset, int size)
+ +

Lê bytes para o buffer, offset e size determinam o tamanho da mensagem. 

+ +

Vamos estender nosso exemplo.

+ +
TcpClient client = server.AcceptTcpClient();
+
+Console.WriteLine("A client connected.");
+
+NetworkStream stream = client.GetStream();
+
+//enter to an infinite cycle to be able to handle every change in stream
+while (true) {
+    while (!stream.DataAvailable);
+
+    Byte[] bytes = new Byte[client.Available];
+
+    stream.Read(bytes, 0, bytes.Length);
+}
+ +

Handshaking

+ +

Quando um cliente se conecta a um servidor, ele envia uma solicitação GET para atualizar a conexão com o WebSocket a partir de uma simples requisição HTTP. Isto é conhecido como handshaking (aperto de mão).

+ +
+

Este código tem um defeito. Digamos que a propriedade client.Available retorna o valor 2 porque somente a requisição GET está disponível até agora. a expressão regular iria falhar mesmo que os dados recebidos sejam perfeitamente válidos.

+
+ +
using System.Text;
+using System.Text.RegularExpressions;
+
+Byte[] bytes = new Byte[client.Available];
+
+stream.Read(bytes, 0, bytes.Length);
+
+//translate bytes of request to string
+String data = Encoding.UTF8.GetString(bytes);
+
+if (new Regex("^GET").IsMatch(data)) {
+
+} else {
+
+}
+ +

Criar a resposta é mais fácil do que entender porque você deve fazê-lo desta forma.

+ +

Você deve,

+ +
    +
  1. Obter o valor do cabeçalho da requisição Sec-WebSocket-Key sem qualquer espaço à direita e à esquerda;
    2. +
  2. Concatenar com "258EAFA5-E914-47DA-95CA-C5AB0DC85B11";
    3. +
  3. Calcular o código SHA-1 e Base64 dele;
    4. +
  4. Reescreva no cabeçalho de resposta o valor de Sec-WebSocket-Accept como parte de uma resposta HTTP.
    5. +
+ +
if (new Regex("^GET").IsMatch(data)) {
+    Byte[] response = Encoding.UTF8.GetBytes("HTTP/1.1 101 Switching Protocols" + Environment.NewLine
+        + "Connection: Upgrade" + Environment.NewLine
+        + "Upgrade: websocket" + Environment.NewLine
+        + "Sec-WebSocket-Accept: " + Convert.ToBase64String (
+            SHA1.Create().ComputeHash (
+                Encoding.UTF8.GetBytes (
+                    new Regex("Sec-WebSocket-Key: (.*)").Match(data).Groups[1].Value.Trim() + "258EAFA5-E914-47DA-95CA-C5AB0DC85B11"
+                )
+            )
+        ) + Environment.NewLine
+        + Environment.NewLine);
+
+    stream.Write(response, 0, response.Length);
+}
+
+ +

Decodificação de mensagens

+ +

Após um handshake de sucesso o cliente ponde enviar mensagens ao servidor, mas agora estas mensagens são codificadas.

+ +

Se nós enviarmos "MDN", nós obtemos estes bytes:

+ + + + + + + + + + + + + + + +
129131618435611216109
+ +

- 129:

+ + + + + + + + + + + + + + + + + + + + +
FIN (Esta é toda a mensagem?)RSV1RSV2RSV3Opcode
10000x1=0001
+ +

FIN: Você pode enviar sua mensagem em quadros (frames), mas agora as coisas ficaram mais simples.
+ Opcode 0x1 significa que este é um texto. Veja aqui a lista completa de Opcodes.

+ +

- 131:

+ +

Se o segundo byte menos 128 estiver entre 0 e 125, este é o tamanho da mensagem. Se for 126, os 2 bytes seguintes (16-bit inteiro sem sinal) e se 127, os 8 bytes seguintes (64-bit inteiro sem sinal) são o comprimento.

+ +
+

Eu posso escolher 128, porque o primeiro bit sempre será 1.

+
+ +

- 61, 84, 35 e 6 são os bytes de chave para decodificar. Sempre mudam.

+ +

- O restante dos bytes codificados são a mensagem.

+ +

Algoritmo de decodificação

+ +

byte decodificado = [byte codificado XOR (posição do byte codificado MOD 4º byte da chave)]

+ +

Exemplo em C#:

+ +
Byte[] decoded = new Byte[3];
+Byte[] encoded = new Byte[3] {112, 16, 109};
+Byte[] key = Byte[4] {61, 84, 35, 6};
+
+for (int i = 0; i < encoded.Length; i++) {
+    decoded[i] = (Byte)(encoded[i] ^ key[i % 4]);
+}
+ + + + + +
 
diff --git a/files/pt-br/web/api/websockets_api/writing_websocket_servers/index.html b/files/pt-br/web/api/websockets_api/writing_websocket_servers/index.html new file mode 100644 index 0000000000..e493605538 --- /dev/null +++ b/files/pt-br/web/api/websockets_api/writing_websocket_servers/index.html @@ -0,0 +1,263 @@ +--- +title: Escrevendo um servidor WebSocket +slug: WebSockets/Writing_WebSocket_servers +tags: + - Guía + - HTML5 + - Tutorial + - WebSocket + - WebSockets +translation_of: Web/API/WebSockets_API/Writing_WebSocket_servers +--- +

Um servidor de WebSocket  é uma aplicação TCP que escuta uma porta de um servidor que segue um protocolo específico, simples assim. A tarefa de criar um servidor personalizado costuma assustar as pessoas; no entanto, pode ser fácil implementar um simples servidor WebSocket na sua plataforma de escolha. 

+ +

Um servidor WebSocket pode ser escrito em qualquer linguagem de programação server-side  que é capaz de utilizar Berkeley sockets,  tais como C(++) , ou Python, ou mesmo o PHP e o server-side JavaScript. Esse não é um tutorial em uma linguagem de programação específica, mas serve como guia para facilitar a escrita do seu próprio servidor.

+ +

Você precisará saber como o HTTP funciona e ter uma experiência média com programação.

+ +

Dependendo do suporte da linguagem, pode ser necessário o conhecimento sobre soquetes TCP. O escopo deste guia é apresentar o conhecimento mínimo que você precisa para escrever um servidor WebSocket.

+ +
+

Leia a útlima especificação sobre WebSockets, a RFC 6455. As seções 1 e 4-7 são especialmente interessantes para implementadores de servidores. A seção 10 discute assuntos sobre segurança que você definitivamente deveria examinar antes de expor seu servidor.

+
+ +

Um servidor de WebSocket é explicado de maneira bem simples aqui. Servidores de WebSocket geralmente são servidores separados e especializados (para balanceamento de carga ou outras razões práticas), então, geralmente você irá usar um proxy reverso (como um servidor HTTP comum) para detectar a solicitação de handshakes do WebSocket, pré-processá-los e enviar esses clientes para um servidor WebSocket real. Isso significa que você não precisa encher seu código com cookies e manipuladores de autenticação (por exemplo).

+ +

O Handshake ("aperto de mão") do WebSocket

+ +

Primeiro de tudo, o servidor deve ouvir as conexões socket recebidas usando um socket TCP padrão. Dependendo da sua plataforma, isso pode já ter sido tratado previamente. Por exemplo, vamos assumir que seu servidor está ouvindo example.com, porta 8000, e seu servidor socket responde às requisições  GET em /chat.

+ +
+

Aviso: O servidor pode ouvir qualquer porta que escolher, mas se escolher qualquer porta diferente de 80 e 443, podem ocorrer problemas relacionados aos firewalls e/ou proxies. Conexões na porta 443 tendem a ter mais sucesso com mais frequência, isso requer uma conexão segura (TLS/SSL). Também, note que a maioria dos browsers (notavelmente o  Firefox 8+) não permite conexões de servidores WebSocket de páginas seguras.

+
+ +

O handshake é a "Web" no WebSockets. É a ponte do HTTP para o Websocket. No handshake, detalhes da conexão são negociados, e qualquer uma das partes pode voltar antes da conclusão se os termos são desfavoráveis. O servidor deve ser cuidadoso para entender tudo que o cliente perguntar,  caso contrário, serão introduzidas questões de segurança.

+ +

Requisição Handshake do Cliente

+ +

Mesmo que você esteja construindo um servidor, um cliente ainda precisa iniciar o processo de handshake do WebSocket. Então você deve saber como interpretar a requisição do cliente. O cliente vai enviar uma requisição HTTP padrão que é parecida com isso (a versão do HTTP deve ser 1.1 ou maior, e o método deve ser um GET):

+ +
GET /chat HTTP/1.1
+Host: example.com:8000
+Upgrade: websocket
+Connection: Upgrade
+Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
+Sec-WebSocket-Version: 13
+
+
+ +

O cliente pode solicitar extensões e/ou subprotocolos aqui; veja Miscellaneous para mais detalhes. Também, cabeçalhos comuns como User-Agent, Referer, Cookie, ou cabeçalhos de autenticação poderiam estar bem aqui. Faça o que você quiser com eles; eles não pertencem diretamente ao WebSocket. Também é seguro ignora-los. Em muitas configurações comuns, um proxy reverso ja tratou deles.

+ +

Se qualquer cabeçalho não foi entendido ou conter um valor incorreto, o servidor deve enviar um erro "400 Bad Request" e fechar o socket imediatamente. É comum, também dar a razão pelo qual o handshake falhou no body da resposta do HTTP, mas muitas mensages nunca serão mostradas (os browsers não mostram isso). Se o servidor não reconhecer a versão do WebSockets, deve enviar um cabeçalho Sec-WebSocket-Version que contenha a(s) versão(versões) que o mesmo entenda. (Esse guia explica o v13, o mais novo). Agora, vamos continuar para o cabeçalho mais curioso, o Sec-WebSocket-Key.

+ +
+

Dica: Todos os browsers  vão enviar um Origin header. Você pode usar esse cabeçalho por segurança (verifique pelo de mesma origem, whitelisting/ blacklisting, etc.) e envie uma 403 Forbidden se você não gostou do que viu. Sobretanto, fique ciente que os agentes non-browser podem apenas enviar uma falsa Origin. Muitas aplicações vão rejeitar requisições sem cabeçalho.

+
+ +
+

Dica: A request-uri (/chat aqui) não tem significado definido na especificação. Muitas pessoas utilizam habilmente para que servidores lidem com muiltíplas aplicações WebSocket. Por exemplo, example.com/chat deve invocar um app de chat com multiplos usuários, enquanto /game no mesmo servidor poderia invocar um jogo multiplayer.

+
+ +
+

Nota: Regular HTTP status codes podem apenas ser usados antes do handshake. Depois que o handshake sucede, você deve usar um conjunto de códigos diferentes (definidos na seção 7.4 da especificação).

+
+ +

Resposta Handshake do Servidor

+ +

Quanto o servidor receber a requisição de handshake, ele deve enviar um resposta especifica (odd-looking) que indica que o protocolo está sendo alterado de HTTP para WebSocket. Essa resposta se parece com isso (lembre-se cada final do cabeçalho com \r\n e coloque um \r\n extra depois do último):

+ +
HTTP/1.1 101 Switching Protocols
+Upgrade: websocket
+Connection: Upgrade
+Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
+
+
+ +

Adicionalmente, o servidor pode decidir sobre os pedidos de extensão/subprotocolo aqui; veja Miscellaneous para mais detalhes. O Sec-WebSocket-Accept é uma parte interessante. O servidor deve deriva-lo do Sec-WebSocket-Key que o cliente enviou. Para obte-lo, concatene o Sec-WebSocket-Key do cliente e a string "258EAFA5-E914-47DA-95CA-C5AB0DC85B11" juntos (isso é uma "magic string"), pegue o SHA-1 hash do resultado, e retorne o codigo base64 do hash.

+ +
+

FYI: Esse processo, aparentemente complicado existe para que seja óbvio para o cliente se o servidor suporta ou não o WebSockets. Isso é importante por causa de problemas com segurança que aparecem se o servidor aceita a conexão WebSocket mas interpreta que os dados são uma requisição HTTP.

+
+ +

Então se a chave foi "dGhlIHNhbXBsZSBub25jZQ==", o cabeçalho Sec-WebSocket-Accept aceito será "s3pPLMBiTxaQ9kYGzzhZRbK+xOo=". Uma vez que o servidor envie estes cabeçalhos, o handshake esta completo e você pode começar a trocar dados!

+ +
+

O servidor pode enviar outros cabeçalhos como Set-Cookie, ou perguntar por autenticação ou redirecionar via outros códigos de status, antes enviando  a resposta do handshake.

+
+ +

Acompanhamento dos clientes

+ +

Isso não está diretamente relacionado ao protocolo de WebSocket, mas vale apena mencionar aqui: seu servidor terá que acompanhar os soquetes dos clientes para que você não tenho que fazer o handshake novamente com clientes que já concluiram o handshake. O mesmo endereço IP do cliente pode tentar se conectar varias vezes (mas o servidor pode negar se tentarem fazer muitas conexões em razão de se defender de ataques de negação de serviço).

+ +

Trocando Data Frames

+ +

Tanto o cliente quanto o servidor podem enviar mensagens a qualquer momento — essa é a mágia do WebSocket. Entretanto, extrair informações desses chamados "frames" de dados não é um experiencia tão magica assim. Apesar de todos os frames seguirem um mesmo formato, os dados do cliente são enviados criptografados para o servidor, usando criptografia XOR (com uma chave de 32 bits). A seção 5 da especificação do protocolo de WebSocket descreve isso em detalhes.

+ +

Formato

+ +

Cada data frame (do cliente para o servidor ou vice-versa) segue o mesmo formato:

+ +
Frame format:
+​​
+      0                   1                   2                   3
+      0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1
+     +-+-+-+-+-------+-+-------------+-------------------------------+
+     |F|R|R|R| opcode|M| Payload len |    Extended payload length    |
+     |I|S|S|S|  (4)  |A|     (7)     |             (16/64)           |
+     |N|V|V|V|       |S|             |   (if payload len==126/127)   |
+     | |1|2|3|       |K|             |                               |
+     +-+-+-+-+-------+-+-------------+ - - - - - - - - - - - - - - - +
+     |     Extended payload length continued, if payload len == 127  |
+     + - - - - - - - - - - - - - - - +-------------------------------+
+     |                               |Masking-key, if MASK set to 1  |
+     +-------------------------------+-------------------------------+
+     | Masking-key (continued)       |          Payload Data         |
+     +-------------------------------- - - - - - - - - - - - - - - - +
+     :                     Payload Data continued ...                :
+     + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
+     |                     Payload Data continued ...                |
+     +---------------------------------------------------------------+
+ +

O bit de MASK simplesmente diz se a mensagem está codificada. Mensagens do cliente devem estar mascaradas, então seu servidor deve esperar que o valor de MASK seja 1. De fato, a seção 5.1 da especificação diz que seu servidor deve se desconectar de um cliente se este cliente enviar mensagens que não estão mascaradas. Quando enviando um frame para o cliente, não mascare a mensagem e não defina o bit MASK. Explicaremos o mascaramento mais tarde.

+ +
+

Você tem que mascarar as mensagens mesmo quando usando secure socket (SSL).
+ Os campos RSV de 1 à 3 do cabeçalho podem ser ignorados, eles são para extenções.

+
+ +

O campo opcode define como interpretar o payload data: 0x0 para continuo, 0x1 para texto (que sempre está codificadao em UTF-8), 0x2 para binário, e outros conhecidos como "control codes" seram discutidos posteriormente. Nessa versão de WebSockets, 0x3, a 0x7 e 0xB a 0xF tem o mesmo significado.

+ +

O bit FIN disso se é a ultima mensagem da serie. Se for 0, então o servidor irá continuar esperando por mair partes da mensagem;  caso contrário, o servidor pode considerar a mensagem como enviada.

+ +

Se falará mais sobre isso depois.

+ +

Decodificando o Payload Length

+ +

Para ler o payload data, você deve saber quando parar de ler. Por isso é importante saber o tamanho do payload (payload length). Infelizmente,  conseguir essa informação é de certa forma complicado. Para obte-lá, seguimos esses passos:

+ +
    +
  1. Ler os bits 9-15 (inclusivo) e interpretar como um unsigned integer. Se o valor for de 125 ou menor, esse é o tamanho; temos a resposta. Se o valor é igual a 126, então vai para o passo 2, ou se for 127, então vai para o passo 3.
    2. +
  2. Ler os próximos 16 bits e interpretar como um unsined integer, esse é o tamanho; temos a resposta
    3. +
  3. Ler os próximos 64 bits e interpretar como um unsigned integer (o bit mais significante DEVE ser 0), esse é o tamanho; temos a resposta.
    4. +
+ +

Lendo e Desmascarando o Dado

+ +

Se o bit MASK for definido (e deve estar, para mensagens cliente-para-servidor), leia os próximos 4 octetos (32 bits); isso é a chave da mascara. Uma vez que o payload length e o masking key são decodificados, você pode seguir em frente e ler o número de bytes do socket.

+ +

Vamos chamar os dados de ENCODED, e a chave de MASK.

+ +

Para conseguir o DECODED, faça um loop sobre os octetos de ENCODED e um XOR do (i módulo 4) ezimo octeto de MASK. Em pseudo-código (isso é para ser valida em JavaScript):

+ +
var DECODED = "";
+for (var i = 0; i < ENCODED.length; i++) {
+    DECODED[i] = ENCODED[i] ^ MASK[i % 4];
+}
+ +

Agora você pode descobrir o que DECODED significa, dependendo da sua aplicação.

+ +

Fragmentação de Mensagens

+ +

Os campos FIN e opcode trabalham juntos para enviar uma mensagens quebradas em mais de um frame. Isso é chamado de fragmentação. Fragmentação está disponível apenas sobre opcode 0x0 a 0x2.

+ +

Lembre que o opcode diz o que o frame deve fazer. Se for 0x1, o payload um é texto. Se for 0x2, o payload são dados binários. Entretanto, se for 0x0, o frame é umframe de continuação. Isso significa que o servidor deve concatenar o frame de payload com o último frame recebido do cliente.

+ +

Aqui está um exemplo, de como o servidor reage a um cliente enviando uma mensagem de texto. A primeira mensagem é enviada em um frame unico, enquanto a segunda mensagem é enviada através de tres frames. Os detalhes de FIN e opcode são mostrados apenas para o cliente:

+ +
Client: FIN=1, opcode=0x1, msg="hello"
+Server: (process complete message immediately) Hi.
+Client: FIN=0, opcode=0x1, msg="and a"
+Server: (listening, new message containing text started)
+Client: FIN=0, opcode=0x0, msg="happy new"
+Server: (listening, payload concatenated to previous message)
+Client: FIN=1, opcode=0x0, msg="year!"
+Server: (process complete message) Happy new year to you too!
+ +

Note que o primeiro frame que contém a mensagem inteira tem o FIN igual a 1 e o opcode igual a 0x1, entao o servidor pode processar ou responder como achar melhor.
+ O segundo frame enviado pelo cliente é uma mensagem de texto com payload opcode igual a 0x1, mas a mensagem inteira ainda não chegou (FIN=0). Todos as partes restantes da mensagem são enviados em frames continuos (opcode=0x0), e o frame final da mensagem é marcado com FIN=1. Seção 5.4 da especificação descreve a fragmentação de mensagens.

+ +

Pings e Pongs: O Heartbeat do WebSockets

+ +

Em qualquer momento do handshake, tanto o cliente quanto o servidor podem enviar um ping para a outra parte. Quando o ping é rescebido, o destinatário deve responder com um pong assim que possível. Você pode usar isso para garantir que o cliente está conectado, por exemplo.

+ +

Um ping ou um pong é um frame comum, entretanto é usado para controle. Pings tem o valor de opcode 0x9, enquanto que pongs tem o opcode 0xA. Quando você recebe um ping, envia de volta um pong com o mesmo exato payload data do ping (para pings e pongs, o payload length máximo é 125). Você também pode ter um pong sem nunca receber um ping; ignore isso caso ocorra.

+ +
+

Se você receber mais de um ping antes de ter a chance de enviar um pong, você envia apenas um pong.

+
+ +

Fechando a conexão

+ +

Para fechar a conexão tanto cliente quanto servidor podem enviar um frame de controle com dados contendo a sequencia de controles especifica para iniciar o fim do handshake (detalhado na seção 5.5.1). Assim que receber esse tipo de frame, a outra parte envia um frame de fechamento em resposta. A primeira parte então fecha a conexão. Quais quer outros dados recebidos depois de fechar a conexão é descartado. 

+ +

Diversos

+ +
+

Códigos WebSocket, extensões, subprotocols, etc. são registrados na IANA WebSocket Protocol Registry.

+
+ +

As extensões e subprotocolos do WebSocket são negociados via headers durante the handshake. Algumas vezes extensões e subprotocolos paracem muito similares para serem coisas diferentes, mas eles tem claras distinções. Extensões controlam os frame do WebSocket e modificam o payload, enquanto os subprotocolos estruturam o payload do WebSocket e nunca modificam nada. Extensões são opcionais e generalizadas (como comporessam); subprotocolos são mandatórios e localizados (como os usados para chat e para jogos MMORPG).

+ +

Extensões

+ +
+

Essa sessão precisa ser mais desenvolvida. Por favor edite se você tiver conhecimento sobre.

+
+ +

Imagine um extensão que comprime um arquivo antes de ser enviado em um e-mail para alguem. Independente do que você faça, está enviando o mesmo dado de formas diferentes. O destinatário eventualmente terá os mesmos dados que a cópia local que você tem, mas foram enviadas de formas diferentes. Isso é o que extensões fazem. WebSockets definem um protocolo e um forma simples de envio de dados, mas uma extensão como um compressor pode enviar o mesmo dado em um formado menor.

+ +
+

Extensões são explicadas nas sessões 5.8, 9, 11.3.2 e 11.4 da especificação.

+
+ +

Subprotocols

+ +

Pense em um subprotocolo como um esquema XML personalizado ou doctype declaration. Você ainda está usando XML e sua sintaxe, mas também é restringido por uma estrutura em que concordou. Os subprotocolo WebSocket são exatamente assim. Eles não apresentam nada sofisticado, apenas estabelecem estrutura. Como um doctype ou esquema, ambas as partes devem concordar com o subprotocolo; diferente de um doctype ou esquema, o subprotocolo é implementado no servidor e não pode ser referenciado externamente pelo cliente.

+ +
+

Subprotocolos são explicados nas sessões 1.9, 4.2, 11.3.4 e 11.5 da especificação.

+
+ +

Um cliente precisa solicitar um subprotocolo específico. Para fazer isso, ele enviará algo como isso como parte do handshake original:

+ +
GET /chat HTTP/1.1
+...
+Sec-WebSocket-Protocol: soap, wamp
+
+
+ +

ou, equivalentemente:

+ +
...
+Sec-WebSocket-Protocol: soap
+Sec-WebSocket-Protocol: wamp
+
+
+ +

Agora, o servidor deve escolher um dos protocolos que o cliente sugeriu e suporta. Se houver mais de um, envie o primeiro que o cliente enviou. Imagine que nosso servidor possa usar soap e wamp. Em seguida, no handshake de resposta, ele enviará:

+ +
Sec-WebSocket-Protocol: soap
+
+
+ +
+

O servidor não pode enviar mais de um cabeçalho Sec-Websocket-Protocol.
+ Se o servidor não quiser usar nenhum subprotocolo, ele não deverá enviar nenhum cabeçalho Sec-WebSocket-Protocol. O envio de um cabeçalho em branco está incorreto.
+ O cliente pode fechar a conexão se não conseguir o subprotocolo desejado.

+
+ +

Se você deseja que seu servidor obedeça a certos subprotocolo, então naturalmente precisará de código extra no servidor. Vamos imaginar que estamos usando um subprotocolo json. Neste subprotocolo, todos os dados são transmitidos como JSON. Se o cliente solicitar esse protocolo e o servidor quiser usá-lo, o servidor precisará ter um analisador JSON. Na prática, isso fará parte de uma biblioteca, mas o servidor precisará transmitir os dados.

+ +
+

Tip: Para evitar o conflito de nomes, recomenda-se que o subprotocolo seja nomeado como parte da string do domínio. Se você está desenvolvendo um aplicativo de bate-papo personalizado que usa um formato proprietário exclusivo da Exemplo Inc., então você pode usar isso: Sec-WebSocket-Protocol: chat.example.com. Note que isso não é necessário, é apenas uma convenção opcional, e você pode usar qualquer string que desejar.

+
+ +

Relacionado

+ + diff --git a/files/pt-br/web/api/window/beforeunload_event/index.html b/files/pt-br/web/api/window/beforeunload_event/index.html new file mode 100644 index 0000000000..6d6034318c --- /dev/null +++ b/files/pt-br/web/api/window/beforeunload_event/index.html @@ -0,0 +1,106 @@ +--- +title: beforeunload +slug: Web/Events/beforeunload +translation_of: Web/API/Window/beforeunload_event +--- +

O evento beforeunload é disparado quando o window, o document e seus recursos estão prestes a ser descarregados.

+ +

Quando uma string é atribuída na propriedade returnValue do Event, uma caixa de díalogo aparecerá solicitando ao usuário uma confirmação para sair da página (veja exemplo abaixo). Quando nenhum valor é fornecido, o evento é processado silenciosamente.

+ + + + + + + + + + + + + + + + + + + + +
BubblesNão
CancelableSim
Target objectsdefaultView
Interface{{domxref("Event")}}
+ +

Propriedades

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropriedadeTipoDescrição
target {{readOnlyInline}}{{domxref("EventTarget")}}O evento alvo (the topmost target in the DOM tree).
type {{readOnlyInline}}{{domxref("DOMString")}}O tipo de evento.
bubbles {{readOnlyInline}}{{jsxref("Boolean")}}O evento é normalmente bubble?
cancelable {{readOnlyInline}}{{jsxref("Boolean")}}É possível cancelar o evento?
returnValue{{domxref("DOMString")}}O valor de retorno do evento (a mensagem que será exibida ao usuário).
+ +

Exemplos

+ +
window.addEventListener("beforeunload", function (event) {
+  event.returnValue = "\o/";
+});
+
+// equivalente a
+window.addEventListener("beforeunload", function (event) {
+  event.preventDefault();
+});
+ +

Navegadores baseados no WebKit não seguem a especificação para caixas de diálogo. Um exemplo que funcionaria na maioria dos navegadores seria aproximadamente o seguinte:

+ +
window.addEventListener("beforeunload", function (e) {
+  var confirmationMessage = "\o/";
+
+  e.returnValue = confirmationMessage;     // Gecko, Trident, Chrome 34+
+  return confirmationMessage;              // Gecko, WebKit, Chrome <34
+});
+ +

Notas

+ +

Quando este evento retorna um valor não vazio (non-void), é solicitada ao usuário uma confirmação para descarregar a página. Na maioria dos navegadores o valor retornado no evento é exibido como mensagem nessa confirmação. No Firefox 4 e versões anteriores a string retornada não é exibida para o usuário. Ao invés disso, o Firefox exibe a mensagem "Esta página está perguntanto se você deseja sair - é possível que as alterações feitas não sejam salvas." Veja {{bug("588292")}}.

+ +

Desde 25 de maio de 2011 a especificação HTML5 define que chamadas aos métodos {{domxref("window.alert()")}}, {{domxref("window.confirm()")}} e {{domxref("window.prompt()")}} serão ignoradas durante este evento. Para mais detalhes veja a especificação HTML5 (em inglês).

+ +

Note também que vários navegadores para celular ignoram o resultado deste evento (isso que dizer que eles não solicitam a confirmação do usuário). O Firefox possui uma configuração escondida em about:config que faz o mesmo. Em essência, isto significa que o usuário estará sempre confirmando que o documento pode ser descarregado.

+ +

Veja também

+ + diff --git a/files/pt-br/web/api/window/domcontentloaded_event/index.html b/files/pt-br/web/api/window/domcontentloaded_event/index.html new file mode 100644 index 0000000000..eb54671921 --- /dev/null +++ b/files/pt-br/web/api/window/domcontentloaded_event/index.html @@ -0,0 +1,177 @@ +--- +title: DOMContentLoaded +slug: Web/Events/DOMContentLoaded +translation_of: Web/API/Window/DOMContentLoaded_event +--- +

O evento DOMContentLoaded é acionado quando todo o HTML foi completamente carregado e analisado, sem aguardar pelo CSS, imagens, e subframes para encerrar o carregamento. Um evento muito diferente - load - deve ser usado apenas para detectar uma página completamente carregada. É um engano comum as pessoas usarem load quando DOMContentLoaded seria muito mais apropriado.

+ +
+

Nota: Javascript Síncrono pausa a análise do DOM.

+
+ +

Acelerando

+ +

Se você quer que o DOM seja analisado o mais rápido possível após uma requisição do usuário, você deve usar recursos do javascript assíncrono e otimizar o carregamento de folhas de estilo pois, caso contrário, a página será carregada mais lentamente pois muitos itens serão carregados paralelamente, atrasando a visualização da página.

+ +
+
+ +

Informações gerais

+ +
+
Especificação
+
HTML5
+
Interface
+
Event
+
Propaga
+
Sim
+
Cancelável
+
Sim (embora especificado como evento simples não-cancelável)
+
Alvo
+
Document
+
Ação Default
+
Nenhuma.
+
+ +

Propriedades

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}Alvo do evento (O topo do DOM).
type {{readonlyInline}}{{domxref("DOMString")}}Tipo de evento
bubbles {{readonlyInline}}{{jsxref("Boolean")}}O evento é por padrão bubbles ou não.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}O evento pode ser cancelado ou não.
+ +

Exemplo

+ +

Básico

+ +
<script>
+  document.addEventListener("DOMContentLoaded", function(event) {
+    console.log("DOM completamente carregado e analisado");
+  });
+</script>
+
+ +

Forçando o atraso do DOMContentLoaded

+ +
<script>
+  document.addEventListener("DOMContentLoaded", function(event) {
+    console.log("DOM completamente carregado e analisado");
+  });
+
+for(var i=0; i<1000000000; i++)
+{} // este script síncrono irá o atrasar carregamento do DOM. Então o evento DOMContentLoaded irá ser ativado mais tarde.
+</script>
+
+ +

 

+ +

Verificando se o carregamento está completo

+ +

DOMContentLoaded pode disparar antes do seu script ser carregado, então é importante validar antes de adicionar um listener.

+ +
function doSomething() {
+  console.info("DOM carregado");
+}
+
+if (document.readyState === "loading") {  // Ainda carregando
+  document.addEventListener("DOMContentLoaded", doSomething);
+} else {  // `DOMContentLoaded` foi disparado
+  doSomething();
+}
+ +

 

+ +

Compatibilidade entre Navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico0.2{{ CompatGeckoDesktop("1") }}9.09.03.1
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico{{ CompatVersionUnknown() }}{{ CompatGeckoMobile("1") }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

Propagação para este evento é suportada à partir do Gecko 1.9.2, Chrome 6, e Safari 4.

+ +

Cross-browser fallback

+ +

O Internet Explorer 8 suporta o evento readystatechange, que pode ser usado para detectar quando o DOM está pronto. Em versões anteriores do Internet Explorer, este estado pode ser detectado tentando executar document.documentElement.doScroll("left"); repetidas vezes; este comando dará erro repetidamente, até que o DOM esteja pronto.

+ +

Há também uma abundância de bibliotecas de propósito geral que oferecem métodos cross-browser para detectar se o DOM está pronto.

+ +

Eventos Relacionados

+ + diff --git a/files/pt-br/web/api/window/load_event/index.html b/files/pt-br/web/api/window/load_event/index.html new file mode 100644 index 0000000000..db04b1ecbe --- /dev/null +++ b/files/pt-br/web/api/window/load_event/index.html @@ -0,0 +1,89 @@ +--- +title: load +slug: Web/Events/load +translation_of: Web/API/Window/load_event +--- +
O evento de load é acionado quando um recurso e seus recursos
+dependentes terminaram de carregar.
+ +

Informações Gerais

+ +
+
Especificação
+
DOM L3
+
Interface
+
UIEvent
+
Bubbles
+
Não
+
Cancelavel
+
Não
+
Alvo
+
Window
+
Ação Padrão
+
Nenhuma.
+
+ +

Propriedades

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}EventTargetThe event target (the topmost target in the DOM tree).
type {{readonlyInline}}DOMStringThe type of event.
bubbles {{readonlyInline}}BooleanWhether the event normally bubbles or not.
cancelable {{readonlyInline}}BooleanWhether the event is cancellable or not.
view {{readonlyInline}}WindowProxydocument.defaultView (window of the document)
detail {{readonlyInline}}long (float)0.
+ +

Exemplo

+ +
<script>
+  window.addEventListener("load", function(event) {
+    console.log("Todos os recursos terminaram o carregamento!");
+  });
+</script>
+
+ +

 

+ +

Eventos Relacionados

+ + diff --git a/files/pt-br/web/api/window/localstorage/index.html b/files/pt-br/web/api/window/localstorage/index.html new file mode 100644 index 0000000000..8c7c379435 --- /dev/null +++ b/files/pt-br/web/api/window/localstorage/index.html @@ -0,0 +1,123 @@ +--- +title: Window.localStorage +slug: Web/API/Window/Window.localStorage +tags: + - API + - Armazenamento + - Propriedade + - Referencia + - WindowLocalStorage + - localStorage +translation_of: Web/API/Window/localStorage +--- +

{{APIRef()}}

+ +

A propriedade localStorage permite acessar um objeto {{domxref("Storage")}} local. A localStorage é similar ao sessionStorage. A única diferença é que enquanto os dados armazenados no localStorage não expiram, os dados no sessionStorage tem os seus dados limpos ao expirar a sessão da página — ou seja, quando a página (aba ou janela) é fechada.

+ +

Sintaxe

+ +
meuStorage = localStorage;
+ +

Valor

+ +

Objeto {{domxref("Storage")}}.

+ +

Exemplo

+ +

O seguinte trecho acessa o objeto {{domxref("Storage")}} local do domínio atual e adiciona um item usando o {{domxref("Storage.setItem()")}}.

+ +
localStorage.setItem('meuGato', 'Tom');
+ +
+

Nota: Por favor veja o artigo Using the Web Storage API para um exemplo completo.

+
+ +

Especificações

+ + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName('Web Storage', '#dom-localstorage', 'localStorage')}}{{Spec2('Web Storage')}} 
+ + + +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage43.5810.504
sessionStorage52810.504
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1{{ CompatUnknown }}811iOS 3.2
+
+ +

Cada navegador tem o seu nível de capacidade de armazenamento para localStorage e {{domxref("sessionStorage")}}. Aqui está um teste detalhado de toda a capacidade de armazenamento de vários browsers.

+ +
+

Nota: desde o iOS 5.1, Safari Mobile armazena os dados do localStorage em uma pasta de cache, o que está sujeito a ocasionalmente ser limpa, de acordo com o SO, se houver pouco espaço. O modo de Navegação Privada do Safari Mobile não permite escrever no localStorage de forma alguma.

+
+ +

Veja também

+ + diff --git a/files/pt-br/web/api/window/onscroll/index.html b/files/pt-br/web/api/window/onscroll/index.html deleted file mode 100644 index e5e756482a..0000000000 --- a/files/pt-br/web/api/window/onscroll/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: window.onscroll -slug: Web/API/Window/onscroll -translation_of: Web/API/GlobalEventHandlers/onscroll -translation_of_original: 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/web/api/window/url/index.html b/files/pt-br/web/api/window/url/index.html deleted file mode 100644 index 1dec25bd24..0000000000 --- a/files/pt-br/web/api/window/url/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: Window.URL -slug: Web/API/Window/URL -translation_of: Web/API/URL -translation_of_original: 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/web/api/window/window.localstorage/index.html b/files/pt-br/web/api/window/window.localstorage/index.html deleted file mode 100644 index 8c7c379435..0000000000 --- a/files/pt-br/web/api/window/window.localstorage/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: Window.localStorage -slug: Web/API/Window/Window.localStorage -tags: - - API - - Armazenamento - - Propriedade - - Referencia - - WindowLocalStorage - - localStorage -translation_of: Web/API/Window/localStorage ---- -

{{APIRef()}}

- -

A propriedade localStorage permite acessar um objeto {{domxref("Storage")}} local. A localStorage é similar ao sessionStorage. A única diferença é que enquanto os dados armazenados no localStorage não expiram, os dados no sessionStorage tem os seus dados limpos ao expirar a sessão da página — ou seja, quando a página (aba ou janela) é fechada.

- -

Sintaxe

- -
meuStorage = localStorage;
- -

Valor

- -

Objeto {{domxref("Storage")}}.

- -

Exemplo

- -

O seguinte trecho acessa o objeto {{domxref("Storage")}} local do domínio atual e adiciona um item usando o {{domxref("Storage.setItem()")}}.

- -
localStorage.setItem('meuGato', 'Tom');
- -
-

Nota: Por favor veja o artigo Using the Web Storage API para um exemplo completo.

-
- -

Especificações

- - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{SpecName('Web Storage', '#dom-localstorage', 'localStorage')}}{{Spec2('Web Storage')}} 
- - - -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage43.5810.504
sessionStorage52810.504
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1{{ CompatUnknown }}811iOS 3.2
-
- -

Cada navegador tem o seu nível de capacidade de armazenamento para localStorage e {{domxref("sessionStorage")}}. Aqui está um teste detalhado de toda a capacidade de armazenamento de vários browsers.

- -
-

Nota: desde o iOS 5.1, Safari Mobile armazena os dados do localStorage em uma pasta de cache, o que está sujeito a ocasionalmente ser limpa, de acordo com o SO, se houver pouco espaço. O modo de Navegação Privada do Safari Mobile não permite escrever no localStorage de forma alguma.

-
- -

Veja também

- - diff --git a/files/pt-br/web/api/windowbase64/atob/index.html b/files/pt-br/web/api/windowbase64/atob/index.html deleted file mode 100644 index cb9058abe5..0000000000 --- a/files/pt-br/web/api/windowbase64/atob/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: WindowBase64.atob() -slug: Web/API/WindowBase64/atob -tags: - - API - - Referencia - - WindowBase64 - - metodo -translation_of: Web/API/WindowOrWorkerGlobalScope/atob ---- -
{{APIRef("HTML DOM")}}
- -

A função WindowBase64.atob() decodifica uma string de dados que foi codificada através da codificação base-64. Você pode usar o método {{domxref("WindowBase64.btoa","window.btoa()")}} para codificar e transmitir dados que, se não codificados, podem causar problemas de comunicação. Após transmití-los pode-se usar o método window.atob() para decodificar os dados novamente. Por exemplo, você pode codificar, transmitir,  e decodificar caracteres de controle como valores ASCII de 0 a 31.

- -

Para utilizar com strings Unicode ou UTF-8, veja esta nota em Base64 encoding and decoding e essa nota em window.btoa().

- -

Sintaxe

- -
var dadoDecodificado = window.atob(dadoCodificado);
- -

Exemplo

- -
var dadoCodificado = window.btoa("Olá, mundo"); // codifica a string
-var dadoDecodificado = window.atob(dadoCodificado); // decodifica a string
- -

Especificações

- - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{SpecName('HTML WHATWG', '#dom-windowbase64-atob', 'WindowBase64.atob()')}}{{Spec2('HTML WHATWG')}}Nenhuma mudança desde a última versão, {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', '#dom-windowbase64-atob', 'WindowBase64.atob()')}}{{Spec2('HTML5.1')}}Versão de {{SpecName("HTML WHATWG")}}. Nenhuma mudança.
{{SpecName("HTML5 W3C", "#dom-windowbase64-atob", "WindowBase64.atob()")}}{{Spec2('HTML5 W3C')}}Versão de {{SpecName("HTML WHATWG")}}. Criação do WindowBase64 (antes as propriedades ficavam no target).
- -

Compatibilidade de navegadores

- -
{{Compat("api.WindowOrWorkerGlobalScope.atob")}}
- -
- -

[1] atob() também está disponível para os componentes do XPCOM implementado em JavaScript, porém o objeto window não é global nos componentes.

- -

[2] A partir do Firefox 27, atob() ignora todos os caracteres de espaço no argumento para seguir as últimas especificações do HTML5. ({{bug(711180)}})

- -

Veja também

- - diff --git a/files/pt-br/web/api/windowbase64/index.html b/files/pt-br/web/api/windowbase64/index.html deleted file mode 100644 index f51b72c102..0000000000 --- a/files/pt-br/web/api/windowbase64/index.html +++ /dev/null @@ -1,121 +0,0 @@ ---- -title: WindowBase64 -slug: Web/API/WindowBase64 -tags: - - API - - HTML-DOM - - Helper - - NeedsTranslation - - TopicStub - - WindowBase64 -translation_of: Web/API/WindowOrWorkerGlobalScope -translation_of_original: 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/web/api/windoworworkerglobalscope/atob/index.html b/files/pt-br/web/api/windoworworkerglobalscope/atob/index.html new file mode 100644 index 0000000000..cb9058abe5 --- /dev/null +++ b/files/pt-br/web/api/windoworworkerglobalscope/atob/index.html @@ -0,0 +1,72 @@ +--- +title: WindowBase64.atob() +slug: Web/API/WindowBase64/atob +tags: + - API + - Referencia + - WindowBase64 + - metodo +translation_of: Web/API/WindowOrWorkerGlobalScope/atob +--- +
{{APIRef("HTML DOM")}}
+ +

A função WindowBase64.atob() decodifica uma string de dados que foi codificada através da codificação base-64. Você pode usar o método {{domxref("WindowBase64.btoa","window.btoa()")}} para codificar e transmitir dados que, se não codificados, podem causar problemas de comunicação. Após transmití-los pode-se usar o método window.atob() para decodificar os dados novamente. Por exemplo, você pode codificar, transmitir,  e decodificar caracteres de controle como valores ASCII de 0 a 31.

+ +

Para utilizar com strings Unicode ou UTF-8, veja esta nota em Base64 encoding and decoding e essa nota em window.btoa().

+ +

Sintaxe

+ +
var dadoDecodificado = window.atob(dadoCodificado);
+ +

Exemplo

+ +
var dadoCodificado = window.btoa("Olá, mundo"); // codifica a string
+var dadoDecodificado = window.atob(dadoCodificado); // decodifica a string
+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName('HTML WHATWG', '#dom-windowbase64-atob', 'WindowBase64.atob()')}}{{Spec2('HTML WHATWG')}}Nenhuma mudança desde a última versão, {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', '#dom-windowbase64-atob', 'WindowBase64.atob()')}}{{Spec2('HTML5.1')}}Versão de {{SpecName("HTML WHATWG")}}. Nenhuma mudança.
{{SpecName("HTML5 W3C", "#dom-windowbase64-atob", "WindowBase64.atob()")}}{{Spec2('HTML5 W3C')}}Versão de {{SpecName("HTML WHATWG")}}. Criação do WindowBase64 (antes as propriedades ficavam no target).
+ +

Compatibilidade de navegadores

+ +
{{Compat("api.WindowOrWorkerGlobalScope.atob")}}
+ +
+ +

[1] atob() também está disponível para os componentes do XPCOM implementado em JavaScript, porém o objeto window não é global nos componentes.

+ +

[2] A partir do Firefox 27, atob() ignora todos os caracteres de espaço no argumento para seguir as últimas especificações do HTML5. ({{bug(711180)}})

+ +

Veja também

+ + diff --git a/files/pt-br/web/api/windoworworkerglobalscope/cleartimeout/index.html b/files/pt-br/web/api/windoworworkerglobalscope/cleartimeout/index.html new file mode 100644 index 0000000000..f03f43979f --- /dev/null +++ b/files/pt-br/web/api/windoworworkerglobalscope/cleartimeout/index.html @@ -0,0 +1,100 @@ +--- +title: WindowTimers.clearTimeout() +slug: Web/API/WindowTimers/clearTimeout +tags: + - API + - Method + - Window +translation_of: Web/API/WindowOrWorkerGlobalScope/clearTimeout +--- +
+
+
{{APIRef("HTML DOM")}}
+
+
+ +

Sumário

+ +

O método clearTimeout() do escopo {{domxref("WindowOrWorkerGlobalScope")}} cancela um timeout previamente estabelecido pela função {{domxref("WindowOrWorkerGlobalScope.setTimeout", "setTimeout()")}}.

+ +

Síntaxe

+ +
escopo.clearTimeout(timeoutID)
+
+ +

Parâmetros

+ +
+
timeoutID
+
O ID do timeout que você deseja cancelar. Esse ID é o retorno da função setTimeout().
+
+ +

É interessante ressaltar que os conjuntso de IDs usados pelos métodos {{domxref("WindowOrWorkerGlobalScope.setTimeout", "setTimeout()")}} e {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}} são compartilhados, o que significa que clearTimeout() e {{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}} podem ser tecnicamente utilizados de forma intercambiável. No entanto, para obter-se maior clareza, isso deve ser evitado.

+ +

Exemplo

+ +

Execute o script abaixo em uma página web e clique na página uma vez. Você verá uma mensagem aparecer um segundo depois. Se você continuar clicando na página várias vezes nesse intervalo de tempo, a mensagem aparecerá uma única vez.

+ +
var alarme = {
+  relembrar: function(aMessage) {
+    alert(aMessage);
+    delete this.timeoutID;
+  },
+
+  setup: function() {
+    if (typeof this.timeoutID === 'number') {
+        this.cancelar();
+    }
+
+    this.timeoutID = window.setTimeout(function(msg) {
+        this.relembrar(msg);
+    }.bind(this), 1000, 'Wake up!');
+  },
+
+  cancelar: function() {
+    window.clearTimeout(this.timeoutID);
+  }
+};
+window.onclick = function() { alarme.setup() };
+ +

Notas

+ +

Passar um ID inválido para clearTimeout não causa nenhum efeito (não lança nenhuma exceção).

+ +

Especificações

+ + + + + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName('HTML WHATWG', 'webappapis.html#dom-cleartimeout', 'WindowOrWorkerGlobalScope.clearTimeout()')}}{{Spec2("HTML WHATWG")}}Método movido para WindowOrWorkerGlobalScope .
{{SpecName('HTML WHATWG', 'webappapis.html#dom-cleartimeout', 'clearTimeout()')}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilidade

+ + + +

{{Compat("api.WindowOrWorkerGlobalScope.clearTimeout")}}

+ +

Veja também

+ + diff --git a/files/pt-br/web/api/windowtimers/cleartimeout/index.html b/files/pt-br/web/api/windowtimers/cleartimeout/index.html deleted file mode 100644 index f03f43979f..0000000000 --- a/files/pt-br/web/api/windowtimers/cleartimeout/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: WindowTimers.clearTimeout() -slug: Web/API/WindowTimers/clearTimeout -tags: - - API - - Method - - Window -translation_of: Web/API/WindowOrWorkerGlobalScope/clearTimeout ---- -
-
-
{{APIRef("HTML DOM")}}
-
-
- -

Sumário

- -

O método clearTimeout() do escopo {{domxref("WindowOrWorkerGlobalScope")}} cancela um timeout previamente estabelecido pela função {{domxref("WindowOrWorkerGlobalScope.setTimeout", "setTimeout()")}}.

- -

Síntaxe

- -
escopo.clearTimeout(timeoutID)
-
- -

Parâmetros

- -
-
timeoutID
-
O ID do timeout que você deseja cancelar. Esse ID é o retorno da função setTimeout().
-
- -

É interessante ressaltar que os conjuntso de IDs usados pelos métodos {{domxref("WindowOrWorkerGlobalScope.setTimeout", "setTimeout()")}} e {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}} são compartilhados, o que significa que clearTimeout() e {{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}} podem ser tecnicamente utilizados de forma intercambiável. No entanto, para obter-se maior clareza, isso deve ser evitado.

- -

Exemplo

- -

Execute o script abaixo em uma página web e clique na página uma vez. Você verá uma mensagem aparecer um segundo depois. Se você continuar clicando na página várias vezes nesse intervalo de tempo, a mensagem aparecerá uma única vez.

- -
var alarme = {
-  relembrar: function(aMessage) {
-    alert(aMessage);
-    delete this.timeoutID;
-  },
-
-  setup: function() {
-    if (typeof this.timeoutID === 'number') {
-        this.cancelar();
-    }
-
-    this.timeoutID = window.setTimeout(function(msg) {
-        this.relembrar(msg);
-    }.bind(this), 1000, 'Wake up!');
-  },
-
-  cancelar: function() {
-    window.clearTimeout(this.timeoutID);
-  }
-};
-window.onclick = function() { alarme.setup() };
- -

Notas

- -

Passar um ID inválido para clearTimeout não causa nenhum efeito (não lança nenhuma exceção).

- -

Especificações

- - - - - - - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{SpecName('HTML WHATWG', 'webappapis.html#dom-cleartimeout', 'WindowOrWorkerGlobalScope.clearTimeout()')}}{{Spec2("HTML WHATWG")}}Método movido para WindowOrWorkerGlobalScope .
{{SpecName('HTML WHATWG', 'webappapis.html#dom-cleartimeout', 'clearTimeout()')}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilidade

- - - -

{{Compat("api.WindowOrWorkerGlobalScope.clearTimeout")}}

- -

Veja também

- - diff --git a/files/pt-br/web/api/windowtimers/index.html b/files/pt-br/web/api/windowtimers/index.html deleted file mode 100644 index 8be6ca7e8b..0000000000 --- a/files/pt-br/web/api/windowtimers/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: WindowTimers -slug: Web/API/WindowTimers -translation_of: Web/API/WindowOrWorkerGlobalScope -translation_of_original: Web/API/WindowTimers ---- -
{{APIRef("HTML DOM")}}
- -

WindowTimers contains utility methods to set and clear timers.

- -

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

- -

Properties

- -

This interface 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/web/api/xmlhttprequest/requisicoes_sincronas_e_assincronas/index.html b/files/pt-br/web/api/xmlhttprequest/requisicoes_sincronas_e_assincronas/index.html deleted file mode 100644 index 81b8fb8d3e..0000000000 --- a/files/pt-br/web/api/xmlhttprequest/requisicoes_sincronas_e_assincronas/index.html +++ /dev/null @@ -1,234 +0,0 @@ ---- -title: Requisições síncronas e assíncronas -slug: Web/API/XMLHttpRequest/Requisicoes_sincronas_e_assincronas -translation_of: Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests ---- -

XMLHttpRequest suporta comunicações síncronas e assíncronas. No geral, entretando, requisições assíncronas devem prevalecer sobre requisições síncronas por questões de performance.

- -

Requisições síncronas podem bloquear a execução do codigo, gerando um "congelamento" da tela, prejudicando a experiência do usuário. 

- -

Requisição assíncrona

- -

Se você usa XMLHttpRequest de uma extensão, você deveria usá-la de forma assíncrona. Neste caso, você recebe um callback quando os dados forem recebidos, o que permite que o browser continue seu trabalho normalmente enquanto sua requisição estiver sendo processada.

- -

Exemplo: envie um arquivo para o console de log

- -

Esse é o exemplo mais simples de uso do XMLHttpRequest assíncrono.

- -
var xhr = new XMLHttpRequest();
-xhr.open("GET", "/bar/foo.txt", true);
-xhr.onload = function (e) {
-  if (xhr.readyState === 4) {
-    if (xhr.status === 200) {
-      console.log(xhr.responseText);
-    } else {
-      console.error(xhr.statusText);
-    }
-  }
-};
-xhr.onerror = function (e) {
-  console.error(xhr.statusText);
-};
-xhr.send(null);
- -

A Linha 2 define o terceiro parâmetro como true, indicando que a requisição deve ser tratada assincronamente.

- -

A Linha 3 cria um objeto função do tipo event handler e atribui ele ao atributo onload da requisição.

- -

Na LInha 4, Este handler verifica o estado da requisição, através da variável readyState, para ver se a transação está completa, e se o status do HTTP é 200. Em caso positivo lê o conteúdo recebido. Se um erro ocorrer, uma mensagem de erro será exibida no console.

- -

A requisição é, de fato, realizada na Linha 15. A rotina de callback é invocada quando o estado da requisição muda.

- -

Exemplo: Criando uma função standard para ler arquivos externos

- -

Em alguns casos, você pode precisar ler muitos arquivos externos. Esta é uma função padrão que utiliza o objeto XMLHttpRequest de forma assíncrona para alternar o conteúdo do arquivo legível para um listener especificado.

- -
function xhrSuccess () { this.callback.apply(this, this.arguments); }
-
-function xhrError () { console.error(this.statusText); }
-
-function loadFile (sURL, fCallback /*, argumentToPass1, argumentToPass2, etc. */) {
-  var oReq = new XMLHttpRequest();
-  oReq.callback = fCallback;
-  oReq.arguments = Array.prototype.slice.call(arguments, 2);
-  oReq.onload = xhrSuccess;
-  oReq.onerror = xhrError;
-  oReq.open("get", sURL, true);
-  oReq.send(null);
-}
-
- -

Uso:

- -
function showMessage (sMsg) {
-  alert(sMsg + this.responseText);
-}
-
-loadFile("message.txt", showMessage, "New message!\n\n");
-
- -

A assinatura da função loadFile declara (i) uma URL de destino que será lida (via HTTP GET), (ii) uma função de callback para executar na conclusão bem-sucedida da instância xhr, e (iii) uma lista opcional de argumentos adicionais que são "passados através" do objeto XHR caso a função de callback seja bem-sucedida.

- -

A linha 1 declara uma função que será invocada quando a operação XHR for completada com sucesso.  Isso, por sua vez, invoca uma função de callback especificada na invocação da função loadFile (neste caso, a função showMessage) que foi atribuída a propriedade do objeto XHR (Linha 7). Os  argumentos adicionais (caso existam) fornecem a invocação da função loadFile são "aplicados" para a execução da função de callback..

- -

A linha 3 declara uma função que será invocada quando a operação XHR não for completada com sucesso.

- -

A linha 7 define no objeto XHR  the success callback function given as the second argument to loadFile.

- -

Line 8 slices the arguments array given to the invocation of loadFile. Starting with the third argument, all remaining arguments are collected, assigned to the arguments property of the variable oReq, passed to the success callback function xhrSuccess., and ultimately supplied to the callback function (in this case, showMessage) which is invoked by function xhrSuccess.

- -

Line 9 designates the function xhrSuccess as the callback to be invoked when the onload event fires, that is, when the XHR sucessfully completes.  

- -

Line 10 designates the function xhrError as the callback to be invoked when the XHR requests fails to complete.

- -

Line 11 specifies true for its third parameter to indicate that the request should be handled asynchronously.

- -

Line 12 actually initiates the request.

- -

Example: using a timeout

- -

You can use a timeout to prevent hanging your code forever while waiting for a read to occur. This is done by setting the value of the timeout property on the XMLHttpRequest object, as shown in the code below:

- -
function loadFile(sUrl, timeout, callback){
-
-    var args = arguments.slice(3);
-    var xhr = new XMLHttpRequest();
-    xhr.ontimeout = function () {
-        console.error("The request for " + url + " timed out.");
-    };
-    xhr.onload = function() {
-        if (xhr.readyState === 4) {
-            if (xhr.status === 200) {
-                callback.apply(xhr, args);
-            } else {
-                console.error(xhr.statusText);
-            }
-        }
-    };
-    xhr.open("GET", url, true);
-    xhr.timeout = timeout;
-    xhr.send(null);
-}
- -

Notice the addition of code to handle the "timeout" event by setting the ontimeout handler.

- -

Usage:

- -
function showMessage (sMsg) {
-  alert(sMsg + this.responseText);
-}
-
-loadFile("message.txt", 2000, showMessage, "New message!\n");
-
- -

Here, we're specifying a timeout of 2000 ms.

- -
-

Note: Support for timeout was added in {{Gecko("12.0")}}.

-
- -

Synchronous request

- -
Note: Starting with Gecko 30.0 {{ geckoRelease("30.0") }}, synchronous requests on the main thread have been deprecated due to the negative effects to the user experience.
- -

Em casos raros, o uso do método síncrono é preferível ao invés do método assíncrono.

- -

Example: HTTP synchronous request

- -

This example demonstrates how to make a simple synchronous request.

- -
var request = new XMLHttpRequest();
-request.open('GET', '/bar/foo.txt', false);  // `false` makes the request synchronous
-request.send(null);
-
-if (request.status === 200) {
-  console.log(request.responseText);
-}
-
- -

Line 3 sends the request.  The null parameter indicates that no body content is needed for the GET request.

- -

Line 5 checks the status code after the transaction is completed.  If the result is 200 -- HTTP's "OK" result -- the document's text content is output to the console.

- -

Example: Synchronous HTTP request from a Worker

- -

One of the few cases in which a synchronous request does not usually block execution is the use of XMLHttpRequest within a Worker.

- -

example.html (the main page):

- -
<!doctype html>
-<html>
-<head>
-<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-<title>MDN Example</title>
-<script type="text/javascript">
-  var worker = new Worker("myTask.js");
-  worker.onmessage = function(event) {
-    alert("Worker said: " + event.data);
-  };
-
-  worker.postMessage("Hello");
-</script>
-</head>
-<body></body>
-</html>
-
- -

myFile.txt (the target of the synchronous XMLHttpRequest invocation):

- -
Hello World!!
-
- -

myTask.js (the Worker):

- -
self.onmessage = function (event) {
-  if (event.data === "Hello") {
-    var xhr = new XMLHttpRequest();
-    xhr.open("GET", "myFile.txt", false);  // synchronous request
-    xhr.send(null);
-    self.postMessage(xhr.responseText);
-  }
-};
-
- -
Note: The effect, because of the use of the Worker, is however asynchronous.
- -

It could be useful in order to interact in background with the server or to preload some content. See Using web workers for examples and details.

- -

Adapting Sync XHR usecases to the Beacon API

- -

There are some cases in which the synchronous usage of XMLHttpRequest was not replaceable, like during the window.onunload and window.onbeforeunload events.  The navigator.sendBeacon API can support these usecases typically while delivering a good UX.

- -

The following example (from the sendBeacon docs) shows a theoretical analytics code that attempts to submit data to a server by using a synchronous XMLHttpRequest in an unload handler. This results in the unload of the page to be delayed.

- -
window.addEventListener('unload', logData, false);
-
-function logData() {
-    var client = new XMLHttpRequest();
-    client.open("POST", "/log", false); // third parameter indicates sync xhr. :(
-    client.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
-    client.send(analyticsData);
-}
-
- -

Using the sendBeacon() method, the data will be transmitted asynchronously to the web server when the User Agent has had an opportunity to do so, without delaying the unload or affecting the performance of the next navigation.

- -

The following example shows a theoretical analytics code pattern that submits data to a server using the by using the sendBeacon() method.

- -
window.addEventListener('unload', logData, false);
-
-function logData() {
-    navigator.sendBeacon("/log", analyticsData);
-}
-
- -

See also

- - - -

{{ languages( {"zh-cn": "zh-cn/DOM/XMLHttpRequest/Synchronous_and_Asynchronous_Requests" } ) }}

diff --git a/files/pt-br/web/api/xmlhttprequest/synchronous_and_asynchronous_requests/index.html b/files/pt-br/web/api/xmlhttprequest/synchronous_and_asynchronous_requests/index.html new file mode 100644 index 0000000000..81b8fb8d3e --- /dev/null +++ b/files/pt-br/web/api/xmlhttprequest/synchronous_and_asynchronous_requests/index.html @@ -0,0 +1,234 @@ +--- +title: Requisições síncronas e assíncronas +slug: Web/API/XMLHttpRequest/Requisicoes_sincronas_e_assincronas +translation_of: Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests +--- +

XMLHttpRequest suporta comunicações síncronas e assíncronas. No geral, entretando, requisições assíncronas devem prevalecer sobre requisições síncronas por questões de performance.

+ +

Requisições síncronas podem bloquear a execução do codigo, gerando um "congelamento" da tela, prejudicando a experiência do usuário. 

+ +

Requisição assíncrona

+ +

Se você usa XMLHttpRequest de uma extensão, você deveria usá-la de forma assíncrona. Neste caso, você recebe um callback quando os dados forem recebidos, o que permite que o browser continue seu trabalho normalmente enquanto sua requisição estiver sendo processada.

+ +

Exemplo: envie um arquivo para o console de log

+ +

Esse é o exemplo mais simples de uso do XMLHttpRequest assíncrono.

+ +
var xhr = new XMLHttpRequest();
+xhr.open("GET", "/bar/foo.txt", true);
+xhr.onload = function (e) {
+  if (xhr.readyState === 4) {
+    if (xhr.status === 200) {
+      console.log(xhr.responseText);
+    } else {
+      console.error(xhr.statusText);
+    }
+  }
+};
+xhr.onerror = function (e) {
+  console.error(xhr.statusText);
+};
+xhr.send(null);
+ +

A Linha 2 define o terceiro parâmetro como true, indicando que a requisição deve ser tratada assincronamente.

+ +

A Linha 3 cria um objeto função do tipo event handler e atribui ele ao atributo onload da requisição.

+ +

Na LInha 4, Este handler verifica o estado da requisição, através da variável readyState, para ver se a transação está completa, e se o status do HTTP é 200. Em caso positivo lê o conteúdo recebido. Se um erro ocorrer, uma mensagem de erro será exibida no console.

+ +

A requisição é, de fato, realizada na Linha 15. A rotina de callback é invocada quando o estado da requisição muda.

+ +

Exemplo: Criando uma função standard para ler arquivos externos

+ +

Em alguns casos, você pode precisar ler muitos arquivos externos. Esta é uma função padrão que utiliza o objeto XMLHttpRequest de forma assíncrona para alternar o conteúdo do arquivo legível para um listener especificado.

+ +
function xhrSuccess () { this.callback.apply(this, this.arguments); }
+
+function xhrError () { console.error(this.statusText); }
+
+function loadFile (sURL, fCallback /*, argumentToPass1, argumentToPass2, etc. */) {
+  var oReq = new XMLHttpRequest();
+  oReq.callback = fCallback;
+  oReq.arguments = Array.prototype.slice.call(arguments, 2);
+  oReq.onload = xhrSuccess;
+  oReq.onerror = xhrError;
+  oReq.open("get", sURL, true);
+  oReq.send(null);
+}
+
+ +

Uso:

+ +
function showMessage (sMsg) {
+  alert(sMsg + this.responseText);
+}
+
+loadFile("message.txt", showMessage, "New message!\n\n");
+
+ +

A assinatura da função loadFile declara (i) uma URL de destino que será lida (via HTTP GET), (ii) uma função de callback para executar na conclusão bem-sucedida da instância xhr, e (iii) uma lista opcional de argumentos adicionais que são "passados através" do objeto XHR caso a função de callback seja bem-sucedida.

+ +

A linha 1 declara uma função que será invocada quando a operação XHR for completada com sucesso.  Isso, por sua vez, invoca uma função de callback especificada na invocação da função loadFile (neste caso, a função showMessage) que foi atribuída a propriedade do objeto XHR (Linha 7). Os  argumentos adicionais (caso existam) fornecem a invocação da função loadFile são "aplicados" para a execução da função de callback..

+ +

A linha 3 declara uma função que será invocada quando a operação XHR não for completada com sucesso.

+ +

A linha 7 define no objeto XHR  the success callback function given as the second argument to loadFile.

+ +

Line 8 slices the arguments array given to the invocation of loadFile. Starting with the third argument, all remaining arguments are collected, assigned to the arguments property of the variable oReq, passed to the success callback function xhrSuccess., and ultimately supplied to the callback function (in this case, showMessage) which is invoked by function xhrSuccess.

+ +

Line 9 designates the function xhrSuccess as the callback to be invoked when the onload event fires, that is, when the XHR sucessfully completes.  

+ +

Line 10 designates the function xhrError as the callback to be invoked when the XHR requests fails to complete.

+ +

Line 11 specifies true for its third parameter to indicate that the request should be handled asynchronously.

+ +

Line 12 actually initiates the request.

+ +

Example: using a timeout

+ +

You can use a timeout to prevent hanging your code forever while waiting for a read to occur. This is done by setting the value of the timeout property on the XMLHttpRequest object, as shown in the code below:

+ +
function loadFile(sUrl, timeout, callback){
+
+    var args = arguments.slice(3);
+    var xhr = new XMLHttpRequest();
+    xhr.ontimeout = function () {
+        console.error("The request for " + url + " timed out.");
+    };
+    xhr.onload = function() {
+        if (xhr.readyState === 4) {
+            if (xhr.status === 200) {
+                callback.apply(xhr, args);
+            } else {
+                console.error(xhr.statusText);
+            }
+        }
+    };
+    xhr.open("GET", url, true);
+    xhr.timeout = timeout;
+    xhr.send(null);
+}
+ +

Notice the addition of code to handle the "timeout" event by setting the ontimeout handler.

+ +

Usage:

+ +
function showMessage (sMsg) {
+  alert(sMsg + this.responseText);
+}
+
+loadFile("message.txt", 2000, showMessage, "New message!\n");
+
+ +

Here, we're specifying a timeout of 2000 ms.

+ +
+

Note: Support for timeout was added in {{Gecko("12.0")}}.

+
+ +

Synchronous request

+ +
Note: Starting with Gecko 30.0 {{ geckoRelease("30.0") }}, synchronous requests on the main thread have been deprecated due to the negative effects to the user experience.
+ +

Em casos raros, o uso do método síncrono é preferível ao invés do método assíncrono.

+ +

Example: HTTP synchronous request

+ +

This example demonstrates how to make a simple synchronous request.

+ +
var request = new XMLHttpRequest();
+request.open('GET', '/bar/foo.txt', false);  // `false` makes the request synchronous
+request.send(null);
+
+if (request.status === 200) {
+  console.log(request.responseText);
+}
+
+ +

Line 3 sends the request.  The null parameter indicates that no body content is needed for the GET request.

+ +

Line 5 checks the status code after the transaction is completed.  If the result is 200 -- HTTP's "OK" result -- the document's text content is output to the console.

+ +

Example: Synchronous HTTP request from a Worker

+ +

One of the few cases in which a synchronous request does not usually block execution is the use of XMLHttpRequest within a Worker.

+ +

example.html (the main page):

+ +
<!doctype html>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<title>MDN Example</title>
+<script type="text/javascript">
+  var worker = new Worker("myTask.js");
+  worker.onmessage = function(event) {
+    alert("Worker said: " + event.data);
+  };
+
+  worker.postMessage("Hello");
+</script>
+</head>
+<body></body>
+</html>
+
+ +

myFile.txt (the target of the synchronous XMLHttpRequest invocation):

+ +
Hello World!!
+
+ +

myTask.js (the Worker):

+ +
self.onmessage = function (event) {
+  if (event.data === "Hello") {
+    var xhr = new XMLHttpRequest();
+    xhr.open("GET", "myFile.txt", false);  // synchronous request
+    xhr.send(null);
+    self.postMessage(xhr.responseText);
+  }
+};
+
+ +
Note: The effect, because of the use of the Worker, is however asynchronous.
+ +

It could be useful in order to interact in background with the server or to preload some content. See Using web workers for examples and details.

+ +

Adapting Sync XHR usecases to the Beacon API

+ +

There are some cases in which the synchronous usage of XMLHttpRequest was not replaceable, like during the window.onunload and window.onbeforeunload events.  The navigator.sendBeacon API can support these usecases typically while delivering a good UX.

+ +

The following example (from the sendBeacon docs) shows a theoretical analytics code that attempts to submit data to a server by using a synchronous XMLHttpRequest in an unload handler. This results in the unload of the page to be delayed.

+ +
window.addEventListener('unload', logData, false);
+
+function logData() {
+    var client = new XMLHttpRequest();
+    client.open("POST", "/log", false); // third parameter indicates sync xhr. :(
+    client.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
+    client.send(analyticsData);
+}
+
+ +

Using the sendBeacon() method, the data will be transmitted asynchronously to the web server when the User Agent has had an opportunity to do so, without delaying the unload or affecting the performance of the next navigation.

+ +

The following example shows a theoretical analytics code pattern that submits data to a server using the by using the sendBeacon() method.

+ +
window.addEventListener('unload', logData, false);
+
+function logData() {
+    navigator.sendBeacon("/log", analyticsData);
+}
+
+ +

See also

+ + + +

{{ languages( {"zh-cn": "zh-cn/DOM/XMLHttpRequest/Synchronous_and_Asynchronous_Requests" } ) }}

diff --git a/files/pt-br/web/api/xmlhttprequest/usando_xmlhttprequest/index.html b/files/pt-br/web/api/xmlhttprequest/usando_xmlhttprequest/index.html deleted file mode 100644 index b541e64bc1..0000000000 --- a/files/pt-br/web/api/xmlhttprequest/usando_xmlhttprequest/index.html +++ /dev/null @@ -1,688 +0,0 @@ ---- -title: Usando XMLHttpRequest -slug: Web/API/XMLHttpRequest/Usando_XMLHttpRequest -translation_of: Web/API/XMLHttpRequest/Using_XMLHttpRequest ---- -

XMLHttpRequest torna o envio de requisições HTTP muito fácil.  Basta criar uma instância do objeto, abrir uma url e enviar uma requisição. O status HTTP do resultado assim como o seu conteúdo estarão disponíveis quando a transação for completada. Esta página descreve alguns casos comuns de uso desse poderoso objeto JavaScript.

- -
function reqListener () {
-  console.log(this.responseText);
-};
-
-var oReq = new XMLHttpRequest();
-oReq.onload = reqListener;
-oReq.open("get", "yourFile.txt", true);
-oReq.send();
- -

Tipos de Requisições

- -

Uma requisição feita via XMLHttpRequest pode buscar dados de duas maneiras, sícrona e assíncrona. O tipo de requisição é dado pelo argumento async que é opcional (terceiro argumento) e é definido no método XMLHttpRequest open(). Se esse argumento for true ou não especificado, o XMLHttpRequest será processado de maneira assíncrona, caso contrário o processamento será síncrono. Uma discussão detalhada e demonstrações desses dois tipos podem ser encontradas na página requisições síncronas e assíncronas. No geral a melhor prática é a das solicitações assíncronas.

- -

Manipulando Respostas

- -

Existem vários tipos de atributos de resposta definidos pela especificação da W3C para o  XMLHttpRequest.  Eles informam ao cliente que efetuou a requisição XMLHttpRequest informações importantes sobre o status da resposta. Em alguns casos onde se lida com tipos de resposa de não-texto, os tipos de resposta podem envolver alguma manipulação e/ou análise conforme descrito nas seções seguintes.

- -

Analisando e manipulando a propriedade responseXML

- -

Se você utiliza o XMLHttpRequest para obter o conteúdo de um documento XML remoto, a propriedade responseXML será um objeto DOM que contém um documento XML, o que pode dificultar a manipulação e análise.

- -

As cinco formas mais utilizadas para análisar e manipular um arquivo XML são:

- -
    -
  1. Usando XPath para análisar parte deles.
    2. -
  2. Usando JXON para converter em um Objeto JavaScript.
    3. -
  3. Manualmente Parsing and serializing XML para strings ou objetos.
    4. -
  4. Usando XMLSerializer para serializar árvores do DOM para strings ou para arquivos.
    5. -
  5. RegExp pode ser usado se você souber de antemão qual é o conteúdo do XML. Você pode remover quebras de linhas, usando a RegExp para procurar as quebras de linha. No entanto, este é o "último método", caso o código do XML sofra alterações, o método se torna falho.
    6. -
- -

Analisando e manipulando uma propriedade responseText contendo um documento HTML

- -
Nota: A especificação W3C do XMLHttpRequest permite analisar HTML através da propriedade XMLHttpRequest.responseXML . Leia o artigo sobre HTML in XMLHttpRequest para maiores detalhes.
- -

Se você usa o XMLHttpRequest para recuperar o conteúdo de uma página HTML remota, a propriedade responseText será uma string contendo um a "sopa" de todos as tags HTML, o que pode ser difícil de manipular e analizar. Existem três formas básicas para analizar esta sopa de string HTML:

- -
    -
  1. Use a propriedade  XMLHttpRequest.responseXML.
    2. -
  2. Introduza o conteúdo dentro do corpo de um document fragment Através de fragment.body.innerHTML e percorra o fragmento do DOM.
    3. -
  3. RegExp pode se usada se você sempre conhece o conteúdo HTML responseText de que tem em mãos. Você pode quere remover quebras de linha, se você usar RegExp para varrer no que diz respeito a quebra de linhas. Contudo, este método é um "último recurso" uma vez que se o código HTML mudar um pouco, o método provavelmente irá falhar.
    4. -
- -

Manipulação de dados binários

- -

Apesar de XMLHttpRequest ser mais comumente usado para enviar e receber dados textual, ele pode ser utilizado para enviar e receber conteúdo binário. Existem vários métodos bem testados para forçar a resposta de um XMLHttpRequest para o envio de dados binário. Eles envolvem a utilização do método  .overrideMimeType()  sobre o objeto  XMLHttpRequest e é uma solução viável.

- -
var oReq = new XMLHttpRequest();
-oReq.open("GET", url, true);
-// recupera dados não processados como uma string binária
-oReq.overrideMimeType("text/plain; charset=x-user-defined");
-/* ... */
-
- -

A especificação XMLHttpRequest Level 2  adiciona novo responseType attributes que tornam o envio e recebimento de dados muito mais fácil.

- -
var oReq = new XMLHttpRequest();
-
-oReq.open("GET", url, true);
-oReq.responseType = "arraybuffer";
-oReq.onload = function(e) {
-  var arraybuffer = oReq.response; // não é responseText
-  /* ... */
-}
-oReq.send();
-
- -

Para mais exemplos confira a página Sending and Receiving Binary Data.

- -

Monitorando o progresso

- -

XMLHttpRequest fornece a capacidade de ouvir vários eventos que podem ocorrer enquanto o pedido está sendo processado. Isso inclui notificações periódicas de progresso, notificações de erro e assim por diante.

- -

Suporte para evento de progresso DOM monitorando a conexão XMLHttpRequest transfers siga a Web API specification for progress events: estes eventos implementam a interface {{domxref("ProgressEvent")}} .

- -
var oReq = new XMLHttpRequest();
-
-oReq.addEventListener("progress", updateProgress, false);
-oReq.addEventListener("load", transferComplete, false);
-oReq.addEventListener("error", transferFailed, false);
-oReq.addEventListener("abort", transferCanceled, false);
-
-oReq.open();
-
-// ...A transferência foi cancelada pelo usuário
-
-// progresso de transferências do servidor para o cliente (downloads)
-function updateProgress (oEvent) {
-  if (oEvent.lengthComputable) {
-    var percentComplete = oEvent.loaded / oEvent.total;
-    // ...
-  } else {
-    // Não é possível calcular informações de progresso uma vez que a dimensão total é desconhecida
-  }
-}
-
-function transferComplete(evt) {
-  alert("A transferência foi concluída.");
-}
-
-function transferFailed(evt) {
-  alert("Um erro ocorreu durante a transferência do arquivo.");
-}
-
-function transferCanceled(evt) {
-  alert("A transferência foi cancelada pelo usuário.");
-}
- -

Lines 3-6 adiciona receptores de eventos (event listeners) para os vários que são enviados ao executar uma transferência de dados usando XMLHttpRequest.

- -
Nota: Você precisa adicionar os receptores de eventos (event listeners) antes de chamar open() sobre a requisição.  Caso contrário, os eventos de prograsso não dispararão..
- -

O manipulador de evento  de prograsso, especificado pela função updateProgress() neste exemplo, recebe o número total de bytes para transferir, bem como o número de bytes transferidos até o momento em total de eventos e campos  carregados . No entanto, se o campo lengthComputable é false, o comprimento total não é conhecido e será zero..

- -

Eventos de progresso existem para ambos as transferências de download e upload. The download events are fired on the XMLHttpRequest object itself, as shown in the above sample. The upload events are fired on the XMLHttpRequest.upload object, as shown below:

- -
var oReq = new XMLHttpRequest();
-
-oReq.upload.addEventListener("progress", updateProgress, false);
-oReq.upload.addEventListener("load", transferComplete, false);
-oReq.upload.addEventListener("error", transferFailed, false);
-oReq.upload.addEventListener("abort", transferCanceled, false);
-
-oReq.open();
-
- -
Nota: eventos de progresso não estão disponíveis para o arquivo: protocol.
- -
Nota: Atualmente, existem bugs em aberto para o evento de progresso que continua fetando a versão 25 do Firefox sobre OS X e Linux.
- -
-

Nota: Iniciando no {{Gecko("9.0")}}, eventos de progresso agora podem ser invocados a entrar para cada pedaço de dados recebidos, incluindo o último bloco, nos casos em que o último pacote é recebido e a conexão fechada antes do evento progresso ser disparado. Neste caso, o evento de progresso é automaticamente acionado quando o evento load ocorre para esse pacote. Isso permite que você agora acompanhe de forma confiável apenas observando o evento de progresso

-
- -
-

Nota: A partir do {{Gecko("12.0")}}, se o seu evento de progresso e chamado com um responseType de "moz-blob", o valor da resposta será um {{domxref("Blob")}} contendo os dados recebidos até agorar.

-
- -

POde-se também detectar todas as três condições de fim de carga (abort, load, or error) usando o evento loadend:

- -
req.addEventListener("loadend", loadEnd, false);
-
-function loadEnd(e) {
-  alert("A transferência terminou (embora não sabemos se ele conseguiu ou não).");
-}
-
- -

Note que não há nenhuma maneira de ter certeza a partir da informação recebida pelo evento loadend sobre qual condição causou a operação de encerrar; no entanto, você pode usar isso para lidar com tarefas que precisam ser realizadas em todos os cenários de fim-de-transferência.

- -

Submitting forms and uploading files

- -

Instances of XMLHttpRequest can be used to submit forms in two ways:

- - - -

The second way (using the FormData API) is the simplest and the fastest, but has the disadvantage that the data thus collected can not be stringified: they are in every way a blob. It is the best solution for simple cases.
- The first way (pure AJAX) is instead the most complex, but in compensation is also the most flexible and powerful: it lends itself to wider uses and the data thus collected can be stringified and reused for other purposes such as, for example, populating the status object during a manipulation of the browser history, or other.

- -

Using nothing but pure AJAX

- -

Submitting forms without the FormData API does not require other APIs, except that, only if you want to upload one or more files, the FileReader API.

- -

A brief introduction to the submit methods

- -

An html {{ HTMLElement("form") }} can be sent in four ways:

- - - -

Now, consider to submit a form containing only two fields, named foo and baz. If you are using the POST method, the server will receive a string similar to one of the following three ones depending on the encoding type you are using:

- - - -

Instead, if you are using the GET method, a string like the following will be simply added to the URL:

- -
?foo=bar&baz=The%20first%20line.%0AThe%20second%20line.
- -

A little vanilla framework

- -

All these things are done automatically by the web browser whenever you submit a {{ HTMLElement("form") }}. But if you want to do the same things using JavaScript you have to instruct the interpreter about all things. So, how to send forms in pure AJAX is too complex to be explained in detail here. For this reason we posted here a complete (but still didactic) framework, which is able to use all the four ways of submit and, also, to upload files:

- -
-
<!doctype html>
-<html>
-<head>
-<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-<title>Sending forms with pure AJAX &ndash; MDN</title>
-<script type="text/javascript">
-
-"use strict";
-
-/*\
-|*|
-|*|  :: XMLHttpRequest.prototype.sendAsBinary() Polifyll ::
-|*|
-|*|  https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest#sendAsBinary()
-\*/
-
-if (!XMLHttpRequest.prototype.sendAsBinary) {
-  XMLHttpRequest.prototype.sendAsBinary = function (sData) {
-    var nBytes = sData.length, ui8Data = new Uint8Array(nBytes);
-    for (var nIdx = 0; nIdx < nBytes; nIdx++) {
-      ui8Data[nIdx] = sData.charCodeAt(nIdx) & 0xff;
-    }
-    /* send as ArrayBufferView...: */
-    this.send(ui8Data);
-    /* ...or as ArrayBuffer (legacy)...: this.send(ui8Data.buffer); */
-  };
-}
-
-/*\
-|*|
-|*|  :: AJAX Form Submit Framework ::
-|*|
-|*|  https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest
-|*|
-|*|  This framework is released under the GNU Public License, version 3 or later.
-|*|  http://www.gnu.org/licenses/gpl-3.0-standalone.html
-|*|
-|*|  Syntax:
-|*|
-|*|   AJAXSubmit(HTMLFormElement);
-\*/
-
-var AJAXSubmit = (function () {
-
-  function ajaxSuccess () {
-    /* console.log("AJAXSubmit - Success!"); */
-    alert(this.responseText);
-    /* you can get the serialized data through the "submittedData" custom property: */
-    /* alert(JSON.stringify(this.submittedData)); */
-  }
-
-  function submitData (oData) {
-    /* the AJAX request... */
-    var oAjaxReq = new XMLHttpRequest();
-    oAjaxReq.submittedData = oData;
-    oAjaxReq.onload = ajaxSuccess;
-    if (oData.technique === 0) {
-      /* method is GET */
-      oAjaxReq.open("get", oData.receiver.replace(/(?:\?.*)?$/, oData.segments.length > 0 ? "?" + oData.segments.join("&") : ""), true);
-      oAjaxReq.send(null);
-    } else {
-      /* method is POST */
-      oAjaxReq.open("post", oData.receiver, true);
-      if (oData.technique === 3) {
-        /* enctype is multipart/form-data */
-        var sBoundary = "---------------------------" + Date.now().toString(16);
-        oAjaxReq.setRequestHeader("Content-Type", "multipart\/form-data; boundary=" + sBoundary);
-        oAjaxReq.sendAsBinary("--" + sBoundary + "\r\n" + oData.segments.join("--" + sBoundary + "\r\n") + "--" + sBoundary + "--\r\n");
-      } else {
-        /* enctype is application/x-www-form-urlencoded or text/plain */
-        oAjaxReq.setRequestHeader("Content-Type", oData.contentType);
-        oAjaxReq.send(oData.segments.join(oData.technique === 2 ? "\r\n" : "&"));
-      }
-    }
-  }
-
-  function processStatus (oData) {
-    if (oData.status > 0) { return; }
-    /* the form is now totally serialized! do something before sending it to the server... */
-    /* doSomething(oData); */
-    /* console.log("AJAXSubmit - The form is now serialized. Submitting..."); */
-    submitData (oData);
-  }
-
-  function pushSegment (oFREvt) {
-    this.owner.segments[this.segmentIdx] += oFREvt.target.result + "\r\n";
-    this.owner.status--;
-    processStatus(this.owner);
-  }
-
-  function plainEscape (sText) {
-    /* how should I treat a text/plain form encoding? what characters are not allowed? this is what I suppose...: */
-    /* "4\3\7 - Einstein said E=mc2" ----> "4\\3\\7\ -\ Einstein\ said\ E\=mc2" */
-    return sText.replace(/[\s\=\\]/g, "\\$&");
-  }
-
-  function SubmitRequest (oTarget) {
-    var nFile, sFieldType, oField, oSegmReq, oFile, bIsPost = oTarget.method.toLowerCase() === "post";
-    /* console.log("AJAXSubmit - Serializing form..."); */
-    this.contentType = bIsPost && oTarget.enctype ? oTarget.enctype : "application\/x-www-form-urlencoded";
-    this.technique = bIsPost ? this.contentType === "multipart\/form-data" ? 3 : this.contentType === "text\/plain" ? 2 : 1 : 0;
-    this.receiver = oTarget.action;
-    this.status = 0;
-    this.segments = [];
-    var fFilter = this.technique === 2 ? plainEscape : escape;
-    for (var nItem = 0; nItem < oTarget.elements.length; nItem++) {
-      oField = oTarget.elements[nItem];
-      if (!oField.hasAttribute("name")) { continue; }
-      sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT";
-      if (sFieldType === "FILE" && oField.files.length > 0) {
-        if (this.technique === 3) {
-          /* enctype is multipart/form-data */
-          for (nFile = 0; nFile < oField.files.length; nFile++) {
-            oFile = oField.files[nFile];
-            oSegmReq = new FileReader();
-            /* (custom properties:) */
-            oSegmReq.segmentIdx = this.segments.length;
-            oSegmReq.owner = this;
-            /* (end of custom properties) */
-            oSegmReq.onload = pushSegment;
-            this.segments.push("Content-Disposition: form-data; name=\"" + oField.name + "\"; filename=\""+ oFile.name + "\"\r\nContent-Type: " + oFile.type + "\r\n\r\n");
-            this.status++;
-            oSegmReq.readAsBinaryString(oFile);
-          }
-        } else {
-          /* enctype is application/x-www-form-urlencoded or text/plain or method is GET: files will not be sent! */
-          for (nFile = 0; nFile < oField.files.length; this.segments.push(fFilter(oField.name) + "=" + fFilter(oField.files[nFile++].name)));
-        }
-      } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) {
-        /* field type is not FILE or is FILE but is empty */
-        this.segments.push(
-          this.technique === 3 ? /* enctype is multipart/form-data */
-            "Content-Disposition: form-data; name=\"" + oField.name + "\"\r\n\r\n" + oField.value + "\r\n"
-          : /* enctype is application/x-www-form-urlencoded or text/plain or method is GET */
-            fFilter(oField.name) + "=" + fFilter(oField.value)
-        );
-      }
-    }
-    processStatus(this);
-  }
-
-  return function (oFormElement) {
-    if (!oFormElement.action) { return; }
-    new SubmitRequest(oFormElement);
-  };
-
-})();
-
-</script>
-</head>
-<body>
-
-<h1>Sending forms with pure AJAX</h1>
-
-<h2>Using the GET method</h2>
-
-<form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;">
-  <fieldset>
-    <legend>Registration example</legend>
-    <p>
-      First name: <input type="text" name="firstname" /><br />
-      Last name: <input type="text" name="lastname" />
-    </p>
-    <p>
-      <input type="submit" value="Submit" />
-    </p>
-  </fieldset>
-</form>
-
-<h2>Using the POST method</h2>
-<h3>Enctype: application/x-www-form-urlencoded (default)</h3>
-
-<form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;">
-  <fieldset>
-    <legend>Registration example</legend>
-    <p>
-      First name: <input type="text" name="firstname" /><br />
-      Last name: <input type="text" name="lastname" />
-    </p>
-    <p>
-      <input type="submit" value="Submit" />
-    </p>
-  </fieldset>
-</form>
-
-<h3>Enctype: text/plain</h3>
-
-<form action="register.php" method="post" enctype="text/plain" onsubmit="AJAXSubmit(this); return false;">
-  <fieldset>
-    <legend>Registration example</legend>
-    <p>
-      Your name: <input type="text" name="user" />
-    </p>
-    <p>
-      Your message:<br />
-      <textarea name="message" cols="40" rows="8"></textarea>
-    </p>
-    <p>
-      <input type="submit" value="Submit" />
-    </p>
-  </fieldset>
-</form>
-
-<h3>Enctype: multipart/form-data</h3>
-
-<form action="register.php" method="post" enctype="multipart/form-data" onsubmit="AJAXSubmit(this); return false;">
-  <fieldset>
-    <legend>Upload example</legend>
-    <p>
-      First name: <input type="text" name="firstname" /><br />
-      Last name: <input type="text" name="lastname" /><br />
-      Sex:
-      <input id="sex_male" type="radio" name="sex" value="male" /> <label for="sex_male">Male</label>
-      <input id="sex_female" type="radio" name="sex" value="female" /> <label for="sex_female">Female</label><br />
-      Password: <input type="password" name="secret" /><br />
-      What do you prefer:
-      <select name="image_type">
-        <option>Books</option>
-        <option>Cinema</option>
-        <option>TV</option>
-      </select>
-    </p>
-    <p>
-      Post your photos:
-      <input type="file" multiple name="photos[]">
-    </p>
-    <p>
-      <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /> <label for="vehicle_bike">I have a bike</label><br />
-      <input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /> <label for="vehicle_car">I have a car</label>
-    </p>
-    <p>
-      Describe yourself:<br />
-      <textarea name="description" cols="50" rows="8"></textarea>
-    </p>
-    <p>
-      <input type="submit" value="Submit" />
-    </p>
-  </fieldset>
-</form>
-
-</body>
-</html>
-
- -

To test it, please, create a page named register.php (which is the action attribute of these sample forms) and just put the following minimalistic content:

- -
<?php
-
-  /* register.php */
-
-  header("Content-type: text/plain");
-
-  echo ":: data received via GET ::\n\n";
-  print_r($_GET);
-
-  echo "\n\n:: Data received via POST ::\n\n";
-  print_r($_POST);
-
-  echo "\n\n:: Data received as \"raw\" (text/plain encoding) ::\n\n";
-  if (isset($HTTP_RAW_POST_DATA)) { echo $HTTP_RAW_POST_DATA; }
-
-  echo "\n\n:: Files received ::\n\n";
-  print_r($_FILES);
-
-?>
- -

The syntax of this script is the following:

- -
AJAXSubmit(myForm);
- -
Note: This little vanilla framework uses the FileReader API, which is a recent technique (but only when there are files to upload, the method of the {{ HTMLElement("form") }} is POST and the enctype attribute is setted to multipart/form-data). For this reason, the pure-AJAX upload is to be considered an experimental technique. Instead, if you don't want to upload files, this framework will not use any recent API.
-Note also that the best way to send binary content is using ArrayBuffers or Blobs in conjuncton with the send() method and, possibly, with the readAsArrayBuffer() method of the FileReader API. But, since the aim of this little script is to work with a stringifiable raw data, we used the sendAsBinary() method in conjunction with the readAsBinaryString() method of the FileReader API. So, this is the best solution when working with a relatively few data which must be stringified in order to be reused later. Anyhow, since working with strings instead of typed arrays implies a greater waste of resources, this script makes sense only when you are dealing with small files (like images, documents, mp3, etc.). Otherwise, if you don't want to stringify the submitted or uploaded data, in addition to typed arrays, consider also the use of the FormData API.
- -

Using FormData objects

- -

The FormData constructor lets you compile a set of key/value pairs to send using XMLHttpRequest. Its primarily intended for use in sending form data, but can be used independently from forms in order to transmit keyed data. The transmitted data is in the same format that the form's submit() method would use to send the data if the form's encoding type were set to "multipart/form-data". FormData objects can be utilized in a number of ways with an XMLHttpRequest. For examples and explanations of how one can utilize FormData with XMLHttpRequests see the Using FormData Objects page. For didactic purpose only we post here a translation of the previous example transformed so as to make use of the FormData API. Note the brevity of the code:

- -
-
<!doctype html>
-<html>
-<head>
-<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-<title>Sending forms with FormData &ndash; MDN</title>
-<script type="text/javascript">
-"use strict";
-
-function ajaxSuccess () {
-  alert(this.responseText);
-}
-
-function AJAXSubmit (oFormElement) {
-  if (!oFormElement.action) { return; }
-  var oReq = new XMLHttpRequest();
-  oReq.onload = ajaxSuccess;
-  if (oFormElement.method.toLowerCase() === "post") {
-    oReq.open("post", oFormElement.action, true);
-    oReq.send(new FormData(oFormElement));
-  } else {
-    var oField, sFieldType, nFile, sSearch = "";
-    for (var nItem = 0; nItem < oFormElement.elements.length; nItem++) {
-      oField = oFormElement.elements[nItem];
-      if (!oField.hasAttribute("name")) { continue; }
-      sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT";
-      if (sFieldType === "FILE") {
-        for (nFile = 0; nFile < oField.files.length; sSearch += "&" + escape(oField.name) + "=" + escape(oField.files[nFile++].name));
-      } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) {
-        sSearch += "&" + escape(oField.name) + "=" + escape(oField.value);
-      }
-    }
-    oReq.open("get", oFormElement.action.replace(/(?:\?.*)?$/, sSearch.replace(/^&/, "?")), true);
-    oReq.send(null);
-  }
-}
-</script>
-</head>
-<body>
-
-<h1>Sending forms with FormData</h1>
-
-<h2>Using the GET method</h2>
-
-<form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;">
-  <fieldset>
-    <legend>Registration example</legend>
-    <p>
-      First name: <input type="text" name="firstname" /><br />
-      Last name: <input type="text" name="lastname" />
-    </p>
-    <p>
-      <input type="submit" value="Submit" />
-    </p>
-  </fieldset>
-</form>
-
-<h2>Using the POST method</h2>
-<h3>Enctype: application/x-www-form-urlencoded (default)</h3>
-
-<form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;">
-  <fieldset>
-    <legend>Registration example</legend>
-    <p>
-      First name: <input type="text" name="firstname" /><br />
-      Last name: <input type="text" name="lastname" />
-    </p>
-    <p>
-      <input type="submit" value="Submit" />
-    </p>
-  </fieldset>
-</form>
-
-<h3>Enctype: text/plain</h3>
-
-<p>The text/plain encoding is not supported by the FormData API.</p>
-
-<h3>Enctype: multipart/form-data</h3>
-
-<form action="register.php" method="post" enctype="multipart/form-data" onsubmit="AJAXSubmit(this); return false;">
-  <fieldset>
-    <legend>Upload example</legend>
-    <p>
-      First name: <input type="text" name="firstname" /><br />
-      Last name: <input type="text" name="lastname" /><br />
-      Sex:
-      <input id="sex_male" type="radio" name="sex" value="male" /> <label for="sex_male">Male</label>
-      <input id="sex_female" type="radio" name="sex" value="female" /> <label for="sex_female">Female</label><br />
-      Password: <input type="password" name="secret" /><br />
-      What do you prefer:
-      <select name="image_type">
-        <option>Books</option>
-        <option>Cinema</option>
-        <option>TV</option>
-      </select>
-    </p>
-    <p>
-      Post your photos:
-      <input type="file" multiple name="photos[]">
-    </p>
-    <p>
-      <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /> <label for="vehicle_bike">I have a bike</label><br />
-      <input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /> <label for="vehicle_car">I have a car</label>
-    </p>
-    <p>
-      Describe yourself:<br />
-      <textarea name="description" cols="50" rows="8"></textarea>
-    </p>
-    <p>
-      <input type="submit" value="Submit" />
-    </p>
-  </fieldset>
-</form>
-
-</body>
-</html>
-
- -
Note: As we said, FormData objects are not stringifiable objects. If you want to stringify a submitted data, use the previous pure-AJAX example. Note also that, although in this example there are some file {{ HTMLElement("input") }} fields, when you submit a form through the FormData API you do not need to use the FileReader API also: files are automatically loaded and uploaded.
- -

Cross-site XMLHttpRequest

- -

Modern browsers support cross-site requests by implementing the web applications working group's Access Control for Cross-Site Requests standard.  As long as the server is configured to allow requests from your web application's origin, XMLHttpRequest will work.  Otherwise, an INVALID_ACCESS_ERR exception is thrown.

- -

Bypassing the cache

- -

A, cross-browser compatible approach to bypassing the cache is to append a timestamp to the URL, being sure to include a "?" or "&" as appropriate.  For example:

- -
http://foo.com/bar.html -> http://foo.com/bar.html?12345
-http://foo.com/bar.html?foobar=baz -> http://foo.com/bar.html?foobar=baz&12345
-
- -

Since the local cache is indexed by URL, this causes every request to be unique, thereby bypassing the cache.

- -

You can automatically adjust URLs using the following code:

- -
var oReq = new XMLHttpRequest();
-
-oReq.open("GET", url + ((/\?/).test(url) ? "&" : "?") + (new Date()).getTime(), true);
-oReq.send(null);
- -

Security

- -

{{fx_minversion_note(3, "Versions of Firefox prior to Firefox 3 allowed you to set the preference capability.policy..XMLHttpRequest.open to allAccess to give specific sites cross-site access.  This is no longer supported.")}}

- -

{{fx_minversion_note(5, "Versions of Firefox prior to Firefox 5 could use netscape.security.PrivilegeManager.enablePrivilege(\"UniversalBrowserRead\"); to request cross-site access. This is no longer supported, even though it produces no warning and permission dialog is still presented.")}}

- -

The recommended way to enable cross-site scripting is to use the Access-Control-Allow-Origin HTTP header in the response to the XMLHttpRequest.

- -

XMLHttpRequests being stopped

- -

If you end up with an XMLHttpRequest having status=0 and statusText=null, it means that the request was not allowed to be performed. It was UNSENT. A likely cause for this is when the XMLHttpRequest origin (at the creation of the XMLHttpRequest) has changed when the XMLHttpRequest is then open(). This case can happen for example when one has an XMLHttpRequest that gets fired on an onunload event for a window: the XMLHttpRequest gets in fact created when the window to be closed is still there, and then the request is sent (ie open()) when this window has lost its focus and potentially different window has gained focus. The way to avoid this problem is to set a listener on the new window "activate" event that gets set when the old window has its "unload" event fired.

- -

Using XMLHttpRequest from JavaScript modules / XPCOM components

- -

Instantiating XMLHttpRequest from a JavaScript module or an XPCOM component works a little differently; it can't be instantiated using the XMLHttpRequest() constructor. The constructor is not defined inside components and the code results in an error. The best way to work around this is to use the XPCOM component constructor.

- -
const XMLHttpRequest = Components.Constructor("@mozilla.org/xmlextras/xmlhttprequest;1");
-var oReq = XMLHttpRequest();
- -

Unfortunately in versions of Gecko prior to Gecko 16 there is a bug which can cause requests created this way to be cancelled for no reason.  If you need your code to work on Gecko 15 or earlier, you can get the XMLHttpRequest constructor from the hidden DOM window like so.

- -
const { XMLHttpRequest } = Components.classes["@mozilla.org/appshell/appShellService;1"]
-                                     .getService(Components.interfaces.nsIAppShellService)
-                                     .hiddenDOMWindow;
-var oReq = XMLHttpRequest();
-
- -

See also

- -
    -
  1. MDC AJAX introduction
    2. -
  2. HTTP access control
    3. -
  3. How to check the security state of an XMLHTTPRequest over SSL
    4. -
  4. XMLHttpRequest - REST and the Rich User Experience
    5. -
  5. Microsoft documentation
    6. -
  6. Apple developers' reference
    7. -
  7. "Using the XMLHttpRequest Object" (jibbering.com)
    8. -
  8. The XMLHttpRequest Object: W3C Specification
    9. -
  9. Web Progress Events specification
    10. -
diff --git a/files/pt-br/web/api/xmlhttprequest/using_xmlhttprequest/index.html b/files/pt-br/web/api/xmlhttprequest/using_xmlhttprequest/index.html new file mode 100644 index 0000000000..b541e64bc1 --- /dev/null +++ b/files/pt-br/web/api/xmlhttprequest/using_xmlhttprequest/index.html @@ -0,0 +1,688 @@ +--- +title: Usando XMLHttpRequest +slug: Web/API/XMLHttpRequest/Usando_XMLHttpRequest +translation_of: Web/API/XMLHttpRequest/Using_XMLHttpRequest +--- +

XMLHttpRequest torna o envio de requisições HTTP muito fácil.  Basta criar uma instância do objeto, abrir uma url e enviar uma requisição. O status HTTP do resultado assim como o seu conteúdo estarão disponíveis quando a transação for completada. Esta página descreve alguns casos comuns de uso desse poderoso objeto JavaScript.

+ +
function reqListener () {
+  console.log(this.responseText);
+};
+
+var oReq = new XMLHttpRequest();
+oReq.onload = reqListener;
+oReq.open("get", "yourFile.txt", true);
+oReq.send();
+ +

Tipos de Requisições

+ +

Uma requisição feita via XMLHttpRequest pode buscar dados de duas maneiras, sícrona e assíncrona. O tipo de requisição é dado pelo argumento async que é opcional (terceiro argumento) e é definido no método XMLHttpRequest open(). Se esse argumento for true ou não especificado, o XMLHttpRequest será processado de maneira assíncrona, caso contrário o processamento será síncrono. Uma discussão detalhada e demonstrações desses dois tipos podem ser encontradas na página requisições síncronas e assíncronas. No geral a melhor prática é a das solicitações assíncronas.

+ +

Manipulando Respostas

+ +

Existem vários tipos de atributos de resposta definidos pela especificação da W3C para o  XMLHttpRequest.  Eles informam ao cliente que efetuou a requisição XMLHttpRequest informações importantes sobre o status da resposta. Em alguns casos onde se lida com tipos de resposa de não-texto, os tipos de resposta podem envolver alguma manipulação e/ou análise conforme descrito nas seções seguintes.

+ +

Analisando e manipulando a propriedade responseXML

+ +

Se você utiliza o XMLHttpRequest para obter o conteúdo de um documento XML remoto, a propriedade responseXML será um objeto DOM que contém um documento XML, o que pode dificultar a manipulação e análise.

+ +

As cinco formas mais utilizadas para análisar e manipular um arquivo XML são:

+ +
    +
  1. Usando XPath para análisar parte deles.
    2. +
  2. Usando JXON para converter em um Objeto JavaScript.
    3. +
  3. Manualmente Parsing and serializing XML para strings ou objetos.
    4. +
  4. Usando XMLSerializer para serializar árvores do DOM para strings ou para arquivos.
    5. +
  5. RegExp pode ser usado se você souber de antemão qual é o conteúdo do XML. Você pode remover quebras de linhas, usando a RegExp para procurar as quebras de linha. No entanto, este é o "último método", caso o código do XML sofra alterações, o método se torna falho.
    6. +
+ +

Analisando e manipulando uma propriedade responseText contendo um documento HTML

+ +
Nota: A especificação W3C do XMLHttpRequest permite analisar HTML através da propriedade XMLHttpRequest.responseXML . Leia o artigo sobre HTML in XMLHttpRequest para maiores detalhes.
+ +

Se você usa o XMLHttpRequest para recuperar o conteúdo de uma página HTML remota, a propriedade responseText será uma string contendo um a "sopa" de todos as tags HTML, o que pode ser difícil de manipular e analizar. Existem três formas básicas para analizar esta sopa de string HTML:

+ +
    +
  1. Use a propriedade  XMLHttpRequest.responseXML.
    2. +
  2. Introduza o conteúdo dentro do corpo de um document fragment Através de fragment.body.innerHTML e percorra o fragmento do DOM.
    3. +
  3. RegExp pode se usada se você sempre conhece o conteúdo HTML responseText de que tem em mãos. Você pode quere remover quebras de linha, se você usar RegExp para varrer no que diz respeito a quebra de linhas. Contudo, este método é um "último recurso" uma vez que se o código HTML mudar um pouco, o método provavelmente irá falhar.
    4. +
+ +

Manipulação de dados binários

+ +

Apesar de XMLHttpRequest ser mais comumente usado para enviar e receber dados textual, ele pode ser utilizado para enviar e receber conteúdo binário. Existem vários métodos bem testados para forçar a resposta de um XMLHttpRequest para o envio de dados binário. Eles envolvem a utilização do método  .overrideMimeType()  sobre o objeto  XMLHttpRequest e é uma solução viável.

+ +
var oReq = new XMLHttpRequest();
+oReq.open("GET", url, true);
+// recupera dados não processados como uma string binária
+oReq.overrideMimeType("text/plain; charset=x-user-defined");
+/* ... */
+
+ +

A especificação XMLHttpRequest Level 2  adiciona novo responseType attributes que tornam o envio e recebimento de dados muito mais fácil.

+ +
var oReq = new XMLHttpRequest();
+
+oReq.open("GET", url, true);
+oReq.responseType = "arraybuffer";
+oReq.onload = function(e) {
+  var arraybuffer = oReq.response; // não é responseText
+  /* ... */
+}
+oReq.send();
+
+ +

Para mais exemplos confira a página Sending and Receiving Binary Data.

+ +

Monitorando o progresso

+ +

XMLHttpRequest fornece a capacidade de ouvir vários eventos que podem ocorrer enquanto o pedido está sendo processado. Isso inclui notificações periódicas de progresso, notificações de erro e assim por diante.

+ +

Suporte para evento de progresso DOM monitorando a conexão XMLHttpRequest transfers siga a Web API specification for progress events: estes eventos implementam a interface {{domxref("ProgressEvent")}} .

+ +
var oReq = new XMLHttpRequest();
+
+oReq.addEventListener("progress", updateProgress, false);
+oReq.addEventListener("load", transferComplete, false);
+oReq.addEventListener("error", transferFailed, false);
+oReq.addEventListener("abort", transferCanceled, false);
+
+oReq.open();
+
+// ...A transferência foi cancelada pelo usuário
+
+// progresso de transferências do servidor para o cliente (downloads)
+function updateProgress (oEvent) {
+  if (oEvent.lengthComputable) {
+    var percentComplete = oEvent.loaded / oEvent.total;
+    // ...
+  } else {
+    // Não é possível calcular informações de progresso uma vez que a dimensão total é desconhecida
+  }
+}
+
+function transferComplete(evt) {
+  alert("A transferência foi concluída.");
+}
+
+function transferFailed(evt) {
+  alert("Um erro ocorreu durante a transferência do arquivo.");
+}
+
+function transferCanceled(evt) {
+  alert("A transferência foi cancelada pelo usuário.");
+}
+ +

Lines 3-6 adiciona receptores de eventos (event listeners) para os vários que são enviados ao executar uma transferência de dados usando XMLHttpRequest.

+ +
Nota: Você precisa adicionar os receptores de eventos (event listeners) antes de chamar open() sobre a requisição.  Caso contrário, os eventos de prograsso não dispararão..
+ +

O manipulador de evento  de prograsso, especificado pela função updateProgress() neste exemplo, recebe o número total de bytes para transferir, bem como o número de bytes transferidos até o momento em total de eventos e campos  carregados . No entanto, se o campo lengthComputable é false, o comprimento total não é conhecido e será zero..

+ +

Eventos de progresso existem para ambos as transferências de download e upload. The download events are fired on the XMLHttpRequest object itself, as shown in the above sample. The upload events are fired on the XMLHttpRequest.upload object, as shown below:

+ +
var oReq = new XMLHttpRequest();
+
+oReq.upload.addEventListener("progress", updateProgress, false);
+oReq.upload.addEventListener("load", transferComplete, false);
+oReq.upload.addEventListener("error", transferFailed, false);
+oReq.upload.addEventListener("abort", transferCanceled, false);
+
+oReq.open();
+
+ +
Nota: eventos de progresso não estão disponíveis para o arquivo: protocol.
+ +
Nota: Atualmente, existem bugs em aberto para o evento de progresso que continua fetando a versão 25 do Firefox sobre OS X e Linux.
+ +
+

Nota: Iniciando no {{Gecko("9.0")}}, eventos de progresso agora podem ser invocados a entrar para cada pedaço de dados recebidos, incluindo o último bloco, nos casos em que o último pacote é recebido e a conexão fechada antes do evento progresso ser disparado. Neste caso, o evento de progresso é automaticamente acionado quando o evento load ocorre para esse pacote. Isso permite que você agora acompanhe de forma confiável apenas observando o evento de progresso

+
+ +
+

Nota: A partir do {{Gecko("12.0")}}, se o seu evento de progresso e chamado com um responseType de "moz-blob", o valor da resposta será um {{domxref("Blob")}} contendo os dados recebidos até agorar.

+
+ +

POde-se também detectar todas as três condições de fim de carga (abort, load, or error) usando o evento loadend:

+ +
req.addEventListener("loadend", loadEnd, false);
+
+function loadEnd(e) {
+  alert("A transferência terminou (embora não sabemos se ele conseguiu ou não).");
+}
+
+ +

Note que não há nenhuma maneira de ter certeza a partir da informação recebida pelo evento loadend sobre qual condição causou a operação de encerrar; no entanto, você pode usar isso para lidar com tarefas que precisam ser realizadas em todos os cenários de fim-de-transferência.

+ +

Submitting forms and uploading files

+ +

Instances of XMLHttpRequest can be used to submit forms in two ways:

+ + + +

The second way (using the FormData API) is the simplest and the fastest, but has the disadvantage that the data thus collected can not be stringified: they are in every way a blob. It is the best solution for simple cases.
+ The first way (pure AJAX) is instead the most complex, but in compensation is also the most flexible and powerful: it lends itself to wider uses and the data thus collected can be stringified and reused for other purposes such as, for example, populating the status object during a manipulation of the browser history, or other.

+ +

Using nothing but pure AJAX

+ +

Submitting forms without the FormData API does not require other APIs, except that, only if you want to upload one or more files, the FileReader API.

+ +

A brief introduction to the submit methods

+ +

An html {{ HTMLElement("form") }} can be sent in four ways:

+ + + +

Now, consider to submit a form containing only two fields, named foo and baz. If you are using the POST method, the server will receive a string similar to one of the following three ones depending on the encoding type you are using:

+ + + +

Instead, if you are using the GET method, a string like the following will be simply added to the URL:

+ +
?foo=bar&baz=The%20first%20line.%0AThe%20second%20line.
+ +

A little vanilla framework

+ +

All these things are done automatically by the web browser whenever you submit a {{ HTMLElement("form") }}. But if you want to do the same things using JavaScript you have to instruct the interpreter about all things. So, how to send forms in pure AJAX is too complex to be explained in detail here. For this reason we posted here a complete (but still didactic) framework, which is able to use all the four ways of submit and, also, to upload files:

+ +
+
<!doctype html>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<title>Sending forms with pure AJAX &ndash; MDN</title>
+<script type="text/javascript">
+
+"use strict";
+
+/*\
+|*|
+|*|  :: XMLHttpRequest.prototype.sendAsBinary() Polifyll ::
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest#sendAsBinary()
+\*/
+
+if (!XMLHttpRequest.prototype.sendAsBinary) {
+  XMLHttpRequest.prototype.sendAsBinary = function (sData) {
+    var nBytes = sData.length, ui8Data = new Uint8Array(nBytes);
+    for (var nIdx = 0; nIdx < nBytes; nIdx++) {
+      ui8Data[nIdx] = sData.charCodeAt(nIdx) & 0xff;
+    }
+    /* send as ArrayBufferView...: */
+    this.send(ui8Data);
+    /* ...or as ArrayBuffer (legacy)...: this.send(ui8Data.buffer); */
+  };
+}
+
+/*\
+|*|
+|*|  :: AJAX Form Submit Framework ::
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest
+|*|
+|*|  This framework is released under the GNU Public License, version 3 or later.
+|*|  http://www.gnu.org/licenses/gpl-3.0-standalone.html
+|*|
+|*|  Syntax:
+|*|
+|*|   AJAXSubmit(HTMLFormElement);
+\*/
+
+var AJAXSubmit = (function () {
+
+  function ajaxSuccess () {
+    /* console.log("AJAXSubmit - Success!"); */
+    alert(this.responseText);
+    /* you can get the serialized data through the "submittedData" custom property: */
+    /* alert(JSON.stringify(this.submittedData)); */
+  }
+
+  function submitData (oData) {
+    /* the AJAX request... */
+    var oAjaxReq = new XMLHttpRequest();
+    oAjaxReq.submittedData = oData;
+    oAjaxReq.onload = ajaxSuccess;
+    if (oData.technique === 0) {
+      /* method is GET */
+      oAjaxReq.open("get", oData.receiver.replace(/(?:\?.*)?$/, oData.segments.length > 0 ? "?" + oData.segments.join("&") : ""), true);
+      oAjaxReq.send(null);
+    } else {
+      /* method is POST */
+      oAjaxReq.open("post", oData.receiver, true);
+      if (oData.technique === 3) {
+        /* enctype is multipart/form-data */
+        var sBoundary = "---------------------------" + Date.now().toString(16);
+        oAjaxReq.setRequestHeader("Content-Type", "multipart\/form-data; boundary=" + sBoundary);
+        oAjaxReq.sendAsBinary("--" + sBoundary + "\r\n" + oData.segments.join("--" + sBoundary + "\r\n") + "--" + sBoundary + "--\r\n");
+      } else {
+        /* enctype is application/x-www-form-urlencoded or text/plain */
+        oAjaxReq.setRequestHeader("Content-Type", oData.contentType);
+        oAjaxReq.send(oData.segments.join(oData.technique === 2 ? "\r\n" : "&"));
+      }
+    }
+  }
+
+  function processStatus (oData) {
+    if (oData.status > 0) { return; }
+    /* the form is now totally serialized! do something before sending it to the server... */
+    /* doSomething(oData); */
+    /* console.log("AJAXSubmit - The form is now serialized. Submitting..."); */
+    submitData (oData);
+  }
+
+  function pushSegment (oFREvt) {
+    this.owner.segments[this.segmentIdx] += oFREvt.target.result + "\r\n";
+    this.owner.status--;
+    processStatus(this.owner);
+  }
+
+  function plainEscape (sText) {
+    /* how should I treat a text/plain form encoding? what characters are not allowed? this is what I suppose...: */
+    /* "4\3\7 - Einstein said E=mc2" ----> "4\\3\\7\ -\ Einstein\ said\ E\=mc2" */
+    return sText.replace(/[\s\=\\]/g, "\\$&");
+  }
+
+  function SubmitRequest (oTarget) {
+    var nFile, sFieldType, oField, oSegmReq, oFile, bIsPost = oTarget.method.toLowerCase() === "post";
+    /* console.log("AJAXSubmit - Serializing form..."); */
+    this.contentType = bIsPost && oTarget.enctype ? oTarget.enctype : "application\/x-www-form-urlencoded";
+    this.technique = bIsPost ? this.contentType === "multipart\/form-data" ? 3 : this.contentType === "text\/plain" ? 2 : 1 : 0;
+    this.receiver = oTarget.action;
+    this.status = 0;
+    this.segments = [];
+    var fFilter = this.technique === 2 ? plainEscape : escape;
+    for (var nItem = 0; nItem < oTarget.elements.length; nItem++) {
+      oField = oTarget.elements[nItem];
+      if (!oField.hasAttribute("name")) { continue; }
+      sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT";
+      if (sFieldType === "FILE" && oField.files.length > 0) {
+        if (this.technique === 3) {
+          /* enctype is multipart/form-data */
+          for (nFile = 0; nFile < oField.files.length; nFile++) {
+            oFile = oField.files[nFile];
+            oSegmReq = new FileReader();
+            /* (custom properties:) */
+            oSegmReq.segmentIdx = this.segments.length;
+            oSegmReq.owner = this;
+            /* (end of custom properties) */
+            oSegmReq.onload = pushSegment;
+            this.segments.push("Content-Disposition: form-data; name=\"" + oField.name + "\"; filename=\""+ oFile.name + "\"\r\nContent-Type: " + oFile.type + "\r\n\r\n");
+            this.status++;
+            oSegmReq.readAsBinaryString(oFile);
+          }
+        } else {
+          /* enctype is application/x-www-form-urlencoded or text/plain or method is GET: files will not be sent! */
+          for (nFile = 0; nFile < oField.files.length; this.segments.push(fFilter(oField.name) + "=" + fFilter(oField.files[nFile++].name)));
+        }
+      } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) {
+        /* field type is not FILE or is FILE but is empty */
+        this.segments.push(
+          this.technique === 3 ? /* enctype is multipart/form-data */
+            "Content-Disposition: form-data; name=\"" + oField.name + "\"\r\n\r\n" + oField.value + "\r\n"
+          : /* enctype is application/x-www-form-urlencoded or text/plain or method is GET */
+            fFilter(oField.name) + "=" + fFilter(oField.value)
+        );
+      }
+    }
+    processStatus(this);
+  }
+
+  return function (oFormElement) {
+    if (!oFormElement.action) { return; }
+    new SubmitRequest(oFormElement);
+  };
+
+})();
+
+</script>
+</head>
+<body>
+
+<h1>Sending forms with pure AJAX</h1>
+
+<h2>Using the GET method</h2>
+
+<form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Registration example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" />
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+<h2>Using the POST method</h2>
+<h3>Enctype: application/x-www-form-urlencoded (default)</h3>
+
+<form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Registration example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" />
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+<h3>Enctype: text/plain</h3>
+
+<form action="register.php" method="post" enctype="text/plain" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Registration example</legend>
+    <p>
+      Your name: <input type="text" name="user" />
+    </p>
+    <p>
+      Your message:<br />
+      <textarea name="message" cols="40" rows="8"></textarea>
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+<h3>Enctype: multipart/form-data</h3>
+
+<form action="register.php" method="post" enctype="multipart/form-data" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Upload example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" /><br />
+      Sex:
+      <input id="sex_male" type="radio" name="sex" value="male" /> <label for="sex_male">Male</label>
+      <input id="sex_female" type="radio" name="sex" value="female" /> <label for="sex_female">Female</label><br />
+      Password: <input type="password" name="secret" /><br />
+      What do you prefer:
+      <select name="image_type">
+        <option>Books</option>
+        <option>Cinema</option>
+        <option>TV</option>
+      </select>
+    </p>
+    <p>
+      Post your photos:
+      <input type="file" multiple name="photos[]">
+    </p>
+    <p>
+      <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /> <label for="vehicle_bike">I have a bike</label><br />
+      <input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /> <label for="vehicle_car">I have a car</label>
+    </p>
+    <p>
+      Describe yourself:<br />
+      <textarea name="description" cols="50" rows="8"></textarea>
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+</body>
+</html>
+
+ +

To test it, please, create a page named register.php (which is the action attribute of these sample forms) and just put the following minimalistic content:

+ +
<?php
+
+  /* register.php */
+
+  header("Content-type: text/plain");
+
+  echo ":: data received via GET ::\n\n";
+  print_r($_GET);
+
+  echo "\n\n:: Data received via POST ::\n\n";
+  print_r($_POST);
+
+  echo "\n\n:: Data received as \"raw\" (text/plain encoding) ::\n\n";
+  if (isset($HTTP_RAW_POST_DATA)) { echo $HTTP_RAW_POST_DATA; }
+
+  echo "\n\n:: Files received ::\n\n";
+  print_r($_FILES);
+
+?>
+ +

The syntax of this script is the following:

+ +
AJAXSubmit(myForm);
+ +
Note: This little vanilla framework uses the FileReader API, which is a recent technique (but only when there are files to upload, the method of the {{ HTMLElement("form") }} is POST and the enctype attribute is setted to multipart/form-data). For this reason, the pure-AJAX upload is to be considered an experimental technique. Instead, if you don't want to upload files, this framework will not use any recent API.
+Note also that the best way to send binary content is using ArrayBuffers or Blobs in conjuncton with the send() method and, possibly, with the readAsArrayBuffer() method of the FileReader API. But, since the aim of this little script is to work with a stringifiable raw data, we used the sendAsBinary() method in conjunction with the readAsBinaryString() method of the FileReader API. So, this is the best solution when working with a relatively few data which must be stringified in order to be reused later. Anyhow, since working with strings instead of typed arrays implies a greater waste of resources, this script makes sense only when you are dealing with small files (like images, documents, mp3, etc.). Otherwise, if you don't want to stringify the submitted or uploaded data, in addition to typed arrays, consider also the use of the FormData API.
+ +

Using FormData objects

+ +

The FormData constructor lets you compile a set of key/value pairs to send using XMLHttpRequest. Its primarily intended for use in sending form data, but can be used independently from forms in order to transmit keyed data. The transmitted data is in the same format that the form's submit() method would use to send the data if the form's encoding type were set to "multipart/form-data". FormData objects can be utilized in a number of ways with an XMLHttpRequest. For examples and explanations of how one can utilize FormData with XMLHttpRequests see the Using FormData Objects page. For didactic purpose only we post here a translation of the previous example transformed so as to make use of the FormData API. Note the brevity of the code:

+ +
+
<!doctype html>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<title>Sending forms with FormData &ndash; MDN</title>
+<script type="text/javascript">
+"use strict";
+
+function ajaxSuccess () {
+  alert(this.responseText);
+}
+
+function AJAXSubmit (oFormElement) {
+  if (!oFormElement.action) { return; }
+  var oReq = new XMLHttpRequest();
+  oReq.onload = ajaxSuccess;
+  if (oFormElement.method.toLowerCase() === "post") {
+    oReq.open("post", oFormElement.action, true);
+    oReq.send(new FormData(oFormElement));
+  } else {
+    var oField, sFieldType, nFile, sSearch = "";
+    for (var nItem = 0; nItem < oFormElement.elements.length; nItem++) {
+      oField = oFormElement.elements[nItem];
+      if (!oField.hasAttribute("name")) { continue; }
+      sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT";
+      if (sFieldType === "FILE") {
+        for (nFile = 0; nFile < oField.files.length; sSearch += "&" + escape(oField.name) + "=" + escape(oField.files[nFile++].name));
+      } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) {
+        sSearch += "&" + escape(oField.name) + "=" + escape(oField.value);
+      }
+    }
+    oReq.open("get", oFormElement.action.replace(/(?:\?.*)?$/, sSearch.replace(/^&/, "?")), true);
+    oReq.send(null);
+  }
+}
+</script>
+</head>
+<body>
+
+<h1>Sending forms with FormData</h1>
+
+<h2>Using the GET method</h2>
+
+<form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Registration example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" />
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+<h2>Using the POST method</h2>
+<h3>Enctype: application/x-www-form-urlencoded (default)</h3>
+
+<form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Registration example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" />
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+<h3>Enctype: text/plain</h3>
+
+<p>The text/plain encoding is not supported by the FormData API.</p>
+
+<h3>Enctype: multipart/form-data</h3>
+
+<form action="register.php" method="post" enctype="multipart/form-data" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Upload example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" /><br />
+      Sex:
+      <input id="sex_male" type="radio" name="sex" value="male" /> <label for="sex_male">Male</label>
+      <input id="sex_female" type="radio" name="sex" value="female" /> <label for="sex_female">Female</label><br />
+      Password: <input type="password" name="secret" /><br />
+      What do you prefer:
+      <select name="image_type">
+        <option>Books</option>
+        <option>Cinema</option>
+        <option>TV</option>
+      </select>
+    </p>
+    <p>
+      Post your photos:
+      <input type="file" multiple name="photos[]">
+    </p>
+    <p>
+      <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /> <label for="vehicle_bike">I have a bike</label><br />
+      <input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /> <label for="vehicle_car">I have a car</label>
+    </p>
+    <p>
+      Describe yourself:<br />
+      <textarea name="description" cols="50" rows="8"></textarea>
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+</body>
+</html>
+
+ +
Note: As we said, FormData objects are not stringifiable objects. If you want to stringify a submitted data, use the previous pure-AJAX example. Note also that, although in this example there are some file {{ HTMLElement("input") }} fields, when you submit a form through the FormData API you do not need to use the FileReader API also: files are automatically loaded and uploaded.
+ +

Cross-site XMLHttpRequest

+ +

Modern browsers support cross-site requests by implementing the web applications working group's Access Control for Cross-Site Requests standard.  As long as the server is configured to allow requests from your web application's origin, XMLHttpRequest will work.  Otherwise, an INVALID_ACCESS_ERR exception is thrown.

+ +

Bypassing the cache

+ +

A, cross-browser compatible approach to bypassing the cache is to append a timestamp to the URL, being sure to include a "?" or "&" as appropriate.  For example:

+ +
http://foo.com/bar.html -> http://foo.com/bar.html?12345
+http://foo.com/bar.html?foobar=baz -> http://foo.com/bar.html?foobar=baz&12345
+
+ +

Since the local cache is indexed by URL, this causes every request to be unique, thereby bypassing the cache.

+ +

You can automatically adjust URLs using the following code:

+ +
var oReq = new XMLHttpRequest();
+
+oReq.open("GET", url + ((/\?/).test(url) ? "&" : "?") + (new Date()).getTime(), true);
+oReq.send(null);
+ +

Security

+ +

{{fx_minversion_note(3, "Versions of Firefox prior to Firefox 3 allowed you to set the preference capability.policy..XMLHttpRequest.open to allAccess to give specific sites cross-site access.  This is no longer supported.")}}

+ +

{{fx_minversion_note(5, "Versions of Firefox prior to Firefox 5 could use netscape.security.PrivilegeManager.enablePrivilege(\"UniversalBrowserRead\"); to request cross-site access. This is no longer supported, even though it produces no warning and permission dialog is still presented.")}}

+ +

The recommended way to enable cross-site scripting is to use the Access-Control-Allow-Origin HTTP header in the response to the XMLHttpRequest.

+ +

XMLHttpRequests being stopped

+ +

If you end up with an XMLHttpRequest having status=0 and statusText=null, it means that the request was not allowed to be performed. It was UNSENT. A likely cause for this is when the XMLHttpRequest origin (at the creation of the XMLHttpRequest) has changed when the XMLHttpRequest is then open(). This case can happen for example when one has an XMLHttpRequest that gets fired on an onunload event for a window: the XMLHttpRequest gets in fact created when the window to be closed is still there, and then the request is sent (ie open()) when this window has lost its focus and potentially different window has gained focus. The way to avoid this problem is to set a listener on the new window "activate" event that gets set when the old window has its "unload" event fired.

+ +

Using XMLHttpRequest from JavaScript modules / XPCOM components

+ +

Instantiating XMLHttpRequest from a JavaScript module or an XPCOM component works a little differently; it can't be instantiated using the XMLHttpRequest() constructor. The constructor is not defined inside components and the code results in an error. The best way to work around this is to use the XPCOM component constructor.

+ +
const XMLHttpRequest = Components.Constructor("@mozilla.org/xmlextras/xmlhttprequest;1");
+var oReq = XMLHttpRequest();
+ +

Unfortunately in versions of Gecko prior to Gecko 16 there is a bug which can cause requests created this way to be cancelled for no reason.  If you need your code to work on Gecko 15 or earlier, you can get the XMLHttpRequest constructor from the hidden DOM window like so.

+ +
const { XMLHttpRequest } = Components.classes["@mozilla.org/appshell/appShellService;1"]
+                                     .getService(Components.interfaces.nsIAppShellService)
+                                     .hiddenDOMWindow;
+var oReq = XMLHttpRequest();
+
+ +

See also

+ +
    +
  1. MDC AJAX introduction
    2. +
  2. HTTP access control
    3. +
  3. How to check the security state of an XMLHTTPRequest over SSL
    4. +
  4. XMLHttpRequest - REST and the Rich User Experience
    5. +
  5. Microsoft documentation
    6. +
  6. Apple developers' reference
    7. +
  7. "Using the XMLHttpRequest Object" (jibbering.com)
    8. +
  8. The XMLHttpRequest Object: W3C Specification
    9. +
  9. Web Progress Events specification
    10. +
diff --git a/files/pt-br/web/css/-moz-box-ordinal-group/index.html b/files/pt-br/web/css/-moz-box-ordinal-group/index.html deleted file mode 100644 index 3c3963b7e6..0000000000 --- a/files/pt-br/web/css/-moz-box-ordinal-group/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: '-moz-box-ordinal-group' -slug: Web/CSS/-moz-box-ordinal-group -translation_of: Web/CSS/box-ordinal-group -translation_of_original: Web/CSS/-moz-box-ordinal-group ---- -

{{CSSRef}}{{Warning("Essa propriedade é parte do projeto do módulo original do CSS Flexible Box Layout, e foi substituído em projetos recentes.")}}

- -

Veja Flexbox para mais informações do que você deveria usar ao invés dessa propriedade.

- -

Sumário

- -

Indica o grupo ordinal ao qual o elemento percente. Elementos com um grupo ordinal menor são mostrados antes daqueles com grupo ordinal maior.

- -

Valores

- -

Os valores devem ser inteiros maiores que zero. O valor padrão para essa propriedade é 1.

- -

Exemplos

- -
<style type="text/css">
-  #Flexbox {
-    display: -ms-box;
-    display: -moz-box;
-    display: -webkit-box;
-  }
-
-  #text1 {
-    background: red;
-    -ms-box-ordinal-group: 4;
-    -moz-box-ordinal-group: 4;
-    -webkit-box-ordinal-group: 4;
-  }
-
-  #text2 {
-    background: green;
-    -ms-box-ordinal-group: 3;
-    -moz-box-ordinal-group: 3;
-    -webkit-box-ordinal-group: 3;
-  }
-
-  #text3 {
-    background: blue;
-    -ms-box-ordinal-group: 2;
-    -moz-box-ordinal-group: 2;
-    -webkit-box-ordinal-group: 2;
-  }
-
-  #text4 {
-    background: orange;
-  }
-</style>
-
-<div id="Flexbox">
-  <div id="text1">text 1</div>
-  <div id="text2">text 2</div>
-  <div id="text3">text 3</div>
-  <div id="text4">text 4</div>
-</div>
-
diff --git a/files/pt-br/web/css/-moz-cell/index.html b/files/pt-br/web/css/-moz-cell/index.html deleted file mode 100644 index 6e5b44d286..0000000000 --- a/files/pt-br/web/css/-moz-cell/index.html +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: '-moz-cell' -slug: Web/CSS/-moz-cell -translation_of: Web/CSS/cursor -translation_of_original: 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/web/css/actual_value/index.html b/files/pt-br/web/css/actual_value/index.html new file mode 100644 index 0000000000..b7f9307a58 --- /dev/null +++ b/files/pt-br/web/css/actual_value/index.html @@ -0,0 +1,34 @@ +--- +title: Valor atual +slug: Web/CSS/Valor_atual +translation_of: Web/CSS/actual_value +--- +
{{CSSRef}}
+ +

The actual value of a CSS property is the used value of that property after any necessary approximations have been applied. For example, a user agent that can only render borders with a whole-number pixel width may round the thickness of the border to the nearest integer.

+ +

Especificações

+ + + + + + + + + + + + + + + + +
EspecificaçõesStatusComentario
{{SpecName('CSS2.1', 'cascade.html#actual-value', 'actual value')}}{{Spec2('CSS2.1')}}Definição inicial
+ +

Veja também

+ + diff --git a/files/pt-br/web/css/attribute_selectors/index.html b/files/pt-br/web/css/attribute_selectors/index.html new file mode 100644 index 0000000000..88881a61ea --- /dev/null +++ b/files/pt-br/web/css/attribute_selectors/index.html @@ -0,0 +1,158 @@ +--- +title: Seletor de atributos +slug: Web/CSS/Seletor_de_atributos +translation_of: Web/CSS/Attribute_selectors +--- +
{{CSSRef}}
+ +

O seletor de atributos combina elementos baseado no valor de um atributo dado.

+ +
/* <a> elementos com um atributo de título  */
+a[title] {
+  color: purple;
+}
+
+/* <a> elementos combinando com um href "https://example.org" */
+a[href="https://example.org"] {
+  color: green;
+}
+
+/* <a> elementos com um href contendo "example" */
+a[href*="example"] {
+  font-size: 2em;
+}
+
+/* <a> elementos com href terminando em ".org" */
+a[href$=".org"] {
+  font-style: italic;
+}
+ +
+
[attr]
+
Representa um elemento com atributo de nome attr.
+
[attr=value]
+
Representa um elemento com um atributo de nome attr, o qual o valor é  exatamente  value.
+
[attr~=value]
+
Representa um elemento com um atributo de nome attr, o qual value é  uma lista de palavras separadas por espaços, e uma dessas é  exatamente  value.
+
[attr|=value]
+
Representa um elemento com um atributo de nome attr  o qual o valor pode ser exatamente value ou pode começar com value imediatamente seguido por hífen - (U+002D). Isso somente é usado para linguagens que combinam sub-códigos.
+
[attr^=value]
+
Representa um elemento com um atributo com nome attr que tem um valor prefixado (precedido) por value.
+
[attr$=value]
+
Representa um elemento com um atributo de nome attr que  tem como sufixo (seguido) por value.
+
[attr*=value]
+
Representa um elemento com um atributo de nome attr o qual valor contém ao menos uma ocorrência de value contido na string.
+
[attr operator value i]
+
Adiciona um i (ou I) antes do fechamento das chaves {}, faz com que o valor seja comparado sem levar em conta caixa alta ou caixa baixa(para caracteres dentro da faixa ASCII).
+
+ +

Exemplos

+ + + +

CSS

+ +
a {
+  color: blue;
+}
+
+/* Links internos, começando com "#" */
+a[href^="#"] {
+  background-color: gold;
+}
+
+/* Links com "example" em qualquer lugar da URL */
+a[href*="example"] {
+  background-color: silver;
+}
+
+/* Links com "insensitive" em qualquer lugar da URL,
+   independentemente da capitalização */
+a[href*="insensitive" i] {
+  color: cyan;
+}
+
+/* Links com final ".org" */
+a[href$=".org"] {
+  color: red;
+}
+
+ +

HTML

+ +
<ul>
+  <li><a href="#internal">Internal link</a></li>
+  <li><a href="http://example.com">Example link</a></li>
+  <li><a href="#InSensitive">Insensitive internal link</a></li>
+  <li><a href="http://example.org">Example org link</a></li>
+</ul>
+ +

Resultado

+ +

{{EmbedLiveSample('Links')}}

+ +

Languages

+ +

CSS

+ +
/* Todas divs com um atributo `lang` em negrito. */
+div[lang] { font-weight: bold; }
+/* Todas divs com US English em azul (blue). */
+div[lang~="en-us"] { color: blue; }
+/* Todas divs onde Portuguese esta em verde (green). */
+div[lang="pt"] { color: green; }
+/* Todas divs onde Chinese esta em vermelho (red), Simplificado para (zh-CN) ou tradicional (zh-TW). */
+div[lang|="zh"] { color: red; }
+/* Todas divs com Traditional Chinese `data-lang` que é purple. */
+/* Nota: Você também poderia usar atributos separados por hífen com aspas duplas */
+div[data-lang="zh-TW"] { color: purple; }
+
+ +

 

+ +

HTML

+ +
<div lang="en-us en-gb en-au en-nz">Hello World!</div>
+<div lang="pt">Olá Mundo!</div>
+<div lang="zh-CN">世界您好！</div>
+<div lang="zh-TW">世界您好！</div>
+<div data-lang="zh-TW">?世界您好！</div>
+ +

Resultado

+ +

{{EmbedLiveSample('Languages')}}

+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Selectors', '#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS4 Selectors')}}Adiciona um modificador para a seleção do valor do atributo ASCII 
{{SpecName('CSS3 Selectors', '#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS2.1')}}Definição Inicial
+ +

Browser compatibilidade

+ + + +

{{Compat("css.selectors.attribute")}}

diff --git a/files/pt-br/web/css/box-ordinal-group/index.html b/files/pt-br/web/css/box-ordinal-group/index.html new file mode 100644 index 0000000000..3c3963b7e6 --- /dev/null +++ b/files/pt-br/web/css/box-ordinal-group/index.html @@ -0,0 +1,60 @@ +--- +title: '-moz-box-ordinal-group' +slug: Web/CSS/-moz-box-ordinal-group +translation_of: Web/CSS/box-ordinal-group +translation_of_original: Web/CSS/-moz-box-ordinal-group +--- +

{{CSSRef}}{{Warning("Essa propriedade é parte do projeto do módulo original do CSS Flexible Box Layout, e foi substituído em projetos recentes.")}}

+ +

Veja Flexbox para mais informações do que você deveria usar ao invés dessa propriedade.

+ +

Sumário

+ +

Indica o grupo ordinal ao qual o elemento percente. Elementos com um grupo ordinal menor são mostrados antes daqueles com grupo ordinal maior.

+ +

Valores

+ +

Os valores devem ser inteiros maiores que zero. O valor padrão para essa propriedade é 1.

+ +

Exemplos

+ +
<style type="text/css">
+  #Flexbox {
+    display: -ms-box;
+    display: -moz-box;
+    display: -webkit-box;
+  }
+
+  #text1 {
+    background: red;
+    -ms-box-ordinal-group: 4;
+    -moz-box-ordinal-group: 4;
+    -webkit-box-ordinal-group: 4;
+  }
+
+  #text2 {
+    background: green;
+    -ms-box-ordinal-group: 3;
+    -moz-box-ordinal-group: 3;
+    -webkit-box-ordinal-group: 3;
+  }
+
+  #text3 {
+    background: blue;
+    -ms-box-ordinal-group: 2;
+    -moz-box-ordinal-group: 2;
+    -webkit-box-ordinal-group: 2;
+  }
+
+  #text4 {
+    background: orange;
+  }
+</style>
+
+<div id="Flexbox">
+  <div id="text1">text 1</div>
+  <div id="text2">text 2</div>
+  <div id="text3">text 3</div>
+  <div id="text4">text 4</div>
+</div>
+
diff --git a/files/pt-br/web/css/box_model/index.html b/files/pt-br/web/css/box_model/index.html deleted file mode 100644 index 8c0db35cf6..0000000000 --- a/files/pt-br/web/css/box_model/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: Box model -slug: Web/CSS/box_model -translation_of: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model ---- -

Resumo

- -

Em uma página WEB, cada elemento é representado como um box retangular. Determinar o tamanho, propriedades - como sua cor, fundo, estilo das bordas - e a posição desses boxes é o objetivo do mecanismo de renderização.

- -

No CSS, cada um desses boxes retangulares é descrita usando o box model padrão. Este modelo descreve o conteúdo do espaço ocupado por um elemento. Cada box possui 4 edges: margin edge, border edge, padding edge e content edge.

- -

CSS Box model

- -

A área de conteúdo (content area) é a área ocupada pelo conteúdo real do elemento. Ele frequentamente possui um fundo, uma cor de fonte ou uma imagem (nessa ordem, uma imagem opaca esconde a cor de fundo) e é localizada dentro do content edge; suas dimensões são a largura do conteúdo, ou largura do box de conteúdo, e altura do conteúdo, ou altura do box de conteúdo.

- -

Se a propriedade CSS {{ cssxref("box-sizing") }} está configurada como padrão, as propriedades CSS {{ cssxref("width") }}, {{ cssxref("min-width") }}, {{ cssxref("max-width") }}, {{ cssxref("height") }}, {{ cssxref("min-height") }} e {{ cssxref("max-height") }} controlam o tamanho do conteúdo.

- -

A área de preenchimento (padding area) estende-se para a borda em torno do enchimento. Quando a área de conteúdo tem um fundo, cor ou imagem, isso será estendido para a área de preenchimento, por esse motivo, você pode pensar o preenchimento como a extensão do conteúdo. O preenchimento está localizado dentro do padding edge, e suas dimensões são a largura do padding-box e a altura do padding-box.

- -

O espaço entre os edges de preenchimento e conteúdo podem ser controlados utilizando as seguintes propriedades CSS {{ cssxref("padding-top") }}, {{ cssxref("padding-right") }}, {{ cssxref("padding-bottom") }}, {{ cssxref("padding-left") }} e na forma generalizada {{ cssxref("padding") }}.

- -

A área de borda (border area) estende a área de preenchimento para a área que contém as bordas. Esta é a área de dentro do border edge, e suas dimensões são a largura e a altura do border-box. Esta área depende do tamanho da borda que está definido pela propriedade {{ cssxref("border-width") }} ou pela propriedade {{ cssxref("border") }}.

- -

A área de margem (margin area) estende a área de borda com um espaço vazio utilizado para separar o elemento dos elementos vizinhos. Esta é a área de dentro do margin edge, e suas dimensões são a largura e a altura do margin-box.

- -

O tamanho da área de margem é controlada utilizando as seguintes propriedades CSS {{ cssxref("margin-top") }}, {{ cssxref("margin-right") }}, {{ cssxref("margin-bottom") }}, {{ cssxref("margin-left") }} e na forma generalizada {{ cssxref("margin") }}.

- -

Quando ocorre um colapso de margens, a área de margem não está claramente definida, uma vez que as margens são compartilhadas entre os boxes.

- -

Finalmente, note que, para elementos não substituídos inline, o total de espaço ocupado (para a altura da linha) é determinado pela propriedade {{ cssxref('line-height') }}, mesmo que a borda e o padding aparecerem visualmente em torno do conteúdo.

- -

Especificação

- - - - - - - - - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{ SpecName("CSS2.1","box.html#box-dimensions")}}{{ Spec2('CSS2.1') }}Embora mais precisamente formulada, não existem mudanças práticas
{{ SpecName("CSS1","#formatting-model")}}{{ Spec2('CSS1') }} 
- -

Veja também

- - diff --git "a/files/pt-br/web/css/coment\303\241rio/index.html" "b/files/pt-br/web/css/coment\303\241rio/index.html" deleted file mode 100644 index dabb46a04f..0000000000 --- "a/files/pt-br/web/css/coment\303\241rio/index.html" +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: Comentário -slug: Web/CSS/Comentário -tags: - - CSS - - CSS Reference - - Iniciante -translation_of: Web/CSS/Comments ---- -
ios{{CSSRef}}
- -

Sumário

- -

Comments are used to add explanatory notes or prevent the browser from interpreting parts of the style sheet.

- -

Comments can be placed where ever white space is allowed within a style sheet.

- -

Sintaxe

- -
/* Comment */
- -

Exemplos

- -
/* A single line comment */
-
-/*
-A comment
-which stretches
-over several
-lines
-*/
-
- -

Notas

- -

The /* */ comment syntax is used for both single and multi line comments. There is no other way to specify comments in external style sheets. However, when using the <style> element, you may use <!-- --> to hide CSS from older browsers, although this is not recommended. As in most programming languages that use the /* */ comment syntax, comments cannot be nested. In other words, the first instance of */ that follows an instance of /* closes the comment.

- -

Especificações

- - - -

Veja também

- - diff --git a/files/pt-br/web/css/comments/index.html b/files/pt-br/web/css/comments/index.html new file mode 100644 index 0000000000..dabb46a04f --- /dev/null +++ b/files/pt-br/web/css/comments/index.html @@ -0,0 +1,49 @@ +--- +title: Comentário +slug: Web/CSS/Comentário +tags: + - CSS + - CSS Reference + - Iniciante +translation_of: Web/CSS/Comments +--- +
ios{{CSSRef}}
+ +

Sumário

+ +

Comments are used to add explanatory notes or prevent the browser from interpreting parts of the style sheet.

+ +

Comments can be placed where ever white space is allowed within a style sheet.

+ +

Sintaxe

+ +
/* Comment */
+ +

Exemplos

+ +
/* A single line comment */
+
+/*
+A comment
+which stretches
+over several
+lines
+*/
+
+ +

Notas

+ +

The /* */ comment syntax is used for both single and multi line comments. There is no other way to specify comments in external style sheets. However, when using the <style> element, you may use <!-- --> to hide CSS from older browsers, although this is not recommended. As in most programming languages that use the /* */ comment syntax, comments cannot be nested. In other words, the first instance of */ that follows an instance of /* closes the comment.

+ +

Especificações

+ + + +

Veja também

+ + diff --git a/files/pt-br/web/css/computed_value/index.html b/files/pt-br/web/css/computed_value/index.html new file mode 100644 index 0000000000..a4932b8d40 --- /dev/null +++ b/files/pt-br/web/css/computed_value/index.html @@ -0,0 +1,56 @@ +--- +title: Valor Computado +slug: Web/CSS/valor_computado +tags: + - CSS + - Guía + - Iniciante + - Web +translation_of: Web/CSS/computed_value +--- +
{{cssref}}
+ +

The computed value of a CSS property is computed from the specified value by:

+ + + +

The computation needed to reach the computed value for the property typically involves converting relative values (such as those in em units or percentages) to absolute values.

+ +

For example, if an element has specified values font-size: 16px and padding-top: 2em, then the computed value of padding-top is 32px (double the font size).

+ +

However, for some properties (those where percentages are relative to something that may require layout to determine, such as width, margin-right, text-indent, and top), percentage specified values turn into percentage computed values. Additionally, unitless numbers specified on the line-height property become the computed value, as specified. These relative values that remain in the computed value become absolute when the used value is determined.

+ +

The main use of the computed value (other than as a step between the specified value and used value) is inheritance, including the {{cssxref("inherit")}} keyword.

+ +

Notas

+ +

The {{domxref("Window.getComputedStyle", "getComputedStyle()")}} DOM API returns the {{cssxref("resolved_value", "resolved value")}}, which may either be the {{cssxref("computed_value", "computed value")}} or the {{cssxref("used_value", "used value")}}, depending on the property.

+ +

Especificações

+ + + + + + + + + + + + + + + + +
EspecificaçõesStatusComentário
{{SpecName("CSS2.1", "cascade.html#computed-value", "computed value")}}{{Spec2("CSS2.1")}}Especificação inicial
+ +

Veja também

+ + diff --git "a/files/pt-br/web/css/css_animations/usando_anima\303\247\303\265es_css/index.html" "b/files/pt-br/web/css/css_animations/usando_anima\303\247\303\265es_css/index.html" deleted file mode 100644 index 4bdd91ad9f..0000000000 --- "a/files/pt-br/web/css/css_animations/usando_anima\303\247\303\265es_css/index.html" +++ /dev/null @@ -1,332 +0,0 @@ ---- -title: Usando animações CSS -slug: Web/CSS/CSS_Animations/Usando_animações_CSS -tags: - - Advanced - - CSS - - CSS Animations - - Example - - Experimental - - Guide -translation_of: Web/CSS/CSS_Animations/Using_CSS_animations ---- -

{{SeeCompatTable}}{{CSSRef}}

- -

Animações CSS tornam possível animar transições de um estilo CSS para outro. Animações se consistem de dois componentes: um estilo descrevendo a animação e um set de keyframes que indicam o estado final e inicial do estilo CSS da animação, bem como possíveis waypoints intermediários ao longo do caminho.

- -

Existem três vantagens chave para animações CSS além das técnicas tradicionais de animação dirigidas por script:

- -
    -
  1. São de fácil utilização para animações simples; você pode criá-las sem mesmo ter que conhecer JavaScript.
    2. -
  2. As animações executam bem, mesmo sobre moderada carga do sistema. Animações simples podem normalmente ser executadas precariamente em JavaScript (a não ser que sejam bem feitas). A ferramenta de renderização pode usar frame-skipping e outras técnicas para manter a performance o mais estável possível.
    3. -
  3. Deixando o navegador controlar a sequência de animação permite ao navegador otimizar a performance e eficiência em, por exemplo, reduzir a frequência de update de animações correndo em abas que não estão visíveis no momento.
    4. -
- -

Configurando a animação

- -

Para criar uma sequência de animação CSS, você estiliza o elemento que deseja animar com a propriedade {{ cssxref("animation") }} ou suas sub-propriedades. Isso permite que você configure a sincronização da animação, bem como outros detalhes de como a de como a sequência de animação deveria progredir. Isso não configura a aparência atual da animação, que é feita usando a regra com parênteses (at-rule) {{ cssxref("@keyframes") }} como descrito em {{ anch("Defining the animation sequence using keyframes") }} abaixo.

- -

As sub-propriedades da propriedade {{cssxref("animation")}} são:

- -
-
{{ cssxref("animation-delay") }}
-
Configura o delay entre o tempo em que o elemento é carregado e o inicio da sequência de animação.
-
{{ cssxref("animation-direction") }}
-
Configura se a animação deve ou nao alternar a direção em cada execução durante a sequência ou voltar ao ponto inicial e se repetir.
-
{{ cssxref("animation-duration") }}
-
Configura o tempo que uma animação deveria levar para completar um ciclo.
-
{{ cssxref("animation-iteration-count") }}
-
Configura o numero de vezes que uma animação deveria se repetir; você pode especificar infinito para repetir a animação indefinidamente.
-
{{ cssxref("animation-name") }}
-
Especifica o nome da regra com parênteses (at-rule) {{ cssxref("@keyframes") }} at-rule descrevendo os keyframes da animação.
-
{{ cssxref("animation-play-state") }}
-
Permite voce pausar e resumir a sequência da animação.
-
{{ cssxref("animation-timing-function") }}
-
Configura a sincronização da animação; que é, como a animação transita por keyframes, por estabilizar curvas de aceleração.
-
{{ cssxref("animation-fill-mode") }}
-
Configura que valores são aplicados pela animação antes e depois de se executar.
-
- -

Definindo a sequência de animação usando keyframes

- -

Uma vez que você configurou a sincronização da animação, você precisa definir a aparência da animação. Isso é feito por estabelecer duas ou mais keyframes usando a regra com parênteses (at-rule) {{cssxref("@keyframes")}}. Cada keyframe descreve como o elemento animado deveria se renderizar a um tempo dado durante a sequência de animação.

- -

Como a sincronização da animação é definida por um estilo CSS que configura a animação, keyframes usam uma {{cssxref("percentage")}} para indicar o tempo durante a sequência de animação que eles fazem parte. 0% indica o primeiro momento da sequência de animação, enquanto 100% indica o estado final da animação. Esses dois tempos devem ser especificados para que o navegador então saiba onde a animação deve começar e parar; por serem tão importantes, esses dois tempos tem expressões equivalentes especiais: from e to.

- -

Você pode opcionalmente incluir keyframes adicionais que descrevem passos intermediários ao longo do caminho do ponto inicial ao ponto final da animação.

- -

Exemplos

- -
Nota Os exemplos aqui não usam nenhum prefixo nas propriedades de animação CSS. Navegadores mais antigos podem precisar de prefixos; os exemplos ao vivo que você pode clicar pra ver em seu navegadores também incluem as versões prefixadas -webkit.
- -

Fazendo o texto deslizar através da janela do navegador

- -

Esse exemplo simples estiliza o elemento {{HTMLElement("p")}} onde o elemento então desliza para dentro vindo de fora da lateral direita da janela do navegador.

- -

Perceba que animações como essa podem fazer com que a página se torne mais larga que a janela do navegador. Para evitar esse problema coloque o elemento a ser animado dentro de um container, e atribua {{cssxref("overflow")}}:hidden ao container.

- -
p {
-  animation-duration: 3s;
-  animation-name: slidein;
-}
-
-@keyframes slidein {
-  from {
-    margin-left: 100%;
-    width: 300%
-  }
-
-  to {
-    margin-left: 0%;
-    width: 100%;
-  }
-}
-
- -

O estilo para o elemento {{ HTMLElement("p") }} aqui especifica que a animação deveria levar 3 segundos para executar do início ao fim, usando a propriedade {{cssxref("animation-duration")}}, e que o nome da regra com parênteses (at-rule){{cssxref("@keyframes")}} definindo os keyframes para a sequência de animação é nomeado por "slidein".

- -

Se quiséssemos quaisquer estilização customizada no elemento {{ HTMLElement("p") }} para aparecer em navegadores que não suportam animações CSS, incluiríamos aqui também; no entanto, nesse caso não queremos nenhuma estilização customizada a não ser o efeito da animação.

- -

Os keyframes são definidos utilizando-se as regras{{cssxref("@keyframes") }}. Neste caso, utilizamos apenas dois keyframes. O primeiro ocorre no progresso de 0% (ou seja, o primeiro keyframe da animação, através do pseudônimo from). Nesta etapa, configuramos a margem esquerda do elemento para ser 100% - quer dizer, como a margem está à esquerda e com valor 100%, o elemento irá se deslocar para o seu limite, ou seja, para a parte direita – e sua largura será de 300%, ou seja, 3 vezes a largura do seu tamanho original. Isto faz com que o elemento, em seu primeiro frame da animação, seja “empurrado” para fora do limite da parte direita da janela do navegador.

- -

O segundo (e último) keyframe ocorre na etapa 100% do progresso (ou seja, o último keyframe da animação, através do pseudônimo to). A margem esquerda está com valor de 0% e a largura do elemento está com valor de 100%. Isto resulta na animação do elemento {{ HTMLElement("p") }}, que entra gradativamente na área de conteúdo até atingir uma margem esquerda de 0%.

- -
 
- -

A Caterpillar e a Alice se olharam por algum tempo em silêncio: Finalmente, a Caterpillar tirou o narguilé da boca e dirigiu-se Ela com uma voz lenta e sonolenta.

- -

{{EmbedLiveSample("Making_text_slide_across_the_browser_window","100%","250")}}

- -

Adicionando outro keyframe

- -

Vamos adicionar outro keyframe à animação do exemplo anterior. Digamos que nós queremos que o tamanho da fonte aumente durante o movimento da direita para a esquerda por um determinado momento, e que depois ele reduzisse ao seu tamanho original. Você precisaria simplesmente adicionar este keyframe:

- -
75% {
-  font-size: 300%;
-  margin-left: 25%;
-  width: 150%;
-}
-
- - - - - -

A Caterpillar e a Alice se olharam por algum tempo em silêncio: Finalmente, a Caterpillar tirou o narguilé da boca e dirigiu-se Ela com uma voz lenta e sonolenta.

- -

Isso indica ao navegador que até atingir a etapa 75% do progresso da sequência da animação o elemento deve ter 25% no valor da sua margem esquerda e sua largura deve ser de 150%.

- -

{{EmbedLiveSample("Adicionando_outro_keyframe","100%","250")}}

- -

Faça repetir-se

- -

Para fazer a animação se repetir, simplesmente use a propriedade{{ cssxref("animation-iteration-count") }} para indicar a quantidade de vezes que a animação deve se repetir. Neste caso, vamos usar infinite para que a animação se repita indefinidamente:

- -
p {
-  animation-duration: 3s;
-  animation-name: slidein;
-  animation-iteration-count: infinite;
-}
-
- - - - - -

A Caterpillar e a Alice se olharam por algum tempo em silêncio: Finalmente, a Caterpillar tirou o narguilé da boca e dirigiu-se Ela com uma voz linda e sonolenta.

- -

{{EmbedLiveSample("Faça_repetir-se","100%","250")}}

- -

Fazendo a animação se mover para trás e para frente

- -

Com o exemplo anterior, fizemos a animação se repetir, mas é muito estranho tê-la pulando lá do início toda vez que a animação inicia. O que nós realmente queremos é que a animação se mova para trás e para frente por toda tela. Isso é facilmente realizado se adicionarmos o valor alternate à propriedade {{cssxref("animation-direction")}}:

- -
p {
-  animation-duration: 3s;
-  animation-name: slidein;
-  animation-iteration-count: infinite;
-  animation-direction: alternate;
-}
-
- - - -
<p> A Lagarta e Alice olharam-se por algum tempo em silêncio:
-finalmente, a Lagarta tirou o narguilé da boca e dirigiu-se a
-ela com uma voz lânguida e sonolenta.</p>
- -

{{EmbedLiveSample("Fazendo_a_animação_se_mover_para_trás_e_para_frente","100%","250")}}

- -

Usando eventos de animação

- -

Você pode ter controle adicional sobre animações -- como também informações úteis sobre elas -- através do uso de eventos de animação. Esses eventos, representados pelo objeto {{ domxref("event/AnimationEvent", "AnimationEvent") }} , podem ser usados para detectar quando animações iniciam, terminam, e começam uma nova iteração. Cada evento inclui o tempo no qual ele ocorreu como também o nome da animação que lançou o evento.

- -

Nós vamos modificar o exemplo de deslizamento de texto para gerar alguma informação sobre cada evento de animação quando ele ocorrer, para que possamos perceber como eles funcionam.

- -

Adicionando o CSS

- -

Nós começamos criando o CSS para a animação. Essa animação vai durar por 3 segundos, se chamar "slidein", repetir 3 vezes, e alternar a direção cada vez. No {{ cssxref("@keyframes") }}, a largura (width) e a margem esquerda (margin-left) são manipulados para fazer o elemento deslizar na tela.

- -
.slidein {
-  -moz-animation-duration: 3s;
-  -webkit-animation-duration: 3s;
-  animation-duration: 3s;
-  -moz-animation-name: slidein;
-  -webkit-animation-name: slidein;
-  animation-name: slidein;
-  -moz-animation-iteration-count: 3;
-  -webkit-animation-iteration-count: 3;
-  animation-iteration-count: 3;
-  -moz-animation-direction: alternate;
-  -webkit-animation-direction: alternate;
-  animation-direction: alternate;
-}
-
-@-moz-keyframes slidein {
-  from {
-    margin-left:100%;
-    width:300%
-  }
-
-  to {
-    margin-left:0%;
-    width:100%;
-  }
-}
-
-@-webkit-keyframes slidein {
-  from {
-    margin-left:100%;
-    width:300%
-  }
-
-  to {
-   margin-left:0%;
-   width:100%;
- }
-}
-
-@keyframes slidein {
-  from {
-    margin-left:100%;
-    width:300%
-  }
-
-  to {
-   margin-left:0%;
-   width:100%;
- }
-}
- -

Adicionando animação a lista de eventos

- -

Nós vamos usar o código JavaScript para escutar todos três possíveis eventos de animação. Esse código configura nossos escutadores de evento; nós o chamamos quando o documento é primeiramente carregado para configurar as coisas.

- -
var e = document.getElementById("watchme");
-e.addEventListener("animationstart", listener, false);
-e.addEventListener("animationend", listener, false);
-e.addEventListener("animationiteration", listener, false);
-
-e.className = "slidein";
-
-
- -

Isso é simplesmente código padrão; você pode ter detalhes sobre como ele funciona na documentação para {{ domxref("element.addEventListener()") }}. A última coisa que este código faz é atribuir a classe no elemento o qual estaremos animando para "deslizar" (slidein); nós fazemos isso para iniciar a animação.

- -

Por que? Porque o evento animationstart dispara assim que a animação começa, e no nosso caso, isso acontece antes do nosso código rodar. Então nós mesmos vamos iniciar a animação através de atribuição da classe do elemento para o estilo que é animado depois do ocorrido.

- -

Recebendo os eventos

- -

Os eventos são entregues à função listener(), a qual é mostrada abaixo.

- -
function listener(e) {
-  var l = document.createElement("li");
-  switch(e.type) {
-    case "animationstart":
-      l.innerHTML = "Started: elapsed time is " + e.elapsedTime;
-      break;
-    case "animationend":
-      l.innerHTML = "Ended: elapsed time is " + e.elapsedTime;
-      break;
-    case "animationiteration":
-      l.innerHTML = "New loop started at time " + e.elapsedTime;
-      break;
-  }
-  document.getElementById("output").appendChild(l);
-}
-
- -

Esse código também é bem simples. Ele simplemente olha no {{ domxref("event.type") }} para determinar qual tipo de evento de animação ocorreu, então adiciona uma nota apropriada no {{ HTMLElement("ul") }} (lista não ordenada) que estamos usando para logar esses eventos.

- -

A saída, quando tudo foi dito e feito, parece com algo assim:

- - - -

Perceba que os tempos são bem próximos, mas não exatamente iguais, àqueles esperados dado o tempo estabelecido quando a animação foi configurada. Perceba também que após a ultima iteração da animação, o evento animationiteration não é enviado; ao invés disso, o evento animationend é enviado.

- -

O HTML

- -

Apenas por questão de completude, aqui está o HTML que exibe o conteúdo da pagina, incluindo a lista na qual o script insere informação sobre os eventos recebidos:

- -
 
- -

Veja-me mover

- -

Este exemplo mostra como usar animações CSS para fazer o elemento H1 se mover pela página.

- -

Além disso, emitimos algum texto sempre que um evento de animação dispara, para que você possa vê-los em ação.

- - - -

{{EmbedLiveSample('Using_animation_events', '600', '300')}}

- -

Veja também

- - diff --git a/files/pt-br/web/css/css_animations/using_css_animations/index.html b/files/pt-br/web/css/css_animations/using_css_animations/index.html new file mode 100644 index 0000000000..4bdd91ad9f --- /dev/null +++ b/files/pt-br/web/css/css_animations/using_css_animations/index.html @@ -0,0 +1,332 @@ +--- +title: Usando animações CSS +slug: Web/CSS/CSS_Animations/Usando_animações_CSS +tags: + - Advanced + - CSS + - CSS Animations + - Example + - Experimental + - Guide +translation_of: Web/CSS/CSS_Animations/Using_CSS_animations +--- +

{{SeeCompatTable}}{{CSSRef}}

+ +

Animações CSS tornam possível animar transições de um estilo CSS para outro. Animações se consistem de dois componentes: um estilo descrevendo a animação e um set de keyframes que indicam o estado final e inicial do estilo CSS da animação, bem como possíveis waypoints intermediários ao longo do caminho.

+ +

Existem três vantagens chave para animações CSS além das técnicas tradicionais de animação dirigidas por script:

+ +
    +
  1. São de fácil utilização para animações simples; você pode criá-las sem mesmo ter que conhecer JavaScript.
    2. +
  2. As animações executam bem, mesmo sobre moderada carga do sistema. Animações simples podem normalmente ser executadas precariamente em JavaScript (a não ser que sejam bem feitas). A ferramenta de renderização pode usar frame-skipping e outras técnicas para manter a performance o mais estável possível.
    3. +
  3. Deixando o navegador controlar a sequência de animação permite ao navegador otimizar a performance e eficiência em, por exemplo, reduzir a frequência de update de animações correndo em abas que não estão visíveis no momento.
    4. +
+ +

Configurando a animação

+ +

Para criar uma sequência de animação CSS, você estiliza o elemento que deseja animar com a propriedade {{ cssxref("animation") }} ou suas sub-propriedades. Isso permite que você configure a sincronização da animação, bem como outros detalhes de como a de como a sequência de animação deveria progredir. Isso não configura a aparência atual da animação, que é feita usando a regra com parênteses (at-rule) {{ cssxref("@keyframes") }} como descrito em {{ anch("Defining the animation sequence using keyframes") }} abaixo.

+ +

As sub-propriedades da propriedade {{cssxref("animation")}} são:

+ +
+
{{ cssxref("animation-delay") }}
+
Configura o delay entre o tempo em que o elemento é carregado e o inicio da sequência de animação.
+
{{ cssxref("animation-direction") }}
+
Configura se a animação deve ou nao alternar a direção em cada execução durante a sequência ou voltar ao ponto inicial e se repetir.
+
{{ cssxref("animation-duration") }}
+
Configura o tempo que uma animação deveria levar para completar um ciclo.
+
{{ cssxref("animation-iteration-count") }}
+
Configura o numero de vezes que uma animação deveria se repetir; você pode especificar infinito para repetir a animação indefinidamente.
+
{{ cssxref("animation-name") }}
+
Especifica o nome da regra com parênteses (at-rule) {{ cssxref("@keyframes") }} at-rule descrevendo os keyframes da animação.
+
{{ cssxref("animation-play-state") }}
+
Permite voce pausar e resumir a sequência da animação.
+
{{ cssxref("animation-timing-function") }}
+
Configura a sincronização da animação; que é, como a animação transita por keyframes, por estabilizar curvas de aceleração.
+
{{ cssxref("animation-fill-mode") }}
+
Configura que valores são aplicados pela animação antes e depois de se executar.
+
+ +

Definindo a sequência de animação usando keyframes

+ +

Uma vez que você configurou a sincronização da animação, você precisa definir a aparência da animação. Isso é feito por estabelecer duas ou mais keyframes usando a regra com parênteses (at-rule) {{cssxref("@keyframes")}}. Cada keyframe descreve como o elemento animado deveria se renderizar a um tempo dado durante a sequência de animação.

+ +

Como a sincronização da animação é definida por um estilo CSS que configura a animação, keyframes usam uma {{cssxref("percentage")}} para indicar o tempo durante a sequência de animação que eles fazem parte. 0% indica o primeiro momento da sequência de animação, enquanto 100% indica o estado final da animação. Esses dois tempos devem ser especificados para que o navegador então saiba onde a animação deve começar e parar; por serem tão importantes, esses dois tempos tem expressões equivalentes especiais: from e to.

+ +

Você pode opcionalmente incluir keyframes adicionais que descrevem passos intermediários ao longo do caminho do ponto inicial ao ponto final da animação.

+ +

Exemplos

+ +
Nota Os exemplos aqui não usam nenhum prefixo nas propriedades de animação CSS. Navegadores mais antigos podem precisar de prefixos; os exemplos ao vivo que você pode clicar pra ver em seu navegadores também incluem as versões prefixadas -webkit.
+ +

Fazendo o texto deslizar através da janela do navegador

+ +

Esse exemplo simples estiliza o elemento {{HTMLElement("p")}} onde o elemento então desliza para dentro vindo de fora da lateral direita da janela do navegador.

+ +

Perceba que animações como essa podem fazer com que a página se torne mais larga que a janela do navegador. Para evitar esse problema coloque o elemento a ser animado dentro de um container, e atribua {{cssxref("overflow")}}:hidden ao container.

+ +
p {
+  animation-duration: 3s;
+  animation-name: slidein;
+}
+
+@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+
+ +

O estilo para o elemento {{ HTMLElement("p") }} aqui especifica que a animação deveria levar 3 segundos para executar do início ao fim, usando a propriedade {{cssxref("animation-duration")}}, e que o nome da regra com parênteses (at-rule){{cssxref("@keyframes")}} definindo os keyframes para a sequência de animação é nomeado por "slidein".

+ +

Se quiséssemos quaisquer estilização customizada no elemento {{ HTMLElement("p") }} para aparecer em navegadores que não suportam animações CSS, incluiríamos aqui também; no entanto, nesse caso não queremos nenhuma estilização customizada a não ser o efeito da animação.

+ +

Os keyframes são definidos utilizando-se as regras{{cssxref("@keyframes") }}. Neste caso, utilizamos apenas dois keyframes. O primeiro ocorre no progresso de 0% (ou seja, o primeiro keyframe da animação, através do pseudônimo from). Nesta etapa, configuramos a margem esquerda do elemento para ser 100% - quer dizer, como a margem está à esquerda e com valor 100%, o elemento irá se deslocar para o seu limite, ou seja, para a parte direita – e sua largura será de 300%, ou seja, 3 vezes a largura do seu tamanho original. Isto faz com que o elemento, em seu primeiro frame da animação, seja “empurrado” para fora do limite da parte direita da janela do navegador.

+ +

O segundo (e último) keyframe ocorre na etapa 100% do progresso (ou seja, o último keyframe da animação, através do pseudônimo to). A margem esquerda está com valor de 0% e a largura do elemento está com valor de 100%. Isto resulta na animação do elemento {{ HTMLElement("p") }}, que entra gradativamente na área de conteúdo até atingir uma margem esquerda de 0%.

+ +
 
+ +

A Caterpillar e a Alice se olharam por algum tempo em silêncio: Finalmente, a Caterpillar tirou o narguilé da boca e dirigiu-se Ela com uma voz lenta e sonolenta.

+ +

{{EmbedLiveSample("Making_text_slide_across_the_browser_window","100%","250")}}

+ +

Adicionando outro keyframe

+ +

Vamos adicionar outro keyframe à animação do exemplo anterior. Digamos que nós queremos que o tamanho da fonte aumente durante o movimento da direita para a esquerda por um determinado momento, e que depois ele reduzisse ao seu tamanho original. Você precisaria simplesmente adicionar este keyframe:

+ +
75% {
+  font-size: 300%;
+  margin-left: 25%;
+  width: 150%;
+}
+
+ + + + + +

A Caterpillar e a Alice se olharam por algum tempo em silêncio: Finalmente, a Caterpillar tirou o narguilé da boca e dirigiu-se Ela com uma voz lenta e sonolenta.

+ +

Isso indica ao navegador que até atingir a etapa 75% do progresso da sequência da animação o elemento deve ter 25% no valor da sua margem esquerda e sua largura deve ser de 150%.

+ +

{{EmbedLiveSample("Adicionando_outro_keyframe","100%","250")}}

+ +

Faça repetir-se

+ +

Para fazer a animação se repetir, simplesmente use a propriedade{{ cssxref("animation-iteration-count") }} para indicar a quantidade de vezes que a animação deve se repetir. Neste caso, vamos usar infinite para que a animação se repita indefinidamente:

+ +
p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+}
+
+ + + + + +

A Caterpillar e a Alice se olharam por algum tempo em silêncio: Finalmente, a Caterpillar tirou o narguilé da boca e dirigiu-se Ela com uma voz linda e sonolenta.

+ +

{{EmbedLiveSample("Faça_repetir-se","100%","250")}}

+ +

Fazendo a animação se mover para trás e para frente

+ +

Com o exemplo anterior, fizemos a animação se repetir, mas é muito estranho tê-la pulando lá do início toda vez que a animação inicia. O que nós realmente queremos é que a animação se mova para trás e para frente por toda tela. Isso é facilmente realizado se adicionarmos o valor alternate à propriedade {{cssxref("animation-direction")}}:

+ +
p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+
+ + + +
<p> A Lagarta e Alice olharam-se por algum tempo em silêncio:
+finalmente, a Lagarta tirou o narguilé da boca e dirigiu-se a
+ela com uma voz lânguida e sonolenta.</p>
+ +

{{EmbedLiveSample("Fazendo_a_animação_se_mover_para_trás_e_para_frente","100%","250")}}

+ +

Usando eventos de animação

+ +

Você pode ter controle adicional sobre animações -- como também informações úteis sobre elas -- através do uso de eventos de animação. Esses eventos, representados pelo objeto {{ domxref("event/AnimationEvent", "AnimationEvent") }} , podem ser usados para detectar quando animações iniciam, terminam, e começam uma nova iteração. Cada evento inclui o tempo no qual ele ocorreu como também o nome da animação que lançou o evento.

+ +

Nós vamos modificar o exemplo de deslizamento de texto para gerar alguma informação sobre cada evento de animação quando ele ocorrer, para que possamos perceber como eles funcionam.

+ +

Adicionando o CSS

+ +

Nós começamos criando o CSS para a animação. Essa animação vai durar por 3 segundos, se chamar "slidein", repetir 3 vezes, e alternar a direção cada vez. No {{ cssxref("@keyframes") }}, a largura (width) e a margem esquerda (margin-left) são manipulados para fazer o elemento deslizar na tela.

+ +
.slidein {
+  -moz-animation-duration: 3s;
+  -webkit-animation-duration: 3s;
+  animation-duration: 3s;
+  -moz-animation-name: slidein;
+  -webkit-animation-name: slidein;
+  animation-name: slidein;
+  -moz-animation-iteration-count: 3;
+  -webkit-animation-iteration-count: 3;
+  animation-iteration-count: 3;
+  -moz-animation-direction: alternate;
+  -webkit-animation-direction: alternate;
+  animation-direction: alternate;
+}
+
+@-moz-keyframes slidein {
+  from {
+    margin-left:100%;
+    width:300%
+  }
+
+  to {
+    margin-left:0%;
+    width:100%;
+  }
+}
+
+@-webkit-keyframes slidein {
+  from {
+    margin-left:100%;
+    width:300%
+  }
+
+  to {
+   margin-left:0%;
+   width:100%;
+ }
+}
+
+@keyframes slidein {
+  from {
+    margin-left:100%;
+    width:300%
+  }
+
+  to {
+   margin-left:0%;
+   width:100%;
+ }
+}
+ +

Adicionando animação a lista de eventos

+ +

Nós vamos usar o código JavaScript para escutar todos três possíveis eventos de animação. Esse código configura nossos escutadores de evento; nós o chamamos quando o documento é primeiramente carregado para configurar as coisas.

+ +
var e = document.getElementById("watchme");
+e.addEventListener("animationstart", listener, false);
+e.addEventListener("animationend", listener, false);
+e.addEventListener("animationiteration", listener, false);
+
+e.className = "slidein";
+
+
+ +

Isso é simplesmente código padrão; você pode ter detalhes sobre como ele funciona na documentação para {{ domxref("element.addEventListener()") }}. A última coisa que este código faz é atribuir a classe no elemento o qual estaremos animando para "deslizar" (slidein); nós fazemos isso para iniciar a animação.

+ +

Por que? Porque o evento animationstart dispara assim que a animação começa, e no nosso caso, isso acontece antes do nosso código rodar. Então nós mesmos vamos iniciar a animação através de atribuição da classe do elemento para o estilo que é animado depois do ocorrido.

+ +

Recebendo os eventos

+ +

Os eventos são entregues à função listener(), a qual é mostrada abaixo.

+ +
function listener(e) {
+  var l = document.createElement("li");
+  switch(e.type) {
+    case "animationstart":
+      l.innerHTML = "Started: elapsed time is " + e.elapsedTime;
+      break;
+    case "animationend":
+      l.innerHTML = "Ended: elapsed time is " + e.elapsedTime;
+      break;
+    case "animationiteration":
+      l.innerHTML = "New loop started at time " + e.elapsedTime;
+      break;
+  }
+  document.getElementById("output").appendChild(l);
+}
+
+ +

Esse código também é bem simples. Ele simplemente olha no {{ domxref("event.type") }} para determinar qual tipo de evento de animação ocorreu, então adiciona uma nota apropriada no {{ HTMLElement("ul") }} (lista não ordenada) que estamos usando para logar esses eventos.

+ +

A saída, quando tudo foi dito e feito, parece com algo assim:

+ + + +

Perceba que os tempos são bem próximos, mas não exatamente iguais, àqueles esperados dado o tempo estabelecido quando a animação foi configurada. Perceba também que após a ultima iteração da animação, o evento animationiteration não é enviado; ao invés disso, o evento animationend é enviado.

+ +

O HTML

+ +

Apenas por questão de completude, aqui está o HTML que exibe o conteúdo da pagina, incluindo a lista na qual o script insere informação sobre os eventos recebidos:

+ +
 
+ +

Veja-me mover

+ +

Este exemplo mostra como usar animações CSS para fazer o elemento H1 se mover pela página.

+ +

Além disso, emitimos algum texto sempre que um evento de animação dispara, para que você possa vê-los em ação.

+ + + +

{{EmbedLiveSample('Using_animation_events', '600', '300')}}

+ +

Veja também

+ + diff --git a/files/pt-br/web/css/css_background_and_borders/border-image_generator/index.html b/files/pt-br/web/css/css_background_and_borders/border-image_generator/index.html new file mode 100644 index 0000000000..d350bce6b5 --- /dev/null +++ b/files/pt-br/web/css/css_background_and_borders/border-image_generator/index.html @@ -0,0 +1,2627 @@ +--- +title: Gerador de Border-image +slug: Web/CSS/Tools/Border-image_generator +tags: + - Alternativas CSS +translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator +--- +

Esta ferramenta pode ser utilizada para gerar o valor {{cssxref("border-image")}} em CSS3.

+ +
+

Border Image Generator

+ +

HTML Content

+ +
    <div id="container">
+
+        <div id="gallery">
+            <div id="image-gallery">
+                <img class="image" src="https://mdn.mozillademos.org/files/6007/border-image-1.png" data-stateID="border1"/>
+                <img class="image" src="https://mdn.mozillademos.org/files/6009/border-image-2.png" data-stateID="border2"/>
+                <img class="image" src="https://mdn.mozillademos.org/files/6011/border-image-3.png" data-stateID="border3"/>
+                <img class="image" src="https://mdn.mozillademos.org/files/6013/border-image-4.png" data-stateID="border4"/>
+                <img class="image" src="https://mdn.mozillademos.org/files/6015/border-image-5.png" data-stateID="border5"/>
+                <img class="image" src="https://mdn.mozillademos.org/files/6017/border-image-6.svg" data-stateID="border6"/>
+            </div>
+        </div>
+
+        <div id="load-actions" class="group section">
+            <div id="toggle-gallery" data-action="hide"> </div>
+            <div id="load-image" class="button"> Upload image </div>
+            <input id="remote-url" type="text" placeholder="Load an image from URL"/>
+            <div id="load-remote" class="button"> </div>
+        </div>
+
+        <div id="general-controls" class="group section">
+            <div class="name"> Control Box </div>
+            <div class="separator"></div>
+            <div class="property">
+                <div class="name">scale</div>
+                <div class="ui-input-slider" data-topic="scale"
+                    data-unit="%" data-max="300" data-sensivity="10">
+                </div>
+            </div>
+            <div class="separator"></div>
+            <div class="property">
+                <div class="name">draggable</div>
+                <div class="ui-checkbox" data-topic='drag-subject'></div>
+            </div>
+            <div class="property right">
+                <div class="name">section height</div>
+                <div class="ui-input-slider" data-topic="preview-area-height"
+                    data-min="400" data-max="1000">
+                </div>
+            </div>
+        </div>
+
+        <div id="preview_section" class="group section">
+            <div id="subject">
+                <div class="guideline" data-axis="Y" data-topic="slice-top"></div>
+                <div class="guideline" data-axis="X" data-topic="slice-right"></div>
+                <div class="guideline" data-axis="Y" data-topic="slice-bottom"></div>
+                <div class="guideline" data-axis="X" data-topic="slice-left"></div>
+            </div>
+            <div id="preview"> </div>
+        </div>
+
+        <!-- controls -->
+        <div id="controls" class="group section">
+
+            <!-- border-image-slice -->
+            <div id="border-slice-control" class="category">
+                <div class="title"> border-image-slice </div>
+                <div class="property">
+                    <div class="name">fill</div>
+                    <div class="ui-checkbox" data-topic='slice-fill'></div>
+                </div>
+            </div>
+
+            <!-- border-image-width -->
+            <div id="border-width-control" class="category">
+                <div class="title"> border-image-width </div>
+            </div>
+
+            <!-- border-image-outset -->
+            <div id="border-outset-control" class="category">
+                <div class="title"> border-image-outset </div>
+            </div>
+
+            <!-- other-settings -->
+            <div id="aditional-properties" class="category">
+                <div class="title"> aditional-properties </div>
+                <div class="property">
+                    <div class="name"> repeat-x </div>
+                    <div class="ui-dropdown border-repeat" data-topic="image-repeat-X" data-selected="2">
+                        <div data-value="0">repeat</div>
+                        <div data-value="0">stretch</div>
+                        <div data-value="0">round</div>
+                    </div>
+                </div>
+                <div class="property">
+                    <div class="name"> repeat-y </div>
+                    <div class="ui-dropdown border-repeat" data-topic="image-repeat-Y" data-selected="2">
+                        <div data-value="1">repeat</div>
+                        <div data-value="1">stretch</div>
+                        <div data-value="1">round</div>
+                    </div>
+                </div>
+                <div class="property">
+                    <div class="ui-input-slider" data-topic="font-size" data-info="em size"
+                        data-unit="px" data-value="12" data-sensivity="3">
+                    </div>
+                </div>
+
+                <div class="property">
+                    <div class="ui-input-slider" data-topic="preview-width" data-info="width"
+                         data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"></div>
+                </div>
+                <div class="property">
+                    <div class="ui-input-slider" data-topic="preview-height" data-info="height"
+                        data-unit=" px" data-min="10" data-max="10000" data-sensivity="3">
+                    </div>
+                </div>
+            </div>
+
+
+            <div id="output" class="category">
+                <div class="title"> CSS Code </div>
+                <div class="css-property">
+                    <span class="name"> border-image-slice: </span>
+                    <span id="out-border-slice" class="value"> </span>
+                </div>
+                <div class="css-property">
+                    <span class="name"> border-image-width: </span>
+                    <span id="out-border-width" class="value"> </span>
+                </div>
+                <div class="css-property">
+                    <span class="name"> border-image-outset: </span>
+                    <span id="out-border-outset" class="value"> </span>
+                </div>
+                <div class="css-property">
+                    <span class="name"> border-image-repeat: </span>
+                    <span id="out-border-repeat" class="value"> </span>
+                </div>
+                <div class="css-property">
+                    <span class="name"> border-image-source: </span>
+                    <span id="out-border-source" class="value">  </span>
+                </div>
+            </div>
+
+        </div>
+    </div>
+ +

CSS Content

+ +
/*  GRID OF TWELVE
+ * ========================================================================== */
+
+.span_12 {
+	width: 100%;
+}
+
+.span_11 {
+	width: 91.46%;
+}
+
+.span_10 {
+	width: 83%;
+}
+
+.span_9 {
+	width: 74.54%;
+}
+
+.span_8 {
+	width: 66.08%;
+}
+
+.span_7 {
+	width: 57.62%;
+}
+
+.span_6 {
+	width: 49.16%;
+}
+
+.span_5 {
+	width: 40.7%;
+}
+
+.span_4 {
+	width: 32.24%;
+}
+
+.span_3 {
+	width: 23.78%;
+}
+
+.span_2 {
+	width: 15.32%;
+}
+
+.span_1 {
+	width: 6.86%;
+}
+
+
+/*  SECTIONS
+ * ========================================================================== */
+
+.section {
+	clear: both;
+	padding: 0px;
+	margin: 0px;
+}
+
+/*  GROUPING
+ * ========================================================================== */
+
+
+.group:before, .group:after {
+    content: "";
+    display: table;
+}
+
+.group:after {
+    clear:both;
+}
+
+.group {
+    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
+}
+
+/*  GRID COLUMN SETUP
+ * ========================================================================== */
+
+.col {
+	display: block;
+	float:left;
+	margin: 1% 0 1% 1.6%;
+}
+
+.col:first-child {
+	margin-left: 0;
+} /* all browsers except IE6 and lower */
+
+
+
+/*
+ * UI Component
+ */
+
+.ui-input-slider {
+	height: 20px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider > input {
+	margin: 0;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-input-slider-info {
+	width: 90px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-left, .ui-input-slider-right {
+	width: 16px;
+	cursor: pointer;
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
+}
+
+.ui-input-slider-right {
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
+}
+
+.ui-input-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 5px;
+	color: #FFF;
+	font-weight: bold;
+	line-height: 14px;
+	text-align: center;
+}
+
+.ui-input-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * UI DropDown
+ */
+
+/* Dropdown */
+
+.ui-dropdown {
+	height: 2em;
+	width: 120px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	font-size: 12px;
+
+	background-image: url("https://mdn.mozillademos.org/files/6037/drop_arrow_icon.png");
+	background-position: right center;
+	background-repeat: no-repeat;
+	background-color: #359740;
+
+	position: relative;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-dropdown:hover {
+	cursor: pointer;
+	background-color: #208B20;
+}
+
+/* Dropdown Select Button */
+
+.ui-dropdown-select {
+	height: inherit;
+	padding: 0 0.75em;
+	color: #FFF;
+	line-height: 2em;
+}
+
+/* Dropdown List */
+
+.ui-dropdown-list {
+	width: 100%;
+	height: 150px;
+	max-height: 150px;
+	margin: 0;
+	padding: 0 0.3em;
+
+	border: 3px solid #3490D2;
+	border-color: #208B20;
+	background: #666;
+	background-color: #EEF1F5;
+	color: #000;
+
+	position: absolute;
+	top: 2em;
+	left: 0;
+	z-index: 100;
+
+	overflow: hidden;
+	transition: all 0.3s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-dropdown-list:hover {
+	overflow: auto;
+}
+
+.ui-dropdown-list[data-hidden='true'] {
+	height: 0 !important;
+	opacity: 0;
+	visibility: hidden;
+}
+
+.ui-dropdown[data-position='left'] .ui-dropdown-list {
+	left: -100%;
+	top: 0;
+}
+
+.ui-dropdown[data-position='right'] .ui-dropdown-list {
+	left: 100%;
+	top: 0;
+}
+
+.ui-dropdown-list > div {
+	width: 100%;
+	height: 1.6em;
+	margin: 0.3em 0;
+	padding: 0.3em;
+	line-height: 1em;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-dropdown-list > div:hover {
+	background: #3490D2;
+	color:#FFF;
+	border-radius: 2px;
+	cursor: pointer;
+}
+
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * UI Button
+ */
+
+/* Checkbox */
+
+.ui-checkbox {
+	text-align: center;
+	font-size: 16px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	line-height: 1.5em;
+	color: #FFF;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-checkbox > input {
+ 	display: none;
+}
+
+.ui-checkbox > label {
+	font-size: 12px;
+	padding: 0.333em 1.666em 0.5em;
+	height: 1em;
+	line-height: 1em;
+
+	background-color: #888;
+	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	color: #FFF;
+	border-radius: 2px;
+	font-weight: bold;
+	float: left;
+}
+
+.ui-checkbox .text {
+	padding-left: 34px;
+	background-position: center left 10px;
+}
+
+.ui-checkbox .left {
+	padding-right: 34px;
+	padding-left: 1.666em;
+	background-position: center right 10px;
+}
+
+.ui-checkbox > label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox > input:checked + label {
+	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
+	background-color: #379B4A;
+}
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * BORDER IMAGE GENERATOR TOOL
+ */
+
+body {
+	width: 100%;
+	margin: 0 auto;
+	padding: 0 0 20px 0;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	/*background: url("https://mdn.mozillademos.org/files/6025/grain.png");*/
+	border: 1px solid #EEE;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+body[data-move='X'] {
+	cursor: w-resize !important;
+}
+
+body[data-move='Y'] {
+	cursor: s-resize !important;
+}
+
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+[data-draggable='true']:hover {
+	cursor: move;
+}
+
+[data-draggable='true']:hover > * {
+	cursor: default;
+}
+
+
+
+/******************************************************************************/
+/******************************************************************************/
+
+/*
+ * Border Image Picker
+ */
+
+#gallery {
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#image-gallery {
+	width: 600px;
+	height: 100px;
+	margin: 0 auto;
+	transition: margin 0.4s;
+}
+
+#image-gallery .image {
+	height: 80px;
+	float: left;
+	margin: 10px;
+	opacity: 0.5;
+	background-color: #FFF;
+	box-shadow: 0px 0px 3px 1px #BABABA;
+}
+
+#image-gallery .image[selected="true"] {
+	box-shadow: 0px 0px 3px 1px #3BBA52;
+	opacity: 1;
+}
+
+#image-gallery .image:hover {
+	cursor: pointer;
+	box-shadow: 0px 0px 3px 1px #30ACE5;
+	opacity: 1;
+}
+
+#image-gallery[data-collapsed='true'] {
+	margin-top: -100px;
+}
+
+/* Load Menu */
+
+#load-actions {
+	margin: 10px 0;
+}
+
+#toggle-gallery {
+	width: 30px;
+	height: 25px;
+	margin: 10px;
+	color: #FFF;
+
+	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
+	background-repeat: no-repeat;
+	background-position: top 4px center;
+	background-color: #888888 !important;
+
+	border-radius: 2px;
+	float: left;
+}
+
+#toggle-gallery:hover {
+	cursor: pointer;
+}
+
+#toggle-gallery[data-action='show'] {
+	background-image: url('https://mdn.mozillademos.org/files/6001/arrow-down-white.png');
+	background-color: #888888 !important;
+}
+
+#toggle-gallery[data-action='hide'] {
+	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
+}
+
+.button {
+	width: 100px;
+	height: 25px;
+	margin: 10px;
+	color: #FFF;
+	text-align: center;
+	font-size: 12px;
+	line-height: 25px;
+	background-color: #379B4A;
+	border-radius: 2px;
+	float: left;
+}
+
+.button:hover {
+	cursor: pointer;
+	background-color: #3380C4;
+}
+
+#load-image {
+	float: left;
+}
+
+#load-remote {
+	width: 30px;
+	background-image: url('https://mdn.mozillademos.org/files/6003/arrow-right-white.png');
+	background-repeat: no-repeat;
+	background-position: center center;
+}
+
+#remote-url {
+	width: 200px;
+	height: 23px;
+	margin: 10px;
+	padding: 0 5px;
+	border: 1px solid #379B4A;
+	border-radius: 2px;
+	float: left;
+
+	transition: width 0.5s;
+}
+
+#remote-url:focus {
+	box-shadow: 0px 0px 3px -1px #379B4A; /*#68ACE8; */
+	border-color: rgba(55, 155, 74, 0.5);
+	width: 450px;
+}
+
+/*
+ * Visible Area
+ */
+
+#preview_section {
+	position: relative;
+	min-height: 400px;
+}
+
+/* Image Control */
+
+#subject {
+	width: 300px;
+	height: 300px;
+	background-repeat: no-repeat;
+	background-size: 100%;
+	background-color: #FFF;
+	border: 1px solid #CCC;
+
+	position: absolute;
+	z-index: 10;
+	top: 15%;
+	left: 10%;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition-property: width, height;
+	transition-duration: 0.1s;
+}
+
+#subject .guideline {
+	background-color: rgba(255, 255, 255, 0.7);
+	border: 1px solid rgba(0, 0, 0, 0.3);
+	position: absolute;
+}
+
+#subject .guideline:hover {
+	background-color: #F00;
+}
+
+#subject .guideline[data-active] {
+	background-color: #F00;
+	z-index: 10;
+}
+
+#subject .guideline[data-axis='X'] {
+	width: 1px;
+	height: 100%;
+	top: -1px;
+}
+
+#subject .guideline[data-axis='Y'] {
+	width: 100%;
+	height: 1px;
+	left: -1px;
+}
+
+#subject .guideline[data-axis='X']:hover {
+	cursor: w-resize;
+}
+
+#subject .guideline[data-axis='Y']:hover {
+	cursor: s-resize;
+}
+
+
+#subject .relative {
+	position: relative;
+	font-size: 12px;
+}
+
+#subject .tooltip, #subject .tooltip2 {
+	width: 40px;
+	height: 20px;
+	line-height: 20px;
+	font-size: 12px;
+	text-align: center;
+
+	position: absolute;
+	opacity: 0.5;
+	transition: opacity 0.25s;
+}
+
+#subject .tooltip {
+	background: #EEE;
+	border-radius: 2px;
+	border: 1px solid #CCC;
+}
+
+#subject .tooltip2{
+	color: #555;
+}
+
+#subject [data-active] > * {
+	opacity: 1;
+}
+
+#subject .tooltip[data-info='top'] {
+	top: -10px;
+	right: -50px;
+}
+
+#subject .tooltip[data-info='right'] {
+	bottom: -30px;
+	right: -20px;
+}
+
+#subject .tooltip[data-info='bottom'] {
+	top: -10px;
+	left: -50px;
+}
+
+#subject .tooltip[data-info='left'] {
+	top: -30px;
+	right: -20px;
+}
+
+#subject .tooltip2[data-info='top'] {
+	top: -10px;
+	left: -50px;
+}
+
+#subject .tooltip2[data-info='right'] {
+	top: -30px;
+	right: -20px;
+}
+
+#subject .tooltip2[data-info='bottom'] {
+	top: -10px;
+	right: -50px;
+}
+
+#subject .tooltip2[data-info='left'] {
+	bottom: -30px;
+	right: -20px;
+}
+
+/* Preview */
+
+#preview {
+	width: 30%;
+	height: 50%;
+	background-color: #FFF;
+	text-align: center;
+	overflow: hidden;
+	position: absolute;
+	z-index: 10;
+
+	left: 60%;
+	top: 15%;
+
+	border-radius: 2px;
+	border-image-width: 20px;
+	border-image-repeat: round;
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#preview .resize-handle {
+	width: 10px;
+	height: 10px;
+	background: url("https://mdn.mozillademos.org/files/6027/resize.png") center center no-repeat;
+	position: absolute;
+	bottom: 0;
+	right: 0;
+}
+
+#preview .resize-handle:hover {
+	cursor: nw-resize;
+}
+
+
+/*
+ * General controls MENU
+ */
+
+#general-controls {
+	padding: 10px 30px;
+	background-color: #FFF;
+	opacity: 0.95;
+	color: #888;
+	/*border-radius: 2px;*/
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#general-controls .property {
+	width: 130px;
+	float: left;
+}
+
+#general-controls .name {
+	height: 20px;
+	margin: 0 10px 0 0;
+	line-height: 100%;
+	text-align: right;
+	float: left;
+}
+
+#general-controls .right {
+	width: 200px;
+	float: right;
+}
+
+#general-controls .ui-checkbox label {
+	height: 10px;
+}
+
+#general-controls .separator {
+	height: 40px;
+	width: 1px;
+	margin: -10px 15px;
+	background-color: #EEE;
+	float: left;
+}
+
+/*
+ * Controls
+ */
+
+#controls {
+	color: #444;
+	margin: 10px 0 0 0;
+}
+
+#controls .category {
+	height: 190px;
+	min-width: 260px;
+	margin: 10px;
+	padding: 10px;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	float: left;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition: all 0.25s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+@media (min-width: 880px) {
+	#controls .category {
+		width: 30%;
+		margin-left: 1.66%;
+		margin-right: 1.66%;
+	}
+}
+
+@media (max-width: 879px) {
+	#controls .category {
+		width: 37%;
+		margin-left: 6.5%;
+		margin-right: 6.5%;
+	}
+}
+
+#controls .category .title {
+	width: 100%;
+	height: 30px;
+	margin: 0 0 10px 0;
+	line-height: 25px;
+
+	text-align: center;
+	color: #AAA;
+}
+
+#controls .category:hover .title {
+	color: #777;
+}
+
+#controls .category > .group {
+	border: 1px solid #CCC;
+	border-radius: 2px;
+}
+
+
+/* property */
+
+#controls .property {
+	width: 250px;
+	height: 20px;
+	margin: 5px auto;
+}
+
+#controls .property .ui-input-slider {
+	margin: 0;
+	float: left;
+}
+
+#controls .property .ui-input-slider-info {
+	width: 60px;
+}
+
+#controls .property .ui-input-slider-left {
+	transition: opacity 0.15s;
+    opacity: 0;
+}
+
+#controls .property .ui-input-slider-right {
+	transition: opacity 0.15s;
+    opacity: 0;
+}
+
+#controls .property .name {
+	width: 60px;
+	height: 20px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	line-height: 100%;
+	float: left;
+}
+
+#controls .property .config {
+	width: 20px;
+	height: 20px;
+	float: left;
+	background: url("https://mdn.mozillademos.org/files/6021/config.png") center center no-repeat;
+	opacity: 0.5;
+}
+
+#controls .property .config:hover {
+	cursor: pointer;
+	opacity: 1;
+}
+
+#controls .ui-input-slider:hover .ui-input-slider-right {
+    opacity: 1;
+}
+
+#controls .ui-input-slider:hover .ui-input-slider-left {
+    opacity: 1;
+}
+
+#controls .property .ui-dropdown {
+	margin: 0 10px;
+	float: left;
+}
+
+
+#controls .property .ui-checkbox {
+	margin: 0 0 0 16px;
+	float: left;
+}
+
+#controls .property .ui-checkbox label {
+	height: 0.85em;
+	width: 10px;
+}
+
+/* dropdowns */
+#controls .ui-dropdown {
+	width: 50px;
+	height: 1.7em;
+	border-radius: 2px;
+}
+
+#controls .ui-dropdown-select {
+	line-height: 1.6em;
+}
+
+#controls .ui-dropdown-list {
+	top: 20px;
+}
+
+#controls .ui-dropdown-list {
+	border-width: 1px;
+	text-align: center;
+}
+
+#controls .ui-dropdown-list:hover {
+	overflow: hidden;
+}
+
+#controls .border-repeat {
+	margin: 0 0 0 16px !important;
+	width: 80px;
+}
+
+#controls .border-repeat .ui-dropdown-list {
+	height: 6.2em;
+	border-width: 1px;
+	text-align: center;
+}
+
+/* border-image-slice */
+
+
+#border-slice-control .ui-dropdown-list {
+	height: 4.3em;
+}
+
+/* border-image-width */
+
+#border-width-control .ui-dropdown-list {
+	height: 6.2em;
+}
+
+/* border-image-outset */
+
+#border-outset-control .ui-dropdown-list {
+	height: 4.3em;
+}
+
+#aditional-properties .property {
+	width: 200px;
+}
+
+#aditional-properties .ui-input-slider > input {
+	width: 80px !important;
+}
+
+/* unit settings panel */
+
+#unit-settings {
+	padding: 10px;
+	position: absolute;
+
+	background: #FFF;
+
+	font-size: 12px;
+	border-radius: 3px;
+	border: 1px solid #CCC;
+	text-align: center;
+	color: #555;
+
+	position: absolute;
+	z-index: 1000;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition: all 0.25s;
+}
+
+#unit-settings .title {
+	width: 100%;
+	margin: -5px auto 0;
+
+	color: #666;
+	font-size: 14px;
+	font-weight: bold;
+	line-height: 25px;
+	border-bottom: 1px solid #E5E5E5;
+}
+
+#unit-settings .ui-input-slider {
+	margin: 10px 0 0 0;
+}
+
+#unit-settings .ui-input-slider-info {
+	width: 50px;
+	line-height: 1.5em;
+}
+
+#unit-settings input {
+	font-size: 12px;
+	width: 40px !important;
+}
+
+#unit-settings .close {
+	width: 16px;
+	height: 16px;
+	background: url('https://mdn.mozillademos.org/files/6019/close.png') no-repeat center center;
+	background-size: 75%;
+
+	position: absolute;
+	top: 4px;
+	right: 4px;
+	opacity: 0.5;
+}
+
+#unit-settings .close:hover {
+	cursor: pointer;
+	opacity: 1;
+}
+
+#unit-settings[data-active='true'] {
+	opacity: 1;
+}
+
+#unit-settings[data-active='false'] {
+	opacity: 0;
+	top: -100px !important;
+}
+
+/*
+ * CSS Output Code
+ */
+
+#output {
+	padding: 10px;
+	border: 2px dashed #888 !important;
+	box-shadow: none !important;
+	border-radius: 3px;
+	overflow: hidden;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+	user-select: text;
+}
+
+
+@media (min-width: 880px) {
+	#output {
+		width: 63.33% !important;
+	}
+}
+
+@media (max-width: 879px) {
+	#output {
+		width: 87% !important;
+	}
+}
+
+
+#output .title {
+	width: 100%;
+	height: 30px;
+	margin: 0 0 10px 0;
+	line-height: 25px;
+
+	text-align: center;
+	color: #AAA;
+}
+
+#output .css-property {
+	width: 100%;
+	margin: 0;
+	color: #555;
+	font-size: 14px;
+	line-height: 18px;
+	float: left;
+}
+
+#output .css-property .name {
+	width: 30%;
+	font-weight: bold;
+	text-align: right;
+	float: left;
+}
+
+#output .css-property .value {
+	width: 65%;
+	padding: 0 2.5%;
+	word-break: break-all;
+	float: left;
+}
+
+
+ +

JavaScript Content

+ +
'use strict';
+
+/**
+ * UI-SlidersManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+		input.style.width = 50 + obj.precision * 10 + 'px';
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseFloat(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		return input;
+	};
+
+	var SliderComponent = function SliderComponent(obj, sign) {
+		var slider = document.createElement('div');
+		var startX = null;
+		var start_value = 0;
+
+		slider.addEventListener("click", function(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			setValue(obj.topic, obj.value + obj.step * sign);
+		});
+
+		slider.addEventListener("mousedown", function(e) {
+			startX = e.clientX;
+			start_value = obj.value;
+			document.body.style.cursor = "e-resize";
+
+			document.addEventListener("mouseup", slideEnd);
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		var slideEnd = function slideEnd(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			document.body.style.cursor = "auto";
+			slider.style.cursor = "pointer";
+		};
+
+		var sliderMotion = function sliderMotion(e) {
+			slider.style.cursor = "e-resize";
+			var delta = (e.clientX - startX) / obj.sensivity | 0;
+			var value = delta * obj.step + start_value;
+			setValue(obj.topic, value);
+		};
+
+		return slider;
+	};
+
+	var InputSlider = function(node) {
+		var min		= parseFloat(node.getAttribute('data-min'));
+		var max		= parseFloat(node.getAttribute('data-max'));
+		var step	= parseFloat(node.getAttribute('data-step'));
+		var value	= parseFloat(node.getAttribute('data-value'));
+		var topic	= node.getAttribute('data-topic');
+		var unit	= node.getAttribute('data-unit');
+		var name 	= node.getAttribute('data-info');
+		var sensivity = node.getAttribute('data-sensivity') | 0;
+		var precision = node.getAttribute('data-precision') | 0;
+
+		this.min = isNaN(min) ? 0 : min;
+		this.max = isNaN(max) ? 100 : max;
+		this.precision = precision >= 0 ? precision : 0;
+		this.step = step < 0 || isNaN(step) ? 1 : step.toFixed(precision);
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit === null ? '' : unit;
+		this.sensivity = sensivity > 0 ? sensivity : 5;
+		value = isNaN(value) ? this.min : value;
+
+		var input = new InputComponent(this);
+		var slider_left  = new SliderComponent(this, -1);
+		var slider_right = new SliderComponent(this,  1);
+
+		slider_left.className = 'ui-input-slider-left';
+		slider_right.className = 'ui-input-slider-right';
+
+		if (name) {
+			var info = document.createElement('span');
+			info.className = 'ui-input-slider-info';
+			info.textContent = name;
+			node.appendChild(info);
+		}
+
+		node.appendChild(slider_left);
+		node.appendChild(input);
+		node.appendChild(slider_right);
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	};
+
+	InputSlider.prototype.setInputValue = function setInputValue() {
+		this.input.value = this.value.toFixed(this.precision) + this.unit;
+	};
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = parseFloat(value.toFixed(slider.precision));
+
+		if (value > slider.max) value = slider.max;
+		if (value < slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		slider.setInputValue();
+
+		if (send_notify === false)
+			return;
+
+		notify.call(slider);
+	};
+
+	var setMax = function setMax(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.max = value;
+		setValue(topic, slider.value);
+	};
+
+	var setMin = function setMin(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.min = value;
+		setValue(topic, slider.value);
+	};
+
+	var setUnit = function setUnit(topic, unit) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.unit = unit;
+		setValue(topic, slider.value);
+	};
+
+	var setStep = function setStep(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.step = parseFloat(value);
+		setValue(topic, slider.value);
+	};
+
+	var setPrecision = function setPrecision(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+		slider.precision = value;
+
+		var step = parseFloat(slider.step.toFixed(value));
+		if (step === 0)
+			slider.step = 1 / Math.pow(10, value);
+
+		setValue(topic, slider.value);
+	};
+
+	var setSensivity = function setSensivity(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+
+		slider.sensivity = value > 0 ? value : 5;
+	};
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	};
+
+	var getPrecision =  function getPrecision(topic) {
+		return sliders[topic].precision;
+	};
+
+	var getStep =  function getStep(topic) {
+		return sliders[topic].step;
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i < subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.value);
+	};
+
+	var createSlider = function createSlider(topic, label) {
+		var slider = document.createElement('div');
+		slider.className = 'ui-input-slider';
+		slider.setAttribute('data-topic', topic);
+
+		if (label !== undefined)
+			slider.setAttribute('data-info', label);
+
+		new InputSlider(slider);
+		return slider;
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new InputSlider(elem[i]);
+	};
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		setStep : setStep,
+		getNode : getNode,
+		getStep : getStep,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPrecision : setPrecision,
+		setSensivity : setSensivity,
+		getPrecision : getPrecision,
+		createSlider : createSlider,
+	};
+
+})();
+
+
+/**
+ * UI-DropDown Select
+ */
+
+var DropDownManager = (function DropdownManager() {
+
+	var subscribers = {};
+	var dropdowns = [];
+	var active = null;
+
+	var visbility = ["hidden", "visible"];
+
+
+	var DropDown = function DropDown(node) {
+		var topic = node.getAttribute('data-topic');
+		var label = node.getAttribute('data-label');
+		var selected = node.getAttribute('data-selected') | 0;
+
+		var select = document.createElement('div');
+		var list = document.createElement('div');
+		var uval = 0;
+		var option = null;
+		var option_value = null;
+
+		list.className = 'ui-dropdown-list';
+		select.className = 'ui-dropdown-select';
+
+		while (node.firstElementChild !== null) {
+			option = node.firstElementChild;
+			option_value = option.getAttribute('data-value');
+
+			if (option_value === null)
+				option.setAttribute('data-value', uval);
+
+			list.appendChild(node.firstElementChild);
+			uval++;
+		}
+
+		node.appendChild(select);
+		node.appendChild(list);
+
+		select.onclick = this.toggle.bind(this);
+		list.onclick = this.updateValue.bind(this);
+		document.addEventListener('click', clickOut);
+
+		this.state = 0;
+		this.time = 0;
+		this.dropmenu = list;
+		this.select = select;
+		this.toggle(false);
+		this.value = {};
+		this.topic = topic;
+
+		if (label)
+			select.textContent = label;
+		else
+			this.setNodeValue(list.children[selected]);
+
+		dropdowns[topic] = this;
+
+	};
+
+	DropDown.prototype.toggle = function toggle(state) {
+		if (typeof(state) === 'boolean')
+			this.state = state === false ? 0 : 1;
+		else
+			this.state = 1 ^ this.state;
+
+		if (active !== this) {
+			if (active)
+				active.toggle(false);
+			active = this;
+		}
+
+		if (this.state === 0)
+			this.dropmenu.setAttribute('data-hidden', 'true');
+		else
+			this.dropmenu.removeAttribute('data-hidden');
+
+	};
+
+	var clickOut = function clickOut(e) {
+		if (active.state === 0 ||
+			e.target === active.dropmenu ||
+			e.target === active.select)
+			return;
+
+		active.toggle(false);
+	};
+
+	DropDown.prototype.updateValue = function updateValue(e) {
+
+		if (Date.now() - this.time < 500)
+			return;
+
+		if (e.target.className !== "ui-dropdown-list") {
+			this.setNodeValue(e.target);
+			this.toggle(false);
+		}
+
+		this.time = Date.now();
+	};
+
+	DropDown.prototype.setNodeValue = function setNodeValue(node) {
+		this.value['name'] = node.textContent;
+		this.value['value'] = node.getAttribute('data-value');
+
+		this.select.textContent = node.textContent;
+		this.select.setAttribute('data-value', this.value['value']);
+
+		notify.call(this);
+	};
+
+	var createDropDown = function createDropDown(topic, options) {
+
+		var dropdown = document.createElement('div');
+		dropdown.setAttribute('data-topic', topic);
+		dropdown.className = 'ui-dropdown';
+
+		for (var i in options) {
+			var x = document.createElement('div');
+			x.setAttribute('data-value', i);
+			x.textContent = options[i];
+			dropdown.appendChild(x);
+		}
+
+		new DropDown(dropdown);
+
+		return dropdown;
+	};
+
+	var setValue = function setValue(topic, index) {
+		if (dropdowns[topic] === undefined ||
+			index >= dropdowns[topic].dropmenu.children.length)
+			return;
+
+		dropdowns[topic].setNodeValue(dropdowns[topic].dropmenu.children[index]);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		var index = subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+
+		for (var i in subscribers[this.topic]) {
+			subscribers[this.topic][i](this.value);
+		}
+	};
+
+	var init = function init() {
+		var elem, size;
+
+		elem = document.querySelectorAll('.ui-dropdown');
+		size = elem.length;
+		for (var i = 0; i < size; i++)
+			new DropDown(elem[i]);
+
+	};
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		createDropDown : createDropDown
+	};
+
+})();
+
+
+/**
+ * UI-ButtonManager
+ */
+
+var ButtonManager = (function CheckBoxManager() {
+
+	var subscribers = [];
+	var buttons = [];
+
+	var CheckBox = function CheckBox(node) {
+		var topic = node.getAttribute('data-topic');
+		var state = node.getAttribute('data-state');
+		var name = node.getAttribute('data-label');
+		var align = node.getAttribute('data-text-on');
+
+		state = (state === "true");
+
+		var checkbox = document.createElement("input");
+		var label = document.createElement("label");
+
+		var id = 'checkbox-' + topic;
+		checkbox.id = id;
+		checkbox.setAttribute('type', 'checkbox');
+		checkbox.checked = state;
+
+		label.setAttribute('for', id);
+		if (name) {
+			label.className = 'text';
+			if (align)
+				label.className += ' ' + align;
+			label.textContent = name;
+		}
+
+		node.appendChild(checkbox);
+		node.appendChild(label);
+
+		this.node = node;
+		this.topic = topic;
+		this.checkbox = checkbox;
+
+		checkbox.addEventListener('change', function(e) {
+			notify.call(this);
+		}.bind(this));
+
+		buttons[topic] = this;
+	};
+
+	var getNode =  function getNode(topic) {
+		return buttons[topic].node;
+	};
+
+	var setValue = function setValue(topic, value) {
+		var obj = buttons[topic];
+		if (obj === undefined)
+			return;
+
+		obj.checkbox.checked = value;
+		notify.call(obj);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i < subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.checkbox.checked);
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-checkbox');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new CheckBox(elem[i]);
+	};
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	};
+
+})();
+
+window.addEventListener("load", function() {
+	BorderImage.init();
+});
+
+var BorderImage = (function BorderImage() {
+
+	var getElemById = document.getElementById.bind(document);
+
+	var subject;
+	var preview;
+	var guidelines = [];
+	var positions = ['top', 'right', 'bottom', 'left'];
+
+	var makeDraggable = function makeDraggable(elem) {
+
+		var offsetTop;
+		var offsetLeft;
+
+		elem.setAttribute('data-draggable', 'true');
+
+		var dragStart = function dragStart(e) {
+			if (e.target.getAttribute('data-draggable') !== 'true' ||
+				e.target !== elem || e.button !== 0)
+				return;
+
+			offsetLeft = e.clientX - elem.offsetLeft;
+			offsetTop = e.clientY - elem.offsetTop;
+
+			document.addEventListener('mousemove', mouseDrag);
+			document.addEventListener('mouseup', dragEnd);
+		};
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0)
+				return;
+
+			document.removeEventListener('mousemove', mouseDrag);
+			document.removeEventListener('mouseup', dragEnd);
+		};
+
+		var mouseDrag = function mouseDrag(e) {
+
+			elem.style.left = e.clientX - offsetLeft + 'px';
+			elem.style.top = e.clientY - offsetTop + 'px';
+		};
+
+		elem.addEventListener('mousedown', dragStart, false);
+	};
+
+	var PreviewControl = function PreviewControl() {
+
+		var dragging = false;
+		var valueX = null;
+		var valueY = null;
+
+		var dragStart = function dragStart(e) {
+			if (e.button !== 0)
+				return;
+
+			valueX = e.clientX - preview.clientWidth;
+			valueY = e.clientY - preview.clientHeight;
+			dragging = true;
+
+			document.addEventListener('mousemove', mouseDrag);
+		};
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0 || dragging === false)
+				return;
+
+			document.removeEventListener('mousemove', mouseDrag);
+			dragging = false;
+		};
+
+		var mouseDrag = function mouseDrag(e) {
+			InputSliderManager.setValue('preview-width', e.clientX - valueX);
+			InputSliderManager.setValue('preview-height', e.clientY - valueY);
+		};
+
+		var init = function init() {
+
+			makeDraggable(preview);
+			makeDraggable(subject);
+
+			var handle = document.createElement('div');
+			handle.className = 'resize-handle';
+
+			handle.addEventListener('mousedown', dragStart);
+			document.addEventListener('mouseup', dragEnd);
+
+			preview.appendChild(handle);
+
+		};
+
+		return {
+			init: init
+		};
+
+	}();
+
+	var ImageReader = (function ImageReader() {
+
+		var fReader = new FileReader();
+		var browse = document.createElement('input');
+
+		var loadImage = function loadImage(e) {
+			if (browse.files.length === 0)
+				return;
+
+			var file = browse.files[0];
+
+			if (file.type.slice(0, 5) !== 'image')
+				return;
+
+			fReader.readAsDataURL(file);
+
+			return false;
+		};
+
+		fReader.onload = function(e) {
+			ImageControl.loadRemoteImage(e.target.result);
+		};
+
+		var load = function load() {
+			browse.click();
+		};
+
+		browse.setAttribute('type', 'file');
+		browse.style.display = 'none';
+		browse.onchange = loadImage;
+
+		return {
+			load: load
+		};
+
+	})();
+
+	var ImageControl = (function ImageControl() {
+
+		var scale = 0.5;
+		var imgSource = new Image();
+		var imgState = null;
+		var selected = null;
+
+
+		var topics = ['slice', 'width', 'outset'];
+		var properties = {};
+		properties['border1'] = {
+			fill			: false,
+
+			slice_values	: [27, 27, 27, 27],
+			width_values	: [20, 20, 20, 20],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [1, 1],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border2'] = {
+			fill			: false,
+
+			slice_values	: [33, 33, 33, 33],
+			width_values	: [1.5, 1.5, 1.5, 1.5],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [1, 1, 1, 1],
+			width_units		: [2, 2, 2, 2],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border3'] = {
+			fill			: true,
+
+			slice_values	: [15, 15, 15, 15],
+			width_values	: [10, 10, 10, 10],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border4'] = {
+			fill			: false,
+
+			slice_values	: [13, 13, 13, 13],
+			width_values	: [13, 13, 13, 13],
+			outset_values	: [13, 13, 13, 13],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [0, 0],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border5'] = {
+			fill			: false,
+
+			slice_values	: [0, 12, 0, 12],
+			width_values	: [0, 12, 0, 12],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [0, 0],
+			size			: [300, 200],
+			preview_area	: 400,
+		};
+
+		properties['border6'] = {
+			fill			: false,
+
+			slice_values	: [42, 42, 42, 42],
+			width_values	: [42, 42, 42, 42],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [350, 350],
+			preview_area	: 500,
+		};
+
+
+		var loadLocalImage = function loadLocalImage(source) {
+			var location = "images/" + source;
+			imgSource.src = location;
+		};
+
+		var loadRemoteImage = function loadRemoteImage(source) {
+			imgSource.src = source;
+			if (selected)
+				selected.removeAttribute('selected');
+			Tool.setOutputCSS('source', 'url("' + source + '")');
+		};
+
+		var pickImage = function pickImage(e) {
+			if (e.target.className === 'image') {
+				selected = e.target;
+				selected.setAttribute('selected', 'true');
+				loadRemoteImage(e.target.src);
+				imgState = e.target.getAttribute('data-stateID');
+			}
+		};
+
+		var loadImageState = function loadImageState(stateID) {
+			if (properties[stateID] === undefined)
+				return;
+
+			var prop = properties[stateID];
+			var topic;
+			var unit_array;
+			var value_array;
+
+			for (var i in topics) {
+				for (var j=0; j<4; j++) {
+					topic = topics[i] + '-' + positions[j];
+					unit_array = topics[i] + '_units';
+					value_array = topics[i] + '_values';
+					InputSliderManager.setValue(topic, prop[value_array][j]);
+					DropDownManager.setValue(topic, prop[unit_array][j]);
+				}
+			}
+
+			ButtonManager.setValue('slice-fill', prop['fill']);
+			DropDownManager.setValue('image-repeat-X', prop['repeat'][0]);
+			DropDownManager.setValue('image-repeat-Y', prop['repeat'][1]);
+			InputSliderManager.setValue('preview-width', prop['size'][0]);
+			InputSliderManager.setValue('preview-height', prop['size'][1]);
+			InputSliderManager.setValue('preview-area-height', prop['preview_area']);
+		};
+
+		var update = function update() {
+			scale =  Math.min(300, (30000 / this.width) | 0);
+			setScale(scale);
+			InputSliderManager.setValue('scale', scale, false);
+
+			subject.style.backgroundImage = 'url("' + this.src + '")';
+			preview.style.borderImageSource = 'url("' + this.src + '")';
+
+			guidelines['slice-top'].setMax(this.height);
+			guidelines['slice-right'].setMax(this.width);
+			guidelines['slice-bottom'].setMax(this.height);
+			guidelines['slice-left'].setMax(this.width);
+
+			if (imgState)
+				loadImageState(imgState);
+		};
+
+		var setScale = function setScale(value) {
+			scale = value;
+			var w = imgSource.width * scale / 100 | 0;
+			var h = imgSource.height * scale / 100 | 0;
+			subject.style.width = w + 'px';
+			subject.style.height = h + 'px';
+
+			for (var i = 0; i < positions.length; i++)
+				guidelines['slice-' + positions[i]].updateGuidelinePos();
+		};
+
+		var getScale = function getScale() {
+			return scale/100;
+		};
+
+		var toggleGallery = function toggleGallery() {
+			var gallery = getElemById('image-gallery');
+			var button  = getElemById('toggle-gallery');
+			var state = 1;
+			button.addEventListener('click', function() {
+				state = 1 ^ state;
+				if (state === 0) {
+					gallery.setAttribute('data-collapsed', 'true');
+					button.setAttribute('data-action', 'show');
+				}
+				else {
+					gallery.removeAttribute('data-collapsed');
+					button.setAttribute('data-action', 'hide');
+				}
+			});
+		};
+
+		var init = function init() {
+			var gallery = getElemById('image-gallery');
+			var browse = getElemById('load-image');
+			var remote = getElemById('remote-url');
+			var load_remote = getElemById('load-remote');
+
+			remote.addEventListener('change', function(){
+				loadRemoteImage(this.value);
+			});
+
+			load_remote.addEventListener('click', function(){
+				loadRemoteImage(remote.value);
+			});
+
+			browse.addEventListener('click', ImageReader.load);
+			gallery.addEventListener('click', pickImage);
+			imgSource.addEventListener('load', update);
+
+			InputSliderManager.subscribe('scale', setScale);
+			InputSliderManager.setValue('scale', scale);
+			imgState = 'border1';
+			loadRemoteImage('https://mdn.mozillademos.org/files/6007/border-image-1.png');
+			toggleGallery();
+		};
+
+		return {
+			init: init,
+			getScale : getScale,
+			loadRemoteImage: loadRemoteImage
+		};
+
+	})();
+
+	var GuideLine = function GuideLine(node) {
+		var topic = node.getAttribute('data-topic');
+		var axis = node.getAttribute('data-axis');
+
+		this.node = node;
+		this.topic = topic;
+		this.axis = axis;
+		this.info = topic.split('-')[1];
+
+		this.position = 0;
+		this.value = 0;
+		this.unit = 0;
+		this.max = 0;
+		this.pos = positions.indexOf(this.info);
+
+		guidelines[topic] = this;
+
+		var relative_container = document.createElement('div');
+		var tooltip = document.createElement('div');
+		var tooltip2 = document.createElement('div');
+
+		tooltip.className = 'tooltip';
+		tooltip.setAttribute('data-info', this.info);
+
+		tooltip2.className = 'tooltip2';
+		tooltip2.textContent = this.info;
+		tooltip2.setAttribute('data-info', this.info);
+
+		this.tooltip = tooltip;
+
+		relative_container.appendChild(tooltip);
+		relative_container.appendChild(tooltip2);
+		node.appendChild(relative_container);
+
+		var startX = 0;
+		var startY = 0;
+		var start = 0;
+
+		var startDrag = function startDrag(e) {
+			startX = e.clientX;
+			startY = e.clientY;
+			start = guidelines[topic].position;
+			document.body.setAttribute('data-move', axis);
+			relative_container.setAttribute('data-active', '');
+			node.setAttribute('data-active', '');
+
+			document.addEventListener('mousemove', updateGuideline);
+			document.addEventListener('mouseup', endDrag);
+		};
+
+		var endDrag = function endDrag() {
+			document.body.removeAttribute('data-move');
+			relative_container.removeAttribute('data-active');
+			node.removeAttribute('data-active');
+
+			document.removeEventListener('mousemove', updateGuideline);
+		};
+
+		var updateGuideline = function updateGuideline(e) {
+			var value;
+			if (topic === 'slice-top')
+				value = e.clientY - startY + start;
+
+			if (topic === 'slice-right')
+				value = startX - e.clientX + start;
+
+			if (topic === 'slice-bottom')
+				value = startY - e.clientY + start;
+
+			if (topic === 'slice-left')
+				value = e.clientX - startX + start;
+
+			if (this.unit === 0)
+				InputSliderManager.setValue(topic, value * 1 / ImageControl.getScale() | 0);
+			else {
+				InputSliderManager.setValue(topic, (value * 100 / (this.max * ImageControl.getScale())) | 0);
+			}
+
+		}.bind(this);
+
+		node.addEventListener("mousedown", startDrag);
+
+		InputSliderManager.subscribe(topic, this.setPosition.bind(this));
+		InputSliderManager.setValue(topic, this.position);
+	};
+
+
+	GuideLine.prototype.updateGuidelinePos = function updateGuidelinePos() {
+		if (this.unit === 0)
+			this.position = this.value * ImageControl.getScale() | 0;
+		else
+			this.position = this.value * this.max * ImageControl.getScale() / 100 | 0;
+
+		this.node.style[this.info] = this.position + 'px';
+	};
+
+	GuideLine.prototype.setPosition = function setPosition(value) {
+		this.value = value;
+		this.tooltip.textContent = value;
+		this.updateGuidelinePos();
+		Tool.setBorderSlice(this.pos, value);
+	};
+
+	GuideLine.prototype.setMax = function setMax(max) {
+		this.max = max;
+		this.updateLimit();
+	};
+
+	GuideLine.prototype.updateLimit = function updateLimit() {
+		if (this.unit === 1)
+			InputSliderManager.setMax(this.topic, 100);
+		else
+			InputSliderManager.setMax(this.topic, this.max);
+	};
+
+	GuideLine.prototype.setUnit = function setUnit(type) {
+		if (type === '%')	this.unit = 1;
+		if (type === '')	this.unit = 0;
+		this.updateLimit();
+	};
+
+	/*
+	 * Unit panel
+	 */
+	var UnitPanel = (function UnitPanel () {
+
+		var panel;
+		var title;
+		var precision;
+		var step;
+		var unit_topic = null; // settings are made for this topic
+		var step_option = [1, 0.1, 0.01];
+
+		var updatePrecision = function updatePrecision(value) {
+			InputSliderManager.setPrecision('unit-step', value);
+			InputSliderManager.setStep('unit-step', step_option[value]);
+			InputSliderManager.setMin('unit-step', step_option[value]);
+
+			if (unit_topic)
+				InputSliderManager.setPrecision(unit_topic, value);
+		};
+
+		var updateUnitSettings = function updateUnitSettings(value) {
+			if (unit_topic)
+				InputSliderManager.setStep(unit_topic, value);
+		};
+
+		var show = function show(e) {
+			var topic = e.target.getAttribute('data-topic');
+			var precision = InputSliderManager.getPrecision(topic);
+			var step = InputSliderManager.getStep(topic);
+
+			unit_topic = topic;
+			title.textContent = topic;
+
+			panel.setAttribute('data-active', 'true');
+			panel.style.top = e.target.offsetTop - 40 + 'px';
+			panel.style.left = e.target.offsetLeft + 30 + 'px';
+
+			InputSliderManager.setValue('unit-precision', precision);
+			InputSliderManager.setValue('unit-step', step);
+		};
+
+		var init = function init() {
+			panel = document.createElement('div');
+			title = document.createElement('div');
+			var close = document.createElement('div');
+
+			step = InputSliderManager.createSlider('unit-step', 'step');
+			precision = InputSliderManager.createSlider('unit-precision', 'precision');
+
+			InputSliderManager.setStep('unit-precision', 1);
+			InputSliderManager.setMax('unit-precision', 2);
+			InputSliderManager.setValue('unit-precision', 2);
+			InputSliderManager.setSensivity('unit-precision', 20);
+
+			InputSliderManager.setValue('unit-step', 1);
+			InputSliderManager.setStep('unit-step', 0.01);
+			InputSliderManager.setPrecision('unit-step', 2);
+
+			InputSliderManager.subscribe('unit-precision', updatePrecision);
+			InputSliderManager.subscribe('unit-step', updateUnitSettings);
+
+			close.addEventListener('click', function () {
+				panel.setAttribute('data-active', 'false');
+			});
+
+			title.textContent = 'Properties';
+			title.className = 'title';
+			close.className = 'close';
+			panel.id = 'unit-settings';
+			panel.setAttribute('data-active', 'false');
+			panel.appendChild(title);
+			panel.appendChild(precision);
+			panel.appendChild(step);
+			panel.appendChild(close);
+			document.body.appendChild(panel);
+		};
+
+		return {
+			init : init,
+			show : show
+		};
+
+	})();
+
+	/**
+	 * Tool Manager
+	 */
+	var Tool = (function Tool() {
+		var preview_area;
+		var dropdown_unit_options = [
+			{ '' : '--', '%' : '%'},
+			{ 'px' : 'px', '%' : '%', 'em' : 'em'},
+			{ 'px' : 'px', 'em' : 'em'},
+		];
+
+		var border_slice = [];
+		var border_width = [];
+		var border_outset = [];
+
+		var border_slice_values = [];
+		var border_width_values = [];
+		var border_outset_values = [];
+
+		var border_slice_units = ['', '', '', ''];
+		var border_width_units = ['px', 'px', 'px', 'px'];
+		var border_outset_units = ['px', 'px', 'px', 'px'];
+
+		var border_fill = false;
+		var border_repeat = ['round', 'round'];
+		var CSS_code = {
+			'source' : null,
+			'slice' : null,
+			'width' : null,
+			'outset' : null,
+			'repeat' : null
+		};
+
+		var setBorderSlice = function setBorderSlice(positionID, value) {
+			border_slice[positionID] = value + border_slice_units[positionID];
+			updateBorderSlice();
+		};
+
+		var updateBorderSlice = function updateBorderSlice() {
+			var value = border_slice.join(' ');
+			if (border_fill === true)
+				value += ' fill';
+
+			preview.style.borderImageSlice = value;
+			setOutputCSS('slice', value);
+		};
+
+		var setBorderFill = function setBorderFill(value) {
+			border_fill = value;
+			var bimgslice = border_slice.join(' ');;
+			if (value === true)
+				bimgslice += ' fill';
+
+			preview.style.borderImageSlice = bimgslice;
+		};
+
+		var updateBorderWidth = function updateBorderWidth() {
+			var value = border_width.join(' ');
+			preview.style.borderImageWidth = value;
+			setOutputCSS('width', value);
+		};
+
+		var updateBorderOutset = function updateBorderOutset() {
+			var value = border_outset.join(' ');
+			preview.style.borderImageOutset = border_outset.join(' ');
+			setOutputCSS('outset', value);
+		};
+
+		var setBorderRepeat = function setBorderRepeat(obj) {
+			border_repeat[obj.value] = obj.name;
+			var value = border_repeat.join(' ');
+			preview.style.borderImageRepeat = value;
+			setOutputCSS('repeat', value);
+		};
+
+		var setOutputCSS = function setOutputCSS(topic, value) {
+			CSS_code[topic].textContent = value + ';';
+		};
+
+		var setPreviewFontSize = function setPreviewFontSize(value) {
+			preview.style.fontSize = value + 'px';
+		};
+
+		var setPreviewWidth = function setPreviewWidth(value) {
+			preview.style.width = value + 'px';
+		};
+
+		var setPreviewHeight = function setPreviewHeight(value) {
+			preview.style.height = value + 'px';
+		};
+
+		var setPreviewAreaHeight = function setPreviewAreaHeight(value) {
+			preview_area.style.height = value + 'px';
+		};
+
+		var updateDragOption = function updateDragOption(value) {
+			if (value === true)
+				subject.setAttribute('data-draggable', 'true');
+			else
+				subject.removeAttribute('data-draggable');
+		};
+
+		var createProperty = function createProperty(topic, labelID, optionsID) {
+
+			var slider = InputSliderManager.createSlider(topic, positions[labelID]);
+			var dropdown = DropDownManager.createDropDown(topic, dropdown_unit_options[optionsID]);
+
+			InputSliderManager.setSensivity(topic, 3);
+			InputSliderManager.setPrecision(topic, 1);
+
+			var property = document.createElement('div');
+			var config = document.createElement('div');
+
+			property.className = 'property';
+			config.className = 'config';
+			config.setAttribute('data-topic', topic);
+			config.addEventListener('click', UnitPanel.show);
+
+			property.appendChild(slider);
+			property.appendChild(dropdown);
+			property.appendChild(config);
+
+			return property;
+		};
+
+		var initBorderSliceControls = function initBorderSliceControls() {
+			var container = getElemById('border-slice-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_slice_values[id] = value;
+					border_slice[id] = value + border_slice_units[id];
+					updateBorderSlice();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					guidelines[topic].setUnit(obj.value);
+					border_slice_units[id] = obj.value;
+					border_slice[id] = border_slice_values[id] + obj.value;
+					updateBorderSlice();
+				});
+			};
+
+			for (var i = 0; i < positions.length; i++) {
+				var topic = 'slice-' + positions[i];
+				var property = createProperty(topic, i, 0);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+
+			container.appendChild(container.children[1]);
+
+		};
+
+		var initBorderWidthControls = function initBorderWidthControls() {
+			var container = getElemById('border-width-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_width_values[id] = value;
+					border_width[id] = value + border_width_units[id];
+					updateBorderWidth();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					if (obj.value === '%')
+						InputSliderManager.setMax(topic, 100);
+					else
+						InputSliderManager.setMax(topic, 1000);
+
+					border_width_units[id] = obj.value;
+					border_width[id] = border_width_values[id] + obj.value;
+					updateBorderWidth();
+				});
+			};
+
+			for (var i = 0; i < positions.length; i++) {
+				var topic = 'width-' + positions[i];
+				var property = createProperty(topic, i, 1);
+				InputSliderManager.setMax(topic, 1000);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+		};
+
+		var initBorderOutsetControls = function initBorderOutsetControls() {
+
+			var container = getElemById('border-outset-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_outset_values[id] = value;
+					border_outset[id] = value + border_outset_units[id];
+					updateBorderOutset();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					border_outset_units[id] = obj.value;
+					border_outset[id] = border_outset_values[id] + obj.value;
+					updateBorderOutset();
+				});
+			};
+
+			for (var i = 0; i < positions.length; i++) {
+				var topic = 'outset-' + positions[i];
+				var property = createProperty(topic, i, 2);
+				InputSliderManager.setMax(topic, 1000);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+		};
+
+		var init = function init() {
+
+			var gallery =
+			subject = getElemById('subject');
+			preview = getElemById("preview");
+			preview_area = getElemById("preview_section");
+
+
+			CSS_code['source'] = getElemById("out-border-source");
+			CSS_code['slice'] = getElemById("out-border-slice");
+			CSS_code['width'] = getElemById("out-border-width");
+			CSS_code['outset'] = getElemById("out-border-outset");
+			CSS_code['repeat'] = getElemById("out-border-repeat");
+
+			initBorderSliceControls();
+			initBorderWidthControls();
+			initBorderOutsetControls();
+
+			var elem = document.querySelectorAll('.guideline');
+			var size = elem.length;
+			for (var i = 0; i < size; i++)
+				new GuideLine(elem[i]);
+
+			PreviewControl.init();
+
+			ButtonManager.subscribe('slice-fill',setBorderFill);
+			ButtonManager.subscribe('drag-subject', updateDragOption);
+			ButtonManager.setValue('drag-subject', false);
+
+			DropDownManager.subscribe('image-repeat-X', setBorderRepeat);
+			DropDownManager.subscribe('image-repeat-Y', setBorderRepeat);
+
+			InputSliderManager.subscribe('preview-area-height', setPreviewAreaHeight);
+			InputSliderManager.subscribe('preview-width', setPreviewWidth);
+			InputSliderManager.subscribe('preview-height', setPreviewHeight);
+			InputSliderManager.subscribe('font-size', setPreviewFontSize);
+			InputSliderManager.setValue('preview-width', 300);
+			InputSliderManager.setValue('preview-height', 200);
+		};
+
+		return {
+			init: init,
+			setOutputCSS: setOutputCSS,
+			setBorderSlice: setBorderSlice
+		};
+
+	})();
+
+	/**
+	 * Init Tool
+	 */
+	var init = function init() {
+		InputSliderManager.init();
+		DropDownManager.init();
+		ButtonManager.init();
+		UnitPanel.init();
+		Tool.init();
+		ImageControl.init();
+	};
+
+	return {
+		init : init
+	};
+
+})();
+
+
+
+ +

{{ EmbedLiveSample('Border_Image_Generator', '100%', '1270px') }}

+ +

 

diff --git a/files/pt-br/web/css/css_background_and_borders/border-radius_generator/index.html b/files/pt-br/web/css/css_background_and_borders/border-radius_generator/index.html new file mode 100644 index 0000000000..a7db08eb69 --- /dev/null +++ b/files/pt-br/web/css/css_background_and_borders/border-radius_generator/index.html @@ -0,0 +1,1593 @@ +--- +title: Gerador de Border-radius +slug: Web/CSS/Tools/Border-radius_generator +tags: + - CSS + - Ferramentas +translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator +--- +

Esta ferramenta pode ser utilizada para gerar o efeito {{cssxref("border-radius")}} em CSS3.

+
+

border-radius

+

HTML Content

+ 
<div id="container">
+    <div class="group section">
+        <div id="preview" class="col span_12">
+            <div id="subject">
+                <div id="top-left" class="radius-container"
+                    data-X="left" data-Y="top">
+                </div>
+                <div id="top-right" class="radius-container"
+                    data-X="right" data-Y="top">
+                </div>
+                <div id="bottom-right" class="radius-container"
+                    data-X="right" data-Y="bottom">
+                </div>
+                <div id="bottom-left" class="radius-container"
+                    data-X="left" data-Y="bottom">
+                </div>
+
+                <div id="radius-ui-sliders">
+                    <div id="tlr" class="ui-input-slider" data-topic="top-left"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="tlw" class="ui-input-slider" data-topic="top-left-w"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="tlh" class="ui-input-slider" data-topic="top-left-h"
+                        data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="trr" class="ui-input-slider" data-topic="top-right"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="trw" class="ui-input-slider" data-topic="top-right-w"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="trh" class="ui-input-slider" data-topic="top-right-h"
+                        data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="brr" class="ui-input-slider" data-topic="bottom-right"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="brw" class="ui-input-slider" data-topic="bottom-right-w"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="brh" class="ui-input-slider" data-topic="bottom-right-h"
+                        data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="blr" class="ui-input-slider" data-topic="bottom-left"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="blw" class="ui-input-slider" data-topic="bottom-left-w"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="blh" class="ui-input-slider" data-topic="bottom-left-h"
+                        data-unit=" px" data-sensivity="2"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div id="controls" class="group section">
+
+        <div class="group section">
+            <div id="dimensions">
+                <div class="ui-input-slider" data-topic="width" data-info="width"
+                     data-unit=" px" data-min="150" data-max="700" data-sensivity="1"></div>
+
+                <div class="ui-input-slider" data-topic="height" data-info="height"
+                    data-unit=" px" data-min="75" data-max="350" data-sensivity="1"></div>
+            </div>
+
+            <div id="output"></div>
+        </div>
+
+        <div class="group section">
+            <div id="radius-lock">
+                <div class="info"> rounded corner </div>
+                <div class="ui-checkbox" data-topic='top-left'></div>
+                <div class="ui-checkbox" data-topic='top-right'></div>
+                <div class="ui-checkbox" data-topic='bottom-right'></div>
+                <div class="ui-checkbox" data-topic='bottom-left'></div>
+            </div>
+
+            <div id="unit-selection">
+                <div class="info"> select border units </div>
+            </div>
+        </div>
+
+    </div>
+</div>
+
+

CSS Content

+ 
/*  GRID OF TEN
+ * ========================================================================== */
+
+.span_12 {
+	width: 100%;
+}
+
+.span_11 {
+	width: 91.46%;
+}
+
+.span_10 {
+	width: 83%;
+}
+
+.span_9 {
+	width: 74.54%;
+}
+
+.span_8 {
+	width: 66.08%;
+}
+
+.span_7 {
+	width: 57.62%;
+}
+
+.span_6 {
+	width: 49.16%;
+}
+
+.span_5 {
+	width: 40.7%;
+}
+
+.span_4 {
+	width: 32.24%;
+}
+
+.span_3 {
+	width: 23.78%;
+}
+
+.span_2 {
+	width: 15.32%;
+}
+
+.span_1 {
+	width: 6.86%;
+}
+
+
+
+
+/*  SECTIONS
+ * ========================================================================== */
+
+.section {
+	clear: both;
+	padding: 0px;
+	margin: 0px;
+}
+
+/*  GROUPING
+ * ========================================================================== */
+
+
+.group:before, .group:after {
+    content: "";
+    display: table;
+}
+
+.group:after {
+    clear:both;
+}
+
+.group {
+    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
+}
+
+/*  GRID COLUMN SETUP
+ * ========================================================================== */
+
+.col {
+	display: block;
+	float:left;
+	margin: 1% 0 1% 1.6%;
+}
+
+.col:first-child {
+	margin-left: 0;
+} /* all browsers except IE6 and lower */
+
+
+/*
+ * UI Component
+ */
+
+.ui-input-slider-container {
+	height: 20px;
+	margin: 10px 0;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider-container * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider > input {
+	margin: 0;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-input-slider-info {
+	width: 90px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-left, .ui-input-slider-right {
+	width: 16px;
+	cursor: pointer;
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
+}
+
+.ui-input-slider-right {
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
+}
+
+.ui-input-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 5px;
+	color: #FFF;
+	font-weight: bold;
+	line-height: 14px;
+	text-align: center;
+}
+
+.ui-input-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+/*
+ * UI Component
+ */
+
+/* Checkbox */
+
+.ui-checkbox {
+	text-align: center;
+	font-size: 16px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	line-height: 1.5em;
+	color: #FFF;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-checkbox > input {
+ 	display: none;
+}
+
+.ui-checkbox > label {
+	font-size: 12px;
+	padding: 0.333em 1.666em 0.5em;
+	height: 1em;
+	line-height: 1em;
+
+	background-color: #888;
+	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	color: #FFF;
+	border-radius: 3px;
+	font-weight: bold;
+	float: left;
+}
+
+.ui-checkbox .text {
+	padding-left: 34px;
+	background-position: center left 10px;
+}
+
+.ui-checkbox .left {
+	padding-right: 34px;
+	padding-left: 1.666em;
+	background-position: center right 10px;
+}
+
+.ui-checkbox > label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox > input:checked + label {
+	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
+	background-color: #379B4A;
+}
+
+body {
+	max-width: 1000px;
+	margin: 0 auto;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+/******************************************************************************/
+/******************************************************************************/
+/*
+ * Preview Area
+ */
+
+#preview {
+	height: 500px;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	text-align: center;
+	overflow: hidden;
+	position: relative;
+}
+
+#preview .content {
+	width: 100%;
+	height: 100%;
+	display: block;
+}
+
+#preview input {
+	color: #333;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+}
+
+#subject {
+	width: 400px;
+	height: 150px;
+	margin: 0 auto;
+	border: 3px solid #C60;
+	background: #FFF;
+	position: relative;
+}
+
+.radius {
+	width: 50%;
+	height: 50%;
+	border: 1px solid #CCC;
+	display: none;
+	position: absolute;
+	z-index: 1;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.handle {
+	width: 16px;
+	height: 16px;
+	position: absolute;
+	z-index: 2;
+}
+
+.handle-top-left {
+	top: -12px;
+	left: -12px;
+	cursor: se-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top left no-repeat;
+}
+
+.handle-top-right {
+	top: -12px;
+	right: -12px;
+	cursor: sw-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top right no-repeat;
+}
+
+.handle-bottom-right {
+	bottom: -12px;
+	right: -12px;
+	cursor: nw-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") bottom right no-repeat;
+}
+
+.handle-bottom-left {
+	bottom: -12px;
+	left: -12px;
+	cursor: ne-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") bottom left no-repeat;
+}
+
+
+.radius-container {
+	position: absolute;
+	display : block;
+	z-index: 1;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+/* TOP LEFT */
+#top-left {
+	top: 0;
+	left: 0;
+}
+
+#top-left .radius {
+	border-top-left-radius: 100%;
+	top: 0;
+	left: 0;
+}
+
+/* TOP RIGHT */
+#top-right {
+	top: 0;
+	right: 0;
+}
+
+#top-right .radius {
+	border-top-right-radius: 100%;
+	top: 0;
+	right: 0;
+}
+
+/* BOTTOM RIGHT */
+#bottom-right {
+	bottom: 0;
+	right: 0;
+}
+
+#bottom-right .radius {
+	border-bottom-right-radius: 100%;
+	bottom: 0;
+	right: 0;
+}
+
+/* BOTTOM lEFT */
+#bottom-left {
+	bottom: 0;
+	left: 0;
+}
+
+#bottom-left .radius {
+	border-bottom-left-radius: 100%;
+	bottom: 0;
+}
+
+/* INPUT SLIDERS */
+
+#preview .ui-input-slider {
+	margin: 10px;
+	position: absolute;
+	z-index: 10;
+}
+
+#radius-ui-sliders {
+	width: 100%;
+	height: 100%;
+	min-height: 75px;
+	min-width: 150px;
+	padding: 20px 50px;
+	top: -20px;
+	left: -50px;
+	position: relative;
+}
+
+#tlr {
+	top: -30px;
+	left: -50px;
+	display: none;
+}
+
+#tlw {
+	top: -30px;
+	left: 30px;
+}
+
+#tlh {
+	top: 20px;
+	left: -50px;
+}
+
+#trr {
+	top: -30px;
+	right: -50px;
+	display: none;
+}
+
+#trw {
+	top: -30px;
+	right: 30px;
+}
+
+#trh {
+	top: 20px;
+	right: -50px;
+}
+
+#brr {
+	bottom: -30px;
+	right: -50px;
+	display: none;
+}
+
+#brw {
+	bottom: -30px;
+	right: 30px;
+}
+
+#brh {
+	bottom: 20px;
+	right: -50px;
+}
+
+#blr {
+	bottom: -30px;
+	left: -50px;
+	display: none;
+}
+
+#blw {
+	bottom: -30px;
+	left: 30px;
+}
+
+#blh {
+	bottom: 20px;
+	left: -50px;
+}
+
+#preview .ui-input-slider-left, #preview .ui-input-slider-right {
+	visibility: hidden;
+}
+
+#preview .ui-input-slider-container:hover .ui-input-slider-left {
+	visibility: visible;
+}
+
+#preview .ui-input-slider-container:hover .ui-input-slider-right {
+	visibility: visible;
+}
+
+/*
+ *
+ */
+
+#unit-selection {
+	width: 200px;
+	height: 75px;
+	margin: 30px 30px 0 0;
+	padding: 30px;
+	border: 3px solid #555;
+	border-radius: 10px;
+	position: relative;
+	float: right;
+}
+
+#unit-selection .info {
+	height: 20%;
+	width: 100%;
+	line-height: 20%;
+	font-size: 20px;
+	text-align: center;
+	position: relative;
+	top: 40%;
+}
+
+#unit-selection .dropdown {
+	width: 50px;
+	height: 20px;
+	margin: 10px;
+	padding: 0;
+	border-radius: 3px;
+	position: absolute;
+	overflow: hidden;
+}
+
+#unit-selection select {
+	width: 50px;
+	height: 20px;
+	marign: 0;
+	padding: 0 0 0 10px;
+	background: #555;
+	border: 1px solid #555;
+	border: none;
+	color: #FFF;
+	float: left;
+}
+
+#unit-selection select option {
+	background: #FFF;
+	color: #333;
+}
+
+#unit-selection select:hover {
+	cursor: pointer;
+}
+
+#unit-selection .dropdown:before {
+	content: "";
+	width: 18px;
+	height: 20px;
+	display: block;
+	background-color: #555;
+	background-image: url("https://mdn.mozillademos.org/files/5675/dropdown.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+	top: 0px;
+	right: 0px;
+	position: absolute;
+	z-index: 1;
+	pointer-events: none;
+}
+
+#unit-selection .unit-top-left {
+	top: 0;
+	left: 0;
+	display: none;
+}
+
+#unit-selection .unit-top-left-w {
+	top: -22px;
+	left: 30px;
+}
+
+#unit-selection .unit-top-left-h {
+	top: 20px;
+	left: -37px;
+}
+
+#unit-selection .unit-top-right {
+	top: 0;
+	right: 0;
+	display: none;
+}
+
+#unit-selection .unit-top-right-w {
+	top: -22px;
+	right: 30px;
+}
+
+#unit-selection .unit-top-right-h {
+	top: 20px;
+	right: -37px;
+}
+
+#unit-selection .unit-bottom-right {
+	bottom: 0;
+	right: 0;
+	display: none;
+}
+
+#unit-selection .unit-bottom-right-w {
+	bottom: -22px;
+	right: 30px;
+}
+
+#unit-selection .unit-bottom-right-h {
+	bottom: 20px;
+	right: -37px;
+}
+
+#unit-selection .unit-bottom-left {
+	bottom: 0;
+	left: 0;
+	display: none;
+}
+
+#unit-selection .unit-bottom-left-w {
+	bottom: -22px;
+	left: 30px;
+}
+
+#unit-selection .unit-bottom-left-h {
+	bottom: 20px;
+	left: -37px;
+}
+
+/******************************************************************************/
+/******************************************************************************/
+
+
+#radius-lock {
+	width: 200px;
+	height: 75px;
+	margin: 30px 0 0 30px;
+	padding: 30px;
+	border: 3px solid #555;
+	border-radius: 10px;
+	position: relative;
+	float: left;
+}
+
+#radius-lock .ui-checkbox {
+	color: #FFF;
+	position: absolute;
+}
+
+#radius-lock .ui-checkbox > label {
+	height: 20px;
+	width: 34px;
+	padding: 0;
+}
+
+#radius-lock .info {
+	height: 20%;
+	width: 100%;
+	line-height: 20%;
+	font-size: 20px;
+	text-align: center;
+	position: relative;
+	top: 40%;
+}
+
+#radius-lock [data-topic="top-left"] {
+	top: 10px;
+	left: 10px;
+}
+
+#radius-lock [data-topic="top-right"] {
+	top: 10px;
+	right: 10px;
+}
+
+#radius-lock [data-topic="bottom-right"] {
+	bottom: 10px;
+	right: 10px;
+}
+
+#radius-lock [data-topic="bottom-left"] {
+	bottom: 10px;
+	left: 10px;
+}
+
+/**
+ * Controls
+ */
+
+#dimensions {
+	width: 200px;
+	color: #444;
+	float:left;
+}
+
+#dimensions input {
+	background: #555;
+	color: #FFF;
+	border: none;
+	border-radius: 3px;
+}
+
+#output {
+	width: 500px;
+	padding: 10px 0;
+	margin: 10px 0;
+	color: #555;
+	text-align: center;
+	border: 1px dashed #999;
+	border-radius: 3px;
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+	user-select: text;
+
+	float: right;
+}
+
+
+
+

JavaScript Content

+ 
'use strict';
+
+
+/**
+ * UI-InputSliderManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseInt(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		subscribe(obj.topic, function(value) {
+			input.value = value + obj.unit;
+		});
+
+		return input;
+	}
+
+	var SliderComponent = function SliderComponent(obj, sign) {
+		var slider = document.createElement('div');
+		var startX = null;
+		var start_value = 0;
+
+		slider.addEventListener("click", function(e) {
+			setValue(obj.topic, obj.value + obj.step * sign);
+		});
+
+		slider.addEventListener("mousedown", function(e) {
+			startX = e.clientX;
+			start_value = obj.value;
+			document.body.style.cursor = "e-resize";
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		document.addEventListener("mouseup", function(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			document.body.style.cursor = "auto";
+			slider.style.cursor = "pointer";
+		});
+
+		var sliderMotion = function sliderMotion(e) {
+			slider.style.cursor = "e-resize";
+			var delta = (e.clientX - startX) / obj.sensivity | 0;
+			var value = delta * obj.step + start_value;
+			setValue(obj.topic, value);
+		}
+
+		return slider;
+	}
+
+	var InputSlider = function(node) {
+		var min		= node.getAttribute('data-min') | 0;
+		var max		= node.getAttribute('data-max') | 0;
+		var step	= node.getAttribute('data-step') | 0;
+		var value	= node.getAttribute('data-value') | 0;
+		var topic	= node.getAttribute('data-topic');
+		var unit	= node.getAttribute('data-unit');
+		var name 	= node.getAttribute('data-info');
+		var sensivity = node.getAttribute('data-sensivity') | 0;
+
+		this.min = min;
+		this.max = max > 0 ? max : 100;
+		this.step = step === 0 ? 1 : step;
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit;
+		this.sensivity = sensivity > 0 ? sensivity : 5;
+
+		var input = new InputComponent(this);
+		var slider_left  = new SliderComponent(this, -1);
+		var slider_right = new SliderComponent(this,  1);
+
+		slider_left.className = 'ui-input-slider-left';
+		slider_right.className = 'ui-input-slider-right';
+
+		if (name) {
+			var info = document.createElement('span');
+			info.className = 'ui-input-slider-info';
+			info.textContent = name;
+			node.appendChild(info);
+		}
+
+		node.appendChild(slider_left);
+		node.appendChild(input);
+		node.appendChild(slider_right);
+		node.className = 'ui-input-slider ui-input-slider-container';
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	}
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		if (value > slider.max) value = slider.max;
+		if (value < slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		if (send_notify !== undefined && send_notify === false) {
+			slider.input.value = value + slider.unit;
+			return;
+		}
+
+		notify.call(slider);
+	}
+
+	var setMax = function setMax(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.max = value;
+		setValue(topic, slider.value);
+	}
+
+	var setMin = function setMin(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.min = value;
+		setValue(topic, slider.value);
+	}
+
+	var setUnit = function setUnit(topic, unit) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.unit = unit;
+		setValue(topic, slider.value);
+	}
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	}
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	}
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	}
+
+	var notify = function notify() {
+		for (var i in subscribers[this.topic]) {
+			subscribers[this.topic][i](this.value);
+		}
+	}
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new InputSlider(elem[i]);
+	}
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		getNode : getNode,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+/**
+ * UI-ButtonManager
+ */
+
+var ButtonManager = (function CheckBoxManager() {
+
+	var subscribers = [];
+	var buttons = [];
+
+	var CheckBox = function CheckBox(node) {
+		var topic = node.getAttribute('data-topic');
+		var state = node.getAttribute('data-state');
+		var name = node.getAttribute('data-label');
+		var align = node.getAttribute('data-text-on');
+
+		state = (state === "true");
+
+		var checkbox = document.createElement("input");
+		var label = document.createElement("label");
+
+		var id = 'checkbox-' + topic;
+		checkbox.id = id;
+		checkbox.setAttribute('type', 'checkbox');
+		checkbox.checked = state;
+
+		label.setAttribute('for', id);
+		if (name) {
+			label.className = 'text';
+			if (align)
+				label.className += ' ' + align;
+			label.textContent = name;
+		}
+
+		node.appendChild(checkbox);
+		node.appendChild(label);
+
+		this.node = node;
+		this.topic = topic;
+		this.checkbox = checkbox;
+
+		checkbox.addEventListener('change', function(e) {
+			notify.call(this);
+		}.bind(this));
+
+		buttons[topic] = this;
+	}
+
+	var getNode =  function getNode(topic) {
+		return buttons[topic].node;
+	}
+
+	var setValue = function setValue(topic, value) {
+		try {
+			buttons[topic].checkbox.checked = value;
+		}
+		catch(error) {
+			console.log(error);
+		}
+	}
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	}
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	}
+
+	var notify = function notify() {
+		for (var i = 0; i < subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.checkbox.checked);
+	}
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-checkbox');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new CheckBox(elem[i]);
+	}
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+
+window.addEventListener("load", function() {
+	BorderRadius.init();
+});
+
+var BorderRadius = (function BorderRadius() {
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	/**
+	 * Shadow dragging
+	 */
+	var PreviewMouseTracking = (function Drag() {
+		var active = false;
+		var lastX = 0;
+		var lastY = 0;
+		var subscribers = [];
+
+		var init = function init(id) {
+			var elem = getElemById(id);
+			elem.addEventListener('mousedown', dragStart, false);
+			document.addEventListener('mouseup', dragEnd, false);
+		}
+
+		var dragStart = function dragStart(e) {
+			if (e.button !== 0)
+				return;
+
+			active = true;
+			lastX = e.clientX;
+			lastY = e.clientY;
+			document.addEventListener('mousemove', mouseDrag, false);
+		}
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0)
+				return;
+
+			if (active === true) {
+				active = false;
+				document.removeEventListener('mousemove', mouseDrag, false);
+			}
+		}
+
+		var mouseDrag = function mouseDrag(e) {
+			notify(e.clientX - lastX, e.clientY - lastY);
+			lastX = e.clientX;
+			lastY = e.clientY;
+		}
+
+		var subscribe = function subscribe(callback) {
+			subscribers.push(callback);
+		}
+
+		var unsubscribe = function unsubscribe(callback) {
+			var index = subscribers.indexOf(callback);
+			subscribers.splice(index, 1);
+		}
+
+		var notify = function notify(deltaX, deltaY) {
+			for (var i in subscribers)
+				subscribers[i](deltaX, deltaY);
+		}
+
+		return {
+			init : init,
+			subscribe : subscribe,
+			unsubscribe : unsubscribe
+		}
+
+	})();
+
+	var subject;
+	var units = ['px', '%'];
+	var output = null;
+
+	var UnitSelector = function UnitSelector(topic) {
+
+		this.container = document.createElement("div");
+		this.select = document.createElement("select");
+		for (var i in units) {
+			var option = document.createElement("option");
+			option.value = i;
+			option.textContent = units[i];
+			this.select.appendChild(option);
+		}
+
+		this.container.className = 'dropdown ' + 'unit-' + topic;
+		this.container.appendChild(this.select);
+	}
+
+	UnitSelector.prototype.setValue = function setValue(value) {
+		this.salect.value = value;
+	}
+
+
+	var RadiusContainer = function RadiusContainer(node) {
+		var radius = document.createElement('div');
+		var handle = document.createElement('div');
+		var x = node.getAttribute('data-x');
+		var y = node.getAttribute('data-y');
+		var active = false;
+
+		this.id = node.id;
+		this.node = node;
+		this.radius = radius;
+		this.handle = handle;
+		this.width = 100;
+		this.height = 50;
+		this.size = 0;
+		this.rounded = false;
+
+		this.unitX = 0;
+		this.unitY = 0;
+		this.unitR = 0;
+
+		this.maxW = 100;
+		this.maxH = 100;
+		this.maxR = 100;
+
+		this.topic = y + '-' + x;
+
+		var sliderW = InputSliderManager.getNode(this.topic + '-w');
+		var sliderH = InputSliderManager.getNode(this.topic + '-h');
+		var sliderR = InputSliderManager.getNode(this.topic);
+
+		this.setUnitX(this.unitX);
+		this.setUnitY(this.unitY);
+		this.setUnitR(this.unitR);
+
+		this.updateWidth();
+		this.updateHeight();
+		this.updateRadius();
+
+		if (x === 'left')	this.resizeX =  1;
+		if (x === 'right')	this.resizeX = -1;
+		if (y === 'top')	this.resizeY =  1;
+		if (y === 'bottom')	this.resizeY = -1;
+
+		radius.className = 'radius';
+
+		var unit_selector = document.getElementById("unit-selection");
+		var unitW = new UnitSelector(this.topic + '-w');
+		var unitH = new UnitSelector(this.topic + '-h');
+		var unitR = new UnitSelector(this.topic);
+
+		unit_selector.appendChild(unitW.container);
+		unit_selector.appendChild(unitH.container);
+		unit_selector.appendChild(unitR.container);
+		node.appendChild(radius);
+		subject.appendChild(handle);
+
+		unitW.select.addEventListener('change', function(e) {
+			this.setUnitX(e.target.value | 0);
+		}.bind(this));
+
+		unitH.select.addEventListener('change', function(e) {
+			this.setUnitY(e.target.value | 0);
+		}.bind(this));
+
+		unitR.select.addEventListener('change', function(e) {
+			this.setUnitR(e.target.value | 0);
+		}.bind(this));
+
+		if (x === 'left' && y == 'top') handle.className = 'handle handle-top-left'
+		if (x === 'right' && y == 'top') handle.className = 'handle handle-top-right';
+		if (x === 'right' && y == 'bottom') handle.className = 'handle handle-bottom-right';
+		if (x === 'left' && y == 'bottom') 	handle.className = 'handle handle-bottom-left';
+
+		handle.addEventListener("mousedown", function(e) {
+			active = true;
+			this.radius.style.display = 'block';
+			PreviewMouseTracking.subscribe(this.updateContainer.bind(this));
+		}.bind(this));
+
+		document.addEventListener("mouseup", function(e) {
+			this.radius.style.display = 'none';
+			if (active === true)
+				PreviewMouseTracking.unsubscribe(this.updateContainer.bind(this));
+		}.bind(this));
+
+		InputSliderManager.subscribe(this.topic + '-w', this.setWidth.bind(this));
+		InputSliderManager.subscribe(this.topic + '-h', this.setHeight.bind(this));
+		InputSliderManager.subscribe(this.topic, this.setRadius.bind(this));
+
+		ButtonManager.subscribe(this.topic, function(value) {
+			this.rounded = value;
+			if (value === true) {
+				unitW.container.style.display = 'none';
+				unitH.container.style.display = 'none';
+				unitR.container.style.display = 'block';
+				sliderW.style.display = 'none';
+				sliderH.style.display = 'none';
+				sliderR.style.display = 'block';
+				this.setUnitR(this.unitR);
+				this.updateRadius();
+			}
+
+			if (value === false) {
+				unitW.container.style.display = 'block';
+				unitH.container.style.display = 'block';
+				unitR.container.style.display = 'none';
+				sliderW.style.display = 'block';
+				sliderH.style.display = 'block';
+				sliderR.style.display = 'none';
+				this.setUnitX(this.unitX);
+				this.setUnitY(this.unitY);
+				this.updateWidth();
+				this.updateHeight();
+			}
+
+			this.updateBorderRadius();
+
+		}.bind(this));
+
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.updateWidth = function updateWidth() {
+		this.node.style.width = this.width + units[this.unitX];
+		var value = Math.round(this.width / 2);
+		InputSliderManager.setValue(this.topic + '-w', value, false);
+	}
+
+	RadiusContainer.prototype.updateHeight = function updateHeight() {
+		this.node.style.height = this.height + units[this.unitY];
+		var value = Math.round(this.height / 2);
+		InputSliderManager.setValue(this.topic + '-h', value, false);
+	}
+
+	RadiusContainer.prototype.updateRadius = function updateRadius() {
+		var value = Math.round(this.size / 2);
+		this.node.style.width = this.size + units[this.unitR];
+		this.node.style.height = this.size + units[this.unitR];
+		InputSliderManager.setValue(this.topic, value, false);
+	}
+
+	RadiusContainer.prototype.setWidth = function setWidth(value) {
+		this.radius.style.display = 'block';
+		this.width = 2 * value;
+		this.node.style.width = this.width + units[this.unitX];
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.setHeight = function setHeight(value) {
+		this.radius.style.display = 'block';
+		this.height = 2 * value;
+		this.node.style.height = this.height + units[this.unitY];
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.setRadius = function setRadius(value) {
+		this.radius.style.display = 'block';
+		this.size = 2 * value;
+		this.node.style.width = this.size + units[this.unitR];
+		this.node.style.height = this.size + units[this.unitR];
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.setUnitX = function setUnitX(value) {
+		this.unitX = value;
+		if (this.unitX === 0) this.maxW = 2 * subject.clientWidth;
+		if (this.unitX === 1) this.maxW = 200;
+		InputSliderManager.setUnit(this.topic + '-w', units[this.unitX]);
+		InputSliderManager.setMax(this.topic + '-w', this.maxW / 2);
+	}
+
+	RadiusContainer.prototype.setUnitY = function setUnitY(value) {
+		this.unitY = value;
+		if (this.unitY === 0) this.maxH = 2 * subject.clientHeight;
+		if (this.unitY === 1) this.maxH = 200;
+		InputSliderManager.setUnit(this.topic + '-h', units[this.unitY]);
+		InputSliderManager.setMax(this.topic + '-h', this.maxH / 2);
+	}
+
+	RadiusContainer.prototype.setUnitR = function setUnitR(value) {
+		this.unitR = value;
+
+		if (this.unitR === 0)
+			this.maxR = 2 * Math.min(subject.clientHeight , subject.clientWidth);
+
+		if (this.unitR === 1)
+			this.maxR = 200;
+
+		InputSliderManager.setUnit(this.topic, units[this.unitR]);
+		InputSliderManager.setMax(this.topic, this.maxR / 2);
+	}
+
+	RadiusContainer.prototype.updateUnits = function updateUnits(unit) {
+		if (this.rounded) {
+			this.setUnitR(this.unitR);
+			return;
+		}
+
+		if (unit === 0)
+			this.setUnitX(this.unitX);
+
+		if (unit === 1)
+			this.setUnitY(this.unitY);
+	}
+
+	RadiusContainer.prototype.composeBorderRadius = function composeBorderRadius () {
+
+		if (this.rounded === true) {
+			var unit = units[this.unitR];
+			var value = Math.round(this.size / 2);
+			return value + unit;
+		}
+
+		var unitX = units[this.unitX];
+		var unitY = units[this.unitY];
+		var valueX = Math.round(this.width / 2);
+		var valueY = Math.round(this.height / 2);
+
+		if (valueX === valueY && this.unitX === this.unitY)
+			return valueX + unitX;
+
+		return valueX + unitX + ' ' + valueY + unitY;
+	}
+
+	RadiusContainer.prototype.updateBorderRadius = function updateBorderRadius () {
+		var radius = this.composeBorderRadius();
+		var corner = 0;
+
+		if (this.topic === 'top-left') {
+			subject.style.borderTopLeftRadius = radius;
+			corner = 0;
+		}
+
+		if (this.topic === 'top-right') {
+			subject.style.borderTopRightRadius = radius;
+			corner = 1;
+		}
+
+		if (this.topic === 'bottom-right') {
+			subject.style.borderBottomRightRadius = radius;
+			corner = 2;
+		}
+
+		if (this.topic === 'bottom-left') {
+			subject.style.borderBottomLeftRadius = radius;
+			corner = 3;
+		}
+
+		Tool.updateOutput(corner, radius);
+	}
+
+	RadiusContainer.prototype.updateContainer = function updateContainer(deltaX, deltaY) {
+
+		if (this.rounded === true) {
+			this.size += this.resizeX * deltaX + this.resizeY * deltaY;
+			if (this.size < 0)	this.size = 0;
+			if (this.size > this.maxR)	this.size = this.maxR;
+			this.updateRadius();
+			this.updateBorderRadius();
+			return;
+		}
+
+		if (deltaX) {
+			this.width += this.resizeX * deltaX;
+			if (this.width < 0)	this.width = 0;
+			if (this.width > this.maxW)	this.width = this.maxW;
+			this.updateWidth();
+		}
+
+		if (deltaY) {
+			this.height += this.resizeY * deltaY;
+			if (this.height < 0) this.height = 0;
+			if (this.height > this.maxH)	this.height = this.maxH;
+			this.updateHeight();
+		}
+
+		if (deltaX || deltaY)
+			this.updateBorderRadius();
+	}
+
+
+	/**
+	 * Tool Manager
+	 */
+	var Tool = (function Tool() {
+		var preview;
+		var preview_ui;
+		var radius_containers = [];
+		var border_width = 3;
+		var borders1 = [null, null, null, null];
+		var borders2 = [0, 0, 0, 0];
+
+		var updateUIWidth = function updateUIWidth(value) {
+			var pwidth = subject.parentElement.clientWidth;
+			var left = (pwidth - value) / 2;
+			subject.style.width = value + "px";
+
+			for (var i = 0; i < 4; i++)
+				radius_containers[i].updateUnits(0);
+		}
+
+		var updateUIHeight = function updateUIHeight(value) {
+			var pheight = subject.parentElement.clientHeight;
+			var top = (pheight - value) / 2;
+			subject.style.height = value + "px";
+			subject.style.top = top - border_width + "px";
+
+			for (var i = 0; i < 4; i++)
+				radius_containers[i].updateUnits(1);
+		}
+
+		var updatePreviewUIWidth = function updatePreviewUIWidth() {
+			var p = subject.parentElement.clientWidth;
+			var v = preview_ui.clientWidth;
+			console.log(p, v, (p - v ) / 2);
+			preview_ui.style.left = (p - v) / 2 + "px" ;
+		}
+
+		var updatePreviewUIHeight = function updatePreviewUIHeight() {
+			var p = subject.parentElement.clientHeight;
+			var v = preview_ui.clientHeight;
+			console.log(p, v, (p - v ) / 2);
+			preview_ui.style.top = (p - v) / 2 + "px" ;
+		}
+
+		var updateOutput = function updateOutput(corner, radius) {
+			var values = radius.split(" ");
+
+			borders1[corner] = values[0];
+			borders2[corner] = values[0];
+
+			if (values.length === 2)
+				borders2[corner] = values[1];
+
+			var border_1_value = borders1.join(" ");
+			var border_2_value = borders2.join(" ");
+			var border_radius = 'border-radius: ' + border_1_value;
+
+			if (border_2_value !== border_1_value)
+				border_radius += ' / ' + border_2_value;
+
+			border_radius += ';';
+			output.textContent = border_radius;
+		}
+
+		var init = function init() {
+			preview = getElemById("preview");
+			subject = getElemById("subject");
+			output = getElemById("output");
+			preview_ui = getElemById("radius-ui-sliders");
+
+			var elem = document.querySelectorAll('.radius-container');
+			var size = elem.length;
+			for (var i = 0; i < size; i++)
+				radius_containers[i] = new RadiusContainer(elem[i]);
+
+			InputSliderManager.subscribe("width", updateUIWidth);
+			InputSliderManager.subscribe("height", updateUIHeight);
+
+			InputSliderManager.setValue("width", subject.clientWidth);
+			InputSliderManager.setValue("height", subject.clientHeight);
+		}
+
+		return {
+			init : init,
+			updateOutput : updateOutput
+		}
+
+	})();
+
+	/**
+	 * Init Tool
+	 */
+	var init = function init() {
+		ButtonManager.init();
+		InputSliderManager.init();
+		PreviewMouseTracking.init("preview");
+		Tool.init();
+	}
+
+	return {
+		init : init
+	}
+
+})();
+
+
+
+
+

{{ EmbedLiveSample('border-radius-generator', '100%', '800px', '') }}

+

 

diff --git a/files/pt-br/web/css/css_background_and_borders/index.html b/files/pt-br/web/css/css_background_and_borders/index.html deleted file mode 100644 index 59c2117194..0000000000 --- a/files/pt-br/web/css/css_background_and_borders/index.html +++ /dev/null @@ -1,155 +0,0 @@ ---- -title: CSS Background and Borders -slug: Web/CSS/CSS_Background_and_Borders -tags: - - CSS - - CSS Backgrounds and Borders - - CSS Reference - - NeedsTranslation - - Overview - - TopicStub -translation_of: Web/CSS/CSS_Backgrounds_and_Borders -translation_of_original: Web/CSS/CSS_Background_and_Borders ---- -

{{CSSRef}}

- -

CSS Background and Borders is a module of CSS that defines how background and borders of elements are described. Borders can be lines or images, boxes can have one or multiple backgrounds, have rounded corners, and shadows.

- -

Reference

- -

CSS Properties

- -
- -
- -

Guides

- -
-
Using CSS multiple backgrounds
-
Explains how to set backgrounds on elements and how they will interact with it.
-
Scaling background images
-
Describes how to change the appearance of the background images, by stretching them or repeating them, to cover the whole background of the element, or not.
-
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{ SpecName('CSS3 Backgrounds') }}{{ Spec2('CSS3 Backgrounds') }} 
{{SpecName('CSS2.1', 'box.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#border')}}{{Spec2('CSS1')}} 
- -

Browser compatibility

- -

{{CompatibilityTable()}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop("1.0")}}4.03.51.0 (85)
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown()}}{{CompatGeckoMobile("1.9.2")}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}1.0
-
diff --git a/files/pt-br/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html b/files/pt-br/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html deleted file mode 100644 index d0e4fa11f7..0000000000 --- a/files/pt-br/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: Multiple backgrounds -slug: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds -tags: - - CSS - - CSS Background - - Example - - Guide - - Intermediate -translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds -translation_of_original: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds ---- -

{{CSSRef}}

- -

Com CSS3, você pode aplicar aos elementos multiplos planos de fundo. Estes ficam em camadas empilhadas uma acima da outra onde o o primeiro fundo dado será desenhado no topo e apenas o último fundo da lista poderá definir uma cor sólida de fundo.

- -

Especificar planos de fundo múltplos é fácil:

- -
.minhaClasse {
-  background: fundo1, fundo2, ..., fundoN;
-}
-
- -

Você pode fazer isso com a propriedade reduzida {{ cssxref("background") }} e também com as propriedade individuais, com a excessão de {{ cssxref("background-color") }}. Isto é, as seguintes propriedades de plano de fundo podem ser especificadas com uma lista, uma por fundo: {{ cssxref("background") }}, {{ cssxref("background-attachment") }}, {{ cssxref("background-clip") }}, {{ cssxref("background-image") }}, {{ cssxref("background-origin") }}, {{ cssxref("background-position") }}, {{ cssxref("background-repeat") }}, {{ cssxref("background-size") }}.

- -

Exemplo

- -

Neste exemplo, três planos de fundos estão empilhados: o logo do Firefox, um degradê linear, e uma imagem com flores:

- -
.multi_bg_example {
-  background: url(http://demos.hacks.mozilla.org/openweb/resources/images/logos/firefox-48.png),
-        -moz-linear-gradient(left, rgba(255, 255, 255, 0),  rgba(255, 255, 255, 1)),
-        url(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg);
-  background-repeat: no-repeat, no-repeat, repeat;
-  background-position: bottom right, left, right;
-}
-
- - - - - - - - - - - - -
Captura de TelaDemonstração
css_multibg.png 
- -

Como pode ver, o logo do firefox (listado primeiro) está no topo, seguido do gradiente que está uma camada acima do fundo florido. Cada uma das sub-propriedade subsequente, ({{ cssxref("background-repeat") }} e {{ cssxref("background-position") }}) se aplicam aos fundos correspondentes. Então o primeiro valor para {{ cssxref("background-repeat") }} se aplica ao primeiro plano de fundo (o mais da frente), e assim por adiante.

- -

Veja também

- - diff --git a/files/pt-br/web/css/css_backgrounds_and_borders/index.html b/files/pt-br/web/css/css_backgrounds_and_borders/index.html new file mode 100644 index 0000000000..59c2117194 --- /dev/null +++ b/files/pt-br/web/css/css_backgrounds_and_borders/index.html @@ -0,0 +1,155 @@ +--- +title: CSS Background and Borders +slug: Web/CSS/CSS_Background_and_Borders +tags: + - CSS + - CSS Backgrounds and Borders + - CSS Reference + - NeedsTranslation + - Overview + - TopicStub +translation_of: Web/CSS/CSS_Backgrounds_and_Borders +translation_of_original: Web/CSS/CSS_Background_and_Borders +--- +

{{CSSRef}}

+ +

CSS Background and Borders is a module of CSS that defines how background and borders of elements are described. Borders can be lines or images, boxes can have one or multiple backgrounds, have rounded corners, and shadows.

+ +

Reference

+ +

CSS Properties

+ +
+ +
+ +

Guides

+ +
+
Using CSS multiple backgrounds
+
Explains how to set backgrounds on elements and how they will interact with it.
+
Scaling background images
+
Describes how to change the appearance of the background images, by stretching them or repeating them, to cover the whole background of the element, or not.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Backgrounds') }}{{ Spec2('CSS3 Backgrounds') }} 
{{SpecName('CSS2.1', 'box.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#border')}}{{Spec2('CSS1')}} 
+ +

Browser compatibility

+ +

{{CompatibilityTable()}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop("1.0")}}4.03.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown()}}{{CompatGeckoMobile("1.9.2")}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}1.0
+
diff --git a/files/pt-br/web/css/css_backgrounds_and_borders/resizing_background_images/index.html b/files/pt-br/web/css/css_backgrounds_and_borders/resizing_background_images/index.html new file mode 100644 index 0000000000..d7c3ccfa3f --- /dev/null +++ b/files/pt-br/web/css/css_backgrounds_and_borders/resizing_background_images/index.html @@ -0,0 +1,109 @@ +--- +title: Alterando a escala das imagens de background +slug: Web/Guide/CSS/Scaling_background_images +translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images +translation_of_original: Web/CSS/CSS_Background_and_Borders/Scaling_background_images +--- +

A propriedade CSS {{ cssxref("background-size") }} possibilita o ajuste das imagens do background, ao invés do comportamento padrão do navegador de mostrar a imagem no seu tamanho real. Você pode tanto aumentar como diminuir a imagem.

+ +

Duplicando uma imagem grande

+ +

Vamos considerar uma imagem grande, a image da logo do Firefox com 2982x2808 . Nós queremos (por alguma razão, envolvendo um site com um design ruim) quatro cópia desta imagem em um quadrado de 300x300 pixel, resultando nesse visual:

+ +

+ +

Isto pode ser conseguido usando o seguinte CSS:

+ +
.square {
+  width: 300px;
+  height: 300px;
+  background-image: url(firefox_logo.png);
+  border: solid 2px;
+  text-shadow: white 0px 0px 2px;
+  font-size: 16px;
+  background-size: 150px;
+}
+
+ +

O {{ cssxref("background-size") }} não precisa mais de nenhum prefixo, mas você pode considerar a adição de uma versão pré-fixada se você está focando em browsers muito antigos.

+ +

Esticando uma imagem

+ +

Você também pode especificar ambos os tamanhos, horizontal e vertical da imagem, assim:

+ +
background-size: 300px 150px;
+
+ +

O resultado fica assim:

+ +

+ +

Aumentando escala de uma imagem

+ +

Na outra extremidade do espectro, é possível dimensionar-se uma imagem no fundo. Aqui nós aumentamos a escala de um favicon de pixel 32x32 para 300x300 pixels:

+ +

+ +
.square2 {
+  width: 300px;
+  height: 300px;
+  background-image: url(favicon.png);
+  background-size: 300px;
+  border: solid 2px;
+  text-shadow: white 0px 0px 2px;
+  font-size: 16px;
+}
+
+ +

Como você pode ver, o CSS é, na verdade, essencialmente idêntico, salvo o nome do arquivo de imagem.

+ +

Valores especiais: "contain" e "cover"

+ +

Da mesma maneira que o {{cssxref("<length>")}}, a propriedade CSS de {{ cssxref("background-size") }} oferece dois valores de tamanho especial, contain e cover. Vamos dar uma olhada nestes.

+ +

contain

+ +

O valor contain especifica que, independentemente do tamanho da caixa que contém, a imagem de fundo deve ser dimensionado de modo a que cada lado seja tão grande quanto possível ao mesmo tempo que não exceda o comprimento do lado correspondente do recipiente. Tente redimensionar a janela usando um navegador que suporta imagens de fundo de escala (como o Firefox 3.6 ou posterior) para ver isso em ação no exemplo vivo abaixo.

+ +
+

{{ EmbedLiveSample("contain", "100%", "220") }}

+
+ +
<div class="bgSizeContain">
+  <p>Tente redimensionar a janela e ver o que acontece.</p>
+</div>
+ +
.bgSizeContain {
+  height: 200px;
+  background-image: url(https://mdn.mozillademos.org/files/8971/firefox_logo.png);
+  background-size: contain;
+  border: 2px solid darkgray;
+  color: #000; text-shadow: 1px 1px 0 #fff;
+}
+ +

cover

+ +

O valor cover especifica que a imagem de fundo deve ser dimensionado de modo que seja tão pequena quanto possível ao mesmo tempo assegurar que ambas as dimensões são maiores do que ou igual à dimensão correspondente do recipiente.

+ +
{{ EmbedLiveSample("cover", "100%", "220") }}
+ +

Os exemplos à seguir usam HTML & CSS:

+ +
<div class="bgSizeCover">
+  <p>Tente redimensionar a janela e ver o que acontece.</p>
+</div>
+ +
.bgSizeCover {
+  height: 200px;
+  background-image: url('https://mdn.mozillademos.org/files/8971/firefox_logo.png');
+  background-size: cover;
+  border: 2px solid darkgray;
+  color: #000; text-shadow: 1px 1px 0 #fff;
+
+ +

Veja Também

+ + diff --git a/files/pt-br/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html b/files/pt-br/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html new file mode 100644 index 0000000000..d0e4fa11f7 --- /dev/null +++ b/files/pt-br/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html @@ -0,0 +1,58 @@ +--- +title: Multiple backgrounds +slug: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds +tags: + - CSS + - CSS Background + - Example + - Guide + - Intermediate +translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds +translation_of_original: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds +--- +

{{CSSRef}}

+ +

Com CSS3, você pode aplicar aos elementos multiplos planos de fundo. Estes ficam em camadas empilhadas uma acima da outra onde o o primeiro fundo dado será desenhado no topo e apenas o último fundo da lista poderá definir uma cor sólida de fundo.

+ +

Especificar planos de fundo múltplos é fácil:

+ +
.minhaClasse {
+  background: fundo1, fundo2, ..., fundoN;
+}
+
+ +

Você pode fazer isso com a propriedade reduzida {{ cssxref("background") }} e também com as propriedade individuais, com a excessão de {{ cssxref("background-color") }}. Isto é, as seguintes propriedades de plano de fundo podem ser especificadas com uma lista, uma por fundo: {{ cssxref("background") }}, {{ cssxref("background-attachment") }}, {{ cssxref("background-clip") }}, {{ cssxref("background-image") }}, {{ cssxref("background-origin") }}, {{ cssxref("background-position") }}, {{ cssxref("background-repeat") }}, {{ cssxref("background-size") }}.

+ +

Exemplo

+ +

Neste exemplo, três planos de fundos estão empilhados: o logo do Firefox, um degradê linear, e uma imagem com flores:

+ +
.multi_bg_example {
+  background: url(http://demos.hacks.mozilla.org/openweb/resources/images/logos/firefox-48.png),
+        -moz-linear-gradient(left, rgba(255, 255, 255, 0),  rgba(255, 255, 255, 1)),
+        url(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg);
+  background-repeat: no-repeat, no-repeat, repeat;
+  background-position: bottom right, left, right;
+}
+
+ + + + + + + + + + + + +
Captura de TelaDemonstração
css_multibg.png 
+ +

Como pode ver, o logo do firefox (listado primeiro) está no topo, seguido do gradiente que está uma camada acima do fundo florido. Cada uma das sub-propriedade subsequente, ({{ cssxref("background-repeat") }} e {{ cssxref("background-position") }}) se aplicam aos fundos correspondentes. Então o primeiro valor para {{ cssxref("background-repeat") }} se aplica ao primeiro plano de fundo (o mais da frente), e assim por adiante.

+ +

Veja também

+ + diff --git a/files/pt-br/web/css/css_box_model/introduction_to_the_css_box_model/index.html b/files/pt-br/web/css/css_box_model/introduction_to_the_css_box_model/index.html new file mode 100644 index 0000000000..8c0db35cf6 --- /dev/null +++ b/files/pt-br/web/css/css_box_model/introduction_to_the_css_box_model/index.html @@ -0,0 +1,62 @@ +--- +title: Box model +slug: Web/CSS/box_model +translation_of: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model +--- +

Resumo

+ +

Em uma página WEB, cada elemento é representado como um box retangular. Determinar o tamanho, propriedades - como sua cor, fundo, estilo das bordas - e a posição desses boxes é o objetivo do mecanismo de renderização.

+ +

No CSS, cada um desses boxes retangulares é descrita usando o box model padrão. Este modelo descreve o conteúdo do espaço ocupado por um elemento. Cada box possui 4 edges: margin edge, border edge, padding edge e content edge.

+ +

CSS Box model

+ +

A área de conteúdo (content area) é a área ocupada pelo conteúdo real do elemento. Ele frequentamente possui um fundo, uma cor de fonte ou uma imagem (nessa ordem, uma imagem opaca esconde a cor de fundo) e é localizada dentro do content edge; suas dimensões são a largura do conteúdo, ou largura do box de conteúdo, e altura do conteúdo, ou altura do box de conteúdo.

+ +

Se a propriedade CSS {{ cssxref("box-sizing") }} está configurada como padrão, as propriedades CSS {{ cssxref("width") }}, {{ cssxref("min-width") }}, {{ cssxref("max-width") }}, {{ cssxref("height") }}, {{ cssxref("min-height") }} e {{ cssxref("max-height") }} controlam o tamanho do conteúdo.

+ +

A área de preenchimento (padding area) estende-se para a borda em torno do enchimento. Quando a área de conteúdo tem um fundo, cor ou imagem, isso será estendido para a área de preenchimento, por esse motivo, você pode pensar o preenchimento como a extensão do conteúdo. O preenchimento está localizado dentro do padding edge, e suas dimensões são a largura do padding-box e a altura do padding-box.

+ +

O espaço entre os edges de preenchimento e conteúdo podem ser controlados utilizando as seguintes propriedades CSS {{ cssxref("padding-top") }}, {{ cssxref("padding-right") }}, {{ cssxref("padding-bottom") }}, {{ cssxref("padding-left") }} e na forma generalizada {{ cssxref("padding") }}.

+ +

A área de borda (border area) estende a área de preenchimento para a área que contém as bordas. Esta é a área de dentro do border edge, e suas dimensões são a largura e a altura do border-box. Esta área depende do tamanho da borda que está definido pela propriedade {{ cssxref("border-width") }} ou pela propriedade {{ cssxref("border") }}.

+ +

A área de margem (margin area) estende a área de borda com um espaço vazio utilizado para separar o elemento dos elementos vizinhos. Esta é a área de dentro do margin edge, e suas dimensões são a largura e a altura do margin-box.

+ +

O tamanho da área de margem é controlada utilizando as seguintes propriedades CSS {{ cssxref("margin-top") }}, {{ cssxref("margin-right") }}, {{ cssxref("margin-bottom") }}, {{ cssxref("margin-left") }} e na forma generalizada {{ cssxref("margin") }}.

+ +

Quando ocorre um colapso de margens, a área de margem não está claramente definida, uma vez que as margens são compartilhadas entre os boxes.

+ +

Finalmente, note que, para elementos não substituídos inline, o total de espaço ocupado (para a altura da linha) é determinado pela propriedade {{ cssxref('line-height') }}, mesmo que a borda e o padding aparecerem visualmente em torno do conteúdo.

+ +

Especificação

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{ SpecName("CSS2.1","box.html#box-dimensions")}}{{ Spec2('CSS2.1') }}Embora mais precisamente formulada, não existem mudanças práticas
{{ SpecName("CSS1","#formatting-model")}}{{ Spec2('CSS1') }} 
+ +

Veja também

+ + diff --git a/files/pt-br/web/css/css_box_model/margin_collapsing/index.html b/files/pt-br/web/css/css_box_model/margin_collapsing/index.html deleted file mode 100644 index cb658d4131..0000000000 --- a/files/pt-br/web/css/css_box_model/margin_collapsing/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: Dominando margin collapsing -slug: Web/CSS/CSS_Box_Model/margin_collapsing -tags: - - CSS - - CSS Box Model - - Guía - - Intermediario(2) - - Referencia -translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing ---- -
{{CSSRef}}
- -
As margens superior e inferior dos blocos às vezes são combinadas(colapsadas/reduzidas) para uma única margem cujo o tamanho é a maior das margens (se os elementos tiverem a mesma margem, uma delas não será somada), combinado a ele, um comportamento conhecido como margin collapsing. Note que as margens de elementos flutuantes e posicionados de forma absoluta nunca colapsam.
- -
 
- -

Margin collapsing ocorre em três casos básicos:

- -
-
Irmãos adjacentes
-
As margens de irmãos adjacentes são colapsadas (execeto quando  o último irmão precisar ser limpado devido ao uso de floats  em elementos anteriores ). Por exemplo:
-
- 
 <p>A margem inferior deste parágrafo é colapsada...</p>
- <p>... com margem superior deste parágrafo.</p>
-
-
-
Pai e primeiro/último filho
-
Se não houver border, padding, parte inline, contexto de formatação de bloco criado ou livre para separar o {{cssxref("margin-top")}} de um bloco do {{cssxref("margin-top")}} do seu primeiro bloco filho, ou nenhum border, padding, conteúdo inline, {{cssxref("height")}}, {{cssxref("min-height")}}, ou {{cssxref("max-height")}} para separar o  {{cssxref("margin-bottom")}} de um bloco do {{cssxref("margin-bottom")}} do seu último filho, então essas margens colapsam. A margem colapsada acaba fora do pai.
-
 
-
- -
-
Blocos vázios
-
Se não houver border, padding, conteúdo inline, {{cssxref("height")}}, ou  {{cssxref("min-height")}} para separar um bloco {{cssxref("margin-top")}} de sua {{cssxref("margin-bottom")}}, então as margens superior e inferior são colapsadas.
-
 
-
- -

Algumas coisas podem ser observadas:

- - - -

Margens de elementos flutuantes e posicionados de forma absoluta nunca colapsam.

- -

Especificações

- - - - - - - - - - - - - - - - -
EspeficicaçõesStatusComentário
{{SpecName("CSS2.1", "box.html#collapsing-margins", "margin collapsing")}}{{Spec2("CSS2.1")}}Definição inicial
- -

Veja Também

- - diff --git a/files/pt-br/web/css/css_box_model/mastering_margin_collapsing/index.html b/files/pt-br/web/css/css_box_model/mastering_margin_collapsing/index.html new file mode 100644 index 0000000000..cb658d4131 --- /dev/null +++ b/files/pt-br/web/css/css_box_model/mastering_margin_collapsing/index.html @@ -0,0 +1,74 @@ +--- +title: Dominando margin collapsing +slug: Web/CSS/CSS_Box_Model/margin_collapsing +tags: + - CSS + - CSS Box Model + - Guía + - Intermediario(2) + - Referencia +translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing +--- +
{{CSSRef}}
+ +
As margens superior e inferior dos blocos às vezes são combinadas(colapsadas/reduzidas) para uma única margem cujo o tamanho é a maior das margens (se os elementos tiverem a mesma margem, uma delas não será somada), combinado a ele, um comportamento conhecido como margin collapsing. Note que as margens de elementos flutuantes e posicionados de forma absoluta nunca colapsam.
+ +
 
+ +

Margin collapsing ocorre em três casos básicos:

+ +
+
Irmãos adjacentes
+
As margens de irmãos adjacentes são colapsadas (execeto quando  o último irmão precisar ser limpado devido ao uso de floats  em elementos anteriores ). Por exemplo:
+
+ 
 <p>A margem inferior deste parágrafo é colapsada...</p>
+ <p>... com margem superior deste parágrafo.</p>
+
+
+
Pai e primeiro/último filho
+
Se não houver border, padding, parte inline, contexto de formatação de bloco criado ou livre para separar o {{cssxref("margin-top")}} de um bloco do {{cssxref("margin-top")}} do seu primeiro bloco filho, ou nenhum border, padding, conteúdo inline, {{cssxref("height")}}, {{cssxref("min-height")}}, ou {{cssxref("max-height")}} para separar o  {{cssxref("margin-bottom")}} de um bloco do {{cssxref("margin-bottom")}} do seu último filho, então essas margens colapsam. A margem colapsada acaba fora do pai.
+
 
+
+ +
+
Blocos vázios
+
Se não houver border, padding, conteúdo inline, {{cssxref("height")}}, ou  {{cssxref("min-height")}} para separar um bloco {{cssxref("margin-top")}} de sua {{cssxref("margin-bottom")}}, então as margens superior e inferior são colapsadas.
+
 
+
+ +

Algumas coisas podem ser observadas:

+ + + +

Margens de elementos flutuantes e posicionados de forma absoluta nunca colapsam.

+ +

Especificações

+ + + + + + + + + + + + + + + + +
EspeficicaçõesStatusComentário
{{SpecName("CSS2.1", "box.html#collapsing-margins", "margin collapsing")}}{{Spec2("CSS2.1")}}Definição inicial
+ +

Veja Também

+ + diff --git a/files/pt-br/web/css/css_colors/color_picker_tool/index.html b/files/pt-br/web/css/css_colors/color_picker_tool/index.html new file mode 100644 index 0000000000..a98aaf9342 --- /dev/null +++ b/files/pt-br/web/css/css_colors/color_picker_tool/index.html @@ -0,0 +1,3241 @@ +--- +title: Seletor de cores +slug: Web/CSS/CSS_Colors/seletor_de_cores +tags: + - CSS + - Cores CSS + - Cores HTML + - Ferramenta para Seleção de Cores CSS + - Ferramenta para Seleção de Cores HTML + - Ferramentas + - Seletor de Cores + - Seletor de Cores CSS + - Seletor de Cores HTML + - cor + - cores +translation_of: Web/CSS/CSS_Colors/Color_picker_tool +--- +
+

ColorPicker tool

+ +

HTML Content

+ +
    <div id="container">
+        <div id="palette" class="block">
+            <div id="color-palette"></div>
+            <div id="color-info">
+                <div class="title"> CSS Color </div>
+            </div>
+        </div>
+
+        <div id="picker" class="block">
+            <div class="ui-color-picker" data-topic="picker" data-mode="HSL"></div>
+            <div id="picker-samples" sample-id="master"></div>
+            <div id="controls">
+                <div id="delete">
+                    <div id="trash-can"></div>
+                </div>
+                <div id="void-sample" class="icon"></div>
+            </div>
+        </div>
+
+        <div id="canvas" data-tutorial="drop">
+            <div id="zindex" class="ui-input-slider" data-topic="z-index" data-info="z-index"
+                data-max="20" data-sensivity="10"></div>
+        </div>
+    </div>
+
+
+ +

CSS Content

+ +
/*
+ * COLOR PICKER TOOL
+ */
+
+.ui-color-picker {
+  width: 420px;
+  margin: 0;
+  border: 1px solid #DDD;
+  background-color: #FFF;
+  display: table;
+
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.ui-color-picker .picking-area {
+  width: 198px;
+  height: 198px;
+  margin: 5px;
+  border: 1px solid #DDD;
+  position: relative;
+  float: left;
+  display: table;
+}
+
+.ui-color-picker .picking-area:hover {
+  cursor: default;
+}
+
+/* HSV format - Hue-Saturation-Value(Brightness) */
+.ui-color-picker .picking-area {
+  background: url('https://mdn.mozillademos.org/files/5707/picker_mask_200.png') center center;
+
+  background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+        -moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+  background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+        -webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+  background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+        -ms-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+  background: -o-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+        -o-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+
+  background-color: #F00;
+}
+
+/* HSL format - Hue-Saturation-Lightness */
+.ui-color-picker[data-mode='HSL'] .picking-area {
+  background: -moz-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+                  hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+        -moz-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+  background: -webkit-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+                  hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+        -webkit-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+  background: -ms-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+                  hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+        -ms-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+  background: -o-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+                  hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+        -o-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+  background-color: #F00;
+}
+
+.ui-color-picker .picker {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  border: 1px solid #FFF;
+  position: absolute;
+  top: 45%;
+  left: 45%;
+}
+
+.ui-color-picker .picker:before {
+  width: 8px;
+  height: 8px;
+  content: "";
+  position: absolute;
+  border: 1px solid #999;
+  border-radius: 50%;
+}
+
+.ui-color-picker .hue,
+.ui-color-picker .alpha {
+  width: 198px;
+  height: 28px;
+  margin: 5px;
+  border: 1px solid #FFF;
+  float: left;
+}
+
+.ui-color-picker .hue {
+  background: url("https://mdn.mozillademos.org/files/5701/hue.png") center;
+  background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+        #00F 66.66%, #F0F 83.33%, #F00 100%);
+  background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+        #00F 66.66%, #F0F 83.33%, #F00 100%);
+  background: -ms-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+        #00F 66.66%, #F0F 83.33%, #F00 100%);
+  background: -o-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+        #00F 66.66%, #F0F 83.33%, #F00 100%);
+}
+
+.ui-color-picker .alpha {
+  border: 1px solid #CCC;
+  background: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+}
+
+.ui-color-picker .alpha-mask {
+  width: 100%;
+  height: 100%;
+  background: url("https://mdn.mozillademos.org/files/6089/alpha_mask.png");
+}
+
+.ui-color-picker .slider-picker {
+  width: 2px;
+  height: 100%;
+  border: 1px solid #777;
+  background-color: #FFF;
+  position: relative;
+  top: -1px;
+}
+
+/* input HSV and RGB */
+
+.ui-color-picker .info {
+  width: 200px;
+  margin: 5px;
+  float: left;
+}
+
+.ui-color-picker .info * {
+  float: left;
+}
+
+.ui-color-picker .input {
+  width: 64px;
+  margin: 5px 2px;
+  float: left;
+}
+
+.ui-color-picker .input .name {
+  height: 20px;
+  width: 30px;
+  text-align: center;
+  font-size: 14px;
+  line-height: 18px;
+  float: left;
+}
+
+.ui-color-picker .input input {
+  width: 30px;
+  height: 18px;
+  margin: 0;
+  padding: 0;
+  border: 1px solid #DDD;
+  text-align: center;
+  float: right;
+
+  -moz-user-select: text;
+  -webkit-user-select: text;
+  -ms-user-select: text;
+}
+
+.ui-color-picker .input[data-topic="lightness"] {
+  display: none;
+}
+
+.ui-color-picker[data-mode='HSL'] .input[data-topic="value"] {
+  display: none;
+}
+
+.ui-color-picker[data-mode='HSL'] .input[data-topic="lightness"] {
+  display: block;
+}
+
+.ui-color-picker .input[data-topic="alpha"] {
+  margin-top: 10px;
+  width: 93px;
+}
+
+.ui-color-picker .input[data-topic="alpha"] > .name {
+  width: 60px;
+}
+
+.ui-color-picker .input[data-topic="alpha"] > input {
+  float: right;
+}
+
+.ui-color-picker .input[data-topic="hexa"] {
+  width: auto;
+  float: right;
+  margin: 6px 8px 0 0;
+}
+
+.ui-color-picker .input[data-topic="hexa"] > .name {
+  display: none;
+}
+
+.ui-color-picker .input[data-topic="hexa"] > input {
+  width: 90px;
+  height: 24px;
+  padding: 2px 0;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+/* Preview color */
+.ui-color-picker .preview {
+  width: 95px;
+  height: 53px;
+  margin: 5px;
+  margin-top: 10px;
+  border: 1px solid #DDD;
+  background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+  float: left;
+  position: relative;
+}
+
+.ui-color-picker .preview:before {
+  height: 100%;
+  width: 50%;
+  left: 50%;
+  top: 0;
+  content: "";
+  background: #FFF;
+  position: absolute;
+  z-index: 1;
+}
+
+.ui-color-picker .preview-color {
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 0, 0, 0.5);
+  position: absolute;
+  z-index: 1;
+}
+
+.ui-color-picker .switch_mode {
+  width: 10px;
+  height: 20px;
+  position: relative;
+  border-radius: 5px 0 0 5px;
+  border: 1px solid #DDD;
+  background-color: #EEE;
+  left: -12px;
+  top: -1px;
+  z-index: 1;
+  transition: all 0.5s;
+}
+
+.ui-color-picker .switch_mode:hover {
+  background-color: #CCC;
+  cursor: pointer;
+}
+
+/*
+ * UI Component
+ */
+
+.ui-input-slider {
+  height: 20px;
+  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+  -moz-user-select: none;
+  user-select: none;
+}
+
+.ui-input-slider * {
+  float: left;
+  height: 100%;
+  line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider > input {
+  margin: 0;
+  padding: 0;
+  width: 50px;
+  text-align: center;
+
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.ui-input-slider-info {
+  width: 90px;
+  padding: 0px 10px 0px 0px;
+  text-align: right;
+  text-transform: lowercase;
+}
+
+.ui-input-slider-left, .ui-input-slider-right {
+  width: 16px;
+  cursor: pointer;
+  background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
+}
+
+.ui-input-slider-right {
+  background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
+}
+
+.ui-input-slider-name {
+  width: 90px;
+  padding: 0 10px 0 0;
+  text-align: right;
+  text-transform: lowercase;
+}
+
+.ui-input-slider-btn-set {
+  width: 25px;
+  background-color: #2C9FC9;
+  border-radius: 5px;
+  color: #FFF;
+  font-weight: bold;
+  line-height: 14px;
+  text-align: center;
+}
+
+.ui-input-slider-btn-set:hover {
+  background-color: #379B4A;
+  cursor: pointer;
+}
+
+/*
+ * COLOR PICKER TOOL
+ */
+
+body {
+  max-width: 1000px;
+  margin: 0 auto;
+
+  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+  box-shadow: 0 0 5px 0 #999;
+
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
+}
+
+/**
+ * Resize Handle
+ */
+.resize-handle {
+  width: 10px;
+  height: 10px;
+  background: url('https://mdn.mozillademos.org/files/6083/resize.png') center center no-repeat;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}
+
+[data-resize='both']:hover {
+  cursor: nw-resize !important;
+}
+
+[data-resize='width']:hover {
+  cursor: w-resize !important;
+}
+
+[data-resize='height']:hover {
+  cursor: n-resize !important;
+}
+
+[data-hidden='true'] {
+  display: none;
+}
+
+[data-collapsed='true'] {
+  height: 0 !important;
+}
+
+.block {
+  display: table;
+}
+
+
+/**
+ *   Container
+ */
+#container {
+  width: 100%;
+
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+
+  display: table;
+}
+
+/**
+ *   Picker Zone
+ */
+
+#picker {
+  padding: 10px;
+  width: 980px;
+}
+
+.ui-color-picker {
+  padding: 3px 5px;
+  float: left;
+  border-color: #FFF;
+}
+
+.ui-color-picker .switch_mode {
+  display: none;
+}
+
+.ui-color-picker .preview-color:hover {
+  cursor: move;
+}
+
+/**
+ * Picker Container
+ */
+
+#picker-samples {
+  width: 375px;
+  height: 114px;
+  max-height: 218px;
+  margin: 0 10px 0 30px;
+  overflow: hidden;
+  position: relative;
+  float: left;
+
+  transition: all 0.2s;
+}
+
+#picker-samples .sample {
+  width: 40px;
+  height: 40px;
+  margin: 5px;
+  border: 1px solid #DDD;
+  position: absolute;
+  float: left;
+  transition: all 0.2s;
+}
+
+#picker-samples .sample:hover {
+  cursor: pointer;
+  border-color: #BBB;
+  transform: scale(1.15);
+  border-radius: 3px;
+}
+
+#picker-samples .sample[data-active='true'] {
+  border-color: #999;
+}
+
+#picker-samples .sample[data-active='true']:after {
+  content: "";
+  position: absolute;
+  background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
+  width: 100%;
+  height: 12px;
+  top: -12px;
+  z-index: 2;
+}
+
+#picker-samples #add-icon {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  box-shadow: inset 0px 0px 2px 0px #DDD;
+}
+
+#picker-samples #add-icon:hover {
+  cursor: pointer;
+  border-color: #DDD;
+  box-shadow: inset 0px 0px 5px 0px #CCC;
+}
+
+#picker-samples #add-icon:before,
+#picker-samples #add-icon:after {
+  content: "";
+  position: absolute;
+  background-color: #EEE;
+  box-shadow: 0 0 1px 0 #EEE;
+}
+
+#picker-samples #add-icon:before {
+  width: 70%;
+  height: 16%;
+  top: 42%;
+  left: 15%;
+}
+
+#picker-samples #add-icon:after {
+  width: 16%;
+  height: 70%;
+  top: 15%;
+  left: 42%;
+}
+
+#picker-samples #add-icon:hover:before,
+#picker-samples #add-icon:hover:after {
+  background-color: #DDD;
+  box-shadow: 0 0 1px 0 #DDD;
+}
+
+/**
+ *   Controls
+ */
+
+#controls {
+  width: 110px;
+  padding: 10px;
+  float: right;
+}
+
+#controls #picker-switch {
+  text-align: center;
+  float: left;
+}
+
+#controls .icon {
+  width: 48px;
+  height: 48px;
+  margin: 10px 0;
+  background-repeat: no-repeat;
+  background-position: center;
+  border: 1px solid #DDD;
+  display: table;
+  float: left;
+}
+
+#controls .icon:hover {
+  cursor: pointer;
+}
+
+#controls .picker-icon {
+  background-image: url('https://mdn.mozillademos.org/files/6081/picker.png');
+}
+
+#controls #void-sample {
+  margin-right: 10px;
+  background-image: url('https://mdn.mozillademos.org/files/6087/void.png');
+  background-position: center left;
+}
+
+#controls #void-sample[data-active='true'] {
+  border-color: #CCC;
+  background-position: center right;
+}
+
+#controls .switch {
+  width: 106px;
+  padding: 1px;
+  border: 1px solid #CCC;
+  font-size: 14px;
+  text-align: center;
+  line-height: 24px;
+  overflow: hidden;
+  float: left;
+}
+
+#controls .switch:hover {
+  cursor: pointer;
+}
+
+#controls .switch > * {
+  width: 50%;
+  padding: 2px 0;
+  background-color: #EEE;
+  float: left;
+}
+
+#controls .switch [data-active='true'] {
+  color: #FFF;
+  background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+  background-color: #777;
+}
+
+/**
+ *   Trash Can
+ */
+
+#delete {
+  width: 100%;
+  height: 94px;
+  background-color: #DDD;
+  background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+  background-repeat: repeat;
+
+  text-align: center;
+  color: #777;
+
+  position: relative;
+  float: right;
+}
+
+#delete #trash-can {
+  width: 80%;
+  height: 80%;
+  border: 2px dashed #FFF;
+  border-radius: 5px;
+  background: url('https://mdn.mozillademos.org/files/6085/trash-can.png') no-repeat center;
+
+  position: absolute;
+  top: 10%;
+  left: 10%;
+
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+
+  transition: all 0.2s;
+}
+
+#delete[drag-state='enter'] {
+  background-color: #999;
+}
+
+/**
+ *   Color Theme
+ */
+
+#color-theme {
+  margin: 0 8px 0 0;
+  border: 1px solid #EEE;
+  display: inline-block;
+  float: right;
+}
+
+#color-theme .box {
+  width: 80px;
+  height: 92px;
+  float: left;
+}
+
+/**
+ * Color info box
+ */
+#color-info {
+  width: 360px;
+  float: left;
+}
+
+#color-info .title {
+  width: 100%;
+  padding: 15px;
+  font-size: 18px;
+  text-align: center;
+  background-image: url('https://mdn.mozillademos.org/files/6071/color-wheel.png');
+  background-repeat:no-repeat;
+  background-position: center left 30%;
+}
+
+#color-info .copy-container {
+  position: absolute;
+  top: -100%;
+}
+
+#color-info .property {
+  min-width: 280px;
+  height: 30px;
+  margin: 10px 0;
+  text-align: center;
+  line-height: 30px;
+}
+
+#color-info .property > * {
+  float: left;
+}
+
+#color-info .property .type {
+  width: 60px;
+  height: 100%;
+  padding: 0 16px 0 0;
+  text-align: right;
+}
+
+#color-info .property .value {
+  width: 200px;
+  height: 100%;
+  padding: 0 10px;
+  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+  font-size: 16px;
+  color: #777;
+  text-align: center;
+  background-color: #FFF;
+  border: none;
+}
+
+#color-info .property .value:hover {
+  color: #37994A;
+}
+
+#color-info .property .value:hover + .copy {
+  background-position: center right;
+}
+
+#color-info .property .copy {
+  width: 24px;
+  height: 100%;
+  padding: 0 5px;
+  background-color: #FFF;
+  background-image: url('https://mdn.mozillademos.org/files/6073/copy.png');
+  background-repeat: no-repeat;
+  background-position: center left;
+  border-left: 1px solid #EEE;
+  text-align: right;
+  float: left;
+}
+
+#color-info .property .copy:hover {
+  background-position: center right;
+}
+
+
+/**
+ *   Color Palette
+ */
+
+#palette {
+  width: 1000px;
+  padding: 10px 0;
+  background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+  background-repeat: repeat;
+  background-color: #EEE;
+  color: #777;
+
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+#color-palette {
+  width: 640px;
+  font-family: Arial, Helvetica, sans-serif;
+  color: #777;
+  float: left;
+}
+
+#color-palette .container {
+  width: 100%;
+  height: 50px;
+  line-height: 50px;
+  overflow: hidden;
+  float: left;
+  transition: all 0.5s;
+}
+
+#color-palette .container > * {
+  float: left;
+}
+
+#color-palette .title {
+  width: 100px;
+  padding: 0 10px;
+  text-align: right;
+  line-height: inherit;
+}
+
+#color-palette .palette {
+  width: 456px;
+  height: 38px;
+  margin: 3px;
+  padding: 3px;
+  display: table;
+  background-color: #FFF;
+}
+
+#color-palette .palette .sample {
+  width: 30px;
+  height: 30px;
+  margin: 3px;
+  position: relative;
+  border: 1px solid #DDD;
+  float: left;
+  transition: all 0.2s;
+}
+
+#color-palette .palette .sample:hover {
+  cursor: pointer;
+  border-color: #BBB;
+  transform: scale(1.15);
+  border-radius: 3px;
+}
+
+#color-palette .controls {
+}
+
+#color-palette .controls > * {
+  float: left;
+}
+
+#color-palette .controls > *:hover {
+  cursor: pointer;
+}
+
+#color-palette .controls .lock {
+  width: 24px;
+  height: 24px;
+  margin: 10px;
+  padding: 3px;
+  background-image: url('https://mdn.mozillademos.org/files/6077/lock.png');
+  background-repeat: no-repeat;
+  background-position: bottom right;
+}
+
+#color-palette .controls .lock:hover {
+  /*background-image: url('images/unlocked-hover.png');*/
+  background-position: bottom left;
+}
+
+#color-palette .controls .lock[locked-state='true'] {
+  /*background-image: url('images/locked.png');*/
+  background-position: top left ;
+}
+
+#color-palette .controls .lock[locked-state='true']:hover {
+  /*background-image: url('images/lock-hover.png');*/
+  background-position: top right;
+}
+
+/**
+ * Canvas
+ */
+
+#canvas {
+  width: 100%;
+  height: 300px;
+  min-height: 250px;
+  border-top: 1px solid #DDD;
+  background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+  background-repeat: repeat;
+  position: relative;
+  float: left;
+}
+
+#canvas[data-tutorial='drop'] {
+  text-align: center;
+  font-size: 30px;
+  color: #777;
+}
+
+#canvas[data-tutorial='drop']:before {
+  content: "Drop colors here to compare";
+  width: 40%;
+  padding: 30px 9% 70px 11%;
+
+  background-image: url('https://mdn.mozillademos.org/files/6075/drop.png');
+  background-repeat: no-repeat;
+  background-position: left 35px top 60%;
+
+  text-align: right;
+
+  border: 3px dashed rgb(221, 221, 221);
+  border-radius: 15px;
+
+  position: absolute;
+  top: 50px;
+  left: 20%;
+}
+
+#canvas[data-tutorial='drop']:after {
+  content: "adjust, change or modify";
+  width: 40%;
+  font-size: 24px;
+  position: absolute;
+  top: 130px;
+  left: 32%;
+  z-index: 2;
+}
+
+#canvas [data-tutorial='dblclick'] {
+  background-color: #999 !important;
+}
+
+#canvas [data-tutorial='dblclick']:before {
+  content: "double click to activate";
+  width: 80px;
+  color: #FFF;
+  position: absolute;
+  top: 10%;
+  left: 20%;
+  z-index: 2;
+}
+
+#canvas .sample {
+  width: 100px;
+  height: 100px;
+  min-width: 20px;
+  min-height: 20px;
+  position: absolute;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+#canvas .sample:hover {
+  cursor: move;
+}
+
+#canvas .sample[data-active='true']:after {
+  content: "";
+  position: absolute;
+  background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
+  width: 100%;
+  height: 12px;
+  top: -12px;
+  z-index: 2;
+}
+
+#canvas .sample:hover > * {
+  cursor: pointer;
+  display: block !important;
+}
+
+#canvas .sample .resize-handle {
+  display: none;
+}
+
+#canvas .sample .pick {
+  width: 10px;
+  height: 10px;
+  margin: 5px;
+  background: url('https://mdn.mozillademos.org/files/6079/pick.png') center no-repeat;
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: none;
+}
+
+#canvas .sample .delete {
+  width: 10px;
+  height: 10px;
+  margin: 5px;
+  background: url('https://mdn.mozillademos.org/files/6069/close.png') center no-repeat;
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: none;
+}
+
+
+/**
+ * Canvas controls
+ */
+
+#canvas .toggle-bg {
+  width: 16px;
+  height: 16px;
+  margin: 5px;
+  background: url("images/canvas-controls.png") center left no-repeat;
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+#canvas .toggle-bg:hover {
+  cursor: pointer;
+}
+
+#canvas[data-bg='true'] {
+  background: none;
+}
+
+#canvas[data-bg='true'] .toggle-bg {
+  background: url('https://mdn.mozillademos.org/files/6067/canvas-controls.png') center right no-repeat;
+}
+
+#zindex {
+  height: 20px;
+  margin: 5px;
+  font-size: 16px;
+  position: absolute;
+  opacity: 0;
+  top: -10000px;
+  left: 0;
+  color: #777;
+  float: left;
+  transition: opacity 1s;
+}
+
+#zindex input {
+  border: 1px solid #DDD;
+  font-size: 16px;
+  color: #777;
+}
+
+#zindex .ui-input-slider-info {
+  width: 60px;
+}
+
+#zindex[data-active='true'] {
+  top: 0;
+  opacity: 1;
+}
+
+
+ +

JavaScript Content

+ +
'use strict';
+
+var UIColorPicker = (function UIColorPicker() {
+
+  function getElemById(id) {
+    return document.getElementById(id);
+  }
+
+  var subscribers = [];
+  var pickers = [];
+
+  /**
+   * RGBA Color class
+   *
+   * HSV/HSB and HSL (hue, saturation, value / brightness, lightness)
+   * @param hue      0-360
+   * @param saturation  0-100
+   * @param value     0-100
+   * @param lightness    0-100
+   */
+
+  function Color(color) {
+
+    if(color instanceof Color === true) {
+      this.copy(color);
+      return;
+    }
+
+    this.r = 0;
+    this.g = 0;
+    this.b = 0;
+    this.a = 1;
+    this.hue = 0;
+    this.saturation = 0;
+    this.value = 0;
+    this.lightness = 0;
+    this.format = 'HSV';
+  }
+
+  function RGBColor(r, g, b) {
+    var color = new Color();
+    color.setRGBA(r, g, b, 1);
+    return color;
+  }
+
+  function RGBAColor(r, g, b, a) {
+    var color = new Color();
+    color.setRGBA(r, g, b, a);
+    return color;
+  }
+
+  function HSVColor(h, s, v) {
+    var color = new Color();
+    color.setHSV(h, s, v);
+    return color;
+  }
+
+  function HSVAColor(h, s, v, a) {
+    var color = new Color();
+    color.setHSV(h, s, v);
+    color.a = a;
+    return color;
+  }
+
+  function HSLColor(h, s, l) {
+    var color = new Color();
+    color.setHSL(h, s, l);
+    return color;
+  }
+
+  function HSLAColor(h, s, l, a) {
+    var color = new Color();
+    color.setHSL(h, s, l);
+    color.a = a;
+    return color;
+  }
+
+  Color.prototype.copy = function copy(obj) {
+    if(obj instanceof Color !== true) {
+      console.log('Typeof parameter not Color');
+      return;
+    }
+
+    this.r = obj.r;
+    this.g = obj.g;
+    this.b = obj.b;
+    this.a = obj.a;
+    this.hue = obj.hue;
+    this.saturation = obj.saturation;
+    this.value = obj.value;
+    this.format = '' + obj.format;
+    this.lightness = obj.lightness;
+  };
+
+  Color.prototype.setFormat = function setFormat(format) {
+    if (format === 'HSV')
+      this.format = 'HSV';
+    if (format === 'HSL')
+      this.format = 'HSL';
+  };
+
+  /*========== Methods to set Color Properties ==========*/
+
+  Color.prototype.isValidRGBValue = function isValidRGBValue(value) {
+    return (typeof(value) === 'number' && isNaN(value) === false &&
+      value >= 0 && value <= 255);
+  };
+
+  Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) {
+    if (this.isValidRGBValue(red) === false ||
+      this.isValidRGBValue(green) === false ||
+      this.isValidRGBValue(blue) === false)
+      return;
+
+      this.r = red | 0;
+      this.g = green | 0;
+      this.b = blue | 0;
+
+    if (this.isValidRGBValue(alpha) === true)
+      this.a = alpha | 0;
+  };
+
+  Color.prototype.setByName = function setByName(name, value) {
+    if (name === 'r' || name === 'g' || name === 'b') {
+      if(this.isValidRGBValue(value) === false)
+        return;
+
+      this[name] = value;
+      this.updateHSX();
+    }
+  };
+
+  Color.prototype.setHSV = function setHSV(hue, saturation, value) {
+    this.hue = hue;
+    this.saturation = saturation;
+    this.value = value;
+    this.HSVtoRGB();
+  };
+
+  Color.prototype.setHSL = function setHSL(hue, saturation, lightness) {
+    this.hue = hue;
+    this.saturation = saturation;
+    this.lightness = lightness;
+    this.HSLtoRGB();
+  };
+
+  Color.prototype.setHue = function setHue(value) {
+    if (typeof(value) !== 'number' || isNaN(value) === true ||
+      value < 0 || value > 359)
+      return;
+    this.hue = value;
+    this.updateRGB();
+  };
+
+  Color.prototype.setSaturation = function setSaturation(value) {
+    if (typeof(value) !== 'number' || isNaN(value) === true ||
+      value < 0 || value > 100)
+      return;
+    this.saturation = value;
+    this.updateRGB();
+  };
+
+  Color.prototype.setValue = function setValue(value) {
+    if (typeof(value) !== 'number' || isNaN(value) === true ||
+      value < 0 || value > 100)
+      return;
+    this.value = value;
+    this.HSVtoRGB();
+  };
+
+  Color.prototype.setLightness = function setLightness(value) {
+    if (typeof(value) !== 'number' || isNaN(value) === true ||
+      value < 0 || value > 100)
+      return;
+    this.lightness = value;
+    this.HSLtoRGB();
+  };
+
+  Color.prototype.setHexa = function setHexa(value) {
+    var valid  = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value);
+
+    if (valid !== true)
+      return;
+
+    if (value[0] === '#')
+      value = value.slice(1, value.length);
+
+    if (value.length === 3)
+      value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,'$1$1$2$2$3$3');
+
+    this.r = parseInt(value.substr(0, 2), 16);
+    this.g = parseInt(value.substr(2, 2), 16);
+    this.b = parseInt(value.substr(4, 2), 16);
+
+    this.alpha  = 1;
+    this.RGBtoHSV();
+  };
+
+  /*========== Conversion Methods ==========*/
+
+  Color.prototype.convertToHSL = function convertToHSL() {
+    if (this.format === 'HSL')
+      return;
+
+    this.setFormat('HSL');
+    this.RGBtoHSL();
+  };
+
+  Color.prototype.convertToHSV = function convertToHSV() {
+    if (this.format === 'HSV')
+      return;
+
+    this.setFormat('HSV');
+    this.RGBtoHSV();
+  };
+
+  /*========== Update Methods ==========*/
+
+  Color.prototype.updateRGB = function updateRGB() {
+    if (this.format === 'HSV') {
+      this.HSVtoRGB();
+      return;
+    }
+
+    if (this.format === 'HSL') {
+      this.HSLtoRGB();
+      return;
+    }
+  };
+
+  Color.prototype.updateHSX = function updateHSX() {
+    if (this.format === 'HSV') {
+      this.RGBtoHSV();
+      return;
+    }
+
+    if (this.format === 'HSL') {
+      this.RGBtoHSL();
+      return;
+    }
+  };
+
+  Color.prototype.HSVtoRGB = function HSVtoRGB() {
+    var sat = this.saturation / 100;
+    var value = this.value / 100;
+    var C = sat * value;
+    var H = this.hue / 60;
+    var X = C * (1 - Math.abs(H % 2 - 1));
+    var m = value - C;
+    var precision = 255;
+
+    C = (C + m) * precision | 0;
+    X = (X + m) * precision | 0;
+    m = m * precision | 0;
+
+    if (H >= 0 && H < 1) {  this.setRGBA(C, X, m);  return; }
+    if (H >= 1 && H < 2) {  this.setRGBA(X, C, m);  return; }
+    if (H >= 2 && H < 3) {  this.setRGBA(m, C, X);  return; }
+    if (H >= 3 && H < 4) {  this.setRGBA(m, X, C);  return; }
+    if (H >= 4 && H < 5) {  this.setRGBA(X, m, C);  return; }
+    if (H >= 5 && H < 6) {  this.setRGBA(C, m, X);  return; }
+  };
+
+  Color.prototype.HSLtoRGB = function HSLtoRGB() {
+    var sat = this.saturation / 100;
+    var light = this.lightness / 100;
+    var C = sat * (1 - Math.abs(2 * light - 1));
+    var H = this.hue / 60;
+    var X = C * (1 - Math.abs(H % 2 - 1));
+    var m = light - C/2;
+    var precision = 255;
+
+    C = (C + m) * precision | 0;
+    X = (X + m) * precision | 0;
+    m = m * precision | 0;
+
+    if (H >= 0 && H < 1) {  this.setRGBA(C, X, m);  return; }
+    if (H >= 1 && H < 2) {  this.setRGBA(X, C, m);  return; }
+    if (H >= 2 && H < 3) {  this.setRGBA(m, C, X);  return; }
+    if (H >= 3 && H < 4) {  this.setRGBA(m, X, C);  return; }
+    if (H >= 4 && H < 5) {  this.setRGBA(X, m, C);  return; }
+    if (H >= 5 && H < 6) {  this.setRGBA(C, m, X);  return; }
+  };
+
+  Color.prototype.RGBtoHSV = function RGBtoHSV() {
+    var red    = this.r / 255;
+    var green  = this.g / 255;
+    var blue  = this.b / 255;
+
+    var cmax = Math.max(red, green, blue);
+    var cmin = Math.min(red, green, blue);
+    var delta = cmax - cmin;
+    var hue = 0;
+    var saturation = 0;
+
+    if (delta) {
+      if (cmax === red ) { hue = ((green - blue) / delta); }
+      if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+      if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+      if (cmax) saturation = delta / cmax;
+    }
+
+    this.hue = 60 * hue | 0;
+    if (this.hue < 0) this.hue += 360;
+    this.saturation = (saturation * 100) | 0;
+    this.value = (cmax * 100) | 0;
+  };
+
+  Color.prototype.RGBtoHSL = function RGBtoHSL() {
+    var red    = this.r / 255;
+    var green  = this.g / 255;
+    var blue  = this.b / 255;
+
+    var cmax = Math.max(red, green, blue);
+    var cmin = Math.min(red, green, blue);
+    var delta = cmax - cmin;
+    var hue = 0;
+    var saturation = 0;
+    var lightness = (cmax + cmin) / 2;
+    var X = (1 - Math.abs(2 * lightness - 1));
+
+    if (delta) {
+      if (cmax === red ) { hue = ((green - blue) / delta); }
+      if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+      if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+      if (cmax) saturation = delta / X;
+    }
+
+    this.hue = 60 * hue | 0;
+    if (this.hue < 0) this.hue += 360;
+    this.saturation = (saturation * 100) | 0;
+    this.lightness = (lightness * 100) | 0;
+  };
+
+  /*========== Get Methods ==========*/
+
+  Color.prototype.getHexa = function getHexa() {
+    var r = this.r.toString(16);
+    var g = this.g.toString(16);
+    var b = this.b.toString(16);
+    if (this.r < 16) r = '0' + r;
+    if (this.g < 16) g = '0' + g;
+    if (this.b < 16) b = '0' + b;
+    var value = '#' + r + g + b;
+    return value.toUpperCase();
+  };
+
+  Color.prototype.getRGBA = function getRGBA() {
+
+    var rgb = '(' + this.r + ', ' + this.g + ', ' + this.b;
+    var a = '';
+    var v = '';
+    var x = parseFloat(this.a);
+    if (x !== 1) {
+      a = 'a';
+      v = ', ' + x;
+    }
+
+    var value = 'rgb' + a + rgb + v + ')';
+    return value;
+  };
+
+  Color.prototype.getHSLA = function getHSLA() {
+    if (this.format === 'HSV') {
+      var color = new Color(this);
+      color.setFormat('HSL');
+      color.updateHSX();
+      return color.getHSLA();
+    }
+
+    var a = '';
+    var v = '';
+    var hsl = '(' + this.hue + ', ' + this.saturation + '%, ' + this.lightness +'%';
+    var x = parseFloat(this.a);
+    if (x !== 1) {
+      a = 'a';
+      v = ', ' + x;
+    }
+
+    var value = 'hsl' + a + hsl + v + ')';
+    return value;
+  };
+
+  Color.prototype.getColor = function getColor() {
+    if (this.a | 0 === 1)
+      return this.getHexa();
+    return this.getRGBA();
+  };
+
+  /*=======================================================================*/
+  /*=======================================================================*/
+
+  /*========== Capture Mouse Movement ==========*/
+
+  var setMouseTracking = function setMouseTracking(elem, callback) {
+    elem.addEventListener('mousedown', function(e) {
+      callback(e);
+      document.addEventListener('mousemove', callback);
+    });
+
+    document.addEventListener('mouseup', function(e) {
+      document.removeEventListener('mousemove', callback);
+    });
+  };
+
+  /*====================*/
+  // Color Picker Class
+  /*====================*/
+
+  function ColorPicker(node) {
+    this.color = new Color();
+    this.node = node;
+    this.subscribers = [];
+
+    var type = this.node.getAttribute('data-mode');
+    var topic = this.node.getAttribute('data-topic');
+
+    this.topic = topic;
+    this.picker_mode = (type === 'HSL') ? 'HSL' : 'HSV';
+    this.color.setFormat(this.picker_mode);
+
+    this.createPickingArea();
+    this.createHueArea();
+
+    this.newInputComponent('H', 'hue', this.inputChangeHue.bind(this));
+    this.newInputComponent('S', 'saturation', this.inputChangeSaturation.bind(this));
+    this.newInputComponent('V', 'value', this.inputChangeValue.bind(this));
+    this.newInputComponent('L', 'lightness', this.inputChangeLightness.bind(this));
+
+    this.createAlphaArea();
+
+    this.newInputComponent('R', 'red', this.inputChangeRed.bind(this));
+    this.newInputComponent('G', 'green', this.inputChangeGreen.bind(this));
+    this.newInputComponent('B', 'blue', this.inputChangeBlue.bind(this));
+
+    this.createPreviewBox();
+    this.createChangeModeButton();
+
+    this.newInputComponent('alpha', 'alpha', this.inputChangeAlpha.bind(this));
+    this.newInputComponent('hexa', 'hexa', this.inputChangeHexa.bind(this));
+
+    this.setColor(this.color);
+    pickers[topic] = this;
+  }
+
+  /*************************************************************************/
+  //        Function for generating the color-picker
+  /*************************************************************************/
+
+  ColorPicker.prototype.createPickingArea = function createPickingArea() {
+    var area = document.createElement('div');
+    var picker = document.createElement('div');
+
+    area.className = 'picking-area';
+    picker.className = 'picker';
+
+    this.picking_area = area;
+    this.color_picker = picker;
+    setMouseTracking(area, this.updateColor.bind(this));
+
+    area.appendChild(picker);
+    this.node.appendChild(area);
+  };
+
+  ColorPicker.prototype.createHueArea = function createHueArea() {
+    var area = document.createElement('div');
+    var picker = document.createElement('div');
+
+    area.className = 'hue';
+    picker.className ='slider-picker';
+
+    this.hue_area = area;
+    this.hue_picker = picker;
+    setMouseTracking(area, this.updateHueSlider.bind(this));
+
+    area.appendChild(picker);
+    this.node.appendChild(area);
+  };
+
+  ColorPicker.prototype.createAlphaArea = function createAlphaArea() {
+    var area = document.createElement('div');
+    var mask = document.createElement('div');
+    var picker = document.createElement('div');
+
+    area.className = 'alpha';
+    mask.className = 'alpha-mask';
+    picker.className = 'slider-picker';
+
+    this.alpha_area = area;
+    this.alpha_mask = mask;
+    this.alpha_picker = picker;
+    setMouseTracking(area, this.updateAlphaSlider.bind(this));
+
+    area.appendChild(mask);
+    mask.appendChild(picker);
+    this.node.appendChild(area);
+  };
+
+  ColorPicker.prototype.createPreviewBox = function createPreviewBox(e) {
+    var preview_box = document.createElement('div');
+    var preview_color = document.createElement('div');
+
+    preview_box.className = 'preview';
+    preview_color.className = 'preview-color';
+
+    this.preview_color = preview_color;
+
+    preview_box.appendChild(preview_color);
+    this.node.appendChild(preview_box);
+  };
+
+  ColorPicker.prototype.newInputComponent = function newInputComponent(title, topic, onChangeFunc) {
+    var wrapper = document.createElement('div');
+    var input = document.createElement('input');
+    var info = document.createElement('span');
+
+    wrapper.className = 'input';
+    wrapper.setAttribute('data-topic', topic);
+    info.textContent = title;
+    info.className = 'name';
+    input.setAttribute('type', 'text');
+
+    wrapper.appendChild(info);
+    wrapper.appendChild(input);
+    this.node.appendChild(wrapper);
+
+    input.addEventListener('change', onChangeFunc);
+    input.addEventListener('click', function() {
+      this.select();
+    });
+
+    this.subscribe(topic, function(value) {
+      input.value = value;
+    });
+  };
+
+  ColorPicker.prototype.createChangeModeButton = function createChangeModeButton() {
+
+    var button = document.createElement('div');
+    button.className = 'switch_mode';
+    button.addEventListener('click', function() {
+      if (this.picker_mode === 'HSV')
+        this.setPickerMode('HSL');
+      else
+        this.setPickerMode('HSV');
+
+    }.bind(this));
+
+    this.node.appendChild(button);
+  };
+
+  /*************************************************************************/
+  //          Updates properties of UI elements
+  /*************************************************************************/
+
+  ColorPicker.prototype.updateColor = function updateColor(e) {
+    var x = e.pageX - this.picking_area.offsetLeft;
+    var y = e.pageY - this.picking_area.offsetTop;
+    var picker_offset = 5;
+
+    // width and height should be the same
+    var size = this.picking_area.clientWidth;
+
+    if (x > size) x = size;
+    if (y > size) y = size;
+    if (x < 0) x = 0;
+    if (y < 0) y = 0;
+
+    var value = 100 - (y * 100 / size) | 0;
+    var saturation = x * 100 / size | 0;
+
+    if (this.picker_mode === 'HSV')
+      this.color.setHSV(this.color.hue, saturation, value);
+    if (this.picker_mode === 'HSL')
+      this.color.setHSL(this.color.hue, saturation, value);
+
+    this.color_picker.style.left = x - picker_offset + 'px';
+    this.color_picker.style.top = y - picker_offset + 'px';
+
+    this.updateAlphaGradient();
+    this.updatePreviewColor();
+
+    this.notify('value', value);
+    this.notify('lightness', value);
+    this.notify('saturation', saturation);
+
+    this.notify('red', this.color.r);
+    this.notify('green', this.color.g);
+    this.notify('blue', this.color.b);
+    this.notify('hexa', this.color.getHexa());
+
+    notify(this.topic, this.color);
+  };
+
+  ColorPicker.prototype.updateHueSlider = function updateHueSlider(e) {
+    var x = e.pageX - this.hue_area.offsetLeft;
+    var width = this.hue_area.clientWidth;
+
+    if (x < 0) x = 0;
+    if (x > width) x = width;
+
+    // TODO 360 => 359
+    var hue = ((359 * x) / width) | 0;
+    // if (hue === 360) hue = 359;
+
+    this.updateSliderPosition(this.hue_picker, x);
+    this.setHue(hue);
+  };
+
+  ColorPicker.prototype.updateAlphaSlider = function updateAlphaSlider(e) {
+    var x = e.pageX - this.alpha_area.offsetLeft;
+    var width = this.alpha_area.clientWidth;
+
+    if (x < 0) x = 0;
+    if (x > width) x = width;
+
+    this.color.a = (x / width).toFixed(2);
+
+    this.updateSliderPosition(this.alpha_picker, x);
+    this.updatePreviewColor();
+
+    this.notify('alpha', this.color.a);
+    notify(this.topic, this.color);
+  };
+
+  ColorPicker.prototype.setHue = function setHue(value) {
+    this.color.setHue(value);
+
+    this.updatePickerBackground();
+    this.updateAlphaGradient();
+    this.updatePreviewColor();
+
+    this.notify('red', this.color.r);
+    this.notify('green', this.color.g);
+    this.notify('blue', this.color.b);
+    this.notify('hexa', this.color.getHexa());
+    this.notify('hue', this.color.hue);
+
+    notify(this.topic, this.color);
+  };
+
+  // Updates when one of Saturation/Value/Lightness changes
+  ColorPicker.prototype.updateSLV = function updateSLV() {
+    this.updatePickerPosition();
+    this.updateAlphaGradient();
+    this.updatePreviewColor();
+
+    this.notify('red', this.color.r);
+    this.notify('green', this.color.g);
+    this.notify('blue', this.color.b);
+    this.notify('hexa', this.color.getHexa());
+
+    notify(this.topic, this.color);
+  };
+
+  /*************************************************************************/
+  //        Update positions of various UI elements
+  /*************************************************************************/
+
+  ColorPicker.prototype.updatePickerPosition = function updatePickerPosition() {
+    var size = this.picking_area.clientWidth;
+    var value = 0;
+    var offset = 5;
+
+    if (this.picker_mode === 'HSV')
+      value = this.color.value;
+    if (this.picker_mode === 'HSL')
+      value = this.color.lightness;
+
+    var x = (this.color.saturation * size / 100) | 0;
+    var y = size - (value * size / 100) | 0;
+
+    this.color_picker.style.left = x - offset + 'px';
+    this.color_picker.style.top = y - offset + 'px';
+  };
+
+  ColorPicker.prototype.updateSliderPosition = function updateSliderPosition(elem, pos) {
+    elem.style.left = Math.max(pos - 3, -2) + 'px';
+  };
+
+  ColorPicker.prototype.updateHuePicker = function updateHuePicker() {
+    var size = this.hue_area.clientWidth;
+    var offset = 1;
+    var pos = (this.color.hue * size / 360 ) | 0;
+    this.hue_picker.style.left = pos - offset + 'px';
+  };
+
+  ColorPicker.prototype.updateAlphaPicker = function updateAlphaPicker() {
+    var size = this.alpha_area.clientWidth;
+    var offset = 1;
+    var pos = (this.color.a * size) | 0;
+    this.alpha_picker.style.left = pos - offset + 'px';
+  };
+
+  /*************************************************************************/
+  //            Update background colors
+  /*************************************************************************/
+
+  ColorPicker.prototype.updatePickerBackground = function updatePickerBackground() {
+    var nc = new Color(this.color);
+    nc.setHSV(nc.hue, 100, 100);
+    this.picking_area.style.backgroundColor = nc.getHexa();
+  };
+
+  ColorPicker.prototype.updateAlphaGradient = function updateAlphaGradient() {
+    this.alpha_mask.style.backgroundColor = this.color.getHexa();
+  };
+
+  ColorPicker.prototype.updatePreviewColor = function updatePreviewColor() {
+    this.preview_color.style.backgroundColor = this.color.getColor();
+  };
+
+  /*************************************************************************/
+  //            Update input elements
+  /*************************************************************************/
+
+  ColorPicker.prototype.inputChangeHue = function inputChangeHue(e) {
+    var value = parseInt(e.target.value);
+    this.setHue(value);
+    this.updateHuePicker();
+  };
+
+  ColorPicker.prototype.inputChangeSaturation = function inputChangeSaturation(e) {
+    var value = parseInt(e.target.value);
+    this.color.setSaturation(value);
+    e.target.value = this.color.saturation;
+    this.updateSLV();
+  };
+
+  ColorPicker.prototype.inputChangeValue = function inputChangeValue(e) {
+    var value = parseInt(e.target.value);
+    this.color.setValue(value);
+    e.target.value = this.color.value;
+    this.updateSLV();
+  };
+
+  ColorPicker.prototype.inputChangeLightness = function inputChangeLightness(e) {
+    var value = parseInt(e.target.value);
+    this.color.setLightness(value);
+    e.target.value = this.color.lightness;
+    this.updateSLV();
+  };
+
+  ColorPicker.prototype.inputChangeRed = function inputChangeRed(e) {
+    var value = parseInt(e.target.value);
+    this.color.setByName('r', value);
+    e.target.value = this.color.r;
+    this.setColor(this.color);
+  };
+
+  ColorPicker.prototype.inputChangeGreen = function inputChangeGreen(e) {
+    var value = parseInt(e.target.value);
+    this.color.setByName('g', value);
+    e.target.value = this.color.g;
+    this.setColor(this.color);
+  };
+
+  ColorPicker.prototype.inputChangeBlue = function inputChangeBlue(e) {
+    var value = parseInt(e.target.value);
+    this.color.setByName('b', value);
+    e.target.value = this.color.b;
+    this.setColor(this.color);
+  };
+
+  ColorPicker.prototype.inputChangeAlpha = function inputChangeAlpha(e) {
+    var value = parseFloat(e.target.value);
+
+    if (typeof value === 'number' && isNaN(value) === false &&
+      value >= 0 && value <= 1)
+      this.color.a = value.toFixed(2);
+
+    e.target.value = this.color.a;
+    this.updateAlphaPicker();
+  };
+
+  ColorPicker.prototype.inputChangeHexa = function inputChangeHexa(e) {
+    var value = e.target.value;
+    this.color.setHexa(value);
+    this.setColor(this.color);
+  };
+
+  /*************************************************************************/
+  //              Internal Pub/Sub
+  /*************************************************************************/
+
+  ColorPicker.prototype.subscribe = function subscribe(topic, callback) {
+    this.subscribers[topic] = callback;
+  };
+
+  ColorPicker.prototype.notify = function notify(topic, value) {
+    if (this.subscribers[topic])
+      this.subscribers[topic](value);
+  };
+
+  /*************************************************************************/
+  //              Set Picker Properties
+  /*************************************************************************/
+
+  ColorPicker.prototype.setColor = function setColor(color) {
+    if(color instanceof Color !== true) {
+      console.log('Typeof parameter not Color');
+      return;
+    }
+
+    if (color.format !== this.picker_mode) {
+      color.setFormat(this.picker_mode);
+      color.updateHSX();
+    }
+
+    this.color.copy(color);
+    this.updateHuePicker();
+    this.updatePickerPosition();
+    this.updatePickerBackground();
+    this.updateAlphaPicker();
+    this.updateAlphaGradient();
+    this.updatePreviewColor();
+
+    this.notify('red', this.color.r);
+    this.notify('green', this.color.g);
+    this.notify('blue', this.color.b);
+
+    this.notify('hue', this.color.hue);
+    this.notify('saturation', this.color.saturation);
+    this.notify('value', this.color.value);
+    this.notify('lightness', this.color.lightness);
+
+    this.notify('alpha', this.color.a);
+    this.notify('hexa', this.color.getHexa());
+    notify(this.topic, this.color);
+  };
+
+  ColorPicker.prototype.setPickerMode = function setPickerMode(mode) {
+    if (mode !== 'HSV' && mode !== 'HSL')
+      return;
+
+    this.picker_mode = mode;
+    this.node.setAttribute('data-mode', this.picker_mode);
+    this.setColor(this.color);
+  };
+
+  /*************************************************************************/
+  //                UNUSED
+  /*************************************************************************/
+
+  var setPickerMode = function setPickerMode(topic, mode) {
+    if (pickers[topic])
+      pickers[topic].setPickerMode(mode);
+  };
+
+  var setColor = function setColor(topic, color) {
+    if (pickers[topic])
+      pickers[topic].setColor(color);
+  };
+
+  var getColor = function getColor(topic) {
+    if (pickers[topic])
+      return new Color(pickers[topic].color);
+  };
+
+  var subscribe = function subscribe(topic, callback) {
+    if (subscribers[topic] === undefined)
+      subscribers[topic] = [];
+
+    subscribers[topic].push(callback);
+  };
+
+  var unsubscribe = function unsubscribe(callback) {
+    subscribers.indexOf(callback);
+    subscribers.splice(index, 1);
+  };
+
+  var notify = function notify(topic, value) {
+    if (subscribers[topic] === undefined || subscribers[topic].length === 0)
+      return;
+
+    var color = new Color(value);
+    for (var i in subscribers[topic])
+      subscribers[topic][i](color);
+  };
+
+  var init = function init() {
+    var elem = document.querySelectorAll('.ui-color-picker');
+    var size = elem.length;
+    for (var i = 0; i < size; i++)
+      new ColorPicker(elem[i]);
+  };
+
+  return {
+    init : init,
+    Color : Color,
+    RGBColor : RGBColor,
+    RGBAColor : RGBAColor,
+    HSVColor : HSVColor,
+    HSVAColor : HSVAColor,
+    HSLColor : HSLColor,
+    HSLAColor : HSLAColor,
+    setColor : setColor,
+    getColor : getColor,
+    subscribe : subscribe,
+    unsubscribe : unsubscribe,
+    setPickerMode : setPickerMode
+  };
+
+})();
+
+
+
+/**
+ * UI-SlidersManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+  var subscribers = {};
+  var sliders = [];
+
+  var InputComponent = function InputComponent(obj) {
+    var input = document.createElement('input');
+    input.setAttribute('type', 'text');
+    input.style.width = 50 + obj.precision * 10 + 'px';
+
+    input.addEventListener('click', function(e) {
+      this.select();
+    });
+
+    input.addEventListener('change', function(e) {
+      var value = parseFloat(e.target.value);
+
+      if (isNaN(value) === true)
+        setValue(obj.topic, obj.value);
+      else
+        setValue(obj.topic, value);
+    });
+
+    return input;
+  };
+
+  var SliderComponent = function SliderComponent(obj, sign) {
+    var slider = document.createElement('div');
+    var startX = null;
+    var start_value = 0;
+
+    slider.addEventListener("click", function(e) {
+      document.removeEventListener("mousemove", sliderMotion);
+      setValue(obj.topic, obj.value + obj.step * sign);
+    });
+
+    slider.addEventListener("mousedown", function(e) {
+      startX = e.clientX;
+      start_value = obj.value;
+      document.body.style.cursor = "e-resize";
+
+      document.addEventListener("mouseup", slideEnd);
+      document.addEventListener("mousemove", sliderMotion);
+    });
+
+    var slideEnd = function slideEnd(e) {
+      document.removeEventListener("mousemove", sliderMotion);
+      document.body.style.cursor = "auto";
+      slider.style.cursor = "pointer";
+    };
+
+    var sliderMotion = function sliderMotion(e) {
+      slider.style.cursor = "e-resize";
+      var delta = (e.clientX - startX) / obj.sensivity | 0;
+      var value = delta * obj.step + start_value;
+      setValue(obj.topic, value);
+    };
+
+    return slider;
+  };
+
+  var InputSlider = function(node) {
+    var min    = parseFloat(node.getAttribute('data-min'));
+    var max    = parseFloat(node.getAttribute('data-max'));
+    var step  = parseFloat(node.getAttribute('data-step'));
+    var value  = parseFloat(node.getAttribute('data-value'));
+    var topic  = node.getAttribute('data-topic');
+    var unit  = node.getAttribute('data-unit');
+    var name   = node.getAttribute('data-info');
+    var sensivity = node.getAttribute('data-sensivity') | 0;
+    var precision = node.getAttribute('data-precision') | 0;
+
+    this.min = isNaN(min) ? 0 : min;
+    this.max = isNaN(max) ? 100 : max;
+    this.precision = precision >= 0 ? precision : 0;
+    this.step = step < 0 || isNaN(step) ? 1 : step.toFixed(precision);
+    this.topic = topic;
+    this.node = node;
+    this.unit = unit === null ? '' : unit;
+    this.sensivity = sensivity > 0 ? sensivity : 5;
+    value = isNaN(value) ? this.min : value;
+
+    var input = new InputComponent(this);
+    var slider_left  = new SliderComponent(this, -1);
+    var slider_right = new SliderComponent(this,  1);
+
+    slider_left.className = 'ui-input-slider-left';
+    slider_right.className = 'ui-input-slider-right';
+
+    if (name) {
+      var info = document.createElement('span');
+      info.className = 'ui-input-slider-info';
+      info.textContent = name;
+      node.appendChild(info);
+    }
+
+    node.appendChild(slider_left);
+    node.appendChild(input);
+    node.appendChild(slider_right);
+
+    this.input = input;
+    sliders[topic] = this;
+    setValue(topic, value);
+  };
+
+  InputSlider.prototype.setInputValue = function setInputValue() {
+    this.input.value = this.value.toFixed(this.precision) + this.unit;
+  };
+
+  var setValue = function setValue(topic, value, send_notify) {
+    var slider = sliders[topic];
+    if (slider === undefined)
+      return;
+
+    value = parseFloat(value.toFixed(slider.precision));
+
+    if (value > slider.max) value = slider.max;
+    if (value < slider.min)  value = slider.min;
+
+    slider.value = value;
+    slider.node.setAttribute('data-value', value);
+
+    slider.setInputValue();
+
+    if (send_notify === false)
+      return;
+
+    notify.call(slider);
+  };
+
+  var setMax = function setMax(topic, value) {
+    var slider = sliders[topic];
+    if (slider === undefined)
+      return;
+
+    slider.max = value;
+    setValue(topic, slider.value);
+  };
+
+  var setMin = function setMin(topic, value) {
+    var slider = sliders[topic];
+    if (slider === undefined)
+      return;
+
+    slider.min = value;
+    setValue(topic, slider.value);
+  };
+
+  var setUnit = function setUnit(topic, unit) {
+    var slider = sliders[topic];
+    if (slider === undefined)
+      return;
+
+    slider.unit = unit;
+    setValue(topic, slider.value);
+  };
+
+  var setStep = function setStep(topic, value) {
+    var slider = sliders[topic];
+    if (slider === undefined)
+      return;
+
+    slider.step = parseFloat(value);
+    setValue(topic, slider.value);
+  };
+
+  var setPrecision = function setPrecision(topic, value) {
+    var slider = sliders[topic];
+    if (slider === undefined)
+      return;
+
+    value = value | 0;
+    slider.precision = value;
+
+    var step = parseFloat(slider.step.toFixed(value));
+    if (step === 0)
+      slider.step = 1 / Math.pow(10, value);
+
+    setValue(topic, slider.value);
+  };
+
+  var setSensivity = function setSensivity(topic, value) {
+    var slider = sliders[topic];
+    if (slider === undefined)
+      return;
+
+    value = value | 0;
+
+    slider.sensivity = value > 0 ? value : 5;
+  };
+
+  var getNode =  function getNode(topic) {
+    return sliders[topic].node;
+  };
+
+  var getPrecision =  function getPrecision(topic) {
+    return sliders[topic].precision;
+  };
+
+  var getStep =  function getStep(topic) {
+    return sliders[topic].step;
+  };
+
+  var subscribe = function subscribe(topic, callback) {
+    if (subscribers[topic] === undefined)
+      subscribers[topic] = [];
+    subscribers[topic].push(callback);
+  };
+
+  var unsubscribe = function unsubscribe(topic, callback) {
+    subscribers[topic].indexOf(callback);
+    subscribers[topic].splice(index, 1);
+  };
+
+  var notify = function notify() {
+    if (subscribers[this.topic] === undefined)
+      return;
+    for (var i = 0; i < subscribers[this.topic].length; i++)
+      subscribers[this.topic][i](this.value);
+  };
+
+  var createSlider = function createSlider(topic, label) {
+    var slider = document.createElement('div');
+    slider.className = 'ui-input-slider';
+    slider.setAttribute('data-topic', topic);
+
+    if (label !== undefined)
+      slider.setAttribute('data-info', label);
+
+    new InputSlider(slider);
+    return slider;
+  };
+
+  var init = function init() {
+    var elem = document.querySelectorAll('.ui-input-slider');
+    var size = elem.length;
+    for (var i = 0; i < size; i++)
+      new InputSlider(elem[i]);
+  };
+
+  return {
+    init : init,
+    setMax : setMax,
+    setMin : setMin,
+    setUnit : setUnit,
+    setStep : setStep,
+    getNode : getNode,
+    getStep : getStep,
+    setValue : setValue,
+    subscribe : subscribe,
+    unsubscribe : unsubscribe,
+    setPrecision : setPrecision,
+    setSensivity : setSensivity,
+    getPrecision : getPrecision,
+    createSlider : createSlider,
+  };
+
+})();
+
+
+'use strict';
+
+window.addEventListener("load", function() {
+  ColorPickerTool.init();
+});
+
+var ColorPickerTool = (function ColorPickerTool() {
+
+  /*========== Get DOM Element By ID ==========*/
+
+  function getElemById(id) {
+    return document.getElementById(id);
+  }
+
+  function allowDropEvent(e) {
+    e.preventDefault();
+  }
+
+  /*========== Make an element resizable relative to it's parent ==========*/
+
+  var UIComponent = (function UIComponent() {
+
+    function makeResizable(elem, axis) {
+      var valueX = 0;
+      var valueY = 0;
+      var action = 0;
+
+      var resizeStart = function resizeStart(e) {
+        e.stopPropagation();
+        e.preventDefault();
+        if (e.button !== 0)
+          return;
+
+        valueX = e.clientX - elem.clientWidth;
+        valueY = e.clientY - elem.clientHeight;
+
+        document.body.setAttribute('data-resize', axis);
+        document.addEventListener('mousemove', mouseMove);
+        document.addEventListener('mouseup', resizeEnd);
+      };
+
+      var mouseMove = function mouseMove(e) {
+        if (action >= 0)
+          elem.style.width = e.clientX - valueX + 'px';
+        if (action <= 0)
+          elem.style.height = e.clientY - valueY + 'px';
+      };
+
+      var resizeEnd = function resizeEnd(e) {
+        if (e.button !== 0)
+          return;
+
+        document.body.removeAttribute('data-resize', axis);
+        document.removeEventListener('mousemove', mouseMove);
+        document.removeEventListener('mouseup', resizeEnd);
+      };
+
+      var handle = document.createElement('div');
+      handle.className = 'resize-handle';
+
+      if (axis === 'width') action = 1;
+      else if (axis === 'height') action = -1;
+      else axis = 'both';
+
+      handle.className = 'resize-handle';
+      handle.setAttribute('data-resize', axis);
+      handle.addEventListener('mousedown', resizeStart);
+      elem.appendChild(handle);
+    };
+
+    /*========== Make an element draggable relative to it's parent ==========*/
+
+    var makeDraggable = function makeDraggable(elem, endFunction) {
+
+      var offsetTop;
+      var offsetLeft;
+
+      elem.setAttribute('data-draggable', 'true');
+
+      var dragStart = function dragStart(e) {
+        e.preventDefault();
+        e.stopPropagation();
+
+        if (e.target.getAttribute('data-draggable') !== 'true' ||
+          e.target !== elem || e.button !== 0)
+          return;
+
+        offsetLeft = e.clientX - elem.offsetLeft;
+        offsetTop = e.clientY - elem.offsetTop;
+
+        document.addEventListener('mousemove', mouseDrag);
+        document.addEventListener('mouseup', dragEnd);
+      };
+
+      var dragEnd = function dragEnd(e) {
+        if (e.button !== 0)
+          return;
+
+        document.removeEventListener('mousemove', mouseDrag);
+        document.removeEventListener('mouseup', dragEnd);
+      };
+
+      var mouseDrag = function mouseDrag(e) {
+        elem.style.left = e.clientX - offsetLeft + 'px';
+        elem.style.top = e.clientY - offsetTop + 'px';
+      };
+
+      elem.addEventListener('mousedown', dragStart, false);
+    };
+
+    return {
+      makeResizable : makeResizable,
+      makeDraggable : makeDraggable
+    };
+
+  })();
+
+  /*========== Color Class ==========*/
+
+  var Color = UIColorPicker.Color;
+  var HSLColor = UIColorPicker.HSLColor;
+
+  /**
+   * ColorPalette
+   */
+  var ColorPalette = (function ColorPalette() {
+
+    var samples = [];
+    var color_palette;
+    var complementary;
+
+    var hideNode = function(node) {
+      node.setAttribute('data-hidden', 'true');
+    };
+
+    var ColorSample = function ColorSample(id) {
+      var node = document.createElement('div');
+      node.className = 'sample';
+
+      this.uid = samples.length;
+      this.node = node;
+      this.color = new Color();
+
+      node.setAttribute('sample-id', this.uid);
+      node.setAttribute('draggable', 'true');
+      node.addEventListener('dragstart', this.dragStart.bind(this));
+      node.addEventListener('click', this.pickColor.bind(this));
+
+      samples.push(this);
+    };
+
+    ColorSample.prototype.updateBgColor = function updateBgColor() {
+      this.node.style.backgroundColor = this.color.getColor();
+    };
+
+    ColorSample.prototype.updateColor = function updateColor(color) {
+      this.color.copy(color);
+      this.updateBgColor();
+    };
+
+    ColorSample.prototype.updateHue = function updateHue(color, degree, steps) {
+      this.color.copy(color);
+      var hue = (steps * degree + this.color.hue) % 360;
+      if (hue < 0) hue += 360;
+      this.color.setHue(hue);
+      this.updateBgColor();
+    };
+
+    ColorSample.prototype.updateSaturation = function updateSaturation(color, value, steps) {
+      var saturation = color.saturation + value * steps;
+      if (saturation <= 0) {
+        this.node.setAttribute('data-hidden', 'true');
+        return;
+      }
+
+      this.node.removeAttribute('data-hidden');
+      this.color.copy(color);
+      this.color.setSaturation(saturation);
+      this.updateBgColor();
+    };
+
+    ColorSample.prototype.updateLightness = function updateLightness(color, value, steps) {
+      var lightness = color.lightness + value * steps;
+      if (lightness <= 0) {
+        this.node.setAttribute('data-hidden', 'true');
+        return;
+      }
+      this.node.removeAttribute('data-hidden');
+      this.color.copy(color);
+      this.color.setLightness(lightness);
+      this.updateBgColor();
+    };
+
+    ColorSample.prototype.updateBrightness = function updateBrightness(color, value, steps) {
+      var brightness = color.value + value * steps;
+      if (brightness <= 0) {
+        this.node.setAttribute('data-hidden', 'true');
+        return;
+      }
+      this.node.removeAttribute('data-hidden');
+      this.color.copy(color);
+      this.color.setValue(brightness);
+      this.updateBgColor();
+    };
+
+    ColorSample.prototype.updateAlpha = function updateAlpha(color, value, steps) {
+      var alpha = parseFloat(color.a) + value * steps;
+      if (alpha <= 0) {
+        this.node.setAttribute('data-hidden', 'true');
+        return;
+      }
+      this.node.removeAttribute('data-hidden');
+      this.color.copy(color);
+      this.color.a = parseFloat(alpha.toFixed(2));
+      this.updateBgColor();
+    };
+
+    ColorSample.prototype.pickColor = function pickColor() {
+      UIColorPicker.setColor('picker', this.color);
+    };
+
+    ColorSample.prototype.dragStart = function dragStart(e) {
+      e.dataTransfer.setData('sampleID', this.uid);
+      e.dataTransfer.setData('location', 'palette-samples');
+    };
+
+    var Palette = function Palette(text, size) {
+      this.samples = [];
+      this.locked = false;
+
+      var palette = document.createElement('div');
+      var title = document.createElement('div');
+      var controls = document.createElement('div');
+      var container = document.createElement('div');
+      var lock = document.createElement('div');
+
+      container.className = 'container';
+      title.className = 'title';
+      palette.className = 'palette';
+      controls.className = 'controls';
+      lock.className = 'lock';
+      title.textContent = text;
+
+      controls.appendChild(lock);
+      container.appendChild(title);
+      container.appendChild(controls);
+      container.appendChild(palette);
+
+      lock.addEventListener('click', function () {
+        this.locked = !this.locked;
+        lock.setAttribute('locked-state', this.locked);
+      }.bind(this));
+
+      for(var i = 0; i < size; i++) {
+        var sample = new ColorSample();
+        this.samples.push(sample);
+        palette.appendChild(sample.node);
+      }
+
+      this.container = container;
+      this.title = title;
+    };
+
+    var createHuePalette = function createHuePalette() {
+      var palette = new Palette('Hue', 12);
+
+      UIColorPicker.subscribe('picker', function(color) {
+        if (palette.locked === true)
+          return;
+
+        for(var i = 0; i < 12; i++) {
+          palette.samples[i].updateHue(color, 30, i);
+        }
+      });
+
+      color_palette.appendChild(palette.container);
+    };
+
+    var createSaturationPalette = function createSaturationPalette() {
+      var palette = new Palette('Saturation', 11);
+
+      UIColorPicker.subscribe('picker', function(color) {
+        if (palette.locked === true)
+          return;
+
+        for(var i = 0; i < 11; i++) {
+          palette.samples[i].updateSaturation(color, -10, i);
+        }
+      });
+
+      color_palette.appendChild(palette.container);
+    };
+
+    /* Brightness or Lightness - depends on the picker mode */
+    var createVLPalette = function createSaturationPalette() {
+      var palette = new Palette('Lightness', 11);
+
+      UIColorPicker.subscribe('picker', function(color) {
+        if (palette.locked === true)
+          return;
+
+        if(color.format === 'HSL') {
+          palette.title.textContent = 'Lightness';
+          for(var i = 0; i < 11; i++)
+            palette.samples[i].updateLightness(color, -10, i);
+        }
+        else {
+          palette.title.textContent = 'Value';
+          for(var i = 0; i < 11; i++)
+            palette.samples[i].updateBrightness(color, -10, i);
+        }
+      });
+
+      color_palette.appendChild(palette.container);
+    };
+
+    var isBlankPalette = function isBlankPalette(container, value) {
+      if (value === 0) {
+        container.setAttribute('data-collapsed', 'true');
+        return true;
+      }
+
+      container.removeAttribute('data-collapsed');
+      return false;
+    };
+
+    var createAlphaPalette = function createAlphaPalette() {
+      var palette = new Palette('Alpha', 10);
+
+      UIColorPicker.subscribe('picker', function(color) {
+        if (palette.locked === true)
+          return;
+
+        for(var i = 0; i < 10; i++) {
+          palette.samples[i].updateAlpha(color, -0.1, i);
+        }
+      });
+
+      color_palette.appendChild(palette.container);
+    };
+
+    var getSampleColor = function getSampleColor(id) {
+      if (samples[id] !== undefined && samples[id]!== null)
+        return new Color(samples[id].color);
+    };
+
+    var init = function init() {
+      color_palette = getElemById('color-palette');
+
+      createHuePalette();
+      createSaturationPalette();
+      createVLPalette();
+      createAlphaPalette();
+
+    };
+
+    return {
+      init : init,
+      getSampleColor : getSampleColor
+    };
+
+  })();
+
+  /**
+   * ColorInfo
+   */
+  var ColorInfo = (function ColorInfo() {
+
+    var info_box;
+    var select;
+    var RGBA;
+    var HEXA;
+    var HSLA;
+
+    var updateInfo = function updateInfo(color) {
+      if (color.a | 0 === 1) {
+        RGBA.info.textContent = 'RGB';
+        HSLA.info.textContent = 'HSL';
+      }
+      else {
+        RGBA.info.textContent = 'RGBA';
+        HSLA.info.textContent = 'HSLA';
+      }
+
+      RGBA.value.value = color.getRGBA();
+      HSLA.value.value = color.getHSLA();
+      HEXA.value.value = color.getHexa();
+    };
+
+    var InfoProperty = function InfoProperty(info) {
+
+      var node = document.createElement('div');
+      var title = document.createElement('div');
+      var value = document.createElement('input');
+      var copy = document.createElement('div');
+
+      node.className = 'property';
+      title.className = 'type';
+      value.className = 'value';
+      copy.className = 'copy';
+
+      title.textContent = info;
+      value.setAttribute('type', 'text');
+
+      copy.addEventListener('click', function() {
+        value.select();
+      });
+
+      node.appendChild(title);
+      node.appendChild(value);
+      node.appendChild(copy);
+
+      this.node = node;
+      this.value = value;
+      this.info = title;
+
+      info_box.appendChild(node);
+    };
+
+    var init = function init() {
+
+      info_box = getElemById('color-info');
+
+      RGBA = new InfoProperty('RGBA');
+      HSLA = new InfoProperty('HSLA');
+      HEXA = new InfoProperty('HEXA');
+
+      UIColorPicker.subscribe('picker', updateInfo);
+
+    };
+
+    return {
+      init: init
+    };
+
+  })();
+
+  /**
+   * ColorPicker Samples
+   */
+  var ColorPickerSamples = (function ColorPickerSamples() {
+
+    var samples = [];
+    var nr_samples = 0;
+    var active = null;
+    var container = null;
+    var  samples_per_line = 10;
+    var trash_can = null;
+    var base_color = new HSLColor(0, 50, 100);
+    var add_btn;
+    var add_btn_pos;
+
+    var ColorSample = function ColorSample() {
+      var node = document.createElement('div');
+      node.className = 'sample';
+
+      this.uid = samples.length;
+      this.index = nr_samples++;
+      this.node = node;
+      this.color = new Color(base_color);
+
+      node.setAttribute('sample-id', this.uid);
+      node.setAttribute('draggable', 'true');
+
+      node.addEventListener('dragstart', this.dragStart.bind(this));
+      node.addEventListener('dragover' , allowDropEvent);
+      node.addEventListener('drop'     , this.dragDrop.bind(this));
+
+      this.updatePosition(this.index);
+      this.updateBgColor();
+      samples.push(this);
+    };
+
+    ColorSample.prototype.updateBgColor = function updateBgColor() {
+      this.node.style.backgroundColor = this.color.getColor();
+    };
+
+    ColorSample.prototype.updatePosition = function updatePosition(index) {
+      this.index = index;
+      this.posY = 5 + ((index / samples_per_line) | 0) * 52;
+      this.posX = 5 + ((index % samples_per_line) | 0) * 52;
+      this.node.style.top  = this.posY + 'px';
+      this.node.style.left = this.posX + 'px';
+    };
+
+    ColorSample.prototype.updateColor = function updateColor(color) {
+      this.color.copy(color);
+      this.updateBgColor();
+    };
+
+    ColorSample.prototype.activate = function activate() {
+      UIColorPicker.setColor('picker', this.color);
+      this.node.setAttribute('data-active', 'true');
+    };
+
+    ColorSample.prototype.deactivate = function deactivate() {
+      this.node.removeAttribute('data-active');
+    };
+
+    ColorSample.prototype.dragStart = function dragStart(e) {
+      e.dataTransfer.setData('sampleID', this.uid);
+      e.dataTransfer.setData('location', 'picker-samples');
+    };
+
+    ColorSample.prototype.dragDrop = function dragDrop(e) {
+      e.stopPropagation();
+      this.color = Tool.getSampleColorFrom(e);
+      this.updateBgColor();
+    };
+
+    ColorSample.prototype.deleteSample = function deleteSample() {
+      container.removeChild(this.node);
+      samples[this.uid] = null;
+      nr_samples--;
+    };
+
+    var updateUI = function updateUI() {
+      updateContainerProp();
+
+      var index = 0;
+      var nr = samples.length;
+      for (var i=0; i < nr; i++)
+        if (samples[i] !== null) {
+          samples[i].updatePosition(index);
+          index++;
+        }
+
+      AddSampleButton.updatePosition(index);
+    };
+
+    var deleteSample = function deleteSample(e) {
+      trash_can.parentElement.setAttribute('drag-state', 'none');
+
+      var location = e.dataTransfer.getData('location');
+      if (location !== 'picker-samples')
+        return;
+
+      var sampleID = e.dataTransfer.getData('sampleID');
+      samples[sampleID].deleteSample();
+      console.log(samples);
+
+      updateUI();
+    };
+
+    var createDropSample = function createDropSample() {
+      var sample = document.createElement('div');
+      sample.id = 'drop-effect-sample';
+      sample.className = 'sample';
+      container.appendChild(sample);
+    };
+
+    var setActivateSample = function setActivateSample(e) {
+      if (e.target.className !== 'sample')
+        return;
+
+      unsetActiveSample(active);
+      Tool.unsetVoidSample();
+      CanvasSamples.unsetActiveSample();
+      active = samples[e.target.getAttribute('sample-id')];
+      active.activate();
+    };
+
+    var unsetActiveSample = function unsetActiveSample() {
+      if (active)
+        active.deactivate();
+      active = null;
+    };
+
+    var getSampleColor = function getSampleColor(id) {
+      if (samples[id] !== undefined && samples[id]!== null)
+        return new Color(samples[id].color);
+    };
+
+    var updateContainerProp = function updateContainerProp() {
+      samples_per_line = ((container.clientWidth - 5) / 52) | 0;
+      var height = 52 * (1 + (nr_samples / samples_per_line) | 0);
+      container.style.height = height + 10 + 'px';
+    };
+
+    var AddSampleButton = (function AddSampleButton() {
+      var node;
+      var _index = 0;
+      var _posX;
+      var _posY;
+
+      var updatePosition = function updatePosition(index) {
+        _index = index;
+        _posY = 5 + ((index / samples_per_line) | 0) * 52;
+        _posX = 5 + ((index % samples_per_line) | 0) * 52;
+
+        node.style.top  = _posY + 'px';
+        node.style.left = _posX + 'px';
+      };
+
+      var addButtonClick = function addButtonClick() {
+        var sample = new ColorSample();
+        container.appendChild(sample.node);
+        updatePosition(_index + 1);
+        updateUI();
+      };
+
+      var init = function init() {
+        node = document.createElement('div');
+        var icon = document.createElement('div');
+
+        node.className = 'sample';
+        icon.id = 'add-icon';
+        node.appendChild(icon);
+        node.addEventListener('click', addButtonClick);
+
+        updatePosition(0);
+        container.appendChild(node);
+      };
+
+      return {
+        init : init,
+        updatePosition : updatePosition
+      };
+    })();
+
+    var init = function init() {
+      container = getElemById('picker-samples');
+      trash_can = getElemById('trash-can');
+
+      AddSampleButton.init();
+
+      for (var i=0; i<16; i++) {
+        var sample = new ColorSample();
+        container.appendChild(sample.node);
+      }
+
+      AddSampleButton.updatePosition(samples.length);
+      updateUI();
+
+      active = samples[0];
+      active.activate();
+
+      container.addEventListener('click', setActivateSample);
+
+      trash_can.addEventListener('dragover', allowDropEvent);
+      trash_can.addEventListener('dragenter', function() {
+        this.parentElement.setAttribute('drag-state', 'enter');
+      });
+      trash_can.addEventListener('dragleave', function(e) {
+        this.parentElement.setAttribute('drag-state', 'none');
+      });
+      trash_can.addEventListener('drop', deleteSample);
+
+      UIColorPicker.subscribe('picker', function(color) {
+        if (active)
+          active.updateColor(color);
+      });
+
+    };
+
+    return {
+      init : init,
+      getSampleColor : getSampleColor,
+      unsetActiveSample : unsetActiveSample
+    };
+
+  })();
+
+  /**
+   * Canvas Samples
+   */
+  var CanvasSamples = (function CanvasSamples() {
+
+    var active = null;
+    var canvas = null;
+    var samples = [];
+    var zindex = null;
+    var tutorial = true;
+
+    var CanvasSample = function CanvasSample(color, posX, posY) {
+
+      var node = document.createElement('div');
+      var pick = document.createElement('div');
+      var delete_btn = document.createElement('div');
+      node.className = 'sample';
+      pick.className = 'pick';
+      delete_btn.className = 'delete';
+
+      this.uid = samples.length;
+      this.node = node;
+      this.color = color;
+      this.updateBgColor();
+      this.zIndex = 1;
+
+      node.style.top = posY - 50 + 'px';
+      node.style.left = posX - 50 + 'px';
+      node.setAttribute('sample-id', this.uid);
+
+      node.appendChild(pick);
+      node.appendChild(delete_btn);
+
+      var activate = function activate() {
+        setActiveSample(this);
+      }.bind(this);
+
+      node.addEventListener('dblclick', activate);
+      pick.addEventListener('click', activate);
+      delete_btn.addEventListener('click', this.deleteSample.bind(this));
+
+      UIComponent.makeDraggable(node);
+      UIComponent.makeResizable(node);
+
+      samples.push(this);
+      canvas.appendChild(node);
+      return this;
+    };
+
+    CanvasSample.prototype.updateBgColor = function updateBgColor() {
+      this.node.style.backgroundColor = this.color.getColor();
+    };
+
+    CanvasSample.prototype.updateColor = function updateColor(color) {
+      this.color.copy(color);
+      this.updateBgColor();
+    };
+
+    CanvasSample.prototype.updateZIndex = function updateZIndex(value) {
+      this.zIndex = value;
+      this.node.style.zIndex = value;
+    };
+
+    CanvasSample.prototype.activate = function activate() {
+      this.node.setAttribute('data-active', 'true');
+      zindex.setAttribute('data-active', 'true');
+
+      UIColorPicker.setColor('picker', this.color);
+      InputSliderManager.setValue('z-index', this.zIndex);
+    };
+
+    CanvasSample.prototype.deactivate = function deactivate() {
+      this.node.removeAttribute('data-active');
+      zindex.removeAttribute('data-active');
+    };
+
+    CanvasSample.prototype.deleteSample = function deleteSample() {
+      if (active === this)
+        unsetActiveSample();
+      canvas.removeChild(this.node);
+      samples[this.uid] = null;
+    };
+
+    CanvasSample.prototype.updatePosition = function updatePosition(posX, posY) {
+      this.node.style.top = posY - this.startY + 'px';
+      this.node.style.left = posX - this.startX + 'px';
+    };
+
+    var canvasDropEvent = function canvasDropEvent(e) {
+      var color = Tool.getSampleColorFrom(e);
+
+      if (color) {
+        var offsetX = e.pageX - canvas.offsetLeft;
+        var offsetY = e.pageY - canvas.offsetTop;
+        var sample = new CanvasSample(color, offsetX, offsetY);
+        if (tutorial) {
+          tutorial = false;
+          canvas.removeAttribute('data-tutorial');
+          var info = new CanvasSample(new Color(), 100, 100);
+          info.node.setAttribute('data-tutorial', 'dblclick');
+        }
+      }
+
+    };
+
+    var setActiveSample = function setActiveSample(sample) {
+      ColorPickerSamples.unsetActiveSample();
+      Tool.unsetVoidSample();
+      unsetActiveSample();
+      active = sample;
+      active.activate();
+    };
+
+    var unsetActiveSample = function unsetActiveSample() {
+      if (active)
+        active.deactivate();
+      active = null;
+    };
+
+    var createToggleBgButton = function createToggleBgButton() {
+      var button = document.createElement('div');
+      var state = false;
+      button.className = 'toggle-bg';
+      canvas.appendChild(button);
+
+      button.addEventListener('click', function() {
+        console.log(state);
+        state = !state;
+        canvas.setAttribute('data-bg', state);
+      });
+    };
+
+    var init = function init() {
+      canvas = getElemById('canvas');
+      zindex = getElemById('zindex');
+
+      canvas.addEventListener('dragover', allowDropEvent);
+      canvas.addEventListener('drop', canvasDropEvent);
+
+      createToggleBgButton();
+
+      UIColorPicker.subscribe('picker', function(color) {
+        if (active)  active.updateColor(color);
+      });
+
+      InputSliderManager.subscribe('z-index', function (value) {
+        if (active)  active.updateZIndex(value);
+      });
+
+      UIComponent.makeResizable(canvas, 'height');
+    };
+
+    return {
+      init : init,
+      unsetActiveSample : unsetActiveSample
+    };
+
+  })();
+
+  var StateButton = function StateButton(node, state) {
+    this.state = false;
+    this.callback = null;
+
+    node.addEventListener('click', function() {
+      this.state = !this.state;
+      if (typeof this.callback === "function")
+        this.callback(this.state);
+    }.bind(this));
+  };
+
+  StateButton.prototype.set = function set() {
+    this.state = true;
+    if (typeof this.callback === "function")
+      this.callback(this.state);
+  };
+
+  StateButton.prototype.unset = function unset() {
+    this.state = false;
+    if (typeof this.callback === "function")
+      this.callback(this.state);
+  };
+
+  StateButton.prototype.subscribe = function subscribe(func) {
+    this.callback = func;
+  };
+
+
+  /**
+   * Tool
+   */
+  var Tool = (function Tool() {
+
+    var samples = [];
+    var controls = null;
+    var void_sw;
+
+    var createPickerModeSwitch = function createPickerModeSwitch() {
+      var parent = getElemById('controls');
+      var icon = document.createElement('div');
+      var button = document.createElement('div');
+      var hsv = document.createElement('div');
+      var hsl = document.createElement('div');
+      var active = null;
+
+      icon.className = 'icon picker-icon';
+      button.className = 'switch';
+      button.appendChild(hsv);
+      button.appendChild(hsl);
+
+      hsv.textContent = 'HSV';
+      hsl.textContent = 'HSL';
+
+      active = hsl;
+      active.setAttribute('data-active', 'true');
+
+      function switchPickingModeTo(elem) {
+        active.removeAttribute('data-active');
+        active = elem;
+        active.setAttribute('data-active', 'true');
+        UIColorPicker.setPickerMode('picker', active.textContent);
+      };
+
+      var picker_sw = new StateButton(icon);
+      picker_sw.subscribe(function() {
+        if (active === hsv)
+          switchPickingModeTo(hsl);
+        else
+          switchPickingModeTo(hsv);
+      });
+
+      hsv.addEventListener('click', function() {
+        switchPickingModeTo(hsv);
+      });
+      hsl.addEventListener('click', function() {
+        switchPickingModeTo(hsl);
+      });
+
+      parent.appendChild(icon);
+      parent.appendChild(button);
+    };
+
+    var setPickerDragAndDrop = function setPickerDragAndDrop() {
+      var preview = document.querySelector('#picker .preview-color');
+      var picking_area = document.querySelector('#picker .picking-area');
+
+      preview.setAttribute('draggable', 'true');
+      preview.addEventListener('drop', drop);
+      preview.addEventListener('dragstart', dragStart);
+      preview.addEventListener('dragover', allowDropEvent);
+
+      picking_area.addEventListener('drop', drop);
+      picking_area.addEventListener('dragover', allowDropEvent);
+
+      function drop(e) {
+        var color = getSampleColorFrom(e);
+        UIColorPicker.setColor('picker', color);
+      };
+
+      function dragStart(e) {
+        e.dataTransfer.setData('sampleID', 'picker');
+        e.dataTransfer.setData('location', 'picker');
+      };
+    };
+
+    var getSampleColorFrom = function getSampleColorFrom(e) {
+      var sampleID = e.dataTransfer.getData('sampleID');
+      var location = e.dataTransfer.getData('location');
+
+      if (location === 'picker')
+        return UIColorPicker.getColor(sampleID);
+      if (location === 'picker-samples')
+        return ColorPickerSamples.getSampleColor(sampleID);
+      if (location === 'palette-samples')
+        return ColorPalette.getSampleColor(sampleID);
+    };
+
+    var setVoidSwitch = function setVoidSwitch() {
+      var void_sample = getElemById('void-sample');
+      void_sw = new StateButton(void_sample);
+      void_sw.subscribe( function (state) {
+        void_sample.setAttribute('data-active', state);
+        if (state === true) {
+          ColorPickerSamples.unsetActiveSample();
+          CanvasSamples.unsetActiveSample();
+        }
+      });
+    };
+
+    var unsetVoidSample = function unsetVoidSample() {
+      void_sw.unset();
+    };
+
+    var init = function init() {
+      controls = getElemById('controls');
+
+      var color = new Color();
+      color.setHSL(0, 51, 51);
+      UIColorPicker.setColor('picker', color);
+
+      setPickerDragAndDrop();
+      createPickerModeSwitch();
+      setVoidSwitch();
+    };
+
+    return {
+      init : init,
+      unsetVoidSample : unsetVoidSample,
+      getSampleColorFrom : getSampleColorFrom
+    };
+
+  })();
+
+  var init = function init() {
+    UIColorPicker.init();
+    InputSliderManager.init();
+    ColorInfo.init();
+    ColorPalette.init();
+    ColorPickerSamples.init();
+    CanvasSamples.init();
+    Tool.init();
+  };
+
+  return {
+    init : init
+  };
+
+})();
+
+
+
+ +

{{CSSRef}}

+ +

Esta ferramenta facilita a criação, ajuste e experimentação com cores personalizadas para uso na web. Ela também facilita a conversão entre vários formatos de cores suportados por CSS, incluindo cores HEXA, RGB (vermelho, verde, azul) e HSL (tonalidade, saturação, luminosidade). Controle sobre o canal alfa também é suportado nos formatos RGB (rgba) e (hsla).

+ +

Enquanto você ajusta os parâmetros que definem a cor, ela é apresentada nos 3 formatos padrão para CSS web. Além disso, com base na seleção de cor atual, é gerada uma paleta para HSL, HSV e também alfa. O selecionador de cor estilo "conta-gotas" pode alternar os estilos HSL e HSV. Você também pode testar as cores e ver como elas se sobrepõem umas sobre às outras. 

+ +

{{ EmbedLiveSample('ColorPicker_Tool', '100%', '900') }}

+ +

As cores geradas por você acima podem ser usadas em qualquer lugar em que a cor é usada em CSS e HTML, a menos que seja indicado de outra forma.

+ +

Veja também

+ +

Para mais aplicações de cores, veja:

+ + diff --git a/files/pt-br/web/css/css_colors/seletor_de_cores/index.html b/files/pt-br/web/css/css_colors/seletor_de_cores/index.html deleted file mode 100644 index a98aaf9342..0000000000 --- a/files/pt-br/web/css/css_colors/seletor_de_cores/index.html +++ /dev/null @@ -1,3241 +0,0 @@ ---- -title: Seletor de cores -slug: Web/CSS/CSS_Colors/seletor_de_cores -tags: - - CSS - - Cores CSS - - Cores HTML - - Ferramenta para Seleção de Cores CSS - - Ferramenta para Seleção de Cores HTML - - Ferramentas - - Seletor de Cores - - Seletor de Cores CSS - - Seletor de Cores HTML - - cor - - cores -translation_of: Web/CSS/CSS_Colors/Color_picker_tool ---- -
-

ColorPicker tool

- -

HTML Content

- -
    <div id="container">
-        <div id="palette" class="block">
-            <div id="color-palette"></div>
-            <div id="color-info">
-                <div class="title"> CSS Color </div>
-            </div>
-        </div>
-
-        <div id="picker" class="block">
-            <div class="ui-color-picker" data-topic="picker" data-mode="HSL"></div>
-            <div id="picker-samples" sample-id="master"></div>
-            <div id="controls">
-                <div id="delete">
-                    <div id="trash-can"></div>
-                </div>
-                <div id="void-sample" class="icon"></div>
-            </div>
-        </div>
-
-        <div id="canvas" data-tutorial="drop">
-            <div id="zindex" class="ui-input-slider" data-topic="z-index" data-info="z-index"
-                data-max="20" data-sensivity="10"></div>
-        </div>
-    </div>
-
-
- -

CSS Content

- -
/*
- * COLOR PICKER TOOL
- */
-
-.ui-color-picker {
-  width: 420px;
-  margin: 0;
-  border: 1px solid #DDD;
-  background-color: #FFF;
-  display: table;
-
-  -moz-user-select: none;
-  -webkit-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-.ui-color-picker .picking-area {
-  width: 198px;
-  height: 198px;
-  margin: 5px;
-  border: 1px solid #DDD;
-  position: relative;
-  float: left;
-  display: table;
-}
-
-.ui-color-picker .picking-area:hover {
-  cursor: default;
-}
-
-/* HSV format - Hue-Saturation-Value(Brightness) */
-.ui-color-picker .picking-area {
-  background: url('https://mdn.mozillademos.org/files/5707/picker_mask_200.png') center center;
-
-  background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
-        -moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
-  background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
-        -webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
-  background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
-        -ms-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
-  background: -o-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
-        -o-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
-
-  background-color: #F00;
-}
-
-/* HSL format - Hue-Saturation-Lightness */
-.ui-color-picker[data-mode='HSL'] .picking-area {
-  background: -moz-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
-                  hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
-        -moz-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
-  background: -webkit-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
-                  hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
-        -webkit-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
-  background: -ms-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
-                  hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
-        -ms-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
-  background: -o-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
-                  hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
-        -o-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
-  background-color: #F00;
-}
-
-.ui-color-picker .picker {
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  border: 1px solid #FFF;
-  position: absolute;
-  top: 45%;
-  left: 45%;
-}
-
-.ui-color-picker .picker:before {
-  width: 8px;
-  height: 8px;
-  content: "";
-  position: absolute;
-  border: 1px solid #999;
-  border-radius: 50%;
-}
-
-.ui-color-picker .hue,
-.ui-color-picker .alpha {
-  width: 198px;
-  height: 28px;
-  margin: 5px;
-  border: 1px solid #FFF;
-  float: left;
-}
-
-.ui-color-picker .hue {
-  background: url("https://mdn.mozillademos.org/files/5701/hue.png") center;
-  background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
-        #00F 66.66%, #F0F 83.33%, #F00 100%);
-  background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
-        #00F 66.66%, #F0F 83.33%, #F00 100%);
-  background: -ms-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
-        #00F 66.66%, #F0F 83.33%, #F00 100%);
-  background: -o-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
-        #00F 66.66%, #F0F 83.33%, #F00 100%);
-}
-
-.ui-color-picker .alpha {
-  border: 1px solid #CCC;
-  background: url("https://mdn.mozillademos.org/files/5705/alpha.png");
-}
-
-.ui-color-picker .alpha-mask {
-  width: 100%;
-  height: 100%;
-  background: url("https://mdn.mozillademos.org/files/6089/alpha_mask.png");
-}
-
-.ui-color-picker .slider-picker {
-  width: 2px;
-  height: 100%;
-  border: 1px solid #777;
-  background-color: #FFF;
-  position: relative;
-  top: -1px;
-}
-
-/* input HSV and RGB */
-
-.ui-color-picker .info {
-  width: 200px;
-  margin: 5px;
-  float: left;
-}
-
-.ui-color-picker .info * {
-  float: left;
-}
-
-.ui-color-picker .input {
-  width: 64px;
-  margin: 5px 2px;
-  float: left;
-}
-
-.ui-color-picker .input .name {
-  height: 20px;
-  width: 30px;
-  text-align: center;
-  font-size: 14px;
-  line-height: 18px;
-  float: left;
-}
-
-.ui-color-picker .input input {
-  width: 30px;
-  height: 18px;
-  margin: 0;
-  padding: 0;
-  border: 1px solid #DDD;
-  text-align: center;
-  float: right;
-
-  -moz-user-select: text;
-  -webkit-user-select: text;
-  -ms-user-select: text;
-}
-
-.ui-color-picker .input[data-topic="lightness"] {
-  display: none;
-}
-
-.ui-color-picker[data-mode='HSL'] .input[data-topic="value"] {
-  display: none;
-}
-
-.ui-color-picker[data-mode='HSL'] .input[data-topic="lightness"] {
-  display: block;
-}
-
-.ui-color-picker .input[data-topic="alpha"] {
-  margin-top: 10px;
-  width: 93px;
-}
-
-.ui-color-picker .input[data-topic="alpha"] > .name {
-  width: 60px;
-}
-
-.ui-color-picker .input[data-topic="alpha"] > input {
-  float: right;
-}
-
-.ui-color-picker .input[data-topic="hexa"] {
-  width: auto;
-  float: right;
-  margin: 6px 8px 0 0;
-}
-
-.ui-color-picker .input[data-topic="hexa"] > .name {
-  display: none;
-}
-
-.ui-color-picker .input[data-topic="hexa"] > input {
-  width: 90px;
-  height: 24px;
-  padding: 2px 0;
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-/* Preview color */
-.ui-color-picker .preview {
-  width: 95px;
-  height: 53px;
-  margin: 5px;
-  margin-top: 10px;
-  border: 1px solid #DDD;
-  background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png");
-  float: left;
-  position: relative;
-}
-
-.ui-color-picker .preview:before {
-  height: 100%;
-  width: 50%;
-  left: 50%;
-  top: 0;
-  content: "";
-  background: #FFF;
-  position: absolute;
-  z-index: 1;
-}
-
-.ui-color-picker .preview-color {
-  width: 100%;
-  height: 100%;
-  background-color: rgba(255, 0, 0, 0.5);
-  position: absolute;
-  z-index: 1;
-}
-
-.ui-color-picker .switch_mode {
-  width: 10px;
-  height: 20px;
-  position: relative;
-  border-radius: 5px 0 0 5px;
-  border: 1px solid #DDD;
-  background-color: #EEE;
-  left: -12px;
-  top: -1px;
-  z-index: 1;
-  transition: all 0.5s;
-}
-
-.ui-color-picker .switch_mode:hover {
-  background-color: #CCC;
-  cursor: pointer;
-}
-
-/*
- * UI Component
- */
-
-.ui-input-slider {
-  height: 20px;
-  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-  -moz-user-select: none;
-  user-select: none;
-}
-
-.ui-input-slider * {
-  float: left;
-  height: 100%;
-  line-height: 100%;
-}
-
-/* Input Slider */
-
-.ui-input-slider > input {
-  margin: 0;
-  padding: 0;
-  width: 50px;
-  text-align: center;
-
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-.ui-input-slider-info {
-  width: 90px;
-  padding: 0px 10px 0px 0px;
-  text-align: right;
-  text-transform: lowercase;
-}
-
-.ui-input-slider-left, .ui-input-slider-right {
-  width: 16px;
-  cursor: pointer;
-  background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
-}
-
-.ui-input-slider-right {
-  background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
-}
-
-.ui-input-slider-name {
-  width: 90px;
-  padding: 0 10px 0 0;
-  text-align: right;
-  text-transform: lowercase;
-}
-
-.ui-input-slider-btn-set {
-  width: 25px;
-  background-color: #2C9FC9;
-  border-radius: 5px;
-  color: #FFF;
-  font-weight: bold;
-  line-height: 14px;
-  text-align: center;
-}
-
-.ui-input-slider-btn-set:hover {
-  background-color: #379B4A;
-  cursor: pointer;
-}
-
-/*
- * COLOR PICKER TOOL
- */
-
-body {
-  max-width: 1000px;
-  margin: 0 auto;
-
-  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-
-  box-shadow: 0 0 5px 0 #999;
-
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-
-  -moz-user-select: none;
-  -webkit-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-
-}
-
-/**
- * Resize Handle
- */
-.resize-handle {
-  width: 10px;
-  height: 10px;
-  background: url('https://mdn.mozillademos.org/files/6083/resize.png') center center no-repeat;
-  position: absolute;
-  bottom: 0;
-  right: 0;
-}
-
-[data-resize='both']:hover {
-  cursor: nw-resize !important;
-}
-
-[data-resize='width']:hover {
-  cursor: w-resize !important;
-}
-
-[data-resize='height']:hover {
-  cursor: n-resize !important;
-}
-
-[data-hidden='true'] {
-  display: none;
-}
-
-[data-collapsed='true'] {
-  height: 0 !important;
-}
-
-.block {
-  display: table;
-}
-
-
-/**
- *   Container
- */
-#container {
-  width: 100%;
-
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-
-  display: table;
-}
-
-/**
- *   Picker Zone
- */
-
-#picker {
-  padding: 10px;
-  width: 980px;
-}
-
-.ui-color-picker {
-  padding: 3px 5px;
-  float: left;
-  border-color: #FFF;
-}
-
-.ui-color-picker .switch_mode {
-  display: none;
-}
-
-.ui-color-picker .preview-color:hover {
-  cursor: move;
-}
-
-/**
- * Picker Container
- */
-
-#picker-samples {
-  width: 375px;
-  height: 114px;
-  max-height: 218px;
-  margin: 0 10px 0 30px;
-  overflow: hidden;
-  position: relative;
-  float: left;
-
-  transition: all 0.2s;
-}
-
-#picker-samples .sample {
-  width: 40px;
-  height: 40px;
-  margin: 5px;
-  border: 1px solid #DDD;
-  position: absolute;
-  float: left;
-  transition: all 0.2s;
-}
-
-#picker-samples .sample:hover {
-  cursor: pointer;
-  border-color: #BBB;
-  transform: scale(1.15);
-  border-radius: 3px;
-}
-
-#picker-samples .sample[data-active='true'] {
-  border-color: #999;
-}
-
-#picker-samples .sample[data-active='true']:after {
-  content: "";
-  position: absolute;
-  background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
-  width: 100%;
-  height: 12px;
-  top: -12px;
-  z-index: 2;
-}
-
-#picker-samples #add-icon {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  box-shadow: inset 0px 0px 2px 0px #DDD;
-}
-
-#picker-samples #add-icon:hover {
-  cursor: pointer;
-  border-color: #DDD;
-  box-shadow: inset 0px 0px 5px 0px #CCC;
-}
-
-#picker-samples #add-icon:before,
-#picker-samples #add-icon:after {
-  content: "";
-  position: absolute;
-  background-color: #EEE;
-  box-shadow: 0 0 1px 0 #EEE;
-}
-
-#picker-samples #add-icon:before {
-  width: 70%;
-  height: 16%;
-  top: 42%;
-  left: 15%;
-}
-
-#picker-samples #add-icon:after {
-  width: 16%;
-  height: 70%;
-  top: 15%;
-  left: 42%;
-}
-
-#picker-samples #add-icon:hover:before,
-#picker-samples #add-icon:hover:after {
-  background-color: #DDD;
-  box-shadow: 0 0 1px 0 #DDD;
-}
-
-/**
- *   Controls
- */
-
-#controls {
-  width: 110px;
-  padding: 10px;
-  float: right;
-}
-
-#controls #picker-switch {
-  text-align: center;
-  float: left;
-}
-
-#controls .icon {
-  width: 48px;
-  height: 48px;
-  margin: 10px 0;
-  background-repeat: no-repeat;
-  background-position: center;
-  border: 1px solid #DDD;
-  display: table;
-  float: left;
-}
-
-#controls .icon:hover {
-  cursor: pointer;
-}
-
-#controls .picker-icon {
-  background-image: url('https://mdn.mozillademos.org/files/6081/picker.png');
-}
-
-#controls #void-sample {
-  margin-right: 10px;
-  background-image: url('https://mdn.mozillademos.org/files/6087/void.png');
-  background-position: center left;
-}
-
-#controls #void-sample[data-active='true'] {
-  border-color: #CCC;
-  background-position: center right;
-}
-
-#controls .switch {
-  width: 106px;
-  padding: 1px;
-  border: 1px solid #CCC;
-  font-size: 14px;
-  text-align: center;
-  line-height: 24px;
-  overflow: hidden;
-  float: left;
-}
-
-#controls .switch:hover {
-  cursor: pointer;
-}
-
-#controls .switch > * {
-  width: 50%;
-  padding: 2px 0;
-  background-color: #EEE;
-  float: left;
-}
-
-#controls .switch [data-active='true'] {
-  color: #FFF;
-  background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
-  background-color: #777;
-}
-
-/**
- *   Trash Can
- */
-
-#delete {
-  width: 100%;
-  height: 94px;
-  background-color: #DDD;
-  background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
-  background-repeat: repeat;
-
-  text-align: center;
-  color: #777;
-
-  position: relative;
-  float: right;
-}
-
-#delete #trash-can {
-  width: 80%;
-  height: 80%;
-  border: 2px dashed #FFF;
-  border-radius: 5px;
-  background: url('https://mdn.mozillademos.org/files/6085/trash-can.png') no-repeat center;
-
-  position: absolute;
-  top: 10%;
-  left: 10%;
-
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-
-  transition: all 0.2s;
-}
-
-#delete[drag-state='enter'] {
-  background-color: #999;
-}
-
-/**
- *   Color Theme
- */
-
-#color-theme {
-  margin: 0 8px 0 0;
-  border: 1px solid #EEE;
-  display: inline-block;
-  float: right;
-}
-
-#color-theme .box {
-  width: 80px;
-  height: 92px;
-  float: left;
-}
-
-/**
- * Color info box
- */
-#color-info {
-  width: 360px;
-  float: left;
-}
-
-#color-info .title {
-  width: 100%;
-  padding: 15px;
-  font-size: 18px;
-  text-align: center;
-  background-image: url('https://mdn.mozillademos.org/files/6071/color-wheel.png');
-  background-repeat:no-repeat;
-  background-position: center left 30%;
-}
-
-#color-info .copy-container {
-  position: absolute;
-  top: -100%;
-}
-
-#color-info .property {
-  min-width: 280px;
-  height: 30px;
-  margin: 10px 0;
-  text-align: center;
-  line-height: 30px;
-}
-
-#color-info .property > * {
-  float: left;
-}
-
-#color-info .property .type {
-  width: 60px;
-  height: 100%;
-  padding: 0 16px 0 0;
-  text-align: right;
-}
-
-#color-info .property .value {
-  width: 200px;
-  height: 100%;
-  padding: 0 10px;
-  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-  font-size: 16px;
-  color: #777;
-  text-align: center;
-  background-color: #FFF;
-  border: none;
-}
-
-#color-info .property .value:hover {
-  color: #37994A;
-}
-
-#color-info .property .value:hover + .copy {
-  background-position: center right;
-}
-
-#color-info .property .copy {
-  width: 24px;
-  height: 100%;
-  padding: 0 5px;
-  background-color: #FFF;
-  background-image: url('https://mdn.mozillademos.org/files/6073/copy.png');
-  background-repeat: no-repeat;
-  background-position: center left;
-  border-left: 1px solid #EEE;
-  text-align: right;
-  float: left;
-}
-
-#color-info .property .copy:hover {
-  background-position: center right;
-}
-
-
-/**
- *   Color Palette
- */
-
-#palette {
-  width: 1000px;
-  padding: 10px 0;
-  background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
-  background-repeat: repeat;
-  background-color: #EEE;
-  color: #777;
-
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-#color-palette {
-  width: 640px;
-  font-family: Arial, Helvetica, sans-serif;
-  color: #777;
-  float: left;
-}
-
-#color-palette .container {
-  width: 100%;
-  height: 50px;
-  line-height: 50px;
-  overflow: hidden;
-  float: left;
-  transition: all 0.5s;
-}
-
-#color-palette .container > * {
-  float: left;
-}
-
-#color-palette .title {
-  width: 100px;
-  padding: 0 10px;
-  text-align: right;
-  line-height: inherit;
-}
-
-#color-palette .palette {
-  width: 456px;
-  height: 38px;
-  margin: 3px;
-  padding: 3px;
-  display: table;
-  background-color: #FFF;
-}
-
-#color-palette .palette .sample {
-  width: 30px;
-  height: 30px;
-  margin: 3px;
-  position: relative;
-  border: 1px solid #DDD;
-  float: left;
-  transition: all 0.2s;
-}
-
-#color-palette .palette .sample:hover {
-  cursor: pointer;
-  border-color: #BBB;
-  transform: scale(1.15);
-  border-radius: 3px;
-}
-
-#color-palette .controls {
-}
-
-#color-palette .controls > * {
-  float: left;
-}
-
-#color-palette .controls > *:hover {
-  cursor: pointer;
-}
-
-#color-palette .controls .lock {
-  width: 24px;
-  height: 24px;
-  margin: 10px;
-  padding: 3px;
-  background-image: url('https://mdn.mozillademos.org/files/6077/lock.png');
-  background-repeat: no-repeat;
-  background-position: bottom right;
-}
-
-#color-palette .controls .lock:hover {
-  /*background-image: url('images/unlocked-hover.png');*/
-  background-position: bottom left;
-}
-
-#color-palette .controls .lock[locked-state='true'] {
-  /*background-image: url('images/locked.png');*/
-  background-position: top left ;
-}
-
-#color-palette .controls .lock[locked-state='true']:hover {
-  /*background-image: url('images/lock-hover.png');*/
-  background-position: top right;
-}
-
-/**
- * Canvas
- */
-
-#canvas {
-  width: 100%;
-  height: 300px;
-  min-height: 250px;
-  border-top: 1px solid #DDD;
-  background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
-  background-repeat: repeat;
-  position: relative;
-  float: left;
-}
-
-#canvas[data-tutorial='drop'] {
-  text-align: center;
-  font-size: 30px;
-  color: #777;
-}
-
-#canvas[data-tutorial='drop']:before {
-  content: "Drop colors here to compare";
-  width: 40%;
-  padding: 30px 9% 70px 11%;
-
-  background-image: url('https://mdn.mozillademos.org/files/6075/drop.png');
-  background-repeat: no-repeat;
-  background-position: left 35px top 60%;
-
-  text-align: right;
-
-  border: 3px dashed rgb(221, 221, 221);
-  border-radius: 15px;
-
-  position: absolute;
-  top: 50px;
-  left: 20%;
-}
-
-#canvas[data-tutorial='drop']:after {
-  content: "adjust, change or modify";
-  width: 40%;
-  font-size: 24px;
-  position: absolute;
-  top: 130px;
-  left: 32%;
-  z-index: 2;
-}
-
-#canvas [data-tutorial='dblclick'] {
-  background-color: #999 !important;
-}
-
-#canvas [data-tutorial='dblclick']:before {
-  content: "double click to activate";
-  width: 80px;
-  color: #FFF;
-  position: absolute;
-  top: 10%;
-  left: 20%;
-  z-index: 2;
-}
-
-#canvas .sample {
-  width: 100px;
-  height: 100px;
-  min-width: 20px;
-  min-height: 20px;
-  position: absolute;
-  border: 1px solid rgba(255, 255, 255, 0.3);
-}
-
-#canvas .sample:hover {
-  cursor: move;
-}
-
-#canvas .sample[data-active='true']:after {
-  content: "";
-  position: absolute;
-  background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
-  width: 100%;
-  height: 12px;
-  top: -12px;
-  z-index: 2;
-}
-
-#canvas .sample:hover > * {
-  cursor: pointer;
-  display: block !important;
-}
-
-#canvas .sample .resize-handle {
-  display: none;
-}
-
-#canvas .sample .pick {
-  width: 10px;
-  height: 10px;
-  margin: 5px;
-  background: url('https://mdn.mozillademos.org/files/6079/pick.png') center no-repeat;
-  position: absolute;
-  top: 0;
-  left: 0;
-  display: none;
-}
-
-#canvas .sample .delete {
-  width: 10px;
-  height: 10px;
-  margin: 5px;
-  background: url('https://mdn.mozillademos.org/files/6069/close.png') center no-repeat;
-  position: absolute;
-  top: 0;
-  right: 0;
-  display: none;
-}
-
-
-/**
- * Canvas controls
- */
-
-#canvas .toggle-bg {
-  width: 16px;
-  height: 16px;
-  margin: 5px;
-  background: url("images/canvas-controls.png") center left no-repeat;
-  position: absolute;
-  top: 0;
-  right: 0;
-}
-
-#canvas .toggle-bg:hover {
-  cursor: pointer;
-}
-
-#canvas[data-bg='true'] {
-  background: none;
-}
-
-#canvas[data-bg='true'] .toggle-bg {
-  background: url('https://mdn.mozillademos.org/files/6067/canvas-controls.png') center right no-repeat;
-}
-
-#zindex {
-  height: 20px;
-  margin: 5px;
-  font-size: 16px;
-  position: absolute;
-  opacity: 0;
-  top: -10000px;
-  left: 0;
-  color: #777;
-  float: left;
-  transition: opacity 1s;
-}
-
-#zindex input {
-  border: 1px solid #DDD;
-  font-size: 16px;
-  color: #777;
-}
-
-#zindex .ui-input-slider-info {
-  width: 60px;
-}
-
-#zindex[data-active='true'] {
-  top: 0;
-  opacity: 1;
-}
-
-
- -

JavaScript Content

- -
'use strict';
-
-var UIColorPicker = (function UIColorPicker() {
-
-  function getElemById(id) {
-    return document.getElementById(id);
-  }
-
-  var subscribers = [];
-  var pickers = [];
-
-  /**
-   * RGBA Color class
-   *
-   * HSV/HSB and HSL (hue, saturation, value / brightness, lightness)
-   * @param hue      0-360
-   * @param saturation  0-100
-   * @param value     0-100
-   * @param lightness    0-100
-   */
-
-  function Color(color) {
-
-    if(color instanceof Color === true) {
-      this.copy(color);
-      return;
-    }
-
-    this.r = 0;
-    this.g = 0;
-    this.b = 0;
-    this.a = 1;
-    this.hue = 0;
-    this.saturation = 0;
-    this.value = 0;
-    this.lightness = 0;
-    this.format = 'HSV';
-  }
-
-  function RGBColor(r, g, b) {
-    var color = new Color();
-    color.setRGBA(r, g, b, 1);
-    return color;
-  }
-
-  function RGBAColor(r, g, b, a) {
-    var color = new Color();
-    color.setRGBA(r, g, b, a);
-    return color;
-  }
-
-  function HSVColor(h, s, v) {
-    var color = new Color();
-    color.setHSV(h, s, v);
-    return color;
-  }
-
-  function HSVAColor(h, s, v, a) {
-    var color = new Color();
-    color.setHSV(h, s, v);
-    color.a = a;
-    return color;
-  }
-
-  function HSLColor(h, s, l) {
-    var color = new Color();
-    color.setHSL(h, s, l);
-    return color;
-  }
-
-  function HSLAColor(h, s, l, a) {
-    var color = new Color();
-    color.setHSL(h, s, l);
-    color.a = a;
-    return color;
-  }
-
-  Color.prototype.copy = function copy(obj) {
-    if(obj instanceof Color !== true) {
-      console.log('Typeof parameter not Color');
-      return;
-    }
-
-    this.r = obj.r;
-    this.g = obj.g;
-    this.b = obj.b;
-    this.a = obj.a;
-    this.hue = obj.hue;
-    this.saturation = obj.saturation;
-    this.value = obj.value;
-    this.format = '' + obj.format;
-    this.lightness = obj.lightness;
-  };
-
-  Color.prototype.setFormat = function setFormat(format) {
-    if (format === 'HSV')
-      this.format = 'HSV';
-    if (format === 'HSL')
-      this.format = 'HSL';
-  };
-
-  /*========== Methods to set Color Properties ==========*/
-
-  Color.prototype.isValidRGBValue = function isValidRGBValue(value) {
-    return (typeof(value) === 'number' && isNaN(value) === false &&
-      value >= 0 && value <= 255);
-  };
-
-  Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) {
-    if (this.isValidRGBValue(red) === false ||
-      this.isValidRGBValue(green) === false ||
-      this.isValidRGBValue(blue) === false)
-      return;
-
-      this.r = red | 0;
-      this.g = green | 0;
-      this.b = blue | 0;
-
-    if (this.isValidRGBValue(alpha) === true)
-      this.a = alpha | 0;
-  };
-
-  Color.prototype.setByName = function setByName(name, value) {
-    if (name === 'r' || name === 'g' || name === 'b') {
-      if(this.isValidRGBValue(value) === false)
-        return;
-
-      this[name] = value;
-      this.updateHSX();
-    }
-  };
-
-  Color.prototype.setHSV = function setHSV(hue, saturation, value) {
-    this.hue = hue;
-    this.saturation = saturation;
-    this.value = value;
-    this.HSVtoRGB();
-  };
-
-  Color.prototype.setHSL = function setHSL(hue, saturation, lightness) {
-    this.hue = hue;
-    this.saturation = saturation;
-    this.lightness = lightness;
-    this.HSLtoRGB();
-  };
-
-  Color.prototype.setHue = function setHue(value) {
-    if (typeof(value) !== 'number' || isNaN(value) === true ||
-      value < 0 || value > 359)
-      return;
-    this.hue = value;
-    this.updateRGB();
-  };
-
-  Color.prototype.setSaturation = function setSaturation(value) {
-    if (typeof(value) !== 'number' || isNaN(value) === true ||
-      value < 0 || value > 100)
-      return;
-    this.saturation = value;
-    this.updateRGB();
-  };
-
-  Color.prototype.setValue = function setValue(value) {
-    if (typeof(value) !== 'number' || isNaN(value) === true ||
-      value < 0 || value > 100)
-      return;
-    this.value = value;
-    this.HSVtoRGB();
-  };
-
-  Color.prototype.setLightness = function setLightness(value) {
-    if (typeof(value) !== 'number' || isNaN(value) === true ||
-      value < 0 || value > 100)
-      return;
-    this.lightness = value;
-    this.HSLtoRGB();
-  };
-
-  Color.prototype.setHexa = function setHexa(value) {
-    var valid  = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value);
-
-    if (valid !== true)
-      return;
-
-    if (value[0] === '#')
-      value = value.slice(1, value.length);
-
-    if (value.length === 3)
-      value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,'$1$1$2$2$3$3');
-
-    this.r = parseInt(value.substr(0, 2), 16);
-    this.g = parseInt(value.substr(2, 2), 16);
-    this.b = parseInt(value.substr(4, 2), 16);
-
-    this.alpha  = 1;
-    this.RGBtoHSV();
-  };
-
-  /*========== Conversion Methods ==========*/
-
-  Color.prototype.convertToHSL = function convertToHSL() {
-    if (this.format === 'HSL')
-      return;
-
-    this.setFormat('HSL');
-    this.RGBtoHSL();
-  };
-
-  Color.prototype.convertToHSV = function convertToHSV() {
-    if (this.format === 'HSV')
-      return;
-
-    this.setFormat('HSV');
-    this.RGBtoHSV();
-  };
-
-  /*========== Update Methods ==========*/
-
-  Color.prototype.updateRGB = function updateRGB() {
-    if (this.format === 'HSV') {
-      this.HSVtoRGB();
-      return;
-    }
-
-    if (this.format === 'HSL') {
-      this.HSLtoRGB();
-      return;
-    }
-  };
-
-  Color.prototype.updateHSX = function updateHSX() {
-    if (this.format === 'HSV') {
-      this.RGBtoHSV();
-      return;
-    }
-
-    if (this.format === 'HSL') {
-      this.RGBtoHSL();
-      return;
-    }
-  };
-
-  Color.prototype.HSVtoRGB = function HSVtoRGB() {
-    var sat = this.saturation / 100;
-    var value = this.value / 100;
-    var C = sat * value;
-    var H = this.hue / 60;
-    var X = C * (1 - Math.abs(H % 2 - 1));
-    var m = value - C;
-    var precision = 255;
-
-    C = (C + m) * precision | 0;
-    X = (X + m) * precision | 0;
-    m = m * precision | 0;
-
-    if (H >= 0 && H < 1) {  this.setRGBA(C, X, m);  return; }
-    if (H >= 1 && H < 2) {  this.setRGBA(X, C, m);  return; }
-    if (H >= 2 && H < 3) {  this.setRGBA(m, C, X);  return; }
-    if (H >= 3 && H < 4) {  this.setRGBA(m, X, C);  return; }
-    if (H >= 4 && H < 5) {  this.setRGBA(X, m, C);  return; }
-    if (H >= 5 && H < 6) {  this.setRGBA(C, m, X);  return; }
-  };
-
-  Color.prototype.HSLtoRGB = function HSLtoRGB() {
-    var sat = this.saturation / 100;
-    var light = this.lightness / 100;
-    var C = sat * (1 - Math.abs(2 * light - 1));
-    var H = this.hue / 60;
-    var X = C * (1 - Math.abs(H % 2 - 1));
-    var m = light - C/2;
-    var precision = 255;
-
-    C = (C + m) * precision | 0;
-    X = (X + m) * precision | 0;
-    m = m * precision | 0;
-
-    if (H >= 0 && H < 1) {  this.setRGBA(C, X, m);  return; }
-    if (H >= 1 && H < 2) {  this.setRGBA(X, C, m);  return; }
-    if (H >= 2 && H < 3) {  this.setRGBA(m, C, X);  return; }
-    if (H >= 3 && H < 4) {  this.setRGBA(m, X, C);  return; }
-    if (H >= 4 && H < 5) {  this.setRGBA(X, m, C);  return; }
-    if (H >= 5 && H < 6) {  this.setRGBA(C, m, X);  return; }
-  };
-
-  Color.prototype.RGBtoHSV = function RGBtoHSV() {
-    var red    = this.r / 255;
-    var green  = this.g / 255;
-    var blue  = this.b / 255;
-
-    var cmax = Math.max(red, green, blue);
-    var cmin = Math.min(red, green, blue);
-    var delta = cmax - cmin;
-    var hue = 0;
-    var saturation = 0;
-
-    if (delta) {
-      if (cmax === red ) { hue = ((green - blue) / delta); }
-      if (cmax === green ) { hue = 2 + (blue - red) / delta; }
-      if (cmax === blue ) { hue = 4 + (red - green) / delta; }
-      if (cmax) saturation = delta / cmax;
-    }
-
-    this.hue = 60 * hue | 0;
-    if (this.hue < 0) this.hue += 360;
-    this.saturation = (saturation * 100) | 0;
-    this.value = (cmax * 100) | 0;
-  };
-
-  Color.prototype.RGBtoHSL = function RGBtoHSL() {
-    var red    = this.r / 255;
-    var green  = this.g / 255;
-    var blue  = this.b / 255;
-
-    var cmax = Math.max(red, green, blue);
-    var cmin = Math.min(red, green, blue);
-    var delta = cmax - cmin;
-    var hue = 0;
-    var saturation = 0;
-    var lightness = (cmax + cmin) / 2;
-    var X = (1 - Math.abs(2 * lightness - 1));
-
-    if (delta) {
-      if (cmax === red ) { hue = ((green - blue) / delta); }
-      if (cmax === green ) { hue = 2 + (blue - red) / delta; }
-      if (cmax === blue ) { hue = 4 + (red - green) / delta; }
-      if (cmax) saturation = delta / X;
-    }
-
-    this.hue = 60 * hue | 0;
-    if (this.hue < 0) this.hue += 360;
-    this.saturation = (saturation * 100) | 0;
-    this.lightness = (lightness * 100) | 0;
-  };
-
-  /*========== Get Methods ==========*/
-
-  Color.prototype.getHexa = function getHexa() {
-    var r = this.r.toString(16);
-    var g = this.g.toString(16);
-    var b = this.b.toString(16);
-    if (this.r < 16) r = '0' + r;
-    if (this.g < 16) g = '0' + g;
-    if (this.b < 16) b = '0' + b;
-    var value = '#' + r + g + b;
-    return value.toUpperCase();
-  };
-
-  Color.prototype.getRGBA = function getRGBA() {
-
-    var rgb = '(' + this.r + ', ' + this.g + ', ' + this.b;
-    var a = '';
-    var v = '';
-    var x = parseFloat(this.a);
-    if (x !== 1) {
-      a = 'a';
-      v = ', ' + x;
-    }
-
-    var value = 'rgb' + a + rgb + v + ')';
-    return value;
-  };
-
-  Color.prototype.getHSLA = function getHSLA() {
-    if (this.format === 'HSV') {
-      var color = new Color(this);
-      color.setFormat('HSL');
-      color.updateHSX();
-      return color.getHSLA();
-    }
-
-    var a = '';
-    var v = '';
-    var hsl = '(' + this.hue + ', ' + this.saturation + '%, ' + this.lightness +'%';
-    var x = parseFloat(this.a);
-    if (x !== 1) {
-      a = 'a';
-      v = ', ' + x;
-    }
-
-    var value = 'hsl' + a + hsl + v + ')';
-    return value;
-  };
-
-  Color.prototype.getColor = function getColor() {
-    if (this.a | 0 === 1)
-      return this.getHexa();
-    return this.getRGBA();
-  };
-
-  /*=======================================================================*/
-  /*=======================================================================*/
-
-  /*========== Capture Mouse Movement ==========*/
-
-  var setMouseTracking = function setMouseTracking(elem, callback) {
-    elem.addEventListener('mousedown', function(e) {
-      callback(e);
-      document.addEventListener('mousemove', callback);
-    });
-
-    document.addEventListener('mouseup', function(e) {
-      document.removeEventListener('mousemove', callback);
-    });
-  };
-
-  /*====================*/
-  // Color Picker Class
-  /*====================*/
-
-  function ColorPicker(node) {
-    this.color = new Color();
-    this.node = node;
-    this.subscribers = [];
-
-    var type = this.node.getAttribute('data-mode');
-    var topic = this.node.getAttribute('data-topic');
-
-    this.topic = topic;
-    this.picker_mode = (type === 'HSL') ? 'HSL' : 'HSV';
-    this.color.setFormat(this.picker_mode);
-
-    this.createPickingArea();
-    this.createHueArea();
-
-    this.newInputComponent('H', 'hue', this.inputChangeHue.bind(this));
-    this.newInputComponent('S', 'saturation', this.inputChangeSaturation.bind(this));
-    this.newInputComponent('V', 'value', this.inputChangeValue.bind(this));
-    this.newInputComponent('L', 'lightness', this.inputChangeLightness.bind(this));
-
-    this.createAlphaArea();
-
-    this.newInputComponent('R', 'red', this.inputChangeRed.bind(this));
-    this.newInputComponent('G', 'green', this.inputChangeGreen.bind(this));
-    this.newInputComponent('B', 'blue', this.inputChangeBlue.bind(this));
-
-    this.createPreviewBox();
-    this.createChangeModeButton();
-
-    this.newInputComponent('alpha', 'alpha', this.inputChangeAlpha.bind(this));
-    this.newInputComponent('hexa', 'hexa', this.inputChangeHexa.bind(this));
-
-    this.setColor(this.color);
-    pickers[topic] = this;
-  }
-
-  /*************************************************************************/
-  //        Function for generating the color-picker
-  /*************************************************************************/
-
-  ColorPicker.prototype.createPickingArea = function createPickingArea() {
-    var area = document.createElement('div');
-    var picker = document.createElement('div');
-
-    area.className = 'picking-area';
-    picker.className = 'picker';
-
-    this.picking_area = area;
-    this.color_picker = picker;
-    setMouseTracking(area, this.updateColor.bind(this));
-
-    area.appendChild(picker);
-    this.node.appendChild(area);
-  };
-
-  ColorPicker.prototype.createHueArea = function createHueArea() {
-    var area = document.createElement('div');
-    var picker = document.createElement('div');
-
-    area.className = 'hue';
-    picker.className ='slider-picker';
-
-    this.hue_area = area;
-    this.hue_picker = picker;
-    setMouseTracking(area, this.updateHueSlider.bind(this));
-
-    area.appendChild(picker);
-    this.node.appendChild(area);
-  };
-
-  ColorPicker.prototype.createAlphaArea = function createAlphaArea() {
-    var area = document.createElement('div');
-    var mask = document.createElement('div');
-    var picker = document.createElement('div');
-
-    area.className = 'alpha';
-    mask.className = 'alpha-mask';
-    picker.className = 'slider-picker';
-
-    this.alpha_area = area;
-    this.alpha_mask = mask;
-    this.alpha_picker = picker;
-    setMouseTracking(area, this.updateAlphaSlider.bind(this));
-
-    area.appendChild(mask);
-    mask.appendChild(picker);
-    this.node.appendChild(area);
-  };
-
-  ColorPicker.prototype.createPreviewBox = function createPreviewBox(e) {
-    var preview_box = document.createElement('div');
-    var preview_color = document.createElement('div');
-
-    preview_box.className = 'preview';
-    preview_color.className = 'preview-color';
-
-    this.preview_color = preview_color;
-
-    preview_box.appendChild(preview_color);
-    this.node.appendChild(preview_box);
-  };
-
-  ColorPicker.prototype.newInputComponent = function newInputComponent(title, topic, onChangeFunc) {
-    var wrapper = document.createElement('div');
-    var input = document.createElement('input');
-    var info = document.createElement('span');
-
-    wrapper.className = 'input';
-    wrapper.setAttribute('data-topic', topic);
-    info.textContent = title;
-    info.className = 'name';
-    input.setAttribute('type', 'text');
-
-    wrapper.appendChild(info);
-    wrapper.appendChild(input);
-    this.node.appendChild(wrapper);
-
-    input.addEventListener('change', onChangeFunc);
-    input.addEventListener('click', function() {
-      this.select();
-    });
-
-    this.subscribe(topic, function(value) {
-      input.value = value;
-    });
-  };
-
-  ColorPicker.prototype.createChangeModeButton = function createChangeModeButton() {
-
-    var button = document.createElement('div');
-    button.className = 'switch_mode';
-    button.addEventListener('click', function() {
-      if (this.picker_mode === 'HSV')
-        this.setPickerMode('HSL');
-      else
-        this.setPickerMode('HSV');
-
-    }.bind(this));
-
-    this.node.appendChild(button);
-  };
-
-  /*************************************************************************/
-  //          Updates properties of UI elements
-  /*************************************************************************/
-
-  ColorPicker.prototype.updateColor = function updateColor(e) {
-    var x = e.pageX - this.picking_area.offsetLeft;
-    var y = e.pageY - this.picking_area.offsetTop;
-    var picker_offset = 5;
-
-    // width and height should be the same
-    var size = this.picking_area.clientWidth;
-
-    if (x > size) x = size;
-    if (y > size) y = size;
-    if (x < 0) x = 0;
-    if (y < 0) y = 0;
-
-    var value = 100 - (y * 100 / size) | 0;
-    var saturation = x * 100 / size | 0;
-
-    if (this.picker_mode === 'HSV')
-      this.color.setHSV(this.color.hue, saturation, value);
-    if (this.picker_mode === 'HSL')
-      this.color.setHSL(this.color.hue, saturation, value);
-
-    this.color_picker.style.left = x - picker_offset + 'px';
-    this.color_picker.style.top = y - picker_offset + 'px';
-
-    this.updateAlphaGradient();
-    this.updatePreviewColor();
-
-    this.notify('value', value);
-    this.notify('lightness', value);
-    this.notify('saturation', saturation);
-
-    this.notify('red', this.color.r);
-    this.notify('green', this.color.g);
-    this.notify('blue', this.color.b);
-    this.notify('hexa', this.color.getHexa());
-
-    notify(this.topic, this.color);
-  };
-
-  ColorPicker.prototype.updateHueSlider = function updateHueSlider(e) {
-    var x = e.pageX - this.hue_area.offsetLeft;
-    var width = this.hue_area.clientWidth;
-
-    if (x < 0) x = 0;
-    if (x > width) x = width;
-
-    // TODO 360 => 359
-    var hue = ((359 * x) / width) | 0;
-    // if (hue === 360) hue = 359;
-
-    this.updateSliderPosition(this.hue_picker, x);
-    this.setHue(hue);
-  };
-
-  ColorPicker.prototype.updateAlphaSlider = function updateAlphaSlider(e) {
-    var x = e.pageX - this.alpha_area.offsetLeft;
-    var width = this.alpha_area.clientWidth;
-
-    if (x < 0) x = 0;
-    if (x > width) x = width;
-
-    this.color.a = (x / width).toFixed(2);
-
-    this.updateSliderPosition(this.alpha_picker, x);
-    this.updatePreviewColor();
-
-    this.notify('alpha', this.color.a);
-    notify(this.topic, this.color);
-  };
-
-  ColorPicker.prototype.setHue = function setHue(value) {
-    this.color.setHue(value);
-
-    this.updatePickerBackground();
-    this.updateAlphaGradient();
-    this.updatePreviewColor();
-
-    this.notify('red', this.color.r);
-    this.notify('green', this.color.g);
-    this.notify('blue', this.color.b);
-    this.notify('hexa', this.color.getHexa());
-    this.notify('hue', this.color.hue);
-
-    notify(this.topic, this.color);
-  };
-
-  // Updates when one of Saturation/Value/Lightness changes
-  ColorPicker.prototype.updateSLV = function updateSLV() {
-    this.updatePickerPosition();
-    this.updateAlphaGradient();
-    this.updatePreviewColor();
-
-    this.notify('red', this.color.r);
-    this.notify('green', this.color.g);
-    this.notify('blue', this.color.b);
-    this.notify('hexa', this.color.getHexa());
-
-    notify(this.topic, this.color);
-  };
-
-  /*************************************************************************/
-  //        Update positions of various UI elements
-  /*************************************************************************/
-
-  ColorPicker.prototype.updatePickerPosition = function updatePickerPosition() {
-    var size = this.picking_area.clientWidth;
-    var value = 0;
-    var offset = 5;
-
-    if (this.picker_mode === 'HSV')
-      value = this.color.value;
-    if (this.picker_mode === 'HSL')
-      value = this.color.lightness;
-
-    var x = (this.color.saturation * size / 100) | 0;
-    var y = size - (value * size / 100) | 0;
-
-    this.color_picker.style.left = x - offset + 'px';
-    this.color_picker.style.top = y - offset + 'px';
-  };
-
-  ColorPicker.prototype.updateSliderPosition = function updateSliderPosition(elem, pos) {
-    elem.style.left = Math.max(pos - 3, -2) + 'px';
-  };
-
-  ColorPicker.prototype.updateHuePicker = function updateHuePicker() {
-    var size = this.hue_area.clientWidth;
-    var offset = 1;
-    var pos = (this.color.hue * size / 360 ) | 0;
-    this.hue_picker.style.left = pos - offset + 'px';
-  };
-
-  ColorPicker.prototype.updateAlphaPicker = function updateAlphaPicker() {
-    var size = this.alpha_area.clientWidth;
-    var offset = 1;
-    var pos = (this.color.a * size) | 0;
-    this.alpha_picker.style.left = pos - offset + 'px';
-  };
-
-  /*************************************************************************/
-  //            Update background colors
-  /*************************************************************************/
-
-  ColorPicker.prototype.updatePickerBackground = function updatePickerBackground() {
-    var nc = new Color(this.color);
-    nc.setHSV(nc.hue, 100, 100);
-    this.picking_area.style.backgroundColor = nc.getHexa();
-  };
-
-  ColorPicker.prototype.updateAlphaGradient = function updateAlphaGradient() {
-    this.alpha_mask.style.backgroundColor = this.color.getHexa();
-  };
-
-  ColorPicker.prototype.updatePreviewColor = function updatePreviewColor() {
-    this.preview_color.style.backgroundColor = this.color.getColor();
-  };
-
-  /*************************************************************************/
-  //            Update input elements
-  /*************************************************************************/
-
-  ColorPicker.prototype.inputChangeHue = function inputChangeHue(e) {
-    var value = parseInt(e.target.value);
-    this.setHue(value);
-    this.updateHuePicker();
-  };
-
-  ColorPicker.prototype.inputChangeSaturation = function inputChangeSaturation(e) {
-    var value = parseInt(e.target.value);
-    this.color.setSaturation(value);
-    e.target.value = this.color.saturation;
-    this.updateSLV();
-  };
-
-  ColorPicker.prototype.inputChangeValue = function inputChangeValue(e) {
-    var value = parseInt(e.target.value);
-    this.color.setValue(value);
-    e.target.value = this.color.value;
-    this.updateSLV();
-  };
-
-  ColorPicker.prototype.inputChangeLightness = function inputChangeLightness(e) {
-    var value = parseInt(e.target.value);
-    this.color.setLightness(value);
-    e.target.value = this.color.lightness;
-    this.updateSLV();
-  };
-
-  ColorPicker.prototype.inputChangeRed = function inputChangeRed(e) {
-    var value = parseInt(e.target.value);
-    this.color.setByName('r', value);
-    e.target.value = this.color.r;
-    this.setColor(this.color);
-  };
-
-  ColorPicker.prototype.inputChangeGreen = function inputChangeGreen(e) {
-    var value = parseInt(e.target.value);
-    this.color.setByName('g', value);
-    e.target.value = this.color.g;
-    this.setColor(this.color);
-  };
-
-  ColorPicker.prototype.inputChangeBlue = function inputChangeBlue(e) {
-    var value = parseInt(e.target.value);
-    this.color.setByName('b', value);
-    e.target.value = this.color.b;
-    this.setColor(this.color);
-  };
-
-  ColorPicker.prototype.inputChangeAlpha = function inputChangeAlpha(e) {
-    var value = parseFloat(e.target.value);
-
-    if (typeof value === 'number' && isNaN(value) === false &&
-      value >= 0 && value <= 1)
-      this.color.a = value.toFixed(2);
-
-    e.target.value = this.color.a;
-    this.updateAlphaPicker();
-  };
-
-  ColorPicker.prototype.inputChangeHexa = function inputChangeHexa(e) {
-    var value = e.target.value;
-    this.color.setHexa(value);
-    this.setColor(this.color);
-  };
-
-  /*************************************************************************/
-  //              Internal Pub/Sub
-  /*************************************************************************/
-
-  ColorPicker.prototype.subscribe = function subscribe(topic, callback) {
-    this.subscribers[topic] = callback;
-  };
-
-  ColorPicker.prototype.notify = function notify(topic, value) {
-    if (this.subscribers[topic])
-      this.subscribers[topic](value);
-  };
-
-  /*************************************************************************/
-  //              Set Picker Properties
-  /*************************************************************************/
-
-  ColorPicker.prototype.setColor = function setColor(color) {
-    if(color instanceof Color !== true) {
-      console.log('Typeof parameter not Color');
-      return;
-    }
-
-    if (color.format !== this.picker_mode) {
-      color.setFormat(this.picker_mode);
-      color.updateHSX();
-    }
-
-    this.color.copy(color);
-    this.updateHuePicker();
-    this.updatePickerPosition();
-    this.updatePickerBackground();
-    this.updateAlphaPicker();
-    this.updateAlphaGradient();
-    this.updatePreviewColor();
-
-    this.notify('red', this.color.r);
-    this.notify('green', this.color.g);
-    this.notify('blue', this.color.b);
-
-    this.notify('hue', this.color.hue);
-    this.notify('saturation', this.color.saturation);
-    this.notify('value', this.color.value);
-    this.notify('lightness', this.color.lightness);
-
-    this.notify('alpha', this.color.a);
-    this.notify('hexa', this.color.getHexa());
-    notify(this.topic, this.color);
-  };
-
-  ColorPicker.prototype.setPickerMode = function setPickerMode(mode) {
-    if (mode !== 'HSV' && mode !== 'HSL')
-      return;
-
-    this.picker_mode = mode;
-    this.node.setAttribute('data-mode', this.picker_mode);
-    this.setColor(this.color);
-  };
-
-  /*************************************************************************/
-  //                UNUSED
-  /*************************************************************************/
-
-  var setPickerMode = function setPickerMode(topic, mode) {
-    if (pickers[topic])
-      pickers[topic].setPickerMode(mode);
-  };
-
-  var setColor = function setColor(topic, color) {
-    if (pickers[topic])
-      pickers[topic].setColor(color);
-  };
-
-  var getColor = function getColor(topic) {
-    if (pickers[topic])
-      return new Color(pickers[topic].color);
-  };
-
-  var subscribe = function subscribe(topic, callback) {
-    if (subscribers[topic] === undefined)
-      subscribers[topic] = [];
-
-    subscribers[topic].push(callback);
-  };
-
-  var unsubscribe = function unsubscribe(callback) {
-    subscribers.indexOf(callback);
-    subscribers.splice(index, 1);
-  };
-
-  var notify = function notify(topic, value) {
-    if (subscribers[topic] === undefined || subscribers[topic].length === 0)
-      return;
-
-    var color = new Color(value);
-    for (var i in subscribers[topic])
-      subscribers[topic][i](color);
-  };
-
-  var init = function init() {
-    var elem = document.querySelectorAll('.ui-color-picker');
-    var size = elem.length;
-    for (var i = 0; i < size; i++)
-      new ColorPicker(elem[i]);
-  };
-
-  return {
-    init : init,
-    Color : Color,
-    RGBColor : RGBColor,
-    RGBAColor : RGBAColor,
-    HSVColor : HSVColor,
-    HSVAColor : HSVAColor,
-    HSLColor : HSLColor,
-    HSLAColor : HSLAColor,
-    setColor : setColor,
-    getColor : getColor,
-    subscribe : subscribe,
-    unsubscribe : unsubscribe,
-    setPickerMode : setPickerMode
-  };
-
-})();
-
-
-
-/**
- * UI-SlidersManager
- */
-
-var InputSliderManager = (function InputSliderManager() {
-
-  var subscribers = {};
-  var sliders = [];
-
-  var InputComponent = function InputComponent(obj) {
-    var input = document.createElement('input');
-    input.setAttribute('type', 'text');
-    input.style.width = 50 + obj.precision * 10 + 'px';
-
-    input.addEventListener('click', function(e) {
-      this.select();
-    });
-
-    input.addEventListener('change', function(e) {
-      var value = parseFloat(e.target.value);
-
-      if (isNaN(value) === true)
-        setValue(obj.topic, obj.value);
-      else
-        setValue(obj.topic, value);
-    });
-
-    return input;
-  };
-
-  var SliderComponent = function SliderComponent(obj, sign) {
-    var slider = document.createElement('div');
-    var startX = null;
-    var start_value = 0;
-
-    slider.addEventListener("click", function(e) {
-      document.removeEventListener("mousemove", sliderMotion);
-      setValue(obj.topic, obj.value + obj.step * sign);
-    });
-
-    slider.addEventListener("mousedown", function(e) {
-      startX = e.clientX;
-      start_value = obj.value;
-      document.body.style.cursor = "e-resize";
-
-      document.addEventListener("mouseup", slideEnd);
-      document.addEventListener("mousemove", sliderMotion);
-    });
-
-    var slideEnd = function slideEnd(e) {
-      document.removeEventListener("mousemove", sliderMotion);
-      document.body.style.cursor = "auto";
-      slider.style.cursor = "pointer";
-    };
-
-    var sliderMotion = function sliderMotion(e) {
-      slider.style.cursor = "e-resize";
-      var delta = (e.clientX - startX) / obj.sensivity | 0;
-      var value = delta * obj.step + start_value;
-      setValue(obj.topic, value);
-    };
-
-    return slider;
-  };
-
-  var InputSlider = function(node) {
-    var min    = parseFloat(node.getAttribute('data-min'));
-    var max    = parseFloat(node.getAttribute('data-max'));
-    var step  = parseFloat(node.getAttribute('data-step'));
-    var value  = parseFloat(node.getAttribute('data-value'));
-    var topic  = node.getAttribute('data-topic');
-    var unit  = node.getAttribute('data-unit');
-    var name   = node.getAttribute('data-info');
-    var sensivity = node.getAttribute('data-sensivity') | 0;
-    var precision = node.getAttribute('data-precision') | 0;
-
-    this.min = isNaN(min) ? 0 : min;
-    this.max = isNaN(max) ? 100 : max;
-    this.precision = precision >= 0 ? precision : 0;
-    this.step = step < 0 || isNaN(step) ? 1 : step.toFixed(precision);
-    this.topic = topic;
-    this.node = node;
-    this.unit = unit === null ? '' : unit;
-    this.sensivity = sensivity > 0 ? sensivity : 5;
-    value = isNaN(value) ? this.min : value;
-
-    var input = new InputComponent(this);
-    var slider_left  = new SliderComponent(this, -1);
-    var slider_right = new SliderComponent(this,  1);
-
-    slider_left.className = 'ui-input-slider-left';
-    slider_right.className = 'ui-input-slider-right';
-
-    if (name) {
-      var info = document.createElement('span');
-      info.className = 'ui-input-slider-info';
-      info.textContent = name;
-      node.appendChild(info);
-    }
-
-    node.appendChild(slider_left);
-    node.appendChild(input);
-    node.appendChild(slider_right);
-
-    this.input = input;
-    sliders[topic] = this;
-    setValue(topic, value);
-  };
-
-  InputSlider.prototype.setInputValue = function setInputValue() {
-    this.input.value = this.value.toFixed(this.precision) + this.unit;
-  };
-
-  var setValue = function setValue(topic, value, send_notify) {
-    var slider = sliders[topic];
-    if (slider === undefined)
-      return;
-
-    value = parseFloat(value.toFixed(slider.precision));
-
-    if (value > slider.max) value = slider.max;
-    if (value < slider.min)  value = slider.min;
-
-    slider.value = value;
-    slider.node.setAttribute('data-value', value);
-
-    slider.setInputValue();
-
-    if (send_notify === false)
-      return;
-
-    notify.call(slider);
-  };
-
-  var setMax = function setMax(topic, value) {
-    var slider = sliders[topic];
-    if (slider === undefined)
-      return;
-
-    slider.max = value;
-    setValue(topic, slider.value);
-  };
-
-  var setMin = function setMin(topic, value) {
-    var slider = sliders[topic];
-    if (slider === undefined)
-      return;
-
-    slider.min = value;
-    setValue(topic, slider.value);
-  };
-
-  var setUnit = function setUnit(topic, unit) {
-    var slider = sliders[topic];
-    if (slider === undefined)
-      return;
-
-    slider.unit = unit;
-    setValue(topic, slider.value);
-  };
-
-  var setStep = function setStep(topic, value) {
-    var slider = sliders[topic];
-    if (slider === undefined)
-      return;
-
-    slider.step = parseFloat(value);
-    setValue(topic, slider.value);
-  };
-
-  var setPrecision = function setPrecision(topic, value) {
-    var slider = sliders[topic];
-    if (slider === undefined)
-      return;
-
-    value = value | 0;
-    slider.precision = value;
-
-    var step = parseFloat(slider.step.toFixed(value));
-    if (step === 0)
-      slider.step = 1 / Math.pow(10, value);
-
-    setValue(topic, slider.value);
-  };
-
-  var setSensivity = function setSensivity(topic, value) {
-    var slider = sliders[topic];
-    if (slider === undefined)
-      return;
-
-    value = value | 0;
-
-    slider.sensivity = value > 0 ? value : 5;
-  };
-
-  var getNode =  function getNode(topic) {
-    return sliders[topic].node;
-  };
-
-  var getPrecision =  function getPrecision(topic) {
-    return sliders[topic].precision;
-  };
-
-  var getStep =  function getStep(topic) {
-    return sliders[topic].step;
-  };
-
-  var subscribe = function subscribe(topic, callback) {
-    if (subscribers[topic] === undefined)
-      subscribers[topic] = [];
-    subscribers[topic].push(callback);
-  };
-
-  var unsubscribe = function unsubscribe(topic, callback) {
-    subscribers[topic].indexOf(callback);
-    subscribers[topic].splice(index, 1);
-  };
-
-  var notify = function notify() {
-    if (subscribers[this.topic] === undefined)
-      return;
-    for (var i = 0; i < subscribers[this.topic].length; i++)
-      subscribers[this.topic][i](this.value);
-  };
-
-  var createSlider = function createSlider(topic, label) {
-    var slider = document.createElement('div');
-    slider.className = 'ui-input-slider';
-    slider.setAttribute('data-topic', topic);
-
-    if (label !== undefined)
-      slider.setAttribute('data-info', label);
-
-    new InputSlider(slider);
-    return slider;
-  };
-
-  var init = function init() {
-    var elem = document.querySelectorAll('.ui-input-slider');
-    var size = elem.length;
-    for (var i = 0; i < size; i++)
-      new InputSlider(elem[i]);
-  };
-
-  return {
-    init : init,
-    setMax : setMax,
-    setMin : setMin,
-    setUnit : setUnit,
-    setStep : setStep,
-    getNode : getNode,
-    getStep : getStep,
-    setValue : setValue,
-    subscribe : subscribe,
-    unsubscribe : unsubscribe,
-    setPrecision : setPrecision,
-    setSensivity : setSensivity,
-    getPrecision : getPrecision,
-    createSlider : createSlider,
-  };
-
-})();
-
-
-'use strict';
-
-window.addEventListener("load", function() {
-  ColorPickerTool.init();
-});
-
-var ColorPickerTool = (function ColorPickerTool() {
-
-  /*========== Get DOM Element By ID ==========*/
-
-  function getElemById(id) {
-    return document.getElementById(id);
-  }
-
-  function allowDropEvent(e) {
-    e.preventDefault();
-  }
-
-  /*========== Make an element resizable relative to it's parent ==========*/
-
-  var UIComponent = (function UIComponent() {
-
-    function makeResizable(elem, axis) {
-      var valueX = 0;
-      var valueY = 0;
-      var action = 0;
-
-      var resizeStart = function resizeStart(e) {
-        e.stopPropagation();
-        e.preventDefault();
-        if (e.button !== 0)
-          return;
-
-        valueX = e.clientX - elem.clientWidth;
-        valueY = e.clientY - elem.clientHeight;
-
-        document.body.setAttribute('data-resize', axis);
-        document.addEventListener('mousemove', mouseMove);
-        document.addEventListener('mouseup', resizeEnd);
-      };
-
-      var mouseMove = function mouseMove(e) {
-        if (action >= 0)
-          elem.style.width = e.clientX - valueX + 'px';
-        if (action <= 0)
-          elem.style.height = e.clientY - valueY + 'px';
-      };
-
-      var resizeEnd = function resizeEnd(e) {
-        if (e.button !== 0)
-          return;
-
-        document.body.removeAttribute('data-resize', axis);
-        document.removeEventListener('mousemove', mouseMove);
-        document.removeEventListener('mouseup', resizeEnd);
-      };
-
-      var handle = document.createElement('div');
-      handle.className = 'resize-handle';
-
-      if (axis === 'width') action = 1;
-      else if (axis === 'height') action = -1;
-      else axis = 'both';
-
-      handle.className = 'resize-handle';
-      handle.setAttribute('data-resize', axis);
-      handle.addEventListener('mousedown', resizeStart);
-      elem.appendChild(handle);
-    };
-
-    /*========== Make an element draggable relative to it's parent ==========*/
-
-    var makeDraggable = function makeDraggable(elem, endFunction) {
-
-      var offsetTop;
-      var offsetLeft;
-
-      elem.setAttribute('data-draggable', 'true');
-
-      var dragStart = function dragStart(e) {
-        e.preventDefault();
-        e.stopPropagation();
-
-        if (e.target.getAttribute('data-draggable') !== 'true' ||
-          e.target !== elem || e.button !== 0)
-          return;
-
-        offsetLeft = e.clientX - elem.offsetLeft;
-        offsetTop = e.clientY - elem.offsetTop;
-
-        document.addEventListener('mousemove', mouseDrag);
-        document.addEventListener('mouseup', dragEnd);
-      };
-
-      var dragEnd = function dragEnd(e) {
-        if (e.button !== 0)
-          return;
-
-        document.removeEventListener('mousemove', mouseDrag);
-        document.removeEventListener('mouseup', dragEnd);
-      };
-
-      var mouseDrag = function mouseDrag(e) {
-        elem.style.left = e.clientX - offsetLeft + 'px';
-        elem.style.top = e.clientY - offsetTop + 'px';
-      };
-
-      elem.addEventListener('mousedown', dragStart, false);
-    };
-
-    return {
-      makeResizable : makeResizable,
-      makeDraggable : makeDraggable
-    };
-
-  })();
-
-  /*========== Color Class ==========*/
-
-  var Color = UIColorPicker.Color;
-  var HSLColor = UIColorPicker.HSLColor;
-
-  /**
-   * ColorPalette
-   */
-  var ColorPalette = (function ColorPalette() {
-
-    var samples = [];
-    var color_palette;
-    var complementary;
-
-    var hideNode = function(node) {
-      node.setAttribute('data-hidden', 'true');
-    };
-
-    var ColorSample = function ColorSample(id) {
-      var node = document.createElement('div');
-      node.className = 'sample';
-
-      this.uid = samples.length;
-      this.node = node;
-      this.color = new Color();
-
-      node.setAttribute('sample-id', this.uid);
-      node.setAttribute('draggable', 'true');
-      node.addEventListener('dragstart', this.dragStart.bind(this));
-      node.addEventListener('click', this.pickColor.bind(this));
-
-      samples.push(this);
-    };
-
-    ColorSample.prototype.updateBgColor = function updateBgColor() {
-      this.node.style.backgroundColor = this.color.getColor();
-    };
-
-    ColorSample.prototype.updateColor = function updateColor(color) {
-      this.color.copy(color);
-      this.updateBgColor();
-    };
-
-    ColorSample.prototype.updateHue = function updateHue(color, degree, steps) {
-      this.color.copy(color);
-      var hue = (steps * degree + this.color.hue) % 360;
-      if (hue < 0) hue += 360;
-      this.color.setHue(hue);
-      this.updateBgColor();
-    };
-
-    ColorSample.prototype.updateSaturation = function updateSaturation(color, value, steps) {
-      var saturation = color.saturation + value * steps;
-      if (saturation <= 0) {
-        this.node.setAttribute('data-hidden', 'true');
-        return;
-      }
-
-      this.node.removeAttribute('data-hidden');
-      this.color.copy(color);
-      this.color.setSaturation(saturation);
-      this.updateBgColor();
-    };
-
-    ColorSample.prototype.updateLightness = function updateLightness(color, value, steps) {
-      var lightness = color.lightness + value * steps;
-      if (lightness <= 0) {
-        this.node.setAttribute('data-hidden', 'true');
-        return;
-      }
-      this.node.removeAttribute('data-hidden');
-      this.color.copy(color);
-      this.color.setLightness(lightness);
-      this.updateBgColor();
-    };
-
-    ColorSample.prototype.updateBrightness = function updateBrightness(color, value, steps) {
-      var brightness = color.value + value * steps;
-      if (brightness <= 0) {
-        this.node.setAttribute('data-hidden', 'true');
-        return;
-      }
-      this.node.removeAttribute('data-hidden');
-      this.color.copy(color);
-      this.color.setValue(brightness);
-      this.updateBgColor();
-    };
-
-    ColorSample.prototype.updateAlpha = function updateAlpha(color, value, steps) {
-      var alpha = parseFloat(color.a) + value * steps;
-      if (alpha <= 0) {
-        this.node.setAttribute('data-hidden', 'true');
-        return;
-      }
-      this.node.removeAttribute('data-hidden');
-      this.color.copy(color);
-      this.color.a = parseFloat(alpha.toFixed(2));
-      this.updateBgColor();
-    };
-
-    ColorSample.prototype.pickColor = function pickColor() {
-      UIColorPicker.setColor('picker', this.color);
-    };
-
-    ColorSample.prototype.dragStart = function dragStart(e) {
-      e.dataTransfer.setData('sampleID', this.uid);
-      e.dataTransfer.setData('location', 'palette-samples');
-    };
-
-    var Palette = function Palette(text, size) {
-      this.samples = [];
-      this.locked = false;
-
-      var palette = document.createElement('div');
-      var title = document.createElement('div');
-      var controls = document.createElement('div');
-      var container = document.createElement('div');
-      var lock = document.createElement('div');
-
-      container.className = 'container';
-      title.className = 'title';
-      palette.className = 'palette';
-      controls.className = 'controls';
-      lock.className = 'lock';
-      title.textContent = text;
-
-      controls.appendChild(lock);
-      container.appendChild(title);
-      container.appendChild(controls);
-      container.appendChild(palette);
-
-      lock.addEventListener('click', function () {
-        this.locked = !this.locked;
-        lock.setAttribute('locked-state', this.locked);
-      }.bind(this));
-
-      for(var i = 0; i < size; i++) {
-        var sample = new ColorSample();
-        this.samples.push(sample);
-        palette.appendChild(sample.node);
-      }
-
-      this.container = container;
-      this.title = title;
-    };
-
-    var createHuePalette = function createHuePalette() {
-      var palette = new Palette('Hue', 12);
-
-      UIColorPicker.subscribe('picker', function(color) {
-        if (palette.locked === true)
-          return;
-
-        for(var i = 0; i < 12; i++) {
-          palette.samples[i].updateHue(color, 30, i);
-        }
-      });
-
-      color_palette.appendChild(palette.container);
-    };
-
-    var createSaturationPalette = function createSaturationPalette() {
-      var palette = new Palette('Saturation', 11);
-
-      UIColorPicker.subscribe('picker', function(color) {
-        if (palette.locked === true)
-          return;
-
-        for(var i = 0; i < 11; i++) {
-          palette.samples[i].updateSaturation(color, -10, i);
-        }
-      });
-
-      color_palette.appendChild(palette.container);
-    };
-
-    /* Brightness or Lightness - depends on the picker mode */
-    var createVLPalette = function createSaturationPalette() {
-      var palette = new Palette('Lightness', 11);
-
-      UIColorPicker.subscribe('picker', function(color) {
-        if (palette.locked === true)
-          return;
-
-        if(color.format === 'HSL') {
-          palette.title.textContent = 'Lightness';
-          for(var i = 0; i < 11; i++)
-            palette.samples[i].updateLightness(color, -10, i);
-        }
-        else {
-          palette.title.textContent = 'Value';
-          for(var i = 0; i < 11; i++)
-            palette.samples[i].updateBrightness(color, -10, i);
-        }
-      });
-
-      color_palette.appendChild(palette.container);
-    };
-
-    var isBlankPalette = function isBlankPalette(container, value) {
-      if (value === 0) {
-        container.setAttribute('data-collapsed', 'true');
-        return true;
-      }
-
-      container.removeAttribute('data-collapsed');
-      return false;
-    };
-
-    var createAlphaPalette = function createAlphaPalette() {
-      var palette = new Palette('Alpha', 10);
-
-      UIColorPicker.subscribe('picker', function(color) {
-        if (palette.locked === true)
-          return;
-
-        for(var i = 0; i < 10; i++) {
-          palette.samples[i].updateAlpha(color, -0.1, i);
-        }
-      });
-
-      color_palette.appendChild(palette.container);
-    };
-
-    var getSampleColor = function getSampleColor(id) {
-      if (samples[id] !== undefined && samples[id]!== null)
-        return new Color(samples[id].color);
-    };
-
-    var init = function init() {
-      color_palette = getElemById('color-palette');
-
-      createHuePalette();
-      createSaturationPalette();
-      createVLPalette();
-      createAlphaPalette();
-
-    };
-
-    return {
-      init : init,
-      getSampleColor : getSampleColor
-    };
-
-  })();
-
-  /**
-   * ColorInfo
-   */
-  var ColorInfo = (function ColorInfo() {
-
-    var info_box;
-    var select;
-    var RGBA;
-    var HEXA;
-    var HSLA;
-
-    var updateInfo = function updateInfo(color) {
-      if (color.a | 0 === 1) {
-        RGBA.info.textContent = 'RGB';
-        HSLA.info.textContent = 'HSL';
-      }
-      else {
-        RGBA.info.textContent = 'RGBA';
-        HSLA.info.textContent = 'HSLA';
-      }
-
-      RGBA.value.value = color.getRGBA();
-      HSLA.value.value = color.getHSLA();
-      HEXA.value.value = color.getHexa();
-    };
-
-    var InfoProperty = function InfoProperty(info) {
-
-      var node = document.createElement('div');
-      var title = document.createElement('div');
-      var value = document.createElement('input');
-      var copy = document.createElement('div');
-
-      node.className = 'property';
-      title.className = 'type';
-      value.className = 'value';
-      copy.className = 'copy';
-
-      title.textContent = info;
-      value.setAttribute('type', 'text');
-
-      copy.addEventListener('click', function() {
-        value.select();
-      });
-
-      node.appendChild(title);
-      node.appendChild(value);
-      node.appendChild(copy);
-
-      this.node = node;
-      this.value = value;
-      this.info = title;
-
-      info_box.appendChild(node);
-    };
-
-    var init = function init() {
-
-      info_box = getElemById('color-info');
-
-      RGBA = new InfoProperty('RGBA');
-      HSLA = new InfoProperty('HSLA');
-      HEXA = new InfoProperty('HEXA');
-
-      UIColorPicker.subscribe('picker', updateInfo);
-
-    };
-
-    return {
-      init: init
-    };
-
-  })();
-
-  /**
-   * ColorPicker Samples
-   */
-  var ColorPickerSamples = (function ColorPickerSamples() {
-
-    var samples = [];
-    var nr_samples = 0;
-    var active = null;
-    var container = null;
-    var  samples_per_line = 10;
-    var trash_can = null;
-    var base_color = new HSLColor(0, 50, 100);
-    var add_btn;
-    var add_btn_pos;
-
-    var ColorSample = function ColorSample() {
-      var node = document.createElement('div');
-      node.className = 'sample';
-
-      this.uid = samples.length;
-      this.index = nr_samples++;
-      this.node = node;
-      this.color = new Color(base_color);
-
-      node.setAttribute('sample-id', this.uid);
-      node.setAttribute('draggable', 'true');
-
-      node.addEventListener('dragstart', this.dragStart.bind(this));
-      node.addEventListener('dragover' , allowDropEvent);
-      node.addEventListener('drop'     , this.dragDrop.bind(this));
-
-      this.updatePosition(this.index);
-      this.updateBgColor();
-      samples.push(this);
-    };
-
-    ColorSample.prototype.updateBgColor = function updateBgColor() {
-      this.node.style.backgroundColor = this.color.getColor();
-    };
-
-    ColorSample.prototype.updatePosition = function updatePosition(index) {
-      this.index = index;
-      this.posY = 5 + ((index / samples_per_line) | 0) * 52;
-      this.posX = 5 + ((index % samples_per_line) | 0) * 52;
-      this.node.style.top  = this.posY + 'px';
-      this.node.style.left = this.posX + 'px';
-    };
-
-    ColorSample.prototype.updateColor = function updateColor(color) {
-      this.color.copy(color);
-      this.updateBgColor();
-    };
-
-    ColorSample.prototype.activate = function activate() {
-      UIColorPicker.setColor('picker', this.color);
-      this.node.setAttribute('data-active', 'true');
-    };
-
-    ColorSample.prototype.deactivate = function deactivate() {
-      this.node.removeAttribute('data-active');
-    };
-
-    ColorSample.prototype.dragStart = function dragStart(e) {
-      e.dataTransfer.setData('sampleID', this.uid);
-      e.dataTransfer.setData('location', 'picker-samples');
-    };
-
-    ColorSample.prototype.dragDrop = function dragDrop(e) {
-      e.stopPropagation();
-      this.color = Tool.getSampleColorFrom(e);
-      this.updateBgColor();
-    };
-
-    ColorSample.prototype.deleteSample = function deleteSample() {
-      container.removeChild(this.node);
-      samples[this.uid] = null;
-      nr_samples--;
-    };
-
-    var updateUI = function updateUI() {
-      updateContainerProp();
-
-      var index = 0;
-      var nr = samples.length;
-      for (var i=0; i < nr; i++)
-        if (samples[i] !== null) {
-          samples[i].updatePosition(index);
-          index++;
-        }
-
-      AddSampleButton.updatePosition(index);
-    };
-
-    var deleteSample = function deleteSample(e) {
-      trash_can.parentElement.setAttribute('drag-state', 'none');
-
-      var location = e.dataTransfer.getData('location');
-      if (location !== 'picker-samples')
-        return;
-
-      var sampleID = e.dataTransfer.getData('sampleID');
-      samples[sampleID].deleteSample();
-      console.log(samples);
-
-      updateUI();
-    };
-
-    var createDropSample = function createDropSample() {
-      var sample = document.createElement('div');
-      sample.id = 'drop-effect-sample';
-      sample.className = 'sample';
-      container.appendChild(sample);
-    };
-
-    var setActivateSample = function setActivateSample(e) {
-      if (e.target.className !== 'sample')
-        return;
-
-      unsetActiveSample(active);
-      Tool.unsetVoidSample();
-      CanvasSamples.unsetActiveSample();
-      active = samples[e.target.getAttribute('sample-id')];
-      active.activate();
-    };
-
-    var unsetActiveSample = function unsetActiveSample() {
-      if (active)
-        active.deactivate();
-      active = null;
-    };
-
-    var getSampleColor = function getSampleColor(id) {
-      if (samples[id] !== undefined && samples[id]!== null)
-        return new Color(samples[id].color);
-    };
-
-    var updateContainerProp = function updateContainerProp() {
-      samples_per_line = ((container.clientWidth - 5) / 52) | 0;
-      var height = 52 * (1 + (nr_samples / samples_per_line) | 0);
-      container.style.height = height + 10 + 'px';
-    };
-
-    var AddSampleButton = (function AddSampleButton() {
-      var node;
-      var _index = 0;
-      var _posX;
-      var _posY;
-
-      var updatePosition = function updatePosition(index) {
-        _index = index;
-        _posY = 5 + ((index / samples_per_line) | 0) * 52;
-        _posX = 5 + ((index % samples_per_line) | 0) * 52;
-
-        node.style.top  = _posY + 'px';
-        node.style.left = _posX + 'px';
-      };
-
-      var addButtonClick = function addButtonClick() {
-        var sample = new ColorSample();
-        container.appendChild(sample.node);
-        updatePosition(_index + 1);
-        updateUI();
-      };
-
-      var init = function init() {
-        node = document.createElement('div');
-        var icon = document.createElement('div');
-
-        node.className = 'sample';
-        icon.id = 'add-icon';
-        node.appendChild(icon);
-        node.addEventListener('click', addButtonClick);
-
-        updatePosition(0);
-        container.appendChild(node);
-      };
-
-      return {
-        init : init,
-        updatePosition : updatePosition
-      };
-    })();
-
-    var init = function init() {
-      container = getElemById('picker-samples');
-      trash_can = getElemById('trash-can');
-
-      AddSampleButton.init();
-
-      for (var i=0; i<16; i++) {
-        var sample = new ColorSample();
-        container.appendChild(sample.node);
-      }
-
-      AddSampleButton.updatePosition(samples.length);
-      updateUI();
-
-      active = samples[0];
-      active.activate();
-
-      container.addEventListener('click', setActivateSample);
-
-      trash_can.addEventListener('dragover', allowDropEvent);
-      trash_can.addEventListener('dragenter', function() {
-        this.parentElement.setAttribute('drag-state', 'enter');
-      });
-      trash_can.addEventListener('dragleave', function(e) {
-        this.parentElement.setAttribute('drag-state', 'none');
-      });
-      trash_can.addEventListener('drop', deleteSample);
-
-      UIColorPicker.subscribe('picker', function(color) {
-        if (active)
-          active.updateColor(color);
-      });
-
-    };
-
-    return {
-      init : init,
-      getSampleColor : getSampleColor,
-      unsetActiveSample : unsetActiveSample
-    };
-
-  })();
-
-  /**
-   * Canvas Samples
-   */
-  var CanvasSamples = (function CanvasSamples() {
-
-    var active = null;
-    var canvas = null;
-    var samples = [];
-    var zindex = null;
-    var tutorial = true;
-
-    var CanvasSample = function CanvasSample(color, posX, posY) {
-
-      var node = document.createElement('div');
-      var pick = document.createElement('div');
-      var delete_btn = document.createElement('div');
-      node.className = 'sample';
-      pick.className = 'pick';
-      delete_btn.className = 'delete';
-
-      this.uid = samples.length;
-      this.node = node;
-      this.color = color;
-      this.updateBgColor();
-      this.zIndex = 1;
-
-      node.style.top = posY - 50 + 'px';
-      node.style.left = posX - 50 + 'px';
-      node.setAttribute('sample-id', this.uid);
-
-      node.appendChild(pick);
-      node.appendChild(delete_btn);
-
-      var activate = function activate() {
-        setActiveSample(this);
-      }.bind(this);
-
-      node.addEventListener('dblclick', activate);
-      pick.addEventListener('click', activate);
-      delete_btn.addEventListener('click', this.deleteSample.bind(this));
-
-      UIComponent.makeDraggable(node);
-      UIComponent.makeResizable(node);
-
-      samples.push(this);
-      canvas.appendChild(node);
-      return this;
-    };
-
-    CanvasSample.prototype.updateBgColor = function updateBgColor() {
-      this.node.style.backgroundColor = this.color.getColor();
-    };
-
-    CanvasSample.prototype.updateColor = function updateColor(color) {
-      this.color.copy(color);
-      this.updateBgColor();
-    };
-
-    CanvasSample.prototype.updateZIndex = function updateZIndex(value) {
-      this.zIndex = value;
-      this.node.style.zIndex = value;
-    };
-
-    CanvasSample.prototype.activate = function activate() {
-      this.node.setAttribute('data-active', 'true');
-      zindex.setAttribute('data-active', 'true');
-
-      UIColorPicker.setColor('picker', this.color);
-      InputSliderManager.setValue('z-index', this.zIndex);
-    };
-
-    CanvasSample.prototype.deactivate = function deactivate() {
-      this.node.removeAttribute('data-active');
-      zindex.removeAttribute('data-active');
-    };
-
-    CanvasSample.prototype.deleteSample = function deleteSample() {
-      if (active === this)
-        unsetActiveSample();
-      canvas.removeChild(this.node);
-      samples[this.uid] = null;
-    };
-
-    CanvasSample.prototype.updatePosition = function updatePosition(posX, posY) {
-      this.node.style.top = posY - this.startY + 'px';
-      this.node.style.left = posX - this.startX + 'px';
-    };
-
-    var canvasDropEvent = function canvasDropEvent(e) {
-      var color = Tool.getSampleColorFrom(e);
-
-      if (color) {
-        var offsetX = e.pageX - canvas.offsetLeft;
-        var offsetY = e.pageY - canvas.offsetTop;
-        var sample = new CanvasSample(color, offsetX, offsetY);
-        if (tutorial) {
-          tutorial = false;
-          canvas.removeAttribute('data-tutorial');
-          var info = new CanvasSample(new Color(), 100, 100);
-          info.node.setAttribute('data-tutorial', 'dblclick');
-        }
-      }
-
-    };
-
-    var setActiveSample = function setActiveSample(sample) {
-      ColorPickerSamples.unsetActiveSample();
-      Tool.unsetVoidSample();
-      unsetActiveSample();
-      active = sample;
-      active.activate();
-    };
-
-    var unsetActiveSample = function unsetActiveSample() {
-      if (active)
-        active.deactivate();
-      active = null;
-    };
-
-    var createToggleBgButton = function createToggleBgButton() {
-      var button = document.createElement('div');
-      var state = false;
-      button.className = 'toggle-bg';
-      canvas.appendChild(button);
-
-      button.addEventListener('click', function() {
-        console.log(state);
-        state = !state;
-        canvas.setAttribute('data-bg', state);
-      });
-    };
-
-    var init = function init() {
-      canvas = getElemById('canvas');
-      zindex = getElemById('zindex');
-
-      canvas.addEventListener('dragover', allowDropEvent);
-      canvas.addEventListener('drop', canvasDropEvent);
-
-      createToggleBgButton();
-
-      UIColorPicker.subscribe('picker', function(color) {
-        if (active)  active.updateColor(color);
-      });
-
-      InputSliderManager.subscribe('z-index', function (value) {
-        if (active)  active.updateZIndex(value);
-      });
-
-      UIComponent.makeResizable(canvas, 'height');
-    };
-
-    return {
-      init : init,
-      unsetActiveSample : unsetActiveSample
-    };
-
-  })();
-
-  var StateButton = function StateButton(node, state) {
-    this.state = false;
-    this.callback = null;
-
-    node.addEventListener('click', function() {
-      this.state = !this.state;
-      if (typeof this.callback === "function")
-        this.callback(this.state);
-    }.bind(this));
-  };
-
-  StateButton.prototype.set = function set() {
-    this.state = true;
-    if (typeof this.callback === "function")
-      this.callback(this.state);
-  };
-
-  StateButton.prototype.unset = function unset() {
-    this.state = false;
-    if (typeof this.callback === "function")
-      this.callback(this.state);
-  };
-
-  StateButton.prototype.subscribe = function subscribe(func) {
-    this.callback = func;
-  };
-
-
-  /**
-   * Tool
-   */
-  var Tool = (function Tool() {
-
-    var samples = [];
-    var controls = null;
-    var void_sw;
-
-    var createPickerModeSwitch = function createPickerModeSwitch() {
-      var parent = getElemById('controls');
-      var icon = document.createElement('div');
-      var button = document.createElement('div');
-      var hsv = document.createElement('div');
-      var hsl = document.createElement('div');
-      var active = null;
-
-      icon.className = 'icon picker-icon';
-      button.className = 'switch';
-      button.appendChild(hsv);
-      button.appendChild(hsl);
-
-      hsv.textContent = 'HSV';
-      hsl.textContent = 'HSL';
-
-      active = hsl;
-      active.setAttribute('data-active', 'true');
-
-      function switchPickingModeTo(elem) {
-        active.removeAttribute('data-active');
-        active = elem;
-        active.setAttribute('data-active', 'true');
-        UIColorPicker.setPickerMode('picker', active.textContent);
-      };
-
-      var picker_sw = new StateButton(icon);
-      picker_sw.subscribe(function() {
-        if (active === hsv)
-          switchPickingModeTo(hsl);
-        else
-          switchPickingModeTo(hsv);
-      });
-
-      hsv.addEventListener('click', function() {
-        switchPickingModeTo(hsv);
-      });
-      hsl.addEventListener('click', function() {
-        switchPickingModeTo(hsl);
-      });
-
-      parent.appendChild(icon);
-      parent.appendChild(button);
-    };
-
-    var setPickerDragAndDrop = function setPickerDragAndDrop() {
-      var preview = document.querySelector('#picker .preview-color');
-      var picking_area = document.querySelector('#picker .picking-area');
-
-      preview.setAttribute('draggable', 'true');
-      preview.addEventListener('drop', drop);
-      preview.addEventListener('dragstart', dragStart);
-      preview.addEventListener('dragover', allowDropEvent);
-
-      picking_area.addEventListener('drop', drop);
-      picking_area.addEventListener('dragover', allowDropEvent);
-
-      function drop(e) {
-        var color = getSampleColorFrom(e);
-        UIColorPicker.setColor('picker', color);
-      };
-
-      function dragStart(e) {
-        e.dataTransfer.setData('sampleID', 'picker');
-        e.dataTransfer.setData('location', 'picker');
-      };
-    };
-
-    var getSampleColorFrom = function getSampleColorFrom(e) {
-      var sampleID = e.dataTransfer.getData('sampleID');
-      var location = e.dataTransfer.getData('location');
-
-      if (location === 'picker')
-        return UIColorPicker.getColor(sampleID);
-      if (location === 'picker-samples')
-        return ColorPickerSamples.getSampleColor(sampleID);
-      if (location === 'palette-samples')
-        return ColorPalette.getSampleColor(sampleID);
-    };
-
-    var setVoidSwitch = function setVoidSwitch() {
-      var void_sample = getElemById('void-sample');
-      void_sw = new StateButton(void_sample);
-      void_sw.subscribe( function (state) {
-        void_sample.setAttribute('data-active', state);
-        if (state === true) {
-          ColorPickerSamples.unsetActiveSample();
-          CanvasSamples.unsetActiveSample();
-        }
-      });
-    };
-
-    var unsetVoidSample = function unsetVoidSample() {
-      void_sw.unset();
-    };
-
-    var init = function init() {
-      controls = getElemById('controls');
-
-      var color = new Color();
-      color.setHSL(0, 51, 51);
-      UIColorPicker.setColor('picker', color);
-
-      setPickerDragAndDrop();
-      createPickerModeSwitch();
-      setVoidSwitch();
-    };
-
-    return {
-      init : init,
-      unsetVoidSample : unsetVoidSample,
-      getSampleColorFrom : getSampleColorFrom
-    };
-
-  })();
-
-  var init = function init() {
-    UIColorPicker.init();
-    InputSliderManager.init();
-    ColorInfo.init();
-    ColorPalette.init();
-    ColorPickerSamples.init();
-    CanvasSamples.init();
-    Tool.init();
-  };
-
-  return {
-    init : init
-  };
-
-})();
-
-
-
- -

{{CSSRef}}

- -

Esta ferramenta facilita a criação, ajuste e experimentação com cores personalizadas para uso na web. Ela também facilita a conversão entre vários formatos de cores suportados por CSS, incluindo cores HEXA, RGB (vermelho, verde, azul) e HSL (tonalidade, saturação, luminosidade). Controle sobre o canal alfa também é suportado nos formatos RGB (rgba) e (hsla).

- -

Enquanto você ajusta os parâmetros que definem a cor, ela é apresentada nos 3 formatos padrão para CSS web. Além disso, com base na seleção de cor atual, é gerada uma paleta para HSL, HSV e também alfa. O selecionador de cor estilo "conta-gotas" pode alternar os estilos HSL e HSV. Você também pode testar as cores e ver como elas se sobrepõem umas sobre às outras. 

- -

{{ EmbedLiveSample('ColorPicker_Tool', '100%', '900') }}

- -

As cores geradas por você acima podem ser usadas em qualquer lugar em que a cor é usada em CSS e HTML, a menos que seja indicado de outra forma.

- -

Veja também

- -

Para mais aplicações de cores, veja:

- - diff --git a/files/pt-br/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html b/files/pt-br/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html new file mode 100644 index 0000000000..05318caa79 --- /dev/null +++ b/files/pt-br/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html @@ -0,0 +1,239 @@ +--- +title: Conceitos básicos de flexbox +slug: Web/CSS/CSS_Flexible_Box_Layout/Conceitos_Basicos_do_Flexbox +tags: + - CSS + - Flex + - Tutorial + - conceitos + - conteiner + - eixos + - flexbox +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox +--- +
{{CSSRef}}
+ +

O Flexible Box Module, geralmente chamado de flexbox, foi projetado tanto como um modelo de layout unidimensional quanto como um método capaz de organizar espacialmente os elementos em uma interface, além de possuir capacidades avançadas de alinhamento. Este artigo fornece um resumo das principais funcionalidades do flexbox, as quais exploraremos com mais detalhes no restante deste guia.

+ +

Quando se descreve o flexbox como sendo unidimensional, enfatiza-se o fato de que ele lida com o layout em uma dimensão de cada vez - seja uma linha ou uma coluna. Isto pode ser comparado com o modelo bidimensional de CSS - Layout de Grade, que permite o controle simultâneo das colunas e linhas.

+ +

Os eixos do flexbox

+ +

Ao se utilizar o flexbox, é preciso ter em mente que todas as operações realizadas relacionam-se a dois eixos: o eixo principal e o eixo transversal. O eixo principal é definido através da propriedade flex-direction e o eixo transversal encontra-se na direção perpendicular a ele. Como esses eixos são as engrenagens fundamentais do flexbox é necessário compreender minuciosamente o seu funcionamento.

+ +

Eixo principal

+ +

Conforme descrito acima, a propriedade flex-direction define a direção do eixo principal e pode tem quatro valores possíveis:

+ + + +

Se o valor escolhido for row (linha) ou row-reverse (linha reversa), seu eixo principal se moverá ao longo da linha — na direção inline.

+ +

If flex-direction is set to row the main axis runs along the row in the inline direction.

+ +

Se o valor escolhido for column (coluna) ou column-reverse (coluna reversa) e o eixo principal se moverá do topo até o fim da página — na direção block.

+ +

If flex-direction is set to column the main axis runs in the block direction.

+ +

Eixo transversal

+ +

O eixo transversal é perpendicular ao eixo principal, logo, se a propriedade flex-direction estiver definida nas linhas, como row ou row-reverse, o eixo transversal estará na direção das colunas, como column ou column-reverse.

+ +

If flex-direction is set to row then the cross axis runs in the block direction.

+ +

Se o eixo principal for definido nas colunas, como column ou column-reverse, então o eixo transversal estará na direção das linhas, como row ou row-reverse.

+ +

If flex-direction is set to column then the cross axis runs in the inline direction.

+ +

Compreender a diferença entre os eixos principal e perpendicular é o que importa quando começamos a observar o alinhamento ou justificação dos itens flexíveis (flex items); o flexbox possui propriedades que alinham e justificam o conteúdo ao longo de um eixo ou de outro.

+ +

Linhas de Início e Fim

+ +

Outra área crítica em termos de compreensão é como o Flexbox não faz nenhuma premissa sobre o modo de escrita do documento. No passado, o CSS utilizava fortemente os modos de escrita horizontal e da esquerda para a direita. Métodos modernos de layout abrangem uma variedade de modos de escrita e, portanto, não assumimos mais que uma linha de texto começará no canto superior esquerdo do documento e sigará para o lado direito, com novas linhas aparecendo uma após a as outra.

+ +

Essa discussão sobre a relação entre o flexbox e a especificação do modo de escrita será abordada um artigo posterior, contudo, a descrição a seguir explica brevemente porque não se fala sobre esquerda e direita/ acima e abaixo quando descreve-se a direção para a qual os elementos flex fluem.

+ +

Se o valor da propriedade flex-direction for row (linha), considerando o estilo de escrita ocidental, a borda inicial do eixo principal estará localizada à esquerda e a borda final, à direita.

+ +

Working in English the start edge is on the left.

+ +

Considerando um idioma como o Árabe, que possui um estilo de escrita oriental, teremos o inverso: a borda inicia do eixo principal estará localizada à direita e a borda final, à esquerda.

+ +

The start edge in a RTL language is on the right.

+ +

Em ambos os casos, a borda inicial do eixo transversal está na parte superior do contêiner flex e a borda final, na parte inferior, visto que ambos os idiomas têm um estilo de de escrita horizontal.

+ +

Após um tempo de prática, pensar em termos de início e final ao invés de esquerda e direita se tornará natural e será útil ao lidar com outros métodos de layout, como CSS Grid, que seguem os mesmos padrões.

+ +

Contêiner Flex

+ +

A área de um documento que faz uso do flexbox é chamada de contêiner flex. Para criar essa estrutura, define-se o valor da propriedade {{cssxref("display")}} do elemento representado pelo contêiner como flex ou inline-flex. Desse modo, os elementos-filhos desse contêiner tornar-se-ão do tipo flex. Como todas as propriedades no CSS possuem valores padrão, ao criar um contêiner flex, os elementos nele contidos apresentarão o seguinte comportamento:

+ + + +

O resultado final é que todos os elementos serão alinhados em uma linha, usando o tamanho do conteúdo como o tamanho no eixo principal. Se houver mais itens do que é possível caber no container, não haverá uma quebra de linha; ao invés disso, irão ultrapassar o limite horizontal da página. Se alguns elementos forem mais altos que outros, todos os itens se estenderão ao longo do eixo transversal para preencher seu tamanho total.

+ +

É possível conferir essas questões no exemplo prático abaixo. Tente editar ou adicionar mais itens para testar o comportamento inicial do Flexbox.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/the-flex-container.html", '100%', 480)}} 

+ +

Propriedade flex-direction

+ +

A propriedade {{cssxref("flex-direction")}} permite alterar a direção na qual os elementos flex serão exibidos ao longo do eixo principal. Definindo a propriedade flex-direction como row-reverse (linha reversa) ainda teremos os elementos dispostos em uma linha, entretanto, as linhas inicial e final serão trocadas.
+
+ Se mudarmos a flex-direction para a column (coluna), o eixo principal exibirá os elemento em uma coluna. Trocando o valor para column-reverse (coluna reversa) fará com que as linhas inicial e final sejam novamente trocadas.
+
+ No exemplo prático abaixo tem-se a propriedade flex-direction definida como row-reverse. Experimente os outros valores - row, column e column-reverse - para ver o que acontece com o conteúdo.
+
+ {{EmbedGHLiveSample("css-examples/flexbox/basics/flex-direction.html", '100%', 350)}}

+ +

Quebra de linha com "flex-wrap"

+ +

Embora o flexbox seja um modelo unidimensional, é possível fazer com que elementos flex sejam agrupados em múltiplas linhas. Ao fazer isso, considera-se cada linha como um novo contêiner flex. Qualquer distribuição espacial ocorrerá ao longo essa linha, sem referência às linhas de ambos os lados. Para gerar a quebra automática das linhas adicione a propriedade {{cssxref("flex-wrap")}} com o valor wrap. Assim, se elementos forem muito grandes para serem exibidos em uma única linha, eles serão agrupados em outras linhas.

+ +

O exemplo prático abaixo contém elementos flex aos quais foi dada uma determinada largura, cuja soma totaliza um valor grande demais para caber no container. Visto que a propriedade flex-wrap está definida como wrap, os itens serão reorganizados em mais de uma linha. Trocando-se para nowrap, que também é o valor inicial, eles encolherão para caber no contêiner, porque estão usando valores iniciais de flexbox que permitem que os itens encolham. O uso do nowrap causaria um vazamento se os itens não encolhessem ou não diminuíssem o suficiente para caber.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-wrap.html", '100%', 400)}}

+ +

Saiba mais sobre o empacotamento de itens flexíveis no guia Masterização de Empacotamento de Itens Flexíveis (em Inglês).

+ +

Propriedade abreviada flex-flow

+ +

Pode-se combinar as propriedades flex-direction e flex-wrap de forma abreviada através da propriedade {{cssxref("flex-flow")}}. O primeiro valor especificado é o flex-direction e o segundo valor é o flex-wrap.

+ +

No exemplo prático abaixo, tente alterar o primeiro valor para um dos valores permitidos para a propriedade flex-direction - row, row-reverse, column ou column-reverse, e também altere o segundo para wrap e nowrap.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-flow.html", '100%', 400)}}

+ +

Expansão, encolhimento e tamanho dos elementos flex

+ +

Para ter mais controle sobre os elementos flex é possível alterá-los diretamente utilizando as três propriedades abaixo:

+ + + +

Na presente seção, examinar-se-á brevemente tais propriedades. Para se aprofundar neste conteúdo sugete-se o tutorial Taxas de Controle de Elementos Flex ao Longo do Eixo Principal (em inglês).

+ +

Antes que essas propriedades possam fazer sentido, é preciso compreender o conceito de espaço disponível. Quando se modifica o valor das propriedades  acima, altera-se a forma que o espaço disponível é distribuído entre os elementos. Tal conceito de espaço disponível também é relevante quando se trata do alinhamento.

+ +

Conforme o exemplo abaixo, se houver três elementos com 100 pixels de comprimento em um contêiner de 500 pixels, então o espaço total necessário para acomodá-los será de 300 pixels. Desse modo, sobrarão 200 pixels de espaço útil. Se os valores iniciais não forem modificados, então o flexbox posicionará esse espaço após o último item.

+ +

This flex container has available space after laying out the items.

+ +

Se for necessário que os elementos cresçam proprocionamente ou não e preencham o espaço disponível, deverá haver método que faça essa distribuição espacial entre eles, conforme será visto nas seções subsequentes.

+ +

Propriedade flex-basis

+ +

A propriedade flex-basis define o tamanho inicial dos elementos, em unidades de pixel, antes que o espaço remanescente seja redistribuído. O valor inicial desta propriedade é auto — neste caso o navegador observa se os itens possuem o mesmo tamanho. No exemplo acima, todos os itens têm uma largura de 100 pixels, que é utilizada como padrão na propriedade flex-basis.

+ +

Se os elementos não possuírem um tamanho padrão, então as dimensões dos seus conteúdos (imagem, texto, etc) serão passadas como parâmetro para propriedade flex-basis. É por isso que quando escreve-se display: flex no elemento-pai para criar o contêiner, todos os elementos-filhos se organizam em linha e ocupam apenas o espaço necessário para exibir seu conteúdo.

+ +

Propriedade flex-grow

+ +

Com a propriedade flex-grow definida como um inteiro positivo, os elementos flex podem crescer ao longo do eixo principal, a partir do valor mínimo estabelecido no flex-basis. Isto fará com que o elemento se estique e ocupe qualquer espaço disponível nesse eixo ou uma proporção dele, caso outros elementos-irmãos também possam crescer.

+ +

Atribuir o valor 1 à propriedade flex-grow fará com que o espaço disponível no contêiner flex seja igualmente distribuído entre todos os elementos do exemplo acima. Logo, os elementos-filhos irão se expandir para preencher o contêiner no sentido do eixo principal.

+ +

Como visto no parágrafo anterior, a propriedade flex-grow pode ser empregada para distribuir o espaço proporcionalmente entre os elementos de um contêiner, contudo, se atribuirmos ao primeiro elemento o valor 2 parae 1 aos elementos restantes, duas partes serão dadas ao primeiro elemento (100px de 200px totais) e uma parte para cada um dos outros dois elementos (50px de 200px totais).

+ +

Propriedade flex-shrink

+ +

Enquanto a propriedade flex-grow permite aumentar a largura dos elementos dentro do contêiner para completar o espaço disponível no eixo principal, a propriedade flex-shrink faz o oposto, controlando a redução dos mesmos. Caso não haja espaço suficiente para acomodar todos os elementos e o valor da propriedade flex-shrink seja um inteiro positivo, a largura pode ser reduzida a um valor menor do que a definida na propriedade flex-basis. Assim como na propriedade flex-grow, diferentes valores podem ser atribuídos a um elemento de modo que ele encolha mais do que os outros - um elemento cuja propriedade flex-shrink receba um valor inteiro maior irá diminuir mais do que os seus irmão que tenham valores menores.

+ +

O tamanho mínimo do elemento será levado em consideração ao se calcular a quantidade real de encolhimento que ocorrerá, o que significa que a propriedade flex-shrink se comporta de modo potencialmente menos consistente do que a propriedade flex-grow. Examinar-se-á mais detalhadamente o funcionamento desse algoritmo no artigo Taxas de Controle de Elementos Flex ao Longo do Eixo Principal.

+ +
+

Note que os valores para as propriedades flex-grow e flex-shrink são proporcionais.  Particularmente, se tivermos todos os nossos elementos definidos como flex: 1 1 200px e então quisermos que um deles cresça o dobro, temos de definir o elemento como flex: 2 1 200px. Entretanto, podemos escrever flex: 10 1 200px e flex: 20 1 200px se quisermos.

+
+ +

Abreviatura para os valores das propriedades flex

+ +

As propriedades flex-grow, flex-shrink, and flex-basis raramente são empregas de forma individual. Usualmente, elas são combinadas através da propriedade de abreviação {{cssxref("flex")}}. A abreviatura flex permite definir os três valores na seguinte ordem: flex-grow, flex-shrink, flex-basis.

+ +

O exemplo prático abaixo permite que sejam testados diferentes valores com a propriedade de abreviação flex; lembre-se que o primeiro campo corresponde à propriedade flex-grow, onde um valor inteiro e positivo faz-se o elemento crescer. O segundo campo é a propriedade flex-shrink e, ao contrário do anterior, um valor inteiro e positivo pode fazer os elementos encolherem, mas  somente se o seu comprimento total ultrapassar o limite horizontal do contêiner, no sentido do eixo principal. O último campo contém a propriedade flex-basis, que define o valor base, em unidades de pixel, para aumentar e diminuir o elemento quando da aplicação das propriedades anteriores.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-properties.html", '100%', 510)}}

+ +

Há ainda alguns valores de abreviação predefinidos, que cobrem a maioria dos casos de uso. São aplicados com frequência em turoriais e, normalmente, suprem todas as necessidades práticas. Os valores predefinidos podem ser vistos abaixo:

+ + + +

Definir flex: initial reseta os elementos para valores-padrão do Flexbox, sendo equivale a flex: 0 1 auto. Neste ultimo caso, o valor da propriedade flex-grow é 0, então os elementos não irão crescer mais do que o tamanho-base definido na propriedade flex-basis. o valor da propriedade flex-shrink é 1, indicando que o elemento pode ser reduzido caso seja necessário, para evitar que o limite do contêiner seja ultrapassado. Por fim, o valor da propriedade flex-basis é auto e assim será usad o tamanho mínimo necessário para preencher a dimensão do eixo principal.

+ +

Definir flex: auto é equivalente a flex: 1 1 auto. Essa configuração é semelhante a flex:initial, mas nesse caso os elementos podem aumentar para preencher o contêiner ou diminuir se necessário, para evitar o transbordamento lateral da tela.

+ +

Definir flex: none irá criar um elemento flex totalmente inflexível, sendo o equivalente a escrever flex: 0 0 auto. O elementos não poderão crescer ou diminuir, mas serão criados usando o flexbox com a propriedade flex-basis com o valor auto.

+ +

Outra abreviação normalmente vista em tutoriais é flex: 1 ou flex: 2 e assim por diante, o que equipara-se a flex: 1 1 0. Os elementos podem crescer ou diminuir a partir da propriedade flex-basis com valor nulo.

+ +

Teste essas formas abreviadas no exemplo prático abaixo:

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-shorthands.html", '100%', 510)}}

+ +

Alinhamento, justificação e distribuição de espaço livre   entre os elementos

+ +

Um atributo chave do flexbox é a capacidade de alinhar e justificar os elementos  flex nos eixos principal e transversal e distribuir o espaço entre eles.

+ +

Propriedade align-items

+ +

A propriedade {{cssxref("align-items")}} irá alinhar os elementos no eixo transversal.

+ +

O valor inicial desta propriedade é stretch e é por essa razão que, por padrão, os elementos flex se estendem até a maior altura. De fato, eles se esticam para preencher o contêiner flex - o item mais alto define a altura deste.

+ +

Pode-se definir a propriedade align-items como flex-start, de modo que os elementos fiquem alinhados com topo do contêiner, flex-end para alinhá-los a partir da base ou center, para que o alinhamento seja centralizado.

+ +

Teste essa propriedade e seus possíveis valores no exemplo prático abaixo — colocou-se uma determinada  altura no contêiner flex, de modo que se perceba como os elementos podem ser movidos no interior do mesmo. Veja o que acontece ao definir cada um dos possíveis valores da propriedade align-items:

+ + + +

{{EmbedGHLiveSample("css-examples/flexbox/basics/align-items.html", '100%', 520)}}

+ +

Propriedade justify-content

+ +

A propriedade {{cssxref("justify-content")}} é empregada para alinhar os elementos ao longo do eixo principal, cuja direção (row ou column) é definida a partir da propriedade flex-direction. O valor inicial é flex-start, que alinha os elementos rente à borda esquerda do contêiner, mas também pode ser definido como flex-end, que resulta em um alinhamento oposto, rente à borda direita do contêiner, ou center, para alinhá-los ao centro.

+ +

O valor space-between pode ser usado pode ser usado para ocupar todo o espaço livre após a disposição dos itens e dividí-lo igualmente entre os itens, para que haja a mesma quantidade de espaço entre cada elemento. Para gerar uma quantidade igual de espaço à direita e à esquerda, usa-se o valor space-around.

+ +

Tente os seguintes valores da propriedada justify-content no exemplo prático abaixo:

+ + + +

{{EmbedGHLiveSample("css-examples/flexbox/basics/justify-content.html", '100%', 380)}}

+ +

No artigo Alinhando Elementos em um Contêiner Flex (em inglês) tais propriedades serão abordadas mais detalhadamente, de modo a compreender melhor o seu funcionamento. Contudo, os exemplos simples abordados aqui serão úteis na maioria dos casos.

+ +

Próximos passos

+ +

Após ler este artigo, você deve ser capaz de compreender as características básicas do Flexbox. No próximo artigo, iremos examinar como essa especificação se relaciona com outras partes do CSS (em inglês). 

diff --git a/files/pt-br/web/css/css_flexible_box_layout/conceitos_basicos_do_flexbox/index.html b/files/pt-br/web/css/css_flexible_box_layout/conceitos_basicos_do_flexbox/index.html deleted file mode 100644 index 05318caa79..0000000000 --- a/files/pt-br/web/css/css_flexible_box_layout/conceitos_basicos_do_flexbox/index.html +++ /dev/null @@ -1,239 +0,0 @@ ---- -title: Conceitos básicos de flexbox -slug: Web/CSS/CSS_Flexible_Box_Layout/Conceitos_Basicos_do_Flexbox -tags: - - CSS - - Flex - - Tutorial - - conceitos - - conteiner - - eixos - - flexbox -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox ---- -
{{CSSRef}}
- -

O Flexible Box Module, geralmente chamado de flexbox, foi projetado tanto como um modelo de layout unidimensional quanto como um método capaz de organizar espacialmente os elementos em uma interface, além de possuir capacidades avançadas de alinhamento. Este artigo fornece um resumo das principais funcionalidades do flexbox, as quais exploraremos com mais detalhes no restante deste guia.

- -

Quando se descreve o flexbox como sendo unidimensional, enfatiza-se o fato de que ele lida com o layout em uma dimensão de cada vez - seja uma linha ou uma coluna. Isto pode ser comparado com o modelo bidimensional de CSS - Layout de Grade, que permite o controle simultâneo das colunas e linhas.

- -

Os eixos do flexbox

- -

Ao se utilizar o flexbox, é preciso ter em mente que todas as operações realizadas relacionam-se a dois eixos: o eixo principal e o eixo transversal. O eixo principal é definido através da propriedade flex-direction e o eixo transversal encontra-se na direção perpendicular a ele. Como esses eixos são as engrenagens fundamentais do flexbox é necessário compreender minuciosamente o seu funcionamento.

- -

Eixo principal

- -

Conforme descrito acima, a propriedade flex-direction define a direção do eixo principal e pode tem quatro valores possíveis:

- - - -

Se o valor escolhido for row (linha) ou row-reverse (linha reversa), seu eixo principal se moverá ao longo da linha — na direção inline.

- -

If flex-direction is set to row the main axis runs along the row in the inline direction.

- -

Se o valor escolhido for column (coluna) ou column-reverse (coluna reversa) e o eixo principal se moverá do topo até o fim da página — na direção block.

- -

If flex-direction is set to column the main axis runs in the block direction.

- -

Eixo transversal

- -

O eixo transversal é perpendicular ao eixo principal, logo, se a propriedade flex-direction estiver definida nas linhas, como row ou row-reverse, o eixo transversal estará na direção das colunas, como column ou column-reverse.

- -

If flex-direction is set to row then the cross axis runs in the block direction.

- -

Se o eixo principal for definido nas colunas, como column ou column-reverse, então o eixo transversal estará na direção das linhas, como row ou row-reverse.

- -

If flex-direction is set to column then the cross axis runs in the inline direction.

- -

Compreender a diferença entre os eixos principal e perpendicular é o que importa quando começamos a observar o alinhamento ou justificação dos itens flexíveis (flex items); o flexbox possui propriedades que alinham e justificam o conteúdo ao longo de um eixo ou de outro.

- -

Linhas de Início e Fim

- -

Outra área crítica em termos de compreensão é como o Flexbox não faz nenhuma premissa sobre o modo de escrita do documento. No passado, o CSS utilizava fortemente os modos de escrita horizontal e da esquerda para a direita. Métodos modernos de layout abrangem uma variedade de modos de escrita e, portanto, não assumimos mais que uma linha de texto começará no canto superior esquerdo do documento e sigará para o lado direito, com novas linhas aparecendo uma após a as outra.

- -

Essa discussão sobre a relação entre o flexbox e a especificação do modo de escrita será abordada um artigo posterior, contudo, a descrição a seguir explica brevemente porque não se fala sobre esquerda e direita/ acima e abaixo quando descreve-se a direção para a qual os elementos flex fluem.

- -

Se o valor da propriedade flex-direction for row (linha), considerando o estilo de escrita ocidental, a borda inicial do eixo principal estará localizada à esquerda e a borda final, à direita.

- -

Working in English the start edge is on the left.

- -

Considerando um idioma como o Árabe, que possui um estilo de escrita oriental, teremos o inverso: a borda inicia do eixo principal estará localizada à direita e a borda final, à esquerda.

- -

The start edge in a RTL language is on the right.

- -

Em ambos os casos, a borda inicial do eixo transversal está na parte superior do contêiner flex e a borda final, na parte inferior, visto que ambos os idiomas têm um estilo de de escrita horizontal.

- -

Após um tempo de prática, pensar em termos de início e final ao invés de esquerda e direita se tornará natural e será útil ao lidar com outros métodos de layout, como CSS Grid, que seguem os mesmos padrões.

- -

Contêiner Flex

- -

A área de um documento que faz uso do flexbox é chamada de contêiner flex. Para criar essa estrutura, define-se o valor da propriedade {{cssxref("display")}} do elemento representado pelo contêiner como flex ou inline-flex. Desse modo, os elementos-filhos desse contêiner tornar-se-ão do tipo flex. Como todas as propriedades no CSS possuem valores padrão, ao criar um contêiner flex, os elementos nele contidos apresentarão o seguinte comportamento:

- - - -

O resultado final é que todos os elementos serão alinhados em uma linha, usando o tamanho do conteúdo como o tamanho no eixo principal. Se houver mais itens do que é possível caber no container, não haverá uma quebra de linha; ao invés disso, irão ultrapassar o limite horizontal da página. Se alguns elementos forem mais altos que outros, todos os itens se estenderão ao longo do eixo transversal para preencher seu tamanho total.

- -

É possível conferir essas questões no exemplo prático abaixo. Tente editar ou adicionar mais itens para testar o comportamento inicial do Flexbox.

- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/the-flex-container.html", '100%', 480)}} 

- -

Propriedade flex-direction

- -

A propriedade {{cssxref("flex-direction")}} permite alterar a direção na qual os elementos flex serão exibidos ao longo do eixo principal. Definindo a propriedade flex-direction como row-reverse (linha reversa) ainda teremos os elementos dispostos em uma linha, entretanto, as linhas inicial e final serão trocadas.
-
- Se mudarmos a flex-direction para a column (coluna), o eixo principal exibirá os elemento em uma coluna. Trocando o valor para column-reverse (coluna reversa) fará com que as linhas inicial e final sejam novamente trocadas.
-
- No exemplo prático abaixo tem-se a propriedade flex-direction definida como row-reverse. Experimente os outros valores - row, column e column-reverse - para ver o que acontece com o conteúdo.
-
- {{EmbedGHLiveSample("css-examples/flexbox/basics/flex-direction.html", '100%', 350)}}

- -

Quebra de linha com "flex-wrap"

- -

Embora o flexbox seja um modelo unidimensional, é possível fazer com que elementos flex sejam agrupados em múltiplas linhas. Ao fazer isso, considera-se cada linha como um novo contêiner flex. Qualquer distribuição espacial ocorrerá ao longo essa linha, sem referência às linhas de ambos os lados. Para gerar a quebra automática das linhas adicione a propriedade {{cssxref("flex-wrap")}} com o valor wrap. Assim, se elementos forem muito grandes para serem exibidos em uma única linha, eles serão agrupados em outras linhas.

- -

O exemplo prático abaixo contém elementos flex aos quais foi dada uma determinada largura, cuja soma totaliza um valor grande demais para caber no container. Visto que a propriedade flex-wrap está definida como wrap, os itens serão reorganizados em mais de uma linha. Trocando-se para nowrap, que também é o valor inicial, eles encolherão para caber no contêiner, porque estão usando valores iniciais de flexbox que permitem que os itens encolham. O uso do nowrap causaria um vazamento se os itens não encolhessem ou não diminuíssem o suficiente para caber.

- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-wrap.html", '100%', 400)}}

- -

Saiba mais sobre o empacotamento de itens flexíveis no guia Masterização de Empacotamento de Itens Flexíveis (em Inglês).

- -

Propriedade abreviada flex-flow

- -

Pode-se combinar as propriedades flex-direction e flex-wrap de forma abreviada através da propriedade {{cssxref("flex-flow")}}. O primeiro valor especificado é o flex-direction e o segundo valor é o flex-wrap.

- -

No exemplo prático abaixo, tente alterar o primeiro valor para um dos valores permitidos para a propriedade flex-direction - row, row-reverse, column ou column-reverse, e também altere o segundo para wrap e nowrap.

- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-flow.html", '100%', 400)}}

- -

Expansão, encolhimento e tamanho dos elementos flex

- -

Para ter mais controle sobre os elementos flex é possível alterá-los diretamente utilizando as três propriedades abaixo:

- - - -

Na presente seção, examinar-se-á brevemente tais propriedades. Para se aprofundar neste conteúdo sugete-se o tutorial Taxas de Controle de Elementos Flex ao Longo do Eixo Principal (em inglês).

- -

Antes que essas propriedades possam fazer sentido, é preciso compreender o conceito de espaço disponível. Quando se modifica o valor das propriedades  acima, altera-se a forma que o espaço disponível é distribuído entre os elementos. Tal conceito de espaço disponível também é relevante quando se trata do alinhamento.

- -

Conforme o exemplo abaixo, se houver três elementos com 100 pixels de comprimento em um contêiner de 500 pixels, então o espaço total necessário para acomodá-los será de 300 pixels. Desse modo, sobrarão 200 pixels de espaço útil. Se os valores iniciais não forem modificados, então o flexbox posicionará esse espaço após o último item.

- -

This flex container has available space after laying out the items.

- -

Se for necessário que os elementos cresçam proprocionamente ou não e preencham o espaço disponível, deverá haver método que faça essa distribuição espacial entre eles, conforme será visto nas seções subsequentes.

- -

Propriedade flex-basis

- -

A propriedade flex-basis define o tamanho inicial dos elementos, em unidades de pixel, antes que o espaço remanescente seja redistribuído. O valor inicial desta propriedade é auto — neste caso o navegador observa se os itens possuem o mesmo tamanho. No exemplo acima, todos os itens têm uma largura de 100 pixels, que é utilizada como padrão na propriedade flex-basis.

- -

Se os elementos não possuírem um tamanho padrão, então as dimensões dos seus conteúdos (imagem, texto, etc) serão passadas como parâmetro para propriedade flex-basis. É por isso que quando escreve-se display: flex no elemento-pai para criar o contêiner, todos os elementos-filhos se organizam em linha e ocupam apenas o espaço necessário para exibir seu conteúdo.

- -

Propriedade flex-grow

- -

Com a propriedade flex-grow definida como um inteiro positivo, os elementos flex podem crescer ao longo do eixo principal, a partir do valor mínimo estabelecido no flex-basis. Isto fará com que o elemento se estique e ocupe qualquer espaço disponível nesse eixo ou uma proporção dele, caso outros elementos-irmãos também possam crescer.

- -

Atribuir o valor 1 à propriedade flex-grow fará com que o espaço disponível no contêiner flex seja igualmente distribuído entre todos os elementos do exemplo acima. Logo, os elementos-filhos irão se expandir para preencher o contêiner no sentido do eixo principal.

- -

Como visto no parágrafo anterior, a propriedade flex-grow pode ser empregada para distribuir o espaço proporcionalmente entre os elementos de um contêiner, contudo, se atribuirmos ao primeiro elemento o valor 2 parae 1 aos elementos restantes, duas partes serão dadas ao primeiro elemento (100px de 200px totais) e uma parte para cada um dos outros dois elementos (50px de 200px totais).

- -

Propriedade flex-shrink

- -

Enquanto a propriedade flex-grow permite aumentar a largura dos elementos dentro do contêiner para completar o espaço disponível no eixo principal, a propriedade flex-shrink faz o oposto, controlando a redução dos mesmos. Caso não haja espaço suficiente para acomodar todos os elementos e o valor da propriedade flex-shrink seja um inteiro positivo, a largura pode ser reduzida a um valor menor do que a definida na propriedade flex-basis. Assim como na propriedade flex-grow, diferentes valores podem ser atribuídos a um elemento de modo que ele encolha mais do que os outros - um elemento cuja propriedade flex-shrink receba um valor inteiro maior irá diminuir mais do que os seus irmão que tenham valores menores.

- -

O tamanho mínimo do elemento será levado em consideração ao se calcular a quantidade real de encolhimento que ocorrerá, o que significa que a propriedade flex-shrink se comporta de modo potencialmente menos consistente do que a propriedade flex-grow. Examinar-se-á mais detalhadamente o funcionamento desse algoritmo no artigo Taxas de Controle de Elementos Flex ao Longo do Eixo Principal.

- -
-

Note que os valores para as propriedades flex-grow e flex-shrink são proporcionais.  Particularmente, se tivermos todos os nossos elementos definidos como flex: 1 1 200px e então quisermos que um deles cresça o dobro, temos de definir o elemento como flex: 2 1 200px. Entretanto, podemos escrever flex: 10 1 200px e flex: 20 1 200px se quisermos.

-
- -

Abreviatura para os valores das propriedades flex

- -

As propriedades flex-grow, flex-shrink, and flex-basis raramente são empregas de forma individual. Usualmente, elas são combinadas através da propriedade de abreviação {{cssxref("flex")}}. A abreviatura flex permite definir os três valores na seguinte ordem: flex-grow, flex-shrink, flex-basis.

- -

O exemplo prático abaixo permite que sejam testados diferentes valores com a propriedade de abreviação flex; lembre-se que o primeiro campo corresponde à propriedade flex-grow, onde um valor inteiro e positivo faz-se o elemento crescer. O segundo campo é a propriedade flex-shrink e, ao contrário do anterior, um valor inteiro e positivo pode fazer os elementos encolherem, mas  somente se o seu comprimento total ultrapassar o limite horizontal do contêiner, no sentido do eixo principal. O último campo contém a propriedade flex-basis, que define o valor base, em unidades de pixel, para aumentar e diminuir o elemento quando da aplicação das propriedades anteriores.

- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-properties.html", '100%', 510)}}

- -

Há ainda alguns valores de abreviação predefinidos, que cobrem a maioria dos casos de uso. São aplicados com frequência em turoriais e, normalmente, suprem todas as necessidades práticas. Os valores predefinidos podem ser vistos abaixo:

- - - -

Definir flex: initial reseta os elementos para valores-padrão do Flexbox, sendo equivale a flex: 0 1 auto. Neste ultimo caso, o valor da propriedade flex-grow é 0, então os elementos não irão crescer mais do que o tamanho-base definido na propriedade flex-basis. o valor da propriedade flex-shrink é 1, indicando que o elemento pode ser reduzido caso seja necessário, para evitar que o limite do contêiner seja ultrapassado. Por fim, o valor da propriedade flex-basis é auto e assim será usad o tamanho mínimo necessário para preencher a dimensão do eixo principal.

- -

Definir flex: auto é equivalente a flex: 1 1 auto. Essa configuração é semelhante a flex:initial, mas nesse caso os elementos podem aumentar para preencher o contêiner ou diminuir se necessário, para evitar o transbordamento lateral da tela.

- -

Definir flex: none irá criar um elemento flex totalmente inflexível, sendo o equivalente a escrever flex: 0 0 auto. O elementos não poderão crescer ou diminuir, mas serão criados usando o flexbox com a propriedade flex-basis com o valor auto.

- -

Outra abreviação normalmente vista em tutoriais é flex: 1 ou flex: 2 e assim por diante, o que equipara-se a flex: 1 1 0. Os elementos podem crescer ou diminuir a partir da propriedade flex-basis com valor nulo.

- -

Teste essas formas abreviadas no exemplo prático abaixo:

- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-shorthands.html", '100%', 510)}}

- -

Alinhamento, justificação e distribuição de espaço livre   entre os elementos

- -

Um atributo chave do flexbox é a capacidade de alinhar e justificar os elementos  flex nos eixos principal e transversal e distribuir o espaço entre eles.

- -

Propriedade align-items

- -

A propriedade {{cssxref("align-items")}} irá alinhar os elementos no eixo transversal.

- -

O valor inicial desta propriedade é stretch e é por essa razão que, por padrão, os elementos flex se estendem até a maior altura. De fato, eles se esticam para preencher o contêiner flex - o item mais alto define a altura deste.

- -

Pode-se definir a propriedade align-items como flex-start, de modo que os elementos fiquem alinhados com topo do contêiner, flex-end para alinhá-los a partir da base ou center, para que o alinhamento seja centralizado.

- -

Teste essa propriedade e seus possíveis valores no exemplo prático abaixo — colocou-se uma determinada  altura no contêiner flex, de modo que se perceba como os elementos podem ser movidos no interior do mesmo. Veja o que acontece ao definir cada um dos possíveis valores da propriedade align-items:

- - - -

{{EmbedGHLiveSample("css-examples/flexbox/basics/align-items.html", '100%', 520)}}

- -

Propriedade justify-content

- -

A propriedade {{cssxref("justify-content")}} é empregada para alinhar os elementos ao longo do eixo principal, cuja direção (row ou column) é definida a partir da propriedade flex-direction. O valor inicial é flex-start, que alinha os elementos rente à borda esquerda do contêiner, mas também pode ser definido como flex-end, que resulta em um alinhamento oposto, rente à borda direita do contêiner, ou center, para alinhá-los ao centro.

- -

O valor space-between pode ser usado pode ser usado para ocupar todo o espaço livre após a disposição dos itens e dividí-lo igualmente entre os itens, para que haja a mesma quantidade de espaço entre cada elemento. Para gerar uma quantidade igual de espaço à direita e à esquerda, usa-se o valor space-around.

- -

Tente os seguintes valores da propriedada justify-content no exemplo prático abaixo:

- - - -

{{EmbedGHLiveSample("css-examples/flexbox/basics/justify-content.html", '100%', 380)}}

- -

No artigo Alinhando Elementos em um Contêiner Flex (em inglês) tais propriedades serão abordadas mais detalhadamente, de modo a compreender melhor o seu funcionamento. Contudo, os exemplos simples abordados aqui serão úteis na maioria dos casos.

- -

Próximos passos

- -

Após ler este artigo, você deve ser capaz de compreender as características básicas do Flexbox. No próximo artigo, iremos examinar como essa especificação se relaciona com outras partes do CSS (em inglês). 

diff --git a/files/pt-br/web/css/css_images/implementando_sprites_de_imagens_em_css/index.html b/files/pt-br/web/css/css_images/implementando_sprites_de_imagens_em_css/index.html deleted file mode 100644 index e14ba15c2d..0000000000 --- a/files/pt-br/web/css/css_images/implementando_sprites_de_imagens_em_css/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: Implementando sprites de imagens em CSS -slug: Web/CSS/CSS_Images/Implementando_sprites_de_imagens_em_CSS -translation_of: Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS ---- -
{{cssRef}}
- -

Sprites de imagens são utilizados em diversas aplicações web onde várias imagens são usadas. Ao invés de incluir cada arquivo de imagem separadamente, é mais amigável com a memória e largura de banda enviar tudo como uma única imagem, diminuindo o número de pedidos em HTTP.

- -
-

Nota: Quando usando HTTP/2, é mais amigável com a largura de banda usar vários pequenos pedidos.

-
- -

Implementação

- -

Suponha que uma imagem é dada a cada item com a classe toolbtn:

- -
.toolbtn {
-  background: url(myfile.png);
-  display: inline-block;
-  height: 20px;
-  width: 20px;
-}
- -

A posição do plano de fundo pode ser adicionada tanto com dois valores x, y depois de {{cssxref("url()")}} em background , ou como {{cssxref("background-position")}} . Por exemplo:

- -
#btn1 {
-  background-position: -20px 0px;
-}
-
-#btn2 {
-  background-position: -40px 0px;
-}
- -

Isso vai mover o elemento com a ID 'btn1' 20 pixels para a esquerda e o elemento com a ID 'btn2' 40 pixels para a esquerda (presumindo que ambos tem a classe toolbtn atribuída e estão sendo afetados pela regra da imagem acima).

- -

De forma similar, você pode criar um efeito de hover com:

- -
#btn:hover {
-  background-position: <pixels para direita>px <pixels para baixo>px;
-}
- -

Veja também

- - diff --git a/files/pt-br/web/css/css_images/implementing_image_sprites_in_css/index.html b/files/pt-br/web/css/css_images/implementing_image_sprites_in_css/index.html new file mode 100644 index 0000000000..e14ba15c2d --- /dev/null +++ b/files/pt-br/web/css/css_images/implementing_image_sprites_in_css/index.html @@ -0,0 +1,47 @@ +--- +title: Implementando sprites de imagens em CSS +slug: Web/CSS/CSS_Images/Implementando_sprites_de_imagens_em_CSS +translation_of: Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS +--- +
{{cssRef}}
+ +

Sprites de imagens são utilizados em diversas aplicações web onde várias imagens são usadas. Ao invés de incluir cada arquivo de imagem separadamente, é mais amigável com a memória e largura de banda enviar tudo como uma única imagem, diminuindo o número de pedidos em HTTP.

+ +
+

Nota: Quando usando HTTP/2, é mais amigável com a largura de banda usar vários pequenos pedidos.

+
+ +

Implementação

+ +

Suponha que uma imagem é dada a cada item com a classe toolbtn:

+ +
.toolbtn {
+  background: url(myfile.png);
+  display: inline-block;
+  height: 20px;
+  width: 20px;
+}
+ +

A posição do plano de fundo pode ser adicionada tanto com dois valores x, y depois de {{cssxref("url()")}} em background , ou como {{cssxref("background-position")}} . Por exemplo:

+ +
#btn1 {
+  background-position: -20px 0px;
+}
+
+#btn2 {
+  background-position: -40px 0px;
+}
+ +

Isso vai mover o elemento com a ID 'btn1' 20 pixels para a esquerda e o elemento com a ID 'btn2' 40 pixels para a esquerda (presumindo que ambos tem a classe toolbtn atribuída e estão sendo afetados pela regra da imagem acima).

+ +

De forma similar, você pode criar um efeito de hover com:

+ +
#btn:hover {
+  background-position: <pixels para direita>px <pixels para baixo>px;
+}
+ +

Veja também

+ + diff --git a/files/pt-br/web/css/css_positioning/understanding_z_index/index.html b/files/pt-br/web/css/css_positioning/understanding_z_index/index.html new file mode 100644 index 0000000000..488ca0f600 --- /dev/null +++ b/files/pt-br/web/css/css_positioning/understanding_z_index/index.html @@ -0,0 +1,48 @@ +--- +title: Understanding CSS z-index +slug: Web/Guide/CSS/Understanding_z_index +tags: + - CSS + - Entendendo_CSS_z-index + - Guía + - Web + - z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index +--- +

Normalmente páginas HTML podem ser consideradas bi-dimensionais, pois texto, imagens e outros elementos podem ser dispostos na página sem sobreposição. Há apenas um fluxo de renderização e todos os elementos sabem do espaço ocupado por outros. O atributo {{cssxref("z-index")}} lhe permite ajustar a ordem de sobreposição dos objetos ao renderizar o conteúdo.

+ +
+

Em CSS 2.1, cada caixa tem uma posição nas três dimensões. Em adição às suas posições na horizontal e vertical, caixas ficam no "eixo-z" e são formatadas uma em cima da outra. Posições no Eixo-Z são particularmente relevantes quando caixas se sobrepõem visualmente.

+
+ +

(from CSS 2.1 Section 9.9.1 - Layered presentation)

+ +

Isso significa que as regras de CSS te permitem posicionar caixas em camadas em adição ao render normal da camada (level 0). A posição Z de cada camada é expressa como um inteiro representando a ordem da pilha para renderização. Números maiores significam que são mais próximos do observador. A posição Z pode ser controlada pela propriedade CSS {{ cssxref("z-index")}}.

+ +

Usar z-index aparenta ser extremamente fácil: uma única propriedade, endereçada a um único número inteiro, com um comportamento fácil-de-entender. No entanto, quando o z-index é aplicado para a hierarquia complexa dos elementos de HTML, seu comportamento pode ser difícil de entender ou até imprevisível. Isso é devido às complexas regras de stacking. Uma sessão dedicada foi  reservada na especificação do CSS  CSS-2.1 Appendix E para explicar melhor essas regras.

+ +

Esse artigo tentará explicar essas regras, com algumas simplificações e vários exemplos.

+ +
    +
  1. Stacking without z-index : Regras padrões de empilhamento
    2. +
  2. Stacking and float : Como lidar com elementos que usam float
    3. +
  3. Adding z-index : Usando index-z para mudar o empilhamento padrão
    4. +
  4. The stacking context : Notas sobre contexto do empilhamento
    5. +
  5. Stacking context example 1 : 2-level HTML hierarquia, z-index no último level
    6. +
  6. Stacking context example 2 : 2-level HTML hierarquia, z-index em todos os levels
    7. +
  7. Stacking context example 3 : 3-level HTML hierarquia, z-index no segundo level
    8. +
+ +

Note of the author: Thanks to Wladimir Palant and Rod Whiteley for the review.

+ +
+

Original Document Information

+ + +
+ +

 

diff --git a/files/pt-br/web/css/css_reference/index.html b/files/pt-br/web/css/css_reference/index.html deleted file mode 100644 index 1afbf4890e..0000000000 --- a/files/pt-br/web/css/css_reference/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: Referência de CSS -slug: Web/CSS/CSS_Reference -translation_of: Web/CSS/Reference ---- -{{CSSRef}} - -

Use esta referência de CSS para navegar por um índice alfabético das propriedades padrão do CSS, pseudo-classes, pseudo-elementos, tipos de dados e @-rules.

- -

Esta referência lista não somente as propriedades do CSS1 e CSS2.1, mas também referências para qualquer propriedade, conceito padronizado ou estabilizado do CSS3.

- -

Veja também Extensões CSS Mozilla para propriedades específicas do Gecko prefixadas com -moz e Extensões CSS do WebKit para propriedades específicas do WebKit. Veja Visão geral de propriedades CSS prefixadas por distribuidor por Peter Beverloo para todas as propriedades prefixadas.

- -

{{ CSS_Ref() }}

- -

Seletores

- - - -

Miscelânea

- - - -

Conceitos

- - diff --git a/files/pt-br/web/css/css_selectors/index.html b/files/pt-br/web/css/css_selectors/index.html new file mode 100644 index 0000000000..644d9d87e9 --- /dev/null +++ b/files/pt-br/web/css/css_selectors/index.html @@ -0,0 +1,150 @@ +--- +title: Seletores CSS +slug: Web/CSS/Seletores_CSS +tags: + - CSS + - Referência(2) + - Seletores + - Seletores CSS +translation_of: Web/CSS/CSS_Selectors +--- +
{{CSSRef}}
+ +

Os Seletores definem quais elementos um conjunto de regras CSS se aplica.

+ +

Seletores Básicos

+ +
+
Seletor por tag
+
Este seletor básico escolhe todos os elementos que correspondem ao nome fornecido.
+ Sintaxe: nome-da-tag
+ Exemplo: input corresponderá a qualquer elemento {{HTMLElement('input')}}.
+
Seletor por classe
+
Este seletor básico escolhe elementos baseados no valor de seu atributo classe. Sintaxe: .nome-da-classe
+ Examplo: .index irá corresponder a qualquer elemento que tenha o índice de classe (provavelmente definido por um atributo class="index", ou similar).
+
Seletor por ID
+
Este seletor básico escolhe nós baseados no valor do atributo id. Deve existir apenas um elemento com o mesmo ID no mesmo documento.
+ Sintaxe: #nome-do-id
+ Exemplo: #toc irá corresponder ao elemento que possuir o id=toc (definido por um atributo id="toc", ou similar).
+
Seletores universais
+
Este seletor básico irá escolher todos os nós. Ele também existe em um namespace único e em uma variante de todo o namespace também.
+ Sintaxe: * ns|* *|*
+ Exemplo: * irá corresponder a todos os elementos do documento.
+
Seletores por atributo
+
Este seletor básico ira escolher nós baseados no valor de um de seus atributos, ou até mesmo pelo próprio atributo.
+ Sintaxe: [atrib] [atrib=valor] [atrib~=valor] [atrib|=valor] [atrib^=valor] [atrib$=valor] [atrib*=valor]
+ Exemplo: [autoplay] irá corresponder a todos os elementos que possuirem o atributo autoplay (para qualquer valor).
+
+ +

Combinadores

+ +
+
Seletores de irmãos adjacentes
+
O combinador + seleciona os nós que seguem imediatamente o elemento especificado anteriormente.
+ Sintaxe: A + B
+ Exemplo: ul + li irá corresponder a qualquer elemento {{HTMLElement('li')}} que segue imediatamente após um elemento {{HTMLElement('ul')}}.
+
Seletores gerais de irmãos
+
O combinador ~ seleciona os nós que seguem (não necessariamente imediatamente) o elemento especificado anteriormente, se ambos os elementos compartilham o mesmo pai.
+ Sintaxe: A ~ B
+ Exemplo: p ~ span irá corresponder a todo elemento {{HTMLElement('span')}} que seguir um elemento {{HTMLElement('p')}} dentro de um mesmo elemento pai.
+
Seletor de filhos
+
O combinador > selecina nós que são filhos diretos do elemento especificado anteriormente.
+ Sintaxe: A > B
+ Exemplo: ul > li irá corresponder a todo elemento {{HTMLElement('li')}} que estiver diretamente dentro de um elemento {{HTMLElement('ul')}} especificado.
+
Seletor de descendentes
+
O combinador   seleciona os nós que são filhos do elemento especificado anteriormente (não é necessário que seja um filho direto).
+ Sintaxe: A B
+ Exemplo: div span irá corresponder a todo e qualquer elemento {{HTMLElement('span')}} que estiver dentro do elemento {{HTMLElement('div')}}.
+
+ +

Pseudo-classes

+ +

Pseudo-classes permitem selecionar elementos baseados em informações que não estão contidas na árvore de documentos como um estado ou que é particularmente complexa de extrair. Por exemplo, eles correspondem se um link foi visitado anteriormente ou não.

+ +

Pseudo-elementos

+ +

Pseudo-elementos são asbtrações da árvore que representam entidades além do que o HTML faz. Por exemplo, o HTML não tem um elemento que descreva a primeira letra ou linha de um parágrafo, ou o marcador de uma lista. Os pseudo-elementos representam essas entidades e permitem que as regras CSS sejam associadas a elas. Desta forma, essas entidades podem ser denominadas independentemente.

+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName('CSS4 Selectors')}}{{Spec2('CSS4 Selectors')}} 
{{SpecName('CSS3 Selectors')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Definição inicial
+ +

Compatibilidade de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
RecursoChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico1{{CompatGeckoDesktop("1")}}3.03.51.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
RecursoAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico1.5{{CompatGeckoMobile("1.9.2")}}{{CompatUnknown}}{{CompatUnknown}}3.2
+
diff --git a/files/pt-br/web/css/css_tipos/index.html b/files/pt-br/web/css/css_tipos/index.html deleted file mode 100644 index 79256061ae..0000000000 --- a/files/pt-br/web/css/css_tipos/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: Tipos básicos de dados CSS -slug: Web/CSS/CSS_Tipos -tags: - - CSS - - CSS tipos de dados - - Referencia - - Visão Geral -translation_of: Web/CSS/CSS_Types ---- -
{{CssRef}}
- -

Tipos básicos de dados CSS definem valores típicos (incluindo palavras chaves e unidades) aceitos pelas propriedades e funções do CSS. Eles são um tipo especial de tipo de valor do componente.
-
- Na sintaxe formal, os tipos de dados são indicados pela palavra chave aplicada entre os sinais de desigualdade "<" e ">".

- -

Referência

- -
- -
- -

Especificações

- - - - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{ SpecName('CSS3 Values') }}{{ Spec2('CSS3 Values') }}Definição inicial.
diff --git a/files/pt-br/web/css/css_types/index.html b/files/pt-br/web/css/css_types/index.html new file mode 100644 index 0000000000..79256061ae --- /dev/null +++ b/files/pt-br/web/css/css_types/index.html @@ -0,0 +1,64 @@ +--- +title: Tipos básicos de dados CSS +slug: Web/CSS/CSS_Tipos +tags: + - CSS + - CSS tipos de dados + - Referencia + - Visão Geral +translation_of: Web/CSS/CSS_Types +--- +
{{CssRef}}
+ +

Tipos básicos de dados CSS definem valores típicos (incluindo palavras chaves e unidades) aceitos pelas propriedades e funções do CSS. Eles são um tipo especial de tipo de valor do componente.
+
+ Na sintaxe formal, os tipos de dados são indicados pela palavra chave aplicada entre os sinais de desigualdade "<" e ">".

+ +

Referência

+ +
+ +
+ +

Especificações

+ + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{ SpecName('CSS3 Values') }}{{ Spec2('CSS3 Values') }}Definição inicial.
diff --git a/files/pt-br/web/css/elemento_substituido/index.html b/files/pt-br/web/css/elemento_substituido/index.html deleted file mode 100644 index 22ba1b8ad0..0000000000 --- a/files/pt-br/web/css/elemento_substituido/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: Elemento substituído -slug: Web/CSS/Elemento_substituido -translation_of: Web/CSS/Replaced_element ---- -
{{CSSRef()}}
- -

Sumario

- -

In CSS, a replaced element is an element whose representation is outside the scope of CSS. These are a type of external object whose representation is independent of the CSS. Typical replaced elements are:

- - - -

Some elements are treated as replaced elements only in specific cases:

- - - -

The only form control that is also a replaced element is {{HTMLElement("input")}} of the image type. All other form controls are non-replaced elements.

- -

Objects inserted using the CSS {{cssxref("content")}} properties are anonymous replaced elements.

- -

CSS handles replaced elements specifically in some cases, like when calculating margins and some auto values.

- -

Note that some replaced elements, but not all, have intrinsic dimensions or a defined baseline, which is used by some CSS properties like {{cssxref("vertical-align")}}.

- -

Veja também

- - diff --git a/files/pt-br/web/css/getting_started/cascading_and_inheritance/index.html b/files/pt-br/web/css/getting_started/cascading_and_inheritance/index.html deleted file mode 100644 index 7880e00f6d..0000000000 --- a/files/pt-br/web/css/getting_started/cascading_and_inheritance/index.html +++ /dev/null @@ -1,128 +0,0 @@ ---- -title: Cascata e herança -slug: Web/CSS/Getting_Started/Cascading_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 ---- -

{{ 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/web/css/getting_started/como_css_funciona/index.html b/files/pt-br/web/css/getting_started/como_css_funciona/index.html deleted file mode 100644 index 2ead5ccae7..0000000000 --- a/files/pt-br/web/css/getting_started/como_css_funciona/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: Como o CSS funciona -slug: Web/CSS/Getting_Started/Como_CSS_funciona -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 ---- -

{{ 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/web/css/getting_started/index.html b/files/pt-br/web/css/getting_started/index.html deleted file mode 100644 index 389962ab07..0000000000 --- a/files/pt-br/web/css/getting_started/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: Iniciando com o CSS -slug: Web/CSS/Getting_Started -tags: - - CSS - - Guia(2) - - Guía - - Iniciante - - Web -translation_of: Learn/CSS/First_steps -translation_of_original: Web/Guide/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/web/css/getting_started/javascript/index.html b/files/pt-br/web/css/getting_started/javascript/index.html deleted file mode 100644 index 544deb8960..0000000000 --- a/files/pt-br/web/css/getting_started/javascript/index.html +++ /dev/null @@ -1,140 +0,0 @@ ---- -title: JavaScript e CSS -slug: Web/CSS/Getting_Started/JavaScript -translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents -translation_of_original: Web/Guide/CSS/Getting_started/JavaScript ---- -

{{ CSSTutorialTOC() }}

-

Esta é a pirmeira sessão da Parte II do Tutorial de CSS. A parte II consém alguns exemplos que mostram o escopo do CSS usado com outras tecnologias web e Mozilla.

-

Cada página da Parte II ilustra como o CSS interagem com outras tecnologias. Essas páginas não destinam-se a ensiná-lo como usar outras tecnologias. Para aprender sobre elas com detalhes, vá para os outros tutoriais.

-

Em vez disso, estas páginas são usadas para ilustrar os diversos usos do CSS. Para usar estas páginas, você deve ter algum conhecimento de CSS, mas você não precisa de nenhum conhecimento de outras tecnologias.

-

Sessão Anterior (da Parte I): Media
- Próxima sessão: SVG

-

Informação: JavaScript

-

JavaScript é um programming language. JavaScript é largamente utilizado para pronmover interatividade em web sites e aplicações.

-

JavaScript pode interagir com stylesheets, permitindo a você criar programas que mudam o eastilo de um documento de forma dinâmica

-

Há três formas de fazer isso:

- - - - - - - - -
- Mais detalhes
Para mais informações sobre JavaScript, veja a página JavaScript nesta wiki.
-

Ação: Uma demonstração de  JavaScript

-

Faça um novo documento em HTML, doc5.html. Copie e cole o conteúdo daqui, tenha certeza de rolar para copiar todo o código:

-
- 
<!DOCTYPE html>
-<html>
-
-<head>
-<title>Mozilla CSS Getting Started - JavaScript demonstration</title>
-<link rel="stylesheet" type="text/css" href="style5.css" />
-<script type="text/javascript" src="script5.js"></script>
-</head>
-
-<body>
-<h1>JavaScript sample</h1>
-
-<div id="square"></div>
-
-<button type="button" onclick="doDemo(this);">Click Me</button>
-
-</body>
-</html>
-
-
-

Crie um novo arquivo  CSS, style5.css. Copie e cole o conteúdo daqui:

-
- 
/*** JavaScript demonstration ***/
-#square {
-  width: 20em;
-  height: 20em;
-  border: 2px inset gray;
-  margin-bottom: 1em;
-}
-
-button {
-  padding: .5em 2em;
-}
-
-
-

Crie um novo arquivo de texto, script5.js. Coie e cole o conteúdo daqui:

-
- 
// JavaScript demonstration
-function doDemo (button) {
-  var square = document.getElementById("square");
-  square.style.backgroundColor = "#fa4";
-  button.setAttribute("disabled", "true");
-  setTimeout(clearDemo, 2000, button);
-}
-
-function clearDemo (button) {
-  var square = document.getElementById("square");
-  square.style.backgroundColor = "transparent";
-  button.removeAttribute("disabled");
-}
-
-
-

Abra o documento no seu Browser e pressione o botão.

-

Esta wiki não suporta JavaScript nas páginas, então não é possível mostrar uma demonstração aqui. parece algo assim, antes e depois de você pressionar o botão:

- - - - - - - -
- - - - - - -
-

JavaScript demonstration

-
- 		- - - - - - -
-

JavaScript demonstration

-
-
-
- Notas importantes sobre esta demonstração: - -
- - - - - - - -
- Desafio
-

Mude o script e então o square salta para a direita em 20 em quando muda as cores, e salta de volta depois.

-
-

Veja a solução deste desafio.

-

O que vem agora?

-

Se você teve dificuldade para entender esta página, ou se tem algum coment[ario sobre, por favor, contribua nesta página de Discussão.

-

Nesta deminstração, o arquivo HTML linca o the script apesar do botão de elementos usar script. Mozilla extende CSS então consegue lincar o código JavaScript (e também conteúdo e outras stylesheets) para selecionar elementos. A próxima página demonstra isso: XBL bindings

diff --git a/files/pt-br/web/css/getting_started/lists/index.html b/files/pt-br/web/css/getting_started/lists/index.html deleted file mode 100644 index 72dc8dc227..0000000000 --- a/files/pt-br/web/css/getting_started/lists/index.html +++ /dev/null @@ -1,272 +0,0 @@ ---- -title: Manipulando Listas -slug: Web/CSS/Getting_Started/Lists -translation_of: Learn/CSS/Styling_text/Styling_lists -translation_of_original: Web/Guide/CSS/Getting_started/Lists ---- -

{{ CSSTutorialTOC() }}

- -

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Content", "Content") }}

- -

Este é o 10º seção do CSS Introdução tutorial; ele descreve como você pode usar CSS para especificar o aparecimento de listas. Você cria um novo documento de amostra contendo listas, e um novo estilo que os estilos das listas.

- -

Informação: Lists

- -

Se você aceitou o desafio na última seção, em seguida, você viu como você pode adicionar conteúdo antes de qualquer elemento para exibi-lo como um item da lista.

- -

CSS proporciona propriedades especiais que são projetados para listas. Geralmente é mais conveniente usar estas propriedades sempre que puder.

- -

Para especificar o estilo para uma lista, use o {{cssxref ("list-style")}} propriedade para especificar o tipo de marcador.

- -

O seletor na sua regra de CSS pode selecionar os elementos de item de lista (por exemplo, {{HTMLElement ("li")}}), ou pode selecionar o elemento primário da lista (por exemplo, {{HTMLElement ("ul")}}) de modo a que os elementos da lista herdam o modelo.

- -

Listas não ordenadas

- -

Em uma lista desordenada, cada item da lista é marcado da mesma forma.

- -

CSS tem três tipos de marcadores, e aqui está como seu navegador exibe-os:

- - - -

        none

- -

Alternativamente, você pode especificar o URL de uma imagem.

- -
-
Exemplo
- -

Essas regras especificam diferentes marcadores para diferentes classes de item da lista:

- -
li.open {list-style: circle;} 
-li.closed {list-style: disc;}
-
- -

Quando estas classes são usadas em uma lista, que distinguir entre os itens abertos e fechados (por exemplo, em uma lista de tarefas):

- -
<ul> 
-  <li class="open"> Lorem ipsum </ li> 
-  <li class="closed"> dolor sit </ li>
-  <li class="closed"> Amet consectetuer </ li>
-  <li class="open"> Magna aliquam </ li>
-  <li class="closed"> Autem veleum </ li>
-</ ul>
-
- -

O resultado pode parecer:

- -

{{EmbedLiveSample ('Listas_não_ordenadas', '', '', '')}}

-
- -

Listas ordenadas

- -

Em uma listaordenada , cada item da lista é marcado diferentemente para mostrar a sua posição na sequência.

- -

Use a propriedade {{cssxref ("list-style")}} para especificar o tipo de marcador:

- - - -
-
Exemplo
- -

Esta regra especifica que em {{HTMLElement ("OL")}} elementos com a classe informações, os itens são identificados com letras maiúsculas.

- -
<ol class="info">
-  <li>Lorem ipsum</li>
-  <li>Dolor sit</li>
-  <li>Amet consectetuer</li>
-  <li>Magna aliquam</li>
-  <li>Autem veleum</li>
-</ol>
- -
ol.info {list-style: upper-latin;}
-
- -

O {{HTMLElement ("LI")}} elementos da lista herdam esse estilo:

- -

{{EmbedLiveSample ('Listas_ordenadas', '', '', '')}}

-
- -
-
Mais detalhes
- -

O {{cssxref ("list-style")}} propriedade é uma propriedade taquigrafia. Em folhas de estilo complexas você pode preferir usar propriedades separadas para definir valores separados. Para obter links para essas propriedades separadas, e mais detalhes de como CSS especifica listas, consulte o {{cssxref ("list-style")}} página de referência.

- -

Se você estiver usando uma linguagem de marcação como HTML que fornece etiquetas convencionais para não-ordenada ({{HTMLElement ("ul")}}) e ordenou ({{HTMLElement ("ol")}}) listas, então é uma boa prática para usar as marcas na forma como eles se destinam. No entanto, você pode usar CSS para fazer {{HTMLElement ("ul")}} exibição ordenada e {{HTMLElement ("ol")}} visualização não ordenada, se desejar.

- -

Browsers diferem na maneira de implementar os estilos para listas. Não espere que sua folha de estilo dê resultados idênticos em todos os navegadores.

-
- -

Contadores

- -
-

Nota:  Alguns navegadores não suportam contadores. O conteúdo CSS e compatibilidade do navegador página no site de modo Quirks contém um gráfico detalhado de compatibilidade do navegador para este e outros recursos CSS. Páginas individuais na referência CSS neste local também têm tabelas de compatibilidade do navegador.

-
- -

Você pode usar contadores para numerar quaisquer elementos, não somente itens da lista. Por exemplo, em alguns documentos você pode querer numerar cabeçalhos ou parágrafos.

- -

Para especificar a numeração, você precisa de um contador com um nome que você especificar.

- -

Em alguns elementos antes da contagem é começar, reinicie o contador com a propriedade {{cssxref ("counter-reset")}} eo nome do seu contador. O pai dos elementos que você estiver contando é um bom lugar para fazer isso, mas você pode usar qualquer elemento que vem antes os itens da lista.

- -

Em cada elemento que o contador é incrementado, use a propriedade {{cssxref ("contra-incremento")}} eo nome do seu contador.

- -

Para mostrar seu contador, adicione {{cssxref (":: before")}} ou {{cssxref (":: after")}} para o selector e usar o conteúdo da propriedade (como você fez na página anterior, Conteúdo) .

- -

No valor do conteúdo de propriedade, especifique counter () com o nome de seu contador. Opcionalmente especifique um tipo. Os tipos são os mesmos que na lista ordenada secção acima.

- -

Normalmente, o elemento que apresenta o contador também incrementa-lo.

- -
-
Exemplo
- -

Esta regra inicializa um contador para cada {{HTMLElement ("h3")}} elemento com a classe numeradas:

- -
h3.numbered {counter-reset: mynum;}
-
- -

 

- -

Esta regra mostra e incrementa o contador para cada {{HTMLElement ("p")}} elemento com a classe numeradas:

- -
<p class = "numbered"> Lorem ipsum </ p>
-<p class = "numbered"> dolor sit </ p>
-<p class = "numbered"> Amet consectetuer </ p>
-<p class = "numbered"> Magna aliquam </ p>
-<p class = "numbered"> Autem veleum </ p>
-
- -
body 
-   {counter-reset: 
-mynum;} 
-p.numbered:before
-  {content: counter(mynum) ": ";
-  counter-increment: mynum;
-  font-weight: bold;}
-
- -

O resultado se parece com isso:

- -

{{ EmbedLiveSample("Contadores", '300', '200', '') }}

-
- -
-
Mais detalhes
- -

Você não pode usar os contadores a menos que você sabe que todo mundo que lê o documento tem um navegador que os suporta.

- -

Se você é capaz de usar contadores, eles têm a vantagem de que você pode estilizar os contadores separadamente dos itens da lista. No exemplo acima, os contadores estão em negrito mas os itens da lista não são.

- -

Você também pode usar contadores em formas mais complexas, por exemplo, para numerar seções, títulos, subtítulos e parágrafos em documentos formais. Para mais detalhes, consulte contadores automáticos e numeração em CSS Specification.

-
- -

Listas denominadas: Ação

- -

Crie um novo documento HTML, doc2.html. Copie e cole o conteúdo daqui:

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8">
-    <title>Sample document 2</title>
-    <link rel="stylesheet" href="style2.css">
-  </head>
-  <body>
-
-    <h3 id="oceans">The oceans</h3>
-    <ul>
-      <li>Arctic</li>
-      <li>Atlantic</li>
-      <li>Pacific</li>
-      <li>Indian</li>
-      <li>Southern</li>
-    </ul>
-
-    <h3 class="numbered">Numbered paragraphs</h3>
-    <p class="numbered">Lorem ipsum</p>
-    <p class="numbered">Dolor sit</p>
-    <p class="numbered">Amet consectetuer</p>
-    <p class="numbered">Magna aliquam</p>
-    <p class="numbered">Autem veleum</p>
-
-  </body>
-</html>
-
-
- -

Faça uma nova folha de estilo, style2.css. Copie e cole o conteúdo daqui:

- -
/* numbered paragraphs */
-h3.numbered {counter-reset: mynum;}
-
-p.numbered:before {
-  content: counter(mynum) ": ";
-  counter-increment: mynum;
-  font-weight: bold;
-}
-
- -

Se o layout e comentário não são a seu gosto, alterá-los.

- -

Abra o documento no seu browser. Se o seu navegador suporta contadores, você verá algo parecido com o exemplo abaixo. Se seu navegador não suporta contadores, então você não ver os números (e provavelmente nem mesmo os dois pontos):

- -

{{EmbedLiveSample ('Listas_denominadas_Ação', '300', '400', '')}}

- -
-
Desafios
- -

Adicione uma regra à sua folha de estilo, para numerar os oceanos usando numerais romanos de I a V:

- - - - - - - -
-

The oceans

- -
    -
  • Arctic
    • -
  • Atlantic
    • -
  • Pacific
    • -
  • Indian
    • -
  • Southern
    • -
-
- -

 

- -

Mude sua folha de estilo para identificar os títulos com letras maiúsculas em parênteses como este:

- - - - - - - -
-

(A) The oceans

- -

. . .

- -

(B) Numbered paragraphs

- -

. . .

-
-
- -

Ver soluções para esses desafios.

- -

Qual o proximo?

- -

{{NextPage ("/ en-US / docs / Web / Guia / CSS / Getting_Started / Boxes", "caixas")}} Quando seu navegador exibe seu documento de amostra, ele cria espaço ao redor dos elementos quando ele coloca-los na página. A próxima página descreve como você pode usar CSS para trabalhar com as formas subjacentes de elementos, caixas.

diff --git a/files/pt-br/web/css/getting_started/oque_é_css/index.html b/files/pt-br/web/css/getting_started/oque_é_css/index.html deleted file mode 100644 index 1ccc04f0ce..0000000000 --- a/files/pt-br/web/css/getting_started/oque_é_css/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: O que é CSS -slug: Web/CSS/Getting_Started/Oque_é_CSS -translation_of: Learn/CSS/First_steps/How_CSS_works -translation_of_original: Web/Guide/CSS/Getting_started/What_is_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
- - -
- -

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/web/css/getting_started/porque_usar_css/index.html b/files/pt-br/web/css/getting_started/porque_usar_css/index.html deleted file mode 100644 index 453aa4c966..0000000000 --- a/files/pt-br/web/css/getting_started/porque_usar_css/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: Por que usar CSS? -slug: Web/CSS/Getting_Started/Porque_usar_CSS -translation_of: Learn/CSS/First_steps/How_CSS_works -translation_of_original: Web/Guide/CSS/Getting_started/Why_use_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/web/css/getting_started/seletores/index.html b/files/pt-br/web/css/getting_started/seletores/index.html deleted file mode 100644 index 3870c68936..0000000000 --- a/files/pt-br/web/css/getting_started/seletores/index.html +++ /dev/null @@ -1,430 +0,0 @@ ---- -title: Seletores -slug: Web/CSS/Getting_Started/Seletores -translation_of: Learn/CSS/Building_blocks/Selectors -translation_of_original: Web/Guide/CSS/Getting_started/Selectors ---- -

{{ 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/web/css/hifens/index.html b/files/pt-br/web/css/hifens/index.html deleted file mode 100644 index c8e718562f..0000000000 --- a/files/pt-br/web/css/hifens/index.html +++ /dev/null @@ -1,902 +0,0 @@ ---- -title: hifens -slug: Web/CSS/hifens -translation_of: Web/CSS/hyphens ---- -
{{CSSRef}}
- -
A propriedade CSS  hyphens especifica como palavras devem ser hifenizadas quando o há quebra de texto em múltiplas linhas. Você pode prevenir a hifenização completamente, especificar pontos manualmente, ou permitir que o navegador insira automaticamente quando apropriado.
- -
 
- -
hyphens: none;
-hyphens: manual;
-hyphens: auto;
-
-/* Valores globais */
-hyphens: inherit;
-hyphens: initial;
-hyphens: unset;
-
- -

Regras de hifenização são específicas para cada idioma. Em HTML, o idioma é determinado pelo atributo lang, e os navegadores irão utilizar hífen apenas caso este atributo esteja presente e se houver um dicionário de hifenização disponível. Em XML, deve ser usado o atributo xml:lang.

- -
-

Nota: As regras que definem como a hifenização é realizada não são explicitamente definidas pela especificação, então a hifenização exata pode variar de navegador para navegador.

-
- -

{{cssinfo}}

- -

Sintaxe

- -

A propriedade hyphens é especificada como uma única palavra-chave escolhida da lista abaixo.

- -

Valores

- -
-
none
-
Palavras não são separadas em quebras de linha, mesmo se seus caracteres sugiram pontos de quebra de linha. Linhas são quebradas apenas em espaços em branco.
-
manual
-
Palavras são separadas apenas onde caracteres dentro de uma palavras sugiram oportunidades de quebra de linha. Veja abaixo {{anch("Suggesting line break opportunities", "Oportunidades sugeridas de quebra de linha")}} para mais detalhes.
-
auto
-
O navegador é livre para quebrar palavras automaticamente nos pontos apropriados de hifenização, seguindo quaisquer regras que ele escolher. Entretanto, oportunidades sugeridas de quebras de linha (veja {{anch("Suggesting line break opportunities", "Oportunidades sugeridas de quebra de linha")}} abaixo) irão sobrepor a seleção automática de pontos de quebra quando presentes.
-
- -
-

Nota: O comportamento da configuração auto requer que a propriedade idioma seja indicada corretamente para que as regras de hifenização sejam selecionadas. Você deve especificar o idioma utilizando o atributo HTML lang para garantir que a hifenização automática seja aplicada na linguagem de sua escolha.

-
- -

Oportunidades sugeridas de quebra de linha

- -

Existem dois caracteres Unicode que podem ser utilizados para especificar manualmente potenciais pontos de quebra de linha no texto:

- -
-
U+2010 (HYPHEN)
-
O caractere hífen "duro" indica uma oportunidade de quebra de linha visível. Mesmo que não haja quebra de linha naquele ponto, o hífen ainda será renderizado.
-
U+00AD (SHY)
-
Um hífen invisivel, "suave". Este caractere não é renderizado visivelmente; ao invés, ele marca um local onde o browser deve quebrar a palavra se um hífen for necessário. Em HTML você pode usar &shy; para inserir um hífen suave.
-
- -

Sintaxe formal

- -
{{csssyntax}}
- -

Exemplo

- -

Este exemplo usa três classes, uma para cada configuração possível da propriedade hyphens.

- -
<ul>
-  <li><code>none</code>: sem hífen; transbordar se necessário
-    <p lang="en" class="none">An extreme&shy;ly long English word</p>
-  </li>
-  <li><code>manual</code>: hífen apenas em &amp;hyphen; ou &amp;shy; (se necessário)
-    <p lang="en" class="manual">An extreme&shy;ly long English word</p>
-  </li>
-  <li><code>auto</code>: hífen onde o algorítmo decidir (se necessário)
-    <p lang="en" class="auto">An extreme&shy;ly long English word</p>
-  </li>
-</ul>
-
- -
p {
-  width: 55px;
-  border: 1px solid black;
- }
-p.none {
-  -webkit-hyphens: none;
-  -ms-hyphens: none;
-  hyphens: none;
-}
-p.manual {
-  -webkit-hyphens: manual;
-  -ms-hyphens: manual;
-  hyphens: manual;
-}
-p.auto {
-  -webkit-hyphens: auto;
-  -ms-hyphens: auto;
-  hyphens: auto;
-}
-
- -
-

{{EmbedLiveSample("Example", "100%", "470'")}}

-
- -

Especificações

- - - - - - - - - - - - - - - - -
EspecificaçãoCondiçãoComentário
{{SpecName("CSS3 Text", "#hyphens-property", "hyphens")}}{{Spec2("CSS3 Text")}}Initial definition
- -

Compatibilidade dos navegadores

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome(13.0)}}{{property_prefix("-webkit")}}[1]
- {{CompatChrome(55.0)}} (unprefixed)		 -

{{CompatGeckoDesktop("6.0")}}{{property_prefix("-moz")}}[2]
- {{CompatGeckoDesktop("43.0")}}

- 		{{CompatIE("10.0")}}{{property_prefix("-ms")}}[3]{{CompatOpera(44)}}{{CompatSafari(5.1)}}{{property_prefix("-webkit")}}
Hyphenation dictionary for Afrikaans (af, af-*){{CompatUnknown}}{{CompatGeckoDesktop("8.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Bulgarian (bg, bg-*){{CompatUnknown}}{{CompatGeckoDesktop("8.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Catalan (ca, ca-*){{CompatUnknown}}{{CompatGeckoDesktop("8.0")}}10.0{{CompatUnknown}}9.1
Hyphenation dictionary for Croatian (hr, hr-*){{CompatUnknown}}{{CompatGeckoDesktop("8.0")}}{{CompatNo}}{{CompatUnknown}}9.1
Hyphenation dictionary for Czech (cs, cs-*){{CompatUnknown}}{{CompatNo}}10.0{{CompatUnknown}}9.1
Hyphenation dictionary for Danish (da, da-*){{CompatUnknown}}{{CompatGeckoDesktop("8.0")}}10.0{{CompatUnknown}}9.1
Hyphenation dictionary for Dutch (nl, nl-*){{CompatUnknown}}{{CompatGeckoDesktop("8.0")}}10.0{{CompatUnknown}}5.1
Hyphenation dictionary for English (en, en-*){{CompatChrome(55.0)}} (unprefixed){{CompatGeckoDesktop("6.0")}}[4]10.0{{CompatOpera(44)}}5.1[5]
Hyphenation dictionary for Esperanto (eo, eo-*){{CompatUnknown}}{{CompatGeckoDesktop("8.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Estonian (et, et-*){{CompatUnknown}}{{CompatGeckoDesktop("8.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Finnish (fi, fi-*){{CompatUnknown}}{{CompatGeckoDesktop("8.0")}}{{CompatNo}}{{CompatUnknown}}9.1
Hyphenation dictionary for French (fr, fr-*){{CompatUnknown}}{{CompatGeckoDesktop("8.0")}}10.0{{CompatUnknown}}5.1
Hyphenation dictionary for Galician (gl, gl-*){{CompatUnknown}}9.0{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for German, Traditional Orthography of 1901 (de-1901, de-AT-1901, de-DE-1901){{CompatUnknown}}8.0{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for German, Reformed Orthography of 1996 (de, de-1996, de-DE, de-AT, de-*){{CompatUnknown}}8.010.0{{CompatUnknown}}5.1
Hyphenation dictionary for German, Swiss Orthography (de-CH, de-CH-*){{CompatUnknown}}8.0{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Hungarian (hu, hu-*){{CompatUnknown}}9.0{{CompatNo}}{{CompatUnknown}}9.1
Hyphenation dictionary for Icelandic (is, is-*){{CompatUnknown}}8.0{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Interlingua (ia, ia-*){{CompatUnknown}}8.0{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Italian (it, it-*){{CompatUnknown}}9.010.0{{CompatUnknown}}5.1
Hyphenation dictionary for Kurmanji (kmr, kmr-*){{CompatUnknown}}8.0{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Latin (la, la-*){{CompatVersionUnknown}}8.0{{CompatNo}}{{CompatOpera(44)}}{{CompatNo}}
Hyphenation dictionary for Lithuanian (lt, lt-*){{CompatUnknown}}8.0{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Mongolian (mn, mn-*){{CompatUnknown}}8.0{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Norwegian (Bokmål) (no, no-*, nb, nb-*){{CompatUnknown}}8.010.0{{CompatUnknown}}9.1
Hyphenation dictionary for Norwegian (Nynorsk) (nn, nn-*){{CompatUnknown}}8.010.0{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Polish (pl, pl-*){{CompatUnknown}}31.010.0{{CompatUnknown}}9.1
Hyphenation dictionary for Portuguese (pt, pt-*){{CompatUnknown}}8.0[6]10.0{{CompatUnknown}}9.1
Hyphenation dictionary for Brazilian Portuguese (pt-BR){{CompatUnknown}}8.0[6]10.0{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Russian (ru, ru-*){{CompatUnknown}}8.010.0{{CompatUnknown}}5.1
Hyphenation dictionary for Serbian, Bosnian, Serbo-Croatian (sh, sh-*, sr, sr-*, bs, bs-*){{CompatUnknown}}8.0{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Slovenian (sl, sl-*){{CompatUnknown}}8.0{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Spanish (es, es-*){{CompatUnknown}}8.010.0{{CompatUnknown}}5.1
Hyphenation dictionary for Swedish (sv, sv-*){{CompatUnknown}}8.010.0{{CompatUnknown}}9.1
Hyphenation dictionary for Turkish (tr, tr-*){{CompatUnknown}}9.010.0{{CompatUnknown}}9.1
Hyphenation dictionary for Ukrainian (uk, uk-*){{CompatUnknown}}9.0{{CompatNo}}{{CompatUnknown}}9.1
Hyphenation dictionary for Upper Sorbian (hsb, hsb-*){{CompatUnknown}}8.0{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Welsh (cy, cy-*){{CompatUnknown}}8.0{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for other languages{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatAndroid("4.0")}}{{property_prefix("-webkit")}}[1]{{CompatChrome(55.0)}} (unprefixed){{CompatGeckoMobile("6.0")}}{{property_prefix("-moz")}}[2]
- {{CompatGeckoDesktop("43.0")}}		{{CompatNo}}{{CompatOperaMobile(44)}}{{CompatSafari(4.2)}}{{property_prefix("-webkit")}}{{CompatChrome(55.0)}} (unprefixed)
Hyphenation dictionary for Afrikaans (af, af-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Bulgarian (bg, bg-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Catalan (ca, ca-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Croatian (hr, hr-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Czech (cs, cs-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Danish (da, da-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Dutch (nl, nl-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for English (en, en-*){{CompatUnknown}}{{CompatChrome(55.0)}} (unprefixed){{CompatUnknown}}{{CompatUnknown}}{{CompatOperaMobile(44)}}{{CompatUnknown}}{{CompatChrome(55.0)}} (unprefixed)
Hyphenation dictionary for Esperanto (eo, eo-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Estonian (et, et-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Finnish (fi, fi-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for French (fr, fr-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Galician (gl, gl-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for German, Traditional Orthography of 1901 (de-1901, de-AT-1901, de-DE-1901){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for German, Reformed Orthography of 1996 (de, de-1996, de-DE, de-AT, de-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for German, Swiss Orthography (de-CH, de-CH-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Hungarian (hu, hu-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Icelandic (is, is-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Interlingua (ia, ia-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Italian (it, it-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Kurmanji (kmr, kmr-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Latin (la, la-*){{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatOperaMobile(44)}}{{CompatUnknown}}{{CompatVersionUnknown}}
Hyphenation dictionary for Lithuanian (lt, lt-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Mongolian (mn, mn-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Norwegian (Bokmål) (no, no-*, nb, nb-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Norwegian (Nynorsk) (nn, nn-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Polish (pl, pl-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Portuguese (pt, pt-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Brazilian Portuguese (pt-BR){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}} {{CompatUnknown}}
Hyphenation dictionary for Russian (ru, ru-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Serbian, Bosnian, Serbo-Croatian (sh, sh-*, sr, sr-*, bs, bs-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Slovenian (sl, sl-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Spanish (es, es-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Swedish (sv, sv-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Turkish (tr, tr-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Ukrainian (uk, uk-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Upper Sorbian (hsb, hsb-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Welsh (cy, cy-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for other languages{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

[1] Sem hifenização automática, apenas -webkit-hyphens: none é suportado.

- -

[2] Hifenização automática funciona apenas para idiomas cujos dicionários de hifenização sejam integrados com Gecko. Veja a nota abaixo para ver a lista completa destas linguagens.

- -

[3] Hifenização automática funciona apenas para idiomas cujos dicionários de hifenização sejam integrados com Internet Explorer. Veja a nota abaixo para ver a lista completa destas linguagens.

- -

[4] Usa um dicionário en-US.

- -

[5] en-GB e en-US usam dicionários diferentes.

- -

[6] Usa um dicionário Português.

- -

Veja também

- - diff --git a/files/pt-br/web/css/hyphens/index.html b/files/pt-br/web/css/hyphens/index.html new file mode 100644 index 0000000000..c8e718562f --- /dev/null +++ b/files/pt-br/web/css/hyphens/index.html @@ -0,0 +1,902 @@ +--- +title: hifens +slug: Web/CSS/hifens +translation_of: Web/CSS/hyphens +--- +
{{CSSRef}}
+ +
A propriedade CSS  hyphens especifica como palavras devem ser hifenizadas quando o há quebra de texto em múltiplas linhas. Você pode prevenir a hifenização completamente, especificar pontos manualmente, ou permitir que o navegador insira automaticamente quando apropriado.
+ +
 
+ +
hyphens: none;
+hyphens: manual;
+hyphens: auto;
+
+/* Valores globais */
+hyphens: inherit;
+hyphens: initial;
+hyphens: unset;
+
+ +

Regras de hifenização são específicas para cada idioma. Em HTML, o idioma é determinado pelo atributo lang, e os navegadores irão utilizar hífen apenas caso este atributo esteja presente e se houver um dicionário de hifenização disponível. Em XML, deve ser usado o atributo xml:lang.

+ +
+

Nota: As regras que definem como a hifenização é realizada não são explicitamente definidas pela especificação, então a hifenização exata pode variar de navegador para navegador.

+
+ +

{{cssinfo}}

+ +

Sintaxe

+ +

A propriedade hyphens é especificada como uma única palavra-chave escolhida da lista abaixo.

+ +

Valores

+ +
+
none
+
Palavras não são separadas em quebras de linha, mesmo se seus caracteres sugiram pontos de quebra de linha. Linhas são quebradas apenas em espaços em branco.
+
manual
+
Palavras são separadas apenas onde caracteres dentro de uma palavras sugiram oportunidades de quebra de linha. Veja abaixo {{anch("Suggesting line break opportunities", "Oportunidades sugeridas de quebra de linha")}} para mais detalhes.
+
auto
+
O navegador é livre para quebrar palavras automaticamente nos pontos apropriados de hifenização, seguindo quaisquer regras que ele escolher. Entretanto, oportunidades sugeridas de quebras de linha (veja {{anch("Suggesting line break opportunities", "Oportunidades sugeridas de quebra de linha")}} abaixo) irão sobrepor a seleção automática de pontos de quebra quando presentes.
+
+ +
+

Nota: O comportamento da configuração auto requer que a propriedade idioma seja indicada corretamente para que as regras de hifenização sejam selecionadas. Você deve especificar o idioma utilizando o atributo HTML lang para garantir que a hifenização automática seja aplicada na linguagem de sua escolha.

+
+ +

Oportunidades sugeridas de quebra de linha

+ +

Existem dois caracteres Unicode que podem ser utilizados para especificar manualmente potenciais pontos de quebra de linha no texto:

+ +
+
U+2010 (HYPHEN)
+
O caractere hífen "duro" indica uma oportunidade de quebra de linha visível. Mesmo que não haja quebra de linha naquele ponto, o hífen ainda será renderizado.
+
U+00AD (SHY)
+
Um hífen invisivel, "suave". Este caractere não é renderizado visivelmente; ao invés, ele marca um local onde o browser deve quebrar a palavra se um hífen for necessário. Em HTML você pode usar &shy; para inserir um hífen suave.
+
+ +

Sintaxe formal

+ +
{{csssyntax}}
+ +

Exemplo

+ +

Este exemplo usa três classes, uma para cada configuração possível da propriedade hyphens.

+ +
<ul>
+  <li><code>none</code>: sem hífen; transbordar se necessário
+    <p lang="en" class="none">An extreme&shy;ly long English word</p>
+  </li>
+  <li><code>manual</code>: hífen apenas em &amp;hyphen; ou &amp;shy; (se necessário)
+    <p lang="en" class="manual">An extreme&shy;ly long English word</p>
+  </li>
+  <li><code>auto</code>: hífen onde o algorítmo decidir (se necessário)
+    <p lang="en" class="auto">An extreme&shy;ly long English word</p>
+  </li>
+</ul>
+
+ +
p {
+  width: 55px;
+  border: 1px solid black;
+ }
+p.none {
+  -webkit-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+p.manual {
+  -webkit-hyphens: manual;
+  -ms-hyphens: manual;
+  hyphens: manual;
+}
+p.auto {
+  -webkit-hyphens: auto;
+  -ms-hyphens: auto;
+  hyphens: auto;
+}
+
+ +
+

{{EmbedLiveSample("Example", "100%", "470'")}}

+
+ +

Especificações

+ + + + + + + + + + + + + + + + +
EspecificaçãoCondiçãoComentário
{{SpecName("CSS3 Text", "#hyphens-property", "hyphens")}}{{Spec2("CSS3 Text")}}Initial definition
+ +

Compatibilidade dos navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome(13.0)}}{{property_prefix("-webkit")}}[1]
+ {{CompatChrome(55.0)}} (unprefixed)		 +

{{CompatGeckoDesktop("6.0")}}{{property_prefix("-moz")}}[2]
+ {{CompatGeckoDesktop("43.0")}}

+ 		{{CompatIE("10.0")}}{{property_prefix("-ms")}}[3]{{CompatOpera(44)}}{{CompatSafari(5.1)}}{{property_prefix("-webkit")}}
Hyphenation dictionary for Afrikaans (af, af-*){{CompatUnknown}}{{CompatGeckoDesktop("8.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Bulgarian (bg, bg-*){{CompatUnknown}}{{CompatGeckoDesktop("8.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Catalan (ca, ca-*){{CompatUnknown}}{{CompatGeckoDesktop("8.0")}}10.0{{CompatUnknown}}9.1
Hyphenation dictionary for Croatian (hr, hr-*){{CompatUnknown}}{{CompatGeckoDesktop("8.0")}}{{CompatNo}}{{CompatUnknown}}9.1
Hyphenation dictionary for Czech (cs, cs-*){{CompatUnknown}}{{CompatNo}}10.0{{CompatUnknown}}9.1
Hyphenation dictionary for Danish (da, da-*){{CompatUnknown}}{{CompatGeckoDesktop("8.0")}}10.0{{CompatUnknown}}9.1
Hyphenation dictionary for Dutch (nl, nl-*){{CompatUnknown}}{{CompatGeckoDesktop("8.0")}}10.0{{CompatUnknown}}5.1
Hyphenation dictionary for English (en, en-*){{CompatChrome(55.0)}} (unprefixed){{CompatGeckoDesktop("6.0")}}[4]10.0{{CompatOpera(44)}}5.1[5]
Hyphenation dictionary for Esperanto (eo, eo-*){{CompatUnknown}}{{CompatGeckoDesktop("8.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Estonian (et, et-*){{CompatUnknown}}{{CompatGeckoDesktop("8.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Finnish (fi, fi-*){{CompatUnknown}}{{CompatGeckoDesktop("8.0")}}{{CompatNo}}{{CompatUnknown}}9.1
Hyphenation dictionary for French (fr, fr-*){{CompatUnknown}}{{CompatGeckoDesktop("8.0")}}10.0{{CompatUnknown}}5.1
Hyphenation dictionary for Galician (gl, gl-*){{CompatUnknown}}9.0{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for German, Traditional Orthography of 1901 (de-1901, de-AT-1901, de-DE-1901){{CompatUnknown}}8.0{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for German, Reformed Orthography of 1996 (de, de-1996, de-DE, de-AT, de-*){{CompatUnknown}}8.010.0{{CompatUnknown}}5.1
Hyphenation dictionary for German, Swiss Orthography (de-CH, de-CH-*){{CompatUnknown}}8.0{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Hungarian (hu, hu-*){{CompatUnknown}}9.0{{CompatNo}}{{CompatUnknown}}9.1
Hyphenation dictionary for Icelandic (is, is-*){{CompatUnknown}}8.0{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Interlingua (ia, ia-*){{CompatUnknown}}8.0{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Italian (it, it-*){{CompatUnknown}}9.010.0{{CompatUnknown}}5.1
Hyphenation dictionary for Kurmanji (kmr, kmr-*){{CompatUnknown}}8.0{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Latin (la, la-*){{CompatVersionUnknown}}8.0{{CompatNo}}{{CompatOpera(44)}}{{CompatNo}}
Hyphenation dictionary for Lithuanian (lt, lt-*){{CompatUnknown}}8.0{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Mongolian (mn, mn-*){{CompatUnknown}}8.0{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Norwegian (Bokmål) (no, no-*, nb, nb-*){{CompatUnknown}}8.010.0{{CompatUnknown}}9.1
Hyphenation dictionary for Norwegian (Nynorsk) (nn, nn-*){{CompatUnknown}}8.010.0{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Polish (pl, pl-*){{CompatUnknown}}31.010.0{{CompatUnknown}}9.1
Hyphenation dictionary for Portuguese (pt, pt-*){{CompatUnknown}}8.0[6]10.0{{CompatUnknown}}9.1
Hyphenation dictionary for Brazilian Portuguese (pt-BR){{CompatUnknown}}8.0[6]10.0{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Russian (ru, ru-*){{CompatUnknown}}8.010.0{{CompatUnknown}}5.1
Hyphenation dictionary for Serbian, Bosnian, Serbo-Croatian (sh, sh-*, sr, sr-*, bs, bs-*){{CompatUnknown}}8.0{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Slovenian (sl, sl-*){{CompatUnknown}}8.0{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Spanish (es, es-*){{CompatUnknown}}8.010.0{{CompatUnknown}}5.1
Hyphenation dictionary for Swedish (sv, sv-*){{CompatUnknown}}8.010.0{{CompatUnknown}}9.1
Hyphenation dictionary for Turkish (tr, tr-*){{CompatUnknown}}9.010.0{{CompatUnknown}}9.1
Hyphenation dictionary for Ukrainian (uk, uk-*){{CompatUnknown}}9.0{{CompatNo}}{{CompatUnknown}}9.1
Hyphenation dictionary for Upper Sorbian (hsb, hsb-*){{CompatUnknown}}8.0{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for Welsh (cy, cy-*){{CompatUnknown}}8.0{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Hyphenation dictionary for other languages{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatAndroid("4.0")}}{{property_prefix("-webkit")}}[1]{{CompatChrome(55.0)}} (unprefixed){{CompatGeckoMobile("6.0")}}{{property_prefix("-moz")}}[2]
+ {{CompatGeckoDesktop("43.0")}}		{{CompatNo}}{{CompatOperaMobile(44)}}{{CompatSafari(4.2)}}{{property_prefix("-webkit")}}{{CompatChrome(55.0)}} (unprefixed)
Hyphenation dictionary for Afrikaans (af, af-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Bulgarian (bg, bg-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Catalan (ca, ca-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Croatian (hr, hr-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Czech (cs, cs-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Danish (da, da-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Dutch (nl, nl-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for English (en, en-*){{CompatUnknown}}{{CompatChrome(55.0)}} (unprefixed){{CompatUnknown}}{{CompatUnknown}}{{CompatOperaMobile(44)}}{{CompatUnknown}}{{CompatChrome(55.0)}} (unprefixed)
Hyphenation dictionary for Esperanto (eo, eo-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Estonian (et, et-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Finnish (fi, fi-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for French (fr, fr-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Galician (gl, gl-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for German, Traditional Orthography of 1901 (de-1901, de-AT-1901, de-DE-1901){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for German, Reformed Orthography of 1996 (de, de-1996, de-DE, de-AT, de-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for German, Swiss Orthography (de-CH, de-CH-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Hungarian (hu, hu-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Icelandic (is, is-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Interlingua (ia, ia-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Italian (it, it-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Kurmanji (kmr, kmr-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Latin (la, la-*){{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatOperaMobile(44)}}{{CompatUnknown}}{{CompatVersionUnknown}}
Hyphenation dictionary for Lithuanian (lt, lt-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Mongolian (mn, mn-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Norwegian (Bokmål) (no, no-*, nb, nb-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Norwegian (Nynorsk) (nn, nn-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Polish (pl, pl-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Portuguese (pt, pt-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Brazilian Portuguese (pt-BR){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}} {{CompatUnknown}}
Hyphenation dictionary for Russian (ru, ru-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Serbian, Bosnian, Serbo-Croatian (sh, sh-*, sr, sr-*, bs, bs-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Slovenian (sl, sl-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Spanish (es, es-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Swedish (sv, sv-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Turkish (tr, tr-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Ukrainian (uk, uk-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Upper Sorbian (hsb, hsb-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Welsh (cy, cy-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for other languages{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Sem hifenização automática, apenas -webkit-hyphens: none é suportado.

+ +

[2] Hifenização automática funciona apenas para idiomas cujos dicionários de hifenização sejam integrados com Gecko. Veja a nota abaixo para ver a lista completa destas linguagens.

+ +

[3] Hifenização automática funciona apenas para idiomas cujos dicionários de hifenização sejam integrados com Internet Explorer. Veja a nota abaixo para ver a lista completa destas linguagens.

+ +

[4] Usa um dicionário en-US.

+ +

[5] en-GB e en-US usam dicionários diferentes.

+ +

[6] Usa um dicionário Português.

+ +

Veja também

+ + diff --git a/files/pt-br/web/css/image/index.html b/files/pt-br/web/css/image/index.html new file mode 100644 index 0000000000..fe9631cb30 --- /dev/null +++ b/files/pt-br/web/css/image/index.html @@ -0,0 +1,157 @@ +--- +title: +slug: Web/CSS/imagem +tags: + - CSS + - CSS imagens + - Layout + - Referencia + - Tipo de data CSS + - Web + - graficos +translation_of: Web/CSS/image +--- +
{{CSSRef}}
+ +

O tipo de data CSS <image> representa uma imagem bi-dimensional. Existem dois tipos de imagens: imagens planas, referenciada por um {{cssxref("<url>")}}, e imagens geradas dinamicamente, geradas por {{cssxref("<gradient>")}} ou {{cssxref("element()")}}. Imagens podem ser usadas em inumeras propriedades CSS, como {{cssxref("background-image")}}, {{cssxref("border-image")}}, {{cssxref("content")}}, {{cssxref("cursor")}}, e {{cssxref("list-style-image")}}.

+ +

Tipos de imagens

+ +

CSS pode lidar com os seguintes tipos de imagens:

+ + + +

CCS determina um tamanho concreto do objeto usando (1) suas dimensões intrínsecas; (2) seu tamanho especificado, definido por propriedades CSS como {{cssxref("width")}}, {{cssxref("height")}}, ou {{cssxref("background-size")}}; e (3) é o tamanho padrão, determinado pelo tipo de propriedade em que a imagem é usada:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Tipo de objetoTamanho do objeto padrão
{{cssxref("background-image")}}O tamanho da área de posicionamento do fundo do elemento.
{{cssxref("list-style-image")}}O tamanho de um carácter 1em
{{cssxref("border-image")}}O tamanho da área da imagem da borda do elemento
{{cssxref("cursor")}}O tamanho definido pelo navegador correspondente ao tamanho normal do cursor no sistema do cliente
{{cssxref("border-image-source")}}?
{{cssxref("mask-image")}}?
{{cssxref("shape-outside")}}?
{{cssxref("mask-border-source")}}?
Substituí o conteúdo, como quando combinando {{cssxref("content")}} com um pseudo-elemento ({{cssxref("::after")}} ou {{cssxref("::before")}})Um 300px × 150px retângulo
+ +

O tamanho do objeto concreto é calculado usando o seguinte algoritimo:

+ + + +
Nota: Não são todos os navegadores que suportam cada tipo de imagem em cada propriedade. Veja a seção compatibilidade dos navegadores para mais detalhes.
+ +

Sintaxe

+ +

O tipo de data <image> pode ser representado por qualquer item seguinte:

+ + + +

Exemplos

+ +

Imagens válidas

+ +
url(test.jpg)               /* Uma <url>, enquanto test.jpg é uma imagem real */
+linear-gradient(blue, red)  /* Um <gradient> */
+element(#realid)            /* Uma parte da página web, referenciada por uma função element() se "realid" for um ID existente na página */
+
+ +

Imagens inválidas

+ +
cervin.jpg        /* Um arquivo imagem deve ser definido usando a função url(). */
+url(report.pdf)   /* Um arquivo apontado pela função url() deve ser uma imagem. */
+element(#fakeid)  /* Um elemento ID deve ser um ID existente na página. */
+
+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaçõesStatusComentário
{{SpecName('CSS4 Images', '#typedef-image', '<image>')}}{{Spec2('CSS4 Images')}}Adiciona {{cssxref("element()")}}, {{cssxref("image()")}},  {{cssxref("conic-gradient()")}}, {{cssxref("repeating-conic-gradient()")}}, e {{cssxref("image-resolution")}}.
{{SpecName('CSS3 Images', '#typedef-image', '<image>')}}{{Spec2('CSS3 Images')}}Definição inicial. Depois disso, não existe definição explicita do tipo de data <image>. Imagens podem ser somente definidas usando a notação funciona url() .
+ +

Compatibilidade do navegador

+ +

 

+ + + +

{{Compat("css.types.image")}}

+ +

 

+ +

Veja também

+ + diff --git a/files/pt-br/web/css/imagem/index.html b/files/pt-br/web/css/imagem/index.html deleted file mode 100644 index fe9631cb30..0000000000 --- a/files/pt-br/web/css/imagem/index.html +++ /dev/null @@ -1,157 +0,0 @@ ---- -title: -slug: Web/CSS/imagem -tags: - - CSS - - CSS imagens - - Layout - - Referencia - - Tipo de data CSS - - Web - - graficos -translation_of: Web/CSS/image ---- -
{{CSSRef}}
- -

O tipo de data CSS <image> representa uma imagem bi-dimensional. Existem dois tipos de imagens: imagens planas, referenciada por um {{cssxref("<url>")}}, e imagens geradas dinamicamente, geradas por {{cssxref("<gradient>")}} ou {{cssxref("element()")}}. Imagens podem ser usadas em inumeras propriedades CSS, como {{cssxref("background-image")}}, {{cssxref("border-image")}}, {{cssxref("content")}}, {{cssxref("cursor")}}, e {{cssxref("list-style-image")}}.

- -

Tipos de imagens

- -

CSS pode lidar com os seguintes tipos de imagens:

- - - -

CCS determina um tamanho concreto do objeto usando (1) suas dimensões intrínsecas; (2) seu tamanho especificado, definido por propriedades CSS como {{cssxref("width")}}, {{cssxref("height")}}, ou {{cssxref("background-size")}}; e (3) é o tamanho padrão, determinado pelo tipo de propriedade em que a imagem é usada:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Tipo de objetoTamanho do objeto padrão
{{cssxref("background-image")}}O tamanho da área de posicionamento do fundo do elemento.
{{cssxref("list-style-image")}}O tamanho de um carácter 1em
{{cssxref("border-image")}}O tamanho da área da imagem da borda do elemento
{{cssxref("cursor")}}O tamanho definido pelo navegador correspondente ao tamanho normal do cursor no sistema do cliente
{{cssxref("border-image-source")}}?
{{cssxref("mask-image")}}?
{{cssxref("shape-outside")}}?
{{cssxref("mask-border-source")}}?
Substituí o conteúdo, como quando combinando {{cssxref("content")}} com um pseudo-elemento ({{cssxref("::after")}} ou {{cssxref("::before")}})Um 300px × 150px retângulo
- -

O tamanho do objeto concreto é calculado usando o seguinte algoritimo:

- - - -
Nota: Não são todos os navegadores que suportam cada tipo de imagem em cada propriedade. Veja a seção compatibilidade dos navegadores para mais detalhes.
- -

Sintaxe

- -

O tipo de data <image> pode ser representado por qualquer item seguinte:

- - - -

Exemplos

- -

Imagens válidas

- -
url(test.jpg)               /* Uma <url>, enquanto test.jpg é uma imagem real */
-linear-gradient(blue, red)  /* Um <gradient> */
-element(#realid)            /* Uma parte da página web, referenciada por uma função element() se "realid" for um ID existente na página */
-
- -

Imagens inválidas

- -
cervin.jpg        /* Um arquivo imagem deve ser definido usando a função url(). */
-url(report.pdf)   /* Um arquivo apontado pela função url() deve ser uma imagem. */
-element(#fakeid)  /* Um elemento ID deve ser um ID existente na página. */
-
- -

Especificações

- - - - - - - - - - - - - - - - - - - - - -
EspecificaçõesStatusComentário
{{SpecName('CSS4 Images', '#typedef-image', '<image>')}}{{Spec2('CSS4 Images')}}Adiciona {{cssxref("element()")}}, {{cssxref("image()")}},  {{cssxref("conic-gradient()")}}, {{cssxref("repeating-conic-gradient()")}}, e {{cssxref("image-resolution")}}.
{{SpecName('CSS3 Images', '#typedef-image', '<image>')}}{{Spec2('CSS3 Images')}}Definição inicial. Depois disso, não existe definição explicita do tipo de data <image>. Imagens podem ser somente definidas usando a notação funciona url() .
- -

Compatibilidade do navegador

- -

 

- - - -

{{Compat("css.types.image")}}

- -

 

- -

Veja também

- - diff --git a/files/pt-br/web/css/initial_value/index.html b/files/pt-br/web/css/initial_value/index.html new file mode 100644 index 0000000000..fea27bfe3c --- /dev/null +++ b/files/pt-br/web/css/initial_value/index.html @@ -0,0 +1,30 @@ +--- +title: Valor inicial +slug: Web/CSS/valor_inicial +tags: + - CSS + - Iniciante + - Web + - valor inicial +translation_of: Web/CSS/initial_value +--- +
{{cssref}}
+ +

O Valor inicial de uma propriedade CSS é o seu valor padrão, como listado em sua tabela de definição. O uso do valor inicial varia caso a propriedade seja herdada ou não.

+ + + +
+

Nota: Você pode especificar explicitamente um valor inicial, utilizando a palavra-chave {{cssxref("initial")}}

+
+ +

Veja Também

+ + diff --git a/files/pt-br/web/css/layout_mode/index.html b/files/pt-br/web/css/layout_mode/index.html new file mode 100644 index 0000000000..883cdbd4a4 --- /dev/null +++ b/files/pt-br/web/css/layout_mode/index.html @@ -0,0 +1,25 @@ +--- +title: Modelo de layout +slug: Web/CSS/Modelo_layout +translation_of: Web/CSS/Layout_mode +--- +

O modelo de layout CSS, às vezes abreviado por layout, é um algoritimo que determina a posição e tamanho dos boxes baseado em como estes interagem com os boxes filhos e boxe ancestral. Há vários layouts:

+ + + +
+

Note: Not all CSS properties apply to all layout modes. Most of them apply to one or two of them and have no effect if they are set on an element participating in another layout mode.

+
+ +

Veja Também

+ + diff --git a/files/pt-br/web/css/mask/index.html b/files/pt-br/web/css/mask/index.html new file mode 100644 index 0000000000..4b7f7f52d5 --- /dev/null +++ b/files/pt-br/web/css/mask/index.html @@ -0,0 +1,150 @@ +--- +title: mask +slug: mask +tags: + - CSS + - Compatibilidade Mobile + - Internet + - Layout + - Referencia + - SVG + - Web + - máscaras +translation_of: Web/CSS/mask +--- +
{{CSSRef}}
+ +

Resumo

+ +

A propriedade máscara no CSS permite aos usuários alterarem a visibilidade de um item parcialmente ou totalmente escondendo o item. Isso é obtido por qualquer mascaramento ou cortes na imagem em pontos específicos.

+ +

{{cssinfo}}

+ +

Sintaxe

+ +
/* Palavra-Chave */
+mask: none;
+
+/* Valor das Imagens */
+mask: url(mask.png);                       /* Imagem bitmap usada da máscara */
+mask: url(masks.svg#star);                 /* Elemento dentro do SVG usado como máscara */
+
+/* Valores Combinados */
+mask: url(masks.svg#star) luminance;       /* Elemento dentro do SVG usado como máscara de luminância */
+mask: url(masks.svg#star) 40px 20px;       /* Elemento dentro do SVG usado como máscara posicionada 40px do topo e 20px da esquerda */
+mask: url(masks.svg#star) 0 0/50px 50px;   /* Elemento dentro do SVG usado como máscara com a largura e altura de 50px */
+mask: url(masks.svg#star) repeat-x;        /* Elemento dentro do SVG usado como máscara repedida horizontalmente */
+mask: url(masks.svg#star) stroke-box;      /* Elemento dentro do SVG usado como máscara extendendo-se até a caixa delimitada pela linha */
+mask: url(masks.svg#star) exclude;         /* Elemento dentro do SVG usado como máscara e combinado com o fundo usando partes que não se sobrepõem */
+
+/* Valores Globais */
+mask: inherit;
+mask: initial;
+mask: unset;
+
+ +

Valores

+ +

Se o valor é um valor URI, o elemento apontado pelo URI é usado como uma máscara SVG.

+ +
{{csssyntax}}
+ +

Exemplos

+ +
.target { mask: url(#c1); }
+
+.anothertarget { mask: url(resources.svg#c1); }
+
+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaçãoEstadoComentário
{{SpecName("CSS Masks", "#the-mask", 'mask')}}{{Spec2("CSS Masks")}}Estende-se a sua utilização para elementos HTML.
+ Estende sua sintaxe, tornando-a uma simplificação para as novas propriedades da mask-* definidos nessa especificação.
{{SpecName('SVG1.1', 'masking.html#MaskProperty', 'mask')}}{{Spec2('SVG1.1')}}Definição inicial.
+ +

Compatibilidade dos Navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suporte Básico (para o SVG){{CompatVersionUnknown}}{{CompatVersionUnknown}} [*]{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Aplica-se a elementos HTML{{CompatNo}}{{CompatGeckoDesktop("1.9.1")}} [*]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suporte Básico{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[*] A partir do Gecko 10.0 {{geckoRelease("10.0")}}, o espaço de cor padrão ao manusear máscaras é sRGB; anteriormente, o padrão (suportado apenas espaço de cor) era linearRGB. Isso muda a aparência de efeitos de máscara, mas traz o Gecko em conformidade com a segunda edição da especificação SVG 1.1.

+ +

Veja também

+ + diff --git a/files/pt-br/web/css/media_queries/using_media_queries/index.html b/files/pt-br/web/css/media_queries/using_media_queries/index.html new file mode 100644 index 0000000000..4b9728eebd --- /dev/null +++ b/files/pt-br/web/css/media_queries/using_media_queries/index.html @@ -0,0 +1,639 @@ +--- +title: Usando Media Queries +slug: Web/Guide/CSS/CSS_Media_queries +tags: + - CSS + - Desenho Responsivo + - Design Responsivo +translation_of: Web/CSS/Media_Queries/Using_media_queries +--- +

Uma media query consiste de um media type e pelo menos uma expressão que limita o escopo das folhas de estilo usando media features, tal como largura, altura e cor. Media queries, adicionadas no CSS3, deixam a apresentação do conteúdo adaptado a uma gama especifica de dispositivos não precisando mudar o conteúdo em si.

+ +

Sintaxe

+ +

Media queries consistem de um media type e podem, a partir de uma especificação CSS3, contendo uma ou mais expressões, expressa em media features, que determinam ou verdadeiro ou falso. Os resultados da query são verdadeiros se o media type especificado na media query corresponde ao tipo do documento exibido no dispositivo e todas as expressões na media query são verdadeiras.

+ +
<!-- CSS media query em um elemento de link -->
+<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
+
+<!-- CSS media query dentro de um stylesheet -->
+
+<style>
+@media (max-width: 600px)
+{
+  .facet_sidebar
+   {
+    display: none;
+   }
+}
+</style>
+ +

Quando uma media query é verdadeira, a camada de estilo ou as regras de estilos correspondentes são aplicadas, seguindo o padrão de regras de cascatas. Camadas de estilos com media queries ligadas a tag <link> vão fazer download mesmo se suas medias queries retornarem falso (eles não se aplicam, no entanto).

+ +

A menos que você use os operadores not ou only, o media type é opcional e o tipo all será implícito.

+ +

Operadores lógicos

+ +

Você pode compor media queries complexos usando operadores lógicos, incluindo not, and, e only. O operador and é usado para combinar múltiplas media features em uma mesma media query, requerendo que cada sequência de características, retorne verdadeiro na ordem para que a query seja verdadeiro. O operador not é usado para negar uma media query inteira. O operador only é usado para aplicar um estilo apenas se a query inteira for igual, útil para previnir que navegadores antigos apliquem os estilos selecionados. Se você usar os operadores not ou only, você tem que especificar um tipo de media explícito.

+ +

Você também pode combinar múltiplas medias queries em uma  lista separadas por vírgulas, se qualquer uma das media queries na lista é verdadeira, toda a instrução retorna verdadeira. Isto é equivalente a um operador or.

+ +

and

+ +

A palavra-chave and é usada para combinar múltiplas media features, bem como combinar media features com media types. Uma media query básica, uma media feature simples com a media type all, pode parecer com isso:

+ +
@media (min-width: 700px) { ... }
+ +

Se, no entanto, você desejar que isso se aplique apenas para telas em landscape, você pode usar o operador and para deixar todas as media features juntas.

+ +
@media (min-width: 700px) and (orientation: landscape) { ... }
+ +

Agora, a media query acima vai apenas retorna verdadeira se o viewport for 700px, wide ou wider e a tela estiver em landscape. Se, no entanto, você deseja apenas que isso seja aplicado se a tela em questão for media type TV, você pode encadear essas features com a media type usando o operador and.

+ +
@media tv and (min-width: 700px) and (orientation: landscape) { ... }
+ +

Agora, a media query acima vai ser aplicada apenas se a media type for TV, o viewport for 700px wide ou wider, e a tela estiver em paisagem.

+ +

Listas separadas por vírgula

+ +

Listas separadas por vírgulas comportam-se como o operador or quando utilizadas em media queries. Quando utilizamos media queries com uma lista separada por vírgulas, se qualquer media queries retornar verdadeiro, os estilos ou folhas de estilos serão aplicadas. Cada media query em um lista separa por vírgulas é tratada como uma query individual, e qualquer operador aplica em uma media query não afeta os outros. Isto significa que media queries separadas por vírgulas podem ter objetivos diferentes de media features, types e states.

+ +

Por exemplo, se você quiser aplicar um conjunto de estilos se o dispositivo de visualização tiver um largura mínima de 700px ou estiver sendo segurando em paisagem, você pode escrever o seguinte:

+ +
@media (min-width: 700px), handheld and (orientation: landscape) { ... }
+ +

Acima, se eu estivesse em um dispositivo screen com um viewport largura de 800px, a afirmação retorna verdadeiro por que a primeira parte, interpretada como @media all and (min-width: 700px) será aplicada no meu dispositivo e portanto retorna verdadeiro, apesar do fato que meu dispositivo screen iria falhar no media type handheld na segunda media query. Do mesmo modo, se eu estivesse segurando um dispositivo em paisagem com um viewport de largura de 500px, enquanto a primeira media query falha devido a largura do viewport, a segunda media query teria sucesso e assim o media statement retorna verdadeiro.

+ +

not

+ +

A palavra chave not se aplica em toda a media query e retorna verdadeiro, caso contrário retorna falso (tal como monochrome como cor de tela ou uma tela de largura de 600px com um min-width: 700px recurso consultado). Um not vai apenas negar a media query que é aplicada, de modo não toda a media query que apresente uma media querie com uma lista separada por vírgulas. A palavra chave not não pode ser usada para negar uma característica individual da query, apenas uma media query inteira. Por exemplo, o not é avaliado por último na query seguinte:

+ +
@media not all and (monochrome) { ... }
+
+ +

Isto significa que a query é avaliada assim:

+ +
@media not (all and (monochrome)) { ... }
+
+ +

... em vez disso:

+ +
@media (not all) and (monochrome) { ... }
+ +

Um outro exemplo, veja a media query seguinte:

+ +
@media not screen and (color), print and (color)
+
+ +

É avalida desta forma:

+ +
@media (not (screen and (color))), print and (color)
+ +

only

+ +

A palavra chave only previne que navegadores antigos que não suportam media queries com media features de aplicar os estilos dados:

+ +
<link rel="stylesheet" media="only screen and (color)" href="example.css" />
+
+ +

Pseudo-BNF

+ +
media_query_list: <media_query> [, <media_query> ]*
+media_query: [[only | not]? <media_type> [ and <expression> ]*]
+  | <expression> [ and <expression> ]*
+expression: ( <media_feature> [: <value>]? )
+media_type: all | aural | braille | handheld | print |
+  projection | screen | tty | tv | embossed
+media_feature: width | min-width | max-width
+  | height | min-height | max-height
+  | device-width | min-device-width | max-device-width
+  | device-height | min-device-height | max-device-height
+  | aspect-ratio | min-aspect-ratio | max-aspect-ratio
+  | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
+  | color | min-color | max-color
+  | color-index | min-color-index | max-color-index
+  | monochrome | min-monochrome | max-monochrome
+  | resolution | min-resolution | max-resolution
+  | scan | grid
+ +

Media queries são case insensitive.  Media queries envolvidas em media types desconhecidos serão sempre falsas.

+ +
Nota: Parenteses são obrigatórios em volta de expressões; a falta deles é um erro.
+ +

Características de mídia

+ +

A maioria das media features podem ter prefixo “min-” ou “max-“ para expressar as restrições “maior ou igual” ou “menor ou igual”. Isto evita o uso dos símbolos  “<” e “>” , que entrem em conflito com HTML e XML. Se você usar uma media feature sem especificar um valor, a expressão retorna verdadeiro, se o valor da feature for diferente de zero.

+ +
Nota: Se uma media feature não se aplicar ao dispositivo onde o navegador esta sendo executado, as expressões que envolvem essa media feature são sempre falsas. Por exemplo, consultar um aspecto de um dispositivo sonoro, sempre resulta em falso.
+ +

cor

+ +

Valor: {{cssxref("<color>")}}
+ Mídia: {{cssxref("Media/Visual")}}
+ Aceita prefixos min/max: sim

+ +

Indica o número de bits por componente de cor no dispositivo de saída. Se o dispositivo não é um dispositivo de cor, o valor é zero.

+ +
Nota: Se os componentes de cor têm diferentes números de bits por componente de cor, o menor valor é utilizado. Por exemplo, se o display usa 5 bits para azul e vermelho e 6 bits para verde, então o dispositivo considera 5 bits por componente de cor. Se o dispositivo usar cores indexadas, o menor número de bits por componente de cor na tabela de cores é usado.
+ +

Exemplos

+ +

Aplicar uma folha de estilo a todos dispositivos:

+ +
@media all and (color) { ... }
+
+ +

Aplicar uma folha de estilo a todos dispositivos com no mínimo 4 bits de color componente:

+ +
@media all and (min-color: 4) { ... }
+
+ +

color-index

+ +

Valor: {{cssxref("<integer>")}}
+ Mídia: {{cssxref("Media/Visual")}}
+ Aceita prefixos min/max: Sim

+ +

Indica o número de entradas na tabela de consulta de cores para o dispositivo de saída.

+ +

Exemplos

+ +

Para indicar que uma folha de estilo deve ser aplicada para todos os dispositivos que usam cores indexadas, você pode fazer:

+ +
@media all and (color-index) { ... }
+
+ +

Para aplicar uma folha de estilo em um dispositivo com cores indexadas menor que 256 cores:

+ +
<link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" />
+
+ +

aspect-ratio

+ +

Valor: {{cssxref("<ratio>")}}
+ Mídia: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
+ Aceita prefixos min/max: sim

+ +

Descreve o aspecto da relação da área do display do dispositivo de saída. Este valor consiste de dois inteiros positivos separados por um caractere barra (“/”). Isto representa a relação entre pixels horizontais (primeiro termo) para pixels verticais (segundo termo).

+ +

Exemplo

+ +

A seguir selecionamos uma folha de estilo especial para usarmos quando a área do display é pelo menos mais larga do que alta.

+ +
@media screen and (min-aspect-ratio: 1/1) { ... }
+ +

Isto seleciona o estilo quando a relação de aspecto seja 1:1 ou maior. Em outras palavras, estes estilos serão aplicados apenas quando a área de visualização for quadrada ou paisagem.

+ +

device-aspect-ratio

+ +

Valor: {{cssxref("<ratio>")}}
+ Mídia: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
+ Aceita prefixos min/max: sim

+ +

Descreve a relação de aspecto do dispositivo de saída. Este valor consiste de dois inteiros positivos separados pelo carácter barra (“/”). Isto representa a relação de pixels horizontais (primeiro termo) por pixels verticais (segundo termo).

+ +

Exemplo

+ +

A seguir, selecionamos uma folha de estilo especial para usar em telas widescreen.

+ +
@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }
+ +

Isso seleciona o estilo quando a relação de aspecto é 16:9 ou 16:10.

+ +

device-height

+ +

Valor: {{cssxref("<length>")}}
+ Mídia: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
+ Aceita prefixos min/max: sim

+ +

Descreve a altura do dispositivo de saída( ou seja, toda a tela ou página, em vez de apenas a área de renderização, tal como a janela do documento).

+ +

Exemplo

+ +

Para aplicar uma folha de estilo a um documento quando exibido em uma tela menor que 800 pixels de altura, você pode usar isso:

+ +
<link rel="stylesheet" media="screen and (max-device-height: 799px)" />
+
+ +

device-width

+ +

Valor: {{cssxref("<length>")}}
+ Mídia: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
+ Aceita prefixos min/max: sim

+ +

Descreve a largura do dispositivo e saída (ou seja, toda a tela ou página, em vez de apenas a área de renderização, tal como a janela do documento).

+ +

Exemplo

+ +

Para aplicar uma folha de estilo a um documento quando exibido em uma tela menor que 800px de largura, você pode usar isso:

+ +
<link rel="stylesheet" media="screen and (max-device-width: 799px)" />
+ +

grid

+ +

Valor: {{cssxref("<integer>")}}
+ Mídia: todas
+ Aceita prefixos min/max: não

+ +

Determina se o dispositivo de saída é um dispositivo grade ou um dispositivo bitmap. Se o dispositivo é baseado em grade(tal como um terminal TTY ou uma tela de telefone com apenas um tipo de letra), o valor é 1. De outro modo é zero.

+ +

Exemplo

+ +

Para aplicar um estilo a dispositivos postáteis com 15-carácteres ou uma tela mais estreita:

+ +
@media handheld and (grid) and (max-width: 15em) { ... }
+
+ +
Nota:  A unidade "em" tem um significado especial para dispositivos de grade, uma vez que a exata largura de um "em" não pode ser determinada, 1em é assumido para ser a largura de uma célula da grade horizontalmente, e a altura de uma célula verticalmente.
+ +

height

+ +

Valor: {{cssxref("<length>")}}
+ Mídia: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
+ Aceita prefixos min/max: yes

+ +

A característica height descreve a altura da superfície de renderização do dispositivo de saída (tal como a altura do viewport ou da caixa de página em uma impressora).

+ +
Nota: Como o usuário redimensiona a janela, o Firefox muda as folhas de estilo como apropriado, com base nas media queries, usando as media features width e height.
+ +

monochrome

+ +

Valor: {{cssxref("<integer>")}}
+ Mídia: {{cssxref("Media/Visual")}}
+ Aceita prefixos min/max: sim

+ +

Indica o número de bits por pixel em um dispositivo monocromático (greyscale). Se o dispositivo não for monocromático, o valor é 0.

+ +

Exemplos

+ +

Para aplicar uma folha de estilo em todos os dispositivos monocromáticos:

+ +
@media all and (monochrome) { ... }
+
+ +

Para aplicar uma folha de estilo em dispositivos monocromáticos com pelo menos 8 bits por pixel:

+ +
@media all and (min-monochrome: 8) { ... }
+
+ +

orientation

+ +

Valor: landscape | portrait
+ Mídia: {{cssxref("Media/Visual")}}
+ Aceita prefixos min/max: não

+ +

Indica se o viewport é modo landscape (o visor é mais largo do que mais alto) ou portrait (o visor é mais alto do que mais largo).

+ +

Exemplo

+ +

Para aplicar a folha de estilo apenas em orientação portrait:

+ +
@media all and (orientation: portrait) { ... }
+ +
Nota: Este valor não corresponde com a orientação real do dispositivo. Abrindo o teclado virtual na maioria dos dispositivos na orientação retrato fará com que o viewport torne-se mais largo do que alto, fazendo assim que o navegador use estilos de paisagem em vez de retrato.
+ +

resolution

+ +

Valor: {{cssxref("<resolution>")}}
+ Mídia: {{cssxref("Media/Bitmap", "bitmap")}}
+ Aceita prefixos min/max: sim

+ +

Indica a resolução (densidade de pixel) da saída do dispositivo. A resolução pode ser especificada em pontos por inch(dpi) ou pontos por centímetro(dpcm).

+ +

Exemplos

+ +

Para aplicar a folha de estilo em dispositivos com resolução de pelo menos 300 pontos por inch:

+ +
@media print and (min-resolution: 300dpi) { ... }
+
+ +

Para substituir a antiga sintaxe (min-device-pixel-ratio: 2):

+ +
@media screen and (min-resolution: 2dppx) { ... }
+ +

scan

+ +

Valor: progressive | interlace
+ Mídia: {{cssxref("Media/TV")}}
+ Aceita prefixos min/max: não

+ +

Descreve o processo de digitalização de dispositivos saída de televisão.

+ +

Exemplo

+ +

Para aplicar uma folha de estilo apenas para televisores de varredura progressiva:

+ +
@media tv and (scan: progressive) { ... }
+
+ +

width

+ +

Valor: {{cssxref("<length>")}}
+ Mídia: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
+ Aceita prefixos min/max: sim

+ +

A media feature width descreve a largura da superficie de renderização do dispositivo de saída (tal como a largura da janela do documento, ou a largura da caixa de página em uma impressora).

+ +

Nota:
+ Como o usuário redimensiona a janela, o Firefox muda as folhas de estilos como apropriado baseado em media queries usando media features width e height.

+ +

Exemplos

+ +

Se você quiser especificar uma folha de estilo para dispositivos portáteis, ou dispositivos screen com uma largura maior que 20em, você pode usar essa query:

+ +
@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... }
+
+ +

Essa media query especifica uma folha de estilo que aplica-se para mídias impressas maiores que 8.5 inches.

+ +
<link rel="stylesheet" media="print and (min-width: 8.5in)"
+    href="http://foo.com/mystyle.css" />
+
+ +

Essa query especifica uma folha de estilo que é usada quano o viewport está entre 500 e 800 pixels de largura:

+ +
@media screen and (min-width: 500px) and (max-width: 800px) { ... }
+
+ +

Especificação da Mozilla para mídias características

+ +

Mozilla oferece várias media features para específicos Gecko . Algumas dessas podem ser sugeridas como media features oficiais.

+ +

{{ h3_gecko_minversion("-moz-images-in-menus", "1.9.2") }}

+ +

Valor: {{cssxref("<integer>")}}
+ Mídia: {{cssxref("Media/Visual")}}
+ Aceita prefixos min/max: não

+ +

Se o dispositivo permite aparecer imagens nos menus, o valor é 1; caso contrário, o valor é 0. Isto corresponde ao {{ cssxref(":-moz-system-metric(images-in-menus)") }} CSS pseudo-class.

+ +

{{ h3_gecko_minversion("-moz-mac-graphite-theme", "1.9.2") }}

+ +

Valor: {{cssxref("<integer>")}}
+ Mídia: {{cssxref("Media/Visual")}}
+ Aceita prefixos min/max:no

+ +

Se o usuário tenha configurado seu dispositivo para usar a aparência "Graphite" no Mac OS X, o valor é 1. Se o usuário está usando a aparência padrão blue, ou não está num Mac OS X, o valor é 0.

+ +

Isto corresponde ao {{ cssxref(":-moz-system-metric(mac-graphite-theme)") }} CSS pseudo-class.

+ +

{{ h3_gecko_minversion("-moz-maemo-classic", "1.9.2") }}

+ +

Valor: {{cssxref("<integer>")}}
+ Mídia: {{cssxref("Media/Visual")}}
+ Aceita prefixos min/max: não

+ +

Se o usuário está usando Maemo com o tema original, o valor é 1; Se está usando o mais novo tema Fremantle, o valor é 0.

+ +

Isto corresponde ao {{ cssxref(":-moz-system-metric(maemo-classic)") }} CSS pseudo-class.

+ +

{{ h3_gecko_minversion("-moz-device-pixel-ratio", "2.0") }} {{ deprecated_inline("gecko&16") }}

+ +

Valor: {{cssxref("<number>")}}
+ Mídia: {{cssxref("Media/Visual")}}
+ Aceita prefixos min/max: sim

+ +

Dar o número de pixels do dispositivo por pixels do CSS.

+ +
+

Não use este recurso.

+ +

Em vez disso, use o recurso resolution com a unidade dppx.
+
+ -moz-device-pixel-ratio pode ser usada para compatibilidade com Firefox mais velho que a versão 16 e -webkit-device-pixel-ratio com navegadores baseados no WebKit que não suportam dppx.

+ +

Exemplo:

+ +
@media (-webkit-min-device-pixel-ratio: 2), /* Navegadores baseados no Webkit */
+       (min--moz-device-pixel-ratio: 2),    /* Navegadores mais antigos do Firefox (antes do Firefox 16) */
+       (min-resolution: 2dppx),             /* Forma padrão */
+       (min-resolution: 192dpi)             /* dppx fallback */
+ +

Veja este artigo CSSWG para ccompatibilidade de boas práticas em relação a resolution e dppx.

+
+ +
Nota: Esta media feature é também implementada pelo Webkit e pelo IE 11 para Windows Phone 8.1como -webkit-device-pixel-ratio. Os prefixos min e max implementados pelo Gecko são nomeados min--moz-device-pixel-ratio e max--moz-device-pixel-ratio; mas os mesmos prefixos implementados pelo Webkit são chamados -webkit-min-device-pixel-ratio e -webkit-max-device-pixel-ratio.
+ +

{{ h3_gecko_minversion("-moz-os-version", "25.0") }}

+ +

Valor: windows-xp | windows-vista | windows-win7 | windows-win8
+ Mídia: {{cssxref("Media/Visual")}}
+ Aceita prefixos min/max: não

+ +

Indica qual versão do sistema operacional está sendo usado atualmente. Atualmente apenas implementada no Windows. Possíveis valores são:

+ + + +

Isto é fornecido pelas skins das aplicações e outros códigos do chrome para serem capazes de se adaptar para funcionar bem com a versão atual do sistema operacional.

+ +

{{ h3_gecko_minversion("-moz-scrollbar-end-backward", "1.9.2") }}

+ +

Valor: {{cssxref("<integer>")}}
+ Mídia: {{cssxref("Media/Visual")}}
+ Aceita prefixos min/max: não

+ +

Se a interface do usuário do dispositivo exibe uma seta para trás no final da barra de rolagem, o valor é 1. Caso contrário, é 0.

+ +

Isto corresponde ao {{ cssxref(":-moz-system-metric(scrollbar-end-backward)") }} CSS pseudo-class.

+ +

{{ h3_gecko_minversion("-moz-scrollbar-end-forward", "1.9.2") }}

+ +

Valor: {{cssxref("<integer>")}}
+ Mídia: {{cssxref("Media/Visual")}}
+ Aceita prefixos min/max: não

+ +

Se a interface do usuário do dispositivo a forward arrow button at the end of scrollbars, this is 1. Otherwise it's 0.

+ +

Isto corresponde ao {{ cssxref(":-moz-system-metric(scrollbar-end-forward)") }} CSS pseudo-class.

+ +

{{ h3_gecko_minversion("-moz-scrollbar-start-backward", "1.9.2") }}

+ +

Valor: {{cssxref("<integer>")}}
+ Mídia: {{cssxref("Media/Visual")}}
+ Aceita prefixos min/max: não

+ +

Se a interface do usuário do dispositivo a backward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.

+ +

Isto corresponde ao {{ cssxref(":-moz-system-metric(scrollbar-start-backward)") }} CSS pseudo-class.

+ +

{{ h3_gecko_minversion("-moz-scrollbar-start-forward", "1.9.2") }}

+ +

Valor: {{cssxref("<integer>")}}
+ Mídia: {{cssxref("Media/Visual")}}
+ Aceita prefixos min/max: não

+ +

Se a interface do usuário do dispositivo a forward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.

+ +

Isto corresponde ao {{ cssxref(":-moz-system-metric(scrollbar-start-forward)") }} CSS pseudo-class.

+ +

{{ h3_gecko_minversion("-moz-scrollbar-thumb-proportional", "1.9.2") }}

+ +

Valor: {{cssxref("<integer>")}}
+ Mídia: {{cssxref("Media/Visual")}}
+ Aceita prefixos min/max: não

+ +

Se a interface do usuário do dispositivo the thumb of scrollbars proportionally (that is, sized based on the percentage of the document that is visible), this is 1. Otherwise it's 0.

+ +

Isto corresponde ao {{ cssxref(":-moz-system-metric(scrollbar-thumb-proportional)") }} CSS pseudo-class.

+ +

{{ h3_gecko_minversion("-moz-touch-enabled", "1.9.2") }}

+ +

Valor: {{cssxref("<integer>")}}
+ Mídia: {{cssxref("Media/Visual")}}
+ Aceita prefixos min/max: não

+ +

If the device supports touch events (for a touch screen), this is 1. Otherwise it's 0.

+ +

Isto corresponde ao {{ cssxref(":-moz-system-metric(touch-enabled)") }} CSS pseudo-class.

+ +

Exemplo

+ +

You might use this to render your buttons slightly larger, for example, if the user is on a touch-screen device, to make them more finger-friendly.

+ +

{{ h3_gecko_minversion("-moz-windows-classic", "1.9.2") }}

+ +

Valor: {{cssxref("<integer>")}}
+ Mídia: {{cssxref("Media/Visual")}}
+ Aceita prefixos min/max: não

+ +

If the user is using Windows unthemed (in classic mode instead of using uxtheme), this is 1; otherwise it's 0.

+ +

Isto corresponde ao {{ cssxref(":-moz-system-metric(windows-classic)") }} CSS pseudo-class.

+ +

{{ h3_gecko_minversion("-moz-windows-compositor", "1.9.2") }}

+ +

Valor: {{cssxref("<integer>")}}
+ Mídia: {{cssxref("Media/Visual")}}
+ Aceita prefixos min/max: não

+ +

If the user is using Windows with the DWM compositor, this is 1; otherwise it's 0.

+ +

Isto corresponde ao {{ cssxref(":-moz-system-metric(windows-compositor)") }} CSS pseudo-class.

+ +

{{ h3_gecko_minversion("-moz-windows-default-theme", "1.9.2") }}

+ +

Valor: {{cssxref("<integer>")}}
+ Mídia: {{cssxref("Media/Visual")}}
+ Aceita prefixos min/max: não

+ +

If the user is currently using one of the default Windows themes (Luna, Royale, Zune, or Aero (including Vista Basic, Vista Advanced, and Aero Glass), this is 1. Otherwise it's 0.

+ +

Isto corresponde ao {{ cssxref(":-moz-system-metric(windows-default-theme)") }} CSS pseudo-class.

+ +

{{ h3_gecko_minversion("-moz-windows-glass", "21.0") }}

+ +

Valor: {{cssxref("<integer>")}}
+ Mídia: {{cssxref("Media/Visual")}}
+ Aceita prefixos min/max: não

+ +

If the user is using Windows Glass theme, this is 1; otherwise it's 0. Note that this only exists for Windows 7 and earlier.

+ +

{{ h3_gecko_minversion("-moz-windows-theme", "2.0") }}

+ +

Valor: aero | luna-blue | luna-olive | luna-silver | royale | generic | zune
+ Mídia: {{cssxref("Media/Visual")}}
+ Aceita prefixos min/max: não

+ +

Indicates which Windows theme is currently being used. Only available on Windows. Possible values are:

+ + + +

Isto é previsto para skins de aplicativo e outro código de aplicações de chrome a ser capaz de se adaptar a funcionar bem com o actual tema do Windows.

+ +

Compatibilidade no navegador

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico{{ CompatChrome("21") }}{{ CompatGeckoDesktop("1.9.1") }}{{ CompatIE("9.0") }}{{ CompatOpera("9") }}{{ CompatSafari("4") }}
Grade{{ CompatUnknown() }}{{ CompatNo() }} (grid media type is not supported){{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
Resolução{{ CompatChrome("29") }}{{ CompatGeckoDesktop("1.9.1") }} supports {{cssxref("<integer>")}} values;
+ {{ CompatGeckoDesktop("8.0") }} supports {{cssxref("<number>")}} values, as per the spec.		{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
Scan{{ CompatUnknown() }}{{ CompatNo() }} (tv media type is not supported){{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

See also

+ + diff --git a/files/pt-br/web/css/modelo_layout/index.html b/files/pt-br/web/css/modelo_layout/index.html deleted file mode 100644 index 883cdbd4a4..0000000000 --- a/files/pt-br/web/css/modelo_layout/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: Modelo de layout -slug: Web/CSS/Modelo_layout -translation_of: Web/CSS/Layout_mode ---- -

O modelo de layout CSS, às vezes abreviado por layout, é um algoritimo que determina a posição e tamanho dos boxes baseado em como estes interagem com os boxes filhos e boxe ancestral. Há vários layouts:

- - - -
-

Note: Not all CSS properties apply to all layout modes. Most of them apply to one or two of them and have no effect if they are set on an element participating in another layout mode.

-
- -

Veja Também

- - diff --git a/files/pt-br/web/css/modelo_visual/index.html b/files/pt-br/web/css/modelo_visual/index.html deleted file mode 100644 index a37a0cc7b0..0000000000 --- a/files/pt-br/web/css/modelo_visual/index.html +++ /dev/null @@ -1,227 +0,0 @@ ---- -title: Modelo de formatação visual -slug: Web/CSS/Modelo_Visual -tags: - - CSS - - CSS conceitos basicos - - Intermediário -translation_of: Web/CSS/Visual_formatting_model ---- -

{{CSSRef}}

- -

The CSS visual formatting model is an algorithm that processes a document and displays it on visual media. This model is a basic concept of CSS.

- -

The visual formatting model transforms each element of the document and generates zero, one, or several boxes that conform to the CSS box model. The layout of each box is defined by:

- - - -

The model renders a box, in relation to the edge of its containing block. Usually, a box establishes the containing block for its descendants. However, a box is not constrained by its containing block; when a box's layout goes outside the containing block, it is said to overflow.

- -

 Gerando um Box

- -

Box generation is the part of the CSS visual formatting model that creates boxes from the document's elements. Generated boxes are of different types, which affect how the visual formatting is done. The type of the box generated depends on the value of the {{ cssxref("display") }} CSS property.

- -

Block-level elements and block boxes

- -

An element is said to be block-level when the calculated value of its {{ cssxref("display") }} CSS property is: block, list-item, or table. A block-level element is visually formatted as a block (e.g., paragraph), intended to be vertically stacked.

- -

Each block-level box participates in a block formatting context. Each block-level element generates at least one block-level box, called the principal block-level box. Some elements, like a list-item element, generating further boxes to handle bullets and other typographic elements introducing the list item, may generate more boxes. Most generate only the principal, block-level box.

- -

The principal block-level box contains descendant-generated boxes and generated content. It is also the box involved in the positioning scheme.

- -

venn_blocks.pngA block-level box may also be a block container box. A block container box is a box that contains only other block-level boxes, or creates an inline formatting context, thus containing only inline boxes.

- -

It is important to note that the notions of a block-level box and block container box are disjoined. The first, describes how the box behaves with its parents and sibling. The second, how it interacts with its descendants. Some block-level boxes, like tables, aren't block container boxes. Reciprocally, some block container boxes, like non-replaced inline blocks and non-replaced table cells, aren't block-level boxes.

- -

Block-level boxes that also are block container boxes are called block boxes.

- -

Anonymous block boxes

- -

In some cases, the visual formatting algorithm needs to add supplementary boxes. Because CSS selectors cannot style or name these boxes, they are called anonymous boxes.

- -

Because selectors do not work with anonymous boxes, they cannot be styled via a stylesheet. This means that all inheritable CSS properties have the inherit value, and all non-inheritable CSS properties, have the initial value.

- -

Block containing boxes contain only inline-level boxes, or only block-level boxes. But often the document contains a mix of both. In that case, anonymous block boxes are created around adjacent inline-level boxes.

- -

Exemplo

- -

If we take the following HTML code (with default styling applied to it, that is {{ HTMLElement("div") }} and {{ HTMLElement("p") }} elements have display:block :

- -
<div>Some inline text <p>followed by a paragraph</p> followed by more inline text.</div>
- -

Two anonymous block boxes are created: one for the text before the paragraph (Some inline text), and another for the text after it (followed by more inline text). This builds the following block structure:

- -

anonymous_block-level_boxes.png

- -

Leading to:

- -
Some inline text
-followed by a paragraph
-followed by more inline text.
-
- -

Unlike the {{ HTMLElement("p") }} element's box, Web developers cannot control the style of the two anonymous boxes. Inheritable properties take the value from the {{ HTMLElement("div") }}'s property value, like {{ cssxref("color") }} to define the color of the text, and set the others to the initial value. For example, they won't have a specific {{ cssxref("background-color") }}, it is always transparent, the initial value for that property, and thus the background of the <div> is visible. A specific background color can be applied to the <p> box. Similarly, the two anonymous boxes always use the same color for their text.

- -

Another case that leads to the creation of anonymous block boxes, is an inline box that contains one or several block boxes. In that case, the box containing the block box is split into two inline boxes: one before, and one after the block box. All the inline boxes before the block box are then enclosed into an anonymous block box, so are the inline boxes following the block box. Therefore, the block box becomes the sibling of the two anonymous block boxes containing the inline elements.

- -

If there are several block boxes, without inline content in-between, the anonymous block boxes are created before, and after the set of boxes.

- -

Exemplo

- -

If we take the following HTML code, with {{ HTMLElement("p") }} have display:inline and {{ HTMLElement("span") }} have display:block :

- -
<p>Some <em>inline</em> text <span>followed by a paragraph</span> followed by more inline text.</p>
- -

Two anonymous block boxes are created, one for the text before the span Element (Some inline text) and one for the text after it (followed by more inline text), which gives the following block structure:

- -

- -

Which leads to:

- -
Some inline text
-followed by a paragraph
-followed by more inline text.
-
- -

Inline-level elements and inline boxes

- -

An element is said to be inline-level when the calculated value of its {{ cssxref("display") }} CSS property is: inline, inline-block or inline-table. Visually, it doesn't constitute blocks of contents, but is distributed in lines with other inline-level content. Typically, the content of a paragraph with different formatting, like emphasis or images, is made from inline-level elements.

- -

venn_inlines.png

- -
-

This diagram uses outdated terminology; see note below. Besides that, it is incorrect because the yellow ellipsis on the right side is per definition either identical to the one on the left side, or bigger than that (it could be a mathematical superset), because the spec says "Inline-level elements generate inline-level boxes, which are boxes that participate in an inline formatting context", see CSS 2.2, chapter 9.2.2

-
- -

Inline-level elements generate inline-level boxes that are defined as boxes participating to an inline formatting context. Inline boxes are both inline-level boxes and boxes, whose contents participate in their container's inline formatting context. This is the case, for example, for all non-replaced boxes with display:inline. Inline-level boxes, whose contents do not participate in an inline formatting context, are called atomic inline-level boxes. These boxes, generated by replaced inline-level elements or by elements with a calculated {{ cssxref("display") }} value of inline-block or inline-table, are never split into several boxes, as is possible with inline boxes.

- -
Note: Initially, atomic inline-level boxes were called atomic inline boxes. This was unfortunate, as they are not inline boxes. This was corrected in an erratum to the spec. Nevertheless, you can harmlessly read atomic inline-level box each time you meet atomic inline box in the literature, as this is only a name change.
- -
Atomic inline boxes cannot be split into several lines in an inline formatting context. -
-
<style>
-  span {
-    display:inline; /* default value*/
-  }
-</style>
-<div style="width:20em;">
-   The text in the span <span>can be split in several
-   lines as it</span> is an inline box.
-</div>
-
- -

which leads to:

- -
The text in the span can be split into several lines as it is an inline box.
- -
<style>
-  span {
-    display:inline-block;
-  }
-</style>
-<div style="width:20em;">
-   The text in the span <span>cannot be split in several
-   lines as it</span> is an inline-block box.
-</div>
-
- -

which leads to:

- -
The text in the span cannot be split into several lines as it is an inline-block box.
-
-
- -

Anonymous inline boxes

- -

As for block boxes, there are a few cases where inline boxes are created automatically by the CSS engine. These inline boxes are also anonymous as they cannot be named by selectors; they inherit the value of all inheritable properties, setting it to initial for all others.

- -

The most common case where an anonymous inline box is created, is when some text is found as a direct child of a block box creating an inline formatting context. In that case, this text is included in the largest possible anonymous inline box. Also, space content, which would be removed by the behavior set in the {{ cssxref("white-space") }} CSS property, does not generate anonymous inline boxes because they would end empty.

- -
Example TBD
- -

Outros tipos de boxes

- -

Line boxes

- -

Line boxes are generated by the inline formatting context to represent a line of text. Inside a block box, a line box extends from one border of the box to the other. When there are floats, the line box starts at the rightmost border of the left floats and ends at the leftmost border of the right floats.

- -

These boxes are technical, and Web authors do not usually have to bother with them.

- -

Run-in boxes

- -

Run-in boxes, defined using display:run-in, are boxes that are either block boxes or inline boxes, depending on the type of the following box. They can be used to create a title that runs inside its first paragraph when possible.

- -
Note: Run-in boxes were removed from the CSS 2.1 standard, as they were insufficiently specified to allow for interoperable implementation. They may reappear in CSS3, but meanwhile, are considered experimental. They should not be used in production.
- -

Model-induced boxes

- -

Besides the inline and block formatting contexts, CSS specifies several additional content models that may be applied to elements. These additional models, used to describe specific layouts, may define additional box types:

- - - -

Positioning schemes

- -

Once boxes are generated, the CSS engine needs to position them on the layout. To do that, it uses one of the following algorithms:

- - - -

Normal flow

- -

In the normal flow, boxes are laid out one after the other. In a block formatting context, they are laid out vertically; in an inline formatting context, they are laid out horizontally. The normal flow is triggered when the CSS {{ cssxref("position") }} is set to the value static or relative, and if the CSS {{ cssxref("float") }} is set to the value none.

- -

Exemplo

- -
When in the normal flow, in a block formatting context, boxes are laid vertically one after the other out:
-
-[image]
-
-When in the normal flow, in an inline formatting context, boxes are laid horizontally one after the other out:
-
-[image]
- -

There are two sub-cases of the normal flow: static positioning and relative positioning:

- - - -

Floats

- -

In the float positioning scheme, specific boxes (called floating boxes or simply floats) are positioned at the beginning, or end of the current line. This leads to the property that text (and more generally anything within the normal flow) flows along the edge of the floating boxes, except if told differently by the {{ cssxref("clear") }} CSS property.

- -

The float positioning scheme for a box is selected, by setting the {{ cssxref("float") }} CSS property on that box to a value different than none and {{ cssxref("position") }} to static or relative. If {{ cssxref("float") }} is set to left, the float is positioned at the beginning of the line box. If set to right, the float is positioned at the end of the line box. In either case, the line box is shrunk to fit alongside the float.

- -

[image]

- -

Absolute positioning

- -

In the absolute positioning scheme, boxes are entirely removed from the flow and don't interact with it at all. They are positioned relative to their containing block using the {{ cssxref("top") }}, {{ cssxref("bottom") }}, {{ cssxref("left") }} and {{ cssxref("right") }} CSS properties.

- -

An element is absolutely positioned if the {{ cssxref("position") }} is set to absolute or fixed.

- -

With a fixed positioned element, the containing block is the viewport. The position of the element is absolute within the viewport. Scrolling does not change the position of the element.

- -

Veja Também

- - diff --git a/files/pt-br/web/css/overflow-wrap/index.html b/files/pt-br/web/css/overflow-wrap/index.html new file mode 100644 index 0000000000..c23f4b966d --- /dev/null +++ b/files/pt-br/web/css/overflow-wrap/index.html @@ -0,0 +1,117 @@ +--- +title: word-wrap +slug: Web/CSS/word-wrap +translation_of: Web/CSS/overflow-wrap +--- +
{{CSSRef}} {{SeeCompatTable}}
+ +

Resumo

+ +

A propriedade CSS word-wrap é utilizada para especificar se o navegador pode ou não quebrar linhas dentro das palavras, afim de prevenir o vazamento quando do contrário uma sequencia de caracteres é muito longa para caber na caixa que o contém.

+ +
Nota: Originalmente uma extensão proprietária da Microsoft (não prefixada), a propriedade word-wrap foi renomeada para overflow-wrap no rascunho atual do texto de especificações do CSS3. Compilações estáveis do Google Chrome e do Opera têm suporte a nova sintaxe.
+ +

{{cssinfo}}

+ +

Sintaxe

+ +
word-wrap:  normal | break-word
+ +

Valores

+ +
+
normal
+
Indica que as linhas só podem quebrar em pontos de quebra normais de palavras.
+
break-word
+
Indica que as palavras normalmente inquebráveis podem ser quebrados em pontos arbitrários se não houver pontos de quebra de outra forma aceitáveis na linha.
+
+ +

Exemplos

+ +
p { width: 13em; background: gold; }
+ +

FStrPrivFinÄndG (Gesetz zur Änderung des Fernstraßenbauprivatfinanzierungsgesetzes und straßenverkehrsrechtlicher Vorschriften)

+ +
p { width: 13em; background: gold; word-wrap: break-word; }
+ +

FStrPrivFinÄndG (Gesetz zur Änderung des Fernstraßenbauprivatfinanzierungsgesetzes und straßenverkehrsrechtlicher Vorschriften)

+ +

Especificações

+ + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
CSS Text Level 3{{ Spec2('CSS3 Text') }} 
+ +

Compatibilidade entre navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Suporte básico{{ CompatGeckoDesktop("1.9.1") }}1.05.510.51.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Suporte básico{{ CompatGeckoMobile("1.9.1") }}1.0{{ CompatUnknown() }}{{ CompatUnknown() }}1.0
+
+ + + +

Veja também

+ + diff --git a/files/pt-br/web/css/privacidade_e_o_seletor__colon_visited/index.html b/files/pt-br/web/css/privacidade_e_o_seletor__colon_visited/index.html deleted file mode 100644 index 273c7765e3..0000000000 --- a/files/pt-br/web/css/privacidade_e_o_seletor__colon_visited/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: 'Privacidade e o seletor :visited' -slug: 'Web/CSS/Privacidade_e_o_seletor_:visited' -tags: - - CSS - - Guía - - Pseudo-classe - - Referencia - - Segurança - - Seletores -translation_of: 'Web/CSS/Privacy_and_the_:visited_selector' ---- -
{{cssref}}
- -

Antes de 2010, o seletor CSS {{ cssxref(":visited") }} permitia que websites descobrissem o histórico de navegação dos usuários e quais sites estes haviam visitado. Isto foi feito por meio do {{domxref("window.getComputedStyle")}} e outras tecnicas. Este processo era fácil de ser feito, e tornou possível não somente determinar onde os usuários estiveram na internet, mas também poderia ser usado para descobrir um monte de informação sobre a identidade destes.

- -

Para contornar este problema, {{ Gecko("2") }} implementou atualizações de privacidade para limitar a quantidade de informações que poderiam ser obtidas através dos links visitados. Outros navegadores também fizeram mudanças similares.

- -

Pequenas mentiras brancas

- -

Para preservar a privacidade dos usuários, Firefox e outros navegadores irão mentir para aplicações webs sob certas circustâncias:

- - - - - -

Você pode estilizar links visitados, porém existem limites de quais estilos você pode usar. Somente os seguintes estilos podem ser aplicados para links visitados:

- - - -

Em adição, mesmo para os estilos acima, você não poderá alterar a transparência entre links visitados e não visitados, ou de outra maneira você seria capaz de usar rgba(), hsla(), ou a palavra chave transparent.

- -

Aqui está um exemplo de como estilizar com as restrições acima mencionadas:

- -
:link {
-  outline: 1px dotted blue;
-  background-color: white;
-  /* O valor padrão de background-color é `transparent`. Você precisa
-     especificar um valor diferente, caso contrário as mudanças
-     feitas em :visited não se aplicam. */
-}
-
-:visited {
-  outline-color: orange;    /* Links visitados tem contornos laranja */
-  background-color: green;  /* Links visitados tem um fundo verde */
-  color: yellow;            /* Links visitados tem texto amarelo */
-}
-
- -

Impacto nos desenvolvedores web

- -

No geral, essas restrições estas restrições não deveriam afetar desenvolvedores web tão significamente. Eles poderiam, como sempre, They may, no entanto, requerer essas seguintes mudanças nos sites existentes:

- - - -

Veja também

- - diff --git a/files/pt-br/web/css/privacy_and_the__colon_visited_selector/index.html b/files/pt-br/web/css/privacy_and_the__colon_visited_selector/index.html new file mode 100644 index 0000000000..273c7765e3 --- /dev/null +++ b/files/pt-br/web/css/privacy_and_the__colon_visited_selector/index.html @@ -0,0 +1,76 @@ +--- +title: 'Privacidade e o seletor :visited' +slug: 'Web/CSS/Privacidade_e_o_seletor_:visited' +tags: + - CSS + - Guía + - Pseudo-classe + - Referencia + - Segurança + - Seletores +translation_of: 'Web/CSS/Privacy_and_the_:visited_selector' +--- +
{{cssref}}
+ +

Antes de 2010, o seletor CSS {{ cssxref(":visited") }} permitia que websites descobrissem o histórico de navegação dos usuários e quais sites estes haviam visitado. Isto foi feito por meio do {{domxref("window.getComputedStyle")}} e outras tecnicas. Este processo era fácil de ser feito, e tornou possível não somente determinar onde os usuários estiveram na internet, mas também poderia ser usado para descobrir um monte de informação sobre a identidade destes.

+ +

Para contornar este problema, {{ Gecko("2") }} implementou atualizações de privacidade para limitar a quantidade de informações que poderiam ser obtidas através dos links visitados. Outros navegadores também fizeram mudanças similares.

+ +

Pequenas mentiras brancas

+ +

Para preservar a privacidade dos usuários, Firefox e outros navegadores irão mentir para aplicações webs sob certas circustâncias:

+ + + + + +

Você pode estilizar links visitados, porém existem limites de quais estilos você pode usar. Somente os seguintes estilos podem ser aplicados para links visitados:

+ + + +

Em adição, mesmo para os estilos acima, você não poderá alterar a transparência entre links visitados e não visitados, ou de outra maneira você seria capaz de usar rgba(), hsla(), ou a palavra chave transparent.

+ +

Aqui está um exemplo de como estilizar com as restrições acima mencionadas:

+ +
:link {
+  outline: 1px dotted blue;
+  background-color: white;
+  /* O valor padrão de background-color é `transparent`. Você precisa
+     especificar um valor diferente, caso contrário as mudanças
+     feitas em :visited não se aplicam. */
+}
+
+:visited {
+  outline-color: orange;    /* Links visitados tem contornos laranja */
+  background-color: green;  /* Links visitados tem um fundo verde */
+  color: yellow;            /* Links visitados tem texto amarelo */
+}
+
+ +

Impacto nos desenvolvedores web

+ +

No geral, essas restrições estas restrições não deveriam afetar desenvolvedores web tão significamente. Eles poderiam, como sempre, They may, no entanto, requerer essas seguintes mudanças nos sites existentes:

+ + + +

Veja também

+ + diff --git a/files/pt-br/web/css/pseudo-elementos/index.html b/files/pt-br/web/css/pseudo-elementos/index.html deleted file mode 100644 index a457c9ac9a..0000000000 --- a/files/pt-br/web/css/pseudo-elementos/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: Pseudo-elementos -slug: Web/CSS/Pseudo-elementos -tags: - - CSS - - Principiantes - - Pseudo-elementos - - Referencia - - Seletores -translation_of: Web/CSS/Pseudo-elements ---- -
{{ CSSRef() }}
- -
Um pseudo-elemento CSS é uma palavra-chave adicionada a um seletor que permite que você estilize uma parte específica do elemento selecionado. Por exemplo, o pseudo-elemento {{CSSxRef("::first-line")}} aplica o estilo apenas na primeira linha de um parágrafo.
- -
- -
/* A primeira linha de todo elemento <p>. */
-p::first-line {
-  color: blue;
-  text-transform: uppercase;
-}
- -
-

Observação: Diferentemente dos pseudo-elementos, {{cssxref("pseudo-classes")}} podem ser utilizadas para estilizar um elemento baseado em seu estado.

-
- -

Sintaxe

- -
seletor::pseudo-elemento {
-  propriedade: valor;
-}
-
- -

Você pode utilizar apenas um pseudo-elemento em um seletor. Ele deve aparecer depois da declaração de um elemento simples.

- -

Observação: Como regra, os dois pontos devem ser usados duas vezes  (::)  ao invés de uma única vez  (:). Isso distingue pseudo-classes de pseudo-elementos. Apesar disso, devido a essa distinção não estar presente em versões mais antigas da especificação da W3C, a maioria dos navegadores suportam ambas as sintaxes para os pseudo-elementos originais.

- -

Índice de pseudo-elementos comuns

- -
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NavegadorVersão mais baixaSuporte de
Internet Explorer8.0:pseudo-element
9.0:pseudo-element ::pseudo-element
Firefox (Gecko)1.0 (1.0):pseudo-element
1.0 (1.5):pseudo-element ::pseudo-element
Opera4.0:pseudo-element
7.0:pseudo-element ::pseudo-element
Safari (WebKit)1.0 (85):pseudo-element ::pseudo-element
- -

Ver também

- - diff --git a/files/pt-br/web/css/pseudo-elements/index.html b/files/pt-br/web/css/pseudo-elements/index.html new file mode 100644 index 0000000000..a457c9ac9a --- /dev/null +++ b/files/pt-br/web/css/pseudo-elements/index.html @@ -0,0 +1,104 @@ +--- +title: Pseudo-elementos +slug: Web/CSS/Pseudo-elementos +tags: + - CSS + - Principiantes + - Pseudo-elementos + - Referencia + - Seletores +translation_of: Web/CSS/Pseudo-elements +--- +
{{ CSSRef() }}
+ +
Um pseudo-elemento CSS é uma palavra-chave adicionada a um seletor que permite que você estilize uma parte específica do elemento selecionado. Por exemplo, o pseudo-elemento {{CSSxRef("::first-line")}} aplica o estilo apenas na primeira linha de um parágrafo.
+ +
+ +
/* A primeira linha de todo elemento <p>. */
+p::first-line {
+  color: blue;
+  text-transform: uppercase;
+}
+ +
+

Observação: Diferentemente dos pseudo-elementos, {{cssxref("pseudo-classes")}} podem ser utilizadas para estilizar um elemento baseado em seu estado.

+
+ +

Sintaxe

+ +
seletor::pseudo-elemento {
+  propriedade: valor;
+}
+
+ +

Você pode utilizar apenas um pseudo-elemento em um seletor. Ele deve aparecer depois da declaração de um elemento simples.

+ +

Observação: Como regra, os dois pontos devem ser usados duas vezes  (::)  ao invés de uma única vez  (:). Isso distingue pseudo-classes de pseudo-elementos. Apesar disso, devido a essa distinção não estar presente em versões mais antigas da especificação da W3C, a maioria dos navegadores suportam ambas as sintaxes para os pseudo-elementos originais.

+ +

Índice de pseudo-elementos comuns

+ +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NavegadorVersão mais baixaSuporte de
Internet Explorer8.0:pseudo-element
9.0:pseudo-element ::pseudo-element
Firefox (Gecko)1.0 (1.0):pseudo-element
1.0 (1.5):pseudo-element ::pseudo-element
Opera4.0:pseudo-element
7.0:pseudo-element ::pseudo-element
Safari (WebKit)1.0 (85):pseudo-element ::pseudo-element
+ +

Ver também

+ + diff --git a/files/pt-br/web/css/reference/index.html b/files/pt-br/web/css/reference/index.html new file mode 100644 index 0000000000..1afbf4890e --- /dev/null +++ b/files/pt-br/web/css/reference/index.html @@ -0,0 +1,75 @@ +--- +title: Referência de CSS +slug: Web/CSS/CSS_Reference +translation_of: Web/CSS/Reference +--- +{{CSSRef}} + +

Use esta referência de CSS para navegar por um índice alfabético das propriedades padrão do CSS, pseudo-classes, pseudo-elementos, tipos de dados e @-rules.

+ +

Esta referência lista não somente as propriedades do CSS1 e CSS2.1, mas também referências para qualquer propriedade, conceito padronizado ou estabilizado do CSS3.

+ +

Veja também Extensões CSS Mozilla para propriedades específicas do Gecko prefixadas com -moz e Extensões CSS do WebKit para propriedades específicas do WebKit. Veja Visão geral de propriedades CSS prefixadas por distribuidor por Peter Beverloo para todas as propriedades prefixadas.

+ +

{{ CSS_Ref() }}

+ +

Seletores

+ + + +

Miscelânea

+ + + +

Conceitos

+ + diff --git a/files/pt-br/web/css/replaced_element/index.html b/files/pt-br/web/css/replaced_element/index.html new file mode 100644 index 0000000000..22ba1b8ad0 --- /dev/null +++ b/files/pt-br/web/css/replaced_element/index.html @@ -0,0 +1,40 @@ +--- +title: Elemento substituído +slug: Web/CSS/Elemento_substituido +translation_of: Web/CSS/Replaced_element +--- +
{{CSSRef()}}
+ +

Sumario

+ +

In CSS, a replaced element is an element whose representation is outside the scope of CSS. These are a type of external object whose representation is independent of the CSS. Typical replaced elements are:

+ + + +

Some elements are treated as replaced elements only in specific cases:

+ + + +

The only form control that is also a replaced element is {{HTMLElement("input")}} of the image type. All other form controls are non-replaced elements.

+ +

Objects inserted using the CSS {{cssxref("content")}} properties are anonymous replaced elements.

+ +

CSS handles replaced elements specifically in some cases, like when calculating margins and some auto values.

+ +

Note that some replaced elements, but not all, have intrinsic dimensions or a defined baseline, which is used by some CSS properties like {{cssxref("vertical-align")}}.

+ +

Veja também

+ + diff --git a/files/pt-br/web/css/resolved_value/index.html b/files/pt-br/web/css/resolved_value/index.html new file mode 100644 index 0000000000..a045149bc7 --- /dev/null +++ b/files/pt-br/web/css/resolved_value/index.html @@ -0,0 +1,40 @@ +--- +title: Valor Resolvido +slug: Web/CSS/Valor_resolvido +tags: + - CSS + - Guía + - Iniciante + - Web +translation_of: Web/CSS/resolved_value +--- +
{{cssref}}
+ +

The resolved value of a CSS property is the value returned by {{domxref("Window.getComputedStyle", "getComputedStyle()")}}. For most properties, it is the {{cssxref("computed_value", "computed value") }}, but for a few legacy properties (including {{cssxref("width")}} and {{cssxref("height")}}), it is instead the {{cssxref("used_value", "used value")}}. See the specification link below for more per-property details.

+ +

Especificações

+ + + + + + + + + + + + + + + + +
EspecificaçõesStatusComentário
{{SpecName("CSSOM", "#resolved-values", "resolved value")}}{{Spec2("CSSOM")}}Definicação inicial
+ +

Veja também

+ + diff --git a/files/pt-br/web/css/seletor_de_atributos/index.html b/files/pt-br/web/css/seletor_de_atributos/index.html deleted file mode 100644 index 88881a61ea..0000000000 --- a/files/pt-br/web/css/seletor_de_atributos/index.html +++ /dev/null @@ -1,158 +0,0 @@ ---- -title: Seletor de atributos -slug: Web/CSS/Seletor_de_atributos -translation_of: Web/CSS/Attribute_selectors ---- -
{{CSSRef}}
- -

O seletor de atributos combina elementos baseado no valor de um atributo dado.

- -
/* <a> elementos com um atributo de título  */
-a[title] {
-  color: purple;
-}
-
-/* <a> elementos combinando com um href "https://example.org" */
-a[href="https://example.org"] {
-  color: green;
-}
-
-/* <a> elementos com um href contendo "example" */
-a[href*="example"] {
-  font-size: 2em;
-}
-
-/* <a> elementos com href terminando em ".org" */
-a[href$=".org"] {
-  font-style: italic;
-}
- -
-
[attr]
-
Representa um elemento com atributo de nome attr.
-
[attr=value]
-
Representa um elemento com um atributo de nome attr, o qual o valor é  exatamente  value.
-
[attr~=value]
-
Representa um elemento com um atributo de nome attr, o qual value é  uma lista de palavras separadas por espaços, e uma dessas é  exatamente  value.
-
[attr|=value]
-
Representa um elemento com um atributo de nome attr  o qual o valor pode ser exatamente value ou pode começar com value imediatamente seguido por hífen - (U+002D). Isso somente é usado para linguagens que combinam sub-códigos.
-
[attr^=value]
-
Representa um elemento com um atributo com nome attr que tem um valor prefixado (precedido) por value.
-
[attr$=value]
-
Representa um elemento com um atributo de nome attr que  tem como sufixo (seguido) por value.
-
[attr*=value]
-
Representa um elemento com um atributo de nome attr o qual valor contém ao menos uma ocorrência de value contido na string.
-
[attr operator value i]
-
Adiciona um i (ou I) antes do fechamento das chaves {}, faz com que o valor seja comparado sem levar em conta caixa alta ou caixa baixa(para caracteres dentro da faixa ASCII).
-
- -

Exemplos

- - - -

CSS

- -
a {
-  color: blue;
-}
-
-/* Links internos, começando com "#" */
-a[href^="#"] {
-  background-color: gold;
-}
-
-/* Links com "example" em qualquer lugar da URL */
-a[href*="example"] {
-  background-color: silver;
-}
-
-/* Links com "insensitive" em qualquer lugar da URL,
-   independentemente da capitalização */
-a[href*="insensitive" i] {
-  color: cyan;
-}
-
-/* Links com final ".org" */
-a[href$=".org"] {
-  color: red;
-}
-
- -

HTML

- -
<ul>
-  <li><a href="#internal">Internal link</a></li>
-  <li><a href="http://example.com">Example link</a></li>
-  <li><a href="#InSensitive">Insensitive internal link</a></li>
-  <li><a href="http://example.org">Example org link</a></li>
-</ul>
- -

Resultado

- -

{{EmbedLiveSample('Links')}}

- -

Languages

- -

CSS

- -
/* Todas divs com um atributo `lang` em negrito. */
-div[lang] { font-weight: bold; }
-/* Todas divs com US English em azul (blue). */
-div[lang~="en-us"] { color: blue; }
-/* Todas divs onde Portuguese esta em verde (green). */
-div[lang="pt"] { color: green; }
-/* Todas divs onde Chinese esta em vermelho (red), Simplificado para (zh-CN) ou tradicional (zh-TW). */
-div[lang|="zh"] { color: red; }
-/* Todas divs com Traditional Chinese `data-lang` que é purple. */
-/* Nota: Você também poderia usar atributos separados por hífen com aspas duplas */
-div[data-lang="zh-TW"] { color: purple; }
-
- -

 

- -

HTML

- -
<div lang="en-us en-gb en-au en-nz">Hello World!</div>
-<div lang="pt">Olá Mundo!</div>
-<div lang="zh-CN">世界您好！</div>
-<div lang="zh-TW">世界您好！</div>
-<div data-lang="zh-TW">?世界您好！</div>
- -

Resultado

- -

{{EmbedLiveSample('Languages')}}

- -

Especificações

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS4 Selectors', '#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS4 Selectors')}}Adiciona um modificador para a seleção do valor do atributo ASCII 
{{SpecName('CSS3 Selectors', '#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS2.1')}}Definição Inicial
- -

Browser compatibilidade

- - - -

{{Compat("css.selectors.attribute")}}

diff --git a/files/pt-br/web/css/seletor_universal/index.html b/files/pt-br/web/css/seletor_universal/index.html deleted file mode 100644 index 15e64a08ca..0000000000 --- a/files/pt-br/web/css/seletor_universal/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: Seletor universal -slug: Web/CSS/Seletor_universal -tags: - - CSS - - Referências - - Seletores -translation_of: Web/CSS/Universal_selectors ---- -
{{CSSRef}}
- -

O seletor universal do CSS (*) aplica estilos a elementos de qualquer tipo.

- -
/* Seleciona todos os elementos */
-* {
-  color: green;
-}
- -

A partir do CSS3, o asterisco pode ser combinado com {{cssxref("CSS_Namespaces", "namespaces")}}:

- - - -

Sintaxe

- -
* { propriedades de estilo }
- -

O asterisco é opcional para seletores simples. Por exemplo, *.atencao e .atencao são equivalentes.

- -

Exemplos

- -

CSS

- -
* [lang^=pt] {
-  color: green;
-}
-
-*.atencao {
-  color: red;
-}
-
-*#conteudoprincipal {
-  border: 1px solid blue;
-}
-
-.flutuando {
-  float: left
-}
-
-/* automaticamente aplica clear ao próximo irmão após o elemento com a classe .flutuando */
-.flutuando + * {
-  clear: left;
-}
-
- -

HTML

- -
<p class="atencao">
-  <span lang="pt-br">Um span verde</span> em um parágrafo vermelho.
-</p>
-<p id="conteudoprincipal" lang="pt-pt">
-  <span class="atencao">Um span vermelho</span> em um parágrafo verde.
-</p>
- -

Resultado

- -

{{EmbedLiveSample('Exemplos')}}

- -

Especificações

- - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{SpecName('CSS4 Selectors', '#the-universal-selector', 'Seletor universal')}}{{Spec2('CSS4 Selectors')}}Sem mudanças
{{SpecName('CSS3 Selectors', '#universal-selector', 'Seletor universal')}}{{Spec2('CSS3 Selectors')}}Define o comportamente de acordo com os namespaces e adiciona uma sugestão de que é possivel omitir o seletor em pseudo-elementos
{{SpecName('CSS2.1', 'selector.html#universal-selector', 'Seletor universal')}}{{Spec2('CSS2.1')}}Definição inicial
- -

Compatibilidade dos Browsers

- - - -

{{Compat("css.selectors.universal")}}

diff --git a/files/pt-br/web/css/seletores_css/index.html b/files/pt-br/web/css/seletores_css/index.html deleted file mode 100644 index 644d9d87e9..0000000000 --- a/files/pt-br/web/css/seletores_css/index.html +++ /dev/null @@ -1,150 +0,0 @@ ---- -title: Seletores CSS -slug: Web/CSS/Seletores_CSS -tags: - - CSS - - Referência(2) - - Seletores - - Seletores CSS -translation_of: Web/CSS/CSS_Selectors ---- -
{{CSSRef}}
- -

Os Seletores definem quais elementos um conjunto de regras CSS se aplica.

- -

Seletores Básicos

- -
-
Seletor por tag
-
Este seletor básico escolhe todos os elementos que correspondem ao nome fornecido.
- Sintaxe: nome-da-tag
- Exemplo: input corresponderá a qualquer elemento {{HTMLElement('input')}}.
-
Seletor por classe
-
Este seletor básico escolhe elementos baseados no valor de seu atributo classe. Sintaxe: .nome-da-classe
- Examplo: .index irá corresponder a qualquer elemento que tenha o índice de classe (provavelmente definido por um atributo class="index", ou similar).
-
Seletor por ID
-
Este seletor básico escolhe nós baseados no valor do atributo id. Deve existir apenas um elemento com o mesmo ID no mesmo documento.
- Sintaxe: #nome-do-id
- Exemplo: #toc irá corresponder ao elemento que possuir o id=toc (definido por um atributo id="toc", ou similar).
-
Seletores universais
-
Este seletor básico irá escolher todos os nós. Ele também existe em um namespace único e em uma variante de todo o namespace também.
- Sintaxe: * ns|* *|*
- Exemplo: * irá corresponder a todos os elementos do documento.
-
Seletores por atributo
-
Este seletor básico ira escolher nós baseados no valor de um de seus atributos, ou até mesmo pelo próprio atributo.
- Sintaxe: [atrib] [atrib=valor] [atrib~=valor] [atrib|=valor] [atrib^=valor] [atrib$=valor] [atrib*=valor]
- Exemplo: [autoplay] irá corresponder a todos os elementos que possuirem o atributo autoplay (para qualquer valor).
-
- -

Combinadores

- -
-
Seletores de irmãos adjacentes
-
O combinador + seleciona os nós que seguem imediatamente o elemento especificado anteriormente.
- Sintaxe: A + B
- Exemplo: ul + li irá corresponder a qualquer elemento {{HTMLElement('li')}} que segue imediatamente após um elemento {{HTMLElement('ul')}}.
-
Seletores gerais de irmãos
-
O combinador ~ seleciona os nós que seguem (não necessariamente imediatamente) o elemento especificado anteriormente, se ambos os elementos compartilham o mesmo pai.
- Sintaxe: A ~ B
- Exemplo: p ~ span irá corresponder a todo elemento {{HTMLElement('span')}} que seguir um elemento {{HTMLElement('p')}} dentro de um mesmo elemento pai.
-
Seletor de filhos
-
O combinador > selecina nós que são filhos diretos do elemento especificado anteriormente.
- Sintaxe: A > B
- Exemplo: ul > li irá corresponder a todo elemento {{HTMLElement('li')}} que estiver diretamente dentro de um elemento {{HTMLElement('ul')}} especificado.
-
Seletor de descendentes
-
O combinador   seleciona os nós que são filhos do elemento especificado anteriormente (não é necessário que seja um filho direto).
- Sintaxe: A B
- Exemplo: div span irá corresponder a todo e qualquer elemento {{HTMLElement('span')}} que estiver dentro do elemento {{HTMLElement('div')}}.
-
- -

Pseudo-classes

- -

Pseudo-classes permitem selecionar elementos baseados em informações que não estão contidas na árvore de documentos como um estado ou que é particularmente complexa de extrair. Por exemplo, eles correspondem se um link foi visitado anteriormente ou não.

- -

Pseudo-elementos

- -

Pseudo-elementos são asbtrações da árvore que representam entidades além do que o HTML faz. Por exemplo, o HTML não tem um elemento que descreva a primeira letra ou linha de um parágrafo, ou o marcador de uma lista. Os pseudo-elementos representam essas entidades e permitem que as regras CSS sejam associadas a elas. Desta forma, essas entidades podem ser denominadas independentemente.

- -

Especificações

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{SpecName('CSS4 Selectors')}}{{Spec2('CSS4 Selectors')}} 
{{SpecName('CSS3 Selectors')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Definição inicial
- -

Compatibilidade de navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
RecursoChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico1{{CompatGeckoDesktop("1")}}3.03.51.0
-
- -
- - - - - - - - - - - - - - - - - - - -
RecursoAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico1.5{{CompatGeckoMobile("1.9.2")}}{{CompatUnknown}}{{CompatUnknown}}3.2
-
diff --git a/files/pt-br/web/css/sintaxe/index.html b/files/pt-br/web/css/sintaxe/index.html deleted file mode 100644 index 4d6ff0bf1c..0000000000 --- a/files/pt-br/web/css/sintaxe/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: Sintaxe -slug: Web/CSS/sintaxe -translation_of: Web/CSS/Syntax ---- -

O Objetivo básico da linguagem de folhas de estilo em cascata (CSS) é permitir que um motor do navegador pinte elementos na página com características específicas como cores, posições, ou decorações. A sintaxe CSS reflete estes objetivos e seus blocos de contrução básicos são:

- - - -

Declarações do CSS

- -

A definição de propriedades CSS para um valor específico é a função principal da linguagem CSS. A propriedade e valor são chamados de declaração, e qualquer motor do CSS calcula quais declarações serão aplicadas para todos um único elemento da página em ordem adequadamente, a fim de exibí-lo com o estilo correto.

- -

Tanto as propriedades como os valores são case-sensitive no CSS. Os pares se separam por dois pontos, ':' (U+003A COLON), e espaços em branco antes, entre e depois de propriedades e valores, porém os espaços dentro da declaração são ignorados.

- -

css syntax - declaration.png

- -

Existem mais de 100 propriedades diferentes no CSS e um número quase infinito de diferentes valores. Nem todos os pares de propriedades e valores são permitidos em cada propriedade define o que são valores válidos. Quando um valor não é válido para uma determinada propriedade, a declaração é considerada inválida e é totalmente ignorada pelo motor do CSS.

- -

Blocos de declaração CSS

- -

Declarações são agrupadas em blocos, que estão delimitados na estrutura com uma chave de abertura, '{' (U+007B LEFT CURLY BRACKET), e fechadas com outra, '}' (U+007D RIGHT CURLY BRACKET). Os blocos as vezes podem estar aninhados, a abertura e fechamento de chaves no bloco CSS deve ser realizada.

- -

css syntax - block.png

- -

Esses blocos são chamados de blocos de declaração e as declarações dentro deles são separadas por, ';' (U+003B SEMICOLON). Um bloco de declaração pode não conter nenhuma declaração. Espaços em branco em volta das declarações não são consideradas. Não é necessário que a última declaração possua ponto e vírgula, apesar de ser considerada uma boa prática pois previne o esquecimento de acrescê-la quando for necessário aumentar o bloco.

- -

css syntax - declarations block.png

- -
O conteúdo de um bloco de declaração, que é uma lista separada por pontos e vírgulas, sem as chaves, pode ser posto dentro da tag HTML style.
- -

Regras CSS

- -

Se as folhas de estilo pudessem apenas aplicar uma declaração para cada elemento de uma página da web, eles seriam bem limitados. O principal objetivo é aplicar diferentes declarações a diferentes partes do documento.

- -

O CSS associa as condições com os blocos de declaração. Cada bloco (válido) é precedido por um ou mais seletores, separados por vírgula, que são condições selecionando alguns elementos da página. O grupo de seletores é chamado de regra.css syntax - ruleset.png

- -

Um elemento pode ser modificado por diversos seletores, e por isso por diversas regras que potencialmente podem conter diversas propriedades, com diferentes valores, o CSS padrão define aquele que possui a precedência e que será aplicado: esse é o tal algoritmo em cascata.

- -
É importante perceber que quando uma regra é caracterizada por um grupo de seletores que são algum tipo de atalho com cada um sendo um simples seletor isso não se aplica a validade da regra por si só.
-
-Isso leva a uma importante consequência: se apenas um dos seletores for inválido, como usar uma pseudo-classe ou pseudo-elemento desconhecido, todo o seletor é inválido e por isso toda a regra é ignorada (invalidada também).
- -

CSS statements

- -

Rulesets are the main building blocks of a style sheet, which often consists of only a big list of them. But there is other information that a Web author wants to convey in the style sheet, like the character set, other external style sheets to import, font face or list counter descriptions and many more. It will use other and specific kinds of statements to do that.

- -

A statement is a building block that begins with any non-space characters and ends at the first closing brace or semi-colon (outside a string, non-escaped and not included into another {}, () or [] pair).

- -

css syntax - statements Venn diag.png

- -

There are different kinds of statements:

- - - -

Any statement which isn't a rule or an at-rule is invalid and ignored.

- -

There is another group of statements, the nested statements, these are statements that can be used in a specific subset of at-rules, the conditional group rules. These statements only apply if a specific condition is matched: the @media at-rule content is applied only if the device on which runs the browser matches the expressed condition; the @document at-rule content is applied only if the current page matches some conditions, and so on. In CSS1 and CSS2.1, only rulesets could be used inside a conditional group rules. That was very restrictive and this restriction was lifted in CSS Conditionals Level 3. Now, though it still is experimental and not support by every browser, a conditional group rules can contain a wider range of content, rulesets but also some, but not all, at-rules.

- -

See also

- - diff --git a/files/pt-br/web/css/sintexe_valor/index.html b/files/pt-br/web/css/sintexe_valor/index.html deleted file mode 100644 index d14bcaecdf..0000000000 --- a/files/pt-br/web/css/sintexe_valor/index.html +++ /dev/null @@ -1,436 +0,0 @@ ---- -title: Sintexe do valor -slug: Web/CSS/Sintexe_valor -tags: - - CSS - - Guía - - Iniciante - - Web -translation_of: Web/CSS/Value_definition_syntax ---- -
{{CSSRef}}
- -

CSS value definition syntax, a formal grammar, is used for defining the set of valid values for a CSS property or function. In addition to this syntax, the set of valid values can be further restricted by semantic constraints (for example, for a number to be strictly positive).

- -

The definition syntax describes which values are allowed and the interactions between them. A component can be a keyword, some characters considered as a literal, or a value of a given CSS data type or of another CSS property.

- -

Tipos de componente

- -

Keywords

- -

Generic keywords

- -

A keyword with a predefined meaning appears literally, without quotation marks. For example: auto, smaller or ease-in.

- -

The specific case of inherit, initial and unset

- -

All CSS properties accept the keywords inherit, initial and unset, that are defined throughout CSS. They are not shown in the value definition, and are implicitly defined.

- -

Literals

- -

In CSS, a few characters can appear on their own, like the slash ('/') or the comma (','), and are used in a property definition to separate its parts. The comma is often used to separate values in enumerations, or parameters in mathematical-like functions; the slash often separates parts of the value that are semantically different, but have a common syntax. Typically, the slash is used in shorthand properties; to separate component that are of the same type, but belong to different properties.

- -

Both symbols appear literally in a value definition.

- -

Data types

- -

Basic data types

- -

Some kind of data are used throughout CSS, and are defined once for all values in the specification. Called basic data types, they are represented with their name surrounded by the symbol '<' and '>': {{ cssxref("<angle>") }}, {{cssxref("<string>")}}, …

- -

Non-terminal data types

- -

Less common data types, called non-terminal data types, are also surrounded  by '<' and '>'.

- -

Non-terminal data types are of two kinds:

- - - -

Component value combinators

- -

Brackets

- -

Brackets enclose several entities, combinators, and multipliers, then transform them as a single component. They are used to group components to bypass the precedence rules.

- -
bold [ thin && <length> ]
- -

This example matches the following values:

- - - -

But not:

- - - -

Juxtaposition

- -

Placing several keywords, literals or data types, next to one another, only separated by one or several spaces, is called juxtaposition. All juxtaposed components are mandatory and should appear in the exact order.

- -
bold <length> , thin
-
- -

This example matches the following values:

- - - -

But not:

- - - -

Double ampersand

- -

Separating two or more components, by a double ampersand, &&, means that all these entities are mandatory but may appear in any order.

- -
bold && <length>
-
- -

This example matches the following values:

- - - -

But not:

- - - -
Note: juxtaposition has precedence over the double ampersand, meaning that bold thin && <length> is equivalent to [ bold thin ] && <length>. It describes bold thin <length> or <length> bold thin but not bold <length> thin.
- -

Double bar

- -

Separating two or more components by a double bar, ||, means that all entities are options: at least one of them must be present, and they may appear in any order. Typically this is used to define the different values of a shorthand property.

- -
<'border-width'> || <'border-style'> || <'border-color'>
-
- -

This example matches the following values:

- - - -

But not:

- - - -
Note: the double ampersand has precedence over the double bar, meaning that bold || thin && <length> is equivalent to bold || [ thin && <length> ]. It describes bold, thin <length>, bold thin <length>, or thin <length> bold but not <length> bold thin as bold, if not omitted, must be placed before or after the whole thin && <length> component.
- -

Single bar

- -

Separating two or more entities by a single bar, |, means that all entities are exclusive options: exactly one of these options must be present. This is typically used to separate a list of possible keywords.

- -
<percentage> | <length> | left | center | right | top | bottom
- -

This example matches the following values:

- - - -

But not:

- - - -
-

Note: the double bar has precedence over the single bar, meaning that bold | thin || <length> is equivalent to bold | [ thin || <length> ]. It describes bold, thin, <length>, <length> thin, or thin <length> but not bold <length> as only one entity from each side of the | combinator can be present.

-
- -

Component value multipliers

- -

A multiplier is a sign that indicate how many times a preceding entity can be repeated. Without a multiplier, an entity must appear exactly one time.

- -

Note that multipliers cannot be added and have all precedence over combinators.

- -

Asterisk (*)

- -

The asterisk multiplier indicates that the entity may appear zero, one or several times.

- -
bold smaller*
- -

This example matches the following values:

- - - -

But not:

- - - -

Plus (+)

- -

The plus multiplier indicates that the entity may appear one or several times.

- -
bold smaller+
- -

This example matches the following values:

- - - -

But not:

- - - -

Question mark (?)

- -

The question mark multiplier indicates that the entity is optional, and must appear zero or one time.

- -
bold smaller?
- -

This example matches the following values:

- - - -

But not:

- - - -

Curly braces ({ })

- -

The curly braces multiplier, enclosing two integers separated by a comma, A and B, indicates that the entity must appear at least A times and at most B times.

- -
bold smaller{1,3}
- -

This example matches the following values:

- - - -

But not:

- - - -

Hash mark (#)

- -

The hash mark multiplier indicates that the entity may be repeated one or more times (for example, the plus multiplier), but each occurrence is separated by a comma (',').

- -
bold smaller#
- -

This example matches the following values:

- - - -

But not:

- - - -

Exclamation point (!)

- -

The exclamation point multiplier after a group indicates that the group is required, and must produce at least one value; even if the grammar of the items within the group would otherwise allow the entire contents to be omitted, at least one component value must not be omitted.

- -
[ bold? smaller? ]!
-
- -

This example matches the following values:

- - - -

But not:

- - - -

Summary

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SignNameDescriptionExample
Combinators
 JuxtapositionComponents are mandatory and should appear in that ordersolid <length>
&&Double ampersandComponents are mandatory but may appear in any order<length> && <string>
||Double barAt least one of the components must be present, and they may appear in any order.<'border-image-outset'> || <'border-image-slice'>
|Single barExactly one of the components must be presentsmaller | small | normal | big | bigger
[ ]BracketsGroup components to bypass precedence rulesbold [ thin && <length> ]
Multipliers
 No multiplierExactly 1 timessolid
*Asterisk0 or more timesbold smaller*
+Plus sign1 or more timesbold smaller+
?Question mark0 or 1 time (that is optional)bold smaller?
{A,B}Curly bracesAt least A times, at most B timesbold smaller{1,3}
#Hash mark1 or more times, but each occurrence separated by a comma (',')bold smaller#
!Exclamation pointGroup must produce at least 1 value[ bold? smaller? ]!
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("CSS3 Values", "#value-defs", "Value definition syntax")}}{{Spec2("CSS3 Values")}}Adds the hash mark multiplier.
{{SpecName("CSS2.1", "about.html#value-defs", "Value definition syntax")}}{{Spec2("CSS2.1")}}Adds the double ampersand combinator.
{{SpecName("CSS1", "#notation-for-property-values", "Value definition syntax")}}{{Spec2("CSS1")}}Initial definition
- -

See also

- - diff --git a/files/pt-br/web/css/specified_value/index.html b/files/pt-br/web/css/specified_value/index.html new file mode 100644 index 0000000000..939aa09234 --- /dev/null +++ b/files/pt-br/web/css/specified_value/index.html @@ -0,0 +1,44 @@ +--- +title: Valor Especifícado +slug: Web/CSS/valor_espeficifco +tags: + - CSS + - Iniciante + - Web +translation_of: Web/CSS/specified_value +--- +

{{CSSRef}}

+ +

O valor especificado de uma propriedade CSS está definido em uma de três maneiras.

+ +
    +
  1. If the document's stylesheet has specified a value for the property then it will be used. For example; if the {{cssxref("color")}} property is set to green then the text color of the corresponding element will be green.
    2. +
  2. If the document's stylesheet has not specified a value then it will be inherited form the parent element (if possible). For example; if we have a paragraph ({{HTMLElement("p")}}) inside a {{HTMLElement("div")}} and the {{HTMLElement("div")}} has a CSS font property value of "Arial" and the {{HTMLElement("p")}} doesn't have a font property defined then it will inherit the Arial font.
    3. +
  3. If none of the above are available, the initial value for the element as specified by the CSS specification is applied.
    4. +
+ +

Especificações

+ + + + + + + + + + + + + + + + +
EspecificaçõesStatusComentario
{{SpecName("CSS2.1", "cascade.html#specified-value", "cascaded value")}}{{Spec2("CSS2.1")}}Definição inicial
+ +

Veja também

+ + diff --git a/files/pt-br/web/css/syntax/index.html b/files/pt-br/web/css/syntax/index.html new file mode 100644 index 0000000000..4d6ff0bf1c --- /dev/null +++ b/files/pt-br/web/css/syntax/index.html @@ -0,0 +1,70 @@ +--- +title: Sintaxe +slug: Web/CSS/sintaxe +translation_of: Web/CSS/Syntax +--- +

O Objetivo básico da linguagem de folhas de estilo em cascata (CSS) é permitir que um motor do navegador pinte elementos na página com características específicas como cores, posições, ou decorações. A sintaxe CSS reflete estes objetivos e seus blocos de contrução básicos são:

+ + + +

Declarações do CSS

+ +

A definição de propriedades CSS para um valor específico é a função principal da linguagem CSS. A propriedade e valor são chamados de declaração, e qualquer motor do CSS calcula quais declarações serão aplicadas para todos um único elemento da página em ordem adequadamente, a fim de exibí-lo com o estilo correto.

+ +

Tanto as propriedades como os valores são case-sensitive no CSS. Os pares se separam por dois pontos, ':' (U+003A COLON), e espaços em branco antes, entre e depois de propriedades e valores, porém os espaços dentro da declaração são ignorados.

+ +

css syntax - declaration.png

+ +

Existem mais de 100 propriedades diferentes no CSS e um número quase infinito de diferentes valores. Nem todos os pares de propriedades e valores são permitidos em cada propriedade define o que são valores válidos. Quando um valor não é válido para uma determinada propriedade, a declaração é considerada inválida e é totalmente ignorada pelo motor do CSS.

+ +

Blocos de declaração CSS

+ +

Declarações são agrupadas em blocos, que estão delimitados na estrutura com uma chave de abertura, '{' (U+007B LEFT CURLY BRACKET), e fechadas com outra, '}' (U+007D RIGHT CURLY BRACKET). Os blocos as vezes podem estar aninhados, a abertura e fechamento de chaves no bloco CSS deve ser realizada.

+ +

css syntax - block.png

+ +

Esses blocos são chamados de blocos de declaração e as declarações dentro deles são separadas por, ';' (U+003B SEMICOLON). Um bloco de declaração pode não conter nenhuma declaração. Espaços em branco em volta das declarações não são consideradas. Não é necessário que a última declaração possua ponto e vírgula, apesar de ser considerada uma boa prática pois previne o esquecimento de acrescê-la quando for necessário aumentar o bloco.

+ +

css syntax - declarations block.png

+ +
O conteúdo de um bloco de declaração, que é uma lista separada por pontos e vírgulas, sem as chaves, pode ser posto dentro da tag HTML style.
+ +

Regras CSS

+ +

Se as folhas de estilo pudessem apenas aplicar uma declaração para cada elemento de uma página da web, eles seriam bem limitados. O principal objetivo é aplicar diferentes declarações a diferentes partes do documento.

+ +

O CSS associa as condições com os blocos de declaração. Cada bloco (válido) é precedido por um ou mais seletores, separados por vírgula, que são condições selecionando alguns elementos da página. O grupo de seletores é chamado de regra.css syntax - ruleset.png

+ +

Um elemento pode ser modificado por diversos seletores, e por isso por diversas regras que potencialmente podem conter diversas propriedades, com diferentes valores, o CSS padrão define aquele que possui a precedência e que será aplicado: esse é o tal algoritmo em cascata.

+ +
É importante perceber que quando uma regra é caracterizada por um grupo de seletores que são algum tipo de atalho com cada um sendo um simples seletor isso não se aplica a validade da regra por si só.
+
+Isso leva a uma importante consequência: se apenas um dos seletores for inválido, como usar uma pseudo-classe ou pseudo-elemento desconhecido, todo o seletor é inválido e por isso toda a regra é ignorada (invalidada também).
+ +

CSS statements

+ +

Rulesets are the main building blocks of a style sheet, which often consists of only a big list of them. But there is other information that a Web author wants to convey in the style sheet, like the character set, other external style sheets to import, font face or list counter descriptions and many more. It will use other and specific kinds of statements to do that.

+ +

A statement is a building block that begins with any non-space characters and ends at the first closing brace or semi-colon (outside a string, non-escaped and not included into another {}, () or [] pair).

+ +

css syntax - statements Venn diag.png

+ +

There are different kinds of statements:

+ + + +

Any statement which isn't a rule or an at-rule is invalid and ignored.

+ +

There is another group of statements, the nested statements, these are statements that can be used in a specific subset of at-rules, the conditional group rules. These statements only apply if a specific condition is matched: the @media at-rule content is applied only if the device on which runs the browser matches the expressed condition; the @document at-rule content is applied only if the current page matches some conditions, and so on. In CSS1 and CSS2.1, only rulesets could be used inside a conditional group rules. That was very restrictive and this restriction was lifted in CSS Conditionals Level 3. Now, though it still is experimental and not support by every browser, a conditional group rules can contain a wider range of content, rulesets but also some, but not all, at-rules.

+ +

See also

+ + diff --git a/files/pt-br/web/css/tools/border-image_generator/index.html b/files/pt-br/web/css/tools/border-image_generator/index.html deleted file mode 100644 index d350bce6b5..0000000000 --- a/files/pt-br/web/css/tools/border-image_generator/index.html +++ /dev/null @@ -1,2627 +0,0 @@ ---- -title: Gerador de Border-image -slug: Web/CSS/Tools/Border-image_generator -tags: - - Alternativas CSS -translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator ---- -

Esta ferramenta pode ser utilizada para gerar o valor {{cssxref("border-image")}} em CSS3.

- -
-

Border Image Generator

- -

HTML Content

- -
    <div id="container">
-
-        <div id="gallery">
-            <div id="image-gallery">
-                <img class="image" src="https://mdn.mozillademos.org/files/6007/border-image-1.png" data-stateID="border1"/>
-                <img class="image" src="https://mdn.mozillademos.org/files/6009/border-image-2.png" data-stateID="border2"/>
-                <img class="image" src="https://mdn.mozillademos.org/files/6011/border-image-3.png" data-stateID="border3"/>
-                <img class="image" src="https://mdn.mozillademos.org/files/6013/border-image-4.png" data-stateID="border4"/>
-                <img class="image" src="https://mdn.mozillademos.org/files/6015/border-image-5.png" data-stateID="border5"/>
-                <img class="image" src="https://mdn.mozillademos.org/files/6017/border-image-6.svg" data-stateID="border6"/>
-            </div>
-        </div>
-
-        <div id="load-actions" class="group section">
-            <div id="toggle-gallery" data-action="hide"> </div>
-            <div id="load-image" class="button"> Upload image </div>
-            <input id="remote-url" type="text" placeholder="Load an image from URL"/>
-            <div id="load-remote" class="button"> </div>
-        </div>
-
-        <div id="general-controls" class="group section">
-            <div class="name"> Control Box </div>
-            <div class="separator"></div>
-            <div class="property">
-                <div class="name">scale</div>
-                <div class="ui-input-slider" data-topic="scale"
-                    data-unit="%" data-max="300" data-sensivity="10">
-                </div>
-            </div>
-            <div class="separator"></div>
-            <div class="property">
-                <div class="name">draggable</div>
-                <div class="ui-checkbox" data-topic='drag-subject'></div>
-            </div>
-            <div class="property right">
-                <div class="name">section height</div>
-                <div class="ui-input-slider" data-topic="preview-area-height"
-                    data-min="400" data-max="1000">
-                </div>
-            </div>
-        </div>
-
-        <div id="preview_section" class="group section">
-            <div id="subject">
-                <div class="guideline" data-axis="Y" data-topic="slice-top"></div>
-                <div class="guideline" data-axis="X" data-topic="slice-right"></div>
-                <div class="guideline" data-axis="Y" data-topic="slice-bottom"></div>
-                <div class="guideline" data-axis="X" data-topic="slice-left"></div>
-            </div>
-            <div id="preview"> </div>
-        </div>
-
-        <!-- controls -->
-        <div id="controls" class="group section">
-
-            <!-- border-image-slice -->
-            <div id="border-slice-control" class="category">
-                <div class="title"> border-image-slice </div>
-                <div class="property">
-                    <div class="name">fill</div>
-                    <div class="ui-checkbox" data-topic='slice-fill'></div>
-                </div>
-            </div>
-
-            <!-- border-image-width -->
-            <div id="border-width-control" class="category">
-                <div class="title"> border-image-width </div>
-            </div>
-
-            <!-- border-image-outset -->
-            <div id="border-outset-control" class="category">
-                <div class="title"> border-image-outset </div>
-            </div>
-
-            <!-- other-settings -->
-            <div id="aditional-properties" class="category">
-                <div class="title"> aditional-properties </div>
-                <div class="property">
-                    <div class="name"> repeat-x </div>
-                    <div class="ui-dropdown border-repeat" data-topic="image-repeat-X" data-selected="2">
-                        <div data-value="0">repeat</div>
-                        <div data-value="0">stretch</div>
-                        <div data-value="0">round</div>
-                    </div>
-                </div>
-                <div class="property">
-                    <div class="name"> repeat-y </div>
-                    <div class="ui-dropdown border-repeat" data-topic="image-repeat-Y" data-selected="2">
-                        <div data-value="1">repeat</div>
-                        <div data-value="1">stretch</div>
-                        <div data-value="1">round</div>
-                    </div>
-                </div>
-                <div class="property">
-                    <div class="ui-input-slider" data-topic="font-size" data-info="em size"
-                        data-unit="px" data-value="12" data-sensivity="3">
-                    </div>
-                </div>
-
-                <div class="property">
-                    <div class="ui-input-slider" data-topic="preview-width" data-info="width"
-                         data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"></div>
-                </div>
-                <div class="property">
-                    <div class="ui-input-slider" data-topic="preview-height" data-info="height"
-                        data-unit=" px" data-min="10" data-max="10000" data-sensivity="3">
-                    </div>
-                </div>
-            </div>
-
-
-            <div id="output" class="category">
-                <div class="title"> CSS Code </div>
-                <div class="css-property">
-                    <span class="name"> border-image-slice: </span>
-                    <span id="out-border-slice" class="value"> </span>
-                </div>
-                <div class="css-property">
-                    <span class="name"> border-image-width: </span>
-                    <span id="out-border-width" class="value"> </span>
-                </div>
-                <div class="css-property">
-                    <span class="name"> border-image-outset: </span>
-                    <span id="out-border-outset" class="value"> </span>
-                </div>
-                <div class="css-property">
-                    <span class="name"> border-image-repeat: </span>
-                    <span id="out-border-repeat" class="value"> </span>
-                </div>
-                <div class="css-property">
-                    <span class="name"> border-image-source: </span>
-                    <span id="out-border-source" class="value">  </span>
-                </div>
-            </div>
-
-        </div>
-    </div>
- -

CSS Content

- -
/*  GRID OF TWELVE
- * ========================================================================== */
-
-.span_12 {
-	width: 100%;
-}
-
-.span_11 {
-	width: 91.46%;
-}
-
-.span_10 {
-	width: 83%;
-}
-
-.span_9 {
-	width: 74.54%;
-}
-
-.span_8 {
-	width: 66.08%;
-}
-
-.span_7 {
-	width: 57.62%;
-}
-
-.span_6 {
-	width: 49.16%;
-}
-
-.span_5 {
-	width: 40.7%;
-}
-
-.span_4 {
-	width: 32.24%;
-}
-
-.span_3 {
-	width: 23.78%;
-}
-
-.span_2 {
-	width: 15.32%;
-}
-
-.span_1 {
-	width: 6.86%;
-}
-
-
-/*  SECTIONS
- * ========================================================================== */
-
-.section {
-	clear: both;
-	padding: 0px;
-	margin: 0px;
-}
-
-/*  GROUPING
- * ========================================================================== */
-
-
-.group:before, .group:after {
-    content: "";
-    display: table;
-}
-
-.group:after {
-    clear:both;
-}
-
-.group {
-    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
-}
-
-/*  GRID COLUMN SETUP
- * ========================================================================== */
-
-.col {
-	display: block;
-	float:left;
-	margin: 1% 0 1% 1.6%;
-}
-
-.col:first-child {
-	margin-left: 0;
-} /* all browsers except IE6 and lower */
-
-
-
-/*
- * UI Component
- */
-
-.ui-input-slider {
-	height: 20px;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	-moz-user-select: none;
-	user-select: none;
-}
-
-.ui-input-slider * {
-	float: left;
-	height: 100%;
-	line-height: 100%;
-}
-
-/* Input Slider */
-
-.ui-input-slider > input {
-	margin: 0;
-	padding: 0;
-	width: 50px;
-	text-align: center;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-.ui-input-slider-info {
-	width: 90px;
-	padding: 0px 10px 0px 0px;
-	text-align: right;
-	text-transform: lowercase;
-}
-
-.ui-input-slider-left, .ui-input-slider-right {
-	width: 16px;
-	cursor: pointer;
-	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
-}
-
-.ui-input-slider-right {
-	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
-}
-
-.ui-input-slider-name {
-	width: 90px;
-	padding: 0 10px 0 0;
-	text-align: right;
-	text-transform: lowercase;
-}
-
-.ui-input-slider-btn-set {
-	width: 25px;
-	background-color: #2C9FC9;
-	border-radius: 5px;
-	color: #FFF;
-	font-weight: bold;
-	line-height: 14px;
-	text-align: center;
-}
-
-.ui-input-slider-btn-set:hover {
-	background-color: #379B4A;
-	cursor: pointer;
-}
-
-/*************************************************************************************/
-/*************************************************************************************/
-
-/*
- * UI DropDown
- */
-
-/* Dropdown */
-
-.ui-dropdown {
-	height: 2em;
-	width: 120px;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	font-size: 12px;
-
-	background-image: url("https://mdn.mozillademos.org/files/6037/drop_arrow_icon.png");
-	background-position: right center;
-	background-repeat: no-repeat;
-	background-color: #359740;
-
-	position: relative;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-
-	-moz-user-select: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-}
-
-.ui-dropdown:hover {
-	cursor: pointer;
-	background-color: #208B20;
-}
-
-/* Dropdown Select Button */
-
-.ui-dropdown-select {
-	height: inherit;
-	padding: 0 0.75em;
-	color: #FFF;
-	line-height: 2em;
-}
-
-/* Dropdown List */
-
-.ui-dropdown-list {
-	width: 100%;
-	height: 150px;
-	max-height: 150px;
-	margin: 0;
-	padding: 0 0.3em;
-
-	border: 3px solid #3490D2;
-	border-color: #208B20;
-	background: #666;
-	background-color: #EEF1F5;
-	color: #000;
-
-	position: absolute;
-	top: 2em;
-	left: 0;
-	z-index: 100;
-
-	overflow: hidden;
-	transition: all 0.3s;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-.ui-dropdown-list:hover {
-	overflow: auto;
-}
-
-.ui-dropdown-list[data-hidden='true'] {
-	height: 0 !important;
-	opacity: 0;
-	visibility: hidden;
-}
-
-.ui-dropdown[data-position='left'] .ui-dropdown-list {
-	left: -100%;
-	top: 0;
-}
-
-.ui-dropdown[data-position='right'] .ui-dropdown-list {
-	left: 100%;
-	top: 0;
-}
-
-.ui-dropdown-list > div {
-	width: 100%;
-	height: 1.6em;
-	margin: 0.3em 0;
-	padding: 0.3em;
-	line-height: 1em;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-.ui-dropdown-list > div:hover {
-	background: #3490D2;
-	color:#FFF;
-	border-radius: 2px;
-	cursor: pointer;
-}
-
-
-/*************************************************************************************/
-/*************************************************************************************/
-
-/*
- * UI Button
- */
-
-/* Checkbox */
-
-.ui-checkbox {
-	text-align: center;
-	font-size: 16px;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	line-height: 1.5em;
-	color: #FFF;
-
-	-moz-user-select: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-}
-
-.ui-checkbox > input {
- 	display: none;
-}
-
-.ui-checkbox > label {
-	font-size: 12px;
-	padding: 0.333em 1.666em 0.5em;
-	height: 1em;
-	line-height: 1em;
-
-	background-color: #888;
-	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
-	background-position: center center;
-	background-repeat: no-repeat;
-
-	color: #FFF;
-	border-radius: 2px;
-	font-weight: bold;
-	float: left;
-}
-
-.ui-checkbox .text {
-	padding-left: 34px;
-	background-position: center left 10px;
-}
-
-.ui-checkbox .left {
-	padding-right: 34px;
-	padding-left: 1.666em;
-	background-position: center right 10px;
-}
-
-.ui-checkbox > label:hover {
-	cursor: pointer;
-}
-
-.ui-checkbox > input:checked + label {
-	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
-	background-color: #379B4A;
-}
-
-/*************************************************************************************/
-/*************************************************************************************/
-
-/*
- * BORDER IMAGE GENERATOR TOOL
- */
-
-body {
-	width: 100%;
-	margin: 0 auto;
-	padding: 0 0 20px 0;
-
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-
-	/*background: url("https://mdn.mozillademos.org/files/6025/grain.png");*/
-	border: 1px solid #EEE;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-
-	-moz-user-select: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-}
-
-body[data-move='X'] {
-	cursor: w-resize !important;
-}
-
-body[data-move='Y'] {
-	cursor: s-resize !important;
-}
-
-#container {
-	width: 100%;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-[data-draggable='true']:hover {
-	cursor: move;
-}
-
-[data-draggable='true']:hover > * {
-	cursor: default;
-}
-
-
-
-/******************************************************************************/
-/******************************************************************************/
-
-/*
- * Border Image Picker
- */
-
-#gallery {
-	box-shadow: 0 0 3px 0 #BABABA;
-}
-
-#image-gallery {
-	width: 600px;
-	height: 100px;
-	margin: 0 auto;
-	transition: margin 0.4s;
-}
-
-#image-gallery .image {
-	height: 80px;
-	float: left;
-	margin: 10px;
-	opacity: 0.5;
-	background-color: #FFF;
-	box-shadow: 0px 0px 3px 1px #BABABA;
-}
-
-#image-gallery .image[selected="true"] {
-	box-shadow: 0px 0px 3px 1px #3BBA52;
-	opacity: 1;
-}
-
-#image-gallery .image:hover {
-	cursor: pointer;
-	box-shadow: 0px 0px 3px 1px #30ACE5;
-	opacity: 1;
-}
-
-#image-gallery[data-collapsed='true'] {
-	margin-top: -100px;
-}
-
-/* Load Menu */
-
-#load-actions {
-	margin: 10px 0;
-}
-
-#toggle-gallery {
-	width: 30px;
-	height: 25px;
-	margin: 10px;
-	color: #FFF;
-
-	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
-	background-repeat: no-repeat;
-	background-position: top 4px center;
-	background-color: #888888 !important;
-
-	border-radius: 2px;
-	float: left;
-}
-
-#toggle-gallery:hover {
-	cursor: pointer;
-}
-
-#toggle-gallery[data-action='show'] {
-	background-image: url('https://mdn.mozillademos.org/files/6001/arrow-down-white.png');
-	background-color: #888888 !important;
-}
-
-#toggle-gallery[data-action='hide'] {
-	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
-}
-
-.button {
-	width: 100px;
-	height: 25px;
-	margin: 10px;
-	color: #FFF;
-	text-align: center;
-	font-size: 12px;
-	line-height: 25px;
-	background-color: #379B4A;
-	border-radius: 2px;
-	float: left;
-}
-
-.button:hover {
-	cursor: pointer;
-	background-color: #3380C4;
-}
-
-#load-image {
-	float: left;
-}
-
-#load-remote {
-	width: 30px;
-	background-image: url('https://mdn.mozillademos.org/files/6003/arrow-right-white.png');
-	background-repeat: no-repeat;
-	background-position: center center;
-}
-
-#remote-url {
-	width: 200px;
-	height: 23px;
-	margin: 10px;
-	padding: 0 5px;
-	border: 1px solid #379B4A;
-	border-radius: 2px;
-	float: left;
-
-	transition: width 0.5s;
-}
-
-#remote-url:focus {
-	box-shadow: 0px 0px 3px -1px #379B4A; /*#68ACE8; */
-	border-color: rgba(55, 155, 74, 0.5);
-	width: 450px;
-}
-
-/*
- * Visible Area
- */
-
-#preview_section {
-	position: relative;
-	min-height: 400px;
-}
-
-/* Image Control */
-
-#subject {
-	width: 300px;
-	height: 300px;
-	background-repeat: no-repeat;
-	background-size: 100%;
-	background-color: #FFF;
-	border: 1px solid #CCC;
-
-	position: absolute;
-	z-index: 10;
-	top: 15%;
-	left: 10%;
-
-	box-shadow: 0 0 3px 0 #BABABA;
-	transition-property: width, height;
-	transition-duration: 0.1s;
-}
-
-#subject .guideline {
-	background-color: rgba(255, 255, 255, 0.7);
-	border: 1px solid rgba(0, 0, 0, 0.3);
-	position: absolute;
-}
-
-#subject .guideline:hover {
-	background-color: #F00;
-}
-
-#subject .guideline[data-active] {
-	background-color: #F00;
-	z-index: 10;
-}
-
-#subject .guideline[data-axis='X'] {
-	width: 1px;
-	height: 100%;
-	top: -1px;
-}
-
-#subject .guideline[data-axis='Y'] {
-	width: 100%;
-	height: 1px;
-	left: -1px;
-}
-
-#subject .guideline[data-axis='X']:hover {
-	cursor: w-resize;
-}
-
-#subject .guideline[data-axis='Y']:hover {
-	cursor: s-resize;
-}
-
-
-#subject .relative {
-	position: relative;
-	font-size: 12px;
-}
-
-#subject .tooltip, #subject .tooltip2 {
-	width: 40px;
-	height: 20px;
-	line-height: 20px;
-	font-size: 12px;
-	text-align: center;
-
-	position: absolute;
-	opacity: 0.5;
-	transition: opacity 0.25s;
-}
-
-#subject .tooltip {
-	background: #EEE;
-	border-radius: 2px;
-	border: 1px solid #CCC;
-}
-
-#subject .tooltip2{
-	color: #555;
-}
-
-#subject [data-active] > * {
-	opacity: 1;
-}
-
-#subject .tooltip[data-info='top'] {
-	top: -10px;
-	right: -50px;
-}
-
-#subject .tooltip[data-info='right'] {
-	bottom: -30px;
-	right: -20px;
-}
-
-#subject .tooltip[data-info='bottom'] {
-	top: -10px;
-	left: -50px;
-}
-
-#subject .tooltip[data-info='left'] {
-	top: -30px;
-	right: -20px;
-}
-
-#subject .tooltip2[data-info='top'] {
-	top: -10px;
-	left: -50px;
-}
-
-#subject .tooltip2[data-info='right'] {
-	top: -30px;
-	right: -20px;
-}
-
-#subject .tooltip2[data-info='bottom'] {
-	top: -10px;
-	right: -50px;
-}
-
-#subject .tooltip2[data-info='left'] {
-	bottom: -30px;
-	right: -20px;
-}
-
-/* Preview */
-
-#preview {
-	width: 30%;
-	height: 50%;
-	background-color: #FFF;
-	text-align: center;
-	overflow: hidden;
-	position: absolute;
-	z-index: 10;
-
-	left: 60%;
-	top: 15%;
-
-	border-radius: 2px;
-	border-image-width: 20px;
-	border-image-repeat: round;
-	box-shadow: 0 0 3px 0 #BABABA;
-}
-
-#preview .resize-handle {
-	width: 10px;
-	height: 10px;
-	background: url("https://mdn.mozillademos.org/files/6027/resize.png") center center no-repeat;
-	position: absolute;
-	bottom: 0;
-	right: 0;
-}
-
-#preview .resize-handle:hover {
-	cursor: nw-resize;
-}
-
-
-/*
- * General controls MENU
- */
-
-#general-controls {
-	padding: 10px 30px;
-	background-color: #FFF;
-	opacity: 0.95;
-	color: #888;
-	/*border-radius: 2px;*/
-	box-shadow: 0 0 3px 0 #BABABA;
-}
-
-#general-controls .property {
-	width: 130px;
-	float: left;
-}
-
-#general-controls .name {
-	height: 20px;
-	margin: 0 10px 0 0;
-	line-height: 100%;
-	text-align: right;
-	float: left;
-}
-
-#general-controls .right {
-	width: 200px;
-	float: right;
-}
-
-#general-controls .ui-checkbox label {
-	height: 10px;
-}
-
-#general-controls .separator {
-	height: 40px;
-	width: 1px;
-	margin: -10px 15px;
-	background-color: #EEE;
-	float: left;
-}
-
-/*
- * Controls
- */
-
-#controls {
-	color: #444;
-	margin: 10px 0 0 0;
-}
-
-#controls .category {
-	height: 190px;
-	min-width: 260px;
-	margin: 10px;
-	padding: 10px;
-	border: 1px solid #CCC;
-	border-radius: 3px;
-	float: left;
-
-	box-shadow: 0 0 3px 0 #BABABA;
-	transition: all 0.25s;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-@media (min-width: 880px) {
-	#controls .category {
-		width: 30%;
-		margin-left: 1.66%;
-		margin-right: 1.66%;
-	}
-}
-
-@media (max-width: 879px) {
-	#controls .category {
-		width: 37%;
-		margin-left: 6.5%;
-		margin-right: 6.5%;
-	}
-}
-
-#controls .category .title {
-	width: 100%;
-	height: 30px;
-	margin: 0 0 10px 0;
-	line-height: 25px;
-
-	text-align: center;
-	color: #AAA;
-}
-
-#controls .category:hover .title {
-	color: #777;
-}
-
-#controls .category > .group {
-	border: 1px solid #CCC;
-	border-radius: 2px;
-}
-
-
-/* property */
-
-#controls .property {
-	width: 250px;
-	height: 20px;
-	margin: 5px auto;
-}
-
-#controls .property .ui-input-slider {
-	margin: 0;
-	float: left;
-}
-
-#controls .property .ui-input-slider-info {
-	width: 60px;
-}
-
-#controls .property .ui-input-slider-left {
-	transition: opacity 0.15s;
-    opacity: 0;
-}
-
-#controls .property .ui-input-slider-right {
-	transition: opacity 0.15s;
-    opacity: 0;
-}
-
-#controls .property .name {
-	width: 60px;
-	height: 20px;
-	padding: 0px 10px 0px 0px;
-	text-align: right;
-	line-height: 100%;
-	float: left;
-}
-
-#controls .property .config {
-	width: 20px;
-	height: 20px;
-	float: left;
-	background: url("https://mdn.mozillademos.org/files/6021/config.png") center center no-repeat;
-	opacity: 0.5;
-}
-
-#controls .property .config:hover {
-	cursor: pointer;
-	opacity: 1;
-}
-
-#controls .ui-input-slider:hover .ui-input-slider-right {
-    opacity: 1;
-}
-
-#controls .ui-input-slider:hover .ui-input-slider-left {
-    opacity: 1;
-}
-
-#controls .property .ui-dropdown {
-	margin: 0 10px;
-	float: left;
-}
-
-
-#controls .property .ui-checkbox {
-	margin: 0 0 0 16px;
-	float: left;
-}
-
-#controls .property .ui-checkbox label {
-	height: 0.85em;
-	width: 10px;
-}
-
-/* dropdowns */
-#controls .ui-dropdown {
-	width: 50px;
-	height: 1.7em;
-	border-radius: 2px;
-}
-
-#controls .ui-dropdown-select {
-	line-height: 1.6em;
-}
-
-#controls .ui-dropdown-list {
-	top: 20px;
-}
-
-#controls .ui-dropdown-list {
-	border-width: 1px;
-	text-align: center;
-}
-
-#controls .ui-dropdown-list:hover {
-	overflow: hidden;
-}
-
-#controls .border-repeat {
-	margin: 0 0 0 16px !important;
-	width: 80px;
-}
-
-#controls .border-repeat .ui-dropdown-list {
-	height: 6.2em;
-	border-width: 1px;
-	text-align: center;
-}
-
-/* border-image-slice */
-
-
-#border-slice-control .ui-dropdown-list {
-	height: 4.3em;
-}
-
-/* border-image-width */
-
-#border-width-control .ui-dropdown-list {
-	height: 6.2em;
-}
-
-/* border-image-outset */
-
-#border-outset-control .ui-dropdown-list {
-	height: 4.3em;
-}
-
-#aditional-properties .property {
-	width: 200px;
-}
-
-#aditional-properties .ui-input-slider > input {
-	width: 80px !important;
-}
-
-/* unit settings panel */
-
-#unit-settings {
-	padding: 10px;
-	position: absolute;
-
-	background: #FFF;
-
-	font-size: 12px;
-	border-radius: 3px;
-	border: 1px solid #CCC;
-	text-align: center;
-	color: #555;
-
-	position: absolute;
-	z-index: 1000;
-
-	box-shadow: 0 0 3px 0 #BABABA;
-	transition: all 0.25s;
-}
-
-#unit-settings .title {
-	width: 100%;
-	margin: -5px auto 0;
-
-	color: #666;
-	font-size: 14px;
-	font-weight: bold;
-	line-height: 25px;
-	border-bottom: 1px solid #E5E5E5;
-}
-
-#unit-settings .ui-input-slider {
-	margin: 10px 0 0 0;
-}
-
-#unit-settings .ui-input-slider-info {
-	width: 50px;
-	line-height: 1.5em;
-}
-
-#unit-settings input {
-	font-size: 12px;
-	width: 40px !important;
-}
-
-#unit-settings .close {
-	width: 16px;
-	height: 16px;
-	background: url('https://mdn.mozillademos.org/files/6019/close.png') no-repeat center center;
-	background-size: 75%;
-
-	position: absolute;
-	top: 4px;
-	right: 4px;
-	opacity: 0.5;
-}
-
-#unit-settings .close:hover {
-	cursor: pointer;
-	opacity: 1;
-}
-
-#unit-settings[data-active='true'] {
-	opacity: 1;
-}
-
-#unit-settings[data-active='false'] {
-	opacity: 0;
-	top: -100px !important;
-}
-
-/*
- * CSS Output Code
- */
-
-#output {
-	padding: 10px;
-	border: 2px dashed #888 !important;
-	box-shadow: none !important;
-	border-radius: 3px;
-	overflow: hidden;
-
-	-moz-user-select: text;
-	-webkit-user-select: text;
-	-ms-user-select: text;
-	user-select: text;
-}
-
-
-@media (min-width: 880px) {
-	#output {
-		width: 63.33% !important;
-	}
-}
-
-@media (max-width: 879px) {
-	#output {
-		width: 87% !important;
-	}
-}
-
-
-#output .title {
-	width: 100%;
-	height: 30px;
-	margin: 0 0 10px 0;
-	line-height: 25px;
-
-	text-align: center;
-	color: #AAA;
-}
-
-#output .css-property {
-	width: 100%;
-	margin: 0;
-	color: #555;
-	font-size: 14px;
-	line-height: 18px;
-	float: left;
-}
-
-#output .css-property .name {
-	width: 30%;
-	font-weight: bold;
-	text-align: right;
-	float: left;
-}
-
-#output .css-property .value {
-	width: 65%;
-	padding: 0 2.5%;
-	word-break: break-all;
-	float: left;
-}
-
-
- -

JavaScript Content

- -
'use strict';
-
-/**
- * UI-SlidersManager
- */
-
-var InputSliderManager = (function InputSliderManager() {
-
-	var subscribers = {};
-	var sliders = [];
-
-	var InputComponent = function InputComponent(obj) {
-		var input = document.createElement('input');
-		input.setAttribute('type', 'text');
-		input.style.width = 50 + obj.precision * 10 + 'px';
-
-		input.addEventListener('click', function(e) {
-			this.select();
-		});
-
-		input.addEventListener('change', function(e) {
-			var value = parseFloat(e.target.value);
-
-			if (isNaN(value) === true)
-				setValue(obj.topic, obj.value);
-			else
-				setValue(obj.topic, value);
-		});
-
-		return input;
-	};
-
-	var SliderComponent = function SliderComponent(obj, sign) {
-		var slider = document.createElement('div');
-		var startX = null;
-		var start_value = 0;
-
-		slider.addEventListener("click", function(e) {
-			document.removeEventListener("mousemove", sliderMotion);
-			setValue(obj.topic, obj.value + obj.step * sign);
-		});
-
-		slider.addEventListener("mousedown", function(e) {
-			startX = e.clientX;
-			start_value = obj.value;
-			document.body.style.cursor = "e-resize";
-
-			document.addEventListener("mouseup", slideEnd);
-			document.addEventListener("mousemove", sliderMotion);
-		});
-
-		var slideEnd = function slideEnd(e) {
-			document.removeEventListener("mousemove", sliderMotion);
-			document.body.style.cursor = "auto";
-			slider.style.cursor = "pointer";
-		};
-
-		var sliderMotion = function sliderMotion(e) {
-			slider.style.cursor = "e-resize";
-			var delta = (e.clientX - startX) / obj.sensivity | 0;
-			var value = delta * obj.step + start_value;
-			setValue(obj.topic, value);
-		};
-
-		return slider;
-	};
-
-	var InputSlider = function(node) {
-		var min		= parseFloat(node.getAttribute('data-min'));
-		var max		= parseFloat(node.getAttribute('data-max'));
-		var step	= parseFloat(node.getAttribute('data-step'));
-		var value	= parseFloat(node.getAttribute('data-value'));
-		var topic	= node.getAttribute('data-topic');
-		var unit	= node.getAttribute('data-unit');
-		var name 	= node.getAttribute('data-info');
-		var sensivity = node.getAttribute('data-sensivity') | 0;
-		var precision = node.getAttribute('data-precision') | 0;
-
-		this.min = isNaN(min) ? 0 : min;
-		this.max = isNaN(max) ? 100 : max;
-		this.precision = precision >= 0 ? precision : 0;
-		this.step = step < 0 || isNaN(step) ? 1 : step.toFixed(precision);
-		this.topic = topic;
-		this.node = node;
-		this.unit = unit === null ? '' : unit;
-		this.sensivity = sensivity > 0 ? sensivity : 5;
-		value = isNaN(value) ? this.min : value;
-
-		var input = new InputComponent(this);
-		var slider_left  = new SliderComponent(this, -1);
-		var slider_right = new SliderComponent(this,  1);
-
-		slider_left.className = 'ui-input-slider-left';
-		slider_right.className = 'ui-input-slider-right';
-
-		if (name) {
-			var info = document.createElement('span');
-			info.className = 'ui-input-slider-info';
-			info.textContent = name;
-			node.appendChild(info);
-		}
-
-		node.appendChild(slider_left);
-		node.appendChild(input);
-		node.appendChild(slider_right);
-
-		this.input = input;
-		sliders[topic] = this;
-		setValue(topic, value);
-	};
-
-	InputSlider.prototype.setInputValue = function setInputValue() {
-		this.input.value = this.value.toFixed(this.precision) + this.unit;
-	};
-
-	var setValue = function setValue(topic, value, send_notify) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		value = parseFloat(value.toFixed(slider.precision));
-
-		if (value > slider.max) value = slider.max;
-		if (value < slider.min)	value = slider.min;
-
-		slider.value = value;
-		slider.node.setAttribute('data-value', value);
-
-		slider.setInputValue();
-
-		if (send_notify === false)
-			return;
-
-		notify.call(slider);
-	};
-
-	var setMax = function setMax(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.max = value;
-		setValue(topic, slider.value);
-	};
-
-	var setMin = function setMin(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.min = value;
-		setValue(topic, slider.value);
-	};
-
-	var setUnit = function setUnit(topic, unit) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.unit = unit;
-		setValue(topic, slider.value);
-	};
-
-	var setStep = function setStep(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.step = parseFloat(value);
-		setValue(topic, slider.value);
-	};
-
-	var setPrecision = function setPrecision(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		value = value | 0;
-		slider.precision = value;
-
-		var step = parseFloat(slider.step.toFixed(value));
-		if (step === 0)
-			slider.step = 1 / Math.pow(10, value);
-
-		setValue(topic, slider.value);
-	};
-
-	var setSensivity = function setSensivity(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		value = value | 0;
-
-		slider.sensivity = value > 0 ? value : 5;
-	};
-
-	var getNode =  function getNode(topic) {
-		return sliders[topic].node;
-	};
-
-	var getPrecision =  function getPrecision(topic) {
-		return sliders[topic].precision;
-	};
-
-	var getStep =  function getStep(topic) {
-		return sliders[topic].step;
-	};
-
-	var subscribe = function subscribe(topic, callback) {
-		if (subscribers[topic] === undefined)
-			subscribers[topic] = [];
-		subscribers[topic].push(callback);
-	};
-
-	var unsubscribe = function unsubscribe(topic, callback) {
-		subscribers[topic].indexOf(callback);
-		subscribers[topic].splice(index, 1);
-	};
-
-	var notify = function notify() {
-		if (subscribers[this.topic] === undefined)
-			return;
-		for (var i = 0; i < subscribers[this.topic].length; i++)
-			subscribers[this.topic][i](this.value);
-	};
-
-	var createSlider = function createSlider(topic, label) {
-		var slider = document.createElement('div');
-		slider.className = 'ui-input-slider';
-		slider.setAttribute('data-topic', topic);
-
-		if (label !== undefined)
-			slider.setAttribute('data-info', label);
-
-		new InputSlider(slider);
-		return slider;
-	};
-
-	var init = function init() {
-		var elem = document.querySelectorAll('.ui-input-slider');
-		var size = elem.length;
-		for (var i = 0; i < size; i++)
-			new InputSlider(elem[i]);
-	};
-
-	return {
-		init : init,
-		setMax : setMax,
-		setMin : setMin,
-		setUnit : setUnit,
-		setStep : setStep,
-		getNode : getNode,
-		getStep : getStep,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe,
-		setPrecision : setPrecision,
-		setSensivity : setSensivity,
-		getPrecision : getPrecision,
-		createSlider : createSlider,
-	};
-
-})();
-
-
-/**
- * UI-DropDown Select
- */
-
-var DropDownManager = (function DropdownManager() {
-
-	var subscribers = {};
-	var dropdowns = [];
-	var active = null;
-
-	var visbility = ["hidden", "visible"];
-
-
-	var DropDown = function DropDown(node) {
-		var topic = node.getAttribute('data-topic');
-		var label = node.getAttribute('data-label');
-		var selected = node.getAttribute('data-selected') | 0;
-
-		var select = document.createElement('div');
-		var list = document.createElement('div');
-		var uval = 0;
-		var option = null;
-		var option_value = null;
-
-		list.className = 'ui-dropdown-list';
-		select.className = 'ui-dropdown-select';
-
-		while (node.firstElementChild !== null) {
-			option = node.firstElementChild;
-			option_value = option.getAttribute('data-value');
-
-			if (option_value === null)
-				option.setAttribute('data-value', uval);
-
-			list.appendChild(node.firstElementChild);
-			uval++;
-		}
-
-		node.appendChild(select);
-		node.appendChild(list);
-
-		select.onclick = this.toggle.bind(this);
-		list.onclick = this.updateValue.bind(this);
-		document.addEventListener('click', clickOut);
-
-		this.state = 0;
-		this.time = 0;
-		this.dropmenu = list;
-		this.select = select;
-		this.toggle(false);
-		this.value = {};
-		this.topic = topic;
-
-		if (label)
-			select.textContent = label;
-		else
-			this.setNodeValue(list.children[selected]);
-
-		dropdowns[topic] = this;
-
-	};
-
-	DropDown.prototype.toggle = function toggle(state) {
-		if (typeof(state) === 'boolean')
-			this.state = state === false ? 0 : 1;
-		else
-			this.state = 1 ^ this.state;
-
-		if (active !== this) {
-			if (active)
-				active.toggle(false);
-			active = this;
-		}
-
-		if (this.state === 0)
-			this.dropmenu.setAttribute('data-hidden', 'true');
-		else
-			this.dropmenu.removeAttribute('data-hidden');
-
-	};
-
-	var clickOut = function clickOut(e) {
-		if (active.state === 0 ||
-			e.target === active.dropmenu ||
-			e.target === active.select)
-			return;
-
-		active.toggle(false);
-	};
-
-	DropDown.prototype.updateValue = function updateValue(e) {
-
-		if (Date.now() - this.time < 500)
-			return;
-
-		if (e.target.className !== "ui-dropdown-list") {
-			this.setNodeValue(e.target);
-			this.toggle(false);
-		}
-
-		this.time = Date.now();
-	};
-
-	DropDown.prototype.setNodeValue = function setNodeValue(node) {
-		this.value['name'] = node.textContent;
-		this.value['value'] = node.getAttribute('data-value');
-
-		this.select.textContent = node.textContent;
-		this.select.setAttribute('data-value', this.value['value']);
-
-		notify.call(this);
-	};
-
-	var createDropDown = function createDropDown(topic, options) {
-
-		var dropdown = document.createElement('div');
-		dropdown.setAttribute('data-topic', topic);
-		dropdown.className = 'ui-dropdown';
-
-		for (var i in options) {
-			var x = document.createElement('div');
-			x.setAttribute('data-value', i);
-			x.textContent = options[i];
-			dropdown.appendChild(x);
-		}
-
-		new DropDown(dropdown);
-
-		return dropdown;
-	};
-
-	var setValue = function setValue(topic, index) {
-		if (dropdowns[topic] === undefined ||
-			index >= dropdowns[topic].dropmenu.children.length)
-			return;
-
-		dropdowns[topic].setNodeValue(dropdowns[topic].dropmenu.children[index]);
-	};
-
-	var subscribe = function subscribe(topic, callback) {
-		if (subscribers[topic] === undefined)
-			subscribers[topic] = [];
-		subscribers[topic].push(callback);
-	};
-
-	var unsubscribe = function unsubscribe(topic, callback) {
-		var index = subscribers[topic].indexOf(callback);
-		subscribers[topic].splice(index, 1);
-	};
-
-	var notify = function notify() {
-		if (subscribers[this.topic] === undefined)
-			return;
-
-		for (var i in subscribers[this.topic]) {
-			subscribers[this.topic][i](this.value);
-		}
-	};
-
-	var init = function init() {
-		var elem, size;
-
-		elem = document.querySelectorAll('.ui-dropdown');
-		size = elem.length;
-		for (var i = 0; i < size; i++)
-			new DropDown(elem[i]);
-
-	};
-
-	return {
-		init : init,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe,
-		createDropDown : createDropDown
-	};
-
-})();
-
-
-/**
- * UI-ButtonManager
- */
-
-var ButtonManager = (function CheckBoxManager() {
-
-	var subscribers = [];
-	var buttons = [];
-
-	var CheckBox = function CheckBox(node) {
-		var topic = node.getAttribute('data-topic');
-		var state = node.getAttribute('data-state');
-		var name = node.getAttribute('data-label');
-		var align = node.getAttribute('data-text-on');
-
-		state = (state === "true");
-
-		var checkbox = document.createElement("input");
-		var label = document.createElement("label");
-
-		var id = 'checkbox-' + topic;
-		checkbox.id = id;
-		checkbox.setAttribute('type', 'checkbox');
-		checkbox.checked = state;
-
-		label.setAttribute('for', id);
-		if (name) {
-			label.className = 'text';
-			if (align)
-				label.className += ' ' + align;
-			label.textContent = name;
-		}
-
-		node.appendChild(checkbox);
-		node.appendChild(label);
-
-		this.node = node;
-		this.topic = topic;
-		this.checkbox = checkbox;
-
-		checkbox.addEventListener('change', function(e) {
-			notify.call(this);
-		}.bind(this));
-
-		buttons[topic] = this;
-	};
-
-	var getNode =  function getNode(topic) {
-		return buttons[topic].node;
-	};
-
-	var setValue = function setValue(topic, value) {
-		var obj = buttons[topic];
-		if (obj === undefined)
-			return;
-
-		obj.checkbox.checked = value;
-		notify.call(obj);
-	};
-
-	var subscribe = function subscribe(topic, callback) {
-		if (subscribers[topic] === undefined)
-			subscribers[topic] = [];
-
-		subscribers[topic].push(callback);
-	};
-
-	var unsubscribe = function unsubscribe(topic, callback) {
-		subscribers[topic].indexOf(callback);
-		subscribers[topic].splice(index, 1);
-	};
-
-	var notify = function notify() {
-		if (subscribers[this.topic] === undefined)
-			return;
-		for (var i = 0; i < subscribers[this.topic].length; i++)
-			subscribers[this.topic][i](this.checkbox.checked);
-	};
-
-	var init = function init() {
-		var elem = document.querySelectorAll('.ui-checkbox');
-		var size = elem.length;
-		for (var i = 0; i < size; i++)
-			new CheckBox(elem[i]);
-	};
-
-	return {
-		init : init,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe
-	};
-
-})();
-
-window.addEventListener("load", function() {
-	BorderImage.init();
-});
-
-var BorderImage = (function BorderImage() {
-
-	var getElemById = document.getElementById.bind(document);
-
-	var subject;
-	var preview;
-	var guidelines = [];
-	var positions = ['top', 'right', 'bottom', 'left'];
-
-	var makeDraggable = function makeDraggable(elem) {
-
-		var offsetTop;
-		var offsetLeft;
-
-		elem.setAttribute('data-draggable', 'true');
-
-		var dragStart = function dragStart(e) {
-			if (e.target.getAttribute('data-draggable') !== 'true' ||
-				e.target !== elem || e.button !== 0)
-				return;
-
-			offsetLeft = e.clientX - elem.offsetLeft;
-			offsetTop = e.clientY - elem.offsetTop;
-
-			document.addEventListener('mousemove', mouseDrag);
-			document.addEventListener('mouseup', dragEnd);
-		};
-
-		var dragEnd = function dragEnd(e) {
-			if (e.button !== 0)
-				return;
-
-			document.removeEventListener('mousemove', mouseDrag);
-			document.removeEventListener('mouseup', dragEnd);
-		};
-
-		var mouseDrag = function mouseDrag(e) {
-
-			elem.style.left = e.clientX - offsetLeft + 'px';
-			elem.style.top = e.clientY - offsetTop + 'px';
-		};
-
-		elem.addEventListener('mousedown', dragStart, false);
-	};
-
-	var PreviewControl = function PreviewControl() {
-
-		var dragging = false;
-		var valueX = null;
-		var valueY = null;
-
-		var dragStart = function dragStart(e) {
-			if (e.button !== 0)
-				return;
-
-			valueX = e.clientX - preview.clientWidth;
-			valueY = e.clientY - preview.clientHeight;
-			dragging = true;
-
-			document.addEventListener('mousemove', mouseDrag);
-		};
-
-		var dragEnd = function dragEnd(e) {
-			if (e.button !== 0 || dragging === false)
-				return;
-
-			document.removeEventListener('mousemove', mouseDrag);
-			dragging = false;
-		};
-
-		var mouseDrag = function mouseDrag(e) {
-			InputSliderManager.setValue('preview-width', e.clientX - valueX);
-			InputSliderManager.setValue('preview-height', e.clientY - valueY);
-		};
-
-		var init = function init() {
-
-			makeDraggable(preview);
-			makeDraggable(subject);
-
-			var handle = document.createElement('div');
-			handle.className = 'resize-handle';
-
-			handle.addEventListener('mousedown', dragStart);
-			document.addEventListener('mouseup', dragEnd);
-
-			preview.appendChild(handle);
-
-		};
-
-		return {
-			init: init
-		};
-
-	}();
-
-	var ImageReader = (function ImageReader() {
-
-		var fReader = new FileReader();
-		var browse = document.createElement('input');
-
-		var loadImage = function loadImage(e) {
-			if (browse.files.length === 0)
-				return;
-
-			var file = browse.files[0];
-
-			if (file.type.slice(0, 5) !== 'image')
-				return;
-
-			fReader.readAsDataURL(file);
-
-			return false;
-		};
-
-		fReader.onload = function(e) {
-			ImageControl.loadRemoteImage(e.target.result);
-		};
-
-		var load = function load() {
-			browse.click();
-		};
-
-		browse.setAttribute('type', 'file');
-		browse.style.display = 'none';
-		browse.onchange = loadImage;
-
-		return {
-			load: load
-		};
-
-	})();
-
-	var ImageControl = (function ImageControl() {
-
-		var scale = 0.5;
-		var imgSource = new Image();
-		var imgState = null;
-		var selected = null;
-
-
-		var topics = ['slice', 'width', 'outset'];
-		var properties = {};
-		properties['border1'] = {
-			fill			: false,
-
-			slice_values	: [27, 27, 27, 27],
-			width_values	: [20, 20, 20, 20],
-			outset_values	: [0, 0, 0, 0],
-
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [1, 1],
-			size			: [300, 200],
-			preview_area	: 400
-		};
-
-		properties['border2'] = {
-			fill			: false,
-
-			slice_values	: [33, 33, 33, 33],
-			width_values	: [1.5, 1.5, 1.5, 1.5],
-			outset_values	: [0, 0, 0, 0],
-
-			slice_units		: [1, 1, 1, 1],
-			width_units		: [2, 2, 2, 2],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [2, 2],
-			size			: [300, 200],
-			preview_area	: 400
-		};
-
-		properties['border3'] = {
-			fill			: true,
-
-			slice_values	: [15, 15, 15, 15],
-			width_values	: [10, 10, 10, 10],
-			outset_values	: [0, 0, 0, 0],
-
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [2, 2],
-			size			: [300, 200],
-			preview_area	: 400
-		};
-
-		properties['border4'] = {
-			fill			: false,
-
-			slice_values	: [13, 13, 13, 13],
-			width_values	: [13, 13, 13, 13],
-			outset_values	: [13, 13, 13, 13],
-
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [0, 0],
-			size			: [300, 200],
-			preview_area	: 400
-		};
-
-		properties['border5'] = {
-			fill			: false,
-
-			slice_values	: [0, 12, 0, 12],
-			width_values	: [0, 12, 0, 12],
-			outset_values	: [0, 0, 0, 0],
-
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [0, 0],
-			size			: [300, 200],
-			preview_area	: 400,
-		};
-
-		properties['border6'] = {
-			fill			: false,
-
-			slice_values	: [42, 42, 42, 42],
-			width_values	: [42, 42, 42, 42],
-			outset_values	: [0, 0, 0, 0],
-
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [2, 2],
-			size			: [350, 350],
-			preview_area	: 500,
-		};
-
-
-		var loadLocalImage = function loadLocalImage(source) {
-			var location = "images/" + source;
-			imgSource.src = location;
-		};
-
-		var loadRemoteImage = function loadRemoteImage(source) {
-			imgSource.src = source;
-			if (selected)
-				selected.removeAttribute('selected');
-			Tool.setOutputCSS('source', 'url("' + source + '")');
-		};
-
-		var pickImage = function pickImage(e) {
-			if (e.target.className === 'image') {
-				selected = e.target;
-				selected.setAttribute('selected', 'true');
-				loadRemoteImage(e.target.src);
-				imgState = e.target.getAttribute('data-stateID');
-			}
-		};
-
-		var loadImageState = function loadImageState(stateID) {
-			if (properties[stateID] === undefined)
-				return;
-
-			var prop = properties[stateID];
-			var topic;
-			var unit_array;
-			var value_array;
-
-			for (var i in topics) {
-				for (var j=0; j<4; j++) {
-					topic = topics[i] + '-' + positions[j];
-					unit_array = topics[i] + '_units';
-					value_array = topics[i] + '_values';
-					InputSliderManager.setValue(topic, prop[value_array][j]);
-					DropDownManager.setValue(topic, prop[unit_array][j]);
-				}
-			}
-
-			ButtonManager.setValue('slice-fill', prop['fill']);
-			DropDownManager.setValue('image-repeat-X', prop['repeat'][0]);
-			DropDownManager.setValue('image-repeat-Y', prop['repeat'][1]);
-			InputSliderManager.setValue('preview-width', prop['size'][0]);
-			InputSliderManager.setValue('preview-height', prop['size'][1]);
-			InputSliderManager.setValue('preview-area-height', prop['preview_area']);
-		};
-
-		var update = function update() {
-			scale =  Math.min(300, (30000 / this.width) | 0);
-			setScale(scale);
-			InputSliderManager.setValue('scale', scale, false);
-
-			subject.style.backgroundImage = 'url("' + this.src + '")';
-			preview.style.borderImageSource = 'url("' + this.src + '")';
-
-			guidelines['slice-top'].setMax(this.height);
-			guidelines['slice-right'].setMax(this.width);
-			guidelines['slice-bottom'].setMax(this.height);
-			guidelines['slice-left'].setMax(this.width);
-
-			if (imgState)
-				loadImageState(imgState);
-		};
-
-		var setScale = function setScale(value) {
-			scale = value;
-			var w = imgSource.width * scale / 100 | 0;
-			var h = imgSource.height * scale / 100 | 0;
-			subject.style.width = w + 'px';
-			subject.style.height = h + 'px';
-
-			for (var i = 0; i < positions.length; i++)
-				guidelines['slice-' + positions[i]].updateGuidelinePos();
-		};
-
-		var getScale = function getScale() {
-			return scale/100;
-		};
-
-		var toggleGallery = function toggleGallery() {
-			var gallery = getElemById('image-gallery');
-			var button  = getElemById('toggle-gallery');
-			var state = 1;
-			button.addEventListener('click', function() {
-				state = 1 ^ state;
-				if (state === 0) {
-					gallery.setAttribute('data-collapsed', 'true');
-					button.setAttribute('data-action', 'show');
-				}
-				else {
-					gallery.removeAttribute('data-collapsed');
-					button.setAttribute('data-action', 'hide');
-				}
-			});
-		};
-
-		var init = function init() {
-			var gallery = getElemById('image-gallery');
-			var browse = getElemById('load-image');
-			var remote = getElemById('remote-url');
-			var load_remote = getElemById('load-remote');
-
-			remote.addEventListener('change', function(){
-				loadRemoteImage(this.value);
-			});
-
-			load_remote.addEventListener('click', function(){
-				loadRemoteImage(remote.value);
-			});
-
-			browse.addEventListener('click', ImageReader.load);
-			gallery.addEventListener('click', pickImage);
-			imgSource.addEventListener('load', update);
-
-			InputSliderManager.subscribe('scale', setScale);
-			InputSliderManager.setValue('scale', scale);
-			imgState = 'border1';
-			loadRemoteImage('https://mdn.mozillademos.org/files/6007/border-image-1.png');
-			toggleGallery();
-		};
-
-		return {
-			init: init,
-			getScale : getScale,
-			loadRemoteImage: loadRemoteImage
-		};
-
-	})();
-
-	var GuideLine = function GuideLine(node) {
-		var topic = node.getAttribute('data-topic');
-		var axis = node.getAttribute('data-axis');
-
-		this.node = node;
-		this.topic = topic;
-		this.axis = axis;
-		this.info = topic.split('-')[1];
-
-		this.position = 0;
-		this.value = 0;
-		this.unit = 0;
-		this.max = 0;
-		this.pos = positions.indexOf(this.info);
-
-		guidelines[topic] = this;
-
-		var relative_container = document.createElement('div');
-		var tooltip = document.createElement('div');
-		var tooltip2 = document.createElement('div');
-
-		tooltip.className = 'tooltip';
-		tooltip.setAttribute('data-info', this.info);
-
-		tooltip2.className = 'tooltip2';
-		tooltip2.textContent = this.info;
-		tooltip2.setAttribute('data-info', this.info);
-
-		this.tooltip = tooltip;
-
-		relative_container.appendChild(tooltip);
-		relative_container.appendChild(tooltip2);
-		node.appendChild(relative_container);
-
-		var startX = 0;
-		var startY = 0;
-		var start = 0;
-
-		var startDrag = function startDrag(e) {
-			startX = e.clientX;
-			startY = e.clientY;
-			start = guidelines[topic].position;
-			document.body.setAttribute('data-move', axis);
-			relative_container.setAttribute('data-active', '');
-			node.setAttribute('data-active', '');
-
-			document.addEventListener('mousemove', updateGuideline);
-			document.addEventListener('mouseup', endDrag);
-		};
-
-		var endDrag = function endDrag() {
-			document.body.removeAttribute('data-move');
-			relative_container.removeAttribute('data-active');
-			node.removeAttribute('data-active');
-
-			document.removeEventListener('mousemove', updateGuideline);
-		};
-
-		var updateGuideline = function updateGuideline(e) {
-			var value;
-			if (topic === 'slice-top')
-				value = e.clientY - startY + start;
-
-			if (topic === 'slice-right')
-				value = startX - e.clientX + start;
-
-			if (topic === 'slice-bottom')
-				value = startY - e.clientY + start;
-
-			if (topic === 'slice-left')
-				value = e.clientX - startX + start;
-
-			if (this.unit === 0)
-				InputSliderManager.setValue(topic, value * 1 / ImageControl.getScale() | 0);
-			else {
-				InputSliderManager.setValue(topic, (value * 100 / (this.max * ImageControl.getScale())) | 0);
-			}
-
-		}.bind(this);
-
-		node.addEventListener("mousedown", startDrag);
-
-		InputSliderManager.subscribe(topic, this.setPosition.bind(this));
-		InputSliderManager.setValue(topic, this.position);
-	};
-
-
-	GuideLine.prototype.updateGuidelinePos = function updateGuidelinePos() {
-		if (this.unit === 0)
-			this.position = this.value * ImageControl.getScale() | 0;
-		else
-			this.position = this.value * this.max * ImageControl.getScale() / 100 | 0;
-
-		this.node.style[this.info] = this.position + 'px';
-	};
-
-	GuideLine.prototype.setPosition = function setPosition(value) {
-		this.value = value;
-		this.tooltip.textContent = value;
-		this.updateGuidelinePos();
-		Tool.setBorderSlice(this.pos, value);
-	};
-
-	GuideLine.prototype.setMax = function setMax(max) {
-		this.max = max;
-		this.updateLimit();
-	};
-
-	GuideLine.prototype.updateLimit = function updateLimit() {
-		if (this.unit === 1)
-			InputSliderManager.setMax(this.topic, 100);
-		else
-			InputSliderManager.setMax(this.topic, this.max);
-	};
-
-	GuideLine.prototype.setUnit = function setUnit(type) {
-		if (type === '%')	this.unit = 1;
-		if (type === '')	this.unit = 0;
-		this.updateLimit();
-	};
-
-	/*
-	 * Unit panel
-	 */
-	var UnitPanel = (function UnitPanel () {
-
-		var panel;
-		var title;
-		var precision;
-		var step;
-		var unit_topic = null; // settings are made for this topic
-		var step_option = [1, 0.1, 0.01];
-
-		var updatePrecision = function updatePrecision(value) {
-			InputSliderManager.setPrecision('unit-step', value);
-			InputSliderManager.setStep('unit-step', step_option[value]);
-			InputSliderManager.setMin('unit-step', step_option[value]);
-
-			if (unit_topic)
-				InputSliderManager.setPrecision(unit_topic, value);
-		};
-
-		var updateUnitSettings = function updateUnitSettings(value) {
-			if (unit_topic)
-				InputSliderManager.setStep(unit_topic, value);
-		};
-
-		var show = function show(e) {
-			var topic = e.target.getAttribute('data-topic');
-			var precision = InputSliderManager.getPrecision(topic);
-			var step = InputSliderManager.getStep(topic);
-
-			unit_topic = topic;
-			title.textContent = topic;
-
-			panel.setAttribute('data-active', 'true');
-			panel.style.top = e.target.offsetTop - 40 + 'px';
-			panel.style.left = e.target.offsetLeft + 30 + 'px';
-
-			InputSliderManager.setValue('unit-precision', precision);
-			InputSliderManager.setValue('unit-step', step);
-		};
-
-		var init = function init() {
-			panel = document.createElement('div');
-			title = document.createElement('div');
-			var close = document.createElement('div');
-
-			step = InputSliderManager.createSlider('unit-step', 'step');
-			precision = InputSliderManager.createSlider('unit-precision', 'precision');
-
-			InputSliderManager.setStep('unit-precision', 1);
-			InputSliderManager.setMax('unit-precision', 2);
-			InputSliderManager.setValue('unit-precision', 2);
-			InputSliderManager.setSensivity('unit-precision', 20);
-
-			InputSliderManager.setValue('unit-step', 1);
-			InputSliderManager.setStep('unit-step', 0.01);
-			InputSliderManager.setPrecision('unit-step', 2);
-
-			InputSliderManager.subscribe('unit-precision', updatePrecision);
-			InputSliderManager.subscribe('unit-step', updateUnitSettings);
-
-			close.addEventListener('click', function () {
-				panel.setAttribute('data-active', 'false');
-			});
-
-			title.textContent = 'Properties';
-			title.className = 'title';
-			close.className = 'close';
-			panel.id = 'unit-settings';
-			panel.setAttribute('data-active', 'false');
-			panel.appendChild(title);
-			panel.appendChild(precision);
-			panel.appendChild(step);
-			panel.appendChild(close);
-			document.body.appendChild(panel);
-		};
-
-		return {
-			init : init,
-			show : show
-		};
-
-	})();
-
-	/**
-	 * Tool Manager
-	 */
-	var Tool = (function Tool() {
-		var preview_area;
-		var dropdown_unit_options = [
-			{ '' : '--', '%' : '%'},
-			{ 'px' : 'px', '%' : '%', 'em' : 'em'},
-			{ 'px' : 'px', 'em' : 'em'},
-		];
-
-		var border_slice = [];
-		var border_width = [];
-		var border_outset = [];
-
-		var border_slice_values = [];
-		var border_width_values = [];
-		var border_outset_values = [];
-
-		var border_slice_units = ['', '', '', ''];
-		var border_width_units = ['px', 'px', 'px', 'px'];
-		var border_outset_units = ['px', 'px', 'px', 'px'];
-
-		var border_fill = false;
-		var border_repeat = ['round', 'round'];
-		var CSS_code = {
-			'source' : null,
-			'slice' : null,
-			'width' : null,
-			'outset' : null,
-			'repeat' : null
-		};
-
-		var setBorderSlice = function setBorderSlice(positionID, value) {
-			border_slice[positionID] = value + border_slice_units[positionID];
-			updateBorderSlice();
-		};
-
-		var updateBorderSlice = function updateBorderSlice() {
-			var value = border_slice.join(' ');
-			if (border_fill === true)
-				value += ' fill';
-
-			preview.style.borderImageSlice = value;
-			setOutputCSS('slice', value);
-		};
-
-		var setBorderFill = function setBorderFill(value) {
-			border_fill = value;
-			var bimgslice = border_slice.join(' ');;
-			if (value === true)
-				bimgslice += ' fill';
-
-			preview.style.borderImageSlice = bimgslice;
-		};
-
-		var updateBorderWidth = function updateBorderWidth() {
-			var value = border_width.join(' ');
-			preview.style.borderImageWidth = value;
-			setOutputCSS('width', value);
-		};
-
-		var updateBorderOutset = function updateBorderOutset() {
-			var value = border_outset.join(' ');
-			preview.style.borderImageOutset = border_outset.join(' ');
-			setOutputCSS('outset', value);
-		};
-
-		var setBorderRepeat = function setBorderRepeat(obj) {
-			border_repeat[obj.value] = obj.name;
-			var value = border_repeat.join(' ');
-			preview.style.borderImageRepeat = value;
-			setOutputCSS('repeat', value);
-		};
-
-		var setOutputCSS = function setOutputCSS(topic, value) {
-			CSS_code[topic].textContent = value + ';';
-		};
-
-		var setPreviewFontSize = function setPreviewFontSize(value) {
-			preview.style.fontSize = value + 'px';
-		};
-
-		var setPreviewWidth = function setPreviewWidth(value) {
-			preview.style.width = value + 'px';
-		};
-
-		var setPreviewHeight = function setPreviewHeight(value) {
-			preview.style.height = value + 'px';
-		};
-
-		var setPreviewAreaHeight = function setPreviewAreaHeight(value) {
-			preview_area.style.height = value + 'px';
-		};
-
-		var updateDragOption = function updateDragOption(value) {
-			if (value === true)
-				subject.setAttribute('data-draggable', 'true');
-			else
-				subject.removeAttribute('data-draggable');
-		};
-
-		var createProperty = function createProperty(topic, labelID, optionsID) {
-
-			var slider = InputSliderManager.createSlider(topic, positions[labelID]);
-			var dropdown = DropDownManager.createDropDown(topic, dropdown_unit_options[optionsID]);
-
-			InputSliderManager.setSensivity(topic, 3);
-			InputSliderManager.setPrecision(topic, 1);
-
-			var property = document.createElement('div');
-			var config = document.createElement('div');
-
-			property.className = 'property';
-			config.className = 'config';
-			config.setAttribute('data-topic', topic);
-			config.addEventListener('click', UnitPanel.show);
-
-			property.appendChild(slider);
-			property.appendChild(dropdown);
-			property.appendChild(config);
-
-			return property;
-		};
-
-		var initBorderSliceControls = function initBorderSliceControls() {
-			var container = getElemById('border-slice-control');
-
-			var listenForChanges = function listenForChanges(topic, id) {
-				InputSliderManager.subscribe(topic, function(value) {
-					border_slice_values[id] = value;
-					border_slice[id] = value + border_slice_units[id];
-					updateBorderSlice();
-				});
-
-				DropDownManager.subscribe(topic, function(obj) {
-					guidelines[topic].setUnit(obj.value);
-					border_slice_units[id] = obj.value;
-					border_slice[id] = border_slice_values[id] + obj.value;
-					updateBorderSlice();
-				});
-			};
-
-			for (var i = 0; i < positions.length; i++) {
-				var topic = 'slice-' + positions[i];
-				var property = createProperty(topic, i, 0);
-				listenForChanges(topic, i);
-
-				container.appendChild(property);
-			}
-
-			container.appendChild(container.children[1]);
-
-		};
-
-		var initBorderWidthControls = function initBorderWidthControls() {
-			var container = getElemById('border-width-control');
-
-			var listenForChanges = function listenForChanges(topic, id) {
-				InputSliderManager.subscribe(topic, function(value) {
-					border_width_values[id] = value;
-					border_width[id] = value + border_width_units[id];
-					updateBorderWidth();
-				});
-
-				DropDownManager.subscribe(topic, function(obj) {
-					if (obj.value === '%')
-						InputSliderManager.setMax(topic, 100);
-					else
-						InputSliderManager.setMax(topic, 1000);
-
-					border_width_units[id] = obj.value;
-					border_width[id] = border_width_values[id] + obj.value;
-					updateBorderWidth();
-				});
-			};
-
-			for (var i = 0; i < positions.length; i++) {
-				var topic = 'width-' + positions[i];
-				var property = createProperty(topic, i, 1);
-				InputSliderManager.setMax(topic, 1000);
-				listenForChanges(topic, i);
-
-				container.appendChild(property);
-			}
-		};
-
-		var initBorderOutsetControls = function initBorderOutsetControls() {
-
-			var container = getElemById('border-outset-control');
-
-			var listenForChanges = function listenForChanges(topic, id) {
-				InputSliderManager.subscribe(topic, function(value) {
-					border_outset_values[id] = value;
-					border_outset[id] = value + border_outset_units[id];
-					updateBorderOutset();
-				});
-
-				DropDownManager.subscribe(topic, function(obj) {
-					border_outset_units[id] = obj.value;
-					border_outset[id] = border_outset_values[id] + obj.value;
-					updateBorderOutset();
-				});
-			};
-
-			for (var i = 0; i < positions.length; i++) {
-				var topic = 'outset-' + positions[i];
-				var property = createProperty(topic, i, 2);
-				InputSliderManager.setMax(topic, 1000);
-				listenForChanges(topic, i);
-
-				container.appendChild(property);
-			}
-		};
-
-		var init = function init() {
-
-			var gallery =
-			subject = getElemById('subject');
-			preview = getElemById("preview");
-			preview_area = getElemById("preview_section");
-
-
-			CSS_code['source'] = getElemById("out-border-source");
-			CSS_code['slice'] = getElemById("out-border-slice");
-			CSS_code['width'] = getElemById("out-border-width");
-			CSS_code['outset'] = getElemById("out-border-outset");
-			CSS_code['repeat'] = getElemById("out-border-repeat");
-
-			initBorderSliceControls();
-			initBorderWidthControls();
-			initBorderOutsetControls();
-
-			var elem = document.querySelectorAll('.guideline');
-			var size = elem.length;
-			for (var i = 0; i < size; i++)
-				new GuideLine(elem[i]);
-
-			PreviewControl.init();
-
-			ButtonManager.subscribe('slice-fill',setBorderFill);
-			ButtonManager.subscribe('drag-subject', updateDragOption);
-			ButtonManager.setValue('drag-subject', false);
-
-			DropDownManager.subscribe('image-repeat-X', setBorderRepeat);
-			DropDownManager.subscribe('image-repeat-Y', setBorderRepeat);
-
-			InputSliderManager.subscribe('preview-area-height', setPreviewAreaHeight);
-			InputSliderManager.subscribe('preview-width', setPreviewWidth);
-			InputSliderManager.subscribe('preview-height', setPreviewHeight);
-			InputSliderManager.subscribe('font-size', setPreviewFontSize);
-			InputSliderManager.setValue('preview-width', 300);
-			InputSliderManager.setValue('preview-height', 200);
-		};
-
-		return {
-			init: init,
-			setOutputCSS: setOutputCSS,
-			setBorderSlice: setBorderSlice
-		};
-
-	})();
-
-	/**
-	 * Init Tool
-	 */
-	var init = function init() {
-		InputSliderManager.init();
-		DropDownManager.init();
-		ButtonManager.init();
-		UnitPanel.init();
-		Tool.init();
-		ImageControl.init();
-	};
-
-	return {
-		init : init
-	};
-
-})();
-
-
-
- -

{{ EmbedLiveSample('Border_Image_Generator', '100%', '1270px') }}

- -

 

diff --git a/files/pt-br/web/css/tools/border-radius_generator/index.html b/files/pt-br/web/css/tools/border-radius_generator/index.html deleted file mode 100644 index a7db08eb69..0000000000 --- a/files/pt-br/web/css/tools/border-radius_generator/index.html +++ /dev/null @@ -1,1593 +0,0 @@ ---- -title: Gerador de Border-radius -slug: Web/CSS/Tools/Border-radius_generator -tags: - - CSS - - Ferramentas -translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator ---- -

Esta ferramenta pode ser utilizada para gerar o efeito {{cssxref("border-radius")}} em CSS3.

-
-

border-radius

-

HTML Content

- 
<div id="container">
-    <div class="group section">
-        <div id="preview" class="col span_12">
-            <div id="subject">
-                <div id="top-left" class="radius-container"
-                    data-X="left" data-Y="top">
-                </div>
-                <div id="top-right" class="radius-container"
-                    data-X="right" data-Y="top">
-                </div>
-                <div id="bottom-right" class="radius-container"
-                    data-X="right" data-Y="bottom">
-                </div>
-                <div id="bottom-left" class="radius-container"
-                    data-X="left" data-Y="bottom">
-                </div>
-
-                <div id="radius-ui-sliders">
-                    <div id="tlr" class="ui-input-slider" data-topic="top-left"
-                         data-unit=" px" data-sensivity="2"></div>
-
-                    <div id="tlw" class="ui-input-slider" data-topic="top-left-w"
-                         data-unit=" px" data-sensivity="2"></div>
-
-                    <div id="tlh" class="ui-input-slider" data-topic="top-left-h"
-                        data-unit=" px" data-sensivity="2"></div>
-
-                    <div id="trr" class="ui-input-slider" data-topic="top-right"
-                         data-unit=" px" data-sensivity="2"></div>
-
-                    <div id="trw" class="ui-input-slider" data-topic="top-right-w"
-                         data-unit=" px" data-sensivity="2"></div>
-
-                    <div id="trh" class="ui-input-slider" data-topic="top-right-h"
-                        data-unit=" px" data-sensivity="2"></div>
-
-                    <div id="brr" class="ui-input-slider" data-topic="bottom-right"
-                         data-unit=" px" data-sensivity="2"></div>
-
-                    <div id="brw" class="ui-input-slider" data-topic="bottom-right-w"
-                         data-unit=" px" data-sensivity="2"></div>
-
-                    <div id="brh" class="ui-input-slider" data-topic="bottom-right-h"
-                        data-unit=" px" data-sensivity="2"></div>
-
-                    <div id="blr" class="ui-input-slider" data-topic="bottom-left"
-                         data-unit=" px" data-sensivity="2"></div>
-
-                    <div id="blw" class="ui-input-slider" data-topic="bottom-left-w"
-                         data-unit=" px" data-sensivity="2"></div>
-
-                    <div id="blh" class="ui-input-slider" data-topic="bottom-left-h"
-                        data-unit=" px" data-sensivity="2"></div>
-                </div>
-            </div>
-        </div>
-    </div>
-    <div id="controls" class="group section">
-
-        <div class="group section">
-            <div id="dimensions">
-                <div class="ui-input-slider" data-topic="width" data-info="width"
-                     data-unit=" px" data-min="150" data-max="700" data-sensivity="1"></div>
-
-                <div class="ui-input-slider" data-topic="height" data-info="height"
-                    data-unit=" px" data-min="75" data-max="350" data-sensivity="1"></div>
-            </div>
-
-            <div id="output"></div>
-        </div>
-
-        <div class="group section">
-            <div id="radius-lock">
-                <div class="info"> rounded corner </div>
-                <div class="ui-checkbox" data-topic='top-left'></div>
-                <div class="ui-checkbox" data-topic='top-right'></div>
-                <div class="ui-checkbox" data-topic='bottom-right'></div>
-                <div class="ui-checkbox" data-topic='bottom-left'></div>
-            </div>
-
-            <div id="unit-selection">
-                <div class="info"> select border units </div>
-            </div>
-        </div>
-
-    </div>
-</div>
-
-

CSS Content

- 
/*  GRID OF TEN
- * ========================================================================== */
-
-.span_12 {
-	width: 100%;
-}
-
-.span_11 {
-	width: 91.46%;
-}
-
-.span_10 {
-	width: 83%;
-}
-
-.span_9 {
-	width: 74.54%;
-}
-
-.span_8 {
-	width: 66.08%;
-}
-
-.span_7 {
-	width: 57.62%;
-}
-
-.span_6 {
-	width: 49.16%;
-}
-
-.span_5 {
-	width: 40.7%;
-}
-
-.span_4 {
-	width: 32.24%;
-}
-
-.span_3 {
-	width: 23.78%;
-}
-
-.span_2 {
-	width: 15.32%;
-}
-
-.span_1 {
-	width: 6.86%;
-}
-
-
-
-
-/*  SECTIONS
- * ========================================================================== */
-
-.section {
-	clear: both;
-	padding: 0px;
-	margin: 0px;
-}
-
-/*  GROUPING
- * ========================================================================== */
-
-
-.group:before, .group:after {
-    content: "";
-    display: table;
-}
-
-.group:after {
-    clear:both;
-}
-
-.group {
-    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
-}
-
-/*  GRID COLUMN SETUP
- * ========================================================================== */
-
-.col {
-	display: block;
-	float:left;
-	margin: 1% 0 1% 1.6%;
-}
-
-.col:first-child {
-	margin-left: 0;
-} /* all browsers except IE6 and lower */
-
-
-/*
- * UI Component
- */
-
-.ui-input-slider-container {
-	height: 20px;
-	margin: 10px 0;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	-moz-user-select: none;
-	user-select: none;
-}
-
-.ui-input-slider-container * {
-	float: left;
-	height: 100%;
-	line-height: 100%;
-}
-
-/* Input Slider */
-
-.ui-input-slider > input {
-	margin: 0;
-	padding: 0;
-	width: 50px;
-	text-align: center;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-.ui-input-slider-info {
-	width: 90px;
-	padding: 0px 10px 0px 0px;
-	text-align: right;
-	text-transform: lowercase;
-}
-
-.ui-input-slider-left, .ui-input-slider-right {
-	width: 16px;
-	cursor: pointer;
-	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
-}
-
-.ui-input-slider-right {
-	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
-}
-
-.ui-input-slider-name {
-	width: 90px;
-	padding: 0 10px 0 0;
-	text-align: right;
-	text-transform: lowercase;
-}
-
-.ui-input-slider-btn-set {
-	width: 25px;
-	background-color: #2C9FC9;
-	border-radius: 5px;
-	color: #FFF;
-	font-weight: bold;
-	line-height: 14px;
-	text-align: center;
-}
-
-.ui-input-slider-btn-set:hover {
-	background-color: #379B4A;
-	cursor: pointer;
-}
-
-/*
- * UI Component
- */
-
-/* Checkbox */
-
-.ui-checkbox {
-	text-align: center;
-	font-size: 16px;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	line-height: 1.5em;
-	color: #FFF;
-
-	-moz-user-select: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-}
-
-.ui-checkbox > input {
- 	display: none;
-}
-
-.ui-checkbox > label {
-	font-size: 12px;
-	padding: 0.333em 1.666em 0.5em;
-	height: 1em;
-	line-height: 1em;
-
-	background-color: #888;
-	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
-	background-position: center center;
-	background-repeat: no-repeat;
-
-	color: #FFF;
-	border-radius: 3px;
-	font-weight: bold;
-	float: left;
-}
-
-.ui-checkbox .text {
-	padding-left: 34px;
-	background-position: center left 10px;
-}
-
-.ui-checkbox .left {
-	padding-right: 34px;
-	padding-left: 1.666em;
-	background-position: center right 10px;
-}
-
-.ui-checkbox > label:hover {
-	cursor: pointer;
-}
-
-.ui-checkbox > input:checked + label {
-	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
-	background-color: #379B4A;
-}
-
-body {
-	max-width: 1000px;
-	margin: 0 auto;
-
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-
-	-moz-user-select: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-}
-
-#container {
-	width: 100%;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-/******************************************************************************/
-/******************************************************************************/
-/*
- * Preview Area
- */
-
-#preview {
-	height: 500px;
-	border: 1px solid #CCC;
-	border-radius: 3px;
-	text-align: center;
-	overflow: hidden;
-	position: relative;
-}
-
-#preview .content {
-	width: 100%;
-	height: 100%;
-	display: block;
-}
-
-#preview input {
-	color: #333;
-	border: 1px solid #CCC;
-	border-radius: 3px;
-}
-
-#subject {
-	width: 400px;
-	height: 150px;
-	margin: 0 auto;
-	border: 3px solid #C60;
-	background: #FFF;
-	position: relative;
-}
-
-.radius {
-	width: 50%;
-	height: 50%;
-	border: 1px solid #CCC;
-	display: none;
-	position: absolute;
-	z-index: 1;
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-.handle {
-	width: 16px;
-	height: 16px;
-	position: absolute;
-	z-index: 2;
-}
-
-.handle-top-left {
-	top: -12px;
-	left: -12px;
-	cursor: se-resize;
-	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top left no-repeat;
-}
-
-.handle-top-right {
-	top: -12px;
-	right: -12px;
-	cursor: sw-resize;
-	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top right no-repeat;
-}
-
-.handle-bottom-right {
-	bottom: -12px;
-	right: -12px;
-	cursor: nw-resize;
-	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") bottom right no-repeat;
-}
-
-.handle-bottom-left {
-	bottom: -12px;
-	left: -12px;
-	cursor: ne-resize;
-	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") bottom left no-repeat;
-}
-
-
-.radius-container {
-	position: absolute;
-	display : block;
-	z-index: 1;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-
-/* TOP LEFT */
-#top-left {
-	top: 0;
-	left: 0;
-}
-
-#top-left .radius {
-	border-top-left-radius: 100%;
-	top: 0;
-	left: 0;
-}
-
-/* TOP RIGHT */
-#top-right {
-	top: 0;
-	right: 0;
-}
-
-#top-right .radius {
-	border-top-right-radius: 100%;
-	top: 0;
-	right: 0;
-}
-
-/* BOTTOM RIGHT */
-#bottom-right {
-	bottom: 0;
-	right: 0;
-}
-
-#bottom-right .radius {
-	border-bottom-right-radius: 100%;
-	bottom: 0;
-	right: 0;
-}
-
-/* BOTTOM lEFT */
-#bottom-left {
-	bottom: 0;
-	left: 0;
-}
-
-#bottom-left .radius {
-	border-bottom-left-radius: 100%;
-	bottom: 0;
-}
-
-/* INPUT SLIDERS */
-
-#preview .ui-input-slider {
-	margin: 10px;
-	position: absolute;
-	z-index: 10;
-}
-
-#radius-ui-sliders {
-	width: 100%;
-	height: 100%;
-	min-height: 75px;
-	min-width: 150px;
-	padding: 20px 50px;
-	top: -20px;
-	left: -50px;
-	position: relative;
-}
-
-#tlr {
-	top: -30px;
-	left: -50px;
-	display: none;
-}
-
-#tlw {
-	top: -30px;
-	left: 30px;
-}
-
-#tlh {
-	top: 20px;
-	left: -50px;
-}
-
-#trr {
-	top: -30px;
-	right: -50px;
-	display: none;
-}
-
-#trw {
-	top: -30px;
-	right: 30px;
-}
-
-#trh {
-	top: 20px;
-	right: -50px;
-}
-
-#brr {
-	bottom: -30px;
-	right: -50px;
-	display: none;
-}
-
-#brw {
-	bottom: -30px;
-	right: 30px;
-}
-
-#brh {
-	bottom: 20px;
-	right: -50px;
-}
-
-#blr {
-	bottom: -30px;
-	left: -50px;
-	display: none;
-}
-
-#blw {
-	bottom: -30px;
-	left: 30px;
-}
-
-#blh {
-	bottom: 20px;
-	left: -50px;
-}
-
-#preview .ui-input-slider-left, #preview .ui-input-slider-right {
-	visibility: hidden;
-}
-
-#preview .ui-input-slider-container:hover .ui-input-slider-left {
-	visibility: visible;
-}
-
-#preview .ui-input-slider-container:hover .ui-input-slider-right {
-	visibility: visible;
-}
-
-/*
- *
- */
-
-#unit-selection {
-	width: 200px;
-	height: 75px;
-	margin: 30px 30px 0 0;
-	padding: 30px;
-	border: 3px solid #555;
-	border-radius: 10px;
-	position: relative;
-	float: right;
-}
-
-#unit-selection .info {
-	height: 20%;
-	width: 100%;
-	line-height: 20%;
-	font-size: 20px;
-	text-align: center;
-	position: relative;
-	top: 40%;
-}
-
-#unit-selection .dropdown {
-	width: 50px;
-	height: 20px;
-	margin: 10px;
-	padding: 0;
-	border-radius: 3px;
-	position: absolute;
-	overflow: hidden;
-}
-
-#unit-selection select {
-	width: 50px;
-	height: 20px;
-	marign: 0;
-	padding: 0 0 0 10px;
-	background: #555;
-	border: 1px solid #555;
-	border: none;
-	color: #FFF;
-	float: left;
-}
-
-#unit-selection select option {
-	background: #FFF;
-	color: #333;
-}
-
-#unit-selection select:hover {
-	cursor: pointer;
-}
-
-#unit-selection .dropdown:before {
-	content: "";
-	width: 18px;
-	height: 20px;
-	display: block;
-	background-color: #555;
-	background-image: url("https://mdn.mozillademos.org/files/5675/dropdown.png");
-	background-position: center center;
-	background-repeat: no-repeat;
-	top: 0px;
-	right: 0px;
-	position: absolute;
-	z-index: 1;
-	pointer-events: none;
-}
-
-#unit-selection .unit-top-left {
-	top: 0;
-	left: 0;
-	display: none;
-}
-
-#unit-selection .unit-top-left-w {
-	top: -22px;
-	left: 30px;
-}
-
-#unit-selection .unit-top-left-h {
-	top: 20px;
-	left: -37px;
-}
-
-#unit-selection .unit-top-right {
-	top: 0;
-	right: 0;
-	display: none;
-}
-
-#unit-selection .unit-top-right-w {
-	top: -22px;
-	right: 30px;
-}
-
-#unit-selection .unit-top-right-h {
-	top: 20px;
-	right: -37px;
-}
-
-#unit-selection .unit-bottom-right {
-	bottom: 0;
-	right: 0;
-	display: none;
-}
-
-#unit-selection .unit-bottom-right-w {
-	bottom: -22px;
-	right: 30px;
-}
-
-#unit-selection .unit-bottom-right-h {
-	bottom: 20px;
-	right: -37px;
-}
-
-#unit-selection .unit-bottom-left {
-	bottom: 0;
-	left: 0;
-	display: none;
-}
-
-#unit-selection .unit-bottom-left-w {
-	bottom: -22px;
-	left: 30px;
-}
-
-#unit-selection .unit-bottom-left-h {
-	bottom: 20px;
-	left: -37px;
-}
-
-/******************************************************************************/
-/******************************************************************************/
-
-
-#radius-lock {
-	width: 200px;
-	height: 75px;
-	margin: 30px 0 0 30px;
-	padding: 30px;
-	border: 3px solid #555;
-	border-radius: 10px;
-	position: relative;
-	float: left;
-}
-
-#radius-lock .ui-checkbox {
-	color: #FFF;
-	position: absolute;
-}
-
-#radius-lock .ui-checkbox > label {
-	height: 20px;
-	width: 34px;
-	padding: 0;
-}
-
-#radius-lock .info {
-	height: 20%;
-	width: 100%;
-	line-height: 20%;
-	font-size: 20px;
-	text-align: center;
-	position: relative;
-	top: 40%;
-}
-
-#radius-lock [data-topic="top-left"] {
-	top: 10px;
-	left: 10px;
-}
-
-#radius-lock [data-topic="top-right"] {
-	top: 10px;
-	right: 10px;
-}
-
-#radius-lock [data-topic="bottom-right"] {
-	bottom: 10px;
-	right: 10px;
-}
-
-#radius-lock [data-topic="bottom-left"] {
-	bottom: 10px;
-	left: 10px;
-}
-
-/**
- * Controls
- */
-
-#dimensions {
-	width: 200px;
-	color: #444;
-	float:left;
-}
-
-#dimensions input {
-	background: #555;
-	color: #FFF;
-	border: none;
-	border-radius: 3px;
-}
-
-#output {
-	width: 500px;
-	padding: 10px 0;
-	margin: 10px 0;
-	color: #555;
-	text-align: center;
-	border: 1px dashed #999;
-	border-radius: 3px;
-	-moz-user-select: text;
-	-webkit-user-select: text;
-	-ms-user-select: text;
-	user-select: text;
-
-	float: right;
-}
-
-
-
-

JavaScript Content

- 
'use strict';
-
-
-/**
- * UI-InputSliderManager
- */
-
-var InputSliderManager = (function InputSliderManager() {
-
-	var subscribers = {};
-	var sliders = [];
-
-	var InputComponent = function InputComponent(obj) {
-		var input = document.createElement('input');
-		input.setAttribute('type', 'text');
-
-		input.addEventListener('click', function(e) {
-			this.select();
-		});
-
-		input.addEventListener('change', function(e) {
-			var value = parseInt(e.target.value);
-
-			if (isNaN(value) === true)
-				setValue(obj.topic, obj.value);
-			else
-				setValue(obj.topic, value);
-		});
-
-		subscribe(obj.topic, function(value) {
-			input.value = value + obj.unit;
-		});
-
-		return input;
-	}
-
-	var SliderComponent = function SliderComponent(obj, sign) {
-		var slider = document.createElement('div');
-		var startX = null;
-		var start_value = 0;
-
-		slider.addEventListener("click", function(e) {
-			setValue(obj.topic, obj.value + obj.step * sign);
-		});
-
-		slider.addEventListener("mousedown", function(e) {
-			startX = e.clientX;
-			start_value = obj.value;
-			document.body.style.cursor = "e-resize";
-			document.addEventListener("mousemove", sliderMotion);
-		});
-
-		document.addEventListener("mouseup", function(e) {
-			document.removeEventListener("mousemove", sliderMotion);
-			document.body.style.cursor = "auto";
-			slider.style.cursor = "pointer";
-		});
-
-		var sliderMotion = function sliderMotion(e) {
-			slider.style.cursor = "e-resize";
-			var delta = (e.clientX - startX) / obj.sensivity | 0;
-			var value = delta * obj.step + start_value;
-			setValue(obj.topic, value);
-		}
-
-		return slider;
-	}
-
-	var InputSlider = function(node) {
-		var min		= node.getAttribute('data-min') | 0;
-		var max		= node.getAttribute('data-max') | 0;
-		var step	= node.getAttribute('data-step') | 0;
-		var value	= node.getAttribute('data-value') | 0;
-		var topic	= node.getAttribute('data-topic');
-		var unit	= node.getAttribute('data-unit');
-		var name 	= node.getAttribute('data-info');
-		var sensivity = node.getAttribute('data-sensivity') | 0;
-
-		this.min = min;
-		this.max = max > 0 ? max : 100;
-		this.step = step === 0 ? 1 : step;
-		this.topic = topic;
-		this.node = node;
-		this.unit = unit;
-		this.sensivity = sensivity > 0 ? sensivity : 5;
-
-		var input = new InputComponent(this);
-		var slider_left  = new SliderComponent(this, -1);
-		var slider_right = new SliderComponent(this,  1);
-
-		slider_left.className = 'ui-input-slider-left';
-		slider_right.className = 'ui-input-slider-right';
-
-		if (name) {
-			var info = document.createElement('span');
-			info.className = 'ui-input-slider-info';
-			info.textContent = name;
-			node.appendChild(info);
-		}
-
-		node.appendChild(slider_left);
-		node.appendChild(input);
-		node.appendChild(slider_right);
-		node.className = 'ui-input-slider ui-input-slider-container';
-
-		this.input = input;
-		sliders[topic] = this;
-		setValue(topic, value);
-	}
-
-	var setValue = function setValue(topic, value, send_notify) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		if (value > slider.max) value = slider.max;
-		if (value < slider.min)	value = slider.min;
-
-		slider.value = value;
-		slider.node.setAttribute('data-value', value);
-
-		if (send_notify !== undefined && send_notify === false) {
-			slider.input.value = value + slider.unit;
-			return;
-		}
-
-		notify.call(slider);
-	}
-
-	var setMax = function setMax(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.max = value;
-		setValue(topic, slider.value);
-	}
-
-	var setMin = function setMin(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.min = value;
-		setValue(topic, slider.value);
-	}
-
-	var setUnit = function setUnit(topic, unit) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.unit = unit;
-		setValue(topic, slider.value);
-	}
-
-	var getNode =  function getNode(topic) {
-		return sliders[topic].node;
-	}
-
-	var subscribe = function subscribe(topic, callback) {
-		if (subscribers[topic] === undefined)
-			subscribers[topic] = [];
-		subscribers[topic].push(callback);
-	}
-
-	var unsubscribe = function unsubscribe(topic, callback) {
-		subscribers[topic].indexOf(callback);
-		subscribers[topic].splice(index, 1);
-	}
-
-	var notify = function notify() {
-		for (var i in subscribers[this.topic]) {
-			subscribers[this.topic][i](this.value);
-		}
-	}
-
-	var init = function init() {
-		var elem = document.querySelectorAll('.ui-input-slider');
-		var size = elem.length;
-		for (var i = 0; i < size; i++)
-			new InputSlider(elem[i]);
-	}
-
-	return {
-		init : init,
-		setMax : setMax,
-		setMin : setMin,
-		setUnit : setUnit,
-		getNode : getNode,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe
-	}
-
-})();
-
-/**
- * UI-ButtonManager
- */
-
-var ButtonManager = (function CheckBoxManager() {
-
-	var subscribers = [];
-	var buttons = [];
-
-	var CheckBox = function CheckBox(node) {
-		var topic = node.getAttribute('data-topic');
-		var state = node.getAttribute('data-state');
-		var name = node.getAttribute('data-label');
-		var align = node.getAttribute('data-text-on');
-
-		state = (state === "true");
-
-		var checkbox = document.createElement("input");
-		var label = document.createElement("label");
-
-		var id = 'checkbox-' + topic;
-		checkbox.id = id;
-		checkbox.setAttribute('type', 'checkbox');
-		checkbox.checked = state;
-
-		label.setAttribute('for', id);
-		if (name) {
-			label.className = 'text';
-			if (align)
-				label.className += ' ' + align;
-			label.textContent = name;
-		}
-
-		node.appendChild(checkbox);
-		node.appendChild(label);
-
-		this.node = node;
-		this.topic = topic;
-		this.checkbox = checkbox;
-
-		checkbox.addEventListener('change', function(e) {
-			notify.call(this);
-		}.bind(this));
-
-		buttons[topic] = this;
-	}
-
-	var getNode =  function getNode(topic) {
-		return buttons[topic].node;
-	}
-
-	var setValue = function setValue(topic, value) {
-		try {
-			buttons[topic].checkbox.checked = value;
-		}
-		catch(error) {
-			console.log(error);
-		}
-	}
-
-	var subscribe = function subscribe(topic, callback) {
-		if (subscribers[topic] === undefined)
-			subscribers[topic] = [];
-
-		subscribers[topic].push(callback);
-	}
-
-	var unsubscribe = function unsubscribe(topic, callback) {
-		subscribers[topic].indexOf(callback);
-		subscribers[topic].splice(index, 1);
-	}
-
-	var notify = function notify() {
-		for (var i = 0; i < subscribers[this.topic].length; i++)
-			subscribers[this.topic][i](this.checkbox.checked);
-	}
-
-	var init = function init() {
-		var elem = document.querySelectorAll('.ui-checkbox');
-		var size = elem.length;
-		for (var i = 0; i < size; i++)
-			new CheckBox(elem[i]);
-	}
-
-	return {
-		init : init,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe
-	}
-
-})();
-
-
-window.addEventListener("load", function() {
-	BorderRadius.init();
-});
-
-var BorderRadius = (function BorderRadius() {
-
-	function getElemById(id) {
-		return document.getElementById(id);
-	}
-
-	/**
-	 * Shadow dragging
-	 */
-	var PreviewMouseTracking = (function Drag() {
-		var active = false;
-		var lastX = 0;
-		var lastY = 0;
-		var subscribers = [];
-
-		var init = function init(id) {
-			var elem = getElemById(id);
-			elem.addEventListener('mousedown', dragStart, false);
-			document.addEventListener('mouseup', dragEnd, false);
-		}
-
-		var dragStart = function dragStart(e) {
-			if (e.button !== 0)
-				return;
-
-			active = true;
-			lastX = e.clientX;
-			lastY = e.clientY;
-			document.addEventListener('mousemove', mouseDrag, false);
-		}
-
-		var dragEnd = function dragEnd(e) {
-			if (e.button !== 0)
-				return;
-
-			if (active === true) {
-				active = false;
-				document.removeEventListener('mousemove', mouseDrag, false);
-			}
-		}
-
-		var mouseDrag = function mouseDrag(e) {
-			notify(e.clientX - lastX, e.clientY - lastY);
-			lastX = e.clientX;
-			lastY = e.clientY;
-		}
-
-		var subscribe = function subscribe(callback) {
-			subscribers.push(callback);
-		}
-
-		var unsubscribe = function unsubscribe(callback) {
-			var index = subscribers.indexOf(callback);
-			subscribers.splice(index, 1);
-		}
-
-		var notify = function notify(deltaX, deltaY) {
-			for (var i in subscribers)
-				subscribers[i](deltaX, deltaY);
-		}
-
-		return {
-			init : init,
-			subscribe : subscribe,
-			unsubscribe : unsubscribe
-		}
-
-	})();
-
-	var subject;
-	var units = ['px', '%'];
-	var output = null;
-
-	var UnitSelector = function UnitSelector(topic) {
-
-		this.container = document.createElement("div");
-		this.select = document.createElement("select");
-		for (var i in units) {
-			var option = document.createElement("option");
-			option.value = i;
-			option.textContent = units[i];
-			this.select.appendChild(option);
-		}
-
-		this.container.className = 'dropdown ' + 'unit-' + topic;
-		this.container.appendChild(this.select);
-	}
-
-	UnitSelector.prototype.setValue = function setValue(value) {
-		this.salect.value = value;
-	}
-
-
-	var RadiusContainer = function RadiusContainer(node) {
-		var radius = document.createElement('div');
-		var handle = document.createElement('div');
-		var x = node.getAttribute('data-x');
-		var y = node.getAttribute('data-y');
-		var active = false;
-
-		this.id = node.id;
-		this.node = node;
-		this.radius = radius;
-		this.handle = handle;
-		this.width = 100;
-		this.height = 50;
-		this.size = 0;
-		this.rounded = false;
-
-		this.unitX = 0;
-		this.unitY = 0;
-		this.unitR = 0;
-
-		this.maxW = 100;
-		this.maxH = 100;
-		this.maxR = 100;
-
-		this.topic = y + '-' + x;
-
-		var sliderW = InputSliderManager.getNode(this.topic + '-w');
-		var sliderH = InputSliderManager.getNode(this.topic + '-h');
-		var sliderR = InputSliderManager.getNode(this.topic);
-
-		this.setUnitX(this.unitX);
-		this.setUnitY(this.unitY);
-		this.setUnitR(this.unitR);
-
-		this.updateWidth();
-		this.updateHeight();
-		this.updateRadius();
-
-		if (x === 'left')	this.resizeX =  1;
-		if (x === 'right')	this.resizeX = -1;
-		if (y === 'top')	this.resizeY =  1;
-		if (y === 'bottom')	this.resizeY = -1;
-
-		radius.className = 'radius';
-
-		var unit_selector = document.getElementById("unit-selection");
-		var unitW = new UnitSelector(this.topic + '-w');
-		var unitH = new UnitSelector(this.topic + '-h');
-		var unitR = new UnitSelector(this.topic);
-
-		unit_selector.appendChild(unitW.container);
-		unit_selector.appendChild(unitH.container);
-		unit_selector.appendChild(unitR.container);
-		node.appendChild(radius);
-		subject.appendChild(handle);
-
-		unitW.select.addEventListener('change', function(e) {
-			this.setUnitX(e.target.value | 0);
-		}.bind(this));
-
-		unitH.select.addEventListener('change', function(e) {
-			this.setUnitY(e.target.value | 0);
-		}.bind(this));
-
-		unitR.select.addEventListener('change', function(e) {
-			this.setUnitR(e.target.value | 0);
-		}.bind(this));
-
-		if (x === 'left' && y == 'top') handle.className = 'handle handle-top-left'
-		if (x === 'right' && y == 'top') handle.className = 'handle handle-top-right';
-		if (x === 'right' && y == 'bottom') handle.className = 'handle handle-bottom-right';
-		if (x === 'left' && y == 'bottom') 	handle.className = 'handle handle-bottom-left';
-
-		handle.addEventListener("mousedown", function(e) {
-			active = true;
-			this.radius.style.display = 'block';
-			PreviewMouseTracking.subscribe(this.updateContainer.bind(this));
-		}.bind(this));
-
-		document.addEventListener("mouseup", function(e) {
-			this.radius.style.display = 'none';
-			if (active === true)
-				PreviewMouseTracking.unsubscribe(this.updateContainer.bind(this));
-		}.bind(this));
-
-		InputSliderManager.subscribe(this.topic + '-w', this.setWidth.bind(this));
-		InputSliderManager.subscribe(this.topic + '-h', this.setHeight.bind(this));
-		InputSliderManager.subscribe(this.topic, this.setRadius.bind(this));
-
-		ButtonManager.subscribe(this.topic, function(value) {
-			this.rounded = value;
-			if (value === true) {
-				unitW.container.style.display = 'none';
-				unitH.container.style.display = 'none';
-				unitR.container.style.display = 'block';
-				sliderW.style.display = 'none';
-				sliderH.style.display = 'none';
-				sliderR.style.display = 'block';
-				this.setUnitR(this.unitR);
-				this.updateRadius();
-			}
-
-			if (value === false) {
-				unitW.container.style.display = 'block';
-				unitH.container.style.display = 'block';
-				unitR.container.style.display = 'none';
-				sliderW.style.display = 'block';
-				sliderH.style.display = 'block';
-				sliderR.style.display = 'none';
-				this.setUnitX(this.unitX);
-				this.setUnitY(this.unitY);
-				this.updateWidth();
-				this.updateHeight();
-			}
-
-			this.updateBorderRadius();
-
-		}.bind(this));
-
-		this.updateBorderRadius();
-	}
-
-	RadiusContainer.prototype.updateWidth = function updateWidth() {
-		this.node.style.width = this.width + units[this.unitX];
-		var value = Math.round(this.width / 2);
-		InputSliderManager.setValue(this.topic + '-w', value, false);
-	}
-
-	RadiusContainer.prototype.updateHeight = function updateHeight() {
-		this.node.style.height = this.height + units[this.unitY];
-		var value = Math.round(this.height / 2);
-		InputSliderManager.setValue(this.topic + '-h', value, false);
-	}
-
-	RadiusContainer.prototype.updateRadius = function updateRadius() {
-		var value = Math.round(this.size / 2);
-		this.node.style.width = this.size + units[this.unitR];
-		this.node.style.height = this.size + units[this.unitR];
-		InputSliderManager.setValue(this.topic, value, false);
-	}
-
-	RadiusContainer.prototype.setWidth = function setWidth(value) {
-		this.radius.style.display = 'block';
-		this.width = 2 * value;
-		this.node.style.width = this.width + units[this.unitX];
-		this.updateBorderRadius();
-	}
-
-	RadiusContainer.prototype.setHeight = function setHeight(value) {
-		this.radius.style.display = 'block';
-		this.height = 2 * value;
-		this.node.style.height = this.height + units[this.unitY];
-		this.updateBorderRadius();
-	}
-
-	RadiusContainer.prototype.setRadius = function setRadius(value) {
-		this.radius.style.display = 'block';
-		this.size = 2 * value;
-		this.node.style.width = this.size + units[this.unitR];
-		this.node.style.height = this.size + units[this.unitR];
-		this.updateBorderRadius();
-	}
-
-	RadiusContainer.prototype.setUnitX = function setUnitX(value) {
-		this.unitX = value;
-		if (this.unitX === 0) this.maxW = 2 * subject.clientWidth;
-		if (this.unitX === 1) this.maxW = 200;
-		InputSliderManager.setUnit(this.topic + '-w', units[this.unitX]);
-		InputSliderManager.setMax(this.topic + '-w', this.maxW / 2);
-	}
-
-	RadiusContainer.prototype.setUnitY = function setUnitY(value) {
-		this.unitY = value;
-		if (this.unitY === 0) this.maxH = 2 * subject.clientHeight;
-		if (this.unitY === 1) this.maxH = 200;
-		InputSliderManager.setUnit(this.topic + '-h', units[this.unitY]);
-		InputSliderManager.setMax(this.topic + '-h', this.maxH / 2);
-	}
-
-	RadiusContainer.prototype.setUnitR = function setUnitR(value) {
-		this.unitR = value;
-
-		if (this.unitR === 0)
-			this.maxR = 2 * Math.min(subject.clientHeight , subject.clientWidth);
-
-		if (this.unitR === 1)
-			this.maxR = 200;
-
-		InputSliderManager.setUnit(this.topic, units[this.unitR]);
-		InputSliderManager.setMax(this.topic, this.maxR / 2);
-	}
-
-	RadiusContainer.prototype.updateUnits = function updateUnits(unit) {
-		if (this.rounded) {
-			this.setUnitR(this.unitR);
-			return;
-		}
-
-		if (unit === 0)
-			this.setUnitX(this.unitX);
-
-		if (unit === 1)
-			this.setUnitY(this.unitY);
-	}
-
-	RadiusContainer.prototype.composeBorderRadius = function composeBorderRadius () {
-
-		if (this.rounded === true) {
-			var unit = units[this.unitR];
-			var value = Math.round(this.size / 2);
-			return value + unit;
-		}
-
-		var unitX = units[this.unitX];
-		var unitY = units[this.unitY];
-		var valueX = Math.round(this.width / 2);
-		var valueY = Math.round(this.height / 2);
-
-		if (valueX === valueY && this.unitX === this.unitY)
-			return valueX + unitX;
-
-		return valueX + unitX + ' ' + valueY + unitY;
-	}
-
-	RadiusContainer.prototype.updateBorderRadius = function updateBorderRadius () {
-		var radius = this.composeBorderRadius();
-		var corner = 0;
-
-		if (this.topic === 'top-left') {
-			subject.style.borderTopLeftRadius = radius;
-			corner = 0;
-		}
-
-		if (this.topic === 'top-right') {
-			subject.style.borderTopRightRadius = radius;
-			corner = 1;
-		}
-
-		if (this.topic === 'bottom-right') {
-			subject.style.borderBottomRightRadius = radius;
-			corner = 2;
-		}
-
-		if (this.topic === 'bottom-left') {
-			subject.style.borderBottomLeftRadius = radius;
-			corner = 3;
-		}
-
-		Tool.updateOutput(corner, radius);
-	}
-
-	RadiusContainer.prototype.updateContainer = function updateContainer(deltaX, deltaY) {
-
-		if (this.rounded === true) {
-			this.size += this.resizeX * deltaX + this.resizeY * deltaY;
-			if (this.size < 0)	this.size = 0;
-			if (this.size > this.maxR)	this.size = this.maxR;
-			this.updateRadius();
-			this.updateBorderRadius();
-			return;
-		}
-
-		if (deltaX) {
-			this.width += this.resizeX * deltaX;
-			if (this.width < 0)	this.width = 0;
-			if (this.width > this.maxW)	this.width = this.maxW;
-			this.updateWidth();
-		}
-
-		if (deltaY) {
-			this.height += this.resizeY * deltaY;
-			if (this.height < 0) this.height = 0;
-			if (this.height > this.maxH)	this.height = this.maxH;
-			this.updateHeight();
-		}
-
-		if (deltaX || deltaY)
-			this.updateBorderRadius();
-	}
-
-
-	/**
-	 * Tool Manager
-	 */
-	var Tool = (function Tool() {
-		var preview;
-		var preview_ui;
-		var radius_containers = [];
-		var border_width = 3;
-		var borders1 = [null, null, null, null];
-		var borders2 = [0, 0, 0, 0];
-
-		var updateUIWidth = function updateUIWidth(value) {
-			var pwidth = subject.parentElement.clientWidth;
-			var left = (pwidth - value) / 2;
-			subject.style.width = value + "px";
-
-			for (var i = 0; i < 4; i++)
-				radius_containers[i].updateUnits(0);
-		}
-
-		var updateUIHeight = function updateUIHeight(value) {
-			var pheight = subject.parentElement.clientHeight;
-			var top = (pheight - value) / 2;
-			subject.style.height = value + "px";
-			subject.style.top = top - border_width + "px";
-
-			for (var i = 0; i < 4; i++)
-				radius_containers[i].updateUnits(1);
-		}
-
-		var updatePreviewUIWidth = function updatePreviewUIWidth() {
-			var p = subject.parentElement.clientWidth;
-			var v = preview_ui.clientWidth;
-			console.log(p, v, (p - v ) / 2);
-			preview_ui.style.left = (p - v) / 2 + "px" ;
-		}
-
-		var updatePreviewUIHeight = function updatePreviewUIHeight() {
-			var p = subject.parentElement.clientHeight;
-			var v = preview_ui.clientHeight;
-			console.log(p, v, (p - v ) / 2);
-			preview_ui.style.top = (p - v) / 2 + "px" ;
-		}
-
-		var updateOutput = function updateOutput(corner, radius) {
-			var values = radius.split(" ");
-
-			borders1[corner] = values[0];
-			borders2[corner] = values[0];
-
-			if (values.length === 2)
-				borders2[corner] = values[1];
-
-			var border_1_value = borders1.join(" ");
-			var border_2_value = borders2.join(" ");
-			var border_radius = 'border-radius: ' + border_1_value;
-
-			if (border_2_value !== border_1_value)
-				border_radius += ' / ' + border_2_value;
-
-			border_radius += ';';
-			output.textContent = border_radius;
-		}
-
-		var init = function init() {
-			preview = getElemById("preview");
-			subject = getElemById("subject");
-			output = getElemById("output");
-			preview_ui = getElemById("radius-ui-sliders");
-
-			var elem = document.querySelectorAll('.radius-container');
-			var size = elem.length;
-			for (var i = 0; i < size; i++)
-				radius_containers[i] = new RadiusContainer(elem[i]);
-
-			InputSliderManager.subscribe("width", updateUIWidth);
-			InputSliderManager.subscribe("height", updateUIHeight);
-
-			InputSliderManager.setValue("width", subject.clientWidth);
-			InputSliderManager.setValue("height", subject.clientHeight);
-		}
-
-		return {
-			init : init,
-			updateOutput : updateOutput
-		}
-
-	})();
-
-	/**
-	 * Init Tool
-	 */
-	var init = function init() {
-		ButtonManager.init();
-		InputSliderManager.init();
-		PreviewMouseTracking.init("preview");
-		Tool.init();
-	}
-
-	return {
-		init : init
-	}
-
-})();
-
-
-
-
-

{{ EmbedLiveSample('border-radius-generator', '100%', '800px', '') }}

-

 

diff --git a/files/pt-br/web/css/universal_selectors/index.html b/files/pt-br/web/css/universal_selectors/index.html new file mode 100644 index 0000000000..15e64a08ca --- /dev/null +++ b/files/pt-br/web/css/universal_selectors/index.html @@ -0,0 +1,105 @@ +--- +title: Seletor universal +slug: Web/CSS/Seletor_universal +tags: + - CSS + - Referências + - Seletores +translation_of: Web/CSS/Universal_selectors +--- +
{{CSSRef}}
+ +

O seletor universal do CSS (*) aplica estilos a elementos de qualquer tipo.

+ +
/* Seleciona todos os elementos */
+* {
+  color: green;
+}
+ +

A partir do CSS3, o asterisco pode ser combinado com {{cssxref("CSS_Namespaces", "namespaces")}}:

+ + + +

Sintaxe

+ +
* { propriedades de estilo }
+ +

O asterisco é opcional para seletores simples. Por exemplo, *.atencao e .atencao são equivalentes.

+ +

Exemplos

+ +

CSS

+ +
* [lang^=pt] {
+  color: green;
+}
+
+*.atencao {
+  color: red;
+}
+
+*#conteudoprincipal {
+  border: 1px solid blue;
+}
+
+.flutuando {
+  float: left
+}
+
+/* automaticamente aplica clear ao próximo irmão após o elemento com a classe .flutuando */
+.flutuando + * {
+  clear: left;
+}
+
+ +

HTML

+ +
<p class="atencao">
+  <span lang="pt-br">Um span verde</span> em um parágrafo vermelho.
+</p>
+<p id="conteudoprincipal" lang="pt-pt">
+  <span class="atencao">Um span vermelho</span> em um parágrafo verde.
+</p>
+ +

Resultado

+ +

{{EmbedLiveSample('Exemplos')}}

+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName('CSS4 Selectors', '#the-universal-selector', 'Seletor universal')}}{{Spec2('CSS4 Selectors')}}Sem mudanças
{{SpecName('CSS3 Selectors', '#universal-selector', 'Seletor universal')}}{{Spec2('CSS3 Selectors')}}Define o comportamente de acordo com os namespaces e adiciona uma sugestão de que é possivel omitir o seletor em pseudo-elementos
{{SpecName('CSS2.1', 'selector.html#universal-selector', 'Seletor universal')}}{{Spec2('CSS2.1')}}Definição inicial
+ +

Compatibilidade dos Browsers

+ + + +

{{Compat("css.selectors.universal")}}

diff --git a/files/pt-br/web/css/used_value/index.html b/files/pt-br/web/css/used_value/index.html new file mode 100644 index 0000000000..18c48dedb5 --- /dev/null +++ b/files/pt-br/web/css/used_value/index.html @@ -0,0 +1,114 @@ +--- +title: Valor usado +slug: Web/CSS/Valor_usado +translation_of: Web/CSS/used_value +--- +
{{cssref}}
+ +

O valor usado de uma propriedade CSS é o valor final dessa propriedade depois de todos os cálculos terem sido executados.

+ +

After the user agent has finished its calculations, every CSS property has a used value. The used values of dimensions (e.g., width, line-height) are in pixels. The used values of shorthand properties (e.g., background) are consistent with those of their component properties (e.g., background-color, display) and with position and float.

+ +

For some properties, JavaScript can retrieve the used value through the window.getComputedStyle method.

+ +

Detalhes

+ +

There are four steps to calculating any CSS property's final value. First, the specified value is the result of cascading (choosing the most specific stylesheet rule that changes the property), inheritance (using the same computed value as a parent if the property is inheritable), or using the default. Then, the computed value is calculated according to the specification (for example, a span with position: absolute will have its computed display changed to block). Then, layout is calculated (dimensions that are auto or percentages relative to a parent are replaced with pixel values), and the result is the used value.

+ +

Finally, transformed according to the limitations of the local environment, the result is actual value. The actual value is the used value after any approximations have been applied. For example, a user agent may only be able to render borders with integer pixel widths, and therefore have to approximate the computed width, or the user agent may be forced to use only black and white shades, instead of full color. These steps are calculated internally.

+ +

JavaScript can read only the final used values with window.getComputedStyle. This method may instead return computed values, depending on the property. The values it returns are generically called {{cssxref("resolved_value", "resolved values")}}).

+ +

Exemplo

+ +

Compute and show the used width of three elements (updates on resize):

+ +

HTML

+ +
<div id="no-width">
+  <p>No explicit width.</p>
+  <p class="show-used-width">..</p>
+
+  <div id="width-50">
+    <p>Explicit width: 50%.</p>
+    <p class="show-used-width">..</p>
+
+    <div id="width-inherit">
+      <p>Explicit width: inherit.</p>
+      <p class="show-used-width">..</p>
+    </div>
+  </div>
+</div>
+
+ +

CSS

+ +
#no-width {
+  width: auto;
+}
+
+#width-50 {
+  width: 50%;
+}
+
+#width-inherit {
+  width: inherit;
+}
+
+/* Make results easier to see: */
+div {
+  border: 1px solid red;
+  padding: 8px;
+}
+ +

JavaScript

+ +
function updateUsedWidth(id) {
+  var div = document.getElementById(id);
+  var par = document.querySelector(`#${id} .show-used-width`);
+  var wid = window.getComputedStyle(div)["width"];
+  par.textContent = `Used width: ${wid}.`;
+}
+
+function updateAllUsedWidths() {
+  updateUsedWidth("no-width");
+  updateUsedWidth("width-50");
+  updateUsedWidth("width-inherit");
+}
+
+updateAllUsedWidths();
+window.addEventListener('resize', updateAllUsedWidths);
+
+
+ +

Resultado

+ +

{{ EmbedLiveSample('Example', '80%', '372px') }}

+ +

 

+ +

Diferentes valores computados

+ +

CSS 2.0 defined only computed value as the last step in a property's calculation. Then, CSS 2.1 introduced the distinct definition of used value. An element could then explicitly inherit a width/height of a parent, whose computed value is a percentage. For CSS properties that don't depend on layout (e.g., display, font-size, line-height), the computed values and used values are the same. These are the CSS 2.1 properties that do depend on layout, so they have a different computed value and used value: (taken from CSS 2.1 Changes: Specified, computed, and actual values):

+ + + +

Especificações

+ +

CSS Level 2: Used Values

+ +

Veja também

+ + diff --git a/files/pt-br/web/css/valor_atual/index.html b/files/pt-br/web/css/valor_atual/index.html deleted file mode 100644 index b7f9307a58..0000000000 --- a/files/pt-br/web/css/valor_atual/index.html +++ /dev/null @@ -1,34 +0,0 @@ ---- -title: Valor atual -slug: Web/CSS/Valor_atual -translation_of: Web/CSS/actual_value ---- -
{{CSSRef}}
- -

The actual value of a CSS property is the used value of that property after any necessary approximations have been applied. For example, a user agent that can only render borders with a whole-number pixel width may round the thickness of the border to the nearest integer.

- -

Especificações

- - - - - - - - - - - - - - - - -
EspecificaçõesStatusComentario
{{SpecName('CSS2.1', 'cascade.html#actual-value', 'actual value')}}{{Spec2('CSS2.1')}}Definição inicial
- -

Veja também

- - diff --git a/files/pt-br/web/css/valor_computado/index.html b/files/pt-br/web/css/valor_computado/index.html deleted file mode 100644 index a4932b8d40..0000000000 --- a/files/pt-br/web/css/valor_computado/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: Valor Computado -slug: Web/CSS/valor_computado -tags: - - CSS - - Guía - - Iniciante - - Web -translation_of: Web/CSS/computed_value ---- -
{{cssref}}
- -

The computed value of a CSS property is computed from the specified value by:

- - - -

The computation needed to reach the computed value for the property typically involves converting relative values (such as those in em units or percentages) to absolute values.

- -

For example, if an element has specified values font-size: 16px and padding-top: 2em, then the computed value of padding-top is 32px (double the font size).

- -

However, for some properties (those where percentages are relative to something that may require layout to determine, such as width, margin-right, text-indent, and top), percentage specified values turn into percentage computed values. Additionally, unitless numbers specified on the line-height property become the computed value, as specified. These relative values that remain in the computed value become absolute when the used value is determined.

- -

The main use of the computed value (other than as a step between the specified value and used value) is inheritance, including the {{cssxref("inherit")}} keyword.

- -

Notas

- -

The {{domxref("Window.getComputedStyle", "getComputedStyle()")}} DOM API returns the {{cssxref("resolved_value", "resolved value")}}, which may either be the {{cssxref("computed_value", "computed value")}} or the {{cssxref("used_value", "used value")}}, depending on the property.

- -

Especificações

- - - - - - - - - - - - - - - - -
EspecificaçõesStatusComentário
{{SpecName("CSS2.1", "cascade.html#computed-value", "computed value")}}{{Spec2("CSS2.1")}}Especificação inicial
- -

Veja também

- - diff --git a/files/pt-br/web/css/valor_espeficifco/index.html b/files/pt-br/web/css/valor_espeficifco/index.html deleted file mode 100644 index 939aa09234..0000000000 --- a/files/pt-br/web/css/valor_espeficifco/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: Valor Especifícado -slug: Web/CSS/valor_espeficifco -tags: - - CSS - - Iniciante - - Web -translation_of: Web/CSS/specified_value ---- -

{{CSSRef}}

- -

O valor especificado de uma propriedade CSS está definido em uma de três maneiras.

- -
    -
  1. If the document's stylesheet has specified a value for the property then it will be used. For example; if the {{cssxref("color")}} property is set to green then the text color of the corresponding element will be green.
    2. -
  2. If the document's stylesheet has not specified a value then it will be inherited form the parent element (if possible). For example; if we have a paragraph ({{HTMLElement("p")}}) inside a {{HTMLElement("div")}} and the {{HTMLElement("div")}} has a CSS font property value of "Arial" and the {{HTMLElement("p")}} doesn't have a font property defined then it will inherit the Arial font.
    3. -
  3. If none of the above are available, the initial value for the element as specified by the CSS specification is applied.
    4. -
- -

Especificações

- - - - - - - - - - - - - - - - -
EspecificaçõesStatusComentario
{{SpecName("CSS2.1", "cascade.html#specified-value", "cascaded value")}}{{Spec2("CSS2.1")}}Definição inicial
- -

Veja também

- - diff --git a/files/pt-br/web/css/valor_inicial/index.html b/files/pt-br/web/css/valor_inicial/index.html deleted file mode 100644 index fea27bfe3c..0000000000 --- a/files/pt-br/web/css/valor_inicial/index.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: Valor inicial -slug: Web/CSS/valor_inicial -tags: - - CSS - - Iniciante - - Web - - valor inicial -translation_of: Web/CSS/initial_value ---- -
{{cssref}}
- -

O Valor inicial de uma propriedade CSS é o seu valor padrão, como listado em sua tabela de definição. O uso do valor inicial varia caso a propriedade seja herdada ou não.

- - - -
-

Nota: Você pode especificar explicitamente um valor inicial, utilizando a palavra-chave {{cssxref("initial")}}

-
- -

Veja Também

- - diff --git a/files/pt-br/web/css/valor_resolvido/index.html b/files/pt-br/web/css/valor_resolvido/index.html deleted file mode 100644 index a045149bc7..0000000000 --- a/files/pt-br/web/css/valor_resolvido/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: Valor Resolvido -slug: Web/CSS/Valor_resolvido -tags: - - CSS - - Guía - - Iniciante - - Web -translation_of: Web/CSS/resolved_value ---- -
{{cssref}}
- -

The resolved value of a CSS property is the value returned by {{domxref("Window.getComputedStyle", "getComputedStyle()")}}. For most properties, it is the {{cssxref("computed_value", "computed value") }}, but for a few legacy properties (including {{cssxref("width")}} and {{cssxref("height")}}), it is instead the {{cssxref("used_value", "used value")}}. See the specification link below for more per-property details.

- -

Especificações

- - - - - - - - - - - - - - - - -
EspecificaçõesStatusComentário
{{SpecName("CSSOM", "#resolved-values", "resolved value")}}{{Spec2("CSSOM")}}Definicação inicial
- -

Veja também

- - diff --git a/files/pt-br/web/css/valor_usado/index.html b/files/pt-br/web/css/valor_usado/index.html deleted file mode 100644 index 18c48dedb5..0000000000 --- a/files/pt-br/web/css/valor_usado/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: Valor usado -slug: Web/CSS/Valor_usado -translation_of: Web/CSS/used_value ---- -
{{cssref}}
- -

O valor usado de uma propriedade CSS é o valor final dessa propriedade depois de todos os cálculos terem sido executados.

- -

After the user agent has finished its calculations, every CSS property has a used value. The used values of dimensions (e.g., width, line-height) are in pixels. The used values of shorthand properties (e.g., background) are consistent with those of their component properties (e.g., background-color, display) and with position and float.

- -

For some properties, JavaScript can retrieve the used value through the window.getComputedStyle method.

- -

Detalhes

- -

There are four steps to calculating any CSS property's final value. First, the specified value is the result of cascading (choosing the most specific stylesheet rule that changes the property), inheritance (using the same computed value as a parent if the property is inheritable), or using the default. Then, the computed value is calculated according to the specification (for example, a span with position: absolute will have its computed display changed to block). Then, layout is calculated (dimensions that are auto or percentages relative to a parent are replaced with pixel values), and the result is the used value.

- -

Finally, transformed according to the limitations of the local environment, the result is actual value. The actual value is the used value after any approximations have been applied. For example, a user agent may only be able to render borders with integer pixel widths, and therefore have to approximate the computed width, or the user agent may be forced to use only black and white shades, instead of full color. These steps are calculated internally.

- -

JavaScript can read only the final used values with window.getComputedStyle. This method may instead return computed values, depending on the property. The values it returns are generically called {{cssxref("resolved_value", "resolved values")}}).

- -

Exemplo

- -

Compute and show the used width of three elements (updates on resize):

- -

HTML

- -
<div id="no-width">
-  <p>No explicit width.</p>
-  <p class="show-used-width">..</p>
-
-  <div id="width-50">
-    <p>Explicit width: 50%.</p>
-    <p class="show-used-width">..</p>
-
-    <div id="width-inherit">
-      <p>Explicit width: inherit.</p>
-      <p class="show-used-width">..</p>
-    </div>
-  </div>
-</div>
-
- -

CSS

- -
#no-width {
-  width: auto;
-}
-
-#width-50 {
-  width: 50%;
-}
-
-#width-inherit {
-  width: inherit;
-}
-
-/* Make results easier to see: */
-div {
-  border: 1px solid red;
-  padding: 8px;
-}
- -

JavaScript

- -
function updateUsedWidth(id) {
-  var div = document.getElementById(id);
-  var par = document.querySelector(`#${id} .show-used-width`);
-  var wid = window.getComputedStyle(div)["width"];
-  par.textContent = `Used width: ${wid}.`;
-}
-
-function updateAllUsedWidths() {
-  updateUsedWidth("no-width");
-  updateUsedWidth("width-50");
-  updateUsedWidth("width-inherit");
-}
-
-updateAllUsedWidths();
-window.addEventListener('resize', updateAllUsedWidths);
-
-
- -

Resultado

- -

{{ EmbedLiveSample('Example', '80%', '372px') }}

- -

 

- -

Diferentes valores computados

- -

CSS 2.0 defined only computed value as the last step in a property's calculation. Then, CSS 2.1 introduced the distinct definition of used value. An element could then explicitly inherit a width/height of a parent, whose computed value is a percentage. For CSS properties that don't depend on layout (e.g., display, font-size, line-height), the computed values and used values are the same. These are the CSS 2.1 properties that do depend on layout, so they have a different computed value and used value: (taken from CSS 2.1 Changes: Specified, computed, and actual values):

- - - -

Especificações

- -

CSS Level 2: Used Values

- -

Veja também

- - diff --git a/files/pt-br/web/css/value_definition_syntax/index.html b/files/pt-br/web/css/value_definition_syntax/index.html new file mode 100644 index 0000000000..d14bcaecdf --- /dev/null +++ b/files/pt-br/web/css/value_definition_syntax/index.html @@ -0,0 +1,436 @@ +--- +title: Sintexe do valor +slug: Web/CSS/Sintexe_valor +tags: + - CSS + - Guía + - Iniciante + - Web +translation_of: Web/CSS/Value_definition_syntax +--- +
{{CSSRef}}
+ +

CSS value definition syntax, a formal grammar, is used for defining the set of valid values for a CSS property or function. In addition to this syntax, the set of valid values can be further restricted by semantic constraints (for example, for a number to be strictly positive).

+ +

The definition syntax describes which values are allowed and the interactions between them. A component can be a keyword, some characters considered as a literal, or a value of a given CSS data type or of another CSS property.

+ +

Tipos de componente

+ +

Keywords

+ +

Generic keywords

+ +

A keyword with a predefined meaning appears literally, without quotation marks. For example: auto, smaller or ease-in.

+ +

The specific case of inherit, initial and unset

+ +

All CSS properties accept the keywords inherit, initial and unset, that are defined throughout CSS. They are not shown in the value definition, and are implicitly defined.

+ +

Literals

+ +

In CSS, a few characters can appear on their own, like the slash ('/') or the comma (','), and are used in a property definition to separate its parts. The comma is often used to separate values in enumerations, or parameters in mathematical-like functions; the slash often separates parts of the value that are semantically different, but have a common syntax. Typically, the slash is used in shorthand properties; to separate component that are of the same type, but belong to different properties.

+ +

Both symbols appear literally in a value definition.

+ +

Data types

+ +

Basic data types

+ +

Some kind of data are used throughout CSS, and are defined once for all values in the specification. Called basic data types, they are represented with their name surrounded by the symbol '<' and '>': {{ cssxref("<angle>") }}, {{cssxref("<string>")}}, …

+ +

Non-terminal data types

+ +

Less common data types, called non-terminal data types, are also surrounded  by '<' and '>'.

+ +

Non-terminal data types are of two kinds:

+ + + +

Component value combinators

+ +

Brackets

+ +

Brackets enclose several entities, combinators, and multipliers, then transform them as a single component. They are used to group components to bypass the precedence rules.

+ +
bold [ thin && <length> ]
+ +

This example matches the following values:

+ + + +

But not:

+ + + +

Juxtaposition

+ +

Placing several keywords, literals or data types, next to one another, only separated by one or several spaces, is called juxtaposition. All juxtaposed components are mandatory and should appear in the exact order.

+ +
bold <length> , thin
+
+ +

This example matches the following values:

+ + + +

But not:

+ + + +

Double ampersand

+ +

Separating two or more components, by a double ampersand, &&, means that all these entities are mandatory but may appear in any order.

+ +
bold && <length>
+
+ +

This example matches the following values:

+ + + +

But not:

+ + + +
Note: juxtaposition has precedence over the double ampersand, meaning that bold thin && <length> is equivalent to [ bold thin ] && <length>. It describes bold thin <length> or <length> bold thin but not bold <length> thin.
+ +

Double bar

+ +

Separating two or more components by a double bar, ||, means that all entities are options: at least one of them must be present, and they may appear in any order. Typically this is used to define the different values of a shorthand property.

+ +
<'border-width'> || <'border-style'> || <'border-color'>
+
+ +

This example matches the following values:

+ + + +

But not:

+ + + +
Note: the double ampersand has precedence over the double bar, meaning that bold || thin && <length> is equivalent to bold || [ thin && <length> ]. It describes bold, thin <length>, bold thin <length>, or thin <length> bold but not <length> bold thin as bold, if not omitted, must be placed before or after the whole thin && <length> component.
+ +

Single bar

+ +

Separating two or more entities by a single bar, |, means that all entities are exclusive options: exactly one of these options must be present. This is typically used to separate a list of possible keywords.

+ +
<percentage> | <length> | left | center | right | top | bottom
+ +

This example matches the following values:

+ + + +

But not:

+ + + +
+

Note: the double bar has precedence over the single bar, meaning that bold | thin || <length> is equivalent to bold | [ thin || <length> ]. It describes bold, thin, <length>, <length> thin, or thin <length> but not bold <length> as only one entity from each side of the | combinator can be present.

+
+ +

Component value multipliers

+ +

A multiplier is a sign that indicate how many times a preceding entity can be repeated. Without a multiplier, an entity must appear exactly one time.

+ +

Note that multipliers cannot be added and have all precedence over combinators.

+ +

Asterisk (*)

+ +

The asterisk multiplier indicates that the entity may appear zero, one or several times.

+ +
bold smaller*
+ +

This example matches the following values:

+ + + +

But not:

+ + + +

Plus (+)

+ +

The plus multiplier indicates that the entity may appear one or several times.

+ +
bold smaller+
+ +

This example matches the following values:

+ + + +

But not:

+ + + +

Question mark (?)

+ +

The question mark multiplier indicates that the entity is optional, and must appear zero or one time.

+ +
bold smaller?
+ +

This example matches the following values:

+ + + +

But not:

+ + + +

Curly braces ({ })

+ +

The curly braces multiplier, enclosing two integers separated by a comma, A and B, indicates that the entity must appear at least A times and at most B times.

+ +
bold smaller{1,3}
+ +

This example matches the following values:

+ + + +

But not:

+ + + +

Hash mark (#)

+ +

The hash mark multiplier indicates that the entity may be repeated one or more times (for example, the plus multiplier), but each occurrence is separated by a comma (',').

+ +
bold smaller#
+ +

This example matches the following values:

+ + + +

But not:

+ + + +

Exclamation point (!)

+ +

The exclamation point multiplier after a group indicates that the group is required, and must produce at least one value; even if the grammar of the items within the group would otherwise allow the entire contents to be omitted, at least one component value must not be omitted.

+ +
[ bold? smaller? ]!
+
+ +

This example matches the following values:

+ + + +

But not:

+ + + +

Summary

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SignNameDescriptionExample
Combinators
 JuxtapositionComponents are mandatory and should appear in that ordersolid <length>
&&Double ampersandComponents are mandatory but may appear in any order<length> && <string>
||Double barAt least one of the components must be present, and they may appear in any order.<'border-image-outset'> || <'border-image-slice'>
|Single barExactly one of the components must be presentsmaller | small | normal | big | bigger
[ ]BracketsGroup components to bypass precedence rulesbold [ thin && <length> ]
Multipliers
 No multiplierExactly 1 timessolid
*Asterisk0 or more timesbold smaller*
+Plus sign1 or more timesbold smaller+
?Question mark0 or 1 time (that is optional)bold smaller?
{A,B}Curly bracesAt least A times, at most B timesbold smaller{1,3}
#Hash mark1 or more times, but each occurrence separated by a comma (',')bold smaller#
!Exclamation pointGroup must produce at least 1 value[ bold? smaller? ]!
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 Values", "#value-defs", "Value definition syntax")}}{{Spec2("CSS3 Values")}}Adds the hash mark multiplier.
{{SpecName("CSS2.1", "about.html#value-defs", "Value definition syntax")}}{{Spec2("CSS2.1")}}Adds the double ampersand combinator.
{{SpecName("CSS1", "#notation-for-property-values", "Value definition syntax")}}{{Spec2("CSS1")}}Initial definition
+ +

See also

+ + diff --git a/files/pt-br/web/css/visual_formatting_model/index.html b/files/pt-br/web/css/visual_formatting_model/index.html new file mode 100644 index 0000000000..a37a0cc7b0 --- /dev/null +++ b/files/pt-br/web/css/visual_formatting_model/index.html @@ -0,0 +1,227 @@ +--- +title: Modelo de formatação visual +slug: Web/CSS/Modelo_Visual +tags: + - CSS + - CSS conceitos basicos + - Intermediário +translation_of: Web/CSS/Visual_formatting_model +--- +

{{CSSRef}}

+ +

The CSS visual formatting model is an algorithm that processes a document and displays it on visual media. This model is a basic concept of CSS.

+ +

The visual formatting model transforms each element of the document and generates zero, one, or several boxes that conform to the CSS box model. The layout of each box is defined by:

+ + + +

The model renders a box, in relation to the edge of its containing block. Usually, a box establishes the containing block for its descendants. However, a box is not constrained by its containing block; when a box's layout goes outside the containing block, it is said to overflow.

+ +

 Gerando um Box

+ +

Box generation is the part of the CSS visual formatting model that creates boxes from the document's elements. Generated boxes are of different types, which affect how the visual formatting is done. The type of the box generated depends on the value of the {{ cssxref("display") }} CSS property.

+ +

Block-level elements and block boxes

+ +

An element is said to be block-level when the calculated value of its {{ cssxref("display") }} CSS property is: block, list-item, or table. A block-level element is visually formatted as a block (e.g., paragraph), intended to be vertically stacked.

+ +

Each block-level box participates in a block formatting context. Each block-level element generates at least one block-level box, called the principal block-level box. Some elements, like a list-item element, generating further boxes to handle bullets and other typographic elements introducing the list item, may generate more boxes. Most generate only the principal, block-level box.

+ +

The principal block-level box contains descendant-generated boxes and generated content. It is also the box involved in the positioning scheme.

+ +

venn_blocks.pngA block-level box may also be a block container box. A block container box is a box that contains only other block-level boxes, or creates an inline formatting context, thus containing only inline boxes.

+ +

It is important to note that the notions of a block-level box and block container box are disjoined. The first, describes how the box behaves with its parents and sibling. The second, how it interacts with its descendants. Some block-level boxes, like tables, aren't block container boxes. Reciprocally, some block container boxes, like non-replaced inline blocks and non-replaced table cells, aren't block-level boxes.

+ +

Block-level boxes that also are block container boxes are called block boxes.

+ +

Anonymous block boxes

+ +

In some cases, the visual formatting algorithm needs to add supplementary boxes. Because CSS selectors cannot style or name these boxes, they are called anonymous boxes.

+ +

Because selectors do not work with anonymous boxes, they cannot be styled via a stylesheet. This means that all inheritable CSS properties have the inherit value, and all non-inheritable CSS properties, have the initial value.

+ +

Block containing boxes contain only inline-level boxes, or only block-level boxes. But often the document contains a mix of both. In that case, anonymous block boxes are created around adjacent inline-level boxes.

+ +

Exemplo

+ +

If we take the following HTML code (with default styling applied to it, that is {{ HTMLElement("div") }} and {{ HTMLElement("p") }} elements have display:block :

+ +
<div>Some inline text <p>followed by a paragraph</p> followed by more inline text.</div>
+ +

Two anonymous block boxes are created: one for the text before the paragraph (Some inline text), and another for the text after it (followed by more inline text). This builds the following block structure:

+ +

anonymous_block-level_boxes.png

+ +

Leading to:

+ +
Some inline text
+followed by a paragraph
+followed by more inline text.
+
+ +

Unlike the {{ HTMLElement("p") }} element's box, Web developers cannot control the style of the two anonymous boxes. Inheritable properties take the value from the {{ HTMLElement("div") }}'s property value, like {{ cssxref("color") }} to define the color of the text, and set the others to the initial value. For example, they won't have a specific {{ cssxref("background-color") }}, it is always transparent, the initial value for that property, and thus the background of the <div> is visible. A specific background color can be applied to the <p> box. Similarly, the two anonymous boxes always use the same color for their text.

+ +

Another case that leads to the creation of anonymous block boxes, is an inline box that contains one or several block boxes. In that case, the box containing the block box is split into two inline boxes: one before, and one after the block box. All the inline boxes before the block box are then enclosed into an anonymous block box, so are the inline boxes following the block box. Therefore, the block box becomes the sibling of the two anonymous block boxes containing the inline elements.

+ +

If there are several block boxes, without inline content in-between, the anonymous block boxes are created before, and after the set of boxes.

+ +

Exemplo

+ +

If we take the following HTML code, with {{ HTMLElement("p") }} have display:inline and {{ HTMLElement("span") }} have display:block :

+ +
<p>Some <em>inline</em> text <span>followed by a paragraph</span> followed by more inline text.</p>
+ +

Two anonymous block boxes are created, one for the text before the span Element (Some inline text) and one for the text after it (followed by more inline text), which gives the following block structure:

+ +

+ +

Which leads to:

+ +
Some inline text
+followed by a paragraph
+followed by more inline text.
+
+ +

Inline-level elements and inline boxes

+ +

An element is said to be inline-level when the calculated value of its {{ cssxref("display") }} CSS property is: inline, inline-block or inline-table. Visually, it doesn't constitute blocks of contents, but is distributed in lines with other inline-level content. Typically, the content of a paragraph with different formatting, like emphasis or images, is made from inline-level elements.

+ +

venn_inlines.png

+ +
+

This diagram uses outdated terminology; see note below. Besides that, it is incorrect because the yellow ellipsis on the right side is per definition either identical to the one on the left side, or bigger than that (it could be a mathematical superset), because the spec says "Inline-level elements generate inline-level boxes, which are boxes that participate in an inline formatting context", see CSS 2.2, chapter 9.2.2

+
+ +

Inline-level elements generate inline-level boxes that are defined as boxes participating to an inline formatting context. Inline boxes are both inline-level boxes and boxes, whose contents participate in their container's inline formatting context. This is the case, for example, for all non-replaced boxes with display:inline. Inline-level boxes, whose contents do not participate in an inline formatting context, are called atomic inline-level boxes. These boxes, generated by replaced inline-level elements or by elements with a calculated {{ cssxref("display") }} value of inline-block or inline-table, are never split into several boxes, as is possible with inline boxes.

+ +
Note: Initially, atomic inline-level boxes were called atomic inline boxes. This was unfortunate, as they are not inline boxes. This was corrected in an erratum to the spec. Nevertheless, you can harmlessly read atomic inline-level box each time you meet atomic inline box in the literature, as this is only a name change.
+ +
Atomic inline boxes cannot be split into several lines in an inline formatting context. +
+
<style>
+  span {
+    display:inline; /* default value*/
+  }
+</style>
+<div style="width:20em;">
+   The text in the span <span>can be split in several
+   lines as it</span> is an inline box.
+</div>
+
+ +

which leads to:

+ +
The text in the span can be split into several lines as it is an inline box.
+ +
<style>
+  span {
+    display:inline-block;
+  }
+</style>
+<div style="width:20em;">
+   The text in the span <span>cannot be split in several
+   lines as it</span> is an inline-block box.
+</div>
+
+ +

which leads to:

+ +
The text in the span cannot be split into several lines as it is an inline-block box.
+
+
+ +

Anonymous inline boxes

+ +

As for block boxes, there are a few cases where inline boxes are created automatically by the CSS engine. These inline boxes are also anonymous as they cannot be named by selectors; they inherit the value of all inheritable properties, setting it to initial for all others.

+ +

The most common case where an anonymous inline box is created, is when some text is found as a direct child of a block box creating an inline formatting context. In that case, this text is included in the largest possible anonymous inline box. Also, space content, which would be removed by the behavior set in the {{ cssxref("white-space") }} CSS property, does not generate anonymous inline boxes because they would end empty.

+ +
Example TBD
+ +

Outros tipos de boxes

+ +

Line boxes

+ +

Line boxes are generated by the inline formatting context to represent a line of text. Inside a block box, a line box extends from one border of the box to the other. When there are floats, the line box starts at the rightmost border of the left floats and ends at the leftmost border of the right floats.

+ +

These boxes are technical, and Web authors do not usually have to bother with them.

+ +

Run-in boxes

+ +

Run-in boxes, defined using display:run-in, are boxes that are either block boxes or inline boxes, depending on the type of the following box. They can be used to create a title that runs inside its first paragraph when possible.

+ +
Note: Run-in boxes were removed from the CSS 2.1 standard, as they were insufficiently specified to allow for interoperable implementation. They may reappear in CSS3, but meanwhile, are considered experimental. They should not be used in production.
+ +

Model-induced boxes

+ +

Besides the inline and block formatting contexts, CSS specifies several additional content models that may be applied to elements. These additional models, used to describe specific layouts, may define additional box types:

+ + + +

Positioning schemes

+ +

Once boxes are generated, the CSS engine needs to position them on the layout. To do that, it uses one of the following algorithms:

+ + + +

Normal flow

+ +

In the normal flow, boxes are laid out one after the other. In a block formatting context, they are laid out vertically; in an inline formatting context, they are laid out horizontally. The normal flow is triggered when the CSS {{ cssxref("position") }} is set to the value static or relative, and if the CSS {{ cssxref("float") }} is set to the value none.

+ +

Exemplo

+ +
When in the normal flow, in a block formatting context, boxes are laid vertically one after the other out:
+
+[image]
+
+When in the normal flow, in an inline formatting context, boxes are laid horizontally one after the other out:
+
+[image]
+ +

There are two sub-cases of the normal flow: static positioning and relative positioning:

+ + + +

Floats

+ +

In the float positioning scheme, specific boxes (called floating boxes or simply floats) are positioned at the beginning, or end of the current line. This leads to the property that text (and more generally anything within the normal flow) flows along the edge of the floating boxes, except if told differently by the {{ cssxref("clear") }} CSS property.

+ +

The float positioning scheme for a box is selected, by setting the {{ cssxref("float") }} CSS property on that box to a value different than none and {{ cssxref("position") }} to static or relative. If {{ cssxref("float") }} is set to left, the float is positioned at the beginning of the line box. If set to right, the float is positioned at the end of the line box. In either case, the line box is shrunk to fit alongside the float.

+ +

[image]

+ +

Absolute positioning

+ +

In the absolute positioning scheme, boxes are entirely removed from the flow and don't interact with it at all. They are positioned relative to their containing block using the {{ cssxref("top") }}, {{ cssxref("bottom") }}, {{ cssxref("left") }} and {{ cssxref("right") }} CSS properties.

+ +

An element is absolutely positioned if the {{ cssxref("position") }} is set to absolute or fixed.

+ +

With a fixed positioned element, the containing block is the viewport. The position of the element is absolute within the viewport. Scrolling does not change the position of the element.

+ +

Veja Também

+ + diff --git a/files/pt-br/web/css/word-wrap/index.html b/files/pt-br/web/css/word-wrap/index.html deleted file mode 100644 index c23f4b966d..0000000000 --- a/files/pt-br/web/css/word-wrap/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: word-wrap -slug: Web/CSS/word-wrap -translation_of: Web/CSS/overflow-wrap ---- -
{{CSSRef}} {{SeeCompatTable}}
- -

Resumo

- -

A propriedade CSS word-wrap é utilizada para especificar se o navegador pode ou não quebrar linhas dentro das palavras, afim de prevenir o vazamento quando do contrário uma sequencia de caracteres é muito longa para caber na caixa que o contém.

- -
Nota: Originalmente uma extensão proprietária da Microsoft (não prefixada), a propriedade word-wrap foi renomeada para overflow-wrap no rascunho atual do texto de especificações do CSS3. Compilações estáveis do Google Chrome e do Opera têm suporte a nova sintaxe.
- -

{{cssinfo}}

- -

Sintaxe

- -
word-wrap:  normal | break-word
- -

Valores

- -
-
normal
-
Indica que as linhas só podem quebrar em pontos de quebra normais de palavras.
-
break-word
-
Indica que as palavras normalmente inquebráveis podem ser quebrados em pontos arbitrários se não houver pontos de quebra de outra forma aceitáveis na linha.
-
- -

Exemplos

- -
p { width: 13em; background: gold; }
- -

FStrPrivFinÄndG (Gesetz zur Änderung des Fernstraßenbauprivatfinanzierungsgesetzes und straßenverkehrsrechtlicher Vorschriften)

- -
p { width: 13em; background: gold; word-wrap: break-word; }
- -

FStrPrivFinÄndG (Gesetz zur Änderung des Fernstraßenbauprivatfinanzierungsgesetzes und straßenverkehrsrechtlicher Vorschriften)

- -

Especificações

- - - - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
CSS Text Level 3{{ Spec2('CSS3 Text') }} 
- -

Compatibilidade entre navegadores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Suporte básico{{ CompatGeckoDesktop("1.9.1") }}1.05.510.51.0
-
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Suporte básico{{ CompatGeckoMobile("1.9.1") }}1.0{{ CompatUnknown() }}{{ CompatUnknown() }}1.0
-
- - - -

Veja também

- - diff --git a/files/pt-br/web/events/abort/index.html b/files/pt-br/web/events/abort/index.html deleted file mode 100644 index 62243a2762..0000000000 --- a/files/pt-br/web/events/abort/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: abort -slug: Web/Events/abort -translation_of: Web/API/HTMLMediaElement/abort_event -translation_of_original: Web/Events/abort ---- -

O evento abort é disparado quando o carregamento de um recurso foi interrompido.

- -

Informações Gerais

- -
-
Especificação
-
DOM L3
-
Interface
-
{{domxref("UIEvent")}} se gerado a partir da interface do usuário, caso contrário será {{domxref("Event")}}.
-
Bubbles
-
Não
-
Cancelável
-
Não
-
Alvo
-
{{domxref("Element")}}
-
Ação Padrão
-
Nenhuma
-
- -

Propriedades

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropriedadeTipoDescrição
target {{readOnlyInline}}{{domxref("EventTarget")}}O evento alvo (O mais elevado da árvore DOM).
type {{readOnlyInline}}{{domxref("DOMString")}}O tipo de evento.
bubbles {{readOnlyInline}}{{domxref("Boolean")}}O evento é normalmente bubble?
cancelable {{readOnlyInline}}{{domxref("Boolean")}}É possível cancelar o evento?
view {{readOnlyInline}}{{domxref("WindowProxy")}}{{domxref("document.defaultView")}} (window do documento)
detail {{readOnlyInline}}long (float)0.
-
diff --git a/files/pt-br/web/events/beforeunload/index.html b/files/pt-br/web/events/beforeunload/index.html deleted file mode 100644 index 6d6034318c..0000000000 --- a/files/pt-br/web/events/beforeunload/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: beforeunload -slug: Web/Events/beforeunload -translation_of: Web/API/Window/beforeunload_event ---- -

O evento beforeunload é disparado quando o window, o document e seus recursos estão prestes a ser descarregados.

- -

Quando uma string é atribuída na propriedade returnValue do Event, uma caixa de díalogo aparecerá solicitando ao usuário uma confirmação para sair da página (veja exemplo abaixo). Quando nenhum valor é fornecido, o evento é processado silenciosamente.

- - - - - - - - - - - - - - - - - - - - -
BubblesNão
CancelableSim
Target objectsdefaultView
Interface{{domxref("Event")}}
- -

Propriedades

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropriedadeTipoDescrição
target {{readOnlyInline}}{{domxref("EventTarget")}}O evento alvo (the topmost target in the DOM tree).
type {{readOnlyInline}}{{domxref("DOMString")}}O tipo de evento.
bubbles {{readOnlyInline}}{{jsxref("Boolean")}}O evento é normalmente bubble?
cancelable {{readOnlyInline}}{{jsxref("Boolean")}}É possível cancelar o evento?
returnValue{{domxref("DOMString")}}O valor de retorno do evento (a mensagem que será exibida ao usuário).
- -

Exemplos

- -
window.addEventListener("beforeunload", function (event) {
-  event.returnValue = "\o/";
-});
-
-// equivalente a
-window.addEventListener("beforeunload", function (event) {
-  event.preventDefault();
-});
- -

Navegadores baseados no WebKit não seguem a especificação para caixas de diálogo. Um exemplo que funcionaria na maioria dos navegadores seria aproximadamente o seguinte:

- -
window.addEventListener("beforeunload", function (e) {
-  var confirmationMessage = "\o/";
-
-  e.returnValue = confirmationMessage;     // Gecko, Trident, Chrome 34+
-  return confirmationMessage;              // Gecko, WebKit, Chrome <34
-});
- -

Notas

- -

Quando este evento retorna um valor não vazio (non-void), é solicitada ao usuário uma confirmação para descarregar a página. Na maioria dos navegadores o valor retornado no evento é exibido como mensagem nessa confirmação. No Firefox 4 e versões anteriores a string retornada não é exibida para o usuário. Ao invés disso, o Firefox exibe a mensagem "Esta página está perguntanto se você deseja sair - é possível que as alterações feitas não sejam salvas." Veja {{bug("588292")}}.

- -

Desde 25 de maio de 2011 a especificação HTML5 define que chamadas aos métodos {{domxref("window.alert()")}}, {{domxref("window.confirm()")}} e {{domxref("window.prompt()")}} serão ignoradas durante este evento. Para mais detalhes veja a especificação HTML5 (em inglês).

- -

Note também que vários navegadores para celular ignoram o resultado deste evento (isso que dizer que eles não solicitam a confirmação do usuário). O Firefox possui uma configuração escondida em about:config que faz o mesmo. Em essência, isto significa que o usuário estará sempre confirmando que o documento pode ser descarregado.

- -

Veja também

- - diff --git a/files/pt-br/web/events/blur/index.html b/files/pt-br/web/events/blur/index.html deleted file mode 100644 index 7eb9263be2..0000000000 --- a/files/pt-br/web/events/blur/index.html +++ /dev/null @@ -1,154 +0,0 @@ ---- -title: blur (evento) -slug: Web/Events/blur -translation_of: Web/API/Element/blur_event ---- -

O evento blur é acionado quando um elemento perde foco. A diferença principal entre este evento e focusout é que apenas o segundo 'borbulha'.

- -

Informação geral

- -
-
Especificação
-
DOM L3
-
Interface
-
{{domxref("FocusEvent")}}
-
Borbulha
-
Não
-
Cancelável
-
Não
-
Alvo
-
Elemento
-
Ação padrão
-
Nenhuma
-
- -

{{NoteStart}}O valor de {{domxref("Document.activeElement")}} varia entre navegadores enquanto este evento é processado ({{bug(452307)}}): O IE10 define-o para o elemento para onde o foco moverá, enquanto Firefox e Chrome muitas vezes definem-o para o body do documento.{{NoteEnd}}

- -

Propriedades

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}Event target (DOM element)
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
relatedTarget {{readonlyInline}}{{domxref("EventTarget")}} (DOM element)null
- -

Delegação do evento

- -

Existem duas maneiras de implementar a delegação de eventos para este evento: usando o evento focusout nos navegadores que suportam-o, ou definindo o parâmetro "useCapture" do addEventListener para true:

- -

Conteúdo HTML 

- -
<form id="form">
-  <input type="text" placeholder="text input">
-  <input type="password" placeholder="password">
-</form>
- -

Conteúdo JavaScript

- -
var form = document.getElementById("form");
-form.addEventListener("focus", function( event ) {
-  event.target.style.background = "pink";
-}, true);
-form.addEventListener("blur", function( event ) {
-  event.target.style.background = "";
-}, true);
- -

{{EmbedLiveSample('Event_delegation')}}

- -

Compatibilidade entre navegadores

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico5{{CompatVersionUnknown}}{{CompatVersionUnknown}}[1]612.15.1
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome para AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico4.053{{CompatVersionUnknown}}{{CompatUnknown}}10.012.15.1
-
- -

[1] Antes do Gecko 24 {{geckoRelease(24)}} a interface para este elemento era {{domxref("Event")}}, não {{domxref("FocusEvent")}}. Veja ({{bug(855741)}}).

- -

Eventos relacionados

- - diff --git a/files/pt-br/web/events/domcontentloaded/index.html b/files/pt-br/web/events/domcontentloaded/index.html deleted file mode 100644 index eb54671921..0000000000 --- a/files/pt-br/web/events/domcontentloaded/index.html +++ /dev/null @@ -1,177 +0,0 @@ ---- -title: DOMContentLoaded -slug: Web/Events/DOMContentLoaded -translation_of: Web/API/Window/DOMContentLoaded_event ---- -

O evento DOMContentLoaded é acionado quando todo o HTML foi completamente carregado e analisado, sem aguardar pelo CSS, imagens, e subframes para encerrar o carregamento. Um evento muito diferente - load - deve ser usado apenas para detectar uma página completamente carregada. É um engano comum as pessoas usarem load quando DOMContentLoaded seria muito mais apropriado.

- -
-

Nota: Javascript Síncrono pausa a análise do DOM.

-
- -

Acelerando

- -

Se você quer que o DOM seja analisado o mais rápido possível após uma requisição do usuário, você deve usar recursos do javascript assíncrono e otimizar o carregamento de folhas de estilo pois, caso contrário, a página será carregada mais lentamente pois muitos itens serão carregados paralelamente, atrasando a visualização da página.

- -
-
- -

Informações gerais

- -
-
Especificação
-
HTML5
-
Interface
-
Event
-
Propaga
-
Sim
-
Cancelável
-
Sim (embora especificado como evento simples não-cancelável)
-
Alvo
-
Document
-
Ação Default
-
Nenhuma.
-
- -

Propriedades

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}Alvo do evento (O topo do DOM).
type {{readonlyInline}}{{domxref("DOMString")}}Tipo de evento
bubbles {{readonlyInline}}{{jsxref("Boolean")}}O evento é por padrão bubbles ou não.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}O evento pode ser cancelado ou não.
- -

Exemplo

- -

Básico

- -
<script>
-  document.addEventListener("DOMContentLoaded", function(event) {
-    console.log("DOM completamente carregado e analisado");
-  });
-</script>
-
- -

Forçando o atraso do DOMContentLoaded

- -
<script>
-  document.addEventListener("DOMContentLoaded", function(event) {
-    console.log("DOM completamente carregado e analisado");
-  });
-
-for(var i=0; i<1000000000; i++)
-{} // este script síncrono irá o atrasar carregamento do DOM. Então o evento DOMContentLoaded irá ser ativado mais tarde.
-</script>
-
- -

 

- -

Verificando se o carregamento está completo

- -

DOMContentLoaded pode disparar antes do seu script ser carregado, então é importante validar antes de adicionar um listener.

- -
function doSomething() {
-  console.info("DOM carregado");
-}
-
-if (document.readyState === "loading") {  // Ainda carregando
-  document.addEventListener("DOMContentLoaded", doSomething);
-} else {  // `DOMContentLoaded` foi disparado
-  doSomething();
-}
- -

 

- -

Compatibilidade entre Navegadores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico0.2{{ CompatGeckoDesktop("1") }}9.09.03.1
-
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico{{ CompatVersionUnknown() }}{{ CompatGeckoMobile("1") }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -

Propagação para este evento é suportada à partir do Gecko 1.9.2, Chrome 6, e Safari 4.

- -

Cross-browser fallback

- -

O Internet Explorer 8 suporta o evento readystatechange, que pode ser usado para detectar quando o DOM está pronto. Em versões anteriores do Internet Explorer, este estado pode ser detectado tentando executar document.documentElement.doScroll("left"); repetidas vezes; este comando dará erro repetidamente, até que o DOM esteja pronto.

- -

Há também uma abundância de bibliotecas de propósito geral que oferecem métodos cross-browser para detectar se o DOM está pronto.

- -

Eventos Relacionados

- - diff --git a/files/pt-br/web/events/focus/index.html b/files/pt-br/web/events/focus/index.html deleted file mode 100644 index 9f6dd7117d..0000000000 --- a/files/pt-br/web/events/focus/index.html +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: focus -slug: Web/Events/focus -translation_of: Web/API/Element/focus_event ---- -

O evento focus é acionado assim que um elemento recebe um foco. O grande diferencial entre este evento e o evento focusin, é que esse segundo "borbulha".

- -

Informações Gerais

- -
-
Especificação
-
DOM L3
-
Interface
-
{{ domxref("FocusEvent") }}
-
Borbulha
-
Não
-
Cancelável
-
Não
-
Alvo
-
Element
-
Ação Padrão
-
Nenhuma.
-
- -
Note: The interface was {{ domxref("Event") }} prior to Gecko 24 {{ geckoRelease(24) }}. ({{ bug(855741) }})
- -

Propriedades

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}Event target (DOM element)
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
relatedTarget {{readonlyInline}}{{domxref("EventTarget")}} (DOM element)null
- -

Eventos Delegados

- -

Existem 2 maneiras diferentes de implementações delegados a partir de um evento: por meio da utilização do evento  focusin que todos os browsers atuais suportam tão tecnologia (todos exceto o Firefox), ou por setando o parâmetro "useCapture" do elemento  addEventListener  como true:

- -

{{ EmbedLiveSample('Event_delegation', '', '', '', 'Web/Events/blur') }}

- -

(Exemplo de codigo do evento blur (event))

- -

Compatibilidade de Browser

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown()}}{{CompatUnknown()}}{{CompatUnknown()}}{{CompatUnknown()}}{{CompatUnknown()}}{{CompatUnknown()}}{{CompatUnknown()}}
-
- -

Eventos Relacionais

- - diff --git a/files/pt-br/web/events/focusin/index.html b/files/pt-br/web/events/focusin/index.html deleted file mode 100644 index 797424de54..0000000000 --- a/files/pt-br/web/events/focusin/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: focusin -slug: Web/Events/focusin -translation_of: Web/API/Element/focusin_event ---- -

O evento focusin é acionado no momento em que o elemento receba o foco. A grande diferença entre esse evento e o evento  focus, é que apenas o focusin delega o seu evento para o elemento pai (conhecido como bubbling ou deletegate).

- -

Informações Gerais

- -
-
Especificação
-
DOM L3
-
Interface
-
{{domxref("FocusEvent")}}
-
Borbulha
-
Sim
-
Cancelável
-
Não
-
Alvo
-
Element
-
Ação Padrão
-
Nenhuma.
-
- -

Propriedades

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}Event target losing focus.
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
relatedTarget {{readonlyInline}}{{domxref("EventTarget")}} (DOM element)Event target receiving focus.
- -

Compatibilidade com Demais Navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(52)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(52)}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
-
- -

Eventos Relacionais

- - diff --git a/files/pt-br/web/events/focusout/index.html b/files/pt-br/web/events/focusout/index.html deleted file mode 100644 index 8f72b211b2..0000000000 --- a/files/pt-br/web/events/focusout/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: focusout -slug: Web/Events/focusout -translation_of: Web/API/Element/focusout_event ---- -

O evento focusout é acionado assim que o elemento perde o foco. A principal diferença entre esse evento e o evento blur, é que esse ultimo não gera "borbulhas".

- -

Informações Gerais

- -
-
Especificação
-
DOM L3
-
Interface
-
{{domxref("FocusEvent")}}
-
Borbulha
-
Sim
-
Cancelável
-
Não
-
Alvo
-
Element
-
Ação Padrão
-
Nenhuma.
-
- -

Propriedades

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}Event target losing focus.
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
relatedTarget {{readonlyInline}}{{domxref("EventTarget")}} (DOM element)Event target receiving focus.
- -

Compatibilidade dos Navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(52)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(52)}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
-
- -

Eventos Relcionados

- - diff --git a/files/pt-br/web/events/input/index.html b/files/pt-br/web/events/input/index.html deleted file mode 100644 index dd69baf988..0000000000 --- a/files/pt-br/web/events/input/index.html +++ /dev/null @@ -1,248 +0,0 @@ ---- -title: input -slug: Web/Events/input -translation_of: Web/API/HTMLElement/input_event ---- -

O evento input do DOM é disparado sincronicamente quando o valor de um elemento {{HTMLElement("input")}}, {{HTMLElement("select")}}, ou {{HTMLElement("textarea")}} é alterado. (Para elementos input com type=checkbox ou type=radio, o evento input não é disparado quando o usuário clica no elemento, porque o valor do atributo não é alterado.) Além disso, o evento é disparado no contenteditable editors quando o seu conteúdo é alterado. Nesse caso, O alvo do evento é o elemento host da edição. Se houver dois ou mais elementos que tenha contenteditable como true, o "host de edição" é o elemento antepassado mais próximo cujo pai não é editável. Similarmente, ele também é disparado no element raiz do designMode editors.

- -

Informações gerais

- -
-
Specification
-
HTML5, DOM Level 3 Events
-
Interface
-
{{domxref("Event")}}, {{domxref("InputEvent")}}
-
Bubbles
-
Yes
-
Cancelable
-
No
-
Target
-
Element
-
Default Action
-
The value or the content is modified.
-
- -

Propriedades

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
- -

Compatibilidade dos navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}[1]9[2]{{CompatVersionUnknown}}[3]{{CompatVersionUnknown}}
immediately after compositionupdate{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("12")}}{{CompatVersionUnknown}}15{{CompatVersionUnknown}}
on contenteditable element{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("14")}}{{CompatNo}}[4] -

 

- 		15{{CompatVersionUnknown}}
when designMode is "on"{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("14")}}{{CompatNo}}15{{CompatVersionUnknown}}
data{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
isComposing{{CompatNo}}{{CompatUnknown}}{{CompatGeckoDesktop("31")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
<select>{{CompatVersionUnknown}}{{CompatNo}}{{CompatGeckoDesktop("49")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
immediately after compositionupdate{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("12")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
on contenteditable element{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("14")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
when designMode is "on"{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("14")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
data{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
isComposing{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatGeckoMobile("31")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
<select>{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

[1] Prior to Gecko 12.0 {{geckoRelease("12.0")}}, Gecko didn't fire input events while composition was ongoing using IMEs or when dead keys were used on Mac OS X.

- -

[2] IE 9 does not fire an input event when the user deletes characters from an input (e.g. by pressing Backspace or Delete, or using the "Cut" operation).

- -

[3] Prior to Opera 15, Opera did not fire an input event after dropping text in an input field.

- -

[4] The event target is the innermost element at the caret position.

- -

Veja também

- - - -

Also the change event is related. change fires less often than input – it only fires when the changes are committed by the user.

diff --git a/files/pt-br/web/events/load/index.html b/files/pt-br/web/events/load/index.html deleted file mode 100644 index db04b1ecbe..0000000000 --- a/files/pt-br/web/events/load/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: load -slug: Web/Events/load -translation_of: Web/API/Window/load_event ---- -
O evento de load é acionado quando um recurso e seus recursos
-dependentes terminaram de carregar.
- -

Informações Gerais

- -
-
Especificação
-
DOM L3
-
Interface
-
UIEvent
-
Bubbles
-
Não
-
Cancelavel
-
Não
-
Alvo
-
Window
-
Ação Padrão
-
Nenhuma.
-
- -

Propriedades

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
target {{readonlyInline}}EventTargetThe event target (the topmost target in the DOM tree).
type {{readonlyInline}}DOMStringThe type of event.
bubbles {{readonlyInline}}BooleanWhether the event normally bubbles or not.
cancelable {{readonlyInline}}BooleanWhether the event is cancellable or not.
view {{readonlyInline}}WindowProxydocument.defaultView (window of the document)
detail {{readonlyInline}}long (float)0.
- -

Exemplo

- -
<script>
-  window.addEventListener("load", function(event) {
-    console.log("Todos os recursos terminaram o carregamento!");
-  });
-</script>
-
- -

 

- -

Eventos Relacionados

- - diff --git a/files/pt-br/web/events/readystatechange/index.html b/files/pt-br/web/events/readystatechange/index.html deleted file mode 100644 index 185350cb54..0000000000 --- a/files/pt-br/web/events/readystatechange/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: readystatechange -slug: Web/Events/readystatechange -translation_of: Web/API/Document/readystatechange_event ---- -

{{ApiRef}}

- -

O evento readystatechange é ativado quando o atributo readyState de um documento é alterado.

- -

Informações gerais

- -
-
Especificação
-
HTML5
-
Interface
-
Event
-
Propaga
-
Não
-
Cancelável
-
Não
-
Alvo
-
Document
-
Ação Padrão
-
Nenhuma.
-
- -

Propriedades

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
- -

Exemplo

- -
// alternativa ao DOMContentLoaded
-document.onreadystatechange = function () {
-    if (document.readyState == "interactive") {
-        initApplication();
-    }
-}
-
- -

Compatibilidade entre Navegadores

- -

Este evento tem sido suportado pelo Internet Explorer há várias versões, e pode ser usada como uma alternativa para o evento DOMContentLoaded (veja a seção cross-browser fallback).

- -

Eventos Relacionados

- - diff --git a/files/pt-br/web/guide/css/css_media_queries/index.html b/files/pt-br/web/guide/css/css_media_queries/index.html deleted file mode 100644 index 4b9728eebd..0000000000 --- a/files/pt-br/web/guide/css/css_media_queries/index.html +++ /dev/null @@ -1,639 +0,0 @@ ---- -title: Usando Media Queries -slug: Web/Guide/CSS/CSS_Media_queries -tags: - - CSS - - Desenho Responsivo - - Design Responsivo -translation_of: Web/CSS/Media_Queries/Using_media_queries ---- -

Uma media query consiste de um media type e pelo menos uma expressão que limita o escopo das folhas de estilo usando media features, tal como largura, altura e cor. Media queries, adicionadas no CSS3, deixam a apresentação do conteúdo adaptado a uma gama especifica de dispositivos não precisando mudar o conteúdo em si.

- -

Sintaxe

- -

Media queries consistem de um media type e podem, a partir de uma especificação CSS3, contendo uma ou mais expressões, expressa em media features, que determinam ou verdadeiro ou falso. Os resultados da query são verdadeiros se o media type especificado na media query corresponde ao tipo do documento exibido no dispositivo e todas as expressões na media query são verdadeiras.

- -
<!-- CSS media query em um elemento de link -->
-<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
-
-<!-- CSS media query dentro de um stylesheet -->
-
-<style>
-@media (max-width: 600px)
-{
-  .facet_sidebar
-   {
-    display: none;
-   }
-}
-</style>
- -

Quando uma media query é verdadeira, a camada de estilo ou as regras de estilos correspondentes são aplicadas, seguindo o padrão de regras de cascatas. Camadas de estilos com media queries ligadas a tag <link> vão fazer download mesmo se suas medias queries retornarem falso (eles não se aplicam, no entanto).

- -

A menos que você use os operadores not ou only, o media type é opcional e o tipo all será implícito.

- -

Operadores lógicos

- -

Você pode compor media queries complexos usando operadores lógicos, incluindo not, and, e only. O operador and é usado para combinar múltiplas media features em uma mesma media query, requerendo que cada sequência de características, retorne verdadeiro na ordem para que a query seja verdadeiro. O operador not é usado para negar uma media query inteira. O operador only é usado para aplicar um estilo apenas se a query inteira for igual, útil para previnir que navegadores antigos apliquem os estilos selecionados. Se você usar os operadores not ou only, você tem que especificar um tipo de media explícito.

- -

Você também pode combinar múltiplas medias queries em uma  lista separadas por vírgulas, se qualquer uma das media queries na lista é verdadeira, toda a instrução retorna verdadeira. Isto é equivalente a um operador or.

- -

and

- -

A palavra-chave and é usada para combinar múltiplas media features, bem como combinar media features com media types. Uma media query básica, uma media feature simples com a media type all, pode parecer com isso:

- -
@media (min-width: 700px) { ... }
- -

Se, no entanto, você desejar que isso se aplique apenas para telas em landscape, você pode usar o operador and para deixar todas as media features juntas.

- -
@media (min-width: 700px) and (orientation: landscape) { ... }
- -

Agora, a media query acima vai apenas retorna verdadeira se o viewport for 700px, wide ou wider e a tela estiver em landscape. Se, no entanto, você deseja apenas que isso seja aplicado se a tela em questão for media type TV, você pode encadear essas features com a media type usando o operador and.

- -
@media tv and (min-width: 700px) and (orientation: landscape) { ... }
- -

Agora, a media query acima vai ser aplicada apenas se a media type for TV, o viewport for 700px wide ou wider, e a tela estiver em paisagem.

- -

Listas separadas por vírgula

- -

Listas separadas por vírgulas comportam-se como o operador or quando utilizadas em media queries. Quando utilizamos media queries com uma lista separada por vírgulas, se qualquer media queries retornar verdadeiro, os estilos ou folhas de estilos serão aplicadas. Cada media query em um lista separa por vírgulas é tratada como uma query individual, e qualquer operador aplica em uma media query não afeta os outros. Isto significa que media queries separadas por vírgulas podem ter objetivos diferentes de media features, types e states.

- -

Por exemplo, se você quiser aplicar um conjunto de estilos se o dispositivo de visualização tiver um largura mínima de 700px ou estiver sendo segurando em paisagem, você pode escrever o seguinte:

- -
@media (min-width: 700px), handheld and (orientation: landscape) { ... }
- -

Acima, se eu estivesse em um dispositivo screen com um viewport largura de 800px, a afirmação retorna verdadeiro por que a primeira parte, interpretada como @media all and (min-width: 700px) será aplicada no meu dispositivo e portanto retorna verdadeiro, apesar do fato que meu dispositivo screen iria falhar no media type handheld na segunda media query. Do mesmo modo, se eu estivesse segurando um dispositivo em paisagem com um viewport de largura de 500px, enquanto a primeira media query falha devido a largura do viewport, a segunda media query teria sucesso e assim o media statement retorna verdadeiro.

- -

not

- -

A palavra chave not se aplica em toda a media query e retorna verdadeiro, caso contrário retorna falso (tal como monochrome como cor de tela ou uma tela de largura de 600px com um min-width: 700px recurso consultado). Um not vai apenas negar a media query que é aplicada, de modo não toda a media query que apresente uma media querie com uma lista separada por vírgulas. A palavra chave not não pode ser usada para negar uma característica individual da query, apenas uma media query inteira. Por exemplo, o not é avaliado por último na query seguinte:

- -
@media not all and (monochrome) { ... }
-
- -

Isto significa que a query é avaliada assim:

- -
@media not (all and (monochrome)) { ... }
-
- -

... em vez disso:

- -
@media (not all) and (monochrome) { ... }
- -

Um outro exemplo, veja a media query seguinte:

- -
@media not screen and (color), print and (color)
-
- -

É avalida desta forma:

- -
@media (not (screen and (color))), print and (color)
- -

only

- -

A palavra chave only previne que navegadores antigos que não suportam media queries com media features de aplicar os estilos dados:

- -
<link rel="stylesheet" media="only screen and (color)" href="example.css" />
-
- -

Pseudo-BNF

- -
media_query_list: <media_query> [, <media_query> ]*
-media_query: [[only | not]? <media_type> [ and <expression> ]*]
-  | <expression> [ and <expression> ]*
-expression: ( <media_feature> [: <value>]? )
-media_type: all | aural | braille | handheld | print |
-  projection | screen | tty | tv | embossed
-media_feature: width | min-width | max-width
-  | height | min-height | max-height
-  | device-width | min-device-width | max-device-width
-  | device-height | min-device-height | max-device-height
-  | aspect-ratio | min-aspect-ratio | max-aspect-ratio
-  | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
-  | color | min-color | max-color
-  | color-index | min-color-index | max-color-index
-  | monochrome | min-monochrome | max-monochrome
-  | resolution | min-resolution | max-resolution
-  | scan | grid
- -

Media queries são case insensitive.  Media queries envolvidas em media types desconhecidos serão sempre falsas.

- -
Nota: Parenteses são obrigatórios em volta de expressões; a falta deles é um erro.
- -

Características de mídia

- -

A maioria das media features podem ter prefixo “min-” ou “max-“ para expressar as restrições “maior ou igual” ou “menor ou igual”. Isto evita o uso dos símbolos  “<” e “>” , que entrem em conflito com HTML e XML. Se você usar uma media feature sem especificar um valor, a expressão retorna verdadeiro, se o valor da feature for diferente de zero.

- -
Nota: Se uma media feature não se aplicar ao dispositivo onde o navegador esta sendo executado, as expressões que envolvem essa media feature são sempre falsas. Por exemplo, consultar um aspecto de um dispositivo sonoro, sempre resulta em falso.
- -

cor

- -

Valor: {{cssxref("<color>")}}
- Mídia: {{cssxref("Media/Visual")}}
- Aceita prefixos min/max: sim

- -

Indica o número de bits por componente de cor no dispositivo de saída. Se o dispositivo não é um dispositivo de cor, o valor é zero.

- -
Nota: Se os componentes de cor têm diferentes números de bits por componente de cor, o menor valor é utilizado. Por exemplo, se o display usa 5 bits para azul e vermelho e 6 bits para verde, então o dispositivo considera 5 bits por componente de cor. Se o dispositivo usar cores indexadas, o menor número de bits por componente de cor na tabela de cores é usado.
- -

Exemplos

- -

Aplicar uma folha de estilo a todos dispositivos:

- -
@media all and (color) { ... }
-
- -

Aplicar uma folha de estilo a todos dispositivos com no mínimo 4 bits de color componente:

- -
@media all and (min-color: 4) { ... }
-
- -

color-index

- -

Valor: {{cssxref("<integer>")}}
- Mídia: {{cssxref("Media/Visual")}}
- Aceita prefixos min/max: Sim

- -

Indica o número de entradas na tabela de consulta de cores para o dispositivo de saída.

- -

Exemplos

- -

Para indicar que uma folha de estilo deve ser aplicada para todos os dispositivos que usam cores indexadas, você pode fazer:

- -
@media all and (color-index) { ... }
-
- -

Para aplicar uma folha de estilo em um dispositivo com cores indexadas menor que 256 cores:

- -
<link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" />
-
- -

aspect-ratio

- -

Valor: {{cssxref("<ratio>")}}
- Mídia: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
- Aceita prefixos min/max: sim

- -

Descreve o aspecto da relação da área do display do dispositivo de saída. Este valor consiste de dois inteiros positivos separados por um caractere barra (“/”). Isto representa a relação entre pixels horizontais (primeiro termo) para pixels verticais (segundo termo).

- -

Exemplo

- -

A seguir selecionamos uma folha de estilo especial para usarmos quando a área do display é pelo menos mais larga do que alta.

- -
@media screen and (min-aspect-ratio: 1/1) { ... }
- -

Isto seleciona o estilo quando a relação de aspecto seja 1:1 ou maior. Em outras palavras, estes estilos serão aplicados apenas quando a área de visualização for quadrada ou paisagem.

- -

device-aspect-ratio

- -

Valor: {{cssxref("<ratio>")}}
- Mídia: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
- Aceita prefixos min/max: sim

- -

Descreve a relação de aspecto do dispositivo de saída. Este valor consiste de dois inteiros positivos separados pelo carácter barra (“/”). Isto representa a relação de pixels horizontais (primeiro termo) por pixels verticais (segundo termo).

- -

Exemplo

- -

A seguir, selecionamos uma folha de estilo especial para usar em telas widescreen.

- -
@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }
- -

Isso seleciona o estilo quando a relação de aspecto é 16:9 ou 16:10.

- -

device-height

- -

Valor: {{cssxref("<length>")}}
- Mídia: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
- Aceita prefixos min/max: sim

- -

Descreve a altura do dispositivo de saída( ou seja, toda a tela ou página, em vez de apenas a área de renderização, tal como a janela do documento).

- -

Exemplo

- -

Para aplicar uma folha de estilo a um documento quando exibido em uma tela menor que 800 pixels de altura, você pode usar isso:

- -
<link rel="stylesheet" media="screen and (max-device-height: 799px)" />
-
- -

device-width

- -

Valor: {{cssxref("<length>")}}
- Mídia: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
- Aceita prefixos min/max: sim

- -

Descreve a largura do dispositivo e saída (ou seja, toda a tela ou página, em vez de apenas a área de renderização, tal como a janela do documento).

- -

Exemplo

- -

Para aplicar uma folha de estilo a um documento quando exibido em uma tela menor que 800px de largura, você pode usar isso:

- -
<link rel="stylesheet" media="screen and (max-device-width: 799px)" />
- -

grid

- -

Valor: {{cssxref("<integer>")}}
- Mídia: todas
- Aceita prefixos min/max: não

- -

Determina se o dispositivo de saída é um dispositivo grade ou um dispositivo bitmap. Se o dispositivo é baseado em grade(tal como um terminal TTY ou uma tela de telefone com apenas um tipo de letra), o valor é 1. De outro modo é zero.

- -

Exemplo

- -

Para aplicar um estilo a dispositivos postáteis com 15-carácteres ou uma tela mais estreita:

- -
@media handheld and (grid) and (max-width: 15em) { ... }
-
- -
Nota:  A unidade "em" tem um significado especial para dispositivos de grade, uma vez que a exata largura de um "em" não pode ser determinada, 1em é assumido para ser a largura de uma célula da grade horizontalmente, e a altura de uma célula verticalmente.
- -

height

- -

Valor: {{cssxref("<length>")}}
- Mídia: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
- Aceita prefixos min/max: yes

- -

A característica height descreve a altura da superfície de renderização do dispositivo de saída (tal como a altura do viewport ou da caixa de página em uma impressora).

- -
Nota: Como o usuário redimensiona a janela, o Firefox muda as folhas de estilo como apropriado, com base nas media queries, usando as media features width e height.
- -

monochrome

- -

Valor: {{cssxref("<integer>")}}
- Mídia: {{cssxref("Media/Visual")}}
- Aceita prefixos min/max: sim

- -

Indica o número de bits por pixel em um dispositivo monocromático (greyscale). Se o dispositivo não for monocromático, o valor é 0.

- -

Exemplos

- -

Para aplicar uma folha de estilo em todos os dispositivos monocromáticos:

- -
@media all and (monochrome) { ... }
-
- -

Para aplicar uma folha de estilo em dispositivos monocromáticos com pelo menos 8 bits por pixel:

- -
@media all and (min-monochrome: 8) { ... }
-
- -

orientation

- -

Valor: landscape | portrait
- Mídia: {{cssxref("Media/Visual")}}
- Aceita prefixos min/max: não

- -

Indica se o viewport é modo landscape (o visor é mais largo do que mais alto) ou portrait (o visor é mais alto do que mais largo).

- -

Exemplo

- -

Para aplicar a folha de estilo apenas em orientação portrait:

- -
@media all and (orientation: portrait) { ... }
- -
Nota: Este valor não corresponde com a orientação real do dispositivo. Abrindo o teclado virtual na maioria dos dispositivos na orientação retrato fará com que o viewport torne-se mais largo do que alto, fazendo assim que o navegador use estilos de paisagem em vez de retrato.
- -

resolution

- -

Valor: {{cssxref("<resolution>")}}
- Mídia: {{cssxref("Media/Bitmap", "bitmap")}}
- Aceita prefixos min/max: sim

- -

Indica a resolução (densidade de pixel) da saída do dispositivo. A resolução pode ser especificada em pontos por inch(dpi) ou pontos por centímetro(dpcm).

- -

Exemplos

- -

Para aplicar a folha de estilo em dispositivos com resolução de pelo menos 300 pontos por inch:

- -
@media print and (min-resolution: 300dpi) { ... }
-
- -

Para substituir a antiga sintaxe (min-device-pixel-ratio: 2):

- -
@media screen and (min-resolution: 2dppx) { ... }
- -

scan

- -

Valor: progressive | interlace
- Mídia: {{cssxref("Media/TV")}}
- Aceita prefixos min/max: não

- -

Descreve o processo de digitalização de dispositivos saída de televisão.

- -

Exemplo

- -

Para aplicar uma folha de estilo apenas para televisores de varredura progressiva:

- -
@media tv and (scan: progressive) { ... }
-
- -

width

- -

Valor: {{cssxref("<length>")}}
- Mídia: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
- Aceita prefixos min/max: sim

- -

A media feature width descreve a largura da superficie de renderização do dispositivo de saída (tal como a largura da janela do documento, ou a largura da caixa de página em uma impressora).

- -

Nota:
- Como o usuário redimensiona a janela, o Firefox muda as folhas de estilos como apropriado baseado em media queries usando media features width e height.

- -

Exemplos

- -

Se você quiser especificar uma folha de estilo para dispositivos portáteis, ou dispositivos screen com uma largura maior que 20em, você pode usar essa query:

- -
@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... }
-
- -

Essa media query especifica uma folha de estilo que aplica-se para mídias impressas maiores que 8.5 inches.

- -
<link rel="stylesheet" media="print and (min-width: 8.5in)"
-    href="http://foo.com/mystyle.css" />
-
- -

Essa query especifica uma folha de estilo que é usada quano o viewport está entre 500 e 800 pixels de largura:

- -
@media screen and (min-width: 500px) and (max-width: 800px) { ... }
-
- -

Especificação da Mozilla para mídias características

- -

Mozilla oferece várias media features para específicos Gecko . Algumas dessas podem ser sugeridas como media features oficiais.

- -

{{ h3_gecko_minversion("-moz-images-in-menus", "1.9.2") }}

- -

Valor: {{cssxref("<integer>")}}
- Mídia: {{cssxref("Media/Visual")}}
- Aceita prefixos min/max: não

- -

Se o dispositivo permite aparecer imagens nos menus, o valor é 1; caso contrário, o valor é 0. Isto corresponde ao {{ cssxref(":-moz-system-metric(images-in-menus)") }} CSS pseudo-class.

- -

{{ h3_gecko_minversion("-moz-mac-graphite-theme", "1.9.2") }}

- -

Valor: {{cssxref("<integer>")}}
- Mídia: {{cssxref("Media/Visual")}}
- Aceita prefixos min/max:no

- -

Se o usuário tenha configurado seu dispositivo para usar a aparência "Graphite" no Mac OS X, o valor é 1. Se o usuário está usando a aparência padrão blue, ou não está num Mac OS X, o valor é 0.

- -

Isto corresponde ao {{ cssxref(":-moz-system-metric(mac-graphite-theme)") }} CSS pseudo-class.

- -

{{ h3_gecko_minversion("-moz-maemo-classic", "1.9.2") }}

- -

Valor: {{cssxref("<integer>")}}
- Mídia: {{cssxref("Media/Visual")}}
- Aceita prefixos min/max: não

- -

Se o usuário está usando Maemo com o tema original, o valor é 1; Se está usando o mais novo tema Fremantle, o valor é 0.

- -

Isto corresponde ao {{ cssxref(":-moz-system-metric(maemo-classic)") }} CSS pseudo-class.

- -

{{ h3_gecko_minversion("-moz-device-pixel-ratio", "2.0") }} {{ deprecated_inline("gecko&16") }}

- -

Valor: {{cssxref("<number>")}}
- Mídia: {{cssxref("Media/Visual")}}
- Aceita prefixos min/max: sim

- -

Dar o número de pixels do dispositivo por pixels do CSS.

- -
-

Não use este recurso.

- -

Em vez disso, use o recurso resolution com a unidade dppx.
-
- -moz-device-pixel-ratio pode ser usada para compatibilidade com Firefox mais velho que a versão 16 e -webkit-device-pixel-ratio com navegadores baseados no WebKit que não suportam dppx.

- -

Exemplo:

- -
@media (-webkit-min-device-pixel-ratio: 2), /* Navegadores baseados no Webkit */
-       (min--moz-device-pixel-ratio: 2),    /* Navegadores mais antigos do Firefox (antes do Firefox 16) */
-       (min-resolution: 2dppx),             /* Forma padrão */
-       (min-resolution: 192dpi)             /* dppx fallback */
- -

Veja este artigo CSSWG para ccompatibilidade de boas práticas em relação a resolution e dppx.

-
- -
Nota: Esta media feature é também implementada pelo Webkit e pelo IE 11 para Windows Phone 8.1como -webkit-device-pixel-ratio. Os prefixos min e max implementados pelo Gecko são nomeados min--moz-device-pixel-ratio e max--moz-device-pixel-ratio; mas os mesmos prefixos implementados pelo Webkit são chamados -webkit-min-device-pixel-ratio e -webkit-max-device-pixel-ratio.
- -

{{ h3_gecko_minversion("-moz-os-version", "25.0") }}

- -

Valor: windows-xp | windows-vista | windows-win7 | windows-win8
- Mídia: {{cssxref("Media/Visual")}}
- Aceita prefixos min/max: não

- -

Indica qual versão do sistema operacional está sendo usado atualmente. Atualmente apenas implementada no Windows. Possíveis valores são:

- - - -

Isto é fornecido pelas skins das aplicações e outros códigos do chrome para serem capazes de se adaptar para funcionar bem com a versão atual do sistema operacional.

- -

{{ h3_gecko_minversion("-moz-scrollbar-end-backward", "1.9.2") }}

- -

Valor: {{cssxref("<integer>")}}
- Mídia: {{cssxref("Media/Visual")}}
- Aceita prefixos min/max: não

- -

Se a interface do usuário do dispositivo exibe uma seta para trás no final da barra de rolagem, o valor é 1. Caso contrário, é 0.

- -

Isto corresponde ao {{ cssxref(":-moz-system-metric(scrollbar-end-backward)") }} CSS pseudo-class.

- -

{{ h3_gecko_minversion("-moz-scrollbar-end-forward", "1.9.2") }}

- -

Valor: {{cssxref("<integer>")}}
- Mídia: {{cssxref("Media/Visual")}}
- Aceita prefixos min/max: não

- -

Se a interface do usuário do dispositivo a forward arrow button at the end of scrollbars, this is 1. Otherwise it's 0.

- -

Isto corresponde ao {{ cssxref(":-moz-system-metric(scrollbar-end-forward)") }} CSS pseudo-class.

- -

{{ h3_gecko_minversion("-moz-scrollbar-start-backward", "1.9.2") }}

- -

Valor: {{cssxref("<integer>")}}
- Mídia: {{cssxref("Media/Visual")}}
- Aceita prefixos min/max: não

- -

Se a interface do usuário do dispositivo a backward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.

- -

Isto corresponde ao {{ cssxref(":-moz-system-metric(scrollbar-start-backward)") }} CSS pseudo-class.

- -

{{ h3_gecko_minversion("-moz-scrollbar-start-forward", "1.9.2") }}

- -

Valor: {{cssxref("<integer>")}}
- Mídia: {{cssxref("Media/Visual")}}
- Aceita prefixos min/max: não

- -

Se a interface do usuário do dispositivo a forward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.

- -

Isto corresponde ao {{ cssxref(":-moz-system-metric(scrollbar-start-forward)") }} CSS pseudo-class.

- -

{{ h3_gecko_minversion("-moz-scrollbar-thumb-proportional", "1.9.2") }}

- -

Valor: {{cssxref("<integer>")}}
- Mídia: {{cssxref("Media/Visual")}}
- Aceita prefixos min/max: não

- -

Se a interface do usuário do dispositivo the thumb of scrollbars proportionally (that is, sized based on the percentage of the document that is visible), this is 1. Otherwise it's 0.

- -

Isto corresponde ao {{ cssxref(":-moz-system-metric(scrollbar-thumb-proportional)") }} CSS pseudo-class.

- -

{{ h3_gecko_minversion("-moz-touch-enabled", "1.9.2") }}

- -

Valor: {{cssxref("<integer>")}}
- Mídia: {{cssxref("Media/Visual")}}
- Aceita prefixos min/max: não

- -

If the device supports touch events (for a touch screen), this is 1. Otherwise it's 0.

- -

Isto corresponde ao {{ cssxref(":-moz-system-metric(touch-enabled)") }} CSS pseudo-class.

- -

Exemplo

- -

You might use this to render your buttons slightly larger, for example, if the user is on a touch-screen device, to make them more finger-friendly.

- -

{{ h3_gecko_minversion("-moz-windows-classic", "1.9.2") }}

- -

Valor: {{cssxref("<integer>")}}
- Mídia: {{cssxref("Media/Visual")}}
- Aceita prefixos min/max: não

- -

If the user is using Windows unthemed (in classic mode instead of using uxtheme), this is 1; otherwise it's 0.

- -

Isto corresponde ao {{ cssxref(":-moz-system-metric(windows-classic)") }} CSS pseudo-class.

- -

{{ h3_gecko_minversion("-moz-windows-compositor", "1.9.2") }}

- -

Valor: {{cssxref("<integer>")}}
- Mídia: {{cssxref("Media/Visual")}}
- Aceita prefixos min/max: não

- -

If the user is using Windows with the DWM compositor, this is 1; otherwise it's 0.

- -

Isto corresponde ao {{ cssxref(":-moz-system-metric(windows-compositor)") }} CSS pseudo-class.

- -

{{ h3_gecko_minversion("-moz-windows-default-theme", "1.9.2") }}

- -

Valor: {{cssxref("<integer>")}}
- Mídia: {{cssxref("Media/Visual")}}
- Aceita prefixos min/max: não

- -

If the user is currently using one of the default Windows themes (Luna, Royale, Zune, or Aero (including Vista Basic, Vista Advanced, and Aero Glass), this is 1. Otherwise it's 0.

- -

Isto corresponde ao {{ cssxref(":-moz-system-metric(windows-default-theme)") }} CSS pseudo-class.

- -

{{ h3_gecko_minversion("-moz-windows-glass", "21.0") }}

- -

Valor: {{cssxref("<integer>")}}
- Mídia: {{cssxref("Media/Visual")}}
- Aceita prefixos min/max: não

- -

If the user is using Windows Glass theme, this is 1; otherwise it's 0. Note that this only exists for Windows 7 and earlier.

- -

{{ h3_gecko_minversion("-moz-windows-theme", "2.0") }}

- -

Valor: aero | luna-blue | luna-olive | luna-silver | royale | generic | zune
- Mídia: {{cssxref("Media/Visual")}}
- Aceita prefixos min/max: não

- -

Indicates which Windows theme is currently being used. Only available on Windows. Possible values are:

- - - -

Isto é previsto para skins de aplicativo e outro código de aplicações de chrome a ser capaz de se adaptar a funcionar bem com o actual tema do Windows.

- -

Compatibilidade no navegador

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico{{ CompatChrome("21") }}{{ CompatGeckoDesktop("1.9.1") }}{{ CompatIE("9.0") }}{{ CompatOpera("9") }}{{ CompatSafari("4") }}
Grade{{ CompatUnknown() }}{{ CompatNo() }} (grid media type is not supported){{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
Resolução{{ CompatChrome("29") }}{{ CompatGeckoDesktop("1.9.1") }} supports {{cssxref("<integer>")}} values;
- {{ CompatGeckoDesktop("8.0") }} supports {{cssxref("<number>")}} values, as per the spec.		{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
Scan{{ CompatUnknown() }}{{ CompatNo() }} (tv media type is not supported){{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -

See also

- - diff --git "a/files/pt-br/web/guide/css/css_media_queries_(consultas_de_m\303\255dia_em_css)/index.html" "b/files/pt-br/web/guide/css/css_media_queries_(consultas_de_m\303\255dia_em_css)/index.html" deleted file mode 100644 index c2f5f9f4ce..0000000000 --- "a/files/pt-br/web/guide/css/css_media_queries_(consultas_de_m\303\255dia_em_css)/index.html" +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Usando CSS media queries (consultas de mídia em CSS) -slug: Web/Guide/CSS/CSS_media_queries_(consultas_de_mídia_em_CSS) -tags: - - CSS - - Guía - - Iniciante - - media query ---- -

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/web/guide/css/scaling_background_images/index.html b/files/pt-br/web/guide/css/scaling_background_images/index.html deleted file mode 100644 index d7c3ccfa3f..0000000000 --- a/files/pt-br/web/guide/css/scaling_background_images/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: Alterando a escala das imagens de background -slug: Web/Guide/CSS/Scaling_background_images -translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images -translation_of_original: Web/CSS/CSS_Background_and_Borders/Scaling_background_images ---- -

A propriedade CSS {{ cssxref("background-size") }} possibilita o ajuste das imagens do background, ao invés do comportamento padrão do navegador de mostrar a imagem no seu tamanho real. Você pode tanto aumentar como diminuir a imagem.

- -

Duplicando uma imagem grande

- -

Vamos considerar uma imagem grande, a image da logo do Firefox com 2982x2808 . Nós queremos (por alguma razão, envolvendo um site com um design ruim) quatro cópia desta imagem em um quadrado de 300x300 pixel, resultando nesse visual:

- -

- -

Isto pode ser conseguido usando o seguinte CSS:

- -
.square {
-  width: 300px;
-  height: 300px;
-  background-image: url(firefox_logo.png);
-  border: solid 2px;
-  text-shadow: white 0px 0px 2px;
-  font-size: 16px;
-  background-size: 150px;
-}
-
- -

O {{ cssxref("background-size") }} não precisa mais de nenhum prefixo, mas você pode considerar a adição de uma versão pré-fixada se você está focando em browsers muito antigos.

- -

Esticando uma imagem

- -

Você também pode especificar ambos os tamanhos, horizontal e vertical da imagem, assim:

- -
background-size: 300px 150px;
-
- -

O resultado fica assim:

- -

- -

Aumentando escala de uma imagem

- -

Na outra extremidade do espectro, é possível dimensionar-se uma imagem no fundo. Aqui nós aumentamos a escala de um favicon de pixel 32x32 para 300x300 pixels:

- -

- -
.square2 {
-  width: 300px;
-  height: 300px;
-  background-image: url(favicon.png);
-  background-size: 300px;
-  border: solid 2px;
-  text-shadow: white 0px 0px 2px;
-  font-size: 16px;
-}
-
- -

Como você pode ver, o CSS é, na verdade, essencialmente idêntico, salvo o nome do arquivo de imagem.

- -

Valores especiais: "contain" e "cover"

- -

Da mesma maneira que o {{cssxref("<length>")}}, a propriedade CSS de {{ cssxref("background-size") }} oferece dois valores de tamanho especial, contain e cover. Vamos dar uma olhada nestes.

- -

contain

- -

O valor contain especifica que, independentemente do tamanho da caixa que contém, a imagem de fundo deve ser dimensionado de modo a que cada lado seja tão grande quanto possível ao mesmo tempo que não exceda o comprimento do lado correspondente do recipiente. Tente redimensionar a janela usando um navegador que suporta imagens de fundo de escala (como o Firefox 3.6 ou posterior) para ver isso em ação no exemplo vivo abaixo.

- -
-

{{ EmbedLiveSample("contain", "100%", "220") }}

-
- -
<div class="bgSizeContain">
-  <p>Tente redimensionar a janela e ver o que acontece.</p>
-</div>
- -
.bgSizeContain {
-  height: 200px;
-  background-image: url(https://mdn.mozillademos.org/files/8971/firefox_logo.png);
-  background-size: contain;
-  border: 2px solid darkgray;
-  color: #000; text-shadow: 1px 1px 0 #fff;
-}
- -

cover

- -

O valor cover especifica que a imagem de fundo deve ser dimensionado de modo que seja tão pequena quanto possível ao mesmo tempo assegurar que ambas as dimensões são maiores do que ou igual à dimensão correspondente do recipiente.

- -
{{ EmbedLiveSample("cover", "100%", "220") }}
- -

Os exemplos à seguir usam HTML & CSS:

- -
<div class="bgSizeCover">
-  <p>Tente redimensionar a janela e ver o que acontece.</p>
-</div>
- -
.bgSizeCover {
-  height: 200px;
-  background-image: url('https://mdn.mozillademos.org/files/8971/firefox_logo.png');
-  background-size: cover;
-  border: 2px solid darkgray;
-  color: #000; text-shadow: 1px 1px 0 #fff;
-
- -

Veja Também

- - diff --git a/files/pt-br/web/guide/css/understanding_z_index/index.html b/files/pt-br/web/guide/css/understanding_z_index/index.html deleted file mode 100644 index 488ca0f600..0000000000 --- a/files/pt-br/web/guide/css/understanding_z_index/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: Understanding CSS z-index -slug: Web/Guide/CSS/Understanding_z_index -tags: - - CSS - - Entendendo_CSS_z-index - - Guía - - Web - - z-index -translation_of: Web/CSS/CSS_Positioning/Understanding_z_index ---- -

Normalmente páginas HTML podem ser consideradas bi-dimensionais, pois texto, imagens e outros elementos podem ser dispostos na página sem sobreposição. Há apenas um fluxo de renderização e todos os elementos sabem do espaço ocupado por outros. O atributo {{cssxref("z-index")}} lhe permite ajustar a ordem de sobreposição dos objetos ao renderizar o conteúdo.

- -
-

Em CSS 2.1, cada caixa tem uma posição nas três dimensões. Em adição às suas posições na horizontal e vertical, caixas ficam no "eixo-z" e são formatadas uma em cima da outra. Posições no Eixo-Z são particularmente relevantes quando caixas se sobrepõem visualmente.

-
- -

(from CSS 2.1 Section 9.9.1 - Layered presentation)

- -

Isso significa que as regras de CSS te permitem posicionar caixas em camadas em adição ao render normal da camada (level 0). A posição Z de cada camada é expressa como um inteiro representando a ordem da pilha para renderização. Números maiores significam que são mais próximos do observador. A posição Z pode ser controlada pela propriedade CSS {{ cssxref("z-index")}}.

- -

Usar z-index aparenta ser extremamente fácil: uma única propriedade, endereçada a um único número inteiro, com um comportamento fácil-de-entender. No entanto, quando o z-index é aplicado para a hierarquia complexa dos elementos de HTML, seu comportamento pode ser difícil de entender ou até imprevisível. Isso é devido às complexas regras de stacking. Uma sessão dedicada foi  reservada na especificação do CSS  CSS-2.1 Appendix E para explicar melhor essas regras.

- -

Esse artigo tentará explicar essas regras, com algumas simplificações e vários exemplos.

- -
    -
  1. Stacking without z-index : Regras padrões de empilhamento
    2. -
  2. Stacking and float : Como lidar com elementos que usam float
    3. -
  3. Adding z-index : Usando index-z para mudar o empilhamento padrão
    4. -
  4. The stacking context : Notas sobre contexto do empilhamento
    5. -
  5. Stacking context example 1 : 2-level HTML hierarquia, z-index no último level
    6. -
  6. Stacking context example 2 : 2-level HTML hierarquia, z-index em todos os levels
    7. -
  7. Stacking context example 3 : 3-level HTML hierarquia, z-index no segundo level
    8. -
- -

Note of the author: Thanks to Wladimir Palant and Rod Whiteley for the review.

- -
-

Original Document Information

- - -
- -

 

diff --git a/files/pt-br/web/guide/events/creating_and_triggering_events/index.html b/files/pt-br/web/guide/events/creating_and_triggering_events/index.html new file mode 100644 index 0000000000..632b54df75 --- /dev/null +++ b/files/pt-br/web/guide/events/creating_and_triggering_events/index.html @@ -0,0 +1,145 @@ +--- +title: Criando e disparando eventos +slug: Web/Guide/Events/criando_e_disparando_eventos +tags: + - Avançado + - DOM + - Guía + - JavaScript + - eventos +translation_of: 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 entre 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/web/guide/events/criando_e_disparando_eventos/index.html b/files/pt-br/web/guide/events/criando_e_disparando_eventos/index.html deleted file mode 100644 index 632b54df75..0000000000 --- a/files/pt-br/web/guide/events/criando_e_disparando_eventos/index.html +++ /dev/null @@ -1,145 +0,0 @@ ---- -title: Criando e disparando eventos -slug: Web/Guide/Events/criando_e_disparando_eventos -tags: - - Avançado - - DOM - - Guía - - JavaScript - - eventos -translation_of: 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 entre 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/web/guide/events/touch_events/index.html b/files/pt-br/web/guide/events/touch_events/index.html deleted file mode 100644 index df21cdf335..0000000000 --- a/files/pt-br/web/guide/events/touch_events/index.html +++ /dev/null @@ -1,353 +0,0 @@ ---- -title: Eventos do Toque -slug: Web/Guide/Events/Touch_events -tags: - - Avançado - - DOM - - Evento - - Guía - - Mobile - - Visualização -translation_of: Web/API/Touch_events ---- -

Com a finalidade de fornecer suporte de qualidade para interfaces baseadas em toque (touch), os eventos de touch oferecem a capacidade de interpretar a atividade em telas sensíveis ao toque ou trackpads.

- -

Definições

- -
-
Surface
-
A superfície sensível ao toque. Pode ser uma tela ou trackpad.
-
- -
-
Touch point
-
Um ponto de contato com a superfície. Pode ser um dedo (ou cotovelo, orelha, nariz, o que seja, mas provavelmente, um dedo) ou uma caneta.
-
- -

Interfaces

- -
-
{{ domxref("TouchEvent") }}
-
Representa um evento quando ocorre o estado de toque na superfície.
-
{{ domxref("Touch") }}
-
Representa um único ponto de contato entre o usuário e a superfície sensível a toque.
-
{{ domxref("TouchList") }}
-
Representa um grupo de toques, isto é usado quando usuário tem por exemplo, vários dedos ao mesmo tempo sobre a superfície.
-
{{ domxref("DocumentTouch") }}
-
Contém métodos de conveniência para criar {{ domxref("Touch") }} e objetos {{ domxref("TouchList") }} .
-
- -

Exemplo

- -

Este exemplo acompanha múltiplos pontos de contato de cada vez, permitindo o usuário desenhe em um {{ HTMLElement("canvas") }} com mais de um dedo por vez. Ele só funcionará em um browser que tenha suporte a eventos de toque.

- -
Nota: O texto a seguir utiliza o termo "finger" quando descreve o contato com a superfície, mas poderia, é claro, ser também uma caneta ou outro método de contato.
- -

Crie um canvas

- -
<canvas id="canvas" width="600" height="600" style="border:solid black 1px;">
-  Seu browser não tem suporte ao elemento canvas.
-</canvas>
-<br>
-<button onclick="startup()">Initialize</button>
-<br>
-Log: <pre id="log" style="border: 1px solid #ccc;"></pre>
-
- -

Configurado os eventos

- -

Quando uma página é carregada, a função startup() mostrada abaixo deve ser chamada pelo nosso elemento {{ HTMLElement("body") }} através do atributo onload (Mas no exemplo usamos um botão para adicioná-lo, devido as limitações do MDN live example system).

- -
function startup() {
-  var el = document.getElementsByTagName("canvas")[0];
-  el.addEventListener("touchstart", handleStart, false);
-  el.addEventListener("touchend", handleEnd, false);
-  el.addEventListener("touchcancel", handleCancel, false);
-  el.addEventListener("touchleave", handleEnd, false);
-  el.addEventListener("touchmove", handleMove, false);
-  log("initialized.");
-}
-
- -

Define simplesmento todos os ouvintes dos eventos do nosso elemento {{ HTMLElement("canvas") }} para que possamos trabalhar com os eventos de toque quando eles ocorrerem.

- -

Rastreando novos toques

- -

Vamos acompanhar os toques em seu progresso.

- -
var ongoingTouches = new Array; 
- -

Quando ocorre um evento touchstart, indicando que um novo toque na superfície tenha ocorrido, a função abaixo handleStart() é chamada. 

- -
function handleStart(evt) {
-  evt.preventDefault();
-  log("touchstart.");
-  var el = document.getElementsByTagName("canvas")[0];
-  var ctx = el.getContext("2d");
-  var touches = evt.changedTouches;
-
-  for (var i=0; i < touches.length; i++) {
-    log("touchstart:"+i+"...");
-    ongoingTouches.push(copyTouch(touches[i]));
-    var color = colorForTouch(touches[i]);
-    ctx.beginPath();
-    ctx.arc(touches[i].pageX, touches[i].pageY, 4, 0,2*Math.PI, false);  // a circle at the start
-    ctx.fillStyle = color;
-    ctx.fill();
-    log("touchstart:"+i+".");
-  }
-}
-
- -

A chamada {{ domxref("event.preventDefault()") }} mantem o browser a processa o evento de toque ( isso também previne que um mouse event seja despachado). Então, temos o contexto e puxamos a lista de pontos de contato disparados noa propriedade do evento {{ domxref("TouchEvent.changedTouches") }}.

- -

Depois disso, nós iteramos sobre todos os objetos {{ domxref("Touch") }} da lista e os adicionamos em um array de pontos de contatos ativos e definimos o ponto inicial para desenhar um pequeno circulo; estamos usando um raio de 4 pixels, então um círculo de 4 pixels irá aparecer em nosso canvas.

- -

Desenhando movimento do toque

- -

Cada vez que um ou mais dedos se movem, um evento de TouchMove é disparado, assim chamando nossa função handleMove(). A sua responsabilidade neste exemplo é atualizar as informações armazenadas e desenhar uma linha a partir da posição anterior para a atual de cada toque.

- -
function handleMove(evt) {
-  evt.preventDefault();
-  var el = document.getElementsByTagName("canvas")[0];
-  var ctx = el.getContext("2d");
-  var touches = evt.changedTouches;
-
-  for (var i=0; i < touches.length; i++) {
-    var color = colorForTouch(touches[i]);
-    var idx = ongoingTouchIndexById(touches[i].identifier);
-
-    if(idx >= 0) {
-      log("continuing touch "+idx);
-      ctx.beginPath();
-      log("ctx.moveTo("+ongoingTouches[idx].pageX+", "+ongoingTouches[idx].pageY+");");
-      ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY);
-      log("ctx.lineTo("+touches[i].pageX+", "+touches[i].pageY+");");
-      ctx.lineTo(touches[i].pageX, touches[i].pageY);
-      ctx.lineWidth = 4;
-      ctx.strokeStyle = color;
-      ctx.stroke();
-
-      ongoingTouches.splice(idx, 1, copyTouch(touches[i]));  // swap in the new touch record
-      log(".");
-    } else {
-      log("can't figure out which touch to continue");
-    }
-  }
-}
-
- -

Esta interação sobre os toques também muda, mas parece em cache as  informações em um array para cada toque anterior, a fim de determinar um pont de partida e o destino para o desenho do trajeto. Isto é feito para olhar cada touch da propriedade {{ domxref("Touch.identifier") }}. Esta propriedade é um número inteiro único para cada toque, e mantém-se consistente para cada evento durante o tempo de contato de cada dedo como a superfície.

- -

Isto permite obter as coordenadas da posição anterior de cada contato e usar os métodos de contexto apropriado para desenhar uma linha que une as duas posições.

- -

Depois de desenhar a linha, nós chamamos Array.splice() para substituir as informações previas sobre o ponto de toque com a informação atual no array ongoingTouches.

- -

Gerenciando o final do evento de toque 

- -

Quando o usuário retira o dedo da superfície , um evento touchend é disparado.  Da mesma forma, se o dedo deslisa para fora do canvas, nós teremos um evento touchleave disparado. Nós tratamos da mesma forma em ambos os casos:  chamamos  a função handleEnd(). A sua missão é desenhar uma linha para o final do ponto de toque e remover o ponto de toque da lista ongoing.

- -
function handleEnd(evt) {
-  evt.preventDefault();
-  log("touchend/touchleave.");
-  var el = document.getElementsByTagName("canvas")[0];
-  var ctx = el.getContext("2d");
-  var touches = evt.changedTouches;
-
-  for (var i=0; i < touches.length; i++) {
-    var color = colorForTouch(touches[i]);
-    var idx = ongoingTouchIndexById(touches[i].identifier);
-
-    if(idx >= 0) {
-      ctx.lineWidth = 4;
-      ctx.fillStyle = color;
-      ctx.beginPath();
-      ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY);
-      ctx.lineTo(touches[i].pageX, touches[i].pageY);
-      ctx.fillRect(touches[i].pageX-4, touches[i].pageY-4, 8, 8);  // and a square at the end
-      ongoingTouches.splice(idx, 1);  // remove it; we're done
-    } else {
-      log("can't figure out which touch to end");
-    }
-  }
-}
-
- -

Isto é muito semelhante a função anterior, as únicas diferenças reais são o desenho de um pequeno quadrado para marcar o fim e quando chamamos Array.splice(), nós simplesmente removemos a antiga entrada da lista de toque do ongoing, sem adição das informações atualizadas. O resultado é que paramos o tracking do ponto de contato.

- -

Tratando toques cancelados

- -

Se o dedo do usuário deslisa em uma UI de um navegador, ou o toque de outra forma precisa ser cancelado, o evento touchcancel é disparado e nos chamamaos a função handleCancel().

- -
function handleCancel(evt) {
-  evt.preventDefault();
-  log("touchcancel.");
-  var touches = evt.changedTouches;
-
-  for (var i=0; i < touches.length; i++) {
-    ongoingTouches.splice(i, 1);  // remove it; we're done
-  }
-}
-
- -

Uma vez que a idéia dé cancelar imediatamento o toque, nós simplesmente removemos da lista de ongoing sem desenhar uma linha final.

- -

Funções de conveniência

- -

Este exemplo usa duas funções de conveniência que deve ser olhado rapidamente para ajudar a fazer o resto do código mais claro

- -

Selecionando a cor para cada toque

- -

A fim de fazer cada toque desenhar com uma cor diferente, a função  colorForTouch()  é usada para escolher uma cor com base em um identificador único do toque, Este identificador é um número opaco, mas pelo menos podemos conta com ele diferindo entre os toques ativos no momento.

- -
function colorForTouch(touch) {
-  var r = touch.identifier % 16;
-  var g = Math.floor(touch.identifier / 3) % 16;
-  var b = Math.floor(touch.identifier / 7) % 16;
-  r = r.toString(16); // make it a hex digit
-  g = g.toString(16); // make it a hex digit
-  b = b.toString(16); // make it a hex digit
-  var color = "#" + r + g + b;
-  log("color for touch with identifier " + touch.identifier + " = " + color);
-  return color;
-}
-
- -

O resultado desta função é uma string que pode ser usada ao chamar as funções {{ HTMLElement("canvas") }} para setar a cor do desenho. Por exemplo, para um valor  {{ domxref("Touch.identifier") }} de 10, o resultado será a string "#aaa".

- -

Copiando touch objects

- -

Alguns browsers (mobile Safari, por exemplo) re-usa touch objects entre os eventos, por isso é melhor ter cuidado para copiar os bits, em vez de fazer referência a todo objeto.

- -
function copyTouch(touch) {
-  return { identifier: touch.identifier, pageX: touch.pageX, pageY: touch.pageY };
-}
- -

Encontrando um toque ongoing

- -

A função ongoingTouchIndexById() abaixo verifica através do array ongoingTouches para encontrar o toque correspondente ao indentificador passado, então ele retorna o índice do touch no array.

- -
function ongoingTouchIndexById(idToFind) {
-  for (var i=0; i < ongoingTouches.length; i++) {
-    var id = ongoingTouches[i].identifier;
-
-    if (id == idToFind) {
-      return i;
-    }
-  }
-  return -1;    // não econtrado
-}
-
- -

Mostrando o que está acontecendo

- -
function log(msg) {
-  var p = document.getElementById('log');
-  p.innerHTML = msg + "\n" + p.innerHTML;
-}
- -

If your browser supports it, you can {{ LiveSampleLink('Example', 'see it live') }}.

- -

jsFiddle example

- -

Additional tips

- -

This section provides additional tips on how to handle touch events in your web application.

- -

Handling clicks

- -

Since calling preventDefault() on a touchstart or the first touchmove event of a series prevents the corresponding mouse events from firing, it's common to call preventDefault() on touchmove rather than touchstart. That way, mouse events can still fire and things like links will continue to work. Alternatively, some frameworks have taken to refiring touch events as mouse events for this same purpose. (This example is oversimplified and may result in strange behavior. It is only intended as a guide.)

- -
function onTouch(evt) {
-  evt.preventDefault();
-  if (evt.touches.length > 1 || (evt.type == "touchend" && evt.touches.length > 0))
-    return;
-
-  var newEvt = document.createEvent("MouseEvents");
-  var type = null;
-  var touch = null;
-  switch (evt.type) {
-    case "touchstart":    type = "mousedown";    touch = evt.changedTouches[0];break;
-    case "touchmove":        type = "mousemove";    touch = evt.changedTouches[0];break;
-    case "touchend":        type = "mouseup";    touch = evt.changedTouches[0];break;
-  }
-  newEvt.initMouseEvent(type, true, true, evt.originalTarget.ownerDocument.defaultView, 0,
-    touch.screenX, touch.screenY, touch.clientX, touch.clientY,
-    evt.ctrlKey, evt.altKey, evt.shirtKey, evt.metaKey, 0, null);
-  evt.originalTarget.dispatchEvent(newEvt);
-}
-
- -

Calling preventDefault() only on a second touch

- -

One technique for preventing things like pinchZoom on a page is to call preventDefault() on the second touch in a series. This behavior is not well defined in the touch events spec, and results in different behavior for different browsers (i.e., iOS will prevent zooming but still allow panning with both fingers; Android will allow zooming but not panning; Opera and Firefox currently prevent all panning and zooming.) Currently, it's not recommended to depend on any particular behavior in this case, but rather to depend on meta viewport to prevent zooming.

- -
-
- -

Browser compatibility

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatChrome("22.0") }}{{ CompatGeckoDesktop("18.0") }}
- Disabled with 24 ({{ bug(888304) }})		{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}(Yes){{ CompatGeckoMobile("6.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}
-
- -

Gecko notes

- -

The dom.w3c_touch_events.enabled tri-state preference can be used to disable (0), enable (1), and auto-detect(2) support for standard touch events; by default, they're on auto-detect(2). After changing the preference, you must restart the browser for the changes to take effect.

- -
-

Prior to {{Gecko("12.0")}}, Gecko did not support multi-touch; only one touch at a time was reported.

-
- -
-

Note: As of {{Gecko("24.0")}}, the touch events support introduced with {{Gecko("18.0")}} has been disabled on the desktop version of Firefox, as some popular sites including Google and Twitter are not working properly. Once the bug is fixed, the API will be enabled again. To enable it anyway, open about:config and set the dom.w3c_touch_events.enabled pref to 2. The mobile versions including Firefox for Android and Firefox OS are not affected by this change. Also, the API has been enabled on the Metro-style version of Firefox for Windows 8.

-
- -
Note: Prior to {{Gecko("6.0") }}, Gecko offered a proprietary touch event API. That API is now deprecated; you should switch to this one.
diff --git a/files/pt-br/web/guide/graphics/index.html b/files/pt-br/web/guide/graphics/index.html new file mode 100644 index 0000000000..6abc792433 --- /dev/null +++ b/files/pt-br/web/guide/graphics/index.html @@ -0,0 +1,49 @@ +--- +title: Gráficos na Web +slug: Web/Guide/Gráficos +tags: + - 2D + - 3D + - Canvas + - Gráficos(2) + - HTML5 + - SVG + - Web + - WebGL + - WebRTC +translation_of: Web/Guide/Graphics +--- +

Sites modernos da Web e aplicativos frequentemente precisam exibir gráficos. Imagens estáticas podem ser exibidas facilmente usando o elemento {{HTMLElement("img")}} ou configurando o background de elementos HTML usando a propriedade {{cssxref("background-image")}}. Você também pode construir gráficos em tempo real ou manipular imagens depois de criadas. Esses artigos fornecem conhecimento de como você pode realizar isto.

+ +
+
+

Gráficos 2D

+ +
+
Canvas
+
Um guia introdutório do uso do elemento {{HTMLElement("canvas")}} para desenhar gráficos 2D usando JavaScript.
+
SVG
+
Scalable Vector Graphics (SVG) ou Gráficos de Vetor Escalável permite que você use linhas, curvas e outras formas geométricas para renderizar gráficos. Com vetores, você pode criar imagens que se redimensionam perfeitamente para qualquer tamanho.
+
+ +

Ver todos...

+
+ +
+

Gráficos 3D

+ +
+
WebGL
+
Um guia para começar com WebGL, a API gráfica 3D para a Web. Esta tecnologia permite que você use o padrão OpenGL ES em conteúdo Web.
+
+ +

Video

+ +
+
Usando áudio e vídeo em HTML5
+
Embarcando vídeo ou áudio na página web e controlando a reprodução desses elementos.
+
WebRTC
+
O RTC in WebRTC é um padrão para Real-Time Communications (comunicação em tempo real), tecnologia que permite a transmissão de áudio ou vídeo e o compartilhamento de dados entre os clientes de navegadores (peers).
+
+
+
diff --git "a/files/pt-br/web/guide/gr\303\241ficos/index.html" "b/files/pt-br/web/guide/gr\303\241ficos/index.html" deleted file mode 100644 index 6abc792433..0000000000 --- "a/files/pt-br/web/guide/gr\303\241ficos/index.html" +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: Gráficos na Web -slug: Web/Guide/Gráficos -tags: - - 2D - - 3D - - Canvas - - Gráficos(2) - - HTML5 - - SVG - - Web - - WebGL - - WebRTC -translation_of: Web/Guide/Graphics ---- -

Sites modernos da Web e aplicativos frequentemente precisam exibir gráficos. Imagens estáticas podem ser exibidas facilmente usando o elemento {{HTMLElement("img")}} ou configurando o background de elementos HTML usando a propriedade {{cssxref("background-image")}}. Você também pode construir gráficos em tempo real ou manipular imagens depois de criadas. Esses artigos fornecem conhecimento de como você pode realizar isto.

- -
-
-

Gráficos 2D

- -
-
Canvas
-
Um guia introdutório do uso do elemento {{HTMLElement("canvas")}} para desenhar gráficos 2D usando JavaScript.
-
SVG
-
Scalable Vector Graphics (SVG) ou Gráficos de Vetor Escalável permite que você use linhas, curvas e outras formas geométricas para renderizar gráficos. Com vetores, você pode criar imagens que se redimensionam perfeitamente para qualquer tamanho.
-
- -

Ver todos...

-
- -
-

Gráficos 3D

- -
-
WebGL
-
Um guia para começar com WebGL, a API gráfica 3D para a Web. Esta tecnologia permite que você use o padrão OpenGL ES em conteúdo Web.
-
- -

Video

- -
-
Usando áudio e vídeo em HTML5
-
Embarcando vídeo ou áudio na página web e controlando a reprodução desses elementos.
-
WebRTC
-
O RTC in WebRTC é um padrão para Real-Time Communications (comunicação em tempo real), tecnologia que permite a transmissão de áudio ou vídeo e o compartilhamento de dados entre os clientes de navegadores (peers).
-
-
-
diff --git a/files/pt-br/web/guide/html/canvas_tutorial/advanced_animations/index.html b/files/pt-br/web/guide/html/canvas_tutorial/advanced_animations/index.html deleted file mode 100644 index 23f072420e..0000000000 --- a/files/pt-br/web/guide/html/canvas_tutorial/advanced_animations/index.html +++ /dev/null @@ -1,386 +0,0 @@ ---- -title: Advanced animations -slug: Web/Guide/HTML/Canvas_tutorial/Advanced_animations -tags: - - Animation - - Animations - - Canvas - - animated - - efeitos em animações -translation_of: Web/API/Canvas_API/Tutorial/Advanced_animations ---- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}
- -
-

No último capítulo nós fizemos algumas animações básicas  e fomos conhecer caminhos para conseguir com que as coisas se movessem. Nesta parte prestaremos mais atenção nos movimentos e vamos adicionar algumas físicas para fazer nossas animações mais avançadas.

-
- -

Desenhe uma bola

- -

Nós estamos indo usar uma bola para nossa animação estudada. Então vamos pintar aquela bola desenhada no canvas. O seguinte código configurará.

- -
<canvas id="canvas" width="600" height="300"></canvas>
-
- -

 Como usual, nós precisamos de um contexto de desenho primeiro. Para desenhar a bola, nós criaremos um objeto bola ao qual contém propriedades e um método draw() para pintar no canvas.

- -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-
-var ball = {
-  x: 100,
-  y: 100,
-  radius: 25,
-  color: 'blue',
-  draw: function() {
-    ctx.beginPath();
-    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
-    ctx.closePath();
-    ctx.fillStyle = this.color;
-    ctx.fill();
-  }
-};
-
-ball.draw();
- -

Nada de especial aqui, a bola é atualmente um simples círculos e desenha com ajuda de 

- -

{{domxref("CanvasRenderingContext2D.arc()", "arc()")}} method.

- -

Adicionando velocidade

- -

Agora que você tem a bola, Nós estamos prontos para adicionar uma animação como nós temos aprendido no último capítulo deste tutorial. Denovo, {{domxref("window.requestAnimationFrame()")}} ajuda-nos a controlar a animação. a bola pega o movimento adicionando um vetor de velocidade para a posição. Para cada frame, N[ós também {{domxref("CanvasRenderingContext2D.clearRect", "clear", "", 1)}}o canvas para remover velhor círculos da prioridade dos frames.

- -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-var raf;
-
-var ball = {
-  x: 100,
-  y: 100,
-  vx: 5,
-  vy: 2,
-  radius: 25,
-  color: 'blue',
-  draw: function() {
-    ctx.beginPath();
-    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
-    ctx.closePath();
-    ctx.fillStyle = this.color;
-    ctx.fill();
-  }
-};
-
-function draw() {
-  ctx.clearRect(0,0, canvas.width, canvas.height);
-  ball.draw();
-  ball.x += ball.vx;
-  ball.y += ball.vy;
-  raf = window.requestAnimationFrame(draw);
-}
-
-canvas.addEventListener('mouseover', function(e) {
-  raf = window.requestAnimationFrame(draw);
-});
-
-canvas.addEventListener('mouseout', function(e) {
-  window.cancelAnimationFrame(raf);
-});
-
-ball.draw();
-
- -

Limites

- -

Sem um teste de limite de colisão nossa bola correria para fora do canvas rapidamente. Nós precisamos checar se a posição x e y da bola está fora das dimensões do canvas e invertida a direção do vetor de velocidade. Para fazer isto, Nós adicionamos a seguinte checagem para o método draw():

- -
if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
-  ball.vy = -ball.vy;
-}
-if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
-  ball.vx = -ball.vx;
-}
- -

Primeira demonstração

- -

Deixe-me ver como isto fica em ação até agora. Mova seu mouse dentro do canvas para iniciar a animação.

- - - -

{{EmbedLiveSample("First_demo", "610", "310")}}

- -

Aceleração

- -

Para fazer o movimento tão real, você para jogar com a velocidade como isto, por exemplo:

- -
ball.vy *= .99;
-ball.vy += .25;
- -

Esta diminuição da velocidade vertical para cada frame. Assim que a bola somente saltar no chão no final.

- - - -

{{EmbedLiveSample("Second_demo", "610", "310")}}

- -

Efeito de arrastar

- -

Até agora nós temos feito uso do {{domxref("CanvasRenderingContext2D.clearRect", "clearRect")}} méthodo quando limpar as prioridades do frame.Se você substituir este método com um semi-transparente {{domxref("CanvasRenderingContext2D.fillRect", "fillRect")}}, você pode fácilmente criar um efeito de arrastar.

- -
ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
-ctx.fillRect(0, 0, canvas.width, canvas.height);
- - - -

{{EmbedLiveSample("Third_demo", "610", "310")}}

- -

Adicione um controle de mouse

- -

 

- -

Para conseguir alguns controles sobre a bola, nós podemos fazer isto seguindo nosso mouse usando o evento mouseover, por exemplo. O clique por exemplo. O evento clique que libera a bola e deixa seu limite de novo.

- - - -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-var raf;
-var running = false;
-
-var ball = {
-  x: 100,
-  y: 100,
-  vx: 5,
-  vy: 1,
-  radius: 25,
-  color: 'blue',
-  draw: function() {
-    ctx.beginPath();
-    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
-    ctx.closePath();
-    ctx.fillStyle = this.color;
-    ctx.fill();
-  }
-};
-
-function clear() {
-  ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
-  ctx.fillRect(0,0,canvas.width,canvas.height);
-}
-
-function draw() {
-  clear();
-  ball.draw();
-  ball.x += ball.vx;
-  ball.y += ball.vy;
-
-  if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
-    ball.vy = -ball.vy;
-  }
-  if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
-    ball.vx = -ball.vx;
-  }
-
-  raf = window.requestAnimationFrame(draw);
-}
-
-canvas.addEventListener('mousemove', function(e) {
-  if (!running) {
-    clear();
-    ball.x = e.clientX;
-    ball.y = e.clientY;
-    ball.draw();
-  }
-});
-
-canvas.addEventListener('click', function(e) {
-  if (!running) {
-    raf = window.requestAnimationFrame(draw);
-    running = true;
-  }
-});
-
-canvas.addEventListener('mouseout', function(e) {
-  window.cancelAnimationFrame(raf);
-  running = false;
-});
-
-ball.draw();
-
- -

Mova a bola usando seu mouse e libere - o com um clique.

- -

{{EmbedLiveSample("Adding_mouse_control", "610", "310")}}

- -

Sair

- -

Este curto capítulo somente explica algumas técnicas para criar as mais avançadas animações. Há muito mais! Como adicionar um paddle, alguns bricks, e tornar este demo dentro de um jogo Breakout? Cheque a nossa área de Desenvolvimento de jogos para mais artigos de jogos.

- -

Veja também:

- - - -

{{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}

diff --git a/files/pt-br/web/guide/html/canvas_tutorial/applying_styles_and_colors/index.html b/files/pt-br/web/guide/html/canvas_tutorial/applying_styles_and_colors/index.html deleted file mode 100644 index f711570b9f..0000000000 --- a/files/pt-br/web/guide/html/canvas_tutorial/applying_styles_and_colors/index.html +++ /dev/null @@ -1,725 +0,0 @@ ---- -title: Aplicando estilos e cores -slug: Web/Guide/HTML/Canvas_tutorial/Applying_styles_and_colors -translation_of: Web/API/Canvas_API/Tutorial/Applying_styles_and_colors ---- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}}
- -
-

No capítulo sobre desenhando formas com canvas, usamos apenas os estilos padrões de preenchimento e linha. Aqui vamos explorar as opções do canvas que temos à nossa disposição para tornar nossos desenhos um pouco mais atraentes. Você aprenderá a adicionar cores diferentes, estilos de linhas, gradientes, padrões e sombras aos seus desenhos.

-
- -

Cores

- -

Até agora só vimos métodos do contexto de desenho. Se quisermos aplicar cores a uma forma, existem duas propriedades importantes que podemos utilizar: fillStyle e strokeStyle.

- -
-
{{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle = color")}}
-
Define o estilo usado ao preencher (fill) formas.
-
{{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle = color")}}
-
Define o estilo para os contornos (strokes) das formas.
-
- -

color é uma string que representa um CSS {{cssxref("<color>")}}, um objeto gradiente, ou um objeto padrão. Examinaremos sobre objetos de gradiente e padrão mais tarde. Por padrão, a cor do contorno (stroke color) e a cor de preenchimento (fill color) estão definidos como preto (valor de cor no CSS é #000000).

- -
-

Nota: Quando você definir as propriedades strokeStyle e/ou fillStyle , o novo valor será o padrão para todas as formas desenhadas a partir de então.  Para toda forma que você quiser uma cor diferente, você vai precisar alterar o valor da propriedade fillStyle ou strokeStyle.

-
- -

As strings validas que você pode inserir devem, de acordo com a especificação ser valores CSS {{cssxref("<color>")}}. Cada um dos exemplos a seguir, descrevem a mesma cor.

- -
// these all set the fillStyle to 'orange'
-
-ctx.fillStyle = 'orange';
-ctx.fillStyle = '#FFA500';
-ctx.fillStyle = 'rgb(255, 165, 0)';
-ctx.fillStyle = 'rgba(255, 165, 0, 1)';
-
- -

Um fillStyle exemplo

- -

Neste exemplo, nós vamos mais uma vez utilizar dois for loops para desenhar uma grade de retângulos, cada um com uma cor diferente. A imagem do resultado, deve parecer como a captura de tela. Não existe nada de muito espetacular acontecendo aqui. Nós usamos as duas variéveis i and j para gerar uma única cor em RGB para cada quadrado, e apenas modificando os valores vermelho e verde. O canal azul possui um valor fixo. Modificando os canais, você pode gerar todos os tipos de paletas. Aumentando os passos, você pode alcançar algo que se parece com a paleta de cores dos usuários de Photoshop.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  for (var i = 0; i < 6; i++) {
-    for (var j = 0; j < 6; j++) {
-      ctx.fillStyle = 'rgb(' + Math.floor(255 - 42.5 * i) + ',' +
-                       Math.floor(255 - 42.5 * j) + ',0)';
-      ctx.fillRect(j * 25, i * 25, 25, 25);
-    }
-  }
-}
- - - -

O resultado se parece com isto:

- -

{{EmbedLiveSample("A_fillStyle_example", 160, 160, "https://mdn.mozillademos.org/files/5417/Canvas_fillstyle.png")}}

- -

Um strokeStyle exemplo

- -

Este exemplo é similar com o anterior, porém utiliza a propriedade strokeStyle para alterar a cor de contorno das formas. Nós usamos o método arc()  para desenhar círculos ao invés de quadrados.

- -
  function draw() {
-    var ctx = document.getElementById('canvas').getContext('2d');
-    for (var i = 0; i < 6; i++) {
-      for (var j = 0; j < 6; j++) {
-        ctx.strokeStyle = 'rgb(0,' + Math.floor(255 - 42.5 * i) + ',' +
-                         Math.floor(255 - 42.5 * j) + ')';
-        ctx.beginPath();
-        ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, Math.PI * 2, true);
-        ctx.stroke();
-      }
-    }
-  }
-
- - - -

O resultado se parece com isto:

- -

{{EmbedLiveSample("A_strokeStyle_example", "180", "180", "https://mdn.mozillademos.org/files/253/Canvas_strokestyle.png")}}

- -
Transparência
- Além de desenhar formas opacas na tela, também podemos desenhar formas semi-transparentes (ou translúcidas). Isso é feito definindo a propriedade globalAlpha ou atribuindo uma cor semitransparente ao estilo de stroke e / ou fill style.
- -
-
-
{{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha = transparencyValue")}}
-
-
-

Aplica o valor de transparência especificado a todas as formas futuras desenhadas na tela. O valor deve estar entre 0,0 (totalmente transparente) e 1,0 (totalmente opaco). Este valor é 1.0 (totalmente opaco) por padrão.
- A propriedade globalAlpha pode ser útil se você quiser desenhar muitas formas na tela com transparência semelhante, mas, caso contrário, geralmente é mais útil definir a transparência em formas individuais ao definir suas cores.

- -

Como as propriedades strokeStyle e fillStyle aceitam os valores de cor CSS rgba, podemos usar a notação a seguir para atribuir uma cor transparente a eles.

-
-
- -
// Assigning transparent colors to stroke and fill style
-
-ctx.strokeStyle = 'rgba(255, 0, 0, 0.5)';
-ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
-
- -

A função rgba () é semelhante à função rgb (), mas possui um parâmetro extra. O último parâmetro define o valor da transparência dessa cor específica. O intervalo válido é novamente entre 0,0 (totalmente transparente) e 1,0 (totalmente opaco).

- -

Um exemplo globalAlpha

- -

Neste exemplo, desenharemos um plano de fundo de quatro quadrados coloridos diferentes. Além disso, desenharemos um conjunto de círculos semi-transparentes. A propriedade globalAlpha é configurada em 0.2, que será usada para todas as formas a partir desse ponto. Cada passo no loop for desenha um conjunto de círculos com um raio crescente. O resultado final é um gradiente radial. Ao sobrepor cada vez mais círculos um sobre o outro, reduzimos efetivamente a transparência dos círculos que já foram desenhados. Ao aumentar a contagem de etapas e, com efeito, desenhar mais círculos, o plano de fundo desapareceria completamente do centro da imagem.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  // draw background
-  ctx.fillStyle = '#FD0';
-  ctx.fillRect(0, 0, 75, 75);
-  ctx.fillStyle = '#6C0';
-  ctx.fillRect(75, 0, 75, 75);
-  ctx.fillStyle = '#09F';
-  ctx.fillRect(0, 75, 75, 75);
-  ctx.fillStyle = '#F30';
-  ctx.fillRect(75, 75, 75, 75);
-  ctx.fillStyle = '#FFF';
-
-  // set transparency value
-  ctx.globalAlpha = 0.2;
-
-  // Draw semi transparent circles
-  for (i = 0; i < 7; i++) {
-    ctx.beginPath();
-    ctx.arc(75, 75, 10 + 10 * i, 0, Math.PI * 2, true);
-    ctx.fill();
-  }
-}
- - - -

{{EmbedLiveSample("A_globalAlpha_example", "180", "180", "https://mdn.mozillademos.org/files/232/Canvas_globalalpha.png")}}

- -

Um exemplo usando o rgba()

- -

Neste segundo exemplo, fazemos algo semelhante ao anterior, mas em vez de desenhar círculos uns sobre os outros, desenhei pequenos retângulos com crescente opacidade. O uso de rgba () oferece um pouco mais de controle e flexibilidade, pois podemos definir o estilo de preenchimento e traçado/stroke individualmente.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  // Draw background
-  ctx.fillStyle = 'rgb(255, 221, 0)';
-  ctx.fillRect(0, 0, 150, 37.5);
-  ctx.fillStyle = 'rgb(102, 204, 0)';
-  ctx.fillRect(0, 37.5, 150, 37.5);
-  ctx.fillStyle = 'rgb(0, 153, 255)';
-  ctx.fillRect(0, 75, 150, 37.5);
-  ctx.fillStyle = 'rgb(255, 51, 0)';
-  ctx.fillRect(0, 112.5, 150, 37.5);
-
-  // Draw semi transparent rectangles
-  for (var i = 0; i < 10; i++) {
-    ctx.fillStyle = 'rgba(255, 255, 255, ' + (i + 1) / 10 + ')';
-    for (var j = 0; j < 4; j++) {
-      ctx.fillRect(5 + i * 14, 5 + j * 37.5, 14, 27.5);
-    }
-  }
-}
- - - -

{{EmbedLiveSample("An_example_using_rgba()", "180", "180", "https://mdn.mozillademos.org/files/246/Canvas_rgba.png")}}

- -

Line styles

- -

Existem várias propriedades que permitem estilizar linhas.

- -
-
{{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth = value")}}
-
Define a largura das linhas desenhadas no futuro.
-
{{domxref("CanvasRenderingContext2D.lineCap", "lineCap = type")}}
-
Define a aparência dos fins das linhas.
-
{{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin = type")}}
-
Define a aparência dos "cantos" onde as linhas se encontram.
-
{{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit = value")}}
-
Estabelece um limite na mitra quando duas linhas se juntam em um ângulo agudo, para permitir controlar a espessura da junção.
-
{{domxref("CanvasRenderingContext2D.getLineDash", "getLineDash()")}}
-
Retorna a matriz de padrão de traço de linha atual que contém um número par de números não negativos
-
{{domxref("CanvasRenderingContext2D.setLineDash", "setLineDash(segments)")}}
-
Define o padrão de traço da linha atual.
-
{{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset = value")}}
-
Especifica onde iniciar uma matriz de traços em uma linha.
-
- -

Você entenderá melhor o que eles fazem observando os exemplos abaixo.

- -

Um exemplo lineWidth

- -

A largura da linha é a espessura do traçado centralizado no caminho especificado. Em outras palavras, a área desenhada se estende até a metade da largura da linha em ambos os lados do caminho.

- -

  Como as coordenadas da tela não fazem referência direta aos pixels, deve-se tomar cuidado especial para obter linhas horizontais e verticais nítidas.

- -

No exemplo abaixo, 10 linhas retas são desenhadas com larguras de linhas crescentes. A linha na extrema esquerda tem 1,0 unidades de largura. No entanto, as linhas de espessura à esquerda e todas as outras linhas com número inteiro ímpar não aparecem nítidas, devido ao posicionamento do caminho.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  for (var i = 0; i < 10; i++) {
-    ctx.lineWidth = 1 + i;
-    ctx.beginPath();
-    ctx.moveTo(5 + i * 14, 5);
-    ctx.lineTo(5 + i * 14, 140);
-    ctx.stroke();
-  }
-}
-
- - - -

{{EmbedLiveSample("A_lineWidth_example", "180", "180", "https://mdn.mozillademos.org/files/239/Canvas_linewidth.png")}}

- -

A obtenção de linhas nítidas requer a compreensão de como os caminhos são traçados. Nas imagens abaixo, a grade representa a grade de coordenadas da tela. Os quadrados entre as linhas de grade são pixels reais na tela. Na primeira imagem da grade abaixo, um retângulo de (2,1) a (5,5) é preenchido. A área inteira entre eles (vermelho claro) cai nos limites dos pixels, portanto, o retângulo preenchido resultante terá bordas nítidas.
-

- -

Se você considerar um caminho de (3,1) a (3,5) com uma espessura de linha de 1,0, você terminará com a situação na segunda imagem. A área real a ser preenchida (azul escuro) se estende apenas até a metade dos pixels dos dois lados do caminho. Uma aproximação disso deve ser renderizada, o que significa que esses pixels são sombreados apenas parcialmente e resultam em toda a área (azul claro e azul escuro) sendo preenchida com uma cor apenas metade da escuridão da cor real do traço. É o que acontece com a linha de largura 1.0 no código de exemplo anterior.

- -

Para corrigir isso, você precisa ser muito preciso na criação do seu caminho. Sabendo que uma linha de largura 1,0 estenderá meia unidade para ambos os lados do caminho, criar o caminho de (3,5,1) a (3,5,5) resulta na situação da terceira imagem - a largura da linha 1,0 termina completamente e preenchendo com precisão uma única linha vertical de pixel.
-  

- -
-

Nota: Esteja ciente de que, no nosso exemplo de linha vertical, a posição Y ainda faz referência a uma posição de linha de grade inteira - se não tivesse, veríamos pixels com meia cobertura nos pontos de extremidade (mas observe também que esse comportamento depende do estilo lineCap atual cujo valor padrão é butt; você pode calcular traçados consistentes com coordenadas de meio pixel para linhas de largura ímpar, configurando o estilo lineCap como quadrado, para que a borda externa do traçado ao redor do ponto de extremidade seja estendida automaticamente para cobrir o pixel inteiro exatamente).

- -

Observe também que apenas os pontos de extremidade inicial e final de um caminho são afetados: se um caminho for fechado com closePath (), não haverá ponto inicial e final; em vez disso, todos os pontos de extremidade no caminho são conectados ao segmento anterior e ao próximo anexado usando a configuração atual do estilo lineJoin, cujo valor padrão é mitra, com o efeito de estender automaticamente as bordas externas dos segmentos conectados ao seu ponto de interseção. que o traçado renderizado cobrirá exatamente os pixels completos centralizados em cada ponto final se esses segmentos conectados forem horizontais e / ou verticais). Veja as próximas duas seções para demonstrações desses estilos de linha adicionais.

-
- -

Para linhas de largura uniforme, cada metade acaba sendo uma quantidade inteira de pixels, portanto, você deseja um caminho entre pixels (ou seja, (3,1) a (3,5)), em vez de no meio dos pixels .

- -

Embora seja um pouco doloroso ao trabalhar inicialmente com gráficos 2D escalonáveis, prestar atenção à grade de pixels e à posição dos caminhos garante que seus desenhos pareçam corretos, independentemente da escala ou de qualquer outra transformação envolvida. Uma linha vertical de 1,0 largura desenhada na posição correta se tornará uma linha nítida de 2 pixels quando aumentada em 2 e aparecerá na posição correta.

- -

Exemplo lineCap.

- -

A propriedade lineCap determina como os pontos finais de cada linha são desenhados. Existem três valores possíveis para essa propriedade e são: bunda, redondo e quadrado. Por padrão, essa propriedade está configurada para butt.

- -
-
butt
-
As extremidades das linhas são quadradas nos pontos finais.
-
round
-
As extremidades das linhas são arredondadas.
- arredondadas.
-
square
-
As extremidades das linhas são ajustadas ao quadrado, adicionando uma caixa com a mesma largura e metade da altura da espessura da linha.
-
- -

Neste exemplo, desenharemos três linhas, cada uma com um valor diferente para a propriedade lineCap. Também adicionei dois guias para ver as diferenças exatas entre os três. Cada uma dessas linhas começa e termina exatamente nesses guias.

- -

A linha à esquerda usa a opção de topo padrão. Você notará que está desenhado completamente alinhado com as guias. O segundo está definido para usar a opção redonda. Isso adiciona um semicírculo ao final que tem um raio com metade da largura da linha. A linha à direita usa a opção quadrada. Isso adiciona uma caixa com largura igual e metade da altura da espessura da linha.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  var lineCap = ['butt', 'round', 'square'];
-
-  // Draw guides
-  ctx.strokeStyle = '#09f';
-  ctx.beginPath();
-  ctx.moveTo(10, 10);
-  ctx.lineTo(140, 10);
-  ctx.moveTo(10, 140);
-  ctx.lineTo(140, 140);
-  ctx.stroke();
-
-  // Draw lines
-  ctx.strokeStyle = 'black';
-  for (var i = 0; i < lineCap.length; i++) {
-    ctx.lineWidth = 15;
-    ctx.lineCap = lineCap[i];
-    ctx.beginPath();
-    ctx.moveTo(25 + i * 50, 10);
-    ctx.lineTo(25 + i * 50, 140);
-    ctx.stroke();
-  }
-}
-
- - - -

{{EmbedLiveSample("A_lineCap_example", "180", "180", "https://mdn.mozillademos.org/files/236/Canvas_linecap.png")}}

- -

Um exemplo de lineJoin

- -

A propriedade lineJoin determina como dois segmentos de conexão (de linhas, arcos ou curvas) com comprimentos diferentes de zero em uma forma são unidos (segmentos degenerados com comprimentos zero, cujos pontos finais e pontos de controle especificados são exatamente na mesma posição, são ignorados) .

- -

Existem três valores possíveis para essa propriedade: round, chanfro e mitra. Por padrão, essa propriedade está configurada para mitra. Observe que a configuração lineJoin não terá efeito se os dois segmentos conectados tiverem a mesma direção, porque nenhuma área de junção será adicionada neste caso.

- -
-
round
-
Arredonda os cantos de uma forma preenchendo um setor adicional de disco centralizado no ponto final comum dos segmentos conectados. O raio desses cantos arredondados é igual à metade da largura da linha.
-
bevel
-
Preenche uma área triangular adicional entre o ponto final comum dos segmentos conectados e os cantos retangulares externos separados de cada segmento.
-
miter
-
Os segmentos conectados são unidos estendendo suas bordas externas para se conectarem em um único ponto, com o efeito de preencher uma área adicional em forma de losango. Essa configuração é efetuada pela propriedade miterLimit, explicada abaixo.
-
- -

O exemplo abaixo desenha três caminhos diferentes, demonstrando cada uma dessas três configurações de propriedade lineJoin; a saída é mostrada acima.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  var lineJoin = ['round', 'bevel', 'miter'];
-  ctx.lineWidth = 10;
-  for (var i = 0; i < lineJoin.length; i++) {
-    ctx.lineJoin = lineJoin[i];
-    ctx.beginPath();
-    ctx.moveTo(-5, 5 + i * 40);
-    ctx.lineTo(35, 45 + i * 40);
-    ctx.lineTo(75, 5 + i * 40);
-    ctx.lineTo(115, 45 + i * 40);
-    ctx.lineTo(155, 5 + i * 40);
-    ctx.stroke();
-  }
-}
-
- - - -

{{EmbedLiveSample("A_lineJoin_example", "180", "180", "https://mdn.mozillademos.org/files/237/Canvas_linejoin.png")}}

- -

Uma demonstração da propriedade miterLimit

- -

Como você viu no exemplo anterior, ao unir duas linhas com a opção de esquadria, as bordas externas das duas linhas de junção são estendidas até o ponto em que elas se encontram. Para linhas com ângulos amplos entre si, esse ponto não está longe do ponto de conexão interno. No entanto, à medida que os ângulos entre cada linha diminuem, a distância (comprimento da mitra) entre esses pontos aumenta exponencialmente.

- -

A propriedade miterLimit determina a que distância o ponto de conexão externo pode ser colocado do ponto de conexão interno. Se duas linhas excederem esse valor, uma junção de chanfro será desenhada. Observe que o comprimento máximo da esquadria é o produto da largura da linha medida no sistema de coordenadas atual, pelo valor dessa propriedade miterLimit (cujo valor padrão é 10.0 no HTML {{HTMLElement ("canvas")}}}), portanto, o O miterLimit pode ser definido independentemente da escala de exibição atual ou de quaisquer transformações afins de caminhos: apenas influencia a forma efetivamente renderizada das arestas da linha.

- -

Mais exatamente, o limite da mitra é a proporção máxima permitida do comprimento da extensão (na tela HTML, é medida entre o canto externo das arestas unidas da linha e o ponto de extremidade comum dos segmentos de conexão especificados no caminho) pela metade do espessura da linha. Pode ser definido de maneira equivalente como a proporção máxima permitida da distância entre os pontos interno e externo da junção das arestas e a largura total da linha. Em seguida, é igual ao coecante da metade do ângulo interno mínimo dos segmentos de conexão abaixo dos quais nenhuma junção de esquadria será renderizada, mas apenas uma junção de chanfro:

- - - -

Aqui está uma pequena demonstração na qual você pode definir o mitreLimit dinamicamente e ver como isso afeta as formas na tela. As linhas azuis mostram onde estão os pontos inicial e final de cada uma das linhas no padrão em zigue-zague.

- -

Se você especificar um valor de miterLimite abaixo de 4.2 nesta demonstração, nenhum dos cantos visíveis poderá ser uma extensão de mitra, mas apenas com um pequeno canal próximo às linhas azuis; com um limite máximo acima de 10, a maioria dos cantos nesta demonstração deve ser levada a uma meia-esquadria das linhas azuis e a altura está diminuindo entre os cantos da esquerda para a direita porque eles estão conectados com ângulos crescentes; com valores intermediários, os cantos do lado esquerdo ou apenas um canto próximo às linhas azuis e os cantos do lado direito com uma extensão de esquadria (também com uma altura decrescente).

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  // Clear canvas
-  ctx.clearRect(0, 0, 150, 150);
-
-  // Draw guides
-  ctx.strokeStyle = '#09f';
-  ctx.lineWidth   = 2;
-  ctx.strokeRect(-5, 50, 160, 50);
-
-  // Set line styles
-  ctx.strokeStyle = '#000';
-  ctx.lineWidth = 10;
-
-  // check input
-  if (document.getElementById('miterLimit').value.match(/\d+(\.\d+)?/)) {
-    ctx.miterLimit = parseFloat(document.getElementById('miterLimit').value);
-  } else {
-    alert('Value must be a positive number');
-  }
-
-  // Draw lines
-  ctx.beginPath();
-  ctx.moveTo(0, 100);
-  for (i = 0; i < 24 ; i++){
-    var dy = i % 2 == 0 ? 25 : -25 ;
-    ctx.lineTo(Math.pow(i, 1.5) * 2, 75 + dy);
-  }
-  ctx.stroke();
-  return false;
-}
-
- - - -

{{EmbedLiveSample("A_demo_of_the_miterLimit_property", "400", "180", "https://mdn.mozillademos.org/files/240/Canvas_miterlimit.png")}}

- -

Usando linhas tracejadas

- -

O método setLineDash e a propriedade lineDashOffset especificam o padrão de traço para as linhas. O método setLineDash aceita uma lista de números que especificam distâncias para desenhar alternadamente entre uma linha e uma lacuna. Já a propriedade lineDashOffset define a distância até onde se deve iniciar a linha.

- -

Neste exemplo, criaremos um efeito de formigas caminhando. É uma técnica de animação frequentemente usada em computação gráfica, pois ajuda o usuário a fazer uma distinção entre a borda e o plano de fundo animando a borda. Mais tarde neste tutorial, você aprenderá como fazer animações básicas.

- - - -
var ctx = document.getElementById('canvas').getContext('2d');
-var offset = 0;
-
-function draw() {
-  ctx.clearRect(0, 0, canvas.width, canvas.height);
-  ctx.setLineDash([4, 2]);
-  ctx.lineDashOffset = -offset;
-  ctx.strokeRect(10, 10, 100, 100);
-}
-
-function march() {
-  offset++;
-  if (offset > 16) {
-    offset = 0;
-  }
-  draw();
-  setTimeout(march, 20);
-}
-
-march();
- -

{{EmbedLiveSample("Using_line_dashes", "120", "120", "https://mdn.mozillademos.org/files/9853/marching-ants.png")}}

- -

Gradients

- -

Just like any normal drawing program, we can fill and stroke shapes using linear and radial gradients. We create a {{domxref("CanvasGradient")}} object by using one of the following methods. We can then assign this object to the fillStyle or strokeStyle properties.

- -
-
{{domxref("CanvasRenderingContext2D.createLinearGradient", "createLinearGradient(x1, y1, x2, y2)")}}
-
Creates a linear gradient object with a starting point of (x1, y1) and an end point of (x2, y2).
-
{{domxref("CanvasRenderingContext2D.createRadialGradient", "createRadialGradient(x1, y1, r1, x2, y2, r2)")}}
-
Creates a radial gradient. The parameters represent two circles, one with its center at (x1, y1) and a radius of r1, and the other with its center at (x2, y2) with a radius of r2.
-
- -

For example:

- -
var lineargradient = ctx.createLinearGradient(0, 0, 150, 150);
-var radialgradient = ctx.createRadialGradient(75, 75, 0, 75, 75, 100);
-
- -

Once we've created a CanvasGradient object we can assign colors to it by using the addColorStop() method.

- -
-
{{domxref("CanvasGradient.addColorStop", "gradient.addColorStop(position, color)")}}
-
Creates a new color stop on the gradient object. The position is a number between 0.0 and 1.0 and defines the relative position of the color in the gradient, and the color argument must be a string representing a CSS {{cssxref("<color>")}}, indicating the color the gradient should reach at that offset into the transition.
-
- -

You can add as many color stops to a gradient as you need. Below is a very simple linear gradient from white to black.

- -
var lineargradient = ctx.createLinearGradient(0, 0, 150, 150);
-lineargradient.addColorStop(0, 'white');
-lineargradient.addColorStop(1, 'black');
-
- -

A createLinearGradient example

- -

In this example, we'll create two different gradients. As you can see here, both the strokeStyle and fillStyle properties can accept a canvasGradient object as valid input.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  // Create gradients
-  var lingrad = ctx.createLinearGradient(0, 0, 0, 150);
-  lingrad.addColorStop(0, '#00ABEB');
-  lingrad.addColorStop(0.5, '#fff');
-  lingrad.addColorStop(0.5, '#26C000');
-  lingrad.addColorStop(1, '#fff');
-
-  var lingrad2 = ctx.createLinearGradient(0, 50, 0, 95);
-  lingrad2.addColorStop(0.5, '#000');
-  lingrad2.addColorStop(1, 'rgba(0, 0, 0, 0)');
-
-  // assign gradients to fill and stroke styles
-  ctx.fillStyle = lingrad;
-  ctx.strokeStyle = lingrad2;
-
-  // draw shapes
-  ctx.fillRect(10, 10, 130, 130);
-  ctx.strokeRect(50, 50, 50, 50);
-
-}
-
- - - -

The first is a background gradient. As you can see, we assigned two colors at the same position. You do this to make very sharp color transitions—in this case from white to green. Normally, it doesn't matter in what order you define the color stops, but in this special case, it does significantly. If you keep the assignments in the order you want them to appear, this won't be a problem.

- -

In the second gradient, we didn't assign the starting color (at position 0.0) since it wasn't strictly necessary, because it will automatically assume the color of the next color stop. Therefore, assigning the black color at position 0.5 automatically makes the gradient, from the start to this stop, black.

- -

{{EmbedLiveSample("A_createLinearGradient_example", "180", "180", "https://mdn.mozillademos.org/files/235/Canvas_lineargradient.png")}}

- -

A createRadialGradient example

- -

In this example, we'll define four different radial gradients. Because we have control over the start and closing points of the gradient, we can achieve more complex effects than we would normally have in the "classic" radial gradients we see in, for instance, Photoshop (that is, a gradient with a single center point where the gradient expands outward in a circular shape).

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  // Create gradients
-  var radgrad = ctx.createRadialGradient(45, 45, 10, 52, 50, 30);
-  radgrad.addColorStop(0, '#A7D30C');
-  radgrad.addColorStop(0.9, '#019F62');
-  radgrad.addColorStop(1, 'rgba(1, 159, 98, 0)');
-
-  var radgrad2 = ctx.createRadialGradient(105, 105, 20, 112, 120, 50);
-  radgrad2.addColorStop(0, '#FF5F98');
-  radgrad2.addColorStop(0.75, '#FF0188');
-  radgrad2.addColorStop(1, 'rgba(255, 1, 136, 0)');
-
-  var radgrad3 = ctx.createRadialGradient(95, 15, 15, 102, 20, 40);
-  radgrad3.addColorStop(0, '#00C9FF');
-  radgrad3.addColorStop(0.8, '#00B5E2');
-  radgrad3.addColorStop(1, 'rgba(0, 201, 255, 0)');
-
-  var radgrad4 = ctx.createRadialGradient(0, 150, 50, 0, 140, 90);
-  radgrad4.addColorStop(0, '#F4F201');
-  radgrad4.addColorStop(0.8, '#E4C700');
-  radgrad4.addColorStop(1, 'rgba(228, 199, 0, 0)');
-
-  // draw shapes
-  ctx.fillStyle = radgrad4;
-  ctx.fillRect(0, 0, 150, 150);
-  ctx.fillStyle = radgrad3;
-  ctx.fillRect(0, 0, 150, 150);
-  ctx.fillStyle = radgrad2;
-  ctx.fillRect(0, 0, 150, 150);
-  ctx.fillStyle = radgrad;
-  ctx.fillRect(0, 0, 150, 150);
-}
-
- - - -

In this case, we've offset the starting point slightly from the end point to achieve a spherical 3D effect. It's best to try to avoid letting the inside and outside circles overlap because this results in strange effects which are hard to predict.

- -

The last color stop in each of the four gradients uses a fully transparent color. If you want to have a nice transition from this to the previous color stop, both colors should be equal. This isn't very obvious from the code because it uses two different CSS color methods as a demonstration, but in the first gradient #019F62 = rgba(1,159,98,1).

- -

{{EmbedLiveSample("A_createRadialGradient_example", "180", "180", "https://mdn.mozillademos.org/files/244/Canvas_radialgradient.png")}}

- -

Patterns

- -

In one of the examples on the previous page, we used a series of loops to create a pattern of images. There is, however, a much simpler method: the createPattern() method.

- -
-
{{domxref("CanvasRenderingContext2D.createPattern", "createPattern(image, type)")}}
-
Creates and returns a new canvas pattern object. image is a {{domxref("CanvasImageSource")}} (that is, an {{domxref("HTMLImageElement")}}, another canvas, a {{HTMLElement("video")}} element, or the like. type is a string indicating how to use the image.
-
- -

The type specifies how to use the image in order to create the pattern, and must be one of the following string values:

- -
-
repeat
-
Tiles the image in both vertical and horizontal directions.
-
repeat-x
-
Tiles the image horizontally but not vertically.
-
repeat-y
-
Tiles the image vertically but not horizontally.
-
no-repeat
-
Doesn't tile the image. It's used only once.
-
- -

We use this method to create a {{domxref("CanvasPattern")}} object which is very similar to the gradient methods we've seen above. Once we've created a pattern, we can assign it to the fillStyle or strokeStyle properties. For example:

- -
var img = new Image();
-img.src = 'someimage.png';
-var ptrn = ctx.createPattern(img, 'repeat');
-
- -
-

Note: Like with the drawImage() method, you must make sure the image you use is loaded before calling this method or the pattern may be drawn incorrectly.

-
- -

A createPattern example

- -

In this last example, we'll create a pattern to assign to the fillStyle property. The only thing worth noting is the use of the image's onload handler. This is to make sure the image is loaded before it is assigned to the pattern.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  // create new image object to use as pattern
-  var img = new Image();
-  img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
-  img.onload = function() {
-
-    // create pattern
-    var ptrn = ctx.createPattern(img, 'repeat');
-    ctx.fillStyle = ptrn;
-    ctx.fillRect(0, 0, 150, 150);
-
-  }
-}
-
- - - -

{{EmbedLiveSample("A_createPattern_example", "180", "180", "https://mdn.mozillademos.org/files/222/Canvas_createpattern.png")}}

- -

Shadows

- -

Using shadows involves just four properties:

- -
-
{{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX = float")}}
-
Indicates the horizontal distance the shadow should extend from the object. This value isn't affected by the transformation matrix. The default is 0.
-
{{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY = float")}}
-
Indicates the vertical distance the shadow should extend from the object. This value isn't affected by the transformation matrix. The default is 0.
-
{{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur = float")}}
-
Indicates the size of the blurring effect; this value doesn't correspond to a number of pixels and is not affected by the current transformation matrix. The default value is 0.
-
{{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor = color")}}
-
A standard CSS color value indicating the color of the shadow effect; by default, it is fully-transparent black.
-
- -

The properties shadowOffsetX and shadowOffsetY indicate how far the shadow should extend from the object in the X and Y directions; these values aren't affected by the current transformation matrix. Use negative values to cause the shadow to extend up or to the left, and positive values to cause the shadow to extend down or to the right. These are both 0 by default.

- -

The shadowBlur property indicates the size of the blurring effect; this value doesn't correspond to a number of pixels and is not affected by the current transformation matrix. The default value is 0.

- -

The shadowColor property is a standard CSS color value indicating the color of the shadow effect; by default, it is fully-transparent black.

- -
-

Note: Shadows are only drawn for source-over compositing operations.

-
- -

A shadowed text example

- -

This example draws a text string with a shadowing effect.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  ctx.shadowOffsetX = 2;
-  ctx.shadowOffsetY = 2;
-  ctx.shadowBlur = 2;
-  ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
-
-  ctx.font = '20px Times New Roman';
-  ctx.fillStyle = 'Black';
-  ctx.fillText('Sample String', 5, 30);
-}
-
- - - -

{{EmbedLiveSample("A_shadowed_text_example", "180", "100", "https://mdn.mozillademos.org/files/2505/shadowed-string.png")}}

- -

We will look at the font property and fillText method in the next chapter about drawing text.

- -

Canvas fill rules

- -

When using fill (or {{domxref("CanvasRenderingContext2D.clip", "clip")}} and {{domxref("CanvasRenderingContext2D.isPointInPath", "isPointinPath")}}) you can optionally provide a fill rule algorithm by which to determine if a point is inside or outside a path and thus if it gets filled or not. This is useful when a path intersects itself or is nested.
-
- Two values are possible:

- - - -

In this example we are using the evenodd rule.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  ctx.beginPath();
-  ctx.arc(50, 50, 30, 0, Math.PI * 2, true);
-  ctx.arc(50, 50, 15, 0, Math.PI * 2, true);
-  ctx.fill('evenodd');
-}
- - - -

{{EmbedLiveSample("Canvas_fill_rules", "110", "110", "https://mdn.mozillademos.org/files/9855/fill-rule.png")}}

- -

{{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}}

diff --git a/files/pt-br/web/guide/html/canvas_tutorial/basic_animations/index.html b/files/pt-br/web/guide/html/canvas_tutorial/basic_animations/index.html deleted file mode 100644 index 125e0874a7..0000000000 --- a/files/pt-br/web/guide/html/canvas_tutorial/basic_animations/index.html +++ /dev/null @@ -1,331 +0,0 @@ ---- -title: Basic animations -slug: Web/Guide/HTML/Canvas_tutorial/Basic_animations -translation_of: Web/API/Canvas_API/Tutorial/Basic_animations ---- -

Já que estamos usando JavaScript para controlar {{HTMLElement("canvas")}} elementos, também é muito fácil criar animações interativas. Fazer animações mais complexas pode levar um tempo extra; esperamos introduzir um novo artigo para auxiliar sobre isso em breve.

- -

Provavelmente a maior limitação é que uma vez que uma forma é desenhada, ela permanece assim. Se precisarmos mover, temos que redesenhar-lá e tudo que foi desenhado antes. Demora muito tempo pra redesenhar frames complexos e a desempenho depende altamente da velocidade do computador em que está rodando.

- -

Passos para animação básica

- -

Estes são os passos que você precisa para desenhar um frame:

- -
    -
  1. Limpe o canvas
    - A menos que a forma que você vai desenhar preencha o canvas completo(por exemplo, uma imagem de fundo), você precisa limpar todas as formas que foram desenhadas anteriormente. O caminho mais fácil para fazer isso é usando o método clearRect().
    2. -
  2. Salve o estado da tela
    - Se você estiver mudando alguma configuração(como estilos, transformações, etc.) que afete o estado do canvas e você quer garantir que o estado original seja usado sempre que um quadro é desenhado, você precisa salvar esse estado original.
    3. -
  3. Desenhe formas animadas
    - A etapa em que você faz a renderização real do quadro.
    4. -
  4. Restaure o estado do canvas
    - Se você salvou o estado, restaure-o antes de desenhar um novo quadro.
    5. -
- -

Controlando uma animação

- -

Formas são desenhos na tela usando os canvas métodos diretamente ou chamando personalizadas. Em circunstancias normais, nós somente vemos esses resultados aparecerem na tela quando o script termina de ser executado. Por exemplo, não é possível fazer uma animação dentro de um loop for.

- -

Isso significa que precisamos de um jeito para executar nossas funções de desenho durante um período de tempo. Existem dois jeitos para controlar uma animação como essa.

- -

Atualizações agendadas

- -

Primeiramente há as funções {{domxref("window.setInterval()")}} e {{domxref("window.setTimeout()")}}, que podem ser usadas para chamar uma função específica durante um certo período definido de tempo.

- -
-

Nota: O método {{domxref("window.requestAnimationFrame()")}} agora é a maneira recomendada de programar animações. Vamos atualizar esse tutorial para abortar isso em breve.

-
- -
-
setInterval(função,atraso)
-
Inicia repetidamente executando a função específica pela função a cada milissegundo de atraso.
-
setTimeout(função,atraso)
-
Executa a função especificada pela função em milissegundos de atraso.
-
- -

Se você não quer nenhuma interação do usuário, é melhor usar a função setInterval() que executa repeditamente o código fornecido.

- -

Atualizar na interação do usuário

- -

O segundo método que nós podemos usar para controlar uma animação é a entrada do usuário. Se nós quiséssimos criar um jogo, nós poderiamos usar os eventos do teclado ou mouse para controlar a animação. Ao definir {{domxref("EventListener")}}s, nós pegamos qualquer interação do usuário e executamos nossas funções da animação. 

- -

Se você quer a interação do usuário, você pode usar uma versão menor ou a versão principal do nosso framework pra animação:

- -
var myAnimation = new MiniDaemon(null, animateShape, 500, Infinity);
- -

ou

- -
var myAnimation = new Daemon(null, animateShape, 500, Infinity);
- -

Nos exemplos abaixo, no entanto, usamos o método {{domxref("window.setInterval()")}} para controlar a animação. Na parte inferior dessa página há alguns links de exemplos que usam {{domxref("window.setTimeout()")}}.

- -

Um sistema solar animado

- -

Esse exemplo anima um pequeno modelo do nosso sistema solar.

- -
var sun = new Image();
-var moon = new Image();
-var earth = new Image();
-function init(){
-  sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png';
-  moon.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png';
-  earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png';
-  setInterval(draw,100);
-}
-
-function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  ctx.globalCompositeOperation = 'destination-over';
-  ctx.clearRect(0,0,300,300); // clear canvas
-
-  ctx.fillStyle = 'rgba(0,0,0,0.4)';
-  ctx.strokeStyle = 'rgba(0,153,255,0.4)';
-  ctx.save();
-  ctx.translate(150,150);
-
-  // Earth
-  var time = new Date();
-  ctx.rotate( ((2*Math.PI)/60)*time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds() );
-  ctx.translate(105,0);
-  ctx.fillRect(0,-12,50,24); // Shadow
-  ctx.drawImage(earth,-12,-12);
-
-  // Moon
-  ctx.save();
-  ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() + ((2*Math.PI)/6000)*time.getMilliseconds() );
-  ctx.translate(0,28.5);
-  ctx.drawImage(moon,-3.5,-3.5);
-  ctx.restore();
-
-  ctx.restore();
-
-  ctx.beginPath();
-  ctx.arc(150,150,105,0,Math.PI*2,false); // Earth orbit
-  ctx.stroke();
-
-  ctx.drawImage(sun,0,0,300,300);
-}
-
- - - -

{{EmbedLiveSample("An_animated_solar_system", "310", "310", "https://mdn.mozillademos.org/files/202/Canvas_animation1.png")}}

- -

Um relógio animado

- -

Esse exemplos desenha um relógio animado, mostrando sua hora atual.

- -
function init(){
-  clock();
-  setInterval(clock,1000);
-}
-
-function clock(){
-  var now = new Date();
-  var ctx = document.getElementById('canvas').getContext('2d');
-  ctx.save();
-  ctx.clearRect(0,0,150,150);
-  ctx.translate(75,75);
-  ctx.scale(0.4,0.4);
-  ctx.rotate(-Math.PI/2);
-  ctx.strokeStyle = "black";
-  ctx.fillStyle = "white";
-  ctx.lineWidth = 8;
-  ctx.lineCap = "round";
-
-  // Hour marks
-  ctx.save();
-  for (var i=0;i<12;i++){
-    ctx.beginPath();
-    ctx.rotate(Math.PI/6);
-    ctx.moveTo(100,0);
-    ctx.lineTo(120,0);
-    ctx.stroke();
-  }
-  ctx.restore();
-
-  // Minute marks
-  ctx.save();
-  ctx.lineWidth = 5;
-  for (i=0;i<60;i++){
-    if (i%5!=0) {
-      ctx.beginPath();
-      ctx.moveTo(117,0);
-      ctx.lineTo(120,0);
-      ctx.stroke();
-    }
-    ctx.rotate(Math.PI/30);
-  }
-  ctx.restore();
-
-  var sec = now.getSeconds();
-  var min = now.getMinutes();
-  var hr  = now.getHours();
-  hr = hr>=12 ? hr-12 : hr;
-
-  ctx.fillStyle = "black";
-
-  // write Hours
-  ctx.save();
-  ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec )
-  ctx.lineWidth = 14;
-  ctx.beginPath();
-  ctx.moveTo(-20,0);
-  ctx.lineTo(80,0);
-  ctx.stroke();
-  ctx.restore();
-
-  // write Minutes
-  ctx.save();
-  ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec )
-  ctx.lineWidth = 10;
-  ctx.beginPath();
-  ctx.moveTo(-28,0);
-  ctx.lineTo(112,0);
-  ctx.stroke();
-  ctx.restore();
-
-  // Write seconds
-  ctx.save();
-  ctx.rotate(sec * Math.PI/30);
-  ctx.strokeStyle = "#D40000";
-  ctx.fillStyle = "#D40000";
-  ctx.lineWidth = 6;
-  ctx.beginPath();
-  ctx.moveTo(-30,0);
-  ctx.lineTo(83,0);
-  ctx.stroke();
-  ctx.beginPath();
-  ctx.arc(0,0,10,0,Math.PI*2,true);
-  ctx.fill();
-  ctx.beginPath();
-  ctx.arc(95,0,10,0,Math.PI*2,true);
-  ctx.stroke();
-  ctx.fillStyle = "rgba(0,0,0,0)";
-  ctx.arc(0,0,3,0,Math.PI*2,true);
-  ctx.fill();
-  ctx.restore();
-
-  ctx.beginPath();
-  ctx.lineWidth = 14;
-  ctx.strokeStyle = '#325FA2';
-  ctx.arc(0,0,142,0,Math.PI*2,true);
-  ctx.stroke();
-
-  ctx.restore();
-}
- - - -

{{EmbedLiveSample("An_animated_clock", "180", "180", "https://mdn.mozillademos.org/files/203/Canvas_animation2.png")}}

- -

Um panorama  em loop

- -

Nesse exemplos, um panorama é rolado da esquerda pra direita. Nós estamos usando uma imagem do Parque Nacional de Yosemite que tiramos da Wikipedia, mas você pode usar qualquer imagem que fosse maior que a tela.

- -
var img = new Image();
-
-// User Variables - customize these to change the image being scrolled, its
-// direction, and the speed.
-
-img.src = 'https://mdn.mozillademos.org/files/4553/Capitan_Meadows,_Yosemite_National_Park.jpg';
-var CanvasXSize = 800;
-var CanvasYSize = 200;
-var speed = 30; //lower is faster
-var scale = 1.05;
-var y = -4.5; //vertical offset
-
-// Main program
-
-var dx = 0.75;
-var imgW;
-var imgH;
-var x = 0;
-var clearX;
-var clearY;
-var ctx;
-
-img.onload = function() {
-    imgW = img.width*scale;
-    imgH = img.height*scale;
-    if (imgW > CanvasXSize) { x = CanvasXSize-imgW; } // image larger than canvas
-    if (imgW > CanvasXSize) { clearX = imgW; } // image larger than canvas
-    else { clearX = CanvasXSize; }
-    if (imgH > CanvasYSize) { clearY = imgH; } // image larger than canvas
-    else { clearY = CanvasYSize; }
-    //Get Canvas Element
-    ctx = document.getElementById('canvas').getContext('2d');
-    //Set Refresh Rate
-    return setInterval(draw, speed);
-}
-
-function draw() {
-    //Clear Canvas
-    ctx.clearRect(0,0,clearX,clearY);
-    //If image is <= Canvas Size
-    if (imgW <= CanvasXSize) {
-        //reset, start from beginning
-        if (x > (CanvasXSize)) { x = 0; }
-        //draw aditional image
-        if (x > (CanvasXSize-imgW)) { ctx.drawImage(img,x-CanvasXSize+1,y,imgW,imgH); }
-    }
-    //If image is > Canvas Size
-    else {
-        //reset, start from beginning
-        if (x > (CanvasXSize)) { x = CanvasXSize-imgW; }
-        //draw aditional image
-        if (x > (CanvasXSize-imgW)) { ctx.drawImage(img,x-imgW+1,y,imgW,imgH); }
-    }
-    //draw image
-    ctx.drawImage(img,x,y,imgW,imgH);
-    //amount to move
-    x += dx;
-}
-
- -

Abaixo é o {{HTMLElement("canvas")}} em que a imagem é rolada. Note que a largura e a altura especificadas aqui devem corresponder aos valores das variáveis ​​CanvasXZSize e CanvasYSize no código JavaScript. 

- -
<canvas id="canvas" width="800" height="200"></canvas>
- -

Live sample

- -

{{EmbedLiveSample("A_looping_panorama", "830", "230")}}

- -

Outros exemplos

- -
-
Gartic
-
Jogo de desenho para multiplayers.
-
Canvascape
-
Um jogo de aventura 3D (tiro em primeira pessoa).
-
A basic ray-caster
-
Um bom exemplo de como fazer animações usando os controles do teclado.
-
canvas adventure
-
Outro bom exemplo que usa controles de teclado.
-
An interactive Blob
-
Divirta-se com Blob.
-
Flying through a starfield
-
Voe através de estrelas, círculos ou quadrados.
-
iGrapher
-
Um exemplo que ilustra os dados do mercado de ações.
-
- -

Veja também

- - - -

{{PreviousNext("Web/Guide/HTML/Canvas_tutorial/Compositing", "Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas")}}

diff --git a/files/pt-br/web/guide/html/canvas_tutorial/compositing/exemplo/index.html b/files/pt-br/web/guide/html/canvas_tutorial/compositing/exemplo/index.html deleted file mode 100644 index 87de5aa19d..0000000000 --- a/files/pt-br/web/guide/html/canvas_tutorial/compositing/exemplo/index.html +++ /dev/null @@ -1,294 +0,0 @@ ---- -title: Exemplo de Composição -slug: Web/Guide/HTML/Canvas_tutorial/Compositing/Exemplo -tags: - - Canvas - - Example - - HTML5 - - Tutorial -translation_of: Web/API/Canvas_API/Tutorial/Compositing/Example ---- -
{{CanvasSidebar}}
- -

Esse exemplo demonstra várias operações de composição. A saída se parece assim:

- -

{{ EmbedLiveSample('Exemplo_de_composição', '', '7240px', '', 'Web/Guide/HTML/Canvas_tutorial/Compositing/Exemplo') }}

- -

Exemplo de composição

- -

Este código configura os valores globais usados pelo restante do programa.

- -
var canvas1 = document.createElement("canvas");
-var canvas2 = document.createElement("canvas");
-var gco = [ 'Source-over','Source-in','Source-out','Source-atop',
-            'Destination-over','Destination-in','Destination-out','Destination-atop',
-            'Lighter', 'Copy','XOR', 'Multiply', 'Screen', 'Overlay', 'Darken',
-            'Lighten', 'Color-dodge', 'Color-burn', 'Hard-light', 'Soft-light',
-            'Difference', 'Exclusion', 'HUE', 'Saturation', 'Color', 'Luminosity'
-          ].reverse();
-var gcoText = [
-'Essa é a configuração padrão e desenha novas formas sobre o conteúdo da tela (canvas) existente.',
-'A nova forma é desenhada apenas onde a nova forma e a tela (canvas) de destino se sobrepõem. Todo o resto é transparente. ',
-'A nova forma é desenhada onde ela não sobrepõe o conteúdo da tela (canvas) existente.',
-'A nova forma é somente desenahda onde ela sobrepõe o conteúdo da tela (canvas) existente.',
-'Novas formas são desenhadas por trás do conteúdo da tela (canvas) existente.',
-'O conteúdo da tela (canvas) existente é mantido onde ambos, a nova forma e o conteúdo da tela (canvas) existente, se sobrepõe. Todo o resto é transparente.',
-'O conteúdo existente é mantido onde ele não sobrepõe a nova forma.',
-'A tela (canvas) existente só é mantida onde ela sobrepõe a nova forma. A nova forma é desenahda por trás do conteúdo canvas.',
-'Onde ambas formas se sebrepõem a cor é determinada adicionando seus respectivos valores de cores.',
-'Somente a nova forma é mostrada.',
-'Formas são feitas transparentes onde ambos se sobrepõem e todo o resto é desenhado normalmente.',
-'Os pixels da camada superior são multiplicados pelo pixel correspondente da camada inferior. Uma imagem mais escura é o resultado. ',
-'Os pixels são invertidos, multiplicados e invertidos novamente. Uma imagem mais clara é o resultado (oposto de multiplicar)',
-'Uma combinação de multiplicação e tela. As partes escuras na camada base tornam-se mais escuras e as partes claras tornam-se mais claras.',
-'Mantêm os pixels mais escuro de ambas camadas.',
-'Mantêm os pixels mais claro de ambas camadas.',
-'Divide a camada inferior pela camada superior invertida.',
-'Divide a camada inferior invertida pela camada superior e, em seguida, inverte o resultado.',
-'Uma combinação de multiplicação e tela como sobreposição, mas com a camada superior e inferior trocada.',
-'Uma versão mais suave da luz. Preto ou branco puro não resulta em preto ou branco puro.',
-'Subtrai a camada inferior da camada superior ou vice-versa para obter sempre um valor positivo.',
-'Como diferença, mas com menor contraste.',
-'Preserva o luma e o croma da camada inferior, enquanto adota a tonalidade da camada superior.',
-'Preserva o luma e a tonalidade da camada inferior, enquanto adota o croma da camada superior.',
-'Preserva a luma da camada inferior, enquanto adota a tonalidade e o croma da camada superior.',
-'Preserva a tonalidade e o croma da camada inferior, enquanto adota a luma da camada superior.'
-          ].reverse();
-var width = 320;
-var height = 340;
- -

Programa principal

- -

Quando a página é carregada, esse código é executado para configurar e executar o exemplo:

- -
window.onload = function() {
-    // lum em sRGB
-    var lum = {
-        r: 0.33,
-        g: 0.33,
-        b: 0.33
-    };
-    // redimensiona canvas
-    canvas1.width = width;
-    canvas1.height = height;
-    canvas2.width = width;
-    canvas2.height = height;
-    lightMix();
-    colorSphere();
-    runComposite();
-    return;
-};
-
- -

E esse código, runComposite (), manipula a maior parte do trabalho, contando com várias funções utilitárias para fazer as partes difíceis.

- -
function createCanvas() {
-    var canvas = document.createElement("canvas");
-    canvas.style.background = "url("+op_8x8.data+")";
-    canvas.style.border = "1px solid #000";
-    canvas.style.margin = "5px";
-    canvas.width = width/2;
-    canvas.height = height/2;
-    return canvas;
-}
-
-function runComposite() {
-    var dl = document.createElement("dl");
-    document.body.appendChild(dl);
-    while(gco.length) {
-        var pop = gco.pop();
-        var dt = document.createElement("dt");
-        dt.textContent = pop;
-        dl.appendChild(dt);
-        var dd = document.createElement("dd");
-        var p = document.createElement("p");
-        p.textContent = gcoText.pop();
-        dd.appendChild(p);
-
-        var canvasToDrawOn = createCanvas();
-        var canvasToDrawFrom = createCanvas();
-        var canvasToDrawResult = createCanvas();
-
-        var ctx = canvasToDrawResult.getContext('2d');
-        ctx.clearRect(0, 0, width, height)
-        ctx.save();
-        ctx.drawImage(canvas1, 0, 0, width/2, height/2);
-        ctx.globalCompositeOperation = pop;
-        ctx.drawImage(canvas2, 0, 0, width/2, height/2);
-        ctx.globalCompositeOperation = "source-over";
-        ctx.fillStyle = "rgba(0,0,0,0.8)";
-        ctx.fillRect(0, height/2 - 20, width/2, 20);
-        ctx.fillStyle = "#FFF";
-        ctx.font = "14px arial";
-        ctx.fillText(pop, 5, height/2 - 5);
-        ctx.restore();
-
-        var ctx = canvasToDrawOn.getContext('2d');
-        ctx.clearRect(0, 0, width, height)
-        ctx.save();
-        ctx.drawImage(canvas1, 0, 0, width/2, height/2);
-        ctx.fillStyle = "rgba(0,0,0,0.8)";
-        ctx.fillRect(0, height/2 - 20, width/2, 20);
-        ctx.fillStyle = "#FFF";
-        ctx.font = "14px arial";
-        ctx.fillText('Conteúdo existente', 5, height/2 - 5);
-        ctx.restore();
-
-        var ctx = canvasToDrawFrom.getContext('2d');
-        ctx.clearRect(0, 0, width, height)
-        ctx.save();
-        ctx.drawImage(canvas2, 0, 0, width/2, height/2);
-        ctx.fillStyle = "rgba(0,0,0,0.8)";
-        ctx.fillRect(0, height/2 - 20, width/2, 20);
-        ctx.fillStyle = "#FFF";
-        ctx.font = "14px arial";
-        ctx.fillText('Novo conteúdo', 5, height/2 - 5);
-        ctx.restore();
-
-        dd.appendChild(canvasToDrawOn);
-        dd.appendChild(canvasToDrawFrom);
-        dd.appendChild(canvasToDrawResult);
-
-        dl.appendChild(dd);
-    }
-};
-
- -

Funções Utilitárias

- -

O programa depende de várias funções utilitárias.

- -
var lightMix = function() {
-    var ctx = canvas2.getContext("2d");
-    ctx.save();
-    ctx.globalCompositeOperation = "lighter";
-    ctx.beginPath();
-    ctx.fillStyle = "rgba(255,0,0,1)";
-    ctx.arc(100, 200, 100, Math.PI*2, 0, false);
-    ctx.fill()
-    ctx.beginPath();
-    ctx.fillStyle = "rgba(0,0,255,1)";
-    ctx.arc(220, 200, 100, Math.PI*2, 0, false);
-    ctx.fill()
-    ctx.beginPath();
-    ctx.fillStyle = "rgba(0,255,0,1)";
-    ctx.arc(160, 100, 100, Math.PI*2, 0, false);
-    ctx.fill();
-    ctx.restore();
-    ctx.beginPath();
-    ctx.fillStyle = "#f00";
-    ctx.fillRect(0,0,30,30)
-    ctx.fill();
-};
-
- -
var colorSphere = function(element) {
-    var ctx = canvas1.getContext("2d");
-    var width = 360;
-    var halfWidth = width / 2;
-    var rotate = (1 / 360) * Math.PI * 2; // per degree
-    var offset = 0; // scrollbar offset
-    var oleft = -20;
-    var otop = -20;
-    for (var n = 0; n <= 359; n ++) {
-        var gradient = ctx.createLinearGradient(oleft + halfWidth, otop, oleft + halfWidth, otop + halfWidth);
-        var color = Color.HSV_RGB({ H: (n + 300) % 360, S: 100, V: 100 });
-        gradient.addColorStop(0, "rgba(0,0,0,0)");
-        gradient.addColorStop(0.7, "rgba("+color.R+","+color.G+","+color.B+",1)");
-        gradient.addColorStop(1, "rgba(255,255,255,1)");
-        ctx.beginPath();
-        ctx.moveTo(oleft + halfWidth, otop);
-        ctx.lineTo(oleft + halfWidth, otop + halfWidth);
-        ctx.lineTo(oleft + halfWidth + 6, otop);
-        ctx.fillStyle = gradient;
-        ctx.fill();
-        ctx.translate(oleft + halfWidth, otop + halfWidth);
-        ctx.rotate(rotate);
-        ctx.translate(-(oleft + halfWidth), -(otop + halfWidth));
-    }
-    ctx.beginPath();
-    ctx.fillStyle = "#00f";
-    ctx.fillRect(15,15,30,30)
-    ctx.fill();
-    return ctx.canvas;
-};
-
- -
// HSV (1978) = H: Hue (tom)
-//              S: Saturation (Saturação)
-//              V: Value (Valor)
-Color = {};
-Color.HSV_RGB = function (o) {
-    var H = o.H / 360,
-        S = o.S / 100,
-        V = o.V / 100,
-        R, G, B;
-    var A, B, C, D;
-    if (S == 0) {
-        R = G = B = Math.round(V * 255);
-    } else {
-        if (H >= 1) H = 0;
-        H = 6 * H;
-        D = H - Math.floor(H);
-        A = Math.round(255 * V * (1 - S));
-        B = Math.round(255 * V * (1 - (S * D)));
-        C = Math.round(255 * V * (1 - (S * (1 - D))));
-        V = Math.round(255 * V);
-        switch (Math.floor(H)) {
-            case 0:
-                R = V;
-                G = C;
-                B = A;
-                break;
-            case 1:
-                R = B;
-                G = V;
-                B = A;
-                break;
-            case 2:
-                R = A;
-                G = V;
-                B = C;
-                break;
-            case 3:
-                R = A;
-                G = B;
-                B = V;
-                break;
-            case 4:
-                R = C;
-                G = A;
-                B = V;
-                break;
-            case 5:
-                R = V;
-                G = A;
-                B = B;
-                break;
-        }
-    }
-    return {
-        R: R,
-        G: G,
-        B: B
-    };
-};
-
-var createInterlace = function (size, color1, color2) {
-    var proto = document.createElement("canvas").getContext("2d");
-    proto.canvas.width = size * 2;
-    proto.canvas.height = size * 2;
-    proto.fillStyle = color1; // top-left
-    proto.fillRect(0, 0, size, size);
-    proto.fillStyle = color2; // top-right
-    proto.fillRect(size, 0, size, size);
-    proto.fillStyle = color2; // bottom-left
-    proto.fillRect(0, size, size, size);
-    proto.fillStyle = color1; // bottom-right
-    proto.fillRect(size, size, size, size);
-    var pattern = proto.createPattern(proto.canvas, "repeat");
-    pattern.data = proto.canvas.toDataURL();
-    return pattern;
-};
-
-var op_8x8 = createInterlace(8, "#FFF", "#eee");
diff --git a/files/pt-br/web/guide/html/canvas_tutorial/compositing/index.html b/files/pt-br/web/guide/html/canvas_tutorial/compositing/index.html deleted file mode 100644 index 6d9ff5c33d..0000000000 --- a/files/pt-br/web/guide/html/canvas_tutorial/compositing/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: Compositing and clipping -slug: Web/Guide/HTML/Canvas_tutorial/Compositing -translation_of: Web/API/Canvas_API/Tutorial/Compositing ---- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Transformations", "Web/API/Canvas_API/Tutorial/Basic_animations")}}
- -
-

Em todo os nossos exemplos prévios, formas estavam sempre desenhadas uma em cima das outras. Este é mais do que adequado para a maioria das situações, mas é limita a ordem no qual a composição das formas são construídas.

- -

Nós podemos, no entanto, mudar este comportamento por configurar a propriedade globalCompositeOperation. Além disto, a propriedade clipe permite-nos esconder indesejáveis partes da forma.

-
- -

globalCompositeOperation

- -

Nós podemos somente desenhar novas formas atrás das existentes formas mas nós podemos também usar isto para mascarar certas áreas, limpar seções do canvas(não limitado para retângulos como o {{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}} métodos faz) e mais.

- -
-
{{domxref("CanvasRenderingContext2D.globalCompositeOperation", "globalCompositeOperation = type")}}
-
Este conjunto de operações compostas para aplicar quando desenha novas formas, onde type é uma string identificando quais das 12 operações compostas usar.
-
- -

Veja os seguintes exemplos de composição para o código dos seguintes exemplos.

- -

{{ EmbedLiveSample('Exemplo_de_composição', '', '', '', 'Web/Guide/HTML/Canvas_tutorial/Compositing/Exemplo') }}

- -

Caminhos de recorte (Clipping path)

- -

Um caminho de recorte (Clipping path) é como uma forma normal canvas mas isto age como uma máscara para esconder indesejáveis partes de formas. Isto é visualizado na imagem na direita. A forma da estrela vermelha é nosso caminho de recorte. Tudo que cai do lado de fora deste caminho não sai desenhado no canvas.

- -

Se nós compararmos caminho de recorte para a propriedade globalCompositeOperation nós temos visto acima, nós veremos dois modelos de composição que alcança mais ou menos o mesmo efeito no source-in e source-atop. A mais importante diferença entre os dois é que o caminho de recorte nunca desenha algo na tela e o caminho de recorte nunca afeta por adicionar novas formas. Isto faz o caminho do recorte ideal para desenhar múltiplos na área restrita.

- -

No capítulo sobre formas de desenho (drawing shapes) eu somente mencionei os métodos stroke() e fill(), mas há um método que nós podemos usar com caminhos chamado clip().

- -
-
{{domxref("CanvasRenderingContext2D.clip", "clip()")}}
-
Volta o caminho atualmente sendo construído no caminho de recorte atual.
-
- -

Você usou clip() em vez de closePath() para fechar um caminho e voltar para dentro de um caminho de recorte em vez de contornar (stroking) ou completar (filling) o caminho.

- -

Por padrão o elemento {{HTMLElement("canvas")}} tem um caminho de recorte que é exatamente o mesmo tamanho do canvas em si. Em outras palavras, nenhum recorte ocorreu.

- -

Um exemplo do recorte

- -

Neste exemplo, Nós usaremos um recorte circular para restringir o desenho do conjunto de inícios randômicos para uma região particular

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  ctx.fillRect(0, 0, 150, 150);
-  ctx.translate(75, 75);
-
-  // Create a circular clipping path
-  ctx.beginPath();
-  ctx.arc(0, 0, 60, 0, Math.PI * 2, true);
-  ctx.clip();
-
-  // draw background
-  var lingrad = ctx.createLinearGradient(0, -75, 0, 75);
-  lingrad.addColorStop(0, '#232256');
-  lingrad.addColorStop(1, '#143778');
-
-  ctx.fillStyle = lingrad;
-  ctx.fillRect(-75, -75, 150, 150);
-
-  // draw stars
-  for (var j = 1; j < 50; j++) {
-    ctx.save();
-    ctx.fillStyle = '#fff';
-    ctx.translate(75 - Math.floor(Math.random() * 150),
-                  75 - Math.floor(Math.random() * 150));
-    drawStar(ctx, Math.floor(Math.random() * 4) + 2);
-    ctx.restore();
-  }
-
-}
-
-function drawStar(ctx, r) {
-  ctx.save();
-  ctx.beginPath();
-  ctx.moveTo(r, 0);
-  for (var i = 0; i < 9; i++) {
-    ctx.rotate(Math.PI / 5);
-    if (i % 2 === 0) {
-      ctx.lineTo((r / 0.525731) * 0.200811, 0);
-    } else {
-      ctx.lineTo(r, 0);
-    }
-  }
-  ctx.closePath();
-  ctx.fill();
-  ctx.restore();
-}
-
- - - -

Nas primeiras linhas de código, nós desenhamos um retângulo negro do tamanho do canvas como um pano de fundo, então traduzido da origem para o centro. Próximo, nós criamos o recorte circular do caminho recortado para desenhar um arco e chamá-lo clip(). Caminho de recortes são também parte do canvas com estado salvo. Se nós procuramos guardar o caminho do recorte original nós podemos ter salvo o estado do canvas antes de criar mais um.

- -

Tudo que for desenhado depois de criado o caminho de recorte somente aparecerá dentro daquele caminho. Você pode ver isto claramente no gradiente linear que está desenhado adiante. Depois deste conjunto de de 50 randomicamente posicionadas e escaladas estrelas for desenhada. Usando a função customizada drawStar(). De novo as estrelas somente aparecerão dentro do caminho de recorte definido.

- -

Um exemplo de recorte:

- -

- -

{{EmbedLiveSample("A_clip_example", "180", "180", "https://mdn.mozillademos.org/files/208/Canvas_clip.png")}}

- -

{{PreviousNext("Web/API/Canvas_API/Tutorial/Transformations", "Web/API/Canvas_API/Tutorial/Basic_animations")}}

diff --git "a/files/pt-br/web/guide/html/canvas_tutorial/conclus\303\243o/index.html" "b/files/pt-br/web/guide/html/canvas_tutorial/conclus\303\243o/index.html" deleted file mode 100644 index 9cd393b652..0000000000 --- "a/files/pt-br/web/guide/html/canvas_tutorial/conclus\303\243o/index.html" +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: Conclusão -slug: Web/Guide/HTML/Canvas_tutorial/Conclusão -translation_of: Web/API/Canvas_API/Tutorial/Finale ---- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Optimizing_canvas")}}
- -
-

Parabéns! Você terminou o Canvas tutorial! Este conhecimento ajudará você a fazer ótimos gráficos 2D na web.

-
- -

Mais exemplos e tutoriais

- -

Há uma variedade de demonstrações e mais explicações sobre canvas nesses sites:

- -
-
Codepen.io
-
Front End Developer Playground & Code Editor no navegador.
-
HTML5CanvasTutorials
-
Exemplos para a maioria das APIs canvas.
-
31 days of Canvas tutorials
-
Uma ótima fundação para codificação visual em JavaScript .
-
Game development
-
O jogo é uma das atividades de computador mais populares. Novas tecnologias estão chegando constantemente para possibilitar o desenvolvimento de jogos melhores e mais poderosos que podem ser executados em qualquer navegador da Web compatível com os padrões.
-
- -

Outras Web APIs

- -

Essas APIs podem ser úteis, quando trabalhando mais com canvas e gráficos:

- -
-
WebGL
-
API para renderização interativa de gráficos 3D.
-
SVG
-
Scalable Vector Graphics permitem que você descreva imagens como conjuntos de vetores (linhas) e formas, a fim de permitir que eles sejam redimensionados sem problemas, independentemente do tamanho em que são desenhados.
-
Web Audio
-
A Web Audio API fornece um sistema poderoso e versátil para controlar o áudio na Web, permitindo que os desenvolvedores escolham fontes de áudio, adicionem efeitos ao áudio, criem visualizações de áudio, apliquem efeitos espaciais (como panning) e muito mais.
-
- -

Questions

- -
-
Stackoverflow
-
Perguntas marcadas como "canvas".
-
Comentários sobre esse tutorial – A comunidade MDN de documentação
-
Se você tiver algum comentário sobre este tutorial ou quiser nos agradecer, fique à vontade para entrar em contato conosco!
-
- -

{{PreviousNext("Web/API/Canvas_API/Tutorial/Optimizing_canvas")}}

diff --git a/files/pt-br/web/guide/html/canvas_tutorial/drawing_shapes/index.html b/files/pt-br/web/guide/html/canvas_tutorial/drawing_shapes/index.html deleted file mode 100644 index f54fca780e..0000000000 --- a/files/pt-br/web/guide/html/canvas_tutorial/drawing_shapes/index.html +++ /dev/null @@ -1,581 +0,0 @@ ---- -title: Desenhando formas com canvas -slug: Web/Guide/HTML/Canvas_tutorial/Drawing_shapes -tags: - - Canvas - - Gráficos(2) - - HTML - - HTML Canvas - - HTML5 - - Intermediário - - Tutorial -translation_of: Web/API/Canvas_API/Tutorial/Drawing_shapes ---- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_usage", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}}
- -
-

Agora que criamos nosso ambiente em canvas, podemos entrar nos detalhes de como desenhar no canvas. No final deste artigo, você terá aprendido a desenhar retângulos, triângulos, linhas, arcos e curvas, proporcionando familiaridade com algumas das formas básicas. Trabalhar com caminhos (shapes) é essencial ao desenhar objetos na tela e veremos como isso pode ser feito.

-
- -

A grade

- -

Antes que possamos começar a desenhar, precisamos falar sobre a grade de tela ou espaço de coordenadas. O modelo HTML na página anterior tinha um elemento canvas de 150 pixels de largura e 150 pixels de altura. À direita, você verá este canvas com a grade padrão sobreposta. Normalmente 1 unidade na grade corresponde a um pixel na tela. A origem desta grade está posicionada no canto superior esquerdo (coordenadas (0,0)). Todos os elementos são colocados em relação a esta origem. Assim, a posição do canto superior esquerdo do quadrado azul, se torna x pixels dos pixels da esquerda e y a partir do topo (coordenadas (x,y)). Mais tarde nesse tutorial vamos ver como podemos traduzir a origem para uma posição diferente, girar a grade e até mesmo escaloná-la. Por enquanto vamos ficar com o padrão.

- -

Desenhando retângulos

- -

Diferente do {{Glossary("SVG")}} , o {{HTMLElement("canvas")}} suporta somente formas primitivas: retângulos. Todas as outras formas são criadas a partir da combinação de um ou mais caminhos (paths), lista de pontos conectados por uma linha. Felizmente, temos uma variedade de funções de desenho que tornam possíveis criar formas muito complexas.

- -

Primeiramente vamos olhar o retângulo. Aqui está listado três funções para desenhar retângulos pelo canvas:

- -
-
{{domxref("CanvasRenderingContext2D.fillRect", "fillRect(x, y, width, height)")}}
-
Desenha um retângulo preenchido.
-
{{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect(x, y, width, height)")}}
-
Desenha a borda do retângulo.
-
{{domxref("CanvasRenderingContext2D.clearRect", "clearRect(x, y, width, height)")}}
-
Limpa um retângulo específico, tornando-o totalmente transparente.
-
- -

Cada umas das funções recebem os mesmos parâmetros. x e y determinam a posição no canvas (em relação a origem) no canto superior esquerdo do retângulo. O width (largura) e o height (altura) definem o tamanho do retângulo.

- -

Abaixo esta listado a função draw() da página anterior, porém utilizando as três funções.

- -

Exemplo de forma retangular

- - - -
function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext) {
-    var ctx = canvas.getContext('2d');
-
-    ctx.fillRect(25, 25, 100, 100);
-    ctx.clearRect(45, 45, 60, 60);
-    ctx.strokeRect(50, 50, 50, 50);
-  }
-}
- -

O resultado desse exemplo é mostrado abaixo.

- -

{{EmbedLiveSample('Exemplo_de_forma_retangular', 160, 160, "https://mdn.mozillademos.org/files/245/Canvas_rect.png")}}

- -

A função fillRect() desenha um grande quadrado preto de 100 pixels. A função clearRect() por sua vez apaga um quadrado de 60x60 pixels a partir do centro, por fim, a função strokeRect() é chamada para criar uma borda de 50x50 pixels em volta do quadrado apagado.

- -

Posteriormente veremos duas alternativas à função clearRect(), nós também aprenderemos como alterar a cor e o estilo das linhas nas camadas renderizadas.

- -

Ao contrário das funções de paths que veremos na próxima seção, todas as três funções de retângulo desenham imediatamente no canvas.

- -

Desenhando caminhos/regiões (paths)

- -

Para criar uma camada usando caminhos (regiões ou paths) é necessário alguns passos extras. Primeiro, cria-se a região de desenho. Depois usa-se comandos de desenho para desenhar nesta região. Por fim, você limita a região (path). Uma vez que a região de desenho está criada, você pode traçar ou preencher o caminho para que seja renderizado. Aqui estão as funções utilizadas para isso:

- -
-
{{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}}
-
Cria um novo path. Uma vez criado, futuros comandos de desenho são direcionados do path atual para a construção de um novo path no canvas.
-
- -
-
Métodos de Caminhos (Path)
-
Métodos para manipuliar diferentes paths para objetos.
-
- -
-
{{domxref("CanvasRenderingContext2D.closePath", "closePath()")}}
-
Finaliza o path para futuros comandos de desenho, fazendo com que voltem a ser direcionados ao contexto.
-
{{domxref("CanvasRenderingContext2D.stroke", "stroke()")}}
-
Desenha uma borda na camada.
-
{{domxref("CanvasRenderingContext2D.fill", "fill()")}}
-
Desenha uma forma sólida através de preenchimento.
-
- -

O primeiro passo para criar um caminho é chamar o beginPath(). Internamente, caminhos são armazenados como uma lista de sub-caminhos (linhas, arcos, etc.) que juntos formam uma forma (shape). Sempre que esse método é chamado, a lista é redefinida e podemos começar a desenhar novas formas.

- -
Nota: Quando o caminho atual está vazio, assim como imediatamente depois de chamar beginPath(), ou em uma tela recém-criada, o primeiro comando de construção de caminho é sempre tratado como um moveTo(), independentemente do que ele seja realmente. Por essa razão, você quase sempre vai precisar definir especificamente sua posição inicial após redefinir um caminho.
- -

A segunda etapa é chamar os métodos que realmente especificam os caminhos a serem desenhados. Vamos ver isso em breve.

- -


- O terceiro, e um passo opcional, é chamar closePath(). Este método tenta fechar a forma desenhando uma linha reta do ponto atual para o início. Se a forma (shape) já foi fechada ou existe apenas um ponto na lista, esta função não faz nada.

- -
Nota: Quando você chama fill(), todas as formas abertas são fechadas automaticamente, assim você não precisa chamar closePath(). Isso não acontece quando você chamar stroke().
- -

Desenhando um triângulo

- -

Por exemplo, o código para desenhar um triângulo seria algo parecido com isto:

- - - -
function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext){
-    var ctx = canvas.getContext('2d');
-
-    ctx.beginPath();
-    ctx.moveTo(75,50);
-    ctx.lineTo(100,75);
-    ctx.lineTo(100,25);
-    ctx.fill();
-  }
-}
-
- -

O resultado se parece com isso:

- -

{{EmbedLiveSample('Desenhando_um_triângulo', 160, 160, "https://mdn.mozillademos.org/files/9847/triangle.png")}}

- -

Desenhando

- -

Uma função muito útil, que na verdade não desenha nada, mas torna-se parte da lista de caminhos descritos acima, é a função moveTo(). Você provavelmente pode imaginar melhor isso como se fosse o levantar uma caneta ou lápis de um ponto em um pedaço de papel e colocá-lo no próximo ponto.

- -
-
{{domxref("CanvasRenderingContext2D.moveTo", "moveTo(x, y)")}}
-
Move a caneta (pen) para as coordenadas especificadas por x e y.
-
- -

Quando o canvas é inicializado ou beginPath() é chamado, você normalmente vai querer usar a função moveTo() para colocar o ponto inicial em outro lugar. Poderíamos também usar moveTo() para desenhar caminhos não conectados. Dê uma olhada no rosto sorridente abaixo. Eu marquei os lugares onde eu usei o método moveTo() (as linhas vermelhas).

- -

Caso queira tentar fazer isso, você pode usar o snippet de código abaixo. Basta colá-lo na função draw() que vimos anteriormente.

- - - -
function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext) {
-    var ctx = canvas.getContext('2d');
-
-    ctx.beginPath();
-    ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // Círculo exterior
-    ctx.moveTo(110, 75);
-    ctx.arc(75, 75, 35, 0, Math.PI, false);  // Boca (sentido horário)
-    ctx.moveTo(65, 65);
-    ctx.arc(60, 65, 5, 0, Math.PI * 2, true);  // Olho esquerdo
-    ctx.moveTo(95, 65);
-    ctx.arc(90, 65, 5, 0, Math.PI * 2, true);  // Olho direito
-    ctx.stroke();
-  }
-}
-
- -

O resultado aparece como:

- -

{{EmbedLiveSample("Desenhando", 160, 160, "https://mdn.mozillademos.org/files/252/Canvas_smiley.png")}}

- -

Se você não gosta de ver linhas conectadas, você pode remover as linhas que chamam a função moveTo().

- -
-

Nota: Para aprender mais sobre a função arc(), veja sobre {{anch("Arcos")}}.

-
- -

Linhas

- -

Para desenhar linhas retas, use o método lineTo().

- -
-
{{domxref("CanvasRenderingContext2D.lineTo", "lineTo(x, y)")}}
-
Desenha uma linha do ponto atual a até a posição especificada por x e y.
-
- -

Esse método recebe dois argumentos, x e y, que são as coordenadas do ponto final da linha. O ponto inicial é dependente de caminhos previamente desenhados, onde o ponto final do caminho anterior é o ponto inicial para o seguinte, e assim por diante. O ponto inicial também pode ser alterado usando o método moveTo().
-
- O exemplo abaixo desenha dois triângulos, um preenchido e um delineado.

- - - -
function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext){
-    var ctx = canvas.getContext('2d');
-
-    // Filled triangle
-    ctx.beginPath();
-    ctx.moveTo(25,25);
-    ctx.lineTo(105,25);
-    ctx.lineTo(25,105);
-    ctx.fill();
-
-    // Stroked triangle
-    ctx.beginPath();
-    ctx.moveTo(125,125);
-    ctx.lineTo(125,45);
-    ctx.lineTo(45,125);
-    ctx.closePath();
-    ctx.stroke();
-  }
-}
-
- -

Isso começa chamando o método beginPath() para iniciar um novo shape path. Em seguida, usamos o método moveTo() para mover o ponto inicial para a posição desejada. Logo abaixo, duas linhas, que compõem os dois lados do triângulo, são desenhadas.

- -

{{EmbedLiveSample("Linhas", 160, 160, "https://mdn.mozillademos.org/files/238/Canvas_lineTo.png")}}

- -

Você notará a diferença entre o triângulo preenchido (filled) e não prenchido (stroked). Isto ocorre, como mencionado acima, porque as formas são automaticamente fechadas quando um caminho é preenchido, mas não quando são não preenchidos. Se deixássemos de fora o closePath() para os triângulos não preenchidos, apenas duas linhas teriam sido desenhadas, não um triângulo completo.

- -

Arcos

- -

Para desenhar arcos, nós usamos os métodos arc() ou arcTo().

- -
-
{{domxref("CanvasRenderingContext2D.arc", "arc(x, y, radius, startAngle, endAngle, anticlockwise)")}}
-
Desenha um arco centralizado na posição (x, y) com um raio r iniciando em startAngle e terminando em endAngle apontando na direção indicada pelo sentido anti-horário (padronizando para o sentido horário).
-
{{domxref("CanvasRenderingContext2D.arcTo", "arcTo(x1, y1, x2, y2, radius)")}}
-
Desenha um arco com os pontos de controle e raio, conectados ao ponto anterior por uma linha reta.
-
- -

Vamos dar uma olhada mais detalhada sobre o método arc, que tem seis parâmetros: x e y são as coordenadas do centro do círculo em que o arco deve ser desenhado. radius é o raio. Os parâmetros startAngle e endAngle definem os pontos inicial e final do arco em radianos, ao longo da curva do círculo. Estes são medidos a partir do eixo x. O parâmetro anticlockwise é um valor Booleano que, quando verdadeiro, desenha o arco no sentido anti-horário; Caso contrário, o arco é desenhado no sentido horário.

- -
-

Nota: Os ângulos na função arc são medidos em radianos, não em graus. Para converter graus em radianos você pode usar a seguinte expressão JavaScript: radians = (Math.PI/180)*degrees.

-
- -

O exemplo a seguir é um pouco mais complexo do que os que vimos anteriormente. Ele desenha 12 arcos diferentes, todos com diferentes ângulos e preenchimentos.

- -

Os dois laços for são para iterar através das linhas e colunas de arcos. Para cada arco, é criado um novo caminho chamando beginPath(). No código, cada um dos parâmetros para o arco estão em uma variável somente para demonstração, assim você não precisa fazer isso na vida real.

- -

As coordenadas x e y devem ser suficientemente claras. O parâmetros radius e startAngle são fixos. O endAngle começa em 180 graus (metade de um círculo) na primeira coluna e aumenta gradualmente em 90 graus, culminando em um círculo completo na última coluna.

- -

A manipulação do parâmetro clockwise faz com que a primeira e terceira linhas sejam desenhadas como arcos no sentido horário, e a segunda e quarta linhas como arcos no sentido anti-horário. Finalmente, a instrução if faz com que a metade superior dos arcos não sejam preenchidos e a metade inferior dos arcos sejam.

- -
-

Note: Este exemplo requer um canvas um pouco maior que as outras desta página: 150 x 200 pixels.

-
- - - -
function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext){
-    var ctx = canvas.getContext('2d');
-
-    for(var i=0;i<4;i++){
-      for(var j=0;j<3;j++){
-        ctx.beginPath();
-        var x              = 25+j*50;               // coordenada x
-        var y              = 25+i*50;               // coordenada y
-        var radius         = 20;                    // Raio do Arco
-        var startAngle     = 0;                     // Ponto inicial no círculo
-        var endAngle       = Math.PI+(Math.PI*j)/2; // Ponto final no círculo
-        var anticlockwise  = i%2==0 ? false : true; // horário ou anti-horário
-
-        ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
-
-        if (i>1){
-          ctx.fill();
-        } else {
-          ctx.stroke();
-        }
-      }
-    }
-  }
-}
-
- -

{{EmbedLiveSample("Arcos", 160, 210, "https://mdn.mozillademos.org/files/204/Canvas_arc.png")}}

- -

Curvas de Bézier Cúbicas e Quadráticas

- -

O próximo tipo de caminhos disponíveis são as Curvas de Bézier, disponíveis nas variedades cubícas e quadráticas. Elas são geralmente usadas para desenhar complexas formas orgânicas.

- -
-
{{domxref("CanvasRenderingContext2D.quadraticCurveTo", "quadraticCurveTo(cp1x, cp1y, x, y)")}}
-
Desenha uma curva de Bézier quadrática da posição atual indicada pelo cursor, até a posição final especificada por x e y, usando o controle de pontos guiados por cp1x e cp1y.
-
{{domxref("CanvasRenderingContext2D.bezierCurveTo", "bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)")}}
-
Desenha uma curva de Bézier cúbica partindo da posição atual indicada pelo cursor, até a posição final especificada por x e y, usando o controle de pontos guiados por (cp1x, cp1y) e (cp2x, cp2y).
-
- -

A diferença entre estes métodos pode ser descrita de forma melhor usando a imagem à direita. Uma curva quadrática de Bézier tem um ponto inicial e final (pontos azuis) e apenas um ponto de controle (indicado pelo ponto vermelho) enquanto que uma curva cúbica de Bézier utiliza dois pontos de controles.

- -

Os parâmetros x e y em ambos os métodos são as coordenadas do ponto final. cp1x e cp1y são as coordenadas do primeiro ponto de controle, e cp2x e cp2y são as coordenadas do segundo ponto de controle.

- -

Usando curvas de Bézier quadráticas e cúbicas pode ser algo bastante desafiador, porque ao contrário de um software de desenho vetorial, como o Adobe Illustrator, não temos resultados visuais imediatos sobre o que estamos fazendo. Isso torna bastante difícil desenhar formas complexas. No exemplo a seguir, vamos desenhar algumas formas orgânicas simples, mas se você tiver tempo e, acima de tudo, paciência, formas muito mais complexas podem ser criadas.

- -

Não há nada muito difícil nestes exemplos. Em ambos os casos vemos uma sucessão de curvas sendo desenhadas, resultando no fim, em uma forma (shape) completa.

- -

Curvas de Bézier Quadráticas

- -

Este exemplo usa múltiplas curvas de Bézier quadráticas para renderizar um balão de fala.

- - - -
function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext) {
-    var ctx = canvas.getContext('2d');
-
-    // Exemplo de curvas de Bézier quadráticas
-    ctx.beginPath();
-    ctx.moveTo(75,25);
-    ctx.quadraticCurveTo(25,25,25,62.5);
-    ctx.quadraticCurveTo(25,100,50,100);
-    ctx.quadraticCurveTo(50,120,30,125);
-    ctx.quadraticCurveTo(60,120,65,100);
-    ctx.quadraticCurveTo(125,100,125,62.5);
-    ctx.quadraticCurveTo(125,25,75,25);
-    ctx.stroke();
-  }
-}
-
- -

{{EmbedLiveSample('Curvas_de_Bézier_Quadráticas', 160, 160, "https://mdn.mozillademos.org/files/243/Canvas_quadratic.png")}}

- -

Curvas de Bézier Cúbicas

- -

Este exemplo desenha um coração usando curvas de Bézier cúbicas.

- - - -
function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext){
-    var ctx = canvas.getContext('2d');
-
-    // Exemplo de curvas de Bézier cúbicas
-    ctx.beginPath();
-    ctx.moveTo(75,40);
-    ctx.bezierCurveTo(75,37,70,25,50,25);
-    ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
-    ctx.bezierCurveTo(20,80,40,102,75,120);
-    ctx.bezierCurveTo(110,102,130,80,130,62.5);
-    ctx.bezierCurveTo(130,62.5,130,25,100,25);
-    ctx.bezierCurveTo(85,25,75,37,75,40);
-    ctx.fill();
-  }
-}
-
- -

{{EmbedLiveSample('Curvas_de_Bézier_Cúbicas', 160, 160, "https://mdn.mozillademos.org/files/207/Canvas_bezier.png")}}

- -

Retângulos

- -

Além dos três métodos que vimos em {{anch("Desenhando retângulos")}}, que desenham formas retangulares diretamente no canvas, há também o método rect(), que adiciona uma forma retangular a um caminho (path) atualmente aberto.

- -
-
{{domxref("CanvasRenderingContext2D.rect", "rect(x, y, width, height)")}}
-
-

Desenha um retângulo cujo canto superior esquerdo é especificado por (x, y) com base em uma largura (width) e uma altura (height).

-
-
- -

Quando este método é executado, o método moveTo() é automaticamente chamado com os parâmetros (0,0). Em outras palavras, a posição atual do cursor é automaticamente redefinida para as coordenadas padrões.

- -

Combinando Elementos

- -

Até agora, em cada exemplo dessa página foi usada apenas um tipo de função de caminho (path) para cada forma (shape). No entanto, não há nenhuma limitação para o número ou tipos de caminhos que você pode usar para criar um shape. Então, neste exemplo final, vamos combinar todas as funções de caminho para fazer um conjunto de personagens de jogo muito conhecido.

- - - -
function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext){
-    var ctx = canvas.getContext('2d');
-
-    roundedRect(ctx,12,12,150,150,15);
-    roundedRect(ctx,19,19,150,150,9);
-    roundedRect(ctx,53,53,49,33,10);
-    roundedRect(ctx,53,119,49,16,6);
-    roundedRect(ctx,135,53,49,33,10);
-    roundedRect(ctx,135,119,25,49,10);
-
-    ctx.beginPath();
-    ctx.arc(37,37,13,Math.PI/7,-Math.PI/7,false);
-    ctx.lineTo(31,37);
-    ctx.fill();
-
-    for(var i=0;i<8;i++){
-      ctx.fillRect(51+i*16,35,4,4);
-    }
-
-    for(i=0;i<6;i++){
-      ctx.fillRect(115,51+i*16,4,4);
-    }
-
-    for(i=0;i<8;i++){
-      ctx.fillRect(51+i*16,99,4,4);
-    }
-
-    ctx.beginPath();
-    ctx.moveTo(83,116);
-    ctx.lineTo(83,102);
-    ctx.bezierCurveTo(83,94,89,88,97,88);
-    ctx.bezierCurveTo(105,88,111,94,111,102);
-    ctx.lineTo(111,116);
-    ctx.lineTo(106.333,111.333);
-    ctx.lineTo(101.666,116);
-    ctx.lineTo(97,111.333);
-    ctx.lineTo(92.333,116);
-    ctx.lineTo(87.666,111.333);
-    ctx.lineTo(83,116);
-    ctx.fill();
-
-    ctx.fillStyle = "white";
-    ctx.beginPath();
-    ctx.moveTo(91,96);
-    ctx.bezierCurveTo(88,96,87,99,87,101);
-    ctx.bezierCurveTo(87,103,88,106,91,106);
-    ctx.bezierCurveTo(94,106,95,103,95,101);
-    ctx.bezierCurveTo(95,99,94,96,91,96);
-    ctx.moveTo(103,96);
-    ctx.bezierCurveTo(100,96,99,99,99,101);
-    ctx.bezierCurveTo(99,103,100,106,103,106);
-    ctx.bezierCurveTo(106,106,107,103,107,101);
-    ctx.bezierCurveTo(107,99,106,96,103,96);
-    ctx.fill();
-
-    ctx.fillStyle = "black";
-    ctx.beginPath();
-    ctx.arc(101,102,2,0,Math.PI*2,true);
-    ctx.fill();
-
-    ctx.beginPath();
-    ctx.arc(89,102,2,0,Math.PI*2,true);
-    ctx.fill();
-  }
-}
-
-// Uma função útil para desenhar um retângulo com cantos arredondados.
-
-function roundedRect(ctx,x,y,width,height,radius){
-  ctx.beginPath();
-  ctx.moveTo(x,y+radius);
-  ctx.lineTo(x,y+height-radius);
-  ctx.quadraticCurveTo(x,y+height,x+radius,y+height);
-  ctx.lineTo(x+width-radius,y+height);
-  ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius);
-  ctx.lineTo(x+width,y+radius);
-  ctx.quadraticCurveTo(x+width,y,x+width-radius,y);
-  ctx.lineTo(x+radius,y);
-  ctx.quadraticCurveTo(x,y,x,y+radius);
-  ctx.stroke();
-}
-
- -

O resultado é:

- -

{{EmbedLiveSample("Combinando_Elementos", 160, 160, "https://mdn.mozillademos.org/files/9849/combinations.png")}}

- -

Não vamos discutir isso em detalhes, uma vez que é realmente muito simples. As coisas mais importantes a serem observadas são o uso da propriedade fillStyle no contexto de desenho e o uso de uma função auxiliar (neste caso roundedRect()). Usando funções auxiliares para construir um desenho frequentemente pode ser muito útil, além de reduzir a quantidade de código que você precisa, bem como a sua complexidade.

- -

Vamos dar uma nova olhada em fillStyle, em mais detalhes, mais adiante neste tutorial. Aqui, tudo o que estamos fazendo é apenas usando-o para alterar sucessivamente a cor de preenchimento dos caminhos (paths) de cor preta (padrão) para branca.

- -

Path2D

- -

Como vimos no último exemplo, pode haver uma série de paths e comandos de desenho para desenhar objetos em sua tela. Para simplificar o código e melhorar o desempenho, o objeto {{domxref("Path2D")}}, disponível em versões recentes dos navegadores, permite armazenar em cache ou gravar esses comandos de desenho. Com ele, você pode construir seus paths rapidamente.
- Vamos ver como podemos construir um objeto de Path2D:

- -
-
{{domxref("Path2D.Path2D", "Path2D()")}}
-
-

O construtor de Path2D() retorna um objeto Path2D instanciado recentemente, opcionalmente através de um outro objeto Path2D como argumento (cria uma cópia) ou, opcionalmente, com uma string que representam dados de paths em SVG.

-
-
- -
new Path2D();     // objeto vazio de Path2D
-new Path2D(path); // cópia de outro objeto de Path2D
-new Path2D(d);    // objeto criado a partir de paths em SVG
- -

Todos os métodos de caminho (path methods) como moveTo, rect, arc ou quadraticCurveTo, etc., que temos de saber acima, estão disponíveis em Path2D.

- -

A API Path2D também adiciona uma maneira de combinar caminhos usando o método addPath. Isso pode ser útil quando você deseja criar objetos com vários componentes, por exemplo.

- -
-
{{domxref("Path2D.addPath", "Path2D.addPath(path [, transform])")}}
-
Adiciona um path para o path atual através de uma matriz de transformação opcional.
-
- -

Exemplo de Path2D

- -

Neste exemplo, estamos criando um retângulo e um círculo. Ambos são armazenados como um objeto de Path2D, de modo que eles estão disponíveis para uso posterior. Com a nova API Path2D, vários métodos foram atualizados como, por exemplo, opcionalmente usar um objeto Path2D em vez do path atual. Aqui, os métodos stroke e fill são usados, ​​com um argumento de path, para desenhar ambos os objetos na tela, por exemplo.

- - - -
function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext) {
-    var ctx = canvas.getContext('2d');
-
-    var rectangle = new Path2D();
-    rectangle.rect(10, 10, 50, 50);
-
-    var circle = new Path2D();
-    circle.moveTo(125, 35);
-    circle.arc(100, 35, 25, 0, 2 * Math.PI);
-
-    ctx.stroke(rectangle);
-    ctx.fill(circle);
-  }
-}
-
- -

{{EmbedLiveSample("Exemplo_de_Path2D", 140, 110, "https://mdn.mozillademos.org/files/9851/path2d.png")}}

- -

Usando paths em SVG

- -

Outro recurso poderoso da nova API de Path2D é a utilização de dados de path em SVG para inicializar caminhos (paths) no canvas. Isso permite que você crie dados de paths que possam ser utilizados tanto no SVG como no canvas.

- -

O caminho se moverá para o ponto (M10 10) e então se moverá horizontalmente 80 pontos para a direita (h 80), depois 80 pontos para baixo (v 80), então 80 pontos para a esquerda (h -80) e, por fim, volta para o início (z). Você pode ver este exemplo na página do construtor do Path2D.

- -
var p = new Path2D('M10 10 h 80 v 80 h -80 Z');
- -
{{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_usage", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}}
diff --git a/files/pt-br/web/guide/html/canvas_tutorial/drawing_text/index.html b/files/pt-br/web/guide/html/canvas_tutorial/drawing_text/index.html deleted file mode 100644 index 550719e627..0000000000 --- a/files/pt-br/web/guide/html/canvas_tutorial/drawing_text/index.html +++ /dev/null @@ -1,169 +0,0 @@ ---- -title: Drawing text -slug: Web/Guide/HTML/Canvas_tutorial/Drawing_text -tags: - - Canvas - - Intermediário - - Tutorial - - graficos -translation_of: Web/API/Canvas_API/Tutorial/Drawing_text ---- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "Web/API/Canvas_API/Tutorial/Using_images")}}
- -
-

Após entender como aplicar estilos e cores no capítulo anterior, nós veremos agora como desenhar texto dentro do contexto de uma canvas.

-
- -

Desenhando texto

- -

O context de renderização da canvas fornece dois métodos para renderização textual: 

- -
-
{{domxref("CanvasRenderingContext2D.fillText", "fillText(text, x, y [, maxWidth])")}}
-
Preenche com um determinado texto as cordenadas (x,y) recebidas. Opcionalmente com uma largura máxima para o desenho.
-
{{domxref("CanvasRenderingContext2D.strokeText", "strokeText(text, x, y [, maxWidth])")}}
-
Traçeja um determinado texto nas cordenadas (x,y) recebidas. Opcionalmente com uma largura máxima para o desenho.
-
- -

Um exemplo com fillText

- -

O texto a seguir é rederizado utilizando fillStyle.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  ctx.font = '48px serif';
-  ctx.fillText('Hello world', 10, 50);
-}
- - - -

{{EmbedLiveSample("A_fillText_example", 310, 110)}}

- -

Um exemplo com strokeText

- -

 

- -

O texto é preenchido usando o strokeStyle atual.

- -

 

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  ctx.font = '48px serif';
-  ctx.strokeText('Hello world', 10, 50);
-}
- - - -

{{EmbedLiveSample("A_strokeText_example", 310, 110)}}

- -

Estilo de Texto

- -

Nos exemplos anteriores, já usamos a propriedade font para tornar o texto um pouco maior que o tamanho padrão. Existem mais algumas propriedades que permitem ajustar a maneira como o texto é exibido no canvas:

- -
-
{{domxref("CanvasRenderingContext2D.font", "font = value")}}
-
The current text style being used when drawing text. This string uses the same syntax as the CSS {{cssxref("font")}} property. The default font is 10px sans-serif.
-
{{domxref("CanvasRenderingContext2D.textAlign", "textAlign = value")}}
-
Text alignment setting. Possible values: start, end, left, right or center. The default value is start.
-
{{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline = value")}}
-
Baseline alignment setting. Possible values: top, hanging, middle, alphabetic, ideographic, bottom. The default value is alphabetic.
-
{{domxref("CanvasRenderingContext2D.direction", "direction = value")}}
-
Directionality. Possible values: ltr, rtl, inherit. The default value is inherit.
-
- -

Essas propriedades podem ser similares para você, se você trabalhou com CSS antes.

- -

O diagrama seguinte do WHATWG demonstra as várias baselines suportadas pela propriedade do textBaselineThe top of the em square is -roughly at the top of the glyphs in a font, the hanging baseline is -where some glyphs like आ are anchored, the middle is half-way -between the top of the em square and the bottom of the em square, -the alphabetic baseline is where characters like Á, ÿ, -f, and Ω are anchored, the ideographic baseline is -where glyphs like 私 and 達 are anchored, and the bottom -of the em square is roughly at the bottom of the glyphs in a -font. The top and bottom of the bounding box can be far from these -baselines, due to glyphs extending far outside the em square.

- -

O exemplo de uma textBaseline

- -

Edite o código abaixo e veja as atualizações em tempo real no canvas.

- -
ctx.font = '48px serif';
-ctx.textBaseline = 'hanging';
-ctx.strokeText('Hello world', 0, 100);
-
- - - -

{{ EmbedLiveSample('Playable_code', 700, 360) }}

- -

Advanced text measurements

- -

In the case you need to obtain more details about the text, the following method allows you to measure it.

- -
-
{{domxref("CanvasRenderingContext2D.measureText", "measureText()")}}
-
Returns a {{domxref("TextMetrics")}} object containing the width, in pixels, that the specified text will be when drawn in the current text style.
-
- -

The following code snippet shows how you can measure a text and get its width.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  var text = ctx.measureText('foo'); // TextMetrics object
-  text.width; // 16;
-}
-
- -

Notas específicas - Gecko

- -

No Gecko (a engine de renderização do Firefox, Firefox OS e outras aplicações Mozilla), algumas APIs prefixadas foram implementadas em versões anteriores para escrever texto em um canvas. Essas APIs agora estão depreciadas e removidas, e não são mais garantidas para uso.

- -

{{PreviousNext("Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "Web/API/Canvas_API/Tutorial/Using_images")}}

diff --git a/files/pt-br/web/guide/html/canvas_tutorial/index.html b/files/pt-br/web/guide/html/canvas_tutorial/index.html deleted file mode 100644 index 2f9dbab7df..0000000000 --- a/files/pt-br/web/guide/html/canvas_tutorial/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: Canvas tutorial -slug: Web/Guide/HTML/Canvas_tutorial -tags: - - Canvas - - Graphics - - Guide - - HTML - - HTML5 - - Intermediate - - Web -translation_of: Web/API/Canvas_API/Tutorial ---- -

 {{CanvasSidebar}}

- -

<canvas> é um elemento HTML que pode ser usado para desenhar usando linguagem de "script" (normalmente JavaScript). Isto pode ser usado, por exemplo, para desenhar gráficos, fazer composições de fotos ou simples (e não tão simples) animações. As imagens à direita mostram exemplos de implementações <canvas> que serão parte deste tutorial.

- -

Este tutorial descreve como utilizar o elemento <canvas> para desenhar gráficos 2D, iniciando com o básico. Os exemplos fornecidos devem lhe trazer algumas ideias claras sobre o que você pode fazer com o canvas e irá fornecer trechos de código que podem lhe ajudar na contrução do seu próprio conteúdo. 

- -

Introduzido pela primeira vez no WebKit pela Apple para o OS X Dashboard, o <canvas>, desde então, tem sido implementado em navegadores. Hoje, todos os principais navegadores suportam isso.

- -

Antes de começar

- -

Usar o elemento <canvas> não é muito difícil, mas você precisa de um conhecimento básico sobre HTML e JavaScript. O elemento <canvas> não é suportado por alguns navegadores antigos, mas é suportado em versões recentes da maioria dos navegadores. O tamanho padrão de um canvas é de 300px * 150px (largura * altura). Porém, tamanhos customizados podem ser definidos usando as propriedades width e height do CSS. Para desenhar gráficos no canvas iremos usar um contexto de objeto JavaScript, o que criará gráficos em tempo real.

- -

Nesse tutorial

- - - -

Veja também

- - - -

Nota dos contribuidores

- -

Devido a um erro técnico lamentável que ocorreu na semana de 17 de junho de 2013, perdemos parte do histórico deste tutorial, incluindo atribuições a todos os contribuidores anteriores ao seu conteúdo. Pedimos desculpas por isso, e espero que você nos perdoe desse infeliz infortúnio.

- -
{{ Next("Web/Guide/HTML/Canvas_tutorial/Utilizacao_basica") }}
diff --git a/files/pt-br/web/guide/html/canvas_tutorial/otimizando_canvas/index.html b/files/pt-br/web/guide/html/canvas_tutorial/otimizando_canvas/index.html deleted file mode 100644 index d18afddefa..0000000000 --- a/files/pt-br/web/guide/html/canvas_tutorial/otimizando_canvas/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: Otimizando canvas -slug: Web/Guide/HTML/Canvas_tutorial/Otimizando_Canvas -tags: - - Canvas - - Gráfico 2D - - Otimização -translation_of: Web/API/Canvas_API/Tutorial/Optimizing_canvas ---- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}
- -
-

O elemento {{HTMLElement("canvas")}} é um dos padrões mais largamente utilizados para renderização de gráficos 2D na Web. É muito usado em jogos e em visualizações complexas. Porém, quando sítios web e aplicativos utilizam canvas até seus limites, começam a surgir problemas de perda de performance. Este artigo tem o objetivo de prover sugestões de otimização de seu elemento canvas e garantir que seu site ou aplicativo funcione melhor.

-
- -

Dicas de performance

- -

O que segue é uma coleção de dicas para melhorar a performance.

- -

Pre-render similar primitives or repeating objects on an off-screen canvas

- -

If you find yourself with complex drawing operations on each frame, consider creating an offscreen canvas, draw to it once (or whenever it changes) on the offscreen canvas, then on each frame draw the offscreen canvas.

- -
myEntity.offscreenCanvas = document.createElement('canvas');
-myEntity.offscreenCanvas.width = myEntity.width;
-myEntity.offscreenCanvas.height = myEntity.height;
-myEntity.offscreenContext = myEntity.offscreenCanvas.getContext('2d');
-
-myEntity.render(myEntity.offscreenContext);
-
- -

Avoid floating-point coordinates and use integers instead

- -

Sub-pixel rendering occurs when you render objects on a canvas without whole values.

- -
ctx.drawImage(myImage, 0.3, 0.5);
-
- -

This causes the browser to do extra calculations to create the anti-aliasing effect. To avoid this, make sure to round all co-ordinates used in calls to {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}} using {{jsxref("Math.floor()")}}, for example.

- -

Don’t scale images in drawImage

- -

Cache various sizes of your images on an offscreen canvas when loading as opposed to constantly scaling them in {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}}.

- -

Use multiple layered canvases for complex scenes

- -

You may find you have some elements that are frequently changing and moving around whereas other things (like UI) never change. An optimization in this situation is to create layers using multiple canvas elements.

- -

For example you could create a UI layer that sits on top of everything and is only drawn during user input. You could create game layer where the frequently updating entities exist and a background layer for entities that rarely update.

- -
<div id="stage">
-  <canvas id="ui-layer" width="480" height="320"></canvas>
-  <canvas id="game-layer" width="480" height="320"></canvas>
-  <canvas id="background-layer" width="480" height="320"></canvas>
-</div>
-
-<style>
-  #stage {
-    width: 480px;
-    height: 320px;
-    position: relative;
-    border: 2px solid black
-  }
-  canvas { position: absolute; }
-  #ui-layer { z-index: 3 }
-  #game-layer { z-index: 2 }
-  #background-layer { z-index: 1 }
-</style>
-
- -

CSS for large background images

- -

If like most games you have a static background image, use a plain {{HTMLElement("div")}} element with a CSS {{cssxref("background")}} property and position it under the canvas. This will avoid drawing a large image to the canvas on every tick.

- -

Scaling canvas using CSS transforms

- -

CSS transforms are faster by using the GPU. Best case is to not scale the canvas or have a smaller canvas and scale up rather than a bigger canvas and scale down. For Firefox OS, target 480 x 320 px.

- -
var scaleX = window.innerWidth / canvas.width;
-var scaleY = window.innerHeight / canvas.height;
-
-var scaleToFit = Math.min(scaleX, scaleY);
-var scaleToCover = Math.max(scaleX, scaleY);
-
-stage.style.transformOrigin = '0 0'; //scale from top left
-stage.style.transform = 'scale(' + scaleToFit + ')';
-
- -

Turn off transparency

- -

If your game uses canvas and doesn’t need to be transparent, set the alpha option to false when creating a drawing context with HTMLCanvasElement.getContext(). This information can be used internally to optimize rendering.

- -
var ctx = canvas.getContext('2d', { alpha: false });
- -

More tips

- - - -

See also

- - - -

{{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}

diff --git a/files/pt-br/web/guide/html/canvas_tutorial/using_images/index.html b/files/pt-br/web/guide/html/canvas_tutorial/using_images/index.html deleted file mode 100644 index 0b0dcfe7e7..0000000000 --- a/files/pt-br/web/guide/html/canvas_tutorial/using_images/index.html +++ /dev/null @@ -1,333 +0,0 @@ ---- -title: Using images -slug: Web/Guide/HTML/Canvas_tutorial/Using_images -translation_of: Web/API/Canvas_API/Tutorial/Using_images ---- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_text", "Web/API/Canvas_API/Tutorial/Transformations" )}}
- -
-

Até agora nós criamos nossos próprios shapes e aplicamos estilos(applied styles) a eles. Um dos recursos mais interessantes do {{HTMLElement("canvas")}} é a capacidade de usar imagens. Eles podem ser usados para composição dinâmica de fotos ou como pano de fundo de gráficos, como sprites em jogos e assim por diante. Imagens externas podem ser usadas em qualquer formato suportado pelo navegador, tais como PNG, GIF, ou JPEG. Você pode até usar a imagem produzida por outros elementos da tela na mesma página que a fonte!

-
- -

A importação de imagens para o canvas é basicamente um processo de duas etapas:

- -
    -
  1. Obter uma referência a um objeto {{domxref("HTMLImageElement")}} ou a outro elemento do canvas como fonte. Também é possível usar imagens fornecendo uma URL.
    2. -
  2. Desenhar a imagem no canvas usando a função drawImage() .
    3. -
- -

Vamos dar uma olhada em como fazer isso.

- -

Getting images to draw

- -

The canvas API is able to use any of the following data types as an image source:

- -
-
{{domxref("HTMLImageElement")}}
-
These are images created using the Image() constructor, as well as any {{HTMLElement("img")}} element.
-
{{domxref("SVGImageElement")}}
-
These are images embedded using the {{SVGElement("image")}} element.
-
{{domxref("HTMLVideoElement")}}
-
Using an HTML {{HTMLElement("video")}} element as your image source grabs the current frame from the video and uses it as an image.
-
{{domxref("HTMLCanvasElement")}}
-
You can use another {{HTMLElement("canvas")}} element as your image source.
-
- -

These sources are collectively referred to by the type {{domxref("CanvasImageSource")}}.

- -

There are several ways to get images for use on a canvas.

- -

Using images from the same page

- -

We can obtain a reference to images on the same page as the canvas by using one of:

- - - -

Using images from other domains

- -

Using the {{htmlattrxref("crossorigin", "img")}} attribute of an {{HTMLElement("img")}} element (reflected by the {{domxref("HTMLImageElement.crossOrigin")}} property), you can request permission to load an image from another domain for use in your call to drawImage(). If the hosting domain permits cross-domain access to the image, the image can be used in your canvas without tainting it; otherwise using the image will taint the canvas.

- -

Using other canvas elements

- -

Just as with normal images, we access other canvas elements using either the {{domxref("document.getElementsByTagName()")}} or {{domxref("document.getElementById()")}} method. Be sure you've drawn something to the source canvas before using it in your target canvas.

- -

One of the more practical uses of this would be to use a second canvas element as a thumbnail view of the other larger canvas.

- -

Creating an image from scratch

- -

Another option is to create new {{domxref("HTMLImageElement")}} objects in our script. To do this, you can use the convenient Image() constructor:

- -
var img = new Image();   // Create new img element
-img.src = 'myImage.png'; // Set source path
-
- -

When this script gets executed, the image starts loading.

- -

If you try to call drawImage() before the image has finished loading, it won't do anything (or, in older browsers, may even throw an exception). So you need to be sure to use the load event so you don't try this before the image has loaded:

- -
var img = new Image();   // Create new img element
-img.addEventListener('load', function() {
-  // execute drawImage statements here
-}, false);
-img.src = 'myImage.png'; // Set source path
-
- -

If you're only using one external image this can be a good approach, but once you need to track more than one we need to resort to something more clever. It's beyond the scope of this tutorial to look at image pre-loading tactics, but you should keep that in mind.

- -

Embedding an image via data: URL

- -

Another possible way to include images is via the data: url. Data URLs allow you to completely define an image as a Base64 encoded string of characters directly in your code.

- -
var img = new Image();   // Create new img element
-img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';
-
- -

One advantage of data URLs is that the resulting image is available immediately without another round trip to the server. Another potential advantage is that it is also possible to encapsulate in one file all of your CSS, JavaScript, HTML, and images, making it more portable to other locations.

- -

Some disadvantages of this method are that your image is not cached, and for larger images the encoded url can become quite long.

- -

Using frames from a video

- -

You can also use frames from a video being presented by a {{HTMLElement("video")}} element (even if the video is not visible). For example, if you have a {{HTMLElement("video")}} element with the ID "myvideo", you can do this:

- -
function getMyVideo() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext) {
-    var ctx = canvas.getContext('2d');
-
-    return document.getElementById('myvideo');
-  }
-}
-
- -

This returns the {{domxref("HTMLVideoElement")}} object for the video, which, as covered earlier, is one of the objects that can be used as a CanvasImageSource.

- -

Drawing images

- -

Once we have a reference to our source image object we can use the drawImage() method to render it to the canvas. As we will see later the drawImage() method is overloaded and has several variants. In its most basic form it looks like this:

- -
-
{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, x, y)")}}
-
Draws the CanvasImageSource specified by the image parameter at the coordinates (x, y).
-
- -
-

SVG images must specify a width and height in the root <svg> element.

-
- -

Example: A simple line graph

- -

In the following example, we will use an external image as the backdrop for a small line graph. Using backdrops can make your script considerably smaller because we can avoid the need for code to generate the background. In this example, we're only using one image, so I use the image object's load event handler to execute the drawing statements. The drawImage() method places the backdrop at the coordinate (0, 0), which is the top-left corner of the canvas.

- - - -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  var img = new Image();
-  img.onload = function() {
-    ctx.drawImage(img, 0, 0);
-    ctx.beginPath();
-    ctx.moveTo(30, 96);
-    ctx.lineTo(70, 66);
-    ctx.lineTo(103, 76);
-    ctx.lineTo(170, 15);
-    ctx.stroke();
-  };
-  img.src = 'https://mdn.mozillademos.org/files/5395/backdrop.png';
-}
- -

The resulting graph looks like this:

- -

{{EmbedLiveSample("Example_A_simple_line_graph", 220, 160, "https://mdn.mozillademos.org/files/206/Canvas_backdrop.png")}}

- -

Scaling

- -

The second variant of the drawImage() method adds two new parameters and lets us place scaled images on the canvas.

- -
-
{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, x, y, width, height)")}}
-
This adds the width and height parameters, which indicate the size to which to scale the image when drawing it onto the canvas.
-
- -

Example: Tiling an image

- -

In this example, we'll use an image as a wallpaper and repeat it several times on the canvas. This is done simply by looping and placing the scaled images at different positions. In the code below, the first for loop iterates over the rows. The second for loop iterates over the columns. The image is scaled to one third of its original size, which is 50x38 pixels.

- -
-

Note: Images can become blurry when scaling up or grainy if they're scaled down too much. Scaling is probably best not done if you've got some text in it which needs to remain legible.

-
- - - -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  var img = new Image();
-  img.onload = function() {
-    for (var i = 0; i < 4; i++) {
-      for (var j = 0; j < 3; j++) {
-        ctx.drawImage(img, j * 50, i * 38, 50, 38);
-      }
-    }
-  };
-  img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
-}
- -

The resulting canvas looks like this:

- -

{{EmbedLiveSample("Example_Tiling_an_image", 160, 160, "https://mdn.mozillademos.org/files/251/Canvas_scale_image.png")}}

- -

Slicing

- -

The third and last variant of the drawImage() method has eight parameters in addition to the image source. It lets us cut out a section of the source image, then scale and draw it on our canvas.

- -
-
{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)")}}
-
Given an image, this function takes the area of the source image specified by the rectangle whose top-left corner is (sx, sy) and whose width and height are sWidth and sHeight and draws it into the canvas, placing it on the canvas at (dx, dy) and scaling it to the size specified by dWidth and dHeight.
-
- -

To really understand what this does, it may help to look at the image to the right. The first four parameters define the location and size of the slice on the source image. The last four parameters define the rectangle into which to draw the image on the destination canvas.

- -

Slicing can be a useful tool when you want to make compositions. You could have all elements in a single image file and use this method to composite a complete drawing. For instance, if you want to make a chart you could have a PNG image containing all the necessary text in a single file and depending on your data could change the scale of your chart fairly easily. Another advantage is that you don't need to load every image individually, which can improve load performance.

- -

Example: Framing an image

- -

In this example, we'll use the same rhino as in the previous example, but we'll slice out its head and composite it into a picture frame. The picture frame image is a 24-bit PNG which includes a drop shadow. Because 24-bit PNG images include a full 8-bit alpha channel, unlike GIF and 8-bit PNG images, it can be placed onto any background without worrying about a matte color.

- -
<html>
- <body onload="draw();">
-   <canvas id="canvas" width="150" height="150"></canvas>
-   <div style="display:none;">
-     <img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" width="300" height="227">
-     <img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150">
-   </div>
- </body>
-</html>
-
- -
function draw() {
-  var canvas = document.getElementById('canvas');
-  var ctx = canvas.getContext('2d');
-
-  // Draw slice
-  ctx.drawImage(document.getElementById('source'),
-                33, 71, 104, 124, 21, 20, 87, 104);
-
-  // Draw frame
-  ctx.drawImage(document.getElementById('frame'), 0, 0);
-}
- -

We took a different approach to loading the images this time. Instead of loading them by creating new {{domxref("HTMLImageElement")}} objects, we included them as {{HTMLElement("img")}} tags directly in our HTML source and retrieved the images from those. The images are hidden from output by setting the CSS property {{cssxref("display")}} to none for those images.

- -

{{EmbedLiveSample("Example_Framing_an_image", 160, 160, "https://mdn.mozillademos.org/files/226/Canvas_drawimage2.jpg")}}

- -

The script itself is very simple. Each {{HTMLElement("img")}} is assigned an ID attribute, which makes them easy to select using {{domxref("document.getElementById()")}}. We then simply use drawImage() to slice the rhino out of the first image and scale him onto the canvas, then draw the frame on top using a second drawImage() call.

- - - -

In the final example of this chapter, we'll build a little art gallery. The gallery consists of a table containing several images. When the page is loaded, a {{HTMLElement("canvas")}}  element is inserted for each image and a frame is drawn around it.

- -

In this case, every image has a fixed width and height, as does the frame that's drawn around them. You could enhance the script so that it uses the image's width and height to make the frame fit perfectly around it.

- -

The code below should be self-explanatory. We loop through the {{domxref("document.images")}} container and add new canvas elements accordingly. Probably the only thing to note, for those not so familiar with the DOM, is the use of the {{domxref("Node.insertBefore")}} method. insertBefore() is a method of the parent node (a table cell) of the element (the image) before which we want to insert our new node (the canvas element).

- -
<html>
- <body onload="draw();">
-     <table>
-      <tr>
-        <td><img src="https://mdn.mozillademos.org/files/5399/gallery_1.jpg"></td>
-        <td><img src="https://mdn.mozillademos.org/files/5401/gallery_2.jpg"></td>
-        <td><img src="https://mdn.mozillademos.org/files/5403/gallery_3.jpg"></td>
-        <td><img src="https://mdn.mozillademos.org/files/5405/gallery_4.jpg"></td>
-      </tr>
-      <tr>
-        <td><img src="https://mdn.mozillademos.org/files/5407/gallery_5.jpg"></td>
-        <td><img src="https://mdn.mozillademos.org/files/5409/gallery_6.jpg"></td>
-        <td><img src="https://mdn.mozillademos.org/files/5411/gallery_7.jpg"></td>
-        <td><img src="https://mdn.mozillademos.org/files/5413/gallery_8.jpg"></td>
-      </tr>
-     </table>
-     <img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150">
- </body>
-</html>
-
- -

And here's some CSS to make things look nice:

- -
body {
-  background: 0 -100px repeat-x url(https://mdn.mozillademos.org/files/5415/bg_gallery.png) #4F191A;
-  margin: 10px;
-}
-
-img {
-  display: none;
-}
-
-table {
-  margin: 0 auto;
-}
-
-td {
-  padding: 15px;
-}
-
- -

Tying it all together is the JavaScript to draw our framed images:

- -
function draw() {
-
-  // Loop through all images
-  for (var i = 0; i < document.images.length; i++) {
-
-    // Don't add a canvas for the frame image
-    if (document.images[i].getAttribute('id') != 'frame') {
-
-      // Create canvas element
-      canvas = document.createElement('canvas');
-      canvas.setAttribute('width', 132);
-      canvas.setAttribute('height', 150);
-
-      // Insert before the image
-      document.images[i].parentNode.insertBefore(canvas,document.images[i]);
-
-      ctx = canvas.getContext('2d');
-
-      // Draw image to canvas
-      ctx.drawImage(document.images[i], 15, 20);
-
-      // Add frame
-      ctx.drawImage(document.getElementById('frame'), 0, 0);
-    }
-  }
-}
- -

{{EmbedLiveSample("Art_gallery_example", 725, 400)}}

- -

Controlling image scaling behavior

- -

As mentioned previously, scaling images can result in fuzzy or blocky artifacts due to the scaling process. You can use the drawing context's {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}} property to control the use of image smoothing algorithms when scaling images within your context. By default, this is true, meaning images will be smoothed when scaled. You can disable this feature like this:

- -
ctx.mozImageSmoothingEnabled = false;
-ctx.webkitImageSmoothingEnabled = false;
-ctx.msImageSmoothingEnabled = false;
-ctx.imageSmoothingEnabled = false;
-
- -

{{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_text", "Web/API/Canvas_API/Tutorial/Transformations")}}

diff --git a/files/pt-br/web/guide/html/canvas_tutorial/utilizacao_basica/index.html b/files/pt-br/web/guide/html/canvas_tutorial/utilizacao_basica/index.html deleted file mode 100644 index 767a5ff97c..0000000000 --- a/files/pt-br/web/guide/html/canvas_tutorial/utilizacao_basica/index.html +++ /dev/null @@ -1,153 +0,0 @@ ---- -title: Utilização básica do Canvas -slug: Web/Guide/HTML/Canvas_tutorial/Utilizacao_basica -tags: - - Canvas - - HTML - - Intermediário - - Tutorial - - graficos -translation_of: Web/API/Canvas_API/Tutorial/Basic_usage ---- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}}
- -
Vamos começar este tutorial olhando para o elemento {{HTMLElement("canvas")}} {{Glossary("HTML")}} em si. No final desta página, você saberá como configurar um contexto de canvas 2D e desenhar um primeiro exemplo em seu navegador.
- -

O elemento <canvas>

- -

Vamos começar esse tutorial olhando o elemento  {{HTMLElement("canvas")}} em si.

- -
<canvas id="tutorial" width="150" height="150"></canvas>
-
- -

Se parece muito com o elemento <img> com a diferença de não possuir os atributos src e alt. O elemento <canvas> tem apenas dois atributos - width e height. Ambos são opcionais e podem ser aplicados utilizando as propriedades DOM respectivas. Se não forem especificados, o canvas será iniciado com 300 pixels de largura por 150 pixels de altura. O elemento pode ser redimensionado por CSS, mas durante a renderização a imagem é escalonada para caber no tamanho do layout.

- -
-

Nota: Se as suas renderizações parecerem distorcidas, tente especificar os atributos width e height no <canvas> e não usando CSS.

-
- -

O atributo id não é específico do elemento <canvas> mas um dos atributos padrão do HTML que pode ser aplicado em (quase) todos os elementos HTML (como o class por exemplo). É sempre uma boa ideia inserir um id pois fica muito mais fácil de capturar o elemento no seu script.

- -

O elemento <canvas> pode ser estilizado como qualquer imagem (margem, borda, fundo, etc). Contudo, essas regras não afetarão o desenho no canvas. Nós veremos como isso é feito a seguir nesse tutorial. Quando nenhuma regra de estilo for aplicada, o canvas iniciará totalmente transparente.

- -
-

Conteúdo alternativo

- -

Uma vez que alguns navegadores mais antigos (em particular, versões do Internet Explorer anteriores a 9) não suportam o elemento {{HTMLElement("canvas")}}, você precisará prover um conteúdo alternativo para ser mostrado nesses navegadores.

- -

Isto é muito simples: basta inserir o conteúdo alternativo dentro do elemento <canvas>. Navegadores que não suportam o <canvas> irão renderizar o conteúdo alternativo. Já os navegadores que suportam <canvas> irão ignorar o conteúdo alternativo, renderizando o canvas normalmente.

- -

Por exemplo, podemos prover um texto descritivo do canvas ou uma imagem estática do conteúdo. Algo como isto:

- -
<canvas id="stockGraph" width="150" height="150">
-  preço das ações: $3.15 +0.15
-</canvas>
-
-<canvas id="clock" width="150" height="150">
-  <img src="images/clock.png" width="150" height="150" alt=""/>
-</canvas>
-
- -

Tag </canvas> é necessária

- -

Ao contrário do elemento {{HTMLElement("img")}}, o elemento {{HTMLElement("canvas")}} a tag de fechamento (</canvas>) é necessária.

- -
-

Nota: Embora as primeiras versões do navegador Safari da Apple não exijam a tag de fechamento, a especificação indica que ela é necessária para que haja maior compatibilidade, portanto não se esqueça de incluí-la. Essas versões do Safari (antes da versão 2.0) irão processar o conteúdo do alternativo, além da própria tela, a menos que você use o CSS para mascará-lo. Felizmente, os usuários dessas versões do Safari são raros hoje em dia.

-
- -

Se o conteúdo alternativo não for necessário, um simples <canvas id="foo" ...></canvas> é totalmente compatível com todos os navegadores que suportam canvas.

- -

O contexto de renderização

- -

{{HTMLElement("canvas")}} cria uma superfície de desenho de tamanho fixo que expõe um ou mais contextos de renderização, que são usados ​​para criar e manipular o conteúdo mostrado. Vamos nos concentrar no contexto de renderização 2D. Outros contextos podem fornecer diferentes tipos de renderização; por exemplo, WebGL usa um contexto 3D ("experimental-WebGL") baseado em OpenGL ES.

- -

Incialmente o canvas é branco. Para mostrar alguma coisa, primeiro um script precisa acessar o contexto de renderização e desenhar sobre ele. O elemento {{HTMLElement("canvas")}} tem um método chamado getContext(), usado para obter o contexto de renderização e suas funções de desenho. getContext() recebe o tipo de contexto como parâmetro. Para gráficos 2D, que serão abrangidos nesse tutorial, deverá ser especificado "2d".

- -
var canvas = document.getElementById('tutorial');
-var ctx = canvas.getContext('2d');
-
- -

A primeira linha recupera o nó DOM do elemento {{HTMLElement ("canvas")}} chamando o método {{domxref ("document.getElementById()")}}. Depois de ter o nó do elemento, podemos acessar o contexto de desenho usando o método getContext().

- -
-

Verificação de suporte

- -

O conteúdo alternativo é mostrado nos navegadores que não suportam o elemento {{HTMLElement("canvas")}}, mas essa checagem pode ser feita através de um script simplesmente testando a presença do método getContext():

- -
var canvas = document.getElementById('tutorial');
-
-if (canvas.getContext){
-  var ctx = canvas.getContext('2d');
-  // codigo de desenho aqui
-} else {
-  // codigo para quando o canvas nao for suportado aqui
-}
-
-
-
- -

Um modelo de estrutura

- -

Aqui, um modelo minimalista, que vamos usar como ponto de partida para os exemplos posteriores:

- -
-

Nota: não é uma boa prática incorporar um script dentro do HTML. Nós fazemos isso aqui para manter o exemplo conciso.

-
- -
<html>
-  <head>
-    <title>Canvas tutorial</title>
-    <script type="text/javascript">
-      function draw(){
-        var canvas = document.getElementById('tutorial');
-        if (canvas.getContext){
-          var ctx = canvas.getContext('2d');
-        }
-      }
-    </script>
-    <style type="text/css">
-      canvas { border: 1px solid black; }
-    </style>
-  </head>
-  <body onload="draw();">
-    <canvas id="tutorial" width="150" height="150"></canvas>
-  </body>
-</html>
-
- -

O script inclui a função chamada draw(), que é executada uma vez ao término do carregamento da página; este exemplo usa o evento onload do documento. Essa função, ou uma parecida, poderia usar {{domxref("window.setTimeout()")}}, {{domxref("window.setInterval()")}}, ou qualquer outro manipulador de evento, contanto que a página tenha sido carregada primeiro.

- -

{{EmbedLiveSample("Um_modelo_de_estrutura", 160, 160)}}

- -

Um simples exemplo

- -

Para começar, vamos dar uma olhada num exemplo simples que desenha a interseção de dois retângulos, dos quais um deles tem uma transparência. Exploraremos em mais detalhes o funcionamento nos exemplos posteriores.

- -
<html>
- <head>
-  <script type="application/javascript">
-    function draw() {
-      var canvas = document.getElementById("canvas");
-      if (canvas.getContext) {
-        var ctx = canvas.getContext("2d");
-
-        ctx.fillStyle = "rgb(200,0,0)";
-        ctx.fillRect (10, 10, 55, 50);
-
-        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
-        ctx.fillRect (30, 30, 55, 50);
-      }
-    }
-  </script>
- </head>
- <body onload="draw();">
-   <canvas id="canvas" width="150" height="150"></canvas>
- </body>
-</html>
- -

Este exemplo parece assim:

- -

{{EmbedLiveSample("Um_simples_exemplo", 160, 160, "https://mdn.mozillademos.org/files/228/canvas_ex1.png")}}

- -

{{PreviousNext("Web/Guide/HTML/Canvas_tutorial", "Web/Guide/HTML/Canvas_tutorial/Drawing_shapes")}}

diff --git a/files/pt-br/web/guide/html/categorias_de_conteudo/index.html b/files/pt-br/web/guide/html/categorias_de_conteudo/index.html deleted file mode 100644 index 7b55358b7b..0000000000 --- a/files/pt-br/web/guide/html/categorias_de_conteudo/index.html +++ /dev/null @@ -1,148 +0,0 @@ ---- -title: Categorias de conteúdo -slug: Web/Guide/HTML/Categorias_de_conteudo -tags: - - Avançado - - Guía - - HTML - - HTML5 - - NeedsUpdate - - Web -translation_of: Web/Guide/HTML/Content_categories ---- -

Cada elemento HTML deve permanecer, por regras, definindo que tipo de conteúdo ele pode ter. Essas regras estão agrupadas em modelos de conteúdo para muitos elementos. Cada elemento HTML pertence a nenhum, um, ou múltiplos modelos de conteúdo, cada regra de definição que o conteúdo do elemento deve seguir em um documento HTML.

- -

Há três tipos de categorias de conteúdo:

- - - -
Content_categories_venn.png
- -

Principais categorias de conteúdo

- -

Conteúdo de metadados

- -

Os elementos pertencentes a categoria conteúdo de metadados modificam a apresentação ou o comportamento do resto do documento, define ligações para outros documentos ou transmite outras informações fora da banda.

- -

Os elementos pertencentes a essa categoria são {{HTMLElement("base")}}, {{HTMLElement("command")}}, {{HTMLElement("link")}}, {{HTMLElement("meta")}}, {{HTMLElement("noscript")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} e {{HTMLElement("title")}}.

- -

Conteúdo de fluxo

- -

Elementos pertencentes a categoria de conteúdo de fluxo tipicamente contém texto ou conteúdo embutido. Eles são: {{HTMLElement("a")}}, {{HTMLElement("abbr")}}, {{HTMLElement("address")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}},{{HTMLElement("bdo")}}, {{HTMLElement("bdi")}}, {{HTMLElement("blockquote")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{HTMLElement("command")}}, {{HTMLElement("data")}}, {{HTMLElement("datalist")}}, {{HTMLElement("del")}}, {{HTMLElement("details")}}, {{HTMLElement("dfn")}}, {{HTMLElement("div")}}, {{HTMLElement("dl")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}}, {{HTMLElement("footer")}}, {{HTMLElement("form")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("header")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("hr")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("ins")}}, {{HTMLElement("kbd")}}, {{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("main")}}, {{HTMLElement("map")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("menu")}}, {{HTMLElement("meter")}}, {{HTMLElement("nav")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("ol")}}, {{HTMLElement("output")}}, {{HTMLElement("p")}}, {{HTMLElement("pre")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("s")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("section")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{SVGElement("svg")}}, {{HTMLElement("table")}}, {{HTMLElement("template")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("ul")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} e Text.

- -

Alguns outros elementos pertencem a essa categoria, mas somente se uma condição específica é realizada:

- - - -

Conteúdo de seccionamento

- -

Os elementos pertencentes ao modelo de conteúdo de seccionamento criam uma seção no esboço atual que define o escopo dos elementos {{HTMLElement("header")}}, elementos {{HTMLElement("footer")}} e na conteúdo do cabeçalho.

- -

Elementos pertencentes a essa categoria são {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("nav")}} e {{HTMLElement("section")}}. 

- -
-

Nota: Não confunda esse modelo de conteúdo com a categoria de seccionamento raiz que isola seus conteúdos dos esboços regulares.

-
- -

Conteúdo do cabeçalho

- -

O conteúdo do cabeçalho define o título de uma seção, se é marcada por um explícito elemento do conteúdo de seccionamento ou implicitamente definido pelo próprio conteúdo do cabeçalho.

- -

Os elementos pertencentes a essa categoria são {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}} e {{HTMLElement("hgroup")}}.

- -
-

Note: Embora provavelmente contenha algum conteúdo do cabeçalho, o {{HTMLElement("header")}} não faz parte do conteúdo do cabeçalho em si.

-
- -

Conteúdo fraseado

- -

O conteúdo fraseado define o texto e a marcação que ele contém. Séries de conteúdos fraseados compõem parágrafos.

- -

Os elementos pertencentes a essa categoria são {{HTMLElement("abbr")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{HTMLElement("command")}}, {{HTMLElement("datalist")}}, {{HTMLElement("dfn")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("kbd")}}, {{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("meter")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{SVGElement("svg")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} e texto simples (não consistindo somente de caracteres de espaço em branco).

- -

Alguns outros elementos pertencem a essa categoria, mas somente se uma condição específica é realizada:

- - - -

Conteúdo embutido

- -

O conteúdo embutido importa outro recurso ou insere conteúdo de uma outra linguagem de marcação no documento. Os elementos que pertencem a essa categoria incluem: {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{MathMLElement("math")}}, {{HTMLElement("object")}}, {{SVGElement("svg")}} e {{HTMLElement("video")}}.

- -

Conteúdo interativo

- -

O conteúdo interativo inclui elementos que são especificamente desenvolvidos para a interação do usuário. Os elementos que pertencem a essa categoria incluem: {{HTMLElement("a")}}, {{HTMLElement("button")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}}, e {{HTMLElement("textarea")}}. Alguns elementos pertencem a essa categoria somente sob condições específicas:

- - - -

Conteúdo associado ao form

- -

O conteúdo associado ao form compreende elementos que têm um formulário de proprietário, exposto por um atributo form. Um formulário de proprietário é ou um elemento {{HTMLElement("form")}} ou o elemento o qual o ID é especificado no atributo form.

- - - -

 Essa categoria contém várias sub-categorias:

- -
-
listed
-
Elementos que estão listados nas coleções IDL form.elements e fieldset.elements. Contém {{HTMLElement("button")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("select")}} e {{HTMLElement("textarea")}}.
-
labelable
-
Elementos que podem ser associados com elementos {{HTMLElement("label")}}. Contém {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("meter")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("select")}} e {{HTMLElement("textarea")}}.
-
submittable
-
Elementos que podem ser usados para construir o formulário de dados quando o formulário é enviado. Contém {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, e {{HTMLElement("textarea")}}.
-
resettable
-
Elementos que podem ser afetados quando um formulário é reinicializado. Contém {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("output")}},{{HTMLElement("select")}} e {{HTMLElement("textarea")}}.
-
- -

Modelo de conteúdo transparente

- -

Se um elemento tem um modelo de conteúdo transparente, então seu conteúdo deve ser estruturado de tal forma que ele seja um HTML5 válido, mesmo se o elemento transparente for removido e substituído pelos elementos filhos.

- -

Por exemplo, os elementos {{HTMLElement("del")}} e {{HTMLELement("ins")}} são transparentes:

- -
<p>We hold these truths to be <del><em>sacred &amp; undeniable</em></del> <ins>self-evident</ins>.</p>
-
- -

Se aqueles elementos forem removidos, esse fragmento continuaria sendo um HTML válido.

- -
<p>We hold these truths to be <em>sacred &amp; undeniable</em> self-evident.</p>
-
- -

Outros modelos de conteúdo

- -

Raiz de secionamento.

diff --git a/files/pt-br/web/guide/html/content_categories/index.html b/files/pt-br/web/guide/html/content_categories/index.html new file mode 100644 index 0000000000..7b55358b7b --- /dev/null +++ b/files/pt-br/web/guide/html/content_categories/index.html @@ -0,0 +1,148 @@ +--- +title: Categorias de conteúdo +slug: Web/Guide/HTML/Categorias_de_conteudo +tags: + - Avançado + - Guía + - HTML + - HTML5 + - NeedsUpdate + - Web +translation_of: Web/Guide/HTML/Content_categories +--- +

Cada elemento HTML deve permanecer, por regras, definindo que tipo de conteúdo ele pode ter. Essas regras estão agrupadas em modelos de conteúdo para muitos elementos. Cada elemento HTML pertence a nenhum, um, ou múltiplos modelos de conteúdo, cada regra de definição que o conteúdo do elemento deve seguir em um documento HTML.

+ +

Há três tipos de categorias de conteúdo:

+ + + +
Content_categories_venn.png
+ +

Principais categorias de conteúdo

+ +

Conteúdo de metadados

+ +

Os elementos pertencentes a categoria conteúdo de metadados modificam a apresentação ou o comportamento do resto do documento, define ligações para outros documentos ou transmite outras informações fora da banda.

+ +

Os elementos pertencentes a essa categoria são {{HTMLElement("base")}}, {{HTMLElement("command")}}, {{HTMLElement("link")}}, {{HTMLElement("meta")}}, {{HTMLElement("noscript")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} e {{HTMLElement("title")}}.

+ +

Conteúdo de fluxo

+ +

Elementos pertencentes a categoria de conteúdo de fluxo tipicamente contém texto ou conteúdo embutido. Eles são: {{HTMLElement("a")}}, {{HTMLElement("abbr")}}, {{HTMLElement("address")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}},{{HTMLElement("bdo")}}, {{HTMLElement("bdi")}}, {{HTMLElement("blockquote")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{HTMLElement("command")}}, {{HTMLElement("data")}}, {{HTMLElement("datalist")}}, {{HTMLElement("del")}}, {{HTMLElement("details")}}, {{HTMLElement("dfn")}}, {{HTMLElement("div")}}, {{HTMLElement("dl")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}}, {{HTMLElement("footer")}}, {{HTMLElement("form")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("header")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("hr")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("ins")}}, {{HTMLElement("kbd")}}, {{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("main")}}, {{HTMLElement("map")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("menu")}}, {{HTMLElement("meter")}}, {{HTMLElement("nav")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("ol")}}, {{HTMLElement("output")}}, {{HTMLElement("p")}}, {{HTMLElement("pre")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("s")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("section")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{SVGElement("svg")}}, {{HTMLElement("table")}}, {{HTMLElement("template")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("ul")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} e Text.

+ +

Alguns outros elementos pertencem a essa categoria, mas somente se uma condição específica é realizada:

+ + + +

Conteúdo de seccionamento

+ +

Os elementos pertencentes ao modelo de conteúdo de seccionamento criam uma seção no esboço atual que define o escopo dos elementos {{HTMLElement("header")}}, elementos {{HTMLElement("footer")}} e na conteúdo do cabeçalho.

+ +

Elementos pertencentes a essa categoria são {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("nav")}} e {{HTMLElement("section")}}. 

+ +
+

Nota: Não confunda esse modelo de conteúdo com a categoria de seccionamento raiz que isola seus conteúdos dos esboços regulares.

+
+ +

Conteúdo do cabeçalho

+ +

O conteúdo do cabeçalho define o título de uma seção, se é marcada por um explícito elemento do conteúdo de seccionamento ou implicitamente definido pelo próprio conteúdo do cabeçalho.

+ +

Os elementos pertencentes a essa categoria são {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}} e {{HTMLElement("hgroup")}}.

+ +
+

Note: Embora provavelmente contenha algum conteúdo do cabeçalho, o {{HTMLElement("header")}} não faz parte do conteúdo do cabeçalho em si.

+
+ +

Conteúdo fraseado

+ +

O conteúdo fraseado define o texto e a marcação que ele contém. Séries de conteúdos fraseados compõem parágrafos.

+ +

Os elementos pertencentes a essa categoria são {{HTMLElement("abbr")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{HTMLElement("command")}}, {{HTMLElement("datalist")}}, {{HTMLElement("dfn")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("kbd")}}, {{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("meter")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{SVGElement("svg")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} e texto simples (não consistindo somente de caracteres de espaço em branco).

+ +

Alguns outros elementos pertencem a essa categoria, mas somente se uma condição específica é realizada:

+ + + +

Conteúdo embutido

+ +

O conteúdo embutido importa outro recurso ou insere conteúdo de uma outra linguagem de marcação no documento. Os elementos que pertencem a essa categoria incluem: {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{MathMLElement("math")}}, {{HTMLElement("object")}}, {{SVGElement("svg")}} e {{HTMLElement("video")}}.

+ +

Conteúdo interativo

+ +

O conteúdo interativo inclui elementos que são especificamente desenvolvidos para a interação do usuário. Os elementos que pertencem a essa categoria incluem: {{HTMLElement("a")}}, {{HTMLElement("button")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}}, e {{HTMLElement("textarea")}}. Alguns elementos pertencem a essa categoria somente sob condições específicas:

+ + + +

Conteúdo associado ao form

+ +

O conteúdo associado ao form compreende elementos que têm um formulário de proprietário, exposto por um atributo form. Um formulário de proprietário é ou um elemento {{HTMLElement("form")}} ou o elemento o qual o ID é especificado no atributo form.

+ + + +

 Essa categoria contém várias sub-categorias:

+ +
+
listed
+
Elementos que estão listados nas coleções IDL form.elements e fieldset.elements. Contém {{HTMLElement("button")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("select")}} e {{HTMLElement("textarea")}}.
+
labelable
+
Elementos que podem ser associados com elementos {{HTMLElement("label")}}. Contém {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("meter")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("select")}} e {{HTMLElement("textarea")}}.
+
submittable
+
Elementos que podem ser usados para construir o formulário de dados quando o formulário é enviado. Contém {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, e {{HTMLElement("textarea")}}.
+
resettable
+
Elementos que podem ser afetados quando um formulário é reinicializado. Contém {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("output")}},{{HTMLElement("select")}} e {{HTMLElement("textarea")}}.
+
+ +

Modelo de conteúdo transparente

+ +

Se um elemento tem um modelo de conteúdo transparente, então seu conteúdo deve ser estruturado de tal forma que ele seja um HTML5 válido, mesmo se o elemento transparente for removido e substituído pelos elementos filhos.

+ +

Por exemplo, os elementos {{HTMLElement("del")}} e {{HTMLELement("ins")}} são transparentes:

+ +
<p>We hold these truths to be <del><em>sacred &amp; undeniable</em></del> <ins>self-evident</ins>.</p>
+
+ +

Se aqueles elementos forem removidos, esse fragmento continuaria sendo um HTML válido.

+ +
<p>We hold these truths to be <em>sacred &amp; undeniable</em> self-evident.</p>
+
+ +

Outros modelos de conteúdo

+ +

Raiz de secionamento.

diff --git a/files/pt-br/web/guide/html/content_editable/index.html b/files/pt-br/web/guide/html/content_editable/index.html deleted file mode 100644 index ed2a588e47..0000000000 --- a/files/pt-br/web/guide/html/content_editable/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: Content Editable -slug: Web/Guide/HTML/Content_Editable -translation_of: Web/Guide/HTML/Editable_content ---- -

No HTML5 qualquer elemento pode ser editado. Usando alguns eventos de JavaScript podemos transformar sua web page em um editor de texto completo e rápido. Este artigo fornece algumas informações sobre esta funcionalidade.

- -

Compatibilidade

- -

Conteúdo editável é totalmente compatível com os seguintes browsers.

- - - -

Ainda não é suportato pelo Opera Mini.

- -
-

*A maioria dos elementos HTML não suporta esta funcionalidade

-
- -

Como isso funciona?

- -

Defina o atributo {{DOMXRef("HTMLElement.contentEditable", "contentEditable")}} para true no seu elemento HTML. Isto pode ser usado na maioria dos elementos HTML.

- -

Exemplos

- -

Um exemplo simples:

- -
<!DOCTYPE html>
-<html>
-  <body>
-    <div contentEditable="true">
-      Este conteúdo pode ser editado.
-    </div>
-  </body>
-</html>
- -

Você pode ver o exemplo funcionando com com uma integração de JavaScript utilizando LocalStorage aqui. Com a fonte aqui.

- -

Veja também

- -
user_pref("capability.policy.policynames", "allowclipboard");
-user_pref("capability.policy.allowclipboard.sites", "https://www.mozilla.org");
-user_pref("capability.policy.allowclipboard.Clipboard.cutcopy", "allAccess");
-user_pref("capability.policy.allowclipboard.Clipboard.paste", "allAccess");
- -

Como interagir com o conteúdo  (Antiga API do  IE)  aqui

diff --git a/files/pt-br/web/guide/html/editable_content/index.html b/files/pt-br/web/guide/html/editable_content/index.html new file mode 100644 index 0000000000..ed2a588e47 --- /dev/null +++ b/files/pt-br/web/guide/html/editable_content/index.html @@ -0,0 +1,57 @@ +--- +title: Content Editable +slug: Web/Guide/HTML/Content_Editable +translation_of: Web/Guide/HTML/Editable_content +--- +

No HTML5 qualquer elemento pode ser editado. Usando alguns eventos de JavaScript podemos transformar sua web page em um editor de texto completo e rápido. Este artigo fornece algumas informações sobre esta funcionalidade.

+ +

Compatibilidade

+ +

Conteúdo editável é totalmente compatível com os seguintes browsers.

+ + + +

Ainda não é suportato pelo Opera Mini.

+ +
+

*A maioria dos elementos HTML não suporta esta funcionalidade

+
+ +

Como isso funciona?

+ +

Defina o atributo {{DOMXRef("HTMLElement.contentEditable", "contentEditable")}} para true no seu elemento HTML. Isto pode ser usado na maioria dos elementos HTML.

+ +

Exemplos

+ +

Um exemplo simples:

+ +
<!DOCTYPE html>
+<html>
+  <body>
+    <div contentEditable="true">
+      Este conteúdo pode ser editado.
+    </div>
+  </body>
+</html>
+ +

Você pode ver o exemplo funcionando com com uma integração de JavaScript utilizando LocalStorage aqui. Com a fonte aqui.

+ +

Veja também

+ +
user_pref("capability.policy.policynames", "allowclipboard");
+user_pref("capability.policy.allowclipboard.sites", "https://www.mozilla.org");
+user_pref("capability.policy.allowclipboard.Clipboard.cutcopy", "allAccess");
+user_pref("capability.policy.allowclipboard.Clipboard.paste", "allAccess");
+ +

Como interagir com o conteúdo  (Antiga API do  IE)  aqui

diff --git a/files/pt-br/web/guide/html/forms/form_validation/index.html b/files/pt-br/web/guide/html/forms/form_validation/index.html deleted file mode 100644 index 7f9146d0a4..0000000000 --- a/files/pt-br/web/guide/html/forms/form_validation/index.html +++ /dev/null @@ -1,813 +0,0 @@ ---- -title: Form data validation -slug: Web/Guide/HTML/Forms/Form_validation -translation_of: Learn/Forms/Form_validation ---- -
{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms/How_to_build_custom_form_widgets", "Learn/HTML/Forms")}}
- -

A validação de formulário nos ajuda a garantir que os usuários preencham os formulários no formato correto, garantindo que os dados enviados funcionem com êxito em nossos aplicativos. Este artigo apresentará conceitos e exemplos básicos sobre validação de formulário. Para mais informações adicionais, consulte o Constraint validation guide.

- - - - - - - - - - - - -
Pré-requisitos:Conhecimento em informática, uma compreensão razoável de HTML, CSS, e JavaScript.
Objetivo:Entender o que é validação de formulário, por que é importante e aplicação de várias técnicas para implementá-lo.
- -

O que é validação de formulário?

- -

Vá a qualquer site popular com um formulário de registro, e perceberá que eles dão feedback quando você não insere seus dados no formato esperado. Você receberá mensagens como:

- - - -

Isso é chamado de validação de formulário - quando você insere dados, o aplicativo da Web faz a verificação para ver se os dados estão corretos. Se estiver correto, o aplicativo permite que os dados sejam enviados ao servidor e (geralmente) salvos em um banco de dados; se não, você receberá uma mensagem de erro explicando quais correções precisam ser feitas. A validação de formulários pode ser implementada de várias maneiras diferentes.

- -


- Queremos tornar o preenchimento de formulários da web o mais fácil possível. Então, por que insistimos em validar nossos formulários? Existem três razões principais:

- - - -

Different types of form validation

- -

There are two different types of form validation which you'll encounter on the web:

- - - -

In the real world, developers tend to use a combination of client-side and server-side validation.

- -

Using built-in form validation

- -

One of the features of HTML5 is the ability to validate most user data without relying on scripts. This is done by using validation attributes on form elements, which allow you to specify rules for a form input like whether a value needs to be filled in, the minimum and maximum length of the data, whether it needs to be a number, an email address, or something else, and a pattern that it must match. If the entered data follows all the specified rules, it is considered valid; if not, it is considered invalid.

- -

When an element is valid:

- - - -

When an element is invalid:

- - - -

Validation constraints on input elements — starting simple

- -

In this section, we'll look at some of the different HTML5 features that can be used to validate {{HTMLElement("input")}} elements.

- -

Let's start with a simple example — an input that allows you to choose your favorite fruit out of a choice of banana or cherry. This involves a simple text {{HTMLElement("input")}} with a matching label, and a submit {{htmlelement("button")}}. You can find the source code on GitHub as fruit-start.html, and a live example below:

- - - -

{{EmbedLiveSample("Hidden_code", "100%", 50)}}

- -

To begin with, make a copy of fruit-start.html in a new directory on your hard drive.

- -

The required attribute

- -

The simplest HTML5 validation feature to use is the {{htmlattrxref("required", "input")}} attribute — if you want to make an input mandatory, you can mark the element using this attribute. When this attribute is set, the form won't submit (and will display an error message) when the input is empty (the input will also be considered invalid).

- -

Add a required attribute to your input, as shown below:

- -
<form>
-  <label for="choose">Would you prefer a banana or cherry?</label>
-  <input id="choose" name="i_like" required>
-  <button>Submit</button>
-</form>
- -

Also, take note of the CSS included in the example file:

- -
input:invalid {
-  border: 2px dashed red;
-}
-
-input:valid {
-  border: 2px solid black;
-}
- -

This causes the input to have a bright red dashed border when it is invalid, and a more subtle black border when valid. Try out the new behaviour in the example below:

- -

{{EmbedLiveSample("The_required_attribute", "100%", 80)}}

- -

Validating against a regular expression

- -

Another very common validation feature is the {{htmlattrxref("pattern","input")}} attribute, which expects a Regular Expression as its value. A regular expression (regex) is a pattern that can be used to match character combinations in text strings, so they are ideal for form validation (as well as a variety of other uses in JavaScript).

- -

Regexs are quite complex, and we do not intend to teach you them exhaustively in this article. Below are some examples to give you a basic idea of how they work:

- - - -

Anyway, let's implement an example — update your HTML to add a pattern attribute, like so:

- -
<form>
-  <label for="choose">Would you prefer a banana or a cherry?</label>
-  <input id="choose" name="i_like" required pattern="banana|cherry">
-  <button>Submit</button>
-</form>
- - - -

{{EmbedLiveSample("Validating_against_a_regular_expression", "100%", 80)}}

- -

In this example, the {{HTMLElement("input")}} element accepts one of two possible values: the string "banana" or the string "cherry".

- -

At this point, try changing the value inside the pattern attribute to equal some of the examples you saw earlier, and look at how that affects the values you can enter to make the input value valid. Try writing some of your own, and see how you get on! Try to make them fruit-related where possible, so your examples make sense!

- -
-

Note: Some {{HTMLElement("input")}} element types do not need a {{htmlattrxref("pattern","input")}} attribute to be validated. Specifying the email type for example validates the inputted value against a regular expression matching a well-formed email address (or a comma-separated list of email addresses if it has the {{htmlattrxref("multiple","input")}} attribute). As a further example, fields with the url type automatically require a properly-formed URL.

-
- -
-

Note: The {{HTMLElement("textarea")}} element does not support the {{htmlattrxref("pattern","input")}} attribute.

-
- -

Constraining the length of your entries

- -

All text fields created by {{HTMLElement("input")}} or {{HTMLElement("textarea")}} can be constrained in size using the {{htmlattrxref("minlength","input")}} and {{htmlattrxref("maxlength","input")}} attributes. A field is invalid if its value is shorter than the {{htmlattrxref("minlength","input")}} value or longer than the {{htmlattrxref("maxlength","input")}} value. Browsers often don't let the user type a longer value than expected into text fields anyway, but it is useful to have this fine-grained control available.

- -

For number fields (i.e. <input type="number">), the {{htmlattrxref("min","input")}} and {{htmlattrxref("max","input")}} attributes also provide a validation constraint. If the field's value is lower than the {{htmlattrxref("min","input")}} attribute or higher than the {{htmlattrxref("max","input")}} attribute, the field will be invalid.

- -

Let's look at another example. Create a new copy of the fruit-start.html file.

- -

Now delete the contents of the <body> element, and replace it with the following:

- -
<form>
-  <div>
-    <label for="choose">Would you prefer a banana or a cherry?</label>
-    <input type="text" id="choose" name="i_like" required minlength="6" maxlength="6">
-  </div>
-  <div>
-    <label for="number">How many would you like?</label>
-    <input type="number" id="number" name="amount" value="1" min="1" max="10">
-  </div>
-  <div>
-    <button>Submit</button>
-  </div>
-</form>
- - - - - -

Here is the example running live:

- -

{{EmbedLiveSample("Constraining_the_length_of_your_entries", "100%", 100)}}

- -
-

Note: <input type="number"> (and other types, like range) can also take a {{htmlattrxref("step", "input")}} attribute, which specifies what increment the value will go up or down by when the input controls are used (like the up and down number buttons).

-
- -

Full example

- -

Here is a full example to show off usage of HTML's built-in validation features:

- -
<form>
-  <p>
-    <fieldset>
-      <legend>Title<abbr title="This field is mandatory">*</abbr></legend>
-      <input type="radio" required name="title" id="r1" value="Mr"><label for="r1">Mr.</label>
-      <input type="radio" required name="title" id="r2" value="Ms"><label for="r2">Ms.</label>
-    </fieldset>
-  </p>
-  <p>
-    <label for="n1">How old are you?</label>
-    <!-- The pattern attribute can act as a fallback for browsers which
-         don't implement the number input type but support the pattern attribute.
-         Please note that browsers that support the pattern attribute will make it
-         fail silently when used with a number field.
-         Its usage here acts only as a fallback -->
-    <input type="number" min="12" max="120" step="1" id="n1" name="age"
-           pattern="\d+">
-  </p>
-  <p>
-    <label for="t1">What's your favorite fruit?<abbr title="This field is mandatory">*</abbr></label>
-    <input type="text" id="t1" name="fruit" list="l1" required
-           pattern="[Bb]anana|[Cc]herry|[Aa]pple|[Ss]trawberry|[Ll]emon|[Oo]range">
-    <datalist id="l1">
-      <option>Banana</option>
-      <option>Cherry</option>
-      <option>Apple</option>
-      <option>Strawberry</option>
-      <option>Lemon</option>
-      <option>Orange</option>
-    </datalist>
-  </p>
-  <p>
-    <label for="t2">What's your e-mail?</label>
-    <input type="email" id="t2" name="email">
-  </p>
-  <p>
-    <label for="t3">Leave a short message</label>
-    <textarea id="t3" name="msg" maxlength="140" rows="5"></textarea>
-  </p>
-  <p>
-    <button>Submit</button>
-  </p>
-</form>
- -
body {
-  font: 1em sans-serif;
-  padding: 0;
-  margin : 0;
-}
-
-form {
-  max-width: 200px;
-  margin: 0;
-  padding: 0 5px;
-}
-
-p > label {
-  display: block;
-}
-
-input[type=text],
-input[type=email],
-input[type=number],
-textarea,
-fieldset {
-/* required to properly style form
-   elements on WebKit based browsers */
-  -webkit-appearance: none;
-
-  width : 100%;
-  border: 1px solid #333;
-  margin: 0;
-
-  font-family: inherit;
-  font-size: 90%;
-
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-input:invalid {
-  box-shadow: 0 0 5px 1px red;
-}
-
-input:focus:invalid {
-  box-shadow: none;
-}
- -

{{EmbedLiveSample("Full_example", "100%", 420)}}

- -

See Validation-related attributes for a complete list of attributes that can be used to constrain input values, and the input types that support them.

- -

Customized error messages

- -

As seen in the examples above, each time the user tries to submit an invalid form, the browser displays an error message. The way this message is displayed depends on the browser.

- -

These automated messages have two drawbacks:

- - - - - - - - - - - - - - - - - - - - - - - - - -
French versions of feedback messages on an English page
BrowserRendering
Firefox 17 (Windows 7)Example of an error message with Firefox in French on an English page
Chrome 22 (Windows 7)Example of an error message with Chrome in French on an English page
Opera 12.10 (Mac OSX)Example of an error message with Opera in French on an English page
- -

To customize the appearance and text of these messages, you must use JavaScript; there is no way to do it using just HTML and CSS.

- -

HTML5 provides the constraint validation API to check and customize the state of a form element. Among other things, it's possible to change the text of the error message. Let's see a quick example:

- -
<form>
-  <label for="mail">I would like you to provide me an e-mail</label>
-  <input type="email" id="mail" name="mail">
-  <button>Submit</button>
-</form>
- -

In JavaScript, you call the setCustomValidity() method:

- -
var email = document.getElementById("mail");
-
-email.addEventListener("input", function (event) {
-  if (email.validity.typeMismatch) {
-    email.setCustomValidity("I expect an e-mail, darling!");
-  } else {
-    email.setCustomValidity("");
-  }
-});
- -

{{EmbedLiveSample("Customized_error_messages", "100%", 80)}}

- -

Validating forms using JavaScript

- -

If you want to take control over the look and feel of native error messages, or if you want to deal with browsers that do not support HTML's built-in form validation, you must use JavaScript.

- -

The constraint validation API

- -

More and more browsers now support the constraint validation API, and it's becoming reliable. This API consists of a set of methods and properties available on specific form element interfaces:

- - - -

Constraint validation API properties

- - - - - - - - - - - - - - - - - - - - - - -
PropertyDescription
validationMessageA localized message describing the validation constraints that the control does not satisfy (if any), or the empty string if the control is not a candidate for constraint validation (willValidate is false), or the element's value satisfies its constraints.
validityA {{domxref("ValidityState")}} object describing the validity state of the element. See that article for details of possible validity states.
willValidateReturns true if the element will be validated when the form is submitted; false otherwise.
- -

Constraint validation API methods

- - - - - - - - - - - - - - - - - - - - - - -
MethodDescription
checkValidity()Returns true if the element's value has no validity problems; false otherwise. If the element is invalid, this method also causes an {{event("invalid")}} event at the element.
{{domxref("HTMLFormElement.reportValidity()")}}Returns true if the element or its child controls satisfy validation constraints. When false is returned, cancelable {{event("invalid")}} events are fired for each invalid element and validation problems are reported to the user.
setCustomValidity(message)Adds a custom error message to the element; if you set a custom error message, the element is considered to be invalid, and the specified error is displayed. This lets you use JavaScript code to establish a validation failure other than those offered by the standard constraint validation API. The message is shown to the user when reporting the problem.
-
- If the argument is the empty string, the custom error is cleared.
- -

For legacy browsers, it's possible to use a polyfill such as Hyperform to compensate for the lack of support for the constraint validation API. Since you're already using JavaScript, using a polyfill isn't an added burden to your Web site or Web application's design or implementation.

- -

Example using the constraint validation API

- -

Let's see how to use this API to build custom error messages. First, the HTML:

- -
<form novalidate>
-  <p>
-    <label for="mail">
-      <span>Please enter an email address:</span>
-      <input type="email" id="mail" name="mail">
-      <span class="error" aria-live="polite"></span>
-    </label>
-  </p>
-  <button>Submit</button>
-</form>
- -

This simple form uses the {{htmlattrxref("novalidate","form")}} attribute to turn off the browser's automatic validation; this lets our script take control over validation. However, this doesn't disable support for the constraint validation API nor the application of the CSS pseudo-class {{cssxref(":valid")}}, {{cssxref(":invalid")}}, {{cssxref(":in-range")}} and {{cssxref(":out-of-range")}} classes. That means that even though the browser doesn't automatically check the validity of the form before sending its data, you can still do it yourself and style the form accordingly.

- -

The aria-live attribute makes sure that our custom error message will be presented to everyone, including those using assistive technologies such as screen readers.

- -
CSS
- -

This CSS styles our form and the error output to look more attractive.

- -
/* This is just to make the example nicer */
-body {
-  font: 1em sans-serif;
-  padding: 0;
-  margin : 0;
-}
-
-form {
-  max-width: 200px;
-}
-
-p * {
-  display: block;
-}
-
-input[type=email]{
-  -webkit-appearance: none;
-
-  width: 100%;
-  border: 1px solid #333;
-  margin: 0;
-
-  font-family: inherit;
-  font-size: 90%;
-
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-/* This is our style for the invalid fields */
-input:invalid{
-  border-color: #900;
-  background-color: #FDD;
-}
-
-input:focus:invalid {
-  outline: none;
-}
-
-/* This is the style of our error messages */
-.error {
-  width  : 100%;
-  padding: 0;
-
-  font-size: 80%;
-  color: white;
-  background-color: #900;
-  border-radius: 0 0 5px 5px;
-
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-.error.active {
-  padding: 0.3em;
-}
- -
JavaScript
- -

The following JavaScript code handles the custom error validation.

- -
// There are many ways to pick a DOM node; here we get the form itself and the email
-// input box, as well as the span element into which we will place the error message.
-
-var form  = document.getElementsByTagName('form')[0];
-var email = document.getElementById('mail');
-var error = document.querySelector('.error');
-
-email.addEventListener("input", function (event) {
-  // Each time the user types something, we check if the
-  // email field is valid.
-  if (email.validity.valid) {
-    // In case there is an error message visible, if the field
-    // is valid, we remove the error message.
-    error.innerHTML = ""; // Reset the content of the message
-    error.className = "error"; // Reset the visual state of the message
-  }
-}, false);
-form.addEventListener("submit", function (event) {
-  // Each time the user tries to send the data, we check
-  // if the email field is valid.
-  if (!email.validity.valid) {
-
-    // If the field is not valid, we display a custom
-    // error message.
-    error.innerHTML = "I expect an e-mail, darling!";
-    error.className = "error active";
-    // And we prevent the form from being sent by canceling the event
-    event.preventDefault();
-  }
-}, false);
- -

Here is the live result:

- -

{{EmbedLiveSample("Example_using_the_constraint_validation_API", "100%", 130)}}

- -

The constraint validation API gives you a powerful tool to handle form validation, letting you have enormous control over the user interface above and beyond what you can do just with HTML and CSS alone.

- -

Validating forms without a built-in API

- -

Sometimes, such as with legacy browsers or custom widgets, you will not be able to (or will not want to) use the constraint validation API. In that case, you're still able to use JavaScript to validate your form. Validating a form is more a question of user interface than real data validation.

- -

To validate a form, you have to ask yourself a few questions:

- -
-
What kind of validation should I perform?
-
You need to determine how to validate your data: string operations, type conversion, regular expressions, etc. It's up to you. Just remember that form data is always text and is always provided to your script as strings.
-
What should I do if the form does not validate?
-
This is clearly a UI matter. You have to decide how the form will behave: Does the form send the data anyway? Should you highlight the fields which are in error? Should you display error messages?
-
How can I help the user to correct invalid data?
-
In order to reduce the user's frustration, it's very important to provide as much helpful information as possible in order to guide them in correcting their inputs. You should offer up-front suggestions so they know what's expected, as well as clear error messages. If you want to dig into form validation UI requirements, there are some useful articles you should read: - -
-
- -

An example that doesn't use the constraint validation API

- -

In order to illustrate this, let's rebuild the previous example so that it works with legacy browsers:

- -
<form>
-  <p>
-    <label for="mail">
-        <span>Please enter an email address:</span>
-        <input type="text" class="mail" id="mail" name="mail">
-        <span class="error" aria-live="polite"></span>
-    </label>
-  <p>
-  <!-- Some legacy browsers need to have the `type` attribute
-       explicitly set to `submit` on the `button`element -->
-  <button type="submit">Submit</button>
-</form>
- -

As you can see, the HTML is almost the same; we just removed the HTML validation features. Note that ARIA is an independent specification that's not specifically related to HTML5.

- -
CSS
- -

Similarly, the CSS doesn't need to change very much; we just turn the {{cssxref(":invalid")}} CSS pseudo-class into a real class and avoid using the attribute selector that does not work on Internet Explorer 6.

- -
/* This is just to make the example nicer */
-body {
-  font: 1em sans-serif;
-  padding: 0;
-  margin : 0;
-}
-
-form {
-  max-width: 200px;
-}
-
-p * {
-  display: block;
-}
-
-input.mail {
-  -webkit-appearance: none;
-
-  width: 100%;
-  border: 1px solid #333;
-  margin: 0;
-
-  font-family: inherit;
-  font-size: 90%;
-
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-/* This is our style for the invalid fields */
-input.invalid{
-  border-color: #900;
-  background-color: #FDD;
-}
-
-input:focus.invalid {
-  outline: none;
-}
-
-/* This is the style of our error messages */
-.error {
-  width  : 100%;
-  padding: 0;
-
-  font-size: 80%;
-  color: white;
-  background-color: #900;
-  border-radius: 0 0 5px 5px;
-
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-.error.active {
-  padding: 0.3em;
-}
- -
JavaScript
- -

The big changes are in the JavaScript code, which needs to do much more of the heavy lifting.

- -
// There are fewer ways to pick a DOM node with legacy browsers
-var form  = document.getElementsByTagName('form')[0];
-var email = document.getElementById('mail');
-
-// The following is a trick to reach the next sibling Element node in the DOM
-// This is dangerous because you can easily build an infinite loop.
-// In modern browsers, you should prefer using element.nextElementSibling
-var error = email;
-while ((error = error.nextSibling).nodeType != 1);
-
-// As per the HTML5 Specification
-var emailRegExp = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
-
-// Many legacy browsers do not support the addEventListener method.
-// Here is a simple way to handle this; it's far from the only one.
-function addEvent(element, event, callback) {
-  var previousEventCallBack = element["on"+event];
-  element["on"+event] = function (e) {
-    var output = callback(e);
-
-    // A callback that returns `false` stops the callback chain
-    // and interrupts the execution of the event callback.
-    if (output === false) return false;
-
-    if (typeof previousEventCallBack === 'function') {
-      output = previousEventCallBack(e);
-      if(output === false) return false;
-    }
-  }
-};
-
-// Now we can rebuild our validation constraint
-// Because we do not rely on CSS pseudo-class, we have to
-// explicitly set the valid/invalid class on our email field
-addEvent(window, "load", function () {
-  // Here, we test if the field is empty (remember, the field is not required)
-  // If it is not, we check if its content is a well-formed e-mail address.
-  var test = email.value.length === 0 || emailRegExp.test(email.value);
-
-  email.className = test ? "valid" : "invalid";
-});
-
-// This defines what happens when the user types in the field
-addEvent(email, "input", function () {
-  var test = email.value.length === 0 || emailRegExp.test(email.value);
-  if (test) {
-    email.className = "valid";
-    error.innerHTML = "";
-    error.className = "error";
-  } else {
-    email.className = "invalid";
-  }
-});
-
-// This defines what happens when the user tries to submit the data
-addEvent(form, "submit", function () {
-  var test = email.value.length === 0 || emailRegExp.test(email.value);
-
-  if (!test) {
-    email.className = "invalid";
-    error.innerHTML = "I expect an e-mail, darling!";
-    error.className = "error active";
-
-    // Some legacy browsers do not support the event.preventDefault() method
-    return false;
-  } else {
-    email.className = "valid";
-    error.innerHTML = "";
-    error.className = "error";
-  }
-});
- -

The result looks like this:

- -

{{EmbedLiveSample("An_example_that_doesn't_use_the_constraint_validation_API", "100%", 130)}}

- -

As you can see, it's not that hard to build a validation system on your own. The difficult part is to make it generic enough to use it both cross-platform and on any form you might create. There are many libraries available to perform form validation; you shouldn't hesitate to use them. Here are a few examples:

- - - -

Remote validation

- -

In some cases, it can be useful to perform some remote validation. This kind of validation is necessary when the data entered by the user is tied to additional data stored on the server side of your application. One use case for this is registration forms, where you ask for a username. To avoid duplication, it's smarter to perform an AJAX request to check the availability of the username rather than asking the user to send the data, then send back the form with an error.

- -

Performing such a validation requires taking a few precautions:

- - - -

Conclusion

- -

Form validation does not require complex JavaScript, but it does require thinking carefully about the user. Always remember to help your user to correct the data they provide. To that end, be sure to:

- - - -

{{PreviousMenuNext("Learn/HTML/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms/How_to_build_custom_form_widgets", "Learn/HTML/Forms")}}

- -

In this module

- - diff --git a/files/pt-br/web/guide/html/forms/how_to_build_custom_form_widgets/index.html b/files/pt-br/web/guide/html/forms/how_to_build_custom_form_widgets/index.html deleted file mode 100644 index 76e202e685..0000000000 --- a/files/pt-br/web/guide/html/forms/how_to_build_custom_form_widgets/index.html +++ /dev/null @@ -1,786 +0,0 @@ ---- -title: How to build custom form widgets -slug: Web/Guide/HTML/Forms/How_to_build_custom_form_widgets -translation_of: Learn/Forms/How_to_build_custom_form_controls ---- -
{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms/Sending_forms_through_JavaScript", "Learn/HTML/Forms")}}
- -

There are many cases where available HTML form widgets are just nThere are many cases where available HTML form widgets are just not enough. If you want to perform advanced styling on some widgets such as the {{HTMLElement("select")}} element or if you want to provide custom behaviors, you have no choice but to build your own widgets.

- -

In this article, we will see how to build such a widget. To that end, we will work with an example: rebuilding the {{HTMLElement("select")}} element.

- -
-

Note: We'll focus on building the widgets, not on how to make the code generic and reusable; that would involve some non-trival JavaScript code and DOM manipulation in an unknown context, and that is out of the scope of this article.

-
- -

Design, structure, and semantics

- -

Before building a custom widget, you should start by figuring out exactly what you want. This will save you some precious time. In particular, it's important to clearly define all the states of your widget. To do this, it's good to start with an existing widget whose states and behavior are well known, so that you can simply mimic those as much as possible.

- -

In our example, we will rebuild the {{HTMLElement("select")}} element. Here is the result we want to achieve:

- -

The three states of a select box

- -

This screenshot shows the three main states of our widget: the normal state (on the left); the active state (in the middle) and the open state (on the right).

- -

In terms of behavior, we want our widget to be usable with a mouse as well as with a keyboard, just like any native widget. Let's start by defining how the widget reaches each state:

- -
-
The widget is in its normal state when:
-
-
    -
  • the page loads
    • -
  • the widget was active and the user clicks anywhere outside the widget
    • -
  • the widget was active and the user moves the focus to another widget using the keyboard
    • -
- -
-

Note: Moving the focus around the page is usually done through hitting the tab key, but this is not standard everywhere. For example cycling through links on a page is done in Safari by default using the Option+Tab combination.

-
-
-
The widget is in its active state when:
-
-
    -
  • the user clicks on it
    • -
  • the user hits the tab key and it gains focus
    • -
  • the widget was in its open state and the user clicks on the widget.
    • -
-
-
The widget is in its open state when:
-
-
    -
  • the widget is in any other state than open and the user clicks on it
    • -
-
-
- -

Once we know how to change states, it is important to define how to change the widget's value:

- -
-
The value changes when:
-
-
    -
  • the user clicks on an option when the widget is in the open state
    • -
  • the user hits the up or down arrow keys when the widget is in its active state
    • -
-
-
- -

Finally, let's define how the widget's options will behave:

- - - -

For the purposes of our example, we'll stop with that; however, if you're a careful reader, you'll notice that some behaviors are missing. For example, what do you think will happen if the user hits the tab key while the widget is in its open state? The answer is... nothing. OK, the right behavior seems obvious but the fact is, because it's not defined in our specs, it is very easy to overlook this behavior. This is especially true in a team environment when the people who design the widget's behavior are different from the ones who implement it.

- -

Another fun example: what will happen if the user hits the up or down arrow keys while the widget is in the open state? This one is a little bit trickier. If you consider that the active state and the open state are completely different, the answer is again "nothing will happen" because we did not define any keyboard interactions for the opened state. On the other hand, if you consider that the active state and the open state overlap a bit, the value may change but the option will definitely not be highlighted accordingly, once again because we did not define any keyboard interactions over options when the widget is in its opened state (we have only defined what should happen when the widget is opened, but nothing after that).

- -

In our example, the missing specifications are obvious so we will handle them, but it can be a real problem on exotic new widgets, for which nobody has the slightest idea of what the right behavior is. So it's always good to spend time in this design stage, because if you define a behavior poorly, or forget to define one, it will be very hard to redefine it once the users have gotten used to it. If you have doubts, ask for the opinions of others, and if you have the budget for it, do not hesitate to perform user tests. This process is called UX Design. If you want to learn more about this topic, you should check out the following helpful resources:

- - - -
-

Note: Also, in most systems there is a way to open the {{HTMLElement("select")}} element to look at all the available choices (this is the same as clicking the {{HTMLElement("select")}} element with a mouse). This is achieved with Alt+Down arrow under Windows and was not implemented in our example —but it would be easy to do so, as the mechanism has already been implemented for the click event.

-
- -

Defining the HTML structure and semantics

- -

Now that the widget's basic functionality has been decided upon, it's time to start building our widget. The first step is to define its HTML structure and to give it some basic semantics. Here is what we need to rebuild a {{HTMLElement("select")}} element:

- -
<!-- This is our main container for our widget.
-     The tabindex attribute is what allows the user to focus the widget.
-     We'll see later that it's better to set it through JavaScript. -->
-<div class="select" tabindex="0">
-
-  <!-- This container will be used to display the current value of the widget -->
-  <span class="value">Cherry</span>
-
-  <!-- This container will contain all the options available for our widget.
-       Because it's a list, it makes sense to use the ul element. -->
-  <ul class="optList">
-    <!-- Each option only contains the value to be displayed, we'll see later
-         how to handle the real value that will be sent with the form data -->
-    <li class="option">Cherry</li>
-    <li class="option">Lemon</li>
-    <li class="option">Banana</li>
-    <li class="option">Strawberry</li>
-    <li class="option">Apple</li>
-  </ul>
-
-</div>
- -

Note the use of class names; these identify each relevant part regardless of the actual underlying HTML elements used. This is important to make sure that we will not bind our CSS and JavaScript to a strong HTML structure, so that we can make implementation changes later without breaking code that uses the widget. For example if you wish to implement the equivalent of the {{HTMLElement("optgroup")}} element.

- -

Creating the look and feel using CSS

- -

Now that we have a structure, we can start designing our widget. The whole point of building this custom widget is to be able to style this widget exactly as we want. To that end, we will split our CSS work into two parts: the first part will be the CSS rules absolutely necessary to have our widget behave like a {{HTMLElement("select")}} element, and the second part will consist of the fancy styles used to make it look the way we want.

- -

Required styles

- -

The required styles are those necessary to handle the three states of our widget.

- -
.select {
-  /* This will create a positioning context for the list of options */
-  position: relative;
-
-  /* This will make our widget become part of the text flow and sizable at the same time */
-  display : inline-block;
-}
- -

We need an extra class active to define the look and feel of our widget when it is in its active state. Because our widget is focusable, we double this custom style with the {{cssxref(":focus")}} pseudo-class in order to be sure they will behave the same.

- -
.select .active,
-.select:focus {
-  outline: none;
-
-  /* This box-shadow property is not exactly required, however it's so important to be sure
-     the active state is visible that we use it as a default value, feel free to override it. */
-  box-shadow: 0 0 3px 1px #227755;
-}
- -

Now, let's handle the list of options:

- -
/* The .select selector here is syntactic sugar to be sure the classes we define are
-   the ones inside our widget. */
-.select .optList {
-  /* This will make sure our list of options will be displayed below the value
-     and out of the HTML flow */
-  position : absolute;
-  top      : 100%;
-  left     : 0;
-}
- -

We need an extra class to handle when the list of options is hidden. This is necessary in order to manage the differences between the active state and the open state that do not exactly match.

- -
.select .optList.hidden {
-  /* This is a simple way to hide the list in an accessible way,
-     we will talk more about accessibility in the end */
-  max-height: 0;
-  visibility: hidden;
-}
- -

Beautification

- -

So now that we have the basic functionality in place, the fun can start. The following is just an example of what is possible, and will match the screenshot at the beginning of this article. However, you should feel free to experiment and see what you can come up with.

- -
.select {
-  /* All sizes will be expressed with the em value for accessibility reasons
-     (to make sure the widget remains resizable if the user uses the
-     browser's zoom in a text-only mode). The computations are made
-     assuming 1em == 16px which is the default value in most browsers.
-     If you are lost with px to em conversion, try http://riddle.pl/emcalc/ */
-  font-size   : 0.625em; /* this (10px) is the new font size context for em value in this context */
-  font-family : Verdana, Arial, sans-serif;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  /* We need extra room for the down arrow we will add */
-  padding : .1em 2.5em .2em .5em; /* 1px 25px 2px 5px */
-  width   : 10em; /* 100px */
-
-  border        : .2em solid #000; /* 2px */
-  border-radius : .4em; /* 4px */
-  box-shadow    : 0 .1em .2em rgba(0,0,0,.45); /* 0 1px 2px */
-
-  /* The first declaration is for browsers that do not support linear gradients.
-     The second declaration is because WebKit based browsers haven't unprefixed it yet.
-     If you want to support legacy browsers, try http://www.colorzilla.com/gradient-editor/ */
-  background : #F0F0F0;
-  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
-  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
-}
-
-.select .value {
-  /* Because the value can be wider than our widget, we have to make sure it will not
-     change the widget's width */
-  display  : inline-block;
-  width    : 100%;
-  overflow : hidden;
-
-  vertical-align: top;
-
-  /* And if the content overflows, it's better to have a nice ellipsis. */
-  white-space  : nowrap;
-  text-overflow: ellipsis;
-}
- -

We don't need an extra element to design the down arrow; instead, we're using the {{cssxref(":after")}} pseudo-element. However, it could also be implemented using a simple background image on the select class.

- -
.select:after {
-  content : "▼"; /* We use the unicode caracter U+25BC; see http://www.utf8-chartable.de */
-  position: absolute;
-  z-index : 1; /* This will be important to keep the arrow from overlapping the list of options */
-  top     : 0;
-  right   : 0;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  height  : 100%;
-  width   : 2em;  /* 20px */
-  padding-top : .1em; /* 1px */
-
-  border-left  : .2em solid #000; /* 2px */
-  border-radius: 0 .1em .1em 0;  /* 0 1px 1px 0 */
-
-  background-color : #000;
-  color : #FFF;
-  text-align : center;
-}
- -

Next, let's style the list of options:

- -
.select .optList {
-  z-index : 2; /* We explicitly said the list of options will always overlap the down arrow */
-
-  /* this will reset the default style of the ul element */
-  list-style: none;
-  margin : 0;
-  padding: 0;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  /* This will ensure that even if the values are smaller than the widget,
-     the list of options will be as large as the widget itself */
-  min-width : 100%;
-
-  /* In case the list is too long, its content will overflow vertically
-     (which will add a vertical scrollbar automatically) but never horizontally
-     (because we haven't set a width, the list will adjust its width automatically.
-     If it can't, the content will be truncated) */
-  max-height: 10em; /* 100px */
-  overflow-y: auto;
-  overflow-x: hidden;
-
-  border: .2em solid #000; /* 2px */
-  border-top-width : .1em; /* 1px */
-  border-radius: 0 0 .4em .4em; /* 0 0 4px 4px */
-
-  box-shadow: 0 .2em .4em rgba(0,0,0,.4); /* 0 2px 4px */
-  background: #f0f0f0;
-}
- -

For the options, we need to add a highlight class to be able to identify the value the user will pick (or has picked).

- -
.select .option {
-  padding: .2em .3em; /* 2px 3px */
-}
-
-.select .highlight {
-  background: #000;
-  color: #FFFFFF;
-}
- -

So here's the result with our three states:

- - - - - - - - - - - - - - - - - - - -
Basic stateActive stateOpen state
{{EmbedLiveSample("Basic_state",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_1")}}{{EmbedLiveSample("Active_state",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_1")}}{{EmbedLiveSample("Open_state",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_1")}}
Check out the source code
- -

Bring your widget to life with JavaScript

- -

Now that our design and structure are ready, we can write the JavaScript code to make the widget actually work.

- -
-

Warning: The following code is educational and should not be used as-is. Among many things, as we'll see, it is not future-proof and it will not work on legacy browsers. It also has redundant parts that should be optimized in production code.

-
- -
-

Note: Creating reusable widgets is something that can be a bit tricky. The W3C Web Component draft is one of the answers to this specific issue. The X-Tag project is a test implementation of this specification; we encourage you to take a look at it.

-
- -

Why isn't it working?

- -

Before we start, it's important to remember something very important about JavaScript: inside a browser, it's an unreliable technology. When you are building custom widgets, you'll have to rely on JavaScript because it's a necessary thread to tie everything together. However, there are many cases in which JavaScript isn't able to run in the browser:

- - - -

Because of these risks, it's really important to seriously consider what will happen if JavaScript isn't working. Dealing in detail with this issue is out of the scope of this article because it's closely linked to how you want to make your script generic and reusable, but we'll consider the basics of this in our example.

- -

In our example, if our JavaScript code isn't running, we'll fall back to displaying a standard {{HTMLElement("select")}} element. To achieve this, we need two things.

- -

First, we need to add a regular {{HTMLElement("select")}} element before each use of our custom widget. This is actually also required in order to be able to send data from our custom widget along with the rest of our form data; more about this later.

- -
<body class="no-widget">
-  <form>
-    <select name="myFruit">
-      <option>Cherry</option>
-      <option>Lemon</option>
-      <option>Banana</option>
-      <option>Strawberry</option>
-      <option>Apple</option>
-    </select>
-
-    <div class="select">
-      <span class="value">Cherry</span>
-      <ul class="optList hidden">
-        <li class="option">Cherry</li>
-        <li class="option">Lemon</li>
-        <li class="option">Banana</li>
-        <li class="option">Strawberry</li>
-        <li class="option">Apple</li>
-      </ul>
-    </div>
-  </form>
-
-</body>
- -

Second, we need two new classes to let us hide the unneeded element (that is, the "real" {{HTMLElement("select")}} element if our script isn't running, or the custom widget if it is running). Note that by default, our HTML code hides our custom widget.

- -
.widget select,
-.no-widget .select {
-  /* This CSS selector basically says:
-     - either we have set the body class to "widget" and thus we hide the actual {{HTMLElement("select")}} element
-     - or we have not changed the body class, therefore the body class is still "no-widget",
-       so the elements whose class is "select" must be hidden */
-  position : absolute;
-  left     : -5000em;
-  height   : 0;
-  overflow : hidden;
-}
- -

Now we just need a JavaScript switch to determine if the script is running or not. This switch is very simple: if at page load time our script is running, it will remove the no-widget class and add the widget class, thereby swapping the visibility of the {{HTMLElement("select")}} element and of the custom widget.

- -
window.addEventListener("load", function () {
-  document.body.classList.remove("no-widget");
-  document.body.classList.add("widget");
-});
- - - - - - - - - - - - - - - - - -
Without JSWith JS
{{EmbedLiveSample("No_JS",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_2")}}{{EmbedLiveSample("JS",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_2")}}
Check out the source code
- -
-

Note: If you really want to make your code generic and reusable, instead of doing a class switch it's far better to just add the widget class to hide the {{HTMLElement("select")}} elements, and to dynamically add the DOM tree representing the custom widget after every {{HTMLElement("select")}} element in the page.

-
- -

Making the job easier

- -

In the code we are about to build, we will use the standard DOM API to do all the work we need. However, although DOM API support has gotten much better in browsers, there are always issues with legacy browsers (especially with good old Internet Explorer).

- -

If you want to avoid trouble with legacy browsers, there are two ways to do so: using a dedicated framework such as jQuery, $dom, prototype, Dojo, YUI, or the like, or by polyfilling the missing feature you want to use (which can easily be done through conditional loading, with the yepnope library for example).

- -

The features we plan to use are the following (ordered from the riskiest to the safest):

- -
    -
  1. {{domxref("element.classList","classList")}}
    2. -
  2. {{domxref("EventTarget.addEventListener","addEventListener")}}
    3. -
  3. forEach (This is not DOM but modern JavaScript)
    4. -
  4. {{domxref("element.querySelector","querySelector")}} and {{domxref("element.querySelectorAll","querySelectorAll")}}
    5. -
- -

Beyond the availability of those specific features, there is still one issue remaining before starting. The object returned by the {{domxref("element.querySelectorAll","querySelectorAll()")}} function is a {{domxref("NodeList")}} rather than an Array. This is important because Array objects support the forEach function, but {{domxref("NodeList")}} doesn't. Because {{domxref("NodeList")}} really looks like an Array and because forEach is so convenient to use, we can easily add the support of forEach to {{domxref("NodeList")}} in order to make our life easier, like so:

- -
NodeList.prototype.forEach = function (callback) {
-  Array.prototype.forEach.call(this, callback);
-}
- -

We weren't kidding when we said it's easy to do.

- -

Building event callbacks

- -

The ground is ready, we can now start to define all the functions that will be used each time the user interacts with our widget.

- -
// This function will be used each time we want to deactivate a custom widget
-// It takes one parameter
-// select : the DOM node with the `select` class to deactivate
-function deactivateSelect(select) {
-
-  // If the widget is not active there is nothing to do
-  if (!select.classList.contains('active')) return;
-
-  // We need to get the list of options for the custom widget
-  var optList = select.querySelector('.optList');
-
-  // We close the list of option
-  optList.classList.add('hidden');
-
-  // and we deactivate the custom widget itself
-  select.classList.remove('active');
-}
-
-// This function will be used each time the user wants to (de)activate the widget
-// It takes two parameters:
-// select : the DOM node with the `select` class to activate
-// selectList : the list of all the DOM nodes with the `select` class
-function activeSelect(select, selectList) {
-
-  // If the widget is already active there is nothing to do
-  if (select.classList.contains('active')) return;
-
-  // We have to turn off the active state on all custom widgets
-  // Because the deactivateSelect function fulfill all the requirement of the
-  // forEach callback function, we use it directly without using an intermediate
-  // anonymous function.
-  selectList.forEach(deactivateSelect);
-
-  // And we turn on the active state for this specific widget
-  select.classList.add('active');
-}
-
-// This function will be used each time the user wants to open/closed the list of options
-// It takes one parameter:
-// select : the DOM node with the list to toggle
-function toggleOptList(select) {
-
-  // The list is kept from the widget
-  var optList = select.querySelector('.optList');
-
-  // We change the class of the list to show/hide it
-  optList.classList.toggle('hidden');
-}
-
-// This function will be used each time we need to highlight an option
-// It takes two parameters:
-// select : the DOM node with the `select` class containing the option to highlight
-// option : the DOM node with the `option` class to highlight
-function highlightOption(select, option) {
-
-  // We get the list of all option available for our custom select element
-  var optionList = select.querySelectorAll('.option');
-
-  // We remove the highlight from all options
-  optionList.forEach(function (other) {
-    other.classList.remove('highlight');
-  });
-
-  // We highlight the right option
-  option.classList.add('highlight');
-};
- -

That's all you need in order to handle the various states of the custom widget.

- -

Next, we bind these functions to the appropriate events:

- -
// We handle the event binding when the document is loaded.
-window.addEventListener('load', function () {
-  var selectList = document.querySelectorAll('.select');
-
-  // Each custom widget needs to be initialized
-  selectList.forEach(function (select) {
-
-    // as well as all its `option` elements
-    var optionList = select.querySelectorAll('.option');
-
-    // Each time a user hovers their mouse over an option, we highlight the given option
-    optionList.forEach(function (option) {
-      option.addEventListener('mouseover', function () {
-        // Note: the `select` and `option` variable are closures
-        // available in the scope of our function call.
-        highlightOption(select, option);
-      });
-    });
-
-    // Each times the user click on a custom select element
-    select.addEventListener('click', function (event) {
-      // Note: the `select` variable is a closure
-      // available in the scope of our function call.
-
-      // We toggle the visibility of the list of options
-      toggleOptList(select);
-    });
-
-    // In case the widget gain focus
-    // The widget gains the focus each time the user clicks on it or each time
-    // they use the tabulation key to access the widget
-    select.addEventListener('focus', function (event) {
-      // Note: the `select` and `selectList` variable are closures
-      // available in the scope of our function call.
-
-      // We activate the widget
-      activeSelect(select, selectList);
-    });
-
-    // In case the widget loose focus
-    select.addEventListener('blur', function (event) {
-      // Note: the `select` variable is a closure
-      // available in the scope of our function call.
-
-      // We deactivate the widget
-      deactivateSelect(select);
-    });
-  });
-});
- -

At that point, our widget will change state according to our design, but its value doesn't get updated yet. We'll handle that next.

- - - - - - - - - - - - - - - -
Live example
{{EmbedLiveSample("Change_states",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_3")}}
Check out the source code
- -

Handling the widget's value

- -

Now that our widget is working, we have to add code to update its value according to user input and make it possible to send the value along with form data.

- -

The easiest way to do this is to use a native widget under the hood. Such a widget will keep track of the value with all the built-in controls provided by the browser, and the value will be sent as usual when a form is submitted. There's no point in reinventing the wheel when we can have all this done for us.

- -

As seen previously, we already use a native select widget as a fallback for accessibility reasons; we can simply synchronize its value with that of our custom widget:

- -
// This function updates the displayed value and synchronizes it with the native widget.
-// It takes two parameters:
-// select : the DOM node with the class `select` containing the value to update
-// index  : the index of the value to be selected
-function updateValue(select, index) {
-  // We need to get the native widget for the given custom widget
-  // In our example, that native widget is a sibling of the custom widget
-  var nativeWidget = select.previousElementSibling;
-
-  // We also need  to get the value placeholder of our custom widget
-  var value = select.querySelector('.value');
-
-  // And we need the whole list of options
-  var optionList = select.querySelectorAll('.option');
-
-  // We set the selected index to the index of our choice
-  nativeWidget.selectedIndex = index;
-
-  // We update the value placeholder accordingly
-  value.innerHTML = optionList[index].innerHTML;
-
-  // And we highlight the corresponding option of our custom widget
-  highlightOption(select, optionList[index]);
-};
-
-// This function returns the current selected index in the native widget
-// It takes one parameter:
-// select : the DOM node with the class `select` related to the native widget
-function getIndex(select) {
-  // We need to access the native widget for the given custom widget
-  // In our example, that native widget is a sibling of the custom widget
-  var nativeWidget = select.previousElementSibling;
-
-  return nativeWidget.selectedIndex;
-};
- -

With these two functions, we can bind the native widgets to the custom ones:

- -
// We handle event binding when the document is loaded.
-window.addEventListener('load', function () {
-  var selectList = document.querySelectorAll('.select');
-
-  // Each custom widget needs to be initialized
-  selectList.forEach(function (select) {
-    var optionList = select.querySelectorAll('.option'),
-        selectedIndex = getIndex(select);
-
-    // We make our custom widget focusable
-    select.tabIndex = 0;
-
-    // We make the native widget no longer focusable
-    select.previousElementSibling.tabIndex = -1;
-
-    // We make sure that the default selected value is correctly displayed
-    updateValue(select, selectedIndex);
-
-    // Each time a user clicks on an option, we update the value accordingly
-    optionList.forEach(function (option, index) {
-      option.addEventListener('click', function (event) {
-        updateValue(select, index);
-      });
-    });
-
-    // Each time a user uses their keyboard on a focused widget, we update the value accordingly
-    select.addEventListener('keyup', function (event) {
-      var length = optionList.length,
-          index  = getIndex(select);
-
-      // When the user hits the down arrow, we jump to the next option
-      if (event.keyCode === 40 && index < length - 1) { index++; }
-
-      // When the user hits the up arrow, we jump to the previous option
-      if (event.keyCode === 38 && index > 0) { index--; }
-
-      updateValue(select, index);
-    });
-  });
-});
- -

In the code above, it's worth noting the use of the tabIndex property. Using this property is necessary to ensure that the native widget will never gain focus, and to make sure that our custom widget gains focus when the user uses his keyboard or his mouse.

- -

With that, we're done! Here's the result:

- - - - - - - - - - - - - - - -
Live example
{{EmbedLiveSample("Change_states",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_4")}}
Check out the source code
- -

But wait a second, are we really done?

- -

Make it accessible

- -

We have built something that works and though we're far from a fully-featured select box, it works nicely. But what we've done is nothing more than fiddle with the DOM. It has no real semantics, and even though it looks like a select box, from the browser's point of view it isn't one, so assistive technologies won't be able to understand it's a select box. In short, this pretty new select box isn't accessible!

- -

Fortunately, there is a solution and it's called ARIA. ARIA stands for "Accessible Rich Internet Application", and it's a W3C specification specifically designed for what we are doing here: making web applications and custom widgets accessible. It's basically a set of attributes that extend HTML so that we can better describe roles, states and properties as though the element we've just devised was the native element it tries to pass for. Using these attributes is dead simple, so let's do it.

- -

The role attribute

- -

The key attribute used by ARIA is the role attribute. The role attribute accepts a value that defines what an element is used for. Each role defines its own requirements and behaviors. In our example, we will use the listbox role. It's a "composite role", which means elements with that role expect to have children, each with a specific role (in this case, at least one child with the option role).

- -

It's also worth noting that ARIA defines roles that are applied by default to standard HTML markup. For example, the {{HTMLElement("table")}} element matches the role grid, and the {{HTMLElement("ul")}} element matches the role list. Because we use a {{HTMLElement("ul")}} element, we want to make sure the listbox role of our widget will supersede the list role of the {{HTMLElement("ul")}} element. To that end, we will use the role presentation. This role is designed to let us indicate that an element has no special meaning, and is used solely to present information. We will apply it to our {{HTMLElement("ul")}} element.

- -

To support the listbox role, we just have to update our HTML like this:

- -
<!-- We add the role="listbox" attribute to our top element -->
-<div class="select" role="listbox">
-  <span class="value">Cherry</span>
-  <!-- We also add the role="presentation" to the ul element -->
-  <ul class="optList" role="presentation">
-    <!-- And we add the role="option" attribute to all the li elements -->
-    <li role="option" class="option">Cherry</li>
-    <li role="option" class="option">Lemon</li>
-    <li role="option" class="option">Banana</li>
-    <li role="option" class="option">Strawberry</li>
-    <li role="option" class="option">Apple</li>
-  </ul>
-</div>
- -
-

Note: Including both the role attribute and a class attribute is only necessary if you want to support legacy browsers that do not support the CSS attribute selectors.

-
- -

The aria-selected attribute

- -

Using the role attribute is not enough. ARIA also provides many states and property attributes. The more and better you use them, the better your widget will be understood by assistive technologies. In our case, we will limit our usage to one attribute: aria-selected.

- -

The aria-selected attribute is used to mark which option is currently selected; this lets assistive technologies inform the user what the current selection is. We will use it dynamically with JavaScript to mark the selected option each time the user chooses one. To that end, we need to revise our updateValue() function:

- -
function updateValue(select, index) {
-  var nativeWidget = select.previousElementSibling;
-  var value = select.querySelector('.value');
-  var optionList = select.querySelectorAll('.option');
-
-  // We make sure that all the options are not selected
-  optionList.forEach(function (other) {
-    other.setAttribute('aria-selected', 'false');
-  });
-
-  // We make sure the chosen option is selected
-  optionList[index].setAttribute('aria-selected', 'true');
-
-  nativeWidget.selectedIndex = index;
-  value.innerHTML = optionList[index].innerHTML;
-  highlightOption(select, optionList[index]);
-};
- -

Here is the final result of all these changes (you'll get a better feel for this by trying it with an assistive technology such as NVDA or VoiceOver):

- - - - - - - - - - - - - - - -
Live example
{{EmbedLiveSample("Change_states",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_5")}}
Check out the final source code
- -

Conclusion

- -

We have seen all the basics of building a custom form widget, but as you can see it's not trivial to do, and often it's better and easier to rely on third-party libraries instead of coding them from scratch yourself (unless, of course, your goal is to build such a library).

- -

Here are a few libraries you should consider before coding your own:

- - - -

If you want to move forward, the code in this example needs some improvement before it becomes generic and reusable. This is an exercise you can try to perform. Two hints to help you in this: the first argument for all our functions is the same, which means those functions need the same context. Building an object to share that context would be wise. Also, you need to make it feature-proof; that is, it needs to be able to work better with a variety of browsers whose compatibility with the Web standards they use vary. Have fun!

- -

{{PreviousMenuNext("Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms/Sending_forms_through_JavaScript", "Learn/HTML/Forms")}}

- -

 

- -

In this module

- - - -

 

diff --git a/files/pt-br/web/guide/html/forms/how_to_structure_an_html_form/index.html b/files/pt-br/web/guide/html/forms/how_to_structure_an_html_form/index.html deleted file mode 100644 index 33a562813c..0000000000 --- a/files/pt-br/web/guide/html/forms/how_to_structure_an_html_form/index.html +++ /dev/null @@ -1,304 +0,0 @@ ---- -title: Como estruturar um formulário HTML -slug: Web/Guide/HTML/Forms/How_to_structure_an_HTML_form -tags: - - Beginner - - CodingScripting - - Example - - Forms - - Guide - - HTML - - Learn - - Structure - - Web -translation_of: Learn/Forms/How_to_structure_a_web_form ---- -
-

{{LearnSidebar}}

- -

{{PreviousMenuNext("Learn/HTML/Forms/Your_first_HTML_form", "Learn/HTML/Forms/The_native_form_widgets", "Learn/HTML/Forms")}}

-
- -

Com o básico fora do caminho, podemos olhar melhor para os elementos utilizados, a fim de entender as diferentes partes de um formulário.

- - - - - - - - - - - - -
Pré-Requisitos:Leitura sobre computação básica e entendimento básico de HTML.
Objetivo:Entender como estruturar formulários HTML e entregar a eles semântica de forma a torná-los úteis e acessíveis.
- -

A flexibilidade dos formulários HTML fazem com que sejam uma das estruturas mais complexas do HTML, você pode construir qualquer tipo básico de formulário usando elementos e atributos exclusivos de formulários. Assim, usar a estrutura correta ao criar um formulário HTML o ajudará a garantir que o formulário seja utilizável e acessível.

- -

O elemento <form> 

- -

O elemento {{HTMLElement("form")}} é o elemento que formalmente define o formulário e os atributos que definem a maneira como esse formulário se comporta. Sempre que você desejar criar um formulário HTML, você deve iniciá-lo usando este elemento, colocando todo o conteúdo dentro deste. Muitas tecnologias assistivas ou plugins de navegadores são capazes de descobrir elemetos {{HTMLElement("form")}} e de implementar ganchos especiais para torná-los mais fáceis de usar.

- -

Nós já vimos isto em um artigo anterior:

- -
Nota: É estritamente proíbido aninhar um formulário dentro de outro formulário. Isto pode fazer com que os formulários se comportem de maneira imprevisível baseada no navegador que está sendo utilizado.
- -

Note que, sempre é possível usar um widget de formulário fora de um elemento {{HTMLElement("form")}} mas se o fizer, o widget não terá nada a ver com o formulário. Estes widgets podem ser usados fora de um formulário, mas para tanto você deverá ter um plano especial para eles, pois este não farão nada por si próprios. Você terá de controlar o comportamento deles através de JavaScript.

- -
-

Nota: O HTML 5 introduziu o atributo form no grupo de elementos de formulários em HTML. Ele deve deixá-lo atrelar explícitamente um elemento com um form mesmo se não estiver dentro de um {{ HTMLElement("form") }}. Infelizmente, devido ao tempo de vida, essa implementação ainda pelos navegadores ainda não é boa o suficiente para se confiar nela.

-
- -

Os elementos <fieldset> e <legend>

- -

O elemento {{HTMLElement ("fieldset")}} é uma maneira conveniente de criar grupos de widgets que compartilham o mesmo propósito. Um elemento {{HTMLElement ("fieldset")}} pode ser rotulado com um elemento {{HTMLElement ("legend")}}. O elemento {{HTMLElement ("legend")}} descreve formalmente a finalidade do elemento {{HTMLElement ("fieldset")}} ao qual está incluído.

- -

Muitas tecnologias assistivas usarão o elemento {{HTMLElement ("legend")}} como se fosse parte da etiqueta de cada widget dentro do elemento {{HTMLElement ("fieldset")}} correspondente. Por exemplo, alguns leitores de tela, como Jaws ou NVDA, pronunciarão o conteúdo da legenda antes de pronunciar o rótulo de cada widget.

- -

Aqui está um pequeno exemplo:

- -
<form>
-  <fieldset>
-    <legend>Fruit juice size</legend>
-    <p>
-      <input type="radio" name="size" id="size_1" value="small" />
-      <label for="size_1">Small</label>
-    </p>
-    <p>
-      <input type="radio" name="size" id="size_2" value="medium" />
-      <label for="size_2">Medium</label>
-    </p>
-    <p>
-      <input type="radio" name="size" id="size_3" value="large" />
-      <label for="size_3">Large</label>
-    </p>
-  </fieldset>
-</form>
- -

Com este exemplo, um leitor de tela pronunciará "Fruit juice size small" para o primeiro widget, "Fruit juice size medium" para o segundo, e "Fruit juice size large" para o terceiro.

- -

O caso de uso neste exemplo é um dos mais importantes. Cada vez que você tiver um conjunto de botões de opção, você deve ter certeza de que eles estão aninhados dentro de um elemento {{HTMLElement ("fieldset")}}. Existem outros casos de uso e, em geral, o elemento {{HTMLElement ("fieldset")}} também pode ser usado para conferir acessibilidade a um formulário. Devido à sua influência sobre a tecnologia assistiva, o elemento {{HTMLElement ("fieldset")}} é um dos elementos-chave para a construção de formulários acessíveis. No entanto, é sua responsabilidade não abusá-lo. Se possível, cada vez que você criar um formulário, tente ouvir como o leitor de tela o interpreta. Se parecer estranho, é uma boa sugestão de que sua estrutura de formulário precisa ser melhorada.

- -

O elemento <label> 

- -

Como vimos no artigo anterior, o elemento {{HTMLElement ("label")}} é a maneira formal de definir um rótulo para um widget de formulário HTML. Esse é o elemento mais importante se você quiser criar formulários acessíveis - quando implementados corretamente, os leitores de tela falarão o rótulo de um elemento de formulário juntamente com as instruções relacionadas. Veja este exemplo, que vimos no artigo anterior:

- -
<label for="name">Name:</label> <input type="text" id="name" name="user_name">
- -

Com o <label> associado corretamente ao <input> por meio de seus atributos 'for' e 'id' respectivamente (o 'label' do atributo faz referência ao atributo id do widget correspondente), um leitor de tela lerá algo como "Nome, editar texto".

- -

Se o 'label' não estiver configurado corretamente, um leitor de tela só lerá algo como "Editar texto em branco", o que não é muito útil.

- -

Observe que um widget pode ser aninhado dentro de seu elemento <label>, assim:

- -
<label for="name">
-  Name: <input type="text" id="name" name="user_name">
-</label>
- -

Mesmo nesses casos, entretanto, é considerada a melhor prática definir o atributo 'for' porque algumas tecnologias assistivas não entendem os relacionamentos implícitos entre labels e widgets.

- -

Labels são clicáveis também !.

- -

Outra vantagem de configurar 'labels' adequadamente é que você pode clicar no label para ativar o widget correspondente, em todos os navegadores. Isso é útil para exemplos como entradas de texto, onde você pode clicar no label, bem como na entrada para focalizá-lo, mas é especialmente útil para botões de opção e caixas de seleção - a área de acerto de tal controle pode ser muito pequena, então é útil para torná-lo o maior possível.

- -

Por exemplo:

- -
<form>
-  <p>
-    <label for="taste_1">I like cherry</label>
-    <input type="checkbox" id="taste_1" name="taste_cherry" value="1">
-  </p>
-  <p>
-    <label for="taste_2">I like banana</label>
-    <input type="checkbox" id="taste_2" name="taste_banana" value="2">
-  </p>
-</form>
- -
-

Nota: Você pode encontrar este exemplo em checkbox-label.html (ver ao vivo também).

-
- -

Múltiplos labels

- -

Estritamente falando, você pode colocar vários rótulos em um único widget, mas isso não é uma boa ideia, pois algumas tecnologias de assistência podem ter problemas para lidar com eles. No caso de vários rótulos, você deve aninhar um widget e seus rótulos dentro de um único elemento {{htmlelement ("label")}}.

- -

Vamos considerar este exemplo:

- -
<p>Required fields are followed by <abbr title="required">*</abbr>.</p>
-
-<!-- So this: -->
-<div>
-  <label for="username">Name:</label>
-  <input type="text" name="username">
-  <label for="username"><abbr title="required">*</abbr></label>
-</div>
-
-<!-- would be better done like this: -->
-<div>
-  <label for="username">
-    <span>Name:</span>
-    <input id="username" type="text" name="username">
-    <abbr title="required">*</abbr>
-  </label>
-</div>
-
-<!-- But this is probably best: -->
-<div>
-  <label for="username">Name: <abbr title="required">*</abbr></label>
-  <input id="username" type="text" name="username">
-</div>
- -

The paragraph at the top defines the rule for required elements. It must be at the beginning to make sure that assistive technologies such as screen readers will display or vocalize it to the user before they find a required element. That way, they will know what the asterisk means. A screen reader will speak the star as "star" or "required", depending on the screen reader's settings — in any case, what will be spoken is made clear in the first paragraph).

- - - -
-

Note: You might get slightly different results, depending on your screenreader. This was tested in VoiceOver (and NVDA behaves similarly). We'd love to hear about your experiences too.

-
- -

Note: You can find this example on GitHub as required-labels.html (see it live also). don't run the example with 2 or 3 of the versions uncommented — screenreaders will definitely get confused if you have multiple labels AND multiple inputs with the same ID!

- -

Estruturas comuns HTML usadas com formulários

- -

Além das estruturas específicas dos formulários HTML, é bom lembrar que os formulários são apenas HTML. Isso significa que você pode usar todo o poder do HTML para estruturar um formulário HTML.

- -

Como você pode ver nos exemplos, é comum envolver um label e seu widget com um elemento {{HTMLElement("div")}}. Os elementos {{HTMLElement("p")}} também são comumente usados, assim como as listas HTML (a última é mais comum para estruturar vários checkboxes ou radio buttons).

- -

Além do elemento {{HTMLElement("fieldset")}}, uma prática comum também é usar títulos HTML (por exemplo, {{htmlelement ("h1")}}, {{htmlelement ("h2")}}) e seção (por exemplo, {{htmlelement("section")}}) para estruturar um formulário complexo.

- -

Acima de tudo, cabe a você encontrar um estilo com o qual você acha confortável codificar e que também resulte em formulários acessíveis e utilizáveis.

- -

Temos cada seção desacoplada da funcionalidade contida nos elementos de {{htmlelement("section")}} e um {{htmlelement("fieldset")}} para conter os radio buttons.

- -

Active learning: building a form structure

- -

Let's put these ideas into practice and build a slightly more involved form structure — a payment form. This form will contain a number of widget types that you may not yet understand — don't worry about this for now; you'll find out how they work in the next article (The native form widgets). For now, read the descriptions carefully as you follow the below instructions, and start to form an appreciation of which wrapper elements we are using to structure the form, and why.

- -
    -
  1. To start with, make a local copy of our blank template file and the CSS for our payment form in a new directory on your computer.
    2. -
  2. First of all, apply the CSS to the HTML by adding the following line inside the HTML {{htmlelement("head")}}: - 
    <link href="payment-form.css" rel="stylesheet">
    -
    3. -
  3. Next, start your form off by adding the outer {{htmlelement("form")}} element: - 
    <form>
-
-</form>
    -
    4. -
  4. Inside the <form> tags, start by adding a heading and paragraph to inform users how required fields are marked: - 
    <h1>Payment form</h1>
-<p>Required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p>
    -
    5. -
  5. Next we'll add a larger section of code into the form, below our previous entry. Here you'll see that we are wrapping the contact information fields inside a distinct {{htmlelement("section")}} element. Moreover, we have a set of two radio buttons, each of which we are putting inside its own list ({{htmlelement("li")}}) element. Last, we have two standard text {{htmlelement("input")}}s and their associated {{htmlelement("label")}} elements, each contained inside a {{htmlelement("p")}}, plus a password input for entering a password. Add this code to your form now: - 
    <section>
-    <h2>Contact information</h2>
-    <fieldset>
-      <legend>Title</legend>
-      <ul>
-          <li>
-            <label for="title_1">
-              <input type="radio" id="title_1" name="title" value="M." >
-              Mister
-            </label>
-          </li>
-          <li>
-            <label for="title_2">
-              <input type="radio" id="title_2" name="title" value="Ms.">
-              Miss
-            </label>
-          </li>
-      </ul>
-    </fieldset>
-    <p>
-      <label for="name">
-        <span>Name: </span>
-        <strong><abbr title="required">*</abbr></strong>
-      </label>
-      <input type="text" id="name" name="username">
-    </p>
-    <p>
-      <label for="mail">
-        <span>E-mail: </span>
-        <strong><abbr title="required">*</abbr></strong>
-      </label>
-      <input type="email" id="mail" name="usermail">
-    </p>
-    <p>
-      <label for="pwd">
-        <span>Password: </span>
-        <strong><abbr title="required">*</abbr></strong>
-      </label>
-      <input type="password" id="pwd" name="password">
-    </p>
-</section>
    -
    6. -
  6. Now we'll turn to the second <section> of our form — the payment information. Here we have three distinct widgets along with their labels, each contained inside a <p>. The first is a drop down menu ({{htmlelement("select")}}) for selecting credit card type. the second is an <input> element of type number, for entering a credit card number. The last one is an <input> element of type date, for entering the expiration date of the card (this one will come up with a date picker widget in supporting browsers, and fall back to a normal text input in non-supporting browsers). Again, enter the following below the previous section: - 
    <section>
-    <h2>Payment information</h2>
-    <p>
-      <label for="card">
-        <span>Card type:</span>
-      </label>
-      <select id="card" name="usercard">
-        <option value="visa">Visa</option>
-        <option value="mc">Mastercard</option>
-        <option value="amex">American Express</option>
-      </select>
-    </p>
-    <p>
-      <label for="number">
-        <span>Card number:</span>
-        <strong><abbr title="required">*</abbr></strong>
-      </label>
-      <input type="number" id="number" name="cardnumber">
-    </p>
-    <p>
-      <label for="date">
-        <span>Expiration date:</span>
-        <strong><abbr title="required">*</abbr></strong>
-        <em>formatted as yyyy/mm/dd</em>
-      </label>
-      <input type="date" id="date" name="expiration">
-    </p>
-</section>
    -
    7. -
  7. The last section we'll add is a lot simpler, containing only a {{htmlelement("button")}} of type submit, for submitting the form data. Add this to the bottom of your form now: - 
    <p> <button type="submit">Validate the payment</button> </p>
    -
    8. -
- -

You can see the finished form in action below (also find it on GitHub — see our payment-form.html source and running live):

- -

{{EmbedLiveSample("A_payment_form","100%",620, "", "Learn/HTML/Forms/How_to_structure_an_HTML_form/Example")}}

- -

Summary

- -

You now have all the knowledge you'll need to properly structure your HTML forms; the next article will dig into implementing all the different types of form widgets you'll want to use to collect information from your users.

- -

See Also

- - - -

{{PreviousMenuNext("Learn/HTML/Forms/Your_first_HTML_form", "Learn/HTML/Forms/The_native_form_widgets", "Learn/HTML/Forms")}}

- -

In this module

- - diff --git a/files/pt-br/web/guide/html/forms/index.html b/files/pt-br/web/guide/html/forms/index.html deleted file mode 100644 index 15bd243566..0000000000 --- a/files/pt-br/web/guide/html/forms/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: Formulários da Web - Trabalhando com dados do usuário -slug: Web/Guide/HTML/Forms -tags: - - Aprender - - Funcionalidades - - Guía - - HTML - - Iniciante - - Web - - formulários -translation_of: Learn/Forms ---- -
{{LearnSidebar}}
- -

Este guia tem uma série de artigos que vão ajudar você a ficar craque em HTML forms. HTML forms são ferramentas poderosas para interagir com usuários; contudo, por razões técnicas e históricas,  nem sempre é óbvio como usá-los em seu pleno potencial. Neste guia, vamos cobrir todos os aspectos dos HTML forms, da estrutura ao estilo, do manuseio de dados à widgets personalizados. Você vai aprender a desfrutar do grande poder que elas lhes oferecem!

- -

Pré-requisitos

- -

Antes de iniciar este guia, você deve estar familiarizado com os conceitos da nossa Introdução ao HTML.

- -
-

Dica: Se você está usando um computador/tablet/outro aparelho onde você não pode criar seus próprios arquivos, você pode testar (a maior parte) dos códigos de exemplo em uma ferramenta online como JSBin ou Thimble.

-
- -

Guias básicos

- -

Os seguintes guias te ensinarão todo o básico de formulários HTML, alcançando alguns tópicos ligeiramente mais avançados no caminho.

- -
-
Meu primeiro formulário HTML
-
O primeiro artigo na série te instruirá em sua primeira vez criando um formulário HTML, incluindo o projeto/desenho de um formulário simples, implementação usando os elementos HTML corretos, estilização bem básica com CSS, e como os dados são enviados para um servidor.
-
Como estruturar um formulário HTML
-
Agora que o básico não é mais problema, daremos uma olhada mais aprofundada nos elementos usados para dar estrutura e significado para as diferentes partes de um formulário.
-
Os form widgets nativos
-
Veremos a funcionalidade de diferentes form widgets em detalhe, observando quais opções estão disponíveis para coletar diferentes tipos de dados.
-
Enviando e recuperando dados
-
Este artigo mostra o que acontece quando um usuário submete (envia) um formulário — para onde os dados vão, e o que fazer quando ele chegar lá? Também algumas das preocupações com segurança envolvida ao enviar dados em um formulário.
-
Validação de dados nos formulários HTML
-
Enviar os dados não é o suficiente — também precisamos garantir que os dados que o usuário preenche num formulário está no formato correto que precisamos para processá-los com sucesso, e que não quebre nossas aplicações. Também queremos ajudar nossos usuários a preencher os formulários corretamente e não se sentirem frustrados ao usar nossos apps. Validação de dados nos ajuda a alcançar esses objetivos — este artigo te diz o que precisa saber.
-
- -

Guias avançados

- -

Estes guias passam por algumas técnicas mais avançadas, que você achará útil aprender quando já tiver dominado o básico.

- -
-
Como criar widgets HTML form personalizados
-
Você encontrará alguns casos onde os widgets nativos não fornecem o que você precisa, por exemplo em função de estilo ou funcionalidade. Nestes casos, você precisará construir seu próprio widget de formulário a partir de HTML puro. Neste artigo explicamos como você pode fazer isso e o que precisa considerar ao fazer isso, com um estudo de caso prático.
-
Enviando HTML forms através do JavaScript
-
Este artigo mostra formas de usar um formulário para montar um HTTP request e enviá-lo via JavaScript personalizado, em vez da forma de submissão padrão. Também apresenta razões pelas quais você quereria fazer isso, e as implicações de fazer dessa forma. (Veja também Usando o objeto FormData.)
-
Formulários HTML para browsers antigos
-
Aborda detecção de funcionalidades, etc. Deveria ser movido para o módulo de testes multi-browser, já que a mesma coisa é abordada lá.
-
Novidades em formulários no HTML5
-
Este artigo provê uma referência às novas adições aos formulários HTML na especificação HTML5.
-
- -

Guias de estilização de formulários

- -

Estes guias para estilizar formulários com CSS realmente deveriam estar nos tópicos sobre CSS, mas estamos mantendo-os aqui por enquanto até uma oportunidade apropriada de movê-los.

- -
-
Estilizando formulários HTML
-
Este artigo fornece uma introdução à personalização de estilos de formulário com CSS, incluindo todo o básico que você precisa para tarefas básicas de estilização.
-
Estilos avançados para HTML forms
-
Aqui vemos algumas técnicas mais avançadas de estilização de formulários que precisam ser usadas quando tiver de lidar com alguns dos elementos mais difíceis de personalizar.
-
Tabela de compatibilidade das Propriedades dos widgets
-
Este último artigo fornece uma referência prática que te permite procurar quais propriedades CSS são compatíveis com quais elementos de formulário.
-
- -

Avaliações

- -

A definir.

- -

Veja também

- - diff --git a/files/pt-br/web/guide/html/forms/meu_primeiro_formulario_html/index.html b/files/pt-br/web/guide/html/forms/meu_primeiro_formulario_html/index.html deleted file mode 100644 index 31ef58aa7c..0000000000 --- a/files/pt-br/web/guide/html/forms/meu_primeiro_formulario_html/index.html +++ /dev/null @@ -1,270 +0,0 @@ ---- -title: Meu primeiro formulário HTML -slug: Web/Guide/HTML/Forms/Meu_primeiro_formulario_HTML -translation_of: Learn/Forms/Your_first_form ---- -

Este é um artigo introdutório para formulários HTML. Através de um simples formulário de contato, nós veremos os requisitos básicos para construir formulários HTML. Esse artigo assume que você não sabe nada sobre formulários HTML, mas presume que você conhece o básico de HTML e CSS.

- -

Antes de começarmos

- -

O que são formulários HTML?

- -

Formulários HTML são um dos principais pontos de interação entre um usuário e um web site ou aplicativo. Eles permitem que os usuários enviem dados para o web site. Na maior parte do tempo, os dados são enviados para o servidor da web, mas a página da web também pode interceptar para usá-los por conta própria.

- -

Um formulário HTML é feito de um ou mais widgets. Esses widgets podem ser campos de texto (linha única ou de várias linhas), caixas de seleção, botões, checkboxes ou radio buttons. A maior parte do tempo, estes elementos são emparelhados com uma legenda que descreve o seu objetivo.

- -

O que você precisa para trabalhar com formulários?

- -

Você não precisa de nada mais do que o que é requisitado para trabalhar com HTML: Um editor de texto e um navegador. É claro, que se você esta acostumado a usá-los você pode ter vantagens de uma IDE completa como Visual Studio, Eclipse, Aptana, etc., mas cabe somente a você.

- -

A principal diferença entre um formulário de HTML e um documento regular de HTML é que, maioria das vezes, o dado coletado é enviado ao servidor. Nesse caso, você precisa configurar um servidor web para receber e processar os dados. Como configurar um servidor está além do escopo deste artigo, mas se você quer saber mais, consulte o artigo dedicado a este tema: Envio e recuperação de dados do formulário.

- -

Desenhando seu formulário

- -

Antes de começar a codificar, é sempre melhor dar um passo atrás e tomar o tempo para pensar sobre o seu formulário. Desenhando um rascunho rápido irá ajudar a definir o conjunto correto de dados que você quer perguntar ao usuário. De um ponto de vista da experiência do usuário (UX), é importante lembrar que quanto maior o seu formulário, maior o risco de perder os usuários. Mantenha o formuário simples e mantenha o foco: peça apenas o que é absolutamente necessário.
- A criação de formulários é um passo importante quando você está construindo um site ou um aplicativo. Está além do escopo deste artigo  cobrir as formas, mas se você quiser se aprofundar neste tópico você deve ler os seguintes artigos:

- - - -

Neste artigo vamos construir um formulário de contato simples. Vamos fazer um esboço.

- -

The form to build, roughly sketch

- -

O nosso formulário terá três campos de texto e um botão. Basicamente, pedimos ao usuário o seu nome, seu e-mail e a mensagem que deseja enviar. Ao apertar o botão apenas irá enviar os dados para o servidor web.

- -

Sujar as mãos com HTML

- -


- Ok, agora estamos prontos para ir para o código HTML do nosso formulário. Para construir o nosso formulário de contato, vamos utilizar os seguintes elementos {{HTMLElement("form")}} , {{HTMLElement("label")}} , {{HTMLElement("input")}} , {{HTMLElement("textarea")}} , e {{HTMLElement("button")}} .

- -

O Elemento {{HTMLElement("form")}} 

- -

Todos formulários HTML começam com um elemento {{HTMLElement("form")}} como este:

- -
<form action="/pagina-processa-dados-do-form" method="post">
-
-</form>
- -

Este elemento define um formulário. É um elemento de container como um elemento {{HTMLElement ("div")}} ou {{HTMLElement ("p")}} , mas ele também suporta alguns atributos específicos para configurar a forma como o formulário se comporta. Todos os seus atributos são opcionais, mas é considerada a melhor prática sempre definir pelo menos o atributo action e o atributo method.

- - - -

Se você quiser se aprofundar em como esses atributos funcionam, está detalhado no artigo Enviando e recebendo dados de um formulário

- -

Adicionar campos com os elementos {{HTMLElement("label")}} , {{HTMLElement("input")}} , e {{HTMLElement("textarea")}} 

- -

O nosso formulário de contato é muito simples e contém três campos de texto, cada um com uma etiqueta. O campo de entrada para o nome será um campo básico texto de linha única("input"); o campo de entrada do e-mail será um campo de texto com uma única linha("input") que vai aceitar apenas um endereço de e-mail; o campo de entrada para a mensagem será um campo de texto de várias linhas("textarea").

- -

Em termos de código HTML, teremos algo assim:

- -
<form action="/pagina-processa-dados-do-form" method="post">
-    <div>
-        <label for="nome">Nome:</label>
-        <input type="text" id="nome" />
-    </div>
-    <div>
-        <label for="email">E-mail:</label>
-        <input type="email" id="email" />
-    </div>
-    <div>
-        <label for="msg">Mensagem:</label>
-        <textarea id="msg"></textarea>
-    </div>
-</form>
- -

Os elementos  {{HTMLElement ("div")}} estão lá para estruturar nosso código e deixar a estilização mais fácil (ver abaixo). Observe o uso do atributo for em todos os elementos {{HTMLElement ("label")}} ; é uma maneira para vincular uma label à um campo do formulário. Este atributo faz referência ao id do campo correspondente. Há algum benefício para fazer isso, é a de permitir que o usuário clique no rótulo para ativar o campo correspondente. Se você quer uma melhor compreensão dos outros benefícios deste atributo, tudo é detalhado no artigo: How to structure an HTML form(en).

- -

No  elemento {{HTMLElement ("input")}} , o atributo mais importante é o atributo type. Esse atributo é extremamente importante porque define a forma como o elemento  {{HTMLElement ("input")}} se comporta. Ele pode mudar radicalmente o elemento,  então preste atenção a ele. Se você quiser saber mais sobre isso, leia o artigo native form widgets. Em nosso exemplo, nós usamos somente o  type="text", valor padrão para este atributo. Ele representa um campo de texto com uma única linha que aceita qualquer tipo de texto sem controle ou validação. Nós também usamos o type="email" que define um campo de texto com uma única linha que só aceita um endereço de e-mail bem-formados. Este último valor torna um campo de texto básico em uma espécie de campo "inteligente", que irá realizar alguns testes com os dados digitados pelo usuário. Se você quiser saber mais sobre a validação de formulário, detalharemos melhor no artigo Validação de dados de formulário.

- -

Por último, mas não menos importante, observe a sintaxe de <input />  e <textarea> </ textarea>. Esta é uma das esquisitices do HTML. A tag <input /> é um elemento que se  auto-fecha, o que significa que se você quiser encerrar formalmente o elemento, você tem que adicionar uma barra "/" no final do próprio elemento e não uma tag de fechamento. No entanto, o tipo {{HTMLElement ("textarea")}} não é um elemento de auto-fechamento, então você tem que fechá-lo com a tag final adequada. Isso tem um impacto sobre um recurso específico de formulários HTML: a maneira como você define o valor padrão. Para definir o valor padrão de um elemento {{HTMLElement ("input")}} você tem que usar o atributo value como este:

- -
<input type="text" value="Por padrão, este elemento será preenchido com este texto " />
- -

Pelo contrário, se você deseja definir o valor padrão de um elemento {{HTMLElement ("textarea")}} , você só tem que colocar esse valor padrão no meio das tags, entre tag inicial e a tag final do elemento {{HTMLElement ("textarea")}} , como abaixo:

- -
<textarea>Por padrão, este elemento será preenchido com este texto </textarea>
- -

E um elemento {{HTMLElement("button")}} para concluir

- -

O nosso formulário está quase pronto; nós temos apenas que adicionar um botão para permitir que o usuário envie seus dados depois de ter preenchido o formulário. Isto é simplesmente feito usando o elemento {{HTMLElement ("button")}} :

- -
<form action="/pagina-processa-dados-do-form" method="post">
-    <div>
-        <label for="name">Nome:</label>
-        <input type="text" id="name" />
-    </div>
-    <div>
-        <label for="mail">E-mail:</label>
-        <input type="email" id="mail" />
-    </div>
-    <div>
-        <label for="msg">Mensagem:</label>
-        <textarea id="msg"></textarea>
-    </div>
-    <div class="button">
-        <button type="submit">Enviar sua mensagem</button>
-    </div>
-</form>
- -

Um botão pode ser de três tipos: submit, reset, ou button.

- - - -

Note que você também pode usar o elemento  {{HTMLElement ("input")}} com o tipo correspondente para produzir um botão. A principal diferença com o elemento {{HTMLElement ("button")}} é que o elemento {{HTMLElement ("input")}} permite apenas texto sem formatação como seu valor, enquanto que o elemento  {{HTMLElement ("button")}} permite que o conteúdo HTML completo como seu valor.

- - - -

Agora que temos o nosso formulário HTML, se você olhar para ele em seu navegador favorito, você vai ver que ele parece meio feio.

- -

- -

Vamos deixar ele um pouco mais legal com os códigos CSS a seguir:

- -

Vamos começar com o próprio formulário; vamos centralizá-lo e torná-lo visível com uma borda:

- -
form {
-    /* Apenas para centralizar o form na página */
-    margin: 0 auto;
-    width: 400px;
-    /* Para ver as bordas do formulário */
-    padding: 1em;
-    border: 1px solid #CCC;
-    border-radius: 1em;
-}
- -

Então, adicionaremos algum espaço entre cada conjunto de campos do form:

- -
form div + div {
-    margin-top: 1em;
-}
- -

Agora vamos focar nas labels. Para fazer o nosso formulário mais legível, é considerada a melhor prática ter todas as etiquetas do mesmo tamanho e alinhadas do mesmo lado. Nesse caso, vamos alinhá-los para a direita, mas em alguns casos, o alinhamento à esquerda pode ficar bem também.

- -
label {
-    /*Para ter certeza que todas as labels tem o mesmo tamanho e estão propriamente alinhadas */
-    display: inline-block;
-    width: 90px;
-    text-align: right;
-}
- -

Uma das coisas mais difíceis de fazer em formulários HTML são os estilo dos próprios  campos. Os campos de texto são fáceis de estilizar, mas alguns outros campos não são. Se você quiser saber mais sobre  estilização de formulários HTML, leia o artigo Styling HTML forms.

- -

Aqui vamos usar alguns truques comuns: fontes de harmonização, tamanho e bordas:

- -
input, textarea {
-    /* Para certificar-se que todos os campos de texto têm as mesmas configurações de fonte. Por padrão, textareas ter uma fonte monospace*/
-    font: 1em sans-serif;
-
-    /* Para dar o mesmo tamanho a todos os campo de texto */
-    width: 300px;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
-
-    /* Para harmonizar o look & feel das bordas nos campos de texto*/
-    border: 1px solid #999;
-}
- -

Formulários HTML suportam muitas pseudo-classes para descrever os estados de cada elemento. Como exemplo, vamos adicionar um pouco de destaque quando um campo está ativo. É uma maneira conveniente para ajudar a manter o controle do usuário de onde eles está no formulário.

- -
input:focus, textarea:focus {
-    /* Dar um pouco de destaque nos elementos ativos */
-    border-color: #000;
-}
- -

Campos de texto de várias linhas precisam de alguns estilos personalizados sozinhos. Por padrão, um elemento  {{HTMLElement ("textarea")}} é um bloco em linha com sua parte inferior alinhada à linha de base do texto. Na maioria das vezes, não é baseline o que queremos. Nesse caso, a fim de alinhar a label e o campo, temos que alterar a propriedade  vertical-align do {{HTMLElement ("textarea")}} para top.

- -

Observe também o uso da propriedade de resize, que é uma forma de permitir que os usuários redimensionar um elemento {{HTMLElement ("textarea")}}.

- -
textarea {
-    /* Para alinhar corretamente os campos de texto de várias linhas com sua label*/
-    vertical-align: top;
-
-    /* Para dar espaço suficiente para digitar algum texto */
-    height: 5em;
-
-    /* Para permitir aos usuários redimensionarem qualquer textarea verticalmente. Ele não funciona em todos os browsers */
-    resize: vertical;
-}
- -

Muitas vezes, os botões precisam de estilos especiais também. Para esse fim, nós o colocamos dentro de uma {{HTMLElement ("div")}} com uma classe css button. Aqui, queremos que o botão esteja alinhado com os outros campos . Para conseguir isso, temos de imitar a presença de uma {{HTMLElement ("label")}}. Isso é feito utilizando padding e margin.

- -
.button {
-    /* Para posicionar os botões para a mesma posição dos campos de texto */
-    padding-left: 90px; /* mesmo tamanho que os elementos do tipo label */
-}
-button {
-    /* Esta margem extra representa aproximadamente o mesmo espaço que o espaço entre as labels e os seus campos de texto*/
-    margin-left: .5em;
-}
- -

Agora o nosso formulário parece muito mais bonito.

- -

- -

 

- -

Enviar os dados para seu servidor web

- -

A última parte, e talvez a mais complicado, é lidar com dados de formulário no lado do servidor. Como dissemos antes, na maioria das vezes, um formulário HTML é uma forma conveniente para perguntar ao usuário os dados e enviá-lo para um servidor web.

- -

O elemento {{HTMLElement("form")}} definirá onde e como enviar os dados, graças ao atribudo action e ao atributo method

- -

Mas não é o suficiente. Nós também precisamos dar um nome a nossos dados. Esses nomes são importantes em ambos os lados; no lado do navegador, ele informa ao navegador que nome dar a cada pedaço de dados, e no lado do servidor, ele permite que o servidor lidar com cada pedaço de dados pelo nome.

- -

Então, para nomear seus dados, você precisará usar o atributo name em cada campo do formulário que irá recolher uma parte específica dos dados:

- -
<form action="/pagina-processa-dados-do-form" method="post">
-    <div>
-        <label for="nome">Nome:</label>
-        <input type="text" id="nome" name="usuario_nome" />
-    </div>
-    <div>
-        <label for="email">E-mail:</label>
-        <input type="email" id="email" name="usuario_email" />
-    </div>
-    <div>
-        <label for="msg">Mensagem:</label>
-        <textarea id="msg" name="usuario_msg"></textarea>
-    </div>
-
-    <div class="button">
-        <button type="submit">Enviar sua mensagem</button>
-    </div>
-</form>
- -

Em nosso exemplo, o formulário irá enviar 3 informações, chamados "usuario_nome", "usuario_email" e "usuario_msg" e os dados serão enviados para a URL "/pagina-processa-dados-do-form" com o método HTTP:  POST .

- -

No lado do servidor, o script na URL "/pagina-processa-dados-do-form" receberá os dados como uma lista de itens 3 de chave/valor contidos na solicitação HTTP. A forma como o script  vai lidar com esses dados fica a seu critério. Cada linguagem server-side (PHP, Python, Ruby, Java, C #, etc.) tem seu próprio mecanismo. Está além do escopo deste guia aprofundar o assunto, mas se você quiser saber mais, vamos dar alguns exemplos no artigo Enviando e recuperando dados de formulário.

- -

 

- -

Conclusão

- -

Parabéns! Você construiu seu primeira formulário HTML. Aqui está um exemplo do resultado final.

- - - - - - - - - - - - - - -
Live example
{{ EmbedLiveSample('A_simple_form', '460', '240', '', 'Web/Guide/HTML/Forms/My_first_HTML_form/Example') }}
- -

Agora é hora de dar uma olhada mais profunda. Formulários HTML são muito mais poderoso do que o que nós vimos aqui e os outros artigos deste guia irá ajudá-lo a dominar o resto.

diff --git a/files/pt-br/web/guide/html/forms/os_widgets_nativos/index.html b/files/pt-br/web/guide/html/forms/os_widgets_nativos/index.html deleted file mode 100644 index ebefe55869..0000000000 --- a/files/pt-br/web/guide/html/forms/os_widgets_nativos/index.html +++ /dev/null @@ -1,701 +0,0 @@ ---- -title: Os widgets nativos -slug: Web/Guide/HTML/Forms/Os_widgets_nativos -tags: - - Aprender - - Contrôles - - Exemplos - - Guía - - HTML - - Iniciantes - - Intermediário - - Web -translation_of: Learn/Forms/Basic_native_form_controls ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Forms/How_to_structure_an_HTML_form", "Learn/HTML/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}
- -

Veremos agora, detalhadamente, a funcionalidade dos diferentes widgets dos formulários, observando as opções disponíveis para coletar diferentes tipos de dados. Este guia é um tanto exaustivo, cobrindo todos os widgets de formulários nativos disponíveis.

- - - - - - - - - - - - -
Pré-requisitos:Alfabetização básica em informática e um entendimento básico de HTML.
Objetivo:Entender quais são os widgets nativos de formulário disponiveis nos navegadores para coletar dados, e como implementa-los usando HTML.
- -

Aqui vamos nos concentrar nos widgets de formulário baseados em navegador, mas como os formulários HTML são muito limitados e a qualidade da implementação pode ser muito diferente de navegador para navegador, os desenvolvedores da Web às vezes criam seus próprios widgets de formulários — Veja How to build custom form widgets posteriormente neste mesmo módulo para obter mais idéias sobre isso.

- -
-

Nota: A maioria dos recursos discutidos neste artigo possui amplo suporte nos navegadores; destacaremos as exceções existentes. Se você quiser mais detalhes, consulte nosso artigo referência aos elementos de formulário HTML, e, em particular, nossa extensa referência de tipos <input>.

-
- -

Atributos comuns

- -

Muitos dos elementos usados para definir widgets de formulário têm seus próprios atributos. Entretanto, há um conjunto de atributos comuns a todos os elementos do formulário, os quais permitem certo controle sobre os widgets. Aqui está uma lista desses atributos comuns:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Nome do atributoValor padrãoDescrição
autofocus(falso)Este é um atributo booleano que permite especificar automaticamente qual elemento deverá ter o foco quando a página carregar, a menos que o usuário a substitua, por exemplo digitando sobre um controle diferente. Somente um elemento associado ao formulário em um documento pode ter esse atributo especificado.
disabled(falso)Este é um atributo booleano que indica que o usuário não pode interagir com este elemento. Se este atributo não estiver especificado, o elemento, então, herda a configuração do elemento que o contém, por exemplo, {{HTMLElement("fieldset")}}; se o elemento que o contém não possuir o atributo disabled, então o elemento é ativado.
formO elemento do formulário ao qual o widget está associado. O valor do atributo deve ser o atributo id de um {{HTMLElement("form")}} no mesmo documento. Em teoria, permite colocar um widget fora de um elemento {{HTMLElement("form")}}. Na prática, no entanto, não há navegador que suporte esse recurso.
nameO nome do elemento. Este atributo é enviado com os dados do formulário.
valueO Valor inicial do elemento.
- -

Text input fields

- -

Text {{htmlelement("input")}} fields are the most basic form widgets. They are a very convenient way to let the user enter any kind of data. However, some text fields can be specialized to achieve particular needs. We've already seen a few simple examples

- -
-

Note: HTML form text fields are simple plain text input controls. This means that you cannot use them to perform rich editing (bold, italic, etc.). All rich text editors you'll encounter out there are custom widgets created with HTML, CSS, and JavaScript.

-
- -

All text fields share some common behaviors:

- - - -
-

Note: The {{htmlelement("input")}} element is special because it can be almost anything. By simply setting its type attribute, it can change radically, and it is used for creating most types of form widget including single line text fields, controls without text input, time and date controls, and buttons. However, there are some exceptions, like {{htmlelement("textarea")}} for multi-line inputs. Take careful note of these as you read the article.

-
- -

Single line text fields

- -

A single line text field is created using an {{HTMLElement("input")}} element whose {{htmlattrxref("type","input")}} attribute value is set to text (also, if you don't provide the {{htmlattrxref("type","input")}} attribute, text is the default value). The value text for this attribute is also the fallback value if the value you specify for the {{htmlattrxref("type","input")}} attribute is unknown by the browser (for example if you specify type="date" and the browser doesn't support native date pickers).

- -
-

Note: You can find examples of all the single line text field types on GitHub at single-line-text-fields.html (see it live also).

-
- -

Here is a basic single line text field example:

- -
<input type="text" id="comment" name="comment" value="I'm a text field">
- -

Single line text fields have only one true constraint: if you type text with line breaks, the browser removes those line breaks before sending the data.

- -

Screenshots of single line text fields on several platforms.

- -

HTML5 enhances the basic single line text field by adding special values for the {{htmlattrxref("type","input")}} attribute. Those values still turn an {{HTMLElement("input")}} element into a single line text field but they add a few extra constraints and features to the field.

- -

E-mail address field

- -

This type of field is set with the value email for the {{htmlattrxref("type","input")}} attribute:

- -
<input type="email" id="email" name="email" multiple>
- -

When this type is used, the user is required to type a valid e-mail address into the field; any other content causes the browser to display an error when the form is submitted. Note that this is client-side error validation, performed by the browser:

- -

An invalid email input showing the message Please enter an email address.

- -

It's also possible to let the user type several e-mail addresses into the same input (separated by commas) by including the {{htmlattrxref("multiple","input")}} attribute.

- -

On some devices (especially on mobile), a different virtual keypad might be presented that is more suitable for entering email addresses.

- -
-

Note: You can find out more about form validation in the article Form data validation.

-
- -

Password field

- -

This type of field is set using the value password for the {{htmlattrxref("type","input")}} attribute:

- -
<input type="password" id="pwd" name="pwd">
- -

It doesn't add any special constraints to the entered text, but it does obscure the value entered into the field (e.g. with dots or asterisks) so it can't be read by others.

- -

Keep in mind this is just a user interface feature; unless you submit your form securely, it will get sent in plain text, which is bad for security — a malicious party could intercept your data and steal passwords, credit card details, or whatever else you've submitted. The best way to protect users from this is to host any pages involving forms over a secure connection (i.e. at an https:// ... address), so the data is encrypted before it is sent.

- -

Modern browsers recognize the security implications of sending form data over an insecure connection, and have implemented warnings to deter users from using insecure forms. For more information on what Firefox implements, see Insecure passwords.

- -

Search field

- -

This type of field is set by using the value search for the {{htmlattrxref("type","input")}} attribute:

- -
<input type="search" id="search" name="search">
- -

The main difference between a text field and a search field is how the browser styles it — often, search fields are rendered with rounded corners, and/or given an "x" to press to clear the entered value. However, there is another added feature worth noting: their values can be automatically saved to be auto completed across multiple pages on the same site.

- -

Screenshots of search fields on several platforms.

- -

Phone number field

- -

This type of field is set using tel as the value of the {{htmlattrxref("type","input")}} attribute:

- -
<input type="tel" id="tel" name="tel">
- -

Due to the wide variety of phone number formats around the world, this type of field does not enforce any constraints on the value entered by a user (this can include letters, etc.). This is primarily a semantic difference, although on some devices (especially on mobile), a different virtual keypad might be presented that is more suitable for entering phone numbers.

- -

URL field

- -

This type of field is set using the value url for the {{htmlattrxref("type","input")}} attribute:

- -
<input type="url" id="url" name="url">
- -

It adds special validation constraints to the field, with the browser reporting an error if invalid URLs are entered.

- -
Note: Just because the URL is well-formed doesn't necessarily mean that it refers to a location that actually exists.
- -
-

Note: Fields that have special constraints and are in error prevent the form from being sent; in addition, they can be styled so as to make the error clear. We will discuss this in detail in the article: Data form validation.

-
- -

Multi-line text fields

- -

A multi-line text field is specified using a {{HTMLElement("textarea")}} element, rather than using the {{HTMLElement("input")}} element.

- -
<textarea cols="30" rows="10"></textarea>
- -

The main difference between a textarea and a regular single line text field is that users are allowed to type text that includes hard line breaks (i.e. pressing return).

- -

Screenshots of multi-lines text fields on several platforms.

- -
-

Note: You can find an example of a multi-line text field on GitHub at multi-line-text-field.html (see it live also). Have a look at it, and notice how in most browsers, the text area is given a drag handle on the bottom right to allow the user to resize it. This resizing ability can be turned off by setting the text area's {{cssxref("resize")}} property to none using CSS.

-
- -

{{htmlelement("textarea")}} also accepts a few extra attributes to control its rendering across several lines (in addition to several others):

- - - - - - - - - - - - - - - - - - - - - - - - - - - -
Attributes for the {{HTMLElement("textarea")}} element
Attribute nameDefault valueDescription
{{htmlattrxref("cols","textarea")}}20The visible width of the text control, in average character widths.
{{htmlattrxref("rows","textarea")}}The number of visible text lines for the control.
{{htmlattrxref("wrap","textarea")}}softIndicates how the control wraps text. Possible values are: hard or soft
- -

Note that the {{HTMLElement("textarea")}} element is written a bit differently from the {{HTMLElement("input")}} element. The {{HTMLElement("input")}} element is an empty element, which means that it cannot contain any child elements. On the other hand, the {{HTMLElement("textarea")}} element is a regular element that can contain text content children.

- -

There are two key related points to note here:

- - - -

Drop-down content

- -

Drop-down widgets are a simple way to let users select one of many options without taking up much space in the user interface. HTML has two forms of drop down content: the select box, and autocomplete box. In both cases the interaction is the same — once the control is activated, the browser displays a list of values the user can select between.

- -
-

Note: You can find examples of all the drop-down box types on GitHub at drop-down-content.html (see it live also).

-
- -

Select box

- -

A select box is created with a {{HTMLElement("select")}} element with one or more {{HTMLElement("option")}} elements as its children, each of which specifies one of its possible values.

- -
<select id="simple" name="simple">
-  <option>Banana</option>
-  <option>Cherry</option>
-  <option>Lemon</option>
-</select>
- -

If required, the default value for the select box can be set using the {{htmlattrxref("selected","option")}} attribute on the desired {{HTMLElement("option")}} element — this option is then preselected when the page loads. The {{HTMLElement("option")}} elements can also be nested inside {{HTMLElement("optgroup")}} elements to create visually associated groups of values:

- -
<select id="groups" name="groups">
-  <optgroup label="fruits">
-    <option>Banana</option>
-    <option selected>Cherry</option>
-    <option>Lemon</option>
-  </optgroup>
-  <optgroup label="vegetables">
-    <option>Carrot</option>
-    <option>Eggplant</option>
-    <option>Potato</option>
-  </optgroup>
-</select>
- -

Screenshots of single line select box on several platforms.

- -

If an {{HTMLElement("option")}} element is set with a value attribute, that attribute's value is sent when the form is submitted. If the value attribute is omitted, the content of the {{HTMLElement("option")}} element is used as the select box's value.

- -

On the {{HTMLElement("optgroup")}} element, the label attribute is displayed before the values, but even if it looks somewhat like an option, it is not selectable.

- -

Multiple choice select box

- -

By default, a select box only lets the user select a single value. By adding the {{htmlattrxref("multiple","select")}} attribute to the {{HTMLElement("select")}} element, you can allow users to select several values, by using the default mechanism provided by the operating system (e.g. holding down Cmd/Ctrl and clicking multiple values).

- -

Note: In the case of multiple choice select boxes, the select box no longer displays the values as drop-down content — instead, they are all displayed at once in a list.

- -
<select multiple id="multi" name="multi">
-  <option>Banana</option>
-  <option>Cherry</option>
-  <option>Lemon</option>
-</select>
- -

Screenshots of multi-lines select box on several platforms.

- -
Note: All browsers that support the {{HTMLElement("select")}} element also support the {{htmlattrxref("multiple","select")}} attribute on it.
- -

Autocomplete box

- -

You can provide suggested, automatically-completed values for form widgets using the {{HTMLElement("datalist")}} element with some child {{HTMLElement("option")}} elements to specify the values to display.

- -

The data list is then bound to a text field (usually an <input> element) using the {{htmlattrxref("list","input")}} attribute.

- -

Once a data list is affiliated with a form widget, its options are used to auto-complete text entered by the user; typically, this is presented to the user as a drop-down box listing possible matches for what they've typed into the input.

- -
<label for="myFruit">What's your favorite fruit?</label>
-<input type="text" name="myFruit" id="myFruit" list="mySuggestion">
-<datalist id="mySuggestion">
-  <option>Apple</option>
-  <option>Banana</option>
-  <option>Blackberry</option>
-  <option>Blueberry</option>
-  <option>Lemon</option>
-  <option>Lychee</option>
-  <option>Peach</option>
-  <option>Pear</option>
-</datalist>
- -
Note: According to the HTML specification, the {{htmlattrxref("list","input")}} attribute and the {{HTMLElement("datalist")}} element can be used with any kind of widget requiring a user input. However, it is unclear how it should work with controls other than text (color or date for example), and different browsers behave differently from case to case. Because of that, be cautious using this feature with anything but text fields.
- -
Screenshots of datalist on several platforms.
- -
- -

Datalist support and fallbacks

- -

The  {{HTMLElement("datalist")}} element is a very recent addition to HTML forms, so browser support is a bit more limited than what we saw earlier. Most notably, it isn't supported in IE versions below 10, and Safari still doesn't support it at the time of writing.

- -

To handle this, here is a little trick to provide a nice fallback for those browsers:

- -
<label for="myFruit">What is your favorite fruit? (With fallback)</label>
-<input type="text" id="myFruit" name="fruit" list="fruitList">
-
-<datalist id="fruitList">
-  <label for="suggestion">or pick a fruit</label>
-  <select id="suggestion" name="altFruit">
-    <option>Apple</option>
-    <option>Banana</option>
-    <option>Blackberry</option>
-    <option>Blueberry</option>
-    <option>Lemon</option>
-    <option>Lychee</option>
-    <option>Peach</option>
-    <option>Pear</option>
-  </select>
-</datalist>
-
- -

Browsers that support the {{HTMLElement("datalist")}} element will ignore all the elements that are not {{HTMLElement("option")}} elements and will work as expected. On the other hand, browsers that do not support the {{HTMLElement("datalist")}} element will display the label and the select box. Of course, there are other ways to handle the lack of support for the {{HTMLElement("datalist")}} element, but this is the simplest (others tend to require JavaScript).

- - - - - - - - - - - - -
Safari 6Screenshot of the datalist element fallback with Safari on Mac OS
Firefox 18Screenshot of the datalist element with Firefox on Mac OS
- -

Checkable items

- -

Checkable items are widgets whose state you can change by clicking on them. There are two kinds of checkable item: the check box and the radio button. Both use the {{htmlattrxref("checked","input")}} attribute to indicate whether the widget is checked by default or not.

- -

It's worth noting that these widgets do not behave exactly like other form widgets. For most form widgets, once the form is submitted all widgets that have a {{htmlattrxref("name","input")}} attribute are sent, even if no value has been filled out. In the case of checkable items, their values are sent only if they are checked. If they are not checked, nothing is sent, not even their name.

- -
-

Note: You can find the examples from this section on GitHub as checkable-items.html (see it live also).

-
- -

For maximum usability/accessibility, you are advised to surround each list of related items in a {{htmlelement("fieldset")}}, with a {{htmlelement("legend")}} providing an overall description of the list.  Each individual pair of {{htmlelement("label")}}/{{htmlelement("input")}} elements should be contained in its own list item (or similar). This is shown in the examples. 

- -

You also need to provide values for these kinds of inputs inside the value attribute if you want them to be meaningful — if no value is provided, check boxes and radio buttons are given a value of on.

- -

Check box

- -

A check box is created using the {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to the value checkbox.

- -
<input type="checkbox" checked id="carrots" name="carrots" value="carrots">
-
- -

Including the checked attribute makes the checkbox checked automatically when the page loads.

- -

Screenshots of check boxes on several platforms.

- -

Radio button

- -

A radio button is created using the {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to the value radio.

- -
<input type="radio" checked id="soup" name="meal">
- -

Several radio buttons can be tied together. If they share the same value for their {{htmlattrxref("name","input")}} attribute, they will be considered to be in the same group of buttons. Only one button in a given group may be checked at the same time; this means that when one of them is checked all the others automatically get unchecked. When the form is sent, only the value of the checked radio button is sent. If none of them are checked, the whole pool of radio buttons is considered to be in an unknown state and no value is sent with the form.

- -
<fieldset>
-  <legend>What is your favorite meal?</legend>
-  <ul>
-    <li>
-      <label for="soup">Soup</label>
-      <input type="radio" checked id="soup" name="meal" value="soup">
-    </li>
-    <li>
-      <label for="curry">Curry</label>
-      <input type="radio" id="curry" name="meal" value="curry">
-    </li>
-    <li>
-      <label for="pizza">Pizza</label>
-      <input type="radio" id="pizza" name="meal" value="pizza">
-    </li>
-  </ul>
-</fieldset>
- -

Screenshots of radio buttons on several platforms.

- -

Buttons

- -

Within HTML forms, there are three kinds of button:

- -
-
Submit
-
Sends the form data to the server. For {{HTMLElement("button")}} elements, omitting the type attribute (or an invalid value of type) results in a submit button.
-
Reset
-
Resets all form widgets to their default values.
-
Anonymous
-
Buttons that have no automatic effect but can be customized using JavaScript code.
-
- -
-

Note: You can find the examples from this section on GitHub as button-examples.html (see it live also).

-
- -

A button is created using a {{HTMLElement("button")}} element or an {{HTMLElement("input")}} element. It's the value of the {{htmlattrxref("type","input")}} attribute that specifies what kind of button is displayed:

- -

submit

- -
<button type="submit">
-    This a <br><strong>submit button</strong>
-</button>
-
-<input type="submit" value="This is a submit button">
- -

reset

- -
<button type="reset">
-    This a <br><strong>reset button</strong>
-</button>
-
-<input type="reset" value="This is a reset button">
- -

anonymous

- -
<button type="button">
-    This an <br><strong>anonymous button</strong>
-</button>
-
-<input type="button" value="This is an anonymous button">
- -

Buttons always behave the same whether you use a {{HTMLElement("button")}} element or an {{HTMLElement("input")}} element. There are, however, some notable differences:

- - - -

Screenshots of buttons on several platforms.

- -

Technically speaking, there is almost no difference between a button defined with the {{HTMLElement("button")}} element or the {{HTMLElement("input")}} element. The only noticeable difference is the label of the button itself. Within an {{HTMLElement("input")}} element, the label can only be character data, whereas in a {{HTMLElement("button")}} element, the label can be HTML, so it can be styled accordingly.

- -

Advanced form widgets

- -

In this section we cover those widgets that let users input complex or unusual data. This includes exact or approximate numbers, dates and times, or colors.

- -
-

Note: You can find the examples from this section on GitHub as advanced-examples.html (see it live also).

-
- -

Numbers

- -

Widgets for numbers are created with the {{HTMLElement("input")}} element, with its {{htmlattrxref("type","input")}} attribute set to the value number. This control looks like a text field but allows only floating-point numbers, and usually provides some buttons to increase or decrease the value of the widget.

- -

It's also possible to:

- - - -

Example

- -
<input type="number" name="age" id="age" min="1" max="10" step="2">
- -

This creates a number widget whose value is restricted to any value between 1 and 10, and whose increase and decrease buttons change its value by 2.

- -

number inputs are not supported in versions of Internet Explorer below 10.

- -

Sliders

- -

Another way to pick a number is to use a slider. Visually speaking, sliders are less accurate than text fields, therefore they are used to pick a number whose exact value is not necessarily important.

- -

A slider is created by using the {{HTMLElement("input")}} with its {{htmlattrxref("type","input")}} attribute set to the value range. It's important to properly configure your slider; to that end, it's highly recommended that you set the {{htmlattrxref("min","input")}}, {{htmlattrxref("max","input")}}, and {{htmlattrxref("step","input")}} attributes.

- -

Example

- -
<input type="range" name="beans" id="beans" min="0" max="500" step="10">
- -

This example creates a slider whose value may range between 0 and 500, and whose increment/decrement buttons change the value by +10 and -10.

- -

One problem with sliders is that they don't offer any kind of visual feedback as to what the current value is. You need to add this yourself with JavaScript, but this is relatively easy to do. In this example we add an empty {{htmlelement("span")}} element, in which we will write the current value of the slider, updating it as it is changed.

- -
<label for="beans">How many beans can you eat?</label>
-<input type="range" name="beans" id="beans" min="0" max="500" step="10">
-<span class="beancount"></span>
- -

This can be implemented using some simple JavaScript:

- -
var beans = document.querySelector('#beans');
-var count = document.querySelector('.beancount');
-
-count.textContent = beans.value;
-
-beans.oninput = function() {
-  count.textContent = beans.value;
-}
- -

Here we store references to the range input and the span in two variables, then we immediately set the span's textContent to the current value of the input. Finally, we set up an oninput event handler so that every time the range slider is moved, the span textContent is updated to the new input value.

- -

range inputs are not supported in versions of Internet Explorer below 10.

- -

Date and time picker

- -

Gathering date and time values has traditionally been a nightmare for web developers. HTML5 brings some enhancements here by providing a special control to handle this specific kind of data.

- -

A date and time control is created using the {{HTMLElement("input")}} element and an appropriate value for the {{htmlattrxref("type","input")}} attribute, depending on whether you wish to collect dates, times, or both.

- -

datetime-local

- -

This creates a widget to display and pick a date with time, but without any specific time zone information.

- -
<input type="datetime-local" name="datetime" id="datetime">
- -

month

- -

This creates a widget to display and pick a month with a year.

- -
<input type="month" name="month" id="month">
- -

time

- -

This creates a widget to display and pick a time value.

- -
<input type="time" name="time" id="time">
- -

week

- -

This creates a widget to display and pick a week number and its year.

- -
<input type="week" name="week" id="week">
- -

All date and time control can be constrained using the {{htmlattrxref("min","input")}} and {{htmlattrxref("max","input")}} attributes.

- -
<label for="myDate">When are you available this summer?</label>
-<input type="date" name="myDate" min="2013-06-01" max="2013-08-31" id="myDate">
- -

Warning — The date and time widgets don't have the deepest support. At the moment, Chrome, Edge, Firefox, and Opera support them well, but there is no support in Internet Explorer and Safari has patchy support.

- -

Color picker

- -

Colors are always a bit difficult to handle. There are many ways to express them: RGB values (decimal or hexadecimal), HSL values, keywords, etc. The color widget lets users pick a color in both textual and visual ways.

- -

A color widget is created using the {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to the value color.

- -
<input type="color" name="color" id="color">
- -

Warning — Color widget support it currently not very good. There is no support in Internet Explorer, and Safari currently doesn't support it either. The other major browsers do support it.

- -

Other widgets

- -

There are a few other widgets that cannot be easily classified due to their very specific behaviors, but which are still very useful.

- -
-

Note: You can find the examples from this section on GitHub as other-examples.html (see it live also).

-
- -

File picker

- -

HTML forms are able to send files to a server; this specific action is detailed in the article Sending and retrieving form data. The file picker widget is how the user can choose one or more files to send.

- -

To create a file picker widget, you use the {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to file. The types of files that are accepted can be constrained using the {{htmlattrxref("accept","input")}} attribute. In addition, if you want to let the user pick more than one file, you can do so by adding the {{htmlattrxref("multiple","input")}} attribute.

- -

Example

- -

In this example, a file picker is created that requests graphic image files. The user is allowed to select multiple files in this case.

- -
<input type="file" name="file" id="file" accept="image/*" multiple>
- -

Hidden content

- -

It's sometimes convenient for technical reasons to have pieces of data that are sent with a form but not displayed to the user. To do this, you can add an invisible element in your form. Use an {{HTMLElement("input")}} with its {{htmlattrxref("type","input")}} attribute set to the value hidden.

- -

If you create such an element, it's required to set its name and value attributes:

- -
<input type="hidden" id="timestamp" name="timestamp" value="1286705410">
- -

Image button

- -

The image button control is one which is displayed exactly like an {{HTMLElement("img")}} element, except that when the user clicks on it, it behaves like a submit button (see above).

- -

An image button is created using an {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to the value image. This element supports exactly the same set of attributes as the {{HTMLElement("img")}} element, plus all the attributes supported by other form buttons.

- -
<input type="image" alt="Click me!" src="my-img.png" width="80" height="30" />
- -

If the image button is used to submit the form, this widget doesn't submit its value; instead the X and Y coordinates of the click on the image are submitted (the coordinates are relative to the image, meaning that the upper-left corner of the image represents the coordinate 0, 0). The coordinates are sent as two key/value pairs:

- - - -

So for example when you click on the image of this widget, you are sent to a URL like the following:

- -
http://foo.com?pos.x=123&pos.y=456
- -

This is a very convenient way to build a "hot map". How these values are sent and retrieved is detailed in the Sending and retrieving form data article.

- -

Meters and progress bars

- -

Meters and progress bars are visual representations of numeric values.

- -

Progress

- -

A progress bar represents a value that changes over time up to a maximum value specified by the {{htmlattrxref("max","progress")}} attribute. Such a bar is created using a {{ HTMLElement("progress")}} element.

- -
<progress max="100" value="75">75/100</progress>
- -

This is for implementing anything requiring progress reporting, such as the percentage of total files downloaded, or the number of questions filled in on a questionnaire.

- -

The content inside the {{HTMLElement("progress")}} element is a fallback for browsers that don't support the element and for assistive technologies to vocalize it.

- -

Meter

- -

A meter bar represents a fixed value in a range delimited by a {{htmlattrxref("min","meter")}} and a {{htmlattrxref("max","meter")}} value. This value is visualy rendered as a bar, and to know how this bar looks, we compare the value to some other set values:

- - - -

All browsers that implement the {{HTMLElement("meter")}} element use those values to change the color of the meter bar:

- - - -

Such a bar is created using a {{HTMLElement("meter")}} element. This is for implementing any kind of meter, for example a bar showing total space used on a disk, which turns red when it starts to get full.

- -
<meter min="0" max="100" value="75" low="33" high="66" optimum="50">75</meter>
- -

The content inside the {{HTMLElement("meter")}} element is a fallback for browsers that don't support the element and for assistive technologies to vocalize it.

- -

Support for progress and meter is fairly good — there is no support in Internet Explorer, but other browsers support it well.

- -

Conclusion

- -

As you'll have seen above, there are a lot of different types of available form elements — you don't need to remember all of these details at once, and can return to this article as often as you like to check up on details.

- -

See also

- -

To dig into the different form widgets, there are some useful external resources you should check out:

- - - -

{{PreviousMenuNext("Learn/HTML/Forms/How_to_structure_an_HTML_form", "Learn/HTML/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}

- - - -

In this module

- - diff --git a/files/pt-br/web/guide/html/forms/sending_and_retrieving_form_data/index.html b/files/pt-br/web/guide/html/forms/sending_and_retrieving_form_data/index.html deleted file mode 100644 index c6eaaee29b..0000000000 --- a/files/pt-br/web/guide/html/forms/sending_and_retrieving_form_data/index.html +++ /dev/null @@ -1,251 +0,0 @@ ---- -title: Sending form data -slug: Web/Guide/HTML/Forms/Sending_and_retrieving_form_data -translation_of: Learn/Forms/Sending_and_retrieving_form_data ---- -

Em muitos casos, a finalidade de HTML Form Um é enviar dados para um servidor. O servidor processa os dados e envia uma resposta ao usuário. Isso parece simples, mas é importante manter algumas coisas em mente para garantir que os dados não danifiquem o servidor ou causem problemas para seus usuários.

- -

Para onde vão os dados?

- -

Aqui nós discutiremos o que acontece com os dadosquando um formulário é enviado.

- -

Sobre a arquitetura cliente / servidor

- -

A web é baseada em uma arquitetura cliente / servidor muito básica que pode ser resumida da seguinte forma: um cliente (normalmente um navegador da Web) envia um pedido a um servidor (na maioria das vezes um servidor web como Apache, Nginx, IIS, Tomcat, etc.), usando o HTTP protocol. O servidor responde a solicitação usando o mesmo protocolo.

- -

A basic schema of the Web client/server architecture

- -

No lado do cliente, um formulário HTML é nada mais do que uma maneira conveniente e amigável para configurar uma solicitação HTTP para enviar dados para um servidor. Isso permite que o usuário forneça informações a serem entregues na solicitação HTTP.

- -

No lado do cliente: definindo como enviar os dados

- -

O elemento {{HTMLElement("form")}} define como os dados serão enviados. Todos os seus atributos são projetados para permitir que você configure o pedido a ser enviado quando um usuário acessa um botão de envio. Os dois atributos mais importantes são:{{htmlattrxref("action","form")}} e {{htmlattrxref("method","form")}}.

- -

o atributo {{htmlattrxref("action","form")}}

- -

Este atributo define para onde os dados são enviados. Seu valor deve ser um URL válido. Se esse atributo não for fornecido, os dados serão enviados para o URL da página que contém o formulário.

- -
Exemplos
- -

Neste exemplo, os dados são enviados para http://foo.com:

- -
<form action="http://foo.com">
- -

Aqui, os dados são enviados para o mesmo servidor que hospeda a página do formulário, mas para um URL diferente no servidor:

- -
<form action="/somewhere_else">
- -

Quando especificado sem atributos, como abaixo, o atributo {{HTMLElement("form")}}   faz com que os dados sejam enviados para a página que inclui o formulário:

- -
<form>
- -

Muitas páginas mais antigas usam a seguinte notação para indicar que os dados devem ser enviados para a mesma página que contém o formulário; Isso era necessário porque até HTML5, o atributo {{htmlattrxref ( "action", "form")}} era obrigatório. Isso não é mais necessário.

- -
<form action="#">
- -
-

Nota: É possível especificar um URL que use o protocolo HTTPS (HTTP seguro). Quando você fizer isso, os dados são criptografados junto com o resto da solicitação, mesmo se o formulário em si é hospedado em uma página insegura acessada usando HTTP. Por outro lado, se o formulário estiver hospedado na página segura, mas você especificar um URL HTTP inseguro com o atributo {{htmlattrxref ( "action", "form")}}, todos os navegadores exibirão um aviso de segurança para o usuário cada vez que Tente enviar dados porque os dados não serão criptografados.

-
- -

o atributo {{htmlattrxref("method","form")}}

- -

Este atributo define como os dados são enviados. o HTTP protocol 

- -

Fornece várias maneiras de executar um pedido; Os dados de formulários HTML podem ser enviados através de pelo menos dois deles: o método GET eo método POST.

- -

Para entender a diferença entre esses dois métodos, vamos dar um passo atrás e examinar como funciona o HTTP. Cada vez que você deseja acessar um recurso na Web, o navegador envia uma solicitação para um URL. Uma solicitação HTTP consiste em duas partes: um cabeçalho que contém um conjunto de metadados globais sobre as capacidades do navegador e um corpo que pode conter informações necessárias ao servidor para processar a solicitação específica.

- -
O método GET
- -

O método GET é o método usado pelo navegador para pedir ao servidor para enviar de volta um determinado recurso: "Hey servidor, eu quero obter este recurso." Nesse caso, o navegador envia um corpo vazio. Como o corpo está vazio, se um formulário é enviado usando esse método, os dados enviados para o servidor são anexados ao URL.

- -
Exemplo
- Considere o seguinte formulário:
- -
<form action="http://foo.com" method="get">
-  <input name="say" value="Hi">
-  <input name="to" value="Mom">
-  <button>Envie meus cumprimentos</button>
-</form>
- -

Com o método GET, a solicitação HTTP tem esta aparência:

- -
GET /?say=Hi&to=Mom HTTP/1.1
-Host: foo.com
- -
O método POST
- -

O método POST é um pouco diferente. É o método que o navegador envia ao servidor para pedir uma resposta que leva em conta os dados fornecidos no corpo da solicitação HTTP: "Hey servidor, dê uma olhada nesses dados e envie-me de volta um resultado apropriado". Se um formulário é enviado usando esse método, os dados são anexados ao corpo do pedido HTTP.

- -
Exemplo
- -

Considere esta forma (a mesma acima):

- -
<form action="http://foo.com" method="post">
-  <input name="say" value="Hi">
-  <input name="to" value="Mom">
-  <button>Send my greetings</button>
-</form>
- -

Quando enviado usando o método POST, o pedido HTTP se parece com isto:

- -
POST / HTTP/1.1
-Host: foo.com
-Content-Type: application/x-www-form-urlencoded
-Content-Length: 13
-
-say=Hi&to=Mom
- -

O cabeçalho Content-Length indica o tamanho do corpo eo cabeçalho Content-Type indica o tipo de recurso enviado para o servidor. Vamos discutir esses cabeçalhos em um pouco.

- -

Obviamente, as solicitações HTTP nunca são exibidas para o usuário (se você quiser vê-las, você precisa usar ferramentas como o Firefox Web Console ou o Chrome Developer Tools). A única coisa exibida para o usuário é o URL chamado. Assim, com uma solicitação GET, o usuário verá os dados em sua barra de URL, mas com uma solicitação POST, eles não. Isso pode ser muito importante por duas razões:

- -
    -
  1. Se você precisar enviar uma senha (ou qualquer parte sensível de dados), nunca use o método GET ou corre o risco de exibi-lo na barra de URL.
    2. -
  2. Se você precisar enviar uma grande quantidade de dados, o método POST é preferido porque alguns navegadores limitam o tamanho dos URLs. Além disso, muitos servidores limitam o comprimento dos URLs que aceitam.
    3. -
- -

No lado do servidor: recuperar os dados

- -

Seja qual for o método HTTP escolhido, o servidor recebe uma string que será analisada para obter os dados como uma lista de pares chave / valor. A maneira como você acessa essa lista depende da plataforma de desenvolvimento que você usa e de quaisquer frameworks específicos que você possa usar com ele. A tecnologia que você usa também determina como as chaves duplicadas são manipuladas; Freqüentemente, o valor recebido mais recentemente para uma determinada chave recebe prioridade.

- -

Exemplo: PHP Bruto

- -

O PHP oferece alguns objetos globais para acessar os dados. Supondo que você tenha usado o método POST, o exemplo a seguir apenas leva os dados e exibe-o para o usuário. Claro, o que você faz com os dados depende de você. Você pode exibi-lo, armazená-lo em um banco de dados, enviá-los por e-mail, ou processá-lo de alguma outra maneira.

- -
<?php
-  // The global $_POST variable allows you to access the data sent with the POST method
-  // To access the data sent with the GET method, you can use $_GET
-  $say = htmlspecialchars($_POST['say']);
-  $to  = htmlspecialchars($_POST['to']);
-
-  echo  $say, ' ', $to;
- -

Este exemplo exibe uma página com os dados enviados. Em nosso exemplo de antes, a saída seria:

- -
Oi Mãe
- -

Example: Python Bruto

- -

This example uses Python to do the same thing--display the provided data on a web page. It uses the CGI Python package to access the form data.

- -
#!/usr/bin/env python
-import html
-import cgi
-import cgitb; cgitb.enable()     # for troubleshooting
-
-print("Content-Type: text/html") # HTTP header to say HTML is following
-print()                          # blank line, end of headers
-
-form = cgi.FieldStorage()
-say  = html.escape(form["say"].value);
-to   = html.escape(form["to"].value);
-
-print(say, " ", to)
- -

O resultado é o mesmo que com o PHP:

- -
Oi Mãe
- -

Outros idiomas e frameworks

- -

Há muitas outras tecnologias do lado do servidor que você pode usar para o tratamento de formulários, incluindo Perl, Java, .Net, Ruby, etc. Basta escolher o que você mais gosta. Dito isto, é importante notar que é muito incomum usar essas tecnologias diretamente porque isso pode ser complicado. É mais comum usar um dos muitos frameworks agradáveis que facilitam o manuseio de formulários, como:

- - - -

Vale a pena notar que mesmo usando essas estruturas, trabalhar com formulários não é necessariamente fácil. Mas é muito melhor, e você vai economizar muito tempo.

- -

Um caso especial: enviar arquivos

- -

Arquivos são um caso especial com formulários HTML. Eles são dados binários - ou considerados como tal - onde todos os outros dados são dados de texto. Porque HTTP é um protocolo de texto, há requisitos especiais para manipular dados binários.

- -

o {{htmlattrxref("enctype","form")}} atributo

- -

Esse atributo permite especificar o valor do cabeçalho HTTP Content-Type. Este cabeçalho é muito importante porque informa ao servidor que tipo de dados está sendo enviado. Por padrão, seu valor é application / x-www-form-urlencoded. Em termos humanos, isso significa: "Este é o formulário de dados que foi codificado em forma de URL."

- -

Mas se você quiser enviar arquivos, você precisa fazer duas coisas:

- - - -

Por exemplo:

- -
<form method="post" enctype="multipart/form-data">
-  <input type="file" name="myFile">
-  <button>Send the file</button>
-</form>
- -
-

Nota: Alguns navegadores suportam{{htmlattrxref("multiple","input")}} Atributo no {{HTMLElement("input")}} Elemento para enviar mais de um arquivo com apenas um elemento de entrada. Como o servidor lida com esses arquivos realmente depende da tecnologia usada no servidor. Como mencionado anteriormente, usando um quadro fará sua vida muito mais fácil.

-
- -
-

Aviso: Muitos servidores são configurados com um limite de tamanho para arquivos e solicitações HTTP, a fim de evitar abusos. É importante verificar esse limite com o administrador do servidor antes de enviar um arquivo.

-
- -

Preocupações com segurança

- -

Cada vez que você envia dados para um servidor, você precisa considerar a segurança. Formulários HTML são um dos primeiros vetores de ataque contra servidores. Os problemas nunca vêm dos formulários HTML em si; Eles vêm de como o servidor manipula dados.

- -

Falhas de segurança comuns

- -

Dependendo do que você está fazendo, existem alguns problemas de segurança muito conhecidos:

- -

XSS e CSRF

- -

Cross-Site Scripting (XSS) e Cross-Site Request Forgery (CSRF) são tipos comuns de ataques que ocorrem quando você exibe dados enviados por um usuário para o usuário ou para outro usuário.

- -

O XSS permite que os invasores injetem scripts do lado do cliente em páginas da Web vistas por outros usuários. Uma vulnerabilidade de scripts entre sites pode ser usada por atacantes para ignorar controles de acesso, como o same origin policy. O efeito desses ataques pode variar de um pequeno incômodo a um risco de segurança significativo.

- -

CSRF são semelhantes aos ataques XSS, já que eles começam da mesma maneira - injetando script do lado do cliente em páginas da Web - mas seu destino é diferente. Os invasores do CSRF tentam aumentar os privilégios para aqueles de um usuário com privilégios mais altos (como um administrador do site) para executar uma ação que não deve ser capaz de fazer (por exemplo, enviar dados para um usuário não confiável).

- -

Os ataques XSS exploram a confiança que um usuário tem para um site, enquanto os ataques CSRF exploram a confiança que um site tem para seus usuários.

- -

To prevent these attacks, you should always check the data a user sends to your server and (if you need to display it) try not to display the HTML content as provided by the user. Intead, you should process the user-provided data so you don't display it verbatim.  Almost all frameworks on the market today implement a minimal filter that removes the HTML {{HTMLElement("script")}}, {{HTMLElement("iframe")}} and {{HTMLElement("object")}} elements from data sent by any user. This helps to mitigate the risk, but doesn't necessarily eradicate it.

- -

SQL injection

- -

SQL injection is a type of attack that tries to perform actions on a database used by the target web site. This typically involves sending an SQL request in the hope that the server will execute it (many times when the application server tries to store the data). This is actually one of the main vector attacks against web sites.

- -

The consequences can be terrible, ranging from data loss to access to a whole infrastructure by using privilege escalation. This is a very serious threat and you should never store data sent by a user without performing some sanitization (for example, by using mysql_real_escape_string() on a PHP/MySQL infrastructure).

- -

HTTP header injection and email injection

- -

These kinds of attacks can occur when your application builds HTTP headers or emails based on the data input by a user on a form. These won't directly damage your server or affect your users, but they are an open door to deeper problems such as session hijacking or phishing attacks.

- -

These attacks are mostly silent, and can turn your server into a zombie.

- -

Be paranoid: Never trust your users

- -

So, how do you fight these threats? This is a topic far beyond this guide, but there are a few rules to keep in mind. The most important rule is: never ever trust your users, including yourself; even a trusted user could have been hijacked.

- -

All data that comes to your server must be checked and sanitized. Always. No exception.

- - - -

You should avoid many/most problems if you follow these three rules, but it's always a good idea to get a security review performed by a competent third party. Don't assume that you've seen all the possible problems.

- -

Conclusion

- -

As you can see, sending form data is easy, but securing an application can be tricky. Just remember that a front-end developer is not the one who should define the security model of the data. Yes, as we'll see, it's possible to perform client side data validation but the server can't trust this validation because it has no way to truly know what really happens on the client side.

- -

See also

- -

If you want to learn more about securing a web application, you can dig into these resources:

- - diff --git a/files/pt-br/web/guide/html/html5/index.html b/files/pt-br/web/guide/html/html5/index.html new file mode 100644 index 0000000000..e39b45444a --- /dev/null +++ b/files/pt-br/web/guide/html/html5/index.html @@ -0,0 +1,299 @@ +--- +title: HTML5 +slug: Web/HTML/HTML5 +tags: + - Desenvolvimento Web + - Guía + - HTML + - HTML5 + - Visão Geral + - Web +translation_of: 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.) {{ fx_minversion_inline(4.0) }}

+ +

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/web/guide/html/html5/introduction_to_html5/index.html b/files/pt-br/web/guide/html/html5/introduction_to_html5/index.html new file mode 100644 index 0000000000..465d67760d --- /dev/null +++ b/files/pt-br/web/guide/html/html5/introduction_to_html5/index.html @@ -0,0 +1,23 @@ +--- +title: Introdução ao HTML5 +slug: Web/HTML/HTML5/Introduction_to_HTML5 +translation_of: 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/web/guide/html/using_data_attributes/index.html b/files/pt-br/web/guide/html/using_data_attributes/index.html deleted file mode 100644 index 20daf02206..0000000000 --- a/files/pt-br/web/guide/html/using_data_attributes/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: Utilizando data attributes -slug: Web/Guide/HTML/Using_data_attributes -translation_of: Learn/HTML/Howto/Use_data_attributes ---- -

O HTML5 foi criado pensando na extensibilidade dos dados que precisam ser associados a um determinado elemento mas não necessariamente tem um significado definido.  Atributos data-* nos permite armazenar informações extras em elementos HTML padrões e semânticos, sem a necessidades de hacks como classList, atributos fora do padrão, propriedades extras no DOM ou o método depreciado setUserData.

- -

Sintaxe HTML

- -

A sintaxe é simples. Qualquer atributo de qualquer elemento no qual o nome do atributo inicia com data- é um atributo data. Digamos que você possui um article e quer armazenar informações extras que não possuem nenhuma representação visual. Use atributos data para isso:

- -
<article
-  id="electriccars"
-  data-columns="3"
-  data-index-number="12314"
-  data-parent="cars">
-...
-</article>
- -

Acesso no JavaScript

- -

Ler os valores destes atributos via JavaScript é muito simples também. Você pode lê-los usando {{domxref("Element.getAttribute", "getAttribute()")}} com o nome html completo, mas a forma padrão provê uma alternativa mais simples: um {{domxref("DOMStringMap")}} pode ser lido através da propriedade {{domxref("HTMLElement.dataset", "dataset")}}.

- -

Para obter o atributo data através do objeto dataset, acesse a propriedade utilizando a parte do nome do atributo após o prefixo data- (note que o hífen é convertido para camelCase).

- -
var article = document.getElementById('electriccars');
-
-article.dataset.columns // "3"
-article.dataset.indexNumber // "12314"
-article.dataset.parent // "cars"
- -

Cada propriedade é uma String e pode ser lida e escrita. No exemplo acima a atribuição article.dataset.columns = 5 iria alterar esse atributo para "5".

- -

Acesso no CSS

- -

Note que os atributos data são atributos em HTML puro, e você pode inclusive acessá-los via CSS. Por exemplo, para mostrar o elemento pai em um artigo, você pode usar conteúdo gerado em CSS com a função {{cssxref("attr")}}:

- -
article::before {
-  content: attr(data-parent);
-}
- -

Pode-se também usar os seletores de atributos em CSS para alterar estilos de acordo com o atributo data:

- -
article[data-columns='3'] {
-  width: 400px;
-}
-article[data-columns='4'] {
-  width: 600px;
-}
- -

Pode-se tudo isso em funcionamento neste exemplo JSBin.

- -

Atributos data também podem ser utilizados para conter informações que mudam constantemente, como a pontuação em um jogo. Usando seletores CSS e acesso com JavaScript permite que se construa efeitos excelentes sem ter que escrever suas próprias rotinas de display. Veja esta tela para um exemplo utilizando conteúdo gerado e transições CSS (exemplo JSBin).

- -

Uma vez que valores data são strings, todos os valores devem estar entre aspas ou então a estilização não fará efeito.

- -

Issues

- -

Não armazene conteúdo que deve estar visível e acessível nos atributos data porque tecnologias assistivas podem não acessá-los. Além disso, motores de busca podem não indexar os valores dos atributos data. 

- -

Os principais issues a serem considerados são com suporte e performance no Internet Explorer. O Internet Explorer 11+ provê suporte para o padrão, mas todas as versões anteriores não suportam dataset. Para suporte ao IE 10 e anteriores, deve-se acessar atributos data através de {{domxref("Element.getAttribute", "getAttribute()")}} . E ainda, a performance de leitura dos atributos data é ruim, comparada com o armazenamento em um data warehouse JS. O uso de dataset é até pior que a leitura dos dados com getAttribute().

- -

Apesar do que foi colocado, para metadados customizados associados a elementos, eles são uma ótima solução.

- -

No Firefox 49.0.2 (e talvez em versões anteriores/posteriores), os atributos data que excederem 1022 caracteres não serão lidos pelo Javascript (EcmaScript 4).

- -

Veja também

- - diff --git a/files/pt-br/web/guide/html/using_html_sections_and_outlines/index.html b/files/pt-br/web/guide/html/using_html_sections_and_outlines/index.html new file mode 100644 index 0000000000..09ec86b3a2 --- /dev/null +++ b/files/pt-br/web/guide/html/using_html_sections_and_outlines/index.html @@ -0,0 +1,416 @@ +--- +title: Seções e estrutura de um documento HTML5 +slug: Sections_and_Outlines_of_an_HTML5_document +translation_of: 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.

+ +

{{ HTML5ArticleTOC() }}

+ +
+

{{ languages( {"es": "/es/Secciones_y_esquema_de_un_documento_HTML_5", "ja": "ja/Sections_and_Outlines_of_an_HTML5_document"}) }}

+
diff --git a/files/pt-br/web/guide/introducao_ao_desenvolvimento_web/index.html b/files/pt-br/web/guide/introducao_ao_desenvolvimento_web/index.html deleted file mode 100644 index 46944374f5..0000000000 --- a/files/pt-br/web/guide/introducao_ao_desenvolvimento_web/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: Introdução ao Desenvolvimento Web -slug: Web/Guide/Introducao_ao_Desenvolvimento_Web -tags: - - CSS - - CodingScriping - - HTML - - Iniciante - - JavaScript - - Web -translation_of: Web/Guide/Introduction_to_Web_development ---- -

Se você está apenas começando com o desenvolvimento Web ou expandindo seus horizontes em novos domínios da espetacular Web, os links aqui devem ajudá-lo a começar.
-
- Para outro conjunto (sobreposto) de links sobre recursos de aprendizado, consulte as páginas de aprendizado do MDN.

- -
Nota: Os recursos recomendados nesta página estão sujeitos à alterações
- - - - - - - - -
-

Tópicos da documentação

- -

HTML

- - - -

CSS

- - - -

JavaScript

- -

Iniciante

- - - -

Intermediário

- - - -

Avançado

- - - 		-

Recursos

- -
-
W3C Web Education Community Group Wiki
-
Aborda design web, HTML e HTML5, CSS, JavaScript e acessibilidade. Este é um bom ponto de partida para iniciantes que desejam aprender fundamentos de desenvolvimento web em várias áreas
-
SitePoint
-
Uma referência confiável para aprender HTML, CSS e Javascript que também menciona o suporte através de diferentes navegadores e erros conhecidos.
-
HTMLDog
-
Uma completa e excelente página de referência sobre HTML e CSS para iniciantes.
-
HTML, CSS, and Javascript do Ground Up
-
Estes videos tutoriais de fácil entedimento de especialistas da Google abordam os básicos de HTML, CSS e JavaScript.
-
Tutoriais iniciantes de CSSTutorial.net
-
Uma grande variedade de textos e video tutoriais que abordam os aspectos básicos ao intermediário do CSS.
-
Tutoriais CSS do Tizag
-
Uma referência fácil de seguir para aqueles que desejam aprender CSS através de tutoriais curtos e concisos
-
Fundamentos do jQuery
-
Um livro de referência de código aberto com instruções detalhadas para iniciantes de JavaScript e jQuery.
-
JavaScript From Null: Uma série de vídeos
-
Uma série de videos sobre JavaScript para completos iniciantes que buscam uma abordagem mais visual de aprendizado.
-
-
diff --git a/files/pt-br/web/guide/introduction_to_web_development/index.html b/files/pt-br/web/guide/introduction_to_web_development/index.html new file mode 100644 index 0000000000..46944374f5 --- /dev/null +++ b/files/pt-br/web/guide/introduction_to_web_development/index.html @@ -0,0 +1,97 @@ +--- +title: Introdução ao Desenvolvimento Web +slug: Web/Guide/Introducao_ao_Desenvolvimento_Web +tags: + - CSS + - CodingScriping + - HTML + - Iniciante + - JavaScript + - Web +translation_of: Web/Guide/Introduction_to_Web_development +--- +

Se você está apenas começando com o desenvolvimento Web ou expandindo seus horizontes em novos domínios da espetacular Web, os links aqui devem ajudá-lo a começar.
+
+ Para outro conjunto (sobreposto) de links sobre recursos de aprendizado, consulte as páginas de aprendizado do MDN.

+ +
Nota: Os recursos recomendados nesta página estão sujeitos à alterações
+ + + + + + + + +
+

Tópicos da documentação

+ +

HTML

+ + + +

CSS

+ + + +

JavaScript

+ +

Iniciante

+ + + +

Intermediário

+ + + +

Avançado

+ + + 		+

Recursos

+ +
+
W3C Web Education Community Group Wiki
+
Aborda design web, HTML e HTML5, CSS, JavaScript e acessibilidade. Este é um bom ponto de partida para iniciantes que desejam aprender fundamentos de desenvolvimento web em várias áreas
+
SitePoint
+
Uma referência confiável para aprender HTML, CSS e Javascript que também menciona o suporte através de diferentes navegadores e erros conhecidos.
+
HTMLDog
+
Uma completa e excelente página de referência sobre HTML e CSS para iniciantes.
+
HTML, CSS, and Javascript do Ground Up
+
Estes videos tutoriais de fácil entedimento de especialistas da Google abordam os básicos de HTML, CSS e JavaScript.
+
Tutoriais iniciantes de CSSTutorial.net
+
Uma grande variedade de textos e video tutoriais que abordam os aspectos básicos ao intermediário do CSS.
+
Tutoriais CSS do Tizag
+
Uma referência fácil de seguir para aqueles que desejam aprender CSS através de tutoriais curtos e concisos
+
Fundamentos do jQuery
+
Um livro de referência de código aberto com instruções detalhadas para iniciantes de JavaScript e jQuery.
+
JavaScript From Null: Uma série de vídeos
+
Uma série de videos sobre JavaScript para completos iniciantes que buscam uma abordagem mais visual de aprendizado.
+
+
diff --git a/files/pt-br/web/guide/mobile/mobile-friendliness/index.html b/files/pt-br/web/guide/mobile/mobile-friendliness/index.html new file mode 100644 index 0000000000..4fd3c49a1a --- /dev/null +++ b/files/pt-br/web/guide/mobile/mobile-friendliness/index.html @@ -0,0 +1,30 @@ +--- +title: Site Móvel Amigável +slug: Web_Development/Mobile/Mobile-friendliness +translation_of: Web/Guide/Mobile/Mobile-friendliness +--- +

O que é site móvel amigável?

+

Mobile friendliness can mean a multitude of things, depending on who you’re talking to. It can be helpful to think of it in terms of three goals for improving your site’s user experience: Presentation, Content, and Performance.

+

Goal #1 (Presentation)

+

“Make websites that work well on a variety of screen sizes.”

+

These days, users can access the web on devices in a wide range of form factors, including phones, tablets, and eReaders. Needless to say, a fixed-width, three-column layout filled with complex JavaScript animations and mouse-over effects is not going to look or feel quite right on a phone with a 2-inch-wide screen and a diminutive processor. A slimmed-down, linearized page layout with elements sized for a touchscreen would be much more appropriate. That’s why this first goal is all about presenting your content in a way that makes life easy for users on mobile device.

+

Goal #2 (Content)

+

“Adjust your content for mobile users.”alaska_air_mobile_and_desktop-300x225.png

+

Think about what your users want to do at your site if they are on a phone. A great example of this is Alaska Air’s website. Their desktop site focuses on getting visitors to book trips. Mobile users, however, are probably more interested in checking-in for a flight or seeing if their flight is delayed. They’ve adjusted their site’s content to reflect this, and it meets the needs of mobile users.

+

Goal #3 (Performance)

+

“Give your users a smooth experience, even on a slow connection.”

+

Though things have been getting better in recent years, browsing the Internet over a wireless data connection can still be pretty painful. This makes it more essential than ever to practice good performance practices, only sending the user the bits they will actually need.

+

Know your audience

+

While not strictly a part of the definition of being mobile friendly, defining who your target audience is makes these goals much more concrete. For example, it is absolutely critical to keep in mind which browsers and devices you will target when picking a mobile strategy. If your audience is full of early-adopters, you can focus on tablets and smartphones with standards-friendly browsers. On the other hand, if many of your site’s users are on devices with less capable browsers, that may eliminate certain strategies as viable options.

+

Approaches to mobile Web development

+

The following approaches aim to achieve each of these goals by different means.

+ +
+

Original document information

+

Originally published on 4 May, 2011 on the Mozilla Webdev blog as "Approaches to Mobile Web Development Part 1 - What is Mobile Friendliness?", by Jason Grlicky.

+
+

 

diff --git a/files/pt-br/web/guide/mobile/separate_sites/index.html b/files/pt-br/web/guide/mobile/separate_sites/index.html new file mode 100644 index 0000000000..2ca783fbc9 --- /dev/null +++ b/files/pt-br/web/guide/mobile/separate_sites/index.html @@ -0,0 +1,30 @@ +--- +title: Sites separados para celular e desktop +slug: Web_Development/Mobile/Sites_separados +translation_of: Web/Guide/Mobile/Separate_sites +--- +

The "separate sites" approach to mobile Web development involves creating different sites for mobile and desktop Web users. This approach has positive and negative aspects.

+

The good

+

The first option is the most popular by far: use user-agent detection to route users on phones to a separate mobile site, typically at m.example.com. In a nutshell, this technique uses server-side logic to solve all three goals of mobile web development at once — if the user’s browser looks like it’s on a phone, you serve them mobile content, formatted for their phone and optimized for speed.

+

Conceptually simple, this is the easiest option to add to an existing site, especially if you are using a CMS or Web application that supports templates. Since only the mobile-specific content, styles, and scripts are sent to mobile users, this method also provides for the best performance out of any of the other options presented here. Finally, it also allows for completely different user experiences on desktop and mobile — they’re two different sites, after all!

+

The bad

+

Unfortunately, this approach is not without its drawbacks. For starters, you are now maintaining two different pages for every page on your site that you would like to expose to mobile users. If you are using a CMS, is possible to arrange your site templates in a way that minimizes this duplication. However any time that there is a difference between the mobile and desktop templates, there is a potential source of complication in your code. Similarly, this increases the implementation time of any new site features, since you must now code two sets of front-end logic.

+

Even more important than that, though, is the fact that user-agent detection is inherently flawed, and anything but future-proof. Every time a new browser comes out, you must adjust your algorithm to accommodate it. And false positives are particularly scary — it could be embarrassing to serve desktop users your mobile site accidentally.

+

When it is right to choose this option

+

sumo_screenshot.pngFirstly, if your target audience includes users on older or low-end feature phones, it is worth noting that you may need to employ this strategy to some degree no matter what. This is because the default browsers on some feature-phones do not support the same markup that you would use to code a website targeted at the desktop, but instead understand formats like XHTML-MP or the older WML.

+

This factor aside, there is one case where this strategy really shines over other methods. If the functionality you would like to provide to your users on mobile devices is extremely different from that on a desktop, then using separate sites is simply likely to be the most practical choice. This is because you have the option of sending completely separate HTML, JavaScript, and CSS to phones and PCs.

+

Another case where you may be forced to use this approach is if you cannot, for whatever reason, modify your existing desktop site, and need to have a 100% separate mobile site. Though it’s not ideal, at least you have this option.

+

Examples

+

Most of the major Web applications you see in the wild have chosen this path, including Facebook, YouTube, Digg, and Flickr. In fact, Mozilla picked this strategy for the mobile versions of addons.mozilla.org (AMO) and support.mozilla.org (SUMO). If you’d like to see the source code behind an example of this approach in action, feel free to check out the github repository for AMO or SUMO.

+

Approaches to mobile Web development

+

See the following articles for background and other approaches to developing for mobile platforms.

+ +
+

Original document information

+

This article was originally published on 13 May 2011, on the Mozilla Webdev blog as "Approaches to Mobile Web Development Part 2 – Separate Sites", by Jason Grlicky.

+
+

 

diff --git a/files/pt-br/web/html/attributes/index.html b/files/pt-br/web/html/attributes/index.html new file mode 100644 index 0000000000..cac8b527ec --- /dev/null +++ b/files/pt-br/web/html/attributes/index.html @@ -0,0 +1,578 @@ +--- +title: Atributos +slug: HTML/Attributes +translation_of: Web/HTML/Attributes +--- +

 

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Nome do AtributoElementosDescrição
accept{{ HTMLElement("form") }}, {{ HTMLElement("input") }}Lista de tipos que o servidor aceita, tipicamente um tipo de arquivo.
accept-charset{{ HTMLElement("form") }}Lista de conjunto de caracteres suportados.
accesskeyGlobal attributeDefine um atalho no teclado para ativar ou adicionar foco ao elemento.
action{{ HTMLElement("form") }}A URI de um programa que processa a informação submetida através do formulário.
align{{ HTMLElement("applet") }}, {{ HTMLElement("caption") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }},  {{ HTMLElement("hr") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }},  {{ HTMLElement("td") }},  {{ HTMLElement("tfoot") }} , {{ HTMLElement("th") }}, {{ HTMLElement("thead") }}, {{ HTMLElement("tr") }}Especifica o alinhamento horizontal do elemento.
alt +

{{ HTMLElement("applet") }}, {{ HTMLElement("area") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}

+ 		Texto alternativo caso uma imagem não possa ser exibida.
async{{ HTMLElement("script") }}Indica que o script deve ser executado assíncrono.
autocomplete{{ HTMLElement("form") }}, {{ HTMLElement("input") }}Indica se controles  neste formulário podem por padrão ter seus valores completados automaticamente pelo navegador.
autofocus{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}O elemento deve ser focado automaticamente após a página ser carregada.
autoplay{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}O aúdio ou vídeo deve ser reproduzido assim que possível.
bgcolor{{ HTMLElement("body") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("tfoot") }}, {{ HTMLElement("td") }}, {{ HTMLElement("th") }}, {{ HTMLElement("tr") }} +

Cor do plano de fundo do elemento.

+

Nota: Este é um atributo legado. Por favor use a propriedade CSS {{ Cssxref("background-color") }} em vez disso.

+
border{{ HTMLElement("img") }}, {{ HTMLElement("object") }}, {{ HTMLElement("table") }} +

A largura da borda.

+

Nota: este é um atributo legado. Por favor use a propriedade CSS {{ Cssxref("border") }} em vez disso.

+
buffered{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}Contém o intervalo de tempo da mídia que já foi carregada.
challenge{{ HTMLElement("keygen") }}A challenge string that is submitted along with the public key.
charset{{ HTMLElement("meta") }}, {{ HTMLElement("script") }}Declara a codificação dos caracteres da página ou do script.
checked{{ HTMLElement("command") }}, {{ HTMLElement("input") }}Indica se o elemento deve ser checado no carregamento da página.
cite{{ HTMLElement("blockquote") }}, {{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("q") }}Contêm uma URI que aponta para a fonte da citação ou alteração.
classGlobal attributeFrequentemente usado com CSS para estilizar os elementos com propriedades comuns.
code{{ HTMLElement("applet") }}Especifica a URL do arquivo de classe do miniaplicativo que será carregado e executado.
codebase{{ HTMLElement("applet") }}Este atributo fornece a URL absoluta ou relativa do diretório onde os arquivos .class do miniaplicativo são armazenados.
color{{ HTMLElement("basefont") }}, {{ HTMLElement("font") }}, {{ HTMLElement("hr") }} +

Este atributo define a cor do texto usando o nome de uma cor ou uma cor especificada em hexadecimal através do formato #RRGGBB.

+

Nota: este é um atributo legado. Por favor use a propriedade CSS {{ Cssxref("color") }} em vez disso.

+
cols{{ HTMLElement("textarea") }}Define o número de colunas numa area de texto.
colspan{{ HTMLElement("td") }}, {{ HTMLElement("th") }}O atributo colspan define o número de colunas que uma célula deve conter.
content{{ HTMLElement("meta") }}Um valor associado com http-equiv ou name dependendo do contexto.
contenteditableGlobal attributeIndica se o conteúdo do elemento é editável.
contextmenuGlobal attributeDefine o ID de um elemento {{ HTMLElement("menu") }} que servirá como o menu de contexto de um outro elemento.
controls{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}Indica se o navegador deve mostrar ou não os controles de reprodução ao usuário.
coords{{ HTMLElement("area") }}Uma escolha de valores especificando as coordenadas da região hot-spot.
data{{ HTMLElement("object") }}Especifica a URL do recurso.
datetime{{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("time") }} +

Indica a data e o horário associados ao elemento.

+
default{{ HTMLElement("track") }}Indica que a faixa deve estar habilitada a não ser que as preferências do usuário indiquem algo diferente.
defer{{ HTMLElement("script") }}Indica que o script deve ser executado após a página ter sido analisada.
dirGlobal attributeDefina a direção do texto. Os valores permitidos são ltr (Esquerda para direita) e rtl (Direita para esquerda)
dirname{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }} 
disabled{{ HTMLElement("button") }}, {{ HTMLElement("command") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indica se o usuário pode ou não interagir com o elemento.
draggableGlobal attributeDefine se o elemento pode ser arrastado.
dropzoneGlobal attributeIndica que o elemento aceita a soltagem de conteúdo nele.
enctype{{ HTMLElement("form") }}Define o tipo de conteúdo da data do formulário quando o method é POST.
for{{ HTMLElement("label") }}, {{ HTMLElement("output") }}Descreve elementos na qual pertencem a este.
form{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indica o formulário que é o proprietário do elemento.
headers{{ HTMLElement("td") }}, {{ HTMLElement("th") }}IDs dos elementos <th> na qual se aplicam a este elemento.
height{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }}Nota: Em algumas instâncias, tal como {{ HTMLElement("div") }}, isto é um atributo legado, em cujo caso  a propriedade CSS {{ Cssxref("height") }} deveria ser usado em vez. Em outros casos, assim como {{ HTMLElement("canvas") }}, a altura deve ser especificado com esse atributo.
hiddenGlobal attributeIndica a relevância de um elemento.
high{{ HTMLElement("meter") }}Indica o menor limite da faixa superior.
href{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("link") }} A URL de um recurso ligado.
hreflang{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}Especifica o idioma de um recurso ligado.
http-equiv{{ HTMLElement("meta") }} 
icon{{ HTMLElement("command") }}Especifica uma imagem na qual represente o comando.
idGlobal attributeFrequentemente usado com CSS para estilizar um elemento específico. O valor deste atributo deve ser único.
ismap{{ HTMLElement("img") }}Indica que a imagem é parte de um mapa de imagem "sever-side".
itempropGlobal attribute 
keytype{{ HTMLElement("keygen") }}Especifica o tipo de chave gerada.
kind{{ HTMLElement("track") }}Especifica o tipo de caminho de texto.
label{{ HTMLElement("track") }}Especifica um título "user-releadable" de um caminho de texto.
langGlobal attributeDefine o idioma usado no elemento.
language{{ HTMLElement("script") }}Define o idioma do script usado no elemento.
list{{ HTMLElement("input") }}Identifica uma lista de opções pré definidas para sugerir ao usuário.
loop{{ HTMLElement("audio") }}, {{ HTMLElement("bgsound") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("video") }}Indica se a mídia deveria começar tocando do começo quando ela é finalizada.
low{{ HTMLElement("meter") }}Indica o maior limite da menor distância.
manifest{{ HTMLElement("html") }}Especifica a URL do cache manifest do documento. documento
max{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}Indica o valor máximo permitido.
maxlength{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Define o núemro máximo de caracteres permitido no elemento.
media{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}Especifica uma sugestão da mídia para qual recurso ligado foi designado.
method{{ HTMLElement("form") }}Define qual método HTTP usar quando enviar um formulário. Pode ser GET(padrão) ou POST.
min{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}Indica o valor mínimo permitido.
multiple{{ HTMLElement("input") }}, {{ HTMLElement("select") }}Indica se múltiplos valores podem ser inseridos em uma entrada do tipo email ou file.
name{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}, {{ HTMLElement("map") }}, {{ HTMLElement("meta") }}, {{ HTMLElement("param") }}Nome do elemento. Por exemplo usado pelo servidor para identificar os campos no envio do formulário.
novalidate{{ HTMLElement("form") }}Este atributo indica que o formulário não deveria ser validado quando enviado.
open{{ HTMLElement("details") }}Indica se os detalhes serão mostrados no carregamento da página.
optimum{{ HTMLElement("meter") }}Indica o valor numérico optimal.
pattern{{ HTMLElement("input") }}Define uma espreção regular na qual o valor do elemento será validado de encontro.
ping{{ HTMLElement("a") }}, {{ HTMLElement("area") }} 
placeholder{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Fornece uma sugestão ao usuário de o que pode ser inserido no campo.
poster{{ HTMLElement("video") }}Uma URL indicando uma poster frame para mostrar desde que o usuário toque ou busque.
preload{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}Indica se todo o recurso, partes dele ou nada deveria ser pré carregado.
pubdate{{ HTMLElement("time") }} +

Indica se esta data e tempo é a data no mais próximo

+

elemento antecessor{{ HTMLElement("article") }}.

+
radiogroup{{ HTMLElement("command") }} 
readonly{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Indica se o elemento pode ser editado.
rel{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}Especifica o relacionamento do objeto alvo para o objeto ligado.
required{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indica se este elemento é requerido para preencher ou não.
reversed{{ HTMLElement("ol") }}Indica se a lista deveria ser mostrada em uma ordem decrescente em vez de uma crescente.
rows{{ HTMLElement("textarea") }}Define o número de linhas em uma área de texto.
rowspan{{ HTMLElement("td") }}, {{ HTMLElement("th") }}Define o número de linhas que uma célula de tabela deveria abranger mais.
sandbox{{ HTMLElement("iframe") }} 
spellcheckGlobal attributeIndica se o spell de checagem está permitido para o elemento.
scope{{ HTMLElement("th") }} 
scoped{{ HTMLElement("style") }} 
seamless{{ HTMLElement("iframe") }} 
selected{{ HTMLElement("option") }}Define o valor na qual será selecionado no carregamento da página.
shape{{ HTMLElement("a") }}, {{ HTMLElement("area") }} 
size{{ HTMLElement("input") }}, {{ HTMLElement("select") }}Define a largura do elemento (em pixels). Se o elemento de atributo type é text ou password então este é o número de caracteres.
sizes{{ HTMLElement("link") }} 
span{{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }} 
src{{ HTMLElement("audio") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("track") }}, {{ HTMLElement("video") }} URL de um conteúdo incorporável.
srcdoc{{ HTMLElement("iframe") }} 
srclang{{ HTMLElement("track") }} 
start{{ HTMLElement("ol") }}Define o primeiro número se não for 1.
step{{ HTMLElement("input") }} 
styleGlobal attributeDefine estilos CSS na qual ultrapassarão estilos previamente configurados.
summary{{ HTMLElement("table") }} 
tabindexGlobal attributeUltrapassa a ordem de tabulação padrão do navegador e segue o especificado como alternativa.
target{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("form") }} 
titleGlobal attributeTexto a ser mostrado em uma dica quando suspenso sobre um elemento.
type{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("command") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("object") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}, {{ HTMLElement("menu") }}Define o tipo de elemento.
usemap{{ HTMLElement("img") }},  {{ HTMLElement("input") }}, {{ HTMLElement("object") }} 
value{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("li") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("param") }}Define o valor padrão na qual será mostrado no elemento no carregar da página.
width{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }}Nota: Em algumas instâncias, tal como {{ HTMLElement("div") }}, este é um atributo legado, no caso da propriedade CSS {{ Cssxref("width") }} deveria ser usado ao em vez. em outros casos, tal como {{ HTMLElement("canvas") }}, a largura deve ser especificada com este atributo.
wrap{{ HTMLElement("textarea") }}Indica se o texto deveria ser enrolado.
+

{{ languages( { "fr": "fr/HTML/Attributs", "en": "en/HTML/Attributes", "ja": "ja/HTML/Attributes" } ) }}

diff --git a/files/pt-br/web/html/block-level_elements/index.html b/files/pt-br/web/html/block-level_elements/index.html new file mode 100644 index 0000000000..3feed31681 --- /dev/null +++ b/files/pt-br/web/html/block-level_elements/index.html @@ -0,0 +1,126 @@ +--- +title: Elementos block-level +slug: Web/HTML/Elementos_block-level +tags: + - Desenvolvimento + - Guía + - HTML + - HTML5 + - Iniciante + - Web +translation_of: Web/HTML/Block-level_elements +--- +

Elementos HTML (Linguagem de marcação de hipertexto) historicamente foram categorizados como “nível de bloco” ou elementos “em linha”. Um elemento em nível de bloco ocupa todo o espaço de seu elemento pai (container), criando assim um “bloco”. Este artigo ajuda a explicar o que isso significa.

+ +

Navegadores normalmente mostram o elemento em nível de bloco com uma nova linha antes e depois do elemento. O exemplo a seguir demonstra a influência desse elemento em nível de bloco:

+ +

Elementos em nível de bloco

+ +

HTML

+ +
<p>Este parágrafo é um elemento block-level; seu plano de fundo foi colorido para exibir o elemento pai do parágrafo.</p>
+ +

CSS

+ +
p { background-color: #8ABB55; }
+
+ +

{{ EmbedLiveSample('Block-level_Example') }}

+ +

Utilização

+ + + +

Nível-de-bloco vs. em-linha

+ +

Existem algumas diferenças importantes entre os elementos no nível do bloco e os elementos em linha:

+ +
+
Modelo de conteúdo
+
Geralmente, os elementos no nível de bloco podem conter elementos em linha e, às vezes, outros elementos no nível de bloco. Inerente a essa distinção estrutural está a idéia de que elementos de bloco criam estruturas "maiores" que elementos em linha.
+
Formatação padrão
+
Por padrão, os elementos no nível de bloco começam em novas linhas, mas, os elementos em linha, podem iniciar em qualquer lugar.
+
+ +

A distinção entre elementos em nível de bloco e elementos em linha foi usada nas especificações HTML até 4.01. No HTML5, essa distinção binária é substituída por um conjunto mais complexo de categorias de conteúdo. Enquanto a categoria "em linha" corresponde aproximadamente à categoria de conteúdo de frases, a categoria "nível de bloco" não corresponde diretamente a nenhuma categoria de conteúdo HTML5. Mas, os elementos "nível de bloco" e "embutido" combinados, correspondem ao conteúdo de fluxo, em HTML5. Existem também categorias adicionais, por exemplo conteúdo interativo.

+ +

Elementos

+ +

A seguir, é apresentada uma lista completa de todos os elementos no nível de bloco HTML (embora "nível de bloco" não esteja tecnicamente definido para elementos novos no HTML5).

+ +
+
+
{{ HTMLElement("address") }}
+
Informação de contato.
+
{{ HTMLElement("article") }} {{ HTMLVersionInline(5) }}
+
Conteúdo do artigo.
+
{{ HTMLElement("aside") }} {{ HTMLVersionInline(5) }}
+
Conteúdo lateral.
+
{{ HTMLElement("blockquote") }}
+
Citação longa ("bloco").
+
{{ HTMLElement("details") }}
+
Widget de divulgação.
+
{{ HTMLElement("dialog") }}
+
Caixa de diálogo.
+
{{ HTMLElement("dd") }}
+
Descreve um termo em uma lista de descrição.
+
{{ HTMLElement("div") }}
+
Divisão de conteúdo.
+
{{ HTMLElement("dl") }}
+
Lista de descrição.
+
{{ HTMLElement("fieldset") }}
+
Rótulo de conjunto de campos.
+
+ +
+
{{ HTMLElement("figcaption") }} {{ HTMLVersionInline(5) }}
+
Legenda da figura.
+
{{ HTMLElement("figure") }} {{ HTMLVersionInline(5) }}
+
Groups media content with a caption (see {{ HTMLElement("figcaption") }}).
+
{{ HTMLElement("footer") }} {{ HTMLVersionInline(5) }}
+
Section or page footer.
+
{{ HTMLElement("form") }}
+
Input form.
+
{{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }}
+
Heading levels 1-6.
+
{{ HTMLElement("header") }} {{ HTMLVersionInline(5) }}
+
Section or page header.
+
{{ HTMLElement("hgroup") }} {{ HTMLVersionInline(5) }}
+
Groups header information.
+
{{ HTMLElement("hr") }}
+
Horizontal rule (dividing line).
+
{{ HTMLElement("li") }}
+
List item.
+
{{ HTMLElement("main") }}
+
Contains the central content unique to this document.
+
{{ HTMLElement("nav") }}
+
Contains navigation links.
+
+ +
+
{{ HTMLElement("ol") }}
+
Ordered list.
+
{{ HTMLElement("p") }}
+
Paragraph.
+
{{ HTMLElement("pre") }}
+
Preformatted text.
+
{{ HTMLElement("section") }} {{ HTMLVersionInline(5) }}
+
Section of a web page.
+
{{ HTMLElement("table") }}
+
Table.
+
{{ HTMLElement("tfoot") }}
+
Table footer.
+
{{ HTMLElement("ul") }}
+
Unordered list.
+
{{ HTMLElement("video") }} {{ HTMLVersionInline(5) }}
+
Video player.
+
+
+ +

Veja também

+ + diff --git a/files/pt-br/web/html/canvas/a_basic_ray-caster/index.html b/files/pt-br/web/html/canvas/a_basic_ray-caster/index.html deleted file mode 100644 index ca188eb6f9..0000000000 --- a/files/pt-br/web/html/canvas/a_basic_ray-caster/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: A basic ray-caster -slug: Web/HTML/Canvas/A_basic_ray-caster -translation_of: Web/API/Canvas_API/A_basic_ray-caster ---- -
{{CanvasSidebar}}
- -
-

Esse artigo disponibiliza um exemplo interessante do mundo real do uso do elemento {{HTMLElement("canvas")}} para fazer renderização via software de um ambiente em 3D utilizando ray-casting.

-
- -

{{EmbedGHLiveSample("canvas-raycaster/index.html", 900, 300)}}

- -

Abrir em uma nova janela

- -

Porquê?

- -

Depois de perceber, para meu deleite, que o elemento <canvas> que eu estava lendo sobre ele não estava apenas próximo de ser suportado pelo Firefox, mas que já estava com suporte na versão atual do Safari, eu tinha que tentar que fazer um pequeno teste.

- -

A visão geral do canvas e o tutorial que eu encontrei no MDN são incríveis, mas ninguém havia escrito sobre animação, então eu pensei que poderia portar um exemplo de raycaster básico que eu havia trabalhado um tempo atrás, e ver e ver que tipo de performance nós podemos esperar te um pixel buffer controlado por JavaScript.

- -

 

- -

Como?

- -

A ideia básica é usar o {{domxref("window.setInterval","setInterval()")}} com um delay arbitrário que corresponda a uma taxa de atualização desejada. Depois de cada intervalo uma função de atualização irá redesenhar o canvas mostrando a view atual. Eu sei que poderia ter iniciado com um exemplo mais simples, mas estou certo que o tutorial do canvas vai fazê-lo, e eu queria verificar se poderia fazer isso.

- -

Sendo assim, a cada atualização, o raycaster verifica se você pressionou qualquer tecla por último, para conservar os cálculos não fazendo casting caso você esteja ocioso. Se você tiver pressionado, então o canvas é limpo, o solo e o céu são desenhados, a posição da câmera e/ou a orientação são atualizados, e os raios são feitos. Como os raios se cruzam paredes, então eles tornam uma tira de tela vertical na cor da parede que eles atingiram, misturado com uma versão mais escura da cor de acordo com a distância para a parede. A altura da fita também é modulada pela distância da câmera para a parede, e é desenhada centrada sobre a linha do horizonte.
-
- O código que eu acabei com é um amálgama regurgitado dos capítulos de raycaster de um velho André LaMotheTricks do livro de Gurus de Programação de Jogos (ISBN: 0672305070), e um jaspe raycaster que encontrei online, filtrado através da minha compulsão de renomear tudo para que faça sentido Para mim, e todos os ajustes que tinham que ser feitos para fazer as coisas funcionarem bem.

- -

 

- -

Resultados

- -

 

- -


- A tela no Safari 2.0.1 apresentou surpreendentemente bem. Com o fator de bloqueio criado para produzir slivers 8 pixels de largura, eu posso executar uma janela de 320 x 240 em 24 fps no meu Apple mini. Firefox 1.5 Beta 1 é ainda mais rápido; Eu posso executar 320 x 240 em 24 fps com 4 pixel slivers. Não exatamente um novo membro da família de software de ID, mas bastante decente considerando que é um ambiente totalmente interpretado, e eu não tenho que se preocupar com a alocação de memória ou modos de vídeo ou rotinas internas de codificação em assembler ou qualquer coisa. O código tenta ser muito eficiente, usando pesquisas de matrizes de valores pré-calculados, mas não sou um guru de otimização, então as coisas provavelmente poderiam ser escritas mais rapidamente.
-
- Além disso, deixa muito a desejar em termos de tentar ser qualquer tipo de motor de jogo - não há texturas de parede, não sprites, sem portas, nem mesmo teleportadores para chegar a outro nível. Mas estou bastante confiante de que todas essas coisas poderiam ser adicionadas com tempo suficiente. A API de tela aceita a cópia de pixels de imagens, portanto, as texturas parecem possíveis. Vou deixar isso para outro artigo, provavelmente de outra pessoa. =)

- -

 

- -

O ray-caster

- -

 

- -


- As pessoas agradáveis ​​aqui têm copiado manualmente meus arquivos para que você possa dar uma olhada, e para o seu prazer de hacking eu postei o conteúdo do arquivo individual como listagem de código (veja abaixo).
-
- Então você está lá, o fogo até Safari 1.3 ou Firefox 1.5 ou outro navegador que suporta o elemento <canvas> e divirta-se!
-
- input.js | Level.js | Player.js | RayCaster.html | RayCaster.js | trace.css | trace.js

- -

 

- -

 

- -

 

- -

 

- -

See also

- - diff --git a/files/pt-br/web/html/canvas/index.html b/files/pt-br/web/html/canvas/index.html deleted file mode 100644 index 821909e726..0000000000 --- a/files/pt-br/web/html/canvas/index.html +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: Canvas -slug: Web/HTML/Canvas -tags: - - API - - Canvas - - Referência(2) -translation_of: Web/API/Canvas_API ---- -

{{CanvasSidebar}}

- -

A Canvas API provê maneiras de desenhar gráficos via JavaScript e via elemento HTML {{HtmlElement("canvas")}}. Entre outras coisas, ele pode ser utilizado para animação, gráficos de jogos, visualização de dados, manipulação de fotos e processamento de vídeo em tempo real.

- -

A Canvas API foca amplamente em gráficos 2D. A WebGL API, que também usa o elemento <canvas>, desenha gráficos 2D e 3D acelerados por hardware.

- -

Exemplo básico

- -

Este exemplo simples desenha um retângulo verde para um canvas.

- -

HTML

- -
<canvas id="canvas"></canvas>
-
- -

JavaScript

- -

O método {{domxref("Document.getElementById()")}} pega uma referência para o elemento HTML <canvas>. Em seguida, o método {{domxref("HTMLCanvasElement.getContext()")}} pega o contexto daquele elemento - a coisa sobre a qual o desenho será renderizado.

- -

O desenho atual é feito usando a interface {{domxref("CanvasRenderingContext2D")}}. A propriedade {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} faz o retângulo verde. O método {{domxref("CanvasRenderingContext2D.fillRect()", "fillRect()")}} coloca seu canto superior direito em (10, 10) e dá a ele o tamanho de 150 unidades de largura e 100 de altura.

- -
const canvas = document.getElementById('canvas');
-const ctx = canvas.getContext('2d');
-
-ctx.fillStyle = 'green';
-ctx.fillRect(10, 10, 150, 100);
-
- -

Resultado

- -

{{ EmbedLiveSample('Exemplo_básico', 700, 180) }}

- -

Referência

- - - -
-

Nota: As interfaces relacionadas ao WebGLRenderingContext são referenciadas sob WebGL.

-
- -

{{domxref("CanvasCaptureMediaStream")}} é uma interface relacionada.

- -

Guias e Tutoriais

- -
-
-
Tutorial Canvas
-
Um tutorial compreensivo abordando o uso básico da API de Canvas e suas funcionalidades avançadas.
-
Mergulhando no Canvas HTML5
-
Uma introdução prática e extensa à API Canvas e WebGL.
-
Guia Canvas
-
Uma referência acessível para a API Canvas.
-
Demonstração: Um ray-caster básico 
-
Uma demonstração de animação ray-tracing usando canvas.
-
Manipulando vídeos usando canvas
-
Combinando {{HTMLElement("video")}} e {{HTMLElement("canvas")}} para manipular dados de vídeo em tempo real.
-
- -

Bibliotecas

- -

A API Canvas é extremamente poderosa, mas nem sempre é simples de usar. As bibliotecas listadas abaixo podem fazer a criação de projetos baseados em canvas mais rápida e fácil.

- - - -
-

Nota: Veja a WebGL API para bibliotecas 2D e 3D que usam WebGL.

-
- -

Especificações

- -
- - - - - - - - - - - - - - - -
EspecificaçõesEstadoComentário
{{SpecName('HTML WHATWG', '#2dcontext', 'the 2D rendering context')}}{{Spec2('HTML WHATWG')}}
-
- -

Compatibilidade de navegador

- -

Aplicações Mozilla ganharam suporte para <canvas> a partir do Gecko 1.8 (Firefox 1.5). O elemento foi originalmente introduzido pela Apple para o Dashboard OS X e Safari. O Internet Explorer suporta <canvas> quando inclui-se um script do projeto Explorer Canvas, da google. Google Chrome e Opera 9 também suportam <canvas>.

- -

Ver também

- - diff --git a/files/pt-br/web/html/controlando_verificacao_ortografica_em_formularios_html/index.html b/files/pt-br/web/html/controlando_verificacao_ortografica_em_formularios_html/index.html deleted file mode 100644 index c379684839..0000000000 --- a/files/pt-br/web/html/controlando_verificacao_ortografica_em_formularios_html/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: Controlando a verificação ortográfica em formulários HTML -slug: Web/HTML/Controlando_verificacao_ortografica_em_formularios_HTML -tags: - - Gerenciamento de configuração - - HTML - - Intermediário -translation_of: Web/HTML/Global_attributes/spellcheck -translation_of_original: Web/HTML/Controlling_spell_checking_in_HTML_forms ---- -

{{ gecko_minversion_header("1.8.1") }} Firefox 2 introduz suporte à verificação ortográfica  para áreas de texto e campos de texto em formulários web. O usuário pode especificar usando a interface about:config se a verificação ortográfica é ou não habilitada e se checará áreas de texto e campos de texto ou somente áreas de texto.

- -

Por padrão, áreas de texto e documentos  designMode tem ortografia verificada e caixas de texto de uma única linha não tem. Isto é assim porque os usuários do Firefox podem se distrair ou se incomodar se o Firefox marcar coisas como IDs de usuários ou endereços de e-mail como erros de ortografia.

- -

Porém, podem haver situações nas quais este comportamento não é necessariamente apropriado. Por exemplo, se uma área de texto tem o objetivo de ser usada para editar HTML ou servir de entrada para outro tipo de texto que não seja semântico, a verificação ortográfica seria um entrave em vez de uma ajuda. Da mesma forma, podem haver casos nos quais um site faça uma recomendação de que o Firefox habilite a verificação ortográfica para um campo de texto específico, como campos de busca ou assunto/título de e-mail, mesmo estes sendo geralmente campos de texto de uma única linha.

- -

Se um site deseja recomendar o uso ou não de verificação ortográfica para um elemento <input> específico, ele pode usar o atributo spellcheck, espefcificando o valor true para recomendar o uso da verificação ortográfica ou false para recomendar o não uso.

- -

Tenha em mente que a recomendação do site pode ser ignorada pelo usuário se o mesmo tiver desativado a verificação ortográfica setando a configuração layout.spellcheckDefault para 0. Se a configuração layout.spellcheckDefault  tiver qualquer outro valor, as recomendações serão consideradas.

- -

Você pode codificar um campo de texto linha-única (elemento HTML <input>) habilitando a verificação ortográfica da seguinte forma:

- -
<input type="text" size="50" spellcheck="true">
-
- -

Da mesma forma, você pode desabilitar a verificação ortográfica em uma área de texto (elemento <textarea>) da seguinte forma:

- -
<textarea spellcheck="false"></textarea>
-
- -

Você pode controlar um documento em seu designMode (tipicamente usado para implementar edição de texto rica) setando o atributo spellcheck  no elemento <body> de um documento.

- -

Você também pode aplicar o atributo spellcheck em outros elementos, tais como os elementos <span> e <div>, e nesse caso todos os elementos <input> dentro dessas tags irão herdar esta configuração; elementos <input> que não tem um atributo spellcheck setado, irão herdar a configuração de verificação ortográfica de seu elemento pai. Se não houver nenhuma configuração setada na cadeia antecessora de elementos, a configuração padrão será usada.

- -

Por exemplo:

- -
<div spellcheck="true">
-  <label>Escreva algo: </label><input type="text" size="50">
-  <br>
-  <label>Escreva outra coisa: </label><input type="text" size="50">
-</div>
-<br>
-<label>Mais alguma coisa: </label><input type="text" size="50">
-
- -

Neste exemplo HTML acima, os dois primeiros campos de texto terão a verificação ortográfica e o terceiro não terá.

- -

{{ h1_gecko_minversion("Controlando o idioma da verificação ortográfica", "9.0") }}

- -

Iniciando no Gecko 9.0 {{ geckoRelease("9.0") }}, a verificação ortográfica usa o atributo  {{ htmlattrxref("lang", "input") }} do elemento {{ HTMLElement("input") }}  para determinar o idioma padrão da verificação ortográfica. Se o {{ HTMLElement("input") }} não tiver o atributo lang setado, esse atributo é procurado em cada elemento pai superior até chegar ao elemento raiz do documento.

- -

Fazendo assim, se o usuário tem os dicionários de Português e Inglês instalados, e um elemento editável tiver o atributo lang="en", o dicionário inglês será automaticamente usado para este elemento.

- -

Por exemplo:

- -
<html lang="pt-BR">
-<body>
-  <textarea></textarea>
-  <textarea lang="en"></textarea>
-  <div lang="ru">
-    <textarea></textarea>
-  </div>
-</body>
-</html>
-
- -

No exemplo HTML acima, o primeiro {{ HTMLElement("textarea") }} terá ortografia checada em Português, o segundo em Inglês e o terceiro em Russo.

- -

Se um elemento especifica o idioma e o usuário não tem dicionário instalado para este idioma, a verificação ortográfica fica desabilitada por padrão, embora o usuário possa escolher por habilitá-la manualmente.

diff --git a/files/pt-br/web/html/cors_enabled_image/index.html b/files/pt-br/web/html/cors_enabled_image/index.html new file mode 100644 index 0000000000..5e41b735fe --- /dev/null +++ b/files/pt-br/web/html/cors_enabled_image/index.html @@ -0,0 +1,113 @@ +--- +title: CORS_habilitar_imagens +slug: Web/HTML/CORS_imagens_habilitadas +tags: + - CORS + - Canvas problems + - Crossorigin + - Segurança do Canvas +translation_of: Web/HTML/CORS_enabled_image +--- +

The HTML specification introduces a {{ htmlattrxref("crossorigin", "img") }} attribute for images that, in combination with an appropriate {{Glossary("CORS")}} header, allows images defined by the {{ HTMLElement("img") }} element that are loaded from foreign origins to be used in canvas as if they were being loaded from the current origin.

+ +

See CORS settings attributes for details on how the crossorigin attribute is used.

+ +

O que é um "contaminado" canvas?

+ +

Embora você possa usar imagens sem aprovação do CORS em seu canvas, criando contaminação ao canvas. Uma vez o canvas tenhya sido "contaminado" você não pode mais "puxar" informações do canvas.Por exemplo, você pode não mais usar os métodos canvas toBlob(), toDataURL(), ou getImageData(), fazendo isto você irá lançar um erro de sergurança.

+ +

Esta proteção de usuário tem tido dados expostos por uso de informações de imagens de site web remoto sem permissão.

+ +

Exemplo: Armazenando uma imagem de uma origem estrangeira

+ +

 

+ +

Você precisa ter um servidor hospedando as imagenscom o apropriado Access-Control-Allow-Origin cabeçalho. Adicionando atributos crossOrigin faz uma requisição ao cabeçalho. Você pode usar este exemplo das Configurações Apache Server HTML5 Boilerplate para aproximadamente responder com este cabeçalho de resposta.

+ +
<IfModule mod_setenvif.c>
+    <IfModule mod_headers.c>
+        <FilesMatch "\.(cur|gif|ico|jpe?g|png|svgz?|webp)$">
+            SetEnvIf Origin ":" IS_CORS
+            Header set Access-Control-Allow-Origin "*" env=IS_CORS
+        </FilesMatch>
+    </IfModule>
+</IfModule>
+ +

Dado que está tudo classificado, você permiti salvar àquelas imagens no Armazenamento DOM

+ +
var img = new Image,
+    canvas = document.createElement("canvas"),
+    ctx = canvas.getContext("2d"),
+    src = "http://example.com/image"; // insert image url here
+
+img.crossOrigin = "Anonymous";
+
+img.onload = function() {
+    canvas.width = img.width;
+    canvas.height = img.height;
+    ctx.drawImage( img, 0, 0 );
+    localStorage.setItem( "savedImageData", canvas.toDataURL("image/png") );
+}
+img.src = src;
+// make sure the load event fires for cached images too
+if ( img.complete || img.complete === undefined ) {
+    img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
+    img.src = src;
+}
+ +

Compatiibilidade do Browser

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support138{{ CompatNo() }}{{ CompatNo() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Veja também

+ + diff --git a/files/pt-br/web/html/cors_imagens_habilitadas/index.html b/files/pt-br/web/html/cors_imagens_habilitadas/index.html deleted file mode 100644 index 5e41b735fe..0000000000 --- a/files/pt-br/web/html/cors_imagens_habilitadas/index.html +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: CORS_habilitar_imagens -slug: Web/HTML/CORS_imagens_habilitadas -tags: - - CORS - - Canvas problems - - Crossorigin - - Segurança do Canvas -translation_of: Web/HTML/CORS_enabled_image ---- -

The HTML specification introduces a {{ htmlattrxref("crossorigin", "img") }} attribute for images that, in combination with an appropriate {{Glossary("CORS")}} header, allows images defined by the {{ HTMLElement("img") }} element that are loaded from foreign origins to be used in canvas as if they were being loaded from the current origin.

- -

See CORS settings attributes for details on how the crossorigin attribute is used.

- -

O que é um "contaminado" canvas?

- -

Embora você possa usar imagens sem aprovação do CORS em seu canvas, criando contaminação ao canvas. Uma vez o canvas tenhya sido "contaminado" você não pode mais "puxar" informações do canvas.Por exemplo, você pode não mais usar os métodos canvas toBlob(), toDataURL(), ou getImageData(), fazendo isto você irá lançar um erro de sergurança.

- -

Esta proteção de usuário tem tido dados expostos por uso de informações de imagens de site web remoto sem permissão.

- -

Exemplo: Armazenando uma imagem de uma origem estrangeira

- -

 

- -

Você precisa ter um servidor hospedando as imagenscom o apropriado Access-Control-Allow-Origin cabeçalho. Adicionando atributos crossOrigin faz uma requisição ao cabeçalho. Você pode usar este exemplo das Configurações Apache Server HTML5 Boilerplate para aproximadamente responder com este cabeçalho de resposta.

- -
<IfModule mod_setenvif.c>
-    <IfModule mod_headers.c>
-        <FilesMatch "\.(cur|gif|ico|jpe?g|png|svgz?|webp)$">
-            SetEnvIf Origin ":" IS_CORS
-            Header set Access-Control-Allow-Origin "*" env=IS_CORS
-        </FilesMatch>
-    </IfModule>
-</IfModule>
- -

Dado que está tudo classificado, você permiti salvar àquelas imagens no Armazenamento DOM

- -
var img = new Image,
-    canvas = document.createElement("canvas"),
-    ctx = canvas.getContext("2d"),
-    src = "http://example.com/image"; // insert image url here
-
-img.crossOrigin = "Anonymous";
-
-img.onload = function() {
-    canvas.width = img.width;
-    canvas.height = img.height;
-    ctx.drawImage( img, 0, 0 );
-    localStorage.setItem( "savedImageData", canvas.toDataURL("image/png") );
-}
-img.src = src;
-// make sure the load event fires for cached images too
-if ( img.complete || img.complete === undefined ) {
-    img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
-    img.src = src;
-}
- -

Compatiibilidade do Browser

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support138{{ CompatNo() }}{{ CompatNo() }}{{ CompatUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
- -

Veja também

- - diff --git "a/files/pt-br/web/html/dicas_para_criar_p\303\241ginas_html_de_carregamento_r\303\241pido/index.html" "b/files/pt-br/web/html/dicas_para_criar_p\303\241ginas_html_de_carregamento_r\303\241pido/index.html" deleted file mode 100644 index e693b6fed8..0000000000 --- "a/files/pt-br/web/html/dicas_para_criar_p\303\241ginas_html_de_carregamento_r\303\241pido/index.html" +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: Dicas para criar páginas HTML de carregamento rápido -slug: Web/HTML/Dicas_para_criar_páginas_HTML_de_carregamento_rápido -tags: - - Performance -translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages ---- -

Estas dicas são baseadas em conhecimento comum e experimentação.

-

Uma página web otimizada não apenas provê um site mais responsivo aos visitantes, como também reduz a carga sobre os servidores e a conexão com a Internet. Isso pode ser crucial para sites de grande volume ou sites que tenham um pico de tráfego devido a circunstâncias extraordinárias, como plantões de notícias urgentes.

-

Otimizar a performance do carregamento de páginas não serve apenas para o conteúdo que será visto por visitantes com linha discada ou aparelhos móveis. É igualmente importante para banda larga e pode levar a melhorias dramáticas até mesmo para seus visitantes com as mais rápidas conexões.

-

Dicas

-

Reduza o peso da página

-

O peso da página é, de longe, o fator mais importante na performance de seu carregamento.

-

Reduzir o peso da página através da eliminação de espaço em branco desnecessário e comentários, comumente conhecido como minimização, e mover scripts e CSS inline para arquivos externos pode melhorar a performance de download sem muita necessidade de outras mudanças na estrutura da página.

-

Ferramentas como HTML Tidy podem automaticamente cortar espaços em branco desnecessários e linhas vazias de um código HTML validado. Outras ferramentas podem "comprimir" JavaScript ao reformatar o código-fonte ou o obfuscando e substituindo identificadores longos por versões mais curtas.

-

Minimize o número de arquivos

-

Reduzir o número de arquivos referenciados por uma página diminui o número de conexões HTTP requeridas para realizar o download da página.

-

Dependendo das configurações de cache do browser, este pode enviar uma requisição If-Modified-Since ao servidor para cada arquivo CSS, JavaScript ou de imagem, perguntando se o arquivo foi modificado desde a última vez que foi baixado.

-

Ao reduzir o número de arquivos referenciados de dentro de uma página, reduz-se o tempo necessário para essas requisições serem enviadas e suas respostas recebidas.

-

Se você usa muitas imagens de fundo em seu CSS, pode reduzir o número de verificações HTTP combinando imagens em um único arquivo, o que é conhecido como um sprite de imagens. Então você apenas utiliza a mesma imagem cada vez que precisá-la, ajustando as coordenadas x/y apropriadamente. Essa técnica funciona melhor com elementos que terão dimensões limitadas, não sendo aplicável para todas as imagens. Contudo, o número menor de requisições HTTP e caching de uma única imagem devem ajudar a reduzir o tempo de carregamento.

-

Muito tempo gasto pesquisando quando foi a modificação mais recente de arquivos referenciados pode atrasar a exibição inicial de uma página, já que o browser deve verificar o momento de modificação para cada arquivo CSS ou JavaScript antes de carregar a página.

-

Reduza pesquisa de domínio

-

Já que cada domínio distinto demanda tempo durante uma pesquisa de DNS, o tempo de carregamento da página aumentará conforme o número de domínios distintos que aparecem em links de CSS e fontes de JavaScript e imagens.

-

Pode nem sempre ser prático, mas você deve sempre tomar cuidado para utilizar apenas o mínimo necessário de domínios diferentes nas suas páginas.

-

Conteúdo em cache reutilizado

-

Assegure que qualquer conteúdo que possa ser armazenado em cache o seja, e com tempos de expiração adequados.

-

Em especial, atente ao cabeçalho Last-Modified. Ele permite mecanismos de cache eficientes; através desse cabeçalho, informações sobre o arquivo que o agente de usuário quer carregar, como quando foi modificado da última vez, são transferidas. A maioria dos servidores web automaticamente anexam o cabeçalho Last-Modified a páginas estáticas (p. ex.: .html, .css), baseado na data de última modificação armazenada no sistema de arquivos. Com páginas dinâmicas (p. ex:.php, .aspx), isso não pode ser feito, e o cabeçalho não é enviado.

-

Então, para essas páginas que são geradas dinamicamente, alguma pesquisa adicional é benéfica. Isso vai salvar muito tempo em requisições nas páginas que normalmente não permitem armazenamento em cache.

-

Mais informações:

-
    -
  1. Get HTTP Condicional para Hackers RSS
    2. -
  2. HTTP 304: Not Modified
    3. -
  3. Sobre o Last-Modified HTTP e ETag
    4. -
-

Estabeleça a ordem dos componentes da página de forma otimizada

-

Baixe o conteúdo da página primeiro, junto com qualquer CSS ou JavaScript que pode ser requerido para sua exibição inicial, de modo que o usuário receba a resposta mais rápida possível durante o carregamento. Esse conteúdo é tipicamente texto, e portanto pode ser beneficiado por técnicas de compressão de texto durante o tráfego, permitindo uma resposta ainda mais rápida ao usuário.

-

Quaisquer elementos dinâmicos que requeiram que a página complete seu carregamento antes de serem usados devem ser inicialmente desabilitados, e apenas habilitados após o carregamento completo. Isso fará com que o JavaScript seja carregado após o conteúdo da página, o que melhorará a aparência geral do carregamento.

-

Reduza o número de scripts inline

-

Scripts inline podem ser custosos para o carregamento, uma vez que o parser deve assumir que o script pode modificar a estrutura da página enquanto o processo de parsing está em andamento. Reduzir o número de scripts inline no geral e reduzir o uso de document.write() para a saída de conteúdo pode melhorar o carregamento da página. Use métodos AJAX modernos para manipular o conteúdo da página, ao invés de abordagens antigas baseadas em document.write().

-

Use CSS moderno e marcação validada

-

O uso de CSS moderno reduz a quantidade de marcação, pode reduzir a necessidade de imagens, em termos de layout, e frequentemente substitui imagens de textos estilizados -- que "custam" muito mais do que o texto estilizado com CSS.

-

Usar marcações validadas tem outras vantagens. Primeiro, browsers não precisarão realizar correção de erros durante o parsing de HTML (isso é à parte da preocupação filosófica de permitir variação de formato na entrada do usuário, e então programaticamente "corrigir" ou normalizá-la; ou se, ao invés disso, forçar um formato de entrada rígido, sem tolerância a desvios).

-

Além do mais, marcação válida permite o livre uso de outras ferramentas que podem pré-processar páginas web. Por exemplo, HTML Tidy pode remover espaços em branco e tags finais opcionais; contudo, a ferramenta não será executada em uma página com erros graves de marcação.

-

Divida seu conteúdo

-

Layout de tabelas é um método legado que não deve mais ser empregado. Layouts utilizando blocos {{ HTMLElement("div") }} e, no futuro próximo, layout multi-colunas CSS3 ou layout de caixas flexíveis CSS3, devem ser utilizadas ao invés disso.

-

Tabelas ainda são consideradas marcações válidas, mas devem ser usadas para exibir dados tabulares. Para ajudar o browser a renderizar sua página mais rapidamente, você deve evitar aninhar suas tabelas.

-

Ao invés de realizar aninhamentos profundos como:

-
<TABLE>
-  <TABLE>
-    <TABLE>
-          ...
-    </TABLE>
-  </TABLE>
-</TABLE>
-

use tabelas não-aninhadas ou divs, como em

-
<TABLE>...</TABLE>
-<TABLE>...</TABLE>
-<TABLE>...</TABLE>
-
-

Veja também: Especificações do layout multi-colunas CSS3 e layout de caixas flexíveis CSS3

-

Especifique tamanhos para imagens e tabelas

-

Se o browser puder imediatamente determinar a altura e/ou largura de suas imagens e tabelas, ele será capaz de exibir uma página sem ter que recalcular o fluxo do conteúdo. Isso não apenas acelera a exibição da página como previne mudanças irritantes no layout ao finalizar o carregamento. Por essa razão, height e width devem ser especificadas para imagens, sempre que possível.

-

Tabelas devem usar a combinação CSS selector:property:

-
  table-layout: fixed;
-
-

e devem especificar as larguras das colunas usando as tags HTML COL e COLGROUP.

-

Escolha bem seus requisitos de agente de usuário

-

Para atingir as maiores melhorias no design de páginas, tenha certeza de que requisitos de agente de usuário razoáveis estejam especificados para os projetos. Não espere que seu conteúdo apareça de forma perfeita, pixel por pixel, em todos os browsers, especialmente nos obsoletos.

-

Idealmente, seus requisitos básicos devem ser baseados em considerações sobre os browsers modernos que suportam os padrões relevantes. Isso pode incluir: Firefox 3.6+ em qualquer plataforma, Internet Explorer 8.0+ no Windows, Opera 10+ no Windows, e Safari 4 no Mac OS X.

-

Note, contudo, que muitas das dicas listadas neste artigo são técnicas de senso comum que se aplicam a qualquer agente-usuário, e podem ser aplicadas a qualquer página web, independentemente de requisitos de compatibilidade em browsers.

-

Exemplo de estrutura de página

-

· HTML

-
-
- · HEAD
-
-
-
-
-
- · LINK ...
- Arquivos CSS requeridos para a aparência da página. Minimize o número de arquivos para performance enquanto mantém CSS não-relacionado em arquivos separados para manutenção.
-
-
-
-
-
-
-
- · SCRIPT ...
- Arquivos JavaScript para funções requeridas durante o carregamento da página, sem qualquer DHTML que só pode ser executado após o carregamento completo.
-
- Minimize o número de arquivos para performance enquanto mantém JavaScript não-relacionado em arquivos separados para manutenção.
-
-
-
-
-
- · BODY
-
- · Páginas de conteúdo visíveis ao usuário em pequenas divisões (tabelas / divs) que podem ser exibidas sem esperar a página inteira ser baixada.
-
-
-
-
-
- · SCRIPT ...
- Quaisquer scripts que forem usados para realizar DHTML. Um script DHTML geralmente só pode ser executado após o carregamento completo da página e a inicialização de todos os objetos necessários. Não há necessidade de carregar esses scripts antes do conteúdo. Isso apenas desacelera a aparência inicial do carregamento da página.
-
- Minimize o número de arquivos para performance enquanto mantém CSS não-relacionado em arquivos separados para manutenção.
-
- Se uma ou mais imagens forem usadas para efeitos de rollover, você deve pré-carregá-las aqui após o conteúdo da página ter sido baixado.
-
-
-
-

Use async and defer, se possível

-

Faça com que scripts JavaScript sejam compatíveis tanto com async como defer e use async sempre que possível, especialmente se você tiver múltiplas tags de script.

-

Com isso, a página pode parar de renderizar enquanto o JavaScript ainda estiver sendo carregado. Do contrário, o browser não renderizará nada que estiver após as tags de script sem esses atributos.

-

Nota: Apesar desses atributos ajudarem muito na primeira vez que a página for carregada, você não pode confiar que vai funcionar em todos os browsers. Se você seguir todas as orientações para produzir bom código JavaScript, não há necessidade de alterá-lo.

- - -
-

Informações do Documento Original

- -
-

 

diff --git a/files/pt-br/web/html/element/command/index.html b/files/pt-br/web/html/element/command/index.html deleted file mode 100644 index 99a42fb9db..0000000000 --- a/files/pt-br/web/html/element/command/index.html +++ /dev/null @@ -1,129 +0,0 @@ ---- -title: command -slug: Web/HTML/Element/command -translation_of: 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/web/html/element/content/index.html b/files/pt-br/web/html/element/content/index.html new file mode 100644 index 0000000000..1a1832de04 --- /dev/null +++ b/files/pt-br/web/html/element/content/index.html @@ -0,0 +1,101 @@ +--- +title: ': The Shadow DOM Content Placeholder element (obsolete)' +slug: Web/HTML/Element/conteúdo +translation_of: Web/HTML/Element/content +--- +
{{Deprecated_header}}
+ +

The HTML <content> element—an obsolete part of the Web Components suite of technologies—was used inside of Shadow DOM as an {{glossary("insertion point")}}, and wasn't meant to be used in ordinary HTML. It has now been replaced by the {{HTMLElement("slot")}} element, which creates a point in the DOM at which a shadow DOM can be inserted.

+ +
+

Note: Though present in early draft of the specifications and implemented in several browsers, this element has been removed in later versions of the spec, and should not be used. It is documented here to assist in adapting code written during the time it was included in the spec to work with newer versions of the specification.

+
+ + + + + + + + + + + + + + + + + + + + + + + + +
Content categoriesTransparent content.
Permitted contentFlow content.
Tag omission{{no_tag_omission}}
Permitted parent elementsAny element that accepts flow content.
DOM interface{{domxref("HTMLContentElement")}}
+ +

Attributes

+ +

This element includes the global attributes.

+ +
+
select
+
A comma-separated list of selectors. These have the same syntax as CSS selectors. They select the content to insert in place of the <content> element.
+
+ +

Example

+ +

Here is a simple example of using the <content> element. It is an HTML file with everything needed in it.

+ +
+

Note: For this code to work, the browser you display it in must support Web Components. See Enabling Web Components in Firefox.

+
+ +
<html>
+  <head></head>
+  <body>
+  <!-- The original content accessed by <content> -->
+  <div>
+    <h4>My Content Heading</h4>
+    <p>My content text</p>
+  </div>
+
+  <script>
+  // Get the <div> above.
+  var myContent = document.querySelector('div');
+  // Create a shadow DOM on the <div>
+  var shadowroot = myContent.createShadowRoot();
+  // Insert into the shadow DOM a new heading and
+  // part of the original content: the <p> tag.
+  shadowroot.innerHTML =
+   '<h2>Inserted Heading</h2> <content select="p"></content>';
+  </script>
+
+  </body>
+</html>
+
+ +

If you display this in a web browser it should look like the following.

+ +

content example

+ +

Specifications

+ +

This element is no longer defined by any specifications.

+ +

Browser compatibility

+ + + +

{{Compat("html.elements.content")}}

+ +

See also

+ + + +
{{HTMLRef}}
diff --git "a/files/pt-br/web/html/element/conte\303\272do/index.html" "b/files/pt-br/web/html/element/conte\303\272do/index.html" deleted file mode 100644 index 1a1832de04..0000000000 --- "a/files/pt-br/web/html/element/conte\303\272do/index.html" +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: ': The Shadow DOM Content Placeholder element (obsolete)' -slug: Web/HTML/Element/conteúdo -translation_of: Web/HTML/Element/content ---- -
{{Deprecated_header}}
- -

The HTML <content> element—an obsolete part of the Web Components suite of technologies—was used inside of Shadow DOM as an {{glossary("insertion point")}}, and wasn't meant to be used in ordinary HTML. It has now been replaced by the {{HTMLElement("slot")}} element, which creates a point in the DOM at which a shadow DOM can be inserted.

- -
-

Note: Though present in early draft of the specifications and implemented in several browsers, this element has been removed in later versions of the spec, and should not be used. It is documented here to assist in adapting code written during the time it was included in the spec to work with newer versions of the specification.

-
- - - - - - - - - - - - - - - - - - - - - - - - -
Content categoriesTransparent content.
Permitted contentFlow content.
Tag omission{{no_tag_omission}}
Permitted parent elementsAny element that accepts flow content.
DOM interface{{domxref("HTMLContentElement")}}
- -

Attributes

- -

This element includes the global attributes.

- -
-
select
-
A comma-separated list of selectors. These have the same syntax as CSS selectors. They select the content to insert in place of the <content> element.
-
- -

Example

- -

Here is a simple example of using the <content> element. It is an HTML file with everything needed in it.

- -
-

Note: For this code to work, the browser you display it in must support Web Components. See Enabling Web Components in Firefox.

-
- -
<html>
-  <head></head>
-  <body>
-  <!-- The original content accessed by <content> -->
-  <div>
-    <h4>My Content Heading</h4>
-    <p>My content text</p>
-  </div>
-
-  <script>
-  // Get the <div> above.
-  var myContent = document.querySelector('div');
-  // Create a shadow DOM on the <div>
-  var shadowroot = myContent.createShadowRoot();
-  // Insert into the shadow DOM a new heading and
-  // part of the original content: the <p> tag.
-  shadowroot.innerHTML =
-   '<h2>Inserted Heading</h2> <content select="p"></content>';
-  </script>
-
-  </body>
-</html>
-
- -

If you display this in a web browser it should look like the following.

- -

content example

- -

Specifications

- -

This element is no longer defined by any specifications.

- -

Browser compatibility

- - - -

{{Compat("html.elements.content")}}

- -

See also

- -
    -
  • Web Components
    • -
  • {{HTMLElement("shadow")}}, {{HTMLElement("slot")}}, {{HTMLElement("template")}}, {{HTMLElement("element")}}
    • -
- -
{{HTMLRef}}
diff --git a/files/pt-br/web/html/element/figura/index.html b/files/pt-br/web/html/element/figura/index.html deleted file mode 100644 index 309a10c791..0000000000 --- a/files/pt-br/web/html/element/figura/index.html +++ /dev/null @@ -1,193 +0,0 @@ ---- -title:
-slug: Web/HTML/Element/figura -translation_of: Web/HTML/Element/figure ---- -

Resumo

- -

O Elemento HTML <figure> representa o conteúdo independente, frequentemente com uma legenda ({{HTMLElement("figcaption")}}), e é normalmente referido como uma única unidade. Enquanto ela está relacionada com o fluxo principal, sua posição é independente do fluxo principal.Normalmente, isso é uma imagem, uma ilustração, um diagrama, um trecho de código ou uma esquema que é referenciado no texto principal, mas que pode ser movido para outra página ou para um apêndice, sem afetar o fluxo principal.

- -
-

Notas de uso:

- -
    -
  • Being a sectioning root, the outline of the content of the <figure> element is excluded from the main outline of the document.
    • -
  • Uma legenda pode ser associada com o elemento <figure> inserindo o elemento {{HTMLElement("figcaption")}}  dentro dele (no inicio ou no fim).
    • -
-
- -
    -
  • Content categories Flow content, sectioning root, palpable content.
    • -
  • Permite conteúdoA {{HTMLElement("figcaption")}} element, followed by flow content; or flow content followed by a {{HTMLElement("figcaption")}} element; or flow content.
    • -
  • Omissão de TAGs {{no_tag_omission}}
    • -
  • Permitted parent elements Any element that accepts Flow content.
    • -
  • DOM interface {{domxref("HTMLElement")}}
    • -
- -

Atributos

- -

Este elemento só inclui os atributos globais.

- -

Exemplos

- -

Exemplo 1

- -
<!-- Apenas uma imagem-->
-<figure>
-	<img src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="Uma imagem impressionante">
-</figure>
-<p></p>
-<!-- Imagem com legenda -->
-<figure>
-	<img src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="Uma imagem impressionante">
-	<figcaption>Legenda para a imagem impressionante</figcaption>
-</figure>
-<p></p>
-
- - -
MDN Logo
- -

 

- - -
MDN Logo -
-

Imagem1. MDN Logo

-
-
- -

 

- -

Example 2

- -
    <figure>
-      <figcaption>Obtenha os detalhes do browser usando navigator</figcaption>
-        <pre>
-          function NavigatorExample(){
-          var txt;
-          txt = "Browser CodeName: " + navigator.appCodeName;
-          txt+= "Browser Name: " + navigator.appName;
-          txt+= "Browser Version: " + navigator.appVersion ;
-          txt+= "Cookies Enabled: " + navigator.cookieEnabled;
-          txt+= "Platform: " + navigator.platform;
-          txt+= "User-agent header: " + navigator.userAgent;
-          }
-        </pre>
-
- -
-
-

Obtenha os detalhes do browser usando navigator

-
- -
          function NavigatorExample(){
-          var txt;
-          txt = "Browser CodeName: " + navigator.appCodeName;
-          txt+= "Browser Name: " + navigator.appName;
-          txt+= "Browser Version: " + navigator.appVersion ;
-          txt+= "Cookies Enabled: " + navigator.cookieEnabled;
-          txt+= "Platform: " + navigator.platform;
-          txt+= "User-agent header: " + navigator.userAgent;
-          }
-
-
- -

Exemplo 3

- -
<figure>
-      <figcaption><cite>Edsger Dijkstra :-</cite></figcaption>
-      <p>"Se o debugging é o processo de remoção de bugs de software, <br /> então programação deve ser o processo de colocá-los"<br /></p>
-    </figure>
-
-
-
- -
-
Edsger Dijkstra :-
- -

"Se o debugging é o processo de remoção de bugs de software, 
- então programação deve ser o processo de colocá-los"

-
- -

Especificações

- - - - - - - - - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{SpecName('HTML WHATWG', 'grouping-content.html#the-figure-element', '<figure>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'grouping-content.html#the-figure-element', '<figure>')}}{{Spec2('HTML5 W3C')}} 
- - - -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
RecursoChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte Básico8{{CompatGeckoDesktop("2.0")}}9.011.105.1
-
- -
- - - - - - - - - - - - - - - - - - - -
RecursoAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte Básico3.0{{CompatGeckoMobile("2.0")}}9.011.05.1 (iOS 5.0)
-
- -

Veja Também

- -
    -
  • O {{HTMLElement("figcaption")}} elemento.
    • -
- -
{{HTMLRef}}
diff --git a/files/pt-br/web/html/element/figure/index.html b/files/pt-br/web/html/element/figure/index.html new file mode 100644 index 0000000000..309a10c791 --- /dev/null +++ b/files/pt-br/web/html/element/figure/index.html @@ -0,0 +1,193 @@ +--- +title:
+slug: Web/HTML/Element/figura +translation_of: Web/HTML/Element/figure +--- +

Resumo

+ +

O Elemento HTML <figure> representa o conteúdo independente, frequentemente com uma legenda ({{HTMLElement("figcaption")}}), e é normalmente referido como uma única unidade. Enquanto ela está relacionada com o fluxo principal, sua posição é independente do fluxo principal.Normalmente, isso é uma imagem, uma ilustração, um diagrama, um trecho de código ou uma esquema que é referenciado no texto principal, mas que pode ser movido para outra página ou para um apêndice, sem afetar o fluxo principal.

+ +
+

Notas de uso:

+ +
    +
  • Being a sectioning root, the outline of the content of the <figure> element is excluded from the main outline of the document.
    • +
  • Uma legenda pode ser associada com o elemento <figure> inserindo o elemento {{HTMLElement("figcaption")}}  dentro dele (no inicio ou no fim).
    • +
+
+ +
    +
  • Content categories Flow content, sectioning root, palpable content.
    • +
  • Permite conteúdoA {{HTMLElement("figcaption")}} element, followed by flow content; or flow content followed by a {{HTMLElement("figcaption")}} element; or flow content.
    • +
  • Omissão de TAGs {{no_tag_omission}}
    • +
  • Permitted parent elements Any element that accepts Flow content.
    • +
  • DOM interface {{domxref("HTMLElement")}}
    • +
+ +

Atributos

+ +

Este elemento só inclui os atributos globais.

+ +

Exemplos

+ +

Exemplo 1

+ +
<!-- Apenas uma imagem-->
+<figure>
+	<img src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="Uma imagem impressionante">
+</figure>
+<p></p>
+<!-- Imagem com legenda -->
+<figure>
+	<img src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="Uma imagem impressionante">
+	<figcaption>Legenda para a imagem impressionante</figcaption>
+</figure>
+<p></p>
+
+ + +
MDN Logo
+ +

 

+ + +
MDN Logo +
+

Imagem1. MDN Logo

+
+
+ +

 

+ +

Example 2

+ +
    <figure>
+      <figcaption>Obtenha os detalhes do browser usando navigator</figcaption>
+        <pre>
+          function NavigatorExample(){
+          var txt;
+          txt = "Browser CodeName: " + navigator.appCodeName;
+          txt+= "Browser Name: " + navigator.appName;
+          txt+= "Browser Version: " + navigator.appVersion ;
+          txt+= "Cookies Enabled: " + navigator.cookieEnabled;
+          txt+= "Platform: " + navigator.platform;
+          txt+= "User-agent header: " + navigator.userAgent;
+          }
+        </pre>
+
+ +
+
+

Obtenha os detalhes do browser usando navigator

+
+ +
          function NavigatorExample(){
+          var txt;
+          txt = "Browser CodeName: " + navigator.appCodeName;
+          txt+= "Browser Name: " + navigator.appName;
+          txt+= "Browser Version: " + navigator.appVersion ;
+          txt+= "Cookies Enabled: " + navigator.cookieEnabled;
+          txt+= "Platform: " + navigator.platform;
+          txt+= "User-agent header: " + navigator.userAgent;
+          }
+
+
+ +

Exemplo 3

+ +
<figure>
+      <figcaption><cite>Edsger Dijkstra :-</cite></figcaption>
+      <p>"Se o debugging é o processo de remoção de bugs de software, <br /> então programação deve ser o processo de colocá-los"<br /></p>
+    </figure>
+
+
+
+ +
+
Edsger Dijkstra :-
+ +

"Se o debugging é o processo de remoção de bugs de software, 
+ então programação deve ser o processo de colocá-los"

+
+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName('HTML WHATWG', 'grouping-content.html#the-figure-element', '<figure>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'grouping-content.html#the-figure-element', '<figure>')}}{{Spec2('HTML5 W3C')}} 
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
RecursoChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte Básico8{{CompatGeckoDesktop("2.0")}}9.011.105.1
+
+ +
+ + + + + + + + + + + + + + + + + + + +
RecursoAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte Básico3.0{{CompatGeckoMobile("2.0")}}9.011.05.1 (iOS 5.0)
+
+ +

Veja Também

+ +
    +
  • O {{HTMLElement("figcaption")}} elemento.
    • +
+ +
{{HTMLRef}}
diff --git a/files/pt-br/web/html/element/input/data/index.html b/files/pt-br/web/html/element/input/data/index.html deleted file mode 100644 index 0bb8fb07f8..0000000000 --- a/files/pt-br/web/html/element/input/data/index.html +++ /dev/null @@ -1,430 +0,0 @@ ---- -title: -slug: Web/HTML/Element/Input/data -tags: - - Date picker - - Elemento - - Elemento de entrada - - HTML - - Input - - NeedsCompatTable - - Referencia - - Selecionador de data - - Tipo de Input - - data -translation_of: Web/HTML/Element/input/date ---- -

Os elementos {{htmlelement("input")}} do tipo date cria campos de entrada que permite o usuário informar uma data, como também usar uma caixa de texto que valida automaticamente o conteúdo, ou usando uma interface de seleção de data especial. O valor resultante inclui ano, mês e dia, mas não o horário. Os tipos de entrada time e datetime-local permitem informar horário e data/hora.

- -

A interface do usuário do controle varia geralmente de navegador para navegador; neste momento o suporte é irregular, veja {{anch("Browser compatibility")}} para maiores detalhes. Nos navegadores sem suporte, o controle é rebaixado graciosamente para um  <input type="text"> simples.

- -
<input id="date" type="date">
- -

{{ EmbedLiveSample('Basic_example', 600, 40) }}

- -

Entre os navegadores que suportam uma interface personalizada para selecionar datas é o controle de data do Chrome/Opera, que se parece com:

- -

- -

O controle de data do Edge se parece assim:

- -

- -

O controle de data do Firefox se parece assim:

- -

Datepicker UI in firefox

- - - - - - - - - - - - - - - - - - - - - - - - -
{{anch("Value")}}Um {{domxref("DOMString")}} que representa uma data no formato AAAA-MM-DD ou vazio
Eventos{{event("change")}} e {{event("input")}}
Atributos Comuns Suportados{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("readonly", "input")}} e {{htmlattrxref("step", "input")}}
Atributos IDLlist, value, valueAsDate, valueAsNumber.
Métodos{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}
- -

Valores

- -

Um {{domxref("DOMString")}} representa o valor data informada na entrada. Você pode definir o valor padrão para a entrada incluindo uma data dentro do atributo {{htmlattrxref("value", "input")}}, como:

- -
<input id="date" type="date" value="2017-06-01">
- -

{{ EmbedLiveSample('Value', 600, 40) }}

- -

Uma coisa para perceber é que o formato da data mostrada difere do value atual— o formato da data mostrada será escolhido baseado na localização definida no navegador do usuário, enquanto que a data em value sempre será formatado como yyyy-mm-dd.

- -

Você pode, além disso, obter e definir o valor da data em JavaScript usando a propriedade {{domxref("HTMLInputElement.value", "value")}} do elemento de entrada, por exemplo:

- -
var dateControl = document.querySelector('input[type="date"]');
-dateControl.value = '2017-06-01';
- -

Este código localiza o primeiro elemento {{HTMLElement("input")}} que o type é date e define seu valor para a data 2017-06-01 (1 de junho de 2017).

- -

Atributos adicionais

- -

Além dos atributos disponíveis para todos os elementos {{HTMLElement("input")}}, as caixas de texto de data oferecem os seguintes atributos:

- - - - - - - - - - - - - - - - - - - - - - - - - - -
AtributoDescrição
{{anch("max")}}A maior data aceitável
{{anch("min")}}A menor data aceitável
{{anch("readonly")}}Se o conteúdo da caixa de texto é somente leitura
{{anch("step")}}O intervalo a ser usado, quando clicar nos botões de seta para baixo e para cima, e também para validação
- -

 

- -

Usando caixas de texto de data

- -

Caixas de texto de data se mostra conveniente à primeira vista — eles fornecem uma interface simples para escolha de datas e normalizam o formato da data enviado para o servidor, independentemente da localização do usuário. Contudo, há problemas com o <input type="date"> por causa do suporte limitado do navegador.

- -

Iremos dar uma olhada em usos básicos e mais complexos de <input type="date">, então aconselharemos sobre como atenuar os problemas de suporte dos navegadores (veja {{anch("Handling browser support")}}). Claro, esperamos que ao longo do tempo o supore dos navegadores sejam mais universal e este problema desapareça.

- -

Uso básico da data

- -

O uso mais simples de <input type="date"> envolve a combinação de um <input> básico e o elemento {{htmlelement("label")}}, como pode ser visto abaixo:

- -
<form>
-  <div>
-    <label for="diaa">Informe a data do seu aniversário:</label>
-    <input type="date" id="diaa" name="diaa">
-  </div>
-</form>
- -

{{ EmbedLiveSample('Basic_uses_of_date', 600, 40) }}

- -

Definindo data mínima e máxima

- -

Você pode usar os atributos {{htmlattrxref("min", "input")}} e {{htmlattrxref("max", "input")}} para restringir as datas que podem ser escolhidas pelo usuário. No próximo exemplo nós definimos uma data mínima como 2017-04-01 e data máxima como 2017-04-30:

- -
<form>
-  <div>
-    <label for="festa">Escolha a sua data preferida da festa:</label>
-    <input type="date" id="festa" name="festa" min="2017-04-01" max="2017-04-30">
-  </div>
-</form>
- -

{{ EmbedLiveSample('Setting_maximum_and_minimum_dates', 600, 40) }}

- -

O resultado aqui será apenas que as dias de Abril de 2017 serão selecionados — apenas a parte "dias" do texto será editável e datas fora de Abril não serão rolados na ferramenta de seleção de data.

- -
-

Observação: Você deve conhecer o uso do atributo {{htmlattrxref("step", "input")}} para variar o número de dias pulados cada vez que a data é incrementada (ex.: talvez você queira deixar que os Sábados sejam selecionáveis). Contudo, isto não parece funcionar eficiente de qualquer implementação em tempo de escrita.

-
- -

Controlando o tamanho da entrada

- -

<input type="date"> não suporta atributos de tamanho de formulário como  {{htmlattrxref("size", "input")}}. Você poderá recorrer ao CSS para modificar o tamanho.

- -

Validação

- -

Por padrão <input type="date"> não aplica nenhuma validação de entrada de valores. As implementações da interface geralmente não deixam você informar nada que não seja uma data — o que é útil — mas você pode continuar deixando o campo vazio ou (em navegadores onde a entrada converte para o tipo text) informar uma data inválida (ex.: o 32 de Abril).

- -

Se você usa {{htmlattrxref("min", "input")}} e {{htmlattrxref("max", "input")}} para restringir datas disponíveis (ver {{anch("Definindo data mínima e máxima")}}), os navegadores suportados mostrarão um erro se você tentar submeter uma data fora da faixa. Contudo, você terá que verificar os resultados para ter certeza que o valor está entre estas datas, uma vez que são aplicadas apenas se o selecionador de data for totalmente suportado pelo dispositivo do usuário.

- -

Adicionalmente, você pode usar o atributo {{htmlattrxref("required", "input")}} para tornar o preenchimento da data obrigatório — novamente, um erro será mostrado se você tentar submeter um campo de data vazia. Isto, finalmente, deve funcionar em muitos navegadores.

- -

Vamos dar uma olhada em um exemplo — aqui nós definimos datas mínima e máxima e deixamos o campo como obrigatório:

- -
<form>
-  <div>
-    <label for="festa">Escolha sua data preferida da festa (obrigatório, de 1º a 20 de abril):</label>
-    <input type="date" id="festa" name="festa" min="2017-04-01" max="2017-04-20" required>
-    <span class="validity"></span>
-  </div>
-  <div>
-    <input type="submit">
-  </div>
-</form>
- -

Se você tentar submeter o formulário com uma data imcompleta (ou com uma data fora da faixa), o navegador mostrará um erro. Tente executar o exemplo agora:

- -

{{ EmbedLiveSample('Validation', 600, 100) }}

- -

Aqui tem uma captura de tela que mostra o resultado se seu navegador não suporta:

- -

- -

Aqui tem o CSS utilizado no exemplo acima. Nós usamos as propriedades CSS {{cssxref(":valid")}} e {{cssxref(":invalid")}} para estilizar a caixa de texto dependendo se o valor atual é válido ou não. Colocamos ícones num {{htmlelement("span")}} próximo a caixa de entrada, não dentro da caixa, porque no Chrome o conteúdo gerado é colocado dentro do controle do formulário, e não seria estilzado ou mostrado eficientemente.

- -
div {
-    margin-bottom: 10px;
-    display: flex;
-    align-items: center;
-}
-
-label {
-  display: inline-block;
-  width: 300px;
-}
-
-input:invalid+span:after {
-    content: '✖';
-    padding-left: 5px;
-}
-
-input:valid+span:after {
-    content: '✓';
-    padding-left: 5px;
-}
- -
-

Importante: A validação do formulário HTML não subtitui scripts que validam se a entrada de dados está em um formato apropriado.  É muito fácil para alguém fazer ajustes no HTML que permitam sobrepor a validação ou removê-lo inteiramente.  Também é possível simplesmente sobrepor seu HTML inteiramente e submeter os dados diretamente ao seu servidor. Se seu código server-side falhar na validação do dado que recebe pode ocorreu um desaste quando os dados forem submetidos inapropriadamente formatado (ou dado pode ser muito grande, ou é do tipo errado e assim por diante).

-
- -

Manipulação do suporte do navegador

- -

Como mencionado acima, o maior problema em usar caixas de entrada de data em tempo de escrita é o {{anch("Browser compatibility", "suporte do navegador")}}. Por exemplo, o selecionador de data no Firefox para Android se parece com isso:

- -

- -

Navegadores que não suportam graciosamente rebaixa para uma caixa de texto comum, mas criam problemas em termos de consistência da interface do usuário (o controle apresentado será diferente) e a manipulação do dado.

- -

O segundo problema é mais sério que os anterirores; como mencionamos antes, com um campo de texto de data o valor atual sempre é normalizado pelo formato yyyy-mm-dd. Com a caixa de texto comum, por outro lado, por padrão do navegador não há reconhecimento de qual formato a data deve ter e há muitos modos diferentes em que as pessoas escrevem datas. Por exemplo:

- -
    -
  • ddmmyyyy
    • -
  • dd/mm/yyyy
    • -
  • mm/dd/yyyy
    • -
  • dd-mm-yyyy
    • -
  • mm-dd-yyyy
    • -
  • Month dd yyyy
    • -
- -

Um jeito de contornar isso é colocar um atributo {{htmlattrxref("pattern", "input")}} na caixa de texto de data. Sempre que a caixa de texto de data não usá-lo, a caixa de texto devolverá um erro. Por exemplo, tente ver o que o seguinte exemplo faz num navegador sem suporte:

- -
<form>
-  <div>
-    <label for="diaa">Informe a data do seu aniversário:</label>
-    <input type="date" id="bday" name="diaa" required pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}">
-    <span class="validity"></span>
-  </div>
-  <div>
-    <input type="submit">
-  </div>
-</form>
- -

{{ EmbedLiveSample('Handling_browser_support', 600, 100) }}

- -

Se você submetê-lo, verá que o navegador agora mostra uma mensagem de erro (e destaca a caixa de texto como inválido) se o que foi informado não combinam com o padrão nnnn-nn-nn, onde n é um número entre 0 e 9. Claro, isto não parará as pessoas de informar datas inválidas ou datas formatadas incorretamente, como yyyy-dd-mm (onde nós precisamos de yyyy-mm-dd). Então continua sendo um problema.

- - - -

A melhor maneira de lidar com datas nos formulários de um modo entre navegadores no momento é obter do usuário o dia, mês e ano em controles separados (elementos {{htmlelement("select")}} são bem populares; veja abaixo uma implementação) ou use uma biblioteca JavaScript como o selecionador de data do jQuery.

- -

Atributos

- -

Beside the attributes listed below, this element can have any of the global attributes.

- -
-
{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}
-
Specifies an "action hint" used to determine how to label the enter key on mobile devices with virtual keyboards. Supported values are go, done, next, search, and send; these automatically get mapped to the appropriate string (and are case-insensitive).
-
{{htmlattrdef("autofocus")}}
-
This Boolean attribute lets you specify that a form control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form element in a document can have the autofocus attribute, which is a Boolean. It cannot be applied if the type attribute is set to hidden (that is, you cannot automatically set focus to a hidden control).
-
{{htmlattrdef("disabled")}}
-
-

This Boolean attribute indicates that the form control is not available for interaction. In particular, the click event will not be dispatched on disabled controls. Also, a disabled control's value isn't submitted with the form.

-
-
{{htmlattrdef("form")}}
-
The form element that the input element is associated with (its form owner). The value of the attribute must be an id of a {{HTMLElement("form")}} element in the same document. If this attribute is not specified, this <input> element must be a descendant of a {{HTMLElement("form")}} element. This attribute enables you to place <input> elements anywhere within a document, not just as descendants of their form elements. An input can only be associated with one form.
-
{{htmlattrdef("formaction")}}
-
The URI of a program that processes the information submitted by the input element, if it is a submit button or image. If specified, it overrides the {{htmlattrxref("action","form")}} attribute of the element's form owner.
-
{{htmlattrdef("formenctype")}}
-
If the input element is a submit button or image, this attribute specifies the type of content that is used to submit the form to the server. Possible values are: -
    -
  • application/x-www-form-urlencoded: The default value if the attribute is not specified.
    • -
  • multipart/form-data: Use this value if you are using an {{HTMLElement("input")}} element with the {{htmlattrxref("type","input")}} attribute set to file.
    • -
  • text/plain
    • -
- -

If this attribute is specified, it overrides the {{htmlattrxref("enctype","form")}} attribute of the element's form owner.

-
-
{{htmlattrdef("formmethod")}}
-
If the input element is a submit button or image, this attribute specifies the HTTP method that the browser uses to submit the form. Possible values are: -
    -
  • post: The data from the form is included in the body of the form and is sent to the server.
    • -
  • get: The data from the form are appended to the form attribute URI, with a '?' as a separator, and the resulting URI is sent to the server. Use this method when the form has no side-effects and contains only ASCII characters.
    • -
- -

If specified, this attribute overrides the {{htmlattrxref("method","form")}} attribute of the element's form owner.

-
-
{{htmlattrdef("formnovalidate")}}
-
If the input element is a submit button or image, this Boolean attribute specifies that the form is not to be validated when it is submitted. If this attribute is specified, it overrides the {{htmlattrxref("novalidate","form")}} attribute of the element's form owner.
-
{{htmlattrdef("formtarget")}}
-
If the input element is a submit button or image, this attribute is a name or keyword indicating where to display the response that is received after submitting the form. This is a name of, or keyword for, a browsing context (for example, tab, window, or inline frame). If this attribute is specified, it overrides the {{htmlattrxref("target", "form")}} attribute of the elements's form owner. The following keywords have special meanings: -
    -
  • _self: Load the response into the same browsing context as the current one. This value is the default if the attribute is not specified.
    • -
  • _blank: Load the response into a new unnamed browsing context.
    • -
  • _parent: Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as _self.
    • -
  • _top: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as _self.
    • -
-
-
{{htmlattrdef("inputmode")}}
-
A hint to the browser for which keyboard to display. This attribute applies when the value of the type attribute is text, password, email, or url. Possible values are: -
    -
  • verbatim: Alphanumeric, non-prose content such as usernames and passwords.
    • -
  • latin: Latin-script input in the user's preferred language with typing aids such as text prediction enabled. For human-to-computer communication such as search boxes.
    • -
  • latin-name: As latin, but for human names.
    • -
  • latin-prose: As latin, but with more aggressive typing aids. For human-to-human communication such as instant messaging for email.
    • -
  • full-width-latin: As latin-prose, but for the user's secondary languages.
    • -
  • kana: Kana or romaji input, typically hiragana input, using full-width characters, with support for converting to kanji. Intended for Japanese text input.
    • -
  • katakana: Katakana input, using full-width characters, with support for converting to kanji. Intended for Japanese text input.
    • -
  • numeric: Numeric input, including keys for the digits 0 to 9, the user's preferred thousands separator character, and the character for indicating negative numbers. Intended for numeric codes, e.g. credit card numbers. For actual numbers, prefer using <input type="number">
    • -
  • tel: Telephone input, including asterisk and pound key. Use <input type="tel"> if possible instead.
    • -
  • email: Email input. Use <input type="email"> if possible instead.
    • -
  • url: URL input. Use <input type="url"> if possible instead.
    • -
-
-
{{htmlattrdef("list")}}
-
Identifies a list of pre-defined options to suggest to the user. The value must be the id of a {{HTMLElement("datalist")}} element in the same document. The browser displays only options that are valid values for this input element.
-
{{htmlattrdef("max")}}
-
The maximum value for this item, which must not be less than its minimum (min attribute) value.
-
{{htmlattrdef("min")}}
-
The minimum value for this item, which must not be greater than its maximum (max attribute) value.
-
{{htmlattrdef("name")}}
-
The name of the control, which is submitted with the form data.
-
{{htmlattrdef("readonly")}}
-
This Boolean attribute indicates that the user cannot modify the value of the control.
-
{{htmlattrdef("required")}}
-
This attribute specifies that the user must fill in a value before submitting a form. It cannot be used when the type attribute is hidden, image, or a button type (submit, reset, or button). The {{cssxref(":optional")}} and {{cssxref(":required")}} CSS pseudo-classes will be applied to the field as appropriate.
-
{{htmlattrdef("selectionDirection")}}
-
The direction in which selection occurred. This is "forward" if the selection was made from left-to-right in an LTR locale or right-to-left in an RTL locale, or "backward" if the selection was made in the opposite direction. This can be "none" if the selection direction is unknown.
-
{{htmlattrdef("spellcheck")}}
-
Setting the value of this attribute to true indicates that the element needs to have its spelling and grammar checked. The value default indicates that the element is to act according to a default behavior, possibly based on the parent element's own spellcheck value. The value false indicates that the element should not be checked.
-
{{htmlattrdef("step")}}
-
Works with the min and max attributes to limit the increments at which a numeric or date-time value can be set. It can be the string any or a positive floating point number. If this attribute is not set to any, the control accepts only values at multiples of the step value greater than the minimum.
-
{{htmlattrdef("value")}}
-
The initial value of the control. This attribute is optional.
- Note that when reloading the page, Gecko and IE will ignore the value specified in the HTML source, if the value was changed before the reload.
-
{{htmlattrdef("x-moz-errormessage")}} {{non-standard_inline}}
-
This Mozilla extension allows you to specify the error message to display when a field doesn't successfully validate.
-
- -

Examples

- -

To create a widget to display a date, use:

- -
<input type="date">
- - - -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support2012{{CompatGeckoDesktop(57)}}{{CompatNo}}10.62{{CompatNo}}[1]
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(57)}}{{CompatUnknown}}10.625
-
- -

Veja também

- - diff --git a/files/pt-br/web/html/element/input/date/index.html b/files/pt-br/web/html/element/input/date/index.html new file mode 100644 index 0000000000..0bb8fb07f8 --- /dev/null +++ b/files/pt-br/web/html/element/input/date/index.html @@ -0,0 +1,430 @@ +--- +title: +slug: Web/HTML/Element/Input/data +tags: + - Date picker + - Elemento + - Elemento de entrada + - HTML + - Input + - NeedsCompatTable + - Referencia + - Selecionador de data + - Tipo de Input + - data +translation_of: Web/HTML/Element/input/date +--- +

Os elementos {{htmlelement("input")}} do tipo date cria campos de entrada que permite o usuário informar uma data, como também usar uma caixa de texto que valida automaticamente o conteúdo, ou usando uma interface de seleção de data especial. O valor resultante inclui ano, mês e dia, mas não o horário. Os tipos de entrada time e datetime-local permitem informar horário e data/hora.

+ +

A interface do usuário do controle varia geralmente de navegador para navegador; neste momento o suporte é irregular, veja {{anch("Browser compatibility")}} para maiores detalhes. Nos navegadores sem suporte, o controle é rebaixado graciosamente para um  <input type="text"> simples.

+ +
<input id="date" type="date">
+ +

{{ EmbedLiveSample('Basic_example', 600, 40) }}

+ +

Entre os navegadores que suportam uma interface personalizada para selecionar datas é o controle de data do Chrome/Opera, que se parece com:

+ +

+ +

O controle de data do Edge se parece assim:

+ +

+ +

O controle de data do Firefox se parece assim:

+ +

Datepicker UI in firefox

+ + + + + + + + + + + + + + + + + + + + + + + + +
{{anch("Value")}}Um {{domxref("DOMString")}} que representa uma data no formato AAAA-MM-DD ou vazio
Eventos{{event("change")}} e {{event("input")}}
Atributos Comuns Suportados{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("readonly", "input")}} e {{htmlattrxref("step", "input")}}
Atributos IDLlist, value, valueAsDate, valueAsNumber.
Métodos{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}
+ +

Valores

+ +

Um {{domxref("DOMString")}} representa o valor data informada na entrada. Você pode definir o valor padrão para a entrada incluindo uma data dentro do atributo {{htmlattrxref("value", "input")}}, como:

+ +
<input id="date" type="date" value="2017-06-01">
+ +

{{ EmbedLiveSample('Value', 600, 40) }}

+ +

Uma coisa para perceber é que o formato da data mostrada difere do value atual— o formato da data mostrada será escolhido baseado na localização definida no navegador do usuário, enquanto que a data em value sempre será formatado como yyyy-mm-dd.

+ +

Você pode, além disso, obter e definir o valor da data em JavaScript usando a propriedade {{domxref("HTMLInputElement.value", "value")}} do elemento de entrada, por exemplo:

+ +
var dateControl = document.querySelector('input[type="date"]');
+dateControl.value = '2017-06-01';
+ +

Este código localiza o primeiro elemento {{HTMLElement("input")}} que o type é date e define seu valor para a data 2017-06-01 (1 de junho de 2017).

+ +

Atributos adicionais

+ +

Além dos atributos disponíveis para todos os elementos {{HTMLElement("input")}}, as caixas de texto de data oferecem os seguintes atributos:

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
AtributoDescrição
{{anch("max")}}A maior data aceitável
{{anch("min")}}A menor data aceitável
{{anch("readonly")}}Se o conteúdo da caixa de texto é somente leitura
{{anch("step")}}O intervalo a ser usado, quando clicar nos botões de seta para baixo e para cima, e também para validação
+ +

 

+ +

Usando caixas de texto de data

+ +

Caixas de texto de data se mostra conveniente à primeira vista — eles fornecem uma interface simples para escolha de datas e normalizam o formato da data enviado para o servidor, independentemente da localização do usuário. Contudo, há problemas com o <input type="date"> por causa do suporte limitado do navegador.

+ +

Iremos dar uma olhada em usos básicos e mais complexos de <input type="date">, então aconselharemos sobre como atenuar os problemas de suporte dos navegadores (veja {{anch("Handling browser support")}}). Claro, esperamos que ao longo do tempo o supore dos navegadores sejam mais universal e este problema desapareça.

+ +

Uso básico da data

+ +

O uso mais simples de <input type="date"> envolve a combinação de um <input> básico e o elemento {{htmlelement("label")}}, como pode ser visto abaixo:

+ +
<form>
+  <div>
+    <label for="diaa">Informe a data do seu aniversário:</label>
+    <input type="date" id="diaa" name="diaa">
+  </div>
+</form>
+ +

{{ EmbedLiveSample('Basic_uses_of_date', 600, 40) }}

+ +

Definindo data mínima e máxima

+ +

Você pode usar os atributos {{htmlattrxref("min", "input")}} e {{htmlattrxref("max", "input")}} para restringir as datas que podem ser escolhidas pelo usuário. No próximo exemplo nós definimos uma data mínima como 2017-04-01 e data máxima como 2017-04-30:

+ +
<form>
+  <div>
+    <label for="festa">Escolha a sua data preferida da festa:</label>
+    <input type="date" id="festa" name="festa" min="2017-04-01" max="2017-04-30">
+  </div>
+</form>
+ +

{{ EmbedLiveSample('Setting_maximum_and_minimum_dates', 600, 40) }}

+ +

O resultado aqui será apenas que as dias de Abril de 2017 serão selecionados — apenas a parte "dias" do texto será editável e datas fora de Abril não serão rolados na ferramenta de seleção de data.

+ +
+

Observação: Você deve conhecer o uso do atributo {{htmlattrxref("step", "input")}} para variar o número de dias pulados cada vez que a data é incrementada (ex.: talvez você queira deixar que os Sábados sejam selecionáveis). Contudo, isto não parece funcionar eficiente de qualquer implementação em tempo de escrita.

+
+ +

Controlando o tamanho da entrada

+ +

<input type="date"> não suporta atributos de tamanho de formulário como  {{htmlattrxref("size", "input")}}. Você poderá recorrer ao CSS para modificar o tamanho.

+ +

Validação

+ +

Por padrão <input type="date"> não aplica nenhuma validação de entrada de valores. As implementações da interface geralmente não deixam você informar nada que não seja uma data — o que é útil — mas você pode continuar deixando o campo vazio ou (em navegadores onde a entrada converte para o tipo text) informar uma data inválida (ex.: o 32 de Abril).

+ +

Se você usa {{htmlattrxref("min", "input")}} e {{htmlattrxref("max", "input")}} para restringir datas disponíveis (ver {{anch("Definindo data mínima e máxima")}}), os navegadores suportados mostrarão um erro se você tentar submeter uma data fora da faixa. Contudo, você terá que verificar os resultados para ter certeza que o valor está entre estas datas, uma vez que são aplicadas apenas se o selecionador de data for totalmente suportado pelo dispositivo do usuário.

+ +

Adicionalmente, você pode usar o atributo {{htmlattrxref("required", "input")}} para tornar o preenchimento da data obrigatório — novamente, um erro será mostrado se você tentar submeter um campo de data vazia. Isto, finalmente, deve funcionar em muitos navegadores.

+ +

Vamos dar uma olhada em um exemplo — aqui nós definimos datas mínima e máxima e deixamos o campo como obrigatório:

+ +
<form>
+  <div>
+    <label for="festa">Escolha sua data preferida da festa (obrigatório, de 1º a 20 de abril):</label>
+    <input type="date" id="festa" name="festa" min="2017-04-01" max="2017-04-20" required>
+    <span class="validity"></span>
+  </div>
+  <div>
+    <input type="submit">
+  </div>
+</form>
+ +

Se você tentar submeter o formulário com uma data imcompleta (ou com uma data fora da faixa), o navegador mostrará um erro. Tente executar o exemplo agora:

+ +

{{ EmbedLiveSample('Validation', 600, 100) }}

+ +

Aqui tem uma captura de tela que mostra o resultado se seu navegador não suporta:

+ +

+ +

Aqui tem o CSS utilizado no exemplo acima. Nós usamos as propriedades CSS {{cssxref(":valid")}} e {{cssxref(":invalid")}} para estilizar a caixa de texto dependendo se o valor atual é válido ou não. Colocamos ícones num {{htmlelement("span")}} próximo a caixa de entrada, não dentro da caixa, porque no Chrome o conteúdo gerado é colocado dentro do controle do formulário, e não seria estilzado ou mostrado eficientemente.

+ +
div {
+    margin-bottom: 10px;
+    display: flex;
+    align-items: center;
+}
+
+label {
+  display: inline-block;
+  width: 300px;
+}
+
+input:invalid+span:after {
+    content: '✖';
+    padding-left: 5px;
+}
+
+input:valid+span:after {
+    content: '✓';
+    padding-left: 5px;
+}
+ +
+

Importante: A validação do formulário HTML não subtitui scripts que validam se a entrada de dados está em um formato apropriado.  É muito fácil para alguém fazer ajustes no HTML que permitam sobrepor a validação ou removê-lo inteiramente.  Também é possível simplesmente sobrepor seu HTML inteiramente e submeter os dados diretamente ao seu servidor. Se seu código server-side falhar na validação do dado que recebe pode ocorreu um desaste quando os dados forem submetidos inapropriadamente formatado (ou dado pode ser muito grande, ou é do tipo errado e assim por diante).

+
+ +

Manipulação do suporte do navegador

+ +

Como mencionado acima, o maior problema em usar caixas de entrada de data em tempo de escrita é o {{anch("Browser compatibility", "suporte do navegador")}}. Por exemplo, o selecionador de data no Firefox para Android se parece com isso:

+ +

+ +

Navegadores que não suportam graciosamente rebaixa para uma caixa de texto comum, mas criam problemas em termos de consistência da interface do usuário (o controle apresentado será diferente) e a manipulação do dado.

+ +

O segundo problema é mais sério que os anterirores; como mencionamos antes, com um campo de texto de data o valor atual sempre é normalizado pelo formato yyyy-mm-dd. Com a caixa de texto comum, por outro lado, por padrão do navegador não há reconhecimento de qual formato a data deve ter e há muitos modos diferentes em que as pessoas escrevem datas. Por exemplo:

+ +
    +
  • ddmmyyyy
    • +
  • dd/mm/yyyy
    • +
  • mm/dd/yyyy
    • +
  • dd-mm-yyyy
    • +
  • mm-dd-yyyy
    • +
  • Month dd yyyy
    • +
+ +

Um jeito de contornar isso é colocar um atributo {{htmlattrxref("pattern", "input")}} na caixa de texto de data. Sempre que a caixa de texto de data não usá-lo, a caixa de texto devolverá um erro. Por exemplo, tente ver o que o seguinte exemplo faz num navegador sem suporte:

+ +
<form>
+  <div>
+    <label for="diaa">Informe a data do seu aniversário:</label>
+    <input type="date" id="bday" name="diaa" required pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}">
+    <span class="validity"></span>
+  </div>
+  <div>
+    <input type="submit">
+  </div>
+</form>
+ +

{{ EmbedLiveSample('Handling_browser_support', 600, 100) }}

+ +

Se você submetê-lo, verá que o navegador agora mostra uma mensagem de erro (e destaca a caixa de texto como inválido) se o que foi informado não combinam com o padrão nnnn-nn-nn, onde n é um número entre 0 e 9. Claro, isto não parará as pessoas de informar datas inválidas ou datas formatadas incorretamente, como yyyy-dd-mm (onde nós precisamos de yyyy-mm-dd). Então continua sendo um problema.

+ + + +

A melhor maneira de lidar com datas nos formulários de um modo entre navegadores no momento é obter do usuário o dia, mês e ano em controles separados (elementos {{htmlelement("select")}} são bem populares; veja abaixo uma implementação) ou use uma biblioteca JavaScript como o selecionador de data do jQuery.

+ +

Atributos

+ +

Beside the attributes listed below, this element can have any of the global attributes.

+ +
+
{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}
+
Specifies an "action hint" used to determine how to label the enter key on mobile devices with virtual keyboards. Supported values are go, done, next, search, and send; these automatically get mapped to the appropriate string (and are case-insensitive).
+
{{htmlattrdef("autofocus")}}
+
This Boolean attribute lets you specify that a form control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form element in a document can have the autofocus attribute, which is a Boolean. It cannot be applied if the type attribute is set to hidden (that is, you cannot automatically set focus to a hidden control).
+
{{htmlattrdef("disabled")}}
+
+

This Boolean attribute indicates that the form control is not available for interaction. In particular, the click event will not be dispatched on disabled controls. Also, a disabled control's value isn't submitted with the form.

+
+
{{htmlattrdef("form")}}
+
The form element that the input element is associated with (its form owner). The value of the attribute must be an id of a {{HTMLElement("form")}} element in the same document. If this attribute is not specified, this <input> element must be a descendant of a {{HTMLElement("form")}} element. This attribute enables you to place <input> elements anywhere within a document, not just as descendants of their form elements. An input can only be associated with one form.
+
{{htmlattrdef("formaction")}}
+
The URI of a program that processes the information submitted by the input element, if it is a submit button or image. If specified, it overrides the {{htmlattrxref("action","form")}} attribute of the element's form owner.
+
{{htmlattrdef("formenctype")}}
+
If the input element is a submit button or image, this attribute specifies the type of content that is used to submit the form to the server. Possible values are: +
    +
  • application/x-www-form-urlencoded: The default value if the attribute is not specified.
    • +
  • multipart/form-data: Use this value if you are using an {{HTMLElement("input")}} element with the {{htmlattrxref("type","input")}} attribute set to file.
    • +
  • text/plain
    • +
+ +

If this attribute is specified, it overrides the {{htmlattrxref("enctype","form")}} attribute of the element's form owner.

+
+
{{htmlattrdef("formmethod")}}
+
If the input element is a submit button or image, this attribute specifies the HTTP method that the browser uses to submit the form. Possible values are: +
    +
  • post: The data from the form is included in the body of the form and is sent to the server.
    • +
  • get: The data from the form are appended to the form attribute URI, with a '?' as a separator, and the resulting URI is sent to the server. Use this method when the form has no side-effects and contains only ASCII characters.
    • +
+ +

If specified, this attribute overrides the {{htmlattrxref("method","form")}} attribute of the element's form owner.

+
+
{{htmlattrdef("formnovalidate")}}
+
If the input element is a submit button or image, this Boolean attribute specifies that the form is not to be validated when it is submitted. If this attribute is specified, it overrides the {{htmlattrxref("novalidate","form")}} attribute of the element's form owner.
+
{{htmlattrdef("formtarget")}}
+
If the input element is a submit button or image, this attribute is a name or keyword indicating where to display the response that is received after submitting the form. This is a name of, or keyword for, a browsing context (for example, tab, window, or inline frame). If this attribute is specified, it overrides the {{htmlattrxref("target", "form")}} attribute of the elements's form owner. The following keywords have special meanings: +
    +
  • _self: Load the response into the same browsing context as the current one. This value is the default if the attribute is not specified.
    • +
  • _blank: Load the response into a new unnamed browsing context.
    • +
  • _parent: Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as _self.
    • +
  • _top: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as _self.
    • +
+
+
{{htmlattrdef("inputmode")}}
+
A hint to the browser for which keyboard to display. This attribute applies when the value of the type attribute is text, password, email, or url. Possible values are: +
    +
  • verbatim: Alphanumeric, non-prose content such as usernames and passwords.
    • +
  • latin: Latin-script input in the user's preferred language with typing aids such as text prediction enabled. For human-to-computer communication such as search boxes.
    • +
  • latin-name: As latin, but for human names.
    • +
  • latin-prose: As latin, but with more aggressive typing aids. For human-to-human communication such as instant messaging for email.
    • +
  • full-width-latin: As latin-prose, but for the user's secondary languages.
    • +
  • kana: Kana or romaji input, typically hiragana input, using full-width characters, with support for converting to kanji. Intended for Japanese text input.
    • +
  • katakana: Katakana input, using full-width characters, with support for converting to kanji. Intended for Japanese text input.
    • +
  • numeric: Numeric input, including keys for the digits 0 to 9, the user's preferred thousands separator character, and the character for indicating negative numbers. Intended for numeric codes, e.g. credit card numbers. For actual numbers, prefer using <input type="number">
    • +
  • tel: Telephone input, including asterisk and pound key. Use <input type="tel"> if possible instead.
    • +
  • email: Email input. Use <input type="email"> if possible instead.
    • +
  • url: URL input. Use <input type="url"> if possible instead.
    • +
+
+
{{htmlattrdef("list")}}
+
Identifies a list of pre-defined options to suggest to the user. The value must be the id of a {{HTMLElement("datalist")}} element in the same document. The browser displays only options that are valid values for this input element.
+
{{htmlattrdef("max")}}
+
The maximum value for this item, which must not be less than its minimum (min attribute) value.
+
{{htmlattrdef("min")}}
+
The minimum value for this item, which must not be greater than its maximum (max attribute) value.
+
{{htmlattrdef("name")}}
+
The name of the control, which is submitted with the form data.
+
{{htmlattrdef("readonly")}}
+
This Boolean attribute indicates that the user cannot modify the value of the control.
+
{{htmlattrdef("required")}}
+
This attribute specifies that the user must fill in a value before submitting a form. It cannot be used when the type attribute is hidden, image, or a button type (submit, reset, or button). The {{cssxref(":optional")}} and {{cssxref(":required")}} CSS pseudo-classes will be applied to the field as appropriate.
+
{{htmlattrdef("selectionDirection")}}
+
The direction in which selection occurred. This is "forward" if the selection was made from left-to-right in an LTR locale or right-to-left in an RTL locale, or "backward" if the selection was made in the opposite direction. This can be "none" if the selection direction is unknown.
+
{{htmlattrdef("spellcheck")}}
+
Setting the value of this attribute to true indicates that the element needs to have its spelling and grammar checked. The value default indicates that the element is to act according to a default behavior, possibly based on the parent element's own spellcheck value. The value false indicates that the element should not be checked.
+
{{htmlattrdef("step")}}
+
Works with the min and max attributes to limit the increments at which a numeric or date-time value can be set. It can be the string any or a positive floating point number. If this attribute is not set to any, the control accepts only values at multiples of the step value greater than the minimum.
+
{{htmlattrdef("value")}}
+
The initial value of the control. This attribute is optional.
+ Note that when reloading the page, Gecko and IE will ignore the value specified in the HTML source, if the value was changed before the reload.
+
{{htmlattrdef("x-moz-errormessage")}} {{non-standard_inline}}
+
This Mozilla extension allows you to specify the error message to display when a field doesn't successfully validate.
+
+ +

Examples

+ +

To create a widget to display a date, use:

+ +
<input type="date">
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support2012{{CompatGeckoDesktop(57)}}{{CompatNo}}10.62{{CompatNo}}[1]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(57)}}{{CompatUnknown}}10.625
+
+ +

Veja também

+ + diff --git a/files/pt-br/web/html/elementos_block-level/index.html b/files/pt-br/web/html/elementos_block-level/index.html deleted file mode 100644 index 3feed31681..0000000000 --- a/files/pt-br/web/html/elementos_block-level/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: Elementos block-level -slug: Web/HTML/Elementos_block-level -tags: - - Desenvolvimento - - Guía - - HTML - - HTML5 - - Iniciante - - Web -translation_of: Web/HTML/Block-level_elements ---- -

Elementos HTML (Linguagem de marcação de hipertexto) historicamente foram categorizados como “nível de bloco” ou elementos “em linha”. Um elemento em nível de bloco ocupa todo o espaço de seu elemento pai (container), criando assim um “bloco”. Este artigo ajuda a explicar o que isso significa.

- -

Navegadores normalmente mostram o elemento em nível de bloco com uma nova linha antes e depois do elemento. O exemplo a seguir demonstra a influência desse elemento em nível de bloco:

- -

Elementos em nível de bloco

- -

HTML

- -
<p>Este parágrafo é um elemento block-level; seu plano de fundo foi colorido para exibir o elemento pai do parágrafo.</p>
- -

CSS

- -
p { background-color: #8ABB55; }
-
- -

{{ EmbedLiveSample('Block-level_Example') }}

- -

Utilização

- -
    -
  • Elementos nível de bloco podem aparecer apenas dentro do elemento {{ HTMLElement("body") }} 
    • -
- -

Nível-de-bloco vs. em-linha

- -

Existem algumas diferenças importantes entre os elementos no nível do bloco e os elementos em linha:

- -
-
Modelo de conteúdo
-
Geralmente, os elementos no nível de bloco podem conter elementos em linha e, às vezes, outros elementos no nível de bloco. Inerente a essa distinção estrutural está a idéia de que elementos de bloco criam estruturas "maiores" que elementos em linha.
-
Formatação padrão
-
Por padrão, os elementos no nível de bloco começam em novas linhas, mas, os elementos em linha, podem iniciar em qualquer lugar.
-
- -

A distinção entre elementos em nível de bloco e elementos em linha foi usada nas especificações HTML até 4.01. No HTML5, essa distinção binária é substituída por um conjunto mais complexo de categorias de conteúdo. Enquanto a categoria "em linha" corresponde aproximadamente à categoria de conteúdo de frases, a categoria "nível de bloco" não corresponde diretamente a nenhuma categoria de conteúdo HTML5. Mas, os elementos "nível de bloco" e "embutido" combinados, correspondem ao conteúdo de fluxo, em HTML5. Existem também categorias adicionais, por exemplo conteúdo interativo.

- -

Elementos

- -

A seguir, é apresentada uma lista completa de todos os elementos no nível de bloco HTML (embora "nível de bloco" não esteja tecnicamente definido para elementos novos no HTML5).

- -
-
-
{{ HTMLElement("address") }}
-
Informação de contato.
-
{{ HTMLElement("article") }} {{ HTMLVersionInline(5) }}
-
Conteúdo do artigo.
-
{{ HTMLElement("aside") }} {{ HTMLVersionInline(5) }}
-
Conteúdo lateral.
-
{{ HTMLElement("blockquote") }}
-
Citação longa ("bloco").
-
{{ HTMLElement("details") }}
-
Widget de divulgação.
-
{{ HTMLElement("dialog") }}
-
Caixa de diálogo.
-
{{ HTMLElement("dd") }}
-
Descreve um termo em uma lista de descrição.
-
{{ HTMLElement("div") }}
-
Divisão de conteúdo.
-
{{ HTMLElement("dl") }}
-
Lista de descrição.
-
{{ HTMLElement("fieldset") }}
-
Rótulo de conjunto de campos.
-
- -
-
{{ HTMLElement("figcaption") }} {{ HTMLVersionInline(5) }}
-
Legenda da figura.
-
{{ HTMLElement("figure") }} {{ HTMLVersionInline(5) }}
-
Groups media content with a caption (see {{ HTMLElement("figcaption") }}).
-
{{ HTMLElement("footer") }} {{ HTMLVersionInline(5) }}
-
Section or page footer.
-
{{ HTMLElement("form") }}
-
Input form.
-
{{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }}
-
Heading levels 1-6.
-
{{ HTMLElement("header") }} {{ HTMLVersionInline(5) }}
-
Section or page header.
-
{{ HTMLElement("hgroup") }} {{ HTMLVersionInline(5) }}
-
Groups header information.
-
{{ HTMLElement("hr") }}
-
Horizontal rule (dividing line).
-
{{ HTMLElement("li") }}
-
List item.
-
{{ HTMLElement("main") }}
-
Contains the central content unique to this document.
-
{{ HTMLElement("nav") }}
-
Contains navigation links.
-
- -
-
{{ HTMLElement("ol") }}
-
Ordered list.
-
{{ HTMLElement("p") }}
-
Paragraph.
-
{{ HTMLElement("pre") }}
-
Preformatted text.
-
{{ HTMLElement("section") }} {{ HTMLVersionInline(5) }}
-
Section of a web page.
-
{{ HTMLElement("table") }}
-
Table.
-
{{ HTMLElement("tfoot") }}
-
Table footer.
-
{{ HTMLElement("ul") }}
-
Unordered list.
-
{{ HTMLElement("video") }} {{ HTMLVersionInline(5) }}
-
Video player.
-
-
- -

Veja também

- - diff --git a/files/pt-br/web/html/favicon/index.html b/files/pt-br/web/html/favicon/index.html deleted file mode 100644 index 6b3bef6490..0000000000 --- a/files/pt-br/web/html/favicon/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: favicon -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/web/html/formatos_midia_suportados/index.html b/files/pt-br/web/html/formatos_midia_suportados/index.html deleted file mode 100644 index 49c0b02fc1..0000000000 --- a/files/pt-br/web/html/formatos_midia_suportados/index.html +++ /dev/null @@ -1,526 +0,0 @@ ---- -title: Formatos de mídia suportados por elementos HTML de áudio e vídeo -slug: Web/HTML/formatos_midia_suportados -tags: - - Audio - - Firefox - - HTML - - HTML5 - - Ogg - - Reference - - Video - - formatos de arquivos - - mp3 - - mp4 -translation_of: Web/Media/Formats -translation_of_original: Web/HTML/Supported_media_formats ---- -

Os elementos {{ HTMLElement("audio") }} e {{ HTMLElement("video") }} fornecem suporte para a reprodução de mídias de áudio e vídeo sem necessitar de plug-ins. Codecs de áudio e vídeo são usados para manipular arquivos de áudio e vídeo, diferentes codecs oferecem diferentes níveis de compressão e qualidade. Um formato do repositório é usado para armazenar e transmitir o codec de áudio e vídeo ( ambos juntos,  no caso de um vídeo com tilha sonora). Existem muitas combinações de codecs e formatos de containers, embora apenas alguns são relevantes para a internet.

- -

Diferentes navegadores não dão suporte para os mesmos formatos de mídias em suas implementações de áudio e vídeo no HTML5, principalmente por causa de questões de patentes. A área de formatos de mídias na internet tem sofrido muito com leis de patentes em muitos países, incluindo os Estados Unidos e países da União Européia (as notas sobre patentes nesse artigo são fornecidas como estão e sem garantias). Este artigo discute a diferença de codecs e combinações de containers relevantes para a internet, incluindo suporte de navegadores em computadores ou outros tipos de dispositivos.
-
- Para exibir um vídeo usando HTML5, que funcione nas últimas versões dos principais navegadores, você pode disponibilizar seu vídeo em dois formatos: WebM e MPEG H.264 AAC, usando o elemento {{HTMLElement("source")}} desta forma:

- -
<video controls>
-  <source src="somevideo.webm" type="video/webm">
-  <source src="somevideo.mp4" type="video/mp4">
-  Desculpe; seu navegador não suporta vídeos HTML5 em WebM com VP8 ou MP4 com H.264.
-  <!-- Você pode embutir um Flash player aqui, para exibir seu vídeo mp4 em navegadores antigos -->
-</video>
-
- -

WebM

- -

O formato WebM é baseado em uma versão restrita do container Matroska. Ele sempre usa o codec de vídeo VP8 ou VP9 e o codec de áudio Vorbis ou Opus. WebM tem suporte nativo em navegadores de desktop e dispositivos móveis como Gecko (Firefox), Chrome e Opera, e o suporte para esse formato pode ser adicionado no Internet Explorer e Safari (mas não no iOS) por meio de um plug-in.
-
- Declaração da Microsoft sobre o porquê o IE9 não possui suporte nativo  para o WebM.
-
- O formato WebM, especificamente o codec de vídeo VP8, tinha sido acusado de violar patentes por um grupo de empresas respondendo um chamado da MPEG LA para a formação de um conjunto de patentes, mas a MPEG LA concordou em licenciar estas patentes para a Google sob uma "licença perpétua intransferível, livre de direitos autorais". Isto significa, efetivamente, que todas a patentes conhecidas do formato WebM são licenciadas para todos de graça.
-
- Gecko reconhece os seguintes tipos de arquivos WebM:

- -
-
video/webm
-
Um arquivo de mídia WebM contendo vídeo (e possivelmente áudio também).
-
audio/webm
-
Um arquivo de mídia WebM contendo apenas áudio.
-
- -

Ogg Theora Vorbis

- -

O formato de container Ogg com o codec de vídeo Theora e o codec de áudio Vorbis é suportados em desktops e dispositivos móveis Gecko (Firefox), Chrome, Opera e o suporte para esses formatos pode ser adicionado ao Safari (exceto iOS) instalando um plug-in. O Internet Explorer não possui suporte para esse formato.
-
- WebM é geralmente mais utilizado que Ogg Theora Vorbis quando disponível, por que ele possui uma melhor qualidade de compressão e tem suporte na maioria dos navegadores. O formato Ogg, contudo, pode ser usado para navegadores mais antigos (por exemplo o Firefox 3.5/3.6 não tem suporte WebM, mas suporta Ogg).

- -

A situação de patente do Theora é similar com a da WebM.

- -

Você pode ler mais sobre criar méidia com Ogg lendo o Theora Cookbook.

- -

Grecko reconhece os seguintes tipos MIME como arquivos Ogg:

- -
-
audio/ogg
-
Um arquivo Ogg que contem apensa áudio
-
video/ogg
-
Um arquivo Ogg que contem vídeo (e possivelmente áudio)
-
application/ogg
-
Um arquivo Ogg com conteúdo não especificado. Usando um dos dois tipos de MIME, mas você pode usar ele se você não sabe qual é o conteúdo do arquivo.
-
- -

Ogg Opus

- -

O container Ogg  pode também conter um áudio codificado usando o codec Opus. Suporte para ele está disponível no Gecko 15.0 {{ geckoRelease("15.0") }} e versões superiores, em navegadores no desktop e dispositivos móveis.

- -

Ogg FLAC

- -

O contêiner Ogg pode também conter um áudio codificado usando o codec FLAC. Suporte para ele está disponível no Gecko 51.0 {{geckoRelease ("51.0")}} e versões superiores, somente no desktop.

- -

MP4 H.264 (AAC ou MP3)

- -

O formato MP4 com o codec de vídeo H.264 e codec de áudio  AAC tem suporte nativo para Internet Explorer, Safari e Chrome no desktop e dispositivos móveis, o Opera não possui suporte para este formato. IE e Chrome também possuem suporte para codec de áudio MP3 no container MP4, mas o Safari não tem suporte para isso. Firefox/Firefox para hardware do dispositivo pode manipular o perfil utilizado para codificar o MP4.

- -
-

Nota: Codificação MP4 com um  perfil elevado não será executado em um hardware inferior, como o Firefox OS.

-
- -

O formato de mídia MPEG é coberto por patentes, do qual não é livremente licenciado. Todas as licenças necessárias podem ser compradas da MPEG LA. Desde H.264 o formato não é livre de direitos autorais, é impróprio para a internet aberta, de acordo com a Mozilla [1, 2], Google [1, 2] e Opera. Contudo, desde que os formatos de direitos livres não são suportados pelo Internet Explorer e Safari, a Mozilla decidiu dar suporte para o formato, e a Google nunca cumpriu sua promessa de remover o suporte para o Chrome.

- -

MP3

- -

O formato de áudio MP3(.mp3 audio/mpeg; diferente do áudio MP3 no MP4 container acima) é suportado na tag <audio> no Firefox/Firefox para Android/Firefox OS quando o sistema operacional fornece um decodificador MP3, para Internet Explorer, Chrome e Safari.

- -

WAVE PCM

- -

O formato WAVE, com o codec de áudio PCM (codec WAVE "1") tem suporte nos navegadores Gecko(Firefox) e Safari no desktop e dispositivos móveis. Arquivos com o formato WAVE tipicamente tem a extensão ".wav".

- -
Nota: Veja RFC 2361 para ver registros do codec WAVE
- -

Gecko reconhece os seguintes tipos MIME em arquivos de áudio WAVE:

- -
    -
  • audio/wave (preferido; não funciona no Chrome)
    • -
  • audio/wav
    • -
  • audio/x-wav
    • -
  • audio/x-pn-wav
    • -
- -

Media Source Extensions (MSE)

- -

Origem da extesão de mídia é um projeto de trabalho da W3C que planeja ampliar {{ domxref("HTMLMediaElement") }} para permitir que o JavaScript gere fluxo de mídia para reprodução. Permitindo que o JavaScript gere fluxos facilita uma variedade de uso, como o fluxo adaptado e o tempo de mudança de transmissão ao vivo. Isto é atualmente um suporte experimental no Firefox desktop, e em outros navegadores também.
-
- Por exemplo,  você pode implementar MPEG-DASH usando JavaScript durante carregamento da decodificação para MSE.

- -
-

Nota: Time Shifting é o processo de consumo de uma transmissão ao vivo, algum tempo após ter acontecido.

-
- -

Compatibilidade de navegadores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticasChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico3.0{{ CompatGeckoDesktop("1.9.1") }}9.010.503.1
<audio>: PCM em WAVE{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop("1.9.1") }}{{ CompatNo() }}10.503.1
<audio>: Vorbis em WebM{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop("2.0") }}{{ CompatNo() }}10.603.1 (deve ser instaldo separamente)
<audio>: Streaming Vorbis em WebM via Origem das extensões de mídia{{ CompatUnknown() }}{{ CompatGeckoDesktop("36.0") }} na edição  Nightly/Dev apenas{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
<audio>: Vorbis em Ogg{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop("1.9.1") }}{{ CompatNo() }}10.503.1 (deve ser instaldo separamente, e.g. XiphQT)
<audio>: MP3{{ CompatVersionUnknown() }} (Não em Chromium)Partial (Veja abaixo)9.0{{ CompatVersionUnknown() }}3.1
<audio>: MP3 em MP4 -

{{ CompatUnknown() }}

- 		{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}
<audio>: AAC em MP4 -

{{ CompatVersionUnknown() }} (Main only) (Não em  Chromium)

- 		-

Partial (Veja abaixo)

- 		9.0{{ CompatVersionUnknown() }}3.1
<audio>: Opus em Ogg27.0{{ CompatGeckoDesktop("15.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
<video>: VP8 e Vorbis em WebM6.0{{ CompatGeckoDesktop("2.0") }}9.0 (deve ser instalado separadamente, e.g. WebM MF)10.603.1 (deve ser instaldo separamente, e.g. Perian)
<video>: VP9 e Opus em WebM29.0{{ CompatGeckoDesktop("28.0") }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}
<video>: Streaming VP9 e Opus/VP8 e Opus em WebM via Origem das extensões de mídia{{ CompatUnknown() }}{{ CompatGeckoDesktop("36.0") }} na edição  Nightly/Dev apenas{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
<video>:  Theora e Vorbis em Ogg{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop("1.9.1") }}{{ CompatNo() }}10.503.1 (deve ser instaldo separamente, e.g. XiphQT)
<video>:  H.264 e MP3 em MP4 -

{{ CompatVersionUnknown() }} (Not in Chromium)

- 		Partial (Veja abaixo)9.0{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
<video>: H.264 e AAC em MP4 -

{{ CompatVersionUnknown() }} (Not in Chromium)

- 		Partial (Veja abaixo)9.0{{ CompatVersionUnknown() }}3.1
outro formato{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}3.1 (executa todos os formatos via QuickTime)
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticasAndroidFirefox Mobile (Gecko)Firefox OS (Gecko)IE MobileOpera MobileOpera MiniSafari MobileChrome for Android
Suporte básico2.324.01.0.110.011.0Partial (Veja abaixo)3.229.0
<audio>: PCM em WAVE{{ CompatUnknown() }}24.01.0.1{{ CompatNo() }}{{ CompatNo() }}Partial (Veja abaixo)3.2{{ CompatUnknown() }}
<audio>: Vorbis em WebM{{ CompatUnknown() }}24.01.0.1{{ CompatNo() }}11.0Partial (Veja abaixo){{ CompatNo() }}{{ CompatUnknown() }}
<audio>: Streaming Vorbis em WebM via Origem das extensões de mídia{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
<audio>: Vorbis em Ogg{{ CompatUnknown() }}24.01.0.1{{ CompatNo() }}11.0Partial (Veja abaixo){{ CompatNo() }}{{ CompatUnknown() }}
<audio>: MP3{{ CompatUnknown() }}Partial (Veja abaixo)Partial (Veja abaixo)10.0{{ CompatUnknown() }}Partial (Veja abaixo)3.2{{ CompatUnknown() }}
<audio>: MP3 em MP4{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}
<audio>: AAC em MP4{{ CompatUnknown() }}Partial (Veja abaixo)Partial (Veja abaixo)10.0{{ CompatUnknown() }}Partial (Veja abaixo){{ CompatVersionUnknown() }}{{ CompatUnknown() }}
<audio>: Opus em Ogg{{ CompatNo() }}24.0{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}Partial (Veja abaixo){{ CompatNo() }}{{ CompatNo() }}
<video>:  VP8 e Vorbis em WebM2.324.01.0.1{{ CompatNo() }}16.0Partial (Veja abaixo){{ CompatNo() }}29.0
<video>: VP9 and Opus em WebM{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
<video>: Streaming VP9 and Opus/VP8 e Opus em WebM via Origem das extensões de mídia{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
<video>: Theora e Vorbis em Ogg{{ CompatNo() }}24.01.0.1{{ CompatNo() }}{{ CompatNo() }}Partial (Veja abaixo){{ CompatNo() }}{{ CompatNo() }}
<video>:  H.264 e MP3 em MP4Partial (Veja abaixo)24.0Partial (Veja abaixo)10.0Partial since 11.0, full since 16.0Partial (Veja abaixo){{ CompatVersionUnknown() }}29.0
<video>: H.264 e AAC em MP4Partial (Veja abaixo)24.0Partial (Veja abaixo)10.0Partial since 11.0, full since 16.0Partial (Veja abaixo)3.229.0
qualquer outro formato{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
- -

Notas:

- -
    -
  • AAC é suportado apenas em containers MP4.
    • -
  • Opera Mini não suporta qualquer vídeo ou áudio, mas qualquer vídeo e áudio é passado para o dispositivo  executar se ele tiver suporte para este formato. Opera Mobile também faz isso com formatos não suportados.
    • -
  • Para o navegador padrão do Android executar vídeo H.264, você precisa fazer mais etapas, como explica Peter Gasston.
    • -
  • No Firefox OS 1.0.1, ao detectar suporte para diferentes formatos  <video> HTMLMediaElement.prototype.canPlayType reporta erroneamente  true para vídeos H.264 considerando o fato que o navegador não tem suporte para H.264. No Firefox OS 1.1 este problema foi resolvido.
    • -
  • Para evitar questões de patentes, o suporte para MPEG 4, H.264, MP3 and AAC não são construídas diretamente no Firefox desktop e em dispositivos móveis (Android e Firefox OS). Ao invés disso ele conta com o apoio do sistema operacional ou hardware (o hardware também precisa ser capaz de suportar o perfil usado para codificar o vídeo, no caso do MP4). Firefox desktop suporta estes formatos nas seguintes plataformas:
    • -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PlataformaVersão Firefox
Windows Vista+22.0+
Android20.0+
Firefox OS15.0+
Linux -

26.0+ (depende do codec GStreamer)

-
OS X 10.7+35.0+
- - - -

Veja também

- - diff --git a/files/pt-br/web/html/global_attributes/spellcheck/index.html b/files/pt-br/web/html/global_attributes/spellcheck/index.html new file mode 100644 index 0000000000..c379684839 --- /dev/null +++ b/files/pt-br/web/html/global_attributes/spellcheck/index.html @@ -0,0 +1,69 @@ +--- +title: Controlando a verificação ortográfica em formulários HTML +slug: Web/HTML/Controlando_verificacao_ortografica_em_formularios_HTML +tags: + - Gerenciamento de configuração + - HTML + - Intermediário +translation_of: Web/HTML/Global_attributes/spellcheck +translation_of_original: Web/HTML/Controlling_spell_checking_in_HTML_forms +--- +

{{ gecko_minversion_header("1.8.1") }} Firefox 2 introduz suporte à verificação ortográfica  para áreas de texto e campos de texto em formulários web. O usuário pode especificar usando a interface about:config se a verificação ortográfica é ou não habilitada e se checará áreas de texto e campos de texto ou somente áreas de texto.

+ +

Por padrão, áreas de texto e documentos  designMode tem ortografia verificada e caixas de texto de uma única linha não tem. Isto é assim porque os usuários do Firefox podem se distrair ou se incomodar se o Firefox marcar coisas como IDs de usuários ou endereços de e-mail como erros de ortografia.

+ +

Porém, podem haver situações nas quais este comportamento não é necessariamente apropriado. Por exemplo, se uma área de texto tem o objetivo de ser usada para editar HTML ou servir de entrada para outro tipo de texto que não seja semântico, a verificação ortográfica seria um entrave em vez de uma ajuda. Da mesma forma, podem haver casos nos quais um site faça uma recomendação de que o Firefox habilite a verificação ortográfica para um campo de texto específico, como campos de busca ou assunto/título de e-mail, mesmo estes sendo geralmente campos de texto de uma única linha.

+ +

Se um site deseja recomendar o uso ou não de verificação ortográfica para um elemento <input> específico, ele pode usar o atributo spellcheck, espefcificando o valor true para recomendar o uso da verificação ortográfica ou false para recomendar o não uso.

+ +

Tenha em mente que a recomendação do site pode ser ignorada pelo usuário se o mesmo tiver desativado a verificação ortográfica setando a configuração layout.spellcheckDefault para 0. Se a configuração layout.spellcheckDefault  tiver qualquer outro valor, as recomendações serão consideradas.

+ +

Você pode codificar um campo de texto linha-única (elemento HTML <input>) habilitando a verificação ortográfica da seguinte forma:

+ +
<input type="text" size="50" spellcheck="true">
+
+ +

Da mesma forma, você pode desabilitar a verificação ortográfica em uma área de texto (elemento <textarea>) da seguinte forma:

+ +
<textarea spellcheck="false"></textarea>
+
+ +

Você pode controlar um documento em seu designMode (tipicamente usado para implementar edição de texto rica) setando o atributo spellcheck  no elemento <body> de um documento.

+ +

Você também pode aplicar o atributo spellcheck em outros elementos, tais como os elementos <span> e <div>, e nesse caso todos os elementos <input> dentro dessas tags irão herdar esta configuração; elementos <input> que não tem um atributo spellcheck setado, irão herdar a configuração de verificação ortográfica de seu elemento pai. Se não houver nenhuma configuração setada na cadeia antecessora de elementos, a configuração padrão será usada.

+ +

Por exemplo:

+ +
<div spellcheck="true">
+  <label>Escreva algo: </label><input type="text" size="50">
+  <br>
+  <label>Escreva outra coisa: </label><input type="text" size="50">
+</div>
+<br>
+<label>Mais alguma coisa: </label><input type="text" size="50">
+
+ +

Neste exemplo HTML acima, os dois primeiros campos de texto terão a verificação ortográfica e o terceiro não terá.

+ +

{{ h1_gecko_minversion("Controlando o idioma da verificação ortográfica", "9.0") }}

+ +

Iniciando no Gecko 9.0 {{ geckoRelease("9.0") }}, a verificação ortográfica usa o atributo  {{ htmlattrxref("lang", "input") }} do elemento {{ HTMLElement("input") }}  para determinar o idioma padrão da verificação ortográfica. Se o {{ HTMLElement("input") }} não tiver o atributo lang setado, esse atributo é procurado em cada elemento pai superior até chegar ao elemento raiz do documento.

+ +

Fazendo assim, se o usuário tem os dicionários de Português e Inglês instalados, e um elemento editável tiver o atributo lang="en", o dicionário inglês será automaticamente usado para este elemento.

+ +

Por exemplo:

+ +
<html lang="pt-BR">
+<body>
+  <textarea></textarea>
+  <textarea lang="en"></textarea>
+  <div lang="ru">
+    <textarea></textarea>
+  </div>
+</body>
+</html>
+
+ +

No exemplo HTML acima, o primeiro {{ HTMLElement("textarea") }} terá ortografia checada em Português, o segundo em Inglês e o terceiro em Russo.

+ +

Se um elemento especifica o idioma e o usuário não tem dicionário instalado para este idioma, a verificação ortográfica fica desabilitada por padrão, embora o usuário possa escolher por habilitá-la manualmente.

diff --git a/files/pt-br/web/html/html5/index.html b/files/pt-br/web/html/html5/index.html deleted file mode 100644 index e39b45444a..0000000000 --- a/files/pt-br/web/html/html5/index.html +++ /dev/null @@ -1,299 +0,0 @@ ---- -title: HTML5 -slug: Web/HTML/HTML5 -tags: - - Desenvolvimento Web - - Guía - - HTML - - HTML5 - - Visão Geral - - Web -translation_of: Web/Guide/HTML/HTML5 ---- -

HTML5 é a mais recente evolução do padrão que define o HTML. O termo representa dois conceitos diferentes:

- -
    -
  • É uma nova versão da linguagem HTML, com novos elementos, atributos, e comportamentos
    • -
  • e um conjunto maior de tecnologias que permite o desenvolvimento de aplicações e web sites mais diversos e poderosos. Este conjunto é chamado HTML5 & friends e muitas vezes abreviado apenas como HTML5.
    • -
- -

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: permite você descrever mais precisamente o seu conteúdo.
    • -
  • Conectividade: permite uma comunicação com o servidor de formas modernas e inovadoras.
    • -
  • Offline e armazenamento: Permite que páginas web armazenem dados localmente do lado do cliente e opere de forma offline mais eficientemente.
    • -
  • Multimídia: Viabiliza a utilização de áudio e vídeo de forma primorosa na Web Aberta.
    • -
  • Gráficos e efeitos 2D/3D: viabiliza um leque diversificado de opções de representação gráfica. 
    • -
  • Performance e integração: fornece grande otimização de velocidade e melhor utilização do hardware do computador.
    • -
  • Acesso ao dispositivo: viabiliza a utilização de diversos métodos e dispositivos de entrada e saída.
    • -
  • Estilização: permite aos autores a escrita de temas mais sofisticados.
    • -
- -
- -
- -

 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.) {{ fx_minversion_inline(4.0) }}

- -

Alterações adicionais

- -
    -
  • localName e namespaceURI em documentos HTML agora  se comportam como em documentos XML: localName retorna em minúsculas e  namespaceURI para elementos HTML é "http://www.w3.org/1999/xhtml"
    • -
  • Quando a URI da página muda o identificador de fragmento de documento (a parte depois do caracter "#" (hash)), um novo evento hashchange é enviado para a página. Veja window.onhashchange para mais informação.
    • -
  • Suporte para element.classList para facilitar o manuseio de atributo de classe.
    • -
  • evnto de documento pronto document.onreadystatechange  e document.readyState são propriedades suportadas.
    • -
  • Cores em atributos de apresentação são interpretados de acordo com o HTML5.
    • -
- -

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/web/html/html5/introduction_to_html5/index.html b/files/pt-br/web/html/html5/introduction_to_html5/index.html deleted file mode 100644 index 465d67760d..0000000000 --- a/files/pt-br/web/html/html5/introduction_to_html5/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: Introdução ao HTML5 -slug: Web/HTML/HTML5/Introduction_to_HTML5 -translation_of: 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/web/html/inline_elemente/index.html b/files/pt-br/web/html/inline_elemente/index.html deleted file mode 100644 index 7a5866b243..0000000000 --- a/files/pt-br/web/html/inline_elemente/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: Elementos inline -slug: Web/HTML/Inline_elemente -translation_of: Web/HTML/Inline_elements ---- -

Sumário

-

"Inline" é uma categorização dos elementos do HTML, em contraste com os "elementos de bloco". Os elementos inline podem ser exibidos em nível de bloco ou outros elementos inline. Eles ocupam somente a largura de seu conteúdo. A diferença entre elementos inline e bloco incluem:

-
-
- Modelo de conteúdo
-
- Geralmente, elementos inline devem ter somente dados em outros elementos inline.
-
- Formato
-
- Por padrão, os elementos inline não começam em uma nova linha.
-
-

Elementos

-

Listagem dos elementos que são "inline":

- -

Ver também

- diff --git a/files/pt-br/web/html/inline_elements/index.html b/files/pt-br/web/html/inline_elements/index.html new file mode 100644 index 0000000000..7a5866b243 --- /dev/null +++ b/files/pt-br/web/html/inline_elements/index.html @@ -0,0 +1,29 @@ +--- +title: Elementos inline +slug: Web/HTML/Inline_elemente +translation_of: Web/HTML/Inline_elements +--- +

Sumário

+

"Inline" é uma categorização dos elementos do HTML, em contraste com os "elementos de bloco". Os elementos inline podem ser exibidos em nível de bloco ou outros elementos inline. Eles ocupam somente a largura de seu conteúdo. A diferença entre elementos inline e bloco incluem:

+
+
+ Modelo de conteúdo
+
+ Geralmente, elementos inline devem ter somente dados em outros elementos inline.
+
+ Formato
+
+ Por padrão, os elementos inline não começam em uma nova linha.
+
+

Elementos

+

Listagem dos elementos que são "inline":

+ +

Ver também

+ diff --git a/files/pt-br/web/html/microformatos/index.html b/files/pt-br/web/html/microformatos/index.html deleted file mode 100644 index 01e61069a7..0000000000 --- a/files/pt-br/web/html/microformatos/index.html +++ /dev/null @@ -1,444 +0,0 @@ ---- -title: Microformatos -slug: Web/HTML/microformatos -translation_of: Web/HTML/microformats ---- -
{{HTMLSidebar}}
- -

Microformatos (ás vezes abreviado como μF) são convenções utilizadas para incorporar convenções semânticas em HTML e providenciar uma API a ser usada por mecanismos de pesquisa, agregadores e outras ferramentas. Esses padrões mínimos de HTML são usados para marcar entidades que variam de informações fundamentais a específicas de domínio, como pessoas, organizações, eventos e locais.

- -

Os microformatos são suportados pelos principais mecanismos de pesquisa. Os dados são transportados na propriedade de classe que pode ser adicionada a qualquer elemento HTML. Além de legíveis por máquina, seu formato é projetado para ser facilmente lido por humanos.

- -

Existem bibliotecas de análise para a maioria das linguagens para microformatos2.

- -

Como os Microformatos Funcionam?

- -

Um autor de uma página web pode adicionar microformatos no seu HTML. Por exemplo se ele quer se identificar ele podem utilizar um h-card como:

- -
-
<a class="h-card" href="http://example.com">Joe Bloggs</a>
- -

Quando um analisador encontra  esse dado, ele saberá que nessa página contém um "card" que descreve uma pessoa ou uma organização chamada Joe Blogger com uma URL de http://example.com/. O analisador disponibiliza esses dados por meio de APIs que podem ser usadas por diferentes aplicativos.

- -

Como neste exemplo, alguns padrões de marcação requerem apenas um único nome de classe raiz de microformato, que os analisadores usam para encontrar algumas propriedades genéricas, como: name, url, photo.

-
- -

Prefixos de Microformatos

- -

Todos os microformatos consistem de uma raíz e uma coleção de propriedades. As propriedades são opcionais e potencilamente multivaloradas - aplicações que necessitam de um valor único devem utilizar a primeira instância de uma propriedade. Os dados hierárquicos são representados com microformatos aninhados, normalmente como valores de propriedade.

- -

Todas os nomes de classes de microformatos utilizam prefixos. Os prefixos são  Os prefixos são independentes da sintaxe dos vocabulários, os quais são desenvolvidos separadamente.

- -
    -
  • "h-*" para nome de classes raíz, p.ex "h-card", "h-entry", "h-feed", e várias outras. Essas classes de alto nível normalmente indicam um tipo e o vocabulário esperado de propriedades correspondente. Por exemplo: - -
      -
    • h-card descreve uma pessoa ou uma organização.
      • -
    • h-entry descreve conteúdo on-line em série ou com data marcada como uma postagem de blog.
      • -
    • h-feed descreve um fluxo de dados ou um feed de postagens.
      • -
    • Você pode encontrar vários outros You can find many more vocabulários na wiki de microformatos2.
      • -
    -
    • -
  • "p-*" para propriedades de texto simples, p.ex "p-name", "p-summary" -
      -
    • Análise de texto simples, texto de elemento em geral. Em certos elementos HTML, use atributos especiais primeiro, por exemplo img / alt, abbr / título.
      • -
    -
    • -
  • "u-*" para propriedades URL, p.ex "u-url", "u-photo", "u-logo" -
      -
    • Análise especial necessária: prefer a/href, img/src, object/data etc. atributos sobre o conteúdo do elemento.
      • -
    -
    • -
  • "dt-*" para propriedades de data e hora, p.ex "dt-start", "dt-end", "dt-bday" -
      -
    • Análise especial necessária: value-class-pattern and separate date time value parsing for readability.
      • -
    -
    • -
  • "e-*" para propriedades da árvore de elementos em que toda a hierarquia de elementos contidos é o valor, p.ex "e-content". O prefixo "e-" também pode ser lembrado mnemonicamente como "árvore de elementos", "marcação incorporada", ou "marcação encapsulada".
    • -
- -

Alguns exemplos de microformatos

- -

h-card

- -

O microformato h-card representa uma pessoa ou uma organização.

- -

O valor de cada propriedade é definido no HTML utilizando a propriedade class, qualquer elemento pode receber.

- -

Exemplo de h-card

- -
-
<p class="h-card">
-  <img class="u-photo" src="http://example.org/photo.png" alt="" />
-  <a class="p-name u-url" href="http://example.org">Joe Bloggs</a>
-  <a class="u-email" href="mailto:joebloggs@example.com">joebloggs@example.com</a>,
-  <span class="p-street-address">17 Austerstræti</span>
-  <span class="p-locality">Reykjavík</span>
-  <span class="p-country-name">Iceland</span>
-</p>
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropriedadeDescrição
p-nameO nome completo/formatado da pessoa ou organização
u-emailendereço de e-mail
u-photouma foto da
u-urlpágina na web ou outra URL representando a pessoa ou a organização
u-uididentificador universal único, de preferência URL canônico
p-street-addressnúmero da rua + enderço
p-localitycidade ou vilarejo
p-country-namenome do país
- -

Exemplo de h-card aninhado

- -
-
<div class="h-card">
-  <a class="p-name u-url"
-   href="http://blog.lizardwrangler.com/"
-  >Mitchell Baker</a>
-  (<a class="p-org h-card"
-    href="http://mozilla.org/"
-   >Mozilla Foundation</a>)
-</div>
-
- -

JSON analisado:

- -
-
{
-  "items": [{
-  "type": ["h-card"],
-  "properties": {
-    "name": ["Mitchell Baker"],
-    "url": ["http://blog.lizardwrangler.com/"],
-    "org": [{
-    "value": "Mozilla Foundation",
-    "type": ["h-card"],
-    "properties": {
-      "name": ["Mozilla Foundation"],
-      "url": ["http://mozilla.org/"]
-    }
-    }]
-  }
-  }]
-}
-
- -

Nota: o h-card aninhado implica nas propriedades 'name' e 'url', assim como qualquer outro h-card apenas com nome de classe raiz em um <a href>.

- -

h-entry

- -

O microformato h-entry representa um conteúdo em série ou um conteúdo com data marcada na web. h-entry é frequentemente usado com conteúdo destinado a ser distribuído, p.ex postagens em blog.

- -

Exemplo de h-entry como uma postagem em blog:

- -
-
<article class="h-entry">
-  <h1 class="p-name">Microformats are amazing</h1>
-  <p>Published by <a class="p-author h-card" href="http://example.com">W. Developer</a>
-   on <time class="dt-published" datetime="2013-06-13 12:00:00">13<sup>th</sup> June 2013</time></p>
-
-  <p class="p-summary">In which I extoll the virtues of using microformats.</p>
-
-  <div class="e-content">
-  <p>Blah blah blah</p>
-  </div>
-</article>
- -

Propriedades

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropriedadeDescrição
p-namenome/título da entrada
p-authorquem escreveu a entrada, h-card opcionalmente incorporado
dt-publishedquando a entrada foi publicada
p-summarybreve resumo da entrada
e-contentconteúdo completo da entrada
- -

Exemplo de h-entry analisado

- -
<div class="h-entry">
-  <p><span class="p-author h-card">
-    <a href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106" ><img class="u-photo" src="https://quickthoughts.jgregorymcverry.com/file/2d6c9cfed7ac8e849f492b5bc7e6a630/thumb.jpg"/></a>
-    <a class="p-name u-url" href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106">Greg McVerry</a></span>
-     Replied to <a class="u-in-reply-to" href="https://developer.mozilla.org/en-US/docs/Web/HTML/microformats">a post on
-   <strong>developer.mozilla.org</strong> </a>:
-  </p>
-   <p class="p-name e-content">Hey thanks for making this microformats resource</p>
-   <p> <a href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106">Greg McVerry</a>
-  published this <a class="u-url url" href="https://quickthoughts.jgregorymcverry.com/2019/05/31/hey-thanks-for-making-this-microformats-resource"><time class="dt-published"
-   datetime="2019-05-31T14:19:09+0000">31 May 2019</time></a></p>
-</div>
- -
-
{
-  "items": [
-    {
-      "type": [ "h-entry" ],
-      "properties": {
-        "in-reply-to": [ "https://developer.mozilla.org/en-US/docs/Web/HTML/microformats" ],
-        "name": [ "Hey thanks for making this microformats resource" ],
-        "url": [ "https://quickthoughts.jgregorymcverry.com/2019/05/31/hey-thanks-for-making-this-microformats-resource" ],
-        "published": [ "2019-05-31T14:19:09+0000" ],
-        "content": [
-          {
-            "html": "Hey thanks for making this microformats resource",
-            "value": "Hey thanks for making this microformats resource",
-            "lang": "en"
-          }
-        ],
-        "author": [
-          {
-            "type": [ "h-card" ],
-            "properties": {
-              "name": [ "Greg McVerry" ],
-              "photo": [ "https://quickthoughts.jgregorymcverry.com/file/2d6c9cfed7ac8e849f492b5bc7e6a630/thumb.jpg" ],
-              "url": [ "https://quickthoughts.jgregorymcverry.com/profile/jgmac1106" ]
-            },
-            "lang": "en",
-            "value": "Greg McVerry"
-          }
-        ]
-      },
-      "lang": "en"
-    }
-
- -

h-feed

- -

O h-feed é um fluxo de dados ou um feed de posts de h-entry, como postagens completas em uma página inicial ou em páginas de arquivo, sumários ou outras listagens de postagens

- -

Exemplo h-feed

- -
-
<div class="h-feed">
-  <h1 class="p-name">Microformats Blogs</h1>
-  <article class="h-entry">
-  <h2 class="p-name">Microformats are amazing</h2>
-  <p>Published by <a class="p-author h-card" href="http://example.com">W. Developer</a>
-     on <time class="dt-published" datetime="2013-06-13 12:00:00">13<sup>th</sup> June 2013</time>
-  </p>
-  <p class="p-summary">In which I extoll the virtues of using microformats.</p>
-  <div class="e-content"> <p>Blah blah blah</p> </div>
-  </article>
-</div>
-
- -

Propriedades

- - - - - - - - - - - - - - - - -
PropriedadesDescrição
p-namenome do feed
p-authorautor do feed, opcionalmente incorporado com um h-card
- -

Filhos

- - - - - - - - - - - - -
h-entry aninhado
objetos representando os itens do feed
- -

h-event

- -

O h-event é para evento na web. O h-event é frequentemente usado com listagens de eventos e páginas de eventos individuais.

- -
-
<div class="h-event">
-  <h1 class="p-name">Microformats Meetup</h1>
-  <p>From
-  <time class="dt-start" datetime="2013-06-30 12:00">30<sup>th</sup> June 2013, 12:00</time>
-  to <time class="dt-end" datetime="2013-06-30 18:00">18:00</time>
-  at <span class="p-location">Some bar in SF</span></p>
-  <p class="p-summary">Get together and discuss all things microformats-related.</p>
-</div>
-
- -

Propriedades

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropriedadeDescrição
p-namenome do evento (ou título)
p-summarybreve sumário do evento
dt-startdata e hora de início do evento
dt-enddata e hora de termino do evento
p-locationlocal do evento, opcionalmente incorporado com um h-card
- -

Exemplo de h-event analisado

- -
-
<div class="h-event">
-  <h2 class="p-name">IndieWeb Summit</h2>
-  <time class="dt-start" datetime="2019-06-29T09:00:00-07:00">June 29, 2019 at 9:00am  (-0700)</time><br>through <time class="dt-end" datetime="2019-06-30T18:00:00-07:00">June 30, 2019 at 6:00pm (-0700)</time><br>
-  <div class="p-location h-card">
-    <div>
-    <span class="p-name">Mozilla</span>
-     </div>
-     <div>
-      <span class="p-street-address">1120 NW Couch St</span>,
-      <span class="p-locality">Portland</span>,
-      <span class="p-region">Oregon</span>,
-      <span class="p-country">US</span>
-     </div>
-       <data class="p-latitude" value="45.52345"></data>
-      <data class="p-longitude" value="-122.682677"></data>
-  </div>
-    <div class="e-content">Come join us
-     </div>
-    <div>
-     <span class="p-author h-card"><a class="u-url p-name" href="https://aaronparecki.com">Aaron Parecki</a></span> Published this <a href="https://aaronparecki.com/2019/06/29/1/" class="u-url">event </a>on <time class="dt published" datetime="2019-05-25T18:00:00-07:00">May 5th, 2019</time>
-    </div>
-</div>
- -
-
{
-  "items": [
-    {
-      "type": [ "h-event" ],
-      "properties": {
-        "name": [ "IndieWeb Summit" ],
-        "url": [ "https://aaronparecki.com/2019/06/29/1/" ],
-        "author": [
-          {
-            "type": [ "h-card" ],
-            "properties": {
-              "name": [ "Aaron Parecki" ],
-              "url": [ "https://aaronparecki.com"]
-            },
-            "lang": "en",
-            "value": "Aaron Parecki"
-          }
-        ],
-        "start": [ "2019-06-29T09:00:00-07:00" ],
-        "end": [ "2019-06-30T18:00:00-07:00" ],
-        "published": [ "2019-05-25T18:00:00-07:00" ],
-        "content": [
-          {
-            "html": "Come join us",
-            "value": "Come join us",
-            "lang": "en"
-          }
-        ],
-        "location": [
-          {
-            "type": [ "h-card" ],
-            "properties": {
-              "name": [ "Mozilla" ],
-              p-street-address: [ "1120 NW Couch St" ]
-              "locality": [ "Portland" ],
-              "region": [ "Oregon" ],
-              "country": [ "US" ],
-              "latitude": [ "45.52345" ],
-              "longitude": [ "-122.682677" ]
-            },
-            "lang": "en",
-            "value": "Mozilla"
-          }
-        ]
-      },
-      "lang": "en"
-    }
-  ],
-
-
- -

See also

- - diff --git a/files/pt-br/web/html/microformats/index.html b/files/pt-br/web/html/microformats/index.html new file mode 100644 index 0000000000..01e61069a7 --- /dev/null +++ b/files/pt-br/web/html/microformats/index.html @@ -0,0 +1,444 @@ +--- +title: Microformatos +slug: Web/HTML/microformatos +translation_of: Web/HTML/microformats +--- +
{{HTMLSidebar}}
+ +

Microformatos (ás vezes abreviado como μF) são convenções utilizadas para incorporar convenções semânticas em HTML e providenciar uma API a ser usada por mecanismos de pesquisa, agregadores e outras ferramentas. Esses padrões mínimos de HTML são usados para marcar entidades que variam de informações fundamentais a específicas de domínio, como pessoas, organizações, eventos e locais.

+ +

Os microformatos são suportados pelos principais mecanismos de pesquisa. Os dados são transportados na propriedade de classe que pode ser adicionada a qualquer elemento HTML. Além de legíveis por máquina, seu formato é projetado para ser facilmente lido por humanos.

+ +

Existem bibliotecas de análise para a maioria das linguagens para microformatos2.

+ +

Como os Microformatos Funcionam?

+ +

Um autor de uma página web pode adicionar microformatos no seu HTML. Por exemplo se ele quer se identificar ele podem utilizar um h-card como:

+ +
+
<a class="h-card" href="http://example.com">Joe Bloggs</a>
+ +

Quando um analisador encontra  esse dado, ele saberá que nessa página contém um "card" que descreve uma pessoa ou uma organização chamada Joe Blogger com uma URL de http://example.com/. O analisador disponibiliza esses dados por meio de APIs que podem ser usadas por diferentes aplicativos.

+ +

Como neste exemplo, alguns padrões de marcação requerem apenas um único nome de classe raiz de microformato, que os analisadores usam para encontrar algumas propriedades genéricas, como: name, url, photo.

+
+ +

Prefixos de Microformatos

+ +

Todos os microformatos consistem de uma raíz e uma coleção de propriedades. As propriedades são opcionais e potencilamente multivaloradas - aplicações que necessitam de um valor único devem utilizar a primeira instância de uma propriedade. Os dados hierárquicos são representados com microformatos aninhados, normalmente como valores de propriedade.

+ +

Todas os nomes de classes de microformatos utilizam prefixos. Os prefixos são  Os prefixos são independentes da sintaxe dos vocabulários, os quais são desenvolvidos separadamente.

+ +
    +
  • "h-*" para nome de classes raíz, p.ex "h-card", "h-entry", "h-feed", e várias outras. Essas classes de alto nível normalmente indicam um tipo e o vocabulário esperado de propriedades correspondente. Por exemplo: + +
      +
    • h-card descreve uma pessoa ou uma organização.
      • +
    • h-entry descreve conteúdo on-line em série ou com data marcada como uma postagem de blog.
      • +
    • h-feed descreve um fluxo de dados ou um feed de postagens.
      • +
    • Você pode encontrar vários outros You can find many more vocabulários na wiki de microformatos2.
      • +
    +
    • +
  • "p-*" para propriedades de texto simples, p.ex "p-name", "p-summary" +
      +
    • Análise de texto simples, texto de elemento em geral. Em certos elementos HTML, use atributos especiais primeiro, por exemplo img / alt, abbr / título.
      • +
    +
    • +
  • "u-*" para propriedades URL, p.ex "u-url", "u-photo", "u-logo" +
      +
    • Análise especial necessária: prefer a/href, img/src, object/data etc. atributos sobre o conteúdo do elemento.
      • +
    +
    • +
  • "dt-*" para propriedades de data e hora, p.ex "dt-start", "dt-end", "dt-bday" +
      +
    • Análise especial necessária: value-class-pattern and separate date time value parsing for readability.
      • +
    +
    • +
  • "e-*" para propriedades da árvore de elementos em que toda a hierarquia de elementos contidos é o valor, p.ex "e-content". O prefixo "e-" também pode ser lembrado mnemonicamente como "árvore de elementos", "marcação incorporada", ou "marcação encapsulada".
    • +
+ +

Alguns exemplos de microformatos

+ +

h-card

+ +

O microformato h-card representa uma pessoa ou uma organização.

+ +

O valor de cada propriedade é definido no HTML utilizando a propriedade class, qualquer elemento pode receber.

+ +

Exemplo de h-card

+ +
+
<p class="h-card">
+  <img class="u-photo" src="http://example.org/photo.png" alt="" />
+  <a class="p-name u-url" href="http://example.org">Joe Bloggs</a>
+  <a class="u-email" href="mailto:joebloggs@example.com">joebloggs@example.com</a>,
+  <span class="p-street-address">17 Austerstræti</span>
+  <span class="p-locality">Reykjavík</span>
+  <span class="p-country-name">Iceland</span>
+</p>
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropriedadeDescrição
p-nameO nome completo/formatado da pessoa ou organização
u-emailendereço de e-mail
u-photouma foto da
u-urlpágina na web ou outra URL representando a pessoa ou a organização
u-uididentificador universal único, de preferência URL canônico
p-street-addressnúmero da rua + enderço
p-localitycidade ou vilarejo
p-country-namenome do país
+ +

Exemplo de h-card aninhado

+ +
+
<div class="h-card">
+  <a class="p-name u-url"
+   href="http://blog.lizardwrangler.com/"
+  >Mitchell Baker</a>
+  (<a class="p-org h-card"
+    href="http://mozilla.org/"
+   >Mozilla Foundation</a>)
+</div>
+
+ +

JSON analisado:

+ +
+
{
+  "items": [{
+  "type": ["h-card"],
+  "properties": {
+    "name": ["Mitchell Baker"],
+    "url": ["http://blog.lizardwrangler.com/"],
+    "org": [{
+    "value": "Mozilla Foundation",
+    "type": ["h-card"],
+    "properties": {
+      "name": ["Mozilla Foundation"],
+      "url": ["http://mozilla.org/"]
+    }
+    }]
+  }
+  }]
+}
+
+ +

Nota: o h-card aninhado implica nas propriedades 'name' e 'url', assim como qualquer outro h-card apenas com nome de classe raiz em um <a href>.

+ +

h-entry

+ +

O microformato h-entry representa um conteúdo em série ou um conteúdo com data marcada na web. h-entry é frequentemente usado com conteúdo destinado a ser distribuído, p.ex postagens em blog.

+ +

Exemplo de h-entry como uma postagem em blog:

+ +
+
<article class="h-entry">
+  <h1 class="p-name">Microformats are amazing</h1>
+  <p>Published by <a class="p-author h-card" href="http://example.com">W. Developer</a>
+   on <time class="dt-published" datetime="2013-06-13 12:00:00">13<sup>th</sup> June 2013</time></p>
+
+  <p class="p-summary">In which I extoll the virtues of using microformats.</p>
+
+  <div class="e-content">
+  <p>Blah blah blah</p>
+  </div>
+</article>
+ +

Propriedades

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropriedadeDescrição
p-namenome/título da entrada
p-authorquem escreveu a entrada, h-card opcionalmente incorporado
dt-publishedquando a entrada foi publicada
p-summarybreve resumo da entrada
e-contentconteúdo completo da entrada
+ +

Exemplo de h-entry analisado

+ +
<div class="h-entry">
+  <p><span class="p-author h-card">
+    <a href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106" ><img class="u-photo" src="https://quickthoughts.jgregorymcverry.com/file/2d6c9cfed7ac8e849f492b5bc7e6a630/thumb.jpg"/></a>
+    <a class="p-name u-url" href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106">Greg McVerry</a></span>
+     Replied to <a class="u-in-reply-to" href="https://developer.mozilla.org/en-US/docs/Web/HTML/microformats">a post on
+   <strong>developer.mozilla.org</strong> </a>:
+  </p>
+   <p class="p-name e-content">Hey thanks for making this microformats resource</p>
+   <p> <a href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106">Greg McVerry</a>
+  published this <a class="u-url url" href="https://quickthoughts.jgregorymcverry.com/2019/05/31/hey-thanks-for-making-this-microformats-resource"><time class="dt-published"
+   datetime="2019-05-31T14:19:09+0000">31 May 2019</time></a></p>
+</div>
+ +
+
{
+  "items": [
+    {
+      "type": [ "h-entry" ],
+      "properties": {
+        "in-reply-to": [ "https://developer.mozilla.org/en-US/docs/Web/HTML/microformats" ],
+        "name": [ "Hey thanks for making this microformats resource" ],
+        "url": [ "https://quickthoughts.jgregorymcverry.com/2019/05/31/hey-thanks-for-making-this-microformats-resource" ],
+        "published": [ "2019-05-31T14:19:09+0000" ],
+        "content": [
+          {
+            "html": "Hey thanks for making this microformats resource",
+            "value": "Hey thanks for making this microformats resource",
+            "lang": "en"
+          }
+        ],
+        "author": [
+          {
+            "type": [ "h-card" ],
+            "properties": {
+              "name": [ "Greg McVerry" ],
+              "photo": [ "https://quickthoughts.jgregorymcverry.com/file/2d6c9cfed7ac8e849f492b5bc7e6a630/thumb.jpg" ],
+              "url": [ "https://quickthoughts.jgregorymcverry.com/profile/jgmac1106" ]
+            },
+            "lang": "en",
+            "value": "Greg McVerry"
+          }
+        ]
+      },
+      "lang": "en"
+    }
+
+ +

h-feed

+ +

O h-feed é um fluxo de dados ou um feed de posts de h-entry, como postagens completas em uma página inicial ou em páginas de arquivo, sumários ou outras listagens de postagens

+ +

Exemplo h-feed

+ +
+
<div class="h-feed">
+  <h1 class="p-name">Microformats Blogs</h1>
+  <article class="h-entry">
+  <h2 class="p-name">Microformats are amazing</h2>
+  <p>Published by <a class="p-author h-card" href="http://example.com">W. Developer</a>
+     on <time class="dt-published" datetime="2013-06-13 12:00:00">13<sup>th</sup> June 2013</time>
+  </p>
+  <p class="p-summary">In which I extoll the virtues of using microformats.</p>
+  <div class="e-content"> <p>Blah blah blah</p> </div>
+  </article>
+</div>
+
+ +

Propriedades

+ + + + + + + + + + + + + + + + +
PropriedadesDescrição
p-namenome do feed
p-authorautor do feed, opcionalmente incorporado com um h-card
+ +

Filhos

+ + + + + + + + + + + + +
h-entry aninhado
objetos representando os itens do feed
+ +

h-event

+ +

O h-event é para evento na web. O h-event é frequentemente usado com listagens de eventos e páginas de eventos individuais.

+ +
+
<div class="h-event">
+  <h1 class="p-name">Microformats Meetup</h1>
+  <p>From
+  <time class="dt-start" datetime="2013-06-30 12:00">30<sup>th</sup> June 2013, 12:00</time>
+  to <time class="dt-end" datetime="2013-06-30 18:00">18:00</time>
+  at <span class="p-location">Some bar in SF</span></p>
+  <p class="p-summary">Get together and discuss all things microformats-related.</p>
+</div>
+
+ +

Propriedades

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropriedadeDescrição
p-namenome do evento (ou título)
p-summarybreve sumário do evento
dt-startdata e hora de início do evento
dt-enddata e hora de termino do evento
p-locationlocal do evento, opcionalmente incorporado com um h-card
+ +

Exemplo de h-event analisado

+ +
+
<div class="h-event">
+  <h2 class="p-name">IndieWeb Summit</h2>
+  <time class="dt-start" datetime="2019-06-29T09:00:00-07:00">June 29, 2019 at 9:00am  (-0700)</time><br>through <time class="dt-end" datetime="2019-06-30T18:00:00-07:00">June 30, 2019 at 6:00pm (-0700)</time><br>
+  <div class="p-location h-card">
+    <div>
+    <span class="p-name">Mozilla</span>
+     </div>
+     <div>
+      <span class="p-street-address">1120 NW Couch St</span>,
+      <span class="p-locality">Portland</span>,
+      <span class="p-region">Oregon</span>,
+      <span class="p-country">US</span>
+     </div>
+       <data class="p-latitude" value="45.52345"></data>
+      <data class="p-longitude" value="-122.682677"></data>
+  </div>
+    <div class="e-content">Come join us
+     </div>
+    <div>
+     <span class="p-author h-card"><a class="u-url p-name" href="https://aaronparecki.com">Aaron Parecki</a></span> Published this <a href="https://aaronparecki.com/2019/06/29/1/" class="u-url">event </a>on <time class="dt published" datetime="2019-05-25T18:00:00-07:00">May 5th, 2019</time>
+    </div>
+</div>
+ +
+
{
+  "items": [
+    {
+      "type": [ "h-event" ],
+      "properties": {
+        "name": [ "IndieWeb Summit" ],
+        "url": [ "https://aaronparecki.com/2019/06/29/1/" ],
+        "author": [
+          {
+            "type": [ "h-card" ],
+            "properties": {
+              "name": [ "Aaron Parecki" ],
+              "url": [ "https://aaronparecki.com"]
+            },
+            "lang": "en",
+            "value": "Aaron Parecki"
+          }
+        ],
+        "start": [ "2019-06-29T09:00:00-07:00" ],
+        "end": [ "2019-06-30T18:00:00-07:00" ],
+        "published": [ "2019-05-25T18:00:00-07:00" ],
+        "content": [
+          {
+            "html": "Come join us",
+            "value": "Come join us",
+            "lang": "en"
+          }
+        ],
+        "location": [
+          {
+            "type": [ "h-card" ],
+            "properties": {
+              "name": [ "Mozilla" ],
+              p-street-address: [ "1120 NW Couch St" ]
+              "locality": [ "Portland" ],
+              "region": [ "Oregon" ],
+              "country": [ "US" ],
+              "latitude": [ "45.52345" ],
+              "longitude": [ "-122.682677" ]
+            },
+            "lang": "en",
+            "value": "Mozilla"
+          }
+        ]
+      },
+      "lang": "en"
+    }
+  ],
+
+
+ +

See also

+ + diff --git a/files/pt-br/web/html/optimizing_your_pages_for_speculative_parsing/index.html b/files/pt-br/web/html/optimizing_your_pages_for_speculative_parsing/index.html deleted file mode 100644 index 5da1c3efa2..0000000000 --- a/files/pt-br/web/html/optimizing_your_pages_for_speculative_parsing/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: Optimizing your pages for speculative parsing -slug: Web/HTML/Optimizing_your_pages_for_speculative_parsing -translation_of: Glossary/speculative_parsing ---- -

Traditionally in browsers the HTML parser has run on the main thread and has blocked after a </script> tag until the script has been retrieved from the network and executed. The HTML parser in Firefox 4 and later supports speculative parsing off the main thread. It parses ahead while scripts are being downloaded and executed. As in Firefox 3.5 and 3.6, the HTML parser starts speculative loads for scripts, style sheets and images it finds ahead in the stream. However, in Firefox 4 and later the HTML parser also runs the HTML tree construction algorithm speculatively. The upside is that when a speculation succeeds, there's no need to reparse the part of the incoming file that was already scanned for scripts, style sheets and images. The downside is that there's more work lost when the speculation fails.

-

This document helps you avoid the kind of things that make speculation fail and slow down the loading of your page.

-

Making speculative loads succeed

-

There's only one rule for making speculative loads of linked scripts, style sheets and images succeed:

-
    -
  • If you use a <base> element to override the base URI of your page, put the element in the non-scripted part of the document. Don't add it via document.write() or document.createElement().
    • -
-

Avoiding losing tree builder output

-

Speculative tree building fails when document.write() changes the tree builder state such that the speculative state after the </script> tag no longer holds when all the content inserted by document.write() has been parsed. However, only unusual uses of document.write() cause trouble. Here are the things to avoid:

-
    -
  • Don't write unbalanced trees. <script>document.write("<div>");</script> is bad. <script>document.write("<div></div>");</script> is OK.
    • -
  • Don't write an unfinished token. <script>document.write("<div></div");</script> is bad.
    • -
  • Don't finish your writing with a carriage return. <script>document.write("Hello World!\r");</script> is bad. <script>document.write("Hello World!\n");</script> is OK.
    • -
  • Note that writing balanced tags may cause other tags to be inferred in a way that makes the write unbalanced. E.g. <script>document.write("<div></div>");</script> inside the head element will be interpreted as <script>document.write("</head><body><div></div>");</script> which is unbalanced.
    • -
  • Don't let the semicolon of a named character reference be the last thing that is written. Due to a bug in Firefox 4 though 10 (fixed in Firefox 11), <script>document.write("foo&nbsp;");</script> causes a speculation failure. However, <script>document.write("&nbsp;foo");</script> is OK.
    • -
  • Don't format part of a table. <table><script>document.write("<tr><td>Hello World!</td></tr>");</script></table> is bad. However, <script>document.write("<table><tr><td>Hello World!</td></tr></table>");</script> is OK.
    • -
  • TODO: document.write inside other formatting elements.
    • -
diff --git a/files/pt-br/web/html/reference/index.html b/files/pt-br/web/html/reference/index.html new file mode 100644 index 0000000000..f0eda6be3f --- /dev/null +++ b/files/pt-br/web/html/reference/index.html @@ -0,0 +1,25 @@ +--- +title: Referência HTML +slug: Web/HTML/ReferenciaHTML +translation_of: Web/HTML/Reference +--- +
{{HTMLSidebar}}
+ +

Esta referência de HTML descreve todos os elementos e atributos do HTML, incluindo atributos globais que se aplicam a todos elementos.

+ +
+
Referência de elementos do HTML
+
Esta página lista todos os elementos do HTML que são criados usando tags.
+
Referência de atributos do HTML
+
Os elementos do HTML contêm atributos, que são valores adicionais que configuram os elementos ou ajustam seu comportamento de várias formas, para que se adaptem aos critérios dos usuários.
+
Atributos globais
+
Atributos globais são atributos comuns a todos os elementos do HTML; podem ser usados em todos os elementos, embora possam não ter efeito em alguns elementos.
+
Tipos de links
+
Em HTML, os tipos de links a seguir indicam o relacionamento entre dois documentos, em que um aponta para o outro usando um elemento <a>, <area> ou <link>.
+
Categorias de conteúdo
+
Todo elemento em HTML é membro de uma ou mais categorias de conteúdo — estas categorias agrupam elementos que compartilham características comuns.
+
+ +

Veja todas as páginas com a tag HTML...

+ +
diff --git a/files/pt-br/web/html/referenciahtml/index.html b/files/pt-br/web/html/referenciahtml/index.html deleted file mode 100644 index f0eda6be3f..0000000000 --- a/files/pt-br/web/html/referenciahtml/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: Referência HTML -slug: Web/HTML/ReferenciaHTML -translation_of: Web/HTML/Reference ---- -
{{HTMLSidebar}}
- -

Esta referência de HTML descreve todos os elementos e atributos do HTML, incluindo atributos globais que se aplicam a todos elementos.

- -
-
Referência de elementos do HTML
-
Esta página lista todos os elementos do HTML que são criados usando tags.
-
Referência de atributos do HTML
-
Os elementos do HTML contêm atributos, que são valores adicionais que configuram os elementos ou ajustam seu comportamento de várias formas, para que se adaptem aos critérios dos usuários.
-
Atributos globais
-
Atributos globais são atributos comuns a todos os elementos do HTML; podem ser usados em todos os elementos, embora possam não ter efeito em alguns elementos.
-
Tipos de links
-
Em HTML, os tipos de links a seguir indicam o relacionamento entre dois documentos, em que um aponta para o outro usando um elemento <a>, <area> ou <link>.
-
Categorias de conteúdo
-
Todo elemento em HTML é membro de uma ou mais categorias de conteúdo — estas categorias agrupam elementos que compartilham características comuns.
-
- -

Veja todas as páginas com a tag HTML...

- -
diff --git a/files/pt-br/web/html/using_html5_audio_and_video/index.html b/files/pt-br/web/html/using_html5_audio_and_video/index.html deleted file mode 100644 index 4577341105..0000000000 --- a/files/pt-br/web/html/using_html5_audio_and_video/index.html +++ /dev/null @@ -1,240 +0,0 @@ ---- -title: Utilizando áudio e vídeo com HTML5 -slug: Web/HTML/Using_HTML5_audio_and_video -translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content -translation_of_original: Web/Guide/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") }}:

- -
    -
  • controls : Mostra os controles padrão para o áudio na página.
    • -
  • autoplay : Faz com que o áudio reproduza automaticamente.
    • -
  • loop : Faz com que o áudio repita automaticamente.
    • -
- -
<audio src="audio.mp3" preload="auto" controls></audio>
-
- -

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

- -
    -
  • "none" não carrega o arquivo
    • -
  • "auto" carrega o arquivo
    • -
  • "metadata" carrega apenas os meta dados do arquivo
    • -
- -

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/web/http/basico_sobre_http/identifying_resources_on_the_web/index.html b/files/pt-br/web/http/basico_sobre_http/identifying_resources_on_the_web/index.html deleted file mode 100644 index 42830a10b9..0000000000 --- a/files/pt-br/web/http/basico_sobre_http/identifying_resources_on_the_web/index.html +++ /dev/null @@ -1,183 +0,0 @@ ---- -title: Identificando recursos na web -slug: Web/HTTP/Basico_sobre_HTTP/Identifying_resources_on_the_Web -tags: - - Esquema - - HTTP - - O que é HTTP? - - Protocolo HTTP - - Sintaxe URL - - URI - - URL - - query - - resources -translation_of: Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web ---- -
{{HTTPSidebar}}
- -

O alvo de uma requisição HTTP é chamada de "resource", ou recurso em português, com a natureza ainda não definida; Isso pode ser um documento, uma foto ou qualquer outra coisa. Cada recurso é identificado por uma Identificação de recursos uniforme, do inglês Uniform Resource Identifier ({{Glossary("URI")}}) usada pelo HTTP para identificar recursos.

- -

A identidade e a localização de recursos na Web são fornecidas, principalmente por um único URL (Uniform Resource Locator, um tipo de URI). Pode ser que as vezes as a identidade e a localização não são dadas pelo mesmo URI: O HTTP usa um cabeçalho HTTP específico, {{HTTPHeader("Alt-Svc")}} quando o recurso solicitado quer que o cliente acesse-o de outra localização

- -

URLs e URNs

- -

URLs

- -

A forma mais comum de URL é o Uniform Resource Locator ({{Glossary("URL")}}) , que é conhecido como endereço de Web.

- -
https://developer.mozilla.org
-https://developer.mozilla.org/pt-BR/docs/Learn/
-https://developer.mozilla.org/pt-BR/search?q=URL
- -

Qualquer um desses URLs podem ser digitado na barra de endereços do seu navegador dizendo para carregar a página associada (recurso).

- -

Uma URL é composta por diferentes partes, algumas são estritamente necessárias e outras são opcionais. Um exemplo mais complexo seria algo como isso:

- -
http://www.exemplo.com:80/pasta/para/meu-arquivo.html?chave1=valor1&chave2=valor2#AlgumaCoisaNoDocumento
- -

URNs

- -

Um Nome de Recurso Uniforme do inglês Uniform Resource Name (URN) é uma URI que identifica um recurso pelo nome em um namespace particular.

- -
urn:isbn:9780141036144
-urn:ietf:rfc:7230
-
- -

As duas URNs correspondem

- -
    -
  • o livro Nineteen Eighty-Four por George Orwell,
    • -
  • a especificação 720 da IETF, Hypertext Transfer Protocol (HTTP/1.1): Sintaxe de mensagem e rotas.
    • -
- -

Sintaxe daUniform Resource Identifiers (URIs)

- -

Esquema ou protocolo

- -
-
Protocol
-
http:// é o protocolo. Ele indica qual é o protocolo que o navegador irá usar. Usualmente o protocolo é o HTTP, ou sua versão segura, HTTPS. A Web requer um desses dois, mas os navegadores tambem sabem como lidar com outros protocolos como o mailto: (para abrir um cliente de email) ou o ftp: para fazer uma transferêcia de arquivo, então não fique surpreso se ver alguns desses protocolos. Esquemas comuns são:
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EsquemaDescrição
dataURI de dados
fileNomes de arquivos específicos do host
ftpProtocolo de transferência de arquivo
http/httpsHyper text transfer protocol (Secure)
mailtoEndereço de correio eletrônico (e-mail)
sshSecure shell
teltelefone
urnUniform Resource Names
view-sourceCódigo fonte de um recurso
ws/wssConecções de WebSocket (Encriptadas)
- -

Autoridade

- -
-
Domaine Name
-
www.example.com é o nome de domínio ou autoridade que governa o namespace. Ele indica qual servidor web será solicitado. Alternativamente, é possível utilizar um {{Glossary("IP address")}}, mas isso pode ser menos conveniente e não é muito utilizado na Web.
-
- -

Porta

- -
-
Port
-
:80 é a porta nesta instância . Ela indica qual é o "portão" técnico usado para acessar os recursos no servidor web. Usualmente ela é omitida se o servidor web utiliza a porta padrão do protocolo HTTP (80 para HTTP e 443 para HTTPS) para garantir o acesso aos recursos. Do contrário, ela se torna obrigatória.
-
- -

Caminhos

- -
-
Path to the file
-
/path/to/myfile.html é o caminho para o recurso no servidor Web. Nos primeiros dias da Web, um caminho era representado pelo caminho físico correspondente no servidor web. Hoje em dia isso é mais uma abstração  tratada pelos servidores Web não sendo necessariamente o endereço físico do arquivo em questão.
-
- -

Query / Parâmetros

- -
-
Parameters
-
?key1=value1&key2=value2 são parâmetros extras fornecidos ao servidor Web. Eles são uma lista de pares chaves/valores separados com o símbolo &  O servidor web pode usar esses parametros para fazer coisas extras depois retornando o recurso para o usuário. Cada servidor web tem suas regras em relação aos parâmetros, e o unico jeito confiável de saber como um servidor Web especifico trata os parâmetros é perguntando o dono do servidor.
-
- -

Fragmentos

- -
-
Anchor
-
#SomewhereInTheDocument é uma âncora para outra parte do próprio recurso. Uma âncora representa uma espécie de "marcador" dentro do recurso, dando ao navegador as instruções para mostrar o conteúdo localizado naquele ponto "marcado". Em um documento HTML, por exemplo, o navegador erá dar scroll para a ancora em um ponto definido; em um vídeo ou audio, o navegor erá tentar ir para o tempo que a âncora representa. Vale ressaltar que a parte após o #, também conhecido como identificador de fragmento, nunca é enviado ao servidor com o pedido. 
-
- -

Notas de uso

- -

Ao usar URLs em conteúdo {{Glossary("HTML")}} em geral se deve usar apenas alguns desses esquemas URL. Apenas os esquemas HTTP e HTTPS devem ser usados quando se faz referência a subrecursos — isto é, arquivos carregados como parte de um documento maior. Por razões de segurança, os navegadores estão reduzindo cada vez mais o suporte a FTP para o carregamento de subrecursos.

- -

FTP ainda é aceito em alguns casos específicos de acesso direto, como quando a URL é digitada diretamente na barra do navegador ou como o alvo em um link, ainda que alguns navegadores possam delegar o carregamento do conteúdo FTP para outra aplicação.

- -

Exemplos

- -
https://developer.mozilla.org/en-US/docs/Learn
-tel:+1-816-555-1212
-git@github.com:mdn/browser-compat-data.git
-ftp://example.org/resource.txt
-urn:isbn:9780141036144
-
- -

Especificações

- - - - - - - - - - - - -
SpecificationTitle
{{RFC("7230", "Uniform Resource Identifiers", "2.7")}}Hypertext Transfer Protocol (HTTP/1.1): Message Syntax and Routing
- -

Veja também

- - diff --git a/files/pt-br/web/http/basico_sobre_http/index.html b/files/pt-br/web/http/basico_sobre_http/index.html deleted file mode 100644 index a89b456f12..0000000000 --- a/files/pt-br/web/http/basico_sobre_http/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: Básico sobre HTTP -slug: Web/HTTP/Basico_sobre_HTTP -translation_of: Web/HTTP/Basics_of_HTTP ---- -
{{HTTPSidebar}}
- -

HTTP é um protocolo bem extensivo. Isso depende um pouco do conceito básico com noção de recursos e URIs, uma simples estrutura de mensagens, e uma estrutura de cliente-servidor para a comunicação ocorrer. Em cima destes conceitos básicos, várias versões surgiram ao longo do tempo, adicionando novas funcionalidades e novas semanticas para criar novos métodos HTTP ou cabeçalhos.

- -

Artigos

- -
-
Visão geral sobre HTTP
-
-

Descreve o que é HTTP e quais as regras para arquitetura Web, sua posição na lista de protocolos.

-
-
Evolução do HTTP
-
-

HTTP foi criada no inicio dos anos 1990 e vem evolindo ao longo do tempo. Esse artigo passa por sua história e descreve HTTP/0.9, HTTP/1.0, HTTP/1.1, e o moderno HTTP/2 bem como pequenas novidades adicionadas ao longo de seus anos.

-
-
Negociação entre versões HTTP
-
-

Explicações de como um cliente e um servidor conseguem negociar em uma versão expecífica do HTTP e enventuais atualizaçõs nos protocolos usados;

-
-
Recursos e URIs
-
-

Uma breve introdução sobre noção de recursos, identicadores e localizações na Web.

-
-
Identificando recursos na Web
-
Descreve como os recursos Web são referênciados e como encontrar eles.
-
Data URIs
-
-

Um tipo especifico de URIs que incorpora diretamente os recursos apresentados, Data URIs são muito convenientes, mas tem algumas ressalvas

-
-
Separando identidades e localização de recursos: O cabeçalho Alt-Svc HTTP
-
Na maioria das vezes, a indentidade ea localização de um recurso da Web são compartilhados, isso pode ser mudado com no cabeçalho {{HTTPHeader("Alt-Svc")}}.
-
MIME types
-
Desde HTTP/1.0, diferentes tipos de conteúdos poderam ser transmitidos. Esse artigo explica como funciona usando o {cabeçalho {HTTPHeader("Content-Type")}} e o MIME standard.
-
Escolhendo entre URLs www e sem-www
-
-

Ajuda de como usar o prefixo www no domínio ou não, esse artigo fala as consequencias da escolhe e também como fazer isso.

-
-
Fluxo de sessões HTTP
-
-

Esse artigo fundamente descreve uma típica sessão HTTP: o que acontece por trás do do navegador quando você clica em um link.

-
-
Mensagens HTTP
-
-

Mensagens HTTP transmitidas durante o pedido ou resposta tem uma clara estrutura; isso introduz descrição sobre essas estrutura no artigo, seus proprósitos e suas possibilidades.

-
-
Quadro e estrutura de mensagens no HTTP/2
-
-

HTTP/2 junta e representa mensagens do HTTP/1.x em um quadro binário. Esse artigo explica a estrutura do quadro, sua finalidade ea maneira como ele é codificado.

-
-
Gerenciamento de conexão no HTTP/1.x
-
HTTP/1.1 foi a primeira versão do HTTP a suportar conexão constante e canalizar elas. Esse artigo explica sobre estes dois conceitos.
-
Gerenciamento de conexão no HTTP/2
-
HTTP/2 Revisitou completamente como as conexões são criadas e mantidas: esse artigo explica como os quadros HTTP permitem multiplexação e resolver o bloco 'head-of-line' bloqueio das versões anteirores do HTTP.
-
Conteúdo da negociação
-
HTTP introduz um conjunto de cabeçalhos, começando com Accept- como o meio que o navegador anuncia o formato, linguagem, ou a codificação é preferida. Esse artigo explica como esse anuncio acontece, como o servidor é esperado para reagir e como será escolhido a melhor resposta.
-
diff --git a/files/pt-br/web/http/basico_sobre_http/mime_types/complete_list_of_mime_types/index.html b/files/pt-br/web/http/basico_sobre_http/mime_types/complete_list_of_mime_types/index.html deleted file mode 100644 index d8f2b6898d..0000000000 --- a/files/pt-br/web/http/basico_sobre_http/mime_types/complete_list_of_mime_types/index.html +++ /dev/null @@ -1,336 +0,0 @@ ---- -title: Lista Incompleta de tipos MIME -slug: Web/HTTP/Basico_sobre_HTTP/MIME_types/Complete_list_of_MIME_types -tags: - - Extensões HTTP - - Tipos MIME -translation_of: Web/HTTP/Basics_of_HTTP/MIME_types/Common_types ---- -
{{HTTPSidebar}}
- -

Abaixo uma lista de tipos de MIME, associadas por tipos de documentos, ordenados por suas extensões comuns.

- -


- Há dois tipo MIME que são importantes para tipos padrões:

- -
    -
  • text/plain é o tipo padrão para arquivos de texto. Um arquivo de texto deve ser legível para um ser humano, e não deve conter dados binários.
    • -
  • application/octet-stream  É um tipo padrão para todos outros casos. Um tipo de arquivo desconhecido deveria usar este tipo. Navegadores tomarão mais cuidado ao manipular esses arquivos, tentando proteger o usuário e prevenir comportamentos perigosos.
    • -
- -

IANA é o registrador official de tipos de mídia MIME e mantém uma lista de todos tipos oficiais de MIME.  Esta tabela lista alguns tipos de MIME importantes para a Web.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ExtensãoTipo do documentoTipo MIME
.aacArquivo de audio AACaudio/aac
.abwDocumento AbiWordapplication/x-abiword
.arcArchive document (multiple files embedded)application/octet-stream
.aviArquivo de audio e vídeo  Intercalar AVIvideo/x-msvideo
.azwFormato eBook do Amazon Kindleapplication/vnd.amazon.ebook
.binQualquer tipo de dados bináriosapplication/octet-stream
.bzArquivo compactado  BZipapplication/x-bzip
.bz2Arquivo compactado  BZip2application/x-bzip2
.cshC-Shell scriptapplication/x-csh
.cssCascading Style Sheets (CSS)text/css
.csvComma-separated values (CSV)text/csv
.docMicrosoft Wordapplication/msword
.eotMS Embedded OpenType fontsapplication/vnd.ms-fontobject
.epubElectronic publication (EPUB)application/epub+zip
.gifGraphics Interchange Format (GIF)image/gif
.htm
- .html		HyperText Markup Language (HTML)text/html
.icoIcon formatimage/x-icon
.icsiCalendar formattext/calendar
.jarJava Archive (JAR)application/java-archive
.jpeg
- .jpg		JPEG imagesimage/jpeg
.jsJavaScript (ECMAScript)application/javascript
.jsonJSON formatapplication/json
.mid
- .midi		Musical Instrument Digital Interface (MIDI)audio/midi
.mpegMPEG Videovideo/mpeg
.mpkgApple Installer Packageapplication/vnd.apple.installer+xml
.odpOpenDocument presentation documentapplication/vnd.oasis.opendocument.presentation
.odsOpenDocument spreadsheet documentapplication/vnd.oasis.opendocument.spreadsheet
.odtOpenDocument text documentapplication/vnd.oasis.opendocument.text
.ogaOGG audioaudio/ogg
.ogvOGG videovideo/ogg
.ogxOGGapplication/ogg
.otfOpenType fontfont/otf
.pngPortable Network Graphicsimage/png
.pdfAdobe Portable Document Format (PDF)application/pdf
.pptMicrosoft PowerPointapplication/vnd.ms-powerpoint
.rarRAR archiveapplication/x-rar-compressed
.rtfRich Text Format (RTF)application/rtf
.shBourne shell scriptapplication/x-sh
.svgScalable Vector Graphics (SVG)image/svg+xml
.swfSmall web format (SWF) or Adobe Flash documentapplication/x-shockwave-flash
.tarTape Archive (TAR)application/x-tar
.tif
- .tiff		Tagged Image File Format (TIFF)image/tiff
.tsTypescript fileapplication/typescript
.ttfTrueType Fontfont/ttf
.vsdMicrosoft Visioapplication/vnd.visio
.wavWaveform Audio Formataudio/x-wav
.webaWEBM audioaudio/webm
.webmWEBM videovideo/webm
.webpWEBP imageimage/webp
.woffWeb Open Font Format (WOFF)font/woff
.woff2Web Open Font Format (WOFF)font/woff2
.xhtmlXHTMLapplication/xhtml+xml
.xls
- .xlsx		Microsoft Excelapplication/vnd.ms-excel
- application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
.xmlXMLapplication/xml
.xulXULapplication/vnd.mozilla.xul+xml
.zipZIP archiveapplication/zip
.3gp3GPP audio/video containervideo/3gpp
- audio/3gpp if it doesn't contain video
.3g23GPP2 audio/video containervideo/3gpp2
- audio/3gpp2 if it doesn't contain video
.7z7-zip archiveapplication/x-7z-compressed
diff --git a/files/pt-br/web/http/basico_sobre_http/mime_types/index.html b/files/pt-br/web/http/basico_sobre_http/mime_types/index.html deleted file mode 100644 index 3acce2553a..0000000000 --- a/files/pt-br/web/http/basico_sobre_http/mime_types/index.html +++ /dev/null @@ -1,314 +0,0 @@ ---- -title: MIME types -slug: Web/HTTP/Basico_sobre_HTTP/MIME_types -translation_of: Web/HTTP/Basics_of_HTTP/MIME_types ---- -
{{HTTPSidebar}}
- -

O MIME type é o mecanismo para dizer ao cliente a variedade de documentos transmitidos: a extensão de um nome de arquivo não tem significado na web. Portanto, é importante que o servidor esteja configurado corretamente, de modo que o MIME-type correto seja transmitido com cada documento. Os navegadores costumam usar o MIME-type para determinar qual ação usar como padrão para fazer quando um recurso é obtido.

- -

Existem muitos tipos de documentos, por isso há muitos MIME-types. Neste artigo, listaremos os mais importantes para o desenvolvimento da Web, mas você pode encontrá-los para os tipos de documento aplicáveis ​​neste artigo dedicado: Lista completa de MIME types.

- -

MIME types não são a única maneira de transmitir as informações do tipo de documento:

- -
    -
  • Os sufixos de nome são usados ​​às vezes, especialmente em sistemas Microsoft Windows. Nem todos os sistemas operacionais consideram esses sufixos significativos (especialmente Linux e Mac OS), e como um tipo MIME externo, não há garantia de que eles estejam corretos.
    • -
  • Números mágicos. A sintaxe dos diferentes tipos de arquivos permite a inferência de tipo de arquivo, olhando para a estrutura. Por exemplo. Cada arquivo GIF começa com o valor hexadecimal 47 49 46 38 [GIF89] ou arquivos PNG com 89 50 4E 47 [.PNG]. Nem todos os tipos de arquivos têm números mágicos, portanto este não é um sistema 100% confiável.
    • -
- -

Na Web, apenas o MIME type é relevante e deve ser definido com cuidado. Navegadores e servidores usavam frequentemente heurísticas baseadas em sufixos ou números mágicos para definir o tipo MIME, verificar a coerência ou encontrar o tipo MIME correto quando apenas um tipo genérico foi fornecido.

- -

Sintaxe

- -

Estrutura geral

- -
tipo/subtipo
- -

A estrutura de um MIME type é muito simples; Consiste de um tipo e um subtipo, duas strings, separados por um '/'. Nenhum espaço é permitido. O tipo representa a categoria e pode ser um tipo discreto ou multipart. O subtipo é específico para cada tipo.

- -

Um MIME type é case-insensitive mas tradicionalmente é escrito tudo em minúsculas.

- -

Tipos discretos

- -
text/plain
-text/html
-image/jpeg
-image/png
-audio/mpeg
-audio/ogg
-audio/*
-video/mp4
-application/octet-stream
-…
- -

Tipos discretos indicam a categoria do documento, ele pode ser um dos seguintes:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
TipoDescriçãoExemplos de subtipos típicos
textRepresenta qualquer documento que contenha texto e é teoricamente legivel para o ser humano.text/plain, text/html, text/css, text/javascript
imageRepresenta qualquer tipo de imagens. Os vídeos não estão incluídos, embora imagens animadas (como gif animado) sejam descritas com um tipo de imagem.image/gif, image/png, image/jpeg, image/bmp, image/webp
audioRepresenta qualquer tipo de arquivo de audioaudio/midi, audio/mpeg, audio/webm, audio/ogg, audio/wav
videoRepresenta qualquer tipo de arquivo de videovideo/webm, video/ogg
applicationRepresenta qualquer tipo de dados binários.application/octet-stream, application/pkcs12, application/vnd.mspowerpoint, application/xhtml+xml, application/xml,  application/pdf
- -

Para documentos de texto sem um subtipo especifico, text/plain deverá ser usado. Assim como, para documentos binários sem subtipo especifico ou conhecido, application/octet-stream deverá ser usado.

- -

Tipos de multipart

- -
multipart/form-data
-multipart/byteranges
- -

Multipart types indicam uma categoria de documento que são quebrados em partes distintas, muitas vezes com diferentes tipos MIME. É uma maneira de representar um documento composto. Com exceção de multipart/form-data, que são usados ​​em relação de formularios HTML e metodo {{HTTPMethod("POST")}}, e multipart/byteranges que são usados em conjunto com {{HTTPStatus("206")}} Mensagem de status de conteúdo parcial para enviar apenas um subconjunto de um documento inteiro, o HTTP não manipula documentos de várias partes de uma maneira específica: a mensagem é simplesmente transmitida ao navegador (o que provavelmente irá propor uma janela Salvar como, sem saber como exibir o documento).

- -

Importantes MIME types para desenvolvedores Web

- -

application/octet-stream

- -

Este é o valor padrão para um arquivo binario. Como é um arquivo binário desconhecido, os navegadores geralmente não irá executá-lo automaticamente, ou irá perguntar se ele deve ser executado. Eles tratam-na como se o cabeçalho {{HTTPHeader("Content-Disposition")}} fosse definido com o anexo de valor e propusessem um "Salvar como".

- -

text/plain

- -

Este é o valor padrão para arquivos de texto. Mesmo se realmente significa arquivo textual desconhecido, os navegadores assumem que eles podem exibi-lo.

- -
-

Note que text/plain não significa qualquer tipo de dados textuais. Se eles esperam um tipo específico de dados textuais, eles provavelmente não consideram uma correspondência. Especificamente se eles baixarem um arquivo text/plain de um elemento {{HTMLElement ("link")}} declarando arquivos CSS, eles não o reconhecerão como arquivos CSS válidos se forem apresentados com text/plain.
- O CSS mime tipo text/css deve ser usado.

-
- -

text/css

- -

Quaisquer arquivos CSS que têm de ser interpretados como tal em uma página da Web devem ser dos arquivos de text/css. Muitas vezes os servidores não reconhecem arquivos com o sufixo .css como arquivos CSS, em vez disso, enviam-nos com o tipo MIME de text/plain ou application/octet-stream: nesses casos, eles não serão reconhecidos como arquivos CSS pela maioria dos navegadores e serão silenciosamente ignorados.
- Atenção especial tem de ser paga para servir arquivos CSS com o tipo correto.

- -

text/html

- -

Todo o conteúdo HTML deve ser exibido com este tipo. Tipos MIME alternativos para XHTML (como application/xml+html) são em sua maioria inúteis hoje em dia (HTML5 unificou esses formatos).

- -

Images types

- -

Apenas um punhado de tipos de imagem são amplamente reconhecidos e são considerados seguros na Web, prontos para uso em uma página da Web:

- - - - - - - - - - - - - - - - - - - - - - - - - - -
MIME typeImage type
image/gifGIF images (Compressão sem perdas, substituído por PNG)
image/jpegJPEG images
image/pngPNG images
image/svg+xmlSVG images (vector images)
- -

Há uma discussão para adicionar WebP (image / webp) a esta lista, mas como cada novo tipo de imagem irá aumentar o tamanho de um codebase, isso pode introduzir novos problemas de segurança, então os fornecedores de navegador são cautelosos em aceitá-lo.

- -

Outros tipos de imagens podem ser encontrados em documentos da Web. Por exemplo, muitos navegadores suportam tipos de imagem de ícones para favicons ou similares.
- Em particular, as imagens do ICO são suportadas neste contexto com o tipo MIME image/x-icon.

- -

Audio and video types

- -

Como as imagens, o HTML não define um conjunto de tipos suportados para usar com os elementos {{HTMLElement("audio")}} e {{HTMLElement("video")}} , de modo que apenas um grupo relativamente pequeno deles pode ser Usado na Web. Os formatos de mídia suportados pelos elementos de áudio e vídeo em HTML explicam os codecs e formatos de contêiner que podem ser usados.
-
- O tipo MIME de tais arquivos principalmente representam os formatos de contêiner e os mais comuns em um contexto da Web são:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
MIME typeAudio or video type
audio/wave
- audio/wav
- audio/x-wav
- audio/x-pn-wav		Um arquivo de áudio no formato de recipiente WAVE. O codec de áudio PCM (WAVE codec "1") é freqüentemente suportado, mas outros codecs têm suporte mais limitado (se houver).
audio/webmUm arquivo de áudio no formato de contêiner WebM. Vorbis e Opus são os codecs de áudio mais comuns.
video/webmUm arquivo de vídeo, possivelmente com áudio, no formato de contêiner WebM. VP8 e VP9 são os codecs video os mais comuns usados ​​dentro dele; Vorbis e Opus os codecs de áudio mais comuns.
audio/oggUm arquivo de áudio no formato de contêiner OGG. Vorbis é o codec de áudio mais comum usado em tal recipiente.
video/oggUm arquivo de vídeo, possivelmente com áudio, no formato de contêiner OGG. Theora é o codec video usual usado dentro dele; Vorbis é o codec de áudio usual.
application/oggUm arquivo de áudio ou vídeo usando o formato de contêiner OGG. Theora é o codec video usual usado dentro dele; Vorbis é o codec de áudio usual.
- -

multipart/form-data

- -

O tipo multipart/form-data pode ser usado ao enviar o conteúdo de um  formulario HTML preenchido do navegador para o servidor. Como um documento multipart formal, consiste em partes diferentes, delimitado por um limite (uma seqüência de caracteres começando com um traço duplo '--'). Cada parte é uma entidade por si só, com seus próprios cabeçalhos HTTP, {{HTTPHeader("Content-Disposition")}}, e {{HTTPHeader("Content-Type")}} Para os campos de upload de arquivos, e os mais comuns ({{HTTPHeader("Content-Length")}} É ignorada como a linha de limite é usada como o delimitador).

- -
Content-Type: multipart/form-data; boundary=aBoundaryString
-(Outros cabeçalhos associados ao documento em várias partes como um todo)
-
---aBoundaryString
-Content-Disposition: form-data; name="myFile"; filename="img.jpg"
-Content-Type: image/jpeg
-
-(dados)
---aBoundaryString
-Content-Disposition: form-data; name="myField"
-
-(dados)
---aBoundaryString
-(mais subpartes)
---aBoundaryString--
-
-
- -

O seguinte formulario:

- -
<form action="http://localhost:8000/" method="post" enctype="multipart/form-data">
-  <input type="text" name="myTextField">
-  <input type="checkbox" name="myCheckBox">Check</input>
-  <input type="file" name="myFile">
-  <button>Send the file</button>
-</form>
- -

Enviará esta mensagem:

- -
POST / HTTP/1.1
-Host: localhost:8000
-User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0
-Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
-Accept-Language: en-US,en;q=0.5
-Accept-Encoding: gzip, deflate
-Connection: keep-alive
-Upgrade-Insecure-Requests: 1
-Content-Type: multipart/form-data; boundary=---------------------------8721656041911415653955004498
-Content-Length: 465
-
------------------------------8721656041911415653955004498
-Content-Disposition: form-data; name="myTextField"
-
-Test
------------------------------8721656041911415653955004498
-Content-Disposition: form-data; name="myCheckBox"
-
-on
------------------------------8721656041911415653955004498
-Content-Disposition: form-data; name="myFile"; filename="test.txt"
-Content-Type: text/plain
-
-Simple file.
------------------------------8721656041911415653955004498--
-
-
- -

multipart/byteranges

- -

O tipo MIME multipart/byteranges é usado no contexto de enviar respostas parciais para o navegador. Quando o código de status de conteúdo parcial {{HTTPStatus("206")}} é enviado, este tipo MIME é usado para indicar que o documento é composto de várias partes, uma para cada um do intervalo solicitado. Como outros tipos de multipart, o {{HTTPHeader("Content-Type")}} usa a diretiva de limite para definir a seqüência de limites. Cada uma das diferentes partes tem um cabeçalho {{HTTPHeader("Content-Type")}} com o tipo real do documento e um {{HTTPHeader("Content-Range")}} com o intervalo que representam.

- -
HTTP/1.1 206 Partial Content
-Accept-Ranges: bytes
-Content-Type: multipart/byteranges; boundary=3d6b6a416f9b5
-Content-Length: 385
-
---3d6b6a416f9b5
-Content-Type: text/html
-Content-Range: bytes 100-200/1270
-
-eta http-equiv="Content-type" content="text/html; charset=utf-8" />
-    <meta name="vieport" content
---3d6b6a416f9b5
-Content-Type: text/html
-Content-Range: bytes 300-400/1270
-
--color: #f0f0f2;
-        margin: 0;
-        padding: 0;
-        font-family: "Open Sans", "Helvetica
---3d6b6a416f9b5--
- -

Importância de definir o MIME type correto

- -

A maioria dos servidores web envia recursos de tipo desconhecido usando o tipo MIME de application/octet-stream padrão. Por razões de segurança, a maioria dos navegadores não permite definir uma ação padrão personalizada para esses recursos, forçando o usuário a armazená-lo no disco para usá-lo. Algumas configurações de servidor incorretamente exibidas ocorrem com os seguintes tipos de arquivo:

- -
    -
  • -

    Arquivos RAR-codificados. Neste caso, o ideal seria definir o verdadeiro tipo de arquivos codificados; Isso muitas vezes não é possível (como pode não ser conhecido para o servidor e esses arquivos podem conter vários recursos de tipos diferentes). Nesse caso, configure o servidor para enviar o tipo MIME application/x-rar-compressed.

    -
    • -
  • -

    Arquivos de áudio e vídeo. Somente recursos com o Tipo MIME correto serão reconhecidos e reproduzidos em elementos {{HTMLElement("video")}} ou {{HTMLElement("áudio")}}. Certifique-se de usar o tipo correto para áudio e vídeo.

    -
    • -
  • -

    Tipos de arquivos proprietários. Preste especial atenção ao servir um tipo de arquivo proprietário. Evite usar o application/octet-stream como manipulação especial não será possível: a maioria dos navegadores não permitem definir um comportamento padrão (como "Abertura no Word") para este tipo MIME genérico.

    -
    • -
- -

MIME sniffing

- -

Na ausência de um tipo MIME, ou em alguns outros casos em que um cliente acredita que estão incorrectamente definidos, os navegadores podem conduzir MIME sniffing, que está adivinhando o tipo MIME correto, olhando para o recurso. Cada navegador executa isso de forma diferente e em circunstâncias diferentes. Existem algumas preocupações de segurança com esta prática,
- Como alguns tipos MIME representam conteúdo executável e outros não. Os servidores podem bloquear MIME sniffing enviando o {{HTTPHeader("X-Content-Type-Options")}} ao longo do {{HTTPHeader("Content-Type")}}.

- -

See also

- - - -
-
-
diff --git a/files/pt-br/web/http/basics_of_http/identifying_resources_on_the_web/index.html b/files/pt-br/web/http/basics_of_http/identifying_resources_on_the_web/index.html new file mode 100644 index 0000000000..42830a10b9 --- /dev/null +++ b/files/pt-br/web/http/basics_of_http/identifying_resources_on_the_web/index.html @@ -0,0 +1,183 @@ +--- +title: Identificando recursos na web +slug: Web/HTTP/Basico_sobre_HTTP/Identifying_resources_on_the_Web +tags: + - Esquema + - HTTP + - O que é HTTP? + - Protocolo HTTP + - Sintaxe URL + - URI + - URL + - query + - resources +translation_of: Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web +--- +
{{HTTPSidebar}}
+ +

O alvo de uma requisição HTTP é chamada de "resource", ou recurso em português, com a natureza ainda não definida; Isso pode ser um documento, uma foto ou qualquer outra coisa. Cada recurso é identificado por uma Identificação de recursos uniforme, do inglês Uniform Resource Identifier ({{Glossary("URI")}}) usada pelo HTTP para identificar recursos.

+ +

A identidade e a localização de recursos na Web são fornecidas, principalmente por um único URL (Uniform Resource Locator, um tipo de URI). Pode ser que as vezes as a identidade e a localização não são dadas pelo mesmo URI: O HTTP usa um cabeçalho HTTP específico, {{HTTPHeader("Alt-Svc")}} quando o recurso solicitado quer que o cliente acesse-o de outra localização

+ +

URLs e URNs

+ +

URLs

+ +

A forma mais comum de URL é o Uniform Resource Locator ({{Glossary("URL")}}) , que é conhecido como endereço de Web.

+ +
https://developer.mozilla.org
+https://developer.mozilla.org/pt-BR/docs/Learn/
+https://developer.mozilla.org/pt-BR/search?q=URL
+ +

Qualquer um desses URLs podem ser digitado na barra de endereços do seu navegador dizendo para carregar a página associada (recurso).

+ +

Uma URL é composta por diferentes partes, algumas são estritamente necessárias e outras são opcionais. Um exemplo mais complexo seria algo como isso:

+ +
http://www.exemplo.com:80/pasta/para/meu-arquivo.html?chave1=valor1&chave2=valor2#AlgumaCoisaNoDocumento
+ +

URNs

+ +

Um Nome de Recurso Uniforme do inglês Uniform Resource Name (URN) é uma URI que identifica um recurso pelo nome em um namespace particular.

+ +
urn:isbn:9780141036144
+urn:ietf:rfc:7230
+
+ +

As duas URNs correspondem

+ +
    +
  • o livro Nineteen Eighty-Four por George Orwell,
    • +
  • a especificação 720 da IETF, Hypertext Transfer Protocol (HTTP/1.1): Sintaxe de mensagem e rotas.
    • +
+ +

Sintaxe daUniform Resource Identifiers (URIs)

+ +

Esquema ou protocolo

+ +
+
Protocol
+
http:// é o protocolo. Ele indica qual é o protocolo que o navegador irá usar. Usualmente o protocolo é o HTTP, ou sua versão segura, HTTPS. A Web requer um desses dois, mas os navegadores tambem sabem como lidar com outros protocolos como o mailto: (para abrir um cliente de email) ou o ftp: para fazer uma transferêcia de arquivo, então não fique surpreso se ver alguns desses protocolos. Esquemas comuns são:
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EsquemaDescrição
dataURI de dados
fileNomes de arquivos específicos do host
ftpProtocolo de transferência de arquivo
http/httpsHyper text transfer protocol (Secure)
mailtoEndereço de correio eletrônico (e-mail)
sshSecure shell
teltelefone
urnUniform Resource Names
view-sourceCódigo fonte de um recurso
ws/wssConecções de WebSocket (Encriptadas)
+ +

Autoridade

+ +
+
Domaine Name
+
www.example.com é o nome de domínio ou autoridade que governa o namespace. Ele indica qual servidor web será solicitado. Alternativamente, é possível utilizar um {{Glossary("IP address")}}, mas isso pode ser menos conveniente e não é muito utilizado na Web.
+
+ +

Porta

+ +
+
Port
+
:80 é a porta nesta instância . Ela indica qual é o "portão" técnico usado para acessar os recursos no servidor web. Usualmente ela é omitida se o servidor web utiliza a porta padrão do protocolo HTTP (80 para HTTP e 443 para HTTPS) para garantir o acesso aos recursos. Do contrário, ela se torna obrigatória.
+
+ +

Caminhos

+ +
+
Path to the file
+
/path/to/myfile.html é o caminho para o recurso no servidor Web. Nos primeiros dias da Web, um caminho era representado pelo caminho físico correspondente no servidor web. Hoje em dia isso é mais uma abstração  tratada pelos servidores Web não sendo necessariamente o endereço físico do arquivo em questão.
+
+ +

Query / Parâmetros

+ +
+
Parameters
+
?key1=value1&key2=value2 são parâmetros extras fornecidos ao servidor Web. Eles são uma lista de pares chaves/valores separados com o símbolo &  O servidor web pode usar esses parametros para fazer coisas extras depois retornando o recurso para o usuário. Cada servidor web tem suas regras em relação aos parâmetros, e o unico jeito confiável de saber como um servidor Web especifico trata os parâmetros é perguntando o dono do servidor.
+
+ +

Fragmentos

+ +
+
Anchor
+
#SomewhereInTheDocument é uma âncora para outra parte do próprio recurso. Uma âncora representa uma espécie de "marcador" dentro do recurso, dando ao navegador as instruções para mostrar o conteúdo localizado naquele ponto "marcado". Em um documento HTML, por exemplo, o navegador erá dar scroll para a ancora em um ponto definido; em um vídeo ou audio, o navegor erá tentar ir para o tempo que a âncora representa. Vale ressaltar que a parte após o #, também conhecido como identificador de fragmento, nunca é enviado ao servidor com o pedido. 
+
+ +

Notas de uso

+ +

Ao usar URLs em conteúdo {{Glossary("HTML")}} em geral se deve usar apenas alguns desses esquemas URL. Apenas os esquemas HTTP e HTTPS devem ser usados quando se faz referência a subrecursos — isto é, arquivos carregados como parte de um documento maior. Por razões de segurança, os navegadores estão reduzindo cada vez mais o suporte a FTP para o carregamento de subrecursos.

+ +

FTP ainda é aceito em alguns casos específicos de acesso direto, como quando a URL é digitada diretamente na barra do navegador ou como o alvo em um link, ainda que alguns navegadores possam delegar o carregamento do conteúdo FTP para outra aplicação.

+ +

Exemplos

+ +
https://developer.mozilla.org/en-US/docs/Learn
+tel:+1-816-555-1212
+git@github.com:mdn/browser-compat-data.git
+ftp://example.org/resource.txt
+urn:isbn:9780141036144
+
+ +

Especificações

+ + + + + + + + + + + + +
SpecificationTitle
{{RFC("7230", "Uniform Resource Identifiers", "2.7")}}Hypertext Transfer Protocol (HTTP/1.1): Message Syntax and Routing
+ +

Veja também

+ + diff --git a/files/pt-br/web/http/basics_of_http/index.html b/files/pt-br/web/http/basics_of_http/index.html new file mode 100644 index 0000000000..a89b456f12 --- /dev/null +++ b/files/pt-br/web/http/basics_of_http/index.html @@ -0,0 +1,61 @@ +--- +title: Básico sobre HTTP +slug: Web/HTTP/Basico_sobre_HTTP +translation_of: Web/HTTP/Basics_of_HTTP +--- +
{{HTTPSidebar}}
+ +

HTTP é um protocolo bem extensivo. Isso depende um pouco do conceito básico com noção de recursos e URIs, uma simples estrutura de mensagens, e uma estrutura de cliente-servidor para a comunicação ocorrer. Em cima destes conceitos básicos, várias versões surgiram ao longo do tempo, adicionando novas funcionalidades e novas semanticas para criar novos métodos HTTP ou cabeçalhos.

+ +

Artigos

+ +
+
Visão geral sobre HTTP
+
+

Descreve o que é HTTP e quais as regras para arquitetura Web, sua posição na lista de protocolos.

+
+
Evolução do HTTP
+
+

HTTP foi criada no inicio dos anos 1990 e vem evolindo ao longo do tempo. Esse artigo passa por sua história e descreve HTTP/0.9, HTTP/1.0, HTTP/1.1, e o moderno HTTP/2 bem como pequenas novidades adicionadas ao longo de seus anos.

+
+
Negociação entre versões HTTP
+
+

Explicações de como um cliente e um servidor conseguem negociar em uma versão expecífica do HTTP e enventuais atualizaçõs nos protocolos usados;

+
+
Recursos e URIs
+
+

Uma breve introdução sobre noção de recursos, identicadores e localizações na Web.

+
+
Identificando recursos na Web
+
Descreve como os recursos Web são referênciados e como encontrar eles.
+
Data URIs
+
+

Um tipo especifico de URIs que incorpora diretamente os recursos apresentados, Data URIs são muito convenientes, mas tem algumas ressalvas

+
+
Separando identidades e localização de recursos: O cabeçalho Alt-Svc HTTP
+
Na maioria das vezes, a indentidade ea localização de um recurso da Web são compartilhados, isso pode ser mudado com no cabeçalho {{HTTPHeader("Alt-Svc")}}.
+
MIME types
+
Desde HTTP/1.0, diferentes tipos de conteúdos poderam ser transmitidos. Esse artigo explica como funciona usando o {cabeçalho {HTTPHeader("Content-Type")}} e o MIME standard.
+
Escolhendo entre URLs www e sem-www
+
+

Ajuda de como usar o prefixo www no domínio ou não, esse artigo fala as consequencias da escolhe e também como fazer isso.

+
+
Fluxo de sessões HTTP
+
+

Esse artigo fundamente descreve uma típica sessão HTTP: o que acontece por trás do do navegador quando você clica em um link.

+
+
Mensagens HTTP
+
+

Mensagens HTTP transmitidas durante o pedido ou resposta tem uma clara estrutura; isso introduz descrição sobre essas estrutura no artigo, seus proprósitos e suas possibilidades.

+
+
Quadro e estrutura de mensagens no HTTP/2
+
+

HTTP/2 junta e representa mensagens do HTTP/1.x em um quadro binário. Esse artigo explica a estrutura do quadro, sua finalidade ea maneira como ele é codificado.

+
+
Gerenciamento de conexão no HTTP/1.x
+
HTTP/1.1 foi a primeira versão do HTTP a suportar conexão constante e canalizar elas. Esse artigo explica sobre estes dois conceitos.
+
Gerenciamento de conexão no HTTP/2
+
HTTP/2 Revisitou completamente como as conexões são criadas e mantidas: esse artigo explica como os quadros HTTP permitem multiplexação e resolver o bloco 'head-of-line' bloqueio das versões anteirores do HTTP.
+
Conteúdo da negociação
+
HTTP introduz um conjunto de cabeçalhos, começando com Accept- como o meio que o navegador anuncia o formato, linguagem, ou a codificação é preferida. Esse artigo explica como esse anuncio acontece, como o servidor é esperado para reagir e como será escolhido a melhor resposta.
+
diff --git a/files/pt-br/web/http/basics_of_http/mime_types/common_types/index.html b/files/pt-br/web/http/basics_of_http/mime_types/common_types/index.html new file mode 100644 index 0000000000..d8f2b6898d --- /dev/null +++ b/files/pt-br/web/http/basics_of_http/mime_types/common_types/index.html @@ -0,0 +1,336 @@ +--- +title: Lista Incompleta de tipos MIME +slug: Web/HTTP/Basico_sobre_HTTP/MIME_types/Complete_list_of_MIME_types +tags: + - Extensões HTTP + - Tipos MIME +translation_of: Web/HTTP/Basics_of_HTTP/MIME_types/Common_types +--- +
{{HTTPSidebar}}
+ +

Abaixo uma lista de tipos de MIME, associadas por tipos de documentos, ordenados por suas extensões comuns.

+ +


+ Há dois tipo MIME que são importantes para tipos padrões:

+ +
    +
  • text/plain é o tipo padrão para arquivos de texto. Um arquivo de texto deve ser legível para um ser humano, e não deve conter dados binários.
    • +
  • application/octet-stream  É um tipo padrão para todos outros casos. Um tipo de arquivo desconhecido deveria usar este tipo. Navegadores tomarão mais cuidado ao manipular esses arquivos, tentando proteger o usuário e prevenir comportamentos perigosos.
    • +
+ +

IANA é o registrador official de tipos de mídia MIME e mantém uma lista de todos tipos oficiais de MIME.  Esta tabela lista alguns tipos de MIME importantes para a Web.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ExtensãoTipo do documentoTipo MIME
.aacArquivo de audio AACaudio/aac
.abwDocumento AbiWordapplication/x-abiword
.arcArchive document (multiple files embedded)application/octet-stream
.aviArquivo de audio e vídeo  Intercalar AVIvideo/x-msvideo
.azwFormato eBook do Amazon Kindleapplication/vnd.amazon.ebook
.binQualquer tipo de dados bináriosapplication/octet-stream
.bzArquivo compactado  BZipapplication/x-bzip
.bz2Arquivo compactado  BZip2application/x-bzip2
.cshC-Shell scriptapplication/x-csh
.cssCascading Style Sheets (CSS)text/css
.csvComma-separated values (CSV)text/csv
.docMicrosoft Wordapplication/msword
.eotMS Embedded OpenType fontsapplication/vnd.ms-fontobject
.epubElectronic publication (EPUB)application/epub+zip
.gifGraphics Interchange Format (GIF)image/gif
.htm
+ .html		HyperText Markup Language (HTML)text/html
.icoIcon formatimage/x-icon
.icsiCalendar formattext/calendar
.jarJava Archive (JAR)application/java-archive
.jpeg
+ .jpg		JPEG imagesimage/jpeg
.jsJavaScript (ECMAScript)application/javascript
.jsonJSON formatapplication/json
.mid
+ .midi		Musical Instrument Digital Interface (MIDI)audio/midi
.mpegMPEG Videovideo/mpeg
.mpkgApple Installer Packageapplication/vnd.apple.installer+xml
.odpOpenDocument presentation documentapplication/vnd.oasis.opendocument.presentation
.odsOpenDocument spreadsheet documentapplication/vnd.oasis.opendocument.spreadsheet
.odtOpenDocument text documentapplication/vnd.oasis.opendocument.text
.ogaOGG audioaudio/ogg
.ogvOGG videovideo/ogg
.ogxOGGapplication/ogg
.otfOpenType fontfont/otf
.pngPortable Network Graphicsimage/png
.pdfAdobe Portable Document Format (PDF)application/pdf
.pptMicrosoft PowerPointapplication/vnd.ms-powerpoint
.rarRAR archiveapplication/x-rar-compressed
.rtfRich Text Format (RTF)application/rtf
.shBourne shell scriptapplication/x-sh
.svgScalable Vector Graphics (SVG)image/svg+xml
.swfSmall web format (SWF) or Adobe Flash documentapplication/x-shockwave-flash
.tarTape Archive (TAR)application/x-tar
.tif
+ .tiff		Tagged Image File Format (TIFF)image/tiff
.tsTypescript fileapplication/typescript
.ttfTrueType Fontfont/ttf
.vsdMicrosoft Visioapplication/vnd.visio
.wavWaveform Audio Formataudio/x-wav
.webaWEBM audioaudio/webm
.webmWEBM videovideo/webm
.webpWEBP imageimage/webp
.woffWeb Open Font Format (WOFF)font/woff
.woff2Web Open Font Format (WOFF)font/woff2
.xhtmlXHTMLapplication/xhtml+xml
.xls
+ .xlsx		Microsoft Excelapplication/vnd.ms-excel
+ application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
.xmlXMLapplication/xml
.xulXULapplication/vnd.mozilla.xul+xml
.zipZIP archiveapplication/zip
.3gp3GPP audio/video containervideo/3gpp
+ audio/3gpp if it doesn't contain video
.3g23GPP2 audio/video containervideo/3gpp2
+ audio/3gpp2 if it doesn't contain video
.7z7-zip archiveapplication/x-7z-compressed
diff --git a/files/pt-br/web/http/basics_of_http/mime_types/index.html b/files/pt-br/web/http/basics_of_http/mime_types/index.html new file mode 100644 index 0000000000..3acce2553a --- /dev/null +++ b/files/pt-br/web/http/basics_of_http/mime_types/index.html @@ -0,0 +1,314 @@ +--- +title: MIME types +slug: Web/HTTP/Basico_sobre_HTTP/MIME_types +translation_of: Web/HTTP/Basics_of_HTTP/MIME_types +--- +
{{HTTPSidebar}}
+ +

O MIME type é o mecanismo para dizer ao cliente a variedade de documentos transmitidos: a extensão de um nome de arquivo não tem significado na web. Portanto, é importante que o servidor esteja configurado corretamente, de modo que o MIME-type correto seja transmitido com cada documento. Os navegadores costumam usar o MIME-type para determinar qual ação usar como padrão para fazer quando um recurso é obtido.

+ +

Existem muitos tipos de documentos, por isso há muitos MIME-types. Neste artigo, listaremos os mais importantes para o desenvolvimento da Web, mas você pode encontrá-los para os tipos de documento aplicáveis ​​neste artigo dedicado: Lista completa de MIME types.

+ +

MIME types não são a única maneira de transmitir as informações do tipo de documento:

+ +
    +
  • Os sufixos de nome são usados ​​às vezes, especialmente em sistemas Microsoft Windows. Nem todos os sistemas operacionais consideram esses sufixos significativos (especialmente Linux e Mac OS), e como um tipo MIME externo, não há garantia de que eles estejam corretos.
    • +
  • Números mágicos. A sintaxe dos diferentes tipos de arquivos permite a inferência de tipo de arquivo, olhando para a estrutura. Por exemplo. Cada arquivo GIF começa com o valor hexadecimal 47 49 46 38 [GIF89] ou arquivos PNG com 89 50 4E 47 [.PNG]. Nem todos os tipos de arquivos têm números mágicos, portanto este não é um sistema 100% confiável.
    • +
+ +

Na Web, apenas o MIME type é relevante e deve ser definido com cuidado. Navegadores e servidores usavam frequentemente heurísticas baseadas em sufixos ou números mágicos para definir o tipo MIME, verificar a coerência ou encontrar o tipo MIME correto quando apenas um tipo genérico foi fornecido.

+ +

Sintaxe

+ +

Estrutura geral

+ +
tipo/subtipo
+ +

A estrutura de um MIME type é muito simples; Consiste de um tipo e um subtipo, duas strings, separados por um '/'. Nenhum espaço é permitido. O tipo representa a categoria e pode ser um tipo discreto ou multipart. O subtipo é específico para cada tipo.

+ +

Um MIME type é case-insensitive mas tradicionalmente é escrito tudo em minúsculas.

+ +

Tipos discretos

+ +
text/plain
+text/html
+image/jpeg
+image/png
+audio/mpeg
+audio/ogg
+audio/*
+video/mp4
+application/octet-stream
+…
+ +

Tipos discretos indicam a categoria do documento, ele pode ser um dos seguintes:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TipoDescriçãoExemplos de subtipos típicos
textRepresenta qualquer documento que contenha texto e é teoricamente legivel para o ser humano.text/plain, text/html, text/css, text/javascript
imageRepresenta qualquer tipo de imagens. Os vídeos não estão incluídos, embora imagens animadas (como gif animado) sejam descritas com um tipo de imagem.image/gif, image/png, image/jpeg, image/bmp, image/webp
audioRepresenta qualquer tipo de arquivo de audioaudio/midi, audio/mpeg, audio/webm, audio/ogg, audio/wav
videoRepresenta qualquer tipo de arquivo de videovideo/webm, video/ogg
applicationRepresenta qualquer tipo de dados binários.application/octet-stream, application/pkcs12, application/vnd.mspowerpoint, application/xhtml+xml, application/xml,  application/pdf
+ +

Para documentos de texto sem um subtipo especifico, text/plain deverá ser usado. Assim como, para documentos binários sem subtipo especifico ou conhecido, application/octet-stream deverá ser usado.

+ +

Tipos de multipart

+ +
multipart/form-data
+multipart/byteranges
+ +

Multipart types indicam uma categoria de documento que são quebrados em partes distintas, muitas vezes com diferentes tipos MIME. É uma maneira de representar um documento composto. Com exceção de multipart/form-data, que são usados ​​em relação de formularios HTML e metodo {{HTTPMethod("POST")}}, e multipart/byteranges que são usados em conjunto com {{HTTPStatus("206")}} Mensagem de status de conteúdo parcial para enviar apenas um subconjunto de um documento inteiro, o HTTP não manipula documentos de várias partes de uma maneira específica: a mensagem é simplesmente transmitida ao navegador (o que provavelmente irá propor uma janela Salvar como, sem saber como exibir o documento).

+ +

Importantes MIME types para desenvolvedores Web

+ +

application/octet-stream

+ +

Este é o valor padrão para um arquivo binario. Como é um arquivo binário desconhecido, os navegadores geralmente não irá executá-lo automaticamente, ou irá perguntar se ele deve ser executado. Eles tratam-na como se o cabeçalho {{HTTPHeader("Content-Disposition")}} fosse definido com o anexo de valor e propusessem um "Salvar como".

+ +

text/plain

+ +

Este é o valor padrão para arquivos de texto. Mesmo se realmente significa arquivo textual desconhecido, os navegadores assumem que eles podem exibi-lo.

+ +
+

Note que text/plain não significa qualquer tipo de dados textuais. Se eles esperam um tipo específico de dados textuais, eles provavelmente não consideram uma correspondência. Especificamente se eles baixarem um arquivo text/plain de um elemento {{HTMLElement ("link")}} declarando arquivos CSS, eles não o reconhecerão como arquivos CSS válidos se forem apresentados com text/plain.
+ O CSS mime tipo text/css deve ser usado.

+
+ +

text/css

+ +

Quaisquer arquivos CSS que têm de ser interpretados como tal em uma página da Web devem ser dos arquivos de text/css. Muitas vezes os servidores não reconhecem arquivos com o sufixo .css como arquivos CSS, em vez disso, enviam-nos com o tipo MIME de text/plain ou application/octet-stream: nesses casos, eles não serão reconhecidos como arquivos CSS pela maioria dos navegadores e serão silenciosamente ignorados.
+ Atenção especial tem de ser paga para servir arquivos CSS com o tipo correto.

+ +

text/html

+ +

Todo o conteúdo HTML deve ser exibido com este tipo. Tipos MIME alternativos para XHTML (como application/xml+html) são em sua maioria inúteis hoje em dia (HTML5 unificou esses formatos).

+ +

Images types

+ +

Apenas um punhado de tipos de imagem são amplamente reconhecidos e são considerados seguros na Web, prontos para uso em uma página da Web:

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
MIME typeImage type
image/gifGIF images (Compressão sem perdas, substituído por PNG)
image/jpegJPEG images
image/pngPNG images
image/svg+xmlSVG images (vector images)
+ +

Há uma discussão para adicionar WebP (image / webp) a esta lista, mas como cada novo tipo de imagem irá aumentar o tamanho de um codebase, isso pode introduzir novos problemas de segurança, então os fornecedores de navegador são cautelosos em aceitá-lo.

+ +

Outros tipos de imagens podem ser encontrados em documentos da Web. Por exemplo, muitos navegadores suportam tipos de imagem de ícones para favicons ou similares.
+ Em particular, as imagens do ICO são suportadas neste contexto com o tipo MIME image/x-icon.

+ +

Audio and video types

+ +

Como as imagens, o HTML não define um conjunto de tipos suportados para usar com os elementos {{HTMLElement("audio")}} e {{HTMLElement("video")}} , de modo que apenas um grupo relativamente pequeno deles pode ser Usado na Web. Os formatos de mídia suportados pelos elementos de áudio e vídeo em HTML explicam os codecs e formatos de contêiner que podem ser usados.
+
+ O tipo MIME de tais arquivos principalmente representam os formatos de contêiner e os mais comuns em um contexto da Web são:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MIME typeAudio or video type
audio/wave
+ audio/wav
+ audio/x-wav
+ audio/x-pn-wav		Um arquivo de áudio no formato de recipiente WAVE. O codec de áudio PCM (WAVE codec "1") é freqüentemente suportado, mas outros codecs têm suporte mais limitado (se houver).
audio/webmUm arquivo de áudio no formato de contêiner WebM. Vorbis e Opus são os codecs de áudio mais comuns.
video/webmUm arquivo de vídeo, possivelmente com áudio, no formato de contêiner WebM. VP8 e VP9 são os codecs video os mais comuns usados ​​dentro dele; Vorbis e Opus os codecs de áudio mais comuns.
audio/oggUm arquivo de áudio no formato de contêiner OGG. Vorbis é o codec de áudio mais comum usado em tal recipiente.
video/oggUm arquivo de vídeo, possivelmente com áudio, no formato de contêiner OGG. Theora é o codec video usual usado dentro dele; Vorbis é o codec de áudio usual.
application/oggUm arquivo de áudio ou vídeo usando o formato de contêiner OGG. Theora é o codec video usual usado dentro dele; Vorbis é o codec de áudio usual.
+ +

multipart/form-data

+ +

O tipo multipart/form-data pode ser usado ao enviar o conteúdo de um  formulario HTML preenchido do navegador para o servidor. Como um documento multipart formal, consiste em partes diferentes, delimitado por um limite (uma seqüência de caracteres começando com um traço duplo '--'). Cada parte é uma entidade por si só, com seus próprios cabeçalhos HTTP, {{HTTPHeader("Content-Disposition")}}, e {{HTTPHeader("Content-Type")}} Para os campos de upload de arquivos, e os mais comuns ({{HTTPHeader("Content-Length")}} É ignorada como a linha de limite é usada como o delimitador).

+ +
Content-Type: multipart/form-data; boundary=aBoundaryString
+(Outros cabeçalhos associados ao documento em várias partes como um todo)
+
+--aBoundaryString
+Content-Disposition: form-data; name="myFile"; filename="img.jpg"
+Content-Type: image/jpeg
+
+(dados)
+--aBoundaryString
+Content-Disposition: form-data; name="myField"
+
+(dados)
+--aBoundaryString
+(mais subpartes)
+--aBoundaryString--
+
+
+ +

O seguinte formulario:

+ +
<form action="http://localhost:8000/" method="post" enctype="multipart/form-data">
+  <input type="text" name="myTextField">
+  <input type="checkbox" name="myCheckBox">Check</input>
+  <input type="file" name="myFile">
+  <button>Send the file</button>
+</form>
+ +

Enviará esta mensagem:

+ +
POST / HTTP/1.1
+Host: localhost:8000
+User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
+Accept-Language: en-US,en;q=0.5
+Accept-Encoding: gzip, deflate
+Connection: keep-alive
+Upgrade-Insecure-Requests: 1
+Content-Type: multipart/form-data; boundary=---------------------------8721656041911415653955004498
+Content-Length: 465
+
+-----------------------------8721656041911415653955004498
+Content-Disposition: form-data; name="myTextField"
+
+Test
+-----------------------------8721656041911415653955004498
+Content-Disposition: form-data; name="myCheckBox"
+
+on
+-----------------------------8721656041911415653955004498
+Content-Disposition: form-data; name="myFile"; filename="test.txt"
+Content-Type: text/plain
+
+Simple file.
+-----------------------------8721656041911415653955004498--
+
+
+ +

multipart/byteranges

+ +

O tipo MIME multipart/byteranges é usado no contexto de enviar respostas parciais para o navegador. Quando o código de status de conteúdo parcial {{HTTPStatus("206")}} é enviado, este tipo MIME é usado para indicar que o documento é composto de várias partes, uma para cada um do intervalo solicitado. Como outros tipos de multipart, o {{HTTPHeader("Content-Type")}} usa a diretiva de limite para definir a seqüência de limites. Cada uma das diferentes partes tem um cabeçalho {{HTTPHeader("Content-Type")}} com o tipo real do documento e um {{HTTPHeader("Content-Range")}} com o intervalo que representam.

+ +
HTTP/1.1 206 Partial Content
+Accept-Ranges: bytes
+Content-Type: multipart/byteranges; boundary=3d6b6a416f9b5
+Content-Length: 385
+
+--3d6b6a416f9b5
+Content-Type: text/html
+Content-Range: bytes 100-200/1270
+
+eta http-equiv="Content-type" content="text/html; charset=utf-8" />
+    <meta name="vieport" content
+--3d6b6a416f9b5
+Content-Type: text/html
+Content-Range: bytes 300-400/1270
+
+-color: #f0f0f2;
+        margin: 0;
+        padding: 0;
+        font-family: "Open Sans", "Helvetica
+--3d6b6a416f9b5--
+ +

Importância de definir o MIME type correto

+ +

A maioria dos servidores web envia recursos de tipo desconhecido usando o tipo MIME de application/octet-stream padrão. Por razões de segurança, a maioria dos navegadores não permite definir uma ação padrão personalizada para esses recursos, forçando o usuário a armazená-lo no disco para usá-lo. Algumas configurações de servidor incorretamente exibidas ocorrem com os seguintes tipos de arquivo:

+ +
    +
  • +

    Arquivos RAR-codificados. Neste caso, o ideal seria definir o verdadeiro tipo de arquivos codificados; Isso muitas vezes não é possível (como pode não ser conhecido para o servidor e esses arquivos podem conter vários recursos de tipos diferentes). Nesse caso, configure o servidor para enviar o tipo MIME application/x-rar-compressed.

    +
    • +
  • +

    Arquivos de áudio e vídeo. Somente recursos com o Tipo MIME correto serão reconhecidos e reproduzidos em elementos {{HTMLElement("video")}} ou {{HTMLElement("áudio")}}. Certifique-se de usar o tipo correto para áudio e vídeo.

    +
    • +
  • +

    Tipos de arquivos proprietários. Preste especial atenção ao servir um tipo de arquivo proprietário. Evite usar o application/octet-stream como manipulação especial não será possível: a maioria dos navegadores não permitem definir um comportamento padrão (como "Abertura no Word") para este tipo MIME genérico.

    +
    • +
+ +

MIME sniffing

+ +

Na ausência de um tipo MIME, ou em alguns outros casos em que um cliente acredita que estão incorrectamente definidos, os navegadores podem conduzir MIME sniffing, que está adivinhando o tipo MIME correto, olhando para o recurso. Cada navegador executa isso de forma diferente e em circunstâncias diferentes. Existem algumas preocupações de segurança com esta prática,
+ Como alguns tipos MIME representam conteúdo executável e outros não. Os servidores podem bloquear MIME sniffing enviando o {{HTTPHeader("X-Content-Type-Options")}} ao longo do {{HTTPHeader("Content-Type")}}.

+ +

See also

+ + + +
+
+
diff --git a/files/pt-br/web/http/caching/index.html b/files/pt-br/web/http/caching/index.html new file mode 100644 index 0000000000..9cfd4d4a0d --- /dev/null +++ b/files/pt-br/web/http/caching/index.html @@ -0,0 +1,157 @@ +--- +title: Cacheamento HTTP +slug: Web/HTTP/HTTP +tags: + - Cache + - Cacheamento + - Guía + - HTTP + - Internet + - Rede + - Web +translation_of: Web/HTTP/Caching +--- +
{{HTTPSidebar}}
+ +

A performance de websites e aplicações podem ser melhoradas significativamente ao reusar recursos previamente buscados. Caches em web reduzem latência e o tráfego de rede e assim diminuir o tempo necesário para exibir uma representação do recurso. Ao usar caching em HTTP, websites se tornam mais responsivos.

+ +

Diferentes tipos de caches

+ +

Caching é uma técnica que guarda uma cópia de dado recurso e mostra de volta quando requisitado. Quando um web cache tem um recurso requerido em seu armazenamento, ele intercepta a solicitação e retorna sua cópia ao invés de fazer o download novamente do servidor original. Isto alcança vários objetivos: facilita o balanceamento do servidor que não precisa servir todos os clients sozinho, e melhora a performance por estar próximo do client,  por exemplo, ele leva menos tempo para transmitir o recurso de volta. Para um website, é um componente principal para alcançar alta performance. De outro lado, ele deve ser configurado devidamente pois não são todos os recursos que ficam idênticos para sempre: é importante colocar um recurso em cache somente até que ele mude, não mais que isso. 

+ +

Há muitos tipos de caches: estes podem ser agrupados em duas categorias principais, caches privados ou compartilhados. Um cache compartilhado é um cache que armazena respostas para serem reusadas por mais de um usuário. Um cache privado é dedicado a um único usuário. Esta página irá falar principalmente sobre caches em navegadores e em proxy, mas há também caches de gateway, CDN, cache de proxy reverso e balanceadores de carga (load balancers) que são implantados em servers da web para melhor confiabilidade, desempenho e dimensionamento de sites e aplicativos da web.

+ +

What a cache provide, advantages/disadvantages of shared/private caches.

+ +

Caches privados de browser

+ +

Um cache privado é dedicado para um único usuário. Você já pode ter visto "caching" nas configurações de seu navegador. Um cache de browser guarda todos os documentos que foram baixados via HTTP pelo usuário. Este cache é usado para tornar disponíveis documentos visitados para navegação "para frente e para trás" (ou back/forward, em Inglês), salvar, ver como fonte, etc. sem exigir uma viagem para o servidor. Também melhora a navegação offline de conteúdo em cache.

+ +

Caches de proxy compartilhada

+ +

Uma cache compartilhada é uma cache que armazena respostas para serem reusadas por mais de um usuário. Por exemplo, um fornecedor de acesso à internet ou sua empresa pode ter definido uma web proxy como parte de sua infraestrutura de rede local para servir muitos usuários para que recursos populares sejam reusados numerosas vezes, reduzindo o tráfego de rede e latência.

+ +

Alvos de operações de cache

+ +

Fazer cache de HTTP é opcional, mas reusar um recurso em cache é usualmente desejável. No entanto, caches HTTP comuns são tipicamente limitados a respostas em cache para {{HTTPMethod("GET")}} e podem declinar outros métodos. As chaves primárias de cache consistem de um método de requisição e um alvo URI (como requisições são alvos de cache, muitas vezes somente o URI é usado). Formas comuns de entrada de cache são:

+ +
    +
  • Resultados bem sucedidos de uma requisição: uma resposta {{HTTPStatus(200)}} (OK) para uma requisição {{HTTPMethod("GET")}} contendo recursos como documentos HTML, imagens ou arquivos.
    • +
  • Redirecionamentos permanentes: uma resposta {{HTTPStatus(301)}} (Moved Permanently).
    • +
  • Respostas de erro: um resultado {{HTTPStatus(404)}} (Not Found).
    • +
  • Resultados incompletos: uma resposta {{HTTPStatus(206)}} (Partial Content).
    • +
  • Outras respostas que não sejam {{HTTPMethod("GET")}} se algo mais adequado para uso como chave de cache é definido.
    • +
+ +

Uma entrada de cache pode também consistir de múltiplas respostas armazenadas diferenciadas por uma chave secundária, se a requisição é alvo de negociação de conteúdo. Para mais detalhes veja a informação sobre o cabeçalho {{HTTPHeader("Vary")}} abaixo.

+ +

Controlando cache

+ +

O cabeçalho Cache-control

+ +

O cabeçalho-geral {{HTTPHeader("Cache-Control")}} HTTP/1.1 é usado para especificar diretivas para mecanismos de cache em ambas requisições e respostas. Use este cabeçalho para definir suas políticas de cache com a variedade de diretivas que fornece.

+ +

Não usar armazenamento de cache

+ +

O cache não deve armazenar nada sobre a requisição do cliente ou a resposta do servidor. Uma requisição é enviada ao servidor e uma resposta completa é baixada por cada e toda vez.

+ +
Cache-Control: no-store
+Cache-Control: no-cache, no-store, must-revalidate
+
+ +

Sem fazer cache

+ +

Um cache irá enviar a requisição ao servidor de origem para validação antes de liberar uma cópia em cache. 

+ +
Cache-Control: no-cache
+ +

Caches privados e públicos

+ +

A diretiva "public" indica que a resposta pode ser colocada em cache por qualquer cache. Isto pode ser útil, se páginas com autenticação HTTP ou códigos de status de resposta que não são normalmente colocadas em cache, devem agora ser colocadas. Por outro lado, "private" indica que a resposta é para um único usuário somente e não deve ser armazenada por um cache compartilhado. Um cache privado de navegador pode armazenar a resposta neste caso.

+ +
Cache-Control: private
+Cache-Control: public
+
+ +

Data de validade

+ +

A diretiva mais importante aqui é "max-age=<seconds>" que é a quantidade máxima de tempo que um recurso será considerado "fresco". Contrário ao {{HTTPHeader("Expires")}}, esta diretiva é relativa ao tempo da requisição. Para os arquivos na aplicação que não irão mudar, você pode normalmente adicionar cache agressivamente. Isto inclui arquivos estáticos como imagens, arquivos CSS e Javascript, por exemplo.

+ +

Para mais detalhes, veja também a seção Tempo de Vida abaixo.

+ +
Cache-Control: max-age=31536000
+ +

Validação

+ +

Quando usamos a diretiva "must-revalidate", o cache deve verificar o status dos recursos obsoletos antes de os usar e os expirados não deverão ser usados. Para mais detalhes, veja a seção Validation abaixo.

+ +
Cache-Control: must-revalidate
+ +

O header Pragma

+ +

{{HTTPHeader("Pragma")}} é um header HTTP/1.0, não é especificado para respostas HTTP e não é, assim, uma reposição confiável para o cabeçalho geral HTTP/1.1 Cache-Control, apesar de se comportar da mesma forma que Cache-Control: no-cache, se o campo do cabeçalho Cache-Control é omitido em uma requisição.Use Pragma somente para compatibilidade com clients HTTP/1.0 mais antigos

+ +

Tempo de Vida

+ +

Quando um recurso é armazenado em um cache, ele poderia teoricamente ser servido para sempre. Caches possuem armazenamento finito então itens são periodicamente removidos do armazenamento. Esse processo é chamado de despejo de cache. Por outro lado, alguns recursos podem mudar no servidor fazendo com que o cache fique desatualizado. Como o HTTP é um protocolo cliente-servidor, os servidores não podem contatar caches e clientes quando um recurso é alterado; eles precisam comunicar um tempo de expiração para o recurso. Antes deste período de expiração, o recurso é novo; após o tempo de expiração, o recurso é obsoleto. Os algoritmos de despejo geralmente privilegiam recursos novos em vez de recursos obsoletos. Observe que um recurso obsoleto não é despejado ou ignorado; quando o cache recebe uma solicitação para um recurso obsoleto, ele encaminha essa solicitação com um {{HTTPHeader ("If-None-Match")}} para verificar se, de fato, ainda está fresco. Em caso afirmativo, o servidor retorna um cabeçalho {{HTTPStatus ("304")}} (Não modificado) sem enviar o corpo do recurso solicitado, economizando alguma largura de banda.

+ +

Here is an example of this process with a shared cache proxy:

+ +

Show how a proxy cache acts when a doc is not cache, in the cache and fresh, in the cache and stale.

+ +

O tempo de Vida é calculado beaseado em vários headers. Se o "Cache-control: max-age=N" header é especificado, então o tempo de vida é igual a N. Se este header não está presente, o que ocorre com frequência, ele checa se um {{HTTPHeader("Expires")}} heade está presente. Se um Expires header existe, então é o valor menos o valor do {{HTTPHeader("Date")}} header determina o tempo de vida. Finalmente, se nenhum header está presente, procure pelo {{HTTPHeader("Last-Modified")}} header. Se este header está presente, então o tempo de vidaé igual ao valor do  Date header menos o valor do Last-modified header dividido por 10.
+ O valor de expiração é computado por:

+ +
expirationTime = responseTime + freshnessLifetime - currentAge
+
+ +

No qual responseTimeé o tempo em que a resposta é recebida de acordo com o navegador.

+ +

Revved resources

+ +

The more we use cached resources, the better the responsiveness and the performance of a Web site will be. To optimize this, good practices recommend to set expiration times as far in the future as possible. This is possible on resources that are regularly updated, or often, but is problematic for resources that are rarely and infrequently updated. They are the resources that would benefit the most from caching resources, yet this makes them very difficult to update. This is typical of the technical resources included and linked from each Web pages: JavaScript and CSS files change infrequently, but when they change you want them to be updated quickly.

+ +

Web developers invented a technique that Steve Souders called revving[1]. Infrequently updated files are named in specific way: in their URL, usually in the filename, a revision (or version) number is added. That way each new revision of this resource is considered as a resource on its own that never changes and that can have an expiration time very far in the future, usually one year or even more. In order to have the new versions, all the links to them must be changed, that is the drawback of this method: additional complexity that is usually taken care of by the tool chain used by Web developers. When the infrequently variable resources change they induce an additional change to often variable resources. When these are read, the new versions of the others are also read.

+ +

This technique has an additional benefit: updating two cached resources at the same time will not lead to the situation where the out-dated version of one resource is used in combination with the new version of the other one. This is very important when web sites have CSS stylesheets or JS scripts that have mutual dependencies, i.e., they depend on each other because they refer to the same HTML elements.

+ +

+ +

The revision version added to revved resources doesn't need to be a classical revision string like 1.1.3, or even a monotonously growing suite of number. It can be anything that prevent collisions, like a hash or a date.

+ +

Cache validation

+ +

Revalidation is triggered when the user presses the reload button. It is also triggered under normal browsing if the cached response includes the "Cache-control: must-revalidate" header. Another factor is the cache validation preferences in the Advanced->Cache preferences panel. There is an option to force a validation each time a document is loaded.

+ +

When a cached document's expiration time has been reached, it is either validated or fetched again. Validation can only occur if the server provided either a strong validator or a weak validator.

+ +

ETags

+ +

The {{HTTPHeader("ETag")}} response header is an opaque-to-the-useragent value that can be used as a strong validator. That means that a HTTP user-agent, such as the browser, does not know what this string represents and can't predict what its value would be. If the ETag header was part of the response for a resource, the client can issue an {{HTTPHeader("If-None-Match")}} in the header of future requests – in order to validate the cached resource.

+ +

The {{HTTPHeader("Last-Modified")}} response header can be used as a weak validator. It is considered weak because it only has 1-second resolution. If the Last-Modified header is present in a response, then the client can issue an {{HTTPHeader("If-Modified-Since")}} request header to validate the cached document.

+ +

When a validation request is made, the server can either ignore the validation request and response with a normal {{HTTPStatus(200)}} OK, or it can return {{HTTPStatus(304)}} Not Modified (with an empty body) to instruct the browser to use its cached copy. The latter response can also include headers that update the expiration time of the cached document.

+ +

Varying responses

+ +

The {{HTTPHeader("Vary")}} HTTP response header determines how to match future request headers to decide whether a cached response can be used rather than requesting a fresh one from the origin server.

+ +

When a cache receives a request that can be satisfied by a cached response that has a Vary header field, it must not use that cached response unless all header fields as nominated by the Vary header match in both the original (cached) request and the new request.

+ +

The Vary header leads cache to use more HTTP headers as key for the cache.

+ +

This can be useful for serving content dynamically, for example. When using the Vary: User-Agent header, caching servers should consider the user agent when deciding whether to serve the page from cache. If you are serving different content to mobile users, it can help you to avoid that a cache may mistakenly serve a desktop version of your site to your mobile users. In addition, it can help Google and other search engines to discover the mobile version of a page, and might also tell them that no Cloaking is intended.

+ +
Vary: User-Agent
+ +

Because the {{HTTPHeader("User-Agent")}} header value is different ("varies") for mobile and desktop clients, caches will not be used to serve mobile content mistakenly to desktop users or vice versa.

+ +

See also

+ + diff --git a/files/pt-br/web/http/compression/index.html b/files/pt-br/web/http/compression/index.html new file mode 100644 index 0000000000..a1f16b762f --- /dev/null +++ b/files/pt-br/web/http/compression/index.html @@ -0,0 +1,72 @@ +--- +title: Compressão em HTTP +slug: Web/HTTP/Compressão +tags: + - Guía + - HTTP + - compressão +translation_of: Web/HTTP/Compression +--- +
{{HTTPSidebar}}
+ +

A Compressão é uma forma importante de aumentar o desempenho de um Web site. Para alguns documentos, a redução de tamanho de até 70% diminui a necessidade de capacidade de largura de banda. Com o passar dos anos, os algoritmos também ficaram mais eficientes e novos têm recebido suporte por clientes e servidores.

+ +

Na prática, os desenvolvedores web não precisam implementar mecanismos de compressão de dados, pois ambos os navegadores e servidores já possuem tais mecanismos implementados. Porém, é preciso ter certeza de que o servidor esteja configurado adequadamente. A compressão acontece em três níveis distintos:

+ +
    +
  • primeiramente, alguns formatos de arquivo são comprimidos com métodos otimizados específicos,
    • +
  • então a criptografia ocorre no nível HTTP (o recurso é transmitido comprimido de ponta a ponta),
    • +
  • e finalmente a compressão pode ser definida no nível da conexão, entre dois nós de uma conexão HTTP.
    • +
+ +

Compressão de formato de arquivo

+ +

Cada tipo de dado tem alguma redundância, ou seja, espaço desperdiçado. Se um texto pode geralmente apresentar até 60% de redundância, essa taxa pode ser muito maior para outras mídias, como áudio e vídeo. Ao contrário do texto, esses outros tipos de mídia ocupam muito espaço de armazenamento, sendo que a necessidade de recuperar esse espaço desperdiçado apareceu muito cedo. Engenheiros projetaram o algoritmo de compressão otimizada usada por formatos de arquivo para esse fim específico. Os algoritmos de compressão usados para arquivos podem ser agrupados em duas grandes categorias:

+ +
    +
  • Compressão sem perdas (do inglês Loss-less compression), em que o ciclo de compressão-descompressão não altera os dados recuperados. Corresponde byte a byte com o original. Para imagens, gif e png usam a compressão sem perdas.
    • +
  • Compressão com perdas (do inglês Lossy compression), onde o ciclo altera os dados originais, de forma imperceptível para o usuário.
    + Formatos de vídeo na Web utilizam compressão com perdas, assim como o formato  jpeg para imagens.
    • +
+ +

Alguns formatos podem ser usados para a compressão com ou sem perdas, como o webp. Geralmente, o algoritmo de compressão com perdas pode ser configurado para comprimir mais ou menos, resultando em uma qualidade menor ou maior.

+ +

Para o melhor desempenho de um site, é ideal comprimir o máximo possível, mantendo um nível aceitável de qualidade. Para imagens, uma imagem gerada por uma ferramenta pode não ser otimizada o suficiente para a Web. Recomenda-se portanto o uso de ferramentas que comprimirão o máximo possível com uma certa qualidade exigida. Existem inúmeras ferramentas especializadas para isso.

+ +

Algoritmos de compressão com perdas geralmente são mais eficientes que os sem perdas.

+ +
+

Como a compressão funciona melhor em tipos específicos de arquivos, ela geralmente não fornece nada mais ao comprimir o mesmo arquivo uma segunda vez. Na verdade, isso geralmente é contraproducente, pois o custo da sobrecarga (algoritmos geralmente precisam de um dicionário que some ao tamanho inicial) pode ser maior do que o ganho extra na compressão, resultando em um arquivo maior. Não use as duas técnicas a seguir para arquivos em um formato comprimido.

+
+ +

Compressão de ponta a ponta

+ +

Para compressão, a compressão de ponta a ponta é onde residem as maiores melhorias de desempenho dos sites. Compressão de ponta a ponta refere-se a uma compressão do corpo de uma mensagem que é realizada pelo servidor e permanecerá inalterada até atingir o cliente. Quaisquer que sejam os nós intermediários, eles deixam o corpo intacto.

+ +

 

+ +

+ +

Todos os navegadores e servidores modernos suportam a compressão, bastante somente negociar o algoritmo a ser usado. Esses algoritmos são otimizados para texto. Nos anos 90, a tecnologia de compressão avançava a um ritmo acelerado e numerosos algoritmos sucessivos foram adicionados ao conjunto de escolhas possíveis. Hoje em dia, apenas dois são relevantes: o gzip, o mais comum, e br o novo desafiante.

+ +

Para selecionar o algoritmo a ser usado, os navegadores e servidores usam a negociação proativa de conteúdo. O navegador envia um cabeçalho {{HTTPHeader("Accept-Encoding")}} com o algoritmo que ele suporta e sua ordem de precedência. O servidor escolhe um, usa-o para comprimir o corpo da resposta e usa o {{HTTPHeader("Content-Encoding")}} para informar ao navegador o algoritmo escolhido. Como a negociação de conteúdo foi usada para escolher uma representação baseada em sua codificação, o servidor deve enviar um cabeçalho {{HTTPHeader("Vary")}} contendo pelo menos {{HTTPHeader("Accept-Encoding")}} ao lado do cabeçalho na resposta. Dessa forma, os caches poderão armazenar em cache as diferentes representações do recurso.

+ +

+ +

Como a copressão de dados traz melhorias significativas no desempenho, recomenda-se ativá-la para todos os arquivos, com exceção daqueles já comprimidos, como imagens, arquivos de áudio e vídeos.

+ +

Apache suporta compressão e usa mod_deflate; para nginx existe ngx_http_gzip_module; para IIS, o elemento <httpCompression>.

+ +

Compressão de nó a nó (Hop-by-hop)

+ +

A compressão de nó a nó (do inglês Hop-by-hop compression), embora semelhante à compresão de ponta a ponta, difere em um elemento fundamental: a compressão não acontece no recurso no servidor, criando uma representação específica que é então transmitida, mas sim no corpo da mensagem entre dois nós no caminho entre o cliente e o servidor. Conexões entre nós intermediários sucessivos podem aplicar uma compressão diferente.

+ +

+ +

Para fazer isso, o HTTP usa um mecanismo semelhante à negociação de conteúdo para a compressão ponta a ponta: o nó que transmite a solicitação anuncia sua vontade usando o cabeçalho {{HTTPHeader ("TE")}}, sendo que o outro nó escolhe o método adequado, aplica-o e indica a sua escolha com o cabeçalho {{HTTPHeader("Transfer-Encoding")}}.

+ +

+ +

Na prática, a compressão de nó a nó é transparente para o servidor e o cliente, sendo raramente usada. {{HTTPHeader ("TE")}} e {{HTTPHeader ("Transfer-Encoding")}} são usados principalmente para enviar uma resposta por partes, permitindo iniciar a transmissão de um recurso sem conhecer seu tamanho.

+ +

Observe que usar {{HTTPHeader("Transfer-Encoding")}} e compressão a nível de salto entre nós é tão raro que a maioria dos servidores, como Apache, nginx ou IIS, não apresentam uma maneira fácil de configurá-lo. Tal configuração geralmente acontece no nível do proxy.

diff --git "a/files/pt-br/web/http/compress\303\243o/index.html" "b/files/pt-br/web/http/compress\303\243o/index.html" deleted file mode 100644 index a1f16b762f..0000000000 --- "a/files/pt-br/web/http/compress\303\243o/index.html" +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: Compressão em HTTP -slug: Web/HTTP/Compressão -tags: - - Guía - - HTTP - - compressão -translation_of: Web/HTTP/Compression ---- -
{{HTTPSidebar}}
- -

A Compressão é uma forma importante de aumentar o desempenho de um Web site. Para alguns documentos, a redução de tamanho de até 70% diminui a necessidade de capacidade de largura de banda. Com o passar dos anos, os algoritmos também ficaram mais eficientes e novos têm recebido suporte por clientes e servidores.

- -

Na prática, os desenvolvedores web não precisam implementar mecanismos de compressão de dados, pois ambos os navegadores e servidores já possuem tais mecanismos implementados. Porém, é preciso ter certeza de que o servidor esteja configurado adequadamente. A compressão acontece em três níveis distintos:

- -
    -
  • primeiramente, alguns formatos de arquivo são comprimidos com métodos otimizados específicos,
    • -
  • então a criptografia ocorre no nível HTTP (o recurso é transmitido comprimido de ponta a ponta),
    • -
  • e finalmente a compressão pode ser definida no nível da conexão, entre dois nós de uma conexão HTTP.
    • -
- -

Compressão de formato de arquivo

- -

Cada tipo de dado tem alguma redundância, ou seja, espaço desperdiçado. Se um texto pode geralmente apresentar até 60% de redundância, essa taxa pode ser muito maior para outras mídias, como áudio e vídeo. Ao contrário do texto, esses outros tipos de mídia ocupam muito espaço de armazenamento, sendo que a necessidade de recuperar esse espaço desperdiçado apareceu muito cedo. Engenheiros projetaram o algoritmo de compressão otimizada usada por formatos de arquivo para esse fim específico. Os algoritmos de compressão usados para arquivos podem ser agrupados em duas grandes categorias:

- -
    -
  • Compressão sem perdas (do inglês Loss-less compression), em que o ciclo de compressão-descompressão não altera os dados recuperados. Corresponde byte a byte com o original. Para imagens, gif e png usam a compressão sem perdas.
    • -
  • Compressão com perdas (do inglês Lossy compression), onde o ciclo altera os dados originais, de forma imperceptível para o usuário.
    - Formatos de vídeo na Web utilizam compressão com perdas, assim como o formato  jpeg para imagens.
    • -
- -

Alguns formatos podem ser usados para a compressão com ou sem perdas, como o webp. Geralmente, o algoritmo de compressão com perdas pode ser configurado para comprimir mais ou menos, resultando em uma qualidade menor ou maior.

- -

Para o melhor desempenho de um site, é ideal comprimir o máximo possível, mantendo um nível aceitável de qualidade. Para imagens, uma imagem gerada por uma ferramenta pode não ser otimizada o suficiente para a Web. Recomenda-se portanto o uso de ferramentas que comprimirão o máximo possível com uma certa qualidade exigida. Existem inúmeras ferramentas especializadas para isso.

- -

Algoritmos de compressão com perdas geralmente são mais eficientes que os sem perdas.

- -
-

Como a compressão funciona melhor em tipos específicos de arquivos, ela geralmente não fornece nada mais ao comprimir o mesmo arquivo uma segunda vez. Na verdade, isso geralmente é contraproducente, pois o custo da sobrecarga (algoritmos geralmente precisam de um dicionário que some ao tamanho inicial) pode ser maior do que o ganho extra na compressão, resultando em um arquivo maior. Não use as duas técnicas a seguir para arquivos em um formato comprimido.

-
- -

Compressão de ponta a ponta

- -

Para compressão, a compressão de ponta a ponta é onde residem as maiores melhorias de desempenho dos sites. Compressão de ponta a ponta refere-se a uma compressão do corpo de uma mensagem que é realizada pelo servidor e permanecerá inalterada até atingir o cliente. Quaisquer que sejam os nós intermediários, eles deixam o corpo intacto.

- -

 

- -

- -

Todos os navegadores e servidores modernos suportam a compressão, bastante somente negociar o algoritmo a ser usado. Esses algoritmos são otimizados para texto. Nos anos 90, a tecnologia de compressão avançava a um ritmo acelerado e numerosos algoritmos sucessivos foram adicionados ao conjunto de escolhas possíveis. Hoje em dia, apenas dois são relevantes: o gzip, o mais comum, e br o novo desafiante.

- -

Para selecionar o algoritmo a ser usado, os navegadores e servidores usam a negociação proativa de conteúdo. O navegador envia um cabeçalho {{HTTPHeader("Accept-Encoding")}} com o algoritmo que ele suporta e sua ordem de precedência. O servidor escolhe um, usa-o para comprimir o corpo da resposta e usa o {{HTTPHeader("Content-Encoding")}} para informar ao navegador o algoritmo escolhido. Como a negociação de conteúdo foi usada para escolher uma representação baseada em sua codificação, o servidor deve enviar um cabeçalho {{HTTPHeader("Vary")}} contendo pelo menos {{HTTPHeader("Accept-Encoding")}} ao lado do cabeçalho na resposta. Dessa forma, os caches poderão armazenar em cache as diferentes representações do recurso.

- -

- -

Como a copressão de dados traz melhorias significativas no desempenho, recomenda-se ativá-la para todos os arquivos, com exceção daqueles já comprimidos, como imagens, arquivos de áudio e vídeos.

- -

Apache suporta compressão e usa mod_deflate; para nginx existe ngx_http_gzip_module; para IIS, o elemento <httpCompression>.

- -

Compressão de nó a nó (Hop-by-hop)

- -

A compressão de nó a nó (do inglês Hop-by-hop compression), embora semelhante à compresão de ponta a ponta, difere em um elemento fundamental: a compressão não acontece no recurso no servidor, criando uma representação específica que é então transmitida, mas sim no corpo da mensagem entre dois nós no caminho entre o cliente e o servidor. Conexões entre nós intermediários sucessivos podem aplicar uma compressão diferente.

- -

- -

Para fazer isso, o HTTP usa um mecanismo semelhante à negociação de conteúdo para a compressão ponta a ponta: o nó que transmite a solicitação anuncia sua vontade usando o cabeçalho {{HTTPHeader ("TE")}}, sendo que o outro nó escolhe o método adequado, aplica-o e indica a sua escolha com o cabeçalho {{HTTPHeader("Transfer-Encoding")}}.

- -

- -

Na prática, a compressão de nó a nó é transparente para o servidor e o cliente, sendo raramente usada. {{HTTPHeader ("TE")}} e {{HTTPHeader ("Transfer-Encoding")}} são usados principalmente para enviar uma resposta por partes, permitindo iniciar a transmissão de um recurso sem conhecer seu tamanho.

- -

Observe que usar {{HTTPHeader("Transfer-Encoding")}} e compressão a nível de salto entre nós é tão raro que a maioria dos servidores, como Apache, nginx ou IIS, não apresentam uma maneira fácil de configurá-lo. Tal configuração geralmente acontece no nível do proxy.

diff --git a/files/pt-br/web/http/connection_management_in_http_1.x/index.html b/files/pt-br/web/http/connection_management_in_http_1.x/index.html new file mode 100644 index 0000000000..c67e52b062 --- /dev/null +++ b/files/pt-br/web/http/connection_management_in_http_1.x/index.html @@ -0,0 +1,94 @@ +--- +title: Gerenciamento de Conexão em HTTP/1.x +slug: Web/HTTP/Gerenciamento_de_Conexão_em_HTTP_1.x +tags: + - Guide + - Guía + - HTTP + - Short-lived + - Web + - conexões + - performace + - sharding +translation_of: Web/HTTP/Connection_management_in_HTTP_1.x +--- +

Gerenciamento de Conexão é um tema central em HTTP: abertura e manutenção de conexões e em grande parte tem impacto sobre o desempenho de Web sites e aplicações Web. Existem vários modelos, em HTTP/1.x: ligações de curta duração, conexões persistentes, canalização e HTTP (HTTP pipelining).

+ +

HTTP é um protocolo de transporte que fornece conexão entre o cliente e o servidor geralmente depende de TCP. Em sua infância, HTTP usava um único modelo para lidar com tais conexões. Sua conexão é de curta duração. Essas conexões foram de curta duração: criado um novo cada vez que enviar um pedido necessário, e fechado uma vez a resposta tinha sido recebida.

+ +

Este simples modelo realiza uma limitação inata em desempenho: a abertura de cada uma das conexões TCP é uma operação de consumo de recursos.Várias mensagens devem ser trocadas entre o cliente e o servidor. Latência de rede e largura de banda afetam o desempenho quando precisa de uma solicitação de envio. Páginas de Web modernas exigem muitos pedidos (uma dúzia ou mais) para servir a quantidade de informação necessária, provando este modelo anterior ineficiente.

+ +

Dois novos modelos foram criados no HTTP/1.1.

+ +
    +
  1. O modelo de conexão persistente, mantém conexões abertas entre solicitações sucessivas, reduzindo o tempo necessário para abrir novas conexões.
    2. +
  2. O modelo de pipelining HTTP, vai um passo além, enviando várias solicitações sucessivas sem nem esperar por uma resposta, reduzindo em grande parte a latência da rede.
    3. +
+ +

Compares the performance of the three HTTP/1.x connection models: short-lived connections, persistent connections, and HTTP pipelining.

+ +
+

HTTP/2 Adiciona modelos adicionais para o gerenciamento de conexão.

+
+ +

Um ponto importante para observar, que gerenciamento de conexão HTTP, aplica-se para a conexão entre dois nós consecutivos, que é o hop-by-hop e não end-to-end . O modelo usado em conexões entre um cliente e seu primeiro proxy pode diferir do modelo entre um proxy e o servidor de destino (ou qualquer proxies intermédios). Os cabeçalhos HTTP envolvidos na definição do modelo de conexão, como {{HTTPHeader("Connection")}} e {{HTTPHeader("Keep-Alive")}}, são hop-by-hop, cabeçalhos com seus valores poderão ser alterados por nós intermediários.

+ +

Short-lived connections (Conexões de curta duração)

+ +

O modelo original de HTTP e o padrão HTTP/1.0, é short-lived connections (conexões de curta duração). Cada solicitação HTTP é concluída na sua própria conexão; Isto significa que um handshake TCP acontece antes de cada solicitação HTTP, e estas são serializadas.

+ +

O handshake TCP em si é demorado, mas uma conexão TCP adapta-se a sua carga, tornando-se mais eficiente com mais conexões sustentadas (ou aquecidas). Conexões de curta duração não fazem uso desse recurso de eficiência do TCP, e degrada o desempenho do ideal persistindo para transmitir mais de uma conexão nova, frio.

+ +

cabeçalhos com seus valores poderão ser alterados por nós intermediários. (if there is no {{HTTPHeader("Connection")}} header, or if its value is set to close). Em HTTP/1.1 este modelo é apenas usado quando o {{HTTPHeader("Connection")}}cabeçalho é enviado com um valor de fechamento.

+ +
A menos que lidemos com um sistema muito antigo, que não suporta uma conexão persistente, não há nenhuma razão convincente para usar este modelo.
+ +

Conexões Persistentes

+ +

Short-lived connections (conexões de curta duração) tem dois grandes problemas: o tempo necessário para estabelecer uma nova conexão é significativo, e desempenho da conexão TCP subjacente melhora somente quando esta conexão tem sido usado há algum tempo (conexão quente). Para aliviar estes problemas, foi concebido o conceito de uma conexão persistente, mesmo antes de HTTP/1.1. Alternativamente, este pode ser chamado uma conexão keep-alive.

+ +

É uma conexão persistente que permanece aberto por um período e pode ser reutilizado por vários pedidos, salvando a necessidade de um novo handshake TCP, e utilizando recursos para melhorar o desempenho do TCP. Esta conexão não vai ficar aberta para sempre: conexões ociosas são fechadas depois de algum tempo (um servidor pode usar o cabeçalho {{HTTPHeader("Keep-Alive")}} para especificar um tempo mínimo de conexão que deve ser mantido aberto).

+ +

Conexões persistentes também têm desvantagens, mesmo quando em marcha lenta eles consomem recursos do servidor e sob pesada carga, pode efetuar-se {{glossary("DoS attack", "DoS attacks")}}. Em tais casos, usar conexões não-persistentes, que estão fechadas, assim como elas estão ociosas, pode fornecer um melhor desempenho.HTTP/1.0 as conexões sem persistencia por default.Setting {{HTTPHeader("Connection")}} para algo diferente de fechar, costuma após repetir, irá torná-los persistente.

+ +

Em HTTP/1.1, persistencia é o padrão e o cabeçalho não é mais necessário (mas ele é adicionado frequentemente como uma medida defensiva contra casos que exigem um fallback para HTTP/1.0).

+ +

HTTP pipelining

+ +
+

HTTP o pipelining não é ativado por padrão em navegadores modernos:

+ +
    +
  • Buggy proxies são ainda comuns e eles levam a comportamentos estranhos e erráticos que desenvolvedores Web não podem prever e diagnosticar facilmente.
    • +
  • Pipelining é complexo para implementar corretamente: o tamanho do recurso a ser transferido, a efetiva RTT que será usado, bem como a largura de banda efetiva, têm uma incidência direta na melhoria fornecida pelo pipeline. Sem conhecer eles, mensagens importantes podem ser atrasadas por detrás aqueles sem importância. A noção de importante mesmo evolui durante o layout de página! Pipeline HTTP, portanto, traz uma melhoria marginal na maioria dos casos apenas.
    • +
  • Pipelining está sujeito à problema HOL.
    • +
+ +

Por estas razões, o pipelining tem sido substituído por um algoritmo melhor, multiplexação, que é usado pelo HTTP/2.

+
+ +

Por padrão, HTTP as solicitações são emitidas sequencialmente. A próxima solicitação só é emitida depois que recebeu a resposta para a solicitação atual. Como eles são afetados pelas latências de rede e as limitações de largura de banda, isso pode resultar em atrasos significativos antes que a próxima solicitação é vista pelo servidor.

+ +

Pipelining é o processo para enviar solicitações sucessivas, sobre a mesma conexão persistente, sem esperar pela resposta. Isso evita a latência da conexão. Teoricamente, desempenho também poderia ser melhorado se duas solicitações HTTP para ser embalado na mesma mensagem TCP. O MSS típico (tamanho máximo de segmento), é grande o suficiente para conter várias solicitações simples, embora a demanda em tamanho de solicitações HTTP continua a crescer.

+ +

Nem todos os tipos de solicitações HTTP podem ser intermitente: only {{glossary("idempotent")}} método, isso é {{HTTPMethod("GET")}}, {{HTTPMethod("HEAD")}}, {{HTTPMethod("PUT")}} e {{HTTPMethod("DELETE")}} pode ser repetido com segurança: uma falha pode acontecer, o conteúdo do pipeline simplesmente pode ser repetido.

+ +

Hoje, cada proxy HTTP/1.1-compatível e servidor devem apoiar o pipelining, embora muitos têm limitações na prática: uma razão significativa, nenhum navegador moderno ativa esse recurso por padrão.

+ +

Domain sharding

+ +
+A menos que você tem uma necessidade muito específica e imediata, não use esta técnica depreciada; Mude para HTTP/2 ao invéz. Em HTTP/2, sharding domínio não é mais útil: a conexão HTTP/2 é capaz de manipular as solicitações sem prioridades paralelas muito bem. Sharding domínio é mesmo prejudicial ao desempenho. A maioria dos implementação de HTTP/2 usam uma técnica chamada connection coalescing para reverter o sharding de domínio eventual. +
+ +

Como uma conexão de HTTP/1.x está serializando solicitações, mesmo sem qualquer ordenação, não pode ser ideal sem largura de banda grande o suficiente disponível. Como uma solução, os navegadores abrir várias conexões para cada domínio, enviando solicitações paralelas. Era padrão conexões de 2 a 3, mas isto agora aumentou para um uso mais comum de 6 conexões paralelas. Há um risco de provocar proteção DoS no lado do servidor, se tentar mais do que este número.

+ +

Se o servidor deseja um site de Web mais rápido ou resposta do aplicativo, é possível para o servidor forçar a abertura de mais conexões. Por exemplo, em vez de ter todos os recursos no mesmo domínio, diz www.example.com, poderia dividir em vários domínios, www1.example.com, www2.example.com, www3.example.com. Cada um destes domínios resolver acessar o mesmo servidor e o navegador da Web abrirá 6 conexões para cada (no nosso exemplo, impulsionando as conexões para 18). Esta técnica é chamada sharding do domínio.

+ +

+ +

Conclusão

+ +
+
Gerenciamento de conexão melhorada permite considerável aumento de desempenho em HTTP. Com HTTP/1.1 ou HTTP/1.0, usando uma conexão persistente – pelo menos até que se torne ocioso – levando para o melhor desempenho. No entanto, o falha do pipelining tem levado para a concepção de modelos de gestão de conexão superior, que foram incorporados ao HTTP/2.
+
diff --git a/files/pt-br/web/http/controle_acesso_cors/index.html b/files/pt-br/web/http/controle_acesso_cors/index.html deleted file mode 100644 index 51470f94b7..0000000000 --- a/files/pt-br/web/http/controle_acesso_cors/index.html +++ /dev/null @@ -1,553 +0,0 @@ ---- -title: Cross-Origin Resource Sharing (CORS) -slug: Web/HTTP/Controle_Acesso_CORS -tags: - - AJAX - - CORS - - HTTP - - XMLHttpRequest -translation_of: Web/HTTP/CORS ---- -
{{HTTPSidebar}}
- -

{{Glossary("CORS")}} - Cross-Origin Resource Sharing (Compartilhamento de recursos com origens diferentes) é um mecanismo que usa cabeçalhos adicionais {{Glossary("HTTP")}} para informar a um navegador que permita que um aplicativo Web seja executado em uma origem (domínio) com permissão para acessar recursos selecionados de um servidor em uma origem distinta. Um aplicativo Web executa uma requisição cross-origin HTTP ao solicitar um recurso que tenha uma origem diferente (domínio, protocolo e porta) da sua própria origem.

- -

Um exemplo de requisição cross-origin: o código JavaScript frontend de um aplicativo web disponível em http://domain-a.com usa {{domxref ("XMLHttpRequest")}} para fazer uma requisição para http://api.domain-b.com/data.json.

- -

Por motivos de segurança, navegadores restringem requisições cross-origin HTTP iniciadas por scripts. Por exemplo, XMLHttpRequest e Fetch API seguem a política de mesma origem (same-origin policy). Isso significa que um aplicativo web que faz uso dessas APIs só poderá fazer solicitações para recursos de mesma origem da qual o aplicativo foi carregado, a menos que a resposta da outra origem inclua os cabeçalhos CORS corretos.

- -

- -

O mecânismo CORS suporta requisições seguras do tipo cross-origin e transferências de dados entre navegadores e servidores web. Navegadores modernos usam o CORS em uma API contêiner, como XMLHttpRequest ou Fetch, para ajudar a reduzir os riscos de requisições cross-origin HTTP.

- -

Quem deve ler este artigo?

- -

Todos, realmente.

- -

Este artigo destina-se a administradores da Web, desenvolvedores de servidores e desenvolvedores front-end. Os navegadores modernos lidam com os componentes do lado cliente em compartilhamento entre origens, incluindo cabeçalhos e aplicação de políticas. Mas esse novo padrão significa que os servidores precisam lidar com novos cabeçalhos de requisição e resposta. Outro artigo para desenvolvedores de servidores que discutem compartilhamento cross-origin a partir de uma perspectiva de servidor (com fragmentos de código PHP), pode ser uma leitura complementar.

- -

Quais solicitações usam o CORS?

- -

Esse padrão de compartilhamento cross-origin é usado para habilitar solicitações HTTP entre sites para:

- - - -

Este artigo é uma discussão geral sobre Cross-Origin Resource Sharing (Compartilhamento de recursos com origens diferentes) e inclui uma discussão de cabeçalhos HTTP necessários.

- -

Visão Geral

- -

O padrão Cross-Origin Resource Sharing trabalha adicionando novos cabeçalhos HTTP que permitem que os servidores descrevam um conjunto de origens que possuem permissão a ler uma informação usando o navegador. Além disso, para métodos de requisição HTTP que podem causar efeitos colaterais nos dados do servidor (em particular, para métodos HTTP diferentes de {{HTTPMethod("GET")}} ou para uso de {{HTTPMethod("POST")}} com certos MIME types), a especificação exige que navegadores "pré-enviem" a requisição, solicitando os métodos suportados pelo servidor com um método de requisição HTTP {{HTTPMethod("OPTIONS")}} e, após a "aprovação", o servidor envia a requisição verdadeira com o método de requisição HTTP correto. Servidores também podem notificar clientes se "credenciais" (incluindo Cookies e dados de autenticação HTTP) devem ser enviadas com as requisições.

- -

Falhas no CORS resultam em erros, mas por questões de segurança, detalhes sobre erros não estão disponíveis no código JavaScript. O código tem apenas conhecimento de que ocorreu um erro. A única maneira para determinar especificamente o que ocorreu de errado é procurar no console do navegador por mais detalhes.

- -

Seções subsequentes discutem cenários, assim como fornecem um detalhamento dos cabeçalhos HTTP utilizados.

- -

Exemplos de cenários com controle de acesso

- -

Aqui, apresentamos três cenários que ilustram como Cross-Origin Resource Sharing funciona. Todos estes exemplos usam o objeto {{domxref("XMLHttpRequest")}}, que pode ser utilizado para fazer requisições entre origens em qualquer navegador compatível.

- -

Os snippets JavaScript inclusos nessas seções (e instâncias executáveis de código do lado servidor que tratam corretamente essas requisições entre origens) podem ser encontrados "em ação" aqui: http://arunranga.com/examples/access-control/, e irão funcionar em navegadores que suportam XMLHttpRequest entre origens.

- -

Uma discussão sobre Cross-Origin Resource Sharing a partir da perspectiva do servidor (incluindo snippets de código PHP) pode ser encontrada no artigo Server-Side Access Control (CORS).

- -

Requisições simples

- -

Algumas requisições não acionam um pré-envio CORS. Essas são denominadas neste artigo como “requisições simples” (simple request), embora a especificação {{SpecName('Fetch')}} (que define CORS) não utilize esse termo. Uma requisição que não aciona um pré-envio CORS — denominada “requisição simples” — é uma que atende todas as seguintes condições:

- -
    -
  • Os únicos métodos permitidos são: -
      -
    • {{HTTPMethod("GET")}}
      • -
    • {{HTTPMethod("HEAD")}}
      • -
    • {{HTTPMethod("POST")}}
      • -
    -
    • -
  • Além dos cabeçalhos definidos automaticamente pelo agente do usuário (por exemplo, {{HTTPHeader("Connection")}}, {{HTTPHeader("User-Agent")}} ou qualquer um dos outros cabeçalhos com nomes definidos na especificação Fetch como “forbidden header name”), os únicos cabeçalhos que podem ser definidos manualmente são aqueles cujo a especificação Fetch define como sendo um “CORS-safelisted request-header”, que são: -
      -
    • {{HTTPHeader("Accept")}}
      • -
    • {{HTTPHeader("Accept-Language")}}
      • -
    • {{HTTPHeader("Content-Language")}}
      • -
    • {{HTTPHeader("Content-Type")}} (porém observe os requisitos adicionais abaixo)
      • -
    • DPR
      • -
    • {{HTTPHeader("Downlink")}}
      • -
    • Save-Data
      • -
    • Viewport-Width
      • -
    • Width
      • -
    -
    • -
  • Os únicos valores permitidos para o {{HTTPHeader("Content-Type")}} do cabeçalho são: -
      -
    • application/x-www-form-urlencoded
      • -
    • multipart/form-data
      • -
    • text/plain
      • -
    -
    • -
  • Nenhum event listener é registrado em qualquer objeto {{domxref("XMLHttpRequestUpload")}} usado na requisição, estes são acessados usando a propriedade {{domxref("XMLHttpRequest.upload")}}.
    • -
  • Nenhum objeto {{domxref("ReadableStream")}} é usado na requisição.
    • -
- -
Nota: Esses são os mesmos tipos de requisições entre origens distintas que o conteúdo da web já pode realizar e nenhum dado dado de resposta é liberado ao solicitante, a menos que o servidor envie um cabeçalho adequado. Portanto, sites que impedem a falsificação de requisições entre origens não tem nada a temer em relação ao controle de acesso HTTP.
- -
Nota: O WebKit Nightly e Safari Technology Preview impõem restrições adicionais nos valores permitidos nos cabeçalhos {{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Language")}} e {{HTTPHeader("Content-Language")}}. Caso algum destes cabeçalhos tenham valores ”não-padronizados”, o WebKit/Safari não considera que a requisição atenda as condições para uma “requisição simples”. O que o WebKit/Safari considera valores “não-padronizados” para estes cabeçalhos não é documentado exceto nos seguintes bugs do WebKit: Require preflight for non-standard CORS-safelisted request headers Accept, Accept-Language, and Content-Language, Allow commas in Accept, Accept-Language, and Content-Language request headers for simple CORS  e Switch to a blacklist model for restricted Accept headers in simple CORS requests. Nenhum outro navegador implementa estas restrições adicionais, pois elas não são parte da especificação.
- -

Por exemplo, suponha que o conteúdo web no domínio http://foo.example deseje chamar (invocation do exemplo abaixo) um outro conteúdo no domínio http://bar.other. Esse código Javascript pode estar hospedado em foo.example:

- -
var invocation = new XMLHttpRequest();
-var url = 'http://bar.other/resources/public-data/';
-
-function callOtherDomain() {
-  if(invocation) {
-    invocation.open('GET', url, true);
-    invocation.onreadystatechange = handler;
-    invocation.send();
-  }
-}
-
- -

Isso fará uma troca simples entre cliente e servidor, utilizando o cabeçalho CORS para tratar os privilégios.

- -

- -

Neste caso, vamos ver o que o navegador enviará ao servidor e vamos olhar como o servidor responde:

- -
GET /resources/public-data/ HTTP/1.1
-Host: bar.other
-User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre
-Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
-Accept-Language: en-us,en;q=0.5
-Accept-Encoding: gzip,deflate
-Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
-Connection: keep-alive
-Referer: http://foo.example/examples/access-control/simpleXSInvocation.html
-Origin: http://foo.example
-
-
-HTTP/1.1 200 OK
-Date: Mon, 01 Dec 2008 00:23:53 GMT
-Server: Apache/2.0.61
-Access-Control-Allow-Origin: *
-Keep-Alive: timeout=2, max=100
-Connection: Keep-Alive
-Transfer-Encoding: chunked
-Content-Type: application/xml
-
-[XML Data]
-
- -

As linhas de 1 a 10 são enviadas no header. Note que o cabeçalho principal da requisição HTTP aqui é {{HTTPHeader("Origin")}} na linha 10, o qual revela que a chamada é proveniente de um conteúdo no domínio http://foo.example.

- -

As linhas de 13 a 22 mostram a resposta HTTP do servidor no domínio http://bar.other. Nesta resposta, o servidor envia de volta um cabeçalho {{HTTPHeader("Access-Control-Allow-Origin")}} exibido na linha 16. O uso dos cabeçalhos {{HTTPHeader("Origin")}} e {{HTTPHeader("Access-Control-Allow-Origin")}} mostram o protocolo de controle de acesso em seu uso mais simples. Neste caso, o servidor responde com Access-Control-Allow-Origin: *, o que significa que o recurso pode ser acessado por qualquer domínio pela comunicação entre origens. Se os proprietários dos recursos em http://bar.other desejarem restringir o acesso ao conteúdo para o mesmo ser apenas de http://foo.example, eles retornaram:

- -

Access-Control-Allow-Origin: http://foo.example

- -

Observe que, agora, nenhum dominio além de http://foo.example (identificado na requisição pelo cabeçalho ORIGIN: como na linha 10) pode acessar o recurso pela comunicação entre origens. O cabeçalho Access-Control-Allow-Origin deve conter o valor que foi enviado no cabeçalho Origin da requisição. 

- -

Requisições com pré-envio

- -

Ao contrário de “requisições simples” (discutido acima), requisições com "pré-envio" (Preflighted requests) primeiramente enviam uma requisição HTTP através do método {{HTTPMethod("OPTIONS")}} para obter um recurso em outro domínio, a fim de determinar se de fato a requisição atual é segura para envio. Requisições entre sites possuem pré-envio, já que podem interferir em dados do usuário.

- -

Em particular, uma requisição tem um pré-envio se qualquer das seguintes condições for verdadeira:

- -
    -
  • Se a requisição usa algum dos seguintes métodos: - -
      -
    • {{HTTPMethod("PUT")}}
      • -
    • {{HTTPMethod("DELETE")}}
      • -
    • {{HTTPMethod("CONNECT")}}
      • -
    • {{HTTPMethod("OPTIONS")}}
      • -
    • {{HTTPMethod("TRACE")}}
      • -
    • {{HTTPMethod("PATCH")}}
      • -
    -
    • -
  • Ou se, além dos cabeçalhos definidos automaticamente pelo agente do usuário (por exemplo, {{HTTPHeader("Connection")}}, {HTTPHeader("User-Agent")}} ou qualquer OUTRO cabeçalho com um nome definido na especificação Fetch como “forbidden header name”), a requisição inclui quaisquer cabeçalhos além daqueles que a especificação Fetch define como sendo um “CORS-safelisted request-header”, que são: -
      -
    • {{HTTPHeader("Accept")}}
      • -
    • {{HTTPHeader("Accept-Language")}}
      • -
    • {{HTTPHeader("Content-Language")}}
      • -
    • {{HTTPHeader("Content-Type")}} (porém observe os requisitos adicionais abaixo)
      • -
    • DPR
      • -
    • {{HTTPHeader("Downlink")}}
      • -
    • Save-Data
      • -
    • Viewport-Width
      • -
    • Width
      • -
    -
    • -
  • Ou se o {{HTTPHeader("Content-Type")}} do cabeçalho tem outro valor que: -
      -
    • application/x-www-form-urlencoded
      • -
    • multipart/form-data
      • -
    • text/plain
      • -
    -
    • -
  • Ou se um ou mais event listener estiver registrado em um objeto {{domxref ("XMLHttpRequestUpload")}} usado nessa requisição.
    • -
  • Ou se um objeto {{domxref("ReadableStream")}} é usado nessa requisição.
    • -
- -
Nota: WebKit Nightly e Safari Technology Preview colocam restrições adicionais nos valores permitidos dos cabeçalhos {{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Language")}} e {{HTTPHeader("Content-Language")}}. Caso qualquer um desses cabeçalhos tenha algum valor fora do padrão (non-standard), o WebKit/Safari faz o pré-envio da requisição. O que o WebKit/Safari considera como valor “non-standard” para tais cabeçalhos não está documentado, exceto nos seguintes bugs do WebKit: Require preflight for non-standard CORS-safelisted request headers Accept, Accept-Language, and Content-Language, Allow commas in Accept, Accept-Language, e Content-Language request headers for simple CORS e Switch to a blacklist model for restricted Accept headers in simple CORS requests. Nenhum outro navegador implementa estas restrições adicionais, pois elas não são parte da especificação.
- -

O exemplo a seguir é de uma requisição com pré-envio.

- -
var invocation = new XMLHttpRequest();
-var url = 'http://bar.other/resources/post-here/';
-var body = '<?xml version="1.0"?><person><name>Arun</name></person>';
-
-function callOtherDomain(){
-  if(invocation)
-    {
-      invocation.open('POST', url, true);
-      invocation.setRequestHeader('X-PINGOTHER', 'pingpong');
-      invocation.setRequestHeader('Content-Type', 'application/xml');
-      invocation.onreadystatechange = handler;
-      invocation.send(body);
-    }
-}
-
-......
-
- -

No exemplo acima, a linha 3 cria um XML para enviar com a requisição POST da linha 8. Também, na linha 9, é definido um cabeçalho de uma requisição HTTP "personalizada" (non-standard) com (X-PINGOTHER: pingpong). Tais cabeçalhos não fazem parte do protocolo HTTP/1.1, mas podem ser usados para aplicações web. Já que a requisição usa um Content-Type do tipo application/xml e como é uma requisição personalizada, esta requisição faz um pré-envio.

- -

- -

(Observação: conforme descrito abaixo, a requisição POST real não inclui os cabeçalhos Access-Control-Request- *; eles são necessários apenas para a requisição OPTIONS.)

- -

Vamos conferir a comunicação completa que ocorre entre cliente e servidor. A primeira comunicação é a requisição com pré-envio/resposta:

- -
OPTIONS /resources/post-here/ HTTP/1.1
-Host: bar.other
-User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre
-Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
-Accept-Language: en-us,en;q=0.5
-Accept-Encoding: gzip,deflate
-Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
-Connection: keep-alive
-Origin: http://foo.example
-Access-Control-Request-Method: POST
-Access-Control-Request-Headers: X-PINGOTHER, Content-Type
-
-
-HTTP/1.1 200 OK
-Date: Mon, 01 Dec 2008 01:15:39 GMT
-Server: Apache/2.0.61 (Unix)
-Access-Control-Allow-Origin: http://foo.example
-Access-Control-Allow-Methods: POST, GET, OPTIONS
-Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
-Access-Control-Max-Age: 86400
-Vary: Accept-Encoding, Origin
-Content-Encoding: gzip
-Content-Length: 0
-Keep-Alive: timeout=2, max=100
-Connection: Keep-Alive
-Content-Type: text/plain
-
- -

Uma vez que a requisição com pré-envio é completa, a requisição efetiva será enviada:

- -
POST /resources/post-here/ HTTP/1.1
-Host: bar.other
-User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre
-Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
-Accept-Language: en-us,en;q=0.5
-Accept-Encoding: gzip,deflate
-Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
-Connection: keep-alive
-X-PINGOTHER: pingpong
-Content-Type: text/xml; charset=UTF-8
-Referer: http://foo.example/examples/preflightInvocation.html
-Content-Length: 55
-Origin: http://foo.example
-Pragma: no-cache
-Cache-Control: no-cache
-
-<?xml version="1.0"?><person><name>Arun</name></person>
-
-
-HTTP/1.1 200 OK
-Date: Mon, 01 Dec 2008 01:15:40 GMT
-Server: Apache/2.0.61 (Unix)
-Access-Control-Allow-Origin: http://foo.example
-Vary: Accept-Encoding, Origin
-Content-Encoding: gzip
-Content-Length: 235
-Keep-Alive: timeout=2, max=99
-Connection: Keep-Alive
-Content-Type: text/plain
-
-[Some GZIP'd payload]
-
- -

As linhas de 1 a 12 acima representam a requisição com pré-envio tendo o método {{HTTPMethod("OPTIONS")}}. O navegador determina que precisa fazer este envio baseado nos parâmetros da requisição do código JavaScript acima utilizado, para que o servidor possa responder caso seja aceitável o envio da requisição com os dados parâmetros da mesma. OPTIONS é um método HTTP/1.1 usado para determinar informações complementares dos servidores, sendo o mesmo um método {{Glossary("safe")}}, o que significa que não pode ser utilizado para troca de recurso. Note que junto da requisição OPTIONS, outros dois cabeçalhos são enviados (linhas 10 e 11, respectivamente):

- -
Access-Control-Request-Method: POST
-Access-Controa l-Request-Headers: X-PINGOTHER, Content-Type
-
- -

O cabeçalho {{HTTPHeader("Access-Control-Request-Method")}} notifica o servidor como sendo uma parte da requisição com pré-envio que, quando a requisição efetiva é enviada, será enviada com uma requisição de método POST. O cabeçalho {{HTTPHeader("Access-Control-Request-Headers")}} notifica o servidor que quando a requisição efetiva fora enviada, será enviada com os seguintes cabeçalhos personalizados X-PINGOTHER e Content-Type. O servidor agora tem a oportunidade para definir se deseja aceitar uma requisição sob estas condições.

- -

As linhas 14 a 26 acima são as respostas que o servidor devolve, indicando que o método (POST) e os cabeçalhos (X-PINGOTHER) da requisição são aceitáveis. Em particular, vejamos as linhas 17 a 20:

- -
Access-Control-Allow-Origin: http://foo.example
-Access-Control-Allow-Methods: POST, GET, OPTIONS
-Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
-Access-Control-Max-Age: 86400
- -

O servidor responde com Access-Control-Allow-Methods e diz que POST, GET, e OPTIONS são métodos viáveis para requerir o recurso em questão. Perceba que este cabeçalho é similar ao cabeçalho da resposta {{HTTPHeader("Allow")}}, mas usado estritamente dentro do contexto do controle de acesso.

- -

O servidor envia também Access-Control-Allow-Headers com um valor de "X-PINGOTHER, Content-Type", confirmando estes são cabeçalhos permitidos a serem usados com a requisição efetiva. Assim como Access-Control-Allow-Methods, Access-Control-Allow-Headers é uma lista de cabeçalhos aceitáveis, separados por vírgula.

- -

Por fim, {{HTTPHeader("Access-Control-Max-Age")}} traz o valor em segundos de quão longo pode ser mantida em cache a resposta da requisição pré-envio sem o envio de outra requisição pré-envio. Neste caso, 86400 segundos são 24 horas. Note que cada browser tem um valor interno máximo que toma precedência quado Access-Control-Max-Age for maior.

- -

Requisições com pré-envio e redirecionamento

- -

Not all browsers currently support following redirects after a preflighted request. If a redirect occurs after a preflighted request, some browsers currently will report an error message such as the following.

- -
-

The request was redirected to 'https://example.com/foo', which is disallowed for cross-origin requests that require preflight

-
- -
-

Request requires preflight, which is disallowed to follow cross-origin redirect

-
- -

The CORS protocol originally required that behavior but was subsequently changed to no longer require it. However, not all browsers have implemented the change, and so still exhibit the behavior that was originally required.

- -

So until all browsers catch up with the spec, you may be able to work around this limitation by doing one or both of the following:

- -
    -
  • change the server-side behavior to avoid the preflight and/or to avoid the redirect—if you have control over the server the request is being made to
    • -
  • change the request such that it is a simple request that doesn’t cause a preflight
    • -
- -

But if it’s not possible to make those changes, then another way that may be possible is to this:

- -
    -
  1. Make a simple request (using {{domxref("Response.url")}} for the Fetch API, or {{domxref("XMLHttpRequest.responseURL")}}) to determine what URL the real preflighted request would end up at.
    2. -
  2. Make another request (the “real” request) using the URL you obtained from Response.url or XMLHttpRequest.responseURL in the first step.
    3. -
- -

However, if the request is one that triggers a preflight due to the presence of the Authorization header in the request, you won’t be able to work around the limitation using the steps above. And you won’t be able to work around it at all unless you have control over the server the request is being made to.

- -

Requisições com credenciais

- -

The most interesting capability exposed by both {{domxref("XMLHttpRequest")}} or Fetch and CORS is the ability to make "credentialed" requests that are aware of HTTP cookies and HTTP Authentication information. By default, in cross-site {{domxref("XMLHttpRequest")}} or Fetch invocations, browsers will not send credentials. A specific flag has to be set on the {{domxref("XMLHttpRequest")}} object or the {{domxref("Request")}} constructor when it is invoked.

- -

In this example, content originally loaded from http://foo.example makes a simple GET request to a resource on http://bar.other which sets Cookies. Content on foo.example might contain JavaScript like this:

- -
var invocation = new XMLHttpRequest();
-var url = 'http://bar.other/resources/credentialed-content/';
-
-function callOtherDomain(){
-  if(invocation) {
-    invocation.open('GET', url, true);
-    invocation.withCredentials = true;
-    invocation.onreadystatechange = handler;
-    invocation.send();
-  }
-}
- -

Line 7 shows the flag on {{domxref("XMLHttpRequest")}} that has to be set in order to make the invocation with Cookies, namely the withCredentials boolean value. By default, the invocation is made without Cookies. Since this is a simple GET request, it is not preflighted, but the browser will reject any response that does not have the {{HTTPHeader("Access-Control-Allow-Credentials")}}: true header, and not make the response available to the invoking web content.

- -

- -

Here is a sample exchange between client and server:

- -
GET /resources/access-control-with-credentials/ HTTP/1.1
-Host: bar.other
-User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre
-Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
-Accept-Language: en-us,en;q=0.5
-Accept-Encoding: gzip,deflate
-Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
-Connection: keep-alive
-Referer: http://foo.example/examples/credential.html
-Origin: http://foo.example
-Cookie: pageAccess=2
-
-
-HTTP/1.1 200 OK
-Date: Mon, 01 Dec 2008 01:34:52 GMT
-Server: Apache/2.0.61 (Unix) PHP/4.4.7 mod_ssl/2.0.61 OpenSSL/0.9.7e mod_fastcgi/2.4.2 DAV/2 SVN/1.4.2
-X-Powered-By: PHP/5.2.6
-Access-Control-Allow-Origin: http://foo.example
-Access-Control-Allow-Credentials: true
-Cache-Control: no-cache
-Pragma: no-cache
-Set-Cookie: pageAccess=3; expires=Wed, 31-Dec-2008 01:34:53 GMT
-Vary: Accept-Encoding, Origin
-Content-Encoding: gzip
-Content-Length: 106
-Keep-Alive: timeout=2, max=100
-Connection: Keep-Alive
-Content-Type: text/plain
-
-
-[text/plain payload]
-
- -

Although line 11 contains the Cookie destined for the content on http://bar.other, if bar.other did not respond with an {{HTTPHeader("Access-Control-Allow-Credentials")}}: true (line 19) the response would be ignored and not made available to web content.

- -

Solicitações credenciadas e curingas (wildcards)

- -

When responding to a credentialed request, the server must specify an origin in the value of the Access-Control-Allow-Origin header, instead of specifying the "*" wildcard.

- -

Because the request headers in the above example include a Cookie header, the request would fail if the value of the Access-Control-Allow-Origin header were "*". But it does not fail: Because the value of the Access-Control-Allow-Origin header is "http://foo.example" (an actual origin) rather than the "*" wildcard, the credential-cognizant content is returned to the invoking web content.

- -

Note that the Set-Cookie response header in the example above also sets a further cookie. In case of failure, an exception—depending on the API used—is raised.

- -

All of these examples can be seen working here. The next section deals with the actual HTTP headers.

- -

Os cabeçalhos de resposta HTTP

- -

This section lists the HTTP response headers that servers send back for access control requests as defined by the Cross-Origin Resource Sharing specification. The previous section gives an overview of these in action.

- -

Access-Control-Allow-Origin

- -

A returned resource may have one {{HTTPHeader("Access-Control-Allow-Origin")}} header, with the following syntax:

- -
Access-Control-Allow-Origin: <origin> | *
-
- -

The origin parameter specifies a URI that may access the resource. The browser must enforce this. For requests without credentials, the server may specify "*" as a wildcard, thereby allowing any origin to access the resource.

- -

For example, to allow http://mozilla.org to access the resource, you can specify:

- -
Access-Control-Allow-Origin: http://mozilla.org
- -

If the server specifies an origin host rather than "*", then it could also include Origin in the Vary response header to indicate to clients that server responses will differ based on the value of the Origin request header.

- -

Access-Control-Expose-Headers

- -

The {{HTTPHeader("Access-Control-Expose-Headers")}} header lets a server whitelist headers that browsers are allowed to access. For example:

- -
Access-Control-Expose-Headers: X-My-Custom-Header, X-Another-Custom-Header
-
- -

This allows the X-My-Custom-Header and X-Another-Custom-Header headers to be exposed to the browser.

- -

Access-Control-Max-Age

- -

The  {{HTTPHeader("Access-Control-Max-Age")}} header indicates how long the results of a preflight request can be cached. For an example of a preflight request, see the above examples.

- -
Access-Control-Max-Age: <delta-seconds>
-
- -

The delta-seconds parameter indicates the number of seconds the results can be cached.

- -

Access-Control-Allow-Credentials

- -

The {{HTTPHeader("Access-Control-Allow-Credentials")}} header Indicates whether or not the response to the request can be exposed when the credentials flag is true.  When used as part of a response to a preflight request, this indicates whether or not the actual request can be made using credentials. Note that simple GET requests are not preflighted, and so if a request is made for a resource with credentials, if this header is not returned with the resource, the response is ignored by the browser and not returned to web content.

- -
Access-Control-Allow-Credentials: true
-
- -

Credentialed requests are discussed above.

- -

Access-Control-Allow-Methods

- -

O {{HTTPHeader("Access-Control-Allow-Methods")}} cabeçalho especifica o método ou os métodos permitidos ao acessar o recurso. Isso é usado em resposta há uma requisição preflight. As condições na qual a requisição é preflight são discutidas à seguir.

- -
Access-Control-Allow-Methods: <method>[, <method>]*
-
- -

An example of a preflight request is given above, including an example which sends this header to the browser.

- -

Access-Control-Allow-Headers

- -

The {{HTTPHeader("Access-Control-Allow-Headers")}} header is used in response to a preflight request to indicate which HTTP headers can be used when making the actual request.

- -
Access-Control-Allow-Headers: <field-name>[, <field-name>]*
-
- -

Os cabeçalhos de solicitação HTTP

- -

This section lists headers that clients may use when issuing HTTP requests in order to make use of the cross-origin sharing feature. Note that these headers are set for you when making invocations to servers. Developers using cross-site {{domxref("XMLHttpRequest")}} capability do not have to set any cross-origin sharing request headers programmatically.

- -

Origin

- -

The {{HTTPHeader("Origin")}} header indicates the origin of the cross-site access request or preflight request.

- -
Origin: <origin>
-
- -

The origin is a URI indicating the server from which the request initiated.  It does not include any path information, but only the server name.

- -
Note: The origin can be the empty string; this is useful, for example, if the source is a data URL.
- -

Note that in any access control request, the {{HTTPHeader("Origin")}} header is always sent.

- -

Access-Control-Request-Method

- -

The {{HTTPHeader("Access-Control-Request-Method")}} is used when issuing a preflight request to let the server know what HTTP method will be used when the actual request is made.

- -
Access-Control-Request-Method: <method>
-
- -

Examples of this usage can be found above.

- -

Access-Control-Request-Headers

- -

The {{HTTPHeader("Access-Control-Request-Headers")}} header is used when issuing a preflight request to let the server know what HTTP headers will be used when the actual request is made.

- -
Access-Control-Request-Headers: <field-name>[, <field-name>]*
-
- -

Examples of this usage can be found above.

- -

Especificações

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Fetch', '#cors-protocol', 'CORS')}}{{Spec2('Fetch')}}New definition; supplants W3C CORS specification.
- -

Compatibilidade entre Navegadores

- - - -

{{Compat("http.headers.Access-Control-Allow-Origin")}}

- -

Notas de compatibilidade

- -
    -
  • Internet Explorer 8 and 9 expose CORS via the XDomainRequest object, but have a full implementation in IE 10. 
    • -
  • While Firefox 3.5 introduced support for cross-site XMLHttpRequests and Web Fonts, certain requests were limited until later versions. Specifically, Firefox 7 introduced the ability for cross-site HTTP requests for WebGL Textures, and Firefox 9 added support for Images drawn on a canvas using drawImage.
    • -
- -

Veja também

- - diff --git a/files/pt-br/web/http/cors/index.html b/files/pt-br/web/http/cors/index.html new file mode 100644 index 0000000000..51470f94b7 --- /dev/null +++ b/files/pt-br/web/http/cors/index.html @@ -0,0 +1,553 @@ +--- +title: Cross-Origin Resource Sharing (CORS) +slug: Web/HTTP/Controle_Acesso_CORS +tags: + - AJAX + - CORS + - HTTP + - XMLHttpRequest +translation_of: Web/HTTP/CORS +--- +
{{HTTPSidebar}}
+ +

{{Glossary("CORS")}} - Cross-Origin Resource Sharing (Compartilhamento de recursos com origens diferentes) é um mecanismo que usa cabeçalhos adicionais {{Glossary("HTTP")}} para informar a um navegador que permita que um aplicativo Web seja executado em uma origem (domínio) com permissão para acessar recursos selecionados de um servidor em uma origem distinta. Um aplicativo Web executa uma requisição cross-origin HTTP ao solicitar um recurso que tenha uma origem diferente (domínio, protocolo e porta) da sua própria origem.

+ +

Um exemplo de requisição cross-origin: o código JavaScript frontend de um aplicativo web disponível em http://domain-a.com usa {{domxref ("XMLHttpRequest")}} para fazer uma requisição para http://api.domain-b.com/data.json.

+ +

Por motivos de segurança, navegadores restringem requisições cross-origin HTTP iniciadas por scripts. Por exemplo, XMLHttpRequest e Fetch API seguem a política de mesma origem (same-origin policy). Isso significa que um aplicativo web que faz uso dessas APIs só poderá fazer solicitações para recursos de mesma origem da qual o aplicativo foi carregado, a menos que a resposta da outra origem inclua os cabeçalhos CORS corretos.

+ +

+ +

O mecânismo CORS suporta requisições seguras do tipo cross-origin e transferências de dados entre navegadores e servidores web. Navegadores modernos usam o CORS em uma API contêiner, como XMLHttpRequest ou Fetch, para ajudar a reduzir os riscos de requisições cross-origin HTTP.

+ +

Quem deve ler este artigo?

+ +

Todos, realmente.

+ +

Este artigo destina-se a administradores da Web, desenvolvedores de servidores e desenvolvedores front-end. Os navegadores modernos lidam com os componentes do lado cliente em compartilhamento entre origens, incluindo cabeçalhos e aplicação de políticas. Mas esse novo padrão significa que os servidores precisam lidar com novos cabeçalhos de requisição e resposta. Outro artigo para desenvolvedores de servidores que discutem compartilhamento cross-origin a partir de uma perspectiva de servidor (com fragmentos de código PHP), pode ser uma leitura complementar.

+ +

Quais solicitações usam o CORS?

+ +

Esse padrão de compartilhamento cross-origin é usado para habilitar solicitações HTTP entre sites para:

+ + + +

Este artigo é uma discussão geral sobre Cross-Origin Resource Sharing (Compartilhamento de recursos com origens diferentes) e inclui uma discussão de cabeçalhos HTTP necessários.

+ +

Visão Geral

+ +

O padrão Cross-Origin Resource Sharing trabalha adicionando novos cabeçalhos HTTP que permitem que os servidores descrevam um conjunto de origens que possuem permissão a ler uma informação usando o navegador. Além disso, para métodos de requisição HTTP que podem causar efeitos colaterais nos dados do servidor (em particular, para métodos HTTP diferentes de {{HTTPMethod("GET")}} ou para uso de {{HTTPMethod("POST")}} com certos MIME types), a especificação exige que navegadores "pré-enviem" a requisição, solicitando os métodos suportados pelo servidor com um método de requisição HTTP {{HTTPMethod("OPTIONS")}} e, após a "aprovação", o servidor envia a requisição verdadeira com o método de requisição HTTP correto. Servidores também podem notificar clientes se "credenciais" (incluindo Cookies e dados de autenticação HTTP) devem ser enviadas com as requisições.

+ +

Falhas no CORS resultam em erros, mas por questões de segurança, detalhes sobre erros não estão disponíveis no código JavaScript. O código tem apenas conhecimento de que ocorreu um erro. A única maneira para determinar especificamente o que ocorreu de errado é procurar no console do navegador por mais detalhes.

+ +

Seções subsequentes discutem cenários, assim como fornecem um detalhamento dos cabeçalhos HTTP utilizados.

+ +

Exemplos de cenários com controle de acesso

+ +

Aqui, apresentamos três cenários que ilustram como Cross-Origin Resource Sharing funciona. Todos estes exemplos usam o objeto {{domxref("XMLHttpRequest")}}, que pode ser utilizado para fazer requisições entre origens em qualquer navegador compatível.

+ +

Os snippets JavaScript inclusos nessas seções (e instâncias executáveis de código do lado servidor que tratam corretamente essas requisições entre origens) podem ser encontrados "em ação" aqui: http://arunranga.com/examples/access-control/, e irão funcionar em navegadores que suportam XMLHttpRequest entre origens.

+ +

Uma discussão sobre Cross-Origin Resource Sharing a partir da perspectiva do servidor (incluindo snippets de código PHP) pode ser encontrada no artigo Server-Side Access Control (CORS).

+ +

Requisições simples

+ +

Algumas requisições não acionam um pré-envio CORS. Essas são denominadas neste artigo como “requisições simples” (simple request), embora a especificação {{SpecName('Fetch')}} (que define CORS) não utilize esse termo. Uma requisição que não aciona um pré-envio CORS — denominada “requisição simples” — é uma que atende todas as seguintes condições:

+ +
    +
  • Os únicos métodos permitidos são: +
      +
    • {{HTTPMethod("GET")}}
      • +
    • {{HTTPMethod("HEAD")}}
      • +
    • {{HTTPMethod("POST")}}
      • +
    +
    • +
  • Além dos cabeçalhos definidos automaticamente pelo agente do usuário (por exemplo, {{HTTPHeader("Connection")}}, {{HTTPHeader("User-Agent")}} ou qualquer um dos outros cabeçalhos com nomes definidos na especificação Fetch como “forbidden header name”), os únicos cabeçalhos que podem ser definidos manualmente são aqueles cujo a especificação Fetch define como sendo um “CORS-safelisted request-header”, que são: +
      +
    • {{HTTPHeader("Accept")}}
      • +
    • {{HTTPHeader("Accept-Language")}}
      • +
    • {{HTTPHeader("Content-Language")}}
      • +
    • {{HTTPHeader("Content-Type")}} (porém observe os requisitos adicionais abaixo)
      • +
    • DPR
      • +
    • {{HTTPHeader("Downlink")}}
      • +
    • Save-Data
      • +
    • Viewport-Width
      • +
    • Width
      • +
    +
    • +
  • Os únicos valores permitidos para o {{HTTPHeader("Content-Type")}} do cabeçalho são: +
      +
    • application/x-www-form-urlencoded
      • +
    • multipart/form-data
      • +
    • text/plain
      • +
    +
    • +
  • Nenhum event listener é registrado em qualquer objeto {{domxref("XMLHttpRequestUpload")}} usado na requisição, estes são acessados usando a propriedade {{domxref("XMLHttpRequest.upload")}}.
    • +
  • Nenhum objeto {{domxref("ReadableStream")}} é usado na requisição.
    • +
+ +
Nota: Esses são os mesmos tipos de requisições entre origens distintas que o conteúdo da web já pode realizar e nenhum dado dado de resposta é liberado ao solicitante, a menos que o servidor envie um cabeçalho adequado. Portanto, sites que impedem a falsificação de requisições entre origens não tem nada a temer em relação ao controle de acesso HTTP.
+ +
Nota: O WebKit Nightly e Safari Technology Preview impõem restrições adicionais nos valores permitidos nos cabeçalhos {{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Language")}} e {{HTTPHeader("Content-Language")}}. Caso algum destes cabeçalhos tenham valores ”não-padronizados”, o WebKit/Safari não considera que a requisição atenda as condições para uma “requisição simples”. O que o WebKit/Safari considera valores “não-padronizados” para estes cabeçalhos não é documentado exceto nos seguintes bugs do WebKit: Require preflight for non-standard CORS-safelisted request headers Accept, Accept-Language, and Content-Language, Allow commas in Accept, Accept-Language, and Content-Language request headers for simple CORS  e Switch to a blacklist model for restricted Accept headers in simple CORS requests. Nenhum outro navegador implementa estas restrições adicionais, pois elas não são parte da especificação.
+ +

Por exemplo, suponha que o conteúdo web no domínio http://foo.example deseje chamar (invocation do exemplo abaixo) um outro conteúdo no domínio http://bar.other. Esse código Javascript pode estar hospedado em foo.example:

+ +
var invocation = new XMLHttpRequest();
+var url = 'http://bar.other/resources/public-data/';
+
+function callOtherDomain() {
+  if(invocation) {
+    invocation.open('GET', url, true);
+    invocation.onreadystatechange = handler;
+    invocation.send();
+  }
+}
+
+ +

Isso fará uma troca simples entre cliente e servidor, utilizando o cabeçalho CORS para tratar os privilégios.

+ +

+ +

Neste caso, vamos ver o que o navegador enviará ao servidor e vamos olhar como o servidor responde:

+ +
GET /resources/public-data/ HTTP/1.1
+Host: bar.other
+User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
+Accept-Language: en-us,en;q=0.5
+Accept-Encoding: gzip,deflate
+Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
+Connection: keep-alive
+Referer: http://foo.example/examples/access-control/simpleXSInvocation.html
+Origin: http://foo.example
+
+
+HTTP/1.1 200 OK
+Date: Mon, 01 Dec 2008 00:23:53 GMT
+Server: Apache/2.0.61
+Access-Control-Allow-Origin: *
+Keep-Alive: timeout=2, max=100
+Connection: Keep-Alive
+Transfer-Encoding: chunked
+Content-Type: application/xml
+
+[XML Data]
+
+ +

As linhas de 1 a 10 são enviadas no header. Note que o cabeçalho principal da requisição HTTP aqui é {{HTTPHeader("Origin")}} na linha 10, o qual revela que a chamada é proveniente de um conteúdo no domínio http://foo.example.

+ +

As linhas de 13 a 22 mostram a resposta HTTP do servidor no domínio http://bar.other. Nesta resposta, o servidor envia de volta um cabeçalho {{HTTPHeader("Access-Control-Allow-Origin")}} exibido na linha 16. O uso dos cabeçalhos {{HTTPHeader("Origin")}} e {{HTTPHeader("Access-Control-Allow-Origin")}} mostram o protocolo de controle de acesso em seu uso mais simples. Neste caso, o servidor responde com Access-Control-Allow-Origin: *, o que significa que o recurso pode ser acessado por qualquer domínio pela comunicação entre origens. Se os proprietários dos recursos em http://bar.other desejarem restringir o acesso ao conteúdo para o mesmo ser apenas de http://foo.example, eles retornaram:

+ +

Access-Control-Allow-Origin: http://foo.example

+ +

Observe que, agora, nenhum dominio além de http://foo.example (identificado na requisição pelo cabeçalho ORIGIN: como na linha 10) pode acessar o recurso pela comunicação entre origens. O cabeçalho Access-Control-Allow-Origin deve conter o valor que foi enviado no cabeçalho Origin da requisição. 

+ +

Requisições com pré-envio

+ +

Ao contrário de “requisições simples” (discutido acima), requisições com "pré-envio" (Preflighted requests) primeiramente enviam uma requisição HTTP através do método {{HTTPMethod("OPTIONS")}} para obter um recurso em outro domínio, a fim de determinar se de fato a requisição atual é segura para envio. Requisições entre sites possuem pré-envio, já que podem interferir em dados do usuário.

+ +

Em particular, uma requisição tem um pré-envio se qualquer das seguintes condições for verdadeira:

+ +
    +
  • Se a requisição usa algum dos seguintes métodos: + +
      +
    • {{HTTPMethod("PUT")}}
      • +
    • {{HTTPMethod("DELETE")}}
      • +
    • {{HTTPMethod("CONNECT")}}
      • +
    • {{HTTPMethod("OPTIONS")}}
      • +
    • {{HTTPMethod("TRACE")}}
      • +
    • {{HTTPMethod("PATCH")}}
      • +
    +
    • +
  • Ou se, além dos cabeçalhos definidos automaticamente pelo agente do usuário (por exemplo, {{HTTPHeader("Connection")}}, {HTTPHeader("User-Agent")}} ou qualquer OUTRO cabeçalho com um nome definido na especificação Fetch como “forbidden header name”), a requisição inclui quaisquer cabeçalhos além daqueles que a especificação Fetch define como sendo um “CORS-safelisted request-header”, que são: +
      +
    • {{HTTPHeader("Accept")}}
      • +
    • {{HTTPHeader("Accept-Language")}}
      • +
    • {{HTTPHeader("Content-Language")}}
      • +
    • {{HTTPHeader("Content-Type")}} (porém observe os requisitos adicionais abaixo)
      • +
    • DPR
      • +
    • {{HTTPHeader("Downlink")}}
      • +
    • Save-Data
      • +
    • Viewport-Width
      • +
    • Width
      • +
    +
    • +
  • Ou se o {{HTTPHeader("Content-Type")}} do cabeçalho tem outro valor que: +
      +
    • application/x-www-form-urlencoded
      • +
    • multipart/form-data
      • +
    • text/plain
      • +
    +
    • +
  • Ou se um ou mais event listener estiver registrado em um objeto {{domxref ("XMLHttpRequestUpload")}} usado nessa requisição.
    • +
  • Ou se um objeto {{domxref("ReadableStream")}} é usado nessa requisição.
    • +
+ +
Nota: WebKit Nightly e Safari Technology Preview colocam restrições adicionais nos valores permitidos dos cabeçalhos {{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Language")}} e {{HTTPHeader("Content-Language")}}. Caso qualquer um desses cabeçalhos tenha algum valor fora do padrão (non-standard), o WebKit/Safari faz o pré-envio da requisição. O que o WebKit/Safari considera como valor “non-standard” para tais cabeçalhos não está documentado, exceto nos seguintes bugs do WebKit: Require preflight for non-standard CORS-safelisted request headers Accept, Accept-Language, and Content-Language, Allow commas in Accept, Accept-Language, e Content-Language request headers for simple CORS e Switch to a blacklist model for restricted Accept headers in simple CORS requests. Nenhum outro navegador implementa estas restrições adicionais, pois elas não são parte da especificação.
+ +

O exemplo a seguir é de uma requisição com pré-envio.

+ +
var invocation = new XMLHttpRequest();
+var url = 'http://bar.other/resources/post-here/';
+var body = '<?xml version="1.0"?><person><name>Arun</name></person>';
+
+function callOtherDomain(){
+  if(invocation)
+    {
+      invocation.open('POST', url, true);
+      invocation.setRequestHeader('X-PINGOTHER', 'pingpong');
+      invocation.setRequestHeader('Content-Type', 'application/xml');
+      invocation.onreadystatechange = handler;
+      invocation.send(body);
+    }
+}
+
+......
+
+ +

No exemplo acima, a linha 3 cria um XML para enviar com a requisição POST da linha 8. Também, na linha 9, é definido um cabeçalho de uma requisição HTTP "personalizada" (non-standard) com (X-PINGOTHER: pingpong). Tais cabeçalhos não fazem parte do protocolo HTTP/1.1, mas podem ser usados para aplicações web. Já que a requisição usa um Content-Type do tipo application/xml e como é uma requisição personalizada, esta requisição faz um pré-envio.

+ +

+ +

(Observação: conforme descrito abaixo, a requisição POST real não inclui os cabeçalhos Access-Control-Request- *; eles são necessários apenas para a requisição OPTIONS.)

+ +

Vamos conferir a comunicação completa que ocorre entre cliente e servidor. A primeira comunicação é a requisição com pré-envio/resposta:

+ +
OPTIONS /resources/post-here/ HTTP/1.1
+Host: bar.other
+User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
+Accept-Language: en-us,en;q=0.5
+Accept-Encoding: gzip,deflate
+Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
+Connection: keep-alive
+Origin: http://foo.example
+Access-Control-Request-Method: POST
+Access-Control-Request-Headers: X-PINGOTHER, Content-Type
+
+
+HTTP/1.1 200 OK
+Date: Mon, 01 Dec 2008 01:15:39 GMT
+Server: Apache/2.0.61 (Unix)
+Access-Control-Allow-Origin: http://foo.example
+Access-Control-Allow-Methods: POST, GET, OPTIONS
+Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
+Access-Control-Max-Age: 86400
+Vary: Accept-Encoding, Origin
+Content-Encoding: gzip
+Content-Length: 0
+Keep-Alive: timeout=2, max=100
+Connection: Keep-Alive
+Content-Type: text/plain
+
+ +

Uma vez que a requisição com pré-envio é completa, a requisição efetiva será enviada:

+ +
POST /resources/post-here/ HTTP/1.1
+Host: bar.other
+User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
+Accept-Language: en-us,en;q=0.5
+Accept-Encoding: gzip,deflate
+Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
+Connection: keep-alive
+X-PINGOTHER: pingpong
+Content-Type: text/xml; charset=UTF-8
+Referer: http://foo.example/examples/preflightInvocation.html
+Content-Length: 55
+Origin: http://foo.example
+Pragma: no-cache
+Cache-Control: no-cache
+
+<?xml version="1.0"?><person><name>Arun</name></person>
+
+
+HTTP/1.1 200 OK
+Date: Mon, 01 Dec 2008 01:15:40 GMT
+Server: Apache/2.0.61 (Unix)
+Access-Control-Allow-Origin: http://foo.example
+Vary: Accept-Encoding, Origin
+Content-Encoding: gzip
+Content-Length: 235
+Keep-Alive: timeout=2, max=99
+Connection: Keep-Alive
+Content-Type: text/plain
+
+[Some GZIP'd payload]
+
+ +

As linhas de 1 a 12 acima representam a requisição com pré-envio tendo o método {{HTTPMethod("OPTIONS")}}. O navegador determina que precisa fazer este envio baseado nos parâmetros da requisição do código JavaScript acima utilizado, para que o servidor possa responder caso seja aceitável o envio da requisição com os dados parâmetros da mesma. OPTIONS é um método HTTP/1.1 usado para determinar informações complementares dos servidores, sendo o mesmo um método {{Glossary("safe")}}, o que significa que não pode ser utilizado para troca de recurso. Note que junto da requisição OPTIONS, outros dois cabeçalhos são enviados (linhas 10 e 11, respectivamente):

+ +
Access-Control-Request-Method: POST
+Access-Controa l-Request-Headers: X-PINGOTHER, Content-Type
+
+ +

O cabeçalho {{HTTPHeader("Access-Control-Request-Method")}} notifica o servidor como sendo uma parte da requisição com pré-envio que, quando a requisição efetiva é enviada, será enviada com uma requisição de método POST. O cabeçalho {{HTTPHeader("Access-Control-Request-Headers")}} notifica o servidor que quando a requisição efetiva fora enviada, será enviada com os seguintes cabeçalhos personalizados X-PINGOTHER e Content-Type. O servidor agora tem a oportunidade para definir se deseja aceitar uma requisição sob estas condições.

+ +

As linhas 14 a 26 acima são as respostas que o servidor devolve, indicando que o método (POST) e os cabeçalhos (X-PINGOTHER) da requisição são aceitáveis. Em particular, vejamos as linhas 17 a 20:

+ +
Access-Control-Allow-Origin: http://foo.example
+Access-Control-Allow-Methods: POST, GET, OPTIONS
+Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
+Access-Control-Max-Age: 86400
+ +

O servidor responde com Access-Control-Allow-Methods e diz que POST, GET, e OPTIONS são métodos viáveis para requerir o recurso em questão. Perceba que este cabeçalho é similar ao cabeçalho da resposta {{HTTPHeader("Allow")}}, mas usado estritamente dentro do contexto do controle de acesso.

+ +

O servidor envia também Access-Control-Allow-Headers com um valor de "X-PINGOTHER, Content-Type", confirmando estes são cabeçalhos permitidos a serem usados com a requisição efetiva. Assim como Access-Control-Allow-Methods, Access-Control-Allow-Headers é uma lista de cabeçalhos aceitáveis, separados por vírgula.

+ +

Por fim, {{HTTPHeader("Access-Control-Max-Age")}} traz o valor em segundos de quão longo pode ser mantida em cache a resposta da requisição pré-envio sem o envio de outra requisição pré-envio. Neste caso, 86400 segundos são 24 horas. Note que cada browser tem um valor interno máximo que toma precedência quado Access-Control-Max-Age for maior.

+ +

Requisições com pré-envio e redirecionamento

+ +

Not all browsers currently support following redirects after a preflighted request. If a redirect occurs after a preflighted request, some browsers currently will report an error message such as the following.

+ +
+

The request was redirected to 'https://example.com/foo', which is disallowed for cross-origin requests that require preflight

+
+ +
+

Request requires preflight, which is disallowed to follow cross-origin redirect

+
+ +

The CORS protocol originally required that behavior but was subsequently changed to no longer require it. However, not all browsers have implemented the change, and so still exhibit the behavior that was originally required.

+ +

So until all browsers catch up with the spec, you may be able to work around this limitation by doing one or both of the following:

+ +
    +
  • change the server-side behavior to avoid the preflight and/or to avoid the redirect—if you have control over the server the request is being made to
    • +
  • change the request such that it is a simple request that doesn’t cause a preflight
    • +
+ +

But if it’s not possible to make those changes, then another way that may be possible is to this:

+ +
    +
  1. Make a simple request (using {{domxref("Response.url")}} for the Fetch API, or {{domxref("XMLHttpRequest.responseURL")}}) to determine what URL the real preflighted request would end up at.
    2. +
  2. Make another request (the “real” request) using the URL you obtained from Response.url or XMLHttpRequest.responseURL in the first step.
    3. +
+ +

However, if the request is one that triggers a preflight due to the presence of the Authorization header in the request, you won’t be able to work around the limitation using the steps above. And you won’t be able to work around it at all unless you have control over the server the request is being made to.

+ +

Requisições com credenciais

+ +

The most interesting capability exposed by both {{domxref("XMLHttpRequest")}} or Fetch and CORS is the ability to make "credentialed" requests that are aware of HTTP cookies and HTTP Authentication information. By default, in cross-site {{domxref("XMLHttpRequest")}} or Fetch invocations, browsers will not send credentials. A specific flag has to be set on the {{domxref("XMLHttpRequest")}} object or the {{domxref("Request")}} constructor when it is invoked.

+ +

In this example, content originally loaded from http://foo.example makes a simple GET request to a resource on http://bar.other which sets Cookies. Content on foo.example might contain JavaScript like this:

+ +
var invocation = new XMLHttpRequest();
+var url = 'http://bar.other/resources/credentialed-content/';
+
+function callOtherDomain(){
+  if(invocation) {
+    invocation.open('GET', url, true);
+    invocation.withCredentials = true;
+    invocation.onreadystatechange = handler;
+    invocation.send();
+  }
+}
+ +

Line 7 shows the flag on {{domxref("XMLHttpRequest")}} that has to be set in order to make the invocation with Cookies, namely the withCredentials boolean value. By default, the invocation is made without Cookies. Since this is a simple GET request, it is not preflighted, but the browser will reject any response that does not have the {{HTTPHeader("Access-Control-Allow-Credentials")}}: true header, and not make the response available to the invoking web content.

+ +

+ +

Here is a sample exchange between client and server:

+ +
GET /resources/access-control-with-credentials/ HTTP/1.1
+Host: bar.other
+User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
+Accept-Language: en-us,en;q=0.5
+Accept-Encoding: gzip,deflate
+Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
+Connection: keep-alive
+Referer: http://foo.example/examples/credential.html
+Origin: http://foo.example
+Cookie: pageAccess=2
+
+
+HTTP/1.1 200 OK
+Date: Mon, 01 Dec 2008 01:34:52 GMT
+Server: Apache/2.0.61 (Unix) PHP/4.4.7 mod_ssl/2.0.61 OpenSSL/0.9.7e mod_fastcgi/2.4.2 DAV/2 SVN/1.4.2
+X-Powered-By: PHP/5.2.6
+Access-Control-Allow-Origin: http://foo.example
+Access-Control-Allow-Credentials: true
+Cache-Control: no-cache
+Pragma: no-cache
+Set-Cookie: pageAccess=3; expires=Wed, 31-Dec-2008 01:34:53 GMT
+Vary: Accept-Encoding, Origin
+Content-Encoding: gzip
+Content-Length: 106
+Keep-Alive: timeout=2, max=100
+Connection: Keep-Alive
+Content-Type: text/plain
+
+
+[text/plain payload]
+
+ +

Although line 11 contains the Cookie destined for the content on http://bar.other, if bar.other did not respond with an {{HTTPHeader("Access-Control-Allow-Credentials")}}: true (line 19) the response would be ignored and not made available to web content.

+ +

Solicitações credenciadas e curingas (wildcards)

+ +

When responding to a credentialed request, the server must specify an origin in the value of the Access-Control-Allow-Origin header, instead of specifying the "*" wildcard.

+ +

Because the request headers in the above example include a Cookie header, the request would fail if the value of the Access-Control-Allow-Origin header were "*". But it does not fail: Because the value of the Access-Control-Allow-Origin header is "http://foo.example" (an actual origin) rather than the "*" wildcard, the credential-cognizant content is returned to the invoking web content.

+ +

Note that the Set-Cookie response header in the example above also sets a further cookie. In case of failure, an exception—depending on the API used—is raised.

+ +

All of these examples can be seen working here. The next section deals with the actual HTTP headers.

+ +

Os cabeçalhos de resposta HTTP

+ +

This section lists the HTTP response headers that servers send back for access control requests as defined by the Cross-Origin Resource Sharing specification. The previous section gives an overview of these in action.

+ +

Access-Control-Allow-Origin

+ +

A returned resource may have one {{HTTPHeader("Access-Control-Allow-Origin")}} header, with the following syntax:

+ +
Access-Control-Allow-Origin: <origin> | *
+
+ +

The origin parameter specifies a URI that may access the resource. The browser must enforce this. For requests without credentials, the server may specify "*" as a wildcard, thereby allowing any origin to access the resource.

+ +

For example, to allow http://mozilla.org to access the resource, you can specify:

+ +
Access-Control-Allow-Origin: http://mozilla.org
+ +

If the server specifies an origin host rather than "*", then it could also include Origin in the Vary response header to indicate to clients that server responses will differ based on the value of the Origin request header.

+ +

Access-Control-Expose-Headers

+ +

The {{HTTPHeader("Access-Control-Expose-Headers")}} header lets a server whitelist headers that browsers are allowed to access. For example:

+ +
Access-Control-Expose-Headers: X-My-Custom-Header, X-Another-Custom-Header
+
+ +

This allows the X-My-Custom-Header and X-Another-Custom-Header headers to be exposed to the browser.

+ +

Access-Control-Max-Age

+ +

The  {{HTTPHeader("Access-Control-Max-Age")}} header indicates how long the results of a preflight request can be cached. For an example of a preflight request, see the above examples.

+ +
Access-Control-Max-Age: <delta-seconds>
+
+ +

The delta-seconds parameter indicates the number of seconds the results can be cached.

+ +

Access-Control-Allow-Credentials

+ +

The {{HTTPHeader("Access-Control-Allow-Credentials")}} header Indicates whether or not the response to the request can be exposed when the credentials flag is true.  When used as part of a response to a preflight request, this indicates whether or not the actual request can be made using credentials. Note that simple GET requests are not preflighted, and so if a request is made for a resource with credentials, if this header is not returned with the resource, the response is ignored by the browser and not returned to web content.

+ +
Access-Control-Allow-Credentials: true
+
+ +

Credentialed requests are discussed above.

+ +

Access-Control-Allow-Methods

+ +

O {{HTTPHeader("Access-Control-Allow-Methods")}} cabeçalho especifica o método ou os métodos permitidos ao acessar o recurso. Isso é usado em resposta há uma requisição preflight. As condições na qual a requisição é preflight são discutidas à seguir.

+ +
Access-Control-Allow-Methods: <method>[, <method>]*
+
+ +

An example of a preflight request is given above, including an example which sends this header to the browser.

+ +

Access-Control-Allow-Headers

+ +

The {{HTTPHeader("Access-Control-Allow-Headers")}} header is used in response to a preflight request to indicate which HTTP headers can be used when making the actual request.

+ +
Access-Control-Allow-Headers: <field-name>[, <field-name>]*
+
+ +

Os cabeçalhos de solicitação HTTP

+ +

This section lists headers that clients may use when issuing HTTP requests in order to make use of the cross-origin sharing feature. Note that these headers are set for you when making invocations to servers. Developers using cross-site {{domxref("XMLHttpRequest")}} capability do not have to set any cross-origin sharing request headers programmatically.

+ +

Origin

+ +

The {{HTTPHeader("Origin")}} header indicates the origin of the cross-site access request or preflight request.

+ +
Origin: <origin>
+
+ +

The origin is a URI indicating the server from which the request initiated.  It does not include any path information, but only the server name.

+ +
Note: The origin can be the empty string; this is useful, for example, if the source is a data URL.
+ +

Note that in any access control request, the {{HTTPHeader("Origin")}} header is always sent.

+ +

Access-Control-Request-Method

+ +

The {{HTTPHeader("Access-Control-Request-Method")}} is used when issuing a preflight request to let the server know what HTTP method will be used when the actual request is made.

+ +
Access-Control-Request-Method: <method>
+
+ +

Examples of this usage can be found above.

+ +

Access-Control-Request-Headers

+ +

The {{HTTPHeader("Access-Control-Request-Headers")}} header is used when issuing a preflight request to let the server know what HTTP headers will be used when the actual request is made.

+ +
Access-Control-Request-Headers: <field-name>[, <field-name>]*
+
+ +

Examples of this usage can be found above.

+ +

Especificações

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Fetch', '#cors-protocol', 'CORS')}}{{Spec2('Fetch')}}New definition; supplants W3C CORS specification.
+ +

Compatibilidade entre Navegadores

+ + + +

{{Compat("http.headers.Access-Control-Allow-Origin")}}

+ +

Notas de compatibilidade

+ +
    +
  • Internet Explorer 8 and 9 expose CORS via the XDomainRequest object, but have a full implementation in IE 10. 
    • +
  • While Firefox 3.5 introduced support for cross-site XMLHttpRequests and Web Fonts, certain requests were limited until later versions. Specifically, Firefox 7 introduced the ability for cross-site HTTP requests for WebGL Textures, and Firefox 9 added support for Images drawn on a canvas using drawImage.
    • +
+ +

Veja também

+ + diff --git "a/files/pt-br/web/http/gerenciamento_de_conex\303\243o_em_http_1.x/index.html" "b/files/pt-br/web/http/gerenciamento_de_conex\303\243o_em_http_1.x/index.html" deleted file mode 100644 index c67e52b062..0000000000 --- "a/files/pt-br/web/http/gerenciamento_de_conex\303\243o_em_http_1.x/index.html" +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: Gerenciamento de Conexão em HTTP/1.x -slug: Web/HTTP/Gerenciamento_de_Conexão_em_HTTP_1.x -tags: - - Guide - - Guía - - HTTP - - Short-lived - - Web - - conexões - - performace - - sharding -translation_of: Web/HTTP/Connection_management_in_HTTP_1.x ---- -

Gerenciamento de Conexão é um tema central em HTTP: abertura e manutenção de conexões e em grande parte tem impacto sobre o desempenho de Web sites e aplicações Web. Existem vários modelos, em HTTP/1.x: ligações de curta duração, conexões persistentes, canalização e HTTP (HTTP pipelining).

- -

HTTP é um protocolo de transporte que fornece conexão entre o cliente e o servidor geralmente depende de TCP. Em sua infância, HTTP usava um único modelo para lidar com tais conexões. Sua conexão é de curta duração. Essas conexões foram de curta duração: criado um novo cada vez que enviar um pedido necessário, e fechado uma vez a resposta tinha sido recebida.

- -

Este simples modelo realiza uma limitação inata em desempenho: a abertura de cada uma das conexões TCP é uma operação de consumo de recursos.Várias mensagens devem ser trocadas entre o cliente e o servidor. Latência de rede e largura de banda afetam o desempenho quando precisa de uma solicitação de envio. Páginas de Web modernas exigem muitos pedidos (uma dúzia ou mais) para servir a quantidade de informação necessária, provando este modelo anterior ineficiente.

- -

Dois novos modelos foram criados no HTTP/1.1.

- -
    -
  1. O modelo de conexão persistente, mantém conexões abertas entre solicitações sucessivas, reduzindo o tempo necessário para abrir novas conexões.
    2. -
  2. O modelo de pipelining HTTP, vai um passo além, enviando várias solicitações sucessivas sem nem esperar por uma resposta, reduzindo em grande parte a latência da rede.
    3. -
- -

Compares the performance of the three HTTP/1.x connection models: short-lived connections, persistent connections, and HTTP pipelining.

- -
-

HTTP/2 Adiciona modelos adicionais para o gerenciamento de conexão.

-
- -

Um ponto importante para observar, que gerenciamento de conexão HTTP, aplica-se para a conexão entre dois nós consecutivos, que é o hop-by-hop e não end-to-end . O modelo usado em conexões entre um cliente e seu primeiro proxy pode diferir do modelo entre um proxy e o servidor de destino (ou qualquer proxies intermédios). Os cabeçalhos HTTP envolvidos na definição do modelo de conexão, como {{HTTPHeader("Connection")}} e {{HTTPHeader("Keep-Alive")}}, são hop-by-hop, cabeçalhos com seus valores poderão ser alterados por nós intermediários.

- -

Short-lived connections (Conexões de curta duração)

- -

O modelo original de HTTP e o padrão HTTP/1.0, é short-lived connections (conexões de curta duração). Cada solicitação HTTP é concluída na sua própria conexão; Isto significa que um handshake TCP acontece antes de cada solicitação HTTP, e estas são serializadas.

- -

O handshake TCP em si é demorado, mas uma conexão TCP adapta-se a sua carga, tornando-se mais eficiente com mais conexões sustentadas (ou aquecidas). Conexões de curta duração não fazem uso desse recurso de eficiência do TCP, e degrada o desempenho do ideal persistindo para transmitir mais de uma conexão nova, frio.

- -

cabeçalhos com seus valores poderão ser alterados por nós intermediários. (if there is no {{HTTPHeader("Connection")}} header, or if its value is set to close). Em HTTP/1.1 este modelo é apenas usado quando o {{HTTPHeader("Connection")}}cabeçalho é enviado com um valor de fechamento.

- -
A menos que lidemos com um sistema muito antigo, que não suporta uma conexão persistente, não há nenhuma razão convincente para usar este modelo.
- -

Conexões Persistentes

- -

Short-lived connections (conexões de curta duração) tem dois grandes problemas: o tempo necessário para estabelecer uma nova conexão é significativo, e desempenho da conexão TCP subjacente melhora somente quando esta conexão tem sido usado há algum tempo (conexão quente). Para aliviar estes problemas, foi concebido o conceito de uma conexão persistente, mesmo antes de HTTP/1.1. Alternativamente, este pode ser chamado uma conexão keep-alive.

- -

É uma conexão persistente que permanece aberto por um período e pode ser reutilizado por vários pedidos, salvando a necessidade de um novo handshake TCP, e utilizando recursos para melhorar o desempenho do TCP. Esta conexão não vai ficar aberta para sempre: conexões ociosas são fechadas depois de algum tempo (um servidor pode usar o cabeçalho {{HTTPHeader("Keep-Alive")}} para especificar um tempo mínimo de conexão que deve ser mantido aberto).

- -

Conexões persistentes também têm desvantagens, mesmo quando em marcha lenta eles consomem recursos do servidor e sob pesada carga, pode efetuar-se {{glossary("DoS attack", "DoS attacks")}}. Em tais casos, usar conexões não-persistentes, que estão fechadas, assim como elas estão ociosas, pode fornecer um melhor desempenho.HTTP/1.0 as conexões sem persistencia por default.Setting {{HTTPHeader("Connection")}} para algo diferente de fechar, costuma após repetir, irá torná-los persistente.

- -

Em HTTP/1.1, persistencia é o padrão e o cabeçalho não é mais necessário (mas ele é adicionado frequentemente como uma medida defensiva contra casos que exigem um fallback para HTTP/1.0).

- -

HTTP pipelining

- -
-

HTTP o pipelining não é ativado por padrão em navegadores modernos:

- -
    -
  • Buggy proxies são ainda comuns e eles levam a comportamentos estranhos e erráticos que desenvolvedores Web não podem prever e diagnosticar facilmente.
    • -
  • Pipelining é complexo para implementar corretamente: o tamanho do recurso a ser transferido, a efetiva RTT que será usado, bem como a largura de banda efetiva, têm uma incidência direta na melhoria fornecida pelo pipeline. Sem conhecer eles, mensagens importantes podem ser atrasadas por detrás aqueles sem importância. A noção de importante mesmo evolui durante o layout de página! Pipeline HTTP, portanto, traz uma melhoria marginal na maioria dos casos apenas.
    • -
  • Pipelining está sujeito à problema HOL.
    • -
- -

Por estas razões, o pipelining tem sido substituído por um algoritmo melhor, multiplexação, que é usado pelo HTTP/2.

-
- -

Por padrão, HTTP as solicitações são emitidas sequencialmente. A próxima solicitação só é emitida depois que recebeu a resposta para a solicitação atual. Como eles são afetados pelas latências de rede e as limitações de largura de banda, isso pode resultar em atrasos significativos antes que a próxima solicitação é vista pelo servidor.

- -

Pipelining é o processo para enviar solicitações sucessivas, sobre a mesma conexão persistente, sem esperar pela resposta. Isso evita a latência da conexão. Teoricamente, desempenho também poderia ser melhorado se duas solicitações HTTP para ser embalado na mesma mensagem TCP. O MSS típico (tamanho máximo de segmento), é grande o suficiente para conter várias solicitações simples, embora a demanda em tamanho de solicitações HTTP continua a crescer.

- -

Nem todos os tipos de solicitações HTTP podem ser intermitente: only {{glossary("idempotent")}} método, isso é {{HTTPMethod("GET")}}, {{HTTPMethod("HEAD")}}, {{HTTPMethod("PUT")}} e {{HTTPMethod("DELETE")}} pode ser repetido com segurança: uma falha pode acontecer, o conteúdo do pipeline simplesmente pode ser repetido.

- -

Hoje, cada proxy HTTP/1.1-compatível e servidor devem apoiar o pipelining, embora muitos têm limitações na prática: uma razão significativa, nenhum navegador moderno ativa esse recurso por padrão.

- -

Domain sharding

- -
-A menos que você tem uma necessidade muito específica e imediata, não use esta técnica depreciada; Mude para HTTP/2 ao invéz. Em HTTP/2, sharding domínio não é mais útil: a conexão HTTP/2 é capaz de manipular as solicitações sem prioridades paralelas muito bem. Sharding domínio é mesmo prejudicial ao desempenho. A maioria dos implementação de HTTP/2 usam uma técnica chamada connection coalescing para reverter o sharding de domínio eventual. -
- -

Como uma conexão de HTTP/1.x está serializando solicitações, mesmo sem qualquer ordenação, não pode ser ideal sem largura de banda grande o suficiente disponível. Como uma solução, os navegadores abrir várias conexões para cada domínio, enviando solicitações paralelas. Era padrão conexões de 2 a 3, mas isto agora aumentou para um uso mais comum de 6 conexões paralelas. Há um risco de provocar proteção DoS no lado do servidor, se tentar mais do que este número.

- -

Se o servidor deseja um site de Web mais rápido ou resposta do aplicativo, é possível para o servidor forçar a abertura de mais conexões. Por exemplo, em vez de ter todos os recursos no mesmo domínio, diz www.example.com, poderia dividir em vários domínios, www1.example.com, www2.example.com, www3.example.com. Cada um destes domínios resolver acessar o mesmo servidor e o navegador da Web abrirá 6 conexões para cada (no nosso exemplo, impulsionando as conexões para 18). Esta técnica é chamada sharding do domínio.

- -

- -

Conclusão

- -
-
Gerenciamento de conexão melhorada permite considerável aumento de desempenho em HTTP. Com HTTP/1.1 ou HTTP/1.0, usando uma conexão persistente – pelo menos até que se torne ocioso – levando para o melhor desempenho. No entanto, o falha do pipelining tem levado para a concepção de modelos de gestão de conexão superior, que foram incorporados ao HTTP/2.
-
diff --git "a/files/pt-br/web/http/headers/conex\303\243o/index.html" "b/files/pt-br/web/http/headers/conex\303\243o/index.html" deleted file mode 100644 index b8df737d95..0000000000 --- "a/files/pt-br/web/http/headers/conex\303\243o/index.html" +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: Connection -slug: Web/HTTP/Headers/Conexão -tags: - - Cabeçalhos - - HTTP - - Reference - - Referencia - - Web -translation_of: Web/HTTP/Headers/Connection ---- -
{{HTTPSidebar}}
- -

O cabeçalho Connection controla se a conexão se mantém aberta ou não após o término da transação atual. Se o valor for keep-alive, a conexão é persistente e não fecha, permitindo que requisições futuras ao mesmo servidor sejam feitas.

- -
-

Nota: Campos de cabeçalho de conexão específica como Connection não devem ser usados com HTTP/2.

-
- -

Exceto pelos cabeçalhos padrões hop-by-hop (salto-por-salto)  ({{HTTPHeader("Keep-Alive")}}, {{HTTPHeader("Transfer-Encoding")}}, {{HTTPHeader("TE")}}, {{HTTPHeader("Connection")}}, {{HTTPHeader("Trailer")}}, {{HTTPHeader("Upgrade")}}, {{HTTPHeader("Proxy-Authorization")}} e {{HTTPHeader("Proxy-Authenticate")}}), quaisquer cabeçalhos hop-by-hop usados pela mensagem devem estar listados no cabeçalho Connection, para que o primeiro proxy saiba que tem que consumi-los e não repassá-los além. Os cabeçalhos hop-by-hop padrões podem ser listados também (como é o caso do {{HTTPHeader("Keep-Alive")}}, mas não é obrigatório).

- - - - - - - - - - - - -
Tipo de cabeçalho{{Glossary("General header")}}
{{Glossary("Forbidden header name")}}sim
- -

Sintaxe

- -
Connection: keep-alive
-Connection: close
-
- -

Diretivas

- -
-
close
-
Indica que ou o cliente, ou o servidor querem fechar a conexão. Este é o valor padrão em requisições HTTP/1.0.
-
qualquer lista de cabelhaços HTTP separados por vírgulas [Geralmente apenas o keep-alive ]
-
Indica que o cliente gostaria de manter a ligação aberta. Ter uma conexão persistente é o valor padrão das requisições HTTP/1.1. A lista de cabeçalhos são os nomes dos cabeçalhos a serem removidos pelo primeiro proxy não-transparente ou com "cache no meio": estes cabeçalhos definem a conexão entre o emissor e a primeira entidade, não o nó destinatário.
-
- -

Browser compatibility

- - - -

{{Compat("http.headers.Connection")}}

diff --git a/files/pt-br/web/http/headers/connection/index.html b/files/pt-br/web/http/headers/connection/index.html new file mode 100644 index 0000000000..b8df737d95 --- /dev/null +++ b/files/pt-br/web/http/headers/connection/index.html @@ -0,0 +1,54 @@ +--- +title: Connection +slug: Web/HTTP/Headers/Conexão +tags: + - Cabeçalhos + - HTTP + - Reference + - Referencia + - Web +translation_of: Web/HTTP/Headers/Connection +--- +
{{HTTPSidebar}}
+ +

O cabeçalho Connection controla se a conexão se mantém aberta ou não após o término da transação atual. Se o valor for keep-alive, a conexão é persistente e não fecha, permitindo que requisições futuras ao mesmo servidor sejam feitas.

+ +
+

Nota: Campos de cabeçalho de conexão específica como Connection não devem ser usados com HTTP/2.

+
+ +

Exceto pelos cabeçalhos padrões hop-by-hop (salto-por-salto)  ({{HTTPHeader("Keep-Alive")}}, {{HTTPHeader("Transfer-Encoding")}}, {{HTTPHeader("TE")}}, {{HTTPHeader("Connection")}}, {{HTTPHeader("Trailer")}}, {{HTTPHeader("Upgrade")}}, {{HTTPHeader("Proxy-Authorization")}} e {{HTTPHeader("Proxy-Authenticate")}}), quaisquer cabeçalhos hop-by-hop usados pela mensagem devem estar listados no cabeçalho Connection, para que o primeiro proxy saiba que tem que consumi-los e não repassá-los além. Os cabeçalhos hop-by-hop padrões podem ser listados também (como é o caso do {{HTTPHeader("Keep-Alive")}}, mas não é obrigatório).

+ + + + + + + + + + + + +
Tipo de cabeçalho{{Glossary("General header")}}
{{Glossary("Forbidden header name")}}sim
+ +

Sintaxe

+ +
Connection: keep-alive
+Connection: close
+
+ +

Diretivas

+ +
+
close
+
Indica que ou o cliente, ou o servidor querem fechar a conexão. Este é o valor padrão em requisições HTTP/1.0.
+
qualquer lista de cabelhaços HTTP separados por vírgulas [Geralmente apenas o keep-alive ]
+
Indica que o cliente gostaria de manter a ligação aberta. Ter uma conexão persistente é o valor padrão das requisições HTTP/1.1. A lista de cabeçalhos são os nomes dos cabeçalhos a serem removidos pelo primeiro proxy não-transparente ou com "cache no meio": estes cabeçalhos definem a conexão entre o emissor e a primeira entidade, não o nó destinatário.
+
+ +

Browser compatibility

+ + + +

{{Compat("http.headers.Connection")}}

diff --git "a/files/pt-br/web/http/headers/localiza\303\247\303\243o/index.html" "b/files/pt-br/web/http/headers/localiza\303\247\303\243o/index.html" deleted file mode 100644 index 2b8ebcc404..0000000000 --- "a/files/pt-br/web/http/headers/localiza\303\247\303\243o/index.html" +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: Location -slug: Web/HTTP/Headers/Localização -tags: - - Cabeçalho HTTP - - Cabeçalho de Resposta - - HTTP -translation_of: Web/HTTP/Headers/Location ---- -
{{HTTPSidebar}}
- -

O cabeçalho de resposta Location indica o URL para qual página deve-se ser redirecionada. Ele só tem significado quando é enviado junto a uma resposta de status 3xx (redirecionamento) ou 201 (criado).

- -

Em casos de redirecionamento, o método HTTP utilizado para fazer a nova requisição à página apontada pelo cabeçalho Location depende do método original e do tipo de redirecionamento:

- -
    -
  • Se respostas com status {{HTTPStatus("303")}} (Veja também) sempre levam ao uso do método {{HTTPMethod("GET")}}, {{HTTPStatus("307")}} (Redirecionamento Temporário) e {{HTTPStatus("308")}} (Redirecionamento Permanente) não mudam o método utilizado na requisição original;
    • -
  • {{HTTPStatus("301")}} (Movido Permanentemente) e {{HTTPStatus("302")}} (Encontrado) não mudam o método na maior parte das vezes, entretanto agentes de usuário antigos talvez mudem (basicamente você não sabe se eles farão isso).
    • -
- -

Todas as respostas com um desses códigos de status enviam um cabeçalho Location.

- -

Em casos de recursos de criação, ele indica o URL para o novo recurso criado.

- -

Location e {{HTTPHeader("Content-Location")}} são diferentes: Location indica o alvo de redirecionamento (ou URL do novo recurso criado), enquanto {{HTTPHeader("Content-Location")}} indica o URL direto para ter acesso ao recurso quando negociação de conteúdo acontecer, sem a necessidade de futura negociação de conteúdo. Location é um cabeçalho associado com a resposta, enquanto {{HTTPHeader("Content-Location")}} é associado com a entidade retornada.

- - - - - - - - - - - - -
Tipo de cabeçalho{{Glossary("Response header")}}
{{Glossary("Forbidden header name")}}não
- -

Sintaxe

- -
Location: <url>
-
- -

Diretivas

- -
-
<url>
-
Uma URL relativa (ao URL de requisição) ou absoluta.
-
- -

Exemplos

- -
Location: /index.html
- -

Especificações

- - - - - - - - - - - - -
EspecificaçãoTítulo
{{RFC("7231", "Location", "7.1.2")}}Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content
- -

Compatibilidade de navegadores

- - - -

{{Compat("http.headers.Location")}}

- -

Veja também

- -
    -
  • {{HTTPHeader("Content-Location")}}
    • -
  • Código de status de respostas que incluem o cabeçalho Location: {{HTTPStatus("201")}}, {{HTTPStatus("301")}}, {{HTTPStatus("302")}}, {{HTTPStatus("303")}}, {{HTTPStatus("307")}}, {{HTTPStatus("308")}}.
    • -
diff --git a/files/pt-br/web/http/headers/location/index.html b/files/pt-br/web/http/headers/location/index.html new file mode 100644 index 0000000000..2b8ebcc404 --- /dev/null +++ b/files/pt-br/web/http/headers/location/index.html @@ -0,0 +1,82 @@ +--- +title: Location +slug: Web/HTTP/Headers/Localização +tags: + - Cabeçalho HTTP + - Cabeçalho de Resposta + - HTTP +translation_of: Web/HTTP/Headers/Location +--- +
{{HTTPSidebar}}
+ +

O cabeçalho de resposta Location indica o URL para qual página deve-se ser redirecionada. Ele só tem significado quando é enviado junto a uma resposta de status 3xx (redirecionamento) ou 201 (criado).

+ +

Em casos de redirecionamento, o método HTTP utilizado para fazer a nova requisição à página apontada pelo cabeçalho Location depende do método original e do tipo de redirecionamento:

+ +
    +
  • Se respostas com status {{HTTPStatus("303")}} (Veja também) sempre levam ao uso do método {{HTTPMethod("GET")}}, {{HTTPStatus("307")}} (Redirecionamento Temporário) e {{HTTPStatus("308")}} (Redirecionamento Permanente) não mudam o método utilizado na requisição original;
    • +
  • {{HTTPStatus("301")}} (Movido Permanentemente) e {{HTTPStatus("302")}} (Encontrado) não mudam o método na maior parte das vezes, entretanto agentes de usuário antigos talvez mudem (basicamente você não sabe se eles farão isso).
    • +
+ +

Todas as respostas com um desses códigos de status enviam um cabeçalho Location.

+ +

Em casos de recursos de criação, ele indica o URL para o novo recurso criado.

+ +

Location e {{HTTPHeader("Content-Location")}} são diferentes: Location indica o alvo de redirecionamento (ou URL do novo recurso criado), enquanto {{HTTPHeader("Content-Location")}} indica o URL direto para ter acesso ao recurso quando negociação de conteúdo acontecer, sem a necessidade de futura negociação de conteúdo. Location é um cabeçalho associado com a resposta, enquanto {{HTTPHeader("Content-Location")}} é associado com a entidade retornada.

+ + + + + + + + + + + + +
Tipo de cabeçalho{{Glossary("Response header")}}
{{Glossary("Forbidden header name")}}não
+ +

Sintaxe

+ +
Location: <url>
+
+ +

Diretivas

+ +
+
<url>
+
Uma URL relativa (ao URL de requisição) ou absoluta.
+
+ +

Exemplos

+ +
Location: /index.html
+ +

Especificações

+ + + + + + + + + + + + +
EspecificaçãoTítulo
{{RFC("7231", "Location", "7.1.2")}}Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content
+ +

Compatibilidade de navegadores

+ + + +

{{Compat("http.headers.Location")}}

+ +

Veja também

+ +
    +
  • {{HTTPHeader("Content-Location")}}
    • +
  • Código de status de respostas que incluem o cabeçalho Location: {{HTTPStatus("201")}}, {{HTTPStatus("301")}}, {{HTTPStatus("302")}}, {{HTTPStatus("303")}}, {{HTTPStatus("307")}}, {{HTTPStatus("308")}}.
    • +
diff --git a/files/pt-br/web/http/http/index.html b/files/pt-br/web/http/http/index.html deleted file mode 100644 index 9cfd4d4a0d..0000000000 --- a/files/pt-br/web/http/http/index.html +++ /dev/null @@ -1,157 +0,0 @@ ---- -title: Cacheamento HTTP -slug: Web/HTTP/HTTP -tags: - - Cache - - Cacheamento - - Guía - - HTTP - - Internet - - Rede - - Web -translation_of: Web/HTTP/Caching ---- -
{{HTTPSidebar}}
- -

A performance de websites e aplicações podem ser melhoradas significativamente ao reusar recursos previamente buscados. Caches em web reduzem latência e o tráfego de rede e assim diminuir o tempo necesário para exibir uma representação do recurso. Ao usar caching em HTTP, websites se tornam mais responsivos.

- -

Diferentes tipos de caches

- -

Caching é uma técnica que guarda uma cópia de dado recurso e mostra de volta quando requisitado. Quando um web cache tem um recurso requerido em seu armazenamento, ele intercepta a solicitação e retorna sua cópia ao invés de fazer o download novamente do servidor original. Isto alcança vários objetivos: facilita o balanceamento do servidor que não precisa servir todos os clients sozinho, e melhora a performance por estar próximo do client,  por exemplo, ele leva menos tempo para transmitir o recurso de volta. Para um website, é um componente principal para alcançar alta performance. De outro lado, ele deve ser configurado devidamente pois não são todos os recursos que ficam idênticos para sempre: é importante colocar um recurso em cache somente até que ele mude, não mais que isso. 

- -

Há muitos tipos de caches: estes podem ser agrupados em duas categorias principais, caches privados ou compartilhados. Um cache compartilhado é um cache que armazena respostas para serem reusadas por mais de um usuário. Um cache privado é dedicado a um único usuário. Esta página irá falar principalmente sobre caches em navegadores e em proxy, mas há também caches de gateway, CDN, cache de proxy reverso e balanceadores de carga (load balancers) que são implantados em servers da web para melhor confiabilidade, desempenho e dimensionamento de sites e aplicativos da web.

- -

What a cache provide, advantages/disadvantages of shared/private caches.

- -

Caches privados de browser

- -

Um cache privado é dedicado para um único usuário. Você já pode ter visto "caching" nas configurações de seu navegador. Um cache de browser guarda todos os documentos que foram baixados via HTTP pelo usuário. Este cache é usado para tornar disponíveis documentos visitados para navegação "para frente e para trás" (ou back/forward, em Inglês), salvar, ver como fonte, etc. sem exigir uma viagem para o servidor. Também melhora a navegação offline de conteúdo em cache.

- -

Caches de proxy compartilhada

- -

Uma cache compartilhada é uma cache que armazena respostas para serem reusadas por mais de um usuário. Por exemplo, um fornecedor de acesso à internet ou sua empresa pode ter definido uma web proxy como parte de sua infraestrutura de rede local para servir muitos usuários para que recursos populares sejam reusados numerosas vezes, reduzindo o tráfego de rede e latência.

- -

Alvos de operações de cache

- -

Fazer cache de HTTP é opcional, mas reusar um recurso em cache é usualmente desejável. No entanto, caches HTTP comuns são tipicamente limitados a respostas em cache para {{HTTPMethod("GET")}} e podem declinar outros métodos. As chaves primárias de cache consistem de um método de requisição e um alvo URI (como requisições são alvos de cache, muitas vezes somente o URI é usado). Formas comuns de entrada de cache são:

- -
    -
  • Resultados bem sucedidos de uma requisição: uma resposta {{HTTPStatus(200)}} (OK) para uma requisição {{HTTPMethod("GET")}} contendo recursos como documentos HTML, imagens ou arquivos.
    • -
  • Redirecionamentos permanentes: uma resposta {{HTTPStatus(301)}} (Moved Permanently).
    • -
  • Respostas de erro: um resultado {{HTTPStatus(404)}} (Not Found).
    • -
  • Resultados incompletos: uma resposta {{HTTPStatus(206)}} (Partial Content).
    • -
  • Outras respostas que não sejam {{HTTPMethod("GET")}} se algo mais adequado para uso como chave de cache é definido.
    • -
- -

Uma entrada de cache pode também consistir de múltiplas respostas armazenadas diferenciadas por uma chave secundária, se a requisição é alvo de negociação de conteúdo. Para mais detalhes veja a informação sobre o cabeçalho {{HTTPHeader("Vary")}} abaixo.

- -

Controlando cache

- -

O cabeçalho Cache-control

- -

O cabeçalho-geral {{HTTPHeader("Cache-Control")}} HTTP/1.1 é usado para especificar diretivas para mecanismos de cache em ambas requisições e respostas. Use este cabeçalho para definir suas políticas de cache com a variedade de diretivas que fornece.

- -

Não usar armazenamento de cache

- -

O cache não deve armazenar nada sobre a requisição do cliente ou a resposta do servidor. Uma requisição é enviada ao servidor e uma resposta completa é baixada por cada e toda vez.

- -
Cache-Control: no-store
-Cache-Control: no-cache, no-store, must-revalidate
-
- -

Sem fazer cache

- -

Um cache irá enviar a requisição ao servidor de origem para validação antes de liberar uma cópia em cache. 

- -
Cache-Control: no-cache
- -

Caches privados e públicos

- -

A diretiva "public" indica que a resposta pode ser colocada em cache por qualquer cache. Isto pode ser útil, se páginas com autenticação HTTP ou códigos de status de resposta que não são normalmente colocadas em cache, devem agora ser colocadas. Por outro lado, "private" indica que a resposta é para um único usuário somente e não deve ser armazenada por um cache compartilhado. Um cache privado de navegador pode armazenar a resposta neste caso.

- -
Cache-Control: private
-Cache-Control: public
-
- -

Data de validade

- -

A diretiva mais importante aqui é "max-age=<seconds>" que é a quantidade máxima de tempo que um recurso será considerado "fresco". Contrário ao {{HTTPHeader("Expires")}}, esta diretiva é relativa ao tempo da requisição. Para os arquivos na aplicação que não irão mudar, você pode normalmente adicionar cache agressivamente. Isto inclui arquivos estáticos como imagens, arquivos CSS e Javascript, por exemplo.

- -

Para mais detalhes, veja também a seção Tempo de Vida abaixo.

- -
Cache-Control: max-age=31536000
- -

Validação

- -

Quando usamos a diretiva "must-revalidate", o cache deve verificar o status dos recursos obsoletos antes de os usar e os expirados não deverão ser usados. Para mais detalhes, veja a seção Validation abaixo.

- -
Cache-Control: must-revalidate
- -

O header Pragma

- -

{{HTTPHeader("Pragma")}} é um header HTTP/1.0, não é especificado para respostas HTTP e não é, assim, uma reposição confiável para o cabeçalho geral HTTP/1.1 Cache-Control, apesar de se comportar da mesma forma que Cache-Control: no-cache, se o campo do cabeçalho Cache-Control é omitido em uma requisição.Use Pragma somente para compatibilidade com clients HTTP/1.0 mais antigos

- -

Tempo de Vida

- -

Quando um recurso é armazenado em um cache, ele poderia teoricamente ser servido para sempre. Caches possuem armazenamento finito então itens são periodicamente removidos do armazenamento. Esse processo é chamado de despejo de cache. Por outro lado, alguns recursos podem mudar no servidor fazendo com que o cache fique desatualizado. Como o HTTP é um protocolo cliente-servidor, os servidores não podem contatar caches e clientes quando um recurso é alterado; eles precisam comunicar um tempo de expiração para o recurso. Antes deste período de expiração, o recurso é novo; após o tempo de expiração, o recurso é obsoleto. Os algoritmos de despejo geralmente privilegiam recursos novos em vez de recursos obsoletos. Observe que um recurso obsoleto não é despejado ou ignorado; quando o cache recebe uma solicitação para um recurso obsoleto, ele encaminha essa solicitação com um {{HTTPHeader ("If-None-Match")}} para verificar se, de fato, ainda está fresco. Em caso afirmativo, o servidor retorna um cabeçalho {{HTTPStatus ("304")}} (Não modificado) sem enviar o corpo do recurso solicitado, economizando alguma largura de banda.

- -

Here is an example of this process with a shared cache proxy:

- -

Show how a proxy cache acts when a doc is not cache, in the cache and fresh, in the cache and stale.

- -

O tempo de Vida é calculado beaseado em vários headers. Se o "Cache-control: max-age=N" header é especificado, então o tempo de vida é igual a N. Se este header não está presente, o que ocorre com frequência, ele checa se um {{HTTPHeader("Expires")}} heade está presente. Se um Expires header existe, então é o valor menos o valor do {{HTTPHeader("Date")}} header determina o tempo de vida. Finalmente, se nenhum header está presente, procure pelo {{HTTPHeader("Last-Modified")}} header. Se este header está presente, então o tempo de vidaé igual ao valor do  Date header menos o valor do Last-modified header dividido por 10.
- O valor de expiração é computado por:

- -
expirationTime = responseTime + freshnessLifetime - currentAge
-
- -

No qual responseTimeé o tempo em que a resposta é recebida de acordo com o navegador.

- -

Revved resources

- -

The more we use cached resources, the better the responsiveness and the performance of a Web site will be. To optimize this, good practices recommend to set expiration times as far in the future as possible. This is possible on resources that are regularly updated, or often, but is problematic for resources that are rarely and infrequently updated. They are the resources that would benefit the most from caching resources, yet this makes them very difficult to update. This is typical of the technical resources included and linked from each Web pages: JavaScript and CSS files change infrequently, but when they change you want them to be updated quickly.

- -

Web developers invented a technique that Steve Souders called revving[1]. Infrequently updated files are named in specific way: in their URL, usually in the filename, a revision (or version) number is added. That way each new revision of this resource is considered as a resource on its own that never changes and that can have an expiration time very far in the future, usually one year or even more. In order to have the new versions, all the links to them must be changed, that is the drawback of this method: additional complexity that is usually taken care of by the tool chain used by Web developers. When the infrequently variable resources change they induce an additional change to often variable resources. When these are read, the new versions of the others are also read.

- -

This technique has an additional benefit: updating two cached resources at the same time will not lead to the situation where the out-dated version of one resource is used in combination with the new version of the other one. This is very important when web sites have CSS stylesheets or JS scripts that have mutual dependencies, i.e., they depend on each other because they refer to the same HTML elements.

- -

- -

The revision version added to revved resources doesn't need to be a classical revision string like 1.1.3, or even a monotonously growing suite of number. It can be anything that prevent collisions, like a hash or a date.

- -

Cache validation

- -

Revalidation is triggered when the user presses the reload button. It is also triggered under normal browsing if the cached response includes the "Cache-control: must-revalidate" header. Another factor is the cache validation preferences in the Advanced->Cache preferences panel. There is an option to force a validation each time a document is loaded.

- -

When a cached document's expiration time has been reached, it is either validated or fetched again. Validation can only occur if the server provided either a strong validator or a weak validator.

- -

ETags

- -

The {{HTTPHeader("ETag")}} response header is an opaque-to-the-useragent value that can be used as a strong validator. That means that a HTTP user-agent, such as the browser, does not know what this string represents and can't predict what its value would be. If the ETag header was part of the response for a resource, the client can issue an {{HTTPHeader("If-None-Match")}} in the header of future requests – in order to validate the cached resource.

- -

The {{HTTPHeader("Last-Modified")}} response header can be used as a weak validator. It is considered weak because it only has 1-second resolution. If the Last-Modified header is present in a response, then the client can issue an {{HTTPHeader("If-Modified-Since")}} request header to validate the cached document.

- -

When a validation request is made, the server can either ignore the validation request and response with a normal {{HTTPStatus(200)}} OK, or it can return {{HTTPStatus(304)}} Not Modified (with an empty body) to instruct the browser to use its cached copy. The latter response can also include headers that update the expiration time of the cached document.

- -

Varying responses

- -

The {{HTTPHeader("Vary")}} HTTP response header determines how to match future request headers to decide whether a cached response can be used rather than requesting a fresh one from the origin server.

- -

When a cache receives a request that can be satisfied by a cached response that has a Vary header field, it must not use that cached response unless all header fields as nominated by the Vary header match in both the original (cached) request and the new request.

- -

The Vary header leads cache to use more HTTP headers as key for the cache.

- -

This can be useful for serving content dynamically, for example. When using the Vary: User-Agent header, caching servers should consider the user agent when deciding whether to serve the page from cache. If you are serving different content to mobile users, it can help you to avoid that a cache may mistakenly serve a desktop version of your site to your mobile users. In addition, it can help Google and other search engines to discover the mobile version of a page, and might also tell them that no Cloaking is intended.

- -
Vary: User-Agent
- -

Because the {{HTTPHeader("User-Agent")}} header value is different ("varies") for mobile and desktop clients, caches will not be used to serve mobile content mistakenly to desktop users or vice versa.

- -

See also

- - diff --git a/files/pt-br/web/http/mensagens/index.html b/files/pt-br/web/http/mensagens/index.html deleted file mode 100644 index 895c58d2e8..0000000000 --- a/files/pt-br/web/http/mensagens/index.html +++ /dev/null @@ -1,146 +0,0 @@ ---- -title: Mensagens HTTP -slug: Web/HTTP/Mensagens -tags: - - Guía - - HTTP - - Protocolos -translation_of: Web/HTTP/Messages ---- -
{{HTTPSidebar}}
- -

Dados são trocados entre servidor e cliente por meio de mensagens HTTP. Há dois tipos de mensagens: requisições (requests) enviadas pelo cliente para disparar uma ação no servidor, e respostas (responses), a réplica do servidor.

- -

Mensagens HTTP são compostas de informação textual codificada em ASCII, e se espalham por multiplas linhas. Em HTTP/1.1, e versões anteriores do protocolo, estas mensagens eram abertamente enviadas através da conexão. Em HTTP/2, a mensagem antes legível por humanos é agora dividida em quadros HTTP, resultando em otimização e melhora de desempenho.

- -

Desenvolvedores Web, ou webmasters, raramente lidam com essas mensagens textuais diretamente: um programa, um navegador, um proxy, ou um servidor Web, executam essa ação. Eles proveem mensagens HTTP por meio de arquivos de configuração (para  proxys ou servidores), APIs (para navegadores) ou outras interfaces.

- -

From a user-, script-, or server- generated event, an HTTP/1.x msg is generated, and if HTTP/2 is in use, it is binary framed into an HTTP/2 stream, then sent.

- -

O mecanismo de enquadramento binário foi projetado de modo a não requerer qualquer alteração das APIs ou arquivos de configuração aplicados: ele é transparente para o usuário.

- -

Requisições e respostas HTTP compartilham estrutura similar e são compostas de:

- -
    -
  1. Uma linha inicial (start-line) que descreve as requisições a serem implementadas, ou seu status de sucesso ou falha. Esta linha inicial é sempre uma única.
    2. -
  2. Um conjunto opcional de cabeçalhos HTTP especificando a requisição, ou descrevendo o corpo incluso na mensagem.
    3. -
  3. Uma linha em branco (empty line) indicando que toda meta-informação para a requisição já foi enviada.
    4. -
  4. Um corpo (body) contendo dados associados à requisição (como o conteúdo de um formulário HTML), ou o documento associado à resposta. A presença do corpo e seu tamanho são especificados pela linha inicial e os cabeçalhos HTTP.
    5. -
- -

A linha inicial e os cabeçalhos HTTP da mensagem HTTP são conjuntamente chamados de cabeça (head) da requisição, enquanto o que ela carrega, a sua carga, é conhecida como corpo.

- -

Requests and responses share a common structure in HTTP

- -

Requisições HTTP

- -

Linha inicial

- -

Requisições HTTP são mensagens enviadas pelo cliente para iniciar uma ação no servidor. Suas linhas iniciais contêm três elementos:

- -
    -
  1. Um método HTTP, um verbo (como {{HTTPMethod("GET")}}, {{HTTPMethod("PUT")}} ou {{HTTPMethod("POST")}}) ou um nome (como {{HTTPMethod("HEAD")}} ou {{HTTPMethod("OPTIONS")}}), que descrevem a ação a ser executada. Por exemplo, GET indica que um recurso deve ser obtido ou POST significa que dados são inseridos no servidor (criando ou modificando um recurso, ou gerando um documento temporário para mandar de volta).
    2. -
  2. O alvo da requisição, normalmente um {{glossary("URL")}}, ou o caminho absoluto do protocolo, porta e domínio são em geral caracterizados pelo contexto da requisição. O formato deste alvo varia conforme o método HTTP. Pode ser -
      -
    • Um caminho absoluto, seguido de um '?' e o texto da consulta. Esta é a forma mais comum, conhecida como a forma original, e é usada com os métodos GET, POST, HEAD, e OPTIONS.
      - POST / HTTP/1.1
      - GET /background.png HTTP/1.0
      - HEAD /test.html?query=alibaba HTTP/1.1
      - OPTIONS /anypage.html HTTP/1.0
      • -
    • Uma URL completa, conhecida como a forma absoluta, usada principalmente com GET quando conectado a um proxy.
      - GET http://developer.mozilla.org/en-US/docs/Web/HTTP/Messages HTTP/1.1
      • -
    • O componente autoridade de um URL, que consiste no nome do domínio e opcionalmente uma porta (prefixada por ':'), chamada de forma autoridade. Só usada com CONNECT ao estabelecer um túnel HTTP.
      - CONNECT developer.mozilla.org:80 HTTP/1.1
      • -
    • A  forma asterisco, um simples asterisco ('*'), usada com OPTIONS. Representa o servidor como um todo.
      - OPTIONS * HTTP/1.1
      • -
    -
    3. -
  3. A  versão HTTP, que define a estrutura do restante da mensagem, atuando como um indicador da versão esperada para uso na resposta.
    4. -
- -

Cabeçalhos

- -

Cabeçalhos HTTP de uma requisição seguem a mesma estrutura básica de um cabeçalho HTTP: uma cadeia de caracteres insensível à caixa seguida de dois pontos (':') e um valor cuja estrutura depende do cabeçalho. O cabeçalho inteiro, incluindo o valor, consiste em uma única linha, que pode ser bem grande.

- -

Há numerosos cabeçalhos de requisição disponíveis. Eles podem ser divididos em vários grupos:

- -
    -
  • Cabeçalhos gerais, como {{HTTPHeader("Via")}},  se aplicam à mensagem como um todo.
    • -
  • Cabeçalhos de requisição, como {{HTTPHeader("User-Agent")}}, {{HTTPHeader("Accept-Type")}}, modificam a requisição, especificando-a mais (como {{HTTPHeader("Accept-Language")}}), dando-a contexto (como {{HTTPHeader("Referer")}}), ou restringindo-a condicionalmente (como {{HTTPHeader("If-None")}}).
    • -
  • Cabeçalhos de entidade, como {{HTTPHeader("Content-Length")}} que se aplicam ao corpo da mensagem. Obviamente este cabeçalho não será transmitido se não houver corpo na requisição.
    • -
- -

Example of headers in an HTTP request

- -

Corpo

- -

A parte final da requisição é o corpo. Nem todas as requisições tem um: as que pegam recursos, como GET, HEAD, DELETE, ou OPTIONS, usualmente não precisam de um. Algumas requisições enviam dados ao servidor a fim de atualizá-lo: é o caso frequente de requisições POST (contendo dados de formulário HTML).

- -

Corpos podem ser divididos, a grosso modo, em duas categorias:

- -
    -
  • Corpos de recurso-simples, consistindo em um único arquivo, definido pelos dois cabeçalhos: {{HTTPHeader("Content-Type")}} e {{HTTPHeader("Content-Length")}}.
    • -
  • Corpos de recurso-múltiplo, consistindo em um corpo de múltiplas partes, cada uma contendo uma porção diferente de informação. Este é tipicamente associado à Formulários HTML.
    • -
- -

Respostas HTTP

- -

Linha de status

- -

A linha inicial de uma resposta HTTP, chamada de linha de status, contém a seguinte informação:

- -
    -
  1. A versão do protocolo, normalmente HTTP/1.1.
    2. -
  2. Um código de status, indicando o sucesso ou falha da requisição. Códigos de status comuns são {{HTTPStatus("200")}}, {{HTTPStatus("404")}}, ou {{HTTPStatus("302")}}
    3. -
  3. Um texto de status. Uma descrição textual breve, puramente informativa, do código de status a fim de auxiliar o entendimento da mensagem HTTP por humanos.
    4. -
- -

Uma linha de status típica se parece com: HTTP/1.1 404 Not Found.

- -

Cabeçalhos

- -

Cabeçalhos HTTP para respostas seguem a mesma estrutura de qualquer outro cabeçalho: uma cadeia de caracteres insensível à caixa seguida de dois pontos (':') e um valor cuja estrutura depende do tipo de cabeçalho. O cabeçalho inteiro, incluindo o valor, consiste em uma única linha.

- -

Há numerosos cabeçalhos de resposta disponíveis. Eles podem ser divididos em vários grupos:

- -
    -
  • Cabeçalhos gerais, como {{HTTPHeader("Via")}}, aplicam-se à toda mensagem.
    • -
  • Cabeçalhos de resposta, como {{HTTPHeader("Vary")}} e {{HTTPHeader("Accept-Ranges")}}, dão informação adicional sobre o servidor, que não cabe na linha de status.
    • -
  • Cabeçalhos de entidade, como {{HTTPHeader("Content-Length")}}, aplicam-se ao corpo da resposta. Obviamente este cabeçalho não será transmitido se não houver corpo na resposta.
    • -
- -

Example of headers in an HTTP response

- -

Corpo

- -

A última parte de uma resposta é o corpo. Nem toda resposta tem um: aquelas com código de status {{HTTPStatus("201")}} ou {{HTTPStatus("204")}} normalmente não tem.

- -

Corpos podem ser divididos, a grosso modo, em três categorias:

- -
    -
  • Corpos de recurso simples que consistem em um único arquivo de tamanho conhecido, definido pelos dois cabeçalhos: {{HTTPHeader("Content-Type")}} e {{HTTPHeader("Content-Length")}}.
    • -
  • Corpos de recurso simples que consistem em um único arquivo de tamanho desconhecido, codificado aos pedaços com {{HTTPHeader("Transfer-Encoding")}} ajustado para chunked.
    • -
  • Corpos de recurso múltiplo, que consiste em um corpo com múltiplas partes, cada uma contendo diferentes seções de informação. Estes são relativamente raros.
    • -
- -

Quadros HTTP/2

- -

Mensagens HTTP/1.x têm algumas desvantagens quanto ao desempenho:

- -
    -
  • Os cabeçalhos, ao contrário dos corpos, não são compactados.
    • -
  • Cabeçalhos com frequência são similares entre uma mensagem e a seguinte, ainda assim são repetidos entre conexões.
    • -
  • Nenhuma multiplexação pode ser feita. É necessário abrir várias conexões no mesmo servidor: e conexões TCP quentes são mais eficientes que frias.
    • -
- -

HTTP/2 introduz um passo extra: ele divide mensagens HTTP/1.x em quadros que são embutidos em um fluxo. Quadros de dados e de cabeçalho são separados, isto permite a compressão do cabeçalho. Muitos fluxos podem ser conjugados, um processo chamado de multiplexação, permitindo mais eficiência nas conexões TCP subjacentes.

- -

HTTP/2 modify the HTTP message to divide them in frames (part of a single stream), allowing for more optimization.

- -
Connection
- -

Quadros HTTP agora são transparentes aos desenvolvedores web. Isso é um passo adicional no HTTP/2, entre mensagens HTTP/1.1 e o protocolo de transporte subjacente. Nenhuma mudança é necessária nas API usadas pelo desenvolvedor web para utilizar quadros; quando disponível tanto no navegador quanto no servidor, HTTP/2 é ativado e usado.

- -

Conclusão

- -

Mensagens HTTP são a chave ao usar HTTP; sua estrutura é simples e elas são altamente extensíveis. O mecanismo de enquadramento do HTTP/2 adiciona uma nova camada intermediária entre a sintaxe HTTP/1.x e o protocolo de transporte subjacente, sem modificá-lo fundamentalmente: construído sobre mecanismos provados.

diff --git a/files/pt-br/web/http/messages/index.html b/files/pt-br/web/http/messages/index.html new file mode 100644 index 0000000000..895c58d2e8 --- /dev/null +++ b/files/pt-br/web/http/messages/index.html @@ -0,0 +1,146 @@ +--- +title: Mensagens HTTP +slug: Web/HTTP/Mensagens +tags: + - Guía + - HTTP + - Protocolos +translation_of: Web/HTTP/Messages +--- +
{{HTTPSidebar}}
+ +

Dados são trocados entre servidor e cliente por meio de mensagens HTTP. Há dois tipos de mensagens: requisições (requests) enviadas pelo cliente para disparar uma ação no servidor, e respostas (responses), a réplica do servidor.

+ +

Mensagens HTTP são compostas de informação textual codificada em ASCII, e se espalham por multiplas linhas. Em HTTP/1.1, e versões anteriores do protocolo, estas mensagens eram abertamente enviadas através da conexão. Em HTTP/2, a mensagem antes legível por humanos é agora dividida em quadros HTTP, resultando em otimização e melhora de desempenho.

+ +

Desenvolvedores Web, ou webmasters, raramente lidam com essas mensagens textuais diretamente: um programa, um navegador, um proxy, ou um servidor Web, executam essa ação. Eles proveem mensagens HTTP por meio de arquivos de configuração (para  proxys ou servidores), APIs (para navegadores) ou outras interfaces.

+ +

From a user-, script-, or server- generated event, an HTTP/1.x msg is generated, and if HTTP/2 is in use, it is binary framed into an HTTP/2 stream, then sent.

+ +

O mecanismo de enquadramento binário foi projetado de modo a não requerer qualquer alteração das APIs ou arquivos de configuração aplicados: ele é transparente para o usuário.

+ +

Requisições e respostas HTTP compartilham estrutura similar e são compostas de:

+ +
    +
  1. Uma linha inicial (start-line) que descreve as requisições a serem implementadas, ou seu status de sucesso ou falha. Esta linha inicial é sempre uma única.
    2. +
  2. Um conjunto opcional de cabeçalhos HTTP especificando a requisição, ou descrevendo o corpo incluso na mensagem.
    3. +
  3. Uma linha em branco (empty line) indicando que toda meta-informação para a requisição já foi enviada.
    4. +
  4. Um corpo (body) contendo dados associados à requisição (como o conteúdo de um formulário HTML), ou o documento associado à resposta. A presença do corpo e seu tamanho são especificados pela linha inicial e os cabeçalhos HTTP.
    5. +
+ +

A linha inicial e os cabeçalhos HTTP da mensagem HTTP são conjuntamente chamados de cabeça (head) da requisição, enquanto o que ela carrega, a sua carga, é conhecida como corpo.

+ +

Requests and responses share a common structure in HTTP

+ +

Requisições HTTP

+ +

Linha inicial

+ +

Requisições HTTP são mensagens enviadas pelo cliente para iniciar uma ação no servidor. Suas linhas iniciais contêm três elementos:

+ +
    +
  1. Um método HTTP, um verbo (como {{HTTPMethod("GET")}}, {{HTTPMethod("PUT")}} ou {{HTTPMethod("POST")}}) ou um nome (como {{HTTPMethod("HEAD")}} ou {{HTTPMethod("OPTIONS")}}), que descrevem a ação a ser executada. Por exemplo, GET indica que um recurso deve ser obtido ou POST significa que dados são inseridos no servidor (criando ou modificando um recurso, ou gerando um documento temporário para mandar de volta).
    2. +
  2. O alvo da requisição, normalmente um {{glossary("URL")}}, ou o caminho absoluto do protocolo, porta e domínio são em geral caracterizados pelo contexto da requisição. O formato deste alvo varia conforme o método HTTP. Pode ser +
      +
    • Um caminho absoluto, seguido de um '?' e o texto da consulta. Esta é a forma mais comum, conhecida como a forma original, e é usada com os métodos GET, POST, HEAD, e OPTIONS.
      + POST / HTTP/1.1
      + GET /background.png HTTP/1.0
      + HEAD /test.html?query=alibaba HTTP/1.1
      + OPTIONS /anypage.html HTTP/1.0
      • +
    • Uma URL completa, conhecida como a forma absoluta, usada principalmente com GET quando conectado a um proxy.
      + GET http://developer.mozilla.org/en-US/docs/Web/HTTP/Messages HTTP/1.1
      • +
    • O componente autoridade de um URL, que consiste no nome do domínio e opcionalmente uma porta (prefixada por ':'), chamada de forma autoridade. Só usada com CONNECT ao estabelecer um túnel HTTP.
      + CONNECT developer.mozilla.org:80 HTTP/1.1
      • +
    • A  forma asterisco, um simples asterisco ('*'), usada com OPTIONS. Representa o servidor como um todo.
      + OPTIONS * HTTP/1.1
      • +
    +
    3. +
  3. A  versão HTTP, que define a estrutura do restante da mensagem, atuando como um indicador da versão esperada para uso na resposta.
    4. +
+ +

Cabeçalhos

+ +

Cabeçalhos HTTP de uma requisição seguem a mesma estrutura básica de um cabeçalho HTTP: uma cadeia de caracteres insensível à caixa seguida de dois pontos (':') e um valor cuja estrutura depende do cabeçalho. O cabeçalho inteiro, incluindo o valor, consiste em uma única linha, que pode ser bem grande.

+ +

Há numerosos cabeçalhos de requisição disponíveis. Eles podem ser divididos em vários grupos:

+ +
    +
  • Cabeçalhos gerais, como {{HTTPHeader("Via")}},  se aplicam à mensagem como um todo.
    • +
  • Cabeçalhos de requisição, como {{HTTPHeader("User-Agent")}}, {{HTTPHeader("Accept-Type")}}, modificam a requisição, especificando-a mais (como {{HTTPHeader("Accept-Language")}}), dando-a contexto (como {{HTTPHeader("Referer")}}), ou restringindo-a condicionalmente (como {{HTTPHeader("If-None")}}).
    • +
  • Cabeçalhos de entidade, como {{HTTPHeader("Content-Length")}} que se aplicam ao corpo da mensagem. Obviamente este cabeçalho não será transmitido se não houver corpo na requisição.
    • +
+ +

Example of headers in an HTTP request

+ +

Corpo

+ +

A parte final da requisição é o corpo. Nem todas as requisições tem um: as que pegam recursos, como GET, HEAD, DELETE, ou OPTIONS, usualmente não precisam de um. Algumas requisições enviam dados ao servidor a fim de atualizá-lo: é o caso frequente de requisições POST (contendo dados de formulário HTML).

+ +

Corpos podem ser divididos, a grosso modo, em duas categorias:

+ +
    +
  • Corpos de recurso-simples, consistindo em um único arquivo, definido pelos dois cabeçalhos: {{HTTPHeader("Content-Type")}} e {{HTTPHeader("Content-Length")}}.
    • +
  • Corpos de recurso-múltiplo, consistindo em um corpo de múltiplas partes, cada uma contendo uma porção diferente de informação. Este é tipicamente associado à Formulários HTML.
    • +
+ +

Respostas HTTP

+ +

Linha de status

+ +

A linha inicial de uma resposta HTTP, chamada de linha de status, contém a seguinte informação:

+ +
    +
  1. A versão do protocolo, normalmente HTTP/1.1.
    2. +
  2. Um código de status, indicando o sucesso ou falha da requisição. Códigos de status comuns são {{HTTPStatus("200")}}, {{HTTPStatus("404")}}, ou {{HTTPStatus("302")}}
    3. +
  3. Um texto de status. Uma descrição textual breve, puramente informativa, do código de status a fim de auxiliar o entendimento da mensagem HTTP por humanos.
    4. +
+ +

Uma linha de status típica se parece com: HTTP/1.1 404 Not Found.

+ +

Cabeçalhos

+ +

Cabeçalhos HTTP para respostas seguem a mesma estrutura de qualquer outro cabeçalho: uma cadeia de caracteres insensível à caixa seguida de dois pontos (':') e um valor cuja estrutura depende do tipo de cabeçalho. O cabeçalho inteiro, incluindo o valor, consiste em uma única linha.

+ +

Há numerosos cabeçalhos de resposta disponíveis. Eles podem ser divididos em vários grupos:

+ +
    +
  • Cabeçalhos gerais, como {{HTTPHeader("Via")}}, aplicam-se à toda mensagem.
    • +
  • Cabeçalhos de resposta, como {{HTTPHeader("Vary")}} e {{HTTPHeader("Accept-Ranges")}}, dão informação adicional sobre o servidor, que não cabe na linha de status.
    • +
  • Cabeçalhos de entidade, como {{HTTPHeader("Content-Length")}}, aplicam-se ao corpo da resposta. Obviamente este cabeçalho não será transmitido se não houver corpo na resposta.
    • +
+ +

Example of headers in an HTTP response

+ +

Corpo

+ +

A última parte de uma resposta é o corpo. Nem toda resposta tem um: aquelas com código de status {{HTTPStatus("201")}} ou {{HTTPStatus("204")}} normalmente não tem.

+ +

Corpos podem ser divididos, a grosso modo, em três categorias:

+ +
    +
  • Corpos de recurso simples que consistem em um único arquivo de tamanho conhecido, definido pelos dois cabeçalhos: {{HTTPHeader("Content-Type")}} e {{HTTPHeader("Content-Length")}}.
    • +
  • Corpos de recurso simples que consistem em um único arquivo de tamanho desconhecido, codificado aos pedaços com {{HTTPHeader("Transfer-Encoding")}} ajustado para chunked.
    • +
  • Corpos de recurso múltiplo, que consiste em um corpo com múltiplas partes, cada uma contendo diferentes seções de informação. Estes são relativamente raros.
    • +
+ +

Quadros HTTP/2

+ +

Mensagens HTTP/1.x têm algumas desvantagens quanto ao desempenho:

+ +
    +
  • Os cabeçalhos, ao contrário dos corpos, não são compactados.
    • +
  • Cabeçalhos com frequência são similares entre uma mensagem e a seguinte, ainda assim são repetidos entre conexões.
    • +
  • Nenhuma multiplexação pode ser feita. É necessário abrir várias conexões no mesmo servidor: e conexões TCP quentes são mais eficientes que frias.
    • +
+ +

HTTP/2 introduz um passo extra: ele divide mensagens HTTP/1.x em quadros que são embutidos em um fluxo. Quadros de dados e de cabeçalho são separados, isto permite a compressão do cabeçalho. Muitos fluxos podem ser conjugados, um processo chamado de multiplexação, permitindo mais eficiência nas conexões TCP subjacentes.

+ +

HTTP/2 modify the HTTP message to divide them in frames (part of a single stream), allowing for more optimization.

+ +
Connection
+ +

Quadros HTTP agora são transparentes aos desenvolvedores web. Isso é um passo adicional no HTTP/2, entre mensagens HTTP/1.1 e o protocolo de transporte subjacente. Nenhuma mudança é necessária nas API usadas pelo desenvolvedor web para utilizar quadros; quando disponível tanto no navegador quanto no servidor, HTTP/2 é ativado e usado.

+ +

Conclusão

+ +

Mensagens HTTP são a chave ao usar HTTP; sua estrutura é simples e elas são altamente extensíveis. O mecanismo de enquadramento do HTTP/2 adiciona uma nova camada intermediária entre a sintaxe HTTP/1.x e o protocolo de transporte subjacente, sem modificá-lo fundamentalmente: construído sobre mecanismos provados.

diff --git a/files/pt-br/web/http/redirecionamento/index.html b/files/pt-br/web/http/redirecionamento/index.html deleted file mode 100644 index c429ac82cb..0000000000 --- a/files/pt-br/web/http/redirecionamento/index.html +++ /dev/null @@ -1,260 +0,0 @@ ---- -title: Redirecionamentos em HTTP -slug: Web/HTTP/Redirecionamento -tags: - - Guía - - HTTP - - Redirecionamento -translation_of: Web/HTTP/Redirections ---- -
{{HTTPSidebar}}
- -

Redirecionamento de URL, também conhecido como encaminhamento de URL, é uma técnica que à uma página, formulário ou uma aplicação web inteira, mais de um endereço de URL. HTTP fornece uma espécie especial de respostas, HTTP redirects,  executar esta operação é utilizada para vários objetivos: redirecionamento temporário enquanto está sendo feita a manutenção do web site, redirecionamento permanente para manter links externos funcionando após alterações na arquitetura do web site, páginas de progresso enquanto é feito o envio de um arquivo, e assim por diante.

- -

Princípio

- -

Em HTTP, um redirecionamento é acionado pelo servidor enviando respostas especiais para uma solicitação: redirects. Os redirecionamentos HTTP são respostas com um código de status de 3xx. Um navegador, ao receber uma resposta de redirecionamento, usa o novo URL fornecido e carrega-o imediatamente: a maior parte do tempo, o redirecionamento é transparente para o usuário, além de um pequeno desempenho.

- -

- -

Existem vários tipos de redirecionamentos e eles se enquadram em três categorias: redirecionamentos permanentes, temporários e especiais.

- -

Redirecionamentos permanentes

- -

Estes redirecionamentos devem durar permanentemente. Eles implicam que o URL original não deve mais ser usado e que o novo é preferido. Os robôs dos mecanismos de pesquisa desencadeiam uma atualização do URL associado para o recurso em seus índices.

- - - - - - - - - - - - - - - - - - - - - - - - -
CodeTextMethod handlingTypical use case
301Movido permanentemente{{HTTPMethod("GET")}} métodos inalterados.
- Outros podem ou não serem alterados para {{HTTPMethod("GET")}}.[1]		Reorganização de um web site.
308Permanentemente redirecionadoMétodo e corpo não alteradosReorganização de um web site, com não-GET links/operações.
- -

[1]A especificação não tinha intenção de permitir mudanças de método, mas praticamente existem agentes de usuários lá fazendo isso. 308 foi criado para remover a ambiguidade do comportamento ao usar métodos não-GET.

- -

Redirecionamentos temporários

- -

Às vezes, o recurso solicitado não pode ser acessado a partir da sua localização canônica, mas pode ser acessado a partir de outro local. Neste caso, um redirecionamento temporário pode ser usado. Os robôs do mecanismo de busca não memorizam o novo e temporário link. Os redirecionamentos temporários também são usados ao criar, atualizar e excluir recursos para apresentar páginas de progresso temporárias.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CodeTextMethod handlingTypical use case
302Encontrado{{HTTPMethod("GET")}} métodos inalterados.
- Outros podem ou não serem alterados para {{HTTPMethod("GET")}}.[2]		A página da Web não está temporariamente disponível por motivos imprevisíveis. Dessa forma, os motores de busca não atualizam seus links.
303Ver outro{{HTTPMethod("GET")}} Métodos inalterados.
- Outros alterados para GET (corpo perdido).		Usado para redirecionar após um {{HTTPMethod ("PUT")}} ou um {{HTTPMethod ("POST")}} para evitar uma atualização da página que reativaria a operação.
307Redirecionamento temporárioMétodo ou corpo não alteradosA página da Web não está temporariamente disponível por motivos imprevisíveis. Dessa forma, os motores de busca não atualizam seus links. Melhor que 302 quando os links / operações não-GET estão disponíveis no site.
- -

[2] A especificação não tinha intenção de permitir mudanças de método, mas praticamente existem agentes de usuários lá fazendo isso. 307 foi criado para remover a ambiguidade do comportamento ao usar métodos não-GET.

- -

Redirecionamentos Especiais

- -

Além desses redirecionamentos usuais, existem dois redirecionamentos específicos. O {{HTTPStatus ("304")}} (Não Modificado) redireciona uma página para a cópia em cache local (que estava obsoleta) e {{HTTPStatus ("300")}} (Múltipla escolha) é um redirecionamento manual: o corpo, apresentado pelo navegador como uma página da Web, lista os possíveis redirecionamentos e o usuário clica em um para selecioná-lo.

- - - - - - - - - - - - - - - - - - - - - -
CodeTextTypical use case
300Múltipla EscolhaNão muitas: as opções estão listadas em uma página HTML no corpo. Poderia ser servido com um estado {{HTTPStatus ("200")}} OK.
304Não ModificadoAtualização de cache: isso indica que o valor do cache ainda é recente e pode ser usado.
- -

Alternative way of specifying redirections

- -

HTTP redirects aren't the only way to define redirections. There are two other methods: HTML redirections using the {{HTMLElement("meta")}} element, and JavaScript redirections using the DOM.

- -

HTML redirections

- -

HTTP redirects are the preferred way to create redirections, but sometimes the Web developer doesn't have control over the server or cannot configure it. For these specific cases, the Web developers can craft an HTML page with a {{HTMLElement("meta")}} element and the {{htmlattrxref("http-equiv", "meta")}} attribute set to refresh in the {{HTMLElement("head")}} of the page. When displaying the page, the browser will find this element and will go to the indicated page.

- -
<head>
-  <meta http-equiv="refresh" content="0; URL=http://www.example.com/" />
-</head>
-
- -

The {{htmlattrxref("content")}} attribute starts with a number indicating how many seconds the browser should wait before redirecting to the given URL. Always set it to 0, for better accessibility.

- -

Obviously, this method only works with HTML pages (or similar) and cannot be used for images or any other type of content.

- -
-

Note that these redirections break the back button in a browser: you can go back to a page with this header but it instantaneously moves forward again.

-
- -

JavaScript redirections

- -

Redirections in JavaScript are created by setting a value to the {{domxref("window.location")}} property and the new page is loaded.

- -
window.location = "http://www.example.com/";
- -

Like HTML redirections, this can't work on all resources, and obviously, this will only work on clients that execute JavaScript. On the other side, there are more possibilities as you can trigger the redirection only if some conditions are met, for example.

- -

Order of precedence

- -

With three possibilities for URL redirections, several methods can be specified at the same time, but which one is applied first? The order of precedence is the following:

- -
    -
  1. HTTP redirects are always executed first when there is not even a page transmitted, and of course not even read.
    2. -
  2. HTML redirects ({{HTMLElement("meta")}}) are executed if there weren't any HTTP redirects.
    3. -
  3. JavaScript redirects are used as the last resort, and only if JavaScript is enabled on the client side.
    4. -
- -

When possible, always try to use HTTP redirects, and don't use a {{HTMLElement("meta")}} element. If a developer changes the HTTP redirects and forgets the HTML redirects, redirects are no more identical or end up in an infinite loop, or other nightmares happen.

- -

Use cases

- -

There are numerous use cases for redirects, but as performance is impacted with every redirect, their use should be kept to a minimum.

- -

Domain aliasing

- -

Ideally, there is one location, and therefore one URL, for one resource. But there are reasons for wanting to have alternative names for a resource (several domains, like with and without the www prefix or shorter and easy to remember URLs, …). In these cases, rather than duplicating the resource, it is useful to use a redirect to the one true (canonical) URL.

- -

Domain aliasing can be done for several reasons:

- -
    -
  • Expanding the reach of your site. A common case is when your site resides under the www.example.com domain and accessing your pages from example.com should be possible, too. Redirections for example.com pages to www.example.com are set up in this case. You might also provide commonly used synonym names or frequent typos of your domain names.
    • -
  • Moving to a different domain. For example, your company has been renamed and you when searching for the old name, you want people used to the old company Web site still find you under the new name.
    • -
  • Forcing HTTPS. Requests to the HTTP version of your site will be redirected to the HTTPS version of your site.
    • -
- - - -

When you restructure Web sites, URLs of resources change. Even if you can update the internal links of your Web site to match the new naming scheme, you have no control over the URLs used by external resources. You don't want to break these links, as they bring you valuable users (and help your SEO), so you set up redirects from the old URLs to the new ones.

- -
-

Even if this technique also works for internal links, you should try to avoid having internal redirects. A redirect has a significant performance cost (as an extra HTTP request is done) and if you can avoid it by correcting internal links, you should fix these links.

-
- -

Temporary responses to unsafe requests

- -

{{Glossary("safe", "Unsafe")}} requests modify the state of the server and the user shouldn't replay them inadvertently. Typically, you don't want your users to resend {{HTTPMethod("PUT")}}, {{HTTPMethod("POST")}} or {{HTTPMethod("DELETE")}} requests. If you just serve the response as the result of this request, a simple press of the reload button will (possibly after a confirmation message), resend the request.

- -

In this case, the server can send back a {{HTTPStatus("303")}} (See Other) response that will contain the right information, but if the reload button is pressed, only this page is redisplayed, without replaying the unsafe requests.

- -

Temporary responses to long requests

- -

Some requests may need more time on the server like sometimes {{HTTPHeader("DELETE")}} requests that are scheduled for later processing. In this case, the response is a {{HTTPStatus("303")}} (See Other) redirect that links to a page indicating that the action has been scheduled, and eventually informs about the progress, or allows to cancel it.

- -

Configuring redirects in common servers

- -

Apache

- -

Redirects can be set either in the server config file or in the .htaccess of each directory.

- -

The mod_alias module has Redirect and Redirect_Match directives that set up a {{HTTPStatus("302")}} response (by default):

- -
<VirtualHost *:80>
-	ServerName example.com
-	Redirect / http://www.example.com
-</VirtualHost>
-
- -

The URL http://example.com/ will be redirected to http://www.example.com/ (but not http://example.com/other.html )

- -

Redirect_Match does the same but takes a regular expression to define a collection of URLs that are affected:

- -
RedirectMatch ^/images/(.*)$ http://images.example.com/$1
- -

All documents in the images/ folder will be redirected to a different domain.

- -

If you don't want to set up a temporary redirect, an extra parameter (either the HTTP status code to use or the permanent keyword) can be used to set up a different redirect:

- -
Redirect permanent / http://www.example.com
-Redirect 301 / http://www.example.com
-
- -

The mod_rewrite module can also be used to create redirects. It is more flexible, but a bit more complex to use.

- -

Nginx

- -

In Nginx, you create a specific server block for the content you want to redirect:

- -
server {
-	listen 80;
-	server_name example.com;
-	return 301 $scheme://www.example.com$request_uri;
-}
- -

To apply a redirect to a folder or a subset of the pages only, use the rewrite directive:

- -
rewrite ^/images/(.*)$ http://images.example.com/$1 redirect;
-rewrite ^/images/(.*)$ http://images.example.com/$1 permanent;
-
- -

IIS

- -

In IIS, you use the <httpRedirect> element to configure redirections.

- -

Redirection loops

- -

Redirection loops happen when successive redirections follow the one that has already been followed. In other words, there is a loop that will never be finished and no page will be found ultimately.

- -

Most of the time this is a server problem, and if the server cannot detect it, it will send back a {{HTTPStatus("500")}} Internal Server Error. If you encounter such an error soon after modifying a server configuration, this is likely a redirection loop.

- -

Sometimes, the server won't detect it: a redirection loop can spread over several servers which each don't have the full picture. In this case, browsers will detect it and post an error message. Firefox will display:

- -
Firefox has detected that the server is redirecting the request for this address in a way that will never complete.
- -

while Chrome will display:

- -
This Webpage has a redirect loop
- -

In both cases, the user can't do much (unless a corruption is happening on their side, like a mismatch of cache or cookies).

- -

It is important to avoid redirection loops as they completely break the user experience.

diff --git a/files/pt-br/web/http/redirections/index.html b/files/pt-br/web/http/redirections/index.html new file mode 100644 index 0000000000..c429ac82cb --- /dev/null +++ b/files/pt-br/web/http/redirections/index.html @@ -0,0 +1,260 @@ +--- +title: Redirecionamentos em HTTP +slug: Web/HTTP/Redirecionamento +tags: + - Guía + - HTTP + - Redirecionamento +translation_of: Web/HTTP/Redirections +--- +
{{HTTPSidebar}}
+ +

Redirecionamento de URL, também conhecido como encaminhamento de URL, é uma técnica que à uma página, formulário ou uma aplicação web inteira, mais de um endereço de URL. HTTP fornece uma espécie especial de respostas, HTTP redirects,  executar esta operação é utilizada para vários objetivos: redirecionamento temporário enquanto está sendo feita a manutenção do web site, redirecionamento permanente para manter links externos funcionando após alterações na arquitetura do web site, páginas de progresso enquanto é feito o envio de um arquivo, e assim por diante.

+ +

Princípio

+ +

Em HTTP, um redirecionamento é acionado pelo servidor enviando respostas especiais para uma solicitação: redirects. Os redirecionamentos HTTP são respostas com um código de status de 3xx. Um navegador, ao receber uma resposta de redirecionamento, usa o novo URL fornecido e carrega-o imediatamente: a maior parte do tempo, o redirecionamento é transparente para o usuário, além de um pequeno desempenho.

+ +

+ +

Existem vários tipos de redirecionamentos e eles se enquadram em três categorias: redirecionamentos permanentes, temporários e especiais.

+ +

Redirecionamentos permanentes

+ +

Estes redirecionamentos devem durar permanentemente. Eles implicam que o URL original não deve mais ser usado e que o novo é preferido. Os robôs dos mecanismos de pesquisa desencadeiam uma atualização do URL associado para o recurso em seus índices.

+ + + + + + + + + + + + + + + + + + + + + + + + +
CodeTextMethod handlingTypical use case
301Movido permanentemente{{HTTPMethod("GET")}} métodos inalterados.
+ Outros podem ou não serem alterados para {{HTTPMethod("GET")}}.[1]		Reorganização de um web site.
308Permanentemente redirecionadoMétodo e corpo não alteradosReorganização de um web site, com não-GET links/operações.
+ +

[1]A especificação não tinha intenção de permitir mudanças de método, mas praticamente existem agentes de usuários lá fazendo isso. 308 foi criado para remover a ambiguidade do comportamento ao usar métodos não-GET.

+ +

Redirecionamentos temporários

+ +

Às vezes, o recurso solicitado não pode ser acessado a partir da sua localização canônica, mas pode ser acessado a partir de outro local. Neste caso, um redirecionamento temporário pode ser usado. Os robôs do mecanismo de busca não memorizam o novo e temporário link. Os redirecionamentos temporários também são usados ao criar, atualizar e excluir recursos para apresentar páginas de progresso temporárias.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CodeTextMethod handlingTypical use case
302Encontrado{{HTTPMethod("GET")}} métodos inalterados.
+ Outros podem ou não serem alterados para {{HTTPMethod("GET")}}.[2]		A página da Web não está temporariamente disponível por motivos imprevisíveis. Dessa forma, os motores de busca não atualizam seus links.
303Ver outro{{HTTPMethod("GET")}} Métodos inalterados.
+ Outros alterados para GET (corpo perdido).		Usado para redirecionar após um {{HTTPMethod ("PUT")}} ou um {{HTTPMethod ("POST")}} para evitar uma atualização da página que reativaria a operação.
307Redirecionamento temporárioMétodo ou corpo não alteradosA página da Web não está temporariamente disponível por motivos imprevisíveis. Dessa forma, os motores de busca não atualizam seus links. Melhor que 302 quando os links / operações não-GET estão disponíveis no site.
+ +

[2] A especificação não tinha intenção de permitir mudanças de método, mas praticamente existem agentes de usuários lá fazendo isso. 307 foi criado para remover a ambiguidade do comportamento ao usar métodos não-GET.

+ +

Redirecionamentos Especiais

+ +

Além desses redirecionamentos usuais, existem dois redirecionamentos específicos. O {{HTTPStatus ("304")}} (Não Modificado) redireciona uma página para a cópia em cache local (que estava obsoleta) e {{HTTPStatus ("300")}} (Múltipla escolha) é um redirecionamento manual: o corpo, apresentado pelo navegador como uma página da Web, lista os possíveis redirecionamentos e o usuário clica em um para selecioná-lo.

+ + + + + + + + + + + + + + + + + + + + + +
CodeTextTypical use case
300Múltipla EscolhaNão muitas: as opções estão listadas em uma página HTML no corpo. Poderia ser servido com um estado {{HTTPStatus ("200")}} OK.
304Não ModificadoAtualização de cache: isso indica que o valor do cache ainda é recente e pode ser usado.
+ +

Alternative way of specifying redirections

+ +

HTTP redirects aren't the only way to define redirections. There are two other methods: HTML redirections using the {{HTMLElement("meta")}} element, and JavaScript redirections using the DOM.

+ +

HTML redirections

+ +

HTTP redirects are the preferred way to create redirections, but sometimes the Web developer doesn't have control over the server or cannot configure it. For these specific cases, the Web developers can craft an HTML page with a {{HTMLElement("meta")}} element and the {{htmlattrxref("http-equiv", "meta")}} attribute set to refresh in the {{HTMLElement("head")}} of the page. When displaying the page, the browser will find this element and will go to the indicated page.

+ +
<head>
+  <meta http-equiv="refresh" content="0; URL=http://www.example.com/" />
+</head>
+
+ +

The {{htmlattrxref("content")}} attribute starts with a number indicating how many seconds the browser should wait before redirecting to the given URL. Always set it to 0, for better accessibility.

+ +

Obviously, this method only works with HTML pages (or similar) and cannot be used for images or any other type of content.

+ +
+

Note that these redirections break the back button in a browser: you can go back to a page with this header but it instantaneously moves forward again.

+
+ +

JavaScript redirections

+ +

Redirections in JavaScript are created by setting a value to the {{domxref("window.location")}} property and the new page is loaded.

+ +
window.location = "http://www.example.com/";
+ +

Like HTML redirections, this can't work on all resources, and obviously, this will only work on clients that execute JavaScript. On the other side, there are more possibilities as you can trigger the redirection only if some conditions are met, for example.

+ +

Order of precedence

+ +

With three possibilities for URL redirections, several methods can be specified at the same time, but which one is applied first? The order of precedence is the following:

+ +
    +
  1. HTTP redirects are always executed first when there is not even a page transmitted, and of course not even read.
    2. +
  2. HTML redirects ({{HTMLElement("meta")}}) are executed if there weren't any HTTP redirects.
    3. +
  3. JavaScript redirects are used as the last resort, and only if JavaScript is enabled on the client side.
    4. +
+ +

When possible, always try to use HTTP redirects, and don't use a {{HTMLElement("meta")}} element. If a developer changes the HTTP redirects and forgets the HTML redirects, redirects are no more identical or end up in an infinite loop, or other nightmares happen.

+ +

Use cases

+ +

There are numerous use cases for redirects, but as performance is impacted with every redirect, their use should be kept to a minimum.

+ +

Domain aliasing

+ +

Ideally, there is one location, and therefore one URL, for one resource. But there are reasons for wanting to have alternative names for a resource (several domains, like with and without the www prefix or shorter and easy to remember URLs, …). In these cases, rather than duplicating the resource, it is useful to use a redirect to the one true (canonical) URL.

+ +

Domain aliasing can be done for several reasons:

+ +
    +
  • Expanding the reach of your site. A common case is when your site resides under the www.example.com domain and accessing your pages from example.com should be possible, too. Redirections for example.com pages to www.example.com are set up in this case. You might also provide commonly used synonym names or frequent typos of your domain names.
    • +
  • Moving to a different domain. For example, your company has been renamed and you when searching for the old name, you want people used to the old company Web site still find you under the new name.
    • +
  • Forcing HTTPS. Requests to the HTTP version of your site will be redirected to the HTTPS version of your site.
    • +
+ + + +

When you restructure Web sites, URLs of resources change. Even if you can update the internal links of your Web site to match the new naming scheme, you have no control over the URLs used by external resources. You don't want to break these links, as they bring you valuable users (and help your SEO), so you set up redirects from the old URLs to the new ones.

+ +
+

Even if this technique also works for internal links, you should try to avoid having internal redirects. A redirect has a significant performance cost (as an extra HTTP request is done) and if you can avoid it by correcting internal links, you should fix these links.

+
+ +

Temporary responses to unsafe requests

+ +

{{Glossary("safe", "Unsafe")}} requests modify the state of the server and the user shouldn't replay them inadvertently. Typically, you don't want your users to resend {{HTTPMethod("PUT")}}, {{HTTPMethod("POST")}} or {{HTTPMethod("DELETE")}} requests. If you just serve the response as the result of this request, a simple press of the reload button will (possibly after a confirmation message), resend the request.

+ +

In this case, the server can send back a {{HTTPStatus("303")}} (See Other) response that will contain the right information, but if the reload button is pressed, only this page is redisplayed, without replaying the unsafe requests.

+ +

Temporary responses to long requests

+ +

Some requests may need more time on the server like sometimes {{HTTPHeader("DELETE")}} requests that are scheduled for later processing. In this case, the response is a {{HTTPStatus("303")}} (See Other) redirect that links to a page indicating that the action has been scheduled, and eventually informs about the progress, or allows to cancel it.

+ +

Configuring redirects in common servers

+ +

Apache

+ +

Redirects can be set either in the server config file or in the .htaccess of each directory.

+ +

The mod_alias module has Redirect and Redirect_Match directives that set up a {{HTTPStatus("302")}} response (by default):

+ +
<VirtualHost *:80>
+	ServerName example.com
+	Redirect / http://www.example.com
+</VirtualHost>
+
+ +

The URL http://example.com/ will be redirected to http://www.example.com/ (but not http://example.com/other.html )

+ +

Redirect_Match does the same but takes a regular expression to define a collection of URLs that are affected:

+ +
RedirectMatch ^/images/(.*)$ http://images.example.com/$1
+ +

All documents in the images/ folder will be redirected to a different domain.

+ +

If you don't want to set up a temporary redirect, an extra parameter (either the HTTP status code to use or the permanent keyword) can be used to set up a different redirect:

+ +
Redirect permanent / http://www.example.com
+Redirect 301 / http://www.example.com
+
+ +

The mod_rewrite module can also be used to create redirects. It is more flexible, but a bit more complex to use.

+ +

Nginx

+ +

In Nginx, you create a specific server block for the content you want to redirect:

+ +
server {
+	listen 80;
+	server_name example.com;
+	return 301 $scheme://www.example.com$request_uri;
+}
+ +

To apply a redirect to a folder or a subset of the pages only, use the rewrite directive:

+ +
rewrite ^/images/(.*)$ http://images.example.com/$1 redirect;
+rewrite ^/images/(.*)$ http://images.example.com/$1 permanent;
+
+ +

IIS

+ +

In IIS, you use the <httpRedirect> element to configure redirections.

+ +

Redirection loops

+ +

Redirection loops happen when successive redirections follow the one that has already been followed. In other words, there is a loop that will never be finished and no page will be found ultimately.

+ +

Most of the time this is a server problem, and if the server cannot detect it, it will send back a {{HTTPStatus("500")}} Internal Server Error. If you encounter such an error soon after modifying a server configuration, this is likely a redirection loop.

+ +

Sometimes, the server won't detect it: a redirection loop can spread over several servers which each don't have the full picture. In this case, browsers will detect it and post an error message. Firefox will display:

+ +
Firefox has detected that the server is redirecting the request for this address in a way that will never complete.
+ +

while Chrome will display:

+ +
This Webpage has a redirect loop
+ +

In both cases, the user can't do much (unless a corruption is happening on their side, like a mismatch of cache or cookies).

+ +

It is important to avoid redirection loops as they completely break the user experience.

diff --git a/files/pt-br/web/http/server-side_access_control/index.html b/files/pt-br/web/http/server-side_access_control/index.html deleted file mode 100644 index b1cb255383..0000000000 --- a/files/pt-br/web/http/server-side_access_control/index.html +++ /dev/null @@ -1,213 +0,0 @@ ---- -title: Controle de Acesso do lado do servidor (CORS) -slug: Web/HTTP/Server-Side_Access_Control -translation_of: Web/HTTP/CORS -translation_of_original: 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:

- -
    -
  • Um HTTP / 1.1 GET ou a POST é usado como método de solicitação. No caso de um POST, o Content-Type do corpo do pedido é uma de application/x-www-form-urlencoded, multipart/form-dataoutext/plain.
    • -
  • Nenhum cabeçalho personalizado é enviado com a solicitação HTTP (como X-Modified, etc.)
    • -
- -

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

- -
    -
  • Se o recurso em questão for amplamente acessado (como qualquer recurso HTTP acessado pelo GET), o envio do cabeçalho será suficiente, a menos que o recurso precise de credenciais, como informações de autenticação de cookies e HTTP. Access-Control-Allow-Origin: *
    • -
  • Se o recurso deve ser mantido restrito com base no domínio do solicitante, OU se o recurso precisar ser acessado com credenciais (ou define credenciais), Origin pode ser necessário filtrar pelo cabeçalho da solicitação ou, pelo menos, repetir o retorno do solicitante Origin ( por exemplo ). Além disso, o cabeçalho deverá ser enviado. Isso é discutido em uma seção subsequente . Access-Control-Allow-Origin: http://arunranga.com Access-Control-Allow-Credentials: true
    • -
- -

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:

- -
    -
  • Um outro método que não GET ou POSTé utilizado, ou se POST é usado com um {{HTTPHeader("Content-Type")}} diferente de um application/x-www-form-urlencoded, multipart/form-data ou text/plain. Por exemplo, se o Tipo de Conteúdo do corpo POST for application / xml, uma solicitação será comprovada.
    • -
  • Um cabeçalho personalizado (como X-PINGARUNER) é enviado com a solicitação.
    • -
- -

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/web/javascript/closures/index.html b/files/pt-br/web/javascript/closures/index.html new file mode 100644 index 0000000000..efc7578d7d --- /dev/null +++ b/files/pt-br/web/javascript/closures/index.html @@ -0,0 +1,336 @@ +--- +title: Closures +slug: Web/JavaScript/Guide/Closures +tags: + - Closure + - ES5 + - Intermediário + - JavaScript + - Referencia +translation_of: Web/JavaScript/Closures +--- +
{{jsSidebar("Intermediate")}}
+ +

Um closure (fechamento) é uma função que se "lembra" do ambiente — ou escopo léxico — em que ela foi criada.

+ +

Escopo léxico

+ +

Considere a função abaixo:

+ +
+
function init() {
+  var name = "Mozilla";
+  function displayName() {
+    alert(name);
+  }
+  displayName();
+}
+init();
+
+
+ +

A função init() cria uma variável local chamada name, e depois define uma função chamada displayName(). displayName() é uma função aninhada (um closure) — ela é definida dentro da função init(), e está disponivel apenas dentro do corpo daquela função. Diferente de init(), displayName() não tem variáveis locais próprias, e ao invés disso reusa a variável name declarada na função pai.

+ +

Rode o código e veja que isso funciona. Este é um exemplo de escopo léxico: em JavaScript, o escopo de uma variável é definido por sua localização dentro do código fonte (isto é aparentemente léxico) e funções aninhadas têm acesso às variáveis declaradas em seu escopo externo.

+ +

Closure

+ +

Agora considere o seguinte exemplo:

+ +
function makeFunc() {
+  var name = "Mozilla";
+  function displayName() {
+    alert(name);
+  }
+  return displayName;
+}
+
+var myFunc = makeFunc();
+myFunc();
+
+ +

Se você rodar este código o mesmo terá exatamente o mesmo efeito que o init() do exemplo anterior: a palavra "Mozilla" será mostrada na caixa de alerta. O que é diferente - e interessante - é o fato de que a função interna do displayName() foi retornada da função externa antes de ser executada.

+ +

Pode parecer não muito intuitivo de que o código de fato funciona. Normalmente variáveis locais a uma função apenas existem pela duração da execução da mesma. Uma vez que makeFunc() terminou de executar, é razoável esperar que a variável name não será mais necessária. Dado que o código ainda funciona como o esperado, este não é o caso.

+ +

A solução para tal problema é que a função myFunc tornou-se uma closure. Uma closure (fechamento) trata-se de um tipo especial de objeto que combina duas coisas: a função e o ambiente onde a função foi criada. Este ambiente consiste de quaisquer variáveis que estavam no escopo naquele momento em que a função foi criada. Neste caso, myFunc é a closure que incorpora tanto a função displayName quanto a palavra Mozilla que existia quando a closure foi criada.

+ +

Aqui temos um exemplo um pouco mais interessante, a função makeAdder:

+ +
function makeAdder(x) {
+  return function(y) {
+    return x + y;
+  };
+}
+
+var add5 = makeAdder(5);
+var add10 = makeAdder(10);
+
+print(add5(2));  // 7
+print(add10(2)); // 12
+
+ +

Neste exemplo definimos a função makeAdder(x) que toma um único argumento x e retorna uma nova função. A função retornada toma então um único argumento, y, e retorna então a soma de x e de y.

+ +

Na essência o makeAdder trata-se de uma função fábrica - irá construir outras funções que podem adicionar um determinado valor específico a seu argumento. No exemplo acima usamos a fábrica de funções para criar duas novas funções - uma que adiciona 5 ao argumento, e outra que adiciona 10.

+ +

Ambas as funções add5 e add10 são closures. Compartilham o mesmo corpo de definição de função mas armazenam diferentes ambientes. No ambiente da add5, por exemplo, x equivale a 5, enquanto na add10 o valor de x é 10.

+ +

Closures na prática

+ +

Esta é a teoria — mas closures são realmente úteis? Vamos considerar suas aplicações práticas. Uma closure deixa você associar dados (do ambiente) com uma função que trabalha estes dados. Isto está diretamente ligado com programação orientada a objetos, onde objetos nos permitem associar dados (as propriedades do objeto) utilizando um ou mais métodos.

+ +

Consequentemente, você pode utilizar uma closure em qualquer lugar onde você normalmente utilizaria um objeto de único método.

+ +

Situações onde você poderia utilizar isto são comuns em ambientes web. Muitos códigos escritos em JavaScript para web são baseados em eventos - nós definimos algum comportamento e então, o atribuimos a um evento que será disparado pelo usuário (quando uma tecla for pressionada, por exemplo). Nosso código normalmente é utilizado como callback: uma função que será executada como resposta ao evento.

+ +

Aqui temos um exemplo prático: suponha que queremos adicionar alguns botões para ajustar o tamanho do texto de uma página. Um jeito de fazer seria especificar o tamanho da fonte no elemento body e então definir o tamanho dos outros elementos da página (os cabeçalhos, por exemplo) utilizando a unidade relativa em:

+ +
body {
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 12px;
+}
+
+h1 {
+  font-size: 1.5em;
+}
+h2 {
+  font-size: 1.2em;
+}
+
+ +

Nossos botões interativos de tamanho de texto podem alterar a propriedade font-size do elemento body, e os ajustes serão refletidos em outros elementos graças à unidade relativa.

+ +

O código JavaScript:

+ +
function makeSizer(size) {
+  return function() {
+    document.body.style.fontSize = size + 'px';
+  };
+}
+
+var size12 = makeSizer(12);
+var size14 = makeSizer(14);
+var size16 = makeSizer(16);
+
+ +

size12, size14 e size16 agora são funções que devem redimensionar o texto do elemento body para 12, 14 e 16 pixels respectivamente. Nós podemos designá-las a botões (neste caso, links) como feito a seguir:

+ +
document.getElementById('size-12').onclick = size12;
+document.getElementById('size-14').onclick = size14;
+document.getElementById('size-16').onclick = size16;
+
+ +
<a href="#" id="size-12">12</a>
+<a href="#" id="size-14">14</a>
+<a href="#" id="size-16">16</a>
+
+ +

View on JSFiddle

+ +

Emulando métodos privados com closures

+ +

Linguagens como Java oferecem a habilidade de declarar métodos privados, o que significa que eles só poderão ser chamados por outros métodos na mesma classe.

+ +

O JavaScript não oferece uma maneira nativa de fazer isso, mas é possível emular métodos privados usando closures. Métodos privados não são somente úteis para restringir acesso ao código: eles também oferecem uma maneira eficaz de gerenciar seu namespace global, evitando que métodos não essenciais baguncem a interface pública do seu código.

+ +

Veja como definir algumas funções públicas que acessam funções e variáveis privadas, usando closures que também é conhecido como module pattern:

+ +
var Counter = (function() {
+  var privateCounter = 0;
+  function changeBy(val) {
+    privateCounter += val;
+  }
+  return {
+    increment: function() {
+      changeBy(1);
+    },
+    decrement: function() {
+      changeBy(-1);
+    },
+    value: function() {
+      return privateCounter;
+    }
+  }
+})();
+
+alert(Counter.value()); /* Alerts 0 */
+Counter.increment();
+Counter.increment();
+alert(Counter.value()); /* Alerts 2 */
+Counter.decrement();
+alert(Counter.value()); /* Alerts 1 */
+
+ +

Tem muita coisa acontecendo aqui. Nos exemplos anteriores cada closure teve o seu próprio ambiente; aqui nós criamos um ambiente único que é compartilhado por três funções: Counter.increment, Counter.decrement e Counter.value.

+ +

O ambiente compartilhado é criado no corpo de uma função anônima, da qual é executada assim que é definida. O ambiente contém dois itens privados: uma variável chamada privateCounter e uma função chamada changeBy. Nenhum desses itens privados podem ser acessados diretamente de fora da função anônima. Ao invés disso, eles devem ser acessados pelas três funções públicas que são retornadas.

+ +

Aquelas três funções públicas são closures que compartilham o mesmo ambiente. Graças ao escopo léxico do JavaScript, cada uma delas tem acesso a variável privateCounter e à função changeBy.

+ +
+

Você perceberá que estamos definindo uma função anônima que cria um contador , e então o executamos imediatamente e atribuímos o resultado à variável Counter. Poderíamos armazenar essa função em uma variável separada e usá-la para criar diversos contadores.

+
+ +
var makeCounter = function() {
+  var privateCounter = 0;
+  function changeBy(val) {
+    privateCounter += val;
+  }
+  return {
+    increment: function() {
+      changeBy(1);
+    },
+    decrement: function() {
+      changeBy(-1);
+    },
+    value: function() {
+      return privateCounter;
+    }
+  }
+};
+
+var Counter1 = makeCounter();
+var Counter2 = makeCounter();
+alert(Counter1.value()); /* Alerts 0 */
+Counter1.increment();
+Counter1.increment();
+alert(Counter1.value()); /* Alerts 2 */
+Counter1.decrement();
+alert(Counter1.value()); /* Alerts 1 */
+alert(Counter2.value()); /* Alerts 0 */
+
+ +

Observe como cada um dos contadores mantém a sua independência em relação ao outro. Seu ambiente durante a execução da função makeCounter() é diferente a cada vez que ocorre. A variável privateCounter contém uma instância diferente a cada vez.

+ +
+

Usar closures desta maneira oferece uma série de benefícios que estão normalmente associados a programação orientada a objetos, em particular encapsulamento e ocultação de dados.

+
+ +
+
+ +

Criando closures dentro de loops: Um erro comum

+ +

Antes da introdução da palavra chave let no JavaScript 1.7, um problema comum ocorria com closures quando eram criadas dentro de um loop. Considere o exemplo:

+ +
<p id="help">Helpful notes will appear here</p>
+<p>E-mail: <input type="text" id="email" name="email"></p>
+<p>Name: <input type="text" id="name" name="name"></p>
+<p>Age: <input type="text" id="age" name="age"></p>
+
+ +
function showHelp(help) {
+  document.getElementById('help').innerHTML = help;
+}
+
+function setupHelp() {
+  var helpText = [
+      {'id': 'email', 'help': 'Your e-mail address'},
+      {'id': 'name', 'help': 'Your full name'},
+      {'id': 'age', 'help': 'Your age (you must be over 16)'}
+    ];
+
+  for (var i = 0; i < helpText.length; i++) {
+    var item = helpText[i];
+    document.getElementById(item.id).onfocus = function() {
+      showHelp(item.help);
+    }
+  }
+}
+
+setupHelp();
+
+ +

View on JSFiddle

+ +

O array helpText define três dicas úteis, cada uma associada ao ID de um input no documento. O loop percorre essas definições, atrelando um evento onfocus para cada um que mostra o método de ajuda associado.

+ +

Se você tentar executar esse código, Você verá que não vai funcionar como esperado. Não importa em qual campo ocorre o focus, a mensagem sobre a sua idade será mostrada.

+ +

O motivo disto é que as funções atreladas ao onfocus são closures; elas consistem na definição da função e do ambiente capturado do escopo da função setupHelp. Três closures foram criados, mas todos eles compartilham o mesmo ambiente. No momento em que os callbacks do onfocus são executados, o loop segue seu curso e então a variável item (compartilhada por todos os três closures) fica apontando para a última entrada na lista helpText.

+ +

Uma solução seria neste caso usar mais closures: em particular, usar uma fábrica de funções como descrito anteriormente:

+ +
function showHelp(help) {
+  document.getElementById('help').innerHTML = help;
+}
+
+function makeHelpCallback(help) {
+  return function() {
+    showHelp(help);
+  };
+}
+
+function setupHelp() {
+  var helpText = [
+      {'id': 'email', 'help': 'Your e-mail address'},
+      {'id': 'name', 'help': 'Your full name'},
+      {'id': 'age', 'help': 'Your age (you must be over 16)'}
+    ];
+
+  for (var i = 0; i < helpText.length; i++) {
+    var item = helpText[i];
+    document.getElementById(item.id).onfocus = makeHelpCallback(item.help);
+  }
+}
+
+setupHelp();
+
+ +

View on JSFiddle

+ +

Isto funciona conforme o esperado. Ao invés dos callbacks compartilharem o mesmo ambiente, a função makeHelpCallback cria um novo ambiente para cada um no qual help se refere à string correspondente do array helpText.

+ +

Considerações de performance

+ +

Não é sábio criar funções dentro de outras funções se o closure não for necessário para uma tarefa em particular, pois ele afetará a performance do script de forma bem negativa tanto em velocidade de processamento quanto em consumo de memória.

+ +

Por exemplo, ao criar uma nova classe/objeto, os métodos devem normalmente estar associados ao protótipo do objeto do que definido no construtor. O motivo disso é que sempre que o construtor for chamado os métodos serão reatribuídos (isto é, para cada criação de objeto).

+ +

Considere o seguinte exemplo pouco prático porém demonstrativo:

+ +
function MyObject(name, message) {
+  this.name = name.toString();
+  this.message = message.toString();
+  this.getName = function() {
+    return this.name;
+  };
+
+  this.getMessage = function() {
+    return this.message;
+  };
+}
+
+ +

O código anterior não aproveita os benefícios dos closures e portanto poderia ser reformulado assim:

+ +
function MyObject(name, message) {
+  this.name = name.toString();
+  this.message = message.toString();
+}
+MyObject.prototype = {
+  getName: function() {
+    return this.name;
+  },
+  getMessage: function() {
+    return this.message;
+  }
+};
+
+ +

Ou assim:

+ +
function MyObject(name, message) {
+  this.name = name.toString();
+  this.message = message.toString();
+}
+MyObject.prototype.getName = function() {
+  return this.name;
+};
+MyObject.prototype.getMessage = function() {
+  return this.message;
+};
+
+ +

Nos dois exemplos anteriores, o protótipo herdado pode ser compartilhado por todos os objetos, e as definições de métodos não precisam ocorrer sempre que o objeto for criado. Veja Detalhes do modelo de objeto para mais detalhes.

diff --git a/files/pt-br/web/javascript/enumerabilidade_e_posse_de_propriedades/index.html b/files/pt-br/web/javascript/enumerabilidade_e_posse_de_propriedades/index.html deleted file mode 100644 index 3d7feb0bd4..0000000000 --- a/files/pt-br/web/javascript/enumerabilidade_e_posse_de_propriedades/index.html +++ /dev/null @@ -1,280 +0,0 @@ ---- -title: Enumerabilidade e posse de propriedades -slug: Web/JavaScript/Enumerabilidade_e_posse_de_propriedades -tags: - - JavaScript -translation_of: Web/JavaScript/Enumerability_and_ownership_of_properties ---- -
{{JsSidebar("Mais")}}
- -

-Propriedades enumeráveis são aquelas propriedades cuja flag interna [[Enumerable]] é verdadeira (true), que é o padrão para propriedades criadas via assinatura simples ou através de um inicializador (propriedades definidas através de  Object.defineProperty e tipo padrão [[Enumerable]] falso (false)).
- -
 
- -
Propriedades enumeráveis aparecem em for...in loops exceto se o nome da propriedade for um objeto Symbol. Posse de propriedades é determinada pelo fato da propriedade pertencer ao objeto diretamente e não a uma cadeira de protótipos. Propriedades de um objeto pode também ser recuperadas diretamente. Há um número de built-in de detecção, iteração/enumeração e recuperação de propriedades,  com o gráfico mostrando que estão disponíveis. 
- -
 
- -
O código de exemplo a seguir demostra como obter as categorias que faltam.
- -
 
- -
 
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Propriedade de enumerabilidade e posse - métodos internos de detecção, recuperação, e iteração
FuncionalidadePróprio objeto -

Próprio objeto e sua cadeia de caracteres

- 		Somente cadeia de protótipos
Detecção - - - - - - - - - - - - - - - -
EnumerávelNão enumerávelEnumerável e Não enumerável
propertyIsEnumerablehasOwnProperty e não propertyIsEnumerablehasOwnProperty
- 		Não disponível sem código extraNão disponível sem código extra
Recuperação - - - - - - - - - - - - - - - -
EnumerávelNão enumerávelEnumerável e Não enumerável
Object.keysgetOwnPropertyNames filtrou-se para incluir as propriedades quando não passado propertyIsEnumerablegetOwnPropertyNames
- 		Não disponível sem código extraNão disponível sem código extra
Iteração - - - - - - - - - - - - - - - -
EnumerávelNão enumerávelEnumerável e Não enumerável
Iterar Object.keys -

itera getOwnPropertyNames filtrou-se para incluir as propriedades quando não passado propertyIsEnumerable

- 		iterar getOwnPropertyNames
- 		- - - - - - - - - - - - - - - -
EnumerávelNão enumerávelEnumerável e Não enumerável
for..inNão disponível sem código extraNão disponível sem código extra
- 		Não disponível sem código extra
- -

Obtendo propriedades por enumerabilidade/posse

- -

 

- -

Note que não é o algoritmo mais eficiente para todos os casos, mas útil para uma demonstração rápida.

- -
    -
  • Detecção pode ocorrer por SimplePropertyRetriever.theGetMethodYouWant(obj).indexOf(prop) > -1
    • -
  • Iteração pode ocorrer por SimplePropertyRetriever.theGetMethodYouWant(obj).forEach(function (value, prop) {}); (ou use filter(), map(), etc.)
    • -
- -
var SimplePropertyRetriever = {
-    getOwnEnumerables: function (obj) {
-        return this._getPropertyNames(obj, true, false, this._enumerable);
-         // Ou poderia usar for..in filtrado com hasOwnProperty ou apenas isto: return Object.keys(obj);
-    },
-    getOwnNonenumerables: function (obj) {
-        return this._getPropertyNames(obj, true, false, this._notEnumerable);
-    },
-    getOwnEnumerablesAndNonenumerables: function (obj) {
-        return this._getPropertyNames(obj, true, false, this._enumerableAndNotEnumerable);
-        // Ou apenas use: return Object.getOwnPropertyNames(obj);
-    },
-    getPrototypeEnumerables: function (obj) {
-        return this._getPropertyNames(obj, false, true, this._enumerable);
-    },
-    getPrototypeNonenumerables: function (obj) {
-        return this._getPropertyNames(obj, false, true, this._notEnumerable);
-    },
-    getPrototypeEnumerablesAndNonenumerables: function (obj) {
-        return this._getPropertyNames(obj, false, true, this._enumerableAndNotEnumerable);
-    },
-    getOwnAndPrototypeEnumerables: function (obj) {
-        return this._getPropertyNames(obj, true, true, this._enumerable);
-        // Ou poderia usar filtrado for..in
-    },
-    getOwnAndPrototypeNonenumerables: function (obj) {
-        return this._getPropertyNames(obj, true, true, this._notEnumerable);
-    },
-    getOwnAndPrototypeEnumerablesAndNonenumerables: function (obj) {
-        return this._getPropertyNames(obj, true, true, this._enumerableAndNotEnumerable);
-    },
-    // Private static property checker callbacks
-    _enumerable : function (obj, prop) {
-        return obj.propertyIsEnumerable(prop);
-    },
-    _notEnumerable : function (obj, prop) {
-        return !obj.propertyIsEnumerable(prop);
-    },
-    _enumerableAndNotEnumerable : function (obj, prop) {
-        return true;
-    },
-    // Inspirado por http://stackoverflow.com/a/8024294/271577
-    _getPropertyNames : function getAllPropertyNames(obj, iterateSelfBool, iteratePrototypeBool, includePropCb) {
-        var props = [];
-
-        do {
-            if (iterateSelfBool) {
-                Object.getOwnPropertyNames(obj).forEach(function (prop) {
-                    if (props.indexOf(prop) === -1 && includePropCb(obj, prop)) {
-                        props.push(prop);
-                    }
-                });
-            }
-            if (!iteratePrototypeBool) {
-                break;
-            }
-            iterateSelfBool = true;
-        } while (obj = Object.getPrototypeOf(obj));
-
-        return props;
-    }
-};
- -

Tabela de Detecção

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 infor..inhasOwnPropertypropertyIsEnumerablein Object.keysin Object.getOwnPropertyNamesin Object.getOwnPropertyDescriptors
Enumeráveltruetruetruetruetruetruetrue
Não enumeráveltruefalsetruefalsefalsetruetrue
Inherited Enumerabletruetruefalsefalsefalsefalsefalse
Inherited Nonenumerabletruefalsefalsefalsefalsefalsefalse
Account for Symbols keystruefalsetruetruefalsefalsetrue
- -

Veja também

- - diff --git a/files/pt-br/web/javascript/enumerability_and_ownership_of_properties/index.html b/files/pt-br/web/javascript/enumerability_and_ownership_of_properties/index.html new file mode 100644 index 0000000000..3d7feb0bd4 --- /dev/null +++ b/files/pt-br/web/javascript/enumerability_and_ownership_of_properties/index.html @@ -0,0 +1,280 @@ +--- +title: Enumerabilidade e posse de propriedades +slug: Web/JavaScript/Enumerabilidade_e_posse_de_propriedades +tags: + - JavaScript +translation_of: Web/JavaScript/Enumerability_and_ownership_of_properties +--- +
{{JsSidebar("Mais")}}
+ +

+Propriedades enumeráveis são aquelas propriedades cuja flag interna [[Enumerable]] é verdadeira (true), que é o padrão para propriedades criadas via assinatura simples ou através de um inicializador (propriedades definidas através de  Object.defineProperty e tipo padrão [[Enumerable]] falso (false)).
+ +
 
+ +
Propriedades enumeráveis aparecem em for...in loops exceto se o nome da propriedade for um objeto Symbol. Posse de propriedades é determinada pelo fato da propriedade pertencer ao objeto diretamente e não a uma cadeira de protótipos. Propriedades de um objeto pode também ser recuperadas diretamente. Há um número de built-in de detecção, iteração/enumeração e recuperação de propriedades,  com o gráfico mostrando que estão disponíveis. 
+ +
 
+ +
O código de exemplo a seguir demostra como obter as categorias que faltam.
+ +
 
+ +
 
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Propriedade de enumerabilidade e posse - métodos internos de detecção, recuperação, e iteração
FuncionalidadePróprio objeto +

Próprio objeto e sua cadeia de caracteres

+ 		Somente cadeia de protótipos
Detecção + + + + + + + + + + + + + + + +
EnumerávelNão enumerávelEnumerável e Não enumerável
propertyIsEnumerablehasOwnProperty e não propertyIsEnumerablehasOwnProperty
+ 		Não disponível sem código extraNão disponível sem código extra
Recuperação + + + + + + + + + + + + + + + +
EnumerávelNão enumerávelEnumerável e Não enumerável
Object.keysgetOwnPropertyNames filtrou-se para incluir as propriedades quando não passado propertyIsEnumerablegetOwnPropertyNames
+ 		Não disponível sem código extraNão disponível sem código extra
Iteração + + + + + + + + + + + + + + + +
EnumerávelNão enumerávelEnumerável e Não enumerável
Iterar Object.keys +

itera getOwnPropertyNames filtrou-se para incluir as propriedades quando não passado propertyIsEnumerable

+ 		iterar getOwnPropertyNames
+ 		+ + + + + + + + + + + + + + + +
EnumerávelNão enumerávelEnumerável e Não enumerável
for..inNão disponível sem código extraNão disponível sem código extra
+ 		Não disponível sem código extra
+ +

Obtendo propriedades por enumerabilidade/posse

+ +

 

+ +

Note que não é o algoritmo mais eficiente para todos os casos, mas útil para uma demonstração rápida.

+ +
    +
  • Detecção pode ocorrer por SimplePropertyRetriever.theGetMethodYouWant(obj).indexOf(prop) > -1
    • +
  • Iteração pode ocorrer por SimplePropertyRetriever.theGetMethodYouWant(obj).forEach(function (value, prop) {}); (ou use filter(), map(), etc.)
    • +
+ +
var SimplePropertyRetriever = {
+    getOwnEnumerables: function (obj) {
+        return this._getPropertyNames(obj, true, false, this._enumerable);
+         // Ou poderia usar for..in filtrado com hasOwnProperty ou apenas isto: return Object.keys(obj);
+    },
+    getOwnNonenumerables: function (obj) {
+        return this._getPropertyNames(obj, true, false, this._notEnumerable);
+    },
+    getOwnEnumerablesAndNonenumerables: function (obj) {
+        return this._getPropertyNames(obj, true, false, this._enumerableAndNotEnumerable);
+        // Ou apenas use: return Object.getOwnPropertyNames(obj);
+    },
+    getPrototypeEnumerables: function (obj) {
+        return this._getPropertyNames(obj, false, true, this._enumerable);
+    },
+    getPrototypeNonenumerables: function (obj) {
+        return this._getPropertyNames(obj, false, true, this._notEnumerable);
+    },
+    getPrototypeEnumerablesAndNonenumerables: function (obj) {
+        return this._getPropertyNames(obj, false, true, this._enumerableAndNotEnumerable);
+    },
+    getOwnAndPrototypeEnumerables: function (obj) {
+        return this._getPropertyNames(obj, true, true, this._enumerable);
+        // Ou poderia usar filtrado for..in
+    },
+    getOwnAndPrototypeNonenumerables: function (obj) {
+        return this._getPropertyNames(obj, true, true, this._notEnumerable);
+    },
+    getOwnAndPrototypeEnumerablesAndNonenumerables: function (obj) {
+        return this._getPropertyNames(obj, true, true, this._enumerableAndNotEnumerable);
+    },
+    // Private static property checker callbacks
+    _enumerable : function (obj, prop) {
+        return obj.propertyIsEnumerable(prop);
+    },
+    _notEnumerable : function (obj, prop) {
+        return !obj.propertyIsEnumerable(prop);
+    },
+    _enumerableAndNotEnumerable : function (obj, prop) {
+        return true;
+    },
+    // Inspirado por http://stackoverflow.com/a/8024294/271577
+    _getPropertyNames : function getAllPropertyNames(obj, iterateSelfBool, iteratePrototypeBool, includePropCb) {
+        var props = [];
+
+        do {
+            if (iterateSelfBool) {
+                Object.getOwnPropertyNames(obj).forEach(function (prop) {
+                    if (props.indexOf(prop) === -1 && includePropCb(obj, prop)) {
+                        props.push(prop);
+                    }
+                });
+            }
+            if (!iteratePrototypeBool) {
+                break;
+            }
+            iterateSelfBool = true;
+        } while (obj = Object.getPrototypeOf(obj));
+
+        return props;
+    }
+};
+ +

Tabela de Detecção

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 infor..inhasOwnPropertypropertyIsEnumerablein Object.keysin Object.getOwnPropertyNamesin Object.getOwnPropertyDescriptors
Enumeráveltruetruetruetruetruetruetrue
Não enumeráveltruefalsetruefalsefalsetruetrue
Inherited Enumerabletruetruefalsefalsefalsefalsefalse
Inherited Nonenumerabletruefalsefalsefalsefalsefalsefalse
Account for Symbols keystruefalsetruetruefalsefalsetrue
+ +

Veja também

+ + diff --git a/files/pt-br/web/javascript/guide/closures/index.html b/files/pt-br/web/javascript/guide/closures/index.html deleted file mode 100644 index efc7578d7d..0000000000 --- a/files/pt-br/web/javascript/guide/closures/index.html +++ /dev/null @@ -1,336 +0,0 @@ ---- -title: Closures -slug: Web/JavaScript/Guide/Closures -tags: - - Closure - - ES5 - - Intermediário - - JavaScript - - Referencia -translation_of: Web/JavaScript/Closures ---- -
{{jsSidebar("Intermediate")}}
- -

Um closure (fechamento) é uma função que se "lembra" do ambiente — ou escopo léxico — em que ela foi criada.

- -

Escopo léxico

- -

Considere a função abaixo:

- -
-
function init() {
-  var name = "Mozilla";
-  function displayName() {
-    alert(name);
-  }
-  displayName();
-}
-init();
-
-
- -

A função init() cria uma variável local chamada name, e depois define uma função chamada displayName(). displayName() é uma função aninhada (um closure) — ela é definida dentro da função init(), e está disponivel apenas dentro do corpo daquela função. Diferente de init(), displayName() não tem variáveis locais próprias, e ao invés disso reusa a variável name declarada na função pai.

- -

Rode o código e veja que isso funciona. Este é um exemplo de escopo léxico: em JavaScript, o escopo de uma variável é definido por sua localização dentro do código fonte (isto é aparentemente léxico) e funções aninhadas têm acesso às variáveis declaradas em seu escopo externo.

- -

Closure

- -

Agora considere o seguinte exemplo:

- -
function makeFunc() {
-  var name = "Mozilla";
-  function displayName() {
-    alert(name);
-  }
-  return displayName;
-}
-
-var myFunc = makeFunc();
-myFunc();
-
- -

Se você rodar este código o mesmo terá exatamente o mesmo efeito que o init() do exemplo anterior: a palavra "Mozilla" será mostrada na caixa de alerta. O que é diferente - e interessante - é o fato de que a função interna do displayName() foi retornada da função externa antes de ser executada.

- -

Pode parecer não muito intuitivo de que o código de fato funciona. Normalmente variáveis locais a uma função apenas existem pela duração da execução da mesma. Uma vez que makeFunc() terminou de executar, é razoável esperar que a variável name não será mais necessária. Dado que o código ainda funciona como o esperado, este não é o caso.

- -

A solução para tal problema é que a função myFunc tornou-se uma closure. Uma closure (fechamento) trata-se de um tipo especial de objeto que combina duas coisas: a função e o ambiente onde a função foi criada. Este ambiente consiste de quaisquer variáveis que estavam no escopo naquele momento em que a função foi criada. Neste caso, myFunc é a closure que incorpora tanto a função displayName quanto a palavra Mozilla que existia quando a closure foi criada.

- -

Aqui temos um exemplo um pouco mais interessante, a função makeAdder:

- -
function makeAdder(x) {
-  return function(y) {
-    return x + y;
-  };
-}
-
-var add5 = makeAdder(5);
-var add10 = makeAdder(10);
-
-print(add5(2));  // 7
-print(add10(2)); // 12
-
- -

Neste exemplo definimos a função makeAdder(x) que toma um único argumento x e retorna uma nova função. A função retornada toma então um único argumento, y, e retorna então a soma de x e de y.

- -

Na essência o makeAdder trata-se de uma função fábrica - irá construir outras funções que podem adicionar um determinado valor específico a seu argumento. No exemplo acima usamos a fábrica de funções para criar duas novas funções - uma que adiciona 5 ao argumento, e outra que adiciona 10.

- -

Ambas as funções add5 e add10 são closures. Compartilham o mesmo corpo de definição de função mas armazenam diferentes ambientes. No ambiente da add5, por exemplo, x equivale a 5, enquanto na add10 o valor de x é 10.

- -

Closures na prática

- -

Esta é a teoria — mas closures são realmente úteis? Vamos considerar suas aplicações práticas. Uma closure deixa você associar dados (do ambiente) com uma função que trabalha estes dados. Isto está diretamente ligado com programação orientada a objetos, onde objetos nos permitem associar dados (as propriedades do objeto) utilizando um ou mais métodos.

- -

Consequentemente, você pode utilizar uma closure em qualquer lugar onde você normalmente utilizaria um objeto de único método.

- -

Situações onde você poderia utilizar isto são comuns em ambientes web. Muitos códigos escritos em JavaScript para web são baseados em eventos - nós definimos algum comportamento e então, o atribuimos a um evento que será disparado pelo usuário (quando uma tecla for pressionada, por exemplo). Nosso código normalmente é utilizado como callback: uma função que será executada como resposta ao evento.

- -

Aqui temos um exemplo prático: suponha que queremos adicionar alguns botões para ajustar o tamanho do texto de uma página. Um jeito de fazer seria especificar o tamanho da fonte no elemento body e então definir o tamanho dos outros elementos da página (os cabeçalhos, por exemplo) utilizando a unidade relativa em:

- -
body {
-  font-family: Helvetica, Arial, sans-serif;
-  font-size: 12px;
-}
-
-h1 {
-  font-size: 1.5em;
-}
-h2 {
-  font-size: 1.2em;
-}
-
- -

Nossos botões interativos de tamanho de texto podem alterar a propriedade font-size do elemento body, e os ajustes serão refletidos em outros elementos graças à unidade relativa.

- -

O código JavaScript:

- -
function makeSizer(size) {
-  return function() {
-    document.body.style.fontSize = size + 'px';
-  };
-}
-
-var size12 = makeSizer(12);
-var size14 = makeSizer(14);
-var size16 = makeSizer(16);
-
- -

size12, size14 e size16 agora são funções que devem redimensionar o texto do elemento body para 12, 14 e 16 pixels respectivamente. Nós podemos designá-las a botões (neste caso, links) como feito a seguir:

- -
document.getElementById('size-12').onclick = size12;
-document.getElementById('size-14').onclick = size14;
-document.getElementById('size-16').onclick = size16;
-
- -
<a href="#" id="size-12">12</a>
-<a href="#" id="size-14">14</a>
-<a href="#" id="size-16">16</a>
-
- -

View on JSFiddle

- -

Emulando métodos privados com closures

- -

Linguagens como Java oferecem a habilidade de declarar métodos privados, o que significa que eles só poderão ser chamados por outros métodos na mesma classe.

- -

O JavaScript não oferece uma maneira nativa de fazer isso, mas é possível emular métodos privados usando closures. Métodos privados não são somente úteis para restringir acesso ao código: eles também oferecem uma maneira eficaz de gerenciar seu namespace global, evitando que métodos não essenciais baguncem a interface pública do seu código.

- -

Veja como definir algumas funções públicas que acessam funções e variáveis privadas, usando closures que também é conhecido como module pattern:

- -
var Counter = (function() {
-  var privateCounter = 0;
-  function changeBy(val) {
-    privateCounter += val;
-  }
-  return {
-    increment: function() {
-      changeBy(1);
-    },
-    decrement: function() {
-      changeBy(-1);
-    },
-    value: function() {
-      return privateCounter;
-    }
-  }
-})();
-
-alert(Counter.value()); /* Alerts 0 */
-Counter.increment();
-Counter.increment();
-alert(Counter.value()); /* Alerts 2 */
-Counter.decrement();
-alert(Counter.value()); /* Alerts 1 */
-
- -

Tem muita coisa acontecendo aqui. Nos exemplos anteriores cada closure teve o seu próprio ambiente; aqui nós criamos um ambiente único que é compartilhado por três funções: Counter.increment, Counter.decrement e Counter.value.

- -

O ambiente compartilhado é criado no corpo de uma função anônima, da qual é executada assim que é definida. O ambiente contém dois itens privados: uma variável chamada privateCounter e uma função chamada changeBy. Nenhum desses itens privados podem ser acessados diretamente de fora da função anônima. Ao invés disso, eles devem ser acessados pelas três funções públicas que são retornadas.

- -

Aquelas três funções públicas são closures que compartilham o mesmo ambiente. Graças ao escopo léxico do JavaScript, cada uma delas tem acesso a variável privateCounter e à função changeBy.

- -
-

Você perceberá que estamos definindo uma função anônima que cria um contador , e então o executamos imediatamente e atribuímos o resultado à variável Counter. Poderíamos armazenar essa função em uma variável separada e usá-la para criar diversos contadores.

-
- -
var makeCounter = function() {
-  var privateCounter = 0;
-  function changeBy(val) {
-    privateCounter += val;
-  }
-  return {
-    increment: function() {
-      changeBy(1);
-    },
-    decrement: function() {
-      changeBy(-1);
-    },
-    value: function() {
-      return privateCounter;
-    }
-  }
-};
-
-var Counter1 = makeCounter();
-var Counter2 = makeCounter();
-alert(Counter1.value()); /* Alerts 0 */
-Counter1.increment();
-Counter1.increment();
-alert(Counter1.value()); /* Alerts 2 */
-Counter1.decrement();
-alert(Counter1.value()); /* Alerts 1 */
-alert(Counter2.value()); /* Alerts 0 */
-
- -

Observe como cada um dos contadores mantém a sua independência em relação ao outro. Seu ambiente durante a execução da função makeCounter() é diferente a cada vez que ocorre. A variável privateCounter contém uma instância diferente a cada vez.

- -
-

Usar closures desta maneira oferece uma série de benefícios que estão normalmente associados a programação orientada a objetos, em particular encapsulamento e ocultação de dados.

-
- -
-
- -

Criando closures dentro de loops: Um erro comum

- -

Antes da introdução da palavra chave let no JavaScript 1.7, um problema comum ocorria com closures quando eram criadas dentro de um loop. Considere o exemplo:

- -
<p id="help">Helpful notes will appear here</p>
-<p>E-mail: <input type="text" id="email" name="email"></p>
-<p>Name: <input type="text" id="name" name="name"></p>
-<p>Age: <input type="text" id="age" name="age"></p>
-
- -
function showHelp(help) {
-  document.getElementById('help').innerHTML = help;
-}
-
-function setupHelp() {
-  var helpText = [
-      {'id': 'email', 'help': 'Your e-mail address'},
-      {'id': 'name', 'help': 'Your full name'},
-      {'id': 'age', 'help': 'Your age (you must be over 16)'}
-    ];
-
-  for (var i = 0; i < helpText.length; i++) {
-    var item = helpText[i];
-    document.getElementById(item.id).onfocus = function() {
-      showHelp(item.help);
-    }
-  }
-}
-
-setupHelp();
-
- -

View on JSFiddle

- -

O array helpText define três dicas úteis, cada uma associada ao ID de um input no documento. O loop percorre essas definições, atrelando um evento onfocus para cada um que mostra o método de ajuda associado.

- -

Se você tentar executar esse código, Você verá que não vai funcionar como esperado. Não importa em qual campo ocorre o focus, a mensagem sobre a sua idade será mostrada.

- -

O motivo disto é que as funções atreladas ao onfocus são closures; elas consistem na definição da função e do ambiente capturado do escopo da função setupHelp. Três closures foram criados, mas todos eles compartilham o mesmo ambiente. No momento em que os callbacks do onfocus são executados, o loop segue seu curso e então a variável item (compartilhada por todos os três closures) fica apontando para a última entrada na lista helpText.

- -

Uma solução seria neste caso usar mais closures: em particular, usar uma fábrica de funções como descrito anteriormente:

- -
function showHelp(help) {
-  document.getElementById('help').innerHTML = help;
-}
-
-function makeHelpCallback(help) {
-  return function() {
-    showHelp(help);
-  };
-}
-
-function setupHelp() {
-  var helpText = [
-      {'id': 'email', 'help': 'Your e-mail address'},
-      {'id': 'name', 'help': 'Your full name'},
-      {'id': 'age', 'help': 'Your age (you must be over 16)'}
-    ];
-
-  for (var i = 0; i < helpText.length; i++) {
-    var item = helpText[i];
-    document.getElementById(item.id).onfocus = makeHelpCallback(item.help);
-  }
-}
-
-setupHelp();
-
- -

View on JSFiddle

- -

Isto funciona conforme o esperado. Ao invés dos callbacks compartilharem o mesmo ambiente, a função makeHelpCallback cria um novo ambiente para cada um no qual help se refere à string correspondente do array helpText.

- -

Considerações de performance

- -

Não é sábio criar funções dentro de outras funções se o closure não for necessário para uma tarefa em particular, pois ele afetará a performance do script de forma bem negativa tanto em velocidade de processamento quanto em consumo de memória.

- -

Por exemplo, ao criar uma nova classe/objeto, os métodos devem normalmente estar associados ao protótipo do objeto do que definido no construtor. O motivo disso é que sempre que o construtor for chamado os métodos serão reatribuídos (isto é, para cada criação de objeto).

- -

Considere o seguinte exemplo pouco prático porém demonstrativo:

- -
function MyObject(name, message) {
-  this.name = name.toString();
-  this.message = message.toString();
-  this.getName = function() {
-    return this.name;
-  };
-
-  this.getMessage = function() {
-    return this.message;
-  };
-}
-
- -

O código anterior não aproveita os benefícios dos closures e portanto poderia ser reformulado assim:

- -
function MyObject(name, message) {
-  this.name = name.toString();
-  this.message = message.toString();
-}
-MyObject.prototype = {
-  getName: function() {
-    return this.name;
-  },
-  getMessage: function() {
-    return this.message;
-  }
-};
-
- -

Ou assim:

- -
function MyObject(name, message) {
-  this.name = name.toString();
-  this.message = message.toString();
-}
-MyObject.prototype.getName = function() {
-  return this.name;
-};
-MyObject.prototype.getMessage = function() {
-  return this.message;
-};
-
- -

Nos dois exemplos anteriores, o protótipo herdado pode ser compartilhado por todos os objetos, e as definições de métodos não precisam ocorrer sempre que o objeto for criado. Veja Detalhes do modelo de objeto para mais detalhes.

diff --git "a/files/pt-br/web/javascript/guide/cole\303\247\303\265es_chaveadas/index.html" "b/files/pt-br/web/javascript/guide/cole\303\247\303\265es_chaveadas/index.html" deleted file mode 100644 index cb626865f8..0000000000 --- "a/files/pt-br/web/javascript/guide/cole\303\247\303\265es_chaveadas/index.html" +++ /dev/null @@ -1,149 +0,0 @@ ---- -title: Coleções chaveadas -slug: Web/JavaScript/Guide/Coleções_chaveadas -tags: - - Coleções - - Guía - - JavaScript - - Mapas ---- -
{{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.

- -
    -
  • The keys of an Object are {{jsxref("Global_Objects/String","Strings")}}, where they can be of any value for a Map.
    • -
  • You can get the size of a Map easily while you have to manually keep track of size for an Object.
    • -
  • The iteration of maps is in insertion order of the elements.
    • -
  • An Object has a prototype, so there are default keys in the map. (this can be bypassed using map = Object.create(null)).
    • -
- -

These two tips can help you to decide whether to use a Map or an Object:

- -
    -
  • Use maps over objects when keys are unknown until run time, and when all keys are the same type and all values are the same type.
    • -
  • Use objects when there is logic that operates on individual elements.
    • -
- -

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:

- -
    -
  • Checking whether an element exists in an collection using {{jsxref("Array.indexOf", "indexOf")}} for arrays is slow.
    • -
  • Set objects let you delete elements by their value. With an array you would have to splice based on a element's index.
    • -
  • The value {{jsxref("NaN")}} can not be found with indexOf in array.
    • -
  • Set objects store unique values, you don't have to keep track of duplicates by yourself.
    • -
- -

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:

- -
    -
  • In contrast to Sets, WeakSets are collections of objects only and not of arbitrary values of any type.
    • -
  • The WeakSet is weak: References to objects in the collection are held weakly. If there is no other reference to an object stored in the WeakSet, they can be garbage collected. That also means that there is no list of current objects stored in the collection. WeakSets are not enumerable.
    • -
- -

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":

- -
    -
  • Equality works like the identity comparison operator ===.
    • -
  • -0 and +0 are considered equal.
    • -
  • {{jsxref("NaN")}} is considered equal to itself (contrary to ===).
    • -
- -

{{PreviousNext("Web/JavaScript/Guide/Indexed_Collections", "Web/JavaScript/Guide/Working_with_Objects")}}

diff --git a/files/pt-br/web/javascript/guide/control_flow_and_error_handling/index.html b/files/pt-br/web/javascript/guide/control_flow_and_error_handling/index.html new file mode 100644 index 0000000000..e352b58f6d --- /dev/null +++ b/files/pt-br/web/javascript/guide/control_flow_and_error_handling/index.html @@ -0,0 +1,429 @@ +--- +title: Controle de Fluxo e Manipulação de Erro +slug: Web/JavaScript/Guide/Declarações +tags: + - Guia(2) + - Iniciante + - JavaScript + - declarações + - declarações de controle +translation_of: Web/JavaScript/Guide/Control_flow_and_error_handling +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Grammar_and_types", "Web/JavaScript/Guide/Loops_and_iteration")}}
+ +

O JavaScript suporta um conjunto compacto de declarações, especificamente de fluxo de controle, que você pode utilizar para atribuir uma grande interatividade a páginas web. Este capítulo fornece uma visão geral destas declarações.

+ +

Veja a Referência do JavaScript para detalhes sobre as declarações mostradas neste capítulo. No código em JavaScript, o caractere ponto e vírgula (;) é utilizado para separar declarações.

+ +

Toda expressão também é uma declaração. Veja Expressões e Operadores para informações completas sobre expressões.

+ +

Declaração em bloco

+ +

Uma declaração em bloco é utilizada para agrupar declarações. O bloco é delimitado por um par de chaves:

+ +
{
+   declaracao_1;
+   declaracao_2;
+   .
+   .
+   .
+   declaracao_n;
+}
+
+ +

Exemplo

+ +

Declarações em bloco são utilizadas geralmente com declarações de fluxo de controle (ex. if, for, while).

+ +
while (x < 10) {
+  x++;
+}
+
+ +

Aqui, { x++; } é a declaração de bloco.

+ +

Importante: Antes de ECMAScript 6 o JavaScript não possuía escopo de bloco. Variáveis introduzidas dentro de um bloco possuem como escopo a função ou o script em que o bloco está contido, e, definir tais variáveis tem efeito muito além do bloco em si. Em outras palavras, declarações de bloco não introduzem um escopo. Embora blocos "padrão" sejam uma sintaxe válida não utilize-os, em JavaScript, pensando que funcionam como em C ou Java porque eles não funcionam da maneira que você acredita. Por exemplo:

+ +
var x = 1;
+{
+  var x = 2;
+}
+console.log(x); // exibe 2
+
+ +

Este código exibe 2 porque a declaração var x dentro do bloco possui o mesmo escopo que a declaração var x antes do bloco. Em C ou Java, o código equivalente exibiria 1.

+ +

Declarações condicionais

+ +

Uma declaração condicional é um conjunto de comandos que são executados caso uma condição especificada seja verdadeira. O JavaScript suporta duas declarações condicionais: if...else e switch.

+ +

Declaração if...else

+ +

Use a declaração if para executar alguma declaração caso a condição lógica for verdadeira. Use a cláusula opcional else para executar alguma declaração caso a condição lógica for falsa. Uma declaração if é declarada da seguinte maneira:

+ +
if (condicao) {
+  declaracao_1;
+} else {
+  declaracao_2;
+}
+ +

onde condicao pode ser qualquer expressão que seja avaliada como verdadeira ou falsa. Veja Boolean para uma explicação sobre o que é avaliado como true e false. Se condicao for avaliada como verdadeira, declaracao_1 é executada; caso contrário, declaracao_2 é executada. declaracao_1 e declaracao_2 podem ser qualquer declaração, incluindo declarações if aninhadas.

+ +

Você pode também combinar declarações utilizando else if para obter várias condições testadas em sequência, como o seguinte:

+ +
if (condicao) {
+  declaracao_1;
+} else if (condicao_2) {
+  declaracao_2;
+} else if (condicao_n) {
+  declaracao_n;
+} else {
+  declaracao_final;
+}
+ +

Para executar várias declarações, agrupe-as em uma declaração em bloco ({ ... }). Em geral, é uma boa prática sempre utilizar declarações em bloco, especialmente ao aninhar declarações if:

+ +
if (condicao) {
+    declaracao_1_executada_se_condicao_for_verdadeira;
+    declaracao_2_executada_se_condicao_for_verdadeira;
+} else {
+    declaracao_3_executada_se_condicao_for_falsa;
+    declaracao_4_executada_se_condicao_for_falsa;
+}
+
+ +
Recomenda-se não utilizar atribuições simples em uma expressão condicional porque o símbolo de atribuição poderia ser confundido com o de igualdade ao dar uma olhada no código. Por exemplo, não utilize o seguinte código:
+ +
if (x = y) {
+  /* faça a coisa certa */
+}
+
+ +

Caso tenha que utilizar uma atribuição em uma expressão condicional, uma prática comum é colocar parênteses adicionais em volta da atribuição. Por exemplo:

+ +
if ((x = y)) {
+  /* faça a coisa certa */
+}
+
+ +

Valores avaliados como falsos

+ +

Os seguintes valores são avaliados como falsos:

+ +
    +
  • false
    • +
  • undefined
    • +
  • null
    • +
  • 0
    • +
  • NaN
    • +
  • string vazia ("")
    • +
+ +

Todos os outros valores, incluindo todos os objetos, são avaliados como verdadeiros quando passados para uma declaração condicional.

+ +

Não confunda os valores booleanos primitivos true e false com os valores de true e false do objeto Boolean. Por exemplo:

+ +
var b = new Boolean(false);
+if (b) // esta condição é avaliada como verdadeira
+if (b == true) // esta condição é avaliada como falsa
+ +

 

+ +

Exemplo

+ +

No exemplo a seguir, a função verifiqueDados retorna verdadeiro se o número de caracteres em um objeto Text for três; caso contrário, exibe um alerta e retorna falso.

+ +
function verifiqueDados() {
+  if (document.form1.tresCaracteres.value.length == 3) {
+    return true;
+  } else {
+    alert("Informe exatamente três caracteres. " +
+      document.form1.tresCaracteres.value + " não é válido.");
+    return false;
+  }
+}
+
+ +

Declaração switch

+ +

Uma declaração switch permite que um programa avalie uma expressão e tente associar o valor da expressão ao rótulo de um case. Se uma correspondência é encontrada, o programa executa a declaração associada. Uma declaração switch se parece com o seguinte:

+ +
switch (expressao) {
+   case rotulo_1:
+      declaracoes_1
+      [break;]
+   case rotulo_2:
+      declaracoes_2
+      [break;]
+   ...
+   default:
+      declaracoes_padrao
+      [break;]
+}
+
+ +

O programa primeiramente procura por uma cláusula case com um rótulo que corresponda ao valor da expressão e então transfere o controle para aquela cláusula, executando as declaracoes associadas. Se nenhum rótulo correspondente é encontrado, o programa procura pela cláusula opcional default e, se encontrada, transfere o controle àquela cláusula, executando as declarações associadas. Se nenhuma cláusula default é encontrada, o programa continua a execução a partir da declaracao seguinte ao switch. Por convenção, a cláusula default é a última, mas não é necessário que seja assim.

+ +

A instrução break associada a cada cláusula case, garante que o programa sairá do switch assim que a declaração correspondente for executada e que continuará a execução a partir da declaração seguinte ao switch. Se a declaração break for omitida, o programa continua a execução a partir da próxima declaração dentro do switch.

+ +

Exemplo

+ +

No exemplo a seguir, se tipofruta for avaliada como "Banana", o programa faz a correspondência do valor com case "Banana" e executa a declaração associada. Quando o break é encontrado, o programa termina o switch e executa a declaração seguinte ao condicional. Se o break fosse omitido, a declaração de case "Cereja" também seria executada.

+ +
switch (tipofruta) {
+   case "Laranja":
+      console.log("O quilo da laranja está R$0,59.<br>");
+      break;
+   case "Maçã":
+      console.log("O quilo da maçã está R$0,32.<br>");
+      break;
+   case "Banana":
+      console.log("O quilo da banana está R$0,48.<br>");
+      break;
+   case "Cereja":
+      console.log("O quilo da cereja está R$3,00.<br>");
+      break;
+   case "Manga":
+      console.log("O quilo da manga está R$0,56.<br>");
+       break;
+   case "Mamão":
+      console.log("O quilo do mamão está R$2,23.<br>");
+      break;
+   default:
+      console.log("Desculpe, não temos " + tipofruta + ".<br>");
+}
+console.log("Gostaria de mais alguma coisa?<br>");
+ +

Declarações de Manipulação de Error

+ +

Você pode chamar uma exceção usando a declaração throw e manipulá-la usando a declaração try...catch.

+ + + +

Tipos de exceções

+ +

Praticamente pode-se utilizar throw em qualquer objeto de JavaScript. Todavia, nem todos os objetos ativados por throw são igualmente criados. Embora seja bastante comum tratar números ou strings como erros usando throw, é frequentemente mais eficiente usar alguns tipos de exceções especificamente criadas para esses propósitos:

+ + + +

Declaração throw

+ +

Use a declaração throw para lançar uma exceção. Quando você lança uma exceção, você especifica a expressão contendo o valor a ser lançado:

+ +
throw expressão;
+
+ +

Você pode lançar qualquer expressão, não apenas expressões de um tipo específico. O código a seguir lança várias exceções de diferentes tipos:

+ +
throw "Error2";   // tipo string
+throw 42;         // tipo numérico
+throw true;       // tipo booleano
+throw {toString: function() { return "Eu sou um objeto!"; } };
+
+ +
Nota:  Você pode especificar um objeto quando você lança uma exceção. Você pode então, referenciar as propriedades de um objeto no bloco catch.  O exemplo a seguir cria um objeto myUserException do tipo userException e o usa em uma declaração throw.
+ +
// Cria um objeto do tipo UserException
+function UserException(mensagem) {
+  this.mensagem = mensagem;
+  this.nome = "UserException";
+}
+
+// Realiza a conversão da exceção para uma string adequada quando usada como uma string.
+// (ex. pelo console de erro)
+UserException.prototype.toString = function() {
+  return this.name + ': "' + this.message + '"';
+}
+
+// Cria uma instância de um tipo de objeto e lança ela
+throw new UserException("Valor muito alto");
+ +

Declaração try...catch

+ +

A declaração try...catch coloca um bloco de declarações em try, e especifica uma ou mais respostas para uma exceção lançada. Se uma exceção é lançada, a declaração try...catch pegá-a.

+ +

A declaração try...catch é composta por um bloco try, que contém uma ou mais declarações, e zero ou mais blocos catch, contendo declarações que especificam o que fazer se uma exceção é lançada no bloco try. Ou seja, você deseja que o bloco try  tenha sucesso, e se ele não tiver êxito, você quer o controle passado para o bloco catch. Se qualquer declaração do bloco try (ou em uma função chamada dentro do bloco try) lança uma exceção, o controle é imediatamente mudado para o bloco catch. Se nenhuma exceção é lançada no bloco try, o bloco catch é ignorado. O bloco finally executa após os blocos try e catch executarem, mas antes das declarações seguinte ao bloco try...catch.

+ +

O exemplo a seguir usa a declaração try...catch. O exemplo chama uma função que recupera o nome de um mês no array com base no valor passado para a função. Se o valor não corresponde ao número de um mês (1-12), uma exceção é lançada com o valor "InvalidMonthNo" e as declarações no bloco catch define a váriavel monthName para unknown.

+ +
function getMonthName(mo) {
+  mo = mo - 1; // Ajusta o número do mês para o índice do array (1 = Jan, 12 = Dec)
+  var months = ["Jan","Feb","Mar","Apr","May","Jun","Jul",
+                "Aug","Sep","Oct","Nov","Dec"];
+  if (months[mo]) {
+    return months[mo];
+  } else {
+    throw "InvalidMonthNo"; //lança uma palavra-chave aqui usada.
+  }
+}
+
+try { // statements to try
+  monthName = getMonthName(myMonth); // função poderia lançar uma exceção
+}
+catch (e) {
+  monthName = "unknown";
+  logMyErrors(e); // passa a exceção para o manipulador de erro -> sua função local.
+}
+
+ +

O bloco catch

+ +

Você pode usar um bloco catch para lidar com todas as exceções que podem ser geradas no bloco try.

+ +
catch (catchID) {
+  declaracoes
+}
+
+ +

O bloco catch específica um identificador (catchID na sintaxe anterior), que contém o valor especificado pela declaração throw; você pode usar esse identificador para obter informações sobre a exceção que foi lançada. JavaScript cria este identificador quando o bloco catch é inserido; o identificador dura enquanto o bloco catch está em execução, depois que termina a execução do bloco catch, o identificador não estará mais disponível.

+ +

Por exemplo, o seguinte código lança uma exceção. Quando a exceção ocorre, o controle é transferido para o bloco catch.

+ +
try {
+  throw "myException"; // lança  uma exceção
+}
+catch (e) {
+  // declarações de lidar com as exceções
+  logMyErrors(e); // passar a exceção para o manipulador de erro
+}
+
+ +

O bloco finally

+ +

O bloco finally contém instruções para executar após os blocos try e catch, mas antes das declarações seguinte a declaração try...catch. O bloco finally é executado com ou sem o lançamento de uma exceção. Se uma exceção é lançada, a declaração no bloco finally executa, mesmo que nenhum bloco catch processe a exceção.

+ +

Você pode usar bloco finally para deixar a falha de seu script agradável quando uma exceção ocorre; por exemplo, você pode precisar liberar um recurso que seu script tem amarrado. O exemplo a seguir abre um arquivo e então executa instruções que usam o arquivo (JavaScript do lado do servidor permite que você acesse arquivos). Se um exceção é lançada enquanto o arquivo é aberto, o bloco finally fecha o arquivo antes do script falhar.

+ +
openMyFile();
+try {
+  writeMyFile(theData); //Isso pode lançar um erro
+} catch(e) {
+  handleError(e); // Se temos um erro temos que lidar com ele
+} finally {
+  closeMyFile(); // Sempre feche o recurso
+}
+
+ +

Se o bloco finally retornar um valor, este valor se torna o valor de toda a entrada try-catch-finally, independente de quaisquer declarações de retorno nos blocos try e catch:

+ +
function f() {
+  try {
+    console.log(0);
+    throw "bogus";
+  } catch(e) {
+    console.log(1);
+    return true; // essa declaração de retorno é suspensa
+                 // até que o bloco finally seja concluído
+    console.log(2); // não executa
+  } finally {
+    console.log(3);
+    return false; // substitui o "return" anterior
+    console.log(4); // não executa
+  }
+  // "return false" é executado agora
+  console.log(5); // não executa
+}
+f(); // exibe 0, 1, 3; retorna false
+
+ +

Substituições de valores de retorno pelo bloco finally também se aplica a exceções lançadas ou re-lançadas dentro do bloco catch:

+ +
function f() {
+  try {
+    throw "bogus";
+  } catch(e) {
+    console.log('captura interior "falso"');
+    throw e; // essa instrução throw é suspensa até
+             // que o bloco finally seja concluído
+  } finally {
+    return false; // substitui "throw" anterior
+  }
+  // "return false" é executado agora
+}
+
+try {
+  f();
+} catch(e) {
+  // isto nunca é executado porque o throw dentro
+  // do catch é substituído
+  // pelo return no finally
+  console.log('captura exterior "falso"');
+}
+
+// SAIDA
+// captura interior "falso"
+ +

Aninhando declarações try...catch

+ +

Você pode aninhar uma ou mais declarações try...catch. Se uma declaração try...catch interior não tem um bloco catch, o delimitador do bloco try...catch da declaração catch é verificado por uma correspondência.

+ +

Utilizando objetos de erro

+ +

Dependendo do tipo de erro, você pode ser capaz de usar as propriedade 'name' e 'message' para pegar uma mensagem mais refinada. A propriedade 'name' fornece a classe geral de erro (ex., 'DOMException' ou 'Error'), enquanto 'message' geralmente oferece uma mensagem mais sucinta do que se poderia obter através da conversão do objeto de erro para uma string.

+ +

Se você está lançando suas próprias exceções, a fim de tirar proveito dessas propriedades (como o seu bloco catch não discrimina entre suas próprias exceções e as exceções próprias da linguagem), você pode usar o construtor Error. Por exemplo:

+ +
function doSomethingErrorProne () {
+  if (ourCodeMakesAMistake()) {
+    throw (new Error('A mensagem'));
+  } else {
+    doSomethingToGetAJavascriptError();
+  }
+}
+....
+try {
+  doSomethingErrorProne();
+}
+catch (e) {
+  console.log(e.name); // exibe 'Error'
+  console.log(e.message); // exibe 'A mensagem' ou uma mensagem de erro em JavaScript
+}
+ +

Promises

+ +

Começando com ECMAScript 6, JavaScript ganha suporte para objetos {{jsxref("Promise")}} que lhe permite controlar o fluxo de operações diferídas e assíncronas.

+ +

Uma Promise assume um destes estados:

+ +
    +
  • pending: estado inicial, não fulfilled, ou rejected.
    • +
  • fulfilled: operação bem sucedida.
    • +
  • rejected: operação falha.
    • +
  • settled: A Promise é fulfilled ou rejected, mas não pending.
    • +
+ +

+ +

Carregando uma imagem com XHR

+ +

Um exemplo simples usando Promise e XMLHttpRequest para carregar uma imagem disponível no repositório MDN GitHub promise-test. Você também pode vê-lo executando. Cada etapa está comentada o que lhe permite seguir de perto a arquitetura Promise e arquitetura XHR. Aqui está a versão não comentada, mostrando o fluxo Promise para que você possa ter uma ideia:

+ +
function imgLoad(url) {
+  return new Promise(function(resolve, reject) {
+    var request = new XMLHttpRequest();
+    request.open('GET', url);
+    request.responseType = 'blob';
+    request.onload = function() {
+      if (request.status === 200) {
+        resolve(request.response);
+      } else {
+        reject(Error('Image didn\'t load successfully; error code:'
+                     + request.statusText));
+      }
+    };
+    request.onerror = function() {
+      reject(Error('There was a network error.'));
+    };
+    request.send();
+  });
+}
+ +

Para uma informação mais detalhada, consulte a página de referência {{jsxref("Promise")}}.

+ +
{{PreviousNext("Web/JavaScript/Guide/Grammar_and_types", "Web/JavaScript/Guide/Loops_and_iteration")}}
diff --git "a/files/pt-br/web/javascript/guide/declara\303\247\303\265es/index.html" "b/files/pt-br/web/javascript/guide/declara\303\247\303\265es/index.html" deleted file mode 100644 index e352b58f6d..0000000000 --- "a/files/pt-br/web/javascript/guide/declara\303\247\303\265es/index.html" +++ /dev/null @@ -1,429 +0,0 @@ ---- -title: Controle de Fluxo e Manipulação de Erro -slug: Web/JavaScript/Guide/Declarações -tags: - - Guia(2) - - Iniciante - - JavaScript - - declarações - - declarações de controle -translation_of: Web/JavaScript/Guide/Control_flow_and_error_handling ---- -
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Grammar_and_types", "Web/JavaScript/Guide/Loops_and_iteration")}}
- -

O JavaScript suporta um conjunto compacto de declarações, especificamente de fluxo de controle, que você pode utilizar para atribuir uma grande interatividade a páginas web. Este capítulo fornece uma visão geral destas declarações.

- -

Veja a Referência do JavaScript para detalhes sobre as declarações mostradas neste capítulo. No código em JavaScript, o caractere ponto e vírgula (;) é utilizado para separar declarações.

- -

Toda expressão também é uma declaração. Veja Expressões e Operadores para informações completas sobre expressões.

- -

Declaração em bloco

- -

Uma declaração em bloco é utilizada para agrupar declarações. O bloco é delimitado por um par de chaves:

- -
{
-   declaracao_1;
-   declaracao_2;
-   .
-   .
-   .
-   declaracao_n;
-}
-
- -

Exemplo

- -

Declarações em bloco são utilizadas geralmente com declarações de fluxo de controle (ex. if, for, while).

- -
while (x < 10) {
-  x++;
-}
-
- -

Aqui, { x++; } é a declaração de bloco.

- -

Importante: Antes de ECMAScript 6 o JavaScript não possuía escopo de bloco. Variáveis introduzidas dentro de um bloco possuem como escopo a função ou o script em que o bloco está contido, e, definir tais variáveis tem efeito muito além do bloco em si. Em outras palavras, declarações de bloco não introduzem um escopo. Embora blocos "padrão" sejam uma sintaxe válida não utilize-os, em JavaScript, pensando que funcionam como em C ou Java porque eles não funcionam da maneira que você acredita. Por exemplo:

- -
var x = 1;
-{
-  var x = 2;
-}
-console.log(x); // exibe 2
-
- -

Este código exibe 2 porque a declaração var x dentro do bloco possui o mesmo escopo que a declaração var x antes do bloco. Em C ou Java, o código equivalente exibiria 1.

- -

Declarações condicionais

- -

Uma declaração condicional é um conjunto de comandos que são executados caso uma condição especificada seja verdadeira. O JavaScript suporta duas declarações condicionais: if...else e switch.

- -

Declaração if...else

- -

Use a declaração if para executar alguma declaração caso a condição lógica for verdadeira. Use a cláusula opcional else para executar alguma declaração caso a condição lógica for falsa. Uma declaração if é declarada da seguinte maneira:

- -
if (condicao) {
-  declaracao_1;
-} else {
-  declaracao_2;
-}
- -

onde condicao pode ser qualquer expressão que seja avaliada como verdadeira ou falsa. Veja Boolean para uma explicação sobre o que é avaliado como true e false. Se condicao for avaliada como verdadeira, declaracao_1 é executada; caso contrário, declaracao_2 é executada. declaracao_1 e declaracao_2 podem ser qualquer declaração, incluindo declarações if aninhadas.

- -

Você pode também combinar declarações utilizando else if para obter várias condições testadas em sequência, como o seguinte:

- -
if (condicao) {
-  declaracao_1;
-} else if (condicao_2) {
-  declaracao_2;
-} else if (condicao_n) {
-  declaracao_n;
-} else {
-  declaracao_final;
-}
- -

Para executar várias declarações, agrupe-as em uma declaração em bloco ({ ... }). Em geral, é uma boa prática sempre utilizar declarações em bloco, especialmente ao aninhar declarações if:

- -
if (condicao) {
-    declaracao_1_executada_se_condicao_for_verdadeira;
-    declaracao_2_executada_se_condicao_for_verdadeira;
-} else {
-    declaracao_3_executada_se_condicao_for_falsa;
-    declaracao_4_executada_se_condicao_for_falsa;
-}
-
- -
Recomenda-se não utilizar atribuições simples em uma expressão condicional porque o símbolo de atribuição poderia ser confundido com o de igualdade ao dar uma olhada no código. Por exemplo, não utilize o seguinte código:
- -
if (x = y) {
-  /* faça a coisa certa */
-}
-
- -

Caso tenha que utilizar uma atribuição em uma expressão condicional, uma prática comum é colocar parênteses adicionais em volta da atribuição. Por exemplo:

- -
if ((x = y)) {
-  /* faça a coisa certa */
-}
-
- -

Valores avaliados como falsos

- -

Os seguintes valores são avaliados como falsos:

- -
    -
  • false
    • -
  • undefined
    • -
  • null
    • -
  • 0
    • -
  • NaN
    • -
  • string vazia ("")
    • -
- -

Todos os outros valores, incluindo todos os objetos, são avaliados como verdadeiros quando passados para uma declaração condicional.

- -

Não confunda os valores booleanos primitivos true e false com os valores de true e false do objeto Boolean. Por exemplo:

- -
var b = new Boolean(false);
-if (b) // esta condição é avaliada como verdadeira
-if (b == true) // esta condição é avaliada como falsa
- -

 

- -

Exemplo

- -

No exemplo a seguir, a função verifiqueDados retorna verdadeiro se o número de caracteres em um objeto Text for três; caso contrário, exibe um alerta e retorna falso.

- -
function verifiqueDados() {
-  if (document.form1.tresCaracteres.value.length == 3) {
-    return true;
-  } else {
-    alert("Informe exatamente três caracteres. " +
-      document.form1.tresCaracteres.value + " não é válido.");
-    return false;
-  }
-}
-
- -

Declaração switch

- -

Uma declaração switch permite que um programa avalie uma expressão e tente associar o valor da expressão ao rótulo de um case. Se uma correspondência é encontrada, o programa executa a declaração associada. Uma declaração switch se parece com o seguinte:

- -
switch (expressao) {
-   case rotulo_1:
-      declaracoes_1
-      [break;]
-   case rotulo_2:
-      declaracoes_2
-      [break;]
-   ...
-   default:
-      declaracoes_padrao
-      [break;]
-}
-
- -

O programa primeiramente procura por uma cláusula case com um rótulo que corresponda ao valor da expressão e então transfere o controle para aquela cláusula, executando as declaracoes associadas. Se nenhum rótulo correspondente é encontrado, o programa procura pela cláusula opcional default e, se encontrada, transfere o controle àquela cláusula, executando as declarações associadas. Se nenhuma cláusula default é encontrada, o programa continua a execução a partir da declaracao seguinte ao switch. Por convenção, a cláusula default é a última, mas não é necessário que seja assim.

- -

A instrução break associada a cada cláusula case, garante que o programa sairá do switch assim que a declaração correspondente for executada e que continuará a execução a partir da declaração seguinte ao switch. Se a declaração break for omitida, o programa continua a execução a partir da próxima declaração dentro do switch.

- -

Exemplo

- -

No exemplo a seguir, se tipofruta for avaliada como "Banana", o programa faz a correspondência do valor com case "Banana" e executa a declaração associada. Quando o break é encontrado, o programa termina o switch e executa a declaração seguinte ao condicional. Se o break fosse omitido, a declaração de case "Cereja" também seria executada.

- -
switch (tipofruta) {
-   case "Laranja":
-      console.log("O quilo da laranja está R$0,59.<br>");
-      break;
-   case "Maçã":
-      console.log("O quilo da maçã está R$0,32.<br>");
-      break;
-   case "Banana":
-      console.log("O quilo da banana está R$0,48.<br>");
-      break;
-   case "Cereja":
-      console.log("O quilo da cereja está R$3,00.<br>");
-      break;
-   case "Manga":
-      console.log("O quilo da manga está R$0,56.<br>");
-       break;
-   case "Mamão":
-      console.log("O quilo do mamão está R$2,23.<br>");
-      break;
-   default:
-      console.log("Desculpe, não temos " + tipofruta + ".<br>");
-}
-console.log("Gostaria de mais alguma coisa?<br>");
- -

Declarações de Manipulação de Error

- -

Você pode chamar uma exceção usando a declaração throw e manipulá-la usando a declaração try...catch.

- - - -

Tipos de exceções

- -

Praticamente pode-se utilizar throw em qualquer objeto de JavaScript. Todavia, nem todos os objetos ativados por throw são igualmente criados. Embora seja bastante comum tratar números ou strings como erros usando throw, é frequentemente mais eficiente usar alguns tipos de exceções especificamente criadas para esses propósitos:

- - - -

Declaração throw

- -

Use a declaração throw para lançar uma exceção. Quando você lança uma exceção, você especifica a expressão contendo o valor a ser lançado:

- -
throw expressão;
-
- -

Você pode lançar qualquer expressão, não apenas expressões de um tipo específico. O código a seguir lança várias exceções de diferentes tipos:

- -
throw "Error2";   // tipo string
-throw 42;         // tipo numérico
-throw true;       // tipo booleano
-throw {toString: function() { return "Eu sou um objeto!"; } };
-
- -
Nota:  Você pode especificar um objeto quando você lança uma exceção. Você pode então, referenciar as propriedades de um objeto no bloco catch.  O exemplo a seguir cria um objeto myUserException do tipo userException e o usa em uma declaração throw.
- -
// Cria um objeto do tipo UserException
-function UserException(mensagem) {
-  this.mensagem = mensagem;
-  this.nome = "UserException";
-}
-
-// Realiza a conversão da exceção para uma string adequada quando usada como uma string.
-// (ex. pelo console de erro)
-UserException.prototype.toString = function() {
-  return this.name + ': "' + this.message + '"';
-}
-
-// Cria uma instância de um tipo de objeto e lança ela
-throw new UserException("Valor muito alto");
- -

Declaração try...catch

- -

A declaração try...catch coloca um bloco de declarações em try, e especifica uma ou mais respostas para uma exceção lançada. Se uma exceção é lançada, a declaração try...catch pegá-a.

- -

A declaração try...catch é composta por um bloco try, que contém uma ou mais declarações, e zero ou mais blocos catch, contendo declarações que especificam o que fazer se uma exceção é lançada no bloco try. Ou seja, você deseja que o bloco try  tenha sucesso, e se ele não tiver êxito, você quer o controle passado para o bloco catch. Se qualquer declaração do bloco try (ou em uma função chamada dentro do bloco try) lança uma exceção, o controle é imediatamente mudado para o bloco catch. Se nenhuma exceção é lançada no bloco try, o bloco catch é ignorado. O bloco finally executa após os blocos try e catch executarem, mas antes das declarações seguinte ao bloco try...catch.

- -

O exemplo a seguir usa a declaração try...catch. O exemplo chama uma função que recupera o nome de um mês no array com base no valor passado para a função. Se o valor não corresponde ao número de um mês (1-12), uma exceção é lançada com o valor "InvalidMonthNo" e as declarações no bloco catch define a váriavel monthName para unknown.

- -
function getMonthName(mo) {
-  mo = mo - 1; // Ajusta o número do mês para o índice do array (1 = Jan, 12 = Dec)
-  var months = ["Jan","Feb","Mar","Apr","May","Jun","Jul",
-                "Aug","Sep","Oct","Nov","Dec"];
-  if (months[mo]) {
-    return months[mo];
-  } else {
-    throw "InvalidMonthNo"; //lança uma palavra-chave aqui usada.
-  }
-}
-
-try { // statements to try
-  monthName = getMonthName(myMonth); // função poderia lançar uma exceção
-}
-catch (e) {
-  monthName = "unknown";
-  logMyErrors(e); // passa a exceção para o manipulador de erro -> sua função local.
-}
-
- -

O bloco catch

- -

Você pode usar um bloco catch para lidar com todas as exceções que podem ser geradas no bloco try.

- -
catch (catchID) {
-  declaracoes
-}
-
- -

O bloco catch específica um identificador (catchID na sintaxe anterior), que contém o valor especificado pela declaração throw; você pode usar esse identificador para obter informações sobre a exceção que foi lançada. JavaScript cria este identificador quando o bloco catch é inserido; o identificador dura enquanto o bloco catch está em execução, depois que termina a execução do bloco catch, o identificador não estará mais disponível.

- -

Por exemplo, o seguinte código lança uma exceção. Quando a exceção ocorre, o controle é transferido para o bloco catch.

- -
try {
-  throw "myException"; // lança  uma exceção
-}
-catch (e) {
-  // declarações de lidar com as exceções
-  logMyErrors(e); // passar a exceção para o manipulador de erro
-}
-
- -

O bloco finally

- -

O bloco finally contém instruções para executar após os blocos try e catch, mas antes das declarações seguinte a declaração try...catch. O bloco finally é executado com ou sem o lançamento de uma exceção. Se uma exceção é lançada, a declaração no bloco finally executa, mesmo que nenhum bloco catch processe a exceção.

- -

Você pode usar bloco finally para deixar a falha de seu script agradável quando uma exceção ocorre; por exemplo, você pode precisar liberar um recurso que seu script tem amarrado. O exemplo a seguir abre um arquivo e então executa instruções que usam o arquivo (JavaScript do lado do servidor permite que você acesse arquivos). Se um exceção é lançada enquanto o arquivo é aberto, o bloco finally fecha o arquivo antes do script falhar.

- -
openMyFile();
-try {
-  writeMyFile(theData); //Isso pode lançar um erro
-} catch(e) {
-  handleError(e); // Se temos um erro temos que lidar com ele
-} finally {
-  closeMyFile(); // Sempre feche o recurso
-}
-
- -

Se o bloco finally retornar um valor, este valor se torna o valor de toda a entrada try-catch-finally, independente de quaisquer declarações de retorno nos blocos try e catch:

- -
function f() {
-  try {
-    console.log(0);
-    throw "bogus";
-  } catch(e) {
-    console.log(1);
-    return true; // essa declaração de retorno é suspensa
-                 // até que o bloco finally seja concluído
-    console.log(2); // não executa
-  } finally {
-    console.log(3);
-    return false; // substitui o "return" anterior
-    console.log(4); // não executa
-  }
-  // "return false" é executado agora
-  console.log(5); // não executa
-}
-f(); // exibe 0, 1, 3; retorna false
-
- -

Substituições de valores de retorno pelo bloco finally também se aplica a exceções lançadas ou re-lançadas dentro do bloco catch:

- -
function f() {
-  try {
-    throw "bogus";
-  } catch(e) {
-    console.log('captura interior "falso"');
-    throw e; // essa instrução throw é suspensa até
-             // que o bloco finally seja concluído
-  } finally {
-    return false; // substitui "throw" anterior
-  }
-  // "return false" é executado agora
-}
-
-try {
-  f();
-} catch(e) {
-  // isto nunca é executado porque o throw dentro
-  // do catch é substituído
-  // pelo return no finally
-  console.log('captura exterior "falso"');
-}
-
-// SAIDA
-// captura interior "falso"
- -

Aninhando declarações try...catch

- -

Você pode aninhar uma ou mais declarações try...catch. Se uma declaração try...catch interior não tem um bloco catch, o delimitador do bloco try...catch da declaração catch é verificado por uma correspondência.

- -

Utilizando objetos de erro

- -

Dependendo do tipo de erro, você pode ser capaz de usar as propriedade 'name' e 'message' para pegar uma mensagem mais refinada. A propriedade 'name' fornece a classe geral de erro (ex., 'DOMException' ou 'Error'), enquanto 'message' geralmente oferece uma mensagem mais sucinta do que se poderia obter através da conversão do objeto de erro para uma string.

- -

Se você está lançando suas próprias exceções, a fim de tirar proveito dessas propriedades (como o seu bloco catch não discrimina entre suas próprias exceções e as exceções próprias da linguagem), você pode usar o construtor Error. Por exemplo:

- -
function doSomethingErrorProne () {
-  if (ourCodeMakesAMistake()) {
-    throw (new Error('A mensagem'));
-  } else {
-    doSomethingToGetAJavascriptError();
-  }
-}
-....
-try {
-  doSomethingErrorProne();
-}
-catch (e) {
-  console.log(e.name); // exibe 'Error'
-  console.log(e.message); // exibe 'A mensagem' ou uma mensagem de erro em JavaScript
-}
- -

Promises

- -

Começando com ECMAScript 6, JavaScript ganha suporte para objetos {{jsxref("Promise")}} que lhe permite controlar o fluxo de operações diferídas e assíncronas.

- -

Uma Promise assume um destes estados:

- -
    -
  • pending: estado inicial, não fulfilled, ou rejected.
    • -
  • fulfilled: operação bem sucedida.
    • -
  • rejected: operação falha.
    • -
  • settled: A Promise é fulfilled ou rejected, mas não pending.
    • -
- -

- -

Carregando uma imagem com XHR

- -

Um exemplo simples usando Promise e XMLHttpRequest para carregar uma imagem disponível no repositório MDN GitHub promise-test. Você também pode vê-lo executando. Cada etapa está comentada o que lhe permite seguir de perto a arquitetura Promise e arquitetura XHR. Aqui está a versão não comentada, mostrando o fluxo Promise para que você possa ter uma ideia:

- -
function imgLoad(url) {
-  return new Promise(function(resolve, reject) {
-    var request = new XMLHttpRequest();
-    request.open('GET', url);
-    request.responseType = 'blob';
-    request.onload = function() {
-      if (request.status === 200) {
-        resolve(request.response);
-      } else {
-        reject(Error('Image didn\'t load successfully; error code:'
-                     + request.statusText));
-      }
-    };
-    request.onerror = function() {
-      reject(Error('There was a network error.'));
-    };
-    request.send();
-  });
-}
- -

Para uma informação mais detalhada, consulte a página de referência {{jsxref("Promise")}}.

- -
{{PreviousNext("Web/JavaScript/Guide/Grammar_and_types", "Web/JavaScript/Guide/Loops_and_iteration")}}
diff --git a/files/pt-br/web/javascript/guide/details_of_the_object_model/index.html b/files/pt-br/web/javascript/guide/details_of_the_object_model/index.html new file mode 100644 index 0000000000..55a4c928a5 --- /dev/null +++ b/files/pt-br/web/javascript/guide/details_of_the_object_model/index.html @@ -0,0 +1,705 @@ +--- +title: Detalhes do modelo de objeto +slug: Web/JavaScript/Guide/Detalhes_do_Modelo_do_Objeto +tags: + - Entidade + - Modelo + - Objeto + - Orientação á Objeto +translation_of: Web/JavaScript/Guide/Details_of_the_Object_Model +--- +

JavaScript é uma linguagem orientada a objetos com base em protótipos, em vez de ser baseada em classes. Devido a essa base diferente, pode ser menos evidente como o JavaScript permite criar hierarquias de objetos e ter herança de propriedades e seus valores. Este capítulo tenta esclarecer essa situação.

+ +
+
Este capítulo assume que você já está um pouco familiarizado com JavaScript e que você já tenha usado funções JavaScript para criar simples objetos.
+ +
+
+ +

Linguagens baseada em classe vs. baseada em protótipo

+ +

Linguagens orientadas a objetos baseadas em classe, como Java e C + +, são fundadas no conceito de duas entidades distintas: classes e instâncias.

+ +
    +
  • Uma classe define todas as propriedades (considerando-se os métodos e campos em Java, ou membros em C + +, para ser propriedades) que caracterizam um determinado conjunto de objetos. Uma classe é algo abstrato, ao invés de qualquer membro particular do conjunto de objetos que descreve. Por exemplo, a classe Employee poderia representar o conjunto de todos os funcionários.
    • +
  • Uma instância, por outro lado, é a instanciação de uma classe, ou seja, um dos seus membros. Por exemplo, Victoria poderia ser uma instância da classe Employee, o que representa um indivíduo em particular como um empregado. Uma instância tem exatamente as propriedades de sua classe pai (nem mais, nem menos).
    • +
+ +

Uma linguagem baseada em protótipo, como JavaScript, não faz essa distinção: ele simplesmente tem objetos. Uma linguagem baseada em protótipo tem a idéia de um objeto prototípico, um objeto usado como um modelo do qual obtém as propriedades iniciais para um novo objeto. Qualquer objeto pode especificar suas próprias propriedades, quando você o cria ou em tempo de execução. Além disso, qualquer objeto pode ser associado como um protótipo de outro objeto, permitindo ao segundo objeto compartilhar as propriedades do primeiro objeto.

+ +

Definindo uma classe

+ +

Em linguagens baseadas em classe, você define uma classe em uma definição de classe separada. Nessa definição, você pode especificar métodos especiais, chamados de construtores, para criar instâncias da classe. Um método construtor pode especificar valores iniciais para as propriedades da instância e executar outros processamentos apropriados no momento da criação. Você pode usar o operador new, em associação com o método construtor para criar instâncias de classe.

+ +

O JavaScript segue um modelo semelhante, mas não têm uma definição da classe separada do construtor. Em vez disso, você define uma função de construtor para criar objetos com um conjunto inicial particular de propriedades e valores. Qualquer função JavaScript pode ser usado como um construtor. Você pode usar o operador new com uma função de construtor para criar um novo objeto.

+ +

Subclasses e herança

+ +

Em uma linguagem baseada em classe, você cria a hierárquia de classes através de sua definição. Em uma definição de classes,  você pode  especificar que a nova classe é uma subclasse de outra já existente. A subclasse herda todas as propriedades da  superclasse e pode adicionar novas propriedades ou modificar propriedades herdadas. Por exemplo, assuma que  a classe Employee tem somente duas propriedades name e dept , e Manager é uma subclasse of Employee que adiciona a propriedade reports. Neste caso, uma instância da classe Manager  terá todas as três propiedades: name, dept, and reports.

+ +

Em JavaScript, a herança é implementada associando um objeto prototípico a qualquer função de construtor. Então, você pode criar exatamente o mesmo exemplo: Employee — Manager, mas utilizando uma terminologia ligeramente diferente. Primeiro, define-se a função de construtor de  Employee, especificando as propriedades name e dept. Depois,  define-se a função de construtor de  Manager, especificando a propriedade reports. Finalmente, associa-se um objeto new Employee  como  prototype para a função de construtor Manager. Então, quando vocẽ criar um objeto new Manager, ele herdará as propriedades  name e dept do objeto Employee.

+ +

Adicionando e removendo propriedades

+ +

Em uma linguagem baseada em classe, você normalmente cria uma classe em tempo de compilação e então vincula as instâncias da classe em tempo de compilação, ou tempo de execução. Você não pode alterar o número ou o tipo de propriedade de uma classe após definí-la. Em javaScript, no entanto, você pode adicionar ou remover propriedades de qualquer objeto. Se você adiciona uma propriedade a um objeto que é usado como o protótipo para um conjunto de objetos, os objetos no qual ele é protótipo herdarão as novas propriedades.

+ +

Sumário das diferenças

+ +

A tabela a seguir apresenta um breve resumo de algumas dessas diferenças. O restante deste capítulo descreve os detalhes do uso de construtores e protótipos JavaScript para criar uma hierarquia de objetos e compara isso à maneira como você faria em Java.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Comparação de objetos do sistema baseados em classes (Java) e baseado em protótipo (JavaScript)
Baseados em classes (Java)Baseados em protótipos (JavaScript)
Classes e instancias são entidades distintas.Todos os objetos são instancias.
Define uma classe com uma definição de classe; cria um objeto - como instância da classe - com o método constructor.Define e cria um conjunto de objetos com funções construtoras.
Cria um único objeto com o operador new.Faz o mesmo.
Constroi uma hierarquia de objetos usando definição de classe para definir subclasses de classes existentes.Constrói uma hierarquia de objetos, atribuindo um objeto como o protótipo associado com uma função de construtor.
Herda propriedade seguindo a cadeia de classe.Herda propriedade seguindo a cadeia de protótipo.
Definição de classe especifica todas as propriedades de todas as instâncias de uma classe. Não é possível adicionar propriedades dinamicamente em tempo de execução.Função construtor ou protótipo especifica um conjunto inicial de propriedades. Pode adicionar ou remover propriedades de forma dinâmica para objetos individuais ou para todo o conjunto de objetos.
+ +

O exemplo employee

+ +

O restante deste capítulo usa a hierarquia employee como mostrado na figura abaixo. 

+ +
+

Uma simples hierarquia de objetos:

+ +

+ +
    +
  • Employee tem a propriedade name (cujo valor padrão é uma string vazia) e dept (cujo valor padrão  e o "general").
    • +
  • Manager é baseado no Employee. É adicionada a propriedade reports (cujo valor padrão é um array vazio, planejado para ter um array do objeto Employee como valor).
    • +
  • WorkerBee também é baseado no  Employee. É adicionada  a propriedade projects (cujo valor padrão é um array vazio, pretende-se ter um array de strings como valor).
    • +
  • SalesPerson é baseado no WorkerBee. É adicionada a propriedade quota (cujo valor padrão é 100). E também controla a propriedade dept  com o valor "sales", indicando que todos os salespersons são o mesmo departamento.
    • +
  • Engineer é baseado no WorkerBee. É adicionada a propriedade machine (cujo valor padrão é uma string vazia) e também controla a propriedade dept com o valor "engineering".
    • +
+
+ +

Criando a hierarquia

+ +

Há muitas formas de definir funções construtoras apropriadas para implementar a hierarquia Employee. Como escolher defini-las depende amplamente do que você quer ser capaz de fazer em sua aplicação.

+ +

Esta seção mostra definições simples de como trabalhar com heranças. Nestas definições, você não pode especificar nenhum valor de propriedade quando criar um objeto. O recém-criado objeto terá os valores padrão, que você poderá alterar mais tarde.

+ +

Na aplicação real, você poderia definir construtores que permitem que você forneça valores de propriedade no momento da criação do objeto (veja Construtores flexíveis para saber mais). Por enquanto, estas simples definições demonstram como a herança ocorre.

+ +

As seguintes definições Java e JavaScript Employee são similares. A única diferença é que você precisa especificar o tipo de cada propriedade em Java, mas não em JavaScript (devido ao Java ser uma linguagem fortemente tipada enquanto o JavaScript é linguagem fracamente tipada).

+ +
+

JavaScript

+ +
function Employee() {
+  this.name = "";
+  this.dept = "general";
+}
+
+ +

Java

+ +
public class Employee {
+   public String name = "";
+   public String dept = "general";
+}
+
+
+ +

As definições Manager e WorkerBee mostram a diferença na forma de especificar o próximo objeto mais alto na cadeia de herança. Em JavaScript, você adiciona uma instância prototípica como o valor da propriedade prototype da função construtora. Você pode fazer isso a qualquer momento depois de definir o construtor. Em Java, você especifica a superclasse dentro da classe definida. Você não pode alterar a superclasse fora da classe definida.

+ +
+

JavaScript

+ +
function Manager() {
+  Employee.call(this);
+  this.reports = [];
+}
+Manager.prototype = Object.create(Employee.prototype);
+
+function WorkerBee() {
+  Employee.call(this);
+  this.projects = [];
+}
+WorkerBee.prototype = Object.create(Employee.prototype);
+
+ +

Java

+ +
public class Manager extends Employee {
+   public Employee[] reports = new Employee[0];
+}
+
+
+
+public class WorkerBee extends Employee {
+   public String[] projects = new String[0];
+}
+
+
+
+
+ +

As definições Engineer e SalesPerson criam objetos que descendem de WorkerBee e consequentemente de Employee. Objetos destes tipos tem propriedades de todos os objetos acima de sua cadeia. Em adição, estas definições substituem o valor herdado da propriedade dept com novos valores específicos para esses objetos.

+ +
+

JavaScript

+ +
function SalesPerson() {
+   WorkerBee.call(this);
+   this.dept = "sales";
+   this.quota = 100;
+}
+SalesPerson.prototype = Object.create(WorkerBee.prototype);
+
+function Engineer() {
+   WorkerBee.call(this);
+   this.dept = "engineering";
+   this.machine = "";
+}
+Engineer.prototype = Object.create(WorkerBee.prototype);
+
+ +

Java

+ +
public class SalesPerson extends WorkerBee {
+   public double quota;
+   public dept = "sales";
+   public quota = 100.0;
+}
+
+
+public class Engineer extends WorkerBee {
+   public String machine;
+   public dept = "engineering";
+   public machine = "";
+}
+
+
+
+ +

Usando estas definições, você pode criar instâncias desses objetos que obterão valores padrão para suas propriedades. A próxima imagem mostra o uso destas definições JavaScript para criar novos objetos e mostrar os valores das propriedades dos novos objetos. 

+ +
+

Note: O termo instancia   tem significado específicamente técnico em linguagens baseadas em classe. Nessas linguagens, uma instância é uma instanciação individual de uma classe e é fundamentalmente diferente de uma classe. Em JavaScript, "instância" não tem esse significado técnico porque JavaScript não tem essa diferença entre classes e instâncias. No entanto, falando sobre JavaScript, "instância" pode ser usada informalmente para significar um objeto criado usando uma função construtora particular. Então, neste exemplo, você pode informalmente dizer que jane é uma instância de Engineer. Similarmente, embora os termos parent, child, ancestor, e descendant não tenham significados formais em JavaScript; você pode usá-los informalmente para referir a objetos altos ou baixos na cadeia de protótipos.

+
+ +

Criando objetos com definições simples

+ +
+

Hierarquia do Objeto

+ +

A hierarquia abaixo foi criada utilizando o código ao lado.

+ +

+ +

Objetos individuais = Jim, Sally, Mark, Fred, Jane, etc. "Instancias" criadas a partir do construtor.

+ +
var jim = new Employee;
+// jim.name is ''
+// jim.dept is 'general'
+
+var sally = new Manager;
+// sally.name is ''
+// sally.dept is 'general'
+// sally.reports is []
+
+var mark = new WorkerBee;
+// mark.name is ''
+// mark.dept is 'general'
+// mark.projects is []
+
+var fred = new SalesPerson;
+// fred.name is ''
+// fred.dept is 'sales'
+// fred.projects is []
+// fred.quota is 100
+
+var jane = new Engineer;
+// jane.name is ''
+// jane.dept is 'engineering'
+// jane.projects is []
+// jane.machine is ''
+
+
+ +

Propriedades do Objeto

+ +

Esta seção discute como objetos herdam propriedades de outros objetos na cadeia de protótipos e o que acontece quando você adiciona uma propriedade em tempo de execução.

+ +

Herdando Propriedades

+ +

Suponha que você criou o objeto mark como um WorkerBee com a seguinte declaração:

+ +
var mark = new WorkerBee;
+
+ +

Quando o JavaScript vê o operador new, ele cria um novo objeto genérico e implicitamente define o valor da propriedade interna [[Protótipo]] para o valor de WorkerBee.prototype passando este novo objeto como o valor da palavra-chave this para a função construtora de WorkerBee. A propriedade interna [[__proto__]] determina a cadeia de protótipos usada para retornar os valores das propriedades. Uma vez que essas propriedades são definidas, o JavaScript retorna o novo objeto e a declaração de atribuição define a variável mark para este objeto.

+ +

Este processo não põe explicitamente valores no objeto mark (valores locais) para as propriedades que mark herdou da cadeia de protótipo. Quando você solicita o valor de uma propriedade, o JavaScript primeiro verifica se o valor existe nesse objeto. Caso exista, esse valor é retornado. Se o valor não existe localmente, JavaScript verifica a cadeia de protótipos (usando a propriedade  interna __proto__). Se um objeto na cadeia de protótipos possui um valor para a propriedade, este valor é retornado. Se nenhuma propriedade é encontrada, o Javascript avisa que o objeto não possui a propriedade. Deste modo, o objeto mark possui as seguintes propriedades e valores: 

+ +
mark.name = "";
+mark.dept = "general";
+mark.projects = [];
+
+ +

The mark object inherits values for the name and dept properties from the prototypical object in mark.__proto__. It is assigned a local value for the projects property by the WorkerBee constructor. This gives you inheritance of properties and their values in JavaScript. Some subtleties of this process are discussed in Property inheritance revisited.

+ +

Because these constructors do not let you supply instance-specific values, this information is generic. The property values are the default ones shared by all new objects created from WorkerBee. You can, of course, change the values of any of these properties. So, you could give specific information for mark as follows:

+ +
mark.name = "Doe, Mark";
+mark.dept = "admin";
+mark.projects = ["navigator"];
+ +

Adding properties

+ +

In JavaScript, you can add properties to any object at run time. You are not constrained to use only the properties provided by the constructor function. To add a property that is specific to a single object, you assign a value to the object, as follows:

+ +
mark.bonus = 3000;
+
+ +

Now, the mark object has a bonus property, but no other WorkerBee has this property.

+ +

If you add a new property to an object that is being used as the prototype for a constructor function, you add that property to all objects that inherit properties from the prototype. For example, you can add a specialty property to all employees with the following statement:

+ +
Employee.prototype.specialty = "none";
+
+ +

As soon as JavaScript executes this statement, the mark object also has the specialty property with the value of "none". The following figure shows the effect of adding this property to the Employee prototype and then overriding it for the Engineer prototype.

+ +


+ Adding properties

+ +

More flexible constructors

+ +

The constructor functions shown so far do not let you specify property values when you create an instance. As with Java, you can provide arguments to constructors to initialize property values for instances. The following figure shows one way to do this.

+ +


+ Specifying properties in a constructor, take 1

+ +

The following table shows the Java and JavaScript definitions for these objects.

+ +
+

JavaScript

+ +

Java

+
+ +
+
function Employee (name, dept) {
+  this.name = name || "";
+  this.dept = dept || "general";
+}
+
+ +
public class Employee {
+   public String name;
+   public String dept;
+   public Employee () {
+      this("", "general");
+   }
+   public Employee (String name) {
+      this(name, "general");
+   }
+   public Employee (String name, String dept) {
+      this.name = name;
+      this.dept = dept;
+   }
+}
+
+
+ +
+
function WorkerBee (projs) {
+
+ this.projects = projs || [];
+}
+WorkerBee.prototype = new Employee;
+
+ +
public class WorkerBee extends Employee {
+   public String[] projects;
+   public WorkerBee () {
+      this(new String[0]);
+   }
+   public WorkerBee (String[] projs) {
+      projects = projs;
+   }
+}
+
+
+ +
+
+function Engineer (mach) {
+   this.dept = "engineering";
+   this.machine = mach || "";
+}
+Engineer.prototype = new WorkerBee;
+
+ +
public class Engineer extends WorkerBee {
+   public String machine;
+   public Engineer () {
+      dept = "engineering";
+      machine = "";
+   }
+   public Engineer (String mach) {
+      dept = "engineering";
+      machine = mach;
+   }
+}
+
+
+ +

These JavaScript definitions use a special idiom for setting default values:

+ +
this.name = name || "";
+
+ +

The JavaScript logical OR operator (||) evaluates its first argument. If that argument converts to true, the operator returns it. Otherwise, the operator returns the value of the second argument. Therefore, this line of code tests to see if name has a useful value for the name property. If it does, it sets this.name to that value. Otherwise, it sets this.name to the empty string. This chapter uses this idiom for brevity; however, it can be puzzling at first glance.

+ +
+

Note: This may not work as expected if the constructor function is called with arguments which convert to false (like 0 (zero) and empty string (""). In this case the default value will be chosen.

+
+ +

With these definitions, when you create an instance of an object, you can specify values for the locally defined properties. You can use the following statement to create a new Engineer:

+ +
var jane = new Engineer("belau");
+
+ +

Jane's properties are now:

+ +
jane.name == "";
+jane.dept == "engineering";
+jane.projects == [];
+jane.machine == "belau"
+
+ +

Notice that with these definitions, you cannot specify an initial value for an inherited property such as name. If you want to specify an initial value for inherited properties in JavaScript, you need to add more code to the constructor function.

+ +

So far, the constructor function has created a generic object and then specified local properties and values for the new object. You can have the constructor add more properties by directly calling the constructor function for an object higher in the prototype chain. The following figure shows these new definitions.

+ +


+ Specifying properties in a constructor, take 2

+ +

Let's look at one of these definitions in detail. Here's the new definition for the Engineer constructor:

+ +
function Engineer (name, projs, mach) {
+  this.base = WorkerBee;
+  this.base(name, "engineering", projs);
+  this.machine = mach || "";
+}
+
+ +

Suppose you create a new Engineer object as follows:

+ +
var jane = new Engineer("Doe, Jane", ["navigator", "javascript"], "belau");
+
+ +

JavaScript follows these steps:

+ +
    +
  1. The new operator creates a generic object and sets its __proto__ property to Engineer.prototype.
    2. +
  2. The new operator passes the new object to the Engineer constructor as the value of the this keyword.
    3. +
  3. The constructor creates a new property called base for that object and assigns the value of the WorkerBee constructor to the base property. This makes the WorkerBee constructor a method of the Engineer object.The name of the base property is not special. You can use any legal property name; base is simply evocative of its purpose.
    4. +
  4. +

    The constructor calls the base method, passing as its arguments two of the arguments passed to the constructor ("Doe, Jane" and ["navigator", "javascript"]) and also the string "engineering". Explicitly using "engineering" in the constructor indicates that all Engineer objects have the same value for the inherited dept property, and this value overrides the value inherited from Employee.

    +
    5. +
  5. Because base is a method of Engineer, within the call to base, JavaScript binds the this keyword to the object created in Step 1. Thus, the WorkerBee function in turn passes the "Doe, Jane" and "engineering" arguments to the Employee constructor function. Upon return from the Employee constructor function, the WorkerBee function uses the remaining argument to set the projects property.
    6. +
  6. Upon return from the base method, the Engineer constructor initializes the object's machine property to "belau".
    7. +
  7. Upon return from the constructor, JavaScript assigns the new object to the jane variable.
    8. +
+ +

You might think that, having called the WorkerBee constructor from inside the Engineer constructor, you have set up inheritance appropriately for Engineer objects. This is not the case. Calling the WorkerBee constructor ensures that an Engineer object starts out with the properties specified in all constructor functions that are called. However, if you later add properties to the Employee or WorkerBee prototypes, those properties are not inherited by the Engineer object. For example, assume you have the following statements:

+ +
function Engineer (name, projs, mach) {
+  this.base = WorkerBee;
+  this.base(name, "engineering", projs);
+  this.machine = mach || "";
+}
+var jane = new Engineer("Doe, Jane", ["navigator", "javascript"], "belau");
+Employee.prototype.specialty = "none";
+
+ +

The jane object does not inherit the specialty property. You still need to explicitly set up the prototype to ensure dynamic inheritance. Assume instead you have these statements:

+ +
function Engineer (name, projs, mach) {
+  this.base = WorkerBee;
+  this.base(name, "engineering", projs);
+  this.machine = mach || "";
+}
+Engineer.prototype = new WorkerBee;
+var jane = new Engineer("Doe, Jane", ["navigator", "javascript"], "belau");
+Employee.prototype.specialty = "none";
+
+ +

Now the value of the jane object's specialty property is "none".

+ +

Another way of inheriting is by using the call() / apply() methods. Below are equivalent:

+ +
+
function Engineer (name, projs, mach) {
+  this.base = WorkerBee;
+  this.base(name, "engineering", projs);
+  this.machine = mach || "";
+}
+
+ +
function Engineer (name, projs, mach) {
+  WorkerBee.call(this, name, "engineering", projs);
+  this.machine = mach || "";
+}
+
+
+ +

Using the javascript call() method makes a cleaner implementation because the base is not needed anymore.

+ +

Property inheritance revisited

+ +

The preceding sections described how JavaScript constructors and prototypes provide hierarchies and inheritance. This section discusses some subtleties that were not necessarily apparent in the earlier discussions.

+ +

Local versus inherited values

+ +

When you access an object property, JavaScript performs these steps, as described earlier in this chapter:

+ +
    +
  1. Check to see if the value exists locally. If it does, return that value.
    2. +
  2. If there is not a local value, check the prototype chain (using the __proto__ property).
    3. +
  3. If an object in the prototype chain has a value for the specified property, return that value.
    4. +
  4. If no such property is found, the object does not have the property.
    5. +
+ +

The outcome of these steps depends on how you define things along the way. The original example had these definitions:

+ +
function Employee () {
+  this.name = "";
+  this.dept = "general";
+}
+
+function WorkerBee () {
+  this.projects = [];
+}
+WorkerBee.prototype = new Employee;
+
+ +

With these definitions, suppose you create amy as an instance of WorkerBee with the following statement:

+ +
var amy = new WorkerBee;
+
+ +

The amy object has one local property, projects. The values for the name and dept properties are not local to amy and so are gotten from the amy object's __proto__ property. Thus, amy has these property values:

+ +
amy.name == "";
+amy.dept == "general";
+amy.projects == [];
+
+ +

Now suppose you change the value of the name property in the prototype associated with Employee:

+ +
Employee.prototype.name = "Unknown"
+
+ +

At first glance, you might expect that new value to propagate down to all the instances of Employee. However, it does not.

+ +

When you create any instance of the Employee object, that instance gets a local value for the name property (the empty string). This means that when you set the WorkerBee prototype by creating a new Employee object, WorkerBee.prototype has a local value for the name property. Therefore, when JavaScript looks up the name property of the amy object (an instance of WorkerBee), JavaScript finds the local value for that property in WorkerBee.prototype. It therefore does not look farther up the chain to Employee.prototype.

+ +

If you want to change the value of an object property at run time and have the new value be inherited by all descendants of the object, you cannot define the property in the object's constructor function. Instead, you add it to the constructor's associated prototype. For example, assume you change the preceding code to the following:

+ +
function Employee () {
+  this.dept = "general";
+}
+Employee.prototype.name = "";
+
+function WorkerBee () {
+  this.projects = [];
+}
+WorkerBee.prototype = new Employee;
+
+var amy = new WorkerBee;
+
+Employee.prototype.name = "Unknown";
+
+ +

In this case, the name property of amy becomes "Unknown".

+ +

As these examples show, if you want to have default values for object properties and you want to be able to change the default values at run time, you should set the properties in the constructor's prototype, not in the constructor function itself.

+ +

Determining instance relationships

+ +

Property lookup in JavaScript looks within an object's own properties and, if the property name is not found, it looks within the special object property __proto__. This continues recursively; the process is called "lookup in the prototype chain".

+ +

The special property __proto__ is set when an object is constructed; it is set to the value of the constructor's prototype property. So the expression new Foo() creates an object with __proto__ == Foo.prototype. Consequently, changes to the properties of Foo.prototype alters the property lookup for all objects that were created by new Foo().

+ +

Every object has a __proto__ object property (except Object); every function has a prototype object property. So objects can be related by 'prototype inheritance' to other objects. You can test for inheritance by comparing an object's __proto__ to a function's prototype object. JavaScript provides a shortcut: the instanceof operator tests an object against a function and returns true if the object inherits from the function prototype. For example,

+ +
var f = new Foo();
+var isTrue = (f instanceof Foo);
+ +

For a more detailed example, suppose you have the same set of definitions shown in Inheriting properties. Create an Engineer object as follows:

+ +
var chris = new Engineer("Pigman, Chris", ["jsd"], "fiji");
+
+ +

With this object, the following statements are all true:

+ +
chris.__proto__ == Engineer.prototype;
+chris.__proto__.__proto__ == WorkerBee.prototype;
+chris.__proto__.__proto__.__proto__ == Employee.prototype;
+chris.__proto__.__proto__.__proto__.__proto__ == Object.prototype;
+chris.__proto__.__proto__.__proto__.__proto__.__proto__ == null;
+
+ +

Given this, you could write an instanceOf function as follows:

+ +
function instanceOf(object, constructor) {
+   object = object.__proto__;
+   while (object != null) {
+      if (object == constructor.prototype)
+         return true;
+      if (typeof object == 'xml') {
+        return constructor.prototype == XML.prototype;
+      }
+      object = object.__proto__;
+   }
+   return false;
+}
+
+ +
Note: The implementation above checks the type of the object against "xml" in order to work around a quirk of how XML objects are represented in recent versions of JavaScript. See {{ bug(634150) }} if you want the nitty-gritty details.
+ +

Using the instanceOf function defined above, these expressions are true:

+ +
instanceOf (chris, Engineer)
+instanceOf (chris, WorkerBee)
+instanceOf (chris, Employee)
+instanceOf (chris, Object)
+
+ +

But the following expression is false:

+ +
instanceOf (chris, SalesPerson)
+
+ +

Global information in constructors

+ +

When you create constructors, you need to be careful if you set global information in the constructor. For example, assume that you want a unique ID to be automatically assigned to each new employee. You could use the following definition for Employee:

+ +
var idCounter = 1;
+
+function Employee (name, dept) {
+   this.name = name || "";
+   this.dept = dept || "general";
+   this.id = idCounter++;
+}
+
+ +

With this definition, when you create a new Employee, the constructor assigns it the next ID in sequence and then increments the global ID counter. So, if your next statement is the following, victoria.id is 1 and harry.id is 2:

+ +
var victoria = new Employee("Pigbert, Victoria", "pubs")
+var harry = new Employee("Tschopik, Harry", "sales")
+
+ +

At first glance that seems fine. However, idCounter gets incremented every time an Employee object is created, for whatever purpose. If you create the entire Employee hierarchy shown in this chapter, the Employee constructor is called every time you set up a prototype. Suppose you have the following code:

+ +
var idCounter = 1;
+
+function Employee (name, dept) {
+   this.name = name || "";
+   this.dept = dept || "general";
+   this.id = idCounter++;
+}
+
+function Manager (name, dept, reports) {...}
+Manager.prototype = new Employee;
+
+function WorkerBee (name, dept, projs) {...}
+WorkerBee.prototype = new Employee;
+
+function Engineer (name, projs, mach) {...}
+Engineer.prototype = new WorkerBee;
+
+function SalesPerson (name, projs, quota) {...}
+SalesPerson.prototype = new WorkerBee;
+
+var mac = new Engineer("Wood, Mac");
+
+ +

Further assume that the definitions omitted here have the base property and call the constructor above them in the prototype chain. In this case, by the time the mac object is created, mac.id is 5.

+ +

Depending on the application, it may or may not matter that the counter has been incremented these extra times. If you care about the exact value of this counter, one possible solution involves instead using the following constructor:

+ +
function Employee (name, dept) {
+   this.name = name || "";
+   this.dept = dept || "general";
+   if (name)
+      this.id = idCounter++;
+}
+
+ +

When you create an instance of Employee to use as a prototype, you do not supply arguments to the constructor. Using this definition of the constructor, when you do not supply arguments, the constructor does not assign a value to the id and does not update the counter. Therefore, for an Employee to get an assigned id, you must specify a name for the employee. In this example, mac.id would be 1.

+ +

No multiple inheritance

+ +

Some object-oriented languages allow multiple inheritance. That is, an object can inherit the properties and values from unrelated parent objects. JavaScript does not support multiple inheritance.

+ +

Inheritance of property values occurs at run time by JavaScript searching the prototype chain of an object to find a value. Because an object has a single associated prototype, JavaScript cannot dynamically inherit from more than one prototype chain.

+ +

In JavaScript, you can have a constructor function call more than one other constructor function within it. This gives the illusion of multiple inheritance. For example, consider the following statements:

+ +
function Hobbyist (hobby) {
+   this.hobby = hobby || "scuba";
+}
+
+function Engineer (name, projs, mach, hobby) {
+   this.base1 = WorkerBee;
+   this.base1(name, "engineering", projs);
+   this.base2 = Hobbyist;
+   this.base2(hobby);
+   this.machine = mach || "";
+}
+Engineer.prototype = new WorkerBee;
+
+var dennis = new Engineer("Doe, Dennis", ["collabra"], "hugo")
+
+ +

Further assume that the definition of WorkerBee is as used earlier in this chapter. In this case, the dennis object has these properties:

+ +
dennis.name == "Doe, Dennis"
+dennis.dept == "engineering"
+dennis.projects == ["collabra"]
+dennis.machine == "hugo"
+dennis.hobby == "scuba"
+
+ +

So dennis does get the hobby property from the Hobbyist constructor. However, assume you then add a property to the Hobbyist constructor's prototype:

+ +
Hobbyist.prototype.equipment = ["mask", "fins", "regulator", "bcd"]
+
+ +

The dennis object does not inherit this new property.

+ +
{{PreviousNext("Web/JavaScript/Guide/Working_with_Objects", "Web/JavaScript/Guide/Iterators_and_Generators")}}
diff --git a/files/pt-br/web/javascript/guide/detalhes_do_modelo_do_objeto/index.html b/files/pt-br/web/javascript/guide/detalhes_do_modelo_do_objeto/index.html deleted file mode 100644 index 55a4c928a5..0000000000 --- a/files/pt-br/web/javascript/guide/detalhes_do_modelo_do_objeto/index.html +++ /dev/null @@ -1,705 +0,0 @@ ---- -title: Detalhes do modelo de objeto -slug: Web/JavaScript/Guide/Detalhes_do_Modelo_do_Objeto -tags: - - Entidade - - Modelo - - Objeto - - Orientação á Objeto -translation_of: Web/JavaScript/Guide/Details_of_the_Object_Model ---- -

JavaScript é uma linguagem orientada a objetos com base em protótipos, em vez de ser baseada em classes. Devido a essa base diferente, pode ser menos evidente como o JavaScript permite criar hierarquias de objetos e ter herança de propriedades e seus valores. Este capítulo tenta esclarecer essa situação.

- -
-
Este capítulo assume que você já está um pouco familiarizado com JavaScript e que você já tenha usado funções JavaScript para criar simples objetos.
- -
-
- -

Linguagens baseada em classe vs. baseada em protótipo

- -

Linguagens orientadas a objetos baseadas em classe, como Java e C + +, são fundadas no conceito de duas entidades distintas: classes e instâncias.

- -
    -
  • Uma classe define todas as propriedades (considerando-se os métodos e campos em Java, ou membros em C + +, para ser propriedades) que caracterizam um determinado conjunto de objetos. Uma classe é algo abstrato, ao invés de qualquer membro particular do conjunto de objetos que descreve. Por exemplo, a classe Employee poderia representar o conjunto de todos os funcionários.
    • -
  • Uma instância, por outro lado, é a instanciação de uma classe, ou seja, um dos seus membros. Por exemplo, Victoria poderia ser uma instância da classe Employee, o que representa um indivíduo em particular como um empregado. Uma instância tem exatamente as propriedades de sua classe pai (nem mais, nem menos).
    • -
- -

Uma linguagem baseada em protótipo, como JavaScript, não faz essa distinção: ele simplesmente tem objetos. Uma linguagem baseada em protótipo tem a idéia de um objeto prototípico, um objeto usado como um modelo do qual obtém as propriedades iniciais para um novo objeto. Qualquer objeto pode especificar suas próprias propriedades, quando você o cria ou em tempo de execução. Além disso, qualquer objeto pode ser associado como um protótipo de outro objeto, permitindo ao segundo objeto compartilhar as propriedades do primeiro objeto.

- -

Definindo uma classe

- -

Em linguagens baseadas em classe, você define uma classe em uma definição de classe separada. Nessa definição, você pode especificar métodos especiais, chamados de construtores, para criar instâncias da classe. Um método construtor pode especificar valores iniciais para as propriedades da instância e executar outros processamentos apropriados no momento da criação. Você pode usar o operador new, em associação com o método construtor para criar instâncias de classe.

- -

O JavaScript segue um modelo semelhante, mas não têm uma definição da classe separada do construtor. Em vez disso, você define uma função de construtor para criar objetos com um conjunto inicial particular de propriedades e valores. Qualquer função JavaScript pode ser usado como um construtor. Você pode usar o operador new com uma função de construtor para criar um novo objeto.

- -

Subclasses e herança

- -

Em uma linguagem baseada em classe, você cria a hierárquia de classes através de sua definição. Em uma definição de classes,  você pode  especificar que a nova classe é uma subclasse de outra já existente. A subclasse herda todas as propriedades da  superclasse e pode adicionar novas propriedades ou modificar propriedades herdadas. Por exemplo, assuma que  a classe Employee tem somente duas propriedades name e dept , e Manager é uma subclasse of Employee que adiciona a propriedade reports. Neste caso, uma instância da classe Manager  terá todas as três propiedades: name, dept, and reports.

- -

Em JavaScript, a herança é implementada associando um objeto prototípico a qualquer função de construtor. Então, você pode criar exatamente o mesmo exemplo: Employee — Manager, mas utilizando uma terminologia ligeramente diferente. Primeiro, define-se a função de construtor de  Employee, especificando as propriedades name e dept. Depois,  define-se a função de construtor de  Manager, especificando a propriedade reports. Finalmente, associa-se um objeto new Employee  como  prototype para a função de construtor Manager. Então, quando vocẽ criar um objeto new Manager, ele herdará as propriedades  name e dept do objeto Employee.

- -

Adicionando e removendo propriedades

- -

Em uma linguagem baseada em classe, você normalmente cria uma classe em tempo de compilação e então vincula as instâncias da classe em tempo de compilação, ou tempo de execução. Você não pode alterar o número ou o tipo de propriedade de uma classe após definí-la. Em javaScript, no entanto, você pode adicionar ou remover propriedades de qualquer objeto. Se você adiciona uma propriedade a um objeto que é usado como o protótipo para um conjunto de objetos, os objetos no qual ele é protótipo herdarão as novas propriedades.

- -

Sumário das diferenças

- -

A tabela a seguir apresenta um breve resumo de algumas dessas diferenças. O restante deste capítulo descreve os detalhes do uso de construtores e protótipos JavaScript para criar uma hierarquia de objetos e compara isso à maneira como você faria em Java.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Comparação de objetos do sistema baseados em classes (Java) e baseado em protótipo (JavaScript)
Baseados em classes (Java)Baseados em protótipos (JavaScript)
Classes e instancias são entidades distintas.Todos os objetos são instancias.
Define uma classe com uma definição de classe; cria um objeto - como instância da classe - com o método constructor.Define e cria um conjunto de objetos com funções construtoras.
Cria um único objeto com o operador new.Faz o mesmo.
Constroi uma hierarquia de objetos usando definição de classe para definir subclasses de classes existentes.Constrói uma hierarquia de objetos, atribuindo um objeto como o protótipo associado com uma função de construtor.
Herda propriedade seguindo a cadeia de classe.Herda propriedade seguindo a cadeia de protótipo.
Definição de classe especifica todas as propriedades de todas as instâncias de uma classe. Não é possível adicionar propriedades dinamicamente em tempo de execução.Função construtor ou protótipo especifica um conjunto inicial de propriedades. Pode adicionar ou remover propriedades de forma dinâmica para objetos individuais ou para todo o conjunto de objetos.
- -

O exemplo employee

- -

O restante deste capítulo usa a hierarquia employee como mostrado na figura abaixo. 

- -
-

Uma simples hierarquia de objetos:

- -

- -
    -
  • Employee tem a propriedade name (cujo valor padrão é uma string vazia) e dept (cujo valor padrão  e o "general").
    • -
  • Manager é baseado no Employee. É adicionada a propriedade reports (cujo valor padrão é um array vazio, planejado para ter um array do objeto Employee como valor).
    • -
  • WorkerBee também é baseado no  Employee. É adicionada  a propriedade projects (cujo valor padrão é um array vazio, pretende-se ter um array de strings como valor).
    • -
  • SalesPerson é baseado no WorkerBee. É adicionada a propriedade quota (cujo valor padrão é 100). E também controla a propriedade dept  com o valor "sales", indicando que todos os salespersons são o mesmo departamento.
    • -
  • Engineer é baseado no WorkerBee. É adicionada a propriedade machine (cujo valor padrão é uma string vazia) e também controla a propriedade dept com o valor "engineering".
    • -
-
- -

Criando a hierarquia

- -

Há muitas formas de definir funções construtoras apropriadas para implementar a hierarquia Employee. Como escolher defini-las depende amplamente do que você quer ser capaz de fazer em sua aplicação.

- -

Esta seção mostra definições simples de como trabalhar com heranças. Nestas definições, você não pode especificar nenhum valor de propriedade quando criar um objeto. O recém-criado objeto terá os valores padrão, que você poderá alterar mais tarde.

- -

Na aplicação real, você poderia definir construtores que permitem que você forneça valores de propriedade no momento da criação do objeto (veja Construtores flexíveis para saber mais). Por enquanto, estas simples definições demonstram como a herança ocorre.

- -

As seguintes definições Java e JavaScript Employee são similares. A única diferença é que você precisa especificar o tipo de cada propriedade em Java, mas não em JavaScript (devido ao Java ser uma linguagem fortemente tipada enquanto o JavaScript é linguagem fracamente tipada).

- -
-

JavaScript

- -
function Employee() {
-  this.name = "";
-  this.dept = "general";
-}
-
- -

Java

- -
public class Employee {
-   public String name = "";
-   public String dept = "general";
-}
-
-
- -

As definições Manager e WorkerBee mostram a diferença na forma de especificar o próximo objeto mais alto na cadeia de herança. Em JavaScript, você adiciona uma instância prototípica como o valor da propriedade prototype da função construtora. Você pode fazer isso a qualquer momento depois de definir o construtor. Em Java, você especifica a superclasse dentro da classe definida. Você não pode alterar a superclasse fora da classe definida.

- -
-

JavaScript

- -
function Manager() {
-  Employee.call(this);
-  this.reports = [];
-}
-Manager.prototype = Object.create(Employee.prototype);
-
-function WorkerBee() {
-  Employee.call(this);
-  this.projects = [];
-}
-WorkerBee.prototype = Object.create(Employee.prototype);
-
- -

Java

- -
public class Manager extends Employee {
-   public Employee[] reports = new Employee[0];
-}
-
-
-
-public class WorkerBee extends Employee {
-   public String[] projects = new String[0];
-}
-
-
-
-
- -

As definições Engineer e SalesPerson criam objetos que descendem de WorkerBee e consequentemente de Employee. Objetos destes tipos tem propriedades de todos os objetos acima de sua cadeia. Em adição, estas definições substituem o valor herdado da propriedade dept com novos valores específicos para esses objetos.

- -
-

JavaScript

- -
function SalesPerson() {
-   WorkerBee.call(this);
-   this.dept = "sales";
-   this.quota = 100;
-}
-SalesPerson.prototype = Object.create(WorkerBee.prototype);
-
-function Engineer() {
-   WorkerBee.call(this);
-   this.dept = "engineering";
-   this.machine = "";
-}
-Engineer.prototype = Object.create(WorkerBee.prototype);
-
- -

Java

- -
public class SalesPerson extends WorkerBee {
-   public double quota;
-   public dept = "sales";
-   public quota = 100.0;
-}
-
-
-public class Engineer extends WorkerBee {
-   public String machine;
-   public dept = "engineering";
-   public machine = "";
-}
-
-
-
- -

Usando estas definições, você pode criar instâncias desses objetos que obterão valores padrão para suas propriedades. A próxima imagem mostra o uso destas definições JavaScript para criar novos objetos e mostrar os valores das propriedades dos novos objetos. 

- -
-

Note: O termo instancia   tem significado específicamente técnico em linguagens baseadas em classe. Nessas linguagens, uma instância é uma instanciação individual de uma classe e é fundamentalmente diferente de uma classe. Em JavaScript, "instância" não tem esse significado técnico porque JavaScript não tem essa diferença entre classes e instâncias. No entanto, falando sobre JavaScript, "instância" pode ser usada informalmente para significar um objeto criado usando uma função construtora particular. Então, neste exemplo, você pode informalmente dizer que jane é uma instância de Engineer. Similarmente, embora os termos parent, child, ancestor, e descendant não tenham significados formais em JavaScript; você pode usá-los informalmente para referir a objetos altos ou baixos na cadeia de protótipos.

-
- -

Criando objetos com definições simples

- -
-

Hierarquia do Objeto

- -

A hierarquia abaixo foi criada utilizando o código ao lado.

- -

- -

Objetos individuais = Jim, Sally, Mark, Fred, Jane, etc. "Instancias" criadas a partir do construtor.

- -
var jim = new Employee;
-// jim.name is ''
-// jim.dept is 'general'
-
-var sally = new Manager;
-// sally.name is ''
-// sally.dept is 'general'
-// sally.reports is []
-
-var mark = new WorkerBee;
-// mark.name is ''
-// mark.dept is 'general'
-// mark.projects is []
-
-var fred = new SalesPerson;
-// fred.name is ''
-// fred.dept is 'sales'
-// fred.projects is []
-// fred.quota is 100
-
-var jane = new Engineer;
-// jane.name is ''
-// jane.dept is 'engineering'
-// jane.projects is []
-// jane.machine is ''
-
-
- -

Propriedades do Objeto

- -

Esta seção discute como objetos herdam propriedades de outros objetos na cadeia de protótipos e o que acontece quando você adiciona uma propriedade em tempo de execução.

- -

Herdando Propriedades

- -

Suponha que você criou o objeto mark como um WorkerBee com a seguinte declaração:

- -
var mark = new WorkerBee;
-
- -

Quando o JavaScript vê o operador new, ele cria um novo objeto genérico e implicitamente define o valor da propriedade interna [[Protótipo]] para o valor de WorkerBee.prototype passando este novo objeto como o valor da palavra-chave this para a função construtora de WorkerBee. A propriedade interna [[__proto__]] determina a cadeia de protótipos usada para retornar os valores das propriedades. Uma vez que essas propriedades são definidas, o JavaScript retorna o novo objeto e a declaração de atribuição define a variável mark para este objeto.

- -

Este processo não põe explicitamente valores no objeto mark (valores locais) para as propriedades que mark herdou da cadeia de protótipo. Quando você solicita o valor de uma propriedade, o JavaScript primeiro verifica se o valor existe nesse objeto. Caso exista, esse valor é retornado. Se o valor não existe localmente, JavaScript verifica a cadeia de protótipos (usando a propriedade  interna __proto__). Se um objeto na cadeia de protótipos possui um valor para a propriedade, este valor é retornado. Se nenhuma propriedade é encontrada, o Javascript avisa que o objeto não possui a propriedade. Deste modo, o objeto mark possui as seguintes propriedades e valores: 

- -
mark.name = "";
-mark.dept = "general";
-mark.projects = [];
-
- -

The mark object inherits values for the name and dept properties from the prototypical object in mark.__proto__. It is assigned a local value for the projects property by the WorkerBee constructor. This gives you inheritance of properties and their values in JavaScript. Some subtleties of this process are discussed in Property inheritance revisited.

- -

Because these constructors do not let you supply instance-specific values, this information is generic. The property values are the default ones shared by all new objects created from WorkerBee. You can, of course, change the values of any of these properties. So, you could give specific information for mark as follows:

- -
mark.name = "Doe, Mark";
-mark.dept = "admin";
-mark.projects = ["navigator"];
- -

Adding properties

- -

In JavaScript, you can add properties to any object at run time. You are not constrained to use only the properties provided by the constructor function. To add a property that is specific to a single object, you assign a value to the object, as follows:

- -
mark.bonus = 3000;
-
- -

Now, the mark object has a bonus property, but no other WorkerBee has this property.

- -

If you add a new property to an object that is being used as the prototype for a constructor function, you add that property to all objects that inherit properties from the prototype. For example, you can add a specialty property to all employees with the following statement:

- -
Employee.prototype.specialty = "none";
-
- -

As soon as JavaScript executes this statement, the mark object also has the specialty property with the value of "none". The following figure shows the effect of adding this property to the Employee prototype and then overriding it for the Engineer prototype.

- -


- Adding properties

- -

More flexible constructors

- -

The constructor functions shown so far do not let you specify property values when you create an instance. As with Java, you can provide arguments to constructors to initialize property values for instances. The following figure shows one way to do this.

- -


- Specifying properties in a constructor, take 1

- -

The following table shows the Java and JavaScript definitions for these objects.

- -
-

JavaScript

- -

Java

-
- -
-
function Employee (name, dept) {
-  this.name = name || "";
-  this.dept = dept || "general";
-}
-
- -
public class Employee {
-   public String name;
-   public String dept;
-   public Employee () {
-      this("", "general");
-   }
-   public Employee (String name) {
-      this(name, "general");
-   }
-   public Employee (String name, String dept) {
-      this.name = name;
-      this.dept = dept;
-   }
-}
-
-
- -
-
function WorkerBee (projs) {
-
- this.projects = projs || [];
-}
-WorkerBee.prototype = new Employee;
-
- -
public class WorkerBee extends Employee {
-   public String[] projects;
-   public WorkerBee () {
-      this(new String[0]);
-   }
-   public WorkerBee (String[] projs) {
-      projects = projs;
-   }
-}
-
-
- -
-
-function Engineer (mach) {
-   this.dept = "engineering";
-   this.machine = mach || "";
-}
-Engineer.prototype = new WorkerBee;
-
- -
public class Engineer extends WorkerBee {
-   public String machine;
-   public Engineer () {
-      dept = "engineering";
-      machine = "";
-   }
-   public Engineer (String mach) {
-      dept = "engineering";
-      machine = mach;
-   }
-}
-
-
- -

These JavaScript definitions use a special idiom for setting default values:

- -
this.name = name || "";
-
- -

The JavaScript logical OR operator (||) evaluates its first argument. If that argument converts to true, the operator returns it. Otherwise, the operator returns the value of the second argument. Therefore, this line of code tests to see if name has a useful value for the name property. If it does, it sets this.name to that value. Otherwise, it sets this.name to the empty string. This chapter uses this idiom for brevity; however, it can be puzzling at first glance.

- -
-

Note: This may not work as expected if the constructor function is called with arguments which convert to false (like 0 (zero) and empty string (""). In this case the default value will be chosen.

-
- -

With these definitions, when you create an instance of an object, you can specify values for the locally defined properties. You can use the following statement to create a new Engineer:

- -
var jane = new Engineer("belau");
-
- -

Jane's properties are now:

- -
jane.name == "";
-jane.dept == "engineering";
-jane.projects == [];
-jane.machine == "belau"
-
- -

Notice that with these definitions, you cannot specify an initial value for an inherited property such as name. If you want to specify an initial value for inherited properties in JavaScript, you need to add more code to the constructor function.

- -

So far, the constructor function has created a generic object and then specified local properties and values for the new object. You can have the constructor add more properties by directly calling the constructor function for an object higher in the prototype chain. The following figure shows these new definitions.

- -


- Specifying properties in a constructor, take 2

- -

Let's look at one of these definitions in detail. Here's the new definition for the Engineer constructor:

- -
function Engineer (name, projs, mach) {
-  this.base = WorkerBee;
-  this.base(name, "engineering", projs);
-  this.machine = mach || "";
-}
-
- -

Suppose you create a new Engineer object as follows:

- -
var jane = new Engineer("Doe, Jane", ["navigator", "javascript"], "belau");
-
- -

JavaScript follows these steps:

- -
    -
  1. The new operator creates a generic object and sets its __proto__ property to Engineer.prototype.
    2. -
  2. The new operator passes the new object to the Engineer constructor as the value of the this keyword.
    3. -
  3. The constructor creates a new property called base for that object and assigns the value of the WorkerBee constructor to the base property. This makes the WorkerBee constructor a method of the Engineer object.The name of the base property is not special. You can use any legal property name; base is simply evocative of its purpose.
    4. -
  4. -

    The constructor calls the base method, passing as its arguments two of the arguments passed to the constructor ("Doe, Jane" and ["navigator", "javascript"]) and also the string "engineering". Explicitly using "engineering" in the constructor indicates that all Engineer objects have the same value for the inherited dept property, and this value overrides the value inherited from Employee.

    -
    5. -
  5. Because base is a method of Engineer, within the call to base, JavaScript binds the this keyword to the object created in Step 1. Thus, the WorkerBee function in turn passes the "Doe, Jane" and "engineering" arguments to the Employee constructor function. Upon return from the Employee constructor function, the WorkerBee function uses the remaining argument to set the projects property.
    6. -
  6. Upon return from the base method, the Engineer constructor initializes the object's machine property to "belau".
    7. -
  7. Upon return from the constructor, JavaScript assigns the new object to the jane variable.
    8. -
- -

You might think that, having called the WorkerBee constructor from inside the Engineer constructor, you have set up inheritance appropriately for Engineer objects. This is not the case. Calling the WorkerBee constructor ensures that an Engineer object starts out with the properties specified in all constructor functions that are called. However, if you later add properties to the Employee or WorkerBee prototypes, those properties are not inherited by the Engineer object. For example, assume you have the following statements:

- -
function Engineer (name, projs, mach) {
-  this.base = WorkerBee;
-  this.base(name, "engineering", projs);
-  this.machine = mach || "";
-}
-var jane = new Engineer("Doe, Jane", ["navigator", "javascript"], "belau");
-Employee.prototype.specialty = "none";
-
- -

The jane object does not inherit the specialty property. You still need to explicitly set up the prototype to ensure dynamic inheritance. Assume instead you have these statements:

- -
function Engineer (name, projs, mach) {
-  this.base = WorkerBee;
-  this.base(name, "engineering", projs);
-  this.machine = mach || "";
-}
-Engineer.prototype = new WorkerBee;
-var jane = new Engineer("Doe, Jane", ["navigator", "javascript"], "belau");
-Employee.prototype.specialty = "none";
-
- -

Now the value of the jane object's specialty property is "none".

- -

Another way of inheriting is by using the call() / apply() methods. Below are equivalent:

- -
-
function Engineer (name, projs, mach) {
-  this.base = WorkerBee;
-  this.base(name, "engineering", projs);
-  this.machine = mach || "";
-}
-
- -
function Engineer (name, projs, mach) {
-  WorkerBee.call(this, name, "engineering", projs);
-  this.machine = mach || "";
-}
-
-
- -

Using the javascript call() method makes a cleaner implementation because the base is not needed anymore.

- -

Property inheritance revisited

- -

The preceding sections described how JavaScript constructors and prototypes provide hierarchies and inheritance. This section discusses some subtleties that were not necessarily apparent in the earlier discussions.

- -

Local versus inherited values

- -

When you access an object property, JavaScript performs these steps, as described earlier in this chapter:

- -
    -
  1. Check to see if the value exists locally. If it does, return that value.
    2. -
  2. If there is not a local value, check the prototype chain (using the __proto__ property).
    3. -
  3. If an object in the prototype chain has a value for the specified property, return that value.
    4. -
  4. If no such property is found, the object does not have the property.
    5. -
- -

The outcome of these steps depends on how you define things along the way. The original example had these definitions:

- -
function Employee () {
-  this.name = "";
-  this.dept = "general";
-}
-
-function WorkerBee () {
-  this.projects = [];
-}
-WorkerBee.prototype = new Employee;
-
- -

With these definitions, suppose you create amy as an instance of WorkerBee with the following statement:

- -
var amy = new WorkerBee;
-
- -

The amy object has one local property, projects. The values for the name and dept properties are not local to amy and so are gotten from the amy object's __proto__ property. Thus, amy has these property values:

- -
amy.name == "";
-amy.dept == "general";
-amy.projects == [];
-
- -

Now suppose you change the value of the name property in the prototype associated with Employee:

- -
Employee.prototype.name = "Unknown"
-
- -

At first glance, you might expect that new value to propagate down to all the instances of Employee. However, it does not.

- -

When you create any instance of the Employee object, that instance gets a local value for the name property (the empty string). This means that when you set the WorkerBee prototype by creating a new Employee object, WorkerBee.prototype has a local value for the name property. Therefore, when JavaScript looks up the name property of the amy object (an instance of WorkerBee), JavaScript finds the local value for that property in WorkerBee.prototype. It therefore does not look farther up the chain to Employee.prototype.

- -

If you want to change the value of an object property at run time and have the new value be inherited by all descendants of the object, you cannot define the property in the object's constructor function. Instead, you add it to the constructor's associated prototype. For example, assume you change the preceding code to the following:

- -
function Employee () {
-  this.dept = "general";
-}
-Employee.prototype.name = "";
-
-function WorkerBee () {
-  this.projects = [];
-}
-WorkerBee.prototype = new Employee;
-
-var amy = new WorkerBee;
-
-Employee.prototype.name = "Unknown";
-
- -

In this case, the name property of amy becomes "Unknown".

- -

As these examples show, if you want to have default values for object properties and you want to be able to change the default values at run time, you should set the properties in the constructor's prototype, not in the constructor function itself.

- -

Determining instance relationships

- -

Property lookup in JavaScript looks within an object's own properties and, if the property name is not found, it looks within the special object property __proto__. This continues recursively; the process is called "lookup in the prototype chain".

- -

The special property __proto__ is set when an object is constructed; it is set to the value of the constructor's prototype property. So the expression new Foo() creates an object with __proto__ == Foo.prototype. Consequently, changes to the properties of Foo.prototype alters the property lookup for all objects that were created by new Foo().

- -

Every object has a __proto__ object property (except Object); every function has a prototype object property. So objects can be related by 'prototype inheritance' to other objects. You can test for inheritance by comparing an object's __proto__ to a function's prototype object. JavaScript provides a shortcut: the instanceof operator tests an object against a function and returns true if the object inherits from the function prototype. For example,

- -
var f = new Foo();
-var isTrue = (f instanceof Foo);
- -

For a more detailed example, suppose you have the same set of definitions shown in Inheriting properties. Create an Engineer object as follows:

- -
var chris = new Engineer("Pigman, Chris", ["jsd"], "fiji");
-
- -

With this object, the following statements are all true:

- -
chris.__proto__ == Engineer.prototype;
-chris.__proto__.__proto__ == WorkerBee.prototype;
-chris.__proto__.__proto__.__proto__ == Employee.prototype;
-chris.__proto__.__proto__.__proto__.__proto__ == Object.prototype;
-chris.__proto__.__proto__.__proto__.__proto__.__proto__ == null;
-
- -

Given this, you could write an instanceOf function as follows:

- -
function instanceOf(object, constructor) {
-   object = object.__proto__;
-   while (object != null) {
-      if (object == constructor.prototype)
-         return true;
-      if (typeof object == 'xml') {
-        return constructor.prototype == XML.prototype;
-      }
-      object = object.__proto__;
-   }
-   return false;
-}
-
- -
Note: The implementation above checks the type of the object against "xml" in order to work around a quirk of how XML objects are represented in recent versions of JavaScript. See {{ bug(634150) }} if you want the nitty-gritty details.
- -

Using the instanceOf function defined above, these expressions are true:

- -
instanceOf (chris, Engineer)
-instanceOf (chris, WorkerBee)
-instanceOf (chris, Employee)
-instanceOf (chris, Object)
-
- -

But the following expression is false:

- -
instanceOf (chris, SalesPerson)
-
- -

Global information in constructors

- -

When you create constructors, you need to be careful if you set global information in the constructor. For example, assume that you want a unique ID to be automatically assigned to each new employee. You could use the following definition for Employee:

- -
var idCounter = 1;
-
-function Employee (name, dept) {
-   this.name = name || "";
-   this.dept = dept || "general";
-   this.id = idCounter++;
-}
-
- -

With this definition, when you create a new Employee, the constructor assigns it the next ID in sequence and then increments the global ID counter. So, if your next statement is the following, victoria.id is 1 and harry.id is 2:

- -
var victoria = new Employee("Pigbert, Victoria", "pubs")
-var harry = new Employee("Tschopik, Harry", "sales")
-
- -

At first glance that seems fine. However, idCounter gets incremented every time an Employee object is created, for whatever purpose. If you create the entire Employee hierarchy shown in this chapter, the Employee constructor is called every time you set up a prototype. Suppose you have the following code:

- -
var idCounter = 1;
-
-function Employee (name, dept) {
-   this.name = name || "";
-   this.dept = dept || "general";
-   this.id = idCounter++;
-}
-
-function Manager (name, dept, reports) {...}
-Manager.prototype = new Employee;
-
-function WorkerBee (name, dept, projs) {...}
-WorkerBee.prototype = new Employee;
-
-function Engineer (name, projs, mach) {...}
-Engineer.prototype = new WorkerBee;
-
-function SalesPerson (name, projs, quota) {...}
-SalesPerson.prototype = new WorkerBee;
-
-var mac = new Engineer("Wood, Mac");
-
- -

Further assume that the definitions omitted here have the base property and call the constructor above them in the prototype chain. In this case, by the time the mac object is created, mac.id is 5.

- -

Depending on the application, it may or may not matter that the counter has been incremented these extra times. If you care about the exact value of this counter, one possible solution involves instead using the following constructor:

- -
function Employee (name, dept) {
-   this.name = name || "";
-   this.dept = dept || "general";
-   if (name)
-      this.id = idCounter++;
-}
-
- -

When you create an instance of Employee to use as a prototype, you do not supply arguments to the constructor. Using this definition of the constructor, when you do not supply arguments, the constructor does not assign a value to the id and does not update the counter. Therefore, for an Employee to get an assigned id, you must specify a name for the employee. In this example, mac.id would be 1.

- -

No multiple inheritance

- -

Some object-oriented languages allow multiple inheritance. That is, an object can inherit the properties and values from unrelated parent objects. JavaScript does not support multiple inheritance.

- -

Inheritance of property values occurs at run time by JavaScript searching the prototype chain of an object to find a value. Because an object has a single associated prototype, JavaScript cannot dynamically inherit from more than one prototype chain.

- -

In JavaScript, you can have a constructor function call more than one other constructor function within it. This gives the illusion of multiple inheritance. For example, consider the following statements:

- -
function Hobbyist (hobby) {
-   this.hobby = hobby || "scuba";
-}
-
-function Engineer (name, projs, mach, hobby) {
-   this.base1 = WorkerBee;
-   this.base1(name, "engineering", projs);
-   this.base2 = Hobbyist;
-   this.base2(hobby);
-   this.machine = mach || "";
-}
-Engineer.prototype = new WorkerBee;
-
-var dennis = new Engineer("Doe, Dennis", ["collabra"], "hugo")
-
- -

Further assume that the definition of WorkerBee is as used earlier in this chapter. In this case, the dennis object has these properties:

- -
dennis.name == "Doe, Dennis"
-dennis.dept == "engineering"
-dennis.projects == ["collabra"]
-dennis.machine == "hugo"
-dennis.hobby == "scuba"
-
- -

So dennis does get the hobby property from the Hobbyist constructor. However, assume you then add a property to the Hobbyist constructor's prototype:

- -
Hobbyist.prototype.equipment = ["mask", "fins", "regulator", "bcd"]
-
- -

The dennis object does not inherit this new property.

- -
{{PreviousNext("Web/JavaScript/Guide/Working_with_Objects", "Web/JavaScript/Guide/Iterators_and_Generators")}}
diff --git a/files/pt-br/web/javascript/guide/formatando_texto/index.html b/files/pt-br/web/javascript/guide/formatando_texto/index.html deleted file mode 100644 index 1b4bb50772..0000000000 --- a/files/pt-br/web/javascript/guide/formatando_texto/index.html +++ /dev/null @@ -1,250 +0,0 @@ ---- -title: Formatando texto -slug: Web/JavaScript/Guide/Formatando_texto -tags: - - Guía - - JavaScript -translation_of: Web/JavaScript/Guide/Text_formatting ---- -
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Numbers_and_dates", "Web/JavaScript/Guide/Regular_Expressions")}}
- -

Esse capítulo introduz como trabalhar com strings e texto em JavaScript.

- -

Strings

- -

O tipo {{Glossary("String")}} do JavaScript é usado para representar informações de texto. É um conjunto de "elementos" composto por valores inteiros de 16-bits sem sinal. Cada elemento dentro da String ocupa uma posição dentro dessa String. O primeiro elemento está no índice 0, o próximo no índice 1, e assim sucessivamente. O tamanho de uma String é a quantidade de elementos que ela possui. Você pode criar strings usando strings literais ou objetos string.

- -

Strings literais

- -

Você pode criar strings usando aspas simples ou aspas duplas:

- -
'foo'
-"bar"
- -

Strings mais avançadas podem ser criadas usando sequências de escape:

- -

Sequências de escape hexadecimais

- -

O número depois de \x é interpretado como um número hexadecimal.

- -
'\xA9' // "©"
-
- -

Sequências de escape unicode

- -

As sequências de escape unicode requerem no mínimo quatro caracteres depois do \u.

- -
'\u00A9' // "©"
- -

Sequências de escape Unicode code point

- -

É novo no ECMAScript 6. Com essas sequências, cada caractere pode ser "escapado" usando números hexadecimais, sendo possível usar pontos de código Unicode de até 0x10FFFF. Com escapes Unicode simples muitas vezes é necessário escrever as metades substitutas separadamente para obter o mesmo resultado.

- -

Veja também {{jsxref("String.fromCodePoint()")}} or {{jsxref("String.prototype.codePointAt()")}}.

- -
'\u{2F804}'
-
-// o mesmo com escapes Unicode simples
-'\uD87E\uDC04'
- -

Objetos String

- -

O objeto {{jsxref("String")}} é como uma "capa" ao redor do tipo primitivo string.

- -
var s = new String("foo"); // Cria um objeto String
-console.log(s); // Exibe no console: { '0': 'f', '1': 'o', '2': 'o'}
-typeof s; // Retorna 'object'
-
- -

Você pode chamar qualquer um dos métodos do objeto String em cima de uma string literal — JavaScript automaticamente converte a string literal em um objeto String temporário, chama o método, e então descarta o objeto String temporário. Você pode também usar a propriedade String.length com uma string literal.

- -

Você deve usar strings literais a menos que você realmente precise usar um objeto String, pois objetos String podem ter comportamentos inesperados. Por exemplo:

- -
var s1 = "2 + 2"; // Cria uma string literal
-var s2 = new String("2 + 2"); // Creates um objeto String
-eval(s1); // Retorna o número 4
-eval(s2); // Retorna a string "2 + 2"
- -

Um objeto String possui uma propriedade, length, que indica o número de caracteres na string. Por exemplo, o código a seguir atribui o valor 11 à variável x, pois "Olá, mundo!" possui 11 caracteres:

- -
var minhaString = "Olá, mundo!";
-var x = minhaString.length;
-
- -

Um objeto String possui uma variedade de métodos: por exemplo aqueles que retornam uma variação da própria string, como substring e toUpperCase.

- -

A tabela a seguir lista os métodos de objetos {{jsxref("String")}}.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

Métodos de String

-
MétodoDescrição
{{jsxref("String.charAt", "charAt")}}, {{jsxref("String.charCodeAt", "charCodeAt")}}, {{jsxref("String.codePointAt", "codePointAt")}}Retorna o código do caractere ou o caractere em uma posição específica na string.
{{jsxref("String.indexOf", "indexOf")}}, {{jsxref("String.lastIndexOf", "lastIndexOf")}}Retorna a posição de uma substring específica na string ou a última posição da substring específica, respectivamente.
{{jsxref("String.startsWith", "startsWith")}}, {{jsxref("String.endsWith", "endsWith")}}, {{jsxref("String.includes", "includes")}}Retorna se uma string começa, termina ou contém uma outra string específica.
{{jsxref("String.concat", "concat")}}Concatena o texto de duas strings e retorna uma nova string.
{{jsxref("String.fromCharCode", "fromCharCode")}}, {{jsxref("String.fromCodePoint", "fromCodePoint")}}Cria uma string a partir de uma sequência específica de valores Unicode. Esse é um método da classe String, não de uma instância do tipo String.
{{jsxref("String.split", "split")}}Separa um objeto String em um array de strings, separando a string em substrings.
{{jsxref("String.slice", "slice")}}Extrai uma seção de uma string e retorna uma nova string.
{{jsxref("String.substring", "substring")}}, {{jsxref("String.substr", "substr")}}Retorna um subconjunto específico de uma string, definindo os índices inicial e final, ou definindo um índice e um tamanho.
{{jsxref("String.match", "match")}}, {{jsxref("String.replace", "replace")}}, {{jsxref("String.search", "search")}}Trabalha com expressões regulares.
{{jsxref("String.toLowerCase", "toLowerCase")}}, {{jsxref("String.toUpperCase", "toUpperCase")}} -

Retorna a string com todos caracteres em minúsculo, ou maiúsculo, respectivamente.

-
{{jsxref("String.normalize", "normalize")}}Retorna a Forma Normalizada Unicode (Unicode Normalization Form) da string que chama o método.
{{jsxref("String.repeat", "repeat")}}Retorna uma string contendo os elementos do objeto repetidos pela quantidade de vezes dada.
{{jsxref("String.trim", "trim")}}Retira espaços em branco no começo e no final da string.
- -

Template strings com várias linhas

- -

Template strings são strings literais que permitem expressões no seu conteúdo. Você pode usar os recursos de strings com multiplas linhas e interpolações de string com as template strings.

- -

Template strings são declaradas com o acento grave (``) ao invés de aspas simples ou aspas duplas. Essas strings podem conter place holders. Os place holders são indicados pelo cifrão e com chaves ( ${expressao} ).

- -

Várias linhas (Multi-lines)

- -

Qualquer caractere de nova linha ( '\n' ) inserido na string também faz parte das template string. Usando strings normais, você teria que usar a sintaxe a seguir para conseguir uma string de várias linhas

- -
console.log("linha de texto 1\n\
-linha de texto 2");
-// "linha de texto 1
-// linha de texto 2"
- -

Para obter o mesmo efeito com strings multi-lines, você pode agora escrever:

- -
console.log(`linha de texto 1
-linha de texto 2`);
-// "linha de texto 1
-// linha de texto 2"
- -

Expressões inseridas

- -

Para conseguir inserir expressões com strings normais, você teria que usar a seguinte sintaxe:

- -
var a = 5;
-var b = 10;
-console.log("Quinze é " + (a + b) + " e\nnão " + (2 * a + b) + ".");
-// "Quinze é 15 e
-// não 20."
- -

Agora, com template strings, você tem a capacidade de usar uma forma mais simples e legível para fazer essas substituições:

- -
var a = 5;
-var b = 10;
-console.log(`Quinze é ${a + b} e\nnão ${2 * a + b}.`);
-// "Quinze é 15 e
-// não 20."
- -

Para mais informações, leia sobre Template strings na referência JavaScript.

- -

Internacionalização

- -

O objeto {{jsxref("Intl")}} é o namespace para a API de Internacionalização do ECMAScript, que oferece comparação de strings sensíveis à linguagem, formatação de números, e formatação de datas e horas. Os construtores para os objetos {{jsxref("Collator")}}, {{jsxref("NumberFormat")}}, e {{jsxref("DateTimeFormat")}} são propriedades do objeto Intl.

- -

Formatação de data e hora

- -

O objeto {{jsxref("DateTimeFormat")}} é útil para a formatação de data e hora. O código a seguir formata uma data em inglês no formato que é utilizado nos Estados Unidos. (O resultado é diferente em outro fuso horário).

- -
var msPorDia = 24 * 60 * 60 * 1000; // número de milisegundos em um dia
-
-// July 17, 2014 00:00:00 UTC.
-var july172014 = new Date(msPorDia * (44 * 365 + 11 + 197));
-
-var opcoes = { year: "2-digit", month: "2-digit", day: "2-digit",
-                hour: "2-digit", minute: "2-digit", timeZoneName: "short" };
-var americanDateTime = new Intl.DateTimeFormat("en-US", opcoes).format;
-
-console.log(americanDateTime(july172014)); // 07/16/14, 5:00 PM PDT
-
- -

Formatação de números

- -

O objeto {{jsxref("NumberFormat")}} é útil para formatar números, por exemplo unidade monetária.

- -
var precoGasolina = new Intl.NumberFormat("en-US",
-                        { style: "currency", currency: "USD",
-                          minimumFractionDigits: 3 });
-
-console.log(precoGasolina.format(5.259)); // $5.259
-
-var hanDecimalRMBInChina = new Intl.NumberFormat("zh-CN-u-nu-hanidec",
-                        { style: "currency", currency: "CNY" });
-
-console.log(hanDecimalRMBInChina.format(1314.25)); // ￥ 一,三一四.二五
-
- -

Collation

- -

O objeto {{jsxref("Collator")}} é usado para comparar e ordenar strings.

- -

Por exemplo, existem atualmente duas ordens diferentes de classificação no Alemão: listaTelefônica e dicionário. A ordenação da listaTelefônica enfatiza o som, e é como se "ä", "ö", e assim por diante, fossem expandidos para "ae", "oe", e assim sucessivamente, para definir a ordem.

- -
var nomes = ["Hochberg", "Hönigswald", "Holzman"];
-
-var phonebookAlemao = new Intl.Collator("de-DE-u-co-phonebk");
-
-// como se ordenasse ["Hochberg", "Hoenigswald", "Holzman"]:
-console.log(names.sort(phonebookAlemao.compare).join(", "));
-// imprime "Hochberg, Hönigswald, Holzman"
-
- -

Algumas palavras do alemão são conjugadas com tremas extras, mas no dicionário essas palavras são ordenadas ignorando os tremas (exceto quando ordenando palavras que tem apenas o trema como diferença: schon antes de schön).

- -
var dicionarioAlemao = new Intl.Collator("de-DE-u-co-dict");
-
-// como se ordenasse ["Hochberg", "Honigswald", "Holzman"]:
-console.log(names.sort(dicionarioAlemao.compare).join(", "));
-// imprime "Hochberg, Holzman, Hönigswald"
-
- -

Para mais informação sobre a API {{jsxref("Intl")}}, veja também Introducing the JavaScript Internationalization API (em inglês).

- -
{{PreviousNext("Web/JavaScript/Guide/Numbers_and_dates", "Web/JavaScript/Guide/Regular_Expressions")}}
diff --git a/files/pt-br/web/javascript/guide/functions/index.html b/files/pt-br/web/javascript/guide/functions/index.html new file mode 100644 index 0000000000..7077d1787b --- /dev/null +++ b/files/pt-br/web/javascript/guide/functions/index.html @@ -0,0 +1,640 @@ +--- +title: Funções +slug: Web/JavaScript/Guide/Funções +tags: + - Funções JavaScript + - Guia(2) + - Iniciante + - JavaScript +translation_of: Web/JavaScript/Guide/Functions +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Loops_and_iteration", "Web/JavaScript/Guide/Expressions_and_Operators")}}
+ +

Funções são blocos de construção fundamentais em JavaScript. Uma função é um procedimento de JavaScript - um conjunto de instruções que executa uma tarefa ou calcula um valor. Para usar uma função, você deve defini-la em algum lugar no escopo do qual você quiser chamá-la.

+ +

Veja também o capítulo de referência sobre funções JavaScript para conhecer os detalhes.

+ +

Definindo Funções

+ +

Declarando uma função

+ +

A definição da função (também chamada de declaração de função) consiste no uso da palavra chave function, seguida por:

+ +
    +
  • Nome da Função.
    • +
  • Lista de argumentos para a função, entre parênteses e separados por vírgulas.
    • +
  • Declarações JavaScript que definem a função, entre chaves { }.
    • +
+ +

Por exemplo, o código a seguir define uma função simples chamada square:

+ +
function square(numero) {
+  return numero * numero;
+}
+
+ +

A função square recebe um argumento chamado numero. A função consiste em uma instrução que indica para retornar o argumento da função (isto é, numero) multiplicado por si mesmo. A declaração return especifica o valor retornado pela função.

+ +
return numero * numero;
+
+ +

Parâmetros primitivos (como um número) são passados para as funções por valor; o valor é passado para a função, mas se a função altera o valor do parâmetro, esta mudança não reflete globalmente ou na função chamada.

+ +

Se você passar um objeto (ou seja, um  valor não primitivo, tal como {{jsxref("Array")}} ou um objeto definido por você) como um parâmetro e a função alterar as propriedades do objeto, essa mudança é visível fora da função, conforme mostrado no exemplo a seguir:

+ +
function minhaFuncao(objeto) {
+  objeto.make = "Toyota";
+}
+
+var meucarro = {make: "Honda", model: "Accord", year: 1998};
+var x, y;
+
+x = meucarro.make;     // x recebe o valor "Honda"
+
+minhaFuncao(meucarro);
+y = meucarro.make;     // y recebe o valor "Toyota"
+                    // (a propriedade make foi alterada pela função)
+
+ +

Expressão de função

+ +

Embora a declaração de função acima seja sintaticamente uma declaração, funções também podem ser criadas por uma expressão de função. Tal função pode ser anônima; ele não tem que ter um nome. Por exemplo, a função square poderia ter sido definida como:

+ +
var square = function(numero) {return numero * numero};
+var x = square(4) //x recebe o valor 16
+ +

No entanto, um nome pode ser fornecido com uma expressão de função e pode ser utilizado no interior da função para se referir a si mesma, ou em um debugger para identificar a função em stack traces:

+ +
var fatorial = function fac(n) {return n<2 ? 1 : n*fac(n-1)};
+
+console.log(fatorial(3));
+
+ +

As expressões de função são convenientes ao passar uma função como um argumento para outra função. O exemplo a seguir mostra uma função map sendo definida e, em seguida, chamada com uma função anônima como seu primeiro parâmetro:

+ +
function map(f,a) {
+  var result = []; // Cria um novo Array
+  var i;
+  for (i = 0; i != a.length; i++)
+    result[i] = f(a[i]);
+  return result;
+}
+
+ +

O código a seguir:

+ +
map(function(x) {return x * x * x}, [0, 1, 2, 5, 10]);
+
+ +

retorna [0, 1, 8, 125, 1000].

+ +

Em JavaScript, uma função pode ser definida com base numa condição. Por exemplo, a seguinte definição de função define minhaFuncao somente se num  é igual a 0:

+ +
var minhaFuncao;
+if (num == 0){
+  minhaFuncao = function(objeto) {
+    objeto.make = "Toyota"
+  }
+}
+ +

Além de definir funções, você também pode usar o construtor {{jsxref("Function")}} para criar funções a partir de uma string em tempo real, como no método {{jsxref("eval()")}}.

+ +

Um método é uma função invocada por um objeto. Leia mais sobre objetos e métodos em Trabalhando com Objetos.

+ +

Chamando funções

+ +

A definição de uma função não a executa. Definir a função é simplesmente nomear a função e especificar o que fazer quando a função é chamada. Chamar a função executa realmente as ações especificadas com os parâmetros indicados. Por exemplo, se você definir a função square, você pode chamá-la do seguinte modo: 

+ +
square(5);
+
+ +

A declaração anterior chama a função com o argumento 5. A função executa as instruções e retorna o valor 25.

+ +

Funções devem estar no escopo quando são chamadas, mas a declaração de uma função pode ser puxada para o topo (aparecem abaixo da chamada no código), como neste exemplo:

+ +
console.log(square(5));
+/* ... */
+function square(n){return n*n}
+
+ +

O escopo de uma função é a função na qual ela é declarada, ou todo o programa se ela é declarada no nível superior.

+ +
+

Nota: Isso funciona apenas quando a definição da função usa a sintaxe acima (ex., function funcNome(){ }). O código a seguir não vai funcionar.

+
+ +
console.log(square(5));
+var square = function (n) {
+  return n * n;
+}
+
+ +

Os argumentos de uma função não estão limitados a strings e números. Você pode passar objetos para uma função. A função show_props (definido em Trabalhando com Objetos) é um exemplo de uma função que recebe um objeto como um argumento.

+ +

Um função pode chamar a si mesma. Por exemplo, a função que calcula os fatoriais recursivamente:

+ +
function fatorial(n){
+  if ((n == 0) || (n == 1))
+    return 1;
+  else
+    return (n * fatorial(n - 1));
+}
+
+ +

Você poderia, então, calcular os fatoriais de um a cinco:

+ +
var a, b, c, d, e;
+a = fatorial(1); // a recebe o valor 1
+b = fatorial(2); // b recebe o valor 2
+c = fatorial(3); // c recebe o valor 6
+d = fatorial(4); // d recebe o valor 24
+e = fatorial(5); // e recebe o valor 120
+
+ +

Há outras maneiras de chamar funções. Muitas vezes há casos em que uma função precisa ser chamada dinamicamente, ou o número de argumentos de uma função varia, ou em que o contexto da chamada de função precisa ser definido para um objeto específico determinado em tempo de execução. Acontece que as funções são, por si mesmas, objetos, e esses objetos por sua vez têm métodos (veja objeto {{jsxref("Function")}}). Um desses, o método {{jsxref("Function.apply", "apply()")}}, pode ser usado para atingir esse objetivo.

+ +

Escopo da função

+ +

As variáveis definidas no interior de uma função não podem ser acessadas de nenhum lugar fora da função, porque a variável está definida apenas no escopo da função. No entanto, uma função pode acessar todas variáveis e funções definida fora do escopo onde ela está definida. Em outras palavras, a função definida no escopo global pode acessar todas as variáveis definidas no escopo global. A função definida dentro de outra função também pode acessar todas as variáveis definidas na função hospedeira e outras variáveis ao qual a função hospedeira tem acesso.

+ +
// As seguintes variáveis são definidas no escopo global
+var num1 = 20,
+    num2 = 3,
+    nome = "Chamahk";
+
+// Esta função é definida no escopo global
+function multiplica() {
+  return num1 * num2;
+}
+
+multiplica(); // Retorna 60
+
+// Um exemplo de função aninhada
+function getScore () {
+  var num1 = 2,
+      num2 = 3;
+
+  function add() {
+    return nome + " scored " + (num1 + num2);
+  }
+
+  return add();
+}
+
+getScore(); // Retorna "Chamahk scored 5"
+
+ +

Escopo e a pilha de função

+ +

Recursão

+ +

Uma função pode referir-se e chamar a si própria. Há três maneiras de uma função referir-se a si mesma:

+ +
    +
  1. o nome da função
    2. +
  2. arguments.callee
    3. +
  3. uma variável no escopo que se refere a função
    4. +
+ +

Por exemplo, considere a seguinte definição de função:

+ +
var foo = function bar() {
+   // declaracoes
+};
+
+ +

Dentro do corpo da função, todos, a seguir, são equivalentes:

+ +
    +
  1. bar()
    2. +
  2. arguments.callee()
    3. +
  3. foo()
    4. +
+ +

Uma função que chama a si mesma é chamada de função recursiva. Em alguns casos, a recursividade é análoga a um laço. Ambos executam o código várias vezes, e ambos necessitam de uma condição (para evitar um laço infinito, ou melhor, recursão infinita, neste caso). Por exemplo,  o seguinte laço:

+ +
var x = 0;
+while (x < 10) { // "x < 10" a condição do laço
+   // faça coisas
+   x++;
+}
+
+ +

pode ser convertido em função recursiva e uma chamada para a função:

+ +
function loop(x) {
+   if (x >= 10) // "x >= 10" a condição de parada (equivalente a "!(x < 10)")
+      return;
+   // faça coisas
+   loop(x + 1); // chamada recursiva
+}
+loop(0);
+
+ +

No entanto, alguns algoritmos não podem ser simples laços iterativos. Por exemplo, conseguir todos os nós da estrutura de uma árvore (por exemplo, o DOM) é mais fácil se feito recursivamente:

+ +
function walkTree(node) {
+   if (node == null) //
+      return;
+   // faça algo com o nó
+   for (var i = 0; i < node.childNodes.length; i++) {
+      walkTree(node.childNodes[i]);
+   }
+}
+
+ +

Em comparação ao laço da função, cada chamada recursiva realiza outras chamadas recursivas.

+ +

É possível converter qualquer algoritmo recursivo para um não recursivo, mas muitas vezes a lógica é muito mais complexa e exige o uso de pilhas. Na verdade a própria recursão usa pilha: a pilha de função.

+ +

O comportamento da pilha pode ser vista a seguir no exemplo:

+ +
function foo(i) {
+   if (i < 0)
+      return;
+   document.writeln('begin:' + i);
+   foo(i - 1);
+   document.writeln('end:' + i);
+}
+foo(3);
+
+ +

que produz:

+ +
begin:3
+begin:2
+begin:1
+begin:0
+end:0
+end:1
+end:2
+end:3
+
+ +

Funções aninhadas e closures

+ +

Você pode aninhar uma função dentro de outra. A função aninhada (interna) é acessível apenas para a função que a contém (exterior). Isso constitui também uma closure. Uma closure é uma expressão (tipicamente uma função) que pode ter variáveis livres em conjunto com um ambiente que conecta estas variáveis (que "fecha" a expressão).

+ +

Uma vez que uma função aninhada é uma closure, isto significa que uma função aninhada pode "herdar" os argumentos e variáveis de sua função de contenção. Em outras palavras, a função interior contém o escopo da função exterior.

+ +

Em resumo:

+ +
    +
  • A função interna só pode ser acessada a partir de declarações em função externa.
    • +
  • A função interna forma uma closure: a função  interna pode usar os argumentos e variáveis da função externa, enquanto a função externa não pode usar os argumentos e variáveis da função interna.
    • +
+ +

O exemplo a seguir mostra as funções aninhadas:

+ +
function addSquares(a,b) {
+   function square(x) {
+      return x * x;
+   }
+   return square(a) + square(b);
+}
+a = addSquares(2,3); // retorna 13
+b = addSquares(3,4); // retorna 25
+c = addSquares(4,5); // retorna 41
+
+ +

Uma vez que a função interna forma uma closure, você pode chamar a função externa e especificar argumentos para a função externa e interna:

+ +
function fora(x) {
+   function dentro(y) {
+      return x + y;
+   }
+   return dentro;
+}
+fn_inside = fora(3); // Pense nisso como: Receba uma função que adicionará 3 ao que quer que você repasse para ela
+result = fn_inside(5); // retorna 8
+
+result1 = fora(3)(5); // retorna 8
+
+ +

Preservação  de variáveis

+ +

Observe como x é preservado quando dentro é retornado. Uma closure deve preservar os argumentos e variáveis em todos os escopos que ela referencia. Uma vez que cada chamada fornece potencialmente argumentos diferentes, uma nova closure é criada para cada chamada de fora. A memória só poderá ser liberada quando o dentro retornado já não é mais acessível.

+ +

Isso não é diferente de armazenar referências em outros objetos, mas muitas vezes é menos óbvio, porque um não define diretamente as referências e não pode inspecioná-las.

+ +

Múltiplas funções aninhadas

+ +

Funções podem ter múltiplo aninhamento, por exemplo, a função (A) contém a função (B) que contém a função (C). Tanto as funções B e C formam uma closure, então B pode acessar A, e C pode acessar B. Além disso, uma vez que C pode acessar B que pode acessar A, C também pode acessar A. Assim, a closure pode conter vários escopos; eles recursivamente contém o escopo das funções que os contém. Isso é chamado encadeamento de escopo. (O motivo de ser chamado "encadeamento" será explicado mais tarde).

+ +

Considere o seguinte exemplo:

+ +
function A(x) {
+   function B(y) {
+      function C(z) {
+         alert(x + y + z);
+      }
+      C(3);
+   }
+   B(2);
+}
+A(1); // Exibe um alerta com o valor 6 (1 + 2 + 3)
+
+ +

Neste exemplo, C acessa y do B e x do A. Isso pode ser feito porque:

+ +
    +
  1. B forma uma closure incluindo A, isto é, B pode acessar argumentos e variáveis de A.
    2. +
  2. C forma uma closure incluindo B.
    3. +
  3.  Devido a closure B inclui A, a closure C inclui A, C pode acessar tanto argumentos e variáveis de B como de A. Em outras palavras, C encadeia o escopo de B e A, nesta ordem.
    4. +
+ +

O inverso, no entanto, não é verdadeiro. A não pode acessar C, porque A não pode acessar qualquer argumento ou variável de B. Assim, C é privado somente a B.

+ +

Conflitos de nome

+ +

Quando dois argumentos ou variáveis nos escopos da closure tem o mesmo nome, há um conflito de nome. Mas escopos internos tem prioridade, por isso o escopo mais interno tem a maior prioridade, enquanto que o escopo mais externo tem a menor. Esta é a cadeia de escopo. O primeiro da cadeia é o escopo mais interno, e o último é o escopo mais externo. Considere o seguinte:

+ +
function fora() {
+   var x = 10;
+   function dentro(x) {
+      return x;
+   }
+   return dentro;
+}
+result = fora()(20); // retorna 20 em vez de 10
+
+ +

O  conflito de nome acontece na declaração return x e está entre o parâmetro x de dentro e a variável x de fora. A cadeia de escopo aqui é {dentro, fora, objeto global}. Por isso o x de dentro tem precedência sobre o x de fora, e 20 (x de dentro) é retornado em vez de 10 (x de fora).

+ +

Closures

+ +

Closures são um dos recursos mais poderosos de JavaScript. JavaScript permite o aninhamento de funções e garante acesso completo à função interna a todas as variáveis e funções definidas dentro da função externa (e todas as outras variáveis e funções que a função externa tem acesso). No entanto, a função externa não tem acesso às variáveis e funções definidas dentro da função interna. Isto proporciona uma espécie de segurança para as variáveis da função interna. Além disso, uma vez  que a função interna tem acesso ao escopo da função externa, as variáveis e funções definidas na função externa vão durar na memória mais do que a própria função externa, isto se a função interna permanecer na memória mais tempo do que a função externa. Uma closure é criada quando a função interna é de alguma forma disponibilizada para qualquer escopo fora da função externa.

+ +
var pet = function(nome) {          // A função externa define uma variável "nome"
+      var getNome = function() {
+        return nome;                // A função interna tem acesso à variável "nome"  da função externa
+      }
+
+      return getNome;               // Retorna a função interna, expondo-a assim para escopos externos
+    },
+    myPet = pet("Vivie");
+
+myPet();                            // Retorna "Vivie"
+
+ +

Ela pode ser  mais complexa que o código acima. Um objeto contendo métodos para manipular as variáveis da função externa pode ser devolvida.

+ +
var criarPet = function(nome) {
+  var sex;
+
+  return {
+    setNome: function(newNome) {
+      nome = newNome;
+    },
+
+    getNome: function() {
+      return nome;
+    },
+
+    getSex: function() {
+      return sex;
+    },
+
+    setSex: function(newSex) {
+      if(typeof newSex == "string" && (newSex.toLowerCase() == "macho" || newSex.toLowerCase() == "fêmea")) {
+        sex = newSex;
+      }
+    }
+  }
+}
+
+var pet = criarPet("Vivie");
+pet.getNome();                  // Vivie
+
+pet.setNome("Oliver");
+pet.setSex("macho");
+pet.getSex();                   // macho
+pet.getNome();                  // Oliver
+
+ +

Nos códigos acima, a variável nome da função externa é acessível para as funções internas, e não há nenhuma outra maneira para acessar as variáveis internas, exceto pelas funções internas. As variáveis internas da função interna atuam como armazenamento seguro para as funções internas. Elas armazenam "persistentes", mas seguros, os dados com os quais as funções internas irão trabalhar. As funções não tem  que ser atribuídas a uma variável, ou ter um nome.

+ +
var getCode = (function(){
+  var secureCode = "0]Eal(eh&2";    // Um código que não queremos que pessoas de fora sejam capazes de modificar
+
+  return function () {
+    return secureCode;
+  };
+})();
+
+getCode();    // Retorna o secureCode
+
+ +

Há, no entanto, uma série de armadilhas que se deve ter cuidado ao usar closures. Se uma função fechada define uma variável com o mesmo nome de uma variável em um escopo externo, não há nenhuma maneira de se referir para a variável em um escopo externo novamente.

+ +
var createPet = function(nome) {  // Função externa define uma variável chamada "nome"
+  return {
+    setNome: function(nome) {    // Função fechada define uma variável chamada "nome"
+      nome = nome;               // ??? Como podemos acessar o "nome" definido pela função externa ???
+    }
+  }
+}
+
+ +

A palavra reservada this é muito complicada em closures, elas têm de ser usadas com muito cuidado. O objeto ao que this se refere depende completamente de onde a função foi chamada, ao invés de onde ela foi definida.

+ +

Usando objeto de argumentos

+ +

Os argumentos de uma função são mantidos em um objeto do tipo array. Dentro de uma função, você pode endereçar os argumentos passados para ele conforme: 

+ +
arguments[i]
+
+ +

onde i é um número ordinal do argumento, começando com zero. Então, o primeiro argumento passado para a função seria arguments[0]. O número total de argumentos é indicado por arguments.length.

+ +

Usando o objeto arguments, você pode chamar a função com mais argumentos do que o formalmente declarado. Isso muitas vezes é útil se você não sabe de antemão quantos argumentos serão passados para a função. Você pode usar arguments.length para determinar a quantidade de argumentos passados para a função, e então acessar cada argumento usando o objeto arguments.

+ +

Por exemplo, considere uma função que concatena várias strings. O argumento formal para a função é uma string que especifica os caracteres que separam os itens para concatenar.  A função definida como segue:

+ +
function myConcat(separador) {
+   var result = "", // inicializa a lista
+       i;
+   // itera por meio de argumentos
+   for (i = 1; i < arguments.length; i++) {
+      result += arguments[i] + separador;
+   }
+   return result;
+}
+
+ +

Você pode passar qualquer quantidade de argumentos para esta função, e ela concatena cada argumento na string "list":

+ +
// retorna "red, orange, blue, "
+myConcat(", ", "red", "orange", "blue");
+
+// retorna "elephant; giraffe; lion; cheetah; "
+myConcat("; ", "elephant", "giraffe", "lion", "cheetah");
+
+// retorna "sage. basil. oregano. pepper. parsley. "
+myConcat(". ", "sage", "basil", "oregano", "pepper", "parsley");
+
+ +
+

Nota: A variável arguments é "como um array", mas não é um array. Ela é como um array pois possui um índice numerado e a propriedade length. No entanto, não possui todos os métodos de manipulação de array. 

+
+ +

Veja objeto {{jsxref("Function")}} na referência do JavaScript para maiores informações.

+ +

Parâmetros de função

+ +

Começando com ECMAScript 6, há dois tipos novos de parâmetros: parâmetros padrão e parâmetros rest.

+ +

Parâmetros padrão

+ +

Em JavaScript, parâmetros padrões de funções são undefined. No entanto, em algumas situações pode ser útil definir um valor padrão diferente. Isto é onde os parâmetros padrão podem ajudar.

+ +

No passado, a estratégia geral para definir padrões era testar os valores de parâmetro no corpo da função e atribuir um valor se eles fossem undefined. Se, no exemplo a seguir, nenhum valor é fornecido para b na chamada, seu valor seria undefined ao avaliar a*b e a chamada para multiplicar retornaria NaN. No entanto, isso é pego com a segunda linha neste exemplo:

+ +
function multiplicar(a, b) {
+  b = typeof b !== 'undefined' ?  b : 1;
+
+  return a*b;
+}
+
+multiplicar(5); // 5
+ +

Com parâmetros padrão, a verificação no corpo da função não é mais necessária. Agora você pode simplesmente colocar 1 como valor padrão para b no campo de declaração de parâmetros:

+ +
function multiplicar(a, b = 1) {
+  return a*b;
+}
+
+multiplicar(5); // 5
+ +

Mais detalhes, consulte parâmetros padrão na referência.

+ +

Parâmetros rest

+ +

A sintaxe de parâmetro rest permite representar um número indefinido de argumentos como um array. No exemplo, usamos parâmetros rest para coletar argumentos do segundo argumento ao último. Então os multiplicamos pelo primeiro argumento. Neste exemplo é usado uma arrow function, que será introduzida na próxima seção.

+ +
function multiplicar(multiplicador, ...args) {
+  return args.map(x => multiplicador * x);
+}
+
+var arr = multiplicar(2, 1, 2, 3);
+console.log(arr); // [2, 4, 6]
+ +

Funções de seta

+ +

Uma expressão função de seta (anteriormente conhecida como função de seta gorda) tem uma sintaxe pequena em comparação com a expressão de função e lexicalmente vincula o valor this. Funções de seta são sempre anônimas. Consulte também no blog hacks.mozilla.org no post: "ES6 In Depth: Arrow functions".

+ +

Dois fatores influenciaram a introdução de funções de seta: funções mais curtas e o léxico this.

+ +

Funções curtas

+ +

Em alguns padrões funcionais, funções curtas são bem-vindas. Compare:

+ +
var a = [
+  "Hydrogen",
+  "Helium",
+  "Lithium",
+  "Beryl­lium"
+];
+
+var a2 = a.map(function(s){ return s.length });
+
+var a3 = a.map( s => s.length );
+ +

Léxico this

+ +

Até as funções de seta, cada nova função definia seu próprio valor this (um novo objeto no caso de um construtor, indefinido em chamadas de função no modo estrito, o objeto de contexto se a função é chamada como um "método de objeto", etc.). Isso pode ser irritante com um estilo de programação orientada a objetos.

+ +
function Pessoa() {      // O construtor Pessoa() define 'this' como sendo ele.
+    this.idade = 0;
+    setInterval(function crescer() {    // No modo não estrito, a função crescer define 'this'
+            // como o objeto global, o que é diferente do 'this'
+            // definido pelo construtor Pessoa().
+            this.idade++;
+     }, 1000);
+}
+var p = new Pessoa();
+ +

No ECMAScript 3/5, este problema foi resolvido atribuindo o valor em this a uma variável que poderia ser fechada.

+ +
function Pessoa() {
+  var self = this; // Alguns preferem 'that' em vez de 'self'. 
+                   // Escolha um e seja consistente.
+  self.idade = 0;
+
+  setInterval(function crescer() {
+    // A chamada de retorno refere-se à variável 'self' na qual
+    // o valor é o objeto esperado.
+    self.idade++;
+  }, 1000);
+}
+ +

Como alternativa, uma função vinculada poderia ser criada para que o valor da propriedade this seja passado para a função crescer().

+ +

Funções de seta capturam o valor this do contexto delimitado, então o código a seguir funciona conforme o esperado.

+ +
function Pessoa(){
+  this.idade = 0;
+
+  setInterval(() => {
+    this.idade++; // propriedade |this|refere ao objeto pessoa
+  }, 1000);
+}
+
+var p = new Pessoa();
+ +

Funções pré-definidas

+ +

JavaScript tem várias funções pré-definidas:

+ +
+
{{jsxref("Global_Objects/eval", "eval()")}}
+
+

O método eval() avalia código JavaScript representado como uma string.

+
+
{{jsxref("Global_Objects/uneval", "uneval()")}} {{non-standard_inline}}
+
+

O método uneval() cria uma representação de string do código-fonte de um  {{jsxref("Object")}}.

+
+
{{jsxref("Global_Objects/isFinite", "isFinite()")}}
+
+

A função global isFinite() determina se o valor passado é um número finito. Se necessário, o parâmetro é primeiro convertido para um número.

+
+
{{jsxref("Global_Objects/isNaN", "isNaN()")}}
+
+

A função isNaN() determina se um valor é {{jsxref("Global_Objects/NaN", "NaN")}} ou não. Nota: coerção dentro da função isNaN tem regras interessantes; você pode, alternativamente, querer usar {{jsxref("Number.isNaN()")}}, como definido no ECMAScript 6,  ou você pode usar typeof para determinar se o valor não é um número.

+
+
{{jsxref("Global_Objects/parseFloat", "parseFloat()")}}
+
+

A função parseFloat() analisa um argumento do tipo string e retorna um número de ponto flutuante.

+
+
{{jsxref("Global_Objects/parseInt", "parseInt()")}}
+
+

A função parseInt() analisa um argumento do tipo string e retorna um inteiro da base especificada (base do sistema numérico).

+
+
{{jsxref("Global_Objects/decodeURI", "decodeURI()")}}
+
+

A função decodeURI() decodifica uma Uniform Resource Identifier (URI) criada anteriormente por {{jsxref("Global_Objects/encodeURI", "encodeURI")}} ou por uma rotina similar.

+
+
{{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent()")}}
+
+

O método decodeURIComponent() decodifica um componente Uniform Resource Identifier (URI) criado anteriormente por {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent")}} ou por uma rotina similar.

+
+
{{jsxref("Global_Objects/encodeURI", "encodeURI()")}}
+
+

O método encodeURI() codifica um Uniform Resource Identifier (URI), substituindo cada ocorrência de determinados caracteres por um, dois, três, ou quatro sequências de escape que representa a codificação UTF-8 do caractere (só serão quatro sequências de escape para caracteres compostos de dois caracteres "substitutos").

+
+
{{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}
+
+

O método encodeURIComponent() codifica um componente Uniform Resource Identifier (URI), substituindo cada ocorrência de determinados caracteres por um, dois, três, ou quatro sequências de escape que representa a codificação UTF-8 do caractere (só serão quatro sequências de escape para caracteres compostos de dois caracteres "substitutos").

+
+
{{jsxref("Global_Objects/escape", "escape()")}} {{deprecated_inline}}
+
+

O método obsoleto escape() calcula uma nova string na qual certos caracteres foram substituídos por uma sequência de escape hexadecimal. Use {{jsxref("Global_Objects/encodeURI", "encodeURI")}} ou {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent")}} em vez disso.

+
+
{{jsxref("Global_Objects/unescape", "unescape()")}} {{deprecated_inline}}
+
+

O método obsoleto unescape() calcula uma nova string na qual sequências de escape hexadecimais são substituídas pelo caractere que ela representa. As sequências de escape podem ser introduzidas por uma função como {{jsxref("Global_Objects/escape", "escape")}}. Por unescape() estar obsoleto, use {{jsxref("Global_Objects/decodeURI", "decodeURI()")}} ou {{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent")}} ao invés dele.

+
+
+ +

{{PreviousNext("Web/JavaScript/Guide/Loops_and_iteration", "Web/JavaScript/Guide/Expressions_and_Operators")}}

diff --git "a/files/pt-br/web/javascript/guide/fun\303\247\303\265es/index.html" "b/files/pt-br/web/javascript/guide/fun\303\247\303\265es/index.html" deleted file mode 100644 index 7077d1787b..0000000000 --- "a/files/pt-br/web/javascript/guide/fun\303\247\303\265es/index.html" +++ /dev/null @@ -1,640 +0,0 @@ ---- -title: Funções -slug: Web/JavaScript/Guide/Funções -tags: - - Funções JavaScript - - Guia(2) - - Iniciante - - JavaScript -translation_of: Web/JavaScript/Guide/Functions ---- -
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Loops_and_iteration", "Web/JavaScript/Guide/Expressions_and_Operators")}}
- -

Funções são blocos de construção fundamentais em JavaScript. Uma função é um procedimento de JavaScript - um conjunto de instruções que executa uma tarefa ou calcula um valor. Para usar uma função, você deve defini-la em algum lugar no escopo do qual você quiser chamá-la.

- -

Veja também o capítulo de referência sobre funções JavaScript para conhecer os detalhes.

- -

Definindo Funções

- -

Declarando uma função

- -

A definição da função (também chamada de declaração de função) consiste no uso da palavra chave function, seguida por:

- -
    -
  • Nome da Função.
    • -
  • Lista de argumentos para a função, entre parênteses e separados por vírgulas.
    • -
  • Declarações JavaScript que definem a função, entre chaves { }.
    • -
- -

Por exemplo, o código a seguir define uma função simples chamada square:

- -
function square(numero) {
-  return numero * numero;
-}
-
- -

A função square recebe um argumento chamado numero. A função consiste em uma instrução que indica para retornar o argumento da função (isto é, numero) multiplicado por si mesmo. A declaração return especifica o valor retornado pela função.

- -
return numero * numero;
-
- -

Parâmetros primitivos (como um número) são passados para as funções por valor; o valor é passado para a função, mas se a função altera o valor do parâmetro, esta mudança não reflete globalmente ou na função chamada.

- -

Se você passar um objeto (ou seja, um  valor não primitivo, tal como {{jsxref("Array")}} ou um objeto definido por você) como um parâmetro e a função alterar as propriedades do objeto, essa mudança é visível fora da função, conforme mostrado no exemplo a seguir:

- -
function minhaFuncao(objeto) {
-  objeto.make = "Toyota";
-}
-
-var meucarro = {make: "Honda", model: "Accord", year: 1998};
-var x, y;
-
-x = meucarro.make;     // x recebe o valor "Honda"
-
-minhaFuncao(meucarro);
-y = meucarro.make;     // y recebe o valor "Toyota"
-                    // (a propriedade make foi alterada pela função)
-
- -

Expressão de função

- -

Embora a declaração de função acima seja sintaticamente uma declaração, funções também podem ser criadas por uma expressão de função. Tal função pode ser anônima; ele não tem que ter um nome. Por exemplo, a função square poderia ter sido definida como:

- -
var square = function(numero) {return numero * numero};
-var x = square(4) //x recebe o valor 16
- -

No entanto, um nome pode ser fornecido com uma expressão de função e pode ser utilizado no interior da função para se referir a si mesma, ou em um debugger para identificar a função em stack traces:

- -
var fatorial = function fac(n) {return n<2 ? 1 : n*fac(n-1)};
-
-console.log(fatorial(3));
-
- -

As expressões de função são convenientes ao passar uma função como um argumento para outra função. O exemplo a seguir mostra uma função map sendo definida e, em seguida, chamada com uma função anônima como seu primeiro parâmetro:

- -
function map(f,a) {
-  var result = []; // Cria um novo Array
-  var i;
-  for (i = 0; i != a.length; i++)
-    result[i] = f(a[i]);
-  return result;
-}
-
- -

O código a seguir:

- -
map(function(x) {return x * x * x}, [0, 1, 2, 5, 10]);
-
- -

retorna [0, 1, 8, 125, 1000].

- -

Em JavaScript, uma função pode ser definida com base numa condição. Por exemplo, a seguinte definição de função define minhaFuncao somente se num  é igual a 0:

- -
var minhaFuncao;
-if (num == 0){
-  minhaFuncao = function(objeto) {
-    objeto.make = "Toyota"
-  }
-}
- -

Além de definir funções, você também pode usar o construtor {{jsxref("Function")}} para criar funções a partir de uma string em tempo real, como no método {{jsxref("eval()")}}.

- -

Um método é uma função invocada por um objeto. Leia mais sobre objetos e métodos em Trabalhando com Objetos.

- -

Chamando funções

- -

A definição de uma função não a executa. Definir a função é simplesmente nomear a função e especificar o que fazer quando a função é chamada. Chamar a função executa realmente as ações especificadas com os parâmetros indicados. Por exemplo, se você definir a função square, você pode chamá-la do seguinte modo: 

- -
square(5);
-
- -

A declaração anterior chama a função com o argumento 5. A função executa as instruções e retorna o valor 25.

- -

Funções devem estar no escopo quando são chamadas, mas a declaração de uma função pode ser puxada para o topo (aparecem abaixo da chamada no código), como neste exemplo:

- -
console.log(square(5));
-/* ... */
-function square(n){return n*n}
-
- -

O escopo de uma função é a função na qual ela é declarada, ou todo o programa se ela é declarada no nível superior.

- -
-

Nota: Isso funciona apenas quando a definição da função usa a sintaxe acima (ex., function funcNome(){ }). O código a seguir não vai funcionar.

-
- -
console.log(square(5));
-var square = function (n) {
-  return n * n;
-}
-
- -

Os argumentos de uma função não estão limitados a strings e números. Você pode passar objetos para uma função. A função show_props (definido em Trabalhando com Objetos) é um exemplo de uma função que recebe um objeto como um argumento.

- -

Um função pode chamar a si mesma. Por exemplo, a função que calcula os fatoriais recursivamente:

- -
function fatorial(n){
-  if ((n == 0) || (n == 1))
-    return 1;
-  else
-    return (n * fatorial(n - 1));
-}
-
- -

Você poderia, então, calcular os fatoriais de um a cinco:

- -
var a, b, c, d, e;
-a = fatorial(1); // a recebe o valor 1
-b = fatorial(2); // b recebe o valor 2
-c = fatorial(3); // c recebe o valor 6
-d = fatorial(4); // d recebe o valor 24
-e = fatorial(5); // e recebe o valor 120
-
- -

Há outras maneiras de chamar funções. Muitas vezes há casos em que uma função precisa ser chamada dinamicamente, ou o número de argumentos de uma função varia, ou em que o contexto da chamada de função precisa ser definido para um objeto específico determinado em tempo de execução. Acontece que as funções são, por si mesmas, objetos, e esses objetos por sua vez têm métodos (veja objeto {{jsxref("Function")}}). Um desses, o método {{jsxref("Function.apply", "apply()")}}, pode ser usado para atingir esse objetivo.

- -

Escopo da função

- -

As variáveis definidas no interior de uma função não podem ser acessadas de nenhum lugar fora da função, porque a variável está definida apenas no escopo da função. No entanto, uma função pode acessar todas variáveis e funções definida fora do escopo onde ela está definida. Em outras palavras, a função definida no escopo global pode acessar todas as variáveis definidas no escopo global. A função definida dentro de outra função também pode acessar todas as variáveis definidas na função hospedeira e outras variáveis ao qual a função hospedeira tem acesso.

- -
// As seguintes variáveis são definidas no escopo global
-var num1 = 20,
-    num2 = 3,
-    nome = "Chamahk";
-
-// Esta função é definida no escopo global
-function multiplica() {
-  return num1 * num2;
-}
-
-multiplica(); // Retorna 60
-
-// Um exemplo de função aninhada
-function getScore () {
-  var num1 = 2,
-      num2 = 3;
-
-  function add() {
-    return nome + " scored " + (num1 + num2);
-  }
-
-  return add();
-}
-
-getScore(); // Retorna "Chamahk scored 5"
-
- -

Escopo e a pilha de função

- -

Recursão

- -

Uma função pode referir-se e chamar a si própria. Há três maneiras de uma função referir-se a si mesma:

- -
    -
  1. o nome da função
    2. -
  2. arguments.callee
    3. -
  3. uma variável no escopo que se refere a função
    4. -
- -

Por exemplo, considere a seguinte definição de função:

- -
var foo = function bar() {
-   // declaracoes
-};
-
- -

Dentro do corpo da função, todos, a seguir, são equivalentes:

- -
    -
  1. bar()
    2. -
  2. arguments.callee()
    3. -
  3. foo()
    4. -
- -

Uma função que chama a si mesma é chamada de função recursiva. Em alguns casos, a recursividade é análoga a um laço. Ambos executam o código várias vezes, e ambos necessitam de uma condição (para evitar um laço infinito, ou melhor, recursão infinita, neste caso). Por exemplo,  o seguinte laço:

- -
var x = 0;
-while (x < 10) { // "x < 10" a condição do laço
-   // faça coisas
-   x++;
-}
-
- -

pode ser convertido em função recursiva e uma chamada para a função:

- -
function loop(x) {
-   if (x >= 10) // "x >= 10" a condição de parada (equivalente a "!(x < 10)")
-      return;
-   // faça coisas
-   loop(x + 1); // chamada recursiva
-}
-loop(0);
-
- -

No entanto, alguns algoritmos não podem ser simples laços iterativos. Por exemplo, conseguir todos os nós da estrutura de uma árvore (por exemplo, o DOM) é mais fácil se feito recursivamente:

- -
function walkTree(node) {
-   if (node == null) //
-      return;
-   // faça algo com o nó
-   for (var i = 0; i < node.childNodes.length; i++) {
-      walkTree(node.childNodes[i]);
-   }
-}
-
- -

Em comparação ao laço da função, cada chamada recursiva realiza outras chamadas recursivas.

- -

É possível converter qualquer algoritmo recursivo para um não recursivo, mas muitas vezes a lógica é muito mais complexa e exige o uso de pilhas. Na verdade a própria recursão usa pilha: a pilha de função.

- -

O comportamento da pilha pode ser vista a seguir no exemplo:

- -
function foo(i) {
-   if (i < 0)
-      return;
-   document.writeln('begin:' + i);
-   foo(i - 1);
-   document.writeln('end:' + i);
-}
-foo(3);
-
- -

que produz:

- -
begin:3
-begin:2
-begin:1
-begin:0
-end:0
-end:1
-end:2
-end:3
-
- -

Funções aninhadas e closures

- -

Você pode aninhar uma função dentro de outra. A função aninhada (interna) é acessível apenas para a função que a contém (exterior). Isso constitui também uma closure. Uma closure é uma expressão (tipicamente uma função) que pode ter variáveis livres em conjunto com um ambiente que conecta estas variáveis (que "fecha" a expressão).

- -

Uma vez que uma função aninhada é uma closure, isto significa que uma função aninhada pode "herdar" os argumentos e variáveis de sua função de contenção. Em outras palavras, a função interior contém o escopo da função exterior.

- -

Em resumo:

- -
    -
  • A função interna só pode ser acessada a partir de declarações em função externa.
    • -
  • A função interna forma uma closure: a função  interna pode usar os argumentos e variáveis da função externa, enquanto a função externa não pode usar os argumentos e variáveis da função interna.
    • -
- -

O exemplo a seguir mostra as funções aninhadas:

- -
function addSquares(a,b) {
-   function square(x) {
-      return x * x;
-   }
-   return square(a) + square(b);
-}
-a = addSquares(2,3); // retorna 13
-b = addSquares(3,4); // retorna 25
-c = addSquares(4,5); // retorna 41
-
- -

Uma vez que a função interna forma uma closure, você pode chamar a função externa e especificar argumentos para a função externa e interna:

- -
function fora(x) {
-   function dentro(y) {
-      return x + y;
-   }
-   return dentro;
-}
-fn_inside = fora(3); // Pense nisso como: Receba uma função que adicionará 3 ao que quer que você repasse para ela
-result = fn_inside(5); // retorna 8
-
-result1 = fora(3)(5); // retorna 8
-
- -

Preservação  de variáveis

- -

Observe como x é preservado quando dentro é retornado. Uma closure deve preservar os argumentos e variáveis em todos os escopos que ela referencia. Uma vez que cada chamada fornece potencialmente argumentos diferentes, uma nova closure é criada para cada chamada de fora. A memória só poderá ser liberada quando o dentro retornado já não é mais acessível.

- -

Isso não é diferente de armazenar referências em outros objetos, mas muitas vezes é menos óbvio, porque um não define diretamente as referências e não pode inspecioná-las.

- -

Múltiplas funções aninhadas

- -

Funções podem ter múltiplo aninhamento, por exemplo, a função (A) contém a função (B) que contém a função (C). Tanto as funções B e C formam uma closure, então B pode acessar A, e C pode acessar B. Além disso, uma vez que C pode acessar B que pode acessar A, C também pode acessar A. Assim, a closure pode conter vários escopos; eles recursivamente contém o escopo das funções que os contém. Isso é chamado encadeamento de escopo. (O motivo de ser chamado "encadeamento" será explicado mais tarde).

- -

Considere o seguinte exemplo:

- -
function A(x) {
-   function B(y) {
-      function C(z) {
-         alert(x + y + z);
-      }
-      C(3);
-   }
-   B(2);
-}
-A(1); // Exibe um alerta com o valor 6 (1 + 2 + 3)
-
- -

Neste exemplo, C acessa y do B e x do A. Isso pode ser feito porque:

- -
    -
  1. B forma uma closure incluindo A, isto é, B pode acessar argumentos e variáveis de A.
    2. -
  2. C forma uma closure incluindo B.
    3. -
  3.  Devido a closure B inclui A, a closure C inclui A, C pode acessar tanto argumentos e variáveis de B como de A. Em outras palavras, C encadeia o escopo de B e A, nesta ordem.
    4. -
- -

O inverso, no entanto, não é verdadeiro. A não pode acessar C, porque A não pode acessar qualquer argumento ou variável de B. Assim, C é privado somente a B.

- -

Conflitos de nome

- -

Quando dois argumentos ou variáveis nos escopos da closure tem o mesmo nome, há um conflito de nome. Mas escopos internos tem prioridade, por isso o escopo mais interno tem a maior prioridade, enquanto que o escopo mais externo tem a menor. Esta é a cadeia de escopo. O primeiro da cadeia é o escopo mais interno, e o último é o escopo mais externo. Considere o seguinte:

- -
function fora() {
-   var x = 10;
-   function dentro(x) {
-      return x;
-   }
-   return dentro;
-}
-result = fora()(20); // retorna 20 em vez de 10
-
- -

O  conflito de nome acontece na declaração return x e está entre o parâmetro x de dentro e a variável x de fora. A cadeia de escopo aqui é {dentro, fora, objeto global}. Por isso o x de dentro tem precedência sobre o x de fora, e 20 (x de dentro) é retornado em vez de 10 (x de fora).

- -

Closures

- -

Closures são um dos recursos mais poderosos de JavaScript. JavaScript permite o aninhamento de funções e garante acesso completo à função interna a todas as variáveis e funções definidas dentro da função externa (e todas as outras variáveis e funções que a função externa tem acesso). No entanto, a função externa não tem acesso às variáveis e funções definidas dentro da função interna. Isto proporciona uma espécie de segurança para as variáveis da função interna. Além disso, uma vez  que a função interna tem acesso ao escopo da função externa, as variáveis e funções definidas na função externa vão durar na memória mais do que a própria função externa, isto se a função interna permanecer na memória mais tempo do que a função externa. Uma closure é criada quando a função interna é de alguma forma disponibilizada para qualquer escopo fora da função externa.

- -
var pet = function(nome) {          // A função externa define uma variável "nome"
-      var getNome = function() {
-        return nome;                // A função interna tem acesso à variável "nome"  da função externa
-      }
-
-      return getNome;               // Retorna a função interna, expondo-a assim para escopos externos
-    },
-    myPet = pet("Vivie");
-
-myPet();                            // Retorna "Vivie"
-
- -

Ela pode ser  mais complexa que o código acima. Um objeto contendo métodos para manipular as variáveis da função externa pode ser devolvida.

- -
var criarPet = function(nome) {
-  var sex;
-
-  return {
-    setNome: function(newNome) {
-      nome = newNome;
-    },
-
-    getNome: function() {
-      return nome;
-    },
-
-    getSex: function() {
-      return sex;
-    },
-
-    setSex: function(newSex) {
-      if(typeof newSex == "string" && (newSex.toLowerCase() == "macho" || newSex.toLowerCase() == "fêmea")) {
-        sex = newSex;
-      }
-    }
-  }
-}
-
-var pet = criarPet("Vivie");
-pet.getNome();                  // Vivie
-
-pet.setNome("Oliver");
-pet.setSex("macho");
-pet.getSex();                   // macho
-pet.getNome();                  // Oliver
-
- -

Nos códigos acima, a variável nome da função externa é acessível para as funções internas, e não há nenhuma outra maneira para acessar as variáveis internas, exceto pelas funções internas. As variáveis internas da função interna atuam como armazenamento seguro para as funções internas. Elas armazenam "persistentes", mas seguros, os dados com os quais as funções internas irão trabalhar. As funções não tem  que ser atribuídas a uma variável, ou ter um nome.

- -
var getCode = (function(){
-  var secureCode = "0]Eal(eh&2";    // Um código que não queremos que pessoas de fora sejam capazes de modificar
-
-  return function () {
-    return secureCode;
-  };
-})();
-
-getCode();    // Retorna o secureCode
-
- -

Há, no entanto, uma série de armadilhas que se deve ter cuidado ao usar closures. Se uma função fechada define uma variável com o mesmo nome de uma variável em um escopo externo, não há nenhuma maneira de se referir para a variável em um escopo externo novamente.

- -
var createPet = function(nome) {  // Função externa define uma variável chamada "nome"
-  return {
-    setNome: function(nome) {    // Função fechada define uma variável chamada "nome"
-      nome = nome;               // ??? Como podemos acessar o "nome" definido pela função externa ???
-    }
-  }
-}
-
- -

A palavra reservada this é muito complicada em closures, elas têm de ser usadas com muito cuidado. O objeto ao que this se refere depende completamente de onde a função foi chamada, ao invés de onde ela foi definida.

- -

Usando objeto de argumentos

- -

Os argumentos de uma função são mantidos em um objeto do tipo array. Dentro de uma função, você pode endereçar os argumentos passados para ele conforme: 

- -
arguments[i]
-
- -

onde i é um número ordinal do argumento, começando com zero. Então, o primeiro argumento passado para a função seria arguments[0]. O número total de argumentos é indicado por arguments.length.

- -

Usando o objeto arguments, você pode chamar a função com mais argumentos do que o formalmente declarado. Isso muitas vezes é útil se você não sabe de antemão quantos argumentos serão passados para a função. Você pode usar arguments.length para determinar a quantidade de argumentos passados para a função, e então acessar cada argumento usando o objeto arguments.

- -

Por exemplo, considere uma função que concatena várias strings. O argumento formal para a função é uma string que especifica os caracteres que separam os itens para concatenar.  A função definida como segue:

- -
function myConcat(separador) {
-   var result = "", // inicializa a lista
-       i;
-   // itera por meio de argumentos
-   for (i = 1; i < arguments.length; i++) {
-      result += arguments[i] + separador;
-   }
-   return result;
-}
-
- -

Você pode passar qualquer quantidade de argumentos para esta função, e ela concatena cada argumento na string "list":

- -
// retorna "red, orange, blue, "
-myConcat(", ", "red", "orange", "blue");
-
-// retorna "elephant; giraffe; lion; cheetah; "
-myConcat("; ", "elephant", "giraffe", "lion", "cheetah");
-
-// retorna "sage. basil. oregano. pepper. parsley. "
-myConcat(". ", "sage", "basil", "oregano", "pepper", "parsley");
-
- -
-

Nota: A variável arguments é "como um array", mas não é um array. Ela é como um array pois possui um índice numerado e a propriedade length. No entanto, não possui todos os métodos de manipulação de array. 

-
- -

Veja objeto {{jsxref("Function")}} na referência do JavaScript para maiores informações.

- -

Parâmetros de função

- -

Começando com ECMAScript 6, há dois tipos novos de parâmetros: parâmetros padrão e parâmetros rest.

- -

Parâmetros padrão

- -

Em JavaScript, parâmetros padrões de funções são undefined. No entanto, em algumas situações pode ser útil definir um valor padrão diferente. Isto é onde os parâmetros padrão podem ajudar.

- -

No passado, a estratégia geral para definir padrões era testar os valores de parâmetro no corpo da função e atribuir um valor se eles fossem undefined. Se, no exemplo a seguir, nenhum valor é fornecido para b na chamada, seu valor seria undefined ao avaliar a*b e a chamada para multiplicar retornaria NaN. No entanto, isso é pego com a segunda linha neste exemplo:

- -
function multiplicar(a, b) {
-  b = typeof b !== 'undefined' ?  b : 1;
-
-  return a*b;
-}
-
-multiplicar(5); // 5
- -

Com parâmetros padrão, a verificação no corpo da função não é mais necessária. Agora você pode simplesmente colocar 1 como valor padrão para b no campo de declaração de parâmetros:

- -
function multiplicar(a, b = 1) {
-  return a*b;
-}
-
-multiplicar(5); // 5
- -

Mais detalhes, consulte parâmetros padrão na referência.

- -

Parâmetros rest

- -

A sintaxe de parâmetro rest permite representar um número indefinido de argumentos como um array. No exemplo, usamos parâmetros rest para coletar argumentos do segundo argumento ao último. Então os multiplicamos pelo primeiro argumento. Neste exemplo é usado uma arrow function, que será introduzida na próxima seção.

- -
function multiplicar(multiplicador, ...args) {
-  return args.map(x => multiplicador * x);
-}
-
-var arr = multiplicar(2, 1, 2, 3);
-console.log(arr); // [2, 4, 6]
- -

Funções de seta

- -

Uma expressão função de seta (anteriormente conhecida como função de seta gorda) tem uma sintaxe pequena em comparação com a expressão de função e lexicalmente vincula o valor this. Funções de seta são sempre anônimas. Consulte também no blog hacks.mozilla.org no post: "ES6 In Depth: Arrow functions".

- -

Dois fatores influenciaram a introdução de funções de seta: funções mais curtas e o léxico this.

- -

Funções curtas

- -

Em alguns padrões funcionais, funções curtas são bem-vindas. Compare:

- -
var a = [
-  "Hydrogen",
-  "Helium",
-  "Lithium",
-  "Beryl­lium"
-];
-
-var a2 = a.map(function(s){ return s.length });
-
-var a3 = a.map( s => s.length );
- -

Léxico this

- -

Até as funções de seta, cada nova função definia seu próprio valor this (um novo objeto no caso de um construtor, indefinido em chamadas de função no modo estrito, o objeto de contexto se a função é chamada como um "método de objeto", etc.). Isso pode ser irritante com um estilo de programação orientada a objetos.

- -
function Pessoa() {      // O construtor Pessoa() define 'this' como sendo ele.
-    this.idade = 0;
-    setInterval(function crescer() {    // No modo não estrito, a função crescer define 'this'
-            // como o objeto global, o que é diferente do 'this'
-            // definido pelo construtor Pessoa().
-            this.idade++;
-     }, 1000);
-}
-var p = new Pessoa();
- -

No ECMAScript 3/5, este problema foi resolvido atribuindo o valor em this a uma variável que poderia ser fechada.

- -
function Pessoa() {
-  var self = this; // Alguns preferem 'that' em vez de 'self'. 
-                   // Escolha um e seja consistente.
-  self.idade = 0;
-
-  setInterval(function crescer() {
-    // A chamada de retorno refere-se à variável 'self' na qual
-    // o valor é o objeto esperado.
-    self.idade++;
-  }, 1000);
-}
- -

Como alternativa, uma função vinculada poderia ser criada para que o valor da propriedade this seja passado para a função crescer().

- -

Funções de seta capturam o valor this do contexto delimitado, então o código a seguir funciona conforme o esperado.

- -
function Pessoa(){
-  this.idade = 0;
-
-  setInterval(() => {
-    this.idade++; // propriedade |this|refere ao objeto pessoa
-  }, 1000);
-}
-
-var p = new Pessoa();
- -

Funções pré-definidas

- -

JavaScript tem várias funções pré-definidas:

- -
-
{{jsxref("Global_Objects/eval", "eval()")}}
-
-

O método eval() avalia código JavaScript representado como uma string.

-
-
{{jsxref("Global_Objects/uneval", "uneval()")}} {{non-standard_inline}}
-
-

O método uneval() cria uma representação de string do código-fonte de um  {{jsxref("Object")}}.

-
-
{{jsxref("Global_Objects/isFinite", "isFinite()")}}
-
-

A função global isFinite() determina se o valor passado é um número finito. Se necessário, o parâmetro é primeiro convertido para um número.

-
-
{{jsxref("Global_Objects/isNaN", "isNaN()")}}
-
-

A função isNaN() determina se um valor é {{jsxref("Global_Objects/NaN", "NaN")}} ou não. Nota: coerção dentro da função isNaN tem regras interessantes; você pode, alternativamente, querer usar {{jsxref("Number.isNaN()")}}, como definido no ECMAScript 6,  ou você pode usar typeof para determinar se o valor não é um número.

-
-
{{jsxref("Global_Objects/parseFloat", "parseFloat()")}}
-
-

A função parseFloat() analisa um argumento do tipo string e retorna um número de ponto flutuante.

-
-
{{jsxref("Global_Objects/parseInt", "parseInt()")}}
-
-

A função parseInt() analisa um argumento do tipo string e retorna um inteiro da base especificada (base do sistema numérico).

-
-
{{jsxref("Global_Objects/decodeURI", "decodeURI()")}}
-
-

A função decodeURI() decodifica uma Uniform Resource Identifier (URI) criada anteriormente por {{jsxref("Global_Objects/encodeURI", "encodeURI")}} ou por uma rotina similar.

-
-
{{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent()")}}
-
-

O método decodeURIComponent() decodifica um componente Uniform Resource Identifier (URI) criado anteriormente por {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent")}} ou por uma rotina similar.

-
-
{{jsxref("Global_Objects/encodeURI", "encodeURI()")}}
-
-

O método encodeURI() codifica um Uniform Resource Identifier (URI), substituindo cada ocorrência de determinados caracteres por um, dois, três, ou quatro sequências de escape que representa a codificação UTF-8 do caractere (só serão quatro sequências de escape para caracteres compostos de dois caracteres "substitutos").

-
-
{{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}
-
-

O método encodeURIComponent() codifica um componente Uniform Resource Identifier (URI), substituindo cada ocorrência de determinados caracteres por um, dois, três, ou quatro sequências de escape que representa a codificação UTF-8 do caractere (só serão quatro sequências de escape para caracteres compostos de dois caracteres "substitutos").

-
-
{{jsxref("Global_Objects/escape", "escape()")}} {{deprecated_inline}}
-
-

O método obsoleto escape() calcula uma nova string na qual certos caracteres foram substituídos por uma sequência de escape hexadecimal. Use {{jsxref("Global_Objects/encodeURI", "encodeURI")}} ou {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent")}} em vez disso.

-
-
{{jsxref("Global_Objects/unescape", "unescape()")}} {{deprecated_inline}}
-
-

O método obsoleto unescape() calcula uma nova string na qual sequências de escape hexadecimais são substituídas pelo caractere que ela representa. As sequências de escape podem ser introduzidas por uma função como {{jsxref("Global_Objects/escape", "escape")}}. Por unescape() estar obsoleto, use {{jsxref("Global_Objects/decodeURI", "decodeURI()")}} ou {{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent")}} ao invés dele.

-
-
- -

{{PreviousNext("Web/JavaScript/Guide/Loops_and_iteration", "Web/JavaScript/Guide/Expressions_and_Operators")}}

diff --git a/files/pt-br/web/javascript/guide/grammar_and_types/index.html b/files/pt-br/web/javascript/guide/grammar_and_types/index.html new file mode 100644 index 0000000000..7920ee6b1a --- /dev/null +++ b/files/pt-br/web/javascript/guide/grammar_and_types/index.html @@ -0,0 +1,601 @@ +--- +title: Sintaxe e tipos +slug: 'Web/JavaScript/Guide/Values,_variables,_and_literals' +tags: + - Guia(2) + - Guía + - Iniciante + - JavaScript +translation_of: Web/JavaScript/Guide/Grammar_and_types +--- +

{{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. Por exemplo, a palavra Früh (que significa "cedo" em Alemão) pode ser usada como nome de variável.

+ +
var Früh = "foobar";
+ +

Mas a variável früh não é a mesma que Früh porque JavaScript é case sensitive.

+ +

No JavaScript, instruções são chamadas de {{Glossary("Statement", "declaração")}} 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 de escopo de bloco, 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:

+ +
    +
  • Com a palavra chave {{jsxref("Statements/var", "var")}}. Por exemplo, var x = 42. Esta sintaxe pode ser usada para declarar tanto variáveis locais como variáveis globais.
    • +
  • Por simples adição de valor. Por exemplo, x = 42. Isso declara uma variável global. Essa declaração gera um aviso de advertência no JavaScript. Você não deve usar essa variante.
    • +
  • Com a palavra chave {{jsxref("Statements/let", "let")}}. Por exemplo, let y = 13. Essa sintaxe pode ser usada para declarar uma variável local de escopo de bloco. Veja escopo de variável abaixo.
    • +
+ +

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); // executa uma exception de erro de referência (ReferenceError)
+
+ +

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

Variável de elevação

+ +

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
+ */
+// retornará 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, sublinhado ou cifrão e pode conter caractere alfabético, numérico ou sublinhado.

+ +
const PI = 3.14;
+
+ +

Uma constante não pode alterar seu valor por meio de uma atribuição ou ser declarada novamente enquanto o script está em execução. 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, presume-se que o identificador represente 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:

+ +
    +
  • Seis tipos de dados são os chamados {{Glossary("Primitive", "primitivos")}}: +
      +
    • {{Glossary("Boolean")}}. true e false.
      • +
    • {{Glossary("null")}}. Uma palavra-chave que indica valor nulo. Devido JavaScript ser case-sensitive, null não é o mesmo que Null, NULL, ou ainda outra variação.
      • +
    • {{Glossary("undefined")}}. Uma propriedade superior cujo valor é indefinido.
      • +
    • {{Glossary("Number")}}. 42 ou 3.14159.
      • +
    • {{Glossary("String")}}. "Howdy"
      • +
    • {{Glossary("Symbol")}} (novo em ECMAScript 6). Um tipo de dado cuja as instâncias são únicas e imutáveis.
      • +
    +
    • +
  • e {{Glossary("Object")}}
    • +
+ +

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ções")}} 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.

+ +
    +
  • {{jsxref("parseInt", "parseInt()")}}
    • +
  • {{jsxref("parseFloat", "parseFloat()")}}
    • +
+ +

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:

+ +
    +
  • {{anch("Array literal")}}
    • +
  • {{anch("Literais boolean")}}
    • +
  • {{anch("Literais de ponto flutuante")}}
    • +
  • {{anch("Inteiros")}}
    • +
  • {{anch("Objeto literal")}}
    • +
  • {{anch("String literal")}}
    • +
+ +

Array literal

+ +

Um array literal é 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 ser expressos em decimal (base 10), hexadecimal (base 16), octal (base 8) e binário (base 2).

+ +
    +
  • Decimal inteiro literal consiste em uma sequência de dígitos sem um 0 (zero).
    • +
  • 0 (zero) em um inteiro literal indica que ele está em octal. Octal pode incluir somente os dígitos 0-7.
    • +
  • 0x (ou 0X) indica um hexadecimal. Inteiros hexadecimais podem incluir dígitos (0-9) e as letras a-f e A-F.
    • +
  • 0b (ou 0B) indica um binário. Inteiros binário podem incluir apenas os dígitos 0 e 1.
    • +
+ +

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:

+ +
    +
  • Um inteiro decimal que pode ter sinal (precedido por "+" ou "-"),
    • +
  • Um ponto decimal ("."),
    • +
  • Uma fração (outro número decimal),
    • +
  • Um expoente.
    • +
+ +

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 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 carro define uma propriedade, meuCarro, e atribui para ele uma nova string, "Punto"; o segundo elemento, a propriedade getCarro, é imediatamente atribuído o resultado de chamar uma função (tipoCarro("Fiat")); o terceiro elemento, a propriedade especial, usa uma variável existente (vendas).

+ +
var vendas = "Toyota";
+
+function tipoCarro(nome) {
+  if (nome == "Fiat") {
+    return nome;
+  } else {
+    return "Desculpa, não vendemos carros " + nome + ".";
+  }
+}
+
+var carro = { meuCarro: "Punto", getCarro: tipoCarro("Fiat"), especial: vendas };
+
+console.log(carro.meuCarro);   // Punto
+console.log(carro.getCarro);  // Fiat
+console.log(carro.especial); // 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 carro = { carros: {a: "Saab", "b": "Jeep"}, 7: "Mazda" };
+
+console.log(carro.carros.b); // Jeep
+console.log(carro[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
+
+ +

 

+ +

Expressão Regex Literal

+ +

Um regex literal é um padrão entre barras. A seguir um exemplo de regex literal.

+ +
var re = /ab+c/;
+ +

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 poema =
+"Rosas são vermelhas\n\
+Violetas são azuis,\n\
+Esse seu sorriso\n\
+é o que me seduz. (Lucas Pedrosa)"
+
+ +

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/web/javascript/guide/igualdade/index.html b/files/pt-br/web/javascript/guide/igualdade/index.html deleted file mode 100644 index 57f1c2fdcc..0000000000 --- a/files/pt-br/web/javascript/guide/igualdade/index.html +++ /dev/null @@ -1,259 +0,0 @@ ---- -title: Igualdade em JavaScript -slug: Web/JavaScript/Guide/Igualdade -translation_of: Web/JavaScript/Equality_comparisons_and_sameness -translation_of_original: Web/JavaScript/Guide/Sameness ---- -

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/web/javascript/guide/inheritance_and_the_prototype_chain/index.html b/files/pt-br/web/javascript/guide/inheritance_and_the_prototype_chain/index.html deleted file mode 100644 index d6aad53066..0000000000 --- a/files/pt-br/web/javascript/guide/inheritance_and_the_prototype_chain/index.html +++ /dev/null @@ -1,193 +0,0 @@ ---- -title: Herança e cadeia de protótipos (prototype chain) -slug: Web/JavaScript/Guide/Inheritance_and_the_prototype_chain -tags: - - herança intermediário JavaScript OOP -translation_of: Web/JavaScript/Inheritance_and_the_prototype_chain ---- -
{{jsSidebar("Advanced")}}
- -

JavaScript é um pouco confuso para desenvolvedores com experiência em linguagens baseadas em classes (como Java ou C++), porque é dinâmico e não dispõe de uma implementação de uma class (a palavra-chave class foi introduzida no ES2015, mas é syntax sugar, o JavaScript permanece baseado em prototype).

- -

Quando se trata de herança, o JavaScript tem somente um construtor: objetos. Cada objeto tem um link interno para um outro objeto chamado prototype. Esse objeto prototype também tem um atributo prototype, e assim por diante até o que o valor null seja encontrado como sendo o seu prototype. null que, por definição, não tem prototype, e age como um link final nesta cadeia de protótipos (prototype chain).

- -

Isto muitas vezes é considerado como um dos pontos fracos do JavaScript, mas o modelo de herança prototipal é de fato mais potente do que o modelo clássico. É, por exemplo, relativamente trivial construir um "modelo clássico" (como na implementaçao de class), enquanto o contrário é uma tarefa muito mais difícil.

- -

1 N. da T: Como em uma implementação de fila em C, por exemplo.

- -

Herança com o encadeamento de protótipos

- -

Propriedades de heranças

- -

Objetos em JavaScript são "sacos" dinâmicos de propriedades (a que se refere as próprias propriedades) e cada um tem um link para um objeto prototype. Eis o que acontece quando se tenta acessar uma propriedade:

- -
// Vamos criar um objeto o da função f com suas próprias propriedades a e b:
-let f = function () {
-   this.a = 1;
-   this.b = 2;
-}
-let o = new f(); // {a: 1, b: 2}
-
-// adicionar propriedades no protótipo da função f
-f.prototype.b = 3;
-f.prototype.c = 4;
-
-// não defina o protótipo f.prototype = {b: 3, c: 4}; isso vai quebrar a cadeia de protótipos
-// o. [[Prototype]] possui propriedades bec.
-// o. [[Prototype]]. [[Prototype]] é Object.prototype.
-// Finalmente, o. [[Prototype]]. [[Prototype]]. [[Prototype]] é nulo.
-// Este é o fim da cadeia de protótipos, como nulo,
-// por definição, não possui [[Prototype]].
-// Assim, a cadeia completa de protótipos se parece com:
-// {a: 1, b: 2} ---> {b: 3, c: 4} ---> Object.prototype ---> null dfdf
-
-console.log(o.a); // 1
-// Existe uma propriedade 'a' no objeto o? Sim, e seu valor é 1.
-
-console.log(o.b); // 2
-// Existe uma propriedade própria 'b' em o? Sim, e seu valor é 2.
-// O protótipo também tem uma propriedade 'b', mas não é visitado.
-// Isso é chamado de sombreamento de propriedade(Property Shadowing)
-
-console.log(o.c); // 4
-// Existe uma propriedade própria 'c' em o? Não, verifique seu protótipo.
-// Existe uma propriedade 'c' própria em o. [[Prototype]]? Sim, seu valor é 4.
-
-console.log(o.d); // undefined
-// Existe uma propriedade 'd' própria em o? Não, verifique seu prototype.
-// Existe uma propriedade 'd' em o. [[Prototype]]? Não, verifique seu prototype.
-// o. [[Prototype]]. [[Prototype]] é Object.prototype e não há propriedade 'd' por padrão, verifique seu prototype.
-// o. [[Prototype]]. [[Prototype]]. [[Prototype]] é nulo, pare de pesquisar,
-// nenhuma propriedade encontrada, retorne indefinido.
-
- -

Code Link

- -

Atribuir uma propriedade a um objeto cria uma propriedade nele. A única exceção às regras de obtenção e definição de comportamento é quando há uma propriedade herdada com um getter or a setter.

- -

Herença de "métodos"

- -

JavaScript não tem "métodos" como os que conhecemos em linguagens baseadas em classes. Em JavaScript, qualquer função pode ser adicionada em um objeto em forma de propriedade. Uma herança de funções age como a herança de quaisquers outras propriedades que não sejam funções, e podemos inclusive realizar sobre-escrita de função(method overriding)!

- -

Quando uma herança de função é executada, o valor de this aponta para o objeto que herdou as propriedades, não para o objeto prototype onde as propriedades foram escritas originalmente.

- -
var o = {
-  a: 2,
-  m: function(b){
-    return this.a + 1;
-  }
-};
-
-console.log(o.m()); // 3
-// Ao chamar 'o.m' neste caso, "this" refere-se a 'o'
-
-var p = Object.create(o);
-// 'p' é um objeto que foi herdado de 'o'
-
-p.a = 12; // cria uma propriedade 'a' no objeto 'p'
-console.log(p.m()); // 13
-// Ao chamar 'p.m', 'this' refere-se a 'p'
-// Então, quando 'p' herda a função de 'm' de 'o', 'this.a' representa 'p.a' que é a própria propriedade 'a' de 'p'
-
-
- -

Maneiras de criar objetos e resultados dos protótipos encadeados

- -

Objetos criados com sintaxe de construtores

- -
var o = {a: 1};
-
-// O recém-criado objecto 'o' tem Object.prototype como o seu [[Prototype]]
-// 'o' não tem não tem uma propriedade chamada 'hasOwnProperty'
-// hasOwnProperty é uma propriedade própria de Object.prototype. Então 'o' herda hasOwnProperty de Object.prototype
-
-// Object.prototype tem null como seu protótipo.
-// o ---> Object.prototype ---> null
-
-var a = ["yo", "whadup", "?"];
-
-// Arrays herdam de Array.prototype (que tem métodos como indexOf, forEach, etc.)
-// A cadeia de protótipos se parece com isso:
-// a ---> Array.prototype ---> Object.prototype ---> null
-
-function f(){
-  return 2;
-}
-
-// Funções herdam de Function.prototype (que tem métodos como call, bind, etc.)
-// f ---> Function.prototype ---> Object.prototype ---> null
-
- -

Com um construtor

- -

Um "construtor" em JavaScript é "somente" uma função que passa a ser chamada com o operador new.

- -
function Graph() {
-  this.vertexes = [];
-  this.edges = [];
-}
-
-Graph.prototype = {
-  addVertex: function(v){
-    this.vertexes.push(v);
-  }
-};
-
-var g = new Graph();
-// 'g' é um objeto com as propriedades 'vertexes' e 'edges'.
-// g.[[Prototype]] é o valor de Graph.prototype quando new Graph() é executada.
-
- -

Com Object.create

- -

ECMAScript 5 introduziu o novo método: Object.create. Invocando este método podemos criar novos objetos. O prototype destes novos objetos é o primeiro argumento do método:

- -
var a = {a: 1};
-// a ---> Object.prototype ---> null
-
-var b = Object.create(a);
-// b ---> a ---> Object.prototype ---> null
-console.log(b.a); // 1 (inherited)
-
-var c = Object.create(b);
-// c ---> b ---> a ---> Object.prototype ---> null
-
-var d = Object.create(null);
-// d ---> null
-console.log(d.hasOwnProperty); // undefined, porque não herda de Object.prototype
-
- -
-

Performace

- -

O tempo de pesquisa para as propriedades que estão no alto da cadeia de protótipos pode ter um impacto negativo no desempenho, e isso pode ser significativo no código em que o desempenho é crítico. Além disso, tentando acessar propriedades inexistentes vai sempre atravessar a cadeia cheia do protótipo (full prototype chain).

- -

Porém, quando estamos interagindo com as propriedades de um objeto, toda propriedade que está na cadeia do prototype (prototype chain) vai ser enumerada.

- -

Para verificar se um objeto tem uma propriedade definida em si mesmo e não em algum lugar na sua cadeia de protótipo, é necessário usar o método hasOwnProperty que todos os objetos herdam do Object.prototype.

- -

hasOwnProperty é a única alternativa em JavaScript que lida com propriedades sem atravessar a cadeia de protótipos.

- - -
Observação: Não é suficiente apenas verificar se o valor da propriedade é undefined para saber se ela existe. A propriedade pode muito bem existir e não ter sido inicializada, sendo assim o seu valor undefined.
- -
-

Má Pratica: Estender protótipos nativos

- -

Um erro frequentemente cometido por programadores é estender um Object.prototype.

- -

Esta técnica é chamada de "monkey patching" e quebra o encapsulamento. Não existe uma boa razão para desorganizar tipos nativos do JavaScript para adicionar uma nova funcionalidade ao mesmo. 

- -

O único bom motivo para estender um protótipo nativo do JavaScript é para dar suporte a novas "features" do JavaScript; por exemplo: Array.forEach, etc.

-
- -
-

Conclusão

- -

É essencial entender bem  "prototypal inheritance" antes de escrever códigos complexos. Tome cuidado com o tamanho da sua cadeia de protótipos, quebre a cadeia caso necessário para evitar problemas de performace. Nunca estenda protótipos nativos a menos que seja para conseguir compatibilidade com novas "features" do JavaScript.

- - -
-
- -

{{ languages( {"zh-cn": "zh-cn/JavaScript/Guide/Inheritance_and_the_prototype_chain" } ) }}

diff --git a/files/pt-br/web/javascript/guide/iteratores_e_geradores/index.html b/files/pt-br/web/javascript/guide/iteratores_e_geradores/index.html deleted file mode 100644 index 13a9b87f11..0000000000 --- a/files/pt-br/web/javascript/guide/iteratores_e_geradores/index.html +++ /dev/null @@ -1,161 +0,0 @@ ---- -title: Iteratores e geradores -slug: Web/JavaScript/Guide/Iteratores_e_geradores -tags: - - Generators - - Guia(2) - - Intermediario(2) - - Iteradores - - JavaScript -translation_of: Web/JavaScript/Guide/Iterators_and_Generators ---- -
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Details_of_the_Object_Model", "Web/JavaScript/Guide/Meta_programming")}}
- -

Processar cada item em uma coleção é uma operação muito comum. O JavaScript disponibiliza uma série de maneiras de iterar sobre uma coleção, desde um simples laço {{jsxref("Statements/for","for")}}, até um {{jsxref("Global_Objects/Array/map","map()")}} e também com o {{jsxref("Global_Objects/Array/filter","filter()")}}. Iteradores e Geradores trazem o conceito da interação ocorrer diretamente no núcleo da linguagem e prover um mecanismo para a customização do comportamento dos laços {{jsxref("Statements/for...of","for...of")}}.

- -

Para detalhes, também veja:

- -
    -
  • Protocolos de iteração
    • -
  • {{jsxref("Statements/for...of","for...of")}}
    • -
  • {{jsxref("Statements/function*","function*")}} e {{jsxref("Generator")}}
    • -
  • {{jsxref("Operators/yield","yield")}} e {{jsxref("Operators/yield*","yield*")}}
    • -
- -

Iterators (Iteradores)

- -

Um objeto é um iterator (iterador) quando sabe como acessar itens numa coleção, um por vez, enquanto mantém rastreada a posição atual em uma dada sequência. Em JavaScript um iterator é um objeto que oferece o método next(), o qual retorna o próximo item da sequência. Este método retorna um objeto com duas propriedades: done e value.

- -

Uma vez criado, um objeto iterator pode ser usado explicitamente ao chamar repetidas vezes o método next().

- -
const makeIterator = (array) => {
-
-let nextIndex = 0;
-
-return {
- next : () => {
-   return nextIndex < array.length ?
-    {value: array[nextIndex ++], done: false} :
-    {done: true};
-   }
- }
-};
- -

Uma vez inicializado, o método next() pode ser chamado para acessar os pares chave/valor do objeto da vez.

- -
let it = makeIterator(['yo', 'ya']);
-console.log(it.next().value); // 'yo'
-console.log(it.next().value); // 'ya'
-console.log(it.next().done);  // true
- -

Iterables (Iteráveis)

- -

Um objeto é iterável (iterable), se ele define seu comportamento de iteração, como no caso de quais valores percorridos em um laço do tipo {{jsxref("Statements/for...of", "for..of")}}. Alguns tipos embutidos, como o {{jsxref("Array")}}, ou o {{jsxref("Map")}}, têm um comportamento iterável padrão, enquanto outros tipos (como o{{jsxref("Object")}}) não possuem.

- -

Para que um objeto seja iterable, o objeto precisa implemntar o método @@iterator, significando que o objeto (ou um dos objetos na cadeia de prototipagem  - prototype chain) precisa ter uma propriedade com uma chave {{jsxref("Symbol.iterator")}}:

- -

Iterables definidos pelo usuário

- -

Nós podemos fazer, criar, os nossos próprios iteráveis como aqui:

- -
var myIterable = {}
-myIterable[Symbol.iterator] = function* () {
-    yield 1;
-    yield 2;
-    yield 3;
-};
-[...myIterable] // [1, 2, 3]
-
- -

Iterables Built-in (Iteráveis Embutidos)

- -

{{jsxref("String")}}, {{jsxref("Array")}}, {{jsxref("TypedArray")}}, {{jsxref("Map")}} e {{jsxref("Set")}} são iteráveis embutidos, pois o protótipo dos objetos de todos eles têm o método {{jsxref("Symbol.iterator")}}.

- -

Syntaxes expecting iterables

- -

Algumas declarações e expressões esperam por iteradores, por exemplo o {{jsxref("Statements/for...of","for-of")}} loops, {{jsxref("Operators/Spread_operator","spread operator","","true")}}, {{jsxref("Operators/yield*","yield*")}}, e {{jsxref("Operators/Destructuring_assignment","destructuring assignment","","true")}}.

- -
for(let value of ["a", "b", "c"]){
-    console.log(value)
-}
-// "a"
-// "b"
-// "c"
-
-[..."abc"] // ["a", "b", "c"]
-
-function* gen(){
-  yield* ["a", "b", "c"]
-}
-
-gen().next() // { value:"a", done:false }
-
-[a, b, c] = new Set(["a", "b", "c"])
-a // "a"
-
-
- -

Generators

- -

Enquanto os iteradores são ferramentas muito úteis, sua criação requer um cuidado devido a necessidade de manter explicito seu estado interno. {{jsxref("Global_Objects/Generator","Generators","","true")}} provê uma alternativa poderosa: eles te permitem definir um algorítimo iterativo escrevendo uma função simples que pode manter seu estado próprio.

- -

Generator é um tipo especial de função que trabalha como uma factory para iteradores. A função vira um generator se ela contém uma ou mais expressões {{jsxref("Operators/yield","yield")}} e se ela usa a sintaxe {{jsxref("Statements/function*","function*")}}.

- -
function* idMaker(){
-  var index = 0;
-  while(true)
-    yield index++;
-}
-
-var gen = idMaker();
-
-console.log(gen.next().value); // 0
-console.log(gen.next().value); // 1
-console.log(gen.next().value); // 2
-// ...
- -

Generators avançados

- -

Generators computam seus valores "yielded" por demanda, que os permitem representar sequencias de forma eficiente que costumam ser trabalhosas ao serem computadas, ou até sequencias infinitas como demonstradas acima.

- -

O método {{jsxref("Global_Objects/Generator/next","next()")}} também aceita um valor que pode ser usado para modificar o estado interno de um generator. O valor passado pro next() será tratado como o resultado da última expressão yield que pausou o generator.

- -

Aqui um gerador de sequencia fibonacci usando next(x) pra restartar a sequencia:

- -
function* fibonacci(){
-  var fn1 = 1;
-  var fn2 = 1;
-  while (true){
-    var current = fn2;
-    fn2 = fn1;
-    fn1 = fn1 + current;
-    var reset = yield current;
-    if (reset){
-        fn1 = 1;
-        fn2 = 1;
-    }
-  }
-}
-
-var sequence = fibonacci();
-console.log(sequence.next().value);     // 1
-console.log(sequence.next().value);     // 1
-console.log(sequence.next().value);     // 2
-console.log(sequence.next().value);     // 3
-console.log(sequence.next().value);     // 5
-console.log(sequence.next().value);     // 8
-console.log(sequence.next().value);     // 13
-console.log(sequence.next(true).value); // 1
-console.log(sequence.next().value);     // 1
-console.log(sequence.next().value);     // 2
-console.log(sequence.next().value);     // 3
- -
Nota: Como um ponto de interesse, chamando next(undefined) é o mesmo que chamar next(). Entretanto, estartar um novo generator com qualquer valor que não seja undefined na chamada next() terá TypeError exception.
- -

Você pode forçar um generator a lançar uma exceção chamando o seu método {{jsxref("Global_Objects/Generator/throw","throw()")}}  e passando o valor da exceção que ele deve lançar. Essa exceção será lançada do contexto suspenso atual do generator, como se o yield atualmente suspenso fosse um throw.

- -

Se um yield não for encontrado durante o processo de lançamento de um thrown exception, então o exception será propagado através da chamada do throw(), e pra subsequente chamada do next() que terá a propriedade done resultando em true.

- -

Generators tem o método {{jsxref("Global_Objects/Generator/return","return(value)")}} que retorna o valor pego e finaliza o generator.

- -

{{PreviousNext("Web/JavaScript/Guide/Details_of_the_Object_Model", "Web/JavaScript/Guide/Meta_programming")}}

diff --git a/files/pt-br/web/javascript/guide/iterators_and_generators/index.html b/files/pt-br/web/javascript/guide/iterators_and_generators/index.html new file mode 100644 index 0000000000..13a9b87f11 --- /dev/null +++ b/files/pt-br/web/javascript/guide/iterators_and_generators/index.html @@ -0,0 +1,161 @@ +--- +title: Iteratores e geradores +slug: Web/JavaScript/Guide/Iteratores_e_geradores +tags: + - Generators + - Guia(2) + - Intermediario(2) + - Iteradores + - JavaScript +translation_of: Web/JavaScript/Guide/Iterators_and_Generators +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Details_of_the_Object_Model", "Web/JavaScript/Guide/Meta_programming")}}
+ +

Processar cada item em uma coleção é uma operação muito comum. O JavaScript disponibiliza uma série de maneiras de iterar sobre uma coleção, desde um simples laço {{jsxref("Statements/for","for")}}, até um {{jsxref("Global_Objects/Array/map","map()")}} e também com o {{jsxref("Global_Objects/Array/filter","filter()")}}. Iteradores e Geradores trazem o conceito da interação ocorrer diretamente no núcleo da linguagem e prover um mecanismo para a customização do comportamento dos laços {{jsxref("Statements/for...of","for...of")}}.

+ +

Para detalhes, também veja:

+ +
    +
  • Protocolos de iteração
    • +
  • {{jsxref("Statements/for...of","for...of")}}
    • +
  • {{jsxref("Statements/function*","function*")}} e {{jsxref("Generator")}}
    • +
  • {{jsxref("Operators/yield","yield")}} e {{jsxref("Operators/yield*","yield*")}}
    • +
+ +

Iterators (Iteradores)

+ +

Um objeto é um iterator (iterador) quando sabe como acessar itens numa coleção, um por vez, enquanto mantém rastreada a posição atual em uma dada sequência. Em JavaScript um iterator é um objeto que oferece o método next(), o qual retorna o próximo item da sequência. Este método retorna um objeto com duas propriedades: done e value.

+ +

Uma vez criado, um objeto iterator pode ser usado explicitamente ao chamar repetidas vezes o método next().

+ +
const makeIterator = (array) => {
+
+let nextIndex = 0;
+
+return {
+ next : () => {
+   return nextIndex < array.length ?
+    {value: array[nextIndex ++], done: false} :
+    {done: true};
+   }
+ }
+};
+ +

Uma vez inicializado, o método next() pode ser chamado para acessar os pares chave/valor do objeto da vez.

+ +
let it = makeIterator(['yo', 'ya']);
+console.log(it.next().value); // 'yo'
+console.log(it.next().value); // 'ya'
+console.log(it.next().done);  // true
+ +

Iterables (Iteráveis)

+ +

Um objeto é iterável (iterable), se ele define seu comportamento de iteração, como no caso de quais valores percorridos em um laço do tipo {{jsxref("Statements/for...of", "for..of")}}. Alguns tipos embutidos, como o {{jsxref("Array")}}, ou o {{jsxref("Map")}}, têm um comportamento iterável padrão, enquanto outros tipos (como o{{jsxref("Object")}}) não possuem.

+ +

Para que um objeto seja iterable, o objeto precisa implemntar o método @@iterator, significando que o objeto (ou um dos objetos na cadeia de prototipagem  - prototype chain) precisa ter uma propriedade com uma chave {{jsxref("Symbol.iterator")}}:

+ +

Iterables definidos pelo usuário

+ +

Nós podemos fazer, criar, os nossos próprios iteráveis como aqui:

+ +
var myIterable = {}
+myIterable[Symbol.iterator] = function* () {
+    yield 1;
+    yield 2;
+    yield 3;
+};
+[...myIterable] // [1, 2, 3]
+
+ +

Iterables Built-in (Iteráveis Embutidos)

+ +

{{jsxref("String")}}, {{jsxref("Array")}}, {{jsxref("TypedArray")}}, {{jsxref("Map")}} e {{jsxref("Set")}} são iteráveis embutidos, pois o protótipo dos objetos de todos eles têm o método {{jsxref("Symbol.iterator")}}.

+ +

Syntaxes expecting iterables

+ +

Algumas declarações e expressões esperam por iteradores, por exemplo o {{jsxref("Statements/for...of","for-of")}} loops, {{jsxref("Operators/Spread_operator","spread operator","","true")}}, {{jsxref("Operators/yield*","yield*")}}, e {{jsxref("Operators/Destructuring_assignment","destructuring assignment","","true")}}.

+ +
for(let value of ["a", "b", "c"]){
+    console.log(value)
+}
+// "a"
+// "b"
+// "c"
+
+[..."abc"] // ["a", "b", "c"]
+
+function* gen(){
+  yield* ["a", "b", "c"]
+}
+
+gen().next() // { value:"a", done:false }
+
+[a, b, c] = new Set(["a", "b", "c"])
+a // "a"
+
+
+ +

Generators

+ +

Enquanto os iteradores são ferramentas muito úteis, sua criação requer um cuidado devido a necessidade de manter explicito seu estado interno. {{jsxref("Global_Objects/Generator","Generators","","true")}} provê uma alternativa poderosa: eles te permitem definir um algorítimo iterativo escrevendo uma função simples que pode manter seu estado próprio.

+ +

Generator é um tipo especial de função que trabalha como uma factory para iteradores. A função vira um generator se ela contém uma ou mais expressões {{jsxref("Operators/yield","yield")}} e se ela usa a sintaxe {{jsxref("Statements/function*","function*")}}.

+ +
function* idMaker(){
+  var index = 0;
+  while(true)
+    yield index++;
+}
+
+var gen = idMaker();
+
+console.log(gen.next().value); // 0
+console.log(gen.next().value); // 1
+console.log(gen.next().value); // 2
+// ...
+ +

Generators avançados

+ +

Generators computam seus valores "yielded" por demanda, que os permitem representar sequencias de forma eficiente que costumam ser trabalhosas ao serem computadas, ou até sequencias infinitas como demonstradas acima.

+ +

O método {{jsxref("Global_Objects/Generator/next","next()")}} também aceita um valor que pode ser usado para modificar o estado interno de um generator. O valor passado pro next() será tratado como o resultado da última expressão yield que pausou o generator.

+ +

Aqui um gerador de sequencia fibonacci usando next(x) pra restartar a sequencia:

+ +
function* fibonacci(){
+  var fn1 = 1;
+  var fn2 = 1;
+  while (true){
+    var current = fn2;
+    fn2 = fn1;
+    fn1 = fn1 + current;
+    var reset = yield current;
+    if (reset){
+        fn1 = 1;
+        fn2 = 1;
+    }
+  }
+}
+
+var sequence = fibonacci();
+console.log(sequence.next().value);     // 1
+console.log(sequence.next().value);     // 1
+console.log(sequence.next().value);     // 2
+console.log(sequence.next().value);     // 3
+console.log(sequence.next().value);     // 5
+console.log(sequence.next().value);     // 8
+console.log(sequence.next().value);     // 13
+console.log(sequence.next(true).value); // 1
+console.log(sequence.next().value);     // 1
+console.log(sequence.next().value);     // 2
+console.log(sequence.next().value);     // 3
+ +
Nota: Como um ponto de interesse, chamando next(undefined) é o mesmo que chamar next(). Entretanto, estartar um novo generator com qualquer valor que não seja undefined na chamada next() terá TypeError exception.
+ +

Você pode forçar um generator a lançar uma exceção chamando o seu método {{jsxref("Global_Objects/Generator/throw","throw()")}}  e passando o valor da exceção que ele deve lançar. Essa exceção será lançada do contexto suspenso atual do generator, como se o yield atualmente suspenso fosse um throw.

+ +

Se um yield não for encontrado durante o processo de lançamento de um thrown exception, então o exception será propagado através da chamada do throw(), e pra subsequente chamada do next() que terá a propriedade done resultando em true.

+ +

Generators tem o método {{jsxref("Global_Objects/Generator/return","return(value)")}} que retorna o valor pego e finaliza o generator.

+ +

{{PreviousNext("Web/JavaScript/Guide/Details_of_the_Object_Model", "Web/JavaScript/Guide/Meta_programming")}}

diff --git a/files/pt-br/web/javascript/guide/lacos_e_iteracoes/index.html b/files/pt-br/web/javascript/guide/lacos_e_iteracoes/index.html deleted file mode 100644 index fcf7437612..0000000000 --- a/files/pt-br/web/javascript/guide/lacos_e_iteracoes/index.html +++ /dev/null @@ -1,333 +0,0 @@ ---- -title: Laços e iterações -slug: Web/JavaScript/Guide/Lacos_e_iteracoes -translation_of: Web/JavaScript/Guide/Loops_and_iteration ---- -
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}
- -
-

Laços oferecem um jeito fácil e rápido de executar uma ação repetidas vezes. Este capítulo do guia do JavaScript abordará diferentes formas de iterações existentes no JavaScript.

-
- -

Você pode pensar em um laço de repetição como um jogo onde você manda o seu personagem andar X passos em uma direção e Y passos em outra; por exemplo, a ideia "vá 5 passos para leste" pode ser expressa em um laço desta forma:

- -
var passo;
-for (passo = 0; passo < 5; passo++) {
-  // Executa 5 vezes, com os valores de passos de 0 a 4.
-  console.log('Ande um passo para o leste');
-}
-
- -

Existem várias formas diferentes de laços, mas eles essencialmente fazem a mesma coisa: repetir uma ação múltiplas vezes ( inclusive você poderá repetir 0 vezes). Os vários mecanismos diferentes de laços oferecem diferentes formas de determinar quando este irá começar ou terminar. Há várias situações em que é mais fácil resolver um problema utilizando um determinado tipo de laço do que outros.

- -

Os possíveis laços de repetição  em JavaScript:

- -
    -
  • {{anch("for_statement")}}
    • -
  • {{anch("do...while_statement")}}
    • -
  • {{anch("while_statement")}}
    • -
  • {{anch("label_statement")}}
    • -
  • {{anch("break_statement")}}
    • -
  • {{anch("continue_statement")}}
    • -
  • {{anch("for...in_statement")}}
    • -
  • {{anch("for...of_statement")}}
    • -
- -

Declaração for

- -

Um laço for é repetido até que a condição especificada seja falsa. O laço for no JavaScript é similar ao Java e C. Uma declaração for é feita da seguinte maneira:

- -
for ([expressaoInicial]; [condicao]; [incremento])
-  declaracao
-
- -

Quando um for é executado, ocorre o seguinte:

- -
    -
  1. A expressão expressao Inicial é inicializada e, caso possível, é executada. Normalmente essa expressão inicializa um ou mais contadores, mas a sintaxe permite expressões de qualquer grau de complexidade. Podendo conter também declaração de variáveis.
    2. -
  2. A expressão condicao é avaliada. caso o resultado de condicao seja verdadeiro, o laço é executado. Se o valor de condicao é falso, então o laço terminará. Se a expressão condicao é omitida, a condicao é assumida como verdadeira.
    3. -
  3.  A instrução é executada. Para executar múltiplas declarações, use uma declaração em bloco ({ ... }) para agrupá-las.
    4. -
  4. A atualização da expressão incremento, se houver, executa, e retorna o controle para o passo 2.
    5. -
- -

Exemplo

- -

A função a seguir contém uma declaração for que contará o número de opções selecionadas em uma lista (um elemento {{HTMLElement("select")}} permite várias seleções). Dentro do for é declarado uma váriavel i inicializada com zero. A declaração for verifica se i é menor que o número de opções no elemento <select>, executa sucessivas declaração  if, e incrementa i de um em um a cada passagem pelo laço.

- -
<form name="selectForm">
-  <p>
-    <label for="tipoMusica">Escolha alguns tipos de música, em seguida, clique no botão abaixo:</label>
-    <select id="tipoMusica" name="tipoMusica" multiple="multiple">
-      <option selected="selected">R&B</option>
-      <option>Jazz</option>
-      <option>Blues</option>
-      <option>New Age</option>
-      <option>Classico</option>
-      <option>Ópera</option>
-    </select>
-  </p>
-  <p><input id="btn" type="button" value="Quantos foram selecionados?" /></p>
-</form>
-
-<script>
-function howMany(selectObject) {
-  var numeroSelecionadas = 0;
-  for (var i = 0; i < selectObject.options.length; i++) {
-    if (selectObject.options[i].selected) {
-      numeroSelecionadas++;
-    }
-  }
-  return numeroSelecionadas;
-}
-
-var btn = document.getElementById("btn");
-btn.addEventListener("click", function(){
-  alert('Total de opções selecionadas: ' + howMany(document.selectForm.tipoMusica))
-});
-</script>
-
-
- -

Declaração do...while

- -

A instrução do...while repetirá até que a condição especificada seja falsa.

- -
do
-  declaracao
-while (condicao);
-
- -

A instrução será executada uma vez antes da condição ser verificada. Para executar multiplas instruções utilize uma declaração de bloco ({ ... }) para agrupá-las. Caso a condicao seja verdadeira, então o laço será executado novamente. Ao final de cada execução, a condicao é verificada. Quando a condição contida no while for falsa a execução do laço é terminada e o controle é passado para a instrução seguinte a do...while.

- -

Exemplo

- -

No exemplo a seguir, o laço é executado pelo menos uma vez e irá executar até que i seja menor que 5.

- -
do {
-  i += 1;
-  console.log(i);
-} while (i < 5);
- -

Declaração while

- -

Uma declaração while executa suas instruções, desde que uma condição especificada seja avaliada como verdadeira. Segue uma declaração while: 

- -
while (condicao)
-  declaracao
-
- -

Se a condição se tornar falsa,  a declaração dentro do laço para a execução e o controle é passado para a instrução após o laço.

- -

O teste da condição ocorre antes que o laço seja executado. Desta forma se a condição for verdadeira o laço executará e testará a condição novamente. Se a condição for falsa o laço termina e passa o controle para as instruções após o laço.

- -

Para executar múltiplas declarações, use uma declaração em bloco ({ ... }) para agrupar essas declarações.

- -

Exemplo 1

- -

O while a seguir executará enquanto n for menor que três:

- -
n = 0;
-x = 0;
-while (n < 3) {
-  n++;
-  x += n;
-}
-
- -

A cada iteração, o laço incrementa n e adiciona este valor para x. Portanto, x e n recebem os seguintes valores:

- -
    -
  • Depois de executar pela primeira vez: n = 1 e x = 1
    • -
  • Depois da segunda vez: n = 2 e x = 3
    • -
  • Depois da terceira vez: n = 3 e x = 6
    • -
- -

Depois de executar pela terceira vez, a condição n < 3 não será mais verdadeira, então o laço encerrará.

- -

Exemplo 2

- -

Evite laços infinitos. Tenha certeza que a condição do laço eventualmente será falsa; caso contrário, o laço nunca terminará. O while a seguir executará para sempre pois sua condição nunca será falsa:

- -
while (true) {
-  console.log("Olá, mundo");
-}
- -

Declaração label

- -

Um label provê um identificador que permite que este seja referenciado em outro lugar no seu programa. Por exemplo, você pode usar uma label para identificar um laço, e então usar break ou continue para indicar quando o programa deverá interromper o laço ou continuar sua execução.

- -

Segue a sintaxe da instrução label:

- -
label : declaracao
-
- -

Um label pode usar qualquer idenficador que não seja uma palavra reservada do JavaScript. Você pode identificar qualquer instrução com um label.

- -

Exemplo

- -

Neste exemplo, o label markLoop idenfica um laço while.

- -
markLoop:
-while (theMark == true) {
-   facaAlgo();
-}
- -

Declaração break

- -

Use break para terminar laços, switch, ou um conjunto que utiliza label.

- -
    -
  • Quando você utiliza break sem um label, ele encerrará imediatamente o laço mais interno while, do-while, for, ou switch e transferirá o controle para a próxima instrução.
    • -
  • Quando você utiliza break com um label, ele encerrará o label específico.
    • -
- -

Segue a sintaxe do break:

- -
    -
  1. break;
    2. -
  2. break label;
    3. -
- -

Na primeira opção será encerrado o laço de repetição mais interno ou switch. Já na segunda opção será encerrada o bloco de código referente a label.

- -

Exemplo 1

- -

O exemplo a seguir percorre os elementos de um array até que ele encontre o índice do elemento que possui o valor contido em theValue:

- -
for (i = 0; i < a.length; i++) {
-  if (a[i] == theValue) {
-    break;
-  }
-}
- -

Exemplo 2: Utilizando break em label

- -
var x = 0;
-var z = 0
-labelCancelaLaco: while (true) {
-  console.log("Laço exterior: " + x);
-  x += 1;
-  z = 1;
-  while (true) {
-    console.log("Laço interior: " + z);
-    z += 1;
-    if (z === 10 && x === 10) {
-      break labelCancelaLaco;
-    } else if (z === 10) {
-      break;
-    }
-  }
-}
-
- -

Declaração continue

- -

A declaração continue pode ser usada para reiniciar uma instrução while, do-while, for, ou label.

- -
    -
  • Quando você utiliza continue sem uma label, ele encerrará a iteração atual mais interna de uma instrução while, do-while, ou for e continuará a execução do laço a partir da próxima iteração. Ao contrário da instrução break, continue não encerra a execução completa do laço. Em um laço while, ele voltará para a condição. Em um laço for, ele pulará para a expressão de incrementação.
    • -
  • Quando você utiliza continue com uma label, o continue será aplicado ao laço identificado por esta label. 
    • -
- -

Segue a sintaxe do continue:

- -
    -
  1. continue;
    2. -
  2. continue label;
    3. -
- -

Exemplo 1

- -

O exemplo a seguir mostra um laço while utlizando continue que executará quando o valor de i for igual a 3. Desta forma, n recebe os valores um, três, sete, e doze.

- -
i = 0;
-n = 0;
-while (i < 5) {
-  i++;
-  if (i == 3) {
-    continue;
-  }
-  n += i;
-}
-
- -

Exemplo 2

- -

Uma instrução label checkiandj contém uma instrução label checkj. Se o continue for executado, o programa terminará a iteração atual de checkj e começará a próxima iteração. Toda vez que o continue for executado, checkj recomeçará até que a condição do while for falsa. Quando isto ocorrer checkiandj executará até que sua condição seja falsa.

- -

Se o continue estivesse referenciando checkiandj, o programa deveria continuar do topo de checkiandj.

- -
checkiandj:
-  while (i < 4) {
-    console.log(i);
-    i += 1;
-    checkj:
-      while (j > 4) {
-        console.log(j);
-        j -= 1;
-        if ((j % 2) == 0) {
-          continue checkj;
-        }
-        console.log(j + " é estranho.");
-      }
-      console.log("i = " + i);
-      console.log("j = " + j);
-  }
- -

Declaração for...in

- -

A declaração for...in executa iterações a partir de uma variável específica, percorrendo todas as propriedades de um objeto.
- Para cada propriedade distinta, o JavaScript executará uma iteração. Segue a sintaxe:

- -
for (variavel in objeto) {
-  declaracoes
-}
-
- -

Exemplo

- -

A função a seguir recebe em seu argumento um objeto e o nome deste objeto. Então executará uma iteração para cada elemento e retornará uma lista de string, que irá conter o nome da propriedade e seu valor.

- -
function dump_props(obj, obj_name) {
-  var result = "";
-  for (var i in obj) {
-    result += obj_name + "." + i + " = " + obj[i] + "<br>";
-  }
-  result += "<hr>";
-  return result;
-}
-
- -

Para um objeto chamado car com propriedades make e model, o resultado será:

- -
car.make = Ford
-car.model = Mustang
-
- -

Arrays

- -

Embora seja tentador usar esta forma para interagir com os elementos de um Array, a declaração for...in irá retornar o nome pré-definido da propriedade ao invés do seu index numérico. Assim é melhor usar o tradicional for com index numérico quando interagir com arrays, pois o for...in interage com as propriedades definidas pelo programador ao invés dos elementos do array.

- -

Declaração for...of

- -

 A declaração for...of cria uma laço com objetos interativos ((incluindo, {{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, assim por conseguinte ), executando uma iteração para o valor de cada propriedade distinta.

- -
for (variavel of objeto) {
-  declaracoes
-}
- -

O exemplo a seguir mostra a diferença entre o for...of e o for...in. Enquanto o for...in interage com o nome das propriedades, o for...of interage com o valor das propriedades.

- -
let arr = [3, 5, 7];
-arr.foo = "hello";
-
-for (let i in arr) {
-   console.log(i); // logs "0", "1", "2", "foo"
-}
-
-for (let i of arr) {
-   console.log(i); // logs "3", "5", "7"
-}
-
- -

{{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}

diff --git a/files/pt-br/web/javascript/guide/loops_and_iteration/index.html b/files/pt-br/web/javascript/guide/loops_and_iteration/index.html new file mode 100644 index 0000000000..fcf7437612 --- /dev/null +++ b/files/pt-br/web/javascript/guide/loops_and_iteration/index.html @@ -0,0 +1,333 @@ +--- +title: Laços e iterações +slug: Web/JavaScript/Guide/Lacos_e_iteracoes +translation_of: Web/JavaScript/Guide/Loops_and_iteration +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}
+ +
+

Laços oferecem um jeito fácil e rápido de executar uma ação repetidas vezes. Este capítulo do guia do JavaScript abordará diferentes formas de iterações existentes no JavaScript.

+
+ +

Você pode pensar em um laço de repetição como um jogo onde você manda o seu personagem andar X passos em uma direção e Y passos em outra; por exemplo, a ideia "vá 5 passos para leste" pode ser expressa em um laço desta forma:

+ +
var passo;
+for (passo = 0; passo < 5; passo++) {
+  // Executa 5 vezes, com os valores de passos de 0 a 4.
+  console.log('Ande um passo para o leste');
+}
+
+ +

Existem várias formas diferentes de laços, mas eles essencialmente fazem a mesma coisa: repetir uma ação múltiplas vezes ( inclusive você poderá repetir 0 vezes). Os vários mecanismos diferentes de laços oferecem diferentes formas de determinar quando este irá começar ou terminar. Há várias situações em que é mais fácil resolver um problema utilizando um determinado tipo de laço do que outros.

+ +

Os possíveis laços de repetição  em JavaScript:

+ +
    +
  • {{anch("for_statement")}}
    • +
  • {{anch("do...while_statement")}}
    • +
  • {{anch("while_statement")}}
    • +
  • {{anch("label_statement")}}
    • +
  • {{anch("break_statement")}}
    • +
  • {{anch("continue_statement")}}
    • +
  • {{anch("for...in_statement")}}
    • +
  • {{anch("for...of_statement")}}
    • +
+ +

Declaração for

+ +

Um laço for é repetido até que a condição especificada seja falsa. O laço for no JavaScript é similar ao Java e C. Uma declaração for é feita da seguinte maneira:

+ +
for ([expressaoInicial]; [condicao]; [incremento])
+  declaracao
+
+ +

Quando um for é executado, ocorre o seguinte:

+ +
    +
  1. A expressão expressao Inicial é inicializada e, caso possível, é executada. Normalmente essa expressão inicializa um ou mais contadores, mas a sintaxe permite expressões de qualquer grau de complexidade. Podendo conter também declaração de variáveis.
    2. +
  2. A expressão condicao é avaliada. caso o resultado de condicao seja verdadeiro, o laço é executado. Se o valor de condicao é falso, então o laço terminará. Se a expressão condicao é omitida, a condicao é assumida como verdadeira.
    3. +
  3.  A instrução é executada. Para executar múltiplas declarações, use uma declaração em bloco ({ ... }) para agrupá-las.
    4. +
  4. A atualização da expressão incremento, se houver, executa, e retorna o controle para o passo 2.
    5. +
+ +

Exemplo

+ +

A função a seguir contém uma declaração for que contará o número de opções selecionadas em uma lista (um elemento {{HTMLElement("select")}} permite várias seleções). Dentro do for é declarado uma váriavel i inicializada com zero. A declaração for verifica se i é menor que o número de opções no elemento <select>, executa sucessivas declaração  if, e incrementa i de um em um a cada passagem pelo laço.

+ +
<form name="selectForm">
+  <p>
+    <label for="tipoMusica">Escolha alguns tipos de música, em seguida, clique no botão abaixo:</label>
+    <select id="tipoMusica" name="tipoMusica" multiple="multiple">
+      <option selected="selected">R&B</option>
+      <option>Jazz</option>
+      <option>Blues</option>
+      <option>New Age</option>
+      <option>Classico</option>
+      <option>Ópera</option>
+    </select>
+  </p>
+  <p><input id="btn" type="button" value="Quantos foram selecionados?" /></p>
+</form>
+
+<script>
+function howMany(selectObject) {
+  var numeroSelecionadas = 0;
+  for (var i = 0; i < selectObject.options.length; i++) {
+    if (selectObject.options[i].selected) {
+      numeroSelecionadas++;
+    }
+  }
+  return numeroSelecionadas;
+}
+
+var btn = document.getElementById("btn");
+btn.addEventListener("click", function(){
+  alert('Total de opções selecionadas: ' + howMany(document.selectForm.tipoMusica))
+});
+</script>
+
+
+ +

Declaração do...while

+ +

A instrução do...while repetirá até que a condição especificada seja falsa.

+ +
do
+  declaracao
+while (condicao);
+
+ +

A instrução será executada uma vez antes da condição ser verificada. Para executar multiplas instruções utilize uma declaração de bloco ({ ... }) para agrupá-las. Caso a condicao seja verdadeira, então o laço será executado novamente. Ao final de cada execução, a condicao é verificada. Quando a condição contida no while for falsa a execução do laço é terminada e o controle é passado para a instrução seguinte a do...while.

+ +

Exemplo

+ +

No exemplo a seguir, o laço é executado pelo menos uma vez e irá executar até que i seja menor que 5.

+ +
do {
+  i += 1;
+  console.log(i);
+} while (i < 5);
+ +

Declaração while

+ +

Uma declaração while executa suas instruções, desde que uma condição especificada seja avaliada como verdadeira. Segue uma declaração while: 

+ +
while (condicao)
+  declaracao
+
+ +

Se a condição se tornar falsa,  a declaração dentro do laço para a execução e o controle é passado para a instrução após o laço.

+ +

O teste da condição ocorre antes que o laço seja executado. Desta forma se a condição for verdadeira o laço executará e testará a condição novamente. Se a condição for falsa o laço termina e passa o controle para as instruções após o laço.

+ +

Para executar múltiplas declarações, use uma declaração em bloco ({ ... }) para agrupar essas declarações.

+ +

Exemplo 1

+ +

O while a seguir executará enquanto n for menor que três:

+ +
n = 0;
+x = 0;
+while (n < 3) {
+  n++;
+  x += n;
+}
+
+ +

A cada iteração, o laço incrementa n e adiciona este valor para x. Portanto, x e n recebem os seguintes valores:

+ +
    +
  • Depois de executar pela primeira vez: n = 1 e x = 1
    • +
  • Depois da segunda vez: n = 2 e x = 3
    • +
  • Depois da terceira vez: n = 3 e x = 6
    • +
+ +

Depois de executar pela terceira vez, a condição n < 3 não será mais verdadeira, então o laço encerrará.

+ +

Exemplo 2

+ +

Evite laços infinitos. Tenha certeza que a condição do laço eventualmente será falsa; caso contrário, o laço nunca terminará. O while a seguir executará para sempre pois sua condição nunca será falsa:

+ +
while (true) {
+  console.log("Olá, mundo");
+}
+ +

Declaração label

+ +

Um label provê um identificador que permite que este seja referenciado em outro lugar no seu programa. Por exemplo, você pode usar uma label para identificar um laço, e então usar break ou continue para indicar quando o programa deverá interromper o laço ou continuar sua execução.

+ +

Segue a sintaxe da instrução label:

+ +
label : declaracao
+
+ +

Um label pode usar qualquer idenficador que não seja uma palavra reservada do JavaScript. Você pode identificar qualquer instrução com um label.

+ +

Exemplo

+ +

Neste exemplo, o label markLoop idenfica um laço while.

+ +
markLoop:
+while (theMark == true) {
+   facaAlgo();
+}
+ +

Declaração break

+ +

Use break para terminar laços, switch, ou um conjunto que utiliza label.

+ +
    +
  • Quando você utiliza break sem um label, ele encerrará imediatamente o laço mais interno while, do-while, for, ou switch e transferirá o controle para a próxima instrução.
    • +
  • Quando você utiliza break com um label, ele encerrará o label específico.
    • +
+ +

Segue a sintaxe do break:

+ +
    +
  1. break;
    2. +
  2. break label;
    3. +
+ +

Na primeira opção será encerrado o laço de repetição mais interno ou switch. Já na segunda opção será encerrada o bloco de código referente a label.

+ +

Exemplo 1

+ +

O exemplo a seguir percorre os elementos de um array até que ele encontre o índice do elemento que possui o valor contido em theValue:

+ +
for (i = 0; i < a.length; i++) {
+  if (a[i] == theValue) {
+    break;
+  }
+}
+ +

Exemplo 2: Utilizando break em label

+ +
var x = 0;
+var z = 0
+labelCancelaLaco: while (true) {
+  console.log("Laço exterior: " + x);
+  x += 1;
+  z = 1;
+  while (true) {
+    console.log("Laço interior: " + z);
+    z += 1;
+    if (z === 10 && x === 10) {
+      break labelCancelaLaco;
+    } else if (z === 10) {
+      break;
+    }
+  }
+}
+
+ +

Declaração continue

+ +

A declaração continue pode ser usada para reiniciar uma instrução while, do-while, for, ou label.

+ +
    +
  • Quando você utiliza continue sem uma label, ele encerrará a iteração atual mais interna de uma instrução while, do-while, ou for e continuará a execução do laço a partir da próxima iteração. Ao contrário da instrução break, continue não encerra a execução completa do laço. Em um laço while, ele voltará para a condição. Em um laço for, ele pulará para a expressão de incrementação.
    • +
  • Quando você utiliza continue com uma label, o continue será aplicado ao laço identificado por esta label. 
    • +
+ +

Segue a sintaxe do continue:

+ +
    +
  1. continue;
    2. +
  2. continue label;
    3. +
+ +

Exemplo 1

+ +

O exemplo a seguir mostra um laço while utlizando continue que executará quando o valor de i for igual a 3. Desta forma, n recebe os valores um, três, sete, e doze.

+ +
i = 0;
+n = 0;
+while (i < 5) {
+  i++;
+  if (i == 3) {
+    continue;
+  }
+  n += i;
+}
+
+ +

Exemplo 2

+ +

Uma instrução label checkiandj contém uma instrução label checkj. Se o continue for executado, o programa terminará a iteração atual de checkj e começará a próxima iteração. Toda vez que o continue for executado, checkj recomeçará até que a condição do while for falsa. Quando isto ocorrer checkiandj executará até que sua condição seja falsa.

+ +

Se o continue estivesse referenciando checkiandj, o programa deveria continuar do topo de checkiandj.

+ +
checkiandj:
+  while (i < 4) {
+    console.log(i);
+    i += 1;
+    checkj:
+      while (j > 4) {
+        console.log(j);
+        j -= 1;
+        if ((j % 2) == 0) {
+          continue checkj;
+        }
+        console.log(j + " é estranho.");
+      }
+      console.log("i = " + i);
+      console.log("j = " + j);
+  }
+ +

Declaração for...in

+ +

A declaração for...in executa iterações a partir de uma variável específica, percorrendo todas as propriedades de um objeto.
+ Para cada propriedade distinta, o JavaScript executará uma iteração. Segue a sintaxe:

+ +
for (variavel in objeto) {
+  declaracoes
+}
+
+ +

Exemplo

+ +

A função a seguir recebe em seu argumento um objeto e o nome deste objeto. Então executará uma iteração para cada elemento e retornará uma lista de string, que irá conter o nome da propriedade e seu valor.

+ +
function dump_props(obj, obj_name) {
+  var result = "";
+  for (var i in obj) {
+    result += obj_name + "." + i + " = " + obj[i] + "<br>";
+  }
+  result += "<hr>";
+  return result;
+}
+
+ +

Para um objeto chamado car com propriedades make e model, o resultado será:

+ +
car.make = Ford
+car.model = Mustang
+
+ +

Arrays

+ +

Embora seja tentador usar esta forma para interagir com os elementos de um Array, a declaração for...in irá retornar o nome pré-definido da propriedade ao invés do seu index numérico. Assim é melhor usar o tradicional for com index numérico quando interagir com arrays, pois o for...in interage com as propriedades definidas pelo programador ao invés dos elementos do array.

+ +

Declaração for...of

+ +

 A declaração for...of cria uma laço com objetos interativos ((incluindo, {{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, assim por conseguinte ), executando uma iteração para o valor de cada propriedade distinta.

+ +
for (variavel of objeto) {
+  declaracoes
+}
+ +

O exemplo a seguir mostra a diferença entre o for...of e o for...in. Enquanto o for...in interage com o nome das propriedades, o for...of interage com o valor das propriedades.

+ +
let arr = [3, 5, 7];
+arr.foo = "hello";
+
+for (let i in arr) {
+   console.log(i); // logs "0", "1", "2", "foo"
+}
+
+for (let i of arr) {
+   console.log(i); // logs "3", "5", "7"
+}
+
+ +

{{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}

diff --git a/files/pt-br/web/javascript/guide/modules/index.html b/files/pt-br/web/javascript/guide/modules/index.html new file mode 100644 index 0000000000..6a2cb73687 --- /dev/null +++ b/files/pt-br/web/javascript/guide/modules/index.html @@ -0,0 +1,454 @@ +--- +title: Módulos JavaScript +slug: Web/JavaScript/Guide/Módulos +translation_of: Web/JavaScript/Guide/Modules +--- +
{{JSSidebar("JavaScript Guide")}}{{Previous("Web/JavaScript/Guide/Meta_programming")}}
+ +

Este guia fornece tudo o que você precisa para começar com a sintaxe de módulo do JavaScript.

+ +

Um background em módulos

+ +

Os programas JavaScript começaram muito pequenos - a maior parte do seu uso nos primeiros dias era para executar tarefas isoladas de script, fornecendo um pouco de interatividade às suas páginas da Web sempre que necessário, de modo que scripts grandes geralmente não eram necessários. Com o avanço rápido da tecnologia agora temos aplicativos completos sendo executados em navegadores com muito JavaScript, além de JavaScript ser usado em outros contextos (Node.js, por exemplo).

+ +

Portanto, fez sentido nos últimos anos começar a pensar em fornecer mecanismos para dividir programas JavaScript em módulos separados que podem ser importados quando necessário. O Node.js possui essa capacidade há muito tempo e existem várias bibliotecas e estruturas JavaScript que permitem o uso do módulo (por exemplo, outros CommonJS e AMD-sistemas de módulos baseados em RequireJS, e mais recentemente Webpack e Babel).

+ +

A boa notícia é que os navegadores modernos começaram a dar suporte nativamente à funcionalidade do módulo, e é sobre isso que este artigo trata. Isso só pode ser uma coisa boa - os navegadores podem otimizar o carregamento de módulos, tornando-o mais eficiente do que ter que usar uma biblioteca e fazer todo esse processamento extra no lado do cliente e viagens de ida e volta extras.

+ +

Suporte do navegador

+ +

O uso de módulos JavaScript nativos depende do{{JSxRef("Statements/import", "import")}} e {{JSxRef("Statements/export", "export")}} afirmações; estes são suportados nos navegadores da seguinte maneira:

+ +

importa

+ +

{{Compat("javascript.statements.import")}}

+ +

exporta

+ +

{{Compat("javascript.statements.export")}}

+ +

Apresentando um exemplo

+ +

Para demonstrar o uso dos módulos, criamos um conjunto simples de exemplos que você pode encontrar no GitHub. Estes exemplos demonstram um conjunto simples de módulos que criam um<canvas> em uma página da Web e desenhe (e relate informações sobre) formas diferentes na tela.

+ +

Estes são bastante triviais, mas foram mantidos deliberadamente simples para demonstrar claramente os módulos.

+ +
+

Nota: Se você deseja fazer o download dos exemplos e executá-los localmente, precisará executá-los por meio de um servidor da web local.

+
+ +

Exemplo de uma estrutura básica

+ +

No nosso primeiro exemplo (consulte basic-modules) nós temos uma estrutura de arquivos da seguinte maneira:

+ +
index.html
+main.js
+modules/
+    canvas.js
+    square.js
+ +
+

Nota: Todos os exemplos neste guia têm basicamente a mesma estrutura; o exposto acima deve começar a ficar bem familiar.

+
+ +

Os dois módulos do diretório modules são descritos abaixo:

+ +
    +
  • canvas.js — contém funções relacionadas à configuração da tela: + +
      +
    • create() — cria uma tela com uma largura e altura especificadas dentro de um invólucro <div> com um ID especificado, que é anexado dentro de um elemento pai especificado. Retorna um objeto que contém o contexto 2D da tela e o ID do wrapper.
      • +
    • createReportList() — cria uma lista não ordenada anexada dentro de um elemento de wrapper especificado, que pode ser usado para gerar dados de relatório. Retorna o ID da lista.
      • +
    +
    • +
  • square.js — contém: +
      +
    • name — uma constante contendo a string 'square'.
      • +
    • draw() — desenha um quadrado em uma tela especificada, com um tamanho, posição e cor especificados. Retorna um objeto que contém o tamanho, a posição e a cor do quadrado.
      • +
    • reportArea() — grava a área de um quadrado em uma lista de relatórios específica, considerando seu tamanho.
      • +
    • reportPerimeter() — grava o perímetro de um quadrado em uma lista de relatórios específica, considerando seu comprimento.
      • +
    +
    • +
+ +

Aside — .mjs versus .js

+ +

Neste artigo, usamos extensões .js para nossos arquivos de módulo, mas em outros recursos você pode ver a extensão .mjs usada. A documentação da V8 recomenda isso, por exemplo. Os motivos apresentados são:

+ +
    +
  • É bom para maior clareza, ou seja, deixa claro quais arquivos são módulos e quais são JavaScript regulares.
    • +
  • Ele garante que seus arquivos de módulo sejam analisados como um módulo por tempos de execução, como Node.js, e construir ferramentas como Babel.
    • +
+ +

No entanto, decidimos continuar usando .js, pelo menos por enquanto. Para que os módulos funcionem corretamente em um navegador, você precisa garantir que seu servidor os esteja servindo com um cabeçalho Content-Type que contenha um tipo MIME JavaScript, como text / javascript. Caso contrário, você receberá um erro estrito de verificação do tipo MIME, de acordo com as linhas "O servidor respondeu com um tipo MIME não JavaScript" e o navegador não executará seu JavaScript. A maioria dos servidores já define o tipo correto para arquivos .js, mas ainda não para arquivos .mjs. Servidores que já veiculam arquivos .mjs incluem corretamente GitHub Pages e http-server para Node.js.

+ +

Tudo bem se você já estiver usando esse ambiente ou se não estiver, mas souber o que está fazendo e tiver acesso (ou seja, você pode configurar o servidor para definir a configuração correta Content-Type para arquivos .mjs). No entanto, isso pode causar confusão se você não controlar o servidor do qual está servindo arquivos ou publicar arquivos para uso público, como estamos aqui.

+ +

Para fins de aprendizado e portabilidade, decidimos manter o.js.

+ +

Se você realmente valoriza a clareza de usar .mjs para módulos versus usar .js para arquivos JavaScript "normais", mas não deseja se deparar com o problema descrito acima, sempre poderá usar .mjs durante o desenvolvimento e convertê-los em .js durante sua etapa de construção.

+ +

Também é importante notar que:

+ +
    +
  • Algumas ferramentas podem nunca suportar .mjs, comoTypeScript.
    • +
  • O  atributo <script type="module">é usado para indicar quando um módulo está sendo apontado, como você verá abaixo.
    • +
+ +

Exportando recursos do módulo

+ +

A primeira coisa que você faz para obter acesso aos recursos do módulo é exportá-los. Isso é feito usando o {{JSxRef("Statements/export", "export")}} declaração.

+ +

A maneira mais fácil de usá-lo é colocá-lo na frente de qualquer item que você queira exportar para fora do módulo, por exemplo:

+ +
export const name = 'square';
+
+export function draw(ctx, length, x, y, color) {
+  ctx.fillStyle = color;
+  ctx.fillRect(x, y, length, length);
+
+  return {
+    length: length,
+    x: x,
+    y: y,
+    color: color
+  };
+}
+ +

Você pode exportar funções, var, let, const, e — como veremos mais tarde - classes. Eles precisam ser itens de nível superior; você não pode usar a exportação dentro de uma função, por exemplo.

+ +

Uma maneira mais conveniente de exportar todos os itens que você deseja exportar é usar uma única instrução de exportação no final do arquivo do módulo, seguida por uma lista separada por vírgula dos recursos que você deseja exportar envoltos em chaves. Por exemplo:

+ +
export { name, draw, reportArea, reportPerimeter };
+ +

Importando recursos para o seu script

+ +

Depois de exportar alguns recursos do seu módulo, é necessário importá-los para o script para poder usá-los. A maneira mais simples de fazer isso é a seguinte:

+ +
import { name, draw, reportArea, reportPerimeter } from './modules/square.js';
+ +

Você usa o {{JSxRef("Statements/import", "import")}} , seguida por uma lista separada por vírgula dos recursos que você deseja importar agrupados em chaves, seguidos pela palavra-chave de, seguida pelo caminho para o arquivo do módulo - um caminho relativo à raiz do site, que para nossa basic-modules exemplo seria/js-examples/modules/basic-modules.

+ +

No entanto, escrevemos o caminho de maneira um pouco diferente - estamos usando a sintaxe de ponto (.) Para significar "o local atual", seguido pelo caminho além do arquivo que estamos tentando encontrar. Isso é muito melhor do que escrever todo o caminho relativo a cada vez, pois é mais curto e torna o URL portátil - o exemplo ainda funcionará se você o mover para um local diferente na hierarquia do site.

+ +

Então, por exemplo:

+ +
/js-examples/modules/basic-modules/modules/square.js
+ +

torna-se

+ +
./modules/square.js
+ +

Você pode ver essas linhas em ação em main.js.

+ +
+

Nota: Em alguns sistemas de módulos, você pode omitir a extensão do arquivo e o ponto(e.g. '/modules/square'). Isso não funciona nos módulos JavaScript nativos.

+
+ +

Depois de importar os recursos para o seu script, você pode usá-los exatamente como eles foram definidos no mesmo arquivo. O seguinte é encontrado em
+ main.js, abaixo das linhas de importação:

+ +
let myCanvas = create('myCanvas', document.body, 480, 320);
+let reportList = createReportList(myCanvas.id);
+
+let square1 = draw(myCanvas.ctx, 50, 50, 100, 'blue');
+reportArea(square1.length, reportList);
+reportPerimeter(square1.length, reportList);
+
+ +
+

Nota: Embora os recursos importados estejam disponíveis no arquivo, eles são visualizações somente leitura do recurso que foi exportado. Você não pode alterar a variável importada, mas ainda pode modificar propriedades semelhantes à const. Além disso, esses recursos são importados como ligações ativas, o que significa que eles podem mudar de valor mesmo que você não possa modificar a ligação ao contrário de const.

+
+ +

Aplicando o módulo ao seu HTML

+ +

Agora, apenas precisamos aplicar o módulo main.js. à nossa página HTML. Isso é muito semelhante ao modo como aplicamos um script regular a uma página, com algumas diferenças notáveis.

+ +

Primeiro de tudo, você precisa incluir type="module" no <script> elemento, para declarar esse script como um módulo. Para importar o main.js script, usamos este:

+ +
<script type="module" src="main.js"></script>
+ +

Você também pode incorporar o script do módulo diretamente no arquivo HTML, colocando o código JavaScript no corpo do elemento <script>:

+ +
<script type="module">
+  /* JavaScript module code here */
+</script>
+ +

O script para o qual você importa os recursos do módulo atua basicamente como o módulo de nível superior. Se você o omitir, o Firefox, por exemplo, exibirá um erro "SyntaxError: as declarações de importação podem aparecer apenas no nível superior de um módulo".

+ +

Você só pode usar import e export instruções dentro de módulos, não scripts regulares.

+ +

Outras diferenças entre módulos e scripts padrão

+ +
    +
  • Você precisa prestar atenção nos testes locais - se você tentar carregar o arquivo HTML localmente (i.e. com um arquivo:// URL), você encontrará erros do CORS devido a requisitos de segurança do módulo JavaScript. Você precisa fazer seus testes através de um servidor.
    • +
  • Além disso, observe que você pode obter um comportamento diferente das seções de script definidas dentro dos módulos e não nos scripts padrão. Isso ocorre porque os módulos usam {{JSxRef("Strict_mode", "strict mode", "", 1)}} automaticamente.
    • +
  • Não há necessidade de usar o atributo deferir (consulte <script> attributes) ao carregar um script de módulo; módulos são adiados automaticamente.
    • +
  • Os módulos são executados apenas uma vez, mesmo que tenham sido referenciados em várias tags <script>.
    • +
  • Por último, mas não menos importante, vamos esclarecer: os recursos do módulo são importados para o escopo de um único script - eles não estão disponíveis no escopo global. Portanto, você poderá acessar apenas os recursos importados no script para o qual eles foram importados e não poderá acessá-los no console JavaScript, por exemplo. Você ainda receberá erros de sintaxe mostrados no DevTools, mas não poderá usar algumas das técnicas de depuração que você esperava usar.
    • +
+ +

Exportações padrão versus exportações nomeadas

+ +

A funcionalidade que exportamos até agora foi composta por named exports — cada item (seja uma função, const, etc.) foi referido por seu nome na exportação e esse nome também foi usado para se referir a ele na importação.

+ +

Há também um tipo de exportação chamado default export — isso foi projetado para facilitar a função padrão fornecida por um módulo e também ajuda os módulos JavaScript a interoperar com os sistemas de módulos CommonJS e AMD existentes (conforme explicado em ES6 In Depth: Modules por Jason Orendorff; procure por "Exportações padrão").

+ +

Vejamos um exemplo ao explicar como ele funciona. Nos nossos módulos básicos square.js você pode encontrar uma função chamada randomSquare() que cria um quadrado com cor, tamanho e posição aleatórios. Queremos exportar isso como padrão, portanto, na parte inferior do arquivo, escrevemos isso:

+ +
export default randomSquare;
+ +

Note a falta dos colchetes.

+ +

Em vez disso, poderíamos acrescentar export default na função e defina-a como uma função anônima, assim:

+ +
export default function(ctx) {
+  ...
+}
+ +

No nosso arquivo main.js., importamos a função padrão usando esta linha:

+ +
import randomSquare from './modules/square.js';
+ +

Isso ocorre porque há apenas uma exportação padrão permitida por módulo e sabemos que randomSquare é isso.

+ +
import {default as randomSquare} from './modules/square.js';
+ +
+

Nota: A sintaxe as para renomear itens exportados é explicada abaixo no Renaming imports and exports seção.

+
+ +

Evitando conflitos de nomenclatura

+ +

Até agora, nossos módulos de desenho de forma de tela parecem estar funcionando bem. Mas o que acontece se tentarmos adicionar um módulo que lide com o desenho de outra forma, como um círculo ou triângulo? Essas formas provavelmente teriam funções associadas, como draw(), reportArea(), etc. também; se tentássemos importar diferentes funções com o mesmo nome para o mesmo arquivo de módulo de nível superior, acabaríamos com conflitos e erros.

+ +

Felizmente, existem várias maneiras de contornar isso. Veremos isso nas próximas seções.

+ +

Renomeando importações e exportações

+ +

Dentro dos colchetes da instrução de importação e exportação, você pode usar a palavra-chave junto com um novo nome de recurso, para alterar o nome de identificação que será usado para um recurso dentro do módulo de nível superior.

+ +

Por exemplo, os dois itens a seguir executariam o mesmo trabalho, embora de uma maneira ligeiramente diferente:

+ +
// inside module.js
+export {
+  function1 as newFunctionName,
+  function2 as anotherNewFunctionName
+};
+
+// inside main.js
+import { newFunctionName, anotherNewFunctionName } from './modules/module.js';
+ +
// inside module.js
+export { function1, function2 };
+
+// inside main.js
+import { function1 as newFunctionName,
+         function2 as anotherNewFunctionName } from './modules/module.js';
+ +

Vejamos um exemplo real. Na nossa renaming diretório, você verá o mesmo sistema de módulos do exemplo anterior, exceto que adicionamos circle.js e triangle.js módulos para desenhar e relatar círculos e triângulos.

+ +

Dentro de cada um desses módulos, temos recursos com os mesmos nomes sendo exportados e, portanto, cada um tem o mesmo export declaração na parte inferior:

+ +
export { name, draw, reportArea, reportPerimeter };
+ +

Ao importá-los para o main.js, se tentarmos usar

+ +
import { name, draw, reportArea, reportPerimeter } from './modules/square.js';
+import { name, draw, reportArea, reportPerimeter } from './modules/circle.js';
+import { name, draw, reportArea, reportPerimeter } from './modules/triangle.js';
+ +

O navegador geraria um erro como "SyntaxError: redeclaration of import name" (Firefox).

+ +

Em vez disso, precisamos renomear as importações para que sejam únicas:

+ +
import { name as squareName,
+         draw as drawSquare,
+         reportArea as reportSquareArea,
+         reportPerimeter as reportSquarePerimeter } from './modules/square.js';
+
+import { name as circleName,
+         draw as drawCircle,
+         reportArea as reportCircleArea,
+         reportPerimeter as reportCirclePerimeter } from './modules/circle.js';
+
+import { name as triangleName,
+        draw as drawTriangle,
+        reportArea as reportTriangleArea,
+        reportPerimeter as reportTrianglePerimeter } from './modules/triangle.js';
+ +

Observe que você pode resolver o problema nos arquivos do módulo, e.g.

+ +
// in square.js
+export { name as squareName,
+         draw as drawSquare,
+         reportArea as reportSquareArea,
+         reportPerimeter as reportSquarePerimeter };
+ +
// in main.js
+import { squareName, drawSquare, reportSquareArea, reportSquarePerimeter } from './modules/square.js';
+ +

E funcionaria da mesma forma. Qual o estilo que você usa depende de você, no entanto, sem dúvida faz mais sentido deixar o código do módulo em paz e fazer as alterações nas importações. Isso faz especialmente sentido quando você está importando de módulos de terceiros sobre os quais você não tem controle.

+ +

24/5000

+ +

Criando um objeto de módulo

+ +

O método acima funciona bem, mas é um pouco confuso e longo. Uma solução ainda melhor é importar os recursos de cada módulo dentro de um objeto de módulo. O seguinte formulário de sintaxe faz isso:

+ +
import * as Module from './modules/module.js';
+ +

Isso captura todas as exportações disponíveis no module.js e as torna disponíveis como membros de um objeto Module, efetivamente dando o seu próprio namespace. Então, por exemplo:

+ +
Module.function1()
+Module.function2()
+etc.
+ +

Novamente, vejamos um exemplo real. Se você for ao nosso module-objects diretório, você verá o mesmo exemplo novamente, mas reescrito para aproveitar essa nova sintaxe. Nos módulos, as exportações são todas da seguinte forma simples:

+ +
export { name, draw, reportArea, reportPerimeter };
+ +

As importações, por outro lado, são assim:

+ +
import * as Canvas from './modules/canvas.js';
+
+import * as Square from './modules/square.js';
+import * as Circle from './modules/circle.js';
+import * as Triangle from './modules/triangle.js';
+ +

Em cada caso, agora você pode acessar as importações do módulo abaixo do nome do objeto especificado, por exemplo:

+ +
let square1 = Square.draw(myCanvas.ctx, 50, 50, 100, 'blue');
+Square.reportArea(square1.length, reportList);
+Square.reportPerimeter(square1.length, reportList);
+ +

Agora você pode escrever o código da mesma forma que antes (contanto que inclua os nomes dos objetos quando necessário) e as importações sejam muito mais limpas.

+ +

Módulos e classes

+ +

Como sugerimos anteriormente, você também pode exportar e importar classes; essa é outra opção para evitar conflitos no seu código e é especialmente útil se você já tiver o código do módulo gravado em um estilo orientado a objetos.

+ +

Você pode ver um exemplo do nosso módulo de desenho de forma reescrito com as classes ES em nosso classes diretório. Como exemplo, o square.js O arquivo agora contém todas as suas funcionalidades em uma única classe:

+ +
class Square {
+  constructor(ctx, listId, length, x, y, color) {
+    ...
+  }
+
+  draw() {
+    ...
+  }
+
+  ...
+}
+ +

que exportamos então:

+ +
export { Square };
+ +

No main.js, nós o importamos assim:

+ +
import { Square } from './modules/square.js';
+ +

E então use a classe para desenhar nosso quadrado:

+ +
let square1 = new Square(myCanvas.ctx, myCanvas.listId, 50, 50, 100, 'blue');
+square1.draw();
+square1.reportArea();
+square1.reportPerimeter();
+ +

Módulos de agregação

+ +

Haverá momentos em que você desejará agregar módulos. Você pode ter vários níveis de dependências, nos quais deseja simplificar as coisas, combinando vários submódulos em um módulo pai. Isso é possível usando a sintaxe de exportação dos seguintes formulários no módulo pai:

+ +
export * from 'x.js'
+export { name } from 'x.js'
+ +

Por exemplo, veja nosso module-aggregation diretório. Neste exemplo (com base no exemplo de classes anteriores), temos um módulo extra chamado shapes.js, que agrega toda a funcionalidade de circle.js, square.js e triangle.js juntos. Também movemos nossos submódulos para dentro de um subdiretório dentro do diretório modules chamado shapes. Portanto, a estrutura do módulo neste exemplo é:

+ +
modules/
+  canvas.js
+  shapes.js
+  shapes/
+    circle.js
+    square.js
+    triangle.js
+ +

Em cada um dos submódulos, a exportação é da mesma forma, e.g.

+ +
export { Square };
+ +

Em seguida, vem a parte de agregação. Dentro de shapes.js, incluímos as seguintes linhas:

+ +
export { Square } from './shapes/square.js';
+export { Triangle } from './shapes/triangle.js';
+export { Circle } from './shapes/circle.js';
+ +

Eles capturam as exportações dos submódulos individuais e os disponibilizam efetivamente no módulo shapes.js.

+ +
+

Nota: As exportações mencionadas no shapes.js são basicamente redirecionadas pelo arquivo e realmente não existem nele, portanto, você não poderá escrever nenhum código relacionado útil dentro do mesmo arquivo.

+
+ +

Portanto, agora no arquivo main.js., podemos obter acesso às três classes de módulos substituindo

+ +
import { Square } from './modules/square.js';
+import { Circle } from './modules/circle.js';
+import { Triangle } from './modules/triangle.js';
+ +

com a seguinte linha única:

+ +
import { Square, Circle, Triangle } from './modules/shapes.js';
+ +

Carregamento dinâmico do módulo

+ +

A parte mais recente da funcionalidade dos módulos JavaScript a estar disponível nos navegadores é o carregamento dinâmico de módulos. Isso permite que você carregue módulos dinamicamente somente quando eles forem necessários, em vez de precisar carregar tudo antecipadamente. Isso tem algumas vantagens óbvias de desempenho; vamos ler e ver como isso funciona.

+ +

Essa nova funcionalidade permite que você ligue {{JSxRef("Statements/import", "import()", "#Dynamic_Imports")}} como uma função, passando o caminho para o módulo como um parâmetro. Retorna um{{JSxRef("Promise")}}, que cumpre com um objeto de módulo (consulte Creating a module object) dando acesso às exportações desse objeto, e.g.

+ +
import('./modules/myModule.js')
+  .then((module) => {
+    // Do something with the module.
+  });
+ +

Vejamos um exemplo. No dynamic-module-imports diretório, temos outro exemplo baseado em nosso exemplo de classes. Desta vez, no entanto, não estamos desenhando nada na tela quando o exemplo é carregado. Em vez disso, incluímos trêsbuttons — "Circle", "Square", e "Triangle" — que, quando pressionado, carrega dinamicamente o módulo necessário e, em seguida, usa-o para desenhar os shape.

+ +

Neste exemplo, fizemos apenas alterações em nossa index.html e main.js arquivos - as exportações do módulo permanecem as mesmas de antes.

+ +

No main.js, pegamos uma referência a cada botão usando umDocument.querySelector() chamada, por exemplo:

+ +
let squareBtn = document.querySelector('.square');
+ +

Em seguida, anexamos um ouvinte de evento a cada botão para que, quando pressionado, o módulo relevante seja carregado dinamicamente e usado para desenhar a forma(shape):

+ +
squareBtn.addEventListener('click', () => {
+  import('./modules/square.js').then((Module) => {
+    let square1 = new Module.Square(myCanvas.ctx, myCanvas.listId, 50, 50, 100, 'blue');
+    square1.draw();
+    square1.reportArea();
+    square1.reportPerimeter();
+  })
+});
+ +

Observe que, como o cumprimento da promessa retorna um objeto de módulo, a classe é então transformada em uma sub-característica do objeto, portanto, agora precisamos acessar o construtor com Module. anexado a ele, e.g. Module.Square( ... ).

+ +

Solução de problemas

+ +

Aqui estão algumas dicas que podem ajudá-lo se você estiver com problemas para fazer seus módulos funcionarem. Sinta-se livre para adicionar à lista se descobrir mais!

+ +
    +
  • Mencionamos isso antes, mas para reiterar: arquivos.js precisa ser carregado com um tipo MIME de text/javascript (ou outro tipo MIME compatível com JavaScript, mas text/javascript é recomendável), caso contrário, você receberá um erro estrito de verificação do tipo MIME como "O servidor respondeu com um tipo MIME não JavaScript".
    • +
  • Se você tentar carregar o arquivo HTML localmente (i.e. com um arquivo:// URL), você encontrará erros do CORS devido a requisitos de segurança do módulo JavaScript. Você precisa fazer seus testes através de um servidor. As páginas do GitHub são ideais, pois também servem arquivos .js com o tipo MIME correto.
    • +
  • Como .mjs é uma extensão de arquivo não padrão, alguns sistemas operacionais podem não reconhecê-lo ou tentar substituí-lo por outra. Por exemplo, descobrimos que o macOS estava adicionando silenciosamente .js ao final dos arquivos .mjs e ocultando automaticamente a extensão do arquivo. Então, todos os nossos arquivos foram lançados como x.mjs.js. Depois de desativarmos ocultar automaticamente as extensões de arquivo e treiná-lo para aceitar .mjs, tudo bem.
    • +
+ +

Veja também

+ + + +

{{Previous("Web/JavaScript/Guide/Meta_programming")}}

diff --git "a/files/pt-br/web/javascript/guide/m\303\263dulos/index.html" "b/files/pt-br/web/javascript/guide/m\303\263dulos/index.html" deleted file mode 100644 index 6a2cb73687..0000000000 --- "a/files/pt-br/web/javascript/guide/m\303\263dulos/index.html" +++ /dev/null @@ -1,454 +0,0 @@ ---- -title: Módulos JavaScript -slug: Web/JavaScript/Guide/Módulos -translation_of: Web/JavaScript/Guide/Modules ---- -
{{JSSidebar("JavaScript Guide")}}{{Previous("Web/JavaScript/Guide/Meta_programming")}}
- -

Este guia fornece tudo o que você precisa para começar com a sintaxe de módulo do JavaScript.

- -

Um background em módulos

- -

Os programas JavaScript começaram muito pequenos - a maior parte do seu uso nos primeiros dias era para executar tarefas isoladas de script, fornecendo um pouco de interatividade às suas páginas da Web sempre que necessário, de modo que scripts grandes geralmente não eram necessários. Com o avanço rápido da tecnologia agora temos aplicativos completos sendo executados em navegadores com muito JavaScript, além de JavaScript ser usado em outros contextos (Node.js, por exemplo).

- -

Portanto, fez sentido nos últimos anos começar a pensar em fornecer mecanismos para dividir programas JavaScript em módulos separados que podem ser importados quando necessário. O Node.js possui essa capacidade há muito tempo e existem várias bibliotecas e estruturas JavaScript que permitem o uso do módulo (por exemplo, outros CommonJS e AMD-sistemas de módulos baseados em RequireJS, e mais recentemente Webpack e Babel).

- -

A boa notícia é que os navegadores modernos começaram a dar suporte nativamente à funcionalidade do módulo, e é sobre isso que este artigo trata. Isso só pode ser uma coisa boa - os navegadores podem otimizar o carregamento de módulos, tornando-o mais eficiente do que ter que usar uma biblioteca e fazer todo esse processamento extra no lado do cliente e viagens de ida e volta extras.

- -

Suporte do navegador

- -

O uso de módulos JavaScript nativos depende do{{JSxRef("Statements/import", "import")}} e {{JSxRef("Statements/export", "export")}} afirmações; estes são suportados nos navegadores da seguinte maneira:

- -

importa

- -

{{Compat("javascript.statements.import")}}

- -

exporta

- -

{{Compat("javascript.statements.export")}}

- -

Apresentando um exemplo

- -

Para demonstrar o uso dos módulos, criamos um conjunto simples de exemplos que você pode encontrar no GitHub. Estes exemplos demonstram um conjunto simples de módulos que criam um<canvas> em uma página da Web e desenhe (e relate informações sobre) formas diferentes na tela.

- -

Estes são bastante triviais, mas foram mantidos deliberadamente simples para demonstrar claramente os módulos.

- -
-

Nota: Se você deseja fazer o download dos exemplos e executá-los localmente, precisará executá-los por meio de um servidor da web local.

-
- -

Exemplo de uma estrutura básica

- -

No nosso primeiro exemplo (consulte basic-modules) nós temos uma estrutura de arquivos da seguinte maneira:

- -
index.html
-main.js
-modules/
-    canvas.js
-    square.js
- -
-

Nota: Todos os exemplos neste guia têm basicamente a mesma estrutura; o exposto acima deve começar a ficar bem familiar.

-
- -

Os dois módulos do diretório modules são descritos abaixo:

- -
    -
  • canvas.js — contém funções relacionadas à configuração da tela: - -
      -
    • create() — cria uma tela com uma largura e altura especificadas dentro de um invólucro <div> com um ID especificado, que é anexado dentro de um elemento pai especificado. Retorna um objeto que contém o contexto 2D da tela e o ID do wrapper.
      • -
    • createReportList() — cria uma lista não ordenada anexada dentro de um elemento de wrapper especificado, que pode ser usado para gerar dados de relatório. Retorna o ID da lista.
      • -
    -
    • -
  • square.js — contém: -
      -
    • name — uma constante contendo a string 'square'.
      • -
    • draw() — desenha um quadrado em uma tela especificada, com um tamanho, posição e cor especificados. Retorna um objeto que contém o tamanho, a posição e a cor do quadrado.
      • -
    • reportArea() — grava a área de um quadrado em uma lista de relatórios específica, considerando seu tamanho.
      • -
    • reportPerimeter() — grava o perímetro de um quadrado em uma lista de relatórios específica, considerando seu comprimento.
      • -
    -
    • -
- -

Aside — .mjs versus .js

- -

Neste artigo, usamos extensões .js para nossos arquivos de módulo, mas em outros recursos você pode ver a extensão .mjs usada. A documentação da V8 recomenda isso, por exemplo. Os motivos apresentados são:

- -
    -
  • É bom para maior clareza, ou seja, deixa claro quais arquivos são módulos e quais são JavaScript regulares.
    • -
  • Ele garante que seus arquivos de módulo sejam analisados como um módulo por tempos de execução, como Node.js, e construir ferramentas como Babel.
    • -
- -

No entanto, decidimos continuar usando .js, pelo menos por enquanto. Para que os módulos funcionem corretamente em um navegador, você precisa garantir que seu servidor os esteja servindo com um cabeçalho Content-Type que contenha um tipo MIME JavaScript, como text / javascript. Caso contrário, você receberá um erro estrito de verificação do tipo MIME, de acordo com as linhas "O servidor respondeu com um tipo MIME não JavaScript" e o navegador não executará seu JavaScript. A maioria dos servidores já define o tipo correto para arquivos .js, mas ainda não para arquivos .mjs. Servidores que já veiculam arquivos .mjs incluem corretamente GitHub Pages e http-server para Node.js.

- -

Tudo bem se você já estiver usando esse ambiente ou se não estiver, mas souber o que está fazendo e tiver acesso (ou seja, você pode configurar o servidor para definir a configuração correta Content-Type para arquivos .mjs). No entanto, isso pode causar confusão se você não controlar o servidor do qual está servindo arquivos ou publicar arquivos para uso público, como estamos aqui.

- -

Para fins de aprendizado e portabilidade, decidimos manter o.js.

- -

Se você realmente valoriza a clareza de usar .mjs para módulos versus usar .js para arquivos JavaScript "normais", mas não deseja se deparar com o problema descrito acima, sempre poderá usar .mjs durante o desenvolvimento e convertê-los em .js durante sua etapa de construção.

- -

Também é importante notar que:

- -
    -
  • Algumas ferramentas podem nunca suportar .mjs, comoTypeScript.
    • -
  • O  atributo <script type="module">é usado para indicar quando um módulo está sendo apontado, como você verá abaixo.
    • -
- -

Exportando recursos do módulo

- -

A primeira coisa que você faz para obter acesso aos recursos do módulo é exportá-los. Isso é feito usando o {{JSxRef("Statements/export", "export")}} declaração.

- -

A maneira mais fácil de usá-lo é colocá-lo na frente de qualquer item que você queira exportar para fora do módulo, por exemplo:

- -
export const name = 'square';
-
-export function draw(ctx, length, x, y, color) {
-  ctx.fillStyle = color;
-  ctx.fillRect(x, y, length, length);
-
-  return {
-    length: length,
-    x: x,
-    y: y,
-    color: color
-  };
-}
- -

Você pode exportar funções, var, let, const, e — como veremos mais tarde - classes. Eles precisam ser itens de nível superior; você não pode usar a exportação dentro de uma função, por exemplo.

- -

Uma maneira mais conveniente de exportar todos os itens que você deseja exportar é usar uma única instrução de exportação no final do arquivo do módulo, seguida por uma lista separada por vírgula dos recursos que você deseja exportar envoltos em chaves. Por exemplo:

- -
export { name, draw, reportArea, reportPerimeter };
- -

Importando recursos para o seu script

- -

Depois de exportar alguns recursos do seu módulo, é necessário importá-los para o script para poder usá-los. A maneira mais simples de fazer isso é a seguinte:

- -
import { name, draw, reportArea, reportPerimeter } from './modules/square.js';
- -

Você usa o {{JSxRef("Statements/import", "import")}} , seguida por uma lista separada por vírgula dos recursos que você deseja importar agrupados em chaves, seguidos pela palavra-chave de, seguida pelo caminho para o arquivo do módulo - um caminho relativo à raiz do site, que para nossa basic-modules exemplo seria/js-examples/modules/basic-modules.

- -

No entanto, escrevemos o caminho de maneira um pouco diferente - estamos usando a sintaxe de ponto (.) Para significar "o local atual", seguido pelo caminho além do arquivo que estamos tentando encontrar. Isso é muito melhor do que escrever todo o caminho relativo a cada vez, pois é mais curto e torna o URL portátil - o exemplo ainda funcionará se você o mover para um local diferente na hierarquia do site.

- -

Então, por exemplo:

- -
/js-examples/modules/basic-modules/modules/square.js
- -

torna-se

- -
./modules/square.js
- -

Você pode ver essas linhas em ação em main.js.

- -
-

Nota: Em alguns sistemas de módulos, você pode omitir a extensão do arquivo e o ponto(e.g. '/modules/square'). Isso não funciona nos módulos JavaScript nativos.

-
- -

Depois de importar os recursos para o seu script, você pode usá-los exatamente como eles foram definidos no mesmo arquivo. O seguinte é encontrado em
- main.js, abaixo das linhas de importação:

- -
let myCanvas = create('myCanvas', document.body, 480, 320);
-let reportList = createReportList(myCanvas.id);
-
-let square1 = draw(myCanvas.ctx, 50, 50, 100, 'blue');
-reportArea(square1.length, reportList);
-reportPerimeter(square1.length, reportList);
-
- -
-

Nota: Embora os recursos importados estejam disponíveis no arquivo, eles são visualizações somente leitura do recurso que foi exportado. Você não pode alterar a variável importada, mas ainda pode modificar propriedades semelhantes à const. Além disso, esses recursos são importados como ligações ativas, o que significa que eles podem mudar de valor mesmo que você não possa modificar a ligação ao contrário de const.

-
- -

Aplicando o módulo ao seu HTML

- -

Agora, apenas precisamos aplicar o módulo main.js. à nossa página HTML. Isso é muito semelhante ao modo como aplicamos um script regular a uma página, com algumas diferenças notáveis.

- -

Primeiro de tudo, você precisa incluir type="module" no <script> elemento, para declarar esse script como um módulo. Para importar o main.js script, usamos este:

- -
<script type="module" src="main.js"></script>
- -

Você também pode incorporar o script do módulo diretamente no arquivo HTML, colocando o código JavaScript no corpo do elemento <script>:

- -
<script type="module">
-  /* JavaScript module code here */
-</script>
- -

O script para o qual você importa os recursos do módulo atua basicamente como o módulo de nível superior. Se você o omitir, o Firefox, por exemplo, exibirá um erro "SyntaxError: as declarações de importação podem aparecer apenas no nível superior de um módulo".

- -

Você só pode usar import e export instruções dentro de módulos, não scripts regulares.

- -

Outras diferenças entre módulos e scripts padrão

- -
    -
  • Você precisa prestar atenção nos testes locais - se você tentar carregar o arquivo HTML localmente (i.e. com um arquivo:// URL), você encontrará erros do CORS devido a requisitos de segurança do módulo JavaScript. Você precisa fazer seus testes através de um servidor.
    • -
  • Além disso, observe que você pode obter um comportamento diferente das seções de script definidas dentro dos módulos e não nos scripts padrão. Isso ocorre porque os módulos usam {{JSxRef("Strict_mode", "strict mode", "", 1)}} automaticamente.
    • -
  • Não há necessidade de usar o atributo deferir (consulte <script> attributes) ao carregar um script de módulo; módulos são adiados automaticamente.
    • -
  • Os módulos são executados apenas uma vez, mesmo que tenham sido referenciados em várias tags <script>.
    • -
  • Por último, mas não menos importante, vamos esclarecer: os recursos do módulo são importados para o escopo de um único script - eles não estão disponíveis no escopo global. Portanto, você poderá acessar apenas os recursos importados no script para o qual eles foram importados e não poderá acessá-los no console JavaScript, por exemplo. Você ainda receberá erros de sintaxe mostrados no DevTools, mas não poderá usar algumas das técnicas de depuração que você esperava usar.
    • -
- -

Exportações padrão versus exportações nomeadas

- -

A funcionalidade que exportamos até agora foi composta por named exports — cada item (seja uma função, const, etc.) foi referido por seu nome na exportação e esse nome também foi usado para se referir a ele na importação.

- -

Há também um tipo de exportação chamado default export — isso foi projetado para facilitar a função padrão fornecida por um módulo e também ajuda os módulos JavaScript a interoperar com os sistemas de módulos CommonJS e AMD existentes (conforme explicado em ES6 In Depth: Modules por Jason Orendorff; procure por "Exportações padrão").

- -

Vejamos um exemplo ao explicar como ele funciona. Nos nossos módulos básicos square.js você pode encontrar uma função chamada randomSquare() que cria um quadrado com cor, tamanho e posição aleatórios. Queremos exportar isso como padrão, portanto, na parte inferior do arquivo, escrevemos isso:

- -
export default randomSquare;
- -

Note a falta dos colchetes.

- -

Em vez disso, poderíamos acrescentar export default na função e defina-a como uma função anônima, assim:

- -
export default function(ctx) {
-  ...
-}
- -

No nosso arquivo main.js., importamos a função padrão usando esta linha:

- -
import randomSquare from './modules/square.js';
- -

Isso ocorre porque há apenas uma exportação padrão permitida por módulo e sabemos que randomSquare é isso.

- -
import {default as randomSquare} from './modules/square.js';
- -
-

Nota: A sintaxe as para renomear itens exportados é explicada abaixo no Renaming imports and exports seção.

-
- -

Evitando conflitos de nomenclatura

- -

Até agora, nossos módulos de desenho de forma de tela parecem estar funcionando bem. Mas o que acontece se tentarmos adicionar um módulo que lide com o desenho de outra forma, como um círculo ou triângulo? Essas formas provavelmente teriam funções associadas, como draw(), reportArea(), etc. também; se tentássemos importar diferentes funções com o mesmo nome para o mesmo arquivo de módulo de nível superior, acabaríamos com conflitos e erros.

- -

Felizmente, existem várias maneiras de contornar isso. Veremos isso nas próximas seções.

- -

Renomeando importações e exportações

- -

Dentro dos colchetes da instrução de importação e exportação, você pode usar a palavra-chave junto com um novo nome de recurso, para alterar o nome de identificação que será usado para um recurso dentro do módulo de nível superior.

- -

Por exemplo, os dois itens a seguir executariam o mesmo trabalho, embora de uma maneira ligeiramente diferente:

- -
// inside module.js
-export {
-  function1 as newFunctionName,
-  function2 as anotherNewFunctionName
-};
-
-// inside main.js
-import { newFunctionName, anotherNewFunctionName } from './modules/module.js';
- -
// inside module.js
-export { function1, function2 };
-
-// inside main.js
-import { function1 as newFunctionName,
-         function2 as anotherNewFunctionName } from './modules/module.js';
- -

Vejamos um exemplo real. Na nossa renaming diretório, você verá o mesmo sistema de módulos do exemplo anterior, exceto que adicionamos circle.js e triangle.js módulos para desenhar e relatar círculos e triângulos.

- -

Dentro de cada um desses módulos, temos recursos com os mesmos nomes sendo exportados e, portanto, cada um tem o mesmo export declaração na parte inferior:

- -
export { name, draw, reportArea, reportPerimeter };
- -

Ao importá-los para o main.js, se tentarmos usar

- -
import { name, draw, reportArea, reportPerimeter } from './modules/square.js';
-import { name, draw, reportArea, reportPerimeter } from './modules/circle.js';
-import { name, draw, reportArea, reportPerimeter } from './modules/triangle.js';
- -

O navegador geraria um erro como "SyntaxError: redeclaration of import name" (Firefox).

- -

Em vez disso, precisamos renomear as importações para que sejam únicas:

- -
import { name as squareName,
-         draw as drawSquare,
-         reportArea as reportSquareArea,
-         reportPerimeter as reportSquarePerimeter } from './modules/square.js';
-
-import { name as circleName,
-         draw as drawCircle,
-         reportArea as reportCircleArea,
-         reportPerimeter as reportCirclePerimeter } from './modules/circle.js';
-
-import { name as triangleName,
-        draw as drawTriangle,
-        reportArea as reportTriangleArea,
-        reportPerimeter as reportTrianglePerimeter } from './modules/triangle.js';
- -

Observe que você pode resolver o problema nos arquivos do módulo, e.g.

- -
// in square.js
-export { name as squareName,
-         draw as drawSquare,
-         reportArea as reportSquareArea,
-         reportPerimeter as reportSquarePerimeter };
- -
// in main.js
-import { squareName, drawSquare, reportSquareArea, reportSquarePerimeter } from './modules/square.js';
- -

E funcionaria da mesma forma. Qual o estilo que você usa depende de você, no entanto, sem dúvida faz mais sentido deixar o código do módulo em paz e fazer as alterações nas importações. Isso faz especialmente sentido quando você está importando de módulos de terceiros sobre os quais você não tem controle.

- -

24/5000

- -

Criando um objeto de módulo

- -

O método acima funciona bem, mas é um pouco confuso e longo. Uma solução ainda melhor é importar os recursos de cada módulo dentro de um objeto de módulo. O seguinte formulário de sintaxe faz isso:

- -
import * as Module from './modules/module.js';
- -

Isso captura todas as exportações disponíveis no module.js e as torna disponíveis como membros de um objeto Module, efetivamente dando o seu próprio namespace. Então, por exemplo:

- -
Module.function1()
-Module.function2()
-etc.
- -

Novamente, vejamos um exemplo real. Se você for ao nosso module-objects diretório, você verá o mesmo exemplo novamente, mas reescrito para aproveitar essa nova sintaxe. Nos módulos, as exportações são todas da seguinte forma simples:

- -
export { name, draw, reportArea, reportPerimeter };
- -

As importações, por outro lado, são assim:

- -
import * as Canvas from './modules/canvas.js';
-
-import * as Square from './modules/square.js';
-import * as Circle from './modules/circle.js';
-import * as Triangle from './modules/triangle.js';
- -

Em cada caso, agora você pode acessar as importações do módulo abaixo do nome do objeto especificado, por exemplo:

- -
let square1 = Square.draw(myCanvas.ctx, 50, 50, 100, 'blue');
-Square.reportArea(square1.length, reportList);
-Square.reportPerimeter(square1.length, reportList);
- -

Agora você pode escrever o código da mesma forma que antes (contanto que inclua os nomes dos objetos quando necessário) e as importações sejam muito mais limpas.

- -

Módulos e classes

- -

Como sugerimos anteriormente, você também pode exportar e importar classes; essa é outra opção para evitar conflitos no seu código e é especialmente útil se você já tiver o código do módulo gravado em um estilo orientado a objetos.

- -

Você pode ver um exemplo do nosso módulo de desenho de forma reescrito com as classes ES em nosso classes diretório. Como exemplo, o square.js O arquivo agora contém todas as suas funcionalidades em uma única classe:

- -
class Square {
-  constructor(ctx, listId, length, x, y, color) {
-    ...
-  }
-
-  draw() {
-    ...
-  }
-
-  ...
-}
- -

que exportamos então:

- -
export { Square };
- -

No main.js, nós o importamos assim:

- -
import { Square } from './modules/square.js';
- -

E então use a classe para desenhar nosso quadrado:

- -
let square1 = new Square(myCanvas.ctx, myCanvas.listId, 50, 50, 100, 'blue');
-square1.draw();
-square1.reportArea();
-square1.reportPerimeter();
- -

Módulos de agregação

- -

Haverá momentos em que você desejará agregar módulos. Você pode ter vários níveis de dependências, nos quais deseja simplificar as coisas, combinando vários submódulos em um módulo pai. Isso é possível usando a sintaxe de exportação dos seguintes formulários no módulo pai:

- -
export * from 'x.js'
-export { name } from 'x.js'
- -

Por exemplo, veja nosso module-aggregation diretório. Neste exemplo (com base no exemplo de classes anteriores), temos um módulo extra chamado shapes.js, que agrega toda a funcionalidade de circle.js, square.js e triangle.js juntos. Também movemos nossos submódulos para dentro de um subdiretório dentro do diretório modules chamado shapes. Portanto, a estrutura do módulo neste exemplo é:

- -
modules/
-  canvas.js
-  shapes.js
-  shapes/
-    circle.js
-    square.js
-    triangle.js
- -

Em cada um dos submódulos, a exportação é da mesma forma, e.g.

- -
export { Square };
- -

Em seguida, vem a parte de agregação. Dentro de shapes.js, incluímos as seguintes linhas:

- -
export { Square } from './shapes/square.js';
-export { Triangle } from './shapes/triangle.js';
-export { Circle } from './shapes/circle.js';
- -

Eles capturam as exportações dos submódulos individuais e os disponibilizam efetivamente no módulo shapes.js.

- -
-

Nota: As exportações mencionadas no shapes.js são basicamente redirecionadas pelo arquivo e realmente não existem nele, portanto, você não poderá escrever nenhum código relacionado útil dentro do mesmo arquivo.

-
- -

Portanto, agora no arquivo main.js., podemos obter acesso às três classes de módulos substituindo

- -
import { Square } from './modules/square.js';
-import { Circle } from './modules/circle.js';
-import { Triangle } from './modules/triangle.js';
- -

com a seguinte linha única:

- -
import { Square, Circle, Triangle } from './modules/shapes.js';
- -

Carregamento dinâmico do módulo

- -

A parte mais recente da funcionalidade dos módulos JavaScript a estar disponível nos navegadores é o carregamento dinâmico de módulos. Isso permite que você carregue módulos dinamicamente somente quando eles forem necessários, em vez de precisar carregar tudo antecipadamente. Isso tem algumas vantagens óbvias de desempenho; vamos ler e ver como isso funciona.

- -

Essa nova funcionalidade permite que você ligue {{JSxRef("Statements/import", "import()", "#Dynamic_Imports")}} como uma função, passando o caminho para o módulo como um parâmetro. Retorna um{{JSxRef("Promise")}}, que cumpre com um objeto de módulo (consulte Creating a module object) dando acesso às exportações desse objeto, e.g.

- -
import('./modules/myModule.js')
-  .then((module) => {
-    // Do something with the module.
-  });
- -

Vejamos um exemplo. No dynamic-module-imports diretório, temos outro exemplo baseado em nosso exemplo de classes. Desta vez, no entanto, não estamos desenhando nada na tela quando o exemplo é carregado. Em vez disso, incluímos trêsbuttons — "Circle", "Square", e "Triangle" — que, quando pressionado, carrega dinamicamente o módulo necessário e, em seguida, usa-o para desenhar os shape.

- -

Neste exemplo, fizemos apenas alterações em nossa index.html e main.js arquivos - as exportações do módulo permanecem as mesmas de antes.

- -

No main.js, pegamos uma referência a cada botão usando umDocument.querySelector() chamada, por exemplo:

- -
let squareBtn = document.querySelector('.square');
- -

Em seguida, anexamos um ouvinte de evento a cada botão para que, quando pressionado, o módulo relevante seja carregado dinamicamente e usado para desenhar a forma(shape):

- -
squareBtn.addEventListener('click', () => {
-  import('./modules/square.js').then((Module) => {
-    let square1 = new Module.Square(myCanvas.ctx, myCanvas.listId, 50, 50, 100, 'blue');
-    square1.draw();
-    square1.reportArea();
-    square1.reportPerimeter();
-  })
-});
- -

Observe que, como o cumprimento da promessa retorna um objeto de módulo, a classe é então transformada em uma sub-característica do objeto, portanto, agora precisamos acessar o construtor com Module. anexado a ele, e.g. Module.Square( ... ).

- -

Solução de problemas

- -

Aqui estão algumas dicas que podem ajudá-lo se você estiver com problemas para fazer seus módulos funcionarem. Sinta-se livre para adicionar à lista se descobrir mais!

- -
    -
  • Mencionamos isso antes, mas para reiterar: arquivos.js precisa ser carregado com um tipo MIME de text/javascript (ou outro tipo MIME compatível com JavaScript, mas text/javascript é recomendável), caso contrário, você receberá um erro estrito de verificação do tipo MIME como "O servidor respondeu com um tipo MIME não JavaScript".
    • -
  • Se você tentar carregar o arquivo HTML localmente (i.e. com um arquivo:// URL), você encontrará erros do CORS devido a requisitos de segurança do módulo JavaScript. Você precisa fazer seus testes através de um servidor. As páginas do GitHub são ideais, pois também servem arquivos .js com o tipo MIME correto.
    • -
  • Como .mjs é uma extensão de arquivo não padrão, alguns sistemas operacionais podem não reconhecê-lo ou tentar substituí-lo por outra. Por exemplo, descobrimos que o macOS estava adicionando silenciosamente .js ao final dos arquivos .mjs e ocultando automaticamente a extensão do arquivo. Então, todos os nossos arquivos foram lançados como x.mjs.js. Depois de desativarmos ocultar automaticamente as extensões de arquivo e treiná-lo para aceitar .mjs, tudo bem.
    • -
- -

Veja também

- - - -

{{Previous("Web/JavaScript/Guide/Meta_programming")}}

diff --git a/files/pt-br/web/javascript/guide/numbers_and_dates/index.html b/files/pt-br/web/javascript/guide/numbers_and_dates/index.html new file mode 100644 index 0000000000..8f08cb3619 --- /dev/null +++ b/files/pt-br/web/javascript/guide/numbers_and_dates/index.html @@ -0,0 +1,374 @@ +--- +title: Números e datas +slug: Web/JavaScript/Guide/Numeros_e_datas +translation_of: Web/JavaScript/Guide/Numbers_and_dates +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Expressions_and_Operators", "Web/JavaScript/Guide/Text_formatting")}}
+ +

Este capítulo apresenta como utilizar números e datas em JavaScript.

+ +

Números

+ +

Em Javascript, todos os números são implementados em double-precision 64-bit binary format IEEE 754 (Por exemplo, um número entre -(253 -1) e 253 -1). Não havendo especificação de tipo Integer. Além de ser capaz de representar números de ponto flutuante, o tipo de número tem três valores simbólicos: +{{jsxref("Infinity")}}, -{{jsxref("Infinity")}}, and {{jsxref("NaN")}} (not-a-number).  Veja também Estruturas e Tipos de Dados em Javascript em contexto com outros tipos primitivos em JavaScript.

+ +

Você pode usar quatro tipos de números literais: decimal, binário, octal, e hexadecimal.

+ +

Números Decimais

+ +
1234567890
+42
+
+// Cuidado quando usar zeros à esquerda:
+
+0888 // 888 interpretado como decimal
+0777 // interpretado como octal  em modo no-strict (511 em decimal)
+
+ +

Note que literais decimais podem começar com zero (0)  seguido por outro digito decimal, porém se o próximo dígito depois do primeiro zero for menor do que 8, o número será analisado como um número octal.

+ +

Números Binários

+ +

A sintaxe para números Binários, usa um zero à esquerda seguido de uma letra minúscula ou maiúscula "B" (0b or 0B). Se os dígitos depois de 0b não forem 0 ou 1, a seguinte exceção SyntaxError é lançada: "Missing binary digits after 0b".

+ +
var FLT_SIGNBIT  = 0b10000000000000000000000000000000; // 2147483648
+var FLT_EXPONENT = 0b01111111100000000000000000000000; // 2139095040
+var FLT_MANTISSA = 0B00000000011111111111111111111111; // 8388607
+ +

Números octais

+ +

A sintaxe dos números octais usa um zero na frente. Se os dígitos depois do 0 estiverem fora do alcance 0 a 7, o número será interpretado como um número decimal.

+ +
var n = 0755; // 493
+var m = 0644; // 420
+
+ +

Modo estrito no ECMAScript 5 proíbe a sintaxe octal. A sintaxe Octal não é parte do ECMAScript 5, mas é suportada por todos os navegadores prefixando o número octal com zero: 0644 === 420 e "\045" === "%". Em ECMAScript 6 números Octais são suportados prefixando o número com "0o" isto é.

+ +
var a = 0o10; // ES6: Octal
+
+ +

Numeros hexadecimais

+ +

A sintaxe numérica Hexadecimal usa um 0 na frente seguido por uma letra "X" maiúscula ou minúscula (0x ou 0X). Se os dígidos depois do 0x estiverem fora do alcance (0123456789ABCDF), o seguinte erro de sintaxe (SyntaxError) ocorrerá: "Identifier starts immediately after numeric literal" (O identificador começa imediatamente depois do literal numérico).

+ +
0xFFFFFFFFFFFFFFFFF // 295147905179352830000
+0x123456789ABCDEF   // 81985529216486900
+0XA                 // 10
+
+ +

Exponenciação

+ +
1E3   // 1000
+2e6   // 2000000
+0.1e2 // 10
+ +

Objeto Number

+ +

Um objeto built-in {{jsxref("Number")}} tem propriedades para constantes numéricas, tais como valor máximo, não número e infinito. Você não pode alterar os valores dessas propriedades e elas são usadas assim:

+ +
var maiorNum = Number.MAX_VALUE; //Valor máximo
+var menorNum = Number.MIN_VALUE; //Valor mínimo
+var infiniteNum = Number.POSITIVE_INFINITY; //Infinito positivo
+var negInfiniteNum = Number.NEGATIVE_INFINITY; //Infinito negativo
+var notANum = Number.NaN; //Não é numeral
+
+ +

Você sempre se refere a uma propriedade do objeto predefinido Number como mostrado acima, e não como uma propriedade de um objeto Number que você mesmo criou.

+ +

A tabela à seguir sumariza as propriedades do objeto Number.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Propriedades de Number
PropriedadeDescrição
{{jsxref("Number.MAX_VALUE")}}O maior número representável.
{{jsxref("Number.MIN_VALUE")}}O menor número representável.
{{jsxref("Number.NaN")}}Valor "not a number" especial
{{jsxref("Number.NEGATIVE_INFINITY")}}Valor especial infinito negativo; retornado em overflow
{{jsxref("Number.POSITIVE_INFINITY")}}Valor especial infinito positivo; retornado em overflow
{{jsxref("Number.EPSILON")}}Diferença entre um e o menor valor maior do que um que pode ser representado como um {{jsxref("Number")}}.
{{jsxref("Number.MIN_SAFE_INTEGER")}}Mínimo safe integer em JavaScript.
{{jsxref("Number.MAX_SAFE_INTEGER")}}Máximo safe integer em JavaScript.
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Métodos de Number
MétodoDescrição
{{jsxref("Number.parseFloat()")}}Analisa um argumento string e retorna um número float.
+ O mesmo que a função global {{jsxref("parseFloat", "parseFloat()")}}.
{{jsxref("Number.parseInt()")}}Analisa um argumento string e retorna um inteiro da raiz ou base especificada.
+ O mesmo que a função global{{jsxref("parseInt", "parseInt()")}}.
{{jsxref("Number.isFinite()")}}Determina se o valor passado é um número finito.
{{jsxref("Number.isInteger()")}}Determina se o valor passado é um inteiro.
{{jsxref("Number.isNaN()")}}Determina se o valor passado é {{jsxref("Global_Objects/NaN", "NaN")}}. A versão mais robusta da original {{jsxref("Global_Objects/isNaN", "isNaN()")}}.
{{jsxref("Number.isSafeInteger()")}}Determina se o valor passado é um safe integer.
+ +

O protótipo Number provê métodos para resgatar informações de objetos Number em vários formatos. A tabela a seguir sumariza os métodos de Number.prototype.

+ + + + + + + + + + + + + + + + + + + + + + + +
Métodos de Number.prototype
MétodoDescrição
{{jsxref("Number.toExponential", "toExponential()")}}Retorna uma string representando o número em uma notação exponencial.
{{jsxref("Number.toFixed", "toFixed()")}}Retorna uma string representando o número em notação com ponto-fíxo.
{{jsxref("Number.toPrecision", "toPrecision()")}}Retorna uma string representando o número em uma precisão especificada na notação de ponto-fíxo.
+ +

Objeto Math

+ +

O objeto {{jsxref("Math")}} tem propriedades e métodos para constantes matemáticas e funções. Por exemplo, o PI do objeto Math tem o valor de pi (3,141...), que você usaria em uma aplicação como

+ +
Math.PI
+
+ +

Similarmente, funções matemáticas padrão são métodos do Math. Isto inclui funções trigonométricas, logarítmicas, exponenciais, e outras funções. Por exemplo, se você quiser usar a função trigonométrica seno, basta escrever

+ +
Math.sin(1.56)
+
+ +

Note que todos os métodos trigonométricos pegam argumentos em radianos.

+ +

A tabela a seguir sumariza os métodos do objeto Math.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Métodos de Math
MétodoDescrição
{{jsxref("Math.abs", "abs()")}}Valor absoluto
{{jsxref("Math.sin", "sin()")}}, {{jsxref("Math.cos", "cos()")}}, {{jsxref("Math.tan", "tan()")}}Funções trigonométricas padrão; Argumentos em radianos
{{jsxref("Math.asin", "asin()")}}, {{jsxref("Math.acos", "acos()")}}, {{jsxref("Math.atan", "atan()")}}, {{jsxref("Math.atan2", "atan2()")}}Funções trigonométricas inversas; retorna valores em radianos
{{jsxref("Math.sinh", "sinh()")}}, {{jsxref("Math.cosh", "cosh()")}}, {{jsxref("Math.tanh", "tanh()")}}Funções trigonométricas hiperbólicas; retorna valores em radianos.
{{jsxref("Math.asinh", "asinh()")}}, {{jsxref("Math.acosh", "acosh()")}}, {{jsxref("Math.atanh", "atanh()")}}Funções trigonométricas hiperbólicas inversas; retorna valores em radianos.
+

{{jsxref("Math.pow", "pow()")}}, {{jsxref("Math.exp", "exp()")}}, {{jsxref("Math.expm1", "expm1()")}}, {{jsxref("Math.log10", "log10()")}}, {{jsxref("Math.log1p", "log1p()")}}, {{jsxref("Math.log2", "log2()")}}

+ 		Funções exponenciais e logarítmicas.
{{jsxref("Math.floor", "floor()")}}, {{jsxref("Math.ceil", "ceil()")}}Retorna o maior/menor inteiro que é menor/maior inteiro que ou igual ao argumento.
{{jsxref("Math.min", "min()")}}, {{jsxref("Math.max", "max()")}}Retorna menor ou maior (respectivamente) de uma lista separada por vírgula de argumentos numéricos
{{jsxref("Math.random", "random()")}}Retorna um número aleatório entre 0 e 1.
{{jsxref("Math.round", "round()")}}, {{jsxref("Math.fround", "fround()")}}, {{jsxref("Math.trunc", "trunc()")}},Funções de arredondamento e truncamento.
{{jsxref("Math.sqrt", "sqrt()")}}, {{jsxref("Math.cbrt", "cbrt()")}}, {{jsxref("Math.hypot", "hypot()")}}Raiz quadrada, raiz cúbica, raiz quadrada da soma de argumentos ao quadrado.
{{jsxref("Math.sign", "sign()")}}O sinal de um número, indicando se o número é positivo, negativo ou zero.
{{jsxref("Math.clz32", "clz32()")}},
+ {{jsxref("Math.imul", "imul()")}}		Número de zeros à esquerda na representação binária de 32-bits.
+ The result of the C-like 32-bit multiplication of the two arguments.
+ +

Diferentemente de muitos outros objetos, você nunca cria um objeto Math por conta própria. Você sempre deve utilizar o objeto Math nativo.

+ +

Objeto Date

+ +

JavaScript não possui dados do tipo data. No entanto, você pode usar o objeto {{jsxref("Date")}} e seus métodos para trabalhar com datas e horas nas suas aplicações. O objeto Date tem um grande número de métodos para setar, recuperar e manipular datas. Ele não tem nenhuma propriedade.

+ +

JavaScript manipula datas de maneira semelhante ao Java. As duas linguagens tem muitos dos mesmos métodos para lidar com datas e ambas armazenam datas como números em milisegundos, desde 1 de janeiro de 1970, às 00:00:00 ( January 1, 1970, 00:00:00).

+ +

A abrangência do objeto Date é de -100,000,000 dias até 100,000,000 dias relativos a 01 de janeiro de 1970 UTC.

+ +

Para criar um objeto Date:

+ +
var dateObjectName = new Date([parameters]);
+
+ +

onde dateObjectName é o nome do objeto Date que está sendo criado; ele pode ser um novo objeto ou uma propriedade de um objeto existente.

+ +

A chamada de Date sem a palavra reservada new, simplesmente converte a data para uma representação dela como string.

+ +

Os parâmetros do código acima podem ser qualquer um a seguir:

+ +
    +
  • Nada: cria a data e hora de hoje. Por exemplo, today = new Date();.
    • +
  • Uma string representando uma data da seguinte forma: "Mês dia, ano, horas:minutos:segundos". Por exemplo, Xmas95 = new Date("25 de dezembro de 1995, 13:30:00"). Se você omitir as horas, minutos ou segundos, o valor será setado para zero.
    • +
  • Um conjunto de valores inteiros para ano, mês e dia. Por exemplo, var Xmas95 = new Date(1995, 11, 25).
    • +
  • Um conjunto de valores inteiros par ano, mês, dia, hora, minuto e segundos. Por exemplo, var Xmas95 = new Date(1995, 11, 25, 9, 30, 0);.
    • +
+ +

Métodos do objeto Date

+ +

Os métodos do objeto Date para manipular data e hora pertencem às seguintes categorias:

+ +
    +
  • Métodos "set", para setar valores de data e hora em objetos Date.
    • +
  • Métodos "get", para recuperar valores de data e hora de objetos Date.
    • +
  • Métodos "to", para retornar valores de string de objetos Date.
    • +
  • Métodos parse e UTC, para parsear string de Data.
    • +
+ +

Com os métods "get" e "set", você pode recuperar e setar segundos, minutos, horas, dia e mês, dia da semana, meses e anos, separadamente. Existe um método getDay que retorna o dia da semana, mas não existe um método setDay correspondente, porque o dia da semana é setado automaticamente. Estes métodos utilizam números inteiros para representar estes valores da seguinte maneira:

+ +
    +
  • Segundos e minutos: de 0 a 59
    • +
  • Horas: de 0 a 23
    • +
  • Dia: 0 (Domingo) a 6 (Sábado)
    • +
  • Data: 1 a 31 (dia do mês)
    • +
  • Meses: 0 (Janeiro) a 11 (Dezembro)
    • +
  • Ano: anos desde 1900
    • +
+ +

Por exemplo, suponha que você queira definir a seguinite data:

+ +
var Xmas95 = new Date("December 25, 1995");
+
+ +

Então Xmas95.getMonth() retorna 11 e Xmas95.getFullYear() retorna 1995.

+ +

Os métodos getTime e setTime são úteis para comparar datas. O método getTime retorna o número dos milisegundos desde 1 de janeiro de 1970, às 00:00:00 para um objeto Date.

+ +

Por exemplo, o código a seguir mostra os números dos dias que ainda faltam do ano vigente:

+ +
var hoje = new Date();
+var fimAno = new Date(1995, 11, 31, 23, 59, 59, 999); // Seta dia e mês
+fimAno.setFullYear(hoje.getFullYear()); // Seta o ano para esse ano
+var msPorDia = 24 * 60 * 60 * 1000; // Quantidade de milisegundos por dia
+var diasRestantes = (fimAno.getTime() - hoje.getTime()) / msPorDia;
+var diasRestantes = Math.round(diasRestantes); //retorna os dias restantes no ano
+
+ +

Este exemplo cria um objeto Date chamado hoje que contém a data de hoje. Ele, então, cria o objeto Date chamado fimAno e seta o ano para o ano vigente. Então, usando o número de milisegundos por dia, ele computa o número de dias entre hoje e fimAno, usando getTime e arredondando os números de dias.

+ +

O método parse é útil para associar valores de strings de data para objetos Date existentes. Por exemplo, o código a seguir usa parse e setTime para associar um valor de data ao objeto IPOdate:

+ +
var IPOdate = new Date();
+IPOdate.setTime(Date.parse("Aug 9, 1995"));
+
+ +

No exemplo a seguir, a função  JSClock() retorna o tempo no formato de um relógio digital.

+ +
function JSClock() {
+  var tempo = new Date();
+  var hora = tempo.getHours();
+  var minuto = tempo.getMinutes();
+  var segundo = tempo.getSeconds();
+  var temp = "" + ((hora > 12) ? hora - 12 : hora);
+  if (hora == 0)
+    temp = "12";
+  temp += ((minuto < 10) ? ":0" : ":") + minuto;
+  temp += ((segundo < 10) ? ":0" : ":") + segundo;
+  temp += (hora >= 12) ? " P.M." : " A.M.";
+  return temp;
+}
+
+ +

A função JSClock primeiro cria um objeto new Date chamado tempo; já que nenhum argumento é passado, tempo é criado com data e hora atuais. Ela então chama os métodos getHours, getMinutes e getSeconds e associa o valor à hora, minuto e segundo atuais à hora, minuto e segundo.

+ +

As próximas quatro declarações constroem uma string baseada em time. A primeira declaração cria uma variável temp, associando um valor utilizando uma expressão condicional; se hora é maior que 12, (hora - 12), senão simplesmente hora, a não ser que hora seja 0 que, nesse caso, será 12.

+ +

A próxima declaração anexa um valor minuto a temp. Se o valor de minuto for menos que 10, a expressão condicional acrescenta uma string com um 0 na frente; senão ela acrescenta uma string com dois pontos. Então a declaração anexa um valor segundo a temp do mesmo jeito.

+ +

Finalmente, a expressão condicional anexa "P.M." a temp se hora for 12 ou maior; senão ela anexa "A.M." a temp.

+ +

{{PreviousNext("Web/JavaScript/Guide/Expressions_and_Operators", "Web/JavaScript/Guide/Text_formatting")}}

diff --git a/files/pt-br/web/javascript/guide/numeros_e_datas/index.html b/files/pt-br/web/javascript/guide/numeros_e_datas/index.html deleted file mode 100644 index 8f08cb3619..0000000000 --- a/files/pt-br/web/javascript/guide/numeros_e_datas/index.html +++ /dev/null @@ -1,374 +0,0 @@ ---- -title: Números e datas -slug: Web/JavaScript/Guide/Numeros_e_datas -translation_of: Web/JavaScript/Guide/Numbers_and_dates ---- -
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Expressions_and_Operators", "Web/JavaScript/Guide/Text_formatting")}}
- -

Este capítulo apresenta como utilizar números e datas em JavaScript.

- -

Números

- -

Em Javascript, todos os números são implementados em double-precision 64-bit binary format IEEE 754 (Por exemplo, um número entre -(253 -1) e 253 -1). Não havendo especificação de tipo Integer. Além de ser capaz de representar números de ponto flutuante, o tipo de número tem três valores simbólicos: +{{jsxref("Infinity")}}, -{{jsxref("Infinity")}}, and {{jsxref("NaN")}} (not-a-number).  Veja também Estruturas e Tipos de Dados em Javascript em contexto com outros tipos primitivos em JavaScript.

- -

Você pode usar quatro tipos de números literais: decimal, binário, octal, e hexadecimal.

- -

Números Decimais

- -
1234567890
-42
-
-// Cuidado quando usar zeros à esquerda:
-
-0888 // 888 interpretado como decimal
-0777 // interpretado como octal  em modo no-strict (511 em decimal)
-
- -

Note que literais decimais podem começar com zero (0)  seguido por outro digito decimal, porém se o próximo dígito depois do primeiro zero for menor do que 8, o número será analisado como um número octal.

- -

Números Binários

- -

A sintaxe para números Binários, usa um zero à esquerda seguido de uma letra minúscula ou maiúscula "B" (0b or 0B). Se os dígitos depois de 0b não forem 0 ou 1, a seguinte exceção SyntaxError é lançada: "Missing binary digits after 0b".

- -
var FLT_SIGNBIT  = 0b10000000000000000000000000000000; // 2147483648
-var FLT_EXPONENT = 0b01111111100000000000000000000000; // 2139095040
-var FLT_MANTISSA = 0B00000000011111111111111111111111; // 8388607
- -

Números octais

- -

A sintaxe dos números octais usa um zero na frente. Se os dígitos depois do 0 estiverem fora do alcance 0 a 7, o número será interpretado como um número decimal.

- -
var n = 0755; // 493
-var m = 0644; // 420
-
- -

Modo estrito no ECMAScript 5 proíbe a sintaxe octal. A sintaxe Octal não é parte do ECMAScript 5, mas é suportada por todos os navegadores prefixando o número octal com zero: 0644 === 420 e "\045" === "%". Em ECMAScript 6 números Octais são suportados prefixando o número com "0o" isto é.

- -
var a = 0o10; // ES6: Octal
-
- -

Numeros hexadecimais

- -

A sintaxe numérica Hexadecimal usa um 0 na frente seguido por uma letra "X" maiúscula ou minúscula (0x ou 0X). Se os dígidos depois do 0x estiverem fora do alcance (0123456789ABCDF), o seguinte erro de sintaxe (SyntaxError) ocorrerá: "Identifier starts immediately after numeric literal" (O identificador começa imediatamente depois do literal numérico).

- -
0xFFFFFFFFFFFFFFFFF // 295147905179352830000
-0x123456789ABCDEF   // 81985529216486900
-0XA                 // 10
-
- -

Exponenciação

- -
1E3   // 1000
-2e6   // 2000000
-0.1e2 // 10
- -

Objeto Number

- -

Um objeto built-in {{jsxref("Number")}} tem propriedades para constantes numéricas, tais como valor máximo, não número e infinito. Você não pode alterar os valores dessas propriedades e elas são usadas assim:

- -
var maiorNum = Number.MAX_VALUE; //Valor máximo
-var menorNum = Number.MIN_VALUE; //Valor mínimo
-var infiniteNum = Number.POSITIVE_INFINITY; //Infinito positivo
-var negInfiniteNum = Number.NEGATIVE_INFINITY; //Infinito negativo
-var notANum = Number.NaN; //Não é numeral
-
- -

Você sempre se refere a uma propriedade do objeto predefinido Number como mostrado acima, e não como uma propriedade de um objeto Number que você mesmo criou.

- -

A tabela à seguir sumariza as propriedades do objeto Number.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Propriedades de Number
PropriedadeDescrição
{{jsxref("Number.MAX_VALUE")}}O maior número representável.
{{jsxref("Number.MIN_VALUE")}}O menor número representável.
{{jsxref("Number.NaN")}}Valor "not a number" especial
{{jsxref("Number.NEGATIVE_INFINITY")}}Valor especial infinito negativo; retornado em overflow
{{jsxref("Number.POSITIVE_INFINITY")}}Valor especial infinito positivo; retornado em overflow
{{jsxref("Number.EPSILON")}}Diferença entre um e o menor valor maior do que um que pode ser representado como um {{jsxref("Number")}}.
{{jsxref("Number.MIN_SAFE_INTEGER")}}Mínimo safe integer em JavaScript.
{{jsxref("Number.MAX_SAFE_INTEGER")}}Máximo safe integer em JavaScript.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Métodos de Number
MétodoDescrição
{{jsxref("Number.parseFloat()")}}Analisa um argumento string e retorna um número float.
- O mesmo que a função global {{jsxref("parseFloat", "parseFloat()")}}.
{{jsxref("Number.parseInt()")}}Analisa um argumento string e retorna um inteiro da raiz ou base especificada.
- O mesmo que a função global{{jsxref("parseInt", "parseInt()")}}.
{{jsxref("Number.isFinite()")}}Determina se o valor passado é um número finito.
{{jsxref("Number.isInteger()")}}Determina se o valor passado é um inteiro.
{{jsxref("Number.isNaN()")}}Determina se o valor passado é {{jsxref("Global_Objects/NaN", "NaN")}}. A versão mais robusta da original {{jsxref("Global_Objects/isNaN", "isNaN()")}}.
{{jsxref("Number.isSafeInteger()")}}Determina se o valor passado é um safe integer.
- -

O protótipo Number provê métodos para resgatar informações de objetos Number em vários formatos. A tabela a seguir sumariza os métodos de Number.prototype.

- - - - - - - - - - - - - - - - - - - - - - - -
Métodos de Number.prototype
MétodoDescrição
{{jsxref("Number.toExponential", "toExponential()")}}Retorna uma string representando o número em uma notação exponencial.
{{jsxref("Number.toFixed", "toFixed()")}}Retorna uma string representando o número em notação com ponto-fíxo.
{{jsxref("Number.toPrecision", "toPrecision()")}}Retorna uma string representando o número em uma precisão especificada na notação de ponto-fíxo.
- -

Objeto Math

- -

O objeto {{jsxref("Math")}} tem propriedades e métodos para constantes matemáticas e funções. Por exemplo, o PI do objeto Math tem o valor de pi (3,141...), que você usaria em uma aplicação como

- -
Math.PI
-
- -

Similarmente, funções matemáticas padrão são métodos do Math. Isto inclui funções trigonométricas, logarítmicas, exponenciais, e outras funções. Por exemplo, se você quiser usar a função trigonométrica seno, basta escrever

- -
Math.sin(1.56)
-
- -

Note que todos os métodos trigonométricos pegam argumentos em radianos.

- -

A tabela a seguir sumariza os métodos do objeto Math.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Métodos de Math
MétodoDescrição
{{jsxref("Math.abs", "abs()")}}Valor absoluto
{{jsxref("Math.sin", "sin()")}}, {{jsxref("Math.cos", "cos()")}}, {{jsxref("Math.tan", "tan()")}}Funções trigonométricas padrão; Argumentos em radianos
{{jsxref("Math.asin", "asin()")}}, {{jsxref("Math.acos", "acos()")}}, {{jsxref("Math.atan", "atan()")}}, {{jsxref("Math.atan2", "atan2()")}}Funções trigonométricas inversas; retorna valores em radianos
{{jsxref("Math.sinh", "sinh()")}}, {{jsxref("Math.cosh", "cosh()")}}, {{jsxref("Math.tanh", "tanh()")}}Funções trigonométricas hiperbólicas; retorna valores em radianos.
{{jsxref("Math.asinh", "asinh()")}}, {{jsxref("Math.acosh", "acosh()")}}, {{jsxref("Math.atanh", "atanh()")}}Funções trigonométricas hiperbólicas inversas; retorna valores em radianos.
-

{{jsxref("Math.pow", "pow()")}}, {{jsxref("Math.exp", "exp()")}}, {{jsxref("Math.expm1", "expm1()")}}, {{jsxref("Math.log10", "log10()")}}, {{jsxref("Math.log1p", "log1p()")}}, {{jsxref("Math.log2", "log2()")}}

- 		Funções exponenciais e logarítmicas.
{{jsxref("Math.floor", "floor()")}}, {{jsxref("Math.ceil", "ceil()")}}Retorna o maior/menor inteiro que é menor/maior inteiro que ou igual ao argumento.
{{jsxref("Math.min", "min()")}}, {{jsxref("Math.max", "max()")}}Retorna menor ou maior (respectivamente) de uma lista separada por vírgula de argumentos numéricos
{{jsxref("Math.random", "random()")}}Retorna um número aleatório entre 0 e 1.
{{jsxref("Math.round", "round()")}}, {{jsxref("Math.fround", "fround()")}}, {{jsxref("Math.trunc", "trunc()")}},Funções de arredondamento e truncamento.
{{jsxref("Math.sqrt", "sqrt()")}}, {{jsxref("Math.cbrt", "cbrt()")}}, {{jsxref("Math.hypot", "hypot()")}}Raiz quadrada, raiz cúbica, raiz quadrada da soma de argumentos ao quadrado.
{{jsxref("Math.sign", "sign()")}}O sinal de um número, indicando se o número é positivo, negativo ou zero.
{{jsxref("Math.clz32", "clz32()")}},
- {{jsxref("Math.imul", "imul()")}}		Número de zeros à esquerda na representação binária de 32-bits.
- The result of the C-like 32-bit multiplication of the two arguments.
- -

Diferentemente de muitos outros objetos, você nunca cria um objeto Math por conta própria. Você sempre deve utilizar o objeto Math nativo.

- -

Objeto Date

- -

JavaScript não possui dados do tipo data. No entanto, você pode usar o objeto {{jsxref("Date")}} e seus métodos para trabalhar com datas e horas nas suas aplicações. O objeto Date tem um grande número de métodos para setar, recuperar e manipular datas. Ele não tem nenhuma propriedade.

- -

JavaScript manipula datas de maneira semelhante ao Java. As duas linguagens tem muitos dos mesmos métodos para lidar com datas e ambas armazenam datas como números em milisegundos, desde 1 de janeiro de 1970, às 00:00:00 ( January 1, 1970, 00:00:00).

- -

A abrangência do objeto Date é de -100,000,000 dias até 100,000,000 dias relativos a 01 de janeiro de 1970 UTC.

- -

Para criar um objeto Date:

- -
var dateObjectName = new Date([parameters]);
-
- -

onde dateObjectName é o nome do objeto Date que está sendo criado; ele pode ser um novo objeto ou uma propriedade de um objeto existente.

- -

A chamada de Date sem a palavra reservada new, simplesmente converte a data para uma representação dela como string.

- -

Os parâmetros do código acima podem ser qualquer um a seguir:

- -
    -
  • Nada: cria a data e hora de hoje. Por exemplo, today = new Date();.
    • -
  • Uma string representando uma data da seguinte forma: "Mês dia, ano, horas:minutos:segundos". Por exemplo, Xmas95 = new Date("25 de dezembro de 1995, 13:30:00"). Se você omitir as horas, minutos ou segundos, o valor será setado para zero.
    • -
  • Um conjunto de valores inteiros para ano, mês e dia. Por exemplo, var Xmas95 = new Date(1995, 11, 25).
    • -
  • Um conjunto de valores inteiros par ano, mês, dia, hora, minuto e segundos. Por exemplo, var Xmas95 = new Date(1995, 11, 25, 9, 30, 0);.
    • -
- -

Métodos do objeto Date

- -

Os métodos do objeto Date para manipular data e hora pertencem às seguintes categorias:

- -
    -
  • Métodos "set", para setar valores de data e hora em objetos Date.
    • -
  • Métodos "get", para recuperar valores de data e hora de objetos Date.
    • -
  • Métodos "to", para retornar valores de string de objetos Date.
    • -
  • Métodos parse e UTC, para parsear string de Data.
    • -
- -

Com os métods "get" e "set", você pode recuperar e setar segundos, minutos, horas, dia e mês, dia da semana, meses e anos, separadamente. Existe um método getDay que retorna o dia da semana, mas não existe um método setDay correspondente, porque o dia da semana é setado automaticamente. Estes métodos utilizam números inteiros para representar estes valores da seguinte maneira:

- -
    -
  • Segundos e minutos: de 0 a 59
    • -
  • Horas: de 0 a 23
    • -
  • Dia: 0 (Domingo) a 6 (Sábado)
    • -
  • Data: 1 a 31 (dia do mês)
    • -
  • Meses: 0 (Janeiro) a 11 (Dezembro)
    • -
  • Ano: anos desde 1900
    • -
- -

Por exemplo, suponha que você queira definir a seguinite data:

- -
var Xmas95 = new Date("December 25, 1995");
-
- -

Então Xmas95.getMonth() retorna 11 e Xmas95.getFullYear() retorna 1995.

- -

Os métodos getTime e setTime são úteis para comparar datas. O método getTime retorna o número dos milisegundos desde 1 de janeiro de 1970, às 00:00:00 para um objeto Date.

- -

Por exemplo, o código a seguir mostra os números dos dias que ainda faltam do ano vigente:

- -
var hoje = new Date();
-var fimAno = new Date(1995, 11, 31, 23, 59, 59, 999); // Seta dia e mês
-fimAno.setFullYear(hoje.getFullYear()); // Seta o ano para esse ano
-var msPorDia = 24 * 60 * 60 * 1000; // Quantidade de milisegundos por dia
-var diasRestantes = (fimAno.getTime() - hoje.getTime()) / msPorDia;
-var diasRestantes = Math.round(diasRestantes); //retorna os dias restantes no ano
-
- -

Este exemplo cria um objeto Date chamado hoje que contém a data de hoje. Ele, então, cria o objeto Date chamado fimAno e seta o ano para o ano vigente. Então, usando o número de milisegundos por dia, ele computa o número de dias entre hoje e fimAno, usando getTime e arredondando os números de dias.

- -

O método parse é útil para associar valores de strings de data para objetos Date existentes. Por exemplo, o código a seguir usa parse e setTime para associar um valor de data ao objeto IPOdate:

- -
var IPOdate = new Date();
-IPOdate.setTime(Date.parse("Aug 9, 1995"));
-
- -

No exemplo a seguir, a função  JSClock() retorna o tempo no formato de um relógio digital.

- -
function JSClock() {
-  var tempo = new Date();
-  var hora = tempo.getHours();
-  var minuto = tempo.getMinutes();
-  var segundo = tempo.getSeconds();
-  var temp = "" + ((hora > 12) ? hora - 12 : hora);
-  if (hora == 0)
-    temp = "12";
-  temp += ((minuto < 10) ? ":0" : ":") + minuto;
-  temp += ((segundo < 10) ? ":0" : ":") + segundo;
-  temp += (hora >= 12) ? " P.M." : " A.M.";
-  return temp;
-}
-
- -

A função JSClock primeiro cria um objeto new Date chamado tempo; já que nenhum argumento é passado, tempo é criado com data e hora atuais. Ela então chama os métodos getHours, getMinutes e getSeconds e associa o valor à hora, minuto e segundo atuais à hora, minuto e segundo.

- -

As próximas quatro declarações constroem uma string baseada em time. A primeira declaração cria uma variável temp, associando um valor utilizando uma expressão condicional; se hora é maior que 12, (hora - 12), senão simplesmente hora, a não ser que hora seja 0 que, nesse caso, será 12.

- -

A próxima declaração anexa um valor minuto a temp. Se o valor de minuto for menos que 10, a expressão condicional acrescenta uma string com um 0 na frente; senão ela acrescenta uma string com dois pontos. Então a declaração anexa um valor segundo a temp do mesmo jeito.

- -

Finalmente, a expressão condicional anexa "P.M." a temp se hora for 12 ou maior; senão ela anexa "A.M." a temp.

- -

{{PreviousNext("Web/JavaScript/Guide/Expressions_and_Operators", "Web/JavaScript/Guide/Text_formatting")}}

diff --git a/files/pt-br/web/javascript/guide/sintaxe_e_tipos/index.html b/files/pt-br/web/javascript/guide/sintaxe_e_tipos/index.html deleted file mode 100644 index 953a9543de..0000000000 --- a/files/pt-br/web/javascript/guide/sintaxe_e_tipos/index.html +++ /dev/null @@ -1,583 +0,0 @@ ---- -title: Sintaxe e tipos -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:

- -
    -
  • Com a palavra chave {{jsxref("Statements/var", "var")}}. Por exemplo, var x = 42. Esta sintaxe pode ser usada para declarar tanto variáveis locais como variáveis global.
    • -
  • Por simples adição de valor. Por exemplo, x = 42. Isso declara uma variável global. Essa declaração gera um aviso de advertência no JavaScript. Você não deve usar essa variante.
    • -
  • Com a palavra chave {{jsxref("Statements/let", "let")}}. Por exemplo, let y = 13. Essa sintaxe pode ser usada para declarar uma variável local de escopo de bloco. Veja escopo de variável abaixo.
    • -
- -

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:

- -
    -
  • Seis tipos de dados são os chamados {{Glossary("Primitive", "primitivos")}}: -
      -
    • {{Glossary("Boolean")}}. true e false.
      • -
    • {{Glossary("null")}}. Uma palavra-chave que indica valor nulo. Devido JavaScript ser case-sensitive, null não é o mesmo que Null, NULL, ou ainda outra variação.
      • -
    • {{Glossary("undefined")}}. Uma propriedade superior cujo valor é indefinido.
      • -
    • {{Glossary("Number")}}. 42 ou 3.14159.
      • -
    • {{Glossary("String")}}. "Howdy"
      • -
    • {{Glossary("Symbol")}} (novo em ECMAScript 6). Um tipo de dado cuja as instâncias são únicas e imutáveis.
      • -
    -
    • -
  • e {{Glossary("Object")}}
    • -
- -

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.

- -
    -
  • {{jsxref("parseInt", "parseInt()")}}
    • -
  • {{jsxref("parseFloat", "parseFloat()")}}
    • -
- -

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:

- -
    -
  • {{anch("Array literal")}}
    • -
  • {{anch("Literais boolean")}}
    • -
  • {{anch("Literais de ponto flutuante")}}
    • -
  • {{anch("Inteiros")}}
    • -
  • {{anch("Objeto literal")}}
    • -
  • {{anch("String literal")}}
    • -
- -

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

- -
    -
  • Decimal inteiro literal consiste em uma sequência de dígitos sem um 0 (zero).
    • -
  • 0 (zero) em um inteiro literal indica que ele está em octal. Octal pode incluir somente os dígitos 0-7.
    • -
  • 0x (ou 0X) indica um hexadecimal. Inteiros hexadecimais podem incluir dígitos (0-9) e as letras a-f e A-F.
    • -
  • 0b (ou 0B) indica um binário. Inteiros binário podem incluir apenas os dígitos 0 e 1.
    • -
- -

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:

- -
    -
  • Um inteiro decimal que pode ter sinal (precedido por "+" ou "-"),
    • -
  • Um ponto decimal ("."),
    • -
  • Uma fração (outro número decimal),
    • -
  • Um expoente.
    • -
- -

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/web/javascript/guide/text_formatting/index.html b/files/pt-br/web/javascript/guide/text_formatting/index.html new file mode 100644 index 0000000000..1b4bb50772 --- /dev/null +++ b/files/pt-br/web/javascript/guide/text_formatting/index.html @@ -0,0 +1,250 @@ +--- +title: Formatando texto +slug: Web/JavaScript/Guide/Formatando_texto +tags: + - Guía + - JavaScript +translation_of: Web/JavaScript/Guide/Text_formatting +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Numbers_and_dates", "Web/JavaScript/Guide/Regular_Expressions")}}
+ +

Esse capítulo introduz como trabalhar com strings e texto em JavaScript.

+ +

Strings

+ +

O tipo {{Glossary("String")}} do JavaScript é usado para representar informações de texto. É um conjunto de "elementos" composto por valores inteiros de 16-bits sem sinal. Cada elemento dentro da String ocupa uma posição dentro dessa String. O primeiro elemento está no índice 0, o próximo no índice 1, e assim sucessivamente. O tamanho de uma String é a quantidade de elementos que ela possui. Você pode criar strings usando strings literais ou objetos string.

+ +

Strings literais

+ +

Você pode criar strings usando aspas simples ou aspas duplas:

+ +
'foo'
+"bar"
+ +

Strings mais avançadas podem ser criadas usando sequências de escape:

+ +

Sequências de escape hexadecimais

+ +

O número depois de \x é interpretado como um número hexadecimal.

+ +
'\xA9' // "©"
+
+ +

Sequências de escape unicode

+ +

As sequências de escape unicode requerem no mínimo quatro caracteres depois do \u.

+ +
'\u00A9' // "©"
+ +

Sequências de escape Unicode code point

+ +

É novo no ECMAScript 6. Com essas sequências, cada caractere pode ser "escapado" usando números hexadecimais, sendo possível usar pontos de código Unicode de até 0x10FFFF. Com escapes Unicode simples muitas vezes é necessário escrever as metades substitutas separadamente para obter o mesmo resultado.

+ +

Veja também {{jsxref("String.fromCodePoint()")}} or {{jsxref("String.prototype.codePointAt()")}}.

+ +
'\u{2F804}'
+
+// o mesmo com escapes Unicode simples
+'\uD87E\uDC04'
+ +

Objetos String

+ +

O objeto {{jsxref("String")}} é como uma "capa" ao redor do tipo primitivo string.

+ +
var s = new String("foo"); // Cria um objeto String
+console.log(s); // Exibe no console: { '0': 'f', '1': 'o', '2': 'o'}
+typeof s; // Retorna 'object'
+
+ +

Você pode chamar qualquer um dos métodos do objeto String em cima de uma string literal — JavaScript automaticamente converte a string literal em um objeto String temporário, chama o método, e então descarta o objeto String temporário. Você pode também usar a propriedade String.length com uma string literal.

+ +

Você deve usar strings literais a menos que você realmente precise usar um objeto String, pois objetos String podem ter comportamentos inesperados. Por exemplo:

+ +
var s1 = "2 + 2"; // Cria uma string literal
+var s2 = new String("2 + 2"); // Creates um objeto String
+eval(s1); // Retorna o número 4
+eval(s2); // Retorna a string "2 + 2"
+ +

Um objeto String possui uma propriedade, length, que indica o número de caracteres na string. Por exemplo, o código a seguir atribui o valor 11 à variável x, pois "Olá, mundo!" possui 11 caracteres:

+ +
var minhaString = "Olá, mundo!";
+var x = minhaString.length;
+
+ +

Um objeto String possui uma variedade de métodos: por exemplo aqueles que retornam uma variação da própria string, como substring e toUpperCase.

+ +

A tabela a seguir lista os métodos de objetos {{jsxref("String")}}.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

Métodos de String

+
MétodoDescrição
{{jsxref("String.charAt", "charAt")}}, {{jsxref("String.charCodeAt", "charCodeAt")}}, {{jsxref("String.codePointAt", "codePointAt")}}Retorna o código do caractere ou o caractere em uma posição específica na string.
{{jsxref("String.indexOf", "indexOf")}}, {{jsxref("String.lastIndexOf", "lastIndexOf")}}Retorna a posição de uma substring específica na string ou a última posição da substring específica, respectivamente.
{{jsxref("String.startsWith", "startsWith")}}, {{jsxref("String.endsWith", "endsWith")}}, {{jsxref("String.includes", "includes")}}Retorna se uma string começa, termina ou contém uma outra string específica.
{{jsxref("String.concat", "concat")}}Concatena o texto de duas strings e retorna uma nova string.
{{jsxref("String.fromCharCode", "fromCharCode")}}, {{jsxref("String.fromCodePoint", "fromCodePoint")}}Cria uma string a partir de uma sequência específica de valores Unicode. Esse é um método da classe String, não de uma instância do tipo String.
{{jsxref("String.split", "split")}}Separa um objeto String em um array de strings, separando a string em substrings.
{{jsxref("String.slice", "slice")}}Extrai uma seção de uma string e retorna uma nova string.
{{jsxref("String.substring", "substring")}}, {{jsxref("String.substr", "substr")}}Retorna um subconjunto específico de uma string, definindo os índices inicial e final, ou definindo um índice e um tamanho.
{{jsxref("String.match", "match")}}, {{jsxref("String.replace", "replace")}}, {{jsxref("String.search", "search")}}Trabalha com expressões regulares.
{{jsxref("String.toLowerCase", "toLowerCase")}}, {{jsxref("String.toUpperCase", "toUpperCase")}} +

Retorna a string com todos caracteres em minúsculo, ou maiúsculo, respectivamente.

+
{{jsxref("String.normalize", "normalize")}}Retorna a Forma Normalizada Unicode (Unicode Normalization Form) da string que chama o método.
{{jsxref("String.repeat", "repeat")}}Retorna uma string contendo os elementos do objeto repetidos pela quantidade de vezes dada.
{{jsxref("String.trim", "trim")}}Retira espaços em branco no começo e no final da string.
+ +

Template strings com várias linhas

+ +

Template strings são strings literais que permitem expressões no seu conteúdo. Você pode usar os recursos de strings com multiplas linhas e interpolações de string com as template strings.

+ +

Template strings são declaradas com o acento grave (``) ao invés de aspas simples ou aspas duplas. Essas strings podem conter place holders. Os place holders são indicados pelo cifrão e com chaves ( ${expressao} ).

+ +

Várias linhas (Multi-lines)

+ +

Qualquer caractere de nova linha ( '\n' ) inserido na string também faz parte das template string. Usando strings normais, você teria que usar a sintaxe a seguir para conseguir uma string de várias linhas

+ +
console.log("linha de texto 1\n\
+linha de texto 2");
+// "linha de texto 1
+// linha de texto 2"
+ +

Para obter o mesmo efeito com strings multi-lines, você pode agora escrever:

+ +
console.log(`linha de texto 1
+linha de texto 2`);
+// "linha de texto 1
+// linha de texto 2"
+ +

Expressões inseridas

+ +

Para conseguir inserir expressões com strings normais, você teria que usar a seguinte sintaxe:

+ +
var a = 5;
+var b = 10;
+console.log("Quinze é " + (a + b) + " e\nnão " + (2 * a + b) + ".");
+// "Quinze é 15 e
+// não 20."
+ +

Agora, com template strings, você tem a capacidade de usar uma forma mais simples e legível para fazer essas substituições:

+ +
var a = 5;
+var b = 10;
+console.log(`Quinze é ${a + b} e\nnão ${2 * a + b}.`);
+// "Quinze é 15 e
+// não 20."
+ +

Para mais informações, leia sobre Template strings na referência JavaScript.

+ +

Internacionalização

+ +

O objeto {{jsxref("Intl")}} é o namespace para a API de Internacionalização do ECMAScript, que oferece comparação de strings sensíveis à linguagem, formatação de números, e formatação de datas e horas. Os construtores para os objetos {{jsxref("Collator")}}, {{jsxref("NumberFormat")}}, e {{jsxref("DateTimeFormat")}} são propriedades do objeto Intl.

+ +

Formatação de data e hora

+ +

O objeto {{jsxref("DateTimeFormat")}} é útil para a formatação de data e hora. O código a seguir formata uma data em inglês no formato que é utilizado nos Estados Unidos. (O resultado é diferente em outro fuso horário).

+ +
var msPorDia = 24 * 60 * 60 * 1000; // número de milisegundos em um dia
+
+// July 17, 2014 00:00:00 UTC.
+var july172014 = new Date(msPorDia * (44 * 365 + 11 + 197));
+
+var opcoes = { year: "2-digit", month: "2-digit", day: "2-digit",
+                hour: "2-digit", minute: "2-digit", timeZoneName: "short" };
+var americanDateTime = new Intl.DateTimeFormat("en-US", opcoes).format;
+
+console.log(americanDateTime(july172014)); // 07/16/14, 5:00 PM PDT
+
+ +

Formatação de números

+ +

O objeto {{jsxref("NumberFormat")}} é útil para formatar números, por exemplo unidade monetária.

+ +
var precoGasolina = new Intl.NumberFormat("en-US",
+                        { style: "currency", currency: "USD",
+                          minimumFractionDigits: 3 });
+
+console.log(precoGasolina.format(5.259)); // $5.259
+
+var hanDecimalRMBInChina = new Intl.NumberFormat("zh-CN-u-nu-hanidec",
+                        { style: "currency", currency: "CNY" });
+
+console.log(hanDecimalRMBInChina.format(1314.25)); // ￥ 一,三一四.二五
+
+ +

Collation

+ +

O objeto {{jsxref("Collator")}} é usado para comparar e ordenar strings.

+ +

Por exemplo, existem atualmente duas ordens diferentes de classificação no Alemão: listaTelefônica e dicionário. A ordenação da listaTelefônica enfatiza o som, e é como se "ä", "ö", e assim por diante, fossem expandidos para "ae", "oe", e assim sucessivamente, para definir a ordem.

+ +
var nomes = ["Hochberg", "Hönigswald", "Holzman"];
+
+var phonebookAlemao = new Intl.Collator("de-DE-u-co-phonebk");
+
+// como se ordenasse ["Hochberg", "Hoenigswald", "Holzman"]:
+console.log(names.sort(phonebookAlemao.compare).join(", "));
+// imprime "Hochberg, Hönigswald, Holzman"
+
+ +

Algumas palavras do alemão são conjugadas com tremas extras, mas no dicionário essas palavras são ordenadas ignorando os tremas (exceto quando ordenando palavras que tem apenas o trema como diferença: schon antes de schön).

+ +
var dicionarioAlemao = new Intl.Collator("de-DE-u-co-dict");
+
+// como se ordenasse ["Hochberg", "Honigswald", "Holzman"]:
+console.log(names.sort(dicionarioAlemao.compare).join(", "));
+// imprime "Hochberg, Holzman, Hönigswald"
+
+ +

Para mais informação sobre a API {{jsxref("Intl")}}, veja também Introducing the JavaScript Internationalization API (em inglês).

+ +
{{PreviousNext("Web/JavaScript/Guide/Numbers_and_dates", "Web/JavaScript/Guide/Regular_Expressions")}}
diff --git a/files/pt-br/web/javascript/guide/trabalhando_com_objetos/index.html b/files/pt-br/web/javascript/guide/trabalhando_com_objetos/index.html deleted file mode 100644 index 1dccaeef2e..0000000000 --- a/files/pt-br/web/javascript/guide/trabalhando_com_objetos/index.html +++ /dev/null @@ -1,494 +0,0 @@ ---- -title: Trabalhando com objetos -slug: Web/JavaScript/Guide/Trabalhando_com_Objetos -tags: - - Comparando Objetos - - Contrutor - - Documento - - ECMAScript6 - - Guia(2) - - Iniciante - - JavaScript -translation_of: Web/JavaScript/Guide/Working_with_Objects ---- -

A linguagem JavaScript é projetada com base em um simples paradigma orientado a objeto. Um objeto é uma coleção de propriedades, e uma propriedade é uma associação entre um nome (ou chave) e um valor. Um valor de propriedade pode ser uma função, que é então considerada um método do objeto. Além dos objetos que são pré-definidos no browser, você pode definir seus próprios objetos.

- -

Este capítulo descreve como usar objetos, propriedades, funções, e métodos, e como criar seus próprios objetos.

- -

Visão geral de objetos

- -

Objetos em JavaScript, assim como em muitas outras linguagens de programação, podem ser comparados com objetos na vida real. O conceito de objetos em JavaScript pode ser entendido com objetos tangíveis da vida real.

- -

Em JavaScript, um objeto é uma entidade independente, com propriedades e tipos. Compare-o com uma xícara, por exemplo. Uma xícara é um objeto, com propriedades. Uma xícara tem uma cor, uma forma, peso, um material de composição, etc. Da mesma forma, objetos em JavaScript podem ter propriedades, que definem suas características.

- -

Objetos e propriedades

- -

Um objeto em JavaScript tem propriedades associadas a ele. Uma propriedade de um objeto pode ser explicada como uma variável que é ligada ao objeto. Propriedades de objetos são basicamente as mesmas que variáveis normais em JavaScript, exceto pelo fato de estarem ligadas a objetos. As propriedades de um objeto definem as características do objeto. Você acessa as propriedades de um objeto com uma simples notação de ponto:

- -
-
nomeDoObjeto.nomeDaPropriedade
-
-
- -

Como as variáveis em JavaScript, o nome do objeto (que poderia ser uma variável normal) e um nome de propriedade diferem em maiúsculas/minúsculas (por exemplo, cor e Cor são propriedades diferentes). Você pode definir uma propriedade atribuindo um valor a ela. Por exemplo, vamos criar um objeto chamado meuCarro e dar a ele propriedades chamadas fabricacao, modelo, e ano, conforme mostrado a seguir:

- -
var meuCarro = new Object();
-meuCarro.fabricacao = "Ford";
-meuCarro.modelo = "Mustang";
-meuCarro.ano = 1969;
-
- -

Propriedades não definidas de um objeto são {{jsxref("undefined")}} (e não {{jsxref("null")}}).

- -
meuCarro.semPropriedade; //undefined
- -

Propriedades de objetos em JavaScript podem também ser acessadas ou alteradas usando-se notação de colchetes. Objetos são às vezes chamados de arrays associativos, uma vez que cada propriedade é associada com um valor de string que pode ser usado para acessá-la. Então, por exemplo, você poderia acessar as propriedades do objeto meuCarro como se segue:

- -
meuCarro["fabricacao"] = "Ford";
-meuCarro["modelo"] = "Mustang";
-meuCarro["ano"] = 1969;
-
- -

Um nome de propriedade de um objeto pode ser qualquer string JavaScript válida, ou qualquer coisa que possa ser convertida em uma string, incluindo uma string vazia. No entanto, qualquer nome e propriedade que não é um identificador JavaScript válido (por exemplo, um nome de propriedade que tem um espaço ou um hífen, ou que começa com um número) só pode ser acessado(a) usando-se a notação de colchetes. Essa notação é também muito útil quando nomes de propriedades devem ser determinados dinamicamente (quando o nome da propriedade não é determinado até o momento de execução). Exemplos são mostrados a seguir:

- -
var meuObj = new Object(),
-    str = "minhaString",
-    aleat = Math.random(),
-    obj = new Object();
-
-meuObj.tipo               = "Sintaxe de ponto";
-meuObj["data de criacao"] = "String com espaco";
-meuObj[str]               = "valor de String";
-meuObj[aleat]             = "Numero Aleatorio";
-meuObj[obj]               = "Objeto";
-meuObj[""]                = "Mesmo uma string vazia";
-
-console.log(meuObj);
-
- -

Você pode também acessar propriedades usando um valor de string que está armazenado em uma variável:

- -
-
var nomeDaPropriedade = "fabricacao";
-meuCarro[nomeDaPropriedade] = "Ford";
-
-nomeDaPropriedade = "modelo";
-meuCarro[nomeDaPropriedade] = "Mustang";
-
-
- -

Você pode usar a notação de colchetes com o comando for...in para iterar por todas as propriedades enumeráveis de um objeto. Para ilustrar como isso funciona, a seguinte função mostra as propriedades de um objeto quando você passa o objeto e o nome do objeto como argumentos para a função:

- -
function mostrarProps(obj, nomeDoObj) {
-  var resultado = "";
-  for (var i in obj) {
-    if (obj.hasOwnProperty(i)) {
-        resultado += nomeDoObj + "." + i + " = " + obj[i] + "\n";
-    }
-  }
-  return resultado;
-}
-
- -

Então, a chamada de função mostrarProps(meuCarro, "meuCarro") retornaria o seguinte:

- -
meuCarro.fabricacao = Ford
-meuCarro.modelo = Mustang
-meuCarro.ano = 1969
- -

Objetos: tudo

- -

Em JavaScript, quase tudo é um objeto. Todos os tipos primitivos - com exceção de null e undefined - são tratados como objetos. Eles podem receber propriedades (propriedades atribuídas de alguns tipos não são persistentes), e possuem todas as características de objetos.

- -

Enumerando todas as propriedades de um objeto

- -

Começando com a ECMAScript 5, há três formas nativas de se listar (ou "caminhar por") as propriedades de um objeto:

- -
    -
  • for...in loops
    - Esse método caminha por todas as propriedades enumeráveis de um objeto e sua cadeia de protótipos
    • -
  • Object.keys(o)
    - Esse método retorna um array com todos os nomes ("chaves") de propriedades próprios de um objeto o (mas não na cadeia de protótipos).
    • -
  • Object.getOwnPropertyNames(o)
    - Esse método retorna um array contendo todos os nomes de propriedades próprios (enumeráveis ou não) de um objeto o.
    • -
- -

Antes, na ECMAScript 5, não existia uma forma nativa de se listar todas as propriedades de um objeto. No entanto, isso pode ser feito com a seguinte função:

- -
function listarTodasAsPropriedades(o){
-	var objectoASerInspecionado;
-	var resultado = [];
-
-	for(objectoASerInspecionado = o; objectoASerInspecionado !== null; objectoASerInspecionado = Object.getPrototypeOf(objectoASerInspecionado)){
-		resultado = resultado.concat(Object.getOwnPropertyNames(objectoASerInspecionado));
-	}
-
-	return resultado;
-}
-
- -

Isso pode ser útil para revelar propriedades "escondidadas" (propriedades na cadeia de protótipos que não são acessíveis através do objeto, porque outra propriedade possui o mesmo nome anteriormente na cadeia de protótipos). A listagem de propriedades acessíveis só pode ser facilmente feita através da remoção de valores duplicados no array.

- -

Criando novos objetos

- -

JavaScript possui um número de objetos pré-definidos. Além disso, você pode criar seus próprios objetos. Você pode criar um objeto usando um objeto inicializador. Alternativamente, você pode primeiro criar uma função construtora e depois instanciar um objeto usando aquela função e o operador new.

- -

Usando inicializadores de objeto

- -

Além de criar objetos usando uma função construtora, você pode criar objetos usando um inicializador de objeto. O uso de inicializadores de objeto é às vezes conhecido como criar objetos com notação literal. O termo "inicializador de objeto" é consistente com a terminologia usada por C++.

- -

A sintaxe para um objeto usando-se um inicializador de objeto é:

- -
var obj = { propriedade_1:   valor_1,   // propriedade_# pode ser um identificador...
-            2:            valor_2,   // ou um numero...
-            // ...,
-            "propriedade n": valor_n }; // ou uma string
-
- -

onde obj é o nome do novo objeto, cada propriedade_i é um identificador (um nome, um número, ou uma string literal), e cada valor_i é uma expressão cujo valor é atribuído à propriedade_i. O obj e a atribuição são opcionais; se você não precisa fazer referência a esse objeto em nenhum outro local, você não precisa atribuí-lo a uma variável. (Note que você pode precisar colocar o objeto literal entre parentêses se o objeto aparece onde um comando é esperado, de modo a não confundir o literal com uma declaração de bloco.)

- -

Se um objeto é criado com um inicializador de objeto em um script de alto nível, JavaScript interpreta o objeto a cada vez que avalia uma expressão contendo o objeto literal. Além disso, um inicializador usado em uma função é criado toda vez que a função é chamada.

- -

O seguinte comando cria um objeto e o atribui à variável x somente se a expressão cond é verdadeira.

- -
if (cond) var x = {hi: "there"};
-
- -

O seguinte exemplo cria minhaHonda com três propriedades. Note que a propriedade motor é também um objeto com suas próprias propriedades.

- -
var minhaHonda = {cor: "vermelho", rodas: 4, motor: {cilindros: 4, tamanho: 2.2}};
-
- -

Você pode também usar inicializadores de objeto para criar arrays. Veja arrays literais.

- -

Usando uma função construtora

- -

Alternativamente, você pode criar um objeto com estes dois passos:

- -
    -
  1. Defina o tipo de objeto escrevendo uma função construtora. Há uma forte convenção, e com boa razão, de se usar uma letra inicial maiúscula.
    2. -
  2. Crie uma instância do objeto com new.
    3. -
- -

Para definir um tipo de objeto, crie uma função para o tipo de objeto que especifique seu nome, suas propriedades e seus métodos. Por exemplo, suponha que você queira criar um tipo objeto para carros. Você quer que esse tipo de objeto seja chamado carro, e você quer ele tenha propriedades de marca, modelo, e ano. Para fazer isto, você escreveria a seguinte função:

- -
function Carro(marca, modelo, ano) {
-  this.marca = marca;
-  this.modelo = modelo;
-  this.ano = ano;
-}
-
- -

Note o uso de this para atribuir valores às propriedades do objeto com base nos valores passados para a função.

- -

Agora você pode criar um objeto chamado meucarro como se segue:

- -
var meucarro = new Carro("Eagle", "Talon TSi", 1993);
-
- -

Esse comando cria meucarro e atribui a ele valores especificados para suas propriedade. Então o valor de meucarro.marca é a string "Eagle", meucarro.ano é o inteiro 1993, e assim por diante.

- -

Você pode criar qualquer número de objetos carro com o uso de new. Exemplo,

- -
var carroDeKen = new Carro("Nissan", "300ZX", 1992);
-var carroDeVPG = new Carro("Mazda", "Miata", 1990);
-
- -

Um objeto pode ter uma propriedade que por si só também é um objeto. Por exemplo, suponha que você define um objeto chamado pessoa como se segue:

- -
function Pessoa(nome, idade, sexo) {
-  this.nome = nome;
-  this.idade = idade;
-  this.sexo = sexo;
-}
-
- -

e então você instancia dois novos objetos pessoa da seguinte forma:

- -
var jose = new Pessoa("Jose Silva", 33, "M");
-var paulo = new Pessoa("Paulo Santos", 39, "M");
-
- -

Então, você pode reescrever a definição de carro de modo a incluir uma propriedade dono que recebe um objeto pessoa, como se segue:

- -
function Carro(marca, modelo, ano, dono) {
-  this.marca = marca;
-  this.modelo = modelo;
-  this.ano = ano;
-  this.dono = dono;
-}
-
- -

Para instanciar os novos objetos, você então usa o seguinte:

- -
var carro1 = new Carro("Eagle", "Talon TSi", 1993, jose);
-var carro2 = new Carro("Nissan", "300ZX", 1992, paulo);
-
- -

Perceba que ao invés de passar uma string literal ou um valor inteiro na hora de criar os novos objetos, os comandos acima passam os objetos jose e paulo como os argumentos para os donos. Então se você quiser descobrir o nome do dono de carro2, você pode acessar a seguinte propriedade:

- -
carro2.dono
-
- -

Note que você pode sempre adicionar uma propriedade a um objeto definido anteriormente. Por exemplo, o comando

- -
carro1.cor = "preto";
-
- -

adiciona uma propriedade cor ao carro1, e dá a ele o valor "preto." No entanto, isso não afeta nenhum outro objeto. Para adicionar a nova propriedade a todos os objetos do mesmo tipo, você deve adicionar a propriedade na definição do tipo de objeto carro.

- -

Usando o método Object.create

- -

Objetos podem também ser criados usando-se o método Object.create(). Esse método pode ser muito útil, pois permite que você escolha o objeto protótipo para o objeto que você quer criar, sem a necessidade de se definir uma função construtora.

- -
// Encapsulamento das propriedades e métodos de Animal
-var Animal = {
-  tipo: "Invertebrados", // Propriedades de valores padrão
-  qualTipo : function() {  // Método que ira mostrar o tipo de Animal
-    console.log(this.tipo);
-  }
-}
-
-// Cria um novo tipo de animal chamado animal1
-var animal1 = Object.create(Animal);
-animal1.qualTipo(); // Saída:Invertebrados
-
-// Cria um novo tipo de animal chamado Peixes
-var peixe = Object.create(Animal);
-peixe.tipo = "Peixes";
-peixe.qualTipo(); // Saída: Peixes
- -

Herança

- -

Todos os objetos em JavaScript herdam de pelo menos um outro objeto. O objeto "pai" é conhecido como o protótipo, e as propriedades herdadas podem ser encontradas no objeto prototype do construtor.

- -

Indexando Propriedades de Objetos

- -

Você pode se referir a uma propriedade de um objeto pelo seu nome de propriedade ou pelo seu índice ordinal. Se você inicialmente definiu uma propriedade pelo nome, você deve sempre se referir a ela pelo nome, e se você inicialmente definir uma propriedade por um índice, você deve sempre se referir a ela pelo índice.

- -

Esta restrição se aplica quando  você cria um objeto e suas propriedades com uma função construtora (como fizemos anteriormente com o objeto do tipo carro) e quando você define propriedades individuais explicitamente (por exemplo, meuCarro.cor = "vermelho"). Se você inicialmente definir uma propriedade do objeto com um índice, tal como meuCarro[5] = "25 mpg", você pode subsequentemente referir-se á propriedade somente como meuCarro[5].

- -

A exceção a esta regra é a objetos refletidos a partir do HTML, como o conjunto de formulários. Você pode sempre se referir a objetos nessas matrizes por seu número de ordem (com base em onde eles aparecem no documento) ou seu nome (se definido). Por exemplo, se a segunda tag <FORM> em um  documento tem um atributo NAME de "meuFormulario", você pode se referir ao formulário como document.forms[1] ou document.forms["meuFormulario"] ou document.meuFormulario.

- -

Definindo propriedades para um tipo de objeto

- -

Você pode adicionar uma propriedade a um tipo de objeto definido anteriormente, utilizando a propriedade prototype. Esta define uma propriedade que é partilhada por todos os objetos do tipo especificado, em vez de apenas uma instância do objeto. O código a seguir adiciona uma propriedade cor para todos os objetos do tipo Carro, em seguida adiciona um valor a propriedade cor do objeto carro1.

- -
Carro.prototype.cor = null;
-carro1.cor = "preto";
-
- -

Consulte a propriedade prototype do objeto Function na Referência JavaScript  para mais informações.

- -

Definindo métodos

- -

Um método é uma função associada a um objeto, ou, simplesmente, um método é uma propriedade de um objeto que é uma função. Métodos são definidos da forma que as funções normais são definidas, exceto que eles tenham que ser atribuídos como propriedade de um objeto. São exemplos:

- -
nomeDoObjeto.nomedometodo = nome_da_funcao;
-
-var meuObjeto = {
-  meuMetodo: function(parametros) {
-    // ...faça algo
-  }
-};
-
- -

Onde nomeDoObjeto é um objeto existente, nomedometodo é o nome que você atribuiu ao método, e nome_da_funcao é o nome da função.

- -

Em seguida, você pode chamar o método no contexto do objeto da seguinte forma:

- -
objeto.nomedometodo(parametros);
-
- -

Você pode definir métodos para um tipo de objeto incluindo uma definição de metodo na função construtora do objeto. Por exemplo, você poderia definir uma função que iria formatar e mostrar as propriedades do objeto carro previamente definido; por exemplo,

- -
function mostreCarro() {
-  var resultado = "Um belo " + this.ano + " " + this.fabricacao
-    + " " + this.modelo;
-  pretty_print(resultado);
-}
-
- -

onde pretty_print é uma função que mostra uma linha horizontal e uma string. Observe o uso de this para referenciar o objeto ao qual o método pertence.

- -

Você pode fazer desta função um método de carro, adicionando seu estado à definição do objeto.

- -
this.mostreCarro = mostreCarro;
-
- -

Assim, a definição completa de carro seria agora, parecida com essa:

- -
function Carro(fabricacao, modelo, ano, proprietario) {
-  this.fabricacao = fabricacao;
-  this.modelo = modelo;
-  this.ano = ano;
-  this.proprietario = proprietario;
-  this.mostreCarro = mostreCarro;
-}
-
- -

Então você pode chamar o método mostreCarro para cada objeto seguinte:

- -
carro1.mostreCarro();
-carro2.mostreCarro();
-
- -

Usando this para referências de objetos

- -

JavaScript tem uma palavra-chave especial, this, que você pode usar dentro de um método para referenciar o objeto corrente. Por exemplo, suponha que você tenha uma função chamada validate que valida o valor da propriedade de um objeto, dado o objeto e os valores altos e baixos:

- -
function validate(obj, lowval, hival) {
-  if ((obj.value < lowval) || (obj.value > hival))
-    alert("Valor inválido!");
-}
-
- -

Então, você poderia chamar validate no manipulador de evento onchange em cada elemento do formulário, usando this para passar o elemento, como no exemplo a seguir:

- -
<input type="text" name="age" size="3"
-  onChange="validate(this, 18, 99)">
-
- -

No geral, this referencia o objeto chamando um método.

- -

Quando combinado com a propriedade form , this pode referenciar a forma original do objeto atual. No exemplo seguinte, o formulário myForm contém um objeto Text e um botão. Quando o usuário clica no botão, o valor do objeto Text é definido como nome do formulário. O manipulador de eventos onclick do botão usa this.form para referenciar a forma original, myForm.

- -
<form name="myForm">
-<p><label>Nome do form:<input type="text" name="text1" value="Beluga"></label>
-<p><input name="button1" type="button" value="Mostre o Nome do Form"
-     onclick="this.form.text1.value = this.form.name">
-</p>
-</form>
- -

Definindo getters e setters

- -

Um getter é um método que obtém o valor de uma propriedade específica. Um setter é um método que define o valor de uma propriedade específica. Você pode definir getters e setters em qualquer objeto de núcleo pré-definido ou objeto definido pelo usuário que suporta a adição de novas propriedades. A sintaxe para definir getters e setters usa a sintaxe literal do objeto.

- -

O código a seguir ilustra como getters e setters podem funcionar para um objeto o definido pelo usuário.

- -
var o = {
-  a: 7,
-  get b() {
-    return this.a + 1;
-  },
-  set c(x) {
-    this.a = x / 2
-  }
-};
-
-console.log(o.a); // 7
-console.log(o.b); // 8
-o.c = 50;
-console.log(o.a); // 25
- -

As propriedades do objeto o são:

- -
    -
  • o.a — um número
    • -
  • o.b — um getter que retorna o.a + 1
    • -
  • o.c — um setter que define o valor de o.a pela metade do valor definindo para o.c
    • -
- -

Observe que nomes de função de getters e setters definidos em um objeto literal usando "[gs]et property()" (ao contrário de __define[GS]etter__ ) não são os próprios nomes dos getters, embora a sintaxe [gs]et propertyName(){ } possa  induzir ao erro e você pensar de outra forma. Para nomear uma função getter ou setter usando a sintaxe "[gs]et property()", define explicitamente um função nomeada programaticamente usando Object.defineProperty (ou o legado fallback Object.prototype.__defineGetter__).

- -

O código a seguir ilustra como getters e setters podem extender o protótipo Date para adicionar a propriedade ano para todas as instâncias de classes Date pré-definidas. Ele usa os métodos getFullYear e setFullYear existentes da classe Date para suportar o getter e setter da propriedade ano.

- -

Estes estados definem um getter e setter para a propriedade ano:

- -
var d = Date.prototype;
-Object.defineProperty(d, "year", {
-  get: function() { return this.getFullYear() },
-  set: function(y) { this.setFullYear(y) }
-});
- -

Estes estados usam o getter e setter em um objeto Date:

- -
var now = new Date();
-console.log(now.year); // 2000
-now.year = 2001; // 987617605170
-console.log(now);
-// Wed Apr 18 11:13:25 GMT-0700 (Pacific Daylight Time) 2001
- -

A principio, getters e setters podem ser ou

- -
    -
  • definidos usando objetos inicializadores, ou
    • -
  • adicionar posteriormente para qualquer objeto a qualquer tempo usando um método getter ou setter adicionado
    • -
- -

Ao definir getters e setters usando objetos inicializadores tudo o que você precisa fazer é prefixar um método getter com get e um método setter com set. Claro, o método getter não deve esperar um parâmetro, enquanto o método setter espera exatamente um parâmetro (novo valor para definir). Por exemplo:

- -
var o = {
-  a: 7,
-  get b() { return this.a + 1; },
-  set c(x) { this.a = x / 2; }
-};
-
- -

Getters e setters podem também ser adicionado em um objeto a qualquer hora depois da criação usando o método Object.defineProperties. O primeiro parâmetro deste método é o objeto no qual você quer definir o getter ou setter. O segundo parâmetro é um objeto cujos nomes das propriedades são os nomes getter ou setter, e cujo valores das propriedades são objetos para definição de funções getter ou setter. Aqui está um exemplo que define o mesmo getter e setter usado no exemplo anterior:
-  

- -
var o = { a:0 }
-
-Object.defineProperties(o, {
-    "b": { get: function () { return this.a + 1; } },
-    "c": { set: function (x) { this.a = x / 2; } }
-});
-
-o.c = 10 // Roda o setter, que associa 10 / 2 (5) para a propriedade 'a'
-console.log(o.b) // Roda o getter, que yields a + 1 ou 6
-
- -

Escolher qual das duas formas depende do seu estilo de programação e tarefa na mão. Se você já vai para o inicializador de objeto ao definir um protótipo, provavelmente a maior parte do tempo escolherá a primeira forma. Esta forma é mais compacta e natural. No entanto, se você precisar adicionar getters e setters mais tarde - porque você não escreveu o protótipo ou objeto particular - então a segunda forma é a única possível. A segunda forma provavelmente melhor representa a natureza dinâmica do JavaScript - mas pode tornar o código difícil de ler e entender.

- -

Removendo propriedades

- -

Você pode remover uma propriedade não herdada usando o operador delete. O código a seguir mostra como remover uma propriedade.

- -
//Criando um novo objeto, myobj, com duas propriedades, a e b.
-var myobj = new Object;
-myobj.a = 5;
-myobj.b = 12;
-
-//Removendo a propriedade a, deixando myobj com apenas a propriedade b.
-delete myobj.a;
-console.log ("a" in myobj) // yields "false"
-
- -

Você também pode usar delete para remover uma variável global se a var keyword não estiver sendo usada para declarar a variável:

- -
g = 17;
-delete g;
-
- -

Comparando Objetos

- -

Em JavaScript, objetos são um tipo de referência. Dois objetos distintos nunca são iguais, mesmo que tenham as mesmas propriedades. Apenas comparando o mesmo objeto de referência com ele mesmo produz verdadeiro.

- -
// Duas variáveis, dois objetos distintos com as mesmas propriedades
-var fruit = {name: "apple"};
-var fruitbear = {name: "apple"};
-
-fruit == fruitbear // return false
-fruit === fruitbear // return false
- -
// Duas variáveis, um único objeto
-var fruit = {name: "apple"};
-var fruitbear = fruit;  // assign fruit object reference to fruitbear
-
-// Here fruit and fruitbear are pointing to same object
-fruit == fruitbear // return true
-fruit === fruitbear // return true
- -

Para mais informações sobre comparaçāo de operadores, veja Operadores de comparaçāo.

- -

Veja também

- - - -
{{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Details_of_the_Object_Model")}}
diff --git a/files/pt-br/web/javascript/guide/usando_promises/index.html b/files/pt-br/web/javascript/guide/usando_promises/index.html deleted file mode 100644 index a0dd09c8c2..0000000000 --- a/files/pt-br/web/javascript/guide/usando_promises/index.html +++ /dev/null @@ -1,269 +0,0 @@ ---- -title: Usando promises -slug: Web/JavaScript/Guide/Usando_promises -tags: - - Guía - - Intermediário - - JavaScript - - Promise - - Promises -translation_of: Web/JavaScript/Guide/Using_promises ---- -
{{jsSidebar("JavaScript Guide")}}{{PreviousNext("Web/JavaScript/Guide/Details_of_the_Object_Model", "Web/JavaScript/Guide/Iterators_and_Generators")}}
- -

Uma {{jsxref("Promise")}} é um objeto que representa a eventual conclusão ou falha de uma operação assincrona. Como a maioria das pessoas consomem promisses já criadas, este guia explicará o consumo de promisses devolvidas antes de explicar como criá-las.

- -

Essencialmente, uma promise é um objeto retornado para o qual você adiciona callbacks, em vez de passar callbacks para uma função.

- -

Por exemplo, em vez de uma função old-style que espera dois callbacks, e chama um deles em uma eventual conclusão ou falha:

- -
function successCallback(result) {
-  console.log("It succeeded with " + result);
-}
-
-function failureCallback(error) {
-  console.log("It failed with " + error);
-}
-
-doSomething(successCallback, failureCallback);
- -

…funções modernas retornam uma promisse e então você pode adicionar seus callbacks:

- -
const promise = doSomething();
-promise.then(successCallback, failureCallback);
- -

…ou simplesmente:

- -
doSomething().then(successCallback, failureCallback);
- -

Nós chamamos isso de chamada de função assincrona. Essa convenção tem várias vantagens. Vamos explorar cada uma delas.

- -

Garantias

- -

Ao contrário dos callbacks com retornos de funções old-style, uma promisse vem com algumas garantias:

- -
    -
  • Callbacks nunca serão chamados antes da conclusão da execução atual do loop de eventos do JavaScript. 
    • -
  • Callbacks adicionadas com .then mesmo depois do sucesso ou falha da operação assincrona, serão chamadas, como acima.
    • -
  • Multiplos callbacks podem ser adicionados chamando-se .then várias vezes, para serem executados independentemente da ordem de inserção.
    • -
- -

Mas o benefício mais imediato da promises é o encadeamento.

- - - -

Encadeamento

- -

Uma necessidade comum é executar duas ou mais operações assincronas consecutivas, onde cada operação subsequente começa quando a operação anterior é bem sucedida, com o resultado do passo anterior. Nós conseguimos isso criando uma cadeia de promises.

- -

Aqui está a magica: a função then retorna uma nova promise, diferente da original:

- -
const promise = doSomething();
-const promise2 = promise.then(successCallback, failureCallback);
-
- -

ou

- -
const promise2 = doSomething().then(successCallback, failureCallback);
-
- -

Essa segunda promise representa a conclusão não apenas de doSomething(), mas também do successCallback ou failureCallback que você passou, que podem ser outras funções assincronas que retornam uma promise. Quando esse for o caso, quaisquer callbacks adicionados a promise2 serão enfileiradas atrás da promise retornada por successCallback ou failureCallback.

- -

Basicamente, cada promise representa a completude de outro passo assíncrono na cadeia.

- -

Antigamente, realizar operações assíncronas comuns em uma linha levaria à clássica pirâmide da desgraça :

- -
doSomething(function(result) {
-  doSomethingElse(result, function(newResult) {
-    doThirdThing(newResult, function(finalResult) {
-      console.log('Got the final result: ' + finalResult);
-    }, failureCallback);
-  }, failureCallback);
-}, failureCallback);
-
- -

Ao invés disso, com funções modernas, nós atribuímos nossas callbacks às promises retornadas, formando uma cadeia de promise:

- -
doSomething().then(function(result) {
-  return doSomethingElse(result);
-})
-.then(function(newResult) {
-  return doThirdThing(newResult);
-})
-.then(function(finalResult) {
-  console.log('Got the final result: ' + finalResult);
-})
-.catch(failureCallback);
-
- -

Os argumentos para then são opcionais, e catch(failureCallback) é uma abreviação para then(null, failureCallback). Você pode também pode ver isso escrito com arrow functions:

- -
doSomething()
-.then(result => doSomethingElse(result))
-.then(newResult => doThirdThing(newResult))
-.then(finalResult => {
-  console.log(`Got the final result: ${finalResult}`);
-})
-.catch(failureCallback);
-
- -

Importante: Sempre retorne um resultado, de outra forma as callbacks não vão capturar o resultado da promise anterior.

- -

Encadeando depois de um catch

- -

É possivel encadear depois de uma falha, i.e um catch, isso é muito útil para realizar novas ações mesmo depois de uma falha no encadeamento. Leia o seguinte exemplo: 

- -
new Promise((resolve, reject) => {
-    console.log('Initial');
-
-    resolve();
-})
-.then(() => {
-    throw new Error('Something failed');
-
-    console.log('Do this');
-})
-.catch(() => {
-    console.log('Do that');
-})
-.then(() => {
-    console.log('Do this whatever happened before');
-});
-
- -

Isso vai produzir o seguinte texto:

- -
Initial
-Do that
-Do this whatever happened before
-
- -

Observe que o texto "Do this" não foi impresso por conta que o erro "Something failed" causou uma rejeição.

- -

Propagação de erros

- -

Na pirâmide da desgraça vista anteriormente, você pode se lembrar de ter visto failureCallback três vezes, em comparação a uma única vez no fim da corrente de promessas:

- -
doSomething()
-.then(result => doSomethingElse(result))
-.then(newResult => doThirdThing(newResult))
-.then(finalResult => console.log(`Got the final result: ${finalResult}`))
-.catch(failureCallback);
-
- -

Basicamente, uma corrente de promessas para se houver uma exceção, procurando por catch handlers no lugar. Essa modelagem de código segue bastante a maneira de como o código síncrono funciona:

- -
try {
-  const result = syncDoSomething();
-  const newResult = syncDoSomethingElse(result);
-  const finalResult = syncDoThirdThing(newResult);
-  console.log(`Got the final result: ${finalResult}`);
-} catch(error) {
-  failureCallback(error);
-}
-
- -

Essa simetria com código assíncrono resulta no syntactic sugar async/await presente no ECMAScript 2017:

- -
async function foo() {
-  try {
-    const result = await doSomething();
-    const newResult = await doSomethingElse(result);
-    const finalResult = await doThirdThing(newResult);
-    console.log(`Got the final result: ${finalResult}`);
-  } catch(error) {
-    failureCallback(error);
-  }
-}
-
- -

É construído sobre promesas, por exemplo, doSomething() é a mesma função que antes. Leia mais sobre a sintaxe aqui.

- -

Por pegar todos os erros, até mesmo exceções jogadas(thrown exceptions) e erros de programação, as promises acabam por solucionar uma falha fundamental presente na pirâmide da desgraça dos callbacks. Essa característica é essencial para a composição funcional das operações assíncronas.

- -

Criando uma Promise em torno de uma callback API antiga

- -

Uma {{jsxref("Promise")}} pode ser criada do zero utilizando o seu construtor. Isto deve ser necessário apenas para o envolvimento de APIs antigas.

- -

Em um mundo ideal, todas as funções assincronas já retornariam promises. Infelizmente, algumas APIs ainda esperam que os retornos de suceso e/ou falha sejam passados da maneira antiga. O exemplo por excelência é o {{domxref("WindowTimers.setTimeout", "setTimeout()")}} function:

- -
setTimeout(() => saySomething("10 seconds passed"), 10000);
-
- -

Misturar chamadas de retorno e promeses de old-style é problemático. Se saySomething falhar ou contiver um erro de programação, nada o captura.

- -

Por sorte nós podemos envolve-la em uma promise. É uma boa prática envolver funções problemáticas no menor nivel possível, e nunca chama-las diretamente de novo:

- -
const wait = ms => new Promise(resolve => setTimeout(resolve, ms));
-
-wait(10000).then(() => saySomething("10 seconds")).catch(failureCallback);
-
- -

Basically, the promise constructor takes an executor function that lets us resolve or reject a promise manually. Since setTimeout doesn't really fail, we left out reject in this case.

- -

Basicamente, um construtor de promises pega uma função executora que nos deixa resolver ou rejeitar uma promise manualmente. Desde que setTimeout não venha a falhar, nos deixamos a rejeição de fora nesse caso

- -

Composição

- -

{{jsxref("Promise.resolve()")}} e {{jsxref("Promise.reject()")}} são atalhos para se criar manualmente uma promessa que já foi resolvida ou rejeitada, respectivamente. Isso pode ser útil em algumas situações.

- -

{{jsxref("Promise.all()")}} e {{jsxref("Promise.race()")}} são duas ferramentas de composição para se executar operações assíncronas em paralelo.

- -

Uma composição sequencial é possível usando JavaScript de uma forma esperta:

- -
[func1, func2].reduce((p, f) => p.then(f), Promise.resolve());
-
- -

Basicamente reduzimos um vetor de funções assíncronas a uma cadeia de promessas equivalentes a: Promise.resolve().then(func1).then(func2);

- -

Isso também pode ser feito com uma função de composição reutilizável, que é comum em programação funcional:

- -
const applyAsync = (acc,val) => acc.then(val);
-const composeAsync = (...funcs) => x => funcs.reduce(applyAsync, Promise.resolve(x));
- - - -

A função composeAsync aceitará qualquer número de funções como argumentos e retornará uma nova função que aceita um valor incial a ser passado pelo pipeline de composição. Isso é benéfico porque alguma, ou todas as funções, podem ser assíncronas ou síncronas, e é garantido de que serão executadas na ordem correta.

- -
const transformData = composeAsync(func1, asyncFunc1, asyncFunc2, func2);
-transformData(data);
-
- -

No ECMAScript 2017, uma composição sequencial pode ser feita sde forma mais simples com async/await:

- -
for (const f of [func1, func2]) {
-  await f();
-}
-
- -

Cronometragem

- -

Para evitar surpresas, funções passadas para then nunca serão chamadas sincronamente, mesmo com uma função ja resolvida:

- -
Promise.resolve().then(() => console.log(2));
-console.log(1); // 1, 2
-
- -

Instead of running immediately, the passed-in function is put on a microtask queue, which means it runs later when the queue is emptied at the end of the current run of the JavaScript event loop, i.e. pretty soon:

- -

Ao invés de rodar imediatamente, a função passada é colocada em uma micro tarefa, o que significa que ela roda depois que a fila estiver vazia no final do atual processo de evento de loop do Javascript, isto é muito em breve

- -
const wait = ms => new Promise(resolve => setTimeout(resolve, ms));
-
-wait().then(() => console.log(4));
-Promise.resolve().then(() => console.log(2)).then(() => console.log(3));
-console.log(1); // 1, 2, 3, 4
-
- -

Ver também

- - - -

{{PreviousNext("Web/JavaScript/Guide/Details_of_the_Object_Model", "Web/JavaScript/Guide/Iterators_and_Generators")}}

diff --git a/files/pt-br/web/javascript/guide/using_promises/index.html b/files/pt-br/web/javascript/guide/using_promises/index.html new file mode 100644 index 0000000000..a0dd09c8c2 --- /dev/null +++ b/files/pt-br/web/javascript/guide/using_promises/index.html @@ -0,0 +1,269 @@ +--- +title: Usando promises +slug: Web/JavaScript/Guide/Usando_promises +tags: + - Guía + - Intermediário + - JavaScript + - Promise + - Promises +translation_of: Web/JavaScript/Guide/Using_promises +--- +
{{jsSidebar("JavaScript Guide")}}{{PreviousNext("Web/JavaScript/Guide/Details_of_the_Object_Model", "Web/JavaScript/Guide/Iterators_and_Generators")}}
+ +

Uma {{jsxref("Promise")}} é um objeto que representa a eventual conclusão ou falha de uma operação assincrona. Como a maioria das pessoas consomem promisses já criadas, este guia explicará o consumo de promisses devolvidas antes de explicar como criá-las.

+ +

Essencialmente, uma promise é um objeto retornado para o qual você adiciona callbacks, em vez de passar callbacks para uma função.

+ +

Por exemplo, em vez de uma função old-style que espera dois callbacks, e chama um deles em uma eventual conclusão ou falha:

+ +
function successCallback(result) {
+  console.log("It succeeded with " + result);
+}
+
+function failureCallback(error) {
+  console.log("It failed with " + error);
+}
+
+doSomething(successCallback, failureCallback);
+ +

…funções modernas retornam uma promisse e então você pode adicionar seus callbacks:

+ +
const promise = doSomething();
+promise.then(successCallback, failureCallback);
+ +

…ou simplesmente:

+ +
doSomething().then(successCallback, failureCallback);
+ +

Nós chamamos isso de chamada de função assincrona. Essa convenção tem várias vantagens. Vamos explorar cada uma delas.

+ +

Garantias

+ +

Ao contrário dos callbacks com retornos de funções old-style, uma promisse vem com algumas garantias:

+ +
    +
  • Callbacks nunca serão chamados antes da conclusão da execução atual do loop de eventos do JavaScript. 
    • +
  • Callbacks adicionadas com .then mesmo depois do sucesso ou falha da operação assincrona, serão chamadas, como acima.
    • +
  • Multiplos callbacks podem ser adicionados chamando-se .then várias vezes, para serem executados independentemente da ordem de inserção.
    • +
+ +

Mas o benefício mais imediato da promises é o encadeamento.

+ + + +

Encadeamento

+ +

Uma necessidade comum é executar duas ou mais operações assincronas consecutivas, onde cada operação subsequente começa quando a operação anterior é bem sucedida, com o resultado do passo anterior. Nós conseguimos isso criando uma cadeia de promises.

+ +

Aqui está a magica: a função then retorna uma nova promise, diferente da original:

+ +
const promise = doSomething();
+const promise2 = promise.then(successCallback, failureCallback);
+
+ +

ou

+ +
const promise2 = doSomething().then(successCallback, failureCallback);
+
+ +

Essa segunda promise representa a conclusão não apenas de doSomething(), mas também do successCallback ou failureCallback que você passou, que podem ser outras funções assincronas que retornam uma promise. Quando esse for o caso, quaisquer callbacks adicionados a promise2 serão enfileiradas atrás da promise retornada por successCallback ou failureCallback.

+ +

Basicamente, cada promise representa a completude de outro passo assíncrono na cadeia.

+ +

Antigamente, realizar operações assíncronas comuns em uma linha levaria à clássica pirâmide da desgraça :

+ +
doSomething(function(result) {
+  doSomethingElse(result, function(newResult) {
+    doThirdThing(newResult, function(finalResult) {
+      console.log('Got the final result: ' + finalResult);
+    }, failureCallback);
+  }, failureCallback);
+}, failureCallback);
+
+ +

Ao invés disso, com funções modernas, nós atribuímos nossas callbacks às promises retornadas, formando uma cadeia de promise:

+ +
doSomething().then(function(result) {
+  return doSomethingElse(result);
+})
+.then(function(newResult) {
+  return doThirdThing(newResult);
+})
+.then(function(finalResult) {
+  console.log('Got the final result: ' + finalResult);
+})
+.catch(failureCallback);
+
+ +

Os argumentos para then são opcionais, e catch(failureCallback) é uma abreviação para then(null, failureCallback). Você pode também pode ver isso escrito com arrow functions:

+ +
doSomething()
+.then(result => doSomethingElse(result))
+.then(newResult => doThirdThing(newResult))
+.then(finalResult => {
+  console.log(`Got the final result: ${finalResult}`);
+})
+.catch(failureCallback);
+
+ +

Importante: Sempre retorne um resultado, de outra forma as callbacks não vão capturar o resultado da promise anterior.

+ +

Encadeando depois de um catch

+ +

É possivel encadear depois de uma falha, i.e um catch, isso é muito útil para realizar novas ações mesmo depois de uma falha no encadeamento. Leia o seguinte exemplo: 

+ +
new Promise((resolve, reject) => {
+    console.log('Initial');
+
+    resolve();
+})
+.then(() => {
+    throw new Error('Something failed');
+
+    console.log('Do this');
+})
+.catch(() => {
+    console.log('Do that');
+})
+.then(() => {
+    console.log('Do this whatever happened before');
+});
+
+ +

Isso vai produzir o seguinte texto:

+ +
Initial
+Do that
+Do this whatever happened before
+
+ +

Observe que o texto "Do this" não foi impresso por conta que o erro "Something failed" causou uma rejeição.

+ +

Propagação de erros

+ +

Na pirâmide da desgraça vista anteriormente, você pode se lembrar de ter visto failureCallback três vezes, em comparação a uma única vez no fim da corrente de promessas:

+ +
doSomething()
+.then(result => doSomethingElse(result))
+.then(newResult => doThirdThing(newResult))
+.then(finalResult => console.log(`Got the final result: ${finalResult}`))
+.catch(failureCallback);
+
+ +

Basicamente, uma corrente de promessas para se houver uma exceção, procurando por catch handlers no lugar. Essa modelagem de código segue bastante a maneira de como o código síncrono funciona:

+ +
try {
+  const result = syncDoSomething();
+  const newResult = syncDoSomethingElse(result);
+  const finalResult = syncDoThirdThing(newResult);
+  console.log(`Got the final result: ${finalResult}`);
+} catch(error) {
+  failureCallback(error);
+}
+
+ +

Essa simetria com código assíncrono resulta no syntactic sugar async/await presente no ECMAScript 2017:

+ +
async function foo() {
+  try {
+    const result = await doSomething();
+    const newResult = await doSomethingElse(result);
+    const finalResult = await doThirdThing(newResult);
+    console.log(`Got the final result: ${finalResult}`);
+  } catch(error) {
+    failureCallback(error);
+  }
+}
+
+ +

É construído sobre promesas, por exemplo, doSomething() é a mesma função que antes. Leia mais sobre a sintaxe aqui.

+ +

Por pegar todos os erros, até mesmo exceções jogadas(thrown exceptions) e erros de programação, as promises acabam por solucionar uma falha fundamental presente na pirâmide da desgraça dos callbacks. Essa característica é essencial para a composição funcional das operações assíncronas.

+ +

Criando uma Promise em torno de uma callback API antiga

+ +

Uma {{jsxref("Promise")}} pode ser criada do zero utilizando o seu construtor. Isto deve ser necessário apenas para o envolvimento de APIs antigas.

+ +

Em um mundo ideal, todas as funções assincronas já retornariam promises. Infelizmente, algumas APIs ainda esperam que os retornos de suceso e/ou falha sejam passados da maneira antiga. O exemplo por excelência é o {{domxref("WindowTimers.setTimeout", "setTimeout()")}} function:

+ +
setTimeout(() => saySomething("10 seconds passed"), 10000);
+
+ +

Misturar chamadas de retorno e promeses de old-style é problemático. Se saySomething falhar ou contiver um erro de programação, nada o captura.

+ +

Por sorte nós podemos envolve-la em uma promise. É uma boa prática envolver funções problemáticas no menor nivel possível, e nunca chama-las diretamente de novo:

+ +
const wait = ms => new Promise(resolve => setTimeout(resolve, ms));
+
+wait(10000).then(() => saySomething("10 seconds")).catch(failureCallback);
+
+ +

Basically, the promise constructor takes an executor function that lets us resolve or reject a promise manually. Since setTimeout doesn't really fail, we left out reject in this case.

+ +

Basicamente, um construtor de promises pega uma função executora que nos deixa resolver ou rejeitar uma promise manualmente. Desde que setTimeout não venha a falhar, nos deixamos a rejeição de fora nesse caso

+ +

Composição

+ +

{{jsxref("Promise.resolve()")}} e {{jsxref("Promise.reject()")}} são atalhos para se criar manualmente uma promessa que já foi resolvida ou rejeitada, respectivamente. Isso pode ser útil em algumas situações.

+ +

{{jsxref("Promise.all()")}} e {{jsxref("Promise.race()")}} são duas ferramentas de composição para se executar operações assíncronas em paralelo.

+ +

Uma composição sequencial é possível usando JavaScript de uma forma esperta:

+ +
[func1, func2].reduce((p, f) => p.then(f), Promise.resolve());
+
+ +

Basicamente reduzimos um vetor de funções assíncronas a uma cadeia de promessas equivalentes a: Promise.resolve().then(func1).then(func2);

+ +

Isso também pode ser feito com uma função de composição reutilizável, que é comum em programação funcional:

+ +
const applyAsync = (acc,val) => acc.then(val);
+const composeAsync = (...funcs) => x => funcs.reduce(applyAsync, Promise.resolve(x));
+ + + +

A função composeAsync aceitará qualquer número de funções como argumentos e retornará uma nova função que aceita um valor incial a ser passado pelo pipeline de composição. Isso é benéfico porque alguma, ou todas as funções, podem ser assíncronas ou síncronas, e é garantido de que serão executadas na ordem correta.

+ +
const transformData = composeAsync(func1, asyncFunc1, asyncFunc2, func2);
+transformData(data);
+
+ +

No ECMAScript 2017, uma composição sequencial pode ser feita sde forma mais simples com async/await:

+ +
for (const f of [func1, func2]) {
+  await f();
+}
+
+ +

Cronometragem

+ +

Para evitar surpresas, funções passadas para then nunca serão chamadas sincronamente, mesmo com uma função ja resolvida:

+ +
Promise.resolve().then(() => console.log(2));
+console.log(1); // 1, 2
+
+ +

Instead of running immediately, the passed-in function is put on a microtask queue, which means it runs later when the queue is emptied at the end of the current run of the JavaScript event loop, i.e. pretty soon:

+ +

Ao invés de rodar imediatamente, a função passada é colocada em uma micro tarefa, o que significa que ela roda depois que a fila estiver vazia no final do atual processo de evento de loop do Javascript, isto é muito em breve

+ +
const wait = ms => new Promise(resolve => setTimeout(resolve, ms));
+
+wait().then(() => console.log(4));
+Promise.resolve().then(() => console.log(2)).then(() => console.log(3));
+console.log(1); // 1, 2, 3, 4
+
+ +

Ver também

+ + + +

{{PreviousNext("Web/JavaScript/Guide/Details_of_the_Object_Model", "Web/JavaScript/Guide/Iterators_and_Generators")}}

diff --git a/files/pt-br/web/javascript/guide/values,_variables,_and_literals/index.html b/files/pt-br/web/javascript/guide/values,_variables,_and_literals/index.html deleted file mode 100644 index 7920ee6b1a..0000000000 --- a/files/pt-br/web/javascript/guide/values,_variables,_and_literals/index.html +++ /dev/null @@ -1,601 +0,0 @@ ---- -title: Sintaxe e tipos -slug: 'Web/JavaScript/Guide/Values,_variables,_and_literals' -tags: - - Guia(2) - - Guía - - Iniciante - - JavaScript -translation_of: Web/JavaScript/Guide/Grammar_and_types ---- -

{{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. Por exemplo, a palavra Früh (que significa "cedo" em Alemão) pode ser usada como nome de variável.

- -
var Früh = "foobar";
- -

Mas a variável früh não é a mesma que Früh porque JavaScript é case sensitive.

- -

No JavaScript, instruções são chamadas de {{Glossary("Statement", "declaração")}} 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 de escopo de bloco, 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:

- -
    -
  • Com a palavra chave {{jsxref("Statements/var", "var")}}. Por exemplo, var x = 42. Esta sintaxe pode ser usada para declarar tanto variáveis locais como variáveis globais.
    • -
  • Por simples adição de valor. Por exemplo, x = 42. Isso declara uma variável global. Essa declaração gera um aviso de advertência no JavaScript. Você não deve usar essa variante.
    • -
  • Com a palavra chave {{jsxref("Statements/let", "let")}}. Por exemplo, let y = 13. Essa sintaxe pode ser usada para declarar uma variável local de escopo de bloco. Veja escopo de variável abaixo.
    • -
- -

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); // executa uma exception de erro de referência (ReferenceError)
-
- -

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

Variável de elevação

- -

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
- */
-// retornará 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, sublinhado ou cifrão e pode conter caractere alfabético, numérico ou sublinhado.

- -
const PI = 3.14;
-
- -

Uma constante não pode alterar seu valor por meio de uma atribuição ou ser declarada novamente enquanto o script está em execução. 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, presume-se que o identificador represente 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:

- -
    -
  • Seis tipos de dados são os chamados {{Glossary("Primitive", "primitivos")}}: -
      -
    • {{Glossary("Boolean")}}. true e false.
      • -
    • {{Glossary("null")}}. Uma palavra-chave que indica valor nulo. Devido JavaScript ser case-sensitive, null não é o mesmo que Null, NULL, ou ainda outra variação.
      • -
    • {{Glossary("undefined")}}. Uma propriedade superior cujo valor é indefinido.
      • -
    • {{Glossary("Number")}}. 42 ou 3.14159.
      • -
    • {{Glossary("String")}}. "Howdy"
      • -
    • {{Glossary("Symbol")}} (novo em ECMAScript 6). Um tipo de dado cuja as instâncias são únicas e imutáveis.
      • -
    -
    • -
  • e {{Glossary("Object")}}
    • -
- -

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ções")}} 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.

- -
    -
  • {{jsxref("parseInt", "parseInt()")}}
    • -
  • {{jsxref("parseFloat", "parseFloat()")}}
    • -
- -

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:

- -
    -
  • {{anch("Array literal")}}
    • -
  • {{anch("Literais boolean")}}
    • -
  • {{anch("Literais de ponto flutuante")}}
    • -
  • {{anch("Inteiros")}}
    • -
  • {{anch("Objeto literal")}}
    • -
  • {{anch("String literal")}}
    • -
- -

Array literal

- -

Um array literal é 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 ser expressos em decimal (base 10), hexadecimal (base 16), octal (base 8) e binário (base 2).

- -
    -
  • Decimal inteiro literal consiste em uma sequência de dígitos sem um 0 (zero).
    • -
  • 0 (zero) em um inteiro literal indica que ele está em octal. Octal pode incluir somente os dígitos 0-7.
    • -
  • 0x (ou 0X) indica um hexadecimal. Inteiros hexadecimais podem incluir dígitos (0-9) e as letras a-f e A-F.
    • -
  • 0b (ou 0B) indica um binário. Inteiros binário podem incluir apenas os dígitos 0 e 1.
    • -
- -

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:

- -
    -
  • Um inteiro decimal que pode ter sinal (precedido por "+" ou "-"),
    • -
  • Um ponto decimal ("."),
    • -
  • Uma fração (outro número decimal),
    • -
  • Um expoente.
    • -
- -

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 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 carro define uma propriedade, meuCarro, e atribui para ele uma nova string, "Punto"; o segundo elemento, a propriedade getCarro, é imediatamente atribuído o resultado de chamar uma função (tipoCarro("Fiat")); o terceiro elemento, a propriedade especial, usa uma variável existente (vendas).

- -
var vendas = "Toyota";
-
-function tipoCarro(nome) {
-  if (nome == "Fiat") {
-    return nome;
-  } else {
-    return "Desculpa, não vendemos carros " + nome + ".";
-  }
-}
-
-var carro = { meuCarro: "Punto", getCarro: tipoCarro("Fiat"), especial: vendas };
-
-console.log(carro.meuCarro);   // Punto
-console.log(carro.getCarro);  // Fiat
-console.log(carro.especial); // 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 carro = { carros: {a: "Saab", "b": "Jeep"}, 7: "Mazda" };
-
-console.log(carro.carros.b); // Jeep
-console.log(carro[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
-
- -

 

- -

Expressão Regex Literal

- -

Um regex literal é um padrão entre barras. A seguir um exemplo de regex literal.

- -
var re = /ab+c/;
- -

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 poema =
-"Rosas são vermelhas\n\
-Violetas são azuis,\n\
-Esse seu sorriso\n\
-é o que me seduz. (Lucas Pedrosa)"
-
- -

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/web/javascript/guide/working_with_objects/index.html b/files/pt-br/web/javascript/guide/working_with_objects/index.html new file mode 100644 index 0000000000..1dccaeef2e --- /dev/null +++ b/files/pt-br/web/javascript/guide/working_with_objects/index.html @@ -0,0 +1,494 @@ +--- +title: Trabalhando com objetos +slug: Web/JavaScript/Guide/Trabalhando_com_Objetos +tags: + - Comparando Objetos + - Contrutor + - Documento + - ECMAScript6 + - Guia(2) + - Iniciante + - JavaScript +translation_of: Web/JavaScript/Guide/Working_with_Objects +--- +

A linguagem JavaScript é projetada com base em um simples paradigma orientado a objeto. Um objeto é uma coleção de propriedades, e uma propriedade é uma associação entre um nome (ou chave) e um valor. Um valor de propriedade pode ser uma função, que é então considerada um método do objeto. Além dos objetos que são pré-definidos no browser, você pode definir seus próprios objetos.

+ +

Este capítulo descreve como usar objetos, propriedades, funções, e métodos, e como criar seus próprios objetos.

+ +

Visão geral de objetos

+ +

Objetos em JavaScript, assim como em muitas outras linguagens de programação, podem ser comparados com objetos na vida real. O conceito de objetos em JavaScript pode ser entendido com objetos tangíveis da vida real.

+ +

Em JavaScript, um objeto é uma entidade independente, com propriedades e tipos. Compare-o com uma xícara, por exemplo. Uma xícara é um objeto, com propriedades. Uma xícara tem uma cor, uma forma, peso, um material de composição, etc. Da mesma forma, objetos em JavaScript podem ter propriedades, que definem suas características.

+ +

Objetos e propriedades

+ +

Um objeto em JavaScript tem propriedades associadas a ele. Uma propriedade de um objeto pode ser explicada como uma variável que é ligada ao objeto. Propriedades de objetos são basicamente as mesmas que variáveis normais em JavaScript, exceto pelo fato de estarem ligadas a objetos. As propriedades de um objeto definem as características do objeto. Você acessa as propriedades de um objeto com uma simples notação de ponto:

+ +
+
nomeDoObjeto.nomeDaPropriedade
+
+
+ +

Como as variáveis em JavaScript, o nome do objeto (que poderia ser uma variável normal) e um nome de propriedade diferem em maiúsculas/minúsculas (por exemplo, cor e Cor são propriedades diferentes). Você pode definir uma propriedade atribuindo um valor a ela. Por exemplo, vamos criar um objeto chamado meuCarro e dar a ele propriedades chamadas fabricacao, modelo, e ano, conforme mostrado a seguir:

+ +
var meuCarro = new Object();
+meuCarro.fabricacao = "Ford";
+meuCarro.modelo = "Mustang";
+meuCarro.ano = 1969;
+
+ +

Propriedades não definidas de um objeto são {{jsxref("undefined")}} (e não {{jsxref("null")}}).

+ +
meuCarro.semPropriedade; //undefined
+ +

Propriedades de objetos em JavaScript podem também ser acessadas ou alteradas usando-se notação de colchetes. Objetos são às vezes chamados de arrays associativos, uma vez que cada propriedade é associada com um valor de string que pode ser usado para acessá-la. Então, por exemplo, você poderia acessar as propriedades do objeto meuCarro como se segue:

+ +
meuCarro["fabricacao"] = "Ford";
+meuCarro["modelo"] = "Mustang";
+meuCarro["ano"] = 1969;
+
+ +

Um nome de propriedade de um objeto pode ser qualquer string JavaScript válida, ou qualquer coisa que possa ser convertida em uma string, incluindo uma string vazia. No entanto, qualquer nome e propriedade que não é um identificador JavaScript válido (por exemplo, um nome de propriedade que tem um espaço ou um hífen, ou que começa com um número) só pode ser acessado(a) usando-se a notação de colchetes. Essa notação é também muito útil quando nomes de propriedades devem ser determinados dinamicamente (quando o nome da propriedade não é determinado até o momento de execução). Exemplos são mostrados a seguir:

+ +
var meuObj = new Object(),
+    str = "minhaString",
+    aleat = Math.random(),
+    obj = new Object();
+
+meuObj.tipo               = "Sintaxe de ponto";
+meuObj["data de criacao"] = "String com espaco";
+meuObj[str]               = "valor de String";
+meuObj[aleat]             = "Numero Aleatorio";
+meuObj[obj]               = "Objeto";
+meuObj[""]                = "Mesmo uma string vazia";
+
+console.log(meuObj);
+
+ +

Você pode também acessar propriedades usando um valor de string que está armazenado em uma variável:

+ +
+
var nomeDaPropriedade = "fabricacao";
+meuCarro[nomeDaPropriedade] = "Ford";
+
+nomeDaPropriedade = "modelo";
+meuCarro[nomeDaPropriedade] = "Mustang";
+
+
+ +

Você pode usar a notação de colchetes com o comando for...in para iterar por todas as propriedades enumeráveis de um objeto. Para ilustrar como isso funciona, a seguinte função mostra as propriedades de um objeto quando você passa o objeto e o nome do objeto como argumentos para a função:

+ +
function mostrarProps(obj, nomeDoObj) {
+  var resultado = "";
+  for (var i in obj) {
+    if (obj.hasOwnProperty(i)) {
+        resultado += nomeDoObj + "." + i + " = " + obj[i] + "\n";
+    }
+  }
+  return resultado;
+}
+
+ +

Então, a chamada de função mostrarProps(meuCarro, "meuCarro") retornaria o seguinte:

+ +
meuCarro.fabricacao = Ford
+meuCarro.modelo = Mustang
+meuCarro.ano = 1969
+ +

Objetos: tudo

+ +

Em JavaScript, quase tudo é um objeto. Todos os tipos primitivos - com exceção de null e undefined - são tratados como objetos. Eles podem receber propriedades (propriedades atribuídas de alguns tipos não são persistentes), e possuem todas as características de objetos.

+ +

Enumerando todas as propriedades de um objeto

+ +

Começando com a ECMAScript 5, há três formas nativas de se listar (ou "caminhar por") as propriedades de um objeto:

+ +
    +
  • for...in loops
    + Esse método caminha por todas as propriedades enumeráveis de um objeto e sua cadeia de protótipos
    • +
  • Object.keys(o)
    + Esse método retorna um array com todos os nomes ("chaves") de propriedades próprios de um objeto o (mas não na cadeia de protótipos).
    • +
  • Object.getOwnPropertyNames(o)
    + Esse método retorna um array contendo todos os nomes de propriedades próprios (enumeráveis ou não) de um objeto o.
    • +
+ +

Antes, na ECMAScript 5, não existia uma forma nativa de se listar todas as propriedades de um objeto. No entanto, isso pode ser feito com a seguinte função:

+ +
function listarTodasAsPropriedades(o){
+	var objectoASerInspecionado;
+	var resultado = [];
+
+	for(objectoASerInspecionado = o; objectoASerInspecionado !== null; objectoASerInspecionado = Object.getPrototypeOf(objectoASerInspecionado)){
+		resultado = resultado.concat(Object.getOwnPropertyNames(objectoASerInspecionado));
+	}
+
+	return resultado;
+}
+
+ +

Isso pode ser útil para revelar propriedades "escondidadas" (propriedades na cadeia de protótipos que não são acessíveis através do objeto, porque outra propriedade possui o mesmo nome anteriormente na cadeia de protótipos). A listagem de propriedades acessíveis só pode ser facilmente feita através da remoção de valores duplicados no array.

+ +

Criando novos objetos

+ +

JavaScript possui um número de objetos pré-definidos. Além disso, você pode criar seus próprios objetos. Você pode criar um objeto usando um objeto inicializador. Alternativamente, você pode primeiro criar uma função construtora e depois instanciar um objeto usando aquela função e o operador new.

+ +

Usando inicializadores de objeto

+ +

Além de criar objetos usando uma função construtora, você pode criar objetos usando um inicializador de objeto. O uso de inicializadores de objeto é às vezes conhecido como criar objetos com notação literal. O termo "inicializador de objeto" é consistente com a terminologia usada por C++.

+ +

A sintaxe para um objeto usando-se um inicializador de objeto é:

+ +
var obj = { propriedade_1:   valor_1,   // propriedade_# pode ser um identificador...
+            2:            valor_2,   // ou um numero...
+            // ...,
+            "propriedade n": valor_n }; // ou uma string
+
+ +

onde obj é o nome do novo objeto, cada propriedade_i é um identificador (um nome, um número, ou uma string literal), e cada valor_i é uma expressão cujo valor é atribuído à propriedade_i. O obj e a atribuição são opcionais; se você não precisa fazer referência a esse objeto em nenhum outro local, você não precisa atribuí-lo a uma variável. (Note que você pode precisar colocar o objeto literal entre parentêses se o objeto aparece onde um comando é esperado, de modo a não confundir o literal com uma declaração de bloco.)

+ +

Se um objeto é criado com um inicializador de objeto em um script de alto nível, JavaScript interpreta o objeto a cada vez que avalia uma expressão contendo o objeto literal. Além disso, um inicializador usado em uma função é criado toda vez que a função é chamada.

+ +

O seguinte comando cria um objeto e o atribui à variável x somente se a expressão cond é verdadeira.

+ +
if (cond) var x = {hi: "there"};
+
+ +

O seguinte exemplo cria minhaHonda com três propriedades. Note que a propriedade motor é também um objeto com suas próprias propriedades.

+ +
var minhaHonda = {cor: "vermelho", rodas: 4, motor: {cilindros: 4, tamanho: 2.2}};
+
+ +

Você pode também usar inicializadores de objeto para criar arrays. Veja arrays literais.

+ +

Usando uma função construtora

+ +

Alternativamente, você pode criar um objeto com estes dois passos:

+ +
    +
  1. Defina o tipo de objeto escrevendo uma função construtora. Há uma forte convenção, e com boa razão, de se usar uma letra inicial maiúscula.
    2. +
  2. Crie uma instância do objeto com new.
    3. +
+ +

Para definir um tipo de objeto, crie uma função para o tipo de objeto que especifique seu nome, suas propriedades e seus métodos. Por exemplo, suponha que você queira criar um tipo objeto para carros. Você quer que esse tipo de objeto seja chamado carro, e você quer ele tenha propriedades de marca, modelo, e ano. Para fazer isto, você escreveria a seguinte função:

+ +
function Carro(marca, modelo, ano) {
+  this.marca = marca;
+  this.modelo = modelo;
+  this.ano = ano;
+}
+
+ +

Note o uso de this para atribuir valores às propriedades do objeto com base nos valores passados para a função.

+ +

Agora você pode criar um objeto chamado meucarro como se segue:

+ +
var meucarro = new Carro("Eagle", "Talon TSi", 1993);
+
+ +

Esse comando cria meucarro e atribui a ele valores especificados para suas propriedade. Então o valor de meucarro.marca é a string "Eagle", meucarro.ano é o inteiro 1993, e assim por diante.

+ +

Você pode criar qualquer número de objetos carro com o uso de new. Exemplo,

+ +
var carroDeKen = new Carro("Nissan", "300ZX", 1992);
+var carroDeVPG = new Carro("Mazda", "Miata", 1990);
+
+ +

Um objeto pode ter uma propriedade que por si só também é um objeto. Por exemplo, suponha que você define um objeto chamado pessoa como se segue:

+ +
function Pessoa(nome, idade, sexo) {
+  this.nome = nome;
+  this.idade = idade;
+  this.sexo = sexo;
+}
+
+ +

e então você instancia dois novos objetos pessoa da seguinte forma:

+ +
var jose = new Pessoa("Jose Silva", 33, "M");
+var paulo = new Pessoa("Paulo Santos", 39, "M");
+
+ +

Então, você pode reescrever a definição de carro de modo a incluir uma propriedade dono que recebe um objeto pessoa, como se segue:

+ +
function Carro(marca, modelo, ano, dono) {
+  this.marca = marca;
+  this.modelo = modelo;
+  this.ano = ano;
+  this.dono = dono;
+}
+
+ +

Para instanciar os novos objetos, você então usa o seguinte:

+ +
var carro1 = new Carro("Eagle", "Talon TSi", 1993, jose);
+var carro2 = new Carro("Nissan", "300ZX", 1992, paulo);
+
+ +

Perceba que ao invés de passar uma string literal ou um valor inteiro na hora de criar os novos objetos, os comandos acima passam os objetos jose e paulo como os argumentos para os donos. Então se você quiser descobrir o nome do dono de carro2, você pode acessar a seguinte propriedade:

+ +
carro2.dono
+
+ +

Note que você pode sempre adicionar uma propriedade a um objeto definido anteriormente. Por exemplo, o comando

+ +
carro1.cor = "preto";
+
+ +

adiciona uma propriedade cor ao carro1, e dá a ele o valor "preto." No entanto, isso não afeta nenhum outro objeto. Para adicionar a nova propriedade a todos os objetos do mesmo tipo, você deve adicionar a propriedade na definição do tipo de objeto carro.

+ +

Usando o método Object.create

+ +

Objetos podem também ser criados usando-se o método Object.create(). Esse método pode ser muito útil, pois permite que você escolha o objeto protótipo para o objeto que você quer criar, sem a necessidade de se definir uma função construtora.

+ +
// Encapsulamento das propriedades e métodos de Animal
+var Animal = {
+  tipo: "Invertebrados", // Propriedades de valores padrão
+  qualTipo : function() {  // Método que ira mostrar o tipo de Animal
+    console.log(this.tipo);
+  }
+}
+
+// Cria um novo tipo de animal chamado animal1
+var animal1 = Object.create(Animal);
+animal1.qualTipo(); // Saída:Invertebrados
+
+// Cria um novo tipo de animal chamado Peixes
+var peixe = Object.create(Animal);
+peixe.tipo = "Peixes";
+peixe.qualTipo(); // Saída: Peixes
+ +

Herança

+ +

Todos os objetos em JavaScript herdam de pelo menos um outro objeto. O objeto "pai" é conhecido como o protótipo, e as propriedades herdadas podem ser encontradas no objeto prototype do construtor.

+ +

Indexando Propriedades de Objetos

+ +

Você pode se referir a uma propriedade de um objeto pelo seu nome de propriedade ou pelo seu índice ordinal. Se você inicialmente definiu uma propriedade pelo nome, você deve sempre se referir a ela pelo nome, e se você inicialmente definir uma propriedade por um índice, você deve sempre se referir a ela pelo índice.

+ +

Esta restrição se aplica quando  você cria um objeto e suas propriedades com uma função construtora (como fizemos anteriormente com o objeto do tipo carro) e quando você define propriedades individuais explicitamente (por exemplo, meuCarro.cor = "vermelho"). Se você inicialmente definir uma propriedade do objeto com um índice, tal como meuCarro[5] = "25 mpg", você pode subsequentemente referir-se á propriedade somente como meuCarro[5].

+ +

A exceção a esta regra é a objetos refletidos a partir do HTML, como o conjunto de formulários. Você pode sempre se referir a objetos nessas matrizes por seu número de ordem (com base em onde eles aparecem no documento) ou seu nome (se definido). Por exemplo, se a segunda tag <FORM> em um  documento tem um atributo NAME de "meuFormulario", você pode se referir ao formulário como document.forms[1] ou document.forms["meuFormulario"] ou document.meuFormulario.

+ +

Definindo propriedades para um tipo de objeto

+ +

Você pode adicionar uma propriedade a um tipo de objeto definido anteriormente, utilizando a propriedade prototype. Esta define uma propriedade que é partilhada por todos os objetos do tipo especificado, em vez de apenas uma instância do objeto. O código a seguir adiciona uma propriedade cor para todos os objetos do tipo Carro, em seguida adiciona um valor a propriedade cor do objeto carro1.

+ +
Carro.prototype.cor = null;
+carro1.cor = "preto";
+
+ +

Consulte a propriedade prototype do objeto Function na Referência JavaScript  para mais informações.

+ +

Definindo métodos

+ +

Um método é uma função associada a um objeto, ou, simplesmente, um método é uma propriedade de um objeto que é uma função. Métodos são definidos da forma que as funções normais são definidas, exceto que eles tenham que ser atribuídos como propriedade de um objeto. São exemplos:

+ +
nomeDoObjeto.nomedometodo = nome_da_funcao;
+
+var meuObjeto = {
+  meuMetodo: function(parametros) {
+    // ...faça algo
+  }
+};
+
+ +

Onde nomeDoObjeto é um objeto existente, nomedometodo é o nome que você atribuiu ao método, e nome_da_funcao é o nome da função.

+ +

Em seguida, você pode chamar o método no contexto do objeto da seguinte forma:

+ +
objeto.nomedometodo(parametros);
+
+ +

Você pode definir métodos para um tipo de objeto incluindo uma definição de metodo na função construtora do objeto. Por exemplo, você poderia definir uma função que iria formatar e mostrar as propriedades do objeto carro previamente definido; por exemplo,

+ +
function mostreCarro() {
+  var resultado = "Um belo " + this.ano + " " + this.fabricacao
+    + " " + this.modelo;
+  pretty_print(resultado);
+}
+
+ +

onde pretty_print é uma função que mostra uma linha horizontal e uma string. Observe o uso de this para referenciar o objeto ao qual o método pertence.

+ +

Você pode fazer desta função um método de carro, adicionando seu estado à definição do objeto.

+ +
this.mostreCarro = mostreCarro;
+
+ +

Assim, a definição completa de carro seria agora, parecida com essa:

+ +
function Carro(fabricacao, modelo, ano, proprietario) {
+  this.fabricacao = fabricacao;
+  this.modelo = modelo;
+  this.ano = ano;
+  this.proprietario = proprietario;
+  this.mostreCarro = mostreCarro;
+}
+
+ +

Então você pode chamar o método mostreCarro para cada objeto seguinte:

+ +
carro1.mostreCarro();
+carro2.mostreCarro();
+
+ +

Usando this para referências de objetos

+ +

JavaScript tem uma palavra-chave especial, this, que você pode usar dentro de um método para referenciar o objeto corrente. Por exemplo, suponha que você tenha uma função chamada validate que valida o valor da propriedade de um objeto, dado o objeto e os valores altos e baixos:

+ +
function validate(obj, lowval, hival) {
+  if ((obj.value < lowval) || (obj.value > hival))
+    alert("Valor inválido!");
+}
+
+ +

Então, você poderia chamar validate no manipulador de evento onchange em cada elemento do formulário, usando this para passar o elemento, como no exemplo a seguir:

+ +
<input type="text" name="age" size="3"
+  onChange="validate(this, 18, 99)">
+
+ +

No geral, this referencia o objeto chamando um método.

+ +

Quando combinado com a propriedade form , this pode referenciar a forma original do objeto atual. No exemplo seguinte, o formulário myForm contém um objeto Text e um botão. Quando o usuário clica no botão, o valor do objeto Text é definido como nome do formulário. O manipulador de eventos onclick do botão usa this.form para referenciar a forma original, myForm.

+ +
<form name="myForm">
+<p><label>Nome do form:<input type="text" name="text1" value="Beluga"></label>
+<p><input name="button1" type="button" value="Mostre o Nome do Form"
+     onclick="this.form.text1.value = this.form.name">
+</p>
+</form>
+ +

Definindo getters e setters

+ +

Um getter é um método que obtém o valor de uma propriedade específica. Um setter é um método que define o valor de uma propriedade específica. Você pode definir getters e setters em qualquer objeto de núcleo pré-definido ou objeto definido pelo usuário que suporta a adição de novas propriedades. A sintaxe para definir getters e setters usa a sintaxe literal do objeto.

+ +

O código a seguir ilustra como getters e setters podem funcionar para um objeto o definido pelo usuário.

+ +
var o = {
+  a: 7,
+  get b() {
+    return this.a + 1;
+  },
+  set c(x) {
+    this.a = x / 2
+  }
+};
+
+console.log(o.a); // 7
+console.log(o.b); // 8
+o.c = 50;
+console.log(o.a); // 25
+ +

As propriedades do objeto o são:

+ +
    +
  • o.a — um número
    • +
  • o.b — um getter que retorna o.a + 1
    • +
  • o.c — um setter que define o valor de o.a pela metade do valor definindo para o.c
    • +
+ +

Observe que nomes de função de getters e setters definidos em um objeto literal usando "[gs]et property()" (ao contrário de __define[GS]etter__ ) não são os próprios nomes dos getters, embora a sintaxe [gs]et propertyName(){ } possa  induzir ao erro e você pensar de outra forma. Para nomear uma função getter ou setter usando a sintaxe "[gs]et property()", define explicitamente um função nomeada programaticamente usando Object.defineProperty (ou o legado fallback Object.prototype.__defineGetter__).

+ +

O código a seguir ilustra como getters e setters podem extender o protótipo Date para adicionar a propriedade ano para todas as instâncias de classes Date pré-definidas. Ele usa os métodos getFullYear e setFullYear existentes da classe Date para suportar o getter e setter da propriedade ano.

+ +

Estes estados definem um getter e setter para a propriedade ano:

+ +
var d = Date.prototype;
+Object.defineProperty(d, "year", {
+  get: function() { return this.getFullYear() },
+  set: function(y) { this.setFullYear(y) }
+});
+ +

Estes estados usam o getter e setter em um objeto Date:

+ +
var now = new Date();
+console.log(now.year); // 2000
+now.year = 2001; // 987617605170
+console.log(now);
+// Wed Apr 18 11:13:25 GMT-0700 (Pacific Daylight Time) 2001
+ +

A principio, getters e setters podem ser ou

+ +
    +
  • definidos usando objetos inicializadores, ou
    • +
  • adicionar posteriormente para qualquer objeto a qualquer tempo usando um método getter ou setter adicionado
    • +
+ +

Ao definir getters e setters usando objetos inicializadores tudo o que você precisa fazer é prefixar um método getter com get e um método setter com set. Claro, o método getter não deve esperar um parâmetro, enquanto o método setter espera exatamente um parâmetro (novo valor para definir). Por exemplo:

+ +
var o = {
+  a: 7,
+  get b() { return this.a + 1; },
+  set c(x) { this.a = x / 2; }
+};
+
+ +

Getters e setters podem também ser adicionado em um objeto a qualquer hora depois da criação usando o método Object.defineProperties. O primeiro parâmetro deste método é o objeto no qual você quer definir o getter ou setter. O segundo parâmetro é um objeto cujos nomes das propriedades são os nomes getter ou setter, e cujo valores das propriedades são objetos para definição de funções getter ou setter. Aqui está um exemplo que define o mesmo getter e setter usado no exemplo anterior:
+  

+ +
var o = { a:0 }
+
+Object.defineProperties(o, {
+    "b": { get: function () { return this.a + 1; } },
+    "c": { set: function (x) { this.a = x / 2; } }
+});
+
+o.c = 10 // Roda o setter, que associa 10 / 2 (5) para a propriedade 'a'
+console.log(o.b) // Roda o getter, que yields a + 1 ou 6
+
+ +

Escolher qual das duas formas depende do seu estilo de programação e tarefa na mão. Se você já vai para o inicializador de objeto ao definir um protótipo, provavelmente a maior parte do tempo escolherá a primeira forma. Esta forma é mais compacta e natural. No entanto, se você precisar adicionar getters e setters mais tarde - porque você não escreveu o protótipo ou objeto particular - então a segunda forma é a única possível. A segunda forma provavelmente melhor representa a natureza dinâmica do JavaScript - mas pode tornar o código difícil de ler e entender.

+ +

Removendo propriedades

+ +

Você pode remover uma propriedade não herdada usando o operador delete. O código a seguir mostra como remover uma propriedade.

+ +
//Criando um novo objeto, myobj, com duas propriedades, a e b.
+var myobj = new Object;
+myobj.a = 5;
+myobj.b = 12;
+
+//Removendo a propriedade a, deixando myobj com apenas a propriedade b.
+delete myobj.a;
+console.log ("a" in myobj) // yields "false"
+
+ +

Você também pode usar delete para remover uma variável global se a var keyword não estiver sendo usada para declarar a variável:

+ +
g = 17;
+delete g;
+
+ +

Comparando Objetos

+ +

Em JavaScript, objetos são um tipo de referência. Dois objetos distintos nunca são iguais, mesmo que tenham as mesmas propriedades. Apenas comparando o mesmo objeto de referência com ele mesmo produz verdadeiro.

+ +
// Duas variáveis, dois objetos distintos com as mesmas propriedades
+var fruit = {name: "apple"};
+var fruitbear = {name: "apple"};
+
+fruit == fruitbear // return false
+fruit === fruitbear // return false
+ +
// Duas variáveis, um único objeto
+var fruit = {name: "apple"};
+var fruitbear = fruit;  // assign fruit object reference to fruitbear
+
+// Here fruit and fruitbear are pointing to same object
+fruit == fruitbear // return true
+fruit === fruitbear // return true
+ +

Para mais informações sobre comparaçāo de operadores, veja Operadores de comparaçāo.

+ +

Veja também

+ + + +
{{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Details_of_the_Object_Model")}}
diff --git a/files/pt-br/web/javascript/inheritance_and_the_prototype_chain/index.html b/files/pt-br/web/javascript/inheritance_and_the_prototype_chain/index.html new file mode 100644 index 0000000000..d6aad53066 --- /dev/null +++ b/files/pt-br/web/javascript/inheritance_and_the_prototype_chain/index.html @@ -0,0 +1,193 @@ +--- +title: Herança e cadeia de protótipos (prototype chain) +slug: Web/JavaScript/Guide/Inheritance_and_the_prototype_chain +tags: + - herança intermediário JavaScript OOP +translation_of: Web/JavaScript/Inheritance_and_the_prototype_chain +--- +
{{jsSidebar("Advanced")}}
+ +

JavaScript é um pouco confuso para desenvolvedores com experiência em linguagens baseadas em classes (como Java ou C++), porque é dinâmico e não dispõe de uma implementação de uma class (a palavra-chave class foi introduzida no ES2015, mas é syntax sugar, o JavaScript permanece baseado em prototype).

+ +

Quando se trata de herança, o JavaScript tem somente um construtor: objetos. Cada objeto tem um link interno para um outro objeto chamado prototype. Esse objeto prototype também tem um atributo prototype, e assim por diante até o que o valor null seja encontrado como sendo o seu prototype. null que, por definição, não tem prototype, e age como um link final nesta cadeia de protótipos (prototype chain).

+ +

Isto muitas vezes é considerado como um dos pontos fracos do JavaScript, mas o modelo de herança prototipal é de fato mais potente do que o modelo clássico. É, por exemplo, relativamente trivial construir um "modelo clássico" (como na implementaçao de class), enquanto o contrário é uma tarefa muito mais difícil.

+ +

1 N. da T: Como em uma implementação de fila em C, por exemplo.

+ +

Herança com o encadeamento de protótipos

+ +

Propriedades de heranças

+ +

Objetos em JavaScript são "sacos" dinâmicos de propriedades (a que se refere as próprias propriedades) e cada um tem um link para um objeto prototype. Eis o que acontece quando se tenta acessar uma propriedade:

+ +
// Vamos criar um objeto o da função f com suas próprias propriedades a e b:
+let f = function () {
+   this.a = 1;
+   this.b = 2;
+}
+let o = new f(); // {a: 1, b: 2}
+
+// adicionar propriedades no protótipo da função f
+f.prototype.b = 3;
+f.prototype.c = 4;
+
+// não defina o protótipo f.prototype = {b: 3, c: 4}; isso vai quebrar a cadeia de protótipos
+// o. [[Prototype]] possui propriedades bec.
+// o. [[Prototype]]. [[Prototype]] é Object.prototype.
+// Finalmente, o. [[Prototype]]. [[Prototype]]. [[Prototype]] é nulo.
+// Este é o fim da cadeia de protótipos, como nulo,
+// por definição, não possui [[Prototype]].
+// Assim, a cadeia completa de protótipos se parece com:
+// {a: 1, b: 2} ---> {b: 3, c: 4} ---> Object.prototype ---> null dfdf
+
+console.log(o.a); // 1
+// Existe uma propriedade 'a' no objeto o? Sim, e seu valor é 1.
+
+console.log(o.b); // 2
+// Existe uma propriedade própria 'b' em o? Sim, e seu valor é 2.
+// O protótipo também tem uma propriedade 'b', mas não é visitado.
+// Isso é chamado de sombreamento de propriedade(Property Shadowing)
+
+console.log(o.c); // 4
+// Existe uma propriedade própria 'c' em o? Não, verifique seu protótipo.
+// Existe uma propriedade 'c' própria em o. [[Prototype]]? Sim, seu valor é 4.
+
+console.log(o.d); // undefined
+// Existe uma propriedade 'd' própria em o? Não, verifique seu prototype.
+// Existe uma propriedade 'd' em o. [[Prototype]]? Não, verifique seu prototype.
+// o. [[Prototype]]. [[Prototype]] é Object.prototype e não há propriedade 'd' por padrão, verifique seu prototype.
+// o. [[Prototype]]. [[Prototype]]. [[Prototype]] é nulo, pare de pesquisar,
+// nenhuma propriedade encontrada, retorne indefinido.
+
+ +

Code Link

+ +

Atribuir uma propriedade a um objeto cria uma propriedade nele. A única exceção às regras de obtenção e definição de comportamento é quando há uma propriedade herdada com um getter or a setter.

+ +

Herença de "métodos"

+ +

JavaScript não tem "métodos" como os que conhecemos em linguagens baseadas em classes. Em JavaScript, qualquer função pode ser adicionada em um objeto em forma de propriedade. Uma herança de funções age como a herança de quaisquers outras propriedades que não sejam funções, e podemos inclusive realizar sobre-escrita de função(method overriding)!

+ +

Quando uma herança de função é executada, o valor de this aponta para o objeto que herdou as propriedades, não para o objeto prototype onde as propriedades foram escritas originalmente.

+ +
var o = {
+  a: 2,
+  m: function(b){
+    return this.a + 1;
+  }
+};
+
+console.log(o.m()); // 3
+// Ao chamar 'o.m' neste caso, "this" refere-se a 'o'
+
+var p = Object.create(o);
+// 'p' é um objeto que foi herdado de 'o'
+
+p.a = 12; // cria uma propriedade 'a' no objeto 'p'
+console.log(p.m()); // 13
+// Ao chamar 'p.m', 'this' refere-se a 'p'
+// Então, quando 'p' herda a função de 'm' de 'o', 'this.a' representa 'p.a' que é a própria propriedade 'a' de 'p'
+
+
+ +

Maneiras de criar objetos e resultados dos protótipos encadeados

+ +

Objetos criados com sintaxe de construtores

+ +
var o = {a: 1};
+
+// O recém-criado objecto 'o' tem Object.prototype como o seu [[Prototype]]
+// 'o' não tem não tem uma propriedade chamada 'hasOwnProperty'
+// hasOwnProperty é uma propriedade própria de Object.prototype. Então 'o' herda hasOwnProperty de Object.prototype
+
+// Object.prototype tem null como seu protótipo.
+// o ---> Object.prototype ---> null
+
+var a = ["yo", "whadup", "?"];
+
+// Arrays herdam de Array.prototype (que tem métodos como indexOf, forEach, etc.)
+// A cadeia de protótipos se parece com isso:
+// a ---> Array.prototype ---> Object.prototype ---> null
+
+function f(){
+  return 2;
+}
+
+// Funções herdam de Function.prototype (que tem métodos como call, bind, etc.)
+// f ---> Function.prototype ---> Object.prototype ---> null
+
+ +

Com um construtor

+ +

Um "construtor" em JavaScript é "somente" uma função que passa a ser chamada com o operador new.

+ +
function Graph() {
+  this.vertexes = [];
+  this.edges = [];
+}
+
+Graph.prototype = {
+  addVertex: function(v){
+    this.vertexes.push(v);
+  }
+};
+
+var g = new Graph();
+// 'g' é um objeto com as propriedades 'vertexes' e 'edges'.
+// g.[[Prototype]] é o valor de Graph.prototype quando new Graph() é executada.
+
+ +

Com Object.create

+ +

ECMAScript 5 introduziu o novo método: Object.create. Invocando este método podemos criar novos objetos. O prototype destes novos objetos é o primeiro argumento do método:

+ +
var a = {a: 1};
+// a ---> Object.prototype ---> null
+
+var b = Object.create(a);
+// b ---> a ---> Object.prototype ---> null
+console.log(b.a); // 1 (inherited)
+
+var c = Object.create(b);
+// c ---> b ---> a ---> Object.prototype ---> null
+
+var d = Object.create(null);
+// d ---> null
+console.log(d.hasOwnProperty); // undefined, porque não herda de Object.prototype
+
+ +
+

Performace

+ +

O tempo de pesquisa para as propriedades que estão no alto da cadeia de protótipos pode ter um impacto negativo no desempenho, e isso pode ser significativo no código em que o desempenho é crítico. Além disso, tentando acessar propriedades inexistentes vai sempre atravessar a cadeia cheia do protótipo (full prototype chain).

+ +

Porém, quando estamos interagindo com as propriedades de um objeto, toda propriedade que está na cadeia do prototype (prototype chain) vai ser enumerada.

+ +

Para verificar se um objeto tem uma propriedade definida em si mesmo e não em algum lugar na sua cadeia de protótipo, é necessário usar o método hasOwnProperty que todos os objetos herdam do Object.prototype.

+ +

hasOwnProperty é a única alternativa em JavaScript que lida com propriedades sem atravessar a cadeia de protótipos.

+ + +
Observação: Não é suficiente apenas verificar se o valor da propriedade é undefined para saber se ela existe. A propriedade pode muito bem existir e não ter sido inicializada, sendo assim o seu valor undefined.
+ +
+

Má Pratica: Estender protótipos nativos

+ +

Um erro frequentemente cometido por programadores é estender um Object.prototype.

+ +

Esta técnica é chamada de "monkey patching" e quebra o encapsulamento. Não existe uma boa razão para desorganizar tipos nativos do JavaScript para adicionar uma nova funcionalidade ao mesmo. 

+ +

O único bom motivo para estender um protótipo nativo do JavaScript é para dar suporte a novas "features" do JavaScript; por exemplo: Array.forEach, etc.

+
+ +
+

Conclusão

+ +

É essencial entender bem  "prototypal inheritance" antes de escrever códigos complexos. Tome cuidado com o tamanho da sua cadeia de protótipos, quebre a cadeia caso necessário para evitar problemas de performace. Nunca estenda protótipos nativos a menos que seja para conseguir compatibilidade com novas "features" do JavaScript.

+ + +
+
+ +

{{ languages( {"zh-cn": "zh-cn/JavaScript/Guide/Inheritance_and_the_prototype_chain" } ) }}

diff --git a/files/pt-br/web/javascript/introduction_to_object-oriented_javascript/index.html b/files/pt-br/web/javascript/introduction_to_object-oriented_javascript/index.html deleted file mode 100644 index aaab9150b3..0000000000 --- a/files/pt-br/web/javascript/introduction_to_object-oriented_javascript/index.html +++ /dev/null @@ -1,352 +0,0 @@ ---- -title: Introdução ao JavaScript Orientado a Objeto -slug: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript -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 ---- -

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/web/javascript/reference/errors/fata_par\303\252nteses_ap\303\263s_lista_argumento/index.html" "b/files/pt-br/web/javascript/reference/errors/fata_par\303\252nteses_ap\303\263s_lista_argumento/index.html" deleted file mode 100644 index 83844d17b5..0000000000 --- "a/files/pt-br/web/javascript/reference/errors/fata_par\303\252nteses_ap\303\263s_lista_argumento/index.html" +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: Erro de sintaxe falta ) depois da lista de argumentos -slug: Web/JavaScript/Reference/Errors/Fata_parênteses_após_lista_argumento -translation_of: Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list ---- -
{{jsSidebar("Errors")}}
- -

Mensagem

- -
Erro de sintaxe: Falta ) depois da lista de argumento
-
- -

Tipo de Erro

- -

{{jsxref("Erro de sintaxe")}}.

- -

O que houve de errado?

- -

Ocorreu um erro quando a função foi chamada. Pode ter sido um erro de escrita, falta de operador, ou uma string fora das aspas, por exemplo.

- -

Exemplos

- -

Pela falta do operador "+" para fazer a concatenação da string, o JavaScript esperou um argumento para a função log ser "PI: ". Nesse caso, deveria ser finalizado com parênteses de fechamento ')'.

- -
console.log("PI: " Math.PI);
-// SyntaxError: missing ) after argument list
-
- -

Você pode corrigir a chamada do log adicionand o operador "+":

- -
console.log("PI: " + Math.PI);
-// "PI: 3.141592653589793"
- -

Veja também:

- - diff --git a/files/pt-br/web/javascript/reference/errors/fecha_chaves_esquecida_apos_lista_propriedades/index.html b/files/pt-br/web/javascript/reference/errors/fecha_chaves_esquecida_apos_lista_propriedades/index.html deleted file mode 100644 index b10562516e..0000000000 --- a/files/pt-br/web/javascript/reference/errors/fecha_chaves_esquecida_apos_lista_propriedades/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: 'SyntaxError: missing } after property list' -slug: Web/JavaScript/Reference/Errors/Fecha_chaves_esquecida_apos_lista_propriedades -tags: - - Erro de Sintaxe - - Erros - - JavaScript - - SyntaxError -translation_of: Web/JavaScript/Reference/Errors/Missing_curly_after_property_list ---- -
{{jsSidebar("Errors")}}
- -

Mensagem

- -
SyntaxError: missing } after property list
-
- -

Tipo de erro

- -

{{jsxref("SyntaxError")}}

- -

O que deu errado?

- -

Aconteceu um engano na sintaxe do inicializador do objeto em algum lugar. Pode ser que você esqueceu de colocar uma chave, mas também pode ser uma vírgula que foi esquecida, por exemplo. Verifique também se alguma chave de finalização ou parêntesis estão em algum lugar que não deveriam estar. Indente ou formate o código de uma maneira legível pode te ajudar a enxergar no meio dessa selva.

- -

Exemplos

- -

Vírgula esquecida

- -

Muitas vezes esquecemos uma vígula no inicializador de objeto:

- -
var obj = {
-  a: 1,
-  b: { minhaProp: 2 }
-  c: 3
-};
-
- -

O código correto deve ser:

- -
var obj = {
-  a: 1,
-  b: { minhaProp: 2 },
-  c: 3
-};
-
- -

Veja também

- - diff --git a/files/pt-br/web/javascript/reference/errors/missing_curly_after_property_list/index.html b/files/pt-br/web/javascript/reference/errors/missing_curly_after_property_list/index.html new file mode 100644 index 0000000000..b10562516e --- /dev/null +++ b/files/pt-br/web/javascript/reference/errors/missing_curly_after_property_list/index.html @@ -0,0 +1,52 @@ +--- +title: 'SyntaxError: missing } after property list' +slug: Web/JavaScript/Reference/Errors/Fecha_chaves_esquecida_apos_lista_propriedades +tags: + - Erro de Sintaxe + - Erros + - JavaScript + - SyntaxError +translation_of: Web/JavaScript/Reference/Errors/Missing_curly_after_property_list +--- +
{{jsSidebar("Errors")}}
+ +

Mensagem

+ +
SyntaxError: missing } after property list
+
+ +

Tipo de erro

+ +

{{jsxref("SyntaxError")}}

+ +

O que deu errado?

+ +

Aconteceu um engano na sintaxe do inicializador do objeto em algum lugar. Pode ser que você esqueceu de colocar uma chave, mas também pode ser uma vírgula que foi esquecida, por exemplo. Verifique também se alguma chave de finalização ou parêntesis estão em algum lugar que não deveriam estar. Indente ou formate o código de uma maneira legível pode te ajudar a enxergar no meio dessa selva.

+ +

Exemplos

+ +

Vírgula esquecida

+ +

Muitas vezes esquecemos uma vígula no inicializador de objeto:

+ +
var obj = {
+  a: 1,
+  b: { minhaProp: 2 }
+  c: 3
+};
+
+ +

O código correto deve ser:

+ +
var obj = {
+  a: 1,
+  b: { minhaProp: 2 },
+  c: 3
+};
+
+ +

Veja também

+ + diff --git a/files/pt-br/web/javascript/reference/errors/missing_parenthesis_after_argument_list/index.html b/files/pt-br/web/javascript/reference/errors/missing_parenthesis_after_argument_list/index.html new file mode 100644 index 0000000000..83844d17b5 --- /dev/null +++ b/files/pt-br/web/javascript/reference/errors/missing_parenthesis_after_argument_list/index.html @@ -0,0 +1,38 @@ +--- +title: Erro de sintaxe falta ) depois da lista de argumentos +slug: Web/JavaScript/Reference/Errors/Fata_parênteses_após_lista_argumento +translation_of: Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list +--- +
{{jsSidebar("Errors")}}
+ +

Mensagem

+ +
Erro de sintaxe: Falta ) depois da lista de argumento
+
+ +

Tipo de Erro

+ +

{{jsxref("Erro de sintaxe")}}.

+ +

O que houve de errado?

+ +

Ocorreu um erro quando a função foi chamada. Pode ter sido um erro de escrita, falta de operador, ou uma string fora das aspas, por exemplo.

+ +

Exemplos

+ +

Pela falta do operador "+" para fazer a concatenação da string, o JavaScript esperou um argumento para a função log ser "PI: ". Nesse caso, deveria ser finalizado com parênteses de fechamento ')'.

+ +
console.log("PI: " Math.PI);
+// SyntaxError: missing ) after argument list
+
+ +

Você pode corrigir a chamada do log adicionand o operador "+":

+ +
console.log("PI: " + Math.PI);
+// "PI: 3.141592653589793"
+ +

Veja também:

+ + diff --git a/files/pt-br/web/javascript/reference/errors/not_defined/index.html b/files/pt-br/web/javascript/reference/errors/not_defined/index.html new file mode 100644 index 0000000000..6642b81b44 --- /dev/null +++ b/files/pt-br/web/javascript/reference/errors/not_defined/index.html @@ -0,0 +1,66 @@ +--- +title: 'ReferenceError: "x" não está definido' +slug: Web/JavaScript/Reference/Errors/Não_definido +translation_of: Web/JavaScript/Reference/Errors/Not_defined +--- +
{{jsSidebar("Errors")}}
+ +

Mensagem

+ +
ReferenceError: "x" is not defined
+
+ +

Tipo de erro

+ +

{{jsxref("ReferenceError")}}

+ +

O que deu errado?

+ +

Há uma variavel inexistente referenciada em algum lugar. Essa variável precisa ser declarada ou você precisa ter certeza que ela está disponível no seu atual script ou {{Glossary("escopo")}}.

+ +
+

Nota: Quando carregar uma biblioteca (como o JQuery) tenha certeza que ela está carregada antes que você acesse as variáveis dela, como "$". Coloque na tag {{HTMLElement("script")}} para carregar a biblioteca antes do seu código usá-lo.

+
+ +

Exemplos

+ +

Variável não declarada

+ +
foo.substring(1); // ReferenceError: foo is not defined
+
+ +

A variável "foo" não está definida em lugar nenhum. Ela precisa ser uma string e assim o método {{jsxref("String.prototype.substring()")}} irá funcionar.

+ +
var foo = "bar";
+foo.substring(1); // "ar"
+ +

Escopo Errado

+ +

Uma variável precisa estar disponível no atual contexto de execução. Variáveis definidas dentro de uma function não podem ser acessadas de outros lugares fora da função, porque a variável é definida apenas no escopo da função

+ +
function numbers () {
+  var num1 = 2,
+      num2 = 3;
+  return num1 + num2;
+}
+
+console.log(num1); // ReferenceError num1 is not defined.
+ +

Entretanto, uma função pode acessar todas as variáveis e funções definidas dentro do escopo no qual elas estão definidas. Em outras palavras, uma função definida no escopo global pode acessar todas as variáveis no escopo global.

+ +
var num1 = 2,
+    num2 = 3;
+
+function numbers () {
+  return num1 + num2;
+}
+
+console.log(num1); // 2
+ +

Veja também

+ + diff --git "a/files/pt-br/web/javascript/reference/errors/n\303\243o_definido/index.html" "b/files/pt-br/web/javascript/reference/errors/n\303\243o_definido/index.html" deleted file mode 100644 index 6642b81b44..0000000000 --- "a/files/pt-br/web/javascript/reference/errors/n\303\243o_definido/index.html" +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: 'ReferenceError: "x" não está definido' -slug: Web/JavaScript/Reference/Errors/Não_definido -translation_of: Web/JavaScript/Reference/Errors/Not_defined ---- -
{{jsSidebar("Errors")}}
- -

Mensagem

- -
ReferenceError: "x" is not defined
-
- -

Tipo de erro

- -

{{jsxref("ReferenceError")}}

- -

O que deu errado?

- -

Há uma variavel inexistente referenciada em algum lugar. Essa variável precisa ser declarada ou você precisa ter certeza que ela está disponível no seu atual script ou {{Glossary("escopo")}}.

- -
-

Nota: Quando carregar uma biblioteca (como o JQuery) tenha certeza que ela está carregada antes que você acesse as variáveis dela, como "$". Coloque na tag {{HTMLElement("script")}} para carregar a biblioteca antes do seu código usá-lo.

-
- -

Exemplos

- -

Variável não declarada

- -
foo.substring(1); // ReferenceError: foo is not defined
-
- -

A variável "foo" não está definida em lugar nenhum. Ela precisa ser uma string e assim o método {{jsxref("String.prototype.substring()")}} irá funcionar.

- -
var foo = "bar";
-foo.substring(1); // "ar"
- -

Escopo Errado

- -

Uma variável precisa estar disponível no atual contexto de execução. Variáveis definidas dentro de uma function não podem ser acessadas de outros lugares fora da função, porque a variável é definida apenas no escopo da função

- -
function numbers () {
-  var num1 = 2,
-      num2 = 3;
-  return num1 + num2;
-}
-
-console.log(num1); // ReferenceError num1 is not defined.
- -

Entretanto, uma função pode acessar todas as variáveis e funções definidas dentro do escopo no qual elas estão definidas. Em outras palavras, uma função definida no escopo global pode acessar todas as variáveis no escopo global.

- -
var num1 = 2,
-    num2 = 3;
-
-function numbers () {
-  return num1 + num2;
-}
-
-console.log(num1); // 2
- -

Veja também

- - diff --git "a/files/pt-br/web/javascript/reference/errors/n\303\243onomeado_func\303\243o_declara\303\247\303\243o/index.html" "b/files/pt-br/web/javascript/reference/errors/n\303\243onomeado_func\303\243o_declara\303\247\303\243o/index.html" deleted file mode 100644 index 6f01588059..0000000000 --- "a/files/pt-br/web/javascript/reference/errors/n\303\243onomeado_func\303\243o_declara\303\247\303\243o/index.html" +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: 'Erro de sintaxe: declaração de função requer um nome' -slug: Web/JavaScript/Reference/Errors/NãoNomeado_funcão_declaração -tags: - - Erro - - Erro de Sintaxe - - JavaScript - - Statement -translation_of: Web/JavaScript/Reference/Errors/Unnamed_function_statement ---- -
{{jsSidebar("Errors")}}
- -

Mensagem

- -
Errodesintaxe: Identificador Esperado(Edge)
-Errodesintaxe: declaração de função requer um nome [Firefox]
-Errodesintaxe: Token inesperado ( [Chrome]
-
- -

Tipo de erro

- -

{{jsxref("Errodesintaxe")}}

- -

O que estava errado?

- -

Existe uma declaração no código que requer um nome. Você precisa checar como as funções são definidas e se você precisa providenciar um nome, se a função em questão precisa ser uma expressão de função, um {{Glossary("IIFE")}} ou se o código da função está colocado corretamente neste contexto.

- -

Exemplos

- -

Statements vs expressions

- -

Uma  declaração de função (ou declaração de função) requer um nome, isso não vai funcionar:

- -
function () {
-  return 'Olha mundo';
-}
-// SyntaxError: function statement requires a name
-
- -

Você pode usar uma expressão de função ao invés de uma atribuição.

- -
var saudar = function() {
-  return 'Ola mundo';
-};
- -

Ou, sua função pode ser pretendida a ser uma IIFE (Immediately Invoked Function Expression), qual é uma função que será em breve definida. Você vai precisar de um pouco mais de colchetes neste caso:

- -
(function () {
-
-})();
- -

Funçoes etiquetadas

- -

Se usar labels, precisará providenciar um nome de função depois da  palavra function . Isto não funciona:

- -
function Saudacao() {
-  alemao: function () {
-    return "Moin";
-  }
-}
-// SyntaxError: a função declaração requer um nome
-
- -

Isso funciona ,veja o exemplo:

- -
function Saudacao() {
-  alemao: function g() {
-    return "Moin";
-  }
-}
- -

Métodos de Objetos

- -

Se pretende criar um metodo para um objeto, voce precisa-rá criar um objeto (hehehe). A seguir uma sintaxe sem nome depois de function é válida.

- -
var saudacao = {
-  alemao: function () {
-    return "Moin";
-  }
-};
- -

Callback Sintaxe

- -

Alem disso,cheque sua sintaxe usando callbacks. Colchetes e virgulas ficam facilmente atrapalhar e dificultar.

- -
promessa.then(
-  function() {
-    console.log("sucesso");
-  });
-  function() {
-    console.log("erro");
-}
-// SyntaxError: function statement requires a name
-
- -

O correto seria:

- -
promise.then(
-  function() {
-    console.log("success");
-  },
-  function() {
-    console.log("error");
-  }
-);//sempre que abrir feche();
-
- -

Veja também

- - diff --git a/files/pt-br/web/javascript/reference/errors/unnamed_function_statement/index.html b/files/pt-br/web/javascript/reference/errors/unnamed_function_statement/index.html new file mode 100644 index 0000000000..6f01588059 --- /dev/null +++ b/files/pt-br/web/javascript/reference/errors/unnamed_function_statement/index.html @@ -0,0 +1,116 @@ +--- +title: 'Erro de sintaxe: declaração de função requer um nome' +slug: Web/JavaScript/Reference/Errors/NãoNomeado_funcão_declaração +tags: + - Erro + - Erro de Sintaxe + - JavaScript + - Statement +translation_of: Web/JavaScript/Reference/Errors/Unnamed_function_statement +--- +
{{jsSidebar("Errors")}}
+ +

Mensagem

+ +
Errodesintaxe: Identificador Esperado(Edge)
+Errodesintaxe: declaração de função requer um nome [Firefox]
+Errodesintaxe: Token inesperado ( [Chrome]
+
+ +

Tipo de erro

+ +

{{jsxref("Errodesintaxe")}}

+ +

O que estava errado?

+ +

Existe uma declaração no código que requer um nome. Você precisa checar como as funções são definidas e se você precisa providenciar um nome, se a função em questão precisa ser uma expressão de função, um {{Glossary("IIFE")}} ou se o código da função está colocado corretamente neste contexto.

+ +

Exemplos

+ +

Statements vs expressions

+ +

Uma  declaração de função (ou declaração de função) requer um nome, isso não vai funcionar:

+ +
function () {
+  return 'Olha mundo';
+}
+// SyntaxError: function statement requires a name
+
+ +

Você pode usar uma expressão de função ao invés de uma atribuição.

+ +
var saudar = function() {
+  return 'Ola mundo';
+};
+ +

Ou, sua função pode ser pretendida a ser uma IIFE (Immediately Invoked Function Expression), qual é uma função que será em breve definida. Você vai precisar de um pouco mais de colchetes neste caso:

+ +
(function () {
+
+})();
+ +

Funçoes etiquetadas

+ +

Se usar labels, precisará providenciar um nome de função depois da  palavra function . Isto não funciona:

+ +
function Saudacao() {
+  alemao: function () {
+    return "Moin";
+  }
+}
+// SyntaxError: a função declaração requer um nome
+
+ +

Isso funciona ,veja o exemplo:

+ +
function Saudacao() {
+  alemao: function g() {
+    return "Moin";
+  }
+}
+ +

Métodos de Objetos

+ +

Se pretende criar um metodo para um objeto, voce precisa-rá criar um objeto (hehehe). A seguir uma sintaxe sem nome depois de function é válida.

+ +
var saudacao = {
+  alemao: function () {
+    return "Moin";
+  }
+};
+ +

Callback Sintaxe

+ +

Alem disso,cheque sua sintaxe usando callbacks. Colchetes e virgulas ficam facilmente atrapalhar e dificultar.

+ +
promessa.then(
+  function() {
+    console.log("sucesso");
+  });
+  function() {
+    console.log("erro");
+}
+// SyntaxError: function statement requires a name
+
+ +

O correto seria:

+ +
promise.then(
+  function() {
+    console.log("success");
+  },
+  function() {
+    console.log("error");
+  }
+);//sempre que abrir feche();
+
+ +

Veja também

+ + diff --git a/files/pt-br/web/javascript/reference/functions/default_parameters/index.html b/files/pt-br/web/javascript/reference/functions/default_parameters/index.html new file mode 100644 index 0000000000..82dc54abd8 --- /dev/null +++ b/files/pt-br/web/javascript/reference/functions/default_parameters/index.html @@ -0,0 +1,210 @@ +--- +title: Parâmetros Predefinidos +slug: Web/JavaScript/Reference/Functions/Parametros_Predefinidos +tags: + - ECMA2015 + - ECMAScript6 + - Function + - Functions + - Função + - Funções + - JavaScript +translation_of: Web/JavaScript/Reference/Functions/Default_parameters +--- +
{{jsSidebar("Functions")}}
+ +

Os parâmetros predefinidos de uma função permitem que parâmetros regulares sejam inicializados com com valores iniciais caso undefined ou nenhum valor seja passado.

+ +

Sintaxe

+ +
function [nome]([param1[ = valorPredefinido1 ][, ..., paramN[ = valorPredefinidoN ]]]) {
+   instruções
+}
+
+ +

Descrição

+ +

Em JavaScript, os parâmetros de funções tem {{jsxref("undefined")}} como valor predefinido. Contudo, em alguns casos pode ser útil utilizar algum outro valor. É nesta situação em que os parâmetros predefinidos podem ser úteis.

+ +

No passado, a estratégia de definir valores padrão para parâmetros era testar os valores do parâmetros no corpo da função e atribuir um valor se este for undefined. No exemplo a seguir, se nenhum valor for fornecido para b na chamada, este valor será undefined, quando a*b for calculado resultaria em NaN. No entanto, isto é capturado na segunda linha definindo um valor padrão para b:

+ +
function multiply(a, b) {
+  b = (typeof b !== 'undefined') ? b : 1;
+
+  return a * b;
+}
+
+multiply(5, 2); // 10
+multiply(5, 1); // 5
+multiply(5);    // 5
+
+ +

Com o parâmetros predefinidos a checagem no corpo da função nao é mais necessária. Agora você pode simplesmente colocar 1 como valor padrão para b na declaração da função:

+ +
function multiply(a, b = 1) {
+  return a * b;
+}
+
+multiply(5, 2); // 10
+multiply(5, 1); // 5
+multiply(5);    // 5
+ +

Exemplos

+ +

Passando undefined vs. outros valores "falsy"

+ +

Na segunda chamada aqui, mesmo se o segundo argumento é definido explicitamente como undefined (com exceção de null) quando chamado, o valor para o argumento num será o padrão.

+ +
function test(num = 1) {
+  console.log(typeof num);
+}
+
+test();          // 'number' (num é definido para 1)
+test(undefined); // 'number' (num é definido para 1 também)
+
+// teste com outros values "falsy":
+test('');        // 'string' (num é definido para '')
+test(null);      // 'object' (num é definido para null)
+ +

Avaliado em tempo de chamada

+ +

Os parâmetros predefinidos são avaliados no momento da chamada da função, então diferente de ex.: Python, um novo objeto é criado cada vez que a funçao é chamada.

+ +
function append(value, array = []) {
+  array.push(value);
+  return array;
+}
+
+append(1); //[1]
+append(2); //[2], not [1, 2]
+
+
+ +

Este mesmo comportamento é aplicado para funções e variáveis:

+ +
function callSomething(thing = something()) { return thing }
+
+function something(){
+  return "sth";
+}
+
+callSomething();  //sth
+ +

Parâmetros predefinidos estão disponíveis para os parâmetros seguintes à sua definição

+ +

Parâmetros que já foram avaliados ficam disponíveis para uso para os parâmetros seguintes:

+ +
function singularAutoPlural(singular, plural = singular+"s",
+                            rallyingCry = plural + " ATTACK!!!") {
+  return [singular, plural, rallyingCry ];
+}
+
+//["Gecko","Geckos", "Geckos ATTACK!!!"]
+singularAutoPlural("Gecko");
+
+//["Fox","Foxes", "Foxes ATTACK!!!"]
+singularAutoPlural("Fox","Foxes");
+
+//["Deer", "Deer", "Deer ... change."]
+singularAutoPlural("Deer", "Deer", "Deer peaceably and respectfully
+   petition the government for positive change.")
+
+ +

Esta funcionalidade torna-se uma maneira direta e demonstra quantos casos extremos são manipulados.

+ +
function go() {
+  return ":P"
+}
+
+function withDefaults(a, b = 5, c = b, d = go(), e = this,
+                      f = arguments, g = this.value) {
+  return [a,b,c,d,e,f,g];
+}
+function withoutDefaults(a, b, c, d, e, f, g){
+  switch(arguments.length){
+    case 0:
+      a
+    case 1:
+      b = 5
+    case 2:
+      c = b
+    case 3:
+      d = go();
+    case 4:
+      e = this
+    case 5:
+      f = arguments
+    case 6:
+      g = this.value;
+    default:
+  }
+  return [a,b,c,d,e,f,g];
+}
+
+withDefaults.call({value:"=^_^="});
+// [undefined, 5, 5, ":P", window, arguments, "=^_^="]
+
+
+withoutDefaults.call({value:"=^_^="});
+// [undefined, 5, 5, ":P", window, arguments, "=^_^="]
+
+ +

Funções definidadas dentro do corpo da função

+ +

Introduzido no Gecko 33 {{geckoRelease(33)}}. Funções declaradas no corpo da função não podem ser referenciada dentro de parâmetos padrão e lançará um {{jsxref("ReferenceError")}} (atualmente um {{jsxref("TypeError")}} no SpiderMonkey, veja {{bug(1022967)}}). Parâmetros padrão são sempre executados primeiro, declarações de funções dentro do corpo de outra função são avaliadas depois.

+ +
// Não funciona! Throws ReferenceError.
+function f(a = go()) {
+  function go(){return ":P"}
+}
+
+ +

Parâmetros sem valor padrão depois de parâmetros com valores padrão

+ +

Antes do Gecko 26 {{geckoRelease(26)}}, o seguinte código resultaria em um {{jsxref("SyntaxError")}}. Isto foi corrigido no {{bug(777060)}} e funciona como esperado em versões posteriores:

+ +
function f(x=1, y) {
+  return [x, y];
+}
+
+f(); // [1, undefined]
+
+ +

Parâmetro desestruturado com valores padrões

+ +

É possível definir valores padrões com a notação destructuring assignment:

+ +
function f([x, y] = [1, 2], {z: z} = {z: 3}) {
+  return x + y + z;
+}
+
+f(); // 6
+ +

Especificações

+ + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName('ES6', '#sec-function-definitions', 'Function Definitions')}}{{Spec2('ES6')}}Definição Inicial.
+ +

Compatibilidade nos navegadores

+ +
+

{{Compat("javascript.functions.default_parameters")}}

+
+ +

Veja também

+ + diff --git a/files/pt-br/web/javascript/reference/functions/definicoes_metodos/index.html b/files/pt-br/web/javascript/reference/functions/definicoes_metodos/index.html deleted file mode 100644 index ac02cb9deb..0000000000 --- a/files/pt-br/web/javascript/reference/functions/definicoes_metodos/index.html +++ /dev/null @@ -1,200 +0,0 @@ ---- -title: Definições de Método -slug: Web/JavaScript/Reference/Functions/Definicoes_metodos -tags: - - ECMAScript 2015 - - Funções - - JavaScript - - Objeto - - Sintaxe -translation_of: Web/JavaScript/Reference/Functions/Method_definitions ---- -
{{JsSidebar("Functions")}}
- -

No ECMAScript 2015 foi introduzida uma sintaxe reduzida para definição de métodos em inicializadores de objetos. É uma abreviação para uma função atribuída ao nome do método.

- -

{{EmbedInteractiveExample("pages/js/functions-definitions.html")}}

- - - -

Sintaxe

- -
var obj = {
-  propriedade( parametros… ) {},
-  *generator( parametros… ) {},
-// também com chaves computadas:
-  [propriedade]( parameters… ) {},
-  *[generator]( parametros… ) {},
-// compare ES5 sintaxe para getter/setter:
-  get propriedade() {},
-  set propriedade(valor) {}
-};
-
- -

Descrição

- -

A sintaxe reduzida é similar à da getter e setter  introduzida no ECMAScript 5.

- -

Dado o seguinte código:

- -
var obj = {
-  foo: function() {},
-  bar: function() {}
-};
- -

Agora você pode reduzi-lo para isto:

- -
var obj = {
-  foo() {},
-  bar() {}
-};
- -

Generator methods

- -

Os generator methods também podem ser definidos utilizando a sintaxe reduzida.

- -
    -
  • Observe que o asterisco (*) na sintaxe reduzida deve estar antes do nome da propriedade generator. Assim, * g(){} funcionará, porém g *(){} não.
    • -
  • Se o método não for generator, sua definição não pode conter a palavra-chave yield. Dessa forma, generator functions legadas também não funcionarão, lançando um {{jsxref("SyntaxError")}}. Sempre utilize yield em conjunto com o asterisco (*)
    • -
- -
// Utilizando a propriedade com nome (pre-ES6)
-var obj2 = {
-  g: function*() {
-    var indice = 0;
-    while(true)
-      yield indice++;
-  }
-};
-
-// O mesmo objeto utilizando a sintaxe reduzida
-var obj2 = {
-  * g() {
-    var indice = 0;
-    while(true)
-      yield indice++;
-  }
-};
-
-var coisa = obj2.g();
-console.log(coisa.next().value); // 0
-console.log(coisa.next().value); // 1
- -

Métodos assíncronos

- -

{{jsxref("Statements/funcoes_assincronas", "Funções assíncronas", "", 1)}} também podem ser definidas usando a sintaxe reduzida.

- -
// Utilizando a propriedade com nome (pre-ES6)
-var obj3 = {
-  f: async function () {
-    await alguma_promise;
-  }
-};
-
-// O mesmo objeto com a sintaxe reduzida
-var obj3 = {
-  async f() {
-    await alguma_promise;
-  }
-};
- -

Generator methods assíncronos

- -

  Os generator methods também podem ser {{jsxref("Statements/funcoes_assincronas", "assíncronos", "", 1)}}

- -
var obj4 = {
-  f: async function* () {
-    yield 1;
-    yield 2;
-    yield 3;
-  }
-};
-
-// O mesmo objeto com a sintaxe reduzida
-var obj4 = {
-  async* f() {
-   yield 1;
-   yield 2;
-   yield 3;
-  }
-};
- -

Métodos reduzidos não são construíveis

- -

Métodos assim definidos não são construtores e lançarão um {{jsxref("TypeError")}} se você tentar instanciá-los.

- -
var obj = {
-  metodo() {},
-};
-new obj.metodo; // TypeError: obj.method is not a constructor
-
-var obj = {
-  * g() {}
-};
-new obj.g; // TypeError: obj.g is not a constructor (modificado no ES2016)
-
- -

Exemplos

- -

Caso de teste simples

- -
var obj = {
-  a : "foo",
-  b(){ return this.a; }
-};
-console.log(obj.b()); // "foo"
-
- -

Nome de propriedades computados

- -

A sintaxe reduzida também suporta nome de propriedades computados.

- -
var bar = {
-  foo0 : function (){return 0;},
-  foo1(){return 1;},
-  ["foo" + 2](){return 2;},
-};
-
-console.log(bar.foo0()); // 0
-console.log(bar.foo1()); // 1
-console.log(bar.foo2()); // 2
- -

Especificações

- - - - - - - - - - - - - - - - - - - -
EspecificaçõesEstadoComentário
{{SpecName('ES6', '#sec-method-definitions', 'Method definitions')}}{{Spec2('ES6')}}Initial definition.
{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}{{Spec2('ESDraft')}} 
- -

Compatibilidade de browser

- - - -

{{Compat("javascript.functions.method_definitions")}}

- -

Veja também

- - diff --git a/files/pt-br/web/javascript/reference/functions/method_definitions/index.html b/files/pt-br/web/javascript/reference/functions/method_definitions/index.html new file mode 100644 index 0000000000..ac02cb9deb --- /dev/null +++ b/files/pt-br/web/javascript/reference/functions/method_definitions/index.html @@ -0,0 +1,200 @@ +--- +title: Definições de Método +slug: Web/JavaScript/Reference/Functions/Definicoes_metodos +tags: + - ECMAScript 2015 + - Funções + - JavaScript + - Objeto + - Sintaxe +translation_of: Web/JavaScript/Reference/Functions/Method_definitions +--- +
{{JsSidebar("Functions")}}
+ +

No ECMAScript 2015 foi introduzida uma sintaxe reduzida para definição de métodos em inicializadores de objetos. É uma abreviação para uma função atribuída ao nome do método.

+ +

{{EmbedInteractiveExample("pages/js/functions-definitions.html")}}

+ + + +

Sintaxe

+ +
var obj = {
+  propriedade( parametros… ) {},
+  *generator( parametros… ) {},
+// também com chaves computadas:
+  [propriedade]( parameters… ) {},
+  *[generator]( parametros… ) {},
+// compare ES5 sintaxe para getter/setter:
+  get propriedade() {},
+  set propriedade(valor) {}
+};
+
+ +

Descrição

+ +

A sintaxe reduzida é similar à da getter e setter  introduzida no ECMAScript 5.

+ +

Dado o seguinte código:

+ +
var obj = {
+  foo: function() {},
+  bar: function() {}
+};
+ +

Agora você pode reduzi-lo para isto:

+ +
var obj = {
+  foo() {},
+  bar() {}
+};
+ +

Generator methods

+ +

Os generator methods também podem ser definidos utilizando a sintaxe reduzida.

+ +
    +
  • Observe que o asterisco (*) na sintaxe reduzida deve estar antes do nome da propriedade generator. Assim, * g(){} funcionará, porém g *(){} não.
    • +
  • Se o método não for generator, sua definição não pode conter a palavra-chave yield. Dessa forma, generator functions legadas também não funcionarão, lançando um {{jsxref("SyntaxError")}}. Sempre utilize yield em conjunto com o asterisco (*)
    • +
+ +
// Utilizando a propriedade com nome (pre-ES6)
+var obj2 = {
+  g: function*() {
+    var indice = 0;
+    while(true)
+      yield indice++;
+  }
+};
+
+// O mesmo objeto utilizando a sintaxe reduzida
+var obj2 = {
+  * g() {
+    var indice = 0;
+    while(true)
+      yield indice++;
+  }
+};
+
+var coisa = obj2.g();
+console.log(coisa.next().value); // 0
+console.log(coisa.next().value); // 1
+ +

Métodos assíncronos

+ +

{{jsxref("Statements/funcoes_assincronas", "Funções assíncronas", "", 1)}} também podem ser definidas usando a sintaxe reduzida.

+ +
// Utilizando a propriedade com nome (pre-ES6)
+var obj3 = {
+  f: async function () {
+    await alguma_promise;
+  }
+};
+
+// O mesmo objeto com a sintaxe reduzida
+var obj3 = {
+  async f() {
+    await alguma_promise;
+  }
+};
+ +

Generator methods assíncronos

+ +

  Os generator methods também podem ser {{jsxref("Statements/funcoes_assincronas", "assíncronos", "", 1)}}

+ +
var obj4 = {
+  f: async function* () {
+    yield 1;
+    yield 2;
+    yield 3;
+  }
+};
+
+// O mesmo objeto com a sintaxe reduzida
+var obj4 = {
+  async* f() {
+   yield 1;
+   yield 2;
+   yield 3;
+  }
+};
+ +

Métodos reduzidos não são construíveis

+ +

Métodos assim definidos não são construtores e lançarão um {{jsxref("TypeError")}} se você tentar instanciá-los.

+ +
var obj = {
+  metodo() {},
+};
+new obj.metodo; // TypeError: obj.method is not a constructor
+
+var obj = {
+  * g() {}
+};
+new obj.g; // TypeError: obj.g is not a constructor (modificado no ES2016)
+
+ +

Exemplos

+ +

Caso de teste simples

+ +
var obj = {
+  a : "foo",
+  b(){ return this.a; }
+};
+console.log(obj.b()); // "foo"
+
+ +

Nome de propriedades computados

+ +

A sintaxe reduzida também suporta nome de propriedades computados.

+ +
var bar = {
+  foo0 : function (){return 0;},
+  foo1(){return 1;},
+  ["foo" + 2](){return 2;},
+};
+
+console.log(bar.foo0()); // 0
+console.log(bar.foo1()); // 1
+console.log(bar.foo2()); // 2
+ +

Especificações

+ + + + + + + + + + + + + + + + + + + +
EspecificaçõesEstadoComentário
{{SpecName('ES6', '#sec-method-definitions', 'Method definitions')}}{{Spec2('ES6')}}Initial definition.
{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}{{Spec2('ESDraft')}} 
+ +

Compatibilidade de browser

+ + + +

{{Compat("javascript.functions.method_definitions")}}

+ +

Veja também

+ + diff --git a/files/pt-br/web/javascript/reference/functions/parametros_predefinidos/index.html b/files/pt-br/web/javascript/reference/functions/parametros_predefinidos/index.html deleted file mode 100644 index 82dc54abd8..0000000000 --- a/files/pt-br/web/javascript/reference/functions/parametros_predefinidos/index.html +++ /dev/null @@ -1,210 +0,0 @@ ---- -title: Parâmetros Predefinidos -slug: Web/JavaScript/Reference/Functions/Parametros_Predefinidos -tags: - - ECMA2015 - - ECMAScript6 - - Function - - Functions - - Função - - Funções - - JavaScript -translation_of: Web/JavaScript/Reference/Functions/Default_parameters ---- -
{{jsSidebar("Functions")}}
- -

Os parâmetros predefinidos de uma função permitem que parâmetros regulares sejam inicializados com com valores iniciais caso undefined ou nenhum valor seja passado.

- -

Sintaxe

- -
function [nome]([param1[ = valorPredefinido1 ][, ..., paramN[ = valorPredefinidoN ]]]) {
-   instruções
-}
-
- -

Descrição

- -

Em JavaScript, os parâmetros de funções tem {{jsxref("undefined")}} como valor predefinido. Contudo, em alguns casos pode ser útil utilizar algum outro valor. É nesta situação em que os parâmetros predefinidos podem ser úteis.

- -

No passado, a estratégia de definir valores padrão para parâmetros era testar os valores do parâmetros no corpo da função e atribuir um valor se este for undefined. No exemplo a seguir, se nenhum valor for fornecido para b na chamada, este valor será undefined, quando a*b for calculado resultaria em NaN. No entanto, isto é capturado na segunda linha definindo um valor padrão para b:

- -
function multiply(a, b) {
-  b = (typeof b !== 'undefined') ? b : 1;
-
-  return a * b;
-}
-
-multiply(5, 2); // 10
-multiply(5, 1); // 5
-multiply(5);    // 5
-
- -

Com o parâmetros predefinidos a checagem no corpo da função nao é mais necessária. Agora você pode simplesmente colocar 1 como valor padrão para b na declaração da função:

- -
function multiply(a, b = 1) {
-  return a * b;
-}
-
-multiply(5, 2); // 10
-multiply(5, 1); // 5
-multiply(5);    // 5
- -

Exemplos

- -

Passando undefined vs. outros valores "falsy"

- -

Na segunda chamada aqui, mesmo se o segundo argumento é definido explicitamente como undefined (com exceção de null) quando chamado, o valor para o argumento num será o padrão.

- -
function test(num = 1) {
-  console.log(typeof num);
-}
-
-test();          // 'number' (num é definido para 1)
-test(undefined); // 'number' (num é definido para 1 também)
-
-// teste com outros values "falsy":
-test('');        // 'string' (num é definido para '')
-test(null);      // 'object' (num é definido para null)
- -

Avaliado em tempo de chamada

- -

Os parâmetros predefinidos são avaliados no momento da chamada da função, então diferente de ex.: Python, um novo objeto é criado cada vez que a funçao é chamada.

- -
function append(value, array = []) {
-  array.push(value);
-  return array;
-}
-
-append(1); //[1]
-append(2); //[2], not [1, 2]
-
-
- -

Este mesmo comportamento é aplicado para funções e variáveis:

- -
function callSomething(thing = something()) { return thing }
-
-function something(){
-  return "sth";
-}
-
-callSomething();  //sth
- -

Parâmetros predefinidos estão disponíveis para os parâmetros seguintes à sua definição

- -

Parâmetros que já foram avaliados ficam disponíveis para uso para os parâmetros seguintes:

- -
function singularAutoPlural(singular, plural = singular+"s",
-                            rallyingCry = plural + " ATTACK!!!") {
-  return [singular, plural, rallyingCry ];
-}
-
-//["Gecko","Geckos", "Geckos ATTACK!!!"]
-singularAutoPlural("Gecko");
-
-//["Fox","Foxes", "Foxes ATTACK!!!"]
-singularAutoPlural("Fox","Foxes");
-
-//["Deer", "Deer", "Deer ... change."]
-singularAutoPlural("Deer", "Deer", "Deer peaceably and respectfully
-   petition the government for positive change.")
-
- -

Esta funcionalidade torna-se uma maneira direta e demonstra quantos casos extremos são manipulados.

- -
function go() {
-  return ":P"
-}
-
-function withDefaults(a, b = 5, c = b, d = go(), e = this,
-                      f = arguments, g = this.value) {
-  return [a,b,c,d,e,f,g];
-}
-function withoutDefaults(a, b, c, d, e, f, g){
-  switch(arguments.length){
-    case 0:
-      a
-    case 1:
-      b = 5
-    case 2:
-      c = b
-    case 3:
-      d = go();
-    case 4:
-      e = this
-    case 5:
-      f = arguments
-    case 6:
-      g = this.value;
-    default:
-  }
-  return [a,b,c,d,e,f,g];
-}
-
-withDefaults.call({value:"=^_^="});
-// [undefined, 5, 5, ":P", window, arguments, "=^_^="]
-
-
-withoutDefaults.call({value:"=^_^="});
-// [undefined, 5, 5, ":P", window, arguments, "=^_^="]
-
- -

Funções definidadas dentro do corpo da função

- -

Introduzido no Gecko 33 {{geckoRelease(33)}}. Funções declaradas no corpo da função não podem ser referenciada dentro de parâmetos padrão e lançará um {{jsxref("ReferenceError")}} (atualmente um {{jsxref("TypeError")}} no SpiderMonkey, veja {{bug(1022967)}}). Parâmetros padrão são sempre executados primeiro, declarações de funções dentro do corpo de outra função são avaliadas depois.

- -
// Não funciona! Throws ReferenceError.
-function f(a = go()) {
-  function go(){return ":P"}
-}
-
- -

Parâmetros sem valor padrão depois de parâmetros com valores padrão

- -

Antes do Gecko 26 {{geckoRelease(26)}}, o seguinte código resultaria em um {{jsxref("SyntaxError")}}. Isto foi corrigido no {{bug(777060)}} e funciona como esperado em versões posteriores:

- -
function f(x=1, y) {
-  return [x, y];
-}
-
-f(); // [1, undefined]
-
- -

Parâmetro desestruturado com valores padrões

- -

É possível definir valores padrões com a notação destructuring assignment:

- -
function f([x, y] = [1, 2], {z: z} = {z: 3}) {
-  return x + y + z;
-}
-
-f(); // 6
- -

Especificações

- - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{SpecName('ES6', '#sec-function-definitions', 'Function Definitions')}}{{Spec2('ES6')}}Definição Inicial.
- -

Compatibilidade nos navegadores

- -
-

{{Compat("javascript.functions.default_parameters")}}

-
- -

Veja também

- - diff --git a/files/pt-br/web/javascript/reference/global_objects/array/contains/index.html b/files/pt-br/web/javascript/reference/global_objects/array/contains/index.html deleted file mode 100644 index a0f794df1a..0000000000 --- a/files/pt-br/web/javascript/reference/global_objects/array/contains/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: Array.prototype.includes() -slug: Web/JavaScript/Reference/Global_Objects/Array/contains -tags: - - Array - - ECMAScript7 - - Experimental - - Expérimental(2) - - JavaScript -translation_of: Web/JavaScript/Reference/Global_Objects/Array/includes ---- -
{{JSRef("Global_Objects", "Array")}}
- -

Sumário

- -

O método includes() determina se um array contém um determinado elemento, retornando true ou false apropriadamente.

- -

Sintaxe

- -
array.includes(searchElement[, fromIndex])
- -

Parâmetros

- -
-
searchElement
-
O elemento a buscar
-
fromIndex
-
Opcional. A posição no array de onde a busca pelo searchElement se iniciará. Por padrão, 0.
-
- -

Exemplos

- -
[1, 2, 3].includes(2);     // true
-[1, 2, 3].includes(4);     // false
-[1, 2, 3].includes(3, 3);  // false
-[1, 2, 3].includes(3, -1); // true
-[1, 2, NaN].includes(NaN); // true
-
- -

Polyfill

- -
// https://tc39.github.io/ecma262/#sec-array.prototype.includes
-if (!Array.prototype.includes) {
-  Object.defineProperty(Array.prototype, 'includes', {
-    value: function(searchElement, fromIndex) {
-
-      // 1. Let O be ? ToObject(this value).
-      if (this == null) {
-        throw new TypeError('"this" is null or not defined');
-      }
-
-      var o = Object(this);
-
-      // 2. Let len be ? ToLength(? Get(O, "length")).
-      var len = o.length >>> 0;
-
-      // 3. If len is 0, return false.
-      if (len === 0) {
-        return false;
-      }
-
-      // 4. Let n be ? ToInteger(fromIndex).
-      //    (If fromIndex is undefined, this step produces the value 0.)
-      var n = fromIndex | 0;
-
-      // 5. If n ≥ 0, then
-      //  a. Let k be n.
-      // 6. Else n < 0,
-      //  a. Let k be len + n.
-      //  b. If k < 0, let k be 0.
-      var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);
-
-      // 7. Repeat, while k < len
-      while (k < len) {
-        // a. Let elementK be the result of ? Get(O, ! ToString(k)).
-        // b. If SameValueZero(searchElement, elementK) is true, return true.
-        // c. Increase k by 1.
-        // NOTE: === provides the correct "SameValueZero" comparison needed here.
-        if (o[k] === searchElement) {
-          return true;
-        }
-        k++;
-      }
-
-      // 8. Return false
-      return false;
-    }
-  });
-}
-
- -

Especificações

- -

Proposta ES7: https://github.com/domenic/Array.prototype.contains/blob/master/spec.md

- -

Compatibilidade

- -
{{Compat("javascript.builtins.Array.includes")}}
- -

Veja Também

- -
    -
  • {{jsxref("TypedArray.prototype.includes()")}}
    • -
  • {{jsxref("String.prototype.includes()")}}
    • -
  • {{jsxref("Array.prototype.indexOf()")}}
    • -
diff --git a/files/pt-br/web/javascript/reference/global_objects/array/filter/index.html b/files/pt-br/web/javascript/reference/global_objects/array/filter/index.html new file mode 100644 index 0000000000..c7b0c08915 --- /dev/null +++ b/files/pt-br/web/javascript/reference/global_objects/array/filter/index.html @@ -0,0 +1,227 @@ +--- +title: Array.prototype.filter() +slug: Web/JavaScript/Reference/Global_Objects/Array/filtro +tags: + - Array + - ECMAScript 5 + - JavaScript + - Prototype + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Array/filter +--- +
{{JSRef}}
+ +

O método filter() cria um novo array com todos os elementos que passaram no teste implementado pela função fornecida.

+ +
function isBigEnough(value) {
+  return value >= 10;
+}
+
+var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
+// filtrado é [12, 130, 44]
+
+ +

Sintaxe

+ +
var newArray = arr.filter(callback[, thisArg])
+ +

Parâmetros

+ +
+
callback
+
Função é um predicado, para testar cada elemento do array. Retorna true para manter o elemento, false caso contrário, recebendo três argumentos:
+
+
+
element
+
+

O elemento que está sendo processado no array.

+
+
index
+
O índice do elemento atual que está sendo processado no array.
+
array
+
O array para qual filter foi chamada.
+
+
+
thisArg {{Optional_inline}}
+
Opcional. Valor a ser usado como this durante a execução do callback.
+
+ +

Valor de retorno

+ +

Um novo array com os elementos que passaram no teste.

+ +

Descrição

+ +

filter() chama a função callback fornecida, uma vez para cada elemento do array, e constrói um novo array com todos os valores para os quais o callback retornou o valor true ou  um valor que seja convertido para true. O callback é chamado apenas para índices do array que possuem valores atribuídos; Ele não é invocado para índices que foram excluídos ou para aqueles que não tiveram valor atribuído. Elementos do array que não passaram no teste do callback são simplesmente ignorados, e não são incluídos no novo array.

+ +

callback é invocado com estes três argumentos:

+ +
    +
  1. o valor do elemento
    2. +
  2. o índice do elemento
    3. +
  3. o objeto do array a ser preenchido
    4. +
+ +

Se o parâmetro thisArg for provido para o filter, ele será passado para o callback quando invocado, para ser usado como o valor do this. Caso contrário, será passado undefined como o valor de this. O valor do this finalmente observado pela função de callback é determinado de acordo com a regra que define o valor do this geralmente visto por uma função.

+ +

filter() não altera o array a partir da qual foi invocado.

+ +

O intervalo de elementos processados pela função filter() é definido antes da invocação do primeiro callback. Elementos que forem adicionados ao array depois da invocação do filter() não serão visitados pelo callback. Se elementos existentes no array forem alterados ou deletados, os valores deles que serão passados para o callback são os que eles tiverem quando o  filter() visitá-los; Elementos que forem deletados não são visitados.

+ +

Exemplos

+ +

Exemplo: Filtrando todos os valores pequenos

+ +

Os exemplos a seguir usam filter() para criar um array filtrado em que todos os elementos com valores menores que 10 são removidos.

+ +
function isBigEnough(value) {
+  return value >= 10;
+}
+var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
+// filtered is [12, 130, 44]
+
+ +

Exemplo: Filtrando entradas inválidas para JSON

+ +

O exemplo a seguir usa filter() para criar um JSON filtrado com todos seus elementos diferentes de zero, e id numérico.

+ +
var arr = [
+  { id: 15 },
+  { id: -1 },
+  { id: 0 },
+  { id: 3 },
+  { id: 12.2 },
+  { },
+  { id: null },
+  { id: NaN },
+  { id: 'undefined' }
+];
+
+var invalidEntries = 0;
+
+function filterByID(obj) {
+  if ('id' in obj && typeof(obj.id) === 'number' && !isNaN(obj.id)) {
+    return true;
+  } else {
+    invalidEntries++;
+    return false;
+  }
+}
+
+var arrByID = arr.filter(filterByID);
+
+console.log('Filtered Array\n', arrByID);
+// [{ id: 15 }, { id: -1 }, { id: 0 }, { id: 3 }, { id: 12.2 }]
+
+console.log('Number of Invalid Entries = ', invalidEntries);
+// Number of Invalid Entries = 4
+
+ +

Procurando em um array

+ +

O exemplo a seguir usa filter() para filtrar o conteúdo de um array baseado em um critério de busca

+ +
var fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];
+
+/**
+ * Array filters items based on search criteria (query)
+ */
+function filterItems(query) {
+  return fruits.filter(function(el) {
+      return el.toLowerCase().indexOf(query.toLowerCase()) > -1;
+  })
+}
+
+console.log(filterItems('ap')); // ['apple', 'grapes']
+console.log(filterItems('an')); // ['banana', 'mango', 'orange']
+ +

Implementação ES2015

+ +
const fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];
+
+/**
+ * Array filters items based on search criteria (query)
+ */
+const filterItems = (query) => {
+  return fruits.filter(el => el.toLowerCase().indexOf(query.toLowerCase()) > -1);
+};
+
+console.log(filterItems('ap')); // ['apple', 'grapes']
+console.log(filterItems('an')); // ['banana', 'mango', 'orange']
+ +

Polyfill

+ +

filter() foi adicionado ao padrão ECMA-262 na 5ª edição; assim como pode não estar presente em todas as implementações do padrão. Você pode trabalhar com isso adicionando o seguinte código no início de seus scripts, permitindo o uso do filter() na implementação ECMA-262 que não tem suporte nativo. Esse algoritmo é exatamente aquele especificado na 5ª edição do ECMA-262, assumindo que fn.call veja o valor original de {{jsxref("Function.prototype.call()")}}, e que {{jsxref("Array.prototype.push()")}} tenha seu valor original.

+ +
if (!Array.prototype.filter) {
+  Array.prototype.filter = function(fun/*, thisArg*/) {
+    'use strict';
+
+    if (this === void 0 || this === null) {
+      throw new TypeError();
+    }
+
+    var t = Object(this);
+    var len = t.length >>> 0;
+    if (typeof fun !== 'function') {
+      throw new TypeError();
+    }
+
+    var res = [];
+    var thisArg = arguments.length >= 2 ? arguments[1] : void 0;
+    for (var i = 0; i < len; i++) {
+      if (i in t) {
+        var val = t[i];
+
+        // NOTE: Technically this should Object.defineProperty at
+        //       the next index, as push can be affected by
+        //       properties on Object.prototype and Array.prototype.
+        //       But that method's new, and collisions should be
+        //       rare, so use the more-compatible alternative.
+        if (fun.call(thisArg, val, i, t)) {
+          res.push(val);
+        }
+      }
+    }
+
+    return res;
+  };
+}
+
+ +

Especificações

+ + + + + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName('ES5.1', '#sec-15.4.4.20', 'Array.prototype.filter')}}{{Spec2('ES5.1')}}Definição inicial. Implementada no JavaScript 1.6.
{{SpecName('ES6', '#sec-array.prototype.filter', 'Array.prototype.filter')}}{{Spec2('ES6')}}
+ +

Compatibilidade de Browser

+ +
{{Compat("javascript.builtins.Array.filter")}}
+ +

Veja também

+ +
    +
  • {{jsxref("Array.prototype.forEach()")}}
    • +
  • {{jsxref("Array.prototype.every()")}}
    • +
  • {{jsxref("Array.prototype.some()")}}
    • +
  • {{jsxref("Array.prototype.reduce()")}}
    • +
+ + diff --git a/files/pt-br/web/javascript/reference/global_objects/array/filtro/index.html b/files/pt-br/web/javascript/reference/global_objects/array/filtro/index.html deleted file mode 100644 index c7b0c08915..0000000000 --- a/files/pt-br/web/javascript/reference/global_objects/array/filtro/index.html +++ /dev/null @@ -1,227 +0,0 @@ ---- -title: Array.prototype.filter() -slug: Web/JavaScript/Reference/Global_Objects/Array/filtro -tags: - - Array - - ECMAScript 5 - - JavaScript - - Prototype - - metodo -translation_of: Web/JavaScript/Reference/Global_Objects/Array/filter ---- -
{{JSRef}}
- -

O método filter() cria um novo array com todos os elementos que passaram no teste implementado pela função fornecida.

- -
function isBigEnough(value) {
-  return value >= 10;
-}
-
-var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
-// filtrado é [12, 130, 44]
-
- -

Sintaxe

- -
var newArray = arr.filter(callback[, thisArg])
- -

Parâmetros

- -
-
callback
-
Função é um predicado, para testar cada elemento do array. Retorna true para manter o elemento, false caso contrário, recebendo três argumentos:
-
-
-
element
-
-

O elemento que está sendo processado no array.

-
-
index
-
O índice do elemento atual que está sendo processado no array.
-
array
-
O array para qual filter foi chamada.
-
-
-
thisArg {{Optional_inline}}
-
Opcional. Valor a ser usado como this durante a execução do callback.
-
- -

Valor de retorno

- -

Um novo array com os elementos que passaram no teste.

- -

Descrição

- -

filter() chama a função callback fornecida, uma vez para cada elemento do array, e constrói um novo array com todos os valores para os quais o callback retornou o valor true ou  um valor que seja convertido para true. O callback é chamado apenas para índices do array que possuem valores atribuídos; Ele não é invocado para índices que foram excluídos ou para aqueles que não tiveram valor atribuído. Elementos do array que não passaram no teste do callback são simplesmente ignorados, e não são incluídos no novo array.

- -

callback é invocado com estes três argumentos:

- -
    -
  1. o valor do elemento
    2. -
  2. o índice do elemento
    3. -
  3. o objeto do array a ser preenchido
    4. -
- -

Se o parâmetro thisArg for provido para o filter, ele será passado para o callback quando invocado, para ser usado como o valor do this. Caso contrário, será passado undefined como o valor de this. O valor do this finalmente observado pela função de callback é determinado de acordo com a regra que define o valor do this geralmente visto por uma função.

- -

filter() não altera o array a partir da qual foi invocado.

- -

O intervalo de elementos processados pela função filter() é definido antes da invocação do primeiro callback. Elementos que forem adicionados ao array depois da invocação do filter() não serão visitados pelo callback. Se elementos existentes no array forem alterados ou deletados, os valores deles que serão passados para o callback são os que eles tiverem quando o  filter() visitá-los; Elementos que forem deletados não são visitados.

- -

Exemplos

- -

Exemplo: Filtrando todos os valores pequenos

- -

Os exemplos a seguir usam filter() para criar um array filtrado em que todos os elementos com valores menores que 10 são removidos.

- -
function isBigEnough(value) {
-  return value >= 10;
-}
-var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
-// filtered is [12, 130, 44]
-
- -

Exemplo: Filtrando entradas inválidas para JSON

- -

O exemplo a seguir usa filter() para criar um JSON filtrado com todos seus elementos diferentes de zero, e id numérico.

- -
var arr = [
-  { id: 15 },
-  { id: -1 },
-  { id: 0 },
-  { id: 3 },
-  { id: 12.2 },
-  { },
-  { id: null },
-  { id: NaN },
-  { id: 'undefined' }
-];
-
-var invalidEntries = 0;
-
-function filterByID(obj) {
-  if ('id' in obj && typeof(obj.id) === 'number' && !isNaN(obj.id)) {
-    return true;
-  } else {
-    invalidEntries++;
-    return false;
-  }
-}
-
-var arrByID = arr.filter(filterByID);
-
-console.log('Filtered Array\n', arrByID);
-// [{ id: 15 }, { id: -1 }, { id: 0 }, { id: 3 }, { id: 12.2 }]
-
-console.log('Number of Invalid Entries = ', invalidEntries);
-// Number of Invalid Entries = 4
-
- -

Procurando em um array

- -

O exemplo a seguir usa filter() para filtrar o conteúdo de um array baseado em um critério de busca

- -
var fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];
-
-/**
- * Array filters items based on search criteria (query)
- */
-function filterItems(query) {
-  return fruits.filter(function(el) {
-      return el.toLowerCase().indexOf(query.toLowerCase()) > -1;
-  })
-}
-
-console.log(filterItems('ap')); // ['apple', 'grapes']
-console.log(filterItems('an')); // ['banana', 'mango', 'orange']
- -

Implementação ES2015

- -
const fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];
-
-/**
- * Array filters items based on search criteria (query)
- */
-const filterItems = (query) => {
-  return fruits.filter(el => el.toLowerCase().indexOf(query.toLowerCase()) > -1);
-};
-
-console.log(filterItems('ap')); // ['apple', 'grapes']
-console.log(filterItems('an')); // ['banana', 'mango', 'orange']
- -

Polyfill

- -

filter() foi adicionado ao padrão ECMA-262 na 5ª edição; assim como pode não estar presente em todas as implementações do padrão. Você pode trabalhar com isso adicionando o seguinte código no início de seus scripts, permitindo o uso do filter() na implementação ECMA-262 que não tem suporte nativo. Esse algoritmo é exatamente aquele especificado na 5ª edição do ECMA-262, assumindo que fn.call veja o valor original de {{jsxref("Function.prototype.call()")}}, e que {{jsxref("Array.prototype.push()")}} tenha seu valor original.

- -
if (!Array.prototype.filter) {
-  Array.prototype.filter = function(fun/*, thisArg*/) {
-    'use strict';
-
-    if (this === void 0 || this === null) {
-      throw new TypeError();
-    }
-
-    var t = Object(this);
-    var len = t.length >>> 0;
-    if (typeof fun !== 'function') {
-      throw new TypeError();
-    }
-
-    var res = [];
-    var thisArg = arguments.length >= 2 ? arguments[1] : void 0;
-    for (var i = 0; i < len; i++) {
-      if (i in t) {
-        var val = t[i];
-
-        // NOTE: Technically this should Object.defineProperty at
-        //       the next index, as push can be affected by
-        //       properties on Object.prototype and Array.prototype.
-        //       But that method's new, and collisions should be
-        //       rare, so use the more-compatible alternative.
-        if (fun.call(thisArg, val, i, t)) {
-          res.push(val);
-        }
-      }
-    }
-
-    return res;
-  };
-}
-
- -

Especificações

- - - - - - - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{SpecName('ES5.1', '#sec-15.4.4.20', 'Array.prototype.filter')}}{{Spec2('ES5.1')}}Definição inicial. Implementada no JavaScript 1.6.
{{SpecName('ES6', '#sec-array.prototype.filter', 'Array.prototype.filter')}}{{Spec2('ES6')}}
- -

Compatibilidade de Browser

- -
{{Compat("javascript.builtins.Array.filter")}}
- -

Veja também

- -
    -
  • {{jsxref("Array.prototype.forEach()")}}
    • -
  • {{jsxref("Array.prototype.every()")}}
    • -
  • {{jsxref("Array.prototype.some()")}}
    • -
  • {{jsxref("Array.prototype.reduce()")}}
    • -
- - diff --git a/files/pt-br/web/javascript/reference/global_objects/array/includes/index.html b/files/pt-br/web/javascript/reference/global_objects/array/includes/index.html new file mode 100644 index 0000000000..a0f794df1a --- /dev/null +++ b/files/pt-br/web/javascript/reference/global_objects/array/includes/index.html @@ -0,0 +1,106 @@ +--- +title: Array.prototype.includes() +slug: Web/JavaScript/Reference/Global_Objects/Array/contains +tags: + - Array + - ECMAScript7 + - Experimental + - Expérimental(2) + - JavaScript +translation_of: Web/JavaScript/Reference/Global_Objects/Array/includes +--- +
{{JSRef("Global_Objects", "Array")}}
+ +

Sumário

+ +

O método includes() determina se um array contém um determinado elemento, retornando true ou false apropriadamente.

+ +

Sintaxe

+ +
array.includes(searchElement[, fromIndex])
+ +

Parâmetros

+ +
+
searchElement
+
O elemento a buscar
+
fromIndex
+
Opcional. A posição no array de onde a busca pelo searchElement se iniciará. Por padrão, 0.
+
+ +

Exemplos

+ +
[1, 2, 3].includes(2);     // true
+[1, 2, 3].includes(4);     // false
+[1, 2, 3].includes(3, 3);  // false
+[1, 2, 3].includes(3, -1); // true
+[1, 2, NaN].includes(NaN); // true
+
+ +

Polyfill

+ +
// https://tc39.github.io/ecma262/#sec-array.prototype.includes
+if (!Array.prototype.includes) {
+  Object.defineProperty(Array.prototype, 'includes', {
+    value: function(searchElement, fromIndex) {
+
+      // 1. Let O be ? ToObject(this value).
+      if (this == null) {
+        throw new TypeError('"this" is null or not defined');
+      }
+
+      var o = Object(this);
+
+      // 2. Let len be ? ToLength(? Get(O, "length")).
+      var len = o.length >>> 0;
+
+      // 3. If len is 0, return false.
+      if (len === 0) {
+        return false;
+      }
+
+      // 4. Let n be ? ToInteger(fromIndex).
+      //    (If fromIndex is undefined, this step produces the value 0.)
+      var n = fromIndex | 0;
+
+      // 5. If n ≥ 0, then
+      //  a. Let k be n.
+      // 6. Else n < 0,
+      //  a. Let k be len + n.
+      //  b. If k < 0, let k be 0.
+      var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);
+
+      // 7. Repeat, while k < len
+      while (k < len) {
+        // a. Let elementK be the result of ? Get(O, ! ToString(k)).
+        // b. If SameValueZero(searchElement, elementK) is true, return true.
+        // c. Increase k by 1.
+        // NOTE: === provides the correct "SameValueZero" comparison needed here.
+        if (o[k] === searchElement) {
+          return true;
+        }
+        k++;
+      }
+
+      // 8. Return false
+      return false;
+    }
+  });
+}
+
+ +

Especificações

+ +

Proposta ES7: https://github.com/domenic/Array.prototype.contains/blob/master/spec.md

+ +

Compatibilidade

+ +
{{Compat("javascript.builtins.Array.includes")}}
+ +

Veja Também

+ +
    +
  • {{jsxref("TypedArray.prototype.includes()")}}
    • +
  • {{jsxref("String.prototype.includes()")}}
    • +
  • {{jsxref("Array.prototype.indexOf()")}}
    • +
diff --git a/files/pt-br/web/javascript/reference/global_objects/array/prototype/index.html b/files/pt-br/web/javascript/reference/global_objects/array/prototype/index.html deleted file mode 100644 index e863d9cc69..0000000000 --- a/files/pt-br/web/javascript/reference/global_objects/array/prototype/index.html +++ /dev/null @@ -1,206 +0,0 @@ ---- -title: Array.prototype -slug: Web/JavaScript/Reference/Global_Objects/Array/prototype -tags: - - Array - - JavaScript - - Propriedade -translation_of: 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

- -
    -
  • {{jsxref("Global_Objects/Array", "Array")}}
    • -
  • {{jsxref("Function.prototype")}}
    • -
diff --git a/files/pt-br/web/javascript/reference/global_objects/bigint/prototype/index.html b/files/pt-br/web/javascript/reference/global_objects/bigint/prototype/index.html deleted file mode 100644 index ff8de05541..0000000000 --- a/files/pt-br/web/javascript/reference/global_objects/bigint/prototype/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: BigInt.prototype -slug: Web/JavaScript/Reference/Global_Objects/BigInt/prototype -tags: - - BigInt - - JavaScript - - Propriedade - - Prototipo - - Referencia -translation_of: 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

- - - -

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

diff --git a/files/pt-br/web/javascript/reference/global_objects/boolean/prototype/index.html b/files/pt-br/web/javascript/reference/global_objects/boolean/prototype/index.html deleted file mode 100644 index 99603a019f..0000000000 --- a/files/pt-br/web/javascript/reference/global_objects/boolean/prototype/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: Boolean.prototype -slug: Web/JavaScript/Reference/Global_Objects/Boolean/prototype -translation_of: Web/JavaScript/Reference/Global_Objects/Boolean -translation_of_original: 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/web/javascript/reference/global_objects/function/prototype/index.html b/files/pt-br/web/javascript/reference/global_objects/function/prototype/index.html deleted file mode 100644 index 3b45ee5fe2..0000000000 --- a/files/pt-br/web/javascript/reference/global_objects/function/prototype/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: Function.prototype -slug: Web/JavaScript/Reference/Global_Objects/Function/prototype -translation_of: Web/JavaScript/Reference/Global_Objects/Function -translation_of_original: 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 de navegadores

- -
- - -

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

-
- -

Veja também

- -
    -
  • {{jsxref("Function")}}
    • -
diff --git a/files/pt-br/web/javascript/reference/global_objects/intl/numberformat/prototype/index.html b/files/pt-br/web/javascript/reference/global_objects/intl/numberformat/prototype/index.html deleted file mode 100644 index dce89ef41e..0000000000 --- a/files/pt-br/web/javascript/reference/global_objects/intl/numberformat/prototype/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: Intl.NumberFormat.prototype -slug: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/prototype -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 ---- -
{{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

- -
    -
  • {{jsxref("NumberFormat", "Intl.NumberFormat")}}
    • -
diff --git a/files/pt-br/web/javascript/reference/global_objects/map/prototype/index.html b/files/pt-br/web/javascript/reference/global_objects/map/prototype/index.html deleted file mode 100644 index b20baf56cc..0000000000 --- a/files/pt-br/web/javascript/reference/global_objects/map/prototype/index.html +++ /dev/null @@ -1,136 +0,0 @@ ---- -title: Map.prototype -slug: Web/JavaScript/Reference/Global_Objects/Map/prototype -tags: - - ECMAScript 2015 - - JavaScript - - Mapa - - Propriedade -translation_of: Web/JavaScript/Reference/Global_Objects/Map -translation_of_original: 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

- -
    -
  • {{jsxref("Set.prototype")}}
    • -
diff --git a/files/pt-br/web/javascript/reference/global_objects/number/prototype/index.html b/files/pt-br/web/javascript/reference/global_objects/number/prototype/index.html deleted file mode 100644 index 9dd96bc9b3..0000000000 --- a/files/pt-br/web/javascript/reference/global_objects/number/prototype/index.html +++ /dev/null @@ -1,140 +0,0 @@ ---- -title: Number.prototype -slug: Web/JavaScript/Reference/Global_Objects/Number/prototype -tags: - - JavaScript - - Número - - Propriedade - - Prototipo -translation_of: Web/JavaScript/Reference/Global_Objects/Number -translation_of_original: 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

- -
    -
  • {{jsxref("Number")}}
    • -
diff --git a/files/pt-br/web/javascript/reference/global_objects/object/prototype/index.html b/files/pt-br/web/javascript/reference/global_objects/object/prototype/index.html deleted file mode 100644 index d0c07076a0..0000000000 --- a/files/pt-br/web/javascript/reference/global_objects/object/prototype/index.html +++ /dev/null @@ -1,227 +0,0 @@ ---- -title: Object.prototype -slug: Web/JavaScript/Reference/Global_Objects/Object/prototype -tags: - - JavaScript - - Objeto - - Propriedade -translation_of: Web/JavaScript/Reference/Global_Objects/Object -translation_of_original: 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/web/javascript/reference/global_objects/promise/prototype/index.html b/files/pt-br/web/javascript/reference/global_objects/promise/prototype/index.html deleted file mode 100644 index d0be3d870c..0000000000 --- a/files/pt-br/web/javascript/reference/global_objects/promise/prototype/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: Promise.prototype -slug: Web/JavaScript/Reference/Global_Objects/Promise/prototype -translation_of: Web/JavaScript/Reference/Global_Objects/Promise -translation_of_original: 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

- -
    -
  • {{jsxref("Promise")}}
    • -
diff --git a/files/pt-br/web/javascript/reference/global_objects/set/prototype/index.html b/files/pt-br/web/javascript/reference/global_objects/set/prototype/index.html deleted file mode 100644 index 1f2ca2c70b..0000000000 --- a/files/pt-br/web/javascript/reference/global_objects/set/prototype/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: Set.prototype -slug: Web/JavaScript/Reference/Global_Objects/Set/prototype -tags: - - Propriedade - - Prototipo - - set -translation_of: Web/JavaScript/Reference/Global_Objects/Set -translation_of_original: 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

- -
    -
  • {{jsxref("Map.prototype")}}
    • -
diff --git a/files/pt-br/web/javascript/reference/global_objects/string/prototype/index.html b/files/pt-br/web/javascript/reference/global_objects/string/prototype/index.html deleted file mode 100644 index a0df7b93ea..0000000000 --- a/files/pt-br/web/javascript/reference/global_objects/string/prototype/index.html +++ /dev/null @@ -1,177 +0,0 @@ ---- -title: String.prototype -slug: Web/JavaScript/Reference/Global_Objects/String/prototype -translation_of: Web/JavaScript/Reference/Global_Objects/String -translation_of_original: Web/JavaScript/Reference/Global_Objects/String/prototype ---- -
{{JSRef}}
- -

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 entre browsers

- - - -

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

- -

Veja também 

- -
    -
  • {{jsxref("String")}}
    • -
  • {{jsxref("Function.prototype")}}
    • -
diff --git a/files/pt-br/web/javascript/reference/global_objects/weakmap/prototype/index.html b/files/pt-br/web/javascript/reference/global_objects/weakmap/prototype/index.html deleted file mode 100644 index c3e0334a3b..0000000000 --- a/files/pt-br/web/javascript/reference/global_objects/weakmap/prototype/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: WeakMap.prototype -slug: Web/JavaScript/Reference/Global_Objects/WeakMap/prototype -translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap -translation_of_original: 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

- -
    -
  • O recurso é ativado por preferência. Em chrome://flags ative "Enable Experimental JavaScript".
    • -
- -

Veja também

- -
    -
  • {{jsxref("Map.prototype")}}
    • -
diff --git a/files/pt-br/web/javascript/reference/operators/arithmetic_operators/index.html b/files/pt-br/web/javascript/reference/operators/arithmetic_operators/index.html deleted file mode 100644 index 4ca87eaddd..0000000000 --- a/files/pt-br/web/javascript/reference/operators/arithmetic_operators/index.html +++ /dev/null @@ -1,329 +0,0 @@ ---- -title: Arithmetic operators -slug: Web/JavaScript/Reference/Operators/Arithmetic_Operators -tags: - - JavaScript - - Operadores -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: 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;

- -
    -
  • Se usado na forma posfixa, com o operador depois do operando (por exemplo, x++), então ele retorna o valor antes de incrementá-lo.
    • -
  • Se usado na forma prefixa, com o operador antes do operando (por exemplo, ++x), então ele retorna o valor depois de incrementá-lo.
    • -
- -

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.

- -
    -
  • Se usado na forma posfixa (por exemplo, x--), então ele retorna o valor antes de decrementá-lo.
    • -
  • Se usado na forma prefixa (por exemplo, --x), então ele retorna o valor depois de decrementá-lo.
    • -
- -

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/web/javascript/reference/operators/atribuicao_via_desestruturacao/index.html b/files/pt-br/web/javascript/reference/operators/atribuicao_via_desestruturacao/index.html deleted file mode 100644 index 6b1a100b4b..0000000000 --- a/files/pt-br/web/javascript/reference/operators/atribuicao_via_desestruturacao/index.html +++ /dev/null @@ -1,445 +0,0 @@ ---- -title: Atribuição via desestruturação (destructuring assignment) -slug: Web/JavaScript/Reference/Operators/Atribuicao_via_desestruturacao -translation_of: Web/JavaScript/Reference/Operators/Destructuring_assignment ---- -
{{jsSidebar("Operators")}}
- -

A sintaxe de atribuição via desestruturação (destructuring assignment) é uma expressão JavaScript que possibilita extrair dados de arrays ou objetos em variáveis distintas.

- -

Sintaxe

- -
var a, b, rest;
-[a, b] = [1, 2];
-console.log(a); // 1
-console.log(b); // 2
-
-[a, b, ...rest] = [1, 2, 3, 4, 5];
-console.log(a); // 1
-console.log(b); // 2
-console.log(rest); // [3, 4, 5]
-
-({a, b} = {a:1, b:2});
-console.log(a); // 1
-console.log(b); // 2
-
-// ES2016 - não implementado em Firefox 47a01
-({a, b, ...rest} = {a:1, b:2, c:3, d:4});
-
- -

Descrição

- -

As expressões de objeto e matriz literais fornecem uma maneira fácil de criar pacotes ad hoc de dados .

- -
var x = [1, 2, 3, 4, 5];
- -

A atribuição via desestruturação usa sintaxe similar, mas no lado esquerdo da atribuição são definidos quais elementos devem ser extraídos da variável de origem.

- -
var x = [1, 2, 3, 4, 5];
-var [y, z] = x;
-console.log(y); // 1
-console.log(z); // 2
-
- -

Esse recurso é semelhante aos recursos presentes em linguagens como Perl e Python.

- -

Desestruturação de array

- -

Atribuição básica de variável

- -
var foo = ["one", "two", "three"];
-
-var [one, two, three] = foo;
-console.log(one); // "one"
-console.log(two); // "two"
-console.log(three); // "three"
-
- -

Atribuição separada da declaração

- -

Uma variável pode ter seu valor atribuído via desestruturação separadamente da declaração dela.

- -
var a, b;
-
-[a, b] = [1, 2];
-console.log(a); // 1
-console.log(b); // 2
-
- -

Valores padrão

- -

Uma variável pode ser atribuída de um padrão, no caso em que o valor retirado do array é undefined.

- -
var a, b;
-
-[a=5, b=7] = [1];
-console.log(a); // 1
-console.log(b); // 7
-
- -

Trocando variáveis

- -

Os valores de duas variáveis podem ser trocados em uma expressão de desestruturação.

- -

Sem atribuição via desestruturação, trocar dois valores requer uma variável temporária (ou, em algumas linguagens de baixo nível, o Algoritmo XOR Swap).

- -
var a = 1;
-var b = 3;
-
-[a, b] = [b, a];
-console.log(a); // 3
-console.log(b); // 1
-
- -

Analisando um array retornado de uma função

- -

Sempre foi possível retornar uma matriz de uma função. A desestruturação pode tornar mais conciso o trabalho com um valor de retorno do tipo array.

- -

Neste exemplo, f() returna os valores [1, 2] como saída, que podem ser analisados em uma única linha com desestruturação.

- -
function f() {
-  return [1, 2];
-}
-
-var a, b;
-[a, b] = f();
-console.log(a); // 1
-console.log(b); // 2
-
- -

Ignorando alguns valores retornados

- -

Você pode ignorar valores retornados que você não tem interesse:

- -
function f() {
-  return [1, 2, 3];
-}
-
-var [a, , b] = f();
-console.log(a); // 1
-console.log(b); // 3
-
- -

Você também pode ignorar todos os valores retornados:

- -
[,,] = f();
-
- -

Atribuindo o resto de um array para uma variável

- -

Ao desestruturar um array, você pode atribuir a parte restante deste em uma viáriável usando o padrão rest:

- -
var [a, ...b] = [1, 2, 3];
-console.log(a); // 1
-console.log(b); // [2, 3]
- -

Extraindo valores do resultado de uma expressão regular

- -

Quando o método de expressão regular exec() encontra um resultado, ele retorna um array que contém primeiro toda a porção resultante da string e depois cada uma das porções da string resultante envolvidas por parênteses na expressão regular. A atribuição via desestruturação lhe permite extrair as partes desses array facilmente, ignorando a porção resultante completa se não precisar.

- -
var url = "https://developer.mozilla.org/en-US/Web/JavaScript";
-
-var parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url);
-console.log(parsedURL); // ["https://developer.mozilla.org/en-US/Web/JavaScript", "https", "developer.mozilla.org", "en-US/Web/JavaScript"]
-
-var [, protocol, fullhost, fullpath] = parsedURL;
-
-console.log(protocol); // "https"
-
- -

Desestruturação de objeto

- -

Atribuição básica

- -
var o = {p: 42, q: true};
-var {p, q} = o;
-
-console.log(p); // 42
-console.log(q); // true
-
- -

Atribuição sem declaração

- -

Uma variável pode ter seu valor atribuído via desestruturação separadamente da sua declaração.

- -
var a, b;
-
-({a, b} = {a:1, b:2});
- -
-

Os parênteses ( ... ) ao redor da declaração de atribuição é uma sintaxe necessária  quando se utiliza a atribuição via desestruturação de objeto literal sem uma declaração.

- -

{a, b} = {a:1, b:2} não é uma sintaxe stand-alone válida, pois {a, b} no lado esquerdo é considarada um bloco, não um objeto literal.

- -

No entanto, ({a, b} = {a:1, b:2}) é valida, assim como var {a, b} = {a:1, b:2}

-
- -

Atribuição para variáveis com novos nomes

- -

Uma variável pode ser extraída de um objeto e atribuída a uma variável com um nome diferente da propriedade do objeto.

- -
var o = {p: 42, q: true};
-var {p: foo, q: bar} = o;
-
-console.log(foo); // 42
-console.log(bar); // true  
- -

Valores padrão

- -

Uma variável pode ser atribuída de um padrão, no caso em que o valor retirado do objeto é undefined.

- -
var {a=10, b=5} = {a: 3};
-
-console.log(a); // 3
-console.log(b); // 5
- -

Definindo um valor padrão de parâmetro de função

- -

Versão ES5

- -
function drawES5Chart(options) {
-  options = options === undefined ? {} : options;
-  var size = options.size === undefined ? 'big' : options.size;
-  var cords = options.cords === undefined ? { x: 0, y: 0 } : options.cords;
-  var radius = options.radius === undefined ? 25 : options.radius;
-  console.log(size, cords, radius);
-  // now finally do some chart drawing
-}
-
-drawES5Chart({
-  cords: { x: 18, y: 30 },
-  radius: 30
-});
- -

Versão ES2015

- -
function drawES2015Chart({size = 'big', cords = { x: 0, y: 0 }, radius = 25} = {}) {
-  console.log(size, cords, radius);
-  // do some chart drawing
-}
-
-drawES2015Chart({
-  cords: { x: 18, y: 30 },
-  radius: 30
-});
- -

Objeto aninhado e desestruturação de array

- -
var metadata = {
-    title: "Scratchpad",
-    translations: [
-       {
-        locale: "de",
-        localization_tags: [ ],
-        last_edit: "2014-04-14T08:43:37",
-        url: "/de/docs/Tools/Scratchpad",
-        title: "JavaScript-Umgebung"
-       }
-    ],
-    url: "/en-US/docs/Tools/Scratchpad"
-};
-
-var { title: englishTitle, translations: [{ title: localeTitle }] } = metadata;
-
-console.log(englishTitle); // "Scratchpad"
-console.log(localeTitle);  // "JavaScript-Umgebung"
- -

For de iteração e desestruturação

- -
var people = [
-  {
-    name: "Mike Smith",
-    family: {
-      mother: "Jane Smith",
-      father: "Harry Smith",
-      sister: "Samantha Smith"
-    },
-    age: 35
-  },
-  {
-    name: "Tom Jones",
-    family: {
-      mother: "Norah Jones",
-      father: "Richard Jones",
-      brother: "Howard Jones"
-    },
-    age: 25
-  }
-];
-
-for (var {name: n, family: { father: f } } of people) {
-  console.log("Name: " + n + ", Father: " + f);
-}
-
-// "Name: Mike Smith, Father: Harry Smith"
-// "Name: Tom Jones, Father: Richard Jones"
- -

Extraindo campos de objetos passados como parâmetro de função

- -
function userId({id}) {
-  return id;
-}
-
-function whois({displayName: displayName, fullName: {firstName: name}}){
-  console.log(displayName + " is " + name);
-}
-
-var user = {
-  id: 42,
-  displayName: "jdoe",
-  fullName: {
-      firstName: "John",
-      lastName: "Doe"
-  }
-};
-
-console.log("userId: " + userId(user)); // "userId: 42"
-whois(user); // "jdoe is John"
- -

Isso extrai o id, displayName e firstName do objeto user e os imprime na tela.

- -

Nomes computados de propriedade de objeto e desestruturação

- -

Nomes computados de propriedades, como em objetos literais, podem ser usados com desestruturação.

- -
let key = "z";
-let { [key]: foo } = { z: "bar" };
-
-console.log(foo); // "bar"
-
- -

Especificações

- - - - - - - - - - - - - - - - - - - -
EspeficiaçãoSituaçãoComentário
{{SpecName('ES2015', '#sec-destructuring-assignment', 'Destructuring assignment')}}{{Spec2('ES2015')}}Definição inicial.
{{SpecName('ESDraft', '#sec-destructuring-assignment', 'Destructuring assignment')}}{{Spec2('ESDraft')}}
- -

Compatibilidade do navegador

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FuncionalidadeChromeFirefox (Gecko)EdgeInternet ExplorerOperaSafari
-

Suporte básico

- 		{{CompatChrome(49.0)}}{{ CompatGeckoDesktop("1.8.1") }}14{{CompatNo}}{{CompatNo}}7.1
-

Nomes computados de propriedades

- 		{{CompatChrome(49.0)}}{{ CompatGeckoDesktop("34") }}14{{CompatNo}}{{CompatNo}}{{CompatNo}}
Operador spread{{CompatChrome(49.0)}}{{ CompatGeckoDesktop("34") }}12[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FuncionalidadeAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Suporte básico{{CompatNo}}{{CompatChrome(49.0)}}{{ CompatGeckoMobile("1.0") }}{{CompatNo}}{{CompatNo}}8{{CompatChrome(49.0)}}
Nomes computados de propriedades{{CompatNo}}{{CompatChrome(49.0)}}{{ CompatGeckoMobile("34") }}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatChrome(49.0)}}
Operador spread{{CompatNo}}{{CompatChrome(49.0)}}{{ CompatGeckoMobile("34") }}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(49.0)}}
-
- -

[1] Requer "Enable experimental Javascript features" para funciona sob `about:flags`

- -

Notas específicas do Firefox

- -
    -
  • O Firefox forneceu uma extensão não-padronizada de linguagem em JS1.7 para desestruturação. Esta extensão foi removida no Gecko 40 {{geckoRelease (40)}}. Consulte {{bug (1083498)}}.
    • -
  • A partir do Gecko 41 {{geckoRelease (41)}} e para cumprir com a especificação ES2015, padrões de desestruturação com parênteses, como ([a, b]) = [1, 2] or ({a, b}) = { a: 1, b: 2 }, agora são considerados inválidos e lançarão um {{jsxref ( "SyntaxError")}}. Veja a postagem no blog de Jeff Walden e {{bug (1146136)}} para mais detalhes.
    • -
- -

Veja também

- - diff --git a/files/pt-br/web/javascript/reference/operators/bitwise_operators/index.html b/files/pt-br/web/javascript/reference/operators/bitwise_operators/index.html deleted file mode 100644 index b8b2e654c4..0000000000 --- a/files/pt-br/web/javascript/reference/operators/bitwise_operators/index.html +++ /dev/null @@ -1,559 +0,0 @@ ---- -title: Bitwise operators -slug: Web/JavaScript/Reference/Operators/Bitwise_Operators -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: 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:

- -
    -
  • Os operandos são convertidos para inteiros de 32 bits e expressados em uma série de bits (zeros e ums). Números com mais de 32 bits têm seus bits mais significativos descartados. Por exemplo, o inteiro com mais de 32 bits a seguir será convertido para um inteiro de 32 bits: - 
    Before: 11100110111110100000000000000110000000000001
-After:              10100000000000000110000000000001
    -
    • -
  • Cada bit no primeiro operando é pareado com o bit correspondente no segundo operando: primeiro bit para o primeiro bit, segundo bit para o segundo bit e assim por diante.
    • -
  • O operador é aplicado para cada par de bits e o resultado é construído bit a bit.
    • -
- -

& (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:

- -
    -
  • flag A: we have an ant problem
    • -
  • flag B: we own a bat
    • -
  • flag C: we own a cat
    • -
  • flag D: we own a duck
    • -
- -

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:

- -
    -
  • flag A is true (we have an ant problem);
    • -
  • flag B is false (we don't own a bat);
    • -
  • flag C is true (we own a cat);
    • -
  • flag D is false (we don't own a duck);
    • -
- -

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

Browser compatibility

- - - -

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

- -

See also

- - diff --git a/files/pt-br/web/javascript/reference/operators/comma_operator/index.html b/files/pt-br/web/javascript/reference/operators/comma_operator/index.html new file mode 100644 index 0000000000..be374104d0 --- /dev/null +++ b/files/pt-br/web/javascript/reference/operators/comma_operator/index.html @@ -0,0 +1,102 @@ +--- +title: Operador Vírgula +slug: Web/JavaScript/Reference/Operators/Operador_Virgula +translation_of: Web/JavaScript/Reference/Operators/Comma_Operator +--- +
+ {{jsSidebar("Operators")}}
+

Sumário

+

o operador vírgula avalia o valor de seus operandos (da esquerda para a direita) e retorna o valor do último operando.

+

Sintaxe

+
expr1, expr2, expr3...
+

Parameters

+
+
+ expr1, expr2, expr3...
+
+ Quaisquer expressões.
+
+

Descrição

+

Você pode usar o operador vírgula quando desejar incluir múltiplas expressões em um lugar que requer uma única expressão. O uso mais comum desse operador é suprir múltiplos parâmetros em um loop for.

+

Exemplo

+

Se a é um array de 2 dimensões com 10 elementos de um lado, o seguinte código usa o operador vírgula para incrementar duas variáveis mutuamente. Note que a vírgula na declaração var não é o operador vírgula, porque ele não existe dentro de uma expressão. Além disso, ela é uma caractere especial nas declarações var para combinar múltiplas delas em uma única. Embora praticamente a vírgula comporte-se quase que igualmente ao operador vírgula. O código imprime os valores dos elementos diagonais da matriz:

+
for (var i = 0, j = 9; i <= 9; i++, j--)
+  document.writeln("a[" + i + "][" + j + "] = " + a[i][j]);
+
+

Especificações

+ + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
1ª Edição ECMAScript.PadrãoDefinição inicial.
{{SpecName('ES5.1', '#sec-11.14', 'Comma operator')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-comma-operator', 'Comma operator')}}{{Spec2('ES6')}} 
+

Compatibilidade de Navegadores

+

{{ CompatibilityTable() }}

+
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte Básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte Básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+

Veja também

+ diff --git a/files/pt-br/web/javascript/reference/operators/conditional_operator/index.html b/files/pt-br/web/javascript/reference/operators/conditional_operator/index.html new file mode 100644 index 0000000000..9b36afca80 --- /dev/null +++ b/files/pt-br/web/javascript/reference/operators/conditional_operator/index.html @@ -0,0 +1,171 @@ +--- +title: Operador Condicional Ternário +slug: Web/JavaScript/Reference/Operators/Operador_Condicional +tags: + - JavaScript + - Operadores Condicionais +translation_of: Web/JavaScript/Reference/Operators/Conditional_Operator +--- +
{{jsSidebar("Operators")}}
+ +

Sumário

+ +

O operador condicional (ternário) é o único operador JavaScript que possui três operandos. Este operador é frequentemente usado como um atalho para a instrução if.

+ +

Sintaxe

+ +
condition ? expr1 : expr2
+ +

Parâmetros

+ +
+
condition
+
Uma expressão que é avaliada como true ou false.
+
+ +
+
expr1, expr2
+
Expressões com valores de qualquer tipo.
+
+ +

Descrição

+ +

Se condition é true, o operador retornará o valor de expr1; se não, ele retorna o valor de exp2. Por exemplo, para exibir uma mensagem diferente baseada no valor da variável isMember, você poderá utilizar o código (statement) seguinte:

+ +
"The fee is " + (isMember ? "$2.00" : "$10.00")
+
+ +

Conforme o resultado da operação, você também poderá atribuir a variáveis:

+ +
var elvisLives = Math.PI > 4 ? "Yep" : "Nope";
+ +

Também são possíveis múltiplas avaliaçãoes ternárias (nota: o operador condicional é associativo a direita):

+ +
var firstCheck = false,
+    secondCheck = false,
+    access = firstCheck ? "Access denied" : secondCheck ? "Access denied" : "Access granted";
+
+console.log( access ); // logs "Access granted"
+ +

Você também pode usar avaliações ternárias no espaço livre de modo a fazer diferentes operações:

+ +
var stop = false, age = 16;
+
+age > 18 ? location.assign("continue.html") : stop = true;
+
+ +

Você também pode fazer mais do que uma única operação em cada caso, separando-os por vírgula:

+ +
var stop = false, age = 23;
+
+age > 18 ? (
+    alert("OK, you can go."),
+    location.assign("continue.html")
+) : (
+    stop = true,
+    alert("Sorry, you are much too young!")
+);
+
+ +

Você também pode fazer mais de uma operação durante a atribuição de um valor. Neste caso, o último valor separado por vírgula dentro dos parênteses será o valor a ser atribuído.

+ +
var age = 16;
+
+var url = age > 18 ? (
+    alert("OK, you can go."),
+    // alert returns "undefined", but it will be ignored because
+    // isn't the last comma-separated value of the parenthesis
+    "continue.html" // the value to be assigned if age > 18
+) : (
+    alert("You are much too young!"),
+    alert("Sorry :-("),
+    // etc. etc.
+    "stop.html" // the value to be assigned if !(age > 18)
+);
+
+location.assign(url); // "stop.html"
+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaçõesStatusComentários
ECMAScript 1st Edition.StandardDefinição inicial. Implementado em JavaScript 1.0
{{SpecName('ES5.1', '#sec-11.12', 'The conditional operator')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-conditional-operator', 'Conditional Operator')}}{{Spec2('ES6')}} 
+ +

Compatibilidade dos navegadores (browser)

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

Veja também

+ + diff --git a/files/pt-br/web/javascript/reference/operators/destructuring_assignment/index.html b/files/pt-br/web/javascript/reference/operators/destructuring_assignment/index.html new file mode 100644 index 0000000000..6b1a100b4b --- /dev/null +++ b/files/pt-br/web/javascript/reference/operators/destructuring_assignment/index.html @@ -0,0 +1,445 @@ +--- +title: Atribuição via desestruturação (destructuring assignment) +slug: Web/JavaScript/Reference/Operators/Atribuicao_via_desestruturacao +translation_of: Web/JavaScript/Reference/Operators/Destructuring_assignment +--- +
{{jsSidebar("Operators")}}
+ +

A sintaxe de atribuição via desestruturação (destructuring assignment) é uma expressão JavaScript que possibilita extrair dados de arrays ou objetos em variáveis distintas.

+ +

Sintaxe

+ +
var a, b, rest;
+[a, b] = [1, 2];
+console.log(a); // 1
+console.log(b); // 2
+
+[a, b, ...rest] = [1, 2, 3, 4, 5];
+console.log(a); // 1
+console.log(b); // 2
+console.log(rest); // [3, 4, 5]
+
+({a, b} = {a:1, b:2});
+console.log(a); // 1
+console.log(b); // 2
+
+// ES2016 - não implementado em Firefox 47a01
+({a, b, ...rest} = {a:1, b:2, c:3, d:4});
+
+ +

Descrição

+ +

As expressões de objeto e matriz literais fornecem uma maneira fácil de criar pacotes ad hoc de dados .

+ +
var x = [1, 2, 3, 4, 5];
+ +

A atribuição via desestruturação usa sintaxe similar, mas no lado esquerdo da atribuição são definidos quais elementos devem ser extraídos da variável de origem.

+ +
var x = [1, 2, 3, 4, 5];
+var [y, z] = x;
+console.log(y); // 1
+console.log(z); // 2
+
+ +

Esse recurso é semelhante aos recursos presentes em linguagens como Perl e Python.

+ +

Desestruturação de array

+ +

Atribuição básica de variável

+ +
var foo = ["one", "two", "three"];
+
+var [one, two, three] = foo;
+console.log(one); // "one"
+console.log(two); // "two"
+console.log(three); // "three"
+
+ +

Atribuição separada da declaração

+ +

Uma variável pode ter seu valor atribuído via desestruturação separadamente da declaração dela.

+ +
var a, b;
+
+[a, b] = [1, 2];
+console.log(a); // 1
+console.log(b); // 2
+
+ +

Valores padrão

+ +

Uma variável pode ser atribuída de um padrão, no caso em que o valor retirado do array é undefined.

+ +
var a, b;
+
+[a=5, b=7] = [1];
+console.log(a); // 1
+console.log(b); // 7
+
+ +

Trocando variáveis

+ +

Os valores de duas variáveis podem ser trocados em uma expressão de desestruturação.

+ +

Sem atribuição via desestruturação, trocar dois valores requer uma variável temporária (ou, em algumas linguagens de baixo nível, o Algoritmo XOR Swap).

+ +
var a = 1;
+var b = 3;
+
+[a, b] = [b, a];
+console.log(a); // 3
+console.log(b); // 1
+
+ +

Analisando um array retornado de uma função

+ +

Sempre foi possível retornar uma matriz de uma função. A desestruturação pode tornar mais conciso o trabalho com um valor de retorno do tipo array.

+ +

Neste exemplo, f() returna os valores [1, 2] como saída, que podem ser analisados em uma única linha com desestruturação.

+ +
function f() {
+  return [1, 2];
+}
+
+var a, b;
+[a, b] = f();
+console.log(a); // 1
+console.log(b); // 2
+
+ +

Ignorando alguns valores retornados

+ +

Você pode ignorar valores retornados que você não tem interesse:

+ +
function f() {
+  return [1, 2, 3];
+}
+
+var [a, , b] = f();
+console.log(a); // 1
+console.log(b); // 3
+
+ +

Você também pode ignorar todos os valores retornados:

+ +
[,,] = f();
+
+ +

Atribuindo o resto de um array para uma variável

+ +

Ao desestruturar um array, você pode atribuir a parte restante deste em uma viáriável usando o padrão rest:

+ +
var [a, ...b] = [1, 2, 3];
+console.log(a); // 1
+console.log(b); // [2, 3]
+ +

Extraindo valores do resultado de uma expressão regular

+ +

Quando o método de expressão regular exec() encontra um resultado, ele retorna um array que contém primeiro toda a porção resultante da string e depois cada uma das porções da string resultante envolvidas por parênteses na expressão regular. A atribuição via desestruturação lhe permite extrair as partes desses array facilmente, ignorando a porção resultante completa se não precisar.

+ +
var url = "https://developer.mozilla.org/en-US/Web/JavaScript";
+
+var parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url);
+console.log(parsedURL); // ["https://developer.mozilla.org/en-US/Web/JavaScript", "https", "developer.mozilla.org", "en-US/Web/JavaScript"]
+
+var [, protocol, fullhost, fullpath] = parsedURL;
+
+console.log(protocol); // "https"
+
+ +

Desestruturação de objeto

+ +

Atribuição básica

+ +
var o = {p: 42, q: true};
+var {p, q} = o;
+
+console.log(p); // 42
+console.log(q); // true
+
+ +

Atribuição sem declaração

+ +

Uma variável pode ter seu valor atribuído via desestruturação separadamente da sua declaração.

+ +
var a, b;
+
+({a, b} = {a:1, b:2});
+ +
+

Os parênteses ( ... ) ao redor da declaração de atribuição é uma sintaxe necessária  quando se utiliza a atribuição via desestruturação de objeto literal sem uma declaração.

+ +

{a, b} = {a:1, b:2} não é uma sintaxe stand-alone válida, pois {a, b} no lado esquerdo é considarada um bloco, não um objeto literal.

+ +

No entanto, ({a, b} = {a:1, b:2}) é valida, assim como var {a, b} = {a:1, b:2}

+
+ +

Atribuição para variáveis com novos nomes

+ +

Uma variável pode ser extraída de um objeto e atribuída a uma variável com um nome diferente da propriedade do objeto.

+ +
var o = {p: 42, q: true};
+var {p: foo, q: bar} = o;
+
+console.log(foo); // 42
+console.log(bar); // true  
+ +

Valores padrão

+ +

Uma variável pode ser atribuída de um padrão, no caso em que o valor retirado do objeto é undefined.

+ +
var {a=10, b=5} = {a: 3};
+
+console.log(a); // 3
+console.log(b); // 5
+ +

Definindo um valor padrão de parâmetro de função

+ +

Versão ES5

+ +
function drawES5Chart(options) {
+  options = options === undefined ? {} : options;
+  var size = options.size === undefined ? 'big' : options.size;
+  var cords = options.cords === undefined ? { x: 0, y: 0 } : options.cords;
+  var radius = options.radius === undefined ? 25 : options.radius;
+  console.log(size, cords, radius);
+  // now finally do some chart drawing
+}
+
+drawES5Chart({
+  cords: { x: 18, y: 30 },
+  radius: 30
+});
+ +

Versão ES2015

+ +
function drawES2015Chart({size = 'big', cords = { x: 0, y: 0 }, radius = 25} = {}) {
+  console.log(size, cords, radius);
+  // do some chart drawing
+}
+
+drawES2015Chart({
+  cords: { x: 18, y: 30 },
+  radius: 30
+});
+ +

Objeto aninhado e desestruturação de array

+ +
var metadata = {
+    title: "Scratchpad",
+    translations: [
+       {
+        locale: "de",
+        localization_tags: [ ],
+        last_edit: "2014-04-14T08:43:37",
+        url: "/de/docs/Tools/Scratchpad",
+        title: "JavaScript-Umgebung"
+       }
+    ],
+    url: "/en-US/docs/Tools/Scratchpad"
+};
+
+var { title: englishTitle, translations: [{ title: localeTitle }] } = metadata;
+
+console.log(englishTitle); // "Scratchpad"
+console.log(localeTitle);  // "JavaScript-Umgebung"
+ +

For de iteração e desestruturação

+ +
var people = [
+  {
+    name: "Mike Smith",
+    family: {
+      mother: "Jane Smith",
+      father: "Harry Smith",
+      sister: "Samantha Smith"
+    },
+    age: 35
+  },
+  {
+    name: "Tom Jones",
+    family: {
+      mother: "Norah Jones",
+      father: "Richard Jones",
+      brother: "Howard Jones"
+    },
+    age: 25
+  }
+];
+
+for (var {name: n, family: { father: f } } of people) {
+  console.log("Name: " + n + ", Father: " + f);
+}
+
+// "Name: Mike Smith, Father: Harry Smith"
+// "Name: Tom Jones, Father: Richard Jones"
+ +

Extraindo campos de objetos passados como parâmetro de função

+ +
function userId({id}) {
+  return id;
+}
+
+function whois({displayName: displayName, fullName: {firstName: name}}){
+  console.log(displayName + " is " + name);
+}
+
+var user = {
+  id: 42,
+  displayName: "jdoe",
+  fullName: {
+      firstName: "John",
+      lastName: "Doe"
+  }
+};
+
+console.log("userId: " + userId(user)); // "userId: 42"
+whois(user); // "jdoe is John"
+ +

Isso extrai o id, displayName e firstName do objeto user e os imprime na tela.

+ +

Nomes computados de propriedade de objeto e desestruturação

+ +

Nomes computados de propriedades, como em objetos literais, podem ser usados com desestruturação.

+ +
let key = "z";
+let { [key]: foo } = { z: "bar" };
+
+console.log(foo); // "bar"
+
+ +

Especificações

+ + + + + + + + + + + + + + + + + + + +
EspeficiaçãoSituaçãoComentário
{{SpecName('ES2015', '#sec-destructuring-assignment', 'Destructuring assignment')}}{{Spec2('ES2015')}}Definição inicial.
{{SpecName('ESDraft', '#sec-destructuring-assignment', 'Destructuring assignment')}}{{Spec2('ESDraft')}}
+ +

Compatibilidade do navegador

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FuncionalidadeChromeFirefox (Gecko)EdgeInternet ExplorerOperaSafari
+

Suporte básico

+ 		{{CompatChrome(49.0)}}{{ CompatGeckoDesktop("1.8.1") }}14{{CompatNo}}{{CompatNo}}7.1
+

Nomes computados de propriedades

+ 		{{CompatChrome(49.0)}}{{ CompatGeckoDesktop("34") }}14{{CompatNo}}{{CompatNo}}{{CompatNo}}
Operador spread{{CompatChrome(49.0)}}{{ CompatGeckoDesktop("34") }}12[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FuncionalidadeAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Suporte básico{{CompatNo}}{{CompatChrome(49.0)}}{{ CompatGeckoMobile("1.0") }}{{CompatNo}}{{CompatNo}}8{{CompatChrome(49.0)}}
Nomes computados de propriedades{{CompatNo}}{{CompatChrome(49.0)}}{{ CompatGeckoMobile("34") }}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatChrome(49.0)}}
Operador spread{{CompatNo}}{{CompatChrome(49.0)}}{{ CompatGeckoMobile("34") }}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(49.0)}}
+
+ +

[1] Requer "Enable experimental Javascript features" para funciona sob `about:flags`

+ +

Notas específicas do Firefox

+ +
    +
  • O Firefox forneceu uma extensão não-padronizada de linguagem em JS1.7 para desestruturação. Esta extensão foi removida no Gecko 40 {{geckoRelease (40)}}. Consulte {{bug (1083498)}}.
    • +
  • A partir do Gecko 41 {{geckoRelease (41)}} e para cumprir com a especificação ES2015, padrões de desestruturação com parênteses, como ([a, b]) = [1, 2] or ({a, b}) = { a: 1, b: 2 }, agora são considerados inválidos e lançarão um {{jsxref ( "SyntaxError")}}. Veja a postagem no blog de Jeff Walden e {{bug (1146136)}} para mais detalhes.
    • +
+ +

Veja também

+ + diff --git a/files/pt-br/web/javascript/reference/operators/inicializador_objeto/index.html b/files/pt-br/web/javascript/reference/operators/inicializador_objeto/index.html deleted file mode 100644 index ac59b4e7f8..0000000000 --- a/files/pt-br/web/javascript/reference/operators/inicializador_objeto/index.html +++ /dev/null @@ -1,392 +0,0 @@ ---- -title: Inicializador de Objeto -slug: Web/JavaScript/Reference/Operators/Inicializador_Objeto -tags: - - ECMAScript 2015 - - JSON - - JavaScript - - Literal - - Métodos - - Objeto - - Propriedades - - mutação -translation_of: Web/JavaScript/Reference/Operators/Object_initializer ---- -
{{JsSidebar("Operadores")}}
- -

Objetos podem ser inicializados utilizando new Object(), Object.create(), ou a notação literal. Um inicializador de objetos é uma lista de zero ou mais pares de propriedade: valor, separados por vírgula e fechado por um par de chaves ({}).

- -

Sintaxe

- -
var o = {};
-var o = { a: "foo", b: 42, c: {} };
-
-var a = "foo", b = 42, c = {};
-var o = { a: a, b: b, c: c };
-
-var o = {
-  propriedade: function ([parâmetros]) {},
-  get propriedade() {},
-  set propriedade(valor) {},
-};
-
- -

Novas notações em ECMAScript 2015

- -

Por favor, verifique o suporte das anotações na tabela de compatibilidade. Em ambientes que não dão suporte às anotações, ocorrerá erros de sintaxe.

- -
// // Abreviação em nomes de propriedades (ES2015)
-var a = "foo", b = 42, c = {};
-var o = { a, b, c };
-
-// // Abreviação em nomes de métodos (ES2015)
-var o = {
-  property([parameters]) {},
-  get property() {},
-  set property(value) {},
-};
-
-// Nomes de propriedades computados (ES2015)
-var prop = "foo";
-var o = {
-  [prop]: "hey",
-  ["b" + "ar"]: "there",
-};
- -

Descrição

- -

Um inicializador de objetos é uma expressão que descreve a inicialização de um {{jsxref("Object")}}. Objects consiste de propriedades, as quais descrevem um objeto. Os valores das propriedades de um objeto podem ser tipos de dados {{Glossary("primitivos")}} ou outros objetos .

- -

Criando objetos

- -

Um objeto vazio, sem propriedades, pode ser criado como: 

- -
var object = {};
- -

Contudo, a vantagem em utilizar a notação literal ou o inicializador é a possibilidade de rapidamente criar objetos com propriedades dentro de chaves ({}). Você simplesmente cria uma lista de pares chave: valor, separados por vírgula. O código abaixo cria um objeto com três propriedades, sendo as chaves "foo", "age" e "baz", com seus respectivos valores, tipo string de valor "bar", tipo number de valor 42 e, por último, um outro objeto com seus respectivos pares de chave: valor. 

- -
var object = {
-  foo: "bar",
-  age: 42,
-  baz: { myProp: 12 },
-}
- -

Acessando propriedades

- -

Uma vez que você criou um objeto, é interessante que possa ler ou alterá-lo. As propriedades de um objeto podem ser acessadas utilizando a notação de ponto ou colchetes. Veja assessores de propriedade para mais informações.

- -
object.foo; // "bar"
-object["age"]; // 42
-
-object.foo = "baz";
-
- -

Definições de propriedade

- -

Nós temos aprendido como descrever propriedades utilizando a sintaxe inicializador. No entanto, às vezes, há variáveis que queremos inserir em nosso objeto. Então teremos um código parecido como abaixo: 

- -
var a = "foo",
-    b = 42,
-    c = {};
-
-var o = {
-  a: a,
-  b: b,
-  c: c
-};
- -

Com ECMAScript 2015, há uma notação mais curta que possibilita atingir o mesmo resultado: 

- -
var a = "foo",
-    b = 42,
-    c = {};
-
-// Abreviação em nomes de propriedades (ES2015)
-var o = { a, b, c };
-
-// Em outras palavras,
-console.log((o.a === { a }.a)); // true
-
- -

Duplicação em nomes de propriedades

- -

Quando se está utilizando o mesmo nome para suas propriedades, a última sobrescreverá as anteriores.

- -
var a = {x: 1, x: 2};
-console.log(a); // { x: 2}
-
- -

Em códigos ECMAScript 5 no modo estrito, duplicação em nomes de propriedades serão consideradas {{jsxref("SyntaxError")}}. Porém, com a introdução de "nomes de propriedades computadas", tornou-se possível a duplicação das propriedades em tempo de execução. Assim, ECMAScript 2015 removeu a restrição.

- -
function haveES2015DuplicatePropertySemantics(){
-  "use strict";
-  try {
-    ({ prop: 1, prop: 2 });
-
-    // No error thrown, duplicate property names allowed in strict mode
-    return true;
-  } catch (e) {
-    // Error thrown, duplicates prohibited in strict mode
-    return false;
-  }
-}
- -

Definição de métodos

- -

Uma propriedade de um objeto pode se referir à function, ou aos métodos getter ou setter.

- -
var o = {
-  propriedade: function ([parâmetros]) {},
-  get propriedade() {},
-  set propriedade(valor) {},
-};
- -

No ECMAScript 2015, uma notação abreviada está disponível, dispensando o uso da palavra reservada "function".

- -
// Abreviações em nomes de métodos (ES2015)
-var o = {
-  propriedade([parâmetros]) {},
-  get propriedade() {},
-  set propriedade(valor) {},
-  * gerador() {}
-};
- -

Com ECMAScript 2015, há uma forma concisa em criar propriedades cujo valor é uma função gerador. 

- -
var o = {
-  * gerador() {
-    ...........
-  }
-};
- -

Mas em ECMAScript 5, você escreveria (lembrar que em ES5 não há geradores):

- -
var o = {
-  generator: function *() {
-    ...........
-  }
-};
- -

Para mais informações e exemplos, veja definições de método.

- -

Nomes de propriedades computados

- -

Começando com ECMAScript 2015, a sintaxe inicializador de objeto também suporta "nomes de propriedades computados". Isso permite que você possa inserir uma expressão dentro de colchetes [], que será computada como o nome de uma propriedade. Isto é semelhante à notação de chaves utilizado em acessor de propriedade, utilizado para ler a alterar as propriedades existentes em um objeto. Segue um exemplo utilizando a mesma sintaxe em objetos literais: 

- -
// Nomes de propriedades computados (ES2015)
-var i = 0;
-var a = {
-  ["foo" + ++i]: i,
-  ["foo" + ++i]: i,
-  ["foo" + ++i]: i
-};
-
-console.log(a.foo1); // 1
-console.log(a.foo2); // 2
-console.log(a.foo3); // 3
-
-var param = 'size';
-var config = {
-  [param]: 12,
-  ["mobile" + param.charAt(0).toUpperCase() + param.slice(1)]: 4
-};
-
-console.log(config); // { size: 12, mobileSize: 4 }
- -

Mutação Prototype 

- -

Uma definição de propriedade na forma de  __proto__: valor or "__proto__": valor não cria uma propriedade com o nome  __proto__.  Inclusive, se o valor fornecido for um objeto ou null, muda o [[Prototype]] do objeto criado para o valor informado. (Se o valor fornecido não é um objeto ou null, o valor não será alterado.)

- -
var obj1 = {};
-assert(Object.getPrototypeOf(obj1) === Object.prototype);
-
-var obj2 = { __proto__: null };
-assert(Object.getPrototypeOf(obj2) === null);
-
-var protoObj = {};
-var obj3 = { "__proto__": protoObj };
-assert(Object.getPrototypeOf(obj3) === protoObj);
-
-var obj4 = { __proto__: "not an object or null" };
-assert(Object.getPrototypeOf(obj4) === Object.prototype);
-assert(!obj4.hasOwnProperty("__proto__"));
-
- -

Apenas uma única mudança em prototype é permitida em um objeto: múltiplas mudanças gera erro de sintaxe. 

- -

Definições de propriedade que não utilizam da notação de ":", não são consideradas mudanças de prototype: são definições de propriedades que se comportam de forma semelhante às definições utilizando qualquer outro nome. 

- -
var __proto__ = "variable";
-
-var obj1 = { __proto__ };
-assert(Object.getPrototypeOf(obj1) === Object.prototype);
-assert(obj1.hasOwnProperty("__proto__"));
-assert(obj1.__proto__ === "variable");
-
-var obj2 = { __proto__() { return "hello"; } };
-assert(obj2.__proto__() === "hello");
-
-var obj3 = { ["__prot" + "o__"]: 17 };
-assert(obj3.__proto__ === 17);
-
- -

Notação de objeto literal vs JSON

- -

A notação de objeto literal não é a mesma de JavaScript Object Notation (JSON).  Mesmo que possuam semelhanças, há as seguintes diferenças:

- -
    -
  • JSON permite definições de propriedades utilizando apenas aspas duplas, como  "propriedade": valor.  E a definição não pode ser abreviada.
    • -
  • Os valores JSON podem ser apenas strings, numbers, arrays, true, false, null, ou outro objeto JSON.
    • -
  • Uma função como valor (veja "Métodos" acima) não pode ser atribuido em JSON.
    • -
  • Objetos como {{jsxref("Date")}} serão do tipo string após {{jsxref("JSON.parse()")}}.
    • -
  • {{jsxref("JSON.parse()")}} rejeitará "nomes de propriedades computados" e um erro será lançado.
    • -
- -

Especificações

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('ES1')}}{{Spec2('ES1')}}Definição inicial.
{{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}}{{Spec2('ES5.1')}}getter e setter adicionados.
{{SpecName('ES6', '#sec-object-initializer', 'Object Initializer')}}{{Spec2('ES6')}}Abreviações de nomes em propriedades/métodos e nomes de propriedados computados foram adicionados.
{{SpecName('ESDraft', '#sec-object-initializer', 'Object Initializer')}}{{Spec2('ESDraft')}} 
- -

Compatibilidade de Browser

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico{{CompatChrome(1.0)}}{{CompatGeckoDesktop("1.0")}}111
Nomes de propriedades computados{{CompatVersionUnknown}}{{CompatGeckoDesktop("34")}}{{CompatNo}}{{CompatNo}}7.1
Abreviação em nomes de propriedades{{CompatVersionUnknown}}{{CompatGeckoDesktop("33")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Abreviação em nomes de métodos{{CompatChrome(42.0)}}{{CompatGeckoDesktop("34")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Suporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}111{{CompatChrome(1.0)}}
Nomes de propriedades computados{{CompatNo}}{{CompatVersionUnknown}}{{CompatGeckoMobile("34")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Abreviação em nomes de propriedades{{CompatNo}}{{CompatVersionUnknown}}{{CompatGeckoMobile("33")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Abreviação em nomes de métodos{{CompatNo}}{{CompatChrome(42.0)}}{{CompatGeckoMobile("34")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatChrome(42.0)}}
-
- -

Veja também

- - diff --git a/files/pt-br/web/javascript/reference/operators/nullish_coalescing_operator/index.html b/files/pt-br/web/javascript/reference/operators/nullish_coalescing_operator/index.html new file mode 100644 index 0000000000..609bfa29fd --- /dev/null +++ b/files/pt-br/web/javascript/reference/operators/nullish_coalescing_operator/index.html @@ -0,0 +1,159 @@ +--- +title: Operador de coalescência nula +slug: Web/JavaScript/Reference/Operators/operador_de_coalescencia_nula +tags: + - JavaScript + - Operador + - Operadores lógicos + - Referencia + - coalescencia nula + - duas interrogações + - nulidade +translation_of: Web/JavaScript/Reference/Operators/Nullish_coalescing_operator +--- +

{{JSSidebar("Operators")}}

+ +

O operador de coalescência nula (??) é um operador lógico que retorna o seu operando do lado direito quando o seu operador do lado esquerdo é {{jsxref("null")}} ou {{jsxref("undefined")}}. Caso contrário, ele retorna o seu operando do lado esquerdo.

+ +

Ao contrário do operador lógico OR (||), o operando esquerdo é retornado se houver um valor falsy (falso) que não seja null ou undefined. Em outras palavras, se você usar || para obter algum valor padrão para outra variável foo, você pode enfrentar comportamentos inesperados se você considerar algum valor falseável como utilizável (eg. '' ou 0). Veja abaixo alguns exemplos:

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

Sintaxe

+ +
exprEsq ?? exprDir
+
+ +

Descrição

+ +

O operador de coalescência nula retorna os resultados da expressão de seu lado direito se a expressão de seu lado esquerdo for {{jsxref("null")}} ou {{jsxref("undefined")}}.

+ +

Endereçando um valor padrão à variável

+ +

Inicialmente, quando se deseja endereçar um valor padrão à variável, um padrão comum é utilizar o operador lógico OR  (||):

+ +
let foo;
+
+//  foo nunca é endereçado a nenhum valor, portanto, ainda está indefinido
+let someDummyText = foo || 'Hello!';
+ +

Entretanto, devido ao || ser um operador lógico booleano, o operando do lado esquerdo é coagido para um valor booleano para sua avaliação, e, qualquer valor falseável (0, '', NaN, null, undefined) não é retornado. Este comportamento pode causar consequencias inesperadas se você considerar 0, '', or NaN como valores válidos.

+ +
let count = 0;
+let text = "";
+
+let qty = count || 42;
+let message = text || "Olá!";
+console.log(qty);     // 42 e não 0
+console.log(message); // "hi!" e não ""
+
+ +

O operador de coalescência nula evita esta cilada pois retorna o segundo operando apenas quando o primeiro é avaliado entre os valores null ou undefined (mas nehum outro valor falseável):

+ +
let myText = ''; // Uma string vazia (que também é um valor falseável)
+
+let notFalsyText = myText || 'Olá mundo';
+console.log(notFalsyText); // Olá mundo
+
+let preservingFalsy = myText ?? 'Olá vizinhança';
+console.log(preservingFalsy); // '' (Pois myText não é undefined e nem null)
+
+ +

Curto-circuito

+ +

Assim como os operadores lógicos OR e AND, a expressão do lado direito não é avaliada se o lado esquerdo não for avaliado entre null e nem undefined.

+ +
function A() { console.log('A foi chamado'); return undefined;}
+function B() { console.log('B foi chamado'); return false;}
+function C() { console.log('C foi chamado'); return "foo";}
+
+console.log( A() ?? C() );
+// Imprime "A foi chamado" então "C foi chamado" e por fim "foo"
+// Como A() retornou undefined então ambas expressões foram avaliadas
+
+console.log( B() ?? C() );
+// Imprime "B foi chamado" então "false"
+// Como B() retornou false (e não null ou undefined), a expressão
+// do lado direito não foi avaliada.
+
+ +

Sem encadeamento com os operadores AND e OR

+ +

Não é possível encadear ambos operadores AND (&&) e OR (||) diretamente com o ??. Um SyntaxError será disparado nesse tipo de caso.

+ +
null || undefined ?? "foo"; // Dispara um SyntaxError
+true || undefined ?? "foo"; // Dispara um SyntaxError
+ +

Entretanto, explicitar diretamente a precedência por meio de parênteses resulta no comportamento correto:

+ +
(null || undefined) ?? "foo"; // retorna "foo"
+
+ +

Relacionamento com o operador de encadeamento opcional (?.)

+ +

O operador de coalescêcia nula trata undefined e null como valores específicos e então executa o operador de encadeamento opcional (?.) o qual é útil para acessar uma propriedade de um objeto, o qual pode ser null ou undefined.

+ +
let foo = { someFooProp: "oi" };
+
+console.log(foo.someFooProp?.toUpperCase());  // "OI"
+console.log(foo.someBarProp?.toUpperCase()); // undefined
+
+ +

Exemplo

+ +

Neste exemplo, nós iremos prover valores padrão, mas manter valores que não sejam (advinha???) null ou undefined.

+ +
const nullValue = null;
+const emptyText = ""; // falseável (falsy)
+const someNumber = 42;
+
+const valA = nullValue ?? "padrão para A";
+const valB = emptyText ?? "padrão para B";
+const valC = someNumber ?? 0;
+
+console.log(valA); // "padrão para A"
+console.log(valB); // "" (pois a string vazia não é null ou undefined)
+console.log(valC); // 42
+
+ +

Especificações

+ + + + + + + + + + + + + + + + +
EspecificaçãoStatuscomentário
Proposal for the "nullish coalescing" operatorStage 4
+ +

Compatibilidade de navegadores

+ + + +

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

+ +

Progresso de implementação

+ +

A seguinte tabela fornece o status diário de implementação para este recurso, porque este recurso ainda não atingiu a estabilidade entre navegadores. Os dados são gerados pela execução de testes de recursos relevantes no Test262, a plataforma de testes padrão do JavaScript, em "edições noturnas", ou último release de cada motor JavaScript dos navegadores.

+ +
{{EmbedTest262ReportResultsTable("coalesce-expression")}}
+ +

Veja também

+ + diff --git a/files/pt-br/web/javascript/reference/operators/object_initializer/index.html b/files/pt-br/web/javascript/reference/operators/object_initializer/index.html new file mode 100644 index 0000000000..ac59b4e7f8 --- /dev/null +++ b/files/pt-br/web/javascript/reference/operators/object_initializer/index.html @@ -0,0 +1,392 @@ +--- +title: Inicializador de Objeto +slug: Web/JavaScript/Reference/Operators/Inicializador_Objeto +tags: + - ECMAScript 2015 + - JSON + - JavaScript + - Literal + - Métodos + - Objeto + - Propriedades + - mutação +translation_of: Web/JavaScript/Reference/Operators/Object_initializer +--- +
{{JsSidebar("Operadores")}}
+ +

Objetos podem ser inicializados utilizando new Object(), Object.create(), ou a notação literal. Um inicializador de objetos é uma lista de zero ou mais pares de propriedade: valor, separados por vírgula e fechado por um par de chaves ({}).

+ +

Sintaxe

+ +
var o = {};
+var o = { a: "foo", b: 42, c: {} };
+
+var a = "foo", b = 42, c = {};
+var o = { a: a, b: b, c: c };
+
+var o = {
+  propriedade: function ([parâmetros]) {},
+  get propriedade() {},
+  set propriedade(valor) {},
+};
+
+ +

Novas notações em ECMAScript 2015

+ +

Por favor, verifique o suporte das anotações na tabela de compatibilidade. Em ambientes que não dão suporte às anotações, ocorrerá erros de sintaxe.

+ +
// // Abreviação em nomes de propriedades (ES2015)
+var a = "foo", b = 42, c = {};
+var o = { a, b, c };
+
+// // Abreviação em nomes de métodos (ES2015)
+var o = {
+  property([parameters]) {},
+  get property() {},
+  set property(value) {},
+};
+
+// Nomes de propriedades computados (ES2015)
+var prop = "foo";
+var o = {
+  [prop]: "hey",
+  ["b" + "ar"]: "there",
+};
+ +

Descrição

+ +

Um inicializador de objetos é uma expressão que descreve a inicialização de um {{jsxref("Object")}}. Objects consiste de propriedades, as quais descrevem um objeto. Os valores das propriedades de um objeto podem ser tipos de dados {{Glossary("primitivos")}} ou outros objetos .

+ +

Criando objetos

+ +

Um objeto vazio, sem propriedades, pode ser criado como: 

+ +
var object = {};
+ +

Contudo, a vantagem em utilizar a notação literal ou o inicializador é a possibilidade de rapidamente criar objetos com propriedades dentro de chaves ({}). Você simplesmente cria uma lista de pares chave: valor, separados por vírgula. O código abaixo cria um objeto com três propriedades, sendo as chaves "foo", "age" e "baz", com seus respectivos valores, tipo string de valor "bar", tipo number de valor 42 e, por último, um outro objeto com seus respectivos pares de chave: valor. 

+ +
var object = {
+  foo: "bar",
+  age: 42,
+  baz: { myProp: 12 },
+}
+ +

Acessando propriedades

+ +

Uma vez que você criou um objeto, é interessante que possa ler ou alterá-lo. As propriedades de um objeto podem ser acessadas utilizando a notação de ponto ou colchetes. Veja assessores de propriedade para mais informações.

+ +
object.foo; // "bar"
+object["age"]; // 42
+
+object.foo = "baz";
+
+ +

Definições de propriedade

+ +

Nós temos aprendido como descrever propriedades utilizando a sintaxe inicializador. No entanto, às vezes, há variáveis que queremos inserir em nosso objeto. Então teremos um código parecido como abaixo: 

+ +
var a = "foo",
+    b = 42,
+    c = {};
+
+var o = {
+  a: a,
+  b: b,
+  c: c
+};
+ +

Com ECMAScript 2015, há uma notação mais curta que possibilita atingir o mesmo resultado: 

+ +
var a = "foo",
+    b = 42,
+    c = {};
+
+// Abreviação em nomes de propriedades (ES2015)
+var o = { a, b, c };
+
+// Em outras palavras,
+console.log((o.a === { a }.a)); // true
+
+ +

Duplicação em nomes de propriedades

+ +

Quando se está utilizando o mesmo nome para suas propriedades, a última sobrescreverá as anteriores.

+ +
var a = {x: 1, x: 2};
+console.log(a); // { x: 2}
+
+ +

Em códigos ECMAScript 5 no modo estrito, duplicação em nomes de propriedades serão consideradas {{jsxref("SyntaxError")}}. Porém, com a introdução de "nomes de propriedades computadas", tornou-se possível a duplicação das propriedades em tempo de execução. Assim, ECMAScript 2015 removeu a restrição.

+ +
function haveES2015DuplicatePropertySemantics(){
+  "use strict";
+  try {
+    ({ prop: 1, prop: 2 });
+
+    // No error thrown, duplicate property names allowed in strict mode
+    return true;
+  } catch (e) {
+    // Error thrown, duplicates prohibited in strict mode
+    return false;
+  }
+}
+ +

Definição de métodos

+ +

Uma propriedade de um objeto pode se referir à function, ou aos métodos getter ou setter.

+ +
var o = {
+  propriedade: function ([parâmetros]) {},
+  get propriedade() {},
+  set propriedade(valor) {},
+};
+ +

No ECMAScript 2015, uma notação abreviada está disponível, dispensando o uso da palavra reservada "function".

+ +
// Abreviações em nomes de métodos (ES2015)
+var o = {
+  propriedade([parâmetros]) {},
+  get propriedade() {},
+  set propriedade(valor) {},
+  * gerador() {}
+};
+ +

Com ECMAScript 2015, há uma forma concisa em criar propriedades cujo valor é uma função gerador. 

+ +
var o = {
+  * gerador() {
+    ...........
+  }
+};
+ +

Mas em ECMAScript 5, você escreveria (lembrar que em ES5 não há geradores):

+ +
var o = {
+  generator: function *() {
+    ...........
+  }
+};
+ +

Para mais informações e exemplos, veja definições de método.

+ +

Nomes de propriedades computados

+ +

Começando com ECMAScript 2015, a sintaxe inicializador de objeto também suporta "nomes de propriedades computados". Isso permite que você possa inserir uma expressão dentro de colchetes [], que será computada como o nome de uma propriedade. Isto é semelhante à notação de chaves utilizado em acessor de propriedade, utilizado para ler a alterar as propriedades existentes em um objeto. Segue um exemplo utilizando a mesma sintaxe em objetos literais: 

+ +
// Nomes de propriedades computados (ES2015)
+var i = 0;
+var a = {
+  ["foo" + ++i]: i,
+  ["foo" + ++i]: i,
+  ["foo" + ++i]: i
+};
+
+console.log(a.foo1); // 1
+console.log(a.foo2); // 2
+console.log(a.foo3); // 3
+
+var param = 'size';
+var config = {
+  [param]: 12,
+  ["mobile" + param.charAt(0).toUpperCase() + param.slice(1)]: 4
+};
+
+console.log(config); // { size: 12, mobileSize: 4 }
+ +

Mutação Prototype 

+ +

Uma definição de propriedade na forma de  __proto__: valor or "__proto__": valor não cria uma propriedade com o nome  __proto__.  Inclusive, se o valor fornecido for um objeto ou null, muda o [[Prototype]] do objeto criado para o valor informado. (Se o valor fornecido não é um objeto ou null, o valor não será alterado.)

+ +
var obj1 = {};
+assert(Object.getPrototypeOf(obj1) === Object.prototype);
+
+var obj2 = { __proto__: null };
+assert(Object.getPrototypeOf(obj2) === null);
+
+var protoObj = {};
+var obj3 = { "__proto__": protoObj };
+assert(Object.getPrototypeOf(obj3) === protoObj);
+
+var obj4 = { __proto__: "not an object or null" };
+assert(Object.getPrototypeOf(obj4) === Object.prototype);
+assert(!obj4.hasOwnProperty("__proto__"));
+
+ +

Apenas uma única mudança em prototype é permitida em um objeto: múltiplas mudanças gera erro de sintaxe. 

+ +

Definições de propriedade que não utilizam da notação de ":", não são consideradas mudanças de prototype: são definições de propriedades que se comportam de forma semelhante às definições utilizando qualquer outro nome. 

+ +
var __proto__ = "variable";
+
+var obj1 = { __proto__ };
+assert(Object.getPrototypeOf(obj1) === Object.prototype);
+assert(obj1.hasOwnProperty("__proto__"));
+assert(obj1.__proto__ === "variable");
+
+var obj2 = { __proto__() { return "hello"; } };
+assert(obj2.__proto__() === "hello");
+
+var obj3 = { ["__prot" + "o__"]: 17 };
+assert(obj3.__proto__ === 17);
+
+ +

Notação de objeto literal vs JSON

+ +

A notação de objeto literal não é a mesma de JavaScript Object Notation (JSON).  Mesmo que possuam semelhanças, há as seguintes diferenças:

+ +
    +
  • JSON permite definições de propriedades utilizando apenas aspas duplas, como  "propriedade": valor.  E a definição não pode ser abreviada.
    • +
  • Os valores JSON podem ser apenas strings, numbers, arrays, true, false, null, ou outro objeto JSON.
    • +
  • Uma função como valor (veja "Métodos" acima) não pode ser atribuido em JSON.
    • +
  • Objetos como {{jsxref("Date")}} serão do tipo string após {{jsxref("JSON.parse()")}}.
    • +
  • {{jsxref("JSON.parse()")}} rejeitará "nomes de propriedades computados" e um erro será lançado.
    • +
+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES1')}}{{Spec2('ES1')}}Definição inicial.
{{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}}{{Spec2('ES5.1')}}getter e setter adicionados.
{{SpecName('ES6', '#sec-object-initializer', 'Object Initializer')}}{{Spec2('ES6')}}Abreviações de nomes em propriedades/métodos e nomes de propriedados computados foram adicionados.
{{SpecName('ESDraft', '#sec-object-initializer', 'Object Initializer')}}{{Spec2('ESDraft')}} 
+ +

Compatibilidade de Browser

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico{{CompatChrome(1.0)}}{{CompatGeckoDesktop("1.0")}}111
Nomes de propriedades computados{{CompatVersionUnknown}}{{CompatGeckoDesktop("34")}}{{CompatNo}}{{CompatNo}}7.1
Abreviação em nomes de propriedades{{CompatVersionUnknown}}{{CompatGeckoDesktop("33")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Abreviação em nomes de métodos{{CompatChrome(42.0)}}{{CompatGeckoDesktop("34")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Suporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}111{{CompatChrome(1.0)}}
Nomes de propriedades computados{{CompatNo}}{{CompatVersionUnknown}}{{CompatGeckoMobile("34")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Abreviação em nomes de propriedades{{CompatNo}}{{CompatVersionUnknown}}{{CompatGeckoMobile("33")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Abreviação em nomes de métodos{{CompatNo}}{{CompatChrome(42.0)}}{{CompatGeckoMobile("34")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatChrome(42.0)}}
+
+ +

Veja também

+ + diff --git a/files/pt-br/web/javascript/reference/operators/operador_condicional/index.html b/files/pt-br/web/javascript/reference/operators/operador_condicional/index.html deleted file mode 100644 index 9b36afca80..0000000000 --- a/files/pt-br/web/javascript/reference/operators/operador_condicional/index.html +++ /dev/null @@ -1,171 +0,0 @@ ---- -title: Operador Condicional Ternário -slug: Web/JavaScript/Reference/Operators/Operador_Condicional -tags: - - JavaScript - - Operadores Condicionais -translation_of: Web/JavaScript/Reference/Operators/Conditional_Operator ---- -
{{jsSidebar("Operators")}}
- -

Sumário

- -

O operador condicional (ternário) é o único operador JavaScript que possui três operandos. Este operador é frequentemente usado como um atalho para a instrução if.

- -

Sintaxe

- -
condition ? expr1 : expr2
- -

Parâmetros

- -
-
condition
-
Uma expressão que é avaliada como true ou false.
-
- -
-
expr1, expr2
-
Expressões com valores de qualquer tipo.
-
- -

Descrição

- -

Se condition é true, o operador retornará o valor de expr1; se não, ele retorna o valor de exp2. Por exemplo, para exibir uma mensagem diferente baseada no valor da variável isMember, você poderá utilizar o código (statement) seguinte:

- -
"The fee is " + (isMember ? "$2.00" : "$10.00")
-
- -

Conforme o resultado da operação, você também poderá atribuir a variáveis:

- -
var elvisLives = Math.PI > 4 ? "Yep" : "Nope";
- -

Também são possíveis múltiplas avaliaçãoes ternárias (nota: o operador condicional é associativo a direita):

- -
var firstCheck = false,
-    secondCheck = false,
-    access = firstCheck ? "Access denied" : secondCheck ? "Access denied" : "Access granted";
-
-console.log( access ); // logs "Access granted"
- -

Você também pode usar avaliações ternárias no espaço livre de modo a fazer diferentes operações:

- -
var stop = false, age = 16;
-
-age > 18 ? location.assign("continue.html") : stop = true;
-
- -

Você também pode fazer mais do que uma única operação em cada caso, separando-os por vírgula:

- -
var stop = false, age = 23;
-
-age > 18 ? (
-    alert("OK, you can go."),
-    location.assign("continue.html")
-) : (
-    stop = true,
-    alert("Sorry, you are much too young!")
-);
-
- -

Você também pode fazer mais de uma operação durante a atribuição de um valor. Neste caso, o último valor separado por vírgula dentro dos parênteses será o valor a ser atribuído.

- -
var age = 16;
-
-var url = age > 18 ? (
-    alert("OK, you can go."),
-    // alert returns "undefined", but it will be ignored because
-    // isn't the last comma-separated value of the parenthesis
-    "continue.html" // the value to be assigned if age > 18
-) : (
-    alert("You are much too young!"),
-    alert("Sorry :-("),
-    // etc. etc.
-    "stop.html" // the value to be assigned if !(age > 18)
-);
-
-location.assign(url); // "stop.html"
- -

Especificações

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaçõesStatusComentários
ECMAScript 1st Edition.StandardDefinição inicial. Implementado em JavaScript 1.0
{{SpecName('ES5.1', '#sec-11.12', 'The conditional operator')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-conditional-operator', 'Conditional Operator')}}{{Spec2('ES6')}} 
- -

Compatibilidade dos navegadores (browser)

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -

Veja também

- - diff --git a/files/pt-br/web/javascript/reference/operators/operador_de_coalescencia_nula/index.html b/files/pt-br/web/javascript/reference/operators/operador_de_coalescencia_nula/index.html deleted file mode 100644 index 609bfa29fd..0000000000 --- a/files/pt-br/web/javascript/reference/operators/operador_de_coalescencia_nula/index.html +++ /dev/null @@ -1,159 +0,0 @@ ---- -title: Operador de coalescência nula -slug: Web/JavaScript/Reference/Operators/operador_de_coalescencia_nula -tags: - - JavaScript - - Operador - - Operadores lógicos - - Referencia - - coalescencia nula - - duas interrogações - - nulidade -translation_of: Web/JavaScript/Reference/Operators/Nullish_coalescing_operator ---- -

{{JSSidebar("Operators")}}

- -

O operador de coalescência nula (??) é um operador lógico que retorna o seu operando do lado direito quando o seu operador do lado esquerdo é {{jsxref("null")}} ou {{jsxref("undefined")}}. Caso contrário, ele retorna o seu operando do lado esquerdo.

- -

Ao contrário do operador lógico OR (||), o operando esquerdo é retornado se houver um valor falsy (falso) que não seja null ou undefined. Em outras palavras, se você usar || para obter algum valor padrão para outra variável foo, você pode enfrentar comportamentos inesperados se você considerar algum valor falseável como utilizável (eg. '' ou 0). Veja abaixo alguns exemplos:

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

Sintaxe

- -
exprEsq ?? exprDir
-
- -

Descrição

- -

O operador de coalescência nula retorna os resultados da expressão de seu lado direito se a expressão de seu lado esquerdo for {{jsxref("null")}} ou {{jsxref("undefined")}}.

- -

Endereçando um valor padrão à variável

- -

Inicialmente, quando se deseja endereçar um valor padrão à variável, um padrão comum é utilizar o operador lógico OR  (||):

- -
let foo;
-
-//  foo nunca é endereçado a nenhum valor, portanto, ainda está indefinido
-let someDummyText = foo || 'Hello!';
- -

Entretanto, devido ao || ser um operador lógico booleano, o operando do lado esquerdo é coagido para um valor booleano para sua avaliação, e, qualquer valor falseável (0, '', NaN, null, undefined) não é retornado. Este comportamento pode causar consequencias inesperadas se você considerar 0, '', or NaN como valores válidos.

- -
let count = 0;
-let text = "";
-
-let qty = count || 42;
-let message = text || "Olá!";
-console.log(qty);     // 42 e não 0
-console.log(message); // "hi!" e não ""
-
- -

O operador de coalescência nula evita esta cilada pois retorna o segundo operando apenas quando o primeiro é avaliado entre os valores null ou undefined (mas nehum outro valor falseável):

- -
let myText = ''; // Uma string vazia (que também é um valor falseável)
-
-let notFalsyText = myText || 'Olá mundo';
-console.log(notFalsyText); // Olá mundo
-
-let preservingFalsy = myText ?? 'Olá vizinhança';
-console.log(preservingFalsy); // '' (Pois myText não é undefined e nem null)
-
- -

Curto-circuito

- -

Assim como os operadores lógicos OR e AND, a expressão do lado direito não é avaliada se o lado esquerdo não for avaliado entre null e nem undefined.

- -
function A() { console.log('A foi chamado'); return undefined;}
-function B() { console.log('B foi chamado'); return false;}
-function C() { console.log('C foi chamado'); return "foo";}
-
-console.log( A() ?? C() );
-// Imprime "A foi chamado" então "C foi chamado" e por fim "foo"
-// Como A() retornou undefined então ambas expressões foram avaliadas
-
-console.log( B() ?? C() );
-// Imprime "B foi chamado" então "false"
-// Como B() retornou false (e não null ou undefined), a expressão
-// do lado direito não foi avaliada.
-
- -

Sem encadeamento com os operadores AND e OR

- -

Não é possível encadear ambos operadores AND (&&) e OR (||) diretamente com o ??. Um SyntaxError será disparado nesse tipo de caso.

- -
null || undefined ?? "foo"; // Dispara um SyntaxError
-true || undefined ?? "foo"; // Dispara um SyntaxError
- -

Entretanto, explicitar diretamente a precedência por meio de parênteses resulta no comportamento correto:

- -
(null || undefined) ?? "foo"; // retorna "foo"
-
- -

Relacionamento com o operador de encadeamento opcional (?.)

- -

O operador de coalescêcia nula trata undefined e null como valores específicos e então executa o operador de encadeamento opcional (?.) o qual é útil para acessar uma propriedade de um objeto, o qual pode ser null ou undefined.

- -
let foo = { someFooProp: "oi" };
-
-console.log(foo.someFooProp?.toUpperCase());  // "OI"
-console.log(foo.someBarProp?.toUpperCase()); // undefined
-
- -

Exemplo

- -

Neste exemplo, nós iremos prover valores padrão, mas manter valores que não sejam (advinha???) null ou undefined.

- -
const nullValue = null;
-const emptyText = ""; // falseável (falsy)
-const someNumber = 42;
-
-const valA = nullValue ?? "padrão para A";
-const valB = emptyText ?? "padrão para B";
-const valC = someNumber ?? 0;
-
-console.log(valA); // "padrão para A"
-console.log(valB); // "" (pois a string vazia não é null ou undefined)
-console.log(valC); // 42
-
- -

Especificações

- - - - - - - - - - - - - - - - -
EspecificaçãoStatuscomentário
Proposal for the "nullish coalescing" operatorStage 4
- -

Compatibilidade de navegadores

- - - -

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

- -

Progresso de implementação

- -

A seguinte tabela fornece o status diário de implementação para este recurso, porque este recurso ainda não atingiu a estabilidade entre navegadores. Os dados são gerados pela execução de testes de recursos relevantes no Test262, a plataforma de testes padrão do JavaScript, em "edições noturnas", ou último release de cada motor JavaScript dos navegadores.

- -
{{EmbedTest262ReportResultsTable("coalesce-expression")}}
- -

Veja também

- - diff --git a/files/pt-br/web/javascript/reference/operators/operador_virgula/index.html b/files/pt-br/web/javascript/reference/operators/operador_virgula/index.html deleted file mode 100644 index be374104d0..0000000000 --- a/files/pt-br/web/javascript/reference/operators/operador_virgula/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: Operador Vírgula -slug: Web/JavaScript/Reference/Operators/Operador_Virgula -translation_of: Web/JavaScript/Reference/Operators/Comma_Operator ---- -
- {{jsSidebar("Operators")}}
-

Sumário

-

o operador vírgula avalia o valor de seus operandos (da esquerda para a direita) e retorna o valor do último operando.

-

Sintaxe

-
expr1, expr2, expr3...
-

Parameters

-
-
- expr1, expr2, expr3...
-
- Quaisquer expressões.
-
-

Descrição

-

Você pode usar o operador vírgula quando desejar incluir múltiplas expressões em um lugar que requer uma única expressão. O uso mais comum desse operador é suprir múltiplos parâmetros em um loop for.

-

Exemplo

-

Se a é um array de 2 dimensões com 10 elementos de um lado, o seguinte código usa o operador vírgula para incrementar duas variáveis mutuamente. Note que a vírgula na declaração var não é o operador vírgula, porque ele não existe dentro de uma expressão. Além disso, ela é uma caractere especial nas declarações var para combinar múltiplas delas em uma única. Embora praticamente a vírgula comporte-se quase que igualmente ao operador vírgula. O código imprime os valores dos elementos diagonais da matriz:

-
for (var i = 0, j = 9; i <= 9; i++, j--)
-  document.writeln("a[" + i + "][" + j + "] = " + a[i][j]);
-
-

Especificações

- - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
1ª Edição ECMAScript.PadrãoDefinição inicial.
{{SpecName('ES5.1', '#sec-11.14', 'Comma operator')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-comma-operator', 'Comma operator')}}{{Spec2('ES6')}} 
-

Compatibilidade de Navegadores

-

{{ CompatibilityTable() }}

-
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte Básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
-
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte Básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
-

Veja também

- diff --git "a/files/pt-br/web/javascript/reference/operators/operadores_de_compara\303\247\303\243o/index.html" "b/files/pt-br/web/javascript/reference/operators/operadores_de_compara\303\247\303\243o/index.html" deleted file mode 100644 index d5e946a438..0000000000 --- "a/files/pt-br/web/javascript/reference/operators/operadores_de_compara\303\247\303\243o/index.html" +++ /dev/null @@ -1,251 +0,0 @@ ---- -title: Operadores de comparação -slug: Web/JavaScript/Reference/Operators/Operadores_de_comparação -tags: - - Comparando String - - Comparação - - Igualdade - - Operadores - - Relacionais -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: Web/JavaScript/Reference/Operators/Comparison_Operators ---- -
{{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:

- -
    -
  • Duas strings são estritamente iguals quando elas possuem a mesma sequência de caracteres, o mesmo tamanho, Duas string são estritamente iguals quando elas possuem a mesma sequência de caracteres, o mesmo tamanho, e os mesmos caracteres em posições correspondentes.
    • -
  • Dois números são estritamente iguais quando eles são numericamente iguais (tem o mesmo valor numérico). NaN não é igual a nada, incluindo NaN. Zeros positivos e negativos são iguals entre si.
    • -
  • Dois operadores Boleanos são estritamente iguais se ambos são true ou ambos são false.
    • -
  • Dois objetos distintos nunca são iguais para comparações estritas ou abstratas.
    • -
  • Uma expressão comparando Objetos somente é verdadeira se os operandos referenciarem o mesmo Objeto.
    • -
  • Os tipo Null e Undefined são estritamente iguais entre eles mesmos e abstratamente iguais entre si.
    • -
- -

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:

- -
    -
  • Ao comparar um número e uma string, a string é convertida em um valor numérico. JavaScript tenta converter o literal numérico de string em um valor de tipo Number. Primeiro, um valor matemático é derivado do literal numérico da string. Em seguida, esse valor é arredondado para o valor de tipo de número mais próximo.
    • -
  • Se um dos operandos for booleano, o operando booleano é convertido em 1 se for verdadeiro e +0 se for falso.
    • -
  • Se um objeto é comparado com um número ou string, o JavaScript tenta retornar o valor padrão para o objeto. Os operadores tentam converter o objeto em um valor primitivo, um valor String ou Number, usando os métodos valueOf e toString dos objetos. Se essa tentativa de converter o objeto falhar, será gerado um erro de tempo de execução.
    • -
  • Observe que um objeto é convertido em primitivo se, e somente se, seu comparando for um primitivo. Se os dois operandos forem objetos, eles serão comparados como objetos, e o teste de igualdade será verdadeiro apenas se ambos fizerem referência ao mesmo objeto.
    • -
- -
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
- -

Compatilidade entre navegadores

- - - -

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

- -

Consulte também

- - - -
-
-
diff --git a/files/pt-br/web/javascript/reference/operators/operadores_logicos/index.html b/files/pt-br/web/javascript/reference/operators/operadores_logicos/index.html deleted file mode 100644 index e3a3ee6e8c..0000000000 --- a/files/pt-br/web/javascript/reference/operators/operadores_logicos/index.html +++ /dev/null @@ -1,343 +0,0 @@ ---- -title: Operadores Lógicos -slug: Web/JavaScript/Reference/Operators/Operadores_Logicos -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 ---- -
{{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:

- -
    -
  • null;
    • -
  • NaN;
    • -
  • 0;
    • -
  • string vazia (""); 
    • -
  • undefined.
    • -
- -

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:

- -
    -
  • falso && (qualquer coisa)  é avaliado como falso através de curto-circuito.
    • -
  • true || (qualquer coisa) é avaliado como verdadeiro através de curto-circuito.
    • -
- -

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/web/javascript/reference/operators/spread_operator/index.html b/files/pt-br/web/javascript/reference/operators/spread_operator/index.html deleted file mode 100644 index a877d131bc..0000000000 --- a/files/pt-br/web/javascript/reference/operators/spread_operator/index.html +++ /dev/null @@ -1,201 +0,0 @@ ---- -title: Spread operator -slug: Web/JavaScript/Reference/Operators/Spread_operator -tags: - - JavaScript - - Operador -translation_of: Web/JavaScript/Reference/Operators/Spread_syntax -translation_of_original: 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/web/javascript/reference/statements/async_function/index.html b/files/pt-br/web/javascript/reference/statements/async_function/index.html new file mode 100644 index 0000000000..808f0b0306 --- /dev/null +++ b/files/pt-br/web/javascript/reference/statements/async_function/index.html @@ -0,0 +1,149 @@ +--- +title: Funções assíncronas +slug: Web/JavaScript/Reference/Statements/funcoes_assincronas +tags: + - Função + - assíncrono +translation_of: Web/JavaScript/Reference/Statements/async_function +--- +
{{jsSidebar("Statements")}}
+ +

A declaração async function define uma função assíncrona, que retorna um objeto {{jsxref("Global_Objects/AsyncFunction","AsyncFunction")}}.

+ +
+

Você também pode definir funções assíncronas usando uma {{jsxref("Operators/async_function", "expressão async function")}}.

+
+ +

Sintaxe

+ +
async function nome([param[, param[, ... param]]]) {
+   instruções
+}
+
+ +
+
nome
+
O nome da função.
+
+ +
+
param
+
O nome de um parâmetro a ser passado para a função.
+
+ +
+
instruções
+
As instruções que compõem o corpo da função.
+
+ +

Descrição

+ +

Quando uma função assíncrona é chamada, ela retorna uma {{jsxref("Promise")}}. Quando a função assíncrona retorna um valor, a Promise será resolvida com o valor retornado. Quando a função assíncrona lança uma exceção ou algum valor, a Promise será rejeitada com o valor lançado.

+ +

Uma função assíncrona pode conter uma expressão {{jsxref("Operators/await", "await")}}, que pausa a execução da função assíncrona e espera pela resolução da Promise passada, e depois retoma a execução da função assíncrona e retorna o valor resolvido.

+ +
+

A proposta das funções async/await é de simplificar o uso de forma síncrona das Promises e executar alguns procedimentos em um grupo de Promises. Assim como Promises são similares a callbacks estruturados, funções async/await são similares à junção de generators com Promises.

+
+ +

Exemplos

+ +

Exemplo simples

+ +
function resolverDepoisDe2Segundos(x) {
+  return new Promise(resolve => {
+    setTimeout(() => {
+      resolve(x);
+    }, 2000);
+  });
+}
+
+async function adicionar1(x) {
+  var a = resolverDepoisDe2Segundos(20);
+  var b = resolverDepoisDe2Segundos(30);
+  return x + await a + await b;
+}
+
+adicionar1(10).then(v => {
+  console.log(v);  // exibe 60 depois de 2 segundos.
+});
+
+async function adicionar2(x) {
+  var a = await resolverDepoisDe2Segundos(20);
+  var b = await resolverDepoisDe2Segundos(30);
+  return x + a + b;
+}
+
+adicionar2(10).then(v => {
+  console.log(v);  // exibe 60 depois de 4 segundos.
+});
+
+ +

Reescrevendo uma cadeia de Promise com uma função async

+ +

Uma API que retorna uma {{jsxref("Promise")}} vai resultar em uma cadeia de Promises e separa a função em várias partes. Considere o seguinte código:

+ +
function pegarDadosProcessados(url) {
+  return baixarDados(url) // retorna uma Promise
+    .catch(e => {
+      return baixarDadosReservas(url) // retorna uma Promise
+    })
+    .then(v => {
+      return processarDadosNoWorker(v); // retorna uma Promise
+    });
+}
+
+ +

pode ser escrita em uma única função async desta forma:

+ +
async function pegarDadosProcessados(url) {
+  let v;
+  try {
+    v = await baixarDados(url);
+  } catch(e) {
+    v = await baixarDadosReservas(url);
+  }
+  return processarDadosNoWorker(v);
+}
+
+ +

Note que no exemplo acima não tem a instrução await na instrução do return, porque o valor retornado de uma função async é implícitamente passado por um {{jsxref("Promise.resolve")}}.

+ +

Especificações

+ + + + + + + + + + + + + + + + +
EspecificaçãoSituaçãoComentário
{{SpecName('ESDraft', '#sec-async-function-definitions', 'async function')}}{{Spec2('ESDraft')}}Definição inicial no ES2017.
+ +

Compatibilidade de browser

+ +
{{Compat("javascript.statements.async_function")}}
+ +
+ +

Notas específicas do Firefox

+ + + +

Veja também

+ + diff --git a/files/pt-br/web/javascript/reference/statements/default/index.html b/files/pt-br/web/javascript/reference/statements/default/index.html deleted file mode 100644 index 8e0fb07927..0000000000 --- a/files/pt-br/web/javascript/reference/statements/default/index.html +++ /dev/null @@ -1,187 +0,0 @@ ---- -title: default -slug: Web/JavaScript/Reference/Statements/default -tags: - - JavaScript - - Keyword - - Palavra-chave -translation_of: Web/JavaScript/Reference/Statements/switch -translation_of_original: 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:

- -
    -
  • Declaração {{jsxref("Statements/switch", "switch")}}
    • -
  • Declaração {{jsxref("Statements/export", "export")}}.
    • -
- -

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

- -
    -
  • {{jsxref("Statements/export", "export")}}
    • -
  • {{jsxref("Statements/switch", "switch")}}
    • -
diff --git a/files/pt-br/web/javascript/reference/statements/funcoes_assincronas/index.html b/files/pt-br/web/javascript/reference/statements/funcoes_assincronas/index.html deleted file mode 100644 index 808f0b0306..0000000000 --- a/files/pt-br/web/javascript/reference/statements/funcoes_assincronas/index.html +++ /dev/null @@ -1,149 +0,0 @@ ---- -title: Funções assíncronas -slug: Web/JavaScript/Reference/Statements/funcoes_assincronas -tags: - - Função - - assíncrono -translation_of: Web/JavaScript/Reference/Statements/async_function ---- -
{{jsSidebar("Statements")}}
- -

A declaração async function define uma função assíncrona, que retorna um objeto {{jsxref("Global_Objects/AsyncFunction","AsyncFunction")}}.

- -
-

Você também pode definir funções assíncronas usando uma {{jsxref("Operators/async_function", "expressão async function")}}.

-
- -

Sintaxe

- -
async function nome([param[, param[, ... param]]]) {
-   instruções
-}
-
- -
-
nome
-
O nome da função.
-
- -
-
param
-
O nome de um parâmetro a ser passado para a função.
-
- -
-
instruções
-
As instruções que compõem o corpo da função.
-
- -

Descrição

- -

Quando uma função assíncrona é chamada, ela retorna uma {{jsxref("Promise")}}. Quando a função assíncrona retorna um valor, a Promise será resolvida com o valor retornado. Quando a função assíncrona lança uma exceção ou algum valor, a Promise será rejeitada com o valor lançado.

- -

Uma função assíncrona pode conter uma expressão {{jsxref("Operators/await", "await")}}, que pausa a execução da função assíncrona e espera pela resolução da Promise passada, e depois retoma a execução da função assíncrona e retorna o valor resolvido.

- -
-

A proposta das funções async/await é de simplificar o uso de forma síncrona das Promises e executar alguns procedimentos em um grupo de Promises. Assim como Promises são similares a callbacks estruturados, funções async/await são similares à junção de generators com Promises.

-
- -

Exemplos

- -

Exemplo simples

- -
function resolverDepoisDe2Segundos(x) {
-  return new Promise(resolve => {
-    setTimeout(() => {
-      resolve(x);
-    }, 2000);
-  });
-}
-
-async function adicionar1(x) {
-  var a = resolverDepoisDe2Segundos(20);
-  var b = resolverDepoisDe2Segundos(30);
-  return x + await a + await b;
-}
-
-adicionar1(10).then(v => {
-  console.log(v);  // exibe 60 depois de 2 segundos.
-});
-
-async function adicionar2(x) {
-  var a = await resolverDepoisDe2Segundos(20);
-  var b = await resolverDepoisDe2Segundos(30);
-  return x + a + b;
-}
-
-adicionar2(10).then(v => {
-  console.log(v);  // exibe 60 depois de 4 segundos.
-});
-
- -

Reescrevendo uma cadeia de Promise com uma função async

- -

Uma API que retorna uma {{jsxref("Promise")}} vai resultar em uma cadeia de Promises e separa a função em várias partes. Considere o seguinte código:

- -
function pegarDadosProcessados(url) {
-  return baixarDados(url) // retorna uma Promise
-    .catch(e => {
-      return baixarDadosReservas(url) // retorna uma Promise
-    })
-    .then(v => {
-      return processarDadosNoWorker(v); // retorna uma Promise
-    });
-}
-
- -

pode ser escrita em uma única função async desta forma:

- -
async function pegarDadosProcessados(url) {
-  let v;
-  try {
-    v = await baixarDados(url);
-  } catch(e) {
-    v = await baixarDadosReservas(url);
-  }
-  return processarDadosNoWorker(v);
-}
-
- -

Note que no exemplo acima não tem a instrução await na instrução do return, porque o valor retornado de uma função async é implícitamente passado por um {{jsxref("Promise.resolve")}}.

- -

Especificações

- - - - - - - - - - - - - - - - -
EspecificaçãoSituaçãoComentário
{{SpecName('ESDraft', '#sec-async-function-definitions', 'async function')}}{{Spec2('ESDraft')}}Definição inicial no ES2017.
- -

Compatibilidade de browser

- -
{{Compat("javascript.statements.async_function")}}
- -
- -

Notas específicas do Firefox

- - - -

Veja também

- - diff --git a/files/pt-br/web/javascript/reference/template_literals/index.html b/files/pt-br/web/javascript/reference/template_literals/index.html new file mode 100644 index 0000000000..e2a11abfa4 --- /dev/null +++ b/files/pt-br/web/javascript/reference/template_literals/index.html @@ -0,0 +1,140 @@ +--- +title: Template strings +slug: Web/JavaScript/Reference/template_strings +translation_of: Web/JavaScript/Reference/Template_literals +--- +
{{JsSidebar("More")}}
+ +

Template Strings são strings que permitem expressões embutidas. Você pode utilizar string multi-linhas e interpolação de string com elas.

+ +

Basicamente é uma nova forma de criar strings e tornar o seu código um pouco mais legível.

+ +

Sintaxe

+ +
`corpo de texto`
+
+`texto linha 1
+ texto linha 2`
+
+`texto string ${expression} texto string`
+
+tag `texto string ${expression} texto string`
+
+ +

Descrição

+ +

Template strings são envolvidas por (acentos graves) (` `) em vez de aspas simples ou duplas. Template strings podem possuir placeholders. Estes são indicados por um cifrão seguido de chaves (${expression}). As expressões nos placeholders, bem como o texto em volta delas são passados a uma função. A função padrão apenas concatena as partes em uma string única. Se existir uma expressão precedendo a template string (função tag exemplo), a template string é definida como "tagged template string". No caso, a expressão tag (geralmente uma função) é chamada pela template string processada, que você pode manipular antes de produzir o resultado.

+ +
`\`` === '`' // --> true
+ +

Strings multi-linhas

+ +

Qualquer caracter de nova linha inserido no código é parte da template string. Utilizando strings normais, você teria de usar a síntaxe a seguir para obter strings multi-linhas:

+ +
console.log('texto string linha 1\n' +
+'texto string linha 2');
+// "texto string linha 1
+// texto string linha 2"
+ +

Para obter o mesmo efeito com strings multi-linhas, você agora pode escrever:

+ +
console.log(`texto string linha 1
+texto string linha 2`);
+// "texto string linha 1
+//  texto string linha 2"
+ +

Interpolação de Expressões

+ +

Para encapsular expressões dentro de strings, você precisava utilizar a seguinte sintaxe:

+ +
var a = 5;
+var b = 10;
+console.log('Quinze é ' + (a + b) + ' e\nnão ' + (2 * a + b) + '.');
+// "Quinze é 15 e
+// não 20."
+ +

Agora, com template strings, você pode utilizar as substituições sintáticas tornando o código mais legível:

+ +
var a = 5;
+var b = 10;
+console.log(`Quinze é ${a + b} e
+não ${2 * a + b}.`);
+// "Quinze é 15 e
+// não 20."
+ +

Tagged template strings

+ +

Uma forma mais avançada dos template string são os template strings com marcações ou tags, ou tagged template strings. Com eles, você tem a possibilidade de modificar a saída dos template strings usando uma função. O primeiro argumento contém um array de literais ("Hello" e "World" neste exemplo). Do segundo em diante e cada argumento subsequente contém valores previamente processados (algumas vezes chamados cooked) pelas expressões de substituição ("15" e "50" no caso do exemplo). No final, a função retorna a string ja manipulada:

+ +
var a = 5;
+var b = 10;
+
+function tag(strings, ...values) {
+  console.log(strings[0]); // "Hello "
+  console.log(strings[1]); // " world"
+  console.log(values[0]);  // 15
+  console.log(values[1]);  // 50
+
+  return "Bazinga!";
+}
+
+tag`Hello ${ a + b } world ${ a * b}`;
+// "Bazinga!"
+
+ +

Strings Raw

+ +

A propriedade especial raw, disponível no primeiro argumento da função da tagged template string acima, permite o acesso as strings de maneira pura (raw) exatamente como elas foram especificadas:

+ +
function tag(strings, ...values) {
+  return strings.raw[0];
+}
+
+tag`string text line 1 \n string text line 2`;
+// "string text line 1 \\n string text line 2"
+
+ +

Adicionalmente, o método {{jsxref("String.raw()")}} permite a criação de strings cruas, exatamente como as template functions e as concatenações deveram criar.

+ +
String.raw`Hi\n${2+3}!`; // "Hi\\n5!"
+ +

Especificações

+ + + + + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName('ES2015', '#sec-template-literals', 'Template Literals')}}{{Spec2('ES2015')}}Definição inicial. Definido em várias seções da especificação: Template Literals, Tagged Templates
{{SpecName('ESDraft', '#sec-template-literals', 'Template Literals')}}{{Spec2('ESDraft')}}Definido em várias seções da especificação: Template Literals, Tagged Templates
+ +

Compatibidade com navegadores

+ +
+ + +

{{Compat("javascript.grammar.template_literals")}}

+
+ +

Veja também

+ + diff --git a/files/pt-br/web/javascript/reference/template_strings/index.html b/files/pt-br/web/javascript/reference/template_strings/index.html deleted file mode 100644 index e2a11abfa4..0000000000 --- a/files/pt-br/web/javascript/reference/template_strings/index.html +++ /dev/null @@ -1,140 +0,0 @@ ---- -title: Template strings -slug: Web/JavaScript/Reference/template_strings -translation_of: Web/JavaScript/Reference/Template_literals ---- -
{{JsSidebar("More")}}
- -

Template Strings são strings que permitem expressões embutidas. Você pode utilizar string multi-linhas e interpolação de string com elas.

- -

Basicamente é uma nova forma de criar strings e tornar o seu código um pouco mais legível.

- -

Sintaxe

- -
`corpo de texto`
-
-`texto linha 1
- texto linha 2`
-
-`texto string ${expression} texto string`
-
-tag `texto string ${expression} texto string`
-
- -

Descrição

- -

Template strings são envolvidas por (acentos graves) (` `) em vez de aspas simples ou duplas. Template strings podem possuir placeholders. Estes são indicados por um cifrão seguido de chaves (${expression}). As expressões nos placeholders, bem como o texto em volta delas são passados a uma função. A função padrão apenas concatena as partes em uma string única. Se existir uma expressão precedendo a template string (função tag exemplo), a template string é definida como "tagged template string". No caso, a expressão tag (geralmente uma função) é chamada pela template string processada, que você pode manipular antes de produzir o resultado.

- -
`\`` === '`' // --> true
- -

Strings multi-linhas

- -

Qualquer caracter de nova linha inserido no código é parte da template string. Utilizando strings normais, você teria de usar a síntaxe a seguir para obter strings multi-linhas:

- -
console.log('texto string linha 1\n' +
-'texto string linha 2');
-// "texto string linha 1
-// texto string linha 2"
- -

Para obter o mesmo efeito com strings multi-linhas, você agora pode escrever:

- -
console.log(`texto string linha 1
-texto string linha 2`);
-// "texto string linha 1
-//  texto string linha 2"
- -

Interpolação de Expressões

- -

Para encapsular expressões dentro de strings, você precisava utilizar a seguinte sintaxe:

- -
var a = 5;
-var b = 10;
-console.log('Quinze é ' + (a + b) + ' e\nnão ' + (2 * a + b) + '.');
-// "Quinze é 15 e
-// não 20."
- -

Agora, com template strings, você pode utilizar as substituições sintáticas tornando o código mais legível:

- -
var a = 5;
-var b = 10;
-console.log(`Quinze é ${a + b} e
-não ${2 * a + b}.`);
-// "Quinze é 15 e
-// não 20."
- -

Tagged template strings

- -

Uma forma mais avançada dos template string são os template strings com marcações ou tags, ou tagged template strings. Com eles, você tem a possibilidade de modificar a saída dos template strings usando uma função. O primeiro argumento contém um array de literais ("Hello" e "World" neste exemplo). Do segundo em diante e cada argumento subsequente contém valores previamente processados (algumas vezes chamados cooked) pelas expressões de substituição ("15" e "50" no caso do exemplo). No final, a função retorna a string ja manipulada:

- -
var a = 5;
-var b = 10;
-
-function tag(strings, ...values) {
-  console.log(strings[0]); // "Hello "
-  console.log(strings[1]); // " world"
-  console.log(values[0]);  // 15
-  console.log(values[1]);  // 50
-
-  return "Bazinga!";
-}
-
-tag`Hello ${ a + b } world ${ a * b}`;
-// "Bazinga!"
-
- -

Strings Raw

- -

A propriedade especial raw, disponível no primeiro argumento da função da tagged template string acima, permite o acesso as strings de maneira pura (raw) exatamente como elas foram especificadas:

- -
function tag(strings, ...values) {
-  return strings.raw[0];
-}
-
-tag`string text line 1 \n string text line 2`;
-// "string text line 1 \\n string text line 2"
-
- -

Adicionalmente, o método {{jsxref("String.raw()")}} permite a criação de strings cruas, exatamente como as template functions e as concatenações deveram criar.

- -
String.raw`Hi\n${2+3}!`; // "Hi\\n5!"
- -

Especificações

- - - - - - - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{SpecName('ES2015', '#sec-template-literals', 'Template Literals')}}{{Spec2('ES2015')}}Definição inicial. Definido em várias seções da especificação: Template Literals, Tagged Templates
{{SpecName('ESDraft', '#sec-template-literals', 'Template Literals')}}{{Spec2('ESDraft')}}Definido em várias seções da especificação: Template Literals, Tagged Templates
- -

Compatibidade com navegadores

- -
- - -

{{Compat("javascript.grammar.template_literals")}}

-
- -

Veja também

- - diff --git a/files/pt-br/web/mathml/examples/index.html b/files/pt-br/web/mathml/examples/index.html new file mode 100644 index 0000000000..ac83b9e48a --- /dev/null +++ b/files/pt-br/web/mathml/examples/index.html @@ -0,0 +1,20 @@ +--- +title: Exemplos +slug: Web/MathML/Exemplos +translation_of: Web/MathML/Examples +--- +

Abaixo você irá encontrar alguns exemplos que irá ajudá-lo a entender como utilizar MathML para apresentar conceitos matemáticos complexos na Web.

+
+
+ Teorema de Pitágoras
+
+ Pequeno exemplo mostrando a demostração do Teorema de Pitágoras.
+
+ Solução da equação do segundo grau
+
+ Linhas gerais de como descobrir a solução para equações do segundo grau.
+
+ Testes para MathML
+
+ Grande conjunto de tests para MathML.
+
diff --git a/files/pt-br/web/mathml/exemplos/index.html b/files/pt-br/web/mathml/exemplos/index.html deleted file mode 100644 index ac83b9e48a..0000000000 --- a/files/pt-br/web/mathml/exemplos/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Exemplos -slug: Web/MathML/Exemplos -translation_of: Web/MathML/Examples ---- -

Abaixo você irá encontrar alguns exemplos que irá ajudá-lo a entender como utilizar MathML para apresentar conceitos matemáticos complexos na Web.

-
-
- Teorema de Pitágoras
-
- Pequeno exemplo mostrando a demostração do Teorema de Pitágoras.
-
- Solução da equação do segundo grau
-
- Linhas gerais de como descobrir a solução para equações do segundo grau.
-
- Testes para MathML
-
- Grande conjunto de tests para MathML.
-
diff --git a/files/pt-br/web/media/formats/index.html b/files/pt-br/web/media/formats/index.html new file mode 100644 index 0000000000..49c0b02fc1 --- /dev/null +++ b/files/pt-br/web/media/formats/index.html @@ -0,0 +1,526 @@ +--- +title: Formatos de mídia suportados por elementos HTML de áudio e vídeo +slug: Web/HTML/formatos_midia_suportados +tags: + - Audio + - Firefox + - HTML + - HTML5 + - Ogg + - Reference + - Video + - formatos de arquivos + - mp3 + - mp4 +translation_of: Web/Media/Formats +translation_of_original: Web/HTML/Supported_media_formats +--- +

Os elementos {{ HTMLElement("audio") }} e {{ HTMLElement("video") }} fornecem suporte para a reprodução de mídias de áudio e vídeo sem necessitar de plug-ins. Codecs de áudio e vídeo são usados para manipular arquivos de áudio e vídeo, diferentes codecs oferecem diferentes níveis de compressão e qualidade. Um formato do repositório é usado para armazenar e transmitir o codec de áudio e vídeo ( ambos juntos,  no caso de um vídeo com tilha sonora). Existem muitas combinações de codecs e formatos de containers, embora apenas alguns são relevantes para a internet.

+ +

Diferentes navegadores não dão suporte para os mesmos formatos de mídias em suas implementações de áudio e vídeo no HTML5, principalmente por causa de questões de patentes. A área de formatos de mídias na internet tem sofrido muito com leis de patentes em muitos países, incluindo os Estados Unidos e países da União Européia (as notas sobre patentes nesse artigo são fornecidas como estão e sem garantias). Este artigo discute a diferença de codecs e combinações de containers relevantes para a internet, incluindo suporte de navegadores em computadores ou outros tipos de dispositivos.
+
+ Para exibir um vídeo usando HTML5, que funcione nas últimas versões dos principais navegadores, você pode disponibilizar seu vídeo em dois formatos: WebM e MPEG H.264 AAC, usando o elemento {{HTMLElement("source")}} desta forma:

+ +
<video controls>
+  <source src="somevideo.webm" type="video/webm">
+  <source src="somevideo.mp4" type="video/mp4">
+  Desculpe; seu navegador não suporta vídeos HTML5 em WebM com VP8 ou MP4 com H.264.
+  <!-- Você pode embutir um Flash player aqui, para exibir seu vídeo mp4 em navegadores antigos -->
+</video>
+
+ +

WebM

+ +

O formato WebM é baseado em uma versão restrita do container Matroska. Ele sempre usa o codec de vídeo VP8 ou VP9 e o codec de áudio Vorbis ou Opus. WebM tem suporte nativo em navegadores de desktop e dispositivos móveis como Gecko (Firefox), Chrome e Opera, e o suporte para esse formato pode ser adicionado no Internet Explorer e Safari (mas não no iOS) por meio de um plug-in.
+
+ Declaração da Microsoft sobre o porquê o IE9 não possui suporte nativo  para o WebM.
+
+ O formato WebM, especificamente o codec de vídeo VP8, tinha sido acusado de violar patentes por um grupo de empresas respondendo um chamado da MPEG LA para a formação de um conjunto de patentes, mas a MPEG LA concordou em licenciar estas patentes para a Google sob uma "licença perpétua intransferível, livre de direitos autorais". Isto significa, efetivamente, que todas a patentes conhecidas do formato WebM são licenciadas para todos de graça.
+
+ Gecko reconhece os seguintes tipos de arquivos WebM:

+ +
+
video/webm
+
Um arquivo de mídia WebM contendo vídeo (e possivelmente áudio também).
+
audio/webm
+
Um arquivo de mídia WebM contendo apenas áudio.
+
+ +

Ogg Theora Vorbis

+ +

O formato de container Ogg com o codec de vídeo Theora e o codec de áudio Vorbis é suportados em desktops e dispositivos móveis Gecko (Firefox), Chrome, Opera e o suporte para esses formatos pode ser adicionado ao Safari (exceto iOS) instalando um plug-in. O Internet Explorer não possui suporte para esse formato.
+
+ WebM é geralmente mais utilizado que Ogg Theora Vorbis quando disponível, por que ele possui uma melhor qualidade de compressão e tem suporte na maioria dos navegadores. O formato Ogg, contudo, pode ser usado para navegadores mais antigos (por exemplo o Firefox 3.5/3.6 não tem suporte WebM, mas suporta Ogg).

+ +

A situação de patente do Theora é similar com a da WebM.

+ +

Você pode ler mais sobre criar méidia com Ogg lendo o Theora Cookbook.

+ +

Grecko reconhece os seguintes tipos MIME como arquivos Ogg:

+ +
+
audio/ogg
+
Um arquivo Ogg que contem apensa áudio
+
video/ogg
+
Um arquivo Ogg que contem vídeo (e possivelmente áudio)
+
application/ogg
+
Um arquivo Ogg com conteúdo não especificado. Usando um dos dois tipos de MIME, mas você pode usar ele se você não sabe qual é o conteúdo do arquivo.
+
+ +

Ogg Opus

+ +

O container Ogg  pode também conter um áudio codificado usando o codec Opus. Suporte para ele está disponível no Gecko 15.0 {{ geckoRelease("15.0") }} e versões superiores, em navegadores no desktop e dispositivos móveis.

+ +

Ogg FLAC

+ +

O contêiner Ogg pode também conter um áudio codificado usando o codec FLAC. Suporte para ele está disponível no Gecko 51.0 {{geckoRelease ("51.0")}} e versões superiores, somente no desktop.

+ +

MP4 H.264 (AAC ou MP3)

+ +

O formato MP4 com o codec de vídeo H.264 e codec de áudio  AAC tem suporte nativo para Internet Explorer, Safari e Chrome no desktop e dispositivos móveis, o Opera não possui suporte para este formato. IE e Chrome também possuem suporte para codec de áudio MP3 no container MP4, mas o Safari não tem suporte para isso. Firefox/Firefox para hardware do dispositivo pode manipular o perfil utilizado para codificar o MP4.

+ +
+

Nota: Codificação MP4 com um  perfil elevado não será executado em um hardware inferior, como o Firefox OS.

+
+ +

O formato de mídia MPEG é coberto por patentes, do qual não é livremente licenciado. Todas as licenças necessárias podem ser compradas da MPEG LA. Desde H.264 o formato não é livre de direitos autorais, é impróprio para a internet aberta, de acordo com a Mozilla [1, 2], Google [1, 2] e Opera. Contudo, desde que os formatos de direitos livres não são suportados pelo Internet Explorer e Safari, a Mozilla decidiu dar suporte para o formato, e a Google nunca cumpriu sua promessa de remover o suporte para o Chrome.

+ +

MP3

+ +

O formato de áudio MP3(.mp3 audio/mpeg; diferente do áudio MP3 no MP4 container acima) é suportado na tag <audio> no Firefox/Firefox para Android/Firefox OS quando o sistema operacional fornece um decodificador MP3, para Internet Explorer, Chrome e Safari.

+ +

WAVE PCM

+ +

O formato WAVE, com o codec de áudio PCM (codec WAVE "1") tem suporte nos navegadores Gecko(Firefox) e Safari no desktop e dispositivos móveis. Arquivos com o formato WAVE tipicamente tem a extensão ".wav".

+ +
Nota: Veja RFC 2361 para ver registros do codec WAVE
+ +

Gecko reconhece os seguintes tipos MIME em arquivos de áudio WAVE:

+ +
    +
  • audio/wave (preferido; não funciona no Chrome)
    • +
  • audio/wav
    • +
  • audio/x-wav
    • +
  • audio/x-pn-wav
    • +
+ +

Media Source Extensions (MSE)

+ +

Origem da extesão de mídia é um projeto de trabalho da W3C que planeja ampliar {{ domxref("HTMLMediaElement") }} para permitir que o JavaScript gere fluxo de mídia para reprodução. Permitindo que o JavaScript gere fluxos facilita uma variedade de uso, como o fluxo adaptado e o tempo de mudança de transmissão ao vivo. Isto é atualmente um suporte experimental no Firefox desktop, e em outros navegadores também.
+
+ Por exemplo,  você pode implementar MPEG-DASH usando JavaScript durante carregamento da decodificação para MSE.

+ +
+

Nota: Time Shifting é o processo de consumo de uma transmissão ao vivo, algum tempo após ter acontecido.

+
+ +

Compatibilidade de navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticasChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico3.0{{ CompatGeckoDesktop("1.9.1") }}9.010.503.1
<audio>: PCM em WAVE{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop("1.9.1") }}{{ CompatNo() }}10.503.1
<audio>: Vorbis em WebM{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop("2.0") }}{{ CompatNo() }}10.603.1 (deve ser instaldo separamente)
<audio>: Streaming Vorbis em WebM via Origem das extensões de mídia{{ CompatUnknown() }}{{ CompatGeckoDesktop("36.0") }} na edição  Nightly/Dev apenas{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
<audio>: Vorbis em Ogg{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop("1.9.1") }}{{ CompatNo() }}10.503.1 (deve ser instaldo separamente, e.g. XiphQT)
<audio>: MP3{{ CompatVersionUnknown() }} (Não em Chromium)Partial (Veja abaixo)9.0{{ CompatVersionUnknown() }}3.1
<audio>: MP3 em MP4 +

{{ CompatUnknown() }}

+ 		{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}
<audio>: AAC em MP4 +

{{ CompatVersionUnknown() }} (Main only) (Não em  Chromium)

+ 		+

Partial (Veja abaixo)

+ 		9.0{{ CompatVersionUnknown() }}3.1
<audio>: Opus em Ogg27.0{{ CompatGeckoDesktop("15.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
<video>: VP8 e Vorbis em WebM6.0{{ CompatGeckoDesktop("2.0") }}9.0 (deve ser instalado separadamente, e.g. WebM MF)10.603.1 (deve ser instaldo separamente, e.g. Perian)
<video>: VP9 e Opus em WebM29.0{{ CompatGeckoDesktop("28.0") }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}
<video>: Streaming VP9 e Opus/VP8 e Opus em WebM via Origem das extensões de mídia{{ CompatUnknown() }}{{ CompatGeckoDesktop("36.0") }} na edição  Nightly/Dev apenas{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
<video>:  Theora e Vorbis em Ogg{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop("1.9.1") }}{{ CompatNo() }}10.503.1 (deve ser instaldo separamente, e.g. XiphQT)
<video>:  H.264 e MP3 em MP4 +

{{ CompatVersionUnknown() }} (Not in Chromium)

+ 		Partial (Veja abaixo)9.0{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
<video>: H.264 e AAC em MP4 +

{{ CompatVersionUnknown() }} (Not in Chromium)

+ 		Partial (Veja abaixo)9.0{{ CompatVersionUnknown() }}3.1
outro formato{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}3.1 (executa todos os formatos via QuickTime)
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticasAndroidFirefox Mobile (Gecko)Firefox OS (Gecko)IE MobileOpera MobileOpera MiniSafari MobileChrome for Android
Suporte básico2.324.01.0.110.011.0Partial (Veja abaixo)3.229.0
<audio>: PCM em WAVE{{ CompatUnknown() }}24.01.0.1{{ CompatNo() }}{{ CompatNo() }}Partial (Veja abaixo)3.2{{ CompatUnknown() }}
<audio>: Vorbis em WebM{{ CompatUnknown() }}24.01.0.1{{ CompatNo() }}11.0Partial (Veja abaixo){{ CompatNo() }}{{ CompatUnknown() }}
<audio>: Streaming Vorbis em WebM via Origem das extensões de mídia{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
<audio>: Vorbis em Ogg{{ CompatUnknown() }}24.01.0.1{{ CompatNo() }}11.0Partial (Veja abaixo){{ CompatNo() }}{{ CompatUnknown() }}
<audio>: MP3{{ CompatUnknown() }}Partial (Veja abaixo)Partial (Veja abaixo)10.0{{ CompatUnknown() }}Partial (Veja abaixo)3.2{{ CompatUnknown() }}
<audio>: MP3 em MP4{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}
<audio>: AAC em MP4{{ CompatUnknown() }}Partial (Veja abaixo)Partial (Veja abaixo)10.0{{ CompatUnknown() }}Partial (Veja abaixo){{ CompatVersionUnknown() }}{{ CompatUnknown() }}
<audio>: Opus em Ogg{{ CompatNo() }}24.0{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}Partial (Veja abaixo){{ CompatNo() }}{{ CompatNo() }}
<video>:  VP8 e Vorbis em WebM2.324.01.0.1{{ CompatNo() }}16.0Partial (Veja abaixo){{ CompatNo() }}29.0
<video>: VP9 and Opus em WebM{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
<video>: Streaming VP9 and Opus/VP8 e Opus em WebM via Origem das extensões de mídia{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
<video>: Theora e Vorbis em Ogg{{ CompatNo() }}24.01.0.1{{ CompatNo() }}{{ CompatNo() }}Partial (Veja abaixo){{ CompatNo() }}{{ CompatNo() }}
<video>:  H.264 e MP3 em MP4Partial (Veja abaixo)24.0Partial (Veja abaixo)10.0Partial since 11.0, full since 16.0Partial (Veja abaixo){{ CompatVersionUnknown() }}29.0
<video>: H.264 e AAC em MP4Partial (Veja abaixo)24.0Partial (Veja abaixo)10.0Partial since 11.0, full since 16.0Partial (Veja abaixo)3.229.0
qualquer outro formato{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Notas:

+ +
    +
  • AAC é suportado apenas em containers MP4.
    • +
  • Opera Mini não suporta qualquer vídeo ou áudio, mas qualquer vídeo e áudio é passado para o dispositivo  executar se ele tiver suporte para este formato. Opera Mobile também faz isso com formatos não suportados.
    • +
  • Para o navegador padrão do Android executar vídeo H.264, você precisa fazer mais etapas, como explica Peter Gasston.
    • +
  • No Firefox OS 1.0.1, ao detectar suporte para diferentes formatos  <video> HTMLMediaElement.prototype.canPlayType reporta erroneamente  true para vídeos H.264 considerando o fato que o navegador não tem suporte para H.264. No Firefox OS 1.1 este problema foi resolvido.
    • +
  • Para evitar questões de patentes, o suporte para MPEG 4, H.264, MP3 and AAC não são construídas diretamente no Firefox desktop e em dispositivos móveis (Android e Firefox OS). Ao invés disso ele conta com o apoio do sistema operacional ou hardware (o hardware também precisa ser capaz de suportar o perfil usado para codificar o vídeo, no caso do MP4). Firefox desktop suporta estes formatos nas seguintes plataformas:
    • +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PlataformaVersão Firefox
Windows Vista+22.0+
Android20.0+
Firefox OS15.0+
Linux +

26.0+ (depende do codec GStreamer)

+
OS X 10.7+35.0+
+ + + +

Veja também

+ + diff --git a/files/pt-br/web/performance/caminho_de_renderizacao_critico/index.html b/files/pt-br/web/performance/caminho_de_renderizacao_critico/index.html deleted file mode 100644 index 63746f132c..0000000000 --- a/files/pt-br/web/performance/caminho_de_renderizacao_critico/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: Caminho de renderização crítico -slug: Web/Performance/caminho_de_renderizacao_critico -translation_of: Web/Performance/Critical_rendering_path ---- -

{{draft}}

- -

O caminho de renderização crítico é a sequência de passos que o navegador passa para converter HTML, CSS e JavaScript em pixels na tela. Otimizando o caminho de renderização crítico melhora a performance.The critical rendering path includes the Document Object Model (DOM), CSS Object Model (CSSOM), render tree and layout.

- -

The document object model is created as the HTML is parsed. The HTML may request JavaScript, which may, in turn, alter the DOM. The HTML includes or makes requests for styles, which in turn builds the CSS object model. The browser engine combines the two to create the Render Tree. Layout determines the size and location of everything on the page. Once layout is determined, pixels are painted to the screen.

- -

Optimizing the critical rendering path improves the time to first render. Understanding and optimizing the critical rendering path is important to ensure reflows and repaints can happen at 60 frames per second, to ensure performant user interactions and avoid jank.

- -

Understanding CRP

- -

Web performance includes the server requests and responses, loading, scripting, rendering, layout, and the painting of the pixels to the screen.

- -

A request for a web page or app starts with an HTML request. The server returns the HTML - response headers and data. The browser then begins parsing the HTML, converting the received bytes to the DOM tree. The browser initiates requests every time it finds links to external resources, be they stylesheets, scripts, or embedded image references. Some requests are blocking, which means the parsing of the rest of the HTML is halted until the imported asset is handled. The browser continues to parse the HTML making requests and building the DOM, until it gets to the end, at which point it constructs the CSS object model. With the DOM and CSSOM complete, the browser builds the render tree, computing the styles for all the visible content. After the render tree is complete, layout occurs, defining the location and size of all the render tree elements. Once complete, the page is rendered, or 'painted' on the screen.

- -

Document Object Model

- -

DOM construction is incremental. The HTML response turns into tokens which turns into nodes which turn into the DOM Tree. A single DOM node starts with a startTag token and ends with an endTag token. Nodes contain all relevant information about the HTML element. The information is described using tokens. Nodes are connected into a DOM tree based on token hierarchy. If another set of startTag and endTag tokens come between a set of startTag and endTags, you have a node inside a node, which is how we define the hierarchy of the DOM tree.

- -

The greater the number of nodes, the longer the following events in the critical rendering path will take. Measure! A few extra nodes won't make a difference, but divitis can lead to jank.

- -

CSS Object Model

- -

The DOM contains all the content of the page. The CSSOM contains all the styles of the page; information on how to style that DOM. CSSOM is similar the the DOM, but different. While the DOM construction is incremental, CSSOM is not. CSS is render blocking: the browser blocks page rendering until it receives and processes all of the CSS. CSS is render blocking because rules can be overwritten, so the content can't be rendered until the CSSOM is complete.

- -

CSS has its own set of rules for identifying valid tokens. Remember the C in CSS stands for 'Cascade'. CSS rules cascade down. As the parser converts tokens to nodes, with descendants of nodes inheriting styles. The incremental processing features don't apply to CSS like they do with HTML, because subsequent rules may override previous ones. The CSS object model gets built as the CSS is parsed, but can't be used to build the render tree until it is completely parsed because styles that are going to be overwritten with later parsing should not be rendered to the screen.

- -

In terms of selector performance, less specific selectors are faster than more specific ones. For example, .foo {} is faster than .bar .foo {} because when the browser finds .foo, in the second scenario, it has to walk up the DOM to check if .foo has an ancestor .bar. The more specific tag requires more work from the browser, but this penalty is not likely worth optimizing.

- -

If you measure the time it takes to parse CSS, you'll be amazed at how fast browsers truly are. The more specific rule is more expensive because it has to traverse more nodes in the DOM tree - but that extra expense is generally minimal. Measure first. Optimize as needed. Specificity is likely not your low hanging fruit. When it comes to CSS, selector performance optimization, improvements will only be in microseconds. There are other ways to optimize CSS, such as minification, and separating defered CSS into non-blocking requests by using media queries.

- -

Render Tree

- -

The render tree captures both the content and the styles: the DOM and CSSOM trees are combined into the render tree. To construct the render tree, the browser checks every node, starting from root of the DOM tree, and determine which CSS rules are attached.

- -

The render tree only captures visible content. The head section (generally) doesn't contain any visible information, and is therefore not included in the render tree. If there's a display: none; set on an element, neither it, nor any of its descendants, are in the render tree.

- -

Layout

- -

Once the render tree is built, layout becomes possible. Layout is dependent on the size of screen. The layout step determines where and how the elements are positioned on the page, determining the width and height of each element, and where they are in relation to each other.

- -

What is the width of an element? Block level elements, by definition, have a default width of 100% of the width of their parent. An element with a width of 50%, will be half of the width of its parent. Unless otherwise defined, the body has a width of 100%, meaning it will be 100% of the width of the viewport. This width of the device impacts layout.

- -

The viewport meta tag defines the width of the layout viewport, impacting the layout. Without it, the browser uses the default viewport width, which on by-default full screen browsers is generally 960px. On by-default full screen browsers, like your phone's browser, by setting <meta name="viewport" content="width=device-width">, the width will be the width of the device instead of the default viewport width. The device-width changes when a user rotates their phone between landscape and portrait mode. Layout happens every time a device is rotated or browser is otherwise resized.

- -

Layout performance is impacted by the DOM -- the greater the number of nodes, the longer layout takes. Layout can become a bottleneck, leading to jank if required during scrolling or other animations. While a 20ms layout on load or orientation change may be fine, it will lead to jank on animation or scroll. Any time the render tree is modified, such as by added nodes, altered content, or updated box model styles on a node, layout occurs.

- -

To reduce the frequency and duration of layout events, batch updates and avoid animating box model properties.

- -

Paint

- -

The last step in painting the pixels to the screen. Once the render tree is created and layout occurs, the pixels can be painted to the screen. Onload, the entire screen is painted. After that, only impacted areas of the screen will be repainted, as browsers are optimized to repaint the minimum area required. Paint time depends on what kind of updates are being applied to the render tree. While painting is a very fast process, and therefore likely not the most impactful place to focus on in improving performance, it is important to remember to allow for both layout and re-paint times when measuring how long an animation frame may take. The styles applied to each node increase the paint time, but removing style that increases the paint by 0.001ms may not give you the biggest bang for your optimization buck. Remember to measure first. Then you can determine whether it should be an optimization priority.

- -

Optimizing for CRP

- -

Improve page load speed by prioritizing which resources get loaded, controlling the order in which they area loaded, and reducing the file sizes of those resources. Performance tips include 1) minimizing the number of critical resources by deferring their download, marking them as async, or eliminating them altogether, 2) optimizing the number of requests required along with the file size of each request, and 3) optimizing the order in which critical resources are loaded by prioritizing the downloading critical assets, shorten the critical path length.

diff --git a/files/pt-br/web/performance/critical_rendering_path/index.html b/files/pt-br/web/performance/critical_rendering_path/index.html new file mode 100644 index 0000000000..63746f132c --- /dev/null +++ b/files/pt-br/web/performance/critical_rendering_path/index.html @@ -0,0 +1,60 @@ +--- +title: Caminho de renderização crítico +slug: Web/Performance/caminho_de_renderizacao_critico +translation_of: Web/Performance/Critical_rendering_path +--- +

{{draft}}

+ +

O caminho de renderização crítico é a sequência de passos que o navegador passa para converter HTML, CSS e JavaScript em pixels na tela. Otimizando o caminho de renderização crítico melhora a performance.The critical rendering path includes the Document Object Model (DOM), CSS Object Model (CSSOM), render tree and layout.

+ +

The document object model is created as the HTML is parsed. The HTML may request JavaScript, which may, in turn, alter the DOM. The HTML includes or makes requests for styles, which in turn builds the CSS object model. The browser engine combines the two to create the Render Tree. Layout determines the size and location of everything on the page. Once layout is determined, pixels are painted to the screen.

+ +

Optimizing the critical rendering path improves the time to first render. Understanding and optimizing the critical rendering path is important to ensure reflows and repaints can happen at 60 frames per second, to ensure performant user interactions and avoid jank.

+ +

Understanding CRP

+ +

Web performance includes the server requests and responses, loading, scripting, rendering, layout, and the painting of the pixels to the screen.

+ +

A request for a web page or app starts with an HTML request. The server returns the HTML - response headers and data. The browser then begins parsing the HTML, converting the received bytes to the DOM tree. The browser initiates requests every time it finds links to external resources, be they stylesheets, scripts, or embedded image references. Some requests are blocking, which means the parsing of the rest of the HTML is halted until the imported asset is handled. The browser continues to parse the HTML making requests and building the DOM, until it gets to the end, at which point it constructs the CSS object model. With the DOM and CSSOM complete, the browser builds the render tree, computing the styles for all the visible content. After the render tree is complete, layout occurs, defining the location and size of all the render tree elements. Once complete, the page is rendered, or 'painted' on the screen.

+ +

Document Object Model

+ +

DOM construction is incremental. The HTML response turns into tokens which turns into nodes which turn into the DOM Tree. A single DOM node starts with a startTag token and ends with an endTag token. Nodes contain all relevant information about the HTML element. The information is described using tokens. Nodes are connected into a DOM tree based on token hierarchy. If another set of startTag and endTag tokens come between a set of startTag and endTags, you have a node inside a node, which is how we define the hierarchy of the DOM tree.

+ +

The greater the number of nodes, the longer the following events in the critical rendering path will take. Measure! A few extra nodes won't make a difference, but divitis can lead to jank.

+ +

CSS Object Model

+ +

The DOM contains all the content of the page. The CSSOM contains all the styles of the page; information on how to style that DOM. CSSOM is similar the the DOM, but different. While the DOM construction is incremental, CSSOM is not. CSS is render blocking: the browser blocks page rendering until it receives and processes all of the CSS. CSS is render blocking because rules can be overwritten, so the content can't be rendered until the CSSOM is complete.

+ +

CSS has its own set of rules for identifying valid tokens. Remember the C in CSS stands for 'Cascade'. CSS rules cascade down. As the parser converts tokens to nodes, with descendants of nodes inheriting styles. The incremental processing features don't apply to CSS like they do with HTML, because subsequent rules may override previous ones. The CSS object model gets built as the CSS is parsed, but can't be used to build the render tree until it is completely parsed because styles that are going to be overwritten with later parsing should not be rendered to the screen.

+ +

In terms of selector performance, less specific selectors are faster than more specific ones. For example, .foo {} is faster than .bar .foo {} because when the browser finds .foo, in the second scenario, it has to walk up the DOM to check if .foo has an ancestor .bar. The more specific tag requires more work from the browser, but this penalty is not likely worth optimizing.

+ +

If you measure the time it takes to parse CSS, you'll be amazed at how fast browsers truly are. The more specific rule is more expensive because it has to traverse more nodes in the DOM tree - but that extra expense is generally minimal. Measure first. Optimize as needed. Specificity is likely not your low hanging fruit. When it comes to CSS, selector performance optimization, improvements will only be in microseconds. There are other ways to optimize CSS, such as minification, and separating defered CSS into non-blocking requests by using media queries.

+ +

Render Tree

+ +

The render tree captures both the content and the styles: the DOM and CSSOM trees are combined into the render tree. To construct the render tree, the browser checks every node, starting from root of the DOM tree, and determine which CSS rules are attached.

+ +

The render tree only captures visible content. The head section (generally) doesn't contain any visible information, and is therefore not included in the render tree. If there's a display: none; set on an element, neither it, nor any of its descendants, are in the render tree.

+ +

Layout

+ +

Once the render tree is built, layout becomes possible. Layout is dependent on the size of screen. The layout step determines where and how the elements are positioned on the page, determining the width and height of each element, and where they are in relation to each other.

+ +

What is the width of an element? Block level elements, by definition, have a default width of 100% of the width of their parent. An element with a width of 50%, will be half of the width of its parent. Unless otherwise defined, the body has a width of 100%, meaning it will be 100% of the width of the viewport. This width of the device impacts layout.

+ +

The viewport meta tag defines the width of the layout viewport, impacting the layout. Without it, the browser uses the default viewport width, which on by-default full screen browsers is generally 960px. On by-default full screen browsers, like your phone's browser, by setting <meta name="viewport" content="width=device-width">, the width will be the width of the device instead of the default viewport width. The device-width changes when a user rotates their phone between landscape and portrait mode. Layout happens every time a device is rotated or browser is otherwise resized.

+ +

Layout performance is impacted by the DOM -- the greater the number of nodes, the longer layout takes. Layout can become a bottleneck, leading to jank if required during scrolling or other animations. While a 20ms layout on load or orientation change may be fine, it will lead to jank on animation or scroll. Any time the render tree is modified, such as by added nodes, altered content, or updated box model styles on a node, layout occurs.

+ +

To reduce the frequency and duration of layout events, batch updates and avoid animating box model properties.

+ +

Paint

+ +

The last step in painting the pixels to the screen. Once the render tree is created and layout occurs, the pixels can be painted to the screen. Onload, the entire screen is painted. After that, only impacted areas of the screen will be repainted, as browsers are optimized to repaint the minimum area required. Paint time depends on what kind of updates are being applied to the render tree. While painting is a very fast process, and therefore likely not the most impactful place to focus on in improving performance, it is important to remember to allow for both layout and re-paint times when measuring how long an animation frame may take. The styles applied to each node increase the paint time, but removing style that increases the paint by 0.001ms may not give you the biggest bang for your optimization buck. Remember to measure first. Then you can determine whether it should be an optimization priority.

+ +

Optimizing for CRP

+ +

Improve page load speed by prioritizing which resources get loaded, controlling the order in which they area loaded, and reducing the file sizes of those resources. Performance tips include 1) minimizing the number of critical resources by deferring their download, marking them as async, or eliminating them altogether, 2) optimizing the number of requests required along with the file size of each request, and 3) optimizing the order in which critical resources are loaded by prioritizing the downloading critical assets, shorten the critical path length.

diff --git a/files/pt-br/web/progressive_web_apps/introduction/index.html b/files/pt-br/web/progressive_web_apps/introduction/index.html new file mode 100644 index 0000000000..483ea5cfc0 --- /dev/null +++ b/files/pt-br/web/progressive_web_apps/introduction/index.html @@ -0,0 +1,90 @@ +--- +title: Introdução a progressive web apps +slug: Web/Progressive_web_apps/Introdução +translation_of: Web/Progressive_web_apps/Introduction +--- +
{{NextMenu("Web/Apps/Progressive/App_structure", "Web/Apps/Progressive")}}
+ +

Este artigo fornece uma intrução as Progressive Web Apps (PWAs), explicando o que são e quais vantagens elas trazem em relação ao desenvolvimento de aplicações web comuns.

+ +

O que é uma Progressive Web App?

+ +

As PWAs são aplicativos web desenvolvidos usando várias tecnologias e padrões específicos para permitir que eles aproveitem os recursos da web e dos aplicativos nativos.

+ +

Por exemplo, as aplicações web são mais detectáveis - é muito mais fácil e rápido visitar um site do que instalar um aplicativo, e você também pode compartilhar aplicações web por meio de um link.

+ +

Por outro lado, os aplicativos nativos são melhor integrados ao sistema operacional e, portanto, oferecem uma experiência melhor para os usuários. Você pode instalar um aplicativo nativo para funcionar off-line e os usuários adoram tocar nos ícones da tela inicial para acessar facilmente os aplicativos favoritos, em vez de acessá-lo usando um navegador.

+ +

As PWAs nos dão a capacidade de criar aplicações web com essas mesmas vantagens.

+ +

Isso não é um conceito novo - essas ideias foram pensadas muitas vezes na plataforma web com várias abordagens no passado. O aprimoramento progressivo e o design responsivo já nos permitem criar websites otimizados para dispositivos móveis. Trabalhar offline e instalar aplicativos foi possível no ecossistema Firefox OS há alguns anos.

+ +

PWAs, no entanto, fornecem tudo isso e muito mais, sem se livrar de qualquer um dos recursos existentes que tornam a web excelente.

+ +

O que torna uma aplicação web em uma PWA?

+ +

Como sugerimos acima, as PWAs não são criadas com uma única tecnologia. Elas representam uma nova filosofia para a criação de aplicações Web, envolvendo alguns padrões específicos, APIs e outros recursos. Não é tão óbvio saber se uma aplicação web é uma PWA ou não, à primeira vista. Uma aplicação Web pode ser considerada uma PWA quando atende a determinados requisitos ou implementa um conjunto de recursos específicos: funciona offline, é instalável, é fácil de sincronizar, pode enviar notificações push etc.

+ +

Além disso, existem ferramentas para medir a integridade de uma aplicação Web em porcentagens. (Lighthouse é atualmente o mais popular.) Ao implementar várias vantagens tecnológicas, podemos fazer uma aplicação mais progressiva, terminando assim com uma pontuação mais alta no Lighthouse. Mas este é apenas um indicador aproximado.

+ +

Existem alguns princípios que uma aplicação Web deve tentar seguir para serem identificadas como uma PWA. Deveria ser:

+ +
    +
  • Detectável, o seu conteúdo deve poder ser encontrado por mecanismos de busca na Web.
    • +
  • Instalável, deve poder ser acessada a partir da tela inicial do dispositivo.
    • +
  • Linkavel, você deve poder compartilhar simplesmente enviando a sua URL. 
    • +
  • Independente de rede, deve funcionar offline e ou com uma conexão fraca.
    • +
  • Progressiva, deve funcionar em um nível básico e navegadores antigos e em um nível completo nos mais modernos.
    • +
  • Re-engajável, deve ser possível enviar notificações.
    • +
  • Responsiva, deve ser utilizável em qualquer dispositivo com uma tela e em navegadores — telefones móveis, tablets, laptops, TVs, geladeiras, etc.
    • +
  • Segura, a conexão deve ser segura contra terceiros que tentarem acessar dados confidenciais.
    • +
+ +

Is it worth doing all that?

+ +

Absolutely! With a relatively small amount of effort required to implement the core PWA features, the benefits are huge. For example:

+ +
    +
  • A decrease in loading times after the app has been installed, thanks to caching with Service Workers, along with saving precious bandwidth and time.
    • +
  • The ability to update only the content that has changed when an app update is available. In contrast, with a native app, even the slightest modification can force the user to download the entire application again.
    • +
  • A look and feel that is more integrated with the native platform — app icons on the homescreen, apps that run fullscreen, etc.
    • +
  • Re-engaging with users via system notifications and push messages, leading to more engaged users and better conversion rates.
    • +
+ +

There are many success stories of companies trying the PWA route, opting for an enhanced website experience rather than a native app, and seeing significant measurable benefits as a result. The website PWA Stats shares many case studies which indiciate these benefits.

+ +

The best known success story is probably Flipkart Lite — India's largest e-commerce site rebuilt as a progressive web app in 2015, which resulted in 70% increase in conversions. The AliExpress PWA has also seen much better results than the web or native app, with a 104% increase in conversion rates for new users. Given their profit increase, and the relatively low amount of work required for the conversion to PWAs, the advantage is clear.

+ +

Early stage emerging startups like couponmoto have also started using progressive web apps to drive more consumer engagement, showing that they can help small as well as big companies to (re-)engage users more effectively.

+ +

You can check the list at pwa.rocks for more examples. Particularly worth mentioning is the hnpwa.com page — this lists an example implementation of the Hacker News website (instead of the usual TodoMVC app), in which you can see the use of various front-end frameworks.

+ +

You can even generate PWAs online using the PWABuilder website.

+ +

For service worker- and push- specific information, be sure to check The Service Worker Cookbook, a collection of recipes using service workers in modern sites.

+ +

It's well worth trying out a PWA approach, so you can see for yourself if it works for your app.

+ +

Browser support

+ +

As mentioned before, PWAs don't depend on a single API, but rather using various technologies to achieve the goal of delivering the best web experience possible.

+ +

The key ingredient required for PWAs is service worker support. Thankfully service workers are now supported on all major browsers on desktop and mobile.

+ +

Other features such as Web App Manifest, Push, Notifications, and Add to Home Screen functionality have wide support too. Currently Safari has limited support for Web App Manifest and Add to Home Screen and no support for web push notifications. However, other major browsers support all these features.

+ +

Some of these APIs are experimental, with the documentation still in draft, but seeing success stories like those of Flipkart and AliExpress should convince you to try and implement some of the PWA features in your web app already.

+ +

Above all you should follow the progressive enhancement rule — use the technologies that provide such enhancements only where they are supported, but still offer the basic functionality of your app if it isn't. This way everybody will be able to use it, but those with modern browsers will benefit from PWA features even more.

+ +

An example application

+ +

In this series of articles we will examine the source code of a super simple website that lists information about games submitted to the A-Frame category in the js13kGames 2017 competition. You don't have to think about what the actual content on the website is — the main point is to learn how to use PWA features in your own projects.

+ +

You can find the online version at mdn.github.io/pwa-examples/js13kpwa (also see the source code), which we will be carefully explaining in the next few articles.

+ +

Now, let's move to the second part of this series, where we’ll be looking at the structure of our example app.

+ +

{{NextMenu("Web/Apps/Progressive/App_structure", "Web/Apps/Progressive")}}

+ +
{{QuickLinksWithSubpages("/en-US/docs/Web/Apps/Progressive/")}}
diff --git "a/files/pt-br/web/progressive_web_apps/introdu\303\247\303\243o/index.html" "b/files/pt-br/web/progressive_web_apps/introdu\303\247\303\243o/index.html" deleted file mode 100644 index 483ea5cfc0..0000000000 --- "a/files/pt-br/web/progressive_web_apps/introdu\303\247\303\243o/index.html" +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: Introdução a progressive web apps -slug: Web/Progressive_web_apps/Introdução -translation_of: Web/Progressive_web_apps/Introduction ---- -
{{NextMenu("Web/Apps/Progressive/App_structure", "Web/Apps/Progressive")}}
- -

Este artigo fornece uma intrução as Progressive Web Apps (PWAs), explicando o que são e quais vantagens elas trazem em relação ao desenvolvimento de aplicações web comuns.

- -

O que é uma Progressive Web App?

- -

As PWAs são aplicativos web desenvolvidos usando várias tecnologias e padrões específicos para permitir que eles aproveitem os recursos da web e dos aplicativos nativos.

- -

Por exemplo, as aplicações web são mais detectáveis - é muito mais fácil e rápido visitar um site do que instalar um aplicativo, e você também pode compartilhar aplicações web por meio de um link.

- -

Por outro lado, os aplicativos nativos são melhor integrados ao sistema operacional e, portanto, oferecem uma experiência melhor para os usuários. Você pode instalar um aplicativo nativo para funcionar off-line e os usuários adoram tocar nos ícones da tela inicial para acessar facilmente os aplicativos favoritos, em vez de acessá-lo usando um navegador.

- -

As PWAs nos dão a capacidade de criar aplicações web com essas mesmas vantagens.

- -

Isso não é um conceito novo - essas ideias foram pensadas muitas vezes na plataforma web com várias abordagens no passado. O aprimoramento progressivo e o design responsivo já nos permitem criar websites otimizados para dispositivos móveis. Trabalhar offline e instalar aplicativos foi possível no ecossistema Firefox OS há alguns anos.

- -

PWAs, no entanto, fornecem tudo isso e muito mais, sem se livrar de qualquer um dos recursos existentes que tornam a web excelente.

- -

O que torna uma aplicação web em uma PWA?

- -

Como sugerimos acima, as PWAs não são criadas com uma única tecnologia. Elas representam uma nova filosofia para a criação de aplicações Web, envolvendo alguns padrões específicos, APIs e outros recursos. Não é tão óbvio saber se uma aplicação web é uma PWA ou não, à primeira vista. Uma aplicação Web pode ser considerada uma PWA quando atende a determinados requisitos ou implementa um conjunto de recursos específicos: funciona offline, é instalável, é fácil de sincronizar, pode enviar notificações push etc.

- -

Além disso, existem ferramentas para medir a integridade de uma aplicação Web em porcentagens. (Lighthouse é atualmente o mais popular.) Ao implementar várias vantagens tecnológicas, podemos fazer uma aplicação mais progressiva, terminando assim com uma pontuação mais alta no Lighthouse. Mas este é apenas um indicador aproximado.

- -

Existem alguns princípios que uma aplicação Web deve tentar seguir para serem identificadas como uma PWA. Deveria ser:

- -
    -
  • Detectável, o seu conteúdo deve poder ser encontrado por mecanismos de busca na Web.
    • -
  • Instalável, deve poder ser acessada a partir da tela inicial do dispositivo.
    • -
  • Linkavel, você deve poder compartilhar simplesmente enviando a sua URL. 
    • -
  • Independente de rede, deve funcionar offline e ou com uma conexão fraca.
    • -
  • Progressiva, deve funcionar em um nível básico e navegadores antigos e em um nível completo nos mais modernos.
    • -
  • Re-engajável, deve ser possível enviar notificações.
    • -
  • Responsiva, deve ser utilizável em qualquer dispositivo com uma tela e em navegadores — telefones móveis, tablets, laptops, TVs, geladeiras, etc.
    • -
  • Segura, a conexão deve ser segura contra terceiros que tentarem acessar dados confidenciais.
    • -
- -

Is it worth doing all that?

- -

Absolutely! With a relatively small amount of effort required to implement the core PWA features, the benefits are huge. For example:

- -
    -
  • A decrease in loading times after the app has been installed, thanks to caching with Service Workers, along with saving precious bandwidth and time.
    • -
  • The ability to update only the content that has changed when an app update is available. In contrast, with a native app, even the slightest modification can force the user to download the entire application again.
    • -
  • A look and feel that is more integrated with the native platform — app icons on the homescreen, apps that run fullscreen, etc.
    • -
  • Re-engaging with users via system notifications and push messages, leading to more engaged users and better conversion rates.
    • -
- -

There are many success stories of companies trying the PWA route, opting for an enhanced website experience rather than a native app, and seeing significant measurable benefits as a result. The website PWA Stats shares many case studies which indiciate these benefits.

- -

The best known success story is probably Flipkart Lite — India's largest e-commerce site rebuilt as a progressive web app in 2015, which resulted in 70% increase in conversions. The AliExpress PWA has also seen much better results than the web or native app, with a 104% increase in conversion rates for new users. Given their profit increase, and the relatively low amount of work required for the conversion to PWAs, the advantage is clear.

- -

Early stage emerging startups like couponmoto have also started using progressive web apps to drive more consumer engagement, showing that they can help small as well as big companies to (re-)engage users more effectively.

- -

You can check the list at pwa.rocks for more examples. Particularly worth mentioning is the hnpwa.com page — this lists an example implementation of the Hacker News website (instead of the usual TodoMVC app), in which you can see the use of various front-end frameworks.

- -

You can even generate PWAs online using the PWABuilder website.

- -

For service worker- and push- specific information, be sure to check The Service Worker Cookbook, a collection of recipes using service workers in modern sites.

- -

It's well worth trying out a PWA approach, so you can see for yourself if it works for your app.

- -

Browser support

- -

As mentioned before, PWAs don't depend on a single API, but rather using various technologies to achieve the goal of delivering the best web experience possible.

- -

The key ingredient required for PWAs is service worker support. Thankfully service workers are now supported on all major browsers on desktop and mobile.

- -

Other features such as Web App Manifest, Push, Notifications, and Add to Home Screen functionality have wide support too. Currently Safari has limited support for Web App Manifest and Add to Home Screen and no support for web push notifications. However, other major browsers support all these features.

- -

Some of these APIs are experimental, with the documentation still in draft, but seeing success stories like those of Flipkart and AliExpress should convince you to try and implement some of the PWA features in your web app already.

- -

Above all you should follow the progressive enhancement rule — use the technologies that provide such enhancements only where they are supported, but still offer the basic functionality of your app if it isn't. This way everybody will be able to use it, but those with modern browsers will benefit from PWA features even more.

- -

An example application

- -

In this series of articles we will examine the source code of a super simple website that lists information about games submitted to the A-Frame category in the js13kGames 2017 competition. You don't have to think about what the actual content on the website is — the main point is to learn how to use PWA features in your own projects.

- -

You can find the online version at mdn.github.io/pwa-examples/js13kpwa (also see the source code), which we will be carefully explaining in the next few articles.

- -

Now, let's move to the second part of this series, where we’ll be looking at the structure of our example app.

- -

{{NextMenu("Web/Apps/Progressive/App_structure", "Web/Apps/Progressive")}}

- -
{{QuickLinksWithSubpages("/en-US/docs/Web/Apps/Progressive/")}}
diff --git "a/files/pt-br/web/security/b\303\241sico_de_seguran\303\247a_da_informa\303\247\303\243o/index.html" "b/files/pt-br/web/security/b\303\241sico_de_seguran\303\247a_da_informa\303\247\303\243o/index.html" deleted file mode 100644 index 9508b0afdb..0000000000 --- "a/files/pt-br/web/security/b\303\241sico_de_seguran\303\247a_da_informa\303\247\303\243o/index.html" +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: Básico de Segurança da Informação -slug: Web/Security/Básico_de_Segurança_da_Informação -tags: - - Iniciante - - Segurança -translation_of: Web/Security/Information_Security_Basics ---- -

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/web/svg/intensivo_de_namespaces/index.html b/files/pt-br/web/svg/intensivo_de_namespaces/index.html deleted file mode 100644 index 35f50be610..0000000000 --- a/files/pt-br/web/svg/intensivo_de_namespaces/index.html +++ /dev/null @@ -1,186 +0,0 @@ ---- -title: Intensivo de Namespaces -slug: Web/SVG/Intensivo_de_Namespaces -tags: - - SVG - - XML -translation_of: Web/SVG/Namespaces_Crash_Course ---- -

Como um dialeto XML, o SVG tem namespace. É importante entender o conceito de namespaces e como eles são usados se você planeja criar seu próprio conteúdo em SVG. Versões de visualizadores SVG prévias ao lançamento do Firefox 1.5 infelizmente deu pouca atenção aos namespaces mas eles são essenciais para dialetos multi-XML suportando agentes de usuários como navegadores baseados em Gecko que devem ser muito rigorosos. Tome um tempo para entender namespaces agora e irá te privar de muita dor de cabeça no futuro.

- -

Experiência

- -

Tem sido uma longa meta do W3C para fazer possível para diferentes tipos de conteúdo baseado em XML ser misturado no mesmo arquivo XML. Por exemplo, SVG e MathML podem ser incorporados diretamente em um documento cientificamente baseado em XHTML. Ser apto de misturar tipos de conteúdo como este tem muitas vantagens, mas também requeriu problemas reais para serem resolvidos.

- -

Naturalmente, cada dialeto XML define o significado de um nome de tag de marcação descrito em sua especificação. O problema em misturar conteúdo de diferentes dialetos XML em um único documento XML é que as tags definidas por um dialeto podem ter o mesmo nome que as tags definidas por outro. Por exemplo, ambos XHTML e SVG tem uma tag <title>. Como o software deveria distinguir entre os dois? Na verdade, como o software conta quando o conteúdo XML é algo que ele conhece sobre, e não somente um arquivo XML sem significado contendo nomes de tags arbitrárias desconhecidas para ele?

- -

Contrário à opinição popular, a resposta para esta pergunta não é "ele pode dizer pela declaração DOCTYPE". DTD's não foram feitos com conteúdo misto levado em consideração, e tentativas passadas de criar DTD's de conteúdo misto são hoje consideradas de terem falhado. O XML, e alguns dialetos XML (incluindo SVG), não requerem uma declaração DOCTYPE, e SVG 1.2 nem terá um. O fato que declarações DOCTYPE (usualmente) combinam o conteúdo em arquivos de tipo de conteúdo únicos é uma mera coincidência. Os DTDs são somente para validação, não para identificação de conteúdo. Softwared que enganam e identificam conteúdo XML usando sua declaração DOCTYPE causam dano.

- -

A resposta real para a pergunta é que um conteúdo XML conta para o software qual dialeto os nomes de tag pertencem ao dar "declarações de namespaces" para as tags. 

- -

Declarando namespaces

- -

O que estas declarações de namespace parecem, e onde elas vão? Aqui vai um exemplo curto.

- -
<svg xmlns="http://www.w3.org/2000/svg">
-  <!-- mais tags aqui -->
-</svg>
-
- -

A declaração de namespace é fornecida por um atributo xmlns. Este atributo diz que a tag <svg> e suas tags filhas pertencem a qualquer dialeto XML que tem o nome de namespace 'http://www.w3.org/2000/svg' que é, com certeza, SVG. Note a declaração de namespace somente precisa ser ser fornecida de uma vez em uma tag raiz. A declaração define o namespace padrão, então o software sabe que todas as tags descendentes de tags <svg> também pertencem ao mesmo namespace. Softwares conferem para ver se eles reconhecem o nome de namespace para determinar se eles sabem como lidar com a marcação. 

- -

Note que nomes de namespace são somente strings, então o fato que o nome de namespace SVG também parece com um URI não é importante. URI's são comumente usadas porque eles são únicos, a intenção não é para "linkar" em algum lugar. (Na verdade URI's são usadas tão frequentemente que o termo "URI de namespace" é comumente usado ao invés de "nome de namespace".)

- -

Redeclarando o namespace padrão

- -

Se todos os descendentes da tag raiz também são definidos para estarem presentes no namespace padrão, como você mistura conteúdo de outro namespace? Fácil. Você apenas redefine o namespace padrão. Aqui vai um exemplo simples.

- -
<html xmlns="http://www.w3.org/1999/xhtml">
-  <body>
-    <!-- algumas tags XHTML aqui -->
-    <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="200px">
-      <!-- algumas tags SVG aqui -->
-    </svg>
-    <!-- algumas tags XHTML aqui -->
-  </body>
-</html>
-
- -

Neste exemplo o atributo xmlns na tag raíz <html> declara o namespace padrão para ser XHTML. Como um resultado, ela e todas as tags filhas são interpretadas pelo software como pertencente ao XHTML, exceto para a tag <svg>. A tag <svg> tem seu próprio atributo xmlns, e ao redeclarar o namespace padrão, isto conta para o software que a tag <svg> e suas descendentes (a menos que elas também redeclarem o namespace padrão) pertencem ao SVG.

- -

Viu? Namespaces não são tão difíceis.

- -

Declarando prefixos de namespaces

- -

Dialetos XML não somente definem suas próprias tags, mas também seus próprios atributos. Por padrão, atributos não tem um namespace, e são conhecidos somente por ser únicos porque aparecem em um elemento que por si só tem um nome único. No entanto, algumas vezes é necessário definir atributos para que eles possam ser reusados em diferentes elementos e ainda sim serem considerados como sendo do mesmo atributo, independente do elemento com o qual eles são usados. Um exemplo muito bom disto é o atributo href definido pela especificação XLink. Este atributo é usado comumente por outros dialetos XML como um meio de conectar a recursos externos. Mas como você conta para o software qual dialeto o atributo pertence, neste caso XLink? Considere o exemplo seguinte.

- -
<svg xmlns="http://www.w3.org/2000/svg"
-     xmlns:xlink="http://www.w3.org/1999/xlink">
-  <script xlink:href="o-script-mais-legal.js" type="text/ecmascript"/>
-</svg>
-
- -

Este exemplo tem o atributo de aparência bastante incomum xmlns:xlink. Como você pode ter adivinhado da primeira parte 'xmlns', esta é outra declaração de namespace. Contudo, ao invés de definir o namespace padrão, esta declaração de namespace define o namespace para alguma coisa chamada como "prefixo namespace". Neste caso, nós escolhemos usar o prefixo xlink (a segunda parte) uma vez que o prefixo será usado para contar ao software sobre os atributos que pertencem ao XLink.

- -

Como seus nomes sugerem, prefixos de namespace são usados para prefixar nomes de atributos e nomes de tags. Isto é feito colocando o prefixo de namespace e dois pontos antes do nomes de atributo como mostrado na tag <script> no exemplo acima. Isto conta para o software que aquele atributo particular pertence ao namespace atribuído ao prefixo de namespace (XLink), e é um atribuído que pode ser usado com o mesmo significado em outras tags.

- -

Note que é um erro de XML usar um prefixo que não foi ligado au um nome de namespace. A ligação criada pelo atributo xmlns:xlink no exemplo acima é absolutamente essencial se o atributo xlink:href não é para para causar um erro. Este atributo XLink é também frequentemente usado no SVG nas tags <a>, <use> e <image>, dentre outros, então é uma boa idéia sempre incluir a declaração XLink em seus documentos.

- -

Aparte, é útil saber que prefixos podem também ser usados para names de tags. Isto conta para o software que aquela tag em particular (não a tag filha) pertence ao namespace ligado ao prefixo. Saber disso irá te poupar de confusão se você se deparar com uma marcação como a do exemplo seguinte:

- -
<html xmlns="http://www.w3.org/1999/xhtml"
-      xmlns:svg="http://www.w3.org/2000/svg">
-  <body>
-    <h1>SVG incorporado inline no XHTML</h1>
-    <svg:svg width="300px" height="200px">
-      <svg:circle cx="150" cy="100" r="50" fill="#ff0000"/>
-    </svg:svg>
-  </body>
-</html>
-
- -

Note que pelo prefixo de namespace ser usado para a tag <svg:svg> e seu filho <svg:circle>, não foi necessário redeclarar o namespace padrão. Em geral, é melhor redeclarar o namespace padrão ao invés de prefixar muitas tags desta forma. 

- -

Scripting em XML com namespaces

- -

Namespaces não afetam somente a marcação, mas também o scripting. Se você escreve scripts para XML com namespace, como SVG, continue lendo.

- -

A recomendação DOM Level 1 foi criado antes da recomendação original Namespaces in XML ser lançada; assim sendo, DOM1 não está ciente de namespaces. Isto causa problemas para XML com namespaces, como SVG. Para resolver estes problemas, a recomendação DOM Level 2 Core adicionou equivalentes cientes do namespace de todos os métodos aplicáveis do DOM Nível 1. Quando estiver scripting em SVG, é importante usar os métodos cientes de namespace. A tabela abaixo lista os métodos DOM1 que não devem ser usados em SVG, junto com seus equivalentes em DOM2 que devem ser usados ao invés.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
DOM1 (não use)DOM2 (use estes!)
createAttributecreateAttributeNS
createElementcreateElementNS
getAttributeNodegetAttributeNodeNS
getAttributegetAttributeNS
getElementsByTagNamegetElementsByTagNameNS (também added to Element)
getNamedItemgetNamedItemNS
hasAttributehasAttributeNS
removeAttributeremoveAttributeNS
removeNamedItemremoveNamedItemNS
setAttributesetAttributeNS
setAttributeNodesetAttributeNodeNS
setNamedItemsetNamedItemNS
- -

O primeiro argumento para todos os métodos cientes de namespace em DOM2 devem ser nomes de namespace (também conhecidos como namespace URI) do elemento ou atributo em questão. Para elementos SVG isto é 'http://www.w3.org/2000/svg'. Contudo, note cuidadosamente: as recomendações Namespaces in XML 1.1 declara que o nome de namespace para atributos sem um prefixo não tem um valor. Em outras palavras, states that the namespace name for attributes without a prefix does not have a value. In other words, embora os atributos pertencem ao namespace da tag, você não usa o nome de namespace da tag. Em vez disso, você deve usar nulo como nome de namespace para atributos não qualificados(sem prefixos). Então, para criar um elemento SVG rect usando document.createElementNS(), você deve escrever:

- -
document.createElementNS('http://www.w3.org/2000/svg', 'rect');
- -

Mas para recuperar o valor de atributo x em um elemento SVG rect, você deve escrever:

- -
rect.getAttributeNS(null, 'x');
- -

Note que isto não é o caso para atributos com um prefixo de namespace (atributos que não pertencem ao mesmo dialeto XML como a tag). Atributos como o xlink:href requerem o nome de namespace que foi designado para aquele prefixo (http://www.w3.org/1999/xlink para XLink). Consequentemente para pegar o valor do atributo xlink:href de um elemento <a> em SVG você deveria escrever:

- -
elt.getAttributeNS('http://www.w3.org/1999/xlink', 'href');
- -

Para definir atributos que tem um namespace, é recomendado (mas não requerido) que você também inclua seus prefixos no segundo argumento para que o DOM possa, depois, ser facilmente convertido depois para XML (se, por exemplo você quer enviá-los de volta para o servidor). Por exemplo: 

- -
elt.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', 'otherdoc.svg');
- -

Como um exemplo final, aqui está a demonstração de como você deveria criar um elemento <image> dinamicamente usando script: 

- -
var SVG_NS = 'http://www.w3.org/2000/svg';
-var XLink_NS = 'http://www.w3.org/1999/xlink';
-var image = document.createElementNS(SVG_NS, 'image');
-image.setAttributeNS(null, 'width', '100');
-image.setAttributeNS(null, 'height', '100');
-image.setAttributeNS(XLink_NS, 'xlink:href', 'flower.png');
-
- -

Conclusão

- -

Tenha certeza que você sempre declara os namespaces que você usa em seus arquivos XML. Se você não usar, softwares como Firefox não reconhecerão seus conteúdos e irão simplesmente mostrar a marcação XML ou informar o usuário que há um erro no XML. É uma boa idéia usar um template que inclui todas as declarações de namespace comumente usadas ao criar novos arquivos SVG. Se você não tem um ainda, faça um começando com o seguinte código: 

- -
<svg xmlns="http://www.w3.org/2000/svg"
-     xmlns:xlink="http://www.w3.org/1999/xlink">
-</svg>
-
- -

Mesmo que você não use todos aqueles namespaces em um documento, não há dano ao incluir declarações de namespace. Isto pode te privar de alguns erros irritantes se você acabar adicionando conteúdo de um dos namespaces não usados em datas posteriores. 

- -

Um exemplo completo

- -

Para um exemplo completo, veja SVG: Namespaces Crash Course: Example.

diff --git a/files/pt-br/web/svg/namespaces_crash_course/index.html b/files/pt-br/web/svg/namespaces_crash_course/index.html new file mode 100644 index 0000000000..35f50be610 --- /dev/null +++ b/files/pt-br/web/svg/namespaces_crash_course/index.html @@ -0,0 +1,186 @@ +--- +title: Intensivo de Namespaces +slug: Web/SVG/Intensivo_de_Namespaces +tags: + - SVG + - XML +translation_of: Web/SVG/Namespaces_Crash_Course +--- +

Como um dialeto XML, o SVG tem namespace. É importante entender o conceito de namespaces e como eles são usados se você planeja criar seu próprio conteúdo em SVG. Versões de visualizadores SVG prévias ao lançamento do Firefox 1.5 infelizmente deu pouca atenção aos namespaces mas eles são essenciais para dialetos multi-XML suportando agentes de usuários como navegadores baseados em Gecko que devem ser muito rigorosos. Tome um tempo para entender namespaces agora e irá te privar de muita dor de cabeça no futuro.

+ +

Experiência

+ +

Tem sido uma longa meta do W3C para fazer possível para diferentes tipos de conteúdo baseado em XML ser misturado no mesmo arquivo XML. Por exemplo, SVG e MathML podem ser incorporados diretamente em um documento cientificamente baseado em XHTML. Ser apto de misturar tipos de conteúdo como este tem muitas vantagens, mas também requeriu problemas reais para serem resolvidos.

+ +

Naturalmente, cada dialeto XML define o significado de um nome de tag de marcação descrito em sua especificação. O problema em misturar conteúdo de diferentes dialetos XML em um único documento XML é que as tags definidas por um dialeto podem ter o mesmo nome que as tags definidas por outro. Por exemplo, ambos XHTML e SVG tem uma tag <title>. Como o software deveria distinguir entre os dois? Na verdade, como o software conta quando o conteúdo XML é algo que ele conhece sobre, e não somente um arquivo XML sem significado contendo nomes de tags arbitrárias desconhecidas para ele?

+ +

Contrário à opinição popular, a resposta para esta pergunta não é "ele pode dizer pela declaração DOCTYPE". DTD's não foram feitos com conteúdo misto levado em consideração, e tentativas passadas de criar DTD's de conteúdo misto são hoje consideradas de terem falhado. O XML, e alguns dialetos XML (incluindo SVG), não requerem uma declaração DOCTYPE, e SVG 1.2 nem terá um. O fato que declarações DOCTYPE (usualmente) combinam o conteúdo em arquivos de tipo de conteúdo únicos é uma mera coincidência. Os DTDs são somente para validação, não para identificação de conteúdo. Softwared que enganam e identificam conteúdo XML usando sua declaração DOCTYPE causam dano.

+ +

A resposta real para a pergunta é que um conteúdo XML conta para o software qual dialeto os nomes de tag pertencem ao dar "declarações de namespaces" para as tags. 

+ +

Declarando namespaces

+ +

O que estas declarações de namespace parecem, e onde elas vão? Aqui vai um exemplo curto.

+ +
<svg xmlns="http://www.w3.org/2000/svg">
+  <!-- mais tags aqui -->
+</svg>
+
+ +

A declaração de namespace é fornecida por um atributo xmlns. Este atributo diz que a tag <svg> e suas tags filhas pertencem a qualquer dialeto XML que tem o nome de namespace 'http://www.w3.org/2000/svg' que é, com certeza, SVG. Note a declaração de namespace somente precisa ser ser fornecida de uma vez em uma tag raiz. A declaração define o namespace padrão, então o software sabe que todas as tags descendentes de tags <svg> também pertencem ao mesmo namespace. Softwares conferem para ver se eles reconhecem o nome de namespace para determinar se eles sabem como lidar com a marcação. 

+ +

Note que nomes de namespace são somente strings, então o fato que o nome de namespace SVG também parece com um URI não é importante. URI's são comumente usadas porque eles são únicos, a intenção não é para "linkar" em algum lugar. (Na verdade URI's são usadas tão frequentemente que o termo "URI de namespace" é comumente usado ao invés de "nome de namespace".)

+ +

Redeclarando o namespace padrão

+ +

Se todos os descendentes da tag raiz também são definidos para estarem presentes no namespace padrão, como você mistura conteúdo de outro namespace? Fácil. Você apenas redefine o namespace padrão. Aqui vai um exemplo simples.

+ +
<html xmlns="http://www.w3.org/1999/xhtml">
+  <body>
+    <!-- algumas tags XHTML aqui -->
+    <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="200px">
+      <!-- algumas tags SVG aqui -->
+    </svg>
+    <!-- algumas tags XHTML aqui -->
+  </body>
+</html>
+
+ +

Neste exemplo o atributo xmlns na tag raíz <html> declara o namespace padrão para ser XHTML. Como um resultado, ela e todas as tags filhas são interpretadas pelo software como pertencente ao XHTML, exceto para a tag <svg>. A tag <svg> tem seu próprio atributo xmlns, e ao redeclarar o namespace padrão, isto conta para o software que a tag <svg> e suas descendentes (a menos que elas também redeclarem o namespace padrão) pertencem ao SVG.

+ +

Viu? Namespaces não são tão difíceis.

+ +

Declarando prefixos de namespaces

+ +

Dialetos XML não somente definem suas próprias tags, mas também seus próprios atributos. Por padrão, atributos não tem um namespace, e são conhecidos somente por ser únicos porque aparecem em um elemento que por si só tem um nome único. No entanto, algumas vezes é necessário definir atributos para que eles possam ser reusados em diferentes elementos e ainda sim serem considerados como sendo do mesmo atributo, independente do elemento com o qual eles são usados. Um exemplo muito bom disto é o atributo href definido pela especificação XLink. Este atributo é usado comumente por outros dialetos XML como um meio de conectar a recursos externos. Mas como você conta para o software qual dialeto o atributo pertence, neste caso XLink? Considere o exemplo seguinte.

+ +
<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+  <script xlink:href="o-script-mais-legal.js" type="text/ecmascript"/>
+</svg>
+
+ +

Este exemplo tem o atributo de aparência bastante incomum xmlns:xlink. Como você pode ter adivinhado da primeira parte 'xmlns', esta é outra declaração de namespace. Contudo, ao invés de definir o namespace padrão, esta declaração de namespace define o namespace para alguma coisa chamada como "prefixo namespace". Neste caso, nós escolhemos usar o prefixo xlink (a segunda parte) uma vez que o prefixo será usado para contar ao software sobre os atributos que pertencem ao XLink.

+ +

Como seus nomes sugerem, prefixos de namespace são usados para prefixar nomes de atributos e nomes de tags. Isto é feito colocando o prefixo de namespace e dois pontos antes do nomes de atributo como mostrado na tag <script> no exemplo acima. Isto conta para o software que aquele atributo particular pertence ao namespace atribuído ao prefixo de namespace (XLink), e é um atribuído que pode ser usado com o mesmo significado em outras tags.

+ +

Note que é um erro de XML usar um prefixo que não foi ligado au um nome de namespace. A ligação criada pelo atributo xmlns:xlink no exemplo acima é absolutamente essencial se o atributo xlink:href não é para para causar um erro. Este atributo XLink é também frequentemente usado no SVG nas tags <a>, <use> e <image>, dentre outros, então é uma boa idéia sempre incluir a declaração XLink em seus documentos.

+ +

Aparte, é útil saber que prefixos podem também ser usados para names de tags. Isto conta para o software que aquela tag em particular (não a tag filha) pertence ao namespace ligado ao prefixo. Saber disso irá te poupar de confusão se você se deparar com uma marcação como a do exemplo seguinte:

+ +
<html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:svg="http://www.w3.org/2000/svg">
+  <body>
+    <h1>SVG incorporado inline no XHTML</h1>
+    <svg:svg width="300px" height="200px">
+      <svg:circle cx="150" cy="100" r="50" fill="#ff0000"/>
+    </svg:svg>
+  </body>
+</html>
+
+ +

Note que pelo prefixo de namespace ser usado para a tag <svg:svg> e seu filho <svg:circle>, não foi necessário redeclarar o namespace padrão. Em geral, é melhor redeclarar o namespace padrão ao invés de prefixar muitas tags desta forma. 

+ +

Scripting em XML com namespaces

+ +

Namespaces não afetam somente a marcação, mas também o scripting. Se você escreve scripts para XML com namespace, como SVG, continue lendo.

+ +

A recomendação DOM Level 1 foi criado antes da recomendação original Namespaces in XML ser lançada; assim sendo, DOM1 não está ciente de namespaces. Isto causa problemas para XML com namespaces, como SVG. Para resolver estes problemas, a recomendação DOM Level 2 Core adicionou equivalentes cientes do namespace de todos os métodos aplicáveis do DOM Nível 1. Quando estiver scripting em SVG, é importante usar os métodos cientes de namespace. A tabela abaixo lista os métodos DOM1 que não devem ser usados em SVG, junto com seus equivalentes em DOM2 que devem ser usados ao invés.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DOM1 (não use)DOM2 (use estes!)
createAttributecreateAttributeNS
createElementcreateElementNS
getAttributeNodegetAttributeNodeNS
getAttributegetAttributeNS
getElementsByTagNamegetElementsByTagNameNS (também added to Element)
getNamedItemgetNamedItemNS
hasAttributehasAttributeNS
removeAttributeremoveAttributeNS
removeNamedItemremoveNamedItemNS
setAttributesetAttributeNS
setAttributeNodesetAttributeNodeNS
setNamedItemsetNamedItemNS
+ +

O primeiro argumento para todos os métodos cientes de namespace em DOM2 devem ser nomes de namespace (também conhecidos como namespace URI) do elemento ou atributo em questão. Para elementos SVG isto é 'http://www.w3.org/2000/svg'. Contudo, note cuidadosamente: as recomendações Namespaces in XML 1.1 declara que o nome de namespace para atributos sem um prefixo não tem um valor. Em outras palavras, states that the namespace name for attributes without a prefix does not have a value. In other words, embora os atributos pertencem ao namespace da tag, você não usa o nome de namespace da tag. Em vez disso, você deve usar nulo como nome de namespace para atributos não qualificados(sem prefixos). Então, para criar um elemento SVG rect usando document.createElementNS(), você deve escrever:

+ +
document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+ +

Mas para recuperar o valor de atributo x em um elemento SVG rect, você deve escrever:

+ +
rect.getAttributeNS(null, 'x');
+ +

Note que isto não é o caso para atributos com um prefixo de namespace (atributos que não pertencem ao mesmo dialeto XML como a tag). Atributos como o xlink:href requerem o nome de namespace que foi designado para aquele prefixo (http://www.w3.org/1999/xlink para XLink). Consequentemente para pegar o valor do atributo xlink:href de um elemento <a> em SVG você deveria escrever:

+ +
elt.getAttributeNS('http://www.w3.org/1999/xlink', 'href');
+ +

Para definir atributos que tem um namespace, é recomendado (mas não requerido) que você também inclua seus prefixos no segundo argumento para que o DOM possa, depois, ser facilmente convertido depois para XML (se, por exemplo você quer enviá-los de volta para o servidor). Por exemplo: 

+ +
elt.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', 'otherdoc.svg');
+ +

Como um exemplo final, aqui está a demonstração de como você deveria criar um elemento <image> dinamicamente usando script: 

+ +
var SVG_NS = 'http://www.w3.org/2000/svg';
+var XLink_NS = 'http://www.w3.org/1999/xlink';
+var image = document.createElementNS(SVG_NS, 'image');
+image.setAttributeNS(null, 'width', '100');
+image.setAttributeNS(null, 'height', '100');
+image.setAttributeNS(XLink_NS, 'xlink:href', 'flower.png');
+
+ +

Conclusão

+ +

Tenha certeza que você sempre declara os namespaces que você usa em seus arquivos XML. Se você não usar, softwares como Firefox não reconhecerão seus conteúdos e irão simplesmente mostrar a marcação XML ou informar o usuário que há um erro no XML. É uma boa idéia usar um template que inclui todas as declarações de namespace comumente usadas ao criar novos arquivos SVG. Se você não tem um ainda, faça um começando com o seguinte código: 

+ +
<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+</svg>
+
+ +

Mesmo que você não use todos aqueles namespaces em um documento, não há dano ao incluir declarações de namespace. Isto pode te privar de alguns erros irritantes se você acabar adicionando conteúdo de um dos namespaces não usados em datas posteriores. 

+ +

Um exemplo completo

+ +

Para um exemplo completo, veja SVG: Namespaces Crash Course: Example.

diff --git a/files/pt-br/web/tutoriais/index.html b/files/pt-br/web/tutoriais/index.html deleted file mode 100644 index 68be26f522..0000000000 --- a/files/pt-br/web/tutoriais/index.html +++ /dev/null @@ -1,253 +0,0 @@ ---- -title: Tutoriais -slug: Web/Tutoriais -tags: - - Artigos Web - - CSS - - Codificando - - Código - - Desenvolvimento Web - - GitHub - - Guía - - HTML - - Iniciante - - JavaScript - - MDN - - Navegador - - Tutorial -translation_of: Web/Tutorials ---- -

Os links nesta página levam a uma variedade de tutoriais e materiais de treinamento. Se você está apenas começando, aprendendo o básico ou é um veterano em desenvolvimento web, aqui você pode encontrar recursos úteis, bem como as melhores práticas. Esses recursos são criados por empresas com visão de futuro e desenvolvedores que adotaram padrões e boas práticas para desenvolvimento na web, e que fornecem e permitem diferentes interpretações de acordo com a solução adotada pelo usuário, tudo isso através de uma licença de conteúdo aberto, como é o caso da Creative Commons.

- -

Para nível iniciante da Web

- -
-
Iniciando com a Web 
-
Iniciando com a Web é  uma séria concisa que apresenta a você os aspectos práticos do desenvolvimento web. Você configurará as ferramentas que você precisa para construir uma página web simples e publicará seu próprio código simples.
-
- -

Tutoriais de HTML

- -

Nível inicial

- -
-
-
-
Introdução ao HTML
-
Este módulo lhe dá a base necessária, levando-o a fazer uso de conceitos e sintaxe fundamentais e ensinando como aplicar HTML ao texto, bem como criar hiperlinks e fazer uso do HTML para estruturar uma página da web.
-
Referência de Elementos HTML da MDN
-
Uma referência abrangente para elementos HTML e como são suportados pelos diferentes navegadores.
-
-
- -
-
-
Criando uma Página Web simples com HTML (The Blog Starter)
-
Um guia HTML para iniciantes que inclui explicações de tags comums, incluindo tags HTML5. Também inclui um guia passo a passo sobre como criar uma página da web com exemplos de códigos já usados.
-
Guia do Iniciante em HTML (Website Setup)
-
Este guia para iniciantes em HTML ensina você como configurar um website básico usando HTML e as novas tags HTML5. Um tutorial passo a passo com imagens e recursos que você pode usar para melhorar suas habilidades de codificação.
-
Desafio HTML (Wikiversity)
-
Use esses desafios para aprimorar suas habilidades em HTML (como por exemplo, Eu devo usar um elemento <h2> ou um elemento <strong>?), focando numa melhor produtividade.
-
-
-
- -

Nível Intermediário

- -
-
-
-
Multimídia e Incorporação
-
Este módulo explora como usar HTML para adicionar multimídia em suas páginas web, incluindo as diferentes maneiras pelas quais as imagens podem ser adicionadas, e como incorporar vídeo, áudio e até outras páginas web inteiras.
-
-
- -
-
-
Tabelas em HTML
-
Representar dados de tabela em uma página da Web de um modo compreensível e acessível pode ser um desafio. Este módulo abrange a marcação básica da tabela, juntamente com recursos mais complexos como a implementação de legendas e resumos.
-
-
-
- -

Nível avançado

- -
-
-
-
Formulários em HTML (HTML forms)
-
Formulários são uma parte muito importante da Web - fornecem grande parte das funcionalidades que você precisa para interagir com sites da Web, como por exemplo registrando e efetuando login, enviando comentários, comprando produtos e muito mais. Este módulo começa com a criação de formulários da parte do cliente.
-
Dicas para criar páginas HTML de carregamento rápido
-
Otimize páginas da web para fornecer um site mais receptivo para visitantes e reduzir a carga em seu servidor web juntamente com a conexão com a Internet.
-
-
-
- -

Tutoriais CSS

- -

Nível inicial

- -
-
-
-
CSS Básico
-
CSS (Cascading Style Sheets) é o código que você usa para pôr estilo em suas páginas web. CSS Básico traz o que você precisa para começar. Nós responderemos questões como: Como eu faço meu texto preto ou vermelho? Como eu faço meu conteúdo aparecer neste ou naquele lugar da tela? Como eu decoro minha página web com imagens e cores de fundo?
-
Introdução ao CSS
-
Este módulo vai a fundo em como o CSS trabalha, incluíndo seletores e propriedades, escrevendo regras CSS, aplicando CSS no HTML, como especificar cores e outras unidades em CSS, herança em cascata, modelos de boxes e debug em CSS.
-
-
- -
-
-
Estilizando Boxes
-
A seguir nós veremos em estilização boxes (caixas), um dos passos fundamentais para a apresentação de uma página web. Neste módulo nós recapitulamos o modelo de caixa, em seguida olhamos para o controle de layouts de caixas, configurando preenchimento, bordas e margens, definindo cores de fundo personalizadas, imagens e outros recursos e recursos extravagantes, como sombras e filtros de boxes.
-
Estilizando texto
-
Aqui nós olhamos para fundamentos de estilização de texto, incluíndo configuração de fonte, negritos, itálicos, espaçamento de linha e letras, sombras e outros recursos de texto. Nós completamos o módulo analizando a aplicação de fontes customizadas em sua página e estilizando listas e links.
-
Questões comuns de CSS
-
Perguntas e respostas comuns para iniciantes.
-
-
-
- -

Nível intermediário

- -
-
-
-
CSS layout
-
Até este ponto nós vimos CSS básico, como estilizar texto e como formatar e manipular caixas dentro do seu conteúdo. Agora veremos como colocar suas caixas no lugar certo em relação à viewport e vice-versa. Nós já cobrimos os pré-requisitos, então agora podemos mergulhar profundamente no layout CSS, olhando para diferentes configurações de tela, métodos de layout tradicionais envolvendo flutuação e posicionamento e novas ferramentas de layout como o flexbox.
-
Referência CSS
-
Referência completa de CSS, com detalhes e suporte pelo Firefox e outros navegadores.
-
-
- -
-
-
Grades Fluídas (Uma lista a parte)
-
Layouts de design que redimensionam fluidamente com a janela do navegador, enquanto ainda estiver usando uma grade tipográfica.
-
Desafios CSS (Wikiversity)
-
Dar uma maior flexibilidade nas suas habilidades de utilização do CSS e ver onde você precisa de mais prática.
-
-
-
- -

Nível avançado

- -
-
-
-
Usando transformações CSS
-
Aplique rotação, inclinação, escala e translação utilizando CSS.
-
CSS Transições
-
Transições CSS, parte do projecto de especificação CSS3, fornecem uma maneira de animar as alterações nas propriedades CSS, ao invés de executar as alterações imediatamente.
-
-
- -
-
-
Guia Rápido para implementar Fontes da Web com @font-face (HTML5 Rocks)
-
O recurso @font-face do CSS3 permite que você use fontes personalizadas na web de uma forma acessível, manipulável e escalável.
-
Começando a escrever CSS (David Walsh)
-
Uma introdução às ferramentas e metodologias para escrever CSS mais sucinto, sustentável e escalável.
-
-
-
- -
-
-
Tutorial Canvas
-
Aprenda a desenhar gráficos usando scripts  e usando o elemento canvas.
-
HTML5 Doctor
-
Artigos sobre o uso de HTML5.
-
-
- -

Tutoriais Javascript

- -

Nível iniciante

- -
-
-
-
-
Primeiros passos em JavaScript
-
Em nosso primeiro módulo JavaScript, nós respondemos algumas questões fundamentais como O que é JavaScript?, Com o que se parece? e O que se pode fazer com ele? antes de avançar para levá-lo através da sua primeira experiência prática de escrever JavaScript. Depois disso, discutimos detalhadamente alguns recursos chaves de JavaScript, como variáveis, strings, números e matrizes.
-
Construindo blocos com JavaScript
-
Neste módulo, continuamos a nossa cobertura de todos os recursos fundamentais do JavaScript, voltando a nossa atenção para os tipos de códigos comumente encontrados, como declarações condicionais, laços, funções e eventos. Você já viu esses tópicos no curso, mas apenas de passagem - aqui vamos discutir tudo de forma explícita.
-
-
- -
-
-
Começando com JavaScript
-
O que é JavaScript e como pode lhe ajudar?
-
Codecademy (Codecademy)
-
Codecademy é uma maneira fácil de aprender como codificar em JavaScript. É interativo e você pode aprender junto dos seus amigos.
-
-
-
- -

Nível intermediário

- -
-
-
-
Introdução a objetos em JavaScript
-
Em JavaScript, a maioria das coisas são objetos, desde recursos do núcleo do JavaScript como strings e arrays até APIs do navegador construídas em JavaScript. Você pode criar sues próprios objetos para encapsular funções e variáveis dentro de pacotes. A natureza orientada a objetos do JavaScript é importante se você quer ir a fundo com seu conhecimento na linguagem e escrever códigos mais eficientes, então nós fornecemos este módulo para ajudar você. Aqui você aprende a teoria de orientação a objetos em detalhes, vê como criar seus próprios objetos, e explicamos o que são dados JSON e como trabalhar com eles.
-
APIs da web do lado do cliente
-
Quando se programa em JavaScript do lado do cliente (client-side) para sites ou aplicações web, voce não vai muito longe antes de precisar usar APIs - interfaces para manipular diferentes aspectos do navegador e do sistema operacional onde o site está executando, ou mesmo dados de outro serviço da web ou site. Neste módulo nós vamos explorar o que são APIs e como usar algumas das APIs mais comuns que você encontrará frequentemente eu seu trabalho.
-
-
- -
-
-
Uma Reintrodução ao JavaScript
-
Uma recapitulação da linguagem de programação JavaScript destinada a desenvolvedores de nível intermediário.
-
JavaScript Eloquente
-
Um guia compreensivo para metodologias intermediárias e avançadas em JavaScript.
-
Falando JavaScript (Dr. Axel Rauschmayer)
-
Para programadores que querem aprender JavaScript de uma maneira focada e rápida e para os desenvolvedores que buscam aprimorar suas habilidades ou procuram se aprofundar em um tópico.
-
Padrões de Design Essenciais em JavaScript (Addy Osmani)
-
Uma introdução para padrões de design essenciais em JavaScript.
-
-
-
- -

Nível avançado

- -
-
-
-
Guia de JavaScript
-
Um guia completo, atualizado regularmente, de JavaScript para todos os níveis de ensino, do básico ao avançado.
-
Você não conhece JS (Kyle Simpson)
-
Uma série de livros que mergulham profundamente nos principais mecanismos da linguagem JavaScript.
-
JavaScript Garden
-
Documentação de partes mais peculiares do JavaScript.
-
Explorando ES6 (Dr. Axel Rauschmayer)
-
Informações profundas e confiáveis sobre ECMAScript 2015.
-
-
- -
Padrões JavaScipt - -
-
Uma coleção de padrões e antipadrões que cobre padrões de funções, padrões jQuery, padrões de plugins jQuery, padrões de design, padões em geral, padrões de literais e construtores, padrões de criação de objetos, padrões de reuso de código e DOM.
-
Como navegadores trabalham
-
Um artigo detalhado descrevendo diferentes navegadores modernos, seus motores, renderização de páginas, etc.
-
Vídeos sobre JavaScript (GitHub)
-
Uma coleção de vídeos sobre JavaScript para se aprofundar no assunto.
-
-
-
- -

Estendendo o desenvolvimento

- -
-
-
-
WebExtensions
-
WebExtensions é um sistema entre navegadores para desenvolver complementos de navegador. Em larga escala o sistema é compatível com a API de extensão suportada pelos navegadores Google Chrome e Opera. Extensões escritas para estes navegadores na maioria dos casos funcionam no Firefox ou Microsoft Edge com poucas mudanças. A API é também completamente compatível com multiprocessos Firefox.
-
-
-
diff --git a/files/pt-br/web/tutorials/index.html b/files/pt-br/web/tutorials/index.html new file mode 100644 index 0000000000..68be26f522 --- /dev/null +++ b/files/pt-br/web/tutorials/index.html @@ -0,0 +1,253 @@ +--- +title: Tutoriais +slug: Web/Tutoriais +tags: + - Artigos Web + - CSS + - Codificando + - Código + - Desenvolvimento Web + - GitHub + - Guía + - HTML + - Iniciante + - JavaScript + - MDN + - Navegador + - Tutorial +translation_of: Web/Tutorials +--- +

Os links nesta página levam a uma variedade de tutoriais e materiais de treinamento. Se você está apenas começando, aprendendo o básico ou é um veterano em desenvolvimento web, aqui você pode encontrar recursos úteis, bem como as melhores práticas. Esses recursos são criados por empresas com visão de futuro e desenvolvedores que adotaram padrões e boas práticas para desenvolvimento na web, e que fornecem e permitem diferentes interpretações de acordo com a solução adotada pelo usuário, tudo isso através de uma licença de conteúdo aberto, como é o caso da Creative Commons.

+ +

Para nível iniciante da Web

+ +
+
Iniciando com a Web 
+
Iniciando com a Web é  uma séria concisa que apresenta a você os aspectos práticos do desenvolvimento web. Você configurará as ferramentas que você precisa para construir uma página web simples e publicará seu próprio código simples.
+
+ +

Tutoriais de HTML

+ +

Nível inicial

+ +
+
+
+
Introdução ao HTML
+
Este módulo lhe dá a base necessária, levando-o a fazer uso de conceitos e sintaxe fundamentais e ensinando como aplicar HTML ao texto, bem como criar hiperlinks e fazer uso do HTML para estruturar uma página da web.
+
Referência de Elementos HTML da MDN
+
Uma referência abrangente para elementos HTML e como são suportados pelos diferentes navegadores.
+
+
+ +
+
+
Criando uma Página Web simples com HTML (The Blog Starter)
+
Um guia HTML para iniciantes que inclui explicações de tags comums, incluindo tags HTML5. Também inclui um guia passo a passo sobre como criar uma página da web com exemplos de códigos já usados.
+
Guia do Iniciante em HTML (Website Setup)
+
Este guia para iniciantes em HTML ensina você como configurar um website básico usando HTML e as novas tags HTML5. Um tutorial passo a passo com imagens e recursos que você pode usar para melhorar suas habilidades de codificação.
+
Desafio HTML (Wikiversity)
+
Use esses desafios para aprimorar suas habilidades em HTML (como por exemplo, Eu devo usar um elemento <h2> ou um elemento <strong>?), focando numa melhor produtividade.
+
+
+
+ +

Nível Intermediário

+ +
+
+
+
Multimídia e Incorporação
+
Este módulo explora como usar HTML para adicionar multimídia em suas páginas web, incluindo as diferentes maneiras pelas quais as imagens podem ser adicionadas, e como incorporar vídeo, áudio e até outras páginas web inteiras.
+
+
+ +
+
+
Tabelas em HTML
+
Representar dados de tabela em uma página da Web de um modo compreensível e acessível pode ser um desafio. Este módulo abrange a marcação básica da tabela, juntamente com recursos mais complexos como a implementação de legendas e resumos.
+
+
+
+ +

Nível avançado

+ +
+
+
+
Formulários em HTML (HTML forms)
+
Formulários são uma parte muito importante da Web - fornecem grande parte das funcionalidades que você precisa para interagir com sites da Web, como por exemplo registrando e efetuando login, enviando comentários, comprando produtos e muito mais. Este módulo começa com a criação de formulários da parte do cliente.
+
Dicas para criar páginas HTML de carregamento rápido
+
Otimize páginas da web para fornecer um site mais receptivo para visitantes e reduzir a carga em seu servidor web juntamente com a conexão com a Internet.
+
+
+
+ +

Tutoriais CSS

+ +

Nível inicial

+ +
+
+
+
CSS Básico
+
CSS (Cascading Style Sheets) é o código que você usa para pôr estilo em suas páginas web. CSS Básico traz o que você precisa para começar. Nós responderemos questões como: Como eu faço meu texto preto ou vermelho? Como eu faço meu conteúdo aparecer neste ou naquele lugar da tela? Como eu decoro minha página web com imagens e cores de fundo?
+
Introdução ao CSS
+
Este módulo vai a fundo em como o CSS trabalha, incluíndo seletores e propriedades, escrevendo regras CSS, aplicando CSS no HTML, como especificar cores e outras unidades em CSS, herança em cascata, modelos de boxes e debug em CSS.
+
+
+ +
+
+
Estilizando Boxes
+
A seguir nós veremos em estilização boxes (caixas), um dos passos fundamentais para a apresentação de uma página web. Neste módulo nós recapitulamos o modelo de caixa, em seguida olhamos para o controle de layouts de caixas, configurando preenchimento, bordas e margens, definindo cores de fundo personalizadas, imagens e outros recursos e recursos extravagantes, como sombras e filtros de boxes.
+
Estilizando texto
+
Aqui nós olhamos para fundamentos de estilização de texto, incluíndo configuração de fonte, negritos, itálicos, espaçamento de linha e letras, sombras e outros recursos de texto. Nós completamos o módulo analizando a aplicação de fontes customizadas em sua página e estilizando listas e links.
+
Questões comuns de CSS
+
Perguntas e respostas comuns para iniciantes.
+
+
+
+ +

Nível intermediário

+ +
+
+
+
CSS layout
+
Até este ponto nós vimos CSS básico, como estilizar texto e como formatar e manipular caixas dentro do seu conteúdo. Agora veremos como colocar suas caixas no lugar certo em relação à viewport e vice-versa. Nós já cobrimos os pré-requisitos, então agora podemos mergulhar profundamente no layout CSS, olhando para diferentes configurações de tela, métodos de layout tradicionais envolvendo flutuação e posicionamento e novas ferramentas de layout como o flexbox.
+
Referência CSS
+
Referência completa de CSS, com detalhes e suporte pelo Firefox e outros navegadores.
+
+
+ +
+
+
Grades Fluídas (Uma lista a parte)
+
Layouts de design que redimensionam fluidamente com a janela do navegador, enquanto ainda estiver usando uma grade tipográfica.
+
Desafios CSS (Wikiversity)
+
Dar uma maior flexibilidade nas suas habilidades de utilização do CSS e ver onde você precisa de mais prática.
+
+
+
+ +

Nível avançado

+ +
+
+
+
Usando transformações CSS
+
Aplique rotação, inclinação, escala e translação utilizando CSS.
+
CSS Transições
+
Transições CSS, parte do projecto de especificação CSS3, fornecem uma maneira de animar as alterações nas propriedades CSS, ao invés de executar as alterações imediatamente.
+
+
+ +
+
+
Guia Rápido para implementar Fontes da Web com @font-face (HTML5 Rocks)
+
O recurso @font-face do CSS3 permite que você use fontes personalizadas na web de uma forma acessível, manipulável e escalável.
+
Começando a escrever CSS (David Walsh)
+
Uma introdução às ferramentas e metodologias para escrever CSS mais sucinto, sustentável e escalável.
+
+
+
+ +
+
+
Tutorial Canvas
+
Aprenda a desenhar gráficos usando scripts  e usando o elemento canvas.
+
HTML5 Doctor
+
Artigos sobre o uso de HTML5.
+
+
+ +

Tutoriais Javascript

+ +

Nível iniciante

+ +
+
+
+
+
Primeiros passos em JavaScript
+
Em nosso primeiro módulo JavaScript, nós respondemos algumas questões fundamentais como O que é JavaScript?, Com o que se parece? e O que se pode fazer com ele? antes de avançar para levá-lo através da sua primeira experiência prática de escrever JavaScript. Depois disso, discutimos detalhadamente alguns recursos chaves de JavaScript, como variáveis, strings, números e matrizes.
+
Construindo blocos com JavaScript
+
Neste módulo, continuamos a nossa cobertura de todos os recursos fundamentais do JavaScript, voltando a nossa atenção para os tipos de códigos comumente encontrados, como declarações condicionais, laços, funções e eventos. Você já viu esses tópicos no curso, mas apenas de passagem - aqui vamos discutir tudo de forma explícita.
+
+
+ +
+
+
Começando com JavaScript
+
O que é JavaScript e como pode lhe ajudar?
+
Codecademy (Codecademy)
+
Codecademy é uma maneira fácil de aprender como codificar em JavaScript. É interativo e você pode aprender junto dos seus amigos.
+
+
+
+ +

Nível intermediário

+ +
+
+
+
Introdução a objetos em JavaScript
+
Em JavaScript, a maioria das coisas são objetos, desde recursos do núcleo do JavaScript como strings e arrays até APIs do navegador construídas em JavaScript. Você pode criar sues próprios objetos para encapsular funções e variáveis dentro de pacotes. A natureza orientada a objetos do JavaScript é importante se você quer ir a fundo com seu conhecimento na linguagem e escrever códigos mais eficientes, então nós fornecemos este módulo para ajudar você. Aqui você aprende a teoria de orientação a objetos em detalhes, vê como criar seus próprios objetos, e explicamos o que são dados JSON e como trabalhar com eles.
+
APIs da web do lado do cliente
+
Quando se programa em JavaScript do lado do cliente (client-side) para sites ou aplicações web, voce não vai muito longe antes de precisar usar APIs - interfaces para manipular diferentes aspectos do navegador e do sistema operacional onde o site está executando, ou mesmo dados de outro serviço da web ou site. Neste módulo nós vamos explorar o que são APIs e como usar algumas das APIs mais comuns que você encontrará frequentemente eu seu trabalho.
+
+
+ +
+
+
Uma Reintrodução ao JavaScript
+
Uma recapitulação da linguagem de programação JavaScript destinada a desenvolvedores de nível intermediário.
+
JavaScript Eloquente
+
Um guia compreensivo para metodologias intermediárias e avançadas em JavaScript.
+
Falando JavaScript (Dr. Axel Rauschmayer)
+
Para programadores que querem aprender JavaScript de uma maneira focada e rápida e para os desenvolvedores que buscam aprimorar suas habilidades ou procuram se aprofundar em um tópico.
+
Padrões de Design Essenciais em JavaScript (Addy Osmani)
+
Uma introdução para padrões de design essenciais em JavaScript.
+
+
+
+ +

Nível avançado

+ +
+
+
+
Guia de JavaScript
+
Um guia completo, atualizado regularmente, de JavaScript para todos os níveis de ensino, do básico ao avançado.
+
Você não conhece JS (Kyle Simpson)
+
Uma série de livros que mergulham profundamente nos principais mecanismos da linguagem JavaScript.
+
JavaScript Garden
+
Documentação de partes mais peculiares do JavaScript.
+
Explorando ES6 (Dr. Axel Rauschmayer)
+
Informações profundas e confiáveis sobre ECMAScript 2015.
+
+
+ +
Padrões JavaScipt + +
+
Uma coleção de padrões e antipadrões que cobre padrões de funções, padrões jQuery, padrões de plugins jQuery, padrões de design, padões em geral, padrões de literais e construtores, padrões de criação de objetos, padrões de reuso de código e DOM.
+
Como navegadores trabalham
+
Um artigo detalhado descrevendo diferentes navegadores modernos, seus motores, renderização de páginas, etc.
+
Vídeos sobre JavaScript (GitHub)
+
Uma coleção de vídeos sobre JavaScript para se aprofundar no assunto.
+
+
+
+ +

Estendendo o desenvolvimento

+ +
+
+
+
WebExtensions
+
WebExtensions é um sistema entre navegadores para desenvolver complementos de navegador. Em larga escala o sistema é compatível com a API de extensão suportada pelos navegadores Google Chrome e Opera. Extensões escritas para estes navegadores na maioria dos casos funcionam no Firefox ou Microsoft Edge com poucas mudanças. A API é também completamente compatível com multiprocessos Firefox.
+
+
+
diff --git a/files/pt-br/web/web_components/usando_custom_elements/index.html b/files/pt-br/web/web_components/usando_custom_elements/index.html deleted file mode 100644 index 55af21ca48..0000000000 --- a/files/pt-br/web/web_components/usando_custom_elements/index.html +++ /dev/null @@ -1,289 +0,0 @@ ---- -title: Usando custom elements -slug: Web/Web_Components/Usando_custom_elements -tags: - - Autonomos - - Classes - - Guide - - HTML - - Web Components - - custom elements - - customized -translation_of: Web/Web_Components/Using_custom_elements ---- -
{{DefaultAPISidebar("Web Components")}}
- -

Um dos principais recursos do padrão de Web Components é a capacidade de criar elementos personalizados que encapsulam sua funcionalidade em uma página HTML, em vez de ter que se contentar com um lote longo e aninhado de elementos que, juntos, fornecem um recurso de página personalizada. Este artigo apresenta o uso da API de Custom Elements.

- -
-

Nota: Custom elements são suportados por padrão no Firefox, Chrome e Edge (76). Opera e Safari até agora suportam apenas custom elements autônomos.

-
- -

Visão de alto nível

- -

O controlador de custom elements em um documento da web é o objeto {{domxref("CustomElementRegistry")}} — este objeto permite que você registre um custom element na página, retorne informações sobre quais custom elements estão registrados, etc..

- -

Para registar um custom element na página, use o método {{domxref("CustomElementRegistry.define()")}}. Isso leva como argumentos:

- -
    -
  • Um {{domxref("DOMString")}} que representa o nome que você está dando ao elemento. Observe que os nomes dos custom elements requerem o uso de um traço (kebab-case); não podem ser palavras isoladas.
    • -
  • Um objeto de classe que define o comportamento do elemento.
    • -
  • Opcionalmente, um objeto de opções contendo uma propriedade extends, que especifica o elemento integrado do qual seu elemento herda, se houver (relevante apenas para elementos integrados personalizados; consulte a definição abaixo).
    • -
- -

Então, por exemplo, podemos definir um custom element word-count (contagem-palavras) assim:

- -
customElements.define('word-count', WordCount, { extends: 'p' });
- -

O elemento é chamado de word-count, seu objeto de classe é WordCount, e estende o elemento {{htmlelement("p")}}.

- -

O objeto de classe de um custom element é escrito usando a sintaxe de classe ES 2015. Por exemplo, WordCount é estruturado assim::

- -
class WordCount extends HTMLParagraphElement {
-  constructor() {
-    // Sempre chame super primeiro no construtor
-    super();
-
-    // Funcionalidade do elemento escrita aqui
-
-    ...
-  }
-}
- -

Este é apenas um exemplo simples, mas você pode fazer mais aqui. É possível definir retornos de chamada de ciclo de vida específicos dentro da classe, que são executados em pontos específicos do ciclo de vida do elemento. Por exemplo, connectedCallback é invocado cada vez que o custom element é anexado a um elemento conectado ao documento, enquanto attributeChangedCallback é invocado quando um dos atributos do elemento customizado é adicionado, removido ou alterado.

- -

Você aprenderá mais sobre eles na seção {{anch("Using the lifecycle callbacks")}} abaixo.

- -

Existem dois tipos de custom elements:

- -
    -
  • Autonomous custom elements são autonômos — eles não herdam de elementos HTML padrão. Você os usa em uma página, literalmente escrevendo-os como um elemento HTML. Por exemplo <popup-info>, ou document.createElement("popup-info").
    • -
  • Customized built-in elements herdam de elementos HTML básicos. Para criar um deles, você deve especificar qual elemento eles estendem (como implícito nos exemplos acima), e eles são usados escrevendo o elemento básico, mas especificando o nome do elemento personalizado no atributo {{htmlattrxref("is")}} (ou propriedade). Por exemplo <p is="word-count">, ou document.createElement("p", { is: "word-count" }).
    • -
- -

Trabalhando com alguns exemplos simples

- -

Neste ponto, vamos examinar mais alguns exemplos simples para mostrar como os custom elements são criados com mais detalhes.

- -

Custom elements autônomos

- -

Vamos dar uma olhada em um exemplo de um custom element autônomo — <popup-info-box> (veja um exemplo ao vivo). Isso pega um imagem de ícone e uma sequência de texto e incorpora o ícone na página. Quando o ícone está em foco, ele exibe o texto em uma caixa pop-up de informações para fornecer mais informações no contexto.

- -

Para começar, o arquivo JavaScript define uma classe chamada PopUpInfo, que estende a classe genérica {{domxref("HTMLElement")}}.

- -
class PopUpInfo extends HTMLElement {
-  constructor() {
-    // Sempre chame super primeiro no construtor
-    super();
-
-    // escreva a funcionalidade do elemento aqui
-
-    ...
-  }
-}
- -

O trecho de código anterior contém a definição do constructor() da classe, que sempre começa chamando super() para que a cadeia de protótipo correta seja estabelecida.

- -

Dentro do construtor, definimos toda a funcionalidade que o elemento terá quando uma instância dele for instanciada. Neste caso, anexamos uma shadow root ao custom element, usamos alguma manipulação de DOM para criar a estrutura de shadow DOM interna do elemento - que é então anexada à shadow root - e, finalmente, anexamos algum CSS à shadow root para estilizá-la.

- -
// Create a shadow root
-this.attachShadow({mode: 'open'}); // sets and returns 'this.shadowRoot'
-
-// Create (nested) span elements
-const wrapper = document.createElement('span');
-wrapper.setAttribute('class','wrapper');
-const icon = wrapper.appendChild(document.createElement('span'));
-icon.setAttribute('class','icon');
-icon.setAttribute('tabindex', 0);
-// Insert icon from defined attribute or default icon
-const img = icon.appendChild(document.createElement('img'));
-img.src = this.hasAttribute('img') ? this.getAttribute('img') : 'img/default.png';
-
-const info = wrapper.appendChild(document.createElement('span'));
-info.setAttribute('class','info');
-// Take attribute content and put it inside the info span
-info.textContent = this.getAttribute('data-text');
-
-// Create some CSS to apply to the shadow dom
-const style = document.createElement('style');
-style.textContent = '.wrapper {' +
-// CSS truncated for brevity
-
-// attach the created elements to the shadow DOM
-this.shadowRoot.append(style,wrapper);
-
-
- -

Por fim, registramos nosso custom element no CustomElementRegistry usando o métododefine() mencionado anteriormente — nos parâmetros especificamos o nome do elemento e, em seguida, o nome da classe que define sua funcionalidade:

- -
customElements.define('popup-info', PopUpInfo);
- -

Agora está disponível para uso em nossa página. Em nosso HTML, nós o usamos assim:

- -
<popup-info img="img/alt.png" data-text="Your card validation code (CVC)
-  is an extra security feature — it is the last 3 or 4 numbers on the
-  back of your card."></popup-info>
- -
-

Note: Você pode ver o código-fonte JavaScript completo aqui.

-
- -

Estilos internos vs. externos

- -

No exemplo acima, aplicamos o estilo ao Shadow DOM usando um elemento {{htmlelement("style")}}, mas é perfeitamente possível fazer isso referenciando uma folha de estilo externa de um elemento {{htmlelement("link")}} em vez disso.

- -

Por exemplo, dê uma olhada neste código de nosso exemplo popup-info-box-external-stylesheet (veja o código-fonte):

- -
// Aplicar estilos externos ao shadow dom
-const linkElem = document.createElement('link');
-linkElem.setAttribute('rel', 'stylesheet');
-linkElem.setAttribute('href', 'style.css');
-
-// Anexe o elemento criado ao shadow dom
-shadow.appendChild(linkElem);
- -

Observe que os elementos {{htmlelement("link")}} não bloqueiam a pintura do shadow root, portanto, pode haver um flash de conteúdo não estilizado (FOUC) enquanto a folha de estilo é carregada.

- -

Muitos navegadores modernos implementam uma otimização para tags {{htmlelement("style")}} clonadas de um nó comum ou que tenham texto idêntico, para permitir que compartilhem uma única folha de estilo de apoio. Com essa otimização, o desempenho dos estilos externo e interno deve ser semelhante.

- -

Customized built-in elements

- -

Agora vamos dar uma olhada em outro exemplo de custom element integrado — expanding-list (ver ao vivo também). Isso transforma qualquer lista não ordenada em um menu de expansão/recolhimento.

- -

Em primeiro lugar, definimos a classe do nosso elemento, da mesma maneira que antes:

- -
class ExpandingList extends HTMLUListElement {
-  constructor() {
-    // Sempre chame super primeiro no construtor
-    super();
-
-    // escreva a funcionalidade do elemento aqui
-
-    ...
-  }
-}
- -

Não explicaremos a funcionalidade do elemento em detalhes aqui, mas você pode descobrir como ele funciona verificando o código-fonte. A única diferença real aqui é que nosso elemento está estendendo a interface {{domxref("HTMLUListElement")}}, e não {{domxref("HTMLElement")}}. Portanto, ele tem todas as características de um elemento {{htmlelement("ul")}} com a funcionalidade que definimos construída no topo, ao invés de ser um elemento autônomo. Isso é o que o torna um elemento integrado personalizado, em vez de um elemento autônomo.

- -

Em seguida, registramos o elemento usando o método define() como antes, exceto que, desta vez, ele também inclui um objeto de opções que detalha de qual elemento nosso elemento personalizado herda:

- -
customElements.define('expanding-list', ExpandingList, { extends: "ul" });
- -

Usar o elemento integrado em um documento da web também parece um pouco diferente:

- -
<ul is="expanding-list">
-
-  ...
-
-</ul>
- -

Você usa um elemento <ul> normalmente, mas especifica o nome do elemento personalizado dentro do atributo is.

- -
-

Nota: Novamente, você pode ver o código-fonte JavaScript completo aqui.

-
- -

Usando os callbacks do ciclo de vida

- -

Você pode definir vários retornos de chamada diferentes dentro da definição de classe de um custom element, que disparam em diferentes pontos do ciclo de vida do elemento:

- -
    -
  • connectedCallback: Chamado sempre que o custom element é anexado a um elemento conectado ao documento. Isso acontecerá sempre que o nó for movido e pode acontecer antes que o conteúdo do elemento tenha sido totalmente analisado. - -
    -

    Nota: connectedCallback pode ser chamado assim que seu elemento não estiver mais conectado, use {{domxref("Node.isConnected")}} para ter certeza.

    -
    -
    • -
  • disconnectedCallback: Invocado sempre que o custom element é desconectado do documento DOM.
    • -
  • adoptedCallback: Invocado sempre que o custom element é movido para um novo documento.
    • -
  • attributeChangedCallback: Invocado sempre que um dos atributos do custom element é adicionado, removido ou alterado. Os atributos a serem observados na mudança são especificados em um método estático observedAttributes
    • -
- -

Vejamos um exemplo em uso. O código abaixo é retirado do exemplo life-cycle-callbacks (ver rodando ao vivo). Este é um exemplo trivial que simplesmente gera um quadrado colorido de tamanho fixo na página. O custom element tem a seguinte aparência:

- -
<custom-square l="100" c="red"></custom-square>
- -

O construtor da classe é realmente simples - aqui anexamos um shadow DOM ao elemento e, em seguida, anexamos os elementos vazios {{htmlelement("div")}} e {{htmlelement("style")}} ao shadow root:

- -
const shadow = this.attachShadow({mode: 'open'});
-
-const div = document.createElement('div');
-const style = document.createElement('style');
-shadow.appendChild(style);
-shadow.appendChild(div);
- -

A função chave neste exemplo é updateStyle() — isso pega um elemento, pega seu shadow root, encontra seu elemento <style>, e adiciona {{cssxref("width")}}, {{cssxref("height")}}, e {{cssxref("background-color")}} para o estilo.

- -
function updateStyle(elem) {
-  const shadow = elem.shadowRoot;
-  shadow.querySelector('style').textContent = `
-    div {
-      width: ${elem.getAttribute('l')}px;
-      height: ${elem.getAttribute('l')}px;
-      background-color: ${elem.getAttribute('c')};
-    }
-  `;
-}
- -

As atualizações reais são todas tratadas pelos retornos de chamada do ciclo de vida, que são colocados dentro da definição da classe como métodos. O connectedCallback() é executado sempre que o elemento é adicionado ao DOM - aqui, executamos a função updateStyle() para garantir que o quadrado seja estilizado conforme definido em seus atributos:

- -
connectedCallback() {
-  console.log('Custom square element added to page.');
-  updateStyle(this);
-}
- -

Os retornos de chamada disconnectedCallback() e adoptedCallback() registram mensagens simples no console para nos informar quando o elemento é removido do DOM ou movido para uma página diferente:

- -
disconnectedCallback() {
-  console.log('Custom square element removed from page.');
-}
-
-adoptedCallback() {
-  console.log('Custom square element moved to new page.');
-}
- -

O attributeChangedCallback() é executado sempre que um dos atributos do elemento é alterado de alguma forma. Como você pode ver por suas propriedades, é possível atuar sobre os atributos individualmente, observando seus nomes e antigos e novos valores de atributos. Neste caso, entretanto, estamos apenas executando a função updateStyle() novamente para garantir que o estilo do quadrado seja atualizado de acordo com os novos valores:

- -
attributeChangedCallback(name, oldValue, newValue) {
-  console.log('Custom square element attributes changed.');
-  updateStyle(this);
-}
- -

Observe que, para fazer com que o retorno de chamada attributeChangedCallback() seja acionado quando um atributo for alterado, você deve observar os atributos. Isso é feito especificando um método static get observedAttributes() dentro da classe de custom element - isso deve retornar um array contendo os nomes dos atributos que você deseja observar:

- -
static get observedAttributes() { return ['c', 'l']; }
- -

Isso é colocado bem no topo do construtor, em nosso exemplo.

- -
-

Nota: Encontre o código-fonte JavaScript completo aqui.

-
- -

Polyfills vs. classes

- -

Polyfills de Custom Element podem corrigir construtores nativos, como HTMLElement e outros, e retornar uma instância diferente daquela recém-criada.

- -

Se você precisar de um constructor e uma chamada de super obrigatória, lembre-se de passar argumentos opcionais e retornar o resultado de tal chamada de super.

- -
class CustomElement extends HTMLElement {
-  constructor(...args) {
-    const self = super(...args);
-    // self functionality written in here
-    // self.addEventListener(...)
-    // return the right context
-    return self;
-  }
-}
- -

Se você não precisa realizar nenhuma operação no construtor, você pode simplesmente omiti-lo para que seu comportamento nativo (veja a seguir) seja preservado.

- -
 constructor(...args) { return super(...args); }
-
- -

Transpiladores vs. classes

- -

Observe que as classes ES2015 não podem ser transpiladas de forma confiável em Babel 6 ou TypeScript visando navegadores legados. Você pode usar o Babel 7 ou o babel-plugin-transform-builtin-classes para Babel 6, e target ES2015 em TypeScript em vez do legado..

- -

Bibliotecas

- -

Existem várias bibliotecas que são construídas em Web Components com o objetivo de aumentar o nível de abstração ao criar elementos personalizados. Algumas dessas bibliotecas são snuggsi ツ, X-Tag, Slim.js, LitElement, Smart, Stencil e hyperHTML-Element.

diff --git a/files/pt-br/web/web_components/using_custom_elements/index.html b/files/pt-br/web/web_components/using_custom_elements/index.html new file mode 100644 index 0000000000..55af21ca48 --- /dev/null +++ b/files/pt-br/web/web_components/using_custom_elements/index.html @@ -0,0 +1,289 @@ +--- +title: Usando custom elements +slug: Web/Web_Components/Usando_custom_elements +tags: + - Autonomos + - Classes + - Guide + - HTML + - Web Components + - custom elements + - customized +translation_of: Web/Web_Components/Using_custom_elements +--- +
{{DefaultAPISidebar("Web Components")}}
+ +

Um dos principais recursos do padrão de Web Components é a capacidade de criar elementos personalizados que encapsulam sua funcionalidade em uma página HTML, em vez de ter que se contentar com um lote longo e aninhado de elementos que, juntos, fornecem um recurso de página personalizada. Este artigo apresenta o uso da API de Custom Elements.

+ +
+

Nota: Custom elements são suportados por padrão no Firefox, Chrome e Edge (76). Opera e Safari até agora suportam apenas custom elements autônomos.

+
+ +

Visão de alto nível

+ +

O controlador de custom elements em um documento da web é o objeto {{domxref("CustomElementRegistry")}} — este objeto permite que você registre um custom element na página, retorne informações sobre quais custom elements estão registrados, etc..

+ +

Para registar um custom element na página, use o método {{domxref("CustomElementRegistry.define()")}}. Isso leva como argumentos:

+ +
    +
  • Um {{domxref("DOMString")}} que representa o nome que você está dando ao elemento. Observe que os nomes dos custom elements requerem o uso de um traço (kebab-case); não podem ser palavras isoladas.
    • +
  • Um objeto de classe que define o comportamento do elemento.
    • +
  • Opcionalmente, um objeto de opções contendo uma propriedade extends, que especifica o elemento integrado do qual seu elemento herda, se houver (relevante apenas para elementos integrados personalizados; consulte a definição abaixo).
    • +
+ +

Então, por exemplo, podemos definir um custom element word-count (contagem-palavras) assim:

+ +
customElements.define('word-count', WordCount, { extends: 'p' });
+ +

O elemento é chamado de word-count, seu objeto de classe é WordCount, e estende o elemento {{htmlelement("p")}}.

+ +

O objeto de classe de um custom element é escrito usando a sintaxe de classe ES 2015. Por exemplo, WordCount é estruturado assim::

+ +
class WordCount extends HTMLParagraphElement {
+  constructor() {
+    // Sempre chame super primeiro no construtor
+    super();
+
+    // Funcionalidade do elemento escrita aqui
+
+    ...
+  }
+}
+ +

Este é apenas um exemplo simples, mas você pode fazer mais aqui. É possível definir retornos de chamada de ciclo de vida específicos dentro da classe, que são executados em pontos específicos do ciclo de vida do elemento. Por exemplo, connectedCallback é invocado cada vez que o custom element é anexado a um elemento conectado ao documento, enquanto attributeChangedCallback é invocado quando um dos atributos do elemento customizado é adicionado, removido ou alterado.

+ +

Você aprenderá mais sobre eles na seção {{anch("Using the lifecycle callbacks")}} abaixo.

+ +

Existem dois tipos de custom elements:

+ +
    +
  • Autonomous custom elements são autonômos — eles não herdam de elementos HTML padrão. Você os usa em uma página, literalmente escrevendo-os como um elemento HTML. Por exemplo <popup-info>, ou document.createElement("popup-info").
    • +
  • Customized built-in elements herdam de elementos HTML básicos. Para criar um deles, você deve especificar qual elemento eles estendem (como implícito nos exemplos acima), e eles são usados escrevendo o elemento básico, mas especificando o nome do elemento personalizado no atributo {{htmlattrxref("is")}} (ou propriedade). Por exemplo <p is="word-count">, ou document.createElement("p", { is: "word-count" }).
    • +
+ +

Trabalhando com alguns exemplos simples

+ +

Neste ponto, vamos examinar mais alguns exemplos simples para mostrar como os custom elements são criados com mais detalhes.

+ +

Custom elements autônomos

+ +

Vamos dar uma olhada em um exemplo de um custom element autônomo — <popup-info-box> (veja um exemplo ao vivo). Isso pega um imagem de ícone e uma sequência de texto e incorpora o ícone na página. Quando o ícone está em foco, ele exibe o texto em uma caixa pop-up de informações para fornecer mais informações no contexto.

+ +

Para começar, o arquivo JavaScript define uma classe chamada PopUpInfo, que estende a classe genérica {{domxref("HTMLElement")}}.

+ +
class PopUpInfo extends HTMLElement {
+  constructor() {
+    // Sempre chame super primeiro no construtor
+    super();
+
+    // escreva a funcionalidade do elemento aqui
+
+    ...
+  }
+}
+ +

O trecho de código anterior contém a definição do constructor() da classe, que sempre começa chamando super() para que a cadeia de protótipo correta seja estabelecida.

+ +

Dentro do construtor, definimos toda a funcionalidade que o elemento terá quando uma instância dele for instanciada. Neste caso, anexamos uma shadow root ao custom element, usamos alguma manipulação de DOM para criar a estrutura de shadow DOM interna do elemento - que é então anexada à shadow root - e, finalmente, anexamos algum CSS à shadow root para estilizá-la.

+ +
// Create a shadow root
+this.attachShadow({mode: 'open'}); // sets and returns 'this.shadowRoot'
+
+// Create (nested) span elements
+const wrapper = document.createElement('span');
+wrapper.setAttribute('class','wrapper');
+const icon = wrapper.appendChild(document.createElement('span'));
+icon.setAttribute('class','icon');
+icon.setAttribute('tabindex', 0);
+// Insert icon from defined attribute or default icon
+const img = icon.appendChild(document.createElement('img'));
+img.src = this.hasAttribute('img') ? this.getAttribute('img') : 'img/default.png';
+
+const info = wrapper.appendChild(document.createElement('span'));
+info.setAttribute('class','info');
+// Take attribute content and put it inside the info span
+info.textContent = this.getAttribute('data-text');
+
+// Create some CSS to apply to the shadow dom
+const style = document.createElement('style');
+style.textContent = '.wrapper {' +
+// CSS truncated for brevity
+
+// attach the created elements to the shadow DOM
+this.shadowRoot.append(style,wrapper);
+
+
+ +

Por fim, registramos nosso custom element no CustomElementRegistry usando o métododefine() mencionado anteriormente — nos parâmetros especificamos o nome do elemento e, em seguida, o nome da classe que define sua funcionalidade:

+ +
customElements.define('popup-info', PopUpInfo);
+ +

Agora está disponível para uso em nossa página. Em nosso HTML, nós o usamos assim:

+ +
<popup-info img="img/alt.png" data-text="Your card validation code (CVC)
+  is an extra security feature — it is the last 3 or 4 numbers on the
+  back of your card."></popup-info>
+ +
+

Note: Você pode ver o código-fonte JavaScript completo aqui.

+
+ +

Estilos internos vs. externos

+ +

No exemplo acima, aplicamos o estilo ao Shadow DOM usando um elemento {{htmlelement("style")}}, mas é perfeitamente possível fazer isso referenciando uma folha de estilo externa de um elemento {{htmlelement("link")}} em vez disso.

+ +

Por exemplo, dê uma olhada neste código de nosso exemplo popup-info-box-external-stylesheet (veja o código-fonte):

+ +
// Aplicar estilos externos ao shadow dom
+const linkElem = document.createElement('link');
+linkElem.setAttribute('rel', 'stylesheet');
+linkElem.setAttribute('href', 'style.css');
+
+// Anexe o elemento criado ao shadow dom
+shadow.appendChild(linkElem);
+ +

Observe que os elementos {{htmlelement("link")}} não bloqueiam a pintura do shadow root, portanto, pode haver um flash de conteúdo não estilizado (FOUC) enquanto a folha de estilo é carregada.

+ +

Muitos navegadores modernos implementam uma otimização para tags {{htmlelement("style")}} clonadas de um nó comum ou que tenham texto idêntico, para permitir que compartilhem uma única folha de estilo de apoio. Com essa otimização, o desempenho dos estilos externo e interno deve ser semelhante.

+ +

Customized built-in elements

+ +

Agora vamos dar uma olhada em outro exemplo de custom element integrado — expanding-list (ver ao vivo também). Isso transforma qualquer lista não ordenada em um menu de expansão/recolhimento.

+ +

Em primeiro lugar, definimos a classe do nosso elemento, da mesma maneira que antes:

+ +
class ExpandingList extends HTMLUListElement {
+  constructor() {
+    // Sempre chame super primeiro no construtor
+    super();
+
+    // escreva a funcionalidade do elemento aqui
+
+    ...
+  }
+}
+ +

Não explicaremos a funcionalidade do elemento em detalhes aqui, mas você pode descobrir como ele funciona verificando o código-fonte. A única diferença real aqui é que nosso elemento está estendendo a interface {{domxref("HTMLUListElement")}}, e não {{domxref("HTMLElement")}}. Portanto, ele tem todas as características de um elemento {{htmlelement("ul")}} com a funcionalidade que definimos construída no topo, ao invés de ser um elemento autônomo. Isso é o que o torna um elemento integrado personalizado, em vez de um elemento autônomo.

+ +

Em seguida, registramos o elemento usando o método define() como antes, exceto que, desta vez, ele também inclui um objeto de opções que detalha de qual elemento nosso elemento personalizado herda:

+ +
customElements.define('expanding-list', ExpandingList, { extends: "ul" });
+ +

Usar o elemento integrado em um documento da web também parece um pouco diferente:

+ +
<ul is="expanding-list">
+
+  ...
+
+</ul>
+ +

Você usa um elemento <ul> normalmente, mas especifica o nome do elemento personalizado dentro do atributo is.

+ +
+

Nota: Novamente, você pode ver o código-fonte JavaScript completo aqui.

+
+ +

Usando os callbacks do ciclo de vida

+ +

Você pode definir vários retornos de chamada diferentes dentro da definição de classe de um custom element, que disparam em diferentes pontos do ciclo de vida do elemento:

+ +
    +
  • connectedCallback: Chamado sempre que o custom element é anexado a um elemento conectado ao documento. Isso acontecerá sempre que o nó for movido e pode acontecer antes que o conteúdo do elemento tenha sido totalmente analisado. + +
    +

    Nota: connectedCallback pode ser chamado assim que seu elemento não estiver mais conectado, use {{domxref("Node.isConnected")}} para ter certeza.

    +
    +
    • +
  • disconnectedCallback: Invocado sempre que o custom element é desconectado do documento DOM.
    • +
  • adoptedCallback: Invocado sempre que o custom element é movido para um novo documento.
    • +
  • attributeChangedCallback: Invocado sempre que um dos atributos do custom element é adicionado, removido ou alterado. Os atributos a serem observados na mudança são especificados em um método estático observedAttributes
    • +
+ +

Vejamos um exemplo em uso. O código abaixo é retirado do exemplo life-cycle-callbacks (ver rodando ao vivo). Este é um exemplo trivial que simplesmente gera um quadrado colorido de tamanho fixo na página. O custom element tem a seguinte aparência:

+ +
<custom-square l="100" c="red"></custom-square>
+ +

O construtor da classe é realmente simples - aqui anexamos um shadow DOM ao elemento e, em seguida, anexamos os elementos vazios {{htmlelement("div")}} e {{htmlelement("style")}} ao shadow root:

+ +
const shadow = this.attachShadow({mode: 'open'});
+
+const div = document.createElement('div');
+const style = document.createElement('style');
+shadow.appendChild(style);
+shadow.appendChild(div);
+ +

A função chave neste exemplo é updateStyle() — isso pega um elemento, pega seu shadow root, encontra seu elemento <style>, e adiciona {{cssxref("width")}}, {{cssxref("height")}}, e {{cssxref("background-color")}} para o estilo.

+ +
function updateStyle(elem) {
+  const shadow = elem.shadowRoot;
+  shadow.querySelector('style').textContent = `
+    div {
+      width: ${elem.getAttribute('l')}px;
+      height: ${elem.getAttribute('l')}px;
+      background-color: ${elem.getAttribute('c')};
+    }
+  `;
+}
+ +

As atualizações reais são todas tratadas pelos retornos de chamada do ciclo de vida, que são colocados dentro da definição da classe como métodos. O connectedCallback() é executado sempre que o elemento é adicionado ao DOM - aqui, executamos a função updateStyle() para garantir que o quadrado seja estilizado conforme definido em seus atributos:

+ +
connectedCallback() {
+  console.log('Custom square element added to page.');
+  updateStyle(this);
+}
+ +

Os retornos de chamada disconnectedCallback() e adoptedCallback() registram mensagens simples no console para nos informar quando o elemento é removido do DOM ou movido para uma página diferente:

+ +
disconnectedCallback() {
+  console.log('Custom square element removed from page.');
+}
+
+adoptedCallback() {
+  console.log('Custom square element moved to new page.');
+}
+ +

O attributeChangedCallback() é executado sempre que um dos atributos do elemento é alterado de alguma forma. Como você pode ver por suas propriedades, é possível atuar sobre os atributos individualmente, observando seus nomes e antigos e novos valores de atributos. Neste caso, entretanto, estamos apenas executando a função updateStyle() novamente para garantir que o estilo do quadrado seja atualizado de acordo com os novos valores:

+ +
attributeChangedCallback(name, oldValue, newValue) {
+  console.log('Custom square element attributes changed.');
+  updateStyle(this);
+}
+ +

Observe que, para fazer com que o retorno de chamada attributeChangedCallback() seja acionado quando um atributo for alterado, você deve observar os atributos. Isso é feito especificando um método static get observedAttributes() dentro da classe de custom element - isso deve retornar um array contendo os nomes dos atributos que você deseja observar:

+ +
static get observedAttributes() { return ['c', 'l']; }
+ +

Isso é colocado bem no topo do construtor, em nosso exemplo.

+ +
+

Nota: Encontre o código-fonte JavaScript completo aqui.

+
+ +

Polyfills vs. classes

+ +

Polyfills de Custom Element podem corrigir construtores nativos, como HTMLElement e outros, e retornar uma instância diferente daquela recém-criada.

+ +

Se você precisar de um constructor e uma chamada de super obrigatória, lembre-se de passar argumentos opcionais e retornar o resultado de tal chamada de super.

+ +
class CustomElement extends HTMLElement {
+  constructor(...args) {
+    const self = super(...args);
+    // self functionality written in here
+    // self.addEventListener(...)
+    // return the right context
+    return self;
+  }
+}
+ +

Se você não precisa realizar nenhuma operação no construtor, você pode simplesmente omiti-lo para que seu comportamento nativo (veja a seguir) seja preservado.

+ +
 constructor(...args) { return super(...args); }
+
+ +

Transpiladores vs. classes

+ +

Observe que as classes ES2015 não podem ser transpiladas de forma confiável em Babel 6 ou TypeScript visando navegadores legados. Você pode usar o Babel 7 ou o babel-plugin-transform-builtin-classes para Babel 6, e target ES2015 em TypeScript em vez do legado..

+ +

Bibliotecas

+ +

Existem várias bibliotecas que são construídas em Web Components com o objetivo de aumentar o nível de abstração ao criar elementos personalizados. Algumas dessas bibliotecas são snuggsi ツ, X-Tag, Slim.js, LitElement, Smart, Stencil e hyperHTML-Element.

diff --git a/files/pt-br/web/xslt/xslt_js_interface_in_gecko/advanced_example/index.html b/files/pt-br/web/xslt/xslt_js_interface_in_gecko/advanced_example/index.html new file mode 100644 index 0000000000..132fba5881 --- /dev/null +++ b/files/pt-br/web/xslt/xslt_js_interface_in_gecko/advanced_example/index.html @@ -0,0 +1,100 @@ +--- +title: Exemplo Avançado +slug: The_XSLT_JavaScript_Interface_in_Gecko/Advanced_Example +translation_of: Web/XSLT/XSLT_JS_interface_in_Gecko/Advanced_Example +--- +

Exemplo Avançado

+ +

O exemplo avançado apresentará vários tipos de divs baseado em seu conteúdo. O exemplo permite tipificar o conteúdo muitas vezes, alternando entre tipos ascendente ou descendente. O JavaScript apenas carrega o arquivo .xsl a primeira vez, e prepara a variável xslloaded verdadeira (true) assim que o arquivo tiver terminado de carregar. Usando o método getParameter no obejto XSLTProcessor, o código pode decidir pelo tipo ascendente ou descendente. Se o parâmetro estiver vazio o padrão é ascendente (primeira vezes que o tipo aparece, como não há valor para isto no aarquivo XSLT). O valor do tipo é colocado usando setParameter.

+ +

The XSLT file has a parameter called myOrder that JavaScript sets to change the sorting method. The xsl:sort element's order attribute can access the value of the parameter using $myOrder. However, the value needs to be an XPATH expression and not a string, so {$myOrder} is used. Using {} evaluates the content as an XPath expression.

+ +

Once the transformation is complete, the result is appened to the document, as shown in this example.

+ +

Figure 7 : Sorting based on div contentview example

+ +
// XHTML Fragment:
+
+<div id="example">
+  <div>1</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+  <div>6</div>
+  <div>7</div>
+  <div>8</div>
+  <div>9</div>
+  <div>10</div>
+</div>
+
+// JavaScript
+
+var xslRef;
+var xslloaded = false;
+var xsltProcessor = new XSLTProcessor();
+var myDOM;
+
+var xmlRef = document.implementation.createDocument("", "", null);
+
+function sort() {
+  if (!xslloaded){
+    p = new XMLHttpRequest();
+    p.open("GET", "example2.xsl", false);
+    p.send(null);
+
+    xslRef = p.responseXML;
+    xsltProcessor.importStylesheet(xslRef);
+    xslloaded = true;
+  }
+
+  // create a new XML document in memory
+  xmlRef = document.implementation.createDocument("", "", null);
+
+  // we want to move a part of the DOM from an HTML document to an XML document.
+  // importNode is used to clone the nodes we want to process via XSLT - true makes it do a deep clone
+  var myNode = document.getElementById("example");
+  var clonedNode = xmlRef.importNode(myNode, true);
+
+  // after cloning, we append
+  xmlRef.appendChild(clonedNode);
+
+  // set the sorting parameter in the XSL file
+  var sortVal = xsltProcessor.getParameter(null, "myOrder");
+
+  if (sortVal == "" || sortVal == "descending")
+    xsltProcessor.setParameter(null, "myOrder", "ascending");
+  else
+    xsltProcessor.setParameter(null, "myOrder", "descending");
+
+  // initiate the transformation
+  var fragment = xsltProcessor.transformToFragment(xmlRef, document);
+
+  // clear the contents
+  document.getElementById("example").innerHTML = "";
+
+  myDOM = fragment;
+  // add the new content from the transformation
+  document.getElementById("example").appendChild(fragment)
+}
+
+// XSL Stylesheet:
+
+<?xml version="1.0" encoding="UTF-8"?>
+<xsl:stylesheet version="1.0" xmlns="http://www.w3.org/1999/xhtml" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
+  <xsl:output method="html" indent="yes" />
+
+  <xsl:param name="myOrder" />
+
+  <xsl:template match="/">
+
+    <xsl:apply-templates select="/div//div">
+      <xsl:sort select="." data-type="number" order="{$myOrder}" />
+    </xsl:apply-templates>
+  </xsl:template>
+
+  <xsl:template match="div">
+    <xsl:copy-of select="." />
+  </xsl:template>
+</xsl:stylesheet>
+
diff --git a/files/pt-br/web/xslt/xslt_js_interface_in_gecko/index.html b/files/pt-br/web/xslt/xslt_js_interface_in_gecko/index.html new file mode 100644 index 0000000000..7bcbbc6cd0 --- /dev/null +++ b/files/pt-br/web/xslt/xslt_js_interface_in_gecko/index.html @@ -0,0 +1,24 @@ +--- +title: The XSLT/JavaScript Interface in Gecko +slug: The_XSLT_JavaScript_Interface_in_Gecko +tags: + - DOM + - NeedsTranslation + - TopicStub + - XSLT +translation_of: Web/XSLT/XSLT_JS_interface_in_Gecko +--- +
    +
  1. Introduction
    2. +
  2. JavaScript/XSLT Bindings
    3. +
  3. Basic Example
    4. +
  4. Setting Parameters
    5. +
  5. Advanced Example
    6. +
  6. Interface List
    7. +
  7. Resources
    8. +
+ +

See also

+ -- cgit v1.2.3-54-g00ecf