From cb9e359a51c3249d8f5157db69d43fd413ddeda6 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:45:12 +0100 Subject: unslug ca: move --- .../index.html" | 33 - .../cascade_and_inheritance/index.html | 151 ++++ .../learn/css/building_blocks/index.html | 342 ++++++++ .../learn/css/building_blocks/selectors/index.html | 456 ++++++++++ .../css/building_blocks/styling_tables/index.html | 475 +++++++++++ .../building_blocks/values_and_units/index.html | 354 ++++++++ .../ca/conflicting/learn/css/css_layout/index.html | 383 +++++++++ .../first_steps/how_css_is_structured/index.html | 174 ++++ .../learn/css/first_steps/how_css_works/index.html | 130 +++ .../index.html | 111 +++ .../index.html | 120 +++ .../conflicting/learn/css/first_steps/index.html | 56 ++ .../learn/css/styling_text/fundamentals/index.html | 162 ++++ .../css/styling_text/styling_lists/index.html | 276 ++++++ files/ca/conflicting/web/guide/index.html | 101 +++ .../reference/global_objects/boolean/index.html | 118 +++ .../reference/global_objects/dataview/index.html | 147 ++++ .../reference/global_objects/date/index.html | 222 +++++ .../reference/global_objects/error/index.html | 151 ++++ .../reference/global_objects/evalerror/index.html | 124 +++ .../reference/global_objects/map/index.html | 126 +++ .../reference/global_objects/number/index.html | 126 +++ .../reference/global_objects/object/index.html | 215 +++++ .../reference/global_objects/set/index.html | 124 +++ .../global_objects/syntaxerror/index.html | 122 +++ .../reference/global_objects/weakmap/index.html | 133 +++ .../reference/global_objects/weakset/index.html | 132 +++ .../web/javascript/reference/operators/index.html | 287 +++++++ .../index.html | 719 ++++++++++++++++ .../index.html | 302 +++++++ .../ca/firefox_2_per_a_desenvolupadors/index.html | 46 - "files/ca/glossary/adre\303\247a_ip/index.html" | 21 - files/ca/glossary/atribut/index.html | 19 - files/ca/glossary/attribute/index.html | 19 + files/ca/glossary/browser/index.html | 27 + "files/ca/glossary/car\303\240cter/index.html" | 22 - files/ca/glossary/character/index.html | 22 + files/ca/glossary/character_encoding/index.html | 26 + .../index.html" | 26 - files/ca/glossary/etiqueta/index.html | 30 - "files/ca/glossary/funci\303\263/index.html" | 74 -- files/ca/glossary/function/index.html | 74 ++ files/ca/glossary/ip_address/index.html | 21 + files/ca/glossary/method/index.html | 29 + "files/ca/glossary/m\303\250tode/index.html" | 29 - files/ca/glossary/navegador/index.html | 27 - files/ca/glossary/object/index.html | 21 + files/ca/glossary/object_reference/index.html | 19 + files/ca/glossary/objecte/index.html | 21 - files/ca/glossary/primitiu/index.html | 36 - files/ca/glossary/primitive/index.html | 36 + files/ca/glossary/property/index.html | 17 + files/ca/glossary/propietat/index.html | 17 - .../refer\303\250ncies_a_objectes/index.html" | 19 - files/ca/glossary/scope/index.html | 19 + files/ca/glossary/server/index.html | 25 + files/ca/glossary/servidor/index.html | 25 - files/ca/glossary/speculative_parsing/index.html | 29 + files/ca/glossary/tag/index.html | 30 + files/ca/glossary/valor/index.html | 18 - files/ca/glossary/value/index.html | 18 + "files/ca/glossary/\303\240mbit/index.html" | 19 - .../accessibility/que_es_accessibilitat/index.html | 211 ----- .../accessibility/what_is_accessibility/index.html | 211 +++++ .../building_blocks/a_cool_looking_box/index.html | 85 ++ .../backgrounds_and_borders/index.html | 307 +++++++ .../cascada_i_her\303\250ncia/index.html" | 333 -------- .../cascade_and_inheritance/index.html | 333 ++++++++ .../creating_fancy_letterheaded_paper/index.html | 97 +++ .../css/building_blocks/debugging_css/index.html | 198 +++++ .../css/building_blocks/depurar_el_css/index.html | 198 ----- .../desbordament_de_contingut/index.html | 123 --- .../dimensionar_elements_en_css/index.html | 129 --- .../css/building_blocks/fons_i_vores/index.html | 307 ------- .../fundamental_css_comprehension/index.html | 114 +++ .../building_blocks/overflowing_content/index.html | 123 +++ .../selectors/attribute_selectors/index.html | 154 ++++ .../selectors/combinators/index.html | 111 +++ .../learn/css/building_blocks/selectors/index.html | 223 +++++ .../pseudo-classes_and_pseudo-elements/index.html | 398 +++++++++ .../type_class_and_id_selectors/index.html | 117 +++ .../selectors_css/combinadors/index.html | 111 --- .../css/building_blocks/selectors_css/index.html | 223 ----- .../pseudo-classes_and_pseudo-elements/index.html | 398 --------- .../selectors_css/selectors_atribut/index.html | 154 ---- .../selectors_de_tipus_classe_i_id/index.html | 117 --- .../building_blocks/sizing_items_in_css/index.html | 129 +++ .../valors_i_unitats_css/index.html | 394 --------- .../building_blocks/values_and_units/index.html | 394 +++++++++ .../caixa_aspecte_interessant/index.html | 85 -- .../caixes_estil/creaci\303\263_carta/index.html" | 97 --- files/ca/learn/css/css_layout/flexbox/index.html | 330 +++++++ files/ca/learn/css/css_layout/floats/index.html | 516 +++++++++++ files/ca/learn/css/css_layout/grids/index.html | 699 +++++++++++++++ files/ca/learn/css/css_layout/index.html | 66 ++ .../learn/css/css_layout/introduction/index.html | 700 +++++++++++++++ .../ca/learn/css/css_layout/normal_flow/index.html | 95 +++ .../ca/learn/css/css_layout/positioning/index.html | 467 ++++++++++ .../practical_positioning_examples/index.html | 404 +++++++++ .../css/css_layout/responsive_design/index.html | 324 +++++++ .../supporting_older_browsers/index.html | 237 +++++ .../css/disseny_css/disseny_responsiu/index.html | 324 ------- .../index.html" | 404 --------- files/ca/learn/css/disseny_css/flexbox/index.html | 330 ------- .../ca/learn/css/disseny_css/flotadors/index.html | 516 ----------- .../learn/css/disseny_css/flux_normal/index.html | 95 --- files/ca/learn/css/disseny_css/graelles/index.html | 699 --------------- files/ca/learn/css/disseny_css/index.html | 66 -- .../disseny_css/introduccio_disseny_css/index.html | 700 --------------- .../learn/css/disseny_css/posicionament/index.html | 467 ---------- .../suport_en_navegadors_antics/index.html | 237 ----- .../index.html" | 112 --- .../estilitzar_enlla\303\247os/index.html" | 424 --------- .../learn/css/estilitzar_text/fonts_web/index.html | 193 ----- files/ca/learn/css/estilitzar_text/index.html | 55 -- .../css/estilitzar_text/llistes_estil/index.html | 382 --------- .../css/estilitzar_text/text_fonamental/index.html | 739 ---------------- .../com_comen\303\247ar_amb_css/index.html" | 254 ------ .../first_steps/com_estructurar_el_css/index.html | 512 ----------- .../css/first_steps/com_funciona_el_css/index.html | 156 ---- .../css/first_steps/getting_started/index.html | 254 ++++++ .../first_steps/how_css_is_structured/index.html | 512 +++++++++++ .../learn/css/first_steps/how_css_works/index.html | 156 ++++ .../learn/css/first_steps/que_es_el_css/index.html | 119 --- .../learn/css/first_steps/what_is_css/index.html | 119 +++ .../comprensi\303\263_css_fonamental/index.html" | 114 --- .../learn/css/styling_text/fundamentals/index.html | 739 ++++++++++++++++ files/ca/learn/css/styling_text/index.html | 55 ++ .../css/styling_text/styling_links/index.html | 424 +++++++++ .../css/styling_text/styling_lists/index.html | 382 +++++++++ .../styling_text/typesetting_a_homepage/index.html | 112 +++ .../ca/learn/css/styling_text/web_fonts/index.html | 193 +++++ .../forms/basic_native_form_controls/index.html | 325 +++++++ files/ca/learn/forms/form_validation/index.html | 829 ++++++++++++++++++ .../forms/how_to_structure_a_web_form/index.html | 316 +++++++ files/ca/learn/forms/index.html | 356 ++++++++ files/ca/learn/forms/your_first_form/index.html | 298 +++++++ .../com_funciona_web/index.html | 99 --- .../css_basics/index.html | 276 ++++++ .../css_b\303\240sic/index.html" | 276 ------ .../dealing_with_files/index.html | 104 +++ .../how_the_web_works/index.html | 99 +++ .../installing_basic_software/index.html | 67 ++ .../index.html" | 67 -- .../javascript_basics/index.html | 394 +++++++++ .../javascript_b\303\240sic/index.html" | 394 --------- .../publicar_nostre_lloc_web/index.html | 115 --- .../publishing_your_website/index.html | 115 +++ .../index.html" | 103 --- .../tractar_amb_arxius/index.html | 104 --- .../what_will_your_website_look_like/index.html | 103 +++ .../com_estructurar_un_formulari_web/index.html | 316 ------- .../controls_de_formulari_originals/index.html | 325 ------- .../html/forms/el_teu_primer_formulari/index.html | 298 ------- files/ca/learn/html/forms/index.html | 356 -------- .../html/forms/validacio_formularis/index.html | 829 ------------------ .../author_fast-loading_html_pages/index.html | 186 ++++ .../crear_hipervincles/index.html" | 320 ------- .../depurar_html/index.html" | 171 ---- .../document_i_estructura_del_lloc_web/index.html" | 267 ------ .../index.html" | 93 -- .../fonaments_de_text_html/index.html" | 950 --------------------- .../format_de_text_avan\303\247at/index.html" | 677 --------------- .../getting_started/index.html" | 735 ---------------- .../html/introducci\303\263_al_html/index.html" | 65 -- .../marcatge_una_carta/index.html" | 90 -- .../index.html" | 271 ------ .../advanced_text_formatting/index.html | 677 +++++++++++++++ .../creating_hyperlinks/index.html | 320 +++++++ .../introduction_to_html/debugging_html/index.html | 171 ++++ .../document_and_website_structure/index.html | 267 ++++++ .../getting_started/index.html | 735 ++++++++++++++++ .../html_text_fundamentals/index.html | 950 +++++++++++++++++++++ .../ca/learn/html/introduction_to_html/index.html | 65 ++ .../marking_up_a_letter/index.html | 90 ++ .../structuring_a_page_of_content/index.html | 93 ++ .../the_head_metadata_in_html/index.html | 271 ++++++ .../adding_vector_graphics_to_the_web/index.html | 287 +++++++ .../images_in_html/index.html | 373 ++++++++ .../learn/html/multimedia_and_embedding/index.html | 75 ++ .../mozilla_splash_page/index.html | 109 +++ .../other_embedding_technologies/index.html | 318 +++++++ .../responsive_images/index.html | 254 ++++++ .../video_and_audio_content/index.html | 294 +++++++ .../index.html" | 287 ------- .../index.html" | 294 ------- .../index.html" | 318 ------- .../images_in_html/index.html" | 373 -------- .../imatges_sensibles/index.html" | 254 ------ .../html/multim\303\250dia_i_incrustar/index.html" | 75 -- .../index.html" | 109 --- files/ca/learn/html/tables/advanced/index.html | 462 ++++++++++ files/ca/learn/html/tables/basics/index.html | 618 ++++++++++++++ files/ca/learn/html/tables/index.html | 45 + .../html/tables/structuring_planet_data/index.html | 79 ++ .../index.html" | 79 -- .../fonaments_de_la_taula_html/index.html | 618 -------------- files/ca/learn/html/taules_html/index.html | 45 - .../index.html" | 462 ---------- .../manipulating_documents/index.html | 147 ++++ files/ca/learn/javascript/objects/index.html | 362 ++++++++ files/ca/mdn/at_ten/index.html | 37 + files/ca/mdn/comunitat/index.html | 54 -- .../howto/crear_un_compte_mdn/index.html | 38 - files/ca/mdn/contribute/processes/index.html | 14 + files/ca/mdn/contribute/processos/index.html | 14 - files/ca/mdn/kuma/index.html | 26 - files/ca/mdn/yari/index.html | 26 + files/ca/mdn_at_ten/index.html | 37 - files/ca/mozilla/firefox/releases/2/index.html | 46 + files/ca/orphaned/mdn/community/index.html | 54 ++ .../howto/create_an_mdn_account/index.html | 38 + .../orphaned/web/html/element/command/index.html | 156 ++++ .../orphaned/web/html/element/element/index.html | 93 ++ .../web/html/global_attributes/dropzone/index.html | 99 +++ .../global_objects/array/prototype/index.html | 203 +++++ .../tutorial/advanced_animations/index.html | 380 +++++++++ .../animacions_avan\303\247ades/index.html" | 380 --------- .../animacions_b\303\240siques/index.html" | 335 -------- .../tutorial/aplicar_estils_i_colors/index.html | 733 ---------------- .../tutorial/applying_styles_and_colors/index.html | 733 ++++++++++++++++ .../tutorial/basic_animations/index.html | 335 ++++++++ .../api/canvas_api/tutorial/basic_usage/index.html | 158 ++++ .../tutorial/composici\303\263/index.html" | 113 --- .../api/canvas_api/tutorial/compositing/index.html | 113 +++ .../canvas_api/tutorial/dibuixar_text/index.html | 165 ---- .../canvas_api/tutorial/drawing_text/index.html | 165 ++++ .../manipular_p\303\255xels_amb_canvas/index.html" | 307 ------- .../pixel_manipulation_with_canvas/index.html | 307 +++++++ .../canvas_api/tutorial/transformacions/index.html | 290 ------- .../canvas_api/tutorial/transformations/index.html | 290 +++++++ .../tutorial/\303\272s_b\303\240sic/index.html" | 158 ---- files/ca/web/css/_colon_any/index.html | 198 ----- files/ca/web/css/_colon_is/index.html | 198 +++++ .../web/css/adjacent_sibling_combinator/index.html | 135 +++ files/ca/web/css/attribute_selectors/index.html | 250 ++++++ files/ca/web/css/child_combinator/index.html | 135 +++ files/ca/web/css/class_selectors/index.html | 139 +++ .../dominar_el_col.lapse_del_marge/index.html | 89 -- .../index.html" | 67 -- .../introduction_to_the_css_box_model/index.html | 67 ++ .../mastering_margin_collapsing/index.html | 89 ++ files/ca/web/css/css_selectors/index.html | 156 ++++ .../index.html | 69 ++ files/ca/web/css/descendant_combinator/index.html | 170 ++++ .../web/css/general_sibling_combinator/index.html | 129 +++ files/ca/web/css/id_selectors/index.html | 134 +++ files/ca/web/css/reference/index.html | 206 +++++ .../ca/web/css/refer\303\251ncia_css/index.html" | 206 ----- files/ca/web/css/selectors_css/index.html | 156 ---- .../index.html | 69 -- files/ca/web/css/selectors_d'atribut/index.html | 250 ------ files/ca/web/css/selectors_de_classe/index.html | 139 --- .../ca/web/css/selectors_de_descendents/index.html | 170 ---- files/ca/web/css/selectors_de_fills/index.html | 135 --- .../css/selectors_de_germans_adjacents/index.html | 135 --- files/ca/web/css/selectors_de_tipus/index.html | 135 --- .../css/selectors_general_de_germans/index.html | 129 --- files/ca/web/css/selectors_id/index.html | 134 --- files/ca/web/css/selectors_universal/index.html | 176 ---- files/ca/web/css/sintaxi/index.html | 79 -- files/ca/web/css/syntax/index.html | 79 ++ files/ca/web/css/type_selectors/index.html | 135 +++ files/ca/web/css/universal_selectors/index.html | 176 ++++ files/ca/web/guide/ajax/getting_started/index.html | 192 +++++ files/ca/web/guide/ajax/primers_passos/index.html | 192 ----- .../web/guide/css/inici_en_css/caixes/index.html | 342 -------- .../cascada_i_her\303\250ncia/index.html" | 151 ---- .../ca/web/guide/css/inici_en_css/color/index.html | 354 -------- .../inici_en_css/com_funciona_el_css/index.html | 130 --- .../guide/css/inici_en_css/css_llegible/index.html | 174 ---- .../web/guide/css/inici_en_css/disseny/index.html | 383 --------- .../css/inici_en_css/estils_de_text/index.html | 162 ---- files/ca/web/guide/css/inici_en_css/index.html | 56 -- .../guide/css/inici_en_css/javascript/index.html | 147 ---- .../web/guide/css/inici_en_css/llistes/index.html | 276 ------ .../css/inici_en_css/mitj\303\240/index.html" | 402 --------- .../per_qu\303\250_utilitzar_css/index.html" | 111 --- .../css/inici_en_css/que_\303\251s_css/index.html" | 120 --- .../guide/css/inici_en_css/selectors/index.html | 456 ---------- .../guide/css/inici_en_css/svg_i_css/index.html | 223 ----- .../web/guide/css/inici_en_css/taules/index.html | 475 ----------- files/ca/web/guide/graphics/index.html | 49 ++ "files/ca/web/guide/gr\303\240fics/index.html" | 49 -- .../index.html" | 186 ---- .../us_de_seccions_i_esquemes_en_html/index.html | 341 -------- .../using_html_sections_and_outlines/index.html | 341 ++++++++ .../web/guide/mobile/a_hybrid_approach/index.html | 43 + files/ca/web/guide/mobile/index.html | 18 + .../guide/mobile/mobile-friendliness/index.html | 30 + .../ca/web/guide/mobile/separate_sites/index.html | 31 + files/ca/web/html/element/command/index.html | 156 ---- files/ca/web/html/element/element/index.html | 93 -- .../web/html/elements_en_l\303\255nia/index.html" | 82 -- .../web/html/global_attributes/dropzone/index.html | 99 --- files/ca/web/html/inline_elements/index.html | 82 ++ .../index.html | 29 - .../ca/web/javascript/about_javascript/index.html | 55 ++ .../guide/expressions_and_operators/index.html | 846 ++++++++++++++++++ .../guide/expressions_i_operadors/index.html | 846 ------------------ .../guide/introducci\303\263/index.html" | 140 --- .../web/javascript/guide/introduction/index.html | 140 +++ .../index.html" | 362 -------- .../web/javascript/quant_a_javascript/index.html | 55 -- files/ca/web/javascript/reference/about/index.html | 44 + .../reference/classes/constructor/index.html | 129 +++ .../ca/web/javascript/reference/classes/index.html | 382 +++++++++ .../javascript/reference/classes/static/index.html | 116 +++ .../reference/errors/nomes-lectura/index.html | 78 -- .../reference/errors/read-only/index.html | 78 ++ .../reference/functions/parameters_rest/index.html | 156 ---- .../reference/functions/rest_parameters/index.html | 156 ++++ .../global_objects/array/entries/index.html | 105 +++ .../global_objects/array/every/index.html | 220 +++++ .../reference/global_objects/array/fill/index.html | 173 ++++ .../global_objects/array/filter/index.html | 213 +++++ .../reference/global_objects/array/find/index.html | 191 +++++ .../global_objects/array/findindex/index.html | 173 ++++ .../global_objects/array/foreach/index.html | 238 ++++++ .../global_objects/array/includes/index.html | 158 ++++ .../reference/global_objects/array/index.html | 482 +++++++++++ .../global_objects/array/indexof/index.html | 235 +++++ .../global_objects/array/isarray/index.html | 135 +++ .../reference/global_objects/array/join/index.html | 123 +++ .../reference/global_objects/array/keys/index.html | 115 +++ .../global_objects/array/lastindexof/index.html | 197 +++++ .../global_objects/array/length/index.html | 128 +++ .../reference/global_objects/array/map/index.html | 317 +++++++ .../reference/global_objects/array/of/index.html | 120 +++ .../reference/global_objects/array/pop/index.html | 123 +++ .../reference/global_objects/array/push/index.html | 146 ++++ .../global_objects/array/reduce/index.html | 304 +++++++ .../global_objects/array/reverse/index.html | 119 +++ .../global_objects/array/shift/index.html | 129 +++ .../global_objects/array/slice/index.html | 268 ++++++ .../reference/global_objects/array/some/index.html | 213 +++++ .../global_objects/array/splice/index.html | 171 ++++ .../reference/global_objects/boolean/index.html | 196 +++++ .../global_objects/boolean/tosource/index.html | 98 +++ .../global_objects/boolean/tostring/index.html | 121 +++ .../global_objects/boolean/valueof/index.html | 117 +++ .../global_objects/dataview/prototype/index.html | 147 ---- .../global_objects/date/getdate/index.html | 119 +++ .../global_objects/date/getday/index.html | 121 +++ .../global_objects/date/getfullyear/index.html | 121 +++ .../global_objects/date/gethours/index.html | 120 +++ .../global_objects/date/getmilliseconds/index.html | 118 +++ .../global_objects/date/getminutes/index.html | 120 +++ .../global_objects/date/getmonth/index.html | 120 +++ .../global_objects/date/getseconds/index.html | 120 +++ .../global_objects/date/gettime/index.html | 135 +++ .../date/gettimezoneoffset/index.html | 109 +++ .../global_objects/date/getutcdate/index.html | 119 +++ .../global_objects/date/getutcday/index.html | 119 +++ .../global_objects/date/getutcfullyear/index.html | 118 +++ .../global_objects/date/getutchours/index.html | 118 +++ .../date/getutcmilliseconds/index.html | 116 +++ .../global_objects/date/getutcminutes/index.html | 116 +++ .../global_objects/date/getutcmonth/index.html | 116 +++ .../global_objects/date/getutcseconds/index.html | 118 +++ .../global_objects/date/getyear/index.html | 162 ++++ .../reference/global_objects/date/index.html | 250 ++++++ .../reference/global_objects/date/now/index.html | 126 +++ .../global_objects/date/setdate/index.html | 122 +++ .../global_objects/date/setfullyear/index.html | 128 +++ .../global_objects/date/sethours/index.html | 129 +++ .../global_objects/date/setmilliseconds/index.html | 117 +++ .../global_objects/date/setminutes/index.html | 127 +++ .../global_objects/date/setmonth/index.html | 126 +++ .../global_objects/date/setseconds/index.html | 125 +++ .../global_objects/date/settime/index.html | 118 +++ .../global_objects/date/setutcdate/index.html | 119 +++ .../global_objects/date/setutcfullyear/index.html | 123 +++ .../global_objects/date/setutchours/index.html | 125 +++ .../date/setutcmilliseconds/index.html | 117 +++ .../global_objects/date/setutcminutes/index.html | 123 +++ .../global_objects/date/setutcmonth/index.html | 121 +++ .../global_objects/date/setutcseconds/index.html | 121 +++ .../global_objects/date/setyear/index.html | 124 +++ .../global_objects/date/todatestring/index.html | 115 +++ .../global_objects/date/togmtstring/index.html | 115 +++ .../global_objects/date/toisostring/index.html | 134 +++ .../global_objects/date/tojson/index.html | 108 +++ .../global_objects/date/tostring/index.html | 142 +++ .../global_objects/date/totimestring/index.html | 115 +++ .../reference/global_objects/date/utc/index.html | 142 +++ .../global_objects/date/valueof/index.html | 118 +++ .../global_objects/error/columnnumber/index.html | 83 ++ .../global_objects/error/filename/index.html | 87 ++ .../reference/global_objects/error/index.html | 224 +++++ .../global_objects/error/linenumber/index.html | 94 ++ .../global_objects/error/message/index.html | 110 +++ .../reference/global_objects/error/name/index.html | 111 +++ .../global_objects/error/stack/index.html | 161 ++++ .../global_objects/error/tosource/index.html | 91 ++ .../global_objects/error/tostring/index.html | 146 ++++ .../global_objects/evalerror/prototype/index.html | 124 --- .../javascript/reference/global_objects/index.html | 167 ++++ .../reference/global_objects/infinity/index.html | 114 +++ .../reference/global_objects/json/index.html | 242 ++++++ .../reference/global_objects/map/clear/index.html | 104 +++ .../reference/global_objects/map/delete/index.html | 109 +++ .../global_objects/map/entries/index.html | 104 +++ .../global_objects/map/foreach/index.html | 136 +++ .../reference/global_objects/map/get/index.html | 116 +++ .../reference/global_objects/map/has/index.html | 114 +++ .../reference/global_objects/map/index.html | 385 +++++++++ .../reference/global_objects/map/keys/index.html | 104 +++ .../reference/global_objects/map/set/index.html | 122 +++ .../reference/global_objects/map/size/index.html | 105 +++ .../reference/global_objects/map/values/index.html | 103 +++ .../reference/global_objects/math/abs/index.html | 129 +++ .../reference/global_objects/math/acos/index.html | 131 +++ .../reference/global_objects/math/acosh/index.html | 126 +++ .../reference/global_objects/math/asin/index.html | 133 +++ .../reference/global_objects/math/asinh/index.html | 125 +++ .../reference/global_objects/math/atan/index.html | 127 +++ .../reference/global_objects/math/atan2/index.html | 139 +++ .../reference/global_objects/math/atanh/index.html | 127 +++ .../reference/global_objects/math/cbrt/index.html | 122 +++ .../reference/global_objects/math/ceil/index.html | 197 +++++ .../reference/global_objects/math/clz32/index.html | 155 ++++ .../reference/global_objects/math/cos/index.html | 128 +++ .../reference/global_objects/math/cosh/index.html | 130 +++ .../reference/global_objects/math/e/index.html | 118 +++ .../reference/global_objects/math/exp/index.html | 123 +++ .../reference/global_objects/math/expm1/index.html | 122 +++ .../reference/global_objects/math/floor/index.html | 194 +++++ .../global_objects/math/fround/index.html | 118 +++ .../reference/global_objects/math/hypot/index.html | 139 +++ .../reference/global_objects/math/imul/index.html | 120 +++ .../reference/global_objects/math/index.html | 205 +++++ .../reference/global_objects/math/ln10/index.html | 118 +++ .../reference/global_objects/math/ln2/index.html | 118 +++ .../reference/global_objects/math/log/index.html | 137 +++ .../reference/global_objects/math/log10/index.html | 126 +++ .../global_objects/math/log10e/index.html | 118 +++ .../reference/global_objects/math/log1p/index.html | 125 +++ .../reference/global_objects/math/log2/index.html | 127 +++ .../reference/global_objects/math/log2e/index.html | 118 +++ .../reference/global_objects/math/max/index.html | 134 +++ .../reference/global_objects/math/min/index.html | 140 +++ .../reference/global_objects/math/pi/index.html | 116 +++ .../reference/global_objects/math/pow/index.html | 140 +++ .../global_objects/math/random/index.html | 126 +++ .../reference/global_objects/math/round/index.html | 207 +++++ .../reference/global_objects/math/sign/index.html | 131 +++ .../reference/global_objects/math/sin/index.html | 127 +++ .../reference/global_objects/math/sinh/index.html | 129 +++ .../reference/global_objects/math/sqrt/index.html | 127 +++ .../global_objects/math/sqrt1_2/index.html | 117 +++ .../reference/global_objects/math/sqrt2/index.html | 117 +++ .../reference/global_objects/math/tan/index.html | 140 +++ .../reference/global_objects/math/tanh/index.html | 142 +++ .../reference/global_objects/math/trunc/index.html | 129 +++ .../reference/global_objects/nan/index.html | 125 +++ .../reference/global_objects/null/index.html | 125 +++ .../global_objects/number/epsilon/index.html | 102 +++ .../reference/global_objects/number/index.html | 214 +++++ .../global_objects/number/isfinite/index.html | 118 +++ .../global_objects/number/isinteger/index.html | 118 +++ .../global_objects/number/isnan/index.html | 129 +++ .../global_objects/number/issafeinteger/index.html | 117 +++ .../number/max_safe_integer/index.html | 100 +++ .../global_objects/number/max_value/index.html | 118 +++ .../number/min_safe_integer/index.html | 100 +++ .../global_objects/number/min_value/index.html | 118 +++ .../reference/global_objects/number/nan/index.html | 100 +++ .../number/negative_infinity/index.html | 134 +++ .../global_objects/number/parsefloat/index.html | 103 +++ .../global_objects/number/parseint/index.html | 102 +++ .../number/positive_infinity/index.html | 137 +++ .../global_objects/number/toexponential/index.html | 136 +++ .../global_objects/number/tofixed/index.html | 135 +++ .../global_objects/number/toprecision/index.html | 134 +++ .../global_objects/number/tostring/index.html | 141 +++ .../global_objects/object/prototype/index.html | 215 ----- .../reference/global_objects/parsefloat/index.html | 166 ++++ .../reference/global_objects/set/add/index.html | 119 +++ .../reference/global_objects/set/clear/index.html | 105 +++ .../reference/global_objects/set/delete/index.html | 112 +++ .../global_objects/set/entries/index.html | 104 +++ .../reference/global_objects/set/has/index.html | 114 +++ .../reference/global_objects/set/index.html | 380 +++++++++ .../reference/global_objects/set/values/index.html | 106 +++ .../global_objects/string/anchor/index.html | 118 +++ .../reference/global_objects/string/big/index.html | 114 +++ .../global_objects/string/blink/index.html | 110 +++ .../global_objects/string/bold/index.html | 106 +++ .../global_objects/string/charat/index.html | 283 ++++++ .../global_objects/string/concat/index.html | 125 +++ .../global_objects/string/endswith/index.html | 133 +++ .../global_objects/string/fixed/index.html | 103 +++ .../global_objects/string/fontcolor/index.html | 122 +++ .../global_objects/string/fontsize/index.html | 121 +++ .../global_objects/string/fromcharcode/index.html | 126 +++ .../reference/global_objects/string/index.html | 340 ++++++++ .../global_objects/string/indexof/index.html | 190 +++++ .../global_objects/string/italics/index.html | 104 +++ .../global_objects/string/length/index.html | 121 +++ .../global_objects/string/link/index.html | 119 +++ .../global_objects/string/normalize/index.html | 154 ++++ .../global_objects/string/small/index.html | 110 +++ .../global_objects/string/startswith/index.html | 128 +++ .../reference/global_objects/string/sub/index.html | 109 +++ .../global_objects/string/substr/index.html | 156 ++++ .../reference/global_objects/string/sup/index.html | 107 +++ .../string/tolocalelowercase/index.html | 110 +++ .../string/tolocaleuppercase/index.html | 110 +++ .../global_objects/string/tolowercase/index.html | 111 +++ .../global_objects/string/tostring/index.html | 113 +++ .../global_objects/string/touppercase/index.html | 110 +++ .../global_objects/string/trim/index.html | 123 +++ .../global_objects/string/trimend/index.html | 94 ++ .../global_objects/string/trimstart/index.html | 94 ++ .../global_objects/syntaxerror/index.html | 166 ++++ .../reference/global_objects/undefined/index.html | 174 ++++ .../global_objects/weakmap/prototype/index.html | 133 --- .../global_objects/weakset/prototype/index.html | 132 --- files/ca/web/javascript/reference/index.html | 46 + .../reference/operators/comma_operator/index.html | 129 +++ .../operators/conditional_operator/index.html | 170 ++++ .../reference/operators/function/index.html | 146 ++++ .../reference/operators/grouping/index.html | 128 +++ .../web/javascript/reference/operators/index.html | 282 ++++++ .../reference/operators/super/index.html | 119 +++ .../reference/operators/typeof/index.html | 240 ++++++ .../javascript/reference/operators/void/index.html | 138 +++ .../reference/operators/yield/index.html | 152 ++++ .../reference/statements/block/index.html | 138 +++ .../reference/statements/break/index.html | 154 ++++ .../reference/statements/continue/index.html | 199 +++++ .../reference/statements/debugger/index.html | 116 +++ .../reference/statements/do...while/index.html | 124 +++ .../reference/statements/empty/index.html | 138 +++ .../reference/statements/export/index.html | 158 ++++ .../reference/statements/for...of/index.html | 181 ++++ .../javascript/reference/statements/for/index.html | 190 +++++ .../reference/statements/function/index.html | 171 ++++ .../reference/statements/if...else/index.html | 203 +++++ .../web/javascript/reference/statements/index.html | 129 +++ .../reference/statements/return/index.html | 183 ++++ .../reference/statements/throw/index.html | 228 +++++ .../reference/statements/while/index.html | 131 +++ .../referencia/classes/constructor/index.html | 129 --- .../web/javascript/referencia/classes/index.html | 382 --------- .../referencia/classes/static/index.html | 116 --- files/ca/web/javascript/referencia/index.html | 46 - .../objectes_globals/array/entries/index.html | 105 --- .../objectes_globals/array/every/index.html | 220 ----- .../objectes_globals/array/fill/index.html | 173 ---- .../objectes_globals/array/filter/index.html | 213 ----- .../objectes_globals/array/find/index.html | 191 ----- .../objectes_globals/array/findindex/index.html | 173 ---- .../objectes_globals/array/foreach/index.html | 238 ------ .../objectes_globals/array/includes/index.html | 158 ---- .../referencia/objectes_globals/array/index.html | 482 ----------- .../objectes_globals/array/indexof/index.html | 235 ----- .../objectes_globals/array/isarray/index.html | 135 --- .../objectes_globals/array/join/index.html | 123 --- .../objectes_globals/array/keys/index.html | 115 --- .../objectes_globals/array/lastindexof/index.html | 197 ----- .../objectes_globals/array/length/index.html | 128 --- .../objectes_globals/array/map/index.html | 317 ------- .../objectes_globals/array/of/index.html | 120 --- .../objectes_globals/array/pop/index.html | 123 --- .../objectes_globals/array/prototype/index.html | 203 ----- .../objectes_globals/array/push/index.html | 146 ---- .../objectes_globals/array/reduce/index.html | 304 ------- .../objectes_globals/array/reverse/index.html | 119 --- .../objectes_globals/array/shift/index.html | 129 --- .../objectes_globals/array/slice/index.html | 268 ------ .../objectes_globals/array/some/index.html | 213 ----- .../objectes_globals/array/splice/index.html | 171 ---- .../referencia/objectes_globals/boolean/index.html | 196 ----- .../objectes_globals/boolean/prototype/index.html | 118 --- .../objectes_globals/boolean/tosource/index.html | 98 --- .../objectes_globals/boolean/tostring/index.html | 121 --- .../objectes_globals/boolean/valueof/index.html | 117 --- .../objectes_globals/date/getdate/index.html | 119 --- .../objectes_globals/date/getday/index.html | 121 --- .../objectes_globals/date/getfullyear/index.html | 121 --- .../objectes_globals/date/gethours/index.html | 120 --- .../date/getmilliseconds/index.html | 118 --- .../objectes_globals/date/getminutes/index.html | 120 --- .../objectes_globals/date/getmonth/index.html | 120 --- .../objectes_globals/date/getseconds/index.html | 120 --- .../objectes_globals/date/gettime/index.html | 135 --- .../date/gettimezoneoffset/index.html | 109 --- .../objectes_globals/date/getutcdate/index.html | 119 --- .../objectes_globals/date/getutcday/index.html | 119 --- .../date/getutcfullyear/index.html | 118 --- .../objectes_globals/date/getutchours/index.html | 118 --- .../date/getutcmilliseconds/index.html | 116 --- .../objectes_globals/date/getutcminutes/index.html | 116 --- .../objectes_globals/date/getutcmonth/index.html | 116 --- .../objectes_globals/date/getutcseconds/index.html | 118 --- .../objectes_globals/date/getyear/index.html | 162 ---- .../referencia/objectes_globals/date/index.html | 250 ------ .../objectes_globals/date/now/index.html | 126 --- .../objectes_globals/date/prototype/index.html | 222 ----- .../objectes_globals/date/setdate/index.html | 122 --- .../objectes_globals/date/setfullyear/index.html | 128 --- .../objectes_globals/date/sethours/index.html | 129 --- .../date/setmilliseconds/index.html | 117 --- .../objectes_globals/date/setminutes/index.html | 127 --- .../objectes_globals/date/setmonth/index.html | 126 --- .../objectes_globals/date/setseconds/index.html | 125 --- .../objectes_globals/date/settime/index.html | 118 --- .../objectes_globals/date/setutcdate/index.html | 119 --- .../date/setutcfullyear/index.html | 123 --- .../objectes_globals/date/setutchours/index.html | 125 --- .../date/setutcmilliseconds/index.html | 117 --- .../objectes_globals/date/setutcminutes/index.html | 123 --- .../objectes_globals/date/setutcmonth/index.html | 121 --- .../objectes_globals/date/setutcseconds/index.html | 121 --- .../objectes_globals/date/setyear/index.html | 124 --- .../objectes_globals/date/todatestring/index.html | 115 --- .../objectes_globals/date/togmtstring/index.html | 115 --- .../objectes_globals/date/toisostring/index.html | 134 --- .../objectes_globals/date/tojson/index.html | 108 --- .../objectes_globals/date/tostring/index.html | 142 --- .../objectes_globals/date/totimestring/index.html | 115 --- .../objectes_globals/date/utc/index.html | 142 --- .../objectes_globals/date/valueof/index.html | 118 --- .../objectes_globals/error/columnnumber/index.html | 83 -- .../objectes_globals/error/filename/index.html | 87 -- .../referencia/objectes_globals/error/index.html | 224 ----- .../objectes_globals/error/linenumber/index.html | 94 -- .../objectes_globals/error/message/index.html | 110 --- .../objectes_globals/error/name/index.html | 111 --- .../objectes_globals/error/prototype/index.html | 151 ---- .../objectes_globals/error/stack/index.html | 161 ---- .../objectes_globals/error/tosource/index.html | 91 -- .../objectes_globals/error/tostring/index.html | 146 ---- .../referencia/objectes_globals/index.html | 167 ---- .../objectes_globals/infinity/index.html | 114 --- .../referencia/objectes_globals/json/index.html | 242 ------ .../objectes_globals/map/clear/index.html | 104 --- .../objectes_globals/map/delete/index.html | 109 --- .../objectes_globals/map/entries/index.html | 104 --- .../objectes_globals/map/foreach/index.html | 136 --- .../referencia/objectes_globals/map/get/index.html | 116 --- .../referencia/objectes_globals/map/has/index.html | 114 --- .../referencia/objectes_globals/map/index.html | 385 --------- .../objectes_globals/map/keys/index.html | 104 --- .../objectes_globals/map/prototype/index.html | 126 --- .../referencia/objectes_globals/map/set/index.html | 122 --- .../objectes_globals/map/size/index.html | 105 --- .../objectes_globals/map/values/index.html | 103 --- .../objectes_globals/math/abs/index.html | 129 --- .../objectes_globals/math/acos/index.html | 131 --- .../objectes_globals/math/acosh/index.html | 126 --- .../objectes_globals/math/asin/index.html | 133 --- .../objectes_globals/math/asinh/index.html | 125 --- .../objectes_globals/math/atan/index.html | 127 --- .../objectes_globals/math/atan2/index.html | 139 --- .../objectes_globals/math/atanh/index.html | 127 --- .../objectes_globals/math/cbrt/index.html | 122 --- .../objectes_globals/math/ceil/index.html | 197 ----- .../objectes_globals/math/clz32/index.html | 155 ---- .../objectes_globals/math/cos/index.html | 128 --- .../objectes_globals/math/cosh/index.html | 130 --- .../referencia/objectes_globals/math/e/index.html | 118 --- .../objectes_globals/math/exp/index.html | 123 --- .../objectes_globals/math/expm1/index.html | 122 --- .../objectes_globals/math/floor/index.html | 194 ----- .../objectes_globals/math/fround/index.html | 118 --- .../objectes_globals/math/hypot/index.html | 139 --- .../objectes_globals/math/imul/index.html | 120 --- .../referencia/objectes_globals/math/index.html | 205 ----- .../objectes_globals/math/ln10/index.html | 118 --- .../objectes_globals/math/ln2/index.html | 118 --- .../objectes_globals/math/log/index.html | 137 --- .../objectes_globals/math/log10/index.html | 126 --- .../objectes_globals/math/log10e/index.html | 118 --- .../objectes_globals/math/log1p/index.html | 125 --- .../objectes_globals/math/log2/index.html | 127 --- .../objectes_globals/math/log2e/index.html | 118 --- .../objectes_globals/math/max/index.html | 134 --- .../objectes_globals/math/min/index.html | 140 --- .../referencia/objectes_globals/math/pi/index.html | 116 --- .../objectes_globals/math/pow/index.html | 140 --- .../objectes_globals/math/random/index.html | 126 --- .../objectes_globals/math/round/index.html | 207 ----- .../objectes_globals/math/sign/index.html | 131 --- .../objectes_globals/math/sin/index.html | 127 --- .../objectes_globals/math/sinh/index.html | 129 --- .../objectes_globals/math/sqrt/index.html | 127 --- .../objectes_globals/math/sqrt1_2/index.html | 117 --- .../objectes_globals/math/sqrt2/index.html | 117 --- .../objectes_globals/math/tan/index.html | 140 --- .../objectes_globals/math/tanh/index.html | 142 --- .../objectes_globals/math/trunc/index.html | 129 --- .../referencia/objectes_globals/nan/index.html | 125 --- .../referencia/objectes_globals/null/index.html | 125 --- .../objectes_globals/number/epsilon/index.html | 102 --- .../referencia/objectes_globals/number/index.html | 214 ----- .../objectes_globals/number/isfinite/index.html | 118 --- .../objectes_globals/number/isinteger/index.html | 118 --- .../objectes_globals/number/isnan/index.html | 129 --- .../number/issafeinteger/index.html | 117 --- .../number/max_safe_integer/index.html | 100 --- .../objectes_globals/number/max_value/index.html | 118 --- .../number/min_safe_integer/index.html | 100 --- .../objectes_globals/number/min_value/index.html | 118 --- .../objectes_globals/number/nan/index.html | 100 --- .../number/negative_infinity/index.html | 134 --- .../objectes_globals/number/parsefloat/index.html | 103 --- .../objectes_globals/number/parseint/index.html | 102 --- .../number/positive_infinity/index.html | 137 --- .../objectes_globals/number/prototype/index.html | 126 --- .../number/toexponential/index.html | 136 --- .../objectes_globals/number/tofixed/index.html | 135 --- .../objectes_globals/number/toprecision/index.html | 134 --- .../objectes_globals/number/tostring/index.html | 141 --- .../objectes_globals/parsefloat/index.html | 166 ---- .../referencia/objectes_globals/set/add/index.html | 119 --- .../objectes_globals/set/clear/index.html | 105 --- .../objectes_globals/set/delete/index.html | 112 --- .../objectes_globals/set/entries/index.html | 104 --- .../referencia/objectes_globals/set/has/index.html | 114 --- .../referencia/objectes_globals/set/index.html | 380 --------- .../objectes_globals/set/prototype/index.html | 124 --- .../objectes_globals/set/values/index.html | 106 --- .../objectes_globals/string/anchor/index.html | 118 --- .../objectes_globals/string/big/index.html | 114 --- .../objectes_globals/string/blink/index.html | 110 --- .../objectes_globals/string/bold/index.html | 106 --- .../objectes_globals/string/charat/index.html | 283 ------ .../objectes_globals/string/concat/index.html | 125 --- .../objectes_globals/string/endswith/index.html | 133 --- .../objectes_globals/string/fixed/index.html | 103 --- .../objectes_globals/string/fontcolor/index.html | 122 --- .../objectes_globals/string/fontsize/index.html | 121 --- .../string/fromcharcode/index.html | 126 --- .../referencia/objectes_globals/string/index.html | 340 -------- .../objectes_globals/string/indexof/index.html | 190 ----- .../objectes_globals/string/italics/index.html | 104 --- .../objectes_globals/string/length/index.html | 121 --- .../objectes_globals/string/link/index.html | 119 --- .../objectes_globals/string/normalize/index.html | 154 ---- .../objectes_globals/string/small/index.html | 110 --- .../objectes_globals/string/startswith/index.html | 128 --- .../objectes_globals/string/sub/index.html | 109 --- .../objectes_globals/string/substr/index.html | 156 ---- .../objectes_globals/string/sup/index.html | 107 --- .../string/tolocalelowercase/index.html | 110 --- .../string/tolocaleuppercase/index.html | 110 --- .../objectes_globals/string/tolowercase/index.html | 111 --- .../objectes_globals/string/tostring/index.html | 113 --- .../objectes_globals/string/touppercase/index.html | 110 --- .../objectes_globals/string/trim/index.html | 123 --- .../objectes_globals/string/trimleft/index.html | 94 -- .../objectes_globals/string/trimright/index.html | 94 -- .../objectes_globals/syntaxerror/index.html | 166 ---- .../syntaxerror/prototype/index.html | 122 --- .../objectes_globals/undefined/index.html | 174 ---- .../operadors/arithmetic_operators/index.html | 287 ------- .../operadors/bitwise_operators/index.html | 719 ---------------- .../operadors/conditional_operator/index.html | 170 ---- .../referencia/operadors/function/index.html | 146 ---- .../referencia/operadors/grouping/index.html | 128 --- .../web/javascript/referencia/operadors/index.html | 282 ------ .../operadors/logical_operators/index.html | 302 ------- .../referencia/operadors/operador_coma/index.html | 129 --- .../referencia/operadors/super/index.html | 119 --- .../referencia/operadors/typeof/index.html | 240 ------ .../referencia/operadors/void/index.html | 138 --- .../referencia/operadors/yield/index.html | 152 ---- .../referencia/sentencies/block/index.html | 138 --- .../referencia/sentencies/break/index.html | 154 ---- .../referencia/sentencies/buida/index.html | 138 --- .../referencia/sentencies/continue/index.html | 199 ----- .../referencia/sentencies/debugger/index.html | 116 --- .../referencia/sentencies/do...while/index.html | 124 --- .../referencia/sentencies/export/index.html | 158 ---- .../referencia/sentencies/for...of/index.html | 181 ---- .../referencia/sentencies/for/index.html | 190 ----- .../referencia/sentencies/function/index.html | 171 ---- .../referencia/sentencies/if...else/index.html | 203 ----- .../javascript/referencia/sentencies/index.html | 129 --- .../referencia/sentencies/return/index.html | 183 ---- .../referencia/sentencies/throw/index.html | 228 ----- .../referencia/sentencies/while/index.html | 131 --- .../ca/web/javascript/referencia/sobre/index.html | 44 - files/ca/web/opensearch/index.html | 33 + files/ca/web/progressive_web_apps/index.html | 49 ++ .../responsive/media_types/index.html | 402 +++++++++ files/ca/web/svg/tutorial/svg_and_css/index.html | 223 +++++ files/ca/web_development/index.html | 101 --- .../mobile/a_hybrid_approach/index.html | 43 - files/ca/web_development/mobile/index.html | 18 - .../mobile/mobile-friendliness/index.html | 30 - .../mobile/responsive_design/index.html | 49 -- .../mobile/separate_sites/index.html | 31 - 796 files changed, 68153 insertions(+), 68153 deletions(-) delete mode 100644 "files/ca/addici\303\263_de_motors_de_cerca_a_les_p\303\240gines_web/index.html" create mode 100644 files/ca/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html create mode 100644 files/ca/conflicting/learn/css/building_blocks/index.html create mode 100644 files/ca/conflicting/learn/css/building_blocks/selectors/index.html create mode 100644 files/ca/conflicting/learn/css/building_blocks/styling_tables/index.html create mode 100644 files/ca/conflicting/learn/css/building_blocks/values_and_units/index.html create mode 100644 files/ca/conflicting/learn/css/css_layout/index.html create mode 100644 files/ca/conflicting/learn/css/first_steps/how_css_is_structured/index.html create mode 100644 files/ca/conflicting/learn/css/first_steps/how_css_works/index.html create mode 100644 files/ca/conflicting/learn/css/first_steps/how_css_works_54b8e7ce45c74338181144ded4fbdccf/index.html create mode 100644 files/ca/conflicting/learn/css/first_steps/how_css_works_9566880e82eb23b2f47f8821f75e0ab1/index.html create mode 100644 files/ca/conflicting/learn/css/first_steps/index.html create mode 100644 files/ca/conflicting/learn/css/styling_text/fundamentals/index.html create mode 100644 files/ca/conflicting/learn/css/styling_text/styling_lists/index.html create mode 100644 files/ca/conflicting/web/guide/index.html create mode 100644 files/ca/conflicting/web/javascript/reference/global_objects/boolean/index.html create mode 100644 files/ca/conflicting/web/javascript/reference/global_objects/dataview/index.html create mode 100644 files/ca/conflicting/web/javascript/reference/global_objects/date/index.html create mode 100644 files/ca/conflicting/web/javascript/reference/global_objects/error/index.html create mode 100644 files/ca/conflicting/web/javascript/reference/global_objects/evalerror/index.html create mode 100644 files/ca/conflicting/web/javascript/reference/global_objects/map/index.html create mode 100644 files/ca/conflicting/web/javascript/reference/global_objects/number/index.html create mode 100644 files/ca/conflicting/web/javascript/reference/global_objects/object/index.html create mode 100644 files/ca/conflicting/web/javascript/reference/global_objects/set/index.html create mode 100644 files/ca/conflicting/web/javascript/reference/global_objects/syntaxerror/index.html create mode 100644 files/ca/conflicting/web/javascript/reference/global_objects/weakmap/index.html create mode 100644 files/ca/conflicting/web/javascript/reference/global_objects/weakset/index.html create mode 100644 files/ca/conflicting/web/javascript/reference/operators/index.html create mode 100644 files/ca/conflicting/web/javascript/reference/operators_94c03c413a71df1ccff4c3ede275360c/index.html create mode 100644 files/ca/conflicting/web/javascript/reference/operators_af596841c6a3650ee514088f0e310901/index.html delete mode 100644 files/ca/firefox_2_per_a_desenvolupadors/index.html delete mode 100644 "files/ca/glossary/adre\303\247a_ip/index.html" delete mode 100644 files/ca/glossary/atribut/index.html create mode 100644 files/ca/glossary/attribute/index.html create mode 100644 files/ca/glossary/browser/index.html delete mode 100644 "files/ca/glossary/car\303\240cter/index.html" create mode 100644 files/ca/glossary/character/index.html create mode 100644 files/ca/glossary/character_encoding/index.html delete mode 100644 "files/ca/glossary/codificaci\303\263_de_car\303\240cters/index.html" delete mode 100644 files/ca/glossary/etiqueta/index.html delete mode 100644 "files/ca/glossary/funci\303\263/index.html" create mode 100644 files/ca/glossary/function/index.html create mode 100644 files/ca/glossary/ip_address/index.html create mode 100644 files/ca/glossary/method/index.html delete mode 100644 "files/ca/glossary/m\303\250tode/index.html" delete mode 100644 files/ca/glossary/navegador/index.html create mode 100644 files/ca/glossary/object/index.html create mode 100644 files/ca/glossary/object_reference/index.html delete mode 100644 files/ca/glossary/objecte/index.html delete mode 100644 files/ca/glossary/primitiu/index.html create mode 100644 files/ca/glossary/primitive/index.html create mode 100644 files/ca/glossary/property/index.html delete mode 100644 files/ca/glossary/propietat/index.html delete mode 100644 "files/ca/glossary/refer\303\250ncies_a_objectes/index.html" create mode 100644 files/ca/glossary/scope/index.html create mode 100644 files/ca/glossary/server/index.html delete mode 100644 files/ca/glossary/servidor/index.html create mode 100644 files/ca/glossary/speculative_parsing/index.html create mode 100644 files/ca/glossary/tag/index.html delete mode 100644 files/ca/glossary/valor/index.html create mode 100644 files/ca/glossary/value/index.html delete mode 100644 "files/ca/glossary/\303\240mbit/index.html" delete mode 100644 files/ca/learn/accessibility/que_es_accessibilitat/index.html create mode 100644 files/ca/learn/accessibility/what_is_accessibility/index.html create mode 100644 files/ca/learn/css/building_blocks/a_cool_looking_box/index.html create mode 100644 files/ca/learn/css/building_blocks/backgrounds_and_borders/index.html delete mode 100644 "files/ca/learn/css/building_blocks/cascada_i_her\303\250ncia/index.html" create mode 100644 files/ca/learn/css/building_blocks/cascade_and_inheritance/index.html create mode 100644 files/ca/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.html create mode 100644 files/ca/learn/css/building_blocks/debugging_css/index.html delete mode 100644 files/ca/learn/css/building_blocks/depurar_el_css/index.html delete mode 100644 files/ca/learn/css/building_blocks/desbordament_de_contingut/index.html delete mode 100644 files/ca/learn/css/building_blocks/dimensionar_elements_en_css/index.html delete mode 100644 files/ca/learn/css/building_blocks/fons_i_vores/index.html create mode 100644 files/ca/learn/css/building_blocks/fundamental_css_comprehension/index.html create mode 100644 files/ca/learn/css/building_blocks/overflowing_content/index.html create mode 100644 files/ca/learn/css/building_blocks/selectors/attribute_selectors/index.html create mode 100644 files/ca/learn/css/building_blocks/selectors/combinators/index.html create mode 100644 files/ca/learn/css/building_blocks/selectors/index.html create mode 100644 files/ca/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html create mode 100644 files/ca/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html delete mode 100644 files/ca/learn/css/building_blocks/selectors_css/combinadors/index.html delete mode 100644 files/ca/learn/css/building_blocks/selectors_css/index.html delete mode 100644 files/ca/learn/css/building_blocks/selectors_css/pseudo-classes_and_pseudo-elements/index.html delete mode 100644 files/ca/learn/css/building_blocks/selectors_css/selectors_atribut/index.html delete mode 100644 files/ca/learn/css/building_blocks/selectors_css/selectors_de_tipus_classe_i_id/index.html create mode 100644 files/ca/learn/css/building_blocks/sizing_items_in_css/index.html delete mode 100644 files/ca/learn/css/building_blocks/valors_i_unitats_css/index.html create mode 100644 files/ca/learn/css/building_blocks/values_and_units/index.html delete mode 100644 files/ca/learn/css/caixes_estil/caixa_aspecte_interessant/index.html delete mode 100644 "files/ca/learn/css/caixes_estil/creaci\303\263_carta/index.html" create mode 100644 files/ca/learn/css/css_layout/flexbox/index.html create mode 100644 files/ca/learn/css/css_layout/floats/index.html create mode 100644 files/ca/learn/css/css_layout/grids/index.html create mode 100644 files/ca/learn/css/css_layout/index.html create mode 100644 files/ca/learn/css/css_layout/introduction/index.html create mode 100644 files/ca/learn/css/css_layout/normal_flow/index.html create mode 100644 files/ca/learn/css/css_layout/positioning/index.html create mode 100644 files/ca/learn/css/css_layout/practical_positioning_examples/index.html create mode 100644 files/ca/learn/css/css_layout/responsive_design/index.html create mode 100644 files/ca/learn/css/css_layout/supporting_older_browsers/index.html delete mode 100644 files/ca/learn/css/disseny_css/disseny_responsiu/index.html delete mode 100644 "files/ca/learn/css/disseny_css/exemples_pr\303\240ctics_posicionament/index.html" delete mode 100644 files/ca/learn/css/disseny_css/flexbox/index.html delete mode 100644 files/ca/learn/css/disseny_css/flotadors/index.html delete mode 100644 files/ca/learn/css/disseny_css/flux_normal/index.html delete mode 100644 files/ca/learn/css/disseny_css/graelles/index.html delete mode 100644 files/ca/learn/css/disseny_css/index.html delete mode 100644 files/ca/learn/css/disseny_css/introduccio_disseny_css/index.html delete mode 100644 files/ca/learn/css/disseny_css/posicionament/index.html delete mode 100644 files/ca/learn/css/disseny_css/suport_en_navegadors_antics/index.html delete mode 100644 "files/ca/learn/css/estilitzar_text/composici\303\263_p\303\240gina_inici/index.html" delete mode 100644 "files/ca/learn/css/estilitzar_text/estilitzar_enlla\303\247os/index.html" delete mode 100644 files/ca/learn/css/estilitzar_text/fonts_web/index.html delete mode 100644 files/ca/learn/css/estilitzar_text/index.html delete mode 100644 files/ca/learn/css/estilitzar_text/llistes_estil/index.html delete mode 100644 files/ca/learn/css/estilitzar_text/text_fonamental/index.html delete mode 100644 "files/ca/learn/css/first_steps/com_comen\303\247ar_amb_css/index.html" delete mode 100644 files/ca/learn/css/first_steps/com_estructurar_el_css/index.html delete mode 100644 files/ca/learn/css/first_steps/com_funciona_el_css/index.html create mode 100644 files/ca/learn/css/first_steps/getting_started/index.html create mode 100644 files/ca/learn/css/first_steps/how_css_is_structured/index.html create mode 100644 files/ca/learn/css/first_steps/how_css_works/index.html delete mode 100644 files/ca/learn/css/first_steps/que_es_el_css/index.html create mode 100644 files/ca/learn/css/first_steps/what_is_css/index.html delete mode 100644 "files/ca/learn/css/introducci\303\263_a_css/comprensi\303\263_css_fonamental/index.html" create mode 100644 files/ca/learn/css/styling_text/fundamentals/index.html create mode 100644 files/ca/learn/css/styling_text/index.html create mode 100644 files/ca/learn/css/styling_text/styling_links/index.html create mode 100644 files/ca/learn/css/styling_text/styling_lists/index.html create mode 100644 files/ca/learn/css/styling_text/typesetting_a_homepage/index.html create mode 100644 files/ca/learn/css/styling_text/web_fonts/index.html create mode 100644 files/ca/learn/forms/basic_native_form_controls/index.html create mode 100644 files/ca/learn/forms/form_validation/index.html create mode 100644 files/ca/learn/forms/how_to_structure_a_web_form/index.html create mode 100644 files/ca/learn/forms/index.html create mode 100644 files/ca/learn/forms/your_first_form/index.html delete mode 100644 files/ca/learn/getting_started_with_the_web/com_funciona_web/index.html create mode 100644 files/ca/learn/getting_started_with_the_web/css_basics/index.html delete mode 100644 "files/ca/learn/getting_started_with_the_web/css_b\303\240sic/index.html" create mode 100644 files/ca/learn/getting_started_with_the_web/dealing_with_files/index.html create mode 100644 files/ca/learn/getting_started_with_the_web/how_the_web_works/index.html create mode 100644 files/ca/learn/getting_started_with_the_web/installing_basic_software/index.html delete mode 100644 "files/ca/learn/getting_started_with_the_web/instal\302\267laci\303\263_b\303\240sica_programari/index.html" create mode 100644 files/ca/learn/getting_started_with_the_web/javascript_basics/index.html delete mode 100644 "files/ca/learn/getting_started_with_the_web/javascript_b\303\240sic/index.html" delete mode 100644 files/ca/learn/getting_started_with_the_web/publicar_nostre_lloc_web/index.html create mode 100644 files/ca/learn/getting_started_with_the_web/publishing_your_website/index.html delete mode 100644 "files/ca/learn/getting_started_with_the_web/quin_aspecte_tindr\303\240_vostre_lloc_web/index.html" delete mode 100644 files/ca/learn/getting_started_with_the_web/tractar_amb_arxius/index.html create mode 100644 files/ca/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html delete mode 100644 files/ca/learn/html/forms/com_estructurar_un_formulari_web/index.html delete mode 100644 files/ca/learn/html/forms/controls_de_formulari_originals/index.html delete mode 100644 files/ca/learn/html/forms/el_teu_primer_formulari/index.html delete mode 100644 files/ca/learn/html/forms/index.html delete mode 100644 files/ca/learn/html/forms/validacio_formularis/index.html create mode 100644 files/ca/learn/html/howto/author_fast-loading_html_pages/index.html delete mode 100644 "files/ca/learn/html/introducci\303\263_al_html/crear_hipervincles/index.html" delete mode 100644 "files/ca/learn/html/introducci\303\263_al_html/depurar_html/index.html" delete mode 100644 "files/ca/learn/html/introducci\303\263_al_html/document_i_estructura_del_lloc_web/index.html" delete mode 100644 "files/ca/learn/html/introducci\303\263_al_html/estructurar_una_p\303\240gina_de_contingut/index.html" delete mode 100644 "files/ca/learn/html/introducci\303\263_al_html/fonaments_de_text_html/index.html" delete mode 100644 "files/ca/learn/html/introducci\303\263_al_html/format_de_text_avan\303\247at/index.html" delete mode 100644 "files/ca/learn/html/introducci\303\263_al_html/getting_started/index.html" delete mode 100644 "files/ca/learn/html/introducci\303\263_al_html/index.html" delete mode 100644 "files/ca/learn/html/introducci\303\263_al_html/marcatge_una_carta/index.html" delete mode 100644 "files/ca/learn/html/introducci\303\263_al_html/qu\303\250_hi_ha_en_el_head_metadades_en_html/index.html" create mode 100644 files/ca/learn/html/introduction_to_html/advanced_text_formatting/index.html create mode 100644 files/ca/learn/html/introduction_to_html/creating_hyperlinks/index.html create mode 100644 files/ca/learn/html/introduction_to_html/debugging_html/index.html create mode 100644 files/ca/learn/html/introduction_to_html/document_and_website_structure/index.html create mode 100644 files/ca/learn/html/introduction_to_html/getting_started/index.html create mode 100644 files/ca/learn/html/introduction_to_html/html_text_fundamentals/index.html create mode 100644 files/ca/learn/html/introduction_to_html/index.html create mode 100644 files/ca/learn/html/introduction_to_html/marking_up_a_letter/index.html create mode 100644 files/ca/learn/html/introduction_to_html/structuring_a_page_of_content/index.html create mode 100644 files/ca/learn/html/introduction_to_html/the_head_metadata_in_html/index.html create mode 100644 files/ca/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html create mode 100644 files/ca/learn/html/multimedia_and_embedding/images_in_html/index.html create mode 100644 files/ca/learn/html/multimedia_and_embedding/index.html create mode 100644 files/ca/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html create mode 100644 files/ca/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html create mode 100644 files/ca/learn/html/multimedia_and_embedding/responsive_images/index.html create mode 100644 files/ca/learn/html/multimedia_and_embedding/video_and_audio_content/index.html delete mode 100644 "files/ca/learn/html/multim\303\250dia_i_incrustar/afegir_gr\303\240fics_vectorials_a_la_web/index.html" delete mode 100644 "files/ca/learn/html/multim\303\250dia_i_incrustar/contingut_de_v\303\255deo_i_\303\240udio/index.html" delete mode 100644 "files/ca/learn/html/multim\303\250dia_i_incrustar/de_objecte_a_iframe_altres_tecnologies_incrustaci\303\263/index.html" delete mode 100644 "files/ca/learn/html/multim\303\250dia_i_incrustar/images_in_html/index.html" delete mode 100644 "files/ca/learn/html/multim\303\250dia_i_incrustar/imatges_sensibles/index.html" delete mode 100644 "files/ca/learn/html/multim\303\250dia_i_incrustar/index.html" delete mode 100644 "files/ca/learn/html/multim\303\250dia_i_incrustar/mozilla_p\303\240gina_de_benvinguda/index.html" create mode 100644 files/ca/learn/html/tables/advanced/index.html create mode 100644 files/ca/learn/html/tables/basics/index.html create mode 100644 files/ca/learn/html/tables/index.html create mode 100644 files/ca/learn/html/tables/structuring_planet_data/index.html delete mode 100644 "files/ca/learn/html/taules_html/avaluaci\303\263_estructurar_les_dades_dels_planeta/index.html" delete mode 100644 files/ca/learn/html/taules_html/fonaments_de_la_taula_html/index.html delete mode 100644 files/ca/learn/html/taules_html/index.html delete mode 100644 "files/ca/learn/html/taules_html/taula_html_caracter\303\255stiques_avan\303\247ades_i_laccessibilitat/index.html" create mode 100644 files/ca/learn/javascript/client-side_web_apis/manipulating_documents/index.html create mode 100644 files/ca/learn/javascript/objects/index.html create mode 100644 files/ca/mdn/at_ten/index.html delete mode 100644 files/ca/mdn/comunitat/index.html delete mode 100644 files/ca/mdn/contribute/howto/crear_un_compte_mdn/index.html create mode 100644 files/ca/mdn/contribute/processes/index.html delete mode 100644 files/ca/mdn/contribute/processos/index.html delete mode 100644 files/ca/mdn/kuma/index.html create mode 100644 files/ca/mdn/yari/index.html delete mode 100644 files/ca/mdn_at_ten/index.html create mode 100644 files/ca/mozilla/firefox/releases/2/index.html create mode 100644 files/ca/orphaned/mdn/community/index.html create mode 100644 files/ca/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html create mode 100644 files/ca/orphaned/web/html/element/command/index.html create mode 100644 files/ca/orphaned/web/html/element/element/index.html create mode 100644 files/ca/orphaned/web/html/global_attributes/dropzone/index.html create mode 100644 files/ca/orphaned/web/javascript/reference/global_objects/array/prototype/index.html create mode 100644 files/ca/web/api/canvas_api/tutorial/advanced_animations/index.html delete mode 100644 "files/ca/web/api/canvas_api/tutorial/animacions_avan\303\247ades/index.html" delete mode 100644 "files/ca/web/api/canvas_api/tutorial/animacions_b\303\240siques/index.html" delete mode 100644 files/ca/web/api/canvas_api/tutorial/aplicar_estils_i_colors/index.html create mode 100644 files/ca/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html create mode 100644 files/ca/web/api/canvas_api/tutorial/basic_animations/index.html create mode 100644 files/ca/web/api/canvas_api/tutorial/basic_usage/index.html delete mode 100644 "files/ca/web/api/canvas_api/tutorial/composici\303\263/index.html" create mode 100644 files/ca/web/api/canvas_api/tutorial/compositing/index.html delete mode 100644 files/ca/web/api/canvas_api/tutorial/dibuixar_text/index.html create mode 100644 files/ca/web/api/canvas_api/tutorial/drawing_text/index.html delete mode 100644 "files/ca/web/api/canvas_api/tutorial/manipular_p\303\255xels_amb_canvas/index.html" create mode 100644 files/ca/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.html delete mode 100644 files/ca/web/api/canvas_api/tutorial/transformacions/index.html create mode 100644 files/ca/web/api/canvas_api/tutorial/transformations/index.html delete mode 100644 "files/ca/web/api/canvas_api/tutorial/\303\272s_b\303\240sic/index.html" delete mode 100644 files/ca/web/css/_colon_any/index.html create mode 100644 files/ca/web/css/_colon_is/index.html create mode 100644 files/ca/web/css/adjacent_sibling_combinator/index.html create mode 100644 files/ca/web/css/attribute_selectors/index.html create mode 100644 files/ca/web/css/child_combinator/index.html create mode 100644 files/ca/web/css/class_selectors/index.html delete mode 100644 files/ca/web/css/css_box_model/dominar_el_col.lapse_del_marge/index.html delete mode 100644 "files/ca/web/css/css_box_model/introducci\303\263_al_model_de_caixa_css/index.html" create mode 100644 files/ca/web/css/css_box_model/introduction_to_the_css_box_model/index.html create mode 100644 files/ca/web/css/css_box_model/mastering_margin_collapsing/index.html create mode 100644 files/ca/web/css/css_selectors/index.html create mode 100644 files/ca/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html create mode 100644 files/ca/web/css/descendant_combinator/index.html create mode 100644 files/ca/web/css/general_sibling_combinator/index.html create mode 100644 files/ca/web/css/id_selectors/index.html create mode 100644 files/ca/web/css/reference/index.html delete mode 100644 "files/ca/web/css/refer\303\251ncia_css/index.html" delete mode 100644 files/ca/web/css/selectors_css/index.html delete mode 100644 files/ca/web/css/selectors_css/using_the__colon_target_pseudo-class_in_selectors/index.html delete mode 100644 files/ca/web/css/selectors_d'atribut/index.html delete mode 100644 files/ca/web/css/selectors_de_classe/index.html delete mode 100644 files/ca/web/css/selectors_de_descendents/index.html delete mode 100644 files/ca/web/css/selectors_de_fills/index.html delete mode 100644 files/ca/web/css/selectors_de_germans_adjacents/index.html delete mode 100644 files/ca/web/css/selectors_de_tipus/index.html delete mode 100644 files/ca/web/css/selectors_general_de_germans/index.html delete mode 100644 files/ca/web/css/selectors_id/index.html delete mode 100644 files/ca/web/css/selectors_universal/index.html delete mode 100644 files/ca/web/css/sintaxi/index.html create mode 100644 files/ca/web/css/syntax/index.html create mode 100644 files/ca/web/css/type_selectors/index.html create mode 100644 files/ca/web/css/universal_selectors/index.html create mode 100644 files/ca/web/guide/ajax/getting_started/index.html delete mode 100644 files/ca/web/guide/ajax/primers_passos/index.html delete mode 100644 files/ca/web/guide/css/inici_en_css/caixes/index.html delete mode 100644 "files/ca/web/guide/css/inici_en_css/cascada_i_her\303\250ncia/index.html" delete mode 100644 files/ca/web/guide/css/inici_en_css/color/index.html delete mode 100644 files/ca/web/guide/css/inici_en_css/com_funciona_el_css/index.html delete mode 100644 files/ca/web/guide/css/inici_en_css/css_llegible/index.html delete mode 100644 files/ca/web/guide/css/inici_en_css/disseny/index.html delete mode 100644 files/ca/web/guide/css/inici_en_css/estils_de_text/index.html delete mode 100644 files/ca/web/guide/css/inici_en_css/index.html delete mode 100644 files/ca/web/guide/css/inici_en_css/javascript/index.html delete mode 100644 files/ca/web/guide/css/inici_en_css/llistes/index.html delete mode 100644 "files/ca/web/guide/css/inici_en_css/mitj\303\240/index.html" delete mode 100644 "files/ca/web/guide/css/inici_en_css/per_qu\303\250_utilitzar_css/index.html" delete mode 100644 "files/ca/web/guide/css/inici_en_css/que_\303\251s_css/index.html" delete mode 100644 files/ca/web/guide/css/inici_en_css/selectors/index.html delete mode 100644 files/ca/web/guide/css/inici_en_css/svg_i_css/index.html delete mode 100644 files/ca/web/guide/css/inici_en_css/taules/index.html create mode 100644 files/ca/web/guide/graphics/index.html delete mode 100644 "files/ca/web/guide/gr\303\240fics/index.html" delete mode 100644 "files/ca/web/guide/html/_consells_per_crear_p\303\240gines_html_de_c\303\240rrega_r\303\240pida/index.html" delete mode 100644 files/ca/web/guide/html/us_de_seccions_i_esquemes_en_html/index.html create mode 100644 files/ca/web/guide/html/using_html_sections_and_outlines/index.html create mode 100644 files/ca/web/guide/mobile/a_hybrid_approach/index.html create mode 100644 files/ca/web/guide/mobile/index.html create mode 100644 files/ca/web/guide/mobile/mobile-friendliness/index.html create mode 100644 files/ca/web/guide/mobile/separate_sites/index.html delete mode 100644 files/ca/web/html/element/command/index.html delete mode 100644 files/ca/web/html/element/element/index.html delete mode 100644 "files/ca/web/html/elements_en_l\303\255nia/index.html" delete mode 100644 files/ca/web/html/global_attributes/dropzone/index.html create mode 100644 files/ca/web/html/inline_elements/index.html delete mode 100644 files/ca/web/html/optimizing_your_pages_for_speculative_parsing/index.html create mode 100644 files/ca/web/javascript/about_javascript/index.html create mode 100644 files/ca/web/javascript/guide/expressions_and_operators/index.html delete mode 100644 files/ca/web/javascript/guide/expressions_i_operadors/index.html delete mode 100644 "files/ca/web/javascript/guide/introducci\303\263/index.html" create mode 100644 files/ca/web/javascript/guide/introduction/index.html delete mode 100644 "files/ca/web/javascript/introducci\303\263_al_javascript_orientat_a_objectes/index.html" delete mode 100644 files/ca/web/javascript/quant_a_javascript/index.html create mode 100644 files/ca/web/javascript/reference/about/index.html create mode 100644 files/ca/web/javascript/reference/classes/constructor/index.html create mode 100644 files/ca/web/javascript/reference/classes/index.html create mode 100644 files/ca/web/javascript/reference/classes/static/index.html delete mode 100644 files/ca/web/javascript/reference/errors/nomes-lectura/index.html create mode 100644 files/ca/web/javascript/reference/errors/read-only/index.html delete mode 100644 files/ca/web/javascript/reference/functions/parameters_rest/index.html create mode 100644 files/ca/web/javascript/reference/functions/rest_parameters/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/array/entries/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/array/every/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/array/fill/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/array/filter/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/array/find/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/array/findindex/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/array/foreach/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/array/includes/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/array/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/array/indexof/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/array/isarray/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/array/join/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/array/keys/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/array/lastindexof/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/array/length/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/array/map/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/array/of/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/array/pop/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/array/push/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/array/reduce/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/array/reverse/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/array/shift/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/array/slice/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/array/some/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/array/splice/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/boolean/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/boolean/tosource/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/boolean/tostring/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/boolean/valueof/index.html delete mode 100644 files/ca/web/javascript/reference/global_objects/dataview/prototype/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/date/getdate/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/date/getday/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/date/getfullyear/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/date/gethours/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/date/getmilliseconds/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/date/getminutes/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/date/getmonth/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/date/getseconds/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/date/gettime/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/date/gettimezoneoffset/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/date/getutcdate/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/date/getutcday/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/date/getutcfullyear/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/date/getutchours/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/date/getutcmilliseconds/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/date/getutcminutes/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/date/getutcmonth/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/date/getutcseconds/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/date/getyear/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/date/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/date/now/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/date/setdate/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/date/setfullyear/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/date/sethours/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/date/setmilliseconds/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/date/setminutes/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/date/setmonth/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/date/setseconds/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/date/settime/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/date/setutcdate/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/date/setutcfullyear/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/date/setutchours/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/date/setutcmilliseconds/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/date/setutcminutes/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/date/setutcmonth/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/date/setutcseconds/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/date/setyear/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/date/todatestring/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/date/togmtstring/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/date/toisostring/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/date/tojson/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/date/tostring/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/date/totimestring/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/date/utc/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/date/valueof/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/error/columnnumber/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/error/filename/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/error/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/error/linenumber/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/error/message/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/error/name/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/error/stack/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/error/tosource/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/error/tostring/index.html delete mode 100644 files/ca/web/javascript/reference/global_objects/evalerror/prototype/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/infinity/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/json/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/map/clear/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/map/delete/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/map/entries/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/map/foreach/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/map/get/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/map/has/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/map/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/map/keys/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/map/set/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/map/size/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/map/values/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/math/abs/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/math/acos/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/math/acosh/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/math/asin/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/math/asinh/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/math/atan/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/math/atan2/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/math/atanh/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/math/cbrt/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/math/ceil/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/math/clz32/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/math/cos/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/math/cosh/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/math/e/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/math/exp/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/math/expm1/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/math/floor/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/math/fround/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/math/hypot/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/math/imul/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/math/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/math/ln10/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/math/ln2/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/math/log/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/math/log10/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/math/log10e/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/math/log1p/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/math/log2/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/math/log2e/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/math/max/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/math/min/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/math/pi/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/math/pow/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/math/random/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/math/round/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/math/sign/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/math/sin/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/math/sinh/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/math/sqrt/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/math/sqrt1_2/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/math/sqrt2/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/math/tan/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/math/tanh/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/math/trunc/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/nan/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/null/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/number/epsilon/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/number/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/number/isfinite/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/number/isinteger/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/number/isnan/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/number/issafeinteger/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/number/max_safe_integer/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/number/max_value/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/number/min_safe_integer/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/number/min_value/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/number/nan/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/number/negative_infinity/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/number/parsefloat/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/number/parseint/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/number/positive_infinity/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/number/toexponential/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/number/tofixed/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/number/toprecision/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/number/tostring/index.html delete mode 100644 files/ca/web/javascript/reference/global_objects/object/prototype/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/parsefloat/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/set/add/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/set/clear/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/set/delete/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/set/entries/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/set/has/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/set/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/set/values/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/string/anchor/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/string/big/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/string/blink/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/string/bold/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/string/charat/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/string/concat/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/string/endswith/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/string/fixed/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/string/fontcolor/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/string/fontsize/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/string/fromcharcode/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/string/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/string/indexof/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/string/italics/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/string/length/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/string/link/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/string/normalize/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/string/small/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/string/startswith/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/string/sub/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/string/substr/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/string/sup/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/string/tolocalelowercase/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/string/tolocaleuppercase/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/string/tolowercase/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/string/tostring/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/string/touppercase/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/string/trim/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/string/trimend/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/string/trimstart/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/syntaxerror/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/undefined/index.html delete mode 100644 files/ca/web/javascript/reference/global_objects/weakmap/prototype/index.html delete mode 100644 files/ca/web/javascript/reference/global_objects/weakset/prototype/index.html create mode 100644 files/ca/web/javascript/reference/index.html create mode 100644 files/ca/web/javascript/reference/operators/comma_operator/index.html create mode 100644 files/ca/web/javascript/reference/operators/conditional_operator/index.html create mode 100644 files/ca/web/javascript/reference/operators/function/index.html create mode 100644 files/ca/web/javascript/reference/operators/grouping/index.html create mode 100644 files/ca/web/javascript/reference/operators/index.html create mode 100644 files/ca/web/javascript/reference/operators/super/index.html create mode 100644 files/ca/web/javascript/reference/operators/typeof/index.html create mode 100644 files/ca/web/javascript/reference/operators/void/index.html create mode 100644 files/ca/web/javascript/reference/operators/yield/index.html create mode 100644 files/ca/web/javascript/reference/statements/block/index.html create mode 100644 files/ca/web/javascript/reference/statements/break/index.html create mode 100644 files/ca/web/javascript/reference/statements/continue/index.html create mode 100644 files/ca/web/javascript/reference/statements/debugger/index.html create mode 100644 files/ca/web/javascript/reference/statements/do...while/index.html create mode 100644 files/ca/web/javascript/reference/statements/empty/index.html create mode 100644 files/ca/web/javascript/reference/statements/export/index.html create mode 100644 files/ca/web/javascript/reference/statements/for...of/index.html create mode 100644 files/ca/web/javascript/reference/statements/for/index.html create mode 100644 files/ca/web/javascript/reference/statements/function/index.html create mode 100644 files/ca/web/javascript/reference/statements/if...else/index.html create mode 100644 files/ca/web/javascript/reference/statements/index.html create mode 100644 files/ca/web/javascript/reference/statements/return/index.html create mode 100644 files/ca/web/javascript/reference/statements/throw/index.html create mode 100644 files/ca/web/javascript/reference/statements/while/index.html delete mode 100644 files/ca/web/javascript/referencia/classes/constructor/index.html delete mode 100644 files/ca/web/javascript/referencia/classes/index.html delete mode 100644 files/ca/web/javascript/referencia/classes/static/index.html delete mode 100644 files/ca/web/javascript/referencia/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/array/entries/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/array/every/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/array/fill/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/array/filter/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/array/find/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/array/findindex/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/array/foreach/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/array/includes/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/array/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/array/indexof/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/array/isarray/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/array/join/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/array/keys/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/array/lastindexof/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/array/length/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/array/map/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/array/of/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/array/pop/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/array/prototype/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/array/push/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/array/reduce/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/array/reverse/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/array/shift/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/array/slice/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/array/some/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/array/splice/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/boolean/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/boolean/prototype/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/boolean/tosource/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/boolean/tostring/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/boolean/valueof/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/getdate/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/getday/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/getfullyear/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/gethours/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/getmilliseconds/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/getminutes/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/getmonth/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/getseconds/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/gettime/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/gettimezoneoffset/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/getutcdate/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/getutcday/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/getutcfullyear/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/getutchours/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/getutcmilliseconds/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/getutcminutes/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/getutcmonth/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/getutcseconds/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/getyear/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/now/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/prototype/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/setdate/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/setfullyear/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/sethours/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/setmilliseconds/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/setminutes/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/setmonth/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/setseconds/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/settime/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/setutcdate/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/setutcfullyear/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/setutchours/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/setutcmilliseconds/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/setutcminutes/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/setutcmonth/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/setutcseconds/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/setyear/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/todatestring/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/togmtstring/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/toisostring/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/tojson/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/tostring/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/totimestring/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/utc/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/valueof/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/error/columnnumber/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/error/filename/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/error/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/error/linenumber/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/error/message/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/error/name/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/error/prototype/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/error/stack/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/error/tosource/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/error/tostring/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/infinity/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/json/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/map/clear/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/map/delete/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/map/entries/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/map/foreach/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/map/get/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/map/has/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/map/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/map/keys/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/map/prototype/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/map/set/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/map/size/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/map/values/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/abs/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/acos/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/acosh/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/asin/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/asinh/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/atan/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/atan2/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/atanh/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/cbrt/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/ceil/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/clz32/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/cos/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/cosh/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/e/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/exp/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/expm1/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/floor/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/fround/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/hypot/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/imul/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/ln10/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/ln2/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/log/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/log10/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/log10e/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/log1p/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/log2/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/log2e/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/max/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/min/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/pi/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/pow/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/random/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/round/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/sign/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/sin/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/sinh/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/sqrt/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/sqrt1_2/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/sqrt2/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/tan/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/tanh/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/trunc/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/nan/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/null/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/number/epsilon/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/number/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/number/isfinite/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/number/isinteger/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/number/isnan/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/number/issafeinteger/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/number/max_safe_integer/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/number/max_value/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/number/min_safe_integer/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/number/min_value/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/number/nan/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/number/negative_infinity/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/number/parsefloat/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/number/parseint/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/number/positive_infinity/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/number/prototype/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/number/toexponential/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/number/tofixed/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/number/toprecision/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/number/tostring/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/parsefloat/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/set/add/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/set/clear/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/set/delete/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/set/entries/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/set/has/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/set/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/set/prototype/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/set/values/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/string/anchor/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/string/big/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/string/blink/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/string/bold/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/string/charat/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/string/concat/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/string/endswith/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/string/fixed/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/string/fontcolor/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/string/fontsize/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/string/fromcharcode/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/string/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/string/indexof/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/string/italics/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/string/length/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/string/link/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/string/normalize/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/string/small/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/string/startswith/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/string/sub/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/string/substr/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/string/sup/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/string/tolocalelowercase/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/string/tolocaleuppercase/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/string/tolowercase/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/string/tostring/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/string/touppercase/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/string/trim/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/string/trimleft/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/string/trimright/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/syntaxerror/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/syntaxerror/prototype/index.html delete mode 100644 files/ca/web/javascript/referencia/objectes_globals/undefined/index.html delete mode 100644 files/ca/web/javascript/referencia/operadors/arithmetic_operators/index.html delete mode 100644 files/ca/web/javascript/referencia/operadors/bitwise_operators/index.html delete mode 100644 files/ca/web/javascript/referencia/operadors/conditional_operator/index.html delete mode 100644 files/ca/web/javascript/referencia/operadors/function/index.html delete mode 100644 files/ca/web/javascript/referencia/operadors/grouping/index.html delete mode 100644 files/ca/web/javascript/referencia/operadors/index.html delete mode 100644 files/ca/web/javascript/referencia/operadors/logical_operators/index.html delete mode 100644 files/ca/web/javascript/referencia/operadors/operador_coma/index.html delete mode 100644 files/ca/web/javascript/referencia/operadors/super/index.html delete mode 100644 files/ca/web/javascript/referencia/operadors/typeof/index.html delete mode 100644 files/ca/web/javascript/referencia/operadors/void/index.html delete mode 100644 files/ca/web/javascript/referencia/operadors/yield/index.html delete mode 100644 files/ca/web/javascript/referencia/sentencies/block/index.html delete mode 100644 files/ca/web/javascript/referencia/sentencies/break/index.html delete mode 100644 files/ca/web/javascript/referencia/sentencies/buida/index.html delete mode 100644 files/ca/web/javascript/referencia/sentencies/continue/index.html delete mode 100644 files/ca/web/javascript/referencia/sentencies/debugger/index.html delete mode 100644 files/ca/web/javascript/referencia/sentencies/do...while/index.html delete mode 100644 files/ca/web/javascript/referencia/sentencies/export/index.html delete mode 100644 files/ca/web/javascript/referencia/sentencies/for...of/index.html delete mode 100644 files/ca/web/javascript/referencia/sentencies/for/index.html delete mode 100644 files/ca/web/javascript/referencia/sentencies/function/index.html delete mode 100644 files/ca/web/javascript/referencia/sentencies/if...else/index.html delete mode 100644 files/ca/web/javascript/referencia/sentencies/index.html delete mode 100644 files/ca/web/javascript/referencia/sentencies/return/index.html delete mode 100644 files/ca/web/javascript/referencia/sentencies/throw/index.html delete mode 100644 files/ca/web/javascript/referencia/sentencies/while/index.html delete mode 100644 files/ca/web/javascript/referencia/sobre/index.html create mode 100644 files/ca/web/opensearch/index.html create mode 100644 files/ca/web/progressive_web_apps/index.html create mode 100644 files/ca/web/progressive_web_apps/responsive/media_types/index.html create mode 100644 files/ca/web/svg/tutorial/svg_and_css/index.html delete mode 100644 files/ca/web_development/index.html delete mode 100644 files/ca/web_development/mobile/a_hybrid_approach/index.html delete mode 100644 files/ca/web_development/mobile/index.html delete mode 100644 files/ca/web_development/mobile/mobile-friendliness/index.html delete mode 100644 files/ca/web_development/mobile/responsive_design/index.html delete mode 100644 files/ca/web_development/mobile/separate_sites/index.html diff --git "a/files/ca/addici\303\263_de_motors_de_cerca_a_les_p\303\240gines_web/index.html" "b/files/ca/addici\303\263_de_motors_de_cerca_a_les_p\303\240gines_web/index.html" deleted file mode 100644 index adfa504760..0000000000 --- "a/files/ca/addici\303\263_de_motors_de_cerca_a_les_p\303\240gines_web/index.html" +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: Addició de motors de cerca a les pàgines web -slug: Addició_de_motors_de_cerca_a_les_pàgines_web -tags: - - Complements - - Connectors_de_cerca -translation_of: Web/OpenSearch -translation_of_original: Web/API/Window/sidebar/Adding_search_engines_from_Web_pages ---- -

El Firefox utilitza codi JavaScript per a instaŀlar connectors de motors de cerca. Pot fer servir 3 formats: MozSearch, OpenSearch i Sherlock. -

Quan un codi JavaScript intenta instaŀlar un connector de cerca, el Firefox mostra un avís demanant a l'usuari permís per a instaŀlar-lo. -

-

Instaŀlació de connectors MozSearch i OpenSearch

-

Per a instaŀlar un connector MozSearch o OpenSearch, cal que utilitzeu el mètode DOM window.external.AddSearchProvider(). La sintaxi d'aquest mètode és: -

-
window.external.AddSearchProvider(URL_motor);
-
-

On URL_motor és l'URL al fitxer XML del connector del motor de cerca.

-
Nota: MozSearch i OpenSearch només funcionen a partir del Firefox 2.
-

Per a més detalls, consulteu Creació de connectors MozSearch. -

-

Instaŀlació de connectors Sherlock

-

Per a instaŀlar un connector Sherlock, cal que es cridi a window.sidebar.addSearchEngine(), la sintaxi és la següent: -

-
window.sidebar.addSearchEngine(URL_motor, URL_icona, Nom_suggerit, Categoria_suggerida);
-
- -

Per a més detalls de Sherlock, visiteu http://developer.apple.com/macosx/sherlock/ -

{{ languages( { "en": "en/Adding_search_engines_from_web_pages", "it": "it/Installare_plugin_di_ricerca_dalle_pagine_web", "ja": "ja/Adding_search_engines_from_web_pages" } ) }} diff --git a/files/ca/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/ca/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html new file mode 100644 index 0000000000..b7bf86a77f --- /dev/null +++ b/files/ca/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html @@ -0,0 +1,151 @@ +--- +title: Cascada i herència +slug: Web/Guide/CSS/Inici_en_CSS/Cascada_i_herència +tags: + - Beginner + - CSS + - 'CSS:Getting_Started' + - Guide + - NeedsBeginnerUpdate + - NeedsUpdate + - Web +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", "Com funciona el CSS")}}Aquesta és la quarta secció del tutorial CSS Getting Started ; descriu com els fulls d'estil interactuenen en cascada, i com els elements hereten l'estil dels seus pares. S'agrega a la vostre fulla d'estils d'exemple, utilitzant l'herència per alterar l'estil de moltes parts del document en un sol pas.

+ +

Informació: Cascada i herència

+ +

L'estil final per a un element es pot especificar en molts llocs diferents, que poden interactuar d'una manera complexa. Aquesta interacció complexa fa que el CSS sigui de gran abast, però també pot fer que sigui confús i difícil de depurar.

+ +

Tres fonts principals d'informació d'estil formen una cascada. Aqueste son:

+ + + +

L'estil de l'usuari modifica l'estil per defecte del navegador. L'estil de l'autor del document modifica l'estil una mica més. En aquest tutorial, vosaltres sou l'autor del document d'exemple, i només es treballa amb fulls d'estil d'autor.

+ +
+
Exemple
+ +

Quan llegiu aquest document en un navegador, part de l'estil que es veu prové dels valors per defecte del navegador per HTML.

+ +

Part de l'estil podria venir de la configuració del navegador a mida o un arxiu de definició d'estil personalitzat. A Firefox, la configuració es pot personalitzar en el quadre de diàleg Preferències, o es pot especificar estils en un arxiu userContent.css arxiu anomenat en el vostre perfil de navegador.

+ +

Part de l'estil prové de les fulles d'estil vinculades al document per part del servidor.

+
+ +

En obrir el document d'exemple en el navegador, els elements {{ HTMLElement("strong") }} destacan més que la resta del text. Això ve de l'estil per defecte del navegador per HTML.

+ +

Els elements {{ HTMLElement("strong") }} són de color vermell. Això ve de la pròpia fulla d'estils d'exemple.

+ +

Els elements {{ HTMLElement("strong") }} també hereten gran part de  l'estil de l'element {{HTMLElement ("p")}}, perquè són els seus fills. De la mateixa manera, l'element {{ HTMLElement("p") }} hereta gran part de l'estil de l'element {{ HTMLElement("body") }}.

+ +

Per estils en cascada, els fulls d'estil d'autor tenen prioritat, a continuació els fulls d'estil del lector i seguidament els valors per defecte del navegador.

+ +

Per estils heretats, l'estil propi d'un node fill té prioritat sobre l'estil heretat del seu pare.

+ +

Aquestes no són les úniques prioritats que s'apliquen. Una pàgina més endavant en aquest tutorial s'explica més.

+ +
+
Més detalls
+ +

CSS proporciona una manera perquè el lector pugui anul·lar l'estil de l'autor del document, mitjançant l'ús de la paraula clau !important.

+ +

Això vol dir que, com a autor del document, no sempre es pot predir amb exactitud el que els vostres lectors veuran.

+ +

Si vols conèixer tots els detalls de cascada i herència, consulteu Assignació de valors de les propietats, Cascada i herència en l'especificació CSS.

+
+ +

Acció: L'ús de l'herència

+ +
    +
  1. Edita l'arxiu CSS d'exemple.
    2. +
  2. Afegir aquesta línia copiant-la i enganxant-la. Realment no importa si l'afegeixes per damunt o per sota de la línia ja existent. No obstant això, afegir-la en la part superior és el mes lògic, ja que en el document  l'element {{ HTMLElement("p") }} és el pare de l'element {{ HTMLElement("strong") }}: + 
    p {color: blue; text-decoration: underline;}
+
    +
    3. +
  3. Actualitzar el navegador per veure l'efecte en el document d'exemple. El subratllat afecta a tot el text en el paràgraf, incloent les lletres inicials. Els elements {{ HTMLElement("strong") }} han hagut d'heretar l'estil subratllat del seu pare, l'element {{ HTMLElement("p") }}.
    + +

    Però els elements {{ HTMLElement("strong") }} estan sent vermells. El color vermell correspont el seu propi estil, pel que té prioritat sobre el color blau del seu pare, l'element {{ HTMLElement("p") }}.

    +
    4. +
+ +

Abans

+ +

Contingut HTML

+ +
<p>
+  <strong>C</strong>ascading
+  <strong>S</strong>tyle
+  <strong>S</strong>heets
+</p>
+
+ +

Contingut CSS

+ +
strong {color:red}
+
+ +

{{ EmbedLiveSample('Before') }}

+ +

Després

+ +

Contingut HTML

+ +
<p>
+  <strong>C</strong>ascading
+  <strong>S</strong>tyle
+  <strong>S</strong>heets
+</p>
+ +

Contingut CSS

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

{{ EmbedLiveSample('After') }}

+ +

 

+ +
+
Repte
+Modifiqueu el full d'estils perquè només les lletres vermelles estiguin subratllades: + + + + + + + +
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
+Veure la solució per el repte.
+ +

 

+ +

I ara què?

+ +

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors", "Selectors")}}El full d'estils d'exemple especifica els estils per a les etiquetes <p> i <strong>, modificant l'estil dels elements corresponents a tot el document. La següent secció descriu com especificar l'estil de manera més selectiva.

diff --git a/files/ca/conflicting/learn/css/building_blocks/index.html b/files/ca/conflicting/learn/css/building_blocks/index.html new file mode 100644 index 0000000000..39d411bb19 --- /dev/null +++ b/files/ca/conflicting/learn/css/building_blocks/index.html @@ -0,0 +1,342 @@ +--- +title: Caixes +slug: Web/Guide/CSS/Inici_en_CSS/Caixes +tags: + - Basic + - Beginner + - CSS + - CSS Borders + - CSS Margin + - CSS Padding + - 'CSS:Getting_Started' + - NeedsBeginnerUpdate + - NeedsUpdate + - Web +translation_of: Learn/CSS/Building_blocks +translation_of_original: Web/Guide/CSS/Getting_started/Boxes +--- +

{{ CSSTutorialTOC() }}

+ +

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Lists", "Llistes") }}Aquesta és la 11th secció del tutorial CSS Getting Started descriu com podeu utilitzar CSS per controlar l'espai que ocupa un element quan es mostra. En el document d'exemple, canviareu l'espaiat i afegireu regles decoratives.

+ +

Informació: Caixes

+ +

Quan el navegador mostra un element, l'element ocupa espai. Hi ha quatre parts en l'espai que ocupa.

+ +

Al mig, és l'espai que l'element necessita per mostrar el seu contingut. Al voltant d'això, hi ha un padding (farciment). Al voltant d'això, hi ha un border (vora). Al voltant d'això, hi ha un margin (marge) que separa l'element d'altres elements.

+ + + + + + + + +
+
+

margin (marge)

+ +

border (vora)

+ +
+

padding (farciment)

+ +
+

element

+
+
+
+ +

El gris pàl·lid mostra parts de la disposició.

+ 		+
+

 

+ +

 

+ +
+

 

+ +
+

element

+
+
+
+ +

Això és el que es veu en el vostre navegador.

+
+ +

El farcit, vora i marge poden tenir diferents mides en la part superior, dret, inferior i esquerra de l'element. Qualsevol o totes aquestes mides poden ser zero.

+ +

Acolorir

+ +

El farcit és sempre del mateix color que el fons de l'element. Així que quan s'estableix el color de fons, es veu el color aplicat a l'element en si i el seu farcit. El marge és sempre transparent.

+ + + + + + + + +
+
+

margin

+ +

border

+ +
+

padding

+ +
+

element

+
+
+
+ +

L'element té un fons verd.

+ 		+
+

 

+ +

 

+ +
+

 

+ +
+

element

+
+
+
+ +

Això és el que es veu en el vostre navegador.

+
+ +

Vores

+ +

Podeu utilitzar les vores per decorar elements amb línies o caixes.

+ +

Per especificar la mateixa vora a tot al voltant d'un element, utilitzeu la propietat {{ cssxref("border") }}. Especificar l'ample (en píxels en general per a la seva visualització en una pantalla), l'estil i el color.

+ +

Els estils són:

+ + + + + + + + + + + + + + + + +
+
solid
+ 		+
dotted
+ 		+
dashed
+ 		+
double
+
+
inset
+ 		+
outset
+ 		+
ridge
+ 		+
groove
+
+ +

També podeu establir l'estil a none o hidden per eliminar de forma explícita la vora, o establir el color a transparent per fer la vora invisible sense canviar el disseny.

+ +

Especificar vores a un costat alhora, utilitzeu les propietats: {{ cssxref("border-top") }}, {{ cssxref("border-right") }}, {{cssxref("border-bottom")}}, {{cssxref("border-left")}}. Podeu utilitzar aquests per especificar una vora en un sol costat, o diferentes vores en diferents costats.

+ +
+
Exemple
+ +

Aquesta regla estableix el color de fons i la vora de la part superior dels elements d'encapçalament:

+ +
h3 {
+  border-top: 4px solid #7c7; /* mid green */
+  background-color: #efe;     /* pale green */
+  color: #050;                /* dark green */
+  }
+
+ +

El resultat és el següent:

+ + + + + + + +
+

Stylish heading

+
+ +

Aquesta regla fa que les imatges siguin més fàcils de veure, donant-los una vora gris mig en tot:

+ +
img {border: 2px solid #ccc;}
+
+ +

El resultat és el següent:

+ + + + + + + + +
Imatge:Image:Blue-rule.png
+
+ +

Marges i farciment

+ +

Utilitzeu marges i farciment per ajustar les posicions dels elements i crear l'espai que els envolta.

+ +

Utilitzeu la propietat {{ cssxref("margin") }} o la propietat {{ cssxref("padding") }} per establir els amples dels marges o de farciment, respectivament.

+ +

Si s'especifica una amplada, s'aplica al voltant de tot l'element (a dalt, dreta, a sota i a l'esquerra).

+ +

Si s'especifica dos amples, la primera s'aplica a la part superior i inferior, la segona a la dreta i l'esquerra.

+ +

Podeu definir els quatre amplades en l'ordre: dalt, dreta, a sota, a l'esquerra.

+ +
+
Exemple
+ +

Aquesta regla distingeix els paràgrafs amb la classe remark, donant-los una vora vermella al seu voltant.

+ +

El farciment al seu voltant separa la vora del text una mica.

+ +

Un marge esquerre sagna el paràgraf en relació amb la resta del text:

+ +
p.remark {
+  border: 2px solid red;
+  padding: 4px;
+  margin-left: 24px;
+  }
+
+ +

El resultat és el següent:

+ + + + + + + +
+

Here is a normal paragraph.

+ +

Here is a remark.

+
+
+ +
+
Més detalls
+ +

Quan s'utilitzan marges i farcit per ajustar la forma en què els elements es disposen, les seves regles d'estil interactuen amb els valors per defecte del navegador en formes que poden ser complexes.

+ +

Els diferents navegadors posen elements de manera diferent. Els resultats podrien ser similar fins que la vostre fulla d'estil canvia les coses. A vegades això pot fer que les vostres fulles d'estil donin resultats sorprenents.

+ +

Per obtenir el resultat desitjat, és possible que hàgiu de canviar el marcat del document. La pàgina següent d'aquest tutorial teniu més informació sobre això.

+ +

Per a més informació sobre el farciment, marges i vores, vegeu la pàgina de referència Model de caixa.

+
+ +

Acció: Afegir vores

+ +

Editeu l'arxiu CSS, style2.css. Afegiu aquesta regla per dibuixar una línia a través de la pàgina sobre cada capçalera:

+ +
h3 {border-top: 1px solid gray;}
+
+ +

Si vau prendre el repte de l'última pàgina, modifiqueu la regla que heu creat, en cas contrari afegiu aquesta nova regla, la d'afegir un espai sota cada element de la llista:

+ +
li {
+  list-style: lower-roman;
+  margin-bottom: 8px;
+  }
+
+ +

Actualitzeu el navegador per veure el resultat:

+ + + + + + + +
+

(A) The oceans

+ +
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+ +

(B) Numbered paragraphs

+ +

1: Lorem ipsum

+ +

2: Dolor sit

+ +

3: Amet consectetuer

+ +

4: Magna aliquam

+ +

5: Autem veleum

+
+ +
+
Repte
+ +

Afegiu una regla a la fulla d'estils, fent una vora àmpla al voltant dels oceans en un color que recordi al mar, alguna cosa com això:

+ + + + + + + +
+

(A) The oceans

+ +
+
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+
+ +

(B) Numbered paragraphs

+ +

. . .

+
+ +

 

+ +

(No hi ha necessitat perquè coincideixi amb l'amplada i el color que es veu aquí exactament.)

+
+ +

Veure la solució per el repte.

+ +

I ara què?

+ +

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Layout", "Disseny") }}En definir marges i farcit, heu modificat el disseny del document. A la pàgina següent es canvia el disseny del vostre document d'altres maneres.

diff --git a/files/ca/conflicting/learn/css/building_blocks/selectors/index.html b/files/ca/conflicting/learn/css/building_blocks/selectors/index.html new file mode 100644 index 0000000000..a3e8534ee5 --- /dev/null +++ b/files/ca/conflicting/learn/css/building_blocks/selectors/index.html @@ -0,0 +1,456 @@ +--- +title: Selectors +slug: Web/Guide/CSS/Inici_en_CSS/Selectors +tags: + - Beginner + - CSS + - CSS Selector + - 'CSS:Getting_Started' + - Example + - Guide + - NeedsBeginnerUpdate + - NeedsLiveSample + - NeedsUpdate + - Web +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", "Cascada & herència")}}Aquesta 5th secció del tutorial CSS Getting Started; s'explica com es poden aplicar estils de forma selectiva, i com els diferents tipus de selectors tenen diferents prioritats. Afegir alguns atributs a les etiquetes en el document d'exemple, i utilitzar aquests atributs en el full d'estils d'exemple.

+ +

Informació: Selectors

+ +

CSS té la seva pròpia terminologia per descriure el llenguatge CSS. Anteriorment en aquest tutorial, heu creat una línia al full d'estils com aquesta:

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

En la terminologia de CSS, tota aquesta línia és una regla. Aquesta regla s'inicia amb strong, que és un selector (o una llista de selectors). Es selecciona quins elements del DOM s'aplica la regla.

+ +
+
Més detalls
+ +

La part dins de les claus és la declaració.

+ +

L'identificador color és una propietat, i el vermell és un valor.

+ +

El punt i coma després del parell propietat-valor fa de separació d'altres parells propietat-valor en la mateixa declaració.

+ +

En aquest tutorial es refereix a un selector com strong com un selector d'etiquetes. L'especificació CSS es refereix a ell com un selector de tipus.

+
+ +

Aquesta pàgina del tutorial explica més sobre els selectors que es poden utilitzar en les regles CSS.

+ +

A més dels noms de les etiquetes, podeu utilitzar els valors dels atributs en els selectors. Això permet que les regles siguin més específiques.

+ +

Dos atributs tenen un estatus especial per CSS. Són class i id.

+ +

Selectors class

+ +

Utilitzeu l'atribut class en un element per assignar l'element un nom de classe. Depèn de vosaltres el nom que trieu per a la classe. Múltiples elements d'un document poden tenir el mateix valor de classe.

+ +

En el full d'estil, escriviu un punt (. punt) abans del nom de la classe, quan s'utilitza en un selector.

+ +

Selectors ID

+ +

Utilitzeu l'atribut id en un element per assignar un identificador a l'element. Depèn de vosaltres el nom que trieu per a l'identificador. El nom de l'identificador ha de ser únic en el document.

+ +

En el full d'estil, escriviu un signe (# hash) abans de l'identificador quan s'utilitza en un selector.

+ +
+
Exemple
+Aquesta etiqueta HTML té tant un atribut class com un atribut id: + +
<p class="key" id="principal">
+
+ +

El valor id, principal, ha de ser únic en el document, però altres etiquetes en el document poden tenir el mateix nom de la class, key.

+ +

En un full d'estil CSS, aquesta regla fa que tots els elements amb la class key siguin verds. (Pot ser que no tots siguin elements {{ HTMLElement("p") }}.)

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

Aquesta regla fa que l'únic element amb el id principal sigui negreta:

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

Selectors d'atributs

+ +

No està limitat als dos atributs especials, class i id. Podeu especificar altres atributs mitjançant claudàtors. Dins dels claudàtors es posa el nom de l'atribut, opcionalment seguit d'un operador coincident i un valor. A més, es pot fer entre majúscules i minúscules afegint una "i" després del valor, però no molts navegadors són compatibles amb aquesta funció fins al moment. Exemples:

+ +
+
[disabled]
+
Selecciona tots els elements amb un atribut "disabled".
+
[type='button']
+
Selecciona els elements amb un tipus "button".
+
[class~=key]
+
Selecciona elements amb la class "key" (però no, per exemple, "keyed", "monkey", "buckeye"). Funcionalment equivalent a .key.
+
[lang|=es]
+
Selecciona els elements especificats com espanyol. Això inclou "es" i "es-MX", però no "eu-ES" (que és basca).
+
[title*="example" i]
+
Selecciona elements title els quals conté "example", ignorant majúscules i minúscules . En els navegadors que no admeten l'indicador "i", aquest selector probablement no coincidirà amb cap element.
+
a[href^="https://"]
+
Especifica com ha de començar el valor de l'atribut; en aquest cas, es selecciona enllaços segurs.
+
img[src$=".png"]
+
Selecciona elements el valor dels quals finalitza amb la cadena proporcionada. Indirectament selecciona imatges PNG; les imatges són PNGs però la URL de les quals no acabi en ".png" no seràn seleccionades (e.g. `src="some-image.png?_=cachebusterhash"`).
+
+ +

Selectors de pseudo-classes

+ +

Un pseudo-classe CSS és una paraula clau afegida als selectors que especifica un estat especial de l'element a seleccionar. Per exemple {{ Cssxref(":hover") }} aplicarà un estil quan l'usuari es desplaci sobre l'element especificat pel selector.

+ +

Les pseudo-classes, juntament amb els pseudo-elements, permeten aplicar un estil a un element no només en relació amb el contingut de l'estructura del document, sinó també en relació als factors externs com l'historial del navegador ({{ cssxref(":visited") }}, per exemple), l'estat del seu contingut (com {{ cssxref(":checked") }} en alguns elements de formulari), o la posició del ratolí (com {{ cssxref(":hover") }} que permet saber si el ratolí està sobre un element o no). Per veure una llista completa dels selectors, visiteu especificació CSS3 Selectors working.

+ +
+
Sintaxi
+ +
selector:pseudo-class {
+  property: value;
+}
+
+
+ +

Llista de pseudo-classes

+ + + +

Llista de selectors

+ +

Una regla pot ser compartida per molts selectors mitjançant una coma (,) per separar els selectors.

+ +
+
Exemple
+En l'exemple, ambdós elements que tenen la classe "content-1" i elements que tenen la classe "content-2" per visualitzar el text en negreta. + +
.content-1, .content-2 {
+  font-weight: bold;
+}
+
+
+ +

Informació: Especificitat

+ +

Diverses regles poden tenir selectors que coincideixin amb el mateix element. Si una propietat es dóna en una sola regla, no hi ha conflicte i la propietat s'estableix en l'element. Si més d'una regla s'aplica a un element i estableix la mateixa propietat, llavors CSS dóna prioritat a la regla que té el selector més específic. Un selector de ID és més específic que una classe, pseudo-classe o selector d'atribut, que al seu torn són més específics que un selector d'etiquetes o pseudo-element.

+ +
+
Més detalls
+ +

També es poden combinar selectors, fent un selector més específic. Per exemple, el selector .key selecciona tots els elements que tenen el nom de classe key. El selector p.key selecciona només elements {{ HTMLElement("p") }} que tenen el nom de classe key.

+
+ +

Si el full d'estil té un conflicte de regles i són igualment específiques, llavors CSS doneu prioritat a la regla que és més posterior en el full d'estil.

+ +

Quan tingueu un problema amb regles en conflicte, tracteu de resoldre-ho fent una de les regles més específiques, de manera que tingui prioritat. Si no podeu fer-ho, tracteu de moure una de les regles el més prop del final de la fulla d'estils perquè tingui prioritat.

+ +

Informació: Els selectors basats en relacions

+ +

CSS té algunes maneres de seleccionar elements en funció de les relacions entre els elements. Podeu utilitzar aquests per fer selectors que siguin més específics.

+ + + + + + + + + + + + + + + + + + + + + + + + + +
Selectors comuns basats en les relacions
SelectorSeleccions
A EQualsevol element E que és un descendent d'un element A (que és: un fill, o un fill d'un fill, etc.)
A > EQualsevol element E que és un fill (és a dir, descendent directe) d'un element A
E:first-childQualsevol element E que és el primer fill del seu pare
B + EQualsevol element E que és el següent germà d'un element B (és a dir: el següent fill del mateix pare)
+ +

Es poden combinar aquests per expressar relacions complexes.

+ +

També es pot utilitzar el símbol * (asterisc) en el sentit de "qualsevol element".

+ +
+
Exemple
+ +

Una taula HTML té un atribut id, però les seves files i cel·les no tenen identificadors individuals:

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

Aquestes regles fan que la primera cel·la de cada fila estigui subratllat, i el germà de la primera cel·la de cada fila estigui tachat (en l'exemple la 2a cel·le). Només afecta a una taula específica en el document:

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

Aquest és el resultat:

+ + + + + + + +
+ + + + + + + + +
Prefix0001default
+
+
+ +
+
Més detalls
+ +

En la forma habitual, si feu un selector més específic, llavors s'augmenta la seva prioritat.

+ +

Si utilitzeu aquestes tècniques, s'evita la necessitat d'especificar els atributs class o id en tantes etiquetes en el document. En el seu lloc, CSS fa la feina.

+ +

En grans dissenys on la velocitat és important, podeu fer que les vostres fulles d'estil siguin més eficients, evitant regles complexes que depenen de les relacions entre els elements.

+ +

Per a més exemples sobre taules, consulteu Taules en la pàgina Referència CSS..

+
+ +

Acció: Ús dels selectors class i ID

+ +
    +
  1. Editeu l'arxiu HTML, i duplicar el paràgraf copiant i enganxant.
    2. +
  2. A continuació, afegir els atributs id i class a la primera còpia, i un atribut id a la segona còpia com es mostra a continuació. Com a alternativa, copiar i enganxar tot l'arxiu de nou: + 
    <!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. Ara editeu el fitxer CSS. Substituir tot el contingut per: + 
    strong { color: red; }
+.carrot { color: orange; }
+.spinach { color: green; }
+#first { font-style: italic; }
+
    +
    4. +
  4. Guardeu els arxius i actualitzar el navegador per veure el resultat: + + + + + + + + + +
    Cascading Style Sheets
    Cascading Style Sheets
    + +

    Podeu tractar de reordenar les línies de l'arxiu CSS per mostrar que l'ordre no té efecte.

    + +

    Els selectors class .carrot i .spinach tenen prioritat sobre el selector d'etiqueta strong.

    + +

    El selector ID #first té prioritat sobre els selectors class i tag.

    +
    5. +
+ +
+
Reptes
+ +
    +
  1. Sense canviar el arxiu HTML, afegiu una sola regla a l'arxiu CSS que mantingui totes les lletres inicials en el mateix color que estan ara, però faci que tot l'altre text en el segon paràgraf sigui blau: + + + + + + + + + +
    Cascading Style Sheets
    Cascading Style Sheets
    +
    2. +
  2. Ara canvieu la regla que acabeu d'afegir (sense canviar res més), per fer el primer paràgraf també blau: + + + + + + + + + +
    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
+Veure la solució per el repte.
+ +

Acció: L'ús de selectors de pseudo-classes

+ +
    +
  1. Creeu un arxiu HTML amb el següent contingut: + + 
    <!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. Ara editeu el fitxer CSS. Substituir tot el contingut per: + 
    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. Guardeu els arxius i actualitzar el navegador per veure el resultat (posar el ratolí sobre el següent enllaç per veure l'efecte): + + + + + + +
    Anem-nos  Home page  
    +
    4. +
+ +

Acció: L'ús de selectors basats en les relacions i pseudo-classes

+ +

Amb els selectors basats en relacions i pseudo-classes es poden crear complexes algoritmes en cascada. Aquesta és una tècnica comuna que s'utilitza, per exemple, amb la finalitat de crear menús desplegables en CSS pur (això només és CSS, sense necessitat d'utilitzar JavaScript). L'essència d'aquesta tècnica és la creació d'una regla com la següent:

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

per a ser aplicat a una estructura HTML com la següent:

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

Vegeu el exemple complet d'un menú desplegable basat en CSS com a possible referència.

+ +

I ara què?

+ +

La vostre fulla d'estils, d'exemple, està començant a semblar densa i complicada. La següent secció descriu la manera de fer més fàcil de llegir la CSS.{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS", "CSS llegible")}}

diff --git a/files/ca/conflicting/learn/css/building_blocks/styling_tables/index.html b/files/ca/conflicting/learn/css/building_blocks/styling_tables/index.html new file mode 100644 index 0000000000..d7875ae370 --- /dev/null +++ b/files/ca/conflicting/learn/css/building_blocks/styling_tables/index.html @@ -0,0 +1,475 @@ +--- +title: Taules +slug: Web/Guide/CSS/Inici_en_CSS/Taules +tags: + - CSS + - CSS Tables + - 'CSS:Getting_Started' + - Example + - Guide + - Intermediate + - NeedsBeginnerUpdate + - NeedsLiveSample + - NeedsUpdate + - Web +translation_of: Learn/CSS/Building_blocks/Styling_tables +translation_of_original: Web/Guide/CSS/Getting_started/Tables +--- +

{{CSSTutorialTOC}}{{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Layout", "Disseny")}}

+ +

Aquesta és la 13th secció del tutorial CSS Getting Started tutorial; descriu selectors més avançats, i algunes formes específiques en el disseny de taules. Es crea un nou document d'exemple que conté una taula, i un full d'estil per a això.

+ +

Informació: Taules

+ +

Una taula és una disposició de la informació en una reixeta rectangular. Algunes taules poden ser complexes, i per a taules complexes, diferents navegadors poden donar resultats diferents.

+ +

En dissenyar el vostre document, utilitzeu una taula per expressar les relacions entre els elements d'informació. Llavors no importa si els diferents navegadors presenten la informació de manera lleugerament diferent, ja que el significat segueix sent clar.

+ +

No utilitzeu taules en formes inusuals per produir determinats dissenys visuals. Les tècniques de la pàgina anterior d'aquest tutorial (Disseny) són millors per a aquest propòsit.

+ +

Estructura de la taula

+ +

En una taula, cada peça d'informació es mostra en una cel·la.

+ +

Les cel·les en una línia de la pàgina constitueix una fila.

+ +

En algunes taules, les files poden ser agrupades. Un grup especial de files en l'inici de la taula és la capçalera (header). Un grup especial de files al final de la taula és el peu de pàgina (footer). Les principals files de la taula són el cos (body), i que també podrien estar en grups.

+ +

Les cel·les en una línia de la pàgina conformen una columna, però les columnes tenen un ús limitat en la CSS de les taules.

+ +
+
Exemple
+ +

La taula de Selectors basats en relacion en la pàgina Selectors té deu cel·les en cinc files.

+ +

La primera fila és la capçalera. Les altres quatre files són el cos. No hi ha peu de pàgina.

+ +

Té dues columnes.

+
+ +

Aquest tutorial només cobreix taules simples, on els resultats són bastant predictibles. En una taula simple, cada cel·la ocupa només una fila i columna. Es pot utilitzar CSS per a taules complexes en les cel·les que s'estenen (s'estenen a través) més d'una fila o columna, però les taules com aquestes estan més enllà de l'abast d'aquest tutorial bàsic.

+ +

Vores

+ +

Les cel·les no tenen marges.

+ +

Les cel·les tenen vores i farciment. Per defecte, les vores estan separades pel valor de la propietat {{cssxref("border-spacing")}} de la taula. També podeu eliminar completament l'espai mitjançant l'establiment de la propietat {{cssxref ("border-collapse")}} de la taula a col·lapsar (collapse).

+ +
+
Exemple
+ +

Aquí hi ha tres taules.

+ +

La taula de l'esquerra té 0,5 em espaiat de vores. La taula del centre té espaiat de vores zero. La taula de la dreta ha col·lapsat les vores:

+ + + + + + + + +
+ +

{{embedLiveSample('Borders', 600)}}

+
+ +

Llegendes

+ +

Un element {{HTMLElement("caption")}} és una etiqueta que s'aplica a tota la taula. Per defecte, es mostra a la part superior de la taula.

+ +

Per moure'l a la part inferior, establiu la seva  propietat {{cssxref("caption-side")}} a baix. La propietat s'hereta, de manera que, alternativament, es pot establir sobre la taula o un altre element antecessor.

+ +

Per l'estil del text de la Llegenda, utilitzeu qualsevol de les propietats usuals de text.

+ +
+
Exemple
+ +

Aquesta taula té una llegenda a la part inferior.

+ +
#demo-table > caption {
+  caption-side: bottom;
+  font-style: italic;
+  text-align: right;
+}
+
+ + + +

{{embedLiveSample('Captions', 300)}}

+
+ +

Cel·les buides

+ +

Es poden mostrar cel·les buides (és a dir, les seves vores i fons) especificant {{cssxref("empty-cells")}}: show; per a l'element de la taula.

+ +

Es poden amagar mitjançant l'especificació empty-cells: hide;. Llavors, si l'element pare d'una cel·la té un fons, es mostra a través de la cel.la buida.

+ +
+
Exemple
+ +

Aquestes taules tenen un fons de color verd pàl·lid. Les seves cel·les tenen un fons gris clar i unes vores gris fosc.

+ +

A la taula de l'esquerra, es mostra la cel·la buida. A la dreta, està oculta:

+ + + + + + + + +
+ + + + + + + + + + + +
 Hearts
DiamondsSpades
+ 		+ + + + + + + + + + + +
 Hearts
DiamondsSpades
+
+
+ +
+
Detalls
+ +

Per obtenir informació detallada sobre les taules, vegeu Taules en l'especificació CSS.

+ +

La informació no va més enllà d'aquest tutorial, però no cobreix les diferències entre els navegadors que poden afectar a taules complexes.

+
+ +

Acció: Estil d'una taula

+ +
    +
  1. Feu un nou document HTML, doc3.html. Copieu i enganxeu el contingut d'aquí, assegurant-se que es desplaça per obtenir tota ella; + + 
    <!DOCTYPE html>
+<html>
+  <head>
+    <title>Sample document 3</title>
+    <link rel="stylesheet" href="style3.css">
+  </head>
+  <body>
+    <table id="demo-table">
+      <caption>Oceans</caption>
+      <thead>
+        <tr>
+          <th></th>
+          <th>Area</th>
+          <th>Mean depth</th>
+        </tr>
+        <tr>
+          <th></th>
+          <th>million km<sup>2</sup></th>
+          <th>m</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <th>Arctic</th>
+          <td>13,000</td>
+          <td>1,200</td>
+        </tr>
+        <tr>
+          <th>Atlantic</th>
+          <td>87,000</td>
+          <td>3,900</td>
+        </tr>
+        <tr>
+          <th>Pacific</th>
+          <td>180,000</td>
+          <td>4,000</td>
+        </tr>
+        <tr>
+          <th>Indian</th>
+          <td>75,000</td>
+          <td>3,900</td>
+        </tr>
+        <tr>
+          <th>Southern</th>
+          <td>20,000</td>
+          <td>4,500</td>
+        </tr>
+      </tbody>
+      <tfoot>
+        <tr>
+          <th>Total</th>
+          <td>361,000</td>
+          <td></td>
+        </tr>
+        <tr>
+          <th>Mean</th>
+          <td>72,000</td>
+          <td>3,800</td>
+        </tr>
+      </tfoot>
+    </table>
+  </body>
+</html>
+
    +
    2. +
  2. Feu un nova fulla d'estil, style3.css. Copieu i enganxeu el contingut d'aquí, assegurant-se que es desplaça per obtenir tota ella; + 
    /*** Style for doc3.html (Tables) ***/
+
+#demo-table {
+  font: 100% sans-serif;
+  background-color: #efe;
+  border-collapse: collapse;
+  empty-cells: show;
+  border: 1px solid #7a7;
+}
+
+#demo-table > caption {
+  text-align: left;
+  font-weight: bold;
+  font-size: 200%;
+  border-bottom: .2em solid #4ca;
+  margin-bottom: .5em;
+}
+
+
+/* basic shared rules */
+#demo-table th,
+#demo-table td {
+  text-align: right;
+  padding-right: .5em;
+}
+
+#demo-table th {
+  font-weight: bold;
+  padding-left: .5em;
+}
+
+
+/* header */
+#demo-table > thead > tr:first-child > th {
+  text-align: center;
+  color: blue;
+}
+
+#demo-table > thead > tr + tr > th {
+  font-style: italic;
+  color: gray;
+}
+
+/* fix size of superscript */
+#demo-table sup {
+  font-size: 75%;
+}
+
+/* body */
+#demo-table td {
+  background-color: #cef;
+  padding:.5em .5em .5em 3em;
+}
+
+#demo-table tbody th:after {
+  content: ":";
+}
+
+
+/* footer */
+#demo-table tfoot {
+  font-weight: bold;
+}
+
+#demo-table tfoot th {
+  color: blue;
+}
+
+#demo-table tfoot th:after {
+  content: ":";
+}
+
+#demo-table > tfoot td {
+  background-color: #cee;
+}
+
+#demo-table > tfoot > tr:first-child td {
+  border-top: .2em solid #7a7;
+}
+
    +
    3. +
  3. Obriu el document en el navegador. Ha de tenir un aspecte molt similar a aquest:
    + {{EmbedLiveSample("Action_Styling_a_table", 400, 380)}}
    4. +
  4. Compareu les regles de la fulla d'estil amb la taula que es mostra, per assegurar-se que compreneu l'efecte de cada regla. Si trobeu una regla que no esteu segur sobre ella, comentar-la i refresqueu el navegador per veure què passa. Aquí hi ha algunes notes sobre aquesta taula: +
      +
    • La llegenda es troba fora de la vora de la taula.
      • +
    • Si teniu una mida de punt mínim establert en les Opcions, podria afectar el superíndex en km2.
      • +
    • Hi ha tres cel·les buides. Dos d'elles permeten mostrar el fons de la taula a través. El tercer té un fons i una vora superior.
      • +
    • Els dos punts son afegits per la fulla d'estil.
      • +
    +
    5. +
+ +
+
Repte
+ +

Modifiqueu la fulla d'estils per fer que la taula tingui aquest aspecte:

+ + + + + + + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 AreaMean depth
 million km2m
Arctic:13,0001,200
Atlantic:87,0003,900
Pacific:180,0004,000
Indian:75,0003,900
Southern:20,0004,500
Total:361,000 
Mean:72,0003,800
+
+ +

Oceans

+
+
+
+ +

Veure la solució per el repte.

+ +

I ara què?

+ +

{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Media", "Media")}}Aquesta és l'última pàgina d'aquest tutorial que se centra en les propietats i els valors CSS. Per a un resum complet de les propietats i valors, vegeu Taula de propietats completa en l'especificació CSS

+ +

En la següent pàgina es veu de nou el propòsit i l'estructura de les fulles d'estil CSS.

diff --git a/files/ca/conflicting/learn/css/building_blocks/values_and_units/index.html b/files/ca/conflicting/learn/css/building_blocks/values_and_units/index.html new file mode 100644 index 0000000000..ba607aab18 --- /dev/null +++ b/files/ca/conflicting/learn/css/building_blocks/values_and_units/index.html @@ -0,0 +1,354 @@ +--- +title: Color +slug: Web/Guide/CSS/Inici_en_CSS/Color +tags: + - Beginner + - CSS + - 'CSS:Getting_Started' + - Example + - Guide + - NeedsBeginnerUpdate + - NeedsUpdate + - Web +translation_of: Learn/CSS/Introduction_to_CSS/Values_and_units#Colors +translation_of_original: Web/Guide/CSS/Getting_started/Color +--- +

{{ CSSTutorialTOC() }}

+ +

{{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles", "Estils de text")}}Aquesta és la 8th secció del tutorial CSS Getting Started tutorial;explica com especificar el color en CSS. En la vostre fulla d'estil d'exemple, s'introdueix colors de fons.

+ +

Informació: Color

+ +

En aquest tutorial fins al moment, s'ha utilitzat un nombre limitat de colors amb nom. CSS2 suporta 17 colors amb nom en tots. Alguns dels noms pot ser que no sigui l'esperat:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 negre (black) gris (gray) plata (silver) blanc (white) 
primarisvermell (red) Llima (lime) blau (blue) 
secundarisgroc (yellow) aigua (aqua) fúcsia (fuchsia) 
 marró (maroon) taronge (orange) oliva (olive) porpra (purple) verd (green) blau marí (navy) verd blavós (teal) 
+ +

 

+ +
+
Detalls
+ +

El vostre navegador pot suportar molts més colors amb nom, com:

+ + + + + + + + + + + + + + + + +
dodgerblue peachpuff tan firebrick aquamarine 
+ +

Per a més detalls d'aquesta llista ampliada, consulteu: SVG color keywords en CSS 3 mòdul de colors. Aneu amb compte d'utilitzar noms de colors que els lectors dels navegadors no siguin compatibles.

+
+ +

Per a una paleta gran, especifiqueu els components vermell, verd i blau del color que desitgeu mitjançant l'ús d'un signe de nombre (hash) i tres dígits hexadecimals en el rang de 0 - 9, a - f. Les lletres a - f representen els valors de 10 - 15:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
negre (black) #000
vermell (pure red) #f00
verd (pure green) #0f0
blau (pure blue) #00f
blanc (white) #fff
+ +


+ Per a la paleta completa, especificar dos dígits hexadecimals per a cada component:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
negre (black) #000000
vermell (pure red) #ff0000
verd (pure green) #00ff00
blau (pure blue) #0000ff
blanc (white) #ffffff
+ +

Normalment, es poden obtenir aquests codis hexadecimals de sis dígits d'un programa de gràfics o alguna altra eina.

+ +
+
Exemple
+ +

Amb una mica de pràctica, podeu ajustar els colors de tres dígits manualment per a la majoria de propòsits:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Comenceu amb el vermell pur : #f00
Perquè sigui més clar, afegir una mica de verd i blau : #f77
Perquè sigui més taronja, afegir una mica de verd addicional: #fa7
Per enfosquir, reduir tots els seus components: #c74
Per reduir la saturació, fer els seus components més iguals: #c98
Si feu tots ells exactament iguals, s'obté gris: #ccc
+ +

Per un to pastís com el blau pàl·lid:

+ + + + + + + + + + + + + + +
Comenceu amb blanc pur: #fff
Reduir els altres components una mica: #eef
+
+ +
+
Més detalls
+ +

També podeu especificar un color utilitzant valors decimals RGB en el rang de 0-255 o percentatges.

+ +

Per exemple, aquest és de color granat (vermell fosc):

+ +
rgb(128, 0, 0)
+
+ +

Per a més detalls sobre com especificar els colors, consulteu: Colors en l'especificació CSS.

+ +

Per obtenir informació sobre l'adequació dels colors del sistema de Menú i ThreeDFace, consulteu: Colors del Sistema en CSS2 en l'especificació CSS.

+
+ +

Propietats de color

+ +

Ja heu utilitzat la propietat {{ cssxref("color") }} en el text.

+ +

També podeu utilitzar la propietat {{ cssxref("background-color") }} per canviar el fons dels elements.

+ +

Els fons els podeu configurar com transparent per eliminar de forma explícita qualsevol color, deixant al descobert el fons de l'element pare.

+ +
+
Exemple
+ +

Les caixes d'exemple en aquest tutorial utilitza aquest fons de color groc pàl·lid:

+ +
background-color: #fffff4;
+
+ +

Les caixes de Més detalls utilitza aquest color gris pàl·lid:

+ +
background-color: #f4f4f4;
+
+
+ +

 

+ +

Acció: L'ús dels codis de color

+ +

Color de la pàgina

+ +
    +
  1. Editeu l'arxiu CSS.
    2. +
  2. Feu el canvi que es mostra aquí sota, per donar a les lletres inicials d'un fons blau pàl·lid. (La disposició i comentaris a l'arxiu probablement difereixen de l'arxiu que es mostra aquí. Mantenir la disposició i els comentaris de la manera que preferiu.)
    3. +
  3. +

    Contingut HTML

    + + 
    <p id = "first"> <strong>C</strong>ascading <strong class="spinach">S</strong>tyle <strong class="spinach">S</strong>heets</p>
+<p> <strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets</p>
+
    + +

    Contingut CSS

    + + 
    /*** CSS Tutorial: Color page ***/
+
+/* page font */
+body {
+  font: 16px "Comic Sans MS", cursive;
+}
+
+/* paragraphs */
+p {
+  color: blue;
+}
+#first {
+  font-style: italic;
+}
+
+/* initial letters */
+strong {
+  background-color: #ddf;
+  color: red;
+  font: 200% serif;
+}
+
+.spinach {
+  color: green;
+  background-color: #ddf;
+}
+
+
    +
    4. +
  4. Deseu el fitxer i actualitzeu el navegador per veure el resultat.
    5. +
  5. El resultat ha de ser com aquest:
    6. +
+ +

{{ EmbedLiveSample('Color_page', '', '', '', 'Web/Guide/CSS/Getting_started/Color') }}

+ +
+
Repte
+ +

A l'arxiu CSS, canviar els noms de colors als codis de color de 3 dígits sense afectar el resultat.

+ +

Això no es pot fer exactament, però es pot aconseguir aproximadament. Per fer-ho exactament es necessita codis de 6 dígits, i cal buscar l'especificació CSS o utilitzar una eina gràfica per a que coincideixi amb els colors.

+ +
+
Possible solution
+ +

The following values are reasonable approximations of the named colors:

+ +
strong {
+  color: #f00; /* red */
+  background-color: #ddf; /* pale blue */
+  font: 200% serif;
+}
+
+.carrot {
+  color: #fa0; /* orange */
+}
+
+.spinach {
+  color: #080; /* dark green */
+}
+
+p {
+  color: #00f; /* blue */
+}
+
+ +

 

+Hide solution
+Veure la solució per el repte.
+ +

I ara què?

+ +

{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Content", "Contingut")}}El document d'exemple i la seva fulla d'estil d'exemple separen el contingut de l'estil de forma estricta. La següent secció explica com es pot fer excepcions a aquesta estricta separació.

diff --git a/files/ca/conflicting/learn/css/css_layout/index.html b/files/ca/conflicting/learn/css/css_layout/index.html new file mode 100644 index 0000000000..28045a681d --- /dev/null +++ b/files/ca/conflicting/learn/css/css_layout/index.html @@ -0,0 +1,383 @@ +--- +title: Disseny +slug: Web/Guide/CSS/Inici_en_CSS/Disseny +tags: + - CSS + - CSS Float + - CSS Text Align + - CSS Unit + - 'CSS:Getting_Started' + - Example + - Guide + - Intermediate + - NeedsBeginnerUpdate + - NeedsLiveSample + - NeedsUpdate + - Web +translation_of: Learn/CSS/CSS_layout +translation_of_original: Web/Guide/CSS/Getting_started/Layout +--- +

{{ CSSTutorialTOC() }}

+ +

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Boxes", "Caixes")}}Aquesta és la 12th secció del tutorial CSS Getting Started descriu algunes maneres d'ajustar el disseny del document. Es canvia el disseny del vostre document d'exemple.

+ +

Informació: Disseny

+ +

Feu servir CSS per especificar diversos efectes visuals que canvïin el disseny del document. Algunes de les tècniques especifiques de disseny son avançades, i van més enllà de l'àmbit d'aquest tutorial bàsic.

+ +

En dissenyar una presentació que tingui un aspecte similar en diferents navegadors, la vostre fulla d'estil interactua amb la fulla d'estil i el motor de disseny predeterminats del navegador de formes que poden ser complexes. Aquest és també un tema avançat, que va més enllà de l'àmbit d'aquest tutorial bàsic.

+ +

Aquesta pàgina descriu algunes tècniques simples que podeu intentar.

+ +

Estructura del document

+ +

Si voleu controlar el disseny del document, llavors és possible que hagiu de canviar la seva estructura.

+ +

El llenguatge de marcat del document podria tenir etiquetes d'ús general per a la creació de l'estructura. Per exemple, en HTML podeu utilitzar l'element {{ HTMLElement("div") }} per crear l'estructura.

+ +
+
Exemple
+ +

En el vostre document d'exemple, els paràgrafs numerats (Numbered paragraphs), en el marc del segon epígraf, no tenen un contenidor propi.

+ +

La vostre fulla d'estil no pot dibuixar una vora al voltant d'aquests paràgrafs, perquè no hi ha cap element per especificar en el selector.

+ +

Per solucionar aquest problema estructural, es pot afegir una etiqueta {{ HTMLElement("div") }} al voltant dels paràgrafs. Aquesta etiqueta és única, pel que pot ser identificada per un atribut id:

+ +
<h3>Numbered paragraphs</h3>
+<div id="numbered">
+  <p>Lorem ipsum</p>
+  <p>Dolor sit</p>
+  <p>Amet consectetuer</p>
+  <p>Magna aliquam</p>
+  <p>Autem veleum</p>
+</div>
+
+ +

Ara a la vostre fulla d'estil podeu utilitzar una regla per especificar les vores al voltant de les dues llistes:

+ +
ul, #numbered {
+  border: 1em solid #69b;
+  padding-right:1em;
+}
+
+ +

El resultat és el següent:

+ + + + + + + +
+

(A) The oceans

+ +
+
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+
+ +

(B) Numbered paragraphs

+ +
+

1: Lorem ipsum

+ +

2: Dolor sit

+ +

3: Amet consectetuer

+ +

4: Magna aliquam

+ +

5: Autem veleum

+
+
+
+ +

Unitats de mida

+ +

Fins ara, en aquest tutorial, s'han especificat les mides en píxels (px). Aquestes són apropiades, en determinats casos, en un dispositiu de visualització com una pantalla d'ordinador. Però quan l'usuari canvia la mida de la font, el disseny pot semblar inadequat.

+ +

Per a molts propòsits, és millor especificar les mides com un percentatge o en ems (em). Un em és nominalment la mida de la font actual (l'amplada d'una lletra m). Quan l'usuari canvia la mida de la lletra, el seu disseny s'ajusta automàticament.

+ +
+
Exemple
+ +

La vora de l'esquerra d'aquest text té la mida definida en píxels.

+ +

La vora de la dreta té la mida definida en ems.

+ +

En el vostre navegador, al canviar la mida de la font veureu com la vora de la dreta s'ajusta, però la vora de l'esquerra no ho fa:

+ + + + + + + +
+
RESIZE ME PLEASE
+
+
+ +
+
Més detalls
+ +

Per a altres dispositius, altres unitats de longitud són les adequades.

+ +

Hi ha més informació sobre això en una pàgina posterior d'aquest tutorial.

+ +

Per als detalls complets dels valors i les unitats que es poden utilitzar, consulteu Valors en l'especificació CSS.

+
+ +

Disposició del text

+ +

Dues propietats defineixen com el contingut d'un element és alineat. Els podeu utilitzar per realitzar ajustos sencills en el disseny:

+ +
+
{{ cssxref("text-align") }}
+
Alinea el contingut. Utilitzeu un d'aquests valors: left, right, center, justify
+
{{ cssxref("text-indent") }}
+
Sagna el contingut en una quantitat que especifiqueu.
+
+ +

Aquestes propietats s'apliquen a qualsevol text contingut en l'element, no només al text real. Recordeu que són heretats pels fills de l'element, així que pot ser que hagiu de desactivar-los explícitament en els fills per evitar resultats sorprenents.

+ +
+
Exemple
+ +

Per centrar les capçaleres:

+ +
h3 {
+  border-top: 1px solid gray;
+  text-align: center;
+}
+
+ +

Resultant:

+ + + + + + + +
+

(A) The oceans

+
+ +

En un document HTML, el contingut que es veu per sota d'una capçalera no està estructuralment contingut per la capçalera. Així que quan s'alinea una capçalera com aquesta, les etiquetes sota de l'encapçalament no hereten l'estil.

+
+ +

Flotants

+ +

La propietat {{ cssxref("float") }} força un element cap a l'esquerra o cap a la dreta. Aquesta és una forma senzilla per controlar la seva posició i mida.

+ +

La resta del contingut del document flueix normalment al voltant de l'element flotant. Això es pot controlar mitjançant l'ús de la propietat {{ cssxref("clear") }} en altres elements per fer que es quedin allunyats dels flotants.

+ +
+
Exemple
+ +

En el vostre document d'exemple, les llistes s'estenen a través de la finestra. Això es pot evitar fent que flotin cap a l'esquerra

+ +

Per mantenir les capçaleress en el seu lloc, també heu d'especificar que es mantinguin allunyades dels flotants de la seva esquerra:

+ +
ul, #numbered {float: left;}
+h3 {clear: left;}
+
+
+ +

El resultat és el següent:

+ + + + + + + +
+

(A) The oceans

+ +
+
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+
+ +

(B) Numbered paragraphs

+ +
+

1: Lorem ipsum

+ +

2: Dolor sit

+ +

3: Amet consectetuer

+ +

4: Magna aliquam

+ +

5: Autem veleum

+
+
+ +

(Una mica de farciment (padding) es necessita a la dreta de les caixes, on la vora (border) està massa a prop del text.)

+ +

Posicionament

+ +

Podeu definir la posició d'un element de quatre maneres, especificant la propietat {{ cssxref ("position") }} i un dels següents valors.

+ +

Aquestes són les propietats avançades. És possible utilitzar-les en formes simples, és per això que s'esmenten en aquest tutorial bàsic. Però el seu ús per a dissenys complexos pot ser difícil.

+ +
+
relative
+
La posició de l'element es desplaça respecte a la seva posició normal. Utilitzeu aquesta opció per a desplaçar un element en una quantitat especificada. De vegades es pot utilitzar el marge de l'element per aconseguir el mateix efecte.
+
fixed
+
La posició de l'element és fix. Definir la posició de l'element respecte a la finestra del document. Fins i tot si la resta del document es desplaça, l'element roman fix.
+
absolute
+
La posició de l'element es fixa en relació amb un element pare. Solsament un pare que estugui posicionat amb relative, fixed o absolute. Es pot fer que qualsevol element pare sigui adequat especificant position:relative; però sense especificar cap canvi.
+
static
+
+

El valor per defecte. Utilitzeu aquest valor si cal desactivar el posicionament de manera explícita.

+
+
+ +

Juntament amb aquests valors de la propietat position (a excepció de static), especifiqueu una o més de les propietats: top, right, bottom, left, width, height per identificar on voleu que aparegui l'element, i potser també la seva grandària.

+ +
+
Exemple
+ +

Per situar dos elements en un sobre l'altre, crear un contenidor pare en el vostre document amb els dos elements en el seu interior:

+ +
<div id="parent-div">
+  <p id="forward">/</p>
+  <p id="back">\</p>
+</div>
+
+ +

En la vostre fulla d'estil, fer la posició dels pares relative. No hi ha necessitat d'especificar qualsevol canvi real. Fer la posició dels fills absolute:

+ +
#parent-div {
+  position: relative;
+  font: bold 200% sans-serif;
+}
+
+#forward, #back {
+  position: absolute;
+  margin:0px; /* no margin around the elements */
+  top: 0px; /* distance from top */
+  left: 0px; /* distance from left */
+}
+
+#forward {
+  color: blue;
+}
+
+#back {
+  color: red;
+}
+
+ +

El resultat es veu així, amb la barra invertida a la part superior de la barra inclinada:

+ +
+

/

+ +

\

+
+ + + + + + + +
 
+
+ +
+
Més detalls
+ +

La història completa de posicionament ocupa dos capítols complexes en l'especificació CSS Model de format Visual i Detalls del model de format visual.

+ +

Si esteu dissenyant fulles d'estil per a treballar en molts navegadors, llavors també cal tenir en compte les diferències en la manera com els navegadors interpreten la norma, i potser els errors en determinades versions de navegadors particulars.

+
+ +

Acció: Especificació del disseny

+ +
    +
  1. Canvieu el document d'exemple, doc2.html, i la fulla d'estil, style2.css, utilitzant els exemples de més amunt en la secció Estructura del document i Flotants.
    2. +
  2. En l'exemple Flotants afegir farciment per separar el text de la vora dret en 0,5 em.
    3. +
+ +
+
Reptes
+ +

Modifiqueu el document d'exemple, doc2.html, afegint aquesta etiqueta prop del final, just abans de </body>.

+ +
<img id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin">
+
+ +

Si no heu descarregat l'arxiu d'imatge al principi d'aquest tutorial, descarregar-ho ara, i ho col·loqueu en el mateix directori que els altres arxius d'exemple:

+ + + + + + + +
Image:Yellow-pin.png
+ +

Predir on la imatge apareixerà en el document. A continuació, actualitzeu el navegador per veure si és correcte.

+ +

Afegiu una regla a la fulla d'estil que col·loqui la imatge a la part superior dreta del document.

+ +

Actualitzeu el navegador i fer la finestra petita. Comproveu que la imatge es queda a la part superior dreta, fins i tot quan es desplaça el document

+ +
+
+

(A) The oceans

+ +
+
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+
+ +

(B) Numbered paragraphs

+ +
+

1: Lorem ipsum

+ +

2: Dolor sit

+ +

3: Amet consectetuer

+ +

4: Magna aliquam

+ +

5: Autem veleum

+
+ +

 

+ +
Yellow map pin
+
+
+
+ +

 Veure la solució per el repte.

+ +

I ara què?

+ +

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Tables", "Taules") }}S'han cobert gairebé tots els temes d'aquest tutorial bàsic de CSS. La pàgina següent descriu selectors més avançats per a regles CSS, i algunes formes específiques en el disseny de taules.

diff --git a/files/ca/conflicting/learn/css/first_steps/how_css_is_structured/index.html b/files/ca/conflicting/learn/css/first_steps/how_css_is_structured/index.html new file mode 100644 index 0000000000..15b376dad0 --- /dev/null +++ b/files/ca/conflicting/learn/css/first_steps/how_css_is_structured/index.html @@ -0,0 +1,174 @@ +--- +title: CSS llegible +slug: Web/Guide/CSS/Inici_en_CSS/CSS_llegible +tags: + - CSS + - 'CSS:Getting_Started' + - Guide + - Intermediate + - NeedsBeginnerUpdate + - NeedsLiveSample + - Web +translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable +translation_of_original: Web/Guide/CSS/Getting_started/Readable_CSS +--- +

{{ CSSTutorialTOC() }}

+ +

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors", "Selectors")}}Aquesta és la 6th secció del tutorial CSS Getting Started; s'analitza l'estil i la gramàtica del propi llenguatge CSS. Es canvia la forma en què  es veu el vostre arxiu CSS d'exemple, perquè sigui més llegible.

+ +

Informació: CSS Llegible

+ +

Podeu afegir espais en blanc i comentaris en les fulles d'estil perquè siguin més llegibles. També es poden agrupar selectors, quan les mateixes regles d'estil s'apliquen als elements seleccionats de diferents maneres.

+ +

Espai en blanc

+ +

L'espai en blanc vol dir espais reals, tabuladors i noves línies. Podeu afegir espais en blanc per fer les fulles d'estil més llegible.

+ +

En el context del disseny de la pàgina i composició, l'espai en blanc és la part de la pàgina que es deixa sense marcar: marges, separacions, i l'espai entre columnes i línies de text.

+ +

El arxiu CSS d'exemple actualment té una regla per línia, i gairebé el mínim d'espai en blanc. En un full d'estil complex aquesta disposició seria difícil de llegir, de manera que difilcutaria el seu manteniment.

+ +

El disseny escullit sol ser una preferència personal, però si els fulls d'estil són part de projectes compartits, aquests projectes podrian tenir les seves pròpies convencions.

+ +
+
Exemples
+ +

Hi ha qui els agrada el disseny compacte que hem estat utilitzant, i només divideixen una línia quan es fa molt llarga:

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

Hi ha qui prefereix una propietat-valor per línia:

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

Hi ha qui utilitza la sagnia de dos espais, quatre espais, o una tabulació són comuns:

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

Hi ha qui els agrada que tot estigui alienat verticalment (però un disseny com aquest és difícil de mantenir):

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

Hi ha qui fa servir espais en blanc mixtes per millorar la lectura.

+ +
.vegetable         { color: green; min-height:  5px; min-width:  5px }
+.vegetable.carrot  { color: orange;    height: 90px;     width: 10px }
+.vegetable.spinach { color: darkgreen; height: 30px;     width: 30px }
+
+
+ +

Hi ha qui utilitza tabulacions per al disseny. Hi ha qui només utilitza espais.

+ +

Comentaris

+ +

Els comentaris en CSS comencen amb /* i acaban amb */.

+ +

Podeu utilitzar els comentaris per fer comentaris reals en el full d'estil, i també per comentar parts d'ell temporalment per a propòsits de prova.

+ +

Per comentar part d'un full d'estil, col·locar aquesta part en un comentari perquè el navegador ho ignori. Aneu amb compte on s'inicia i acaba el comentari. La resta del full d'estil ha de tenir una sintaxi correcta.

+ +
+
Exemple
+ +
/* style for initial letter C in first paragraph */
+.carrot {
+  color:            orange;
+  text-decoration:  underline;
+  font-style:       italic;
+  }
+
+
+ +

Selectors agrupats

+ +

Quan molts elements tenen el mateix estil, podeu especificar un grup de selectors, separant-los per comes. La declaració és vàlida per a tots els elements seleccionats.

+ +

En una altra part del full d'estils es poden especificar els mateixos selectors de nou de forma individual, per aplicar les regles d'estil individuals a ells.

+ +
+
Exemple
+ +

Aquesta regla fa que els elements {{ HTMLElement("h1") }}, {{ HTMLElement("h2") }} i {{ HTMLElement("h3") }} tinguin el mateix color.

+ +

És convenient especificar el color en un sol lloc, en el cas en què hagi de ser canviat.

+ +
/* color for headings */
+h1, h2, h3 {color: navy;}
+
+
+ +

Acció: Afegir comentaris i millorar el disseny

+ +
    +
  1. Editeu l'arxiu CSS, i assegurar-se que té aquestes regles (en qualsevol ordre): + 
    strong {color: red;}
+.carrot {color: orange;}
+.spinach {color: green;}
+#first {font-style: italic;}
+p {color: blue;}
+
    +
    2. +
  2. Feu que sigui més llegible reordenant-ho d'una manera que ho trobeu lògic, i mitjançant l'afegit d'espais en blanc i comentaris de la millor manera que us sembli.
    3. +
  3. Deseu el fitxer i refresqueu la pantalla del navegador, per assegurar-se que els canvis no afectin el funcionament de la fulla d'estil: + + + + + + + + + +
    Cascading Style Sheets
    Cascading Style Sheets
    +
    4. +
+ +
+
Repte
+ +

Comenteu una part de la fulla d'estils, sense canviar res més, perquè la primera lletra del document sigui vermella:

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

(Hi ha més d'una manera de fer això.)

+ +
+
Possible solution
+One way to do this is to put comment delimiters around the rule for .carrot: + +
/*.carrot {
+  color: orange;
+}*/
+Hide solution
+Veure la solució per el repte.
+ +

I ara què?

+ +

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles", "Estil de text") }}En el estil d'exemple s'ha utilitzat el text en cursiva i subratllat. La pàgina següent descriu més formes d'especificar l'aspecte del text en el document.

diff --git a/files/ca/conflicting/learn/css/first_steps/how_css_works/index.html b/files/ca/conflicting/learn/css/first_steps/how_css_works/index.html new file mode 100644 index 0000000000..eb6512b8bb --- /dev/null +++ b/files/ca/conflicting/learn/css/first_steps/how_css_works/index.html @@ -0,0 +1,130 @@ +--- +title: Com funciona el CSS +slug: Web/Guide/CSS/Inici_en_CSS/Com_funciona_el_CSS +tags: + - Beginner + - CSS + - 'CSS:Getting_Started' + - Guide + - NeedsBeginnerUpdate + - NeedsUpdate + - 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", "Per què utilitzar CSS?") }}Aquesta tercera secció del tutorial CSS Getting Started explica com funciona CSS en el navegador i el propòsit del Document Object Model (DOM). També aprendreu com analitzar el document de mostra.

+ +

Informació: Com funciona el CSS

+ +

Quan un navegador mostra un document, s'ha de combinar el contingut del document amb la seva informació d'estil. El document es processa en dues etapes:

+ +
    +
  1. El navegador converteix el llenguatge de marcat i el CSS en el DOM (Document Object Model). El DOM representa el document a la memòria de l'ordinador. Combina el contingut del document amb el seu estil.
    2. +
  2. El navegador mostra el contingut de la DOM.
    3. +
+ +

Un llenguatge de marcat utilitza elements per definir l'estructura del document. Es marca un element mitjançant etiquetes, que són cadenes que comencen amb '<' i acaban amb '>'. La majoria dels elements tenen un parell d'etiquetes, una etiqueta d'inici i una etiqueta final. Per l'etiqueta d'inici, col·locar el nom de l'element entre '<' i '>'. Per l'etiqueta final, col·locar un '/' després que el '<' i abans que el nom de l'element.

+ +

Depenent del llenguatge de marques, alguns elements només tenen una etiqueta d'inici, o una sola etiqueta on el '/' ve després que el nom de l'element. Un element també pot ser un contenidor i incloure altres elements entre la seva etiqueta inicial i final. Recordeu sempre de tancar les etiquetes dins del contenidor.

+ +

Un DOM té una estructura en forma d'arbre. Cada element, atribut i extensió de text, en el llenguatge de marcat, es converteix en un node en l'estructura de l'arbre. Els nodes es defineixen per la seva relació amb altres nodes DOM. Alguns elements són els pares dels nodes fills, i els nodes fills tenen germans.

+ +

La comprensió del DOM ajuda a dissenyar, depurar i mantenir la CSS, pel fet que el DOM és on el CSS i el contingut del document es reuneixen.

+ +
+
Exemple
+ +
 
+En el vostre document d'exemple, l'etiqueta <p> i la seva etiqueta de tancament </p> creen un contenidor: + +
<p>
+  <strong>C</strong>ascading
+  <strong>S</strong>tyle
+  <strong>S</strong>heets
+</p>
+
+ +

Exemple en directe

+ +

{{ EmbedLiveSample('Information.3A_How_CSS_works', '', '', '', 'Web/Guide/CSS/Getting_started/How_CSS_works') }}

+ +

En el DOM, el node corresponent P és un pare. Els seus fills són els nodes STRONG i els nodes de text. Els nodes STRONG són ells mateixos els pares, amb els nodes de text com els seus fills;

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

Acció: Anàlisi d'un DOM

+ +

L'ús de DOM Inspector

+ +

Per analitzar un DOM, es necessita un programari especial. Podeu utilitzar el complement DOM Inspector de Mozilla (DOMi) per analitzar un DOM. Només haureu de instal·lar el complement (veure més detalls a continuació).

+ +
    +
  1. Utilitzeu el navegador Mozilla per obrir el document HTML d'exemple.
    2. +
  2. Des de la barra de menú del navegador, seleccioneu Tools > DOM Inspector, or Tools > Web Development > DOM Inspector. +
    +
    Més detalls
    + +

    Si el navegador Mozilla no té DOMI, podeu instalar-ho des de la web de complements i reiniciar el navegador. A continuació, tornar a aquest tutorial.

    + +

    Si no voleu instal·lar DOMi (o esteu fent servir un navegador que no és Mozilla), poodeu utilitzar Web X-Ray Goggles, tal com es descriu en la següent secció. O bé, podeu ometre aquesta secció i anar directament a la pàgina següent. Saltar-se aquesta secció no interfereix amb la resta del programa d'aprenentatge.

    +
    +
    3. +
  3. En DOMi, s'expandeixi els nodes del document fent clic a les fletxes. +

    Nota: Els espais creats en el arxiu HTML pot causar que DOMi mostri alguns nodes de text buits, que podeu ignorar.

    + +

    Part del resultat podria tenir aquest aspecte, depenent de quins nodes heu expandit:

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

    En seleccionar qualsevol dels nodes, podeu utilitzar el panell de la dreta de DOMi per esbrinar més sobre ell. Per exemple, quan es selecciona un node de text, DOMi mostra el text en el panell de la dreta.

    + +

    Quan se selecciona un node element, DOMi analitza i ofereix una enorme quantitat d'informació en el seu panell de la dreta. La informació d'estil és només part de la informació que proporciona.

    +
    4. +
+ +
+
Repte
+ +

En DOMi, feu clic en un node STRONG.

+ +

Utilitzeu el panell de la dreta de DOMi per esbrinar on el color del node és vermell, i on la seva aparença es fa més destacable que el text 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
+Veure la solució per el repte.
+ +

Utilitzar Web X-Ray Goggles

+ +

Web X-Ray Goggles mostra menys informació que DOM Inspector, però és més fàcil d'instal·lar i utilitzar.

+ +
    +
  1. Anar a la pàgina principal de Web X-Ray Goggles.
    2. +
  2. Arrossegar el enllaç de marcador a la pàgina de la barra d'eines del navegador.
    3. +
  3. Obriu el document HTML d'exemple.
    4. +
  4. Activar Web X-Ray Goggles fent clic al marcador a la barra d'eines.
    5. +
  5. Moure el punter del ratolí per sobre del document, per veure els elements del document.
    6. +
+ +

I ara què?

+ +

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascada & herència") }}Si heu pres el repte, veureu que la informació d'estil de més d'un lloc interacciona per crear l'estil final per a un element. La pàgina següent explica més sobre aquestes interaccions.

diff --git a/files/ca/conflicting/learn/css/first_steps/how_css_works_54b8e7ce45c74338181144ded4fbdccf/index.html b/files/ca/conflicting/learn/css/first_steps/how_css_works_54b8e7ce45c74338181144ded4fbdccf/index.html new file mode 100644 index 0000000000..d3685309c7 --- /dev/null +++ b/files/ca/conflicting/learn/css/first_steps/how_css_works_54b8e7ce45c74338181144ded4fbdccf/index.html @@ -0,0 +1,111 @@ +--- +title: Per què utilitzar CSS? +slug: Web/Guide/CSS/Inici_en_CSS/Per_què_utilitzar_CSS +tags: + - Beginner + - CSS + - 'CSS:Getting_Started' + - Example + - Guide + - NeedsBeginnerUpdate + - Web +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", "Que és CSS?") }}Aquesta segona secció del tutorial CSS Getting Started explica la relació entre la CSS i els documents. En l'exercici aprendreu com afegir un full d'estil CSS en el document d'exemple que vam crear en la primera secció.

+ +

Informació: Per què utilitzar CSS?

+ +

S'utilitza CSS per definir estils en els documents, incloent el disseny, la disposició i les variacions en la imatge per als diferents dispositius i mides de pantalla. Podeu posar el CSS en el <head> d'un document amb un full d'estils incrustat, o adjuntar un arxiu separat que defineix els estils amb un full d'estils extern. Per enllaçar un full d'estils extern al document, se li afegeix simplement un enllaç al full d'estils en el <head> del document.

+ +

Un full d'estil extern té molts avantatges. Mantenir els estils separats del seu contingut HTML:

+ + + +
+
Exemple
+ +

L'ús de CSS, permet emmagatzemar la informació d'estil en arxius comuns que comparteixen totes les pàgines. Per exemple, quan els documents enllaçan amb el mateix full d'estil que defineix el color de les capçaleres h2, es pot aplicar l'estil de les etiquetes de capçalera h2 globalment, canviant un atribut css.

+ +

Quan un usuari visualitza una pàgina web, el navegador de l'usuari carrega la informació d'estil juntament amb el contingut de la pàgina.

+ +

Quan un usuari imprimeix una pàgina web, pot proporcionar informació de diferent estil que fa que la pàgina impresa sigui fàcil de llegir.

+
+ +

Com fer que HTML i CSS treballin junts? En general, s'utilitza HTML per descriure el contingut del document, no el seu estil. CSS s'utilitza per especificar l'estil del document, no el seu contingut. Més endavant en aquest tutorial, veureu algunes excepcions a aquesta disposició.

+ +
+
Més detalls
+ +

Un llenguatge de marcatge com l'HTML també proporciona algunes formes d'establir estil.

+ +
Per exemple, en HTML es pot utilitzar una etiqueta <b> per fer el text en negreta, i establir el color de fons d'una pàgina en la seva etiqueta <body>.
+ +
 
+ +

Quan s'utilitza CSS, normalment s'evita l'ús d'aquestes característiques del llenguatge de marcat, de manera que tota la informació d'estil del document està en un sol lloc.

+
+ +

Acció: Crear un full d'estil

+ +
    +
  1. Creeu un altre arxiu de text en el mateix directori que el document doc1.html que vau crear en la primera secció.
    2. +
  2. Guardeu el document com: style1.css. Aquest fitxer serà el full d'estil.
    3. +
  3. A l'arxiu CSS, copieu i enganxeu aquesta línia, a continuació, deseu el fitxer: + 
    strong {color: red;}
+
    +
    4. +
+ +

Vincular el document al full d'estils

+ +
    +
  1. Per enllaçar el document al full d'estils, editar l'arxiu HTML. Afegiu-hi la línia ressaltada aquí: + + 
    <!DOCTYPE html>
+<html>
+  <head>
+  <meta charset="UTF-8">
+  <title>Sample document</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. Deseu el fitxer i refrescar la pantalla del navegador. El full d'estil fa que les lletres inicials siguin de color vermell, com aixó:
    3. +
+ +

{{ EmbedLiveSample('Action_Creating_a_stylesheet', '', '', '', 'Web/Guide/CSS/Getting_started/Why_use_CSS') }}

+ +

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

+ +
+
Repte
+ +

A més de vermell, CSS permet a alguns altres noms de colors.

+ +

Sense buscar una referència, trobar cinc noms més de colors que treballin en el full d'estil.

+ +
+
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
+Veure la solució per el repte
+ +

I ara què?

+ +

{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_started/How_CSS_works", "Com funciona el CSS.")}}Ara teniu un document de mostra vinculat a un full d'estil separat, ja esteu llestos per aprendre més sobre com el navegador les combina quan es mostra el document.

diff --git a/files/ca/conflicting/learn/css/first_steps/how_css_works_9566880e82eb23b2f47f8821f75e0ab1/index.html b/files/ca/conflicting/learn/css/first_steps/how_css_works_9566880e82eb23b2f47f8821f75e0ab1/index.html new file mode 100644 index 0000000000..28db41fa98 --- /dev/null +++ b/files/ca/conflicting/learn/css/first_steps/how_css_works_9566880e82eb23b2f47f8821f75e0ab1/index.html @@ -0,0 +1,120 @@ +--- +title: Que és CSS? +slug: Web/Guide/CSS/Inici_en_CSS/Que_és_CSS +tags: + - Beginner + - CSS + - 'CSS:Getting_Started' + - Example + - Guide + - NeedsBeginnerUpdate + - Web +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/Web/Guide/CSS/Getting_Started", "Inici en CSS")}} Aquesta primera secció del tutorial CSS Getting Started explica breument les fulles d'estil en cascada (CSS). També es crearà un document senzill per utilitzar en els exercicis CSS en les seccions següents.

+ +

Informació: Que és CSS?

+ +

Fulles d'estil en cascada (CSS) és un llenguatge per especificar com els documents es presenten als usuaris. Aquests documents estan escrits en un llenguatge de marcat com ara HTML.

+ +

Un document és un recull d'informació que s'estructura utilitzant un llenguatge de marcat.

+ +

La presentació d'un document a un usuari vol dir convertir-lo en una format utilitzable per al seu públic. Navegadors, com Firefox, Chrome o Internet Explorer, estan dissenyats per a presentar documents visuals, per exemple, en una pantalla d'ordinador, un projector o una impressora.

+ +
+

Exemples

+ + +
+ +

En aquest tutorial, caixes amb el subtítol, Més detalls, com la de baix, contenen informació opcional i enllaços a més recursos en un concepte o tema tractat en una secció. Llegir-los com els veieu, seguir els enllaços, o ometre aquestes caixes i tornar a llegir-los més tard.

+ +
+
Més detalls
+ +

Un document no és el mateix que un arxiu. Però, es pot desar un document en un arxiu.

+ +

El document que esteu llegint en aquest moment no està emmagatzemat en un arxiu. Quan el navegador demana aquesta pàgina, el servidor consulta una base de dades i genera el document, recollint les parts del document de diferents arxius. No obstant això, aquest tutorial també pot treballar amb documents emmagatzemats en arxius.

+ +

Podeu trobar més informació sobre els documents i llenguatges de marcatge en altres àrees d'aquest lloc web:

+ + + + + + + + + + + + + + + + + + + + +
HTMLper pàgines web
XMLper documents estructurats en general
SVGper gràfics
XULper interfícies d'usuari en Mozilla
+ +

A la Part II d'aquest tutorial podreu veure exemples d'aquests llenguatges de marques.

+
+ +
+
Més detalls
+ +

En la terminologia formal de CSS, el programa que presenta un document a un usuari se anomenat un agent d'usuari (UA). Un navegador és un tipus d'UA. CSS no és només per a navegadors o presentació visual, però en la part I d'aquesta guia, solament es treballarà amb CSS en un navegador.

+ +

Per a les definicions formals de terminologia relatives a la CSS, consulteu Definitions en l'especificació CSS del World Wide Web Consortium (W3C), una comunitat internacional que estableix estàndards oberts per al web.

+
+ +

Acció: Creació d'un document

+ +
    +
  1. Creeu un nou directori en l'ordinador per guardar i organitzar els exercicis del tutorial.
    2. +
  2. Obriu un editor de text i crear un nou arxiu de text. Aquest arxiu contindrà el document per als pròxims exercicis tutorials.
    3. +
  3. Copieu i enganxeu el codi HTML que es mostra a continuació. Deseu el fitxer amb el nom doc1.html + 
    <!DOCTYPE html>
+<html>
+  <head>
+  <meta charset="UTF-8">
+  <title>Sample document</title>
+  </head>
+
+  <body>
+    <p>
+      <strong>C</strong>ascading
+      <strong>S</strong>tyle
+      <strong>S</strong>heets
+    </p>
+  </body>
+</html>
    + +

    {{ LiveSampleLink('Action_Creating_a_document', 'View above Demo') }}

    +
    4. +
  4. Obriu una nova pestanya o una nova finestra, a continuació, obriu el fitxer que acabeu de crear. +

    Hauria de veure el text amb les lletres inicials en negreta, com aquestes:

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

    El que veieu en el navegador pot no ser exactament el mateix a causa de la configuració del navegador i d'aquesta wiki. Algunes diferències en el tipus de lletra, espaiat i colors no són importants.

    +
    5. +
+ +

I ara què?

+ +

{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "Per què utilitzar CSS?")}} El document encara no utilitza CSS. A la següent secció farem servir CSS per l'estil del document.

diff --git a/files/ca/conflicting/learn/css/first_steps/index.html b/files/ca/conflicting/learn/css/first_steps/index.html new file mode 100644 index 0000000000..8de66f308e --- /dev/null +++ b/files/ca/conflicting/learn/css/first_steps/index.html @@ -0,0 +1,56 @@ +--- +title: Inici en CSS +slug: Web/Guide/CSS/Inici_en_CSS +tags: + - Beginner + - CSS + - 'CSS:Getting_Started' + - Guide + - Needs + - NeedsBeginnerUpdate + - NeedsUpdate + - Web +translation_of: Learn/CSS/First_steps +translation_of_original: Web/Guide/CSS/Getting_started +--- +

Aquest tutorial és una introducció a les característiques bàsiques i llenguatge (la sintaxi) per als fulls d'estil en cascada(Cascading Style Sheets) (CSS). S'utilitza CSS per canviar l'aspecte d'un document estructurat, com ara una pàgina web. El tutorial també inclou exemples d'exercicis que podeu provar en el vostre ordinador per veure els efectes de les CSS i les característiques que funcionen en els navegadors moderns.

+ +

El tutorial és per a principiants i per qualsevol persona que desitji revisar els conceptes bàsics de CSS. Si teniu més experiència amb CSS, la pàgina principal de CSS enumera els recursos més avançats.

+ + + +

Que es necessita per començar

+ + + +

Encara que els exercicis poden ajudar-te a aprendre, no és necessari realitzar-los. Simplement podeu llegir el tutorial i mirar les imatges.

+ +

Nota: El tutorial s'explica com funciona CSS amb el color. Serà més fàcil per completar aquestes seccions amb una pantalla a color i visió de color normal.

+ +

Com utilitzar aquest tutorial

+ +

Per utilitzar aquest tutorial, llegiu les pàgines amb cura i de forma seqüencial. Si es salta una pàgina, pot ser difícil d'entendre les pàgines següents en el tutorial.

+ +

Part I: Els fonaments del CSS

+ +

A cada pàgina, utilitzeu la secció d'informació per entendre com funciona CSS. Utilitzeu la secció Acció per probar l'ús de CSS en el vostre ordinador.

+ +

Per posar a prova la vostre comprensió, prendre el repte al final de cada pàgina. Les solucions als reptes estan vinculats en virtut dels reptes, pel que no és necessari mirar-los si no ho desitjeu.

+ +

Per comprendre CSS amb més profunditat, llegiu la informació que es troba en les caselles de subtítols Més detalls. Utilitzeu els enllaços que hi ha per trobar informació de referència sobre CSS

+ +

Part II: L'Abast del CSS

+ +

Una segona part del programa d'aprenentatge proporciona exemples, que mostren l'abast de CSS amb altres tecnologies web i Mozilla.

+ +
    +
  1. JavaScript
    2. +
  2. SVG graphics
    3. +
  3. XML data
    4. +
  4. XBL bindings
    5. +
  5. XUL user interfaces
    6. +
diff --git a/files/ca/conflicting/learn/css/styling_text/fundamentals/index.html b/files/ca/conflicting/learn/css/styling_text/fundamentals/index.html new file mode 100644 index 0000000000..a1a8c9364f --- /dev/null +++ b/files/ca/conflicting/learn/css/styling_text/fundamentals/index.html @@ -0,0 +1,162 @@ +--- +title: Estils de text +slug: Web/Guide/CSS/Inici_en_CSS/Estils_de_text +tags: + - Beginner + - CSS + - CSS Fonts + - 'CSS:Getting_Started' + - Guide + - NeedsBeginnerUpdate + - NeedsLiveSample + - NeedsUpdate + - Web +translation_of: Learn/CSS/Styling_text/Fundamentals +translation_of_original: Web/Guide/CSS/Getting_started/Text_styles +--- +

{{ CSSTutorialTOC() }}

+ +

{{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS", "CSS llegible")}} Aquesta és la 7th secció del tutorial CSS Getting Started; es donen més exemples d'estils de text. Modifiqueu la fulla d'estil d'exemple per utilitzar diferents fonts.

+ +

Informació: Estils de text

+ +

CSS té diverses propietats d'estil de text.

+ +

Hi ha una propietat abreujada convenient, {{ cssxref("font") }}, que podeu utilitzar per especificar diversos aspectes alhora, per exemple:

+ + + +
+
Exemple
+ +
p {
+font: italic 75%/125% "Comic Sans MS", cursive;
+}
+
+ +

Aquesta regla estableix diverses propietats de la font, fent tots els paràgrafs en cursiva.

+ +

La mida de la font s'estableix en les tres quartes parts de la mida d'element pare de cada paràgraf, i l'alçada de la línia s'estableix en 125% (una mica més separats del normal).

+ +

El tipus de lletra s'estableix en la Comic Sans MS, però si aquest tipus de lletra no està disponible, el navegador farà ús del seu tipus de lletra cursiva per defecte (escrit a mà).

+ +

La regla té l'efecte secundari de desactivar negreta i small-caps (establint el seu valor a normal).

+
+ +

Tipus de fonts

+ +

No es pot predir que tipus de lletra tindran els lectors del vostre document . Quan especifiqueu tipus de lletra de font, és una bona idea proporcionar una llista d'alternatives en ordre de preferència.

+ +

Acabar la llista amb un dels tipus de lletra per defecte incorporats: serif, sans-serif, cursive, fantasy o monospace.

+ +

Si el tipus de lletra no és compatible amb algunes característiques en el document, el navegador pot substituir per un tipus de lletra diferent. Per exemple, el document pot contenir caràcters especials que el tipus de lletra no admet. Si el navegador pot trobar un altre tipus de lletra que té aquests caràcters, llavors farà servir un altre tipus de lletra.

+ +

Per especificar un tipus de lletra, utilitzar la propietat {{ cssxref("font-family") }}.

+ +

Les mides de la font

+ +

Els usuaris del navegador poden anul·lar les mides de font per defecte o canviar la mida de text mentre llegeixen una pàgina, pel que té sentit el que utilitzeu mides relatives on es pugui.

+ +

Podeu utilitzar alguns valors incorporats per mides de font, com small, medium i large. També podeu utilitzar valors relatius a la mida de font de l'element pare com: smaller, larger, 150% o 1.5em. Un "em" és equivalent a l'amplada de la lletra "m" (per la mida de font de l'element pare); per tant 1.5em és una vegada i mitja la mida de la font de l'element pare.

+ +

Si cal, podeu especificar una mida real com: 14px (14 píxels) per a un dispositiu de visualització o 14pt (14 punts) per a una impressora. Això no és accessible per als usuaris amb discapacitat visual, ja que no els permet canviar la mida. Una estratègia més accessible és establir un valor incorporat com a mitjà en un element de nivell superior del document i, a continuació establir les mides relatives de tots els seus elements descendents.

+ +

Per especificar una mida de font, utilitzar la propietat {{ cssxref("font-size") }}.

+ +

Alçada de la línia

+ +

L'alçada de la línia especifica l'espaiat entre línies. Si el document té els paràgrafs llargs amb moltes línies, una separació més gran del normal fa que sigui més fàcil de llegir, especialment si la mida de la font és petita.

+ +

Per especificar l'alçada de la línia, utilitzar la propietat {{ cssxref("line-height") }}.

+ +

Decoració

+ +

A part de la propietat {{ cssxref("text-decoration") }} podeu especificar altres estils, com el subratllat(underline) o ratllat(line-through). Podeu configurar-ho a none per eliminar explícitament qualsevol decoració.

+ +

Altres propietats

+ +

Per especificar cursiva, utilitzar {{ cssxref("font-style") }}: italic;
+ Per especificar negreta , utilitzar {{ cssxref("font-weight") }}: bold;
+ Per especificar majúscules petites , utilitzar {{ cssxref("font-variant") }}: small-caps;

+ +

Per desactivar qualsevol d'ells individualment, especificar el valor normal o inherit.

+ +
+
Mé detalls
+ +

Podeu especificar els estils de text d'altres maneres variades.

+ +

Per exemple, algunes de les propietats esmentades aquí tenen altres valors que podeu utilitzar.

+ +

En una fulla d'estil complexa, eviteu l'ús de la propietat de font abreujada, causa efectes secundaris (reposició d'altres propietats individuals).

+ +

Per a més detalls de les propietats que es relacionen amb les fonts, vegeu Fonts en l'especificació CSS. Per a més detalls de decoració del text, vegeu Text.

+ +

Si no voleu dependre dels tipus de lletra instal·lats en els sistemes dels usuaris, podeu utilitzar {{ cssxref("@font-face") }} per especificar una font en línia. No obstant això, requereix que els usuaris tinguin un navegador compatible amb aquesta regla.

+
+ +

Acció: Especificació de les fonts

+ +

Per a un document senzill, es pot establir la font de l'element {{ HTMLElement("body") }} i la resta del document hereta la configuració.

+ +
    +
  1. Editeu l'arxiu CSS.
    2. +
  2. Afegiu la següent regla per canviar el tipus de lletra en tot el document. La part superior de l'arxiu CSS és un lloc lògic per a ell, però té el mateix efecte allà on ho posis: + 
    body {
+font: 16px "Comic Sans MS", cursive;
+}
+
    +
    3. +
  3. Afegiu un comentari explicant la regla, i afegiu espai en blanc per a que coincideixi amb el vostre disseny preferit.
    4. +
  4. Deseu el fitxer i actualitzeu el navegador per veure l'efecte. Si el sistema té Comic Sans MS, o una altra font cursiva que no suporta cursiva, l'explorador tria un tipus de lletra diferent per al text en cursiva en la primera línia:: + + + + + + + + + +
    Cascading Style Sheets
    Cascading Style Sheets
    +
    5. +
  5. Des de la barra de menú del navegador, seleccioneu View > Text Size > Increase (o View > Zoom > Zoom In). Tot i que heu especificat 16 píxels en l'estil, un usuari en llegir el document pot canviar la mida.
    6. +
+ +
+
Repte
+ +

Sense canviar res més, fer que totes les sis lletres inicials sigui dues vegades la mida de la font serif per defecte en el navegador:

+ + + + + + + + + + +
Cascading Style Sheets
Cascading Style Sheets
+ +
+
Possible solution
+ +

Add the following style declaration to the strong rule:

+ +
  font: 200% serif;
+
+If you use separate declarations for font-size and font-family, then the font-style setting on the first paragraph is not overridden. + +

 

+Hide solution
+Veure la solució per el repte.
+ +

I ara què?

+ +

{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Color", "Color")}}El document d'exemple utilitza diversos colors amb nom. En la següent secció s'enumeren els noms dels colors estàndard i s'explica com es poden especificar altres.

diff --git a/files/ca/conflicting/learn/css/styling_text/styling_lists/index.html b/files/ca/conflicting/learn/css/styling_text/styling_lists/index.html new file mode 100644 index 0000000000..a6bd0d31a1 --- /dev/null +++ b/files/ca/conflicting/learn/css/styling_text/styling_lists/index.html @@ -0,0 +1,276 @@ +--- +title: Llistes +slug: Web/Guide/CSS/Inici_en_CSS/Llistes +tags: + - Beginner + - CSS + - 'CSS:Getting_Started' + - Example + - Guide + - Intermediate + - NeedsBeginnerUpdate + - NeedsUpdate + - Web +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", "Contingut") }} Aquesta és la 10th secció del tutorial CSS Getting Started; descriu com es pot utilitzar CSS per especificar l'aspecte de les llistes. Heu de crear un nou document d'exemple que contindrà les llistes, i un nova fulla d'estil que és el estil de les llistes.

+ +

Informació: Llistes

+ +

Si vau aprendre el repte en l'última secció, llavors va veure com es podia afegir contingut abans de qualsevol element perquè aparegués com un element de la llista.

+ +

CSS proporciona propietats especials que estan dissenyades per a les llistes. En general, és convenient utilitzar aquestes propietats sempre que pugueu.

+ +

Per especificar l'estil a una llista, utilitzeu la propietat {{ cssxref("list-style") }} per especificar el tipus de marcador.

+ +

El selector en la seva regla CSS pot seleccionar els elements de la llista d'elements (per exemple, {{ HTMLElement("li") }} ) o es pot seleccionar l'element de la llista dels pares (per exemple, {{ HTMLElement ("ul") }}) de manera que els elements de la llista hereten l'estil.

+ +

Llistes no ordenades

+ +

En una llista no ordenada, cada element de la llista està marcat de la mateixa manera.

+ +

CSS té tres tipus de marcadors, i aquí es veu com el navegador els mostra:

+ + + +

També podeu especificar l'adreça URL d'una imatge.

+ +
+
Exemple
+ +

Aquestes regles especifiquen diferents marcadors per a diferents classes d'elements de la llista:

+ +
li.open {list-style: circle;}
+li.closed {list-style: disc;}
+
+ +

Quan aquestes classes s'utilitzen en una llista, distingeix entre els elements oberts i tancats (per exemple, en una llista de tasques pendents):

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

El resultat és el següent:

+ +

{{ EmbedLiveSample('Unordered_lists', '', '', '') }}

+
+ +

Llistes ordenades

+ +

En una llista ordenada, cada element de la llista es marca de manera diferent per mostrar la seva posició en la seqüència.

+ +

Utilitzeu la propietat {{ cssxref("list-style") }} per especificar el tipus de marcador:

+ + + +
+
Exemple
+ +

Aquesta regla especifica que els elements en {{ HTMLElement ("ol") }}  amb la classe info, els elements s'identifiquen amb lletres majúscules.

+ +
<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;}
+
+ +

El elements {{ HTMLElement ("li") }} en la llista hereten aquest estil:

+ +

{{ EmbedLiveSample('Ordered_lists', '', '', '') }}

+
+ +
+
Més detalls
+ +

La propietat {{ cssxref ("list-style") }} és una propietat abreujada. En les fulles d'estil complexes és possible que preferiu utilitzar les propietats independents per establir els valors per separat. Per als enllaços a aquestes propietats separades, i més detalls de com CSS especifica les llistes, consulteu la pàgina de referència {{ cssxref ("list-style") }}.

+ +

Si utilitzeu un llenguatge de marques com l'HTML que proporciona marques convencionals per llistes no ordenades ({{ HTMLElement("ul") }}) i llistes ordenades ({{ HTMLElement("ol") }}), llavors és una bona pràctica utilitzar les etiquetes en la forma en què estan destinades. No obstant això, podeu utilitzar CSS per fer que {{ HTMLElement("ul") }} aparegui ordenat i {{ HTMLElement("ol") }} aparegui desordenat si ho desitjeu.

+ +

Els navegadors difereixen en la forma d'aplicar els estils de llistes. No espereu que la vostre fulla d'estil doni resultats idèntics en tots els navegadors.

+
+ +

Comptadors

+ +
+

Note:  Alguns navegadors no suporten comptadors. La pàgina continguts CSS i compatibilitat del navegador en el lloc Quirks Mode conté un gràfic detallat de la compatibilitat dels navegadors per això i altres característiques CSS. Pàgines individuals en la Referència CSS d'aquest lloc, també tenen taules de compatibilitat del navegador.

+
+ +

Podeu utilitzar comptadors per enumerar els elements, no només els elements de la llista. Per exemple, en alguns documents és possible que vulgueu numerar les capçaleres o paràgrafs.

+ +

Per especificar la numeració, es necessita un comptador amb un nom que definiu.

+ +

En algun element abans que el recompte s'iniciï, reinicieu el comptador amb la propietat {{ cssxref("counter-reset") }} i el nom del seu comptador. El pare dels elements que està comptant és un bon lloc per fer-ho, però podeu utilitzar qualsevol element que vingui abans que els elements de la llista.

+ +

Per cada element en el qual s'incrementa el comptador, utilitzeu la propietat {{ cssxref("counter-increment") }} i el nom del seu comptador.

+ +

Per mostrar el comptador, afegiu {{ cssxref("::before") }} o {{ cssxref("::after") }} per al selector i l'ús de la propietat content (com ho va fer en la pàgina anterior, Content).

+ +

En el valor de la propietat content, especifiqueu counter() amb el nom del vostre comptador. També podeu indicar un tipus. Els tipus són els mateixos que en la secció anterior de llistes ordenades.

+ +

Normalment, l'element que mostra el comptador també l'incrementa.

+ +
+
Exemple
+ +

Aquesta regla inicialitza un comptador per a cada element {{ HTMLElement("h3") }} amb la classe numbered:

+ +
h3.numbered {counter-reset: mynum;}
+
+ +

Aquesta regla mostra i incrementa el comptador per a cada element {{ HTMLELement("p") }} amb la classe numbered:

+ +
<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;
+}
+
+ +

El resultat és el següent:

+ +

{{ EmbedLiveSample("Counters", '300', '200', '') }}

+
+ +
+
Més detalls
+ +

No podeu utilitzar comptadors a menys que sàpigueu que tot el que llegeixi el document té un navegador compatible amb ells.

+ +

Si sou capaços d'utilitzar els comptadors, tenen l'avantatge que podeu donar estil els comptadors per separat dels elements de la llista. En l'exemple anterior, els comptadors estan en negreta, però els elements de la llista no ho estan.

+ +

També podeu utilitzar els comptadors en formes més complexes, per exemple, al nombre de seccions, títols, subtítols i paràgrafs en els documents formals. Per a més detalls, consulteu Comptadors i numeració automàtica en l'especificació CSS.

+
+ +

Acció: Llistes amb estil

+ +

Feu un nou document HTML, doc2.html. Copieu i enganxeu el contingut d'aquí:

+ +
<!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>
+
+ +

Feu un nova fulla d'estil, style2.css. Copieu i enganxeu el contingut d'aquí:

+ +
/* numbered paragraphs */
+h3.numbered {counter-reset: mynum;}
+
+p.numbered:before {
+  content: counter(mynum) ": ";
+  counter-increment: mynum;
+  font-weight: bold;
+}
+
+ +

Si la disposició i el comentari no són del vostre gust, canvieu-los.

+ +

Obriu el document en el navegador. Si el navegador és compatible amb els comptadors, es veurà alguna cosa semblant com l'exemple a continuació. Si el vostre navegador no suporta comptadors, llavors no veureu els números (i probablement ni tan sols els dos punts):

+ +

{{ EmbedLiveSample('Action_Styled_lists', '300', '400', '') }}

+ +
+
Reptes
+ +

Afegiu una regla a la fulla d'estil, per numerar els oceans utilitzant nombres romans de l'I al V:

+ + + + + + + +
+

The oceans

+ +
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+
+ +

 

+ +

Canvieu la fulla d'estil per identificar les capçaleres amb lletres majúscules i en parèntesi com aquest:

+ + + + + + + +
+

(A) The oceans

+ +

. . .

+ +

(B) Numbered paragraphs

+ +

. . .

+
+
+ +

Veure la solució per el repte.

+ +

I ara què?

+ +

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Boxes", "Caixes") }}Quan el navegador mostra el document d'exemple, es crea un espai al voltant dels elements quan els col·loca a la pàgina. La pàgina següent descriu com podeu utilitzar CSS per treballar amb les formes subjacents d'elements, caixes.

diff --git a/files/ca/conflicting/web/guide/index.html b/files/ca/conflicting/web/guide/index.html new file mode 100644 index 0000000000..ba6fb934f0 --- /dev/null +++ b/files/ca/conflicting/web/guide/index.html @@ -0,0 +1,101 @@ +--- +title: Desenvolupament web +slug: Web_Development +tags: + - NeedsTranslation + - TopicStub + - Web Development +translation_of: Web/Guide +translation_of_original: Web_Development +--- +

El desenvolupament web comprèn tots els aspectes de construir un portal o aplicació web.

+

Aprèn a crear qualsevol cosa des d'una simple web fins a una web complexa i altament interactiva emprant les darreres tecnologies web  fullejant els articles que et mostrem aquí.

+ + + + + + + +
+

DOCUMENTACIÓ

+

Tecnologies

+
+
+ Introducció al desenvolupament web
+
+ Una guia de com desenvolupar webs.
+
+ HTML
+
+ L' HyperText Markup Language (en català, Llenguatge de Marcació de Hipertext) és el llenguatge basic per a la creació de webs i d'altres documents mostrats en un navegador.
+
+ CSS
+
+ Els Cascading Style Sheets (en català, Fulls d'estils en cascada) fan possible construir sofisticats layouts per a les planes web.
+
+ [NT: layouts podria traduir-se per estructura o disposició dels elements, però donada la generalitzada acceptació del terme en anglés he optat per no adaptar-lo al català]
+
+ JavaScript
+
+ JavaScript és el llenguatge de programació (scripting) més comú per programar aplicacions web en el costat del navegador. A més, és emprat en el desenvolupament del software de Mozilla.
+
+ DOM
+
+ De l'anglès Document Object Model (en català, Model de l'Objecte Document) és una API per a documents HTML i XML, que proporciona una representació de l'estructura del document i els seus elements que hom pot modificar per a alterar la visualització del mateix.
+
+ AJAX
+
+ De l'anglès Asynchronous JavaScript and XML (Javascript i XML Asincrònic) més que una tecnologia és una combinació de tecnologies, usant Javascript i d'altres tecnologies del costat del navegador per comunicar-se amb el servidor sense recarregar la plana sencera, lo qual permet crear aplicacions dinàmiques de qualitat.
+
+ XHTML
+
+ De l'anglès Extensible HyperText Markup Language (Llenguatge de marcació hipertext extensible) és un llenguatge de marcatge com el HTML però que respecte les regles formals del XML que ofereix una sintaxi més estricta però més robusta i potent que l'HTML.
+
+ SVG
+
+ De l'anglès Scalable Vector Graphics (gràfics de vectors escalables) és un llenguatge de marcatge XML per dibuizar gràfics vectorials 2D.
+
+

Estratègies

+
+
+ Estàndars web
+
+ Aprèn com fer que la teva web o aplicació pugui ser emprada pel màxim nombre possible d'usuaris gràcies a fer-la compatible amb la web oberta (open web).
+
+ Disseny web sensible
+
+ Juga amb el CSS per a presentar el mateix contingut a qualsevol plataforma, des de telèfons mòbils fins a pantalles amples de màquines d'escriptori d'alta resolució.
+
+ Construir webs compatibles amb equips vells i moderns
+
+ Les millors pràctiques per a crear webs que no es trenquen quan s'actualitzen els navegadors dels usuaris.
+
+ Construir webs pel mòbil
+
+ Desenvolupar webs per ser vistes en dispositius mòbils requereix prendre certes mesures úniques a les que potser no estàn avessats els desenvolupadors habituals de webs per a navegadors d'ordinadors d'escriptori.
+
+ Preguntes freqüents del desenvolupador web respostes, per Mozilla
+
+ Llegeix les respostes de Mozilla a les preguntes més freqüents dels desenvolupadors web.
+
+

Veure-ho tot...

+ 		+

COMUNITAT

+ +

EINES

+ +

Veure-ho tot...

+
+

 

diff --git a/files/ca/conflicting/web/javascript/reference/global_objects/boolean/index.html b/files/ca/conflicting/web/javascript/reference/global_objects/boolean/index.html new file mode 100644 index 0000000000..e0845eb102 --- /dev/null +++ b/files/ca/conflicting/web/javascript/reference/global_objects/boolean/index.html @@ -0,0 +1,118 @@ +--- +title: Boolean.prototype +slug: Web/JavaScript/Referencia/Objectes_globals/Boolean/prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Boolean +translation_of_original: Web/JavaScript/Reference/Global_Objects/Boolean/prototype +--- +
{{JSRef("Global_Objects", "Boolean")}}
+ +

Resum

+ +

La propietat Boolean.prototype representa el prototipus pel constructor {{jsxref("Global_Objects/Boolean", "Boolean")}}.

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

Descripció

+ +

Les instàncies de {{jsxref("Global_Objects/Boolean", "Boolean")}} hereten de Boolean.prototype. Es pot emprar l'objecte prototipus del constructor per a afegir noves propietats o mètodes a totes les instàncies de {{jsxref("Global_Objects/Boolean", "Boolean")}}.

+ +

Propietats

+ +
+
Boolean.prototype.constructor
+
Retorna la funció que ha creat la instància del prototipus. Aquesta funció és {{jsxref("Global_Objects/Boolean", "Boolean")}} per defecte.
+
+ +
{{jsOverrides("Object", "properties", "constructor")}}
+ +

Mètodes

+ +
+
{{jsxref("Boolean.prototype.toSource()")}} {{non-standard_inline}}
+
Retorna una cadena de caràcters que conté el codi fond de l'objecte {{jsxref("Global_Objects/Boolean", "Boolean")}}; aquesta pot utilitzar-se per a crear un objecte equivalent. Sobreescriu el mètode {{jsxref("Object.prototype.toSource()")}}.
+
{{jsxref("Boolean.prototype.toString()")}}
+
Retorna una cadena de caràcters que valdrà o bé "true" o bé "false", depenent del valor que l'objecte representi. Sobreescriu el mètode {{jsxref("Object.prototype.toString()")}}.
+
{{jsxref("Boolean.prototype.valueOf()")}}
+
Retorna el valor primitiu de l'objecte {{jsxref("Global_Objects/Boolean", "Boolean")}}. Sobreescriu el mètode {{jsxref("Object.prototype.valueOf()")}}.
+
+ +
{{jsOverrides("Object", "methods", "toSource", "toString", "valueOf")}}
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a 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')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
diff --git a/files/ca/conflicting/web/javascript/reference/global_objects/dataview/index.html b/files/ca/conflicting/web/javascript/reference/global_objects/dataview/index.html new file mode 100644 index 0000000000..ebd6cbe729 --- /dev/null +++ b/files/ca/conflicting/web/javascript/reference/global_objects/dataview/index.html @@ -0,0 +1,147 @@ +--- +title: DataView.prototype +slug: Web/JavaScript/Reference/Global_Objects/DataView/prototype +translation_of: Web/JavaScript/Reference/Global_Objects/DataView +translation_of_original: Web/JavaScript/Reference/Global_Objects/DataView/prototype +--- +
{{JSRef}}
+ +

La propietat DataView.prototype representa el prototip de l'objecte {{jsxref("DataView")}}.

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

Descripció

+ +

Les instàncies DataView hereten de DataView.prototype. Com passa amb tots els constructors, podeu canviar l'objecte prototip del constructor per produir canvis a totes les instàncies DataView.

+ +

Propietats

+ +
+
DataView.prototype.constructor
+
Especifica la funció que crea un prototip de l'objecte. El valor inicial és el constructor integrat estàndard DataView.
+
{{jsxref("DataView.prototype.buffer")}} {{readonlyInline}}
+
L'{{jsxref("ArrayBuffer")}} referenciat per aquesta vista. Fixat en el temps de construcció i per tant és només de lectura.
+
{{jsxref("DataView.prototype.byteLength")}} {{readonlyInline}}
+
La llargària (en bytes) d'aquesta vista des del començament del seu {{jsxref("ArrayBuffer")}}. Fixat en el temps de construcció i per tant és només de lectura.
+
{{jsxref("DataView.prototype.byteOffset")}} {{readonlyInline}}
+
La posició (en bytes) d'aquesta vista des de l'inici del seu {{jsxref("ArrayBuffer")}}. Fixat en el temps de construcció i per tant és només de lectura.
+
+ +

Mètodes

+ +

Lectura

+ +
+
{{jsxref("DataView.prototype.getInt8()")}}
+
Obté un nombre sencer (byte) de 8 bits amb signe al byte de posició especificat des de l'inici de la vista.
+
{{jsxref("DataView.prototype.getUint8()")}}
+
Obté un nombre sencer sense signe de 8 bits (unsigned byte) al byte de posició especificat des de l'inici de la vista.
+
{{jsxref("DataView.prototype.getInt16()")}}
+
Obté un nombre sencer de 16 bits (short) al byte de posició especificat des de l'inici de la vista.
+
{{jsxref("DataView.prototype.getUint16()")}}
+
Obté un nombre sencer sense signe de 16 bits (unsigned short) al byte de posició especificat des de l'inici de la vista.
+
{{jsxref("DataView.prototype.getInt32()")}}
+
Obté un nombre sencer de 32 bits (long) al byte de posició especificat des de l'inici de la vista.
+
{{jsxref("DataView.prototype.getUint32()")}}
+
Obté un nombre sencer sense signe de 31 bits (unsigned long) al byte de posició especificat des de l'inici de la vista.
+
{{jsxref("DataView.prototype.getFloat32()")}}
+
Obté un nombre en coma flotant amb signe de 32 bits (float) al byte de posició especificat des de l'inici de la vista.
+
{{jsxref("DataView.prototype.getFloat64()")}}
+
Obté un nombre en coma flotant amb signe de 64 bits (double) al byte de posició especificat des de l'inici de la vista.
+
+ +

Escritura

+ +
+
{{jsxref("DataView.prototype.setInt8()")}}
+
Emmagatzema el valor d'un nombre sencer de 8 bits (byte) al byte de posició especificat des de l'inici de la vista.
+
{{jsxref("DataView.prototype.setUint8()")}}
+
Emmagatzema el valor d'un nombre sencer sense signe de 8 bits (unsigned byte) al byte de posició especificat des de l'inici de la vista.
+
{{jsxref("DataView.prototype.setInt16()")}}
+
Emmagatzema el valor d'un nombre sencer amb signe de 16 bits (short) al byte de posició especificat des de l'inici de la vista.
+
{{jsxref("DataView.prototype.setUint16()")}}
+
Emmagatzema el valor d'un nombre sencer sense signe de 16 bits (unsigned short) al byte de posició especificat des de l'inici de la vista.
+
{{jsxref("DataView.prototype.setInt32()")}}
+
Emmagatzema el valor d'un nombre sencer amb signe de 32 bits (long) al byte de posició especificat des de l'inici de la vista.
+
{{jsxref("DataView.prototype.setUint32()")}}
+
Emmagatzema el valor d'un nombre sencer sense signe de 32 bits  (unsigned long) al byte de posició especificat des de l'inici de la vista.
+
{{jsxref("DataView.prototype.setFloat32()")}}
+
Emmagatzema el valor d'un nombre en coma flotant amb signe de 32 bits (float) al byte de posició especificat des de l'inici de la vista.
+
{{jsxref("DataView.prototype.setFloat64()")}}
+
Emmagatzema el valor d'un nombre en coma flotant amb signe de 64 bits (double) al byte de posició especificat des de l'inici de la vista.
+
+ +

Especificacions

+ + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-dataview.prototype', 'DataView.prototype')}}{{Spec2('ES6')}}Definició inicial.
+ +

Compatibilitat amb navegador

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic9.0{{ CompatGeckoDesktop("15.0") }}1012.15.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic4.0{{CompatVersionUnknown}}{{CompatGeckoMobile("15")}}{{CompatUnknown}}12.04.2
+
+ +

Vegeu també

+ + diff --git a/files/ca/conflicting/web/javascript/reference/global_objects/date/index.html b/files/ca/conflicting/web/javascript/reference/global_objects/date/index.html new file mode 100644 index 0000000000..91e2dff38f --- /dev/null +++ b/files/ca/conflicting/web/javascript/reference/global_objects/date/index.html @@ -0,0 +1,222 @@ +--- +title: Date.prototype +slug: Web/JavaScript/Referencia/Objectes_globals/Date/prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Date +translation_of_original: Web/JavaScript/Reference/Global_Objects/Date/prototype +--- +
{{JSRef("Global_Objects", "Date")}}
+ +

Resum

+ +

La propietat Date.prototype representa el prototipus per al constructor {{jsxref("Global_Objects/Date", "Date")}}.

+ +
{{js_property_attributes(0, 0, 1)}}
+ +

Descripció

+ +

Les instàncies de JavaScript de {{jsxref("Global_Objects/Date", "Date")}} hereten de Date.prototype. L'objecte prototipus del constructor pot modificar-se per a afectar a les propietats i mètodes heretats per les instàncies de {{jsxref("Global_Objects/Date", "Date")}}.

+ +

Per a compatibilitat amb càlculs amb milenis (en altres paraules, per a tindre en compte l'any 2000), sempre s'hauria d'especificar l'any sencer, per exemple, 1998, en comptes de 98. Per a ajudar a proveïr l'any sencer JavaScript inclou els mètodes {{jsxref("Date.prototype.getFullYear()", "getFullYear()")}}, {{jsxref("Date.prototype.setFullYear()", "setFullYear()")}}, {{jsxref("Date.prototype.getUTCFullYear()", "getUTCFullYear()")}} i {{jsxref("Date.prototype.setUTCFullYear()", "setUTCFullYear()")}}.

+ +

Propietats

+ +
+
Date.prototype.constructor
+
Retorna la funció que va crear la instància. És a dir, per defecte el constructor {{jsxref("Global_Objects/Date", "Date")}}.
+
+ +
{{jsOverrides("Object", "properties", "constructor")}}
+ +

Mètodes

+ +

Getter

+ +
+
{{jsxref("Date.prototype.getDate()")}}
+
Retorna el dia del mes (1-31) per a la data especificada, en temps local.
+
{{jsxref("Date.prototype.getDay()")}}
+
Retorna el dia de la setmana (0-6) per a la data especificada, en temps local.
+
{{jsxref("Date.prototype.getFullYear()")}}
+
Retorna l'any (4 digits per a anys de 4 digits) per a la data especificada, en temps local.
+
{{jsxref("Date.prototype.getHours()")}}
+
Retorna l'hora (0-23) per a la data especificada, en temps local.
+
{{jsxref("Date.prototype.getMilliseconds()")}}
+
Retorna els milisegons (0-999) per a la data especificada, en temps local.
+
{{jsxref("Date.prototype.getMinutes()")}}
+
Retorna els minuts (0-59) per a la data especificada, en temps local.
+
{{jsxref("Date.prototype.getMonth()")}}
+
Retorna el mes (0-11) per a la data especificada, en temps local.
+
{{jsxref("Date.prototype.getSeconds()")}}
+
Retorna els segons (0-59) per a la data especificada, en temps local.
+
{{jsxref("Date.prototype.getTime()")}}
+
Retorna un valor numèric per a la data especificada que representa la data especificada com al nombre de milisegons que han passat des de l'1 de gener de 1970, 00:00:00 UTC (negatiu per a dates anteriors).
+
{{jsxref("Date.prototype.getTimezoneOffset()")}}
+
Retorna la diferència d'ús horari en minuts del temps local.
+
{{jsxref("Date.prototype.getUTCDate()")}}
+
Retorna el dia del mes (1-31) per a la data especificada en temps universal (UTC).
+
{{jsxref("Date.prototype.getUTCDay()")}}
+
Retorna el dia de la setmana (0-6) per a la data especificada en temps universal (UTC).
+
{{jsxref("Date.prototype.getUTCFullYear()")}}
+
Retorna l'any (4 digits per a anys de 4 digits) per a la data especificada en temps universal (UTC).
+
{{jsxref("Date.prototype.getUTCHours()")}}
+
Retorna l'hora (0-23) per a la data especificada en temps universal (UTC).
+
{{jsxref("Date.prototype.getUTCMilliseconds()")}}
+
Retorna els milisegons (0-999) per a la data especificada en temps universal (UTC).
+
{{jsxref("Date.prototype.getUTCMinutes()")}}
+
Retorna els minuts (0-59) per a la data especificada en temps universal (UTC).
+
{{jsxref("Date.prototype.getUTCMonth()")}}
+
Retorna el mes (0-11) per a la data especificada en temps universal (UTC).
+
{{jsxref("Date.prototype.getUTCSeconds()")}}
+
Retorna els segons (0-59) per a la data especificada en temps universal (UTC).
+
{{jsxref("Date.prototype.getYear()")}} {{deprecated_inline}}
+
Retorna l'any (normalment 2-3 digits) per a la data especificada, en temps local. En comptes d'aquest mètode, utilitzeu  {{jsxref("Date.prototype.getFullYear()", "getFullYear()")}}.
+
+ +

Setter

+ +
+
{{jsxref("Date.prototype.setDate()")}}
+
Assigna el dia del mes per a la data especificada, en temps local.
+
{{jsxref("Date.prototype.setFullYear()")}}
+
Assigna l'any sencer (és a dir, de 4 digits per a un any amb 4 digits) per a la data especificada, en temps local.
+
{{jsxref("Date.prototype.setHours()")}}
+
Assigna l'hora per a la data especificada, en temps local.
+
{{jsxref("Date.prototype.setMilliseconds()")}}
+
Assigna els milisegons per a la data especificada, en temps local.
+
{{jsxref("Date.prototype.setMinutes()")}}
+
Assigna els minuts per a la data especificada, en temps local.
+
{{jsxref("Date.prototype.setMonth()")}}
+
Assigna el mes per a la data especificada, en temps local.
+
{{jsxref("Date.prototype.setSeconds()")}}
+
Assigna els segons per a la data especificada, en temps local.
+
{{jsxref("Date.prototype.setTime()")}}
+
Assigna la data que representarà la instància de l'objecte {{jsxref("Global_Objects/Date", "Date")}} al temps representat pel nombre de milisegons passats des de l'1 de gener de 1970, 00:00:00 UTC. Permet nombres negatius per a temps anteriors a aquesta data.
+
{{jsxref("Date.prototype.setUTCDate()")}}
+
Assigna el dia del mes per a la data especificada en temps universal (UTC).
+
{{jsxref("Date.prototype.setUTCFullYear()")}}
+
Assigna l'any sencer (és a dir, 4 digits per a anys de 4 digits) per a la data especificada en temps universal (UTC).
+
{{jsxref("Date.prototype.setUTCHours()")}}
+
Assigna l'hora per a la data especificada en temps universal (UTC).
+
{{jsxref("Date.prototype.setUTCMilliseconds()")}}
+
Assigna els milisegons per a la data especificada en temps universal (UTC).
+
{{jsxref("Date.prototype.setUTCMinutes()")}}
+
Assigna els minuts per a la data especificada en temps universal (UTC).
+
{{jsxref("Date.prototype.setUTCMonth()")}}
+
Assigna el mes per a la data especificada en temps universal (UTC).
+
{{jsxref("Date.prototype.setUTCSeconds()")}}
+
Assigna els segons per a la data especificada en temps universal (UTC).
+
{{jsxref("Date.prototype.setYear()")}} {{deprecated_inline}}
+
Assigna l'any (normalment 2-3 digits) per a la data especificada en temps local. Utilitzeu {{jsxref("Date.prototype.setFullYear()", "setFullYear()")}} en comptes d'aquest mètode.
+
+ +

Getters amb conversió

+ +
+
{{jsxref("Date.prototype.toDateString()")}}
+
Retorna la part part de data de {{jsxref("Global_Objects/Date", "Date")}} com a string inteligible per humans.
+
{{jsxref("Date.prototype.toISOString()")}}
+
Converteix una data a un string seguint el Format Extés del ISO 8601.
+
{{jsxref("Date.prototype.toJSON()")}}
+
Retorna un string que representa l'objecte {{jsxref("Global_Objects/Date", "Date")}} utilitzant  {{jsxref("Date.prototype.toISOString()", "toISOString()")}}. Ideat per a ser usat per {{jsxref("JSON.stringify()")}}.
+
{{jsxref("Date.prototype.toGMTString()")}} {{deprecated_inline}}
+
Retorna un string que representa l'objecte {{jsxref("Global_Objects/Date", "Date")}} basat en la zona horària GMT (UT). Utilitzeu {{jsxref("Date.prototype.toUTCString()", "toUTCString()")}} en comptes d'aquest mètode.
+
{{jsxref("Date.prototype.toLocaleDateString()")}}
+
Retorna un string que representa la part de la data amb temps local, basat en la configuració del sistema.
+
{{jsxref("Date.prototype.toLocaleFormat()")}} {{non-standard_inline}}
+
Converteix una data a string tot utilitzant un format string.
+
{{jsxref("Date.prototype.toLocaleString()")}}
+
Retorna un string que representa la data tenint en compte el temps local. Sobreescriu el mètode {{jsxref("Object.prototype.toLocaleString()")}}.
+
{{jsxref("Date.prototype.toLocaleTimeString()")}}
+
Retorna un string que representa la part de temps de la data local basada en la configuració del sistema.
+
{{jsxref("Date.prototype.toSource()")}} {{non-standard_inline}}
+
Retorna un string que representa el codi font per a un objecte {{jsxref("Global_Objects/Date", "Date")}} equivalent; aquest valor pot emprar-se per a crear un nou objecte. Sobreescriu el mètode {{jsxref("Object.prototype.toSource()")}}.
+
{{jsxref("Date.prototype.toString()")}}
+
Retorna un string que representa l'objecte {{jsxref("Global_Objects/Date", "Date")}} especificat. Sobreescriu el mètode {{jsxref("Object.prototype.toString()")}}.
+
{{jsxref("Date.prototype.toTimeString()")}}
+
Retorna la part de temps de l'objecte {{jsxref("Global_Objects/Date", "Date")}} com a string comprensible per humans.
+
{{jsxref("Date.prototype.toUTCString()")}}
+
Converteix una data a un string utilitzant la zona horària UTC.
+
{{jsxref("Date.prototype.valueOf()")}}
+
Retorna el valor primitiu d'un objecte {{jsxref("Global_Objects/Date", "Date")}}. Sobreescriu el mètode {{jsxref("Object.prototype.valueOf()")}}.
+
+ +
{{jsOverrides("Object", "methods", "getDate", "getDay", "getFullYear", "getHours", "getMilliseconds", "getMinutes", "getMonth", "getSeconds", "getTime", "getTimezoneOffset", "getUTCDate", "getUTCDay", "getUTCFullYear", "getUTCHours", "getUTCMilliseconds", "getUTCMinutes", "getUTCMonth", "getUTCSeconds", "getYear", "setdate", "setFullYear", "setHours", "setMilliseconds", "setMinutes", "setMontth", "setSeconds", "setTime", "setUTCDate", "setUTCFullYear", "setUTCHours", "setUTCMilliseconds", "setUTCMinutes", "setUTCMonth", "setUTCSeconds", "setYear", "toDateString", "toGMTString", "toLocaleDateString", "toLocaleFormat", "toLocaleString", "toLocaleTimeString", "toSource", "toString", "toTimeString", "toUTCString", "valueOf")}}
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.9.5', 'Date.prototype')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-properties-of-the-date-prototype-object', 'Date.prototype')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
diff --git a/files/ca/conflicting/web/javascript/reference/global_objects/error/index.html b/files/ca/conflicting/web/javascript/reference/global_objects/error/index.html new file mode 100644 index 0000000000..53e22669e9 --- /dev/null +++ b/files/ca/conflicting/web/javascript/reference/global_objects/error/index.html @@ -0,0 +1,151 @@ +--- +title: Error.prototype +slug: Web/JavaScript/Referencia/Objectes_globals/Error/prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Error +translation_of_original: Web/JavaScript/Reference/Global_Objects/Error/prototype +--- +
{{JSRef("Global_Objects", "Error", "EvalError,InternalError,RangeError,ReferenceError,SyntaxError,TypeError,URIError")}}
+ +

Resum

+ +

La propietat Error.prototype representa el prototipus per al constructor {{jsxref("Global_Objects/Error", "Error")}}.

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

Descripció

+ +

Totes les instàncies de {{jsxref("Global_Objects/Error", "Error")}} i les instàncies de {{jsxref("Global_Objects/Error", "non-generic errors", "#Error_types", 1)}} heretèn de Error.prototype. Com totes les funcions constructores, es pot utilitzar el prototipus del constructor per a afegir propietats o mètodes a totes les instànces creades amb aquest constructor.

+ +

Propietats

+ +

Propietats standard

+ +
+
Error.prototype.constructor
+
Especifica la funció que ha creat la instància del prototipus.
+
{{jsxref("Error.prototype.message")}}
+
Missatge d'error.
+
{{jsxref("Error.prototype.name")}}
+
Nom de l'error.
+
+ +

Extensions específiques del venedor

+ +
{{non-standard_header}}
+ +

Microsoft

+ +
+
{{jsxref("Error.prototype.description")}}
+
Descripció de l'error. Similar a {{jsxref("Error.prototype.message", "message")}}.
+
{{jsxref("Error.prototype.number")}}
+
Nombre de l'error.
+
+ +

Mozilla

+ +
+
{{jsxref("Error.prototype.fileName")}}
+
Ruta al fitxer que ha llençat l'error.
+
{{jsxref("Error.prototype.lineNumber")}}
+
Línia del fitxer que ha llençat l'error.
+
{{jsxref("Error.prototype.columnNumber")}}
+
Nombre de columna de la línia que ha llençat l'error.
+
{{jsxref("Error.prototype.stack")}}
+
Conté la traça de l'error.
+
+ +

Mètodes

+ +
+
{{jsxref("Error.prototype.toSource()")}} {{non-standard_inline}}
+
Retorna un string que conté el codi font de l'objecte {{jsxref("Global_Objects/Error", "Error")}} especificat; es pot emprar aquest valor per a crear un objecte nou. Sobreescriu el mètode {{jsxref("Object.prototype.toSource()")}}.
+
{{jsxref("Error.prototype.toString()")}}
+
Retorna un string que representa l'objecte especificat. Sobreescriu el mètode {{jsxref("Object.prototype.toString()")}}.
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.11.3.1', 'Error')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-error.prototype', 'Error')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ + diff --git a/files/ca/conflicting/web/javascript/reference/global_objects/evalerror/index.html b/files/ca/conflicting/web/javascript/reference/global_objects/evalerror/index.html new file mode 100644 index 0000000000..5f83d25a6f --- /dev/null +++ b/files/ca/conflicting/web/javascript/reference/global_objects/evalerror/index.html @@ -0,0 +1,124 @@ +--- +title: EvalError.prototype +slug: Web/JavaScript/Reference/Global_Objects/EvalError/prototype +translation_of: Web/JavaScript/Reference/Global_Objects/EvalError +translation_of_original: Web/JavaScript/Reference/Global_Objects/EvalError/prototype +--- +
{{JSRef}}
+ +

La propietat EvalError.prototype representa el prototip del constructor {{jsxref("EvalError")}}.

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

Descripció

+ +

Totes les instàncies {{jsxref("EvalError")}} hereten de EvalError.prototype. Es pot utilitzar el prototip per afegir propietats o mètodes a totes les instàncies.

+ +

Propietats

+ +
+
EvalError.prototype.constructor
+
Especifica la funció que ha creat el prototip d'una instància.
+
{{jsxref("Error.prototype.message", "EvalError.prototype.message")}}
+
Missatge d'error. Tot i que l'ECMA-262 especifica que {{jsxref("EvalError")}} hauria de proveir la seva pròpia propietat message, en SpiderMonkey, hereta {{jsxref("Error.prototype.message")}}.
+
{{jsxref("Error.prototype.name", "EvalError.prototype.name")}}
+
Nom de l'error. Heretat de {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.fileName", "EvalError.prototype.fileName")}}
+
Camí cap al fitxer que ha llançat aquest error. Heretat de {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.lineNumber", "EvalError.prototype.lineNumber")}}
+
Número de línia en el fitxer que ha llançat aquest error. Heretat de {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.columnNumber", "EvalError.prototype.columnNumber")}}
+
Número de columna en la línia que ha llançat aquest error. Heretat de {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.stack", "EvalError.prototype.stack")}}
+
Traça de l'error. Heretat de {{jsxref("Error")}}.
+
+ +

Mètodes

+ +

Tot i que l'objecte prototip {{jsxref("EvalError")}} no contè cap mètode en si mateix, les instàncies  {{jsxref("EvalError")}} hereten alguns mètodes a través de la cadena prototip.

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES3')}}{{Spec2('ES3')}}Definició inicial
{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}{{Spec2('ES5.1')}}Definit com a NativeError.prototype.
{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ES6')}}Definit com a NativeError.prototype.
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ + diff --git a/files/ca/conflicting/web/javascript/reference/global_objects/map/index.html b/files/ca/conflicting/web/javascript/reference/global_objects/map/index.html new file mode 100644 index 0000000000..3a7508f042 --- /dev/null +++ b/files/ca/conflicting/web/javascript/reference/global_objects/map/index.html @@ -0,0 +1,126 @@ +--- +title: Map.prototype +slug: Web/JavaScript/Referencia/Objectes_globals/Map/prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Map +translation_of_original: Web/JavaScript/Reference/Global_Objects/Map/prototype +--- +
{{JSRef}}
+ +

La propietat Map.prototype representa el prototipus per al constructor de {{jsxref("Map")}}.

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

Descripció

+ +

Les instàncies de {{jsxref("Map")}} hereten de {{jsxref("Map.prototype")}}. Es pot utilitzar el prototipus de l'objecte constructor per a afegir propietats o mètodes a totes les instàncies de Map.

+ +

Propietats

+ +
+
Map.prototype.constructor
+
Retorna la funció que ha creat el una instància del prototipus. Per defecte és la funció {{jsxref("Map")}}.
+
{{jsxref("Map.prototype.size")}}
+
Retorna el nombre de parells clau-valor que conté l'objecte Map.
+
+ +

Mètodes

+ +
+
{{jsxref("Map.prototype.clear()")}}
+
Elimina tots els parells clau-valor de l'objecte Map.
+
{{jsxref("Map.delete", "Map.prototype.delete(clau)")}}
+
Elimina el valor associat a la clau especificada i retorna el valor que el mètode Map.prototype.has(valor) hagués retornat abans d'eliminar-lo. Map.prototype.has(clau) retornarà false després de cridar aquest mètode.
+
{{jsxref("Map.prototype.entries()")}}
+
Retorna un nou objecte Iterator que conté un array de [clau, valor] per a cada element dins l'objecte Map, en estricte ordre d'inserció.
+
{{jsxref("Map.forEach", "Map.prototype.forEach(callbackFn[, thisArg])")}}
+
Crida callbackFn per a cada parell clau-valor present a l'objecte Map, recorreguts per ordre d'inserció. Si es proporciona el paràmetre thisArg, aquest s'utilitzarà com a valor de this per a cada crida a callbackFn.
+
{{jsxref("Map.get", "Map.prototype.get(clau)")}}
+
Retorna el valor associat a la clau, o bé undefined si aquesta clau no té cap valor associat.
+
{{jsxref("Map.has", "Map.prototype.has(clau)")}}
+
Retorna un booleà que especifica si la clau té un valor associat en aquest objecte Map o no.
+
{{jsxref("Map.prototype.keys()")}}
+
Retorna un nou objecte Iterator que conté les claus de cada element de l'objecte Map, en ordre d'inserció.
+
{{jsxref("Map.set", "Map.prototype.set(clau, valor)")}}
+
Assigna valor a la clau a l'objecte Map. Retorna l'objecte Map.
+
{{jsxref("Map.prototype.values()")}}
+
Retorna un nou objecte Iterator que conté els valors de cada element de l'objecte Map, en ordre d'inserció.
+
{{jsxref("Map.@@iterator", "Map.prototype[@@iterator]()")}}
+
Retorna un nou objecte Iterator que conté un array de [clau, valor] per a cada element de l'objecte Map, en ordre d'inserció.
+
+ +

Especificacions

+ + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-map.prototype', 'Map.prototype')}}{{Spec2('ES6')}}Definició inicial.
+ +

Compatibilitat amb navegadors

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic38{{ CompatGeckoDesktop("13") }}11257.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}38{{CompatGeckoMobile("13")}}{{CompatNo}}{{CompatNo}} +

8

+
+
+ +

Vegeu també

+ + diff --git a/files/ca/conflicting/web/javascript/reference/global_objects/number/index.html b/files/ca/conflicting/web/javascript/reference/global_objects/number/index.html new file mode 100644 index 0000000000..ae733e56ec --- /dev/null +++ b/files/ca/conflicting/web/javascript/reference/global_objects/number/index.html @@ -0,0 +1,126 @@ +--- +title: Number.prototype +slug: Web/JavaScript/Referencia/Objectes_globals/Number/prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Number +translation_of_original: Web/JavaScript/Reference/Global_Objects/Number/prototype +--- +
{{JSRef}}
+ +

La propietat Number.prototype representa el prototipus per al constructor {{jsxref("Number")}}.

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

Descripció

+ +

Totes les instàncies de {{jsxref("Number")}} hereten de Number.prototype. L'objecte prototipus del constructor de {{jsxref("Number")}} pot ser modificat per a afectar totes les instàncies de {{jsxref( "Number")}}.

+ +

Propietats

+ +
+
Number.prototype.constructor
+
Retorna la funció que ha creat la instància d'aquest objecte. Per defecte aquesta és l'objecte {{jsxref("Number")}}.
+
+ +

Mètodes

+ +
+
{{jsxref("Number.prototype.toExponential()")}}
+
Retorna un string que representa el nombre en notació exponencial.
+
{{jsxref("Number.prototype.toFixed()")}}
+
Retorna un string que representa el nombre en notació de punt fixe.
+
{{jsxref("Number.prototype.toLocaleString()")}}
+
Retorna un string amb una representació d'aquest nombbre sensible a la llengua. Sobreescriu el mètode {{jsxref("Object.prototype.toLocaleString()")}}.
+
{{jsxref("Number.prototype.toPrecision()")}}
+
Retorna un string amb una representació de precisió de punt fixe o notació exponencial del nombre.
+
{{jsxref("Number.prototype.toSource()")}} {{non-standard_inline}}
+
Retorna un objecte literal que representa l'objecte {{jsxref("Number")}} especificat; aquest valor pot ser emprat per a crear un nou objecte. Sobreescriu el mètode {{jsxref("Object.prototype.toSource()")}}.
+
{{jsxref("Number.prototype.toString()")}}
+
Retorna un string que representa l'objecte especificat en el radi (base) especificat. Sobreescriu el mètode {{jsxref("Object.prototype.toString()")}}.
+
{{jsxref("Number.prototype.valueOf()")}}
+
Retorna el valor primitiu de l'objecte especificat. Sobreescriu el mètode {{jsxref("Object.prototype.valueOf()")}}.
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a 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')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ + diff --git a/files/ca/conflicting/web/javascript/reference/global_objects/object/index.html b/files/ca/conflicting/web/javascript/reference/global_objects/object/index.html new file mode 100644 index 0000000000..9451ccfefe --- /dev/null +++ b/files/ca/conflicting/web/javascript/reference/global_objects/object/index.html @@ -0,0 +1,215 @@ +--- +title: Object.prototype +slug: Web/JavaScript/Reference/Global_Objects/Object/prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Object +translation_of_original: Web/JavaScript/Reference/Global_Objects/Object/prototype +--- +
{{JSRef}}
+ +

La propietat Object.prototype representa el prototipus per a {{jsxref("Object")}}.

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

Descripció

+ +

A JavaScript, tots els objectes hereten de {{jsxref("Object")}}; tots els objectes hereten els mètodes i propietats de Object.prototype, tot i que es poden sobreescriure (excepte un Object amb prototipus null, és a dir, Object.create(null)). Per exemple, altres prototipus de constructors sobreescriuen la propietat constructor i ofereixen els seus propis mètodes {{jsxref("Object.prototype.toString()", "toString()")}}. Els canvis al prototipus Object es propaguen a tots els objectes a no ser que les propietats i mètodes que reben aquests canvis hagin sigut sobreescrites més avall a la cadena de prototipus.

+ +

Propietats

+ +
+
{{jsxref("Object.prototype.constructor")}}
+
Especifica la funció que ha creat el prototipus de l'objecte.
+
{{jsxref("Object.prototype.__proto__")}} {{non-standard_inline}}
+
Referencia l'objecte utilitzat com a prototipus quan aquest objecte va ser instanciat.
+
{{jsxref("Object.prototype.__noSuchMethod__")}} {{non-standard_inline}}
+
Permet definir una funció que serà executada quan es cridi com mètode un membre no definit.
+
{{jsxref("Object.prototype.__count__")}} {{obsolete_inline}}
+
Retornava el nombre de propietats enumerables que hi hagués a un objecte definit per l'usuari. S'ha eliminat.
+
{{jsxref("Object.prototype.__parent__")}} {{obsolete_inline}}
+
Referenciava el context d'un objecte. S'ha eliminat.
+
+ +

Mètodes

+ +
+
{{jsxref("Object.prototype.__defineGetter__()")}} {{non-standard_inline}} {{deprecated_inline}}
+
Associa una funció a una propietat que, quan s'accedeix, executa aquesta funció i retorna el seu valor.
+
{{jsxref("Object.prototype.__defineSetter__()")}} {{non-standard_inline}} {{deprecated_inline}}
+
Associa una funció a una propietat que, quan s'assigna, executa aquesta funció que modifica la propietat.
+
{{jsxref("Object.prototype.__lookupGetter__()")}} {{non-standard_inline}} {{deprecated_inline}}
+
Retorna una funció associada a la propietat especificada pel mètode {{jsxref("Object.defineGetter", "__defineGetter__")}}.
+
{{jsxref("Object.prototype.__lookupSetter__()")}} {{non-standard_inline}} {{deprecated_inline}}
+
Retorna a funció associada a la propietat especificada pel mètode {{jsxref("Object.defineSetter", "__defineSetter__")}}.
+
{{jsxref("Object.prototype.hasOwnProperty()")}}
+
Retorna un booleà que indica si l'objecte conté la propietat especificada com una propietat pròpia d'ell mateix en comptes d'heretar-la a través de la cadena de prototipus.
+
{{jsxref("Object.prototype.isPrototypeOf()")}}
+
Retorna un booleà que indica si l'objecte espeicfifcat pertany a la cadena de prototipus de l'objecte sobre el que es crida aquest mètode.
+
{{jsxref("Object.prototype.propertyIsEnumerable()")}}
+
Retorna un booleà que indica si està activat l'atribut intern DontEnum de l'ECMAScript.
+
{{jsxref("Object.prototype.toSource()")}} {{non-standard_inline}}
+
Retorna un string que conté cofi font que defineix un literal d'objecte que representa l'objecte sobre el que s'executa aquest mètode; aquest valor pot utilitzar-se per a crear un nou objecte.
+
{{jsxref("Object.prototype.toLocaleString()")}}
+
Crida el mètode {{jsxref("Object.toString", "toString()")}}.
+
{{jsxref("Object.prototype.toString()")}}
+
Retorna una representació d'aquest objecte en forma de string.
+
{{jsxref("Object.prototype.unwatch()")}} {{non-standard_inline}}
+
Esborra un watchpoint d'una propietat de l'objecte.
+
{{jsxref("Object.prototype.valueOf()")}}
+
Retorna el valor primitiu de l'objecte especificat.
+
{{jsxref("Object.prototype.watch()")}} {{non-standard_inline}}
+
Afegeix un watchpoint a una propietat de l'objecte.
+
{{jsxref("Object.prototype.eval()")}} {{obsolete_inline}}
+
Evaluava un string de codi font JavaScript dins el context de l'objecte especificat. S'ha eliminat.
+
+ +

Exemples

+ +

Degut a que JavaScript no res semblant a subclasses d'objectes, la propietat prototype és una bona forma d'utilitzar algunes funcions que fan d'objectes com a "classe base". Per exemple:

+ +
var Person = function() {
+  this.canTalk = true;
+};
+
+Person.prototype.greet = function() {
+  if (this.canTalk) {
+    console.log('Hi, I am ' + this.name);
+  }
+};
+
+var Employee = function(name, title) {
+  Person.call(this);
+  this.name = name;
+  this.title = title;
+};
+
+Employee.prototype = Object.create(Person.prototype);
+Employee.prototype.constructor = Employee;
+
+Employee.prototype.greet = function() {
+  if (this.canTalk) {
+    console.log('Hi, I am ' + this.name + ', the ' + this.title);
+  }
+};
+
+var Customer = function(name) {
+  Person.call(this);
+  this.name = name;
+};
+
+Customer.prototype = Object.create(Person.prototype);
+Customer.prototype.constructor = Customer;
+
+var Mime = function(name) {
+  Person.call(this);
+  this.name = name;
+  this.canTalk = false;
+};
+
+Mime.prototype = Object.create(Person.prototype);
+Mime.prototype.constructor = Mime;
+
+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();
+// Hi, I am Bob, the Builder
+
+joe.greet();
+// Hi, I am Joe
+
+rg.greet();
+// Hi, I am Red Green, the Handyman
+
+mike.greet();
+// Hi, I am Mike
+
+mime.greet();
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.2.3.1', 'Object.prototype')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-object.prototype', 'Object.prototype')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

 Vegeu també

+ + diff --git a/files/ca/conflicting/web/javascript/reference/global_objects/set/index.html b/files/ca/conflicting/web/javascript/reference/global_objects/set/index.html new file mode 100644 index 0000000000..9d6f6e90ee --- /dev/null +++ b/files/ca/conflicting/web/javascript/reference/global_objects/set/index.html @@ -0,0 +1,124 @@ +--- +title: Set.prototype +slug: Web/JavaScript/Referencia/Objectes_globals/Set/prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Set +translation_of_original: Web/JavaScript/Reference/Global_Objects/Set/prototype +--- +
{{JSRef}}
+ +

La propietat Set.prototype representa el prototipus per al constructor de {{jsxref("Set")}}.

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

Descripció

+ +

Les instàncies de {{jsxref("Set")}} hereten de {{jsxref("Set.prototype")}}. Es pot utilitzar el l'objecte prototipus del constructor per a afegir propietats o mètodes a totes les instàncies de Set.

+ +

Propietats

+ +
+
Set.prototype.constructor
+
Retorna la funció que ha creat la instància del prototipus. Per defecte es tracta de la funció {{jsxref("Set")}}.
+
{{jsxref("Set.prototype.size")}}
+
Retorna el nombre de valors emmagatzemats dins l'objecte Set.
+
+ +

Mètodes

+ +
+
{{jsxref("Set.add", "Set.prototype.add(valor)")}}
+
Afegeix un nou element a l'objecte Set amb el valor donat. Retorna l'objecte Set.
+
{{jsxref("Set.prototype.clear()")}}
+
Elimina tots els elements de l'objecte Set.
+
{{jsxref("Set.delete", "Set.prototype.delete(valor)")}}
+
Elimina l'element associat a valor i retorna el que el mètode Set.prototype.has(valor) hagués retornat prèviament a aquesta crida. Després d'aquesta crida Set.prototype.has(valor) retornarà false.
+
{{jsxref("Set.prototype.entries()")}}
+
Retorna un nou objecte Iterator que conté un array de la forma [valor, valor] per a cada element dins l'objecte Set, en ordre d'inserció. El array retornat manté similitud amb el comportament de l'objecte Map, de forma que cada entrada té el mateix valor per a la seva clau i valor.
+
{{jsxref("Set.forEach", "Set.prototype.forEach(callbackFn[, thisArg])")}}
+
Crida callbackFn per a cada valor present a l'objecte Set, recorreguts per ordre d'inserció. Si es proporciona el paràmetre thisArg, aquest s'utilitzarà com a valor de this per a cada crida a callbackFn.
+
{{jsxref("Set.has", "Set.prototype.has(value)")}}
+
Retorna un booleà que especifica si la clau té un valor associat en aquest objecte Set o no.
+
{{jsxref("Set.prototype.keys()")}}
+
Es tracta de la mateixa funció que la funció values() i retorna un nou objecte Iterator que conté els valors per a cada element de l'objecte Set, en ordre d'inserció.
+
{{jsxref("Set.prototype.values()")}}
+
Retorna un nou objecte Iterator que conté els valors de cada element de l'objecte Set, en ordre d'inserció.
+
{{jsxref("Set.prototype.@@iterator()", "Set.prototype[@@iterator]()")}}
+
Retorna un nou objecte Iterator que conté els valors de cada element de l'objecte Set, en ordre d'inserció.
+
+ +

Especificacions

+ + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-set.prototype', 'Set.prototype')}}{{Spec2('ES6')}}Definició inicial.
+ +

Compatibilitat amb navegadors

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic38{{ CompatGeckoDesktop("13") }}11257.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}38{{ CompatGeckoMobile("13") }}{{CompatNo}}{{CompatNo}} +

8

+
+
+ +

Vegeu també

+ + diff --git a/files/ca/conflicting/web/javascript/reference/global_objects/syntaxerror/index.html b/files/ca/conflicting/web/javascript/reference/global_objects/syntaxerror/index.html new file mode 100644 index 0000000000..35aea642bd --- /dev/null +++ b/files/ca/conflicting/web/javascript/reference/global_objects/syntaxerror/index.html @@ -0,0 +1,122 @@ +--- +title: SyntaxError.prototype +slug: Web/JavaScript/Referencia/Objectes_globals/SyntaxError/prototype +translation_of: Web/JavaScript/Reference/Global_Objects/SyntaxError +translation_of_original: Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype +--- +
{{JSRef}}
+ +

La propietat SyntaxError.prototype representa el prototip pel constructor {{jsxref("SyntaxError")}}.

+ +

Descripció

+ +

Totes les instàncies {{jsxref("SyntaxError")}} hereten de SyntaxError.prototype. Es pot utilitzar el prototipus per afegir propietats o mètodes a totes les instàncies.

+ +

Propietats

+ +
+
SyntaxError.prototype.constructor
+
Especifica la funció que ha creat el prototip d'una instància.
+
{{jsxref("Error.prototype.message", "SyntaxError.prototype.message")}}
+
Missatge d'error. Tot i que l'ECMA-262 especifica que {{jsxref("SyntaxError")}} hauria de proveir la seva pròpia propietat message, en SpiderMonkey, hereta {{jsxref("Error.prototype.message")}}.
+
{{jsxref("Error.prototype.name", "SyntaxError.prototype.name")}}
+
Nom de l'herror. Heretat de {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.fileName", "SyntaxError.prototype.fileName")}}
+
Ruta a l'arxiu que llança aquest error. Heretat de {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.lineNumber", "SyntaxError.prototype.lineNumber")}}
+
Número de línia en el fitxa que llança aquest error. Heretat de {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.columnNumber", "SyntaxError.prototype.columnNumber")}}
+
Número de columna en línia que llança aquest error. Heretat de {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.stack", "SyntaxError.prototype.stack")}}
+
Traça de l'error. Heretat de {{jsxref("Error")}}.
+
+ +

Mètodes

+ +

Tot i que l'objecte prototip {{jsxref("SyntaxError")}} no conté cap mètode per si mateix, instàncies de{{jsxref("SyntaxError")}} heretes alguns mètodes a través de la cadena prototip.

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES3')}}{{Spec2('ES3')}}Definició inicial
{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}{{Spec2('ES5.1')}}Definit com a NativeError.prototype.
{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ES6')}}Definit com a NativeError.prototype.
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ + diff --git a/files/ca/conflicting/web/javascript/reference/global_objects/weakmap/index.html b/files/ca/conflicting/web/javascript/reference/global_objects/weakmap/index.html new file mode 100644 index 0000000000..40c3e72ff6 --- /dev/null +++ b/files/ca/conflicting/web/javascript/reference/global_objects/weakmap/index.html @@ -0,0 +1,133 @@ +--- +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}}
+ +

La propietat WeakMap.prototype representa el prototip pel constructor {{jsxref("WeakMap")}}.

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

Descripció

+ +

Les instantànies {{jsxref("WeakMap")}} hereten de {{jsxref("WeakMap.prototype")}}. Es pot utilitzar l'objecte prototip del constructor per afegir propietats o mètodes a totes les instàncies WeakMap.

+ +

WeakMap.prototype és en si mateix només un objecte ordinari:

+ +
Object.prototype.toString.call(WeakMap.prototype); // "[object Object]"
+ +

Propietats

+ +
+
WeakMap.prototype.constructor
+
Retorna la funció que ha creat un prototip de la instància. Aquesta és la funció {{jsxref("WeakMap")}} per defecte.
+
+ +

Mètodes

+ +
+
{{jsxref("WeakMap.delete", "WeakMap.prototype.delete(key)")}}
+
Elimina qualsevol valor associat a key. WeakMap.prototype.has(key) retornarà false després d'això.
+
{{jsxref("WeakMap.get", "WeakMap.prototype.get(key)")}}
+
Retorna el valor associat a key, o undefined si no n'hi ha cap.
+
{{jsxref("WeakMap.has", "WeakMap.prototype.has(key)")}}
+
Retorna un booleà afirmant si un valor s'ha associat o no a la key en l'objecte WeakMap.
+
{{jsxref("WeakMap.set", "WeakMap.prototype.set(key, value)")}}
+
Estableix el valor per la key en l'objecte WeakMap. Retorna l'objecte WeakMap.
+
{{jsxref("WeakMap.prototype.clear()")}} {{obsolete_inline}}
+
Elimina totes les parelles clau/valor de l'objecte WeakMap. Vegeu que es posible implementar un objecte WeakMap-like que tingui un mètode .clear() per mitjà d'encapsular un objecte WeakMap que no ho tingui (vegeu un exemple a la pàgina {{jsxref("WeakMap")}})
+
+ +

Especificacions

+ + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-weakmap.prototype', 'WeakMap.prototype')}}{{Spec2('ES6')}}Definició inicial
+ +

Compatibilitat amb navegadors

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic36{{CompatGeckoDesktop("6.0")}}11237.1
Objecte ordinari{{CompatUnknown}}{{CompatGeckoDesktop("40")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("6.0")}}{{CompatNo}}{{CompatNo}}8
Objecte ordinari{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("40")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Vegeu també

+ + diff --git a/files/ca/conflicting/web/javascript/reference/global_objects/weakset/index.html b/files/ca/conflicting/web/javascript/reference/global_objects/weakset/index.html new file mode 100644 index 0000000000..4e86935904 --- /dev/null +++ b/files/ca/conflicting/web/javascript/reference/global_objects/weakset/index.html @@ -0,0 +1,132 @@ +--- +title: WeakSet.prototype +slug: Web/JavaScript/Reference/Global_Objects/WeakSet/prototype +translation_of: Web/JavaScript/Reference/Global_Objects/WeakSet +translation_of_original: Web/JavaScript/Reference/Global_Objects/WeakSet/prototype +--- +
{{JSRef}}
+ +

La propietat WeakSet.prototype representa el prototip pel constructor {{jsxref("WeakSet")}}.

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

Descripció

+ +

Les instàncies {{jsxref("WeakSet")}} hereten de {{jsxref("WeakSet.prototype")}}. Es pot utilitzar l'objecte prototip del constructor per afegir propietats o mètodes a totes les instàncies WeakSet.

+ +

WeakSet.prototype és en si mateix només un objecte ordinari

+ +
Object.prototype.toString.call(WeakSet.prototype); // "[object Object]"
+ +

Propietats

+ +
+
WeakSet.prototype.constructor
+
Retorna la funció que ha creat un prototip de la instància. Aquesta és la funció {{jsxref("WeakSet")}} per defecte.
+
+ +

Mètodes

+ +
+
{{jsxref("WeakSet.add", "WeakSet.prototype.add(value)")}}
+
Afegeix un nou element amb el valor donat a l'objecte WeakSet.
+
{{jsxref("WeakSet.delete", "WeakSet.prototype.delete(value)")}}
+
Elimina l'element associat al value. WeakSet.prototype.has(value) retornarà després false.
+
{{jsxref("WeakSet.has", "WeakSet.prototype.has(value)")}}
+
Retorna un booleà afirmant si un element és o no present amb el valor donat en l'objecte WeakSet.
+
{{jsxref("WeakSet.prototype.clear()")}} {{obsolete_inline}}
+
Elimina tots els elements de l'objecte WeakSet.
+
+ +

Especificacions

+ + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-weakset.prototype', 'WeakSet.prototype')}}{{Spec2('ES6')}}Definició inicial.
+ +

Compatibilitat amb navegadors

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic36{{ CompatGeckoDesktop(34) }}{{CompatNo}}23{{CompatNo}}
Objecte ordinari{{CompatUnknown}}{{CompatGeckoDesktop("40")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChrome per AndroidAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatNo}}{{ CompatGeckoMobile(34) }}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Objecte ordinari{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("40")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Vegeu també

+ + diff --git a/files/ca/conflicting/web/javascript/reference/operators/index.html b/files/ca/conflicting/web/javascript/reference/operators/index.html new file mode 100644 index 0000000000..9b6816c2d6 --- /dev/null +++ b/files/ca/conflicting/web/javascript/reference/operators/index.html @@ -0,0 +1,287 @@ +--- +title: Operadors aritmètics +slug: Web/JavaScript/Referencia/Operadors/Arithmetic_Operators +translation_of: Web/JavaScript/Reference/Operators +translation_of_original: Web/JavaScript/Reference/Operators/Arithmetic_Operators +--- +
+
{{jsSidebar("Operators")}}
+
+ +

Resum

+ +

Els operadors aritmètics prenen valors numèrics (poden ser tant literals com ser variables) com a operands seus i retornen un valor numèric únic. Els operadors aritmètics estàndards són la suma (+), la resta (-), la multiplicació (*), i la divisió (/).

+ +

Suma (+)

+ +

L'operador Suma produeix la suma dels operands numèrics o de la concatenació de cadenes.

+ +

Sintaxi

+ +
Operador: x + y
+
+ +

Exemples

+ +
// Nombre + Nombre -> suma
+1 + 2 // 3
+
+// Booleà + Nombre -> suma
+true + 1 // 2
+
+// Booleà + Booleà -> suma
+false + false // 0
+
+// Nombre + String -> concatenació
+5 + "foo" // "5foo"
+
+// String + Booleà -> concatenació
+"foo" + false // "foofalse"
+
+// String + String -> concatenació
+"foo" + "bar" // "foobar"
+
+ +

Resta (-)

+ +

L'operador resta produeix la resta de dos operands, produint la seva diferència.

+ +

Sintaxi

+ +
Operador: x - y
+
+ +

Exemples

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

Divisió (/)

+ +

L'operador divisió produeix el quocient dels seus operands on el operand de l'esquerra és el dividend, i l'operand de la dreta és el divisor.

+ +

Sintaxi

+ +
Operador: x / y
+
+ +

Exemples

+ +
1 / 2      // retorna 0.5 a JavaScript
+1 / 2      // retorna 0 in Java
+// (cap dels nombres és explícitament n nombre de coma flotant)
+
+1.0 / 2.0  // retorna 0.5 a JavaScript i Java
+
+2.0 / 0    // retorna Infinity a JavaScript
+2.0 / 0.0  // també retorna Infinity
+2.0 / -0.0 // retorna -Infinity a JavaScript
+ +

Multiplicació (*)

+ +

L'operador multiplicació produeix el producte dels operands.

+ +

Sintaxi

+ +
Operador: x * y
+
+ +

Exemples

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

Mòdul (%)

+ +

L'operador mòdul retorna el mòdul del primer operand amb el segon, això és, var1 modulo var2 en la sentència prèvia, on var1 i var2 són variables. La funció mòdul és la resta entera de dividir var1 per var2. Hi ha una proposta per a implementar un operador mòdul real en una futura versió de l'ECMAScript.

+ +

Sintaxi

+ +
Operador: var1 % var2
+
+ +

Exemples

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

Increment (++)

+ +

L'operador increment incrementa (afegeix un) al seu operand i retorna un valor.

+ + + +

Sintaxi

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

Exemples

+ +
// Sufix
+var x = 3;
+y = x++; // y = 3, x = 4
+
+// Prefix
+var a = 2;
+b = ++a; // a = 3, b = 3
+
+ +

Decrement (--)

+ +

L'operador decrement decrementa (resta un) al seu operand i retorna el seu valor.

+ + + +

Sintaxi

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

Exemples

+ +
// Sufix
+var x = 3;
+y = x--; // y = 3, x = 2
+
+// Prefix
+var a = 2;
+b = --a; // a = 1, b = 1
+
+ +

Negació unària (-)

+ +

L'operador de negació unària precedeix el seu operand i el nega.

+ +

Sintaxi

+ +
Operator: -x
+
+ +

Exemples

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

Operador unari de conversió a nombre (+)

+ +

L'operador unari de conversió a nombre precedeix el seu operand i intenta convertir-lo en un nombre si no ho és ja. Tot i que l'operand de negació unària també pot convertir no-nombres, l'operador de conversió és el mètode més ràpid i recomanat per a convertir quelcom a un nombre ja que no realitza cap altra operació al nombre. Pot convertir cadenes de caràcters representant sencers i nombres en coma flotant, així com els valors true, false i null. Quant a nombres sencers, tant la notació decimal com la hexadecimal (denotada amb el prefixe "0x") estàn suportades. Els nombres negatius també estàn suportats (tot i que no per a hexadecimals). Si no pot interpretar un valor determinat l'operador retornarà NaN.

+ +

Sintaxi

+ +
Operador: +x
+
+ +

Exemples

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

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
ECMAScript 1st Edition.StandardInitial definition.
{{SpecName('ES5.1', '#sec-11.6', 'Additive operators')}}
+ {{SpecName('ES5.1', '#sec-11.5', 'Multiplicative operators')}}
+ {{SpecName('ES5.1', '#sec-11.3', 'Postfix expressions')}}
+ {{SpecName('ES5.1', '#sec-11.4', 'Unary operators')}}		{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-additive-operators', 'Additive operators')}}
+ {{SpecName('ES6', '#sec-multiplicative-operators', 'Multiplicative operators')}}
+ {{SpecName('ES6', '#sec-postfix-expressions', 'Postfix expressions')}}
+ {{SpecName('ES6', '#sec-unary-operators', 'Unary operators')}}		{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

Vegeu també

+ + diff --git a/files/ca/conflicting/web/javascript/reference/operators_94c03c413a71df1ccff4c3ede275360c/index.html b/files/ca/conflicting/web/javascript/reference/operators_94c03c413a71df1ccff4c3ede275360c/index.html new file mode 100644 index 0000000000..f7fbae7b47 --- /dev/null +++ b/files/ca/conflicting/web/javascript/reference/operators_94c03c413a71df1ccff4c3ede275360c/index.html @@ -0,0 +1,719 @@ +--- +title: Operadors de bits +slug: Web/JavaScript/Referencia/Operadors/Bitwise_Operators +translation_of: Web/JavaScript/Reference/Operators +translation_of_original: Web/JavaScript/Reference/Operators/Bitwise_Operators +--- +
{{jsSidebar("Operators")}}
+ +

Resum

+ +

Els operadors de bits tracten els seus operands com una seqüència de 32 bits (uns i zeros), en comptes de operar-los com a nombres decimals, hexadecimals o octals. Per exemple, la representació binària del és nombre decimal nou (9) 1001. Els operadors de bits treballen amb aquesta representació binària però el resultat que retorna l'operació sempre és un nombre standard de JavaScript.

+ +

La taula que trobareu a continuació és un resum dels operadors de bits que es poden trobar a JavaScript:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OperadorÚsDescripció
AND binaria & b +

Retorna un 1 a les posicions on el bit de a i el bit de b són 1 i un 0 en totes les altres.

+
OR binaria | b +

Retorna un 1 a les posicions on al menys la posició de a o la de b són 1.

+
XOR binaria ^ b +

Retorna un 1 a cada posició on a és 1 i b és 0 o bé a és 0 i b és 1.

+
NOT binari~ aInverteix els bits de l'operand donat.
Desplaçament a l'esquerraa << bDesplaça els bits de a b posicions a l'esquerra, tot omplint amb zeros les primeres b posicions.
Desplaçament a la dreta conservant el signea >> bDesplaça els bits de a b posicions a la dreta, descartant els bits desplaçats fora.
Desplaçament a la dreta omplint amb zerosa >>> bDesplaça els bits de a b posicions a la dreta, descartant els bits desplaçats fora. Els primers b bits s'omplen amb zeros.
+ +

Enters de 32 bits amb signe

+ +

Els operands de totes les operacions de bits es converteixen a enters amb signe de 32 bits utilitzant el format de complement a 2. Això vol dir que la versió negativa d'un nombre (per exemple 5 vs -5) és exactament la mateixa representació binària però amb els bits invertits (operació de bits NOT del nombre, també coneguda com a complement del nombre) més 1. Per exemple, seguidament es mostra la representació binària de 314:

+ +
00000000000000000000000100111010
+
+ +

I a continuació ~314, és a dir, el complement de 314:

+ +
11111111111111111111111011000101
+
+ +

Finalment es mostra -314, és a dir, el complement a dos de 314:

+ +
11111111111111111111111011000110
+
+ +

El complement a dos garanteix que el bit de més a l'esquerra sempre serà un 0 quan el nombre és positiu i un 1 quan el nombre sigui negatiu. Aquest bit és doncs anomentat el bit de signe degut a això.

+ +

El nombre 0 es representa com a l'enter composat íntegrament de zeros a tots els seus bits.

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

El nombre -1 és l'enter composats completament per 1s a tots els seus bits.

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

El nombre -2147483648 (representació hexadecimal: -0x80000000) és l'enter composat per zeros a tots els seus bits a excepciò del bit de més a l'esquerra, que és un 1.

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

El nombre 2147483647 (representació hexadecimal: 0x7fffffff) és el sencer composat per 1 a tots els seus bits a excepció del de més a l'esquerra.

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

Els nombres -2147483648 i 2147483647 són els enters més petit i més gran respectivament que poden ser representats mitjançant un nombre de 32 bits amb signe.

+ +

Operadors lògics de bits

+ +

Conceptualment els operadors lògics de bits funcionen de la següent forma:

+ + + +

& (AND binari)

+ +

Realitza l'operació AND a cada parella de bits. a AND b esdevindrà 1 només si ambdós a i b són 1. La taula de la veritat per a l'operació  AND és la següent:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
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)
+
+ +

Realitzar l'operació AND binària de qualsevol nombre amb el zero retornarà zero. Realitzar l'operació AND binària de qualsevol nombre amb -1 retornarà el mateix nombre.

+ +

| (OR binari)

+ +

Realitza la operació OR a cada parella de bits. a OR b retornarà 1 si qualsevol de a o b és 1. La taula de la veritat per a l'operació OR és:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
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)
+
+ +

Realitzar l'operació OR binària de qualsevol nombre x amb 0 retornarà x. Realitzar l'operació OR binària de qualsevol nombre x amb -1 retornarà ~x

+ +

^ (XOR binari)

+ +

Realitza la operació XOR a cada parella de bits. a XOR b retorna 1 si a i b són diferents. La taula de la veritat per a l'operació XOR és la següent:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
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)
+
+ +

Realitzar l'operació XOR binària de qualsevol nombre x amb 0 retornarà x. Realitzar l'operació OR binària de qualsevol nombre x amb -1 retornarà ~x.

+ +

~ (NOT binari)

+ +

Realitza una operació NOT a cada bit. NOT a retorna el valor invers (també conegut com el complement a 1) de a. La taula de la veritat per a la operació NOT és:

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

Realitzar la operació NOT binària a un nombre x qualsevol retorna -(x + 1). Per exemple, ~5 resulta en -6.

+ +

Exemple amb indexOf:

+ +
var str = 'rawr';
+var searchFor = 'a';
+
+// fora alternativa equivalent a if (-1*str.indexOf('a') <= -1)
+if (~str.indexOf(searchFor)) {
+  // searchFor és dins l'string
+} else {
+  // searchFor no està dins l'string
+}
+
+// valors retornats per (~str.indexOf(searchFor))
+// r == -1
+// a == -2
+// w == -3
+
+ +

Operadors binaris de desplaçament

+ +

Els operadors binaris de desplaçament accepten dos operands: el primer és el valor que serà transformat a enter de 32 bits i al que se li aplicarà el desplaçament. El segon determina el nombre de posicions que es desplaçarà cada bit. La direcció en la que els bits es desplaçaran es determina per l'operador usat.

+ +

Els operadors de desplaçament converteixen els seus operands a enters de 32 bits en ordre big-endian i retornen un valor amb el mateix tipus que l'operand de l'esquerra. L'operand de la dreta hauria de ser menor de 32, però de no ser així només s'utilitzen els primers 5 bits.

+ +

<< (Desplaçament a l'esquerra)

+ +

Aquest operador desplaça el primer operand un nombre específic de bits cap a l'esquerra. Els bits de l'esquerra sobrants són descartats. Per a omplir les primeres posicions de la dreta s'utilitzen zeros.

+ +

Exemple: 9 << 2 resulta en 36:

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

Desplaçar a l'esquerra qualsevol nombre x y bits resulta en x * 2^y.

+ +

>> (Desplaçament a la dreta preservant el signe)

+ +

Aquest operador desplaça el primer operand un nombre específic de bits a la dreta. Els bits sobrants es descarten. Els bits de l'esquerra s'inicialitzen amb el valor inicial del primer bit de l'esquerra. Degut a que el bit de més a l'esquerra tindrà el mateix valor que el bit de més a l'esquerra abans de realitzar el desplaçament, el bit de signe no canvia. És degut a aquesta propietat que es diu que aquest operand preserva el signe.

+ +

Per exemple, 9 >> 2 resulta en 2:

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

De la mateixa manera, -9 >> 2 resulta en -3, ja que el signe es preserva:

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

>>> (Desplaçament a la dreta omplint amb zeros)

+ +

Aquest operador desplaça el primer operand un nombre específic de bits cap a la dreta. Els bits sobrants degut al desplaçament són descartats. Els bits de l'esquerra són omplerts utilitzant zeros. Com que el bit de signe sempre acaba sent un zero el resultat sempre és no negatiu.

+ +

Per a nombres no negatius, els operadors de desplaçament a la dreta preservant el signe i omplint amb zeros retornen el mateix resultat. Per exemple, 9 >>> 2 resulta en 2, tal com 9 >> 2:

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

El resultat varia, però, per a nombres negatius. Per exemple, -9 >>> 2 resulta en 1073741821, el qual es diferent de -9 >> 2 (que retorna -3):

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

Exemples

+ +

Exemple: Marques i màscares de bits

+ +

Els operadors lògics de bits s'empren tot sovint per a crear, manipular i llegir seqüències de marques, les quals realitzen uns funció similar a les variables booleanes. El seu avantatge davant les variables booleanes és que les seqüències de marques utilitzen molta menys memòria (per un factor de 32).

+ +

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

+ +

Suposem 4 marques:

+ + + +

Aquestes marques són representades per una seqüència de bits: DCBA. Quan una marca està activada, té un valor de 1. Quan una marca no està activa rep un valor de 0. Suposem que una variable anomenada flags (marques en anglès) té el valor binari 0101:

+ +
var flags = 5;   // 0101 en binari
+
+ +

Aquest valor indica:

+ + + +

Com que les operacions be bits utilitzen nombres de 32 bits, 0101 és en realitat 00000000000000000000000000000101, però els zeros a l'esquerra es poden obviar ja que no contenen informació útil.

+ +

Una màscara de bits és una seqüència que pot manipular i/o llegir marques. És molt comú definir màscares "primitives" per a cada marca:

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

Es fàcil crear noves màscares mitjançant operacions de bits lògiques sobre les màscares primitives. Per exemple, la màscara de bits 1011 es pot crear mitjançant operacions OR sobre FLAG_A, FLAG_B i FLAG_D:

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

Els valors individuals d'una marca es poden obtindre mitjançant una operació AND de la seqüència de marques amb la màscara primitiva corresponent. La màscara de bits descarta els bits de les marques que no s'escauen. Per exemple, la màscara de bits 0100 es pot emprar per veure si la marca C està activa:

+ +
// si tenim un gat...
+if (flags & FLAG_C) { // 0101 & 0100 => 0100 => true
+   // ... fer coses
+}
+
+ +

Una màscara de bits amb múltiples marques activades funciona com un "or". Per exemple els següents dos blocs de codi són equivalents:

+ +
// si tenim un ratpenat o un gat...
+// (0101 & 0010) || (0101 & 0100) => 0000 || 0100 => true
+if ((flags & FLAG_B) || (flags & FLAG_C)) {
+   // ... fer coses
+}
+
+ +
// si tenim un ratpenat o un gat...
+var mask = FLAG_B | FLAG_C; // 0010 | 0100 => 0110
+if (flags & mask) { // 0101 & 0110 => 0100 => true
+   // ... fer coses
+}
+
+ +

Les marques es poden activar mitjançant una operació OR amb la màscara, on cada bit amb el valor 1 activarà la marca corresponent si no està ja activada. Per exemple, la màscara de bits 1100 pot ser emprada per a activar les marques C i D:

+ +
// si, tenim un gat i un ànec
+var mask = FLAG_C | FLAG_D; // 0100 | 1000 => 1100
+flags |= mask;   // 0101 | 1100 => 1101
+
+ +

Les marques es poden desactivar mitjançant una operació AND amb una màscara de bits, on cada bit amb el valor de zero desactivarà la marca corresponent si no està ja desactivada. Aquestes màscares poden generar-se fàcilment mitjançant una operació NOT sobre la màscara primitiva adient. Per exemple, la màscara 1010 pot ser emprada per a desactivar les marques A i C:

+ +
// no, no tenim un problema amb formigues ni tenim un gat
+var mask = ~(FLAG_A | FLAG_C); // ~0101 => 1010
+flags &= mask;   // 1101 & 1010 => 1000
+
+ +

També es podría haver creat la màscara amb ~FLAG_A & ~FLAG_C (Llei de De Morgan):

+ +
// no, no tenim un problema amb formigues ni tenim un gat
+var mask = ~FLAG_A & ~FLAG_C;
+flags &= mask;   // 1101 & 1010 => 1000
+
+ +

Es pot invertir una màscara (entenem per invertir activar-la si està desactivada i desactivar-la si està activada. És a dir, invertir el seu valor) mitjançant una operació XOR amb una màscara de bits, on cada bit amb el valor 1 invertirà el valor de la marca corresponent. Per exemple, la màscara de bits 0110 pot ser emprada per invertir les marques B i C:

+ +
// Si no teniem un ratpenat, ara en tenim un
+// i si en teniem un, adéu ratpenat
+// El mateix amb els gats
+var mask = FLAG_B | FLAG_C;
+flags = flags ^ mask;   // 1100 ^ 0110 => 1010
+
+ +

Finalment, les marques poden ser invertides mitjançant l'operador NOT:

+ +
// entrant a l'univers paral·lel
+flags = ~flags;    // ~1010 => 0101
+
+ +

Xuletes per conversions

+ +

Converteix un String binari a un Number decimal:

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

Converteix un Number decimal en un String binari:

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

Automatització de la creació de màscares

+ +

El procés de creació de màscares per a valors Booleans pot ser automatitzat:

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

Algorisme invers: un array de booleans a partir d'una màscara

+ +

El codi següent crea un Array de Booleans a partir d'una màscara:

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

Ambdós algorismes poden ser testejats a l'hora...

+ +
var nTest = 19; // la nostra màscara personal
+var nResult = createMask.apply(this, arrayFromMask(nTest));
+
+alert(nResult); // 19
+
+ +

Només amb finalitat didàctica (ja que disposem del mètode Number.toString(2)), es mostra com és posible modficiar l'algorisme arrayFromMask per a crear un String que contingui la representació d'un Number en comptes d'un Array de Booleans:

+ +
function createBinaryString (nMask) {
+  // nMask ha d'estar entre -2147483648 i 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

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
ECMAScript 1a Edició.StandardDefinició inicial
{{SpecName('ES5.1', '#sec-11.4.8', 'Bitwise NOT operator')}}
+ {{SpecName('ES5.1', '#sec-11.7', 'Bitwise shift operators')}}
+ {{SpecName('ES5.1', '#sec-11.10', 'Binary bitwise operators')}}		{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-bitwise-not-operator', 'Bitwise NOT operator')}}
+ {{SpecName('ES6', '#sec-bitwise-shift-operators', 'Bitwise shift operators')}}
+ {{SpecName('ES6', '#sec-binary-bitwise-operators', 'Binary bitwise operators')}}		{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterístiquesChromeFirefox (Gecko)Internet ExplorerOperaSafari
Bitwise NOT (~){{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Bitwise AND (&){{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Bitwise OR (|){{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Bitwise XOR (^){{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Left shift (<<){{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Right shift (>>){{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Unsigned right shift (>>>){{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Bitwise NOT (~){{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Bitwise AND (&){{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Bitwise OR (|){{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Bitwise XOR (^){{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Left shift (<<){{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Right shift (>>){{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Unsigned right shift (>>>){{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

Vegeu també

+ + diff --git a/files/ca/conflicting/web/javascript/reference/operators_af596841c6a3650ee514088f0e310901/index.html b/files/ca/conflicting/web/javascript/reference/operators_af596841c6a3650ee514088f0e310901/index.html new file mode 100644 index 0000000000..591e1fbc4f --- /dev/null +++ b/files/ca/conflicting/web/javascript/reference/operators_af596841c6a3650ee514088f0e310901/index.html @@ -0,0 +1,302 @@ +--- +title: Operadors Lògics +slug: Web/JavaScript/Referencia/Operadors/Logical_Operators +translation_of: Web/JavaScript/Reference/Operators +translation_of_original: Web/JavaScript/Reference/Operators/Logical_Operators +--- +
+
{{jsSidebar("Operators")}}
+
+ +

Resum

+ +

Els operadors lògics s'utilitzen normalment amb valors Boolean (lògics). En cas de serh-hi presents, retornen un valor booleà. Tot i així, els operadors && i || retornen el valor d'un dels operands especificats, així que si aquests operadors es fan servir amb valors no booleans, poden retornar un valor no booleà.

+ +

Descripció

+ +

Els operadors lògics es descriuren en la taula següent:

+ + + + + + + + + + + + + + + + + + + + + + + + +
OperadorÚsDescripció
AND lògic (&&)expr1 && expr2Retorna expr1 si es pot convertir en false; sinó, retorna expr2. Així, quan es fa servir amb valors booleans, && retorna true si ambdós operands són true; de ser el contrari, retorna false.
OR lògic(||)expr1 || expr2Retorna expr1 si es pot converir en true; de ser al contrari, retorna expr2. Així, quan s'usa amb valors Booleans, || retorna true si l'operand és true; si amdós són false, retorna false.
NOT lògic (!)!exprRetorna false si el seu únic operand pot convertir-se a true; sinó, retorna true.
+ +

Exemples d'expressions que es poden converir a false son aquelles que avaluen null, 0, la cadena buida (""), o undefined.

+ +

Tot i que els operadors && i || es poden fer servir amb operands que no siguin valors Booleans, poden ser considerats operadors Booleans ja que els valors que retornen sempre es poden convertir en valors Booleans.

+ +

Avaluació de tipus curtcircuit

+ +

Com a expressions lògiques que són, s'avaluen d'esquerra a dreta, they are tested for possible "short-circuit" evaluation fent servir les regles següents:

+ + + +

Les regles de la lògica garanteixen que aquestes avaluacions són sempre correctes. Fixeu-vos que la part quelcom d'adalt no s'avalua, així que els efectes secundaris d'això no tindràn efecte. Fixeu-vos també que la part de l'expressió de dalt anomenada quelcom és una expressió lògica simple (com s'indiquen amb els parèntesis).

+ +

Per exemple, les dues funcions següents són equivalents.

+ +
function shortCircuitEvaluation() {
+  doSomething() || doSomethingElse()
+}
+
+function equivalentEvaluation() {
+  var flag = doSomething();
+  if (!flag) {
+    doSomethingElse();
+  }
+}
+
+ +

Tot i així, les següents expressions no són equivalents degut a la precendència dels operadors, i remarca la importància de requerir que l'operador de la dreta sigui una sola expressió (agrupada, si s'escau, per parèntesi).

+ +
false && true  || true      // returns true
+false && (true || true)     // returns false
+ +

AND lògic (&&)

+ +

El codi següent mostra exemples de l'operador && (AND lògic).

+ +
a1 = true  && true      // t && t returns true
+a2 = true  && false     // t && f returns false
+a3 = false && true      // f && t returns false
+a4 = false && (3 == 4)  // f && f returns false
+a5 = "Cat" && "Dog"     // t && t returns "Dog"
+a6 = false && "Cat"     // f && t returns false
+a7 = "Cat" && false     // t && f returns false
+
+ +

OR lògic (||)

+ +

El codi següent mostra exemples de l'operador || (OR lògic).

+ +
o1 = true  || true       // t || t returns true
+o2 = false || true       // f || t returns true
+o3 = true  || false      // t || f returns true
+o4 = false || (3 == 4)   // f || f returns false
+o5 = "Cat" || "Dog"      // t || t returns "Cat"
+o6 = false || "Cat"      // f || t returns "Cat"
+o7 = "Cat" || false      // t || f returns "Cat"
+
+ +

NOT lògic (!)

+ +

El codi següent mostra exemples de l'operador ! (NOT lògic).

+ +
n1 = !true              // !t returns false
+n2 = !false             // !f returns true
+n3 = !"Cat"             // !t returns false
+
+ +

Regles de conversió

+ +

Convertir AND a OR

+ +

L'operació següent que inclou Booleans:

+ +
bCondition1 && bCondition2
+ +

sempre és igual a:

+ +
!(!bCondition1 || !bCondition2)
+ +

Convertir OR a AND

+ +

L'operació següent que inclou Booleans:

+ +
bCondition1 || bCondition2
+ +

sempre és igual a:

+ +
!(!bCondition1 && !bCondition2)
+ +

Desfer-se de parèntesis aniuats

+ +

Com que les expressions lògiques s'avaluen d'esquerra a dreta, sempre és posible esborrar els parèntesi d'expressions complexes mitjançant les regles següents.

+ +

Desfer-se d'un AND aniuat

+ +

L'operació següent que inclou Booleans:

+ +
bCondition1 || (bCondition2 && bCondition3)
+ +

sempre és igual a:

+ +
bCondition1 || bCondition2 && bCondition3
+ +

Desfer-se d'un OR aniuat

+ +

L'operació següent que inclou Booleans:

+ +
bCondition1 && (bCondition2 || bCondition3)
+ +

sempre és igual a:

+ +
!(!bCondition1 || !bCondition2 && !bCondition3)
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
1a edició de ECMAScript.EstàndardDefinició inicial.
{{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')}} 
+ +

Compatibilitat amb navegadors

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
AND lògic (&&){{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
OR lògic (||){{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
NOT lògic (!){{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
AND lògic (&&){{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
OR lògic (||){{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
NOT lògic (!){{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

Compatibilitat amb versions anteriors: Comportament a JavaScript 1.0 i 1.1

+ +

Els operadors && i || es comporten de la forma següent:

+ + + + + + + + + + + + + + + + + + + +
OperadorÚsComportament
&&expr1 && expr2Si el primer operand (expr1) es pot converitr a false, l'operador && retorna false en comptes del valor de expr1.
||expr1 || expr2Si el primer operand (expr1) es pot converitr a true, l'operador || retorna true en comptes del valor de expr1.
+ +

Vegeu també

+ + diff --git a/files/ca/firefox_2_per_a_desenvolupadors/index.html b/files/ca/firefox_2_per_a_desenvolupadors/index.html deleted file mode 100644 index 911a4004f5..0000000000 --- a/files/ca/firefox_2_per_a_desenvolupadors/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: Firefox 2 per a desenvolupadors -slug: Firefox_2_per_a_desenvolupadors -translation_of: Mozilla/Firefox/Releases/2 ---- -

Noves característiques de desenvolupament en el Firefox 2

-

El Firefox 2 introdueix un gran nombre de noves funcionalitats i possibilitats. Aquest article us proporciona tot un seguit d'articles que cobreixen aquestes noves característiques.

-

Per a desenvolupadors de llocs web i d'aplicacions

-
Microsumaris (en anglès)
Els microsumaris són breus compilacions del contingut més important de certes pàgines web que s'actualitzen regularment. Els desenvolupadors del lloc web o de terceres aplicacions poden proporcionar-los. Els usuaris poden llavors triar mostrar microsumaris en comptes de títols estàtics en afegir les pàgines a les adreces d'interès juntament amb microsumaris.
-
-
Creació d'un microsumari
Un programa d'aprenentatge per a la creació d'un generador de microsumaris.
-
-
Creació de connectors MozSearch
El Firefox 2 implementa MozSearch, un format de connector de cerca basat en OpenSearch.
-
-
Implementació de suggeriments en els connectors de cerca
Com fer que el vostre connector MozSearch pugui incorporar suggeriments de cerca, que apareixen en forma de desplegable quan teclegeu en la barra de cerca.
-
-
Novetats en JavaScript 1.7 (en anglès)
El Firefox 2 pot utilitzar JavaScript 1.7, que inclou noves característiques com ara let, assignació destructurada, generadors i iteradors, i comprensions de matrius.
-
-
Sessions i emmagatzemament persistent visual (WHATWG) des del client (en anglès)
-
-

XXX maybe find some more attractive description

-
Es permet a les aplicacions web emmagatzemar dades estructurades des del client.
-
-
SVG en el Firefox (en anglès)
El Firefox 2 millora l'ús dels «gràfics vectorials escalables» (SVG), implementant-s'hi l'element <textPath> com també altres atributs que no ho estaven anteriorment.
-
-

Per a desenvolupadors de XUL i extensions

-
API de restauració de sessions (anglès)
Elements que es desaran i restauraran entre sessions del Firefox.
-
-
API d'accés al contingut del canal
API en revisió. Més informació aviat.
-
-
Ús de SAX (anglès)
API d'anàlisi d'XML basada en esdeveniments.
-
-
Addició de motors de cerca a les pàgines web
Codi de JavaScript que descriu al Firefox com instaŀlar un connector d'un nou motor de cerca. Aquest pot escriure's en format Sherlock or OpenSearch.
-
-
Addició de proveïdors de dades de protecció davant la pesca electrònica (anglès)
Pot millorar-se la protecció del Firefox davant la pesca electrònica afegint dades addicionals de proveïdors i fer així una navegació més segura.
-
-
Emmagatzemament (anglès)
El Firefox 2 introdueix mozStorage, una arquitectura de base de dades basada en sqlite.
-
-

Noves característiques per als usuaris finals

-

Experiència d'usuari

- -

Seguretat i privadesa

- -

{{ languages( { "en": "en/Firefox_2_for_developers", "fr": "fr/Firefox_2_pour_les_d\u00e9veloppeurs", "it": "it/Firefox_2_per_Sviluppatori", "ja": "ja/Firefox_2_for_developers", "pt": "pt/Firefox_2_para_desenvolvedores", "pl": "pl/Firefox_2_dla_programist\u00f3w" } ) }}

diff --git "a/files/ca/glossary/adre\303\247a_ip/index.html" "b/files/ca/glossary/adre\303\247a_ip/index.html" deleted file mode 100644 index 8e855d55ac..0000000000 --- "a/files/ca/glossary/adre\303\247a_ip/index.html" +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: adreça IP (IP address) -slug: Glossary/adreça_IP -tags: - - Beginner - - Glossary - - Infrastructure - - Web -translation_of: Glossary/IP_Address ---- -

Una adreça IP (IP address) és un nombre assignat a cada dispositiu connectat a una xarxa que utilitza el protocol d'Internet.

- -

"Adreça IP" normalment encara es refereix a les adreces IPv4 de 32 bits fins que IPv6 s'implementi de manera més àmplia.

- -

Aprèn més

- -

Coneixement general

- - diff --git a/files/ca/glossary/atribut/index.html b/files/ca/glossary/atribut/index.html deleted file mode 100644 index 8cb4795ca4..0000000000 --- a/files/ca/glossary/atribut/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Atribut -slug: Glossary/Atribut -tags: - - CodingScripting - - Glossary - - HTML -translation_of: Glossary/Attribute ---- -

Un atribut estén una {{Glossary("etiqueta")}}, canviant el comportament de l'etiqueta o proporcionant metadades. Un atribut té sempre la forma nom = valor (donant l'identificador de l'atribut i el valor associat a l'atribut).

- -

Aprèn més

- -

Referència tècnica

- - diff --git a/files/ca/glossary/attribute/index.html b/files/ca/glossary/attribute/index.html new file mode 100644 index 0000000000..8cb4795ca4 --- /dev/null +++ b/files/ca/glossary/attribute/index.html @@ -0,0 +1,19 @@ +--- +title: Atribut +slug: Glossary/Atribut +tags: + - CodingScripting + - Glossary + - HTML +translation_of: Glossary/Attribute +--- +

Un atribut estén una {{Glossary("etiqueta")}}, canviant el comportament de l'etiqueta o proporcionant metadades. Un atribut té sempre la forma nom = valor (donant l'identificador de l'atribut i el valor associat a l'atribut).

+ +

Aprèn més

+ +

Referència tècnica

+ + diff --git a/files/ca/glossary/browser/index.html b/files/ca/glossary/browser/index.html new file mode 100644 index 0000000000..c3280d723b --- /dev/null +++ b/files/ca/glossary/browser/index.html @@ -0,0 +1,27 @@ +--- +title: Navegador +slug: Glossary/Navegador +tags: + - Glossary + - Navigation +translation_of: Glossary/Browser +--- +

Un navegador web és un programa que recupera i mostra les pàgines de la {{Glossary("World Wide Web","Web")}}, i permet als usuaris accedir a més pàgines a través {{Glossary("hyperlink","hipervincles")}}.

+ +

Aprèn més

+ +

Coneixement general

+ + + +

Descarregar un navegador

+ + diff --git "a/files/ca/glossary/car\303\240cter/index.html" "b/files/ca/glossary/car\303\240cter/index.html" deleted file mode 100644 index 4c887673a2..0000000000 --- "a/files/ca/glossary/car\303\240cter/index.html" +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: Caràcter -slug: Glossary/Caràcter -tags: - - CodingScripting - - Glossary - - strings -translation_of: Glossary/Character ---- -

Un caràcter és o bé un símbol (lletres, nombres, puntuació) o "control" no imprès (per exemple, retorn de carro o guió suau). {{Glossary("UTF-8")}} és el conjunt de caràcters més comuna i inclou els grafemes dels idiomes humans més populars.

- -

Aprèn més

- -

Coneixement general

- - diff --git a/files/ca/glossary/character/index.html b/files/ca/glossary/character/index.html new file mode 100644 index 0000000000..4c887673a2 --- /dev/null +++ b/files/ca/glossary/character/index.html @@ -0,0 +1,22 @@ +--- +title: Caràcter +slug: Glossary/Caràcter +tags: + - CodingScripting + - Glossary + - strings +translation_of: Glossary/Character +--- +

Un caràcter és o bé un símbol (lletres, nombres, puntuació) o "control" no imprès (per exemple, retorn de carro o guió suau). {{Glossary("UTF-8")}} és el conjunt de caràcters més comuna i inclou els grafemes dels idiomes humans més populars.

+ +

Aprèn més

+ +

Coneixement general

+ + diff --git a/files/ca/glossary/character_encoding/index.html b/files/ca/glossary/character_encoding/index.html new file mode 100644 index 0000000000..40179b5e89 --- /dev/null +++ b/files/ca/glossary/character_encoding/index.html @@ -0,0 +1,26 @@ +--- +title: Codificació de caràcters +slug: Glossary/Codificació_de_caràcters +tags: + - Composing + - Glossary +translation_of: Glossary/character_encoding +--- +

La codificació de caràcters proporciona un sistema de codificació dels caràcters específics en els diferents idiomes, per permetre que tots ells existeixen i poguin ser manejats consistentment en un sistema informàtic o entorn de programació.

+ +

Per exemple, en HTML declarem normalment una codificació de caràcters UTF-8, mitjançant la següent línia:

+ +
+
<meta charset="utf-8">
+ +

Això assegura que poden utilitzar caràcters de gairebé qualsevol llenguatge humà en el nostre document HTML, i ser mostrats de manera fiable.

+
+ +

Aprèn més

+ +

Coneixement general

+ + diff --git "a/files/ca/glossary/codificaci\303\263_de_car\303\240cters/index.html" "b/files/ca/glossary/codificaci\303\263_de_car\303\240cters/index.html" deleted file mode 100644 index 40179b5e89..0000000000 --- "a/files/ca/glossary/codificaci\303\263_de_car\303\240cters/index.html" +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: Codificació de caràcters -slug: Glossary/Codificació_de_caràcters -tags: - - Composing - - Glossary -translation_of: Glossary/character_encoding ---- -

La codificació de caràcters proporciona un sistema de codificació dels caràcters específics en els diferents idiomes, per permetre que tots ells existeixen i poguin ser manejats consistentment en un sistema informàtic o entorn de programació.

- -

Per exemple, en HTML declarem normalment una codificació de caràcters UTF-8, mitjançant la següent línia:

- -
-
<meta charset="utf-8">
- -

Això assegura que poden utilitzar caràcters de gairebé qualsevol llenguatge humà en el nostre document HTML, i ser mostrats de manera fiable.

-
- -

Aprèn més

- -

Coneixement general

- - diff --git a/files/ca/glossary/etiqueta/index.html b/files/ca/glossary/etiqueta/index.html deleted file mode 100644 index e52b3f29a2..0000000000 --- a/files/ca/glossary/etiqueta/index.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: Etiqueta -slug: Glossary/Etiqueta -tags: - - CodingScripting - - Glossary - - HTML - - Intro -translation_of: Glossary/Tag ---- -

En {{Glossary("HTML")}} una etiqueta s'utilitza per a la creació d'un {{Glossary("element")}}. El nom d'un element HTML és el nom usat en parèntesis angulars, com <p> per al paràgraf. Recordeu que el nom de l'etiqueta final és precedit per un caràcter de barra, "</p>", i que en els elements buits l'etiqueta final no és necessària ni permesa. Si els atributs no s'esmenten, els valors per omissió s'utilitzen en cada cas.

- -

Aprèn més

- -

Coneixement general

- - - -

Referència tècnica

- - - -

 

- -

 

diff --git "a/files/ca/glossary/funci\303\263/index.html" "b/files/ca/glossary/funci\303\263/index.html" deleted file mode 100644 index d022b3196b..0000000000 --- "a/files/ca/glossary/funci\303\263/index.html" +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: Funció -slug: Glossary/Funció -tags: - - CodingScripting - - Glossary - - IIFE - - Immediately Invoked Function Expressions (IIFE) - - JavaScript -translation_of: Glossary/Function ---- -

Una funció és un fragment de codi que pot ser cridat per altres codis o per si mateix, o una {{Glossary("variable")}} que fa referència a la funció. Quan una funció es cridada, es passan {{Glossary("argument", "arguments")}} a la funció com a entrada, i opcionalment la funció pot retornar una sortida. Una funció de {{glossary("JavaScript")}} és també un {{glossary("objecte")}}.

- -

Un nom de funció és un {{Glossary("identificador")}} definit com a part d'una declaració de la funció o expressió de funció. El {{Glossary("àmbit")}} del nom de la funció depèn de si el nom de la funció és una declaració o expressió.

- -

Diferents tipus de funcions

- -

Una funció anònimaés una funció sense un nom de funció:

- -
function () {}
- -

Una funció nomenada és una funció amb un nom de funció:

- -
function foo() {}
- -

Una funció interna és una funció dins d'una altra funció (square en aquest cas). Una funció externa és una funció que conté una funció (addSquares en aquest cas):

- -
function addSquares(a,b) {
-   function square(x) {
-      return x * x;
-   }
-   return square(a) + square(b);
-}
- -

Una funció recursiva és una funció que es crida a si mateixa. Veure {{Glossary("Recursion","recursivitat")}}..

- -
function loop(x) {
-   if (x >= 10)
-      return;
-   loop(x + 1);
-}
-
-
- -

Un Immediately Invoked Function Expressions (IIFE) és una funció que es crida directament després de que  la funció es carregui en el compilador del navegador. La manera d'identificar un IIFE és mitjançant la localització dels parèntesis extra d'esquerra i dreta al final de la declaració de la funció. Hi ha molts avantatges d'aquest tipus d'expressió de funció, però que està fora de l'abast del curs.

- -
// Error (https://en.wikipedia.org/wiki/Immediately-invoked_function_expression)
-/*
-​function foo() {
-    console.log('Hello Foo');
-}();
-*/
-
-(function foo() {
-    console.log("Hello Foo");
-}());
-// Douglas Crockford's style
-
-
-(function food() {
-    console.log("Hello Food");
-})();
-
-
- -

Si voleu saber més sobre IIFEs, feu un cop d'ull a la següent pàgina a la Wikipedia: Immediately Invoked Function Expression

- -

Aprèn més

- -

Referència tècnica

- - diff --git a/files/ca/glossary/function/index.html b/files/ca/glossary/function/index.html new file mode 100644 index 0000000000..d022b3196b --- /dev/null +++ b/files/ca/glossary/function/index.html @@ -0,0 +1,74 @@ +--- +title: Funció +slug: Glossary/Funció +tags: + - CodingScripting + - Glossary + - IIFE + - Immediately Invoked Function Expressions (IIFE) + - JavaScript +translation_of: Glossary/Function +--- +

Una funció és un fragment de codi que pot ser cridat per altres codis o per si mateix, o una {{Glossary("variable")}} que fa referència a la funció. Quan una funció es cridada, es passan {{Glossary("argument", "arguments")}} a la funció com a entrada, i opcionalment la funció pot retornar una sortida. Una funció de {{glossary("JavaScript")}} és també un {{glossary("objecte")}}.

+ +

Un nom de funció és un {{Glossary("identificador")}} definit com a part d'una declaració de la funció o expressió de funció. El {{Glossary("àmbit")}} del nom de la funció depèn de si el nom de la funció és una declaració o expressió.

+ +

Diferents tipus de funcions

+ +

Una funció anònimaés una funció sense un nom de funció:

+ +
function () {}
+ +

Una funció nomenada és una funció amb un nom de funció:

+ +
function foo() {}
+ +

Una funció interna és una funció dins d'una altra funció (square en aquest cas). Una funció externa és una funció que conté una funció (addSquares en aquest cas):

+ +
function addSquares(a,b) {
+   function square(x) {
+      return x * x;
+   }
+   return square(a) + square(b);
+}
+ +

Una funció recursiva és una funció que es crida a si mateixa. Veure {{Glossary("Recursion","recursivitat")}}..

+ +
function loop(x) {
+   if (x >= 10)
+      return;
+   loop(x + 1);
+}
+
+
+ +

Un Immediately Invoked Function Expressions (IIFE) és una funció que es crida directament després de que  la funció es carregui en el compilador del navegador. La manera d'identificar un IIFE és mitjançant la localització dels parèntesis extra d'esquerra i dreta al final de la declaració de la funció. Hi ha molts avantatges d'aquest tipus d'expressió de funció, però que està fora de l'abast del curs.

+ +
// Error (https://en.wikipedia.org/wiki/Immediately-invoked_function_expression)
+/*
+​function foo() {
+    console.log('Hello Foo');
+}();
+*/
+
+(function foo() {
+    console.log("Hello Foo");
+}());
+// Douglas Crockford's style
+
+
+(function food() {
+    console.log("Hello Food");
+})();
+
+
+ +

Si voleu saber més sobre IIFEs, feu un cop d'ull a la següent pàgina a la Wikipedia: Immediately Invoked Function Expression

+ +

Aprèn més

+ +

Referència tècnica

+ + diff --git a/files/ca/glossary/ip_address/index.html b/files/ca/glossary/ip_address/index.html new file mode 100644 index 0000000000..8e855d55ac --- /dev/null +++ b/files/ca/glossary/ip_address/index.html @@ -0,0 +1,21 @@ +--- +title: adreça IP (IP address) +slug: Glossary/adreça_IP +tags: + - Beginner + - Glossary + - Infrastructure + - Web +translation_of: Glossary/IP_Address +--- +

Una adreça IP (IP address) és un nombre assignat a cada dispositiu connectat a una xarxa que utilitza el protocol d'Internet.

+ +

"Adreça IP" normalment encara es refereix a les adreces IPv4 de 32 bits fins que IPv6 s'implementi de manera més àmplia.

+ +

Aprèn més

+ +

Coneixement general

+ + diff --git a/files/ca/glossary/method/index.html b/files/ca/glossary/method/index.html new file mode 100644 index 0000000000..65838733f8 --- /dev/null +++ b/files/ca/glossary/method/index.html @@ -0,0 +1,29 @@ +--- +title: Mètode +slug: Glossary/Mètode +tags: + - CodingScripting + - Glossary + - JavaScript +translation_of: Glossary/Method +--- +

Un mètode és una {{glossary("funció")}} que és {{glossary("propietat")}} d'un {{glossary("objecte")}}. Existeixen dos tipus de mètodes: Mètode Instància que estan incorporades en les tasques dutes a terme per una instància d'objecte, o Mètodes Estàtics que són tasques que es poden realitzar sense necessitat d'una instància d'objecte.

+ +
+

Nota: En JavaScript les funcion són en si objectes, de manera que, en aquest context, un mètode és en realitat un {{glossary("referència d'objecte")}} per a una funció.

+
+ +

Aprèn més

+ +

Aprendre sobre

+ + + +

Referència tècnica

+ + diff --git "a/files/ca/glossary/m\303\250tode/index.html" "b/files/ca/glossary/m\303\250tode/index.html" deleted file mode 100644 index 65838733f8..0000000000 --- "a/files/ca/glossary/m\303\250tode/index.html" +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: Mètode -slug: Glossary/Mètode -tags: - - CodingScripting - - Glossary - - JavaScript -translation_of: Glossary/Method ---- -

Un mètode és una {{glossary("funció")}} que és {{glossary("propietat")}} d'un {{glossary("objecte")}}. Existeixen dos tipus de mètodes: Mètode Instància que estan incorporades en les tasques dutes a terme per una instància d'objecte, o Mètodes Estàtics que són tasques que es poden realitzar sense necessitat d'una instància d'objecte.

- -
-

Nota: En JavaScript les funcion són en si objectes, de manera que, en aquest context, un mètode és en realitat un {{glossary("referència d'objecte")}} per a una funció.

-
- -

Aprèn més

- -

Aprendre sobre

- - - -

Referència tècnica

- - diff --git a/files/ca/glossary/navegador/index.html b/files/ca/glossary/navegador/index.html deleted file mode 100644 index c3280d723b..0000000000 --- a/files/ca/glossary/navegador/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: Navegador -slug: Glossary/Navegador -tags: - - Glossary - - Navigation -translation_of: Glossary/Browser ---- -

Un navegador web és un programa que recupera i mostra les pàgines de la {{Glossary("World Wide Web","Web")}}, i permet als usuaris accedir a més pàgines a través {{Glossary("hyperlink","hipervincles")}}.

- -

Aprèn més

- -

Coneixement general

- - - -

Descarregar un navegador

- - diff --git a/files/ca/glossary/object/index.html b/files/ca/glossary/object/index.html new file mode 100644 index 0000000000..2688a42fed --- /dev/null +++ b/files/ca/glossary/object/index.html @@ -0,0 +1,21 @@ +--- +title: Objecte +slug: Glossary/Objecte +tags: + - CodingScripting + - Glossary + - Intro + - Object +translation_of: Glossary/Object +--- +

Objecte, es refereix a una estructura de dades que conté dades i instruccions per treballar amb les dades. Els objectes a vegades es refereixen a les coses del món real, per exemple, un objecte cotxe o mapa en un joc de carreres. {{glossary("JavaScript")}}, Java, C ++, Python i Ruby són exemples de llenguatges de {{glossary("OOP", "programació orientada a objectes")}}.

+ +

Aprèn més

+ +

Coneixement general

+ + diff --git a/files/ca/glossary/object_reference/index.html b/files/ca/glossary/object_reference/index.html new file mode 100644 index 0000000000..1eca91862d --- /dev/null +++ b/files/ca/glossary/object_reference/index.html @@ -0,0 +1,19 @@ +--- +title: Referències a objectes +slug: Glossary/referències_a_objectes +tags: + - CodingScripting + - Glossary +translation_of: Glossary/Object_reference +--- +

Un enllaç a un {{glossary("objecte")}}. Les referències a objectes poden usar-se exactament igual que els objectes vinculats.

+ +

El concepte de referències a objectes es fa evident quan s'assigna el mateix objecte a més d'una {{glossary("propietat")}}. En lloc de mantenir una còpia de l'objecte, cada propietat assignada conté referències d'objectes que enllacen amb el mateix objecte, de manera que quan l'objecte canvia totes les propietats referents a l'objecte reflecteixen el canvi.

+ +

Aprèn més

+ +

Coneixement general

+ + diff --git a/files/ca/glossary/objecte/index.html b/files/ca/glossary/objecte/index.html deleted file mode 100644 index 2688a42fed..0000000000 --- a/files/ca/glossary/objecte/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Objecte -slug: Glossary/Objecte -tags: - - CodingScripting - - Glossary - - Intro - - Object -translation_of: Glossary/Object ---- -

Objecte, es refereix a una estructura de dades que conté dades i instruccions per treballar amb les dades. Els objectes a vegades es refereixen a les coses del món real, per exemple, un objecte cotxe o mapa en un joc de carreres. {{glossary("JavaScript")}}, Java, C ++, Python i Ruby són exemples de llenguatges de {{glossary("OOP", "programació orientada a objectes")}}.

- -

Aprèn més

- -

Coneixement general

- - diff --git a/files/ca/glossary/primitiu/index.html b/files/ca/glossary/primitiu/index.html deleted file mode 100644 index c0e1cd1ff3..0000000000 --- a/files/ca/glossary/primitiu/index.html +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: Primitiu -slug: Glossary/Primitiu -tags: - - CodingScripting - - Glossary - - JavaScript -translation_of: Glossary/Primitive ---- -

Un primitiu (valor primitiu, tipus de dades primitiu) és una dada que no és un {{Glossary("objecte")}} i no té {{glossary("method","mètodes")}}. En {{Glossary("JavaScript")}}, hi ha 6 tipus de dades primitius: {{Glossary("string")}}, {{Glossary("number")}}, {{Glossary("boolean")}}, {{Glossary("null")}}, {{Glossary("undefined")}}, {{Glossary("symbol")}} (nou en {{Glossary("ECMAScript")}} 2015).

- -

La majoria del temps, un valor primitiu es representa directament en el nivell més baix de la implementació del llenguatge.

- -

Tots els primitius són immutables (no es poden canviar)

- -

Contenidors d'objectes primitius en Javascript

- -

A excepció de null i undefined, tots els valors primitius tenen objectes equivalents que s'emboliquen al voltant dels valors primitius:

- - - -

L'embolcall del mètode valueOf() retorna un valor primitiu.

- -

Aprèn més

- -

Coneixement general

- - diff --git a/files/ca/glossary/primitive/index.html b/files/ca/glossary/primitive/index.html new file mode 100644 index 0000000000..c0e1cd1ff3 --- /dev/null +++ b/files/ca/glossary/primitive/index.html @@ -0,0 +1,36 @@ +--- +title: Primitiu +slug: Glossary/Primitiu +tags: + - CodingScripting + - Glossary + - JavaScript +translation_of: Glossary/Primitive +--- +

Un primitiu (valor primitiu, tipus de dades primitiu) és una dada que no és un {{Glossary("objecte")}} i no té {{glossary("method","mètodes")}}. En {{Glossary("JavaScript")}}, hi ha 6 tipus de dades primitius: {{Glossary("string")}}, {{Glossary("number")}}, {{Glossary("boolean")}}, {{Glossary("null")}}, {{Glossary("undefined")}}, {{Glossary("symbol")}} (nou en {{Glossary("ECMAScript")}} 2015).

+ +

La majoria del temps, un valor primitiu es representa directament en el nivell més baix de la implementació del llenguatge.

+ +

Tots els primitius són immutables (no es poden canviar)

+ +

Contenidors d'objectes primitius en Javascript

+ +

A excepció de null i undefined, tots els valors primitius tenen objectes equivalents que s'emboliquen al voltant dels valors primitius:

+ + + +

L'embolcall del mètode valueOf() retorna un valor primitiu.

+ +

Aprèn més

+ +

Coneixement general

+ + diff --git a/files/ca/glossary/property/index.html b/files/ca/glossary/property/index.html new file mode 100644 index 0000000000..a6b0970dd6 --- /dev/null +++ b/files/ca/glossary/property/index.html @@ -0,0 +1,17 @@ +--- +title: Propietat +slug: Glossary/Propietat +tags: + - Disambiguation + - Glossary +translation_of: Glossary/property +--- +

El terme propietat pot tenir diversos significats, depenent del context. Es pot fer referència a:

+ +

Propietat (CSS)
+      Una propietat CSS és una característica (com el color), el valor associat defineix un aspecte de com el navegador mostrarà el element.

+ +

Propietat (JavaScript)
+      Una propietat és una característica d'un objecte, sovint descriu atributs associats amb una estructura de dades. Existeix per a tipus de propietats: una propietat d'instància que conté les dades específiques d'una instància d'objecte determinat, o una propietat estàtica que manté les dades compartides entre totes les instàncies d'objectes.

+ +

{{GlossaryDisambiguation}}

diff --git a/files/ca/glossary/propietat/index.html b/files/ca/glossary/propietat/index.html deleted file mode 100644 index a6b0970dd6..0000000000 --- a/files/ca/glossary/propietat/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Propietat -slug: Glossary/Propietat -tags: - - Disambiguation - - Glossary -translation_of: Glossary/property ---- -

El terme propietat pot tenir diversos significats, depenent del context. Es pot fer referència a:

- -

Propietat (CSS)
-      Una propietat CSS és una característica (com el color), el valor associat defineix un aspecte de com el navegador mostrarà el element.

- -

Propietat (JavaScript)
-      Una propietat és una característica d'un objecte, sovint descriu atributs associats amb una estructura de dades. Existeix per a tipus de propietats: una propietat d'instància que conté les dades específiques d'una instància d'objecte determinat, o una propietat estàtica que manté les dades compartides entre totes les instàncies d'objectes.

- -

{{GlossaryDisambiguation}}

diff --git "a/files/ca/glossary/refer\303\250ncies_a_objectes/index.html" "b/files/ca/glossary/refer\303\250ncies_a_objectes/index.html" deleted file mode 100644 index 1eca91862d..0000000000 --- "a/files/ca/glossary/refer\303\250ncies_a_objectes/index.html" +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Referències a objectes -slug: Glossary/referències_a_objectes -tags: - - CodingScripting - - Glossary -translation_of: Glossary/Object_reference ---- -

Un enllaç a un {{glossary("objecte")}}. Les referències a objectes poden usar-se exactament igual que els objectes vinculats.

- -

El concepte de referències a objectes es fa evident quan s'assigna el mateix objecte a més d'una {{glossary("propietat")}}. En lloc de mantenir una còpia de l'objecte, cada propietat assignada conté referències d'objectes que enllacen amb el mateix objecte, de manera que quan l'objecte canvia totes les propietats referents a l'objecte reflecteixen el canvi.

- -

Aprèn més

- -

Coneixement general

- - diff --git a/files/ca/glossary/scope/index.html b/files/ca/glossary/scope/index.html new file mode 100644 index 0000000000..10707ada0b --- /dev/null +++ b/files/ca/glossary/scope/index.html @@ -0,0 +1,19 @@ +--- +title: Àmbit +slug: Glossary/Àmbit +tags: + - CodingScripting + - Glossary +translation_of: Glossary/Scope +--- +

El context actual d'{{glossary("execute","execució")}}. El context en el qual {{glossary("value","valors")}} i expressions són "visibles", o poden ser referenciats. Si una {{glossary("variable")}} o una altra expressió no és "en l'àmbit actual", llavors no està disponible per al seu ús. Els àmbits també es poden superposar en una jerarquia, de manera que els àmbits fills tinguin accés als àmbits dels pares, però no viceversa.

+ +

Un {{glossary("function")}} serveix com un tancament en {{glossary("JavaScript")}}, i per tant crea un àmbit, de manera que (per exemple) una variable definida exclusivament dins de la funció no es pot accedir des fora de la funció o dins d'altres funcions.

+ +

Aprèn més

+ +

Coneixement general

+ + diff --git a/files/ca/glossary/server/index.html b/files/ca/glossary/server/index.html new file mode 100644 index 0000000000..cda9e7c3ea --- /dev/null +++ b/files/ca/glossary/server/index.html @@ -0,0 +1,25 @@ +--- +title: Servidor +slug: Glossary/Servidor +tags: + - Glossary + - Infrastructure + - Networking + - Protocol + - Server +translation_of: Glossary/Server +--- +

Un servidor de maquinari és un equip compartit en una xarxa que proporciona serveis a clients. Un servidor de programari és un programa que proporciona serveis als programes de client.

+ +

Els serveis es proporcionen generalment a través de xarxes d'àrea local o xarxes d'àrea àmplia. Tradicionalment, un programa client i un programa de servidor es connecten en passar missatges codificats usant un {{glossary("protocol")}}.

+ +

Els servidors més comuns en una xarxa d'àrea local són servidors d'arxiu, nom, correu electrònic, impressió i fax. Un altre exemple comú d'un servidor és un servidor web connectat a Internet. Els miniordinadors, ordinadors centrals, i super ordinadors en els centres de dades, són també servidors.

+ +

Aprèn més

+ +

Coneixement general

+ + diff --git a/files/ca/glossary/servidor/index.html b/files/ca/glossary/servidor/index.html deleted file mode 100644 index cda9e7c3ea..0000000000 --- a/files/ca/glossary/servidor/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: Servidor -slug: Glossary/Servidor -tags: - - Glossary - - Infrastructure - - Networking - - Protocol - - Server -translation_of: Glossary/Server ---- -

Un servidor de maquinari és un equip compartit en una xarxa que proporciona serveis a clients. Un servidor de programari és un programa que proporciona serveis als programes de client.

- -

Els serveis es proporcionen generalment a través de xarxes d'àrea local o xarxes d'àrea àmplia. Tradicionalment, un programa client i un programa de servidor es connecten en passar missatges codificats usant un {{glossary("protocol")}}.

- -

Els servidors més comuns en una xarxa d'àrea local són servidors d'arxiu, nom, correu electrònic, impressió i fax. Un altre exemple comú d'un servidor és un servidor web connectat a Internet. Els miniordinadors, ordinadors centrals, i super ordinadors en els centres de dades, són també servidors.

- -

Aprèn més

- -

Coneixement general

- - diff --git a/files/ca/glossary/speculative_parsing/index.html b/files/ca/glossary/speculative_parsing/index.html new file mode 100644 index 0000000000..df48dec4e3 --- /dev/null +++ b/files/ca/glossary/speculative_parsing/index.html @@ -0,0 +1,29 @@ +--- +title: Optimizing your pages for speculative parsing +slug: Web/HTML/Optimizing_your_pages_for_speculative_parsing +translation_of: Glossary/speculative_parsing +--- +

Tradicionalment en els navegadors, el analitzador sintàctic d'HTML s'executa en el fil principal i s'ha bloquejat després d'una etiqueta </script> fins que l'script s'ha recuperat de la xarxa i s'executat. El analitzador sintàctic d'HTML en Firefox 4 i versions posteriors dóna suport a l'anàlisi especulativa fora del fil principal. A continuació s'analitza mentre que els scripts estan sent descarregats i s'executen. Com en Firefox 3.5 i 3.6, l'analitzador sintàctic d'HTML comença càrregues especulatives per als scripts, fulles d'estil i imatges que troba per davant en la seqüència. No obstant això, en Firefox 4 i posterior l'analitzador sintàctic d'HTML també executa l'algorisme de construcció de l'arbre HTML especulativament. L'avantatge és que quan una especulació té èxit, no hi ha necessitat de reanàlisi de la part de l'arxiu d'entrada ja que va ser analitzat a la recerca de scripts, fulls d'estil i imatges. L'inconvenient és que hi ha més feina perduda quan l'especulació falla.

+ +

Aquest document pot ajudar evitar que aquest tipus de coses que fan que l'especulació falli i alenteixen la càrrega de la pàgina.

+ +

Fent càrregues especulatives successives

+ +

Només hi ha una regla per fer càrregues especulatives de scripts vinculats, fulls d'estil i imatges successives:

+ + + +

Evitant perdre la sortida del constructor d'arbre

+ +

El constructor d'arbre especulatiu falla quan document.write() canvia l'estat del constructor d'arbre, de tal manera que l'estat especulatiu després de la etiqueta </script>  ja no se sosté quan ha estat analitzat tot el contingut inserit per document.write(). No obstant això, només els usos inusuals de document.write() causen problemes. Aquestes són les coses que cal evitar:

+ + diff --git a/files/ca/glossary/tag/index.html b/files/ca/glossary/tag/index.html new file mode 100644 index 0000000000..e52b3f29a2 --- /dev/null +++ b/files/ca/glossary/tag/index.html @@ -0,0 +1,30 @@ +--- +title: Etiqueta +slug: Glossary/Etiqueta +tags: + - CodingScripting + - Glossary + - HTML + - Intro +translation_of: Glossary/Tag +--- +

En {{Glossary("HTML")}} una etiqueta s'utilitza per a la creació d'un {{Glossary("element")}}. El nom d'un element HTML és el nom usat en parèntesis angulars, com <p> per al paràgraf. Recordeu que el nom de l'etiqueta final és precedit per un caràcter de barra, "</p>", i que en els elements buits l'etiqueta final no és necessària ni permesa. Si els atributs no s'esmenten, els valors per omissió s'utilitzen en cada cas.

+ +

Aprèn més

+ +

Coneixement general

+ + + +

Referència tècnica

+ + + +

 

+ +

 

diff --git a/files/ca/glossary/valor/index.html b/files/ca/glossary/valor/index.html deleted file mode 100644 index 972fd4303d..0000000000 --- a/files/ca/glossary/valor/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: Valor -slug: Glossary/Valor -tags: - - CodingScripting - - Glossary - - NeedsContent -translation_of: Glossary/Value ---- -

En el context de les dades o un {{Glossary("Wrapper","contenidor")}} d'objectes al voltant d'aquestes dades, el valor és el {{Glossary("Primitive", "valor primitiu")}} que conté el contenidor d'objectes. En el context d'una {{Glossary("Variable","variable")}} or {{Glossary("Property","propietat")}}, el valor pot ser una primitiva o una {{Glossary("Object reference","referència d'objecte")}}.

- -

Aprèn més

- -

Coneixement general

- - diff --git a/files/ca/glossary/value/index.html b/files/ca/glossary/value/index.html new file mode 100644 index 0000000000..972fd4303d --- /dev/null +++ b/files/ca/glossary/value/index.html @@ -0,0 +1,18 @@ +--- +title: Valor +slug: Glossary/Valor +tags: + - CodingScripting + - Glossary + - NeedsContent +translation_of: Glossary/Value +--- +

En el context de les dades o un {{Glossary("Wrapper","contenidor")}} d'objectes al voltant d'aquestes dades, el valor és el {{Glossary("Primitive", "valor primitiu")}} que conté el contenidor d'objectes. En el context d'una {{Glossary("Variable","variable")}} or {{Glossary("Property","propietat")}}, el valor pot ser una primitiva o una {{Glossary("Object reference","referència d'objecte")}}.

+ +

Aprèn més

+ +

Coneixement general

+ + diff --git "a/files/ca/glossary/\303\240mbit/index.html" "b/files/ca/glossary/\303\240mbit/index.html" deleted file mode 100644 index 10707ada0b..0000000000 --- "a/files/ca/glossary/\303\240mbit/index.html" +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Àmbit -slug: Glossary/Àmbit -tags: - - CodingScripting - - Glossary -translation_of: Glossary/Scope ---- -

El context actual d'{{glossary("execute","execució")}}. El context en el qual {{glossary("value","valors")}} i expressions són "visibles", o poden ser referenciats. Si una {{glossary("variable")}} o una altra expressió no és "en l'àmbit actual", llavors no està disponible per al seu ús. Els àmbits també es poden superposar en una jerarquia, de manera que els àmbits fills tinguin accés als àmbits dels pares, però no viceversa.

- -

Un {{glossary("function")}} serveix com un tancament en {{glossary("JavaScript")}}, i per tant crea un àmbit, de manera que (per exemple) una variable definida exclusivament dins de la funció no es pot accedir des fora de la funció o dins d'altres funcions.

- -

Aprèn més

- -

Coneixement general

- - diff --git a/files/ca/learn/accessibility/que_es_accessibilitat/index.html b/files/ca/learn/accessibility/que_es_accessibilitat/index.html deleted file mode 100644 index 6d8891a20c..0000000000 --- a/files/ca/learn/accessibility/que_es_accessibilitat/index.html +++ /dev/null @@ -1,211 +0,0 @@ ---- -title: Què és l'accessibilitat? -slug: Learn/Accessibility/Que_es_accessibilitat -translation_of: Learn/Accessibility/What_is_accessibility ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/Accessibility/HTML", "Learn/Accessibility")}}
- -

Aquest article inicia el mòdul fent ullada a què és l’accessibilitat: aquesta visió general inclou quins grups de persones hem de considerar i per què, quines eines utilitzen les persones per a interactuar amb el web i com podem fer que l’accessibilitat sigui una part del nostre lloc web.

- - - - - - - - - - - - -
Prerequisits:Coneixements bàsics d'informàtica i nocions bàsiques de com funcionen l'HTML i el CSS.
Objectiu:Adquirir familiaritat amb l’accessibilitat, inclòs què és i com t’afecta com a desenvolupador web.
- -

Què és l'accessibilitat?

- -

L’accessibilitat és la pràctica de fer que els llocs web siguin utilitzables per tantes persones com sigui possible. Tradicionalment pensem que es tracta de persones amb discapacitat, però el fet de fer accessibles els llocs web també beneficia altres grups, com els qui utilitzen dispositius mòbils o els qui tenen connexions de xarxa lentes.

- -

També pots pensar en l’accessibilitat com el fet de tractar igual a tothom i oferir igualtat d’oportunitats, independentment de quines siguin les capacitats o les circumstàncies. De la mateixa manera que no està bé excloure algú d’accedir a un edifici perquè va en cadira de rodes (els edificis públics moderns solen tenir rampes o ascensors per a cadires de rodes), tampoc és correcte excloure d’un lloc web algú que té una discapacitat visual. Tots som diferents, però tots som humans, i tenim els mateixos drets com a humans.

- -

Per això hem de fer les coses accessibles. L’accessibilitat dels llocs web forma part de la legislació d’alguns països, i et pot obrir un mercat significatiu, que d'altra manera no podria utilitzar els teus serveis ni comprar els teus productes.

- -

La construcció de llocs accessibles beneficia a tothom:

- - - -

En quins tipus de discapacitat ens hem de fixar?

- -

Les persones amb discapacitat són igual de diverses que les persones sense discapacitat, i també ho són les discapacitats. La lliçó clau aquí és pensar més enllà de com utilitzes el teu ordinador i el web i començar a aprendre com l'utilitzen els altres, tu no ets els teus usuaris. A continuació s’expliquen els tipus principals de discapacitat que pots tenir en compte i les eines especials que s’utilitzen per a accedir al contingut web (conegudes com a tecnologies d’assistència o AT, d’assistive technologies).

- -
-

Nota: La fitxa informativa sobre discapacitat i salut de l'Organització Mundial de la Salut estableix que «Més d'un milió de persones, aproximadament el 15% de la població mundial, tenen algun tipus de discapacitat» i «Entre 110 i 190 milions d'adults tenen dificultats importants de funcionament».

-
- -

Les persones amb discapacitat visual

- -

Les persones amb discapacitat visual inclouen persones amb ceguesa, poca visió i daltonisme. Moltes persones amb deficiències visuals utilitzen lupes de pantalla, que poden ser lupes físiques o les funcions de zoom del programari. La majoria de navegadors i sistemes operatius actuals tenen la capacitat de fer zoom. Alguns usuaris confien en lectors de pantalla, un programari que llegeix el text digital en veu alta. Alguns exemples de lectors de pantalla són:

- - - -

Seria bo que et familiaritzessis amb els lectors de pantalla; també hauries de configurar un lector de pantalla i experimentar-hi per a fer-te una idea de com funciona. Consulta la nostra guia de lectors de pantalla per a proves de compatibilitat creuada entre navegadors per a obtenir més detalls sobre el seu ús. El vídeo següent proporciona un breu exemple de com és l'experiència.

- -

{{EmbedYouTube("IK97XMibEws")}}

- -

En termes estadístics, l'Organització Mundial de la Salut estima que «hi ha al voltant de 285 milions de persones amb deficiències visuals a tot el món: 39 milions són cegues i 246 tenen un nivell de visió baix». (Consulta l’informe sobre Dificultat visual i ceguesa). Es tracta d'una població d’usuaris molt gran i significativa, que no pots deixar escapar perquè el teu lloc web no es codifiqui correctament (parlem de gairebé el mateix nombre de persones que viuen a Estats Units d’Amèrica).

- -

Les persones amb discapacitat auditiva

- -

Altrament conegudes com persones amb deficiències auditives o persones sordes, aquest grup de persones es diferencia per tenir nivells auditius baixos o perquè, directament, no tenen sentit de l’oïda. Les persones amb deficiències auditives utilitzen AT (consulta els Dispositius assistents per a persones amb trastorns de l’audició, la veu, la parla o el llenguatge), però realment no hi ha AT específics per a l’ús d'un ordinador o un lloc web.

- -

Tanmateix, hi ha tècniques específiques que proporcionen alternatives textuals al contingut d'àudio, que van des de transcripcions de text senzilles fins a pistes de text (és a dir, subtítols) que es poden mostrar juntament amb un vídeo. Més endavant, tractarem aquest tema en un article.

- -

Les persones amb discapacitat auditiva també representen una base d’usuaris important. «466 milions de persones a tot el món tenen pèrdua auditiva», diu el full informatiu de l'Organització Mundial de la Salut per a la Sordesa i pèrdua auditiva.

- -

Les persones amb problemes de mobilitat

- -

Aquestes persones tenen discapacitats motrius, que poden ser per problemes purament físics (com la pèrdua de les extremitats o una paràlisi), o per trastorns neurològics/genètics que condueixen a debilitat o pèrdua de control en les extremitats. Algunes persones podrien tenir dificultats per a fer els moviments de mà necessaris per a utilitzar un ratolí, mentre que d’altres poden tenir afectacions més greus, potser una paràlisi significativa, fins al punt que necessitin utilitzar un punter de cap per a interactuar amb els ordinadors.

- -

Aquest tipus de discapacitat també pot ser conseqüència d'una edat avançada, més que d'un traumatisme o una condició específica, o bé de les limitacions del maquinari (pot ser que alguns usuaris no tinguin un ratolí).

- -

La manera en què afecta habitualment el treball del desenvolupador web és en el requisit que els controls siguin accessibles pel teclat; tractarem l’accessibilitat del teclat en articles posteriors del mòdul, però és una bona idea provar d’accedir a alguns llocs web utilitzant només el teclat per veure com te'n surts. Per exemple, pots utilitzar la tecla de tabulació per a desplaçar-te entre els diferents controls d'un formulari web? Pots trobar més detalls sobre els controls de teclat a la nostra secció Prova de compatibilitat creuada entre navegadors Ús original d’accessibilitat des del teclat.

- -

En termes estadístics, un nombre important de persones presenta deficiències de mobilitat. Els centres dels EUA per al control i la prevenció de la discapacitat i el funcionament (adults no institucionalitzats de més de 18 anys) informen que el percentatge d’adults amb dificultats de motricitat física als Estats Units és del 16,1%.

- -

Les persones amb problemes de cognició

- -

El deteriorament cognitiu es refereix a una àmplia gamma de discapacitats, des de persones amb discapacitat intel·lectual que tenen les capacitats més limitades, fins a tots nosaltres, que a mesura que envellim tenim més dificultats per a pensar i recordar. La gamma inclou les persones amb malalties mentals com la depressió i l’esquizofrènia. També inclou persones amb discapacitats d'aprenentatge com la dislèxia o el trastorn d'hiperactivitat i dèficit d'atenció. És important destacar que, tot i que hi ha molta diversitat en les definicions clíniques de deficiències cognitives, les persones que les tenen experimenten un conjunt de problemes funcionals comuns, que inclouen dificultats per comprendre els continguts, recordar com fer tasques, i confusions causades per dissenys de pàgines web incoherents.

- -

Una bona base d’accessibilitat per a persones amb deficiències cognitives inclou:

- - - -

Notes

- - - -

Implementar l'accessibilitat del teu projecte

- -

Un mite comú de l’accessibilitat és que l’accessibilitat és un «cost afegit» a l'hora de crear un projecte. Aquest mite en realitat pot ser cert si:

- - - -

Tanmateix, si consideres l'accessibilitat des del començament d'un projecte, el cost de fer la majoria del contingut accessible hauria de ser mínim.

- -

Quan planifiquis el teu projecte, inclou les proves d’accessibilitat en el teu règim de proves, conjuntament amb les proves per a qualsevol altre segment de públic objectiu important (per exemple, navegadors per a equips d’escriptori o per a dispositius mòbils). Fes les proves tan aviat com et sigui possible i de manera continuada, fes proves automatitzades per a descobrir les quines característiques de programació falten (com ara que falti el text alternatiu de les imatges o que hi hagi text d’enllaços erroni; observa les relacions entre els elements i el seu context) i fes proves amb grups d’usuaris discapacitats per veure com es desenvolupen amb els elements web més complexos. Per exemple:

- - - -

Pots i has de mantenir un seguiment de les possibles àrees problemàtiques del teu contingut que necessitaran més feina per a fer-lo accessible, assegura't que es fa una prova exhaustiva i pensa en solucions/alternatives. El contingut de text (com veuràs en l’article següent) és fàcil; però, i el contingut multimèdia i els gràfics 3D? Has de tenir present el pressupost del projecte i pensar de quines solucions disposes per a fer aquest contingut accessible. Una opció possible, tot i que costosa, és tenir transcrit tot el contingut multimèdia.

- -

Sigues realista. El «100% d'accessibilitat» és un ideal que no es pot assolir, sempre hi haurà algun cas que tingui com a resultat que un usuari determinat trobi uns continguts determinats difícils d'utilitzar, però tot i això, hauries de fer tot allò que et sigui possible. Si tens previst incloure un gràfic 3D elaborat amb WebGL, potser voldràs incloure una taula de dades com a representació alternativa accessible de les dades. O, simplement, voldràs incloure la taula i desfer-te del gràfic de taules 3D: és accessible per a tothom, més ràpida de codificar, empra menys recursos de la CPU i és més fàcil de mantenir.

- -

Ara bé, si treballes en un lloc web d’una galeria d’art que mostra obres d'art interessants en 3D, no seria raonable esperar que les obres fossin perfectament accessible per a persones amb deficiències visuals, ja que es tracta d'un mitjà totalment visual.

- -

Per demostrar que et preocupa i has pensat en l’accessibilitat, publica una declaració d’accessibilitat en el teu lloc web en què es detalli quina és la teva política d’accessibilitat i quins passos has fet per a aconseguir que el lloc sigui accessible. Si algú es queixa que el teu lloc web té un problema d’accessibilitat, estableix-hi un diàleg, mostra empatia i pren les mesures raonables per a intentar solucionar el problema.

- -
-

Nota: El nostre article sobre la Gestió de problemes d’accessibilitat comuns exposa especificacions d’accessibilitat que s’han de provar amb més detall.

-
- -

En resum:

- - - -

Directrius d’accessibilitat i lleis

- -

Hi ha tantes llistes de comprovació i conjunts de pautes disponibles per a fonamentar les proves d’accessibilitat, que pot semblar aclaparador a primera vista. El nostre consell és que et familiaritzis amb les àrees bàsiques de què t’has d’ocupar i comprendre les estructures d’alt nivell de les directrius que més t'interessin.

- - - -

De manera que mentre que el WCAG és un conjunt de directrius, el teu país probablement disposa de lleis que regulen l’accessibilitat web o, almenys, l’accessibilitat dels serveis disponibles per al públic (que podrien incloure llocs web, televisió, espais físics, etc.). És una bona idea que et preocupis per esbrinar quines són aquestes lleis, perquè podria ser que tinguis algun tipus de responsabilitat legal si la gent es queixa.

- -

Tot i que sona molt seriós, de fet només cal que consideris l’accessibilitat com la prioritat principal de les teves pràctiques de desenvolupament web, tal com hem exposat abans. En cas de dubte, demana l’assessorament d’un advocat qualificat. Aquí no oferirem més consells sobre el tema, perquè no som advocats.

- -

API d'accessibilitat

- -

Els navegadors web fan ús de les API d’accessibilitat especial (proporcionades pel sistema operatiu subjacent), que exposen informació útil per a tecnologies assistencials (AT, assistive technologies): les AT solen fer ús d’informació semàntica, és a dir, que aquesta informació no inclou aplicació d’estil o JavaScript. Aquesta informació s’estructura en un arbre d’informació anomenat arbre d’accessibilitat.

- -

Els diferents sistemes operatius tenen diferents API d’accessibilitat disponibles:

- - - -

Si cau la informació semàntica d’origen que proporcionen els elements HTML de les teves aplicacions web, pots completar-la amb funcions de l’especificació WAI-ARIA, que afegeixen informació semàntica a l’arbre d’accessibilitat per a millorar-ne l’accessibilitat. Pots obtenir més informació sobre WAI-ARIA en el nostre article WAI-ARIA bàsic.

- -

Resum

- -

Aquest article t'hauria d'haver proporcionat una panoràmica útil i de gran nivell sobre l'accessibilitat, i mostrat per què és important i com pots integrar-la en el teu flux de treball. Ara també hauries de frisar per conèixer els detalls d’implementació que poden fer que els llocs web siguin accessibles, i començarem a fer-ho en la secció següent, i veurem per què l’HTML és una bona base per a l'accessibilitat.

- -

{{NextMenu("Learn/Accessibility/HTML", "Learn/Accessibility")}}

- -

En aquest mòdul

- - - -

Consulta també

- - diff --git a/files/ca/learn/accessibility/what_is_accessibility/index.html b/files/ca/learn/accessibility/what_is_accessibility/index.html new file mode 100644 index 0000000000..6d8891a20c --- /dev/null +++ b/files/ca/learn/accessibility/what_is_accessibility/index.html @@ -0,0 +1,211 @@ +--- +title: Què és l'accessibilitat? +slug: Learn/Accessibility/Que_es_accessibilitat +translation_of: Learn/Accessibility/What_is_accessibility +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/Accessibility/HTML", "Learn/Accessibility")}}
+ +

Aquest article inicia el mòdul fent ullada a què és l’accessibilitat: aquesta visió general inclou quins grups de persones hem de considerar i per què, quines eines utilitzen les persones per a interactuar amb el web i com podem fer que l’accessibilitat sigui una part del nostre lloc web.

+ + + + + + + + + + + + +
Prerequisits:Coneixements bàsics d'informàtica i nocions bàsiques de com funcionen l'HTML i el CSS.
Objectiu:Adquirir familiaritat amb l’accessibilitat, inclòs què és i com t’afecta com a desenvolupador web.
+ +

Què és l'accessibilitat?

+ +

L’accessibilitat és la pràctica de fer que els llocs web siguin utilitzables per tantes persones com sigui possible. Tradicionalment pensem que es tracta de persones amb discapacitat, però el fet de fer accessibles els llocs web també beneficia altres grups, com els qui utilitzen dispositius mòbils o els qui tenen connexions de xarxa lentes.

+ +

També pots pensar en l’accessibilitat com el fet de tractar igual a tothom i oferir igualtat d’oportunitats, independentment de quines siguin les capacitats o les circumstàncies. De la mateixa manera que no està bé excloure algú d’accedir a un edifici perquè va en cadira de rodes (els edificis públics moderns solen tenir rampes o ascensors per a cadires de rodes), tampoc és correcte excloure d’un lloc web algú que té una discapacitat visual. Tots som diferents, però tots som humans, i tenim els mateixos drets com a humans.

+ +

Per això hem de fer les coses accessibles. L’accessibilitat dels llocs web forma part de la legislació d’alguns països, i et pot obrir un mercat significatiu, que d'altra manera no podria utilitzar els teus serveis ni comprar els teus productes.

+ +

La construcció de llocs accessibles beneficia a tothom:

+ + + +

En quins tipus de discapacitat ens hem de fixar?

+ +

Les persones amb discapacitat són igual de diverses que les persones sense discapacitat, i també ho són les discapacitats. La lliçó clau aquí és pensar més enllà de com utilitzes el teu ordinador i el web i començar a aprendre com l'utilitzen els altres, tu no ets els teus usuaris. A continuació s’expliquen els tipus principals de discapacitat que pots tenir en compte i les eines especials que s’utilitzen per a accedir al contingut web (conegudes com a tecnologies d’assistència o AT, d’assistive technologies).

+ +
+

Nota: La fitxa informativa sobre discapacitat i salut de l'Organització Mundial de la Salut estableix que «Més d'un milió de persones, aproximadament el 15% de la població mundial, tenen algun tipus de discapacitat» i «Entre 110 i 190 milions d'adults tenen dificultats importants de funcionament».

+
+ +

Les persones amb discapacitat visual

+ +

Les persones amb discapacitat visual inclouen persones amb ceguesa, poca visió i daltonisme. Moltes persones amb deficiències visuals utilitzen lupes de pantalla, que poden ser lupes físiques o les funcions de zoom del programari. La majoria de navegadors i sistemes operatius actuals tenen la capacitat de fer zoom. Alguns usuaris confien en lectors de pantalla, un programari que llegeix el text digital en veu alta. Alguns exemples de lectors de pantalla són:

+ + + +

Seria bo que et familiaritzessis amb els lectors de pantalla; també hauries de configurar un lector de pantalla i experimentar-hi per a fer-te una idea de com funciona. Consulta la nostra guia de lectors de pantalla per a proves de compatibilitat creuada entre navegadors per a obtenir més detalls sobre el seu ús. El vídeo següent proporciona un breu exemple de com és l'experiència.

+ +

{{EmbedYouTube("IK97XMibEws")}}

+ +

En termes estadístics, l'Organització Mundial de la Salut estima que «hi ha al voltant de 285 milions de persones amb deficiències visuals a tot el món: 39 milions són cegues i 246 tenen un nivell de visió baix». (Consulta l’informe sobre Dificultat visual i ceguesa). Es tracta d'una població d’usuaris molt gran i significativa, que no pots deixar escapar perquè el teu lloc web no es codifiqui correctament (parlem de gairebé el mateix nombre de persones que viuen a Estats Units d’Amèrica).

+ +

Les persones amb discapacitat auditiva

+ +

Altrament conegudes com persones amb deficiències auditives o persones sordes, aquest grup de persones es diferencia per tenir nivells auditius baixos o perquè, directament, no tenen sentit de l’oïda. Les persones amb deficiències auditives utilitzen AT (consulta els Dispositius assistents per a persones amb trastorns de l’audició, la veu, la parla o el llenguatge), però realment no hi ha AT específics per a l’ús d'un ordinador o un lloc web.

+ +

Tanmateix, hi ha tècniques específiques que proporcionen alternatives textuals al contingut d'àudio, que van des de transcripcions de text senzilles fins a pistes de text (és a dir, subtítols) que es poden mostrar juntament amb un vídeo. Més endavant, tractarem aquest tema en un article.

+ +

Les persones amb discapacitat auditiva també representen una base d’usuaris important. «466 milions de persones a tot el món tenen pèrdua auditiva», diu el full informatiu de l'Organització Mundial de la Salut per a la Sordesa i pèrdua auditiva.

+ +

Les persones amb problemes de mobilitat

+ +

Aquestes persones tenen discapacitats motrius, que poden ser per problemes purament físics (com la pèrdua de les extremitats o una paràlisi), o per trastorns neurològics/genètics que condueixen a debilitat o pèrdua de control en les extremitats. Algunes persones podrien tenir dificultats per a fer els moviments de mà necessaris per a utilitzar un ratolí, mentre que d’altres poden tenir afectacions més greus, potser una paràlisi significativa, fins al punt que necessitin utilitzar un punter de cap per a interactuar amb els ordinadors.

+ +

Aquest tipus de discapacitat també pot ser conseqüència d'una edat avançada, més que d'un traumatisme o una condició específica, o bé de les limitacions del maquinari (pot ser que alguns usuaris no tinguin un ratolí).

+ +

La manera en què afecta habitualment el treball del desenvolupador web és en el requisit que els controls siguin accessibles pel teclat; tractarem l’accessibilitat del teclat en articles posteriors del mòdul, però és una bona idea provar d’accedir a alguns llocs web utilitzant només el teclat per veure com te'n surts. Per exemple, pots utilitzar la tecla de tabulació per a desplaçar-te entre els diferents controls d'un formulari web? Pots trobar més detalls sobre els controls de teclat a la nostra secció Prova de compatibilitat creuada entre navegadors Ús original d’accessibilitat des del teclat.

+ +

En termes estadístics, un nombre important de persones presenta deficiències de mobilitat. Els centres dels EUA per al control i la prevenció de la discapacitat i el funcionament (adults no institucionalitzats de més de 18 anys) informen que el percentatge d’adults amb dificultats de motricitat física als Estats Units és del 16,1%.

+ +

Les persones amb problemes de cognició

+ +

El deteriorament cognitiu es refereix a una àmplia gamma de discapacitats, des de persones amb discapacitat intel·lectual que tenen les capacitats més limitades, fins a tots nosaltres, que a mesura que envellim tenim més dificultats per a pensar i recordar. La gamma inclou les persones amb malalties mentals com la depressió i l’esquizofrènia. També inclou persones amb discapacitats d'aprenentatge com la dislèxia o el trastorn d'hiperactivitat i dèficit d'atenció. És important destacar que, tot i que hi ha molta diversitat en les definicions clíniques de deficiències cognitives, les persones que les tenen experimenten un conjunt de problemes funcionals comuns, que inclouen dificultats per comprendre els continguts, recordar com fer tasques, i confusions causades per dissenys de pàgines web incoherents.

+ +

Una bona base d’accessibilitat per a persones amb deficiències cognitives inclou:

+ + + +

Notes

+ + + +

Implementar l'accessibilitat del teu projecte

+ +

Un mite comú de l’accessibilitat és que l’accessibilitat és un «cost afegit» a l'hora de crear un projecte. Aquest mite en realitat pot ser cert si:

+ + + +

Tanmateix, si consideres l'accessibilitat des del començament d'un projecte, el cost de fer la majoria del contingut accessible hauria de ser mínim.

+ +

Quan planifiquis el teu projecte, inclou les proves d’accessibilitat en el teu règim de proves, conjuntament amb les proves per a qualsevol altre segment de públic objectiu important (per exemple, navegadors per a equips d’escriptori o per a dispositius mòbils). Fes les proves tan aviat com et sigui possible i de manera continuada, fes proves automatitzades per a descobrir les quines característiques de programació falten (com ara que falti el text alternatiu de les imatges o que hi hagi text d’enllaços erroni; observa les relacions entre els elements i el seu context) i fes proves amb grups d’usuaris discapacitats per veure com es desenvolupen amb els elements web més complexos. Per exemple:

+ + + +

Pots i has de mantenir un seguiment de les possibles àrees problemàtiques del teu contingut que necessitaran més feina per a fer-lo accessible, assegura't que es fa una prova exhaustiva i pensa en solucions/alternatives. El contingut de text (com veuràs en l’article següent) és fàcil; però, i el contingut multimèdia i els gràfics 3D? Has de tenir present el pressupost del projecte i pensar de quines solucions disposes per a fer aquest contingut accessible. Una opció possible, tot i que costosa, és tenir transcrit tot el contingut multimèdia.

+ +

Sigues realista. El «100% d'accessibilitat» és un ideal que no es pot assolir, sempre hi haurà algun cas que tingui com a resultat que un usuari determinat trobi uns continguts determinats difícils d'utilitzar, però tot i això, hauries de fer tot allò que et sigui possible. Si tens previst incloure un gràfic 3D elaborat amb WebGL, potser voldràs incloure una taula de dades com a representació alternativa accessible de les dades. O, simplement, voldràs incloure la taula i desfer-te del gràfic de taules 3D: és accessible per a tothom, més ràpida de codificar, empra menys recursos de la CPU i és més fàcil de mantenir.

+ +

Ara bé, si treballes en un lloc web d’una galeria d’art que mostra obres d'art interessants en 3D, no seria raonable esperar que les obres fossin perfectament accessible per a persones amb deficiències visuals, ja que es tracta d'un mitjà totalment visual.

+ +

Per demostrar que et preocupa i has pensat en l’accessibilitat, publica una declaració d’accessibilitat en el teu lloc web en què es detalli quina és la teva política d’accessibilitat i quins passos has fet per a aconseguir que el lloc sigui accessible. Si algú es queixa que el teu lloc web té un problema d’accessibilitat, estableix-hi un diàleg, mostra empatia i pren les mesures raonables per a intentar solucionar el problema.

+ +
+

Nota: El nostre article sobre la Gestió de problemes d’accessibilitat comuns exposa especificacions d’accessibilitat que s’han de provar amb més detall.

+
+ +

En resum:

+ + + +

Directrius d’accessibilitat i lleis

+ +

Hi ha tantes llistes de comprovació i conjunts de pautes disponibles per a fonamentar les proves d’accessibilitat, que pot semblar aclaparador a primera vista. El nostre consell és que et familiaritzis amb les àrees bàsiques de què t’has d’ocupar i comprendre les estructures d’alt nivell de les directrius que més t'interessin.

+ + + +

De manera que mentre que el WCAG és un conjunt de directrius, el teu país probablement disposa de lleis que regulen l’accessibilitat web o, almenys, l’accessibilitat dels serveis disponibles per al públic (que podrien incloure llocs web, televisió, espais físics, etc.). És una bona idea que et preocupis per esbrinar quines són aquestes lleis, perquè podria ser que tinguis algun tipus de responsabilitat legal si la gent es queixa.

+ +

Tot i que sona molt seriós, de fet només cal que consideris l’accessibilitat com la prioritat principal de les teves pràctiques de desenvolupament web, tal com hem exposat abans. En cas de dubte, demana l’assessorament d’un advocat qualificat. Aquí no oferirem més consells sobre el tema, perquè no som advocats.

+ +

API d'accessibilitat

+ +

Els navegadors web fan ús de les API d’accessibilitat especial (proporcionades pel sistema operatiu subjacent), que exposen informació útil per a tecnologies assistencials (AT, assistive technologies): les AT solen fer ús d’informació semàntica, és a dir, que aquesta informació no inclou aplicació d’estil o JavaScript. Aquesta informació s’estructura en un arbre d’informació anomenat arbre d’accessibilitat.

+ +

Els diferents sistemes operatius tenen diferents API d’accessibilitat disponibles:

+ + + +

Si cau la informació semàntica d’origen que proporcionen els elements HTML de les teves aplicacions web, pots completar-la amb funcions de l’especificació WAI-ARIA, que afegeixen informació semàntica a l’arbre d’accessibilitat per a millorar-ne l’accessibilitat. Pots obtenir més informació sobre WAI-ARIA en el nostre article WAI-ARIA bàsic.

+ +

Resum

+ +

Aquest article t'hauria d'haver proporcionat una panoràmica útil i de gran nivell sobre l'accessibilitat, i mostrat per què és important i com pots integrar-la en el teu flux de treball. Ara també hauries de frisar per conèixer els detalls d’implementació que poden fer que els llocs web siguin accessibles, i començarem a fer-ho en la secció següent, i veurem per què l’HTML és una bona base per a l'accessibilitat.

+ +

{{NextMenu("Learn/Accessibility/HTML", "Learn/Accessibility")}}

+ +

En aquest mòdul

+ + + +

Consulta també

+ + diff --git a/files/ca/learn/css/building_blocks/a_cool_looking_box/index.html b/files/ca/learn/css/building_blocks/a_cool_looking_box/index.html new file mode 100644 index 0000000000..3a4df8a2b2 --- /dev/null +++ b/files/ca/learn/css/building_blocks/a_cool_looking_box/index.html @@ -0,0 +1,85 @@ +--- +title: Una caixa d'aspecte interessant +slug: Learn/CSS/Caixes_estil/Caixa_aspecte_interessant +tags: + - Assessment + - Beginner + - CSS + - Learn + - backgrounds + - borders + - box + - box model + - effects +translation_of: Learn/CSS/Building_blocks/A_cool_looking_box +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}
+ +

En aquesta avaluació, obtindreu una mica més de pràctica a l'hora de crear caixes d'aspecte interessant, intentant crear una caixa atractiva.

+ + + + + + + + + + + + +
Rrequisits previs:Abans d'intentar aquesta avaluació, hauríeu d'haver treballat tots els articles d'aquest mòdul.
Objectiu:Provar la comprensió del model de caixa CSS i altres característiques relacionades amb la caixa, com ara les vores i els fons.
+ +

Punt de partida

+ +

Per començar aquesta avaluació, heu de:

+ + + +
+

Nota: Com a alternativa, podeu utilitzar un lloc com JSBin o Thimble per fer la vostra avaluació. Podeu enganxar el codi HTML i omplir el CSS en un d'aquests editors en línia. Si l'editor en línia que esteu utilitzant no té cap panell CSS independent, no dubteu a posar-lo en un element <style> al capdavant del document.

+
+ +

Resum del projecte

+ +

La vostra tasca és crear una caixa genial i de luxe i explorar que  podem tenir de divertit amb CSS.

+ +

Tasques generals

+ + + +

L'estil de la caixa

+ +

Ens agradaria que dissenyéssiu
+ el {{htmlelement("p")}} proporcionat, donant-li el següent:

+ + + +

Exemple

+ +

La següent captura de pantalla mostra un exemple del que podria semblar el disseny final:

+ +

+ +

Avaluació

+ +

Si seguiu aquesta avaluació com a part d'un curs organitzat, hauríeu de poder lliurar el vostre treball al vostre professor/mentor per qualificar-ho. Si esteu en auto-aprenentatge, podreu obtenir la guia de qualificacions amb força facilitat preguntant sobre el tema en el fil de conversa en l'àrea d'aprenentatge, o en el canal IRC #mdn en Mozilla IRC. Intenteu primer l'exercici - no es guanya res fent trampes!

+ +

{{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}

diff --git a/files/ca/learn/css/building_blocks/backgrounds_and_borders/index.html b/files/ca/learn/css/building_blocks/backgrounds_and_borders/index.html new file mode 100644 index 0000000000..2e2ce4727c --- /dev/null +++ b/files/ca/learn/css/building_blocks/backgrounds_and_borders/index.html @@ -0,0 +1,307 @@ +--- +title: Fons i vores +slug: Learn/CSS/Building_blocks/Fons_i_vores +translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}
+ +

En aquest article veurem algunes de les coses creatives que pots fer amb fons i vores amb el CSS. Des d’afegir degradats o imatges de fons fins a arrodonir cantonades; els fons i les vores són la solució per a moltes qüestions d’estil en CSS.

+ + + + + + + + + + + + +
Prerequisits:Coneixements bàsics d'informàtica, tenir el programari bàsic instal·lat, coneixements bàsics de treballar amb fitxers i d'HTML (consulta la Introducció a l'HTML) i nocions de com funciona el CSS.
Objectiu:Aprendre a aplicar estil al fons i la vora de les caixes.
+ +

Aplicar estil als fons amb CSS

+ +

La propietat CSS {{cssxref("background")}} és una propietat abreviada que substitueix un seguit de propietats de fons que presentarem en aquest article. Quan et trobes amb una propietat de fons complexa en un full d’estil, pot ser que et sembli una mica difícil d’entendre perquè es poden estar passant molts valors alhora.

+ +
.box {
+  background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat,
+  url(big-star.png) center no-repeat, rebeccapurple;
+} 
+
+ +

Més endavant en aquest tutorial tornarem a l’objectiu de com funcionen les propietats abreviades, però primer fem un cop d’ull a les diverses coses que pots fer amb els fons amb el CSS, a partir de cadascuna de les propietats dels fons.

+ +

Els colors de fons

+ +

La propietat {{cssxref("background-color")}} defineix el color de fons de qualsevol element en CSS. La propietat accepta qualsevol color (<color>) vàlid. Un color de fons s'estén per sota del contingut i del farciment de la caixa.

+ +

En l'exemple següent hem utilitzat diversos valors de color per a afegir un color de fons a la caixa, un títol d’encapçalament i un element {{htmlelement("span")}}.

+ +

Juga a fer servir qualsevol valor de <color> disponible.

+ +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/color.html", '100%', 800)}}

+ +

Les imatges de fons

+ +

La propietat {{cssxref("background-image")}} permet visualitzar una imatge de fons en un element. En l'exemple següent hi ha dues caixes: una té una imatge de fons que és més gran que la caixa, l'altra té una imatge petita en forma d’estrella.

+ +

Aquest exemple mostra dues coses sobre les imatges de fons. La imatge gran no es redueix de manera predeterminada per a adaptar-se a la caixa, sinó que només en veiem un tros petit d’una cantonada, mentre que la imatge petita es mostra en mosaic fins a omplir la caixa. La imatge en aquest cas és en realitat una única estrella.

+ +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background-image.html", '100%', 800)}}

+ +

Si especifiques un color de fons a més d'una imatge de fons, la imatge es mostra a sobre. Afegeix una propietat background-color a l'exemple de dalt i observa-ho en acció.

+ +

Control amb la propietat background-repeat

+ +

La propietat {{cssxref("background-repeat")}} s'utilitza per a controlar el comportament en mosaic de les imatges. Els valors disponibles són:

+ + + +

Prova aquests valors en l'exemple següent. Hem establert la propietat al valor no-repeat, de manera que només veuràs una estrella. Prova els diferents valors repeat-x i repeat-y i observa’n els efectes.

+ +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/repeat.html", '100%', 800)}}

+ +

Les mides de la imatge de fons

+ +

En l'exemple anterior hi ha una imatge gran que ha acabat retallada perquè és més gran que el fons. En aquest cas podríem utilitzar la propietat {{cssxref("background-size")}}, que pot prendre valors de longitud o percentatge, per a dimensionar la imatge i que s'ajusti al fons.

+ +

També pots utilitzar paraules clau:

+ + + +

En l'exemple següent hem utilitzat la imatge més gran de l'exemple anterior i unitats de longitud per dimensionar-la dins de la caixa. Observa que això ha distorsionat la imatge.

+ +

Fes la prova següent.

+ + + +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/size.html", '100%', 800)}}

+ +

La ubicació de la imatge de fons

+ +

La propietat {{cssxref("background-position")}} et permet triar la posició en què apareix la imatge de fons en la caixa a la qual s'aplica. Fa servir un sistema de coordenades en què el (0,0) és a la part superior esquerra de la caixa, i la caixa es posiciona sobre els eixos horitzontal (x) i vertical ((y).

+ +
+

Nota: El valor per defecte de background-position és (0,0).

+
+ +

Els valors de background-position més comuns prenen dos valors independents: un valor horitzontal seguit d'un valor vertical.

+ +

També pots utilitzar paraules clau com top i right (busca la resta de possibilitats en la pàgina sobre la propietat {{cssxref("background-position")}}):

+ +
.box {
+  background-image: url(star.png);
+  background-repeat: no-repeat;
+  background-position: top center;
+} 
+
+ +

I longituds i percentatges:

+ +
.box {
+  background-image: url(star.png);
+  background-repeat: no-repeat;
+  background-position: 20px 10%;
+} 
+
+ +

També pots barrejar valors de paraules clau amb longituds o percentatges, per exemple:

+ +
.box {
+  background-image: url(star.png);
+  background-repeat: no-repeat;
+  background-position: top 20px;
+}
+ +

Finalment, també pots utilitzar una sintaxi de 4 valors per a indicar una distància des de determinades cantonades de la caixa; la unitat de longitud en aquest cas és un desplaçament del valor que la precedeix. Així, doncs, en el CSS de sota, posicionem el fons a 20px de l’extrem superior i 10px de l’extrem dret:

+ +
.box {
+  background-image: url(star.png);
+  background-repeat: no-repeat;
+  background-position: top 20px right 10px;
+}
+ +

Juga amb aquests valors en l'exemple següent i mou l'estrella per la caixa.

+ +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/position.html", '100%', 800)}}

+ +
+

Nota: background-position és una propietat abreviada de {{cssxref ("background-position-x")}} i {{cssxref ("background-position-y")}}, que et permeten establir els diferents valors de posició de l'eix per separat.

+
+ +

Degradats de fons

+ +

Un degradat (quan s'utilitza per a un fons) actua igual que una imatge i també es defineix amb la propietat {{cssxref("background-image")}}.

+ +

Pots llegir més informació sobre els diferents tipus de degradats i què pots fer amb ells en la pàgina sobre els tipus de dades <gradient> de MDN. Una manera divertida de jugar amb els degradats és utilitzar un dels molts generadors de degradats CSS que hi ha disponibles al web, com aquest. Pots crear un degradat i copiar i enganxar el codi font que el genera.

+ +

Prova alguns degradats diferents en l'exemple següent. En les dues caixes hi ha, respectivament, un degradat lineal que s’estén per tota la caixa i un degradat radial amb una mida fixa, que per tant es repeteix.

+ +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/gradients.html", '100%', 800)}}

+ +

Múltiples imatges de fons

+ +

També és possible posar més d’una imatge de fons: especifica amb una sola propietat background-image els diversos valors, separats cadascun per una coma.

+ +

En fer-ho, pot passar que les imatges de fons es superposin entre elles. Els fons es disposen amb la darrera imatge de fons enumerada a la part inferior de la pila, i cada imatge anterior s’apila a sobre de la que la segueix en el codi.

+ +
+

Nota: Els degradats es poden barrejar feliçment amb imatges de fons normals.

+
+ +

Les altres propietats background-* també poden tenir valors separats per comes, de la mateixa manera que background-image:

+ +
background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png);
+background-repeat: no-repeat, repeat-x, repeat;
+background-position: 10px 20px,  top right;
+ +

Cada valor de les diverses propietats coincideix amb els valors que estan en la mateixa posició en les altres propietats. Aquí sobre, per exemple, el valor per a la propietat background-repeat d’image1 és no-repeat. Però, què passa quan propietats diferents tenen una quantitat diferent de valors? La resposta és que els valors que ocupen les posicions més petites s'alternen cíclicament: en l'exemple anterior hi ha quatre imatges de fons però només dos valors background-position. Les dues primeres posicions s’apliquen a les dues primeres imatges, i després els valores es tornen a assignar cíclicament: el valor de la primera posició s’aplica a image3, i el valor de segona posició, a image4.

+ +

Juguem! En l'exemple següent hem inclòs dues imatges. Per a comprovar l'ordre d'apilament, canvia la imatge de fons que apareix primer en la llista. O juga amb les altres propietats i canvia’n els valors de posició i mida, o la repetició.

+ +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/multiple-background-image.html", '100%', 800)}}

+ +

Ancoratge del fons

+ +

Una altra opció que hi ha disponible per als fons és especificar com es desplacen quan es desplaça el contingut. Això es controla amb la propietat {{cssxref("background-attachment")}}, que pot prendre els valors següents:

+ + + +

La propietat {{cssxref("background-attachment")}} només funciona quan hi ha contingut pel qual et pots desplaçar; hem preparat un exemple que mostra les diferències entre els tres valors: fes-hi un cop d’ull a background-attachment.html (també en pots consultar el codi font aquí).

+ +

Ús de la propietat abreviada background

+ +

Com hem esmentat al començament d'aquest article, sovint veuràs fons que estan especificats amb la propietat {{cssxref("background")}}. Aquesta propietat abreviada et permet configurar totes les propietats diferents alhora.

+ +

Si fas servir diversos fons, has d’especificar totes les propietats per al primer fons, i a continuació afegir-hi el fons següent, després d’una coma. En l'exemple següent hi ha un degradat amb una mida i una posició, i després un fons d'imatge amb no-repeat i una posició, i després un color.

+ +

Quan s’escriuen els valor abreviats de les imatges de fons cal seguir unes regles, per exemple:

+ + + +

Consulta la pàgina sobre {{cssxref("background")}} de MDN per a veure’n totes les possibilitats.

+ +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background.html", '100%', 800)}}

+ +

Consideracions d’accessibilitat relatives als fons

+ +

Quan poses un text sobre una imatge o un color de fons, t’has d’assegurar que té prou contrast perquè els usuaris el poden llegir. Si poses una imatge de fons i el text s’hi llegeix a sobre, també has d'especificar un color de fons que permeti llegir el text si la imatge no es carrega.

+ +

Els lectors de pantalla no poden analitzar les imatges de fons, de manera que aquestes haurien de ser purament decoratives; qualsevol contingut important hauria de formar part de la pàgina HTML, i no estar continguda en segon pla.

+ +

Vores

+ +

En aprendre el model de caixes, vam descobrir com afecten les vores a la mida de la caixa. En aquesta secció veurem com emprar les vores de manera creativa. Normalment, quan afegim vores a un element amb CSS, utilitzem una propietat abreviada que estableix el color, l'amplada i l'estil de la vora en una línia de CSS.

+ +

Podem establir una vora per als quatre costats d'una caixa amb la propietat {{cssxref("border")}}:

+ +
.box {
+  border: 1px solid black;
+}
+ +

O podem establir una sola vora de la caixa, per exemple:

+ +
.box {
+  border-top: 1px solid black;
+}
+ +

Cadascuna d’aquestes propietats abreviades seria:

+ +
.box {
+  border-width: 1px;
+  border-style: solid;
+  border-color: black;
+}
+ +

I per a les no abreviades seria:

+ +
.box {
+  border-top-width: 1px;
+  border-top-style: solid;
+  border-top-color: black;
+}
+ +
+

Nota: Aquestes propietats de la vora superior, dreta, inferior i esquerra també tenen mapades propietats lògiques relacionades amb el mode d'escriptura del document (per exemple, text d'esquerra a dreta o de dreta a esquerra, o de dalt a baix). Ho explorarem en l’article següent, que inclou el tractament del text en diverses direccions.

+
+ +

Amb les vores es poden emprar una gran varietat d'estils. En l'exemple següent hem utilitzat un estil de vora diferent per als quatre costats de la caixa. Juga amb l'estil, l'amplada i el color de la vora per veure com funcionen les vores.

+ +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/borders.html", '100%', 800)}}

+ +

Les cantonades arrodonides

+ +

L’arrodoniment de les cantonades d'una caixa s’aconsegueix amb la propietat {{cssxref("border-radius")}} i les propietats associades que es relacionen amb cada cantó de la caixa. Es poden utilitzar dues longituds o percentatges com a valor; el primer valor defineix el radi horitzontal, i el segon el radi vertical. En molts casos només faràs servir un valor, que s'utilitzarà per a tots dos.

+ +

Per exemple, pots fer que les quatre cantonades d’una caixa tinguin un radi de 10px:

+ +
.box {
+  border-radius: 10px;
+}
+ +

O que la cantonada superior dreta tingui un radi horitzontal d’1em i un radi vertical del 10%:

+ +
.box {
+  border-top-right-radius: 1em 10%;
+}
+ +

Hem fixat les quatre cantonades de l'exemple següent i després hem canviat els valors de l'extrem superior dret perquè sigui diferent. Juga amb els valors i canvia les cantonades. Consulta la pàgina de propietats de {{cssxref("border-radius")}} i esbrina les opcions de sintaxi disponibles.

+ +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/corners.html", '100%', 800)}}

+ +

Posa a prova les teves habilitats

+ +

Hem vist moltes coses en aquest article. Recordes la informació més important? Trobaràs més proves per verificar que retens la informació abans de seguir a Test your skills: Backgrounds and Borders.
+  

+ +

Resum

+ +

En aquest articles hem descobert força conceptes, i pots veure que hi ha molt per afegir a un fons o una vora d'una caixa. Consulta les diverses pàgines de propietat si vols obtenir més informació sobre alguna de les funcions que hem comentat. Cada pàgina de MDN té més exemples d’ús amb què pots jugar i ampliar els teus coneixements.

+ +

En el proper article descobrirem com interactua el mode d'escriptura del document amb el CSS. Què passa quan el text no flueix d'esquerra a dreta?

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}

+ +

En aquest mòdul

+ +
    +
  1. La cascada i l'herència
    2. +
  2. Els selectors CSS + +
    3. +
  3. El model de caixes
    4. +
  4. Fons i vores
    5. +
  5. El tractament del text en diverses direccions
    6. +
  6. El desbordament de continguts
    7. +
  7. Els valors i les unitats
    8. +
  8. Dimensionar elements en CSS
    9. +
  9. Imatges, mèdia i elements de formulari
    10. +
  10. Aplicar estil a les taules
    11. +
  11. Depura el teu CSS
    12. +
  12. Organitza el teu CSS
    13. +
diff --git "a/files/ca/learn/css/building_blocks/cascada_i_her\303\250ncia/index.html" "b/files/ca/learn/css/building_blocks/cascada_i_her\303\250ncia/index.html" deleted file mode 100644 index 09a5e368eb..0000000000 --- "a/files/ca/learn/css/building_blocks/cascada_i_her\303\250ncia/index.html" +++ /dev/null @@ -1,333 +0,0 @@ ---- -title: Cascada i herència -slug: Learn/CSS/Building_blocks/Cascada_i_herència -translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance ---- -
{{LearnSidebar}}{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}
- -

L’objectiu d’aquest article és desenvolupar la comprensió d’alguns dels conceptes més fonamentals del CSS (la cascada, l’especificitat i l’herència) que controlen com s’aplica el CSS a l’HTML i com es resolen els conflictes.

- -

Si bé pot semblar que és menys rellevant i una mica més acadèmic que algunes altres parts del curs, la seva comprensió t'estalviarà feina més endavant! T’animem a treballar aquesta secció en profunditat i comprovar que entens els conceptes abans de continuar endavant.

- - - - - - - - - - - - -
Prerequisits:Coneixements bàsics d'informàtica, tenir el programari bàsic instal·lat, coneixements bàsics de com treballar amb fitxers i d'HTML (mira Introducció a l'HTML) i nocions bàsiques de com funciona el CSS.
Objectiu:Aprendre què són la cascada i l'especificitat, i com funciona l'herència en CSS.
- -

Regles conflictives

- -

CSS significa fulls d'estil en cascada (cascading style sheets), i es molt important entendre la paraula, cascada; el comportament de la cascada és clau per a comprendre el CSS.

- -

En algun moment treballaràs en un projecte i trobaràs que el CSS que creus que s’hauria d’aplicar a un element no funciona. Normalment, el problema és que has creat dues regles que podrien aplicar-se al mateix element. La cascada i el concepte d’especificitat, que estan estretament relacionats, són mecanismes que controlen quina regla s'aplica quan hi ha aquest conflicte. La regla que dona estil al teu element pot ser que no sigui la que esperaves, per la qual cosa has d'entendre com funcionen aquests mecanismes.

- -

Aquí també és important el concepte d'herència, que significa que algunes propietats CSS per defecte hereten valors establerts per a l'element pare, i d'altres no. Això també pot causar algun comportament que potser no esperes.

- -

Comencem per fer una ullada ràpida als elements clau que tractem i, a continuació, examinarem com interaccionen entre si i amb el CSS. Poden semblar un conjunt de conceptes complicats d’entendre. A mesura que vagis adquirint pràctica a l'hora d’escriure CSS, se’t farà més evident la manera que té de funcionar.

- -

La cascada

- -

Fulls d’estil en cascada: en un nivell molt senzill això significa que l’ordre de les regles CSS és important; quan s’apliquen dues regles que tenen la mateixa especificitat, la que s’utilitza és l'última que surt al codi CSS.

- -

En l’exemple següent hi ha dues regles que podrien aplicar-se a h1. h1 acaba sent de color blau: aquestes regles tenen un selector idèntic i, per tant, porten la mateixa especificitat, de manera que l’última regla en el full d'estil guanya.

- -

{{EmbedGHLiveSample("css-examples/learn/cascade/cascade-simple.html", '100%', 400)}} 

- -

Especificitat

- -

L’especificitat és la manera com el navegador decideix quina regla s’aplica si diverses regles tenen selectors diferents i poden aplicar-se al mateix element. Bàsicament és una mesura de com d'específica serà la selecció d'un selector:

- - - -

Vegem-ne un exemple! A continuació, tornem a tenir dues regles que podrien aplicar-se a h1. L’encapçalament h1 següent acaba sent de color vermell: el selector de classe dona a aquesta regla una especificitat més alta, i per tant s'aplica encara que la regla amb el selector d'elements apareix més avall en el full d'estil.

- -

{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-simple.html", '100%', 500)}} 

- -

Més endavant explicarem la puntuació de l'especificitat.

- -

Herència

- -

L’herència també s’ha d’entendre en aquest context: els elements fill hereten alguns valors de propietat CSS que s’han establert en els elements pare, i no n’hereten d’altres.

- -

Per exemple, si configures un element color i un font-family per a un element, aquest color i tipus de lletra també s’apliquen a tots els elements que hi hagi a dintre, tret que els hi hagis aplicat valors de color i lletra diferents directament.

- -

{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance-simple.html", '100%', 550)}} 

- -

Algunes propietats no s'hereten. Per exemple, si estableixes una amplada ({{cssxref("width")}}) del 50% per a un element, cap dels seus elements descendents adquireix una amplada del 50% de l'amplada de l'element pare. Si fos així, seria molt frustrant utilitzar CSS!

- -
-

Nota: A les pàgines de referència de les propietats CSS de MDN, pots trobar un quadre d'informació tècnica, normalment a la part inferior de la secció d'especificacions, que enumera diversos punts de dades sobre aquesta propietat, inclòs si s'hereta o no. Consulta, per exemple, la secció Especificacions de la propietat del color.

-
- -

Entendre com interaccionen els conceptes

- -

Aquests tres conceptes controlen quin CSS s'aplica a cada element. En les seccions següents veurem com funcionen conjuntament. De vegades pot semblar una mica complicat, però començaràs a recordar-los a mesura que guanyis experiència amb el CSS, i sempre ho pots tornar a buscar si se t'obliden els detalls. Fins i tot als desenvolupadors experimentats els costa recordar tots els detalls.

- -

Comprendre l’herència

- -

Començarem per l'herència. En l'exemple següent hi ha un element {{HTMLElement("ul")}}, que conté dos nivells de llistes no ordenades. Hem definit per a l'element exterior <ul> una vora i un farciment, i n’hem canviat el color de la lletra.

- -

El color s’ha aplicat als fills directes i també als indirectes: els elements fill immediats (<li>) i els que hi ha a la primera llista imbricada. Després, hem afegit una classe special a la segona llista imbricada i hi hem aplicat un color diferent, el qual hereten els fills d’aquesta.

- -

{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance.html", '100%', 700)}} 

- -

No s'hereten propietats com l'amplada (com ja s'ha esmentat), els marges, els farciments i les vores. Si els fills de la nostra llista haguessin d’heretar una vora, cada llista i element de llista obtindria una vora, i probablement no sigui un efecte que vulguem.

- -

Quines propietats s'hereten de manera predeterminada i quines no, es en bona mesura qüestió de sentit comú.

- -

Control de l’herència

- -

El CSS proporciona quatre valors especials de propietat universal per a controlar l’herència. Totes les propietats CSS admeten aquests valors.

- -
-
{{cssxref("inherit")}}
-
Estableix el valor de la propietat aplicat a un element seleccionat perquè sigui igual que el de l’element pare. Això, en efecte, «activa l'herència».
-
{{cssxref("initial")}}
-
Estableix que el valor de la propietat que s’aplica a l’element que se selecciona sigui igual que el valor que el full d'estil predeterminat del navegador estableix per a la propietat d’aquest element. Si el full d’estil predeterminat del navegador no estableix cap valor i la propietat s’hereta de manera natural, el valor de la propietat s’estableix en inherit.
-
{{cssxref("unset")}}
-
Restableix la propietat al seu valor natural, cosa que significa que si la propietat s’hereta naturalment, actua com a inherit, i en cas contrari, actua com a initial.
-
- -
-

Nota: També hi ha un valor més recent, {{cssxref("revert")}}, que té un suport limitat per part dels navegadors.

-
- -
-

Nota: Consulta la secció {{SectionOnPage("/en-US/docs/Web/CSS/Cascade", "Origin of CSS declarations")}} per obtenir més informació sobre cadascuna d'elles i el seu funcionament.

-
- -

Podem observar una llista d’enllaços i analitzar com funcionen els valors universals. L’exemple en viu següent et permet jugar amb el CSS i veure què passa si hi fas canvis. Jugar amb el codi és realment la millor manera d’arribar a conèixer l'HTML i el CSS.

- -

Per exemple:

- -
    -
  1. El segon element de llista té aplicada la classe my-class-1. Estableix el color que hereta l’element <a> que té imbricat. Com canvia el color de l'enllaç si suprimeixes la regla?
    2. -
  2. Entens per què el tercer i el quart enllaços són del color que són? Si no és així, repassa la descripció dels valors anteriors.
    3. -
  3. Quin dels enllaços canvia de color si defineixes un color nou per a l'element <a>, per exemple a { color: red; }?
    4. -
- -

{{EmbedGHLiveSample("css-examples/learn/cascade/keywords.html", '100%', 700)}} 

- -

Restablir tots els valors de propietat

- -

La propietat CSS abreviada all es pot utilitzar per a aplicar un d’aquests valors d’herència a (gairebé) totes les propietats alhora. El seu valor pot ser qualsevol dels valors d'herència (inherit, initial, unset o revert). És una manera còmoda de desfer els canvis que s’han aplicat a l’estil de manera que puguis tornar a un punt de partida conegut abans d'introduir canvis nous.

- -

En l’exemple següent hi ha dues citacions de bloc. La primera té un estil que s’aplica directament sobre la citació de bloc, mentre que la segona té una classe aplicada a la citació de bloc que estableix el valor de all en unset.

- -

{{EmbedGHLiveSample("css-examples/learn/cascade/all.html", '100%', 700)}} 

- -

Prova d’establir el valor all a alguns dels altres valors disponibles i observa quina és la diferència.

- -

Entendre la cascada

- -

Ara entenem per què un paràgraf que està profundament imbricat dins l'estructura del teu HTML és del mateix color que el CSS que s’ha especificat per a body, i entenem per què canvia el CSS que, de les lliçons introductòries, hem aplicat a algun element en qualsevol punt del document, ja sigui assignant CSS a un element o creant una classe. Ara farem una ullada de més a prop a com la cascada defineix quines regles CSS s'apliquen quan hi ha més d'un situació que pot aplicar estil a un element.

- -

Cal considerar tres factors, en un ordre d'importància creixent. Els posteriors anul·len els anteriors:

- -
    -
  1. Ordre dins el codi
    2. -
  2. Especificitat
    3. -
  3. Importància
    4. -
- -

Ara els analitzarem i descobrirem com els navegadors determinen quin CSS han d’aplicar.

- -

Ordre dins el codi

- -

Ja hem vist com l’ordre dins el codi és important en la cascada. Si hi ha més d’una regla, amb exactament el mateix pes, guanya la que apareix última en el CSS. Pots veure-ho com que les regles que són més properes a l'element sobreescriuen les anteriors fins que l'última guanya i estableix el disseny que es dona a l'element.

- -

Especificitat

- -

Un cop entès el fet que l’ordre dins el codi importa, en algun moment et pots topar amb una situació en què saps que no s’aplica la regla que apareix l’última en el full d’estil, sinó una d’anterior. Això es deu al fet que aquesta regla anterior té una especificitat més elevada: és més específica i, per tant, el navegador la tria per donar estil a l'element.

- -

Com hem vist abans en aquest article, un selector de classes té més pes que un selector d’elements, de manera que les propietats definides per a la classe anul·len les que s’apliquen directament per a l’element.

- -

Una observació important que cal fer aquí és que, tot i que pensem en selectors i regles que s’apliquen a l'element que seleccionen, no es sobreescriu tota la regla, sinó només les propietats que són iguals.

- -

Aquest comportament ajuda a evitar repeticions dins el CSS. Una pràctica habitual és definir estils genèrics per als elements bàsics, i després crear classes per a aquells que són diferents. Per exemple, en el full d’estil següent hem definit estils genèrics per a títols d’encapçalament de nivell 2 i després hem creat algunes classes que canvien només algunes propietats i valors. Els valors definits inicialment s'apliquen a tots els títols d’encapçalament, i els valors més específics s'apliquen als títols d’encapçalament en què s'ha establert alguna classe.

- -

{{EmbedGHLiveSample("css-examples/learn/cascade/mixing-rules.html", '100%', 700)}} 

- -

Observa ara com calcula l’especificitat el navegador. Ja saps que un selector d’elements té una especificitat baixa i una classe el pot sobreescriure. Essencialment s’atorga un valor en punts als diferents tipus de selectors i, si se sumen, s’obté el pes concret de cada selector, que pot avaluar-se respecte d’altres coincidències potencials.

- -

La quantitat d'especificitat que presenta un selector es mesura a partir de quatre valors (o components) diferents, que es poden entendre com si fossin milers, centenes, desenes i unitats; quatre dígits simples disposats en quatre columnes:

- -
    -
  1. Milers: suma un punt en aquesta columna si la declaració es troba continguda dins d’un atribut {{htmlattrxref("style")}}, també conegut com estil de línia. Aquestes declaracions no tenen selectors, de manera que la seva especificitat és sempre de 1.000.
    2. -
  2. Centenes: suma un punt en aquesta columna per cada selector d’identificador que està contingut en el selector global.
    3. -
  3. Desenes: suma un punt en aquesta columna per cada selector de classe, selector d'atributs o de pseudoclasse que està contingut dins del selector general.
    4. -
  4. Unitats: suma un punt en aquesta columna per cada selector d'elements o pseudoelement que està contingut dins del selector general.
    5. -
- -
-

Nota: El selector universal (*), els combinadors (+, >, ~, ' ') i la pseudoclasse de negació (:not) no tenen cap efecte sobre l'especificitat.

-
- -

La taula següent mostra alguns exemples aïllats per posar-te en situació. Estudia aquestes qüestions i assegura't d’entendre per què tenen aquestes especificitats. Encara no hem exposat detalladament els selectors, però pots trobar detalls de cada selector en la pàgina de referència dels selectors de MDN.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SelectorMilersCentenesDesenesUnitatsEspecificitat total
h100010001
h1 + p::first-letter00030003
li > a[href*="en-US"] > .inline-warning00220022
#identifier01000100
Cap selector, amb una regla dins de l’atribut {{htmlattrxref ("style")}} d'un element10001000
- -

Abans de continuar endavant, observa un exemple en acció.

- -

{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-boxes.html", '100%', 700)}} 

- -

Què hi passa, aquí? En primer lloc, només ens interessen les set primeres regles d’aquest exemple i, com ja deus haver observat, hem inclòs els seus valors d’especificitat en un comentari abans de cadascuna.

- - - -
    -
- -
-

Nota: Aquest ha estat només un exemple aproximat per facilitar-ne la comprensió. En realitat, cada tipus de selector té el seu nivell d'especificitat propi, que no pot ser sobreescrit per selectors amb un nivell d'especificitat inferior. Per exemple, una combinació de selectors d’una classe milió no podrien sobreescriure les regles d’un selector d’ID unitat.

- -

Una manera més precisa d’avaluar l’especificitat seria puntuar els nivells d’especificitat individualment començant pel més alt i descendint quan sigui necessari. Només quan hi hagi un empat entre puntuacions de selector dins d’un nivell d’especificitat, hauràs d'avaluar el nivell següent; en cas contrari, pots prescindir dels selectors de nivell d’especificitat inferior perquè mai podran sobreescriure els nivells d’especificitat més alts.

-
- -

!important

- -

Hi ha una element especial de CSS que podries utilitzar per substituir tots els càlculs anteriors, però has de tenir molta cura a l'hora de fer-lo servir: !important. S’utilitza per fer que una propietat i un valor particulars tinguin l’especificitat màxima; per tant, anul·la les regles normals de la cascada.

- -

Observa aquest exemple, en què hi ha dos paràgrafs, un dels quals té un selector d’ID.

- -

{{EmbedGHLiveSample("css-examples/learn/cascade/important.html", '100%', 700)}} 

- -

Fes-ne la prova i observa què succeeix. Si et costa d’entendre, prova d’eliminar algunes de les propietats i observa què passa:

- -
    -
  1. Veuràs que els valors {{cssxref("color")}} i {{cssxref("padding")}} de la tercera regla s'han aplicat, però {{cssxref("background-color")}} no ho ha fet. Per què? Els tres haurien d’aplicar-se sense cap problema, perquè les regles posteriors en l’ordre del codi en general anul·len les regles anteriors.
    2. -
  2. Tanmateix, les regles anteriors guanyen perquè els selectors de classe tenen una especificitat més alta que els selectors d’element.
    3. -
  3. Els dos elements tenen una {{htmlattrxref("class")}} better, però el segon té un {{htmlattrxref("id")}} winning. Com que els ID tenen una especificitat encara més elevada que les classes (només es pot tenir un element amb un determinat ID en una mateixa pàgina, però es poden tenir molts elements amb la mateixa classe: els selectors ID són molt específics amb allò que delimiten), el color de fons vermell i la vora negra d'1 píxel s'aplicaran tots dos estils al segon element, mentre que el primer element té un color de fons gris i cap vora, tal i com especifica la classe.
    4. -
  4. El segon element si adquireix un color de fons vermell, però no té cap vora. Per què? Perquè la declaració !important de la segona regla s’ha inclòs després de border: none, i això vol dir que aquesta declaració obté el valor de la vora border) de la regla anterior, tot i que l'ID té una especificitat més elevada.
    5. -
- -
-

Nota: L'única manera de substituir aquesta declaració !important seria incloure una altra declaració !important en una declaració amb la mateixa especificitat que es trobi més endavant en l'ordre del codi, o que presenti una especificitat més alta.

-
- -

És útil saber que !important existeix perquè sàpigues què és si t’ho trobes en el codi d’algú altre. Tanmateix, et recomanem fermament que no l'utilitzis tret que no tinguis cap altra alternativa. !important canvia el funcionament habitual de la cascada, de manera que pot complicar molt la resolució dels problemes de depuració de CSS, sobretot en un full d’estil.

- -

Una de les situacions en què potser l'has d'utilitzar és quan treballes en un CMS en què no pots editar els mòduls CSS bàsics, però vols substituir un estil que no es pot substituir de cap altra manera. Però, de debò, no ho facis servir si ho pots evitar!

- -

La importància de la ubicació del CSS

- -

Per acabar, és útil tenir en compte també que la importància d’una declaració CSS depèn de quin full d’estil s’especifica; és possible que els usuaris estableixin fulls d’estil personalitzats que anul·lin els estils del desenvolupador. Per exemple, l’usuari pot tenir una deficiència visual i pot voler definir una mida de lletra per a totes les pàgines web que visita que sigui el doble de la mida normal, per a poder llegir amb més facilitat.

- -

En resum

- -

Les declaracions que entren en conflicte s’aplicaran en l’ordre següent, en què les que apareixen amb posterioritat sempre reescriuen les anteriors:

- -
    -
  1. Declaracions en fulls d’estil d’agent d’usuari (per exemple, els estils predeterminats del navegador, que s’utilitzen quan no s’estableix cap altre estil).
    2. -
  2. Declaracions normals en fulls d’estil de l’usuari (estils personalitzats que estableix un usuari).
    3. -
  3. Declaracions normals en fulls d'estil d'autor (aquests són els estils que establim nosaltres, els desenvolupadors web).
    4. -
  4. Declaracions importants en fulls d’estil d’autor.
    5. -
  5. Declaracions importants en els fulls d'estil de l'usuari.
    6. -
- -

Té sentit que els fulls d’estil dels desenvolupadors web reemplacin els fulls d’estil dels usuaris, de manera que el disseny es pot mantenir tal i com es pretén, però a vegades els usuaris tenen bons motius per a anul·lar els estils dels desenvolupadors web, com ja s’ha esmentat; això es pot aconseguir amb !important en les regles d’estil.

- -

Posa a prova les teves habilitats

- -

Hem vist moltes coses en aquest article. Ets capaç de recordar-ne la informació més important? A Test your skills: the Cascade trobaràs més proves per verificar que has retingut aquesta informació abans de continuar.

- -

Què segueix?

- -

Si has entès el gruix d’aquest article, ja has començat a familiaritzar-te amb la mecànica fonamental del CSS. A continuació, examinarem els selectors amb detall.

- -

Si no has entès del tot els conceptes de la cascada, l'especificitat i l'herència, no et preocupis. Sens dubte, això és el més complicat que hem exposat fins ara, i a vegades fins i tot els desenvolupadors web professionals ho troben complicat. T’aconsellem que tornis a aquest article unes quantes vegades a mesura que avancis en el curs, i que hi continuïs pensant.

- -

Torna a aquest punt si comences a trobar-te amb problemes estranys amb estils que no s'apliquen com esperaves. Podria ser un problema d'especificitat.

- -

{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}

- -

En aquest mòdul

- -
    -
  1. La cascada i l'herència
    2. -
  2. Selectors CSS - -
    3. -
  3. El model de caixes
    4. -
  4. Fons i vores
    5. -
  5. El tractament del text en diverses direccions
    6. -
  6. El desbordament dels continguts
    7. -
  7. Els valors i les unitats
    8. -
  8. Dimensionar elements en CSS
    9. -
  9. Imatges, media i elements de formulari
    10. -
  10. Aplicar estil a les taules
    11. -
  11. Depurar el CSS
    12. -
  12. Organitza el teu CSS
    13. -
diff --git a/files/ca/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/ca/learn/css/building_blocks/cascade_and_inheritance/index.html new file mode 100644 index 0000000000..09a5e368eb --- /dev/null +++ b/files/ca/learn/css/building_blocks/cascade_and_inheritance/index.html @@ -0,0 +1,333 @@ +--- +title: Cascada i herència +slug: Learn/CSS/Building_blocks/Cascada_i_herència +translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance +--- +
{{LearnSidebar}}{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}
+ +

L’objectiu d’aquest article és desenvolupar la comprensió d’alguns dels conceptes més fonamentals del CSS (la cascada, l’especificitat i l’herència) que controlen com s’aplica el CSS a l’HTML i com es resolen els conflictes.

+ +

Si bé pot semblar que és menys rellevant i una mica més acadèmic que algunes altres parts del curs, la seva comprensió t'estalviarà feina més endavant! T’animem a treballar aquesta secció en profunditat i comprovar que entens els conceptes abans de continuar endavant.

+ + + + + + + + + + + + +
Prerequisits:Coneixements bàsics d'informàtica, tenir el programari bàsic instal·lat, coneixements bàsics de com treballar amb fitxers i d'HTML (mira Introducció a l'HTML) i nocions bàsiques de com funciona el CSS.
Objectiu:Aprendre què són la cascada i l'especificitat, i com funciona l'herència en CSS.
+ +

Regles conflictives

+ +

CSS significa fulls d'estil en cascada (cascading style sheets), i es molt important entendre la paraula, cascada; el comportament de la cascada és clau per a comprendre el CSS.

+ +

En algun moment treballaràs en un projecte i trobaràs que el CSS que creus que s’hauria d’aplicar a un element no funciona. Normalment, el problema és que has creat dues regles que podrien aplicar-se al mateix element. La cascada i el concepte d’especificitat, que estan estretament relacionats, són mecanismes que controlen quina regla s'aplica quan hi ha aquest conflicte. La regla que dona estil al teu element pot ser que no sigui la que esperaves, per la qual cosa has d'entendre com funcionen aquests mecanismes.

+ +

Aquí també és important el concepte d'herència, que significa que algunes propietats CSS per defecte hereten valors establerts per a l'element pare, i d'altres no. Això també pot causar algun comportament que potser no esperes.

+ +

Comencem per fer una ullada ràpida als elements clau que tractem i, a continuació, examinarem com interaccionen entre si i amb el CSS. Poden semblar un conjunt de conceptes complicats d’entendre. A mesura que vagis adquirint pràctica a l'hora d’escriure CSS, se’t farà més evident la manera que té de funcionar.

+ +

La cascada

+ +

Fulls d’estil en cascada: en un nivell molt senzill això significa que l’ordre de les regles CSS és important; quan s’apliquen dues regles que tenen la mateixa especificitat, la que s’utilitza és l'última que surt al codi CSS.

+ +

En l’exemple següent hi ha dues regles que podrien aplicar-se a h1. h1 acaba sent de color blau: aquestes regles tenen un selector idèntic i, per tant, porten la mateixa especificitat, de manera que l’última regla en el full d'estil guanya.

+ +

{{EmbedGHLiveSample("css-examples/learn/cascade/cascade-simple.html", '100%', 400)}} 

+ +

Especificitat

+ +

L’especificitat és la manera com el navegador decideix quina regla s’aplica si diverses regles tenen selectors diferents i poden aplicar-se al mateix element. Bàsicament és una mesura de com d'específica serà la selecció d'un selector:

+ + + +

Vegem-ne un exemple! A continuació, tornem a tenir dues regles que podrien aplicar-se a h1. L’encapçalament h1 següent acaba sent de color vermell: el selector de classe dona a aquesta regla una especificitat més alta, i per tant s'aplica encara que la regla amb el selector d'elements apareix més avall en el full d'estil.

+ +

{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-simple.html", '100%', 500)}} 

+ +

Més endavant explicarem la puntuació de l'especificitat.

+ +

Herència

+ +

L’herència també s’ha d’entendre en aquest context: els elements fill hereten alguns valors de propietat CSS que s’han establert en els elements pare, i no n’hereten d’altres.

+ +

Per exemple, si configures un element color i un font-family per a un element, aquest color i tipus de lletra també s’apliquen a tots els elements que hi hagi a dintre, tret que els hi hagis aplicat valors de color i lletra diferents directament.

+ +

{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance-simple.html", '100%', 550)}} 

+ +

Algunes propietats no s'hereten. Per exemple, si estableixes una amplada ({{cssxref("width")}}) del 50% per a un element, cap dels seus elements descendents adquireix una amplada del 50% de l'amplada de l'element pare. Si fos així, seria molt frustrant utilitzar CSS!

+ +
+

Nota: A les pàgines de referència de les propietats CSS de MDN, pots trobar un quadre d'informació tècnica, normalment a la part inferior de la secció d'especificacions, que enumera diversos punts de dades sobre aquesta propietat, inclòs si s'hereta o no. Consulta, per exemple, la secció Especificacions de la propietat del color.

+
+ +

Entendre com interaccionen els conceptes

+ +

Aquests tres conceptes controlen quin CSS s'aplica a cada element. En les seccions següents veurem com funcionen conjuntament. De vegades pot semblar una mica complicat, però començaràs a recordar-los a mesura que guanyis experiència amb el CSS, i sempre ho pots tornar a buscar si se t'obliden els detalls. Fins i tot als desenvolupadors experimentats els costa recordar tots els detalls.

+ +

Comprendre l’herència

+ +

Començarem per l'herència. En l'exemple següent hi ha un element {{HTMLElement("ul")}}, que conté dos nivells de llistes no ordenades. Hem definit per a l'element exterior <ul> una vora i un farciment, i n’hem canviat el color de la lletra.

+ +

El color s’ha aplicat als fills directes i també als indirectes: els elements fill immediats (<li>) i els que hi ha a la primera llista imbricada. Després, hem afegit una classe special a la segona llista imbricada i hi hem aplicat un color diferent, el qual hereten els fills d’aquesta.

+ +

{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance.html", '100%', 700)}} 

+ +

No s'hereten propietats com l'amplada (com ja s'ha esmentat), els marges, els farciments i les vores. Si els fills de la nostra llista haguessin d’heretar una vora, cada llista i element de llista obtindria una vora, i probablement no sigui un efecte que vulguem.

+ +

Quines propietats s'hereten de manera predeterminada i quines no, es en bona mesura qüestió de sentit comú.

+ +

Control de l’herència

+ +

El CSS proporciona quatre valors especials de propietat universal per a controlar l’herència. Totes les propietats CSS admeten aquests valors.

+ +
+
{{cssxref("inherit")}}
+
Estableix el valor de la propietat aplicat a un element seleccionat perquè sigui igual que el de l’element pare. Això, en efecte, «activa l'herència».
+
{{cssxref("initial")}}
+
Estableix que el valor de la propietat que s’aplica a l’element que se selecciona sigui igual que el valor que el full d'estil predeterminat del navegador estableix per a la propietat d’aquest element. Si el full d’estil predeterminat del navegador no estableix cap valor i la propietat s’hereta de manera natural, el valor de la propietat s’estableix en inherit.
+
{{cssxref("unset")}}
+
Restableix la propietat al seu valor natural, cosa que significa que si la propietat s’hereta naturalment, actua com a inherit, i en cas contrari, actua com a initial.
+
+ +
+

Nota: També hi ha un valor més recent, {{cssxref("revert")}}, que té un suport limitat per part dels navegadors.

+
+ +
+

Nota: Consulta la secció {{SectionOnPage("/en-US/docs/Web/CSS/Cascade", "Origin of CSS declarations")}} per obtenir més informació sobre cadascuna d'elles i el seu funcionament.

+
+ +

Podem observar una llista d’enllaços i analitzar com funcionen els valors universals. L’exemple en viu següent et permet jugar amb el CSS i veure què passa si hi fas canvis. Jugar amb el codi és realment la millor manera d’arribar a conèixer l'HTML i el CSS.

+ +

Per exemple:

+ +
    +
  1. El segon element de llista té aplicada la classe my-class-1. Estableix el color que hereta l’element <a> que té imbricat. Com canvia el color de l'enllaç si suprimeixes la regla?
    2. +
  2. Entens per què el tercer i el quart enllaços són del color que són? Si no és així, repassa la descripció dels valors anteriors.
    3. +
  3. Quin dels enllaços canvia de color si defineixes un color nou per a l'element <a>, per exemple a { color: red; }?
    4. +
+ +

{{EmbedGHLiveSample("css-examples/learn/cascade/keywords.html", '100%', 700)}} 

+ +

Restablir tots els valors de propietat

+ +

La propietat CSS abreviada all es pot utilitzar per a aplicar un d’aquests valors d’herència a (gairebé) totes les propietats alhora. El seu valor pot ser qualsevol dels valors d'herència (inherit, initial, unset o revert). És una manera còmoda de desfer els canvis que s’han aplicat a l’estil de manera que puguis tornar a un punt de partida conegut abans d'introduir canvis nous.

+ +

En l’exemple següent hi ha dues citacions de bloc. La primera té un estil que s’aplica directament sobre la citació de bloc, mentre que la segona té una classe aplicada a la citació de bloc que estableix el valor de all en unset.

+ +

{{EmbedGHLiveSample("css-examples/learn/cascade/all.html", '100%', 700)}} 

+ +

Prova d’establir el valor all a alguns dels altres valors disponibles i observa quina és la diferència.

+ +

Entendre la cascada

+ +

Ara entenem per què un paràgraf que està profundament imbricat dins l'estructura del teu HTML és del mateix color que el CSS que s’ha especificat per a body, i entenem per què canvia el CSS que, de les lliçons introductòries, hem aplicat a algun element en qualsevol punt del document, ja sigui assignant CSS a un element o creant una classe. Ara farem una ullada de més a prop a com la cascada defineix quines regles CSS s'apliquen quan hi ha més d'un situació que pot aplicar estil a un element.

+ +

Cal considerar tres factors, en un ordre d'importància creixent. Els posteriors anul·len els anteriors:

+ +
    +
  1. Ordre dins el codi
    2. +
  2. Especificitat
    3. +
  3. Importància
    4. +
+ +

Ara els analitzarem i descobrirem com els navegadors determinen quin CSS han d’aplicar.

+ +

Ordre dins el codi

+ +

Ja hem vist com l’ordre dins el codi és important en la cascada. Si hi ha més d’una regla, amb exactament el mateix pes, guanya la que apareix última en el CSS. Pots veure-ho com que les regles que són més properes a l'element sobreescriuen les anteriors fins que l'última guanya i estableix el disseny que es dona a l'element.

+ +

Especificitat

+ +

Un cop entès el fet que l’ordre dins el codi importa, en algun moment et pots topar amb una situació en què saps que no s’aplica la regla que apareix l’última en el full d’estil, sinó una d’anterior. Això es deu al fet que aquesta regla anterior té una especificitat més elevada: és més específica i, per tant, el navegador la tria per donar estil a l'element.

+ +

Com hem vist abans en aquest article, un selector de classes té més pes que un selector d’elements, de manera que les propietats definides per a la classe anul·len les que s’apliquen directament per a l’element.

+ +

Una observació important que cal fer aquí és que, tot i que pensem en selectors i regles que s’apliquen a l'element que seleccionen, no es sobreescriu tota la regla, sinó només les propietats que són iguals.

+ +

Aquest comportament ajuda a evitar repeticions dins el CSS. Una pràctica habitual és definir estils genèrics per als elements bàsics, i després crear classes per a aquells que són diferents. Per exemple, en el full d’estil següent hem definit estils genèrics per a títols d’encapçalament de nivell 2 i després hem creat algunes classes que canvien només algunes propietats i valors. Els valors definits inicialment s'apliquen a tots els títols d’encapçalament, i els valors més específics s'apliquen als títols d’encapçalament en què s'ha establert alguna classe.

+ +

{{EmbedGHLiveSample("css-examples/learn/cascade/mixing-rules.html", '100%', 700)}} 

+ +

Observa ara com calcula l’especificitat el navegador. Ja saps que un selector d’elements té una especificitat baixa i una classe el pot sobreescriure. Essencialment s’atorga un valor en punts als diferents tipus de selectors i, si se sumen, s’obté el pes concret de cada selector, que pot avaluar-se respecte d’altres coincidències potencials.

+ +

La quantitat d'especificitat que presenta un selector es mesura a partir de quatre valors (o components) diferents, que es poden entendre com si fossin milers, centenes, desenes i unitats; quatre dígits simples disposats en quatre columnes:

+ +
    +
  1. Milers: suma un punt en aquesta columna si la declaració es troba continguda dins d’un atribut {{htmlattrxref("style")}}, també conegut com estil de línia. Aquestes declaracions no tenen selectors, de manera que la seva especificitat és sempre de 1.000.
    2. +
  2. Centenes: suma un punt en aquesta columna per cada selector d’identificador que està contingut en el selector global.
    3. +
  3. Desenes: suma un punt en aquesta columna per cada selector de classe, selector d'atributs o de pseudoclasse que està contingut dins del selector general.
    4. +
  4. Unitats: suma un punt en aquesta columna per cada selector d'elements o pseudoelement que està contingut dins del selector general.
    5. +
+ +
+

Nota: El selector universal (*), els combinadors (+, >, ~, ' ') i la pseudoclasse de negació (:not) no tenen cap efecte sobre l'especificitat.

+
+ +

La taula següent mostra alguns exemples aïllats per posar-te en situació. Estudia aquestes qüestions i assegura't d’entendre per què tenen aquestes especificitats. Encara no hem exposat detalladament els selectors, però pots trobar detalls de cada selector en la pàgina de referència dels selectors de MDN.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SelectorMilersCentenesDesenesUnitatsEspecificitat total
h100010001
h1 + p::first-letter00030003
li > a[href*="en-US"] > .inline-warning00220022
#identifier01000100
Cap selector, amb una regla dins de l’atribut {{htmlattrxref ("style")}} d'un element10001000
+ +

Abans de continuar endavant, observa un exemple en acció.

+ +

{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-boxes.html", '100%', 700)}} 

+ +

Què hi passa, aquí? En primer lloc, només ens interessen les set primeres regles d’aquest exemple i, com ja deus haver observat, hem inclòs els seus valors d’especificitat en un comentari abans de cadascuna.

+ + + +
    +
+ +
+

Nota: Aquest ha estat només un exemple aproximat per facilitar-ne la comprensió. En realitat, cada tipus de selector té el seu nivell d'especificitat propi, que no pot ser sobreescrit per selectors amb un nivell d'especificitat inferior. Per exemple, una combinació de selectors d’una classe milió no podrien sobreescriure les regles d’un selector d’ID unitat.

+ +

Una manera més precisa d’avaluar l’especificitat seria puntuar els nivells d’especificitat individualment començant pel més alt i descendint quan sigui necessari. Només quan hi hagi un empat entre puntuacions de selector dins d’un nivell d’especificitat, hauràs d'avaluar el nivell següent; en cas contrari, pots prescindir dels selectors de nivell d’especificitat inferior perquè mai podran sobreescriure els nivells d’especificitat més alts.

+
+ +

!important

+ +

Hi ha una element especial de CSS que podries utilitzar per substituir tots els càlculs anteriors, però has de tenir molta cura a l'hora de fer-lo servir: !important. S’utilitza per fer que una propietat i un valor particulars tinguin l’especificitat màxima; per tant, anul·la les regles normals de la cascada.

+ +

Observa aquest exemple, en què hi ha dos paràgrafs, un dels quals té un selector d’ID.

+ +

{{EmbedGHLiveSample("css-examples/learn/cascade/important.html", '100%', 700)}} 

+ +

Fes-ne la prova i observa què succeeix. Si et costa d’entendre, prova d’eliminar algunes de les propietats i observa què passa:

+ +
    +
  1. Veuràs que els valors {{cssxref("color")}} i {{cssxref("padding")}} de la tercera regla s'han aplicat, però {{cssxref("background-color")}} no ho ha fet. Per què? Els tres haurien d’aplicar-se sense cap problema, perquè les regles posteriors en l’ordre del codi en general anul·len les regles anteriors.
    2. +
  2. Tanmateix, les regles anteriors guanyen perquè els selectors de classe tenen una especificitat més alta que els selectors d’element.
    3. +
  3. Els dos elements tenen una {{htmlattrxref("class")}} better, però el segon té un {{htmlattrxref("id")}} winning. Com que els ID tenen una especificitat encara més elevada que les classes (només es pot tenir un element amb un determinat ID en una mateixa pàgina, però es poden tenir molts elements amb la mateixa classe: els selectors ID són molt específics amb allò que delimiten), el color de fons vermell i la vora negra d'1 píxel s'aplicaran tots dos estils al segon element, mentre que el primer element té un color de fons gris i cap vora, tal i com especifica la classe.
    4. +
  4. El segon element si adquireix un color de fons vermell, però no té cap vora. Per què? Perquè la declaració !important de la segona regla s’ha inclòs després de border: none, i això vol dir que aquesta declaració obté el valor de la vora border) de la regla anterior, tot i que l'ID té una especificitat més elevada.
    5. +
+ +
+

Nota: L'única manera de substituir aquesta declaració !important seria incloure una altra declaració !important en una declaració amb la mateixa especificitat que es trobi més endavant en l'ordre del codi, o que presenti una especificitat més alta.

+
+ +

És útil saber que !important existeix perquè sàpigues què és si t’ho trobes en el codi d’algú altre. Tanmateix, et recomanem fermament que no l'utilitzis tret que no tinguis cap altra alternativa. !important canvia el funcionament habitual de la cascada, de manera que pot complicar molt la resolució dels problemes de depuració de CSS, sobretot en un full d’estil.

+ +

Una de les situacions en què potser l'has d'utilitzar és quan treballes en un CMS en què no pots editar els mòduls CSS bàsics, però vols substituir un estil que no es pot substituir de cap altra manera. Però, de debò, no ho facis servir si ho pots evitar!

+ +

La importància de la ubicació del CSS

+ +

Per acabar, és útil tenir en compte també que la importància d’una declaració CSS depèn de quin full d’estil s’especifica; és possible que els usuaris estableixin fulls d’estil personalitzats que anul·lin els estils del desenvolupador. Per exemple, l’usuari pot tenir una deficiència visual i pot voler definir una mida de lletra per a totes les pàgines web que visita que sigui el doble de la mida normal, per a poder llegir amb més facilitat.

+ +

En resum

+ +

Les declaracions que entren en conflicte s’aplicaran en l’ordre següent, en què les que apareixen amb posterioritat sempre reescriuen les anteriors:

+ +
    +
  1. Declaracions en fulls d’estil d’agent d’usuari (per exemple, els estils predeterminats del navegador, que s’utilitzen quan no s’estableix cap altre estil).
    2. +
  2. Declaracions normals en fulls d’estil de l’usuari (estils personalitzats que estableix un usuari).
    3. +
  3. Declaracions normals en fulls d'estil d'autor (aquests són els estils que establim nosaltres, els desenvolupadors web).
    4. +
  4. Declaracions importants en fulls d’estil d’autor.
    5. +
  5. Declaracions importants en els fulls d'estil de l'usuari.
    6. +
+ +

Té sentit que els fulls d’estil dels desenvolupadors web reemplacin els fulls d’estil dels usuaris, de manera que el disseny es pot mantenir tal i com es pretén, però a vegades els usuaris tenen bons motius per a anul·lar els estils dels desenvolupadors web, com ja s’ha esmentat; això es pot aconseguir amb !important en les regles d’estil.

+ +

Posa a prova les teves habilitats

+ +

Hem vist moltes coses en aquest article. Ets capaç de recordar-ne la informació més important? A Test your skills: the Cascade trobaràs més proves per verificar que has retingut aquesta informació abans de continuar.

+ +

Què segueix?

+ +

Si has entès el gruix d’aquest article, ja has començat a familiaritzar-te amb la mecànica fonamental del CSS. A continuació, examinarem els selectors amb detall.

+ +

Si no has entès del tot els conceptes de la cascada, l'especificitat i l'herència, no et preocupis. Sens dubte, això és el més complicat que hem exposat fins ara, i a vegades fins i tot els desenvolupadors web professionals ho troben complicat. T’aconsellem que tornis a aquest article unes quantes vegades a mesura que avancis en el curs, i que hi continuïs pensant.

+ +

Torna a aquest punt si comences a trobar-te amb problemes estranys amb estils que no s'apliquen com esperaves. Podria ser un problema d'especificitat.

+ +

{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}

+ +

En aquest mòdul

+ +
    +
  1. La cascada i l'herència
    2. +
  2. Selectors CSS + +
    3. +
  3. El model de caixes
    4. +
  4. Fons i vores
    5. +
  5. El tractament del text en diverses direccions
    6. +
  6. El desbordament dels continguts
    7. +
  7. Els valors i les unitats
    8. +
  8. Dimensionar elements en CSS
    9. +
  9. Imatges, media i elements de formulari
    10. +
  10. Aplicar estil a les taules
    11. +
  11. Depurar el CSS
    12. +
  12. Organitza el teu CSS
    13. +
diff --git a/files/ca/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.html b/files/ca/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.html new file mode 100644 index 0000000000..2623d6d0dd --- /dev/null +++ b/files/ca/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.html @@ -0,0 +1,97 @@ +--- +title: Creació d'una carta amb encapçalat de fantasia +slug: Learn/CSS/Caixes_estil/Creació_carta +tags: + - Assessment + - Background + - Beginner + - CSS + - CodingScripting + - border + - borderBoxes + - letter + - letterhead + - letterheaded + - paper +translation_of: Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes/A_cool_looking_box", "Learn/CSS/Styling_boxes")}}
+ +

Si voleu fer una impressió correcta, escriviu una carta amb un bon paper i una capçalera agradable pot ser un començament realment bo. En aquesta avaluació, us desafiarem a crear una plantilla en línia per aconseguir-ho.

+ + + + + + + + + + + + +
Requisits previs:Abans d'intentar aquesta avaluació, hauríeu d'haver treballat tots els articles d'aquest mòdul.
Objectiu:Provar la comprensió del model de caixa CSS i altres característiques relacionades amb la caixa, com ara la implementació de fons.
+ +

Punt de partida

+ +

Per començar aquesta avaluació, heu de:

+ + + +
+

Nota: Com a alternativa, podeu utilitzar un lloc com JSBin o Thimble per fer la vostra avaluació. Podeu enganxar el codi HTML i omplir el CSS en un d'aquests editors en línia. Si l'editor en línia que esteu utilitzant no té cap panell CSS independent, no dubteu a posar-lo en un element <style> al capdavant del document.

+
+ +

Resum del projecte

+ +

Se us ha donat els fitxers necessaris per crear una plantilla de paper amb capçalera. Només cal que col·loqueu els fitxers junts. Per arribar-hi, heu de:

+ +

La carta principal

+ + + +

El logotip

+ + + +

Consells i suggeriments

+ + + +

Exemple

+ +

La següent captura de pantalla mostra un exemple del que podria semblar el disseny final:

+ +

+ +

 

+ +

Avaluació

+ +

Si seguiu aquesta avaluació com a part d'un curs organitzat, hauríeu de poder lliurar el vostre treball al vostre professor/mentor per qualificar-ho. Si esteu en auto-aprenentatge, podreu obtenir la guia de qualificacions amb força facilitat preguntant sobre el tema en el fil de conversa en l'àrea d'aprenentatge, o en el canal IRC #mdn en Mozilla IRC. Intenteu primer l'exercici - no es guanya res fent trampes!

+ +

{{PreviousMenuNext("Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes/A_cool_looking_box", "Learn/CSS/Styling_boxes")}}

diff --git a/files/ca/learn/css/building_blocks/debugging_css/index.html b/files/ca/learn/css/building_blocks/debugging_css/index.html new file mode 100644 index 0000000000..273468969e --- /dev/null +++ b/files/ca/learn/css/building_blocks/debugging_css/index.html @@ -0,0 +1,198 @@ +--- +title: Depurar el CSS +slug: Learn/CSS/Building_blocks/Depurar_el_CSS +translation_of: Learn/CSS/Building_blocks/Debugging_CSS +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}}
+ +

En escriure codi CSS de vegades et pots trobar que el teu CSS no fa el que esperes. Pot ser que esperis que un determinat selector coincideixi amb un element, i no passa; o que una caixa tingui una mida diferent de la que t’esperaves. Aquest article et proporciona orientacions sobre com es pot emprendre la depuració d’un problema en CSS i et mostra com les eines de desenvolupador (DevTools) que tots els navegadors moderns inclouen et poden ajudar a esbrinar què passa.

+ + + + + + + + + + + + +
Prerequisits:Coneixements bàsics d'informàtica, tenir el programari bàsic instal·lat, coneixements bàsics de treballar amb fitxers i d'HTML (consulta la Introducció a l'HTML) i nocions de com funciona el CSS.
Objectiu:Adquirir informació bàsica sobre les eines de desenvolupador dels navegadors i aprendre a inspeccionar i editar el CSS de manera senzilla.
+ +

Com accedir a les eines de desenvolupador del navegador

+ +

L'article Què són les eines de desenvolupador dels navegadors és una guia actualitzada que explica com accedir a les eines de desenvolupament web en diversos navegadors i plataformes. Tot i que pots decidir fer el desenvolupament web majoritàriament en un navegador determinat, i per tant et familiaritzaràs amb les eines que inclou aquell navegador, val la pena saber com accedir-hi des d'altres navegadors. Això t’ajudarà si fas proves de les representacions que donen diferents navegadors.

+ +

També t’adonaràs que els diversos navegadors han decidit centrar-se en àrees diferents a l’hora de crear les eines de desenvolupador. Per exemple, en Firefox hi ha algunes eines excel·lents per a treballar visualment amb la compaginació amb CSS, que et permeten inspeccionar i editar Dissenys de graella, Flexbox i Formes. Ara bé, tots els diferents navegadors tenen eines fonamentals semblants; per exemple, per a inspeccionar les propietats i els valors que s’apliquen als elements de la teva pàgina i modificar-los des de l'editor.

+ +

En aquest article analitzarem algunes funcions útils de les eines de desenvolupador de Firefox per a treballar amb CSS. Per fer-ho, utilitzarem un fitxer d'exemple. Carrega’l en una pestanya nova si vols seguir-nos alhora, i obre les eines de desenvolupador tal com es descriu en l'article de l'enllaç anterior.

+ +

El DOM i el View Source

+ +

Una cosa que pot sorprendre els nouvinguts a DevTools és la diferència entre el que es veu quan mires el codi font d'una pàgina web o el fitxer HTML que hi ha penjat al servidor, i el que pots veure en la finestra HTML de DevTools. Tot i que s’assembla força al que es pot veure des de View Source, hi ha algunes diferències.

+ +

En el processat pel DOM, el navegador pot haver corregit un codi HTML mal escrit. Si has tancat un element de manera incorrecta, per exemple perquè has obert un <h2> però l’has tancat amb un </h3>, el navegador esbrina què volies fer i l'HTML del DOM tanca correctament l’etiqueta d’obertura <h2> amb l’etiqueta de tancament </h2> corresponent. El navegador també normalitza tot el codi HTML i el DOM mostra, a més, tots els canvis que s’hi fan amb JavaScript.

+ +

En canvi, View Source és simplement el codi font HTML que hi ha emmagatzemat en el servidor. L’arbre HTML de DevTools mostra exactament el que representa el navegador, de manera que et proporciona una visió detallada del que passa realment.

+ +

Inspecció del CSS aplicat

+ +

Selecciona un element de la teva pàgina, ja sigui fent clic amb el botó dret del ratolí o prement la tecla ctrl per seleccionar l'opció Inspeccionar, o selecciona’l en l'arbre HTML de l'esquerra de la pantalla de la interfície DevTools. Selecciona l'element amb la classe box1; aquest és el primer element de la pàgina que té una caixa que l’envolta.

+ +

Pàgina d'exemple per a aquest tutorial amb DevTools.

+ +

Si observes la vista de visualització de regles, Rules view, que hi ha a la dreta de l’HTML, pots veure les propietats i els valors CSS que s’apliquen a aquest element. S’hi veuen les regles que s’apliquen directament a la classe box1 i també les regles de CSS que la caixa hereta de l’element pare, en aquest cas <body>. Això és útil per a veure si s’aplica algun codi CSS que no esperes. Potser hi ha una regla que s’hereta d’un element pare i has d’afegir una regla que l’anul·li en el context d’aquest element.

+ +

També és útil la capacitat d’ampliar les propietats abreviades. En el nostre exemple hem fet servir la propietat abreviada margin.

+ +

Fes clic a la fletxa petita per a ampliar la vista i que se’n mostrin les diferents propietats sense abreviar i els valors.

+ +

Pots activar i desactivar els valors en la finestra de Visualització de regles quan aquest plafó està actiu; si hi passes el ratolí per sobre, apareixeran les caselles de verificació. Desmarca la casella de verificació d’una regla, per exemple border-radius i aquell CSS deixarà d’aplicar-se.

+ +

Pots utilitzar-ho per a fer una comparació entre A i B i decidir si alguna cosa es veu més bé amb una regla aplicada o no, i també per a ajudar a depurar-la. Per exemple, quan un disseny de pàgina web no funciona correctament i intentes esbrinar quina propietat provoca el problema.

+ +

Editar els valors

+ +

A més d’activar i desactivar propietats, pots editar-ne els valors. Pot ser que vulguis veure si un altre color escau més, o modificar la mida d'alguna cosa. Les DevTools et poden ajudar a estalviar molt de temps a l'hora d'editar un full d’estil i tornar a carregar la pàgina.

+ +

Amb l’element box1 seleccionat, fes clic en la mostra (el petit cercle de color) que mostra el color que s’aplica a la vora. S'obrirà un selector de colors i podràs provar amb colors diferents, que s'actualitzaran en temps real a la pàgina. De manera semblant pots canviar l'amplada o l'estil de la vora.

+ +

Taula d'estils de DevTools amb un selector de colors obert.

+ +

Afegir una propietat

+ +

Amb les DevTools pots afegir propietats. Que t'has adonat que no vols que la caixa hereti la mida de la lletra de l'element <body> i vols definir-hi una mida de lletra pròpia? Fes-ne primer la prova en les DevTools abans d’afegir-ho al teu fitxer CSS.

+ +

Fes clic en la clau de tancament de la regla i comença a introduir-hi una altra declaració; en el moment que comences a escriure, DevTools mostra una llista completa de les propietats que hi coincideixen. Selecciona la propietat per a la mida de la lletra (font-size) i introdueix-hi el valor que vols provar. També pots fer clic al botó + per a afegir una altra regla amb el mateix selector, i afegir-hi les regles noves.

+ +

El tauler DevTools quan afegeixes una propietat nova a les regles, amb l’eina de compleció automàtica oberta

+ +
+

Nota: També hi ha altres funcions útils en la vista de visualització de regles; per exemple, es ratllen les declaracions que tenen valors no vàlids. Pots obtenir més informació en l’article Examinar i editar el CSS.

+
+ +

Entendre el model de caixes

+ +

En articles anteriors hem parlat del model de caixes i del fet que tenim un model de caixes alternatiu que canvia la manera com es calculen les mides dels elements segons la mida que els proporciones, i també de l'àrea de farciment i els marges. Les DevTools et poden ajudar a entendre com es calcula la mida d'un element.

+ +

La vista de disposició mostra un esquema del model de caixes de l’element seleccionat, juntament amb una descripció de les propietats i els valors que canvien la manera com es disposa l’element en la pàgina. Inclou una descripció de les propietats que potser no has utilitzat explícitament sobre l'element, però que tenen valors inicials definits.

+ +

Una de les propietats que es detallen en aquesta taula és la propietat de dimensionament de caixa (box-sizing), que controla quin model de caixes utilitza l'element.

+ +

Compara les dues caixes amb les classes box1 i box2. Totes dues tenen definida la mateixa amplada (400px), però box1 és visualment més ampla. En la finestra de disseny pots veure que utilitza content-box. Aquest valor pren la mida que dones a l’element, i a continuació hi suma l’amplada de l'àrea de farciment i de les vores.

+ +

L’element amb una classe box2 fa servir border-box, de manera que aquí l’àrea de farciment i les vores es resten de la mida que has donat a l’element. Això significa que l'espai que ocupa la caixa en la pàgina és la mida exacta que has especificat, en el nostre cas: width: 400px.

+ +

La secció de compaginació dels DevTools

+ +
+

Nota: Obtén més informació sobre com examinar i inspeccionar el model de caixes.

+
+ +

Resolució de qüestions d'especificitat

+ +

De vegades durant el desenvolupament, però en particular quan necessites editar el CSS en un lloc que ja està en actiu, et trobes amb problemes per aconseguir que s’apliquin algunes regles CSS. No importa què facis, l'element simplement sembla que no entén la regla CSS. El que acostuma a passar és que un selector més específic anul·la els teus canvis, i aquí les DevTools et poden ajudar molt.

+ +

En el nostre fitxer d’exemple hi ha dues paraules incloses en un element <em>. Una es mostra de color carabassa, i l’altra de color rosa brillant. Al CSS hi hem aplicat:

+ +
em {
+  color: hotpink;
+  font-weight: bold;
+}
+ +

Per sobre de tot això, en el full d’estil hi ha una regla amb un selector .special:

+ +
.special {
+  color: orange;
+}
+ +

Com recordaràs de l'article sobre la cascada i l’herència en què comentem l’especificitat, els selectors de classe són més específics que els selectors d’elements, així que aquest és el valor que s’aplica. Les DevTools et poden ajudar a trobar aquest tipus de problemes, sobretot si la informació està amagada en algun lloc d'un extens full d'estil.

+ +

Inspecciona l'element <em> amb la classe .special i DevTools et mostrarà que el color que s'aplica és orange, i la propietat color aplicada a l'em està ratllada. Aquí pots veure que el selector de classe supera el selector d’elements.

+ +

Un element <code>em</code> seleccionat i inspeccionat amb DevTools per veure què anul•la el color.

+ +

Obtén més informació sobre les DevTools de Firefox

+ +

Hi ha molta informació sobre les DevTools de Firefox aquí a MDN. Dona una ullada a la secció principal de DevTools i consulta les Guies pràctiques per a obtenir més detalls sobre les qüestions que hem tractat breument en aquest article.

+ +

Problemes en depurar el CSS

+ +

Les DevTools poden ser de gran ajuda a l’hora de resoldre problemes en CSS, de manera que, què has de fer quan et trobes en una situació en què el CSS no es comporta com esperes? Els passos següents t’haurien d’ajudar.

+ +

Fes un pas enrere des del problema

+ +

Qualsevol problema de codificació pot ser frustrant, sobretot els problemes amb el CSS, perquè sovint no reps cap missatge d’error que et permeti de cercar en línia per ajudar-te a trobar una solució. Si et sents frustrat, allunyat de la qüestió durant un temps: passeja, pren-te un refresc, parla amb un company de feina o treballa en una altra cosa durant un temps. De vegades la solució apareix màgicament quan deixes de pensar en el problema i, fins i tot si no arriba, resulta molt més fàcil treballar quan et sent fresc.

+ +

Els teus HTML i CSS són vàlids?

+ +

Els navegadors esperen que tant el teu CSS com el teu HTML estiguin escrits correctament, però els navegadors també són molt indulgents i fan tot el possible per mostrar les teves pàgines web, encara que hi hagi errors d'etiquetatge. Si hi ha errors en el codi, el navegador ha de suposar què vols dir, i pot ser que prengui una decisió diferent de la que tenies en ment. A més, dos navegadors diferents podrien fer front al problema de maneres diferents. Per tant, un bon primer pas és executar tant el codi HTML com el CSS amb un validador, per a descobrir qualsevol error i esmenar-lo.

+ + + +

Les propietats i els valors són compatibles amb el navegador?

+ +

Els navegadors simplement ignoren el CSS que no entenen. Si la propietat o el valor que utilitzes no és compatible amb el navegador amb què fas les proves, no es trencarà res, però no s’aplicarà el CSS. Les DevTools en general ressalten d’alguna manera les propietats i els valors que no són compatibles. En la captura de pantalla següent, el navegador no admet el subvalor {{cssxref("grid-template-columns")}}.

+ +

Imatge de les DevTools del navegador amb el subvalor grid-template-columns: subgrid es mostra ratllat perquè aquest subvalor no és compatible.

+ +

També pots donar una ullada a les taules de compatibilitat del navegador que hi ha a la part inferior de cada pàgina de propietat del projecte MDN. Et mostren la compatibilitat del navegador per a aquesta propietat, sovint desglossada si hi ha compatibilitat per a algun ús de la propietat però no d’altres. La taula següent mostra les dades de compatibilitat per a la propietat {{cssxref("shape-outside")}}.

+ +

{{compat("css.shape-outside")}}

+ +

Alguna cosa anul·la el teu CSS?

+ +

Aquí és on la informació que has après sobre l’especificitat et resultarà molt útil. Si hi ha alguna regla que anul·la el que vols fer perquè té més especificitat, pots entrar en un joc molt frustrant per a intentar esbrinar què passa. Tanmateix, com es descriu més amunt, les DevTools et mostraran quin CSS s’aplica i podràs esbrinar com anul·lar-ho amb un nou selector que sigui prou específic.

+ +

Fer una prova reduïda del problema

+ +

Si el problema no es resol amb els passos anteriors, has d'investigar més. El millor que pots fer en aquest moment és crear una cosa que es coneix com a prova reduïda. Ser capaç de «reduir un problema» és una habilitat molt útil. T'ajuda a trobar problemes en el teu codi propi i en el dels teus companys, i també et permet informar d’errors i demanar ajuda de manera més efectiva.

+ +

Una prova reduïda és un exemple de codi que mostra el problema de la manera més senzilla possible, sense contingut ni estil. Això de vegades significa eliminar del teu disseny de pàgina web el codi problemàtic i fer-ne un petit exemple que només mostri aquest codi o aquesta funció.

+ +

Per a crear una prova reduïda:

+ +
    +
  1. Si el teu codi d’etiquetatge es genera dinàmicament (per exemple amb un CMS), fes una versió estàtica de la sortida que mostra el problema. Un lloc per compartir codi com CodePen és útil per a allotjar proves reduïdes, perquè aleshores són accessibles en línia i es poden compartir fàcilment amb els companys. Pots començar per visualitzar el codi d’origen de la pàgina i copiar l’HTML a CodePen; a continuació, inclou-hi qualsevol CSS i JavaScript rellevants. Després d'això, comprova si el problema encara hi és.
    2. +
  2. Si suprimir el JavaScript no fa desaparèixer el problema, no incloguis el JavaScript. Si suprimir el JavaScript fa desaparèixer el problema, elimina tant de JavaScript com et sigui possible, i deixa-hi només el que origina el problema.
    3. +
  3. Elimina qualsevol codi HTML que no contribueixi al problema. Elimina components, o fins i tot elements principals del disseny de pàgina. Un cop més, prova de reduir al mínim el codi mentre encara es mostri el problema.
    4. +
  4. Elimina qualsevol CSS que no afecti el problema.
    5. +
+ +

En aquest procés podràs descobrir què causa el problema, o com a mínim el podràs activar i desactivar en eliminar-ne quelcom específic. Val la pena afegir alguns comentaris al codi a mesura que descobreixes coses. Si has de demanar ajuda, aquests comentaris mostraran a la persona que t'ajuda el que ja has provat. O també et pot acabar de donar prou informació per a poder cercar problemes i situacions semblants.

+ +

Si encara no trobes la solució del problema, tenir una prova reduïda et permet demanar ajuda, publicar-la en un fòrum o mostrar-la a un col·laborador. És molt més probable obtenir ajuda si mostres que abans de fer-ho t’has pres la feina de reduir el problema i esbrinar exactament on passa. Aleshores, un desenvolupador amb més experiència pot ser capaç de detectar el problema ràpidament i orientar-te en la direcció correcta; o, encara que no sigui així, la teva prova reduïda els permetrà de donar-hi una ullada ràpida i, potser, oferir-te una mica d'ajuda.

+ +

En el cas que el problema sigui un error en un navegador, la prova reduïda també es pot fer servir per a enviar un informe d’errors al proveïdor del navegador corresponent (per exemple, a la pàgina web bugzilla de Mozilla).

+ +

A mesura que adquireixis més experiència amb el CSS aprendràs a veure amb més facilitat on hi ha els problemes. Tanmateix, fins i tot els més experimentats de nosaltres ens trobem de vegades barrinant què dimonis passa aquí. Adoptar un enfocament metòdic, fer una prova reduïda i explicar el problema a algú són possibilitats que acostumen a donar un bon resultat a l'hora de trobar una solució.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}}

+ +

En aquest mòdul

+ +
    +
  1. La cascada i l'herència
    2. +
  2. Els selectors CSS + +
    3. +
  3. El model de caixes
    4. +
  4. Fons i vores
    5. +
  5. El tractament del text en diverses direccions
    6. +
  6. El desbordament dels continguts
    7. +
  7. Els valors i les unitats
    8. +
  8. Dimensionar elements amb el CSS
    9. +
  9. Imatges, mèdia i elements de formulari
    10. +
  10. Aplicar estil a les taules
    11. +
  11. Depura el teu CSS
    12. +
  12. Organitza el teu CSS
    13. +
diff --git a/files/ca/learn/css/building_blocks/depurar_el_css/index.html b/files/ca/learn/css/building_blocks/depurar_el_css/index.html deleted file mode 100644 index 273468969e..0000000000 --- a/files/ca/learn/css/building_blocks/depurar_el_css/index.html +++ /dev/null @@ -1,198 +0,0 @@ ---- -title: Depurar el CSS -slug: Learn/CSS/Building_blocks/Depurar_el_CSS -translation_of: Learn/CSS/Building_blocks/Debugging_CSS ---- -
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}}
- -

En escriure codi CSS de vegades et pots trobar que el teu CSS no fa el que esperes. Pot ser que esperis que un determinat selector coincideixi amb un element, i no passa; o que una caixa tingui una mida diferent de la que t’esperaves. Aquest article et proporciona orientacions sobre com es pot emprendre la depuració d’un problema en CSS i et mostra com les eines de desenvolupador (DevTools) que tots els navegadors moderns inclouen et poden ajudar a esbrinar què passa.

- - - - - - - - - - - - -
Prerequisits:Coneixements bàsics d'informàtica, tenir el programari bàsic instal·lat, coneixements bàsics de treballar amb fitxers i d'HTML (consulta la Introducció a l'HTML) i nocions de com funciona el CSS.
Objectiu:Adquirir informació bàsica sobre les eines de desenvolupador dels navegadors i aprendre a inspeccionar i editar el CSS de manera senzilla.
- -

Com accedir a les eines de desenvolupador del navegador

- -

L'article Què són les eines de desenvolupador dels navegadors és una guia actualitzada que explica com accedir a les eines de desenvolupament web en diversos navegadors i plataformes. Tot i que pots decidir fer el desenvolupament web majoritàriament en un navegador determinat, i per tant et familiaritzaràs amb les eines que inclou aquell navegador, val la pena saber com accedir-hi des d'altres navegadors. Això t’ajudarà si fas proves de les representacions que donen diferents navegadors.

- -

També t’adonaràs que els diversos navegadors han decidit centrar-se en àrees diferents a l’hora de crear les eines de desenvolupador. Per exemple, en Firefox hi ha algunes eines excel·lents per a treballar visualment amb la compaginació amb CSS, que et permeten inspeccionar i editar Dissenys de graella, Flexbox i Formes. Ara bé, tots els diferents navegadors tenen eines fonamentals semblants; per exemple, per a inspeccionar les propietats i els valors que s’apliquen als elements de la teva pàgina i modificar-los des de l'editor.

- -

En aquest article analitzarem algunes funcions útils de les eines de desenvolupador de Firefox per a treballar amb CSS. Per fer-ho, utilitzarem un fitxer d'exemple. Carrega’l en una pestanya nova si vols seguir-nos alhora, i obre les eines de desenvolupador tal com es descriu en l'article de l'enllaç anterior.

- -

El DOM i el View Source

- -

Una cosa que pot sorprendre els nouvinguts a DevTools és la diferència entre el que es veu quan mires el codi font d'una pàgina web o el fitxer HTML que hi ha penjat al servidor, i el que pots veure en la finestra HTML de DevTools. Tot i que s’assembla força al que es pot veure des de View Source, hi ha algunes diferències.

- -

En el processat pel DOM, el navegador pot haver corregit un codi HTML mal escrit. Si has tancat un element de manera incorrecta, per exemple perquè has obert un <h2> però l’has tancat amb un </h3>, el navegador esbrina què volies fer i l'HTML del DOM tanca correctament l’etiqueta d’obertura <h2> amb l’etiqueta de tancament </h2> corresponent. El navegador també normalitza tot el codi HTML i el DOM mostra, a més, tots els canvis que s’hi fan amb JavaScript.

- -

En canvi, View Source és simplement el codi font HTML que hi ha emmagatzemat en el servidor. L’arbre HTML de DevTools mostra exactament el que representa el navegador, de manera que et proporciona una visió detallada del que passa realment.

- -

Inspecció del CSS aplicat

- -

Selecciona un element de la teva pàgina, ja sigui fent clic amb el botó dret del ratolí o prement la tecla ctrl per seleccionar l'opció Inspeccionar, o selecciona’l en l'arbre HTML de l'esquerra de la pantalla de la interfície DevTools. Selecciona l'element amb la classe box1; aquest és el primer element de la pàgina que té una caixa que l’envolta.

- -

Pàgina d'exemple per a aquest tutorial amb DevTools.

- -

Si observes la vista de visualització de regles, Rules view, que hi ha a la dreta de l’HTML, pots veure les propietats i els valors CSS que s’apliquen a aquest element. S’hi veuen les regles que s’apliquen directament a la classe box1 i també les regles de CSS que la caixa hereta de l’element pare, en aquest cas <body>. Això és útil per a veure si s’aplica algun codi CSS que no esperes. Potser hi ha una regla que s’hereta d’un element pare i has d’afegir una regla que l’anul·li en el context d’aquest element.

- -

També és útil la capacitat d’ampliar les propietats abreviades. En el nostre exemple hem fet servir la propietat abreviada margin.

- -

Fes clic a la fletxa petita per a ampliar la vista i que se’n mostrin les diferents propietats sense abreviar i els valors.

- -

Pots activar i desactivar els valors en la finestra de Visualització de regles quan aquest plafó està actiu; si hi passes el ratolí per sobre, apareixeran les caselles de verificació. Desmarca la casella de verificació d’una regla, per exemple border-radius i aquell CSS deixarà d’aplicar-se.

- -

Pots utilitzar-ho per a fer una comparació entre A i B i decidir si alguna cosa es veu més bé amb una regla aplicada o no, i també per a ajudar a depurar-la. Per exemple, quan un disseny de pàgina web no funciona correctament i intentes esbrinar quina propietat provoca el problema.

- -

Editar els valors

- -

A més d’activar i desactivar propietats, pots editar-ne els valors. Pot ser que vulguis veure si un altre color escau més, o modificar la mida d'alguna cosa. Les DevTools et poden ajudar a estalviar molt de temps a l'hora d'editar un full d’estil i tornar a carregar la pàgina.

- -

Amb l’element box1 seleccionat, fes clic en la mostra (el petit cercle de color) que mostra el color que s’aplica a la vora. S'obrirà un selector de colors i podràs provar amb colors diferents, que s'actualitzaran en temps real a la pàgina. De manera semblant pots canviar l'amplada o l'estil de la vora.

- -

Taula d'estils de DevTools amb un selector de colors obert.

- -

Afegir una propietat

- -

Amb les DevTools pots afegir propietats. Que t'has adonat que no vols que la caixa hereti la mida de la lletra de l'element <body> i vols definir-hi una mida de lletra pròpia? Fes-ne primer la prova en les DevTools abans d’afegir-ho al teu fitxer CSS.

- -

Fes clic en la clau de tancament de la regla i comença a introduir-hi una altra declaració; en el moment que comences a escriure, DevTools mostra una llista completa de les propietats que hi coincideixen. Selecciona la propietat per a la mida de la lletra (font-size) i introdueix-hi el valor que vols provar. També pots fer clic al botó + per a afegir una altra regla amb el mateix selector, i afegir-hi les regles noves.

- -

El tauler DevTools quan afegeixes una propietat nova a les regles, amb l’eina de compleció automàtica oberta

- -
-

Nota: També hi ha altres funcions útils en la vista de visualització de regles; per exemple, es ratllen les declaracions que tenen valors no vàlids. Pots obtenir més informació en l’article Examinar i editar el CSS.

-
- -

Entendre el model de caixes

- -

En articles anteriors hem parlat del model de caixes i del fet que tenim un model de caixes alternatiu que canvia la manera com es calculen les mides dels elements segons la mida que els proporciones, i també de l'àrea de farciment i els marges. Les DevTools et poden ajudar a entendre com es calcula la mida d'un element.

- -

La vista de disposició mostra un esquema del model de caixes de l’element seleccionat, juntament amb una descripció de les propietats i els valors que canvien la manera com es disposa l’element en la pàgina. Inclou una descripció de les propietats que potser no has utilitzat explícitament sobre l'element, però que tenen valors inicials definits.

- -

Una de les propietats que es detallen en aquesta taula és la propietat de dimensionament de caixa (box-sizing), que controla quin model de caixes utilitza l'element.

- -

Compara les dues caixes amb les classes box1 i box2. Totes dues tenen definida la mateixa amplada (400px), però box1 és visualment més ampla. En la finestra de disseny pots veure que utilitza content-box. Aquest valor pren la mida que dones a l’element, i a continuació hi suma l’amplada de l'àrea de farciment i de les vores.

- -

L’element amb una classe box2 fa servir border-box, de manera que aquí l’àrea de farciment i les vores es resten de la mida que has donat a l’element. Això significa que l'espai que ocupa la caixa en la pàgina és la mida exacta que has especificat, en el nostre cas: width: 400px.

- -

La secció de compaginació dels DevTools

- -
-

Nota: Obtén més informació sobre com examinar i inspeccionar el model de caixes.

-
- -

Resolució de qüestions d'especificitat

- -

De vegades durant el desenvolupament, però en particular quan necessites editar el CSS en un lloc que ja està en actiu, et trobes amb problemes per aconseguir que s’apliquin algunes regles CSS. No importa què facis, l'element simplement sembla que no entén la regla CSS. El que acostuma a passar és que un selector més específic anul·la els teus canvis, i aquí les DevTools et poden ajudar molt.

- -

En el nostre fitxer d’exemple hi ha dues paraules incloses en un element <em>. Una es mostra de color carabassa, i l’altra de color rosa brillant. Al CSS hi hem aplicat:

- -
em {
-  color: hotpink;
-  font-weight: bold;
-}
- -

Per sobre de tot això, en el full d’estil hi ha una regla amb un selector .special:

- -
.special {
-  color: orange;
-}
- -

Com recordaràs de l'article sobre la cascada i l’herència en què comentem l’especificitat, els selectors de classe són més específics que els selectors d’elements, així que aquest és el valor que s’aplica. Les DevTools et poden ajudar a trobar aquest tipus de problemes, sobretot si la informació està amagada en algun lloc d'un extens full d'estil.

- -

Inspecciona l'element <em> amb la classe .special i DevTools et mostrarà que el color que s'aplica és orange, i la propietat color aplicada a l'em està ratllada. Aquí pots veure que el selector de classe supera el selector d’elements.

- -

Un element <code>em</code> seleccionat i inspeccionat amb DevTools per veure què anul•la el color.

- -

Obtén més informació sobre les DevTools de Firefox

- -

Hi ha molta informació sobre les DevTools de Firefox aquí a MDN. Dona una ullada a la secció principal de DevTools i consulta les Guies pràctiques per a obtenir més detalls sobre les qüestions que hem tractat breument en aquest article.

- -

Problemes en depurar el CSS

- -

Les DevTools poden ser de gran ajuda a l’hora de resoldre problemes en CSS, de manera que, què has de fer quan et trobes en una situació en què el CSS no es comporta com esperes? Els passos següents t’haurien d’ajudar.

- -

Fes un pas enrere des del problema

- -

Qualsevol problema de codificació pot ser frustrant, sobretot els problemes amb el CSS, perquè sovint no reps cap missatge d’error que et permeti de cercar en línia per ajudar-te a trobar una solució. Si et sents frustrat, allunyat de la qüestió durant un temps: passeja, pren-te un refresc, parla amb un company de feina o treballa en una altra cosa durant un temps. De vegades la solució apareix màgicament quan deixes de pensar en el problema i, fins i tot si no arriba, resulta molt més fàcil treballar quan et sent fresc.

- -

Els teus HTML i CSS són vàlids?

- -

Els navegadors esperen que tant el teu CSS com el teu HTML estiguin escrits correctament, però els navegadors també són molt indulgents i fan tot el possible per mostrar les teves pàgines web, encara que hi hagi errors d'etiquetatge. Si hi ha errors en el codi, el navegador ha de suposar què vols dir, i pot ser que prengui una decisió diferent de la que tenies en ment. A més, dos navegadors diferents podrien fer front al problema de maneres diferents. Per tant, un bon primer pas és executar tant el codi HTML com el CSS amb un validador, per a descobrir qualsevol error i esmenar-lo.

- - - -

Les propietats i els valors són compatibles amb el navegador?

- -

Els navegadors simplement ignoren el CSS que no entenen. Si la propietat o el valor que utilitzes no és compatible amb el navegador amb què fas les proves, no es trencarà res, però no s’aplicarà el CSS. Les DevTools en general ressalten d’alguna manera les propietats i els valors que no són compatibles. En la captura de pantalla següent, el navegador no admet el subvalor {{cssxref("grid-template-columns")}}.

- -

Imatge de les DevTools del navegador amb el subvalor grid-template-columns: subgrid es mostra ratllat perquè aquest subvalor no és compatible.

- -

També pots donar una ullada a les taules de compatibilitat del navegador que hi ha a la part inferior de cada pàgina de propietat del projecte MDN. Et mostren la compatibilitat del navegador per a aquesta propietat, sovint desglossada si hi ha compatibilitat per a algun ús de la propietat però no d’altres. La taula següent mostra les dades de compatibilitat per a la propietat {{cssxref("shape-outside")}}.

- -

{{compat("css.shape-outside")}}

- -

Alguna cosa anul·la el teu CSS?

- -

Aquí és on la informació que has après sobre l’especificitat et resultarà molt útil. Si hi ha alguna regla que anul·la el que vols fer perquè té més especificitat, pots entrar en un joc molt frustrant per a intentar esbrinar què passa. Tanmateix, com es descriu més amunt, les DevTools et mostraran quin CSS s’aplica i podràs esbrinar com anul·lar-ho amb un nou selector que sigui prou específic.

- -

Fer una prova reduïda del problema

- -

Si el problema no es resol amb els passos anteriors, has d'investigar més. El millor que pots fer en aquest moment és crear una cosa que es coneix com a prova reduïda. Ser capaç de «reduir un problema» és una habilitat molt útil. T'ajuda a trobar problemes en el teu codi propi i en el dels teus companys, i també et permet informar d’errors i demanar ajuda de manera més efectiva.

- -

Una prova reduïda és un exemple de codi que mostra el problema de la manera més senzilla possible, sense contingut ni estil. Això de vegades significa eliminar del teu disseny de pàgina web el codi problemàtic i fer-ne un petit exemple que només mostri aquest codi o aquesta funció.

- -

Per a crear una prova reduïda:

- -
    -
  1. Si el teu codi d’etiquetatge es genera dinàmicament (per exemple amb un CMS), fes una versió estàtica de la sortida que mostra el problema. Un lloc per compartir codi com CodePen és útil per a allotjar proves reduïdes, perquè aleshores són accessibles en línia i es poden compartir fàcilment amb els companys. Pots començar per visualitzar el codi d’origen de la pàgina i copiar l’HTML a CodePen; a continuació, inclou-hi qualsevol CSS i JavaScript rellevants. Després d'això, comprova si el problema encara hi és.
    2. -
  2. Si suprimir el JavaScript no fa desaparèixer el problema, no incloguis el JavaScript. Si suprimir el JavaScript fa desaparèixer el problema, elimina tant de JavaScript com et sigui possible, i deixa-hi només el que origina el problema.
    3. -
  3. Elimina qualsevol codi HTML que no contribueixi al problema. Elimina components, o fins i tot elements principals del disseny de pàgina. Un cop més, prova de reduir al mínim el codi mentre encara es mostri el problema.
    4. -
  4. Elimina qualsevol CSS que no afecti el problema.
    5. -
- -

En aquest procés podràs descobrir què causa el problema, o com a mínim el podràs activar i desactivar en eliminar-ne quelcom específic. Val la pena afegir alguns comentaris al codi a mesura que descobreixes coses. Si has de demanar ajuda, aquests comentaris mostraran a la persona que t'ajuda el que ja has provat. O també et pot acabar de donar prou informació per a poder cercar problemes i situacions semblants.

- -

Si encara no trobes la solució del problema, tenir una prova reduïda et permet demanar ajuda, publicar-la en un fòrum o mostrar-la a un col·laborador. És molt més probable obtenir ajuda si mostres que abans de fer-ho t’has pres la feina de reduir el problema i esbrinar exactament on passa. Aleshores, un desenvolupador amb més experiència pot ser capaç de detectar el problema ràpidament i orientar-te en la direcció correcta; o, encara que no sigui així, la teva prova reduïda els permetrà de donar-hi una ullada ràpida i, potser, oferir-te una mica d'ajuda.

- -

En el cas que el problema sigui un error en un navegador, la prova reduïda també es pot fer servir per a enviar un informe d’errors al proveïdor del navegador corresponent (per exemple, a la pàgina web bugzilla de Mozilla).

- -

A mesura que adquireixis més experiència amb el CSS aprendràs a veure amb més facilitat on hi ha els problemes. Tanmateix, fins i tot els més experimentats de nosaltres ens trobem de vegades barrinant què dimonis passa aquí. Adoptar un enfocament metòdic, fer una prova reduïda i explicar el problema a algú són possibilitats que acostumen a donar un bon resultat a l'hora de trobar una solució.

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}}

- -

En aquest mòdul

- -
    -
  1. La cascada i l'herència
    2. -
  2. Els selectors CSS - -
    3. -
  3. El model de caixes
    4. -
  4. Fons i vores
    5. -
  5. El tractament del text en diverses direccions
    6. -
  6. El desbordament dels continguts
    7. -
  7. Els valors i les unitats
    8. -
  8. Dimensionar elements amb el CSS
    9. -
  9. Imatges, mèdia i elements de formulari
    10. -
  10. Aplicar estil a les taules
    11. -
  11. Depura el teu CSS
    12. -
  12. Organitza el teu CSS
    13. -
diff --git a/files/ca/learn/css/building_blocks/desbordament_de_contingut/index.html b/files/ca/learn/css/building_blocks/desbordament_de_contingut/index.html deleted file mode 100644 index 2ee0dc6129..0000000000 --- a/files/ca/learn/css/building_blocks/desbordament_de_contingut/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: Desbordament de contingut -slug: Learn/CSS/Building_blocks/Desbordament_de_contingut -translation_of: Learn/CSS/Building_blocks/Overflowing_content ---- -
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}
- -

En aquest apartat veurem un altre concepte important en CSS: el desbordament. El desbordament és el que succeeix quan hi ha massa contingut i no cap còmodament en una caixa. En aquesta guia aprendràs què és i com gestionar-lo.

- - - - - - - - - - - - -
Prerequisits:Coneixements bàsics d'informàtica, tenir el programari bàsic instal·lat, coneixements bàsics de treballar amb fitxers i d'HTML (mira Introducció a l'HTML) i nocions de CSS (consulta els Primers passos amb el CSS).
Objectiu:Entendre el desbordament i com gestionar-lo.
- -

Què és el desbordament?

- -

Ja sabem que tot en CSS són caixes i que podem restringir la mida d’aquestes caixes assignant valors als atributs {{cssxref("width")}} i {{cssxref("height")}} (o {{cssxref("inline-size")}} i {{cssxref("block-size")}}). El desbordament és el que succeeix quan dins d’una caixa hi ha massa contingut i no hi cap. El CSS t'ofereix diverses eines per a gestionar aquest desbordament, i també és un concepte útil de comprendre en aquesta fase inicial. Et trobaràs amb situacions de desbordament força sovint quan escriguis CSS, sobretot quan aprofundeixis en el disseny de pàgines web amb CSS.

- -

El CSS tracta d'evitar «la pèrdua de dades»

- -

Comencem per examinar dos exemples que mostren com es comporta per defecte el CSS quan es desborda.

- -

El primer és una caixa a la que s’han restringit les dimensions del bloc en donar-hi una alçada (height). Després s’hi ha afegit més contingut del que cap en l’espai de la caixa. El contingut de la caixa es desborda i s’encavalca desordenadament sobre el paràgraf que hi ha a sota.

- -

{{EmbedGHLiveSample("css-examples/learn/overflow/block-overflow.html", '100%', 600)}}

- -

El segon consisteix en una paraula dins d'una caixa en la qual s’ha restringit la dimensió de línia. La caixa s'ha fet massa petita perquè la paraula hi càpiga, i acaba sortint més enllà de la caixa.

- -

{{EmbedGHLiveSample("css-examples/learn/overflow/inline-overflow.html", '100%', 500)}}

- -

Pot ser que et preguntis per què el CSS ha adoptat per defecte l’enfocament més aviat desarreglat de provocar el desbordament del contingut. Per què no amagar el contingut de més, o fer créixer la caixa?

- -

Sempre que és possible, el CSS no amaga cap part de contingut; fer-ho provocaria la pèrdua de dades, i això acostuma a ser un problema. En termes de CSS, això significa que una part del contingut desapareix. El problema que el contingut s’esvaeixi és que podria passar que no t'adonis que ha desaparegut. Pot passar que els visitants de la teva pàgina no s'adonin que ha desaparegut. Pot tractar-se del botó d'enviament d'un formulari, i ningú no podria completar el formulari; això, és un gran problema! Per tant, el CSS tendeix a desbordar-se de manera visible. D’aquesta manera és probable que t’adonis del desperfecte o, en el pitjor dels casos, que un visitant del teu lloc web t'informi que una part del contingut s’encavalca amb una altra, i que s’ha de rectificar.

- -

Si has restringit la mida d’una caixa amb width o height, el CSS suposa que saps què fas i que gestiones el potencial de desbordament. En general, restringir la mida d’un bloc és problemàtic quan es col·loca text en una caixa, perquè pot haver-hi més text del que esperaves en el moment de dissenyar un lloc web, o que el text ocupi més espai, per exemple, perquè l'usuari ha augmentat la mida de la lletra.

- -

En el proper parell d’articles veurem diferents maneres de controlar la mida que poden ser menys propenses al desbordament. Tanmateix, també pots controlar la manera com es comporta el desbordament si necessites una mida fixa. Continua llegint!

- -

La propietat overflow

- -

La propietat {{cssxref("overflow")}} és la manera de prendre el control del desbordament d'un element i dir al navegador com volem que s’hi comporti. El valor per defecte del desbordament és visible, és per això que per defecte podem veure el nostre contingut quan es desborda.

- -

Si vols que el contingut que desborda es talli, pots establir el valor overflow: hidden per a la caixa. Això farà exactament el que diu: amagar el desbordament. Això pot causar la desaparició de les coses, de manera que només ho hauries de fer si ocultar contingut no causarà cap problema.

- -

{{EmbedGHLiveSample("css-examples/learn/overflow/hidden.html", '100%', 600)}}

- -

Potser voldries posar barres de desplaçament quan el contingut es desborda. Si utilitzes overflow: scroll, el navegador sempre mostra les barres de desplaçament, fins i tot quan no hi ha prou contingut per a desbordar-se. Pot ser que vulguis fer-ho així perquè evita que les barres de desplaçament apareguin i desapareguin en funció del contingut.

- -

Observa que si vas traient part del contingut que hi ha en la caixa següent, les barres de desplaçament de la caixa es mantenen, fins i tot quan no hi ha res per desplaçar.

- -

{{EmbedGHLiveSample("css-examples/learn/overflow/scroll.html", '100%', 600)}}

- -

En l’exemple anterior només hem de desplaçar-nos per l’eix y, però tenim barres de desplaçament en els dos eixos. En lloc d’això, podries utilitzar la propietat {{cssxref("overflow-y")}} i establir overflow-y: scroll, i et desplaçaries només sobre l'eix y.

- -

{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-y.html", '100%', 600)}}

- -

També pots desplaçar-te sobre l'eix x amb {{cssxref("overflow-x")}}, tot i que no és recomanable quan apareixen paraules llargues. Consulta les propietats {{cssxref("word-break")}} o {{cssxref("overflow-wrap")}} si has de treballar amb paraules llargues en una caixa petita. També et poden ajudar a crear caixes que s’adaptin més bé segons la quantitat de contingut alguns dels mètodes que s’exposen en l’apartat Dimensionament d’elements amb CSS.

- -

{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-x.html", '100%', 500)}}

- -

Igual que amb scroll, obtindràs una barra de desplaçament en la dimensió de desplaçament si hi ha prou contingut per provocar l’aparició d’una barra de desplaçament.

- -
-

Nota: pots especificar el desplaçament en x i en y amb la propietat overflow passant-hi dos valors. Si s’especifiquen dues paraules clau, la primera s’aplica a overflow-x i la segona a overflow-y. En cas contrari, tant overflow-x com overflow-y s’estableixen en el mateix valor. Per exemple, overflow: scroll hidden configuraria overflow-x per a scroll i overflow-y per a hidden.

-
- -

Si vols que les barres de desplaçament apareguin només si hi ha més contingut del que es pot incloure dins de la caixa, utilitza overflow: auto. En aquest cas, el navegador decideix quan mostra les barres de desplaçament. Els navegadors per als equips d'escriptori normalment ho fan només quan hi ha prou contingut per a provocar desbordament.

- -

En l’exemple següent, elimina una mica de contingut fins que no càpiga en la caixa i observa que les barres de desplaçament desapareixen.

- -

{{EmbedGHLiveSample("css-examples/learn/overflow/auto.html", '100%', 600)}}

- -

El desbordament estableix un context de formatació de bloc

- -

Hi ha un concepte en CSS que s'anomena block formatting context (context de formatació de bloc) o BFC. No és res que t'hagi de preocupar gaire ara mateix, però és útil saber que quan empres un valor de desbordament com ara scroll o auto, crees un BFC. El resultat és que el contingut de la caixa en què has canviat el valor overflow es converteix en un mini disseny de pàgina web propi. Les coses que hi ha fora del contenidor no poden ficar-se en el contenidor, i res pot sobresortir de la caixa cap als elements del disseny de pàgina web del voltant. Això és per permetre el comportament amb desplaçament, perquè per a crear una experiència de desplaçament coherent, tot el contingut de la caixa ha d’estar-hi contingut i no en pot sobresortir ni superposar-se amb altres elements de la pàgina.

- -

Desbordaments no volguts en el disseny web

- -

Els mètodes de disseny moderns (tal com es recull en el mòdul de Disseny de pàgines web amb CSS) gestionen molt bé el desbordament. Han estat dissenyats per fer front al fet que normalment no podem predir la quantitat de contingut que hi haurà en una pàgina web. En el passat, però, els desenvolupadors solien utilitzar altures fixes per a intentar alinear els extrems inferiors de caixes que en realitat no tenien cap relació entre elles. Això era fràgil, i encara et pots topar amb aplicacions heretades en què el contingut d’una caixa se superposa amb un altre contingut de la pàgina. Si veus això, sabràs que es tracta de desbordament; l'ideal seria que tornis a fer un càlcul de les mides dels elements de disseny de la pàgina per no haver de dependre de mides de caixa fixes.

- -

En desenvolupar un lloc sempre has de tenir en compte els problemes de desbordament. Has de provar els dissenys amb quantitats de contingut grans i petites, augmentar la mida de la lletra del text i assegurar-te que el teu CSS pot fer-ho de manera coherent. És probable que et vulguis reservar les opcions de canviar el valor de desbordament per ocultar contingut o afegir barres de desplaçament només per a casos especials, per exemple, per quan realment vols una caixa amb barres de desplaçament.

- -

Posa a prova els teus coneixements

- -

Hi ha moltes coses a absorbir en aquesta lliço. En recordes la informació més important? Per comprovar-ho, vés a Test your skills: overflow.

- -

Resum

- -

Aquest breu article ha introduït el concepte de desbordament; ara entens que el CSS intenta no invisibilitzar el contingut que es desborda perquè això causa la pèrdua de dades. Has descobert que pots gestionar un desbordament potencial i també que has de fer proves per assegurar-te que la teva feina no causa accidentalment desbordaments problemàtics.

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}

- -

En aquest mòdul

- -
    -
  1. La cascada i l'herència
    2. -
  2. Els selectors CSS - -
    3. -
  3. El model de caixes
    4. -
  4. Fons i vores
    5. -
  5. El tractament del text en diferents direccions
    6. -
  6. El desbordament del contingut
    7. -
  7. Els valors i les unitats
    8. -
  8. Dimensionament d’elements amb CSS
    9. -
  9. Imatges, media i controls de formulari
    10. -
  10. Aplicar estil a les taules
    11. -
  11. Depura el teu CSS
    12. -
  12. Organitza el teu CSS
    13. -
diff --git a/files/ca/learn/css/building_blocks/dimensionar_elements_en_css/index.html b/files/ca/learn/css/building_blocks/dimensionar_elements_en_css/index.html deleted file mode 100644 index 5ff34b8d93..0000000000 --- a/files/ca/learn/css/building_blocks/dimensionar_elements_en_css/index.html +++ /dev/null @@ -1,129 +0,0 @@ ---- -title: Dimensionar elements en CSS -slug: Learn/CSS/Building_blocks/Dimensionar_elements_en_CSS -translation_of: Learn/CSS/Building_blocks/Sizing_items_in_CSS ---- -
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}
- -

En els articles que hem vist fins ara has descobert diverses maneres de dimensionar els elements d'una pàgina web amb CSS. És important entendre la importància de les diferents característiques dels elements del teu disseny, i en aquest article resumim les maneres com assignar una mida als elements amb CSS i definim uns quants termes relatius al dimensionament que t'ajudaran en el futur.

- - - - - - - - - - - - -
Prerequisits:Coneixements bàsics d'informàtica, tenir el programari bàsic instal·lat, coneixements bàsics de treballar amb fitxers i d'HTML (mira Introducció a l'HTML) i nocions de com funciona el CSS.
Objectiu:Entendre les diferents maneres com podem assignar mides als elements amb CSS.
- -

La mida natural o intrínseca de les coses

- -

Els elements HTML tenen una mida natural predeterminada abans que els afecti cap codi CSS. Un exemple senzill n’és una imatge. Una imatge té una amplada i una alçada definides en el fitxer d'imatge, que s'incorpora a la pàgina. Aquesta mida es descriu com la mida intrínseca, que prové de la imatge mateixa.

- -

Quan poses una imatge en una pàgina i no en canvies l’alçada i l’amplada, ja sigui amb atributs en l’etiqueta <img> o amb el CSS, es mostra amb aquesta mida intrínseca. Hem donat a la imatge de l’exemple següent una vora perquè puguis veure la dimensió que té el fitxer.

- -

{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-image.html", '100%', 600)}}

- -

Un element {{htmlelement("div")}} buit, però, no té mida pròpia. Si afegeixes un element {{htmlelement("div")}} sense contingut al teu HTML, i hi poses una vora, com hem fet abans amb la imatge, veuràs que a la pàgina apareix una línia. Es tracta de la vora de l'element replegat sobre si mateix perquè no té contingut que el mantingui obert. En el nostre exemple següent, aquesta vora s'estén per tota l'amplada de l’element que el conté, perquè és un element que té un comportament de bloc, amb el qual ja t'hauries de començar a familiaritzar. No té alçada (ni mida en la dimensió del bloc) perquè no hi ha contingut.

- -

{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-text.html", '100%', 500)}}

- -

Afegeix una mica de text a l'interior de l'element buit de l'exemple anterior. Ara la vora envolta aquest text perquè el contingut defineix l'altura de l'element. La mida d'aquest element <div> en la dimensió del bloc prové, per tant, de la mida del contingut. Una vegada més, aquesta és la mida intrínseca de l'element: el contingut en defineix la mida.

- -

Configurar una mida específica

- -

Per descomptat, podem donar una mida específica als elements del nostre disseny. Quan es dona una mida a un element (el contingut del qual hauria d’encaixar en aquesta mida) ens hi referim com la mida extrínseca. Agafa els elements <div> de l'exemple anterior: podem donar-los valors específics d'amplada i d'alçada, i aleshores tindran aquesta mida, independentment del contingut que hi fiquem a dins. Tal com vam descobrir en l’anterior article sobre el desbordament, una altura fixa pot provocar el desbordament del contingut si el contingut no cap en l’espai de la caixa.

- -

{{EmbedGHLiveSample("css-examples/learn/sizing/height.html", '100%', 600)}}

- -

Arranjar l'alçada dels elements amb longituds o percentatges s’ha de fer amb molta cura justament pel problema del desbordament.

- -

L'ús de percentatges

- -

En molts sentits, els percentatges actuen com unitats de longitud, i com hem comentat en l'article sobre valors i unitats, sovint es poden intercanviar amb les longituds. Quan fas servir un percentatge has de ser conscient de què és percentatge. En el cas d’una caixa dins d’un altre contenidor, si dones a la caixa secundària un percentatge d’amplada, serà un percentatge de l’amplada del contenidor principal.

- -

{{EmbedGHLiveSample("css-examples/learn/sizing/percent-width.html", '100%', 600)}}

- -

Això és perquè els percentatges es calculen a partir de la mida del bloc contenidor. Sense un percentatge aplicat, el nostre element <div> ocuparia el 100% de l'espai disponible, perquè és un element de bloc. Si hi donem un percentatge d’amplada, es converteix en un percentatge de l’espai que ompliria normalment.

- -

Marges i àrea de farciment com a percentatges

- -

Si estableixes margins i padding com percentatges, pot ser que observis algun comportament estrany. En l’exemple següent hi ha una caixa. Hem assignat a la caixa interior un marge ({{cssxref("margin")}}) del 10% i un àrea de farciment ({{cssxref("padding")}}) també del 10%. L'àrea de farciment i el marge de les parts superior i inferior de la caixa tenen la mateixa mida que els marges de l’esquerra i la dreta.

- -

{{EmbedGHLiveSample("css-examples/learn/sizing/percent-mp.html", '100%', 700)}}

- -

Podries esperar, per exemple, que el percentatge dels marges superior i inferior sigui un percentatge de l'alçada de l'element, i que el percentatge dels marges esquerre i dret sigui un percentatge de l'amplada de l'element. Però aquest no és el cas!

- -

Quan utilitzes marges i àrees de farciment definits en percentatges, el valor es calcula a partir de la mida de l’element de línia, per tant, de l'amplada de l'element quan es treballa en un llenguatge horitzontal. En el nostre exemple, tots els marges i l'àrea de farciment són del 10% de l'amplada de l'element. Això significa que pots tenir marges i àrea de farciment de la mateixa mida al voltant de la caixa. És un fet que val la pena de recordar si utilitzes els percentatges d'aquesta manera.

- -

Mida mínima i màxima

- -

A més d’assignar mides fixes a les coses, podem demanar al CSS que doni a un element una mida mínima o màxima. Si tens una caixa que pot contenir una quantitat variable de contingut i vols que sempre tingui una alçada determinada com a mínim, pots establir la propietat {{cssxref("min-height")}}. La caixa sempre serà almenys d'aquesta alçada, però creixerà si hi ha més contingut del que pot contenir amb aquesta alçada mínima.

- -

En l'exemple següent hi ha dues caixes, totes dues amb una alçada establerta en 150 píxels. La caixa de l’esquerra té 150 píxels d’alçada; la caixa de la dreta ha augmentat la mida a més de 150 píxels perquè té més contingut i no hi cabria.

- -

{{EmbedGHLiveSample("css-examples/learn/sizing/min-height.html", '100%', 800)}}

- -

Això és molt útil per tractar amb quantitats de contingut variables i evitar desbordaments.

- -

Un ús comú de {{cssxref("max-width")}} és reduir les imatges si no hi ha prou espai perquè es mostrin amb l’amplada intrínseca, alhora que es garanteix que no superen l'alçada de la caixa.

- -

Per exemple, si una imatge té una amplada intrínseca més petita que la de l’element que la conté i hi estableixes una amplada de width: 100%, la imatge s’estirarà i es farà gran, i podria pixelar-se. En canvi, si l’amplada intrínseca fos més gran que l’element que la conté, desbordaria. És probable que no vulguis que passi cap d'aquestes dues coses.

- -

Si en lloc d'això utilitzes max-width: 100%, la imatge es pot fer més petita que la seva mida intrínseca, però no es farà més gran que el 100% de la seva mida.

- -

En l'exemple següent hem utilitzat dues vegades la mateixa imatge. A la primera hi hem donat width: 100%, i com que està continguda en un recipient més gran, s'estén per tota l'amplada del contenidor. La segona imatge, en canvi, té max-width: 100%, i no s’estira per ocupar tot el recipient. La tercera caixa torna a contenir la mateixa imatge, amb max-width: 100%; en aquest cas pots observar com s’ha reduït per encaixar dins la caixa.

- -

{{EmbedGHLiveSample("css-examples/learn/sizing/max-width.html", '100%', 800)}}

- -

Aquesta tècnica s’utilitza per fer que les imatges siguin adaptatives, de manera que quan es visualitzen en un dispositiu més petit es redueixen adequadament. Però no has d'utilitzar aquesta tècnica per carregar imatges molt grans i després reduir-les en el navegador. Les imatges han de tenir una mida adequada i no han de ser més grans del que es necessita en relació amb la mida més gran en què es poden mostrar en el disseny. La descàrrega d’imatges massa grans fa que el teu lloc web vagi més lent i pot ser més car per als usuaris que tenen una connexió amb comptador de dades.

- -
-

Nota: Troba més informació sobre les tècniques d’imatges adaptatives.

-
- -

Unitats de finestra gràfica

- -

La finestra gràfica (que és l’àrea visible de la teva pàgina en el navegador que utilitzes per visitar un lloc web) també té una mida. En CSS hi ha unes unitats que es relacionen amb la mida de la finestra gràfica: la unitat vw per a l'amplada i la unitat vh per a l'alçada. Amb aquestes unitats pots establir mides relatives a la finestra gràfica de l'usuari.

- -

1vh és igual a l'1% de l’alçada de la finestra gràfica, i 1vw és igual a l’1% de l’amplada de la finestra gràfica. Pots fer servir aquestes unitats per a dimensionar les caixes, però també el text. A l'exemple següent tenim una caixa que té una mida de 20vh i 20vw. La caixa conté una lletra A, que ha rebut un valor {{cssxref("font-size")}} de 10vh.

- -

{{EmbedGHLiveSample("css-examples/learn/sizing/vw-vh.html", '100%', 600)}}

- -

Si canvies els valors de vh i vw, canvia la mida de la caixa o de la lletra; si canvies la mida de la finestra gràfica, també canvien les mides de la caixa i de la lletra perquè es mostren en relació amb la finestra gràfica. Per veure com canvia l'exemple quan canvies la mida de la finestra gràfica, has de carregar l'exemple en una finestra nova del navegador que puguis redimensionar (perquè la teva finestra gràfica és l’<iframe> incorporat que conté l'exemple anterior). Obre l'exemple, redimensiona la finestra del navegador i observa què passa amb la mida de la caixa i del text.

- -

Dimensionar les coses segons la finestra gràfica pot ser útil en els teus dissenys. Per exemple, si vols que una secció principal es mostri a pantalla completa abans que la resta del contingut, fes que aquella part de la pàgina tingui un 100vh d’alçada i empenyerà la resta del contingut fora de la finestra gràfica, i això significa que només apareixerà quan l'usuari es desplaci pel document.

- -

Resum

- -

Aquest article t'ha proporcionat un resum dels problemes principals que podries trobar-te a l’hora de dimensionar les coses en un lloc web. En passar a l’article de Disseny de pàgines web amb CSS, la mida serà un aspecte molt important per a dominar els diferents mètodes de disseny, per la qual cosa val la pena entendre els conceptes que s'han explicat aquí abans de continuar.

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}

- -

En aquest mòdul

- -
    -
  1. La cascada i l'herència
    2. -
  2. Els selectors CSS - -
    3. -
  3. El model de caixes
    4. -
  4. Fons i vores
    5. -
  5. El tractament del text en diferents direccions
    6. -
  6. El desbordament del contingut
    7. -
  7. Els valors i les unitats
    8. -
  8. Dimensionar elements en CSS
    9. -
  9. Imatges, mèdia i elements de formulari
    10. -
  10. Aplicar estil a les taules
    11. -
  11. Depura el teu CSS
    12. -
  12. Organitza el teu CSS
    13. -
diff --git a/files/ca/learn/css/building_blocks/fons_i_vores/index.html b/files/ca/learn/css/building_blocks/fons_i_vores/index.html deleted file mode 100644 index 2e2ce4727c..0000000000 --- a/files/ca/learn/css/building_blocks/fons_i_vores/index.html +++ /dev/null @@ -1,307 +0,0 @@ ---- -title: Fons i vores -slug: Learn/CSS/Building_blocks/Fons_i_vores -translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders ---- -
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}
- -

En aquest article veurem algunes de les coses creatives que pots fer amb fons i vores amb el CSS. Des d’afegir degradats o imatges de fons fins a arrodonir cantonades; els fons i les vores són la solució per a moltes qüestions d’estil en CSS.

- - - - - - - - - - - - -
Prerequisits:Coneixements bàsics d'informàtica, tenir el programari bàsic instal·lat, coneixements bàsics de treballar amb fitxers i d'HTML (consulta la Introducció a l'HTML) i nocions de com funciona el CSS.
Objectiu:Aprendre a aplicar estil al fons i la vora de les caixes.
- -

Aplicar estil als fons amb CSS

- -

La propietat CSS {{cssxref("background")}} és una propietat abreviada que substitueix un seguit de propietats de fons que presentarem en aquest article. Quan et trobes amb una propietat de fons complexa en un full d’estil, pot ser que et sembli una mica difícil d’entendre perquè es poden estar passant molts valors alhora.

- -
.box {
-  background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat,
-  url(big-star.png) center no-repeat, rebeccapurple;
-} 
-
- -

Més endavant en aquest tutorial tornarem a l’objectiu de com funcionen les propietats abreviades, però primer fem un cop d’ull a les diverses coses que pots fer amb els fons amb el CSS, a partir de cadascuna de les propietats dels fons.

- -

Els colors de fons

- -

La propietat {{cssxref("background-color")}} defineix el color de fons de qualsevol element en CSS. La propietat accepta qualsevol color (<color>) vàlid. Un color de fons s'estén per sota del contingut i del farciment de la caixa.

- -

En l'exemple següent hem utilitzat diversos valors de color per a afegir un color de fons a la caixa, un títol d’encapçalament i un element {{htmlelement("span")}}.

- -

Juga a fer servir qualsevol valor de <color> disponible.

- -

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/color.html", '100%', 800)}}

- -

Les imatges de fons

- -

La propietat {{cssxref("background-image")}} permet visualitzar una imatge de fons en un element. En l'exemple següent hi ha dues caixes: una té una imatge de fons que és més gran que la caixa, l'altra té una imatge petita en forma d’estrella.

- -

Aquest exemple mostra dues coses sobre les imatges de fons. La imatge gran no es redueix de manera predeterminada per a adaptar-se a la caixa, sinó que només en veiem un tros petit d’una cantonada, mentre que la imatge petita es mostra en mosaic fins a omplir la caixa. La imatge en aquest cas és en realitat una única estrella.

- -

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background-image.html", '100%', 800)}}

- -

Si especifiques un color de fons a més d'una imatge de fons, la imatge es mostra a sobre. Afegeix una propietat background-color a l'exemple de dalt i observa-ho en acció.

- -

Control amb la propietat background-repeat

- -

La propietat {{cssxref("background-repeat")}} s'utilitza per a controlar el comportament en mosaic de les imatges. Els valors disponibles són:

- - - -

Prova aquests valors en l'exemple següent. Hem establert la propietat al valor no-repeat, de manera que només veuràs una estrella. Prova els diferents valors repeat-x i repeat-y i observa’n els efectes.

- -

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/repeat.html", '100%', 800)}}

- -

Les mides de la imatge de fons

- -

En l'exemple anterior hi ha una imatge gran que ha acabat retallada perquè és més gran que el fons. En aquest cas podríem utilitzar la propietat {{cssxref("background-size")}}, que pot prendre valors de longitud o percentatge, per a dimensionar la imatge i que s'ajusti al fons.

- -

També pots utilitzar paraules clau:

- - - -

En l'exemple següent hem utilitzat la imatge més gran de l'exemple anterior i unitats de longitud per dimensionar-la dins de la caixa. Observa que això ha distorsionat la imatge.

- -

Fes la prova següent.

- - - -

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/size.html", '100%', 800)}}

- -

La ubicació de la imatge de fons

- -

La propietat {{cssxref("background-position")}} et permet triar la posició en què apareix la imatge de fons en la caixa a la qual s'aplica. Fa servir un sistema de coordenades en què el (0,0) és a la part superior esquerra de la caixa, i la caixa es posiciona sobre els eixos horitzontal (x) i vertical ((y).

- -
-

Nota: El valor per defecte de background-position és (0,0).

-
- -

Els valors de background-position més comuns prenen dos valors independents: un valor horitzontal seguit d'un valor vertical.

- -

També pots utilitzar paraules clau com top i right (busca la resta de possibilitats en la pàgina sobre la propietat {{cssxref("background-position")}}):

- -
.box {
-  background-image: url(star.png);
-  background-repeat: no-repeat;
-  background-position: top center;
-} 
-
- -

I longituds i percentatges:

- -
.box {
-  background-image: url(star.png);
-  background-repeat: no-repeat;
-  background-position: 20px 10%;
-} 
-
- -

També pots barrejar valors de paraules clau amb longituds o percentatges, per exemple:

- -
.box {
-  background-image: url(star.png);
-  background-repeat: no-repeat;
-  background-position: top 20px;
-}
- -

Finalment, també pots utilitzar una sintaxi de 4 valors per a indicar una distància des de determinades cantonades de la caixa; la unitat de longitud en aquest cas és un desplaçament del valor que la precedeix. Així, doncs, en el CSS de sota, posicionem el fons a 20px de l’extrem superior i 10px de l’extrem dret:

- -
.box {
-  background-image: url(star.png);
-  background-repeat: no-repeat;
-  background-position: top 20px right 10px;
-}
- -

Juga amb aquests valors en l'exemple següent i mou l'estrella per la caixa.

- -

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/position.html", '100%', 800)}}

- -
-

Nota: background-position és una propietat abreviada de {{cssxref ("background-position-x")}} i {{cssxref ("background-position-y")}}, que et permeten establir els diferents valors de posició de l'eix per separat.

-
- -

Degradats de fons

- -

Un degradat (quan s'utilitza per a un fons) actua igual que una imatge i també es defineix amb la propietat {{cssxref("background-image")}}.

- -

Pots llegir més informació sobre els diferents tipus de degradats i què pots fer amb ells en la pàgina sobre els tipus de dades <gradient> de MDN. Una manera divertida de jugar amb els degradats és utilitzar un dels molts generadors de degradats CSS que hi ha disponibles al web, com aquest. Pots crear un degradat i copiar i enganxar el codi font que el genera.

- -

Prova alguns degradats diferents en l'exemple següent. En les dues caixes hi ha, respectivament, un degradat lineal que s’estén per tota la caixa i un degradat radial amb una mida fixa, que per tant es repeteix.

- -

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/gradients.html", '100%', 800)}}

- -

Múltiples imatges de fons

- -

També és possible posar més d’una imatge de fons: especifica amb una sola propietat background-image els diversos valors, separats cadascun per una coma.

- -

En fer-ho, pot passar que les imatges de fons es superposin entre elles. Els fons es disposen amb la darrera imatge de fons enumerada a la part inferior de la pila, i cada imatge anterior s’apila a sobre de la que la segueix en el codi.

- -
-

Nota: Els degradats es poden barrejar feliçment amb imatges de fons normals.

-
- -

Les altres propietats background-* també poden tenir valors separats per comes, de la mateixa manera que background-image:

- -
background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png);
-background-repeat: no-repeat, repeat-x, repeat;
-background-position: 10px 20px,  top right;
- -

Cada valor de les diverses propietats coincideix amb els valors que estan en la mateixa posició en les altres propietats. Aquí sobre, per exemple, el valor per a la propietat background-repeat d’image1 és no-repeat. Però, què passa quan propietats diferents tenen una quantitat diferent de valors? La resposta és que els valors que ocupen les posicions més petites s'alternen cíclicament: en l'exemple anterior hi ha quatre imatges de fons però només dos valors background-position. Les dues primeres posicions s’apliquen a les dues primeres imatges, i després els valores es tornen a assignar cíclicament: el valor de la primera posició s’aplica a image3, i el valor de segona posició, a image4.

- -

Juguem! En l'exemple següent hem inclòs dues imatges. Per a comprovar l'ordre d'apilament, canvia la imatge de fons que apareix primer en la llista. O juga amb les altres propietats i canvia’n els valors de posició i mida, o la repetició.

- -

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/multiple-background-image.html", '100%', 800)}}

- -

Ancoratge del fons

- -

Una altra opció que hi ha disponible per als fons és especificar com es desplacen quan es desplaça el contingut. Això es controla amb la propietat {{cssxref("background-attachment")}}, que pot prendre els valors següents:

- - - -

La propietat {{cssxref("background-attachment")}} només funciona quan hi ha contingut pel qual et pots desplaçar; hem preparat un exemple que mostra les diferències entre els tres valors: fes-hi un cop d’ull a background-attachment.html (també en pots consultar el codi font aquí).

- -

Ús de la propietat abreviada background

- -

Com hem esmentat al començament d'aquest article, sovint veuràs fons que estan especificats amb la propietat {{cssxref("background")}}. Aquesta propietat abreviada et permet configurar totes les propietats diferents alhora.

- -

Si fas servir diversos fons, has d’especificar totes les propietats per al primer fons, i a continuació afegir-hi el fons següent, després d’una coma. En l'exemple següent hi ha un degradat amb una mida i una posició, i després un fons d'imatge amb no-repeat i una posició, i després un color.

- -

Quan s’escriuen els valor abreviats de les imatges de fons cal seguir unes regles, per exemple:

- - - -

Consulta la pàgina sobre {{cssxref("background")}} de MDN per a veure’n totes les possibilitats.

- -

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background.html", '100%', 800)}}

- -

Consideracions d’accessibilitat relatives als fons

- -

Quan poses un text sobre una imatge o un color de fons, t’has d’assegurar que té prou contrast perquè els usuaris el poden llegir. Si poses una imatge de fons i el text s’hi llegeix a sobre, també has d'especificar un color de fons que permeti llegir el text si la imatge no es carrega.

- -

Els lectors de pantalla no poden analitzar les imatges de fons, de manera que aquestes haurien de ser purament decoratives; qualsevol contingut important hauria de formar part de la pàgina HTML, i no estar continguda en segon pla.

- -

Vores

- -

En aprendre el model de caixes, vam descobrir com afecten les vores a la mida de la caixa. En aquesta secció veurem com emprar les vores de manera creativa. Normalment, quan afegim vores a un element amb CSS, utilitzem una propietat abreviada que estableix el color, l'amplada i l'estil de la vora en una línia de CSS.

- -

Podem establir una vora per als quatre costats d'una caixa amb la propietat {{cssxref("border")}}:

- -
.box {
-  border: 1px solid black;
-}
- -

O podem establir una sola vora de la caixa, per exemple:

- -
.box {
-  border-top: 1px solid black;
-}
- -

Cadascuna d’aquestes propietats abreviades seria:

- -
.box {
-  border-width: 1px;
-  border-style: solid;
-  border-color: black;
-}
- -

I per a les no abreviades seria:

- -
.box {
-  border-top-width: 1px;
-  border-top-style: solid;
-  border-top-color: black;
-}
- -
-

Nota: Aquestes propietats de la vora superior, dreta, inferior i esquerra també tenen mapades propietats lògiques relacionades amb el mode d'escriptura del document (per exemple, text d'esquerra a dreta o de dreta a esquerra, o de dalt a baix). Ho explorarem en l’article següent, que inclou el tractament del text en diverses direccions.

-
- -

Amb les vores es poden emprar una gran varietat d'estils. En l'exemple següent hem utilitzat un estil de vora diferent per als quatre costats de la caixa. Juga amb l'estil, l'amplada i el color de la vora per veure com funcionen les vores.

- -

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/borders.html", '100%', 800)}}

- -

Les cantonades arrodonides

- -

L’arrodoniment de les cantonades d'una caixa s’aconsegueix amb la propietat {{cssxref("border-radius")}} i les propietats associades que es relacionen amb cada cantó de la caixa. Es poden utilitzar dues longituds o percentatges com a valor; el primer valor defineix el radi horitzontal, i el segon el radi vertical. En molts casos només faràs servir un valor, que s'utilitzarà per a tots dos.

- -

Per exemple, pots fer que les quatre cantonades d’una caixa tinguin un radi de 10px:

- -
.box {
-  border-radius: 10px;
-}
- -

O que la cantonada superior dreta tingui un radi horitzontal d’1em i un radi vertical del 10%:

- -
.box {
-  border-top-right-radius: 1em 10%;
-}
- -

Hem fixat les quatre cantonades de l'exemple següent i després hem canviat els valors de l'extrem superior dret perquè sigui diferent. Juga amb els valors i canvia les cantonades. Consulta la pàgina de propietats de {{cssxref("border-radius")}} i esbrina les opcions de sintaxi disponibles.

- -

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/corners.html", '100%', 800)}}

- -

Posa a prova les teves habilitats

- -

Hem vist moltes coses en aquest article. Recordes la informació més important? Trobaràs més proves per verificar que retens la informació abans de seguir a Test your skills: Backgrounds and Borders.
-  

- -

Resum

- -

En aquest articles hem descobert força conceptes, i pots veure que hi ha molt per afegir a un fons o una vora d'una caixa. Consulta les diverses pàgines de propietat si vols obtenir més informació sobre alguna de les funcions que hem comentat. Cada pàgina de MDN té més exemples d’ús amb què pots jugar i ampliar els teus coneixements.

- -

En el proper article descobrirem com interactua el mode d'escriptura del document amb el CSS. Què passa quan el text no flueix d'esquerra a dreta?

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}

- -

En aquest mòdul

- -
    -
  1. La cascada i l'herència
    2. -
  2. Els selectors CSS - -
    3. -
  3. El model de caixes
    4. -
  4. Fons i vores
    5. -
  5. El tractament del text en diverses direccions
    6. -
  6. El desbordament de continguts
    7. -
  7. Els valors i les unitats
    8. -
  8. Dimensionar elements en CSS
    9. -
  9. Imatges, mèdia i elements de formulari
    10. -
  10. Aplicar estil a les taules
    11. -
  11. Depura el teu CSS
    12. -
  12. Organitza el teu CSS
    13. -
diff --git a/files/ca/learn/css/building_blocks/fundamental_css_comprehension/index.html b/files/ca/learn/css/building_blocks/fundamental_css_comprehension/index.html new file mode 100644 index 0000000000..34a654269a --- /dev/null +++ b/files/ca/learn/css/building_blocks/fundamental_css_comprehension/index.html @@ -0,0 +1,114 @@ +--- +title: Comprensió CSS fonamental +slug: Learn/CSS/Introducció_a_CSS/Comprensió_CSS_fonamental +tags: + - Assessment + - Beginner + - CSS + - CodingScripting + - Selectors + - Style + - Syntax + - box model + - comments + - rules +translation_of: Learn/CSS/Building_blocks/Fundamental_CSS_comprehension +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}
+ +

Heu cobert molt en aquest mòdul, de manera que us heu de sentir bé d'haver arribat al final!. El pas final abans de continuar és intentar l'avaluació del mòdul: això implica una sèrie d'exercicis relacionats que s'han de completar per crear el disseny final - un perfil de targeta de visita/targeta de jugador/perfil social.

+ + + + + + + + + + + + +
Requisits previs:Abans d'intentar aquesta avaluació, hauríeu d'haver treballat tots els articles d'aquest mòdul.
Objectiu:Comprovar la comprensió de la teoria CSS fonamental, la sintaxi i la mecànica
+ +

Punt de partida

+ +

Per començar aquesta avaluació, heu de:

+ + + +
+

Nota: D'altra banda, podeu utilitzar un lloc com JSBin o Thimble per fer la vostra avaluació. Podeu enganxar el codi HTML i omplir el CSS en un d'aquests editors en línia i utilitzar aquest URL per indicar a l'element <img> el fitxer d'imatge. Si l'editor en línia que esteu utilitzant no té cap panell CSS separat, no dubteu a posar-lo en un element <style> al capdavant del document.

+
+ +

Resum del projecte

+ +

Se us ha proporcionat un mica d'HTML sense processar i una imatge, i heu d'escriure el CSS necessari per d'introduir una mica d'estil bonic en una targeta de negocis en línia, que potser es pot duplicar com a targeta de jugador o perfil de xarxes socials. Les següents seccions descriuen el que heu de fer.

+ +

Configuració bàsica:

+ + + +

Tingueu cura dels selectors i els conjunts de regles proporcionats:

+ + + +

Nou conjunt de regles que necessiteu escriure :

+ + + +

Altres coses a pensar:

+ + + +

Consells i suggeriments

+ + + +

Exemple

+ +

La següent captura de pantalla mostra un exemple del que hauria de tenir el disseny acabat:

+ +

A view of the finished business card, show a reader header and footer, and a darker center panel containing the main details and image.

+ +

 

+ +

Avaluació

+ +

Si seguiu aquesta avaluació com a part d'un curs organitzat, hauríeu de poder lliurar el vostre treball al vostre professor/mentor per qualificar-ho. Si esteu en auto-aprenentatge, podreu obtenir la guia de qualificacions amb força facilitat preguntant sobre el tema en el fil de conversa en l'àrea d'aprenentatge, o en el canal IRC #mdn en Mozilla IRC. Intenteu primer l'exercici - no es guanya res fent trampes!

+ +

{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}

diff --git a/files/ca/learn/css/building_blocks/overflowing_content/index.html b/files/ca/learn/css/building_blocks/overflowing_content/index.html new file mode 100644 index 0000000000..2ee0dc6129 --- /dev/null +++ b/files/ca/learn/css/building_blocks/overflowing_content/index.html @@ -0,0 +1,123 @@ +--- +title: Desbordament de contingut +slug: Learn/CSS/Building_blocks/Desbordament_de_contingut +translation_of: Learn/CSS/Building_blocks/Overflowing_content +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}
+ +

En aquest apartat veurem un altre concepte important en CSS: el desbordament. El desbordament és el que succeeix quan hi ha massa contingut i no cap còmodament en una caixa. En aquesta guia aprendràs què és i com gestionar-lo.

+ + + + + + + + + + + + +
Prerequisits:Coneixements bàsics d'informàtica, tenir el programari bàsic instal·lat, coneixements bàsics de treballar amb fitxers i d'HTML (mira Introducció a l'HTML) i nocions de CSS (consulta els Primers passos amb el CSS).
Objectiu:Entendre el desbordament i com gestionar-lo.
+ +

Què és el desbordament?

+ +

Ja sabem que tot en CSS són caixes i que podem restringir la mida d’aquestes caixes assignant valors als atributs {{cssxref("width")}} i {{cssxref("height")}} (o {{cssxref("inline-size")}} i {{cssxref("block-size")}}). El desbordament és el que succeeix quan dins d’una caixa hi ha massa contingut i no hi cap. El CSS t'ofereix diverses eines per a gestionar aquest desbordament, i també és un concepte útil de comprendre en aquesta fase inicial. Et trobaràs amb situacions de desbordament força sovint quan escriguis CSS, sobretot quan aprofundeixis en el disseny de pàgines web amb CSS.

+ +

El CSS tracta d'evitar «la pèrdua de dades»

+ +

Comencem per examinar dos exemples que mostren com es comporta per defecte el CSS quan es desborda.

+ +

El primer és una caixa a la que s’han restringit les dimensions del bloc en donar-hi una alçada (height). Després s’hi ha afegit més contingut del que cap en l’espai de la caixa. El contingut de la caixa es desborda i s’encavalca desordenadament sobre el paràgraf que hi ha a sota.

+ +

{{EmbedGHLiveSample("css-examples/learn/overflow/block-overflow.html", '100%', 600)}}

+ +

El segon consisteix en una paraula dins d'una caixa en la qual s’ha restringit la dimensió de línia. La caixa s'ha fet massa petita perquè la paraula hi càpiga, i acaba sortint més enllà de la caixa.

+ +

{{EmbedGHLiveSample("css-examples/learn/overflow/inline-overflow.html", '100%', 500)}}

+ +

Pot ser que et preguntis per què el CSS ha adoptat per defecte l’enfocament més aviat desarreglat de provocar el desbordament del contingut. Per què no amagar el contingut de més, o fer créixer la caixa?

+ +

Sempre que és possible, el CSS no amaga cap part de contingut; fer-ho provocaria la pèrdua de dades, i això acostuma a ser un problema. En termes de CSS, això significa que una part del contingut desapareix. El problema que el contingut s’esvaeixi és que podria passar que no t'adonis que ha desaparegut. Pot passar que els visitants de la teva pàgina no s'adonin que ha desaparegut. Pot tractar-se del botó d'enviament d'un formulari, i ningú no podria completar el formulari; això, és un gran problema! Per tant, el CSS tendeix a desbordar-se de manera visible. D’aquesta manera és probable que t’adonis del desperfecte o, en el pitjor dels casos, que un visitant del teu lloc web t'informi que una part del contingut s’encavalca amb una altra, i que s’ha de rectificar.

+ +

Si has restringit la mida d’una caixa amb width o height, el CSS suposa que saps què fas i que gestiones el potencial de desbordament. En general, restringir la mida d’un bloc és problemàtic quan es col·loca text en una caixa, perquè pot haver-hi més text del que esperaves en el moment de dissenyar un lloc web, o que el text ocupi més espai, per exemple, perquè l'usuari ha augmentat la mida de la lletra.

+ +

En el proper parell d’articles veurem diferents maneres de controlar la mida que poden ser menys propenses al desbordament. Tanmateix, també pots controlar la manera com es comporta el desbordament si necessites una mida fixa. Continua llegint!

+ +

La propietat overflow

+ +

La propietat {{cssxref("overflow")}} és la manera de prendre el control del desbordament d'un element i dir al navegador com volem que s’hi comporti. El valor per defecte del desbordament és visible, és per això que per defecte podem veure el nostre contingut quan es desborda.

+ +

Si vols que el contingut que desborda es talli, pots establir el valor overflow: hidden per a la caixa. Això farà exactament el que diu: amagar el desbordament. Això pot causar la desaparició de les coses, de manera que només ho hauries de fer si ocultar contingut no causarà cap problema.

+ +

{{EmbedGHLiveSample("css-examples/learn/overflow/hidden.html", '100%', 600)}}

+ +

Potser voldries posar barres de desplaçament quan el contingut es desborda. Si utilitzes overflow: scroll, el navegador sempre mostra les barres de desplaçament, fins i tot quan no hi ha prou contingut per a desbordar-se. Pot ser que vulguis fer-ho així perquè evita que les barres de desplaçament apareguin i desapareguin en funció del contingut.

+ +

Observa que si vas traient part del contingut que hi ha en la caixa següent, les barres de desplaçament de la caixa es mantenen, fins i tot quan no hi ha res per desplaçar.

+ +

{{EmbedGHLiveSample("css-examples/learn/overflow/scroll.html", '100%', 600)}}

+ +

En l’exemple anterior només hem de desplaçar-nos per l’eix y, però tenim barres de desplaçament en els dos eixos. En lloc d’això, podries utilitzar la propietat {{cssxref("overflow-y")}} i establir overflow-y: scroll, i et desplaçaries només sobre l'eix y.

+ +

{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-y.html", '100%', 600)}}

+ +

També pots desplaçar-te sobre l'eix x amb {{cssxref("overflow-x")}}, tot i que no és recomanable quan apareixen paraules llargues. Consulta les propietats {{cssxref("word-break")}} o {{cssxref("overflow-wrap")}} si has de treballar amb paraules llargues en una caixa petita. També et poden ajudar a crear caixes que s’adaptin més bé segons la quantitat de contingut alguns dels mètodes que s’exposen en l’apartat Dimensionament d’elements amb CSS.

+ +

{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-x.html", '100%', 500)}}

+ +

Igual que amb scroll, obtindràs una barra de desplaçament en la dimensió de desplaçament si hi ha prou contingut per provocar l’aparició d’una barra de desplaçament.

+ +
+

Nota: pots especificar el desplaçament en x i en y amb la propietat overflow passant-hi dos valors. Si s’especifiquen dues paraules clau, la primera s’aplica a overflow-x i la segona a overflow-y. En cas contrari, tant overflow-x com overflow-y s’estableixen en el mateix valor. Per exemple, overflow: scroll hidden configuraria overflow-x per a scroll i overflow-y per a hidden.

+
+ +

Si vols que les barres de desplaçament apareguin només si hi ha més contingut del que es pot incloure dins de la caixa, utilitza overflow: auto. En aquest cas, el navegador decideix quan mostra les barres de desplaçament. Els navegadors per als equips d'escriptori normalment ho fan només quan hi ha prou contingut per a provocar desbordament.

+ +

En l’exemple següent, elimina una mica de contingut fins que no càpiga en la caixa i observa que les barres de desplaçament desapareixen.

+ +

{{EmbedGHLiveSample("css-examples/learn/overflow/auto.html", '100%', 600)}}

+ +

El desbordament estableix un context de formatació de bloc

+ +

Hi ha un concepte en CSS que s'anomena block formatting context (context de formatació de bloc) o BFC. No és res que t'hagi de preocupar gaire ara mateix, però és útil saber que quan empres un valor de desbordament com ara scroll o auto, crees un BFC. El resultat és que el contingut de la caixa en què has canviat el valor overflow es converteix en un mini disseny de pàgina web propi. Les coses que hi ha fora del contenidor no poden ficar-se en el contenidor, i res pot sobresortir de la caixa cap als elements del disseny de pàgina web del voltant. Això és per permetre el comportament amb desplaçament, perquè per a crear una experiència de desplaçament coherent, tot el contingut de la caixa ha d’estar-hi contingut i no en pot sobresortir ni superposar-se amb altres elements de la pàgina.

+ +

Desbordaments no volguts en el disseny web

+ +

Els mètodes de disseny moderns (tal com es recull en el mòdul de Disseny de pàgines web amb CSS) gestionen molt bé el desbordament. Han estat dissenyats per fer front al fet que normalment no podem predir la quantitat de contingut que hi haurà en una pàgina web. En el passat, però, els desenvolupadors solien utilitzar altures fixes per a intentar alinear els extrems inferiors de caixes que en realitat no tenien cap relació entre elles. Això era fràgil, i encara et pots topar amb aplicacions heretades en què el contingut d’una caixa se superposa amb un altre contingut de la pàgina. Si veus això, sabràs que es tracta de desbordament; l'ideal seria que tornis a fer un càlcul de les mides dels elements de disseny de la pàgina per no haver de dependre de mides de caixa fixes.

+ +

En desenvolupar un lloc sempre has de tenir en compte els problemes de desbordament. Has de provar els dissenys amb quantitats de contingut grans i petites, augmentar la mida de la lletra del text i assegurar-te que el teu CSS pot fer-ho de manera coherent. És probable que et vulguis reservar les opcions de canviar el valor de desbordament per ocultar contingut o afegir barres de desplaçament només per a casos especials, per exemple, per quan realment vols una caixa amb barres de desplaçament.

+ +

Posa a prova els teus coneixements

+ +

Hi ha moltes coses a absorbir en aquesta lliço. En recordes la informació més important? Per comprovar-ho, vés a Test your skills: overflow.

+ +

Resum

+ +

Aquest breu article ha introduït el concepte de desbordament; ara entens que el CSS intenta no invisibilitzar el contingut que es desborda perquè això causa la pèrdua de dades. Has descobert que pots gestionar un desbordament potencial i també que has de fer proves per assegurar-te que la teva feina no causa accidentalment desbordaments problemàtics.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}

+ +

En aquest mòdul

+ +
    +
  1. La cascada i l'herència
    2. +
  2. Els selectors CSS + +
    3. +
  3. El model de caixes
    4. +
  4. Fons i vores
    5. +
  5. El tractament del text en diferents direccions
    6. +
  6. El desbordament del contingut
    7. +
  7. Els valors i les unitats
    8. +
  8. Dimensionament d’elements amb CSS
    9. +
  9. Imatges, media i controls de formulari
    10. +
  10. Aplicar estil a les taules
    11. +
  11. Depura el teu CSS
    12. +
  12. Organitza el teu CSS
    13. +
diff --git a/files/ca/learn/css/building_blocks/selectors/attribute_selectors/index.html b/files/ca/learn/css/building_blocks/selectors/attribute_selectors/index.html new file mode 100644 index 0000000000..6ab61828f8 --- /dev/null +++ b/files/ca/learn/css/building_blocks/selectors/attribute_selectors/index.html @@ -0,0 +1,154 @@ +--- +title: Selectors d'atribut +slug: Learn/CSS/Building_blocks/Selectors_CSS/Selectors_atribut +translation_of: Learn/CSS/Building_blocks/Selectors/Attribute_selectors +--- +

{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}

+ +

Com ja saps a partir de l’estudi de l'HTML, els elements poden tenir atributs, que donen més detalls sobre l'element que s’etiqueta. En CSS pots utilitzar selectors d’atributs per a seleccionar elements que tenen uns atributs determinats. Aquest article et mostra com utilitzar aquests selectors tan útils.

+ + + + + + + + + + + + +
Prerequisits:Coneixements bàsics d'informàtica, tenir el programari bàsic instal·lat, coneixements bàsics de com treballar amb fitxers i d'HTML (consulta Introducció a l'HTML) i nocions bàsiques de com funciona el CSS.
Objectiu:Conèixer els selectors d’atributs i com utilitzar-los.
+ +

Selectors de presència i de valor

+ +

Aquests selectors permeten seleccionar un element només per la presència d’un atribut (per exemple href) o per diferents coincidències amb el valor de l’atribut.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SelectorExempleDescripció
[attr]a[title]Selecciona elements que tenen com a nom d'atribut attr el valor entre claudàtors.
[attr=value]a[href="https://example.com"]Selecciona elements que tenen el nom d'atribut attr, el valor del qual sigui exactament la cadena de caràcters que hi ha entre cometes: value.
[attr~=value]p[class~="special"] +

Selecciona elements amb un nom d’atribut attr el valor del qual és exactament value, o elements que tenen un atribut attr que conté un o més valors, dels quals almenys un coincideix amb value.

+ +

Observa que en una llista de diversos valors, els valors se separen amb espais en blanc.

+
[attr|=value]div[lang|="zh"]Selecciona elements que tenen un nom d’atribut attr que pot ser exactament value o que pot començar per value seguit immediatament d’un guionet.
+ +

En l'exemple següent pots veure que com es fan servir aquests selectors.

+ + + +

{{EmbedGHLiveSample("css-examples/learn/selectors/attribute.html", '100%', 800)}}

+ +

Selectors de subcadena

+ +

Aquests selectors permeten obtenir una concordança més ajustada a partir de les subcadenes que conté el valor del teu atribut. Per exemple, si hi ha les classes box-warning i box-error i vols seleccionar tot el que comença amb la cadena «box-», pots seleccionar-les totes dues amb [class^="box-"].

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SelectorExempleDescripció
[attr^=value]li[class^="box-"]Selecciona elements amb un nom d'atribut attr que conté la subcadena value al principi.
[attr$=value]li[class$="-box"]Selecciona elements amb un nom d’atribut attr que conté la subcadena value al final.
[attr*= ]li[class*="box"]Relaciona elements amb un nom d'atribut attr que conté almenys una ocurrència de la subcadena value en qualsevol lloc de la cadena.
+ +

L’exemple següent mostra l'ús d'aquests selectors:

+ + + +

{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-substring.html", '100%', 800)}}

+ +

Distinció entre majúscules i minúscules

+ +

Si vols seleccionar els valors d'atribut tant si estan escrits en majúscules com en minúscules, pots utilitzar el valor i abans del claudàtor de tancament. Aquest indicador informa el navegador que els caràcters ASCII han de coincidir independentment de si les lletres són majúscules o minúscules. Sense aquest indicador, la correspondència entre els valors es farà segons les directrius del llenguatge del document pel que fa a la distinció entre majúscules i minúscules; en el cas de l'HTML, distingeix entre majúscules i minúscules.

+ +

En l'exemple següent, el primer selector coincideix amb un valor que comença per a; només coincideix el primer element de la llista perquè els altres dos elements de la llista comencen amb una A majúscula. El segon selector no distingeix entre majúscules i minúscules, així que la correspondència és entre tots els elements de la llista.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-case.html", '100%', 800)}}

+ +
+

Nota: També hi ha un valor s més recent, que imposa la coincidència de majúscules i les minúscules en contextos en què normalment no es dona; tanmateix, aquest valor encara no té gaire compatibilitat amb els navegadors i no resulta gaire útil en el context de l’HTML.

+
+ +

Propers passos

+ +

Ara que hem acabat amb els selectors d’atribut, pots avançar cap a l’article següent sobre les pseudoclasses i els pseudoelements.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}

+ +

En aquest mòdul

+ +
    +
  1. La cascada i l'herència
    2. +
  2. Els selectors CSS + +
    3. +
  3. El model de caixes
    4. +
  4. Fons i vores
    5. +
  5. El tractament del text en diverses direccions
    6. +
  6. El desbordament dels continguts
    7. +
  7. Els valors i les unitats
    8. +
  8. Dimensionar elements en CSS
    9. +
  9. Imatges, mèdia i elements de formulari
    10. +
  10. Aplicar estil a les taules
    11. +
  11. Depura el teu CSS
    12. +
  12. Organitza el teu CSS
    13. +
diff --git a/files/ca/learn/css/building_blocks/selectors/combinators/index.html b/files/ca/learn/css/building_blocks/selectors/combinators/index.html new file mode 100644 index 0000000000..175379f986 --- /dev/null +++ b/files/ca/learn/css/building_blocks/selectors/combinators/index.html @@ -0,0 +1,111 @@ +--- +title: Combinadors +slug: Learn/CSS/Building_blocks/Selectors_CSS/Combinadors +translation_of: Learn/CSS/Building_blocks/Selectors/Combinators +--- +

{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}

+ +

Els últims selectors que veurem s’anomenen combinadors, perquè combinen altres selectors de manera que proporcionen una relació útil entre aquests i la ubicació de continguts en el document.

+ + + + + + + + + + + + +
Prerequisits:Coneixements bàsics d'informàtica, tenir el programari bàsic instal·lat, coneixements bàsics de com treballar amb fitxers i d'HTML (mira Introducció a l'HTML) i nocions bàsiques de com funciona el CSS.
Objectiu:Obtenir més informació sobre els diferents selectors que es poden utilitzar en CSS.
+ +

Selector de descendents

+ +

Ja has vist selectors de descendents en articles anteriors (selectors separats per un espai):

+ +
body article p
+ +

Aquests selectors seleccionen elements que són descendents d’un altre selector. No cal que els elements que se seleccionen siguin fills directes.

+ +

En l'exemple següent se seleccionen només els elements <p> que hi ha dins d'un element que està etiquetat amb una classe .box.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/descendant.html", '100%', 500)}}

+ +

Combinador de fills

+ +

El combinador de fills és un símbol de «més gran que» (>), que només selecciona elements que són descendents directes. Els descendents que hi ha més avall en la jerarquia no se seleccionen; per exemple, per a seleccionar només els elements <p> que són descendents directes d’elements <article>:

+ +
article > p
+ +

En aquest exemple hi ha una llista ordenada imbricada dins d'una altra llista no ordenada. Fem servir el combinador de fills per a seleccionar només els elements <li> que són fills directes de <ul> i els apliquem una vora superior.

+ +

Si suprimim l’element >, que designa que es tracta d'un selector de fills, obtenim un selector de descendents, i tots els elements <li> adquireixen una vora vermella.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/child.html", '100%', 600)}}

+ +

Selector de germans adjacents

+ +

El selector de germans adjacents (+) s'utilitza per a seleccionar un element que es troba immediatament a continuació d'un altre element en el mateix nivell de jerarquia; per exemple, per a seleccionar tots els elements <img> que hi ha just a continuació d‘elements <p>:

+ +
p + img
+ +

Un cas comú d’ús d’aquest combinador és per a fer alguna cosa amb un paràgraf que va a continuació d’un encapçalament, com en el nostre exemple següent. Aquí busquem un paràgraf que estigui immediatament a continuació d’<h1> i hi apliquem estil.

+ +

Si insereixes qualsevol altre element, com ara <h2>, entre <h1> i <p>, el paràgraf ja no coincideix amb el selector, i el color de fons no s'aplica.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/adjacent.html", '100%', 800)}}

+ +

Selector de germans general

+ +

Si vols seleccionar els elements que són germans d’un element, encara que no siguin adjacents directes, pots fer servir el selector de germans general (~). Per a seleccionar tots els elements <img> que estiguin en qualsevol lloc a continuació dels elements <p>, hem de fer això:

+ +
p ~ img
+ +

En l'exemple següent seleccionem tots els elements <p> que hi ha després de <h1>, i tot i que en el document també hi ha un element <div>, se selecciona també l'element <p> que hi ha després.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/general.html", '100%', 600)}}

+ +

L'ús dels combinadors

+ +

Pots combinar qualsevol dels selectors que hem vist en articles anteriors amb els combinadors per a seleccionar parts d’un document. Per exemple, per a seleccionar els elements de llista que tenen una classe «a» que són descendents directes de <ul>, pots utilitzar el codi següent:

+ +
ul > li[class="a"]  {  }
+ +

Tanmateix, has de tenir cura quan crees llistes grans de selectors que seleccionen parts molt específiques del document, perquè el selector serà molt específic per a la ubicació d'aquest element en l'etiquetatge i et serà difícil reutilitzar les regles CSS.

+ +

Sovint és millor crear una classe senzilla i aplicar-la a l’element en qüestió. Ara bé, els coneixements sobre combinadors et poden ser molt útils si necessites accedir a algun part del document, però no pots accedir al codi HTML, potser a causa de la generació d’un CMS.

+ +

Comprova les teves habilitats

+ +

Hem vist moltes coses en aquest article. Recordes la informació més important? Trobaràs més tests per a verificar que has retingut aquesta informació a Test your skills: Selectors.

+ +

Avancem

+ +

Aquesta és l’última secció dels nostres articles sobre selectors. A continuació passarem a una altra qüestió important del CSS: el model de caixes del CSS.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}

+ +

En aquest mòdul

+ +
    +
  1. La cascada i l'herència
    2. +
  2. Els selectors CSS + +
    3. +
  3. El model de caixes
    4. +
  4. Fons i vores
    5. +
  5. El tractament de les diverses direccions del text
    6. +
  6. El desbordament del contingut
    7. +
  7. Els valors i les unitats
    8. +
  8. Dimensionar elements en CSS
    9. +
  9. Elements d'imatge, de mèdia i de formulari
    10. +
  10. Aplicar estil a les taules
    11. +
  11. Depurar el CSS
    12. +
  12. Organitzar el teu CSS
    13. +
diff --git a/files/ca/learn/css/building_blocks/selectors/index.html b/files/ca/learn/css/building_blocks/selectors/index.html new file mode 100644 index 0000000000..4bd7b005de --- /dev/null +++ b/files/ca/learn/css/building_blocks/selectors/index.html @@ -0,0 +1,223 @@ +--- +title: Selectors CSS +slug: Learn/CSS/Building_blocks/Selectors_CSS +translation_of: Learn/CSS/Building_blocks/Selectors +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}
+ +

En el {{Glossary("CSS")}}, els selectors s'utilitzen per a determinar els elements {{glossary("HTML")}} de les pàgines web als quals volem aplicar estil. Hi ha una gran varietat de selectors CSS disponibles, que permeten obtenir una precisió àmplia a l’hora de seleccionar elements per a aplicar-los estil. En aquest article i els seus subarticles s'explicaran els diferents tipus amb detall i observarem com funcionen.

+ + + + + + + + + + + + +
Prerequisits:Coneixements bàsics d'informàtica, tenir el programari bàsic instal·lat, coneixements bàsics de com treballar amb fitxers i d'HTML (mira Introducció a l'HTML) i nocions bàsiques de com funciona el CSS.
Objectiu:Conèixer amb detall com funcionen els selectors CSS.
+ +

Què és un selector?

+ +

Ja has conegut els selectors. Un selector CSS és la primera part d'una regla CSS. Es tracta d’un patró d’elements i d’altres termes que diuen al navegador quins elements HTML s’han de seleccionar perquè tinguin els valors de les propietat CSS segons la regla que se’ls ha d’aplicar. L'element o els elements que selecciona el selector s'anomenen el subjecte del selector.

+ +

Una mica de codi amb un h1 ressaltat.

+ +

En articles anteriors, has vist altres selectors i també que hi ha selectors que es focalitzen en el document de maneres diferents (per exemple, seleccionant un element com h1, o una classe com .special).

+ +

En CSS, els selectors es defineixen en l’especificació dels selectors CSS; com qualsevol altra part del CSS, han de ser compatibles amb els navegadors perquè funcionin. La majoria de selectors que trobaràs es defineixen en l’especificació de selectors de nivell 3, que és una especificació madura i, per tant, trobaràs una compatibilitat de navegadors excel·lent per a aquests selectors.

+ +

Llistes de selectors

+ +

Si tens més d'un element que utilitza el mateix CSS, cadascun dels selectors es poden combinar en una llista de selectors que aplica la mateixa regla a tots els selectors. Per exemple, si tenim el mateix CSS per a h1 i també per a una classe .special, ho podríem escriure com dues regles separades.

+ +
h1 {
+  color: blue;
+}
+
+.special {
+  color: blue;
+}
+ +

Però també podem combinar-los en una llista de selectors, afegint-hi una coma entre ells.

+ +
h1, .special {
+  color: blue;
+}
+ +

L’espai en blanc és vàlid tant abans com després de la coma. També pots decidir que la llegibilitat dels selectors és més bona si cada un està en una línia nova.

+ +
h1,
+.special {
+  color: blue;
+}
+ +

En l'exemple en viu següent, combina els dos selectors que tenen declaracions idèntiques. La visualització hauria de ser la mateixa després de la combinació.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}}

+ +

Si agrupes els selectors d'aquesta manera, i algun dels selectors no és vàlid, s'ignorarà tota la regla.

+ +

En l'exemple següent, la regla del selector de classe no vàlida s’ignorarà mentre que no hi haurà problemes a l'hora d’aplicar estil a h1.

+ +
h1 {
+  color: blue;
+}
+
+..special {
+  color: blue;
+}
+ +

Tanmateix, en combinar-les, no s’aplicarà estil ni a h1 ni a la classe, perquè la regla ja no és vàlida.

+ +
h1, ..special {
+  color: blue;
+}
+ +

Tipus de selectors

+ +

Hi ha uns quants grups diferents de selectors, i conèixer quin tipus de selector necessites t'ajudarà a trobar l'eina adequada a l'hora de treballar. En els subarticles d’aquest article examinarem amb més detall els diferents grups de selectors.

+ +

Selectors de tipus, de classe i d’ID

+ +

Aquest grup inclou selectors que delimiten un element HTML, com ara <h1>.

+ +
h1 { }
+ +

També inclou selectors que delimiten una classe:

+ +
.box { }
+ +

o un ID:

+ +
#unique { }
+ +

Selectors d'atribut

+ +

Aquest grup de selectors t'ofereix diferents maneres de seleccionar elements segons la presència d’un atribut determinat en un element:

+ +
a[title] { }
+ +

O fins i tot fer una selecció segons la presència d’un atribut amb un valor determinat:

+ +
a[href="https://example.com"] { }
+ +

Les pseudoclasses i els pseudoelements

+ +

Aquest grup de selectors inclou les pseudoclasses, que apliquen estil a certs estats d’un element. La pseudoclasse :hover, per exemple, selecciona un element només quan hi passa pel damunt el cursor del ratolí:

+ +
a:hover { }
+ +

També inclou els pseudoelements, que seleccionen una part determinada d’un element en lloc de l’element en si. Per exemple, ::first-line sempre selecciona la primera línia de text que hi ha dins d’un element (<p> en el cas següent), i actua com si un <span> delimités la primera línia amb format i després la seleccionés.

+ +
p::first-line { }
+ +

Combinadors

+ +

El grup final de selectors fa combinacions d’altres selectors que delimiten encara més els elements dels nostres documents. A continuació, per exemple, se seleccionen els paràgrafs que són fills directes dels elements <article> amb el combinador de fills (>):

+ +
article > p { }
+ +

Propers passos

+ +

Pots donar un cop d'ull a la taula de referència de selectors que hi ha a continuació per trobar enllaços directes als diversos tipus de selectors de la secció d'aprenentatge o de MDN en general, o pots continuar en ordre i descobrir els tipus de selectors de classe i d’ID.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}

+ +

Taula de referència dels selectors

+ +

La taula següent t'ofereix una visió general dels selectors que tens disponibles, juntament amb enllaços a les pàgines d’aquesta guia, que et mostraran com utilitzar cada tipus de selector. També hem inclòs un enllaç a la pàgina MDN de cada selector, en què pots consultar la informació de compatibilitat amb els navegadors. Pots fer-ho servir com a referència de consulta per quan més endavant hagis de buscar selectors, o a mesura que experimentes amb el CSS en general.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SelectorExempleTutorial de CSS
Selector de tipush1 { }Selectors de tipus
Selector universal* { }El selector universal
Selector de classe.box { }Selectors de classe
Selector d’ID#unique { }Selectors d’ID
Selector d'atributa[title] { }Selectors d'atribut
Selectors de pseudoclassep:first-child { }Pseudoclasse
Selectors de pseudoelementp::first-line { }Pseudoelements
Combinador descendentarticle pCombinador descendent
Combinador de fillsarticle > pCombinador de fills
Combinador de germans adjacentsh1 + pGermans adjacents
Combinador general de germansh1 ~ pGermans general
+ +

En aquest mòdul

+ +
    +
  1. La cascada i l'herència
    2. +
  2. Selectors CSS + +
    3. +
  3. El model de caixes
    4. +
  4. Fons i vores
    5. +
  5. El tractament del text en diverses direccions
    6. +
  6. El desbordament dels continguts
    7. +
  7. Els valors i les unitats
    8. +
  8. Dimensionar elements en CSS
    9. +
  9. Imatges, media i elements de formulari
    10. +
  10. Aplicar estil a les taules
    11. +
  11. Depurar el CSS
    12. +
  12. Organitza el teu CSS
    13. +
diff --git a/files/ca/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html b/files/ca/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html new file mode 100644 index 0000000000..b28cb4873a --- /dev/null +++ b/files/ca/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html @@ -0,0 +1,398 @@ +--- +title: Pseudoclasses i pseudoelements +slug: Learn/CSS/Building_blocks/Selectors_CSS/Pseudo-classes_and_pseudo-elements +translation_of: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements +--- +

{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}

+ +

El conjunt següent de selectors que veurem s’anomenen pseudoclasses i pseudoelements. N'hi ha una bona quantitat i sovint serveixen per a propòsits força específics. Un cop que hauràs après a utilitzar-los, pots mirar-te la llista i veure si n’hi ha cap que et serveixi per a la tasca que intentes assolir. Una vegada més afegim que la pàgina de MDN corresponent a cada selector et pot ser útil per a esbrinar-ne la compatibilitat dels navegadors.

+ + + + + + + + + + + + +
Prerequisits:Coneixements bàsics d'informàtica, tenir el programari bàsic instal·lat, coneixements bàsics de com treballar amb fitxers i d'HTML (mira Introducció a l'HTML) i nocions bàsiques de com funciona el CSS.
Objectiu:Adquirir més informació sobre els selectors de pseudoclasse i pseudoelement.
+ +

Què és una pseudoclasse?

+ +

Una pseudoclasse és un selector que selecciona elements que es troben en un estat específic. Per exemple, són el primer element del seu tipus o bé el cursor del ratolí els passa per sobre. Solen actuar com si haguessis aplicat una classe a alguna part del document, i sovint t’ajuden a reduir l'excés de classes en l'etiquetatge i et proporcionen un codi més flexible i fàcil de mantenir.

+ +

Les pseudoclasses són paraules clau que comencen amb dos punts (:):

+ +
:pseudo-class-name
+ +

Un exemple senzill de pseudoclasse

+ +

Donem una ullada a un exemple senzill. Si volem que el primer paràgraf d'un article es vegi més gran i en negreta, podem afegir una classe a aquest paràgraf i després afegir CSS a aquesta classe, tal com es mostra en el primer exemple següent:

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/first-child.html", '100%', 800)}}

+ +

Tanmateix, això pot resultar molest a l'hora de fer-ne el manteniment; i si afegim un tipus nou de paràgraf a la part superior del document? Hauríem d’incloure la classe en el nou paràgraf. Doncs, en comptes d’afegir la classe, podríem utilitzar el selector de pseudoclasse {{cssxref(":first-child")}}; això seleccionarà sempre el primer element fill de l'article i ja no caldria editar l’HTML (que no sempre és possible, perquè de vegades es genera des d'un CMS).

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/first-child2.html", '100%', 700)}}

+ +

Totes les pseudoclasses es comporten de la mateixa manera. Etiqueten una part del document que es troba en un estat determinat, i es comporten com si haguessis afegit una classe a l'HTML. Pots veure’n més exemples a MDN:

+ + + +
+

Nota: és vàlid escriure pseudoclasses i pseudoelements sense que les precedeixi cap selector d'element. En l'exemple anterior, podríem escriure :first-child i la regla s'aplicaria a qualsevol element que sigui el primer element d'un element <article>, no només primers paràgrafs. :first-child equival a *:first-child. Però normalment volem més control i cal ser més específics.

+
+ +

Pseudoclasses d'acció d'usuari

+ +

Algunes pseudoclasses només actuen quan l'usuari interactua d'alguna manera amb el document. Aquestes pseudoclasses d'acció de l'usuari, de vegades denominades pseudoclasses dinàmiques, actuen com si s'hagués afegit una classe a l'element quan l'usuari hi interactua. Els exemples inclouen:

+ + + +

{{EmbedGHLiveSample("css-examples/learn/selectors/hover.html", '100%', 500)}}

+ +

Què és un pseudoelement?

+ +

Els pseudoelements es comporten d’una manera similar, però actuen com si afegissis un element HTML completament nou a l’etiquetatge, en lloc d’aplicar una classe als elements que ja hi ha. Els pseudoelements comencen amb un doble dos punts ::.

+ +
::pseudo-element-name
+ +
+

Nota: Alguns pseudoelements originals utilitzaven la sintaxi de dos punts simple, i de vegades encara ho pots veure en algun codi o alguns exemples. Els navegadors moderns admeten els primers pseudoelements amb una sintaxi de dos punts simple o de dos punts doble per a tenir compatibilitat cap enrere.

+
+ +

Per exemple, si volguessis seleccionar la primera línia d’un paràgraf, podries etiquetar-la amb un element <span> i utilitzar un selector d’elements; però això falla si el nombre de paraules que has etiquetat és superior o inferior a l'amplada de l'element principal. Com que no podem saber quantes paraules cabran en una línia perquè això canvia amb l’amplada de la pantalla o la mida de la lletra, no és possible fer-ho només afegint HTML.

+ +

El selector de pseudoelements ::first-line ho fa de manera segura: selecciona només la primera línia, encara que el nombre de paraules augmenti o disminueixi.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/first-line.html", '100%', 800)}}

+ +

Actua com si hi hagués una etiqueta <span> màgica en aquesta primera línia que s'actualitza cada cop que canvia la longitud de la línia.

+ +

Pots veure que això selecciona la primera línia dels dos paràgrafs.

+ +

Combinar pseudoclasses i pseudoelements

+ +

Si vols que la primera línia del primer paràgraf es vegi en negreta, pots agrupar els selectors :first-child i ::first-line. Prova d’introduir en l'exemple en viu anterior el CSS següent. Amb això demanem que volem seleccionar la primera línia del primer element <p>, que hi ha dins d’un element <article>.

+ +
article p:first-child::first-line {
+  font-size: 120%;
+  font-weight: bold;
+}
+ +

Generar contingut amb ::before i ::after

+ +

Hi ha un parell de pseudoelements especials, que s'utilitzen juntament amb la propietat content per a inserir contingut al document mitjançant CSS.

+ +

Pots utilitzar-los per a inserir una cadena de text, com en l'exemple en viu següent. Prova de canviar el valor de text de la propietat {{cssxref("content")}} i observa com canvia a la sortida. També pots canviar el pseudoelement ::before per ::after i observa que el text s’insereix al final de l'element, en lloc del principi.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/before.html", '100%', 400)}}

+ +

Inserir cadenes de text amb CSS, de fet, no es fa gaire sovint a la web, perquè aquest text no és accessible per a alguns lectors de pantalla i pot ser difícil de trobar i editar en el futur.

+ +

Un ús més vàlid d'aquests pseudoelements és inserir una icona, per exemple la petita fletxa afegida de l'exemple següent, que és un indicador visual que no volem que un lector de pantalla llegeixi:

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/after-icon.html", '100%', 400)}}

+ +

Aquests pseudoelements també s'utilitzen amb freqüència per a inserir una cadena buida, a la qual després pots aplicar estil com a qualsevol altre element de la pàgina.

+ +

En l'exemple següent hem afegit una cadena buida amb el pseudoelement ::before. L'hem establert en display: block per a poder-hi aplicar una amplada i una alçada. A continuació, utilitzem el CSS per donar-hi estil com a qualsevol altre element. Pots jugar-hi amb el CSS i canviar-ne l’aspecte i el comportament.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/before-styled.html", '100%', 500)}}

+ +

L’ús dels pseudoelements ::before i ::after, juntament amb la propietat content, es coneix en CSS com el «contingut generat» i veuràs que aquesta tècnica s’utilitza sovint per a diverses tasques. Un bon exemple és el lloc CSS Arrow Please, que t'ajuda a generar una fletxa amb CSS. Observa el CSS mentre crees la teva fletxa i fixa’t com funcionen els pseudoelements {{cssxref("::before")}} i {{cssxref("::after")}}. Sempre que vegis aquests selectors, cerca en la propietat {{cssxref("content")}} per esbrinar què s'ha afegit al document.

+ +

Secció de referència

+ +

Hi ha un gran nombre de pseudoclasses i pseudoelements, i és útil tenir una llista en la qual s’hi faci referència. A continuació es mostren unes taules amb enllaços que apunten a les seves pàgines de referència en MDN. Fes-les servir de referència per veure de quines possibilitats d’etiquetatge disposes.

+ +

Pseudoclasses

+ +

Paged Media, selecciona les pàgines de l’esquerra.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SelectorDescripció
{{ Cssxref(":active") }}Selecciona un element quan l’usuari l'activa (per exemple, fent-hi clic a sobre).
{{ Cssxref(":any-link") }}Selecciona els estats :link i :visited d'un enllaç.
{{ Cssxref(":blank") }}Selecciona un element <input> que té el valor d'entrada buit.
{{ Cssxref(":checked") }}Selecciona un botó d'opció o una casella de selecció en l'estat de seleccionat.
{{ Cssxref(":current") }}Selecciona l'element o un antecessor de l'element que es mostra actiu.
{{ Cssxref(":default") }}Selecciona un o diversos elements de la interfície d'usuari que són els elements predeterminats entre un conjunt d'elements similars.
{{ Cssxref(":dir") }}Selecciona un element a partir de la direccionalitat (el valor de l’atribut dir en HTML o la propietat direction en CSS).
{{ Cssxref(":disabled") }}Selecciona els elements d'una interfície d'usuari que estan deshabilitats.
{{ Cssxref(":empty") }}Selecciona un element que no té fills, excepte, opcionalment, un espai blanc.
{{ Cssxref(":enabled") }}Selecciona els elements d'una interfície d'usuari que estan habilitats.
{{ Cssxref(":first") }}En Paged Media, selecciona la primera pàgina.
{{ Cssxref(":first-child") }}Selecciona un element que és el primer entre els seus germans.
{{ Cssxref(":first-of-type") }}Selecciona un element d'un tipus determinat entre els seus germans.
{{ Cssxref(":focus") }}Selecciona l’element que té el focus.
{{ Cssxref(":focus-visible")}}Selecciona l’element que té el focus i que el focus està visible per a l'usuari.
{{ Cssxref(":focus-within") }}Selecciona l’element que té el focus més l’element que té un descendent amb el focus.
{{ Cssxref(":future") }}Selecciona els elements que estan just després de l’element actiu.
{{ Cssxref(":hover") }}Selecciona un element quan l'usuari hi interactua.
{{ Cssxref(":indeterminate") }}Selecciona els elements d'una interfície d'usuari, el valor dels quals estan en un estat indeterminat; generalment es tracta de caselles de selecció.
{{ Cssxref(":in-range") }}Selecciona un element amb un rang de valors quan té el valor dins del rang.
{{ Cssxref(":invalid") }}Selecciona un element, com ara <input>, que estigui en un estat no vàlid.
{{ Cssxref(":lang") }}Selecciona un element segons l’idioma (valor de l’atribut lang en HTML).
{{ Cssxref(":last-child") }}Selecciona l’element que és l’últim entre els seus germans.
{{ Cssxref(":last-of-type") }}Selecciona un element d'un tipus determinat que és l’últim entre els seus germans.
{{ Cssxref(":left") }}
{{ Cssxref(":link")}}Selecciona els enllaços no visitats.
{{ Cssxref(":local-link")}}Selecciona els enllaços que apunten a les pàgines que estan al mateix lloc web que el document actiu.
{{ Cssxref(":is", ":is()")}}Selecciona qualsevol dels selectors de la llista de selectors.
{{ Cssxref(":not") }}Selecciona coses que no han estat seleccionades per altres selectors, que es converteixen en valor d'aquest selector.
{{ Cssxref(":nth-child") }}Selecciona elements d'entre una llista de germans: els germans es combinen amb una fórmula del tipus an+b (per exemple, 2n + 1 coincidiran amb els elements 1, 3, 5, 7, etc. Tots els imparells).
{{ Cssxref(":nth-of-type") }}Selecciona elements d'un tipus determinat d'entre una llista de germans (per exemple, <p>): els germans es corresponen amb una fórmula de la forma an+b (per exemple, 2n + 1 coincidiria amb els elements 1, 3, 5, 7, etc. Tots els imparells).
{{ Cssxref(":nth-last-child") }}Selecciona elements d'entre una llista de germans, comptant enrere des del final. Els germans es corresponen amb una fórmula del tipus an+b (per exemple, 2n + 1 coincidiria amb l’últim element de la seqüència, després els dos elements anteriors, un altre cop els dos elements anteriors, etc. Tots els imparells, comptant des del final).
{{ Cssxref(":nth-last-of-type") }}Selecciona elements d'un tipus determinat d'entre una llista de germans (per exemple, <p>), comptant cap enrere des del final. Els germans es corresponen amb una fórmula de la forma an+b (per exemple, 2n + 1 coincidiria amb l’últim element d’aquest tipus de la seqüència, després els dos elements anteriors a aquell, i un altre cop dos elements anteriors, etc. Tots els imparells, comptant des del final).
{{ Cssxref(":only-child") }}Selecciona un element que no té germans.
{{ Cssxref(":only-of-type") }}Selecciona un element que és l'únic del seu tipus entre els seus germans.
{{ Cssxref(":optional") }}Selecciona els elements de formulari que no són necessaris.
{{ Cssxref(":out-of-range") }}Selecciona un element amb un interval quan el seu valor està fora del rang.
{{ Cssxref(":past") }}Selecciona els elements que són anteriors a l’element actiu.
{{ Cssxref(":placeholder-shown") }}Selecciona un element d’entrada que mostra el marcador de posició del text.
{{ Cssxref(":playing") }}Selecciona un element que representa un àudio, un vídeo o un recurs similar, que pot ser «reproduït» o «pausat» quan aquest element «es reprodueix».
{{ Cssxref(":paused") }}Selecciona un element que representa un àudio, un vídeo o un recurs similar, que pot ser «reproduït» o «pausat», quan aquest element està «en pausa».
{{ Cssxref(":read-only") }}Selecciona un element no modificable per l'usuari.
{{ Cssxref(":read-write") }}Selecciona un element modificable per l'usuari.
{{ Cssxref(":required") }}Selecciona els elements de formulari que són necessaris.
{{ Cssxref(":right") }}En Paged Media, selecciona les pàgines de la dreta.
{{ Cssxref(":root") }}Selecciona un element que és l'arrel del document.
{{ Cssxref(":scope") }}Selecciona qualsevol element que sigui un element d'abast.
{{ Cssxref(":valid") }}Selecciona un element, com ara <input>, que estigui en un estat vàlid.
{{ Cssxref(":target") }}Selecciona l’element al qual apunta l’URL activa (és a dir, si té un ID que coincideix amb l’identificador de fragment de l’URL actiu).
{{ Cssxref(":visited") }}Selecciona els enllaços visitats.
+ +

Pseudoelements

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SelectorDescripció
{{ Cssxref("::after") }}Selecciona un element que pot aparèixer després del contingut actiu de l'element originari.
{{ Cssxref("::before") }}Selecciona un element que pot aparèixer abans del contingut actiu de l'element originari.
{{ Cssxref("::first-letter") }}Selecciona la primera lletra de l'element.
{{ Cssxref("::first-line") }}Selecciona la primera línia de l'element.
{{ Cssxref("::grammar-error") }}Selecciona una part del document que conté un error de gramàtica que indica el navegador.
{{ Cssxref("::selection") }}Selecciona la part del document seleccionat.
{{ Cssxref("::spelling-error") }}Selecciona una part del document que conté un error d'ortografia que indica el navegador.
+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}

+ +

En aquest mòdul

+ +
    +
  1. La cascada i l'herència
    2. +
  2. Els selectors CSS + +
    3. +
  3. El model de caixes
    4. +
  4. Fons i vores
    5. +
  5. El tractament del text en diverses direccions
    6. +
  6. El desbordament dels continguts
    7. +
  7. Els valors i les unitats
    8. +
  8. Dimensionar elements en CSS
    9. +
  9. Imatges, mèdia i elements de formulari
    10. +
  10. Aplicar estil a les taules
    11. +
  11. Depura el teu CSS
    12. +
  12. Organitza el teu CSS
    13. +
diff --git a/files/ca/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html b/files/ca/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html new file mode 100644 index 0000000000..2cdbdc244a --- /dev/null +++ b/files/ca/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html @@ -0,0 +1,117 @@ +--- +title: 'Selectors de tipus, classe i ID' +slug: Learn/CSS/Building_blocks/Selectors_CSS/Selectors_de_tipus_classe_i_ID +translation_of: Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors +--- +

{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}

+ +

En aquest article farem un cop d’ull als selectors més senzills que hi ha disponibles, i que probablement utilitzaràs més a l'hora de treballar.

+ + + + + + + + + + + + +
Prerequisits:Coneixements bàsics d'informàtica, tenir el programari bàsic instal·lat, coneixements bàsics de com treballar amb fitxers i d'HTML (mira Introducció a l'HTML) i nocions bàsiques de com funciona el CSS.
Objectiu:Obtenir més informació sobre els diferents selectors CSS que podem utilitzar per a aplicar CSS a un document.
+ +

Selectors de tipus

+ +

A vegades, a un selector de tipus també se'l denomina selector de noms d'etiqueta o selector d'elements, perquè selecciona una etiqueta/element HTML al document. En l’exemple següent hem utilitzat selectors span, em i strong. Per tant, hem aplicat estil a totes les instàncies <span>, <em> i <strong>.

+ +

Afegeix una regla CSS que seleccioni l’element <h1> i en canviï el color pel blau.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/type.html", '100%', 1100)}}

+ +

El selector universal

+ +

El selector universal s'indica amb un asterisc (*) i selecciona tot el que hi ha dins del document (o dins de l'element pare, si s'encadena amb un altre element i un combinador descendent, per exemple). En l'exemple següent hem utilitzat el selector universal per a eliminar els marges de tots els elements. Això vol dir que, en lloc de l'estil predeterminat que hi afegeix el navegador, que deixa un espai de marge entre els títols d’encapçalament i els paràgrafs, tot està junt i no podem distingir els diferents paràgrafs amb facilitat.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/universal.html", '100%', 750)}}

+ +

Aquest tipus de comportament a vegades es pot veure en els «fulls d'estil de restabliment» (o «fulls d'estil reset»), que eliminen tot l'estil que aplica el navegador. Van ser molt populars en un moment determinat, tot i que eliminar tots els estils significava que aleshores havies de tornar-ho a fer tot! Per tant, acostumem a utilitzar el selector universal amb atenció per a afrontar situacions molt específiques, com la que es descriu a continuació.

+ +

Ús del selector universal per a facilitar la lectura

+ +

Un dels usos del selector universal és fer els selectors més fàcils de llegir i més evidents, en termes de què fan. Per exemple, si vull seleccionar el primer fill de qualsevol element <article>, independentment de quin element sigui, i posar-lo en negreta, podem utilitzar el selector {{cssxref(":first-child")}}, que veurem amb més detall en l’article sobre pseudoclasses i pseudoelements, com un selector descendent juntament amb el selector d'elements <article>:

+ +
article :first-child {
+
+}
+ +

Això es pot confondre, però, amb article:first-child, que selecciona qualsevol element <article> que sigui el primer fill d'un altre element.

+ +

Per evitar aquesta confusió, podem afegir al selector :first-child el selector universal, de manera que ara resulta obvi el que fa el selector. Selecciona qualsevol element que sigui el primer fill d'un element <article>:

+ +
article *:first-child {
+
+}
+ +

Selectors de classe

+ +

El selector de classe s’inicia amb un caràcter de punt (.) i selecciona qualsevol element del document que tingui aplicada la classe seleccionada. En l'exemple en directe següent hem creat una classe anomenada .highlight i l'hem aplicada a diversos llocs del document. Es ressalten tots els elements que tenen aplicada aquesta classe.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/class.html", '100%', 750)}}

+ +

Seleccionar classes en elements concrets

+ +

Pots crear un selector que seleccioni els elements específics que tenen aplicada aquella classe. En l'exemple següent, destaquem un element <span> que té una classe highlight diferent del destacat que apliquem a l'encapçalament <h1> amb classe highlight. Ho fem adjuntant la classe al selector de tipus per a l’element que volem seleccionar, sense cap espai entremig.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/class-type.html", '100%', 750)}}

+ +

Aquesta manera de seleccionar dificulta la reutilització de CSS, perquè la classe només s'aplica a aquest element en concret, i hauràs d'afegir un altre selector si decideixes que les regles s'han d'aplicar també a altres elements.

+ +

Seleccionar un element si té aplicada més d'una classe

+ +

Pots aplicar diverses classes a un element i seleccionar-les individualment, o bé seleccionar l'element només quan inclou totes les classes del selector. Això pot ser útil per a crear components que es poden combinar de maneres diferents al teu lloc web.

+ +

En l'exemple següent hi ha un element <div> que inclou una nota. La vora gris s'aplica quan la casella té una classe notebox. Si també té una classe warning o danger, el {{cssxref("border-color")}} canvia.

+ +

Podem dir-li al navegador que només volem fer coincidir l’element si té totes aquestes classes tot encadenant-les juntes sense espais entremig.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/class-many.html", '100%', 900)}}

+ +

Selectors d’ID

+ +

Un selector d’ID comença amb un caràcter # en lloc d'un caràcter de punt, però s'utilitza bàsicament de la mateixa manera que un selector de classe. Ara bé, un ID només es pot utilitzar una vegada en cada document, i cada element pot tenir un id com a màxim. El selector pot seleccionar l’element que té l’id establert i també pots precedir l'identificador amb un selector de tipus que seleccioni l’element només si coincideix amb l'ID. Pots veure aquests dos usos en l'exemple següent:

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/id.html", '100%', 750)}}

+ +
+

Nota: Tal com hem après en l’article que parla d'especificitat, un ID té més especificitat i anul·la la majoria dels altres selectors. Això pot dificultar les coses a l'hora de treballar. En la majoria dels casos és preferible afegir una classe a l'element, en lloc d'utilitzar un ID, però a vegades fer servir un ID és l'única manera de seleccionar l'element (potser perquè no es té accés al codi d’etiquetatge i, per tant, no es pot editar).

+
+ +

En el proper article

+ +

Continuarem explorant els selectors i veurem els selectors d’atribut.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}

+ +

En aquest mòdul

+ +
    +
  1. La cascada i l'herència
    2. +
  2. Els selectors CSS + +
    3. +
  3. El model de caixes
    4. +
  4. Fons i vores
    5. +
  5. El tractament del text en diverses direccions
    6. +
  6. El desbordament dels continguts
    7. +
  7. Els valors i les unitats
    8. +
  8. Dimensionar elements en CSS
    9. +
  9. Imatges, media i elements de formulari
    10. +
  10. Aplicar estil a les taules
    11. +
  11. Depurar el CSS
    12. +
  12. Organitza el teu CSS
    13. +
diff --git a/files/ca/learn/css/building_blocks/selectors_css/combinadors/index.html b/files/ca/learn/css/building_blocks/selectors_css/combinadors/index.html deleted file mode 100644 index 175379f986..0000000000 --- a/files/ca/learn/css/building_blocks/selectors_css/combinadors/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: Combinadors -slug: Learn/CSS/Building_blocks/Selectors_CSS/Combinadors -translation_of: Learn/CSS/Building_blocks/Selectors/Combinators ---- -

{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}

- -

Els últims selectors que veurem s’anomenen combinadors, perquè combinen altres selectors de manera que proporcionen una relació útil entre aquests i la ubicació de continguts en el document.

- - - - - - - - - - - - -
Prerequisits:Coneixements bàsics d'informàtica, tenir el programari bàsic instal·lat, coneixements bàsics de com treballar amb fitxers i d'HTML (mira Introducció a l'HTML) i nocions bàsiques de com funciona el CSS.
Objectiu:Obtenir més informació sobre els diferents selectors que es poden utilitzar en CSS.
- -

Selector de descendents

- -

Ja has vist selectors de descendents en articles anteriors (selectors separats per un espai):

- -
body article p
- -

Aquests selectors seleccionen elements que són descendents d’un altre selector. No cal que els elements que se seleccionen siguin fills directes.

- -

En l'exemple següent se seleccionen només els elements <p> que hi ha dins d'un element que està etiquetat amb una classe .box.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/descendant.html", '100%', 500)}}

- -

Combinador de fills

- -

El combinador de fills és un símbol de «més gran que» (>), que només selecciona elements que són descendents directes. Els descendents que hi ha més avall en la jerarquia no se seleccionen; per exemple, per a seleccionar només els elements <p> que són descendents directes d’elements <article>:

- -
article > p
- -

En aquest exemple hi ha una llista ordenada imbricada dins d'una altra llista no ordenada. Fem servir el combinador de fills per a seleccionar només els elements <li> que són fills directes de <ul> i els apliquem una vora superior.

- -

Si suprimim l’element >, que designa que es tracta d'un selector de fills, obtenim un selector de descendents, i tots els elements <li> adquireixen una vora vermella.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/child.html", '100%', 600)}}

- -

Selector de germans adjacents

- -

El selector de germans adjacents (+) s'utilitza per a seleccionar un element que es troba immediatament a continuació d'un altre element en el mateix nivell de jerarquia; per exemple, per a seleccionar tots els elements <img> que hi ha just a continuació d‘elements <p>:

- -
p + img
- -

Un cas comú d’ús d’aquest combinador és per a fer alguna cosa amb un paràgraf que va a continuació d’un encapçalament, com en el nostre exemple següent. Aquí busquem un paràgraf que estigui immediatament a continuació d’<h1> i hi apliquem estil.

- -

Si insereixes qualsevol altre element, com ara <h2>, entre <h1> i <p>, el paràgraf ja no coincideix amb el selector, i el color de fons no s'aplica.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/adjacent.html", '100%', 800)}}

- -

Selector de germans general

- -

Si vols seleccionar els elements que són germans d’un element, encara que no siguin adjacents directes, pots fer servir el selector de germans general (~). Per a seleccionar tots els elements <img> que estiguin en qualsevol lloc a continuació dels elements <p>, hem de fer això:

- -
p ~ img
- -

En l'exemple següent seleccionem tots els elements <p> que hi ha després de <h1>, i tot i que en el document també hi ha un element <div>, se selecciona també l'element <p> que hi ha després.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/general.html", '100%', 600)}}

- -

L'ús dels combinadors

- -

Pots combinar qualsevol dels selectors que hem vist en articles anteriors amb els combinadors per a seleccionar parts d’un document. Per exemple, per a seleccionar els elements de llista que tenen una classe «a» que són descendents directes de <ul>, pots utilitzar el codi següent:

- -
ul > li[class="a"]  {  }
- -

Tanmateix, has de tenir cura quan crees llistes grans de selectors que seleccionen parts molt específiques del document, perquè el selector serà molt específic per a la ubicació d'aquest element en l'etiquetatge i et serà difícil reutilitzar les regles CSS.

- -

Sovint és millor crear una classe senzilla i aplicar-la a l’element en qüestió. Ara bé, els coneixements sobre combinadors et poden ser molt útils si necessites accedir a algun part del document, però no pots accedir al codi HTML, potser a causa de la generació d’un CMS.

- -

Comprova les teves habilitats

- -

Hem vist moltes coses en aquest article. Recordes la informació més important? Trobaràs més tests per a verificar que has retingut aquesta informació a Test your skills: Selectors.

- -

Avancem

- -

Aquesta és l’última secció dels nostres articles sobre selectors. A continuació passarem a una altra qüestió important del CSS: el model de caixes del CSS.

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}

- -

En aquest mòdul

- -
    -
  1. La cascada i l'herència
    2. -
  2. Els selectors CSS - -
    3. -
  3. El model de caixes
    4. -
  4. Fons i vores
    5. -
  5. El tractament de les diverses direccions del text
    6. -
  6. El desbordament del contingut
    7. -
  7. Els valors i les unitats
    8. -
  8. Dimensionar elements en CSS
    9. -
  9. Elements d'imatge, de mèdia i de formulari
    10. -
  10. Aplicar estil a les taules
    11. -
  11. Depurar el CSS
    12. -
  12. Organitzar el teu CSS
    13. -
diff --git a/files/ca/learn/css/building_blocks/selectors_css/index.html b/files/ca/learn/css/building_blocks/selectors_css/index.html deleted file mode 100644 index 4bd7b005de..0000000000 --- a/files/ca/learn/css/building_blocks/selectors_css/index.html +++ /dev/null @@ -1,223 +0,0 @@ ---- -title: Selectors CSS -slug: Learn/CSS/Building_blocks/Selectors_CSS -translation_of: Learn/CSS/Building_blocks/Selectors ---- -
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}
- -

En el {{Glossary("CSS")}}, els selectors s'utilitzen per a determinar els elements {{glossary("HTML")}} de les pàgines web als quals volem aplicar estil. Hi ha una gran varietat de selectors CSS disponibles, que permeten obtenir una precisió àmplia a l’hora de seleccionar elements per a aplicar-los estil. En aquest article i els seus subarticles s'explicaran els diferents tipus amb detall i observarem com funcionen.

- - - - - - - - - - - - -
Prerequisits:Coneixements bàsics d'informàtica, tenir el programari bàsic instal·lat, coneixements bàsics de com treballar amb fitxers i d'HTML (mira Introducció a l'HTML) i nocions bàsiques de com funciona el CSS.
Objectiu:Conèixer amb detall com funcionen els selectors CSS.
- -

Què és un selector?

- -

Ja has conegut els selectors. Un selector CSS és la primera part d'una regla CSS. Es tracta d’un patró d’elements i d’altres termes que diuen al navegador quins elements HTML s’han de seleccionar perquè tinguin els valors de les propietat CSS segons la regla que se’ls ha d’aplicar. L'element o els elements que selecciona el selector s'anomenen el subjecte del selector.

- -

Una mica de codi amb un h1 ressaltat.

- -

En articles anteriors, has vist altres selectors i també que hi ha selectors que es focalitzen en el document de maneres diferents (per exemple, seleccionant un element com h1, o una classe com .special).

- -

En CSS, els selectors es defineixen en l’especificació dels selectors CSS; com qualsevol altra part del CSS, han de ser compatibles amb els navegadors perquè funcionin. La majoria de selectors que trobaràs es defineixen en l’especificació de selectors de nivell 3, que és una especificació madura i, per tant, trobaràs una compatibilitat de navegadors excel·lent per a aquests selectors.

- -

Llistes de selectors

- -

Si tens més d'un element que utilitza el mateix CSS, cadascun dels selectors es poden combinar en una llista de selectors que aplica la mateixa regla a tots els selectors. Per exemple, si tenim el mateix CSS per a h1 i també per a una classe .special, ho podríem escriure com dues regles separades.

- -
h1 {
-  color: blue;
-}
-
-.special {
-  color: blue;
-}
- -

Però també podem combinar-los en una llista de selectors, afegint-hi una coma entre ells.

- -
h1, .special {
-  color: blue;
-}
- -

L’espai en blanc és vàlid tant abans com després de la coma. També pots decidir que la llegibilitat dels selectors és més bona si cada un està en una línia nova.

- -
h1,
-.special {
-  color: blue;
-}
- -

En l'exemple en viu següent, combina els dos selectors que tenen declaracions idèntiques. La visualització hauria de ser la mateixa després de la combinació.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}}

- -

Si agrupes els selectors d'aquesta manera, i algun dels selectors no és vàlid, s'ignorarà tota la regla.

- -

En l'exemple següent, la regla del selector de classe no vàlida s’ignorarà mentre que no hi haurà problemes a l'hora d’aplicar estil a h1.

- -
h1 {
-  color: blue;
-}
-
-..special {
-  color: blue;
-}
- -

Tanmateix, en combinar-les, no s’aplicarà estil ni a h1 ni a la classe, perquè la regla ja no és vàlida.

- -
h1, ..special {
-  color: blue;
-}
- -

Tipus de selectors

- -

Hi ha uns quants grups diferents de selectors, i conèixer quin tipus de selector necessites t'ajudarà a trobar l'eina adequada a l'hora de treballar. En els subarticles d’aquest article examinarem amb més detall els diferents grups de selectors.

- -

Selectors de tipus, de classe i d’ID

- -

Aquest grup inclou selectors que delimiten un element HTML, com ara <h1>.

- -
h1 { }
- -

També inclou selectors que delimiten una classe:

- -
.box { }
- -

o un ID:

- -
#unique { }
- -

Selectors d'atribut

- -

Aquest grup de selectors t'ofereix diferents maneres de seleccionar elements segons la presència d’un atribut determinat en un element:

- -
a[title] { }
- -

O fins i tot fer una selecció segons la presència d’un atribut amb un valor determinat:

- -
a[href="https://example.com"] { }
- -

Les pseudoclasses i els pseudoelements

- -

Aquest grup de selectors inclou les pseudoclasses, que apliquen estil a certs estats d’un element. La pseudoclasse :hover, per exemple, selecciona un element només quan hi passa pel damunt el cursor del ratolí:

- -
a:hover { }
- -

També inclou els pseudoelements, que seleccionen una part determinada d’un element en lloc de l’element en si. Per exemple, ::first-line sempre selecciona la primera línia de text que hi ha dins d’un element (<p> en el cas següent), i actua com si un <span> delimités la primera línia amb format i després la seleccionés.

- -
p::first-line { }
- -

Combinadors

- -

El grup final de selectors fa combinacions d’altres selectors que delimiten encara més els elements dels nostres documents. A continuació, per exemple, se seleccionen els paràgrafs que són fills directes dels elements <article> amb el combinador de fills (>):

- -
article > p { }
- -

Propers passos

- -

Pots donar un cop d'ull a la taula de referència de selectors que hi ha a continuació per trobar enllaços directes als diversos tipus de selectors de la secció d'aprenentatge o de MDN en general, o pots continuar en ordre i descobrir els tipus de selectors de classe i d’ID.

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}

- -

Taula de referència dels selectors

- -

La taula següent t'ofereix una visió general dels selectors que tens disponibles, juntament amb enllaços a les pàgines d’aquesta guia, que et mostraran com utilitzar cada tipus de selector. També hem inclòs un enllaç a la pàgina MDN de cada selector, en què pots consultar la informació de compatibilitat amb els navegadors. Pots fer-ho servir com a referència de consulta per quan més endavant hagis de buscar selectors, o a mesura que experimentes amb el CSS en general.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SelectorExempleTutorial de CSS
Selector de tipush1 { }Selectors de tipus
Selector universal* { }El selector universal
Selector de classe.box { }Selectors de classe
Selector d’ID#unique { }Selectors d’ID
Selector d'atributa[title] { }Selectors d'atribut
Selectors de pseudoclassep:first-child { }Pseudoclasse
Selectors de pseudoelementp::first-line { }Pseudoelements
Combinador descendentarticle pCombinador descendent
Combinador de fillsarticle > pCombinador de fills
Combinador de germans adjacentsh1 + pGermans adjacents
Combinador general de germansh1 ~ pGermans general
- -

En aquest mòdul

- -
    -
  1. La cascada i l'herència
    2. -
  2. Selectors CSS - -
    3. -
  3. El model de caixes
    4. -
  4. Fons i vores
    5. -
  5. El tractament del text en diverses direccions
    6. -
  6. El desbordament dels continguts
    7. -
  7. Els valors i les unitats
    8. -
  8. Dimensionar elements en CSS
    9. -
  9. Imatges, media i elements de formulari
    10. -
  10. Aplicar estil a les taules
    11. -
  11. Depurar el CSS
    12. -
  12. Organitza el teu CSS
    13. -
diff --git a/files/ca/learn/css/building_blocks/selectors_css/pseudo-classes_and_pseudo-elements/index.html b/files/ca/learn/css/building_blocks/selectors_css/pseudo-classes_and_pseudo-elements/index.html deleted file mode 100644 index b28cb4873a..0000000000 --- a/files/ca/learn/css/building_blocks/selectors_css/pseudo-classes_and_pseudo-elements/index.html +++ /dev/null @@ -1,398 +0,0 @@ ---- -title: Pseudoclasses i pseudoelements -slug: Learn/CSS/Building_blocks/Selectors_CSS/Pseudo-classes_and_pseudo-elements -translation_of: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements ---- -

{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}

- -

El conjunt següent de selectors que veurem s’anomenen pseudoclasses i pseudoelements. N'hi ha una bona quantitat i sovint serveixen per a propòsits força específics. Un cop que hauràs après a utilitzar-los, pots mirar-te la llista i veure si n’hi ha cap que et serveixi per a la tasca que intentes assolir. Una vegada més afegim que la pàgina de MDN corresponent a cada selector et pot ser útil per a esbrinar-ne la compatibilitat dels navegadors.

- - - - - - - - - - - - -
Prerequisits:Coneixements bàsics d'informàtica, tenir el programari bàsic instal·lat, coneixements bàsics de com treballar amb fitxers i d'HTML (mira Introducció a l'HTML) i nocions bàsiques de com funciona el CSS.
Objectiu:Adquirir més informació sobre els selectors de pseudoclasse i pseudoelement.
- -

Què és una pseudoclasse?

- -

Una pseudoclasse és un selector que selecciona elements que es troben en un estat específic. Per exemple, són el primer element del seu tipus o bé el cursor del ratolí els passa per sobre. Solen actuar com si haguessis aplicat una classe a alguna part del document, i sovint t’ajuden a reduir l'excés de classes en l'etiquetatge i et proporcionen un codi més flexible i fàcil de mantenir.

- -

Les pseudoclasses són paraules clau que comencen amb dos punts (:):

- -
:pseudo-class-name
- -

Un exemple senzill de pseudoclasse

- -

Donem una ullada a un exemple senzill. Si volem que el primer paràgraf d'un article es vegi més gran i en negreta, podem afegir una classe a aquest paràgraf i després afegir CSS a aquesta classe, tal com es mostra en el primer exemple següent:

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/first-child.html", '100%', 800)}}

- -

Tanmateix, això pot resultar molest a l'hora de fer-ne el manteniment; i si afegim un tipus nou de paràgraf a la part superior del document? Hauríem d’incloure la classe en el nou paràgraf. Doncs, en comptes d’afegir la classe, podríem utilitzar el selector de pseudoclasse {{cssxref(":first-child")}}; això seleccionarà sempre el primer element fill de l'article i ja no caldria editar l’HTML (que no sempre és possible, perquè de vegades es genera des d'un CMS).

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/first-child2.html", '100%', 700)}}

- -

Totes les pseudoclasses es comporten de la mateixa manera. Etiqueten una part del document que es troba en un estat determinat, i es comporten com si haguessis afegit una classe a l'HTML. Pots veure’n més exemples a MDN:

- - - -
-

Nota: és vàlid escriure pseudoclasses i pseudoelements sense que les precedeixi cap selector d'element. En l'exemple anterior, podríem escriure :first-child i la regla s'aplicaria a qualsevol element que sigui el primer element d'un element <article>, no només primers paràgrafs. :first-child equival a *:first-child. Però normalment volem més control i cal ser més específics.

-
- -

Pseudoclasses d'acció d'usuari

- -

Algunes pseudoclasses només actuen quan l'usuari interactua d'alguna manera amb el document. Aquestes pseudoclasses d'acció de l'usuari, de vegades denominades pseudoclasses dinàmiques, actuen com si s'hagués afegit una classe a l'element quan l'usuari hi interactua. Els exemples inclouen:

- - - -

{{EmbedGHLiveSample("css-examples/learn/selectors/hover.html", '100%', 500)}}

- -

Què és un pseudoelement?

- -

Els pseudoelements es comporten d’una manera similar, però actuen com si afegissis un element HTML completament nou a l’etiquetatge, en lloc d’aplicar una classe als elements que ja hi ha. Els pseudoelements comencen amb un doble dos punts ::.

- -
::pseudo-element-name
- -
-

Nota: Alguns pseudoelements originals utilitzaven la sintaxi de dos punts simple, i de vegades encara ho pots veure en algun codi o alguns exemples. Els navegadors moderns admeten els primers pseudoelements amb una sintaxi de dos punts simple o de dos punts doble per a tenir compatibilitat cap enrere.

-
- -

Per exemple, si volguessis seleccionar la primera línia d’un paràgraf, podries etiquetar-la amb un element <span> i utilitzar un selector d’elements; però això falla si el nombre de paraules que has etiquetat és superior o inferior a l'amplada de l'element principal. Com que no podem saber quantes paraules cabran en una línia perquè això canvia amb l’amplada de la pantalla o la mida de la lletra, no és possible fer-ho només afegint HTML.

- -

El selector de pseudoelements ::first-line ho fa de manera segura: selecciona només la primera línia, encara que el nombre de paraules augmenti o disminueixi.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/first-line.html", '100%', 800)}}

- -

Actua com si hi hagués una etiqueta <span> màgica en aquesta primera línia que s'actualitza cada cop que canvia la longitud de la línia.

- -

Pots veure que això selecciona la primera línia dels dos paràgrafs.

- -

Combinar pseudoclasses i pseudoelements

- -

Si vols que la primera línia del primer paràgraf es vegi en negreta, pots agrupar els selectors :first-child i ::first-line. Prova d’introduir en l'exemple en viu anterior el CSS següent. Amb això demanem que volem seleccionar la primera línia del primer element <p>, que hi ha dins d’un element <article>.

- -
article p:first-child::first-line {
-  font-size: 120%;
-  font-weight: bold;
-}
- -

Generar contingut amb ::before i ::after

- -

Hi ha un parell de pseudoelements especials, que s'utilitzen juntament amb la propietat content per a inserir contingut al document mitjançant CSS.

- -

Pots utilitzar-los per a inserir una cadena de text, com en l'exemple en viu següent. Prova de canviar el valor de text de la propietat {{cssxref("content")}} i observa com canvia a la sortida. També pots canviar el pseudoelement ::before per ::after i observa que el text s’insereix al final de l'element, en lloc del principi.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/before.html", '100%', 400)}}

- -

Inserir cadenes de text amb CSS, de fet, no es fa gaire sovint a la web, perquè aquest text no és accessible per a alguns lectors de pantalla i pot ser difícil de trobar i editar en el futur.

- -

Un ús més vàlid d'aquests pseudoelements és inserir una icona, per exemple la petita fletxa afegida de l'exemple següent, que és un indicador visual que no volem que un lector de pantalla llegeixi:

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/after-icon.html", '100%', 400)}}

- -

Aquests pseudoelements també s'utilitzen amb freqüència per a inserir una cadena buida, a la qual després pots aplicar estil com a qualsevol altre element de la pàgina.

- -

En l'exemple següent hem afegit una cadena buida amb el pseudoelement ::before. L'hem establert en display: block per a poder-hi aplicar una amplada i una alçada. A continuació, utilitzem el CSS per donar-hi estil com a qualsevol altre element. Pots jugar-hi amb el CSS i canviar-ne l’aspecte i el comportament.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/before-styled.html", '100%', 500)}}

- -

L’ús dels pseudoelements ::before i ::after, juntament amb la propietat content, es coneix en CSS com el «contingut generat» i veuràs que aquesta tècnica s’utilitza sovint per a diverses tasques. Un bon exemple és el lloc CSS Arrow Please, que t'ajuda a generar una fletxa amb CSS. Observa el CSS mentre crees la teva fletxa i fixa’t com funcionen els pseudoelements {{cssxref("::before")}} i {{cssxref("::after")}}. Sempre que vegis aquests selectors, cerca en la propietat {{cssxref("content")}} per esbrinar què s'ha afegit al document.

- -

Secció de referència

- -

Hi ha un gran nombre de pseudoclasses i pseudoelements, i és útil tenir una llista en la qual s’hi faci referència. A continuació es mostren unes taules amb enllaços que apunten a les seves pàgines de referència en MDN. Fes-les servir de referència per veure de quines possibilitats d’etiquetatge disposes.

- -

Pseudoclasses

- -

Paged Media, selecciona les pàgines de l’esquerra.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SelectorDescripció
{{ Cssxref(":active") }}Selecciona un element quan l’usuari l'activa (per exemple, fent-hi clic a sobre).
{{ Cssxref(":any-link") }}Selecciona els estats :link i :visited d'un enllaç.
{{ Cssxref(":blank") }}Selecciona un element <input> que té el valor d'entrada buit.
{{ Cssxref(":checked") }}Selecciona un botó d'opció o una casella de selecció en l'estat de seleccionat.
{{ Cssxref(":current") }}Selecciona l'element o un antecessor de l'element que es mostra actiu.
{{ Cssxref(":default") }}Selecciona un o diversos elements de la interfície d'usuari que són els elements predeterminats entre un conjunt d'elements similars.
{{ Cssxref(":dir") }}Selecciona un element a partir de la direccionalitat (el valor de l’atribut dir en HTML o la propietat direction en CSS).
{{ Cssxref(":disabled") }}Selecciona els elements d'una interfície d'usuari que estan deshabilitats.
{{ Cssxref(":empty") }}Selecciona un element que no té fills, excepte, opcionalment, un espai blanc.
{{ Cssxref(":enabled") }}Selecciona els elements d'una interfície d'usuari que estan habilitats.
{{ Cssxref(":first") }}En Paged Media, selecciona la primera pàgina.
{{ Cssxref(":first-child") }}Selecciona un element que és el primer entre els seus germans.
{{ Cssxref(":first-of-type") }}Selecciona un element d'un tipus determinat entre els seus germans.
{{ Cssxref(":focus") }}Selecciona l’element que té el focus.
{{ Cssxref(":focus-visible")}}Selecciona l’element que té el focus i que el focus està visible per a l'usuari.
{{ Cssxref(":focus-within") }}Selecciona l’element que té el focus més l’element que té un descendent amb el focus.
{{ Cssxref(":future") }}Selecciona els elements que estan just després de l’element actiu.
{{ Cssxref(":hover") }}Selecciona un element quan l'usuari hi interactua.
{{ Cssxref(":indeterminate") }}Selecciona els elements d'una interfície d'usuari, el valor dels quals estan en un estat indeterminat; generalment es tracta de caselles de selecció.
{{ Cssxref(":in-range") }}Selecciona un element amb un rang de valors quan té el valor dins del rang.
{{ Cssxref(":invalid") }}Selecciona un element, com ara <input>, que estigui en un estat no vàlid.
{{ Cssxref(":lang") }}Selecciona un element segons l’idioma (valor de l’atribut lang en HTML).
{{ Cssxref(":last-child") }}Selecciona l’element que és l’últim entre els seus germans.
{{ Cssxref(":last-of-type") }}Selecciona un element d'un tipus determinat que és l’últim entre els seus germans.
{{ Cssxref(":left") }}
{{ Cssxref(":link")}}Selecciona els enllaços no visitats.
{{ Cssxref(":local-link")}}Selecciona els enllaços que apunten a les pàgines que estan al mateix lloc web que el document actiu.
{{ Cssxref(":is", ":is()")}}Selecciona qualsevol dels selectors de la llista de selectors.
{{ Cssxref(":not") }}Selecciona coses que no han estat seleccionades per altres selectors, que es converteixen en valor d'aquest selector.
{{ Cssxref(":nth-child") }}Selecciona elements d'entre una llista de germans: els germans es combinen amb una fórmula del tipus an+b (per exemple, 2n + 1 coincidiran amb els elements 1, 3, 5, 7, etc. Tots els imparells).
{{ Cssxref(":nth-of-type") }}Selecciona elements d'un tipus determinat d'entre una llista de germans (per exemple, <p>): els germans es corresponen amb una fórmula de la forma an+b (per exemple, 2n + 1 coincidiria amb els elements 1, 3, 5, 7, etc. Tots els imparells).
{{ Cssxref(":nth-last-child") }}Selecciona elements d'entre una llista de germans, comptant enrere des del final. Els germans es corresponen amb una fórmula del tipus an+b (per exemple, 2n + 1 coincidiria amb l’últim element de la seqüència, després els dos elements anteriors, un altre cop els dos elements anteriors, etc. Tots els imparells, comptant des del final).
{{ Cssxref(":nth-last-of-type") }}Selecciona elements d'un tipus determinat d'entre una llista de germans (per exemple, <p>), comptant cap enrere des del final. Els germans es corresponen amb una fórmula de la forma an+b (per exemple, 2n + 1 coincidiria amb l’últim element d’aquest tipus de la seqüència, després els dos elements anteriors a aquell, i un altre cop dos elements anteriors, etc. Tots els imparells, comptant des del final).
{{ Cssxref(":only-child") }}Selecciona un element que no té germans.
{{ Cssxref(":only-of-type") }}Selecciona un element que és l'únic del seu tipus entre els seus germans.
{{ Cssxref(":optional") }}Selecciona els elements de formulari que no són necessaris.
{{ Cssxref(":out-of-range") }}Selecciona un element amb un interval quan el seu valor està fora del rang.
{{ Cssxref(":past") }}Selecciona els elements que són anteriors a l’element actiu.
{{ Cssxref(":placeholder-shown") }}Selecciona un element d’entrada que mostra el marcador de posició del text.
{{ Cssxref(":playing") }}Selecciona un element que representa un àudio, un vídeo o un recurs similar, que pot ser «reproduït» o «pausat» quan aquest element «es reprodueix».
{{ Cssxref(":paused") }}Selecciona un element que representa un àudio, un vídeo o un recurs similar, que pot ser «reproduït» o «pausat», quan aquest element està «en pausa».
{{ Cssxref(":read-only") }}Selecciona un element no modificable per l'usuari.
{{ Cssxref(":read-write") }}Selecciona un element modificable per l'usuari.
{{ Cssxref(":required") }}Selecciona els elements de formulari que són necessaris.
{{ Cssxref(":right") }}En Paged Media, selecciona les pàgines de la dreta.
{{ Cssxref(":root") }}Selecciona un element que és l'arrel del document.
{{ Cssxref(":scope") }}Selecciona qualsevol element que sigui un element d'abast.
{{ Cssxref(":valid") }}Selecciona un element, com ara <input>, que estigui en un estat vàlid.
{{ Cssxref(":target") }}Selecciona l’element al qual apunta l’URL activa (és a dir, si té un ID que coincideix amb l’identificador de fragment de l’URL actiu).
{{ Cssxref(":visited") }}Selecciona els enllaços visitats.
- -

Pseudoelements

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SelectorDescripció
{{ Cssxref("::after") }}Selecciona un element que pot aparèixer després del contingut actiu de l'element originari.
{{ Cssxref("::before") }}Selecciona un element que pot aparèixer abans del contingut actiu de l'element originari.
{{ Cssxref("::first-letter") }}Selecciona la primera lletra de l'element.
{{ Cssxref("::first-line") }}Selecciona la primera línia de l'element.
{{ Cssxref("::grammar-error") }}Selecciona una part del document que conté un error de gramàtica que indica el navegador.
{{ Cssxref("::selection") }}Selecciona la part del document seleccionat.
{{ Cssxref("::spelling-error") }}Selecciona una part del document que conté un error d'ortografia que indica el navegador.
- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}

- -

En aquest mòdul

- -
    -
  1. La cascada i l'herència
    2. -
  2. Els selectors CSS - -
    3. -
  3. El model de caixes
    4. -
  4. Fons i vores
    5. -
  5. El tractament del text en diverses direccions
    6. -
  6. El desbordament dels continguts
    7. -
  7. Els valors i les unitats
    8. -
  8. Dimensionar elements en CSS
    9. -
  9. Imatges, mèdia i elements de formulari
    10. -
  10. Aplicar estil a les taules
    11. -
  11. Depura el teu CSS
    12. -
  12. Organitza el teu CSS
    13. -
diff --git a/files/ca/learn/css/building_blocks/selectors_css/selectors_atribut/index.html b/files/ca/learn/css/building_blocks/selectors_css/selectors_atribut/index.html deleted file mode 100644 index 6ab61828f8..0000000000 --- a/files/ca/learn/css/building_blocks/selectors_css/selectors_atribut/index.html +++ /dev/null @@ -1,154 +0,0 @@ ---- -title: Selectors d'atribut -slug: Learn/CSS/Building_blocks/Selectors_CSS/Selectors_atribut -translation_of: Learn/CSS/Building_blocks/Selectors/Attribute_selectors ---- -

{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}

- -

Com ja saps a partir de l’estudi de l'HTML, els elements poden tenir atributs, que donen més detalls sobre l'element que s’etiqueta. En CSS pots utilitzar selectors d’atributs per a seleccionar elements que tenen uns atributs determinats. Aquest article et mostra com utilitzar aquests selectors tan útils.

- - - - - - - - - - - - -
Prerequisits:Coneixements bàsics d'informàtica, tenir el programari bàsic instal·lat, coneixements bàsics de com treballar amb fitxers i d'HTML (consulta Introducció a l'HTML) i nocions bàsiques de com funciona el CSS.
Objectiu:Conèixer els selectors d’atributs i com utilitzar-los.
- -

Selectors de presència i de valor

- -

Aquests selectors permeten seleccionar un element només per la presència d’un atribut (per exemple href) o per diferents coincidències amb el valor de l’atribut.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SelectorExempleDescripció
[attr]a[title]Selecciona elements que tenen com a nom d'atribut attr el valor entre claudàtors.
[attr=value]a[href="https://example.com"]Selecciona elements que tenen el nom d'atribut attr, el valor del qual sigui exactament la cadena de caràcters que hi ha entre cometes: value.
[attr~=value]p[class~="special"] -

Selecciona elements amb un nom d’atribut attr el valor del qual és exactament value, o elements que tenen un atribut attr que conté un o més valors, dels quals almenys un coincideix amb value.

- -

Observa que en una llista de diversos valors, els valors se separen amb espais en blanc.

-
[attr|=value]div[lang|="zh"]Selecciona elements que tenen un nom d’atribut attr que pot ser exactament value o que pot començar per value seguit immediatament d’un guionet.
- -

En l'exemple següent pots veure que com es fan servir aquests selectors.

- - - -

{{EmbedGHLiveSample("css-examples/learn/selectors/attribute.html", '100%', 800)}}

- -

Selectors de subcadena

- -

Aquests selectors permeten obtenir una concordança més ajustada a partir de les subcadenes que conté el valor del teu atribut. Per exemple, si hi ha les classes box-warning i box-error i vols seleccionar tot el que comença amb la cadena «box-», pots seleccionar-les totes dues amb [class^="box-"].

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SelectorExempleDescripció
[attr^=value]li[class^="box-"]Selecciona elements amb un nom d'atribut attr que conté la subcadena value al principi.
[attr$=value]li[class$="-box"]Selecciona elements amb un nom d’atribut attr que conté la subcadena value al final.
[attr*= ]li[class*="box"]Relaciona elements amb un nom d'atribut attr que conté almenys una ocurrència de la subcadena value en qualsevol lloc de la cadena.
- -

L’exemple següent mostra l'ús d'aquests selectors:

- - - -

{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-substring.html", '100%', 800)}}

- -

Distinció entre majúscules i minúscules

- -

Si vols seleccionar els valors d'atribut tant si estan escrits en majúscules com en minúscules, pots utilitzar el valor i abans del claudàtor de tancament. Aquest indicador informa el navegador que els caràcters ASCII han de coincidir independentment de si les lletres són majúscules o minúscules. Sense aquest indicador, la correspondència entre els valors es farà segons les directrius del llenguatge del document pel que fa a la distinció entre majúscules i minúscules; en el cas de l'HTML, distingeix entre majúscules i minúscules.

- -

En l'exemple següent, el primer selector coincideix amb un valor que comença per a; només coincideix el primer element de la llista perquè els altres dos elements de la llista comencen amb una A majúscula. El segon selector no distingeix entre majúscules i minúscules, així que la correspondència és entre tots els elements de la llista.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-case.html", '100%', 800)}}

- -
-

Nota: També hi ha un valor s més recent, que imposa la coincidència de majúscules i les minúscules en contextos en què normalment no es dona; tanmateix, aquest valor encara no té gaire compatibilitat amb els navegadors i no resulta gaire útil en el context de l’HTML.

-
- -

Propers passos

- -

Ara que hem acabat amb els selectors d’atribut, pots avançar cap a l’article següent sobre les pseudoclasses i els pseudoelements.

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}

- -

En aquest mòdul

- -
    -
  1. La cascada i l'herència
    2. -
  2. Els selectors CSS - -
    3. -
  3. El model de caixes
    4. -
  4. Fons i vores
    5. -
  5. El tractament del text en diverses direccions
    6. -
  6. El desbordament dels continguts
    7. -
  7. Els valors i les unitats
    8. -
  8. Dimensionar elements en CSS
    9. -
  9. Imatges, mèdia i elements de formulari
    10. -
  10. Aplicar estil a les taules
    11. -
  11. Depura el teu CSS
    12. -
  12. Organitza el teu CSS
    13. -
diff --git a/files/ca/learn/css/building_blocks/selectors_css/selectors_de_tipus_classe_i_id/index.html b/files/ca/learn/css/building_blocks/selectors_css/selectors_de_tipus_classe_i_id/index.html deleted file mode 100644 index 2cdbdc244a..0000000000 --- a/files/ca/learn/css/building_blocks/selectors_css/selectors_de_tipus_classe_i_id/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: 'Selectors de tipus, classe i ID' -slug: Learn/CSS/Building_blocks/Selectors_CSS/Selectors_de_tipus_classe_i_ID -translation_of: Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors ---- -

{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}

- -

En aquest article farem un cop d’ull als selectors més senzills que hi ha disponibles, i que probablement utilitzaràs més a l'hora de treballar.

- - - - - - - - - - - - -
Prerequisits:Coneixements bàsics d'informàtica, tenir el programari bàsic instal·lat, coneixements bàsics de com treballar amb fitxers i d'HTML (mira Introducció a l'HTML) i nocions bàsiques de com funciona el CSS.
Objectiu:Obtenir més informació sobre els diferents selectors CSS que podem utilitzar per a aplicar CSS a un document.
- -

Selectors de tipus

- -

A vegades, a un selector de tipus també se'l denomina selector de noms d'etiqueta o selector d'elements, perquè selecciona una etiqueta/element HTML al document. En l’exemple següent hem utilitzat selectors span, em i strong. Per tant, hem aplicat estil a totes les instàncies <span>, <em> i <strong>.

- -

Afegeix una regla CSS que seleccioni l’element <h1> i en canviï el color pel blau.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/type.html", '100%', 1100)}}

- -

El selector universal

- -

El selector universal s'indica amb un asterisc (*) i selecciona tot el que hi ha dins del document (o dins de l'element pare, si s'encadena amb un altre element i un combinador descendent, per exemple). En l'exemple següent hem utilitzat el selector universal per a eliminar els marges de tots els elements. Això vol dir que, en lloc de l'estil predeterminat que hi afegeix el navegador, que deixa un espai de marge entre els títols d’encapçalament i els paràgrafs, tot està junt i no podem distingir els diferents paràgrafs amb facilitat.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/universal.html", '100%', 750)}}

- -

Aquest tipus de comportament a vegades es pot veure en els «fulls d'estil de restabliment» (o «fulls d'estil reset»), que eliminen tot l'estil que aplica el navegador. Van ser molt populars en un moment determinat, tot i que eliminar tots els estils significava que aleshores havies de tornar-ho a fer tot! Per tant, acostumem a utilitzar el selector universal amb atenció per a afrontar situacions molt específiques, com la que es descriu a continuació.

- -

Ús del selector universal per a facilitar la lectura

- -

Un dels usos del selector universal és fer els selectors més fàcils de llegir i més evidents, en termes de què fan. Per exemple, si vull seleccionar el primer fill de qualsevol element <article>, independentment de quin element sigui, i posar-lo en negreta, podem utilitzar el selector {{cssxref(":first-child")}}, que veurem amb més detall en l’article sobre pseudoclasses i pseudoelements, com un selector descendent juntament amb el selector d'elements <article>:

- -
article :first-child {
-
-}
- -

Això es pot confondre, però, amb article:first-child, que selecciona qualsevol element <article> que sigui el primer fill d'un altre element.

- -

Per evitar aquesta confusió, podem afegir al selector :first-child el selector universal, de manera que ara resulta obvi el que fa el selector. Selecciona qualsevol element que sigui el primer fill d'un element <article>:

- -
article *:first-child {
-
-}
- -

Selectors de classe

- -

El selector de classe s’inicia amb un caràcter de punt (.) i selecciona qualsevol element del document que tingui aplicada la classe seleccionada. En l'exemple en directe següent hem creat una classe anomenada .highlight i l'hem aplicada a diversos llocs del document. Es ressalten tots els elements que tenen aplicada aquesta classe.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/class.html", '100%', 750)}}

- -

Seleccionar classes en elements concrets

- -

Pots crear un selector que seleccioni els elements específics que tenen aplicada aquella classe. En l'exemple següent, destaquem un element <span> que té una classe highlight diferent del destacat que apliquem a l'encapçalament <h1> amb classe highlight. Ho fem adjuntant la classe al selector de tipus per a l’element que volem seleccionar, sense cap espai entremig.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/class-type.html", '100%', 750)}}

- -

Aquesta manera de seleccionar dificulta la reutilització de CSS, perquè la classe només s'aplica a aquest element en concret, i hauràs d'afegir un altre selector si decideixes que les regles s'han d'aplicar també a altres elements.

- -

Seleccionar un element si té aplicada més d'una classe

- -

Pots aplicar diverses classes a un element i seleccionar-les individualment, o bé seleccionar l'element només quan inclou totes les classes del selector. Això pot ser útil per a crear components que es poden combinar de maneres diferents al teu lloc web.

- -

En l'exemple següent hi ha un element <div> que inclou una nota. La vora gris s'aplica quan la casella té una classe notebox. Si també té una classe warning o danger, el {{cssxref("border-color")}} canvia.

- -

Podem dir-li al navegador que només volem fer coincidir l’element si té totes aquestes classes tot encadenant-les juntes sense espais entremig.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/class-many.html", '100%', 900)}}

- -

Selectors d’ID

- -

Un selector d’ID comença amb un caràcter # en lloc d'un caràcter de punt, però s'utilitza bàsicament de la mateixa manera que un selector de classe. Ara bé, un ID només es pot utilitzar una vegada en cada document, i cada element pot tenir un id com a màxim. El selector pot seleccionar l’element que té l’id establert i també pots precedir l'identificador amb un selector de tipus que seleccioni l’element només si coincideix amb l'ID. Pots veure aquests dos usos en l'exemple següent:

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/id.html", '100%', 750)}}

- -
-

Nota: Tal com hem après en l’article que parla d'especificitat, un ID té més especificitat i anul·la la majoria dels altres selectors. Això pot dificultar les coses a l'hora de treballar. En la majoria dels casos és preferible afegir una classe a l'element, en lloc d'utilitzar un ID, però a vegades fer servir un ID és l'única manera de seleccionar l'element (potser perquè no es té accés al codi d’etiquetatge i, per tant, no es pot editar).

-
- -

En el proper article

- -

Continuarem explorant els selectors i veurem els selectors d’atribut.

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}

- -

En aquest mòdul

- -
    -
  1. La cascada i l'herència
    2. -
  2. Els selectors CSS - -
    3. -
  3. El model de caixes
    4. -
  4. Fons i vores
    5. -
  5. El tractament del text en diverses direccions
    6. -
  6. El desbordament dels continguts
    7. -
  7. Els valors i les unitats
    8. -
  8. Dimensionar elements en CSS
    9. -
  9. Imatges, media i elements de formulari
    10. -
  10. Aplicar estil a les taules
    11. -
  11. Depurar el CSS
    12. -
  12. Organitza el teu CSS
    13. -
diff --git a/files/ca/learn/css/building_blocks/sizing_items_in_css/index.html b/files/ca/learn/css/building_blocks/sizing_items_in_css/index.html new file mode 100644 index 0000000000..5ff34b8d93 --- /dev/null +++ b/files/ca/learn/css/building_blocks/sizing_items_in_css/index.html @@ -0,0 +1,129 @@ +--- +title: Dimensionar elements en CSS +slug: Learn/CSS/Building_blocks/Dimensionar_elements_en_CSS +translation_of: Learn/CSS/Building_blocks/Sizing_items_in_CSS +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}
+ +

En els articles que hem vist fins ara has descobert diverses maneres de dimensionar els elements d'una pàgina web amb CSS. És important entendre la importància de les diferents característiques dels elements del teu disseny, i en aquest article resumim les maneres com assignar una mida als elements amb CSS i definim uns quants termes relatius al dimensionament que t'ajudaran en el futur.

+ + + + + + + + + + + + +
Prerequisits:Coneixements bàsics d'informàtica, tenir el programari bàsic instal·lat, coneixements bàsics de treballar amb fitxers i d'HTML (mira Introducció a l'HTML) i nocions de com funciona el CSS.
Objectiu:Entendre les diferents maneres com podem assignar mides als elements amb CSS.
+ +

La mida natural o intrínseca de les coses

+ +

Els elements HTML tenen una mida natural predeterminada abans que els afecti cap codi CSS. Un exemple senzill n’és una imatge. Una imatge té una amplada i una alçada definides en el fitxer d'imatge, que s'incorpora a la pàgina. Aquesta mida es descriu com la mida intrínseca, que prové de la imatge mateixa.

+ +

Quan poses una imatge en una pàgina i no en canvies l’alçada i l’amplada, ja sigui amb atributs en l’etiqueta <img> o amb el CSS, es mostra amb aquesta mida intrínseca. Hem donat a la imatge de l’exemple següent una vora perquè puguis veure la dimensió que té el fitxer.

+ +

{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-image.html", '100%', 600)}}

+ +

Un element {{htmlelement("div")}} buit, però, no té mida pròpia. Si afegeixes un element {{htmlelement("div")}} sense contingut al teu HTML, i hi poses una vora, com hem fet abans amb la imatge, veuràs que a la pàgina apareix una línia. Es tracta de la vora de l'element replegat sobre si mateix perquè no té contingut que el mantingui obert. En el nostre exemple següent, aquesta vora s'estén per tota l'amplada de l’element que el conté, perquè és un element que té un comportament de bloc, amb el qual ja t'hauries de començar a familiaritzar. No té alçada (ni mida en la dimensió del bloc) perquè no hi ha contingut.

+ +

{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-text.html", '100%', 500)}}

+ +

Afegeix una mica de text a l'interior de l'element buit de l'exemple anterior. Ara la vora envolta aquest text perquè el contingut defineix l'altura de l'element. La mida d'aquest element <div> en la dimensió del bloc prové, per tant, de la mida del contingut. Una vegada més, aquesta és la mida intrínseca de l'element: el contingut en defineix la mida.

+ +

Configurar una mida específica

+ +

Per descomptat, podem donar una mida específica als elements del nostre disseny. Quan es dona una mida a un element (el contingut del qual hauria d’encaixar en aquesta mida) ens hi referim com la mida extrínseca. Agafa els elements <div> de l'exemple anterior: podem donar-los valors específics d'amplada i d'alçada, i aleshores tindran aquesta mida, independentment del contingut que hi fiquem a dins. Tal com vam descobrir en l’anterior article sobre el desbordament, una altura fixa pot provocar el desbordament del contingut si el contingut no cap en l’espai de la caixa.

+ +

{{EmbedGHLiveSample("css-examples/learn/sizing/height.html", '100%', 600)}}

+ +

Arranjar l'alçada dels elements amb longituds o percentatges s’ha de fer amb molta cura justament pel problema del desbordament.

+ +

L'ús de percentatges

+ +

En molts sentits, els percentatges actuen com unitats de longitud, i com hem comentat en l'article sobre valors i unitats, sovint es poden intercanviar amb les longituds. Quan fas servir un percentatge has de ser conscient de què és percentatge. En el cas d’una caixa dins d’un altre contenidor, si dones a la caixa secundària un percentatge d’amplada, serà un percentatge de l’amplada del contenidor principal.

+ +

{{EmbedGHLiveSample("css-examples/learn/sizing/percent-width.html", '100%', 600)}}

+ +

Això és perquè els percentatges es calculen a partir de la mida del bloc contenidor. Sense un percentatge aplicat, el nostre element <div> ocuparia el 100% de l'espai disponible, perquè és un element de bloc. Si hi donem un percentatge d’amplada, es converteix en un percentatge de l’espai que ompliria normalment.

+ +

Marges i àrea de farciment com a percentatges

+ +

Si estableixes margins i padding com percentatges, pot ser que observis algun comportament estrany. En l’exemple següent hi ha una caixa. Hem assignat a la caixa interior un marge ({{cssxref("margin")}}) del 10% i un àrea de farciment ({{cssxref("padding")}}) també del 10%. L'àrea de farciment i el marge de les parts superior i inferior de la caixa tenen la mateixa mida que els marges de l’esquerra i la dreta.

+ +

{{EmbedGHLiveSample("css-examples/learn/sizing/percent-mp.html", '100%', 700)}}

+ +

Podries esperar, per exemple, que el percentatge dels marges superior i inferior sigui un percentatge de l'alçada de l'element, i que el percentatge dels marges esquerre i dret sigui un percentatge de l'amplada de l'element. Però aquest no és el cas!

+ +

Quan utilitzes marges i àrees de farciment definits en percentatges, el valor es calcula a partir de la mida de l’element de línia, per tant, de l'amplada de l'element quan es treballa en un llenguatge horitzontal. En el nostre exemple, tots els marges i l'àrea de farciment són del 10% de l'amplada de l'element. Això significa que pots tenir marges i àrea de farciment de la mateixa mida al voltant de la caixa. És un fet que val la pena de recordar si utilitzes els percentatges d'aquesta manera.

+ +

Mida mínima i màxima

+ +

A més d’assignar mides fixes a les coses, podem demanar al CSS que doni a un element una mida mínima o màxima. Si tens una caixa que pot contenir una quantitat variable de contingut i vols que sempre tingui una alçada determinada com a mínim, pots establir la propietat {{cssxref("min-height")}}. La caixa sempre serà almenys d'aquesta alçada, però creixerà si hi ha més contingut del que pot contenir amb aquesta alçada mínima.

+ +

En l'exemple següent hi ha dues caixes, totes dues amb una alçada establerta en 150 píxels. La caixa de l’esquerra té 150 píxels d’alçada; la caixa de la dreta ha augmentat la mida a més de 150 píxels perquè té més contingut i no hi cabria.

+ +

{{EmbedGHLiveSample("css-examples/learn/sizing/min-height.html", '100%', 800)}}

+ +

Això és molt útil per tractar amb quantitats de contingut variables i evitar desbordaments.

+ +

Un ús comú de {{cssxref("max-width")}} és reduir les imatges si no hi ha prou espai perquè es mostrin amb l’amplada intrínseca, alhora que es garanteix que no superen l'alçada de la caixa.

+ +

Per exemple, si una imatge té una amplada intrínseca més petita que la de l’element que la conté i hi estableixes una amplada de width: 100%, la imatge s’estirarà i es farà gran, i podria pixelar-se. En canvi, si l’amplada intrínseca fos més gran que l’element que la conté, desbordaria. És probable que no vulguis que passi cap d'aquestes dues coses.

+ +

Si en lloc d'això utilitzes max-width: 100%, la imatge es pot fer més petita que la seva mida intrínseca, però no es farà més gran que el 100% de la seva mida.

+ +

En l'exemple següent hem utilitzat dues vegades la mateixa imatge. A la primera hi hem donat width: 100%, i com que està continguda en un recipient més gran, s'estén per tota l'amplada del contenidor. La segona imatge, en canvi, té max-width: 100%, i no s’estira per ocupar tot el recipient. La tercera caixa torna a contenir la mateixa imatge, amb max-width: 100%; en aquest cas pots observar com s’ha reduït per encaixar dins la caixa.

+ +

{{EmbedGHLiveSample("css-examples/learn/sizing/max-width.html", '100%', 800)}}

+ +

Aquesta tècnica s’utilitza per fer que les imatges siguin adaptatives, de manera que quan es visualitzen en un dispositiu més petit es redueixen adequadament. Però no has d'utilitzar aquesta tècnica per carregar imatges molt grans i després reduir-les en el navegador. Les imatges han de tenir una mida adequada i no han de ser més grans del que es necessita en relació amb la mida més gran en què es poden mostrar en el disseny. La descàrrega d’imatges massa grans fa que el teu lloc web vagi més lent i pot ser més car per als usuaris que tenen una connexió amb comptador de dades.

+ +
+

Nota: Troba més informació sobre les tècniques d’imatges adaptatives.

+
+ +

Unitats de finestra gràfica

+ +

La finestra gràfica (que és l’àrea visible de la teva pàgina en el navegador que utilitzes per visitar un lloc web) també té una mida. En CSS hi ha unes unitats que es relacionen amb la mida de la finestra gràfica: la unitat vw per a l'amplada i la unitat vh per a l'alçada. Amb aquestes unitats pots establir mides relatives a la finestra gràfica de l'usuari.

+ +

1vh és igual a l'1% de l’alçada de la finestra gràfica, i 1vw és igual a l’1% de l’amplada de la finestra gràfica. Pots fer servir aquestes unitats per a dimensionar les caixes, però també el text. A l'exemple següent tenim una caixa que té una mida de 20vh i 20vw. La caixa conté una lletra A, que ha rebut un valor {{cssxref("font-size")}} de 10vh.

+ +

{{EmbedGHLiveSample("css-examples/learn/sizing/vw-vh.html", '100%', 600)}}

+ +

Si canvies els valors de vh i vw, canvia la mida de la caixa o de la lletra; si canvies la mida de la finestra gràfica, també canvien les mides de la caixa i de la lletra perquè es mostren en relació amb la finestra gràfica. Per veure com canvia l'exemple quan canvies la mida de la finestra gràfica, has de carregar l'exemple en una finestra nova del navegador que puguis redimensionar (perquè la teva finestra gràfica és l’<iframe> incorporat que conté l'exemple anterior). Obre l'exemple, redimensiona la finestra del navegador i observa què passa amb la mida de la caixa i del text.

+ +

Dimensionar les coses segons la finestra gràfica pot ser útil en els teus dissenys. Per exemple, si vols que una secció principal es mostri a pantalla completa abans que la resta del contingut, fes que aquella part de la pàgina tingui un 100vh d’alçada i empenyerà la resta del contingut fora de la finestra gràfica, i això significa que només apareixerà quan l'usuari es desplaci pel document.

+ +

Resum

+ +

Aquest article t'ha proporcionat un resum dels problemes principals que podries trobar-te a l’hora de dimensionar les coses en un lloc web. En passar a l’article de Disseny de pàgines web amb CSS, la mida serà un aspecte molt important per a dominar els diferents mètodes de disseny, per la qual cosa val la pena entendre els conceptes que s'han explicat aquí abans de continuar.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}

+ +

En aquest mòdul

+ +
    +
  1. La cascada i l'herència
    2. +
  2. Els selectors CSS + +
    3. +
  3. El model de caixes
    4. +
  4. Fons i vores
    5. +
  5. El tractament del text en diferents direccions
    6. +
  6. El desbordament del contingut
    7. +
  7. Els valors i les unitats
    8. +
  8. Dimensionar elements en CSS
    9. +
  9. Imatges, mèdia i elements de formulari
    10. +
  10. Aplicar estil a les taules
    11. +
  11. Depura el teu CSS
    12. +
  12. Organitza el teu CSS
    13. +
diff --git a/files/ca/learn/css/building_blocks/valors_i_unitats_css/index.html b/files/ca/learn/css/building_blocks/valors_i_unitats_css/index.html deleted file mode 100644 index b754bd27ac..0000000000 --- a/files/ca/learn/css/building_blocks/valors_i_unitats_css/index.html +++ /dev/null @@ -1,394 +0,0 @@ ---- -title: Valors i unitats CSS -slug: Learn/CSS/Building_blocks/Valors_i_unitats_CSS -translation_of: Learn/CSS/Building_blocks/Values_and_units ---- -
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}
- -

Totes les propietats CSS tenen assignats un valor o un conjunt de valors permesos; donar una ullada a qualsevol pàgina de propietats de MDN t'ajudarà a comprendre els valors que admet una propietat concreta. En aquest article veurem uns quants dels valors i unitats que són d’ús més habitual.

- - - - - - - - - - - - -
Prerequisits:Coneixements bàsics d'informàtica, tenir el programari bàsic instal·lat, coneixements bàsics de treballar amb fitxers i d'HTML (consulta la Introducció a l'HTML) i nocions de com funciona el CSS.
Objectiu:Adquirir informació sobre els diferents tipus de valors i unitats que s’utilitzen en les propietats CSS.
- -

Què és un valor CSS

- -

En les especificacions CSS i en les pàgines de propietat d'aquest projecte MDN pots identificar amb facilitat els valors perquè estan escrits entre parèntesis angulars (brackets), per exemple <color> o <length>. Si veus que per a una propietat és vàlid el valor <color>, vol dir que per a aquesta propietat pots utilitzar com a valor qualsevol dels colors vàlids que apareixen a la pàgina de referència de la propietat <color>.

- -
-

Nota: Observa que també es fa referència als valors CSS com tipus de dades. Bàsicament són termes intercanviables: el terme tipus de dada és en realitat una altra manera de dir valor.

-
- -
-

Nota: Els valors CSS solen denotar-se entre parèntesis angulars per a diferenciar-los de les propietats CSS (per exemple, la propietat {{cssxref("color")}} i el tipus de dada <color>). Encara que tant els tipus de dades CSS com els elements d’HTML es denoten entre parèntesis angulars, és poc probable que et confonguis perquè s'utilitzen en contextos molt diferents.

-
- -

En l'exemple següent hem establert el color del nostre títol de capçalera amb una paraula clau, i el fons amb la funció rgb():

- -
h1 {
-  color: black;
-  background-color: rgb(197,93,161);
-} 
-
- -

Un valor en CSS és una manera de definir una col·lecció de subvalors permesos. Això vol dir que si <color> és un valor permès, no t'has de demanar quins dels diferents tipus de valor del color es poden utilitzar: les paraules clau, els valors hexadecimals, les funcions rgb(), etc. Pots utilitzar qualsevol valor <color> disponible, sempre que sigui compatible amb el navegador. La pàgina de MDN et dona informació sobre la compatibilitat de cada valor amb els navegadors. Per exemple, consulta la pàgina <color> i observa que en la secció de compatibilitat dels navegadors s’enumeren diferents tipus de valors de color i la compatibilitat que tenen amb els diferents navegadors.

- -

A continuació donem una ullada a uns quants dels tipus de valors i unitats amb què et pots trobar habitualment, amb exemples perquè facis proves amb diferents valors possibles.

- -

Nombres, longituds i percentatges

- -

En CSS pots trobar diversos tipus de dades numèriques. Totes les dades següents es classifiquen com a dades numèriques:

- - - - - - - - - - - - - - - - - - - - - - - - - - -
Tipus de dadaDescripció
<integer>Un <integer> és un nombre enter, com ara 1024 o -55.
<number>Un <number> representa un nombre decimal: pot tenir o no un punt de separació de xifres decimals, per exemple 0.255, 128 o -1.2.
<dimension>Una <dimension> és un valor <number> amb una unitat associada, per exemple 45deg (graus), 5s (segons) o 10px (píxels). <dimension> és una categoria «paraigua» que inclou els tipus <length>, <angle>, <time> i <resolution>.
<percentage>Un <percentage> representa una proporció d'algun altre valor, per exemple el 50%. Els valors de percentatge sempre són relatius a una altra quantitat, per exemple, la longitud d'un element en percentatge és relativa a la longitud de l'element pare.
- -

Longituds

- -

El tipus numèric que es troba amb més freqüència és <length>, per exemple 10px (píxels) o 30em. En CSS s'utilitzen dos tipus de longituds: relatives i absolutes. És important conèixer-ne la diferència per a entendre quines mides pot atènyer un element.

- -

Unitats de longitud absolutes

- -

Totes les unitats que es mostren a continuació són unitats de longitud absolutes: no són relatives a cap altre element i es considera que tenen sempre la mateixa mida.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
UnitatNomEquival a
cmCentímetres1cm = 96px/2,54
mmMil·límetres1 mm = 1/10 d'1cm
QQuarts de mil·límetre1T = 1/40 d'1cm
inPolzades1in = 2,54cm = 96px
pcPiques1pc = 1/16 d'1"
ptPunts1pt = 1/72a d'1"
pxPíxels1px = 1/96a d'1"
- -

La majoria d'aquests valors són més útils quan s'utilitzen en una sortida en format imprès, més que no en una sortida per pantalla. Per exemple, la pantalla no s’acostuma a mesurar en cm (centímetres). Normalment, les úniques unitats que es fan servir per a la pantalla són els píxels (px).

- -

Unitats de longitud relatives

- -

Les unitats de longitud relatives són unitats que es prenen en relació amb un altre element, potser la mida de la lletra o la mida de la finestra gràfica. L’avantatge d’utilitzar unitats relatives és que amb una planificació acurada pots definir a escala la mida del text o d’altres elements de la pàgina. A la taula següent pots trobar algunes de les unitats que són més útils per al desenvolupament web.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
UnitatRelativa a
em -

La mida de la lletra de l’element pare, en el cas de propietats tipogràfiques como ara {{cssxref("font-size")}}, i la mida de la font del propi element, en el cas d'altres propietats com {{cssxref("width")}}.

-
exL’altura x de la lletra de l'element.
chLa mesura d'avanç (amplada) del glif «0» del tipus de lletra de l'element.
remLa mida de la lletra de l’element arrel.
lhL’alçada de línia de l’element.
vwL’1% de l'amplada de la finestra gràfica.
vhL’1% de l'alçada de la finestra gràfica.
vminL’1% de la dimensió més petita de la finestra gràfica.
vmaxL’1% de la dimensió més gran de la finestra gràfica.
- -

Un exemple il·lustratiu

- -

En l'exemple següent pots observar com es comporten algunes unitats de longitud relativa i absoluta. La primera caixa té una amplada ({{cssxref("width")}}), establerta en píxels. Com que és una unitat absoluta, aquesta amplada roman sempre igual, independentment d’altres canvis.

- -

La segona caixa té una amplada fixa establerta en unitats vw (amplada de la finestra gràfica). Aquest valor és relatiu a l'amplada de la finestra gràfica; així, 10vw és un 10 per cent de l'amplada de la finestra gràfica. Si canvia l’amplada de la finestra del navegador, la mida de la caixa ha de canviar, però aquí no et funcionarà perquè aquest exemple està incrustat a la pàgina amb <iframe>. Si vols veure-ho en acció, has d’obrir l’exemple en una pestanya nova del teu navegador.

- -

La tercera caixa utilitza unitats em. Aquestes unitats són relatives a la mida de la lletra. Hem establert una mida de lletra d'1em en l’element {{htmlelement("div")}} que conté una classe .wrapper. Canvia aquest valor per 1,5em i observa que la mida de la lletra de tots els elements augmenta, però només augmenta l’amplada de l’últim element, perquè l’amplada és relativa a la mida de la lletra.

- -

Després de seguir les instruccions anteriors, juga una mica més amb els valors i observa què hi obtens.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/length.html", '100%', 820)}}

- -

Unitats em i rem

- -

Les unitats em i rem són les dues longituds relatives que és probable que et trobis amb més freqüència per a dimensionar elements, des de caixes fins a text. Val la pena entendre com funcionen i en què es diferencien, sobretot quan comences a introduir-te en temes més complexos, com ara aplicar estil al text o el disseny de pàgines web amb CSS. T’ho mostrem a continuació amb un exemple.

- -

L’HTML d’aquest exemple consisteix en dos blocs de llistes imbricades: hi ha tres llistes en total i tots dos blocs tenen el mateix HTML. L’única diferència és que en el primer bloc hi ha una classe em, i en el segon una classe rem.

- -

Per començar, establim la mida de la lletra de l’element <html> a 16px.

- -

Breument, la unitat em fa referència a «la mida de lletra de l'element pare». Els elements {{htmlelement("li")}} que hi ha dins dels elements {{htmlelement("ul")}} amb una classe em hereten la mida de l’element pare, de manera que en cada nivell d’imbricació successiu la mida de la lletra augmenta progressivament perquè en cadascun hi ha una mida de lletra establerta en 1.3em (1,3 vegades la mida de la lletra de l’element pare).

- -

Breument, la unitat rem fa referència a «la mida de lletra de l'element arrel» (els rem estàndard es corresponen amb l’em de l’arrel). Els elements {{htmlelement("li")}} dins dels elements {{htmlelement("ul")}} amb una classe rem prenen la mida de l'element arrel (<html>). Això significa que no augmenten en cada nivell d’imbricació successiu.

- -

Tanmateix, observa que si canvies la mida de la lletra (font-size) de l’element <html> amb el CSS, canvia tot el que hi està relacionat, tant els rem com els em.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/em-rem.html", '100%', 1000)}} 

- -

Percentatges

- -

En molts casos, un percentatge és tractat de la mateixa manera que una longitud. La qüestió amb els percentatges és que sempre es defineixen en relació amb algun altre valor. Per exemple, si defineixes la mida de la lletra (font-size) d'un element com un percentatge, aquesta serà un percentatge del valor de font-size de l’element pare. Si fas servir un percentatge per a un valor de l’amplada (width), serà un percentatge del valor de width de l’element pare.

- -

En l'exemple següent, les dues caixes amb la mida especificada en unitats de percentatge i les dues caixes amb la mida especificada en unitats de píxel tenen els mateixos noms de classe. Tots dos conjunts de caixes tenen 200px i un 40% d’amplada, respectivament.

- -

La diferència és que el segon conjunt de dues caixes es troba dins d’un contenidor de 400 píxels d’amplada. La segona caixa de 200px d'amplada té la mateixa amplada que la primera, però la segona caixa del 40% ara és el 40% de 400px, molt més estreta que la primera.

- -

Canvia l'amplada del contenidor o el valor en percentatge i observa què passa.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/percentage.html", '100%', 850)}} 

- -

L’exemple següent mostra les mides de lletra en percentatges. Cada element de llista <li> té una mida de lletra font-size del 80%; per tant, la lletra dels elements de llista imbricats és cada cop més petita a mesura que la mida de lletra s’hereta de l’element pare.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/percentage-fonts.html", '100%', 650)}} 

- -

Observa que molts valors accepten unitats de longitud i de percentatge, però n’hi ha que només accepten unitats de longitud. Consulta quins valors s’accepten en les pàgines de referència de cada propietat de MDN. Si el valor permès inclou <length-percentage>, pots utilitzar una longitud o un percentatge. Si el valor permès només inclou <length> no s’admet l’ús de percentatges.

- -

Nombres

- -

Hi ha valors que accepten nombres sense unitat. Un exemple de propietat que accepta un nombre sense unitat és la propietat opacity, que controla l’opacitat d’un element (el nivell de transparència). Aquesta propietat accepta un nombre entre el 0 (totalment transparent) i l’1 (totalment opac).

- -

En l’exemple següent, canvia el valor opacity per diversos valors decimals entre el 0 i l’1 i observa com la caixa i el contingut es tornen més o menys opacs.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/opacity.html", '100%', 500)}} 

- -
-

Nota: Si en CSS fas servir un nombre com a valor, no l’has de posar entre cometes.

-
- -

Color

- -

Hi ha moltes maneres d’especificar el color en CSS, i algunes s’han implementat més recentment que d’altres. El CSS pot utilitzar els mateixos valors de color per a qualsevol element, ja sigui per a especificar el color del text com el color del fons, o qualsevol altra cosa.

- -

El sistema de colors estàndard disponible en els equips moderns és de 24 bits, que permet la visualització d’uns 16,7 milions de colors diferents mitjançant una combinació de diferents canals vermell, verd i blau amb 256 valors diferents per a cada canal (256 x 256 x 256 = 16.777.216). Observa algunes de les maneres com podem especificar colors amb el CSS.

- -
-

Nota: En aquest tutorial analitzarem els mètodes habituals per a especificar el color que tenen una bona compatibilitat amb els navegadors. N’hi ha d’altres, que no tenen una bona compatibilitat amb els navegadors i són menys habituals.

-
- -

Paraules clau per als colors

- -

Molt sovint en els exemples de la nostra secció d’aprenentatge o en alguna altra pàgina de MDN veuràs que utilitzem paraules clau de colors, perquè són una manera senzilla i comprensible d’especificar un color. Hi ha moltes paraules clau, i algunes tenen noms força curiosos. En pots veure una llista completa a la pàgina dedicada al valor <color>.

- -

Juga amb diferents valors de color en els exemples en viu que et presentem a continuació per a entendre més bé com funcionen.

- -

Els valors RGB hexadecimals

- -

El tipus de valor de color següent que probablement trobaràs més sovint són els codis hexadecimals. Cada valor hexadecimal consisteix en un símbol hashtag/coixinet (#) seguit de sis nombres hexadecimals, cadascun dels quals pot prendre un dels 16 valors que van del 0 a la f (que representa el 15), és a dir: 0123456789abcdef. Cada parell de valors representa un dels canals (vermell, verd i blau) i permet especificar qualsevol dels 256 valors disponibles per a cada un (16 x 16 = 256).

- -

Aquests valors són una mica més complexos i menys fàcils d’entendre, però són molt més versàtils que les paraules clau: amb els valors hexadecimals pots representar qualsevol color que vulguis per a la teva paleta de colors.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/color-hex.html", '100%', 700)}} 

- -

Canvia un cop més els valors i observa com varien els colors.

- -

Valors RGB i RGBA

- -

El tercer sistema de què parlarem aquí és RGB. Un valor RGB és una funció rgb() que proporciona tres paràmetres que representen els valors dels canals vermell, verd i blau dels colors, igual que els valors hexadecimals. La diferència amb RGB és que els canals no estan representats per dos dígits hexadecimals, sinó per un nombre decimal entre 0 i 255, que sembla una mica més fàcil d’entendre.

- -

Reescrivim el nostre darrer exemple adaptat amb l’ús de colors RGB:

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgb.html", '100%', 700)}} 

- -

També pots utilitzar colors RGBA: funcionen exactament igual que els colors RGB, de manera que pots utilitzar qualsevol valor RGB, però s’hi afegeix un quart valor que representa el canal alfa del color, que en controla l'opacitat. Si estableixes aquest valor a 0, el color és totalment transparent, mentre que 1 el fas totalment opac. Els valors que hi ha entremig proporcionen diferents nivells de transparència.

- -
-

Nota: Entre establir un canal alfa per a un color o utilitzar la propietat {cssxref("opacity")}} que hem vist abans hi ha una diferència fonamental. Quan empres l'opacitat, l’element i tot el que té a l’interior són opacs, mentre que amb l’ús de colors RGBA, només es torna opac el color que especifiques.

-
- -

En l'exemple següent hem afegit una imatge de fons al bloc que conté les nostres caixes de colors. A continuació, hem configurat les caixes perquè tinguin valors d'opacitat diferents: observa que el fons es veu més quan el valor del canal alfa és més petit.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgba.html", '100%', 770)}}

- -

Canvia els valors del canal alfa en aquest exemple i observa com això afecta la sortida del color.

- -
-

Nota: En algun moment els navegadors moderns es van actualitzar perquè rgba() i rgb(), i també hsl() i hsla() (els veurem més avall) fossin àlies purs els uns dels altres i es comportessin exactament igual. Així, per exemple, tant rgba() com rgb() accepten colors amb valors de canal alfa i sense. Prova de canviar en l'exemple anterior les funcions rgba() per rgb() i comprova si els colors encara funcionen. Tot i que és decisió teva la manera com aplicar estil, fer servir funcions diferents que separin les definicions dels colors transparents de les dels que no ho són proporciona una compatibilitat (una mica) més bona amb els navegadors i pot servir d’indicador visual de quins colors del teu codi estan definits amb transparència.

-
- -

Els valors HSL i HSLA

- -

Una mica menys de compatibilitat que RGB presenta el model de color HSL (no és compatible amb versions antigues d’Internet Explorer), que es va implementar després de molta insistència per part dels dissenyadors. En lloc dels valors vermell, verd i blau, la funció hsl() accepta valors de tonalitat, saturació i lluminositat, que distingeixen els 16,7 milions de colors, però d'una manera diferent:

- - - -

Podem adaptar l'exemple RGB amb colors HSL, d’aquesta manera:

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsl.html", '100%', 700)}} 

- -

De la mateixa manera que RGB té RGBA, HSL té un equivalent HSLA, que et proporciona la mateixa funció d’especificació del canal alfa. Ho mostrem a continuació canviant el nostre exemple RGBA adaptat amb colors HSLA.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsla.html", '100%', 770)}} 

- -

Pots utilitzar qualsevol d'aquests valors de color en els teus projectes. En la majoria de casos és probable que et triïs una paleta de colors (i el mètode que escullis per a especificar el color), que faràs servir al llarg de tot el projecte. Pots fer combinacions de colors i barreges, però per coherència acostuma a ser millor si tot el teu projecte empra el mateix model de colors.

- -

Imatges

- -

El tipus de dades <image> utilitza valors permesos que són imatges. Poden ser tant fitxers d'imatge enllaçats des d'una funció url(), com degradats.

- -

En l'exemple següent presentem una imatge i un degradat emprats com a valors de la propietat CSS background-image.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/image.html", '100%', 740)}} 

- -
-

Nota: hi ha altres valors possibles per a <image>, però són més recents i encara tenen poca compatibilitat amb els navegadors. Si vols saber-ne més, dona una ullada a la pàgina que MDN dedica al tipus de dada <image>.

-
- -

Posició

- -

El tipus de dades <position> representa un conjunt de coordenades 2D que s’utilitzen per a posicionar un element, com ara una imatge de fons (amb background-position). Pot prendre paraules clau com top, left, bottom, right i center per a alinear els elements amb límits específics d’una caixa 2D, i també longituds, que representen desplaçaments respecte de les vores superior i esquerra de la caixa.

- -

Un valor de posició típic consta de dos valors: el primer estableix la posició horitzontal, i el segon la vertical. Si només especifiques el valor per a un eix, l’altre utilitza center per defecte.

- -

En l’exemple següent hem posicionat una imatge de fons a 40px de la part superior dreta del contenidor amb una paraula clau.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/position.html", '100%', 720)}} 

- -

Juga amb aquests valors i observa com pots anar desplaçant la imatge.

- -

Cadenes i identificadors

- -

Al llarg dels exemples anteriors hem vist que es fan servir paraules clau com a valors (per exemple, les paraules clau de <color> com ara red, black, rebeccapurple i goldenrod). Aquestes paraules clau s’anomenen més precisament identificadors, i són valors especials que el CSS entén. Per tant, no s'escriuen entre cometes (és a dir, no es tracten com cadenes alfanumèriques).

- -

En alguns casos en CSS s’utilitzen cadenes alfanumèriques, per exemple en especificar contingut generat. En aquests casos, aquest valor es posa entre cometes per a denotar que es tracta d’una cadena alfanumèrica. En l'exemple següent utilitzem paraules clau de color, que s’escriuen sense cometes, i una cadena de contingut generat, escrita entre cometes.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/strings-idents.html", '100%', 550)}} 

- -

Funcions

- -

L'últim tipus de valor que analitzarem és el grup de valors coneguts com a funcions. En programació, una funció és un bloc de codi reutilitzable que es pot executar diverses vegades per completar una tasca repetitiva amb un esforç mínim tant per part del desenvolupador com de l’ordinador. Les funcions normalment s’associen a idiomes com JavaScript, Python o C++, però també n’hi ha en CSS, com a valors de propietats. Ja hem vist funcions en acció en l’article sobre els colors: rgb(), hsl(), etc. El valor que retorna una imatge des d'un fitxer, url(), també és una funció.

- -

Un valor que es comporta més com les funcions que pots trobar en un llenguatge de programació tradicional és la funció calc() de CSS. Aquesta funció et permet fer càlculs senzills dins del CSS. És útil sobretot quan vols calcular valors que no pots definir quan escrius el CSS del teu projecte perquè necessites que el navegador te’ls proporcioni en temps d'execució.

- -

Per exemple, a continuació fem servir la funció calc() per a assignar a una caixa una amplada d’un 20% + 100px. El 20% es calcula a partir de l’amplada de l’element pare contenidor .wrapper, i canvia si en canvia l’amplada. Aquest càlcul no es pot fer prèviament perquè no sabem quin serà el 20% de l’element pare, de manera que demanem al navegador que ens ho calculi amb la funció calc().

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/calc.html", '100%', 450)}}

- -

Posa a prova el teu coneixement

- -

Hem vist molt de contingut en aquest article. En recordes la informació més important? Trobaràs més proves per comprovar si has retingut aquesta informació abans de seguir a Test your skills: Values and units.

- -

Resum

- -

Hem fet una passada ràpida pels tipus de valors i unitats més habituals amb què et pots trobar. Pots consultar tots els diferents tipus a la pàgina de referència Valors i unitats en CSS; molts d’ells els faràs servir a mesura que avances per aquests articles.

- -

L’important és que recordis que cada propietat té una llista determinada de valors permesos, i que cada valor té una definició que explica quins en són els subvalors. Aleshores, pots consultar-ne les dades específiques aquí, a les pàgines d’MDN.

- -

Per exemple, és útil saber que <image> també et permet crear un degradat de color, però potser no és obvi.

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}

- -

En aquest mòdul

- -
    -
  1. La cascada i l'herència
    2. -
  2. Els selectors CSS - -
    3. -
  3. El model de caixes
    4. -
  4. Fons i vores
    5. -
  5. El tractament del text en diverses direccions
    6. -
  6. El desbordament dels continguts
    7. -
  7. Valors i unitats
    8. -
  8. Dimensionar elements amb el CSS
    9. -
  9. Imatges, mèdia i elements de formulari
    10. -
  10. Aplicar estil a les taules
    11. -
  11. Depura el teu CSS
    12. -
  12. Organitza el teu CSS
    13. -
diff --git a/files/ca/learn/css/building_blocks/values_and_units/index.html b/files/ca/learn/css/building_blocks/values_and_units/index.html new file mode 100644 index 0000000000..b754bd27ac --- /dev/null +++ b/files/ca/learn/css/building_blocks/values_and_units/index.html @@ -0,0 +1,394 @@ +--- +title: Valors i unitats CSS +slug: Learn/CSS/Building_blocks/Valors_i_unitats_CSS +translation_of: Learn/CSS/Building_blocks/Values_and_units +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}
+ +

Totes les propietats CSS tenen assignats un valor o un conjunt de valors permesos; donar una ullada a qualsevol pàgina de propietats de MDN t'ajudarà a comprendre els valors que admet una propietat concreta. En aquest article veurem uns quants dels valors i unitats que són d’ús més habitual.

+ + + + + + + + + + + + +
Prerequisits:Coneixements bàsics d'informàtica, tenir el programari bàsic instal·lat, coneixements bàsics de treballar amb fitxers i d'HTML (consulta la Introducció a l'HTML) i nocions de com funciona el CSS.
Objectiu:Adquirir informació sobre els diferents tipus de valors i unitats que s’utilitzen en les propietats CSS.
+ +

Què és un valor CSS

+ +

En les especificacions CSS i en les pàgines de propietat d'aquest projecte MDN pots identificar amb facilitat els valors perquè estan escrits entre parèntesis angulars (brackets), per exemple <color> o <length>. Si veus que per a una propietat és vàlid el valor <color>, vol dir que per a aquesta propietat pots utilitzar com a valor qualsevol dels colors vàlids que apareixen a la pàgina de referència de la propietat <color>.

+ +
+

Nota: Observa que també es fa referència als valors CSS com tipus de dades. Bàsicament són termes intercanviables: el terme tipus de dada és en realitat una altra manera de dir valor.

+
+ +
+

Nota: Els valors CSS solen denotar-se entre parèntesis angulars per a diferenciar-los de les propietats CSS (per exemple, la propietat {{cssxref("color")}} i el tipus de dada <color>). Encara que tant els tipus de dades CSS com els elements d’HTML es denoten entre parèntesis angulars, és poc probable que et confonguis perquè s'utilitzen en contextos molt diferents.

+
+ +

En l'exemple següent hem establert el color del nostre títol de capçalera amb una paraula clau, i el fons amb la funció rgb():

+ +
h1 {
+  color: black;
+  background-color: rgb(197,93,161);
+} 
+
+ +

Un valor en CSS és una manera de definir una col·lecció de subvalors permesos. Això vol dir que si <color> és un valor permès, no t'has de demanar quins dels diferents tipus de valor del color es poden utilitzar: les paraules clau, els valors hexadecimals, les funcions rgb(), etc. Pots utilitzar qualsevol valor <color> disponible, sempre que sigui compatible amb el navegador. La pàgina de MDN et dona informació sobre la compatibilitat de cada valor amb els navegadors. Per exemple, consulta la pàgina <color> i observa que en la secció de compatibilitat dels navegadors s’enumeren diferents tipus de valors de color i la compatibilitat que tenen amb els diferents navegadors.

+ +

A continuació donem una ullada a uns quants dels tipus de valors i unitats amb què et pots trobar habitualment, amb exemples perquè facis proves amb diferents valors possibles.

+ +

Nombres, longituds i percentatges

+ +

En CSS pots trobar diversos tipus de dades numèriques. Totes les dades següents es classifiquen com a dades numèriques:

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Tipus de dadaDescripció
<integer>Un <integer> és un nombre enter, com ara 1024 o -55.
<number>Un <number> representa un nombre decimal: pot tenir o no un punt de separació de xifres decimals, per exemple 0.255, 128 o -1.2.
<dimension>Una <dimension> és un valor <number> amb una unitat associada, per exemple 45deg (graus), 5s (segons) o 10px (píxels). <dimension> és una categoria «paraigua» que inclou els tipus <length>, <angle>, <time> i <resolution>.
<percentage>Un <percentage> representa una proporció d'algun altre valor, per exemple el 50%. Els valors de percentatge sempre són relatius a una altra quantitat, per exemple, la longitud d'un element en percentatge és relativa a la longitud de l'element pare.
+ +

Longituds

+ +

El tipus numèric que es troba amb més freqüència és <length>, per exemple 10px (píxels) o 30em. En CSS s'utilitzen dos tipus de longituds: relatives i absolutes. És important conèixer-ne la diferència per a entendre quines mides pot atènyer un element.

+ +

Unitats de longitud absolutes

+ +

Totes les unitats que es mostren a continuació són unitats de longitud absolutes: no són relatives a cap altre element i es considera que tenen sempre la mateixa mida.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
UnitatNomEquival a
cmCentímetres1cm = 96px/2,54
mmMil·límetres1 mm = 1/10 d'1cm
QQuarts de mil·límetre1T = 1/40 d'1cm
inPolzades1in = 2,54cm = 96px
pcPiques1pc = 1/16 d'1"
ptPunts1pt = 1/72a d'1"
pxPíxels1px = 1/96a d'1"
+ +

La majoria d'aquests valors són més útils quan s'utilitzen en una sortida en format imprès, més que no en una sortida per pantalla. Per exemple, la pantalla no s’acostuma a mesurar en cm (centímetres). Normalment, les úniques unitats que es fan servir per a la pantalla són els píxels (px).

+ +

Unitats de longitud relatives

+ +

Les unitats de longitud relatives són unitats que es prenen en relació amb un altre element, potser la mida de la lletra o la mida de la finestra gràfica. L’avantatge d’utilitzar unitats relatives és que amb una planificació acurada pots definir a escala la mida del text o d’altres elements de la pàgina. A la taula següent pots trobar algunes de les unitats que són més útils per al desenvolupament web.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
UnitatRelativa a
em +

La mida de la lletra de l’element pare, en el cas de propietats tipogràfiques como ara {{cssxref("font-size")}}, i la mida de la font del propi element, en el cas d'altres propietats com {{cssxref("width")}}.

+
exL’altura x de la lletra de l'element.
chLa mesura d'avanç (amplada) del glif «0» del tipus de lletra de l'element.
remLa mida de la lletra de l’element arrel.
lhL’alçada de línia de l’element.
vwL’1% de l'amplada de la finestra gràfica.
vhL’1% de l'alçada de la finestra gràfica.
vminL’1% de la dimensió més petita de la finestra gràfica.
vmaxL’1% de la dimensió més gran de la finestra gràfica.
+ +

Un exemple il·lustratiu

+ +

En l'exemple següent pots observar com es comporten algunes unitats de longitud relativa i absoluta. La primera caixa té una amplada ({{cssxref("width")}}), establerta en píxels. Com que és una unitat absoluta, aquesta amplada roman sempre igual, independentment d’altres canvis.

+ +

La segona caixa té una amplada fixa establerta en unitats vw (amplada de la finestra gràfica). Aquest valor és relatiu a l'amplada de la finestra gràfica; així, 10vw és un 10 per cent de l'amplada de la finestra gràfica. Si canvia l’amplada de la finestra del navegador, la mida de la caixa ha de canviar, però aquí no et funcionarà perquè aquest exemple està incrustat a la pàgina amb <iframe>. Si vols veure-ho en acció, has d’obrir l’exemple en una pestanya nova del teu navegador.

+ +

La tercera caixa utilitza unitats em. Aquestes unitats són relatives a la mida de la lletra. Hem establert una mida de lletra d'1em en l’element {{htmlelement("div")}} que conté una classe .wrapper. Canvia aquest valor per 1,5em i observa que la mida de la lletra de tots els elements augmenta, però només augmenta l’amplada de l’últim element, perquè l’amplada és relativa a la mida de la lletra.

+ +

Després de seguir les instruccions anteriors, juga una mica més amb els valors i observa què hi obtens.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/length.html", '100%', 820)}}

+ +

Unitats em i rem

+ +

Les unitats em i rem són les dues longituds relatives que és probable que et trobis amb més freqüència per a dimensionar elements, des de caixes fins a text. Val la pena entendre com funcionen i en què es diferencien, sobretot quan comences a introduir-te en temes més complexos, com ara aplicar estil al text o el disseny de pàgines web amb CSS. T’ho mostrem a continuació amb un exemple.

+ +

L’HTML d’aquest exemple consisteix en dos blocs de llistes imbricades: hi ha tres llistes en total i tots dos blocs tenen el mateix HTML. L’única diferència és que en el primer bloc hi ha una classe em, i en el segon una classe rem.

+ +

Per començar, establim la mida de la lletra de l’element <html> a 16px.

+ +

Breument, la unitat em fa referència a «la mida de lletra de l'element pare». Els elements {{htmlelement("li")}} que hi ha dins dels elements {{htmlelement("ul")}} amb una classe em hereten la mida de l’element pare, de manera que en cada nivell d’imbricació successiu la mida de la lletra augmenta progressivament perquè en cadascun hi ha una mida de lletra establerta en 1.3em (1,3 vegades la mida de la lletra de l’element pare).

+ +

Breument, la unitat rem fa referència a «la mida de lletra de l'element arrel» (els rem estàndard es corresponen amb l’em de l’arrel). Els elements {{htmlelement("li")}} dins dels elements {{htmlelement("ul")}} amb una classe rem prenen la mida de l'element arrel (<html>). Això significa que no augmenten en cada nivell d’imbricació successiu.

+ +

Tanmateix, observa que si canvies la mida de la lletra (font-size) de l’element <html> amb el CSS, canvia tot el que hi està relacionat, tant els rem com els em.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/em-rem.html", '100%', 1000)}} 

+ +

Percentatges

+ +

En molts casos, un percentatge és tractat de la mateixa manera que una longitud. La qüestió amb els percentatges és que sempre es defineixen en relació amb algun altre valor. Per exemple, si defineixes la mida de la lletra (font-size) d'un element com un percentatge, aquesta serà un percentatge del valor de font-size de l’element pare. Si fas servir un percentatge per a un valor de l’amplada (width), serà un percentatge del valor de width de l’element pare.

+ +

En l'exemple següent, les dues caixes amb la mida especificada en unitats de percentatge i les dues caixes amb la mida especificada en unitats de píxel tenen els mateixos noms de classe. Tots dos conjunts de caixes tenen 200px i un 40% d’amplada, respectivament.

+ +

La diferència és que el segon conjunt de dues caixes es troba dins d’un contenidor de 400 píxels d’amplada. La segona caixa de 200px d'amplada té la mateixa amplada que la primera, però la segona caixa del 40% ara és el 40% de 400px, molt més estreta que la primera.

+ +

Canvia l'amplada del contenidor o el valor en percentatge i observa què passa.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/percentage.html", '100%', 850)}} 

+ +

L’exemple següent mostra les mides de lletra en percentatges. Cada element de llista <li> té una mida de lletra font-size del 80%; per tant, la lletra dels elements de llista imbricats és cada cop més petita a mesura que la mida de lletra s’hereta de l’element pare.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/percentage-fonts.html", '100%', 650)}} 

+ +

Observa que molts valors accepten unitats de longitud i de percentatge, però n’hi ha que només accepten unitats de longitud. Consulta quins valors s’accepten en les pàgines de referència de cada propietat de MDN. Si el valor permès inclou <length-percentage>, pots utilitzar una longitud o un percentatge. Si el valor permès només inclou <length> no s’admet l’ús de percentatges.

+ +

Nombres

+ +

Hi ha valors que accepten nombres sense unitat. Un exemple de propietat que accepta un nombre sense unitat és la propietat opacity, que controla l’opacitat d’un element (el nivell de transparència). Aquesta propietat accepta un nombre entre el 0 (totalment transparent) i l’1 (totalment opac).

+ +

En l’exemple següent, canvia el valor opacity per diversos valors decimals entre el 0 i l’1 i observa com la caixa i el contingut es tornen més o menys opacs.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/opacity.html", '100%', 500)}} 

+ +
+

Nota: Si en CSS fas servir un nombre com a valor, no l’has de posar entre cometes.

+
+ +

Color

+ +

Hi ha moltes maneres d’especificar el color en CSS, i algunes s’han implementat més recentment que d’altres. El CSS pot utilitzar els mateixos valors de color per a qualsevol element, ja sigui per a especificar el color del text com el color del fons, o qualsevol altra cosa.

+ +

El sistema de colors estàndard disponible en els equips moderns és de 24 bits, que permet la visualització d’uns 16,7 milions de colors diferents mitjançant una combinació de diferents canals vermell, verd i blau amb 256 valors diferents per a cada canal (256 x 256 x 256 = 16.777.216). Observa algunes de les maneres com podem especificar colors amb el CSS.

+ +
+

Nota: En aquest tutorial analitzarem els mètodes habituals per a especificar el color que tenen una bona compatibilitat amb els navegadors. N’hi ha d’altres, que no tenen una bona compatibilitat amb els navegadors i són menys habituals.

+
+ +

Paraules clau per als colors

+ +

Molt sovint en els exemples de la nostra secció d’aprenentatge o en alguna altra pàgina de MDN veuràs que utilitzem paraules clau de colors, perquè són una manera senzilla i comprensible d’especificar un color. Hi ha moltes paraules clau, i algunes tenen noms força curiosos. En pots veure una llista completa a la pàgina dedicada al valor <color>.

+ +

Juga amb diferents valors de color en els exemples en viu que et presentem a continuació per a entendre més bé com funcionen.

+ +

Els valors RGB hexadecimals

+ +

El tipus de valor de color següent que probablement trobaràs més sovint són els codis hexadecimals. Cada valor hexadecimal consisteix en un símbol hashtag/coixinet (#) seguit de sis nombres hexadecimals, cadascun dels quals pot prendre un dels 16 valors que van del 0 a la f (que representa el 15), és a dir: 0123456789abcdef. Cada parell de valors representa un dels canals (vermell, verd i blau) i permet especificar qualsevol dels 256 valors disponibles per a cada un (16 x 16 = 256).

+ +

Aquests valors són una mica més complexos i menys fàcils d’entendre, però són molt més versàtils que les paraules clau: amb els valors hexadecimals pots representar qualsevol color que vulguis per a la teva paleta de colors.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/color-hex.html", '100%', 700)}} 

+ +

Canvia un cop més els valors i observa com varien els colors.

+ +

Valors RGB i RGBA

+ +

El tercer sistema de què parlarem aquí és RGB. Un valor RGB és una funció rgb() que proporciona tres paràmetres que representen els valors dels canals vermell, verd i blau dels colors, igual que els valors hexadecimals. La diferència amb RGB és que els canals no estan representats per dos dígits hexadecimals, sinó per un nombre decimal entre 0 i 255, que sembla una mica més fàcil d’entendre.

+ +

Reescrivim el nostre darrer exemple adaptat amb l’ús de colors RGB:

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgb.html", '100%', 700)}} 

+ +

També pots utilitzar colors RGBA: funcionen exactament igual que els colors RGB, de manera que pots utilitzar qualsevol valor RGB, però s’hi afegeix un quart valor que representa el canal alfa del color, que en controla l'opacitat. Si estableixes aquest valor a 0, el color és totalment transparent, mentre que 1 el fas totalment opac. Els valors que hi ha entremig proporcionen diferents nivells de transparència.

+ +
+

Nota: Entre establir un canal alfa per a un color o utilitzar la propietat {cssxref("opacity")}} que hem vist abans hi ha una diferència fonamental. Quan empres l'opacitat, l’element i tot el que té a l’interior són opacs, mentre que amb l’ús de colors RGBA, només es torna opac el color que especifiques.

+
+ +

En l'exemple següent hem afegit una imatge de fons al bloc que conté les nostres caixes de colors. A continuació, hem configurat les caixes perquè tinguin valors d'opacitat diferents: observa que el fons es veu més quan el valor del canal alfa és més petit.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgba.html", '100%', 770)}}

+ +

Canvia els valors del canal alfa en aquest exemple i observa com això afecta la sortida del color.

+ +
+

Nota: En algun moment els navegadors moderns es van actualitzar perquè rgba() i rgb(), i també hsl() i hsla() (els veurem més avall) fossin àlies purs els uns dels altres i es comportessin exactament igual. Així, per exemple, tant rgba() com rgb() accepten colors amb valors de canal alfa i sense. Prova de canviar en l'exemple anterior les funcions rgba() per rgb() i comprova si els colors encara funcionen. Tot i que és decisió teva la manera com aplicar estil, fer servir funcions diferents que separin les definicions dels colors transparents de les dels que no ho són proporciona una compatibilitat (una mica) més bona amb els navegadors i pot servir d’indicador visual de quins colors del teu codi estan definits amb transparència.

+
+ +

Els valors HSL i HSLA

+ +

Una mica menys de compatibilitat que RGB presenta el model de color HSL (no és compatible amb versions antigues d’Internet Explorer), que es va implementar després de molta insistència per part dels dissenyadors. En lloc dels valors vermell, verd i blau, la funció hsl() accepta valors de tonalitat, saturació i lluminositat, que distingeixen els 16,7 milions de colors, però d'una manera diferent:

+ + + +

Podem adaptar l'exemple RGB amb colors HSL, d’aquesta manera:

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsl.html", '100%', 700)}} 

+ +

De la mateixa manera que RGB té RGBA, HSL té un equivalent HSLA, que et proporciona la mateixa funció d’especificació del canal alfa. Ho mostrem a continuació canviant el nostre exemple RGBA adaptat amb colors HSLA.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsla.html", '100%', 770)}} 

+ +

Pots utilitzar qualsevol d'aquests valors de color en els teus projectes. En la majoria de casos és probable que et triïs una paleta de colors (i el mètode que escullis per a especificar el color), que faràs servir al llarg de tot el projecte. Pots fer combinacions de colors i barreges, però per coherència acostuma a ser millor si tot el teu projecte empra el mateix model de colors.

+ +

Imatges

+ +

El tipus de dades <image> utilitza valors permesos que són imatges. Poden ser tant fitxers d'imatge enllaçats des d'una funció url(), com degradats.

+ +

En l'exemple següent presentem una imatge i un degradat emprats com a valors de la propietat CSS background-image.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/image.html", '100%', 740)}} 

+ +
+

Nota: hi ha altres valors possibles per a <image>, però són més recents i encara tenen poca compatibilitat amb els navegadors. Si vols saber-ne més, dona una ullada a la pàgina que MDN dedica al tipus de dada <image>.

+
+ +

Posició

+ +

El tipus de dades <position> representa un conjunt de coordenades 2D que s’utilitzen per a posicionar un element, com ara una imatge de fons (amb background-position). Pot prendre paraules clau com top, left, bottom, right i center per a alinear els elements amb límits específics d’una caixa 2D, i també longituds, que representen desplaçaments respecte de les vores superior i esquerra de la caixa.

+ +

Un valor de posició típic consta de dos valors: el primer estableix la posició horitzontal, i el segon la vertical. Si només especifiques el valor per a un eix, l’altre utilitza center per defecte.

+ +

En l’exemple següent hem posicionat una imatge de fons a 40px de la part superior dreta del contenidor amb una paraula clau.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/position.html", '100%', 720)}} 

+ +

Juga amb aquests valors i observa com pots anar desplaçant la imatge.

+ +

Cadenes i identificadors

+ +

Al llarg dels exemples anteriors hem vist que es fan servir paraules clau com a valors (per exemple, les paraules clau de <color> com ara red, black, rebeccapurple i goldenrod). Aquestes paraules clau s’anomenen més precisament identificadors, i són valors especials que el CSS entén. Per tant, no s'escriuen entre cometes (és a dir, no es tracten com cadenes alfanumèriques).

+ +

En alguns casos en CSS s’utilitzen cadenes alfanumèriques, per exemple en especificar contingut generat. En aquests casos, aquest valor es posa entre cometes per a denotar que es tracta d’una cadena alfanumèrica. En l'exemple següent utilitzem paraules clau de color, que s’escriuen sense cometes, i una cadena de contingut generat, escrita entre cometes.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/strings-idents.html", '100%', 550)}} 

+ +

Funcions

+ +

L'últim tipus de valor que analitzarem és el grup de valors coneguts com a funcions. En programació, una funció és un bloc de codi reutilitzable que es pot executar diverses vegades per completar una tasca repetitiva amb un esforç mínim tant per part del desenvolupador com de l’ordinador. Les funcions normalment s’associen a idiomes com JavaScript, Python o C++, però també n’hi ha en CSS, com a valors de propietats. Ja hem vist funcions en acció en l’article sobre els colors: rgb(), hsl(), etc. El valor que retorna una imatge des d'un fitxer, url(), també és una funció.

+ +

Un valor que es comporta més com les funcions que pots trobar en un llenguatge de programació tradicional és la funció calc() de CSS. Aquesta funció et permet fer càlculs senzills dins del CSS. És útil sobretot quan vols calcular valors que no pots definir quan escrius el CSS del teu projecte perquè necessites que el navegador te’ls proporcioni en temps d'execució.

+ +

Per exemple, a continuació fem servir la funció calc() per a assignar a una caixa una amplada d’un 20% + 100px. El 20% es calcula a partir de l’amplada de l’element pare contenidor .wrapper, i canvia si en canvia l’amplada. Aquest càlcul no es pot fer prèviament perquè no sabem quin serà el 20% de l’element pare, de manera que demanem al navegador que ens ho calculi amb la funció calc().

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/calc.html", '100%', 450)}}

+ +

Posa a prova el teu coneixement

+ +

Hem vist molt de contingut en aquest article. En recordes la informació més important? Trobaràs més proves per comprovar si has retingut aquesta informació abans de seguir a Test your skills: Values and units.

+ +

Resum

+ +

Hem fet una passada ràpida pels tipus de valors i unitats més habituals amb què et pots trobar. Pots consultar tots els diferents tipus a la pàgina de referència Valors i unitats en CSS; molts d’ells els faràs servir a mesura que avances per aquests articles.

+ +

L’important és que recordis que cada propietat té una llista determinada de valors permesos, i que cada valor té una definició que explica quins en són els subvalors. Aleshores, pots consultar-ne les dades específiques aquí, a les pàgines d’MDN.

+ +

Per exemple, és útil saber que <image> també et permet crear un degradat de color, però potser no és obvi.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}

+ +

En aquest mòdul

+ +
    +
  1. La cascada i l'herència
    2. +
  2. Els selectors CSS + +
    3. +
  3. El model de caixes
    4. +
  4. Fons i vores
    5. +
  5. El tractament del text en diverses direccions
    6. +
  6. El desbordament dels continguts
    7. +
  7. Valors i unitats
    8. +
  8. Dimensionar elements amb el CSS
    9. +
  9. Imatges, mèdia i elements de formulari
    10. +
  10. Aplicar estil a les taules
    11. +
  11. Depura el teu CSS
    12. +
  12. Organitza el teu CSS
    13. +
diff --git a/files/ca/learn/css/caixes_estil/caixa_aspecte_interessant/index.html b/files/ca/learn/css/caixes_estil/caixa_aspecte_interessant/index.html deleted file mode 100644 index 3a4df8a2b2..0000000000 --- a/files/ca/learn/css/caixes_estil/caixa_aspecte_interessant/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: Una caixa d'aspecte interessant -slug: Learn/CSS/Caixes_estil/Caixa_aspecte_interessant -tags: - - Assessment - - Beginner - - CSS - - Learn - - backgrounds - - borders - - box - - box model - - effects -translation_of: Learn/CSS/Building_blocks/A_cool_looking_box ---- -
{{LearnSidebar}}
- -
{{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}
- -

En aquesta avaluació, obtindreu una mica més de pràctica a l'hora de crear caixes d'aspecte interessant, intentant crear una caixa atractiva.

- - - - - - - - - - - - -
Rrequisits previs:Abans d'intentar aquesta avaluació, hauríeu d'haver treballat tots els articles d'aquest mòdul.
Objectiu:Provar la comprensió del model de caixa CSS i altres característiques relacionades amb la caixa, com ara les vores i els fons.
- -

Punt de partida

- -

Per començar aquesta avaluació, heu de:

- - - -
-

Nota: Com a alternativa, podeu utilitzar un lloc com JSBin o Thimble per fer la vostra avaluació. Podeu enganxar el codi HTML i omplir el CSS en un d'aquests editors en línia. Si l'editor en línia que esteu utilitzant no té cap panell CSS independent, no dubteu a posar-lo en un element <style> al capdavant del document.

-
- -

Resum del projecte

- -

La vostra tasca és crear una caixa genial i de luxe i explorar que  podem tenir de divertit amb CSS.

- -

Tasques generals

- - - -

L'estil de la caixa

- -

Ens agradaria que dissenyéssiu
- el {{htmlelement("p")}} proporcionat, donant-li el següent:

- - - -

Exemple

- -

La següent captura de pantalla mostra un exemple del que podria semblar el disseny final:

- -

- -

Avaluació

- -

Si seguiu aquesta avaluació com a part d'un curs organitzat, hauríeu de poder lliurar el vostre treball al vostre professor/mentor per qualificar-ho. Si esteu en auto-aprenentatge, podreu obtenir la guia de qualificacions amb força facilitat preguntant sobre el tema en el fil de conversa en l'àrea d'aprenentatge, o en el canal IRC #mdn en Mozilla IRC. Intenteu primer l'exercici - no es guanya res fent trampes!

- -

{{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}

diff --git "a/files/ca/learn/css/caixes_estil/creaci\303\263_carta/index.html" "b/files/ca/learn/css/caixes_estil/creaci\303\263_carta/index.html" deleted file mode 100644 index 2623d6d0dd..0000000000 --- "a/files/ca/learn/css/caixes_estil/creaci\303\263_carta/index.html" +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: Creació d'una carta amb encapçalat de fantasia -slug: Learn/CSS/Caixes_estil/Creació_carta -tags: - - Assessment - - Background - - Beginner - - CSS - - CodingScripting - - border - - borderBoxes - - letter - - letterhead - - letterheaded - - paper -translation_of: Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes/A_cool_looking_box", "Learn/CSS/Styling_boxes")}}
- -

Si voleu fer una impressió correcta, escriviu una carta amb un bon paper i una capçalera agradable pot ser un començament realment bo. En aquesta avaluació, us desafiarem a crear una plantilla en línia per aconseguir-ho.

- - - - - - - - - - - - -
Requisits previs:Abans d'intentar aquesta avaluació, hauríeu d'haver treballat tots els articles d'aquest mòdul.
Objectiu:Provar la comprensió del model de caixa CSS i altres característiques relacionades amb la caixa, com ara la implementació de fons.
- -

Punt de partida

- -

Per començar aquesta avaluació, heu de:

- - - -
-

Nota: Com a alternativa, podeu utilitzar un lloc com JSBin o Thimble per fer la vostra avaluació. Podeu enganxar el codi HTML i omplir el CSS en un d'aquests editors en línia. Si l'editor en línia que esteu utilitzant no té cap panell CSS independent, no dubteu a posar-lo en un element <style> al capdavant del document.

-
- -

Resum del projecte

- -

Se us ha donat els fitxers necessaris per crear una plantilla de paper amb capçalera. Només cal que col·loqueu els fitxers junts. Per arribar-hi, heu de:

- -

La carta principal

- - - -

El logotip

- - - -

Consells i suggeriments

- - - -

Exemple

- -

La següent captura de pantalla mostra un exemple del que podria semblar el disseny final:

- -

- -

 

- -

Avaluació

- -

Si seguiu aquesta avaluació com a part d'un curs organitzat, hauríeu de poder lliurar el vostre treball al vostre professor/mentor per qualificar-ho. Si esteu en auto-aprenentatge, podreu obtenir la guia de qualificacions amb força facilitat preguntant sobre el tema en el fil de conversa en l'àrea d'aprenentatge, o en el canal IRC #mdn en Mozilla IRC. Intenteu primer l'exercici - no es guanya res fent trampes!

- -

{{PreviousMenuNext("Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes/A_cool_looking_box", "Learn/CSS/Styling_boxes")}}

diff --git a/files/ca/learn/css/css_layout/flexbox/index.html b/files/ca/learn/css/css_layout/flexbox/index.html new file mode 100644 index 0000000000..37f31f619b --- /dev/null +++ b/files/ca/learn/css/css_layout/flexbox/index.html @@ -0,0 +1,330 @@ +--- +title: Flexbox +slug: Learn/CSS/Disseny_CSS/Flexbox +tags: + - Article + - Beginner + - CSS + - CSS layouts + - CodingScripting + - Flexible Boxes + - Guide + - Layout + - Layouts + - Learn + - flexbox +translation_of: Learn/CSS/CSS_layout/Flexbox +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}
+ +

Flexbox és un mètode de disseny de pàgina web unidimensional que distribueix els elements de la pàgina web en files o en columnes. Els elements són «flexibles» i omplen tot l’espai de més o s’encongeixen per caber en espais més petits. Aquest article n’explica els fonaments.

+ + + + + + + + + + + + +
Prerequisits:Conceptes bàsics d'HTML (consulta la Introducció a l’HTML), i nocions de com funciona el CSS (consulta la Introducció al CSS).
Objectiu:Aprendre a utilitzar el sistema de disseny de pàgines web Flexbox.
+ +

Per què Flexbox?

+ +

Durant molt de temps, les úniques eines fiables compatibles amb els navegadors, disponibles per crear dissenys de pàgina web amb CSS eren mètodes com ara els elements flotants (floats) i el posicionament. Estan bé i funcionen, però d'alguna manera també són més limitats i frustrants.

+ +

Uns requisits senzills de disseny de pàgina web com els que enumerem a continuació són difícils o impossibles d'aconseguir amb aquestes eines d’una manera còmoda i flexible:

+ + + +

Com veureu en les properes seccions, Flexbox facilita moltes tasques de disseny de pàgina web. Aprofundim-hi!

+ +

Un exemple senzill

+ +

En aquest article, et farem treballar en un seguit d'exercicis que t’ajudaran a entendre com funciona Flexbox. Per començar, fes una còpia local del primer fitxer d'inici, flexbox0.html, que trobaràs en el nostre repositori de GitHub; carrega’l en un navegador modern (com Firefox o Chrome) i consulta’n el codi en el teu editor. També ho pots veure en viu aquí.

+ +

Observa que hi ha un element {{htmlelement("header")}} amb un títol d’encapçalament de nivell superior i un element {{htmlelement("section")}} que conté tres elements {{htmlelement("article")}}. Els farem servir per a crear un disseny de tres columnes força habitual.

+ +

+ +

Especificar els elements flexbox

+ +

Per començar hem de decidir quins elements volem configurar perquè es comportin com caixes flexibles. Per tal de fer-ho, establim un valor especial de {{cssxref("display")}} en l'element pare dels elements als quals afectarà. En aquest cas, volem que siguin els elements {{htmlelement("article")}}, per la qual cosa ho configurem en l’element {{htmlelement("section")}}:

+ +
section {
+  display: flex;
+}
+ +

Això fa que l'element <section> esdevingui un contenidor flexible i els seus fills ítems flexibles. El resultat d'això hauria de presentar un aspecte semblant a això:

+ +

+ +

Per tant, aquesta declaració única, ens dona tot el que necessitem; increïble, oi? Tenim el nostre disseny de pàgina de columna múltiple amb columnes de la mateixa mida, i que tenen la mateixa alçada. Això és perquè els valors predeterminats que s’han donat als elements flex (els fills del contenidor flex) estan dissenyats per a resoldre problemes comuns com aquest.

+ +

Per deixar-ho clar, reiterem el que passa aquí. L’element al qual hem donat un valor de {{cssxref("display")}} de flex actua com un element de nivell de bloc en termes de com interactua amb la resta de la pàgina, però els seus fills es presenten com a elements flexibles. La següent secció explicarà amb més detall què significa això. Fixeu-vos també que podeu utilitzar un valor de display d'inline-flex si voleu disposar els fills d'un element com a elements flexibles, però que aquest element es comporti com un element en línia.

+ +

El model flex

+ +

Els elements que es disposen com caixes flexibles, es distribueixen al llarg de dos eixos:

+ +

flex_terms.png

+ + + +

Tingues present aquesta terminologia a mesura que avances en les seccions. Sempre pots tornar enrere si en algun moment l’ús d’aquests termes et genera confusions.

+ +

Columnes o files?

+ +

Flexbox proporciona una propietat anomenada {{cssxref("flex-direction")}}, que especifica en quina direcció discorre l'eix principal (en quina direcció es disposen les caixes flexibles fill); per defecte, està definida en row, que fa que els elements flexibles es disposin en una fila en la direcció de l'idioma predeterminat amb què funciona el teu navegador (d'esquerra a dreta, en el cas d'un navegador en català).

+ +

Prova d'afegir a la teva regla <section> la declaració següent:

+ +
flex-direction: column;
+ +

Observa que això posa de nou els elements en una disposició en columna, igual que estaven abans d’afegir-hi el CSS. Abans de continuar, elimina aquesta declaració del teu exemple.

+ +
+

Nota: També pots disposar elements flexibles en direcció inversa amb els valors row-reverse i column-reverse. Experimenta també amb aquests valors.

+
+ +

Ajust

+ +

Un problema que sorgeix quan tens un disseny de pàgina amb una amplada o una alçada fixa és que els fills de l’element flexbox poden desbordar el contenidor i trencar el disseny de la pàgina. Fes un cop d'ull al nostre exemple flexbox-wrap0.html i mira’l en directe (fes primer una còpia local d'aquest fitxer, si vols seguir amb aquest exemple):

+ +

+ +

Aquí observem que els fills desborden el contenidor. Una manera de solucionar això és afegir a la teva regla <section> la declaració següent:

+ +
flex-wrap: wrap;
+ +

Afegeix també la declaració següent a la teva regla <article>

+ +
flex: 200px;
+ +

Ara prova-ho; observa que el disseny es veu força més bé ara que hi has inclòs això:

+ +

Ara hi ha diverses files, i a cada fila hi ha tantes elements fill flexbox com és raonable que hi hagi, i si hi ha cap desbordament, es genera una altra línia. La declaració flex: 200px que hem establer per als elements <article> significa que cada article tindrà com a mínim una amplada de 200px; més endavant parlarem d'aquesta propietat amb més detall. També pots observar que els últims fills de l'última fila s’han fet més amples, de manera que la fila està igualment tota plena.

+ +

Però encara hi podem fer més. Primer de tot, prova de canviar el valor de la propietat {{cssxref("flex-direction")}} a row-reverse; observa que encara tens el disseny de files múltiples, però ara comença des de la cantonada oposada de la finestra del navegador i flueix en sentit invers.

+ +

La propietat flex-flow abreujada

+ +

En aquest punt, val la pena observar que hi ha una propietat abreujada per a {{cssxref("flex-direction")}} i {{cssxref("flex-wrap")}}, que és: {{cssxref("flex-flow")}}. Per exemple, pots substituir:

+ +
flex-direction: row;
+flex-wrap: wrap;
+ +

per

+ +
flex-flow: row wrap;
+ +

Dimensió flexible dels elements flexibles

+ +

Tornem ara al nostre primer exemple i observem com podem controlar quina proporció d'espai poden ocupar els elements flexibles. Fes servir la teva còpia local de flexbox0.html, o fes una còpia de flexbox1.html com a punt de partida nou (també el pots veure en viu).

+ +

Primer, afegeix la regla següent al final del teu CSS:

+ +
article {
+  flex: 1;
+}
+ +

Es tracta d'un valor de proporció sense unitat que determina quina quantitat de l'espai disponible al llarg de l'eix principal ocupa cada element flexible. En aquest cas donem a cada element {{htmlelement("article")}} un valor de 1, que significa que tots ocuparan una quantitat igual de l'espai que sobri després que s'hagin establert elements com ara l’àrea de farciment i el marge. És una proporció, que significa que donar a cada element flexible un valor de 400.000 tindria exactament el mateix efecte.

+ +

A continuació, afegeix la regla següent a sota de l'anterior:

+ +
article:nth-of-type(3) {
+  flex: 2;
+}
+ +

Aleshores, actualitza. Observa que el tercer element {{htmlelement("article")}} ocupa el doble de l'amplada disponible que els altres dos; perquè ara hi ha en total quatre unitats proporcionals disponibles. Els dos primers elements flexibles en tenen una cadascun, i prenen 1/4 de l'espai disponible cadascun. El tercer té dues unitats, de manera que ocupa 2/4 de l'espai disponible (o el que és el mateix, la meitat).

+ +

També pots especificar un valor de mida mínima per al valor flex. Actualitza les teves regles per als elements <article>, així:

+ +
article {
+  flex: 1 200px;
+}
+
+article:nth-of-type(3) {
+  flex: 2 200px;
+}
+ +

Això bàsicament estableix que «Es dona a cada element flexible primer 200px de l'espai disponible. A continuació, la resta de l'espai disponible es reparteix segons les unitats de proporció». Actualitza i observa com es reparteix l'espai ara.

+ +

+ +

El valor real de flexbox es pot apreciar en la flexibilitat / capacitat de resposta; si canvies la mida de la finestra del navegador o afegeixes un altre element {{htmlelement("article")}}, el disseny de pàgina encara funciona.

+ +

Propietat flex abreujada o no abreujada

+ +

{{Cssxref("flex")}} és una propietat de abreujada que pot especificar fins a tres valors diferents:

+ + + +

Recomanem evitar l'ús de les propietats flex no abreujades, si no és que t’és realment necessari (per exemple, perquè has de substituir alguna configuració anterior). Comporta escriure una gran quantitat de codi addicional, i pot acabar sent una mica confús.

+ +

Alineació horitzontal i vertical

+ +

També pots utilitzar funcions flexbox per a alinear elements flexibles al llarg dels eixos principals o transversals. Ho expliquem amb un nou exemple, flex-align0.html (també el pots veure en viu), que convertirem en una bonica barra d'eines/botons flexible. De moment, observa aquesta barra de menú horitzontal amb alguns botons agrupats a la cantonada superior esquerra.

+ +

+ +

Primer, fes una còpia local d'aquest exemple.

+ +

A continuació, afegeix a la part inferior del CSS de l'exemple el codi següent:

+ +
div {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}
+ +

Actualitza la pàgina i observa que els botons estan ben centrats, horitzontalment i verticalment. Ho hem fet amb dues propietats noves.

+ +

El control {{cssxref("align-items")}} disposa els elements flexibles sobre l'eix transversal.

+ + + +

Pots anul·lar el comportament {{cssxref("align-items")}} per a elements flexibles individuals amb la propietat {{cssxref("align-self")}}. Per exemple, afegeix al teu CSS el codi el següent:

+ +
button:first-child {
+  align-self: flex-end;
+}
+ +

Dona un cop d'ull a l'efecte que hi produeix i retira de nou aquest codi quan hagis acabat.

+ +

La propietat {{cssxref("justify-content")}} controla on s’ubiquen els elements flexibles sobre l'eix principal.

+ + + +

T’animem a jugar amb aquests valors i veure com funcionen abans de continuar.

+ +

Ordena els elements flexibles

+ +

Flexbox també té una característica que canvia l'ordre de disposició dels elements flexibles sense afectar l'ordre d'origen. Aquesta és una altra característica que és impossible de fer amb els mètodes tradicionals de disseny de pàgines web.

+ +

El codi per a això és senzill: afegeix al codi d'exemple de la barra de botons el codi CSS següent:

+ +
button:first-child {
+  order: 1;
+}
+ +

Actualitza, i observa que ara el botó «Smile» s'ha mogut al final de l'eix principal. Parlarem de com això funciona amb una mica més detall:

+ + + +

Pots establir valors d'ordre negatius i fer que els elements apareguin abans que els elements amb un ordre 0. Per exemple, pots fer que el botó «Blush» aparegui al principi de l'eix principal amb la següent regla:

+ +
button:last-child {
+  order: -1;
+}
+ +

Caixes flexibles imbricades

+ +

Amb flexbox és possible crear dissenys força complexos. És del tot correcte establir que un element flexible sigui també un contenidor flexible, de manera que els elements fills també es disposin com caixes flexibles. Dona un cop d'ull a complex-flexbox.html (o també el pots veure en viu).

+ +

+ +

L'HTML d’això és força senzill. Hi ha un element {{htmlelement("section")}} que conté tres elements {{htmlelement("article")}}. El tercer element {{htmlelement("article")}} conté tres elements {{htmlelement("div")}}:

+ +
section - article
+          article
+          article - div - button
+                    div   button
+                    div   button
+                          button
+                          button
+ +

Observa el codi que hem utilitzat per al disseny.

+ +

En primer lloc, establim que els fills de {{htmlelement("section")}} es disposin com caixes flexibles.

+ +
section {
+  display: flex;
+}
+ +

A continuació, establim alguns valors flex en els propis elements {{htmlelement("article")}}. Aquí cal tenir en compte la 2a regla; configurem el tercer element {{htmlelement("article")}} de manera que els seus elements fills es disposin també com elements flexibles, però aquesta vegada en columna.

+ +
article {
+  flex: 1 200px;
+}
+
+article:nth-of-type(3) {
+  flex: 3 200px;
+  display: flex;
+  flex-flow: column;
+}
+
+ +

A continuació, seleccionem el primer element {{htmlelement("div")}}. Utilitzem la declaració flex: 1 100px; perquè hi doni efectivament una alçada mínima de 100px, aleshores en configurem els elements fills (els elements {{htmlelement("button")}}) perquè també siguin elements flexibles. Els distribuïm en fila perquè ocupin tot l’espai amb la propietat wrap i els alineem al centre de l'espai disponible, com hem fet en l'exemple del botó individual que hem vist abans.

+ +
article:nth-of-type(3) div:first-child {
+  flex: 1 100px;
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  justify-content: space-around;
+}
+ +

Finalment, establim les dimensions del botó, però la qüestió interessant és que hi donem un valor de flex de 1. Això té un efecte molt interessant, que pots observar si canvies la mida de l'amplada de la finestra del navegador. Els botons ocuparan tant d’espai com puguin i es disposaran sobre la mateixa línia tant com sigui possible, però quan ja no càpiguen amb comoditat a la mateixa línia, cauran a la línia següent.

+ +
button {
+  flex: 1;
+  margin: 5px;
+  font-size: 18px;
+  line-height: 1.5;
+}
+ +

Compatibilitat amb altres navegadors

+ +

Flexbox és compatible amb la majoria de navegadors nous: Firefox, Chrome, Opera, Microsoft Edge i IE 11, i les versions més noves d'Android/iOS, etc. No obstant això, cal tenir en compte que encara hi ha navegadors antics en ús que no admeten Flexbox (o bé n’admeten una versió antiga i desactualitzada).

+ +

Mentre ets en procés d’aprendre i experimentar, això no importa gaire; però si consideres l'ús de flexbox en un lloc web real, has de fer proves i assegurar-te que la teva experiència d'usuari continua sent acceptable en el màxim nombre de navegadors possible.

+ +

Flexbox és una mica més complicat que altres característiques CSS. Per exemple, si un navegador no té ombres CSS, probablement el lloc web serà encara usable. En canvi, la no-compatibilitat amb les característiques de flexbox probablement trencarà del tot el disseny i inutilitzarà el lloc web.

+ +

En un altre mòdul parlarem de les estratègies per a superar els complexos problemes de compatibilitat dels navegadors.

+ +

Posa a prova les teves habilitats

+ +

Hem vist moltes coses en aquest article. En recordes la informació més important? Trobaràs més tests per poder comprovar si has retingut la informació abans de seguir a Test your skills: Flexbox.

+ +

Resum

+ +

Això clou el nostre recorregut pels fonaments de flexbox. Esperem que t’hagis divertit i que sàpigues jugar-hi mentre continues endavant amb el teu aprenentatge. A continuació, veurem un altre aspecte important dels dissenys CSS, els sistemes de graella.

+ +
{{PreviousMenuNext("Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}
diff --git a/files/ca/learn/css/css_layout/floats/index.html b/files/ca/learn/css/css_layout/floats/index.html new file mode 100644 index 0000000000..25d2fe01a6 --- /dev/null +++ b/files/ca/learn/css/css_layout/floats/index.html @@ -0,0 +1,516 @@ +--- +title: Flotadors (Floats) +slug: Learn/CSS/Disseny_CSS/Flotadors +tags: + - Article + - Beginner + - CSS + - Clearing + - CodingScripting + - Floats + - Guide + - Layout + - columns + - multi-column +translation_of: Learn/CSS/CSS_layout/Floats +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}}
+ +

Originalment pensada per a flotar imatges dins de blocs de text, la propietat {{cssxref("float")}} va esdevenir una de les eines més utilitzades per a crear dissenys multicolumna a les pàgines web. Amb l'arribada de Flexbox i Grid ha tornat ara al seu propòsit original, tal com s'explica en aquest article.

+ + + + + + + + + + + + +
Requisits previs:HTML bàsic (vegeu Introducció a l'HTML), i una idea de com funciona CSS (vegeu Introducció a CSS.)
Objectiu:Aprendre a crear elements flotants a les pàgines web, i a fer servir la propietat clear i altres mètodes per a netejar els elements flotants.
+ +

La història dels elements flotants

+ +

La propietat {{cssxref("float")}} fou introduïda per a permetre als desenvolupadors implementar dissenys senzills que incloguessin una imatge flotant dins d'una columna de text, amb el text envoltant la part esquerra o dreta de la imatge. El tipus de cosa que trobes habitualment en el disseny d'un diari.

+ +

Però els desenvoupadors web aviat s'adonaren que podien flotar qualsevol cosa, i no només les imatges, pel que el seu ús s'amplià, per exemple, creant efectes de disseny divertits com els d'aquestes caplletres.

+ +

Els elements flotants han estat utitlitzats habitualment per a crear dissenys web complets amb múltiples columnes situades l'una al costat de l'altra (el comportament per defecte seria que les columnes se situessin les unes sota les altres, en el mateix ordre en què apareixen al codi font). Ara hi ha disponibles tècniques més modernes i millors, que explorarem més endavant en aquest mòdul, per la qual cosa l'ús de {{cssxref("float")}} d'aquesta manera s'hauria de contemplar com una tècnica antiquada.

+ +

En aquest article ens centrarem en l'ús apropiat de la propietat {{cssxref("float")}}.

+ +

Un exemple de float simple

+ +

Explorem com utilitzar els float. Començarem amb un exemple realment simple que inclou un bloc de text flotant al voltant d'un element. Pots acompanyar-nos creant un fitxer index.html al teu ordinador, omplint-lo amb una plantilla HTML simple, i inserint el codi següent als llocs adequats. Al final de la secció podràs veure un exemple en viu de com hauria de ser el codi final.

+ +

Primer, comencem amb una mica d'HTML simple — afegeix el següent al cos del teu HTML, eliminant qualsevol altra cosa que hi hagués abans:

+ +
<h1>Exemple simple de caixa flotant</h1>
+
+<div class="box">Caixa flotant</div>
+
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. </p>
+
+<p>Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
+
+<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+ +

Ara aplica el següent CSS al teu HTML (fent servir un element {{htmlelement("style")}} o un {{htmlelement("link")}} per a separar el fitxer .css  — tu tries):

+ +
body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif
+}
+
+.box {
+  width: 150px;
+  height: 100px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+ +

Si deses y recarregues la pàgina, veuràs quelcom semblant a allò que esperaries: la caixa es troba per sobre del text, en un flux normal. Per a flotar el text al voltant, afegeix les propietats {{cssxref("float")}} i {{cssxref("margin-right")}} a la regla .box:

+ +
.box {
+  float: left;
+  margin-right: 15px;
+  width: 150px;
+  height: 100px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+ +

Ara, si deses i recarregues, podràs veure alguna cosa semblant a això:

+ +
+ +
+ +

{{ EmbedLiveSample('Float_1', '100%', 500) }}

+ +

Analitzem ara com funciona el float — l'element amb el float aplicat (l'element {{htmlelement("div")}} en aquest cas) és extret del flux normal del document i està enganxat al costat esquerre del seu element contenidor pare ({{htmlelement("body")}}, en aquest cas). Qualsevol contingut que estigui per sota de l'element flotat en el flux normal, ara l'envoltarà, omplint l'espai a la dreta fins a la part superior de l'element flotant. Allà s'aturarà.

+ +

Flotar el contingut a la dreta té exactament el mateix efecte, però a la inversa — l'element flotat s'enganxarà a la dreta, i el contingut l'envoltarà per l'esquerra. Prova de canviar el valor de la propietat float a right i substitueix {{cssxref("margin-right")}} per {{cssxref("margin-left")}} al darrer conjunt de regles per veure el resultat.

+ +

Tot i que podem afegir un marge a l'element flotant per alunyar el text, no podem afegir un marge al text per allunyar-lo del flotant. Això es deu al fet que un element flotant s'extreu del flux normal i les caixes dels següents elements segueixen per darrera del flotador. Pots comprovar-ho fent alguns canvis a l'exemple.

+ +

Afegeix una clase special al primer paràgraf de text, el que succeeix immediatament a la caixa flotant, i després afegeix al teu CSS les següents regles. Això li donarà al paràgraf següent un color de fons.

+ +
.special {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+}
+
+ +

Per tal que l'efecte sigui més fàcil de veure, canvia el margin-right del teu element flotant a margin, per obtener espai al voltant de l'element flotant. Veuràs que el fons del paràgraf passa just per sota de la caixa flotant, com en l'exemple inferior.

+ +
+ +
+ +

{{ EmbedLiveSample('Float_2', '100%', 500) }}

+ +

Els quadres de línia del següent element s'han escurçat perquè el text discorri al voltant del flotador, però com que el flotador s'ha eliminat del flux normal, el quadre al voltant del paràgraf encara manté l'ample complet.

+ +

Netejant floats

+ +

Hem vist que el flotador s'elimina del flux normal i que els altres elements es mostraran al seu costat. Per tant, si volem evitar que un element a continuació es mogui cap amunt, hem de netejar el float. Això s'aconsegueix amb la propietat {{cssxref ("clear")}}.

+ +

En l'HTML de l'exemple anterior, afegeix una classe cleared al segon paràgraf sota de l'element flotant. Després, afegeix això al teu CSS:

+ +
.cleared {
+  clear: left;
+}
+
+ +
+ +
+ +

{{ EmbedLiveSample('Float_3', '100%', 600) }}

+ +

Hauries de veure que el següent paràgraf neteja l'element flotant i ja no apareix al seu costat. La propietat clear accepta els següents valors:

+ + + +

Netejar la caixa contenidora d'un float

+ +

Ara ja saps com netejar un element que es troba a continuació d'un element flotant, però observa el que succeeix si tens un flotant alt i un paràgraf curt, amb una caixa convenidora que envolta ambdós elements. Modifica el teu document per tal que el primer paràgraf i la caixa flotant es trobin dins d'un {{htmlelement("div")}} amb una classe wrapper.

+ +
<div class="wrapper">
+  <div class="box">Caixa flotant</div>
+
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.</p>
+</div>
+
+ +

Al teu CSS, afegeix la següent regla per a la teva classe .wrapper i després recarrega la pàgina:

+ +
.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+}
+ +

A més, elimina la classe .cleared anterior:

+ +
.cleared {
+    clear: left;
+}
+ +

Veuràs que, como en l'exemple on hem posat un color de fons al paràgraf, el color de fons passa per darrere de l'element flotant.

+ +
+ +
+ +

{{ EmbedLiveSample('Float_4', '100%', 600) }}

+ +

Un cop més, això és així perquè el flotador s'ha extret del flux normal. Netejar el següent elemento no ajuda a resoldre aquest problema de neteja de la caixa, on volem que la part inferior de la caixa envolti l'element flotant i que envolti el contingut fins i tot si el coningut és més curt. Hi ha tres maneres posssibles de resoldre això, dues que funcionen en tots els navegadors, però que tenen una mica de truc, i una tercera, nova manera de resoldre aquesta situació correctament.

+ +

El hack clearfix

+ +

La forma com aquesta situació s'ha tractat tradicionalment és utilitzant un truc conegut com el "truc clearfix". Això implica inserir algun contingut generat després de la caixa que conté el contingut flotant i envolvent, i configurar-lo per netejar ambdós.

+ +

Afefeix el següent CSS a l'exemple:

+ +
.wrapper::after {
+  content: "";
+  clear: both;
+  display: block;
+}
+ +

Ara recarrega la pàgina i la caixa hauria de netejar-se. Això és bàsicament el mateix que si haguessis afegit un element HTML com un <div> a sota dels elements i li haguessis afegit la propietat clear: both.

+ +
+ +
+ +

{{ EmbedLiveSample('Float_5', '100%', 600) }}

+ +

Fent servir overflow

+ +

Un mètode alternatiu és establir la propietat {{cssxref("overflow")}} de l'element contenidor amb un valor diferent de visible.

+ +

Elimina el CSS clearfix que has afegit en l'anterior secció i, en el seu lloc, afegeix overflow: auto a les regles de la caixa contenidora. Altre cop, la caixa hauria de netejar-se.

+ +
.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+  overflow: auto;
+}
+ +
+ +
+ +

{{ EmbedLiveSample('Float_6', '100%', 600) }}

+ +

Aquest exemple funciona creant el que s'anomena un block formatting context (BFC) o context de format de bloc. És com un petit disseny dins de la nostra pàgina (dins la qual tot està contingut, per tant, el nostre element flotant està contingut dins del BFC i el fons es troba darrere d'ambdós elements. Això generalment funcionarà. Això no obstant, en certs casos, és possible que et trobis amb barres de desplaçament no desitjades o ombres retallades com a conseqüències no desitjades de l'ús del desbordament..

+ +

display: flow-root

+ +

La manera moderna de resoldre aquest problema és fer servir el valor flow-root de la propietat display. Això existeix només per a crear un BFC sense fer servir trucs; no hi haurà conseqüències no desitjades quan el facis servir. Elimina overflow: auto de la regla .wrapper i afegeix display: flow-root. Assumint que el teu navegador sigui compatible, la caixa es netejarà.

+ +
.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+  display: flow-root;
+}
+ +
+ +
+ +

{{ EmbedLiveSample('Float_7', '100%', 600) }}

+ +

Resum

+ +

Ara ja saps tot el que has de saber sobre els flotadors en el desenvolupament web modern. Consulta l'article sobre els mètodes de disseny antiquats per obtenir informació de com es feien servir, cosa que pot ser-te útil si has de treballar en projectes antics.

+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}}

+ +

En aquest mòdul

+ + diff --git a/files/ca/learn/css/css_layout/grids/index.html b/files/ca/learn/css/css_layout/grids/index.html new file mode 100644 index 0000000000..af97c6f989 --- /dev/null +++ b/files/ca/learn/css/css_layout/grids/index.html @@ -0,0 +1,699 @@ +--- +title: Graelles (Grids) +slug: Learn/CSS/Disseny_CSS/Graelles +tags: + - Article + - Beginner + - CSS + - CSS Grids + - CodingScripting + - Grids + - Guide + - Layout + - Learn + - Tutorial + - grid design + - grid framework + - grid system +translation_of: Learn/CSS/CSS_layout/Grids +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Assessment", "Learn/CSS/CSS_layout")}}
+ +

Les graelles són una eina de disseny de pàgines web consolidada i molts dissenys de pàgines web moderns basen els seus dissenys de pàgina web en una graella regular. En aquest article analitzarem el disseny de pàgines web basats en graella i com es pot utilitzar CSS per a crear graelles, tant amb les eines presents com amb les noves tecnologies que comencen a estar disponibles en els navegadors.

+ + + + + + + + + + + + +
Prerequisits:Conceptes bàsics d'HTML (consulta la Introducció a HTML), i nocions de com funciona el CSS (consulta la Introducció al CSS i Aplicar estil a les caixes.)
Objectiu:Entendre els conceptes fonamentals que hi ha darrere dels sistemes de disseny de pàgines web amb graella i la manera com implementar un disseny de pàgina web basat en graella.
+ +

Què és el disseny de pàgines web basat en graella?

+ +

Una graella és senzillament una col·lecció de línies horitzontals i verticals que creen un patró que ens serveix per a alinear els elements del disseny d’una pàgina web. Ens ajuden a crear dissenys en què els elements no es mouen ni canvien d'amplada a mesura que naveguem de pàgina en pàgina, i proporcionen més coherència als nostres llocs web.

+ +

Normalment, una graella té columnes (columns), files (rows) i espais entre cada fila i columna, que anomenem comunament canals (gutters).

+ +

+ +

Crear la teva graella en CSS

+ +

Després d'haver decidit la graella que necessita el vostre disseny, podeu utilitzar el disseny de graella (o grid) de CSS per crear aquesta quadrícula a CSS i col·locar-hi elements. Primer veurem les característiques bàsiques del disseny de quadrícula i després explorarem com crear un sistema de quadrícula simple per al vostre projecte.

+ +

Com a punt de partida, descarregueu i obriu el fitxer del punt de partida a l’editor de text i al navegador (també el podeu veure en directe aquí). Veureu un exemple amb un contenidor que conté alguns elements secundaris. Per defecte, es mostren en un flux normal, de manera que els quadres es mostren un sota l’altre. Treballarem amb aquest fitxer durant la primera part d’aquesta lliçó, fent canvis per veure com es comporta la quadrícula.

+ +

Per definir una graella utilitzem el valor grid de la propietat display. Com passa amb Flexbox, això activa el disseny de graella i tots els fills directes del contenidor es converteixen en elements de la quadrícula. Afegiu això al CSS del vostre fitxer:

+ +
.container {
+    display: grid;
+}
+ +

A diferència de flexbox, els articles no tindran cap aspecte immediatament diferent. Declarar display: grid  us dona una quadrícula d'una columna, de manera que els vostres articles continuaran mostrant-se un per sota de l'altre tal com ho fan en el flux normal.

+ +

Per veure alguna cosa que sembli més una graella, haurem d’afegir algunes columnes a la quadrícula. Afegim aquí tres columnes de 200 píxels. Podeu utilitzar qualsevol unitat de longitud o percentatges per crear aquestes pistes de columna.

+ +
.container {
+    display: grid;
+    grid-template-columns: 200px 200px 200px;
+}
+ +

Afegiu la segona declaració a la vostra regla CSS i, a continuació, torneu a carregar la pàgina i hauríeu de veure que els elements s'han reordenat un a cada cel·la de la quadrícula creada.

+ +
+ +
+ +

{{ EmbedLiveSample('Grid_1', '100%', 400) }}

+ +

Graelles flexibles amb la unitat fr

+ +

A més de crear quadrícules amb longituds i percentatges, podem utilitzar la unitat fr per dimensionar de manera flexible les files i les columnes de la quadrícula. Aquesta unitat representa una fracció de l'espai disponible al contenidor de la quadrícula.

+ +

Canvieu el llistat de pistes a la següent definició, creant tres pistes d'1fr.

+ +
.container {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+}
+ +

Ara hauríeu de veure que teniu pistes flexibles. La unitat fr distribueix espai proporcionalment, per tant, podeu donar diferents valors positius a les vostres pistes, per exemple, si canvieu la definició així:

+ +
.container {
+    display: grid;
+    grid-template-columns: 2fr 1fr 1fr;
+}
+ +

La primera pista ara té 2fr de l’espai disponible i les altres dues pistes 1fr, fent que la primera pista sigui més gran. Podeu barrejar unitats de fr i pistes de longitud fixa; en aquest cas, l’espai necessari per a les pistes fixes s’elimina abans de distribuir l’espai a les altres pistes.

+ +

+

+ +
+ + +

{{ EmbedLiveSample('Grid_2', '100%', 400) }}

+ +
+

Nota: La unitat fr distribueix l'espai disponible, no tot l'espai. Per tant, si una de les vostres pistes té alguna cosa gran al seu interior, hi haurà menys espai lliure per compartir.

+
+ +

Espais entre pistes

+ +

Per crear espais entre pistes, fem servir les propietats {{cssxref ("grid-column-gap")}} per a espais entre columnes, {{cssxref ("grid-row-gap")}} per a espais entre files i {{ cssxref ("grid-gap")}} per establir tots dos alhora.

+ +
.container {
+    display: grid;
+    grid-template-columns: 2fr 1fr 1fr;
+    grid-gap: 20px;
+}
+ +

Aquests buits poden especificar-se en qualsevol unitat de longitud o percentatge, però no en unitats fr.

+ +
+ +
+ +

{{ EmbedLiveSample('Grid_3', '100%', 400) }}

+ +
+

Nota: Les propietats *gap solien portar el prefix grid-, però això s'ha canviat a l'especificació, ja que la intenció és fer-les útils en diversos mètodes de disseny. Les versions prefixades es mantindran com a àlies, de manera que es podran utilitzar amb seguretat durant algun temps. Per estar segur, podeu duplicar i afegir les dues propietats per fer el vostre codi més a prova de bales.

+
+ +
.container {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr;
+  grid-gap: 20px;
+  gap: 20px;
+}
+ +

Repetició de llistes de pistes

+ +

Podeu repetir tot o una secció de la vostra llista de pistes mitjançant la notació de repetició. Canvieu la llista de pistes pel següent:

+ +
.container {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 20px;
+}
+ +

Ara tindreu 3 pistes d’1fr igual que abans. El primer valor que es passa a la funció de repetició és el nombre de vegades que voleu que es repeteixi el llistat, mentre que el segon valor és un llistat de pistes, que consisteix d’una o més pistes que vulgueu repetir.

+ +

La quadrícula implícita i explícita

+ +

Fins ara, només hem especificat pistes de columnes i, tot i això, s’estan creant files per contenir el nostre contingut. Aquest és un exemple de la quadrícula explícita contra la quadrícula implícita. La quadrícula explícita és la que creeu utilitzant grid-template-columns o grid-template-rows. La quadrícula implícita es crea quan el contingut es col·loca fora d’aquesta, com ara a les nostres files. Les quadrícules explícites i implícites són anàlogues als eixos flexbox principal i transversal.

+ +

Per defecte, les pistes creades a la quadrícula implícita tenen una mida auto, cosa que en general vol dir que són prou grans per adaptar-se al seu contingut. Si voleu donar una mida implícita a les pistes de quadrícula, podeu utilitzar les propietats {{cssxref ("grid-auto-rows")}} i {{cssxref ("grid-auto-columns")}}. Si afegiu grid-auto-rows amb un valor de 100px al vostre CSS, veureu que aquestes files creades ara tenen una alçada de 100 píxels.

+ +
+ + +
.container {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+  grid-gap: 20px;
+}
+ +

{{ EmbedLiveSample('Grid_4', '100%', 400) }}

+ +

La funció minmax()

+ +

Les nostres pistes de 100 píxels d’alçada no seran molt útils si afegim contingut a les pistes de més de 100 píxels, ja que aquest cas provocaria un desbordament. Podria ser millor tenir pistes de com a mínim 100 píxels d’alçada i que es puguin expandir si hi entra més contingut. Un fet bastant bàsic sobre el web és que mai no se sap realment la mida que tindrà alguna cosa; contingut addicional o mides de lletra més grans poden causar problemes amb els dissenys que intenten ser perfectes en píxels en totes les dimensions.

+ +

La funció {{cssxref ("minmax")}} ens permet establir una mida mínima i màxima per a una pista, per exemple, minmax(100 px, auto). La mida mínima és de 100 píxels, però la màxima és automàtica, i s’ampliarà per adaptar-se al contingut. Proveu de canviar grid-auto-rows per utilitzar un valor min-max:

+ +
.container {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-auto-rows: minmax(100px, auto);
+    grid-gap: 20px;
+}
+ +

Si afegiu contingut addicional, veureu que la pista s'expandeix per permetre que encaixi. Tingueu en compte que l'expansió es produeix al llarg de la fila.

+ +

Tantes columnes com encaixin

+ +

Podem combinar algunes de les coses que hem après sobre el llistat de pistes, la notació de repetició i {{cssxref ("minmax")}} per crear un patró útil. De vegades, és útil poder demanar a la quadrícula que creï tantes columnes com càpiguen al contenidor. Ho fem establint el valor de grid-template-columns mitjançant la notació {{cssxref ("repeat")}}}), però en lloc de passar un número, introduïu la paraula clau auto-fill. Per al segon paràmetre de la funció utilitzem minmax(), amb un valor mínim igual a la mida mínima de la pista que ens agradaria tenir i un màxim de 1fr.

+ +

Proveu-ho ara al vostre fitxer amb el CSS següent:

+ +
+ + +
.container {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  grid-auto-rows: minmax(100px, auto);
+  grid-gap: 20px;
+}
+
+ +

{{ EmbedLiveSample('Grid_5', '100%', 400) }}

+ +

Això funciona perquè Grid crea tantes columnes de 200 píxels com càpiguen al contenidor i, a continuació, comparteix l’espai que sobri entre totes les columnes: el màxim és 1fr que, com ja sabem, distribueix l’espai de manera uniforme entre les pistes.

+ +

Ubicació basada en línies

+ +

Ara passem de crear una graella a col·locar coses a la quadrícula. La nostra quadrícula sempre té línies, que comencen per 1 i es relacionen amb el mode d’escriptura del document. Per tant, en anglès, la línia de columna 1 es troba a la part esquerra de la quadrícula i la línia de fila 1 a la part superior. En àrab, la línia 1 de la columna estaria a la dreta, ja que l'àrab s'escriu de dreta a esquerra.

+ +

Podem situar les coses segons aquestes línies especificant la línia inicial i final. Ho fem utilitzant les propietats següents:

+ + + +

Totes aquestes propietats poden tenir un número de línia com a valor. També podeu utilitzar les propietats abreujades:

+ +

    {{cssxref ("grid-column")}}
+     {{cssxref ("grid-row")}}

+ +

Aquests us permeten especificar les línies inicial i final alhora, separades per un /, un caràcter de barra inclinada cap endavant.

+ +

Descarregueu aquest fitxer com a punt de partida o vegeu-lo en directe aquí. Ja té una quadrícula definida i article senzill. Podeu veure que la col·locació automàtica col·loca elements un a cada cel·la de la quadrícula que hem creat.

+ +

En lloc d'això, col·locarem tots els elements del nostre lloc a la quadrícula, mitjançant les línies de la quadrícula. Afegiu les regles següents a la part inferior del vostre CSS:

+ +
header {
+  grid-column: 1 / 3;
+  grid-row: 1;
+}
+
+article {
+  grid-column: 2;
+  grid-row: 2;
+}
+
+aside {
+  grid-column: 1;
+  grid-row: 2;
+}
+
+footer {
+  grid-column: 1 / 3;
+  grid-row: 3;
+}
+ +
+ +
+ +

{{ EmbedLiveSample('Grid_6', '100%', 400) }}

+ +
+

Nota: també podeu utilitzar el valor -1 per referir-vos a la columna o la línia final i comptar cap a l'interior des del final mitjançant valors negatius. Tanmateix, això només funciona per a la quadrícula explícita. El valor -1 no es referirà a la línia final de la quadrícula implícita.

+
+ +

Posicionament amb grid-template-areas

+ +

Una forma alternativa de col·locar elements a la quadrícula és fer servir la propietat {{cssxref ("grid-template-areas")}} i donar un nom als diversos elements del vostre disseny.

+ +

Traieu el posicionament basat en línies de l'últim exemple (o torneu a descarregar el fitxer per tenir un punt de partida nou) i afegiu el CSS següent.

+ +
.container {
+  display: grid;
+  grid-template-areas:
+      "header header"
+      "sidebar content"
+      "footer footer";
+  grid-template-columns: 1fr 3fr;
+  grid-gap: 20px;
+}
+
+header {
+  grid-area: header;
+}
+
+article {
+  grid-area: content;
+}
+
+aside {
+  grid-area: sidebar;
+}
+
+footer {
+  grid-area: footer;
+}
+ +

Torneu a carregar la pàgina i veureu que els vostres articles s'han col·locat igual que abans, sense que hàgim d'utilitzar cap número de línia!

+ +
+ +
+ +

{{ EmbedLiveSample('Grid_7', '100%', 400) }}

+ +

Les regles per a les grid-template-areas són les següents:

+ + + +

Podeu jugar amb el nostre disseny canviant el peu de pàgina per situar-se només a sota del contingut i la barra lateral, per exemple, per abastar fins a baix de tot. Aquesta és una manera molt agradable de descriure un disseny, ja que és obvi a partir del CSS exactament el que està passant.

+ +

Un framework de graella amb CSS Grid

+ +

Els "frameworks" de quadrícula tendeixen a basar-se al voltant de 12 o 16 quadrícules i, amb CSS Grid, no necessiteu cap eina de tercers que us proporcioni aquest framework: ja hi és, a l’especificació.

+ +

Descarregueu el fitxer de punt de partida. Conté un contenidor amb una quadrícula de 12 columnes definida i el mateix marcatge que hem utilitzat en els dos exemples anteriors. Ara podem utilitzar la ubicació basada en línies per col·locar el nostre contingut a la quadrícula de 12 columnes.

+ +
header {
+  grid-column: 1 / 13;
+  grid-row: 1;
+}
+
+article {
+  grid-column: 4 / 13;
+  grid-row: 2;
+}
+
+aside {
+  grid-column: 1 / 4;
+  grid-row: 2;
+}
+
+footer {
+  grid-column: 1 / 13;
+  grid-row: 3;
+}
+ +
+ +
+ +

{{ EmbedLiveSample('Grid_8', '100%', 400) }}

+ +

Si feu servir el Firefox Grid Inspector per superposar les línies de quadrícula del vostre disseny, podreu veure com funciona la nostra quadrícula de 12 columnes.

+ +

+
+ +

Posa a prova els teus coneixements

+ +

Hem arribat al final de l'article. Recordes la informació més rellevant? Trobaràs més proves per comprovar si retens aquesta informació abans de seguir a Test your skills: Grids.

+ +

Resum

+ +

Després de la lectura d’aquest article, hauries de ser capaç d’entendre com funcionen els dissenys de pàgina web amb CSS Grid. Per aprofundir en l'especificació, llegeix les nostres guies sobre Disposició amb Grid, que trobaràs a continuació.

+ +

Veieu també

+ + + +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Assessment", "Learn/CSS/CSS_layout")}}

diff --git a/files/ca/learn/css/css_layout/index.html b/files/ca/learn/css/css_layout/index.html new file mode 100644 index 0000000000..e74e5da0b9 --- /dev/null +++ b/files/ca/learn/css/css_layout/index.html @@ -0,0 +1,66 @@ +--- +title: Disseny CSS +slug: Learn/CSS/Disseny_CSS +tags: + - Beginner + - CSS + - Floating + - Grids + - Guide + - Landing + - Layout + - Learn + - Module + - Multiple column + - Positioning + - flexbox + - float +translation_of: Learn/CSS/CSS_layout +--- +
{{LearnSidebar}}
+ +

En aquest punt, ja hem examinat els fonaments de CSS, com l'estil del text, i l'estil i la manipulació de les caixes en el que estroba dins el contingut. Ara és hora de veure com col·locar les caixes al lloc correcte en relació amb la finestra de visualització, entre elles. Hem cobert els requisits previs necessaris de manera que ara podem aprofundir en el disseny CSS, provant diferents paràmetres de visualització, mètodes tradicionals de disseny que inclouen flotants i posicionament, i noves eines de disseny modernas, com flexbox.

+ +

Requisits previs

+ +

Abans de començar aquest mòdul, ja hauríeu de:

+ +
    +
  1. Estar familiaritzats amb els principis bàsics d' HTML, tal com es descriu en el mòdul Introducció a HTML.
    2. +
  2. Sentir-vos còmodes amb els fonaments CSS, tal com s'ha tractat a la Introducció a CSS.
    3. +
  3. Entendre com fer caixes d'estil.
    4. +
+ +
+

Nota: Si esteu treballant en un ordinador/tauleta/altre dispositiu on no té la capacitat de crear els vostres propis fitxers, podeu provar (la majoria) d'exemples de codi, en un programa de codificació en línia com JSBin o Thimble.

+
+ +

Guies

+ +

Aquests articles proporcionaran instruccions sobre les eines i tècniques fonamentals de disseny, disponibles a CSS.

+ +
+
Introducció al disseny CSS
+
Aquest article recapitularà algunes de les característiques de disseny de CSS que ja hem tocat en els mòduls anteriors, com els diferents valors de {{cssxref("display")}} - i introduïm alguns dels conceptes que cobrirem al llarg d'aquest mòdul.
+
Flotants
+
Originalment per a imatges flotants dins dels blocs de text, la propietat {{cssxref("float")}} s'ha convertit en una de les eines més utilitzades per crear diversos dissenys de columnes a les pàgines web. Aquest article ho explica tot.
+
Posicionament
+
El posicionament us permet treure elements del flux normal de disseny del document, i fer que es comportin de manera diferent, per exemple, asseguts un damunt de l'altre o quedant sempre al mateix lloc dins de la finestra de visualització del navegador. Aquest article explica els diferents valors de {{cssxref("position")}}, i com utilitzar-los.
+
Exemples pràctics de posicionament
+
Amb els conceptes bàsics de posicionament coberts en l'últim article, veurem, ara, com construir un parell d'exemples del món real per il·lustrar quin tipus de coses podeu fer amb el posicionament.
+
Flexbox
+
Una nova tecnologia, però amb suport, ara, bastant estès en tots els navegadors, Flexbox està començant a estar preparat per a un ús generalitzat. Flexbox proporciona eines que permeten crear ràpidament dissenys complexos i flexibles i característiques que històricament resulten difícils amb CSS. Aquest article explica tots els fonaments.
+
Graelles
+
Els sistemes de graella són una altra característica molt comuna que s'utilitza en els dissenys de CSS, que solen implementar-se mitjançant flotadors o altres característiques de disseny. Imagineu el disseny com un nombre establert de columnes (p. Ex. 4, 6 o 12) i, a continuació, ajusteu les columnes de contingut dins d'aquestes columnes imaginàries. En aquest article explorarem la idea bàsica sobre la creació d'un sistema de graella, mireu l'ús d'un sistema de graella confeccionat per un marc (framework) de graella i finalitzeu l'experimentació amb les Graelles CSS - una incipient nova funció de navegador fa que l'implementació de disseny de graella a la Web sigui molt més fàcil.
+
+ +

Avaluacions

+ +

Les següents avaluacions posaran a prova la vostra capacitat per dissenyar pàgines web amb CSS.

+ +
+
Creació d'un disseny flexible multicolumna (TBD)
+
Aquesta avaluació provarà la vostra capacitat per crear un disseny estàndard de diverses columnes, amb algunes característiques interessants.
+
Creació d'un widget de control fix (TBD)
+
Aquesta avaluació desafia la vostra comprensió del posicionament, demanant-vos que creeu un widget de control de posició fix que permeti a l'usuari accedir als controls d'una aplicació web independentment d'on es desplaci.
+
diff --git a/files/ca/learn/css/css_layout/introduction/index.html b/files/ca/learn/css/css_layout/introduction/index.html new file mode 100644 index 0000000000..88a924dc00 --- /dev/null +++ b/files/ca/learn/css/css_layout/introduction/index.html @@ -0,0 +1,700 @@ +--- +title: Introducció al disseny CSS +slug: Learn/CSS/Disseny_CSS/Introduccio_disseny_CSS +tags: + - Article + - Beginner + - CSS + - Floats + - Grids + - Introduction + - Layout + - Learn + - Positioning + - Tables + - flexbox + - flow +translation_of: Learn/CSS/CSS_layout/Introduction +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}
+ +

Aquest article recapitula algunes de les característiques de disseny CSS que ja hem tocat en els mòduls anteriors, com els diferents valors de {{cssxref ("display")}}, i introdueix alguns dels conceptes que exposem al llarg d'aquest mòdul.

+ + + + + + + + + + + + +
Prerequisits:Conceptes bàsics d'HTML (consulta la Introducció a HTML), i nocions de com funciona el CSS (consulta la Introducció al CSS).
Objectiu:Adquirir una visió general de les tècniques de disseny de pàgines web amb CSS. Cada tècnica es pot aprendre amb més detall en tutorials posteriors.
+ +

Les tècniques de disseny de pàgina web amb CSS ens permeten prendre els elements que hi ha en una pàgina web i controlar on estan posicionats en relació amb la seva posició predeterminada en el flux de disseny normal, els altres elements del voltant, l’element pare contenidor o la finestra de visualització / finestra principal. Les tècniques de disseny de pàgines que exposem amb més detall en aquest mòdul són:

+ + + +

Cada tècnica té els seus usos, avantatges i inconvenients, i cap tècnica s'ha dissenyat per utilitzar-se aïllada. Entenent per a què s’ha dissenyat cada mètode estaràs en una bona posició per entendre quina és la millor disposició per a cada tasca.

+ +

Flux normal

+ +

El flux normal és la manera com el navegador estableix les pàgines HTML de manera predeterminada quan no es fa res per controlar el disseny de pàgina. Vegem-ne un exemple HTML ràpid:

+ +
<p>I love my cat.</p>
+
+<ul>
+  <li>Buy cat food</li>
+  <li>Exercise</li>
+  <li>Cheer up friend</li>
+</ul>
+
+<p>The end!</p>
+ +

Per defecte, el navegador mostra aquest codi de la manera següent:

+ +

{{ EmbedLiveSample('Normal_flow', '100%', 200) }}

+ +

Tingues en compte que aquí l'HTML es mostra en l'ordre exacte en què apareix en el codi d’origen, amb elements apilats l’un sobre l’altre: el primer paràgraf, seguit de la llista no ordenada, seguit del segon paràgraf.

+ +

Per a molts dels elements de la pàgina el flux normal crea exactament la disposició que cal, però per dissenys més complexos et farà falta alterar aquest comportament per defecte fent ús d'alguna de les eines disponibles en CSS. Començar amb un document HTML ben estructurat és molt important, donat que així pots treballar amb com les coses es disposen per defecte, en comptes de barallar-t'hi.

+ +

Les tècniques de disseny tendeixen a substituir aquest comportament predeterminat, utilitzant les tècniques següents:

+ + + +

La propietat display

+ +

Els mètodes principals per aconseguir un disseny de pàgina amb CSS són tots els valors de la propietat display (visualització). Aquesta propietat ens permet canviar la manera per defecte com es mostren les coses. Tot el que hi ha al flux normal té un valor de display, que s'utilitza com la forma per defecte en què es comporten els elements que hi estan configurats. Per exemple, el fet que els paràgrafs en català es mostrin un per sota de l’altre es deu al fet que s’estilen amb display: block. Si creeu un enllaç al voltant d'un text dins d'un paràgraf, aquest enllaç romandrà en línia amb la resta del text i no es dividirà en cap línia nova. Això es deu al fet que l'element {{htmlelement("a")}} és display: inline per defecte.

+ +

Pots canviar aquest comportament de visualització per defecte. Per exemple, l'element {{htmlelement("li")}} és display: block per defecte, és a dir, que els elements de la llista es mostren l'un a sota de l'altre al nostre document en català. Si canviem el valor de display a inline, ara es mostraran un al costat de l’altre, com ho farien les paraules en una frase. El fet que puguis canviar el valor de display de qualsevol element significa que pots triar elements HTML pel seu significat semàntic, sense preocupar-te de com quedaran. La seva aparença és una cosa que es pot canviar.

+ +

A més de poder canviar la presentació predeterminada, canviant un element de block a inline i viceversa, hi ha alguns mètodes de disseny més grans que comencen com amb un valor de display. Tanmateix, quan els feu servir, generalment haureu d'invocar propietats addicionals. Els dos valors més importants per als nostres propòsits a l’hora de parlar del disseny són display: flex i display: grid.

+ +

Caixes flexibles (Flexbox)

+ +

Flexbox és el nom breu del mòdul de disseny de caixa flexible, dissenyat per facilitar-nos la distribució de les coses en una dimensió, sigui com a fila o com a columna. Per utilitzar flexbox, apliqueu display: flex a l'element pare dels elements que vulgueu disposar; tots els seus fills directes es converteixen en ítems flexibles. Ho podem veure en un exemple senzill.

+ +

L'etiquetatge HTML següent ens proporciona un element contenidor, amb una classe wrapper, dins del qual hi ha tres elements {{htmlelement("div")}}. Per defecte, es mostrarien com a elements de bloc, un a sota de l’altre, al nostre document.

+ +

Tanmateix, si afegim display: flex al pare, els tres elements ara es disposen en columnes. Això es deu al fet que es converteixen en ítems flexibles (flex items) i es veuen afectats per alguns valors inicials que flexbox estableix al contenidor flex. Es mostren en una fila, perquè el valor inicial de {{cssxref("flex-direction")}} establert al seu pare és row. Tots semblen estirar-se fins a l’alçada de l’element més alt, perquè el valor inicial de la propietat {{cssxref("align-items")}} establert al seu pare és stretch. Això significa que els ítems s’estenen fins a l’alçada del contenidor flex, que en aquest cas està definida per l’element més alt. Tots els articles s’alineen a l’inici del contenidor, deixant qualsevol espai addicional al final de la fila.

+ +
+ + +
.wrapper {
+  display: flex;
+}
+
+ +
<div class="wrapper">
+  <div class="box1">One</div>
+  <div class="box2">Two</div>
+  <div class="box3">Three</div>
+</div>
+
+
+ +

{{ EmbedLiveSample('Flex_1', '300', '200') }}

+ +

A més de les propietats anteriors que es poden aplicar al contenidor flex, hi ha propietats que es poden aplicar als ítems flex. Aquestes propietats, entre altres coses, poden canviar la manera com es “flexionen” els ítems, cosa que els permet expandir-se i contraure’s per adaptar-se a l’espai disponible.

+ +

Com a exemple senzill d'això, podem afegir la propietat {{cssxref ("flex")}} a tots els nostres elements fill, amb un valor d'1. Això farà que tots els ítems creixin i omplin el contenidor, en comptes de deixar espai al final. Si hi ha més espai, els elements s’ampliaran; si hi ha menys espai es tornaran més estrets. A més, si afegiu un altre element al marcatge, tots els elements es faran més petits per fer-hi espai; ajustaran la seva mida per ocupar la mateixa quantitat d’espai, sigui quin sigui.

+ +
+ + +
.wrapper {
+    display: flex;
+}
+
+.wrapper > div {
+    flex: 1;
+}
+
+ +
<div class="wrapper">
+    <div class="box1">One</div>
+    <div class="box2">Two</div>
+    <div class="box3">Three</div>
+</div>
+
+
+ +

{{ EmbedLiveSample('Flex_2', '300', '200') }}

+ +
+

Nota: Aquesta ha estat una molt breu introducció al que és possible amb Flexbox. Per obtenir més informació, consulteu el nostre article de Flexbox.

+
+ +

Disposició en graella (Grid)

+ +

Mentre que Flexbox està dissenyat per al disseny unidimensional, el disseny de quadrícula està pensat per a dues dimensions: alinear les coses en files i columnes.

+ +

Una vegada més, podeu activar el disseny de quadrícula amb un valor específic de display - display: grid. L'exemple següent utilitza un marcatge similar a l'exemple de flex, amb un contenidor i alguns elements fills. A més d’utilitzar display: grid, també definim files i columnes al pare mitjançant les propietats {{cssxref("grid-template-rows")}} i {{cssxref("grid-template-columns")}}, respectivament. Hem definit tres columnes cadascuna d'1fr i dues files de 100px. No necessito posar cap regla sobre els elements infantils; es col·loquen automàticament a les cel·les que ha creat la nostra graella.

+ +
+ + +
.wrapper {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 100px 100px;
+    grid-gap: 10px;
+}
+
+ +
<div class="wrapper">
+    <div class="box1">One</div>
+    <div class="box2">Two</div>
+    <div class="box3">Three</div>
+    <div class="box4">Four</div>
+    <div class="box5">Five</div>
+    <div class="box6">Six</div>
+</div>
+
+
+ +

{{ EmbedLiveSample('Grid_1', '300', '330') }}

+ +

Un cop tingueu una graella, podeu col·locar-hi explícitament els elements, en lloc de confiar en el comportament de la ubicació automàtica que acabem de veure. Al segon exemple que teniu a continuació hem definit la mateixa graella, però aquesta vegada amb tres elements fills. Hem definit la línia inicial i final de cada element mitjançant les propietats {{cssxref("grid-column")}} i {{cssxref("grid-row")}}. Això fa que els elements abastin diverses pistes.

+ +
+ + +
.wrapper {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 100px 100px;
+    grid-gap: 10px;
+}
+
+.box1 {
+    grid-column: 2 / 4;
+    grid-row: 1;
+}
+
+.box2 {
+    grid-column: 1;
+    grid-row: 1 / 3;
+}
+
+.box3 {
+    grid-row: 2;
+    grid-column: 3;
+}
+
+ +
<div class="wrapper">
+    <div class="box1">One</div>
+    <div class="box2">Two</div>
+    <div class="box3">Three</div>
+</div>
+
+
+ +

{{ EmbedLiveSample('Grid_2', '300', '330') }}

+ +
+

Nota: Aquests dos exemples són només una petita part de la potència del disseny de graella; per obtenir més informació, consulteu el nostre article sobre Graelles (Grids).

+
+ +

La resta d'aquesta guia cobreix altres mètodes de disseny, que són menys importants per a les principals estructures de disseny de la pàgina, però que poden ajudar-vos a realitzar tasques específiques. En comprendre la naturalesa de cada tasca de disseny, aviat trobareu que, quan mireu un component concret del vostre disseny, el tipus de disseny més adequat sovint serà clar.

+ +

Elements flotants (Floats)

+ +

Flotar un element canvia el comportament d’aquest element i dels elements de nivell de bloc que el segueixen en un flux normal. L'element es mou cap a l'esquerra o cap a la dreta i s'elimina del flux normal i el contingut circumdant flota al voltant de l'element flotat.

+ +

La propietat {{cssxref("float")}} té quatre valors possibles:

+ + + +

A l'exemple següent, flotem un <div> a l'esquerra i li donem un {{cssxref("margin")}}} per la dreta per apartar el text de l'element. Això ens dona l’efecte del text rodejant aquesta caixa i és la major part del que heu de saber sobre els elements flotants tal com s’utilitzen en el disseny web modern.

+ +
+ + +
<h1>Simple float example</h1>
+
+<div class="box">Float</div>
+
+<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
+
+
+ +
+.box {
+    float: left;
+    width: 150px;
+    height: 150px;
+    margin-right: 30px;
+}
+
+
+ +

{{ EmbedLiveSample('Float_1', '100%', 600) }}

+ +
+

Nota: Els floats s’expliquen completament a la nostra lliçó sobre les propietats float i clear. Abans de tècniques com Flexbox i Grid es feien servir floats com a mètode per crear dissenys de columnes. És possible que encara trobeu aquests mètodes al web; els tractarem a la lliçó sobre mètodes de disseny heretats.

+
+ +

Tècniques de posicionament

+ +

El posicionament us permet moure un element des d'on es col·locaria quan estigués en un flux normal a una altra ubicació. El posicionament no és un mètode per crear el disseny principal de la pàgina, sinó que es tracta més de gestionar i ajustar la posició d’elements específics de la pàgina.

+ +

Tot i això, hi ha tècniques útils per a certs patrons de disseny que depenen de la propietat {{cssxref("position")}}. La comprensió del posicionament també ajuda a entendre el flux normal, i què significa moure un element fora del flux normal.

+ +

Hi ha cinc tipus de posicionament principals, que hauries de conèixer:

+ + + +

Un exemple senzill de posicionament

+ +

Per familiaritzar-te amb aquestes tècniques de disseny de pàgina, el mostrem un parell d'exemples ràpids. Tots els nostres exemples tenen el mateix codi HTML, que és el següent:

+ +
<h1>Positioning</h1>
+
+<p>I am a basic block level element.</p>
+<p class="positioned">I am a basic block level element.</p>
+<p>I am a basic block level element.</p>
+ +

Apliquem a aquest codi HTML un estil predeterminat amb el codi CSS següent:

+ +
body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+  background: aqua;
+  border: 3px solid blue;
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: red;
+  border: 1px solid black;
+}
+ +

La sortida que dona és la següent:

+ +

{{ EmbedLiveSample('Simple_positioning_example', '100%', 300) }}

+ +

Posicionament Relatiu (Relative positioning)

+ +

El posicionament relatiu et permet desplaçar un element de la posició que tindria per defecte en flux normal. Això vol dir que pots assolir una tasca com ara moure una icona cap avall de manera que quedi alineada amb una etiqueta de text. Per fer-ho, podríem afegir la següent regla per afegir un posicionament relatiu:

+ +
.positioned {
+  position: relative;
+  background: yellow;
+  top: 30px;
+  left: 30px;
+}
+ +

Aquí hem donat al nostre paràgraf del mig un valor {{cssxref("position")}} de relative; això no fa res per si mateix, de manera que també afegim les propietats {{cssxref("top")}} i {{cssxref("left")}}, que serveixen per a moure l'element afectat cap avall i cap a la dreta; això podria semblar el contrari del que s'esperava, però cal pensar que l'element és empès des dels costats esquerre i superior, cosa que fa que es mogui cap a la dreta i avall.

+ +

Si afegeixes aquest codi, es mostra el resultat següent:

+ + + +

{{ EmbedLiveSample('Relative_positioning_example', '100%', 300) }}

+ +

Posicionament absolut (Absolute)

+ +

El posicionament absolut s’utilitza per eliminar completament un element del flux normal i col·locar-lo mitjançant desplaçaments des de les vores d’un bloc contenidor.

+ +

Tornant al nostre exemple original no posicionat, podríem afegir la regla CSS següent per a implementar el posicionament absolut:

+ +
.positioned {
+  position: absolute;
+  background: yellow;
+  top: 30px;
+  left: 30px;
+}
+ +

Aquí hem donat al nostre paràgraf del mig un valor {{cssxref("position")}} d'absolute, i les mateixes propietats {{cssxref("top")}} i {{cssxref("left")}}, com abans. L'addició d'aquest codi, però, dona el resultat següent:

+ + + +

{{ EmbedLiveSample('Absolute_positioning_example', '100%', 300) }}

+ +

Això és molt diferent. L'element ha quedat totalment separat de la resta del disseny de la pàgina i s’hi ha col·locat a sobre en l’extrem superior. Els altres dos paràgrafs ara es disposen junts, com si el germà posicionat no existís. Les propietats {{cssxref("top")}} i {{cssxref("left")}} tenen un efecte diferent sobre elements amb posicionament absolut que sobre elements amb posicionament relatiu. En aquest cas, s'especifica la distància a la qual l'element s’ha de situar dels costats superior i esquerre de la pàgina. És possible canviar l'element pare que es converteix en aquest contenidor i ho veurem a la lliçó sobre posicionament.

+ +

Posicionament fix (fixed positioning)

+ +

El posicionament fix elimina el nostre element del flux de documents de la mateixa manera que el posicionament absolut. Tanmateix, en lloc d'aplicar els desplaçaments des del contenidor, s'apliquen des de la finestra gràfica. Com que l'element es manté fix en relació amb la finestra gràfica, podem crear efectes com un menú que es manté fix a mesura que la pàgina es desplaça per sota.

+ +

Per a aquest exemple, el nostre HTML inclou tres paràgrafs de text, per tal que puguem fer que la pàgina es desplaci, i un quadre al qual donarem position: fixed.

+ +
<h1>Fixed positioning</h1>
+
+<div class="positioned">Fixed</div>
+
+<p>Paragraph 1.</p>
+<p>Paragraph 2.</p>
+<p>Paragraph 3.</p>
+
+ +
+ + +
.positioned {
+    position: fixed;
+    top: 30px;
+    left: 30px;
+}
+
+ +

{{ EmbedLiveSample('Fixed_1', '100%', 200) }}

+ +

Posicionament enganxós (sticky positioning)

+ +

El posicionament enganxós és el mètode de posicionament final que tenim a la nostra disposició. Combina el posicionament estàtic per defecte amb el posicionament fix. Quan un element té position: sticky, es desplaçarà en flux normal fins que arribi al desplaçament sobre la finestra de visualització del navegador que definit. En aquest moment es queda "enganxat" com si tingués position: fixed aplicat.

+ +
+ + +
.positioned {
+  position: sticky;
+  top: 30px;
+  left: 30px;
+}
+
+ +

{{ EmbedLiveSample('Sticky_1', '100%', 200) }}

+ +
+

Nota: per aprendre més sobre posicionament, aneu a l'article sobre posicionament.

+
+ +

Taules CSS

+ +

Les taules HTML són perfectes per a mostrar dades tabulades, però fa molts anys, fins i tot abans que el CSS bàsic fos compatible de manera fiable entre els navegadors, els desenvolupadors web solien utilitzar taules per als dissenys de pàgines web senceres; col·locaven els encapçalaments, els peus de pàgina, les diferents columnes, etc., en files i columnes d’una taula. Això va funcionar en el moment, però presenta molts problemes: els dissenys de taules no són flexibles, l’etiquetatge és feixuc, són difícils de depurar, i són semànticament erronis (els usuaris de lectors de pantalla, per exemple, tenen problemes per navegar en dissenys de pàgina web amb taules).

+ +

La forma en què es mostra una taula en una pàgina web quan utilitzeu el marcatge de taula es deu a un conjunt de propietats CSS que defineixen el disseny de la taula. Aquestes propietats es poden utilitzar per disposar elements que no són taules, un ús que de vegades es descriu com "utilitzar taules CSS".

+ +

L'exemple següent mostra un d'aquests usos; L'ús de taules CSS per al disseny s'hauria de considerar un mètode heretat en aquest moment, per a aquelles situacions en què tingueu navegadors molt antics sense compatibilitat amb Flexbox o Grid.

+ +

Vegem-ne un exemple. Primer, un marcatge senzill que crea un formulari HTML. Cada element d'entrada té una etiqueta i també hem inclòs un text dins d'un paràgraf. Cada parell label/input està envoltat d'un element {{htmlelement("div")}}, amb finalitats de disseny.

+ +
<form>
+  <p>First of all, tell us your name and age.</p>
+  <div>
+    <label for="fname">First name:</label>
+    <input type="text" id="fname">
+  </div>
+  <div>
+    <label for="lname">Last name:</label>
+    <input type="text" id="lname">
+  </div>
+  <div>
+    <label for="age">Age:</label>
+    <input type="text" id="age">
+  </div>
+</form>
+ +

Ara afegim el CSS al nostre exemple. La major part del CSS és bastant comú, excepte els usos de la propietat {{cssxref("display")}}. A l’element {{htmlelement("form")}} i als elements {{htmlelement("div")}}, {{htmlelement("label")}} i {{htmlelement("input")}} se'ls hi ha dit que es mostrin com una taula, files de la taula i cel·les de la taula, respectivament; bàsicament actuaran com un marcatge de taula HTML que alinea les etiquetes de text i les entrades de manera predeterminada. Tot el que hem de fer és afegir una mica de mida, marges, etc. perquè tot es vegi una mica més agradable, i ja haurem acabat.

+ +

Observa que s’ha assignat al paràgraf de descripció (caption) la declaració display: table-caption;, que fa que aquest paràgraf actuï com un títol de taula ({{htmlelement("caption")}}), i també caption-side: bottom;, que indica que el títol es posa a la part inferior de la taula amb finalitats d'estil, encara que va abans de les entrades de la taula en l’ordre del codi d’origen. Això permet una mica de flexibilitat.

+ +
html {
+  font-family: sans-serif;
+}
+
+form {
+  display: table;
+  margin: 0 auto;
+}
+
+form div {
+  display: table-row;
+}
+
+form label, form input {
+  display: table-cell;
+  margin-bottom: 10px;
+}
+
+form label {
+  width: 200px;
+  padding-right: 5%;
+  text-align: right;
+}
+
+form input {
+  width: 300px;
+}
+
+form p {
+  display: table-caption;
+  caption-side: bottom;
+  width: 300px;
+  color: #999;
+  font-style: italic;
+}
+ +

Això ens dona el resultat següent:

+ +

{{ EmbedLiveSample('CSS_tables', '100%', '170') }}

+ +

També pots veure aquest exemple en viu en el fitxer css-tables-example.html (i també consultar-ne el codi d’origen).

+ +

Disseny multicolumna

+ +

El mòdul de disseny de múltiples columnes ens proporciona una manera de distribuir contingut en columnes, de manera similar a com flueix el text en un diari. Tot i que la lectura de columnes cap amunt i cap avall és menys útil en un context web, ja que no voleu obligar els usuaris a desplaçar-se cap amunt i cap avall, la disposició del contingut en columnes pot ser una tècnica útil.

+ +

Per convertir un bloc en un contenidor multicolumna, utilitzem la propietat {{cssxref("column-count")}}, que indica al navegador quantes columnes voldríem tenir o bé {{cssxref("column-width" )}}, que indica al navegador que ompli el contenidor amb tantes columnes d'almenys aquesta amplada.

+ +

A l'exemple següent, comencem amb un bloc d'HTML dins d'un element <div> que conté una classe de container.

+ +
<div class="container">
+    <h1>Multi-column layout</h1>
+
+    <p>Paragraph 1.</p>
+    <p>Paragraph 2.</p>
+
+</div>
+ +

Utilitzem una column-width (amplada de columna) de 200 píxels en aquest contenidor, cosa que provoca que el navegador creï tantes columnes de 200 píxels com càpiguen al contenidor i, a continuació, comparteixi l’espai restant entre les columnes creades.

+ +
+ + +
    .container {
+        column-width: 200px;
+    }
+
+ +

{{ EmbedLiveSample('Multicol_1', '100%', 200) }}

+ +

Resum

+ +

Aquest article ha proporcionat un breu resum de totes les tecnologies de disseny que has de conèixer. Continua llegint per a obtenir més informació sobre cadascuna d’aquestes tecnologies!

+ +

{{NextMenu("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}

diff --git a/files/ca/learn/css/css_layout/normal_flow/index.html b/files/ca/learn/css/css_layout/normal_flow/index.html new file mode 100644 index 0000000000..ac44f6a95a --- /dev/null +++ b/files/ca/learn/css/css_layout/normal_flow/index.html @@ -0,0 +1,95 @@ +--- +title: Flux normal +slug: Learn/CSS/Disseny_CSS/Flux_normal +translation_of: Learn/CSS/CSS_layout/Normal_Flow +--- +
{{LearnSidebar}}
+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}

+ +

Aquest article explica el flux normal o la manera com es disposen els elements de la pàgina web si tu no en canvies la disposició.

+ + + + + + + + + + + + +
Prerequisits:Conceptes bàsics d'HTML (consulta la Introducció a l'HTML) i nocions de com funciona el CSS (consulta la Introducció al CSS).
Objectiu:Entendre la manera com els navegadors disposen per defecte els elements en les pàgines web abans que l'usuari comenci a fer-hi canvis.
+ +

Com es detalla en l’últim article d’introducció al disseny de pàgines web, els elements d’una pàgina web es distribueixen segons el flux normal si no s'hi aplica CSS que en canviï el comportament. Com ja hem començat a veure, pots canviar la manera com es comporten els elements, bé ajustant-ne la posició dins d’aquest flux normal, o bé suprimint-los-en del tot. Un document sòlid i ben estructurat que sigui llegible en el sentit del flux normal és la millor manera de començar qualsevol pàgina web. Garanteix que el contingut serà llegible, fins i tot si l’usuari fa servir un navegador molt limitat o un dispositiu com un lector de pantalla, que llegeix el contingut de la pàgina. A més, com que el flux normal està dissenyat per a fer llegible un document, començar d'aquesta manera significa que treballes amb el document en lloc de lluitar-hi en contra perquè hi fas canvis d’ordre.

+ +

Abans d’aprofundir més en diferents mètodes de disseny, val la pena revisar algunes de les qüestions que has estudiat en mòduls anteriors pel que fa al flux normal dels documents.

+ +

Com es disposen per defecte els elements?

+ +

Primer de tot s'agafa el contingut dels elements de les caixes, i a continuació s’hi afegeixen l'àrea de farciment, les vores i els marges al voltant. Es tracta del model de caixes, que ja coneixem.

+ +

De manera predeterminada, el contingut d'un element de nivell de bloc és del 100% de l'amplada de l’element pare, i l‘alçada està determinada pel contingut. Els elements de línia tenen l’amplada i l’alçada determinades pel contingut. En els elements de línia no pots establir l’amplada i l’alçada, senzillament s’inclouen dins del contingut d’elements de nivell de bloc. Si vols controlar la mida d'un element de línia d'aquesta manera, has de configurar-lo perquè es comporti com un element de nivell de bloc amb display: block; (o fins i tot, display: inline-block;, que barreja característiques de tots dos).

+ +

Això pel que fa a elements individuals; però què passa amb la manera com interactuen els elements entre ells? El flux normal del disseny d’una pàgina web (que s’esmenta en l’article d’introducció al disseny de pàgines web) és el sistema pel qual els elements s’ubiquen dins de la finestra gràfica del navegador. Per defecte, els elements de nivell de bloc estan configurats en la direcció del flux dels blocs, en funció del mode d'escriptura de l’element pare (inicialment: en horitzontal): cada element de bloc apareix en una línia nova per sota de l’anterior i estan separats per qualsevol marge que s’hi hagi establert. Per tant, en català, o en qualsevol altre sistema d'escriptura horitzontal i de dalt a baix, els elements de nivell de bloc es disposen verticalment.

+ +

Els elements de línia es comporten de manera diferent: no es disposen en línies noves; en lloc d’això, es disposen sobre la mateixa línia que l’anterior i que qualsevol contingut textual contigu (o que el delimiti), mentre hi hagi espai dins de l’amplada de l’element pare de nivell de bloc. Quan ja no hi ha espai, el text o els elements que desborden passen a una línia nova.

+ +

Si dos elements adjacents tenen configurat un marge i els marges dels dos es toquen, predomina el que és més gran, i el més petit desapareix; es diu que els marges col·lapsen, i això també ho coneixem.

+ +

Vegem un exemple senzill que il·lustra tot això:

+ +
+
<h1>Flux bàsic d’un document</h1>
+
+<p>Sóc un element de nivell de bloc bàsic. Els meus elements de nivell de bloc adjacents es distribueixen en línies noves per sota meu.</p>
+
+<p>Per defecte ocupem el 100% de l'amplada de l'element pare i som tan alts com el contingut dels nostres elements fill. L‘amplada i l’alçada total són el nostre contingut + l’àrea de farciment + l’amplada/alçada de la vora.</p>
+
+<p>Tenim marges que ens separen. Però pel col·lapse dels marges, ens separa només l'amplada d'un dels dos marges, però no l’amplada dels dos.</p>
+
+<p>Els elements de línia <span> com aquest </span> i <span> aquest </span> es disposen sobre la mateixa línia que els altres i que els nodes de text adjacents, si hi ha espai en la mateixa línia. Quan els elements de línia desborden, <span>continuen per la línia següent, si és possible (com el que conté aquest text)</span>; o si no és possible, passen a una línia nova, com és el cas d’aquesta imatge: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p>
+ +
body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+  background: rgba(255,84,104,0.3);
+  border: 2px solid rgb(255,84,104);
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: white;
+  border: 1px solid black;
+}
+
+ +

{{ EmbedLiveSample('Normal_Flow', '100%', 500) }}

+ +

Resum

+ +

Ara que saps com funciona el flux normal del disseny de pàgina i quines són les opcions que el navegador estableix per defecte, avança i descobreix com pots canviar aquesta visualització per defecte i crear la composició de pàgina que necessita el teu disseny de pàgina web.

+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}

+ +

En aquest mòdul

+ + diff --git a/files/ca/learn/css/css_layout/positioning/index.html b/files/ca/learn/css/css_layout/positioning/index.html new file mode 100644 index 0000000000..213293ff4e --- /dev/null +++ b/files/ca/learn/css/css_layout/positioning/index.html @@ -0,0 +1,467 @@ +--- +title: Posicionament +slug: Learn/CSS/Disseny_CSS/Posicionament +tags: + - Article + - Beginner + - CSS + - CodingScripting + - Guide + - Layout + - Positioning + - absolute + - fixed + - relative +translation_of: Learn/CSS/CSS_layout/Positioning +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout")}}
+ +

El posicionament permet treure elements del flux normal de disseny del document, i fer que es comportin de manera diferent, per exemple, asseient-se un damunt de l'altre o mantenint-se sempre al mateix lloc dins de la finestra de visualització del navegador. Aquest article explica els diferents valors de {{cssxref("position")}}, i com utilitzar-los.

+ + + + + + + + + + + + +
Requisits previs:Conceptes bàsics d'HTML (estudi Introducció a HTML), i una idea de com funciona CSS (estudi Introducció a CSS).
Objectiu:Aprendre com funciona el posicionament CSS.
+ +

Flux del document

+ +

El posicionament és un tema bastant complex, per tant, abans de submergir-nos en el codi, anem a revisar i ampliar una mica de teoria de disseny per donar-nos una idea de com funciona això.

+ +

En primer lloc, les caixes d'elements individuals es defineixen tenint en compte el contingut dels elements, afegint-hi qualsevol farciment, vora i marge al voltant d'ells - és a dir, aquell model de caixa nou, que vam mirar abans. Per defecte, el contingut d'un element de nivell de bloc és del 100% de l'ample de l'element pare i tan alt com el seu contingut. Els elements en línia són tan alts  i tan amples com el seu contingut. No es pot definir l'ample o alçada en elements en línia - simplement s'assenten dins del contingut dels elements de nivell de bloc. Si es vol controlar la mida d'un element en línia d'aquesta manera, s'ha d'establir perquè es comporti com un element de nivell de bloc amb display: block;.

+ +

Això explica els elements individuals, però què passa amb els elements que interactuen els uns amb els altres? El flux de disseny normal (esmentat en l'article de presentació de disseny) és el sistema mitjançant el qual es col·loquen els elements dins de la finestra de visualització del navegador. De manera predeterminada, els elements de nivell de bloc es distribueixen verticalment a la finestra de visualització: cadascun d'ells apareixerà en una nova línia,per sota d l'última i se separaran per qualsevol marge que s'estableixi en ells.

+ +

Els elements en línia es comporten de manera diferent - no apareixen en noves línies; en canvi, s'assenten en la mateixa línia que els altres i amb qualsevol contingut de text adjacent (o embolicat), sempre que hi hagi espai perquè ho facin dins de l'amplada de l'element a nivell de bloc pare. Si no hi ha espai, el text desbordat o els elements es desplacen cap a una nova línia.

+ +

Si dos elements adjacents tenen un marge establert i els dos marges es toquen, el més gran dels dos es queda i el més petit desapareix - això es diu col.lapsació del marge, i també ho hem conegut abans.

+ +

Vegem un exemple senzill que expliqui tot això:

+ +
<h1>Basic document flow</h1>
+
+<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p>
+
+<p>By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.</p>
+
+<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p>
+
+<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements will <span>wrap onto a new line if possible (like this one containing text)</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p>
+ +
body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+  background: aqua;
+  border: 3px solid blue;
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: red;
+  border: 1px solid black;
+}
+ +

{{ EmbedLiveSample('Document_flow', '100%', 500) }}

+ +

Revisarem aquest exemple diverses vegades al llarg d'aquest article, ja que mostrarem els efectes de les diferents opcions de posicionament disponibles per a nosaltres.

+ +

Ens agradaria que seguíssiu els exercicis en el vostre ordinador, si és possible - agafeu una còpia de 0_basic-flow.html del nostre repositori de Github (codi font aquí) i utilitzeu-lo com a punt de partida.

+ +

Introducció al posicionament

+ +

Tota la idea del posicionament és permetre'ns anul·lar el comportament bàsic del flux de documents descrit anteriorment, per produir efectes interessants. Què passa si voleu canviar lleugerament la posició d'algunes caixes dins d'un disseny des de la seva posició de flux de disseny per defecte, per donar-li un toc lleugerament peculiar i molest? El posicionament és la vostra eina. O si voleu crear un element d'interfície d'usuari que floti a la part superior d'altres parts de la pàgina i/o sempre es trobi al mateix lloc dins de la finestra del navegador, sense importar quant es desplaça la pàgina? El posicionament fa possible aquest treball de disseny.

+ +

Hi ha una sèrie de diferents tipus de posicionament que podeu implementar en elements HTML. Per fer un tipus específic de posicionament actiu en un element, utilitzem la propietat {{cssxref("position")}}.

+ +

Posicionament estàtic (Static)

+ +

El posicionament estàtic és el valor predeterminat que cada element obté - significa "posar l'element en la seva posició normal en el flux del disseny del document - res especial per veure aquí".

+ +

Per demostrar això i preparar el vostre exemple per a futures seccions, primer afegiu una class de positioned al segon {{htmlelement("p")}} en l'HTML:

+ +
<p class="positioned"> ... </p>
+ +

Ara afegiu la següent regla a la part inferior del vostre CSS:

+ +
.positioned {
+   position: static;
+  background: yellow;
+}
+ +

Si ara deseu i actualitzeu, no veureu cap diferència en absolut, excepte el color de fons actualitzat del segon paràgraf. Està bé - com hem dit abans, el posicionament estàtic és el comportament predeterminat!

+ +
+

Nota: Podeu veure l'exemple en aquest moment en directe a 1_static-positioning.html (vegeu el codi font).

+
+ +

Posicionament relatiu (Relative)

+ +

El posicionament relatiu és el primer tipus de posició que veurem. Això és molt semblant al posicionament estàtic, tret que una vegada que l'element posicionat ha tingut el seu lloc en el flux de disseny normal, podeu modificar la seva posició final, incloent-hi la superposició d'altres elements a la pàgina. Seguiu i actualitzeu la declaració de posició del vostre codi:

+ +
position: relative;
+ +

Si deseu i actualitzeu en aquesta etapa, no veureu cap canvi en el resultat en absolut, així, com modifiqem la posició de l'element? Heu d'utilitzar les propietats {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} i {{cssxref("right")}} , Que explicarem en la següent secció.

+ +

Introduir top, bottom, left i right

+ +

{{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, and {{cssxref("right")}} s'utilitzen juntament amb {{cssxref("position")}} per especificar exactament a on moure l'element posicionat. Per provar-ho, afegiu les següents declaracions a la regla .positioned al vostre CSS:

+ +
top: 30px;
+left: 30px;
+ +
+

Nota: Els valors d'aquestes propietats pot prendre totes les unitats que s'esperaria lògicament - píxels, mm, rems,%, etc.

+
+ +

Si ara deseu i actualitzeu, obtindreu un resultat com aquest:

+ + + +

{{ EmbedLiveSample('Introducing_top_bottom_left_and_right', '100%', 500) }}

+ +

Genial, eh? D'acord, aixó es probablement el que no esperaves: per què s'ha mogut a la part inferior i la dreta si s'especificat a dalt i a l'esquerra? Pot sonar Il·lògic inicialment, però aquesta és la forma en què funciona el posicionament relatiu: cal pensar en una força invisible que empeny el costat de la caixa posicionada, movent-la en la direcció oposada. Així, per exemple, si especifiqueu un top: 30px;, una força empeny la part superior de la caixa, fent que es mogui cap avall en 30px.

+ +
+

Nota: Podeu veure l'exemple en aquest moment en directe a 2_relative-positioning.html (vegeu el codi font).

+
+ +

Posicionament absolut (Absolute)

+ +

El posicionament absolut porta resultats molt diferents. Intenteu canviar la declaració de posició del vostre de la manera següent:

+ +
position: absolute;
+ +

Si ara deseu i actualitzeu, obtindreu un resultat com aquest:

+ + + +

{{ EmbedLiveSample('Absolute_positioning', '100%', 420) }}

+ +

En primer lloc, tingueu en compte que el buit on l'element posicionat hauria d'estar en el flux del document ja no hi és - el primer i el tercer element s'han tancat junts, com que ja no existeix!. Bé, en certa manera, això és cert. Un element absolutament posicionat ja no existeix en el flux de disseny normal del document. En lloc d'això, s'asseu a la seva pròpia capa separada de tota la resta. Això és molt útil - vol dir que podem crear funcions d'interfície d'usuari aïllades que no interfereixin amb la posició d'altres elements de la pàgina - per exemple, les caixes d'informació emergents i els menús de control, els panells de rollover, les funcions d'interfície d'usuari que es poden arrossegar i deixar anar a qualsevol lloc en la pàgina, i així successivament.

+ +

En segon lloc, observeu que la posició de l'element ha canviat - això es deu al fet que {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} i {{cssxref("right")}} es comporten d'una manera diferent amb el posicionament absolut. En lloc d'especificar la direcció en què l'element s'ha de moure, especifiquen la distància que ha de tenir l'element en cada costat dels elements que contingui. Així que, en aquest cas, estem dient que l'element absolutament posicionat hauria de situar-se 30px des de la part superior del "element que conté" i 30px des de l'esquerra.

+ +
+

Nota: Podeu utilitzar {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} i {{cssxref("right")}} per canviar la mida dels elements si és necessari. Intenteu establir top: 0; bottom: 0; left: 0; right: 0; and margin: 0; en els elements posicionats i veureu què passa! Torneu a posar-ho de nou després...

+
+ +
+

Nota: Sí, els marges encara afecten els elements posicionats. Tanmateix, el col·lapse de marges no existeix.

+
+ +
+

Nota: Podeu veure l'exemple en aquest moment en directe a 3_absolute-positioning.html (vegeu el codi font).

+
+ +

Contextos de posicionament

+ +

Quin element és el "element que conté" un element absolutament posicionat? Per defecte, és l'element {{htmlelement("html")}} - l'element posicionat està niat dins del {{htmlelement("body")}} en la font HTML, però en el disseny final, es troba a 30px de distància des de la part superior i esquerra de la vora de la pàgina, que és l'element {{htmlelement("html")}}. Això s'anomena més exactament com a context de posicionament de l'element.

+ +

Podem canviar el context de posicionament - quin element posiciona l'element absolutament posicionat en relació a. Això es fa establint el posicionament en un dels altres avantpassats del element - un dels elements que està niat a l'interior (no es pot col·locar en relació amb un element que no està niat a l'interior). Per demostrar-ho, afegiu la següent declaració a la regla del cos:

+ +
position: relative;
+ +

Això hauria de donar el següent resultat:

+ + + +

{{ EmbedLiveSample('Positioning_contexts', '100%', 420) }}

+ +

L'element posicionat ara es troba en relació amb l'element {{htmlelement("body")}}.

+ +
+

Nota: Podeu veure l'exemple en aquest moment en directe a 4_positioning-context.html (vegeu el codi font).

+
+ +

Introducció a z-index

+ +

Tot aquest posicionament absolut és una bona diversió, però hi ha una altra cosa que encara no hem considerat - quan els elements comencen a superposar-se, què determina que uns elements apareguin sobre quins altres elements? En l'exemple que hem vist fins ara, només tenim un element posicionat en el context de posicionament, i apareix a la part superior, ja que els elements posicionats guanyen elements no posicionats. Què passa quan tenim més d'un?

+ +

Intenteu afegir el següent, al vostre CSS, perquè el primer paràgraf estigui absolutament posicionat també:

+ +
p:nth-of-type(1) {
+  position: absolute;
+  background: lime;
+  top: 10px;
+  right: 30px;
+}
+ +

En aquest punt, veureu el primer paràgraf de color verd, desplaçat del flux del document i colocat una mica per sobre d'on era originalment. També s'apil·la a sota del paràgraf original .positioned, on els dos es superposen. Això és degut a que el paràgraf .positioned és el segon paràgraf de l'ordre d'origen, i els elements posicionats més endavant en l'ordre d'origen guanyen sobre els elements posicionats anteriorment en l'ordre d'origen.

+ +

Es pot canviar l'ordre d'apilament? Sí, podeu fer-ho, utilitzant la propietat {{cssxref("z-index")}}. "z-index" és una referència a l'eix z. Recordareu que en punts anteriors, en la font, parlàvem de la utilització en pàgines web de coordenades horitzontals (eixos x) i verticals (eixos-y) per tal de determinar el posicionament de coses com ara imatges de fons i desplaçaments d'ombra. (0,0) es troba a la part superior esquerra de la pàgina (o element), i els eixos x i y es desplaçan cap a la dreta i avall de la pàgina (per als idiomes d'esquerra a dreta, de totes maneres).

+ +

Les pàgines web també tenen un eix z - una línia imaginària que s'estén des de la superfície de la pantalla, cap a la nostra cara (o el que vulgueu tenir davant de la pantalla). Els valors de {{cssxref("z-index")}} afecten on els elements posicionats se situen en aquest eix; els valors positius els mouen més amunt per la pila, i els valors negatius els mouen més avall a la pila. De manera predeterminada, els elements posicionats tenen un z-index d'auto, que és efectivament 0.

+ +

Per canviar l'ordre d'apilament, proveu d'afegir la següent declaració a la vostra regla p:nth-of-type(1):

+ +
z-index: 1;
+ +

Ara hauríeu de veure l'exemple acabat:

+ + + +

{{ EmbedLiveSample('Introducing_z-index', '100%', 400) }}

+ +

Tingueu en compte que z-index només accepta valors d'índex, sense unitat; No podeu especificar que desitgeu que un element tingui 23 píxels a dalt de l'eix Z - no funciona així. Els valors més alts van per sobre dels valors inferiors, i depèn de vosaltres quins valors utilitzar. L'ús de 2 i 3 donaria el mateix efecte que 300 i 40000.

+ +

Tingueu en compte que aquí només hem tractat un únic context de posicionament. Si tinguéssiu dos conjunts separats d'elements posicionats a la mateixa pàgina, i volguéssiu que es  superposessin i que l'ordre d'apilament funcionés d'una manera específica, les coses es complicarien. Afortunadament, molt poques vegades trobareu tal complexitat amb z-index. Si voleu llegir amb molt més detall sobre com funciona exactament z-index, consulteu la Web Standards Curriculum z-index writeup. En aquest article us hem proporcionat tot el que necessiteu saber en aquesta etapa del vostre aprenentatge.

+ +
+

Note: Podeu veure l'exemple en aquest moment en directe a 5_z-index.html (vegeu el codi font).

+
+ +

Posicionament Fixa (Fixed)

+ +

Hi ha un altre tipus de posicionament a cobrir - fixed. Això funciona exactament igual que el posicionament absolut, amb una diferència clau - mentre que el posicionament absolut fixa un element en el lloc en relació amb l'element {{htmlelement("html")}} o seu més proper avantpassat posicionat, el posicionament fix fixa un element en el lloc en relació a la finestra de visualització del navegador. Això vol dir que podeu crear elements útils de la interfície d'usuari que es fixen en el lloc, com ara menús de navegació persistents.

+ +

Fem un exemple senzill per mostrar el que volem dir. Abans de res, elimineu les regles existents p:nth-of-type(1) i .positioned del vostre CSS.

+ +

Ara, actualitzeu la regla del cos per eliminar la declaració position: relative; i afegiu una alçada fixa, com aixó:

+ +
body {
+  width: 500px;
+  height: 1400px;
+  margin: 0 auto;
+}
+ +

Ara donarem a l'element {{htmlelement("h1")}} position: fixed;, i aconseguirem que s'assegui en el centre superior de la finestra de visualització. Afegiu la regla següent al vostre CSS:

+ +
h1 {
+  position: fixed;
+  top: 0;
+  width: 500px;
+  margin: 0 auto;
+  background: white;
+  padding: 10px;
+}
+ +

El top: 0; és necesari per fer que s'adhereixi a la part superior de la pantalla; Donem a l'encapçalament el mateix ample que la columna de contingut i utilitzarem el fidel antic margin: 0 auto; com a truc per centrar-ho. A continuació, li donem un fons blanc i algun farcit, de manera que el contingut no estigui visible per sota d'ell.

+ +

Si deseu i actualitzeu ara, veureu un petit efecte divertit pel qual l'encapçalament es manté fix, i el contingut apareix en desplaçar-se cap amunt i desaparèixer per sota d'ell. Però podríem millorar més, això - de moment, alguns dels continguts començan per sota de l'encapçalament, perquè el encapçalament posicionat ja no apareix en el flux del document, de manera que la resta del contingut es mou cap amunt. Necessitem moure-ho tot cap avall una mica; podem fer-ho establint un marge superior al primer paràgraf. Afegiu-ho ara:

+ +
p:nth-of-type(1) {
+  margin-top: 60px;
+}
+ +

Ara hauríeu de veure l'exemple acabat:

+ + + +

{{ EmbedLiveSample('Fixed_positioning', '100%', 400) }}

+ +
+

Nota: Podeu veure l'exemple en aquest moment en directe a 6_fixed-positioning.html (vegeu el codi font).

+
+ +

Experimental: posició adherent (sticky)

+ +

Hi ha un nou valor de posicionament disponible anomenat position: sticky, el suport del mateix no està molt estès. Aquest és bàsicament un híbrid entre una posició relativa i una fixa, que permet que un element posicionat actuï com si estigués relativament posicionat fins que es desplaci a un determinat llindar (per ex., 10px des de la part superior de la finestra de visualització), i després es torna fix.  Vegeu la nostra entrada de referéncia de position: sticky per més detalls i un exemple.

+ +

Resum

+ +

Estic segur que us heu divertir jugant amb el posicionament bàsic - és una de les eines essencials que està darrera en le creació de complexos dissenys CSS i funcions d'interfície d'usuari. Tenint en compte això, en el proper article tindrem encara més diversió amb el posicionament, allà anirem un pas més enllà i començarem a construir algunes coses útils del món real amb ell.

+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout")}}

diff --git a/files/ca/learn/css/css_layout/practical_positioning_examples/index.html b/files/ca/learn/css/css_layout/practical_positioning_examples/index.html new file mode 100644 index 0000000000..dfaac7f63c --- /dev/null +++ b/files/ca/learn/css/css_layout/practical_positioning_examples/index.html @@ -0,0 +1,404 @@ +--- +title: Exemples pràctics de posicionament +slug: Learn/CSS/Disseny_CSS/Exemples_pràctics_posicionament +tags: + - Article + - Beginner + - CSS + - CodingScripting + - Guide + - Layout + - Learn + - absolute + - fixed + - relative +translation_of: Learn/CSS/CSS_layout/Practical_positioning_examples +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}
+ +

Amb els fonaments del posicionament coberts en l'últim article, ara veurem com crear alguns exemples del món real, per il·lustrar quin tipus de coses podeu fer amb el posicionament.

+ + + + + + + + + + + + +
Requisits previs:Conceptes bàsics d'HTML (estudi Introducció a HTML), i una idea de com funciona CSS (estudi Introducció a CSS).
Objectiu:Tenir una idea dels aspectes pràctics del posicionament
+ +

Una caixa d'informació amb pestanyes

+ +

El primer exemple que veurem és una caixa d'informació amb pestanyes clàssica - una característica molt freqüent que es fa servir quan voleu empaquetar molta informació en una petita àrea. Això inclou aplicacions de gran abast d'informació, com ara jocs d'estratègia/guerra, versions mòbils de llocs web on la pantalla és estreta i l'espai és limitat, i caixes d'informació compactes on és possible que vulgueu tenir molta informació disponible sense haver d'omplir tota la IU. El nostre senzill exemple es veurà així una vegada que hàgim acabat:

+ +

+ +
+

Nota: Podeu veure l'exemple acabat executant-ho en directa a info-box.html (codi font). Consulteu-ho per tenir una idea del que estareu construint en aquesta secció de l'article.

+
+ +

Podeu estar pensant "per què no crear les pestanyes separades com a pàgines web independents, i només les pestanyes, fent clic a través de les pàgines independents per crear l'efecte?" Aquest codi seria més senzill, sí, però cada visualització de "pàgina" per separat seria en realitat una pàgina web recentment carregada, la qual cosa faria més difícil guardar la informació entre les vistes i integrar aquesta característica en un disseny de d'interfície d'usuari més gran. A més, les anomenades "aplicacions de pàgina única" s'estan tornant molt populars - especialment per a les d'interfície d'usuari web mòbils - ja que tenir tot el que serveix com un únic arxiu redueix el nombre de sol·licituds HTTP necessàries per visualitzar tot el contingut, millorant així el rendiment.

+ +
+

Nota: Alguns desenvolupadors web porten les coses encara més lluny, només tenen una pàgina d'informació carregada alhora i canvien dinàmicament la informació que es mostra utilitzant, una funció de JavaScript com XMLHttpRequest. En aquest punt de l'aprenentatge, però, volem que les coses siguin tan simples com sigui possible. Hi ha una mica de JavaScript més endavant, però només una mica.

+
+ +

Per començar, ens agradaria que féssiu una còpia del fitxer HTML d'inici - info-box-start.html. Deseu-lo en algun lloc sensible a l'ordinador i obrir-ho en el vostre editor de text. Vegem l'HTML contingut en el cos:

+ +
<section class="info-box">
+  <ul>
+    <li><a href="#" class="active">Tab 1</a></li>
+    <li><a href="#">Tab 2</a></li>
+    <li><a href="#">Tab 3</a></li>
+  </ul>
+  <div class="panels">
+    <article class="active-panel">
+      <h2>The first tab</h2>
+
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. Vestibulum et orci scelerisque, vulputate tellus quis, lobortis dui. Vivamus varius libero at ipsum mattis efficitur ut nec nisl. Nullam eget tincidunt metus. Donec ultrices, urna maximus consequat aliquet, dui neque eleifend lorem, a auctor libero turpis at sem. Aliquam ut porttitor urna. Nulla facilisi.</p>
+    </article>
+    <article>
+      <h2>The second tab</h2>
+
+      <p>This tab hasn't got any Lorem Ipsum in it. But the content isn't very exciting all the same.</p>
+    </article>
+    <article>
+      <h2>The third tab</h2>
+
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. And now an ordered list: how exciting!</p>
+
+      <ol>
+        <li>dui neque eleifend lorem, a auctor libero turpis at sem.</li>
+        <li>Aliquam ut porttitor urna.</li>
+        <li>Nulla facilisi</li>
+      </ol>
+    </article>
+  </div>
+</section>
+ +

Així que aquí tenim un element {{htmlelement("section")}} amb una class info-box, que conté un {{htmlelement("ul")}} i un {{htmlelement("div")}}. La llista desordenada conté tres elements de llista amb enllaços a l'interior, que es convertiran en les pestanyes reals per fer clic, per visualitzar els nostres panells de contingut. El div conté tres elements {{htmlelement("article")}}, que formaran els panells de contingut que corresponen a cada pestanya. Cada panell conté alguns continguts d'exemple.

+ +

La idea, aquí, és fer que l'estil de pestanyes pogui semblar-se a un menú estàndard de navegació horitzontal i donant-li estil els panells per a que s'asseguin un damunt de l'altre mitjançant el posicionament absolut. També us donarem una mica de JavaScript per incloure a la vostra pàgina, per mostrar el panell corresponent quan es pressiona una pestanya i l'estil de la pestanya en si. No necessitareu entendre el JavaScript en aquesta etapa, però haureu de pensar en aprendre una mica de JavaScript bàsic, el més aviat possible - com més complexes siguin les característiques de la vostra interfície d'usuari, més probable és que necessiteu implementar JavaScript a la vostra funcionalitat desitjada.

+ +

Configuració general

+ +

Per començar, afegiu el següent entre l'obertura i tancament de les etiquetes {{HTMLElement("style")}}:

+ +
html {
+  font-family: sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+}
+ +

Aquesta és només una configuració general per establir una font sans-serif a la nostra pàgina, utilitzar el model border-box de {{cssxref("box-sizing")}} i desfer-se del marge predeterminat de {{htmlelement("body")}}.

+ +

A continuació, afegiu el següent just a sota del vostre CSS anterior:

+ +
.info-box {
+  width: 450px;
+  height: 400px;
+  margin: 0 auto;
+}
+ +

Això estableix un ample i alçada específic sobre el contingut i el centra a la pantalla mitjançant el antic truc margin: 0 auto;. Anteriorment en el curs, vam aconsellar no establir una alçada fixa en contenidors de contingut, si fos possible; Està bé en aquesta circumstància, perquè tenim contingut fix en les nostres pestanyes. També sembla una mica discordant tenir diferents pestanyes a diferents alçades.

+ +

Estilitzar les nostres pestanyes

+ +

Ara volem que les pestanyes d'estil semblin com a pestanyes - bàsicament, aquest és un menú de navegació horitzontal, però en comptes de carregar diferents pàgines web quan es fa clic, com hem vist prèviament al curs, fa que es mostrin panells diferents en la mateixa pàgina. Primer, afegiu la següent regla a la part inferior del vostre CSS per eliminar el valor predeterminat {{cssxref("padding-left")}} i {{cssxref("margin-top")}} de la llista no ordenada:

+ +
.info-box ul {
+  padding-left: 0;
+  margin-top: 0;
+}
+ +
+

Nota: Estem utilitzant selectors descendents amb .info-box al principi de la cadena a través d'aquest exemple - això és per poguer inserir aquesta funció en una pàgina amb un altre contingut ja en ella, sense por a interferir amb els estils aplicats a altres parts de la pàgina.

+
+ +

A continuació, dissenyarem les pestanyes horitzontals - els elements de la llista es flotant tots cap a l'esquerra per fer que s'asseguin en una sola línia, el seu {{cssxref("list-style-type")}} s'estableix a none per desfer-se de les vinyetes i el seu {{cssxref("width")}} s'estableix a 150px perquè s'ajusti còmodament a través de la caixa d'informació (info-box). Els elements {{htmlelement("a")}} estan configurats en {{cssxref("display")}} inline-block, perquè s'asseguin en una línia però que encara siguin estilitzables, i estiguin dissenyats adequadament per als botons de pestanya, usant una varietat d'altres propietats.

+ +

Afegiu el següent CSS:

+ +
.info-box li {
+  float: left;
+  list-style-type: none;
+  width: 150px;
+}
+
+.info-box li a {
+  display: inline-block;
+  text-decoration: none;
+  width: 100%;
+  line-height: 3;
+  background-color: red;
+  color: black;
+  text-align: center;
+}
+ +

Finalment, per a aquesta secció, establirem alguns estils als estats de l'enllaç. En primer lloc, configurarem els estats :focus i :hover de les pestanyes, perquè es vegin diferents quan estan enfocats/planejats, oferint als usuaris alguna infomació visual. En segon lloc, establirem una regla que posi el mateix estil en una de les pestanyes quan hi hagi una class active present en ella. Definirem això mitjançant JavaScript quan es faci clic a una pestanya. Col·loqueu els següents CSS per sota dels altres estils:

+ +
.info-box li a:focus, .info-box li a:hover {
+  background-color: #a60000;
+  color: white;
+}
+
+.info-box li a.active {
+  background-color: #a60000;
+  color: white;
+}
+ +

Estilitzar els panells

+ +

El següent treball és dissenyar els nostres panells. Anem a engegar-ho!

+ +

Primer de tot, afegiu la següent regla per dissenyar el contenidor .panels {{htmlelement("div")}}. Aquí, simplement, hem establert un {{cssxref("height")}} fix per assegurar-nos que els panells s'ajustin bé a l'interior de la caixa d'informació, {{cssxref("position")}} relative pel que fa a {{htmlelement("div" )}} com a context de posicionament, de manera que podeu col·locar elements fills posicionats relatius a ell i no a l'element {{htmlelement("html")}} i finalment el flotador {{cssxref("clear")}} establert en el CSS anterior perquè no interfereixi amb la resta del disseny.

+ +
.info-box .panels {
+  height: 352px;
+  position: relative;
+  clear: both;
+}
+ +

Finalment, per a aquesta secció, dissenyarem els elements individuals {{htmlelement("article")}} que componen els nostres panells. La primera regla que afegirem serà {{cssxref("position")}} absolute dels panells, i farà que tots quedin asseguts, alineats a {{cssxref("top")}} i {{cssxref("left")}} del seu contenidor {{htmlelement ("div")}} - aquesta part és absolutament clau per a tota aquesta característica de disseny, ja que fa que els panells s'asseguin uns sobre els altres. La regla també proporciona als panells la mateixa alçada de conjunt que el contenidor, i dóna al contingut un farciment, un text {{cssxref("color")}} i un {{cssxref("background-color")}}.

+ +

La segona regla que afegirem aquí fa que un panell amb una class active-panel, establert en ell, tindrà un {{cssxref("z-index")}} d'1, que se li aplicarà, la qual cosa farà que s'asseguin per sobre dels altres panells (els elements posicionats tenen un z-index de 0 per defecte, la qual cosa els posaria a continuació). Una vegada més, afegirem aquesta classe utilitzant JavaScript en el moment adequat.

+ +
.info-box article {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 352px;
+  padding: 10px;
+  color: white;
+  background-color: #a60000;
+}
+
+.info-box .active-panel {
+  z-index: 1;
+}
+ +

Afegir el nostre JavaScript

+ +

L'últim pas per fer funcionar aquesta característica és afegir JavaScript. Col·loqueu el següent bloc de codi, exactament com s'escriu, entre les etiquetes d'obertura i tancament {{htmlelement("script")}} (trobareu aquestes a sota del contingut HTML):

+ +
var tabs = document.querySelectorAll('.info-box li a');
+var panels = document.querySelectorAll('.info-box article');
+
+for(i = 0; i < tabs.length; i++) {
+  var tab = tabs[i];
+  setTabHandler(tab, i);
+}
+
+function setTabHandler(tab, tabPos) {
+  tab.onclick = function() {
+    for(i = 0; i < tabs.length; i++) {
+      tabs[i].className = '';
+    }
+
+    tab.className = 'active';
+
+    for(i = 0; i < panels.length; i++) {
+      panels[i].className = '';
+    }
+
+    panels[tabPos].className = 'active-panel';
+  }
+}
+ +

Aquest codi fa el següent:

+ + + +

Això és tot pel primer exemple. Manteniu obert el vostre codi, ja que l'afegirem a la segona.

+ +

Una caixa d'informació amb pestanyes de posició fixa

+ +

En el nostre segon exemple, farem el nostre primer exemple - la nostra caixa d'informació - i l'afegirem al context d'una pàgina web completa. Però no només això - li donarem una posició fixa perquè es mantingui en la mateixa posició en la finestra del navegador. Quan el contingut principal es desplaci, la caixa d'informació romandrà en la mateixa posició en la pantalla. El nostre exemple acabat tindrà aquest aspecte:

+ +

+ +
+

Nota: Podeu veure l'exemple acabat, executant-ho en directe a fixed-info-box.html (codi font). Comproveu-ho per tenir una idea del que serà la construcció d'aquesta secció de l'article.

+
+ +

Com a punt de partida, podeu fer servir l'exemple complet de la primera secció de l'article o fer una còpia local de info-box.html des del nostre repositori de Github.

+ +

Addicions HTML

+ +

En primer lloc, necessitem un codi HTML addicional per representar el contingut principal del lloc web. Afegiu el següent {{htmlelement("section")}} just a sota de l'etiqueta d'apertura {{htmlelement("body")}}, just abans de la secció existent:

+ +
<section class="fake-content">
+  <h1>Fake content</h1>
+  <p>This is fake content. Your main web page contents would probably go here.</p>
+  <p>This is fake content. Your main web page contents would probably go here.</p>
+  <p>This is fake content. Your main web page contents would probably go here.</p>
+  <p>This is fake content. Your main web page contents would probably go here.</p>
+  <p>This is fake content. Your main web page contents would probably go here.</p>
+  <p>This is fake content. Your main web page contents would probably go here.</p>
+  <p>This is fake content. Your main web page contents would probably go here.</p>
+  <p>This is fake content. Your main web page contents would probably go here.</p>
+</section>
+ +
+

Nota: Us podeu sentir lliures de canviar el contingut fals per a algun contingut real si ho desitjeu.

+
+ +

Canvis al CSS existent

+ +

A continuació, hem de fer petits canvis al CSS existent, per tenir la caixa d'informació col·locada i posicionada Canvieu la regla .info-box per desfer-vos del margin: 0 auto;  (Ja no volem que la caixa d'informació estigui centrada), afegiu {{cssxref("position")}}: fixed;, i enganxeu-ho en el {{cssxref("top")}} de la finestra de visualització del navegador.

+ +

Ara ha de ser així:

+ +
.info-box {
+  width: 450px;
+  height: 400px;
+  position: fixed;
+  top: 0;
+}
+ +

Estilitzar el contingut principal

+ +

L'únic que queda per a aquest exemple és proporcionar al contingut principal amb un estil. Afegiu la següent regla sota la resta del vostre CSS:

+ +
.fake-content {
+  background-color: #a60000;
+  color: white;
+  padding: 10px;
+  height: 2000px;
+  margin-left: 470px;
+}
+ +

Per començar, donem al contingut el mateix {{cssxref("background-color")}}, {{cssxref("color")}}, i {{cssxref("padding")}} com els panells de caixa d'informació. A continuació, li donem un gran {{cssxref("margin-left")}} per moure-ho cap a la dreta, fent espai perquè la caixa d'informació s'assegui, de manera que no se superposi amb qualsevol altre cosa.

+ +

Això marca el final del segon exemple; esperem que trobeu el tercer tan interessant.

+ +

Un panell amagat lliscant

+ +

L'exemple final que presentarem aquí és un panell que es llisca des de dins i fora de la pantalla en prémer una icona - com s'ha esmentat anteriorment, això és popular per a situacions com ara dissenys de mòbils, on els espais de pantalla disponibles són petits, per la qual cosa no es desitja usar la major part d'ella, mostrant un menú o panell d'informació en lloc de contingut útil.

+ +

El nostre exemple acabat tindrà aquest aspecte:

+ +

+ +
+

Nota: Podeu veure l'exemple acabat, executant-ho en directe a hidden-info-panel.html (codi font). Comproveu-ho per tenir una idea del que serà la construcció d'aquesta secció de l'article.

+
+ +

Com a punt de partida, feu una còpia local de hidden-info-panel-start.html des del nostre repositori de Github. Això no segueix l'exemple anterior, de manera que cal un nou fitxer d'inici. Fem un cop d'ull al codi HTML del fitxer:

+ +
<label for="toggle">❔</label>
+<input type="checkbox" id="toggle">
+<aside>
+
+  ...
+
+</aside>
+ +

Per començar, tenim un element {{htmlelement("label")}} i un element {{htmlelement("input")}} - els elements <label> normalment s'utilitzen per associar una etiqueta de text amb un element de formulari amb finalitats d'accessibilitat (permetent que un usuari de pantalla vegi quina descripció fa amb quin element del formulari). Aquí s'associa amb la casella de verificació <input> amb els atributs for i id.

+ +
+

Nota: Hem posat un gran signe d'interrogació en el nostre HTML perquè actuï com la nostra icona d'informació - aquest representa el botó que es premut per mostrar/amagar el panell.

+
+ +

Aquí utilitzarem aquests elements per un propòsit lleugerament diferent - un altre efecte secundari útil dels elements <label> és que podeu fer clic a l'etiqueta de la casella de verificació per a marcar la casella de verificació, així com només la casella de verificació. Això ha portat a la coneguda checkbox hack, que proporciona una forma lliure de JavaScript per controlar un  element mitjançant la commutació d'un botó. L'element que anem a controlar és l'element {{htmlelement("aside")}} que segueix els altres dos (hem deixat el seu contingut fora del llistat del codi anterior per brevetat).

+ +

A les seccions següents explicarem com funciona tot això.

+ +

Estilitzar els elements de formulari

+ +

Primer tractarem els elements de formulari - afegiu el següent CSS entre les etiquetes {{htmlelement("style")}}:

+ +
label[for="toggle"] {
+  font-size: 3rem;
+  position: absolute;
+  top: 4px;
+  right: 5px;
+  z-index: 1;
+  cursor: pointer;
+}
+
+input[type="checkbox"] {
+  position: absolute;
+  top: -100px;
+}
+ +

La primera regla donar estil el <label>; aquí tenim:

+ + + +

La segona regla estableix {{cssxref("position")}} absolute en l'element <input> de casella de verificació real i l'oculta a la part superior de la pantalla. De fet, no volem veure això a la nostra interfície d'usuari.

+ +

Estilitzar el panell

+ +

Ara és hora de donar-li estil el propi panell lliscant. Afegiu la següent regla al final del vostre CSS:

+ +
aside {
+  background-color: #a60000;
+  color: white;
+
+  width: 340px;
+  height: 98%;
+  padding: 10px 1%;
+
+  position: fixed;
+  top: 0;
+  right: -370px;
+
+  transition: 0.6s all;
+}
+ +

Hi ha molt a fer aquí, analitzem-ho a poc a poc:

+ + + +

Seleccionar el estat marcat

+ +

Hi ha una mica de CSS per afegir - poseu el següent al final del vostre CSS:

+ +
input[type=checkbox]:checked + aside {
+  right: 0px;
+}
+ +

El selector és bastant complex aquí - estem seleccionant l'element <aside> adjacent a l'element <input>, però només quan està marcat (tingueu en compte l'ús de la pseudo-classe {{cssxref (": checked")}} per aconseguir això). Quan aquest és el cas, estem establint la propietat {{cssxref("right")}} de <aside> a 0px, el que fa que el panell aparegui novament en la pantalla (suaument a causa de la transició). En fer clic en l'etiqueta, torna a desmarcar la casella de verificació, que torna a ocultar el panell.

+ +

Així que aquí ho teniu - una manera bastant intel·ligent, lliure de Javascript, per crear un efecte de botó alternatiu. Això funcionarà en IE9 i superiors (la transició suau funcionarà en IE10 i superiors). Aquest efecte té algunes preocupacions - això és abusar una mica d'elements de forma (no estan destinats per a aquest propòsit), i l'efecte no és el millor en termes d'accessibilitat - l'etiqueta no es pot enfocar de manera predeterminada, i l'ús no semàntic dels elements de formulari pot causar problemes amb els lectors de pantalla. JavaScript i un enllaç o un botó poden ser més apropiat, però encara és divertit experimentar.

+ +

Resum

+ +

Així que arrodonim el nostre cop d'ull en el posicionament - ara com ara, heu de tenir una idea de com funciona la mecànica bàsica, així com la comprensió de com començar a aplicar-los en la construcció d'algunes característiques interessants de la interfície d'usuari. No us preocupeu sinó vau rebre tot això immediatament - el posicionament és un tema bastant avançat, i sempre podeu treballar a través dels articles de nou, per ajudar-vos en la vostra comprensió. El següent tema al que ens referirem és a Flexbox.

+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}

diff --git a/files/ca/learn/css/css_layout/responsive_design/index.html b/files/ca/learn/css/css_layout/responsive_design/index.html new file mode 100644 index 0000000000..5bf909e6e7 --- /dev/null +++ b/files/ca/learn/css/css_layout/responsive_design/index.html @@ -0,0 +1,324 @@ +--- +title: Disseny responsiu +slug: Learn/CSS/Disseny_CSS/Disseny_responsiu +translation_of: Learn/CSS/CSS_layout/Responsive_Design +--- +
{{learnsidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}
+ +

En els primers dies del disseny de pàgines web es creaven pàgines per a una mida de pantalla determinada. Si l’usuari tenia una pantalla més gran o més petita que la que el dissenyador s’esperava, els resultats anaven des de barres de desplaçament no desitjades fins a línies excessivament llargues i un mal ús de l’espai. A mesura que apareixien mides de pantalla més diverses, va aparéixer el concepte de disseny web responsiu (RWD o responsive web design), un conjunt de pràctiques que permeten a les pàgines web alterar el disseny i l’aparença per a adaptar-se a diferents amplades, resolucions, etc. És una idea que ha canviat la manera de dissenyar una pàgina web per a diversos dispositius, i en aquest article t’ajudarem a entendre les principals tècniques que has de conèixer per a dominar-la.

+ + + + + + + + + + + + +
Prerequisits:Conceptes bàsics d’HTML (consulta la Introducció a l’HTML), i nocions de com funciona el CSS (consulta els Primers passos amb el CSS i els elements bàsics del CSS).
Objectiu:Entendre els conceptes fonamentals i la història del disseny responsiu.
+ +

Història dels dissenys de pàgina web

+ +

En un moment de la història, només tenies dues opcions a l’hora de dissenyar un lloc web:

+ + + +

Aquests dos enfocaments tenien com a resultat un lloc web que s’adequava essencialment a la pantalla de la persona que havia dissenyat el lloc web. El lloc web líquid donava un disseny aixafat en pantalles més petites (com es pot veure a continuació), i línies molt llargues que costaven molt de llegir en les pantalles grans.

+ +
Una disposició amb dues columnes aixafades en una finestra de visualització de la mida d’un dispositiu mòbil. +
+
+ +
+

Nota: Observa aquest disseny de pàgina web líquid senzill: exemple, codi d’origen. Amplia o redueix la finestra del navegador i observa com en canvia l’aspecte segons les diferents mides.

+
+ +

Amb llocs web amb amplada fixa es corria el risc d’aparició d’una barra de desplaçament horitzontal en les pantalles que eren més petites que l’amplada del lloc web (com es pot veure a continuació) i de molta superfície blanca a les vores del disseny en les pantalles que eren més grans.

+ +
Disseny amb barra de desplaçament horitzontal en una finestra de visualització de la mida d’un dispositiu mòbil. +
+
+ +
+

Nota: Observa aquest disseny de pàgina web senzill d’amplada fixa: exemple, codi d’origen. Un cop més, canvia la mida de la finestra del navegador i observa’n el resultat.

+
+ +
+

Nota: Les captures de pantalla de dalt es fan amb el mode de disseny responsiu de les DevTools de Firefox.

+
+ +

A mesura que la web per a dispositius mòbils va començar a esdevenir una realitat amb els primers telèfons mòbils, les companyies que volien adherir-se en general a la tecnologia mòbil creaven una versió del lloc web especial per a dispositius mòbils amb una URL diferent (sovint alguna cosa com ara m.example.com o example.mobi). Això volia dir que calia desenvolupar i mantenir actualitzades dues versions independents de la mateixa pàgina web.

+ +

A més, aquests llocs web per a dispositius mòbils solien oferir una experiència d’usuari molt reduïda. Com que els dispositius mòbils es van tornar més potents i van poder mostrar llocs web complets, això frustrava els usuaris de dispositius mòbils, que es trobaven atrapats en la versió mòbil del lloc web i no podien accedir a informació que sabien que hi havia en la versió d’escriptori, que incloïa totes les funcions de la pàgina web.

+ +

Disseny flexible abans del disseny responsiu

+ +

Es van desenvolupar diversos enfocaments per a intentar resoldre els inconvenients dels mètodes líquids o d’amplada fixa per a crear llocs web. El 2004, Cameron Adams va escriure una publicació titulada Resolution dependent layout, on descriu un mètode per a crear un disseny de pàgina web que s’adapta a diferents resolucions de pantalla. Aquest enfocament requeria JavaScript per a detectar la resolució de la pantalla i carregar el CSS correcte.

+ +

Zoe Mickley Gillenwater va ser fonamental en la seva tasca de descriure i formalitzar les diferents maneres de crear llocs web flexibles, per a intentar trobar una situació intermèdia entre omplir tota la pantalla o tenir una mida completament fixa.

+ +

El disseny responsiu

+ +

El terme disseny responsiu va ser creat per Ethan Marcotte el 2010, que va descriure l’ús de tres tècniques combinades.

+ +
    +
  1. La primera va ser la idea de les graelles fluides, cosa que ja explorava Gillenwater, i que es pot llegir en l’article de Marcotte, Fluid grids (publicat el 2009 en A list apart).
    2. +
  2. La segona tècnica va ser la idea d’imatges fluides. Utilitzant una tècnica molt senzilla d’establir la propietat max-width al 100%, les imatges es farien més petites si la columna que les contenia es feia més estreta que la mida intrínseca de la imatge, però mai no augmentaria. D’aquesta manera, una imatge s’escala per a poder-se incloure en una columna de mida flexible sense que desbordi, però no es fa més gran i es pixela si la columna s’amplia més que la imatge.
    3. +
  3. El tercer component clau va ser la consulta de mèdia (o media query). Les consultes de mèdia habiliten el tipus de canvi de disseny de pàgina web que Cameron Adams havia explorat abans amb JavaScript, però utilitzant només CSS. En lloc de tenir un disseny de pàgina web per a cada mida de pantalla, se’n podria tenir un i canviar-ne la disposició dels elements. Es podrien fer aparèixer barres laterals per a les pantalles més petites, o es podia mostrar una navegació alternativa.
    4. +
+ +

És important entendre que el disseny web responsiu no és una tecnologia independent: és un terme que s’utilitza per a descriure un enfocament del disseny de pàgines web o un conjunt de bones pràctiques que s’utilitzen per a crear un disseny de pàgines web que pugui respondre segons el dispositiu que s’utilitza per a visualitzar el contingut. En l’exploració original de Marcotte, això va donar lloc a les graelles flexibles (amb elements flotants) i les consultes de mèdia; però en els gairebé deu anys des que es va escriure aquest article, treballar de manera responsiva s’ha convertit en la norma. Els mètodes de disseny amb CSS moderns són intrínsecament responsius, i hi ha novetats integrades a la plataforma web que faciliten el disseny de llocs web responsius.

+ +

La resta d’aquest article t’indica les diverses funcions de la plataforma web que pots utilitzar per a crear un lloc web responsiu.

+ +

Les consultes a mèdia (media queries)

+ +

El disseny responsiu només va poder sorgir a causa de les consultes a mèdia. L’especificació del nivell 3 de les consultes a mèdia es va convertir en una Candidate Recommendation el 2009, cosa que significa que es considerava llesta per a implementar-la en els navegadors. Les consultes a mèdia ens permeten fer un seguit de proves (per exemple, si la pantalla de l’usuari és més gran que una certa amplada o una determinada resolució) i aplicar CSS de manera selectiva per a dissenyar la pàgina web més adequada segons les necessitats de l’usuari.

+ +

Per exemple, la consulta als mèdia següent esbrina si la pàgina web que es mostra ho fa com una pantalla (per tant, no és un document imprès), i si la finestra té almenys 800 píxels d’ample. El CSS per al selector .container només s’aplica si aquestes dues coses són certes.

+ +
@media screen and (min-width: 800px) {
+  .container {
+    margin: 1em 2em;
+  }
+} 
+
+ +

Pots afegir diverses consultes a mèdia dins d’un full d’estil, i ajustar el disseny sencer o només unes parts perquè s’adapti més bé a les diverses mides de pantalla. Els punts en què s’introdueix una consulta de mèdia i es canvia la disposició dels elements de la pàgina web es coneixen com punts de ruptura.

+ +

Un enfocament habitual quan s’utilitzen les consultes als mèdia és crear un disseny senzill d’una sola columna per a dispositius de pantalla estreta (per exemple, telèfons mòbils), després comprovar si hi ha pantalles més grans i implementar una disposició en múltiples columnes quan saps que tens prou amplada de pantalla per a fer-ho. Sovint es descriu com disseny mobile first.

+ +

Trobaràs més informació en la documentació de MDN per a les consultes als mèdia.

+ +

Graelles flexibles

+ +

Els llocs responsius no només canvien la distribució entre punts de ruptura, sinó que es basen en graelles flexibles. Una graella flexible significa que no cal delimitar el lloc web a totes les mides possibles de dispositius que hi ha i crear un disseny en píxels perfecte. Aquest plantejament seria impossible, atès el gran nombre de dispositius de mida diferent que hi ha, i del fet que, com a mínim en la versió d’escriptori, la finestra del navegador no sempre es maximitza.

+ +

Si fas servir una graella flexible, només has d’afegir un punt de ruptura i canviar el disseny en el punt en què el contingut es comença a veure malament. Per exemple, si les longituds de les línies es fan il·legibles a mesura que augmenta la mida de la pantalla, o si una caixa s’encongeix fins a una amplada de dues paraules en cada línia a mesura que la mida de la pantalla es redueix.

+ +

En els primers dies del disseny responsiu, l’única opció per a dissenyar pàgines web era utilitzar elements flotants. Els dissenys de pantalla amb elements flotants flexibles s’aconseguien donant a cada element una amplada en percentatge i assegurar-se que no s’atenyia més del 100% per a tota la pàgina. En la seva obra original sobre graelles flexibles, Marcotte va detallar una fórmula per a convertir en percentatges un disseny de pàgina dissenyat en píxels.

+ +
target / context = result 
+
+ +

Per exemple, si la mida de la nostra columna de destinació és de 60 píxels i el context (o contenidor) en què es troba és de 960 píxels, dividim 60 per 960 i obtenim un valor que podem utilitzar en el nostre CSS, després de traslladar el punt decimal dos llocs a la dreta.

+ +
.col {
+  width: 6.25%; /* 60 / 960 = 0.0625 */
+} 
+
+ +

Avui dia trobaràs aquest enfocament en molts llocs web, i també el trobaràs documentat aquí, en la secció dedicada al disseny de l’article de mètodes heretats de disseny de pàgines web. És probable que en el transcurs del teu treball et trobis amb llocs web que usen aquest enfocament, de manera que val la pena entendre’l, tot i que no construiràs un lloc modern amb una graella flexible basada en elements flotants.

+ +

L’exemple següent mostra un disseny senzill i sensible amb consultes a mèdia i una graella flexible. En pantalles estretes, el disseny mostra les caixes apilades les unes sobre les altres:

+ +
Una vista d’un dispositiu mòbil amb una disposició de caixes apilades verticalment l’una sobre l’altra. +
+
+ +

En pantalles més amples es passa a dues columnes:

+ +
Una vista d’un dispositiu d’escriptori d’un disseny amb dues columnes. +
+
+ +
+

Nota: Pots trobar l’exemple en viu i el codi d’origen d’aquest exemple a GitHub.

+
+ +

Tecnologies modernes de disseny de pàgines web

+ +

De manera predeterminada, els mètodes moderns de disseny de pàgines web com ara el disseny en múltiples columnes, el Flexbox i el Grid són responsius per defecte. Tots aquests mètodes parteixen de la base que vols crear una graella flexible i et proporcionen les maneres de fer-ho més fàcils.

+ +

Multicol

+ +

El més antic d’aquests mètodes de disseny de pàgines web és multicol: quan especifiques un nombre de columnes (column-count), indiques en quantes columnes vols dividir el contingut. El navegador llavors calcula la mida d’aquestes columnes, que canvia d’acord amb la mida de la pantalla.

+ +
.container {
+  column-count: 3;
+} 
+
+ +

Si en lloc d’això estableixes l’atribut column-width, especifiques una amplada mínima. El navegador crea tantes columnes d’aquesta amplada com càpiguen còmodament en el contenidor, i reparteix l’espai entre totes les columnes. Per tant, el nombre de columnes canvia segons la quantitat d’espai que hi ha.

+ +
.container {
+  column-width: 10em;
+} 
+
+ +

Flexbox

+ +

Amb la tecnologia Flexbox, els elements flexibles es redueixen i distribueixen l’espai entre els elements d’acord amb l’espai que hi ha en el contenidor segons el comportament inicial que tenen predeterminat. Si canvies els valors de flex-grow i flex-shrink, pots indicar com vols que es comportin els elements quan hi ha més o menys espai al voltant.

+ +

En l’exemple següent, els elements flexibles ocupen cada un la mateixa quantitat d’espai en el contenidor flexible, mitjançant la propietat abreviada flex: 1, com es descriu en l’article Flexbox: Dimensions flexibles d’elements flex.

+ +
.container {
+  display: flex;
+}
+
+.item {
+  flex: 1;
+} 
+
+ +
+

Nota: Com a exemple hem reconstruït el disseny responsiu senzill anterior, aquest cop amb Flexbox. Pots veure que ja no cal fer servir valors percentuals estranys per a calcular la mida de les columnes: exemple, codi d’origen.

+
+ +

Graella CSS

+ +

En el disseny de pàgines web amb graella CSS, la unitat fr permet distribuir l’espai disponible en les traces d’una graella. L’exemple següent crea un contenidor de graella amb tres traces de mida 1fr. Es creen tres traces de columna, i cadascuna ocupa una part de l’espai disponible en el contenidor. Pots obtenir més informació sobre aquest enfocament per a crear una graella en la secció Aprendre a dissenyar graelles, de l’article Graelles flexibles amb la unitat fr.

+ +
.container {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+} 
+
+ +
+

Nota: La versió del disseny de pàgines web amb graella és encara més senzilla, perquè permet definir les columnes amb .wrapper: exemple, codi d’origen.

+
+ +

Imatges responsives

+ +

L’enfocament més senzill de les imatges responsives es va descriure en els primers articles de Marcotte sobre el disseny de pàgines web responsiu. Bàsicament, agafes una imatge de la mida més gran que puguis necessitar, i la redueixes. Aquest és encara un enfocament emprat avui, i en la majoria de fulls d’estil trobaràs en algun lloc el CSS següent:

+ +
img {
+  max-width: 100%:
+} 
+
+ +

Hi ha inconvenients evidents en aquest enfocament. És possible que la imatge es mostri molt més petita que la seva mida intrínseca, i això representa una pèrdua d’amplada de banda: un usuari de dispositiu mòbil pot acabar descarregant una imatge que és diverses vegades de la mida del que realment veu a la finestra del navegador. A més, pot ser que no vulguis la mateixa relació d’aspecte de la imatge al mòbil i a l’escriptori. Per exemple, pot ser bo tenir una imatge quadrada per a mòbils, i mostrar la mateixa imatge en format apaïsat a l’escriptori. O bé, tenint en compte la mida més petita del dispositiu mòbil, pot ser que hi vulguis mostrar una imatge diferent, que s’entengui més fàcilment en una pantalla petita. Aquestes coses no es poden aconseguir simplement reduint una imatge.

+ +

Les imatges responsives, amb l’element {{htmlelement("picture")}} i els atributs srcset i sizes de {{htmlelement("img")}} resolen tots dos problemes. Pots proporcionar diverses mides, juntament amb «suggeriments» (metadades que descriuen la mida de la pantalla i la resolució a la qual s’adapta la imatge), i el navegador tria la imatge més adequada per a cada dispositiu i procura que l’usuari descarregui la mida adequada de la imatge en el dispositiu que utilitza.

+ +

També pots usar imatges de director artístic, que proporcionen un retall o una imatge completament diferent per a diferents mides de pantalla.

+ +

Pots trobar una guia detallada sobre Imatges responsives en el mòdul Aprendre HTML de MDN.

+ +

Tipografia responsiva

+ +

Un element de disseny responsiu que encara no hem tractat en articles anteriors és la idea de la tipografia responsiva. Aquest concepte descriu essencialment el fet de canviar la mida de lletra segons l’espai de pantalla que reflecteixen les consultes a mèdia.

+ +

En aquest exemple, volem establir el nostre títol d’encapçalament de nivell 1 en 4rem, és a dir, que serà quatre vegades la mida de la nostra lletra base. És un títol molt gran! Només volem aquest títol d’encapçalament tan gran en mides de pantalla grans, per tant, primer creem un títol d’encapçalament més petit i després utilitzem les consultes a mèdia per a sobreescriure’l amb la mida més gran si sabem que l’usuari té una mida de pantalla d’almenys 1200px.

+ +
html {
+  font-size: 1em;
+}
+
+h1 {
+  font-size: 2rem;
+}
+
+@media (min-width: 1200px) {
+  h1 {
+    font-size: 4rem;
+  }
+} 
+
+ +

Hem editat el nostre exemple de graella responsiva per a incloure el tipus responsiu amb el mètode descrit. Pots veure com el títol d’encapçalament canvia de mida a mesura que el disseny canvia a la versió de dues columnes.

+ +

En el dispositiu mòbil, el títol d’encapçalament és més petit:

+ +
Un esquema apilat amb una mida de títol d’encapçalament petita. +
+
+ +

Tanmateix, en el dispositiu d’escriptori veiem la mida del títol d’encapçalament més gran:

+ +
Un disseny de dues columnes amb un títol d’encapçalament gran. +
+
+ +
+

Nota: Observa aquest exemple en acció: exemple, codi d’origen.

+
+ +

Tal com mostra aquest enfocament de la tipografia, no cal restringir les consultes a mèdia a canviar només el disseny de pàgina web. Es poden utilitzar per a ajustar qualsevol element i fer-lo més útil o atractiu a les diverses mides de pantalla.

+ +

L’ús d’unitats de finestra de visualització per a tipografies responsives

+ +

Un enfocament interessant és utilitzar la unitat vw de finestra de visualització per a habilitar la tipografia responsiva. 1vw és igual a un 1 per cent de l’amplada de la visualització, cosa que significa que si defineixes la mida de la lletra amb vw, sempre es relacionarà amb la mida de la finestra de visualització.

+ +
h1 {
+  font-size: 6vw;
+}
+ +

El problema de fer servir la unitat vw és que l’usuari perd la capacitat d’ampliar un bloc de text, perquè aquest text sempre està relacionat amb la mida de la finestra de visualització. Per tant, mai no hauries de definir text fent servir només les unitats de finestra de visualització.

+ +

Hi ha una solució, que implica l’ús de calc(). Si afegeixes la unitat vw a un conjunt de valors amb una mida fixa com em o rem, encara es pot fer zoom del text. Essencialment, la unitat vw s’afegeix a sobre d’aquest valor ampliat:

+ +
h1 {
+  font-size: calc(1.5rem + 3vw);
+}
+ +

Això vol dir que només hem d’especificar la mida de la lletra per al títol d’encapçalament, en lloc de configurar-la per a dispositius mòbils i redefinir-la segons les consultes a mèdia. A continuació, la lletra augmenta gradualment a mesura que augmenta la mida de la finestra de visualització.

+ +
+

Observa aquest exemple en acció: exemple, codi d’origen.

+
+ +

L’etiqueta meta de la finestra de visualització

+ +

Si observes el tipus de lletra d’una pàgina HTML responsiva, normalment trobaràs l’etiqueta {{htmlelement("meta")}} a la capçalera (<head>) del document.

+ +
<meta name="viewport" content="width=device-width,initial-scale=1">
+
+ +

Aquesta etiqueta meta indica als navegadors dels dispositius mòbils que han d’establir l’amplada de la finestra de visualització a l’amplada del dispositiu i escalar el document al 100% de la mida prevista, cosa que mostra el document a la mida optimitzada per a dispositius mòbils.

+ +

Per què cal, això? Perquè els navegadors dels dispositius mòbils tendeixen a mentir sobre l’amplada de la finestra de visualització.

+ +

Aquesta etiqueta meta existeix perquè quan es va llançar l’iPhone original i la gent va començar a veure llocs web en una petita pantalla de telèfon, la majoria dels llocs web no estaven optimitzats per a dispositius mòbils. Per tant, el navegador del dispositiu mòbil establia l’amplada de la visualització a 960 píxels, la representava a aquella amplada i mostrava el resultat com la versió ampliada del disseny per al dispositiu d’escriptori. Altres navegadors de dispositius mòbils (per exemple, el de Google Android) van fer el mateix. Els usuaris podien fer zoom i desplaçar-se per la web per a veure els fragments que els interessaven, però allò no era còmode. Encara ho podràs veure si tens la mala sort d’anar a parar a un lloc web que no té un disseny responsiu.

+ +

El problema és que el teu disseny responsiu amb punts de ruptura i consultes a mèdia no funciona tal com es preveu per als navegadors mòbils. Si tens un disseny de pantalla estret que s’inicia amb una amplada de visualització de 480px o menys i la ruptura s’estableix a 960px, mai no veuràs la disposició de pantalla estreta al dispositiu mòbil. En canvi, si defineixes width=device-width, sobreescrius l’amplada predeterminada d’Apple width=960px amb l’amplada real del dispositiu, de manera que les consultes a mèdia permetran que funcioni com es preveu.

+ +

Per tant, sempre has d’incloure la línia HTML anterior a la capçalera dels teus documents.

+ +

Hi ha altres opcions de configuració que pots utilitzar amb l’etiqueta meta de la finestra de visualització, però, en general, t’anirà bé utilitzar la línia anterior.

+ + + +

Has d’evitar l’ús de minimum-scale, maximum-scale, i en particular la configuració de user-scalable en no. Els usuaris haurien de poder fer zoom en la mesura que necessitin; impedir això genera problemes d’accessibilitat.

+ +
+

Nota: Hi ha una @rule CSS dissenyada per a substituir l’etiqueta meta de la finestra de visualització (@viewport), però té una compatibilitat de navegadors deficient. Es va implementar a Internet Explorer i Edge, però un cop entri en funcionament Edge basat en Chromium, deixarà de formar part del navegador Edge.

+
+ +

Resum

+ +

El disseny responsiu es refereix a un disseny de lloc o d’aplicació que respon a l’entorn en què es visualitza. Comprèn diverses funcions i tècniques CSS i HTML, i ara és essencialment l’única manera com construïm els llocs web per defecte. Tingues en compte els llocs web que visites amb el dispositiu mòbil: probablement és poc habitual trobar-te amb un lloc que és la versió reduïda de la d’escriptori, o en què cal desplaçar-se de costat per a trobar-hi coses. Això és perquè la xarxa web s’ha orientat cap a aquest enfocament de disseny responsiu.

+ +

També ha estat molt més fàcil aconseguir dissenys responsius amb l’ajuda dels mètodes de disseny que has après en aquests articles. Si ets nou en el desenvolupament web, avui tens moltes més eines a la teva disposició que en els primers dies del disseny responsiu. Per tant, val la pena comprovar la data dels materials de referència que consultes. Tot i que els articles històrics continuen sent útils, l’ús modern de CSS i HTML facilita molt la creació de dissenys elegants i útils, i independents del dispositiu del visitant.

+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}

+ +

En aquest mòdul

+ + diff --git a/files/ca/learn/css/css_layout/supporting_older_browsers/index.html b/files/ca/learn/css/css_layout/supporting_older_browsers/index.html new file mode 100644 index 0000000000..5a689b6437 --- /dev/null +++ b/files/ca/learn/css/css_layout/supporting_older_browsers/index.html @@ -0,0 +1,237 @@ +--- +title: Suport en navegadors antics +slug: Learn/CSS/Disseny_CSS/Suport_en_navegadors_antics +translation_of: Learn/CSS/CSS_layout/Supporting_Older_Browsers +--- +
{{LearnSidebar}}
+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}}

+ +

En aquest mòdul et recomanem que utilitzis els mètodes Flexbox i Grid com a eines principals per als teus dissenys. Tot i això, hi haurà visitants del teu lloc web que utilitzin navegadors més antics o navegadors que no admetin els mètodes que has utilitzat. Això sempre serà així a la xarxa: a mesura que es desenvolupen funcions noves, els diferents navegadors prioritzen coses diferents. Aquest article explica com utilitzar tècniques web modernes sense perjudicar els usuaris que empren una tecnologia més antiga.

+ + + + + + + + + + + + +
Prerequisits:Els conceptes bàsics d'HTML (consulta la Introducció a l'HTML), i nocions de com funciona el CSS (consulta la Introducció al CSS i Aplicar estil a les caixes).
Objectiu:Entendre com proporcionar assistència per als dissenys en navegadors antics que potser no són compatibles amb les funcions que vols utilitzar.
+ +

El panorama de compatibilitat dels navegadors per al teu lloc web?

+ +

Cada lloc web és diferent en termes de públic objectiu. Abans de decidir l’enfocament que cal adoptar, esbrina el nombre de visitants que accedeixen al teu lloc web amb navegadors més antics. Això és senzill si ja tens un lloc web que simplement modifiques o reemplaces, perquè probablement tinguis analítiques que t'indiquin la tecnologia que utilitzen les persones que hi accedeixen. Si no tens analítiques o es tracta un lloc web totalment nou, hi ha llocs com ara Statcounter que poden proporcionar estadístiques filtrades segons la ubicació.

+ +

També has de considerar el tipus de dispositius i la manera com la gent utilitza el teu lloc web; per exemple, potser esperes un nombre de dispositius mòbils superior a la mitjana. Sempre s’ha de tenir en compte l’accessibilitat i les persones que utilitzen tecnologia d’assistència, però per a alguns llocs pot ser encara més crític. Segons experiència pròpia, els desenvolupadors sovint es preocupen massa per l’experiència de l’1% d’usuaris en una versió antiga d’Internet Explorer, i no consideren del tot el nombre molt més gran d'usuaris que tenen necessitats d’accessibilitat especials.

+ +

La compatibilitat de les funcions que empres

+ +

Un cop coneixes els navegadors que accedeixen al teu lloc web, pots valorar qualsevol tecnologia que vulguis utilitzar segons la compatibilitat que presenten i la facilitat amb què pots proporcionar una alternativa als visitants que no tenen aquesta tecnologia disponible. Intentem facilitar-te aquesta experiència proporcionant informació de compatibilitat dels navegadors en cadascuna de les pàgines que detallen una propietat CSS. Per exemple, consulta la pàgina de {{cssxref("grid-template-columns")}}. Al final d'aquesta pàgina hi ha una taula que mostra els navegadors principals juntament amb la versió que va començar a admetre aquesta propietat.

+ +

+ +

Una altra manera més popular d'esbrinar què és compatible amb una funció és el lloc web Can I Use. Aquest lloc web enumera la majoria de funcions de la plataforma web amb informació sobre l'estat de compatibilitat del navegador. Pots veure les estadístiques d’ús per ubicació, fet que resulta útil si treballes en un lloc que té usuaris d'una àrea del món determinada. Fins i tot pots enllaçar el teu compte de Google Analytics per a obtenir anàlisis basades en les teves dades d’usuari.

+ +

Entendre la tecnologia que tenen els teus usuaris i les compatibilitats de les funcions que potser vulguis fer servir et proporciona una bona base per a prendre totes les decisions i saber quina és la millor manera de donar suport a tots els teus usuaris.

+ +

Compatibilitat no significa «veure's igual»

+ +

És possible que un lloc web no es vegi de la mateixa manera a tots els navegadors, perquè alguns dels teus usuaris accediran al lloc web des d’un dispositiu mòbil i d’altres des de l'ordinador de taula. De la mateixa manera, alguns dels teus usuaris tindran una versió antiga del navegador, i d'altres una de més nova. És possible que alguns dels teus usuaris n’escoltin el contingut amb un lector de pantalla o hagin fet zoom a la pàgina per a poder-la llegir. Donar suport a tothom significa servir una versió del contingut dissenyada estratègicament, de manera que es vegi genial en els navegadors moderns, però que encara puguin utilitzar a un nivell bàsic els usuaris de navegadors més antics.

+ +

Un nivell bàsic de compatibilitat prové d’estructurar bé el contingut perquè el flux normal de la pàgina tingui sentit. Pot ser que un usuari amb un telèfon mòbil amb funcions molt limitades no obtingui gran part del teu CSS, però el contingut fluirà de manera que faciliti la lectura. Per tant, un document HTML ben estructurat hauria de ser sempre el punt de partida. El teu contingut té sentit si suprimeixes el full d’estil?

+ +

Una opció és deixar aquesta visió senzilla del lloc web com a alternativa per a les persones que utilitzen navegadors molt antics o limitats. Si tens un nombre reduït de persones que visiten el lloc amb aquests navegadors, és possible que no tingui sentit comercial dedicar temps a intentar donar-los una experiència similar a la gent que utilitza navegadors moderns. Seria millor dedicar temps a coses que facin més accessible el lloc web, perquè així dones servei a molts més usuaris. Hi ha un punt intermedi entre una pàgina HTML simple i tots aquests recursos, i el CSS ha permès que la creació d'aquestes alternatives sigui bastant senzilla.

+ +

La creació d’alternatives d'emergència amb CSS

+ +

Les especificacions CSS contenen informació que explica què fa el navegador quan s'apliquen dos mètodes de disseny al mateix element. Això vol dir que hi ha una definició per a què passa si un element flotant, per exemple, també és un element de graella que utilitza disseny de graella CSS. Combina aquesta informació amb el fet que els navegadors ignoren el CSS que no entenen, i tens una manera de crear dissenys senzills amb les tècniques heretades que ja hem explicat, que després se sobreescriuen amb el teu disseny de graella en els navegadors moderns que l’entenen.

+ +

En l'exemple següent hem especificat que tres elements de flotació <div> es mostrin en fila. Qualsevol navegador que no admeti el disseny de graella CSS veurà la fila de caixes com un disseny amb el mètode de flotació. Un element de flotació que es converteix en un element de graella perd el comportament de flotació, i això significa que si convertim l'embolcall en un contenidor de graella, els elements de flotació es converteixen en elements de graella. Si el navegador admet el disseny de graella, mostrarà la pàgina en forma de graella; si no l’admet, ignorarà les propietats relacionades amb el disseny de graella i utilitzarà el disseny de flotació.

+ +
+
* {box-sizing: border-box;}
+
+.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  max-width: 400px;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+.item {
+  float: left;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+
+ +
<div class="wrapper">
+  <div class="item">Primer element</div>
+  <div class="item">Segon element</div>
+  <div class="item">Tercer element</div>
+</div>
+
+ +

{{ EmbedLiveSample('Example1', '100%', '200') }}

+
+ +
+

Nota: La propietat {{cssxref("clear")}} tampoc té cap efecte un cop l'element es converteix en un element de graella, de manera que pots tenir un composició amb un peu de pàgina esborrat, que es convertirà en un disseny de graella.

+
+ +

Mètodes de les solucions alternatives

+ +

Hi ha diversos mètodes de disseny que es poden utilitzar de manera similar a aquest exemple de flotació. Pots triar el que tingui més sentit per al patró de disseny que has de crear.

+ +
+
Float i clear
+
Com s'ha mostrat abans, les propietats float i clear deixen d'afectar el disseny si els elements que passen a ser de flotació o els esborrats es converteixen en elements flexibles o de graella.
+
display: inline-block
+
Aquest mètode es pot utilitzar per a crear dissenys de columnes si un element té display: inline-block, però si després es converteix en un element de disseny de tipus flexible o de graella, el comportament inline-block s'ignora.
+
display: table
+
El mètode per a crear taules CSS que es descriu en la introducció d'aquests articles es pot utilitzar com a mètode de solució alternativa. Els elements que estiguin configurats en la taula CSS perdran aquest comportament si es converteixen en elements Flexbox o Grid. Però és important destacar que les caixes sense nom que s’han creat per a corregir l'estructura de la taula, no es creen.
+
Disseny en diverses columnes
+
Pots utilitzar multi-col com a solució alternativa en certs dissenys; si el teu contenidor té definida alguna propietat column-* i es converteix en un contenidor amb comportament de graella, s'anul·la el comportament en columnes.
+
Flexbox com a solució alternativa a la graella
+
Flexbox té una compatibilitat de navegador més gran que Grid perquè ha rebut el suport d’Internet Explorer 10 i 11, tot i que et recomanem que comprovis la informació que trobaràs més endavant en aquest article sobre la compatibilitat força irregular i confusa de Flexbox en navegadors més antics. Si converteixes un contenidor flexible en un contenidor de graella, s'ignorarà qualsevol propietat flex aplicada als descendents.
+
+ +

Observa que si fas servir el CSS d'aquesta manera pots proporcionar una experiència d'usuari decent per ajustar moltes compaginacions en navegadors antics. Afegim un disseny més senzill basat en tècniques més antigues i amb bona compatibilitat, i després utilitzem el CSS més recent per a crear el disseny que veurà més del 90% del públic. Hi ha casos, però, en què el codi alternatiu haurà d’incloure alguna cosa que els navegadors nous també interpretaran. Un bon exemple d’això és si afegim amplades percentuals als nostres elements de flotació per aconseguir que les columnes s’assemblin més a la visualització de graella i s’estirin per omplir el contenidor.

+ +

En el disseny de flotació, el percentatge es calcula a partir del contenidor: el 33,333% és un terç de l'amplada del contenidor. Tanmateix, a la graella es calcula que el 33,333% es calcula a partir de l’àrea de la graella en què es troba l’element, de manera que es converteix en un terç de la mida que volem un cop introduït el disseny de graella.

+ +
+
* {box-sizing: border-box;}
+
+.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  max-width: 400px;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+.item {
+  float: left;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+  width: 33.333%;
+}
+
+ +
<div class="wrapper">
+  <div class="item">Primer element</div>
+  <div class="item">Segon element</div>
+  <div class="item">Tercer element</div>
+</div>
+
+ +

{{ EmbedLiveSample('Example2', '100%', '200') }}

+
+ +

Per resoldre aquest problema, hem de tenir una manera de detectar si la graella és compatible i, per tant, si anul·larà l'amplada. El CSS té una solució.

+ +

Consultar les propietats

+ +

Consultar les propietats et permet provar si un navegador admet alguna funció CSS en concret. Això vol dir que pots escriure algun CSS per a navegadors que no admetin una característica determinada, i a continuació comprovar si el navegador és compatible i introduir el teu disseny.

+ +

Si afegim una consulta de propietats en l’exemple anterior, podem utilitzar-la per a configurar les amplades dels nostres articles de manera automàtica (auto) si sabem que hi ha compatibilitat amb el disseny de graella.

+ +
+
* {box-sizing: border-box;}
+
+.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  max-width: 400px;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+.item {
+  float: left;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+  width: 33.333%;
+}
+
+@supports (display: grid) {
+  .item {
+      width: auto;
+  }
+}
+
+ +
<div class="wrapper">
+  <div class="item">Primer element</div>
+  <div class="item">Segon element</div>
+  <div class="item">Tercer element</div>
+</div>
+
+ +

{{ EmbedLiveSample('Example3', '100%', '200') }}

+
+ +

La compatibilitat per a la consulta de propietats és molt bona en tots els navegadors moderns, però cal tenir en compte que són els navegadors que no admeten la graella CSS els que tampoc no admeten la consulta de propietats. Això significa que per a aquells navegadors funcionarà un enfocament com el que es detalla més amunt. El que fem és escriure primer el nostre CSS anterior, sense fer cap consulta de propietats. Els navegadors que no admeten la graella i no admeten la consulta de propietats faran servir la informació de disseny que poden comprendre i ignoraran completament la resta. Els navegadors que admeten la consulta de propietats també admeten la graella, i per tant executaran el codi de graella i el codi de la consulta de propietats.

+ +

L'especificació per a la consulta de propietats també inclou la possibilitat de comprovar si un navegador no admet una propietat; això només és útil si el navegador admet consultes de propietats. En el futur tindrà sentit un enfocament que comprovi la falta de compatibilitats, perquè ja no existiran els navegadors que no disposen de compatibilitats per a la consulta. Ara, però, utilitza l’enfocament de fer servir el CSS anterior i sobreescriure'l per a obtenir la millor compatibilitat.

+ +

Les versions anteriors de Flexbox

+ +

En versions anteriors dels navegadors, pots trobar versions anteriors de l'especificació Flexbox. En el moment d’escriure això, es tracta principalment d’un problema amb Internet Explorer 10, que utilitza el prefix -ms- per a Flexbox. Això també significa que hi ha articles i tutorials obsolets; aquesta guia útil t'ajuda a comprovar el que busques, i també pot ajudar-te si necessites compatibilitat Flexbox en navegadors molt antics.

+ +

La versió prefixada de graella de l’Internet Explorer 10 i 11

+ +

L'especificació de graella CSS es va prototipar inicialment en Internet Explorer 10; això vol dir que, tot i que IE10 i IE11 no disposen de compatibilitat de graella moderna, sí que tenen una versió de disseny de graella molt útil, tot i que diferent de l’especificació moderna que documentem en aquest lloc. Les implementacions d’IE10 i 11 tenen el prefix -ms-, que significa que les pots utilitzar per a aquests navegadors i que s'ignoraran en els navegadors que no formin part de Microsoft. Tanmateix, Edge encara entén la sintaxi antiga, així que tingues cura que tot es sobreescrigui de manera segura al teu CSS de graella moderna.

+ +

La guia per a la Millora progressiva del disseny de graella et pot ajudar a comprendre la versió de la graella d’Internet Explorer, i hem inclòs alguns enllaços útils addicionals al final d'aquest article. Tanmateix, a menys que tinguis un nombre molt elevat de visitants en versions d’Internet Explorer més antigues, potser és millor centrar-te en la creació d’una alternativa que funcioni per a tots els navegadors no compatibles.

+ +

Proves amb navegadors antics

+ +

Atès que la majoria de navegadors admeten Flexbox i la graella, pot ser raonablement difícil fer proves amb navegadors més antics. Una de les maneres és utilitzar una eina de prova en línia com Sauce Labs, tal i com es detalla en el mòdul de comprovació de compatibilitat entre navegadors.

+ +

També pots descarregar i instal·lar màquines virtuals i executar versions anteriors de navegadors en un entorn contingut en el teu ordinador. Tenir accés a versions anteriors d’Internet Explorer és especialment útil, i amb aquest propòsit Microsoft ha posat a disposició dels usuaris una varietat de màquines virtuals de descàrrega gratuïta. Estan disponibles per als sistemes operatius Mac, Windows i Linux, i per tant són una bona manera de fer proves en navegadors Windows antics i moderns, encara que no utilitzis un ordinador amb sistema operatiu de Windows.

+ +

Resum

+ +

Ara tens el coneixement per utilitzar tècniques de confiança com ara Grid i Flexbox, crear solucions alternatives per a navegadors més antics i utilitzar qualsevol tècnica nova que pugui aparèixer en el futur.

+ +

Consulta també

+ + + +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}}

+ +

En aquest mòdul

+ + diff --git a/files/ca/learn/css/disseny_css/disseny_responsiu/index.html b/files/ca/learn/css/disseny_css/disseny_responsiu/index.html deleted file mode 100644 index 5bf909e6e7..0000000000 --- a/files/ca/learn/css/disseny_css/disseny_responsiu/index.html +++ /dev/null @@ -1,324 +0,0 @@ ---- -title: Disseny responsiu -slug: Learn/CSS/Disseny_CSS/Disseny_responsiu -translation_of: Learn/CSS/CSS_layout/Responsive_Design ---- -
{{learnsidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}
- -

En els primers dies del disseny de pàgines web es creaven pàgines per a una mida de pantalla determinada. Si l’usuari tenia una pantalla més gran o més petita que la que el dissenyador s’esperava, els resultats anaven des de barres de desplaçament no desitjades fins a línies excessivament llargues i un mal ús de l’espai. A mesura que apareixien mides de pantalla més diverses, va aparéixer el concepte de disseny web responsiu (RWD o responsive web design), un conjunt de pràctiques que permeten a les pàgines web alterar el disseny i l’aparença per a adaptar-se a diferents amplades, resolucions, etc. És una idea que ha canviat la manera de dissenyar una pàgina web per a diversos dispositius, i en aquest article t’ajudarem a entendre les principals tècniques que has de conèixer per a dominar-la.

- - - - - - - - - - - - -
Prerequisits:Conceptes bàsics d’HTML (consulta la Introducció a l’HTML), i nocions de com funciona el CSS (consulta els Primers passos amb el CSS i els elements bàsics del CSS).
Objectiu:Entendre els conceptes fonamentals i la història del disseny responsiu.
- -

Història dels dissenys de pàgina web

- -

En un moment de la història, només tenies dues opcions a l’hora de dissenyar un lloc web:

- - - -

Aquests dos enfocaments tenien com a resultat un lloc web que s’adequava essencialment a la pantalla de la persona que havia dissenyat el lloc web. El lloc web líquid donava un disseny aixafat en pantalles més petites (com es pot veure a continuació), i línies molt llargues que costaven molt de llegir en les pantalles grans.

- -
Una disposició amb dues columnes aixafades en una finestra de visualització de la mida d’un dispositiu mòbil. -
-
- -
-

Nota: Observa aquest disseny de pàgina web líquid senzill: exemple, codi d’origen. Amplia o redueix la finestra del navegador i observa com en canvia l’aspecte segons les diferents mides.

-
- -

Amb llocs web amb amplada fixa es corria el risc d’aparició d’una barra de desplaçament horitzontal en les pantalles que eren més petites que l’amplada del lloc web (com es pot veure a continuació) i de molta superfície blanca a les vores del disseny en les pantalles que eren més grans.

- -
Disseny amb barra de desplaçament horitzontal en una finestra de visualització de la mida d’un dispositiu mòbil. -
-
- -
-

Nota: Observa aquest disseny de pàgina web senzill d’amplada fixa: exemple, codi d’origen. Un cop més, canvia la mida de la finestra del navegador i observa’n el resultat.

-
- -
-

Nota: Les captures de pantalla de dalt es fan amb el mode de disseny responsiu de les DevTools de Firefox.

-
- -

A mesura que la web per a dispositius mòbils va començar a esdevenir una realitat amb els primers telèfons mòbils, les companyies que volien adherir-se en general a la tecnologia mòbil creaven una versió del lloc web especial per a dispositius mòbils amb una URL diferent (sovint alguna cosa com ara m.example.com o example.mobi). Això volia dir que calia desenvolupar i mantenir actualitzades dues versions independents de la mateixa pàgina web.

- -

A més, aquests llocs web per a dispositius mòbils solien oferir una experiència d’usuari molt reduïda. Com que els dispositius mòbils es van tornar més potents i van poder mostrar llocs web complets, això frustrava els usuaris de dispositius mòbils, que es trobaven atrapats en la versió mòbil del lloc web i no podien accedir a informació que sabien que hi havia en la versió d’escriptori, que incloïa totes les funcions de la pàgina web.

- -

Disseny flexible abans del disseny responsiu

- -

Es van desenvolupar diversos enfocaments per a intentar resoldre els inconvenients dels mètodes líquids o d’amplada fixa per a crear llocs web. El 2004, Cameron Adams va escriure una publicació titulada Resolution dependent layout, on descriu un mètode per a crear un disseny de pàgina web que s’adapta a diferents resolucions de pantalla. Aquest enfocament requeria JavaScript per a detectar la resolució de la pantalla i carregar el CSS correcte.

- -

Zoe Mickley Gillenwater va ser fonamental en la seva tasca de descriure i formalitzar les diferents maneres de crear llocs web flexibles, per a intentar trobar una situació intermèdia entre omplir tota la pantalla o tenir una mida completament fixa.

- -

El disseny responsiu

- -

El terme disseny responsiu va ser creat per Ethan Marcotte el 2010, que va descriure l’ús de tres tècniques combinades.

- -
    -
  1. La primera va ser la idea de les graelles fluides, cosa que ja explorava Gillenwater, i que es pot llegir en l’article de Marcotte, Fluid grids (publicat el 2009 en A list apart).
    2. -
  2. La segona tècnica va ser la idea d’imatges fluides. Utilitzant una tècnica molt senzilla d’establir la propietat max-width al 100%, les imatges es farien més petites si la columna que les contenia es feia més estreta que la mida intrínseca de la imatge, però mai no augmentaria. D’aquesta manera, una imatge s’escala per a poder-se incloure en una columna de mida flexible sense que desbordi, però no es fa més gran i es pixela si la columna s’amplia més que la imatge.
    3. -
  3. El tercer component clau va ser la consulta de mèdia (o media query). Les consultes de mèdia habiliten el tipus de canvi de disseny de pàgina web que Cameron Adams havia explorat abans amb JavaScript, però utilitzant només CSS. En lloc de tenir un disseny de pàgina web per a cada mida de pantalla, se’n podria tenir un i canviar-ne la disposició dels elements. Es podrien fer aparèixer barres laterals per a les pantalles més petites, o es podia mostrar una navegació alternativa.
    4. -
- -

És important entendre que el disseny web responsiu no és una tecnologia independent: és un terme que s’utilitza per a descriure un enfocament del disseny de pàgines web o un conjunt de bones pràctiques que s’utilitzen per a crear un disseny de pàgines web que pugui respondre segons el dispositiu que s’utilitza per a visualitzar el contingut. En l’exploració original de Marcotte, això va donar lloc a les graelles flexibles (amb elements flotants) i les consultes de mèdia; però en els gairebé deu anys des que es va escriure aquest article, treballar de manera responsiva s’ha convertit en la norma. Els mètodes de disseny amb CSS moderns són intrínsecament responsius, i hi ha novetats integrades a la plataforma web que faciliten el disseny de llocs web responsius.

- -

La resta d’aquest article t’indica les diverses funcions de la plataforma web que pots utilitzar per a crear un lloc web responsiu.

- -

Les consultes a mèdia (media queries)

- -

El disseny responsiu només va poder sorgir a causa de les consultes a mèdia. L’especificació del nivell 3 de les consultes a mèdia es va convertir en una Candidate Recommendation el 2009, cosa que significa que es considerava llesta per a implementar-la en els navegadors. Les consultes a mèdia ens permeten fer un seguit de proves (per exemple, si la pantalla de l’usuari és més gran que una certa amplada o una determinada resolució) i aplicar CSS de manera selectiva per a dissenyar la pàgina web més adequada segons les necessitats de l’usuari.

- -

Per exemple, la consulta als mèdia següent esbrina si la pàgina web que es mostra ho fa com una pantalla (per tant, no és un document imprès), i si la finestra té almenys 800 píxels d’ample. El CSS per al selector .container només s’aplica si aquestes dues coses són certes.

- -
@media screen and (min-width: 800px) {
-  .container {
-    margin: 1em 2em;
-  }
-} 
-
- -

Pots afegir diverses consultes a mèdia dins d’un full d’estil, i ajustar el disseny sencer o només unes parts perquè s’adapti més bé a les diverses mides de pantalla. Els punts en què s’introdueix una consulta de mèdia i es canvia la disposició dels elements de la pàgina web es coneixen com punts de ruptura.

- -

Un enfocament habitual quan s’utilitzen les consultes als mèdia és crear un disseny senzill d’una sola columna per a dispositius de pantalla estreta (per exemple, telèfons mòbils), després comprovar si hi ha pantalles més grans i implementar una disposició en múltiples columnes quan saps que tens prou amplada de pantalla per a fer-ho. Sovint es descriu com disseny mobile first.

- -

Trobaràs més informació en la documentació de MDN per a les consultes als mèdia.

- -

Graelles flexibles

- -

Els llocs responsius no només canvien la distribució entre punts de ruptura, sinó que es basen en graelles flexibles. Una graella flexible significa que no cal delimitar el lloc web a totes les mides possibles de dispositius que hi ha i crear un disseny en píxels perfecte. Aquest plantejament seria impossible, atès el gran nombre de dispositius de mida diferent que hi ha, i del fet que, com a mínim en la versió d’escriptori, la finestra del navegador no sempre es maximitza.

- -

Si fas servir una graella flexible, només has d’afegir un punt de ruptura i canviar el disseny en el punt en què el contingut es comença a veure malament. Per exemple, si les longituds de les línies es fan il·legibles a mesura que augmenta la mida de la pantalla, o si una caixa s’encongeix fins a una amplada de dues paraules en cada línia a mesura que la mida de la pantalla es redueix.

- -

En els primers dies del disseny responsiu, l’única opció per a dissenyar pàgines web era utilitzar elements flotants. Els dissenys de pantalla amb elements flotants flexibles s’aconseguien donant a cada element una amplada en percentatge i assegurar-se que no s’atenyia més del 100% per a tota la pàgina. En la seva obra original sobre graelles flexibles, Marcotte va detallar una fórmula per a convertir en percentatges un disseny de pàgina dissenyat en píxels.

- -
target / context = result 
-
- -

Per exemple, si la mida de la nostra columna de destinació és de 60 píxels i el context (o contenidor) en què es troba és de 960 píxels, dividim 60 per 960 i obtenim un valor que podem utilitzar en el nostre CSS, després de traslladar el punt decimal dos llocs a la dreta.

- -
.col {
-  width: 6.25%; /* 60 / 960 = 0.0625 */
-} 
-
- -

Avui dia trobaràs aquest enfocament en molts llocs web, i també el trobaràs documentat aquí, en la secció dedicada al disseny de l’article de mètodes heretats de disseny de pàgines web. És probable que en el transcurs del teu treball et trobis amb llocs web que usen aquest enfocament, de manera que val la pena entendre’l, tot i que no construiràs un lloc modern amb una graella flexible basada en elements flotants.

- -

L’exemple següent mostra un disseny senzill i sensible amb consultes a mèdia i una graella flexible. En pantalles estretes, el disseny mostra les caixes apilades les unes sobre les altres:

- -
Una vista d’un dispositiu mòbil amb una disposició de caixes apilades verticalment l’una sobre l’altra. -
-
- -

En pantalles més amples es passa a dues columnes:

- -
Una vista d’un dispositiu d’escriptori d’un disseny amb dues columnes. -
-
- -
-

Nota: Pots trobar l’exemple en viu i el codi d’origen d’aquest exemple a GitHub.

-
- -

Tecnologies modernes de disseny de pàgines web

- -

De manera predeterminada, els mètodes moderns de disseny de pàgines web com ara el disseny en múltiples columnes, el Flexbox i el Grid són responsius per defecte. Tots aquests mètodes parteixen de la base que vols crear una graella flexible i et proporcionen les maneres de fer-ho més fàcils.

- -

Multicol

- -

El més antic d’aquests mètodes de disseny de pàgines web és multicol: quan especifiques un nombre de columnes (column-count), indiques en quantes columnes vols dividir el contingut. El navegador llavors calcula la mida d’aquestes columnes, que canvia d’acord amb la mida de la pantalla.

- -
.container {
-  column-count: 3;
-} 
-
- -

Si en lloc d’això estableixes l’atribut column-width, especifiques una amplada mínima. El navegador crea tantes columnes d’aquesta amplada com càpiguen còmodament en el contenidor, i reparteix l’espai entre totes les columnes. Per tant, el nombre de columnes canvia segons la quantitat d’espai que hi ha.

- -
.container {
-  column-width: 10em;
-} 
-
- -

Flexbox

- -

Amb la tecnologia Flexbox, els elements flexibles es redueixen i distribueixen l’espai entre els elements d’acord amb l’espai que hi ha en el contenidor segons el comportament inicial que tenen predeterminat. Si canvies els valors de flex-grow i flex-shrink, pots indicar com vols que es comportin els elements quan hi ha més o menys espai al voltant.

- -

En l’exemple següent, els elements flexibles ocupen cada un la mateixa quantitat d’espai en el contenidor flexible, mitjançant la propietat abreviada flex: 1, com es descriu en l’article Flexbox: Dimensions flexibles d’elements flex.

- -
.container {
-  display: flex;
-}
-
-.item {
-  flex: 1;
-} 
-
- -
-

Nota: Com a exemple hem reconstruït el disseny responsiu senzill anterior, aquest cop amb Flexbox. Pots veure que ja no cal fer servir valors percentuals estranys per a calcular la mida de les columnes: exemple, codi d’origen.

-
- -

Graella CSS

- -

En el disseny de pàgines web amb graella CSS, la unitat fr permet distribuir l’espai disponible en les traces d’una graella. L’exemple següent crea un contenidor de graella amb tres traces de mida 1fr. Es creen tres traces de columna, i cadascuna ocupa una part de l’espai disponible en el contenidor. Pots obtenir més informació sobre aquest enfocament per a crear una graella en la secció Aprendre a dissenyar graelles, de l’article Graelles flexibles amb la unitat fr.

- -
.container {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-} 
-
- -
-

Nota: La versió del disseny de pàgines web amb graella és encara més senzilla, perquè permet definir les columnes amb .wrapper: exemple, codi d’origen.

-
- -

Imatges responsives

- -

L’enfocament més senzill de les imatges responsives es va descriure en els primers articles de Marcotte sobre el disseny de pàgines web responsiu. Bàsicament, agafes una imatge de la mida més gran que puguis necessitar, i la redueixes. Aquest és encara un enfocament emprat avui, i en la majoria de fulls d’estil trobaràs en algun lloc el CSS següent:

- -
img {
-  max-width: 100%:
-} 
-
- -

Hi ha inconvenients evidents en aquest enfocament. És possible que la imatge es mostri molt més petita que la seva mida intrínseca, i això representa una pèrdua d’amplada de banda: un usuari de dispositiu mòbil pot acabar descarregant una imatge que és diverses vegades de la mida del que realment veu a la finestra del navegador. A més, pot ser que no vulguis la mateixa relació d’aspecte de la imatge al mòbil i a l’escriptori. Per exemple, pot ser bo tenir una imatge quadrada per a mòbils, i mostrar la mateixa imatge en format apaïsat a l’escriptori. O bé, tenint en compte la mida més petita del dispositiu mòbil, pot ser que hi vulguis mostrar una imatge diferent, que s’entengui més fàcilment en una pantalla petita. Aquestes coses no es poden aconseguir simplement reduint una imatge.

- -

Les imatges responsives, amb l’element {{htmlelement("picture")}} i els atributs srcset i sizes de {{htmlelement("img")}} resolen tots dos problemes. Pots proporcionar diverses mides, juntament amb «suggeriments» (metadades que descriuen la mida de la pantalla i la resolució a la qual s’adapta la imatge), i el navegador tria la imatge més adequada per a cada dispositiu i procura que l’usuari descarregui la mida adequada de la imatge en el dispositiu que utilitza.

- -

També pots usar imatges de director artístic, que proporcionen un retall o una imatge completament diferent per a diferents mides de pantalla.

- -

Pots trobar una guia detallada sobre Imatges responsives en el mòdul Aprendre HTML de MDN.

- -

Tipografia responsiva

- -

Un element de disseny responsiu que encara no hem tractat en articles anteriors és la idea de la tipografia responsiva. Aquest concepte descriu essencialment el fet de canviar la mida de lletra segons l’espai de pantalla que reflecteixen les consultes a mèdia.

- -

En aquest exemple, volem establir el nostre títol d’encapçalament de nivell 1 en 4rem, és a dir, que serà quatre vegades la mida de la nostra lletra base. És un títol molt gran! Només volem aquest títol d’encapçalament tan gran en mides de pantalla grans, per tant, primer creem un títol d’encapçalament més petit i després utilitzem les consultes a mèdia per a sobreescriure’l amb la mida més gran si sabem que l’usuari té una mida de pantalla d’almenys 1200px.

- -
html {
-  font-size: 1em;
-}
-
-h1 {
-  font-size: 2rem;
-}
-
-@media (min-width: 1200px) {
-  h1 {
-    font-size: 4rem;
-  }
-} 
-
- -

Hem editat el nostre exemple de graella responsiva per a incloure el tipus responsiu amb el mètode descrit. Pots veure com el títol d’encapçalament canvia de mida a mesura que el disseny canvia a la versió de dues columnes.

- -

En el dispositiu mòbil, el títol d’encapçalament és més petit:

- -
Un esquema apilat amb una mida de títol d’encapçalament petita. -
-
- -

Tanmateix, en el dispositiu d’escriptori veiem la mida del títol d’encapçalament més gran:

- -
Un disseny de dues columnes amb un títol d’encapçalament gran. -
-
- -
-

Nota: Observa aquest exemple en acció: exemple, codi d’origen.

-
- -

Tal com mostra aquest enfocament de la tipografia, no cal restringir les consultes a mèdia a canviar només el disseny de pàgina web. Es poden utilitzar per a ajustar qualsevol element i fer-lo més útil o atractiu a les diverses mides de pantalla.

- -

L’ús d’unitats de finestra de visualització per a tipografies responsives

- -

Un enfocament interessant és utilitzar la unitat vw de finestra de visualització per a habilitar la tipografia responsiva. 1vw és igual a un 1 per cent de l’amplada de la visualització, cosa que significa que si defineixes la mida de la lletra amb vw, sempre es relacionarà amb la mida de la finestra de visualització.

- -
h1 {
-  font-size: 6vw;
-}
- -

El problema de fer servir la unitat vw és que l’usuari perd la capacitat d’ampliar un bloc de text, perquè aquest text sempre està relacionat amb la mida de la finestra de visualització. Per tant, mai no hauries de definir text fent servir només les unitats de finestra de visualització.

- -

Hi ha una solució, que implica l’ús de calc(). Si afegeixes la unitat vw a un conjunt de valors amb una mida fixa com em o rem, encara es pot fer zoom del text. Essencialment, la unitat vw s’afegeix a sobre d’aquest valor ampliat:

- -
h1 {
-  font-size: calc(1.5rem + 3vw);
-}
- -

Això vol dir que només hem d’especificar la mida de la lletra per al títol d’encapçalament, en lloc de configurar-la per a dispositius mòbils i redefinir-la segons les consultes a mèdia. A continuació, la lletra augmenta gradualment a mesura que augmenta la mida de la finestra de visualització.

- -
-

Observa aquest exemple en acció: exemple, codi d’origen.

-
- -

L’etiqueta meta de la finestra de visualització

- -

Si observes el tipus de lletra d’una pàgina HTML responsiva, normalment trobaràs l’etiqueta {{htmlelement("meta")}} a la capçalera (<head>) del document.

- -
<meta name="viewport" content="width=device-width,initial-scale=1">
-
- -

Aquesta etiqueta meta indica als navegadors dels dispositius mòbils que han d’establir l’amplada de la finestra de visualització a l’amplada del dispositiu i escalar el document al 100% de la mida prevista, cosa que mostra el document a la mida optimitzada per a dispositius mòbils.

- -

Per què cal, això? Perquè els navegadors dels dispositius mòbils tendeixen a mentir sobre l’amplada de la finestra de visualització.

- -

Aquesta etiqueta meta existeix perquè quan es va llançar l’iPhone original i la gent va començar a veure llocs web en una petita pantalla de telèfon, la majoria dels llocs web no estaven optimitzats per a dispositius mòbils. Per tant, el navegador del dispositiu mòbil establia l’amplada de la visualització a 960 píxels, la representava a aquella amplada i mostrava el resultat com la versió ampliada del disseny per al dispositiu d’escriptori. Altres navegadors de dispositius mòbils (per exemple, el de Google Android) van fer el mateix. Els usuaris podien fer zoom i desplaçar-se per la web per a veure els fragments que els interessaven, però allò no era còmode. Encara ho podràs veure si tens la mala sort d’anar a parar a un lloc web que no té un disseny responsiu.

- -

El problema és que el teu disseny responsiu amb punts de ruptura i consultes a mèdia no funciona tal com es preveu per als navegadors mòbils. Si tens un disseny de pantalla estret que s’inicia amb una amplada de visualització de 480px o menys i la ruptura s’estableix a 960px, mai no veuràs la disposició de pantalla estreta al dispositiu mòbil. En canvi, si defineixes width=device-width, sobreescrius l’amplada predeterminada d’Apple width=960px amb l’amplada real del dispositiu, de manera que les consultes a mèdia permetran que funcioni com es preveu.

- -

Per tant, sempre has d’incloure la línia HTML anterior a la capçalera dels teus documents.

- -

Hi ha altres opcions de configuració que pots utilitzar amb l’etiqueta meta de la finestra de visualització, però, en general, t’anirà bé utilitzar la línia anterior.

- - - -

Has d’evitar l’ús de minimum-scale, maximum-scale, i en particular la configuració de user-scalable en no. Els usuaris haurien de poder fer zoom en la mesura que necessitin; impedir això genera problemes d’accessibilitat.

- -
-

Nota: Hi ha una @rule CSS dissenyada per a substituir l’etiqueta meta de la finestra de visualització (@viewport), però té una compatibilitat de navegadors deficient. Es va implementar a Internet Explorer i Edge, però un cop entri en funcionament Edge basat en Chromium, deixarà de formar part del navegador Edge.

-
- -

Resum

- -

El disseny responsiu es refereix a un disseny de lloc o d’aplicació que respon a l’entorn en què es visualitza. Comprèn diverses funcions i tècniques CSS i HTML, i ara és essencialment l’única manera com construïm els llocs web per defecte. Tingues en compte els llocs web que visites amb el dispositiu mòbil: probablement és poc habitual trobar-te amb un lloc que és la versió reduïda de la d’escriptori, o en què cal desplaçar-se de costat per a trobar-hi coses. Això és perquè la xarxa web s’ha orientat cap a aquest enfocament de disseny responsiu.

- -

També ha estat molt més fàcil aconseguir dissenys responsius amb l’ajuda dels mètodes de disseny que has après en aquests articles. Si ets nou en el desenvolupament web, avui tens moltes més eines a la teva disposició que en els primers dies del disseny responsiu. Per tant, val la pena comprovar la data dels materials de referència que consultes. Tot i que els articles històrics continuen sent útils, l’ús modern de CSS i HTML facilita molt la creació de dissenys elegants i útils, i independents del dispositiu del visitant.

- -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}

- -

En aquest mòdul

- - diff --git "a/files/ca/learn/css/disseny_css/exemples_pr\303\240ctics_posicionament/index.html" "b/files/ca/learn/css/disseny_css/exemples_pr\303\240ctics_posicionament/index.html" deleted file mode 100644 index dfaac7f63c..0000000000 --- "a/files/ca/learn/css/disseny_css/exemples_pr\303\240ctics_posicionament/index.html" +++ /dev/null @@ -1,404 +0,0 @@ ---- -title: Exemples pràctics de posicionament -slug: Learn/CSS/Disseny_CSS/Exemples_pràctics_posicionament -tags: - - Article - - Beginner - - CSS - - CodingScripting - - Guide - - Layout - - Learn - - absolute - - fixed - - relative -translation_of: Learn/CSS/CSS_layout/Practical_positioning_examples ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}
- -

Amb els fonaments del posicionament coberts en l'últim article, ara veurem com crear alguns exemples del món real, per il·lustrar quin tipus de coses podeu fer amb el posicionament.

- - - - - - - - - - - - -
Requisits previs:Conceptes bàsics d'HTML (estudi Introducció a HTML), i una idea de com funciona CSS (estudi Introducció a CSS).
Objectiu:Tenir una idea dels aspectes pràctics del posicionament
- -

Una caixa d'informació amb pestanyes

- -

El primer exemple que veurem és una caixa d'informació amb pestanyes clàssica - una característica molt freqüent que es fa servir quan voleu empaquetar molta informació en una petita àrea. Això inclou aplicacions de gran abast d'informació, com ara jocs d'estratègia/guerra, versions mòbils de llocs web on la pantalla és estreta i l'espai és limitat, i caixes d'informació compactes on és possible que vulgueu tenir molta informació disponible sense haver d'omplir tota la IU. El nostre senzill exemple es veurà així una vegada que hàgim acabat:

- -

- -
-

Nota: Podeu veure l'exemple acabat executant-ho en directa a info-box.html (codi font). Consulteu-ho per tenir una idea del que estareu construint en aquesta secció de l'article.

-
- -

Podeu estar pensant "per què no crear les pestanyes separades com a pàgines web independents, i només les pestanyes, fent clic a través de les pàgines independents per crear l'efecte?" Aquest codi seria més senzill, sí, però cada visualització de "pàgina" per separat seria en realitat una pàgina web recentment carregada, la qual cosa faria més difícil guardar la informació entre les vistes i integrar aquesta característica en un disseny de d'interfície d'usuari més gran. A més, les anomenades "aplicacions de pàgina única" s'estan tornant molt populars - especialment per a les d'interfície d'usuari web mòbils - ja que tenir tot el que serveix com un únic arxiu redueix el nombre de sol·licituds HTTP necessàries per visualitzar tot el contingut, millorant així el rendiment.

- -
-

Nota: Alguns desenvolupadors web porten les coses encara més lluny, només tenen una pàgina d'informació carregada alhora i canvien dinàmicament la informació que es mostra utilitzant, una funció de JavaScript com XMLHttpRequest. En aquest punt de l'aprenentatge, però, volem que les coses siguin tan simples com sigui possible. Hi ha una mica de JavaScript més endavant, però només una mica.

-
- -

Per començar, ens agradaria que féssiu una còpia del fitxer HTML d'inici - info-box-start.html. Deseu-lo en algun lloc sensible a l'ordinador i obrir-ho en el vostre editor de text. Vegem l'HTML contingut en el cos:

- -
<section class="info-box">
-  <ul>
-    <li><a href="#" class="active">Tab 1</a></li>
-    <li><a href="#">Tab 2</a></li>
-    <li><a href="#">Tab 3</a></li>
-  </ul>
-  <div class="panels">
-    <article class="active-panel">
-      <h2>The first tab</h2>
-
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. Vestibulum et orci scelerisque, vulputate tellus quis, lobortis dui. Vivamus varius libero at ipsum mattis efficitur ut nec nisl. Nullam eget tincidunt metus. Donec ultrices, urna maximus consequat aliquet, dui neque eleifend lorem, a auctor libero turpis at sem. Aliquam ut porttitor urna. Nulla facilisi.</p>
-    </article>
-    <article>
-      <h2>The second tab</h2>
-
-      <p>This tab hasn't got any Lorem Ipsum in it. But the content isn't very exciting all the same.</p>
-    </article>
-    <article>
-      <h2>The third tab</h2>
-
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. And now an ordered list: how exciting!</p>
-
-      <ol>
-        <li>dui neque eleifend lorem, a auctor libero turpis at sem.</li>
-        <li>Aliquam ut porttitor urna.</li>
-        <li>Nulla facilisi</li>
-      </ol>
-    </article>
-  </div>
-</section>
- -

Així que aquí tenim un element {{htmlelement("section")}} amb una class info-box, que conté un {{htmlelement("ul")}} i un {{htmlelement("div")}}. La llista desordenada conté tres elements de llista amb enllaços a l'interior, que es convertiran en les pestanyes reals per fer clic, per visualitzar els nostres panells de contingut. El div conté tres elements {{htmlelement("article")}}, que formaran els panells de contingut que corresponen a cada pestanya. Cada panell conté alguns continguts d'exemple.

- -

La idea, aquí, és fer que l'estil de pestanyes pogui semblar-se a un menú estàndard de navegació horitzontal i donant-li estil els panells per a que s'asseguin un damunt de l'altre mitjançant el posicionament absolut. També us donarem una mica de JavaScript per incloure a la vostra pàgina, per mostrar el panell corresponent quan es pressiona una pestanya i l'estil de la pestanya en si. No necessitareu entendre el JavaScript en aquesta etapa, però haureu de pensar en aprendre una mica de JavaScript bàsic, el més aviat possible - com més complexes siguin les característiques de la vostra interfície d'usuari, més probable és que necessiteu implementar JavaScript a la vostra funcionalitat desitjada.

- -

Configuració general

- -

Per començar, afegiu el següent entre l'obertura i tancament de les etiquetes {{HTMLElement("style")}}:

- -
html {
-  font-family: sans-serif;
-}
-
-* {
-  box-sizing: border-box;
-}
-
-body {
-  margin: 0;
-}
- -

Aquesta és només una configuració general per establir una font sans-serif a la nostra pàgina, utilitzar el model border-box de {{cssxref("box-sizing")}} i desfer-se del marge predeterminat de {{htmlelement("body")}}.

- -

A continuació, afegiu el següent just a sota del vostre CSS anterior:

- -
.info-box {
-  width: 450px;
-  height: 400px;
-  margin: 0 auto;
-}
- -

Això estableix un ample i alçada específic sobre el contingut i el centra a la pantalla mitjançant el antic truc margin: 0 auto;. Anteriorment en el curs, vam aconsellar no establir una alçada fixa en contenidors de contingut, si fos possible; Està bé en aquesta circumstància, perquè tenim contingut fix en les nostres pestanyes. També sembla una mica discordant tenir diferents pestanyes a diferents alçades.

- -

Estilitzar les nostres pestanyes

- -

Ara volem que les pestanyes d'estil semblin com a pestanyes - bàsicament, aquest és un menú de navegació horitzontal, però en comptes de carregar diferents pàgines web quan es fa clic, com hem vist prèviament al curs, fa que es mostrin panells diferents en la mateixa pàgina. Primer, afegiu la següent regla a la part inferior del vostre CSS per eliminar el valor predeterminat {{cssxref("padding-left")}} i {{cssxref("margin-top")}} de la llista no ordenada:

- -
.info-box ul {
-  padding-left: 0;
-  margin-top: 0;
-}
- -
-

Nota: Estem utilitzant selectors descendents amb .info-box al principi de la cadena a través d'aquest exemple - això és per poguer inserir aquesta funció en una pàgina amb un altre contingut ja en ella, sense por a interferir amb els estils aplicats a altres parts de la pàgina.

-
- -

A continuació, dissenyarem les pestanyes horitzontals - els elements de la llista es flotant tots cap a l'esquerra per fer que s'asseguin en una sola línia, el seu {{cssxref("list-style-type")}} s'estableix a none per desfer-se de les vinyetes i el seu {{cssxref("width")}} s'estableix a 150px perquè s'ajusti còmodament a través de la caixa d'informació (info-box). Els elements {{htmlelement("a")}} estan configurats en {{cssxref("display")}} inline-block, perquè s'asseguin en una línia però que encara siguin estilitzables, i estiguin dissenyats adequadament per als botons de pestanya, usant una varietat d'altres propietats.

- -

Afegiu el següent CSS:

- -
.info-box li {
-  float: left;
-  list-style-type: none;
-  width: 150px;
-}
-
-.info-box li a {
-  display: inline-block;
-  text-decoration: none;
-  width: 100%;
-  line-height: 3;
-  background-color: red;
-  color: black;
-  text-align: center;
-}
- -

Finalment, per a aquesta secció, establirem alguns estils als estats de l'enllaç. En primer lloc, configurarem els estats :focus i :hover de les pestanyes, perquè es vegin diferents quan estan enfocats/planejats, oferint als usuaris alguna infomació visual. En segon lloc, establirem una regla que posi el mateix estil en una de les pestanyes quan hi hagi una class active present en ella. Definirem això mitjançant JavaScript quan es faci clic a una pestanya. Col·loqueu els següents CSS per sota dels altres estils:

- -
.info-box li a:focus, .info-box li a:hover {
-  background-color: #a60000;
-  color: white;
-}
-
-.info-box li a.active {
-  background-color: #a60000;
-  color: white;
-}
- -

Estilitzar els panells

- -

El següent treball és dissenyar els nostres panells. Anem a engegar-ho!

- -

Primer de tot, afegiu la següent regla per dissenyar el contenidor .panels {{htmlelement("div")}}. Aquí, simplement, hem establert un {{cssxref("height")}} fix per assegurar-nos que els panells s'ajustin bé a l'interior de la caixa d'informació, {{cssxref("position")}} relative pel que fa a {{htmlelement("div" )}} com a context de posicionament, de manera que podeu col·locar elements fills posicionats relatius a ell i no a l'element {{htmlelement("html")}} i finalment el flotador {{cssxref("clear")}} establert en el CSS anterior perquè no interfereixi amb la resta del disseny.

- -
.info-box .panels {
-  height: 352px;
-  position: relative;
-  clear: both;
-}
- -

Finalment, per a aquesta secció, dissenyarem els elements individuals {{htmlelement("article")}} que componen els nostres panells. La primera regla que afegirem serà {{cssxref("position")}} absolute dels panells, i farà que tots quedin asseguts, alineats a {{cssxref("top")}} i {{cssxref("left")}} del seu contenidor {{htmlelement ("div")}} - aquesta part és absolutament clau per a tota aquesta característica de disseny, ja que fa que els panells s'asseguin uns sobre els altres. La regla també proporciona als panells la mateixa alçada de conjunt que el contenidor, i dóna al contingut un farciment, un text {{cssxref("color")}} i un {{cssxref("background-color")}}.

- -

La segona regla que afegirem aquí fa que un panell amb una class active-panel, establert en ell, tindrà un {{cssxref("z-index")}} d'1, que se li aplicarà, la qual cosa farà que s'asseguin per sobre dels altres panells (els elements posicionats tenen un z-index de 0 per defecte, la qual cosa els posaria a continuació). Una vegada més, afegirem aquesta classe utilitzant JavaScript en el moment adequat.

- -
.info-box article {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 352px;
-  padding: 10px;
-  color: white;
-  background-color: #a60000;
-}
-
-.info-box .active-panel {
-  z-index: 1;
-}
- -

Afegir el nostre JavaScript

- -

L'últim pas per fer funcionar aquesta característica és afegir JavaScript. Col·loqueu el següent bloc de codi, exactament com s'escriu, entre les etiquetes d'obertura i tancament {{htmlelement("script")}} (trobareu aquestes a sota del contingut HTML):

- -
var tabs = document.querySelectorAll('.info-box li a');
-var panels = document.querySelectorAll('.info-box article');
-
-for(i = 0; i < tabs.length; i++) {
-  var tab = tabs[i];
-  setTabHandler(tab, i);
-}
-
-function setTabHandler(tab, tabPos) {
-  tab.onclick = function() {
-    for(i = 0; i < tabs.length; i++) {
-      tabs[i].className = '';
-    }
-
-    tab.className = 'active';
-
-    for(i = 0; i < panels.length; i++) {
-      panels[i].className = '';
-    }
-
-    panels[tabPos].className = 'active-panel';
-  }
-}
- -

Aquest codi fa el següent:

- - - -

Això és tot pel primer exemple. Manteniu obert el vostre codi, ja que l'afegirem a la segona.

- -

Una caixa d'informació amb pestanyes de posició fixa

- -

En el nostre segon exemple, farem el nostre primer exemple - la nostra caixa d'informació - i l'afegirem al context d'una pàgina web completa. Però no només això - li donarem una posició fixa perquè es mantingui en la mateixa posició en la finestra del navegador. Quan el contingut principal es desplaci, la caixa d'informació romandrà en la mateixa posició en la pantalla. El nostre exemple acabat tindrà aquest aspecte:

- -

- -
-

Nota: Podeu veure l'exemple acabat, executant-ho en directe a fixed-info-box.html (codi font). Comproveu-ho per tenir una idea del que serà la construcció d'aquesta secció de l'article.

-
- -

Com a punt de partida, podeu fer servir l'exemple complet de la primera secció de l'article o fer una còpia local de info-box.html des del nostre repositori de Github.

- -

Addicions HTML

- -

En primer lloc, necessitem un codi HTML addicional per representar el contingut principal del lloc web. Afegiu el següent {{htmlelement("section")}} just a sota de l'etiqueta d'apertura {{htmlelement("body")}}, just abans de la secció existent:

- -
<section class="fake-content">
-  <h1>Fake content</h1>
-  <p>This is fake content. Your main web page contents would probably go here.</p>
-  <p>This is fake content. Your main web page contents would probably go here.</p>
-  <p>This is fake content. Your main web page contents would probably go here.</p>
-  <p>This is fake content. Your main web page contents would probably go here.</p>
-  <p>This is fake content. Your main web page contents would probably go here.</p>
-  <p>This is fake content. Your main web page contents would probably go here.</p>
-  <p>This is fake content. Your main web page contents would probably go here.</p>
-  <p>This is fake content. Your main web page contents would probably go here.</p>
-</section>
- -
-

Nota: Us podeu sentir lliures de canviar el contingut fals per a algun contingut real si ho desitjeu.

-
- -

Canvis al CSS existent

- -

A continuació, hem de fer petits canvis al CSS existent, per tenir la caixa d'informació col·locada i posicionada Canvieu la regla .info-box per desfer-vos del margin: 0 auto;  (Ja no volem que la caixa d'informació estigui centrada), afegiu {{cssxref("position")}}: fixed;, i enganxeu-ho en el {{cssxref("top")}} de la finestra de visualització del navegador.

- -

Ara ha de ser així:

- -
.info-box {
-  width: 450px;
-  height: 400px;
-  position: fixed;
-  top: 0;
-}
- -

Estilitzar el contingut principal

- -

L'únic que queda per a aquest exemple és proporcionar al contingut principal amb un estil. Afegiu la següent regla sota la resta del vostre CSS:

- -
.fake-content {
-  background-color: #a60000;
-  color: white;
-  padding: 10px;
-  height: 2000px;
-  margin-left: 470px;
-}
- -

Per començar, donem al contingut el mateix {{cssxref("background-color")}}, {{cssxref("color")}}, i {{cssxref("padding")}} com els panells de caixa d'informació. A continuació, li donem un gran {{cssxref("margin-left")}} per moure-ho cap a la dreta, fent espai perquè la caixa d'informació s'assegui, de manera que no se superposi amb qualsevol altre cosa.

- -

Això marca el final del segon exemple; esperem que trobeu el tercer tan interessant.

- -

Un panell amagat lliscant

- -

L'exemple final que presentarem aquí és un panell que es llisca des de dins i fora de la pantalla en prémer una icona - com s'ha esmentat anteriorment, això és popular per a situacions com ara dissenys de mòbils, on els espais de pantalla disponibles són petits, per la qual cosa no es desitja usar la major part d'ella, mostrant un menú o panell d'informació en lloc de contingut útil.

- -

El nostre exemple acabat tindrà aquest aspecte:

- -

- -
-

Nota: Podeu veure l'exemple acabat, executant-ho en directe a hidden-info-panel.html (codi font). Comproveu-ho per tenir una idea del que serà la construcció d'aquesta secció de l'article.

-
- -

Com a punt de partida, feu una còpia local de hidden-info-panel-start.html des del nostre repositori de Github. Això no segueix l'exemple anterior, de manera que cal un nou fitxer d'inici. Fem un cop d'ull al codi HTML del fitxer:

- -
<label for="toggle">❔</label>
-<input type="checkbox" id="toggle">
-<aside>
-
-  ...
-
-</aside>
- -

Per començar, tenim un element {{htmlelement("label")}} i un element {{htmlelement("input")}} - els elements <label> normalment s'utilitzen per associar una etiqueta de text amb un element de formulari amb finalitats d'accessibilitat (permetent que un usuari de pantalla vegi quina descripció fa amb quin element del formulari). Aquí s'associa amb la casella de verificació <input> amb els atributs for i id.

- -
-

Nota: Hem posat un gran signe d'interrogació en el nostre HTML perquè actuï com la nostra icona d'informació - aquest representa el botó que es premut per mostrar/amagar el panell.

-
- -

Aquí utilitzarem aquests elements per un propòsit lleugerament diferent - un altre efecte secundari útil dels elements <label> és que podeu fer clic a l'etiqueta de la casella de verificació per a marcar la casella de verificació, així com només la casella de verificació. Això ha portat a la coneguda checkbox hack, que proporciona una forma lliure de JavaScript per controlar un  element mitjançant la commutació d'un botó. L'element que anem a controlar és l'element {{htmlelement("aside")}} que segueix els altres dos (hem deixat el seu contingut fora del llistat del codi anterior per brevetat).

- -

A les seccions següents explicarem com funciona tot això.

- -

Estilitzar els elements de formulari

- -

Primer tractarem els elements de formulari - afegiu el següent CSS entre les etiquetes {{htmlelement("style")}}:

- -
label[for="toggle"] {
-  font-size: 3rem;
-  position: absolute;
-  top: 4px;
-  right: 5px;
-  z-index: 1;
-  cursor: pointer;
-}
-
-input[type="checkbox"] {
-  position: absolute;
-  top: -100px;
-}
- -

La primera regla donar estil el <label>; aquí tenim:

- - - -

La segona regla estableix {{cssxref("position")}} absolute en l'element <input> de casella de verificació real i l'oculta a la part superior de la pantalla. De fet, no volem veure això a la nostra interfície d'usuari.

- -

Estilitzar el panell

- -

Ara és hora de donar-li estil el propi panell lliscant. Afegiu la següent regla al final del vostre CSS:

- -
aside {
-  background-color: #a60000;
-  color: white;
-
-  width: 340px;
-  height: 98%;
-  padding: 10px 1%;
-
-  position: fixed;
-  top: 0;
-  right: -370px;
-
-  transition: 0.6s all;
-}
- -

Hi ha molt a fer aquí, analitzem-ho a poc a poc:

- - - -

Seleccionar el estat marcat

- -

Hi ha una mica de CSS per afegir - poseu el següent al final del vostre CSS:

- -
input[type=checkbox]:checked + aside {
-  right: 0px;
-}
- -

El selector és bastant complex aquí - estem seleccionant l'element <aside> adjacent a l'element <input>, però només quan està marcat (tingueu en compte l'ús de la pseudo-classe {{cssxref (": checked")}} per aconseguir això). Quan aquest és el cas, estem establint la propietat {{cssxref("right")}} de <aside> a 0px, el que fa que el panell aparegui novament en la pantalla (suaument a causa de la transició). En fer clic en l'etiqueta, torna a desmarcar la casella de verificació, que torna a ocultar el panell.

- -

Així que aquí ho teniu - una manera bastant intel·ligent, lliure de Javascript, per crear un efecte de botó alternatiu. Això funcionarà en IE9 i superiors (la transició suau funcionarà en IE10 i superiors). Aquest efecte té algunes preocupacions - això és abusar una mica d'elements de forma (no estan destinats per a aquest propòsit), i l'efecte no és el millor en termes d'accessibilitat - l'etiqueta no es pot enfocar de manera predeterminada, i l'ús no semàntic dels elements de formulari pot causar problemes amb els lectors de pantalla. JavaScript i un enllaç o un botó poden ser més apropiat, però encara és divertit experimentar.

- -

Resum

- -

Així que arrodonim el nostre cop d'ull en el posicionament - ara com ara, heu de tenir una idea de com funciona la mecànica bàsica, així com la comprensió de com començar a aplicar-los en la construcció d'algunes característiques interessants de la interfície d'usuari. No us preocupeu sinó vau rebre tot això immediatament - el posicionament és un tema bastant avançat, i sempre podeu treballar a través dels articles de nou, per ajudar-vos en la vostra comprensió. El següent tema al que ens referirem és a Flexbox.

- -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}

diff --git a/files/ca/learn/css/disseny_css/flexbox/index.html b/files/ca/learn/css/disseny_css/flexbox/index.html deleted file mode 100644 index 37f31f619b..0000000000 --- a/files/ca/learn/css/disseny_css/flexbox/index.html +++ /dev/null @@ -1,330 +0,0 @@ ---- -title: Flexbox -slug: Learn/CSS/Disseny_CSS/Flexbox -tags: - - Article - - Beginner - - CSS - - CSS layouts - - CodingScripting - - Flexible Boxes - - Guide - - Layout - - Layouts - - Learn - - flexbox -translation_of: Learn/CSS/CSS_layout/Flexbox ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}
- -

Flexbox és un mètode de disseny de pàgina web unidimensional que distribueix els elements de la pàgina web en files o en columnes. Els elements són «flexibles» i omplen tot l’espai de més o s’encongeixen per caber en espais més petits. Aquest article n’explica els fonaments.

- - - - - - - - - - - - -
Prerequisits:Conceptes bàsics d'HTML (consulta la Introducció a l’HTML), i nocions de com funciona el CSS (consulta la Introducció al CSS).
Objectiu:Aprendre a utilitzar el sistema de disseny de pàgines web Flexbox.
- -

Per què Flexbox?

- -

Durant molt de temps, les úniques eines fiables compatibles amb els navegadors, disponibles per crear dissenys de pàgina web amb CSS eren mètodes com ara els elements flotants (floats) i el posicionament. Estan bé i funcionen, però d'alguna manera també són més limitats i frustrants.

- -

Uns requisits senzills de disseny de pàgina web com els que enumerem a continuació són difícils o impossibles d'aconseguir amb aquestes eines d’una manera còmoda i flexible:

- - - -

Com veureu en les properes seccions, Flexbox facilita moltes tasques de disseny de pàgina web. Aprofundim-hi!

- -

Un exemple senzill

- -

En aquest article, et farem treballar en un seguit d'exercicis que t’ajudaran a entendre com funciona Flexbox. Per començar, fes una còpia local del primer fitxer d'inici, flexbox0.html, que trobaràs en el nostre repositori de GitHub; carrega’l en un navegador modern (com Firefox o Chrome) i consulta’n el codi en el teu editor. També ho pots veure en viu aquí.

- -

Observa que hi ha un element {{htmlelement("header")}} amb un títol d’encapçalament de nivell superior i un element {{htmlelement("section")}} que conté tres elements {{htmlelement("article")}}. Els farem servir per a crear un disseny de tres columnes força habitual.

- -

- -

Especificar els elements flexbox

- -

Per començar hem de decidir quins elements volem configurar perquè es comportin com caixes flexibles. Per tal de fer-ho, establim un valor especial de {{cssxref("display")}} en l'element pare dels elements als quals afectarà. En aquest cas, volem que siguin els elements {{htmlelement("article")}}, per la qual cosa ho configurem en l’element {{htmlelement("section")}}:

- -
section {
-  display: flex;
-}
- -

Això fa que l'element <section> esdevingui un contenidor flexible i els seus fills ítems flexibles. El resultat d'això hauria de presentar un aspecte semblant a això:

- -

- -

Per tant, aquesta declaració única, ens dona tot el que necessitem; increïble, oi? Tenim el nostre disseny de pàgina de columna múltiple amb columnes de la mateixa mida, i que tenen la mateixa alçada. Això és perquè els valors predeterminats que s’han donat als elements flex (els fills del contenidor flex) estan dissenyats per a resoldre problemes comuns com aquest.

- -

Per deixar-ho clar, reiterem el que passa aquí. L’element al qual hem donat un valor de {{cssxref("display")}} de flex actua com un element de nivell de bloc en termes de com interactua amb la resta de la pàgina, però els seus fills es presenten com a elements flexibles. La següent secció explicarà amb més detall què significa això. Fixeu-vos també que podeu utilitzar un valor de display d'inline-flex si voleu disposar els fills d'un element com a elements flexibles, però que aquest element es comporti com un element en línia.

- -

El model flex

- -

Els elements que es disposen com caixes flexibles, es distribueixen al llarg de dos eixos:

- -

flex_terms.png

- - - -

Tingues present aquesta terminologia a mesura que avances en les seccions. Sempre pots tornar enrere si en algun moment l’ús d’aquests termes et genera confusions.

- -

Columnes o files?

- -

Flexbox proporciona una propietat anomenada {{cssxref("flex-direction")}}, que especifica en quina direcció discorre l'eix principal (en quina direcció es disposen les caixes flexibles fill); per defecte, està definida en row, que fa que els elements flexibles es disposin en una fila en la direcció de l'idioma predeterminat amb què funciona el teu navegador (d'esquerra a dreta, en el cas d'un navegador en català).

- -

Prova d'afegir a la teva regla <section> la declaració següent:

- -
flex-direction: column;
- -

Observa que això posa de nou els elements en una disposició en columna, igual que estaven abans d’afegir-hi el CSS. Abans de continuar, elimina aquesta declaració del teu exemple.

- -
-

Nota: També pots disposar elements flexibles en direcció inversa amb els valors row-reverse i column-reverse. Experimenta també amb aquests valors.

-
- -

Ajust

- -

Un problema que sorgeix quan tens un disseny de pàgina amb una amplada o una alçada fixa és que els fills de l’element flexbox poden desbordar el contenidor i trencar el disseny de la pàgina. Fes un cop d'ull al nostre exemple flexbox-wrap0.html i mira’l en directe (fes primer una còpia local d'aquest fitxer, si vols seguir amb aquest exemple):

- -

- -

Aquí observem que els fills desborden el contenidor. Una manera de solucionar això és afegir a la teva regla <section> la declaració següent:

- -
flex-wrap: wrap;
- -

Afegeix també la declaració següent a la teva regla <article>

- -
flex: 200px;
- -

Ara prova-ho; observa que el disseny es veu força més bé ara que hi has inclòs això:

- -

Ara hi ha diverses files, i a cada fila hi ha tantes elements fill flexbox com és raonable que hi hagi, i si hi ha cap desbordament, es genera una altra línia. La declaració flex: 200px que hem establer per als elements <article> significa que cada article tindrà com a mínim una amplada de 200px; més endavant parlarem d'aquesta propietat amb més detall. També pots observar que els últims fills de l'última fila s’han fet més amples, de manera que la fila està igualment tota plena.

- -

Però encara hi podem fer més. Primer de tot, prova de canviar el valor de la propietat {{cssxref("flex-direction")}} a row-reverse; observa que encara tens el disseny de files múltiples, però ara comença des de la cantonada oposada de la finestra del navegador i flueix en sentit invers.

- -

La propietat flex-flow abreujada

- -

En aquest punt, val la pena observar que hi ha una propietat abreujada per a {{cssxref("flex-direction")}} i {{cssxref("flex-wrap")}}, que és: {{cssxref("flex-flow")}}. Per exemple, pots substituir:

- -
flex-direction: row;
-flex-wrap: wrap;
- -

per

- -
flex-flow: row wrap;
- -

Dimensió flexible dels elements flexibles

- -

Tornem ara al nostre primer exemple i observem com podem controlar quina proporció d'espai poden ocupar els elements flexibles. Fes servir la teva còpia local de flexbox0.html, o fes una còpia de flexbox1.html com a punt de partida nou (també el pots veure en viu).

- -

Primer, afegeix la regla següent al final del teu CSS:

- -
article {
-  flex: 1;
-}
- -

Es tracta d'un valor de proporció sense unitat que determina quina quantitat de l'espai disponible al llarg de l'eix principal ocupa cada element flexible. En aquest cas donem a cada element {{htmlelement("article")}} un valor de 1, que significa que tots ocuparan una quantitat igual de l'espai que sobri després que s'hagin establert elements com ara l’àrea de farciment i el marge. És una proporció, que significa que donar a cada element flexible un valor de 400.000 tindria exactament el mateix efecte.

- -

A continuació, afegeix la regla següent a sota de l'anterior:

- -
article:nth-of-type(3) {
-  flex: 2;
-}
- -

Aleshores, actualitza. Observa que el tercer element {{htmlelement("article")}} ocupa el doble de l'amplada disponible que els altres dos; perquè ara hi ha en total quatre unitats proporcionals disponibles. Els dos primers elements flexibles en tenen una cadascun, i prenen 1/4 de l'espai disponible cadascun. El tercer té dues unitats, de manera que ocupa 2/4 de l'espai disponible (o el que és el mateix, la meitat).

- -

També pots especificar un valor de mida mínima per al valor flex. Actualitza les teves regles per als elements <article>, així:

- -
article {
-  flex: 1 200px;
-}
-
-article:nth-of-type(3) {
-  flex: 2 200px;
-}
- -

Això bàsicament estableix que «Es dona a cada element flexible primer 200px de l'espai disponible. A continuació, la resta de l'espai disponible es reparteix segons les unitats de proporció». Actualitza i observa com es reparteix l'espai ara.

- -

- -

El valor real de flexbox es pot apreciar en la flexibilitat / capacitat de resposta; si canvies la mida de la finestra del navegador o afegeixes un altre element {{htmlelement("article")}}, el disseny de pàgina encara funciona.

- -

Propietat flex abreujada o no abreujada

- -

{{Cssxref("flex")}} és una propietat de abreujada que pot especificar fins a tres valors diferents:

- - - -

Recomanem evitar l'ús de les propietats flex no abreujades, si no és que t’és realment necessari (per exemple, perquè has de substituir alguna configuració anterior). Comporta escriure una gran quantitat de codi addicional, i pot acabar sent una mica confús.

- -

Alineació horitzontal i vertical

- -

També pots utilitzar funcions flexbox per a alinear elements flexibles al llarg dels eixos principals o transversals. Ho expliquem amb un nou exemple, flex-align0.html (també el pots veure en viu), que convertirem en una bonica barra d'eines/botons flexible. De moment, observa aquesta barra de menú horitzontal amb alguns botons agrupats a la cantonada superior esquerra.

- -

- -

Primer, fes una còpia local d'aquest exemple.

- -

A continuació, afegeix a la part inferior del CSS de l'exemple el codi següent:

- -
div {
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-}
- -

Actualitza la pàgina i observa que els botons estan ben centrats, horitzontalment i verticalment. Ho hem fet amb dues propietats noves.

- -

El control {{cssxref("align-items")}} disposa els elements flexibles sobre l'eix transversal.

- - - -

Pots anul·lar el comportament {{cssxref("align-items")}} per a elements flexibles individuals amb la propietat {{cssxref("align-self")}}. Per exemple, afegeix al teu CSS el codi el següent:

- -
button:first-child {
-  align-self: flex-end;
-}
- -

Dona un cop d'ull a l'efecte que hi produeix i retira de nou aquest codi quan hagis acabat.

- -

La propietat {{cssxref("justify-content")}} controla on s’ubiquen els elements flexibles sobre l'eix principal.

- - - -

T’animem a jugar amb aquests valors i veure com funcionen abans de continuar.

- -

Ordena els elements flexibles

- -

Flexbox també té una característica que canvia l'ordre de disposició dels elements flexibles sense afectar l'ordre d'origen. Aquesta és una altra característica que és impossible de fer amb els mètodes tradicionals de disseny de pàgines web.

- -

El codi per a això és senzill: afegeix al codi d'exemple de la barra de botons el codi CSS següent:

- -
button:first-child {
-  order: 1;
-}
- -

Actualitza, i observa que ara el botó «Smile» s'ha mogut al final de l'eix principal. Parlarem de com això funciona amb una mica més detall:

- - - -

Pots establir valors d'ordre negatius i fer que els elements apareguin abans que els elements amb un ordre 0. Per exemple, pots fer que el botó «Blush» aparegui al principi de l'eix principal amb la següent regla:

- -
button:last-child {
-  order: -1;
-}
- -

Caixes flexibles imbricades

- -

Amb flexbox és possible crear dissenys força complexos. És del tot correcte establir que un element flexible sigui també un contenidor flexible, de manera que els elements fills també es disposin com caixes flexibles. Dona un cop d'ull a complex-flexbox.html (o també el pots veure en viu).

- -

- -

L'HTML d’això és força senzill. Hi ha un element {{htmlelement("section")}} que conté tres elements {{htmlelement("article")}}. El tercer element {{htmlelement("article")}} conté tres elements {{htmlelement("div")}}:

- -
section - article
-          article
-          article - div - button
-                    div   button
-                    div   button
-                          button
-                          button
- -

Observa el codi que hem utilitzat per al disseny.

- -

En primer lloc, establim que els fills de {{htmlelement("section")}} es disposin com caixes flexibles.

- -
section {
-  display: flex;
-}
- -

A continuació, establim alguns valors flex en els propis elements {{htmlelement("article")}}. Aquí cal tenir en compte la 2a regla; configurem el tercer element {{htmlelement("article")}} de manera que els seus elements fills es disposin també com elements flexibles, però aquesta vegada en columna.

- -
article {
-  flex: 1 200px;
-}
-
-article:nth-of-type(3) {
-  flex: 3 200px;
-  display: flex;
-  flex-flow: column;
-}
-
- -

A continuació, seleccionem el primer element {{htmlelement("div")}}. Utilitzem la declaració flex: 1 100px; perquè hi doni efectivament una alçada mínima de 100px, aleshores en configurem els elements fills (els elements {{htmlelement("button")}}) perquè també siguin elements flexibles. Els distribuïm en fila perquè ocupin tot l’espai amb la propietat wrap i els alineem al centre de l'espai disponible, com hem fet en l'exemple del botó individual que hem vist abans.

- -
article:nth-of-type(3) div:first-child {
-  flex: 1 100px;
-  display: flex;
-  flex-flow: row wrap;
-  align-items: center;
-  justify-content: space-around;
-}
- -

Finalment, establim les dimensions del botó, però la qüestió interessant és que hi donem un valor de flex de 1. Això té un efecte molt interessant, que pots observar si canvies la mida de l'amplada de la finestra del navegador. Els botons ocuparan tant d’espai com puguin i es disposaran sobre la mateixa línia tant com sigui possible, però quan ja no càpiguen amb comoditat a la mateixa línia, cauran a la línia següent.

- -
button {
-  flex: 1;
-  margin: 5px;
-  font-size: 18px;
-  line-height: 1.5;
-}
- -

Compatibilitat amb altres navegadors

- -

Flexbox és compatible amb la majoria de navegadors nous: Firefox, Chrome, Opera, Microsoft Edge i IE 11, i les versions més noves d'Android/iOS, etc. No obstant això, cal tenir en compte que encara hi ha navegadors antics en ús que no admeten Flexbox (o bé n’admeten una versió antiga i desactualitzada).

- -

Mentre ets en procés d’aprendre i experimentar, això no importa gaire; però si consideres l'ús de flexbox en un lloc web real, has de fer proves i assegurar-te que la teva experiència d'usuari continua sent acceptable en el màxim nombre de navegadors possible.

- -

Flexbox és una mica més complicat que altres característiques CSS. Per exemple, si un navegador no té ombres CSS, probablement el lloc web serà encara usable. En canvi, la no-compatibilitat amb les característiques de flexbox probablement trencarà del tot el disseny i inutilitzarà el lloc web.

- -

En un altre mòdul parlarem de les estratègies per a superar els complexos problemes de compatibilitat dels navegadors.

- -

Posa a prova les teves habilitats

- -

Hem vist moltes coses en aquest article. En recordes la informació més important? Trobaràs més tests per poder comprovar si has retingut la informació abans de seguir a Test your skills: Flexbox.

- -

Resum

- -

Això clou el nostre recorregut pels fonaments de flexbox. Esperem que t’hagis divertit i que sàpigues jugar-hi mentre continues endavant amb el teu aprenentatge. A continuació, veurem un altre aspecte important dels dissenys CSS, els sistemes de graella.

- -
{{PreviousMenuNext("Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}
diff --git a/files/ca/learn/css/disseny_css/flotadors/index.html b/files/ca/learn/css/disseny_css/flotadors/index.html deleted file mode 100644 index 25d2fe01a6..0000000000 --- a/files/ca/learn/css/disseny_css/flotadors/index.html +++ /dev/null @@ -1,516 +0,0 @@ ---- -title: Flotadors (Floats) -slug: Learn/CSS/Disseny_CSS/Flotadors -tags: - - Article - - Beginner - - CSS - - Clearing - - CodingScripting - - Floats - - Guide - - Layout - - columns - - multi-column -translation_of: Learn/CSS/CSS_layout/Floats ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}}
- -

Originalment pensada per a flotar imatges dins de blocs de text, la propietat {{cssxref("float")}} va esdevenir una de les eines més utilitzades per a crear dissenys multicolumna a les pàgines web. Amb l'arribada de Flexbox i Grid ha tornat ara al seu propòsit original, tal com s'explica en aquest article.

- - - - - - - - - - - - -
Requisits previs:HTML bàsic (vegeu Introducció a l'HTML), i una idea de com funciona CSS (vegeu Introducció a CSS.)
Objectiu:Aprendre a crear elements flotants a les pàgines web, i a fer servir la propietat clear i altres mètodes per a netejar els elements flotants.
- -

La història dels elements flotants

- -

La propietat {{cssxref("float")}} fou introduïda per a permetre als desenvolupadors implementar dissenys senzills que incloguessin una imatge flotant dins d'una columna de text, amb el text envoltant la part esquerra o dreta de la imatge. El tipus de cosa que trobes habitualment en el disseny d'un diari.

- -

Però els desenvoupadors web aviat s'adonaren que podien flotar qualsevol cosa, i no només les imatges, pel que el seu ús s'amplià, per exemple, creant efectes de disseny divertits com els d'aquestes caplletres.

- -

Els elements flotants han estat utitlitzats habitualment per a crear dissenys web complets amb múltiples columnes situades l'una al costat de l'altra (el comportament per defecte seria que les columnes se situessin les unes sota les altres, en el mateix ordre en què apareixen al codi font). Ara hi ha disponibles tècniques més modernes i millors, que explorarem més endavant en aquest mòdul, per la qual cosa l'ús de {{cssxref("float")}} d'aquesta manera s'hauria de contemplar com una tècnica antiquada.

- -

En aquest article ens centrarem en l'ús apropiat de la propietat {{cssxref("float")}}.

- -

Un exemple de float simple

- -

Explorem com utilitzar els float. Començarem amb un exemple realment simple que inclou un bloc de text flotant al voltant d'un element. Pots acompanyar-nos creant un fitxer index.html al teu ordinador, omplint-lo amb una plantilla HTML simple, i inserint el codi següent als llocs adequats. Al final de la secció podràs veure un exemple en viu de com hauria de ser el codi final.

- -

Primer, comencem amb una mica d'HTML simple — afegeix el següent al cos del teu HTML, eliminant qualsevol altra cosa que hi hagués abans:

- -
<h1>Exemple simple de caixa flotant</h1>
-
-<div class="box">Caixa flotant</div>
-
-<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. </p>
-
-<p>Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
-
-<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
- -

Ara aplica el següent CSS al teu HTML (fent servir un element {{htmlelement("style")}} o un {{htmlelement("link")}} per a separar el fitxer .css  — tu tries):

- -
body {
-  width: 90%;
-  max-width: 900px;
-  margin: 0 auto;
-  font: .9em/1.2 Arial, Helvetica, sans-serif
-}
-
-.box {
-  width: 150px;
-  height: 100px;
-  border-radius: 5px;
-  background-color: rgb(207,232,220);
-  padding: 1em;
-}
- -

Si deses y recarregues la pàgina, veuràs quelcom semblant a allò que esperaries: la caixa es troba per sobre del text, en un flux normal. Per a flotar el text al voltant, afegeix les propietats {{cssxref("float")}} i {{cssxref("margin-right")}} a la regla .box:

- -
.box {
-  float: left;
-  margin-right: 15px;
-  width: 150px;
-  height: 100px;
-  border-radius: 5px;
-  background-color: rgb(207,232,220);
-  padding: 1em;
-}
- -

Ara, si deses i recarregues, podràs veure alguna cosa semblant a això:

- -
- -
- -

{{ EmbedLiveSample('Float_1', '100%', 500) }}

- -

Analitzem ara com funciona el float — l'element amb el float aplicat (l'element {{htmlelement("div")}} en aquest cas) és extret del flux normal del document i està enganxat al costat esquerre del seu element contenidor pare ({{htmlelement("body")}}, en aquest cas). Qualsevol contingut que estigui per sota de l'element flotat en el flux normal, ara l'envoltarà, omplint l'espai a la dreta fins a la part superior de l'element flotant. Allà s'aturarà.

- -

Flotar el contingut a la dreta té exactament el mateix efecte, però a la inversa — l'element flotat s'enganxarà a la dreta, i el contingut l'envoltarà per l'esquerra. Prova de canviar el valor de la propietat float a right i substitueix {{cssxref("margin-right")}} per {{cssxref("margin-left")}} al darrer conjunt de regles per veure el resultat.

- -

Tot i que podem afegir un marge a l'element flotant per alunyar el text, no podem afegir un marge al text per allunyar-lo del flotant. Això es deu al fet que un element flotant s'extreu del flux normal i les caixes dels següents elements segueixen per darrera del flotador. Pots comprovar-ho fent alguns canvis a l'exemple.

- -

Afegeix una clase special al primer paràgraf de text, el que succeeix immediatament a la caixa flotant, i després afegeix al teu CSS les següents regles. Això li donarà al paràgraf següent un color de fons.

- -
.special {
-  background-color: rgb(79,185,227);
-  padding: 10px;
-  color: #fff;
-}
-
- -

Per tal que l'efecte sigui més fàcil de veure, canvia el margin-right del teu element flotant a margin, per obtener espai al voltant de l'element flotant. Veuràs que el fons del paràgraf passa just per sota de la caixa flotant, com en l'exemple inferior.

- -
- -
- -

{{ EmbedLiveSample('Float_2', '100%', 500) }}

- -

Els quadres de línia del següent element s'han escurçat perquè el text discorri al voltant del flotador, però com que el flotador s'ha eliminat del flux normal, el quadre al voltant del paràgraf encara manté l'ample complet.

- -

Netejant floats

- -

Hem vist que el flotador s'elimina del flux normal i que els altres elements es mostraran al seu costat. Per tant, si volem evitar que un element a continuació es mogui cap amunt, hem de netejar el float. Això s'aconsegueix amb la propietat {{cssxref ("clear")}}.

- -

En l'HTML de l'exemple anterior, afegeix una classe cleared al segon paràgraf sota de l'element flotant. Després, afegeix això al teu CSS:

- -
.cleared {
-  clear: left;
-}
-
- -
- -
- -

{{ EmbedLiveSample('Float_3', '100%', 600) }}

- -

Hauries de veure que el següent paràgraf neteja l'element flotant i ja no apareix al seu costat. La propietat clear accepta els següents valors:

- - - -

Netejar la caixa contenidora d'un float

- -

Ara ja saps com netejar un element que es troba a continuació d'un element flotant, però observa el que succeeix si tens un flotant alt i un paràgraf curt, amb una caixa convenidora que envolta ambdós elements. Modifica el teu document per tal que el primer paràgraf i la caixa flotant es trobin dins d'un {{htmlelement("div")}} amb una classe wrapper.

- -
<div class="wrapper">
-  <div class="box">Caixa flotant</div>
-
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.</p>
-</div>
-
- -

Al teu CSS, afegeix la següent regla per a la teva classe .wrapper i després recarrega la pàgina:

- -
.wrapper {
-  background-color: rgb(79,185,227);
-  padding: 10px;
-  color: #fff;
-}
- -

A més, elimina la classe .cleared anterior:

- -
.cleared {
-    clear: left;
-}
- -

Veuràs que, como en l'exemple on hem posat un color de fons al paràgraf, el color de fons passa per darrere de l'element flotant.

- -
- -
- -

{{ EmbedLiveSample('Float_4', '100%', 600) }}

- -

Un cop més, això és així perquè el flotador s'ha extret del flux normal. Netejar el següent elemento no ajuda a resoldre aquest problema de neteja de la caixa, on volem que la part inferior de la caixa envolti l'element flotant i que envolti el contingut fins i tot si el coningut és més curt. Hi ha tres maneres posssibles de resoldre això, dues que funcionen en tots els navegadors, però que tenen una mica de truc, i una tercera, nova manera de resoldre aquesta situació correctament.

- -

El hack clearfix

- -

La forma com aquesta situació s'ha tractat tradicionalment és utilitzant un truc conegut com el "truc clearfix". Això implica inserir algun contingut generat després de la caixa que conté el contingut flotant i envolvent, i configurar-lo per netejar ambdós.

- -

Afefeix el següent CSS a l'exemple:

- -
.wrapper::after {
-  content: "";
-  clear: both;
-  display: block;
-}
- -

Ara recarrega la pàgina i la caixa hauria de netejar-se. Això és bàsicament el mateix que si haguessis afegit un element HTML com un <div> a sota dels elements i li haguessis afegit la propietat clear: both.

- -
- -
- -

{{ EmbedLiveSample('Float_5', '100%', 600) }}

- -

Fent servir overflow

- -

Un mètode alternatiu és establir la propietat {{cssxref("overflow")}} de l'element contenidor amb un valor diferent de visible.

- -

Elimina el CSS clearfix que has afegit en l'anterior secció i, en el seu lloc, afegeix overflow: auto a les regles de la caixa contenidora. Altre cop, la caixa hauria de netejar-se.

- -
.wrapper {
-  background-color: rgb(79,185,227);
-  padding: 10px;
-  color: #fff;
-  overflow: auto;
-}
- -
- -
- -

{{ EmbedLiveSample('Float_6', '100%', 600) }}

- -

Aquest exemple funciona creant el que s'anomena un block formatting context (BFC) o context de format de bloc. És com un petit disseny dins de la nostra pàgina (dins la qual tot està contingut, per tant, el nostre element flotant està contingut dins del BFC i el fons es troba darrere d'ambdós elements. Això generalment funcionarà. Això no obstant, en certs casos, és possible que et trobis amb barres de desplaçament no desitjades o ombres retallades com a conseqüències no desitjades de l'ús del desbordament..

- -

display: flow-root

- -

La manera moderna de resoldre aquest problema és fer servir el valor flow-root de la propietat display. Això existeix només per a crear un BFC sense fer servir trucs; no hi haurà conseqüències no desitjades quan el facis servir. Elimina overflow: auto de la regla .wrapper i afegeix display: flow-root. Assumint que el teu navegador sigui compatible, la caixa es netejarà.

- -
.wrapper {
-  background-color: rgb(79,185,227);
-  padding: 10px;
-  color: #fff;
-  display: flow-root;
-}
- -
- -
- -

{{ EmbedLiveSample('Float_7', '100%', 600) }}

- -

Resum

- -

Ara ja saps tot el que has de saber sobre els flotadors en el desenvolupament web modern. Consulta l'article sobre els mètodes de disseny antiquats per obtenir informació de com es feien servir, cosa que pot ser-te útil si has de treballar en projectes antics.

- -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}}

- -

En aquest mòdul

- - diff --git a/files/ca/learn/css/disseny_css/flux_normal/index.html b/files/ca/learn/css/disseny_css/flux_normal/index.html deleted file mode 100644 index ac44f6a95a..0000000000 --- a/files/ca/learn/css/disseny_css/flux_normal/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: Flux normal -slug: Learn/CSS/Disseny_CSS/Flux_normal -translation_of: Learn/CSS/CSS_layout/Normal_Flow ---- -
{{LearnSidebar}}
- -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}

- -

Aquest article explica el flux normal o la manera com es disposen els elements de la pàgina web si tu no en canvies la disposició.

- - - - - - - - - - - - -
Prerequisits:Conceptes bàsics d'HTML (consulta la Introducció a l'HTML) i nocions de com funciona el CSS (consulta la Introducció al CSS).
Objectiu:Entendre la manera com els navegadors disposen per defecte els elements en les pàgines web abans que l'usuari comenci a fer-hi canvis.
- -

Com es detalla en l’últim article d’introducció al disseny de pàgines web, els elements d’una pàgina web es distribueixen segons el flux normal si no s'hi aplica CSS que en canviï el comportament. Com ja hem començat a veure, pots canviar la manera com es comporten els elements, bé ajustant-ne la posició dins d’aquest flux normal, o bé suprimint-los-en del tot. Un document sòlid i ben estructurat que sigui llegible en el sentit del flux normal és la millor manera de començar qualsevol pàgina web. Garanteix que el contingut serà llegible, fins i tot si l’usuari fa servir un navegador molt limitat o un dispositiu com un lector de pantalla, que llegeix el contingut de la pàgina. A més, com que el flux normal està dissenyat per a fer llegible un document, començar d'aquesta manera significa que treballes amb el document en lloc de lluitar-hi en contra perquè hi fas canvis d’ordre.

- -

Abans d’aprofundir més en diferents mètodes de disseny, val la pena revisar algunes de les qüestions que has estudiat en mòduls anteriors pel que fa al flux normal dels documents.

- -

Com es disposen per defecte els elements?

- -

Primer de tot s'agafa el contingut dels elements de les caixes, i a continuació s’hi afegeixen l'àrea de farciment, les vores i els marges al voltant. Es tracta del model de caixes, que ja coneixem.

- -

De manera predeterminada, el contingut d'un element de nivell de bloc és del 100% de l'amplada de l’element pare, i l‘alçada està determinada pel contingut. Els elements de línia tenen l’amplada i l’alçada determinades pel contingut. En els elements de línia no pots establir l’amplada i l’alçada, senzillament s’inclouen dins del contingut d’elements de nivell de bloc. Si vols controlar la mida d'un element de línia d'aquesta manera, has de configurar-lo perquè es comporti com un element de nivell de bloc amb display: block; (o fins i tot, display: inline-block;, que barreja característiques de tots dos).

- -

Això pel que fa a elements individuals; però què passa amb la manera com interactuen els elements entre ells? El flux normal del disseny d’una pàgina web (que s’esmenta en l’article d’introducció al disseny de pàgines web) és el sistema pel qual els elements s’ubiquen dins de la finestra gràfica del navegador. Per defecte, els elements de nivell de bloc estan configurats en la direcció del flux dels blocs, en funció del mode d'escriptura de l’element pare (inicialment: en horitzontal): cada element de bloc apareix en una línia nova per sota de l’anterior i estan separats per qualsevol marge que s’hi hagi establert. Per tant, en català, o en qualsevol altre sistema d'escriptura horitzontal i de dalt a baix, els elements de nivell de bloc es disposen verticalment.

- -

Els elements de línia es comporten de manera diferent: no es disposen en línies noves; en lloc d’això, es disposen sobre la mateixa línia que l’anterior i que qualsevol contingut textual contigu (o que el delimiti), mentre hi hagi espai dins de l’amplada de l’element pare de nivell de bloc. Quan ja no hi ha espai, el text o els elements que desborden passen a una línia nova.

- -

Si dos elements adjacents tenen configurat un marge i els marges dels dos es toquen, predomina el que és més gran, i el més petit desapareix; es diu que els marges col·lapsen, i això també ho coneixem.

- -

Vegem un exemple senzill que il·lustra tot això:

- -
-
<h1>Flux bàsic d’un document</h1>
-
-<p>Sóc un element de nivell de bloc bàsic. Els meus elements de nivell de bloc adjacents es distribueixen en línies noves per sota meu.</p>
-
-<p>Per defecte ocupem el 100% de l'amplada de l'element pare i som tan alts com el contingut dels nostres elements fill. L‘amplada i l’alçada total són el nostre contingut + l’àrea de farciment + l’amplada/alçada de la vora.</p>
-
-<p>Tenim marges que ens separen. Però pel col·lapse dels marges, ens separa només l'amplada d'un dels dos marges, però no l’amplada dels dos.</p>
-
-<p>Els elements de línia <span> com aquest </span> i <span> aquest </span> es disposen sobre la mateixa línia que els altres i que els nodes de text adjacents, si hi ha espai en la mateixa línia. Quan els elements de línia desborden, <span>continuen per la línia següent, si és possible (com el que conté aquest text)</span>; o si no és possible, passen a una línia nova, com és el cas d’aquesta imatge: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p>
- -
body {
-  width: 500px;
-  margin: 0 auto;
-}
-
-p {
-  background: rgba(255,84,104,0.3);
-  border: 2px solid rgb(255,84,104);
-  padding: 10px;
-  margin: 10px;
-}
-
-span {
-  background: white;
-  border: 1px solid black;
-}
-
- -

{{ EmbedLiveSample('Normal_Flow', '100%', 500) }}

- -

Resum

- -

Ara que saps com funciona el flux normal del disseny de pàgina i quines són les opcions que el navegador estableix per defecte, avança i descobreix com pots canviar aquesta visualització per defecte i crear la composició de pàgina que necessita el teu disseny de pàgina web.

- -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}

- -

En aquest mòdul

- - diff --git a/files/ca/learn/css/disseny_css/graelles/index.html b/files/ca/learn/css/disseny_css/graelles/index.html deleted file mode 100644 index af97c6f989..0000000000 --- a/files/ca/learn/css/disseny_css/graelles/index.html +++ /dev/null @@ -1,699 +0,0 @@ ---- -title: Graelles (Grids) -slug: Learn/CSS/Disseny_CSS/Graelles -tags: - - Article - - Beginner - - CSS - - CSS Grids - - CodingScripting - - Grids - - Guide - - Layout - - Learn - - Tutorial - - grid design - - grid framework - - grid system -translation_of: Learn/CSS/CSS_layout/Grids ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Assessment", "Learn/CSS/CSS_layout")}}
- -

Les graelles són una eina de disseny de pàgines web consolidada i molts dissenys de pàgines web moderns basen els seus dissenys de pàgina web en una graella regular. En aquest article analitzarem el disseny de pàgines web basats en graella i com es pot utilitzar CSS per a crear graelles, tant amb les eines presents com amb les noves tecnologies que comencen a estar disponibles en els navegadors.

- - - - - - - - - - - - -
Prerequisits:Conceptes bàsics d'HTML (consulta la Introducció a HTML), i nocions de com funciona el CSS (consulta la Introducció al CSS i Aplicar estil a les caixes.)
Objectiu:Entendre els conceptes fonamentals que hi ha darrere dels sistemes de disseny de pàgines web amb graella i la manera com implementar un disseny de pàgina web basat en graella.
- -

Què és el disseny de pàgines web basat en graella?

- -

Una graella és senzillament una col·lecció de línies horitzontals i verticals que creen un patró que ens serveix per a alinear els elements del disseny d’una pàgina web. Ens ajuden a crear dissenys en què els elements no es mouen ni canvien d'amplada a mesura que naveguem de pàgina en pàgina, i proporcionen més coherència als nostres llocs web.

- -

Normalment, una graella té columnes (columns), files (rows) i espais entre cada fila i columna, que anomenem comunament canals (gutters).

- -

- -

Crear la teva graella en CSS

- -

Després d'haver decidit la graella que necessita el vostre disseny, podeu utilitzar el disseny de graella (o grid) de CSS per crear aquesta quadrícula a CSS i col·locar-hi elements. Primer veurem les característiques bàsiques del disseny de quadrícula i després explorarem com crear un sistema de quadrícula simple per al vostre projecte.

- -

Com a punt de partida, descarregueu i obriu el fitxer del punt de partida a l’editor de text i al navegador (també el podeu veure en directe aquí). Veureu un exemple amb un contenidor que conté alguns elements secundaris. Per defecte, es mostren en un flux normal, de manera que els quadres es mostren un sota l’altre. Treballarem amb aquest fitxer durant la primera part d’aquesta lliçó, fent canvis per veure com es comporta la quadrícula.

- -

Per definir una graella utilitzem el valor grid de la propietat display. Com passa amb Flexbox, això activa el disseny de graella i tots els fills directes del contenidor es converteixen en elements de la quadrícula. Afegiu això al CSS del vostre fitxer:

- -
.container {
-    display: grid;
-}
- -

A diferència de flexbox, els articles no tindran cap aspecte immediatament diferent. Declarar display: grid  us dona una quadrícula d'una columna, de manera que els vostres articles continuaran mostrant-se un per sota de l'altre tal com ho fan en el flux normal.

- -

Per veure alguna cosa que sembli més una graella, haurem d’afegir algunes columnes a la quadrícula. Afegim aquí tres columnes de 200 píxels. Podeu utilitzar qualsevol unitat de longitud o percentatges per crear aquestes pistes de columna.

- -
.container {
-    display: grid;
-    grid-template-columns: 200px 200px 200px;
-}
- -

Afegiu la segona declaració a la vostra regla CSS i, a continuació, torneu a carregar la pàgina i hauríeu de veure que els elements s'han reordenat un a cada cel·la de la quadrícula creada.

- -
- -
- -

{{ EmbedLiveSample('Grid_1', '100%', 400) }}

- -

Graelles flexibles amb la unitat fr

- -

A més de crear quadrícules amb longituds i percentatges, podem utilitzar la unitat fr per dimensionar de manera flexible les files i les columnes de la quadrícula. Aquesta unitat representa una fracció de l'espai disponible al contenidor de la quadrícula.

- -

Canvieu el llistat de pistes a la següent definició, creant tres pistes d'1fr.

- -
.container {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-}
- -

Ara hauríeu de veure que teniu pistes flexibles. La unitat fr distribueix espai proporcionalment, per tant, podeu donar diferents valors positius a les vostres pistes, per exemple, si canvieu la definició així:

- -
.container {
-    display: grid;
-    grid-template-columns: 2fr 1fr 1fr;
-}
- -

La primera pista ara té 2fr de l’espai disponible i les altres dues pistes 1fr, fent que la primera pista sigui més gran. Podeu barrejar unitats de fr i pistes de longitud fixa; en aquest cas, l’espai necessari per a les pistes fixes s’elimina abans de distribuir l’espai a les altres pistes.

- -

-

- -
- - -

{{ EmbedLiveSample('Grid_2', '100%', 400) }}

- -
-

Nota: La unitat fr distribueix l'espai disponible, no tot l'espai. Per tant, si una de les vostres pistes té alguna cosa gran al seu interior, hi haurà menys espai lliure per compartir.

-
- -

Espais entre pistes

- -

Per crear espais entre pistes, fem servir les propietats {{cssxref ("grid-column-gap")}} per a espais entre columnes, {{cssxref ("grid-row-gap")}} per a espais entre files i {{ cssxref ("grid-gap")}} per establir tots dos alhora.

- -
.container {
-    display: grid;
-    grid-template-columns: 2fr 1fr 1fr;
-    grid-gap: 20px;
-}
- -

Aquests buits poden especificar-se en qualsevol unitat de longitud o percentatge, però no en unitats fr.

- -
- -
- -

{{ EmbedLiveSample('Grid_3', '100%', 400) }}

- -
-

Nota: Les propietats *gap solien portar el prefix grid-, però això s'ha canviat a l'especificació, ja que la intenció és fer-les útils en diversos mètodes de disseny. Les versions prefixades es mantindran com a àlies, de manera que es podran utilitzar amb seguretat durant algun temps. Per estar segur, podeu duplicar i afegir les dues propietats per fer el vostre codi més a prova de bales.

-
- -
.container {
-  display: grid;
-  grid-template-columns: 2fr 1fr 1fr;
-  grid-gap: 20px;
-  gap: 20px;
-}
- -

Repetició de llistes de pistes

- -

Podeu repetir tot o una secció de la vostra llista de pistes mitjançant la notació de repetició. Canvieu la llista de pistes pel següent:

- -
.container {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    grid-gap: 20px;
-}
- -

Ara tindreu 3 pistes d’1fr igual que abans. El primer valor que es passa a la funció de repetició és el nombre de vegades que voleu que es repeteixi el llistat, mentre que el segon valor és un llistat de pistes, que consisteix d’una o més pistes que vulgueu repetir.

- -

La quadrícula implícita i explícita

- -

Fins ara, només hem especificat pistes de columnes i, tot i això, s’estan creant files per contenir el nostre contingut. Aquest és un exemple de la quadrícula explícita contra la quadrícula implícita. La quadrícula explícita és la que creeu utilitzant grid-template-columns o grid-template-rows. La quadrícula implícita es crea quan el contingut es col·loca fora d’aquesta, com ara a les nostres files. Les quadrícules explícites i implícites són anàlogues als eixos flexbox principal i transversal.

- -

Per defecte, les pistes creades a la quadrícula implícita tenen una mida auto, cosa que en general vol dir que són prou grans per adaptar-se al seu contingut. Si voleu donar una mida implícita a les pistes de quadrícula, podeu utilitzar les propietats {{cssxref ("grid-auto-rows")}} i {{cssxref ("grid-auto-columns")}}. Si afegiu grid-auto-rows amb un valor de 100px al vostre CSS, veureu que aquestes files creades ara tenen una alçada de 100 píxels.

- -
- - -
.container {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-auto-rows: 100px;
-  grid-gap: 20px;
-}
- -

{{ EmbedLiveSample('Grid_4', '100%', 400) }}

- -

La funció minmax()

- -

Les nostres pistes de 100 píxels d’alçada no seran molt útils si afegim contingut a les pistes de més de 100 píxels, ja que aquest cas provocaria un desbordament. Podria ser millor tenir pistes de com a mínim 100 píxels d’alçada i que es puguin expandir si hi entra més contingut. Un fet bastant bàsic sobre el web és que mai no se sap realment la mida que tindrà alguna cosa; contingut addicional o mides de lletra més grans poden causar problemes amb els dissenys que intenten ser perfectes en píxels en totes les dimensions.

- -

La funció {{cssxref ("minmax")}} ens permet establir una mida mínima i màxima per a una pista, per exemple, minmax(100 px, auto). La mida mínima és de 100 píxels, però la màxima és automàtica, i s’ampliarà per adaptar-se al contingut. Proveu de canviar grid-auto-rows per utilitzar un valor min-max:

- -
.container {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    grid-auto-rows: minmax(100px, auto);
-    grid-gap: 20px;
-}
- -

Si afegiu contingut addicional, veureu que la pista s'expandeix per permetre que encaixi. Tingueu en compte que l'expansió es produeix al llarg de la fila.

- -

Tantes columnes com encaixin

- -

Podem combinar algunes de les coses que hem après sobre el llistat de pistes, la notació de repetició i {{cssxref ("minmax")}} per crear un patró útil. De vegades, és útil poder demanar a la quadrícula que creï tantes columnes com càpiguen al contenidor. Ho fem establint el valor de grid-template-columns mitjançant la notació {{cssxref ("repeat")}}}), però en lloc de passar un número, introduïu la paraula clau auto-fill. Per al segon paràmetre de la funció utilitzem minmax(), amb un valor mínim igual a la mida mínima de la pista que ens agradaria tenir i un màxim de 1fr.

- -

Proveu-ho ara al vostre fitxer amb el CSS següent:

- -
- - -
.container {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-  grid-auto-rows: minmax(100px, auto);
-  grid-gap: 20px;
-}
-
- -

{{ EmbedLiveSample('Grid_5', '100%', 400) }}

- -

Això funciona perquè Grid crea tantes columnes de 200 píxels com càpiguen al contenidor i, a continuació, comparteix l’espai que sobri entre totes les columnes: el màxim és 1fr que, com ja sabem, distribueix l’espai de manera uniforme entre les pistes.

- -

Ubicació basada en línies

- -

Ara passem de crear una graella a col·locar coses a la quadrícula. La nostra quadrícula sempre té línies, que comencen per 1 i es relacionen amb el mode d’escriptura del document. Per tant, en anglès, la línia de columna 1 es troba a la part esquerra de la quadrícula i la línia de fila 1 a la part superior. En àrab, la línia 1 de la columna estaria a la dreta, ja que l'àrab s'escriu de dreta a esquerra.

- -

Podem situar les coses segons aquestes línies especificant la línia inicial i final. Ho fem utilitzant les propietats següents:

- - - -

Totes aquestes propietats poden tenir un número de línia com a valor. També podeu utilitzar les propietats abreujades:

- -

    {{cssxref ("grid-column")}}
-     {{cssxref ("grid-row")}}

- -

Aquests us permeten especificar les línies inicial i final alhora, separades per un /, un caràcter de barra inclinada cap endavant.

- -

Descarregueu aquest fitxer com a punt de partida o vegeu-lo en directe aquí. Ja té una quadrícula definida i article senzill. Podeu veure que la col·locació automàtica col·loca elements un a cada cel·la de la quadrícula que hem creat.

- -

En lloc d'això, col·locarem tots els elements del nostre lloc a la quadrícula, mitjançant les línies de la quadrícula. Afegiu les regles següents a la part inferior del vostre CSS:

- -
header {
-  grid-column: 1 / 3;
-  grid-row: 1;
-}
-
-article {
-  grid-column: 2;
-  grid-row: 2;
-}
-
-aside {
-  grid-column: 1;
-  grid-row: 2;
-}
-
-footer {
-  grid-column: 1 / 3;
-  grid-row: 3;
-}
- -
- -
- -

{{ EmbedLiveSample('Grid_6', '100%', 400) }}

- -
-

Nota: també podeu utilitzar el valor -1 per referir-vos a la columna o la línia final i comptar cap a l'interior des del final mitjançant valors negatius. Tanmateix, això només funciona per a la quadrícula explícita. El valor -1 no es referirà a la línia final de la quadrícula implícita.

-
- -

Posicionament amb grid-template-areas

- -

Una forma alternativa de col·locar elements a la quadrícula és fer servir la propietat {{cssxref ("grid-template-areas")}} i donar un nom als diversos elements del vostre disseny.

- -

Traieu el posicionament basat en línies de l'últim exemple (o torneu a descarregar el fitxer per tenir un punt de partida nou) i afegiu el CSS següent.

- -
.container {
-  display: grid;
-  grid-template-areas:
-      "header header"
-      "sidebar content"
-      "footer footer";
-  grid-template-columns: 1fr 3fr;
-  grid-gap: 20px;
-}
-
-header {
-  grid-area: header;
-}
-
-article {
-  grid-area: content;
-}
-
-aside {
-  grid-area: sidebar;
-}
-
-footer {
-  grid-area: footer;
-}
- -

Torneu a carregar la pàgina i veureu que els vostres articles s'han col·locat igual que abans, sense que hàgim d'utilitzar cap número de línia!

- -
- -
- -

{{ EmbedLiveSample('Grid_7', '100%', 400) }}

- -

Les regles per a les grid-template-areas són les següents:

- - - -

Podeu jugar amb el nostre disseny canviant el peu de pàgina per situar-se només a sota del contingut i la barra lateral, per exemple, per abastar fins a baix de tot. Aquesta és una manera molt agradable de descriure un disseny, ja que és obvi a partir del CSS exactament el que està passant.

- -

Un framework de graella amb CSS Grid

- -

Els "frameworks" de quadrícula tendeixen a basar-se al voltant de 12 o 16 quadrícules i, amb CSS Grid, no necessiteu cap eina de tercers que us proporcioni aquest framework: ja hi és, a l’especificació.

- -

Descarregueu el fitxer de punt de partida. Conté un contenidor amb una quadrícula de 12 columnes definida i el mateix marcatge que hem utilitzat en els dos exemples anteriors. Ara podem utilitzar la ubicació basada en línies per col·locar el nostre contingut a la quadrícula de 12 columnes.

- -
header {
-  grid-column: 1 / 13;
-  grid-row: 1;
-}
-
-article {
-  grid-column: 4 / 13;
-  grid-row: 2;
-}
-
-aside {
-  grid-column: 1 / 4;
-  grid-row: 2;
-}
-
-footer {
-  grid-column: 1 / 13;
-  grid-row: 3;
-}
- -
- -
- -

{{ EmbedLiveSample('Grid_8', '100%', 400) }}

- -

Si feu servir el Firefox Grid Inspector per superposar les línies de quadrícula del vostre disseny, podreu veure com funciona la nostra quadrícula de 12 columnes.

- -

-
- -

Posa a prova els teus coneixements

- -

Hem arribat al final de l'article. Recordes la informació més rellevant? Trobaràs més proves per comprovar si retens aquesta informació abans de seguir a Test your skills: Grids.

- -

Resum

- -

Després de la lectura d’aquest article, hauries de ser capaç d’entendre com funcionen els dissenys de pàgina web amb CSS Grid. Per aprofundir en l'especificació, llegeix les nostres guies sobre Disposició amb Grid, que trobaràs a continuació.

- -

Veieu també

- - - -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Assessment", "Learn/CSS/CSS_layout")}}

diff --git a/files/ca/learn/css/disseny_css/index.html b/files/ca/learn/css/disseny_css/index.html deleted file mode 100644 index e74e5da0b9..0000000000 --- a/files/ca/learn/css/disseny_css/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: Disseny CSS -slug: Learn/CSS/Disseny_CSS -tags: - - Beginner - - CSS - - Floating - - Grids - - Guide - - Landing - - Layout - - Learn - - Module - - Multiple column - - Positioning - - flexbox - - float -translation_of: Learn/CSS/CSS_layout ---- -
{{LearnSidebar}}
- -

En aquest punt, ja hem examinat els fonaments de CSS, com l'estil del text, i l'estil i la manipulació de les caixes en el que estroba dins el contingut. Ara és hora de veure com col·locar les caixes al lloc correcte en relació amb la finestra de visualització, entre elles. Hem cobert els requisits previs necessaris de manera que ara podem aprofundir en el disseny CSS, provant diferents paràmetres de visualització, mètodes tradicionals de disseny que inclouen flotants i posicionament, i noves eines de disseny modernas, com flexbox.

- -

Requisits previs

- -

Abans de començar aquest mòdul, ja hauríeu de:

- -
    -
  1. Estar familiaritzats amb els principis bàsics d' HTML, tal com es descriu en el mòdul Introducció a HTML.
    2. -
  2. Sentir-vos còmodes amb els fonaments CSS, tal com s'ha tractat a la Introducció a CSS.
    3. -
  3. Entendre com fer caixes d'estil.
    4. -
- -
-

Nota: Si esteu treballant en un ordinador/tauleta/altre dispositiu on no té la capacitat de crear els vostres propis fitxers, podeu provar (la majoria) d'exemples de codi, en un programa de codificació en línia com JSBin o Thimble.

-
- -

Guies

- -

Aquests articles proporcionaran instruccions sobre les eines i tècniques fonamentals de disseny, disponibles a CSS.

- -
-
Introducció al disseny CSS
-
Aquest article recapitularà algunes de les característiques de disseny de CSS que ja hem tocat en els mòduls anteriors, com els diferents valors de {{cssxref("display")}} - i introduïm alguns dels conceptes que cobrirem al llarg d'aquest mòdul.
-
Flotants
-
Originalment per a imatges flotants dins dels blocs de text, la propietat {{cssxref("float")}} s'ha convertit en una de les eines més utilitzades per crear diversos dissenys de columnes a les pàgines web. Aquest article ho explica tot.
-
Posicionament
-
El posicionament us permet treure elements del flux normal de disseny del document, i fer que es comportin de manera diferent, per exemple, asseguts un damunt de l'altre o quedant sempre al mateix lloc dins de la finestra de visualització del navegador. Aquest article explica els diferents valors de {{cssxref("position")}}, i com utilitzar-los.
-
Exemples pràctics de posicionament
-
Amb els conceptes bàsics de posicionament coberts en l'últim article, veurem, ara, com construir un parell d'exemples del món real per il·lustrar quin tipus de coses podeu fer amb el posicionament.
-
Flexbox
-
Una nova tecnologia, però amb suport, ara, bastant estès en tots els navegadors, Flexbox està començant a estar preparat per a un ús generalitzat. Flexbox proporciona eines que permeten crear ràpidament dissenys complexos i flexibles i característiques que històricament resulten difícils amb CSS. Aquest article explica tots els fonaments.
-
Graelles
-
Els sistemes de graella són una altra característica molt comuna que s'utilitza en els dissenys de CSS, que solen implementar-se mitjançant flotadors o altres característiques de disseny. Imagineu el disseny com un nombre establert de columnes (p. Ex. 4, 6 o 12) i, a continuació, ajusteu les columnes de contingut dins d'aquestes columnes imaginàries. En aquest article explorarem la idea bàsica sobre la creació d'un sistema de graella, mireu l'ús d'un sistema de graella confeccionat per un marc (framework) de graella i finalitzeu l'experimentació amb les Graelles CSS - una incipient nova funció de navegador fa que l'implementació de disseny de graella a la Web sigui molt més fàcil.
-
- -

Avaluacions

- -

Les següents avaluacions posaran a prova la vostra capacitat per dissenyar pàgines web amb CSS.

- -
-
Creació d'un disseny flexible multicolumna (TBD)
-
Aquesta avaluació provarà la vostra capacitat per crear un disseny estàndard de diverses columnes, amb algunes característiques interessants.
-
Creació d'un widget de control fix (TBD)
-
Aquesta avaluació desafia la vostra comprensió del posicionament, demanant-vos que creeu un widget de control de posició fix que permeti a l'usuari accedir als controls d'una aplicació web independentment d'on es desplaci.
-
diff --git a/files/ca/learn/css/disseny_css/introduccio_disseny_css/index.html b/files/ca/learn/css/disseny_css/introduccio_disseny_css/index.html deleted file mode 100644 index 88a924dc00..0000000000 --- a/files/ca/learn/css/disseny_css/introduccio_disseny_css/index.html +++ /dev/null @@ -1,700 +0,0 @@ ---- -title: Introducció al disseny CSS -slug: Learn/CSS/Disseny_CSS/Introduccio_disseny_CSS -tags: - - Article - - Beginner - - CSS - - Floats - - Grids - - Introduction - - Layout - - Learn - - Positioning - - Tables - - flexbox - - flow -translation_of: Learn/CSS/CSS_layout/Introduction ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}
- -

Aquest article recapitula algunes de les característiques de disseny CSS que ja hem tocat en els mòduls anteriors, com els diferents valors de {{cssxref ("display")}}, i introdueix alguns dels conceptes que exposem al llarg d'aquest mòdul.

- - - - - - - - - - - - -
Prerequisits:Conceptes bàsics d'HTML (consulta la Introducció a HTML), i nocions de com funciona el CSS (consulta la Introducció al CSS).
Objectiu:Adquirir una visió general de les tècniques de disseny de pàgines web amb CSS. Cada tècnica es pot aprendre amb més detall en tutorials posteriors.
- -

Les tècniques de disseny de pàgina web amb CSS ens permeten prendre els elements que hi ha en una pàgina web i controlar on estan posicionats en relació amb la seva posició predeterminada en el flux de disseny normal, els altres elements del voltant, l’element pare contenidor o la finestra de visualització / finestra principal. Les tècniques de disseny de pàgines que exposem amb més detall en aquest mòdul són:

- - - -

Cada tècnica té els seus usos, avantatges i inconvenients, i cap tècnica s'ha dissenyat per utilitzar-se aïllada. Entenent per a què s’ha dissenyat cada mètode estaràs en una bona posició per entendre quina és la millor disposició per a cada tasca.

- -

Flux normal

- -

El flux normal és la manera com el navegador estableix les pàgines HTML de manera predeterminada quan no es fa res per controlar el disseny de pàgina. Vegem-ne un exemple HTML ràpid:

- -
<p>I love my cat.</p>
-
-<ul>
-  <li>Buy cat food</li>
-  <li>Exercise</li>
-  <li>Cheer up friend</li>
-</ul>
-
-<p>The end!</p>
- -

Per defecte, el navegador mostra aquest codi de la manera següent:

- -

{{ EmbedLiveSample('Normal_flow', '100%', 200) }}

- -

Tingues en compte que aquí l'HTML es mostra en l'ordre exacte en què apareix en el codi d’origen, amb elements apilats l’un sobre l’altre: el primer paràgraf, seguit de la llista no ordenada, seguit del segon paràgraf.

- -

Per a molts dels elements de la pàgina el flux normal crea exactament la disposició que cal, però per dissenys més complexos et farà falta alterar aquest comportament per defecte fent ús d'alguna de les eines disponibles en CSS. Començar amb un document HTML ben estructurat és molt important, donat que així pots treballar amb com les coses es disposen per defecte, en comptes de barallar-t'hi.

- -

Les tècniques de disseny tendeixen a substituir aquest comportament predeterminat, utilitzant les tècniques següents:

- - - -

La propietat display

- -

Els mètodes principals per aconseguir un disseny de pàgina amb CSS són tots els valors de la propietat display (visualització). Aquesta propietat ens permet canviar la manera per defecte com es mostren les coses. Tot el que hi ha al flux normal té un valor de display, que s'utilitza com la forma per defecte en què es comporten els elements que hi estan configurats. Per exemple, el fet que els paràgrafs en català es mostrin un per sota de l’altre es deu al fet que s’estilen amb display: block. Si creeu un enllaç al voltant d'un text dins d'un paràgraf, aquest enllaç romandrà en línia amb la resta del text i no es dividirà en cap línia nova. Això es deu al fet que l'element {{htmlelement("a")}} és display: inline per defecte.

- -

Pots canviar aquest comportament de visualització per defecte. Per exemple, l'element {{htmlelement("li")}} és display: block per defecte, és a dir, que els elements de la llista es mostren l'un a sota de l'altre al nostre document en català. Si canviem el valor de display a inline, ara es mostraran un al costat de l’altre, com ho farien les paraules en una frase. El fet que puguis canviar el valor de display de qualsevol element significa que pots triar elements HTML pel seu significat semàntic, sense preocupar-te de com quedaran. La seva aparença és una cosa que es pot canviar.

- -

A més de poder canviar la presentació predeterminada, canviant un element de block a inline i viceversa, hi ha alguns mètodes de disseny més grans que comencen com amb un valor de display. Tanmateix, quan els feu servir, generalment haureu d'invocar propietats addicionals. Els dos valors més importants per als nostres propòsits a l’hora de parlar del disseny són display: flex i display: grid.

- -

Caixes flexibles (Flexbox)

- -

Flexbox és el nom breu del mòdul de disseny de caixa flexible, dissenyat per facilitar-nos la distribució de les coses en una dimensió, sigui com a fila o com a columna. Per utilitzar flexbox, apliqueu display: flex a l'element pare dels elements que vulgueu disposar; tots els seus fills directes es converteixen en ítems flexibles. Ho podem veure en un exemple senzill.

- -

L'etiquetatge HTML següent ens proporciona un element contenidor, amb una classe wrapper, dins del qual hi ha tres elements {{htmlelement("div")}}. Per defecte, es mostrarien com a elements de bloc, un a sota de l’altre, al nostre document.

- -

Tanmateix, si afegim display: flex al pare, els tres elements ara es disposen en columnes. Això es deu al fet que es converteixen en ítems flexibles (flex items) i es veuen afectats per alguns valors inicials que flexbox estableix al contenidor flex. Es mostren en una fila, perquè el valor inicial de {{cssxref("flex-direction")}} establert al seu pare és row. Tots semblen estirar-se fins a l’alçada de l’element més alt, perquè el valor inicial de la propietat {{cssxref("align-items")}} establert al seu pare és stretch. Això significa que els ítems s’estenen fins a l’alçada del contenidor flex, que en aquest cas està definida per l’element més alt. Tots els articles s’alineen a l’inici del contenidor, deixant qualsevol espai addicional al final de la fila.

- -
- - -
.wrapper {
-  display: flex;
-}
-
- -
<div class="wrapper">
-  <div class="box1">One</div>
-  <div class="box2">Two</div>
-  <div class="box3">Three</div>
-</div>
-
-
- -

{{ EmbedLiveSample('Flex_1', '300', '200') }}

- -

A més de les propietats anteriors que es poden aplicar al contenidor flex, hi ha propietats que es poden aplicar als ítems flex. Aquestes propietats, entre altres coses, poden canviar la manera com es “flexionen” els ítems, cosa que els permet expandir-se i contraure’s per adaptar-se a l’espai disponible.

- -

Com a exemple senzill d'això, podem afegir la propietat {{cssxref ("flex")}} a tots els nostres elements fill, amb un valor d'1. Això farà que tots els ítems creixin i omplin el contenidor, en comptes de deixar espai al final. Si hi ha més espai, els elements s’ampliaran; si hi ha menys espai es tornaran més estrets. A més, si afegiu un altre element al marcatge, tots els elements es faran més petits per fer-hi espai; ajustaran la seva mida per ocupar la mateixa quantitat d’espai, sigui quin sigui.

- -
- - -
.wrapper {
-    display: flex;
-}
-
-.wrapper > div {
-    flex: 1;
-}
-
- -
<div class="wrapper">
-    <div class="box1">One</div>
-    <div class="box2">Two</div>
-    <div class="box3">Three</div>
-</div>
-
-
- -

{{ EmbedLiveSample('Flex_2', '300', '200') }}

- -
-

Nota: Aquesta ha estat una molt breu introducció al que és possible amb Flexbox. Per obtenir més informació, consulteu el nostre article de Flexbox.

-
- -

Disposició en graella (Grid)

- -

Mentre que Flexbox està dissenyat per al disseny unidimensional, el disseny de quadrícula està pensat per a dues dimensions: alinear les coses en files i columnes.

- -

Una vegada més, podeu activar el disseny de quadrícula amb un valor específic de display - display: grid. L'exemple següent utilitza un marcatge similar a l'exemple de flex, amb un contenidor i alguns elements fills. A més d’utilitzar display: grid, també definim files i columnes al pare mitjançant les propietats {{cssxref("grid-template-rows")}} i {{cssxref("grid-template-columns")}}, respectivament. Hem definit tres columnes cadascuna d'1fr i dues files de 100px. No necessito posar cap regla sobre els elements infantils; es col·loquen automàticament a les cel·les que ha creat la nostra graella.

- -
- - -
.wrapper {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    grid-template-rows: 100px 100px;
-    grid-gap: 10px;
-}
-
- -
<div class="wrapper">
-    <div class="box1">One</div>
-    <div class="box2">Two</div>
-    <div class="box3">Three</div>
-    <div class="box4">Four</div>
-    <div class="box5">Five</div>
-    <div class="box6">Six</div>
-</div>
-
-
- -

{{ EmbedLiveSample('Grid_1', '300', '330') }}

- -

Un cop tingueu una graella, podeu col·locar-hi explícitament els elements, en lloc de confiar en el comportament de la ubicació automàtica que acabem de veure. Al segon exemple que teniu a continuació hem definit la mateixa graella, però aquesta vegada amb tres elements fills. Hem definit la línia inicial i final de cada element mitjançant les propietats {{cssxref("grid-column")}} i {{cssxref("grid-row")}}. Això fa que els elements abastin diverses pistes.

- -
- - -
.wrapper {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    grid-template-rows: 100px 100px;
-    grid-gap: 10px;
-}
-
-.box1 {
-    grid-column: 2 / 4;
-    grid-row: 1;
-}
-
-.box2 {
-    grid-column: 1;
-    grid-row: 1 / 3;
-}
-
-.box3 {
-    grid-row: 2;
-    grid-column: 3;
-}
-
- -
<div class="wrapper">
-    <div class="box1">One</div>
-    <div class="box2">Two</div>
-    <div class="box3">Three</div>
-</div>
-
-
- -

{{ EmbedLiveSample('Grid_2', '300', '330') }}

- -
-

Nota: Aquests dos exemples són només una petita part de la potència del disseny de graella; per obtenir més informació, consulteu el nostre article sobre Graelles (Grids).

-
- -

La resta d'aquesta guia cobreix altres mètodes de disseny, que són menys importants per a les principals estructures de disseny de la pàgina, però que poden ajudar-vos a realitzar tasques específiques. En comprendre la naturalesa de cada tasca de disseny, aviat trobareu que, quan mireu un component concret del vostre disseny, el tipus de disseny més adequat sovint serà clar.

- -

Elements flotants (Floats)

- -

Flotar un element canvia el comportament d’aquest element i dels elements de nivell de bloc que el segueixen en un flux normal. L'element es mou cap a l'esquerra o cap a la dreta i s'elimina del flux normal i el contingut circumdant flota al voltant de l'element flotat.

- -

La propietat {{cssxref("float")}} té quatre valors possibles:

- - - -

A l'exemple següent, flotem un <div> a l'esquerra i li donem un {{cssxref("margin")}}} per la dreta per apartar el text de l'element. Això ens dona l’efecte del text rodejant aquesta caixa i és la major part del que heu de saber sobre els elements flotants tal com s’utilitzen en el disseny web modern.

- -
- - -
<h1>Simple float example</h1>
-
-<div class="box">Float</div>
-
-<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
-
-
- -
-.box {
-    float: left;
-    width: 150px;
-    height: 150px;
-    margin-right: 30px;
-}
-
-
- -

{{ EmbedLiveSample('Float_1', '100%', 600) }}

- -
-

Nota: Els floats s’expliquen completament a la nostra lliçó sobre les propietats float i clear. Abans de tècniques com Flexbox i Grid es feien servir floats com a mètode per crear dissenys de columnes. És possible que encara trobeu aquests mètodes al web; els tractarem a la lliçó sobre mètodes de disseny heretats.

-
- -

Tècniques de posicionament

- -

El posicionament us permet moure un element des d'on es col·locaria quan estigués en un flux normal a una altra ubicació. El posicionament no és un mètode per crear el disseny principal de la pàgina, sinó que es tracta més de gestionar i ajustar la posició d’elements específics de la pàgina.

- -

Tot i això, hi ha tècniques útils per a certs patrons de disseny que depenen de la propietat {{cssxref("position")}}. La comprensió del posicionament també ajuda a entendre el flux normal, i què significa moure un element fora del flux normal.

- -

Hi ha cinc tipus de posicionament principals, que hauries de conèixer:

- - - -

Un exemple senzill de posicionament

- -

Per familiaritzar-te amb aquestes tècniques de disseny de pàgina, el mostrem un parell d'exemples ràpids. Tots els nostres exemples tenen el mateix codi HTML, que és el següent:

- -
<h1>Positioning</h1>
-
-<p>I am a basic block level element.</p>
-<p class="positioned">I am a basic block level element.</p>
-<p>I am a basic block level element.</p>
- -

Apliquem a aquest codi HTML un estil predeterminat amb el codi CSS següent:

- -
body {
-  width: 500px;
-  margin: 0 auto;
-}
-
-p {
-  background: aqua;
-  border: 3px solid blue;
-  padding: 10px;
-  margin: 10px;
-}
-
-span {
-  background: red;
-  border: 1px solid black;
-}
- -

La sortida que dona és la següent:

- -

{{ EmbedLiveSample('Simple_positioning_example', '100%', 300) }}

- -

Posicionament Relatiu (Relative positioning)

- -

El posicionament relatiu et permet desplaçar un element de la posició que tindria per defecte en flux normal. Això vol dir que pots assolir una tasca com ara moure una icona cap avall de manera que quedi alineada amb una etiqueta de text. Per fer-ho, podríem afegir la següent regla per afegir un posicionament relatiu:

- -
.positioned {
-  position: relative;
-  background: yellow;
-  top: 30px;
-  left: 30px;
-}
- -

Aquí hem donat al nostre paràgraf del mig un valor {{cssxref("position")}} de relative; això no fa res per si mateix, de manera que també afegim les propietats {{cssxref("top")}} i {{cssxref("left")}}, que serveixen per a moure l'element afectat cap avall i cap a la dreta; això podria semblar el contrari del que s'esperava, però cal pensar que l'element és empès des dels costats esquerre i superior, cosa que fa que es mogui cap a la dreta i avall.

- -

Si afegeixes aquest codi, es mostra el resultat següent:

- - - -

{{ EmbedLiveSample('Relative_positioning_example', '100%', 300) }}

- -

Posicionament absolut (Absolute)

- -

El posicionament absolut s’utilitza per eliminar completament un element del flux normal i col·locar-lo mitjançant desplaçaments des de les vores d’un bloc contenidor.

- -

Tornant al nostre exemple original no posicionat, podríem afegir la regla CSS següent per a implementar el posicionament absolut:

- -
.positioned {
-  position: absolute;
-  background: yellow;
-  top: 30px;
-  left: 30px;
-}
- -

Aquí hem donat al nostre paràgraf del mig un valor {{cssxref("position")}} d'absolute, i les mateixes propietats {{cssxref("top")}} i {{cssxref("left")}}, com abans. L'addició d'aquest codi, però, dona el resultat següent:

- - - -

{{ EmbedLiveSample('Absolute_positioning_example', '100%', 300) }}

- -

Això és molt diferent. L'element ha quedat totalment separat de la resta del disseny de la pàgina i s’hi ha col·locat a sobre en l’extrem superior. Els altres dos paràgrafs ara es disposen junts, com si el germà posicionat no existís. Les propietats {{cssxref("top")}} i {{cssxref("left")}} tenen un efecte diferent sobre elements amb posicionament absolut que sobre elements amb posicionament relatiu. En aquest cas, s'especifica la distància a la qual l'element s’ha de situar dels costats superior i esquerre de la pàgina. És possible canviar l'element pare que es converteix en aquest contenidor i ho veurem a la lliçó sobre posicionament.

- -

Posicionament fix (fixed positioning)

- -

El posicionament fix elimina el nostre element del flux de documents de la mateixa manera que el posicionament absolut. Tanmateix, en lloc d'aplicar els desplaçaments des del contenidor, s'apliquen des de la finestra gràfica. Com que l'element es manté fix en relació amb la finestra gràfica, podem crear efectes com un menú que es manté fix a mesura que la pàgina es desplaça per sota.

- -

Per a aquest exemple, el nostre HTML inclou tres paràgrafs de text, per tal que puguem fer que la pàgina es desplaci, i un quadre al qual donarem position: fixed.

- -
<h1>Fixed positioning</h1>
-
-<div class="positioned">Fixed</div>
-
-<p>Paragraph 1.</p>
-<p>Paragraph 2.</p>
-<p>Paragraph 3.</p>
-
- -
- - -
.positioned {
-    position: fixed;
-    top: 30px;
-    left: 30px;
-}
-
- -

{{ EmbedLiveSample('Fixed_1', '100%', 200) }}

- -

Posicionament enganxós (sticky positioning)

- -

El posicionament enganxós és el mètode de posicionament final que tenim a la nostra disposició. Combina el posicionament estàtic per defecte amb el posicionament fix. Quan un element té position: sticky, es desplaçarà en flux normal fins que arribi al desplaçament sobre la finestra de visualització del navegador que definit. En aquest moment es queda "enganxat" com si tingués position: fixed aplicat.

- -
- - -
.positioned {
-  position: sticky;
-  top: 30px;
-  left: 30px;
-}
-
- -

{{ EmbedLiveSample('Sticky_1', '100%', 200) }}

- -
-

Nota: per aprendre més sobre posicionament, aneu a l'article sobre posicionament.

-
- -

Taules CSS

- -

Les taules HTML són perfectes per a mostrar dades tabulades, però fa molts anys, fins i tot abans que el CSS bàsic fos compatible de manera fiable entre els navegadors, els desenvolupadors web solien utilitzar taules per als dissenys de pàgines web senceres; col·locaven els encapçalaments, els peus de pàgina, les diferents columnes, etc., en files i columnes d’una taula. Això va funcionar en el moment, però presenta molts problemes: els dissenys de taules no són flexibles, l’etiquetatge és feixuc, són difícils de depurar, i són semànticament erronis (els usuaris de lectors de pantalla, per exemple, tenen problemes per navegar en dissenys de pàgina web amb taules).

- -

La forma en què es mostra una taula en una pàgina web quan utilitzeu el marcatge de taula es deu a un conjunt de propietats CSS que defineixen el disseny de la taula. Aquestes propietats es poden utilitzar per disposar elements que no són taules, un ús que de vegades es descriu com "utilitzar taules CSS".

- -

L'exemple següent mostra un d'aquests usos; L'ús de taules CSS per al disseny s'hauria de considerar un mètode heretat en aquest moment, per a aquelles situacions en què tingueu navegadors molt antics sense compatibilitat amb Flexbox o Grid.

- -

Vegem-ne un exemple. Primer, un marcatge senzill que crea un formulari HTML. Cada element d'entrada té una etiqueta i també hem inclòs un text dins d'un paràgraf. Cada parell label/input està envoltat d'un element {{htmlelement("div")}}, amb finalitats de disseny.

- -
<form>
-  <p>First of all, tell us your name and age.</p>
-  <div>
-    <label for="fname">First name:</label>
-    <input type="text" id="fname">
-  </div>
-  <div>
-    <label for="lname">Last name:</label>
-    <input type="text" id="lname">
-  </div>
-  <div>
-    <label for="age">Age:</label>
-    <input type="text" id="age">
-  </div>
-</form>
- -

Ara afegim el CSS al nostre exemple. La major part del CSS és bastant comú, excepte els usos de la propietat {{cssxref("display")}}. A l’element {{htmlelement("form")}} i als elements {{htmlelement("div")}}, {{htmlelement("label")}} i {{htmlelement("input")}} se'ls hi ha dit que es mostrin com una taula, files de la taula i cel·les de la taula, respectivament; bàsicament actuaran com un marcatge de taula HTML que alinea les etiquetes de text i les entrades de manera predeterminada. Tot el que hem de fer és afegir una mica de mida, marges, etc. perquè tot es vegi una mica més agradable, i ja haurem acabat.

- -

Observa que s’ha assignat al paràgraf de descripció (caption) la declaració display: table-caption;, que fa que aquest paràgraf actuï com un títol de taula ({{htmlelement("caption")}}), i també caption-side: bottom;, que indica que el títol es posa a la part inferior de la taula amb finalitats d'estil, encara que va abans de les entrades de la taula en l’ordre del codi d’origen. Això permet una mica de flexibilitat.

- -
html {
-  font-family: sans-serif;
-}
-
-form {
-  display: table;
-  margin: 0 auto;
-}
-
-form div {
-  display: table-row;
-}
-
-form label, form input {
-  display: table-cell;
-  margin-bottom: 10px;
-}
-
-form label {
-  width: 200px;
-  padding-right: 5%;
-  text-align: right;
-}
-
-form input {
-  width: 300px;
-}
-
-form p {
-  display: table-caption;
-  caption-side: bottom;
-  width: 300px;
-  color: #999;
-  font-style: italic;
-}
- -

Això ens dona el resultat següent:

- -

{{ EmbedLiveSample('CSS_tables', '100%', '170') }}

- -

També pots veure aquest exemple en viu en el fitxer css-tables-example.html (i també consultar-ne el codi d’origen).

- -

Disseny multicolumna

- -

El mòdul de disseny de múltiples columnes ens proporciona una manera de distribuir contingut en columnes, de manera similar a com flueix el text en un diari. Tot i que la lectura de columnes cap amunt i cap avall és menys útil en un context web, ja que no voleu obligar els usuaris a desplaçar-se cap amunt i cap avall, la disposició del contingut en columnes pot ser una tècnica útil.

- -

Per convertir un bloc en un contenidor multicolumna, utilitzem la propietat {{cssxref("column-count")}}, que indica al navegador quantes columnes voldríem tenir o bé {{cssxref("column-width" )}}, que indica al navegador que ompli el contenidor amb tantes columnes d'almenys aquesta amplada.

- -

A l'exemple següent, comencem amb un bloc d'HTML dins d'un element <div> que conté una classe de container.

- -
<div class="container">
-    <h1>Multi-column layout</h1>
-
-    <p>Paragraph 1.</p>
-    <p>Paragraph 2.</p>
-
-</div>
- -

Utilitzem una column-width (amplada de columna) de 200 píxels en aquest contenidor, cosa que provoca que el navegador creï tantes columnes de 200 píxels com càpiguen al contenidor i, a continuació, comparteixi l’espai restant entre les columnes creades.

- -
- - -
    .container {
-        column-width: 200px;
-    }
-
- -

{{ EmbedLiveSample('Multicol_1', '100%', 200) }}

- -

Resum

- -

Aquest article ha proporcionat un breu resum de totes les tecnologies de disseny que has de conèixer. Continua llegint per a obtenir més informació sobre cadascuna d’aquestes tecnologies!

- -

{{NextMenu("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}

diff --git a/files/ca/learn/css/disseny_css/posicionament/index.html b/files/ca/learn/css/disseny_css/posicionament/index.html deleted file mode 100644 index 213293ff4e..0000000000 --- a/files/ca/learn/css/disseny_css/posicionament/index.html +++ /dev/null @@ -1,467 +0,0 @@ ---- -title: Posicionament -slug: Learn/CSS/Disseny_CSS/Posicionament -tags: - - Article - - Beginner - - CSS - - CodingScripting - - Guide - - Layout - - Positioning - - absolute - - fixed - - relative -translation_of: Learn/CSS/CSS_layout/Positioning ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout")}}
- -

El posicionament permet treure elements del flux normal de disseny del document, i fer que es comportin de manera diferent, per exemple, asseient-se un damunt de l'altre o mantenint-se sempre al mateix lloc dins de la finestra de visualització del navegador. Aquest article explica els diferents valors de {{cssxref("position")}}, i com utilitzar-los.

- - - - - - - - - - - - -
Requisits previs:Conceptes bàsics d'HTML (estudi Introducció a HTML), i una idea de com funciona CSS (estudi Introducció a CSS).
Objectiu:Aprendre com funciona el posicionament CSS.
- -

Flux del document

- -

El posicionament és un tema bastant complex, per tant, abans de submergir-nos en el codi, anem a revisar i ampliar una mica de teoria de disseny per donar-nos una idea de com funciona això.

- -

En primer lloc, les caixes d'elements individuals es defineixen tenint en compte el contingut dels elements, afegint-hi qualsevol farciment, vora i marge al voltant d'ells - és a dir, aquell model de caixa nou, que vam mirar abans. Per defecte, el contingut d'un element de nivell de bloc és del 100% de l'ample de l'element pare i tan alt com el seu contingut. Els elements en línia són tan alts  i tan amples com el seu contingut. No es pot definir l'ample o alçada en elements en línia - simplement s'assenten dins del contingut dels elements de nivell de bloc. Si es vol controlar la mida d'un element en línia d'aquesta manera, s'ha d'establir perquè es comporti com un element de nivell de bloc amb display: block;.

- -

Això explica els elements individuals, però què passa amb els elements que interactuen els uns amb els altres? El flux de disseny normal (esmentat en l'article de presentació de disseny) és el sistema mitjançant el qual es col·loquen els elements dins de la finestra de visualització del navegador. De manera predeterminada, els elements de nivell de bloc es distribueixen verticalment a la finestra de visualització: cadascun d'ells apareixerà en una nova línia,per sota d l'última i se separaran per qualsevol marge que s'estableixi en ells.

- -

Els elements en línia es comporten de manera diferent - no apareixen en noves línies; en canvi, s'assenten en la mateixa línia que els altres i amb qualsevol contingut de text adjacent (o embolicat), sempre que hi hagi espai perquè ho facin dins de l'amplada de l'element a nivell de bloc pare. Si no hi ha espai, el text desbordat o els elements es desplacen cap a una nova línia.

- -

Si dos elements adjacents tenen un marge establert i els dos marges es toquen, el més gran dels dos es queda i el més petit desapareix - això es diu col.lapsació del marge, i també ho hem conegut abans.

- -

Vegem un exemple senzill que expliqui tot això:

- -
<h1>Basic document flow</h1>
-
-<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p>
-
-<p>By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.</p>
-
-<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p>
-
-<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements will <span>wrap onto a new line if possible (like this one containing text)</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p>
- -
body {
-  width: 500px;
-  margin: 0 auto;
-}
-
-p {
-  background: aqua;
-  border: 3px solid blue;
-  padding: 10px;
-  margin: 10px;
-}
-
-span {
-  background: red;
-  border: 1px solid black;
-}
- -

{{ EmbedLiveSample('Document_flow', '100%', 500) }}

- -

Revisarem aquest exemple diverses vegades al llarg d'aquest article, ja que mostrarem els efectes de les diferents opcions de posicionament disponibles per a nosaltres.

- -

Ens agradaria que seguíssiu els exercicis en el vostre ordinador, si és possible - agafeu una còpia de 0_basic-flow.html del nostre repositori de Github (codi font aquí) i utilitzeu-lo com a punt de partida.

- -

Introducció al posicionament

- -

Tota la idea del posicionament és permetre'ns anul·lar el comportament bàsic del flux de documents descrit anteriorment, per produir efectes interessants. Què passa si voleu canviar lleugerament la posició d'algunes caixes dins d'un disseny des de la seva posició de flux de disseny per defecte, per donar-li un toc lleugerament peculiar i molest? El posicionament és la vostra eina. O si voleu crear un element d'interfície d'usuari que floti a la part superior d'altres parts de la pàgina i/o sempre es trobi al mateix lloc dins de la finestra del navegador, sense importar quant es desplaça la pàgina? El posicionament fa possible aquest treball de disseny.

- -

Hi ha una sèrie de diferents tipus de posicionament que podeu implementar en elements HTML. Per fer un tipus específic de posicionament actiu en un element, utilitzem la propietat {{cssxref("position")}}.

- -

Posicionament estàtic (Static)

- -

El posicionament estàtic és el valor predeterminat que cada element obté - significa "posar l'element en la seva posició normal en el flux del disseny del document - res especial per veure aquí".

- -

Per demostrar això i preparar el vostre exemple per a futures seccions, primer afegiu una class de positioned al segon {{htmlelement("p")}} en l'HTML:

- -
<p class="positioned"> ... </p>
- -

Ara afegiu la següent regla a la part inferior del vostre CSS:

- -
.positioned {
-   position: static;
-  background: yellow;
-}
- -

Si ara deseu i actualitzeu, no veureu cap diferència en absolut, excepte el color de fons actualitzat del segon paràgraf. Està bé - com hem dit abans, el posicionament estàtic és el comportament predeterminat!

- -
-

Nota: Podeu veure l'exemple en aquest moment en directe a 1_static-positioning.html (vegeu el codi font).

-
- -

Posicionament relatiu (Relative)

- -

El posicionament relatiu és el primer tipus de posició que veurem. Això és molt semblant al posicionament estàtic, tret que una vegada que l'element posicionat ha tingut el seu lloc en el flux de disseny normal, podeu modificar la seva posició final, incloent-hi la superposició d'altres elements a la pàgina. Seguiu i actualitzeu la declaració de posició del vostre codi:

- -
position: relative;
- -

Si deseu i actualitzeu en aquesta etapa, no veureu cap canvi en el resultat en absolut, així, com modifiqem la posició de l'element? Heu d'utilitzar les propietats {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} i {{cssxref("right")}} , Que explicarem en la següent secció.

- -

Introduir top, bottom, left i right

- -

{{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, and {{cssxref("right")}} s'utilitzen juntament amb {{cssxref("position")}} per especificar exactament a on moure l'element posicionat. Per provar-ho, afegiu les següents declaracions a la regla .positioned al vostre CSS:

- -
top: 30px;
-left: 30px;
- -
-

Nota: Els valors d'aquestes propietats pot prendre totes les unitats que s'esperaria lògicament - píxels, mm, rems,%, etc.

-
- -

Si ara deseu i actualitzeu, obtindreu un resultat com aquest:

- - - -

{{ EmbedLiveSample('Introducing_top_bottom_left_and_right', '100%', 500) }}

- -

Genial, eh? D'acord, aixó es probablement el que no esperaves: per què s'ha mogut a la part inferior i la dreta si s'especificat a dalt i a l'esquerra? Pot sonar Il·lògic inicialment, però aquesta és la forma en què funciona el posicionament relatiu: cal pensar en una força invisible que empeny el costat de la caixa posicionada, movent-la en la direcció oposada. Així, per exemple, si especifiqueu un top: 30px;, una força empeny la part superior de la caixa, fent que es mogui cap avall en 30px.

- -
-

Nota: Podeu veure l'exemple en aquest moment en directe a 2_relative-positioning.html (vegeu el codi font).

-
- -

Posicionament absolut (Absolute)

- -

El posicionament absolut porta resultats molt diferents. Intenteu canviar la declaració de posició del vostre de la manera següent:

- -
position: absolute;
- -

Si ara deseu i actualitzeu, obtindreu un resultat com aquest:

- - - -

{{ EmbedLiveSample('Absolute_positioning', '100%', 420) }}

- -

En primer lloc, tingueu en compte que el buit on l'element posicionat hauria d'estar en el flux del document ja no hi és - el primer i el tercer element s'han tancat junts, com que ja no existeix!. Bé, en certa manera, això és cert. Un element absolutament posicionat ja no existeix en el flux de disseny normal del document. En lloc d'això, s'asseu a la seva pròpia capa separada de tota la resta. Això és molt útil - vol dir que podem crear funcions d'interfície d'usuari aïllades que no interfereixin amb la posició d'altres elements de la pàgina - per exemple, les caixes d'informació emergents i els menús de control, els panells de rollover, les funcions d'interfície d'usuari que es poden arrossegar i deixar anar a qualsevol lloc en la pàgina, i així successivament.

- -

En segon lloc, observeu que la posició de l'element ha canviat - això es deu al fet que {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} i {{cssxref("right")}} es comporten d'una manera diferent amb el posicionament absolut. En lloc d'especificar la direcció en què l'element s'ha de moure, especifiquen la distància que ha de tenir l'element en cada costat dels elements que contingui. Així que, en aquest cas, estem dient que l'element absolutament posicionat hauria de situar-se 30px des de la part superior del "element que conté" i 30px des de l'esquerra.

- -
-

Nota: Podeu utilitzar {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} i {{cssxref("right")}} per canviar la mida dels elements si és necessari. Intenteu establir top: 0; bottom: 0; left: 0; right: 0; and margin: 0; en els elements posicionats i veureu què passa! Torneu a posar-ho de nou després...

-
- -
-

Nota: Sí, els marges encara afecten els elements posicionats. Tanmateix, el col·lapse de marges no existeix.

-
- -
-

Nota: Podeu veure l'exemple en aquest moment en directe a 3_absolute-positioning.html (vegeu el codi font).

-
- -

Contextos de posicionament

- -

Quin element és el "element que conté" un element absolutament posicionat? Per defecte, és l'element {{htmlelement("html")}} - l'element posicionat està niat dins del {{htmlelement("body")}} en la font HTML, però en el disseny final, es troba a 30px de distància des de la part superior i esquerra de la vora de la pàgina, que és l'element {{htmlelement("html")}}. Això s'anomena més exactament com a context de posicionament de l'element.

- -

Podem canviar el context de posicionament - quin element posiciona l'element absolutament posicionat en relació a. Això es fa establint el posicionament en un dels altres avantpassats del element - un dels elements que està niat a l'interior (no es pot col·locar en relació amb un element que no està niat a l'interior). Per demostrar-ho, afegiu la següent declaració a la regla del cos:

- -
position: relative;
- -

Això hauria de donar el següent resultat:

- - - -

{{ EmbedLiveSample('Positioning_contexts', '100%', 420) }}

- -

L'element posicionat ara es troba en relació amb l'element {{htmlelement("body")}}.

- -
-

Nota: Podeu veure l'exemple en aquest moment en directe a 4_positioning-context.html (vegeu el codi font).

-
- -

Introducció a z-index

- -

Tot aquest posicionament absolut és una bona diversió, però hi ha una altra cosa que encara no hem considerat - quan els elements comencen a superposar-se, què determina que uns elements apareguin sobre quins altres elements? En l'exemple que hem vist fins ara, només tenim un element posicionat en el context de posicionament, i apareix a la part superior, ja que els elements posicionats guanyen elements no posicionats. Què passa quan tenim més d'un?

- -

Intenteu afegir el següent, al vostre CSS, perquè el primer paràgraf estigui absolutament posicionat també:

- -
p:nth-of-type(1) {
-  position: absolute;
-  background: lime;
-  top: 10px;
-  right: 30px;
-}
- -

En aquest punt, veureu el primer paràgraf de color verd, desplaçat del flux del document i colocat una mica per sobre d'on era originalment. També s'apil·la a sota del paràgraf original .positioned, on els dos es superposen. Això és degut a que el paràgraf .positioned és el segon paràgraf de l'ordre d'origen, i els elements posicionats més endavant en l'ordre d'origen guanyen sobre els elements posicionats anteriorment en l'ordre d'origen.

- -

Es pot canviar l'ordre d'apilament? Sí, podeu fer-ho, utilitzant la propietat {{cssxref("z-index")}}. "z-index" és una referència a l'eix z. Recordareu que en punts anteriors, en la font, parlàvem de la utilització en pàgines web de coordenades horitzontals (eixos x) i verticals (eixos-y) per tal de determinar el posicionament de coses com ara imatges de fons i desplaçaments d'ombra. (0,0) es troba a la part superior esquerra de la pàgina (o element), i els eixos x i y es desplaçan cap a la dreta i avall de la pàgina (per als idiomes d'esquerra a dreta, de totes maneres).

- -

Les pàgines web també tenen un eix z - una línia imaginària que s'estén des de la superfície de la pantalla, cap a la nostra cara (o el que vulgueu tenir davant de la pantalla). Els valors de {{cssxref("z-index")}} afecten on els elements posicionats se situen en aquest eix; els valors positius els mouen més amunt per la pila, i els valors negatius els mouen més avall a la pila. De manera predeterminada, els elements posicionats tenen un z-index d'auto, que és efectivament 0.

- -

Per canviar l'ordre d'apilament, proveu d'afegir la següent declaració a la vostra regla p:nth-of-type(1):

- -
z-index: 1;
- -

Ara hauríeu de veure l'exemple acabat:

- - - -

{{ EmbedLiveSample('Introducing_z-index', '100%', 400) }}

- -

Tingueu en compte que z-index només accepta valors d'índex, sense unitat; No podeu especificar que desitgeu que un element tingui 23 píxels a dalt de l'eix Z - no funciona així. Els valors més alts van per sobre dels valors inferiors, i depèn de vosaltres quins valors utilitzar. L'ús de 2 i 3 donaria el mateix efecte que 300 i 40000.

- -

Tingueu en compte que aquí només hem tractat un únic context de posicionament. Si tinguéssiu dos conjunts separats d'elements posicionats a la mateixa pàgina, i volguéssiu que es  superposessin i que l'ordre d'apilament funcionés d'una manera específica, les coses es complicarien. Afortunadament, molt poques vegades trobareu tal complexitat amb z-index. Si voleu llegir amb molt més detall sobre com funciona exactament z-index, consulteu la Web Standards Curriculum z-index writeup. En aquest article us hem proporcionat tot el que necessiteu saber en aquesta etapa del vostre aprenentatge.

- -
-

Note: Podeu veure l'exemple en aquest moment en directe a 5_z-index.html (vegeu el codi font).

-
- -

Posicionament Fixa (Fixed)

- -

Hi ha un altre tipus de posicionament a cobrir - fixed. Això funciona exactament igual que el posicionament absolut, amb una diferència clau - mentre que el posicionament absolut fixa un element en el lloc en relació amb l'element {{htmlelement("html")}} o seu més proper avantpassat posicionat, el posicionament fix fixa un element en el lloc en relació a la finestra de visualització del navegador. Això vol dir que podeu crear elements útils de la interfície d'usuari que es fixen en el lloc, com ara menús de navegació persistents.

- -

Fem un exemple senzill per mostrar el que volem dir. Abans de res, elimineu les regles existents p:nth-of-type(1) i .positioned del vostre CSS.

- -

Ara, actualitzeu la regla del cos per eliminar la declaració position: relative; i afegiu una alçada fixa, com aixó:

- -
body {
-  width: 500px;
-  height: 1400px;
-  margin: 0 auto;
-}
- -

Ara donarem a l'element {{htmlelement("h1")}} position: fixed;, i aconseguirem que s'assegui en el centre superior de la finestra de visualització. Afegiu la regla següent al vostre CSS:

- -
h1 {
-  position: fixed;
-  top: 0;
-  width: 500px;
-  margin: 0 auto;
-  background: white;
-  padding: 10px;
-}
- -

El top: 0; és necesari per fer que s'adhereixi a la part superior de la pantalla; Donem a l'encapçalament el mateix ample que la columna de contingut i utilitzarem el fidel antic margin: 0 auto; com a truc per centrar-ho. A continuació, li donem un fons blanc i algun farcit, de manera que el contingut no estigui visible per sota d'ell.

- -

Si deseu i actualitzeu ara, veureu un petit efecte divertit pel qual l'encapçalament es manté fix, i el contingut apareix en desplaçar-se cap amunt i desaparèixer per sota d'ell. Però podríem millorar més, això - de moment, alguns dels continguts començan per sota de l'encapçalament, perquè el encapçalament posicionat ja no apareix en el flux del document, de manera que la resta del contingut es mou cap amunt. Necessitem moure-ho tot cap avall una mica; podem fer-ho establint un marge superior al primer paràgraf. Afegiu-ho ara:

- -
p:nth-of-type(1) {
-  margin-top: 60px;
-}
- -

Ara hauríeu de veure l'exemple acabat:

- - - -

{{ EmbedLiveSample('Fixed_positioning', '100%', 400) }}

- -
-

Nota: Podeu veure l'exemple en aquest moment en directe a 6_fixed-positioning.html (vegeu el codi font).

-
- -

Experimental: posició adherent (sticky)

- -

Hi ha un nou valor de posicionament disponible anomenat position: sticky, el suport del mateix no està molt estès. Aquest és bàsicament un híbrid entre una posició relativa i una fixa, que permet que un element posicionat actuï com si estigués relativament posicionat fins que es desplaci a un determinat llindar (per ex., 10px des de la part superior de la finestra de visualització), i després es torna fix.  Vegeu la nostra entrada de referéncia de position: sticky per més detalls i un exemple.

- -

Resum

- -

Estic segur que us heu divertir jugant amb el posicionament bàsic - és una de les eines essencials que està darrera en le creació de complexos dissenys CSS i funcions d'interfície d'usuari. Tenint en compte això, en el proper article tindrem encara més diversió amb el posicionament, allà anirem un pas més enllà i començarem a construir algunes coses útils del món real amb ell.

- -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout")}}

diff --git a/files/ca/learn/css/disseny_css/suport_en_navegadors_antics/index.html b/files/ca/learn/css/disseny_css/suport_en_navegadors_antics/index.html deleted file mode 100644 index 5a689b6437..0000000000 --- a/files/ca/learn/css/disseny_css/suport_en_navegadors_antics/index.html +++ /dev/null @@ -1,237 +0,0 @@ ---- -title: Suport en navegadors antics -slug: Learn/CSS/Disseny_CSS/Suport_en_navegadors_antics -translation_of: Learn/CSS/CSS_layout/Supporting_Older_Browsers ---- -
{{LearnSidebar}}
- -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}}

- -

En aquest mòdul et recomanem que utilitzis els mètodes Flexbox i Grid com a eines principals per als teus dissenys. Tot i això, hi haurà visitants del teu lloc web que utilitzin navegadors més antics o navegadors que no admetin els mètodes que has utilitzat. Això sempre serà així a la xarxa: a mesura que es desenvolupen funcions noves, els diferents navegadors prioritzen coses diferents. Aquest article explica com utilitzar tècniques web modernes sense perjudicar els usuaris que empren una tecnologia més antiga.

- - - - - - - - - - - - -
Prerequisits:Els conceptes bàsics d'HTML (consulta la Introducció a l'HTML), i nocions de com funciona el CSS (consulta la Introducció al CSS i Aplicar estil a les caixes).
Objectiu:Entendre com proporcionar assistència per als dissenys en navegadors antics que potser no són compatibles amb les funcions que vols utilitzar.
- -

El panorama de compatibilitat dels navegadors per al teu lloc web?

- -

Cada lloc web és diferent en termes de públic objectiu. Abans de decidir l’enfocament que cal adoptar, esbrina el nombre de visitants que accedeixen al teu lloc web amb navegadors més antics. Això és senzill si ja tens un lloc web que simplement modifiques o reemplaces, perquè probablement tinguis analítiques que t'indiquin la tecnologia que utilitzen les persones que hi accedeixen. Si no tens analítiques o es tracta un lloc web totalment nou, hi ha llocs com ara Statcounter que poden proporcionar estadístiques filtrades segons la ubicació.

- -

També has de considerar el tipus de dispositius i la manera com la gent utilitza el teu lloc web; per exemple, potser esperes un nombre de dispositius mòbils superior a la mitjana. Sempre s’ha de tenir en compte l’accessibilitat i les persones que utilitzen tecnologia d’assistència, però per a alguns llocs pot ser encara més crític. Segons experiència pròpia, els desenvolupadors sovint es preocupen massa per l’experiència de l’1% d’usuaris en una versió antiga d’Internet Explorer, i no consideren del tot el nombre molt més gran d'usuaris que tenen necessitats d’accessibilitat especials.

- -

La compatibilitat de les funcions que empres

- -

Un cop coneixes els navegadors que accedeixen al teu lloc web, pots valorar qualsevol tecnologia que vulguis utilitzar segons la compatibilitat que presenten i la facilitat amb què pots proporcionar una alternativa als visitants que no tenen aquesta tecnologia disponible. Intentem facilitar-te aquesta experiència proporcionant informació de compatibilitat dels navegadors en cadascuna de les pàgines que detallen una propietat CSS. Per exemple, consulta la pàgina de {{cssxref("grid-template-columns")}}. Al final d'aquesta pàgina hi ha una taula que mostra els navegadors principals juntament amb la versió que va començar a admetre aquesta propietat.

- -

- -

Una altra manera més popular d'esbrinar què és compatible amb una funció és el lloc web Can I Use. Aquest lloc web enumera la majoria de funcions de la plataforma web amb informació sobre l'estat de compatibilitat del navegador. Pots veure les estadístiques d’ús per ubicació, fet que resulta útil si treballes en un lloc que té usuaris d'una àrea del món determinada. Fins i tot pots enllaçar el teu compte de Google Analytics per a obtenir anàlisis basades en les teves dades d’usuari.

- -

Entendre la tecnologia que tenen els teus usuaris i les compatibilitats de les funcions que potser vulguis fer servir et proporciona una bona base per a prendre totes les decisions i saber quina és la millor manera de donar suport a tots els teus usuaris.

- -

Compatibilitat no significa «veure's igual»

- -

És possible que un lloc web no es vegi de la mateixa manera a tots els navegadors, perquè alguns dels teus usuaris accediran al lloc web des d’un dispositiu mòbil i d’altres des de l'ordinador de taula. De la mateixa manera, alguns dels teus usuaris tindran una versió antiga del navegador, i d'altres una de més nova. És possible que alguns dels teus usuaris n’escoltin el contingut amb un lector de pantalla o hagin fet zoom a la pàgina per a poder-la llegir. Donar suport a tothom significa servir una versió del contingut dissenyada estratègicament, de manera que es vegi genial en els navegadors moderns, però que encara puguin utilitzar a un nivell bàsic els usuaris de navegadors més antics.

- -

Un nivell bàsic de compatibilitat prové d’estructurar bé el contingut perquè el flux normal de la pàgina tingui sentit. Pot ser que un usuari amb un telèfon mòbil amb funcions molt limitades no obtingui gran part del teu CSS, però el contingut fluirà de manera que faciliti la lectura. Per tant, un document HTML ben estructurat hauria de ser sempre el punt de partida. El teu contingut té sentit si suprimeixes el full d’estil?

- -

Una opció és deixar aquesta visió senzilla del lloc web com a alternativa per a les persones que utilitzen navegadors molt antics o limitats. Si tens un nombre reduït de persones que visiten el lloc amb aquests navegadors, és possible que no tingui sentit comercial dedicar temps a intentar donar-los una experiència similar a la gent que utilitza navegadors moderns. Seria millor dedicar temps a coses que facin més accessible el lloc web, perquè així dones servei a molts més usuaris. Hi ha un punt intermedi entre una pàgina HTML simple i tots aquests recursos, i el CSS ha permès que la creació d'aquestes alternatives sigui bastant senzilla.

- -

La creació d’alternatives d'emergència amb CSS

- -

Les especificacions CSS contenen informació que explica què fa el navegador quan s'apliquen dos mètodes de disseny al mateix element. Això vol dir que hi ha una definició per a què passa si un element flotant, per exemple, també és un element de graella que utilitza disseny de graella CSS. Combina aquesta informació amb el fet que els navegadors ignoren el CSS que no entenen, i tens una manera de crear dissenys senzills amb les tècniques heretades que ja hem explicat, que després se sobreescriuen amb el teu disseny de graella en els navegadors moderns que l’entenen.

- -

En l'exemple següent hem especificat que tres elements de flotació <div> es mostrin en fila. Qualsevol navegador que no admeti el disseny de graella CSS veurà la fila de caixes com un disseny amb el mètode de flotació. Un element de flotació que es converteix en un element de graella perd el comportament de flotació, i això significa que si convertim l'embolcall en un contenidor de graella, els elements de flotació es converteixen en elements de graella. Si el navegador admet el disseny de graella, mostrarà la pàgina en forma de graella; si no l’admet, ignorarà les propietats relacionades amb el disseny de graella i utilitzarà el disseny de flotació.

- -
-
* {box-sizing: border-box;}
-
-.wrapper {
-  background-color: rgb(79,185,227);
-  padding: 10px;
-  max-width: 400px;
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-}
-
-.item {
-  float: left;
-  border-radius: 5px;
-  background-color: rgb(207,232,220);
-  padding: 1em;
-}
-
- -
<div class="wrapper">
-  <div class="item">Primer element</div>
-  <div class="item">Segon element</div>
-  <div class="item">Tercer element</div>
-</div>
-
- -

{{ EmbedLiveSample('Example1', '100%', '200') }}

-
- -
-

Nota: La propietat {{cssxref("clear")}} tampoc té cap efecte un cop l'element es converteix en un element de graella, de manera que pots tenir un composició amb un peu de pàgina esborrat, que es convertirà en un disseny de graella.

-
- -

Mètodes de les solucions alternatives

- -

Hi ha diversos mètodes de disseny que es poden utilitzar de manera similar a aquest exemple de flotació. Pots triar el que tingui més sentit per al patró de disseny que has de crear.

- -
-
Float i clear
-
Com s'ha mostrat abans, les propietats float i clear deixen d'afectar el disseny si els elements que passen a ser de flotació o els esborrats es converteixen en elements flexibles o de graella.
-
display: inline-block
-
Aquest mètode es pot utilitzar per a crear dissenys de columnes si un element té display: inline-block, però si després es converteix en un element de disseny de tipus flexible o de graella, el comportament inline-block s'ignora.
-
display: table
-
El mètode per a crear taules CSS que es descriu en la introducció d'aquests articles es pot utilitzar com a mètode de solució alternativa. Els elements que estiguin configurats en la taula CSS perdran aquest comportament si es converteixen en elements Flexbox o Grid. Però és important destacar que les caixes sense nom que s’han creat per a corregir l'estructura de la taula, no es creen.
-
Disseny en diverses columnes
-
Pots utilitzar multi-col com a solució alternativa en certs dissenys; si el teu contenidor té definida alguna propietat column-* i es converteix en un contenidor amb comportament de graella, s'anul·la el comportament en columnes.
-
Flexbox com a solució alternativa a la graella
-
Flexbox té una compatibilitat de navegador més gran que Grid perquè ha rebut el suport d’Internet Explorer 10 i 11, tot i que et recomanem que comprovis la informació que trobaràs més endavant en aquest article sobre la compatibilitat força irregular i confusa de Flexbox en navegadors més antics. Si converteixes un contenidor flexible en un contenidor de graella, s'ignorarà qualsevol propietat flex aplicada als descendents.
-
- -

Observa que si fas servir el CSS d'aquesta manera pots proporcionar una experiència d'usuari decent per ajustar moltes compaginacions en navegadors antics. Afegim un disseny més senzill basat en tècniques més antigues i amb bona compatibilitat, i després utilitzem el CSS més recent per a crear el disseny que veurà més del 90% del públic. Hi ha casos, però, en què el codi alternatiu haurà d’incloure alguna cosa que els navegadors nous també interpretaran. Un bon exemple d’això és si afegim amplades percentuals als nostres elements de flotació per aconseguir que les columnes s’assemblin més a la visualització de graella i s’estirin per omplir el contenidor.

- -

En el disseny de flotació, el percentatge es calcula a partir del contenidor: el 33,333% és un terç de l'amplada del contenidor. Tanmateix, a la graella es calcula que el 33,333% es calcula a partir de l’àrea de la graella en què es troba l’element, de manera que es converteix en un terç de la mida que volem un cop introduït el disseny de graella.

- -
-
* {box-sizing: border-box;}
-
-.wrapper {
-  background-color: rgb(79,185,227);
-  padding: 10px;
-  max-width: 400px;
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-}
-
-.item {
-  float: left;
-  border-radius: 5px;
-  background-color: rgb(207,232,220);
-  padding: 1em;
-  width: 33.333%;
-}
-
- -
<div class="wrapper">
-  <div class="item">Primer element</div>
-  <div class="item">Segon element</div>
-  <div class="item">Tercer element</div>
-</div>
-
- -

{{ EmbedLiveSample('Example2', '100%', '200') }}

-
- -

Per resoldre aquest problema, hem de tenir una manera de detectar si la graella és compatible i, per tant, si anul·larà l'amplada. El CSS té una solució.

- -

Consultar les propietats

- -

Consultar les propietats et permet provar si un navegador admet alguna funció CSS en concret. Això vol dir que pots escriure algun CSS per a navegadors que no admetin una característica determinada, i a continuació comprovar si el navegador és compatible i introduir el teu disseny.

- -

Si afegim una consulta de propietats en l’exemple anterior, podem utilitzar-la per a configurar les amplades dels nostres articles de manera automàtica (auto) si sabem que hi ha compatibilitat amb el disseny de graella.

- -
-
* {box-sizing: border-box;}
-
-.wrapper {
-  background-color: rgb(79,185,227);
-  padding: 10px;
-  max-width: 400px;
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-}
-
-.item {
-  float: left;
-  border-radius: 5px;
-  background-color: rgb(207,232,220);
-  padding: 1em;
-  width: 33.333%;
-}
-
-@supports (display: grid) {
-  .item {
-      width: auto;
-  }
-}
-
- -
<div class="wrapper">
-  <div class="item">Primer element</div>
-  <div class="item">Segon element</div>
-  <div class="item">Tercer element</div>
-</div>
-
- -

{{ EmbedLiveSample('Example3', '100%', '200') }}

-
- -

La compatibilitat per a la consulta de propietats és molt bona en tots els navegadors moderns, però cal tenir en compte que són els navegadors que no admeten la graella CSS els que tampoc no admeten la consulta de propietats. Això significa que per a aquells navegadors funcionarà un enfocament com el que es detalla més amunt. El que fem és escriure primer el nostre CSS anterior, sense fer cap consulta de propietats. Els navegadors que no admeten la graella i no admeten la consulta de propietats faran servir la informació de disseny que poden comprendre i ignoraran completament la resta. Els navegadors que admeten la consulta de propietats també admeten la graella, i per tant executaran el codi de graella i el codi de la consulta de propietats.

- -

L'especificació per a la consulta de propietats també inclou la possibilitat de comprovar si un navegador no admet una propietat; això només és útil si el navegador admet consultes de propietats. En el futur tindrà sentit un enfocament que comprovi la falta de compatibilitats, perquè ja no existiran els navegadors que no disposen de compatibilitats per a la consulta. Ara, però, utilitza l’enfocament de fer servir el CSS anterior i sobreescriure'l per a obtenir la millor compatibilitat.

- -

Les versions anteriors de Flexbox

- -

En versions anteriors dels navegadors, pots trobar versions anteriors de l'especificació Flexbox. En el moment d’escriure això, es tracta principalment d’un problema amb Internet Explorer 10, que utilitza el prefix -ms- per a Flexbox. Això també significa que hi ha articles i tutorials obsolets; aquesta guia útil t'ajuda a comprovar el que busques, i també pot ajudar-te si necessites compatibilitat Flexbox en navegadors molt antics.

- -

La versió prefixada de graella de l’Internet Explorer 10 i 11

- -

L'especificació de graella CSS es va prototipar inicialment en Internet Explorer 10; això vol dir que, tot i que IE10 i IE11 no disposen de compatibilitat de graella moderna, sí que tenen una versió de disseny de graella molt útil, tot i que diferent de l’especificació moderna que documentem en aquest lloc. Les implementacions d’IE10 i 11 tenen el prefix -ms-, que significa que les pots utilitzar per a aquests navegadors i que s'ignoraran en els navegadors que no formin part de Microsoft. Tanmateix, Edge encara entén la sintaxi antiga, així que tingues cura que tot es sobreescrigui de manera segura al teu CSS de graella moderna.

- -

La guia per a la Millora progressiva del disseny de graella et pot ajudar a comprendre la versió de la graella d’Internet Explorer, i hem inclòs alguns enllaços útils addicionals al final d'aquest article. Tanmateix, a menys que tinguis un nombre molt elevat de visitants en versions d’Internet Explorer més antigues, potser és millor centrar-te en la creació d’una alternativa que funcioni per a tots els navegadors no compatibles.

- -

Proves amb navegadors antics

- -

Atès que la majoria de navegadors admeten Flexbox i la graella, pot ser raonablement difícil fer proves amb navegadors més antics. Una de les maneres és utilitzar una eina de prova en línia com Sauce Labs, tal i com es detalla en el mòdul de comprovació de compatibilitat entre navegadors.

- -

També pots descarregar i instal·lar màquines virtuals i executar versions anteriors de navegadors en un entorn contingut en el teu ordinador. Tenir accés a versions anteriors d’Internet Explorer és especialment útil, i amb aquest propòsit Microsoft ha posat a disposició dels usuaris una varietat de màquines virtuals de descàrrega gratuïta. Estan disponibles per als sistemes operatius Mac, Windows i Linux, i per tant són una bona manera de fer proves en navegadors Windows antics i moderns, encara que no utilitzis un ordinador amb sistema operatiu de Windows.

- -

Resum

- -

Ara tens el coneixement per utilitzar tècniques de confiança com ara Grid i Flexbox, crear solucions alternatives per a navegadors més antics i utilitzar qualsevol tècnica nova que pugui aparèixer en el futur.

- -

Consulta també

- - - -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}}

- -

En aquest mòdul

- - diff --git "a/files/ca/learn/css/estilitzar_text/composici\303\263_p\303\240gina_inici/index.html" "b/files/ca/learn/css/estilitzar_text/composici\303\263_p\303\240gina_inici/index.html" deleted file mode 100644 index 2619be67e7..0000000000 --- "a/files/ca/learn/css/estilitzar_text/composici\303\263_p\303\240gina_inici/index.html" +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: Composició d'una pàgina d'inici de l'escola comunitaria -slug: Learn/CSS/Estilitzar_text/Composició_pàgina_inici -tags: - - Assessment - - Beginner - - CSS - - CodingScripting - - Link - - Styling text - - font - - list - - web font -translation_of: Learn/CSS/Styling_text/Typesetting_a_homepage ---- -
{{LearnSidebar}}
- -
{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}
- -

En aquesta avaluació, comprovarem la comprensió de totes les tècniques d'estil de text que hem cobert al llarg d'aquest mòdul, que us permetrà personalitzar el text de la pàgina d'inici d'una escola comunitària. Podríeu tindra una mica de diversió durant el camí.

- - - - - - - - - - - - -
Requisits previs:Abans d'intentar aquesta avaluació, hauríeu d'haver treballat tots els articles d'aquest mòdul.
Objectiu:Provar la comprensió de les tècniques d'estil de text CSS.
- -

Punt de partida

- -

Per començar aquesta avaluació, heu de:

- - - -
-

Nota: Com a alternativa, podeu utilitzar un lloc com JSBin o Thimble per fer la vostra avaluació. Podeu enganxar el codi HTML i omplir el CSS en un d'aquests editors en línia i utilitzar aquest URL per indicar la imatge de fons. Si l'editor en línia que esteu utilitzant no té cap panell CSS separat, no dubteu a posar-lo en un element <style> a la capçalera del document.

-
- -

Resum del projecte

- -

Us hem proporcionat un codi HTML sense format per a la pàgina d'inici d'una universitat comunitària imaginària, a més d'alguns estils CSS de la pàgina en un disseny de dues columnes, proporcionant un estil rudimentari. Heu d'escriure els vostres afegits CSS a sota del comentari a la part inferior del fitxer CSS, per assegurar-vos que sigui fàcil marcar les parts que heu realitzat. No us preocupeu si alguns dels selectors són repetitius; en aquest cas us deixarem.

- -

Fonts:

- - - -

Estil de text general :

- - - -

Enllaços:

- - - -

Llistes:

- - - -

Menú de navegació

- - - -

Consells i suggeriments

- - - -

Exemple

- -

La següent captura de pantalla mostra un exemple del que podria semblar el disseny final:

- -

- -

Avaluació

- -

Si seguiu aquesta avaluació com a part d'un curs organitzat, hauríeu de poder lliurar el vostre treball al vostre professor/mentor per qualificar-ho. Si esteu en auto-aprenentatge, podreu obtenir la guia de qualificacions amb força facilitat preguntant sobre el tema en el fil de conversa en l'àrea d'aprenentatge, o en el canal IRC #mdn en Mozilla IRC. Intenteu primer l'exercici - no es guanya res fent trampes!

- -

{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}

diff --git "a/files/ca/learn/css/estilitzar_text/estilitzar_enlla\303\247os/index.html" "b/files/ca/learn/css/estilitzar_text/estilitzar_enlla\303\247os/index.html" deleted file mode 100644 index 448a53289d..0000000000 --- "a/files/ca/learn/css/estilitzar_text/estilitzar_enlla\303\247os/index.html" +++ /dev/null @@ -1,424 +0,0 @@ ---- -title: Aplicar estils a enllaços -slug: Learn/CSS/Estilitzar_text/Estilitzar_enllaços -translation_of: Learn/CSS/Styling_text/Styling_links ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}
- -

Quan s’aplica estil a enllaços és important entendre com fer ús de les pseudoclasses per a donar estil als estats de l’enllaç d’una manera efectiva, i com donar estil als enllaços per a utilitzar-los en diverses interfícies d’usuari característiques comunes, com ara menús de navegació i pestanyes. En aquest article tractarem tots aquests temes.

- - - - - - - - - - - - -
Requisits previs:Coneixements bàsics d'informàtica, fonaments d'HTML (consulta la Introducció a l’HTML), fonaments de CSS (consulta la Introducció al CSS), fonaments d’aplicació d’estil i tipus de lletra als textos amb CSS.
Objectiu:Aprendre a dissenyar els estats d'un enllaç i a fer servir enllaços de manera efectiva en interfícies d'usuari característiques comunes, com ara els menús de navegació.
- -

Un cop d’ull a alguns enllaços

- -

En la secció Creació d’hipervincles hem vist com has d’implementar els enllaços en el teu codi HTML d'acord amb les bones pràctiques. En aquest article aprofundirem en aquest coneixement i et mostrarem les bones pràctiques que has de tenir en compte per a aplicar estil als enllaços.

- -

Els estats d'un enllaç

- -

El primer que has d'entendre és el concepte d'estats d'un enllaç; els enllaços poden tenir diversos estats, i se’ls pot aplicar estil fent servir diverses pseudoclasses:

- - - -

Estils predeterminats

- -

L’exemple següent il·lustra com es comporta un enllaç de manera predeterminada (el CSS simplement amplia i centra el text perquè destaqui més).

- -
<p><a href="https://mozilla.org">A link to the Mozilla homepage</a></p>
-
- -
p {
-  font-size: 2rem;
-  text-align: center;
-}
- -

{{ EmbedLiveSample('Estils_predeterminats', '100%', 120) }}

- -
-

Nota: Tots els enllaços d'aquesta pàgina són falsos — s'ha posat un # en comptes d'un URL real. Això és perquè si incloïssim enllaços reals, fer-hi clic trencaria els exemples (acabaries amb un error, o una pàgina càrregada en l'exemple incrustat de la què no podries tornar.). # simplement enllaça a la pàgina actual.

-
- -

A mesura que exploris els estils predeterminats t’adonaràs d'algunes coses:

- - - -

Curiosament, aquests estils predeterminats són gairebé idèntics que els dels primers dies dels navegadors a mitjan anys 90. Això és perquè els usuaris coneixen aquest comportament i l’esperen; si els enllaços estiguessin dissenyats de manera diferent, molta gent es confondria. Això no vol dir en absolut que no puguis aplicar estil als enllaços, només que no t’has d'allunyar del comportament que se n’espera. Com a mínim hauries de complir el següent:

- - - -

Els estils predeterminats es poden desactivar/modificar amb les propietats CSS següents:

- - - -
-

Nota: No està limitat només a les propietats anteriors per al disseny dels enllaços; pots utilitzar qualsevol propietat que vulguis. Només procura no esbojarrar-te!

-
- -

Aplicar estil a enllaços

- -

Ara que hem examinat amb una mica de detall els estats per defecte dels enllaços, vegem un conjunt típic d'estils d'enllaç.

- -

Per començar, escriurem un conjunt de regles buides:

- -
a {
-
-}
-
-
-a:link {
-
-}
-
-a:visited {
-
-}
-
-a:focus {
-
-}
-
-a:hover {
-
-}
-
-a:active {
-
-}
- -

Aquest ordre és important perquè els estils d'enllaç es construeixen els uns sobre els altres, per exemple, els estils de la primera regla s'aplicaran a tots els subsegüents, i quan s'activa un enllaç, també s'hi passa per sobre. Si els posem en l'ordre equivocat, les coses no funcionaran correctament. Per recordar l'ordre, pots provar d'usar un mnemotècnic com LoVe Fears HAte.

- -

Ara afegim una mica més d'informació per a obtenir aplicar-hi els estils adequats:

- -
body {
-  width: 300px;
-  margin: 0 auto;
-  font-size: 1.2rem;
-  font-family: sans-serif;
-}
-
-p {
-  line-height: 1.4;
-}
-
-a {
-  outline: none;
-  text-decoration: none;
-  padding: 2px 1px 0;
-}
-
-a:link {
-  color: #265301;
-}
-
-a:visited {
-  color: #437A16;
-}
-
-a:focus {
-  border-bottom: 1px solid;
-  background: #BAE498;
-}
-
-a:hover {
-  border-bottom: 1px solid;
-  background: #CDFEAA;
-}
-
-a:active {
-  background: #265301;
-  color: #CDFEAA;
-}
- -

També et proporcionem un exemple d'HTML al qual aplicar el CSS:

- -
<p>There are several browsers available, such as <a href="https://www.mozilla.org/en-US/firefox/">Mozilla
-Firefox</a>, <a href="https://www.google.com/chrome/index.html">Google Chrome</a>, and
-<a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Microsoft Edge</a>.</p>
- -

Si ho posem tot junt, obtenim aquest resultat:

- -

{{ EmbedLiveSample('Aplicar_estil_a_enllaços', '100%', 150) }}

- -

Què hem fet aquí? Sens dubte, això es diferent de l'estil predeterminat, però encara proporciona una experiència prou familiar perquè els usuaris sàpiguen què passa:

- - - -

Aprenentatge actiu: Fes el teu propi disseny d’enllaç

- -

En aquesta sessió d'aprenentatge actiu, et proposem que aprenguis el nostre conjunt de regles buides i hi afegeixis les teves declaracions pròpies perquè els teus enllaços llueixin fantàstics! Utilitza la imaginació, deixa't anar! Segur que pots trobar alguna cosa tan funcional com el nostre exemple, i més fresca!

- -

Si t’equivoques, sempre pots tornar a començar amb el botó Reinicia. Si t’encalles, prem el botó Mostra la solució per a inserir l'exemple mostrat a dalt.

- - - -

{{ EmbedLiveSample('Playable_code', 700, 800) }}

- -

Icones en els enllaços

- -

Una pràctica comuna és incloure icones en els enllaços per a proporcionar més d'un indicador quant al tipus de contingut al qual apunta l'enllaç. Vegem-ne un exemple molt senzill, que afegeix una icona als enllaços externs (enllaços que apunten cap a altres llocs web). Aquesta icona normalment té l’aspecte d’una petita fletxa que apunta cap enfora d'una caixa: per a aquest exemple, utilitzarem aquest fantàstic exemple de icons8.com.

- -

Vegem alguns HTML i CSS, que ens donarà l'efecte que volem. En primer lloc, alguns simple HTML a l'estil:

- -
<p>For more information on the weather, visit our <a href="weather.html">weather page</a>,
-look at <a href="https://en.wikipedia.org/wiki/Weather">weather on Wikipedia</a>, or check
-out <a href="http://www.extremescience.com/weather.htm">weather on Extreme Science</a>.</p>
- -

A continuació, el CSS:

- -
body {
-  width: 300px;
-  margin: 0 auto;
-  font-family: sans-serif;
-}
-
-p {
-  line-height: 1.4;
-}
-
-a {
-  outline: none;
-  text-decoration: none;
-  padding: 2px 1px 0;
-}
-
-a:link {
-  color: blue;
-}
-
-a:visited {
-  color: purple;
-}
-
-a:focus, a:hover {
-  border-bottom: 1px solid;
-}
-
-a:active {
-  color: red;
-}
-
-a[href*="http"] {
-  background: url('https://mdn.mozillademos.org/files/12982/external-link-52.png') no-repeat 100% 0;
-  background-size: 16px 16px;
-  padding-right: 19px;
-}
- -

{{ EmbedLiveSample('Icones_en_els_enllaços', '100%', 150) }}

- -

Què passa aquí, doncs? Ens saltarem la major part del CSS, perquè és la mateixa informació que ja has vist abans. Tanmateix, l'última regla és interessant perquè inserim una imatge de fons personalitzada en els enllaços externs d'una manera similar a com hem tractat les vinyetes personalitzades dels elements de llista de l'article anterior, però fem servir la propietat abreujada {{cssxref("background")}}, en comptes de les propietats individuals. Establim la ruta a la imatge que volem inserir i especifiquem no-repeat perquè només se’n vegi una còpia, i a continuació especifiquem la posició com al 100% a la dreta del contingut de text i a 0 píxels de l’extrem superior.

- -

També fem servir {{cssxref("background-size")}} per a especificar la mida amb què volem que es mostri la imatge de fons; és útil tenir una icona més gran i canviar-ne la mida per a propòsits de disseny de webs adaptatius. Tanmateix, això només funciona amb IE 9 i posteriors, de manera que si has de donar suport a aquests navegadors antics, només has de canviar la mida de la imatge i inserir-la tal qual.

- -

Finalment, establim una mica de {{cssxref("padding-right")}} als enllaços perquè la imatge de fons tingui espai i no es superposi amb el text.

- -

Per acabar, com etiquetem els enllaços externs? Bé, si escrius els teus enllaços HTML correctament, només has d'utilitzar URL absoluts en el codi d’etiquetatge dels enllaços externs; per enllaçar a altres parts del teu lloc web propi és més eficient utilitzar enllaços relatius. Per tant, el text «http» només hauria d'aparèixer en enllaços externs i pots etiquetar-los amb un selector d'atributs: a[href*="http"] selecciona elements {{htmlelement("a")}}, però només si tenen un atribut {{htmlattrxref("href","a")}} amb un valor que conté «http» en algun lloc.

- -

Això és tot — torna a visitar la secció d'aprenentatge actiu anterior i prova aquesta tècnica nova.

- -
-

Nota: No et preocupis si encara no tens prou familiaritat amb els fons i el disseny web adaptatiu perquè s’expliquen en altres articles.

-
- -

Enllaços amb estil de botó

- -

Les eines que has explorat fins ara en aquest article també es poden utilitzar d'altres maneres. Per exemple, els estats com el flotant (hover) es poden utilitzar per a dissenyar molts elements diferents, no només enllaços; pot ser que vulguis dissenyar estats flotants (hover) per a paràgrafs, elements de llista o altres elements.

- -

A més, és habitual aplicar estil als enllaços perquè semblin i es comportin com botons en determinades circumstàncies — el menú de navegació d’un lloc web s’acostuma a marcar com una llista que conté enllaços, i es pot configurar fàcilment perquè sembli un conjunt de botons o pestanyes de control que proporcionen a l'usuari accés a les altres parts del lloc web. Expliquem com es fa.

- -

Primer, una mica d’HTML:

- -
<ul>
-  <li><a href="#">Home</a></li><li><a href="#">Pizza</a></li><li><a href="#">Music</a></li><li><a href="#">Wombats</a></li><li><a href="#">Finland</a></li>
-</ul>
- -

I ara, el nostre CSS:

- -
body,html {
-  margin: 0;
-  font-family: sans-serif;
-}
-
-ul {
-  padding: 0;
-  width: 100%;
-}
-
-li {
-  display: inline;
-}
-
-a {
-  outline: none;
-  text-decoration: none;
-  display: inline-block;
-  width: 19.5%;
-  margin-right: 0.625%;
-  text-align: center;
-  line-height: 3;
-  color: black;
-}
-
-li:last-child a {
-  margin-right: 0;
-}
-
-a:link, a:visited, a:focus {
-  background: yellow;
-}
-
-a:hover {
-  background: orange;
-}
-
-a:active {
-  background: red;
-  color: white;
-}
- -

Això ens dona el resultat següent:

- -

{{ EmbedLiveSample('Enllaços_amb_estil_de_botó', '100%', 100) }}

- -

Expliquem què passa aquí, i ens centrem en les parts més interessants:

- - - -
-

Nota: És possible que hagis observat que en l’HTML hem col·locat tots els elements de llista en la mateixa línia; fem això perquè els espais / les línies entre els elements de línia de bloc creen espais a la pàgina, com els espais que hi ha entre les paraules, i aquests espais trencarien el disseny de menú de navegació horitzontal. De manera que hem eliminat els espais. Pots trobar més informació sobre aquest problema (i les solucions) a Fighting the space between inline block elements.

-
- -

Resum

- -

Esperem que aquest article t’hagi proporcionat tot el que has de saber sobre els enllaços, per ara. L'article final del nostre mòdul de text «Aplicació d’estils» explica com pots utilitzar tipus de lletra personalitzats en els teus llocs web o tipus de lletra per a web, com es coneixen més sovint.

- -

{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}

diff --git a/files/ca/learn/css/estilitzar_text/fonts_web/index.html b/files/ca/learn/css/estilitzar_text/fonts_web/index.html deleted file mode 100644 index b4d1e8ecfd..0000000000 --- a/files/ca/learn/css/estilitzar_text/fonts_web/index.html +++ /dev/null @@ -1,193 +0,0 @@ ---- -title: Fonts Web -slug: Learn/CSS/Estilitzar_text/Fonts_Web -tags: - - '@font-face' - - Article - - Beginner - - CSS - - Fonts - - Guide - - Learn - - font-family - - web fonts -translation_of: Learn/CSS/Styling_text/Web_fonts ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}
- -

En el primer article del mòdul hem explorat les característiques bàsiques de CSS que hi ha disponibles per a aplicar estil a la lletra i el text. En aquest article anem més lluny i explorem els tipus de lletra per a web amb detall, que permeten descarregar tipus de lletra personalitzats junt amb la teva pàgina web i et proporciona més varietat i personalització en l’aplicació d’estil als textos.

- - - - - - - - - - - - -
Requisits previs:Coneixements bàsics d'informàtica, fonaments d'HTML (consulta la Introducció a l’HTML), fonaments de CSS (consulta la Introducció al CSS), fonaments d’aplicació d’estil a tipus de lletra i textos.
Objectiu:Aprendre com aplicar tipus de lletra per a web a una pàgina web utilitzant un servei de tercers o escrivint el teu codi propi.
- -

Recapitulació sobre famílies de tipus de lletra

- -

Com hem vist en l’article Fonaments d’aplicació d’estil a la lletra i els textos, pots controlar les fonts que fas servir per al teu HTML amb la propietat {{cssxref("font-family")}}. Aquesta propietat pren un o més noms de famílies de tipus de lletra i el navegador recorre la llista fins que troba un tipus de lletra que estigui disponible en el sistema en què s'executa:

- -
p {
-  font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif;
-}
- -

Aquest sistema funciona bé, però tradicionalment les opcions de tipus de lletra per al desenvolupament web han estat limitades. Només hi ha un grapat de tipus de lletra per a les que pots garantir la disponibilitat en tots els sistemes habituals, els anomenats tipus de lletra segurs per al web (web-safe fonts). Pots especificar la llista dels tipus de lletra preferents, seguits dels tipus de lletra alternatius segurs per al web, seguits dels tipus de lletra del sistema per defecte, però això afegeix una sobrecàrrega en termes de proves per a assegurar-te que els teus dissenys de pàgina presenten un aspecte correcte amb cada tipus de lletra, etc.

- -

Tipografies web

- -

Però hi ha una alternativa, que funciona molt bé, ja des de la versió 6 d'IE. Les tipografies web són una característica CSS que et permet especificar els fitxers de tipus de lletra que vols que es descarreguin juntament amb el teu lloc web quan s’hi accedeix, i això fa que qualsevol navegador que admet tipografies web pot disposar exactament dels tipus de lletra que especifiques. Increïble! La sintaxi necessària presenta aquest aspecte:

- -

En primer lloc, hi ha un bloc de codi {{cssxref("@font-face")}} al començament del CSS, que especifica els fitxers de tipus de lletra que vols que es descarreguin:

- -
@font-face {
-  font-family: "myFont";
-  src: url("myFont.ttf");
-}
- -

A continuació pots aplicar el nom de la família del tipus de lletra personalitzada que has especificat en @font-face a qualsevol cosa que vulguis, de la manera habitual:

- -
html {
-  font-family: "Bitstream Vera Serif Bold", serif;
-}
- -

La sintaxi es comença a complicar una mica. A continuació hi entrem amb detall.

- -

Hi ha dues coses importants que cal tenir en compte sobre els tipus de lletra segurs per al web:

- -
    -
  1. Els navegadors admeten diversos formats de tipus de lletra, de manera que necessites diversos formats de tipus de lletra per a atènyer una compatibilitat de navegador decent. Per exemple, la majoria dels navegadors més moderns admeten WOFF / WOFF2 (Web Open Font Format, versions 1 i 2), el format més eficient per a tot, però les versions anteriors d'IE només admeten tipus de lletra EOT (Embedded Open Type), i és possible que hagis d'incloure una versió de tipus de lletra SVG per tenir compatibilitat amb versions anteriors dels navegadors iPhone i Android. A continuació et mostrarem com generar el codi necessari.
    2. -
  2. Normalment els tipus de lletra no són d’ús lliure. Cal pagar per a fer-los servir o assumir unes condicions de llicència, com ara acreditar el creador del tipus de lletra en el codi (o en el teu lloc web). No hauries de robar els tipus de lletra ni utilitzar-los sense donar-ne el crèdit adequat.
    3. -
- -
-

Nota: Els tipus de lletra web com a tecnologia són compatibles amb Internet Explorer des de la versió 4!

-
- -

Aprenentatge actiu: Un exemple de tipografia web

- -

Tenint en compte això, construïm un exemple bàsic de tipografia web des de zero. És difícil mostrar-ho a partir d’un exemple en viu, de manera que, en lloc d'això, seguirem els passos detallats en les seccions següents, per a tenir una idea del procés.

- -

Has d'utilitzar els fitxers web-font-start.html i web-font-start.css com a punt de partida per a afegir el codi (consulta també el codi de l’exemple en viu). Fes també una còpia d'aquests fitxers en un directori nou al teu ordinador. En el fitxer web-font-start.css hi ha una mica de CSS per tractar el disseny bàsic i la tipografia de l'exemple.

- -

Buscar tipus de lletra

- -

Per a aquest exemple, utilitzarem dos tipografies web, un per als títols d’encapçalament i un per al text del cos (body). Per començar, hem de trobar els fitxers que contenen els tipus de lletra. Els tipus de lletra es creen en estudis de disseny i s'emmagatzemen en diferents formats de fitxer. En general, hi ha tres tipus de llocs web en què pots obtenir tipus de lletra:

- - - -

Busquem ara alguns tipus de lletra! Ves a Font Squirrel i tria dos tipus de lletra, un que et resulti interessant i agradable per als títols (ppotser una bona tipografia tipus "Display" o "Slab Serif"), i un altre una mica menys cridaner i que resulti més llegible, per als paràgrafs. Quan hagis trobat cada tipus, prem el botó de descàrrega i desa el fitxer en el mateix directori que hi ha els fitxers HTML i CSS que has desat abans. No importa si són en format TTF (True Type Fonts) o OTF (Open Type Fonts).

- -

En cada cas, descomprimeix el paquet amb els tipus de lletra (les tipografies web s’acostumen a distribuir en fitxers ZIP que contenen els fitxers dels tipus de lletra i la informació de la llicència). Pots trobar diversos fitxers de tipus de lletra en el paquet —alguns tipus de lletra es distribueixen com una família, amb diverses variants disponibles, per exemple, fina, seminegreta, negreta, cursiva, cursiva fina, etc. Per a aquest exemple, només cal que et preocupis d'un únic fitxer de tipus de lletra per cada elecció.

- -
-

Nota: en la columna de la dreta de la secció «Busca tipus de lletra», pots fer clic en les diverses etiquetes, i classificacions per filtrar les opcions que es mostren.

-
- -

Generació del codi necessari

- -

Ara cal generar el codi necessari (i els formats de tipus de lletra). Per cada tipografia, segueix aquests passos:

- -
    -
  1. Assegura’t que compleixes tots els requisits de llicència si vols fer servir això en un projecte comercial o en el web.
    2. -
  2. Ves al Webfont Generator de Font Squirrel.
    3. -
  3. Carrega els dos fitxers de tipus de lletra amb el botó Upload Fonts.
    4. -
  4. Marca la casella de verificació amb el text «Sí, els tipus de lletra que carrego són legalment aptes per a la inclusió en el web».
    5. -
  5. Fes clic a Download your kit.
    6. -
- -

Un cop el generador ha acabat de processar, has d'obtenir un fitxer ZIP, descarregar-lo i desar-lo al mateix directori que els teus HTML i CSS.

- -

Implementar el codi a la teva demo

- -

En aquest punt, has de descomprimir el paquet de fitxers de tipus de lletra segurs per al web que acabes de generar. Dins del directori descomprimit, hi haurà tres elements útils:

- - - -

Per a implementar aquests tipus de lletra en el teu exemple de demostració, segueix aquests passos:

- -
    -
  1. Canvia el nom del directori descomprimit per un nom que sigui senzill i fàcil de recordar, com ara fonts.
    2. -
  2. Obre el fitxer stylesheet.css i copia-hi els blocs @font-face que conté en el teu fitxer web-font-start.css; has de posar-los a dalt de tot, abans de qualsevol bloc de CSS, perquè els tipus de lletra s’han d’importar abans de poder-los utilitzar en el teu lloc web.
    3. -
  3. Cadascuna de les funcions url() apunta a un fitxer de tipus de lletra que volem importar al nostre CSS; afegeix fonts/ al començament de cada ruta (o adapta-ho si cal) per a assegurar-te que les rutes d'accés als fitxers són correctes.
    4. -
  4. Ara pots utilitzar aquests tipus de lletra en les llistes d’arxius de tipus de lletra, igual que qualsevol tipus de lletra segur per al web o tipus de lletra predeterminat del sistema. Per exemple: - 
    font-family: 'zantrokeregular', serif;
    -
    5. -
- -

Has d'acabar amb una pàgina de demostració amb alguns tipus de lletra agradables implementats. Atès que els diferents tipus de lletra es creen amb mides diferents, és possible que hagis d'ajustar la mida, l'espaiat, etc., per a ordenar-ne l'aspecte.

- -

- -
-

Nota: Si tens problemes perquè funcioni, no dubtis de comparar la teva versió amb els nostres fitxers acabats; consulta web-font-finished.html i web-font-finished.css (executa l'exemple acabat en directe).

-
- -

Usar un servei de tipografies en línia

- -

Els serveis de tipus de lletra en línia normalment emmagatzemen i serveixen tipus de lletra per tu, de manera que no t’has de preocupar d’escriure el codi @font-face, i generalment només cal que insereixis una o dues línies de codi al teu lloc web perquè tot funcioni. Alguns exemples són: Typekit i Cloud.typography. La majoria d'aquests serveis estan basats en subscripcions, amb la notable excepció de Google Fonts, un útil servei gratuït, especialment per a fer proves ràpides i demostracions d'escriptura.

- -

La majoria d'aquests serveis són fàcils d'utilitzar, de manera que no hi entrarem amb molt de detall. Vegem ràpidament les fonts de Google, perquè puguis fer-te’n la idea. De nou, fes còpies de web-font-start.html i web-font-start.css com a punt de partida.

- -
    -
  1. Ves a Google Fonts.
    2. -
  2. Utilitza els filtres de la banda esquerra per visualitzar els tipus de lletra que vols triar i escull un parell de tipus de lletra.
    3. -
  3. Per a seleccionar un tipus de lletra, prem el botó Add to Collection que hi ha al costat.
    4. -
  4. Quan hagis escollit els tipus de lletra, prem el botó Use que hi ha a la part inferior de la pàgina.
    5. -
  5. A la pantalla resultant, primer has de copiar la línia de codi que es mostra a la secció 3 i enganxar-la al final de tot del teu fitxer HTML. Posa-la per sobre de l'element {{htmlelement("link")}} perquè el tipus de lletra s'importi abans que el teu CSS l’hagi d’utilitzar.
    6. -
  6. A continuació, has de copiar les declaracions que hi ha en la secció 4 al teu CSS, segons correspongui, per a aplicar els tipus de lletra personalitzats al teu codi HTML.
    7. -
- -
-

Nota: Pots trobar una versió completa a google-font.html i google-font.css, si et cal contrastar el teu treball amb el nostre (consulta-ho en directe).

-
- -

@font-face amb més detall

- -

Explorem la sintaxi @font-face que genera Font Squirrel. Aquest és l’aspecte que presenta un dels blocs:

- -
@font-face {
-  font-family: 'ciclefina';
-  src: url('fonts/cicle_fina-webfont.eot');
-  src: url('fonts/cicle_fina-webfont.eot?#iefix') format('embedded-opentype'),
-         url('fonts/cicle_fina-webfont.woff2') format('woff2'),
-         url('fonts/cicle_fina-webfont.woff') format('woff'),
-         url('fonts/cicle_fina-webfont.ttf') format('truetype'),
-         url('fonts/cicle_fina-webfont.svg#ciclefina') format('svg');
-  font-weight: normal;
-  font-style: normal;
-}
- -

Això s'anomena «sintaxi a prova de bales @font-face» des d'una publicació de Paul Irish dels inicis, quan @font-face va començar a ser popular (Bulletproof @font-face Syntax). Passem a veure què fa:

- - - -
-

Nota: També pots especificar cada valor {{cssxref("font-variant")}} i {{cssxref("font-stretch")}} per als teus tipus de lletra segurs per al web. En els navegadors més nous també pots especificar un valor {{cssxref("unicode-range")}}, que és una gamma de caràcters específica que vols utilitzar a banda del tipus de lletra segur per al web; en els navegadors compatibles amb aquesta propietat, només es descarregaran els caràcters especificats, per a estalviar descàrregues innecessàries. Creating Custom Font Stacks with Unicode-Range, de Drew McLellan, t’ofereix unes idees útils sobre com fer-ne ús.

-
- -

Resum

- -

Ara que has treballat els nostres articles sobre els fonaments d’aplicació d'estil al text, és hora de posar a prova el que has après amb la nostra avaluació per al mòdul, Composició tipogràfica d’una pàgina d’inici per a un lloc web d’una escola de la comunitat.

- -

{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}

diff --git a/files/ca/learn/css/estilitzar_text/index.html b/files/ca/learn/css/estilitzar_text/index.html deleted file mode 100644 index c815d83297..0000000000 --- a/files/ca/learn/css/estilitzar_text/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: Estilitzar text -slug: Learn/CSS/Estilitzar_text -tags: - - Beginner - - CSS - - CodingScripting - - Fonts - - Landing - - Links - - Module - - Text - - font - - letter - - line - - lists - - shadow - - web fonts -translation_of: Learn/CSS/Styling_text ---- -
{{LearnSidebar}}
- -

Amb els aspectes bàsics del llenguatge CSS coberts, el següent tema CSS, per a què us concentreu, és l'estil del text - una de les coses més habituals que fareu amb CSS. Aquí observem els fonaments d'estil de text, incloent la configuració de fonts, negreta, cursiva, espaiat entre línies i lletres, ombres i altres funcions de text. Completem el mòdul examinant l'aplicació de fonts personalitzades a la vostra pàgina i llistes d'estil i enllaços.

- -

Requisits previs

- -

Abans de començar aquest mòdul, ja hauríeu de tenir una familiaritat bàsica amb l'HTML, tal com s'ha explicat en el mòdul Introducció a HTML i estar còmodes amb els fonaments CSS, tal com s'ha explicat en Introducció a CSS.

- -
-

Nota: Si esteu treballant en un ordinador/tauleta/altre dispositiu on no té la capacitat de crear els vostres propis fitxers, podeu provar (la majoria) els exemples de codi en un programa de codificació en línia com JSBin o Thimble.

-
- -

Guies

- -

Aquest mòdul conté els següents articles, que us ensenyaran tot l'essencial de l'estil del contingut de text HTML.

- -
-
Text fonamental i estil de font
-
En aquest article, es detallen tots els conceptes bàsics d'estil de text/font, incloent la configuració del pes de la font, família i estil, abreviatura de font, alineació del text i altres efectes, i espaiat entre línies i lletres.
-
Estilitzar llistes
-
Les llistes es comporten com qualsevol altre text en la seva major part, però hi ha algunes propietats CSS específiques de les llistes que necessiteu saber i algunes de les millors pràctiques a tenir en compte. Aquest article ho explica tot.
-
Estilitzar enllaços
-
En dissenyar enllaços, és important entendre com fer ús de pseudo-classes per crear estils de vincles de manera efectiva i com dissenyar vincles per utilitzar-los en característiques d'interfície variades comunes, com a menús de navegació i pestanyes. Veurem tots aquests temes en aquest article.
-
Fonts Web
-
Aquí explorarem detalladament els tipus de fonts web, que us permeten descarregar fonts personalitzades juntament amb la vostra pàgina web, per permetre un estil de text més variat i personalitzat.
-
- -

Avaluacions

- -

Les següents avaluacions posaran a prova la vostra comprensió de les tècniques d'estil de text cobertes en les guies anteriors.

- -
-
Composició d'una pàgina web d'una escola comunitaria
-
En aquesta avaluació, provarem la vostra comprensió sobre l'estil de text, que us permetrà personalitzar el text de la pàgina d'inici d'una escola comunitària.
-
diff --git a/files/ca/learn/css/estilitzar_text/llistes_estil/index.html b/files/ca/learn/css/estilitzar_text/llistes_estil/index.html deleted file mode 100644 index 6caa6e0e24..0000000000 --- a/files/ca/learn/css/estilitzar_text/llistes_estil/index.html +++ /dev/null @@ -1,382 +0,0 @@ ---- -title: Estils de llistes -slug: Learn/CSS/Estilitzar_text/Llistes_estil -tags: - - Article - - Beginner - - CSS - - Guide - - Styling - - Text - - bullets - - lists -translation_of: Learn/CSS/Styling_text/Styling_lists ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}
- -

Les llistes es comporten com qualsevol altre text en la seva major part, però hi ha algunes propietats CSS específiques de les llistes que has de conèixer i algunes bones pràctiques que has de tenir en compte. Aquest article ho explica tot.

- - - - - - - - - - - - -
Requisits previs:Coneixements bàsics d'informàtica, els fonaments d'HTML (estudi Introducció a HTML ), fonaments CSS (estudi Introducció a CSS), fonaments d’aplicació d’estil i tipus de lletra a textos amb CSS.
Objectiu:Familiaritzar-se amb les bones pràctiques i propietats relacionades amb l’aplicació d'estil a les llistes .
- -

Un exemple senzill de llista

- -

Per començar, observa un exemple senzill de llista. Al llarg d'aquest article, veurem llistes no ordenades, ordenades i de descripció: totes tenen característiques d'estil similars, i algunes que són particulars per al tipus de llista concret. Tens l'exemple sense estil disponible a GitHub (consulta també el codi d’origen).

- -

El codi HTML del nostre exemple de llista té aquest aspecte:

- -
<h2>Shopping (unordered) list</h2>
-
-<p>Paragraph for reference, paragraph for reference, paragraph for reference,
-paragraph for reference, paragraph for reference, paragraph for reference.</p>
-
-<ul>
-  <li>Humous</li>
-  <li>Pitta</li>
-  <li>Green salad</li>
-  <li>Halloumi</li>
-</ul>
-
-<h2>Recipe (ordered) list</h2>
-
-<p>Paragraph for reference, paragraph for reference, paragraph for reference,
-paragraph for reference, paragraph for reference, paragraph for reference.</p>
-
-<ol>
-  <li>Toast pitta, leave to cool, then slice down the edge.</li>
-  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
-  <li>Wash and chop the salad.</li>
-  <li>Fill pitta with salad, humous, and fried halloumi.</li>
-</ol>
-
-<h2>Ingredient description list</h2>
-
-<p>Paragraph for reference, paragraph for reference, paragraph for reference,
-paragraph for reference, paragraph for reference, paragraph for reference.</p>
-
-<dl>
-  <dt>Humous</dt>
-  <dd>A thick dip/sauce generally made from chick peas blended with tahini, lemon juice, salt, garlic, and other ingredients.</dd>
-  <dt>Pitta</dt>
-  <dd>A soft, slightly leavened flatbread.</dd>
-  <dt>Halloumi</dt>
-  <dd>A semi-hard, unripened, brined cheese with a higher-than-usual melting point, usually made from goat/sheep milk.</dd>
-  <dt>Green salad</dt>
-  <dd>That green healthy stuff that many of us just use to garnish kebabs.</dd>
-</dl>
- -

Si ara vas a l'exemple en directe i investigues els elements de la llista amb les eines de desenvolupador del navegador, t’adonaràs que hi ha un parell d'estils per defecte:

- - - -

Tractament dels espais en llistes

- -

Quan fas llistes d'estil, has d'ajustar-ne els estils perquè mantinguin el mateix espai vertical que els elements que l'envolten (com ara paràgrafs i imatges, que de vegades s’anomena ritme vertical), i el mateix espaiat horitzontal que la resta (observa l'exemple d'estil acabat a GitHub, i també el codi d’origen que hi trobaràs).

- -

El CSS que s’utilitza per a aplicar l'estil al text i l'espaiat és el següent:

- -
/* General styles */
-
-html {
-  font-family: Helvetica, Arial, sans-serif;
-  font-size: 10px;
-}
-
-h2 {
-  font-size: 2rem;
-}
-
-ul,ol,dl,p {
-  font-size: 1.5rem;
-}
-
-li, p {
-  line-height: 1.5;
-}
-
-/* Description list styles */
-
-
-dd, dt {
-  line-height: 1.5;
-}
-
-dt {
-  font-weight: bold;
-}
-
-dd {
-  margin-bottom: 1.5rem;
-}
- - - -

Estils específics de llista

- -

Hem examinat l'espaiat general de les llistes, ara explorarem algunes propietats específiques de la llista. Per començar, hi ha tres propietats que has de conèixer, que es poden establir en els elements {{htmlelement("ul")}} o {{htmlelement("ol")}}:

- - - -

Estils de vinyeta

- -

Com s'ha comentat, la propietat {{cssxref("list-style-type")}} permet establir quin tipus de vinyeta s'usa per als punts de vinyeta. En el nostre exemple, hem establert que la llista ordenada utilitzi números romans en majúscules, amb:

- -
ol {
-  list-style-type: upper-roman;
-}
- -

Això ens dona l’aspecte següent:

- -

Una llista ordenada amb vinyetes que apareixex fora del text de l'element de llista.

- -

Podeu trobar moltes més opcions consultant la pàgina de referència {{cssxref("list-style-type")}}.

- -

Posició de la vinyeta

- -

La propietat {{cssxref("list-style-position")}} estableix si les vinyetes apareixen dins dels elements de llista, o a fora, abans de l'inici de cada element. El valor predeterminat és outside (fora), que fa que les vinyetes se situïn fora dels elements de llista, tal com hem vist.

- -

Si estableixes el valor inside (dins), les vinyetes se situen dins de les línies:

- -
ol {
-  list-style-type: upper-roman;
-  list-style-position: inside;
-}
- -

Una llista ordenada amb vinyetes que apareixex dins del text de l'element de llista.

- -

Ús d'una imatge de vinyeta personalitzada

- -

La propietat {{cssxref("list-style-image")}} et permet fer servir una imatge personalitzada per a la vinyeta. La sintaxi és bastant senzilla:

- -
ul {
-  list-style-image: url(star.svg);
-}
- -

Tanmateix, aquesta propietat és una mica limitada en termes de control de la posició, la mida, etc., de les vinyetes. És millor utilitzar la família de propietats {{cssxref("background")}}, que aprendràs amb més detall en el mòdul de Aplicar estil a les caixes. De moment, aquí en tens un tast!

- -

En el nostre exemple acabat, hem aplicat estil a la llista no ordenada d’aquesta manera (a sobre del que ja has vist abans):

- -
ul {
-  padding-left: 2rem;
-}
-
-ul li {
-  padding-left: 2rem;
-  list-style-type: none;
-  background-image: url(star.svg);
-  background-position: 0 0;
-  background-size: 1.6rem 1.6rem;
-  background-repeat: no-repeat;
-}
- -

Aquí hem fet el següent:

- - - -

Això ens dona el resultat següent:

- -

Una llista no ordenada amb vinyetes en forma de petites estrelles.

- -

La propietat abreujada list-style

- -

Les tres propietats anteriors esmentades es poden configurar amb una única propietat abreujada, {{cssxref("list-style")}}. Per exemple, el CSS següent:

- -
ul {
-  list-style-type: square;
-  list-style-image: url(example.png);
-  list-style-position: inside;
-}
- -

Podria reemplaçar-se per això:

- -
ul {
-  list-style: square url(example.png) inside;
-}
- -

Els valors es poden incloure en qualsevol ordre, i pots utilitzar-ne un, dos o els tres (els valors predeterminats que s’utilitzen per a les propietats que no s'inclouen són disc, none i outside). Si s'especifica un tipus i una imatge, el tipus s'utilitza com a alternativa si la imatge no es carrega per alguna raó.

- -

El control de la numeració de les llistes

- -

De vegades pot ser que vulguis numerar de manera diferent una llista ordenada, per exemple, que comenci a partir d'un número diferent de 1, o bé que compti enrere, o que compti en passos de més d'1. L'HTML i el CSS disposen d’algunes eines que et poden ajudar amb això.

- -

start

- -

L'atribut {{htmlattrxref("start", "ol")}} permet iniciar el recompte de la llista a partir d'un número diferent de 1. L’exemple següent:

- -
<ol start="4">
-  <li>Toast pitta, leave to cool, then slice down the edge.</li>
-  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
-  <li>Wash and chop the salad.</li>
-  <li>Fill pitta with salad, humous, and fried halloumi.</li>
-</ol>
- -

Dona aquesta sortida:

- -

{{ EmbedLiveSample('start', '100%', 150) }}

- -

reversed

- -

L'atribut {{htmlattrxref("reversed","ol")}} inicia la llista comptant cap enrere en comptes de cap endavant. L'exemple següent

- -
<ol start="4" reversed>
-  <li>Toast pitta, leave to cool, then slice down the edge.</li>
-  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
-  <li>Wash and chop the salad.</li>
-  <li>Fill pitta with salad, humous, and fried halloumi.</li>
-</ol>
- -

Dona aquesta sortida:

- -

{{ EmbedLiveSample('reversed', '100%', 150) }}

- -

value

- -

L'atribut {{htmlattrxref("value", "ol")}} permet establir valors numèrics específics per a cada element de llista. L’exemple següent:

- -
<ol>
-  <li value="2">Toast pitta, leave to cool, then slice down the edge.</li>
-  <li value="4">Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
-  <li value="6">Wash and chop the salad.</li>
-  <li value="8">Fill pitta with salad, humous, and fried halloumi.</li>
-</ol>
- -

Dona aquesta sortida:

- -

{{ EmbedLiveSample('value', '100%', 150) }}

- -
-

Nota: Fins i tot si fas servir un valor de {{cssxref("list-style-type")}} no numèric, cal que utilitzis els valors numèrics equivalents per a l'atribut value.

-
- -

Aprenentatge actiu: Aplicar estil a una llista imbricada

- -

En aquesta sessió d'aprenentatge actiu, volem que prenguis allò que has après i dissenyis una llista imbricada. T’hem proporcionat un codi HTML, i volem que:

- -
    -
  1. Apliquis vinyetes quadrades als elements de llista no ordenada.
    2. -
  2. Apliquis als elements de llista no ordenada i els elements de llista ordenada una alçada de línia d'1,5 respecte de la mida de la lletra.
    3. -
  3. Apliquis als elements de llista ordenada valors de lletra minúscula.
    4. -
  4. No dubtis de jugar amb l'exemple de llistes tant com vulguis, experimenta amb els tipus de vinyeta, l’espaiat o qualsevol altra cosa que hi trobis.
    5. -
- -

Si t’equivoques, sempre pots tornar a començar amb el botó Reinicia. Si t’encalles, prem el botó Mostra la solució per veure’n una resposta possible.

- - - -

{{ EmbedLiveSample('Playable_code', 700, 800) }}

- -

Vegeu també

- -

Els comptadors CSS proporcionen eines avançades per a personalitzar el recompte i l'estil de les llistes, però són bastant complexos. Et recomanem que hi facis un cop d'ull si vols ampliar la informació. Vegeu:

- - - -

Resum

- -

Resulta relativament fàcil de dominar l'aplicació d’estil a les llistes una vegada que en coneixes els principis bàsics associats i les propietats específiques. En l’article següent continuarem amb les tècniques d'estil.

- -

{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}

diff --git a/files/ca/learn/css/estilitzar_text/text_fonamental/index.html b/files/ca/learn/css/estilitzar_text/text_fonamental/index.html deleted file mode 100644 index e258171ffc..0000000000 --- a/files/ca/learn/css/estilitzar_text/text_fonamental/index.html +++ /dev/null @@ -1,739 +0,0 @@ ---- -title: Text fonamental i estil de font -slug: Learn/CSS/Estilitzar_text/Text_fonamental -tags: - - Article - - Beginner - - CSS - - Guide - - Style - - Text - - alignment - - family - - font - - shorthand - - spacing - - weight -translation_of: Learn/CSS/Styling_text/Fundamentals ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}
- -

En aquest article t'iniciem en el viatge cap al domini de l'aplicació d’estil a text amb {{glossary("CSS")}}. Aquí passarem amb detall per tots els fonaments bàsics de l'aplicació d’estil a textos / tipus de lletra, inclosos el gruix, la família i l'estil del tipus de lletra, les propietats abreviades per al tipus de lletra, l'alineació del text i altres efectes, i l’interlineat i l’interlletratge.

- - - - - - - - - - - - -
Requisits previs:Coneixements bàsics d'informàtica, fonaments bàsics d'HTML (consulta l’article Introducció a l’HTML), fonaments de CSS (consulta l’article Introducció al CSS).
Objectiu:Aprendre les propietats i tècniques bàsiques necessàries per a l'aplicació d’estil al text de les pàgines web.
- -

Què implica l'aplicació d’estil al text en CSS?

- -

Com ja deus conèixer d’haver treballat amb l’HTML i el CSS, el text dins d'un element es defineix dins de la caixa de contingut de l'element. Comença a la part superior esquerra de l'àrea de contingut (o a la part superior dreta, en el cas de contingut en idiomes RTL, o right-to-left, que s'escriuen de dreta a esquerra) i flueix cap al final de la línia. Quan arriba al final, passa a la línia següent i continua; i després, a la següent línia, fins que tot el contingut s'ha col·locat a la caixa. El contingut de text es comporta en efecte com un seguit d'elements en línia, es distribueix en línies adjacents entre si, i no crea salts de línia fins que s’ateny el final de la línia, o tret que s'obligui a un salt de línia manual de l'element {{htmlelement("br")}}.

- -
-

Nota: Si el paràgraf anterior et sembla confós, no t’hi amoïnis, torna enrere i fes un repàs de la teoria del model de caixa que s’explica en l’article El model de caixa abans de continuar.

-
- -

Les propietats CSS que s'utilitzen per a escriure text generalment es divideixen en dues categories, que veurem per separat en aquest article:

- - - -
-

Nota: Tingues en compte que les propietats que afecten el text dins d'un element hi actuen com una única entitat. No pots seleccionar i modificar l'estil de les subseccions de text si no les etiquetes amb un element apropiat (com ara {{htmlelement("span")}} o {{htmlelement("strong")}}) o utilitzes un pseudoelement específic per a text com ::first-letter (selecciona la primera lletra del text d'un element), ::first-line (selecciona la primera línia del text d'un element) o ::selection (selecciona el text que el cursor ressalta en aquell moment).

-
- -

Tipus de lletra

- -

Continuem endavant per veure les propietats d'estil dels tipus de lletra. En aquest exemple aplicarem algunes propietats CSS diferents a la mateixa mostra d’HTML, que té l’aspecte següent:

- -
<h1>Tommy the cat</h1>
-
-<p>I remember as if it were a meal ago...</p>
-
-<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter
- may have nestled its way into his mighty throat. Many a fat alley rat
-had met its demise while staring point blank down the cavernous barrel of
- this awesome prowling machine. Truly a wonder of nature this urban
-predator — Tommy the cat had many a story to tell. But it was a rare
-occasion such as this that he did.</p>
- -

Podeu trobar l'exemple acabat en GitHub (vegeu-ne també el codi font).

- -

Color

- -

La propietat {{cssxref("color")}} estableix el color del contingut de primer pla dels elements seleccionats (que normalment és el text, però també pot incloure un parell d'altres coses, com ara un subratllat o un sobreratllat en el text, amb la propietat {{cssxref("text-decoration")}}).

- -

La propietat color pot acceptar qualsevol unitat de color CSS, per exemple:

- -
p {
-  color: red;
-}
- -

Això fa que els paràgrafs es converteixin en vermells, en comptes del negre estàndard per defecte del navegador, així:

- - - -

{{ EmbedLiveSample('Color', '100%', 220) }}

- -

Famílies de tipus de lletra

- -

Per a establir un tipus de lletra diferent en el teu text, utilitza la propietat {{cssxref("font-family")}}; això et permet especificar un tipus de lletra (o una llista de tipus de lletra) perquè el navegador l'apliqui als elements seleccionats. El navegador només aplica un tipus de lletra si està disponible en la màquina amb què s’accedeix al lloc web. Si no, només usarà un {{anch("Default fonts", "tipus de lletra predeterminat")}} del navegador. Un exemple senzill és el següent:

- -
p {
-  font-family: arial;
-}
- -

Això fa que tots els paràgrafs d'una pàgina adoptin el tipus de lletra Arial, que es troba en qualsevol ordinador.

- -

Tipus de lletra segurs per a la xarxa web

- -

Parlant de la disponibilitat dels tipus de lletra, només una certa quantitat de tipus de lletra es troben generalment disponibles en tots els sistemes i, per tant, es poden utilitzar sense gaires preocupacions. Són els anomenats tipus de lletra segurs per a la xarxa web.

- -

La majoria de les vegades, com a desenvolupadors web, volem tenir un control més específic sobre els tipus de lletra que s’utilitzen per a mostrar el contingut del text. El problema és trobar una manera de saber quin tipus de lletra està disponible en l'ordinador que es fa servir per a accedir a les nostres pàgines web. No hi ha manera de saber-ho en tots els casos, però se sap que els tipus de lletra segurs per a la web estan disponibles en gairebé totes les instàncies dels sistemes operatius més utilitzats (Windows, Mac, les distribucions més habituals de Linux, Android i iOS).

- -

La llista de tipus de lletra segurs per a la xarxa web reals canvia a mesura que evolucionen els sistemes operatius, però és convenient considerar els tipus de lletra segurs per a la xarxa web següents, almenys ara com ara (molts d'ells s’han popularitzades gràcies a la iniciativa de Microsoft Tipus de lletra principals per a la xarxa web, de finals dels anys 1990 i principis dels anys 2000):

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NomTipus de lletra genèricObservacions
Arialsans-serifSovint es considera una bona pràctica afegir també el tipus de lletra Helvetica com una alternativa preferent a Arial; encara que són gairebé idèntiques, es considera que Helvetica té una forma més agradable, tot i que Arial està més disponible.
Courier NewmonospaceHi ha sistemes operatius que tenen una versió alternativa (possiblement més antiga) del tipus de lletra Courier New anomenada Courier. Es considera una bona pràctica utilitzar-les totes dues, amb Courier New com l’opció preferent.
Georgiaserif
Times New RomanserifHi ha sistemes operatius que tenen una versió alternativa (possiblement més antiga) del tipus de lletra Times New Roman anomenada Times. Es considera una bona pràctica utilitzar-les totes dues, amb Times New Roman com l’opció preferent.
Trebuchet MSsans-serifHas de tenir cura amb l'ús d'aquest tipus de lletra perquè no està àmpliament disponible en sistemes operatius mòbils.
Verdanasans-serif
- -
-

Nota: Entre els diversos recursos, el lloc web cssfontstack.com manté una llista de tipus de lletra segurs per a la web disponibles en sistemes operatius Windows i macOS, que poden ajudar-te a prendre la decisió sobre el que consideris segur per al teu ús.

-
- -
-

Nota: Hi ha una manera de descarregar un tipus de lletra personalitzat juntament amb una pàgina web, que et permet personalitzar l'ús del tipus de lletra de la manera que vulguis: web fonts. Això és una mica més complex, i ho exposarem en un article separat més endavant en el mòdul.

-
- -

Tipus de lletra predeterminats

- -

CSS defineix cinc noms genèrics per als tipus de lletra: serif, sans-serif, monospace, cursive i fantasy. Són noms molt genèrics i l’aspecte exacte del tipus de lletra usat quan s'utilitzen aquests noms genèrics correspon a cada navegador i pot variar per a cada sistema operatiu amb què s'executa. Representa un pitjor escenari, en què el navegador tracta de fer el possible per a oferir almenys un tipus de lletra que es consideri adequat. serif, sans-serif i monospace són bastant previsibles i han de proporcionar alguna cosa raonable. D'altra banda, cursive i fantasy són menys previsibles i et recomanem utilitzar-les amb molta cura i provar-les cada vegada.

- -

Els cinc noms es defineixen de la manera següent:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NomDefinicióExemple
serifTipus de lletra que tenen serifes (les floritures i altres petits detalls que es veuen en els extrems dels traços en algunes tipografies).My big red elephant
sans-serifTipus de lletra que no tenen serifes.My big red elephant
monospaceTipus de lletra en què cada caràcter ocupa la mateixa amplada, normalment s’utilitza en les llistes d’instruccions que constitueixen el codi informàtic.My big red elephant
cursiveTipus de lletra que tenen com a objectiu emular l'escriptura manuscrita, amb moviments fluids i connectats.My big red elephant
fantasyTipus de lletra amb intencions decoratives.My big red elephant
- -

Llistes de tipus de lletra

- -

Com que no pots garantir la disponibilitat dels tipus de lletra que vols utilitzar en les teves pàgines web (fins i tot un tipus de lletra segur per a la xarxa web podria fallar per alguna raó), pots proporcionar una llista de tipus de lletra perquè el navegador tingui diversos tipus de lletra per poder triar. Això només implica introduir un atribut font-family amb un valor que consti de diversos noms de tipus de lletra separats per comes, per exemple:

- -
p {
-  font-family: "Trebuchet MS", Verdana, sans-serif;
-}
- -

En aquest cas, el navegador comença pel principi de la llista i mira si el primer tipus de lletra està disponible en la màquina. Si és així, s'aplica aquesta font als elements seleccionats. En cas contrari, es passa al tipus de lletra següent, i així successivament.

- -

És recomanable proporcionar al final de la llista un nom de tipus de lletra genèric que sigui adequat perquè el navegador pugui almenys proporcionar alguna cosa adequada aproximada si cap dels tipus de lletra de la llista estan disponibles. Per il·lustrar aquest punt, els navegadors presenten els paràgrafs en un tipus de lletra serifa predeterminada, que normalment és Times New Roman, si no hi ha cap altra opció disponible; però això no és bo quan s’espera un tipus de lletra sans-serif!

- -
-

Nota: Els noms dels tipus de lletra que tenen més d'una paraula, com Trebuchet MS s’han d’escriure entre cometes.

-
- -

Un exemple de font-family

- -

Afegim les línies següents al nostre exemple anterior per a donar als paràgrafs un tipus de lletra sans-serif:

- -
p {
-  color: red;
-  font-family: Helvetica, Arial, sans-serif;
-}
- -

Això ens dona el resultat següent:

- - - -

{{ EmbedLiveSample('Un_exemple_de_font-family', '100%', 220) }}

- -

La mida de la lletra

- -

En l'article de valors i unitats en CSS del mòdul anterior, hem revisat les unitats de longitud i mida. La mida de la lletra (que s’estableix amb la propietat {{cssxref("font-size")}} pot prendre valors que es mesuren en la majoria d'aquestes unitats (i d’altres, com ara percentatges), però les unitats més comunes que faràs servir per a la mida del text són:

- - - -

L’atribut font-size d'un element s'hereta de l'element pare d'aquest element. Tot comença amb l'element arrel del document, {{htmlelement("html")}}, en què l’atribut font-size està establert en 16 px de manera estàndard en els navegadors. Qualsevol paràgraf (o un altre element que no tingui una mida diferent establerta pel navegador) de l'interior de l'element arrel tindrà una mida final de 16 px. Altres elements poden tenir mides predeterminades diferents, per exemple, un element {{htmlelement("h1")}} té una mida de 2 em establerta per defecte, de manera que tindrà una mida final de 32 píxels.

- -

Les coses es tornen més difícils quan es comença a alterar la mida del tipus de lletra dels elements imbricats. Per exemple, si en la teva pàgina hi ha un element {{htmlelement("article")}} i hi estableixes la mida del tipus de lletra en 1,5 em (que donaria una mida final de 24 px), i llavors vols que els paràgrafs de dins de l'element <article> tinguin una mida de lletra computada de 20 px, quin valor em hem d’utilitzar?

- -
<!-- document base font-size is 16px -->
-<article> <!-- If my font-size is 1.5em -->
-  <p>My paragraph</p> <!-- How do I compute to 20px font-size? -->
-</article>
- -

Hauràs d'establir el valor em en 20/24 o 0,83333333 em. Els càlculs poden complicar-se, de manera que cal tenir cura a l’hora de com aplicar estils. El millor és utilitzar unitats rem on puguis per mantenir les coses senzilles i evitar establir la mida de la lletra dels elements del contenidor quan sigui possible.

- -

Un exemple senzill de dimensionament

- -

Quan dimensiones el teu text, normalment és una bona idea establir l’atribut base font-size del document en 10 px, de manera que resulta molt més senzill de fer els càlculs, perquè llavors els valors (r)em són la mida de la lletra en píxels dividida per 10, no per 16. A continuació, pots dimensionar fàcilment els diferents tipus de text del document si ho vols. És una bona idea fer una llista de tot el conjunt de regles font-size en una zona determinada del teu full d'estil, i així són fàcils de trobar.

- -

El nostre nou resultat és així:

- - - -
html {
-  font-size: 10px;
-}
-
-h1 {
-  font-size: 2.6rem;
-}
-
-p {
-  font-size: 1.4rem;
-  color: red;
-  font-family: Helvetica, Arial, sans-serif;
-}
- -

{{ EmbedLiveSample('Un_exemple_senzill_de_dimensionament', '100%', 220) }}

- -

Estils i gruixos de lletra, transformacions i decoracions del text

- -

CSS proporciona quatre propietats comunes per a alterar el gruix visual / l’èmfasi del text:

- - - -

Cal tenir en compte que {{cssxref("text-decoration")}} pot acceptar diversos valors alhora, si vols afegir diverses decoracions alhora; per exemple, text-decoration: underline overline. Tingues en compte que {{cssxref("text-decoration")}} és una propietat abreujada per a {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}} i {{cssxref("text-decoration-color")}}. Pots utilitzar les combinacions d'aquests valors de propietat per a crear efectes interessants, per exemple, text-decoration: line-through red wavy

- -

Observem com afegir un parell d'aquestes propietats al nostre exemple:

- -

El resultat és aquest:

- - - -
html {
-  font-size: 10px;
-}
-
-h1 {
-  font-size: 2.6rem;
-  text-transform: capitalize;
-}
-
-h1 + p {
-  font-weight: bold;
-}
-
-p {
-  font-size: 1.4rem;
-  color: red;
-  font-family: Helvetica, Arial, sans-serif;
-}
- -

{{ EmbedLiveSample('Estils_i_gruixos_de_lletra_transformacions_i_decoracions_del_text', '100%', 220) }}

- -

Ombres en el text

- -

Pots aplicar ombres al text amb la propietat {{cssxref("text-shadow")}}. Això involucra fins a quatre valors, com es mostra en l'exemple següent:

- -
text-shadow: 4px 4px 5px red;
- -

Les quatre propietats són:

- -
    -
  1. El desplaçament horitzontal de la silueta del text original: pot prendre la majoria de les unitats de longitud i grandària disponibles en CSS, però el més convenient és usar px. Aquest valor s'ha d'incloure.
    2. -
  2. El desplaçament vertical de la silueta del text original: es comporta bàsicament igual que el desplaçament horitzontal, excepte que mou l'ombra amunt i avall, no a dreta i esquerra. Aquest valor s'ha d'incloure.
    3. -
  3. El radi d'esborronat: un valor més alt significa que l'ombra es dispersa més àmpliament. Si aquest valor no s'inclou, el valor predeterminat és 0, que significa que no s’esborrona. Pot prendre la majoria de les unitats de longitud i grandària disponibles en CSS.
    4. -
  4. El color base de l'ombra: pot prendre qualsevol unitat de color CSS. Si no s'inclou, el valor predeterminat és black.
    5. -
- -
-

Nota: Els valors de desplaçament positius mouen l'ombra cap a la dreta i cap avall, però també pots utilitzar valors de desplaçament negatius per a moure l'ombra cap a l'esquerra i cap amunt, com per exemple -1px -1px.

-
- -

Ombres múltiples

- -

Pots aplicar diverses ombres a un mateix text si inclous més d’un valor d'ombra separats per comes, per exemple:

- -
text-shadow: -1px -1px 1px #aaa,
-             0px 4px 1px rgba(0,0,0,0.5),
-             4px 4px 5px rgba(0,0,0,0.7),
-             0px 0px 7px rgba(0,0,0,0.4);
- -

Si apliquem això a l'element {{htmlelement("h1")}} del nostre exemple de Tommy the cat, obtenim això:

- - - -

{{ EmbedLiveSample('Ombres_múltiples', '100%', 220) }}

- -
-

Nota: Pots veure més exemples interessants d'ús de text-shadow en l'article de Sitepoint Moonlighting with CSS text-shadow.

-
- -

Disseny de pàgina del text

- -

Ara que ja coneixem les propietats bàsiques dels tipus de lletra, passem a veure les propietats del text que podem utilitzar que afecten el disseny de pàgina.

- -

Alineació del text

- -

La propietat {{cssxref("text-align")}} s'utilitza per a controlar com s'alinea el text dins de la caixa que conté els continguts. Els valors disponibles són els següents i funcionen gairebé de la mateixa manera que ho fa una aplicació de processador de text normal:

- - - -

Si s'aplica text-align: center; a l’{{htmlelement("h1")}} en el nostre exemple, obtenim això:

- - - -

{{ EmbedLiveSample('Alineació_del_text', '100%', 220) }}

- -

Interlineat

- -

La propietat {{cssxref("line-height")}} estableix l'alçada que hi ha entre les línies de text. Pot prendre la majoria de les unitats de longitud i grandària, però també un valor sense unitat, que actua com un multiplicador, i generalment es considera l’opció més bona; es multiplica el valor de {{cssxref("font-size")}} i s’obté line-height. El text del body en general es veu més bé i és més fàcil de llegir si les línies estan prou separades. L'alçada de la línia recomanada és d'aproximadament 1,5-2 (doble espai). Per tant, si vols establir les línies de text a 1,6 vegades l'alçada del tipus de lletra, utilitzaries això:

- -
line-height: 1.6;
- -

Si apliques això als elements {{htmlelement("p")}} del nostre exemple, obtindràs aquest resultat:

- - - -

{{ EmbedLiveSample('Interlineat', '100%', 250) }}

- -

Espaiat entre lletres i entre paraules

- -

Les propietats {{cssxref("spacing-letter")}} i {{cssxref("word-spacing")}} permeten establir l'espaiat entre lletres i l'espaiat entre paraules en el text. No ho faràs amb gaire freqüència, però potser ho trobes útil per a obtenir un cert tipus de presentació o per millorar la llegibilitat d'un tipus de lletra especialment densa. Pot prendre la majoria de les unitats de longitud i grandària.

- -

Així, per exemple, podríem aplicar una mica d’espai entre lletres i espai entre paraules a la primera línia de cada element {{htmlelement("p")}} del nostre exemple:

- -
p::first-line {
-  letter-spacing: 4px;
-  word-spacing: 4px;
-}
- -

Afegim-ne una mica al nostre exemple, així:

- - - -

{{ EmbedLiveSample('Espaiat_entre_lletres_i_entre_paraules', '100%', 250) }}

- -

Altres propietats que convé conèixer

- -

Les propietats anteriors et donen una idea de com començar a aplicar estil al text d’una pàgina web, però hi ha moltes altres propietats que es poden utilitzar. Aquí només hem volgut exposar les més importants. Un cop t’hagis acostumat a fer-les servir, també hauries d'explorar les següents:

- -

Estils per als tipus de lletra:

- - - -

Aplicació d’estil al text per al disseny de pàgina

- - - -

Propietat abreujada per al tipus de lletra

- -

També es poden establir moltes propietats de tipus de lletra amb la propietat abreujada {{cssxref("font")}}. S’escriuen en l’ordre següent:  {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-weight")}}, {{cssxref("font-stretch")}}, {{cssxref("font-size")}}, {{cssxref("line-height")}} i {{cssxref("font-family")}}.

- -

Entre totes aquestes propietats, només es requereixen font-size i font-family quan s'utilitza la propietat abreujada font.

- -

S'ha d'incloure una barra diagonal entre les propietats {{cssxref("font-size")}} i {{cssxref("line-height")}}.

- -

Un exemple complet tindria un aspecte com aquest:

- -
font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;
- -

Aprenentatge actiu: Jugar amb els estils de text

- -

En aquesta sessió d'aprenentatge actiu, no et proposem de fer cap exercici específic: et proposem que juguis amb algunes propietats del tipus de lletra i el text aplicades al disseny de pàgina i observis què ets capaç de crear. Pots fer-ho usant els fitxers HTML/CSS fora de línia, o pots introduir el teu codi en l'exemple editat en viu a continuació.

- -

Si t’equivoques, sempre pots tornar a l’inici amb el botó Reinicia.

- - - -

{{ EmbedLiveSample('Codi_executable', 700, 800) }}

- -

Resum

- -

Esperem que hagis gaudit jugant amb el text d’aquest article! L’article següent t’explicarà tot el que has de saber sobre l’aplicació d'estil a llistes HTML.

- -

{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}

diff --git "a/files/ca/learn/css/first_steps/com_comen\303\247ar_amb_css/index.html" "b/files/ca/learn/css/first_steps/com_comen\303\247ar_amb_css/index.html" deleted file mode 100644 index dfc1ae29b3..0000000000 --- "a/files/ca/learn/css/first_steps/com_comen\303\247ar_amb_css/index.html" +++ /dev/null @@ -1,254 +0,0 @@ ---- -title: Com començar amb CSS -slug: Learn/CSS/First_steps/Com_començar_amb_CSS -translation_of: Learn/CSS/First_steps/Getting_started ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}
- -

En aquest article, agafarem un document HTML senzill i hi aplicarem una mica de CSS per aprendre algunes coses pràctiques sobre aquest llenguatge informàtic.

- - - - - - - - - - - - -
Prerequisits:Coneixements bàsics d'informàtica, tenir el programari bàsic instal·lat, coneixements bàsics de com treballar amb fitxers i d'HTML (mira Introducció a l'HTML).
Objectiu:Comprendre els fonaments bàsics d’enllaçar un document CSS a un fitxer HTML i poder crear un text simple amb CSS.
- -

Començar amb l'HTML

- -

El nostre punt de partida és un document HTML. Pots copiar el codi de sota si vols treballar al teu propi ordinador. Desa el codi de sota com a index.html en una carpeta de l'ordinador.

- -
<!doctype html>
-<html lang="ca">
-<head>
-    <meta charset="utf-8">
-    <title>Introducció al CSS</title>
-</head>
-
-<body>
-
-    <h1>Sóc un títol de nivell u</h1>
-
-    <p>Aquest és un paràgraf de text. Al text hi ha un <span>element span</span>
-i també un enllaç <a href="http://example.com">link</a>.</p>
-
-    <p>Aquest és el segon paràgraf. Conté un element <em>subratllat</em>.</p>
-
-    <ul>
-        <li>Article 1</li>
-        <li>Article 2</li>
-        <li>Article <em>tres</em></li>
-    </ul>
-
-</body>
-
-</html>
-
- -
-

Nota: Si llegeixes això en un dispositiu o en un entorn on no pots crear fitxers fàcilment, no et preocupis: a continuació es mostren editors de codi en directe per a escriure un exemple de codi aquí a la pàgina.

-
- -

Afegir CSS al nostre document

- -

El primer que hem de fer és dir al document HTML que tenim unes regles CSS que volem que utilitzi. Habitualment trobaràs tres maneres diferents d’aplicar CSS a un document HTML, però de moment examinarem la manera més comuna i útil: enllaçar el CSS des de la capçalera del document.

- -

Crea un fitxer a la mateixa carpeta que el teu document HTML i desa’l com styles.css. L’extensió .css mostra que es tracta d’un fitxer CSS.

- -

Per a enllaçar styles.css a index.html, afegeix la línia següent en algun lloc de la capçalera ({{htmlelement("head")}}) del document HTML:

- -
<link rel="stylesheet" href="styles.css">
- -

Aquest element {{htmlelement("link")}} indica al navegador que hi ha un full d'estil i utilitza l'atribut rel i la ubicació d'aquest full d'estil com a valor de l'atribut href. Pots provar si funciona el CSS afegint una regla a styles.css. Fent servir l'editor de codi, afegeix el següent al fitxer CSS:

- -
h1 {
-  color: red;
-}
- -

Desa els fitxers HTML i CSS i torna a carregar la pàgina en un navegador web. Ara el títol d’encapçalament de primer nivell a la part superior del document s'ha de veure de color vermell. Si això succeeix, enhorabona: has aplicat amb èxit una mica de CSS a un document HTML. Si això no passa, comprova ho has escrit tot correctament.

- -

Pots continuar treballant amb styles.css localment, o bé pots utilitzar el nostre editor interactiu, que trobaràs a continuació, per continuar amb aquest tutorial. L’editor interactiu actua com si el CSS del primer quadre estigués vinculat al document HTML, tal com passa amb el nostre document anterior.

- -

Aplicar estil als elements HTML

- -

En tornar el títol vermell, ja hem demostrat que podem seleccionar un element HTML i aplicar-hi estil. Ho fem delimitant un selector d’elements: un seleccionador que coincideix directament amb un nom d’element HTML. Per a seleccionar tots els paràgrafs del document, utilitzaries el selector p. Per a convertir tots els paràgrafs en verd, faries servir:

- -
p {
-  color: green;
-}
- -

Pots seleccionar diversos selectors alhora, separats amb una coma. Si volem que tots els paràgrafs i tots els elements de la llista siguin verds, la regla ha de ser la següent:

- -
p, li {
-    color: green;
-}
- -

Prova-ho a l’editor interactiu següent (edita els quadres de codi) o al teu document CSS local.

- -

{{EmbedGHLiveSample("css-examples/learn/getting-started/started1.html", '100%', 900)}} 

- -

Canviar el comportament predeterminat dels elements

- -

Quan observem un document HTML ben marcat, fins i tot una cosa tan simple com el nostre exemple, podem veure que el navegador afegeix algun estil per defecte per fer que l’HTML sigui llegible. Els títols són grans i en lletra negreta i la nostra llista inclou vinyetes. Això passa perquè els navegadors tenen fulls d’estil interns que contenen estils predeterminats que s’apliquen per defecte a totes les pàgines; sense això no hi hauria distincions dins el text i hauríem d’aplicar estil a tot des de zero. Tots els navegadors moderns mostren el contingut HTML de la mateixa manera per defecte.

- -

Tanmateix, sovint voldràs alguna cosa que no sigui la tria que ha fet el navegador. Això es pot fer escollint només l’element HTML que vols canviar i fent servir una regla CSS per a canviar-ne l’aspecte.  Un bon exemple és <ul>, que marca una llista no ordenada. Mostra boletes en els elements de llista, però si decideixo que no les vull, les puc eliminar:

- -
li {
-  list-style-type: none;
-}
- -

Prova d’afegir això al teu CSS.

- -

És una bona opció consultar la propietat list-style-type a la pàgina de MDN per veure quins valors admet. Per provar uns valors diferents, dona una ullada a la pàgina list-style-type, on trobaràs un exemple interactiu a la part superior de la pàgina i, a continuació, es detallen tots els valors que s’admeten.

- -

Si consultes aquesta pàgina, descobriràs que, a banda d’eliminar les vinyetes de la llista, també les pots canviar: prova de canviar-les per vinyetes quadrades amb el valor square.

- -

Afegir una classe

- -

Fins al moment hem dissenyat elements basats en els seus noms en HTML. Això funciona sempre que vulguis que tots els elements d’aquest tipus del document presentin el mateix aspecte. Moltes vegades no és el cas, així que hauràs de trobar la manera de seleccionar un subconjunt dels elements sense canviar els altres. La manera més habitual de fer-ho és afegir una classe a l'element HTML i delimitar aquesta classe.

- -

Al teu document HTML, afegeix un atribut de classe al segon element de la llista. La teva llista ara es veurà així:

- -
<ul>
-  <li>Article 1</li>
-  <li class="special">Item two</li>
-  <li>Article <em>tres</em></li>
-</ul>
- -

Al teu CSS pots seleccionar la classe special creant un selector que comenci amb un punt. Afegeix el següent al teu fitxer CSS:

- -
.special {
-  color: orange;
-  font-weight: bold;
-}
- -

Desa i actualitza per veure quin és el resultat.

- -

Pots aplicar la classe special a qualsevol element de la pàgina que vulguis que tingui el mateix aspecte que aquesta llista. Per exemple, potser vols que l’element <span> del paràgraf també es vegi de color taronja i en negreta. Prova d’afegir-hi una classe special i torna a carregar la pàgina, i observa què passa.

- -

De vegades veuràs regles amb un selector que enumera el selector d’elements HTML juntament amb la classe:

- -
li.special {
-  color: orange;
-  font-weight: bold;
-}
- -

Aquesta sintaxi vol dir «selecciona qualsevol element li que tingui una classe special». Si ho fas així, ja no podràs aplicar la classe a un element <span> o qualsevol altre element simplement afegint-hi la classe; hauràs d’afegir aquest element a la llista de selectors:

- -
li.special,
-span.special {
-  color: orange;
-  font-weight: bold;
-}
- -

Com pots imaginar, algunes classes podrien aplicar-se a molts elements i no vols haver d’editar el CSS cada vegada que calgui adoptar un estil nou. Per tant, de vegades és millor deixar de banda l’element i simplement fer referència a la classe, tret que sàpigues que vols crear algunes regles especials per a un sol element i potser vols assegurar-te que no s’apliquen a altres coses.

- -

Aplicar estil en funció de la ubicació en un document

- -

Hi ha vegades que voldràs que alguna cosa sembli diferent segons el lloc en què es troba dins el document. Hi ha diversos selectors que poden ajudar en aquesta situació, però ara per ara només ens fixarem en un parell. Al nostre document hi ha dos elements <em>: un dins d’un paràgraf i l’altre dins d’una llista. Per a seleccionar només un <em> que estigui situat dins d'un element <li>, pots utilitzar un selector anomenat combinador de descendents, que simplement pren la forma d'un espai entre dos altres selectors.

- -

Afegeix la regla següent al teu full d’estil.

- -
li em {
-  color: rebeccapurple;
-}
- -

Aquest selector seleccionarà qualsevol element <em> que es trobi dins un (descendent de) <li>. Per tant, al document d’exemple, hauries de trobar que el <em> de l’element de la tercera llista és morat, però el que hi ha dins del paràgraf no canvia.

- -

Una altra cosa que potser t'agradaria provar és aplicar estil a un paràgraf que surt immediatament després d'un títol d’encapçalament del mateix nivell de jerarquia de l'HTML. Per fer-ho, col·loca un + (un combinador de germans adjacents) entre els selectors.

- -

Prova d'afegir aquesta regla al teu full d'estil, també:

- -
h1 + p {
-  font-size: 200%;
-}
- -

L'exemple en directe següent inclou les dues regles anteriors. Prova d'afegir una regla perquè un element span es mostri de color vermell si és dins d'un element paràgraf. Sabràs que ho has fet bé si element span del primer paràgraf és vermell, però el que apareix al primer element de llista no canvia de color.

- -

{{EmbedGHLiveSample("css-examples/learn/getting-started/started2.html", '100%', 1100)}}

- -
-

Nota: Com pots veure, el CSS ens ofereix diverses maneres de seleccionar elements, i fins ara només n’hem gratat la superfície! Analitzarem amb detall tots aquests selectors i molts més en els nostres articles sobre selectors que trobaràs més endavant en el curs.

-
- -

Aplicar estil en funció de l’estat

- -

El darrer tipus d’aplicació d’estil que analitzarem en aquest article és la capacitat d’aplicar estil a les coses en funció del seu estat. Un exemple senzill d’això són els enllaços. Quan dissenyem un enllaç, hem de seleccionar l’element <a> (anchor). Això té diferents estats en funció de si no s’ha visitat, s’ha visitat, s’hi passa pel damunt, se selecciona amb el teclat o s'hi fa clic (s’activa). Pots fer servir el CSS per a dirigir-te a aquests estats diferents: el CSS que trobaràs a continuació estableix els enllaços no visitats en rosa, i els visitats en verd.

- -
a:link {
-  color: pink;
-}
-
-a:visited {
-  color: green;
-}
- -

Pots canviar l'aparença de l'enllaç quan l'usuari hi col·loca el punter a sobre, per exemple, eliminar-ne el subratllat, que s'aconsegueix amb la regla següent:

- -
a:hover {
-  text-decoration: none;
-}
- -

A l’exemple en directe següent pots jugar amb diferents valors per als diversos estats d’un enllaç. Hi hem afegit les regles anteriors, i ens adonem que el color rosa és força clar i difícil de llegir; per què no el canviem per un color que vagi més bé? Es poden posar els enllaços en negreta?

- -

{{EmbedGHLiveSample("css-examples/learn/getting-started/started3.html", '100%', 900)}} 

- -

Hem eliminat el subratllat del nostre enllaç quan s’hi passa el punter del ratolí per sobre. Pots eliminar el subratllat de tots els estats d’un enllaç. Val la pena recordar, però, que en un lloc web real, vols que els visitants sàpiguen que un enllaç és un enllaç. Deixar el subratllat a lloc pot ser una pista important perquè la gent s’adoni que pot fer clic en un text dins d’un paràgraf; aquest és el comportament al qual estan acostumats. Com tot en CSS, amb els canvis es pot fer que el document sigui menys accessible; tractarem de posar en evidència els entrebancs potencials en els llocs adequats.

- -
-

Nota: sovint veuràs que en aquests articles i en l’MDN es menciona l'accessibilitat. Quan parlem d’accessibilitat ens referim al requisit que les nostres pàgines web siguin comprensibles i utilitzables per tothom.

- -

El teu visitant pot entrar a la pàgina web des d'un ordinador amb un ratolí o un trackpad, o des d’un telèfon amb pantalla tàctil. O potser utilitza un lector de pantalla que llegeix el contingut del document; o necessita utilitzar una mida de lletra del text molt més gran; o bé navega pel lloc web només amb el teclat.

- -

Un document HTML senzill és en general accessible per a tothom, i a l'hora d’aplicar estil a aquest document, és important que no el facis menys accessible.

-
- -

Combinar selectors i combinadors

- -

Val la pena assenyalar que pots combinar diversos selectors i combinadors. Per exemple:

- -
/* selecciona qualsevol <span> que estigui dins d'un <p>, que està dins d'un <article> */
-article p span { ... }
-
-/* Selecciona qualsevol <p> que vagi directament després d'un <ul>, que vagi directament després d'un <h1> */
-h1 + ul + p { ... }
- -

També pots combinar diversos tipus. Intenta afegir el següent al teu codi:

- -
body h1 + p .special {
-  color: yellow;
-  background-color: black;
-  padding: 5px;
-}
- -

Aplicarà estil a qualsevol element amb una classe special que es trobi dins d’un element <p>, que vingui just després d’un element <h1>> que es trobi dins del <body>. Uf!

- -

A l'HTML original que t’hem proporcionat, l'únic element amb estil és <span class="special">.

- -

No et preocupis si et sembla complicat en aquest moment, començaràs a entendre-ho ben aviat de seguida que treballis més amb el CSS.

- -

Tancant

- -

En aquest tutorial hem analitzat diverses maneres d’aplicar estil a un document amb CSS. Anirem desenvolupant aquests coneixements a mesura que avancem amb la resta d'articles. Tanmateix, ja en coneixes prou per a aplicar estil al text, aplicar CSS a partir de diferents maneres de seleccionar els elements del document i cercar propietats i valors en la documentació MDN.

- -

Al proper article analitzarem com s’estructura el CSS.

- -

{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}

- -

En aquest mòdul

- -
    -
  1. Què és el CSS
    2. -
  2. Primers passos amb el CSS
    3. -
  3. Com s'estructura el CSS
    4. -
  4. Com funciona el CSS
    5. -
  5. Aplica els teus nous coneixements
    6. -
diff --git a/files/ca/learn/css/first_steps/com_estructurar_el_css/index.html b/files/ca/learn/css/first_steps/com_estructurar_el_css/index.html deleted file mode 100644 index 6c216af68c..0000000000 --- a/files/ca/learn/css/first_steps/com_estructurar_el_css/index.html +++ /dev/null @@ -1,512 +0,0 @@ ---- -title: Com estructurar el CSS -slug: Learn/CSS/First_steps/Com_estructurar_el_CSS -translation_of: Learn/CSS/First_steps/How_CSS_is_structured ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}
- -

Ara que tens una idea sobre què és el CSS i les bases de com fer-lo servir, és hora d’aprofundir una mica més en l’estructura pròpia del llenguatge. Ja hem vist molts dels conceptes que s'esmenten en aquest article; pots recapitular si t’entrebanques amb els conceptes que et trobes a partir d’ara.

- - - - - - - - - - - - -
Prerequisits:Coneixements bàsics d'informàtica, tenir el programari bàsic instal·lat, coneixements bàsics de com treballar amb fitxers i d'HTML (mira Introducció a l'HTML) i nocions de com funciona el CSS.
Objectiu:Aprendre amb detall les estructures de sintaxi fonamentals del CSS.
- -

Aplicar CSS a l'HTML

- -

El primer que analitzarem són els tres mètodes d’aplicació del CSS a un document.

- -

Fulls d’estils externs

- -

En l’article Primers passos amb el CSS hem enllaçat un full d’estil extern a la nostra pàgina. Aquest és el mètode més comú i útil d’adjuntar CSS a un document perquè pots enllaçar el CSS a diverses pàgines, cosa que et permet d’aplicar-hi estil a totes amb el mateix full d’estil. En la majoria dels casos, les diverses pàgines d’un lloc web presentaran un aspecte molt semblant i, per tant, pots utilitzar el mateix conjunt de regles per a la presentació bàsica.

- -

Un full d’estil extern és quan el CSS està escrit en un fitxer independent amb l’extensió .css i s'hi fa referència des d’un element HTML <link>:

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>El meu experiment amb CSS</title>
-    <link rel="stylesheet" href="styles.css">
-  </head>
-  <body>
-    <h1>Hola món!</h1>
-    <p>Aquest és el meu primer exemple amb CSS</p>
-  </body>
-</html>
- -

El fitxer CSS podria presentar un aspecte així:

- -
h1 {
-  color: blue;
-  background-color: yellow;
-  border: 1px solid black;
-}
-
-p {
-  color: red;
-}
- -

L'atribut href de l'element {{htmlelement ("link")}} necessita fer referència a un fitxer del sistema de fitxers.

- -

A l'exemple anterior, el fitxer CSS es troba a la mateixa carpeta que el document HTML, però el pots col·locar en un altre lloc i ajustar la ruta especificada per a adaptar-s’hi, per exemple:

- -
<!-- Dins d’un subdirector anomenat styles dins del directori actual -->
-<link rel="stylesheet" href="styles/style.css">
-
-<!-- Dins d’un subdirector anomenat general, que es troba en un subdirector anomenat styles, dins del directori actual -->
-<link rel="stylesheet" href="styles/general/style.css">
-
-<!-- Puja un nivell de directori i, a continuació, a un subdirector anomenat styles -->
-<link rel="stylesheet" href="../styles/style.css">
- -

Fulls d’estil interns

- -

Un full d’estil intern és on no hi ha cap fitxer CSS extern, sinó que el CSS se situa dins d’un element {{htmlelement("style")}} que hi ha dins de l’HTML {{htmlelement("head")}}.

- -

Així doncs, l’HTML quedaria així:

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>El meu experiment amb CSS</title>
-    <style>
-      h1 {
-        color: blue;
-        background-color: yellow;
-        border: 1px solid black;
-      }
-
-      p {
-        color: red;
-      }
-    </style>
-  </head>
-  <body>
-    <h1>Hola món!</h1>
-    <p>Aquest és el meu primer exemple amb CSS</p>
-  </body>
-</html>
- -

Això pot ser útil en algunes circumstàncies (potser treballes amb un sistema de gestió de continguts en què no pots modificar els fitxers CSS directament), però no és tan eficient com els fulls d'estil externs; en un lloc web, el CSS s'hauria de canviar individualment a cada pàgina i actualitzar-se en diversos llocs si s’hi haguessin de fer canvis.

- -

Estils en línia

- -

Els estils en línia són declaracions CSS que afecten només un element, que està contingut dins d'un atribut style:

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>El meu experiment amb CSS </title>
-  </head>
-  <body>
-    <h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hola món!</h1>
-    <p style="color:red;">Aquest és el meu primer exemple amb CSS</p>
-  </body>
-</html>
- -

Si et plau, no ho facis!, tret que realment ho hagis de fer. És molt dolent per al manteniment (potser hauràs d’actualitzar la mateixa informació diverses vegades per cada document) i també barreges la informació de presentació del CSS amb la informació d’estructuració de l’HTML, i dificultes la llegibilitat i comprensió del codi. Mantenir diferents tipus de codificació separats permet una feina molt més fàcil a tots aquells que treballen en el codi.

- -

Hi ha llocs web en què els estils en línia són més comuns, o fins i tot recomanables. Pot ser que hagis de recórrer a utilitzar-los si el teu entorn de treball és molt restrictiu (potser el teu CMS només et permet editar el cos de l'HTML). També veuràs que s’utilitzen molt al correu electrònic per a obtenir compatibilitat amb tants clients de correu electrònic com sigui possible.

- -

Jugar amb el CSS en aquest article

- -

En aquest article hi ha molt de CSS. Per fer-ho, et recomanem que creïs un directori/carpeta al teu ordinador i, a dins, hi creïs una còpia dels dos fitxers següents:

- -

index.html:

- -
<!DOCTYPE html>
-<html lang="ca">
-  <head>
-    <meta charset="utf-8">
-    <title>El meu experiment amb CSS</title>
-    <link rel="stylesheet" href="styles.css">
-  </head>
-  <body>
-
-    <p>Crea el teu HTML de prova aquí</p>
-
-  </body>
-</html>
- -

styles.css:

- -
/* Crea el teu CSS de prova aquí */
-
-p {
-  color: red;
-}
- -

Aleshores, quan vulguis experimentar amb un CSS, substitueix el contingut del <body> de l’HTML per un altre HTML, i comença per afegir el codi CSS per a donar-hi estil dins del fitxer CSS.

- -

Si no utilitzes un sistema amb què puguis crear fitxers fàcilment, pots utilitzar l'editor interactiu següent per experimentar.

- -

{{EmbedGHLiveSample("css-examples/learn/getting-started/experiment-sandbox.html", '100%', 800)}}

- -

Continua i diverteix-te!

- -

Selectors

- -

No es pot parlar de CSS sense parlar de selectors, i ja n'hem descobert diversos tipus al tutorial de Primers passos amb el CSS. Un selector és la manera amb què seleccionem alguna cosa del document HTML per a aplicar-hi estils. Si els teus estils no s’apliquen, és probable que el selector no coincideixi amb el que creus que hauria de coincidir.

- -

Cada regla CSS comença amb un selector o una llista de selectors que indica al navegador a quin element o elements han d’aplicar-se les regles. Totes les mostres següents són exemples de selectors o llistes de selectors vàlids.

- -
h1
-a:link
-.manythings
-#onething
-*
-.box p
-.box p:first-child
-h1, h2, .intro
- -

Prova de crear algunes regles CSS que utilitzin els selectors anteriors i algun codi HTML al qual aplicar-hi els estils. Si no saps què significa alguna de les sintaxis anterior, prova de buscar-la a MDN.

- -
-

Nota: Aprendràs molt més sobre els selectors als nostres tutorials Selectors CSS, al mòdul següent.

-
- -

Especificitat

- -

Sovint hi haurà escenaris en què dos selectors podrien seleccionar el mateix element HTML. Considera el full d’estil següent, en què hi ha una regla amb un selector p que mostrarà els paràgrafs de color blau, i també una classe que mostrarà els elements seleccionats de color vermell.

- -
.special {
-  color: red;
-}
-
-p {
-  color: blue;
-}
- -

Diguem que al document HTML hi ha un paràgraf amb una classe special. Totes dues regles es podrien aplicar; quina guanyaria? De quin color creus que es veurà el nostre paràgraf?

- -
<p class="special">De quin color sóc?</p>
- -

El llenguatge CSS té regles per a controlar quina regla guanyarà en cas de collisió; s'anomenen cascada i especificitat. Al bloc de codi següent hem definit dues regles per al selector p, però el paràgraf acaba sent de color blau. Això és perquè la declaració que hauria de fer que es veiés de color blau apareix més tard al full d’estil, i els estils posteriors anul·len els anteriors. És la cascada en acció.

- -
p {
-  color: red;
-}
-
-p {
-  color: blue;
-}
- -

Tanmateix, en el cas del nostre exemple anterior, amb el selector de classes i el selector d’elements, la classe guanya, i el paràgraf es veu de color vermell, encara que apareix abans en el full d’estil. Es diu que una classe és més específica, o té més especificitat, que un selector d’elements, de manera que guanya.

- -

Prova l'experiment anterior: afegeix el codi HTML al teu experiment i, a continuació, afegeix les dues regles p { ... } al teu full d'estil. A continuació, canvia el primer selector de p per .special i observa com canvia l’estil.

- -

Les regles d’especificitat i cascada poden semblar una mica complicades al principi, però són més fàcils d’entendre a mesura que s'avança amb el CSS. A l'article Cascada i herència, al qual accediràs al mòdul següent, s'explica amb més detall, entre altres coses, la manera de calcular l’especificitat. Ara per ara, només has de recordar que existeix, i que és possible que de vegades el CSS no s'apliqui tal com esperes perquè alguna cosa del full d'estil té una especificitat més alta. Identificar que hi ha més d'una regla que pot aplicar-se a un element és el primer pas per a solucionar aquests problemes.

- -

Propietats i valors

- -

El CSS consta de dos blocs de construcció bàsics:

- - - -

En la imatge següent es ressalten una sola propietat i el seu valor. El nom de la propietat és color i el valor blue.

- -

Una declaració del CSS ressaltada

- -

Una propietat emparellada amb un valor s'anomena declaració CSS. Les declaracions CSS es posen dins dels blocs de declaració CSS. Aquesta imatge següent mostra el nostre CSS amb el bloc de declaracions ressaltat.

- -

Un bloc de declaracions ressaltat

- -

Finalment, els blocs de declaració CSS es combinen amb selectors per a produir conjunts de regles CSS (o regles CSS). La nostra imatge conté dues regles, una per al selector h1 i una altra per al selector p. La regla per a h1 està ressaltada.

- -

La regla per a h1 està ressaltada

- -

Definir propietats CSS amb valors específics és la funció principal del llenguatge CSS. El motor CSS calcula quines declaracions s’apliquen a cada element d’una pàgina per tal de definir-la i donar-hi l’estil adequat.

- -
-

Important: Les propietats i valors de CSS són sensibles a majúscules i minúscules. Cada parella de propietat i valor es separa per un dos punts (:).

-
- -

Prova de cercar diferents valors de les propietats següents i escriu regles CSS que s’apliquin a diferents elements HTML:

- - - -
-

Important: Si una propietat és desconeguda o si un valor no és vàlid per a una propietat determinada, es considera que la declaració no és vàlida i el motor CSS del navegador la ignora completament.

-
- -
-

Important: En CSS (i altres estàndards web) s'ha acceptat l'ortografia nord-americana com a estàndard per a resoldre la incertesa lingüística. Per exemple, la propietat color sempre s'ha d'escriure color. Si n’escrivim la versió britànica colour, no funcionarà.

-
- -

Funcions

- -

Si bé la majoria dels valors són paraules clau o valors numèrics relativament simples, hi ha alguns valors que prenen la forma d’una funció. Un exemple seria la funció calc(). Aquesta funció permet fer operacions matemàtiques senzilles des del CSS, per exemple:

- -
-
<div class="outer"><div class="box">la caixa interior és de 90% - 30px.</div></div>
- -
.outer {
-  border: 5px solid black;
-}
-
-.box {
-  padding: 10px;
-  width: calc(90% - 30px);
-  background-color: rebeccapurple;
-  color: white;
-}
-
- -

Això es presenta així:

- -

{{EmbedLiveSample('calc_example', '100%', 200)}}

- -

Una funció consisteix en el nom de la funció i, a continuació, uns parèntesis entre els quals es col·loquen els valors permesos per a aquesta funció. En el cas de l'exemple calc() anterior, volem que l'amplada d'aquesta caixa sigui el 90% de l'amplada del bloc que la conté, menys 30 píxels. No és un valor que es pugui calcular d’antuvi i senzillament introduir-lo en el CSS corresponent, perquè no sabem quin serà aquest 90%. Com en tots els valors, en la pàgina corresponent de MDN hi ha exemples d’ús perquè puguis veure com funciona aquesta funció.

- -

Un altre exemple serien els diversos valors de {{cssxref("transform")}}, com ara rotate().

- -
-
<div class="box"></div>
- -
.box {
-  margin: 30px;
-  width: 100px;
-  height: 100px;
-  background-color: rebeccapurple;
-  transform: rotate(0.8turn)
-}
-
- -

La sortida del codi anterior és la següent:

- -

{{EmbedLiveSample('transform_example', '100%', 200)}}

- -

Prova de cercar diferents valors de les propietats següents i escriu regles CSS que s’apliquin a diferents elements HTML:

- - - -

@rules

- -

Les @rules (llegit «at-rules», en anglès) proporcionen instruccions sobre com ha de comportar-se el CSS, o quin CSS s'ha d'aplicar. Algunes @rules són senzilles i es formen només amb el nom de la regla i el valor. Per exemple, per a importar un full d’estil addicional al teu full d’estil CSS principal, pots utilitzar @import:

- -
@import 'styles2.css';
- -

Una de les @rules més comunes que trobaràs és @media, que et permet crear consultes a mèdia (o media queries, en anglès) per a aplicar CSS només quan determinades condicions són certes (per exemple, quan la resolució de la pantalla està per sobre d’una quantitat determinada, o la pantalla és més ampla que una certa amplada).

- -

Al CSS següent hi ha un full d’estil que dona a l’element <body> un color de fons rosat. Tot i això, després utilitzem @media per a crear una secció al nostre full d’estil que només s’aplicarà als navegadors amb una visualització més ampla de 30em. Si el navegador és més ample de 30em, el color de fons serà blau.

- -
body {
-  background-color: pink;
-}
-
-@media (min-width: 30em) {
-  body {
-    background-color: blue;
-  }
-}
- -

Trobaràs altres @rules al llarg d’aquests tutorials.

- -

Prova d’afegir una consulta a un mèdia al teu CSS que canviï els estils en funció de l’amplada de la visualització. Canvia l'amplada de la finestra del navegador per veure’n el resultat.

- -

Propietats abreviades

- -

Algunes propietats com {{cssxref ("font")}}, {{cssxref ("background")}}, {{cssxref ("padding")}}, {{cssxref ("border")}} i {{cssxref ("margin")}} s’anomenen propietats abreviades: això és perquè permeten establir diversos valors de propietat en una sola línia, que estalvia temps i aconsegueix que el codi es vegi més net.

- -

Per exemple, aquesta línia:

- -
/* En les propietats abreviades de 4 valors, com ara margin i padding, s'apliquen els valors
-   a la part superior, dreta, inferior, esquerra (en sentit horari des de la part superior). També hi ha altres
-   propietats abreviades, per exemple les propietats abreviades de 2 valors, que estableixen una àrea de farciment/marge
-   a la part superior/inferior, a l'esquerra/a la dreta */
-padding: 10px 15px 15px 5px;
- -

Fa el mateix que totes aquestes juntes:

- -
padding-top: 10px;
-padding-right: 15px;
-padding-bottom: 15px;
-padding-left: 5px;
- -

Mentre que aquesta línia:

- -
background: red url(bg-graphic.png) 10px 10px repeat-x fixed;
- -

Fa el mateix que totes aquestes juntes:

- -
background-color: red;
-background-image: url(bg-graphic.png);
-background-position: 10px 10px;
-background-repeat: repeat-x;
-background-scroll: fixed;
- -

No intentarem ensenyar-les de manera exhaustiva ara; trobaràs molts exemples més endavant en el curs i et recomanem que cerquis més noms de propietats abreviades clau a les nostres referències CSS per a obtenir-ne més informació.

- -

Prova d’afegir les declaracions anteriors al teu CSS per veure com afecta a l’estil del teu HTML. Prova d’experimentar amb valors diferents.

- -
-

Atenció: Mentre que les propietats abreviades sovint et permeten ometre els valors, després restabliran els valors que no incloguis als seus valors inicials. D’aquesta manera es garanteix l’ús d’un conjunt de valors coherent. Però et pot confondre si esperes que la propietat abreviada només canviï els valors que has marcat.

-
- -

Comentaris

- -

De la mateixa manera que amb l’HTML, et convidem a posar comentaris al teu CSS per a ajudar-te a comprendre com funciona el teu codi en tornar-hi al cap d’uns mesos, i per a ajudar altres que treballin sobre aquest codi.

- -

Els comentaris en CSS comencen amb /* i acaben amb */. Al bloc de codi següent hem utilitzat comentaris per marcar l'inici de diverses seccions de codi diferents. És útil per a ajudar-te a orientar-te pel codi a mesura que n’augmenta l’extensió. Cerca els comentaris al teu editor de codi.

- -
/* Manejar una aplicació d’estil als elements bàsics */
-/* -------------------------------------------------------------------------------------------- */
-body {
-  font: 1em/150% Helvetica, Arial, sans-serif;
-  padding: 1em;
-  margin: 0 auto;
-  max-width: 33em;
-}
-
-@media (min-width: 70em) {
-  /* Posem en cas especial la mida del tipus de lletra general. En una pantalla gran o en una finestra,
-     augmentem la mida de la lletra per a facilitar la lectura */
-  body {
-    font-size: 130%;
-  }
-}
-
-h1 {font-size: 1.5em;}
-
-/* Manejar elements específics que es troben al DOM */
-/* -------------------------------------------------------------------------------------------- */
-div p, #id:first-line {
-  background-color: red;
-  border-radius: 3px;
-}
-
-div p {
-  margin: 0;
-  padding: 1em;
-}
-
-div p + p {
-  padding-top: 0;
-}
- -

Els comentaris també són útils per a inhabilitar temporalment algunes parts del codi amb finalitats de prova, per exemple, si intentes trobar quina part del teu codi causa un error. A l’exemple següent hem «comentat» (posat com a comentaris) les regles per al selector .special.

- -
/*.special {
-  color: red;
-}*/
-
-p {
-  color: blue;
-}
- -

Afegeix alguns comentaris al teu CSS per acostumar-te a utilitzar-los.

- -

Espais en blanc

- -

Els espais en blanc són els espais, els sagnats de text i les línies noves. De la mateixa manera que en l’HTML, el navegador ignora els espais en blanc del teu CSS. El valor dels espais en blanc està en que són molt útils per a millorar la llegibilitat.

- -

En l'exemple que trobaràs a continuació, cada declaració (i inici/final de regla) és en una línia de text pròpia. Probablement és una bona manera d’escriure el CSS, perquè fa que sigui fàcil de mantenir i d'entendre:

- -
body {
-  font: 1em/150% Helvetica, Arial, sans-serif;
-  padding: 1em;
-  margin: 0 auto;
-  max-width: 33em;
-}
-
-@media (min-width: 70em) {
-  body {
-    font-size: 130%;
-  }
-}
-
-h1 {
-  font-size: 1.5em;
-}
-
-div p,
-#id:first-line {
-  background-color: red;
-  border-radius: 3px;
-}
-
-div p {
-  margin: 0;
-  padding: 1em;
-}
-
-div p + p {
-  padding-top: 0;
-}
-
- -

Podries escriure exactament el mateix CSS de la manera següent, eliminant-ne la majoria d’espais en blanc. Aquest codi és funcionalment idèntic al del primer exemple, però segur que estàs d’acord que és una mica més feixuc de llegir:

- -
body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;}
-@media (min-width: 70em) { body {font-size: 130%;} }
-
-h1 {font-size: 1.5em;}
-
-div p, #id:first-line {background-color: red; border-radius: 3px;}
-div p {margin: 0; padding: 1em;}
-div p + p {padding-top: 0;}
-
- -

La disposició del codi que tries sol ser una preferència personal, tot i que quan comences a treballar en equip, és possible que trobis que l’equip té la seva guia d’estil pròpia que especifica una convenció acordada a seguir.

- -
-

Important: Has de tenir cura amb l’espai en blanc que hi ha d’haver entre una propietat del CSS i el seu valor.

-
- -

Per exemple, les declaracions següents són vàlides en CSS:

- -
margin: 0 auto;
-padding-left: 10px;
- -

Però les següents no són vàlids:

- -
margin: 0auto;
-padding- left: 10px;
- -

Veus els errors d'espaiat? 0auto no es reconeix com a valor vàlid per a la propietat margin (0 i auto són dos valors separats), i el navegador no reconeix padding- com a propietat vàlida. El nom correcte de la propietat (padding-left) ha quedat separat per un espai perdut.

- -

Sempre t'has d'assegurar de separar valors diferenciats els uns dels altres com a mínim per un espai, però mantenir els noms de la propietat i els valors de propietat junts, com cadenes ininterrompudes.

- -

Prova de jugar amb espais en blanc al teu CSS per veure què es trenca i què no.

- -

Què segueix?

- -

És útil entendre una mica com el navegador pren els teus codis HTML i CSS i els converteix en una pàgina web, així que en l’article següent, (Com funciona el CSS), donarem una ullada a aquest procés.

- -

{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}

- -

En aquest mòdul

- -
    -
  1. Què és el CSS
    2. -
  2. Primers passos amb el CSS
    3. -
  3. Com s'estructura el CSS
    4. -
  4. Com funciona el CSS
    5. -
  5. Aplica els teus nous coneixements
    6. -
diff --git a/files/ca/learn/css/first_steps/com_funciona_el_css/index.html b/files/ca/learn/css/first_steps/com_funciona_el_css/index.html deleted file mode 100644 index 9621d2c21c..0000000000 --- a/files/ca/learn/css/first_steps/com_funciona_el_css/index.html +++ /dev/null @@ -1,156 +0,0 @@ ---- -title: Com funciona el CSS -slug: Learn/CSS/First_steps/Com_funciona_el_CSS -translation_of: Learn/CSS/First_steps/How_CSS_works ---- -

{{LearnSidebar}}
- {{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}

- -

Hem après els conceptes bàsics de CSS, per a què serveix i com escriure fulls d'estil senzills. En aquest article veurem com un navegador pren els llenguatges CSS i HTML i els converteix en una pàgina web.

- - - - - - - - - - - - -
Prerequisits:Coneixements bàsics d'informàtica, tenir el programari bàsic instal·lat, coneixements bàsics de com treballar amb fitxers i d'HTML (mira Introducció a l'HTML).
Objectiu:Entendre els conceptes bàsics de com el navegador analitza els llenguatges CSS i HTML i què passa quan un navegador troba un CSS que no entén.
- -

Com funciona realment el CSS?

- -

Quan un navegador mostra un document, ha de combinar el contingut del document amb la informació d’estil. Processa el document en un seguit d'etapes, que enumerarem a continuació. Tingues present que aquesta és una versió molt simplificada de què passa quan un navegador carrega una pàgina web, i que els diversos navegadors gestionen el procés de maneres diferents. Però això és més o menys el que succeeix.

- -
    -
  1. El navegador carrega el codi HTML (per exemple, el rep de la xarxa).
    2. -
  2. Converteix el codi {{Glossary("HTML")}} en un model d'objectes del document (document object model o {{Glossary("DOM")}}). El DOM representa el document a la memòria de l'ordinador. L’explicarem amb més detall en la secció següent.
    3. -
  3. El navegador recupera la majoria dels recursos als quals està vinculat el document HTML, com ara imatges i vídeos incrustats... i CSS enllaçats. El JavaScript es tracta una mica més endavant en el procés, i no en parlarem aquí per no embolicar les coses.
    4. -
  4. El navegador analitza el CSS recuperat i ordena les diferents regles segons els tipus de selector en diferents «cubetes». Per exemple: element, classe, ID, etc. A partir dels selectors que troba, calcula quines regles s’han d’aplicar als nodes del DOM i hi atribueix l’estil segons sigui necessari (aquest pas intermedi s’anomena arbre de renderització).
    5. -
  5. L'arbre de representació presenta l'estructura en què ha d'aparèixer després que s'apliquin les regles.
    6. -
  6. La presentació visual de la pàgina es mostra a la pantalla (aquesta etapa s’anomena pintura).
    7. -
- -

El diagrama següent ofereix una visió senzilla del procés.

- -

- -

Sobre el DOM

- -

Un DOM té una estructura en forma d'arbre. Cada element, atribut i fragment de text del llenguatge de marcatge es converteix en un {{Glossary("Node/DOM","node DOM")}} en l'estructura de l'arbre. Els nodes es defineixen per la seva relació amb els altres nodes del DOM. Alguns elements són pares de nodes secundaris, i els nodes secundaris tenen nodes germans.

- -

Entendre el DOM t'ajuda a dissenyar, depurar i mantenir el teu CSS perquè el DOM és el lloc on es troba el CSS i el contingut del document. Quan comencis a treballar amb les eines DevTools (o eines del desenvolupador) del navegador, et desplaçaràs pel DOM mentre selecciones els elements per veure quines regles s'apliquen.

- -

Una representació real del DOM

- -

En lloc d’una llarga i avorrida explicació, vegem amb un exemple com un fragment HTML es converteix en un DOM.

- -

Prenguem el codi HTML següent:

- -
<p>
-  Utilitzem:
-  <span>Fulls</span>
-  <span>d'estil</span>
-  <span>en cascada</span>
-</p>
-
- -

En el DOM, el node que correspon al nostre element <p> és un element pare. Els nodes fills són un node de text i els tres nodes corresponen als elements <span>. Els nodes SPAN són també nodes pare, i tenen nodes de text com a nodes fill:

- -
P
-├─ "Utilitzem:"
-├─ SPAN
-| └─ "Fulls"
-├─ SPAN
-| └─ "d’estil"
-└─ SPAN
-   └─ "en cascada"
-
- -

Així és com un navegador interpreta aquest fragment HTML: es confecciona l'arbre DOM anterior i el navegador el representa així:

- -

{{EmbedLiveSample('Una_representació_real_del_DOM', '100%', 55)}}

- - - -

Aplicar CSS al DOM

- -

Suposem que hem afegit una mica de codi CSS al nostre document per a donar-hi estil. Un cop més, l'HTML és el següent:

- -
<p>
-  Utilitzem:
-  <span>Fulls</span>
-  <span>d'estil</span>
-  <span>en cascada</span>
-</p>
- -

Suposem que hi apliquem el CSS següent:

- -
span {
-  border: 1px solid black;
-  background-color: lime;
-}
- -

El navegador analitza el codi HTML i crea un DOM, i després analitza el CSS. Atès que l'única regla disponible en el CSS té un selector span, el navegador pot ordenar el CSS molt de pressa! Aplica aquesta regla a cadascun dels tres <span> i després pinta a la pantalla la representació visual final.

- -

La sortida actualitzada és la següent:

- -

{{EmbedLiveSample('Aplicar_CSS_al_DOM', '100%', 55)}}

- -

En el nostre article Depurar el CSS del mòdul següent, utilitzarem les eines DevTools del navegador per depurar problemes del CSS i coneixerem més sobre com l'interpreta el navegador.

- -

Què passa si un navegador es troba amb CSS que no entén?

- -

En un article anterior hem esmentat que no tots els navegadors implementen el CSS al mateix temps. A més, molta gent no utilitza la versió més recent del navegador. Tenint en compte que el CSS està en desenvolupament constant i, per tant, va per davant del que els navegadors poden reconèixer, et podries preguntar què passa si un navegador troba un selector CSS o una declaració que no reconeix.

- -

La resposta és que no fa res i només passa a la declaració CSS següent.

- -

Si un navegador analitza les teves regles i troba una propietat o un valor que no entén, l'ignora i passa a la declaració següent. Ho fa si has comès un error i has escrit malament una propietat o un valor, o si la propietat o el valor són massa recents i el navegador encara no és compatible.

- -

De la mateixa manera, si un navegador troba un selector que no entén, ignora tota la regla i passa a la següent.

- -

En l’exemple següent hem utilitzat l’ortografia britànica per a la propietat del color, cosa que invalida aquesta propietat perquè no es reconeix. Per tant, el paràgraf no es veu de color blau. Tots els altres CSS s'han aplicat; només s’ignora la línia no vàlida.

- -
-
<p>Vull que aquest text sigui gran, en negreta i blau.</p>
- -
p {
-  font-weight: bold;
-  colour: blue; /* Ortografia incorrecta de la propietat color */
-  font-size: 200%;
-}
-
- -

{{EmbedLiveSample('Skipping_example', '100%', 200)}}

- -

Aquest comportament és molt útil. Significa que pots utilitzar el CSS nou com una millora, perquè no es produirà cap error si no s’entén: pot ser que el navegador entengui la funció nova, o que no l’entengui. Combinat amb el funcionament en cascada i el fet que els navegadors utilitzen l’últim CSS que es troben en un full d’estil quan hi ha dues regles amb la mateixa especificitat, també pots oferir alternatives per a navegadors que no admeten el CSS nou.

- -

Això funciona especialment bé quan vols fer servir un valor força nou i no és compatible amb tots els navegadors. Per exemple, alguns navegadors antics no admeten calc() com a valor. Podríem donar una amplada alternativa a una caixa en píxels i després donar una amplada amb un valor calc() de 100% - 50px. Els navegadors antics faran servir la versió en píxels i ignoraran la línia sobre calc() perquè no l’entenen. Els navegadors nous interpretaran la línia amb píxels i després la substituiran per la línia amb calc(), perquè la línia apareix més tard en la cascada.

- -
.box {
-  width: 500px;
-  width: calc(100% - 50px);
-}
- -

En articles posteriors analitzarem moltes maneres més de donar compatibilitat a diferents navegadors.

- -

Per acabar

- -

Ja has acabat aquest mòdul; només hi ha una cosa més per fer. En l’article següent faràs servir els teus nous coneixements per a canviar el disseny d'un exemple i provar una mica de codi CSS en el procés.

- -

{{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}

- -

En aquest mòdul

- -
    -
  1. Què és el CSS
    2. -
  2. Primers passos amb el CSS
    3. -
  3. Com s'estructura el CSS
    4. -
  4. Com funciona el CSS
    5. -
  5. Aplica els teus nous coneixements
    6. -
diff --git a/files/ca/learn/css/first_steps/getting_started/index.html b/files/ca/learn/css/first_steps/getting_started/index.html new file mode 100644 index 0000000000..dfc1ae29b3 --- /dev/null +++ b/files/ca/learn/css/first_steps/getting_started/index.html @@ -0,0 +1,254 @@ +--- +title: Com començar amb CSS +slug: Learn/CSS/First_steps/Com_començar_amb_CSS +translation_of: Learn/CSS/First_steps/Getting_started +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}
+ +

En aquest article, agafarem un document HTML senzill i hi aplicarem una mica de CSS per aprendre algunes coses pràctiques sobre aquest llenguatge informàtic.

+ + + + + + + + + + + + +
Prerequisits:Coneixements bàsics d'informàtica, tenir el programari bàsic instal·lat, coneixements bàsics de com treballar amb fitxers i d'HTML (mira Introducció a l'HTML).
Objectiu:Comprendre els fonaments bàsics d’enllaçar un document CSS a un fitxer HTML i poder crear un text simple amb CSS.
+ +

Començar amb l'HTML

+ +

El nostre punt de partida és un document HTML. Pots copiar el codi de sota si vols treballar al teu propi ordinador. Desa el codi de sota com a index.html en una carpeta de l'ordinador.

+ +
<!doctype html>
+<html lang="ca">
+<head>
+    <meta charset="utf-8">
+    <title>Introducció al CSS</title>
+</head>
+
+<body>
+
+    <h1>Sóc un títol de nivell u</h1>
+
+    <p>Aquest és un paràgraf de text. Al text hi ha un <span>element span</span>
+i també un enllaç <a href="http://example.com">link</a>.</p>
+
+    <p>Aquest és el segon paràgraf. Conté un element <em>subratllat</em>.</p>
+
+    <ul>
+        <li>Article 1</li>
+        <li>Article 2</li>
+        <li>Article <em>tres</em></li>
+    </ul>
+
+</body>
+
+</html>
+
+ +
+

Nota: Si llegeixes això en un dispositiu o en un entorn on no pots crear fitxers fàcilment, no et preocupis: a continuació es mostren editors de codi en directe per a escriure un exemple de codi aquí a la pàgina.

+
+ +

Afegir CSS al nostre document

+ +

El primer que hem de fer és dir al document HTML que tenim unes regles CSS que volem que utilitzi. Habitualment trobaràs tres maneres diferents d’aplicar CSS a un document HTML, però de moment examinarem la manera més comuna i útil: enllaçar el CSS des de la capçalera del document.

+ +

Crea un fitxer a la mateixa carpeta que el teu document HTML i desa’l com styles.css. L’extensió .css mostra que es tracta d’un fitxer CSS.

+ +

Per a enllaçar styles.css a index.html, afegeix la línia següent en algun lloc de la capçalera ({{htmlelement("head")}}) del document HTML:

+ +
<link rel="stylesheet" href="styles.css">
+ +

Aquest element {{htmlelement("link")}} indica al navegador que hi ha un full d'estil i utilitza l'atribut rel i la ubicació d'aquest full d'estil com a valor de l'atribut href. Pots provar si funciona el CSS afegint una regla a styles.css. Fent servir l'editor de codi, afegeix el següent al fitxer CSS:

+ +
h1 {
+  color: red;
+}
+ +

Desa els fitxers HTML i CSS i torna a carregar la pàgina en un navegador web. Ara el títol d’encapçalament de primer nivell a la part superior del document s'ha de veure de color vermell. Si això succeeix, enhorabona: has aplicat amb èxit una mica de CSS a un document HTML. Si això no passa, comprova ho has escrit tot correctament.

+ +

Pots continuar treballant amb styles.css localment, o bé pots utilitzar el nostre editor interactiu, que trobaràs a continuació, per continuar amb aquest tutorial. L’editor interactiu actua com si el CSS del primer quadre estigués vinculat al document HTML, tal com passa amb el nostre document anterior.

+ +

Aplicar estil als elements HTML

+ +

En tornar el títol vermell, ja hem demostrat que podem seleccionar un element HTML i aplicar-hi estil. Ho fem delimitant un selector d’elements: un seleccionador que coincideix directament amb un nom d’element HTML. Per a seleccionar tots els paràgrafs del document, utilitzaries el selector p. Per a convertir tots els paràgrafs en verd, faries servir:

+ +
p {
+  color: green;
+}
+ +

Pots seleccionar diversos selectors alhora, separats amb una coma. Si volem que tots els paràgrafs i tots els elements de la llista siguin verds, la regla ha de ser la següent:

+ +
p, li {
+    color: green;
+}
+ +

Prova-ho a l’editor interactiu següent (edita els quadres de codi) o al teu document CSS local.

+ +

{{EmbedGHLiveSample("css-examples/learn/getting-started/started1.html", '100%', 900)}} 

+ +

Canviar el comportament predeterminat dels elements

+ +

Quan observem un document HTML ben marcat, fins i tot una cosa tan simple com el nostre exemple, podem veure que el navegador afegeix algun estil per defecte per fer que l’HTML sigui llegible. Els títols són grans i en lletra negreta i la nostra llista inclou vinyetes. Això passa perquè els navegadors tenen fulls d’estil interns que contenen estils predeterminats que s’apliquen per defecte a totes les pàgines; sense això no hi hauria distincions dins el text i hauríem d’aplicar estil a tot des de zero. Tots els navegadors moderns mostren el contingut HTML de la mateixa manera per defecte.

+ +

Tanmateix, sovint voldràs alguna cosa que no sigui la tria que ha fet el navegador. Això es pot fer escollint només l’element HTML que vols canviar i fent servir una regla CSS per a canviar-ne l’aspecte.  Un bon exemple és <ul>, que marca una llista no ordenada. Mostra boletes en els elements de llista, però si decideixo que no les vull, les puc eliminar:

+ +
li {
+  list-style-type: none;
+}
+ +

Prova d’afegir això al teu CSS.

+ +

És una bona opció consultar la propietat list-style-type a la pàgina de MDN per veure quins valors admet. Per provar uns valors diferents, dona una ullada a la pàgina list-style-type, on trobaràs un exemple interactiu a la part superior de la pàgina i, a continuació, es detallen tots els valors que s’admeten.

+ +

Si consultes aquesta pàgina, descobriràs que, a banda d’eliminar les vinyetes de la llista, també les pots canviar: prova de canviar-les per vinyetes quadrades amb el valor square.

+ +

Afegir una classe

+ +

Fins al moment hem dissenyat elements basats en els seus noms en HTML. Això funciona sempre que vulguis que tots els elements d’aquest tipus del document presentin el mateix aspecte. Moltes vegades no és el cas, així que hauràs de trobar la manera de seleccionar un subconjunt dels elements sense canviar els altres. La manera més habitual de fer-ho és afegir una classe a l'element HTML i delimitar aquesta classe.

+ +

Al teu document HTML, afegeix un atribut de classe al segon element de la llista. La teva llista ara es veurà així:

+ +
<ul>
+  <li>Article 1</li>
+  <li class="special">Item two</li>
+  <li>Article <em>tres</em></li>
+</ul>
+ +

Al teu CSS pots seleccionar la classe special creant un selector que comenci amb un punt. Afegeix el següent al teu fitxer CSS:

+ +
.special {
+  color: orange;
+  font-weight: bold;
+}
+ +

Desa i actualitza per veure quin és el resultat.

+ +

Pots aplicar la classe special a qualsevol element de la pàgina que vulguis que tingui el mateix aspecte que aquesta llista. Per exemple, potser vols que l’element <span> del paràgraf també es vegi de color taronja i en negreta. Prova d’afegir-hi una classe special i torna a carregar la pàgina, i observa què passa.

+ +

De vegades veuràs regles amb un selector que enumera el selector d’elements HTML juntament amb la classe:

+ +
li.special {
+  color: orange;
+  font-weight: bold;
+}
+ +

Aquesta sintaxi vol dir «selecciona qualsevol element li que tingui una classe special». Si ho fas així, ja no podràs aplicar la classe a un element <span> o qualsevol altre element simplement afegint-hi la classe; hauràs d’afegir aquest element a la llista de selectors:

+ +
li.special,
+span.special {
+  color: orange;
+  font-weight: bold;
+}
+ +

Com pots imaginar, algunes classes podrien aplicar-se a molts elements i no vols haver d’editar el CSS cada vegada que calgui adoptar un estil nou. Per tant, de vegades és millor deixar de banda l’element i simplement fer referència a la classe, tret que sàpigues que vols crear algunes regles especials per a un sol element i potser vols assegurar-te que no s’apliquen a altres coses.

+ +

Aplicar estil en funció de la ubicació en un document

+ +

Hi ha vegades que voldràs que alguna cosa sembli diferent segons el lloc en què es troba dins el document. Hi ha diversos selectors que poden ajudar en aquesta situació, però ara per ara només ens fixarem en un parell. Al nostre document hi ha dos elements <em>: un dins d’un paràgraf i l’altre dins d’una llista. Per a seleccionar només un <em> que estigui situat dins d'un element <li>, pots utilitzar un selector anomenat combinador de descendents, que simplement pren la forma d'un espai entre dos altres selectors.

+ +

Afegeix la regla següent al teu full d’estil.

+ +
li em {
+  color: rebeccapurple;
+}
+ +

Aquest selector seleccionarà qualsevol element <em> que es trobi dins un (descendent de) <li>. Per tant, al document d’exemple, hauries de trobar que el <em> de l’element de la tercera llista és morat, però el que hi ha dins del paràgraf no canvia.

+ +

Una altra cosa que potser t'agradaria provar és aplicar estil a un paràgraf que surt immediatament després d'un títol d’encapçalament del mateix nivell de jerarquia de l'HTML. Per fer-ho, col·loca un + (un combinador de germans adjacents) entre els selectors.

+ +

Prova d'afegir aquesta regla al teu full d'estil, també:

+ +
h1 + p {
+  font-size: 200%;
+}
+ +

L'exemple en directe següent inclou les dues regles anteriors. Prova d'afegir una regla perquè un element span es mostri de color vermell si és dins d'un element paràgraf. Sabràs que ho has fet bé si element span del primer paràgraf és vermell, però el que apareix al primer element de llista no canvia de color.

+ +

{{EmbedGHLiveSample("css-examples/learn/getting-started/started2.html", '100%', 1100)}}

+ +
+

Nota: Com pots veure, el CSS ens ofereix diverses maneres de seleccionar elements, i fins ara només n’hem gratat la superfície! Analitzarem amb detall tots aquests selectors i molts més en els nostres articles sobre selectors que trobaràs més endavant en el curs.

+
+ +

Aplicar estil en funció de l’estat

+ +

El darrer tipus d’aplicació d’estil que analitzarem en aquest article és la capacitat d’aplicar estil a les coses en funció del seu estat. Un exemple senzill d’això són els enllaços. Quan dissenyem un enllaç, hem de seleccionar l’element <a> (anchor). Això té diferents estats en funció de si no s’ha visitat, s’ha visitat, s’hi passa pel damunt, se selecciona amb el teclat o s'hi fa clic (s’activa). Pots fer servir el CSS per a dirigir-te a aquests estats diferents: el CSS que trobaràs a continuació estableix els enllaços no visitats en rosa, i els visitats en verd.

+ +
a:link {
+  color: pink;
+}
+
+a:visited {
+  color: green;
+}
+ +

Pots canviar l'aparença de l'enllaç quan l'usuari hi col·loca el punter a sobre, per exemple, eliminar-ne el subratllat, que s'aconsegueix amb la regla següent:

+ +
a:hover {
+  text-decoration: none;
+}
+ +

A l’exemple en directe següent pots jugar amb diferents valors per als diversos estats d’un enllaç. Hi hem afegit les regles anteriors, i ens adonem que el color rosa és força clar i difícil de llegir; per què no el canviem per un color que vagi més bé? Es poden posar els enllaços en negreta?

+ +

{{EmbedGHLiveSample("css-examples/learn/getting-started/started3.html", '100%', 900)}} 

+ +

Hem eliminat el subratllat del nostre enllaç quan s’hi passa el punter del ratolí per sobre. Pots eliminar el subratllat de tots els estats d’un enllaç. Val la pena recordar, però, que en un lloc web real, vols que els visitants sàpiguen que un enllaç és un enllaç. Deixar el subratllat a lloc pot ser una pista important perquè la gent s’adoni que pot fer clic en un text dins d’un paràgraf; aquest és el comportament al qual estan acostumats. Com tot en CSS, amb els canvis es pot fer que el document sigui menys accessible; tractarem de posar en evidència els entrebancs potencials en els llocs adequats.

+ +
+

Nota: sovint veuràs que en aquests articles i en l’MDN es menciona l'accessibilitat. Quan parlem d’accessibilitat ens referim al requisit que les nostres pàgines web siguin comprensibles i utilitzables per tothom.

+ +

El teu visitant pot entrar a la pàgina web des d'un ordinador amb un ratolí o un trackpad, o des d’un telèfon amb pantalla tàctil. O potser utilitza un lector de pantalla que llegeix el contingut del document; o necessita utilitzar una mida de lletra del text molt més gran; o bé navega pel lloc web només amb el teclat.

+ +

Un document HTML senzill és en general accessible per a tothom, i a l'hora d’aplicar estil a aquest document, és important que no el facis menys accessible.

+
+ +

Combinar selectors i combinadors

+ +

Val la pena assenyalar que pots combinar diversos selectors i combinadors. Per exemple:

+ +
/* selecciona qualsevol <span> que estigui dins d'un <p>, que està dins d'un <article> */
+article p span { ... }
+
+/* Selecciona qualsevol <p> que vagi directament després d'un <ul>, que vagi directament després d'un <h1> */
+h1 + ul + p { ... }
+ +

També pots combinar diversos tipus. Intenta afegir el següent al teu codi:

+ +
body h1 + p .special {
+  color: yellow;
+  background-color: black;
+  padding: 5px;
+}
+ +

Aplicarà estil a qualsevol element amb una classe special que es trobi dins d’un element <p>, que vingui just després d’un element <h1>> que es trobi dins del <body>. Uf!

+ +

A l'HTML original que t’hem proporcionat, l'únic element amb estil és <span class="special">.

+ +

No et preocupis si et sembla complicat en aquest moment, començaràs a entendre-ho ben aviat de seguida que treballis més amb el CSS.

+ +

Tancant

+ +

En aquest tutorial hem analitzat diverses maneres d’aplicar estil a un document amb CSS. Anirem desenvolupant aquests coneixements a mesura que avancem amb la resta d'articles. Tanmateix, ja en coneixes prou per a aplicar estil al text, aplicar CSS a partir de diferents maneres de seleccionar els elements del document i cercar propietats i valors en la documentació MDN.

+ +

Al proper article analitzarem com s’estructura el CSS.

+ +

{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}

+ +

En aquest mòdul

+ +
    +
  1. Què és el CSS
    2. +
  2. Primers passos amb el CSS
    3. +
  3. Com s'estructura el CSS
    4. +
  4. Com funciona el CSS
    5. +
  5. Aplica els teus nous coneixements
    6. +
diff --git a/files/ca/learn/css/first_steps/how_css_is_structured/index.html b/files/ca/learn/css/first_steps/how_css_is_structured/index.html new file mode 100644 index 0000000000..6c216af68c --- /dev/null +++ b/files/ca/learn/css/first_steps/how_css_is_structured/index.html @@ -0,0 +1,512 @@ +--- +title: Com estructurar el CSS +slug: Learn/CSS/First_steps/Com_estructurar_el_CSS +translation_of: Learn/CSS/First_steps/How_CSS_is_structured +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}
+ +

Ara que tens una idea sobre què és el CSS i les bases de com fer-lo servir, és hora d’aprofundir una mica més en l’estructura pròpia del llenguatge. Ja hem vist molts dels conceptes que s'esmenten en aquest article; pots recapitular si t’entrebanques amb els conceptes que et trobes a partir d’ara.

+ + + + + + + + + + + + +
Prerequisits:Coneixements bàsics d'informàtica, tenir el programari bàsic instal·lat, coneixements bàsics de com treballar amb fitxers i d'HTML (mira Introducció a l'HTML) i nocions de com funciona el CSS.
Objectiu:Aprendre amb detall les estructures de sintaxi fonamentals del CSS.
+ +

Aplicar CSS a l'HTML

+ +

El primer que analitzarem són els tres mètodes d’aplicació del CSS a un document.

+ +

Fulls d’estils externs

+ +

En l’article Primers passos amb el CSS hem enllaçat un full d’estil extern a la nostra pàgina. Aquest és el mètode més comú i útil d’adjuntar CSS a un document perquè pots enllaçar el CSS a diverses pàgines, cosa que et permet d’aplicar-hi estil a totes amb el mateix full d’estil. En la majoria dels casos, les diverses pàgines d’un lloc web presentaran un aspecte molt semblant i, per tant, pots utilitzar el mateix conjunt de regles per a la presentació bàsica.

+ +

Un full d’estil extern és quan el CSS està escrit en un fitxer independent amb l’extensió .css i s'hi fa referència des d’un element HTML <link>:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>El meu experiment amb CSS</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>Hola món!</h1>
+    <p>Aquest és el meu primer exemple amb CSS</p>
+  </body>
+</html>
+ +

El fitxer CSS podria presentar un aspecte així:

+ +
h1 {
+  color: blue;
+  background-color: yellow;
+  border: 1px solid black;
+}
+
+p {
+  color: red;
+}
+ +

L'atribut href de l'element {{htmlelement ("link")}} necessita fer referència a un fitxer del sistema de fitxers.

+ +

A l'exemple anterior, el fitxer CSS es troba a la mateixa carpeta que el document HTML, però el pots col·locar en un altre lloc i ajustar la ruta especificada per a adaptar-s’hi, per exemple:

+ +
<!-- Dins d’un subdirector anomenat styles dins del directori actual -->
+<link rel="stylesheet" href="styles/style.css">
+
+<!-- Dins d’un subdirector anomenat general, que es troba en un subdirector anomenat styles, dins del directori actual -->
+<link rel="stylesheet" href="styles/general/style.css">
+
+<!-- Puja un nivell de directori i, a continuació, a un subdirector anomenat styles -->
+<link rel="stylesheet" href="../styles/style.css">
+ +

Fulls d’estil interns

+ +

Un full d’estil intern és on no hi ha cap fitxer CSS extern, sinó que el CSS se situa dins d’un element {{htmlelement("style")}} que hi ha dins de l’HTML {{htmlelement("head")}}.

+ +

Així doncs, l’HTML quedaria així:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>El meu experiment amb CSS</title>
+    <style>
+      h1 {
+        color: blue;
+        background-color: yellow;
+        border: 1px solid black;
+      }
+
+      p {
+        color: red;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Hola món!</h1>
+    <p>Aquest és el meu primer exemple amb CSS</p>
+  </body>
+</html>
+ +

Això pot ser útil en algunes circumstàncies (potser treballes amb un sistema de gestió de continguts en què no pots modificar els fitxers CSS directament), però no és tan eficient com els fulls d'estil externs; en un lloc web, el CSS s'hauria de canviar individualment a cada pàgina i actualitzar-se en diversos llocs si s’hi haguessin de fer canvis.

+ +

Estils en línia

+ +

Els estils en línia són declaracions CSS que afecten només un element, que està contingut dins d'un atribut style:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>El meu experiment amb CSS </title>
+  </head>
+  <body>
+    <h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hola món!</h1>
+    <p style="color:red;">Aquest és el meu primer exemple amb CSS</p>
+  </body>
+</html>
+ +

Si et plau, no ho facis!, tret que realment ho hagis de fer. És molt dolent per al manteniment (potser hauràs d’actualitzar la mateixa informació diverses vegades per cada document) i també barreges la informació de presentació del CSS amb la informació d’estructuració de l’HTML, i dificultes la llegibilitat i comprensió del codi. Mantenir diferents tipus de codificació separats permet una feina molt més fàcil a tots aquells que treballen en el codi.

+ +

Hi ha llocs web en què els estils en línia són més comuns, o fins i tot recomanables. Pot ser que hagis de recórrer a utilitzar-los si el teu entorn de treball és molt restrictiu (potser el teu CMS només et permet editar el cos de l'HTML). També veuràs que s’utilitzen molt al correu electrònic per a obtenir compatibilitat amb tants clients de correu electrònic com sigui possible.

+ +

Jugar amb el CSS en aquest article

+ +

En aquest article hi ha molt de CSS. Per fer-ho, et recomanem que creïs un directori/carpeta al teu ordinador i, a dins, hi creïs una còpia dels dos fitxers següents:

+ +

index.html:

+ +
<!DOCTYPE html>
+<html lang="ca">
+  <head>
+    <meta charset="utf-8">
+    <title>El meu experiment amb CSS</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+
+    <p>Crea el teu HTML de prova aquí</p>
+
+  </body>
+</html>
+ +

styles.css:

+ +
/* Crea el teu CSS de prova aquí */
+
+p {
+  color: red;
+}
+ +

Aleshores, quan vulguis experimentar amb un CSS, substitueix el contingut del <body> de l’HTML per un altre HTML, i comença per afegir el codi CSS per a donar-hi estil dins del fitxer CSS.

+ +

Si no utilitzes un sistema amb què puguis crear fitxers fàcilment, pots utilitzar l'editor interactiu següent per experimentar.

+ +

{{EmbedGHLiveSample("css-examples/learn/getting-started/experiment-sandbox.html", '100%', 800)}}

+ +

Continua i diverteix-te!

+ +

Selectors

+ +

No es pot parlar de CSS sense parlar de selectors, i ja n'hem descobert diversos tipus al tutorial de Primers passos amb el CSS. Un selector és la manera amb què seleccionem alguna cosa del document HTML per a aplicar-hi estils. Si els teus estils no s’apliquen, és probable que el selector no coincideixi amb el que creus que hauria de coincidir.

+ +

Cada regla CSS comença amb un selector o una llista de selectors que indica al navegador a quin element o elements han d’aplicar-se les regles. Totes les mostres següents són exemples de selectors o llistes de selectors vàlids.

+ +
h1
+a:link
+.manythings
+#onething
+*
+.box p
+.box p:first-child
+h1, h2, .intro
+ +

Prova de crear algunes regles CSS que utilitzin els selectors anteriors i algun codi HTML al qual aplicar-hi els estils. Si no saps què significa alguna de les sintaxis anterior, prova de buscar-la a MDN.

+ +
+

Nota: Aprendràs molt més sobre els selectors als nostres tutorials Selectors CSS, al mòdul següent.

+
+ +

Especificitat

+ +

Sovint hi haurà escenaris en què dos selectors podrien seleccionar el mateix element HTML. Considera el full d’estil següent, en què hi ha una regla amb un selector p que mostrarà els paràgrafs de color blau, i també una classe que mostrarà els elements seleccionats de color vermell.

+ +
.special {
+  color: red;
+}
+
+p {
+  color: blue;
+}
+ +

Diguem que al document HTML hi ha un paràgraf amb una classe special. Totes dues regles es podrien aplicar; quina guanyaria? De quin color creus que es veurà el nostre paràgraf?

+ +
<p class="special">De quin color sóc?</p>
+ +

El llenguatge CSS té regles per a controlar quina regla guanyarà en cas de collisió; s'anomenen cascada i especificitat. Al bloc de codi següent hem definit dues regles per al selector p, però el paràgraf acaba sent de color blau. Això és perquè la declaració que hauria de fer que es veiés de color blau apareix més tard al full d’estil, i els estils posteriors anul·len els anteriors. És la cascada en acció.

+ +
p {
+  color: red;
+}
+
+p {
+  color: blue;
+}
+ +

Tanmateix, en el cas del nostre exemple anterior, amb el selector de classes i el selector d’elements, la classe guanya, i el paràgraf es veu de color vermell, encara que apareix abans en el full d’estil. Es diu que una classe és més específica, o té més especificitat, que un selector d’elements, de manera que guanya.

+ +

Prova l'experiment anterior: afegeix el codi HTML al teu experiment i, a continuació, afegeix les dues regles p { ... } al teu full d'estil. A continuació, canvia el primer selector de p per .special i observa com canvia l’estil.

+ +

Les regles d’especificitat i cascada poden semblar una mica complicades al principi, però són més fàcils d’entendre a mesura que s'avança amb el CSS. A l'article Cascada i herència, al qual accediràs al mòdul següent, s'explica amb més detall, entre altres coses, la manera de calcular l’especificitat. Ara per ara, només has de recordar que existeix, i que és possible que de vegades el CSS no s'apliqui tal com esperes perquè alguna cosa del full d'estil té una especificitat més alta. Identificar que hi ha més d'una regla que pot aplicar-se a un element és el primer pas per a solucionar aquests problemes.

+ +

Propietats i valors

+ +

El CSS consta de dos blocs de construcció bàsics:

+ + + +

En la imatge següent es ressalten una sola propietat i el seu valor. El nom de la propietat és color i el valor blue.

+ +

Una declaració del CSS ressaltada

+ +

Una propietat emparellada amb un valor s'anomena declaració CSS. Les declaracions CSS es posen dins dels blocs de declaració CSS. Aquesta imatge següent mostra el nostre CSS amb el bloc de declaracions ressaltat.

+ +

Un bloc de declaracions ressaltat

+ +

Finalment, els blocs de declaració CSS es combinen amb selectors per a produir conjunts de regles CSS (o regles CSS). La nostra imatge conté dues regles, una per al selector h1 i una altra per al selector p. La regla per a h1 està ressaltada.

+ +

La regla per a h1 està ressaltada

+ +

Definir propietats CSS amb valors específics és la funció principal del llenguatge CSS. El motor CSS calcula quines declaracions s’apliquen a cada element d’una pàgina per tal de definir-la i donar-hi l’estil adequat.

+ +
+

Important: Les propietats i valors de CSS són sensibles a majúscules i minúscules. Cada parella de propietat i valor es separa per un dos punts (:).

+
+ +

Prova de cercar diferents valors de les propietats següents i escriu regles CSS que s’apliquin a diferents elements HTML:

+ + + +
+

Important: Si una propietat és desconeguda o si un valor no és vàlid per a una propietat determinada, es considera que la declaració no és vàlida i el motor CSS del navegador la ignora completament.

+
+ +
+

Important: En CSS (i altres estàndards web) s'ha acceptat l'ortografia nord-americana com a estàndard per a resoldre la incertesa lingüística. Per exemple, la propietat color sempre s'ha d'escriure color. Si n’escrivim la versió britànica colour, no funcionarà.

+
+ +

Funcions

+ +

Si bé la majoria dels valors són paraules clau o valors numèrics relativament simples, hi ha alguns valors que prenen la forma d’una funció. Un exemple seria la funció calc(). Aquesta funció permet fer operacions matemàtiques senzilles des del CSS, per exemple:

+ +
+
<div class="outer"><div class="box">la caixa interior és de 90% - 30px.</div></div>
+ +
.outer {
+  border: 5px solid black;
+}
+
+.box {
+  padding: 10px;
+  width: calc(90% - 30px);
+  background-color: rebeccapurple;
+  color: white;
+}
+
+ +

Això es presenta així:

+ +

{{EmbedLiveSample('calc_example', '100%', 200)}}

+ +

Una funció consisteix en el nom de la funció i, a continuació, uns parèntesis entre els quals es col·loquen els valors permesos per a aquesta funció. En el cas de l'exemple calc() anterior, volem que l'amplada d'aquesta caixa sigui el 90% de l'amplada del bloc que la conté, menys 30 píxels. No és un valor que es pugui calcular d’antuvi i senzillament introduir-lo en el CSS corresponent, perquè no sabem quin serà aquest 90%. Com en tots els valors, en la pàgina corresponent de MDN hi ha exemples d’ús perquè puguis veure com funciona aquesta funció.

+ +

Un altre exemple serien els diversos valors de {{cssxref("transform")}}, com ara rotate().

+ +
+
<div class="box"></div>
+ +
.box {
+  margin: 30px;
+  width: 100px;
+  height: 100px;
+  background-color: rebeccapurple;
+  transform: rotate(0.8turn)
+}
+
+ +

La sortida del codi anterior és la següent:

+ +

{{EmbedLiveSample('transform_example', '100%', 200)}}

+ +

Prova de cercar diferents valors de les propietats següents i escriu regles CSS que s’apliquin a diferents elements HTML:

+ + + +

@rules

+ +

Les @rules (llegit «at-rules», en anglès) proporcionen instruccions sobre com ha de comportar-se el CSS, o quin CSS s'ha d'aplicar. Algunes @rules són senzilles i es formen només amb el nom de la regla i el valor. Per exemple, per a importar un full d’estil addicional al teu full d’estil CSS principal, pots utilitzar @import:

+ +
@import 'styles2.css';
+ +

Una de les @rules més comunes que trobaràs és @media, que et permet crear consultes a mèdia (o media queries, en anglès) per a aplicar CSS només quan determinades condicions són certes (per exemple, quan la resolució de la pantalla està per sobre d’una quantitat determinada, o la pantalla és més ampla que una certa amplada).

+ +

Al CSS següent hi ha un full d’estil que dona a l’element <body> un color de fons rosat. Tot i això, després utilitzem @media per a crear una secció al nostre full d’estil que només s’aplicarà als navegadors amb una visualització més ampla de 30em. Si el navegador és més ample de 30em, el color de fons serà blau.

+ +
body {
+  background-color: pink;
+}
+
+@media (min-width: 30em) {
+  body {
+    background-color: blue;
+  }
+}
+ +

Trobaràs altres @rules al llarg d’aquests tutorials.

+ +

Prova d’afegir una consulta a un mèdia al teu CSS que canviï els estils en funció de l’amplada de la visualització. Canvia l'amplada de la finestra del navegador per veure’n el resultat.

+ +

Propietats abreviades

+ +

Algunes propietats com {{cssxref ("font")}}, {{cssxref ("background")}}, {{cssxref ("padding")}}, {{cssxref ("border")}} i {{cssxref ("margin")}} s’anomenen propietats abreviades: això és perquè permeten establir diversos valors de propietat en una sola línia, que estalvia temps i aconsegueix que el codi es vegi més net.

+ +

Per exemple, aquesta línia:

+ +
/* En les propietats abreviades de 4 valors, com ara margin i padding, s'apliquen els valors
+   a la part superior, dreta, inferior, esquerra (en sentit horari des de la part superior). També hi ha altres
+   propietats abreviades, per exemple les propietats abreviades de 2 valors, que estableixen una àrea de farciment/marge
+   a la part superior/inferior, a l'esquerra/a la dreta */
+padding: 10px 15px 15px 5px;
+ +

Fa el mateix que totes aquestes juntes:

+ +
padding-top: 10px;
+padding-right: 15px;
+padding-bottom: 15px;
+padding-left: 5px;
+ +

Mentre que aquesta línia:

+ +
background: red url(bg-graphic.png) 10px 10px repeat-x fixed;
+ +

Fa el mateix que totes aquestes juntes:

+ +
background-color: red;
+background-image: url(bg-graphic.png);
+background-position: 10px 10px;
+background-repeat: repeat-x;
+background-scroll: fixed;
+ +

No intentarem ensenyar-les de manera exhaustiva ara; trobaràs molts exemples més endavant en el curs i et recomanem que cerquis més noms de propietats abreviades clau a les nostres referències CSS per a obtenir-ne més informació.

+ +

Prova d’afegir les declaracions anteriors al teu CSS per veure com afecta a l’estil del teu HTML. Prova d’experimentar amb valors diferents.

+ +
+

Atenció: Mentre que les propietats abreviades sovint et permeten ometre els valors, després restabliran els valors que no incloguis als seus valors inicials. D’aquesta manera es garanteix l’ús d’un conjunt de valors coherent. Però et pot confondre si esperes que la propietat abreviada només canviï els valors que has marcat.

+
+ +

Comentaris

+ +

De la mateixa manera que amb l’HTML, et convidem a posar comentaris al teu CSS per a ajudar-te a comprendre com funciona el teu codi en tornar-hi al cap d’uns mesos, i per a ajudar altres que treballin sobre aquest codi.

+ +

Els comentaris en CSS comencen amb /* i acaben amb */. Al bloc de codi següent hem utilitzat comentaris per marcar l'inici de diverses seccions de codi diferents. És útil per a ajudar-te a orientar-te pel codi a mesura que n’augmenta l’extensió. Cerca els comentaris al teu editor de codi.

+ +
/* Manejar una aplicació d’estil als elements bàsics */
+/* -------------------------------------------------------------------------------------------- */
+body {
+  font: 1em/150% Helvetica, Arial, sans-serif;
+  padding: 1em;
+  margin: 0 auto;
+  max-width: 33em;
+}
+
+@media (min-width: 70em) {
+  /* Posem en cas especial la mida del tipus de lletra general. En una pantalla gran o en una finestra,
+     augmentem la mida de la lletra per a facilitar la lectura */
+  body {
+    font-size: 130%;
+  }
+}
+
+h1 {font-size: 1.5em;}
+
+/* Manejar elements específics que es troben al DOM */
+/* -------------------------------------------------------------------------------------------- */
+div p, #id:first-line {
+  background-color: red;
+  border-radius: 3px;
+}
+
+div p {
+  margin: 0;
+  padding: 1em;
+}
+
+div p + p {
+  padding-top: 0;
+}
+ +

Els comentaris també són útils per a inhabilitar temporalment algunes parts del codi amb finalitats de prova, per exemple, si intentes trobar quina part del teu codi causa un error. A l’exemple següent hem «comentat» (posat com a comentaris) les regles per al selector .special.

+ +
/*.special {
+  color: red;
+}*/
+
+p {
+  color: blue;
+}
+ +

Afegeix alguns comentaris al teu CSS per acostumar-te a utilitzar-los.

+ +

Espais en blanc

+ +

Els espais en blanc són els espais, els sagnats de text i les línies noves. De la mateixa manera que en l’HTML, el navegador ignora els espais en blanc del teu CSS. El valor dels espais en blanc està en que són molt útils per a millorar la llegibilitat.

+ +

En l'exemple que trobaràs a continuació, cada declaració (i inici/final de regla) és en una línia de text pròpia. Probablement és una bona manera d’escriure el CSS, perquè fa que sigui fàcil de mantenir i d'entendre:

+ +
body {
+  font: 1em/150% Helvetica, Arial, sans-serif;
+  padding: 1em;
+  margin: 0 auto;
+  max-width: 33em;
+}
+
+@media (min-width: 70em) {
+  body {
+    font-size: 130%;
+  }
+}
+
+h1 {
+  font-size: 1.5em;
+}
+
+div p,
+#id:first-line {
+  background-color: red;
+  border-radius: 3px;
+}
+
+div p {
+  margin: 0;
+  padding: 1em;
+}
+
+div p + p {
+  padding-top: 0;
+}
+
+ +

Podries escriure exactament el mateix CSS de la manera següent, eliminant-ne la majoria d’espais en blanc. Aquest codi és funcionalment idèntic al del primer exemple, però segur que estàs d’acord que és una mica més feixuc de llegir:

+ +
body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;}
+@media (min-width: 70em) { body {font-size: 130%;} }
+
+h1 {font-size: 1.5em;}
+
+div p, #id:first-line {background-color: red; border-radius: 3px;}
+div p {margin: 0; padding: 1em;}
+div p + p {padding-top: 0;}
+
+ +

La disposició del codi que tries sol ser una preferència personal, tot i que quan comences a treballar en equip, és possible que trobis que l’equip té la seva guia d’estil pròpia que especifica una convenció acordada a seguir.

+ +
+

Important: Has de tenir cura amb l’espai en blanc que hi ha d’haver entre una propietat del CSS i el seu valor.

+
+ +

Per exemple, les declaracions següents són vàlides en CSS:

+ +
margin: 0 auto;
+padding-left: 10px;
+ +

Però les següents no són vàlids:

+ +
margin: 0auto;
+padding- left: 10px;
+ +

Veus els errors d'espaiat? 0auto no es reconeix com a valor vàlid per a la propietat margin (0 i auto són dos valors separats), i el navegador no reconeix padding- com a propietat vàlida. El nom correcte de la propietat (padding-left) ha quedat separat per un espai perdut.

+ +

Sempre t'has d'assegurar de separar valors diferenciats els uns dels altres com a mínim per un espai, però mantenir els noms de la propietat i els valors de propietat junts, com cadenes ininterrompudes.

+ +

Prova de jugar amb espais en blanc al teu CSS per veure què es trenca i què no.

+ +

Què segueix?

+ +

És útil entendre una mica com el navegador pren els teus codis HTML i CSS i els converteix en una pàgina web, així que en l’article següent, (Com funciona el CSS), donarem una ullada a aquest procés.

+ +

{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}

+ +

En aquest mòdul

+ +
    +
  1. Què és el CSS
    2. +
  2. Primers passos amb el CSS
    3. +
  3. Com s'estructura el CSS
    4. +
  4. Com funciona el CSS
    5. +
  5. Aplica els teus nous coneixements
    6. +
diff --git a/files/ca/learn/css/first_steps/how_css_works/index.html b/files/ca/learn/css/first_steps/how_css_works/index.html new file mode 100644 index 0000000000..9621d2c21c --- /dev/null +++ b/files/ca/learn/css/first_steps/how_css_works/index.html @@ -0,0 +1,156 @@ +--- +title: Com funciona el CSS +slug: Learn/CSS/First_steps/Com_funciona_el_CSS +translation_of: Learn/CSS/First_steps/How_CSS_works +--- +

{{LearnSidebar}}
+ {{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}

+ +

Hem après els conceptes bàsics de CSS, per a què serveix i com escriure fulls d'estil senzills. En aquest article veurem com un navegador pren els llenguatges CSS i HTML i els converteix en una pàgina web.

+ + + + + + + + + + + + +
Prerequisits:Coneixements bàsics d'informàtica, tenir el programari bàsic instal·lat, coneixements bàsics de com treballar amb fitxers i d'HTML (mira Introducció a l'HTML).
Objectiu:Entendre els conceptes bàsics de com el navegador analitza els llenguatges CSS i HTML i què passa quan un navegador troba un CSS que no entén.
+ +

Com funciona realment el CSS?

+ +

Quan un navegador mostra un document, ha de combinar el contingut del document amb la informació d’estil. Processa el document en un seguit d'etapes, que enumerarem a continuació. Tingues present que aquesta és una versió molt simplificada de què passa quan un navegador carrega una pàgina web, i que els diversos navegadors gestionen el procés de maneres diferents. Però això és més o menys el que succeeix.

+ +
    +
  1. El navegador carrega el codi HTML (per exemple, el rep de la xarxa).
    2. +
  2. Converteix el codi {{Glossary("HTML")}} en un model d'objectes del document (document object model o {{Glossary("DOM")}}). El DOM representa el document a la memòria de l'ordinador. L’explicarem amb més detall en la secció següent.
    3. +
  3. El navegador recupera la majoria dels recursos als quals està vinculat el document HTML, com ara imatges i vídeos incrustats... i CSS enllaçats. El JavaScript es tracta una mica més endavant en el procés, i no en parlarem aquí per no embolicar les coses.
    4. +
  4. El navegador analitza el CSS recuperat i ordena les diferents regles segons els tipus de selector en diferents «cubetes». Per exemple: element, classe, ID, etc. A partir dels selectors que troba, calcula quines regles s’han d’aplicar als nodes del DOM i hi atribueix l’estil segons sigui necessari (aquest pas intermedi s’anomena arbre de renderització).
    5. +
  5. L'arbre de representació presenta l'estructura en què ha d'aparèixer després que s'apliquin les regles.
    6. +
  6. La presentació visual de la pàgina es mostra a la pantalla (aquesta etapa s’anomena pintura).
    7. +
+ +

El diagrama següent ofereix una visió senzilla del procés.

+ +

+ +

Sobre el DOM

+ +

Un DOM té una estructura en forma d'arbre. Cada element, atribut i fragment de text del llenguatge de marcatge es converteix en un {{Glossary("Node/DOM","node DOM")}} en l'estructura de l'arbre. Els nodes es defineixen per la seva relació amb els altres nodes del DOM. Alguns elements són pares de nodes secundaris, i els nodes secundaris tenen nodes germans.

+ +

Entendre el DOM t'ajuda a dissenyar, depurar i mantenir el teu CSS perquè el DOM és el lloc on es troba el CSS i el contingut del document. Quan comencis a treballar amb les eines DevTools (o eines del desenvolupador) del navegador, et desplaçaràs pel DOM mentre selecciones els elements per veure quines regles s'apliquen.

+ +

Una representació real del DOM

+ +

En lloc d’una llarga i avorrida explicació, vegem amb un exemple com un fragment HTML es converteix en un DOM.

+ +

Prenguem el codi HTML següent:

+ +
<p>
+  Utilitzem:
+  <span>Fulls</span>
+  <span>d'estil</span>
+  <span>en cascada</span>
+</p>
+
+ +

En el DOM, el node que correspon al nostre element <p> és un element pare. Els nodes fills són un node de text i els tres nodes corresponen als elements <span>. Els nodes SPAN són també nodes pare, i tenen nodes de text com a nodes fill:

+ +
P
+├─ "Utilitzem:"
+├─ SPAN
+| └─ "Fulls"
+├─ SPAN
+| └─ "d’estil"
+└─ SPAN
+   └─ "en cascada"
+
+ +

Així és com un navegador interpreta aquest fragment HTML: es confecciona l'arbre DOM anterior i el navegador el representa així:

+ +

{{EmbedLiveSample('Una_representació_real_del_DOM', '100%', 55)}}

+ + + +

Aplicar CSS al DOM

+ +

Suposem que hem afegit una mica de codi CSS al nostre document per a donar-hi estil. Un cop més, l'HTML és el següent:

+ +
<p>
+  Utilitzem:
+  <span>Fulls</span>
+  <span>d'estil</span>
+  <span>en cascada</span>
+</p>
+ +

Suposem que hi apliquem el CSS següent:

+ +
span {
+  border: 1px solid black;
+  background-color: lime;
+}
+ +

El navegador analitza el codi HTML i crea un DOM, i després analitza el CSS. Atès que l'única regla disponible en el CSS té un selector span, el navegador pot ordenar el CSS molt de pressa! Aplica aquesta regla a cadascun dels tres <span> i després pinta a la pantalla la representació visual final.

+ +

La sortida actualitzada és la següent:

+ +

{{EmbedLiveSample('Aplicar_CSS_al_DOM', '100%', 55)}}

+ +

En el nostre article Depurar el CSS del mòdul següent, utilitzarem les eines DevTools del navegador per depurar problemes del CSS i coneixerem més sobre com l'interpreta el navegador.

+ +

Què passa si un navegador es troba amb CSS que no entén?

+ +

En un article anterior hem esmentat que no tots els navegadors implementen el CSS al mateix temps. A més, molta gent no utilitza la versió més recent del navegador. Tenint en compte que el CSS està en desenvolupament constant i, per tant, va per davant del que els navegadors poden reconèixer, et podries preguntar què passa si un navegador troba un selector CSS o una declaració que no reconeix.

+ +

La resposta és que no fa res i només passa a la declaració CSS següent.

+ +

Si un navegador analitza les teves regles i troba una propietat o un valor que no entén, l'ignora i passa a la declaració següent. Ho fa si has comès un error i has escrit malament una propietat o un valor, o si la propietat o el valor són massa recents i el navegador encara no és compatible.

+ +

De la mateixa manera, si un navegador troba un selector que no entén, ignora tota la regla i passa a la següent.

+ +

En l’exemple següent hem utilitzat l’ortografia britànica per a la propietat del color, cosa que invalida aquesta propietat perquè no es reconeix. Per tant, el paràgraf no es veu de color blau. Tots els altres CSS s'han aplicat; només s’ignora la línia no vàlida.

+ +
+
<p>Vull que aquest text sigui gran, en negreta i blau.</p>
+ +
p {
+  font-weight: bold;
+  colour: blue; /* Ortografia incorrecta de la propietat color */
+  font-size: 200%;
+}
+
+ +

{{EmbedLiveSample('Skipping_example', '100%', 200)}}

+ +

Aquest comportament és molt útil. Significa que pots utilitzar el CSS nou com una millora, perquè no es produirà cap error si no s’entén: pot ser que el navegador entengui la funció nova, o que no l’entengui. Combinat amb el funcionament en cascada i el fet que els navegadors utilitzen l’últim CSS que es troben en un full d’estil quan hi ha dues regles amb la mateixa especificitat, també pots oferir alternatives per a navegadors que no admeten el CSS nou.

+ +

Això funciona especialment bé quan vols fer servir un valor força nou i no és compatible amb tots els navegadors. Per exemple, alguns navegadors antics no admeten calc() com a valor. Podríem donar una amplada alternativa a una caixa en píxels i després donar una amplada amb un valor calc() de 100% - 50px. Els navegadors antics faran servir la versió en píxels i ignoraran la línia sobre calc() perquè no l’entenen. Els navegadors nous interpretaran la línia amb píxels i després la substituiran per la línia amb calc(), perquè la línia apareix més tard en la cascada.

+ +
.box {
+  width: 500px;
+  width: calc(100% - 50px);
+}
+ +

En articles posteriors analitzarem moltes maneres més de donar compatibilitat a diferents navegadors.

+ +

Per acabar

+ +

Ja has acabat aquest mòdul; només hi ha una cosa més per fer. En l’article següent faràs servir els teus nous coneixements per a canviar el disseny d'un exemple i provar una mica de codi CSS en el procés.

+ +

{{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}

+ +

En aquest mòdul

+ +
    +
  1. Què és el CSS
    2. +
  2. Primers passos amb el CSS
    3. +
  3. Com s'estructura el CSS
    4. +
  4. Com funciona el CSS
    5. +
  5. Aplica els teus nous coneixements
    6. +
diff --git a/files/ca/learn/css/first_steps/que_es_el_css/index.html b/files/ca/learn/css/first_steps/que_es_el_css/index.html deleted file mode 100644 index b158b8e62e..0000000000 --- a/files/ca/learn/css/first_steps/que_es_el_css/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: Què és el CSS? -slug: Learn/CSS/First_steps/Que_es_el_CSS -translation_of: Learn/CSS/First_steps/What_is_CSS ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}
- -

Els fulls d'estil en cascada ({{Glossary("CSS")}} o cascading style sheets) et permeten crear pàgines web atractives; però, com funcionen realment? Aquest article explica què és el CSS amb un exemple de sintaxi senzilla, i també inclou alguns termes clau sobre aquest llenguatge informàtic.

- - - - - - - - - - - - -
Prerequisits:Coneixements bàsics d'informàtica, tenir el programari bàsic instal·lat, coneixements bàsics de com treballar amb fitxers i amb HTML (mira Introducció a l'HTML).
Objectiu:Aprendre què és el CSS.
- -

Al mòdul Introducció a l'HTML exposem què és l’HTML i com s'utilitza per a etiquetar documents. Aquests documents es podran llegir en un navegador web. Els títols d’encapçalament es veuran més grans que el text normal, els paràgrafs començaran en una línia nova i estaran separats per un espai entre ells. Als enllaços se'ls dona color i es subratllen per a distingir-los de la resta del text. El que veus són els estils predeterminats del navegador: estils molt bàsics que el navegador aplica a l'HTML per a assegurar-se que es pot llegir, fins i tot si l'autor de la pàgina no especifica cap estil explícit.

- -

Els estils predeterminats que utilitza un navegador

- -

No obstant això, Internet seria un lloc avorrit si tots els llocs web fossin així. Amb CSS pots controlar exactament com es veuen els elements HTML al navegador, i presentar el teu etiquetatge amb el disseny que t'agradi.

- -

Per a què serveix el CSS?

- -

Com hem comentat anteriorment, el CSS és un llenguatge informàtic que especifica com es presenten els documents als usuaris, com se’ls aplica estil, s’elaboren, etc.

- -

Un document sol ser un fitxer de text estructurat que utilitza un llenguatge d’etiquetatge: {{Glossary("HTML")}} és el més comú, però també en pots trobar d'altres com ara {{Glossary("SVG")}} or {{Glossary("XML")}}.

- -

Presentar un document a un usuari significa convertir-lo en una forma que el públic pugui fer servir. Els {{Glossary("browser","navegadors")}} com {{Glossary("Mozilla Firefox","Firefox")}}, {{Glossary("Google Chrome","Chrome")}} o {{Glossary("Microsoft Edge","Edge")}} estan dissenyats per a presentar documents visualment, per exemple, en una pantalla d'ordinador, un projector o una impressora.

- -
-

Nota: De vegades, als navegadors se'ls anomena {{Glossary("User agent","agents d'usuari")}}, que significa bàsicament un programa informàtic que representa a una persona dins d'un sistema informàtic. Els navegadors són el principal tipus d’agent d’usuari en què pensem quan parlem de CSS, però no són l’únic. Hi ha altres agents d'usuari disponibles, com els que converteixen documents HTML i CSS en PDF per a imprimir.

-
- -

El CSS es pot fer servir per a dissenyar el text de documents molt bàsics, per exemple, per a canviar el color i la mida de la lletra dels títols i els enllaços. Es pot utilitzar per a donar disseny de la pàgina web; per exemple, convertir una sola columna de text en un disseny de pàgina amb una àrea de contingut principal i una barra lateral per a obtenir informació relacionada. Fins i tot es pot utilitzar per a efectes com l’animació. Consulta els enllaços d’aquest paràgraf per a obtenir exemples concrets.

- -

La sintaxi CSS

- -

El CSS és un llenguatge basat en regles: cada usuari defineix regles que especifiquen grups d’estils que s’han d’aplicar a determinats elements o grups d’elements de la teva pàgina web. Per exemple: «Vull que el títol d’encapçalament principal de la pàgina es vegi amb lletra gran i de color vermell».

- -

El codi següent mostra una regla CSS molt simple que aplicaria l'estil descrit al paràgraf anterior:

- -
h1 {
-    color: red;
-    font-size: 5em;
-}
- -

La regla s’obre amb un {{Glossary("CSS Selector", "selector")}}, que selecciona l'element HTML al qual aplicarem estil. En aquest cas, aplicarem estil als títols de nivell 1 ({{htmlelement ("h1")}}).

- -

Tot seguit, hi ha un conjunt de claus { }, i a dins hi haurà una o més declaracions, que prenen la forma de parells propietat i valor. Cada parell especifica una propietat dels elements que seleccionem i, a continuació, un valor que volem donar a la propietat.

- -

Abans de la clau hi ha la propietat, i després, el valor. Les {{Glossary("property/CSS","propietats")}} CSS admeten diferents valors, depenent de quina propietat s'especifica. En el nostre exemple, tenim la propietat color, que pot prendre diversos valors de color. També hi ha la propietat font-size. Aquesta propietat pot prendre diverses unitats de mida com a valor.

- -

Un full d’estils CSS contindrà moltes regles d’aquestes, escrites l’una darrere de l’altra.

- -
h1 {
-    color: red;
-    font-size: 5em;
-}
-
-p {
-    color: black;
-}
- -

Trobaràs que aprens ràpidament alguns valors, mentre que d’altres els hauràs de buscar. Les pàgines de propietat individuals del projecte MDN t'ofereixen una manera ràpida de cercar propietats i els seus valors si se t’obliden o si vols saber què més pots fer servir com a valor.

- -
-

Nota: Pots trobar enllaços a totes les pàgines de propietat CSS (juntament amb altres funcions CSS) a la pàgina de referències CSS de MDN. De manera alternativa, t'has d’acostumar a cercar «mdn css-feature-name» al teu motor de cerca preferit sempre que necessitis més informació sobre una característica CSS. Per exemple, prova de cercar «mdn color» i «mdn font-size».

-
- -

Mòduls CSS

- -

Com que amb CSS es pot aplicar estil a tantes coses, el llenguatge es desglossa en mòduls. Veuràs diverses referències a aquests mòduls a mesura que explores la pàgina de MDN i moltes de les pàgines de documentació que s’organitzen al voltant d’un mòdul determinat. Per exemple, pots donar una ullada a la referència MDN en el mòdul Fons i vores per a esbrinar quin n’és el propòsit i quines en són les diferents propietats i altres característiques que conté. També trobaràs enllaços a l’especificació CSS que defineix la tecnologia.

- -

En aquesta fase, no t'has de preocupar gaire de la manera en què s’estructura el CSS, però pot facilitar la cerca d’informació si, per exemple, saps que és probable que una propietat determinada es trobi entre altres coses similars i, probablement, en la mateixa especificació. 

- -

Per veure un exemple concret, tornem al mòdul Fons i vores; podries pensar que té sentit lògic que les propietats background-color i border-color es defineixin en aquest mòdul. I tens raó.

- -

Especificacions CSS

- -

Totes les tecnologies d’estàndards web (HTML, CSS, JavaScript, etc.) estan definides en extensos documents anomenats especificacions (o simplement «specs»), que publiquen les organitzacions d’estàndards (com {{glossary("W3C")}}, {{glossary("WHATWG")}}, {{glossary("ECMA")}} o {{glossary("Khronos")}}) i defineixen amb precisió com se suposa que aquestes tecnologies han de comportar-se.

- -

El CSS no és diferent: el desenvolupa un grup del W3C anomenat CSS Working Group. Aquest grup està format per representants de creadors de navegadors i altres empreses que tenen interès en el CSS. També hi ha altres persones, conegudes com a experts convidats, que actuen com a veus independents, i que no estan vinculats a cap organització.

- -

El CSS Working Group desenvolupa i especifica les noves funcions CSS. De vegades, perquè un navegador determinat està interessat a tenir alguna capacitat, d’altres vegades perquè els dissenyadors i els desenvolupadors web demanen una funció i, de vegades, perquè el grup de treball mateix ha identificat un requisit. El CSS es troba en desenvolupament constant, introduint característiques noves. Tot i això, una cosa clau sobre CSS és que tothom treballa molt per no canviar mai les coses d’una manera que trenqui els llocs web antics. Un lloc web creat el 2000, que utilitza el CSS limitat que hi havia aleshores, encara es pot fer servir avui dia.

- -

Com a nouvingut al CSS, és probable que trobis aclaparadores les especificacions CSS, ja que estan destinades a l’ús dels enginyers perquè les utilitzin per a implementar-ne suport als d'agents d’usuari, no perquè els desenvolupadors web les llegeixin. Molts desenvolupadors experimentats preferirien consultar la documentació a MDN o en altres tutorials. No obstant això, val la pena saber que existeixen, i entendre la relació que hi ha entre el CSS que utilitzes, el suport del navegador i les especificacions.

- -

Suport dels navegadors

- -

Un cop especificat el CSS, només ens és útil per desenvolupar pàgines web si un o més navegadors l’han implementat. Això vol dir que el codi ha estat escrit per a convertir la instrucció del nostre fitxer CSS en quelcom que pugui sortir a la pantalla. Analitzarem més aquest procés en l’article Com funciona el CSS. És inusual que tots els navegadors implementin una característica alhora, i per tant hi sol haver un buit en quina part del CSS es pot fer servir en quins navegadors i en quins no. Per això, és útil ser capaç de comprovar l’estat d’implementació. A cada pàgina de propietats de MDN pots veure l'estat de la propietat que t'interessa, de manera que pots saber si pots fer-la servir en un lloc web.

- -

El que segueix és el gràfic de dades de compatibilitat per a la propietat font-family de CSS.

- -

{{Compat("css.properties.font-family")}}

- -

Què segueix

- -

Ara que coneixes què és el CSS, passem a Començar amb el CSS, on pots començar a escriure algun codi CSS.

- -

{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}

- -

En aquest mòdul

- -
    -
  1. Què és el el CSS
    2. -
  2. Primers passos amb el CSS
    3. -
  3. Com s'estructura el CSS
    4. -
  4. Com funciona el CSS
    5. -
  5. Aplica els teus nous coneixements
    6. -
diff --git a/files/ca/learn/css/first_steps/what_is_css/index.html b/files/ca/learn/css/first_steps/what_is_css/index.html new file mode 100644 index 0000000000..b158b8e62e --- /dev/null +++ b/files/ca/learn/css/first_steps/what_is_css/index.html @@ -0,0 +1,119 @@ +--- +title: Què és el CSS? +slug: Learn/CSS/First_steps/Que_es_el_CSS +translation_of: Learn/CSS/First_steps/What_is_CSS +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}
+ +

Els fulls d'estil en cascada ({{Glossary("CSS")}} o cascading style sheets) et permeten crear pàgines web atractives; però, com funcionen realment? Aquest article explica què és el CSS amb un exemple de sintaxi senzilla, i també inclou alguns termes clau sobre aquest llenguatge informàtic.

+ + + + + + + + + + + + +
Prerequisits:Coneixements bàsics d'informàtica, tenir el programari bàsic instal·lat, coneixements bàsics de com treballar amb fitxers i amb HTML (mira Introducció a l'HTML).
Objectiu:Aprendre què és el CSS.
+ +

Al mòdul Introducció a l'HTML exposem què és l’HTML i com s'utilitza per a etiquetar documents. Aquests documents es podran llegir en un navegador web. Els títols d’encapçalament es veuran més grans que el text normal, els paràgrafs començaran en una línia nova i estaran separats per un espai entre ells. Als enllaços se'ls dona color i es subratllen per a distingir-los de la resta del text. El que veus són els estils predeterminats del navegador: estils molt bàsics que el navegador aplica a l'HTML per a assegurar-se que es pot llegir, fins i tot si l'autor de la pàgina no especifica cap estil explícit.

+ +

Els estils predeterminats que utilitza un navegador

+ +

No obstant això, Internet seria un lloc avorrit si tots els llocs web fossin així. Amb CSS pots controlar exactament com es veuen els elements HTML al navegador, i presentar el teu etiquetatge amb el disseny que t'agradi.

+ +

Per a què serveix el CSS?

+ +

Com hem comentat anteriorment, el CSS és un llenguatge informàtic que especifica com es presenten els documents als usuaris, com se’ls aplica estil, s’elaboren, etc.

+ +

Un document sol ser un fitxer de text estructurat que utilitza un llenguatge d’etiquetatge: {{Glossary("HTML")}} és el més comú, però també en pots trobar d'altres com ara {{Glossary("SVG")}} or {{Glossary("XML")}}.

+ +

Presentar un document a un usuari significa convertir-lo en una forma que el públic pugui fer servir. Els {{Glossary("browser","navegadors")}} com {{Glossary("Mozilla Firefox","Firefox")}}, {{Glossary("Google Chrome","Chrome")}} o {{Glossary("Microsoft Edge","Edge")}} estan dissenyats per a presentar documents visualment, per exemple, en una pantalla d'ordinador, un projector o una impressora.

+ +
+

Nota: De vegades, als navegadors se'ls anomena {{Glossary("User agent","agents d'usuari")}}, que significa bàsicament un programa informàtic que representa a una persona dins d'un sistema informàtic. Els navegadors són el principal tipus d’agent d’usuari en què pensem quan parlem de CSS, però no són l’únic. Hi ha altres agents d'usuari disponibles, com els que converteixen documents HTML i CSS en PDF per a imprimir.

+
+ +

El CSS es pot fer servir per a dissenyar el text de documents molt bàsics, per exemple, per a canviar el color i la mida de la lletra dels títols i els enllaços. Es pot utilitzar per a donar disseny de la pàgina web; per exemple, convertir una sola columna de text en un disseny de pàgina amb una àrea de contingut principal i una barra lateral per a obtenir informació relacionada. Fins i tot es pot utilitzar per a efectes com l’animació. Consulta els enllaços d’aquest paràgraf per a obtenir exemples concrets.

+ +

La sintaxi CSS

+ +

El CSS és un llenguatge basat en regles: cada usuari defineix regles que especifiquen grups d’estils que s’han d’aplicar a determinats elements o grups d’elements de la teva pàgina web. Per exemple: «Vull que el títol d’encapçalament principal de la pàgina es vegi amb lletra gran i de color vermell».

+ +

El codi següent mostra una regla CSS molt simple que aplicaria l'estil descrit al paràgraf anterior:

+ +
h1 {
+    color: red;
+    font-size: 5em;
+}
+ +

La regla s’obre amb un {{Glossary("CSS Selector", "selector")}}, que selecciona l'element HTML al qual aplicarem estil. En aquest cas, aplicarem estil als títols de nivell 1 ({{htmlelement ("h1")}}).

+ +

Tot seguit, hi ha un conjunt de claus { }, i a dins hi haurà una o més declaracions, que prenen la forma de parells propietat i valor. Cada parell especifica una propietat dels elements que seleccionem i, a continuació, un valor que volem donar a la propietat.

+ +

Abans de la clau hi ha la propietat, i després, el valor. Les {{Glossary("property/CSS","propietats")}} CSS admeten diferents valors, depenent de quina propietat s'especifica. En el nostre exemple, tenim la propietat color, que pot prendre diversos valors de color. També hi ha la propietat font-size. Aquesta propietat pot prendre diverses unitats de mida com a valor.

+ +

Un full d’estils CSS contindrà moltes regles d’aquestes, escrites l’una darrere de l’altra.

+ +
h1 {
+    color: red;
+    font-size: 5em;
+}
+
+p {
+    color: black;
+}
+ +

Trobaràs que aprens ràpidament alguns valors, mentre que d’altres els hauràs de buscar. Les pàgines de propietat individuals del projecte MDN t'ofereixen una manera ràpida de cercar propietats i els seus valors si se t’obliden o si vols saber què més pots fer servir com a valor.

+ +
+

Nota: Pots trobar enllaços a totes les pàgines de propietat CSS (juntament amb altres funcions CSS) a la pàgina de referències CSS de MDN. De manera alternativa, t'has d’acostumar a cercar «mdn css-feature-name» al teu motor de cerca preferit sempre que necessitis més informació sobre una característica CSS. Per exemple, prova de cercar «mdn color» i «mdn font-size».

+
+ +

Mòduls CSS

+ +

Com que amb CSS es pot aplicar estil a tantes coses, el llenguatge es desglossa en mòduls. Veuràs diverses referències a aquests mòduls a mesura que explores la pàgina de MDN i moltes de les pàgines de documentació que s’organitzen al voltant d’un mòdul determinat. Per exemple, pots donar una ullada a la referència MDN en el mòdul Fons i vores per a esbrinar quin n’és el propòsit i quines en són les diferents propietats i altres característiques que conté. També trobaràs enllaços a l’especificació CSS que defineix la tecnologia.

+ +

En aquesta fase, no t'has de preocupar gaire de la manera en què s’estructura el CSS, però pot facilitar la cerca d’informació si, per exemple, saps que és probable que una propietat determinada es trobi entre altres coses similars i, probablement, en la mateixa especificació. 

+ +

Per veure un exemple concret, tornem al mòdul Fons i vores; podries pensar que té sentit lògic que les propietats background-color i border-color es defineixin en aquest mòdul. I tens raó.

+ +

Especificacions CSS

+ +

Totes les tecnologies d’estàndards web (HTML, CSS, JavaScript, etc.) estan definides en extensos documents anomenats especificacions (o simplement «specs»), que publiquen les organitzacions d’estàndards (com {{glossary("W3C")}}, {{glossary("WHATWG")}}, {{glossary("ECMA")}} o {{glossary("Khronos")}}) i defineixen amb precisió com se suposa que aquestes tecnologies han de comportar-se.

+ +

El CSS no és diferent: el desenvolupa un grup del W3C anomenat CSS Working Group. Aquest grup està format per representants de creadors de navegadors i altres empreses que tenen interès en el CSS. També hi ha altres persones, conegudes com a experts convidats, que actuen com a veus independents, i que no estan vinculats a cap organització.

+ +

El CSS Working Group desenvolupa i especifica les noves funcions CSS. De vegades, perquè un navegador determinat està interessat a tenir alguna capacitat, d’altres vegades perquè els dissenyadors i els desenvolupadors web demanen una funció i, de vegades, perquè el grup de treball mateix ha identificat un requisit. El CSS es troba en desenvolupament constant, introduint característiques noves. Tot i això, una cosa clau sobre CSS és que tothom treballa molt per no canviar mai les coses d’una manera que trenqui els llocs web antics. Un lloc web creat el 2000, que utilitza el CSS limitat que hi havia aleshores, encara es pot fer servir avui dia.

+ +

Com a nouvingut al CSS, és probable que trobis aclaparadores les especificacions CSS, ja que estan destinades a l’ús dels enginyers perquè les utilitzin per a implementar-ne suport als d'agents d’usuari, no perquè els desenvolupadors web les llegeixin. Molts desenvolupadors experimentats preferirien consultar la documentació a MDN o en altres tutorials. No obstant això, val la pena saber que existeixen, i entendre la relació que hi ha entre el CSS que utilitzes, el suport del navegador i les especificacions.

+ +

Suport dels navegadors

+ +

Un cop especificat el CSS, només ens és útil per desenvolupar pàgines web si un o més navegadors l’han implementat. Això vol dir que el codi ha estat escrit per a convertir la instrucció del nostre fitxer CSS en quelcom que pugui sortir a la pantalla. Analitzarem més aquest procés en l’article Com funciona el CSS. És inusual que tots els navegadors implementin una característica alhora, i per tant hi sol haver un buit en quina part del CSS es pot fer servir en quins navegadors i en quins no. Per això, és útil ser capaç de comprovar l’estat d’implementació. A cada pàgina de propietats de MDN pots veure l'estat de la propietat que t'interessa, de manera que pots saber si pots fer-la servir en un lloc web.

+ +

El que segueix és el gràfic de dades de compatibilitat per a la propietat font-family de CSS.

+ +

{{Compat("css.properties.font-family")}}

+ +

Què segueix

+ +

Ara que coneixes què és el CSS, passem a Començar amb el CSS, on pots començar a escriure algun codi CSS.

+ +

{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}

+ +

En aquest mòdul

+ +
    +
  1. Què és el el CSS
    2. +
  2. Primers passos amb el CSS
    3. +
  3. Com s'estructura el CSS
    4. +
  4. Com funciona el CSS
    5. +
  5. Aplica els teus nous coneixements
    6. +
diff --git "a/files/ca/learn/css/introducci\303\263_a_css/comprensi\303\263_css_fonamental/index.html" "b/files/ca/learn/css/introducci\303\263_a_css/comprensi\303\263_css_fonamental/index.html" deleted file mode 100644 index 34a654269a..0000000000 --- "a/files/ca/learn/css/introducci\303\263_a_css/comprensi\303\263_css_fonamental/index.html" +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: Comprensió CSS fonamental -slug: Learn/CSS/Introducció_a_CSS/Comprensió_CSS_fonamental -tags: - - Assessment - - Beginner - - CSS - - CodingScripting - - Selectors - - Style - - Syntax - - box model - - comments - - rules -translation_of: Learn/CSS/Building_blocks/Fundamental_CSS_comprehension ---- -
{{LearnSidebar}}
- -
{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}
- -

Heu cobert molt en aquest mòdul, de manera que us heu de sentir bé d'haver arribat al final!. El pas final abans de continuar és intentar l'avaluació del mòdul: això implica una sèrie d'exercicis relacionats que s'han de completar per crear el disseny final - un perfil de targeta de visita/targeta de jugador/perfil social.

- - - - - - - - - - - - -
Requisits previs:Abans d'intentar aquesta avaluació, hauríeu d'haver treballat tots els articles d'aquest mòdul.
Objectiu:Comprovar la comprensió de la teoria CSS fonamental, la sintaxi i la mecànica
- -

Punt de partida

- -

Per començar aquesta avaluació, heu de:

- - - -
-

Nota: D'altra banda, podeu utilitzar un lloc com JSBin o Thimble per fer la vostra avaluació. Podeu enganxar el codi HTML i omplir el CSS en un d'aquests editors en línia i utilitzar aquest URL per indicar a l'element <img> el fitxer d'imatge. Si l'editor en línia que esteu utilitzant no té cap panell CSS separat, no dubteu a posar-lo en un element <style> al capdavant del document.

-
- -

Resum del projecte

- -

Se us ha proporcionat un mica d'HTML sense processar i una imatge, i heu d'escriure el CSS necessari per d'introduir una mica d'estil bonic en una targeta de negocis en línia, que potser es pot duplicar com a targeta de jugador o perfil de xarxes socials. Les següents seccions descriuen el que heu de fer.

- -

Configuració bàsica:

- - - -

Tingueu cura dels selectors i els conjunts de regles proporcionats:

- - - -

Nou conjunt de regles que necessiteu escriure :

- - - -

Altres coses a pensar:

- - - -

Consells i suggeriments

- - - -

Exemple

- -

La següent captura de pantalla mostra un exemple del que hauria de tenir el disseny acabat:

- -

A view of the finished business card, show a reader header and footer, and a darker center panel containing the main details and image.

- -

 

- -

Avaluació

- -

Si seguiu aquesta avaluació com a part d'un curs organitzat, hauríeu de poder lliurar el vostre treball al vostre professor/mentor per qualificar-ho. Si esteu en auto-aprenentatge, podreu obtenir la guia de qualificacions amb força facilitat preguntant sobre el tema en el fil de conversa en l'àrea d'aprenentatge, o en el canal IRC #mdn en Mozilla IRC. Intenteu primer l'exercici - no es guanya res fent trampes!

- -

{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}

diff --git a/files/ca/learn/css/styling_text/fundamentals/index.html b/files/ca/learn/css/styling_text/fundamentals/index.html new file mode 100644 index 0000000000..e258171ffc --- /dev/null +++ b/files/ca/learn/css/styling_text/fundamentals/index.html @@ -0,0 +1,739 @@ +--- +title: Text fonamental i estil de font +slug: Learn/CSS/Estilitzar_text/Text_fonamental +tags: + - Article + - Beginner + - CSS + - Guide + - Style + - Text + - alignment + - family + - font + - shorthand + - spacing + - weight +translation_of: Learn/CSS/Styling_text/Fundamentals +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}
+ +

En aquest article t'iniciem en el viatge cap al domini de l'aplicació d’estil a text amb {{glossary("CSS")}}. Aquí passarem amb detall per tots els fonaments bàsics de l'aplicació d’estil a textos / tipus de lletra, inclosos el gruix, la família i l'estil del tipus de lletra, les propietats abreviades per al tipus de lletra, l'alineació del text i altres efectes, i l’interlineat i l’interlletratge.

+ + + + + + + + + + + + +
Requisits previs:Coneixements bàsics d'informàtica, fonaments bàsics d'HTML (consulta l’article Introducció a l’HTML), fonaments de CSS (consulta l’article Introducció al CSS).
Objectiu:Aprendre les propietats i tècniques bàsiques necessàries per a l'aplicació d’estil al text de les pàgines web.
+ +

Què implica l'aplicació d’estil al text en CSS?

+ +

Com ja deus conèixer d’haver treballat amb l’HTML i el CSS, el text dins d'un element es defineix dins de la caixa de contingut de l'element. Comença a la part superior esquerra de l'àrea de contingut (o a la part superior dreta, en el cas de contingut en idiomes RTL, o right-to-left, que s'escriuen de dreta a esquerra) i flueix cap al final de la línia. Quan arriba al final, passa a la línia següent i continua; i després, a la següent línia, fins que tot el contingut s'ha col·locat a la caixa. El contingut de text es comporta en efecte com un seguit d'elements en línia, es distribueix en línies adjacents entre si, i no crea salts de línia fins que s’ateny el final de la línia, o tret que s'obligui a un salt de línia manual de l'element {{htmlelement("br")}}.

+ +
+

Nota: Si el paràgraf anterior et sembla confós, no t’hi amoïnis, torna enrere i fes un repàs de la teoria del model de caixa que s’explica en l’article El model de caixa abans de continuar.

+
+ +

Les propietats CSS que s'utilitzen per a escriure text generalment es divideixen en dues categories, que veurem per separat en aquest article:

+ + + +
+

Nota: Tingues en compte que les propietats que afecten el text dins d'un element hi actuen com una única entitat. No pots seleccionar i modificar l'estil de les subseccions de text si no les etiquetes amb un element apropiat (com ara {{htmlelement("span")}} o {{htmlelement("strong")}}) o utilitzes un pseudoelement específic per a text com ::first-letter (selecciona la primera lletra del text d'un element), ::first-line (selecciona la primera línia del text d'un element) o ::selection (selecciona el text que el cursor ressalta en aquell moment).

+
+ +

Tipus de lletra

+ +

Continuem endavant per veure les propietats d'estil dels tipus de lletra. En aquest exemple aplicarem algunes propietats CSS diferents a la mateixa mostra d’HTML, que té l’aspecte següent:

+ +
<h1>Tommy the cat</h1>
+
+<p>I remember as if it were a meal ago...</p>
+
+<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter
+ may have nestled its way into his mighty throat. Many a fat alley rat
+had met its demise while staring point blank down the cavernous barrel of
+ this awesome prowling machine. Truly a wonder of nature this urban
+predator — Tommy the cat had many a story to tell. But it was a rare
+occasion such as this that he did.</p>
+ +

Podeu trobar l'exemple acabat en GitHub (vegeu-ne també el codi font).

+ +

Color

+ +

La propietat {{cssxref("color")}} estableix el color del contingut de primer pla dels elements seleccionats (que normalment és el text, però també pot incloure un parell d'altres coses, com ara un subratllat o un sobreratllat en el text, amb la propietat {{cssxref("text-decoration")}}).

+ +

La propietat color pot acceptar qualsevol unitat de color CSS, per exemple:

+ +
p {
+  color: red;
+}
+ +

Això fa que els paràgrafs es converteixin en vermells, en comptes del negre estàndard per defecte del navegador, així:

+ + + +

{{ EmbedLiveSample('Color', '100%', 220) }}

+ +

Famílies de tipus de lletra

+ +

Per a establir un tipus de lletra diferent en el teu text, utilitza la propietat {{cssxref("font-family")}}; això et permet especificar un tipus de lletra (o una llista de tipus de lletra) perquè el navegador l'apliqui als elements seleccionats. El navegador només aplica un tipus de lletra si està disponible en la màquina amb què s’accedeix al lloc web. Si no, només usarà un {{anch("Default fonts", "tipus de lletra predeterminat")}} del navegador. Un exemple senzill és el següent:

+ +
p {
+  font-family: arial;
+}
+ +

Això fa que tots els paràgrafs d'una pàgina adoptin el tipus de lletra Arial, que es troba en qualsevol ordinador.

+ +

Tipus de lletra segurs per a la xarxa web

+ +

Parlant de la disponibilitat dels tipus de lletra, només una certa quantitat de tipus de lletra es troben generalment disponibles en tots els sistemes i, per tant, es poden utilitzar sense gaires preocupacions. Són els anomenats tipus de lletra segurs per a la xarxa web.

+ +

La majoria de les vegades, com a desenvolupadors web, volem tenir un control més específic sobre els tipus de lletra que s’utilitzen per a mostrar el contingut del text. El problema és trobar una manera de saber quin tipus de lletra està disponible en l'ordinador que es fa servir per a accedir a les nostres pàgines web. No hi ha manera de saber-ho en tots els casos, però se sap que els tipus de lletra segurs per a la web estan disponibles en gairebé totes les instàncies dels sistemes operatius més utilitzats (Windows, Mac, les distribucions més habituals de Linux, Android i iOS).

+ +

La llista de tipus de lletra segurs per a la xarxa web reals canvia a mesura que evolucionen els sistemes operatius, però és convenient considerar els tipus de lletra segurs per a la xarxa web següents, almenys ara com ara (molts d'ells s’han popularitzades gràcies a la iniciativa de Microsoft Tipus de lletra principals per a la xarxa web, de finals dels anys 1990 i principis dels anys 2000):

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NomTipus de lletra genèricObservacions
Arialsans-serifSovint es considera una bona pràctica afegir també el tipus de lletra Helvetica com una alternativa preferent a Arial; encara que són gairebé idèntiques, es considera que Helvetica té una forma més agradable, tot i que Arial està més disponible.
Courier NewmonospaceHi ha sistemes operatius que tenen una versió alternativa (possiblement més antiga) del tipus de lletra Courier New anomenada Courier. Es considera una bona pràctica utilitzar-les totes dues, amb Courier New com l’opció preferent.
Georgiaserif
Times New RomanserifHi ha sistemes operatius que tenen una versió alternativa (possiblement més antiga) del tipus de lletra Times New Roman anomenada Times. Es considera una bona pràctica utilitzar-les totes dues, amb Times New Roman com l’opció preferent.
Trebuchet MSsans-serifHas de tenir cura amb l'ús d'aquest tipus de lletra perquè no està àmpliament disponible en sistemes operatius mòbils.
Verdanasans-serif
+ +
+

Nota: Entre els diversos recursos, el lloc web cssfontstack.com manté una llista de tipus de lletra segurs per a la web disponibles en sistemes operatius Windows i macOS, que poden ajudar-te a prendre la decisió sobre el que consideris segur per al teu ús.

+
+ +
+

Nota: Hi ha una manera de descarregar un tipus de lletra personalitzat juntament amb una pàgina web, que et permet personalitzar l'ús del tipus de lletra de la manera que vulguis: web fonts. Això és una mica més complex, i ho exposarem en un article separat més endavant en el mòdul.

+
+ +

Tipus de lletra predeterminats

+ +

CSS defineix cinc noms genèrics per als tipus de lletra: serif, sans-serif, monospace, cursive i fantasy. Són noms molt genèrics i l’aspecte exacte del tipus de lletra usat quan s'utilitzen aquests noms genèrics correspon a cada navegador i pot variar per a cada sistema operatiu amb què s'executa. Representa un pitjor escenari, en què el navegador tracta de fer el possible per a oferir almenys un tipus de lletra que es consideri adequat. serif, sans-serif i monospace són bastant previsibles i han de proporcionar alguna cosa raonable. D'altra banda, cursive i fantasy són menys previsibles i et recomanem utilitzar-les amb molta cura i provar-les cada vegada.

+ +

Els cinc noms es defineixen de la manera següent:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NomDefinicióExemple
serifTipus de lletra que tenen serifes (les floritures i altres petits detalls que es veuen en els extrems dels traços en algunes tipografies).My big red elephant
sans-serifTipus de lletra que no tenen serifes.My big red elephant
monospaceTipus de lletra en què cada caràcter ocupa la mateixa amplada, normalment s’utilitza en les llistes d’instruccions que constitueixen el codi informàtic.My big red elephant
cursiveTipus de lletra que tenen com a objectiu emular l'escriptura manuscrita, amb moviments fluids i connectats.My big red elephant
fantasyTipus de lletra amb intencions decoratives.My big red elephant
+ +

Llistes de tipus de lletra

+ +

Com que no pots garantir la disponibilitat dels tipus de lletra que vols utilitzar en les teves pàgines web (fins i tot un tipus de lletra segur per a la xarxa web podria fallar per alguna raó), pots proporcionar una llista de tipus de lletra perquè el navegador tingui diversos tipus de lletra per poder triar. Això només implica introduir un atribut font-family amb un valor que consti de diversos noms de tipus de lletra separats per comes, per exemple:

+ +
p {
+  font-family: "Trebuchet MS", Verdana, sans-serif;
+}
+ +

En aquest cas, el navegador comença pel principi de la llista i mira si el primer tipus de lletra està disponible en la màquina. Si és així, s'aplica aquesta font als elements seleccionats. En cas contrari, es passa al tipus de lletra següent, i així successivament.

+ +

És recomanable proporcionar al final de la llista un nom de tipus de lletra genèric que sigui adequat perquè el navegador pugui almenys proporcionar alguna cosa adequada aproximada si cap dels tipus de lletra de la llista estan disponibles. Per il·lustrar aquest punt, els navegadors presenten els paràgrafs en un tipus de lletra serifa predeterminada, que normalment és Times New Roman, si no hi ha cap altra opció disponible; però això no és bo quan s’espera un tipus de lletra sans-serif!

+ +
+

Nota: Els noms dels tipus de lletra que tenen més d'una paraula, com Trebuchet MS s’han d’escriure entre cometes.

+
+ +

Un exemple de font-family

+ +

Afegim les línies següents al nostre exemple anterior per a donar als paràgrafs un tipus de lletra sans-serif:

+ +
p {
+  color: red;
+  font-family: Helvetica, Arial, sans-serif;
+}
+ +

Això ens dona el resultat següent:

+ + + +

{{ EmbedLiveSample('Un_exemple_de_font-family', '100%', 220) }}

+ +

La mida de la lletra

+ +

En l'article de valors i unitats en CSS del mòdul anterior, hem revisat les unitats de longitud i mida. La mida de la lletra (que s’estableix amb la propietat {{cssxref("font-size")}} pot prendre valors que es mesuren en la majoria d'aquestes unitats (i d’altres, com ara percentatges), però les unitats més comunes que faràs servir per a la mida del text són:

+ + + +

L’atribut font-size d'un element s'hereta de l'element pare d'aquest element. Tot comença amb l'element arrel del document, {{htmlelement("html")}}, en què l’atribut font-size està establert en 16 px de manera estàndard en els navegadors. Qualsevol paràgraf (o un altre element que no tingui una mida diferent establerta pel navegador) de l'interior de l'element arrel tindrà una mida final de 16 px. Altres elements poden tenir mides predeterminades diferents, per exemple, un element {{htmlelement("h1")}} té una mida de 2 em establerta per defecte, de manera que tindrà una mida final de 32 píxels.

+ +

Les coses es tornen més difícils quan es comença a alterar la mida del tipus de lletra dels elements imbricats. Per exemple, si en la teva pàgina hi ha un element {{htmlelement("article")}} i hi estableixes la mida del tipus de lletra en 1,5 em (que donaria una mida final de 24 px), i llavors vols que els paràgrafs de dins de l'element <article> tinguin una mida de lletra computada de 20 px, quin valor em hem d’utilitzar?

+ +
<!-- document base font-size is 16px -->
+<article> <!-- If my font-size is 1.5em -->
+  <p>My paragraph</p> <!-- How do I compute to 20px font-size? -->
+</article>
+ +

Hauràs d'establir el valor em en 20/24 o 0,83333333 em. Els càlculs poden complicar-se, de manera que cal tenir cura a l’hora de com aplicar estils. El millor és utilitzar unitats rem on puguis per mantenir les coses senzilles i evitar establir la mida de la lletra dels elements del contenidor quan sigui possible.

+ +

Un exemple senzill de dimensionament

+ +

Quan dimensiones el teu text, normalment és una bona idea establir l’atribut base font-size del document en 10 px, de manera que resulta molt més senzill de fer els càlculs, perquè llavors els valors (r)em són la mida de la lletra en píxels dividida per 10, no per 16. A continuació, pots dimensionar fàcilment els diferents tipus de text del document si ho vols. És una bona idea fer una llista de tot el conjunt de regles font-size en una zona determinada del teu full d'estil, i així són fàcils de trobar.

+ +

El nostre nou resultat és així:

+ + + +
html {
+  font-size: 10px;
+}
+
+h1 {
+  font-size: 2.6rem;
+}
+
+p {
+  font-size: 1.4rem;
+  color: red;
+  font-family: Helvetica, Arial, sans-serif;
+}
+ +

{{ EmbedLiveSample('Un_exemple_senzill_de_dimensionament', '100%', 220) }}

+ +

Estils i gruixos de lletra, transformacions i decoracions del text

+ +

CSS proporciona quatre propietats comunes per a alterar el gruix visual / l’èmfasi del text:

+ + + +

Cal tenir en compte que {{cssxref("text-decoration")}} pot acceptar diversos valors alhora, si vols afegir diverses decoracions alhora; per exemple, text-decoration: underline overline. Tingues en compte que {{cssxref("text-decoration")}} és una propietat abreujada per a {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}} i {{cssxref("text-decoration-color")}}. Pots utilitzar les combinacions d'aquests valors de propietat per a crear efectes interessants, per exemple, text-decoration: line-through red wavy

+ +

Observem com afegir un parell d'aquestes propietats al nostre exemple:

+ +

El resultat és aquest:

+ + + +
html {
+  font-size: 10px;
+}
+
+h1 {
+  font-size: 2.6rem;
+  text-transform: capitalize;
+}
+
+h1 + p {
+  font-weight: bold;
+}
+
+p {
+  font-size: 1.4rem;
+  color: red;
+  font-family: Helvetica, Arial, sans-serif;
+}
+ +

{{ EmbedLiveSample('Estils_i_gruixos_de_lletra_transformacions_i_decoracions_del_text', '100%', 220) }}

+ +

Ombres en el text

+ +

Pots aplicar ombres al text amb la propietat {{cssxref("text-shadow")}}. Això involucra fins a quatre valors, com es mostra en l'exemple següent:

+ +
text-shadow: 4px 4px 5px red;
+ +

Les quatre propietats són:

+ +
    +
  1. El desplaçament horitzontal de la silueta del text original: pot prendre la majoria de les unitats de longitud i grandària disponibles en CSS, però el més convenient és usar px. Aquest valor s'ha d'incloure.
    2. +
  2. El desplaçament vertical de la silueta del text original: es comporta bàsicament igual que el desplaçament horitzontal, excepte que mou l'ombra amunt i avall, no a dreta i esquerra. Aquest valor s'ha d'incloure.
    3. +
  3. El radi d'esborronat: un valor més alt significa que l'ombra es dispersa més àmpliament. Si aquest valor no s'inclou, el valor predeterminat és 0, que significa que no s’esborrona. Pot prendre la majoria de les unitats de longitud i grandària disponibles en CSS.
    4. +
  4. El color base de l'ombra: pot prendre qualsevol unitat de color CSS. Si no s'inclou, el valor predeterminat és black.
    5. +
+ +
+

Nota: Els valors de desplaçament positius mouen l'ombra cap a la dreta i cap avall, però també pots utilitzar valors de desplaçament negatius per a moure l'ombra cap a l'esquerra i cap amunt, com per exemple -1px -1px.

+
+ +

Ombres múltiples

+ +

Pots aplicar diverses ombres a un mateix text si inclous més d’un valor d'ombra separats per comes, per exemple:

+ +
text-shadow: -1px -1px 1px #aaa,
+             0px 4px 1px rgba(0,0,0,0.5),
+             4px 4px 5px rgba(0,0,0,0.7),
+             0px 0px 7px rgba(0,0,0,0.4);
+ +

Si apliquem això a l'element {{htmlelement("h1")}} del nostre exemple de Tommy the cat, obtenim això:

+ + + +

{{ EmbedLiveSample('Ombres_múltiples', '100%', 220) }}

+ +
+

Nota: Pots veure més exemples interessants d'ús de text-shadow en l'article de Sitepoint Moonlighting with CSS text-shadow.

+
+ +

Disseny de pàgina del text

+ +

Ara que ja coneixem les propietats bàsiques dels tipus de lletra, passem a veure les propietats del text que podem utilitzar que afecten el disseny de pàgina.

+ +

Alineació del text

+ +

La propietat {{cssxref("text-align")}} s'utilitza per a controlar com s'alinea el text dins de la caixa que conté els continguts. Els valors disponibles són els següents i funcionen gairebé de la mateixa manera que ho fa una aplicació de processador de text normal:

+ + + +

Si s'aplica text-align: center; a l’{{htmlelement("h1")}} en el nostre exemple, obtenim això:

+ + + +

{{ EmbedLiveSample('Alineació_del_text', '100%', 220) }}

+ +

Interlineat

+ +

La propietat {{cssxref("line-height")}} estableix l'alçada que hi ha entre les línies de text. Pot prendre la majoria de les unitats de longitud i grandària, però també un valor sense unitat, que actua com un multiplicador, i generalment es considera l’opció més bona; es multiplica el valor de {{cssxref("font-size")}} i s’obté line-height. El text del body en general es veu més bé i és més fàcil de llegir si les línies estan prou separades. L'alçada de la línia recomanada és d'aproximadament 1,5-2 (doble espai). Per tant, si vols establir les línies de text a 1,6 vegades l'alçada del tipus de lletra, utilitzaries això:

+ +
line-height: 1.6;
+ +

Si apliques això als elements {{htmlelement("p")}} del nostre exemple, obtindràs aquest resultat:

+ + + +

{{ EmbedLiveSample('Interlineat', '100%', 250) }}

+ +

Espaiat entre lletres i entre paraules

+ +

Les propietats {{cssxref("spacing-letter")}} i {{cssxref("word-spacing")}} permeten establir l'espaiat entre lletres i l'espaiat entre paraules en el text. No ho faràs amb gaire freqüència, però potser ho trobes útil per a obtenir un cert tipus de presentació o per millorar la llegibilitat d'un tipus de lletra especialment densa. Pot prendre la majoria de les unitats de longitud i grandària.

+ +

Així, per exemple, podríem aplicar una mica d’espai entre lletres i espai entre paraules a la primera línia de cada element {{htmlelement("p")}} del nostre exemple:

+ +
p::first-line {
+  letter-spacing: 4px;
+  word-spacing: 4px;
+}
+ +

Afegim-ne una mica al nostre exemple, així:

+ + + +

{{ EmbedLiveSample('Espaiat_entre_lletres_i_entre_paraules', '100%', 250) }}

+ +

Altres propietats que convé conèixer

+ +

Les propietats anteriors et donen una idea de com començar a aplicar estil al text d’una pàgina web, però hi ha moltes altres propietats que es poden utilitzar. Aquí només hem volgut exposar les més importants. Un cop t’hagis acostumat a fer-les servir, també hauries d'explorar les següents:

+ +

Estils per als tipus de lletra:

+ + + +

Aplicació d’estil al text per al disseny de pàgina

+ + + +

Propietat abreujada per al tipus de lletra

+ +

També es poden establir moltes propietats de tipus de lletra amb la propietat abreujada {{cssxref("font")}}. S’escriuen en l’ordre següent:  {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-weight")}}, {{cssxref("font-stretch")}}, {{cssxref("font-size")}}, {{cssxref("line-height")}} i {{cssxref("font-family")}}.

+ +

Entre totes aquestes propietats, només es requereixen font-size i font-family quan s'utilitza la propietat abreujada font.

+ +

S'ha d'incloure una barra diagonal entre les propietats {{cssxref("font-size")}} i {{cssxref("line-height")}}.

+ +

Un exemple complet tindria un aspecte com aquest:

+ +
font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;
+ +

Aprenentatge actiu: Jugar amb els estils de text

+ +

En aquesta sessió d'aprenentatge actiu, no et proposem de fer cap exercici específic: et proposem que juguis amb algunes propietats del tipus de lletra i el text aplicades al disseny de pàgina i observis què ets capaç de crear. Pots fer-ho usant els fitxers HTML/CSS fora de línia, o pots introduir el teu codi en l'exemple editat en viu a continuació.

+ +

Si t’equivoques, sempre pots tornar a l’inici amb el botó Reinicia.

+ + + +

{{ EmbedLiveSample('Codi_executable', 700, 800) }}

+ +

Resum

+ +

Esperem que hagis gaudit jugant amb el text d’aquest article! L’article següent t’explicarà tot el que has de saber sobre l’aplicació d'estil a llistes HTML.

+ +

{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}

diff --git a/files/ca/learn/css/styling_text/index.html b/files/ca/learn/css/styling_text/index.html new file mode 100644 index 0000000000..c815d83297 --- /dev/null +++ b/files/ca/learn/css/styling_text/index.html @@ -0,0 +1,55 @@ +--- +title: Estilitzar text +slug: Learn/CSS/Estilitzar_text +tags: + - Beginner + - CSS + - CodingScripting + - Fonts + - Landing + - Links + - Module + - Text + - font + - letter + - line + - lists + - shadow + - web fonts +translation_of: Learn/CSS/Styling_text +--- +
{{LearnSidebar}}
+ +

Amb els aspectes bàsics del llenguatge CSS coberts, el següent tema CSS, per a què us concentreu, és l'estil del text - una de les coses més habituals que fareu amb CSS. Aquí observem els fonaments d'estil de text, incloent la configuració de fonts, negreta, cursiva, espaiat entre línies i lletres, ombres i altres funcions de text. Completem el mòdul examinant l'aplicació de fonts personalitzades a la vostra pàgina i llistes d'estil i enllaços.

+ +

Requisits previs

+ +

Abans de començar aquest mòdul, ja hauríeu de tenir una familiaritat bàsica amb l'HTML, tal com s'ha explicat en el mòdul Introducció a HTML i estar còmodes amb els fonaments CSS, tal com s'ha explicat en Introducció a CSS.

+ +
+

Nota: Si esteu treballant en un ordinador/tauleta/altre dispositiu on no té la capacitat de crear els vostres propis fitxers, podeu provar (la majoria) els exemples de codi en un programa de codificació en línia com JSBin o Thimble.

+
+ +

Guies

+ +

Aquest mòdul conté els següents articles, que us ensenyaran tot l'essencial de l'estil del contingut de text HTML.

+ +
+
Text fonamental i estil de font
+
En aquest article, es detallen tots els conceptes bàsics d'estil de text/font, incloent la configuració del pes de la font, família i estil, abreviatura de font, alineació del text i altres efectes, i espaiat entre línies i lletres.
+
Estilitzar llistes
+
Les llistes es comporten com qualsevol altre text en la seva major part, però hi ha algunes propietats CSS específiques de les llistes que necessiteu saber i algunes de les millors pràctiques a tenir en compte. Aquest article ho explica tot.
+
Estilitzar enllaços
+
En dissenyar enllaços, és important entendre com fer ús de pseudo-classes per crear estils de vincles de manera efectiva i com dissenyar vincles per utilitzar-los en característiques d'interfície variades comunes, com a menús de navegació i pestanyes. Veurem tots aquests temes en aquest article.
+
Fonts Web
+
Aquí explorarem detalladament els tipus de fonts web, que us permeten descarregar fonts personalitzades juntament amb la vostra pàgina web, per permetre un estil de text més variat i personalitzat.
+
+ +

Avaluacions

+ +

Les següents avaluacions posaran a prova la vostra comprensió de les tècniques d'estil de text cobertes en les guies anteriors.

+ +
+
Composició d'una pàgina web d'una escola comunitaria
+
En aquesta avaluació, provarem la vostra comprensió sobre l'estil de text, que us permetrà personalitzar el text de la pàgina d'inici d'una escola comunitària.
+
diff --git a/files/ca/learn/css/styling_text/styling_links/index.html b/files/ca/learn/css/styling_text/styling_links/index.html new file mode 100644 index 0000000000..448a53289d --- /dev/null +++ b/files/ca/learn/css/styling_text/styling_links/index.html @@ -0,0 +1,424 @@ +--- +title: Aplicar estils a enllaços +slug: Learn/CSS/Estilitzar_text/Estilitzar_enllaços +translation_of: Learn/CSS/Styling_text/Styling_links +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}
+ +

Quan s’aplica estil a enllaços és important entendre com fer ús de les pseudoclasses per a donar estil als estats de l’enllaç d’una manera efectiva, i com donar estil als enllaços per a utilitzar-los en diverses interfícies d’usuari característiques comunes, com ara menús de navegació i pestanyes. En aquest article tractarem tots aquests temes.

+ + + + + + + + + + + + +
Requisits previs:Coneixements bàsics d'informàtica, fonaments d'HTML (consulta la Introducció a l’HTML), fonaments de CSS (consulta la Introducció al CSS), fonaments d’aplicació d’estil i tipus de lletra als textos amb CSS.
Objectiu:Aprendre a dissenyar els estats d'un enllaç i a fer servir enllaços de manera efectiva en interfícies d'usuari característiques comunes, com ara els menús de navegació.
+ +

Un cop d’ull a alguns enllaços

+ +

En la secció Creació d’hipervincles hem vist com has d’implementar els enllaços en el teu codi HTML d'acord amb les bones pràctiques. En aquest article aprofundirem en aquest coneixement i et mostrarem les bones pràctiques que has de tenir en compte per a aplicar estil als enllaços.

+ +

Els estats d'un enllaç

+ +

El primer que has d'entendre és el concepte d'estats d'un enllaç; els enllaços poden tenir diversos estats, i se’ls pot aplicar estil fent servir diverses pseudoclasses:

+ + + +

Estils predeterminats

+ +

L’exemple següent il·lustra com es comporta un enllaç de manera predeterminada (el CSS simplement amplia i centra el text perquè destaqui més).

+ +
<p><a href="https://mozilla.org">A link to the Mozilla homepage</a></p>
+
+ +
p {
+  font-size: 2rem;
+  text-align: center;
+}
+ +

{{ EmbedLiveSample('Estils_predeterminats', '100%', 120) }}

+ +
+

Nota: Tots els enllaços d'aquesta pàgina són falsos — s'ha posat un # en comptes d'un URL real. Això és perquè si incloïssim enllaços reals, fer-hi clic trencaria els exemples (acabaries amb un error, o una pàgina càrregada en l'exemple incrustat de la què no podries tornar.). # simplement enllaça a la pàgina actual.

+
+ +

A mesura que exploris els estils predeterminats t’adonaràs d'algunes coses:

+ + + +

Curiosament, aquests estils predeterminats són gairebé idèntics que els dels primers dies dels navegadors a mitjan anys 90. Això és perquè els usuaris coneixen aquest comportament i l’esperen; si els enllaços estiguessin dissenyats de manera diferent, molta gent es confondria. Això no vol dir en absolut que no puguis aplicar estil als enllaços, només que no t’has d'allunyar del comportament que se n’espera. Com a mínim hauries de complir el següent:

+ + + +

Els estils predeterminats es poden desactivar/modificar amb les propietats CSS següents:

+ + + +
+

Nota: No està limitat només a les propietats anteriors per al disseny dels enllaços; pots utilitzar qualsevol propietat que vulguis. Només procura no esbojarrar-te!

+
+ +

Aplicar estil a enllaços

+ +

Ara que hem examinat amb una mica de detall els estats per defecte dels enllaços, vegem un conjunt típic d'estils d'enllaç.

+ +

Per començar, escriurem un conjunt de regles buides:

+ +
a {
+
+}
+
+
+a:link {
+
+}
+
+a:visited {
+
+}
+
+a:focus {
+
+}
+
+a:hover {
+
+}
+
+a:active {
+
+}
+ +

Aquest ordre és important perquè els estils d'enllaç es construeixen els uns sobre els altres, per exemple, els estils de la primera regla s'aplicaran a tots els subsegüents, i quan s'activa un enllaç, també s'hi passa per sobre. Si els posem en l'ordre equivocat, les coses no funcionaran correctament. Per recordar l'ordre, pots provar d'usar un mnemotècnic com LoVe Fears HAte.

+ +

Ara afegim una mica més d'informació per a obtenir aplicar-hi els estils adequats:

+ +
body {
+  width: 300px;
+  margin: 0 auto;
+  font-size: 1.2rem;
+  font-family: sans-serif;
+}
+
+p {
+  line-height: 1.4;
+}
+
+a {
+  outline: none;
+  text-decoration: none;
+  padding: 2px 1px 0;
+}
+
+a:link {
+  color: #265301;
+}
+
+a:visited {
+  color: #437A16;
+}
+
+a:focus {
+  border-bottom: 1px solid;
+  background: #BAE498;
+}
+
+a:hover {
+  border-bottom: 1px solid;
+  background: #CDFEAA;
+}
+
+a:active {
+  background: #265301;
+  color: #CDFEAA;
+}
+ +

També et proporcionem un exemple d'HTML al qual aplicar el CSS:

+ +
<p>There are several browsers available, such as <a href="https://www.mozilla.org/en-US/firefox/">Mozilla
+Firefox</a>, <a href="https://www.google.com/chrome/index.html">Google Chrome</a>, and
+<a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Microsoft Edge</a>.</p>
+ +

Si ho posem tot junt, obtenim aquest resultat:

+ +

{{ EmbedLiveSample('Aplicar_estil_a_enllaços', '100%', 150) }}

+ +

Què hem fet aquí? Sens dubte, això es diferent de l'estil predeterminat, però encara proporciona una experiència prou familiar perquè els usuaris sàpiguen què passa:

+ + + +

Aprenentatge actiu: Fes el teu propi disseny d’enllaç

+ +

En aquesta sessió d'aprenentatge actiu, et proposem que aprenguis el nostre conjunt de regles buides i hi afegeixis les teves declaracions pròpies perquè els teus enllaços llueixin fantàstics! Utilitza la imaginació, deixa't anar! Segur que pots trobar alguna cosa tan funcional com el nostre exemple, i més fresca!

+ +

Si t’equivoques, sempre pots tornar a començar amb el botó Reinicia. Si t’encalles, prem el botó Mostra la solució per a inserir l'exemple mostrat a dalt.

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 800) }}

+ +

Icones en els enllaços

+ +

Una pràctica comuna és incloure icones en els enllaços per a proporcionar més d'un indicador quant al tipus de contingut al qual apunta l'enllaç. Vegem-ne un exemple molt senzill, que afegeix una icona als enllaços externs (enllaços que apunten cap a altres llocs web). Aquesta icona normalment té l’aspecte d’una petita fletxa que apunta cap enfora d'una caixa: per a aquest exemple, utilitzarem aquest fantàstic exemple de icons8.com.

+ +

Vegem alguns HTML i CSS, que ens donarà l'efecte que volem. En primer lloc, alguns simple HTML a l'estil:

+ +
<p>For more information on the weather, visit our <a href="weather.html">weather page</a>,
+look at <a href="https://en.wikipedia.org/wiki/Weather">weather on Wikipedia</a>, or check
+out <a href="http://www.extremescience.com/weather.htm">weather on Extreme Science</a>.</p>
+ +

A continuació, el CSS:

+ +
body {
+  width: 300px;
+  margin: 0 auto;
+  font-family: sans-serif;
+}
+
+p {
+  line-height: 1.4;
+}
+
+a {
+  outline: none;
+  text-decoration: none;
+  padding: 2px 1px 0;
+}
+
+a:link {
+  color: blue;
+}
+
+a:visited {
+  color: purple;
+}
+
+a:focus, a:hover {
+  border-bottom: 1px solid;
+}
+
+a:active {
+  color: red;
+}
+
+a[href*="http"] {
+  background: url('https://mdn.mozillademos.org/files/12982/external-link-52.png') no-repeat 100% 0;
+  background-size: 16px 16px;
+  padding-right: 19px;
+}
+ +

{{ EmbedLiveSample('Icones_en_els_enllaços', '100%', 150) }}

+ +

Què passa aquí, doncs? Ens saltarem la major part del CSS, perquè és la mateixa informació que ja has vist abans. Tanmateix, l'última regla és interessant perquè inserim una imatge de fons personalitzada en els enllaços externs d'una manera similar a com hem tractat les vinyetes personalitzades dels elements de llista de l'article anterior, però fem servir la propietat abreujada {{cssxref("background")}}, en comptes de les propietats individuals. Establim la ruta a la imatge que volem inserir i especifiquem no-repeat perquè només se’n vegi una còpia, i a continuació especifiquem la posició com al 100% a la dreta del contingut de text i a 0 píxels de l’extrem superior.

+ +

També fem servir {{cssxref("background-size")}} per a especificar la mida amb què volem que es mostri la imatge de fons; és útil tenir una icona més gran i canviar-ne la mida per a propòsits de disseny de webs adaptatius. Tanmateix, això només funciona amb IE 9 i posteriors, de manera que si has de donar suport a aquests navegadors antics, només has de canviar la mida de la imatge i inserir-la tal qual.

+ +

Finalment, establim una mica de {{cssxref("padding-right")}} als enllaços perquè la imatge de fons tingui espai i no es superposi amb el text.

+ +

Per acabar, com etiquetem els enllaços externs? Bé, si escrius els teus enllaços HTML correctament, només has d'utilitzar URL absoluts en el codi d’etiquetatge dels enllaços externs; per enllaçar a altres parts del teu lloc web propi és més eficient utilitzar enllaços relatius. Per tant, el text «http» només hauria d'aparèixer en enllaços externs i pots etiquetar-los amb un selector d'atributs: a[href*="http"] selecciona elements {{htmlelement("a")}}, però només si tenen un atribut {{htmlattrxref("href","a")}} amb un valor que conté «http» en algun lloc.

+ +

Això és tot — torna a visitar la secció d'aprenentatge actiu anterior i prova aquesta tècnica nova.

+ +
+

Nota: No et preocupis si encara no tens prou familiaritat amb els fons i el disseny web adaptatiu perquè s’expliquen en altres articles.

+
+ +

Enllaços amb estil de botó

+ +

Les eines que has explorat fins ara en aquest article també es poden utilitzar d'altres maneres. Per exemple, els estats com el flotant (hover) es poden utilitzar per a dissenyar molts elements diferents, no només enllaços; pot ser que vulguis dissenyar estats flotants (hover) per a paràgrafs, elements de llista o altres elements.

+ +

A més, és habitual aplicar estil als enllaços perquè semblin i es comportin com botons en determinades circumstàncies — el menú de navegació d’un lloc web s’acostuma a marcar com una llista que conté enllaços, i es pot configurar fàcilment perquè sembli un conjunt de botons o pestanyes de control que proporcionen a l'usuari accés a les altres parts del lloc web. Expliquem com es fa.

+ +

Primer, una mica d’HTML:

+ +
<ul>
+  <li><a href="#">Home</a></li><li><a href="#">Pizza</a></li><li><a href="#">Music</a></li><li><a href="#">Wombats</a></li><li><a href="#">Finland</a></li>
+</ul>
+ +

I ara, el nostre CSS:

+ +
body,html {
+  margin: 0;
+  font-family: sans-serif;
+}
+
+ul {
+  padding: 0;
+  width: 100%;
+}
+
+li {
+  display: inline;
+}
+
+a {
+  outline: none;
+  text-decoration: none;
+  display: inline-block;
+  width: 19.5%;
+  margin-right: 0.625%;
+  text-align: center;
+  line-height: 3;
+  color: black;
+}
+
+li:last-child a {
+  margin-right: 0;
+}
+
+a:link, a:visited, a:focus {
+  background: yellow;
+}
+
+a:hover {
+  background: orange;
+}
+
+a:active {
+  background: red;
+  color: white;
+}
+ +

Això ens dona el resultat següent:

+ +

{{ EmbedLiveSample('Enllaços_amb_estil_de_botó', '100%', 100) }}

+ +

Expliquem què passa aquí, i ens centrem en les parts més interessants:

+ + + +
+

Nota: És possible que hagis observat que en l’HTML hem col·locat tots els elements de llista en la mateixa línia; fem això perquè els espais / les línies entre els elements de línia de bloc creen espais a la pàgina, com els espais que hi ha entre les paraules, i aquests espais trencarien el disseny de menú de navegació horitzontal. De manera que hem eliminat els espais. Pots trobar més informació sobre aquest problema (i les solucions) a Fighting the space between inline block elements.

+
+ +

Resum

+ +

Esperem que aquest article t’hagi proporcionat tot el que has de saber sobre els enllaços, per ara. L'article final del nostre mòdul de text «Aplicació d’estils» explica com pots utilitzar tipus de lletra personalitzats en els teus llocs web o tipus de lletra per a web, com es coneixen més sovint.

+ +

{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}

diff --git a/files/ca/learn/css/styling_text/styling_lists/index.html b/files/ca/learn/css/styling_text/styling_lists/index.html new file mode 100644 index 0000000000..6caa6e0e24 --- /dev/null +++ b/files/ca/learn/css/styling_text/styling_lists/index.html @@ -0,0 +1,382 @@ +--- +title: Estils de llistes +slug: Learn/CSS/Estilitzar_text/Llistes_estil +tags: + - Article + - Beginner + - CSS + - Guide + - Styling + - Text + - bullets + - lists +translation_of: Learn/CSS/Styling_text/Styling_lists +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}
+ +

Les llistes es comporten com qualsevol altre text en la seva major part, però hi ha algunes propietats CSS específiques de les llistes que has de conèixer i algunes bones pràctiques que has de tenir en compte. Aquest article ho explica tot.

+ + + + + + + + + + + + +
Requisits previs:Coneixements bàsics d'informàtica, els fonaments d'HTML (estudi Introducció a HTML ), fonaments CSS (estudi Introducció a CSS), fonaments d’aplicació d’estil i tipus de lletra a textos amb CSS.
Objectiu:Familiaritzar-se amb les bones pràctiques i propietats relacionades amb l’aplicació d'estil a les llistes .
+ +

Un exemple senzill de llista

+ +

Per començar, observa un exemple senzill de llista. Al llarg d'aquest article, veurem llistes no ordenades, ordenades i de descripció: totes tenen característiques d'estil similars, i algunes que són particulars per al tipus de llista concret. Tens l'exemple sense estil disponible a GitHub (consulta també el codi d’origen).

+ +

El codi HTML del nostre exemple de llista té aquest aspecte:

+ +
<h2>Shopping (unordered) list</h2>
+
+<p>Paragraph for reference, paragraph for reference, paragraph for reference,
+paragraph for reference, paragraph for reference, paragraph for reference.</p>
+
+<ul>
+  <li>Humous</li>
+  <li>Pitta</li>
+  <li>Green salad</li>
+  <li>Halloumi</li>
+</ul>
+
+<h2>Recipe (ordered) list</h2>
+
+<p>Paragraph for reference, paragraph for reference, paragraph for reference,
+paragraph for reference, paragraph for reference, paragraph for reference.</p>
+
+<ol>
+  <li>Toast pitta, leave to cool, then slice down the edge.</li>
+  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
+  <li>Wash and chop the salad.</li>
+  <li>Fill pitta with salad, humous, and fried halloumi.</li>
+</ol>
+
+<h2>Ingredient description list</h2>
+
+<p>Paragraph for reference, paragraph for reference, paragraph for reference,
+paragraph for reference, paragraph for reference, paragraph for reference.</p>
+
+<dl>
+  <dt>Humous</dt>
+  <dd>A thick dip/sauce generally made from chick peas blended with tahini, lemon juice, salt, garlic, and other ingredients.</dd>
+  <dt>Pitta</dt>
+  <dd>A soft, slightly leavened flatbread.</dd>
+  <dt>Halloumi</dt>
+  <dd>A semi-hard, unripened, brined cheese with a higher-than-usual melting point, usually made from goat/sheep milk.</dd>
+  <dt>Green salad</dt>
+  <dd>That green healthy stuff that many of us just use to garnish kebabs.</dd>
+</dl>
+ +

Si ara vas a l'exemple en directe i investigues els elements de la llista amb les eines de desenvolupador del navegador, t’adonaràs que hi ha un parell d'estils per defecte:

+ + + +

Tractament dels espais en llistes

+ +

Quan fas llistes d'estil, has d'ajustar-ne els estils perquè mantinguin el mateix espai vertical que els elements que l'envolten (com ara paràgrafs i imatges, que de vegades s’anomena ritme vertical), i el mateix espaiat horitzontal que la resta (observa l'exemple d'estil acabat a GitHub, i també el codi d’origen que hi trobaràs).

+ +

El CSS que s’utilitza per a aplicar l'estil al text i l'espaiat és el següent:

+ +
/* General styles */
+
+html {
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 10px;
+}
+
+h2 {
+  font-size: 2rem;
+}
+
+ul,ol,dl,p {
+  font-size: 1.5rem;
+}
+
+li, p {
+  line-height: 1.5;
+}
+
+/* Description list styles */
+
+
+dd, dt {
+  line-height: 1.5;
+}
+
+dt {
+  font-weight: bold;
+}
+
+dd {
+  margin-bottom: 1.5rem;
+}
+ + + +

Estils específics de llista

+ +

Hem examinat l'espaiat general de les llistes, ara explorarem algunes propietats específiques de la llista. Per començar, hi ha tres propietats que has de conèixer, que es poden establir en els elements {{htmlelement("ul")}} o {{htmlelement("ol")}}:

+ + + +

Estils de vinyeta

+ +

Com s'ha comentat, la propietat {{cssxref("list-style-type")}} permet establir quin tipus de vinyeta s'usa per als punts de vinyeta. En el nostre exemple, hem establert que la llista ordenada utilitzi números romans en majúscules, amb:

+ +
ol {
+  list-style-type: upper-roman;
+}
+ +

Això ens dona l’aspecte següent:

+ +

Una llista ordenada amb vinyetes que apareixex fora del text de l'element de llista.

+ +

Podeu trobar moltes més opcions consultant la pàgina de referència {{cssxref("list-style-type")}}.

+ +

Posició de la vinyeta

+ +

La propietat {{cssxref("list-style-position")}} estableix si les vinyetes apareixen dins dels elements de llista, o a fora, abans de l'inici de cada element. El valor predeterminat és outside (fora), que fa que les vinyetes se situïn fora dels elements de llista, tal com hem vist.

+ +

Si estableixes el valor inside (dins), les vinyetes se situen dins de les línies:

+ +
ol {
+  list-style-type: upper-roman;
+  list-style-position: inside;
+}
+ +

Una llista ordenada amb vinyetes que apareixex dins del text de l'element de llista.

+ +

Ús d'una imatge de vinyeta personalitzada

+ +

La propietat {{cssxref("list-style-image")}} et permet fer servir una imatge personalitzada per a la vinyeta. La sintaxi és bastant senzilla:

+ +
ul {
+  list-style-image: url(star.svg);
+}
+ +

Tanmateix, aquesta propietat és una mica limitada en termes de control de la posició, la mida, etc., de les vinyetes. És millor utilitzar la família de propietats {{cssxref("background")}}, que aprendràs amb més detall en el mòdul de Aplicar estil a les caixes. De moment, aquí en tens un tast!

+ +

En el nostre exemple acabat, hem aplicat estil a la llista no ordenada d’aquesta manera (a sobre del que ja has vist abans):

+ +
ul {
+  padding-left: 2rem;
+}
+
+ul li {
+  padding-left: 2rem;
+  list-style-type: none;
+  background-image: url(star.svg);
+  background-position: 0 0;
+  background-size: 1.6rem 1.6rem;
+  background-repeat: no-repeat;
+}
+ +

Aquí hem fet el següent:

+ + + +

Això ens dona el resultat següent:

+ +

Una llista no ordenada amb vinyetes en forma de petites estrelles.

+ +

La propietat abreujada list-style

+ +

Les tres propietats anteriors esmentades es poden configurar amb una única propietat abreujada, {{cssxref("list-style")}}. Per exemple, el CSS següent:

+ +
ul {
+  list-style-type: square;
+  list-style-image: url(example.png);
+  list-style-position: inside;
+}
+ +

Podria reemplaçar-se per això:

+ +
ul {
+  list-style: square url(example.png) inside;
+}
+ +

Els valors es poden incloure en qualsevol ordre, i pots utilitzar-ne un, dos o els tres (els valors predeterminats que s’utilitzen per a les propietats que no s'inclouen són disc, none i outside). Si s'especifica un tipus i una imatge, el tipus s'utilitza com a alternativa si la imatge no es carrega per alguna raó.

+ +

El control de la numeració de les llistes

+ +

De vegades pot ser que vulguis numerar de manera diferent una llista ordenada, per exemple, que comenci a partir d'un número diferent de 1, o bé que compti enrere, o que compti en passos de més d'1. L'HTML i el CSS disposen d’algunes eines que et poden ajudar amb això.

+ +

start

+ +

L'atribut {{htmlattrxref("start", "ol")}} permet iniciar el recompte de la llista a partir d'un número diferent de 1. L’exemple següent:

+ +
<ol start="4">
+  <li>Toast pitta, leave to cool, then slice down the edge.</li>
+  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
+  <li>Wash and chop the salad.</li>
+  <li>Fill pitta with salad, humous, and fried halloumi.</li>
+</ol>
+ +

Dona aquesta sortida:

+ +

{{ EmbedLiveSample('start', '100%', 150) }}

+ +

reversed

+ +

L'atribut {{htmlattrxref("reversed","ol")}} inicia la llista comptant cap enrere en comptes de cap endavant. L'exemple següent

+ +
<ol start="4" reversed>
+  <li>Toast pitta, leave to cool, then slice down the edge.</li>
+  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
+  <li>Wash and chop the salad.</li>
+  <li>Fill pitta with salad, humous, and fried halloumi.</li>
+</ol>
+ +

Dona aquesta sortida:

+ +

{{ EmbedLiveSample('reversed', '100%', 150) }}

+ +

value

+ +

L'atribut {{htmlattrxref("value", "ol")}} permet establir valors numèrics específics per a cada element de llista. L’exemple següent:

+ +
<ol>
+  <li value="2">Toast pitta, leave to cool, then slice down the edge.</li>
+  <li value="4">Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
+  <li value="6">Wash and chop the salad.</li>
+  <li value="8">Fill pitta with salad, humous, and fried halloumi.</li>
+</ol>
+ +

Dona aquesta sortida:

+ +

{{ EmbedLiveSample('value', '100%', 150) }}

+ +
+

Nota: Fins i tot si fas servir un valor de {{cssxref("list-style-type")}} no numèric, cal que utilitzis els valors numèrics equivalents per a l'atribut value.

+
+ +

Aprenentatge actiu: Aplicar estil a una llista imbricada

+ +

En aquesta sessió d'aprenentatge actiu, volem que prenguis allò que has après i dissenyis una llista imbricada. T’hem proporcionat un codi HTML, i volem que:

+ +
    +
  1. Apliquis vinyetes quadrades als elements de llista no ordenada.
    2. +
  2. Apliquis als elements de llista no ordenada i els elements de llista ordenada una alçada de línia d'1,5 respecte de la mida de la lletra.
    3. +
  3. Apliquis als elements de llista ordenada valors de lletra minúscula.
    4. +
  4. No dubtis de jugar amb l'exemple de llistes tant com vulguis, experimenta amb els tipus de vinyeta, l’espaiat o qualsevol altra cosa que hi trobis.
    5. +
+ +

Si t’equivoques, sempre pots tornar a començar amb el botó Reinicia. Si t’encalles, prem el botó Mostra la solució per veure’n una resposta possible.

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 800) }}

+ +

Vegeu també

+ +

Els comptadors CSS proporcionen eines avançades per a personalitzar el recompte i l'estil de les llistes, però són bastant complexos. Et recomanem que hi facis un cop d'ull si vols ampliar la informació. Vegeu:

+ + + +

Resum

+ +

Resulta relativament fàcil de dominar l'aplicació d’estil a les llistes una vegada que en coneixes els principis bàsics associats i les propietats específiques. En l’article següent continuarem amb les tècniques d'estil.

+ +

{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}

diff --git a/files/ca/learn/css/styling_text/typesetting_a_homepage/index.html b/files/ca/learn/css/styling_text/typesetting_a_homepage/index.html new file mode 100644 index 0000000000..2619be67e7 --- /dev/null +++ b/files/ca/learn/css/styling_text/typesetting_a_homepage/index.html @@ -0,0 +1,112 @@ +--- +title: Composició d'una pàgina d'inici de l'escola comunitaria +slug: Learn/CSS/Estilitzar_text/Composició_pàgina_inici +tags: + - Assessment + - Beginner + - CSS + - CodingScripting + - Link + - Styling text + - font + - list + - web font +translation_of: Learn/CSS/Styling_text/Typesetting_a_homepage +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}
+ +

En aquesta avaluació, comprovarem la comprensió de totes les tècniques d'estil de text que hem cobert al llarg d'aquest mòdul, que us permetrà personalitzar el text de la pàgina d'inici d'una escola comunitària. Podríeu tindra una mica de diversió durant el camí.

+ + + + + + + + + + + + +
Requisits previs:Abans d'intentar aquesta avaluació, hauríeu d'haver treballat tots els articles d'aquest mòdul.
Objectiu:Provar la comprensió de les tècniques d'estil de text CSS.
+ +

Punt de partida

+ +

Per començar aquesta avaluació, heu de:

+ + + +
+

Nota: Com a alternativa, podeu utilitzar un lloc com JSBin o Thimble per fer la vostra avaluació. Podeu enganxar el codi HTML i omplir el CSS en un d'aquests editors en línia i utilitzar aquest URL per indicar la imatge de fons. Si l'editor en línia que esteu utilitzant no té cap panell CSS separat, no dubteu a posar-lo en un element <style> a la capçalera del document.

+
+ +

Resum del projecte

+ +

Us hem proporcionat un codi HTML sense format per a la pàgina d'inici d'una universitat comunitària imaginària, a més d'alguns estils CSS de la pàgina en un disseny de dues columnes, proporcionant un estil rudimentari. Heu d'escriure els vostres afegits CSS a sota del comentari a la part inferior del fitxer CSS, per assegurar-vos que sigui fàcil marcar les parts que heu realitzat. No us preocupeu si alguns dels selectors són repetitius; en aquest cas us deixarem.

+ +

Fonts:

+ + + +

Estil de text general :

+ + + +

Enllaços:

+ + + +

Llistes:

+ + + +

Menú de navegació

+ + + +

Consells i suggeriments

+ + + +

Exemple

+ +

La següent captura de pantalla mostra un exemple del que podria semblar el disseny final:

+ +

+ +

Avaluació

+ +

Si seguiu aquesta avaluació com a part d'un curs organitzat, hauríeu de poder lliurar el vostre treball al vostre professor/mentor per qualificar-ho. Si esteu en auto-aprenentatge, podreu obtenir la guia de qualificacions amb força facilitat preguntant sobre el tema en el fil de conversa en l'àrea d'aprenentatge, o en el canal IRC #mdn en Mozilla IRC. Intenteu primer l'exercici - no es guanya res fent trampes!

+ +

{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}

diff --git a/files/ca/learn/css/styling_text/web_fonts/index.html b/files/ca/learn/css/styling_text/web_fonts/index.html new file mode 100644 index 0000000000..b4d1e8ecfd --- /dev/null +++ b/files/ca/learn/css/styling_text/web_fonts/index.html @@ -0,0 +1,193 @@ +--- +title: Fonts Web +slug: Learn/CSS/Estilitzar_text/Fonts_Web +tags: + - '@font-face' + - Article + - Beginner + - CSS + - Fonts + - Guide + - Learn + - font-family + - web fonts +translation_of: Learn/CSS/Styling_text/Web_fonts +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}
+ +

En el primer article del mòdul hem explorat les característiques bàsiques de CSS que hi ha disponibles per a aplicar estil a la lletra i el text. En aquest article anem més lluny i explorem els tipus de lletra per a web amb detall, que permeten descarregar tipus de lletra personalitzats junt amb la teva pàgina web i et proporciona més varietat i personalització en l’aplicació d’estil als textos.

+ + + + + + + + + + + + +
Requisits previs:Coneixements bàsics d'informàtica, fonaments d'HTML (consulta la Introducció a l’HTML), fonaments de CSS (consulta la Introducció al CSS), fonaments d’aplicació d’estil a tipus de lletra i textos.
Objectiu:Aprendre com aplicar tipus de lletra per a web a una pàgina web utilitzant un servei de tercers o escrivint el teu codi propi.
+ +

Recapitulació sobre famílies de tipus de lletra

+ +

Com hem vist en l’article Fonaments d’aplicació d’estil a la lletra i els textos, pots controlar les fonts que fas servir per al teu HTML amb la propietat {{cssxref("font-family")}}. Aquesta propietat pren un o més noms de famílies de tipus de lletra i el navegador recorre la llista fins que troba un tipus de lletra que estigui disponible en el sistema en què s'executa:

+ +
p {
+  font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif;
+}
+ +

Aquest sistema funciona bé, però tradicionalment les opcions de tipus de lletra per al desenvolupament web han estat limitades. Només hi ha un grapat de tipus de lletra per a les que pots garantir la disponibilitat en tots els sistemes habituals, els anomenats tipus de lletra segurs per al web (web-safe fonts). Pots especificar la llista dels tipus de lletra preferents, seguits dels tipus de lletra alternatius segurs per al web, seguits dels tipus de lletra del sistema per defecte, però això afegeix una sobrecàrrega en termes de proves per a assegurar-te que els teus dissenys de pàgina presenten un aspecte correcte amb cada tipus de lletra, etc.

+ +

Tipografies web

+ +

Però hi ha una alternativa, que funciona molt bé, ja des de la versió 6 d'IE. Les tipografies web són una característica CSS que et permet especificar els fitxers de tipus de lletra que vols que es descarreguin juntament amb el teu lloc web quan s’hi accedeix, i això fa que qualsevol navegador que admet tipografies web pot disposar exactament dels tipus de lletra que especifiques. Increïble! La sintaxi necessària presenta aquest aspecte:

+ +

En primer lloc, hi ha un bloc de codi {{cssxref("@font-face")}} al començament del CSS, que especifica els fitxers de tipus de lletra que vols que es descarreguin:

+ +
@font-face {
+  font-family: "myFont";
+  src: url("myFont.ttf");
+}
+ +

A continuació pots aplicar el nom de la família del tipus de lletra personalitzada que has especificat en @font-face a qualsevol cosa que vulguis, de la manera habitual:

+ +
html {
+  font-family: "Bitstream Vera Serif Bold", serif;
+}
+ +

La sintaxi es comença a complicar una mica. A continuació hi entrem amb detall.

+ +

Hi ha dues coses importants que cal tenir en compte sobre els tipus de lletra segurs per al web:

+ +
    +
  1. Els navegadors admeten diversos formats de tipus de lletra, de manera que necessites diversos formats de tipus de lletra per a atènyer una compatibilitat de navegador decent. Per exemple, la majoria dels navegadors més moderns admeten WOFF / WOFF2 (Web Open Font Format, versions 1 i 2), el format més eficient per a tot, però les versions anteriors d'IE només admeten tipus de lletra EOT (Embedded Open Type), i és possible que hagis d'incloure una versió de tipus de lletra SVG per tenir compatibilitat amb versions anteriors dels navegadors iPhone i Android. A continuació et mostrarem com generar el codi necessari.
    2. +
  2. Normalment els tipus de lletra no són d’ús lliure. Cal pagar per a fer-los servir o assumir unes condicions de llicència, com ara acreditar el creador del tipus de lletra en el codi (o en el teu lloc web). No hauries de robar els tipus de lletra ni utilitzar-los sense donar-ne el crèdit adequat.
    3. +
+ +
+

Nota: Els tipus de lletra web com a tecnologia són compatibles amb Internet Explorer des de la versió 4!

+
+ +

Aprenentatge actiu: Un exemple de tipografia web

+ +

Tenint en compte això, construïm un exemple bàsic de tipografia web des de zero. És difícil mostrar-ho a partir d’un exemple en viu, de manera que, en lloc d'això, seguirem els passos detallats en les seccions següents, per a tenir una idea del procés.

+ +

Has d'utilitzar els fitxers web-font-start.html i web-font-start.css com a punt de partida per a afegir el codi (consulta també el codi de l’exemple en viu). Fes també una còpia d'aquests fitxers en un directori nou al teu ordinador. En el fitxer web-font-start.css hi ha una mica de CSS per tractar el disseny bàsic i la tipografia de l'exemple.

+ +

Buscar tipus de lletra

+ +

Per a aquest exemple, utilitzarem dos tipografies web, un per als títols d’encapçalament i un per al text del cos (body). Per començar, hem de trobar els fitxers que contenen els tipus de lletra. Els tipus de lletra es creen en estudis de disseny i s'emmagatzemen en diferents formats de fitxer. En general, hi ha tres tipus de llocs web en què pots obtenir tipus de lletra:

+ + + +

Busquem ara alguns tipus de lletra! Ves a Font Squirrel i tria dos tipus de lletra, un que et resulti interessant i agradable per als títols (ppotser una bona tipografia tipus "Display" o "Slab Serif"), i un altre una mica menys cridaner i que resulti més llegible, per als paràgrafs. Quan hagis trobat cada tipus, prem el botó de descàrrega i desa el fitxer en el mateix directori que hi ha els fitxers HTML i CSS que has desat abans. No importa si són en format TTF (True Type Fonts) o OTF (Open Type Fonts).

+ +

En cada cas, descomprimeix el paquet amb els tipus de lletra (les tipografies web s’acostumen a distribuir en fitxers ZIP que contenen els fitxers dels tipus de lletra i la informació de la llicència). Pots trobar diversos fitxers de tipus de lletra en el paquet —alguns tipus de lletra es distribueixen com una família, amb diverses variants disponibles, per exemple, fina, seminegreta, negreta, cursiva, cursiva fina, etc. Per a aquest exemple, només cal que et preocupis d'un únic fitxer de tipus de lletra per cada elecció.

+ +
+

Nota: en la columna de la dreta de la secció «Busca tipus de lletra», pots fer clic en les diverses etiquetes, i classificacions per filtrar les opcions que es mostren.

+
+ +

Generació del codi necessari

+ +

Ara cal generar el codi necessari (i els formats de tipus de lletra). Per cada tipografia, segueix aquests passos:

+ +
    +
  1. Assegura’t que compleixes tots els requisits de llicència si vols fer servir això en un projecte comercial o en el web.
    2. +
  2. Ves al Webfont Generator de Font Squirrel.
    3. +
  3. Carrega els dos fitxers de tipus de lletra amb el botó Upload Fonts.
    4. +
  4. Marca la casella de verificació amb el text «Sí, els tipus de lletra que carrego són legalment aptes per a la inclusió en el web».
    5. +
  5. Fes clic a Download your kit.
    6. +
+ +

Un cop el generador ha acabat de processar, has d'obtenir un fitxer ZIP, descarregar-lo i desar-lo al mateix directori que els teus HTML i CSS.

+ +

Implementar el codi a la teva demo

+ +

En aquest punt, has de descomprimir el paquet de fitxers de tipus de lletra segurs per al web que acabes de generar. Dins del directori descomprimit, hi haurà tres elements útils:

+ + + +

Per a implementar aquests tipus de lletra en el teu exemple de demostració, segueix aquests passos:

+ +
    +
  1. Canvia el nom del directori descomprimit per un nom que sigui senzill i fàcil de recordar, com ara fonts.
    2. +
  2. Obre el fitxer stylesheet.css i copia-hi els blocs @font-face que conté en el teu fitxer web-font-start.css; has de posar-los a dalt de tot, abans de qualsevol bloc de CSS, perquè els tipus de lletra s’han d’importar abans de poder-los utilitzar en el teu lloc web.
    3. +
  3. Cadascuna de les funcions url() apunta a un fitxer de tipus de lletra que volem importar al nostre CSS; afegeix fonts/ al començament de cada ruta (o adapta-ho si cal) per a assegurar-te que les rutes d'accés als fitxers són correctes.
    4. +
  4. Ara pots utilitzar aquests tipus de lletra en les llistes d’arxius de tipus de lletra, igual que qualsevol tipus de lletra segur per al web o tipus de lletra predeterminat del sistema. Per exemple: + 
    font-family: 'zantrokeregular', serif;
    +
    5. +
+ +

Has d'acabar amb una pàgina de demostració amb alguns tipus de lletra agradables implementats. Atès que els diferents tipus de lletra es creen amb mides diferents, és possible que hagis d'ajustar la mida, l'espaiat, etc., per a ordenar-ne l'aspecte.

+ +

+ +
+

Nota: Si tens problemes perquè funcioni, no dubtis de comparar la teva versió amb els nostres fitxers acabats; consulta web-font-finished.html i web-font-finished.css (executa l'exemple acabat en directe).

+
+ +

Usar un servei de tipografies en línia

+ +

Els serveis de tipus de lletra en línia normalment emmagatzemen i serveixen tipus de lletra per tu, de manera que no t’has de preocupar d’escriure el codi @font-face, i generalment només cal que insereixis una o dues línies de codi al teu lloc web perquè tot funcioni. Alguns exemples són: Typekit i Cloud.typography. La majoria d'aquests serveis estan basats en subscripcions, amb la notable excepció de Google Fonts, un útil servei gratuït, especialment per a fer proves ràpides i demostracions d'escriptura.

+ +

La majoria d'aquests serveis són fàcils d'utilitzar, de manera que no hi entrarem amb molt de detall. Vegem ràpidament les fonts de Google, perquè puguis fer-te’n la idea. De nou, fes còpies de web-font-start.html i web-font-start.css com a punt de partida.

+ +
    +
  1. Ves a Google Fonts.
    2. +
  2. Utilitza els filtres de la banda esquerra per visualitzar els tipus de lletra que vols triar i escull un parell de tipus de lletra.
    3. +
  3. Per a seleccionar un tipus de lletra, prem el botó Add to Collection que hi ha al costat.
    4. +
  4. Quan hagis escollit els tipus de lletra, prem el botó Use que hi ha a la part inferior de la pàgina.
    5. +
  5. A la pantalla resultant, primer has de copiar la línia de codi que es mostra a la secció 3 i enganxar-la al final de tot del teu fitxer HTML. Posa-la per sobre de l'element {{htmlelement("link")}} perquè el tipus de lletra s'importi abans que el teu CSS l’hagi d’utilitzar.
    6. +
  6. A continuació, has de copiar les declaracions que hi ha en la secció 4 al teu CSS, segons correspongui, per a aplicar els tipus de lletra personalitzats al teu codi HTML.
    7. +
+ +
+

Nota: Pots trobar una versió completa a google-font.html i google-font.css, si et cal contrastar el teu treball amb el nostre (consulta-ho en directe).

+
+ +

@font-face amb més detall

+ +

Explorem la sintaxi @font-face que genera Font Squirrel. Aquest és l’aspecte que presenta un dels blocs:

+ +
@font-face {
+  font-family: 'ciclefina';
+  src: url('fonts/cicle_fina-webfont.eot');
+  src: url('fonts/cicle_fina-webfont.eot?#iefix') format('embedded-opentype'),
+         url('fonts/cicle_fina-webfont.woff2') format('woff2'),
+         url('fonts/cicle_fina-webfont.woff') format('woff'),
+         url('fonts/cicle_fina-webfont.ttf') format('truetype'),
+         url('fonts/cicle_fina-webfont.svg#ciclefina') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+ +

Això s'anomena «sintaxi a prova de bales @font-face» des d'una publicació de Paul Irish dels inicis, quan @font-face va començar a ser popular (Bulletproof @font-face Syntax). Passem a veure què fa:

+ + + +
+

Nota: També pots especificar cada valor {{cssxref("font-variant")}} i {{cssxref("font-stretch")}} per als teus tipus de lletra segurs per al web. En els navegadors més nous també pots especificar un valor {{cssxref("unicode-range")}}, que és una gamma de caràcters específica que vols utilitzar a banda del tipus de lletra segur per al web; en els navegadors compatibles amb aquesta propietat, només es descarregaran els caràcters especificats, per a estalviar descàrregues innecessàries. Creating Custom Font Stacks with Unicode-Range, de Drew McLellan, t’ofereix unes idees útils sobre com fer-ne ús.

+
+ +

Resum

+ +

Ara que has treballat els nostres articles sobre els fonaments d’aplicació d'estil al text, és hora de posar a prova el que has après amb la nostra avaluació per al mòdul, Composició tipogràfica d’una pàgina d’inici per a un lloc web d’una escola de la comunitat.

+ +

{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}

diff --git a/files/ca/learn/forms/basic_native_form_controls/index.html b/files/ca/learn/forms/basic_native_form_controls/index.html new file mode 100644 index 0000000000..73ee2a9249 --- /dev/null +++ b/files/ca/learn/forms/basic_native_form_controls/index.html @@ -0,0 +1,325 @@ +--- +title: Controls de formulari originals +slug: Learn/HTML/Forms/Controls_de_formulari_originals +translation_of: Learn/Forms/Basic_native_form_controls +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Forms/How_to_structure_an_HTML_form", "Learn/Forms/HTML5_input_types", "Learn/Forms")}}
+ +

En l’article anterior hem etiquetat un exemple de formulari web funcional, hem introduït alguns controls de formulari i elements estructurals comuns, però sobretot, ens hem centrat en l'accessibilitat. A continuació analitzarem amb detall la funcionalitat dels diferents controls de formulari, també anomenats ginys o widgets, i estudiarem totes les opcions que hi ha disponibles per a recollir diferents tipus de dades. En aquest article, veurem el conjunt original de controls de formulari que hi ha disponibles en tots els navegadors des dels primers dies.

+ + + + + + + + + + + + +
Prerequisits:Coneixements bàsics d'informàtica i una comprensió bàsica d’HTML.
Objectiu:Comprendre amb detall el conjunt de controls de formulari originals que hi ha disponibles als navegadors per a la recollida de dades, i com implementar-los amb HTML.
+ +

Ja coneixes alguns elements de formulari, com ara {{HTMLelement('form')}}, {{HTMLelement('fieldset')}}, {{HTMLelement('legend')}}, {{HTMLelement('textarea')}}, {{HTMLelement('label')}}, {{HTMLelement('button')}} i {{HTMLelement('input')}}. Aquest article exposa:

+ + + +
+

Nota: Les característiques que comentem en aquest article són compatibles amb tots els navegadors, però no amb tots els controls de formulari. En els dos articles següents expliquem els controls de formulari que s’han afegit a l’HTML5 més recentment. Si vols una referència més avançada, has de consultar la nostra referència d’elements de formulari HTML i, en particular, la nostra extensa referència de tipus <input>.

+
+ +

Camps d'entrada de text

+ +

Els camps d’entrada de text {{htmlelement("input")}} són els controls del formulari més bàsics. Són una manera molt còmoda de permetre a l’usuari introduir qualsevol tipus de dades, i ja n’hem vist alguns exemples senzills.

+ +
+

Nota: Els camps de text en format HTML són controls d’entrada de text pla. Això vol dir que no pots aplicar-hi una edició enriquida (negreta, cursiva, etc.). Tots els controls de formulari que trobis amb text enriquit són controls de formulari personalitzats creats amb HTML, CSS i JavaScript.

+
+ +

Tots els controls bàsics de text comparteixen alguns comportaments comuns:

+ + + +
+

Nota: L’element {{htmlelement("input")}} és únic entre els elements d’HTML perquè pot adoptar moltes formes diferents segons el valor del seu atribut type. S'utilitza per a crear la majoria de tipus de controls de formulari, que inclouen camps de text d'una sola línia, controls d'hora i data, controls sense entrada de text com ara caixes de selecció, botons d'opció i selectors de colors, i botons.

+
+ +

Camps de text d'una sola línia

+ +

Un camp de text d'una sola línia es crea en assignar a l'atribut {{htmlattrxref("type","input")}} d’un element {{HTMLElement("input")}} el valor text, o si l’atribut {{htmlattrxref("type","input")}} s’omet (perquè el valor per defecte d’aquest atribut és text). El valor text d’aquest atribut és també el valor alternatiu que el navegador utilitza si el valor que especifiques per a l’atribut {{htmlattrxref("type","input")}} li és desconegut (per exemple, si especifiques type="color" i el navegador no és compatible amb els selectors de color).

+ +
+

Nota: Consulta exemples de tots els tipus de camp de text d’una sola línia a GitHub, en el fitxer single-line-text-fields.html (també pots consultar l’exemple en viu).

+
+ +

A continuació es mostra un exemple bàsic de camp de text d'una sola línia:

+ +
<input type="text" id="comment" name="comment" value="I'm a text field">
+ +

Els camps de text d'una sola línia només tenen una restricció: si escrius text amb salts de línia, el navegador elimina els salts de línia abans d'enviar les dades al servidor.

+ +

La captura de pantalla següent mostra els tipus de controls d’entrada de text predeterminat, amb el focus i desactivat en Firefox 71 i Safari amb macOS i en Chrome 79 i Edge 18 amb Windows 10.

+ +

Captura de pantalla que mostra els estils de l’atribut en els estats predeterminat, amb el focus i desactivat per a un control d’entrada de text en Firefox, Safari, Chrome i Edge.

+ +
+

Nota: L'HTML5 va millorar el camp de text d'una sola línea bàsic original afegint valors especials per a l’atribut {{htmlattrxref("type","input")}} que aplica restriccions de validació específiques i altres funcions, per exemple a l'hora d'introduir adreces URL o números. Les tractarem en l’article següent: tipus d’entrada HTML5.

+
+ +

Camps de contrasenya

+ +

Un dels tipus d’entrada de text originals era el tipus de camp de text per a introduir una contrasenya (password):

+ +
<input type="password" id="pwd" name="pwd">
+ +

El valor de contrasenya (password) no afegeix cap restricció especial al text que s’introdueix al camp, però n’amaga el valor (per exemple, amb punts o asteriscs) i impedeix que altres usuaris el puguin llegir.

+ +

Tingues en compte que es tracta només d’una funció d’interfície d’usuari; si no és que envies el formulari d’una manera segura, s’enviarà un text pla, i això no és aconsellable per a la seguretat. Una persona maliciosa podria interceptar les teves dades i robar-te contrasenyes, dades de la targeta de crèdit o qualsevol cosa que hagis enviat. La millor manera de protegir els usuaris d’això és allotjar les pàgines que incloguin formularis en una connexió segura (és a dir, una adreça https://...), perquè les dades se xifrin abans d’enviar-se.

+ +

Els navegadors reconeixen les implicacions de seguretat de l'enviament de dades del formulari per una connexió no segura i disposen de missatges d’advertiments per a dissuadir els usuaris d'utilitzar formularis no segurs. Per a obtenir més informació sobre el que implementa Firefox, consulta l’article Contrasenyes insegures.

+ +

Contingut ocult

+ +

Un altre control de text original és el tipus d’entrada hidden. S'utilitza per a crear un control de formulari que és invisible per a l'usuari, però que s'envia al servidor juntament amb la resta de dades del formulari. Per exemple, pot ser que vulguis enviar una marca de temps al servidor que indiqui quan s’ha fet una comanda. Com que és un control ocult, l’usuari no el pot veure ni editar-ne el valor de manera intencionada, mai no rep el focus i un lector de pantalla tampoc no el detecta.

+ +
<input type="hidden" id="timestamp" name="timestamp" value="1286705410">
+
+ +

Quan crees aquest element, cal que hi configuris els atributs name i value. El valor es pot configurar dinàmicament amb JavaScript. El tipus d’entrada hidden no hauria de tenir cap etiqueta associada.

+ +

Amb HTML5 es van afegir altres tipus d'entrada de text, com {{HTMLElement("input/search", "search")}}, {{HTMLElement("input/url", "url")}} i {{HTMLElement("input/tel", "tel")}}. Es tracten en el tutorial següent: tipus d’entrada HTML5.

+ +

Elements de selecció: caselles de selecció i botons d'opció

+ +

Els elements de selecció (o checkable items, en anglès) són controls dels quals pots canviar l’estat fent-hi clic a sobre o en les etiquetes que hi estan associades. Hi ha dos tipus d’elements de selecció: la casella de selecció, o check box, i el botó d'opció, o radio button. Tots dos utilitzen l’atribut checked per indicar si el control està en estat seleccionat per defecte o no.

+ +

Val la pena assenyalar que aquests controls no es comporten exactament igual que altres controls de formulari. Per a la majoria de controls de formulari, un cop validat el formulari s’envien tots els controls que tenen un atribut name, fins i tot si no se n’ha omplert el valor. En el cas dels elements de selecció, els valors s’envien només si estan seleccionats. Si no ho estan, no s'envia res, ni tan sols el nom. Si estan seleccionats però no tenen cap valor, el nom s'envia amb el valor on.

+ +
+

Nota: Pots trobar els exemples d'aquesta secció a GitHub, en el fitxer checkable-items.html (o també consultar-ne l’exemple en viu).

+
+ +

Per a assolir una usabilitat/accessibilitat màxima, es recomana delimitar cada llista d’elements que estan relacionats entre si dins d'un element {{htmlelement("fieldset")}} amb un element {{htmlelement("legend")}} que ofereixi una descripció general de la llista. Cada parella d'elements {{htmlelement("label")}}/{{htmlelement("input")}} hauria d’estar continguda en un element de llista (o similar) propi. L'element associat {{htmlelement('label')}} se situa en general immediatament a continuació del botó d'opció o de la caixa de verificació, i les instruccions del grup de botons d'opció o caselles de selecció solen ser el contingut de l'element {{htmlelement("legend")}}. Observa els exemples estructurals que et presentem en l’enllaç anterior.

+ +

Caselles de verificació

+ +

Una casella de verificació es crea amb l’element {{HTMLElement("input")}} i un atribut type amb el valor {{HTMLElement("input/checkbox", "checkbox")}}.

+ +
<input type="checkbox" id="carrots" name="carrots" value="carrots" checked>
+
+ +

Si s’hi inclou l’atribut checked, la casella de verificació es marca automàticament en carregar-se la pàgina. Si s’hi fa clic, en la casella de verificació o en l’etiqueta associada, la casella de verificació canvia entre els estats activat o desactivat.

+ +

Les captures de pantalla següents mostren les caselles de verificació en els estats per defecte, amb el focus i desactivat en Firefox 71 i Safari 13 amb macOS i Chrome 79 i en Edge 18 amb Windows 10:

+ +

Caselles de verificació en els estats per defecte, amb el focus i desactivat en Firefox 71 i Safari 13 amb macOS i Chrome 79 i en Edge 18 amb Windows 10

+ +
+

Nota: La pseudoclasse {{cssxref(':default')}} selecciona les caselles de verificació i els botons d'opció que presenten l'atribut checked en el moment de carregar-se la pàgina, encara que ja no estiguin en l’estat checked. La pseudoclasse {{cssxref(':checked')}} selecciona només els elements que estan en estat checked.

+
+ +

A causa de la característica activada-desactivada que presenten les caselles de verificació, es consideren botons de commutació i molts desenvolupadors i dissenyadors han estès l’estil per defecte de la casella de selecció per a crear botons que semblen interruptors. Pots consultar-ne un exemple en acció aquí (o també pots consultar-ne el codi d’origen).

+ +

Botons d'opció

+ +

Un botó d'opció es crea amb l’element {{HTMLElement("input")}} i l’atribut {{htmlattrxref("type","input")}} establert en el valor radio:

+ +
<input type="radio" id="soup" name="meal" checked>
+ +

És possible associar diversos botons de ràdio. Si comparteixen el mateix valor de l’atribut {{htmlattrxref("name","input")}}, es considera que estan en el mateix grup de botons. Només és possible marcar un botó d’un grup determinat cada vegada; això vol dir que quan se’n clica un, tots els altres es desmarquen automàticament. Quan el formulari s’envia, només s’envia el valor del botó d'opció seleccionat. Si no se'n selecciona cap, es considera que el conjunt de botons d'opció està en un estat desconegut i no s’envia cap valor amb el formulari. Quan s’ha clicat un dels botons d'opció d’un mateix grup de botons, no és possible desmarcar tots els botons sense reiniciar el formulari.

+ +
<fieldset>
+  <legend>Quin és el teu menjar preferit?</legend>
+  <ul>
+    <li>
+      <label for="soup">Sopa </label>
+      <input type="radio" id="soup" name="meal" value="soup" checked>
+    </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>
+ +

Les captures de pantalla següents mostren els botons d'opció en els estats no marcat i marcat, amb el focus i desactivats: en Firefox 71 i Safari 13 amb MacOs i Chrome 79 i en Edge 18 amb Windows 10.

+ +

Botons d'opció en Firefox 71 i Safari 13 amb Mac i Chrome 79 i en Edge 18 amb Windows 10

+ +

Botons reals

+ +

En realitat, els botons d'opció no són botons, malgrat el nom. Ara anirem una mica més enllà i veurem botons autèntics! Hi ha tres tipus d’entrada que proporcionen botons:

+ +
+
submit
+
Envien les dades del formulari al servidor. Per als elements {{HTMLElement("button")}}, si s’omet l'atribut type (o es posa un valor de type no vàlid), s’obté un botó d'enviament.
+
reset
+
Restableixen tots els controls de formulari als valors predeterminats.
+
button
+
No presenten cap efecte automàtic, però es poden personalitzar amb codi JavaScript.
+
+ +

A més, l’element {{htmlelement("button")}} pot prendre un atribut type i imitar aquests tres tipus d'entrada. La diferència principal entre els dos elements és que els elements <button> autèntics admeten moltes més opcions d’estil.

+ +
+

Nota: També es pot representar com un botó el tipus d’entrada image. El tractarem més endavant també.

+
+ +
+

Nota: Pots trobar els exemples d'aquesta secció a GitHub, en els fitxers button-examples.html (o també pots consultar l’exemple en viu).

+
+ +

A continuació pots trobar exemples de cada tipus d’entrada <input> de tipus botó, juntament amb el tipus de botó equivalent.

+ +

submit

+ +
<button type="submit">
+    Aquest és un <strong>botó Enviar</strong>
+</button>
+
+<input type="submit" value="Aquest és un botó Enviar">
+ +

reset

+ +
<button type="reset">
+    Aquest és un <strong>botó Reiniciar</strong>
+</button>
+
+<Input type = "reset" value = "Aquest és un botó Reiniciar">
+ +

anonymous

+ +
<button type="button">
+    Aquest és un <strong>botó anònim</strong>
+</button>
+
+<input type="button" value="Aquest és un botó anònim">
+ +

Els botons sempre es comporten igual, tant si fas servir un element {{HTMLElement("button")}} com un element {{HTMLElement("input")}}. Però, com pots veure en els exemples, els elements {{HTMLElement("button")}} et permeten aplicar HTML al contingut inclòs entre les etiquetes <button> d'obertura i de tancament. En canvi, els elements {{HTMLElement("input")}} són elements buits; el contingut que s’hi mostra s’insereix dins de l’atribut value, i per tant només accepten contingut textual.

+ +

Els exemples següents mostren els tipus d’entrada per defecte dels botons en els estats predeterminat, amb el focus i desactivat: en Firefox 71 i Safari 13 amb macOS i Chrome 79 i en Edge 18 amb Windows 10.

+ +

Tipus d’entrada per defecte dels botons en els estats predeterminat, amb el focus i desactivat: en Firefox 71 i Safari 13 amb macOS i Chrome 79 i en Edge 18 amb Windows 10

+ +

Botons imatge

+ +

El control botó imatge es comporta exactament com un element {{HTMLElement("img")}}, però passa a comportar-se com un botó de validació quan un usuari hi fa clic.

+ +

Un botó imatge es crea amb un element {{HTMLElement("input")}} i l’atribut {{htmlattrxref("type","input")}} establert en el valor image. Aquest element admet exactament el mateix conjunt d’atributs que l’element {{HTMLElement("img")}}, i a més, tots els atributs que són compatibles amb els altres botons de formulari.

+ +
<input type="image" alt="Fes-me clic!" src="my-img.png" width="80" height="30">
+ +

Si per a validar el formulari s’utilitza un botó imatge, aquest control no envia el seu valor, sinó que s’envien les coordenades X i Y del clic que s’ha fet en la imatge (les coordenades són relatives a la imatge, és a dir, que la part superior esquerra de la imatge representa les coordenades (0, 0)). Les coordenades s’envien com dos parells clau/valor:

+ + + +

Així, per exemple, observa que en fer clic a les coordenades (123, 456) de la imatge i enviar pel mètode get, aquests valors s’annexen a l’URL de la manera següent:

+ +
http://foo.com?pos.x=123&pos.y=456
+ +

Aquesta és una manera molt còmoda de construir un «mapa interactiu». La manera d’enviar i recuperar aquests valors es detalla en l’article Enviar les dades d’un formulari.

+ +

Selector de fitxers

+ +

Un últim tipus <input> que ens va arribar amb l'HTML inicial és el tipus entrada de fitxer. Els formularis poden enviar fitxers a un servidor (aquesta acció específica també es detalla en l’article Enviar les dades d’un formulari). El control de selecció de fitxers es pot utilitzar per triar un o més fitxers que es volen enviar.

+ +

Pots crear un control de selecció de fitxers amb l’element {{HTMLElement("input")}} i l’atribut {{htmlattrxref("type","input")}} establert en el valor file. Pots restringir els tipus de fitxers que se seleccionen amb l’atribut {{htmlattrxref("accept","input")}}. A més, pots deixar que l’usuari triï més d’un fitxer si hi afegeixes l’atribut {{htmlattrxref("multiple","input")}}.

+ +

Exemple

+ +

En aquest exemple es crea un selector de fitxers que sol·licita fitxers gràfics d’imatge. En aquest cas, l'usuari té la possibilitat de seleccionar diversos fitxers.

+ +
<input type="file" name="file" id="file" accept="image/*" multiple>
+ +

En alguns dispositius mòbils, el selector de fitxers pot accedir a fotos, vídeos i àudio capturats directament per la càmera i el micròfon del dispositiu i afegir a l’atribut accept informació sobre la captura com ara:

+ +
<input type="file" accept="image/*;capture=camera">
+<input type="file" accept="video/*;capture=camcorder">
+<input type="file" accept="audio/*;capture=microphone">
+ +

Atributs comuns

+ +

Molts dels elements utilitzats per a definir controls de formulari tenen atributs específics propis. Això no obstant, hi ha un conjunt d’atributs comuns a tots els elements de formulari. Ja n'has conegut uns quants, però a continuació et presentem una llista d’aquests atributs comuns, perquè els tinguis com a referència:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Nom de l'atributValor per defecteDescripció
autofocusfalseAquest atribut booleà permet especificar que un element adquireix el focus d'entrada automàticament quan es carrega la pàgina. En un document només hi pot haver un element associat a un formulari que tingui especificat aquest atribut.
disabledfalseAquest atribut booleà indica que l'usuari no pot interactuar amb l'element. Si aquest atribut no s'especifica, l'element hereta la configuració de l'element que el conté, per exemple, {{HTMLElement("fieldset")}}; si no hi ha cap element contenidor que tingui establert l'atribut disabled, l'element està habilitat.
formL’element <form> s’utilitza per a associar el control al formulari, quan aquest no hi està imbricat. El valor de l’atribut ha de ser l’atribut id d’un element {{HTMLElement("form")}} del mateix document. D’aquesta manera pots associar un formulari un control de formulari que n’estigui fora, encara que sigui dins d’un formulari diferent.
nameEl nom de l'element; s'envia amb les dades del formulari.
valueEl valor inicial de l'element.
+ +

Resum

+ +

Aquest article ha exposat els tipus d’entrada més antics: el conjunt original introduït els primers dies de l’HTML, que és compatible amb tots els navegadors. En l'article següent analitzarem els valors més recents de l’atribut type, que s’han afegit en HTML5.

+ +

{{PreviousMenuNext("Learn/Forms/How_to_structure_an_HTML_form", "Learn/Forms/HTML5_input_types", "Learn/Forms")}}

+ +

En aquest mòdul

+ + + +

Temes avançats

+ + diff --git a/files/ca/learn/forms/form_validation/index.html b/files/ca/learn/forms/form_validation/index.html new file mode 100644 index 0000000000..0b76183d7e --- /dev/null +++ b/files/ca/learn/forms/form_validation/index.html @@ -0,0 +1,829 @@ +--- +title: Validació de formularis del costat del client +slug: Learn/HTML/Forms/Validacio_formularis +translation_of: Learn/Forms/Form_validation +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Forms/UI_pseudo-classes", "Learn/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}
+ +

Abans d’enviar dades al servidor és important assegurar-se que s’emplenen tots els controls de formulari necessaris en el format correcte. Es denomina validació de formularis del costat del client, i ajuda que les dades enviades coincideixin amb els requisits establerts en els diversos controls de formulari. Aquest article et permet conèixer els conceptes bàsics i veure exemples de validació de formularis del costat del client.

+ + + + + + + + + + + + +
Prerequisits:Coneixements bàsics d'informàtica i nocions d'HTML, CSS i JavaScript.
Objectiu:Entendre què és la validació de formularis de costat del client, per què és important i conèixer-ne diverses tècniques d’implementació.
+ +

La validació del costat del client és una comprovació inicial i una característica important que garanteix una bona experiència d’usuari; si es detecten dades no vàlides del costat del client, l'usuari pot corregir-les immediatament. Si van al servidor i aquest les rebutja, es genera un retard perquè les dades s’envien de tornada a la banda del client perquè l'usuari les corregeixi.

+ +

Tanmateix, la validació del costat del client no s'ha de considerar una mesura de seguretat exhaustiva. Les aplicacions sempre han de dur a terme comprovacions de seguretat de qualsevol informació que s’envia en un formulari tant del costat del servidor com també del costat del client, perquè la validació del client és molt fàcil de desactivar i qualsevol usuari maliciós pot enviar fàcilment dades incorrectes al teu servidor. Llegeix La seguretat dels llocs web per a fer-te una idea de què podria passar; implementar la validació del costat del servidor és fora de l’àmbit d’aquest mòdul, però l’has de tenir en compte.

+ +

Què és la validació de formularis?

+ +

Ves a qualsevol lloc web popular que tingui un formulari d’inscripció i observa que et fan comentaris quan no introdueixes les dades en el format que s’espera. Rebràs missatges com ara:

+ + + +

Això es coneix com validació de formulari. Quan introdueixes dades, el navegador i/o el servidor web comproven que les dades estan en el format correcte i són dins de les restriccions que l’aplicació estableix. La validació que es fa en el navegador s’anomena validació del costat del client, mentre que la validació que es fa en el servidor s’anomena validació del costat del servidor. En aquest article ens centrem en la validació del costat del client.

+ +

Si la informació està en el format correcte, l'aplicació permet que les dades que les dades s’enviïn al servidor i (normalment) es guarden en una base de dades; si la informació no té el format correcte, es proporciona a l'usuari un missatge d'error en què li explica què ha de corregir, i s'ha de tornar a provar.

+ +

Volem fer que l’emplenament dels formularis web sigui tan fàcil com sigui possible. Aleshores, per què insistim que cal validar els nostres formularis? Hi ha tres raons principals:

+ + + +

Els diferents tipus de validació del costat del client

+ +

Els llocs web poden presentar dos tipus diferents de validació del costat del client

+ + + +

Ús de la validació de formulari integrada

+ +

Una de les característiques més significatives dels controls de formulari HTML5 és la capacitat de validar la majoria de les dades de l'usuari sense dependre de JavaScript. Això es fa gràcies als atributs de validació dels elements del formulari. Ja n'hem vist uns quants, però en fem una recapitulació:

+ + + +

Si les dades que s’introdueixen en un camp de formulari segueixen les regles especificades pels atributs anteriors, es consideren vàlides. Si no és així, es consideren no vàlides.

+ +

Quan un element és vàlid, es compleixen els aspectes següents:

+ + + +

Quan un element no és vàlid, es verifica el següent:

+ + + +
+

Nota: Els diversos errors que impedeixen enviar el formulari inclouen {{domxref('validityState.badInput', 'badInput')}}, {{domxref('validityState.patternMismatch','patternMismatch')}}, {{domxref('validityState.rangeOverflow','rangeOverflow')}} o {{domxref('validityState.rangeUnderflow','rangeUnderflow')}}, {{domxref('validityState.stepMismatch','stepMismatch')}}, {{domxref('validityState.tooLong','tooLong')}} o {{domxref('validityState.tooShort','tooShort')}}, {{domxref('validityState.typeMismatch','typeMismatch')}}, {{domxref('validityState.valueMissing','valueMissing')}}, o {{domxref('validityState.customError','customError')}}.

+
+ +

Exemples de validació de formularis integrada

+ +

En aquesta secció provarem alguns dels atributs que hem esmentat abans.

+ +

Un fitxer d’inici senzill

+ +

Comencem amb un exemple senzill: una entrada que permet triar si prefereixes un plàtan o una cirera. Aquest exemple inclou una entrada de text {{HTMLElement("input")}} senzilla amb una etiqueta {{htmlelement("label")}} associada i un {{htmlelement("button")}} de validació. En pots trobar el codi d’origen a GitHub, en el fitxer fruit-start.html, i l’exemple en viu a continuació.

+ +
<form>
+  <label for="choose">Would you prefer a banana or a cherry?</label>
+  <input id="choose" name="i_like">
+  <button>Submit</button>
+</form>
+ +
input:invalid {
+  border: 2px dashed red;
+}
+
+input:valid {
+  border: 2px solid black;
+}
+ +

{{EmbedLiveSample("Un_fitxer_d’inici_senzill", "100%", 80)}}

+ +

Per començar, fes una còpia del fitxer fruit-start.html en un directori nou del teu disc dur.

+ +

L’atribut required

+ +

La característica de validació HTML5 més simple és l’atribut required (obligatori). Afegeix aquest atribut a l'element si vols que una entrada sigui obligatòria. Quan es defineix aquest atribut, l'element coincideix amb la pseudoclasse {{cssxref(':required')}} de la interfície d'usuari i el formulari no s’envia; si l'entrada és buida, en el moment de validar mostra un missatge d'error. L’entrada, tot i que és buida, es considera no vàlida i coincideix amb la pseudoclasse de la interfície d'usuari {{cssxref(':invalid')}}.

+ +

Afegeix un atribut required a la teva entrada, com es mostra a continuació.

+ +
<form>
+  <label for="choose">Would you prefer a banana or a cherry? (requested)</label>
+  <input id="choose" name="i_like" required>
+  <button>Submit</button>
+</form>
+ +

Tingues en compte el CSS que s'ha inclòs en el fitxer d'exemples:

+ +
input:invalid {
+  border: 2px dashed red;
+}
+
+input:invalid:required {
+  background-image: linear-gradient(to right, pink, lightgreen);
+}
+
+input:valid {
+  border: 2px solid black;
+}
+ +

Aquest CSS afegeix una vora vermella quan l’entrada no és vàlida i una vora negra més subtil quan és vàlida. També hi afegeix un degradat de fons quan l’entrada és necessària i no vàlida. Prova’n el comportament nou en l'exemple següent:

+ +

{{EmbedLiveSample("L’atribut_required", "100%", 80)}}

+ +
+

Nota: Pots trobar aquest exemple en directe a GitHub en el fitxer fruit-validation.html (consulta’n també el codi d’origen.)

+
+ +

Prova de validar el formulari sense cap valor. Observa que l’entrada no vàlida pren el focus, apareix un missatge d’error per defecte («Emplena aquest camp») i el formulari no s’envia.

+ +

La presència de l'atribut required en qualsevol element que admet aquest atribut significa que l'element coincideix amb la pseudoclasse {{cssxref(':required')}}, tant si té un valor com si no. Si {{HTMLElement("input")}} no té cap valor, l’element input coincideix amb la pseudoclasse {{cssxref(':invalid')}}.

+ +
+

Nota: Si vols oferir una bona experiència d'usuari, indica quan són obligatoris els camps de formulari. No és només una bona experiència d’usuari, sinó que ho demanen les directrius d’accessibilitat de WCAG. A més, demana només les dades que necessites realment. Per què necessites saber, per exemple, el gènere o el títol d’algú?

+
+ +

Validar una expressió regular

+ +

Una altra característica útil de la validació és l’atribut pattern, que espera una expressió regular com a valor. Una expressió regular (regex) és un patró que es pot utilitzar per a establir combinacions de caràcters en cadenes de text, de manera que resulten ideals per a la validació de formularis i serveixen per a molts altres usos en JavaScript.

+ +

Els regex són força complexos i no pretenem ensenyar-los exhaustivament en aquest article. A continuació te’n mostrem alguns exemples perquè et puguis fer una idea bàsica de com funcionen.

+ + + +

Hi ha moltes més possibilitats, que no presentem aquí. Per a obtenir-ne una llista completa i molts exemples, consulta la nostra documentació sobre expressions regulars.

+ +

Posem-ho en pràctica amb un exemple. Afegeix al teu codi HTML un atribut pattern, d'aquesta manera:

+ +
<form>
+  <label for="choose">Would you prefer a banana or a cherry?</label>
+  <input id="choose" name="i_like" required pattern="[Bb]anana|[Cc]herry">
+  <button>Submit</button>
+</form>
+
+ + + +

Això ens proporciona l’actualització següent. Prova-ho:

+ +

{{EmbedLiveSample("Validar_una_expressió_regular", "100%", 80)}}

+ +
+

Nota: Pots trobar aquest exemple en directe a GitHub en el fitxer fruit-pattern.html (consulta’n també el codi d’origen).

+
+ +

En aquest exemple, l’element {{HTMLElement("input")}} accepta un dels quatre valors possibles: les cadenes «banana», «Banana», «cherry» o «Cherry». Les expressions regulars distingeixen entre majúscules i minúscules, però hem eliminat aquesta característica utilitzant un patró «Aa» extra situat entre claudàtors.

+ +

En aquest punt, intenta canviar el valor de l’atribut pattern per a igualar alguns dels exemples que has vist abans, i observa com això afecta els valors que pots introduir perquè que el valor d’entrada sigui vàlid. Prova d'escriure-hi alguna cosa i observa què passa. Intenta tant com sigui possible que estiguin relacionats amb la fruita perquè els teus exemples siguin coherents.

+ +

Si un valor {{HTMLElement("input")}} no buit no coincideix amb el patró de l'expressió regular, input coincideix amb la pseudoclasse {{cssxref(':invalid')}}.

+ +
+

Nota: Alguns tipus d'elements {{HTMLElement("input")}} no necessiten validar una expressió regular amb l’atribut pattern. Si especifiques el tipus email, per exemple, el valor d’entrada es valida amb un patró d’adreça de correu electrònic ben formada, o amb un patró que coincideix amb una llista d’adreces de correu electrònic separades per comes si té l’atribut multiple.

+
+ +
+

Nota: L'element {{HTMLElement("textarea")}} no admet l'atribut pattern.

+
+ +

Restringir la longitud de les entrades

+ +

Pots restringir la longitud de caràcters de tots els camps de text creats amb {{HTMLElement("input")}} o {{HTMLElement("textarea")}} amb els atributs minlength i maxlength. Un camp no és vàlid si té un valor que té menys caràcters que el valor assignat a minlength, o més que el valor assignat a maxlength.

+ +

Els navegadors sovint no permeten que l'usuari escrigui un valor més llarg del que s'espera en els camps de text. Una experiència d’usuari encara més bona que utilitzar només maxlength és proporcionar també comentaris de recompte de caràcters d’una manera accessible, i deixar editar el contingut fins que sigui d’una mida més reduïda. Un exemple d'això és el límit de caràcters de Twitter. Per a això pots utilitzar JavaScript, incloses les solucions que fan servir maxlength.

+ +

Restringir els valors de les entrades

+ +

Per als camps d’entrada de números (és a dir, <input type="number">), es poden utilitzar els atributs min i max, que proporcionen un rang de valors vàlids. Un camp que conté un valor que cau fora d'aquest interval no és vàlid.

+ +

Observem-ne un altre exemple. Crea una còpia nova del fitxer fruit-start.html.

+ +

A continuació suprimeix el contingut de l'element <body> i substitueix-lo pel següent:

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

Aquí tens l’execució en viu de l’exemple:

+ +

{{EmbedLiveSample("Restringir_els_valors_de_les_entrades", "100%", 100)}}

+ +
+

Nota: Pots trobar aquest exemple en viu a GitHub en el fitxer fruit-length.html (o també consultar-ne el codi d’origen.)

+
+ +
+

Nota: <input type="number"> (i altres tipus, com ara range i date) també poden tenir un atribut step, que especifica quin increment augmenta o disminueix el valor quan s'utilitzen els controls d'entrada (com ara els botons numèrics d’increment i decrement). En l'exemple anterior no hem inclòs un atribut step, de manera que el valor per defecte és 1. Això vol dir que els números de coma flotant (com ara el 3,2) també es mostren com a no vàlids.

+
+ +

Exemple complet

+ +

A continuació hi ha un exemple complet que mostra l'ús de les funcions de validació integrades en HTML. En primer lloc, una mica d'HTML:

+ +
<form>
+  <p>
+    <fieldset>
+      <legend>Do you have a driver's license?<abbr title="This field is mandatory" aria-label="required">*</abbr></legend>
+      <!-- While only one radio button in a same-named group can be selected at a time,
+           and therefore only one radio button in a same-named group having the "required"
+           attribute suffices in making a selection a requirement -->
+      <input type="radio" required name="driver" id="r1" value="yes"><label for="r1">Yes</label>
+      <input type="radio" required name="driver" id="r2" value="no"><label for="r2">No</label>
+    </fieldset>
+  </p>
+  <p>
+    <label for="n1">How old are you?</label>
+    <!-- The pattern attribute can act as a fallback for browsers which
+         don't implement the number input type but support the pattern attribute.
+         Please note that browsers that support the pattern attribute will make it
+         fail silently when used with a number field.
+         Its usage here acts only as a fallback -->
+    <input type="number" min="12" max="120" step="1" id="n1" name="age"
+           pattern="\d+">
+  </p>
+  <p>
+    <label for="t1">What's your favorite fruit?<abbr title="This field is mandatory" aria-label="required">*</abbr></label>
+    <input type="text" id="t1" name="fruit" list="l1" required
+           pattern="[Bb]anana|[Cc]herry|[Aa]pple|[Ss]trawberry|[Ll]emon|[Oo]range">
+    <datalist id="l1">
+      <option>Banana</option>
+      <option>Cherry</option>
+      <option>Apple</option>
+      <option>Strawberry</option>
+      <option>Lemon</option>
+      <option>Orange</option>
+    </datalist>
+  </p>
+  <p>
+    <label for="t2">What's your e-mail address?</label>
+    <input type="email" id="t2" name="email">
+  </p>
+  <p>
+    <label for="t3">Leave a short message</label>
+    <textarea id="t3" name="msg" maxlength="140" rows="5"></textarea>
+  </p>
+  <p>
+    <button>Submit</button>
+  </p>
+</form>
+ +

I ara, una mica de CSS per a aplicar estil al codi HTML:

+ +
form {
+  font: 1em sans-serif;
+  max-width: 320px;
+}
+
+p > label {
+  display: block;
+}
+
+input[type="text"],
+input[type="email"],
+input[type="number"],
+textarea,
+fieldset {
+  width: 100%;
+  border: 1px solid #333;
+  box-sizing: border-box;
+}
+
+input:invalid {
+  box-shadow: 0 0 5px 1px red;
+}
+
+input:focus:invalid {
+  box-shadow: none;
+}
+ +

Això dona la sortida següent:

+ +

{{EmbedLiveSample("Exemple_complet", "100%", 420)}}

+ +

Consulta una llista completa d’atributs que es poden utilitzar per a restringir els valors d’entrada i els tipus d’entrada que els admeten en els atributs relacionats amb la validació.

+ +
+

Nota: Pots trobar aquest exemple en viu a GitHub, en el fitxer full-example.html (o consultar-ne també el codi d’origen).

+
+ +

Validació de formularis amb JavaScript

+ +

Has d’utilitzar JavaScript si vols controlar l’aspecte dels missatges d’error originals o fer-los compatibles amb els navegadors antics que no admeten la validació de formularis integrada en HTML. En aquesta secció veurem les diferents maneres de fer això.

+ +

L’API de validació de restriccions

+ +

La majoria dels navegadors admeten l'API de validació de restriccions, que consta d'un conjunt de mètodes i propietats disponibles en les interfícies DOM per als elements de formulari següents:

+ + + +

L’API de validació de restriccions posa a la disposició dels elements anteriors les propietats següents.

+ + + +

L'API de validació de restriccions també ofereix als elements anteriors els mètodes següents:

+ + + +

Missatges d’error personalitzats

+ +

Com has vist en els exemples de restricció de validació HTML5 anteriors, cada vegada que un usuari intenta enviar un formulari no vàlid, el navegador mostra un missatge d'error. La manera com es mostra aquest missatge depèn del navegador.

+ +

Aquests missatges automatitzats tenen dos inconvenients:

+ + + +

Exemple d’un missatge d’error a Firefox en francès en una pàgina en anglès

+ +

La personalització d’aquests missatges d’error és un dels casos d’ús més comuns de l’API de validació de restriccions. Vegem la manera de fer-ho amb un exemple senzill.

+ +

Començarem amb alguns elements senzills d’HTML (no dubtis a posar-ho en un fitxer HTML en blanc; utilitza una còpia nova del fitxer fruit-start.html com a base, si vols):

+ +
<form>
+  <label for="mail">I would like you to provide me with an e-mail address: </label>
+  <input type="email" id="mail" name="mail">
+  <button>Submit</button>
+</form>
+ +

I afegeix a la pàgina el JavaScript següent:

+ +
const email = document.getElementById("mail");
+
+email.addEventListener("input", function (event) {
+  if (email.validity.typeMismatch) {
+    email.setCustomValidity(«I am expecting an e-mail address!»);
+  } else {
+    email.setCustomValidity("");
+  }
+});
+ +

Aquí emmagatzemem una referència a l’entrada de correu electrònic, i a continuació afegim un detector d’esdeveniments que executa el codi de content cada vegada que es modifica el valor dins de l’entrada.

+ +

Dins del codi de content, comprovem si la propietat validity.typeMismatch de l’entrada de correu electrònic retorna true, que significa que el valor que conté no coincideix amb el patró d’una adreça de correu electrònic ben formada. Si és així, cridem el mètode setCustomValidity() amb un missatge personalitzat. Això fa que l’entrada no sigui vàlida, de manera que quan intentes enviar el formulari, l’enviament falla i es mostra el missatge d’error personalitzat.

+ +

Si la propietat validity.typeMismatch retorna false, cridem el mètode setCustomValidity() amb una cadena buida. Això fa que l’entrada sigui vàlida, i el formulari s’envia.

+ +

Pots provar-ho a continuació:

+ +

{{EmbedGHLiveSample("learning-area/html/forms/form-validation/custom-error-message.html", '100%', 80)}}

+ +
+

Nota: Pots trobar aquest exemple en viu a GitHub en el fitxer custom-error-message.html (consulta’n també el codi d’origen).

+
+ +

Un exemple més detallat

+ +

Ara que hem vist un exemple molt senzill; observem com podem utilitzar aquesta API per a crear una validació personalitzada una mica més complexa.

+ +

En primer lloc, el codi HTML. Un cop més, no dubtis a construir-lo amb nosaltres:

+ +
<form novalidate>
+  <p>
+    <label for="mail">
+      <span>Please enter an email address:</span>
+      <input type="email" id="mail" name="mail" required minlength="8">
+      <span class="error" aria-live="polite"></span>
+    </label>
+  </p>
+  <button>Submit</button>
+</form>
+ +

Aquest formulari senzill utilitza l’atribut novalidate, que desactiva la validació automàtica del navegador; això permet que el nostre codi prengui el control de la validació. Però això no desactiva la compatibilitat per a l’API de validació de restriccions ni l’aplicació de pseudoclasses CSS com {{cssxref(":valid")}}, etc. Això vol dir que, tot i que el navegador no comprova automàticament la validesa del formulari abans d’enviar les dades, encara pots fer-ho tu mateix i dissenyar el formulari en conseqüència.

+ +

La nostra entrada per validar és <input type="email">, que està marcada com a required i té una longitud mínima (minlength) de 8 caràcters. Comprovem-ho amb el nostre codi i mostrem un missatge d'error personalitzat per a cada element.

+ +

El nostre objectiu és mostrar els missatges d'error dins d'un element <span>. L'atribut aria-live està establert a <span> per a assegurar-nos que el missatge d'error personalitzat serà visible per a tothom, inclosos els usuaris que empren lectors de pantalla.

+ +
+

Nota: Un element clau aquí és el fet que establir l’atribut novalidate en el formulari impedeix el formulari de mostrar els quadres de diàleg de missatge d’error propis, i permet de mostrar els missatges d’error personalitzats en el DOM de la manera que escollim.

+
+ +

Ara una mica de CSS bàsic per a millorar una mica l’aspecte del formulari i proporcionar informació visual quan les dades d’entrada no són vàlides:

+ +
body {
+  font: 1em sans-serif;
+  width: 200px;
+  padding: 0;
+  margin : 0 auto;
+}
+
+p * {
+  display: block;
+}
+
+input[type=email]{
+  -webkit-appearance: none;
+  appearance: none;
+
+  width: 100%;
+  border: 1px solid #333;
+  margin: 0;
+
+  font-family: inherit;
+  font-size: 90%;
+
+  box-sizing: border-box;
+}
+
+/* Aquest és el nostre estil per als camps no vàlids */
+input:invalid{
+  border-color: #900;
+  background-color: #FDD;
+}
+
+input:focus:invalid {
+  outline: none;
+}
+
+/* Aquest és l'estil per als nostres missatges d'error */
+.error {
+  width  : 100%;
+  padding: 0;
+
+  font-size: 80%;
+  color: white;
+  background-color: #900;
+  border-radius: 0 0 5px 5px;
+
+  box-sizing: border-box;
+}
+
+.error.active {
+  padding: 0.3em;
+}
+ +

A continuació veurem el JavaScript que implementa la validació d'errors personalitzada.

+ +
// Hi ha moltes maneres de triar un node DOM; amb aquest obtenim el formulari en si i el control de formulari de tipus caixa d’entrada
+// de correu electrònic, i també l’element span en què col·locarem el missatge d’error.
+const form  = document.getElementsByTagName('form')[0];
+
+const email = document.getElementById('mail');
+const emailError = document.querySelector('#mail + span.error');
+
+email.addEventListener('input', function (event) {
+  // Cada vegada que l’usuari escriu alguna cosa, comprovem si els
+  // camps del formulari són vàlids.
+
+  if (email.validity.valid) {
+    // En cas que hi hagi un missatge d’error visible, si el camp
+    // és vàlid, n’eliminem el missatge d'error.
+    emailError.innerHTML = ''; // Restablim el contingut del missatge
+    emailError.className = 'error'; // Restablim l'estat visual del missatge
+  } else {
+    // Si encara hi ha un error, mostrem l'error correcte
+    ShowError();
+  }
+});
+
+form.addEventListener('submit', function (event) {
+  // si el camp de correu electrònic és vàlid, enviem el formulari
+
+  if(!email.validity.valid) {
+    // Si no és així, mostrem el missatge d'error corresponent
+    showError();
+    // Aleshores, cancel·lem l’esdeveniment i evitem que s’enviï el formulari
+    event.preventDefault();
+  }
+});
+
+function showError() {
+  if(email.validity.valueMissing) {
+    // Si el camp està buit
+    // mostra el missatge d'error següent.
+    emailError.textContent = 'You need to enter an e-mail address.';
+  } else if(email.validity.typeMismatch) {
+    // Si el camp no conté una adreça de correu electrònic
+    // mostra el missatge d'error següent.
+    emailError.textContent = 'Entered value needs to be an e-mail address.';
+  } else if(email.validity.tooShort) {
+    // Si les dades són massa curtes
+    // mostra el missatge d'error següent.
+    emailError.textContent = `el correu electrònic ha de tenir com a mínim $ {email.minLength} caràcters; n'heu introduït $ {email.value.length}. ';
+  }
+
+  // Configura l’estil de manera adequada
+  emailError.className = 'error active';
+}
+ +

Els comentaris expliquen les coses força bé, però de manera breu:

+ + + +

Aquest és el resultat en viu:

+ +

{{EmbedGHLiveSample("learning-area/html/forms/form-validation/detailed-custom-validation.html", '100%', 150)}}

+ +
+

Nota: Pots trobar aquest exemple en viu a GitHub en el fitxer detailed-custom-validation.html (consulta’n també el codi d’origen).

+
+ +

L'API de validació de restriccions t’ofereix una eina poderosa per a gestionar la validació de formularis i et proporciona un gran control sobre la interfície d'usuari, més enllà del que hi pots fer només amb l’HTML i el CSS.

+ +
+

Nota: Per obtenir més informació, consulta la nostra guia de validació de restriccions i la referència de l'API de validació de restriccions.

+
+ +

Validació dels formularis sense una API integrada

+ +

En alguns casos, com ara la compatibilitat amb navegadors antics o els controls personalitzats, no podràs o no voldràs utilitzar l'API de validació de restriccions. Aleshores pots utilitzar JavaScript per a validar el teu formulari, només que l'hauràs d’escriure.

+ +

Per a validar un formulari, planteja’t unes quantes preguntes:

+ +
+
Quin tipus de validació he de fer?
+
Has de determinar com validar les dades: operacions amb variables de cadena, conversió de tipus, expressions regulars, etc. Tot depèn de tu.
+
Què he de fer si el formulari no es valida?
+
Això és clarament una qüestió de la interfície d'usuari. Has de decidir com es comporta el formulari. El formulari ha d’enviar les dades igualment? Has de destacar els camps que tenen un error? Has de mostrar missatges d’error?
+
Com puc ajudar l’usuari a corregir dades no vàlides?
+
Per a reduir la frustració de l’usuari és molt important proporcionar la informació més útil possible i orientar-lo en la correcció de les entrades. Has d’oferir suggeriments anticipats perquè sàpiguen què se n’espera, i missatges d’error clars. Si vols aprofitar els requisits de la interfície d'usuari de validació de formularis, aquí tens alguns articles útils: + +
+
+ +

Un exemple que no utilitza l'API de validació de restriccions

+ +

A continuació es mostra una versió simplificada de l'exemple anterior que funciona amb navegadors antics.

+ +

L’HTML és gairebé el mateix; només n’hem tret les funcions de validació HTML.

+ +
<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>
+  <!-- Alguns navegadors antics han de tenir l’atribut «type»
+       definit explícitament com «submit» en l'element «button»
+  <button type="submit">Submit</button>
+</form>
+ +

De la mateixa manera, el CSS no ha de canviar gaire; acabem de convertir la pseudoclasse {{cssxref(":invalid")}} de CSS en una classe real i hem evitat utilitzar el selector d'atributs que no funciona en Internet Explorer 6.

+ +
body {
+  font: 1em sans-serif;
+  width: 200px;
+  padding: 0;
+  margin : 0 auto;
+}
+
+form {
+  max-width: 200px;
+}
+
+p * {
+  display: block;
+}
+
+input.mail {
+  -webkit-appearance: none;
+
+  width: 100%;
+  border: 1px solid #333;
+  margin: 0;
+
+  font-family: inherit;
+  font-size: 90%;
+
+  box-sizing: border-box;
+}
+
+/* Aquest és el nostre estil per als camps no vàlids */
+input.invalid{
+  border-color: #900;
+  background-color: #FDD;
+}
+
+input:focus.invalid {
+  outline: none;
+}
+
+/* Aquest és l'estil dels nostres missatges d'error */
+.error {
+  width  : 100%;
+  padding: 0;
+
+  font-size: 80%;
+  color: white;
+  background-color: #900;
+  border-radius: 0 0 5px 5px;
+  box-sizing: border-box;
+}
+
+.error.active {
+  padding: 0.3em;
+}
+ +

Els grans canvis es produeixen en el codi JavaScript, que ha de fer molta més feina feixuga.

+ +
// Hi ha menys maneres de seleccionar un node DOM amb navegadors antics
+const form  = document.getElementsByTagName('form')[0];
+const email = document.getElementById('mail');
+
+// A continuació es mostra un truc per a arribar al node següent d’elements germans en el DOM.
+// Això és perillós perquè pots crear fàcilment un bucle infinit.
+// En els navegadors moderns és preferible utilitzar element.nextElementSibling
+let error = email;
+while ((error = error.nextSibling).nodeType != 1);
+
+// segons l'especificació HTML5
+const emailRegExp = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
+
+// Molts navegadors antics no són compatibles amb el mètode addEventListener.
+// Aquesta és una manera senzilla de tractar això; però no n’és l’única.
+function addEvent(element, event, callback) {
+  let previousEventCallBack = element["on"+event];
+  element["on"+event] = function (e) {
+    const output = callback(e);
+
+    // Una crida que retorna «false» atura la cadena de devolució
+    // i interromp l'execució de l'esdeveniment de retorn de la crida
+    if (output === false) return false;
+
+    if (typeof previousEventCallBack === 'function') {
+      output = previousEventCallBack(e);
+      if(output === false) return false;
+    }
+  }
+};
+
+// Ara podem reconstruir la nostra restricció de validació
+// Com que no ens basem en cap pseudoclasse de CSS, hem
+// d'establir explícitament la classe vàlida/invàlida en el nostre camp de correu electrònic
+addEvent(window, "load", function () {
+  // Aquí comprovem si el camp està buit (recorda que no és un camp obligatori)
+  // Si no ho està, comprovem si el contingut és una adreça de correu electrònic ben formada.
+  const test = email.value.length === 0 || emailRegExp.test(email.value);
+
+  email.className = test ? "valid" : "invalid";
+});
+
+// Això defineix què passa quan l'usuari escriu en el camp
+addEvent(email, "input", function () {
+  const test = email.value.length === 0 || emailRegExp.test(email.value);
+  if (test) {
+    email.className = "valid";
+    error.innerHTML = "";
+    error.className = "error";
+  } else {
+    email.className = "invalid";
+  }
+});
+
+// Això defineix què passa quan l’usuari intenta enviar les dades
+addEvent(form, "submit", function () {
+  const test = email.value.length === 0 || emailRegExp.test(email.value);
+
+  if (!test) {
+    email.className = "invalid";
+    error.innerHTML = "I expect an e-mail, darling!";
+    error.className = "error active";
+
+    // Alguns navegadors antics no admeten el mètode event.preventDefault ()
+    return false;
+  } else {
+    email.className = "valid";
+    error.innerHTML = "";
+    error.className = "error";
+  }
+});
+ +

El resultat és el següent:

+ +

{{EmbedLiveSample("Un_exemple_que_no_utilitza_lAPI_de_validació_de_restriccions", "100%", 130)}}

+ +

Com pots veure, no és tan difícil construir un sistema de validació pel teu compte. La part difícil és que sigui prou genèric perquè es pugui utilitzar tant en múltiples plataformes com en qualsevol formulari que puguis crear. Disposes de moltes biblioteques de fitxers que et permeten executar una validació de formulari, com ara Validate.js.

+ +

Resum

+ +

De vegades, la validació de formulari del costat del client necessita JavaScript si vols personalitzar els missatges d’estil i d’error, però sempre requereix que pensis detingudament en l’usuari. Recorda d’ajudar sempre els usuaris a corregir les dades que et proporcionen. Per a això, assegura’t de:

+ + + +

Un cop comprovat que el formulari s'ha emplenat correctament, pots procedir a enviar-lo. A continuació exposarem l’enviament de les dades d’un formulari.

+ +

{{PreviousMenuNext("Learn/Forms/UI_pseudo-classes", "Learn/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}

+ +

En aquest mòdul

+ + + +

Temes avançats

+ + diff --git a/files/ca/learn/forms/how_to_structure_a_web_form/index.html b/files/ca/learn/forms/how_to_structure_a_web_form/index.html new file mode 100644 index 0000000000..c0cb1e022c --- /dev/null +++ b/files/ca/learn/forms/how_to_structure_a_web_form/index.html @@ -0,0 +1,316 @@ +--- +title: Com estructurar un formulari web +slug: Learn/HTML/Forms/Com_estructurar_un_formulari_web +translation_of: Learn/Forms/How_to_structure_a_web_form +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Forms/Your_first_form", "Learn/Forms/Basic_native_form_controls", "Learn/Forms")}}
+ +

Ara que ja coneixem els conceptes bàsics, veurem amb més detall els elements que s’utilitzen per a proporcionar estructura i significat a les diferents parts d’un formulari.

+ + + + + + + + + + + + +
Requisits previs:Coneixements bàsics d'informàtica i una fonaments bàsics de l’HTML.
Objectiu:Aprendre a estructurar els formularis HTML i donar-los semàntica perquè compleixin criteris d’usabilitat i accessibilitat.
+ +

La flexibilitat dels formularis els converteix en una de les estructures més complexes pel que fa al codi HTML; pots crear qualsevol tipus de formulari bàsic amb elements i atributs específics de formulari. Fer servir una estructura correcta en crear un formulari HTML et garantirà la usabilitat i l’accessibilitat del formulari.

+ +

L'element <form>

+ +

L’element {{HTMLElement("form")}} defineix formalment un formulari i els atributs que determinen el comportament del formulari. Cada vegada que vols crear un formulari HTML, has de començar per aquest element i imbricar-hi tot el contingut a dins. Moltes tecnologies d'assistència i complements de navegador poden descobrir elements {{HTMLElement("form")}} i implementar codis de suport (hooks) especials per a facilitar-ne l’ús.

+ +

Ja ho hem vist en l’article anterior.

+ +
Atenció: Està totalment prohibit imbricar un formulari dins d’un altre formulari. És una mala idea perquè la imbricació de formularis pot introduir comportaments del tot imprevisibles.
+ +

Sempre és possible utilitzar un control de formulari fora d'un element {{HTMLElement("form")}}. Si ho fas, per defecte aquest control no tindrà res a veure amb cap formulari, tret que l’associïs a algun formulari amb l'atribut form. Això es va introduir per a permetre unir explícitament un control amb un formulari encara que no hi estigui imbricat.

+ +

Avancem una mica i observem els elements estructurals que trobaràs en un formulari.

+ +

Els elements <fieldset> i <legend>

+ +

L’element {{HTMLElement("fieldset")}} és una manera convenient de crear grups de controls que comparteixen el mateix propòsit, amb les mateixes finalitats d’estil i semàntiques. Pots etiquetar un element {{HTMLElement("fieldset")}} incloent un element {{HTMLElement("legend")}} just a sota de l'etiqueta d'obertura {{HTMLElement("fieldset")}}. El text contingut en l'element {{HTMLElement("legend")}} descriu formalment el propòsit de l'element {{HTMLElement("fieldset")}} que hi ha inclòs.

+ +

Moltes tecnologies d'assistència utilitzaran l'element {{HTMLElement("legend")}} com si fos una part de l'etiqueta de cada control de formulari que hi ha dins de l'element {{HTMLElement("fieldset")}} corresponent. Per exemple, alguns lectors de pantalla com Jaws i NVDA llegiran el contingut de la llegenda abans de llegir el text de l’etiqueta de cada control.

+ +

Aquí hi ha un petit exemple:

+ +
<form>
+  <fieldset>
+    <legend>Mida del suc de fruita</legend>
+    <p>
+      <input type="radio" name="size" id="size_1" value="small">
+      <label for="size_1">Petit</label>
+    </p>
+    <p>
+      <input type="radio" name="size" id="size_2" value="medium">
+      <label for="size_2">Mitjà</label>
+    </p>
+    <p>
+      <input type="radio" name="size" id="size_3" value="large">
+      <label for="size_3">Gran</label>
+    </p>
+  </fieldset>
+</form>
+ +
+

Nota: Pots trobar aquest exemple en el fitxer fieldset-legend.html (o consultar-ne l’exemple en viu).

+
+ +

En llegir el formulari anterior, un lector de pantalla dirà «Mida del suc de fruita: petit» per al primer giny, «Mida del suc de fruita: mitjà» per al segon i «Mida del suc de fruita: gran» per al tercer.

+ +

El cas d’ús que mostra aquest exemple és un dels més importants. Cada vegada que tinguis un conjunt de botons d'opció, els hauries d’imbricar dins d’un element {{HTMLElement("fieldset")}}. Hi ha altres casos d'ús i, en general, l'element {{HTMLElement("fieldset")}} també es pot utilitzar per a introduir seccions en un formulari. L’ideal seria que els formularis llargs ocupin diverses pàgines, però si un formulari s’allarga i només ha d’ocupar una sola pàgina, posar les diferents seccions relacionades dins de diferents elements {{HTMLElement("fieldset")}} millora la usabilitat.

+ +

L’element {{HTMLElement("fieldset")}} és un dels elements clau per crear formularis accessibles per l’efecte que té sobre la tecnologia d’assistència; tanmateix, és la teva responsabilitat no abusar-ne. Si és possible, cada cop que creïs un formulari, intenta escoltar com l’interpreta un lector de pantalla. Si sona estrany, prova de millorar l'estructura del formulari.

+ +

L'element <label>

+ +

Com hem vist en l’article anterior, l’element {{HTMLElement("label")}} és la manera formal de definir una etiqueta per a un control de formulari en HTML. Aquest és l’element més important si vols crear formularis accessibles: quan s’implementen correctament, els lectors de pantalla llegeixen l’etiqueta d’un element de formulari juntament amb qualsevol instrucció relacionada, i també resulta útil per als usuaris sense discapacitats. Considerem aquest exemple, que hem vist en l’article anterior:

+ +
<label for="name">Nom:</label> <input type="text" id="name" name="user_name">
+ +

Amb l'etiqueta <label> associada correctament amb l’element <input> per l’atribut for (que conté l'atribut id de l'element <input>), un lector de pantalla llegirà una cosa així com «Nom, editar text».

+ +

Hi ha una altra manera d’associar un control de formulari amb una etiqueta: introduir el control de formulari dins de <label> i associar-l’hi implícitament.

+ +
<label for="name">
+  Nom: <input type="text" id="name" name="user_name">
+</label>
+ +

Fins i tot en aquests casos, però, es considera una bona pràctica establir-hi l’atribut for per garantir que totes les tecnologies d’assistència entenen la relació entre l'etiqueta i el control.

+ +

Si no hi ha cap etiqueta o si el control de formulari no està associat implícitament ni explícitament amb una etiqueta, un lector de pantalla llegirà alguna cosa com ara «Editar text en blanc», la qual cosa no és gaire útil.

+ +

També pots clicar les etiquetes!

+ +

Un altre avantatge de configurar correctament les etiquetes és que pots fer-hi clic o tocar-les per a activar-ne el control corresponent. Això és útil per a controls com les entrades de text, en què pots fer clic a l’etiqueta i també a l’entrada per a donar-hi el focus, però és útil, sobretot, per als botons d'opció i les caselles de verificació; l’àrea d’aquest control pot ser molt petita, de manera que és útil per a facilitar-ne l’activació.

+ +

Per exemple, si fas clic al text de l'etiqueta «M'agraden les cireres» de l'exemple següent, canviarà l'estat seleccionat de la casella taste_cherry:

+ +
<form>
+  <p>
+    <input type="checkbox" id="taste_1" name="taste_cherry" value="cherry">
+    <label for="taste_1">M'agraden les cireres</label>
+  </p>
+  <p>
+    <input type="checkbox" id="taste_2" name="taste_banana" value="banana">
+    <label for="taste_2">M'agraden els plàtans</label>
+  </p>
+</form>
+ +
+

Nota: Pots trobar aquest exemple en el fitxer checkbox-label.html (o consultar l’exemple en viu).

+
+ +

Etiquetes múltiples

+ +

Estrictament parlant, pots posar diverses etiquetes en un sol control, però no és una bona idea perquè algunes tecnologies d'assistència poden tenir problemes a l'hora de manejar-los. En el cas de tenir etiquetes múltiples, hauràs d’incloure el control i les seves múltiples etiquetes dins d’un únic element {{htmlelement("label")}}.

+ +

Considerem l'exemple següent:

+ +
<p>Els camps obligatoris van seguits de <abbr title="required">*</abbr>.</p>
+
+<!-- Doncs, això: --->
+<div>
+  <label for="username">Nom:</label>
+  <input type="text" name="username">
+  <label for="username"><abbr title="obligatori" aria-label="required">*</abbr></label>
+</div>
+
+<!-- seria millor fer-ho d'aquesta manera: -->
+<div>
+  <label for="username">
+    <span>Nom:</span>
+    <input id="username" type="text" name="username">
+    <abbr title="obligatori" aria-label="required">*</abbr>
+  </label>
+</div>
+
+<!-- Però això és probablement el millor: -->
+<div>
+  <label for="username">Nom: <abbr title="obligatori" aria-label="required">*</abbr></label>
+  <input id="username" type="text" name="username">
+</div>
+ +

{{EmbedLiveSample("Etiquetes_múltiples", 120, 120)}}

+ +

El paràgraf de la part superior estableix una regla per als elements obligatoris. La regla s'ha d'incloure abans que s’hagi d'utilitzar perquè els usuaris generals i els usuaris amb tecnologies d’assistència, com ara lectors de pantalla, puguin saber què vol dir abans de trobar un element obligatori. Tot i que això ajuda a informar els usuaris què significa un asterisc, no ens en podem refiar. Un lector de pantalla llegirà un asterisc així: «estrella». Si s'hi passa el ratolí per sobre, hauria d'aparèixer «obligatori», que s'aconsegueix amb l'atribut title. Els títols que es llegeixen en veu alta depenen de la configuració del lector de pantalla, de manera que és més fiable incloure també l’atribut aria-label, que els lectors de pantalla llegeixen sempre.

+ +

Les variants anteriors augmenten l’efectivitat a mesura que hi avances:

+ + + +
+

Nota: Pots obtenir resultats una mica diferents, segons quin sigui el teu lector de pantalla. Aquest ha estat provat amb VoiceOver (i NVDA es comporta de manera similar). Ens agradaria conèixer també les teves experiències.

+
+ +
+

Nota: Pots trobar aquest exemple a GitHub en el fitxer required-labels.html (o consulta l’exemple en viu). No provis l'exemple amb les dues o tres versions sense comentaris: els lectors de pantalla definitivament es confondran si tens diverses etiquetes i múltiples entrades amb el mateix ID.

+
+ +

Estructures HTML habituals que es fan servir als formularis

+ +

Més enllà de les estructures específiques dels formularis web, és bo recordar que l'etiquetatge del formulari només és HTML. Això significa que pots utilitzar tot el poder de l'HTML per a estructurar un formulari web.

+ +

Com es pot veure en els exemples, és una pràctica habitual delimitar una etiqueta i el control associat amb un element {{HTMLElement("li")}} dins d'un element de llista {{HTMLElement("ul")}} o {{HTMLElement("ol")}}. Els elements {{HTMLElement("p")}} i {{HTMLElement("div")}} també s'utilitzen de forma habitual. Per a estructurar diverses caselles de verificació o botons d'opció es recomana crear una llista.

+ +

A més de l’element {{HTMLElement("fieldset")}}, també és una pràctica habitual utilitzar títols HTML (per exemple, {{htmlelement("h1")}}, {{htmlelement("h2")}}) i seccionar (per exemple, {{htmlelement("section")}}), per a estructurar formularis complexos.

+ +

Per sobre de tot, et correspon a tu trobar un estil de codificació còmode que doni lloc a formularis que compleixin criteris d’accessibilitat i usabilitat. Les seccions independents amb funcions diferents haurien d’estar contingudes en un element {{htmlelement("section")}} separat, amb elements {{htmlelement("fieldset")}} per a contenir botons d'opció.

+ +

Aprenentatge actiu: construir l’estructura d’un formulari

+ +

Posem en pràctica aquestes idees i construïm un formulari una mica més complicat: un formulari de pagament. Aquest formulari contindrà diversos tipus de controls que encara no coneixes. No et preocupis; en veuràs el funcionament en l’article següent (Els controls de formulari bàsics originals). Per ara, llegeix amb detall les descripcions mentre segueixes les instruccions següents i comences a entendre quins elements utilitzem per a estructurar un formulari, i per què.

+ +
    +
  1. Per començar, fes una còpia local del fitxer de plantilla en blanc i del CSS del nostre formulari de pagament en un directori nou del teu ordinador.
    2. +
  2. Aplica el CSS a l’HTML afegint la línia següent a l’element {{htmlelement("head")}} de l’HTML: + 
    <link href="payment-form.css" rel="stylesheet">
    +
    3. +
  3. A continuació, afegeix l’element extern {{htmlelement("form")}} per a crear el teu formulari: + 
    <form>
+
+</form>
    +
    4. +
  4. Afegeix un títol d’encapçalament encapçalament i un paràgraf a les etiquetes <form> per a informar els usuaris com es marquen els camps obligatoris: + 
    <h1>Forma de pagament</h1>
+<p>Els camps obligatoris van seguits de <strong><abbr title = "obligatori">*</abbr></strong>.</p>
    +
    5. +
  5. A continuació, afegirem una secció més gran de codi al formulari, a sota de l’entrada anterior. Aquí veuràs que delimitem amb un element {{htmlelement("section")}} independent els camps amb la informació de contacte. A més, hi ha un conjunt de dos botons d'opció, cadascun dels quals col·loquem dins d’un element de llista ({{htmlelement("li")}}) propi. També hi ha dos textos estàndard {{htmlelement("input")}} i els seus elements {{htmlelement("label")}} associats, cadascun imbricat dins d'un element {{htmlelement("p")}} i un camp per a introduir una contrasenya. Afegeix aquest codi al teu formulari: + 
    <section>
+    <h2>Informació de contacte</h2>
+    <fieldset>
+      <legend>Títol </legend>
+      <ul>
+          <li>
+            <label for="title_1">
+              <input type="radio" id="title_1" name="title" value="K" >
+              Rei
+            </label>
+          </li>
+          <li>
+            <label for="title_2">
+              <input type="radio" id="title_2" name="title" value="Q">
+              Reina
+            </label>
+          </li>
+          <li>
+            <label for="title_3">
+              <input type="radio" id="title_3" name="title" value="J">
+              Bufó
+            </label>
+          </li>
+      </ul>
+    </fieldset>
+    <p>
+      <label for="name">
+        <span>Nom: </span>
+        <strong><abbr title="required">*</abbr></strong>
+      </label>
+      <input type="text" id="name" name="username">
+    </p>
+    <p>
+      <label for="mail">
+        <span>Correu electrònic: </span>
+        <strong><abbr title="required">*</abbr></strong>
+      </label>
+      <input type="email" id="mail" name="usermail">
+    </p>
+    <p>
+      <label for="pwd">
+        <span>Contrasenya:</span>
+        <strong><abbr title="required">*</abbr></strong>
+      </label>
+      <input type="password" id="pwd" name="password">
+    </p>
+</section>
    +
    6. +
  6. La segona secció (<section>) del nostre formulari és la informació de pagament. Hi ha tres controls diferents, juntament amb les seves etiquetes, cadascun inclòs en un element <p>. El primer és un menú desplegable ({{htmlelement("select")}}) que selecciona el tipus de targeta de crèdit. El segon és un element <input> del tipus tel, que introdueix un número de targeta de crèdit; tot i que podríem haver utilitzat el tipus number, no volem la interfície d'usuari que s'hi aplica per defecte. L'últim és un element <input> del tipus date, per a introduir la data de caducitat de la targeta; aquest apareixerà amb un control de selecció de dates en els navegadors compatibles, i es converteix en una entrada de text normal en els navegadors no compatibles. Aquests tipus d’entrada més nous es reintrodueixen en l’article tipus d’entrades en HTML5.
    +
    + Introdueix el següent en la secció anterior: + 
    <section>
+    <h2>Informació de pagament</h2>
+    <p>
+      <label for="card">
+        <span>Tipus de targeta: </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>Número de targeta:</span>
+        <strong><abbr title="required">*</abbr></strong>
+      </label>
+      <input type="tel" id="number" name="cardnumber">
+    </p>
+    <p>
+      <label for="date">
+        <span> Data de caducitat: </span>
+        <strong><abbr title="required">*</abbr></strong>
+        <em>en format mm/aa</em>
+      </label>
+      <input type="date" id="date" name="expiration">
+    </p>
+</section>
    +
    7. +
  7. L’última secció que afegim és molt més senzilla, perquè només conté un element {{htmlelement("button")}} de tipus submit, que envia les dades del formulari. Afegeix això al final del formulari: + 
    <p> <button type="submit">Validar el pagament</button> </p>
    +
    8. +
+ +

A sota pots veure en acció el formulari acabat (també el pots trobar a GitHub; consulta el codi d’origen a payment-form.html i executa’l en viu):

+ +

{{EmbedLiveSample("A_payment_form","100%",620, "", "en-US/Learn/Forms/How_to_structure_a_web_form/Example")}}

+ +

Resum

+ +

Ara tens tot el coneixement que necessites per a estructurar adequadament els teus formularis web. En els pròxims articles tractarem moltes de les funcions que s’introdueixen aquí; l’article següent explica amb més detall l’ús de tots els diferents tipus de controls de formulari que voldràs utilitzar per a recopilar informació dels teus usuaris.

+ +

Consulta també

+ + + +

{{PreviousMenuNext("Learn/Forms/Your_first_form", "Learn/Forms/Basic_native_form_controls", "Learn/Forms")}}

+ +

En aquest mòdul

+ + + +

Temes avançats

+ + diff --git a/files/ca/learn/forms/index.html b/files/ca/learn/forms/index.html new file mode 100644 index 0000000000..bfd01dcf91 --- /dev/null +++ b/files/ca/learn/forms/index.html @@ -0,0 +1,356 @@ +--- +title: HTML forms guide +slug: Learn/HTML/Forms +tags: + - Featured + - Formularis + - Guía + - HTML + - Web +translation_of: Learn/Forms +--- +

Aquesta guia és una sèrie d'articles que l'ajudaran a dominar els formularis HTML. Els formularis HTML són una eina molt potent per interactuar amb els usuaris; No obstant això, per raons històriques i tècniques, no sempre és obvi com usar-los al seu màxim potencial. En aquesta guia, anem a cobrir tots els aspectes dels formularis HTML, des de donar estil a l'estructura, des de la manipulació de dades amb components personalitzats. Aprendràs a gaudir de la gran potència que ofereixen!

+ +

Articles

+ +
    +
  1. El meu primer formulari HTML
    2. +
  2. Com estructurar un formulari HTML
    3. +
  3. Formularis widgets nadius
    4. +
  4. CSS amb formularis HTML +
      +
    1. Estil en formularis HTML
      2. +
    2. Estils avançats en formularis HTML
      3. +
    3. Taula de propietats compatibles per formularis widgets
      4. +
    +
    5. +
  5. Enviar y recuperar dades del formulari
    6. +
  6. Validació de dades del formulari
    7. +
  7. Contruir formularis widgets personalitzats
    8. +
  8. Enviament de formularis amb JavaScript +
      +
    1. Utilitzant l'objecte FormData
      2. +
    +
    9. +
  9. Formularis HTML en navegadors antics
    10. +
+ +

Documentació HTML

+ +

Elements HTML

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ElementInterfície DOM relacionatDescripció
{{HTMLElement("button")}}{{domxref("HTMLButtonElement")}}L'element button representa un botó que es premi.
{{HTMLElement("datalist")}}{{domxref("HTMLDataListElement")}}L'element datalist conté un conjunt d'elements {{ HTMLElement("option") }} que representen les opcions possibles per al valor d'altres elements de formulari.
{{HTMLElement("fieldset")}}{{domxref("HTMLFieldSetElement")}}El fieldset s'utilitza per agrupar diversos elements formulari dins d'un formulari.
{{HTMLElement("form")}}{{domxref("HTMLFormElement")}}L'element form representa una secció del document que conté l'element interactiu que permet a un usuari enviar informació a un servidor web.
{{HTMLElement("input")}}{{domxref("HTMLInputElement")}}L'element input s'utilitza per crear controls interactius per als formularis.
{{HTMLElement("keygen")}}{{domxref("HTMLKeygenElement")}}L'element keygen existeix per facilitar la generació de material clau, i l'enviament de la clau pública com a part d'un formulari HTML
{{HTMLElement("label")}}{{domxref("HTMLLabelElement")}}L'element label representa un títol d'un article en una interfície d'usuari
{{HTMLElement("legend")}}{{domxref("HTMLLegendElement")}}L'element legend representa una llegenda per al contingut del seu pare {{ HTMLElement("fieldset") }}.
{{HTMLElement("meter")}}{{domxref("HTMLMeterElement")}}L'element metre representa o bé un valor escalar dins d'un rang conegut o un valor fraccionari.
{{HTMLElement("optgroup")}}{{domxref("HTMLOptGroupElement")}}l'element optgroup crea un grup d'opcions dins d'un element {{ HTMLElement("select") }} element.
{{HTMLElement("option")}}{{domxref("HTMLOptionElement")}}l'element HTML option  s'utilitza per crear un control que representa un element dins d'un element {{ HTMLElement("select") }}, o un {{ HTMLElement("optgroup") }} o un {{ HTMLElement("datalist") }}.
{{HTMLElement("output")}}{{domxref("HTMLOutputElement")}}L'element output representa el resultat d'un càlcul.
{{HTMLElement("progress")}}{{domxref("HTMLProgressElement")}}L'element progress s'utilitza per veure el progrés de la finalització d'una tasca.
{{HTMLElement("select")}}{{domxref("HTMLSelectElement")}}L'element select representa un control que presenta un menú d'opcions.
{{HTMLElement("textarea")}}{{domxref("HTMLTextAreaElement")}}L'element textarea representa un control d'edició de text pla multilínia.
+ +
+

Nota: Tots els elements formulari, com tots els elements d'HTML, suportan la interfície DOM {{domxref("HTMLElement")}}.

+
+ +

Atributs HTML

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Nom AtributElementsDescripció
accept{{ HTMLElement("form") }}, {{ HTMLElement("input") }}Llista de tipus que accepta el servidor, normalment un tipus de fitxer.
accept-charset{{ HTMLElement("form") }}Llista de jocs de caràcters suportats.
action{{ HTMLElement("form") }}L'URI d'un programa que processa la informació presentada a través del formulari.
autocomplete{{ HTMLElement("form") }}, {{ HTMLElement("input") }}Indica si els controls d'aquest formulari poden tenir per defecte els seus valors emplenats automàticament pel navegador.
autofocus{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}L'element ha de tenir el focus automàticament després de carregar la pàgina.
challenge{{ HTMLElement("keygen") }}Una cadena proposada que es presenta juntament amb la clau pública.
checked{{ HTMLElement("input") }}Indica si l'element s'ha de comprovar en carregar la pàgina.
cols{{ HTMLElement("textarea") }}Defineix el nombre de columnes en una àrea de text.
data{{ HTMLElement("object") }}Especifica l'adreça URL del recurs.
dirname{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }} 
disabled{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indica si l'usuari pot interactuar amb l'element.
enctype{{ HTMLElement("form") }}Defineix el tipus de contingut de les dades del formulari quan el mètode és POST.
for{{ HTMLElement("label") }}, {{ HTMLElement("output") }}Descriu els elements que pertanyen a aquest.
form{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indica el formulari que és el propietari de l'element.
high{{ HTMLElement("meter") }}Indica el límit inferior del rang superior.
keytype{{ HTMLElement("keygen") }}Especifica el tipus de clau generada.
list{{ HTMLElement("input") }}Identifica una llista d'opcions predefinides per suggerir a l'usuari.
low{{ HTMLElement("meter") }}Indica el límit superior del rang inferior.
max{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}Indica el valor màxim permès.
maxlength{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Defineix el nombre màxim de caràcters permesos en l'element.
method{{ HTMLElement("form") }}Defineix quin mètode HTTP a utilitzar al enviar el formulari. Pot ser GET (per defecte) o POST.
min{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}Indica el valor mínim permès.
multiple{{ HTMLElement("input") }}, {{ HTMLElement("select") }}Indica si diversos valors es poden introduir en una entrada del correu electrònic o tipus  arxiu.
name{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Nom de l'element. Per exemple el usat en el servidor per identificar els camps de formulari enviat.
novalidate{{ HTMLElement("form") }}Aquest atribut indica que el formulari no ha de ser validat quan sigui enviat.
optimum{{ HTMLElement("meter") }}Indica el valor numèric òptim.
pattern{{ HTMLElement("input") }}Defineix una expressió regular que es validarà el valor de l'element en contra.
placeholder{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Proporciona un suggeriment a l'usuari de què es poden introduir en el camp.
readonly{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Indica si l'element pot ser editat o no.
required{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indica si es requereix aquest element per omplir o no.
rows{{ HTMLElement("textarea") }}Defineix el nombre de files en una àrea de text.
selected{{ HTMLElement("option") }}Defineix un valor que serà seleccionat en carregar la pàgina.
size{{ HTMLElement("input") }}, {{ HTMLElement("select") }}Defineix l'amplada de l'element (en píxels). Si el atribut type de l'element és text o contrasenya, llavors és el nombre de caràcters.
src{{ HTMLElement("img") }}La URL del contingut integrable.
step{{ HTMLElement("input") }} 
target{{ HTMLElement("form") }} 
type{{ HTMLElement("button") }}, {{ HTMLElement("input") }}Defineix el tipus d'element.
usemap{{ HTMLElement("img") }} 
value{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}Defineix un valor predeterminat que es mostrarà en l'element en la càrrega de la pàgina.
wrap{{ HTMLElement("textarea") }}Indica si el text ha de ser embolicat o no.
+ +

Referència normativa

+ + diff --git a/files/ca/learn/forms/your_first_form/index.html b/files/ca/learn/forms/your_first_form/index.html new file mode 100644 index 0000000000..3f327d4494 --- /dev/null +++ b/files/ca/learn/forms/your_first_form/index.html @@ -0,0 +1,298 @@ +--- +title: El teu primer formulari +slug: Learn/HTML/Forms/El_teu_primer_formulari +translation_of: Learn/Forms/Your_first_form +--- +
{{LearnSidebar}}{{NextMenu("Learn/Forms/How_to_structure_a_web_form", "Learn/Forms")}}
+ +

Aquest articles t'ofereix la primera experiència de creació d’un formulari web, que inclou dissenyar d’un formulari senzill amb els controls de formulari HTML adequats i altres elements HTML, afegir una mica d’estil molt senzill amb CSS i enviar les dades a un servidor. A mesura que avancem en el mòdul, ampliarem aquesta informació.

+ + + + + + + + + + + + +
Requisits previs:Coneixements bàsics d'informàtica i fonaments bàsics d’HTML.
Objectiu:Familiaritzar-se amb els formularis web, per a què serveixen, com dissenyar-los, i quins elements bàsics HTML necessitaràs per a casos senzills.
+ +

Què són els formularis web?

+ +

Els formularis web són un dels principals punts d’interacció entre un usuari i un lloc web o aplicació. Els formularis permeten als usuaris introduir dades, que en general s’envien a un servidor web per a processar-les i emmagatzemar-les (consulta l’article Enviar les dades d’un formulari web més endavant d’aquest mòdul) o permeten al client actualitzar a l’instant la interfície d’alguna manera (per exemple, afegir un altre element de llista, o mostrar o amagar una funció d'interfície d'usuari).

+ +

L’HTML d’un formulari web està format per un o més controls de formulari (de vegades anomenats ginys o, en anglès, widgets), a més d’alguns elements addicionals que ajuden a estructurar el formulari general, que sovint s’anomenen formularis HTML. Els controls poden ser camps de text d'una sola línia o de diverses línies, caixes desplegables, botons, caselles de selecció o botons d'opció, i es creen majoritàriament amb l'element {{htmlelement("input")}}, tot i que hi ha altres elements que també has de conèixer.

+ +

Els controls de formulari també es poden programar per a forçar la introducció de formats o valors específics (validació del formulari) i es poden combinar amb etiquetes de text que en descriuen el propòsit tant als usuaris estàndard com als que tenen discapacitats visuals.

+ +

Disseny del formulari

+ +

Abans de començar a codificar, sempre és millor fer un pas enrere i prendre't el temps necessari per pensar en el teu formulari. Dissenyar una maqueta ràpida t'ajudarà a definir el conjunt adequat de dades que vols que l'usuari introdueixi. Des del punt de vista de l'experiència d’usuari (UX), és important recordar que, com més gran sigui el teu formulari, més risc hi ha de frustrar les persones i perdre usuaris. Fes que sigui senzill i concís: demana només les dades que necessites.

+ +

El disseny de formularis és un pas important a l’hora de crear un lloc web o una aplicació. Aquest article no tracta de l’experiència d’usuari amb els formularis, però si vos aprofundir aquest tema, pots llegir els articles següents:

+ + + +

En aquest article crearem un formulari de contacte senzill. Fem-ne un esbós.

+ +

Una manera aproximada de fer un esbós de formulari

+ +

El nostre formulari inclourà tres camps de text i un botó. Demanem a l’usuari el nom, el correu electrònic i el missatge que vol enviar. En prémer el botó, les dades s’enviaran a un servidor web.

+ +

Aprenentatge actiu: Creació del nostre formulari HTML

+ +

D’acord, en primer lloc creem l’HTML per al nostre formulari. Utilitzarem els elements HTML següents: {{HTMLelement("form")}}, {{HTMLelement("label")}}, {{HTMLelement("input")}}, {{HTMLelement("textarea")}} i {{HTMLelement("button")}}.

+ +

Abans d’avançar, fes una còpia local de la nostra plantilla HTML senzilla i hi introduiràs el formulari HTML.

+ +

L’element {{HTMLelement("form")}}

+ +

Tots els formularis comencen amb un element {{HTMLelement("form")}}, com ara:

+ +
<form action="/my-handling-form-page" method="post">
+
+</form>
+ +

Aquest element defineix formalment un formulari. És un element contenidor, com un element {{HTMLelement ("section")}} o {{HTMLelement ("footer")}}, però que conté específicament formularis; també admet alguns atributs específics per a configurar el comportament del formulari. Tots els atributs són opcionals, però és una pràctica habitual establir sempre com a mínim els atributs action i method:

+ + + +
+

Nota: Observa com funcionen aquests atributs en el nostre article Enviar les dades d’un formulari web, que trobaràs més endavant.

+
+ +

Per ara, afegeix l'element {{htmlelement("form")}} anterior al teu element HTML {{htmlelement("body")}}.

+ +

Els elements {{HTMLelement("label")}}, {{HTMLelement("input")}} i {{HTMLelement("textarea")}}

+ +

El nostre formulari de contacte no és complex: la part de l’entrada de les dades conté tres camps de text, cadascun amb el seu element {{HTMLelement("label")}} corresponent:

+ + + +

En termes de codi HTML, necessitem alguna cosa com la següent per a implementar aquests controls de formulari:

+ +
<form action="/my-handling-form-page" method="post">
+ <ul>
+  <li>
+    <label for="name">Nom:</label>
+    <input type="text" id="name" name="user_name">
+  </li>
+  <li>
+    <label for="mail">Correu electrònic:</label>
+    input type="email" id="mail" name="user_mail">
+  </li>
+  <li>
+    <label for="msg">Missatge:</label>
+    <textarea id="msg" name="user_message"></textarea>
+  </li>
+ </ul>
+</form>
+ +

Actualitza el codi del teu formulari perquè s'assembli a l’anterior.

+ +

Els elements {{HTMLelement("li")}} hi són per estructurar convenientment el nostre codi i facilitar el disseny (ho veuràs més endavant en aquest article). Incloem una etiqueta explícita per a cada control de formulari per motius d'usabilitat i accessibilitat. Tingues en compte l’ús de l’atribut for per a tots els elements {{HTMLelement ("label")}}, que pren com a valor l'identificador del control de formulari id al qual està associat; així és com un formulari s'associa a la seva etiqueta.

+ +

Fer-ho resulta molt útil: associa l’etiqueta amb el control del formulari i permet als usuaris de ratolí, trackpad i dispositius tàctils fer clic a l’etiqueta i activar el control corresponent, i també proporciona un nom accessible per als usuaris de lectors de pantalla. Trobaràs més informació sobre les etiquetes dels formularis en l’article Com estructurar un formulari web.

+ +

En l’element {{HTMLelement("input")}}, l’atribut més important és type. Aquest atribut és molt important perquè defineix la manera com apareix l’element {{HTMLelement("input")}}, i com es comporta. Trobaràs més informació més endavant, en l’article Els controls de formulari bàsics originals.

+ + + +

Per últim, però no per això menys important, cal destacar la sintaxi de <input> en contraposició a <textarea></textarea>. Aquesta és una de les curiositats de l’HTML. L’etiqueta <input> és un element buit, que significa que no necessita una etiqueta de tancament. En canvi, {{HTMLElement("textarea")}} no és un element buit, és a dir, s'hauria de tancar amb l'etiqueta final adequada. Això té una conseqüència en una característica específica dels formularis: la manera de definir el valor per defecte. Per a definir el valor predeterminat d'un element {{HTMLElement("input")}} has d'utilitzar l'atribut value de la manera següent:

+ +
<input type="text" value="per defecte aquest element s'omple amb aquest text">
+ +

D'altra banda, si vols definir un valor predeterminat per a un {{HTMLElement("textarea")}}, l'has de posar entre les etiquetes d'obertura i tancament de l'element {{HTMLElement("textarea")}}, com en el cas següent:

+ +
<textarea>
+per defecte aquest element s'omple amb aquest text
+</textarea>
+ +

L’element {{HTMLelement("button")}}

+ +

L'etiquetatge del nostre formulari és gairebé complet; només haurem d’afegir un botó que permeti a l’usuari enviar les dades un cop emplenat el formulari. Això es fa amb l’element {{HTMLelement("button")}}; afegeix el següent just a sobre de l’etiqueta de tancament </form>:

+ +
<li class="button">
+  <button type="submit">Envia el teu missatge</button>
+</li>
+ +

L’element {{htmlelement("button")}} també accepta un atribut type, que a la vegada accepta un d'aquests tres valors: submit, reset o button.

+ + + +
+

Nota: També pots utilitzar l’element {{HTMLElement("input")}} amb el type corresponent i crear un botó, per exemple <input type="submit">. L’avantatge principal de l’element {{HTMLelement("button")}} és que l’element {{HTMLelement("input")}} només admet text, mentre que l’element {{HTMLelement("button")}} admet contingut HTML complet i permet dissenyar botons més complexos i creatius.

+
+ +

Nocions bàsiques d’aplicació d’estil a formularis

+ +

Ara que has acabat d'escriure el codi HTML del teu formulari, desa’l i obre’l en un navegador. Observa que, de moment, presenta un aspecte més aviat lleig.

+ +
+

Nota: Si creus que el teu codi HTML no és correcte, compara’l amb el nostre exemple acabat: consulta el fitxer first-form.html (també pots consultar l’exemple en viu).

+
+ +

Aplicar estil a un formulari perquè quedi bé no és gens fàcil. En aquest article no t’ensenyarem a aplicar-hi estil de manera detallada; de moment, només afegirem una mica de CSS perquè sigui presentable.

+ +

Abans de res, afegeix un element {{htmlelement("style")}} a la teva pàgina, en la capçalera de l’HTML. Hi hauria d’haver una cosa com aquesta:

+ +
<style>
+
+</style>
+ +

Afegeix a l'etiqueta style el CSS següent:

+ +
form {
+  /* Centra el formulari a la pàgina */
+  margin: 0 auto;
+  width: 400px;
+  /* Esquema de formulari */
+  padding: 1em;
+  border: 1px solid #CCC;
+  border-radius: 1em;
+}
+
+ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+form li + li {
+  margin-top: 1em;
+}
+
+label {
+  /* Mida i alineació uniforme */
+  display: inline-block;
+  width: 90px;
+  text-align: right;
+}
+
+input,
+textarea {
+  / * Per garantir que tots els camps de text tenen la mateixa configuració de tipus de lletra
+     de manera predeterminada, les àrees de text tenen un tipus de lletra monospai */
+  font: 1em sans-serif;
+
+  /* Mida uniforme del camp de text */
+  width: 300px;
+  box-sizing: border-box;
+
+  /* Vores del camp de formulari */
+  border: 1px solid #999;
+}
+
+input:focus,
+textarea:focus {
+  /* Destacat addicional per a elements enfocats */
+  border-color: #000;
+}
+
+textarea {
+  /* Alinea els camps de text multilínies amb les seves etiquetes */
+  vertical-align: top;
+
+  /* Proporciona espai per a escriure algun text */
+  height: 5em;
+}
+
+.button {
+  /* Alinea els botons amb els camps de text */
+  padding-left: 90px; /* la mateixa mida que els elements d'etiqueta */
+}
+
+button {
+  /* Aquest marge addicional representa aproximadament el mateix espai que l’espai
+     entre les etiquetes i els seus camps de text */
+  margin-left: .5em;
+}
+ +

Desa’l i torna’l a carregar i observa que el teu formulari no s’hauria de veure tan lleig com abans.

+ +
+

Nota: Pots trobar la nostra versió a GitHub, en el fitxer first-form-styled.html (o consultar l’exemple en viu).

+
+ +

Enviar les dades del formulari al servidor web

+ +

L’última part, i potser la més complicada, és tractar les dades del formulari del costat del servidor. L’element {{HTMLelement("form")}} defineix on i com enviar les dades amb els atributs action i method.

+ +

Proporcionem un nom (name) a cada control de formulari. Els noms són importants tant del costat del client com del costat del servidor; informen el navegador sobre quin nom ha de donar a cadascuna de les dades i, del costat del servidor, permeten tractar cada dada pel nom. Les dades del formulari s’envien al servidor com a parells de nom/valor.

+ +

Per posar el nom a les dades d'un formulari, has d'utilitzar l'atribut name en cada control de formulari que recopilarà una informació específica. Vegem de nou una mica de codi del nostre formulari:

+ +
<form action="/my-handling-form-page" method="post">
+ <ul>
+  <li>
+    <label for="name">Nom:</label>
+    <input type="text" id="name" name="user_name" />
+  </li>
+  <li>
+    <label for="mail">Correu electrònic:</label>
+    <input type="email" id="mail" name="user_email" />
+  </li>
+  <li>
+    <label for="msg">Missatge:</label>
+    <textarea id="msg" name="user_message"></textarea>
+  </li>
+
+  ...
+
+ +

En el nostre exemple, el formulari enviarà 3 blocs de dades anomenats «user_name», «user_email» i «user_message». Aquestes dades s’enviaran a l’URL «/my-handling-form-page» pel mètode post de HTTP .

+ +

De la banda del servidor, l'script a l'URL «/my-handling-form-page» rebrà les dades com una llista de 3 elements clau/valor continguts en la sol·licitud HTTP. La manera de gestionar aquest script depèn de les dades. Cada llenguatge de servidor (PHP, Python, Ruby, Java, C#, etc.) té el seu mecanisme propi per al tractament de les dades de formulari. Està fora de l’àmbit d’aquest article aprofundir en aquest tema, però si vols saber-ne més, et proporcionem alguns exemples en el nostre article Enviar les dades d’un formulari web que trobaràs més endavant.

+ +

Resum

+ +

Enhorabona!, has creat el teu primer formulari web. Hauria de presentar un aspecte semblant a aquest:

+ +

{{ EmbedLiveSample('A_simple_form', '100%', '240', '', '/en-US/Learn/Forms/Your_first_form/Example') }}

+ +

Això només és el començament; ara toca aprofundir. Els formularis tenen molt més poder que el que hem vist aquí i la resta d'articles d'aquest mòdul t'ajudaran a dominar-los.

+ +

{{NextMenu("Learn/Forms/How_to_structure_a_web_form", "Learn/Forms")}}

+ +

En aquest mòdul

+ + + +

Temes avançats

+ + diff --git a/files/ca/learn/getting_started_with_the_web/com_funciona_web/index.html b/files/ca/learn/getting_started_with_the_web/com_funciona_web/index.html deleted file mode 100644 index 4a36fb2bff..0000000000 --- a/files/ca/learn/getting_started_with_the_web/com_funciona_web/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: Com funciona la Web -slug: Learn/Getting_started_with_the_web/Com_funciona_Web -tags: - - Beginner - - Client - - DNS - - HTTP - - IP - - Infrastructure - - Learn - - Server - - TCP - - 'l10n:priority' -translation_of: Learn/Getting_started_with_the_web/How_the_Web_works ---- -
{{LearnSidebar}}
- -
{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}
- -
-

Com funciona la web, proporciona una visió simplificada del que passa quan veieu una pàgina web en un navegador web en el vostre ordinador o telèfon.

-
- -

Aquesta teoria no és essencial per a l'escriptura de codi web en el curt termini, però en poc temps realment començareu a beneficiar-vos de la comprensió del que està passant en el fons.

- -

Clients i servidors

- -

Ordinadors connectats a la web són anomenats clients i servidors. Un diagrama simplificat de com interactuen podria tenir aquest aspecte:

- -

- - - -

Altres parts de la caixa d'eines

- -

El client i el servidor que hem descrit més amunt no expliquen tota la història. Hi ha moltes altres parts involucrades i que descriurem a continuació.

- -

Per ara, imaginem que la web és un camí. En un extrem del carrer hi ha el client, que és com casa vostra. A l'altre extrem del carrer hi ha el servidor, que és una botiga que voleu comprar alguna cosa.

- -

- -

A més del client i el servidor, també hem de saludar:

- - - -

Llavors, què passa exactament?

- -

En escriure una adreça web al navegador (per la nostra analogia, és com entrar a la botiga):

- -
    -
  1. El navegador va al servidor DNS i troba l'adreça real del servidor on el lloc web viu (trobar ll'adreça de la botiga).
    2. -
  2. El navegador envia un missatge de petició HTTP al servidor demanant-li que enviï una còpia de la pàgina web per al client (que vagi a la botiga i demani els seus béns). Aquest missatge i totes les altres dades enviades entre el client i el servidor, s'envian a través de la vostra connexió a Internet mitjançant el TCP/IP.
    3. -
  3. Sempre i quan el servidor aprovi la sol·licitud del client, el servidor envia al client un missatge "200 OK" , el que significa "Per descomptat que podeu veure aquest lloc web! Aquí és" i, a continuació, inicia l'enviament d'arxius del lloc web al navegador com una sèrie de petits trossos anomenats paquets de dades (la botiga us dóna la vostra mercaderia, i les porteu de tornada a casa).
    4. -
  4. El navegador acobla els petits trossos en un lloc web complet i us el mostra (la mercaderia arriba a la vostra porta - coses noves, impressionant!).
    5. -
- -

DNS explicat

- -

Les adreces web real no són cadenes agradables i  fàcils de recordar si les escriviu a la barra d'adreces per trobar els vostres llocs web favorits. Són cadenes de nombres, com aquesta: 63.245.217.105.

- -

Això s'anomena {{Glossary("IP Address","adreça IP")}}, i representa una ubicació única a la web. No obstant això, no és molt fàcil de recordar, oi? És per això que es van inventar els servidors de noms de domini. Aquests són servidors especials que responen a una adreça web que escriviu en el vostre navegador (com "mozilla.org") a l'adreça real (IP) del lloc web.

- -

Els llocs web poden ser aconseguits directament a través de les seves adreces IP. Intenteu anar a la pàgina web de Mozilla escrivint 63.245.217.105 a la barra d'adreces en una nova pestanya del navegador.

- -

A domain name is just another form of an IP address

- -

Paquets explicat

- -

Anteriorment hem utilitzat el terme "paquets" per descriure el format en què s'envien les dades del servidor al client. Què volem dir aquí? Bàsicament, quan les dades s'envien a través del web, s'envian com milers de petits trossos, de manera que molts diferents usuaris d'Internet poden descarregar el mateix lloc web al mateix temps. Si els llocs web s'enviessin en grans trossos individuals, només un usuari podria descarregar-los alhora, el que òbviament faria la Web molt ineficient i no seria molt divertit d'utilitzar.

- -

Veure

- - - -

Crèdit

- -

Foto carrer: Street composing, per Kevin D.

- -

{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}

diff --git a/files/ca/learn/getting_started_with_the_web/css_basics/index.html b/files/ca/learn/getting_started_with_the_web/css_basics/index.html new file mode 100644 index 0000000000..991a20ca78 --- /dev/null +++ b/files/ca/learn/getting_started_with_the_web/css_basics/index.html @@ -0,0 +1,276 @@ +--- +title: CSS bàsic +slug: Learn/Getting_started_with_the_web/CSS_bàsic +tags: + - Beginner + - CSS + - CodingScripting + - Learn + - Styling + - Web + - 'l10n:priority' +translation_of: Learn/Getting_started_with_the_web/CSS_basics +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}
+ +
+

CSS (Cascading Style Sheets) és el codi que utilitzareu per dissenyar la vostre pàgina web. CSS Bàsic us portarà a través del que necessiteu per començar. Respondrem a preguntes com: Com puc fer perquè el meu text sigui negre o vermell? Com puc fer perquè el meu contingut aparegui en tal i tal lloc en la pantalla? Com puc decorar la meva pàgina web amb imatges de fons i colors?

+
+ +

Què és CSS, en realitat? ?

+ +

Igual que HTML, CSS no és realment un llenguatge de programació. És un llenguatge de fulles d'estil, és a dir, us permet aplicar estils de manera selectiva als elements en els documents HTML. Per exemple, per seleccionar tots els elements de paràgraf en una pàgina HTML i convertir el text en color vermell, escriuríeu aquest CSS:

+ +
p {
+  color: red;
+}
+ +

Anem a provar: enganxeu aquestes tres línies de CSS en un arxiu nou a l'editor de text i, a continuació, deseu el arxiu com style.css en el directori d'estils.

+ +

Però encara heu d'aplicar el CSS al vostre document HTML, en cas contrari l'estil CSS no afectarà en la forma en que el navegador mostrarà el document HTML. (Si no heu estat seguint el nostre projecte, llegiu Tractar amb arxius i HTML bàsic per esbrinar el que cal fer en primer lloc.)

+ +
    +
  1. Obriu el arxiu index.html i enganxeu la següent línia en algun lloc del cap, és a dir, entre les etiquetes <head> i </head>: + + 
    <link href="styles/style.css" rel="stylesheet" type="text/css">
    +
    2. +
  2. Deseu index.html i carregar-ho en el navegador. Hauriau de veure alguna cosa com això:
    3. +
+ +

A mozilla logo and some paragraphs. The paragraph text has been styled red by our css.Si el text del paràgraf és ara de color vermell, felicitacions, ara heu escrit el vostre primer CSS amb èxit!

+ +

Anatomia d'un conjunt de regles CSS

+ +

Vegem el CSS anterior en una mica més de detall:

+ +

+ +

Tota l'estructura es denomina un conjunt de regles (però sovint "regla" per abreujar). Tingueu en compte també els noms dels components individuals:

+ +
+
Selector
+
El nom de l'element HTML en l'inici del conjunt de regles. Es selecciona l'element o els elements per donar estil (en aquest cas, els elements p). Per l'estil d'un element diferent, només cal canviar el selector.
+
Declaració
+
Una sola regla com color: red; especificant quines de les propietats de l'element voleu estil.
+
Propietats
+
Maneres en què podem donar estil a un element HTML. (En aquest cas, color és una propietat dels elements p.) CSS, ens permet triar quines propietats volem afectar amb la nostra regla.
+
Valor de propietat
+
A la dreta de la propietat, després dels dos punts, tenim el valor de la propietat, per triar una de les moltes aparicions possibles per a una determinada propietat (hi ha molts valors de color, a més de red).
+
+ +

Recordeu les altres parts importants de la sintaxi:

+ + + +

Així que per modificar diversos valors de propietats a la vegada, només les heu d'escriure separades per punt i coma, per exemple:

+ +
p {
+  color: red;
+  width: 500px;
+  border: 1px solid black;
+}
+ +

Seleccionar diversos elements

+ +

També podeu seleccionar diversos tipus d'elements i aplicar un únic conjunt de regles per a tots ells. Incloure múltiples selectors separats per comes. Per exemple:

+ +
p,li,h1 {
+  color: red;
+}
+ +

Diferents tipus de selector

+ +

Hi ha molts tipus diferents de selector. Per sobre, només ens fixarem en selectors d'elements, els quals seleccionen tots els elements d'un tipus determinat en els documents HTML donats. Però podem fer seleccions més específiques que això. Aquests són alguns dels tipus més comuns de selector:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Nom del SelectorQuè es seleccionaExemple
Selector d'element (de vegades anomenat un selector d'etiquetes o tipus)Tot(s) element(s) HTML del tipus especificat.p
+ Selecciona <p>
selector IDL'element de la pàgina amb l'ID especificat (en una pàgina HTML donada, només es permet un element per ID).#my-id
+ Selecciona <p id="my-id"> o <a id="my-id">
selector ClassL'element(s) a la pàgina amb la classe especificada (múltiples instàncies de la classe podem aparèixer en una pàgina)..my-class
+ Selecciona <p class="my-class"> i <a class="my-class">
selector AttributeL'element(s) a la pàgina amb l'atribut especificat.img[src]
+ Selecciona <img src="myimage.png"> però no <img>
selector Pseudo classL'element(s) especificat(s), però només quan està en l'estat especificat, per exemple, planejar per sobre.a:hover
+ Selecciona <a>, però només quan el punter del ratolí planeja sobre l'enllaç.
+ +

Hi ha moltes més selectors per explorar, i podeu trobar una llista més detallada a la nostra Guia de selectors.

+ +

Tipus de lletra i text

+ +

Ara que hem explorat alguns conceptes bàsics de CSS, començarem a afegir algunes regles més i informació al nostre arxiu style.css per fer que el nostre exemple es vegi bé. En primer lloc, anem a aconseguir els nostres tipus de lletra i text perquè es vegi una mica millor.

+ +
    +
  1. En primer lloc, torneu enrere i trobeu els enllaços de Google Fonts que vau guardar en un lloc segur. Afegiu l'element <link...> algun lloc dins del cap del vostre index.html (de nou, en qualsevol lloc entre les etiquetes <head> i </head>). Es veurà alguna cosa com això: + + 
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    +
    2. +
  2. A continuació, elimineu la regla existent que teniu en el vostre arxiu style.css. Va ser una bona prova, però el text en vermell en realitat no es veu molt bé.
    3. +
  3. Afegiu les següents línies al seu lloc, en substitució de la línia de marcador de posició amb la línia de font-family que vau obtenir de Google fonts. (font-family només significa el tipùs de lletra que voleu utilitzar per al text.) Aquesta primera regla estableix una base global en tipùs de lletra  i mida per a tota la pàgina (ja que <html> és l'element principal de tota la pàgina, i tots els elements dins d'ella heretaran el mateix tipus de lletra (font-family) i mida (font-size)): + 
    html {
+  font-size: 10px; /* px means 'pixels': the base font size is now 10 pixels high  */
+  font-family: placeholder: this should be the rest of the output you got from Google fonts
+}
    + +
    +

    Nota: He afegit un comentari per explicar el que significa "px". Qualsevol cosa en un document CSS entre /* i */ és un comentari CSS, que el navegador ignora quan processa el codi. Aquest és un lloc per vosaltres, per escriure notes útils sobre el que esteu fent.

    +
    +
    4. +
  4. Ara establirem les mides del tipus de lletra per als elements que contenen text, a l'interior del cos HTML ({{htmlelement("h1")}}, {{htmlelement("li")}} i {{htmlelement("p")}}). També centrarem el text del nostre encapçalament i establirem una certa altura de línia i espaiat entre caràcters en el contingut del cos perquè sigui una mica més fàcil de llegir: + 
    h1 {
+  font-size: 60px;
+  text-align: center;
+}
+
+p, li {
+  font-size: 16px;
+  line-height: 2;
+  letter-spacing: 1px;
+}
    +
    5. +
+ +

Podeu ajustar aquests valors de px al vostre gust per tal d'aconseguir el disseny que busqueu, però en general el vostre disseny ha de tenir aquest aspecte:

+ +

a mozilla logo and some paragraphs. a sans-serif font has been set, the font sizes, line height and letter spacing are adjusted, and the main page heading has been centered

+ +

Caixes, caixes, tot es tracta de caixes

+ +

Una cosa que notareu en escriure CSS és que molt d'ell es tracta de caixes - establir la seva mida, color, posició, etc. La major part dels elements HTML de la pàgina pot estar pensat com caixes que se sentin unes sobre unes altres.

+ +

a big stack of boxes or crates sat on top of one another

+ +

No us estranyeu, el disseny CSS es basa principalment en el model de caixa. Cada un dels blocs que ocupa espai en la vostra pàgina té propietats com aquesta:

+ + + +

three boxes sat inside one another. From outside to in they are labelled margin, border and padding

+ +

En aquesta secció també utilitzem:

+ + + +

Per tant, anem a començar i afegir una mica més de CSS a la nostra pàgina! Seguiu afegint aquestes noves regles al final de la pàgina, i no tingueu por d'experimentar amb el canvi de valors per veure com resulta.

+ +

Canviar el color de la pàgina

+ +
html {
+  background-color: #00539F;
+}
+ +

Aquesta regla estableix un color de fons a tota la pàgina. Canvieu el codi de color per qualsevol altre color que vau triar a l'hora de planificar el vostre lloc.

+ +

Ordenar el cos

+ +
body {
+  width: 600px;
+  margin: 0 auto;
+  background-color: #FF9500;
+  padding: 0 20px 20px 20px;
+  border: 5px solid black;
+}
+ +

Ara l'element body. Hi ha bastants declaracions aquí, així que passarem per totes elles una per una:

+ + + +

Posicionament i estil del títol de la pàgina principal

+ +
h1 {
+  margin: 0;
+  padding: 20px 0;
+  color: #00539F;
+  text-shadow: 3px 3px 1px black;
+}
+ +

Podeu haver notat que hi ha un buit horrible a la part superior del cos. Això succeeix perquè els navegadors apliquen algun estil predeterminat a l'element {{htmlelement("h1")}} (entre d'altres), tot i que no s'ha aplicat cap CSS en absolut! Això pot semblar una mala idea, però volem que fins i tot una pàgina web sense estil tingui la facilitat d'una lectura bàsica. Per desfer-nos de la bretxa sobreescriurem l'estil per defecte, establint  margin: 0;.

+ +

A continuació, hem establert el farciment (padding) superior i inferior de l'encapçalat a 20 píxels, i el text del encapçalat del mateix color que el color de fons de l'HTML.

+ +

Una de les propietats més interessants que hem utilitzat aquí és text-shadow , la qual aplica una ombra de text el contingut de text de l'element. Els seus quatre valors són els següents:

+ + + +

Un cop més, tracteu d'experimentar amb diferents valors per veure el que pot passar.

+ +

Centrar la imatge

+ +
img {
+  display: block;
+  margin: 0 auto;
+}
+ +

Finalment, centrarem la imatge perquè es vegi millor. Podríem utilitzar el marge: 0 auto, nou truc que hem fet servir anteriorment per al cos, però també hem de fer alguna cosa més. L'element del cos és a nivell de bloc, el que significa que ocupa un espai a la pàgina i pot tenir marges i altres valors d'espaiat que se li apliquen. Les imatges, per altra banda, són elements en línia, el que significa que no poden. Així que per aplicar marges a la imatge, hem de donar a la imatge el comportament a nivell de bloc usant  display: block;.

+ +
+

Note: No us preocupeu si encara no enteneu display: block; i la distinció a nivell de bloc/en línia. Ho fareu mentre estudieu CSS amb més profunditat. Podeu trobar més informació sobre els diferents valors de visualització disponibles a la nostra pàgina de referència de la pantalla.

+
+ +

Conclusió

+ +

Si heu seguit totes les instruccions d'aquest article, hareu d'acabar amb una pàgina que es vegi alguna cosa com això (també es pot veure la nostra versió aquí):

+ +

a mozilla logo, centered, and a header and paragraphs. It now looks nicely styled, with a blue background for the whole page and orange background for the centered main content strip.

+ +

Si us quedeu encallats, sempre podreu comparar el vostre treball amb el nostre codi d'exemple acabat en Github.

+ +

Aquí, en realitat només hem tractat una part superficial de CSS. Per obtenir més informació, visiteu el nostre tema d'aprenentatge CSS.

+ +

{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}

diff --git "a/files/ca/learn/getting_started_with_the_web/css_b\303\240sic/index.html" "b/files/ca/learn/getting_started_with_the_web/css_b\303\240sic/index.html" deleted file mode 100644 index 991a20ca78..0000000000 --- "a/files/ca/learn/getting_started_with_the_web/css_b\303\240sic/index.html" +++ /dev/null @@ -1,276 +0,0 @@ ---- -title: CSS bàsic -slug: Learn/Getting_started_with_the_web/CSS_bàsic -tags: - - Beginner - - CSS - - CodingScripting - - Learn - - Styling - - Web - - 'l10n:priority' -translation_of: Learn/Getting_started_with_the_web/CSS_basics ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}
- -
-

CSS (Cascading Style Sheets) és el codi que utilitzareu per dissenyar la vostre pàgina web. CSS Bàsic us portarà a través del que necessiteu per començar. Respondrem a preguntes com: Com puc fer perquè el meu text sigui negre o vermell? Com puc fer perquè el meu contingut aparegui en tal i tal lloc en la pantalla? Com puc decorar la meva pàgina web amb imatges de fons i colors?

-
- -

Què és CSS, en realitat? ?

- -

Igual que HTML, CSS no és realment un llenguatge de programació. És un llenguatge de fulles d'estil, és a dir, us permet aplicar estils de manera selectiva als elements en els documents HTML. Per exemple, per seleccionar tots els elements de paràgraf en una pàgina HTML i convertir el text en color vermell, escriuríeu aquest CSS:

- -
p {
-  color: red;
-}
- -

Anem a provar: enganxeu aquestes tres línies de CSS en un arxiu nou a l'editor de text i, a continuació, deseu el arxiu com style.css en el directori d'estils.

- -

Però encara heu d'aplicar el CSS al vostre document HTML, en cas contrari l'estil CSS no afectarà en la forma en que el navegador mostrarà el document HTML. (Si no heu estat seguint el nostre projecte, llegiu Tractar amb arxius i HTML bàsic per esbrinar el que cal fer en primer lloc.)

- -
    -
  1. Obriu el arxiu index.html i enganxeu la següent línia en algun lloc del cap, és a dir, entre les etiquetes <head> i </head>: - - 
    <link href="styles/style.css" rel="stylesheet" type="text/css">
    -
    2. -
  2. Deseu index.html i carregar-ho en el navegador. Hauriau de veure alguna cosa com això:
    3. -
- -

A mozilla logo and some paragraphs. The paragraph text has been styled red by our css.Si el text del paràgraf és ara de color vermell, felicitacions, ara heu escrit el vostre primer CSS amb èxit!

- -

Anatomia d'un conjunt de regles CSS

- -

Vegem el CSS anterior en una mica més de detall:

- -

- -

Tota l'estructura es denomina un conjunt de regles (però sovint "regla" per abreujar). Tingueu en compte també els noms dels components individuals:

- -
-
Selector
-
El nom de l'element HTML en l'inici del conjunt de regles. Es selecciona l'element o els elements per donar estil (en aquest cas, els elements p). Per l'estil d'un element diferent, només cal canviar el selector.
-
Declaració
-
Una sola regla com color: red; especificant quines de les propietats de l'element voleu estil.
-
Propietats
-
Maneres en què podem donar estil a un element HTML. (En aquest cas, color és una propietat dels elements p.) CSS, ens permet triar quines propietats volem afectar amb la nostra regla.
-
Valor de propietat
-
A la dreta de la propietat, després dels dos punts, tenim el valor de la propietat, per triar una de les moltes aparicions possibles per a una determinada propietat (hi ha molts valors de color, a més de red).
-
- -

Recordeu les altres parts importants de la sintaxi:

- - - -

Així que per modificar diversos valors de propietats a la vegada, només les heu d'escriure separades per punt i coma, per exemple:

- -
p {
-  color: red;
-  width: 500px;
-  border: 1px solid black;
-}
- -

Seleccionar diversos elements

- -

També podeu seleccionar diversos tipus d'elements i aplicar un únic conjunt de regles per a tots ells. Incloure múltiples selectors separats per comes. Per exemple:

- -
p,li,h1 {
-  color: red;
-}
- -

Diferents tipus de selector

- -

Hi ha molts tipus diferents de selector. Per sobre, només ens fixarem en selectors d'elements, els quals seleccionen tots els elements d'un tipus determinat en els documents HTML donats. Però podem fer seleccions més específiques que això. Aquests són alguns dels tipus més comuns de selector:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Nom del SelectorQuè es seleccionaExemple
Selector d'element (de vegades anomenat un selector d'etiquetes o tipus)Tot(s) element(s) HTML del tipus especificat.p
- Selecciona <p>
selector IDL'element de la pàgina amb l'ID especificat (en una pàgina HTML donada, només es permet un element per ID).#my-id
- Selecciona <p id="my-id"> o <a id="my-id">
selector ClassL'element(s) a la pàgina amb la classe especificada (múltiples instàncies de la classe podem aparèixer en una pàgina)..my-class
- Selecciona <p class="my-class"> i <a class="my-class">
selector AttributeL'element(s) a la pàgina amb l'atribut especificat.img[src]
- Selecciona <img src="myimage.png"> però no <img>
selector Pseudo classL'element(s) especificat(s), però només quan està en l'estat especificat, per exemple, planejar per sobre.a:hover
- Selecciona <a>, però només quan el punter del ratolí planeja sobre l'enllaç.
- -

Hi ha moltes més selectors per explorar, i podeu trobar una llista més detallada a la nostra Guia de selectors.

- -

Tipus de lletra i text

- -

Ara que hem explorat alguns conceptes bàsics de CSS, començarem a afegir algunes regles més i informació al nostre arxiu style.css per fer que el nostre exemple es vegi bé. En primer lloc, anem a aconseguir els nostres tipus de lletra i text perquè es vegi una mica millor.

- -
    -
  1. En primer lloc, torneu enrere i trobeu els enllaços de Google Fonts que vau guardar en un lloc segur. Afegiu l'element <link...> algun lloc dins del cap del vostre index.html (de nou, en qualsevol lloc entre les etiquetes <head> i </head>). Es veurà alguna cosa com això: - - 
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    -
    2. -
  2. A continuació, elimineu la regla existent que teniu en el vostre arxiu style.css. Va ser una bona prova, però el text en vermell en realitat no es veu molt bé.
    3. -
  3. Afegiu les següents línies al seu lloc, en substitució de la línia de marcador de posició amb la línia de font-family que vau obtenir de Google fonts. (font-family només significa el tipùs de lletra que voleu utilitzar per al text.) Aquesta primera regla estableix una base global en tipùs de lletra  i mida per a tota la pàgina (ja que <html> és l'element principal de tota la pàgina, i tots els elements dins d'ella heretaran el mateix tipus de lletra (font-family) i mida (font-size)): - 
    html {
-  font-size: 10px; /* px means 'pixels': the base font size is now 10 pixels high  */
-  font-family: placeholder: this should be the rest of the output you got from Google fonts
-}
    - -
    -

    Nota: He afegit un comentari per explicar el que significa "px". Qualsevol cosa en un document CSS entre /* i */ és un comentari CSS, que el navegador ignora quan processa el codi. Aquest és un lloc per vosaltres, per escriure notes útils sobre el que esteu fent.

    -
    -
    4. -
  4. Ara establirem les mides del tipus de lletra per als elements que contenen text, a l'interior del cos HTML ({{htmlelement("h1")}}, {{htmlelement("li")}} i {{htmlelement("p")}}). També centrarem el text del nostre encapçalament i establirem una certa altura de línia i espaiat entre caràcters en el contingut del cos perquè sigui una mica més fàcil de llegir: - 
    h1 {
-  font-size: 60px;
-  text-align: center;
-}
-
-p, li {
-  font-size: 16px;
-  line-height: 2;
-  letter-spacing: 1px;
-}
    -
    5. -
- -

Podeu ajustar aquests valors de px al vostre gust per tal d'aconseguir el disseny que busqueu, però en general el vostre disseny ha de tenir aquest aspecte:

- -

a mozilla logo and some paragraphs. a sans-serif font has been set, the font sizes, line height and letter spacing are adjusted, and the main page heading has been centered

- -

Caixes, caixes, tot es tracta de caixes

- -

Una cosa que notareu en escriure CSS és que molt d'ell es tracta de caixes - establir la seva mida, color, posició, etc. La major part dels elements HTML de la pàgina pot estar pensat com caixes que se sentin unes sobre unes altres.

- -

a big stack of boxes or crates sat on top of one another

- -

No us estranyeu, el disseny CSS es basa principalment en el model de caixa. Cada un dels blocs que ocupa espai en la vostra pàgina té propietats com aquesta:

- - - -

three boxes sat inside one another. From outside to in they are labelled margin, border and padding

- -

En aquesta secció també utilitzem:

- - - -

Per tant, anem a començar i afegir una mica més de CSS a la nostra pàgina! Seguiu afegint aquestes noves regles al final de la pàgina, i no tingueu por d'experimentar amb el canvi de valors per veure com resulta.

- -

Canviar el color de la pàgina

- -
html {
-  background-color: #00539F;
-}
- -

Aquesta regla estableix un color de fons a tota la pàgina. Canvieu el codi de color per qualsevol altre color que vau triar a l'hora de planificar el vostre lloc.

- -

Ordenar el cos

- -
body {
-  width: 600px;
-  margin: 0 auto;
-  background-color: #FF9500;
-  padding: 0 20px 20px 20px;
-  border: 5px solid black;
-}
- -

Ara l'element body. Hi ha bastants declaracions aquí, així que passarem per totes elles una per una:

- - - -

Posicionament i estil del títol de la pàgina principal

- -
h1 {
-  margin: 0;
-  padding: 20px 0;
-  color: #00539F;
-  text-shadow: 3px 3px 1px black;
-}
- -

Podeu haver notat que hi ha un buit horrible a la part superior del cos. Això succeeix perquè els navegadors apliquen algun estil predeterminat a l'element {{htmlelement("h1")}} (entre d'altres), tot i que no s'ha aplicat cap CSS en absolut! Això pot semblar una mala idea, però volem que fins i tot una pàgina web sense estil tingui la facilitat d'una lectura bàsica. Per desfer-nos de la bretxa sobreescriurem l'estil per defecte, establint  margin: 0;.

- -

A continuació, hem establert el farciment (padding) superior i inferior de l'encapçalat a 20 píxels, i el text del encapçalat del mateix color que el color de fons de l'HTML.

- -

Una de les propietats més interessants que hem utilitzat aquí és text-shadow , la qual aplica una ombra de text el contingut de text de l'element. Els seus quatre valors són els següents:

- - - -

Un cop més, tracteu d'experimentar amb diferents valors per veure el que pot passar.

- -

Centrar la imatge

- -
img {
-  display: block;
-  margin: 0 auto;
-}
- -

Finalment, centrarem la imatge perquè es vegi millor. Podríem utilitzar el marge: 0 auto, nou truc que hem fet servir anteriorment per al cos, però també hem de fer alguna cosa més. L'element del cos és a nivell de bloc, el que significa que ocupa un espai a la pàgina i pot tenir marges i altres valors d'espaiat que se li apliquen. Les imatges, per altra banda, són elements en línia, el que significa que no poden. Així que per aplicar marges a la imatge, hem de donar a la imatge el comportament a nivell de bloc usant  display: block;.

- -
-

Note: No us preocupeu si encara no enteneu display: block; i la distinció a nivell de bloc/en línia. Ho fareu mentre estudieu CSS amb més profunditat. Podeu trobar més informació sobre els diferents valors de visualització disponibles a la nostra pàgina de referència de la pantalla.

-
- -

Conclusió

- -

Si heu seguit totes les instruccions d'aquest article, hareu d'acabar amb una pàgina que es vegi alguna cosa com això (també es pot veure la nostra versió aquí):

- -

a mozilla logo, centered, and a header and paragraphs. It now looks nicely styled, with a blue background for the whole page and orange background for the centered main content strip.

- -

Si us quedeu encallats, sempre podreu comparar el vostre treball amb el nostre codi d'exemple acabat en Github.

- -

Aquí, en realitat només hem tractat una part superficial de CSS. Per obtenir més informació, visiteu el nostre tema d'aprenentatge CSS.

- -

{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}

diff --git a/files/ca/learn/getting_started_with_the_web/dealing_with_files/index.html b/files/ca/learn/getting_started_with_the_web/dealing_with_files/index.html new file mode 100644 index 0000000000..0ba94d3273 --- /dev/null +++ b/files/ca/learn/getting_started_with_the_web/dealing_with_files/index.html @@ -0,0 +1,104 @@ +--- +title: Tractar amb arxius +slug: Learn/Getting_started_with_the_web/Tractar_amb_arxius +tags: + - Beginner + - CodingScripting + - Files + - Guide + - HTML + - 'l10n:priority' + - theory + - website +translation_of: Learn/Getting_started_with_the_web/Dealing_with_files +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}
+ +
+

Un lloc web es compon de molts arxius: contingut de text, codi, fulles d'estil, contingut multimèdia, i així successivament. Quan estigueu construint un lloc web, necessitareu muntar aquests arxius en una estructura assenyada al vostre ordinador, assegurar-vos que poden parlar l'un a l'altre, i obtenir tot el seu contingut buscat, abans de que finalment els pujeu a un servidor. Tractar amb arxius descriu alguns problemes que heu de tenir en compte perquè pugueu establir una estructura d'arxius assenyada per al vostre lloc web.

+
+ +

On ha de viure el lloc web en l'ordinador?

+ +

Quan treballeu un lloc web en local en el vostre ordinador, heu de tenir tots els arxius relacionats en una sola carpeta que reflecteix l'estructura d'arxius de la pàgina web publicada al servidor. Aquesta carpeta pot viure en qualsevol lloc que us agradi, però cal posar-la en algun lloc on es pugui trobar fàcilment, potser en el escriptori de la vostra carpeta d'inici, o en l'arrel del disc dur.

+ +
    +
  1. Trieu un lloc per emmagatzemar els vostres projectes web. A continuació, creeu una nova carpeta anomenada web-projects (o similar). Aqui és on viuran tots els vostres projectes web.
    2. +
  2. Dins d'aquesta primera carpeta, creeu una altra carpeta per emmagatzemar el vostre primer lloc web. Nomeneu-ho test-site (o alguna cosa més imaginativa).
    3. +
+ +

Un a part en l'embolcall i espaiament

+ +

Us donareu compte de que al llarg d'aquest article, us demanarem que nomeneu les carpetes i arxius completament en minúscules i sense espais. Això és perquè:

+ +
    +
  1. Molts equips, especialment en servidors web, són sensibles a les majúscules i minúscules. Així, per exemple, si poseu una imatge a la vostra pàgina web en la prova in test-site/MyImage.jpg, i després en un arxiu diferent intenteu invocar la imatge com test-site/myimage.jpg, pot ser que no funcioni.
    2. +
  2. Navegadors, servidors web, i llenguatges de programació no manegen espais de forma coherent. Per exemple, si utilitzeu espais en els noms d'arxiu, alguns sistemes poden tractar el nom d'arxiu com dos noms d'arxiu. Alguns servidors substituiran els espais en els noms d'arxiu amb "%20" (el codi de caràcters d'espais en els URI), trencant tots els seus enllaços. Es millor separar les paraules amb guions o subratllats: my-file.html o  my_file.html.
    3. +
+ +

Per aquestes raons, el millor és tenir l'hàbit d'escriure els noms de carpetes i arxius en minúscules i sense espais, almenys fins que sapigueu que és el que esteu fent. D'aquesta manera evitareu un menor numero de problemes.

+ +

Quina estructura ha de tenir el lloc web?

+ +

A continuació, anem a veure quina estructura ha de tenir el nostre lloc de prova. Les coses més comuns que tindrem en qualsevol projecte de lloc web que creiem són un arxiu índex HTML i carpetes que continguin imatges, arxius d'estil i arxius de scripts. Crearem aquests ara:

+ +
    +
  1. index.html: Aquest arxiu contindrà generalment el contingut de la vostra pàgina d'inici, és a dir, el text i les imatges que la gent veu quan accedeixin per primera vegada al vostre lloc. Usant el vostre editor de text, creeu un nou arxiu anomenat index.html i guardeu-ho just dins de la carpeta test-site.
    2. +
  2. carpeta d'imatges: Aquesta carpeta contindrà totes les imatges que utilitzeu en el vostre lloc. Creeu una carpeta anomenada images, dins de la carpeta test-site.
    3. +
  3. carpeta d'estils: Aquesta carpeta contindrà el codi CSS per donar estil el vostre contingut (per exemple, l'establiment de text i colors de fons). Creeu una carpeta anomenada styles, dins de la carpeta test-site.
    4. +
  4. carpeta de scripts: Aquesta carpeta contindrà tot el codi JavaScript que s'utilitza per afegir funcionalitat interactiva al vostre lloc (per exemple, els botons que carreguen dades quan es fa clic). Crear una carpeta anomenada scripts, dins de la carpeta test-site.
    5. +
+ +
+

Nota: En ordinadors Windows, és possible que tingueu problemes per veure els noms dels arxius, ja que Windows té una opció molesta anomenada Ocultar extensions per a tipus d'arxiu coneguts, activat per defecte. En general, podeu desactivar aquesta opció, aneu a l'Explorador de Windows, seleccioneu l'opció Opcions de carpeta..., desmarqueu la casella Ocultar les extensions dels tipus d'arxiu coneguts i fent clic a OK. Per obtenir informació més específica sobre la vostra versió de Windows, feu una cerca de Yahoo!

+
+ +

Rutes d'arxius

+ +

Per fer que els arxius parlin uns amb uns altres, heu de proporcionar una ruta d'accés entre ells - bàsicament una ruta per a un arxiu sap on és l'altre. Per demostrar això, introduirem una mica d'HTML en el nostre arxiu index.html, i farem que es vegi la imatge que vam escollir en l'article. "Quin aspecte tindrà en el vostre lloc web?"

+ +
    +
  1. Copieu la imatge que vau escollir anteriorment a la carpeta images.
    2. +
  2. Obriu el vostre arxiu index.html, i inseriu el codi següent a l'arxiu exactament com es mostra. No es preocupeu per tot el que significa per ara - veureu les estructures amb més detall més endavant en la sèrie. + 
    <!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>My test page</title>
+  </head>
+  <body>
+    <img src="" alt="My test image">
+  </body>
+</html>
    +
    3. +
  3. La línia <img src="" alt="My test image"> és el codi HTML que insereix una imatge a la pàgina. Hem de dir-li a l'HTML on és la imatge. La imatge es troba dins del directori images, que està en el mateix directori que index.html. Per caminar per l'estructura de l'arxiu de index.html fins a la nostra imatge, la ruta de l'arxiu que necessitaríeu és images/your-image-filename. Per exemple, la nostra imatge es diu firefox-icon.png, de manera que la ruta de l'arxiu és images/firefox-icon.png.
    4. +
  4. Introduïu la ruta de l'arxiu en el codi HTML entre dobles cometes del codi src="".
    5. +
  5. Deseu el fitxer HTML, després carregar-la en el vostre navegador web (doble clic al fitxer). Heu de veure la nova pàgina web que mostra la imatge!
    6. +
+ +

A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world

+ +

Algunes regles generals per a les rutes d'arxius:

+ + + +

Per ara, això és tot el que necessiteu saber.

+ +
+

Nota: El sistema d'arxius de Windows tendeix a utilitzar barres invertides, no barres diagonals, com, per exemple, C:\windows. Això no importa - fins i tot si esteu desenvolupant el vostre lloc web en Windows, heu d'utilitzar barres diagonals en el vostre codi.

+
+ +

Què més es pot fer?

+ +

Això és tot per ara. La vostra estructura de carpetes ha de ser alguna cosa com això:

+ +

A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file

+ +

{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}

diff --git a/files/ca/learn/getting_started_with_the_web/how_the_web_works/index.html b/files/ca/learn/getting_started_with_the_web/how_the_web_works/index.html new file mode 100644 index 0000000000..4a36fb2bff --- /dev/null +++ b/files/ca/learn/getting_started_with_the_web/how_the_web_works/index.html @@ -0,0 +1,99 @@ +--- +title: Com funciona la Web +slug: Learn/Getting_started_with_the_web/Com_funciona_Web +tags: + - Beginner + - Client + - DNS + - HTTP + - IP + - Infrastructure + - Learn + - Server + - TCP + - 'l10n:priority' +translation_of: Learn/Getting_started_with_the_web/How_the_Web_works +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}
+ +
+

Com funciona la web, proporciona una visió simplificada del que passa quan veieu una pàgina web en un navegador web en el vostre ordinador o telèfon.

+
+ +

Aquesta teoria no és essencial per a l'escriptura de codi web en el curt termini, però en poc temps realment començareu a beneficiar-vos de la comprensió del que està passant en el fons.

+ +

Clients i servidors

+ +

Ordinadors connectats a la web són anomenats clients i servidors. Un diagrama simplificat de com interactuen podria tenir aquest aspecte:

+ +

+ + + +

Altres parts de la caixa d'eines

+ +

El client i el servidor que hem descrit més amunt no expliquen tota la història. Hi ha moltes altres parts involucrades i que descriurem a continuació.

+ +

Per ara, imaginem que la web és un camí. En un extrem del carrer hi ha el client, que és com casa vostra. A l'altre extrem del carrer hi ha el servidor, que és una botiga que voleu comprar alguna cosa.

+ +

+ +

A més del client i el servidor, també hem de saludar:

+ + + +

Llavors, què passa exactament?

+ +

En escriure una adreça web al navegador (per la nostra analogia, és com entrar a la botiga):

+ +
    +
  1. El navegador va al servidor DNS i troba l'adreça real del servidor on el lloc web viu (trobar ll'adreça de la botiga).
    2. +
  2. El navegador envia un missatge de petició HTTP al servidor demanant-li que enviï una còpia de la pàgina web per al client (que vagi a la botiga i demani els seus béns). Aquest missatge i totes les altres dades enviades entre el client i el servidor, s'envian a través de la vostra connexió a Internet mitjançant el TCP/IP.
    3. +
  3. Sempre i quan el servidor aprovi la sol·licitud del client, el servidor envia al client un missatge "200 OK" , el que significa "Per descomptat que podeu veure aquest lloc web! Aquí és" i, a continuació, inicia l'enviament d'arxius del lloc web al navegador com una sèrie de petits trossos anomenats paquets de dades (la botiga us dóna la vostra mercaderia, i les porteu de tornada a casa).
    4. +
  4. El navegador acobla els petits trossos en un lloc web complet i us el mostra (la mercaderia arriba a la vostra porta - coses noves, impressionant!).
    5. +
+ +

DNS explicat

+ +

Les adreces web real no són cadenes agradables i  fàcils de recordar si les escriviu a la barra d'adreces per trobar els vostres llocs web favorits. Són cadenes de nombres, com aquesta: 63.245.217.105.

+ +

Això s'anomena {{Glossary("IP Address","adreça IP")}}, i representa una ubicació única a la web. No obstant això, no és molt fàcil de recordar, oi? És per això que es van inventar els servidors de noms de domini. Aquests són servidors especials que responen a una adreça web que escriviu en el vostre navegador (com "mozilla.org") a l'adreça real (IP) del lloc web.

+ +

Els llocs web poden ser aconseguits directament a través de les seves adreces IP. Intenteu anar a la pàgina web de Mozilla escrivint 63.245.217.105 a la barra d'adreces en una nova pestanya del navegador.

+ +

A domain name is just another form of an IP address

+ +

Paquets explicat

+ +

Anteriorment hem utilitzat el terme "paquets" per descriure el format en què s'envien les dades del servidor al client. Què volem dir aquí? Bàsicament, quan les dades s'envien a través del web, s'envian com milers de petits trossos, de manera que molts diferents usuaris d'Internet poden descarregar el mateix lloc web al mateix temps. Si els llocs web s'enviessin en grans trossos individuals, només un usuari podria descarregar-los alhora, el que òbviament faria la Web molt ineficient i no seria molt divertit d'utilitzar.

+ +

Veure

+ + + +

Crèdit

+ +

Foto carrer: Street composing, per Kevin D.

+ +

{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}

diff --git a/files/ca/learn/getting_started_with_the_web/installing_basic_software/index.html b/files/ca/learn/getting_started_with_the_web/installing_basic_software/index.html new file mode 100644 index 0000000000..aa431f3199 --- /dev/null +++ b/files/ca/learn/getting_started_with_the_web/installing_basic_software/index.html @@ -0,0 +1,67 @@ +--- +title: Instal·lació bàsica del programari +slug: Learn/Getting_started_with_the_web/Instal·lació_bàsica_programari +tags: + - Beginner + - Browser + - Learn + - Setup + - Tools + - WebMechanics + - 'l10n:priority' + - text editor +translation_of: Learn/Getting_started_with_the_web/Installing_basic_software +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}
+ +
+

En la Instal·lació de programari bàsic, us mostrarem les eines que necessiteu per a començar amb el desenvolupament web, i com instal·lar-les correctament.

+
+ +

Quines eines fan servir els professionals?

+ + + +

Quines eines realment necessito, ara mateix?

+ +

Sembla una llista aterridora, però, afortunadament, es pot començar en el desenvolupament web sense saber-ne res de la majoria. En aquest article només en configurarem les mínimes - un editor de text i alguns navegadors web moderns.

+ +

Instal·lació d'un editor de text

+ +

Probablement ja teniu un editor de text bàsic en l'equip. Per defecte, Windows inclou el Notepad i OS X ve amb TextEdit. Les distribucions de Linux varien; Ubuntu ve amb gedit per defecte.

+ +

Per al desenvolupament web, segurament treballareu millor amb altres eines que el NotePad o el TextEdit. Es recomana començar amb Brackets, que és un editor gratuït que ofereix vistes prèvies i suggeriments per al codi.

+ +

Instal·lació de navegadors web moderns

+ +

Per ara, només haurem d'instal·lar un parell de navegadors web d'escriptori per provar el nostre codi. Seleccioneu el vostre sistema operatiu i feu clic a l'enllaç corresponent per descarregar els instal·ladors per als vostres navegadors preferits:

+ + + +

Abans de continuar, heu d'instal·lar almenys dos d'aquests navegadors i tenir-los llestos per a la prova.

+ + + +

Instal·lació d'un servidor web local

+ +

Alguns exemples, per a que funcionin correctament caldrà executar-los amb un servidor web local instal·lat. Podeu esbrinar com fer-ho a Com instal·lar i configurar un servidor local de test? (en anglès)

+ + + +

{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}

diff --git "a/files/ca/learn/getting_started_with_the_web/instal\302\267laci\303\263_b\303\240sica_programari/index.html" "b/files/ca/learn/getting_started_with_the_web/instal\302\267laci\303\263_b\303\240sica_programari/index.html" deleted file mode 100644 index aa431f3199..0000000000 --- "a/files/ca/learn/getting_started_with_the_web/instal\302\267laci\303\263_b\303\240sica_programari/index.html" +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: Instal·lació bàsica del programari -slug: Learn/Getting_started_with_the_web/Instal·lació_bàsica_programari -tags: - - Beginner - - Browser - - Learn - - Setup - - Tools - - WebMechanics - - 'l10n:priority' - - text editor -translation_of: Learn/Getting_started_with_the_web/Installing_basic_software ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}
- -
-

En la Instal·lació de programari bàsic, us mostrarem les eines que necessiteu per a començar amb el desenvolupament web, i com instal·lar-les correctament.

-
- -

Quines eines fan servir els professionals?

- - - -

Quines eines realment necessito, ara mateix?

- -

Sembla una llista aterridora, però, afortunadament, es pot començar en el desenvolupament web sense saber-ne res de la majoria. En aquest article només en configurarem les mínimes - un editor de text i alguns navegadors web moderns.

- -

Instal·lació d'un editor de text

- -

Probablement ja teniu un editor de text bàsic en l'equip. Per defecte, Windows inclou el Notepad i OS X ve amb TextEdit. Les distribucions de Linux varien; Ubuntu ve amb gedit per defecte.

- -

Per al desenvolupament web, segurament treballareu millor amb altres eines que el NotePad o el TextEdit. Es recomana començar amb Brackets, que és un editor gratuït que ofereix vistes prèvies i suggeriments per al codi.

- -

Instal·lació de navegadors web moderns

- -

Per ara, només haurem d'instal·lar un parell de navegadors web d'escriptori per provar el nostre codi. Seleccioneu el vostre sistema operatiu i feu clic a l'enllaç corresponent per descarregar els instal·ladors per als vostres navegadors preferits:

- - - -

Abans de continuar, heu d'instal·lar almenys dos d'aquests navegadors i tenir-los llestos per a la prova.

- - - -

Instal·lació d'un servidor web local

- -

Alguns exemples, per a que funcionin correctament caldrà executar-los amb un servidor web local instal·lat. Podeu esbrinar com fer-ho a Com instal·lar i configurar un servidor local de test? (en anglès)

- - - -

{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}

diff --git a/files/ca/learn/getting_started_with_the_web/javascript_basics/index.html b/files/ca/learn/getting_started_with_the_web/javascript_basics/index.html new file mode 100644 index 0000000000..e9b90830ca --- /dev/null +++ b/files/ca/learn/getting_started_with_the_web/javascript_basics/index.html @@ -0,0 +1,394 @@ +--- +title: JavaScript bàsic +slug: Learn/Getting_started_with_the_web/JavaScript_bàsic +tags: + - Beginner + - CodingScripting + - JavaScript + - Learn + - Web + - 'l10n:priority' +translation_of: Learn/Getting_started_with_the_web/JavaScript_basics +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}
+ +
+

JavaScript és un llenguatge de programació que afegeix interactivitat al vostre lloc web (per exemple: jocs, respostes quan es premen els botons o les dades introduïdes en formularis, estil dinàmic, animació). Aquest article us ajudarà a començar amb aquest llenguatge emocionant i us donarà una idea del que és possible.

+
+ +

Què és JavaScript, realment?

+ +

{{Glossary("JavaScript")}} ("JS" abreujat) és un veritable {{Glossary("Dynamic programming language", "llenguatge dinàmic de programació")}} en tota regla, que quan s'aplica a un document {{Glossary("HTML")}}, pot proporcionar interactivitat dinàmica en els llocs web. Va ser inventat per Brendan Eich, cofundador del projecte Mozilla, la Fundació Mozilla i Mozilla Corporation.

+ +

Javascript és increïblement versàtil. Podeu començar a poc a poc, amb carrusels, galeries d'imatges, dissenys fluctuants i les respostes a les pulsacions de botó. Amb més experiència sereu capaços de crear jocs,  gràfics animats en 2D i 3D, aplicacions completes de bases de dades i molt més!

+ +

JavaScript per si mateix és bastant compacte però molt flexible. Els desenvolupadors han escrit una gran varietat d'eines que complementen el nucli del llenguatge JavaScript, el desbloqueig d'una gran quantitat de funcionalitats extra amb el mínim esforç. Aquestes inclouen:

+ + + +

Un exemple "hola món"

+ +

La secció anterior pot sonar molt emocionant, i així ha de ser - i Javascript és una de les tecnologies web més vives i quan comenceu a ser bons en el seu ús, els vostres llocs web entraran en una nova dimensió de poder i creativitat.

+ +

No obstant això, Javascript és una mica més complex per sentir-se còmodes que amb HTML i CSS. Podria ser necessari començar a poc a poc i seguir treballant en petits passos consistents. Per començar, us mostrarem com afegir una mica de Javascript bàsic a la vostre pàgina, creant un "Hello world!" d'exemple (l'estandard en els exemples bàsics de programació).

+ +
+

Important: Si no ho heu estat seguint juntament amb la resta del nostre curs,  descarregueu el codi exemple i utilitzar-ho com a punt de partida.

+
+ +
    +
  1. En primer lloc, aneu al vostre lloc de prova i creeu una nova carpeta amb el nom 'scripts' (sense les cometes). Després, en la nova carpeta scripts que acabeu de crear, creeu un nou arxiu anomenat main.js. Guardeu-ho en la carpeta scripts.
    2. +
  2. A continuació, en l'arxiu index.html introduir l'element següent en una nova línia just abans de l'etiqueta de tancament </body>: + 
    <script src="scripts/main.js"></script>
    +
    3. +
  3. La seva funció fa bàsicament la mateixa feina que l'element {{htmlelement("link")}} per CSS - s'aplica el codi JavaScript a la pàgina, de manera que pot tenir un efecte sobre el codi HTML (juntament amb el CSS, i qualsevol altra cosa en la pàgina).
    4. +
  4. +

    Ara afegiu el codi següent a l'arxiu main.js:

    + + 
    var myHeading = document.querySelector('h1');
+myHeading.textContent = 'Hello world!';
    +
    5. +
  5. Finalment, assegureu-vos que els fitxers HTML i JavaScript es guarden i index.html es carrega en el navegador. Haurieu de veure alguna cosa com el següent:
    6. +
+ +
+

Nota: La raó per la qual hem posat l'element {{htmlelement("script")}} prop de la part inferior de l'arxiu HTML és que l'HTML és carregat pel navegador en l'ordre en què apareix en l'arxiu. Si el Javascript es carrega primer i se suposa que afecta a l'HTML sota ell, pot ser que no funcioni, ja que el Javascript es carregaria abans de l'HTML que se suposa que funciona. Per tant, col·locar Javascript prop de la part inferior de la pàgina HTML és sovint la millor estratègia.

+
+ +

Què va passar?

+ +

Al text de la capçalera ara s'ha canviat a "Hola, món!" amb l'ús de JavaScript. Això s'ha fet utilitzant primer una funció denominada {{domxref("Document.querySelector", "querySelector()")}} per obtenir una referència al vostre encapçalament, i emmagatzemar-ho en una variable denominada myHeading. Això és molt similar al que vam fer amb l'ús de selectors CSS. Quan es vol fer alguna cosa en un element, primer heu de seleccionar-lo.

+ +

Després d'això, s'estableix el valor de la variable myHeading amb la propietat {{domxref("Node.textContent", "textContent")}} (que representa el contingut del encapçalament) a "Hola, món!".

+ +

Curs intensiu bàsic del llenguatge

+ +

Anem a explicar algunes de les característiques bàsiques del llenguatge JavaScript, per donar-vos una major comprensió de com funciona tot. Millor encara, aquestes característiques són comunes a tots els llenguatges de programació. Si domineu aquests fonaments, esteu en el camí de ser capaços de programar gairebé qualsevol cosa!

+ +
+

Important:En aquest article, intenteu introduir les línies de codi d'exemple en la vostra consola de Javascript per veure què succeeix. Per a més detalls sobre les consoles de JavaScript, consulteu Descobrir eines per a desenvolupadotrs del navegador.

+
+ +

Variables

+ +

{{Glossary("Variable", "Variables")}} són contenidors en els quals es poden emmagatzemar valors. Es comença per declarar una variable amb la paraula clau var, seguit pel nom que voleu nomenar:

+ +
var myVariable;
+ +
+

Nota: Totes les sentències en JavaScript han d'acabar amb un punt i coma, per indicar que aquí és on acaba la sentència. Si no incloeu aquests, es poden obtenir resultats inesperats.

+
+ +
+

Nota: Podeu nomenar una variable gairebé qualsevol cosa, però hi ha algunes restriccions de nom (vegeu aquest article sobre les regles de denominació de les variables). Si no esteu segur, podeu comprovar el nom de la variable per veure si és vàlida.

+
+ +
+

Nota: JavaScript és sensible a majúscules - myVariable és una variable diferent a myvariable. Si si esteu tenint problemes en el vostre codi, comprobeu el cos!

+
+ +

Després de declarar una variable, podeu donar-li un valor:

+ +
myVariable = 'Bob';
+ +

Podeu fer les dues operacions en la mateixa línia si ho desitjeu:

+ +
var myVariable = 'Bob';
+ +

Podeu recuperar el valor amb només cridar la variable pel seu nom:

+ +
myVariable;
+ +

Després de donar a una variable un valor, posteriorment podeu optar per canviar-ho:

+ +
var myVariable = 'Bob';
+myVariable = 'Steve';
+ +

Recordeu que les variables tenen diferents tipus de dades:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
VariableExplicacióExemple
{{Glossary("String")}}Una seqüència de text coneguda com una cadena. Per indicar que la variable és una cadena, heu de tancar-la entre cometes.var myVariable = 'Bob';
{{Glossary("Number")}}Un nombre. Els nombres no tenen cometes al voltant d'ells.var myVariable = 10;
{{Glossary("Boolean")}}Un valor True/False. Les paraules true i false són paraules clau especials en JS, i no necessiten cometes.var myVariable = true;
{{Glossary("Array")}}Una estructura que permet emmagatzemar diversos valors en una sola referència.var myVariable = [1,'Bob','Steve',10];
+ Referir-se a cada membre de la matriu d'aquesta manera:
+ myVariable[0], myVariable[1], etc.
{{Glossary("Object")}}Bàsicament, qualsevol cosa. Tot en JavaScript és un objecte, i pot ser emmagatzemat en una variable. Tingueu això en compte a mesura que apreneu.var myVariable = document.querySelector('h1');
+ Tots els exemples anteriors també
+ +

Llavors, per què necessitem les variables? Bé, es necessiten les variables per fer alguna cosa interessant en la programació. Si els valors no poden canviar, llavors no es pot fer res dinàmic, com personalitzar un missatge de salutació o canviar la imatge mostrada en una galeria d'imatges.

+ +

Comentaris

+ +

Podeu posar comentaris en el codi JavaScript, de la mateixa manera que en el CSS:

+ +
/*
+Everything in between is a comment.
+*/
+ +

Si el vostre comentari no conté salts de línia, sovint és més fàcil de posar-ho darrere de dues barres d'aquest tipus:

+ +
// This is a comment
+
+ +

Operadors

+ +

Un {{Glossary("operator")}} és un símbol matemàtic que produeix un resultat basat en dos valors (o variables). A la següent taula es pot veure alguns dels operadors més simples, juntament amb alguns exemples per provar-ho a la consola de JavaScript.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OperadorExplicacióSímbol(s)Exemple
suma/concatenacióS'utilitza per sumar dos nombres, o enganxar dues cadenes juntes.+6 + 9;
+ "Hello " + "world!";
resta, multiplicació, divisióAquests fan el que s'espera que ho facin en les matemàtiques bàsiques.-, *, /9 - 3;
+ 8 * 2; // multiplicar en JS és un asterisc
+ 9 / 3;
operador d'assignacióHeu vist això ja: s'assigna un valor a una variable.=var myVariable = 'Bob';
operador d'identitatFa una prova per veure si dos valors són iguals entre si, i retorna un resultat true/false (booleà).===var myVariable = 3;
+ myVariable === 4;
No, No igualRetorna el valor lògic contrari del que precedeix; converteix un true en un false, etc. Quan s'utilitza juntament amb l'operador d'igualtat, el operador de negació comprova si dos valors són no iguals.!, !== +

L'expressió bàsica és true, però la comparació retorna false, perquè l'hem negat:

+ +

var myVariable = 3;
+ !(myVariable === 3);

+ +

Aquí estem provant "és myVariable NO és igual a 3". Això retorna false, perquè myVariable ÉS igual a 3.

+ +

var myVariable = 3;
+ myVariable !== 3;

+
+ +

Hi ha molts més operadors per explorar, però això és suficient per ara. Veure Expressions i operadors per obtenir una llista completa.

+ +
+

Nota: La barreja de tipus de dades pot donar lloc a alguns resultats estranys al realitzar càlculs, així que aneu amb compte quan us referiu a les variables correctament, i obtenir els resultats que espereu. Per exemple, introduïu "35" + "25" a la consola. Per què no s'obté el resultat que esperavau? A causa de que les cometes converteixen els nombres en cadenes, pel que acabat en concatenació de cadenes en lloc d'afegir nombres. Si introduiu, 35 + 25 Obtindreu el resultat correcte.

+
+ +

Condicionals

+ +

Els condicionals són estructures de codi que permeten posar a prova si una expressió retorna veritable o no, s'executa codi alternatiu revelat pel seu resultat. La forma més comuna de condicional és nomenada if ... else. Així, per exemple:

+ +
var iceCream = 'chocolate';
+if (iceCream === 'chocolate') {
+  alert('Yay, I love chocolate ice cream!');
+} else {
+  alert('Awwww, but chocolate is my favorite...');
+}
+ +

L'expressió dins del if ( ... ) és la prova - s'utilitza l'operador d'identitat (com es va descriure anteriorment) per comparar la variable iceCream amb la cadena chocolate per veure si els dos són iguals. Si aquesta comparació retorna true, s'executa el primer bloc de codi. Si la comparació no és certa, el primer bloc s'omet i el segon bloc de codi, després de la  instrucció else, s'executa al seu lloc.

+ +

Funcions

+ +

{{Glossary("Function", "Functions")}} són una forma d'empaquetar la funcionalitat que desitjeu reutilitzar. Quan es necessita el procediment es pot cridar a una funció, amb el nom de la funció, en lloc de tornar a reescriure tot el codi cada vegada. Ja heu vist alguns usos de les funcions anteriorment, per exemple:

+ +
    +
  1. + 
    var myVariable = document.querySelector('h1');
    +
    2. +
  2. + 
    alert('hello!');
    +
    3. +
+ +

Aquestes funcions, document.querySelector i alert, estan integrades en el navegador per poder utilitzar-les sempre que ho desitgeu.

+ +

Si veieu alguna cosa que s'assembla a un nom de variable, però té claudàtors - () - després d'ell, és probable que sigui una funció. Les funcions sovint prenen {{Glossary("Argument", "arguments")}} - bits de dades que necessiten per treballar. Aquests van dins dels claudàtors, separats per comes si n'hi ha més d'un argument.

+ +

Per exemple, la funció alert() realitza una finestra emergent que apareix dins de la finestra del navegador, però cal donar-li una cadena com a argument per dir-li a la funció que ha d'escriure en el quadre emergent.

+ +

La bona notícia és que podeu definir les vostras pròpies funcions - en el següent exemple escrivim una funció simple que pren dos nombres com a arguments i els multiplica:

+ +
function multiply(num1,num2) {
+  var result = num1 * num2;
+  return result;
+}
+ +

Proveu a executar la funció anterior a la consola, i després provar amb diversos arguments. Per exemple:

+ +
multiply(4,7);
+multiply(20,20);
+multiply(0.5,3);
+ +
+

Nota: La instrucció return indica al navegador que retorni la variable result de la funció perquè estigui disponible per al seu ús. Això és necessari perquè les variables definides dins de funcions només estan disponibles dins d'aquestes funcions. Això es diu {{Glossary("Scope", "àmbit")}} de la variable. (Llegiu mès sobre l'àmbit de les variables.)

+
+ +

Esdeveniments

+ +

La interactivitat real en un lloc web necessita esdeveniments. Es tracta d'estructures de codi que escolten les coses que succeeixen al navegador, executant el codi en resposta. L'exemple més obvi és l'esdeveniment de clic, que es dispara pel navegador quan es fa clic en alguna cosa amb el ratolí. Per demostrar això, escriviu el següent a la consola, a continuació feu clic a la pàgina web actual:

+ +
document.querySelector('html').onclick = function() {
+    alert('Ouch! Stop poking me!');
+}
+ +

Hi ha moltes formes d'adjuntar un esdeveniment a un element. Aquí seleccionem l'element HTML, establint la seva propietat onclick igual a una funció anònima (és a dir, sense nom), que conté el codi que volem que l'esdeveniment clic executi.

+ +

Tingues en compte que

+ +
document.querySelector('html').onclick = function() {};
+ +

és equivalent a

+ +
var myHTML = document.querySelector('html');
+myHTML.onclick = function() {};
+ +

És només més curt.

+ +

Alimentant nostra pàgina web d'exemple

+ +

Ara hem repassat alguns conceptes bàsics de Javascript, afegirem algunes característiques interessants per al nostre lloc d'exemple, per veure el que és possible.

+ +

Afegir un canviador d'imatge

+ +

En aquesta secció, afegirem una imatge addicional al nostre lloc, afegint una mica de JavaScript per canviar entre les dues quan es fa clic a la imatge.

+ +
    +
  1. En primer lloc, busqueu una altra imatge que volgueu oferir al vostre lloc. Assegureu-vos que és de la mateixa mida que la primera imatge, o el més a prop possible.
    2. +
  2. Guardeu aquesta imatge a la carpeta images.
    3. +
  3. Canvieu el nom d'aquesta imatge 'firefox2.png' (sense cometes).
    4. +
  4. Aneu a l'arxiu main.js i entrar el següent JavaScript. (Si el vostre "hola món" JavaScript està encara allà, esborrar-ho.) + 
    var myImage = document.querySelector('img');
+
+myImage.onclick = function() {
+    var mySrc = myImage.getAttribute('src');
+    if(mySrc === 'images/firefox-icon.png') {
+      myImage.setAttribute ('src','images/firefox2.png');
+    } else {
+      myImage.setAttribute ('src','images/firefox-icon.png');
+    }
+}
    +
    5. +
  5. Deseu tots els arxius i index.html, carregar-ho en el navegador. Ara en fer clic a la imatge, s'ha de canviar per l'altra!
    6. +
+ +

S'emmagatzema una referència al vostre element d'imatge en la variable myImage. A continuació, converteix la propietat onclick del controlador d'esdeveniments d'aquesta variable igual a una funció sense nom (una funció "anònima"). Ara, cada vegada que es fa clic en aquest element d'imatge:

+ +
    +
  1. Recupera el valor de l'atribut src de la imatge src.
    2. +
  2. Utilitzar un condicional per comprovar si el valor src és igual a la ruta a la imatge original: +
      +
    1. Si és així, canvia el valor de src a la ruta d'accés de la 2ª imatge, obligant a l'altra imatge a ser carregada dins de l'element {{htmlelement("image")}}.
      2. +
    2. Si no ho és (el que significa que ja ha d'haver canviat), el valor src canvia de nou a la ruta original de la imatge, a l'estat original..
      3. +
    +
    3. +
+ +

Afegir un missatge de benvinguda personalitzat

+ +

A continuació afegirem una altre mica de codi, canviant el títol de la pàgina a un missatge de benvinguda personalitzat, quan l'usuari navegui per primera vegada al lloc. Aquest missatge de benvinguda persistirà, l'usuari ha d'abandonar el lloc i tornar més tard. També inclourem una opció per canviar l'usuari i, per tant, el missatge de benvinguda en qualsevol moment que es requereixi.

+ +
    +
  1. En index.html, afegiu la següent línia just abans de l'element {{htmlelement("script")}}: + + 
    <button>Change user</button>
    +
    2. +
  2. En main.js, poseu el següent codi a la part inferior de l'arxiu, exactament com està escrit - això pren referències al nou botó i l'encapçalat, emmagatzemant-los en les variables: + 
    var myButton = document.querySelector('button');
+var myHeading = document.querySelector('h1');
    +
    3. +
  3. Ara afegiu la següent funció per establir la salutació personalitzada - això no farà res, però ho arreglarem en un moment: + 
    function setUserName() {
+  var myName = prompt('Please enter your name.');
+  localStorage.setItem('name', myName);
+  myHeading.textContent = 'Mozilla is cool, ' + myName;
+}
    + Aquesta funció conté una funció prompt(), obre un quadre de diàleg, una mica com alert(). No obstant això, aquest prompt() li demana a l'usuari que introdueixi algunes dades, emmagatzemant-les en una variable després que l'usuari pressioni OK. En aquest cas, estem demanant a l'usuari que introdueixi el seu nom. A continuació, fem una crida a una API anomenada localStorage, que ens permet emmagatzemar les dades en el navegador i posteriorment recuperar-les. Utilitzem la funció setItem() de localStorage per crear i emmagatzemar un element de dades anomenat "name", establint el seu valor en la variable myName que conté les dades que ha introduït l'usuari. Finalment, establim el textContent de l'encapçalat a una cadena, més el nom recentment emmagatzemat de l'usuari. 
    4. +
  4. A continuació, afegiu aquest bloc if ... else - que podríem anomenar el codi d'inicialització, ja que estructura l'aplicació quan es carrega per primera vegada: + 
    if(!localStorage.getItem('name')) {
+  setUserName();
+} else {
+  var storedName = localStorage.getItem('name');
+  myHeading.textContent = 'Mozilla is cool, ' + storedName;
+}
    + Aquest primer bloc utilitza l'operador de negació (NOT lògic, representada pel!) per comprovar si existeix o no les dades de nom. Si no és així, la funció setUserName() s'executa per crear-lo. Si existeix (és a dir, l'usuari ho va establir durant una visita anterior), recuperarem el nom emmagatzemat utilitzant getItem() i establint el textContent de l'encapçalat en una cadena, a més del nom de l'usuari, com ho vam fer dins de setUserName().
    5. +
  5. Finalment, col·loqueu el següent controlador d'esdeveniments onclick en el botó. En fer clic, la funció setUserName() s'executa. Això permet a l'usuari configurar un nou nom, quan ho desitgi, prement el botó: + 
    myButton.onclick = function() {
+  setUserName();
+}
+
    +
    6. +
+ +

Ara, quan visiteu per primera vegada el lloc, se us demanarà el vostre nom d'usuari i us donarà un missatge personalitzat. Podeu canviar el nom en qualsevol moment que desitgeu, oprimint el botó. Com un avantatge addicional, ja que el nom s'emmagatzema dins localStorage, aquest persistirà després que el lloc estigui tancat, mantinguen el missatge personalitzat quan torneu a obrir el lloc!

+ +

Conclusió

+ +

Si heu seguit totes les instruccions d'aquest article, heu d'acabar veient una pàgina amb aquest aspecte (també podreu veure la nostra versió aquí):

+ +

+ +

Si us quedeu encallats, sempre podreu comparar el vostre treball amb el nostre codi d'exemple acabat en Github.

+ +

Tot just hem tractat una part superficial de JavaScript. Si heu gaudit del joc i desitgeu avançar encara més, dirigir-vos al nostre tema d'aprenentatge de JavaScript.

+ +

{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}

diff --git "a/files/ca/learn/getting_started_with_the_web/javascript_b\303\240sic/index.html" "b/files/ca/learn/getting_started_with_the_web/javascript_b\303\240sic/index.html" deleted file mode 100644 index e9b90830ca..0000000000 --- "a/files/ca/learn/getting_started_with_the_web/javascript_b\303\240sic/index.html" +++ /dev/null @@ -1,394 +0,0 @@ ---- -title: JavaScript bàsic -slug: Learn/Getting_started_with_the_web/JavaScript_bàsic -tags: - - Beginner - - CodingScripting - - JavaScript - - Learn - - Web - - 'l10n:priority' -translation_of: Learn/Getting_started_with_the_web/JavaScript_basics ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}
- -
-

JavaScript és un llenguatge de programació que afegeix interactivitat al vostre lloc web (per exemple: jocs, respostes quan es premen els botons o les dades introduïdes en formularis, estil dinàmic, animació). Aquest article us ajudarà a començar amb aquest llenguatge emocionant i us donarà una idea del que és possible.

-
- -

Què és JavaScript, realment?

- -

{{Glossary("JavaScript")}} ("JS" abreujat) és un veritable {{Glossary("Dynamic programming language", "llenguatge dinàmic de programació")}} en tota regla, que quan s'aplica a un document {{Glossary("HTML")}}, pot proporcionar interactivitat dinàmica en els llocs web. Va ser inventat per Brendan Eich, cofundador del projecte Mozilla, la Fundació Mozilla i Mozilla Corporation.

- -

Javascript és increïblement versàtil. Podeu començar a poc a poc, amb carrusels, galeries d'imatges, dissenys fluctuants i les respostes a les pulsacions de botó. Amb més experiència sereu capaços de crear jocs,  gràfics animats en 2D i 3D, aplicacions completes de bases de dades i molt més!

- -

JavaScript per si mateix és bastant compacte però molt flexible. Els desenvolupadors han escrit una gran varietat d'eines que complementen el nucli del llenguatge JavaScript, el desbloqueig d'una gran quantitat de funcionalitats extra amb el mínim esforç. Aquestes inclouen:

- - - -

Un exemple "hola món"

- -

La secció anterior pot sonar molt emocionant, i així ha de ser - i Javascript és una de les tecnologies web més vives i quan comenceu a ser bons en el seu ús, els vostres llocs web entraran en una nova dimensió de poder i creativitat.

- -

No obstant això, Javascript és una mica més complex per sentir-se còmodes que amb HTML i CSS. Podria ser necessari començar a poc a poc i seguir treballant en petits passos consistents. Per començar, us mostrarem com afegir una mica de Javascript bàsic a la vostre pàgina, creant un "Hello world!" d'exemple (l'estandard en els exemples bàsics de programació).

- -
-

Important: Si no ho heu estat seguint juntament amb la resta del nostre curs,  descarregueu el codi exemple i utilitzar-ho com a punt de partida.

-
- -
    -
  1. En primer lloc, aneu al vostre lloc de prova i creeu una nova carpeta amb el nom 'scripts' (sense les cometes). Després, en la nova carpeta scripts que acabeu de crear, creeu un nou arxiu anomenat main.js. Guardeu-ho en la carpeta scripts.
    2. -
  2. A continuació, en l'arxiu index.html introduir l'element següent en una nova línia just abans de l'etiqueta de tancament </body>: - 
    <script src="scripts/main.js"></script>
    -
    3. -
  3. La seva funció fa bàsicament la mateixa feina que l'element {{htmlelement("link")}} per CSS - s'aplica el codi JavaScript a la pàgina, de manera que pot tenir un efecte sobre el codi HTML (juntament amb el CSS, i qualsevol altra cosa en la pàgina).
    4. -
  4. -

    Ara afegiu el codi següent a l'arxiu main.js:

    - - 
    var myHeading = document.querySelector('h1');
-myHeading.textContent = 'Hello world!';
    -
    5. -
  5. Finalment, assegureu-vos que els fitxers HTML i JavaScript es guarden i index.html es carrega en el navegador. Haurieu de veure alguna cosa com el següent:
    6. -
- -
-

Nota: La raó per la qual hem posat l'element {{htmlelement("script")}} prop de la part inferior de l'arxiu HTML és que l'HTML és carregat pel navegador en l'ordre en què apareix en l'arxiu. Si el Javascript es carrega primer i se suposa que afecta a l'HTML sota ell, pot ser que no funcioni, ja que el Javascript es carregaria abans de l'HTML que se suposa que funciona. Per tant, col·locar Javascript prop de la part inferior de la pàgina HTML és sovint la millor estratègia.

-
- -

Què va passar?

- -

Al text de la capçalera ara s'ha canviat a "Hola, món!" amb l'ús de JavaScript. Això s'ha fet utilitzant primer una funció denominada {{domxref("Document.querySelector", "querySelector()")}} per obtenir una referència al vostre encapçalament, i emmagatzemar-ho en una variable denominada myHeading. Això és molt similar al que vam fer amb l'ús de selectors CSS. Quan es vol fer alguna cosa en un element, primer heu de seleccionar-lo.

- -

Després d'això, s'estableix el valor de la variable myHeading amb la propietat {{domxref("Node.textContent", "textContent")}} (que representa el contingut del encapçalament) a "Hola, món!".

- -

Curs intensiu bàsic del llenguatge

- -

Anem a explicar algunes de les característiques bàsiques del llenguatge JavaScript, per donar-vos una major comprensió de com funciona tot. Millor encara, aquestes característiques són comunes a tots els llenguatges de programació. Si domineu aquests fonaments, esteu en el camí de ser capaços de programar gairebé qualsevol cosa!

- -
-

Important:En aquest article, intenteu introduir les línies de codi d'exemple en la vostra consola de Javascript per veure què succeeix. Per a més detalls sobre les consoles de JavaScript, consulteu Descobrir eines per a desenvolupadotrs del navegador.

-
- -

Variables

- -

{{Glossary("Variable", "Variables")}} són contenidors en els quals es poden emmagatzemar valors. Es comença per declarar una variable amb la paraula clau var, seguit pel nom que voleu nomenar:

- -
var myVariable;
- -
-

Nota: Totes les sentències en JavaScript han d'acabar amb un punt i coma, per indicar que aquí és on acaba la sentència. Si no incloeu aquests, es poden obtenir resultats inesperats.

-
- -
-

Nota: Podeu nomenar una variable gairebé qualsevol cosa, però hi ha algunes restriccions de nom (vegeu aquest article sobre les regles de denominació de les variables). Si no esteu segur, podeu comprovar el nom de la variable per veure si és vàlida.

-
- -
-

Nota: JavaScript és sensible a majúscules - myVariable és una variable diferent a myvariable. Si si esteu tenint problemes en el vostre codi, comprobeu el cos!

-
- -

Després de declarar una variable, podeu donar-li un valor:

- -
myVariable = 'Bob';
- -

Podeu fer les dues operacions en la mateixa línia si ho desitjeu:

- -
var myVariable = 'Bob';
- -

Podeu recuperar el valor amb només cridar la variable pel seu nom:

- -
myVariable;
- -

Després de donar a una variable un valor, posteriorment podeu optar per canviar-ho:

- -
var myVariable = 'Bob';
-myVariable = 'Steve';
- -

Recordeu que les variables tenen diferents tipus de dades:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
VariableExplicacióExemple
{{Glossary("String")}}Una seqüència de text coneguda com una cadena. Per indicar que la variable és una cadena, heu de tancar-la entre cometes.var myVariable = 'Bob';
{{Glossary("Number")}}Un nombre. Els nombres no tenen cometes al voltant d'ells.var myVariable = 10;
{{Glossary("Boolean")}}Un valor True/False. Les paraules true i false són paraules clau especials en JS, i no necessiten cometes.var myVariable = true;
{{Glossary("Array")}}Una estructura que permet emmagatzemar diversos valors en una sola referència.var myVariable = [1,'Bob','Steve',10];
- Referir-se a cada membre de la matriu d'aquesta manera:
- myVariable[0], myVariable[1], etc.
{{Glossary("Object")}}Bàsicament, qualsevol cosa. Tot en JavaScript és un objecte, i pot ser emmagatzemat en una variable. Tingueu això en compte a mesura que apreneu.var myVariable = document.querySelector('h1');
- Tots els exemples anteriors també
- -

Llavors, per què necessitem les variables? Bé, es necessiten les variables per fer alguna cosa interessant en la programació. Si els valors no poden canviar, llavors no es pot fer res dinàmic, com personalitzar un missatge de salutació o canviar la imatge mostrada en una galeria d'imatges.

- -

Comentaris

- -

Podeu posar comentaris en el codi JavaScript, de la mateixa manera que en el CSS:

- -
/*
-Everything in between is a comment.
-*/
- -

Si el vostre comentari no conté salts de línia, sovint és més fàcil de posar-ho darrere de dues barres d'aquest tipus:

- -
// This is a comment
-
- -

Operadors

- -

Un {{Glossary("operator")}} és un símbol matemàtic que produeix un resultat basat en dos valors (o variables). A la següent taula es pot veure alguns dels operadors més simples, juntament amb alguns exemples per provar-ho a la consola de JavaScript.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OperadorExplicacióSímbol(s)Exemple
suma/concatenacióS'utilitza per sumar dos nombres, o enganxar dues cadenes juntes.+6 + 9;
- "Hello " + "world!";
resta, multiplicació, divisióAquests fan el que s'espera que ho facin en les matemàtiques bàsiques.-, *, /9 - 3;
- 8 * 2; // multiplicar en JS és un asterisc
- 9 / 3;
operador d'assignacióHeu vist això ja: s'assigna un valor a una variable.=var myVariable = 'Bob';
operador d'identitatFa una prova per veure si dos valors són iguals entre si, i retorna un resultat true/false (booleà).===var myVariable = 3;
- myVariable === 4;
No, No igualRetorna el valor lògic contrari del que precedeix; converteix un true en un false, etc. Quan s'utilitza juntament amb l'operador d'igualtat, el operador de negació comprova si dos valors són no iguals.!, !== -

L'expressió bàsica és true, però la comparació retorna false, perquè l'hem negat:

- -

var myVariable = 3;
- !(myVariable === 3);

- -

Aquí estem provant "és myVariable NO és igual a 3". Això retorna false, perquè myVariable ÉS igual a 3.

- -

var myVariable = 3;
- myVariable !== 3;

-
- -

Hi ha molts més operadors per explorar, però això és suficient per ara. Veure Expressions i operadors per obtenir una llista completa.

- -
-

Nota: La barreja de tipus de dades pot donar lloc a alguns resultats estranys al realitzar càlculs, així que aneu amb compte quan us referiu a les variables correctament, i obtenir els resultats que espereu. Per exemple, introduïu "35" + "25" a la consola. Per què no s'obté el resultat que esperavau? A causa de que les cometes converteixen els nombres en cadenes, pel que acabat en concatenació de cadenes en lloc d'afegir nombres. Si introduiu, 35 + 25 Obtindreu el resultat correcte.

-
- -

Condicionals

- -

Els condicionals són estructures de codi que permeten posar a prova si una expressió retorna veritable o no, s'executa codi alternatiu revelat pel seu resultat. La forma més comuna de condicional és nomenada if ... else. Així, per exemple:

- -
var iceCream = 'chocolate';
-if (iceCream === 'chocolate') {
-  alert('Yay, I love chocolate ice cream!');
-} else {
-  alert('Awwww, but chocolate is my favorite...');
-}
- -

L'expressió dins del if ( ... ) és la prova - s'utilitza l'operador d'identitat (com es va descriure anteriorment) per comparar la variable iceCream amb la cadena chocolate per veure si els dos són iguals. Si aquesta comparació retorna true, s'executa el primer bloc de codi. Si la comparació no és certa, el primer bloc s'omet i el segon bloc de codi, després de la  instrucció else, s'executa al seu lloc.

- -

Funcions

- -

{{Glossary("Function", "Functions")}} són una forma d'empaquetar la funcionalitat que desitjeu reutilitzar. Quan es necessita el procediment es pot cridar a una funció, amb el nom de la funció, en lloc de tornar a reescriure tot el codi cada vegada. Ja heu vist alguns usos de les funcions anteriorment, per exemple:

- -
    -
  1. - 
    var myVariable = document.querySelector('h1');
    -
    2. -
  2. - 
    alert('hello!');
    -
    3. -
- -

Aquestes funcions, document.querySelector i alert, estan integrades en el navegador per poder utilitzar-les sempre que ho desitgeu.

- -

Si veieu alguna cosa que s'assembla a un nom de variable, però té claudàtors - () - després d'ell, és probable que sigui una funció. Les funcions sovint prenen {{Glossary("Argument", "arguments")}} - bits de dades que necessiten per treballar. Aquests van dins dels claudàtors, separats per comes si n'hi ha més d'un argument.

- -

Per exemple, la funció alert() realitza una finestra emergent que apareix dins de la finestra del navegador, però cal donar-li una cadena com a argument per dir-li a la funció que ha d'escriure en el quadre emergent.

- -

La bona notícia és que podeu definir les vostras pròpies funcions - en el següent exemple escrivim una funció simple que pren dos nombres com a arguments i els multiplica:

- -
function multiply(num1,num2) {
-  var result = num1 * num2;
-  return result;
-}
- -

Proveu a executar la funció anterior a la consola, i després provar amb diversos arguments. Per exemple:

- -
multiply(4,7);
-multiply(20,20);
-multiply(0.5,3);
- -
-

Nota: La instrucció return indica al navegador que retorni la variable result de la funció perquè estigui disponible per al seu ús. Això és necessari perquè les variables definides dins de funcions només estan disponibles dins d'aquestes funcions. Això es diu {{Glossary("Scope", "àmbit")}} de la variable. (Llegiu mès sobre l'àmbit de les variables.)

-
- -

Esdeveniments

- -

La interactivitat real en un lloc web necessita esdeveniments. Es tracta d'estructures de codi que escolten les coses que succeeixen al navegador, executant el codi en resposta. L'exemple més obvi és l'esdeveniment de clic, que es dispara pel navegador quan es fa clic en alguna cosa amb el ratolí. Per demostrar això, escriviu el següent a la consola, a continuació feu clic a la pàgina web actual:

- -
document.querySelector('html').onclick = function() {
-    alert('Ouch! Stop poking me!');
-}
- -

Hi ha moltes formes d'adjuntar un esdeveniment a un element. Aquí seleccionem l'element HTML, establint la seva propietat onclick igual a una funció anònima (és a dir, sense nom), que conté el codi que volem que l'esdeveniment clic executi.

- -

Tingues en compte que

- -
document.querySelector('html').onclick = function() {};
- -

és equivalent a

- -
var myHTML = document.querySelector('html');
-myHTML.onclick = function() {};
- -

És només més curt.

- -

Alimentant nostra pàgina web d'exemple

- -

Ara hem repassat alguns conceptes bàsics de Javascript, afegirem algunes característiques interessants per al nostre lloc d'exemple, per veure el que és possible.

- -

Afegir un canviador d'imatge

- -

En aquesta secció, afegirem una imatge addicional al nostre lloc, afegint una mica de JavaScript per canviar entre les dues quan es fa clic a la imatge.

- -
    -
  1. En primer lloc, busqueu una altra imatge que volgueu oferir al vostre lloc. Assegureu-vos que és de la mateixa mida que la primera imatge, o el més a prop possible.
    2. -
  2. Guardeu aquesta imatge a la carpeta images.
    3. -
  3. Canvieu el nom d'aquesta imatge 'firefox2.png' (sense cometes).
    4. -
  4. Aneu a l'arxiu main.js i entrar el següent JavaScript. (Si el vostre "hola món" JavaScript està encara allà, esborrar-ho.) - 
    var myImage = document.querySelector('img');
-
-myImage.onclick = function() {
-    var mySrc = myImage.getAttribute('src');
-    if(mySrc === 'images/firefox-icon.png') {
-      myImage.setAttribute ('src','images/firefox2.png');
-    } else {
-      myImage.setAttribute ('src','images/firefox-icon.png');
-    }
-}
    -
    5. -
  5. Deseu tots els arxius i index.html, carregar-ho en el navegador. Ara en fer clic a la imatge, s'ha de canviar per l'altra!
    6. -
- -

S'emmagatzema una referència al vostre element d'imatge en la variable myImage. A continuació, converteix la propietat onclick del controlador d'esdeveniments d'aquesta variable igual a una funció sense nom (una funció "anònima"). Ara, cada vegada que es fa clic en aquest element d'imatge:

- -
    -
  1. Recupera el valor de l'atribut src de la imatge src.
    2. -
  2. Utilitzar un condicional per comprovar si el valor src és igual a la ruta a la imatge original: -
      -
    1. Si és així, canvia el valor de src a la ruta d'accés de la 2ª imatge, obligant a l'altra imatge a ser carregada dins de l'element {{htmlelement("image")}}.
      2. -
    2. Si no ho és (el que significa que ja ha d'haver canviat), el valor src canvia de nou a la ruta original de la imatge, a l'estat original..
      3. -
    -
    3. -
- -

Afegir un missatge de benvinguda personalitzat

- -

A continuació afegirem una altre mica de codi, canviant el títol de la pàgina a un missatge de benvinguda personalitzat, quan l'usuari navegui per primera vegada al lloc. Aquest missatge de benvinguda persistirà, l'usuari ha d'abandonar el lloc i tornar més tard. També inclourem una opció per canviar l'usuari i, per tant, el missatge de benvinguda en qualsevol moment que es requereixi.

- -
    -
  1. En index.html, afegiu la següent línia just abans de l'element {{htmlelement("script")}}: - - 
    <button>Change user</button>
    -
    2. -
  2. En main.js, poseu el següent codi a la part inferior de l'arxiu, exactament com està escrit - això pren referències al nou botó i l'encapçalat, emmagatzemant-los en les variables: - 
    var myButton = document.querySelector('button');
-var myHeading = document.querySelector('h1');
    -
    3. -
  3. Ara afegiu la següent funció per establir la salutació personalitzada - això no farà res, però ho arreglarem en un moment: - 
    function setUserName() {
-  var myName = prompt('Please enter your name.');
-  localStorage.setItem('name', myName);
-  myHeading.textContent = 'Mozilla is cool, ' + myName;
-}
    - Aquesta funció conté una funció prompt(), obre un quadre de diàleg, una mica com alert(). No obstant això, aquest prompt() li demana a l'usuari que introdueixi algunes dades, emmagatzemant-les en una variable després que l'usuari pressioni OK. En aquest cas, estem demanant a l'usuari que introdueixi el seu nom. A continuació, fem una crida a una API anomenada localStorage, que ens permet emmagatzemar les dades en el navegador i posteriorment recuperar-les. Utilitzem la funció setItem() de localStorage per crear i emmagatzemar un element de dades anomenat "name", establint el seu valor en la variable myName que conté les dades que ha introduït l'usuari. Finalment, establim el textContent de l'encapçalat a una cadena, més el nom recentment emmagatzemat de l'usuari. 
    4. -
  4. A continuació, afegiu aquest bloc if ... else - que podríem anomenar el codi d'inicialització, ja que estructura l'aplicació quan es carrega per primera vegada: - 
    if(!localStorage.getItem('name')) {
-  setUserName();
-} else {
-  var storedName = localStorage.getItem('name');
-  myHeading.textContent = 'Mozilla is cool, ' + storedName;
-}
    - Aquest primer bloc utilitza l'operador de negació (NOT lògic, representada pel!) per comprovar si existeix o no les dades de nom. Si no és així, la funció setUserName() s'executa per crear-lo. Si existeix (és a dir, l'usuari ho va establir durant una visita anterior), recuperarem el nom emmagatzemat utilitzant getItem() i establint el textContent de l'encapçalat en una cadena, a més del nom de l'usuari, com ho vam fer dins de setUserName().
    5. -
  5. Finalment, col·loqueu el següent controlador d'esdeveniments onclick en el botó. En fer clic, la funció setUserName() s'executa. Això permet a l'usuari configurar un nou nom, quan ho desitgi, prement el botó: - 
    myButton.onclick = function() {
-  setUserName();
-}
-
    -
    6. -
- -

Ara, quan visiteu per primera vegada el lloc, se us demanarà el vostre nom d'usuari i us donarà un missatge personalitzat. Podeu canviar el nom en qualsevol moment que desitgeu, oprimint el botó. Com un avantatge addicional, ja que el nom s'emmagatzema dins localStorage, aquest persistirà després que el lloc estigui tancat, mantinguen el missatge personalitzat quan torneu a obrir el lloc!

- -

Conclusió

- -

Si heu seguit totes les instruccions d'aquest article, heu d'acabar veient una pàgina amb aquest aspecte (també podreu veure la nostra versió aquí):

- -

- -

Si us quedeu encallats, sempre podreu comparar el vostre treball amb el nostre codi d'exemple acabat en Github.

- -

Tot just hem tractat una part superficial de JavaScript. Si heu gaudit del joc i desitgeu avançar encara més, dirigir-vos al nostre tema d'aprenentatge de JavaScript.

- -

{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}

diff --git a/files/ca/learn/getting_started_with_the_web/publicar_nostre_lloc_web/index.html b/files/ca/learn/getting_started_with_the_web/publicar_nostre_lloc_web/index.html deleted file mode 100644 index 0329bbfcd0..0000000000 --- a/files/ca/learn/getting_started_with_the_web/publicar_nostre_lloc_web/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: Publicar el nostre lloc web -slug: Learn/Getting_started_with_the_web/Publicar_nostre_lloc_web -tags: - - Beginner - - CodingScripting - - FTP - - GitHub - - Google App Engine - - Learn - - Web - - 'l10n:priority' - - publishing - - web server -translation_of: Learn/Getting_started_with_the_web/Publishing_your_website ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}
- -
-

Un cop hagueu acabat d'escriure el codi i l'organització dels arxius que componen el vostre lloc web, cal posar-ho tot en línia perquè la gent ho pugui trobar. En aquest article s'exposa com arribar a obtenir un codi d'exemple senzill, en línia, amb poc esforç.

-
- -

Quines són les opcions?

- -

La publicació d'un lloc web no és un tema senzill, sobretot perquè hi ha tantes maneres diferents de fer-ho. En aquest article no pretenem documentar tots els mètodes possibles. Més aviat, anem a discutir els pros i els contres de tres estratègies generals des del punt de vista d'un principiant, i després caminar a través d'un mètode que funcioni per ara.

- -

Aconseguir allotjament i un nom de domini

- -

Si desitjeu tenir un control total sobre el vostre lloc web publicat, llavors és probable que hagiu de gastar diners per comprar:

- - - -

Molts llocs web professionals van en línia d'aquesta manera.

- -

A més, es necessita un programa {{Glossary("FTP", "File Transfer Protocol (FTP)")}} (veure Quant costa: el programari per a més detalls) per a transferir efectivament els arxius del lloc web al servidor. Programes FTP varian àmpliament, però en general heu d'iniciar sessió al servidor web utilitzant les dades proporcionades per la vostra empresa d'allotjament (per exemple, nom d'usuari, contrasenya, nom de sistema principal). A continuació, el programa mostra els arxius locals i arxius del servidor web en dues finestres, perquè pugueu transferir-los d'anada i tornada:

- -

- -

Consells de cerca d'allotjament i dominis

- - - -

L'ús d'una eina en línia com GitHub, Google App Engine o Dropbox

- -

Algunes eines us poden permetre publicar el vostre lloc web en línia:

- - - -

A diferència de la majoria d'allotjaments, tals eines solen ser d'ús gratuït, però només s'obté un conjunt limitat de funcions.

- -

L'ús d'un IDE basat en web com Thimble

- -

Hi ha una sèrie d'aplicacions web que emulen un entorn de desenvolupament de llocs web, que us permet introduir codi HTML, CSS i JavaScript i després mostrar el resultat d'aquest codi quan es representa com un lloc web - tot en una pestanya del navegador. En termes generals aquestes eines són molt fàcils, ideal per a l'aprenentatge, i lliure (per a funcions bàsiques), i l'allotjament de la vostre pàgina representada en una única adreça web. No obstant això, les característiques bàsiques són bastant limitades, i les aplicacions no solen proporcionar l'espai d'allotjament per actius (com imatges).

- -

Intenteu jugar amb alguns d'aquests exemples, i veure quin és el millor que us agrada:

- - - -

- -

Publicar via GitHub

- -

Ara us portaren a través de com publicar fàcilment el vostre lloc mitjançant GitHub Pages.

- -
    -
  1. En primer lloc, registrar-vos a GitHub i verifiqueu la vostre adreça de correu electrònic.
    2. -
  2. A continuació, cal crear un repositori per als arxius a entrar.
    3. -
  3. En aquesta pàgina, en el quadre Nom del repositori, introduïu username.github.io, on username és el vostre nom d'usuari. Així, per exemple, el nostre amic bobsmith entraria com bobsmith.github.io.
    - Comproveu també Inicialitzar aquest repositori amb un README i després feu clic a Crear repositori.
    4. -
  4. Després d'això, arrossegar i deixar anar el contingut de la vostra carpeta del lloc web en el vostre repositori, i després feu clic a Registrar els canvis.
    - -
    -

    Nota: Assegureu-vos que la carpeta té un arxiu index.html.

    -
    -
    5. -
  5. -

    Ara navegueu pel vostre navegador a username.github.io per veure el vostre lloc web en línia. Per exemple, per al nom d'usuari chrisdavidmills, aneu a chrisdavidmills.github.io.

    - -
    -

    Nota: Pot trigar alguns minuts perquè el vostre lloc web pugui està actiu. Si no funciona immediatament, és possible que hagiu d'esperar uns minuts i torneu a intentar-ho.

    -
    -
    6. -
- -

Per a més informació, consulteu les Pàgines d'ajuda de GitHub.

- -

Altres lectures

- - - -

{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}

diff --git a/files/ca/learn/getting_started_with_the_web/publishing_your_website/index.html b/files/ca/learn/getting_started_with_the_web/publishing_your_website/index.html new file mode 100644 index 0000000000..0329bbfcd0 --- /dev/null +++ b/files/ca/learn/getting_started_with_the_web/publishing_your_website/index.html @@ -0,0 +1,115 @@ +--- +title: Publicar el nostre lloc web +slug: Learn/Getting_started_with_the_web/Publicar_nostre_lloc_web +tags: + - Beginner + - CodingScripting + - FTP + - GitHub + - Google App Engine + - Learn + - Web + - 'l10n:priority' + - publishing + - web server +translation_of: Learn/Getting_started_with_the_web/Publishing_your_website +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}
+ +
+

Un cop hagueu acabat d'escriure el codi i l'organització dels arxius que componen el vostre lloc web, cal posar-ho tot en línia perquè la gent ho pugui trobar. En aquest article s'exposa com arribar a obtenir un codi d'exemple senzill, en línia, amb poc esforç.

+
+ +

Quines són les opcions?

+ +

La publicació d'un lloc web no és un tema senzill, sobretot perquè hi ha tantes maneres diferents de fer-ho. En aquest article no pretenem documentar tots els mètodes possibles. Més aviat, anem a discutir els pros i els contres de tres estratègies generals des del punt de vista d'un principiant, i després caminar a través d'un mètode que funcioni per ara.

+ +

Aconseguir allotjament i un nom de domini

+ +

Si desitjeu tenir un control total sobre el vostre lloc web publicat, llavors és probable que hagiu de gastar diners per comprar:

+ + + +

Molts llocs web professionals van en línia d'aquesta manera.

+ +

A més, es necessita un programa {{Glossary("FTP", "File Transfer Protocol (FTP)")}} (veure Quant costa: el programari per a més detalls) per a transferir efectivament els arxius del lloc web al servidor. Programes FTP varian àmpliament, però en general heu d'iniciar sessió al servidor web utilitzant les dades proporcionades per la vostra empresa d'allotjament (per exemple, nom d'usuari, contrasenya, nom de sistema principal). A continuació, el programa mostra els arxius locals i arxius del servidor web en dues finestres, perquè pugueu transferir-los d'anada i tornada:

+ +

+ +

Consells de cerca d'allotjament i dominis

+ + + +

L'ús d'una eina en línia com GitHub, Google App Engine o Dropbox

+ +

Algunes eines us poden permetre publicar el vostre lloc web en línia:

+ + + +

A diferència de la majoria d'allotjaments, tals eines solen ser d'ús gratuït, però només s'obté un conjunt limitat de funcions.

+ +

L'ús d'un IDE basat en web com Thimble

+ +

Hi ha una sèrie d'aplicacions web que emulen un entorn de desenvolupament de llocs web, que us permet introduir codi HTML, CSS i JavaScript i després mostrar el resultat d'aquest codi quan es representa com un lloc web - tot en una pestanya del navegador. En termes generals aquestes eines són molt fàcils, ideal per a l'aprenentatge, i lliure (per a funcions bàsiques), i l'allotjament de la vostre pàgina representada en una única adreça web. No obstant això, les característiques bàsiques són bastant limitades, i les aplicacions no solen proporcionar l'espai d'allotjament per actius (com imatges).

+ +

Intenteu jugar amb alguns d'aquests exemples, i veure quin és el millor que us agrada:

+ + + +

+ +

Publicar via GitHub

+ +

Ara us portaren a través de com publicar fàcilment el vostre lloc mitjançant GitHub Pages.

+ +
    +
  1. En primer lloc, registrar-vos a GitHub i verifiqueu la vostre adreça de correu electrònic.
    2. +
  2. A continuació, cal crear un repositori per als arxius a entrar.
    3. +
  3. En aquesta pàgina, en el quadre Nom del repositori, introduïu username.github.io, on username és el vostre nom d'usuari. Així, per exemple, el nostre amic bobsmith entraria com bobsmith.github.io.
    + Comproveu també Inicialitzar aquest repositori amb un README i després feu clic a Crear repositori.
    4. +
  4. Després d'això, arrossegar i deixar anar el contingut de la vostra carpeta del lloc web en el vostre repositori, i després feu clic a Registrar els canvis.
    + +
    +

    Nota: Assegureu-vos que la carpeta té un arxiu index.html.

    +
    +
    5. +
  5. +

    Ara navegueu pel vostre navegador a username.github.io per veure el vostre lloc web en línia. Per exemple, per al nom d'usuari chrisdavidmills, aneu a chrisdavidmills.github.io.

    + +
    +

    Nota: Pot trigar alguns minuts perquè el vostre lloc web pugui està actiu. Si no funciona immediatament, és possible que hagiu d'esperar uns minuts i torneu a intentar-ho.

    +
    +
    6. +
+ +

Per a més informació, consulteu les Pàgines d'ajuda de GitHub.

+ +

Altres lectures

+ + + +

{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}

diff --git "a/files/ca/learn/getting_started_with_the_web/quin_aspecte_tindr\303\240_vostre_lloc_web/index.html" "b/files/ca/learn/getting_started_with_the_web/quin_aspecte_tindr\303\240_vostre_lloc_web/index.html" deleted file mode 100644 index a7e5ef4b2c..0000000000 --- "a/files/ca/learn/getting_started_with_the_web/quin_aspecte_tindr\303\240_vostre_lloc_web/index.html" +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: Quin aspecte tindrà el vostre lloc web? -slug: Learn/Getting_started_with_the_web/Quin_aspecte_tindrà_vostre_lloc_web -tags: - - Assets - - Beginner - - Composing - - Content - - Design - - Fonts - - Learn - - Plan - - 'l10n:priority' -translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_like ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}
- -
-

Quin serà l'aspecte del vostre lloc web? Analitzeu la planificació i disseny de treball que heu de fer per al vostre lloc web abans d'escriure el codi, incloent, "Quina informació ofereix el meu lloc web?" "Quins tipus de lletra i colors és el que vull?" "Què fa el meu lloc?"

-
- -

El primer és el primer: planificació

- -

Abans de fer res, necessiteu algunes idees. Què hauria de fer el vostre lloc web en realitat? Un lloc web pot fer bàsicament qualsevol cosa, però per al vostre primer intent heu de mantenir les coses simples. Anem a començar per la creació d'una pàgina web senzilla amb una capçalera, una imatge, i uns pocs paràgrafs.

- -

Per començar, haureu de respondre a aquestes preguntes:

- -
    -
  1. Quin és la teva pàgina web? Us agraden els gossos, Nova York, o Pacman?
    2. -
  2. Quina informació esteu presentant sobre el tema? Escriviu un títol i alguns paràgrafs, i penseu en una imatge que volgueu mostrar en la vostra pàgina.
    3. -
  3. Com es veu el vostre lloc web, en termes simples d'alt nivell. Quin és el color de fons? Quin tipus de font és apropiada: formals, dibuixos animats, audaç i fort, subtil?
    4. -
- -
-

Nota: Els projectes complexos necessiten directrius detallades que incloent tots els detalls de colors, tipus de lletra, espaiat entre els elements d'una pàgina, l'estil d'escriptura apropiada, i així successivament. Això de vegades es diu una guia de disseny o un llibre de marca, i es pot veure un exemple en les Firefox OS Guidelines.

-
- -

Esbossar el disseny

- -

A continuació, obtenir un llapis i paper i esbossar més o menys com voleu el aspecte del vostre lloc. En la vostra primera pàgina web senzilla, no hi ha molt per esbossar, però heu d'aconseguir l'hàbit de fer això ara. Realment ajuda - no heu de ser un Van Gogh!

- -

- -
-

Nota: Fins i tot en els llocs web reals, complexos, els equips de disseny en general comencen amb esbossos en paper, i posteriorment construeixen maquetes digitals utilitzant un editor de gràfics o tecnologies web.

- -

Els equips web sovint inclouen tant un dissenyador gràfic i un {{Glossary("UX", "user-experience")}} dissenyador (UX). Els dissenyadors gràfics, òbviament, posar junts els elements visuals de la pàgina web. Els dissenyadors UX tenen un paper una mica més abstracte a l'hora d'abordar com els usuaris han d'experimentar i interactuar amb el lloc web.

-
- -

Escollir els vostres recursos

- -

En aquest punt, és bo per començar a armar el contingut que apareixerà finalment a la vostra pàgina web.

- -

Text

- -

No obstant això hauríeu de tenir els paràgrafs i títols abans. Tingueu això molt a prop.

- -

Color del tema

- -

Per triar un color, aneu al selector de color i trobeu un color que us agradi. En fer clic a un color, apareixerà un codi de sis caràcters estranys com #660066. Això es diu un codi hex(adecimal), i representa el vostre color. Copieu el codi en un lloc segur per ara.

- -

- -

Imatges

- -

Per triar una imatge, anar a Google Images i buscar alguna adequada.

- -
    -
  1. Quan trobeu la imatge que desitjeu, feu clic a la imatge.
    2. -
  2. Premeu el botó Veure imatge.
    3. -
  3. A la següent pàgina, feu clic amb el botó dret del ratolí en la imatge (Ctrl + clic en Mac), seleccioneu Guardar imatge com... i trieu un lloc segur per guardar la imatge. Com a alternativa, copieu l'adreça Web de la imatge des de la barra d'adreces del vostre navegador per usar-la més tard.
    4. -
- -

- -

- -
-

Nota: La majoria de les imatges a la web, incloent a Google Images, tenen drets d'autor. Per reduir la probabilitat de que violeu els drets d'autor, podeu utilitzar el filtre de llicència de Google. Només 1) feu clic a Eines de recerca, a continuació, a 2) Drets d'ús:

- -

-
- -

Tipus de lletra

- -

Per triar un tipus de lletra:

- -
    -
  1. Anar a Google Fonts i examinar la llista fins que trobeu una que us agradi. També podeu utilitzar els controls de la dreta per filtrar encara més els resultats.
    2. -
  2. Feu clic al icona "plus" (Afegir a) al costat del tipus de lletra que vulgueu.
    3. -
  3. Feu clic al botó "*, Familia Seleccionada" en el panell a la part inferior de la pàgina ("*" depèn del nombre de fonts que hagiu seleccionat)
    4. -
  4. En el quadre emergent, es pot veure i copiar les línies de codi que Google us dóna en el vostre editor de text per a guardar per més endavant.
    5. -
- -

- -

 

- -

- -

{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}

diff --git a/files/ca/learn/getting_started_with_the_web/tractar_amb_arxius/index.html b/files/ca/learn/getting_started_with_the_web/tractar_amb_arxius/index.html deleted file mode 100644 index 0ba94d3273..0000000000 --- a/files/ca/learn/getting_started_with_the_web/tractar_amb_arxius/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: Tractar amb arxius -slug: Learn/Getting_started_with_the_web/Tractar_amb_arxius -tags: - - Beginner - - CodingScripting - - Files - - Guide - - HTML - - 'l10n:priority' - - theory - - website -translation_of: Learn/Getting_started_with_the_web/Dealing_with_files ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}
- -
-

Un lloc web es compon de molts arxius: contingut de text, codi, fulles d'estil, contingut multimèdia, i així successivament. Quan estigueu construint un lloc web, necessitareu muntar aquests arxius en una estructura assenyada al vostre ordinador, assegurar-vos que poden parlar l'un a l'altre, i obtenir tot el seu contingut buscat, abans de que finalment els pujeu a un servidor. Tractar amb arxius descriu alguns problemes que heu de tenir en compte perquè pugueu establir una estructura d'arxius assenyada per al vostre lloc web.

-
- -

On ha de viure el lloc web en l'ordinador?

- -

Quan treballeu un lloc web en local en el vostre ordinador, heu de tenir tots els arxius relacionats en una sola carpeta que reflecteix l'estructura d'arxius de la pàgina web publicada al servidor. Aquesta carpeta pot viure en qualsevol lloc que us agradi, però cal posar-la en algun lloc on es pugui trobar fàcilment, potser en el escriptori de la vostra carpeta d'inici, o en l'arrel del disc dur.

- -
    -
  1. Trieu un lloc per emmagatzemar els vostres projectes web. A continuació, creeu una nova carpeta anomenada web-projects (o similar). Aqui és on viuran tots els vostres projectes web.
    2. -
  2. Dins d'aquesta primera carpeta, creeu una altra carpeta per emmagatzemar el vostre primer lloc web. Nomeneu-ho test-site (o alguna cosa més imaginativa).
    3. -
- -

Un a part en l'embolcall i espaiament

- -

Us donareu compte de que al llarg d'aquest article, us demanarem que nomeneu les carpetes i arxius completament en minúscules i sense espais. Això és perquè:

- -
    -
  1. Molts equips, especialment en servidors web, són sensibles a les majúscules i minúscules. Així, per exemple, si poseu una imatge a la vostra pàgina web en la prova in test-site/MyImage.jpg, i després en un arxiu diferent intenteu invocar la imatge com test-site/myimage.jpg, pot ser que no funcioni.
    2. -
  2. Navegadors, servidors web, i llenguatges de programació no manegen espais de forma coherent. Per exemple, si utilitzeu espais en els noms d'arxiu, alguns sistemes poden tractar el nom d'arxiu com dos noms d'arxiu. Alguns servidors substituiran els espais en els noms d'arxiu amb "%20" (el codi de caràcters d'espais en els URI), trencant tots els seus enllaços. Es millor separar les paraules amb guions o subratllats: my-file.html o  my_file.html.
    3. -
- -

Per aquestes raons, el millor és tenir l'hàbit d'escriure els noms de carpetes i arxius en minúscules i sense espais, almenys fins que sapigueu que és el que esteu fent. D'aquesta manera evitareu un menor numero de problemes.

- -

Quina estructura ha de tenir el lloc web?

- -

A continuació, anem a veure quina estructura ha de tenir el nostre lloc de prova. Les coses més comuns que tindrem en qualsevol projecte de lloc web que creiem són un arxiu índex HTML i carpetes que continguin imatges, arxius d'estil i arxius de scripts. Crearem aquests ara:

- -
    -
  1. index.html: Aquest arxiu contindrà generalment el contingut de la vostra pàgina d'inici, és a dir, el text i les imatges que la gent veu quan accedeixin per primera vegada al vostre lloc. Usant el vostre editor de text, creeu un nou arxiu anomenat index.html i guardeu-ho just dins de la carpeta test-site.
    2. -
  2. carpeta d'imatges: Aquesta carpeta contindrà totes les imatges que utilitzeu en el vostre lloc. Creeu una carpeta anomenada images, dins de la carpeta test-site.
    3. -
  3. carpeta d'estils: Aquesta carpeta contindrà el codi CSS per donar estil el vostre contingut (per exemple, l'establiment de text i colors de fons). Creeu una carpeta anomenada styles, dins de la carpeta test-site.
    4. -
  4. carpeta de scripts: Aquesta carpeta contindrà tot el codi JavaScript que s'utilitza per afegir funcionalitat interactiva al vostre lloc (per exemple, els botons que carreguen dades quan es fa clic). Crear una carpeta anomenada scripts, dins de la carpeta test-site.
    5. -
- -
-

Nota: En ordinadors Windows, és possible que tingueu problemes per veure els noms dels arxius, ja que Windows té una opció molesta anomenada Ocultar extensions per a tipus d'arxiu coneguts, activat per defecte. En general, podeu desactivar aquesta opció, aneu a l'Explorador de Windows, seleccioneu l'opció Opcions de carpeta..., desmarqueu la casella Ocultar les extensions dels tipus d'arxiu coneguts i fent clic a OK. Per obtenir informació més específica sobre la vostra versió de Windows, feu una cerca de Yahoo!

-
- -

Rutes d'arxius

- -

Per fer que els arxius parlin uns amb uns altres, heu de proporcionar una ruta d'accés entre ells - bàsicament una ruta per a un arxiu sap on és l'altre. Per demostrar això, introduirem una mica d'HTML en el nostre arxiu index.html, i farem que es vegi la imatge que vam escollir en l'article. "Quin aspecte tindrà en el vostre lloc web?"

- -
    -
  1. Copieu la imatge que vau escollir anteriorment a la carpeta images.
    2. -
  2. Obriu el vostre arxiu index.html, i inseriu el codi següent a l'arxiu exactament com es mostra. No es preocupeu per tot el que significa per ara - veureu les estructures amb més detall més endavant en la sèrie. - 
    <!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>My test page</title>
-  </head>
-  <body>
-    <img src="" alt="My test image">
-  </body>
-</html>
    -
    3. -
  3. La línia <img src="" alt="My test image"> és el codi HTML que insereix una imatge a la pàgina. Hem de dir-li a l'HTML on és la imatge. La imatge es troba dins del directori images, que està en el mateix directori que index.html. Per caminar per l'estructura de l'arxiu de index.html fins a la nostra imatge, la ruta de l'arxiu que necessitaríeu és images/your-image-filename. Per exemple, la nostra imatge es diu firefox-icon.png, de manera que la ruta de l'arxiu és images/firefox-icon.png.
    4. -
  4. Introduïu la ruta de l'arxiu en el codi HTML entre dobles cometes del codi src="".
    5. -
  5. Deseu el fitxer HTML, després carregar-la en el vostre navegador web (doble clic al fitxer). Heu de veure la nova pàgina web que mostra la imatge!
    6. -
- -

A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world

- -

Algunes regles generals per a les rutes d'arxius:

- - - -

Per ara, això és tot el que necessiteu saber.

- -
-

Nota: El sistema d'arxius de Windows tendeix a utilitzar barres invertides, no barres diagonals, com, per exemple, C:\windows. Això no importa - fins i tot si esteu desenvolupant el vostre lloc web en Windows, heu d'utilitzar barres diagonals en el vostre codi.

-
- -

Què més es pot fer?

- -

Això és tot per ara. La vostra estructura de carpetes ha de ser alguna cosa com això:

- -

A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file

- -

{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}

diff --git a/files/ca/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html b/files/ca/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html new file mode 100644 index 0000000000..a7e5ef4b2c --- /dev/null +++ b/files/ca/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html @@ -0,0 +1,103 @@ +--- +title: Quin aspecte tindrà el vostre lloc web? +slug: Learn/Getting_started_with_the_web/Quin_aspecte_tindrà_vostre_lloc_web +tags: + - Assets + - Beginner + - Composing + - Content + - Design + - Fonts + - Learn + - Plan + - 'l10n:priority' +translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_like +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}
+ +
+

Quin serà l'aspecte del vostre lloc web? Analitzeu la planificació i disseny de treball que heu de fer per al vostre lloc web abans d'escriure el codi, incloent, "Quina informació ofereix el meu lloc web?" "Quins tipus de lletra i colors és el que vull?" "Què fa el meu lloc?"

+
+ +

El primer és el primer: planificació

+ +

Abans de fer res, necessiteu algunes idees. Què hauria de fer el vostre lloc web en realitat? Un lloc web pot fer bàsicament qualsevol cosa, però per al vostre primer intent heu de mantenir les coses simples. Anem a començar per la creació d'una pàgina web senzilla amb una capçalera, una imatge, i uns pocs paràgrafs.

+ +

Per començar, haureu de respondre a aquestes preguntes:

+ +
    +
  1. Quin és la teva pàgina web? Us agraden els gossos, Nova York, o Pacman?
    2. +
  2. Quina informació esteu presentant sobre el tema? Escriviu un títol i alguns paràgrafs, i penseu en una imatge que volgueu mostrar en la vostra pàgina.
    3. +
  3. Com es veu el vostre lloc web, en termes simples d'alt nivell. Quin és el color de fons? Quin tipus de font és apropiada: formals, dibuixos animats, audaç i fort, subtil?
    4. +
+ +
+

Nota: Els projectes complexos necessiten directrius detallades que incloent tots els detalls de colors, tipus de lletra, espaiat entre els elements d'una pàgina, l'estil d'escriptura apropiada, i així successivament. Això de vegades es diu una guia de disseny o un llibre de marca, i es pot veure un exemple en les Firefox OS Guidelines.

+
+ +

Esbossar el disseny

+ +

A continuació, obtenir un llapis i paper i esbossar més o menys com voleu el aspecte del vostre lloc. En la vostra primera pàgina web senzilla, no hi ha molt per esbossar, però heu d'aconseguir l'hàbit de fer això ara. Realment ajuda - no heu de ser un Van Gogh!

+ +

+ +
+

Nota: Fins i tot en els llocs web reals, complexos, els equips de disseny en general comencen amb esbossos en paper, i posteriorment construeixen maquetes digitals utilitzant un editor de gràfics o tecnologies web.

+ +

Els equips web sovint inclouen tant un dissenyador gràfic i un {{Glossary("UX", "user-experience")}} dissenyador (UX). Els dissenyadors gràfics, òbviament, posar junts els elements visuals de la pàgina web. Els dissenyadors UX tenen un paper una mica més abstracte a l'hora d'abordar com els usuaris han d'experimentar i interactuar amb el lloc web.

+
+ +

Escollir els vostres recursos

+ +

En aquest punt, és bo per començar a armar el contingut que apareixerà finalment a la vostra pàgina web.

+ +

Text

+ +

No obstant això hauríeu de tenir els paràgrafs i títols abans. Tingueu això molt a prop.

+ +

Color del tema

+ +

Per triar un color, aneu al selector de color i trobeu un color que us agradi. En fer clic a un color, apareixerà un codi de sis caràcters estranys com #660066. Això es diu un codi hex(adecimal), i representa el vostre color. Copieu el codi en un lloc segur per ara.

+ +

+ +

Imatges

+ +

Per triar una imatge, anar a Google Images i buscar alguna adequada.

+ +
    +
  1. Quan trobeu la imatge que desitjeu, feu clic a la imatge.
    2. +
  2. Premeu el botó Veure imatge.
    3. +
  3. A la següent pàgina, feu clic amb el botó dret del ratolí en la imatge (Ctrl + clic en Mac), seleccioneu Guardar imatge com... i trieu un lloc segur per guardar la imatge. Com a alternativa, copieu l'adreça Web de la imatge des de la barra d'adreces del vostre navegador per usar-la més tard.
    4. +
+ +

+ +

+ +
+

Nota: La majoria de les imatges a la web, incloent a Google Images, tenen drets d'autor. Per reduir la probabilitat de que violeu els drets d'autor, podeu utilitzar el filtre de llicència de Google. Només 1) feu clic a Eines de recerca, a continuació, a 2) Drets d'ús:

+ +

+
+ +

Tipus de lletra

+ +

Per triar un tipus de lletra:

+ +
    +
  1. Anar a Google Fonts i examinar la llista fins que trobeu una que us agradi. També podeu utilitzar els controls de la dreta per filtrar encara més els resultats.
    2. +
  2. Feu clic al icona "plus" (Afegir a) al costat del tipus de lletra que vulgueu.
    3. +
  3. Feu clic al botó "*, Familia Seleccionada" en el panell a la part inferior de la pàgina ("*" depèn del nombre de fonts que hagiu seleccionat)
    4. +
  4. En el quadre emergent, es pot veure i copiar les línies de codi que Google us dóna en el vostre editor de text per a guardar per més endavant.
    5. +
+ +

+ +

 

+ +

+ +

{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}

diff --git a/files/ca/learn/html/forms/com_estructurar_un_formulari_web/index.html b/files/ca/learn/html/forms/com_estructurar_un_formulari_web/index.html deleted file mode 100644 index c0cb1e022c..0000000000 --- a/files/ca/learn/html/forms/com_estructurar_un_formulari_web/index.html +++ /dev/null @@ -1,316 +0,0 @@ ---- -title: Com estructurar un formulari web -slug: Learn/HTML/Forms/Com_estructurar_un_formulari_web -translation_of: Learn/Forms/How_to_structure_a_web_form ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Forms/Your_first_form", "Learn/Forms/Basic_native_form_controls", "Learn/Forms")}}
- -

Ara que ja coneixem els conceptes bàsics, veurem amb més detall els elements que s’utilitzen per a proporcionar estructura i significat a les diferents parts d’un formulari.

- - - - - - - - - - - - -
Requisits previs:Coneixements bàsics d'informàtica i una fonaments bàsics de l’HTML.
Objectiu:Aprendre a estructurar els formularis HTML i donar-los semàntica perquè compleixin criteris d’usabilitat i accessibilitat.
- -

La flexibilitat dels formularis els converteix en una de les estructures més complexes pel que fa al codi HTML; pots crear qualsevol tipus de formulari bàsic amb elements i atributs específics de formulari. Fer servir una estructura correcta en crear un formulari HTML et garantirà la usabilitat i l’accessibilitat del formulari.

- -

L'element <form>

- -

L’element {{HTMLElement("form")}} defineix formalment un formulari i els atributs que determinen el comportament del formulari. Cada vegada que vols crear un formulari HTML, has de començar per aquest element i imbricar-hi tot el contingut a dins. Moltes tecnologies d'assistència i complements de navegador poden descobrir elements {{HTMLElement("form")}} i implementar codis de suport (hooks) especials per a facilitar-ne l’ús.

- -

Ja ho hem vist en l’article anterior.

- -
Atenció: Està totalment prohibit imbricar un formulari dins d’un altre formulari. És una mala idea perquè la imbricació de formularis pot introduir comportaments del tot imprevisibles.
- -

Sempre és possible utilitzar un control de formulari fora d'un element {{HTMLElement("form")}}. Si ho fas, per defecte aquest control no tindrà res a veure amb cap formulari, tret que l’associïs a algun formulari amb l'atribut form. Això es va introduir per a permetre unir explícitament un control amb un formulari encara que no hi estigui imbricat.

- -

Avancem una mica i observem els elements estructurals que trobaràs en un formulari.

- -

Els elements <fieldset> i <legend>

- -

L’element {{HTMLElement("fieldset")}} és una manera convenient de crear grups de controls que comparteixen el mateix propòsit, amb les mateixes finalitats d’estil i semàntiques. Pots etiquetar un element {{HTMLElement("fieldset")}} incloent un element {{HTMLElement("legend")}} just a sota de l'etiqueta d'obertura {{HTMLElement("fieldset")}}. El text contingut en l'element {{HTMLElement("legend")}} descriu formalment el propòsit de l'element {{HTMLElement("fieldset")}} que hi ha inclòs.

- -

Moltes tecnologies d'assistència utilitzaran l'element {{HTMLElement("legend")}} com si fos una part de l'etiqueta de cada control de formulari que hi ha dins de l'element {{HTMLElement("fieldset")}} corresponent. Per exemple, alguns lectors de pantalla com Jaws i NVDA llegiran el contingut de la llegenda abans de llegir el text de l’etiqueta de cada control.

- -

Aquí hi ha un petit exemple:

- -
<form>
-  <fieldset>
-    <legend>Mida del suc de fruita</legend>
-    <p>
-      <input type="radio" name="size" id="size_1" value="small">
-      <label for="size_1">Petit</label>
-    </p>
-    <p>
-      <input type="radio" name="size" id="size_2" value="medium">
-      <label for="size_2">Mitjà</label>
-    </p>
-    <p>
-      <input type="radio" name="size" id="size_3" value="large">
-      <label for="size_3">Gran</label>
-    </p>
-  </fieldset>
-</form>
- -
-

Nota: Pots trobar aquest exemple en el fitxer fieldset-legend.html (o consultar-ne l’exemple en viu).

-
- -

En llegir el formulari anterior, un lector de pantalla dirà «Mida del suc de fruita: petit» per al primer giny, «Mida del suc de fruita: mitjà» per al segon i «Mida del suc de fruita: gran» per al tercer.

- -

El cas d’ús que mostra aquest exemple és un dels més importants. Cada vegada que tinguis un conjunt de botons d'opció, els hauries d’imbricar dins d’un element {{HTMLElement("fieldset")}}. Hi ha altres casos d'ús i, en general, l'element {{HTMLElement("fieldset")}} també es pot utilitzar per a introduir seccions en un formulari. L’ideal seria que els formularis llargs ocupin diverses pàgines, però si un formulari s’allarga i només ha d’ocupar una sola pàgina, posar les diferents seccions relacionades dins de diferents elements {{HTMLElement("fieldset")}} millora la usabilitat.

- -

L’element {{HTMLElement("fieldset")}} és un dels elements clau per crear formularis accessibles per l’efecte que té sobre la tecnologia d’assistència; tanmateix, és la teva responsabilitat no abusar-ne. Si és possible, cada cop que creïs un formulari, intenta escoltar com l’interpreta un lector de pantalla. Si sona estrany, prova de millorar l'estructura del formulari.

- -

L'element <label>

- -

Com hem vist en l’article anterior, l’element {{HTMLElement("label")}} és la manera formal de definir una etiqueta per a un control de formulari en HTML. Aquest és l’element més important si vols crear formularis accessibles: quan s’implementen correctament, els lectors de pantalla llegeixen l’etiqueta d’un element de formulari juntament amb qualsevol instrucció relacionada, i també resulta útil per als usuaris sense discapacitats. Considerem aquest exemple, que hem vist en l’article anterior:

- -
<label for="name">Nom:</label> <input type="text" id="name" name="user_name">
- -

Amb l'etiqueta <label> associada correctament amb l’element <input> per l’atribut for (que conté l'atribut id de l'element <input>), un lector de pantalla llegirà una cosa així com «Nom, editar text».

- -

Hi ha una altra manera d’associar un control de formulari amb una etiqueta: introduir el control de formulari dins de <label> i associar-l’hi implícitament.

- -
<label for="name">
-  Nom: <input type="text" id="name" name="user_name">
-</label>
- -

Fins i tot en aquests casos, però, es considera una bona pràctica establir-hi l’atribut for per garantir que totes les tecnologies d’assistència entenen la relació entre l'etiqueta i el control.

- -

Si no hi ha cap etiqueta o si el control de formulari no està associat implícitament ni explícitament amb una etiqueta, un lector de pantalla llegirà alguna cosa com ara «Editar text en blanc», la qual cosa no és gaire útil.

- -

També pots clicar les etiquetes!

- -

Un altre avantatge de configurar correctament les etiquetes és que pots fer-hi clic o tocar-les per a activar-ne el control corresponent. Això és útil per a controls com les entrades de text, en què pots fer clic a l’etiqueta i també a l’entrada per a donar-hi el focus, però és útil, sobretot, per als botons d'opció i les caselles de verificació; l’àrea d’aquest control pot ser molt petita, de manera que és útil per a facilitar-ne l’activació.

- -

Per exemple, si fas clic al text de l'etiqueta «M'agraden les cireres» de l'exemple següent, canviarà l'estat seleccionat de la casella taste_cherry:

- -
<form>
-  <p>
-    <input type="checkbox" id="taste_1" name="taste_cherry" value="cherry">
-    <label for="taste_1">M'agraden les cireres</label>
-  </p>
-  <p>
-    <input type="checkbox" id="taste_2" name="taste_banana" value="banana">
-    <label for="taste_2">M'agraden els plàtans</label>
-  </p>
-</form>
- -
-

Nota: Pots trobar aquest exemple en el fitxer checkbox-label.html (o consultar l’exemple en viu).

-
- -

Etiquetes múltiples

- -

Estrictament parlant, pots posar diverses etiquetes en un sol control, però no és una bona idea perquè algunes tecnologies d'assistència poden tenir problemes a l'hora de manejar-los. En el cas de tenir etiquetes múltiples, hauràs d’incloure el control i les seves múltiples etiquetes dins d’un únic element {{htmlelement("label")}}.

- -

Considerem l'exemple següent:

- -
<p>Els camps obligatoris van seguits de <abbr title="required">*</abbr>.</p>
-
-<!-- Doncs, això: --->
-<div>
-  <label for="username">Nom:</label>
-  <input type="text" name="username">
-  <label for="username"><abbr title="obligatori" aria-label="required">*</abbr></label>
-</div>
-
-<!-- seria millor fer-ho d'aquesta manera: -->
-<div>
-  <label for="username">
-    <span>Nom:</span>
-    <input id="username" type="text" name="username">
-    <abbr title="obligatori" aria-label="required">*</abbr>
-  </label>
-</div>
-
-<!-- Però això és probablement el millor: -->
-<div>
-  <label for="username">Nom: <abbr title="obligatori" aria-label="required">*</abbr></label>
-  <input id="username" type="text" name="username">
-</div>
- -

{{EmbedLiveSample("Etiquetes_múltiples", 120, 120)}}

- -

El paràgraf de la part superior estableix una regla per als elements obligatoris. La regla s'ha d'incloure abans que s’hagi d'utilitzar perquè els usuaris generals i els usuaris amb tecnologies d’assistència, com ara lectors de pantalla, puguin saber què vol dir abans de trobar un element obligatori. Tot i que això ajuda a informar els usuaris què significa un asterisc, no ens en podem refiar. Un lector de pantalla llegirà un asterisc així: «estrella». Si s'hi passa el ratolí per sobre, hauria d'aparèixer «obligatori», que s'aconsegueix amb l'atribut title. Els títols que es llegeixen en veu alta depenen de la configuració del lector de pantalla, de manera que és més fiable incloure també l’atribut aria-label, que els lectors de pantalla llegeixen sempre.

- -

Les variants anteriors augmenten l’efectivitat a mesura que hi avances:

- - - -
-

Nota: Pots obtenir resultats una mica diferents, segons quin sigui el teu lector de pantalla. Aquest ha estat provat amb VoiceOver (i NVDA es comporta de manera similar). Ens agradaria conèixer també les teves experiències.

-
- -
-

Nota: Pots trobar aquest exemple a GitHub en el fitxer required-labels.html (o consulta l’exemple en viu). No provis l'exemple amb les dues o tres versions sense comentaris: els lectors de pantalla definitivament es confondran si tens diverses etiquetes i múltiples entrades amb el mateix ID.

-
- -

Estructures HTML habituals que es fan servir als formularis

- -

Més enllà de les estructures específiques dels formularis web, és bo recordar que l'etiquetatge del formulari només és HTML. Això significa que pots utilitzar tot el poder de l'HTML per a estructurar un formulari web.

- -

Com es pot veure en els exemples, és una pràctica habitual delimitar una etiqueta i el control associat amb un element {{HTMLElement("li")}} dins d'un element de llista {{HTMLElement("ul")}} o {{HTMLElement("ol")}}. Els elements {{HTMLElement("p")}} i {{HTMLElement("div")}} també s'utilitzen de forma habitual. Per a estructurar diverses caselles de verificació o botons d'opció es recomana crear una llista.

- -

A més de l’element {{HTMLElement("fieldset")}}, també és una pràctica habitual utilitzar títols HTML (per exemple, {{htmlelement("h1")}}, {{htmlelement("h2")}}) i seccionar (per exemple, {{htmlelement("section")}}), per a estructurar formularis complexos.

- -

Per sobre de tot, et correspon a tu trobar un estil de codificació còmode que doni lloc a formularis que compleixin criteris d’accessibilitat i usabilitat. Les seccions independents amb funcions diferents haurien d’estar contingudes en un element {{htmlelement("section")}} separat, amb elements {{htmlelement("fieldset")}} per a contenir botons d'opció.

- -

Aprenentatge actiu: construir l’estructura d’un formulari

- -

Posem en pràctica aquestes idees i construïm un formulari una mica més complicat: un formulari de pagament. Aquest formulari contindrà diversos tipus de controls que encara no coneixes. No et preocupis; en veuràs el funcionament en l’article següent (Els controls de formulari bàsics originals). Per ara, llegeix amb detall les descripcions mentre segueixes les instruccions següents i comences a entendre quins elements utilitzem per a estructurar un formulari, i per què.

- -
    -
  1. Per començar, fes una còpia local del fitxer de plantilla en blanc i del CSS del nostre formulari de pagament en un directori nou del teu ordinador.
    2. -
  2. Aplica el CSS a l’HTML afegint la línia següent a l’element {{htmlelement("head")}} de l’HTML: - 
    <link href="payment-form.css" rel="stylesheet">
    -
    3. -
  3. A continuació, afegeix l’element extern {{htmlelement("form")}} per a crear el teu formulari: - 
    <form>
-
-</form>
    -
    4. -
  4. Afegeix un títol d’encapçalament encapçalament i un paràgraf a les etiquetes <form> per a informar els usuaris com es marquen els camps obligatoris: - 
    <h1>Forma de pagament</h1>
-<p>Els camps obligatoris van seguits de <strong><abbr title = "obligatori">*</abbr></strong>.</p>
    -
    5. -
  5. A continuació, afegirem una secció més gran de codi al formulari, a sota de l’entrada anterior. Aquí veuràs que delimitem amb un element {{htmlelement("section")}} independent els camps amb la informació de contacte. A més, hi ha un conjunt de dos botons d'opció, cadascun dels quals col·loquem dins d’un element de llista ({{htmlelement("li")}}) propi. També hi ha dos textos estàndard {{htmlelement("input")}} i els seus elements {{htmlelement("label")}} associats, cadascun imbricat dins d'un element {{htmlelement("p")}} i un camp per a introduir una contrasenya. Afegeix aquest codi al teu formulari: - 
    <section>
-    <h2>Informació de contacte</h2>
-    <fieldset>
-      <legend>Títol </legend>
-      <ul>
-          <li>
-            <label for="title_1">
-              <input type="radio" id="title_1" name="title" value="K" >
-              Rei
-            </label>
-          </li>
-          <li>
-            <label for="title_2">
-              <input type="radio" id="title_2" name="title" value="Q">
-              Reina
-            </label>
-          </li>
-          <li>
-            <label for="title_3">
-              <input type="radio" id="title_3" name="title" value="J">
-              Bufó
-            </label>
-          </li>
-      </ul>
-    </fieldset>
-    <p>
-      <label for="name">
-        <span>Nom: </span>
-        <strong><abbr title="required">*</abbr></strong>
-      </label>
-      <input type="text" id="name" name="username">
-    </p>
-    <p>
-      <label for="mail">
-        <span>Correu electrònic: </span>
-        <strong><abbr title="required">*</abbr></strong>
-      </label>
-      <input type="email" id="mail" name="usermail">
-    </p>
-    <p>
-      <label for="pwd">
-        <span>Contrasenya:</span>
-        <strong><abbr title="required">*</abbr></strong>
-      </label>
-      <input type="password" id="pwd" name="password">
-    </p>
-</section>
    -
    6. -
  6. La segona secció (<section>) del nostre formulari és la informació de pagament. Hi ha tres controls diferents, juntament amb les seves etiquetes, cadascun inclòs en un element <p>. El primer és un menú desplegable ({{htmlelement("select")}}) que selecciona el tipus de targeta de crèdit. El segon és un element <input> del tipus tel, que introdueix un número de targeta de crèdit; tot i que podríem haver utilitzat el tipus number, no volem la interfície d'usuari que s'hi aplica per defecte. L'últim és un element <input> del tipus date, per a introduir la data de caducitat de la targeta; aquest apareixerà amb un control de selecció de dates en els navegadors compatibles, i es converteix en una entrada de text normal en els navegadors no compatibles. Aquests tipus d’entrada més nous es reintrodueixen en l’article tipus d’entrades en HTML5.
    -
    - Introdueix el següent en la secció anterior: - 
    <section>
-    <h2>Informació de pagament</h2>
-    <p>
-      <label for="card">
-        <span>Tipus de targeta: </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>Número de targeta:</span>
-        <strong><abbr title="required">*</abbr></strong>
-      </label>
-      <input type="tel" id="number" name="cardnumber">
-    </p>
-    <p>
-      <label for="date">
-        <span> Data de caducitat: </span>
-        <strong><abbr title="required">*</abbr></strong>
-        <em>en format mm/aa</em>
-      </label>
-      <input type="date" id="date" name="expiration">
-    </p>
-</section>
    -
    7. -
  7. L’última secció que afegim és molt més senzilla, perquè només conté un element {{htmlelement("button")}} de tipus submit, que envia les dades del formulari. Afegeix això al final del formulari: - 
    <p> <button type="submit">Validar el pagament</button> </p>
    -
    8. -
- -

A sota pots veure en acció el formulari acabat (també el pots trobar a GitHub; consulta el codi d’origen a payment-form.html i executa’l en viu):

- -

{{EmbedLiveSample("A_payment_form","100%",620, "", "en-US/Learn/Forms/How_to_structure_a_web_form/Example")}}

- -

Resum

- -

Ara tens tot el coneixement que necessites per a estructurar adequadament els teus formularis web. En els pròxims articles tractarem moltes de les funcions que s’introdueixen aquí; l’article següent explica amb més detall l’ús de tots els diferents tipus de controls de formulari que voldràs utilitzar per a recopilar informació dels teus usuaris.

- -

Consulta també

- - - -

{{PreviousMenuNext("Learn/Forms/Your_first_form", "Learn/Forms/Basic_native_form_controls", "Learn/Forms")}}

- -

En aquest mòdul

- - - -

Temes avançats

- - diff --git a/files/ca/learn/html/forms/controls_de_formulari_originals/index.html b/files/ca/learn/html/forms/controls_de_formulari_originals/index.html deleted file mode 100644 index 73ee2a9249..0000000000 --- a/files/ca/learn/html/forms/controls_de_formulari_originals/index.html +++ /dev/null @@ -1,325 +0,0 @@ ---- -title: Controls de formulari originals -slug: Learn/HTML/Forms/Controls_de_formulari_originals -translation_of: Learn/Forms/Basic_native_form_controls ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Forms/How_to_structure_an_HTML_form", "Learn/Forms/HTML5_input_types", "Learn/Forms")}}
- -

En l’article anterior hem etiquetat un exemple de formulari web funcional, hem introduït alguns controls de formulari i elements estructurals comuns, però sobretot, ens hem centrat en l'accessibilitat. A continuació analitzarem amb detall la funcionalitat dels diferents controls de formulari, també anomenats ginys o widgets, i estudiarem totes les opcions que hi ha disponibles per a recollir diferents tipus de dades. En aquest article, veurem el conjunt original de controls de formulari que hi ha disponibles en tots els navegadors des dels primers dies.

- - - - - - - - - - - - -
Prerequisits:Coneixements bàsics d'informàtica i una comprensió bàsica d’HTML.
Objectiu:Comprendre amb detall el conjunt de controls de formulari originals que hi ha disponibles als navegadors per a la recollida de dades, i com implementar-los amb HTML.
- -

Ja coneixes alguns elements de formulari, com ara {{HTMLelement('form')}}, {{HTMLelement('fieldset')}}, {{HTMLelement('legend')}}, {{HTMLelement('textarea')}}, {{HTMLelement('label')}}, {{HTMLelement('button')}} i {{HTMLelement('input')}}. Aquest article exposa:

- - - -
-

Nota: Les característiques que comentem en aquest article són compatibles amb tots els navegadors, però no amb tots els controls de formulari. En els dos articles següents expliquem els controls de formulari que s’han afegit a l’HTML5 més recentment. Si vols una referència més avançada, has de consultar la nostra referència d’elements de formulari HTML i, en particular, la nostra extensa referència de tipus <input>.

-
- -

Camps d'entrada de text

- -

Els camps d’entrada de text {{htmlelement("input")}} són els controls del formulari més bàsics. Són una manera molt còmoda de permetre a l’usuari introduir qualsevol tipus de dades, i ja n’hem vist alguns exemples senzills.

- -
-

Nota: Els camps de text en format HTML són controls d’entrada de text pla. Això vol dir que no pots aplicar-hi una edició enriquida (negreta, cursiva, etc.). Tots els controls de formulari que trobis amb text enriquit són controls de formulari personalitzats creats amb HTML, CSS i JavaScript.

-
- -

Tots els controls bàsics de text comparteixen alguns comportaments comuns:

- - - -
-

Nota: L’element {{htmlelement("input")}} és únic entre els elements d’HTML perquè pot adoptar moltes formes diferents segons el valor del seu atribut type. S'utilitza per a crear la majoria de tipus de controls de formulari, que inclouen camps de text d'una sola línia, controls d'hora i data, controls sense entrada de text com ara caixes de selecció, botons d'opció i selectors de colors, i botons.

-
- -

Camps de text d'una sola línia

- -

Un camp de text d'una sola línia es crea en assignar a l'atribut {{htmlattrxref("type","input")}} d’un element {{HTMLElement("input")}} el valor text, o si l’atribut {{htmlattrxref("type","input")}} s’omet (perquè el valor per defecte d’aquest atribut és text). El valor text d’aquest atribut és també el valor alternatiu que el navegador utilitza si el valor que especifiques per a l’atribut {{htmlattrxref("type","input")}} li és desconegut (per exemple, si especifiques type="color" i el navegador no és compatible amb els selectors de color).

- -
-

Nota: Consulta exemples de tots els tipus de camp de text d’una sola línia a GitHub, en el fitxer single-line-text-fields.html (també pots consultar l’exemple en viu).

-
- -

A continuació es mostra un exemple bàsic de camp de text d'una sola línia:

- -
<input type="text" id="comment" name="comment" value="I'm a text field">
- -

Els camps de text d'una sola línia només tenen una restricció: si escrius text amb salts de línia, el navegador elimina els salts de línia abans d'enviar les dades al servidor.

- -

La captura de pantalla següent mostra els tipus de controls d’entrada de text predeterminat, amb el focus i desactivat en Firefox 71 i Safari amb macOS i en Chrome 79 i Edge 18 amb Windows 10.

- -

Captura de pantalla que mostra els estils de l’atribut en els estats predeterminat, amb el focus i desactivat per a un control d’entrada de text en Firefox, Safari, Chrome i Edge.

- -
-

Nota: L'HTML5 va millorar el camp de text d'una sola línea bàsic original afegint valors especials per a l’atribut {{htmlattrxref("type","input")}} que aplica restriccions de validació específiques i altres funcions, per exemple a l'hora d'introduir adreces URL o números. Les tractarem en l’article següent: tipus d’entrada HTML5.

-
- -

Camps de contrasenya

- -

Un dels tipus d’entrada de text originals era el tipus de camp de text per a introduir una contrasenya (password):

- -
<input type="password" id="pwd" name="pwd">
- -

El valor de contrasenya (password) no afegeix cap restricció especial al text que s’introdueix al camp, però n’amaga el valor (per exemple, amb punts o asteriscs) i impedeix que altres usuaris el puguin llegir.

- -

Tingues en compte que es tracta només d’una funció d’interfície d’usuari; si no és que envies el formulari d’una manera segura, s’enviarà un text pla, i això no és aconsellable per a la seguretat. Una persona maliciosa podria interceptar les teves dades i robar-te contrasenyes, dades de la targeta de crèdit o qualsevol cosa que hagis enviat. La millor manera de protegir els usuaris d’això és allotjar les pàgines que incloguin formularis en una connexió segura (és a dir, una adreça https://...), perquè les dades se xifrin abans d’enviar-se.

- -

Els navegadors reconeixen les implicacions de seguretat de l'enviament de dades del formulari per una connexió no segura i disposen de missatges d’advertiments per a dissuadir els usuaris d'utilitzar formularis no segurs. Per a obtenir més informació sobre el que implementa Firefox, consulta l’article Contrasenyes insegures.

- -

Contingut ocult

- -

Un altre control de text original és el tipus d’entrada hidden. S'utilitza per a crear un control de formulari que és invisible per a l'usuari, però que s'envia al servidor juntament amb la resta de dades del formulari. Per exemple, pot ser que vulguis enviar una marca de temps al servidor que indiqui quan s’ha fet una comanda. Com que és un control ocult, l’usuari no el pot veure ni editar-ne el valor de manera intencionada, mai no rep el focus i un lector de pantalla tampoc no el detecta.

- -
<input type="hidden" id="timestamp" name="timestamp" value="1286705410">
-
- -

Quan crees aquest element, cal que hi configuris els atributs name i value. El valor es pot configurar dinàmicament amb JavaScript. El tipus d’entrada hidden no hauria de tenir cap etiqueta associada.

- -

Amb HTML5 es van afegir altres tipus d'entrada de text, com {{HTMLElement("input/search", "search")}}, {{HTMLElement("input/url", "url")}} i {{HTMLElement("input/tel", "tel")}}. Es tracten en el tutorial següent: tipus d’entrada HTML5.

- -

Elements de selecció: caselles de selecció i botons d'opció

- -

Els elements de selecció (o checkable items, en anglès) són controls dels quals pots canviar l’estat fent-hi clic a sobre o en les etiquetes que hi estan associades. Hi ha dos tipus d’elements de selecció: la casella de selecció, o check box, i el botó d'opció, o radio button. Tots dos utilitzen l’atribut checked per indicar si el control està en estat seleccionat per defecte o no.

- -

Val la pena assenyalar que aquests controls no es comporten exactament igual que altres controls de formulari. Per a la majoria de controls de formulari, un cop validat el formulari s’envien tots els controls que tenen un atribut name, fins i tot si no se n’ha omplert el valor. En el cas dels elements de selecció, els valors s’envien només si estan seleccionats. Si no ho estan, no s'envia res, ni tan sols el nom. Si estan seleccionats però no tenen cap valor, el nom s'envia amb el valor on.

- -
-

Nota: Pots trobar els exemples d'aquesta secció a GitHub, en el fitxer checkable-items.html (o també consultar-ne l’exemple en viu).

-
- -

Per a assolir una usabilitat/accessibilitat màxima, es recomana delimitar cada llista d’elements que estan relacionats entre si dins d'un element {{htmlelement("fieldset")}} amb un element {{htmlelement("legend")}} que ofereixi una descripció general de la llista. Cada parella d'elements {{htmlelement("label")}}/{{htmlelement("input")}} hauria d’estar continguda en un element de llista (o similar) propi. L'element associat {{htmlelement('label')}} se situa en general immediatament a continuació del botó d'opció o de la caixa de verificació, i les instruccions del grup de botons d'opció o caselles de selecció solen ser el contingut de l'element {{htmlelement("legend")}}. Observa els exemples estructurals que et presentem en l’enllaç anterior.

- -

Caselles de verificació

- -

Una casella de verificació es crea amb l’element {{HTMLElement("input")}} i un atribut type amb el valor {{HTMLElement("input/checkbox", "checkbox")}}.

- -
<input type="checkbox" id="carrots" name="carrots" value="carrots" checked>
-
- -

Si s’hi inclou l’atribut checked, la casella de verificació es marca automàticament en carregar-se la pàgina. Si s’hi fa clic, en la casella de verificació o en l’etiqueta associada, la casella de verificació canvia entre els estats activat o desactivat.

- -

Les captures de pantalla següents mostren les caselles de verificació en els estats per defecte, amb el focus i desactivat en Firefox 71 i Safari 13 amb macOS i Chrome 79 i en Edge 18 amb Windows 10:

- -

Caselles de verificació en els estats per defecte, amb el focus i desactivat en Firefox 71 i Safari 13 amb macOS i Chrome 79 i en Edge 18 amb Windows 10

- -
-

Nota: La pseudoclasse {{cssxref(':default')}} selecciona les caselles de verificació i els botons d'opció que presenten l'atribut checked en el moment de carregar-se la pàgina, encara que ja no estiguin en l’estat checked. La pseudoclasse {{cssxref(':checked')}} selecciona només els elements que estan en estat checked.

-
- -

A causa de la característica activada-desactivada que presenten les caselles de verificació, es consideren botons de commutació i molts desenvolupadors i dissenyadors han estès l’estil per defecte de la casella de selecció per a crear botons que semblen interruptors. Pots consultar-ne un exemple en acció aquí (o també pots consultar-ne el codi d’origen).

- -

Botons d'opció

- -

Un botó d'opció es crea amb l’element {{HTMLElement("input")}} i l’atribut {{htmlattrxref("type","input")}} establert en el valor radio:

- -
<input type="radio" id="soup" name="meal" checked>
- -

És possible associar diversos botons de ràdio. Si comparteixen el mateix valor de l’atribut {{htmlattrxref("name","input")}}, es considera que estan en el mateix grup de botons. Només és possible marcar un botó d’un grup determinat cada vegada; això vol dir que quan se’n clica un, tots els altres es desmarquen automàticament. Quan el formulari s’envia, només s’envia el valor del botó d'opció seleccionat. Si no se'n selecciona cap, es considera que el conjunt de botons d'opció està en un estat desconegut i no s’envia cap valor amb el formulari. Quan s’ha clicat un dels botons d'opció d’un mateix grup de botons, no és possible desmarcar tots els botons sense reiniciar el formulari.

- -
<fieldset>
-  <legend>Quin és el teu menjar preferit?</legend>
-  <ul>
-    <li>
-      <label for="soup">Sopa </label>
-      <input type="radio" id="soup" name="meal" value="soup" checked>
-    </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>
- -

Les captures de pantalla següents mostren els botons d'opció en els estats no marcat i marcat, amb el focus i desactivats: en Firefox 71 i Safari 13 amb MacOs i Chrome 79 i en Edge 18 amb Windows 10.

- -

Botons d'opció en Firefox 71 i Safari 13 amb Mac i Chrome 79 i en Edge 18 amb Windows 10

- -

Botons reals

- -

En realitat, els botons d'opció no són botons, malgrat el nom. Ara anirem una mica més enllà i veurem botons autèntics! Hi ha tres tipus d’entrada que proporcionen botons:

- -
-
submit
-
Envien les dades del formulari al servidor. Per als elements {{HTMLElement("button")}}, si s’omet l'atribut type (o es posa un valor de type no vàlid), s’obté un botó d'enviament.
-
reset
-
Restableixen tots els controls de formulari als valors predeterminats.
-
button
-
No presenten cap efecte automàtic, però es poden personalitzar amb codi JavaScript.
-
- -

A més, l’element {{htmlelement("button")}} pot prendre un atribut type i imitar aquests tres tipus d'entrada. La diferència principal entre els dos elements és que els elements <button> autèntics admeten moltes més opcions d’estil.

- -
-

Nota: També es pot representar com un botó el tipus d’entrada image. El tractarem més endavant també.

-
- -
-

Nota: Pots trobar els exemples d'aquesta secció a GitHub, en els fitxers button-examples.html (o també pots consultar l’exemple en viu).

-
- -

A continuació pots trobar exemples de cada tipus d’entrada <input> de tipus botó, juntament amb el tipus de botó equivalent.

- -

submit

- -
<button type="submit">
-    Aquest és un <strong>botó Enviar</strong>
-</button>
-
-<input type="submit" value="Aquest és un botó Enviar">
- -

reset

- -
<button type="reset">
-    Aquest és un <strong>botó Reiniciar</strong>
-</button>
-
-<Input type = "reset" value = "Aquest és un botó Reiniciar">
- -

anonymous

- -
<button type="button">
-    Aquest és un <strong>botó anònim</strong>
-</button>
-
-<input type="button" value="Aquest és un botó anònim">
- -

Els botons sempre es comporten igual, tant si fas servir un element {{HTMLElement("button")}} com un element {{HTMLElement("input")}}. Però, com pots veure en els exemples, els elements {{HTMLElement("button")}} et permeten aplicar HTML al contingut inclòs entre les etiquetes <button> d'obertura i de tancament. En canvi, els elements {{HTMLElement("input")}} són elements buits; el contingut que s’hi mostra s’insereix dins de l’atribut value, i per tant només accepten contingut textual.

- -

Els exemples següents mostren els tipus d’entrada per defecte dels botons en els estats predeterminat, amb el focus i desactivat: en Firefox 71 i Safari 13 amb macOS i Chrome 79 i en Edge 18 amb Windows 10.

- -

Tipus d’entrada per defecte dels botons en els estats predeterminat, amb el focus i desactivat: en Firefox 71 i Safari 13 amb macOS i Chrome 79 i en Edge 18 amb Windows 10

- -

Botons imatge

- -

El control botó imatge es comporta exactament com un element {{HTMLElement("img")}}, però passa a comportar-se com un botó de validació quan un usuari hi fa clic.

- -

Un botó imatge es crea amb un element {{HTMLElement("input")}} i l’atribut {{htmlattrxref("type","input")}} establert en el valor image. Aquest element admet exactament el mateix conjunt d’atributs que l’element {{HTMLElement("img")}}, i a més, tots els atributs que són compatibles amb els altres botons de formulari.

- -
<input type="image" alt="Fes-me clic!" src="my-img.png" width="80" height="30">
- -

Si per a validar el formulari s’utilitza un botó imatge, aquest control no envia el seu valor, sinó que s’envien les coordenades X i Y del clic que s’ha fet en la imatge (les coordenades són relatives a la imatge, és a dir, que la part superior esquerra de la imatge representa les coordenades (0, 0)). Les coordenades s’envien com dos parells clau/valor:

- - - -

Així, per exemple, observa que en fer clic a les coordenades (123, 456) de la imatge i enviar pel mètode get, aquests valors s’annexen a l’URL de la manera següent:

- -
http://foo.com?pos.x=123&pos.y=456
- -

Aquesta és una manera molt còmoda de construir un «mapa interactiu». La manera d’enviar i recuperar aquests valors es detalla en l’article Enviar les dades d’un formulari.

- -

Selector de fitxers

- -

Un últim tipus <input> que ens va arribar amb l'HTML inicial és el tipus entrada de fitxer. Els formularis poden enviar fitxers a un servidor (aquesta acció específica també es detalla en l’article Enviar les dades d’un formulari). El control de selecció de fitxers es pot utilitzar per triar un o més fitxers que es volen enviar.

- -

Pots crear un control de selecció de fitxers amb l’element {{HTMLElement("input")}} i l’atribut {{htmlattrxref("type","input")}} establert en el valor file. Pots restringir els tipus de fitxers que se seleccionen amb l’atribut {{htmlattrxref("accept","input")}}. A més, pots deixar que l’usuari triï més d’un fitxer si hi afegeixes l’atribut {{htmlattrxref("multiple","input")}}.

- -

Exemple

- -

En aquest exemple es crea un selector de fitxers que sol·licita fitxers gràfics d’imatge. En aquest cas, l'usuari té la possibilitat de seleccionar diversos fitxers.

- -
<input type="file" name="file" id="file" accept="image/*" multiple>
- -

En alguns dispositius mòbils, el selector de fitxers pot accedir a fotos, vídeos i àudio capturats directament per la càmera i el micròfon del dispositiu i afegir a l’atribut accept informació sobre la captura com ara:

- -
<input type="file" accept="image/*;capture=camera">
-<input type="file" accept="video/*;capture=camcorder">
-<input type="file" accept="audio/*;capture=microphone">
- -

Atributs comuns

- -

Molts dels elements utilitzats per a definir controls de formulari tenen atributs específics propis. Això no obstant, hi ha un conjunt d’atributs comuns a tots els elements de formulari. Ja n'has conegut uns quants, però a continuació et presentem una llista d’aquests atributs comuns, perquè els tinguis com a referència:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Nom de l'atributValor per defecteDescripció
autofocusfalseAquest atribut booleà permet especificar que un element adquireix el focus d'entrada automàticament quan es carrega la pàgina. En un document només hi pot haver un element associat a un formulari que tingui especificat aquest atribut.
disabledfalseAquest atribut booleà indica que l'usuari no pot interactuar amb l'element. Si aquest atribut no s'especifica, l'element hereta la configuració de l'element que el conté, per exemple, {{HTMLElement("fieldset")}}; si no hi ha cap element contenidor que tingui establert l'atribut disabled, l'element està habilitat.
formL’element <form> s’utilitza per a associar el control al formulari, quan aquest no hi està imbricat. El valor de l’atribut ha de ser l’atribut id d’un element {{HTMLElement("form")}} del mateix document. D’aquesta manera pots associar un formulari un control de formulari que n’estigui fora, encara que sigui dins d’un formulari diferent.
nameEl nom de l'element; s'envia amb les dades del formulari.
valueEl valor inicial de l'element.
- -

Resum

- -

Aquest article ha exposat els tipus d’entrada més antics: el conjunt original introduït els primers dies de l’HTML, que és compatible amb tots els navegadors. En l'article següent analitzarem els valors més recents de l’atribut type, que s’han afegit en HTML5.

- -

{{PreviousMenuNext("Learn/Forms/How_to_structure_an_HTML_form", "Learn/Forms/HTML5_input_types", "Learn/Forms")}}

- -

En aquest mòdul

- - - -

Temes avançats

- - diff --git a/files/ca/learn/html/forms/el_teu_primer_formulari/index.html b/files/ca/learn/html/forms/el_teu_primer_formulari/index.html deleted file mode 100644 index 3f327d4494..0000000000 --- a/files/ca/learn/html/forms/el_teu_primer_formulari/index.html +++ /dev/null @@ -1,298 +0,0 @@ ---- -title: El teu primer formulari -slug: Learn/HTML/Forms/El_teu_primer_formulari -translation_of: Learn/Forms/Your_first_form ---- -
{{LearnSidebar}}{{NextMenu("Learn/Forms/How_to_structure_a_web_form", "Learn/Forms")}}
- -

Aquest articles t'ofereix la primera experiència de creació d’un formulari web, que inclou dissenyar d’un formulari senzill amb els controls de formulari HTML adequats i altres elements HTML, afegir una mica d’estil molt senzill amb CSS i enviar les dades a un servidor. A mesura que avancem en el mòdul, ampliarem aquesta informació.

- - - - - - - - - - - - -
Requisits previs:Coneixements bàsics d'informàtica i fonaments bàsics d’HTML.
Objectiu:Familiaritzar-se amb els formularis web, per a què serveixen, com dissenyar-los, i quins elements bàsics HTML necessitaràs per a casos senzills.
- -

Què són els formularis web?

- -

Els formularis web són un dels principals punts d’interacció entre un usuari i un lloc web o aplicació. Els formularis permeten als usuaris introduir dades, que en general s’envien a un servidor web per a processar-les i emmagatzemar-les (consulta l’article Enviar les dades d’un formulari web més endavant d’aquest mòdul) o permeten al client actualitzar a l’instant la interfície d’alguna manera (per exemple, afegir un altre element de llista, o mostrar o amagar una funció d'interfície d'usuari).

- -

L’HTML d’un formulari web està format per un o més controls de formulari (de vegades anomenats ginys o, en anglès, widgets), a més d’alguns elements addicionals que ajuden a estructurar el formulari general, que sovint s’anomenen formularis HTML. Els controls poden ser camps de text d'una sola línia o de diverses línies, caixes desplegables, botons, caselles de selecció o botons d'opció, i es creen majoritàriament amb l'element {{htmlelement("input")}}, tot i que hi ha altres elements que també has de conèixer.

- -

Els controls de formulari també es poden programar per a forçar la introducció de formats o valors específics (validació del formulari) i es poden combinar amb etiquetes de text que en descriuen el propòsit tant als usuaris estàndard com als que tenen discapacitats visuals.

- -

Disseny del formulari

- -

Abans de començar a codificar, sempre és millor fer un pas enrere i prendre't el temps necessari per pensar en el teu formulari. Dissenyar una maqueta ràpida t'ajudarà a definir el conjunt adequat de dades que vols que l'usuari introdueixi. Des del punt de vista de l'experiència d’usuari (UX), és important recordar que, com més gran sigui el teu formulari, més risc hi ha de frustrar les persones i perdre usuaris. Fes que sigui senzill i concís: demana només les dades que necessites.

- -

El disseny de formularis és un pas important a l’hora de crear un lloc web o una aplicació. Aquest article no tracta de l’experiència d’usuari amb els formularis, però si vos aprofundir aquest tema, pots llegir els articles següents:

- - - -

En aquest article crearem un formulari de contacte senzill. Fem-ne un esbós.

- -

Una manera aproximada de fer un esbós de formulari

- -

El nostre formulari inclourà tres camps de text i un botó. Demanem a l’usuari el nom, el correu electrònic i el missatge que vol enviar. En prémer el botó, les dades s’enviaran a un servidor web.

- -

Aprenentatge actiu: Creació del nostre formulari HTML

- -

D’acord, en primer lloc creem l’HTML per al nostre formulari. Utilitzarem els elements HTML següents: {{HTMLelement("form")}}, {{HTMLelement("label")}}, {{HTMLelement("input")}}, {{HTMLelement("textarea")}} i {{HTMLelement("button")}}.

- -

Abans d’avançar, fes una còpia local de la nostra plantilla HTML senzilla i hi introduiràs el formulari HTML.

- -

L’element {{HTMLelement("form")}}

- -

Tots els formularis comencen amb un element {{HTMLelement("form")}}, com ara:

- -
<form action="/my-handling-form-page" method="post">
-
-</form>
- -

Aquest element defineix formalment un formulari. És un element contenidor, com un element {{HTMLelement ("section")}} o {{HTMLelement ("footer")}}, però que conté específicament formularis; també admet alguns atributs específics per a configurar el comportament del formulari. Tots els atributs són opcionals, però és una pràctica habitual establir sempre com a mínim els atributs action i method:

- - - -
-

Nota: Observa com funcionen aquests atributs en el nostre article Enviar les dades d’un formulari web, que trobaràs més endavant.

-
- -

Per ara, afegeix l'element {{htmlelement("form")}} anterior al teu element HTML {{htmlelement("body")}}.

- -

Els elements {{HTMLelement("label")}}, {{HTMLelement("input")}} i {{HTMLelement("textarea")}}

- -

El nostre formulari de contacte no és complex: la part de l’entrada de les dades conté tres camps de text, cadascun amb el seu element {{HTMLelement("label")}} corresponent:

- - - -

En termes de codi HTML, necessitem alguna cosa com la següent per a implementar aquests controls de formulari:

- -
<form action="/my-handling-form-page" method="post">
- <ul>
-  <li>
-    <label for="name">Nom:</label>
-    <input type="text" id="name" name="user_name">
-  </li>
-  <li>
-    <label for="mail">Correu electrònic:</label>
-    input type="email" id="mail" name="user_mail">
-  </li>
-  <li>
-    <label for="msg">Missatge:</label>
-    <textarea id="msg" name="user_message"></textarea>
-  </li>
- </ul>
-</form>
- -

Actualitza el codi del teu formulari perquè s'assembli a l’anterior.

- -

Els elements {{HTMLelement("li")}} hi són per estructurar convenientment el nostre codi i facilitar el disseny (ho veuràs més endavant en aquest article). Incloem una etiqueta explícita per a cada control de formulari per motius d'usabilitat i accessibilitat. Tingues en compte l’ús de l’atribut for per a tots els elements {{HTMLelement ("label")}}, que pren com a valor l'identificador del control de formulari id al qual està associat; així és com un formulari s'associa a la seva etiqueta.

- -

Fer-ho resulta molt útil: associa l’etiqueta amb el control del formulari i permet als usuaris de ratolí, trackpad i dispositius tàctils fer clic a l’etiqueta i activar el control corresponent, i també proporciona un nom accessible per als usuaris de lectors de pantalla. Trobaràs més informació sobre les etiquetes dels formularis en l’article Com estructurar un formulari web.

- -

En l’element {{HTMLelement("input")}}, l’atribut més important és type. Aquest atribut és molt important perquè defineix la manera com apareix l’element {{HTMLelement("input")}}, i com es comporta. Trobaràs més informació més endavant, en l’article Els controls de formulari bàsics originals.

- - - -

Per últim, però no per això menys important, cal destacar la sintaxi de <input> en contraposició a <textarea></textarea>. Aquesta és una de les curiositats de l’HTML. L’etiqueta <input> és un element buit, que significa que no necessita una etiqueta de tancament. En canvi, {{HTMLElement("textarea")}} no és un element buit, és a dir, s'hauria de tancar amb l'etiqueta final adequada. Això té una conseqüència en una característica específica dels formularis: la manera de definir el valor per defecte. Per a definir el valor predeterminat d'un element {{HTMLElement("input")}} has d'utilitzar l'atribut value de la manera següent:

- -
<input type="text" value="per defecte aquest element s'omple amb aquest text">
- -

D'altra banda, si vols definir un valor predeterminat per a un {{HTMLElement("textarea")}}, l'has de posar entre les etiquetes d'obertura i tancament de l'element {{HTMLElement("textarea")}}, com en el cas següent:

- -
<textarea>
-per defecte aquest element s'omple amb aquest text
-</textarea>
- -

L’element {{HTMLelement("button")}}

- -

L'etiquetatge del nostre formulari és gairebé complet; només haurem d’afegir un botó que permeti a l’usuari enviar les dades un cop emplenat el formulari. Això es fa amb l’element {{HTMLelement("button")}}; afegeix el següent just a sobre de l’etiqueta de tancament </form>:

- -
<li class="button">
-  <button type="submit">Envia el teu missatge</button>
-</li>
- -

L’element {{htmlelement("button")}} també accepta un atribut type, que a la vegada accepta un d'aquests tres valors: submit, reset o button.

- - - -
-

Nota: També pots utilitzar l’element {{HTMLElement("input")}} amb el type corresponent i crear un botó, per exemple <input type="submit">. L’avantatge principal de l’element {{HTMLelement("button")}} és que l’element {{HTMLelement("input")}} només admet text, mentre que l’element {{HTMLelement("button")}} admet contingut HTML complet i permet dissenyar botons més complexos i creatius.

-
- -

Nocions bàsiques d’aplicació d’estil a formularis

- -

Ara que has acabat d'escriure el codi HTML del teu formulari, desa’l i obre’l en un navegador. Observa que, de moment, presenta un aspecte més aviat lleig.

- -
-

Nota: Si creus que el teu codi HTML no és correcte, compara’l amb el nostre exemple acabat: consulta el fitxer first-form.html (també pots consultar l’exemple en viu).

-
- -

Aplicar estil a un formulari perquè quedi bé no és gens fàcil. En aquest article no t’ensenyarem a aplicar-hi estil de manera detallada; de moment, només afegirem una mica de CSS perquè sigui presentable.

- -

Abans de res, afegeix un element {{htmlelement("style")}} a la teva pàgina, en la capçalera de l’HTML. Hi hauria d’haver una cosa com aquesta:

- -
<style>
-
-</style>
- -

Afegeix a l'etiqueta style el CSS següent:

- -
form {
-  /* Centra el formulari a la pàgina */
-  margin: 0 auto;
-  width: 400px;
-  /* Esquema de formulari */
-  padding: 1em;
-  border: 1px solid #CCC;
-  border-radius: 1em;
-}
-
-ul {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-form li + li {
-  margin-top: 1em;
-}
-
-label {
-  /* Mida i alineació uniforme */
-  display: inline-block;
-  width: 90px;
-  text-align: right;
-}
-
-input,
-textarea {
-  / * Per garantir que tots els camps de text tenen la mateixa configuració de tipus de lletra
-     de manera predeterminada, les àrees de text tenen un tipus de lletra monospai */
-  font: 1em sans-serif;
-
-  /* Mida uniforme del camp de text */
-  width: 300px;
-  box-sizing: border-box;
-
-  /* Vores del camp de formulari */
-  border: 1px solid #999;
-}
-
-input:focus,
-textarea:focus {
-  /* Destacat addicional per a elements enfocats */
-  border-color: #000;
-}
-
-textarea {
-  /* Alinea els camps de text multilínies amb les seves etiquetes */
-  vertical-align: top;
-
-  /* Proporciona espai per a escriure algun text */
-  height: 5em;
-}
-
-.button {
-  /* Alinea els botons amb els camps de text */
-  padding-left: 90px; /* la mateixa mida que els elements d'etiqueta */
-}
-
-button {
-  /* Aquest marge addicional representa aproximadament el mateix espai que l’espai
-     entre les etiquetes i els seus camps de text */
-  margin-left: .5em;
-}
- -

Desa’l i torna’l a carregar i observa que el teu formulari no s’hauria de veure tan lleig com abans.

- -
-

Nota: Pots trobar la nostra versió a GitHub, en el fitxer first-form-styled.html (o consultar l’exemple en viu).

-
- -

Enviar les dades del formulari al servidor web

- -

L’última part, i potser la més complicada, és tractar les dades del formulari del costat del servidor. L’element {{HTMLelement("form")}} defineix on i com enviar les dades amb els atributs action i method.

- -

Proporcionem un nom (name) a cada control de formulari. Els noms són importants tant del costat del client com del costat del servidor; informen el navegador sobre quin nom ha de donar a cadascuna de les dades i, del costat del servidor, permeten tractar cada dada pel nom. Les dades del formulari s’envien al servidor com a parells de nom/valor.

- -

Per posar el nom a les dades d'un formulari, has d'utilitzar l'atribut name en cada control de formulari que recopilarà una informació específica. Vegem de nou una mica de codi del nostre formulari:

- -
<form action="/my-handling-form-page" method="post">
- <ul>
-  <li>
-    <label for="name">Nom:</label>
-    <input type="text" id="name" name="user_name" />
-  </li>
-  <li>
-    <label for="mail">Correu electrònic:</label>
-    <input type="email" id="mail" name="user_email" />
-  </li>
-  <li>
-    <label for="msg">Missatge:</label>
-    <textarea id="msg" name="user_message"></textarea>
-  </li>
-
-  ...
-
- -

En el nostre exemple, el formulari enviarà 3 blocs de dades anomenats «user_name», «user_email» i «user_message». Aquestes dades s’enviaran a l’URL «/my-handling-form-page» pel mètode post de HTTP .

- -

De la banda del servidor, l'script a l'URL «/my-handling-form-page» rebrà les dades com una llista de 3 elements clau/valor continguts en la sol·licitud HTTP. La manera de gestionar aquest script depèn de les dades. Cada llenguatge de servidor (PHP, Python, Ruby, Java, C#, etc.) té el seu mecanisme propi per al tractament de les dades de formulari. Està fora de l’àmbit d’aquest article aprofundir en aquest tema, però si vols saber-ne més, et proporcionem alguns exemples en el nostre article Enviar les dades d’un formulari web que trobaràs més endavant.

- -

Resum

- -

Enhorabona!, has creat el teu primer formulari web. Hauria de presentar un aspecte semblant a aquest:

- -

{{ EmbedLiveSample('A_simple_form', '100%', '240', '', '/en-US/Learn/Forms/Your_first_form/Example') }}

- -

Això només és el començament; ara toca aprofundir. Els formularis tenen molt més poder que el que hem vist aquí i la resta d'articles d'aquest mòdul t'ajudaran a dominar-los.

- -

{{NextMenu("Learn/Forms/How_to_structure_a_web_form", "Learn/Forms")}}

- -

En aquest mòdul

- - - -

Temes avançats

- - diff --git a/files/ca/learn/html/forms/index.html b/files/ca/learn/html/forms/index.html deleted file mode 100644 index bfd01dcf91..0000000000 --- a/files/ca/learn/html/forms/index.html +++ /dev/null @@ -1,356 +0,0 @@ ---- -title: HTML forms guide -slug: Learn/HTML/Forms -tags: - - Featured - - Formularis - - Guía - - HTML - - Web -translation_of: Learn/Forms ---- -

Aquesta guia és una sèrie d'articles que l'ajudaran a dominar els formularis HTML. Els formularis HTML són una eina molt potent per interactuar amb els usuaris; No obstant això, per raons històriques i tècniques, no sempre és obvi com usar-los al seu màxim potencial. En aquesta guia, anem a cobrir tots els aspectes dels formularis HTML, des de donar estil a l'estructura, des de la manipulació de dades amb components personalitzats. Aprendràs a gaudir de la gran potència que ofereixen!

- -

Articles

- -
    -
  1. El meu primer formulari HTML
    2. -
  2. Com estructurar un formulari HTML
    3. -
  3. Formularis widgets nadius
    4. -
  4. CSS amb formularis HTML -
      -
    1. Estil en formularis HTML
      2. -
    2. Estils avançats en formularis HTML
      3. -
    3. Taula de propietats compatibles per formularis widgets
      4. -
    -
    5. -
  5. Enviar y recuperar dades del formulari
    6. -
  6. Validació de dades del formulari
    7. -
  7. Contruir formularis widgets personalitzats
    8. -
  8. Enviament de formularis amb JavaScript -
      -
    1. Utilitzant l'objecte FormData
      2. -
    -
    9. -
  9. Formularis HTML en navegadors antics
    10. -
- -

Documentació HTML

- -

Elements HTML

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ElementInterfície DOM relacionatDescripció
{{HTMLElement("button")}}{{domxref("HTMLButtonElement")}}L'element button representa un botó que es premi.
{{HTMLElement("datalist")}}{{domxref("HTMLDataListElement")}}L'element datalist conté un conjunt d'elements {{ HTMLElement("option") }} que representen les opcions possibles per al valor d'altres elements de formulari.
{{HTMLElement("fieldset")}}{{domxref("HTMLFieldSetElement")}}El fieldset s'utilitza per agrupar diversos elements formulari dins d'un formulari.
{{HTMLElement("form")}}{{domxref("HTMLFormElement")}}L'element form representa una secció del document que conté l'element interactiu que permet a un usuari enviar informació a un servidor web.
{{HTMLElement("input")}}{{domxref("HTMLInputElement")}}L'element input s'utilitza per crear controls interactius per als formularis.
{{HTMLElement("keygen")}}{{domxref("HTMLKeygenElement")}}L'element keygen existeix per facilitar la generació de material clau, i l'enviament de la clau pública com a part d'un formulari HTML
{{HTMLElement("label")}}{{domxref("HTMLLabelElement")}}L'element label representa un títol d'un article en una interfície d'usuari
{{HTMLElement("legend")}}{{domxref("HTMLLegendElement")}}L'element legend representa una llegenda per al contingut del seu pare {{ HTMLElement("fieldset") }}.
{{HTMLElement("meter")}}{{domxref("HTMLMeterElement")}}L'element metre representa o bé un valor escalar dins d'un rang conegut o un valor fraccionari.
{{HTMLElement("optgroup")}}{{domxref("HTMLOptGroupElement")}}l'element optgroup crea un grup d'opcions dins d'un element {{ HTMLElement("select") }} element.
{{HTMLElement("option")}}{{domxref("HTMLOptionElement")}}l'element HTML option  s'utilitza per crear un control que representa un element dins d'un element {{ HTMLElement("select") }}, o un {{ HTMLElement("optgroup") }} o un {{ HTMLElement("datalist") }}.
{{HTMLElement("output")}}{{domxref("HTMLOutputElement")}}L'element output representa el resultat d'un càlcul.
{{HTMLElement("progress")}}{{domxref("HTMLProgressElement")}}L'element progress s'utilitza per veure el progrés de la finalització d'una tasca.
{{HTMLElement("select")}}{{domxref("HTMLSelectElement")}}L'element select representa un control que presenta un menú d'opcions.
{{HTMLElement("textarea")}}{{domxref("HTMLTextAreaElement")}}L'element textarea representa un control d'edició de text pla multilínia.
- -
-

Nota: Tots els elements formulari, com tots els elements d'HTML, suportan la interfície DOM {{domxref("HTMLElement")}}.

-
- -

Atributs HTML

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Nom AtributElementsDescripció
accept{{ HTMLElement("form") }}, {{ HTMLElement("input") }}Llista de tipus que accepta el servidor, normalment un tipus de fitxer.
accept-charset{{ HTMLElement("form") }}Llista de jocs de caràcters suportats.
action{{ HTMLElement("form") }}L'URI d'un programa que processa la informació presentada a través del formulari.
autocomplete{{ HTMLElement("form") }}, {{ HTMLElement("input") }}Indica si els controls d'aquest formulari poden tenir per defecte els seus valors emplenats automàticament pel navegador.
autofocus{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}L'element ha de tenir el focus automàticament després de carregar la pàgina.
challenge{{ HTMLElement("keygen") }}Una cadena proposada que es presenta juntament amb la clau pública.
checked{{ HTMLElement("input") }}Indica si l'element s'ha de comprovar en carregar la pàgina.
cols{{ HTMLElement("textarea") }}Defineix el nombre de columnes en una àrea de text.
data{{ HTMLElement("object") }}Especifica l'adreça URL del recurs.
dirname{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }} 
disabled{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indica si l'usuari pot interactuar amb l'element.
enctype{{ HTMLElement("form") }}Defineix el tipus de contingut de les dades del formulari quan el mètode és POST.
for{{ HTMLElement("label") }}, {{ HTMLElement("output") }}Descriu els elements que pertanyen a aquest.
form{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indica el formulari que és el propietari de l'element.
high{{ HTMLElement("meter") }}Indica el límit inferior del rang superior.
keytype{{ HTMLElement("keygen") }}Especifica el tipus de clau generada.
list{{ HTMLElement("input") }}Identifica una llista d'opcions predefinides per suggerir a l'usuari.
low{{ HTMLElement("meter") }}Indica el límit superior del rang inferior.
max{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}Indica el valor màxim permès.
maxlength{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Defineix el nombre màxim de caràcters permesos en l'element.
method{{ HTMLElement("form") }}Defineix quin mètode HTTP a utilitzar al enviar el formulari. Pot ser GET (per defecte) o POST.
min{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}Indica el valor mínim permès.
multiple{{ HTMLElement("input") }}, {{ HTMLElement("select") }}Indica si diversos valors es poden introduir en una entrada del correu electrònic o tipus  arxiu.
name{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Nom de l'element. Per exemple el usat en el servidor per identificar els camps de formulari enviat.
novalidate{{ HTMLElement("form") }}Aquest atribut indica que el formulari no ha de ser validat quan sigui enviat.
optimum{{ HTMLElement("meter") }}Indica el valor numèric òptim.
pattern{{ HTMLElement("input") }}Defineix una expressió regular que es validarà el valor de l'element en contra.
placeholder{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Proporciona un suggeriment a l'usuari de què es poden introduir en el camp.
readonly{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Indica si l'element pot ser editat o no.
required{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indica si es requereix aquest element per omplir o no.
rows{{ HTMLElement("textarea") }}Defineix el nombre de files en una àrea de text.
selected{{ HTMLElement("option") }}Defineix un valor que serà seleccionat en carregar la pàgina.
size{{ HTMLElement("input") }}, {{ HTMLElement("select") }}Defineix l'amplada de l'element (en píxels). Si el atribut type de l'element és text o contrasenya, llavors és el nombre de caràcters.
src{{ HTMLElement("img") }}La URL del contingut integrable.
step{{ HTMLElement("input") }} 
target{{ HTMLElement("form") }} 
type{{ HTMLElement("button") }}, {{ HTMLElement("input") }}Defineix el tipus d'element.
usemap{{ HTMLElement("img") }} 
value{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}Defineix un valor predeterminat que es mostrarà en l'element en la càrrega de la pàgina.
wrap{{ HTMLElement("textarea") }}Indica si el text ha de ser embolicat o no.
- -

Referència normativa

- - diff --git a/files/ca/learn/html/forms/validacio_formularis/index.html b/files/ca/learn/html/forms/validacio_formularis/index.html deleted file mode 100644 index 0b76183d7e..0000000000 --- a/files/ca/learn/html/forms/validacio_formularis/index.html +++ /dev/null @@ -1,829 +0,0 @@ ---- -title: Validació de formularis del costat del client -slug: Learn/HTML/Forms/Validacio_formularis -translation_of: Learn/Forms/Form_validation ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Forms/UI_pseudo-classes", "Learn/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}
- -

Abans d’enviar dades al servidor és important assegurar-se que s’emplenen tots els controls de formulari necessaris en el format correcte. Es denomina validació de formularis del costat del client, i ajuda que les dades enviades coincideixin amb els requisits establerts en els diversos controls de formulari. Aquest article et permet conèixer els conceptes bàsics i veure exemples de validació de formularis del costat del client.

- - - - - - - - - - - - -
Prerequisits:Coneixements bàsics d'informàtica i nocions d'HTML, CSS i JavaScript.
Objectiu:Entendre què és la validació de formularis de costat del client, per què és important i conèixer-ne diverses tècniques d’implementació.
- -

La validació del costat del client és una comprovació inicial i una característica important que garanteix una bona experiència d’usuari; si es detecten dades no vàlides del costat del client, l'usuari pot corregir-les immediatament. Si van al servidor i aquest les rebutja, es genera un retard perquè les dades s’envien de tornada a la banda del client perquè l'usuari les corregeixi.

- -

Tanmateix, la validació del costat del client no s'ha de considerar una mesura de seguretat exhaustiva. Les aplicacions sempre han de dur a terme comprovacions de seguretat de qualsevol informació que s’envia en un formulari tant del costat del servidor com també del costat del client, perquè la validació del client és molt fàcil de desactivar i qualsevol usuari maliciós pot enviar fàcilment dades incorrectes al teu servidor. Llegeix La seguretat dels llocs web per a fer-te una idea de què podria passar; implementar la validació del costat del servidor és fora de l’àmbit d’aquest mòdul, però l’has de tenir en compte.

- -

Què és la validació de formularis?

- -

Ves a qualsevol lloc web popular que tingui un formulari d’inscripció i observa que et fan comentaris quan no introdueixes les dades en el format que s’espera. Rebràs missatges com ara:

- - - -

Això es coneix com validació de formulari. Quan introdueixes dades, el navegador i/o el servidor web comproven que les dades estan en el format correcte i són dins de les restriccions que l’aplicació estableix. La validació que es fa en el navegador s’anomena validació del costat del client, mentre que la validació que es fa en el servidor s’anomena validació del costat del servidor. En aquest article ens centrem en la validació del costat del client.

- -

Si la informació està en el format correcte, l'aplicació permet que les dades que les dades s’enviïn al servidor i (normalment) es guarden en una base de dades; si la informació no té el format correcte, es proporciona a l'usuari un missatge d'error en què li explica què ha de corregir, i s'ha de tornar a provar.

- -

Volem fer que l’emplenament dels formularis web sigui tan fàcil com sigui possible. Aleshores, per què insistim que cal validar els nostres formularis? Hi ha tres raons principals:

- - - -

Els diferents tipus de validació del costat del client

- -

Els llocs web poden presentar dos tipus diferents de validació del costat del client

- - - -

Ús de la validació de formulari integrada

- -

Una de les característiques més significatives dels controls de formulari HTML5 és la capacitat de validar la majoria de les dades de l'usuari sense dependre de JavaScript. Això es fa gràcies als atributs de validació dels elements del formulari. Ja n'hem vist uns quants, però en fem una recapitulació:

- - - -

Si les dades que s’introdueixen en un camp de formulari segueixen les regles especificades pels atributs anteriors, es consideren vàlides. Si no és així, es consideren no vàlides.

- -

Quan un element és vàlid, es compleixen els aspectes següents:

- - - -

Quan un element no és vàlid, es verifica el següent:

- - - -
-

Nota: Els diversos errors que impedeixen enviar el formulari inclouen {{domxref('validityState.badInput', 'badInput')}}, {{domxref('validityState.patternMismatch','patternMismatch')}}, {{domxref('validityState.rangeOverflow','rangeOverflow')}} o {{domxref('validityState.rangeUnderflow','rangeUnderflow')}}, {{domxref('validityState.stepMismatch','stepMismatch')}}, {{domxref('validityState.tooLong','tooLong')}} o {{domxref('validityState.tooShort','tooShort')}}, {{domxref('validityState.typeMismatch','typeMismatch')}}, {{domxref('validityState.valueMissing','valueMissing')}}, o {{domxref('validityState.customError','customError')}}.

-
- -

Exemples de validació de formularis integrada

- -

En aquesta secció provarem alguns dels atributs que hem esmentat abans.

- -

Un fitxer d’inici senzill

- -

Comencem amb un exemple senzill: una entrada que permet triar si prefereixes un plàtan o una cirera. Aquest exemple inclou una entrada de text {{HTMLElement("input")}} senzilla amb una etiqueta {{htmlelement("label")}} associada i un {{htmlelement("button")}} de validació. En pots trobar el codi d’origen a GitHub, en el fitxer fruit-start.html, i l’exemple en viu a continuació.

- -
<form>
-  <label for="choose">Would you prefer a banana or a cherry?</label>
-  <input id="choose" name="i_like">
-  <button>Submit</button>
-</form>
- -
input:invalid {
-  border: 2px dashed red;
-}
-
-input:valid {
-  border: 2px solid black;
-}
- -

{{EmbedLiveSample("Un_fitxer_d’inici_senzill", "100%", 80)}}

- -

Per començar, fes una còpia del fitxer fruit-start.html en un directori nou del teu disc dur.

- -

L’atribut required

- -

La característica de validació HTML5 més simple és l’atribut required (obligatori). Afegeix aquest atribut a l'element si vols que una entrada sigui obligatòria. Quan es defineix aquest atribut, l'element coincideix amb la pseudoclasse {{cssxref(':required')}} de la interfície d'usuari i el formulari no s’envia; si l'entrada és buida, en el moment de validar mostra un missatge d'error. L’entrada, tot i que és buida, es considera no vàlida i coincideix amb la pseudoclasse de la interfície d'usuari {{cssxref(':invalid')}}.

- -

Afegeix un atribut required a la teva entrada, com es mostra a continuació.

- -
<form>
-  <label for="choose">Would you prefer a banana or a cherry? (requested)</label>
-  <input id="choose" name="i_like" required>
-  <button>Submit</button>
-</form>
- -

Tingues en compte el CSS que s'ha inclòs en el fitxer d'exemples:

- -
input:invalid {
-  border: 2px dashed red;
-}
-
-input:invalid:required {
-  background-image: linear-gradient(to right, pink, lightgreen);
-}
-
-input:valid {
-  border: 2px solid black;
-}
- -

Aquest CSS afegeix una vora vermella quan l’entrada no és vàlida i una vora negra més subtil quan és vàlida. També hi afegeix un degradat de fons quan l’entrada és necessària i no vàlida. Prova’n el comportament nou en l'exemple següent:

- -

{{EmbedLiveSample("L’atribut_required", "100%", 80)}}

- -
-

Nota: Pots trobar aquest exemple en directe a GitHub en el fitxer fruit-validation.html (consulta’n també el codi d’origen.)

-
- -

Prova de validar el formulari sense cap valor. Observa que l’entrada no vàlida pren el focus, apareix un missatge d’error per defecte («Emplena aquest camp») i el formulari no s’envia.

- -

La presència de l'atribut required en qualsevol element que admet aquest atribut significa que l'element coincideix amb la pseudoclasse {{cssxref(':required')}}, tant si té un valor com si no. Si {{HTMLElement("input")}} no té cap valor, l’element input coincideix amb la pseudoclasse {{cssxref(':invalid')}}.

- -
-

Nota: Si vols oferir una bona experiència d'usuari, indica quan són obligatoris els camps de formulari. No és només una bona experiència d’usuari, sinó que ho demanen les directrius d’accessibilitat de WCAG. A més, demana només les dades que necessites realment. Per què necessites saber, per exemple, el gènere o el títol d’algú?

-
- -

Validar una expressió regular

- -

Una altra característica útil de la validació és l’atribut pattern, que espera una expressió regular com a valor. Una expressió regular (regex) és un patró que es pot utilitzar per a establir combinacions de caràcters en cadenes de text, de manera que resulten ideals per a la validació de formularis i serveixen per a molts altres usos en JavaScript.

- -

Els regex són força complexos i no pretenem ensenyar-los exhaustivament en aquest article. A continuació te’n mostrem alguns exemples perquè et puguis fer una idea bàsica de com funcionen.

- - - -

Hi ha moltes més possibilitats, que no presentem aquí. Per a obtenir-ne una llista completa i molts exemples, consulta la nostra documentació sobre expressions regulars.

- -

Posem-ho en pràctica amb un exemple. Afegeix al teu codi HTML un atribut pattern, d'aquesta manera:

- -
<form>
-  <label for="choose">Would you prefer a banana or a cherry?</label>
-  <input id="choose" name="i_like" required pattern="[Bb]anana|[Cc]herry">
-  <button>Submit</button>
-</form>
-
- - - -

Això ens proporciona l’actualització següent. Prova-ho:

- -

{{EmbedLiveSample("Validar_una_expressió_regular", "100%", 80)}}

- -
-

Nota: Pots trobar aquest exemple en directe a GitHub en el fitxer fruit-pattern.html (consulta’n també el codi d’origen).

-
- -

En aquest exemple, l’element {{HTMLElement("input")}} accepta un dels quatre valors possibles: les cadenes «banana», «Banana», «cherry» o «Cherry». Les expressions regulars distingeixen entre majúscules i minúscules, però hem eliminat aquesta característica utilitzant un patró «Aa» extra situat entre claudàtors.

- -

En aquest punt, intenta canviar el valor de l’atribut pattern per a igualar alguns dels exemples que has vist abans, i observa com això afecta els valors que pots introduir perquè que el valor d’entrada sigui vàlid. Prova d'escriure-hi alguna cosa i observa què passa. Intenta tant com sigui possible que estiguin relacionats amb la fruita perquè els teus exemples siguin coherents.

- -

Si un valor {{HTMLElement("input")}} no buit no coincideix amb el patró de l'expressió regular, input coincideix amb la pseudoclasse {{cssxref(':invalid')}}.

- -
-

Nota: Alguns tipus d'elements {{HTMLElement("input")}} no necessiten validar una expressió regular amb l’atribut pattern. Si especifiques el tipus email, per exemple, el valor d’entrada es valida amb un patró d’adreça de correu electrònic ben formada, o amb un patró que coincideix amb una llista d’adreces de correu electrònic separades per comes si té l’atribut multiple.

-
- -
-

Nota: L'element {{HTMLElement("textarea")}} no admet l'atribut pattern.

-
- -

Restringir la longitud de les entrades

- -

Pots restringir la longitud de caràcters de tots els camps de text creats amb {{HTMLElement("input")}} o {{HTMLElement("textarea")}} amb els atributs minlength i maxlength. Un camp no és vàlid si té un valor que té menys caràcters que el valor assignat a minlength, o més que el valor assignat a maxlength.

- -

Els navegadors sovint no permeten que l'usuari escrigui un valor més llarg del que s'espera en els camps de text. Una experiència d’usuari encara més bona que utilitzar només maxlength és proporcionar també comentaris de recompte de caràcters d’una manera accessible, i deixar editar el contingut fins que sigui d’una mida més reduïda. Un exemple d'això és el límit de caràcters de Twitter. Per a això pots utilitzar JavaScript, incloses les solucions que fan servir maxlength.

- -

Restringir els valors de les entrades

- -

Per als camps d’entrada de números (és a dir, <input type="number">), es poden utilitzar els atributs min i max, que proporcionen un rang de valors vàlids. Un camp que conté un valor que cau fora d'aquest interval no és vàlid.

- -

Observem-ne un altre exemple. Crea una còpia nova del fitxer fruit-start.html.

- -

A continuació suprimeix el contingut de l'element <body> i substitueix-lo pel següent:

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

Aquí tens l’execució en viu de l’exemple:

- -

{{EmbedLiveSample("Restringir_els_valors_de_les_entrades", "100%", 100)}}

- -
-

Nota: Pots trobar aquest exemple en viu a GitHub en el fitxer fruit-length.html (o també consultar-ne el codi d’origen.)

-
- -
-

Nota: <input type="number"> (i altres tipus, com ara range i date) també poden tenir un atribut step, que especifica quin increment augmenta o disminueix el valor quan s'utilitzen els controls d'entrada (com ara els botons numèrics d’increment i decrement). En l'exemple anterior no hem inclòs un atribut step, de manera que el valor per defecte és 1. Això vol dir que els números de coma flotant (com ara el 3,2) també es mostren com a no vàlids.

-
- -

Exemple complet

- -

A continuació hi ha un exemple complet que mostra l'ús de les funcions de validació integrades en HTML. En primer lloc, una mica d'HTML:

- -
<form>
-  <p>
-    <fieldset>
-      <legend>Do you have a driver's license?<abbr title="This field is mandatory" aria-label="required">*</abbr></legend>
-      <!-- While only one radio button in a same-named group can be selected at a time,
-           and therefore only one radio button in a same-named group having the "required"
-           attribute suffices in making a selection a requirement -->
-      <input type="radio" required name="driver" id="r1" value="yes"><label for="r1">Yes</label>
-      <input type="radio" required name="driver" id="r2" value="no"><label for="r2">No</label>
-    </fieldset>
-  </p>
-  <p>
-    <label for="n1">How old are you?</label>
-    <!-- The pattern attribute can act as a fallback for browsers which
-         don't implement the number input type but support the pattern attribute.
-         Please note that browsers that support the pattern attribute will make it
-         fail silently when used with a number field.
-         Its usage here acts only as a fallback -->
-    <input type="number" min="12" max="120" step="1" id="n1" name="age"
-           pattern="\d+">
-  </p>
-  <p>
-    <label for="t1">What's your favorite fruit?<abbr title="This field is mandatory" aria-label="required">*</abbr></label>
-    <input type="text" id="t1" name="fruit" list="l1" required
-           pattern="[Bb]anana|[Cc]herry|[Aa]pple|[Ss]trawberry|[Ll]emon|[Oo]range">
-    <datalist id="l1">
-      <option>Banana</option>
-      <option>Cherry</option>
-      <option>Apple</option>
-      <option>Strawberry</option>
-      <option>Lemon</option>
-      <option>Orange</option>
-    </datalist>
-  </p>
-  <p>
-    <label for="t2">What's your e-mail address?</label>
-    <input type="email" id="t2" name="email">
-  </p>
-  <p>
-    <label for="t3">Leave a short message</label>
-    <textarea id="t3" name="msg" maxlength="140" rows="5"></textarea>
-  </p>
-  <p>
-    <button>Submit</button>
-  </p>
-</form>
- -

I ara, una mica de CSS per a aplicar estil al codi HTML:

- -
form {
-  font: 1em sans-serif;
-  max-width: 320px;
-}
-
-p > label {
-  display: block;
-}
-
-input[type="text"],
-input[type="email"],
-input[type="number"],
-textarea,
-fieldset {
-  width: 100%;
-  border: 1px solid #333;
-  box-sizing: border-box;
-}
-
-input:invalid {
-  box-shadow: 0 0 5px 1px red;
-}
-
-input:focus:invalid {
-  box-shadow: none;
-}
- -

Això dona la sortida següent:

- -

{{EmbedLiveSample("Exemple_complet", "100%", 420)}}

- -

Consulta una llista completa d’atributs que es poden utilitzar per a restringir els valors d’entrada i els tipus d’entrada que els admeten en els atributs relacionats amb la validació.

- -
-

Nota: Pots trobar aquest exemple en viu a GitHub, en el fitxer full-example.html (o consultar-ne també el codi d’origen).

-
- -

Validació de formularis amb JavaScript

- -

Has d’utilitzar JavaScript si vols controlar l’aspecte dels missatges d’error originals o fer-los compatibles amb els navegadors antics que no admeten la validació de formularis integrada en HTML. En aquesta secció veurem les diferents maneres de fer això.

- -

L’API de validació de restriccions

- -

La majoria dels navegadors admeten l'API de validació de restriccions, que consta d'un conjunt de mètodes i propietats disponibles en les interfícies DOM per als elements de formulari següents:

- - - -

L’API de validació de restriccions posa a la disposició dels elements anteriors les propietats següents.

- - - -

L'API de validació de restriccions també ofereix als elements anteriors els mètodes següents:

- - - -

Missatges d’error personalitzats

- -

Com has vist en els exemples de restricció de validació HTML5 anteriors, cada vegada que un usuari intenta enviar un formulari no vàlid, el navegador mostra un missatge d'error. La manera com es mostra aquest missatge depèn del navegador.

- -

Aquests missatges automatitzats tenen dos inconvenients:

- - - -

Exemple d’un missatge d’error a Firefox en francès en una pàgina en anglès

- -

La personalització d’aquests missatges d’error és un dels casos d’ús més comuns de l’API de validació de restriccions. Vegem la manera de fer-ho amb un exemple senzill.

- -

Començarem amb alguns elements senzills d’HTML (no dubtis a posar-ho en un fitxer HTML en blanc; utilitza una còpia nova del fitxer fruit-start.html com a base, si vols):

- -
<form>
-  <label for="mail">I would like you to provide me with an e-mail address: </label>
-  <input type="email" id="mail" name="mail">
-  <button>Submit</button>
-</form>
- -

I afegeix a la pàgina el JavaScript següent:

- -
const email = document.getElementById("mail");
-
-email.addEventListener("input", function (event) {
-  if (email.validity.typeMismatch) {
-    email.setCustomValidity(«I am expecting an e-mail address!»);
-  } else {
-    email.setCustomValidity("");
-  }
-});
- -

Aquí emmagatzemem una referència a l’entrada de correu electrònic, i a continuació afegim un detector d’esdeveniments que executa el codi de content cada vegada que es modifica el valor dins de l’entrada.

- -

Dins del codi de content, comprovem si la propietat validity.typeMismatch de l’entrada de correu electrònic retorna true, que significa que el valor que conté no coincideix amb el patró d’una adreça de correu electrònic ben formada. Si és així, cridem el mètode setCustomValidity() amb un missatge personalitzat. Això fa que l’entrada no sigui vàlida, de manera que quan intentes enviar el formulari, l’enviament falla i es mostra el missatge d’error personalitzat.

- -

Si la propietat validity.typeMismatch retorna false, cridem el mètode setCustomValidity() amb una cadena buida. Això fa que l’entrada sigui vàlida, i el formulari s’envia.

- -

Pots provar-ho a continuació:

- -

{{EmbedGHLiveSample("learning-area/html/forms/form-validation/custom-error-message.html", '100%', 80)}}

- -
-

Nota: Pots trobar aquest exemple en viu a GitHub en el fitxer custom-error-message.html (consulta’n també el codi d’origen).

-
- -

Un exemple més detallat

- -

Ara que hem vist un exemple molt senzill; observem com podem utilitzar aquesta API per a crear una validació personalitzada una mica més complexa.

- -

En primer lloc, el codi HTML. Un cop més, no dubtis a construir-lo amb nosaltres:

- -
<form novalidate>
-  <p>
-    <label for="mail">
-      <span>Please enter an email address:</span>
-      <input type="email" id="mail" name="mail" required minlength="8">
-      <span class="error" aria-live="polite"></span>
-    </label>
-  </p>
-  <button>Submit</button>
-</form>
- -

Aquest formulari senzill utilitza l’atribut novalidate, que desactiva la validació automàtica del navegador; això permet que el nostre codi prengui el control de la validació. Però això no desactiva la compatibilitat per a l’API de validació de restriccions ni l’aplicació de pseudoclasses CSS com {{cssxref(":valid")}}, etc. Això vol dir que, tot i que el navegador no comprova automàticament la validesa del formulari abans d’enviar les dades, encara pots fer-ho tu mateix i dissenyar el formulari en conseqüència.

- -

La nostra entrada per validar és <input type="email">, que està marcada com a required i té una longitud mínima (minlength) de 8 caràcters. Comprovem-ho amb el nostre codi i mostrem un missatge d'error personalitzat per a cada element.

- -

El nostre objectiu és mostrar els missatges d'error dins d'un element <span>. L'atribut aria-live està establert a <span> per a assegurar-nos que el missatge d'error personalitzat serà visible per a tothom, inclosos els usuaris que empren lectors de pantalla.

- -
-

Nota: Un element clau aquí és el fet que establir l’atribut novalidate en el formulari impedeix el formulari de mostrar els quadres de diàleg de missatge d’error propis, i permet de mostrar els missatges d’error personalitzats en el DOM de la manera que escollim.

-
- -

Ara una mica de CSS bàsic per a millorar una mica l’aspecte del formulari i proporcionar informació visual quan les dades d’entrada no són vàlides:

- -
body {
-  font: 1em sans-serif;
-  width: 200px;
-  padding: 0;
-  margin : 0 auto;
-}
-
-p * {
-  display: block;
-}
-
-input[type=email]{
-  -webkit-appearance: none;
-  appearance: none;
-
-  width: 100%;
-  border: 1px solid #333;
-  margin: 0;
-
-  font-family: inherit;
-  font-size: 90%;
-
-  box-sizing: border-box;
-}
-
-/* Aquest és el nostre estil per als camps no vàlids */
-input:invalid{
-  border-color: #900;
-  background-color: #FDD;
-}
-
-input:focus:invalid {
-  outline: none;
-}
-
-/* Aquest és l'estil per als nostres missatges d'error */
-.error {
-  width  : 100%;
-  padding: 0;
-
-  font-size: 80%;
-  color: white;
-  background-color: #900;
-  border-radius: 0 0 5px 5px;
-
-  box-sizing: border-box;
-}
-
-.error.active {
-  padding: 0.3em;
-}
- -

A continuació veurem el JavaScript que implementa la validació d'errors personalitzada.

- -
// Hi ha moltes maneres de triar un node DOM; amb aquest obtenim el formulari en si i el control de formulari de tipus caixa d’entrada
-// de correu electrònic, i també l’element span en què col·locarem el missatge d’error.
-const form  = document.getElementsByTagName('form')[0];
-
-const email = document.getElementById('mail');
-const emailError = document.querySelector('#mail + span.error');
-
-email.addEventListener('input', function (event) {
-  // Cada vegada que l’usuari escriu alguna cosa, comprovem si els
-  // camps del formulari són vàlids.
-
-  if (email.validity.valid) {
-    // En cas que hi hagi un missatge d’error visible, si el camp
-    // és vàlid, n’eliminem el missatge d'error.
-    emailError.innerHTML = ''; // Restablim el contingut del missatge
-    emailError.className = 'error'; // Restablim l'estat visual del missatge
-  } else {
-    // Si encara hi ha un error, mostrem l'error correcte
-    ShowError();
-  }
-});
-
-form.addEventListener('submit', function (event) {
-  // si el camp de correu electrònic és vàlid, enviem el formulari
-
-  if(!email.validity.valid) {
-    // Si no és així, mostrem el missatge d'error corresponent
-    showError();
-    // Aleshores, cancel·lem l’esdeveniment i evitem que s’enviï el formulari
-    event.preventDefault();
-  }
-});
-
-function showError() {
-  if(email.validity.valueMissing) {
-    // Si el camp està buit
-    // mostra el missatge d'error següent.
-    emailError.textContent = 'You need to enter an e-mail address.';
-  } else if(email.validity.typeMismatch) {
-    // Si el camp no conté una adreça de correu electrònic
-    // mostra el missatge d'error següent.
-    emailError.textContent = 'Entered value needs to be an e-mail address.';
-  } else if(email.validity.tooShort) {
-    // Si les dades són massa curtes
-    // mostra el missatge d'error següent.
-    emailError.textContent = `el correu electrònic ha de tenir com a mínim $ {email.minLength} caràcters; n'heu introduït $ {email.value.length}. ';
-  }
-
-  // Configura l’estil de manera adequada
-  emailError.className = 'error active';
-}
- -

Els comentaris expliquen les coses força bé, però de manera breu:

- - - -

Aquest és el resultat en viu:

- -

{{EmbedGHLiveSample("learning-area/html/forms/form-validation/detailed-custom-validation.html", '100%', 150)}}

- -
-

Nota: Pots trobar aquest exemple en viu a GitHub en el fitxer detailed-custom-validation.html (consulta’n també el codi d’origen).

-
- -

L'API de validació de restriccions t’ofereix una eina poderosa per a gestionar la validació de formularis i et proporciona un gran control sobre la interfície d'usuari, més enllà del que hi pots fer només amb l’HTML i el CSS.

- -
-

Nota: Per obtenir més informació, consulta la nostra guia de validació de restriccions i la referència de l'API de validació de restriccions.

-
- -

Validació dels formularis sense una API integrada

- -

En alguns casos, com ara la compatibilitat amb navegadors antics o els controls personalitzats, no podràs o no voldràs utilitzar l'API de validació de restriccions. Aleshores pots utilitzar JavaScript per a validar el teu formulari, només que l'hauràs d’escriure.

- -

Per a validar un formulari, planteja’t unes quantes preguntes:

- -
-
Quin tipus de validació he de fer?
-
Has de determinar com validar les dades: operacions amb variables de cadena, conversió de tipus, expressions regulars, etc. Tot depèn de tu.
-
Què he de fer si el formulari no es valida?
-
Això és clarament una qüestió de la interfície d'usuari. Has de decidir com es comporta el formulari. El formulari ha d’enviar les dades igualment? Has de destacar els camps que tenen un error? Has de mostrar missatges d’error?
-
Com puc ajudar l’usuari a corregir dades no vàlides?
-
Per a reduir la frustració de l’usuari és molt important proporcionar la informació més útil possible i orientar-lo en la correcció de les entrades. Has d’oferir suggeriments anticipats perquè sàpiguen què se n’espera, i missatges d’error clars. Si vols aprofitar els requisits de la interfície d'usuari de validació de formularis, aquí tens alguns articles útils: - -
-
- -

Un exemple que no utilitza l'API de validació de restriccions

- -

A continuació es mostra una versió simplificada de l'exemple anterior que funciona amb navegadors antics.

- -

L’HTML és gairebé el mateix; només n’hem tret les funcions de validació HTML.

- -
<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>
-  <!-- Alguns navegadors antics han de tenir l’atribut «type»
-       definit explícitament com «submit» en l'element «button»
-  <button type="submit">Submit</button>
-</form>
- -

De la mateixa manera, el CSS no ha de canviar gaire; acabem de convertir la pseudoclasse {{cssxref(":invalid")}} de CSS en una classe real i hem evitat utilitzar el selector d'atributs que no funciona en Internet Explorer 6.

- -
body {
-  font: 1em sans-serif;
-  width: 200px;
-  padding: 0;
-  margin : 0 auto;
-}
-
-form {
-  max-width: 200px;
-}
-
-p * {
-  display: block;
-}
-
-input.mail {
-  -webkit-appearance: none;
-
-  width: 100%;
-  border: 1px solid #333;
-  margin: 0;
-
-  font-family: inherit;
-  font-size: 90%;
-
-  box-sizing: border-box;
-}
-
-/* Aquest és el nostre estil per als camps no vàlids */
-input.invalid{
-  border-color: #900;
-  background-color: #FDD;
-}
-
-input:focus.invalid {
-  outline: none;
-}
-
-/* Aquest és l'estil dels nostres missatges d'error */
-.error {
-  width  : 100%;
-  padding: 0;
-
-  font-size: 80%;
-  color: white;
-  background-color: #900;
-  border-radius: 0 0 5px 5px;
-  box-sizing: border-box;
-}
-
-.error.active {
-  padding: 0.3em;
-}
- -

Els grans canvis es produeixen en el codi JavaScript, que ha de fer molta més feina feixuga.

- -
// Hi ha menys maneres de seleccionar un node DOM amb navegadors antics
-const form  = document.getElementsByTagName('form')[0];
-const email = document.getElementById('mail');
-
-// A continuació es mostra un truc per a arribar al node següent d’elements germans en el DOM.
-// Això és perillós perquè pots crear fàcilment un bucle infinit.
-// En els navegadors moderns és preferible utilitzar element.nextElementSibling
-let error = email;
-while ((error = error.nextSibling).nodeType != 1);
-
-// segons l'especificació HTML5
-const emailRegExp = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
-
-// Molts navegadors antics no són compatibles amb el mètode addEventListener.
-// Aquesta és una manera senzilla de tractar això; però no n’és l’única.
-function addEvent(element, event, callback) {
-  let previousEventCallBack = element["on"+event];
-  element["on"+event] = function (e) {
-    const output = callback(e);
-
-    // Una crida que retorna «false» atura la cadena de devolució
-    // i interromp l'execució de l'esdeveniment de retorn de la crida
-    if (output === false) return false;
-
-    if (typeof previousEventCallBack === 'function') {
-      output = previousEventCallBack(e);
-      if(output === false) return false;
-    }
-  }
-};
-
-// Ara podem reconstruir la nostra restricció de validació
-// Com que no ens basem en cap pseudoclasse de CSS, hem
-// d'establir explícitament la classe vàlida/invàlida en el nostre camp de correu electrònic
-addEvent(window, "load", function () {
-  // Aquí comprovem si el camp està buit (recorda que no és un camp obligatori)
-  // Si no ho està, comprovem si el contingut és una adreça de correu electrònic ben formada.
-  const test = email.value.length === 0 || emailRegExp.test(email.value);
-
-  email.className = test ? "valid" : "invalid";
-});
-
-// Això defineix què passa quan l'usuari escriu en el camp
-addEvent(email, "input", function () {
-  const test = email.value.length === 0 || emailRegExp.test(email.value);
-  if (test) {
-    email.className = "valid";
-    error.innerHTML = "";
-    error.className = "error";
-  } else {
-    email.className = "invalid";
-  }
-});
-
-// Això defineix què passa quan l’usuari intenta enviar les dades
-addEvent(form, "submit", function () {
-  const test = email.value.length === 0 || emailRegExp.test(email.value);
-
-  if (!test) {
-    email.className = "invalid";
-    error.innerHTML = "I expect an e-mail, darling!";
-    error.className = "error active";
-
-    // Alguns navegadors antics no admeten el mètode event.preventDefault ()
-    return false;
-  } else {
-    email.className = "valid";
-    error.innerHTML = "";
-    error.className = "error";
-  }
-});
- -

El resultat és el següent:

- -

{{EmbedLiveSample("Un_exemple_que_no_utilitza_lAPI_de_validació_de_restriccions", "100%", 130)}}

- -

Com pots veure, no és tan difícil construir un sistema de validació pel teu compte. La part difícil és que sigui prou genèric perquè es pugui utilitzar tant en múltiples plataformes com en qualsevol formulari que puguis crear. Disposes de moltes biblioteques de fitxers que et permeten executar una validació de formulari, com ara Validate.js.

- -

Resum

- -

De vegades, la validació de formulari del costat del client necessita JavaScript si vols personalitzar els missatges d’estil i d’error, però sempre requereix que pensis detingudament en l’usuari. Recorda d’ajudar sempre els usuaris a corregir les dades que et proporcionen. Per a això, assegura’t de:

- - - -

Un cop comprovat que el formulari s'ha emplenat correctament, pots procedir a enviar-lo. A continuació exposarem l’enviament de les dades d’un formulari.

- -

{{PreviousMenuNext("Learn/Forms/UI_pseudo-classes", "Learn/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}

- -

En aquest mòdul

- - - -

Temes avançats

- - diff --git a/files/ca/learn/html/howto/author_fast-loading_html_pages/index.html b/files/ca/learn/html/howto/author_fast-loading_html_pages/index.html new file mode 100644 index 0000000000..6c683a8156 --- /dev/null +++ b/files/ca/learn/html/howto/author_fast-loading_html_pages/index.html @@ -0,0 +1,186 @@ +--- +title: Consells per crear pàgines HTML de càrrega ràpida +slug: Web/Guide/HTML/_Consells_per_crear_pàgines_HTML_de_càrrega_ràpida +tags: + - Advanced + - Guide + - HTML + - NeedsUpdate + - Performance + - Web +translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages +--- +

Aquests consells es basen en el coneixement i l'experimentació comuna.

+ +

Una pàgina web optimitzada no només preveu un lloc més sensible per als seus visitants, sinó que també redueix la càrrega dels servidors web i la connexió a Internet. Això pot ser crucial per als llocs d'alt volum o dels llocs que tenen un pic en el tràfic a causa de circumstàncies inusuals, com ara notícies d'última hora.

+ +

Optimitzar el rendiment de càrrega de pàgina no és només per a contingut que serà vist pels visitants de dispositius telefònics o mòbils de banda estreta. És igual d'important que el contingut en banda ampla i pot conduir a millores espectaculars fins i tot per als seus visitants amb les connexions més ràpides.

+ +

Consells

+ +

Reduir el pes de la pàgina

+ +

El pes de la pàgina és, de bon tros, el factor més important en el rendiment de càrrega de pàgines.

+ +

La reducció del pes de la pàgina a través de l'eliminació d'espais en blanc i comentaris innecessaris, comunament coneguda com la reducció al mínim, i movent el script en línia i CSS en arxius externs, pot millorar el rendiment de descàrrega amb una necessitat mínima d'altres canvis en l'estructura de la pàgina.

+ +

Eines com ara HTML Tidy pot treure automàticament espais en blanc i les línies en blanc addicionals del codi HTML vàlid. Altres eines poden "comprimir" JavaScript canviant el format o per ofuscació de la font i la substitució dels identificadors llargs amb versions més curtes.

+ +

Reduir al mínim el nombre d'arxius

+ +

La reducció del nombre d'arxius que es fa referència en una pàgina web redueix el nombre de connexions HTTP necessaries per descarregar una pàgina.

+ +

Depenent de la configuració de la memòria cau d'un navegador, es pot enviar una petició If-Modified-Since al servidor web per a cada arxiu CSS, JavaScript o imatge, preguntant si l'arxiu ha estat modificat des de l'última vegada que es va descarregar.

+ +

En reduir el nombre d'arxius que es fa referència en una pàgina web, es redueix el temps necessari perquè aquestes peticions siguin enviades, i per les respostes que es rebin.

+ +

Si utilitzeu moltes imatges de fons en el vostre CSS, es pot reduir la quantitat de cerques HTTP necessaries mitjançant la combinació de les imatges en una, conegut com un sprite d'imatge. A continuació, només s'aplica la mateixa imatge cada vegada que ho necessiteu per a un fons, i ajustant les coordenades x/y de manera apropiada. Aquesta tècnica funciona millor amb els elements que tenen dimensions limitades, i no funcionarà per a cada ús d'una imatge de fons. No obstant això, el menor nombre de peticions HTTP i l'emmagatzematge en memòria cau d'una sola imatge pot ajudar a reduir el temps pageload.

+ +

L'excés de temps dedicat a la consulta de l'última modificació dels arxius de referència pot retardar la visualització inicial d'una pàgina web, ja que el navegador ha de comprovar el temps de modificació per a cada arxiu CSS o JavaScript, abans de processar la pàgina.

+ +

Reduir la recerca de dominis

+ +

Atès que cada domini per separat porta temps en la recerca de DNS, el temps de càrrega de la pàgina creixerà juntament amb el nombre de dominis independents que apareguin en link(s) CSS i src(es) JavaScript i imatge.

+ +

Això no sempre és pràctic; no obstant això, sempre s'ha de tenir en compte d'utilitzar només el nombre mínim necessari dels diferents dominis en les vostres pàgines.

+ +

Contingut reutilitzat en memòria cau

+ +

Assegureu-vos que qualsevol contingut que es pugui emmagatzemar en memòria cau, s'emmagatzemi en memòria cau, i amb els temps de caducitat apropiades.

+ +

En concret, presteu atenció a la capçalera Last-Modified. Permet d'una manera eficient l'emmagatzematge en memòria cau de la pàgina; per mitjà d'aquesta capçalera, la informació es transmet a l'agent d'usuari sobre l'arxiu que vol carregar, com quan es va modificar per última vegada. La majoria dels servidors web afegeixen automàticament la capçalera Last-Modified a pàgines estàtiques (per exemple .html, .css), d'acord amb la data d'última modificació emmagatzemada en el sistema d'arxius. Amb les pàgines dinàmiques (per exemple, .php, .aspx), això, per descomptat, no es pot fer, i la capçalera no s'envia.

+ +

Així, en particular, per a les pàgines que es generen de forma dinàmica, una mica de recerca sobre aquest tema és beneficiós. Pot ser una mica complicat, però s'estalviarà molt en les sol·licituds de pàgina en les pàgines que normalment no serien emmagatzemades en memòria cau.

+ +

Més informació:

+ +
    +
  1. HTTP Conditional Get for RSS Hackers
    2. +
  2. HTTP 304: Not Modified
    3. +
  3. HTTP ETag on Wikipedia
    4. +
  4. Caching in HTTP
    5. +
+ +

Ordenar de manera òptima els components de la pàgina

+ +

Descarregar el contingut de la pàgina en primer lloc, juntament amb qualsevol CSS o JavaScript que pugui ser necessàri per a la seva visualització inicial, de manera que l'usuari obté una resposta aparent més ràpida durant la càrrega de les pàgines. Aquest contingut és normalment de text, i per tant pot beneficiar-se de la compressió del text en trànsit, proporcionant així una resposta fins i tot més ràpida per a l'usuari.

+ +

Cap característica dinàmica que requereixi la pàgina per completar la càrrega abans de ser utilitzada, ha de ser desactivada inicialment, i només es permet després que la pàgina s'hagi carregat. Això farà que el JavaScript es carregui després del contingut de la pàgina, el que millorarà l'aspecte general de la càrrega de la pàgina.

+ +

Reduir el nombre de scripts en línia

+ +

Els scripts en línia poden ser costosos per a la càrrega de la pàgina, ja que l'analitzador ha d'assumir que un script en línia podria modificar l'estructura de la pàgina, mentre que l'anàlisi està en curs. Reduir l'ús de scripts en línia en general, i reduir l'ús de document.write() per a continguts de sortida en particular, pot millorar la càrrega total de la pàgina. Utilitzeu mètodes moderns d'AJAX per manipular el contingut de la pàgina per als navegadors moderns, en lloc dels antics enfocaments basats en document.write().

+ +

Utilitzar CSS modern i marcat vàlid

+ +

L'ús de CSS modern redueix la quantitat de marcat, pot reduir la necessitat d'imatges (spacer), en termes de disseny, i molt sovint pot substituir les imatges de text estilitzat - el "cost" és molt més que l'equivalent de text-i-CSS.

+ +

L'ùs del marcat vàlid té altres avantatges. En primer lloc, els navegadors no tenen necessitat de dur a terme la correcció d'errors a l'analitzar el codi HTML (això és, a part de la qüestió filosòfica, de si s'ha de permetre la variació de format a l'entrada de l'usuari, i després mitjançant programació "corregir" o normalitzar aquest o si, en canvi, fer complir un estricte format d'entrada, no tolerància).

+ +

D'altra banda, el marcat vàlid permet el lliure ús d'altres eines les quals poden pre-processar les vostres pàgines web. Per exemple, HTML Tidy pot eliminar espais en blanc i les etiquetes opcionals de tancament; però, es negarà a executar una pàgina amb greus errors de marcat.

+ +

Part del teu contingut

+ +

Les taules de dissenys són un mètode llegat que no ha de ser utilitzat més. Dissenys que utilitzen blocs {{HTMLElement ("div")}}, i en un futur pròxim, CSS3 Multi-column Layout o CSS3 Flexible Box Layout, s'han d'utilitzar al seu lloc.

+ +

Les taules encara es consideren marcat vàlid, però han de ser utilitzades per a la visualització de dades tabulars. Per ajudar al navegador a processar la vostre pàgina més ràpidament, heu d'evitar niar les vostres taules.

+ +

En lloc de niar profundament les taules com en:

+ +
<TABLE>
+  <TABLE>
+    <TABLE>
+          ...
+    </TABLE>
+  </TABLE>
+</TABLE>
+ +

utilitzar taules no niats o divs com a:

+ +
<TABLE>...</TABLE>
+<TABLE>...</TABLE>
+<TABLE>...</TABLE>
+
+ +

Veure: CSS3 Multi-column Layout Spec i CSS3 Flexible Box Layout

+ +

Minimitzar i comprimir recursos SVG

+ +

SVG produït per la majoria de les aplicacions de dibuix, sovint conté metadades innecessaries que es poden treure. Configureu els servidors per aplicar la compressió gzip per als recursos SVG.

+ +

Especificar les mides de les imatges i taules

+ +

Si el navegador pot determinar immediatament l'altura i/o amplada de les vostres imatges i taules, serà capaç de mostrar una pàgina web sense haver de reorganitzar el contingut. Això no només accelera la visualització de la pàgina, sinó que evita els molestos canvis en el disseny d'una pàgina quan la pàgina completa la càrrega. Per aquesta raó, height i width s'han d'especificar per a les imatges, sempre que sigui possible.

+ +

Les taules han d'utilitzar la combinació CSS selector:propietat:

+ +
  table-layout: fixed;
+
+ +

i ha de precisar les amplades de les columnes utilitzant les etiquetes HTML COL i COLGROUP.

+ +

Trieu els vostres requisits d'agent d'usuari sàviament

+ +

Per aconseguir les millores més importants en el disseny de la pàgina, assegureu-vos que els requisits raonables d'agent d'usuari s'especifiquin en els projectes. No requereix que el seu contingut aparegui un píxel perfecte en tots els navegadors, especialment no en els navegadors de versions més antigues.

+ +

L'ideal és que, els requisits mínims bàsics s'han de basar en la consideració dels navegadors moderns que suporten les normes pertinents. Això pot incloure les versions recents de Firefox, Internet Explorer, Google Chrome, Opera i Safari.

+ +

Recordeu, però, que molts dels consells que apareixen en aquest article són tècniques de sentit comú que s'apliquen a qualsevol agent d'usuari, i que es poden aplicar a qualsevol pàgina web, independentment dels requisits de compatibilitat amb els navegadors.

+ +

Exemple de l'estructura d'una pàgina

+ +

· HTML

+ +
+
· HEAD
+
+ +
+
+
+
· LINK ...
+ arxius CSS necessaris per l'aparença de la pàgina. Minimitzar el nombre d'arxius per el rendiment, mentre es manté CSS no relacionat en arxius separats per al manteniment.
+
+
+
+ +
+
+
+
· SCRIPT ...
+ arxius JavaScript per a funcions requerides durant la càrrega de la pàgina, però no qualsevol DHTML que només es pot executar després de càrrega de la pàgina.
+
Minimitzar el nombre d'arxius per el rendiment, mentre es manté JavaScript no relacionat en arxius separats per al manteniment.
+
+
+
+ +
+
· BODY
+
· Contingut de la pàgina, visible per a l'usuari, en trossos petits (taules/divs) que es poden visualitzar sense esperar que la pàgina completi la seva descàrrega.
+
+ +
+
+
+
· SCRIPT ...
+ Qualsevol script que s'utilitzarà per realitzar DHTML. El script DHTML normalment es pot executar després que la pàgina s'hagi carregat completament i tots els objectes necessaris hagin estat inicialitzats. No hi ha necessitat de carregar aquests scripts abans que el contingut de la pàgina. Això només ralenteix l'aparença inicial de la càrrega de la pàgina.
+
Minimitzar el nombre d'arxius per el rendiment, mentre es manté JavaScript no relacionat en arxius separats per al manteniment.
+
Si s'utilitzen les imatges per a efectes rollover, s'ha de carregar prèviament aquí després que el contingut de la pàgina s'hagi descarregat.
+
+
+
+ +

Utilitzar asyn i defer, si és possible

+ +

Fer que els scripts de JavaScript siguin compatibles tant amb async i defer i utilitzar async sempre que sigui possible, especialment si té diverses etiquetes de script. Amb això, la pàgina pot aturar el processament, mentre que encara s'estigui carregant JavaScript. En cas contrari, el navegador no renderizará res que estigui darrere de les etiquetes de script que no tinguin aquests atributs.

+ +

Nota: Tot i que aquests atributs ens ajuden molt per a la primera vegada que es carrega una pàgina, s'han d'usar, però no dependre de que funcionarà en tots els navegadors. Si seguiu totes les pautes per fer un bon codi JavaScript, no hi ha necessitat de canviar el codi.

+ +

Enllaços relacionats

+ + diff --git "a/files/ca/learn/html/introducci\303\263_al_html/crear_hipervincles/index.html" "b/files/ca/learn/html/introducci\303\263_al_html/crear_hipervincles/index.html" deleted file mode 100644 index c2bc2d0b0c..0000000000 --- "a/files/ca/learn/html/introducci\303\263_al_html/crear_hipervincles/index.html" +++ /dev/null @@ -1,320 +0,0 @@ ---- -title: Crear hipervincles -slug: Learn/HTML/Introducció_al_HTML/Crear_hipervincles -tags: - - Beginner - - CodingScripting - - Guide - - HTML - - Learn - - Links - - Title - - absolute - - hyperlinks - - relative - - urls -translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}
- -

Els hipervincles són realment importants; són els que fan de la xarxa web una xarxa. En aquest article es mostra la sintaxi necessària per a fer un enllaç, i es tracten les bones pràctiques en els enllaços.

- - - - - - - - - - - - -
Prerequisits:Familiaritzar-se amb els conceptes bàsics de l’HTML, que es tracten en Iniciació a l’HTML. Format del text en HTML, que es tracta en Fonaments del text HTML.
Objectiu:Aprendre com implementar un hipervincle amb eficàcia, i enllaçar diversos fitxers.
- -

Què és un hipervincle?

- -

Els hipervincles són una de les innovacions més interessants que la web té per oferir. Bé, ha estat una característica de la web des del principi, i són els que fan de la xarxa web una xarxa; ens permeten vincular els nostres documents a un altre document (o un altre recurs) qualsevol, també ens permeten vincular parts específiques dels documents entre elles, i permeten que les aplicacions estiguin disponibles en una adreça web (això contrasta amb les aplicacions natives, que requerien instal·lació i altres obligacions d’aquesta mena). Gairebé qualsevol contingut del web es pot convertir en un enllaç, de manera que en fer-hi clic (o activar-ho d’alguna altra manera) el navegador anirà cap a una altra adreça web ({{glossary("URL")}}).

- -
-

Nota: Una URL pot apuntar a fitxers HTML, fitxers de text, imatges, documents de text, vídeo i fitxers d’àudio, i qualsevol cosa que pugui existir en la web. Si el navegador no sap com mostrar o gestionar el fitxer, se’t demana si vols obrir el fitxer (en aquest cas el deure d’obrir o manipular el fitxer passa per una aplicació nativa adequada en el dispositiu) o descarregar el fitxer (i en aquest cas pots fer-te’n càrrec més endavant).

-
- -

La pàgina web de la BBC, per exemple, conté un gran nombre d’enllaços que apunten no només a múltiples històries de notícies, sinó també a diferents àmbits del lloc web (funcions de navegació), pàgines d’accés/registre (eines d’usuari), i molt més.

- -

Portal de bbc.co.uk, que mostra moltes notícies i també elements de navegació i funcions de menú

- -

Anatomia d’un enllaç

- -

Un enllaç bàsic es crea delimitant el text (o d’altres continguts, consulta {{anch("Enllaços de nivell de bloc")}}) que vols convertir en un enllaç dintre d’un element {{htmlelement("a")}}, i hi assigna un atribut {{htmlattrxref ("href", "a")}}  (també conegut com a destinació o target) que conté l’adreça web on vols que apunti l’enllaç.

- -
<p>I’m creating a link to
-<a href="https://www.mozilla.org/en-US/">the Mozilla homepage</a>.
-</p>
- -

Això ens dóna el següent resultat:

- -

I’m creating a link to the Mozilla homepage.

- -

Afegir informació de suport amb <title>

- -

Un altre atribut que és possible que vulguis afegir als teus enllaços és title; aquest atribut està destinat a contenir informació complementària útil sobre l’enllaç, com ara quin tipus d’informació conté la pàgina, o coses que cal tenir en compte. Per exemple:

- -
<p>I’m creating a link to
-<a href="https://www.mozilla.org/en-US/"
-   title="The best place to find more information about Mozilla’s
-          mission and how to contribute">the Mozilla homepage</a>.
-</p>
- -

Això ens dona el resultat següent (el títol apareix com un indicador de funció (tooltip) quan passem el cursor per sobre l’enllaç):

- -

I’m creating a link to the Mozilla homepage.

- -
-

Nota: El títol d'un enllaç només es mostra quan el punter del ratolí planeja per sobre, i això significa que les persones que fan servir el teclat per navegar, o pantalles tàctils, tindran dificultats per a accedir a aquesta informació. Si la informació d'un títol és realment important per la usabilitat d'una pàgina, s'hauria de presentar d'una forma accessible per a tothom, per exemple incloent-la com a text normal.

-
- -

Aprenentatge actiu: Crear un exemple d’enllaç propi

- -

És l’hora de l’aprenentatge actiu: volem que creïs un document HTML al teu editor de codi (faràs bé d’aconseguir la nostra plantilla inicial).

- - - -

Enllaços de nivell de bloc

- -

Com ja s’ha esmentat, pots convertir gairebé qualsevol contingut en un enllaç, fins i tot elements de nivell de bloc. Si vols convertir una imatge en un enllaç, només cal que posis la imatge entre les etiquetes <a></a>.

- -
<a href="https://www.mozilla.org/en-US/">
-  <img src="mozilla-image.png" alt="mozilla logo that links to the mozilla homepage">
-</a>
- -
-

Nota: En un proper article t’assabentaràs de molts més aspectes sobre l’ús d’imatges al web.

-
- -

Una introducció ràpida a les adreces URL i les rutes

- -

Per entendre bé les destinacions dels enllaços, cal comprendre les adreces URL i les rutes dels fitxers. En aquesta secció es proporciona la informació que necessites per a aconseguir això.

- -

Un URL, o Uniform Resource Locator (localitzador de recursos uniforme), és simplement una cadena de text que defineix on es pot localitzar alguna cosa a la web. Per exemple, la pàgina d’inici de Mozilla en versió anglesa es troba a https://www.mozilla.org/en-US/.

- -

Els URL utilitzen rutes per a trobar fitxers. Les rutes especifiquen en quina part del sistema de fitxers es troba el fitxer en el qual estàs interessat. Vegem un exemple senzill d’una estructura de directoris (observa el directori de creating-hyperlinks).

- -

Una estructura de directoris senzilla. El directori pare s’anomena creating-hyperlinks i conté dos fitxers anomenats index.html i contacts.html i dos directoris anomenats projects i pdfs, que contenen un fitxer index.html i un fitxer project-brief.pdf, respectivament.

- -

L’arrel d’aquesta estructura de directoris s’anomena creating-hyperlinks. Quan treballes amb un lloc web en local, hi ha un directori que conté dins tot el lloc web. A l’arrel hi ha un fitxer index.html i un fitxer contacts.html. En un lloc web real, index.html seria la nostra pàgina d’inici o pàgina de destinació.

- -

També hi ha dos directoris dins del nostre directori arrel: pdfs i projects. Cadascun té a dins un sol fitxer: un fitxer PDF (projecte-brief.pdf) i un fitxer index.html, respectivament. Observa que hi pot haver sense problemes dos fitxers index.html en un projecte, sempre que es trobin en ubicacions diferents del sistema de fitxers. Molts llocs web ho fan. El segon index.html seria potser la pàgina de destinació principal per a obtenir informació relacionada amb el projecte.

- - - -
-

Nota: Si cal, pots combinar diverses instàncies d’aquestes característiques en adreces URL complexes; per exemple, ../../../complex/path/to/my/file.html.

-
- -

Fragments de document

- -

És possible enllaçar una part específica d’un document HTML (conegut com un fragment de document), i no només a l'inici del document. Per a això, primer cal assignar un atribut {{htmlattrxref ("id")}} a l’element en què vols establir l’enllaç. Normalment té sentit enllaçar en una línia de títol específica, de manera que es veuria alguna cosa com la següent:

- -
<h2 id="Mailing_address">Mailing address</h2>
- -

A continuació, per a enllaçar aquest id específic, cal incloure'l al final de l'URL, precedit per un símbol de número o coixinet (#). Per exemple:

- -
<p>Want to write us a letter? Use our <a href="contacts.html#Mailing_address">mailing address</a>.</p>
- -

Fins i tot pots utilitzar la referència mateixa del fragment del document per a fer un enllaç cap a una altra part del mateix document:

- -
<p>The <a href="#Mailing_address">company mailing address</a> can be found at the bottom of this page.</p>
- -

URL absoluts i relatius

- -

Dos termes que et trobaràs a la  web són l’URL absolut i l’URL relatiu:

- -

URL absolut: Apunta cap a una ubicació definida per la seva ubicació absoluta al web, que inclou el {{glossary("protocol")}} i el {{glossary("nom de domini")}}. Així, per exemple, si una pàgina index.html es carrega en un directori anomenat projects que hi ha dins de l’arrel d’un servidor web, i el domini del lloc web és http://www.example.com, la pàgina estaria disponible en http://www.example.com/projects/index.html (o fins i tot només http://www.example.com/projects/, perquè la majoria dels servidors web cerquen una pàgina de destinació com index.html per carregar-la si no s’especifica a l'URL).

- -

Un URL absolut sempre apuntarà a la mateixa ubicació, no importa des d’on s’utilitzi.

- -

URL relatiu: Apunta a una ubicació que és relativa al fitxer que s’enllaça, una mica com el que hem vist en la secció anterior. Per exemple, si volem tenir un enllaç des del nostre fitxer d’exemple en http://www.example.com/projects/index.html a un fitxer PDF del mateix directori, l’URL només seria el nom del fitxer; per exemple: project-brief.pdf; no cal informació addicional. Si el PDF estigués disponible en un subdirectori dins de projects anomenat pdfs, l’enllaç relatiu seria pdfs/project-brief.pdf (l’URL absolut equivalent seria http://www.example.com/projects/pdfs/project-brief.pdf).

- -

Un URL relatiu assenyala diferents llocs segons on estigui el fitxer que s’utilitza; per exemple, si movem el nostre fitxer index.html del directori projects a l’arrel del lloc web (el nivell superior, no en altres directoris), l’URL relativa pdfs/project-brief.pdf ara apunta a http://www.example.com/pdfs/project-brief.pdf, no a http://www.example.com/projects/pdfs/project-brief.pdf.

- -

Naturalment, la ubicació de l'arxiu project-brief.pdf i el directori pdfs no canviaran de sobte perquè moguis l'arxiu index.html; això faria que el teu enllaç apunti al lloc equivocat, així que no funcionaria si s'hi fes clic. Cal anar amb compte.

- -

Les bones pràctiques en els enllaços

- -

Hi ha algunes bones pràctiques que és bo de seguir quan es posen enllaços. Vegem quines són.

- - - -

Fes servir un redactat clar

- -

És molt fàcil afegir enllaços. Però amb això, no n’hi ha prou. Hem de fer que els nostres enllaços siguin accessibles a tots els lectors, independentment de quin sigui el seu context i quines eines prefereixen. Per exemple:

- - - -

Vegem-ne un exemple concret:

- -

Text d’enllaç ben redactat: Download Firefox

- -
<p><a href="https://firefox.com/">
-  Download Firefox
-</a></p>
- -

Text d’enllaç mal redactat: Click here to download Firefox

- -
<p><a href="https://firefox.com/">
-  Click here
-</a>
-to download Firefox</p>
-
- -

Altres consells:

- - - -

Utilitza enllaços relatius sempre que puguis

- -

A partir de la descripció anterior, es podria pensar que és una bona idea utilitzar enllaços absoluts en tot moment; al cap i a la fi, no es trenquen com els enllaços relatius quan una pàgina es mou. Tanmateix, és bo emprar enllaços relatius sempre que puguis quan enllaces a altres llocs dins del mateix lloc web (i fes servir enllaços absoluts quan enllacis a un altre lloc web):

- - - -

Indica amb claredat quan s’enllacen recursos no HTML

- -

Quan enllaces a un recurs que es pot descarregar (com un document PDF o Word) o reproduir en continu (streaming), com ara un vídeo o un àudio, o que pot tenir un altre efecte potencialment inesperat (s’obre una finestra emergent), hauries d’afegir un redactat clar per a reduir qualsevol confusió. Pot resultar força molest, per exemple:

- - - -

Observa amb alguns exemples quin tipus de text pots utilitzar aquí:

- -
<p><a href="http://www.example.com/large-report.pdf">
-  Download the sales report (PDF, 10MB)
-</a></p>
-
-<p><a href="http://www.example.com/video-stream/">
-  Watch the video (stream opens in separate tab, HD quality)
-</a></p>
-
-<p><a href="http://www.example.com/car-game">
-  Play the car game (requires Flash)
-</a></p>
- -

Utilitza l‘atribut download quan enllacis a una descàrrega

- -

Quan enllaces a un recurs que s’ha de descarregar en lloc d’obrir-se en el navegador, pots utilitzar l’atribut download, que proporciona l’opció de desar amb el nom de fitxer per defecte. Heus aquí un exemple amb un enllaç de descàrrega de Firefox 39 per a la versió de Windows:

- -
<a href="https://download.mozilla.org/?product=firefox-39.0-SSL&os=win&lang=en-US"
-   download="firefox-39-installer.exe">
-  Download Firefox 39 for Windows
-</a>
- -

Aprenentatge actiu: crear un menú de navegació

- -

Per a aquest exercici, et volem proposar que enllacis algunes pàgines amb un menú de navegació per a crear un lloc web de diverses pàgines. Aquesta és una manera comuna per a crear un lloc web: en cada pàgina s’utilitza la mateixa estructura de pàgina, que inclou el mateix menú de navegació, de manera que quan fas clic als enllaços fa la impressió que ets en el mateix lloc, però apareix un contingut diferent.

- -

Fes còpies locals de les quatre pàgines següents, totes en el mateix directori (consulta també el directori de navegació del menú d’inici per a la llista completa de fitxers):

- - - -

Hauries de:

- -
    -
  1. Afegir una llista no ordenada en el lloc indicat en una pàgina, que contingui els noms de les pàgines que s’enllacen. Un menú de navegació és justament una llista d’enllaços, de manera que això és semànticament correcte.
    2. -
  2. Convertir cada nom de la pàgina en un enllaç a aquesta pàgina.
    3. -
  3. Copiar el menú de navegació en cada pàgina.
    4. -
  4. Eliminar de cada pàgina només l’enllaç a ella mateixa; és confús incloure un enllaç a la mateixa pàgina, i no té sentit, i el fet que no hi hagi enllaç resulta un bon recordatori visual de la pàgina en què et trobes.
    5. -
- -

L’exemple acabat hauria de veure’s més o menys així:

- -

Un exemple senzill de menú de navegació HTML, amb els elements inici, imatges, projectes i xarxes socials

- -
-

Nota: Si t’encalles o no saps si ho has fet bé, pots comprovar la solució en el directori de l’etiquetatge del menú de navegació.

-
- -

Enllaços a correu electrònic

- -

És possible crear enllaços o botons que, quan els prems, en lloc d’enllaçar amb un recurs o pàgina, obren un missatge de correu electrònic nou de sortida. Això es fa amb l’element {{HTMLElement("a")}} i l’esquema d’URL mailto:.

- -

En la forma més bàsica i d’ús més comú, un enllaç mailto: simplement indica l’adreça de correu electrònic del destinatari. Per exemple:

- -
<a href="mailto:ningu@mozilla.org">Envia un missatge a ningú</a>
-
- -

Això genera un enllaç que té aquest aspecte: Envia un missatge a ningú.

- -

De fet, fins i tot l’adreça de correu electrònic és opcional. Si la deixes fora (és a dir, {{htmlattrxref ("href", "a")}} és simplement "mailto:"), el client de correu de l’usuari obrirà una finestra de correu electrònic sortint nova que encara no té cap adreça de destinació especificada. Això sovint és útil com a enllaços per «compartir» en què els usuaris poden fer clic i enviar un correu electrònic a una adreça que triïn.

- -

Especificar detalls

- -

A més de l’adreça de correu electrònic, pots proporcionar més informació. De fet, pots afegir qualsevol camp de capçalera d’un missatge de correu electrònic estàndard a l’adreça URL mailto: que proporcionis. El més habituals són «subject», «cc» i «body» (respectivament, «tema», «amb còpia» i «cos», que no és un veritable camp de capçalera, però permet especificar el contingut d’un missatge curt per al nou correu electrònic). Cada camp i el seu valor s’especifiquen com un terme de la consulta.

- -

Aquí hi ha un exemple que inclou un cc, bcc, assumpte i cos:

- -
<a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&amp;subject=The%20subject%20of%20the%20email &amp;body=The%20body%20of%20the%20email">
-  Send mail with cc, bcc, subject and body
-</a>
- -
-

Nota: Els valors de cada camp han de tenir una codificació URL (és a dir, amb caràcters no imprimibles i espais percentatge-escapats). També has de tenir en compte l’ús del signe (&), que separa cada camp en la URL mailto:. Aquesta és la notació estàndard d’una consulta URL.

-
- -

Aquí hi ha algunes altres mostres d’URL de mailto::

- - - -

Sumari

- -

Això, de tota manera, és tot sobre els enllaços, per ara! Tornarem als enllaços més endavant en el curs, quan comencem a aplicar-los estils. El pas següent pel que fa a l’HTML és tornar a la semàntica de text i conèixer algunes de les característiques més avançades/inusuals que podeu trobar útils; la formatació avançada del text és la vostra pròxima parada.

- -

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}

diff --git "a/files/ca/learn/html/introducci\303\263_al_html/depurar_html/index.html" "b/files/ca/learn/html/introducci\303\263_al_html/depurar_html/index.html" deleted file mode 100644 index 5d8feaea62..0000000000 --- "a/files/ca/learn/html/introducci\303\263_al_html/depurar_html/index.html" +++ /dev/null @@ -1,171 +0,0 @@ ---- -title: Depurar HTML -slug: Learn/HTML/Introducció_al_HTML/Depurar_HTML -tags: - - Beginner - - CodingScripting - - Debugging - - Error - - Guide - - HTML - - Validation - - validator -translation_of: Learn/HTML/Introduction_to_HTML/Debugging_HTML ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}
- -

Escriure HTML està molt bé; però, i si hi ha alguna cosa que va malament i no se sap on està l'error en el codi? Aquest article dona a conèixer algunes eines que poden ajudar.

- - - - - - - - - - - - -
Prerequisits:Familiaritzar-se amb els fonaments bàsics de l’HTML, que s’expliquen, per exemple, en Iniciació a l’HTML, Fonaments de text en HTML i Creació d’hipervincles.
Objectiu:Aprendre els conceptes bàsics de la utilització d'eines de depuració per a trobar problemes en HTML.
- -

Depurar no fa por

- -

En escriure qualsevol mena de codi, tot està molt bé en general, fins que arriba aquest moment temut, que és quan es produeix un error; s'ha fet alguna cosa malament i el codi no funciona en absolut, o no ben bé com es voldria. Per exemple, a continuació es mostra la informació d'un error en intentar {{glossary("compilar")}} un programa senzill escrit en el llenguatge Rust.

- -

Una finestra d’ordinador portàtil que mostra el resultat d'intentar compilar un programa en codi Rust amb una cometa que manca en algun lloc d'una instrucció 'print'. El missatge d'error indica: 'error: unterminated double quote string'.En aquest cas, el missatge d'error és relativament fàcil d'entendre: «cadena de text amb cometes dobles sense tancar». Si et fixes en la programació, és probable que puguis veure que en la instrucció println!(Hello, world!”); podria faltar-hi, per lògica, una cometa doble. Però els missatges d'error poden esdevenir ràpidament més complicats i menys fàcils d'interpretar a mesura que els programes es fan més extensos, i fins i tot el cas senzill anterior pot intimidar una mica a algú que no sap gens de programació amb Rust.

- -

Això no obstant, la depuració no té per què fer por; la clau per estar còmodes amb l’escriptura i depuració de qualsevol llenguatge de programació o codi és la familiaritat, tant amb el llenguatge com amb les eines.

- -

Depuració amb HTML

- -

HTML no és tan complicat d'entendre com Rust; HTML no es compila en una forma diferent abans que el navegador n’analitzi el resultat i el presenti (s’interpreta, no es compila). I la sintaxi d’un {{glossary("element")}} HTML és possiblement molt més fàcil d'entendre que la d’un «autèntic llenguatge de programació» com Rust, {{glossary("JavaScript")}} o {{glossary("Python")}}. Però la manera amb què els navegadors executen l’HTML és molt més permissiva que la manera com s'executen els llenguatges de programació, i això és alhora bo i dolent.

- -

Codi permissiu

- -

Què entenem per permissiu? Bé, en general, quan comets algun error de codi, et pots topar amb dos tipus d'error principals:

- - - -

L’HTML en si no té tendència a presentar errors de sintaxi perquè els navegadors en què s'executa són permissius, i això significa que el codi funciona fins i tot encara que hi hagi errors de sintaxi. Els navegadors incorporen regles que els indiquen com interpretar l’etiquetatge escrit erròniament, de manera que s'obtingui alguna cosa que rutlli, encara que potser no sigui exactament el que esperaves. Això, per descomptat, també pot ser un problema!

- -
-

Nota: L’HTML s'executa amb permissivitat perquè quan es va crear la web, es va decidir que permetre a la gent la publicació dels seus continguts fos més important que garantir que la sintaxi fos totalment correcta. La xarxa web probablement no seria tan popular com ho és avui, si hagués estat més estricta des dels inicis.

-
- -

Aprenentatge actiu: estudiar la permissivitat del codi

- -

És hora d'estudiar la naturalesa permissiva del codi HTML per tu mateix.

- -
    -
  1. En primer lloc, fes-te amb una còpia de la nostra demostració de depuració i desa-te-la en local. Hem escrit aquest exemple de demostració deliberadament amb alguns errors perquè els analitzis (es diu que l’etiquetatge HTML està mal format, en oposició a ben format).
    2. -
  2. A continuació, obre’l en un navegador; veuràs alguna cosa com aquesta: Un document HTML senzill amb el títol Exemples de depuració HTML i una mica d'informació sobre errors comuns amb HTML, com elements que no es tanquen, elements mal imbricats o atributs que no es tanquen.
    3. -
  3. Això, d’entrada, no fa bona pinta; analitzem el codi per veure si podem esbrinar-ne el perquè (només es mostren els continguts de body): - 
    <h1>HTML debugging examples</h1>
-
-<p>What causes errors in HTML?
-
-<ul>
-  <li>Unclosed elements: If an element is <strong>not closed properly,
-      then its effect can spread to areas you didn't intend
-
-  <li>Badly nested elements: Nesting elements properly is also very important
-      for code behaving correctly. <strong>strong <em>strong emphasised?</strong>
-      what is this?</em>
-
-  <li>Unclosed attributes: Another common source of HTML problems. Let's
-      look at an example: <a href="https://www.mozilla.org/>link to Mozilla
-      homepage</a>
-</ul>
    -
    4. -
  4. Fem un repàs dels problemes que hi podem veure: -
      -
    • Els elements {{htmlelement("p")}} i {{htmlelement("li")}} no tenen etiquetes de tancament. A partir de la imatge de dalt, no sembla que això hagi afectat malament la representació del codi d’etiquetatge, perquè és fàcil deduir on acaba un dels elements i on en comença un altre.
      • -
    • El primer element {{htmlelement("strong")}} no té etiqueta de tancament. Això és una mica més problemàtic, perquè no és fàcil saber on se suposa que acaba l'element. De fet, sembla que s’ha destacat en negreta tota la resta del text.
      • -
    • En aquesta secció les etiquetes estan mal imbricades: <strong>strong <em>strong emphasised?</strong> what is this?</em>. No és fàcil saber com s'ha d'interpretar això, a causa del problema anterior.
      • -
    • El valor de l'atribut {{htmlattrxref ("href", "a")}} no té cometes dobles tancament. Això sembla que ha causat el problema més greu: l'enllaç no apareix en absolut.
      • -
    -
    5. -
  5. Ara observem quina presentació fa el navegador a partir d’aquest d’etiquetatge, en oposició a l’etiquetatge que observem en el codi. Per a això, pots utilitzar les eines de desenvolupador del navegador. Si no estàs familiaritzat amb l'ús de les eines de desenvolupador del navegador, dedica uns minuts a revisar Descobreix les eines de desenvolupador del navegador, i després torna.
    6. -
  6. En l'inspector de DOM pots veure quin aspecte presenta la representació d’aquest etiquetatge: L'inspector d'HTML de Firefox, amb el nostre paràgraf d'exemple destacat, mostra el text "Què genera errors en l'HTML". Hi pots veure que el navegador s'ha encarregat de tancar l'element paràgraf.
    7. -
  7. Amb l'inspector DOM, explorarem el codi amb detall per veure com el navegador ha intentat de corregir els errors HTML (hem fet la revisió amb Firefox; altres navegadors moderns haurien de donar el mateix resultat): -
      -
    • S’han donat etiquetes de tancament als paràgrafs i elements de llista.
      • -
    • No està clar on s’ha de tancar el primer element <strong>, de manera que el navegador ha etiquetat cada bloc de text per separat que hi ha fins al final del document amb una etiqueta strong.
      • -
    • El navegador ha resolt la imbricació d’etiquetes incorrecta de la següent manera: - 
      <strong>strong
-  <em>strong emphasised?</em>
-</strong>
-<em> what is this?</em>
      -
      • -
    • L'enllaç amb la cometa doble que falta s’ha eliminat del tot. L'últim element de la llista ara presenta aquest aspecte: - 
      <li>
-  <strong>Unclosed attributes: Another common source of HTML problems.
-  Let's look at an example: </strong>
-</li>
      -
      • -
    -
    8. -
- -

Validació HTML

- -

A partir de l'exemple anterior pots veure que és important que t’asseguris que el codi HTML està prou ben format. Però, com? En un exemple petit com el que has vist abans, resulta prou fàcil buscar per les línies de codi i trobar els errors; però, què passa amb un document HTML extens i complex?

- -

La millor estratègia és començar per executar la pàgina HTML amb el servei de validació d’etiquetatge (Markup Validation Service), creat i mantingut per l'organització W3C, que s'ocupa de les especificacions que defineixen l’HTML, el CSS i altres tecnologies web. Aquesta pàgina web pren un document HTML com una entrada, l’analitza i et retorna un informe que exposa tot el que està malament en l’HTML.

- -

La pàgina d’inici del validador d’HTML

- -

Per a especificar el codi HTML que vols validar, pots donar-ne l’adreça web, pujar-hi l’arxiu HTML o introduir-hi el codi HTML directament.

- -

Aprenentatge actiu: validació d’un document HTML

- -

Provem-ho amb el nostre document de mostra.

- -
    -
  1. En primer lloc, carrega el Markup Validation Service en una de les pestanyes del navegador, si encara no ho has fet.
    2. -
  2. Ves a la pestanya Validate by Direct Input.
    3. -
  3. Copia tot el codi del document de mostra (no només el body) i enganxa’l en l'àrea gran de text que hi ha en el Markup Validation Service.
    4. -
  4. Prem el botó Check.
    5. -
- -

Això t’ha de donar una llista d'errors i altres dades.

- -

Llista dels resultats de la validació HTML del servei de validació d'etiquetatge de W3C

- -

Interpretació dels missatges d'error

- -

La llista de missatges d'error que el validador presenta sovint són útils, però de vegades no tant; amb una mica de pràctica trobaràs la manera d'interpretar-los per resoldre el codi. Fem una passada pels missatges d'error i vegem què signifiquen. Observem que cada missatge ve amb un número de línia i columna, que t’ajuda a localitzar l'error més fàcilment.

- - - -

Si no arribes a esbrinar què significa cada missatge d'error, no t’hi amoïnis; una bona idea és tractar de resoldre uns quants errors cada la vegada, i a continuació tornar a validar el codi HTML per veure els errors que queden. De vegades, la resolució d'un error pot eliminar més d’un missatges d'error diferents, perquè sovint un sol problema pot causar diversos errors, en un efecte dòmino.

- -

Sabràs que has resolt tots els errors quan en la sortida t’aparegui una banda amb el missatge següent:

- -

Banda amb el text: "El document valida d'acord amb els esquemes i les restriccions addiconals especificats que verifica el validador"

- -

Resum

- -

Aquí tenim una introducció a la depuració de codi HTML, que t’hauria de proporcionar alguns coneixements útils per quan comencis a depurar CSS, JavaScript i altres tipus de codi, més endavant durant la carrera. Això també marca el final dels articles d’aprenentatge del mòdul Introducció a l’HTML; ara ja pots examinar-te tu mateix amb les nostres activitats d’avaluació: a sota trobaràs un enllaç a la primera d'elles.

- -

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}

diff --git "a/files/ca/learn/html/introducci\303\263_al_html/document_i_estructura_del_lloc_web/index.html" "b/files/ca/learn/html/introducci\303\263_al_html/document_i_estructura_del_lloc_web/index.html" deleted file mode 100644 index 1088731eea..0000000000 --- "a/files/ca/learn/html/introducci\303\263_al_html/document_i_estructura_del_lloc_web/index.html" +++ /dev/null @@ -1,267 +0,0 @@ ---- -title: Document i estructura del lloc web -slug: Learn/HTML/Introducció_al_HTML/Document_i_estructura_del_lloc_web -translation_of: Learn/HTML/Introduction_to_HTML/Document_and_website_structure ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}
- -

Així com definim les parts individuals de la pàgina (per exemple, «un paràgraf» o «una imatge»), {{glossary("HTML")}} també compta amb una sèrie d'elements de nivell de bloc que s'utilitzen per a definir les àrees del teu lloc web (com ara «la capçalera», «el menú de navegació» o «la columna principal de contingut»). En aquest article es reflexiona sobre com planificar una estructura bàsica d'un lloc web, i com escriure el codi HTML per a representar aquesta estructura.

- - - - - - - - - - - - -
Prerequisits:Familiaritat amb els conceptes bàsics de l’HTML que s'expliquen en Iniciació a l’HTML. Aplicació de format al text amb HTML, que s'explica en Fonaments de text amb HTML. Funcionament dels hipervincles, que s'expliquen en Crear hipervincles.
Objectiu:Aprendre a estructurar un document amb etiquetes semàntiques, i elaborar l'estructura d'un lloc web senzill.
- -

Seccions bàsiques d'un document

- -

Les pàgines web poden i tenen un aparença molt diferent les unes de les altres, però totes tendeixen a compartir components estàndard similars, llevat que a la pàgina es mostri un vídeo o un joc en pantalla completa, formi part d'alguna mena de projecte artístic, o simplement estigui mal estructurada:

- -
-
capçalera (header)
-
Sol ser una gran franja a la part superior amb un títol gran i/o un logotip. És on en general es manté la informació principal comuna sobre un lloc web respecte d'una altra pàgina web.
-
barra de navegació (navigation bar)
-
Són els enllaços a les seccions principals del lloc; en general es representen com botons de menú, enllaços o pestanyes. Igual que la capçalera, aquest contingut en general roman característic d'una pàgina web respecte d’una altra; un sistema de navegació incoherent en el lloc web només portarà frustració i confusió als usuaris. Molts dissenyadors web consideren que la barra de navegació ha de ser part de la capçalera en lloc d'un component individual, però això no és un requisit; de fet, alguns sostenen també que el fet de tenir aquests dos elements separats és millor per motius d’accesibilitat, perquè els lectors de pantalla poden llegir més bé totes dues característiques si estan separades.
-
contingut principal (main content)
-
Una àrea gran al centre que conté la part principal del contingut particular d'una pàgina web determinada, per exemple, el vídeo que vols veure o la història principal que llegeixes, o el mapa que vols examinar, o els titulars de les notícies, etc. Aquesta és la part singular de la pàgina web que sens dubte variarà d'una pàgina web a una altra!
-
barra lateral (sidebar)
-
Informació secundària, enllaços, citacions, anuncis, etc. En general es tracta d’informació de context respecte de la que inclou el contingut principal (per exemple, en un article d’una pàgina de notícies, la barra lateral podria contenir la biografia de l'autor o enllaços a articles relacionats), però també hi ha casos en què trobaràs elements recurrents, com ara un sistema secundari de navegació.
-
peu de pàgina (footer)
-
Una franja a la part inferior de la pàgina que generalment conté la lletra petita, els avisos de copyright o informació de contacte. És un lloc per a posar-hi informació que és comuna (com la capçalera) per a tot el lloc web, però aquesta informació no és en general ni crítica ni secundària respecte de la pàgina web mateixa. El peu de pàgina també s'utilitza de vegades amb finalitats de posicionament {{Glossary("SEO")}}, en proporcionar enllaços per a un accés ràpid al contingut popular.
-
- -

Un «lloc web típic» podria presentar una estructura semblant a això:

- -

Un exemple senzill d’estructura de lloc web que inclou una capçalera principal, un menú de navegació, una àrea de contingut principal, una barra lateral i un peu de pàgina.

- -

HTML per a estructurar el contingut

- -

L'exemple senzill que es mostra a dalt no és bonic, però és perfectament acceptable per a il·lustrar un exemple típic de disseny d'una pàgina web. Alguns llocs web tenen més columnes, alguns són molt més complexos, però ja es copsa la idea. Amb el CSS correcte, pots usar gairebé qualsevol element per a delimitar les diferents seccions i assignar-los l’aspecte que vulguis però, com ja hem dit, cal respectar la semàntica i utilitzar l'element correcte per a la funció correcta.

- -

Això és perquè els elements visuals no expliquen tota la història. Utilitzem el color i la mida de la lletra per a cridar l'atenció dels usuaris en les parts del contingut més rellevants, com ara el menú de navegació i els enllaços relacionats; però, què passa amb les persones que tenen una discapacitat visual, per exemple, que potser no troben gaire útils conceptes com «rosa» o «mida de lletra gran»?

- -
-

Nota: Les persones daltòniques representen al voltant del 8% de la població mundial. Les persones cegues o amb discapacitats visuals representen aproximadament el 4-5% de la població mundial (el 2012 hi havia 285 milions d'aquest tipus de persones al món, mentre que la població total era de prop de 7.000 milions.)

-
- -

En el teu codi HTML pots etiquetar seccions de contingut segons la funció que compleixen; pots fer servir elements que representin de manera inequívoca les seccions de contingut que hem descrit abans, i les tecnologies de suport com els lectors de pantalla poden reconèixer aquells elements i ajudar amb tasques com «trobar la navegació principal» o «trobar el contingut principal». Com ja hem esmentat abans en el curs, són moltes les conseqüències de no utilitzar una estructura i una semàntica correctes perquè un element compleixi la funció correcta.

- -

Per a dur a terme aquest etiquetatge semàntic, l’HTML proporciona etiquetes específiques que es poden utilitzar per a representar aquestes seccions, per exemple:

- - - -

Aprenentatge actiu: Analitzar el codi del nostre exemple

- -

L’exemple que hem vist abans està representat pel codi següent (també pots trobar l’exemple en el repositori de GitHub). Observa’l a dalt i fes un cop d’ull a la llista següent per veure quines parts componen quines seccions visibles.

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-
-    <title>My page title</title>
-    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css">
-    <link rel="stylesheet" href="style.css">
-
-    <!-- the below three lines are a fix to get HTML5 semantic elements working in old versions of Internet Explorer-->
-    <!--[if lt IE 9]>
-      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
-    <![endif]-->
-  </head>
-
-  <body>
-    <!-- Here is our main header that is used accross all the pages of our website -->
-
-    <header>
-      <h1>Header</h1>
-    </header>
-
-    <nav>
-      <ul>
-        <li><a href="#">Home</a></li>
-        <li><a href="#">Our team</a></li>
-        <li><a href="#">Projects</a></li>
-        <li><a href="#">Contact</a></li>
-      </ul>
-
-       <!-- A Search form is another commmon non-linear way to navigate through a website. -->
-
-       <form>
-         <input type="search" name="q" placeholder="Search query">
-         <input type="submit" value="Go!">
-       </form>
-     </nav>
-
-    <!-- Here is our page's main content -->
-    <main>
-
-      <!-- It contains an article -->
-      <article>
-        <h2>Article heading</h2>
-
-        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>
-
-        <h3>subsection</h3>
-
-        <p>Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.</p>
-
-        <p>Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.</p>
-
-        <h3>Another subsection</h3>
-
-        <p>Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>
-
-        <p>Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.</p>
-      </article>
-
-      <!-- the aside content can also be nested within the main content -->
-      <aside>
-        <h2>Related</h2>
-
-        <ul>
-          <li><a href="#">Oh I do like to be beside the seaside</a></li>
-          <li><a href="#">Oh I do like to be beside the sea</a></li>
-          <li><a href="#">Although in the North of England</a></li>
-          <li><a href="#">It never stops raining</a></li>
-          <li><a href="#">Oh well...</a></li>
-        </ul>
-      </aside>
-
-    </main>
-
-    <!-- And here is our main footer that is used across all the pages of our website -->
-
-    <footer>
-      <p>©Copyright 2050 by nobody. All rights reversed.</p>
-    </footer>
-
-  </body>
-</html>
- -

Pren-te un temps per observar el codi i intentar entendre’l; els comentaris que hi ha dins del codi també t’haurien d'ajudar a entendre’l. No et demanem de fer gaire més en aquest article perquè la clau per a entendre el disseny del document és escriure una estructura HTML semblant a aquesta i a continuació posar-hi CSS. Però ens esperarem per a això fins que comencis a estudiar com dissenyar amb CSS en l’article dedicat al CSS que tracta aquest tema.

- -

Els elements HTML de disseny amb més detall

- -

És bo entendre amb detall el significat general de tots els elements HTML de seccionament; treballarem aquesta qüestió de manera gradual a mesura que anem assolint més experiència en el desenvolupament web. Pots entrar en molt de detall amb la lectura de la nostra referència d’elements HTML. De moment, aquestes són les definicions principals que ens cal comprendre:

- - - -

Delimitadors no semàntics

- -

A vegades et trobes amb una situació en què no hi ha un element semàntic adequat per a agrupar junts un seguit d’elements o delimitar uns continguts concrets. A vegades pot ser que simplement vulguis agrupar un conjunt d'elements per a tractar-los tots com una sola entitat amb una mica de {{glossary("CSS")}} o {{glossary("JavaScript")}}. Per a casos com aquests, l’HTML proporciona els elements {{HTMLElement("div")}} i {{HTMLElement("span")}}. S'han d'utilitzar preferiblement amb un atribut {{htmlattrxref('class')}} adequat, que els proporcioni algun tipus d'etiqueta perquè se’ls pugui identificar fàcilment.

- -

{{HTMLElement("span")}} és un element de línia no semàntic que només hauries d'utilitzar si no trobes cap altre element de text semàntic que vagi més bé per a delimitar aquell contingut, o no vols afegir-hi cap significat específic. Per exemple:

- -
<p>The King walked drunkenly back to his room at 01:00, the beer doing nothing to aid
-him as he staggered through the door <span class="editor-note">[Editor's note: At this point in the
-play, the lights should be down low]</span>.</p>
- -

En aquest cas, la nota de l'editor només pretén proporciona una indicació addicional per al director de l'obra; no es pretén que tingui un significat semàntic addicional. Podries aplicar-hi CSS per a distanciar aquesta nota del text principal als ulls d’un usuari vident.

- -

{{HTMLElement("div")}} és un element de bloc no semàntic que només hauries d'utilitzar si no trobes cap altre element de bloc semàntic que vagi més bé per a delimitar aquell contingut, o no vols afegir-hi cap significat específic. Per exemple, imagina’t un giny de tipus carretó de la compra que pots optar per seleccionar en qualsevol moment durant el temps que navegues per un lloc web de comerç electrònic:

- -
<div class="shopping-cart">
-  <h2>Shopping cart</h2>
-  <ul>
-    <li>
-      <p><a href=""><strong>Silver earrings</strong></a>: $99.95.</p>
-      <img src="../products/3333-0985/" alt="Silver earrings">
-    </li>
-    <li>
-      ...
-    </li>
-  </ul>
-  <p>Total cost: $237.89</p>
-</div>
- -

No és realment un element <aside>, perquè no s'identifica necessàriament amb el contingut principal de la pàgina (vols que estigui accessible des de qualsevol lloc). Tampoc és particularment necessari utilitzar un element <section>, perquè no és part del contingut principal de la pàgina. En aquest cas està molt bé utilitzar un element <div>. Hi hem inclòs un títol d’encapçalament com un indicador per a ajudar els usuaris amb lectors de pantalla a trobar-ho.

- -
-

Atenció: Els elements div són tan còmodes d'usar que és fàcil d'utilitzar-los en excés. Però com que no aporten cap valor semàntic, només introdueixen soroll en el teu codi HTML. Assegura’t d’utilitzar-los només quan no hi hagi cap altra solució semàntica més adequada i tracta de reduir-ne l’ús al mínim. En cas contrari et trobaràs amb moltes dificultats a l’hora d’actualitzar i mantenir els teus documents.

-
- -

Salts de línia i separadors horitzontals

- -

Dos elements que utilitzaràs de tant en tant i que voldràs conèixer són {{htmlelement("br")}} i {{htmlelement("hr")}}:

- -

<br> crea un salt de línia en un paràgraf; és l'única manera de forçar una estructura rígida, en una situació en què vols un seguit de línies curtes fixes, com en una adreça postal o un poema. Per exemple:

- -
<p>There once was a girl called Nell<br>
-Who loved to write HTML<br>
-But her structure was bad, her semantics were sad<br>
-and her markup didn't read very well.</p>
- -

Sense els elements <br>, el paràgraf es mostraria en una línia llarga (com hem dit abans en el curs, l’HTML ignora la major part dels espais en blanc); amb aquests elements en el codi, el marcatge es mostra així:

- -

There once was a girl called Nell
- Who loved to write HTML
- But her structure was bad, her semantics were sad
- and her markup didn't read very well.

- -

Els elements <hr> creen un separador horitzontal en el document que indica un canvi de temàtica en el text (com ara un canvi de tema o escena). Visualment es veu com una línia horitzontal. A tall d'exemple:

- -
<p>Ron was backed into a corner by the marauding netherbeasts. Scared, but determined to protect his friends, he raised his wand and prepared to do battle, hoping that his distress call had made it through.</p>
-<hr>
-<p>Meanwhile, Harry was sitting at home, staring at his royalty statement and pondering when the next spin off series would come out, when an enchanted distress letter flew through his window and landed in his lap. He read it hasily, and lept to his feet; "better get back to work then", he mused.</p>
- -

Seria com això:

- -

Ron was backed into a corner by the marauding netherbeasts. Scared, but determined to protect his friends, he raised his wand and prepared to do battle, hoping that his distress call had made it through.

- -
-

Meanwhile, Harry was sitting at home, staring at his royalty statement and pondering when the next spin off series would come out, when an enchanted distress letter flew through his window and landed in his lap. He read it hasily and sighed; "better get back to work then", he mused.

- -

Planificar un lloc web senzill

- -

Una vegada planificat el contingut d'una pàgina web simple, el pas lògic següent és tractar d'esbrinar quin contingut volem posar en tota la pàgina web, quines pàgines es necessitaran i de quina manera s'han d'arranjar i enllaçar l’una amb l'altra per a oferir la millor experiència d'usuari possible. Això s’anomena {{glossary("Arquitectura de la informació")}}. En un lloc web gran i complex, aquest procés pot requerir una gran planificació, però per a un lloc web senzill d'unes poques pàgines això pot ser força senzill, i fins i tot divertit!

- -
    -
  1. Has de tenir en compte que hi ha d’haver uns quants elements comuns en la majoria de pàgines (si no totes), com ara el menú de navegació i els continguts del peu de pàgina. Si el lloc és per una empresa, per exemple, és una bona idea que tingui la informació de contacte disponible al peu de pàgina de cada pàgina. Apunta quins continguts vols que siguin comuns a totes les pàgines.Els elements comuns que hi ha d'haver a cada pàgina d'una pàgina web de viatges: el títol i el logotip, la informació de contacte, el copyright, la declaració de termes i condicions, el selector d'idioma, la política d'accessibilitat
    2. -
  2. A continuació, dibuixa un esbós de quina estructura vols que presenti cada pàgina (pot ser semblant a la nostra pàgina web senzilla d’abans). Pren nota de què hi haurà a cada bloc. Un diagrama senzill d'una mostra de l'estructura d'un lloc web, amb una capçalera, l'àrea de contingut principal , dues barres laterals i un peu de pàgina.
    3. -
  3. Ara, fes una previsió (una pluja d'idees) de la resta de continguts (que no seran comuns a totes les pàgines) que vols que hi hagi al lloc web; escriu-ne tota la llista, tan llarga com vulguis. Una llarga llista de tots els elements que podríem posar en el nostre lloc web de viatges, des d'un cercador fins a ofertes especials o informació específica per a cada país
    4. -
  4. A continuació, ordena tots aquests elements de contingut per grups, perquè et puguis fer una idea de quines parts poden anar juntes en les diferents pàgines. Això és molt similar a una tècnica anomenada classificació de targetes, o {{glossary("card sorting")}}. Els elements que haurien d'aoparpèixer en un lloc web de vacances, repartits en 5 categories: Cercar, Ofertes especials, Informació específica de país, Resultats de cerca i Compres.
    5. -
  5. Ara, dibuixa un mapa del lloc web en brut; dibuixa un globus per a cada pàgina del lloc web, i línies que mostrin el flux de treball esperat entre les pàgines. La pàgina d'inici probablement estarà al centre, i s’enllaçarà amb la majoria de les altres, si no amb totes; la major part de les pàgines d'un lloc web petit han d'estar disponibles en la navegació principal, encara que hi ha excepcions. També hi pots voler incloure observacions sobre com podrien presentar-se les coses.Un mapa del lloc web que mostra les pàgines d'inici, informació específica del país, resultats de cerca, pagament i compres
    6. -
- -

Aprenentatge actiu: crea el teu mapa de lloc web propi

- -

Fes l'exercici anterior per a un lloc web de creació pròpia. De què t’agradaria fer un lloc web?

- -
-

Nota: Desa el teu treball en algun lloc; pot ser que el necessitis més endavant.

-
- -

Resum

- -

En aquest punt hauries de tenir idea més clara sobre com estructurar una pàgina/lloc web. En l'últim article d'aquest mòdul, estudiarem com depurar l’HTML.

- -

Mira també

- - - -

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}

diff --git "a/files/ca/learn/html/introducci\303\263_al_html/estructurar_una_p\303\240gina_de_contingut/index.html" "b/files/ca/learn/html/introducci\303\263_al_html/estructurar_una_p\303\240gina_de_contingut/index.html" deleted file mode 100644 index e3481bdc15..0000000000 --- "a/files/ca/learn/html/introducci\303\263_al_html/estructurar_una_p\303\240gina_de_contingut/index.html" +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: Estructurar una pàgina de contingut -slug: Learn/HTML/Introducció_al_HTML/Estructurar_una_pàgina_de_contingut -tags: - - Assessment - - Beginner - - CodingScripting - - Design - - HTML - - Layout - - Learn - - Structure - - semantics -translation_of: Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content ---- -
{{LearnSidebar}}
- -
{{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}
- -

L'estructuració d'una pàgina de contingut llest per dissenyar, utilitzant CSS, és una habilitat molt important per dominar, pel que en aquesta avaluació es provarà la vostra capacitat de pensar sobre com una pàgina podria acabar veient-se, i triar la semàntica estructural apropiada per construir un disseny damunt.

- - - - - - - - - - - - -
Requisits previs:Abans de procedir a aquesta avaluació heu hagut de treballar la resta del curs, amb un èmfasi particular en Documents i estructura del lloc web.
Objectiu:Posar a prova el coneixement de les estructures de pàgines web, i com representar un esquema de diseny possible en el marcat.
- -

Punt de partida

- -

Per obtenir aquesta avaluació inicial, cal anar i agafar l'arxiu zip que conté tots els recursos per començar. L'arxiu zip conté:

- - - -

Crear l'exemple en el vostre equip local, o bé, utilitzar un lloc com JSBin or Thimble per fer la vostra avaluació.

- -

Resum del projecte

- -

Per a aquest projecte, la tasca és prendre el contingut de la pàgina principal d'un lloc web d'observació d'aus i afegir elements estructurals a la mateixa, pel que pot tenir un disseny de pàgina que se li aplica. S'ha de tenir:

- - - -

Cal afegir un embolcall adequat per a:

- - - -

També s'ha de:

- - - -

Consells i suggeriments

- - - -

Exemple

- -

La següent captura de pantalla mostra un exemple del que la pàgina podria ser després del seu marcatge.

- -

The finished example for the assessment; a simple webpage about birdwatching, including a heading of "Birdwatching", bird photos, and a welcome message

- -

Avaluació

- -

Si esteu seguint aquesta avaluació com a part d'un curs organitzat, heu de ser capaços de donar al vostre treball al vostre professor/tutor per qualificar-ho. Si sou d'auto-aprenentatge, llavors podeu obtenir la guia de qualificació amb molta facilitat preguntan fil del discurs de l'àrea d'aprenentatge o al canal d'IRC #mdn en Mozilla IRC. Prova el primer exercici - no hi ha res a guanyar amb trampa!

- -

{{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}

diff --git "a/files/ca/learn/html/introducci\303\263_al_html/fonaments_de_text_html/index.html" "b/files/ca/learn/html/introducci\303\263_al_html/fonaments_de_text_html/index.html" deleted file mode 100644 index fafc49effe..0000000000 --- "a/files/ca/learn/html/introducci\303\263_al_html/fonaments_de_text_html/index.html" +++ /dev/null @@ -1,950 +0,0 @@ ---- -title: Fonaments de text HTML -slug: Learn/HTML/Introducció_al_HTML/Fonaments_de_text_HTML -tags: - - Beginner - - CodingScripting - - Guide - - HTML - - Introduction to HTML - - Learn - - Text - - headings - - paragraphs - - semantics -translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}
- -

Una de les funcions principals de l'HTML és donar estructura i significat al text (també conegut com {{glossary("semàntica")}}), perquè el navegador el pugui mostrar correctament. En aquest article s'explica la forma com es pot utilitzar {{glossary("HTML")}} per estructurar una pàgina de text afegint títols i paràgrafs, destacant paraules, amb la creació de llistes, i més.

- - - - - - - - - - - - -
Requisits previs:Familiaritzar-se amb els elements bàsics de l’HTML, com es tracta en Inici en HTML.
Objectiu:Aprendre com marcar una pàgina bàsica de text per donar-hi estructura i significat - incloent paràgrafs, capçaleres, llistes, destacats i cites.
- -

Conceptes bàsics: capçaleres i paràgrafs

- -

La majoria del text estructurat es compon de títols i paràgrafs, independentment de si llegeixes una història, un diari, un llibre de text universitari, una revista, etc.

- -

An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs.

- -

El contingut estructurat fa que l'experiència de llegir sigui més fàcil i agradable.

- -

En HTML, cada paràgraf s’ha de delimitar amb un element {{htmlelement("p")}}, així:

- -
<p>I am a paragraph, oh yes I am.</p>
- -

Cada títol s’ha de delimitar amb un element de títol:

- -
<h1>I am the title of the story.</h1>
- -

Hi ha sis elements de títol: {{htmlelement("h1")}}, {{htmlelement("h2")}}, {{htmlelement("h3")}}, {{htmlelement("h4")}}, {{htmlelement("h5")}} i {{htmlelement("h6")}}. Cada element representa un nivell de contingut diferent del document; <h1> representa el títol principal, <h2> representa un subtítol, <h3> representa un subsubtítol, i així successivament.

- -

Implementar una estructura jeràrquica

- -

A tall d'exemple, en una història, <h1> representaria el títol de la història, <h2> representaria el títol de cada capítol i <h3> representaria subseccions de cada capítol, i així successivament.

- -
<h1>The Crushing Bore</h1>
-
-<p>By Chris Mills</p>
-
-<h2>Chapter 1: The Dark Night</h2>
-
-<p>It was a dark night. Somewhere, an owl hooted. The rain lashed down on the ...</p>
-
-<h2>Chapter 2: The eternal silence</h2>
-
-<p>Our protagonist could not so much as a whisper out of the shadowy figure ...</p>
-
-<h3>The specter speaks</h3>
-
-<p>Several more hours had passed, when all of a sudden the specter sat bolt upright and exclaimed, "Please have mercy on my soul!"</p>
- -

Què representen exactament els elements que intervenen depèn en realitat de tu, sempre que la jerarquia tingui sentit. Només has de tenir en compte un seguit de bones pràctiques a mesura que crees aquest tipus d'estructures:

- - - -

Per què cal una estructura?

- -

Per respondre a aquesta pregunta, fem una ullada a text-start.html; el punt de partida del nostre exemple d'aquest article (una bona recepta d’humus). Desa una còpia d'aquest arxiu a l'ordinador, el necessitaràs per als exercicis més endavant. El cos d'aquest document actualment conté diversos elements de contingut, que no estan marcats de cap manera, però estan separats per salts de línia (Intro/Retorn picat per a passar a la línia següent).

- -

No obstant això, quan obres el document en el navegador, observa que el text apareix com gran garbuix!

- -

A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it.

- -

Això és perquè no hi ha elements que donin estructura als continguts, de manera que el navegador no sap què és un títol i què és un paràgraf. A més:

- - - -

Per tant, hem de donar al nostre contingut un etiquetatge estructural.

- -

Aprenentatge actiu: donar estructura als continguts

- -

Passem directament a un exemple en viu. En l'exemple següent, afegim elements al text sense format en el requadre d’entrada perquè en el requadre de sortida aparegui com un títol i dos paràgrafs.

- -

Si t’equivoques, sempre pots tornar a començar amb el botó de reinici. Si t’encalles, fes clic al botó Mostra la solució per veure la resposta.

- - - -

{{ EmbedLiveSample('Playable_code', 700, 500) }}

- -

Per què cal semàntica?

- -

Tot al nostre entorn compta amb la semàntica; comptem amb l'experiència prèvia per a conèixer la funció dels objectes quotidians; quan veiem una cosa, sabem quina és la seva funció. Així, per exemple, esperem que un semàfor en vermell tingui el sentit de «parar», i un semàfor en verd signifiqui «continuar». Si apliquem malament la semàntica, les coses poden complicar-se ràpidament (hi ha cap país en què el vermell signifiqui «continuar»? Esperem que no!).

- -

En una línia similar, ens hem d’assegurar que utilitzem els elements correctes per a donar al nostre contingut el significat, la funció o l’aspecte correctes. En aquest context, l'element {{htmlelement("h1")}} és també un element semàntic, que dona al text al qual delimita la funció (o el sentit) d'un «nivell superior en la capçalera de la teva pàgina».

- -
<h1>This is a top level heading</h1>
- -

Per defecte, el navegador hi donarà una mida de cos de lletra gran perquè es vegi com un títol d’encapçalament (encara que amb CSS podries aplicar-hi estil perquè tingui l’aspecte que vulguis). I encara és més important el fet que el seu valor semàntic s’utilitzarà de diverses maneres, per exemple, l’empraran els motors de cerca i els lectors de pantalla (com hem esmentat abans).

- -

D'altra banda, tu pots fer que qualsevol element sembli un títol de nivell superior. Considera el codi següent:

- -
<span style="font-size: 32px; margin: 21px 0;">Is this a top level heading?</span>
- -

Aquest és un element {{htmlelement("span")}}. No té semàntica. Es fa servir per a delimitar el contingut quan vols aplicar-hi CSS (o fer alguna cosa amb JavaScript) sense donar-hi cap significat addicional (en trobaràs més informació més endavant en el curs). Hi hem aplicat una mica de CSS perquè es vegi com un títol de nivell superior, però ja que no té valor semàntic, no aconseguirà cap dels beneficis addicionals que hem esmentat abans. És bo emprar l'element HTML que correspon a cada funció.

- -

Llistes

- -

Ara centrarem la nostra atenció en les llistes. Les llistes estan per tot arreu en la vida, de la llista de la compra a la llista de carrers que seguim subconscientment per a arribar a casa cada dia, a les llistes d'instruccions que segueixes en aquests tutorials! Les llistes també estan pertot arreu al web, i n’hi ha tres tipus diferents dels quals ens volem ocupar.

- -

No ordenades

- -

Les llistes no ordenades s'utilitzen per a marcar les llistes d'elements en què l'ordre dels elements no és important; com a exemple, farem una llista de la compra.

- -
milk
-eggs
-bread
-hummus
- -

Totes les llistes no ordenades comencen amb un element {{htmlelement("ul")}} que delimita tots els elements de la llista:

- -
<ul>
-milk
-eggs
-bread
-hummus
-</ul>
- -

L'últim pas consisteix a delimitar cada element de la llista amb un element {{htmlelement("li")}} (element de llista):

- -
<ul>
-  <li>milk</li>
-  <li>eggs</li>
-  <li>bread</li>
-  <li>hummus</li>
-</ul>
- -

Aprenentatge actiu: etiquetatge d'una llista no ordenada

- -

Modifica l'exemple en viu a continuació per a crear la teva llista HTML no ordenada pròpia.

- - - -

{{ EmbedLiveSample('Playable_code_2', 700, 400) }}

- -

Ordenades

- -

Les llistes ordenades són llistes en què l'ordre dels elements és important. Com a exemple, prendrem un seguit d’instruccions per a arribar a una adreça:

- -
Drive to the end of the road
-Turn right
-Go straight across the first two roundabouts
-Turn left at the third roundabout
-The school is on your right, 300 meters up the road
- -

L'estructura de l’etiquetatge és la mateixa que per a les llistes no ordenades, excepte que cal delimitar els elements de la llista amb un element {{htmlelement("ol")}}, en lloc d’amb un element <ul>:

- -
<ol>
-  <li>Drive to the end of the road</li>
-  <li>Turn right</li>
-  <li>Go straight across the first two roundabouts</li>
-  <li>Turn left at the third roundabout</li>
-  <li>The school is on your right, 300 meters up the road</li>
-</ol>
- -

Aprenentatge actiu: etiquetatge d'una llista ordenada

- -

Modifica l'exemple en viu a continuació per a crear la teva llista HTML ordenada pròpia.

- - - -

{{ EmbedLiveSample('Playable_code_3', 700, 500) }}

- -

Aprenentatge actiu: etiquetatge de la teva pàgina de receptes

- -

En aquest punt de l'article ja tens tota la informació que necessites per a marcar el teu exemple d’una pàgina de receptes. Pots optar per desar una còpia local del nostre arxiu d'inici text-start.html i fer la feina allà, o fer-ho en l'exemple editable a continuació. Fer-ho de manera local probablement serà millor, perquè aleshores podràs desar la feina que hi facis, mentre que si treballes en l'exemple editable, la perdràs la vegada següent que obris la pàgina. Totes dues coses tenen pros i contres.

- - - -

{{ EmbedLiveSample('Playable_code_4', 700, 500) }}

- -

Si t’encalles, sempre es pot prémer el botó Mostra la solució o fer un cop d'ull al nostre exemple text-complete.html que trobaràs en el nostre repositori de GitHub.

- -

Llistes imbricades

- -

És perfectament correcte imbricar una llista dins d'una altra. És possible que vulguis tenir subvinyetes sota d’una vinyeta de nivell superior. Considera la segona llista del nostre exemple recepta:

- -
<ol>
-  <li>Remove the skin from the garlic, and chop coarsely.</li>
-  <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>
-  <li>Add all the ingredients into a food processor.</li>
-  <li>Process all the ingredients into a paste.</li>
-  <li>If you want a coarse "chunky" humous, process it for a short time.</li>
-  <li>If you want a smooth humous, process it for a longer time.</li>
-</ol>
- -

Atès que les dues últimes vinyetes estan molt estretament relacionades amb l'anterior (es llegeixen com a subinstruccions o opcions que s'ajusten per sota d'aquesta vinyeta), podria tenir sentit imbricar-les en una llista desordenada pròpia i posar aquesta llista dins de la quarta vinyeta. Es veuria així:

- -
<ol>
-  <li>Remove the skin from the garlic, and chop coarsely.</li>
-  <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>
-  <li>Add all the ingredients into a food processor.</li>
-  <li>Process all the ingredients into a paste.
-    <ul>
-      <li>If you want a coarse "chunky" humous, process it for a short time.</li>
-      <li>If you want a smooth humous, process it for a longer time.</li>
-    </ul>
-  </li>
-</ol>
- -

Torna a l'exemple de l'aprenentatge actiu anterior i modifica la segona llista de la mateixa manera.

- -

Èmfasi i importància

- -

En el llenguatge humà, sovint destaquem certes paraules per a alterar el significat d'una oració, i moltes vegades volem ressaltar certes paraules perquè són importants o perquè són diferents d'alguna manera. HTML proporciona diversos elements semàntics que permeten destacar el contingut textual amb aquesta finalitat, i en aquest apartat en veurem alguns dels més comuns.

- -

Èmfasi

- -

Quan en el llenguatge parlat volem donar èmfasi, accentuem certes paraules de manera que n’alterem subtilment el significat. De la mateixa manera, en el llenguatge escrit tendim a posar en cursiva les paraules que volem emfatitzar. Per exemple, les dues frases següents tenen significats diferents.

- -

I am glad you weren't late.

- -

I am glad you weren't late.

- -

La primera frase expressa alleujament autèntic perquè la persona no arriba tard. Per contra, la segona sona amb sarcasme o agressivitat passiva, que expressa enuig perquè la persona arriba una mica tard.

- -

En HTML s'utilitza l'element {{htmlelement("em")}} (èmfasi) per marcar aquests casos. Alhora que fa que el document sigui més interessant de llegir, els lectors de pantalla reconeixen aquests elements i hi incorporen un to de veu parlat diferent. Els navegadors hi apliquen per defecte l’estil de lletra cursiva, però aquesta etiqueta no és l’única que podem usar per a donar un estil de lletra cursiva. Per a això també podem utilitzar un element {{htmlelement("span")}} i una mica de CSS, o potser un element {{htmlelement("i")}} (veure més endavant).

- -
<p>I am <em>glad</em> you weren't <em>late</em>.</p>
- -

Importància forta

- -

Per a destacar la importància de les paraules, en el llenguatge parlat tendim a accentuar-les, i en el llenguatge escrit les posem en lletra negreta. Per exemple:

- -

This liquid is highly toxic.

- -

I am counting on you. Do not be late!

- -

En HTML s'utilitza l'element {{htmlelement("strong")}} (importància forta) per a destacar aquests casos. A mes de fer el document més útil, de nou els lectors de pantalla reconeixen aquests elements i hi apliquen un to de veu diferent. L'estil per defecte que els navegadors apliquen a aquest text és la lletra negreta, però aquesta etiqueta no és l’única que podem usar per a aplicar l’estil de lletra negreta. Per a això també podem utilitzar un element {{htmlelement("span")}} i una mica de CSS, o potser un element {{htmlelement("b")}} (veure més endavant).

- -
<p>This liquid is <strong>highly toxic</strong>.</p>
-
-<p>I am counting on you. <strong>Do not</strong> be late!</p>
- -

Pots imbricar etiquetes d’importància i èmfasi les unes dins de les altres, si ho vols:

- -
<p>This liquid is <strong>highly toxic</strong> —
-if you drink it, <strong>you may <em>die</em></strong>.</p>
- -

Aprenentatge actiu: ser important!

- -

En aquesta secció d'aprenentatge actiu, et proporcionem un exemple editable. Per a adquirir una mica de pràctica, afegeix èmfasi i importància a les paraules que penses que ho necessiten.

- - - -

{{ EmbedLiveSample('Playable_code_5', 700, 500) }}

- -

Cursiva, negreta, subratllat...

- -

Els elements que hem tractat fins ara tenen una semàntica associada clara. La situació amb {{htmlelement("b")}}, {{htmlelement("i")}} i {{htmlelement("u")}} és una mica més complicada. Van arribar perquè la gent pogués escriure text en negreta, cursiva o subratllat en una època en què el CSS encara era poc compatible, o gens en absolut. Elements com aquests només afecten la presentació, però no la semàntica; es coneixen com elements de presentació i ja no s'haurien d'utilitzar perquè, com hem vist, la semàntica és molt important per a l'accessibilitat, el posicionament SEO, etc.

- -

HTML5 va redefinir les etiquetes <b>, <i> i <u> amb funcions semàntiques noves, que tanmateix resulten un xic confuses.

- -

Aquesta és la millor regla d'or: només és apropiat utilitzar <b>, <i> o <u> quan es vol transmetre un significat que tradicionalment s’ha expressat amb lletra negreta, cursiva o subratllat, si no hi ha cap element més adequat. No obstant això, sempre continua sent crític mantenir una mentalitat d'accessibilitat. El concepte de cursiva no és gaire útil per a les persones que utilitzen lectors de pantalla, ni per a les persones que utilitzen un sistema d'escriptura que no sigui l'alfabet llatí.

- - - -
-

Una advertència amable sobre el subratllat: la gent associa en gran mesura el subratllat amb els hipervincles. Per tant, a la web, és millor posar en subratllat només els enllaços. Utilitza l'element <u> quan sigui semànticament apropiat, però considera l'ús de CSS per a canviar el valor per omissió del subratllat per alguna cosa més apropiada en la web. L’exemple següent il·lustra com es pot fer:

-
- -
<!-- scientific names -->
-<p>
-  The Ruby-throated Hummingbird (<i>Archilocus colubris</i>)
-  is the most common hummingbird in Eastern North America.
-</p>
-
-<!-- foreign words -->
-<p>
-  The menu was a sea of exotic words like <i lang="uk-latn">vatrushka</i>,
-  <i lang="id">nasi goreng</i> and <i lang="fr">soupe à l'oignon</i>.
-</p>
-
-<!-- a known misspelling -->
-<p>
-  Someday I'll learn how to <u>spel</u> better.
-</p>
-
-<!-- Highlight keywords in a set of instructions -->
-<ol>
-  <li>
-    <b>Slice</b> two pieces of bread off the loaf.
-  </li>
-  <li>
-    <b>Insert</b> a tomato slice and a leaf of
-    lettuce between the slices of bread.
-  </li>
-</ol>
- -

Resum

- -

Això és tot per ara! Aquest article t’hauria d’haver donat una idea prou bona de com començar a marcar text en HTML i presentat alguns dels elements més importants en aquest àmbit. Hi ha molts més elements semàntics per a exposar en aquest àmbit, i en veurem molts més en el nostre article «Format de text avançat», més endavant en el curs. En el proper article, veurem amb detall com crear hipervincles, possiblement l'element més important en la web.

- -

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}

diff --git "a/files/ca/learn/html/introducci\303\263_al_html/format_de_text_avan\303\247at/index.html" "b/files/ca/learn/html/introducci\303\263_al_html/format_de_text_avan\303\247at/index.html" deleted file mode 100644 index 8163f0b4c3..0000000000 --- "a/files/ca/learn/html/introducci\303\263_al_html/format_de_text_avan\303\247at/index.html" +++ /dev/null @@ -1,677 +0,0 @@ ---- -title: Format de text avançat -slug: Learn/HTML/Introducció_al_HTML/Format_de_text_avançat -tags: - - Beginner - - CodingScripting - - Guide - - HTML - - Learn - - Text - - abbreviation - - description list - - quote - - semantic -translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}
- -

Hi ha molts altres elements en HTML per a la formatació del text, que no hem vist en l'article sobre els elements bàsics de text HTML. Els elements que es descriuen en aquest article són menys coneguts, però són útils de conèixer (i això no és encara en absolut una llista completa). Aquí aprendreu sobre l’etiquetatge de les citacions, de les llistes de descripció, del codi d'ordinador i altres textos relacionats, dels subíndexs i superíndexs, de la informació de contacte, i de molt més.

- - - - - - - - - - - - -
Requisits previs:Familiarització amb els elements bàsics de l’HTML, com es tracten en iniciació a l’HTML. Aplicació de format a textos amb HTML, com s'explica en els Elements bàsics de text en HTML.
Objectiu:Aprendre a utilitzar elements HTML menys coneguts per a etiquetar característiques semàntiques avançades.
- -

Llistes de descripció

- -

En els elements bàsics de text en HTML, hem fet camí pels elements d’etiquetatge bàsics de les llistes en HTML, però no hem esmentat un tercer tipus de llistes amb que et pots topar de tant en tant, les llistes de descripció. El propòsit d'aquestes llistes és etiquetar un conjunt d'elements i les descripcions associades a aquests, com ara termes i definicions, o preguntes i respostes. Vegem un exemple d'un conjunt de termes i definicions:

- -
soliloquy
-In drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process relaying them to the audience (but not to other characters.)
-monologue
-In drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present.
-aside
-In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought or piece of addtional background information
- -

Les llistes de descripció utilitzen un etiquetatge diferent dels altres tipus de llistes, l’element {{htmlelement("dl")}}; a més, cada terme es delimita amb un element {{htmlelement("dt")}} (descripció del terme), i cada descripció es delimita amb un element {{htmlelement("dd")}} (definició de la descripció). Acabem d’etiquetar el nostre exemple:

- -
<dl>
-  <dt>soliloquy</dt>
-  <dd>In drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process relaying them to the audience (but not to other characters.)</dd>
-  <dt>monologue</dt>
-  <dd>In drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present.</dd>
-  <dt>aside</dt>
-  <dd>In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought or piece of addtional background information.</dd>
-</dl>
- -

Els estils per defecte del navegador mostren els termes de les llistes de descripció sagnats en certa mesura respecte de les descripcions. Els estils de MDN segueixen aquesta convenció de bastant a prop, però a més, destaquen els termes amb lletra negreta.

- -
-
soliloquy
-
In drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process relaying them to the audience (but not to other characters.)
-
monologue
-
In drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present.
-
aside
-
In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought or piece of addtional background information.
-
- -

Observa que pots tenir múltiples descripcions per a un mateix terme; per exemple:

- -
<dl>
-  <dt>aside</dt>
-  <dd>In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought, or piece of additional background information.</dd>
-  <dd>In writing, a section of content that is related to the current topic, but doesn't fit directly into the main flow of content so is presented nearby (often in a box off to the side.)</dd>
-</dl>
- -
-
aside
-
In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought or piece of addtional background information.
-
In writing, a section of content that is related to the current topic, but doesn't fit directly into the main flow of content so is presented nearby (often in a box off to the side.)
-
- -

Aprenentatge actiu: etiquetatge d'un conjunt de definicions

- -

És l’hora de posar a prova la teva destresa amb les llistes de descripció; afegeix elements al text sense format en el camp d'entrada perquè aparegui com una llista de descripció en el camp de sortida. Si vols, pots fer servir termes i descripcions propis..

- -

Si t’equivoques, sempre pots tornar a començar amb el botó de Reinicia. Si t’encalles, fes clic al botó, Mostra la solució per veure la resposta.

- - - -

{{ EmbedLiveSample('Playable_code', 700, 350, "", "", "hide-codepen-jsfiddle") }}

- -

Citacions

- -

L'HTML també disposa de característiques per a l’etiquetatge de cites; quin element s'utilitza depèn de si s’etiqueta en el nivell de bloc o es fa en el nivell de línia.

- -

Elements de bloc de citació (blockquotes)

- -

Per a indicar que una secció de continguts de nivell de bloc (un paràgraf, diversos paràgrafs, una llista, etc.) se cita des d'un altre lloc l’has d’etiquetar amb un element {{HTMLElement("blockquote")}}, i has d’incloure en un atribut {{htmlattrxref("cite","blockquote")}} una URL que apunti cap a la font de la citació. Per exemple, la línia de codi següent es pren de la pàgina MDN: «L'element <blockquote>»:

- -
<p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block
-Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
- -

Per convertir això en una citació de bloc, has de fer això:

- -
<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
-  <p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block
-  Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
-</blockquote>
- -

L’estil per defecte del navegador mostra això com un paràgraf sagnat per indicar que es tracta d'una citació; MDN fa això, però també hi afegeix una mica més d'estil:

- -
-

L'element  HTML <blockquote> (o element de bloc de citació HTML) indica que el text associat és una citació extensa.

-
- -

Elements de línia de citació

- -

Els elements de línia de citació funcionen exactament de la mateixa manera, només que utilitzen l'element {{htmlelement("q")}}. Per exemple, l’etiquetatge que tens a continuació inclou una citació de la pàgina de MDN sobre <q>:

- -
<p>The quote element — <code>&lt;q&gt;</code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">intended
-for short quotations that don't require paragraph breaks.</q></p>
- -

L'estil per defecte del navegador mostra aquest text com un element normal posat entre cometes per a indicar que és una citació, com això:

- -

The quote element — <q> — is intended for short quotations that don't require paragraph breaks.

- -

Citacions

- -

El contingut de l'atribut {{htmlattrxref("cite","blockquote")}} sembla útil, però per desgràcia als navegadors, als lectors de pantalla, etc., no hi fan gaire. No hi ha manera d'aconseguir que el navegador mostri el contingut de cite sense necessitat d'escriure una solució pròpia amb JavaScript o CSS. Si vols que la font de la citació estigui disponible a la pàgina, la millor manera és etiquetar-la amb l'element {{HTMLElement("cite")}} al costat de l'element quote. Això serveix en realitat per a incloure el nom de la font de la citació, és a dir, el nom del llibre o el de la persona de qui és el text que se cita; però no hi ha cap raó per la qual el text no es pugui associar d'alguna manera la font de la cita dins de <cite>:

- -
<p>According to the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
-<cite>MDN blockquote page</cite></a>:
-</p>
-
-<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
-  <p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block
-  Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
-</blockquote>
-
-<p>The quote element — <code>&lt;q&gt;</code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">intended
-for short quotations that don't require paragraph breaks.</q> -- <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">
-<cite>MDN q page</cite></a>.</p>
- -

Les citacions tenen l'estil en cursiva per defecte.

- -

{{EmbedLiveSample('Citations', '100%', '179px', '', '', 'hide-codepen-jsfiddle')}}

- -

Aprenentatge actiu: Qui ha dit això?

- -

Temps per a un altre exemple d'aprenentatge actiu! En aquest exemple ens agradaria:

- -
    -
  1. Convertir el paràgraf del mig en un bloc de citació que inclogui un atribut cite.
    2. -
  2. Convertir una part del tercer paràgraf en una citació de línea que inclogui un atribut cite.
    3. -
  3. Incloure un element <cite> per a cada citació
    4. -
- -

Cerca a Internet per trobar fonts de citacions apropiades.

- -

Si t’equivoques, sempre pots tornar a l’inici amb el botó de Reinicia. Si t’encalles, fes clic al botó Mostra la solució per veure la resposta.

- - - -

{{ EmbedLiveSample('Playable_code_2', 700, 500) }}

- -

Abreviatures

- -

Un altre element força comú que et trobes quan et passeges per la web és {{HTMLElement ("abbr")}}. Aquesta etiqueta serveix per a delimitar una abreviatura o un acrònim i proporcionar el desenvolupament complet del terme (que s’inclou dins d'un atribut {{htmlattrxref("title")}}). Vegem-ne un parell d'exemples:

- -
<p>We use <abbr title="Hypertext Markup Language">HTML</abbr> to structure our web documents.</p>
-
-<p>I think <abbr title="Reverend">Rev.</abbr> Green did it in the kitchen with the chainsaw.</p>
- -

Ve a ser una cosa com això (el desenvolupament apareix en un indicador de funció quan passes el cursor per sobre del terme):

- -

We use HTML to structure our web documents.

- -

I think Rev. Green did it in the kitchen with the chainsaw.

- -
-

Nota: Hi ha un altre element, {{HTMLElement ("acronym")}}, que bàsicament fa el mateix que <abbr> i que estava destinat específicament als acrònims, en lloc de les abreviatures, però que ha caigut en desús; tampoc era compatible amb tots els navegadors, com ho és <abbr>, i com que les dues etiquetes tenen una funció tan similar, es va considerar inútil tenir-les totes dues. Per tant, fes servir només <abbr>.

-
- -

Aprenentatge actiu: etiquetatge d'una abreviatura

- -

Per a aquesta senzilla tasca d'aprenentatge actiu, només et proposem de fer l’etiquetatge d'una abreviatura. Pots utilitzar el nostre exemple a continuació, o substituir-lo per un de la teva elecció. 

- - - -

{{ EmbedLiveSample('Playable_code_3', 700, 350) }}

- -

Etiquetatge de les dades de contacte

- -

HTML té un element per a etiquetar les teves dades de contacte: {{htmlelement("address")}}. Aquesta etiqueta senzillament delimita de les dades de contacte; per exemple:

- -
<address>
-  <p>Chris Mills, Manchester, The Grim North, UK</p>
-</address>
- -

També s'hi pot incloure marcatge més comples, i d'altres formes d'informació de contacte, com ara:

- -
<address>
-  <p>
-    Chris Mills<br>
-    Manchester<br>
-    The Grim North<br>
-    UK
-  </p>
-
-  <ul>
-    <li>Tel: 01234 567 890</li>
-    <li>Email: me@grim-north.co.uk</li>
-  </ul>
-</address>
- -

Fixeu-vos que una cosa com la següent també seria vàlida, si la pàgina enllaçada contingués informació de contacte:

- -
<address>
-  <p>Page written by <a href="../authors/chris-mills/">Chris Mills</a>.</p>
-</address>
- -

Superíndex i subíndex

- -

De tant en tant hauràs d’utilitzar superíndex i subíndex per a etiquetar correctament elements com ara dates, fórmules químiques o equacions matemàtiques. Els elements {{htmlelement("sup")}} i {{htmlelement("sub")}} gestionen aquesta feina. Per exemple:

- -
<p>My birthday is on the 25<sup>th</sup> of May 2001.</p>
-<p>Caffiene's chemical formula is C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p>
-<p>If x<sup>2</sup> is 9, x must equal 3 or -3.</p>
- -

La sortida d'aquest codi és com això:

- -

My birthday is on the 25th of May 2001.

- -

Caffeine's chemical formula is C8H10N4O2.

- -

If x2 is 9, x must equal 3 or -3.

- -

Representar codi informàtic

- -

Hi ha una sèrie d'elements disponibles per a l’etiquetatge de codi informàtic:

- - - -

Vegem-ne uns exemples. Juga amb aquests exemples (fes una còpia del nostre arxiu d'exemple other-semantics.html):

- -
<pre><code>var para = document.querySelector('p');
-
-para.onclick = function() {
-  alert('Owww, stop poking me!');
-}</code></pre>
-
-<p>You shouldn't use presentational elements like <code>&lt;font&gt;</code> and <code>&lt;center&gt;</code>.</p>
-
-<p>In the above JavaScript example, <var>para</var> represents a paragraph element.</p>
-
-
-<p>Select all the text with <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd>.</p>
-
-<pre>$ <kbd>ping mozilla.org</kbd>
-<samp>PING mozilla.org (63.245.215.20): 56 data bytes
-64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms</samp></pre>
- -

El codi anterior es veuria així:

- -

{{ EmbedLiveSample('Representar_codi_informàtic','100%',300) }}

- -

Etiquetatge d'hores i dates

- -

HTML també proporciona l'element {{htmlelement("time")}} per a etiquetar les hores i les dates en un format llegible per la màquina. Per exemple:

- -
<time datetime="2016-01-20">20 January 2016</time>
- -

Per què és això útil? Bé, hi ha moltes maneres diferents d’escriure les dates. La data anterior es podria escriure de totes aquestes maneres:

- - - -

Però els ordinadors no reconeixen fàcilment aquesta diversitat de formes. Si vols agafar automàticament les dates de tots els esdeveniments en una pàgina i inserir-los en un calendari, l'element {{htmlelement("time")}} et permet adjuntar una hora/data que una màquina podrà llegir inequívocament .

- -

L'exemple bàsic anterior proporciona una simple data llegible per una màquina, però hi ha moltes altres opcions que són possibles, per exemple:

- -
<!-- Standard simple date -->
-<time datetime="2016-01-20">20 January 2016</time>
-<!-- Just year and month -->
-<time datetime="2016-01">January 2016</time>
-<!-- Just month and day -->
-<time datetime="01-20">20 January</time>
-<!-- Just time, hours and minutes -->
-<time datetime="19:30">19:30</time>
-<!-- You can do seconds and milliseconds too! -->
-<time datetime="19:30:01.856">19:30:01.856</time>
-<!-- Date and time -->
-<time datetime="2016-01-20T19:30">7.30pm, 20 January 2016</time>
-<!-- Date and time with timezone offset-->
-<time datetime="2016-01-20T19:30+01:00">7.30pm, 20 January 2016 is 8.30pm in France</time>
-<!-- Calling out a specific week number-->
-<time datetime="2016-W04">The fourth week of 2016</time>
- -

Resum

- -

Això marca el final del nostre estudi de la semàntica de text HTML. Tingues present que el que has vist durant aquest curs no és una llista exhaustiva dels elements de text HTML; només hem volgut exposar els elements essencials i alguns dels més comuns que et pots trobar, o si més no, que puguis trobar prou interessants. Per trobar més elements HTML pel camí, pots fer una ullada a la nostra referència d'elements HTML (la secció de la semàntica de text en línia seria un bon lloc per on començar). En l’article següent veurem els diversos elements HTML que s'usen per a estructurar les diferents parts d'un document HTML.

- -

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}

diff --git "a/files/ca/learn/html/introducci\303\263_al_html/getting_started/index.html" "b/files/ca/learn/html/introducci\303\263_al_html/getting_started/index.html" deleted file mode 100644 index 03b70effc6..0000000000 --- "a/files/ca/learn/html/introducci\303\263_al_html/getting_started/index.html" +++ /dev/null @@ -1,735 +0,0 @@ ---- -title: Inici en HTML -slug: Learn/HTML/Introducció_al_HTML/Getting_started -tags: - - Attribute - - Beginner - - CodingScripting - - Comment - - Element - - Guide - - HTML - - entity reference - - whitespace -translation_of: Learn/HTML/Introduction_to_HTML/Getting_started ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}
- -

En aquest article exposarem els fonaments bàsics de l'HTML, perquè pugueu començar. Definirem els elements, els atributs i tots els altres termes importants que podeu haver sentit, i quina funció compleixen en el llenguatge. També us mostrarem com s'estructura un element HTML, com s'estructura una pàgina HTML típica, i explicarem altres característiques bàsiques importants del llenguatge. Pel camí, jugarem una mica amb l'HTML perquè mantinguis l'interès!

- - - - - - - - - - - - -
Requisits previs:Coneixements bàsics d'informàtica, programari bàsic instal·lat i coneixements bàsics de treballar amb arxius.
Objectiu:Familiaritzar-se amb el llenguatge HTML i obtenir una mica de pràctica escrivint elements HTML.
- -

Què és HTML?

- -

{{glossary("HTML")}} (HyperText Markup Language) no és un llenguatge de programació; és un llenguatge de marcat, que serveix per dir al teu navegador la manera d'estructurar les pàgines web que visites. Pot ser tan complicat o tan simple com el desenvolupador web desitgi que sigui. HTML consisteix en un seguit d'{{glossary("Element", "elements")}}, que s'utilitzen per tancar, delimitar o marcar diferents parts del contingut per fer que aparegui o actuï d'una manera determinada . Les {{glossary("Tag", "etiquetes")}} que el delimiten poden convertir un petit fragment de contingut en un enllaç que connecti amb una altra pàgina en la web, per a posar paraules en cursiva, i així successivament. Per exemple, prenguem la següent línia de contingut:

- -
My cat is very grumpy
- -

Si volem que la línia es mantingui independent, podem especificar que és un paràgraf delimitant-la amb un element d'etiqueta de paràgraf ({{htmlelement ("p")}}):

- -
<p>My cat is very grumpy</p>
- -

Anatomia d'un element HTML

- -

Explorem una mica el nostre element paràgraf fins una mica més enllà:

- -

- -

Les parts principals del nostre element són:

- -
    -
  1. L'etiqueta d'obertura: Consisteix en el nom de l'element (en aquest cas, p), delimitat amb claus angulars d'obertura i tancament. Això indica on comença l'element, o comença a tenir efecte; en aquest cas és al començament del paràgraf.
    2. -
  2. L'etiqueta de tancament: És la mateixa que l'etiqueta d'obertura, excepte que inclou una barra inclinada abans del nom de l'element. Això indica on acaba l'element; en aquest cas és al final del paràgraf. El fet de no incloure una etiqueta de tancament és un error de principiant comú, i pot conduir a resultats estranys.
    3. -
  3. El contingut: És el contingut de l'element, que en aquest cas és només text.
    4. -
- -

L'element és l'etiqueta d'obertura, seguida del contingut, seguida de l'etiqueta de tancament.

- -

Aprenentatge actiu: crea el teu primer element HTML

- -

Edita la línia següent en l'àrea d'entrada delimitant-la amb les etiquetes <em> i </em> (posa <em> abans d'obrir l'element, i </em> després, per tancar l'element); això hauria de donar una línia en cursiva! Pots veure els canvis actualitzats en viu en l'àrea de sortida.

- -

Si t’equivoques sempre pots tornar al codi anterior amb el botó de Reinicia. Si et quedes realment encallat, fes clic al botó Mostra la solució per veure la resposta.

- - - -

{{ EmbedLiveSample('Playable_code', 700, 300) }}

- -

Niar elements

- -

També pots posar elements dins d'altres elements; això s’anomena imbricar. Si volem afirmar que el nostre gat està de molt mal humor, podem delimitar la paraula «molt» amb un element {{htmlelement("strong")}}, que significa que la paraula es destaca amb força:

- -
<p>El meu gast està de <strong>molt</strong> mal humor.</p>
- -

No obstant això, us heu d’assegurar que els elements estan correctament imbricats: en l'exemple anterior en primer lloc hem obert l'element p i a continuació l'element strong; per tant, hem de tancar l'element strong en primer lloc i l’element p a continuació. Fer el següent és incorrecte:

- -
<p>El meu gat està <strong>de molt mal humor.</p></strong>
- -

Els elements s’han d’obrir obrir i tancar correctament de manera que estiguin clarament dins o fora l’un de l'altre. Si se superposen, com a dalt, llavors el teu navegador web tractarà de fer l’estimació que li sembli més correcta del que vols dir, i així es poden obtenir resultats inesperats.

- -

Elements de bloc i elements de línia

- -

Hi ha dues categories importants d'elements en HTML, que has de conèixer: els elements de bloc i els elements de línia.

- - - -

Prenguem l'exemple següent:

- -
<em>first</em><em>second</em><em>third</em>
-
-<p>fourth</p><p>fifth</p><p>sixth</p>
-
- -

{{htmlelement("em")}} és un element de línia. Així, com es pot veure a continuació, els tres primers elements són a la mateixa línia l'un i l'altre, sense cap espai entre ells. D'altra banda, {{htmlelement("p")}} és un element de bloc, de manera que cada element apareix en una línia nova, amb un espai per sobre i per sota de cada un (L'espaiat es deu a l'aplicació d’estil CSS que el navegador aplica als paràgrafs per defecte).

- -

{{ EmbedLiveSample('Elements_de_bloc_i_elements_de_línia', 700, 200) }}

- -
-

Nota: HTML5 va redefinir les categories d'elements en HTML5: vegeu Categories d'elements de contingut. Si bé aquestes definicions són més precises i menys ambigües que les anteriors, són molt més complicades d'entendre que «de bloc» i «de línia», per la qual cosa ens quedarem amb aquestes al llarg d'aquest article.

-
- -
-

Nota: Podeu trobar pàgines de referència útils que inclouen llistes d'elements de bloc i elements de línia; vegeu els elements de nivell de bloc i els elements de línia.

-
- -

Elements buits

- -

No tots els elements segueixen el patró anterior d'etiqueta d'obertura, contingut i etiqueta de tancament. Alguns elements consisteixen en una sola etiqueta, que normalment s'utilitza per inserir/incrustar alguna cosa  en el document en el lloc on s'inclou. Per exemple, l'element {{htmlelement("img")}} insereix una imatge en una pàgina en la posició en què està inclosa:

- -
<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png">
- -

Aquesta sortida mostraria el següent a la vostra pàgina:

- -

{{ EmbedLiveSample('Elements_buits', 700, 300) }}

- -
-

Nota: Els elements buits també se'ls anomena de vegades (void elements).

-
- -

Atributs

- -

Els elements també poden tenir atributs, que tenen presenten l’aspecte següent:

- -

&lt;p class="editor-note">My cat is very grumpy&lt;/p>

- -

Els atributs contenen informació addicional sobre l'element que no vols que aparegui com a contingut. En aquest cas, l'atribut class permet donar a l'element un nom d'identificació que pot ser posteriorment utilitzat per l'element destí amb informació d'estil i altres coses.

- -

Un atribut ha de tenir:

- -
    -
  1. Un espai entre ell i el nom de l'element (o l'atribut anterior, si l'element ja té un o més atributs.)
    2. -
  2. El nom de l'atribut, seguit d'un signe igual.
    3. -
  3. Un valor d'atribut, amb signes d'obertura i de tancament de cometes que el delimiten
    4. -
- -

Aprenentatge actiu: Afegir atributs a un element

- -

Un altre exemple d'un element és {{HTMLElement ("a")}}; ve d’anchor i delimita la part del text que és un enllaç. Pot prendre un seguit d'atributs, però dos són els següents:

- - - -

Edita la línia següent en l'àrea Input per convertir-la en un enllaç al teu lloc web favorit.

- -
    -
  1. Afegeix l'element <a>.
    2. -
  2. Afegeix l'atribut href, i seguidament l'atribut title.
    3. -
  3. Especifica l'atribut target per obrir l'enllaç en una nova pestanya.
    4. -
- -

Observa els canvis actualitzats en directe a l'àrea Output. Hauries de veure un enllaç, que en passar-hi per sobre mostrarà el contingut de l'atribut title, i en clicar-hi, va a l'adreça web de l'element href. Recorda que has d’incloure un espai entre el nom de l'element i cada atribut.

- -

Si t’equivoques, sempre pots restablir el codi anterior amb el botó de reinici. Si et quedes realment encallat, fes clic al botó Mostra la solució per veure la solució.

- - - -

{{ EmbedLiveSample('Codi_executable_2', 700, 300) }}

- -

Atributs booleans

- -

De vegades veuràs atributs que estan escrits sense valors; això està perfectament permès. S’anomenen atributs booleans, i només poden tenir un valor, que és generalment el mateix que el nom de l'atribut. A tall d'exemple, preneu l'atribut {{htmlattrxref("disabled", "input")}}, que es pot assignar als elements d’entrada de dades d'un formulari, si voleu que estiguin desactivats (en gris) perquè l'usuari no hi pugui entrar cap dada. Per exemple,

- -
<input type="text" disabled="disabled">
- -

Com a forma abreujada, és perfectament admissible escriure-ho de la manera següent (també hem inclòs un element d’entrada de dades de formulari no desactivat com a referència, perquè tinguis una idea de què passa):

- -
<input type="text" disabled>
-
-<input type="text">
-
- -

Tots dos donaran una sortida com la següent:

- -

{{ EmbedLiveSample('Atributs_booleans', 700, 100) }}

- -

Ometre les cometes que delimiten els valors dels atributs

- -

Quan navegues per la web, et trobes amb tot tipus d'estils de marcat estranys, inclosos valors d'atributs sense cometes. Això és permissible en algunes circumstàncies, però en d'altres trencarà el codi de marcatge. Per exemple, si reprenem el nostre exemple d'enllaç d'abans, podem escriure una versió bàsica amb només l'atribut href, així:

- -
<a href=https://www.mozilla.org/>favourite website</a>
-
- -

No obstant això, quan afegim a aquest estil l'atribut title, les coses no funcionen:

- -
<a href=https://www.mozilla.org/ title=The Mozilla homepage>favourite website</a>
-
- -

En aquest punt, el navegador ha interpretat malament el marcatge perquè pensa que l'atribut title té en realitat tres atributs: un atribut title amb el valor «The», i dos atributs booleans, Mozilla i homepage. Això, òbviament, no és el que es pretenia, i causarà errors o un comportament inesperat en el codi, com es veu en l'exemple a continuació. Intenta passar sobre l'enllaç per veure quin és el títol del text!

- -

{{ EmbedLiveSample('Ometre_les_cometes_que_delimiten_els_valors_dels_atributs', 700, 100) }}

- -

Inclou sempre les cometes de l'atribut. Evita aquest tipus de problemes, i el codi resulta més llegible.

- -

Cometes simples o dobles?

- -

En aquest article t’adonaràs que els atributs estan delimitats per cometes dobles. No obstant això, és possible que vegis cometes simples en algun codi HTML. Això és purament una qüestió d'estil, i ets lliure d'escollir . Les dues línies següents són equivalents:

- -
<a href="http://www.example.com">A link to my example.</a>
-
-<a href='http://www.example.com'>A link to my example.</a>
- -

Però t’has d’assegurar que no es barregen. El codi següent no et funcionarà!

- -
<a href="http://www.example.com'>A link to my example.</a>
- -

Si has utilitzat un tipus de cometes en el codi HTML, pots fer servir l’altre tipus de cometes per als teus valors d’atribut sense tenir problemes:

- -
<a href="http://www.example.com" title="Isn't this fun?">A link to my example.</a>
- -

Ara bé, si vols imbricar cometes dins de cometes, i són iguals, has d’utilitzar {{anch ("Entitats de referències: incloent caràcters especials en HTML")}}. Per exemple, aquest marcatge trencarà el codi:

- -
<a href='http://www.example.com' title='Isn't this fun?'>A link to my example.</a>
- -

Així, necessites fer el següent:

- -
<a href='http://www.example.com' title='Isn&#39;t this fun?'>A link to my example.</a>
- -

Anatomia d'un document HTML

- -

Els elements HTML no són gaire útils per si mateixos. Ara veurem com els elements individuals es combinen per formar una pàgina HTML completa:

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>My test page</title>
-  </head>
-  <body>
-    <p>This is my page</p>
-  </body>
-</html>
- -

Aquí tenim:

- -
    -
  1. <!DOCTYPE html>: El tipus de document. Als inicis, quan HTML era jove (al voltant de 1991/1992), els doctype estaven destinats a actuar com enllaços cap a un conjunt de regles que la pàgina HTML havia de seguir per ser considerat un bon HTML, que podia significar la comprovació automàtica d'errors i altres coses útils. Solien ser alguna cosa com ara això: - - 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    - Avui dia són un llegat històric que cal incloure perquè tot funcioni. <!DOCTYPE html> és la cadena més curta de caràcters que es considera com un tipus de document vàlid. Això és tot el que realment et cal saber.
    2. -
  2. <html></html>: L'element <html> delimita tot el contingut de la pàgina, i de vegades es coneix com l'element arrel.
    3. -
  3. <head></head>: L'element <head> actua com un contenidor de totes les coses que vols incloure a la pàgina HTML, però que no són el contingut que vols mostrar als visitants de la teva pàgina. Això inclou coses com ara paraules clau i una descripció de la pàgina que vols que aparegui en els resultats de cerca, estil CSS per al teu contingut, declaracions de conjunts de caràcters, i més. N’aprendràs més en el proper article de la sèrie.
    4. -
  4. <meta charset="utf-8">: Aquest element especifica que el teu document utilitzarà el conjunt de caràcters UTF-8, que inclou la majoria dels caràcters de tots els idiomes humans escrits coneguts. Si ho poses, en essència pots gestionar qualsevol contingut textual possible. No hi ha cap raó per no establir-lo, i us pot ajudar a evitar alguns problemes més endavant.
    5. -
  5. <title></title>: Estableix el títol de la pàgina, que és el títol que apareix a la pestanya del navegador quan carrega la pàgina, i s'utilitza per descriure la pàgina quan l’afegeixes als teus marcadors/favorits.
    6. -
  6. <body></body>: Inclou tot el contingut que es mostra a la teva pàgina, ja sigui text, imatges, vídeos, jocs, reproducció de pistes d'àudio o qualsevol altra cosa.
    7. -
- -

Aprenentatge actiu: Afegir característiques a un document HTML

- -

Si vols escriure una mica d'HTML en el teu ordinador local per a experimentar, pots:

- -
    -
  1. Copiar l'exemple de la pàgina HTML que apareix a dalt.
    2. -
  2. Crear un arxiu nou a l'editor de text.
    3. -
  3. Enganxar el codi en l’arxiu nou de text.
    4. -
  4. Desar el fitxer com index.html.
    5. -
- -
-

Nota: també pots trobar aquesta plantilla bàsica HTML en el repositori Github de l’Àrea d’aprenentatge d’MDN.

-
- -

Ara pots obrir aquest arxiu en un navegador web per veure quina aparença té el codi reproduït, i després editar el codi i actualitzar el navegador per veure quin n’és el resultat. Inicialment es veurà així:

- -

A simple HTML page that says This is my pageEn aquest exercici pots editar el codi localment en el teu ordinador, com s’ha indicat abans, o pots editar-lo en la finestra de mostra editable a continuació (la finestra de mostra editable representa només el contingut de l'element <body>, en aquest cas). Intenta reproduir els passos següents:

- - - -

Si t’equivoques, sempre pots restablir el codi anterior amb el botó Reinicia. Si realment et quedes encallat, fes clic al botó Mostra la solució per veure la solució.

- - - -

{{ EmbedLiveSample('Codi_executable_3', 700, 600) }}

- -

Els espais en blanc en HTML

- -

Et deus haver adonat que en els exemples anteriors hi ha una gran quantitat d'espais en blanc i salts de línia en el codi; això no és necessari en absolut; els dos fragments de codi següents són equivalents:

- -
<p>Dogs are silly.</p>
-
-<p>Dogs        are
-         silly.</p>
- -

No importa la quantitat d'espais en blanc que utilitzis (pots incloure caràcters d'espai, però també salts de línia), l'intépret HTML ho redueix tot a un sol espai quan el codi es representa. Així, per què utilitzem tant els espais en blanc? La resposta és la llegibilitat.

- -

És molt més fàcil d'entendre què passa al teu codi si té un format endreçat, que no si està desordenat. En el nostre HTML, cada element imbricat té una sagnia de dos espais més respecte del que el conté. De tu depèn l'estil de format que utilitzis (el nombre d'espais per a cada nivell de sagnat, per exemple), però t’has de plantejar l'ús d'algun tipus de format.

- -

Referències a entitats: inclusió de caràcters especials en HTML

- -

En HTML, els caràcters <, >,",' i & són caràcters especials. Són parts de la sintaxi HTML en si; ara bé, com hem d’incloure un d'aquests caràcters en el text, per exemple, si realment volem emprar un ampersand (&) o el signe menys que (<), i que els navegadors no l'interpretin com codi?

- -

Hem d'utilitzar referències de caràcters, codis especials que representen caràcters i que es poden utilitzar en aquestes circumstàncies exactes. Tots els caràcters de referència s'inicien amb un signe (&) i acaben amb un punt i coma (;).

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Caràcter literalReferència de caràcter equivalent
<&lt;
>&gt;
"&quot;
'&apos;
&&amp;
- -

En el següent exemple, pots veure dos paràgrafs, que parlen sobre tecnologies web:

- -
<p>In HTML, you define a paragraph using the <p> element.</p>
-
-<p>In HTML, you define a paragraph using the &lt;p&gt; element.</p>
- -

A la sortida en directe que veus a continuació pots observar que el primer paràgraf ha anat malament perquè el navegador pensa que la segona instància de <p> inicia un paràgraf nou! El segon paràgraf es veu bé perquè hem reemplaçat els parèntesis angulars amb referències de caràcters.

- -

{{ EmbedLiveSample('Referències_a_entitats_inclusió_de_caràcters_especials_en_HTML', 700, 200) }}

- -
-

Nota: Un gràfic de totes les referències a entitats de caràcters HTML disponibles, es pot trobar en la Viquipèdia: Llista de XML i HTML de les referències a entitats de caràcters.

-
- -

Comentaris HTML

- -

En HTML hi ha un mecanisme disponible per escriure comentaris en el codi. El navegador ignora els comentaris, i així també són invisibles per a l'usuari. E·l seu propòsit és permetre que puguis incloure comentaris en el codi per a aclarir-ne el funcionament, explicar què fan les diferents parts, etc. Això pot ser molt útil com a recordatori del treball que has fet si tornes a treballar en un codi amb què no has treballat durant 6 mesos; o si el lliures a una altra persona perquè hi treballi.

- -

Per a convertir en un comentari una secció de contingut del teu arxiu HTML, l’has de delimitar amb els marcadors especials <!-- i -->. Per exemple:

- -
<p>I'm not inside a comment</p>
-
-<!-- <p>I am!</p> -->
- -

Com pots veure a continuació, el primer paràgraf apareix a la sortida en directa, però el segon no ho fa.

- -

{{ EmbedLiveSample('Comentaris_HTML', 700, 100) }}

- -

Resum

- -

Has arribat al final de l'article! Esperem que hagis gaudit de la visita als conceptes bàsics d'HTML. En aquest punt, hauries de ser capaç d'entendre el llenguatge i com funciona en un nivell bàsic, i hauries de ser capaç d'escriure alguns elements i atributs. En els articles següents del mòdul ens introduirem amb més detall en algunes de les coses que ja has examinat, i introduirem algunes característiques noves del llenguatge.

- -
-

Nota: En aquest punt, a mesura que comences a aprendre més sobre HTML, és possible que també vulguis començar a explorar els fonaments dels fulls d’estil e cascada (cascading style sheets o CSS). CSS és el llenguatge que s’utilitza per a aplicar estil a les teves pàgines web (per exemple, pots canviar el tipus de lletra o els colors, o alterar el disseny de pàgina). HTML i CSS van alhora, com descobriràs de seguida.

-
- -
{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}
diff --git "a/files/ca/learn/html/introducci\303\263_al_html/index.html" "b/files/ca/learn/html/introducci\303\263_al_html/index.html" deleted file mode 100644 index 721a2795f5..0000000000 --- "a/files/ca/learn/html/introducci\303\263_al_html/index.html" +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: Introducció a l'HTML -slug: Learn/HTML/Introducció_al_HTML -tags: - - CodingScripting - - HTML - - Introduction to HTML - - Landing - - Links - - Structure - - Text - - head - - semantics -translation_of: Learn/HTML/Introduction_to_HTML ---- -
{{LearnSidebar}}
- -

En el fons, {{glossary("HTML")}} és un llenguatge bastant simple compost d'elements, que es poden aplicar a peces de text per donar-los significats diferents en un document (és un paràgraf? És una llista de vinyetes? és part d'una taula?), l'estructura d'un document en seccions lògiques (té una capçalera? tres columnes de contingut? un menú de navegació?) i inserir contingut com imatges i vídeos en una pàgina. Aquest mòdul us presentarà els dos primers d'aquests, i us introduirà en els conceptes fonamentals i la sintaxi que necessiteu saber per entendre HTML.

- -

Requisits previs

- -

Abans d'iniciar aquest mòdul, no cal cap coneixement previ d'HTML, però heu de tenir almenys coneixements bàsics en l'ús d'ordinadors, i l'ús de la web de forma passiva (és a dir, simplement mirant, consumint el contingut.) Heu de tenir un entorn de treball bàsic configurat com es descriu en Instal.lació de programari bàsic,  i entendre com crear i administrar arxius, com es detalla en Tractar amb arxius — tots dos són parts del nostre mòdul Introducció a la  web per a principiants.

- -
-

Nota: Si esteu treballant en un ordinador/tauleta/altre dispositiu en el qual no teniu la capacitat de crear els vostres propis arxius, podeu provar (la majoria) els exemples de codi en un programa de codificació en línia, com ara JSBin o Thimble.

-
- -

Guies

- -

Aquest mòdul conté els següents articles, que us portaran a través de tota la teoria bàsica d'HTML, i oferint-vos una gran oportunitat per posar a prova algunes habilitats.

- -
-
Introducció a HTML
-
Cobreix els fonaments absoluts d'HTML, perquè pugueu començar — definirem els elements, atributs i tots els altres termes importants que podeu haver sentit, i mostrarem on encaixen en el llenguatge. També us mostrarem com s'estructura un element HTML, com s'estructura una pàgina HTML típica, i explicarem altres importants característiques bàsiques del llenguatge. En el camí, jugarem amb una mica d'HTML, perquè t'interessi!
-
Què hi ha en la capçalera? Metadades en HTML
-
La capçalera (head) d'un document HTML és la part que no es mostra en el navegador web quan es carrega la pàgina. Conté informació tal com el {{htmlelement("title")}} de la pàgina, enllaços a {{glossary("CSS")}} (si voleu donar estil el vostre contingut HTML amb CSS), enllaços a favicones personalitzats, i les metadades (que són dades sobre l'HTML, com qui el va escriure, i les paraules clau importants que descriuen el document.)
-
Fonaments de text HTML
-
Un dels treballs principals de l'HTML és donar significat al text (també conegut com la semàntica), de manera que el navegador sàpiga com mostrar-lo correctament. En aquest article s'analitza com usar HTML per dividir un bloc de text en una estructura d'encapçalats i paràgrafs, afegir èmfasis/importància a les paraules, crear llistes i molt més.
-
Creació d'hipervincles
-
Els hipervincles són realment importants — són el que fan de la web un web. En aquest article es mostra la sintaxi necessària per fer un enllaç, i discuteix les millors pràctiques per als enllaços.
-
Format de text avançat
-
Hi ha molts altres elements en HTML per donar format al text, que no vam veure en l'article de fonaments de text HTML. Els elements que veurem aquí són menys coneguts, però encara així és útil conèixer-los. Aquí aprendreu sobre el marcatge de cites, llistes de descripció, codi de computadora i altre text relacionat, subíndexs i superíndexs, informació de contacte, i més.
-
Document i estructura del lloc web
-
Així com es defineixen les parts individuals de la pàgina (per exemple, "un paràgraf" o "una imatge"), HTML també s'utilitza per definir les àrees del vostre lloc web (per exemple, "la capçalera", "el menú de navegació", "la columna de contingut principal"). En aquest article es reflexiona sobre com planificar una estructura bàsica del lloc web, i escriure el codi HTML per representar aquesta estructura.
-
Depuració HTML
-
Escriure HTML està molt bé, però què passa si alguna cosa va malament i no trobes on està l'error en el codi? Aquest article us donarà a conèixer algunes eines que poden ajudar-vos.
-
- -

Avaluacions

- -

Les següents avaluacions posaran a prova la vostra comprensió dels conceptes bàsics d'HTML coberts en les guies anteriors.

- -
-
Marcatge d'una carta
-
Tots aprenem a escriure una carta, tard o d'hora; també és un exemple útil per posar a prova les vostres habilitats de format de text! Així que en aquesta avaluació se us donarà una carta per marcar.
-
Estructuració d'una pàgina de contingut
-
Aquesta avaluació posa a prova la vsotra capacitat d'utilitzar HTML per estructurar una simple pàgina de contingut, que conté una capçalera, peu de pàgina, el menú de navegació, contingut principal, i la barra lateral.
-
- -

Veure també

- -
-
Conceptes bàsics d'alfabetització Web 1
-
Un excel·lent curs de la fundació Mozilla que explora i posa a prova moltes de les habilitats parlades al mòdul Introducció a HTML. Els estudiants es familiaritzaran amb la lectura, l'escriptura i participació en la web en aquest mòdul de sis parts. Descobriran els fonaments del web a través de la producció i col·laboració.
-
diff --git "a/files/ca/learn/html/introducci\303\263_al_html/marcatge_una_carta/index.html" "b/files/ca/learn/html/introducci\303\263_al_html/marcatge_una_carta/index.html" deleted file mode 100644 index 34647eb294..0000000000 --- "a/files/ca/learn/html/introducci\303\263_al_html/marcatge_una_carta/index.html" +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: Marcatge d'una carta -slug: Learn/HTML/Introducció_al_HTML/Marcatge_una_carta -tags: - - Assessment - - Beginner - - CodingScripting - - HTML - - Links - - Text - - head -translation_of: Learn/HTML/Introduction_to_HTML/Marking_up_a_letter ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Learn/HTML/Introduction_to_HTML")}}
- -

Tots aprenem a escriure una carta, tard o d'hora; també és un exemple útil per posar a prova les vostres habilitats de format de text! En aquesta avaluació, se us donarà una carta per al seu marcatge per posar a prova les habilitats bàsiques i avançades de format de text HTML, incloent hipervincles; a més, posareu a prova la vostra familiaritat amb alguns continguts HTML <head>.

- - - - - - - - - - - - -
Requisits Previs:Abans de procedir amb aquesta avaluació, ja hauríeu d'haver treballat Inici en HTML, Què hi ha en el head? Metadades in HTML, fonaments de text HTML, Crear hipervincles, i format de text avançat.
Objectiu:Provar el format bàsic i avançat de text HTML i habilitats en hipervincles, i el coneixement del que succeeix en el codi HTML <head>.
- -

Punt de partida

- -

Per obtenir aquesta avaluació inicial, cal anar i agafar el text sense format que necessiteu per marcar, i el CSS que cal incloure en el codi HTML. Crear un nou arxiu .html amb el vostre editor de text per treballar-ho (o, alternativament, utilitzar un lloc com JSBin o Thimble per fer la avaluació.)

- -

Resum del projecte

- -

Per a aquest projecte, la tasca consisteix a marcar una carta que ha de ser allotjada en una intranet de la universitat. La carta és una resposta d'un investigador a un futur estudiant doctorat sobre la seva sol·licitud per treballar a la universitat.

- -

Bloc/semàntica estructural:

- - - -

Semàntica en línia:

- - - -

La capçalera del document:

- - - -

Consells i suggeriments

- - - -

Exemple

- -

La següent captura de pantalla mostra un exemple del que la carta podria ser després del seu marcat.

- -

- -

Evaluació

- -

Si esteu seguint aquesta avaluació com a part d'un curs organitzat, heu de ser capaços de donar al vostre treball al vostre professor/tutor per qualificar-vos. Si sou d'auto-aprenentatge, llavors podeu obtenir la guia de qualificació, amb molta facilitat, preguntan a la llista de correu dev-mdc o al canal IRC #mdn en Mozilla IRC. Proveu el primer exercici - no hi ha res a guanyar amb trampa!

- -

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Learn/HTML/Introduction_to_HTML")}}

diff --git "a/files/ca/learn/html/introducci\303\263_al_html/qu\303\250_hi_ha_en_el_head_metadades_en_html/index.html" "b/files/ca/learn/html/introducci\303\263_al_html/qu\303\250_hi_ha_en_el_head_metadades_en_html/index.html" deleted file mode 100644 index 934377c4ca..0000000000 --- "a/files/ca/learn/html/introducci\303\263_al_html/qu\303\250_hi_ha_en_el_head_metadades_en_html/index.html" +++ /dev/null @@ -1,271 +0,0 @@ ---- -title: Què hi ha en el head? Metadades en HTML -slug: Learn/HTML/Introducció_al_HTML/Què_hi_ha_en_el_head_Metadades_en_HTML -tags: - - Beginner - - CodingScripting - - Guide - - HTML - - Meta - - favicon - - head - - lang - - metadata -translation_of: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}
- -

El {{glossary("Head", "head")}} és la part d'un document HTML que no es mostra en el navegador web quan es carrega la pàgina. Conté informació com el {{htmlelement("title")}} de la pàgina, els enllaços a {{glossary("CSS")}} (si voleu aplicar estil al vostre contingut HTML amb CSS), enllaços a favicones personalitzades, i altres metadades (dades sobre l'HTML, com qui l’ha escrit, i les paraules clau importants que descriuen el document). En aquest article exposarem tot això i molt més, per a donar-vos una bona base per a treballar amb el marcatge.

- - - - - - - - - - - - -
Requisits previs:Familiaritat amb HTML, respecte dels continguts a Inici en HTML.
Objectiu:Aprendre sobre la capçalera HTML, quin propòsit té, quins elements importants pot contenir, i quin efecte que poden tenir en el document HTML.
- -

Què és la capçalera d'HTML?

- -

Fem un cop d’ull a aquest document HTML senzill que ja hem vist en l’article anterior:

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>My test page</title>
-  </head>
-  <body>
-    <p>This is my page</p>
-  </body>
-</html>
- -

La capçalera d'un document HTML és el contingut de l'element {{htmlelement("head")}}. A diferència dels continguts de l'element {{htmlelement("body")}}, que es mostren a la pàgina quan es carrega en un navegador, el contingut de la capçalera no es mostra a la pàgina. La funció de la capçalera, en canvi, és contenir {{glossary("Metadata", "metadades")}} sobre el document. En l'exemple anterior, la capçalera és més aviat curta:

- -
<head>
-  <meta charset="utf-8">
-  <title>My test page</title>
-</head>
- -

En pàgines més extenses, però, la capçalera pot arribar a estar força plena d'elements. Ves a alguns dels teus llocs web favorits i utilitza les eines del desenvolupador per revisar-ne el contingut de les capçaleres. El nostre objectiu aquí no és mostrar com utilitzar tot el que possiblement es pot posar a la capçalera, sinó ensenyar-te com fer servir els elements principals que hi inclouràs, i que t’hi familiaritzis. Comencem.

- -

Afegir un títol

- -

Ja hem vist l'element {{htmlelement("title")}} en acció: es pot emprar per a afegir un títol al document. Però aquest element es podria confondre amb {{htmlelement ("h1")}}, que s'utilitza per a afegir un títol d’encapçalament de nivell superior en el contingut del cos (body) del teu document. Això també es coneix de vegades com el títol de la pàgina. Però són coses diferents!

- - - -

Aprenentatge actiu: Anàlisi d’un exemple senzill

- -
    -
  1. Per començar aquest aprenentatge actiu, et proposem d’anar al nostre repositori de GitHub i que et descarreguis una còpia de la nostra pàgina title-example.html. Pots fer-ho de diverses maneres: - -
      -
    1. Copia i enganxa el codi de la pàgina en un arxiu de text nou de l'editor de codi, i a continuació, guarda’l en un lloc adequat.
      2. -
    2. Prem el botó «Raw» de la pàgina, selecciona File > Save Page As... del menú del teu navegador, i a continuació escull un lloc per a guardar l'arxiu.
      3. -
    -
    2. -
  2. Ara obre l'arxiu al teu navegador. Hauries de veure alguna cosa com això: -

    Una pàgina web senzilla amb el títol del document HTML en l’element <title> i el títol d’encapçalament de la pàgina <h1> en l’element <h1>.Ara, hauries de tenir clar on apareix el contingut de l’element <h1> i on apareix el contingut de <title>!

    -
    3. -
  3. També pots provar d’obrir el codi en el teu editor de codi, editar-ne els continguts, i a continuació actualitzar la pàgina en el teu navegador. Juga-hi una mica.
    4. -
- -

El contingut de l'element <title> també s'utilitza per a altres coses. Per exemple, quan poses a la pàgina un marcador de pàgina (Bookmarks > Bookmark This Page, en Firefox), observa que el nom que se suggereix com a nom del marcador és el contingut de l’element <title>.

- -

Una pàgina web amb un marcador de pagina en Firefox; el nom del marcadode pàgina s’omple automàticament amb el contingut de l’element <title>

- -

El contingut de <title> també s'utilitza en els resultats de cerca, com es veu a continuació.

- -

Metadades: l'element <meta>

- -

Les metadades són dades que descriuen dades i HTML té una manera «oficial» d'afegir metadades a un document: l'element {{htmlelement("meta")}}. Per descomptat, que altres coses sobre les quals parlem en aquest article també podrien considerar-se metadades. Hi ha una gran quantitat de tipus d'elements <meta> diferents que es poden incloure en la capçalera (<head>) de la teva pàgina, però no provarem d'explicar-los tots en aquesta etapa, ja que podria acabaria sent massa confús. En lloc d’això, explicarem algunes coses amb què et pots trobar habitualment, només per a donar-te’n una idea.

- -

Especificar la codificació de caràcters del document

- -

En l'exemple que hem vist més amunt, s’hi ha inclòs aquesta línia:

- -
<meta charset="utf-8">
- -

Aquest element simplement especifica la codificació de caràcters del document: el conjunt de caràcters que el document pot utilitzar. UTF-8 és un conjunt de caràcters universal que inclou gairebé qualsevol caràcter de qualsevol idioma humà. Això vol dir que la vostra pàgina web serà capaç de gestionar la visualització de qualsevol idioma. Per tant, és una bona idea establir això a cada pàgina web que creïs! Per exemple, la pàgina podria gestionar anglès i japonès sense problema:

- -

Una pàgina web que conté caràcters en anglès i en japonès, amb el conjunt universal de codificació de caràcters, o utf-8. Tots dos idiomes es veuen igual de bé,En canvi, si configures la teva codificació de caràcters segons ISO-8859-1, per exemple (el conjunt de caràcters de l'alfabet llatí), la representació de la teva pàgina s’esgavellaria del tot:

- -

Una pàgina web que conté caràcters en anglès i en japonès, amb el conjunt de caràcters per a l’alfabet llatí. Els caràcters japonesos no es veuen correctament.

- -

Aprenentatge actiu: Experimentar amb la codificació de caràcters

- -

Per provar això, torneu a la plantilla HTML que heu obtingut en l'apartat anterior amb el <title> (la pàgina title-example.html), canvieu el valor charset de meta per la norma ISO-8859-1, i afegiu el japonès a la vostra pàgina. Aquest és el codi que fem servir:

- -
<p>Japanese example: ご飯が熱い。</p>
- -

Afegir un autor i una descripció

- -

Molts elements <meta> inclouen els atributs name i content:

- - - -

Aquests dos elements meta són útils d’incloure a la teva pàgina perquè defineixen l'autor de la pàgina i proporcionen una descripció concisa de la pàgina. Vegem-ne un exemple:

- -
<meta name="author" content="Chris Mills">
-<meta name="description" content="The MDN Learning Area aims to provide
-complete beginners to the Web with all they need to know to get
-started with developing web sites and applications.">
- -

Especificar l’autor de la pàgina és bo en molts sentits: és útil per a esbrinar qui ha escrit la pàgina, per si us hi voleu posar en contacte i fer-li preguntes sobre el contingut. Alguns sistemes de gestió de continguts disposen de funcions que extreuen automàticament la informació de l'autor de la pàgina i la poden a disposició amb aquesta finalitat.

- -

Especificar una descripció que inclou paraules clau relacionades amb el contingut de la pàgina és útil perquè té el potencial de fer que la pàgina aparegui més amunt en les cerques rellevants que els motors de cerca executen (aquestes activitats es denominen Search Engine Optimization, o {{glossary("SEO")}}.)

- -

Aprenentatge actiu: La utilitat de la descripció per als motors de cerca

- -

Les pàgines de resultats dels motors de cerca també fan servir aquestes descripcions. Vegem-ho amb un exemple.

- -
    -
  1. Ves a la pàgina d’inici de The Mozilla Developer Network.
    2. -
  2. Ves al codi font de la pàgina (botó dret/Ctrl + clic sobre la pàgina, selecciona l’opció Veure l’origen de la pàgina del menú contextual).
    3. -
  3. Busca la descripció en l'etiqueta meta. S'assembla a això: - 
    <meta name="description" content="The Mozilla Developer Network (MDN) provides
-information about Open Web technologies including HTML, CSS, and APIs for both
-Web sites and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
    -
    4. -
  4. Ara busca «Mozilla Developer Network» amb el teu motor de cerca favorit (nosaltres hem fet servir Yahoo). Observa, a partir del contingut dels elements <meta> i <title> utilitzats en el resultat de la cerca que, definitivament, paga la pena tenir aquests elements de descripció! -

    A Yahoo search result for "Mozilla Developer Network"

    -
    5. -
- -
-

Nota: A Google veuràs que a continuació de l'enllaç principal de la pàgina d'inici s'enumeren algunes pàgines secundàries rellevants del projecte MDN; són els anomenats enllaços de llocs web, i es configuren en les Google's webmaster tools; és una manera de millorar els resultats de cerca del teu lloc web en el motor de cerca de Google.

-
- -
-

Nota: Moltes característiques de <meta> senzillament ja no s'utilitzen. Per exemple, l'element <meta> de paraules clau (<meta name="keywords" content="posa, les, teves, paraules, clau">) , que se suposa que proporciona als motors de cerca paraules clau per a determinar la rellevància d’aquella pàgina respecte dels termes de cerca, els motors de cerca l’ignoren perquè els spammers omplien la llista de paraules clau amb centenars de paraules clau que esbiaixaven els resultats.

-
- -

Altres tipus de metadades

- -

Trobareu altres tipus de metadades a mesura que volteu per la web. Una gran quantitat de les funcions que apareixen en els llocs web són creacions propietàries, dissenyades per a proporcionar a certs llocs web (com els llocs web de les xarxes socials) parts específiques d'informació que poden utilitzar.

- -

Per exemple, Open Graph Data és un protocol de metadades que Facebook va inventar per proporcionar als llocs web metadades enriquides. En el codi font de MDN Web Docs trobaràs això:

- -
<meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png">
-<meta property="og:description" content="The Mozilla Developer Network (MDN) provides
-information about Open Web technologies including HTML, CSS, and APIs for both Web sites
-and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
-<meta property="og:title" content="Mozilla Developer Network">
- -

Un efecte d'això és que quan a Facebook es fa un enllaç a MDN Web Docs, l'enllaç apareix amb una imatge i una descripció: una experiència més rica per als usuaris.

- -

Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description.

- -

Twitter també té metadades propietàries pròpies, les Twitter Cards, que tenen un efecte similar quan a twitter.com es mostra l’URL del lloc web. Per exemple:

- -
<meta name="twitter:title" content="Mozilla Developer Network">
- -

Afegir icones personalitzades al teu lloc web

- -

Per enriquir encara més el disseny del teu lloc web, en les metadades pots afegir referències a icones personalitzades, que es mostraran en certs contextos.

- -

La humil icona de web (favicon), que existeix de fa molts, molts anys, va ser la primera icona d'aquest tipus, una icona de 16 x 16 píxels utilitzada en múltiples llocs.

- -

Pots afegir una icona de web a la teva pàgina així:

- -
    -
  1. La deses en el mateix directori que la pàgina índex del lloc web, en format .ico (la majoria dels navegadors admetem les icones de web en els formats més comuns, com .gif o .png, però si utilitzes el format ICO t’assegures que funciona en navegadors antics com Internet Explorer 6).
    2. -
  2. Afegeixes al bloc de codi <head> de l’HTML la línia següent per a fer-hi referència: - 
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    -
    3. -
- -

Els navegadors moderns utilitzen les icones de web en diversos llocs, com en la pestanya de la pàgina activa, i en el panell de marcadors, quan hi ha un marcador de pàgina:

- -

The Firefox bookmarks panel, showing a bookmarked example with a favicon displayed next to it.

- -

Avui dia hi ha un munt d'altres tipus d'icones que també pots tenir en compte. Per exemple, en el codi font de la pàgina MDN trobaràs això:

- -
<!-- third-generation iPad with high-resolution Retina display: -->
-<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png">
-<!-- iPhone with high-resolution Retina display: -->
-<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png">
-<!-- first- and second-generation iPad: -->
-<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png">
-<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
-<link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png">
-<!-- basic favicon -->
-<link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png">
- -

Els comentaris expliquen per a què s'utilitza cada icona; aquests elements cobreixen coses com ara proporcionar una agradable icona en alta resolució quan deses el lloc web a la pantalla principal d'un iPad.

- -

No et preocupis gaire pel que fa a l'aplicació de tots aquests tipus d'icona en aquest moment; aquesta característica és bastant avançada i no s'espera que en tingueu un coneixement per a poder progressar en el curs. L'objectiu principal aquí és fer-te saber què són aquests tipus de coses, per si te les trobes quan navegues pel codi font d'altres llocs web.

- -

Aplicar CSS i JavaScript a HTML

- -

Gairebé tots els llocs web que utilitzes actualment fan servir {{glossary("CSS")}} perquè presentin un bon aspecte, i {{glossary("JavaScript")}} per a potenciar-hi les funcions interactives, com ara reproductors de vídeo, mapes, jocs, i molt més. Aquests s'apliquen amb més freqüència a una pàgina web amb l'ús dels elements {{htmlelement("link")}} i {{htmlelement("script")}}, respectivament.

- - - -

Aprenentatge actiu: Aplicar CSS i JavaScript a una pàgina

- -
    -
  1. Per iniciar aquest aprenentatge actiu, pren una còpia dels arxius meta-example.html, script.js i style.css, i desa’ls tots tres en el mateix directori del teu ordinador. Assegura’t que es desen amb els noms i les extensions d'arxiu correctes.
    2. -
  2. Obre el fitxer HTML en el teu navegador i en l’editor de text.
    3. -
  3. Seguint la informació que et proporcionem aquí, afegeix els elements {{htmlelement("link")}} i {{htmlelement("script")}} al teu HTML perquè els teus CSS i JavaScript s'apliquin a l’HTML.
    4. -
- -

Si ho fas correctament, quan deses el codi HTML i actualitzes el navegador observaràs que les coses han canviat:

- -

Example showing a page with CSS and JavaScript applied to it. The CSS has made the page go green, whereas the JavaScript has added a dynamic list to the page.

- - - -
-

Nota: Si t’encalles amb aquest exercici i no se t’hi apliquen el CSS/JS, revisa la nostra pàgina d'exemple css-and-js.html.

-
- -

Establir l'idioma principal del document

- -

Per acabar, paga la pena esmentar que es pot establir (i realment s'hauria d'establir) l'idioma de la teva pàgina. Això es pot fer afegint l'atribut lang en l'etiqueta d'obertura HTML (com es veu en el meta-example.html).

- -
<html lang="en-US">
- -

Això és útil en molts sentits. Els motors de cerca indexen més eficaçment el document si s'hi estableix el llenguatge (permeten que aparegui correctament en els resultats específics de l'idioma, per exemple), i és útil per a les persones amb discapacitat visual que utilitzen lectors de pantalla (per exemple, la paraula «six» hi és tant en francès com en anglès, però es pronuncia diferent).

- -

També post fer que diverses subseccions del teu document reconeguin idiomes diferents. Per exemple, podem establir que es reconegui una secció de japonès per a la part del nostre document que està escrita en japonès, així:

- -
<p>Japanese example: <span lang="jp">ご飯が熱い。</span>.</p>
- -

Aquests codis els defineix la norma ISO 639-1. Pots trobar més informació sobre aquests codis en les Language tags in HTML and XML.

- -

Resum

- -

Arribem al final del nostre recorregut per la capçalera d’un document HTML; s’hi poden fer moltes més coses, però un recorregut exhaustiu seria avorrit i en aquesta etapa podria embolicar, i per ara només volem donar-te una idea de les coses més comunes que s’hi poden trobar! En l’article següent veurem els elements bàsics d’un text HTML.

- -

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}

diff --git a/files/ca/learn/html/introduction_to_html/advanced_text_formatting/index.html b/files/ca/learn/html/introduction_to_html/advanced_text_formatting/index.html new file mode 100644 index 0000000000..8163f0b4c3 --- /dev/null +++ b/files/ca/learn/html/introduction_to_html/advanced_text_formatting/index.html @@ -0,0 +1,677 @@ +--- +title: Format de text avançat +slug: Learn/HTML/Introducció_al_HTML/Format_de_text_avançat +tags: + - Beginner + - CodingScripting + - Guide + - HTML + - Learn + - Text + - abbreviation + - description list + - quote + - semantic +translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}
+ +

Hi ha molts altres elements en HTML per a la formatació del text, que no hem vist en l'article sobre els elements bàsics de text HTML. Els elements que es descriuen en aquest article són menys coneguts, però són útils de conèixer (i això no és encara en absolut una llista completa). Aquí aprendreu sobre l’etiquetatge de les citacions, de les llistes de descripció, del codi d'ordinador i altres textos relacionats, dels subíndexs i superíndexs, de la informació de contacte, i de molt més.

+ + + + + + + + + + + + +
Requisits previs:Familiarització amb els elements bàsics de l’HTML, com es tracten en iniciació a l’HTML. Aplicació de format a textos amb HTML, com s'explica en els Elements bàsics de text en HTML.
Objectiu:Aprendre a utilitzar elements HTML menys coneguts per a etiquetar característiques semàntiques avançades.
+ +

Llistes de descripció

+ +

En els elements bàsics de text en HTML, hem fet camí pels elements d’etiquetatge bàsics de les llistes en HTML, però no hem esmentat un tercer tipus de llistes amb que et pots topar de tant en tant, les llistes de descripció. El propòsit d'aquestes llistes és etiquetar un conjunt d'elements i les descripcions associades a aquests, com ara termes i definicions, o preguntes i respostes. Vegem un exemple d'un conjunt de termes i definicions:

+ +
soliloquy
+In drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process relaying them to the audience (but not to other characters.)
+monologue
+In drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present.
+aside
+In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought or piece of addtional background information
+ +

Les llistes de descripció utilitzen un etiquetatge diferent dels altres tipus de llistes, l’element {{htmlelement("dl")}}; a més, cada terme es delimita amb un element {{htmlelement("dt")}} (descripció del terme), i cada descripció es delimita amb un element {{htmlelement("dd")}} (definició de la descripció). Acabem d’etiquetar el nostre exemple:

+ +
<dl>
+  <dt>soliloquy</dt>
+  <dd>In drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process relaying them to the audience (but not to other characters.)</dd>
+  <dt>monologue</dt>
+  <dd>In drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present.</dd>
+  <dt>aside</dt>
+  <dd>In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought or piece of addtional background information.</dd>
+</dl>
+ +

Els estils per defecte del navegador mostren els termes de les llistes de descripció sagnats en certa mesura respecte de les descripcions. Els estils de MDN segueixen aquesta convenció de bastant a prop, però a més, destaquen els termes amb lletra negreta.

+ +
+
soliloquy
+
In drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process relaying them to the audience (but not to other characters.)
+
monologue
+
In drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present.
+
aside
+
In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought or piece of addtional background information.
+
+ +

Observa que pots tenir múltiples descripcions per a un mateix terme; per exemple:

+ +
<dl>
+  <dt>aside</dt>
+  <dd>In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought, or piece of additional background information.</dd>
+  <dd>In writing, a section of content that is related to the current topic, but doesn't fit directly into the main flow of content so is presented nearby (often in a box off to the side.)</dd>
+</dl>
+ +
+
aside
+
In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought or piece of addtional background information.
+
In writing, a section of content that is related to the current topic, but doesn't fit directly into the main flow of content so is presented nearby (often in a box off to the side.)
+
+ +

Aprenentatge actiu: etiquetatge d'un conjunt de definicions

+ +

És l’hora de posar a prova la teva destresa amb les llistes de descripció; afegeix elements al text sense format en el camp d'entrada perquè aparegui com una llista de descripció en el camp de sortida. Si vols, pots fer servir termes i descripcions propis..

+ +

Si t’equivoques, sempre pots tornar a començar amb el botó de Reinicia. Si t’encalles, fes clic al botó, Mostra la solució per veure la resposta.

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 350, "", "", "hide-codepen-jsfiddle") }}

+ +

Citacions

+ +

L'HTML també disposa de característiques per a l’etiquetatge de cites; quin element s'utilitza depèn de si s’etiqueta en el nivell de bloc o es fa en el nivell de línia.

+ +

Elements de bloc de citació (blockquotes)

+ +

Per a indicar que una secció de continguts de nivell de bloc (un paràgraf, diversos paràgrafs, una llista, etc.) se cita des d'un altre lloc l’has d’etiquetar amb un element {{HTMLElement("blockquote")}}, i has d’incloure en un atribut {{htmlattrxref("cite","blockquote")}} una URL que apunti cap a la font de la citació. Per exemple, la línia de codi següent es pren de la pàgina MDN: «L'element <blockquote>»:

+ +
<p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block
+Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
+ +

Per convertir això en una citació de bloc, has de fer això:

+ +
<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
+  <p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block
+  Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
+</blockquote>
+ +

L’estil per defecte del navegador mostra això com un paràgraf sagnat per indicar que es tracta d'una citació; MDN fa això, però també hi afegeix una mica més d'estil:

+ +
+

L'element  HTML <blockquote> (o element de bloc de citació HTML) indica que el text associat és una citació extensa.

+
+ +

Elements de línia de citació

+ +

Els elements de línia de citació funcionen exactament de la mateixa manera, només que utilitzen l'element {{htmlelement("q")}}. Per exemple, l’etiquetatge que tens a continuació inclou una citació de la pàgina de MDN sobre <q>:

+ +
<p>The quote element — <code>&lt;q&gt;</code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">intended
+for short quotations that don't require paragraph breaks.</q></p>
+ +

L'estil per defecte del navegador mostra aquest text com un element normal posat entre cometes per a indicar que és una citació, com això:

+ +

The quote element — <q> — is intended for short quotations that don't require paragraph breaks.

+ +

Citacions

+ +

El contingut de l'atribut {{htmlattrxref("cite","blockquote")}} sembla útil, però per desgràcia als navegadors, als lectors de pantalla, etc., no hi fan gaire. No hi ha manera d'aconseguir que el navegador mostri el contingut de cite sense necessitat d'escriure una solució pròpia amb JavaScript o CSS. Si vols que la font de la citació estigui disponible a la pàgina, la millor manera és etiquetar-la amb l'element {{HTMLElement("cite")}} al costat de l'element quote. Això serveix en realitat per a incloure el nom de la font de la citació, és a dir, el nom del llibre o el de la persona de qui és el text que se cita; però no hi ha cap raó per la qual el text no es pugui associar d'alguna manera la font de la cita dins de <cite>:

+ +
<p>According to the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
+<cite>MDN blockquote page</cite></a>:
+</p>
+
+<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
+  <p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block
+  Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
+</blockquote>
+
+<p>The quote element — <code>&lt;q&gt;</code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">intended
+for short quotations that don't require paragraph breaks.</q> -- <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">
+<cite>MDN q page</cite></a>.</p>
+ +

Les citacions tenen l'estil en cursiva per defecte.

+ +

{{EmbedLiveSample('Citations', '100%', '179px', '', '', 'hide-codepen-jsfiddle')}}

+ +

Aprenentatge actiu: Qui ha dit això?

+ +

Temps per a un altre exemple d'aprenentatge actiu! En aquest exemple ens agradaria:

+ +
    +
  1. Convertir el paràgraf del mig en un bloc de citació que inclogui un atribut cite.
    2. +
  2. Convertir una part del tercer paràgraf en una citació de línea que inclogui un atribut cite.
    3. +
  3. Incloure un element <cite> per a cada citació
    4. +
+ +

Cerca a Internet per trobar fonts de citacions apropiades.

+ +

Si t’equivoques, sempre pots tornar a l’inici amb el botó de Reinicia. Si t’encalles, fes clic al botó Mostra la solució per veure la resposta.

+ + + +

{{ EmbedLiveSample('Playable_code_2', 700, 500) }}

+ +

Abreviatures

+ +

Un altre element força comú que et trobes quan et passeges per la web és {{HTMLElement ("abbr")}}. Aquesta etiqueta serveix per a delimitar una abreviatura o un acrònim i proporcionar el desenvolupament complet del terme (que s’inclou dins d'un atribut {{htmlattrxref("title")}}). Vegem-ne un parell d'exemples:

+ +
<p>We use <abbr title="Hypertext Markup Language">HTML</abbr> to structure our web documents.</p>
+
+<p>I think <abbr title="Reverend">Rev.</abbr> Green did it in the kitchen with the chainsaw.</p>
+ +

Ve a ser una cosa com això (el desenvolupament apareix en un indicador de funció quan passes el cursor per sobre del terme):

+ +

We use HTML to structure our web documents.

+ +

I think Rev. Green did it in the kitchen with the chainsaw.

+ +
+

Nota: Hi ha un altre element, {{HTMLElement ("acronym")}}, que bàsicament fa el mateix que <abbr> i que estava destinat específicament als acrònims, en lloc de les abreviatures, però que ha caigut en desús; tampoc era compatible amb tots els navegadors, com ho és <abbr>, i com que les dues etiquetes tenen una funció tan similar, es va considerar inútil tenir-les totes dues. Per tant, fes servir només <abbr>.

+
+ +

Aprenentatge actiu: etiquetatge d'una abreviatura

+ +

Per a aquesta senzilla tasca d'aprenentatge actiu, només et proposem de fer l’etiquetatge d'una abreviatura. Pots utilitzar el nostre exemple a continuació, o substituir-lo per un de la teva elecció. 

+ + + +

{{ EmbedLiveSample('Playable_code_3', 700, 350) }}

+ +

Etiquetatge de les dades de contacte

+ +

HTML té un element per a etiquetar les teves dades de contacte: {{htmlelement("address")}}. Aquesta etiqueta senzillament delimita de les dades de contacte; per exemple:

+ +
<address>
+  <p>Chris Mills, Manchester, The Grim North, UK</p>
+</address>
+ +

També s'hi pot incloure marcatge més comples, i d'altres formes d'informació de contacte, com ara:

+ +
<address>
+  <p>
+    Chris Mills<br>
+    Manchester<br>
+    The Grim North<br>
+    UK
+  </p>
+
+  <ul>
+    <li>Tel: 01234 567 890</li>
+    <li>Email: me@grim-north.co.uk</li>
+  </ul>
+</address>
+ +

Fixeu-vos que una cosa com la següent també seria vàlida, si la pàgina enllaçada contingués informació de contacte:

+ +
<address>
+  <p>Page written by <a href="../authors/chris-mills/">Chris Mills</a>.</p>
+</address>
+ +

Superíndex i subíndex

+ +

De tant en tant hauràs d’utilitzar superíndex i subíndex per a etiquetar correctament elements com ara dates, fórmules químiques o equacions matemàtiques. Els elements {{htmlelement("sup")}} i {{htmlelement("sub")}} gestionen aquesta feina. Per exemple:

+ +
<p>My birthday is on the 25<sup>th</sup> of May 2001.</p>
+<p>Caffiene's chemical formula is C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p>
+<p>If x<sup>2</sup> is 9, x must equal 3 or -3.</p>
+ +

La sortida d'aquest codi és com això:

+ +

My birthday is on the 25th of May 2001.

+ +

Caffeine's chemical formula is C8H10N4O2.

+ +

If x2 is 9, x must equal 3 or -3.

+ +

Representar codi informàtic

+ +

Hi ha una sèrie d'elements disponibles per a l’etiquetatge de codi informàtic:

+ + + +

Vegem-ne uns exemples. Juga amb aquests exemples (fes una còpia del nostre arxiu d'exemple other-semantics.html):

+ +
<pre><code>var para = document.querySelector('p');
+
+para.onclick = function() {
+  alert('Owww, stop poking me!');
+}</code></pre>
+
+<p>You shouldn't use presentational elements like <code>&lt;font&gt;</code> and <code>&lt;center&gt;</code>.</p>
+
+<p>In the above JavaScript example, <var>para</var> represents a paragraph element.</p>
+
+
+<p>Select all the text with <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd>.</p>
+
+<pre>$ <kbd>ping mozilla.org</kbd>
+<samp>PING mozilla.org (63.245.215.20): 56 data bytes
+64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms</samp></pre>
+ +

El codi anterior es veuria així:

+ +

{{ EmbedLiveSample('Representar_codi_informàtic','100%',300) }}

+ +

Etiquetatge d'hores i dates

+ +

HTML també proporciona l'element {{htmlelement("time")}} per a etiquetar les hores i les dates en un format llegible per la màquina. Per exemple:

+ +
<time datetime="2016-01-20">20 January 2016</time>
+ +

Per què és això útil? Bé, hi ha moltes maneres diferents d’escriure les dates. La data anterior es podria escriure de totes aquestes maneres:

+ + + +

Però els ordinadors no reconeixen fàcilment aquesta diversitat de formes. Si vols agafar automàticament les dates de tots els esdeveniments en una pàgina i inserir-los en un calendari, l'element {{htmlelement("time")}} et permet adjuntar una hora/data que una màquina podrà llegir inequívocament .

+ +

L'exemple bàsic anterior proporciona una simple data llegible per una màquina, però hi ha moltes altres opcions que són possibles, per exemple:

+ +
<!-- Standard simple date -->
+<time datetime="2016-01-20">20 January 2016</time>
+<!-- Just year and month -->
+<time datetime="2016-01">January 2016</time>
+<!-- Just month and day -->
+<time datetime="01-20">20 January</time>
+<!-- Just time, hours and minutes -->
+<time datetime="19:30">19:30</time>
+<!-- You can do seconds and milliseconds too! -->
+<time datetime="19:30:01.856">19:30:01.856</time>
+<!-- Date and time -->
+<time datetime="2016-01-20T19:30">7.30pm, 20 January 2016</time>
+<!-- Date and time with timezone offset-->
+<time datetime="2016-01-20T19:30+01:00">7.30pm, 20 January 2016 is 8.30pm in France</time>
+<!-- Calling out a specific week number-->
+<time datetime="2016-W04">The fourth week of 2016</time>
+ +

Resum

+ +

Això marca el final del nostre estudi de la semàntica de text HTML. Tingues present que el que has vist durant aquest curs no és una llista exhaustiva dels elements de text HTML; només hem volgut exposar els elements essencials i alguns dels més comuns que et pots trobar, o si més no, que puguis trobar prou interessants. Per trobar més elements HTML pel camí, pots fer una ullada a la nostra referència d'elements HTML (la secció de la semàntica de text en línia seria un bon lloc per on començar). En l’article següent veurem els diversos elements HTML que s'usen per a estructurar les diferents parts d'un document HTML.

+ +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}

diff --git a/files/ca/learn/html/introduction_to_html/creating_hyperlinks/index.html b/files/ca/learn/html/introduction_to_html/creating_hyperlinks/index.html new file mode 100644 index 0000000000..c2bc2d0b0c --- /dev/null +++ b/files/ca/learn/html/introduction_to_html/creating_hyperlinks/index.html @@ -0,0 +1,320 @@ +--- +title: Crear hipervincles +slug: Learn/HTML/Introducció_al_HTML/Crear_hipervincles +tags: + - Beginner + - CodingScripting + - Guide + - HTML + - Learn + - Links + - Title + - absolute + - hyperlinks + - relative + - urls +translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}
+ +

Els hipervincles són realment importants; són els que fan de la xarxa web una xarxa. En aquest article es mostra la sintaxi necessària per a fer un enllaç, i es tracten les bones pràctiques en els enllaços.

+ + + + + + + + + + + + +
Prerequisits:Familiaritzar-se amb els conceptes bàsics de l’HTML, que es tracten en Iniciació a l’HTML. Format del text en HTML, que es tracta en Fonaments del text HTML.
Objectiu:Aprendre com implementar un hipervincle amb eficàcia, i enllaçar diversos fitxers.
+ +

Què és un hipervincle?

+ +

Els hipervincles són una de les innovacions més interessants que la web té per oferir. Bé, ha estat una característica de la web des del principi, i són els que fan de la xarxa web una xarxa; ens permeten vincular els nostres documents a un altre document (o un altre recurs) qualsevol, també ens permeten vincular parts específiques dels documents entre elles, i permeten que les aplicacions estiguin disponibles en una adreça web (això contrasta amb les aplicacions natives, que requerien instal·lació i altres obligacions d’aquesta mena). Gairebé qualsevol contingut del web es pot convertir en un enllaç, de manera que en fer-hi clic (o activar-ho d’alguna altra manera) el navegador anirà cap a una altra adreça web ({{glossary("URL")}}).

+ +
+

Nota: Una URL pot apuntar a fitxers HTML, fitxers de text, imatges, documents de text, vídeo i fitxers d’àudio, i qualsevol cosa que pugui existir en la web. Si el navegador no sap com mostrar o gestionar el fitxer, se’t demana si vols obrir el fitxer (en aquest cas el deure d’obrir o manipular el fitxer passa per una aplicació nativa adequada en el dispositiu) o descarregar el fitxer (i en aquest cas pots fer-te’n càrrec més endavant).

+
+ +

La pàgina web de la BBC, per exemple, conté un gran nombre d’enllaços que apunten no només a múltiples històries de notícies, sinó també a diferents àmbits del lloc web (funcions de navegació), pàgines d’accés/registre (eines d’usuari), i molt més.

+ +

Portal de bbc.co.uk, que mostra moltes notícies i també elements de navegació i funcions de menú

+ +

Anatomia d’un enllaç

+ +

Un enllaç bàsic es crea delimitant el text (o d’altres continguts, consulta {{anch("Enllaços de nivell de bloc")}}) que vols convertir en un enllaç dintre d’un element {{htmlelement("a")}}, i hi assigna un atribut {{htmlattrxref ("href", "a")}}  (també conegut com a destinació o target) que conté l’adreça web on vols que apunti l’enllaç.

+ +
<p>I’m creating a link to
+<a href="https://www.mozilla.org/en-US/">the Mozilla homepage</a>.
+</p>
+ +

Això ens dóna el següent resultat:

+ +

I’m creating a link to the Mozilla homepage.

+ +

Afegir informació de suport amb <title>

+ +

Un altre atribut que és possible que vulguis afegir als teus enllaços és title; aquest atribut està destinat a contenir informació complementària útil sobre l’enllaç, com ara quin tipus d’informació conté la pàgina, o coses que cal tenir en compte. Per exemple:

+ +
<p>I’m creating a link to
+<a href="https://www.mozilla.org/en-US/"
+   title="The best place to find more information about Mozilla’s
+          mission and how to contribute">the Mozilla homepage</a>.
+</p>
+ +

Això ens dona el resultat següent (el títol apareix com un indicador de funció (tooltip) quan passem el cursor per sobre l’enllaç):

+ +

I’m creating a link to the Mozilla homepage.

+ +
+

Nota: El títol d'un enllaç només es mostra quan el punter del ratolí planeja per sobre, i això significa que les persones que fan servir el teclat per navegar, o pantalles tàctils, tindran dificultats per a accedir a aquesta informació. Si la informació d'un títol és realment important per la usabilitat d'una pàgina, s'hauria de presentar d'una forma accessible per a tothom, per exemple incloent-la com a text normal.

+
+ +

Aprenentatge actiu: Crear un exemple d’enllaç propi

+ +

És l’hora de l’aprenentatge actiu: volem que creïs un document HTML al teu editor de codi (faràs bé d’aconseguir la nostra plantilla inicial).

+ + + +

Enllaços de nivell de bloc

+ +

Com ja s’ha esmentat, pots convertir gairebé qualsevol contingut en un enllaç, fins i tot elements de nivell de bloc. Si vols convertir una imatge en un enllaç, només cal que posis la imatge entre les etiquetes <a></a>.

+ +
<a href="https://www.mozilla.org/en-US/">
+  <img src="mozilla-image.png" alt="mozilla logo that links to the mozilla homepage">
+</a>
+ +
+

Nota: En un proper article t’assabentaràs de molts més aspectes sobre l’ús d’imatges al web.

+
+ +

Una introducció ràpida a les adreces URL i les rutes

+ +

Per entendre bé les destinacions dels enllaços, cal comprendre les adreces URL i les rutes dels fitxers. En aquesta secció es proporciona la informació que necessites per a aconseguir això.

+ +

Un URL, o Uniform Resource Locator (localitzador de recursos uniforme), és simplement una cadena de text que defineix on es pot localitzar alguna cosa a la web. Per exemple, la pàgina d’inici de Mozilla en versió anglesa es troba a https://www.mozilla.org/en-US/.

+ +

Els URL utilitzen rutes per a trobar fitxers. Les rutes especifiquen en quina part del sistema de fitxers es troba el fitxer en el qual estàs interessat. Vegem un exemple senzill d’una estructura de directoris (observa el directori de creating-hyperlinks).

+ +

Una estructura de directoris senzilla. El directori pare s’anomena creating-hyperlinks i conté dos fitxers anomenats index.html i contacts.html i dos directoris anomenats projects i pdfs, que contenen un fitxer index.html i un fitxer project-brief.pdf, respectivament.

+ +

L’arrel d’aquesta estructura de directoris s’anomena creating-hyperlinks. Quan treballes amb un lloc web en local, hi ha un directori que conté dins tot el lloc web. A l’arrel hi ha un fitxer index.html i un fitxer contacts.html. En un lloc web real, index.html seria la nostra pàgina d’inici o pàgina de destinació.

+ +

També hi ha dos directoris dins del nostre directori arrel: pdfs i projects. Cadascun té a dins un sol fitxer: un fitxer PDF (projecte-brief.pdf) i un fitxer index.html, respectivament. Observa que hi pot haver sense problemes dos fitxers index.html en un projecte, sempre que es trobin en ubicacions diferents del sistema de fitxers. Molts llocs web ho fan. El segon index.html seria potser la pàgina de destinació principal per a obtenir informació relacionada amb el projecte.

+ + + +
+

Nota: Si cal, pots combinar diverses instàncies d’aquestes característiques en adreces URL complexes; per exemple, ../../../complex/path/to/my/file.html.

+
+ +

Fragments de document

+ +

És possible enllaçar una part específica d’un document HTML (conegut com un fragment de document), i no només a l'inici del document. Per a això, primer cal assignar un atribut {{htmlattrxref ("id")}} a l’element en què vols establir l’enllaç. Normalment té sentit enllaçar en una línia de títol específica, de manera que es veuria alguna cosa com la següent:

+ +
<h2 id="Mailing_address">Mailing address</h2>
+ +

A continuació, per a enllaçar aquest id específic, cal incloure'l al final de l'URL, precedit per un símbol de número o coixinet (#). Per exemple:

+ +
<p>Want to write us a letter? Use our <a href="contacts.html#Mailing_address">mailing address</a>.</p>
+ +

Fins i tot pots utilitzar la referència mateixa del fragment del document per a fer un enllaç cap a una altra part del mateix document:

+ +
<p>The <a href="#Mailing_address">company mailing address</a> can be found at the bottom of this page.</p>
+ +

URL absoluts i relatius

+ +

Dos termes que et trobaràs a la  web són l’URL absolut i l’URL relatiu:

+ +

URL absolut: Apunta cap a una ubicació definida per la seva ubicació absoluta al web, que inclou el {{glossary("protocol")}} i el {{glossary("nom de domini")}}. Així, per exemple, si una pàgina index.html es carrega en un directori anomenat projects que hi ha dins de l’arrel d’un servidor web, i el domini del lloc web és http://www.example.com, la pàgina estaria disponible en http://www.example.com/projects/index.html (o fins i tot només http://www.example.com/projects/, perquè la majoria dels servidors web cerquen una pàgina de destinació com index.html per carregar-la si no s’especifica a l'URL).

+ +

Un URL absolut sempre apuntarà a la mateixa ubicació, no importa des d’on s’utilitzi.

+ +

URL relatiu: Apunta a una ubicació que és relativa al fitxer que s’enllaça, una mica com el que hem vist en la secció anterior. Per exemple, si volem tenir un enllaç des del nostre fitxer d’exemple en http://www.example.com/projects/index.html a un fitxer PDF del mateix directori, l’URL només seria el nom del fitxer; per exemple: project-brief.pdf; no cal informació addicional. Si el PDF estigués disponible en un subdirectori dins de projects anomenat pdfs, l’enllaç relatiu seria pdfs/project-brief.pdf (l’URL absolut equivalent seria http://www.example.com/projects/pdfs/project-brief.pdf).

+ +

Un URL relatiu assenyala diferents llocs segons on estigui el fitxer que s’utilitza; per exemple, si movem el nostre fitxer index.html del directori projects a l’arrel del lloc web (el nivell superior, no en altres directoris), l’URL relativa pdfs/project-brief.pdf ara apunta a http://www.example.com/pdfs/project-brief.pdf, no a http://www.example.com/projects/pdfs/project-brief.pdf.

+ +

Naturalment, la ubicació de l'arxiu project-brief.pdf i el directori pdfs no canviaran de sobte perquè moguis l'arxiu index.html; això faria que el teu enllaç apunti al lloc equivocat, així que no funcionaria si s'hi fes clic. Cal anar amb compte.

+ +

Les bones pràctiques en els enllaços

+ +

Hi ha algunes bones pràctiques que és bo de seguir quan es posen enllaços. Vegem quines són.

+ + + +

Fes servir un redactat clar

+ +

És molt fàcil afegir enllaços. Però amb això, no n’hi ha prou. Hem de fer que els nostres enllaços siguin accessibles a tots els lectors, independentment de quin sigui el seu context i quines eines prefereixen. Per exemple:

+ + + +

Vegem-ne un exemple concret:

+ +

Text d’enllaç ben redactat: Download Firefox

+ +
<p><a href="https://firefox.com/">
+  Download Firefox
+</a></p>
+ +

Text d’enllaç mal redactat: Click here to download Firefox

+ +
<p><a href="https://firefox.com/">
+  Click here
+</a>
+to download Firefox</p>
+
+ +

Altres consells:

+ + + +

Utilitza enllaços relatius sempre que puguis

+ +

A partir de la descripció anterior, es podria pensar que és una bona idea utilitzar enllaços absoluts en tot moment; al cap i a la fi, no es trenquen com els enllaços relatius quan una pàgina es mou. Tanmateix, és bo emprar enllaços relatius sempre que puguis quan enllaces a altres llocs dins del mateix lloc web (i fes servir enllaços absoluts quan enllacis a un altre lloc web):

+ + + +

Indica amb claredat quan s’enllacen recursos no HTML

+ +

Quan enllaces a un recurs que es pot descarregar (com un document PDF o Word) o reproduir en continu (streaming), com ara un vídeo o un àudio, o que pot tenir un altre efecte potencialment inesperat (s’obre una finestra emergent), hauries d’afegir un redactat clar per a reduir qualsevol confusió. Pot resultar força molest, per exemple:

+ + + +

Observa amb alguns exemples quin tipus de text pots utilitzar aquí:

+ +
<p><a href="http://www.example.com/large-report.pdf">
+  Download the sales report (PDF, 10MB)
+</a></p>
+
+<p><a href="http://www.example.com/video-stream/">
+  Watch the video (stream opens in separate tab, HD quality)
+</a></p>
+
+<p><a href="http://www.example.com/car-game">
+  Play the car game (requires Flash)
+</a></p>
+ +

Utilitza l‘atribut download quan enllacis a una descàrrega

+ +

Quan enllaces a un recurs que s’ha de descarregar en lloc d’obrir-se en el navegador, pots utilitzar l’atribut download, que proporciona l’opció de desar amb el nom de fitxer per defecte. Heus aquí un exemple amb un enllaç de descàrrega de Firefox 39 per a la versió de Windows:

+ +
<a href="https://download.mozilla.org/?product=firefox-39.0-SSL&os=win&lang=en-US"
+   download="firefox-39-installer.exe">
+  Download Firefox 39 for Windows
+</a>
+ +

Aprenentatge actiu: crear un menú de navegació

+ +

Per a aquest exercici, et volem proposar que enllacis algunes pàgines amb un menú de navegació per a crear un lloc web de diverses pàgines. Aquesta és una manera comuna per a crear un lloc web: en cada pàgina s’utilitza la mateixa estructura de pàgina, que inclou el mateix menú de navegació, de manera que quan fas clic als enllaços fa la impressió que ets en el mateix lloc, però apareix un contingut diferent.

+ +

Fes còpies locals de les quatre pàgines següents, totes en el mateix directori (consulta també el directori de navegació del menú d’inici per a la llista completa de fitxers):

+ + + +

Hauries de:

+ +
    +
  1. Afegir una llista no ordenada en el lloc indicat en una pàgina, que contingui els noms de les pàgines que s’enllacen. Un menú de navegació és justament una llista d’enllaços, de manera que això és semànticament correcte.
    2. +
  2. Convertir cada nom de la pàgina en un enllaç a aquesta pàgina.
    3. +
  3. Copiar el menú de navegació en cada pàgina.
    4. +
  4. Eliminar de cada pàgina només l’enllaç a ella mateixa; és confús incloure un enllaç a la mateixa pàgina, i no té sentit, i el fet que no hi hagi enllaç resulta un bon recordatori visual de la pàgina en què et trobes.
    5. +
+ +

L’exemple acabat hauria de veure’s més o menys així:

+ +

Un exemple senzill de menú de navegació HTML, amb els elements inici, imatges, projectes i xarxes socials

+ +
+

Nota: Si t’encalles o no saps si ho has fet bé, pots comprovar la solució en el directori de l’etiquetatge del menú de navegació.

+
+ +

Enllaços a correu electrònic

+ +

És possible crear enllaços o botons que, quan els prems, en lloc d’enllaçar amb un recurs o pàgina, obren un missatge de correu electrònic nou de sortida. Això es fa amb l’element {{HTMLElement("a")}} i l’esquema d’URL mailto:.

+ +

En la forma més bàsica i d’ús més comú, un enllaç mailto: simplement indica l’adreça de correu electrònic del destinatari. Per exemple:

+ +
<a href="mailto:ningu@mozilla.org">Envia un missatge a ningú</a>
+
+ +

Això genera un enllaç que té aquest aspecte: Envia un missatge a ningú.

+ +

De fet, fins i tot l’adreça de correu electrònic és opcional. Si la deixes fora (és a dir, {{htmlattrxref ("href", "a")}} és simplement "mailto:"), el client de correu de l’usuari obrirà una finestra de correu electrònic sortint nova que encara no té cap adreça de destinació especificada. Això sovint és útil com a enllaços per «compartir» en què els usuaris poden fer clic i enviar un correu electrònic a una adreça que triïn.

+ +

Especificar detalls

+ +

A més de l’adreça de correu electrònic, pots proporcionar més informació. De fet, pots afegir qualsevol camp de capçalera d’un missatge de correu electrònic estàndard a l’adreça URL mailto: que proporcionis. El més habituals són «subject», «cc» i «body» (respectivament, «tema», «amb còpia» i «cos», que no és un veritable camp de capçalera, però permet especificar el contingut d’un missatge curt per al nou correu electrònic). Cada camp i el seu valor s’especifiquen com un terme de la consulta.

+ +

Aquí hi ha un exemple que inclou un cc, bcc, assumpte i cos:

+ +
<a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&amp;subject=The%20subject%20of%20the%20email &amp;body=The%20body%20of%20the%20email">
+  Send mail with cc, bcc, subject and body
+</a>
+ +
+

Nota: Els valors de cada camp han de tenir una codificació URL (és a dir, amb caràcters no imprimibles i espais percentatge-escapats). També has de tenir en compte l’ús del signe (&), que separa cada camp en la URL mailto:. Aquesta és la notació estàndard d’una consulta URL.

+
+ +

Aquí hi ha algunes altres mostres d’URL de mailto::

+ + + +

Sumari

+ +

Això, de tota manera, és tot sobre els enllaços, per ara! Tornarem als enllaços més endavant en el curs, quan comencem a aplicar-los estils. El pas següent pel que fa a l’HTML és tornar a la semàntica de text i conèixer algunes de les característiques més avançades/inusuals que podeu trobar útils; la formatació avançada del text és la vostra pròxima parada.

+ +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}

diff --git a/files/ca/learn/html/introduction_to_html/debugging_html/index.html b/files/ca/learn/html/introduction_to_html/debugging_html/index.html new file mode 100644 index 0000000000..5d8feaea62 --- /dev/null +++ b/files/ca/learn/html/introduction_to_html/debugging_html/index.html @@ -0,0 +1,171 @@ +--- +title: Depurar HTML +slug: Learn/HTML/Introducció_al_HTML/Depurar_HTML +tags: + - Beginner + - CodingScripting + - Debugging + - Error + - Guide + - HTML + - Validation + - validator +translation_of: Learn/HTML/Introduction_to_HTML/Debugging_HTML +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}
+ +

Escriure HTML està molt bé; però, i si hi ha alguna cosa que va malament i no se sap on està l'error en el codi? Aquest article dona a conèixer algunes eines que poden ajudar.

+ + + + + + + + + + + + +
Prerequisits:Familiaritzar-se amb els fonaments bàsics de l’HTML, que s’expliquen, per exemple, en Iniciació a l’HTML, Fonaments de text en HTML i Creació d’hipervincles.
Objectiu:Aprendre els conceptes bàsics de la utilització d'eines de depuració per a trobar problemes en HTML.
+ +

Depurar no fa por

+ +

En escriure qualsevol mena de codi, tot està molt bé en general, fins que arriba aquest moment temut, que és quan es produeix un error; s'ha fet alguna cosa malament i el codi no funciona en absolut, o no ben bé com es voldria. Per exemple, a continuació es mostra la informació d'un error en intentar {{glossary("compilar")}} un programa senzill escrit en el llenguatge Rust.

+ +

Una finestra d’ordinador portàtil que mostra el resultat d'intentar compilar un programa en codi Rust amb una cometa que manca en algun lloc d'una instrucció 'print'. El missatge d'error indica: 'error: unterminated double quote string'.En aquest cas, el missatge d'error és relativament fàcil d'entendre: «cadena de text amb cometes dobles sense tancar». Si et fixes en la programació, és probable que puguis veure que en la instrucció println!(Hello, world!”); podria faltar-hi, per lògica, una cometa doble. Però els missatges d'error poden esdevenir ràpidament més complicats i menys fàcils d'interpretar a mesura que els programes es fan més extensos, i fins i tot el cas senzill anterior pot intimidar una mica a algú que no sap gens de programació amb Rust.

+ +

Això no obstant, la depuració no té per què fer por; la clau per estar còmodes amb l’escriptura i depuració de qualsevol llenguatge de programació o codi és la familiaritat, tant amb el llenguatge com amb les eines.

+ +

Depuració amb HTML

+ +

HTML no és tan complicat d'entendre com Rust; HTML no es compila en una forma diferent abans que el navegador n’analitzi el resultat i el presenti (s’interpreta, no es compila). I la sintaxi d’un {{glossary("element")}} HTML és possiblement molt més fàcil d'entendre que la d’un «autèntic llenguatge de programació» com Rust, {{glossary("JavaScript")}} o {{glossary("Python")}}. Però la manera amb què els navegadors executen l’HTML és molt més permissiva que la manera com s'executen els llenguatges de programació, i això és alhora bo i dolent.

+ +

Codi permissiu

+ +

Què entenem per permissiu? Bé, en general, quan comets algun error de codi, et pots topar amb dos tipus d'error principals:

+ + + +

L’HTML en si no té tendència a presentar errors de sintaxi perquè els navegadors en què s'executa són permissius, i això significa que el codi funciona fins i tot encara que hi hagi errors de sintaxi. Els navegadors incorporen regles que els indiquen com interpretar l’etiquetatge escrit erròniament, de manera que s'obtingui alguna cosa que rutlli, encara que potser no sigui exactament el que esperaves. Això, per descomptat, també pot ser un problema!

+ +
+

Nota: L’HTML s'executa amb permissivitat perquè quan es va crear la web, es va decidir que permetre a la gent la publicació dels seus continguts fos més important que garantir que la sintaxi fos totalment correcta. La xarxa web probablement no seria tan popular com ho és avui, si hagués estat més estricta des dels inicis.

+
+ +

Aprenentatge actiu: estudiar la permissivitat del codi

+ +

És hora d'estudiar la naturalesa permissiva del codi HTML per tu mateix.

+ +
    +
  1. En primer lloc, fes-te amb una còpia de la nostra demostració de depuració i desa-te-la en local. Hem escrit aquest exemple de demostració deliberadament amb alguns errors perquè els analitzis (es diu que l’etiquetatge HTML està mal format, en oposició a ben format).
    2. +
  2. A continuació, obre’l en un navegador; veuràs alguna cosa com aquesta: Un document HTML senzill amb el títol Exemples de depuració HTML i una mica d'informació sobre errors comuns amb HTML, com elements que no es tanquen, elements mal imbricats o atributs que no es tanquen.
    3. +
  3. Això, d’entrada, no fa bona pinta; analitzem el codi per veure si podem esbrinar-ne el perquè (només es mostren els continguts de body): + 
    <h1>HTML debugging examples</h1>
+
+<p>What causes errors in HTML?
+
+<ul>
+  <li>Unclosed elements: If an element is <strong>not closed properly,
+      then its effect can spread to areas you didn't intend
+
+  <li>Badly nested elements: Nesting elements properly is also very important
+      for code behaving correctly. <strong>strong <em>strong emphasised?</strong>
+      what is this?</em>
+
+  <li>Unclosed attributes: Another common source of HTML problems. Let's
+      look at an example: <a href="https://www.mozilla.org/>link to Mozilla
+      homepage</a>
+</ul>
    +
    4. +
  4. Fem un repàs dels problemes que hi podem veure: +
      +
    • Els elements {{htmlelement("p")}} i {{htmlelement("li")}} no tenen etiquetes de tancament. A partir de la imatge de dalt, no sembla que això hagi afectat malament la representació del codi d’etiquetatge, perquè és fàcil deduir on acaba un dels elements i on en comença un altre.
      • +
    • El primer element {{htmlelement("strong")}} no té etiqueta de tancament. Això és una mica més problemàtic, perquè no és fàcil saber on se suposa que acaba l'element. De fet, sembla que s’ha destacat en negreta tota la resta del text.
      • +
    • En aquesta secció les etiquetes estan mal imbricades: <strong>strong <em>strong emphasised?</strong> what is this?</em>. No és fàcil saber com s'ha d'interpretar això, a causa del problema anterior.
      • +
    • El valor de l'atribut {{htmlattrxref ("href", "a")}} no té cometes dobles tancament. Això sembla que ha causat el problema més greu: l'enllaç no apareix en absolut.
      • +
    +
    5. +
  5. Ara observem quina presentació fa el navegador a partir d’aquest d’etiquetatge, en oposició a l’etiquetatge que observem en el codi. Per a això, pots utilitzar les eines de desenvolupador del navegador. Si no estàs familiaritzat amb l'ús de les eines de desenvolupador del navegador, dedica uns minuts a revisar Descobreix les eines de desenvolupador del navegador, i després torna.
    6. +
  6. En l'inspector de DOM pots veure quin aspecte presenta la representació d’aquest etiquetatge: L'inspector d'HTML de Firefox, amb el nostre paràgraf d'exemple destacat, mostra el text "Què genera errors en l'HTML". Hi pots veure que el navegador s'ha encarregat de tancar l'element paràgraf.
    7. +
  7. Amb l'inspector DOM, explorarem el codi amb detall per veure com el navegador ha intentat de corregir els errors HTML (hem fet la revisió amb Firefox; altres navegadors moderns haurien de donar el mateix resultat): +
      +
    • S’han donat etiquetes de tancament als paràgrafs i elements de llista.
      • +
    • No està clar on s’ha de tancar el primer element <strong>, de manera que el navegador ha etiquetat cada bloc de text per separat que hi ha fins al final del document amb una etiqueta strong.
      • +
    • El navegador ha resolt la imbricació d’etiquetes incorrecta de la següent manera: + 
      <strong>strong
+  <em>strong emphasised?</em>
+</strong>
+<em> what is this?</em>
      +
      • +
    • L'enllaç amb la cometa doble que falta s’ha eliminat del tot. L'últim element de la llista ara presenta aquest aspecte: + 
      <li>
+  <strong>Unclosed attributes: Another common source of HTML problems.
+  Let's look at an example: </strong>
+</li>
      +
      • +
    +
    8. +
+ +

Validació HTML

+ +

A partir de l'exemple anterior pots veure que és important que t’asseguris que el codi HTML està prou ben format. Però, com? En un exemple petit com el que has vist abans, resulta prou fàcil buscar per les línies de codi i trobar els errors; però, què passa amb un document HTML extens i complex?

+ +

La millor estratègia és començar per executar la pàgina HTML amb el servei de validació d’etiquetatge (Markup Validation Service), creat i mantingut per l'organització W3C, que s'ocupa de les especificacions que defineixen l’HTML, el CSS i altres tecnologies web. Aquesta pàgina web pren un document HTML com una entrada, l’analitza i et retorna un informe que exposa tot el que està malament en l’HTML.

+ +

La pàgina d’inici del validador d’HTML

+ +

Per a especificar el codi HTML que vols validar, pots donar-ne l’adreça web, pujar-hi l’arxiu HTML o introduir-hi el codi HTML directament.

+ +

Aprenentatge actiu: validació d’un document HTML

+ +

Provem-ho amb el nostre document de mostra.

+ +
    +
  1. En primer lloc, carrega el Markup Validation Service en una de les pestanyes del navegador, si encara no ho has fet.
    2. +
  2. Ves a la pestanya Validate by Direct Input.
    3. +
  3. Copia tot el codi del document de mostra (no només el body) i enganxa’l en l'àrea gran de text que hi ha en el Markup Validation Service.
    4. +
  4. Prem el botó Check.
    5. +
+ +

Això t’ha de donar una llista d'errors i altres dades.

+ +

Llista dels resultats de la validació HTML del servei de validació d'etiquetatge de W3C

+ +

Interpretació dels missatges d'error

+ +

La llista de missatges d'error que el validador presenta sovint són útils, però de vegades no tant; amb una mica de pràctica trobaràs la manera d'interpretar-los per resoldre el codi. Fem una passada pels missatges d'error i vegem què signifiquen. Observem que cada missatge ve amb un número de línia i columna, que t’ajuda a localitzar l'error més fàcilment.

+ + + +

Si no arribes a esbrinar què significa cada missatge d'error, no t’hi amoïnis; una bona idea és tractar de resoldre uns quants errors cada la vegada, i a continuació tornar a validar el codi HTML per veure els errors que queden. De vegades, la resolució d'un error pot eliminar més d’un missatges d'error diferents, perquè sovint un sol problema pot causar diversos errors, en un efecte dòmino.

+ +

Sabràs que has resolt tots els errors quan en la sortida t’aparegui una banda amb el missatge següent:

+ +

Banda amb el text: "El document valida d'acord amb els esquemes i les restriccions addiconals especificats que verifica el validador"

+ +

Resum

+ +

Aquí tenim una introducció a la depuració de codi HTML, que t’hauria de proporcionar alguns coneixements útils per quan comencis a depurar CSS, JavaScript i altres tipus de codi, més endavant durant la carrera. Això també marca el final dels articles d’aprenentatge del mòdul Introducció a l’HTML; ara ja pots examinar-te tu mateix amb les nostres activitats d’avaluació: a sota trobaràs un enllaç a la primera d'elles.

+ +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}

diff --git a/files/ca/learn/html/introduction_to_html/document_and_website_structure/index.html b/files/ca/learn/html/introduction_to_html/document_and_website_structure/index.html new file mode 100644 index 0000000000..1088731eea --- /dev/null +++ b/files/ca/learn/html/introduction_to_html/document_and_website_structure/index.html @@ -0,0 +1,267 @@ +--- +title: Document i estructura del lloc web +slug: Learn/HTML/Introducció_al_HTML/Document_i_estructura_del_lloc_web +translation_of: Learn/HTML/Introduction_to_HTML/Document_and_website_structure +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}
+ +

Així com definim les parts individuals de la pàgina (per exemple, «un paràgraf» o «una imatge»), {{glossary("HTML")}} també compta amb una sèrie d'elements de nivell de bloc que s'utilitzen per a definir les àrees del teu lloc web (com ara «la capçalera», «el menú de navegació» o «la columna principal de contingut»). En aquest article es reflexiona sobre com planificar una estructura bàsica d'un lloc web, i com escriure el codi HTML per a representar aquesta estructura.

+ + + + + + + + + + + + +
Prerequisits:Familiaritat amb els conceptes bàsics de l’HTML que s'expliquen en Iniciació a l’HTML. Aplicació de format al text amb HTML, que s'explica en Fonaments de text amb HTML. Funcionament dels hipervincles, que s'expliquen en Crear hipervincles.
Objectiu:Aprendre a estructurar un document amb etiquetes semàntiques, i elaborar l'estructura d'un lloc web senzill.
+ +

Seccions bàsiques d'un document

+ +

Les pàgines web poden i tenen un aparença molt diferent les unes de les altres, però totes tendeixen a compartir components estàndard similars, llevat que a la pàgina es mostri un vídeo o un joc en pantalla completa, formi part d'alguna mena de projecte artístic, o simplement estigui mal estructurada:

+ +
+
capçalera (header)
+
Sol ser una gran franja a la part superior amb un títol gran i/o un logotip. És on en general es manté la informació principal comuna sobre un lloc web respecte d'una altra pàgina web.
+
barra de navegació (navigation bar)
+
Són els enllaços a les seccions principals del lloc; en general es representen com botons de menú, enllaços o pestanyes. Igual que la capçalera, aquest contingut en general roman característic d'una pàgina web respecte d’una altra; un sistema de navegació incoherent en el lloc web només portarà frustració i confusió als usuaris. Molts dissenyadors web consideren que la barra de navegació ha de ser part de la capçalera en lloc d'un component individual, però això no és un requisit; de fet, alguns sostenen també que el fet de tenir aquests dos elements separats és millor per motius d’accesibilitat, perquè els lectors de pantalla poden llegir més bé totes dues característiques si estan separades.
+
contingut principal (main content)
+
Una àrea gran al centre que conté la part principal del contingut particular d'una pàgina web determinada, per exemple, el vídeo que vols veure o la història principal que llegeixes, o el mapa que vols examinar, o els titulars de les notícies, etc. Aquesta és la part singular de la pàgina web que sens dubte variarà d'una pàgina web a una altra!
+
barra lateral (sidebar)
+
Informació secundària, enllaços, citacions, anuncis, etc. En general es tracta d’informació de context respecte de la que inclou el contingut principal (per exemple, en un article d’una pàgina de notícies, la barra lateral podria contenir la biografia de l'autor o enllaços a articles relacionats), però també hi ha casos en què trobaràs elements recurrents, com ara un sistema secundari de navegació.
+
peu de pàgina (footer)
+
Una franja a la part inferior de la pàgina que generalment conté la lletra petita, els avisos de copyright o informació de contacte. És un lloc per a posar-hi informació que és comuna (com la capçalera) per a tot el lloc web, però aquesta informació no és en general ni crítica ni secundària respecte de la pàgina web mateixa. El peu de pàgina també s'utilitza de vegades amb finalitats de posicionament {{Glossary("SEO")}}, en proporcionar enllaços per a un accés ràpid al contingut popular.
+
+ +

Un «lloc web típic» podria presentar una estructura semblant a això:

+ +

Un exemple senzill d’estructura de lloc web que inclou una capçalera principal, un menú de navegació, una àrea de contingut principal, una barra lateral i un peu de pàgina.

+ +

HTML per a estructurar el contingut

+ +

L'exemple senzill que es mostra a dalt no és bonic, però és perfectament acceptable per a il·lustrar un exemple típic de disseny d'una pàgina web. Alguns llocs web tenen més columnes, alguns són molt més complexos, però ja es copsa la idea. Amb el CSS correcte, pots usar gairebé qualsevol element per a delimitar les diferents seccions i assignar-los l’aspecte que vulguis però, com ja hem dit, cal respectar la semàntica i utilitzar l'element correcte per a la funció correcta.

+ +

Això és perquè els elements visuals no expliquen tota la història. Utilitzem el color i la mida de la lletra per a cridar l'atenció dels usuaris en les parts del contingut més rellevants, com ara el menú de navegació i els enllaços relacionats; però, què passa amb les persones que tenen una discapacitat visual, per exemple, que potser no troben gaire útils conceptes com «rosa» o «mida de lletra gran»?

+ +
+

Nota: Les persones daltòniques representen al voltant del 8% de la població mundial. Les persones cegues o amb discapacitats visuals representen aproximadament el 4-5% de la població mundial (el 2012 hi havia 285 milions d'aquest tipus de persones al món, mentre que la població total era de prop de 7.000 milions.)

+
+ +

En el teu codi HTML pots etiquetar seccions de contingut segons la funció que compleixen; pots fer servir elements que representin de manera inequívoca les seccions de contingut que hem descrit abans, i les tecnologies de suport com els lectors de pantalla poden reconèixer aquells elements i ajudar amb tasques com «trobar la navegació principal» o «trobar el contingut principal». Com ja hem esmentat abans en el curs, són moltes les conseqüències de no utilitzar una estructura i una semàntica correctes perquè un element compleixi la funció correcta.

+ +

Per a dur a terme aquest etiquetatge semàntic, l’HTML proporciona etiquetes específiques que es poden utilitzar per a representar aquestes seccions, per exemple:

+ + + +

Aprenentatge actiu: Analitzar el codi del nostre exemple

+ +

L’exemple que hem vist abans està representat pel codi següent (també pots trobar l’exemple en el repositori de GitHub). Observa’l a dalt i fes un cop d’ull a la llista següent per veure quines parts componen quines seccions visibles.

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+
+    <title>My page title</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css">
+    <link rel="stylesheet" href="style.css">
+
+    <!-- the below three lines are a fix to get HTML5 semantic elements working in old versions of Internet Explorer-->
+    <!--[if lt IE 9]>
+      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+  </head>
+
+  <body>
+    <!-- Here is our main header that is used accross all the pages of our website -->
+
+    <header>
+      <h1>Header</h1>
+    </header>
+
+    <nav>
+      <ul>
+        <li><a href="#">Home</a></li>
+        <li><a href="#">Our team</a></li>
+        <li><a href="#">Projects</a></li>
+        <li><a href="#">Contact</a></li>
+      </ul>
+
+       <!-- A Search form is another commmon non-linear way to navigate through a website. -->
+
+       <form>
+         <input type="search" name="q" placeholder="Search query">
+         <input type="submit" value="Go!">
+       </form>
+     </nav>
+
+    <!-- Here is our page's main content -->
+    <main>
+
+      <!-- It contains an article -->
+      <article>
+        <h2>Article heading</h2>
+
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>
+
+        <h3>subsection</h3>
+
+        <p>Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.</p>
+
+        <p>Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.</p>
+
+        <h3>Another subsection</h3>
+
+        <p>Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>
+
+        <p>Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.</p>
+      </article>
+
+      <!-- the aside content can also be nested within the main content -->
+      <aside>
+        <h2>Related</h2>
+
+        <ul>
+          <li><a href="#">Oh I do like to be beside the seaside</a></li>
+          <li><a href="#">Oh I do like to be beside the sea</a></li>
+          <li><a href="#">Although in the North of England</a></li>
+          <li><a href="#">It never stops raining</a></li>
+          <li><a href="#">Oh well...</a></li>
+        </ul>
+      </aside>
+
+    </main>
+
+    <!-- And here is our main footer that is used across all the pages of our website -->
+
+    <footer>
+      <p>©Copyright 2050 by nobody. All rights reversed.</p>
+    </footer>
+
+  </body>
+</html>
+ +

Pren-te un temps per observar el codi i intentar entendre’l; els comentaris que hi ha dins del codi també t’haurien d'ajudar a entendre’l. No et demanem de fer gaire més en aquest article perquè la clau per a entendre el disseny del document és escriure una estructura HTML semblant a aquesta i a continuació posar-hi CSS. Però ens esperarem per a això fins que comencis a estudiar com dissenyar amb CSS en l’article dedicat al CSS que tracta aquest tema.

+ +

Els elements HTML de disseny amb més detall

+ +

És bo entendre amb detall el significat general de tots els elements HTML de seccionament; treballarem aquesta qüestió de manera gradual a mesura que anem assolint més experiència en el desenvolupament web. Pots entrar en molt de detall amb la lectura de la nostra referència d’elements HTML. De moment, aquestes són les definicions principals que ens cal comprendre:

+ + + +

Delimitadors no semàntics

+ +

A vegades et trobes amb una situació en què no hi ha un element semàntic adequat per a agrupar junts un seguit d’elements o delimitar uns continguts concrets. A vegades pot ser que simplement vulguis agrupar un conjunt d'elements per a tractar-los tots com una sola entitat amb una mica de {{glossary("CSS")}} o {{glossary("JavaScript")}}. Per a casos com aquests, l’HTML proporciona els elements {{HTMLElement("div")}} i {{HTMLElement("span")}}. S'han d'utilitzar preferiblement amb un atribut {{htmlattrxref('class')}} adequat, que els proporcioni algun tipus d'etiqueta perquè se’ls pugui identificar fàcilment.

+ +

{{HTMLElement("span")}} és un element de línia no semàntic que només hauries d'utilitzar si no trobes cap altre element de text semàntic que vagi més bé per a delimitar aquell contingut, o no vols afegir-hi cap significat específic. Per exemple:

+ +
<p>The King walked drunkenly back to his room at 01:00, the beer doing nothing to aid
+him as he staggered through the door <span class="editor-note">[Editor's note: At this point in the
+play, the lights should be down low]</span>.</p>
+ +

En aquest cas, la nota de l'editor només pretén proporciona una indicació addicional per al director de l'obra; no es pretén que tingui un significat semàntic addicional. Podries aplicar-hi CSS per a distanciar aquesta nota del text principal als ulls d’un usuari vident.

+ +

{{HTMLElement("div")}} és un element de bloc no semàntic que només hauries d'utilitzar si no trobes cap altre element de bloc semàntic que vagi més bé per a delimitar aquell contingut, o no vols afegir-hi cap significat específic. Per exemple, imagina’t un giny de tipus carretó de la compra que pots optar per seleccionar en qualsevol moment durant el temps que navegues per un lloc web de comerç electrònic:

+ +
<div class="shopping-cart">
+  <h2>Shopping cart</h2>
+  <ul>
+    <li>
+      <p><a href=""><strong>Silver earrings</strong></a>: $99.95.</p>
+      <img src="../products/3333-0985/" alt="Silver earrings">
+    </li>
+    <li>
+      ...
+    </li>
+  </ul>
+  <p>Total cost: $237.89</p>
+</div>
+ +

No és realment un element <aside>, perquè no s'identifica necessàriament amb el contingut principal de la pàgina (vols que estigui accessible des de qualsevol lloc). Tampoc és particularment necessari utilitzar un element <section>, perquè no és part del contingut principal de la pàgina. En aquest cas està molt bé utilitzar un element <div>. Hi hem inclòs un títol d’encapçalament com un indicador per a ajudar els usuaris amb lectors de pantalla a trobar-ho.

+ +
+

Atenció: Els elements div són tan còmodes d'usar que és fàcil d'utilitzar-los en excés. Però com que no aporten cap valor semàntic, només introdueixen soroll en el teu codi HTML. Assegura’t d’utilitzar-los només quan no hi hagi cap altra solució semàntica més adequada i tracta de reduir-ne l’ús al mínim. En cas contrari et trobaràs amb moltes dificultats a l’hora d’actualitzar i mantenir els teus documents.

+
+ +

Salts de línia i separadors horitzontals

+ +

Dos elements que utilitzaràs de tant en tant i que voldràs conèixer són {{htmlelement("br")}} i {{htmlelement("hr")}}:

+ +

<br> crea un salt de línia en un paràgraf; és l'única manera de forçar una estructura rígida, en una situació en què vols un seguit de línies curtes fixes, com en una adreça postal o un poema. Per exemple:

+ +
<p>There once was a girl called Nell<br>
+Who loved to write HTML<br>
+But her structure was bad, her semantics were sad<br>
+and her markup didn't read very well.</p>
+ +

Sense els elements <br>, el paràgraf es mostraria en una línia llarga (com hem dit abans en el curs, l’HTML ignora la major part dels espais en blanc); amb aquests elements en el codi, el marcatge es mostra així:

+ +

There once was a girl called Nell
+ Who loved to write HTML
+ But her structure was bad, her semantics were sad
+ and her markup didn't read very well.

+ +

Els elements <hr> creen un separador horitzontal en el document que indica un canvi de temàtica en el text (com ara un canvi de tema o escena). Visualment es veu com una línia horitzontal. A tall d'exemple:

+ +
<p>Ron was backed into a corner by the marauding netherbeasts. Scared, but determined to protect his friends, he raised his wand and prepared to do battle, hoping that his distress call had made it through.</p>
+<hr>
+<p>Meanwhile, Harry was sitting at home, staring at his royalty statement and pondering when the next spin off series would come out, when an enchanted distress letter flew through his window and landed in his lap. He read it hasily, and lept to his feet; "better get back to work then", he mused.</p>
+ +

Seria com això:

+ +

Ron was backed into a corner by the marauding netherbeasts. Scared, but determined to protect his friends, he raised his wand and prepared to do battle, hoping that his distress call had made it through.

+ +
+

Meanwhile, Harry was sitting at home, staring at his royalty statement and pondering when the next spin off series would come out, when an enchanted distress letter flew through his window and landed in his lap. He read it hasily and sighed; "better get back to work then", he mused.

+ +

Planificar un lloc web senzill

+ +

Una vegada planificat el contingut d'una pàgina web simple, el pas lògic següent és tractar d'esbrinar quin contingut volem posar en tota la pàgina web, quines pàgines es necessitaran i de quina manera s'han d'arranjar i enllaçar l’una amb l'altra per a oferir la millor experiència d'usuari possible. Això s’anomena {{glossary("Arquitectura de la informació")}}. En un lloc web gran i complex, aquest procés pot requerir una gran planificació, però per a un lloc web senzill d'unes poques pàgines això pot ser força senzill, i fins i tot divertit!

+ +
    +
  1. Has de tenir en compte que hi ha d’haver uns quants elements comuns en la majoria de pàgines (si no totes), com ara el menú de navegació i els continguts del peu de pàgina. Si el lloc és per una empresa, per exemple, és una bona idea que tingui la informació de contacte disponible al peu de pàgina de cada pàgina. Apunta quins continguts vols que siguin comuns a totes les pàgines.Els elements comuns que hi ha d'haver a cada pàgina d'una pàgina web de viatges: el títol i el logotip, la informació de contacte, el copyright, la declaració de termes i condicions, el selector d'idioma, la política d'accessibilitat
    2. +
  2. A continuació, dibuixa un esbós de quina estructura vols que presenti cada pàgina (pot ser semblant a la nostra pàgina web senzilla d’abans). Pren nota de què hi haurà a cada bloc. Un diagrama senzill d'una mostra de l'estructura d'un lloc web, amb una capçalera, l'àrea de contingut principal , dues barres laterals i un peu de pàgina.
    3. +
  3. Ara, fes una previsió (una pluja d'idees) de la resta de continguts (que no seran comuns a totes les pàgines) que vols que hi hagi al lloc web; escriu-ne tota la llista, tan llarga com vulguis. Una llarga llista de tots els elements que podríem posar en el nostre lloc web de viatges, des d'un cercador fins a ofertes especials o informació específica per a cada país
    4. +
  4. A continuació, ordena tots aquests elements de contingut per grups, perquè et puguis fer una idea de quines parts poden anar juntes en les diferents pàgines. Això és molt similar a una tècnica anomenada classificació de targetes, o {{glossary("card sorting")}}. Els elements que haurien d'aoparpèixer en un lloc web de vacances, repartits en 5 categories: Cercar, Ofertes especials, Informació específica de país, Resultats de cerca i Compres.
    5. +
  5. Ara, dibuixa un mapa del lloc web en brut; dibuixa un globus per a cada pàgina del lloc web, i línies que mostrin el flux de treball esperat entre les pàgines. La pàgina d'inici probablement estarà al centre, i s’enllaçarà amb la majoria de les altres, si no amb totes; la major part de les pàgines d'un lloc web petit han d'estar disponibles en la navegació principal, encara que hi ha excepcions. També hi pots voler incloure observacions sobre com podrien presentar-se les coses.Un mapa del lloc web que mostra les pàgines d'inici, informació específica del país, resultats de cerca, pagament i compres
    6. +
+ +

Aprenentatge actiu: crea el teu mapa de lloc web propi

+ +

Fes l'exercici anterior per a un lloc web de creació pròpia. De què t’agradaria fer un lloc web?

+ +
+

Nota: Desa el teu treball en algun lloc; pot ser que el necessitis més endavant.

+
+ +

Resum

+ +

En aquest punt hauries de tenir idea més clara sobre com estructurar una pàgina/lloc web. En l'últim article d'aquest mòdul, estudiarem com depurar l’HTML.

+ +

Mira també

+ + + +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}

diff --git a/files/ca/learn/html/introduction_to_html/getting_started/index.html b/files/ca/learn/html/introduction_to_html/getting_started/index.html new file mode 100644 index 0000000000..03b70effc6 --- /dev/null +++ b/files/ca/learn/html/introduction_to_html/getting_started/index.html @@ -0,0 +1,735 @@ +--- +title: Inici en HTML +slug: Learn/HTML/Introducció_al_HTML/Getting_started +tags: + - Attribute + - Beginner + - CodingScripting + - Comment + - Element + - Guide + - HTML + - entity reference + - whitespace +translation_of: Learn/HTML/Introduction_to_HTML/Getting_started +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}
+ +

En aquest article exposarem els fonaments bàsics de l'HTML, perquè pugueu començar. Definirem els elements, els atributs i tots els altres termes importants que podeu haver sentit, i quina funció compleixen en el llenguatge. També us mostrarem com s'estructura un element HTML, com s'estructura una pàgina HTML típica, i explicarem altres característiques bàsiques importants del llenguatge. Pel camí, jugarem una mica amb l'HTML perquè mantinguis l'interès!

+ + + + + + + + + + + + +
Requisits previs:Coneixements bàsics d'informàtica, programari bàsic instal·lat i coneixements bàsics de treballar amb arxius.
Objectiu:Familiaritzar-se amb el llenguatge HTML i obtenir una mica de pràctica escrivint elements HTML.
+ +

Què és HTML?

+ +

{{glossary("HTML")}} (HyperText Markup Language) no és un llenguatge de programació; és un llenguatge de marcat, que serveix per dir al teu navegador la manera d'estructurar les pàgines web que visites. Pot ser tan complicat o tan simple com el desenvolupador web desitgi que sigui. HTML consisteix en un seguit d'{{glossary("Element", "elements")}}, que s'utilitzen per tancar, delimitar o marcar diferents parts del contingut per fer que aparegui o actuï d'una manera determinada . Les {{glossary("Tag", "etiquetes")}} que el delimiten poden convertir un petit fragment de contingut en un enllaç que connecti amb una altra pàgina en la web, per a posar paraules en cursiva, i així successivament. Per exemple, prenguem la següent línia de contingut:

+ +
My cat is very grumpy
+ +

Si volem que la línia es mantingui independent, podem especificar que és un paràgraf delimitant-la amb un element d'etiqueta de paràgraf ({{htmlelement ("p")}}):

+ +
<p>My cat is very grumpy</p>
+ +

Anatomia d'un element HTML

+ +

Explorem una mica el nostre element paràgraf fins una mica més enllà:

+ +

+ +

Les parts principals del nostre element són:

+ +
    +
  1. L'etiqueta d'obertura: Consisteix en el nom de l'element (en aquest cas, p), delimitat amb claus angulars d'obertura i tancament. Això indica on comença l'element, o comença a tenir efecte; en aquest cas és al començament del paràgraf.
    2. +
  2. L'etiqueta de tancament: És la mateixa que l'etiqueta d'obertura, excepte que inclou una barra inclinada abans del nom de l'element. Això indica on acaba l'element; en aquest cas és al final del paràgraf. El fet de no incloure una etiqueta de tancament és un error de principiant comú, i pot conduir a resultats estranys.
    3. +
  3. El contingut: És el contingut de l'element, que en aquest cas és només text.
    4. +
+ +

L'element és l'etiqueta d'obertura, seguida del contingut, seguida de l'etiqueta de tancament.

+ +

Aprenentatge actiu: crea el teu primer element HTML

+ +

Edita la línia següent en l'àrea d'entrada delimitant-la amb les etiquetes <em> i </em> (posa <em> abans d'obrir l'element, i </em> després, per tancar l'element); això hauria de donar una línia en cursiva! Pots veure els canvis actualitzats en viu en l'àrea de sortida.

+ +

Si t’equivoques sempre pots tornar al codi anterior amb el botó de Reinicia. Si et quedes realment encallat, fes clic al botó Mostra la solució per veure la resposta.

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 300) }}

+ +

Niar elements

+ +

També pots posar elements dins d'altres elements; això s’anomena imbricar. Si volem afirmar que el nostre gat està de molt mal humor, podem delimitar la paraula «molt» amb un element {{htmlelement("strong")}}, que significa que la paraula es destaca amb força:

+ +
<p>El meu gast està de <strong>molt</strong> mal humor.</p>
+ +

No obstant això, us heu d’assegurar que els elements estan correctament imbricats: en l'exemple anterior en primer lloc hem obert l'element p i a continuació l'element strong; per tant, hem de tancar l'element strong en primer lloc i l’element p a continuació. Fer el següent és incorrecte:

+ +
<p>El meu gat està <strong>de molt mal humor.</p></strong>
+ +

Els elements s’han d’obrir obrir i tancar correctament de manera que estiguin clarament dins o fora l’un de l'altre. Si se superposen, com a dalt, llavors el teu navegador web tractarà de fer l’estimació que li sembli més correcta del que vols dir, i així es poden obtenir resultats inesperats.

+ +

Elements de bloc i elements de línia

+ +

Hi ha dues categories importants d'elements en HTML, que has de conèixer: els elements de bloc i els elements de línia.

+ + + +

Prenguem l'exemple següent:

+ +
<em>first</em><em>second</em><em>third</em>
+
+<p>fourth</p><p>fifth</p><p>sixth</p>
+
+ +

{{htmlelement("em")}} és un element de línia. Així, com es pot veure a continuació, els tres primers elements són a la mateixa línia l'un i l'altre, sense cap espai entre ells. D'altra banda, {{htmlelement("p")}} és un element de bloc, de manera que cada element apareix en una línia nova, amb un espai per sobre i per sota de cada un (L'espaiat es deu a l'aplicació d’estil CSS que el navegador aplica als paràgrafs per defecte).

+ +

{{ EmbedLiveSample('Elements_de_bloc_i_elements_de_línia', 700, 200) }}

+ +
+

Nota: HTML5 va redefinir les categories d'elements en HTML5: vegeu Categories d'elements de contingut. Si bé aquestes definicions són més precises i menys ambigües que les anteriors, són molt més complicades d'entendre que «de bloc» i «de línia», per la qual cosa ens quedarem amb aquestes al llarg d'aquest article.

+
+ +
+

Nota: Podeu trobar pàgines de referència útils que inclouen llistes d'elements de bloc i elements de línia; vegeu els elements de nivell de bloc i els elements de línia.

+
+ +

Elements buits

+ +

No tots els elements segueixen el patró anterior d'etiqueta d'obertura, contingut i etiqueta de tancament. Alguns elements consisteixen en una sola etiqueta, que normalment s'utilitza per inserir/incrustar alguna cosa  en el document en el lloc on s'inclou. Per exemple, l'element {{htmlelement("img")}} insereix una imatge en una pàgina en la posició en què està inclosa:

+ +
<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png">
+ +

Aquesta sortida mostraria el següent a la vostra pàgina:

+ +

{{ EmbedLiveSample('Elements_buits', 700, 300) }}

+ +
+

Nota: Els elements buits també se'ls anomena de vegades (void elements).

+
+ +

Atributs

+ +

Els elements també poden tenir atributs, que tenen presenten l’aspecte següent:

+ +

&lt;p class="editor-note">My cat is very grumpy&lt;/p>

+ +

Els atributs contenen informació addicional sobre l'element que no vols que aparegui com a contingut. En aquest cas, l'atribut class permet donar a l'element un nom d'identificació que pot ser posteriorment utilitzat per l'element destí amb informació d'estil i altres coses.

+ +

Un atribut ha de tenir:

+ +
    +
  1. Un espai entre ell i el nom de l'element (o l'atribut anterior, si l'element ja té un o més atributs.)
    2. +
  2. El nom de l'atribut, seguit d'un signe igual.
    3. +
  3. Un valor d'atribut, amb signes d'obertura i de tancament de cometes que el delimiten
    4. +
+ +

Aprenentatge actiu: Afegir atributs a un element

+ +

Un altre exemple d'un element és {{HTMLElement ("a")}}; ve d’anchor i delimita la part del text que és un enllaç. Pot prendre un seguit d'atributs, però dos són els següents:

+ + + +

Edita la línia següent en l'àrea Input per convertir-la en un enllaç al teu lloc web favorit.

+ +
    +
  1. Afegeix l'element <a>.
    2. +
  2. Afegeix l'atribut href, i seguidament l'atribut title.
    3. +
  3. Especifica l'atribut target per obrir l'enllaç en una nova pestanya.
    4. +
+ +

Observa els canvis actualitzats en directe a l'àrea Output. Hauries de veure un enllaç, que en passar-hi per sobre mostrarà el contingut de l'atribut title, i en clicar-hi, va a l'adreça web de l'element href. Recorda que has d’incloure un espai entre el nom de l'element i cada atribut.

+ +

Si t’equivoques, sempre pots restablir el codi anterior amb el botó de reinici. Si et quedes realment encallat, fes clic al botó Mostra la solució per veure la solució.

+ + + +

{{ EmbedLiveSample('Codi_executable_2', 700, 300) }}

+ +

Atributs booleans

+ +

De vegades veuràs atributs que estan escrits sense valors; això està perfectament permès. S’anomenen atributs booleans, i només poden tenir un valor, que és generalment el mateix que el nom de l'atribut. A tall d'exemple, preneu l'atribut {{htmlattrxref("disabled", "input")}}, que es pot assignar als elements d’entrada de dades d'un formulari, si voleu que estiguin desactivats (en gris) perquè l'usuari no hi pugui entrar cap dada. Per exemple,

+ +
<input type="text" disabled="disabled">
+ +

Com a forma abreujada, és perfectament admissible escriure-ho de la manera següent (també hem inclòs un element d’entrada de dades de formulari no desactivat com a referència, perquè tinguis una idea de què passa):

+ +
<input type="text" disabled>
+
+<input type="text">
+
+ +

Tots dos donaran una sortida com la següent:

+ +

{{ EmbedLiveSample('Atributs_booleans', 700, 100) }}

+ +

Ometre les cometes que delimiten els valors dels atributs

+ +

Quan navegues per la web, et trobes amb tot tipus d'estils de marcat estranys, inclosos valors d'atributs sense cometes. Això és permissible en algunes circumstàncies, però en d'altres trencarà el codi de marcatge. Per exemple, si reprenem el nostre exemple d'enllaç d'abans, podem escriure una versió bàsica amb només l'atribut href, així:

+ +
<a href=https://www.mozilla.org/>favourite website</a>
+
+ +

No obstant això, quan afegim a aquest estil l'atribut title, les coses no funcionen:

+ +
<a href=https://www.mozilla.org/ title=The Mozilla homepage>favourite website</a>
+
+ +

En aquest punt, el navegador ha interpretat malament el marcatge perquè pensa que l'atribut title té en realitat tres atributs: un atribut title amb el valor «The», i dos atributs booleans, Mozilla i homepage. Això, òbviament, no és el que es pretenia, i causarà errors o un comportament inesperat en el codi, com es veu en l'exemple a continuació. Intenta passar sobre l'enllaç per veure quin és el títol del text!

+ +

{{ EmbedLiveSample('Ometre_les_cometes_que_delimiten_els_valors_dels_atributs', 700, 100) }}

+ +

Inclou sempre les cometes de l'atribut. Evita aquest tipus de problemes, i el codi resulta més llegible.

+ +

Cometes simples o dobles?

+ +

En aquest article t’adonaràs que els atributs estan delimitats per cometes dobles. No obstant això, és possible que vegis cometes simples en algun codi HTML. Això és purament una qüestió d'estil, i ets lliure d'escollir . Les dues línies següents són equivalents:

+ +
<a href="http://www.example.com">A link to my example.</a>
+
+<a href='http://www.example.com'>A link to my example.</a>
+ +

Però t’has d’assegurar que no es barregen. El codi següent no et funcionarà!

+ +
<a href="http://www.example.com'>A link to my example.</a>
+ +

Si has utilitzat un tipus de cometes en el codi HTML, pots fer servir l’altre tipus de cometes per als teus valors d’atribut sense tenir problemes:

+ +
<a href="http://www.example.com" title="Isn't this fun?">A link to my example.</a>
+ +

Ara bé, si vols imbricar cometes dins de cometes, i són iguals, has d’utilitzar {{anch ("Entitats de referències: incloent caràcters especials en HTML")}}. Per exemple, aquest marcatge trencarà el codi:

+ +
<a href='http://www.example.com' title='Isn't this fun?'>A link to my example.</a>
+ +

Així, necessites fer el següent:

+ +
<a href='http://www.example.com' title='Isn&#39;t this fun?'>A link to my example.</a>
+ +

Anatomia d'un document HTML

+ +

Els elements HTML no són gaire útils per si mateixos. Ara veurem com els elements individuals es combinen per formar una pàgina HTML completa:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>My test page</title>
+  </head>
+  <body>
+    <p>This is my page</p>
+  </body>
+</html>
+ +

Aquí tenim:

+ +
    +
  1. <!DOCTYPE html>: El tipus de document. Als inicis, quan HTML era jove (al voltant de 1991/1992), els doctype estaven destinats a actuar com enllaços cap a un conjunt de regles que la pàgina HTML havia de seguir per ser considerat un bon HTML, que podia significar la comprovació automàtica d'errors i altres coses útils. Solien ser alguna cosa com ara això: + + 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    + Avui dia són un llegat històric que cal incloure perquè tot funcioni. <!DOCTYPE html> és la cadena més curta de caràcters que es considera com un tipus de document vàlid. Això és tot el que realment et cal saber.
    2. +
  2. <html></html>: L'element <html> delimita tot el contingut de la pàgina, i de vegades es coneix com l'element arrel.
    3. +
  3. <head></head>: L'element <head> actua com un contenidor de totes les coses que vols incloure a la pàgina HTML, però que no són el contingut que vols mostrar als visitants de la teva pàgina. Això inclou coses com ara paraules clau i una descripció de la pàgina que vols que aparegui en els resultats de cerca, estil CSS per al teu contingut, declaracions de conjunts de caràcters, i més. N’aprendràs més en el proper article de la sèrie.
    4. +
  4. <meta charset="utf-8">: Aquest element especifica que el teu document utilitzarà el conjunt de caràcters UTF-8, que inclou la majoria dels caràcters de tots els idiomes humans escrits coneguts. Si ho poses, en essència pots gestionar qualsevol contingut textual possible. No hi ha cap raó per no establir-lo, i us pot ajudar a evitar alguns problemes més endavant.
    5. +
  5. <title></title>: Estableix el títol de la pàgina, que és el títol que apareix a la pestanya del navegador quan carrega la pàgina, i s'utilitza per descriure la pàgina quan l’afegeixes als teus marcadors/favorits.
    6. +
  6. <body></body>: Inclou tot el contingut que es mostra a la teva pàgina, ja sigui text, imatges, vídeos, jocs, reproducció de pistes d'àudio o qualsevol altra cosa.
    7. +
+ +

Aprenentatge actiu: Afegir característiques a un document HTML

+ +

Si vols escriure una mica d'HTML en el teu ordinador local per a experimentar, pots:

+ +
    +
  1. Copiar l'exemple de la pàgina HTML que apareix a dalt.
    2. +
  2. Crear un arxiu nou a l'editor de text.
    3. +
  3. Enganxar el codi en l’arxiu nou de text.
    4. +
  4. Desar el fitxer com index.html.
    5. +
+ +
+

Nota: també pots trobar aquesta plantilla bàsica HTML en el repositori Github de l’Àrea d’aprenentatge d’MDN.

+
+ +

Ara pots obrir aquest arxiu en un navegador web per veure quina aparença té el codi reproduït, i després editar el codi i actualitzar el navegador per veure quin n’és el resultat. Inicialment es veurà així:

+ +

A simple HTML page that says This is my pageEn aquest exercici pots editar el codi localment en el teu ordinador, com s’ha indicat abans, o pots editar-lo en la finestra de mostra editable a continuació (la finestra de mostra editable representa només el contingut de l'element <body>, en aquest cas). Intenta reproduir els passos següents:

+ + + +

Si t’equivoques, sempre pots restablir el codi anterior amb el botó Reinicia. Si realment et quedes encallat, fes clic al botó Mostra la solució per veure la solució.

+ + + +

{{ EmbedLiveSample('Codi_executable_3', 700, 600) }}

+ +

Els espais en blanc en HTML

+ +

Et deus haver adonat que en els exemples anteriors hi ha una gran quantitat d'espais en blanc i salts de línia en el codi; això no és necessari en absolut; els dos fragments de codi següents són equivalents:

+ +
<p>Dogs are silly.</p>
+
+<p>Dogs        are
+         silly.</p>
+ +

No importa la quantitat d'espais en blanc que utilitzis (pots incloure caràcters d'espai, però també salts de línia), l'intépret HTML ho redueix tot a un sol espai quan el codi es representa. Així, per què utilitzem tant els espais en blanc? La resposta és la llegibilitat.

+ +

És molt més fàcil d'entendre què passa al teu codi si té un format endreçat, que no si està desordenat. En el nostre HTML, cada element imbricat té una sagnia de dos espais més respecte del que el conté. De tu depèn l'estil de format que utilitzis (el nombre d'espais per a cada nivell de sagnat, per exemple), però t’has de plantejar l'ús d'algun tipus de format.

+ +

Referències a entitats: inclusió de caràcters especials en HTML

+ +

En HTML, els caràcters <, >,",' i & són caràcters especials. Són parts de la sintaxi HTML en si; ara bé, com hem d’incloure un d'aquests caràcters en el text, per exemple, si realment volem emprar un ampersand (&) o el signe menys que (<), i que els navegadors no l'interpretin com codi?

+ +

Hem d'utilitzar referències de caràcters, codis especials que representen caràcters i que es poden utilitzar en aquestes circumstàncies exactes. Tots els caràcters de referència s'inicien amb un signe (&) i acaben amb un punt i coma (;).

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Caràcter literalReferència de caràcter equivalent
<&lt;
>&gt;
"&quot;
'&apos;
&&amp;
+ +

En el següent exemple, pots veure dos paràgrafs, que parlen sobre tecnologies web:

+ +
<p>In HTML, you define a paragraph using the <p> element.</p>
+
+<p>In HTML, you define a paragraph using the &lt;p&gt; element.</p>
+ +

A la sortida en directe que veus a continuació pots observar que el primer paràgraf ha anat malament perquè el navegador pensa que la segona instància de <p> inicia un paràgraf nou! El segon paràgraf es veu bé perquè hem reemplaçat els parèntesis angulars amb referències de caràcters.

+ +

{{ EmbedLiveSample('Referències_a_entitats_inclusió_de_caràcters_especials_en_HTML', 700, 200) }}

+ +
+

Nota: Un gràfic de totes les referències a entitats de caràcters HTML disponibles, es pot trobar en la Viquipèdia: Llista de XML i HTML de les referències a entitats de caràcters.

+
+ +

Comentaris HTML

+ +

En HTML hi ha un mecanisme disponible per escriure comentaris en el codi. El navegador ignora els comentaris, i així també són invisibles per a l'usuari. E·l seu propòsit és permetre que puguis incloure comentaris en el codi per a aclarir-ne el funcionament, explicar què fan les diferents parts, etc. Això pot ser molt útil com a recordatori del treball que has fet si tornes a treballar en un codi amb què no has treballat durant 6 mesos; o si el lliures a una altra persona perquè hi treballi.

+ +

Per a convertir en un comentari una secció de contingut del teu arxiu HTML, l’has de delimitar amb els marcadors especials <!-- i -->. Per exemple:

+ +
<p>I'm not inside a comment</p>
+
+<!-- <p>I am!</p> -->
+ +

Com pots veure a continuació, el primer paràgraf apareix a la sortida en directa, però el segon no ho fa.

+ +

{{ EmbedLiveSample('Comentaris_HTML', 700, 100) }}

+ +

Resum

+ +

Has arribat al final de l'article! Esperem que hagis gaudit de la visita als conceptes bàsics d'HTML. En aquest punt, hauries de ser capaç d'entendre el llenguatge i com funciona en un nivell bàsic, i hauries de ser capaç d'escriure alguns elements i atributs. En els articles següents del mòdul ens introduirem amb més detall en algunes de les coses que ja has examinat, i introduirem algunes característiques noves del llenguatge.

+ +
+

Nota: En aquest punt, a mesura que comences a aprendre més sobre HTML, és possible que també vulguis començar a explorar els fonaments dels fulls d’estil e cascada (cascading style sheets o CSS). CSS és el llenguatge que s’utilitza per a aplicar estil a les teves pàgines web (per exemple, pots canviar el tipus de lletra o els colors, o alterar el disseny de pàgina). HTML i CSS van alhora, com descobriràs de seguida.

+
+ +
{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}
diff --git a/files/ca/learn/html/introduction_to_html/html_text_fundamentals/index.html b/files/ca/learn/html/introduction_to_html/html_text_fundamentals/index.html new file mode 100644 index 0000000000..fafc49effe --- /dev/null +++ b/files/ca/learn/html/introduction_to_html/html_text_fundamentals/index.html @@ -0,0 +1,950 @@ +--- +title: Fonaments de text HTML +slug: Learn/HTML/Introducció_al_HTML/Fonaments_de_text_HTML +tags: + - Beginner + - CodingScripting + - Guide + - HTML + - Introduction to HTML + - Learn + - Text + - headings + - paragraphs + - semantics +translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}
+ +

Una de les funcions principals de l'HTML és donar estructura i significat al text (també conegut com {{glossary("semàntica")}}), perquè el navegador el pugui mostrar correctament. En aquest article s'explica la forma com es pot utilitzar {{glossary("HTML")}} per estructurar una pàgina de text afegint títols i paràgrafs, destacant paraules, amb la creació de llistes, i més.

+ + + + + + + + + + + + +
Requisits previs:Familiaritzar-se amb els elements bàsics de l’HTML, com es tracta en Inici en HTML.
Objectiu:Aprendre com marcar una pàgina bàsica de text per donar-hi estructura i significat - incloent paràgrafs, capçaleres, llistes, destacats i cites.
+ +

Conceptes bàsics: capçaleres i paràgrafs

+ +

La majoria del text estructurat es compon de títols i paràgrafs, independentment de si llegeixes una història, un diari, un llibre de text universitari, una revista, etc.

+ +

An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs.

+ +

El contingut estructurat fa que l'experiència de llegir sigui més fàcil i agradable.

+ +

En HTML, cada paràgraf s’ha de delimitar amb un element {{htmlelement("p")}}, així:

+ +
<p>I am a paragraph, oh yes I am.</p>
+ +

Cada títol s’ha de delimitar amb un element de títol:

+ +
<h1>I am the title of the story.</h1>
+ +

Hi ha sis elements de títol: {{htmlelement("h1")}}, {{htmlelement("h2")}}, {{htmlelement("h3")}}, {{htmlelement("h4")}}, {{htmlelement("h5")}} i {{htmlelement("h6")}}. Cada element representa un nivell de contingut diferent del document; <h1> representa el títol principal, <h2> representa un subtítol, <h3> representa un subsubtítol, i així successivament.

+ +

Implementar una estructura jeràrquica

+ +

A tall d'exemple, en una història, <h1> representaria el títol de la història, <h2> representaria el títol de cada capítol i <h3> representaria subseccions de cada capítol, i així successivament.

+ +
<h1>The Crushing Bore</h1>
+
+<p>By Chris Mills</p>
+
+<h2>Chapter 1: The Dark Night</h2>
+
+<p>It was a dark night. Somewhere, an owl hooted. The rain lashed down on the ...</p>
+
+<h2>Chapter 2: The eternal silence</h2>
+
+<p>Our protagonist could not so much as a whisper out of the shadowy figure ...</p>
+
+<h3>The specter speaks</h3>
+
+<p>Several more hours had passed, when all of a sudden the specter sat bolt upright and exclaimed, "Please have mercy on my soul!"</p>
+ +

Què representen exactament els elements que intervenen depèn en realitat de tu, sempre que la jerarquia tingui sentit. Només has de tenir en compte un seguit de bones pràctiques a mesura que crees aquest tipus d'estructures:

+ + + +

Per què cal una estructura?

+ +

Per respondre a aquesta pregunta, fem una ullada a text-start.html; el punt de partida del nostre exemple d'aquest article (una bona recepta d’humus). Desa una còpia d'aquest arxiu a l'ordinador, el necessitaràs per als exercicis més endavant. El cos d'aquest document actualment conté diversos elements de contingut, que no estan marcats de cap manera, però estan separats per salts de línia (Intro/Retorn picat per a passar a la línia següent).

+ +

No obstant això, quan obres el document en el navegador, observa que el text apareix com gran garbuix!

+ +

A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it.

+ +

Això és perquè no hi ha elements que donin estructura als continguts, de manera que el navegador no sap què és un títol i què és un paràgraf. A més:

+ + + +

Per tant, hem de donar al nostre contingut un etiquetatge estructural.

+ +

Aprenentatge actiu: donar estructura als continguts

+ +

Passem directament a un exemple en viu. En l'exemple següent, afegim elements al text sense format en el requadre d’entrada perquè en el requadre de sortida aparegui com un títol i dos paràgrafs.

+ +

Si t’equivoques, sempre pots tornar a començar amb el botó de reinici. Si t’encalles, fes clic al botó Mostra la solució per veure la resposta.

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 500) }}

+ +

Per què cal semàntica?

+ +

Tot al nostre entorn compta amb la semàntica; comptem amb l'experiència prèvia per a conèixer la funció dels objectes quotidians; quan veiem una cosa, sabem quina és la seva funció. Així, per exemple, esperem que un semàfor en vermell tingui el sentit de «parar», i un semàfor en verd signifiqui «continuar». Si apliquem malament la semàntica, les coses poden complicar-se ràpidament (hi ha cap país en què el vermell signifiqui «continuar»? Esperem que no!).

+ +

En una línia similar, ens hem d’assegurar que utilitzem els elements correctes per a donar al nostre contingut el significat, la funció o l’aspecte correctes. En aquest context, l'element {{htmlelement("h1")}} és també un element semàntic, que dona al text al qual delimita la funció (o el sentit) d'un «nivell superior en la capçalera de la teva pàgina».

+ +
<h1>This is a top level heading</h1>
+ +

Per defecte, el navegador hi donarà una mida de cos de lletra gran perquè es vegi com un títol d’encapçalament (encara que amb CSS podries aplicar-hi estil perquè tingui l’aspecte que vulguis). I encara és més important el fet que el seu valor semàntic s’utilitzarà de diverses maneres, per exemple, l’empraran els motors de cerca i els lectors de pantalla (com hem esmentat abans).

+ +

D'altra banda, tu pots fer que qualsevol element sembli un títol de nivell superior. Considera el codi següent:

+ +
<span style="font-size: 32px; margin: 21px 0;">Is this a top level heading?</span>
+ +

Aquest és un element {{htmlelement("span")}}. No té semàntica. Es fa servir per a delimitar el contingut quan vols aplicar-hi CSS (o fer alguna cosa amb JavaScript) sense donar-hi cap significat addicional (en trobaràs més informació més endavant en el curs). Hi hem aplicat una mica de CSS perquè es vegi com un títol de nivell superior, però ja que no té valor semàntic, no aconseguirà cap dels beneficis addicionals que hem esmentat abans. És bo emprar l'element HTML que correspon a cada funció.

+ +

Llistes

+ +

Ara centrarem la nostra atenció en les llistes. Les llistes estan per tot arreu en la vida, de la llista de la compra a la llista de carrers que seguim subconscientment per a arribar a casa cada dia, a les llistes d'instruccions que segueixes en aquests tutorials! Les llistes també estan pertot arreu al web, i n’hi ha tres tipus diferents dels quals ens volem ocupar.

+ +

No ordenades

+ +

Les llistes no ordenades s'utilitzen per a marcar les llistes d'elements en què l'ordre dels elements no és important; com a exemple, farem una llista de la compra.

+ +
milk
+eggs
+bread
+hummus
+ +

Totes les llistes no ordenades comencen amb un element {{htmlelement("ul")}} que delimita tots els elements de la llista:

+ +
<ul>
+milk
+eggs
+bread
+hummus
+</ul>
+ +

L'últim pas consisteix a delimitar cada element de la llista amb un element {{htmlelement("li")}} (element de llista):

+ +
<ul>
+  <li>milk</li>
+  <li>eggs</li>
+  <li>bread</li>
+  <li>hummus</li>
+</ul>
+ +

Aprenentatge actiu: etiquetatge d'una llista no ordenada

+ +

Modifica l'exemple en viu a continuació per a crear la teva llista HTML no ordenada pròpia.

+ + + +

{{ EmbedLiveSample('Playable_code_2', 700, 400) }}

+ +

Ordenades

+ +

Les llistes ordenades són llistes en què l'ordre dels elements és important. Com a exemple, prendrem un seguit d’instruccions per a arribar a una adreça:

+ +
Drive to the end of the road
+Turn right
+Go straight across the first two roundabouts
+Turn left at the third roundabout
+The school is on your right, 300 meters up the road
+ +

L'estructura de l’etiquetatge és la mateixa que per a les llistes no ordenades, excepte que cal delimitar els elements de la llista amb un element {{htmlelement("ol")}}, en lloc d’amb un element <ul>:

+ +
<ol>
+  <li>Drive to the end of the road</li>
+  <li>Turn right</li>
+  <li>Go straight across the first two roundabouts</li>
+  <li>Turn left at the third roundabout</li>
+  <li>The school is on your right, 300 meters up the road</li>
+</ol>
+ +

Aprenentatge actiu: etiquetatge d'una llista ordenada

+ +

Modifica l'exemple en viu a continuació per a crear la teva llista HTML ordenada pròpia.

+ + + +

{{ EmbedLiveSample('Playable_code_3', 700, 500) }}

+ +

Aprenentatge actiu: etiquetatge de la teva pàgina de receptes

+ +

En aquest punt de l'article ja tens tota la informació que necessites per a marcar el teu exemple d’una pàgina de receptes. Pots optar per desar una còpia local del nostre arxiu d'inici text-start.html i fer la feina allà, o fer-ho en l'exemple editable a continuació. Fer-ho de manera local probablement serà millor, perquè aleshores podràs desar la feina que hi facis, mentre que si treballes en l'exemple editable, la perdràs la vegada següent que obris la pàgina. Totes dues coses tenen pros i contres.

+ + + +

{{ EmbedLiveSample('Playable_code_4', 700, 500) }}

+ +

Si t’encalles, sempre es pot prémer el botó Mostra la solució o fer un cop d'ull al nostre exemple text-complete.html que trobaràs en el nostre repositori de GitHub.

+ +

Llistes imbricades

+ +

És perfectament correcte imbricar una llista dins d'una altra. És possible que vulguis tenir subvinyetes sota d’una vinyeta de nivell superior. Considera la segona llista del nostre exemple recepta:

+ +
<ol>
+  <li>Remove the skin from the garlic, and chop coarsely.</li>
+  <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>
+  <li>Add all the ingredients into a food processor.</li>
+  <li>Process all the ingredients into a paste.</li>
+  <li>If you want a coarse "chunky" humous, process it for a short time.</li>
+  <li>If you want a smooth humous, process it for a longer time.</li>
+</ol>
+ +

Atès que les dues últimes vinyetes estan molt estretament relacionades amb l'anterior (es llegeixen com a subinstruccions o opcions que s'ajusten per sota d'aquesta vinyeta), podria tenir sentit imbricar-les en una llista desordenada pròpia i posar aquesta llista dins de la quarta vinyeta. Es veuria així:

+ +
<ol>
+  <li>Remove the skin from the garlic, and chop coarsely.</li>
+  <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>
+  <li>Add all the ingredients into a food processor.</li>
+  <li>Process all the ingredients into a paste.
+    <ul>
+      <li>If you want a coarse "chunky" humous, process it for a short time.</li>
+      <li>If you want a smooth humous, process it for a longer time.</li>
+    </ul>
+  </li>
+</ol>
+ +

Torna a l'exemple de l'aprenentatge actiu anterior i modifica la segona llista de la mateixa manera.

+ +

Èmfasi i importància

+ +

En el llenguatge humà, sovint destaquem certes paraules per a alterar el significat d'una oració, i moltes vegades volem ressaltar certes paraules perquè són importants o perquè són diferents d'alguna manera. HTML proporciona diversos elements semàntics que permeten destacar el contingut textual amb aquesta finalitat, i en aquest apartat en veurem alguns dels més comuns.

+ +

Èmfasi

+ +

Quan en el llenguatge parlat volem donar èmfasi, accentuem certes paraules de manera que n’alterem subtilment el significat. De la mateixa manera, en el llenguatge escrit tendim a posar en cursiva les paraules que volem emfatitzar. Per exemple, les dues frases següents tenen significats diferents.

+ +

I am glad you weren't late.

+ +

I am glad you weren't late.

+ +

La primera frase expressa alleujament autèntic perquè la persona no arriba tard. Per contra, la segona sona amb sarcasme o agressivitat passiva, que expressa enuig perquè la persona arriba una mica tard.

+ +

En HTML s'utilitza l'element {{htmlelement("em")}} (èmfasi) per marcar aquests casos. Alhora que fa que el document sigui més interessant de llegir, els lectors de pantalla reconeixen aquests elements i hi incorporen un to de veu parlat diferent. Els navegadors hi apliquen per defecte l’estil de lletra cursiva, però aquesta etiqueta no és l’única que podem usar per a donar un estil de lletra cursiva. Per a això també podem utilitzar un element {{htmlelement("span")}} i una mica de CSS, o potser un element {{htmlelement("i")}} (veure més endavant).

+ +
<p>I am <em>glad</em> you weren't <em>late</em>.</p>
+ +

Importància forta

+ +

Per a destacar la importància de les paraules, en el llenguatge parlat tendim a accentuar-les, i en el llenguatge escrit les posem en lletra negreta. Per exemple:

+ +

This liquid is highly toxic.

+ +

I am counting on you. Do not be late!

+ +

En HTML s'utilitza l'element {{htmlelement("strong")}} (importància forta) per a destacar aquests casos. A mes de fer el document més útil, de nou els lectors de pantalla reconeixen aquests elements i hi apliquen un to de veu diferent. L'estil per defecte que els navegadors apliquen a aquest text és la lletra negreta, però aquesta etiqueta no és l’única que podem usar per a aplicar l’estil de lletra negreta. Per a això també podem utilitzar un element {{htmlelement("span")}} i una mica de CSS, o potser un element {{htmlelement("b")}} (veure més endavant).

+ +
<p>This liquid is <strong>highly toxic</strong>.</p>
+
+<p>I am counting on you. <strong>Do not</strong> be late!</p>
+ +

Pots imbricar etiquetes d’importància i èmfasi les unes dins de les altres, si ho vols:

+ +
<p>This liquid is <strong>highly toxic</strong> —
+if you drink it, <strong>you may <em>die</em></strong>.</p>
+ +

Aprenentatge actiu: ser important!

+ +

En aquesta secció d'aprenentatge actiu, et proporcionem un exemple editable. Per a adquirir una mica de pràctica, afegeix èmfasi i importància a les paraules que penses que ho necessiten.

+ + + +

{{ EmbedLiveSample('Playable_code_5', 700, 500) }}

+ +

Cursiva, negreta, subratllat...

+ +

Els elements que hem tractat fins ara tenen una semàntica associada clara. La situació amb {{htmlelement("b")}}, {{htmlelement("i")}} i {{htmlelement("u")}} és una mica més complicada. Van arribar perquè la gent pogués escriure text en negreta, cursiva o subratllat en una època en què el CSS encara era poc compatible, o gens en absolut. Elements com aquests només afecten la presentació, però no la semàntica; es coneixen com elements de presentació i ja no s'haurien d'utilitzar perquè, com hem vist, la semàntica és molt important per a l'accessibilitat, el posicionament SEO, etc.

+ +

HTML5 va redefinir les etiquetes <b>, <i> i <u> amb funcions semàntiques noves, que tanmateix resulten un xic confuses.

+ +

Aquesta és la millor regla d'or: només és apropiat utilitzar <b>, <i> o <u> quan es vol transmetre un significat que tradicionalment s’ha expressat amb lletra negreta, cursiva o subratllat, si no hi ha cap element més adequat. No obstant això, sempre continua sent crític mantenir una mentalitat d'accessibilitat. El concepte de cursiva no és gaire útil per a les persones que utilitzen lectors de pantalla, ni per a les persones que utilitzen un sistema d'escriptura que no sigui l'alfabet llatí.

+ + + +
+

Una advertència amable sobre el subratllat: la gent associa en gran mesura el subratllat amb els hipervincles. Per tant, a la web, és millor posar en subratllat només els enllaços. Utilitza l'element <u> quan sigui semànticament apropiat, però considera l'ús de CSS per a canviar el valor per omissió del subratllat per alguna cosa més apropiada en la web. L’exemple següent il·lustra com es pot fer:

+
+ +
<!-- scientific names -->
+<p>
+  The Ruby-throated Hummingbird (<i>Archilocus colubris</i>)
+  is the most common hummingbird in Eastern North America.
+</p>
+
+<!-- foreign words -->
+<p>
+  The menu was a sea of exotic words like <i lang="uk-latn">vatrushka</i>,
+  <i lang="id">nasi goreng</i> and <i lang="fr">soupe à l'oignon</i>.
+</p>
+
+<!-- a known misspelling -->
+<p>
+  Someday I'll learn how to <u>spel</u> better.
+</p>
+
+<!-- Highlight keywords in a set of instructions -->
+<ol>
+  <li>
+    <b>Slice</b> two pieces of bread off the loaf.
+  </li>
+  <li>
+    <b>Insert</b> a tomato slice and a leaf of
+    lettuce between the slices of bread.
+  </li>
+</ol>
+ +

Resum

+ +

Això és tot per ara! Aquest article t’hauria d’haver donat una idea prou bona de com començar a marcar text en HTML i presentat alguns dels elements més importants en aquest àmbit. Hi ha molts més elements semàntics per a exposar en aquest àmbit, i en veurem molts més en el nostre article «Format de text avançat», més endavant en el curs. En el proper article, veurem amb detall com crear hipervincles, possiblement l'element més important en la web.

+ +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}

diff --git a/files/ca/learn/html/introduction_to_html/index.html b/files/ca/learn/html/introduction_to_html/index.html new file mode 100644 index 0000000000..721a2795f5 --- /dev/null +++ b/files/ca/learn/html/introduction_to_html/index.html @@ -0,0 +1,65 @@ +--- +title: Introducció a l'HTML +slug: Learn/HTML/Introducció_al_HTML +tags: + - CodingScripting + - HTML + - Introduction to HTML + - Landing + - Links + - Structure + - Text + - head + - semantics +translation_of: Learn/HTML/Introduction_to_HTML +--- +
{{LearnSidebar}}
+ +

En el fons, {{glossary("HTML")}} és un llenguatge bastant simple compost d'elements, que es poden aplicar a peces de text per donar-los significats diferents en un document (és un paràgraf? És una llista de vinyetes? és part d'una taula?), l'estructura d'un document en seccions lògiques (té una capçalera? tres columnes de contingut? un menú de navegació?) i inserir contingut com imatges i vídeos en una pàgina. Aquest mòdul us presentarà els dos primers d'aquests, i us introduirà en els conceptes fonamentals i la sintaxi que necessiteu saber per entendre HTML.

+ +

Requisits previs

+ +

Abans d'iniciar aquest mòdul, no cal cap coneixement previ d'HTML, però heu de tenir almenys coneixements bàsics en l'ús d'ordinadors, i l'ús de la web de forma passiva (és a dir, simplement mirant, consumint el contingut.) Heu de tenir un entorn de treball bàsic configurat com es descriu en Instal.lació de programari bàsic,  i entendre com crear i administrar arxius, com es detalla en Tractar amb arxius — tots dos són parts del nostre mòdul Introducció a la  web per a principiants.

+ +
+

Nota: Si esteu treballant en un ordinador/tauleta/altre dispositiu en el qual no teniu la capacitat de crear els vostres propis arxius, podeu provar (la majoria) els exemples de codi en un programa de codificació en línia, com ara JSBin o Thimble.

+
+ +

Guies

+ +

Aquest mòdul conté els següents articles, que us portaran a través de tota la teoria bàsica d'HTML, i oferint-vos una gran oportunitat per posar a prova algunes habilitats.

+ +
+
Introducció a HTML
+
Cobreix els fonaments absoluts d'HTML, perquè pugueu començar — definirem els elements, atributs i tots els altres termes importants que podeu haver sentit, i mostrarem on encaixen en el llenguatge. També us mostrarem com s'estructura un element HTML, com s'estructura una pàgina HTML típica, i explicarem altres importants característiques bàsiques del llenguatge. En el camí, jugarem amb una mica d'HTML, perquè t'interessi!
+
Què hi ha en la capçalera? Metadades en HTML
+
La capçalera (head) d'un document HTML és la part que no es mostra en el navegador web quan es carrega la pàgina. Conté informació tal com el {{htmlelement("title")}} de la pàgina, enllaços a {{glossary("CSS")}} (si voleu donar estil el vostre contingut HTML amb CSS), enllaços a favicones personalitzats, i les metadades (que són dades sobre l'HTML, com qui el va escriure, i les paraules clau importants que descriuen el document.)
+
Fonaments de text HTML
+
Un dels treballs principals de l'HTML és donar significat al text (també conegut com la semàntica), de manera que el navegador sàpiga com mostrar-lo correctament. En aquest article s'analitza com usar HTML per dividir un bloc de text en una estructura d'encapçalats i paràgrafs, afegir èmfasis/importància a les paraules, crear llistes i molt més.
+
Creació d'hipervincles
+
Els hipervincles són realment importants — són el que fan de la web un web. En aquest article es mostra la sintaxi necessària per fer un enllaç, i discuteix les millors pràctiques per als enllaços.
+
Format de text avançat
+
Hi ha molts altres elements en HTML per donar format al text, que no vam veure en l'article de fonaments de text HTML. Els elements que veurem aquí són menys coneguts, però encara així és útil conèixer-los. Aquí aprendreu sobre el marcatge de cites, llistes de descripció, codi de computadora i altre text relacionat, subíndexs i superíndexs, informació de contacte, i més.
+
Document i estructura del lloc web
+
Així com es defineixen les parts individuals de la pàgina (per exemple, "un paràgraf" o "una imatge"), HTML també s'utilitza per definir les àrees del vostre lloc web (per exemple, "la capçalera", "el menú de navegació", "la columna de contingut principal"). En aquest article es reflexiona sobre com planificar una estructura bàsica del lloc web, i escriure el codi HTML per representar aquesta estructura.
+
Depuració HTML
+
Escriure HTML està molt bé, però què passa si alguna cosa va malament i no trobes on està l'error en el codi? Aquest article us donarà a conèixer algunes eines que poden ajudar-vos.
+
+ +

Avaluacions

+ +

Les següents avaluacions posaran a prova la vostra comprensió dels conceptes bàsics d'HTML coberts en les guies anteriors.

+ +
+
Marcatge d'una carta
+
Tots aprenem a escriure una carta, tard o d'hora; també és un exemple útil per posar a prova les vostres habilitats de format de text! Així que en aquesta avaluació se us donarà una carta per marcar.
+
Estructuració d'una pàgina de contingut
+
Aquesta avaluació posa a prova la vsotra capacitat d'utilitzar HTML per estructurar una simple pàgina de contingut, que conté una capçalera, peu de pàgina, el menú de navegació, contingut principal, i la barra lateral.
+
+ +

Veure també

+ +
+
Conceptes bàsics d'alfabetització Web 1
+
Un excel·lent curs de la fundació Mozilla que explora i posa a prova moltes de les habilitats parlades al mòdul Introducció a HTML. Els estudiants es familiaritzaran amb la lectura, l'escriptura i participació en la web en aquest mòdul de sis parts. Descobriran els fonaments del web a través de la producció i col·laboració.
+
diff --git a/files/ca/learn/html/introduction_to_html/marking_up_a_letter/index.html b/files/ca/learn/html/introduction_to_html/marking_up_a_letter/index.html new file mode 100644 index 0000000000..34647eb294 --- /dev/null +++ b/files/ca/learn/html/introduction_to_html/marking_up_a_letter/index.html @@ -0,0 +1,90 @@ +--- +title: Marcatge d'una carta +slug: Learn/HTML/Introducció_al_HTML/Marcatge_una_carta +tags: + - Assessment + - Beginner + - CodingScripting + - HTML + - Links + - Text + - head +translation_of: Learn/HTML/Introduction_to_HTML/Marking_up_a_letter +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Learn/HTML/Introduction_to_HTML")}}
+ +

Tots aprenem a escriure una carta, tard o d'hora; també és un exemple útil per posar a prova les vostres habilitats de format de text! En aquesta avaluació, se us donarà una carta per al seu marcatge per posar a prova les habilitats bàsiques i avançades de format de text HTML, incloent hipervincles; a més, posareu a prova la vostra familiaritat amb alguns continguts HTML <head>.

+ + + + + + + + + + + + +
Requisits Previs:Abans de procedir amb aquesta avaluació, ja hauríeu d'haver treballat Inici en HTML, Què hi ha en el head? Metadades in HTML, fonaments de text HTML, Crear hipervincles, i format de text avançat.
Objectiu:Provar el format bàsic i avançat de text HTML i habilitats en hipervincles, i el coneixement del que succeeix en el codi HTML <head>.
+ +

Punt de partida

+ +

Per obtenir aquesta avaluació inicial, cal anar i agafar el text sense format que necessiteu per marcar, i el CSS que cal incloure en el codi HTML. Crear un nou arxiu .html amb el vostre editor de text per treballar-ho (o, alternativament, utilitzar un lloc com JSBin o Thimble per fer la avaluació.)

+ +

Resum del projecte

+ +

Per a aquest projecte, la tasca consisteix a marcar una carta que ha de ser allotjada en una intranet de la universitat. La carta és una resposta d'un investigador a un futur estudiant doctorat sobre la seva sol·licitud per treballar a la universitat.

+ +

Bloc/semàntica estructural:

+ + + +

Semàntica en línia:

+ + + +

La capçalera del document:

+ + + +

Consells i suggeriments

+ + + +

Exemple

+ +

La següent captura de pantalla mostra un exemple del que la carta podria ser després del seu marcat.

+ +

+ +

Evaluació

+ +

Si esteu seguint aquesta avaluació com a part d'un curs organitzat, heu de ser capaços de donar al vostre treball al vostre professor/tutor per qualificar-vos. Si sou d'auto-aprenentatge, llavors podeu obtenir la guia de qualificació, amb molta facilitat, preguntan a la llista de correu dev-mdc o al canal IRC #mdn en Mozilla IRC. Proveu el primer exercici - no hi ha res a guanyar amb trampa!

+ +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Learn/HTML/Introduction_to_HTML")}}

diff --git a/files/ca/learn/html/introduction_to_html/structuring_a_page_of_content/index.html b/files/ca/learn/html/introduction_to_html/structuring_a_page_of_content/index.html new file mode 100644 index 0000000000..e3481bdc15 --- /dev/null +++ b/files/ca/learn/html/introduction_to_html/structuring_a_page_of_content/index.html @@ -0,0 +1,93 @@ +--- +title: Estructurar una pàgina de contingut +slug: Learn/HTML/Introducció_al_HTML/Estructurar_una_pàgina_de_contingut +tags: + - Assessment + - Beginner + - CodingScripting + - Design + - HTML + - Layout + - Learn + - Structure + - semantics +translation_of: Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}
+ +

L'estructuració d'una pàgina de contingut llest per dissenyar, utilitzant CSS, és una habilitat molt important per dominar, pel que en aquesta avaluació es provarà la vostra capacitat de pensar sobre com una pàgina podria acabar veient-se, i triar la semàntica estructural apropiada per construir un disseny damunt.

+ + + + + + + + + + + + +
Requisits previs:Abans de procedir a aquesta avaluació heu hagut de treballar la resta del curs, amb un èmfasi particular en Documents i estructura del lloc web.
Objectiu:Posar a prova el coneixement de les estructures de pàgines web, i com representar un esquema de diseny possible en el marcat.
+ +

Punt de partida

+ +

Per obtenir aquesta avaluació inicial, cal anar i agafar l'arxiu zip que conté tots els recursos per començar. L'arxiu zip conté:

+ + + +

Crear l'exemple en el vostre equip local, o bé, utilitzar un lloc com JSBin or Thimble per fer la vostra avaluació.

+ +

Resum del projecte

+ +

Per a aquest projecte, la tasca és prendre el contingut de la pàgina principal d'un lloc web d'observació d'aus i afegir elements estructurals a la mateixa, pel que pot tenir un disseny de pàgina que se li aplica. S'ha de tenir:

+ + + +

Cal afegir un embolcall adequat per a:

+ + + +

També s'ha de:

+ + + +

Consells i suggeriments

+ + + +

Exemple

+ +

La següent captura de pantalla mostra un exemple del que la pàgina podria ser després del seu marcatge.

+ +

The finished example for the assessment; a simple webpage about birdwatching, including a heading of "Birdwatching", bird photos, and a welcome message

+ +

Avaluació

+ +

Si esteu seguint aquesta avaluació com a part d'un curs organitzat, heu de ser capaços de donar al vostre treball al vostre professor/tutor per qualificar-ho. Si sou d'auto-aprenentatge, llavors podeu obtenir la guia de qualificació amb molta facilitat preguntan fil del discurs de l'àrea d'aprenentatge o al canal d'IRC #mdn en Mozilla IRC. Prova el primer exercici - no hi ha res a guanyar amb trampa!

+ +

{{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}

diff --git a/files/ca/learn/html/introduction_to_html/the_head_metadata_in_html/index.html b/files/ca/learn/html/introduction_to_html/the_head_metadata_in_html/index.html new file mode 100644 index 0000000000..934377c4ca --- /dev/null +++ b/files/ca/learn/html/introduction_to_html/the_head_metadata_in_html/index.html @@ -0,0 +1,271 @@ +--- +title: Què hi ha en el head? Metadades en HTML +slug: Learn/HTML/Introducció_al_HTML/Què_hi_ha_en_el_head_Metadades_en_HTML +tags: + - Beginner + - CodingScripting + - Guide + - HTML + - Meta + - favicon + - head + - lang + - metadata +translation_of: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}
+ +

El {{glossary("Head", "head")}} és la part d'un document HTML que no es mostra en el navegador web quan es carrega la pàgina. Conté informació com el {{htmlelement("title")}} de la pàgina, els enllaços a {{glossary("CSS")}} (si voleu aplicar estil al vostre contingut HTML amb CSS), enllaços a favicones personalitzades, i altres metadades (dades sobre l'HTML, com qui l’ha escrit, i les paraules clau importants que descriuen el document). En aquest article exposarem tot això i molt més, per a donar-vos una bona base per a treballar amb el marcatge.

+ + + + + + + + + + + + +
Requisits previs:Familiaritat amb HTML, respecte dels continguts a Inici en HTML.
Objectiu:Aprendre sobre la capçalera HTML, quin propòsit té, quins elements importants pot contenir, i quin efecte que poden tenir en el document HTML.
+ +

Què és la capçalera d'HTML?

+ +

Fem un cop d’ull a aquest document HTML senzill que ja hem vist en l’article anterior:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>My test page</title>
+  </head>
+  <body>
+    <p>This is my page</p>
+  </body>
+</html>
+ +

La capçalera d'un document HTML és el contingut de l'element {{htmlelement("head")}}. A diferència dels continguts de l'element {{htmlelement("body")}}, que es mostren a la pàgina quan es carrega en un navegador, el contingut de la capçalera no es mostra a la pàgina. La funció de la capçalera, en canvi, és contenir {{glossary("Metadata", "metadades")}} sobre el document. En l'exemple anterior, la capçalera és més aviat curta:

+ +
<head>
+  <meta charset="utf-8">
+  <title>My test page</title>
+</head>
+ +

En pàgines més extenses, però, la capçalera pot arribar a estar força plena d'elements. Ves a alguns dels teus llocs web favorits i utilitza les eines del desenvolupador per revisar-ne el contingut de les capçaleres. El nostre objectiu aquí no és mostrar com utilitzar tot el que possiblement es pot posar a la capçalera, sinó ensenyar-te com fer servir els elements principals que hi inclouràs, i que t’hi familiaritzis. Comencem.

+ +

Afegir un títol

+ +

Ja hem vist l'element {{htmlelement("title")}} en acció: es pot emprar per a afegir un títol al document. Però aquest element es podria confondre amb {{htmlelement ("h1")}}, que s'utilitza per a afegir un títol d’encapçalament de nivell superior en el contingut del cos (body) del teu document. Això també es coneix de vegades com el títol de la pàgina. Però són coses diferents!

+ + + +

Aprenentatge actiu: Anàlisi d’un exemple senzill

+ +
    +
  1. Per començar aquest aprenentatge actiu, et proposem d’anar al nostre repositori de GitHub i que et descarreguis una còpia de la nostra pàgina title-example.html. Pots fer-ho de diverses maneres: + +
      +
    1. Copia i enganxa el codi de la pàgina en un arxiu de text nou de l'editor de codi, i a continuació, guarda’l en un lloc adequat.
      2. +
    2. Prem el botó «Raw» de la pàgina, selecciona File > Save Page As... del menú del teu navegador, i a continuació escull un lloc per a guardar l'arxiu.
      3. +
    +
    2. +
  2. Ara obre l'arxiu al teu navegador. Hauries de veure alguna cosa com això: +

    Una pàgina web senzilla amb el títol del document HTML en l’element <title> i el títol d’encapçalament de la pàgina <h1> en l’element <h1>.Ara, hauries de tenir clar on apareix el contingut de l’element <h1> i on apareix el contingut de <title>!

    +
    3. +
  3. També pots provar d’obrir el codi en el teu editor de codi, editar-ne els continguts, i a continuació actualitzar la pàgina en el teu navegador. Juga-hi una mica.
    4. +
+ +

El contingut de l'element <title> també s'utilitza per a altres coses. Per exemple, quan poses a la pàgina un marcador de pàgina (Bookmarks > Bookmark This Page, en Firefox), observa que el nom que se suggereix com a nom del marcador és el contingut de l’element <title>.

+ +

Una pàgina web amb un marcador de pagina en Firefox; el nom del marcadode pàgina s’omple automàticament amb el contingut de l’element <title>

+ +

El contingut de <title> també s'utilitza en els resultats de cerca, com es veu a continuació.

+ +

Metadades: l'element <meta>

+ +

Les metadades són dades que descriuen dades i HTML té una manera «oficial» d'afegir metadades a un document: l'element {{htmlelement("meta")}}. Per descomptat, que altres coses sobre les quals parlem en aquest article també podrien considerar-se metadades. Hi ha una gran quantitat de tipus d'elements <meta> diferents que es poden incloure en la capçalera (<head>) de la teva pàgina, però no provarem d'explicar-los tots en aquesta etapa, ja que podria acabaria sent massa confús. En lloc d’això, explicarem algunes coses amb què et pots trobar habitualment, només per a donar-te’n una idea.

+ +

Especificar la codificació de caràcters del document

+ +

En l'exemple que hem vist més amunt, s’hi ha inclòs aquesta línia:

+ +
<meta charset="utf-8">
+ +

Aquest element simplement especifica la codificació de caràcters del document: el conjunt de caràcters que el document pot utilitzar. UTF-8 és un conjunt de caràcters universal que inclou gairebé qualsevol caràcter de qualsevol idioma humà. Això vol dir que la vostra pàgina web serà capaç de gestionar la visualització de qualsevol idioma. Per tant, és una bona idea establir això a cada pàgina web que creïs! Per exemple, la pàgina podria gestionar anglès i japonès sense problema:

+ +

Una pàgina web que conté caràcters en anglès i en japonès, amb el conjunt universal de codificació de caràcters, o utf-8. Tots dos idiomes es veuen igual de bé,En canvi, si configures la teva codificació de caràcters segons ISO-8859-1, per exemple (el conjunt de caràcters de l'alfabet llatí), la representació de la teva pàgina s’esgavellaria del tot:

+ +

Una pàgina web que conté caràcters en anglès i en japonès, amb el conjunt de caràcters per a l’alfabet llatí. Els caràcters japonesos no es veuen correctament.

+ +

Aprenentatge actiu: Experimentar amb la codificació de caràcters

+ +

Per provar això, torneu a la plantilla HTML que heu obtingut en l'apartat anterior amb el <title> (la pàgina title-example.html), canvieu el valor charset de meta per la norma ISO-8859-1, i afegiu el japonès a la vostra pàgina. Aquest és el codi que fem servir:

+ +
<p>Japanese example: ご飯が熱い。</p>
+ +

Afegir un autor i una descripció

+ +

Molts elements <meta> inclouen els atributs name i content:

+ + + +

Aquests dos elements meta són útils d’incloure a la teva pàgina perquè defineixen l'autor de la pàgina i proporcionen una descripció concisa de la pàgina. Vegem-ne un exemple:

+ +
<meta name="author" content="Chris Mills">
+<meta name="description" content="The MDN Learning Area aims to provide
+complete beginners to the Web with all they need to know to get
+started with developing web sites and applications.">
+ +

Especificar l’autor de la pàgina és bo en molts sentits: és útil per a esbrinar qui ha escrit la pàgina, per si us hi voleu posar en contacte i fer-li preguntes sobre el contingut. Alguns sistemes de gestió de continguts disposen de funcions que extreuen automàticament la informació de l'autor de la pàgina i la poden a disposició amb aquesta finalitat.

+ +

Especificar una descripció que inclou paraules clau relacionades amb el contingut de la pàgina és útil perquè té el potencial de fer que la pàgina aparegui més amunt en les cerques rellevants que els motors de cerca executen (aquestes activitats es denominen Search Engine Optimization, o {{glossary("SEO")}}.)

+ +

Aprenentatge actiu: La utilitat de la descripció per als motors de cerca

+ +

Les pàgines de resultats dels motors de cerca també fan servir aquestes descripcions. Vegem-ho amb un exemple.

+ +
    +
  1. Ves a la pàgina d’inici de The Mozilla Developer Network.
    2. +
  2. Ves al codi font de la pàgina (botó dret/Ctrl + clic sobre la pàgina, selecciona l’opció Veure l’origen de la pàgina del menú contextual).
    3. +
  3. Busca la descripció en l'etiqueta meta. S'assembla a això: + 
    <meta name="description" content="The Mozilla Developer Network (MDN) provides
+information about Open Web technologies including HTML, CSS, and APIs for both
+Web sites and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
    +
    4. +
  4. Ara busca «Mozilla Developer Network» amb el teu motor de cerca favorit (nosaltres hem fet servir Yahoo). Observa, a partir del contingut dels elements <meta> i <title> utilitzats en el resultat de la cerca que, definitivament, paga la pena tenir aquests elements de descripció! +

    A Yahoo search result for "Mozilla Developer Network"

    +
    5. +
+ +
+

Nota: A Google veuràs que a continuació de l'enllaç principal de la pàgina d'inici s'enumeren algunes pàgines secundàries rellevants del projecte MDN; són els anomenats enllaços de llocs web, i es configuren en les Google's webmaster tools; és una manera de millorar els resultats de cerca del teu lloc web en el motor de cerca de Google.

+
+ +
+

Nota: Moltes característiques de <meta> senzillament ja no s'utilitzen. Per exemple, l'element <meta> de paraules clau (<meta name="keywords" content="posa, les, teves, paraules, clau">) , que se suposa que proporciona als motors de cerca paraules clau per a determinar la rellevància d’aquella pàgina respecte dels termes de cerca, els motors de cerca l’ignoren perquè els spammers omplien la llista de paraules clau amb centenars de paraules clau que esbiaixaven els resultats.

+
+ +

Altres tipus de metadades

+ +

Trobareu altres tipus de metadades a mesura que volteu per la web. Una gran quantitat de les funcions que apareixen en els llocs web són creacions propietàries, dissenyades per a proporcionar a certs llocs web (com els llocs web de les xarxes socials) parts específiques d'informació que poden utilitzar.

+ +

Per exemple, Open Graph Data és un protocol de metadades que Facebook va inventar per proporcionar als llocs web metadades enriquides. En el codi font de MDN Web Docs trobaràs això:

+ +
<meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png">
+<meta property="og:description" content="The Mozilla Developer Network (MDN) provides
+information about Open Web technologies including HTML, CSS, and APIs for both Web sites
+and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
+<meta property="og:title" content="Mozilla Developer Network">
+ +

Un efecte d'això és que quan a Facebook es fa un enllaç a MDN Web Docs, l'enllaç apareix amb una imatge i una descripció: una experiència més rica per als usuaris.

+ +

Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description.

+ +

Twitter també té metadades propietàries pròpies, les Twitter Cards, que tenen un efecte similar quan a twitter.com es mostra l’URL del lloc web. Per exemple:

+ +
<meta name="twitter:title" content="Mozilla Developer Network">
+ +

Afegir icones personalitzades al teu lloc web

+ +

Per enriquir encara més el disseny del teu lloc web, en les metadades pots afegir referències a icones personalitzades, que es mostraran en certs contextos.

+ +

La humil icona de web (favicon), que existeix de fa molts, molts anys, va ser la primera icona d'aquest tipus, una icona de 16 x 16 píxels utilitzada en múltiples llocs.

+ +

Pots afegir una icona de web a la teva pàgina així:

+ +
    +
  1. La deses en el mateix directori que la pàgina índex del lloc web, en format .ico (la majoria dels navegadors admetem les icones de web en els formats més comuns, com .gif o .png, però si utilitzes el format ICO t’assegures que funciona en navegadors antics com Internet Explorer 6).
    2. +
  2. Afegeixes al bloc de codi <head> de l’HTML la línia següent per a fer-hi referència: + 
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    +
    3. +
+ +

Els navegadors moderns utilitzen les icones de web en diversos llocs, com en la pestanya de la pàgina activa, i en el panell de marcadors, quan hi ha un marcador de pàgina:

+ +

The Firefox bookmarks panel, showing a bookmarked example with a favicon displayed next to it.

+ +

Avui dia hi ha un munt d'altres tipus d'icones que també pots tenir en compte. Per exemple, en el codi font de la pàgina MDN trobaràs això:

+ +
<!-- third-generation iPad with high-resolution Retina display: -->
+<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png">
+<!-- iPhone with high-resolution Retina display: -->
+<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png">
+<!-- first- and second-generation iPad: -->
+<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png">
+<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
+<link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png">
+<!-- basic favicon -->
+<link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png">
+ +

Els comentaris expliquen per a què s'utilitza cada icona; aquests elements cobreixen coses com ara proporcionar una agradable icona en alta resolució quan deses el lloc web a la pantalla principal d'un iPad.

+ +

No et preocupis gaire pel que fa a l'aplicació de tots aquests tipus d'icona en aquest moment; aquesta característica és bastant avançada i no s'espera que en tingueu un coneixement per a poder progressar en el curs. L'objectiu principal aquí és fer-te saber què són aquests tipus de coses, per si te les trobes quan navegues pel codi font d'altres llocs web.

+ +

Aplicar CSS i JavaScript a HTML

+ +

Gairebé tots els llocs web que utilitzes actualment fan servir {{glossary("CSS")}} perquè presentin un bon aspecte, i {{glossary("JavaScript")}} per a potenciar-hi les funcions interactives, com ara reproductors de vídeo, mapes, jocs, i molt més. Aquests s'apliquen amb més freqüència a una pàgina web amb l'ús dels elements {{htmlelement("link")}} i {{htmlelement("script")}}, respectivament.

+ + + +

Aprenentatge actiu: Aplicar CSS i JavaScript a una pàgina

+ +
    +
  1. Per iniciar aquest aprenentatge actiu, pren una còpia dels arxius meta-example.html, script.js i style.css, i desa’ls tots tres en el mateix directori del teu ordinador. Assegura’t que es desen amb els noms i les extensions d'arxiu correctes.
    2. +
  2. Obre el fitxer HTML en el teu navegador i en l’editor de text.
    3. +
  3. Seguint la informació que et proporcionem aquí, afegeix els elements {{htmlelement("link")}} i {{htmlelement("script")}} al teu HTML perquè els teus CSS i JavaScript s'apliquin a l’HTML.
    4. +
+ +

Si ho fas correctament, quan deses el codi HTML i actualitzes el navegador observaràs que les coses han canviat:

+ +

Example showing a page with CSS and JavaScript applied to it. The CSS has made the page go green, whereas the JavaScript has added a dynamic list to the page.

+ + + +
+

Nota: Si t’encalles amb aquest exercici i no se t’hi apliquen el CSS/JS, revisa la nostra pàgina d'exemple css-and-js.html.

+
+ +

Establir l'idioma principal del document

+ +

Per acabar, paga la pena esmentar que es pot establir (i realment s'hauria d'establir) l'idioma de la teva pàgina. Això es pot fer afegint l'atribut lang en l'etiqueta d'obertura HTML (com es veu en el meta-example.html).

+ +
<html lang="en-US">
+ +

Això és útil en molts sentits. Els motors de cerca indexen més eficaçment el document si s'hi estableix el llenguatge (permeten que aparegui correctament en els resultats específics de l'idioma, per exemple), i és útil per a les persones amb discapacitat visual que utilitzen lectors de pantalla (per exemple, la paraula «six» hi és tant en francès com en anglès, però es pronuncia diferent).

+ +

També post fer que diverses subseccions del teu document reconeguin idiomes diferents. Per exemple, podem establir que es reconegui una secció de japonès per a la part del nostre document que està escrita en japonès, així:

+ +
<p>Japanese example: <span lang="jp">ご飯が熱い。</span>.</p>
+ +

Aquests codis els defineix la norma ISO 639-1. Pots trobar més informació sobre aquests codis en les Language tags in HTML and XML.

+ +

Resum

+ +

Arribem al final del nostre recorregut per la capçalera d’un document HTML; s’hi poden fer moltes més coses, però un recorregut exhaustiu seria avorrit i en aquesta etapa podria embolicar, i per ara només volem donar-te una idea de les coses més comunes que s’hi poden trobar! En l’article següent veurem els elements bàsics d’un text HTML.

+ +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}

diff --git a/files/ca/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html b/files/ca/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html new file mode 100644 index 0000000000..feaf09c048 --- /dev/null +++ b/files/ca/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html @@ -0,0 +1,287 @@ +--- +title: Afegir gràfics vectorials a la Web +slug: Learn/HTML/Multimèdia_i_incrustar/Afegir_gràfics_vectorials_a_la_Web +tags: + - Beginner + - Graphics + - Guide + - HTML + - Images + - Learn + - Raster + - SVG + - Vector + - iframe + - img +translation_of: Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}
+ +
+

Els gràfics vectorials són molt útils en moltes circumstàncies - tenen una grandària d'arxiu reduït i són altament escalables, de manera que no pixelen en acostar-ho o ampliar-se a una grandària gran. En aquest article et mostrarem com incloure un en la vostra pàgina web.

+
+ + + + + + + + + + + + +
Requisits previs:Conèixer els conceptes bàsics d'HTML i com inserir una imatge en el document.
Objectiu:Aprendre com incrustar una imatge SVG (vector) en una pàgina web.
+ +
+

Nota: Aquest article no té la intenció d'ensenyar SVG; just el que és, i com afegir-lo a pàgines web.

+
+ +

Què són els gràfics vectorials?

+ +

A la web, treballarem amb dos tipus d'imatges - imatges de trama (raster) i imatges vectorials:

+ + + +

Per donar-vos una idea de la diferència entre els dos, veurem un exemple. Podeu trobar aquest exemple en el nostre repositori Github com a vector-versus-raster.html - mostra dues imatges costat a costat aparentment idèntiques, una estrella vermella amb una ombra negre. La diferència és que el de l'esquerra és un PNG, i la dreta és una imatge SVG.

+ +

Two star images, one raster and one vector. At their default size they look identical

+ +

La diferència es fa evident quan s'amplia la pàgina: la imatge PNG es pixela a mesura que s'amplia, ja que conté informació sobre on ha d'estar cada píxel (i quin color); quan s'amplia, cada píxel augmenta de grandària per emplenar múltiples píxels en la pantalla, per la qual cosa la imatge comença a veure's bloquejada.La imatge vectorial, no obstant això, segueix lluint agradable i nítida, ja que no importa la grandària que sigui, els algorismes s'utilitzen per elaborar les formes en la imatge, amb els valors simplement s'escalen a mesura que es fa més gran

+ +

Two star images zoomed in. The raster one on the left starts to look pixellated, whereas the vector one still looks crisp.

+ +

D'altra banda, els arxius d'imatge vectorial són molt més lleugers que els seus equivalents trama, ja que només necessiten tenir un grapat d'algorismes, en lloc d'informació sobre cada píxel de la imatge individualment.

+ +

Què és SVG?

+ +

SVG és un llenguatge basat en {{glossary("XML")}} per descriure imatges vectorials. Es bàsicament de marcat, com HTML, excepte que té molts elements diferents per a la definició de les formes que volem que apareguin a la imatge, i els efectes que volem aplicar a aquestes formes. SVG és per marcar els gràfics, no el contingut. Al final de l'espectre més simple, tenim elements per a la creació de formes simples, com {{svgelement("circle")}} i {{svgelement("rect")}}. Més característiques avançades de SVG inclouen {{svgelement("feColorMatrix")}} (transforma colors utilitzant una matriu de transformació,) {{svgelement("animate")}} (animar parts d'un gràfic vectorial,) i {{svgelement("mask")}} (aplicar una màscara sobre la part superior de la imatge.)

+ +

Com a simple exemple, el codi següent crea un cercle i un rectang

+ +
<svg version="1.1"
+     baseProfile="full"
+     width="300" height="200"
+     xmlns="http://www.w3.org/2000/svg">
+  <rect width="100%" height="100%" fill="black" />
+  <circle cx="150" cy="100" r="90" fill="blue" />
+</svg>
+ +

Això crea el següent resultat:

+ +

{{ EmbedLiveSample('What_is_SVG', 300, 200) }}

+ +

L'exemple anterior, donava la impressió que SVG és fàcil de codifca manualment. Sí, es pot codifca manualment un simple SVG en un editor de text, però per una imatge complexa comença ràpidament a ser molt difícil. Per a la creació d'imatges SVG, la majoria de la gent utilitza un editor de gràfics vectorials com Inkscape o Illustrator. Aquests paquets permeten crear una varietat d'il·lustracions utilitzant diverses eines de gràfics, i crear aproximacions de fotos (per exemple, funció Traçar mapa de bits de l'Inkscape).

+ +

SVG té algunes avantatges addicionals a més de les descrites fins al moment:

+ + + +

Llavors, per què algú vol utilitzar gràfics de trama sobre SVG? Bé, SVG té alguns desavantatges:

+ + + +

Els gràfics de trama són sens dubte millor per a les imatges de precisió complexes, com ara fotos, per les raons descrites anteriorment.

+ +
+

Nota: En Inkscape, guardar els arxius com Plain SVG per estalviar espai. També, si us plau referiu-vos a aquest article que descriu com preparar SVGs per a la Web.

+
+ +

Afegir SVG a les vostres pàgines

+ +

En aquesta secció veurem les diferents formes en què es poden afegir gràfics vectorials SVG a les vostres pàgines web.

+ +

La forma més ràpida : {{htmlelement("img")}}

+ +

Per incrustar un SVG mitjançant un element {{htmlelement("img")}}, només s'ha de fer referència a ell en l'atribut src, com es podria esperar. Necessitarem un atribut height o width (o tots dos si el SVG no té cap relació d'aspecte inherent). Si no ho heu fet ja, si us plau llegiu les imatges en HTML.

+ +
<img
+    src="equilateral.svg"
+    alt="triangle with all three sides equal"
+    height="87px"
+    width="100px" />
+ +

Pros

+ + + +

Contres

+ + + +

Solució de problemes i compatibilitat entre navegadors

+ +

Per donar suport als navegadors SVG que no suporten SVG (IE 8 i per sota, Android 2.3 i per sota), es pot fer referència a un PNG o JPG des de l'atribut src i utilitzar un atribut {{htmlattrxref("srcset", "img")}} (que només reconeixen els navegadors recents) per fer referència al SVG. Sent aquest el cas, només els navegadors compatibles carregaran el SVG - els navegadors més antics carregaran el PNG en lloc d'un altre:

+ +
<img src="equilateral.png" alt="triangle with equal sides" srcset="equilateral.svg">
+ +

També es pot utilitzar el SVGs com imatges de fons de CSS, com es mostra a continuació. En el codi següent, els navegadors antics es pegaran amb el PNG que entenen, mentre que els nous navegadors carregaran el SVG:

+ +
background: url("fallback.png") no-repeat center;
+background-image: url("image.svg");
+background-size: contain;
+ +

Igual que el mètode <img> descrit anteriorment, la inserció d'SVGs utilitzant imatges de fons CSS vol dir que el SVG no pot ser manipulat amb JavaScript, i també està subjecta a les mateixes limitacions de CSS.

+ +

Si els SVGs no es mostren en absolut, pot ser que el servidor no estigui configurat correctament. Si aquest és el problema, aquest article us orientarà en la direcció correcta.

+ +

Com incloure el codi SVG dins del vostre HTML

+ +

També es pot obrir el fitxer SVG en un editor de text, copiar el codi SVG, i enganxar-lo en el vostre document HTML - això de vegades es diu posar en  línia SVG, o inlining SVG. Assegureu-vos que el fragment de codi SVG comença i acaba amb les etiquetes <svg></svg> (no incloure res fora d'aquestes). Aquí hi ha un exemple molt simple del que es pot enganxar en el vostre document:

+ +
<svg width="300" height="200">
+    <rect width="100%" height="100%" fill="green" />
+</svg>
+
+ +

Pros

+ + + +

Contres

+ + + + + +

Com incrustar un SVG amb un {{htmlelement("iframe")}}

+ +

Es poden obrir imatges SVG en el navegador de la mateixa manera que les pàgines web. Així que la incrustació d'un document SVG amb un <iframe> es fa de la mateixa manera que l'estudiat en Des de <object> a <iframe> - altres tecnologies d'incrustació.

+ +

Aquí teniu una ullada ràpida:

+ +
<iframe src="triangle.svg" width="500" height="500" sandbox>
+    <img src="triangle.png" alt="Triangle with three unequal sides" />
+</iframe>
+ +

Això en definitiva no és el millor mètode per triar:

+ +

Contres

+ + + +

Aprenentatge actiu: Jugar amb SVG

+ +

En aquesta secció d'aprenentatge actiu ens agradaria que simplement juguéssiu amb una mica de SVG per diversió. A la secció d'entrada de sota veureu que us hem proporcionat algunes mostres perquè pugueu començar. També podeu anar a SVG Element Reference, per conèixer més detalls sobre altres joguines que es poden utilitzar en SVG, i provar-les també. Aquesta secció és, sobre tot, la pràctica de les vostres habilitats d'investigació, i que té una mica de diversió.

+ +

Si us quedeu encallats i no podeu aconseguir que funcioni el vostre codi, sempre el podeu restablir amb el botó Reset.

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 600) }}

+ +

Sumari

+ +

En aquest article se us ha proporcionat un viatge ràpid del que són gràfics vectorials i SVG, perquè són útils conèixer-los, i com s'inclouen els SVG dins de les pàgines web. Mai hem tingut la intenció de que fos una guia completa per a l'aprenentatge SVG, només un punter perquè conegueu que és SVG, per si us els trobeu en el vostres viatjes al voltant de la web. Així que no us preocupeu si no us sentiu, encara, com uns experts en SVG. Hem inclòs alguns enllaços, més a baix, que us podria ajudar-vos si voleu anar i esbrinar més sobre com funciona.

+ +

En l'últim article d'aquest mòdul explorarem les imatges sensibles en detall, mirant les eines que té HTML, que us permetin fer que les vostres imatges funcionin millor a través de diferents dispositius.

+ +

Veure

+ + + +

{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}

diff --git a/files/ca/learn/html/multimedia_and_embedding/images_in_html/index.html b/files/ca/learn/html/multimedia_and_embedding/images_in_html/index.html new file mode 100644 index 0000000000..839a38b400 --- /dev/null +++ b/files/ca/learn/html/multimedia_and_embedding/images_in_html/index.html @@ -0,0 +1,373 @@ +--- +title: Imatges en HTML +slug: Learn/HTML/Multimèdia_i_incrustar/Images_in_HTML +tags: + - Article + - Beginner + - Guide + - HTML + - Image + - alt text + - captions + - figcaption + - figure + - img +translation_of: Learn/HTML/Multimedia_and_embedding/Images_in_HTML +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}
+ +

Al principi, la web era només text, i resultava molt avorrit. Afortunadament, no va passar gaire temps abans que s’afegís la capacitat d'incrustar imatges (i altres tipus de continguts més interessants) dins de les pàgines web. Hi ha altres tipus de mitjans multimèdia a tenir en compte, però és lògic començar amb l'humil element {{HTMLElement("img")}}, que s'utilitza per a incrustar en una pàgina web una imatge simple . En aquest article veurem com utilitzar-lo en profunditat, incloent els conceptes bàsics, com anotar-la amb llegendes amb l’element {{htmlelement("figure")}}, i com es relaciona amb les imatges de fons de CSS.

+ + + + + + + + + + + + +
Requisits previs:Coneixements bàsics d'informàtica, instal·lació de software bàsic, coneixements bàsics de treballar amb arxius, familiaritat amb els fonaments de l’HTML (que exposen en l’article Introducció a l’HTML.)
Objectiu:Aprendre a incrustar imatges simples en HTML i comentar-les amb llegendes, i com es relacionen les imatges HTML amb les imatges de fons CSS.
+ +

Posar una imatge en una pàgina web

+ +

Per posar una imatge simple en una pàgina web, s'utilitza l'element {{htmlelement("img")}}. Es tracta d’un element buit (que significa que no té contingut de text o etiqueta de tancament) que requereix un mínim d'un atribut per a ser útil: src (de vegades se l’anomena pel nom complet, source). L'atribut src conté una ruta que apunta a la imatge que es vol incrustar a la pàgina, que pot ser una adreça URL relativa o absoluta, de la mateixa manera que en l'element {{htmlelement("a")}} el valor de l'atribut href.

+ +
+

Nota: Fes una lectura de la guia ràpida a les adreces i rutes per refrescar la memòria abans de continuar.

+
+ +

Així, per exemple, si la imatge es diu dinosaur.jpg i és en el mateix directori que la pàgina HTML, la imatge es podria incloure d'aquesta manera:

+ +
<img src="dinosaur.jpg">
+ +

Si la imatge és en un subdirectori d'imatges dins del mateix directori que la pàgina HTML (que és el que Google recomana per a propòsits de posicionament en cercadors ({{glossary("SEO")}}) / indexació), llavors s'incrusta així:

+ +
<img src="images/dinosaur.jpg">
+ +

I així succesivament.

+ +
+

Nota: Els motors de cerca també llegeixen els noms d'arxiu d'imatge i els tenen en compte en termes de SEO; per tant, s'ha de donar a la imatge un nom d'arxiu que sigui descriptiu (dinosaur.jpg és millor que img835.png.)

+
+ +

La imatge es pot incloure utilitzant la seva adreça URL absoluta, per exemple:

+ +
<img src="https://www.example.com/images/dinosaur.jpg">
+ +

Però això no té sentit perquè el navegador té més feina a buscar l'adreça IP del servidor de nou, etc. Gairebé sempre, les imatges del lloc web es mantenen en el mateix servidor que l'HTML.

+ +
+

Atenció: La majoria de les imatges tenen drets de propietat intelectual. No mostris una imatge a la pàgina web si no és que

+ + + +

Les infraccions dels drets d'autor són il·legals i antiétiques. A més, no incloguis mai en l'atribut src una adreça url que apunti cap a una imatge que estigui allotjada en la pàgina web d'algú, si no tens permís per a enllaçar-la. D’això, se’n diu hotlinking i, un cop més, robar ample de banda d'algú altre és il·legal. També redueix la velocitat de la pàgina, i no tens control sobre la imatge si l’eliminen o la substitueixen per alguna altra cosa que et podria resultar enutjosa.

+
+ +

El codi anterior donaria el resultat següent:

+ +

Imatge bàsica d’un dinosaure incrustada en un navegador, amb el text Images in HTML escrit a dalt

+ +
+

Nota: Els elements com {{htmlelement("img")}} i {{htmlelement("video")}} es denominen de vegades elements reemplaçats, perquè el contingut i la mida de l'element el defineix un recurs extern (com una imatge o un arxiu de vídeo), no el contingut propi de l’element.

+
+ +
+

Nota: Pots trobar l'exemple acabat al final d'aquesta secció, executat a GitHub (consulta’n també el codi font.)

+
+ +

Text alternatiu

+ +

L’atribut següent que veurem és alt. El valor d’aquest atribut se suposa que és una descripció textual de la imatge, que s’utilitza en situacions en què la imatge no es pot veure/representar. Per exemple, el codi anterior es pot modificar d'aquesta manera:

+ +
<img src="images/dinosaur.jpg"
+     alt="The head and torso of a dinosaur skeleton;
+          it has a large head with long sharp teeth">
+ +

La manera més senzilla de provar el text alternatiu és escriure malament el nom de l'arxiu. Si, per exemple, escrius el nom de la imatge així: dinosooooor.jpg, el navegador no mostrarà la imatge; en lloc d’ella, mostrarà el text alternatiu.

+ +

El títol Images in HTML, però aquesta vegada la imatge del dinosaure no es mostra i en lloc de la imatge apareix el text alternatiu.

+ +

Llavors, per què hauries de veure o necessitar mai el text alternatiu? Pot ser útil en diverses situacions:

+ + + +

Què s'ha d'escriure exactament dins de l'atribut alt? En primer lloc, depèn de per què la imatge és allà (en altres paraules, què es perd si la imatge no es mostra):

+ + + +

La clau està en oferir una experiència d’usabilitat fins i tot quan les imatges no es poden veure, en què els usuaris no perdin cap dels continguts. Desactiva les imatges en el navegador i observa com són les coses. De seguida t’adonaràs de com són d’inútils els textos alternatius com «logo» o «el meu lloc web favorit», si la imatge no es pot veure.

+ +
+

Nota: WebAIM, guia del text alternatiu, ofereix una orientació més detallada per al text alternatiu, i és una bona lectura per a més informació.

+
+ +

Amplada i alçada

+ +

Es poden utilitzar els atributs width i height per a especificar l'amplada i l'alçada de la imatge (es pot trobar l'amplada i l'alçada de la imatge de moltes maneres, per exemple en Mac es pot utilitzar Cmd + I per a obtenir la visualització de la informació de l'arxiu d'imatge). Tornant al nostre exemple, poden fer això:

+ +
<img src="images/dinosaur.jpg"
+     alt="The head and torso of a dinosaur skeleton;
+          it has a large head with long sharp teeth"
+     width="400"
+     height="341">
+ +

Això no dona com a resultat una gran diferència a la pantalla en circumstàncies normals, però si no la imatge es mostra (per exemple, perquè l'usuari acaba d’acccedir a la pàgina i la imatge encara no s'ha carregat) veuràs que el navegador deixa un espai perquè la imatge aparegui:

+ +

El títol Images in HTML amb el text alternatiu per al dinosaure, que es mostra dins de la caixa que resulta de configurar l’amplada i l’alçada

+ +

Això és bo perquè la càrrega de la pàgina resulta més ràpida i suau.

+ +

La mida de les imatges no s'ha d'alterar utilitzant atributs HTML; si s'estableix la mida massa gran, les imatges es veuran granulades/difuses; si la mida es fa massa petita, es malbarata ample de banda amb la descàrrega d'una imatge que és molt més gran del que cal. La imatge també pot acabar semblant distorsionada, si no es manté la relació d'aspecte correcta. S'ha d'utilitzar un editor d'imatges per a posar la imatge en la mida correcta abans de posar-la a la pàgina web.

+ +
+

Nota: Si has d’alterar la mida d'una imatge, utilitza CSS en lloc d'HTML.

+
+ +

Títols d’imatge

+ +

De la mateixa manera que amb els enllaços, també es pot afegir l'atribut title a les imatges per a proporcionar informació de suport addicional, si cal. En el nostre exemple, podríem fer això:

+ +
<img src="images/dinosaur.jpg"
+     alt="The head and torso of a dinosaur skeleton;
+          it has a large head with long sharp teeth"
+     width="400"
+     height="341"
+     title="A T-Rex on display in the Manchester University Museum">
+ +

Això ens fa aparèixer un indicador de funció (tooltip), igual que amb els títols dels enllaços:

+ +

La imatge del dinosaure amb un indicador de funció a la part de dalt que diu: Un T-Rex exposat al museu de la Universitat de Manchester

+ +

Els títols d'imatge no són essencials, i sovint és millor incloure'ls com a informació de suport en el text principal de l'article, en lloc d’associar-los a la imatge. Són útils en algunes circumstàncies, per exemple quan en una galeria d'imatges no hi ha espai per als subtítols.

+ +

Aprenentatge actiu: incrustar una imatge

+ +

Doncs, ara et toca a tu! En aquesta secció d'aprenentatge actiu volem que juguis amb un exercici d'incrustació simple. Disposes d'una etiqueta bàsica {{htmlelement("img")}}, i volem que incrustis la imatge que hi ha en la següent URL:

+ +

https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg

+ +

Sí, ja hem dit que no s’ha de fer hotlink d'imatges a altres servidors. Però això és només a tall de demostració; et deixem fer-ho, només aquesta vegada!

+ +

Potser també voldries:

+ + + +

Si t’equivoques, sempre pots tornar a començar amb el botó de Reinicia. Si t’encalles, fes clic al botó Mostra la solució per a veure una solució.

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 500) }}

+ +

Descriure imatges amb figures i peus d'imatge

+ +

Hi hauria moltes maneres possibles d’afegir una llegenda associada a la teva imatge. Per exemple, no hi hauria res que impedís de fer això:

+ +
<div class="figure">
+  <img src="images/dinosaur.jpg"
+       alt="The head and torso of a dinosaur skeleton;
+            it has a large head with long sharp teeth"
+       width="400"
+       height="341">
+
+  <p>A T-Rex on display in the Manchester University Museum.</p>
+</div>
+ +

Això està bé. Inclou el contingut que necessita, i es fa un ús correcte de l’aplicació d’estil amb CSS. Però hi ha un problema: no hi ha res que vinculi semànticament la imatge a la seva llegenda, i això pot causar problemes als lectors de pantalla, per exemple (quan hi ha 50 imatges i llegendes, quina llegenda va amb quina imatge?).

+ +

Una solució més encertada és utilitzar els elements {{htmlelement("figure")}} i {{htmlelement("figcaption")}} d’HTML5, que s'han creat precisament amb aquest propòsit: proporcionar un contenidor semàntic per a les figures, que vinculi clarament la figura amb la llegenda. El nostre exemple anterior es podria reescriure així:

+ +
<figure>
+  <img src="images/dinosaur.jpg"
+       alt="The head and torso of a dinosaur skeleton;
+            it has a large head with long sharp teeth"
+       width="400"
+       height="341">
+
+  <figcaption>A T-Rex on display in the Manchester University Museum.</figcaption>
+</figure>
+ +

L'element {{htmlelement("figcaption")}} indica als navegadors i la tecnologia d'assistència que la llegenda descriu la resta del contingut de l'element {{htmlelement("figure")}}.

+ +
+

Nota: Des d'un punt de vista d'accessibilitat, les llegendes i el text alternatiu {{htmlattrxref('alt','img')}} tenen funcions diferents. Les llegendes beneficien fins i tot les persones que poden veure la imatge, mentre que el text alternatiu {{htmlattrxref('alt','img')}} fa la mateixa funció que una imatge, quan aquesta no hi és. Per tant, les llegendes i el text alternatiu no poden dir el mateix, perquè tots dos elements apareixen quan la imatge no hi és. Intenta desactivar les imatges en el navegador i observa com es veuen les coses.

+
+ +

Recordeu que una figura no té per què ser una imatge; una figura és una unitat independent del contingut que:

+ + + +

Una figura podria ser un conjunt d’imatges, un fragment de codi, àudio o vídeo, equacions, una taula, o alguna altra cosa.

+ +

Aprenentatge actiu: crear una figura

+ +

En aquesta secció d'aprenentatge actiu, et demanarem que agafis el codi acabat de la secció d'aprenentatge actiu anterior, i el converteixis en una figura:

+ + + +

Si t’equivoques, sempre pots tornar a començar amb el botó de Reinicia. Si t’encalles, fes clic al botó Mostra la solució per a veure una solució.

+ + + +

{{ EmbedLiveSample('Playable_code_2', 700, 500) }}

+ +

Imatges de fons de CSS

+ +

També pots utilitzar CSS per a incrustar imatges en pàgines web (i JavaScript, però això és una altra història). La propietat {{cssxref("background-image")}} de CSS, i les altres propietats background* s'utilitzen per a controlar la col·locació de la imatge de fons. Per exemple, per a posar una imatge de fons en cada paràgraf d’una pàgina, es podria fer això:

+ +
p {
+  background-image: url("images/dinosaur.jpg");
+}
+ +

La imatge incrustada que resulta possiblement és més fàcil de posicionar i controlar que les imatges HTML; aleshores, per què ens hem de molestar amb les imatges HTML? Com ja hem insinuat abans, les imatges de fons de CSS són només per a decoració. Si només volem afegir una cosa bonica per a millorar l'aspecte visual de la pàgina, això està molt bé, però aquest tipus d'imatges no tenen cap significat semàntic en absolut —no poden tenir text equivalent—, són invisibles per als lectors de pantalla, etc. Aquí és on destaquen les imatges HTML.

+ +

Per tant, si una imatge té sentit en termes de contingut, s'ha d'utilitzar una imatge en HTML. Si una imatge és purament decorativa, s'han d'utilitzar imatges de fons CSS.

+ +
+

Nota: Aprendreu molt més sobre imatges de fons CSS en el nostre tema CSS.

+
+ +

Sumari

+ +

Això és tot per ara. Hem exposat les imatges i les llegendes amb detall. En l’article següent ens mourem en un nivell superior, i aprendrem com utilitzar HTML per a incrustar vídeo i àudio a les pàgines web.

+ +

{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}

diff --git a/files/ca/learn/html/multimedia_and_embedding/index.html b/files/ca/learn/html/multimedia_and_embedding/index.html new file mode 100644 index 0000000000..43e0e89c91 --- /dev/null +++ b/files/ca/learn/html/multimedia_and_embedding/index.html @@ -0,0 +1,75 @@ +--- +title: Multimèdia i incrustar +slug: Learn/HTML/Multimèdia_i_incrustar +tags: + - Assessment + - Audio + - Beginner + - CodingScripting + - Flash + - Guide + - HTML + - Images + - Landing + - Learn + - SVG + - Video + - iframes + - imagemaps + - responsive +translation_of: Learn/HTML/Multimedia_and_embedding +--- +
+
Multimèdia i incrustar
+
+ +

{{LearnSidebar}}

+ +

Hem vist una gran quantitat de text fins ara en aquest curs. Molt. de. text. Però la web seria molt avorrida sense res més que el text, de manera que anem a començar a buscar la manera de fer que la web cobri vida, amb un contingut més interessant! Aquest mòdul explora com utilitzar HTML per incloure multimèdia en les pàgines web, incloent-hi les diferents formes en què les imatges poden ser inclosos, i com integrar vídeo, àudio i fins i tot altres pàgines web senceres.

+ +

Requisits previs

+ +

Abans d'iniciar aquest mòdul, s'ha de tenir un coneixement raonable dels conceptes bàsics d'HTML, com s'explica en Introduction to HTML. Si no s'ha treballat a través d'aquest mòdul (o alguna cosa semblant), comenceu a treballar amb ell en primer lloc, i a continuació, tornar!

+ +
+

Nota: Si esteu treballant en un ordinador/tauleta/altre dispositiu els quals no tenen la capacitat de crear els vostres propis arxius, podeu provar (la majoria) els exemples en un programa de codificació en línia, com ara JSBin o Thimble.

+
+ +

Guies

+ +

Aquest mòdul conté els següents articles, que ens portarà a través de tots els fonaments de la incrustació de multimèdia en pàgines web.

+ +
+
Imatges en HTML
+
Hi ha altres tipus de multimèdia a tenir en compte, però és lògic començar amb l'element humil {{htmlelement("img")}}, que s'utilitza per incrustar una imatge en una pàgina web senzilla. En aquest article veurem com utilitzar-lo en profunditat, incloent conceptes bàsics, anotant-ho amb subtítols utilitzant {{htmlelement("figure")}}, i com es relaciona amb les imatges de fons de CSS.
+
Contingut d'àudio i vídeo
+
A continuació, veurem com utilitzar els elements HTML5 {{htmlelement("video")}} i {{htmlelement("audio")}} per incrustar vídeo i àudio a les pàgines, incloent conceptes bàsics, proporcionant accés a diferents formats d'arxiu a diferents navegadors, afegir títols i subtítols, i com afegir alternatives per als navegadors antics.
+
De <object> a <iframe> — altres tecnologies d'incrustació
+
En aquest punt ens agradaria fer un petit pas al costat, mirant a un parell d'elements que permeten introduir una àmplia varietat de tipus de contingut en les pàgines web: els elements {{htmlelement("iframe")}}, {{htmlelement("embed")}} and {{htmlelement("object")}}. <iframe>s són per incrustar en altres pàgines web, i els altres dos permeten incrustar arxius PDF, SVG, i fins i tot flash - una tecnologia que està en camí de desapareixa, però que encara es veu semi-regularment.
+
Afegir gràfics vectorials a la Web
+
+

Els gràfics vectorials poden ser molt útils en certes situacions. A diferència dels formats habituals com PNG/JPG, que no es distorsionen/pixelen quan s'acostan - poden romandre suaus quan s'escalen. Aquest article és una introducció al que són vectors gràfics, i com incloure el popular format {{glossary("SVG")}} en pàgines web.

+
+
Imatges responsive
+
Amb tants tipus de dispositius differerents capaços de navegar per la web - des de telèfons mòbils als ordinadors d'escriptori - un concepte essencial per dominar en el món web modern és el disseny sensible. Això es refereix a la creació de pàgines web que poden canviar de forma automàtica les seves característiques per adaptar-se a diferents mides de pantalla, resolucions, etc. Això es veurà amb més detall en un mòdul CSS més endavant, però per ara mirem les eines HTML que tenim a disposició per crear imatges sensibles, incloent l'element {{htmlelement("picture")}}.
+
+ +

Avaluació

+ +

Les següents avaluacions posaran a prova la comprensió dels conceptes bàsics HTML coberts en les guies anteriors.

+ +
+
Pàgina de benvinguda de Mozilla
+
En aquesta avaluació, posarem a prova el coneixement d'algunes de les tècniques descrites en els articles d'aquest mòdul, aconseguir afegir algunes imatges i vídeo a una pàgina de benvinguda de moda, tot sobre Mozilla!
+
+ +

Veure

+ +
+
Afegir un hitmap a la part superior d'una imatge
+
Els mapes d'imatge proporcionen un mecanisme perquè les diferents parts d'una imatge enllaci a diferents llocs (pensem en un mapa, a través del qual amb els enllaços obtenim més informació sobre cada pais en clicar-los.) Aquesta tècnica pot ser útil a vegades.
+
Conceptes bàsics d'alfabetització Web 2
+
+

Un excel·lent curs de la fundació Mozilla que explora i posa a prova algunes de les habilitats parlades en el mòdul Multimèdia i incrustació. Busseig profund en la composició bàsica de les pàgines web, disseny per l'accessibilitat, compartint recursos, utilitzant els medis en línia, i el treball obert.

+
+
diff --git a/files/ca/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html b/files/ca/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html new file mode 100644 index 0000000000..71e1d3426e --- /dev/null +++ b/files/ca/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html @@ -0,0 +1,109 @@ +--- +title: Mozilla pàgina de benvinguda +slug: Learn/HTML/Multimèdia_i_incrustar/Mozilla_pàgina_de_benvinguda +tags: + - Assessment + - Beginner + - CodingScripting + - Embedding + - HTML + - Images + - Multimedia + - Video + - iframe + - picture + - responsive + - sizes + - srcset +translation_of: Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}
+ +

En aquesta avaluació, posarem a prova els vostres coneixements d'algunes de les tècniques descrites en els articles d'aquest mòdul, fent que afegiu algunes imatges i vídeos a una pàgina, amb un toc de moda, tot sobre Mozilla!

+ + + + + + + + + + + + +
Requisits Previs:Abans d'intentar aquesta avaluació ja hauria d'haver treballat el mòdul Multimedia i incrustació.
Objectiu:Posar a prova els coneixements al voltant de la incrustació d'imatges i de vídeo en pàgines web, marcs i tècniques d'imatge sensible HTML.
+ +

Punt de partida

+ +

Per començar aquesta avaluació, s'ha de agafar l'HTML i totes les imatges disponibles en el directori mdn-splash-page-start en github. Desar el contingut d'index.html en un arxiu anomenat index.html en la unitat local, en un nou directori. A continuació, desar pattern.png en el mateix directori (botó dret del ratolí sobre la imatge per obtenir l'opció de guardar-lo).

+ +

Accedir a les diferents imatges en el directori de les originals i guardar-les de la mateixa manera; voldreu guardar-les en un directori diferent, per ara, ja que necessitareu manipular-les (algunes) usant un editor de gràfics abans de que estiguin llestes per ser utilitzades.

+ +
+

Nota: L'arxiu HTML d'exemple conté un bon munt de CSS, l'estil de la pàgina. No cal tocar el CSS, només l'HTML dins de l'element {{htmlelement("body")}} - sempre que s'insereix el marcat correcte, l'estil farà que es vegi correcte.

+
+ +

Project brief

+ +

En aquesta avaluació presentem una pàgina de benvinguda de Mozilla gairebé acabada, que pretén dir alguna cosa agradable i interessant sobre el que representa Mozilla, i proporcionar alguns enllaços a altres recursos. Malauradament, no s'han afegit imatges o vídeos - aquesta és la vostre feina! Cal afegir alguns medis perquè la pàgina es vegi bé i tingui més sentit. Les següents subseccions detallan el que s'ha de fer:

+ +

Preparar imatges

+ +

Usar l'editor d'imatges favorit, per crear versions de 400px d'ample i 120px d'ample:

+ + + +

Anomenar-les d'una manera sensata, per exemple, firefoxlogo400.png i firefoxlogo120.png.

+ +

Juntament amb mdn.svg, aquestes imatges seran les vostres icones per enllaçar a altres recursos, dins l'àrea d'informació addicional. També s'enllaçarà el logo de Firefox a la capçalera del lloc. Desar les còpies de tot això dins el mateix directori que index.html.

+ +

A continuació, crear una versió apaïsada de 1200 píxels d'ample de red-panda.jpg, i una versió retrat de 600px d'ample que mostri el panda en un primer pla. Una vegada més, anomenar-les d'una manera sensata perquè puguin se identificades fàcilment. Guardar una còpia de tots dues dins del mateix directori que index.html.

+ +
+

Nota: S'han de optimitzar les imatges JPG i PNG perquè siguin el més petites possible, mentre encara es vegin bé. tinypng.com és un gran servei per fer això fàcilment.

+
+ +

Afegir un logo a la capçalera

+ +

Dins de l'element {{htmlelement("header")}}, afegir un element {{htmlelement("img")}} que incrustar la petita versió del logo de Firefox a la capçalera.

+ +

Afegir un vídeo al continut principal del article

+ +

Just dins de l'element {{htmlelement("article")}} (a sota de l'etiqueta d'obertura), incrustar el vídeo de YouTube trobat en https://www.youtube.com/watch?v=ojcNcvb1olg, utilitzant les eines adequades de YouTube per generar el codi. El vídeo ha de ser 400 px d'ample.

+ +

Afegir imatges sensibles als enllaços d'informació addicional

+ +

Dins de {{htmlelement("div")}} amb la classe further-info, troben quatre elements {{htmlelement("a")}} - cada un dels enllaços amb pàgines interessants relacionades amb Mozilla. Per completar aquesta secció haurem de inserir un element {{htmlelement("img")}} dins de cada un d'ells que continguin els atributs apropiats {{htmlattrxref("src", "img")}}, {{htmlattrxref("alt", "img")}}, {{htmlattrxref("srcset", "img")}} i {{htmlattrxref("sizes", "img")}}.

+ +

En tots els casos (excepte un - quin és inherentment sensible?) volem que el navegador serveixi la versió de 120px d'ample quan l'amplada de la finestra gràfica sigui 480px d'ample o menys, o la versió de 400px d'amplada d'altra manera.

+ +

Assegurar-se de fer coincidir les imatges correctes amb els vincles correctes!

+ +
+

Nota: Per provar correctament els exemples srcset/sizes, es necessita pujar el lloc a un servidor (usant pàgines Github pages és una solució fàcil i lliure), a continuació, a partir d'aquí es pot comprovar si s'està treballant adequadament utilitzant les eines de desenvolupador del navegador, com es detalla en les imatges sensibles: eines útils per a desenvolupadors.

+
+ +

Un art dirigit panda vermell

+ +

Dins de {{htmlelement("div")}} amb la classe red-panda, volem inserir un element {{htmlelement("picture")}} que serveixi d'imatge de petit retrat del panda si la finestra gràfica és de 600px d'ample o menys, i la imatge apaïsada, gran, al contrari.

+ +

Exemple

+ +

Les següents captures de pantalla mostren la pàgina de benvinguda que ha de ser similar després d'haver estat marcada correctament, en una àmplia i estreta visualització de la pantalla.

+ +

A wide shot of our example splash page

+ +

A narrow shot of our example splash page

+ +

Avaluació

+ +

Si esteu seguint aquesta avaluació com a part d'un curs organitzat, heu de ser capaços de donar al vostre treball al professor/tutor per evaluar. Si sou d'auto-aprenentatge, llavors es pot obtenir la guia d'evaluació faciliment preguntan a la llista de correu dev-mdc o al canal d'IRC #mdn en Mozilla IRC. Proveu el primer exercici - no hi ha res a guanyar amb trampa!

+ +

{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}

diff --git a/files/ca/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html b/files/ca/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html new file mode 100644 index 0000000000..0a69bc1d47 --- /dev/null +++ b/files/ca/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html @@ -0,0 +1,318 @@ +--- +title: De objecte a iframe - altres tecnologies d'incrustació +slug: >- + Learn/HTML/Multimèdia_i_incrustar/De_objecte_a_iframe_altres_tecnologies_incrustació +tags: + - Article + - Beginner + - CodingScripting + - Embedding + - Flash + - Guide + - HTML + - Learn + - Multimedia and embedding + - Object + - embed + - iframe +translation_of: Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding")}}
+ +

Per ara, realment, s'aconseguit penjar coses incrustades en les pàgines web, incloent imatges, àudio i vídeo. En aquest punt ens agradaria fer un petit pas a banda, mirant a alguns elements que ens permetin introduir una àmplia varietat de tipus de contingut en les pàgines web: els elements {{htmlelement("iframe")}}, {{htmlelement("embed")}} i {{htmlelement("object")}}. Els <iframe>s són per incrustar altres pàgines web, i els altres dos, permeten incrustar arxius PDF, SVG, i fins i tot, flash - una tecnologia que està en camí de desaparèixer, però que encara es veu semi-regular.

+ + + + + + + + + + + + +
Requisits Previs:Coneixements bàsics d'informàtica, programari bàsic instal.lat, coneixement bàsic de tractar amb arxius, familiaritat-se amb els fonaments d'HTML (com s'explica en Inici amb HTML) i els articles anteriors d'aquest mòdul.
Objectiu:Aprendre com inserir elements en pàgines web fent servir {{htmlelement("object")}}, {{htmlelement("embed")}} i {{htmlelement("iframe")}}, com pel·lícules Flash i altres pàgines web.
+ +

Una breu història de la incrustació

+ +

Fa molt de temps, a la web, era popular l'ús de marcs (frames) per crear llocs web - petites parts d'un lloc web que s'emmagatzemaven en pàgines HTML individuals. Aquests eran inserits en un document mestre anomenat conjunt de marcs (frameset), el que permetia especificar l'àrea de la pantalla de cada marc ple, com una manera de dimensionar columnes i files d'una taula. Aquests van ser considerats un súmmum de frescor a mitjans i finals dels 90, però no hi havia proves, que tenir la pàgina web dividida en trossos més petits com aquest era millor per la velocitat de descàrrega - sent especialment notable que les connexions de xarxa era tan lentes en aquell temps. Però, van tenir molts problemes, que sobrepassaven els aspectes positius com la velocitat de la xarxa, ara més ràpida, pel que ja no es veu la seva utilització.

+ +

Una mica més tard (finals dels 90, principis de 2000), les tecnologies de plug-in es van fer molt populars, com els Java Applets i Flash - aixó va permetre els desenvolupadors web incrustar un contingut ric en pàgines web com vídeo i animacions, que simplement no estaven disponibles a través d'HTML. La incrustació d'aquestes tecnologies es va aconseguir mitjançant elements com {{htmlelement("object")}}, i el menys usat {{htmlelement("embed")}}, van ser molt útils a l'hora. Des de llavors, han caigut en desús a causa de molts problemes, inclosa l'accessibilitat, la seguretat, mida del fitxer, i més; avui dia la majoria dels dispositius mòbils no són compatibles amb aquest tipus de plugins, i el suport d'escriptori està en el camí de ser exclòs.

+ +

Finalment, l'element {{htmlelement("iframe")}} va aparèixer (juntament amb altres formes d'inserir contingut, com {{htmlelement("canvas")}}, {{htmlelement("video")}}, etc.) Això va proporcionar una manera de incrustar un document web sencer dins d'un altre, com si es tractés d'un {{htmlelement("img")}} o un altre element, i s'utilitza regularment en l'actualitat.

+ +

Sortint de la lliçó de la història, anem a seguir endavant i veure com utilitzar alguns d'aquests.

+ +

Aprenentatge actiu: usos clàssics d'incrustació

+ +

En aquest article saltarem directament a una secció d'aprenentatge actiu, per donar-vos immediatament una idea real del que les tecnologies d'incrustació són útils. El món en línia està molt familiaritzat amb Youtube, però moltes persones no saben sobre algunes dels mecanismes d'intercanvi que té disponibles. Vegem com Youtube ens permet incrustar un vídeo en qualsevol pàgina que ens agradi, utilitzant un {{htmlelement("iframe")}}.

+ +
    +
  1. En primer lloc, anar a Youtube i trobar un vídeo que us agradi.
    2. +
  2. A continuació en el vídeo trobareu un botó Compartir - seleccioneu aquesta opció per mostrar les opcions d'ús compartit.
    3. +
  3. Seleccioneu l'opció Inserir i se us donarà un cert codi <iframe> - copieu aquest.
    4. +
  4. Inserir-lo en el quadre d'entrada de sota, i veureu quin és el resultat a la sortida.
    5. +
+ +

Per als punts de bonificació, també es podria tractar d'insertar un Google Map en l'exemple:

+ +
    +
  1. Aneu a Google Maps i trobar un mapa que us agradi.
    2. +
  2. Feu clic al "Hamburger Menu" (tres línies horitzontals) a la part superior esquerra de la interfície d'usuari.
    3. +
  3. Seleccioneu l'opció Compartir o insetar un mapa.
    4. +
  4. Seleccionar l'opció insertar un mapa, us donarà un cert codi <iframe> - copieu aquest.
    5. +
  5. Inserir-lo en el quadre d'entrada de sota, i veureu quin és el resultat a la sortida.
    6. +
+ +

Si cometeu un error, sempre es pot restablir amb el botó de Reinici. Si aconseguiu realment queda encallats, feu clic al botó Mostra solució per veure una resposta.

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 600) }}

+ +

Iframes en detall

+ +

Per tant, això va ser fàcil i divertit oi? Els elements {{htmlelement("iframe")}} estan dissenyats per permetre inserir altres documents web dins del document actual. Això és molt bó per incorporar continguts de tercers al lloc web en que no es pot tenir control directe sobre i no es vol haver d'implementar la seva pròpia versió - com els vídeo de proveïdors de vídeo en línia, sistemas de comentarios como Disqus, mapes de proveïdors de mapes en línia, pancartes publicitaries, etc. Els exemples editables en directe que s'han estat usant a través d'aquest curs s'implementen utilitzant <iframe>s.

+ +

Hi ha alguns {{anch("Problemes de seguretat")}} greus a considerar amb els <iframe>s, com veurem més endavant, però això no vol dir que no s'hagin d'utilitzar en els llocs web - només requereix una mica de coneixement i un raonament. Explorarem el codi en una mica més de detall. Digueu que voleu incloure en el glossari MDN en una de les seves pàgines web - podreu intentar alguna cosa com això:

+ +
<iframe src="https://developer.mozilla.org/en-US/docs/Glossary"
+        width="100%" height="500" frameborder="0"
+        allowfullscreen sandbox>
+  <p> <a href="https://developer.mozilla.org/en-US/docs/Glossary">
+    Fallback link for browsers that don't support iframes
+  </a> </p>
+</iframe>
+ +

Aquest exemple inclou els elements essencials bàsics necessaris per utilitzar un <iframe>:

+ +
+
{{htmlattrxref('allowfullscreen','iframe')}}
+
Si s'estableix, el <iframe> és capaç de ser col·locat en la manera de pantalla completa amb Full Screen API (està fora de l'abast per a aquest article).
+
{{htmlattrxref('frameborder','iframe')}}
+
Si s'estableix en 1, això indica al navegador per establir una frontera entre aquest marc i altres marcs, que és el comportament per defecte. 0 elimina la frontera. L'ús d'aquest realment no es recomana més, ja que el mateix efecte es pot aconseguir, millor, mitjançant {{cssxref('border')}}: none; en el {{Glossary('CSS')}}.
+
{{htmlattrxref('src','iframe')}}
+
Aquest atribut, igual que amb {{htmlelement("video")}}/{{htmlelement("img")}}, conté una ruta que apunta a la URL del document per a ser incrustat.
+
{{htmlattrxref('width','iframe')}} i {{htmlattrxref('height','iframe')}}
+
Aquests atributs especifiquen l'amplada i l'alçada que es vol que tingui el iframe.
+
Contingut alternatiu
+
De la mateixa manera que altres elements similars com {{htmlelement("video")}}, pot incloure el contingut alternatiu entre les etiquetes d'obertura i tancament <iframe></iframe> que apareixeran si el navegador no suporta l'etiqueta <iframe>. En aquest cas hem inclòs un enllaç a la pàgina en el seu lloc. És poc probable trobar-se amb qualsevol navegador que no sigui compatible amb <iframe>s avui dia.
+
{{htmlattrxref('sandbox','iframe')}}
+
Aquest atribut, funciona en navegadors una mica més modern que la resta de les característiques <iframe> (per exemple, Internet Explorer 10 i superior) sol·licita la configuració de seguretat reforçada; direm més sobre això en la següent secció.
+
+ +
+

Nota: Per tal de millorar la velocitat, és una bona idea establir l'atribut src de l'iframe amb JavaScript després que el contingut principal s'hagi carregat. Això fa que la pàgina s'utilitzi més aviat i disminueixi el temps de càrrega de la pàgina oficial (una mètrica important {{glossary("SEO")}}).

+
+ +

Problemes de seguretat

+ +

Esmentem abans els problemes de seguretat - Entrarem en això en detall, una mica més, ara. No esperem que es pugui entendre tot aquest contingut perfectament la primera vegada; només volem fer-vos conscients d'aquesta preocupació, i proporcionar una referència per tornar a mesura que tingueu més experiéncia i començar a considerar l'ús de <iframe>s en els vostres experiments i treball. A més, no hi ha necessitat de tenir por i no utilitza <iframe>s - només s'ha de tenir cura. Seguiu llegint...

+ +

Els fabricants de navegadors i desenvolupadors web han après per les males que els iframes són un objectiu comú (terme oficial: attack vector) per a les persones dolentes a la web (sovint anomenat hackers, o més exactament, crackers) per atacar, si estan tractant de modificar maliciosament la vostre pàgina web, o enganyar a la gent a fer alguna cosa que no volen fer, com revelar informació sensible com noms d'usuari i contrasenyes. A causa d'això, els enginyers d'especificacions i els desenvolupadors de navegadors han desenvolupat diversos mecanismes de seguretat per fer <iframe>s més segurs, i també estan les millors pràctiques a tenir en compte - anem a cobrir alguns d'aquests a continuació.

+ +
+

{{interwiki('wikipedia','Clickjacking')}} és un tipus d'atac iframe comú on els pirates informàtics incrustan un iframe invisible en el document (o incrustan el document en el seu propi lloc web maliciós) i el fan servir per capturar les interaccions dels usuaris. Aquesta és una forma comuna de confondre als usuaris o robar dades confidencials.

+
+ +

Un exemple ràpid, primer - intenteu carregar l'exemple anterior, mostrat previament, en el vostre navegador - es pot trobar en Github (veure el codi font també). No veureu, realment, res que apareigui a la pàgina, i si ens fixem en la consola en les eines de desevolupament del navegador, veureu un missatge que us indica perquè. En Firefox, se hos dirá, càrrega denegada per X-Frame-Options: https://developer.mozilla.org/en-US/docs/Glossary, no permet marcs. Això es deu al fet que els desenvolupadors que van construir MDN han inclòs una configuració al servidor que serveix a les pàgines del lloc web de no permetre que siguin incrustades a l'interior de <iframe>s (veure {{anch("Configure CSP directives")}}, més avall). Això té sentit - una pàgina sencere MDN no té molt sentit incrustar-la en altres pàgines, llevat que es vulgui fer alguna cosa com incrustar-la el vostre lloc i reclamar-les com a propies - o l'intent de robatori de dades a través de clickjacking, que són alhora coses molt dolentes, que es poden fer. A més, si tothom comences a fer això, tot l'ample de banda addicional començaria a costar-li molts diners a Mozilla.

+ +

Només incrustar quan sigui necessari

+ +

De vegades té sentit incrustar el contingut de tercers - com vídeos i mapes youtube - però ens podem estalviar molts mals de cap si només incrusten contingut de tercers quan sigui completament necessari. Una bona regla d'or per a la seguretat web és "Mai es pot ser massa cautelós. Si ho heu fet, torneu a comprovar-ho de totes maneres. Si algú més ho ha fet, se suposa que és perillós fins que es demostri el contrari".

+ +
+

A més de la seguretat, també s'ha d'estar al tant de les qüestions de la propietat intel·lectual. La majoria dels continguts té drets d'autor, fora de línia i en línia, fins i tot continguts que no us ho espereu (per exemple, la majoria de les imatges de Wikimedia Commons). Mai mostrar el contingut de la vostra pàgina web a menys que el propietari o els propietaris hagin donat per escrit, l'autorització inequívoca. Les sancions per infracció de drets d'autor són greus. Un cop més, mai es pot ser massa cautelós.

+ +

Si el contingut és llicenciat, s'ha d'obeir els termes de la llicència. Per exemple, el contingut MDN és sota llicència CC-BY-SA. Això vol dir, que s'ha d'acreditar adequadament quan se cita el nostre contingut, fins i tot si es realitzen canvis substancials.

+
+ +

Utilitzar HTTPS

+ +

{{Glossary("HTTPS")}} és la versió encriptada de {{Glossary("HTTP")}}. S'h de fer servir, HTTPS, en els vostres llocs web sempre que sigui possible:

+ +
    +
  1. HTTPS redueix la possibilitat que el contingut remot hagi estat manipulat en trànsit,
    2. +
  2. HTTPS impedeix que el contingut incrustat accedeixi al contingut del vostre document principal, i viceversa.
    3. +
+ +

L'ús d'HTTPS requereix un certificat de seguretat, que pot ser car (encara que Let's Encrypt facilita les coses) - si no es pot aconseguir un, es pot fer servir el document principal amb HTTP. No obstant això, a causa del segon benefici descrit anteriorment sobre HTTPS , no importa el que costi, mai s'ha de incrustar contingut de tercers amb HTTP. (En el millor dels casos, el navegador web de l'usuari donarà un advertiment de por). Totes les empreses de renom que fan que el contingut disponible vagi incrustar a través d'un <iframe> ho farà disponible a través d'HTTPS - mirar les URL dins de l'atribut src d'<iframe> quan està incrustant contingut de Google Maps o Youtube, per exemple.

+ +
+

Nota: Les pàgines de Github permeten que el contingut se serveixi a través d'HTTPS de forma predeterminada, per la qual cosa és útil per allotjar contingut. Si utilitzeu altre allotjament i no esteu segurs, consulteu al vostre proveïdor d'allotjament, sobre això.

+
+ +

Utilitzar sempre l'atribut sandbox

+ +

Si es vol donar als atacants poc poder, com sigui possible, per fer coses dolentes al vostre lloc web, s'ha de donar els continguts incrustats, només, els permisos necessaris per realitzar-lo. Per descomptat, això també, s'aplica al vostre propi contingut. Un contenidor de codi el qual es pot utilitzar apropiadament - o per a les proves - però no pot causar cap mal a la resta de la base del codi (ja sigui accidental o maliciós) s'anomena sandbox.

+ +

El contingut sense sandbox pot fer molt (l'execució de JavaScript, l'enviament de formularis, finestres emergents, etc.) Per defecte s'ha d'imposar totes les restriccions disponibles mitjançant l'atribut sandbox  sense paràmetres, com es mostra en l'exemple anterior.

+ +

Si és absolutament necessari, es pot afegir permisos de tornada un per un (dins del valor d'atribut sandbox ="" ) - veure la referència d'entrada {{htmlattrxref('sandbox','iframe')}} per a totes les opcions disponibles. Una nota important és que mai s'ha d'afegir tant allow-scripts i allow-same-origin al seu atribut sandbox - en aquest cas el contingut incrustat podria passar per alt la mateixa política de seguretat d'origen que deté l'execució de scripts de llocs i l'ús de JavaScript per desactivar completament la sandbox.

+ +
+

Nota: La Sandboxing no proporciona cap protecció si els atacants poden enganyar a la gent perquè visiti el contingut maliciós directament (fora d'un iframe). Si hi ha alguna possibilitat que cert contingut pot ser maliciós (per exemple, el contingut generat per l'usuari), si us plau feu servir un {{glossary("domini")}} diferent del vostre lloc principal.

+
+ +

Configurar directives CSP

+ +

La {{Glossary("CSP")}} representa la content security policy, i proporciona un conjunt de capçaleres HTTP (metadades enviades juntament amb les seves pàgines web quan es serveixen des d'un servidor web) dissenyades per millorar la seguretat del document HTML. Quan es tracta de protegir <iframe>s, es pot configurar el servidor per a enviar una capçalera X-Frame-Options apropiada. Això pot evitar que altres llocs web incrustin el seu contingut en les vostres pàgines web (el que permetria {{interwiki('wikipedia','clickjacking')}} i una sèrie d'altres atacs), que és exactament el que els desenvolupadors MDN han fet, com hem vist anteriorment.

+ +
+

Nota: Es pot llegir el post de Frederik Braun On the X-Frame-Options Security Header per obtenir més informació d'antecedents sobre aquest tema. Òbviament, està fora de l'abast, per a una explicació completa, d'aquest article.

+
+ +

Els elements <embed> i <object>

+ +

Els elements {{htmlelement("embed")}} i {{htmlelement("object")}}  compleixen una funció diferent a {{htmlelement("iframe")}} - aquests elements de propòsit general són eines d'inserció per a la incrustació de diversos tipus de contingut extern, que inclouen tecnologies de complements com els applets de Java i flash, PDF (es pot mostrar en un navegador amb un plugin PDF), i fins i tot el contingut com vídeos, SVG i les imatges!

+ +
+

Nota: Un plugin és un programari que proporciona accés als continguts del navegador que no pot llegir de forma nativa.

+
+ +

No obstant això, és poc probable que utilitzeu molt aquests elements - Els applets no s'han utilitzat durant anys, Flash ja no és molt popular, a causa d'una sèrie de raons (veure {{anch("El cas contra els complements")}}, més endavant), els arxius PDF tendeixen a estar millor enllaçats que incrustats, i altres continguts com a imatges i video tenen elements molt millors i més fàcils de manejar. Plugins i aquests mètodes d'incrustació són realment una tecnologia heretada, i els estem esmentant principalment en cas que us trobeu amb ells en certes circumstàncies com a intranets o projectes empresarials.

+ +

Si necessiteu incorporar contingut de plugin, aquest és el tipus d'informació que necessitareu, com a mínim:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 {{htmlelement("embed")}}{{htmlelement("object")}}
{{glossary("URL")}} del contingut incrustat{{htmlattrxref('src','embed')}}{{htmlattrxref('data','object')}}
accurate {{glossary("MIME type", 'media type')}} del contingut incrustat{{htmlattrxref('type','embed')}}{{htmlattrxref('type','object')}}
l'altura i l'amplada (en píxels CSS) de la caixa controlada pel complement{{htmlattrxref('height','embed')}}
+ {{htmlattrxref('width','embed')}}		{{htmlattrxref('height','object')}}
+ {{htmlattrxref('width','object')}}
noms i valors, per alimentar el complement com paràmetresatributs ad hoc amb els noms i valorselements d'una sola etiqueta {{htmlelement("param")}}, continguts dins <object>
Contingut HTML independent com a recurs alternatiu per a un recurs no disponibleNo suportat (<noembed> és obsolet)contingut dins <object>, després d'elements <param>
+ +
+

Nota: <object> requereix un atribut data, un atribut type, o tots dos. Si s'utilitzant ambdòs, també es pot utilitzar l'atribut {{htmlattrxref('typemustmatch','object')}} (només implementat en Firefox, a partir d'aquest escrit). typemustmatch mante l'arxiu incrustat a que s'executi llevat que l'atribut type proporcioni el tipus de medi correcte. Per tant, typemustmatch pot conferir beneficis significatius de seguretat quan està incrustar el contingut d'un {{glossary("origen")}} diferent (pot mantenir els atacants d'executar scripts arbitràries mitjançant el complement).

+
+ +

Heus aquí un exemple que utilitza l'element {{htmlelement("embed")}} per  incrustar una pel lícula Flash (veure aquest en Github i comprovar el codi font també):

+ +
<embed src="whoosh.swf" quality="medium"
+       bgcolor="#ffffff" width="550" height="400"
+       name="whoosh" align="middle" allowScriptAccess="sameDomain"
+       allowFullScreen="false" type="application/x-shockwave-flash"
+       pluginspage="http://www.macromedia.com/go/getflashplayer">
+ +

Bastant horrible, no ho és. El HTML generat per l'eina d'Adobe Flash tendia a ser encara pitjor, l'ús d'un element <object> amb un element <embed> incrustat en ell, per cobrir totes les bases (fes un cop d'ull a un exemple). El flaix fins i tot va ser utilitzat amb èxit com a contingut alternatiu a HTML5 de vídeo, per un temps, però això cada vegada es veu més innecessari.

+ +

Ara veurem un exemple <object>, que insereix un PDF en una pàgina (vegeu l'exemple en viu i el codi font):

+ +
<object data="mypdf.pdf" type="application/pdf"
+        width="800" height="1200" typemustmatch>
+  <p>You don't have a PDF plugin, but you can <a href="myfile.pdf">download the PDF file.</a></p>
+</object>
+ +

Els PDFs eren un pas necessari entre el paper i el digital, però plantegen molts reptes d'accessibilitat i poden ser difícils de llegir en pantalles petites. Encara tendeixen a ser popular en alguns cercles, però és molt millor enllaçar-los perquè puguin ser descarregats o llegits en una pàgina separada, en lloc de incrustar-los en una pàgina web.

+ +

El cas en contra dels complements (plugins)

+ +

Hi havia una vegada, que els complements (plugins) eran indispensables a la web. Recordeu els dies en què calia instal·lar Adobe Flash Player, només, per veure una pel·lícula en línia? Llavors teníem constantment alertes molestes sobre l'actualització de Flash Player i el seu entorn d'execució de Java. Les tecnologies web han crescut molt més robustes, i aquells dies s'han acabat. Per a la majoria de les aplicacions, és hora que deixin de lliurar contingut que depenguin dels complements (plugins), i comencin a prendre avantatge de les tecnologies web al seu lloc.

+ + + +

Llavors, què s'ha de fer? Si es necessita interactivitat, HTML i {{glossary("JavaScript")}} ens pot donar fàcilment la feina feta sense necessitat d'applets de Java o  tecnologia obsoleta ActiveX/BHO. En lloc de confiar en Adobe Flash, podem utilitzar vídeo HTML5 per les necessitats media, per a gràfics vectorials SVG i Canvas per a imatges i animacions complexes. Peter Elst escrivia fa uns anys que Adobe Flash no sol ser l'eina adequada per al treball, excepte per a jocs i aplicacions empresarials especialitzades. Pel que fa a ActiveX, fins i tot el navegador Microsoft {{glossary("Microsoft Edge","Edge")}} ja no ho suporta.

+ +

Sumari

+ +

El tema de la incrustació d'altres continguts en els documents web, de forma ràpida, pot arribar a ser molt complex, pel qual en aquest article hem tractat d'introduir d'una manera simple i familiar el que us pogui semblar d'una rellevancia immediata, mentre en seguit fent al·lusió a algunes de les característiques més avançades de les tecnologies involucrades. Per començar, és probable que feu servir la incrustació molt més enllà, inclouent continguts de tercers com mapes i vídeos en les vostres pàgines. A mesura que adquiriu més experiència, és probable que comenceu a trobar més usos per a ells.

+ +

Hi ha moltes altres tecnologies que impliquen la incrustació de continguts externs a més dels que hem tractat aquí. Vam veure alguns, en els articles anteriors, com {{htmlelement("video")}}, {{htmlelement("audio")}} i {{htmlelement("img")}}, però hi ha altres a descobrir, com {{htmlelement("canvas")}} per generar en JavaScript gràfics 2D i 3D, i {{htmlelement("svg")}} per a incrustar gràfics vectorials. Aviat ens ocuparem de SVG en l'article següent del mòdul.

+ +

{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding")}}

diff --git a/files/ca/learn/html/multimedia_and_embedding/responsive_images/index.html b/files/ca/learn/html/multimedia_and_embedding/responsive_images/index.html new file mode 100644 index 0000000000..4be56f6248 --- /dev/null +++ b/files/ca/learn/html/multimedia_and_embedding/responsive_images/index.html @@ -0,0 +1,254 @@ +--- +title: Imatges sensibles +slug: Learn/HTML/Multimèdia_i_incrustar/Imatges_sensibles +tags: + - Article + - Beginner + - CodingScripting + - Design + - Graphics + - Guide + - HTML + - Image + - Intermediate + - img + - sizes + - srcset +translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}
+ +
+

En aquest article aprendrem sobre el concepte de les imatges sensibles - imatges que funcionen bé en dispositius amb diferentes mides de pantalles, resolucions i altres característiques semblants - i veurem les eines que proporciona HTML per ajudar-nos a posar-les en pràctica. Imatges sensibles és només una part del (i prepara l'escenari per) disseny web sensible, un tema que aprendrem molt més en un futur mòdul del tema CSS.

+
+ + + + + + + + + + + + +
Requisits previs:Heu de coneixer el fonaments bàsics d'HTML i com afegir imatges estàtiques a una pàgina web.
Objectius:Aprendre com utilitzar funcions com {{htmlattrxref("srcset", "img")}} i l'element {{htmlelement("picture")}} per implementar solucions d'imatges sensibles en els llocs web.
+ +

Per què les imatges sensibles ?

+ +

Llavors, quin problema estem tractant de resoldre amb imatges sensibles? Examinarem un escenari típic. Un lloc web típic, probablement, té una imatge de capçalera perquè es vegi bonic per als visitants, a més, potser algunes imatges de contingut per sota d'aquesta. És possible que vulgueu fer que la capçalera abasti la totalitat de l'amplada de la mateixa, i la imatge de contingut en formi part, en algun lloc, dins de la columna de contingut. Fem una ullada a un exemple senzill d'això:

+ +

Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center.

+ +

Això funciona bé en un dispositiu de pantalla ampla, com ara un ordinador portàtil o de sobretaula (es pot veure l'example en directa i trobar el codi font en Github.) No parlarem tant de la CSS, excepte per dir que

+ + + +

Això està bé, però el problema ve quan es comença a veure el lloc en un dispositiu de pantalla estreta - la capçalera es veu bé, però està començant a ocupar molta alçada de la pantalla d'un dispositiu mòbil; la primera imatge de contingut, d'altra banda, es veu terrible - en aquesta grandària amb prou feines es pot veure a la gent!

+ +

Our example site as viewed on a narrow screen; the first image has shrunk to the point where it is hard to make out the detail on it.

+ +

Seria molt millor mostrar una versió retallada de la imatge que fixar-se en els detalls importants de la fotografia quan el lloc es veu en una pantalla estreta, i potser una mica entre els dos per a un dispositiu de pantalla d'amplada mitjana com una tauleta - això es coneix comunament com el problema direcció d'art .

+ +

A més, no hi ha necessitat d'integrar aquest tipus d'imatges de grans dimensions a la pàgina si s'està veient en una petita pantalla de mòbil; això es diu problema canvi de resolució - una imatge de trama és un nombre fix de píxels d'ample i un nombre fix de píxels d'alt; com vam veure en fixar-nos en els gràfics de vector, una imatge de trama comença a veure's granulada i horrible si es visualitza més gran que la mida original (mentre que un gràfic vectorial no ho fa). I si es mostra significativament més petita que la mida original, és un malbaratament d'ample de banda - en especial els usuaris de mòbils no volen haver de gravar a través del seu ample de banda la descàrrega d'una imatge gran destinada a escritori, quan una imatge petita faria per al dispositiu. Una situació ideal seria tenir múltiples resolucions disponibles i servir mides adequades, depenent dels diferents dispositius que accedeixen al lloc web.

+ +

Per complicar més les coses, alguns dispositius tenen pantalles d'alta resolució que necessiten les imatges més grans del que s'espera que ells necessiten, per mostrar-ho bé. Això és essencialment el mateix problema, però en un context lleugerament diferent.

+ +

Es podria pensar que les imatges de vector resoldrien aquests problemes, i ho fan fins a cert punt - tots dos són petits en grandària d'arxiu i s'escalen bé, i han de ser usats sempre que sigui possible. No són adequats per a tot tipus d'imatges però -si bé són excel·lents per a gràfics simples, patrons, elements d'interfície, etc., comença a ser molt complex per crear una imatge basada en vectors amb el tipus de detall que ens agradaria trobar, diguem, una foto. Els formats d'imatge de trama, com JPEG són més adequats per al tipus d'imatges que hem vist en l'exemple anterior.

+ +

Aquest tipus de problema no existia quan la primera web va existir, a principis de mitjans dels anys 90 - en aquell temps els únics dispositius que existien per navegar per la web eren de sobretaula i portàtils, de manera que els enginyers de navegadors i escriptors d'especificacions ni tan sols pensaven posar en pràctica solucions. Les tecnologies d'imatges sensibles es van dur a terme recentment per resoldre els problemes indicats anteriorment, ja que permetien oferir el navegador diversos arxius d'imatge, ja sigui tots els que mostraven el mateix, però que contenien un nombre diferent de píxels (resolution switching), o diferents imatges adequades per a diferents assignacions d'espai (art direction)

+ +
+

Nota: Les noves característiques que es descriuen en aquest article -  {{htmlattrxref("srcset", "img")}}/{{htmlattrxref("sizes", "img")}}/{{htmlelement("picture")}} - están totes suportades en les versions pubicades per els escriptoris moderns i navegadors mòbils (incloent el navegador de Microsoft Edge, encara que no amb Internet Explorer.)

+
+ +

Com crear imatges sensibles?

+ +

En aquesta secció, veurem els dos problemes il·lustrats a dalt i mostrarem com resoldre'ls utilitzant les característiques de la imatge sensible d'HTML. S'ha de tenir en compte que ens centrarem en {{htmlelement("img")}}s d'HTML per aquesta secció, com es veu en l'àrea de contingut de l'exemple anterior - la imatge a la capçalera del lloc és només de decoració, i per tant implementat utilitzant imatges de fons CSS. CSS podria dir-se que té millors eines per el disseny sensible, parlarem d'elles en un futur mòdul CSS.

+ +

Canvi de resolució: Diferents mides

+ +

Llavors, quin és el problema que es vol resoldre amb el canvi de resolució? Volem mostrar el mateix contingut d'imatge, major o menor depenent del dispositiu - aquesta és la situació que tenim amb la segona imatge de contingut en el nostre exemple. L'element standard {{htmlelement("img")}} tradicionalment només se li permet apuntar el navegador a un sol arxiu font:

+ +
<img src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">
+ +

No obstant això, podem utilitzar dos nous atributs - {{htmlattrxref("srcset", "img")}} i {{htmlattrxref("sizes", "img")}} - per proporcionar diverses imatges fonts addicionals, juntament amb consells per ajudar al navegador a triar el més adequat. Es pot veure un exemple d'això en el nostre exemple responsive.html en Github (vegeu també el codi font):

+ +
<img srcset="elva-fairy-320w.jpg 320w,
+             elva-fairy-480w.jpg 480w,
+             elva-fairy-800w.jpg 800w"
+     sizes="(max-width: 320px) 280px,
+            (max-width: 480px) 440px,
+            800px"
+     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">
+ +

Els atributs srcset i sizes es veuen complicats, però no són tan dolents per entendre si es formaten com es mostra a dalt, amb una part diferent del valor de l'atribut en cada línia. Cada valor conté una llista separada per comes. i cada part de les llistes es componen de tres sub-parts. Recorrerem els continguts de cada, ara:

+ +

srcset defineix el conjunt d'imatges que permetrà el navegador triar entre,   cada mida d'imatge. Abans de cada coma, escrivim:

+ +
    +
  1. Un nom de fitxer d'imatge (elva-fairy-480w.jpg.)
    2. +
  2. Un espai.
    3. +
  3. L'ample de la imatge inherent en píxels (480w) - en compte que aquesta utilitza la unitat w, no px com es podria esperar. Aquesta és la mida real de la imatge, que es pot trobar al inspeccionar l'arxiu d'imatge a l'ordinador (per exemple en un Mac es pot seleccionar la imatge en el Finder i preme Cmd + I per obrir la pantalla d'informació).
    4. +
+ +

sizes defineix un conjunt de condicions de medis (per exemple, amples de pantalla) i indica quina mida de la imatge seria millor triar, quan es compleixin certes condicions en els medis - aquests són els consells que parlàvem anteriorment. En aquest cas, abans de cada coma, escrivim

+ +
    +
  1. una condició de medis ((max-width:480px)) - aprendrem més sobre això en el tema de CSS, però per ara direm que una condició de medis descriu un possible estat en que la pantalla pot estar. En aquest cas, estem dient "quan l'amplada de la finestra gràfica sigui de 480 píxels o menys".
    2. +
  2. Un espai.
    3. +
  3. L'amplada de l'espai de la imatge s'ompli quan la condició del medi sigui certa (440px).
    4. +
+ +
+

Nota: Per l'ample de l'espai, és possible proporcionar una longitud absoluta (px, em) o una longitud relativa (com un percentatge). Es pot haver notat que l'última amplada de l'espai no té cap condició del medi - Aquest és per defecte el que es tria quan cap de les condicions del medi són certes). El navegador ignora tot després de la primera condició coincident, així que s'ha d'anar amb compte com es demanan les condicions del medi.

+
+ +

Així, amb aquests atributs en el seu lloc, el navegador:

+ +
    +
  1. Mirar l'amplada del dispositiu.
    2. +
  2. Calcular quina condició del medi en la llista de sizes (mides) és el primer a ser veritat.
    3. +
  3. Mirar la mida de l'espai donat a aquesta consulta de medis.
    4. +
  4. Carregar la imatge de referència en la llista srcset que més s'acosti a la mida de l'espai triat.
    5. +
+ +

I ja està! Així que en aquest punt, si un navegador de suport amb un ample de 480px de finestra gràfica carrega la pàgina, la condició (max-width: 480px) del medi serà veritat, per tant, es triarà l'espai 440px, de manera que el elva-fada-480w.jpg serà carregat, ja que el seu ample inherent (480w) és el més proper a 440px. La imatge 800px és de 128 KB en el disc mentre que la versió de 480px és només 63KB - un estalvi de 65KB. Ara imaginem si aquesta era una pàgina que tenia moltes imatges. Usant aquesta tècnica es podria estalviar als usuaris de mòbils una gran quantitat d'ample de banda.

+ +

Els navegadors més antics no soportan aquestes característiques, simplement, les ignoran i segueixen endavant i carregan la imatge que es fa referència en l'atribut {{htmlattrxref("src", "img")}} com a normal.

+ +
+

Nota: En el {{htmlelement("head")}} del document trobarem la línia <meta name = "viewport" content = "width = device-width">: això obliga els navegadors mòbils a adoptar l'amplada real de la seva finestra en carregar pàgines web (alguns navegadors mòbils menteixen sobre la seva amplada de la finestra gràfica, i en lloc de carregar pàgines a l'amplada de la finestra gràfica, redueixen la pàgina carregada cap avall, el que no és molt útil per a les imatges o el disseny sensible. Us ensenyarem més sobre això en un mòdul futur).

+
+ +

Eines útils per a desenvolupadors

+ +

Hi ha algunes eines de desenvolupament útils en els navegadors per ajudar en l'elaboració de les amplades d'espai, etc, que són necessàries utilitzar. Quan els estem treballant, carreguem per primera vegada la versió no sensible del exemple (not-responsive.html), després entreu en Responsive Design View (Tools > Web Developer > Responsive Design View), que ens permetrà mirar els dissenys de pàgina web com si els veiéssim a través d'una varietat de diferents mides de pantalles de dispositius.

+ +

S'ha establert l'amplada de la finestra gràfica a 320px llavors 480px; per a cada un entrem al Inspector DOM, fent clic a l'element {{htmlelement("img")}} que ens interessa, després mirem la seva grandària en la pestanya de Box Model view en el costat dret de la pantalla. Això ens ha de donar els amples de imatge inherents que necessita.

+ +

A screenshot of the firefox devtools with an image element highlighted in the dom, showing its dimensions as 440 by 293 pixels.

+ +

A continuació, es pot comprovar si el srcset ha treballat mitjançant l'establiment de l'amplada de la finestra gràfica que volem (establint una amplada estreta, per exemple), obrim Network Inspector (Tools > Web Developer > Network), a continuació, tornem a carregar la pàgina. Això ens ha de donar una llista de recursos que s'han descarregat per compondre la pàgina web, i aquí es pot comprovar quin arxiu d'imatge va ser triat per a descarregar.

+ +

a screenshot of the network inspector in firefox devtools, showing that the HTML for the page has been downloaded, along with three images, which include the two 800 wide versions of the responsive images

+ +

Canvi de resolució: Mateixa grandària, diferents resolucions

+ +

Si s'està donant suport a múltiples resolucions de pantalla, però tothom veu la imatge a la mateixa grandària real en la pantalla, es pot permetre que el navegador seleccioni una imatge de resolució apropiada utilitzant srcset amb x-descriptors i sense grandaries (sizes) - una sintaxi una mica més fàcil! Es pot trobar un exemple de com es veu en srcset-resolutions.html (vegeu també el codi font):

+ +
<img srcset="elva-fairy-320w.jpg,
+             elva-fairy-480w.jpg 1.5x,
+             elva-fairy-640w.jpg 2x"
+     src="elva-fairy-640w.jpg" alt="Elva dressed as a fairy">
+
+ +

A picture of a little girl dressed up as a fairy, with an old camera film effect applied to the imageEn aquest exemple, el següent CSS s'aplica a la imatge de manera que tindrà una amplada de 320 píxels a la pantalla (també anomenats píxels CSS):

+ +
img {
+  width: 320px;
+}
+ +

En aquest cas, la grandària (sizes) no és necessaria - el navegador simplement resol la resolució de la pantalla que es mostra, i serveix la imatge més adequada que es fa referència en el srcset. Així, si el dispositiu que accedeixi a la pàgina té un estàndard/de baixa resolució, amb un píxel de dispositiu que representa cada píxel CSS, la imatge elva-fada-320w.jpg serà carregada (el 1x està implícit, pel que no cal incloure). Si el dispositiu té una alta resolució de dos píxels de dispositiu per píxel CSS o més, es carregarà la imatge elva-fada-640w.jpg. La imatge de 640px té 93KB, mentre que la imatge de 320px té només 39KB.

+ +

Direcció d'art

+ +

En resum, el problema de direcció d'art implica voler canviar la imatge que es mostra per adaptar-se a diferents grandàries de visualització de la imatge. Per exemple, si es mostra un paisatge gran amb una persona al mig en un lloc web quan es veu en un navegador d'escriptori, aquesta es redueix quan es veu el lloc web en un navegador mòbil, es veurà malament, la persona serà molt petita i difícil de veure. Probablement seria millor mostrar una imatge més petita, de retrat en el mòbil, que mostri la persona ampliada. L'element {{htmlelement("picture")}} ens permet implementar exactament aquest tipus de solució.

+ +

Tornant al nostre exemple original not-responsive.html tenim una imatge que necessita molt la direcció d'art:

+ +
<img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
+ +

Arreglarem això, amb {{htmlelement("picture")}}! Igual que <video> i <audio>,  l'element <picture> és un contenidor que conté diversos elements {{htmlelement("source")}} que proporcionen diverses fonts diferents que el navegador pot triar, seguit per l'importantíssim element {{htmlelement("img")}}. El codi de responsive.html es veu així:

+ +
<picture>
+  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
+  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
+  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
+</picture>
+
+ + + +

Aquest codi ens permet mostrar una imatge adequada tant en pantalla ampla com en pantalla estreta, com es veu a continuació:

+ +

Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center.Our example site as viewed on a narrow screen with the picture element used to switch the first image to a portrait close up of the detail, making it a lot more useful on a narrow screen

+ +
+

Nota: S'ha d'utilitzar el atribut media només en escenaris de direcció d'art; quan es fa ús de media, no oferir condicions de medis dins l'atribut sizes.

+
+ +

Per què no podem fer això usant CSS o Javascript?

+ +

Quan el navegador comença a carregar una pàgina, s'inicia la descàrrega (precàrrega) d'alguna de les imatges abans que l'analitzador principal hagi començat a carregar i interpretar el CSS i JavaScript de la pàgina. Aquesta és una tècnica útil, que de mitjana ha rebaixat el 20% el temps de càrrega. No obstant això, no és útil per a les imatges sensibles, d'aquí la necessitat d'implementar solucions com srcset. No es podria, per exemple, carregar l'element {{htmlelement("img")}}, després de detectar l'amplada de la finestra gràfica amb JavaScript i canviar dinàmicament la imatge d'origen en una més petita si es desitjes. Per llavors, la imatge original ja hauria estat carregada, i es carregaria també la imatge petita, així, que és encara pitjor en termes d'imatge sensible.

+ + + +

Utilitzar formats d'imatge moderns audaçment

+ +

Hi ha diversos nous formats d'imatge emocionants (com WebP i JPEG-2000) que poden mantenir una mida d'arxiu baix i d'alta qualitat al mateix temps. No obstant això, el suport dels navegadors és irregular.

+ +

<picture> ens permet continuar atenent els navegadors antics. Es pot subministrar el tipus MIME dins de l'atribut type perquè el navegador pogui rebutjar immediatament tipus d'arxius no compatibles:

+ +
<picture>
+  <source type="image/svg+xml" srcset="pyramid.svg">
+  <source type="image/webp" srcset="pyramid.webp">
+  <img src="pyramid.png" alt="regular pyramid built from four equilateral triangles">
+</picture>
+
+ + + +

Aprenentatge actiu: La implementació de les vostres pròpies imatges sensibles

+ +

Per a aquest aprenentatge actiu, estem esperant que sigueu valents i sobretot actueu independentment.... Volem que implementeu el vostre propi art adequat dirigit a pantalla estreta/pantalla ampla utilitzant <picture>, i un exemple de canvi de resolució que utilitzi srcset.

+ +
    +
  1. Escriure alguna cosa d'HTML senzilla per contenir el codi (usar not-responsive.html com a punt de partida, si es vol)
    2. +
  2. Troba una bona imatge apaïsada de pantalla ampla amb algun tipus de detalls continguts en ella en algun lloc. Crear una versió en grandària web de la mateixa utilitzant un editor de gràfics, a continuació, retallar-la per mostrar una part més petita que ampliï el detall, i crear una segona imatge (al voltant de 480px d'ample que és bo per a això).
    3. +
  3. Utilitzeu l'element <picture> per implementar un selector d'imatge de direcció d'art!
    4. +
  4. Crear diversos arxius d'imatges de diferents mides, cadascun mostrant la mateixa imatge.
    5. +
  5. Utilitzeu srcset/size per crear un exemple de canvi de resolució, ja sigui per servir la mateixa imatge a mida en diferentes resolucions, o diferentes mides d'imatges en diferentes amplades de finestra gràfica.
    6. +
+ +
+

Nota: Utilitzeu el devtools del navegador perquè us ajudi a saber quines mides necessiteu, com es va esmentar anteriorment.

+
+ +

Sumari

+ +

Això és un embolcall per a les imatges sensibles - Esperem que hagiu gaudit jugant amb aquestes noves tècniques. Com a resum, hi ha dos problemes diferents que hem estat discutint aquí:

+ + + +

Hem arribat al final de tot, dels mòduls Multimedia i incrustació! L'única cosa que fer ara, abans de seguir endavant, és provar la vostra avaluació multimèdia i veure com us va. Diverteix-te.

+ +

Veure

+ + + +
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}
diff --git a/files/ca/learn/html/multimedia_and_embedding/video_and_audio_content/index.html b/files/ca/learn/html/multimedia_and_embedding/video_and_audio_content/index.html new file mode 100644 index 0000000000..5a8855df2b --- /dev/null +++ b/files/ca/learn/html/multimedia_and_embedding/video_and_audio_content/index.html @@ -0,0 +1,294 @@ +--- +title: Contingut de vídeo i àudio +slug: Learn/HTML/Multimèdia_i_incrustar/Contingut_de_vídeo_i_àudio +tags: + - Article + - Audio + - Beginner + - Guide + - HTML + - Video + - captions + - subtitles + - track +translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}
+ +

Ara que estem a gust afegint imatges senzilles a una pàgina web, el següent pas és començar a afegir els reproductors de vídeo i àudio als documents HTML! En aquest article veurem com es fa exactament això amb els elements {{htmlelement("video")}} i {{htmlelement("audio")}}; després acabarem mirant com afegir títols/subtítols als vídeos

+ + + + + + + + + + + + +
Requisits previs:Coneixements bàsics d'informàtica, instal.lació programari bàsic, coneixements bàsics de treballar amb arxius, familiaritzar-se amb els fonaments HTML (com s'explica en Inici en HTML) i Imatges en HTML.
Objectiu:Aprendre com incrustar vídeo i àudio en una pàgina web, i afegir títols/subtítols a un vídeo.
+ +

Àudio i vídeo a la web

+ +

Els desenvolupadors web han volgut utilitzar vídeo i àudio a la web des de fa molt de temps, des de la dècada del 2000, quan vam començar a tenir un ample de banda prou ràpid com per suportar qualsevol tipus de vídeo (els arxius de vídeo són molt més grans que els de text o fins i tot les imatges). En els primers dies, les tecnologies web natives com HTML no tenien la capacitat d'integrar vídeo i àudio a la web, per la qual cosa les tecnologies propietàries (basades en el plug-in) com Flash (i més tard, Silverlight) es van fer populars per al maneig d'aquests continguts. Aquest tipus de tecnologia funcionan bé, però tenen una sèrie de problemes, incloent, que no funcionan bé amb les característiques HTML/CSS, problemes de seguretat i problemes d'accessibilitat.

+ +

Una solució nativa resoldria gran part d'això si es feia bé. Afortunadament, uns anys més tard, l'especificació {{glossary("HTML5")}} havia afegit aquestes característiques, amb els elements {{htmlelement("video")}} i {{htmlelement("audio")}}, i alguns nous i brillants {{Glossary("JavaScript")}} {{Glossary("API","APIs")}} per controlar-los. No estarem veient JavaScript aquí - només els fonaments bàsics que es poden aconseguir amb HTML.

+ +

No estem per ensenyar com produir arxius d'àudio i vídeo - aixó requereix un conjunt d'habilitats completament diferents. Us hem proporcionat unes mostres d'arxiu d'àudio i vídeo i codi d'exemple perquè pugueu experimentar, en cas que no pugueu aconseguir-ho vosaltres mateixos.

+ +
+

Nota: Abans de començar aquí, també s'ha de saber que hi ha un bon nombre {{glossary("OVP","OVPs")}} (proveïdors de vídeo en línia) com YouTube, Dailymotion i Vimeo, i proveïdors d'àudio en línia com Soundcloud. Aquestes empreses ofereixen una forma còmoda i fàcil d'allotjar i consumir videos, pel que no ha de preocupar l'enorme consum d'ample de banda. OVP, fins i tot, en general, ofereix codi ja preparat per incrustar vídeo/àudio a les seves pàgines web. Si anem per aquest camí, es pot evitar algunes de les dificultats que es discuteixen en aquest article. Estarem discutint aquest tipus de servei, una mica més, en el proper article.

+
+ +

L'element <video>

+ +

L'element {{htmlelement("video")}} permet incrustar un vídeo molt fàcilment. Un exemple realment senzill és el següent:

+ +
<video src="rabbit320.webm" controls>
+  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.webm">link to the video</a> instead.</p>
+</video>
+ +

Les característiques de la nota són:

+ +
+
{{htmlattrxref("src","video")}}
+
De la mateixa manera que l'element {{htmlelement("img")}}, l'atribut src conté una ruta d'accés al vídeo que es vol incrustar. Funciona exactament de la mateixa manera.
+
{{htmlattrxref("controls","video")}}
+
Els usuaris han de poder controlar la reproducció de vídeo i d'àudio (és especialment important per a les víctimes de l'epilepsia.) S'ha d'utilitzar l'atribut controls per incloure la pròpia interfície de control del navegador, o construir la interfície amb l'API JavaScript apropiat. Com a mínim, la interfície ha d'incloure una manera d'iniciar i aturar els medis i ajustar el volum.
+
El paràgraf dins de les etiquetes <video>
+
+

Això es coneix com a contingut alternatiu - aquest és mostrat si el navegador per accedir a la pàgina no és compatible amb l'element <video>, ens permet oferir una alternativa per a navegadors antics. Això pot ser qualsevol cosa; en aquest cas, hem proporcionat un enllaç directe a l'arxiu de vídeo, de manera que l'usuari pogui, almenys, tenir accés a ell, d'alguna manera, independentment de quin navegador estan fent servir.

+
+
+ +

El vídeo incrustat es veurà semblant a això:

+ +

A simple video player showing a video of a small white rabbit

+ +

Podeu provar l'exemple viu aquí ( vegeu també el codi font.)

+ +

Suport de múltiples formats

+ +

Hi ha un problema amb l'exemple anterior, el qual us haureu adonat al intentar accedir a l'enllaç directe, anteriorment, amb un navegador com Safari o Internet Explorer. El vídeo no es reprodueix! Això és perquè diferents navegadors suporten diferents formats de vídeo (i àudio).

+ +

Anem a través de la terminologia ràpidament. Formats com MP3, MP4 i WebM es diuen formats contenidors. Contenen diferents parts en què es compon la cançó o vídeo - com una pista d'àudio, una pista de vídeo (en el cas del vídeo), i les metadades per descriure els medis en que són presentats.

+ +

Les pistes d'àudio i vídeo estan també en diferents formats, per exemple:

+ + + +

Un reproductor d'àudio tendeix a reproduir una pista d'àudio directament, per exemple, un arxiu MP3 o Ogg. Aquests no necessiten contenidors.

+ +
+

Nota: No és tan senzill, com es pot veure a la nostra taula de compatibilitat de còdec d'àudio i de vídeo. A més, molts navegadors de plataformes mòbils poden reproduir un format no suportat lliurant-ho al reproductor multimèdia del sistema subjacent per reproduir-ho. Però això ho farà ara com ara.

+
+ +

Els formats anteriors existeixen per comprimir video i àudio en arxius manejables (el video i l'àudio en brut són molt grans). Els navegadors contenen diferents {{Glossary("Codec","Codecs")}}, com Vorbis o H.264, que s'utilitzen per convertir el so comprimit i el vídeo en dígits binaris i a l'inrevés. Com hem indicar anteriorment, els navegadors per desgràcia no tots suporten als mateixos còdecs, pel que s'haurà de proporcionar diversos arxius per a cada producció de medis. Si falta el còdec adequat per descodificar el medi, simplement no es reproduirà.

+ +
+

Nota: És possible que ens pregunten per què existeix aquesta situació. MP3 (per a àudio) i MP4/H.264 (per a vídeo) són àmpliament recolzats, i de bona qualitat. No obstant això, també són gravats per patents - patents nord-americanes que cobreixen MP3 fins almenys 2017, i H.264 fins 2027 com molt aviat, el que significa que els navegadors que no tenen la patent han de pagar grans summes de diners per recolzar aquests formats. A més, moltes persones eviten el programari restringit en principi, a favor dels formats oberts. Aquesta és la raó per la qual hem de proporcionar múltiples formats per a diferents navegadors.

+
+ +

Llavors, com fem això? Fer una ullada a el següent exemple actualitzat (prova-ho qui viu aquí, també):

+ +
<video controls>
+  <source src="rabbit320.mp4" type="video/mp4">
+  <source src="rabbit320.webm" type="video/webm">
+  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
+</video>
+ +

Aquí hem pres l'atribut src fora de l'etiqueta <video> actual, i en el seu lloc hem inclòs elements {{htmlelement("source")}}, per separat, que apunten a les seves pròpies fonts. En aquest cas, el navegador va a través dels elements <source> i reprodueix el primer còdec que té que donar suport. Incloent les fonts de WebM i MP4 hauria de ser suficient per reproduir els vídeos a la majoria de plataformes i navegadors actuals.

+ +

Cada element <source> també té un atribut type. Aquest és opcional, però s'aconsella que s'inclogui - conté el {{glossary("MIME type","MIME types")}} dels arxius de vídeo i els navegadors poden llegir aquests i saltar immediatament els vídeos que no entenen. Si no està inclòs, els navegadors carregan i tractan de reproduir cada arxiu fins a trobar un que funcioni, prenent encara més temps i recursos.

+ +
+

Nota: El nostre article sobre els formats dels medis compatibles conté alguna cosa en comú {{glossary("MIME type","MIME types")}}.

+
+ +

Altres característiques de <video>

+ +

Hi ha una sèrie d'altres característiques que es poden incloure en un vídeo HTML5. Fer una ullada al nostre tercer exemple, a continuació:

+ +
<video controls width="400" height="400"
+       autoplay loop muted
+       poster="poster.png">
+  <source src="rabbit320.mp4" type="video/mp4">
+  <source src="rabbit320.webm" type="video/webm">
+  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
+</video>
+
+ +

Això ens donarà una sortida semblant alguna cosa com això:

+ +

A video player showing a poster image before it plays. The poster image says HTML5 video example, OMG hell yeah! Les noves característiques són:

+ +
+
{{htmlattrxref("width","video")}} and {{htmlattrxref("height","video")}}
+
Es pot controlar la mida del vídeo, ja sigui amb aquests atributs o amb {{Glossary("CSS")}}. En ambdós casos, els vídeos mantenen la seva relació amplada-alçada nativa - coneguda com la relació d'aspecte. Si la relació d'aspecte no es manté per les mides que s'hagin definit, el vídeo creixerà per omplir l'espai horitzontal, i l'espai sense omplir acabarà tinguen un color de fons sòlid per defecte.
+
{{htmlattrxref("autoplay","video")}}
+
Aquest atribut fa que l'inici d'àudio o vídeo es reprodueixi immediatament, mentre que la resta de la pàgina s'està carregant. Es recomana no utilitzar el vídeo en reproducció automàtica (o àudio) en els vostres llocs, ja que els usuaris poden trobar que és realment molest.
+
{{htmlattrxref("loop","video")}}
+
Aquest atribut fa que el vídeo (o àudio) comenci reproduir-se, de nou, cada vegada que acabi. Això també pot ser molest, de manera que només s'utilitzi quan sigui realment necessari.
+
{{htmlattrxref("muted","video")}}
+
Aquest atribut fa que el medi es reprodueixi amb el so desactivat per defecte.
+
{{htmlattrxref("poster","video")}}
+
Aquest atribut pren com a valor l'adreça URL d'una imatge, que es podrà veure abans de reproduir-se el vídeo. Està destinat a ser utilitzat per a una pantalla de presentació o de publicitat.
+
{{htmlattrxref("preload","video")}}
+
+

Aquest atribut s'utilitza en l'element per emmagatzemar en búfer arxius grans. Pot prendre un dels 3 valors:

+ +
    +
  • "none" no emmagatzema l'arxiu en búfer
    • +
  • "auto" emmagatzema l'arxiu multimèdia en búfer
    • +
  • "metadata" només emmagatzema en búfer les metadades de l'arxiu
    • +
+
+
+ +

Es pot trobar l'exemple anterior disponible per reproduir en viu en Github (també veureu el codi font.) Recordeu que no hem inclòs l'atribut de reproducció automàtica en la versió en viu - si el vídeo comença a reproduir-se tan aviat com es carrega la pàgina, no es veurà el cartell!

+ +

L'element <audio>

+ +

L'element {{htmlelement("audio")}} funciona exactament de la mateixa manera que l'element {{htmlelement("video")}}, amb algunes petites diferències com s'indica a continuació. Un exemple típic podria ser així:

+ +
<audio controls>
+  <source src="viper.mp3" type="audio/mp3">
+  <source src="viper.ogg" type="audio/ogg">
+  <p>Your browser doesn't support HTML5 audio. Here is a <a href="viper.mp3">link to the audio</a> instead.</p>
+</audio>
+ +

Això produeix alguna cosa, com el següent, en un navegador:

+ +

A simple audio player with a play button, timer, volume control, and progress bar

+ +
+

Nota: Es pot executar la demostració d'àudio en viu en Github (també veure el codi font reproductor d'àudio.)

+
+ +

Aquest ocupa menys espai que un reproductor de vídeo, ja que no hi ha component visual - només ha de mostrar els controls per reproduir l'àudio. Altres diferències amb el vídeo HTML5 són els següents:

+ + + +

A part d'això, <audio> suporta les mateixes característiques que <video> - reviseu les seccions anteriors per obtenir més informació sobre ells.

+ +

Visualitzar pistes de text de vídeo

+ +

Ara parlarem d'un concepte una mica més avançat que és molt útil conèixer. Moltes persones no poden o no volen escoltar el contingut d'àudio/vídeo que troben a la web, almenys en determinats moments. Per exemple:

+ + + +

No seria agradable proporcionar a aquestes persones amb una transcripció de les paraules que es parla en l'àudio/vídeo? Bé, gràcies a vídeo HTML5, es pot amb el format WebVTT i l'element {{htmlelement("track")}}.

+ +
+

Nota: "transcriure" i "transcripció" vol dir escriure les paraules parlades com a text.

+
+ +

WebVTT és un format per escriure arxius de text que contenen diverses cadenes de text juntament amb metadades, així com a quina hora volem que en el video, es mostri cada cadena de text i fins i tot informació limitada d'estil/posicionament. Aquestes cadenes de text s'anomenen senyals, i també poden mostrar diferents tipus per a diferents propòsits, sent els més comuns:

+ +
+
subtitles
+
Traduccions de material estranger, per a persones que no entenen les paraules pronunciades en l'àudio.
+
captions
+
Transcripcions sincronitzades de diàleg o descripcions de sons significatius, permeten a les persones que no poden sentir l'àudio entendre el que està passant.
+
timed descriptions
+
Text per a la conversió a àudio, serveix a les persones amb discapacitat visual.
+
+ +

Un arxiu típic WebVTT es veurà així:

+ +
WEBVTT
+
+1
+00:00:22.230 --> 00:00:24.606
+This is the first subtitle.
+
+2
+00:00:30.739 --> 00:00:34.074
+This is the second.
+
+  ...
+
+ +

Perquè es visualitzi juntament amb la reproducció de medis HTML, cal:

+ +
    +
  1. Guardar-ho com un arxiu .vtt en un lloc sensible.
    2. +
  2. Enllaçar al arxiu .vtt amb l'element {{htmlelement("track")}}. <track> ha de ser col·locat dins <audio> o <video>, però després de tots els <source>. Utilitzar l'atribut {{htmlattrxref("kind","track")}} per especificar si els senyals són subtitles, captions o descriptions. A més, utilitzar {{htmlattrxref("srclang","track")}} per indicar al navegador l'idioma en què s'han escrit els subtítols.
    3. +
+ +

Heus aquí un exemple:

+ +
<video controls>
+    <source src="example.mp4" type="video/mp4">
+    <source src="example.webm" type="video/webm">
+    <track kind="subtitles" src="subtitles_en.vtt" srclang="en">
+</video>
+ +

Això resultarà un vídeo que mostrarà subtítols, agradable com aixó:

+ +

Video player with stand controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."

+ +

Per a més detalls, si us plau llegiu Afegir llegendes i subtitols a video HTML5. Es pot trobar l'exemple que acompanya aquest article a Github, escrit per Ian Devlin (veureu també el codi font .) En aquest exemple s'utilitza una mica de JavaScript per permetre als usuaris triar entre diferents subtítols. Recordeu que per activar els subtítols, cal prémer el botó "CC" i seleccionar una opció - English, Deutch o Español.

+ +
+

Nota: Les pistes de text també ajudan amb {{glossary("SEO")}}, ja que els motors de cerca prosperen especialment en el text. Les pistes de text, fins i tot, permeten que els motors de cerca enllacin directament a un lloc parcial a través del vídeo.

+
+ +

Aprenentatge actiu: Incrustar el nostre àudio i vídeo

+ +

Per a aquest aprenentatge actiu, ens agradaria (idealment) que sortíssiu al món i registréssiu alguns vídeos i àudio - la majoria dels telèfons, avui dia, permeten gravar àudio i vídeo molt fàcilment, i sempre es pot transferir al ordinador, ho podeu fer servir. Podria ser necessari fer una mica de conversió acabant amb un WebM i MP4 en el cas de vídeo, i un MP3 i Ogg en el cas de l'àudio, però hi ha suficients programes que permeten fer això sense masses problemes, com Miro Video Converter i Audacity. Ens agradaria que ho provéssiu!

+ +

Si no podeu tenir qualsevol font de vídeo o d'àudio, llavors sou lliures d'utilitzar els nostres arxius d'àudio i vídeo d'exemple per dur a terme aquest exercici. També es pot utilitzar el nostre codi d'exemple com a referència.

+ +

Ens agradaria que:

+ +
    +
  1. Guardar els arxius d'àudio i vídeo en un nou directori a l'equip.
    2. +
  2. Crear un nou arxiu HTML en el mateix directori, anomenat index.html.
    3. +
  3. Afegir els elements <audio> i <video> a la pàgina; fer que es mostrin els controls del navegador per defecte.
    4. +
  4. Proporcionar, a tots dos, elements <source> perquè els navegadors trobin el format d'àudio que millor suportin i carregar-lo. Aquests han d'incloure els atributs type.
    5. +
  5. Donar a l'element <vídeo> un cartell que es mostrarà abans que el vídeo comenci a ser reproduït. Divertir-vos creant el vostre cartell gràfic.
    6. +
+ +

Per a un bo addicional, es podria intentar investigar les pistes de text, i trobar la manera d'afegir una mica de subtítols al vídeo.

+ +

Sumari

+ +

I això és un embolcall; esperem que us hagi divertit jugar amb vídeo i àudio en les pàgines web! En el proper article, veurem altres formes d'inserir continguts a la web, utilitzant tecnologies com {{htmlelement("iframe")}} i {{htmlelement("object")}}.

+ +

Veure

+ + + +

{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}

+ +
+
+ + diff --git "a/files/ca/learn/html/multim\303\250dia_i_incrustar/afegir_gr\303\240fics_vectorials_a_la_web/index.html" "b/files/ca/learn/html/multim\303\250dia_i_incrustar/afegir_gr\303\240fics_vectorials_a_la_web/index.html" deleted file mode 100644 index feaf09c048..0000000000 --- "a/files/ca/learn/html/multim\303\250dia_i_incrustar/afegir_gr\303\240fics_vectorials_a_la_web/index.html" +++ /dev/null @@ -1,287 +0,0 @@ ---- -title: Afegir gràfics vectorials a la Web -slug: Learn/HTML/Multimèdia_i_incrustar/Afegir_gràfics_vectorials_a_la_Web -tags: - - Beginner - - Graphics - - Guide - - HTML - - Images - - Learn - - Raster - - SVG - - Vector - - iframe - - img -translation_of: Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}
- -
-

Els gràfics vectorials són molt útils en moltes circumstàncies - tenen una grandària d'arxiu reduït i són altament escalables, de manera que no pixelen en acostar-ho o ampliar-se a una grandària gran. En aquest article et mostrarem com incloure un en la vostra pàgina web.

-
- - - - - - - - - - - - -
Requisits previs:Conèixer els conceptes bàsics d'HTML i com inserir una imatge en el document.
Objectiu:Aprendre com incrustar una imatge SVG (vector) en una pàgina web.
- -
-

Nota: Aquest article no té la intenció d'ensenyar SVG; just el que és, i com afegir-lo a pàgines web.

-
- -

Què són els gràfics vectorials?

- -

A la web, treballarem amb dos tipus d'imatges - imatges de trama (raster) i imatges vectorials:

- - - -

Per donar-vos una idea de la diferència entre els dos, veurem un exemple. Podeu trobar aquest exemple en el nostre repositori Github com a vector-versus-raster.html - mostra dues imatges costat a costat aparentment idèntiques, una estrella vermella amb una ombra negre. La diferència és que el de l'esquerra és un PNG, i la dreta és una imatge SVG.

- -

Two star images, one raster and one vector. At their default size they look identical

- -

La diferència es fa evident quan s'amplia la pàgina: la imatge PNG es pixela a mesura que s'amplia, ja que conté informació sobre on ha d'estar cada píxel (i quin color); quan s'amplia, cada píxel augmenta de grandària per emplenar múltiples píxels en la pantalla, per la qual cosa la imatge comença a veure's bloquejada.La imatge vectorial, no obstant això, segueix lluint agradable i nítida, ja que no importa la grandària que sigui, els algorismes s'utilitzen per elaborar les formes en la imatge, amb els valors simplement s'escalen a mesura que es fa més gran

- -

Two star images zoomed in. The raster one on the left starts to look pixellated, whereas the vector one still looks crisp.

- -

D'altra banda, els arxius d'imatge vectorial són molt més lleugers que els seus equivalents trama, ja que només necessiten tenir un grapat d'algorismes, en lloc d'informació sobre cada píxel de la imatge individualment.

- -

Què és SVG?

- -

SVG és un llenguatge basat en {{glossary("XML")}} per descriure imatges vectorials. Es bàsicament de marcat, com HTML, excepte que té molts elements diferents per a la definició de les formes que volem que apareguin a la imatge, i els efectes que volem aplicar a aquestes formes. SVG és per marcar els gràfics, no el contingut. Al final de l'espectre més simple, tenim elements per a la creació de formes simples, com {{svgelement("circle")}} i {{svgelement("rect")}}. Més característiques avançades de SVG inclouen {{svgelement("feColorMatrix")}} (transforma colors utilitzant una matriu de transformació,) {{svgelement("animate")}} (animar parts d'un gràfic vectorial,) i {{svgelement("mask")}} (aplicar una màscara sobre la part superior de la imatge.)

- -

Com a simple exemple, el codi següent crea un cercle i un rectang

- -
<svg version="1.1"
-     baseProfile="full"
-     width="300" height="200"
-     xmlns="http://www.w3.org/2000/svg">
-  <rect width="100%" height="100%" fill="black" />
-  <circle cx="150" cy="100" r="90" fill="blue" />
-</svg>
- -

Això crea el següent resultat:

- -

{{ EmbedLiveSample('What_is_SVG', 300, 200) }}

- -

L'exemple anterior, donava la impressió que SVG és fàcil de codifca manualment. Sí, es pot codifca manualment un simple SVG en un editor de text, però per una imatge complexa comença ràpidament a ser molt difícil. Per a la creació d'imatges SVG, la majoria de la gent utilitza un editor de gràfics vectorials com Inkscape o Illustrator. Aquests paquets permeten crear una varietat d'il·lustracions utilitzant diverses eines de gràfics, i crear aproximacions de fotos (per exemple, funció Traçar mapa de bits de l'Inkscape).

- -

SVG té algunes avantatges addicionals a més de les descrites fins al moment:

- - - -

Llavors, per què algú vol utilitzar gràfics de trama sobre SVG? Bé, SVG té alguns desavantatges:

- - - -

Els gràfics de trama són sens dubte millor per a les imatges de precisió complexes, com ara fotos, per les raons descrites anteriorment.

- -
-

Nota: En Inkscape, guardar els arxius com Plain SVG per estalviar espai. També, si us plau referiu-vos a aquest article que descriu com preparar SVGs per a la Web.

-
- -

Afegir SVG a les vostres pàgines

- -

En aquesta secció veurem les diferents formes en què es poden afegir gràfics vectorials SVG a les vostres pàgines web.

- -

La forma més ràpida : {{htmlelement("img")}}

- -

Per incrustar un SVG mitjançant un element {{htmlelement("img")}}, només s'ha de fer referència a ell en l'atribut src, com es podria esperar. Necessitarem un atribut height o width (o tots dos si el SVG no té cap relació d'aspecte inherent). Si no ho heu fet ja, si us plau llegiu les imatges en HTML.

- -
<img
-    src="equilateral.svg"
-    alt="triangle with all three sides equal"
-    height="87px"
-    width="100px" />
- -

Pros

- - - -

Contres

- - - -

Solució de problemes i compatibilitat entre navegadors

- -

Per donar suport als navegadors SVG que no suporten SVG (IE 8 i per sota, Android 2.3 i per sota), es pot fer referència a un PNG o JPG des de l'atribut src i utilitzar un atribut {{htmlattrxref("srcset", "img")}} (que només reconeixen els navegadors recents) per fer referència al SVG. Sent aquest el cas, només els navegadors compatibles carregaran el SVG - els navegadors més antics carregaran el PNG en lloc d'un altre:

- -
<img src="equilateral.png" alt="triangle with equal sides" srcset="equilateral.svg">
- -

També es pot utilitzar el SVGs com imatges de fons de CSS, com es mostra a continuació. En el codi següent, els navegadors antics es pegaran amb el PNG que entenen, mentre que els nous navegadors carregaran el SVG:

- -
background: url("fallback.png") no-repeat center;
-background-image: url("image.svg");
-background-size: contain;
- -

Igual que el mètode <img> descrit anteriorment, la inserció d'SVGs utilitzant imatges de fons CSS vol dir que el SVG no pot ser manipulat amb JavaScript, i també està subjecta a les mateixes limitacions de CSS.

- -

Si els SVGs no es mostren en absolut, pot ser que el servidor no estigui configurat correctament. Si aquest és el problema, aquest article us orientarà en la direcció correcta.

- -

Com incloure el codi SVG dins del vostre HTML

- -

També es pot obrir el fitxer SVG en un editor de text, copiar el codi SVG, i enganxar-lo en el vostre document HTML - això de vegades es diu posar en  línia SVG, o inlining SVG. Assegureu-vos que el fragment de codi SVG comença i acaba amb les etiquetes <svg></svg> (no incloure res fora d'aquestes). Aquí hi ha un exemple molt simple del que es pot enganxar en el vostre document:

- -
<svg width="300" height="200">
-    <rect width="100%" height="100%" fill="green" />
-</svg>
-
- -

Pros

- - - -

Contres

- - - - - -

Com incrustar un SVG amb un {{htmlelement("iframe")}}

- -

Es poden obrir imatges SVG en el navegador de la mateixa manera que les pàgines web. Així que la incrustació d'un document SVG amb un <iframe> es fa de la mateixa manera que l'estudiat en Des de <object> a <iframe> - altres tecnologies d'incrustació.

- -

Aquí teniu una ullada ràpida:

- -
<iframe src="triangle.svg" width="500" height="500" sandbox>
-    <img src="triangle.png" alt="Triangle with three unequal sides" />
-</iframe>
- -

Això en definitiva no és el millor mètode per triar:

- -

Contres

- - - -

Aprenentatge actiu: Jugar amb SVG

- -

En aquesta secció d'aprenentatge actiu ens agradaria que simplement juguéssiu amb una mica de SVG per diversió. A la secció d'entrada de sota veureu que us hem proporcionat algunes mostres perquè pugueu començar. També podeu anar a SVG Element Reference, per conèixer més detalls sobre altres joguines que es poden utilitzar en SVG, i provar-les també. Aquesta secció és, sobre tot, la pràctica de les vostres habilitats d'investigació, i que té una mica de diversió.

- -

Si us quedeu encallats i no podeu aconseguir que funcioni el vostre codi, sempre el podeu restablir amb el botó Reset.

- - - -

{{ EmbedLiveSample('Playable_code', 700, 600) }}

- -

Sumari

- -

En aquest article se us ha proporcionat un viatge ràpid del que són gràfics vectorials i SVG, perquè són útils conèixer-los, i com s'inclouen els SVG dins de les pàgines web. Mai hem tingut la intenció de que fos una guia completa per a l'aprenentatge SVG, només un punter perquè conegueu que és SVG, per si us els trobeu en el vostres viatjes al voltant de la web. Així que no us preocupeu si no us sentiu, encara, com uns experts en SVG. Hem inclòs alguns enllaços, més a baix, que us podria ajudar-vos si voleu anar i esbrinar més sobre com funciona.

- -

En l'últim article d'aquest mòdul explorarem les imatges sensibles en detall, mirant les eines que té HTML, que us permetin fer que les vostres imatges funcionin millor a través de diferents dispositius.

- -

Veure

- - - -

{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}

diff --git "a/files/ca/learn/html/multim\303\250dia_i_incrustar/contingut_de_v\303\255deo_i_\303\240udio/index.html" "b/files/ca/learn/html/multim\303\250dia_i_incrustar/contingut_de_v\303\255deo_i_\303\240udio/index.html" deleted file mode 100644 index 5a8855df2b..0000000000 --- "a/files/ca/learn/html/multim\303\250dia_i_incrustar/contingut_de_v\303\255deo_i_\303\240udio/index.html" +++ /dev/null @@ -1,294 +0,0 @@ ---- -title: Contingut de vídeo i àudio -slug: Learn/HTML/Multimèdia_i_incrustar/Contingut_de_vídeo_i_àudio -tags: - - Article - - Audio - - Beginner - - Guide - - HTML - - Video - - captions - - subtitles - - track -translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}
- -

Ara que estem a gust afegint imatges senzilles a una pàgina web, el següent pas és començar a afegir els reproductors de vídeo i àudio als documents HTML! En aquest article veurem com es fa exactament això amb els elements {{htmlelement("video")}} i {{htmlelement("audio")}}; després acabarem mirant com afegir títols/subtítols als vídeos

- - - - - - - - - - - - -
Requisits previs:Coneixements bàsics d'informàtica, instal.lació programari bàsic, coneixements bàsics de treballar amb arxius, familiaritzar-se amb els fonaments HTML (com s'explica en Inici en HTML) i Imatges en HTML.
Objectiu:Aprendre com incrustar vídeo i àudio en una pàgina web, i afegir títols/subtítols a un vídeo.
- -

Àudio i vídeo a la web

- -

Els desenvolupadors web han volgut utilitzar vídeo i àudio a la web des de fa molt de temps, des de la dècada del 2000, quan vam començar a tenir un ample de banda prou ràpid com per suportar qualsevol tipus de vídeo (els arxius de vídeo són molt més grans que els de text o fins i tot les imatges). En els primers dies, les tecnologies web natives com HTML no tenien la capacitat d'integrar vídeo i àudio a la web, per la qual cosa les tecnologies propietàries (basades en el plug-in) com Flash (i més tard, Silverlight) es van fer populars per al maneig d'aquests continguts. Aquest tipus de tecnologia funcionan bé, però tenen una sèrie de problemes, incloent, que no funcionan bé amb les característiques HTML/CSS, problemes de seguretat i problemes d'accessibilitat.

- -

Una solució nativa resoldria gran part d'això si es feia bé. Afortunadament, uns anys més tard, l'especificació {{glossary("HTML5")}} havia afegit aquestes característiques, amb els elements {{htmlelement("video")}} i {{htmlelement("audio")}}, i alguns nous i brillants {{Glossary("JavaScript")}} {{Glossary("API","APIs")}} per controlar-los. No estarem veient JavaScript aquí - només els fonaments bàsics que es poden aconseguir amb HTML.

- -

No estem per ensenyar com produir arxius d'àudio i vídeo - aixó requereix un conjunt d'habilitats completament diferents. Us hem proporcionat unes mostres d'arxiu d'àudio i vídeo i codi d'exemple perquè pugueu experimentar, en cas que no pugueu aconseguir-ho vosaltres mateixos.

- -
-

Nota: Abans de començar aquí, també s'ha de saber que hi ha un bon nombre {{glossary("OVP","OVPs")}} (proveïdors de vídeo en línia) com YouTube, Dailymotion i Vimeo, i proveïdors d'àudio en línia com Soundcloud. Aquestes empreses ofereixen una forma còmoda i fàcil d'allotjar i consumir videos, pel que no ha de preocupar l'enorme consum d'ample de banda. OVP, fins i tot, en general, ofereix codi ja preparat per incrustar vídeo/àudio a les seves pàgines web. Si anem per aquest camí, es pot evitar algunes de les dificultats que es discuteixen en aquest article. Estarem discutint aquest tipus de servei, una mica més, en el proper article.

-
- -

L'element <video>

- -

L'element {{htmlelement("video")}} permet incrustar un vídeo molt fàcilment. Un exemple realment senzill és el següent:

- -
<video src="rabbit320.webm" controls>
-  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.webm">link to the video</a> instead.</p>
-</video>
- -

Les característiques de la nota són:

- -
-
{{htmlattrxref("src","video")}}
-
De la mateixa manera que l'element {{htmlelement("img")}}, l'atribut src conté una ruta d'accés al vídeo que es vol incrustar. Funciona exactament de la mateixa manera.
-
{{htmlattrxref("controls","video")}}
-
Els usuaris han de poder controlar la reproducció de vídeo i d'àudio (és especialment important per a les víctimes de l'epilepsia.) S'ha d'utilitzar l'atribut controls per incloure la pròpia interfície de control del navegador, o construir la interfície amb l'API JavaScript apropiat. Com a mínim, la interfície ha d'incloure una manera d'iniciar i aturar els medis i ajustar el volum.
-
El paràgraf dins de les etiquetes <video>
-
-

Això es coneix com a contingut alternatiu - aquest és mostrat si el navegador per accedir a la pàgina no és compatible amb l'element <video>, ens permet oferir una alternativa per a navegadors antics. Això pot ser qualsevol cosa; en aquest cas, hem proporcionat un enllaç directe a l'arxiu de vídeo, de manera que l'usuari pogui, almenys, tenir accés a ell, d'alguna manera, independentment de quin navegador estan fent servir.

-
-
- -

El vídeo incrustat es veurà semblant a això:

- -

A simple video player showing a video of a small white rabbit

- -

Podeu provar l'exemple viu aquí ( vegeu també el codi font.)

- -

Suport de múltiples formats

- -

Hi ha un problema amb l'exemple anterior, el qual us haureu adonat al intentar accedir a l'enllaç directe, anteriorment, amb un navegador com Safari o Internet Explorer. El vídeo no es reprodueix! Això és perquè diferents navegadors suporten diferents formats de vídeo (i àudio).

- -

Anem a través de la terminologia ràpidament. Formats com MP3, MP4 i WebM es diuen formats contenidors. Contenen diferents parts en què es compon la cançó o vídeo - com una pista d'àudio, una pista de vídeo (en el cas del vídeo), i les metadades per descriure els medis en que són presentats.

- -

Les pistes d'àudio i vídeo estan també en diferents formats, per exemple:

- - - -

Un reproductor d'àudio tendeix a reproduir una pista d'àudio directament, per exemple, un arxiu MP3 o Ogg. Aquests no necessiten contenidors.

- -
-

Nota: No és tan senzill, com es pot veure a la nostra taula de compatibilitat de còdec d'àudio i de vídeo. A més, molts navegadors de plataformes mòbils poden reproduir un format no suportat lliurant-ho al reproductor multimèdia del sistema subjacent per reproduir-ho. Però això ho farà ara com ara.

-
- -

Els formats anteriors existeixen per comprimir video i àudio en arxius manejables (el video i l'àudio en brut són molt grans). Els navegadors contenen diferents {{Glossary("Codec","Codecs")}}, com Vorbis o H.264, que s'utilitzen per convertir el so comprimit i el vídeo en dígits binaris i a l'inrevés. Com hem indicar anteriorment, els navegadors per desgràcia no tots suporten als mateixos còdecs, pel que s'haurà de proporcionar diversos arxius per a cada producció de medis. Si falta el còdec adequat per descodificar el medi, simplement no es reproduirà.

- -
-

Nota: És possible que ens pregunten per què existeix aquesta situació. MP3 (per a àudio) i MP4/H.264 (per a vídeo) són àmpliament recolzats, i de bona qualitat. No obstant això, també són gravats per patents - patents nord-americanes que cobreixen MP3 fins almenys 2017, i H.264 fins 2027 com molt aviat, el que significa que els navegadors que no tenen la patent han de pagar grans summes de diners per recolzar aquests formats. A més, moltes persones eviten el programari restringit en principi, a favor dels formats oberts. Aquesta és la raó per la qual hem de proporcionar múltiples formats per a diferents navegadors.

-
- -

Llavors, com fem això? Fer una ullada a el següent exemple actualitzat (prova-ho qui viu aquí, també):

- -
<video controls>
-  <source src="rabbit320.mp4" type="video/mp4">
-  <source src="rabbit320.webm" type="video/webm">
-  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
-</video>
- -

Aquí hem pres l'atribut src fora de l'etiqueta <video> actual, i en el seu lloc hem inclòs elements {{htmlelement("source")}}, per separat, que apunten a les seves pròpies fonts. En aquest cas, el navegador va a través dels elements <source> i reprodueix el primer còdec que té que donar suport. Incloent les fonts de WebM i MP4 hauria de ser suficient per reproduir els vídeos a la majoria de plataformes i navegadors actuals.

- -

Cada element <source> també té un atribut type. Aquest és opcional, però s'aconsella que s'inclogui - conté el {{glossary("MIME type","MIME types")}} dels arxius de vídeo i els navegadors poden llegir aquests i saltar immediatament els vídeos que no entenen. Si no està inclòs, els navegadors carregan i tractan de reproduir cada arxiu fins a trobar un que funcioni, prenent encara més temps i recursos.

- -
-

Nota: El nostre article sobre els formats dels medis compatibles conté alguna cosa en comú {{glossary("MIME type","MIME types")}}.

-
- -

Altres característiques de <video>

- -

Hi ha una sèrie d'altres característiques que es poden incloure en un vídeo HTML5. Fer una ullada al nostre tercer exemple, a continuació:

- -
<video controls width="400" height="400"
-       autoplay loop muted
-       poster="poster.png">
-  <source src="rabbit320.mp4" type="video/mp4">
-  <source src="rabbit320.webm" type="video/webm">
-  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
-</video>
-
- -

Això ens donarà una sortida semblant alguna cosa com això:

- -

A video player showing a poster image before it plays. The poster image says HTML5 video example, OMG hell yeah! Les noves característiques són:

- -
-
{{htmlattrxref("width","video")}} and {{htmlattrxref("height","video")}}
-
Es pot controlar la mida del vídeo, ja sigui amb aquests atributs o amb {{Glossary("CSS")}}. En ambdós casos, els vídeos mantenen la seva relació amplada-alçada nativa - coneguda com la relació d'aspecte. Si la relació d'aspecte no es manté per les mides que s'hagin definit, el vídeo creixerà per omplir l'espai horitzontal, i l'espai sense omplir acabarà tinguen un color de fons sòlid per defecte.
-
{{htmlattrxref("autoplay","video")}}
-
Aquest atribut fa que l'inici d'àudio o vídeo es reprodueixi immediatament, mentre que la resta de la pàgina s'està carregant. Es recomana no utilitzar el vídeo en reproducció automàtica (o àudio) en els vostres llocs, ja que els usuaris poden trobar que és realment molest.
-
{{htmlattrxref("loop","video")}}
-
Aquest atribut fa que el vídeo (o àudio) comenci reproduir-se, de nou, cada vegada que acabi. Això també pot ser molest, de manera que només s'utilitzi quan sigui realment necessari.
-
{{htmlattrxref("muted","video")}}
-
Aquest atribut fa que el medi es reprodueixi amb el so desactivat per defecte.
-
{{htmlattrxref("poster","video")}}
-
Aquest atribut pren com a valor l'adreça URL d'una imatge, que es podrà veure abans de reproduir-se el vídeo. Està destinat a ser utilitzat per a una pantalla de presentació o de publicitat.
-
{{htmlattrxref("preload","video")}}
-
-

Aquest atribut s'utilitza en l'element per emmagatzemar en búfer arxius grans. Pot prendre un dels 3 valors:

- -
    -
  • "none" no emmagatzema l'arxiu en búfer
    • -
  • "auto" emmagatzema l'arxiu multimèdia en búfer
    • -
  • "metadata" només emmagatzema en búfer les metadades de l'arxiu
    • -
-
-
- -

Es pot trobar l'exemple anterior disponible per reproduir en viu en Github (també veureu el codi font.) Recordeu que no hem inclòs l'atribut de reproducció automàtica en la versió en viu - si el vídeo comença a reproduir-se tan aviat com es carrega la pàgina, no es veurà el cartell!

- -

L'element <audio>

- -

L'element {{htmlelement("audio")}} funciona exactament de la mateixa manera que l'element {{htmlelement("video")}}, amb algunes petites diferències com s'indica a continuació. Un exemple típic podria ser així:

- -
<audio controls>
-  <source src="viper.mp3" type="audio/mp3">
-  <source src="viper.ogg" type="audio/ogg">
-  <p>Your browser doesn't support HTML5 audio. Here is a <a href="viper.mp3">link to the audio</a> instead.</p>
-</audio>
- -

Això produeix alguna cosa, com el següent, en un navegador:

- -

A simple audio player with a play button, timer, volume control, and progress bar

- -
-

Nota: Es pot executar la demostració d'àudio en viu en Github (també veure el codi font reproductor d'àudio.)

-
- -

Aquest ocupa menys espai que un reproductor de vídeo, ja que no hi ha component visual - només ha de mostrar els controls per reproduir l'àudio. Altres diferències amb el vídeo HTML5 són els següents:

- - - -

A part d'això, <audio> suporta les mateixes característiques que <video> - reviseu les seccions anteriors per obtenir més informació sobre ells.

- -

Visualitzar pistes de text de vídeo

- -

Ara parlarem d'un concepte una mica més avançat que és molt útil conèixer. Moltes persones no poden o no volen escoltar el contingut d'àudio/vídeo que troben a la web, almenys en determinats moments. Per exemple:

- - - -

No seria agradable proporcionar a aquestes persones amb una transcripció de les paraules que es parla en l'àudio/vídeo? Bé, gràcies a vídeo HTML5, es pot amb el format WebVTT i l'element {{htmlelement("track")}}.

- -
-

Nota: "transcriure" i "transcripció" vol dir escriure les paraules parlades com a text.

-
- -

WebVTT és un format per escriure arxius de text que contenen diverses cadenes de text juntament amb metadades, així com a quina hora volem que en el video, es mostri cada cadena de text i fins i tot informació limitada d'estil/posicionament. Aquestes cadenes de text s'anomenen senyals, i també poden mostrar diferents tipus per a diferents propòsits, sent els més comuns:

- -
-
subtitles
-
Traduccions de material estranger, per a persones que no entenen les paraules pronunciades en l'àudio.
-
captions
-
Transcripcions sincronitzades de diàleg o descripcions de sons significatius, permeten a les persones que no poden sentir l'àudio entendre el que està passant.
-
timed descriptions
-
Text per a la conversió a àudio, serveix a les persones amb discapacitat visual.
-
- -

Un arxiu típic WebVTT es veurà així:

- -
WEBVTT
-
-1
-00:00:22.230 --> 00:00:24.606
-This is the first subtitle.
-
-2
-00:00:30.739 --> 00:00:34.074
-This is the second.
-
-  ...
-
- -

Perquè es visualitzi juntament amb la reproducció de medis HTML, cal:

- -
    -
  1. Guardar-ho com un arxiu .vtt en un lloc sensible.
    2. -
  2. Enllaçar al arxiu .vtt amb l'element {{htmlelement("track")}}. <track> ha de ser col·locat dins <audio> o <video>, però després de tots els <source>. Utilitzar l'atribut {{htmlattrxref("kind","track")}} per especificar si els senyals són subtitles, captions o descriptions. A més, utilitzar {{htmlattrxref("srclang","track")}} per indicar al navegador l'idioma en què s'han escrit els subtítols.
    3. -
- -

Heus aquí un exemple:

- -
<video controls>
-    <source src="example.mp4" type="video/mp4">
-    <source src="example.webm" type="video/webm">
-    <track kind="subtitles" src="subtitles_en.vtt" srclang="en">
-</video>
- -

Això resultarà un vídeo que mostrarà subtítols, agradable com aixó:

- -

Video player with stand controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."

- -

Per a més detalls, si us plau llegiu Afegir llegendes i subtitols a video HTML5. Es pot trobar l'exemple que acompanya aquest article a Github, escrit per Ian Devlin (veureu també el codi font .) En aquest exemple s'utilitza una mica de JavaScript per permetre als usuaris triar entre diferents subtítols. Recordeu que per activar els subtítols, cal prémer el botó "CC" i seleccionar una opció - English, Deutch o Español.

- -
-

Nota: Les pistes de text també ajudan amb {{glossary("SEO")}}, ja que els motors de cerca prosperen especialment en el text. Les pistes de text, fins i tot, permeten que els motors de cerca enllacin directament a un lloc parcial a través del vídeo.

-
- -

Aprenentatge actiu: Incrustar el nostre àudio i vídeo

- -

Per a aquest aprenentatge actiu, ens agradaria (idealment) que sortíssiu al món i registréssiu alguns vídeos i àudio - la majoria dels telèfons, avui dia, permeten gravar àudio i vídeo molt fàcilment, i sempre es pot transferir al ordinador, ho podeu fer servir. Podria ser necessari fer una mica de conversió acabant amb un WebM i MP4 en el cas de vídeo, i un MP3 i Ogg en el cas de l'àudio, però hi ha suficients programes que permeten fer això sense masses problemes, com Miro Video Converter i Audacity. Ens agradaria que ho provéssiu!

- -

Si no podeu tenir qualsevol font de vídeo o d'àudio, llavors sou lliures d'utilitzar els nostres arxius d'àudio i vídeo d'exemple per dur a terme aquest exercici. També es pot utilitzar el nostre codi d'exemple com a referència.

- -

Ens agradaria que:

- -
    -
  1. Guardar els arxius d'àudio i vídeo en un nou directori a l'equip.
    2. -
  2. Crear un nou arxiu HTML en el mateix directori, anomenat index.html.
    3. -
  3. Afegir els elements <audio> i <video> a la pàgina; fer que es mostrin els controls del navegador per defecte.
    4. -
  4. Proporcionar, a tots dos, elements <source> perquè els navegadors trobin el format d'àudio que millor suportin i carregar-lo. Aquests han d'incloure els atributs type.
    5. -
  5. Donar a l'element <vídeo> un cartell que es mostrarà abans que el vídeo comenci a ser reproduït. Divertir-vos creant el vostre cartell gràfic.
    6. -
- -

Per a un bo addicional, es podria intentar investigar les pistes de text, i trobar la manera d'afegir una mica de subtítols al vídeo.

- -

Sumari

- -

I això és un embolcall; esperem que us hagi divertit jugar amb vídeo i àudio en les pàgines web! En el proper article, veurem altres formes d'inserir continguts a la web, utilitzant tecnologies com {{htmlelement("iframe")}} i {{htmlelement("object")}}.

- -

Veure

- - - -

{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}

- -
-
- - diff --git "a/files/ca/learn/html/multim\303\250dia_i_incrustar/de_objecte_a_iframe_altres_tecnologies_incrustaci\303\263/index.html" "b/files/ca/learn/html/multim\303\250dia_i_incrustar/de_objecte_a_iframe_altres_tecnologies_incrustaci\303\263/index.html" deleted file mode 100644 index 0a69bc1d47..0000000000 --- "a/files/ca/learn/html/multim\303\250dia_i_incrustar/de_objecte_a_iframe_altres_tecnologies_incrustaci\303\263/index.html" +++ /dev/null @@ -1,318 +0,0 @@ ---- -title: De objecte a iframe - altres tecnologies d'incrustació -slug: >- - Learn/HTML/Multimèdia_i_incrustar/De_objecte_a_iframe_altres_tecnologies_incrustació -tags: - - Article - - Beginner - - CodingScripting - - Embedding - - Flash - - Guide - - HTML - - Learn - - Multimedia and embedding - - Object - - embed - - iframe -translation_of: Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding")}}
- -

Per ara, realment, s'aconseguit penjar coses incrustades en les pàgines web, incloent imatges, àudio i vídeo. En aquest punt ens agradaria fer un petit pas a banda, mirant a alguns elements que ens permetin introduir una àmplia varietat de tipus de contingut en les pàgines web: els elements {{htmlelement("iframe")}}, {{htmlelement("embed")}} i {{htmlelement("object")}}. Els <iframe>s són per incrustar altres pàgines web, i els altres dos, permeten incrustar arxius PDF, SVG, i fins i tot, flash - una tecnologia que està en camí de desaparèixer, però que encara es veu semi-regular.

- - - - - - - - - - - - -
Requisits Previs:Coneixements bàsics d'informàtica, programari bàsic instal.lat, coneixement bàsic de tractar amb arxius, familiaritat-se amb els fonaments d'HTML (com s'explica en Inici amb HTML) i els articles anteriors d'aquest mòdul.
Objectiu:Aprendre com inserir elements en pàgines web fent servir {{htmlelement("object")}}, {{htmlelement("embed")}} i {{htmlelement("iframe")}}, com pel·lícules Flash i altres pàgines web.
- -

Una breu història de la incrustació

- -

Fa molt de temps, a la web, era popular l'ús de marcs (frames) per crear llocs web - petites parts d'un lloc web que s'emmagatzemaven en pàgines HTML individuals. Aquests eran inserits en un document mestre anomenat conjunt de marcs (frameset), el que permetia especificar l'àrea de la pantalla de cada marc ple, com una manera de dimensionar columnes i files d'una taula. Aquests van ser considerats un súmmum de frescor a mitjans i finals dels 90, però no hi havia proves, que tenir la pàgina web dividida en trossos més petits com aquest era millor per la velocitat de descàrrega - sent especialment notable que les connexions de xarxa era tan lentes en aquell temps. Però, van tenir molts problemes, que sobrepassaven els aspectes positius com la velocitat de la xarxa, ara més ràpida, pel que ja no es veu la seva utilització.

- -

Una mica més tard (finals dels 90, principis de 2000), les tecnologies de plug-in es van fer molt populars, com els Java Applets i Flash - aixó va permetre els desenvolupadors web incrustar un contingut ric en pàgines web com vídeo i animacions, que simplement no estaven disponibles a través d'HTML. La incrustació d'aquestes tecnologies es va aconseguir mitjançant elements com {{htmlelement("object")}}, i el menys usat {{htmlelement("embed")}}, van ser molt útils a l'hora. Des de llavors, han caigut en desús a causa de molts problemes, inclosa l'accessibilitat, la seguretat, mida del fitxer, i més; avui dia la majoria dels dispositius mòbils no són compatibles amb aquest tipus de plugins, i el suport d'escriptori està en el camí de ser exclòs.

- -

Finalment, l'element {{htmlelement("iframe")}} va aparèixer (juntament amb altres formes d'inserir contingut, com {{htmlelement("canvas")}}, {{htmlelement("video")}}, etc.) Això va proporcionar una manera de incrustar un document web sencer dins d'un altre, com si es tractés d'un {{htmlelement("img")}} o un altre element, i s'utilitza regularment en l'actualitat.

- -

Sortint de la lliçó de la història, anem a seguir endavant i veure com utilitzar alguns d'aquests.

- -

Aprenentatge actiu: usos clàssics d'incrustació

- -

En aquest article saltarem directament a una secció d'aprenentatge actiu, per donar-vos immediatament una idea real del que les tecnologies d'incrustació són útils. El món en línia està molt familiaritzat amb Youtube, però moltes persones no saben sobre algunes dels mecanismes d'intercanvi que té disponibles. Vegem com Youtube ens permet incrustar un vídeo en qualsevol pàgina que ens agradi, utilitzant un {{htmlelement("iframe")}}.

- -
    -
  1. En primer lloc, anar a Youtube i trobar un vídeo que us agradi.
    2. -
  2. A continuació en el vídeo trobareu un botó Compartir - seleccioneu aquesta opció per mostrar les opcions d'ús compartit.
    3. -
  3. Seleccioneu l'opció Inserir i se us donarà un cert codi <iframe> - copieu aquest.
    4. -
  4. Inserir-lo en el quadre d'entrada de sota, i veureu quin és el resultat a la sortida.
    5. -
- -

Per als punts de bonificació, també es podria tractar d'insertar un Google Map en l'exemple:

- -
    -
  1. Aneu a Google Maps i trobar un mapa que us agradi.
    2. -
  2. Feu clic al "Hamburger Menu" (tres línies horitzontals) a la part superior esquerra de la interfície d'usuari.
    3. -
  3. Seleccioneu l'opció Compartir o insetar un mapa.
    4. -
  4. Seleccionar l'opció insertar un mapa, us donarà un cert codi <iframe> - copieu aquest.
    5. -
  5. Inserir-lo en el quadre d'entrada de sota, i veureu quin és el resultat a la sortida.
    6. -
- -

Si cometeu un error, sempre es pot restablir amb el botó de Reinici. Si aconseguiu realment queda encallats, feu clic al botó Mostra solució per veure una resposta.

- - - -

{{ EmbedLiveSample('Playable_code', 700, 600) }}

- -

Iframes en detall

- -

Per tant, això va ser fàcil i divertit oi? Els elements {{htmlelement("iframe")}} estan dissenyats per permetre inserir altres documents web dins del document actual. Això és molt bó per incorporar continguts de tercers al lloc web en que no es pot tenir control directe sobre i no es vol haver d'implementar la seva pròpia versió - com els vídeo de proveïdors de vídeo en línia, sistemas de comentarios como Disqus, mapes de proveïdors de mapes en línia, pancartes publicitaries, etc. Els exemples editables en directe que s'han estat usant a través d'aquest curs s'implementen utilitzant <iframe>s.

- -

Hi ha alguns {{anch("Problemes de seguretat")}} greus a considerar amb els <iframe>s, com veurem més endavant, però això no vol dir que no s'hagin d'utilitzar en els llocs web - només requereix una mica de coneixement i un raonament. Explorarem el codi en una mica més de detall. Digueu que voleu incloure en el glossari MDN en una de les seves pàgines web - podreu intentar alguna cosa com això:

- -
<iframe src="https://developer.mozilla.org/en-US/docs/Glossary"
-        width="100%" height="500" frameborder="0"
-        allowfullscreen sandbox>
-  <p> <a href="https://developer.mozilla.org/en-US/docs/Glossary">
-    Fallback link for browsers that don't support iframes
-  </a> </p>
-</iframe>
- -

Aquest exemple inclou els elements essencials bàsics necessaris per utilitzar un <iframe>:

- -
-
{{htmlattrxref('allowfullscreen','iframe')}}
-
Si s'estableix, el <iframe> és capaç de ser col·locat en la manera de pantalla completa amb Full Screen API (està fora de l'abast per a aquest article).
-
{{htmlattrxref('frameborder','iframe')}}
-
Si s'estableix en 1, això indica al navegador per establir una frontera entre aquest marc i altres marcs, que és el comportament per defecte. 0 elimina la frontera. L'ús d'aquest realment no es recomana més, ja que el mateix efecte es pot aconseguir, millor, mitjançant {{cssxref('border')}}: none; en el {{Glossary('CSS')}}.
-
{{htmlattrxref('src','iframe')}}
-
Aquest atribut, igual que amb {{htmlelement("video")}}/{{htmlelement("img")}}, conté una ruta que apunta a la URL del document per a ser incrustat.
-
{{htmlattrxref('width','iframe')}} i {{htmlattrxref('height','iframe')}}
-
Aquests atributs especifiquen l'amplada i l'alçada que es vol que tingui el iframe.
-
Contingut alternatiu
-
De la mateixa manera que altres elements similars com {{htmlelement("video")}}, pot incloure el contingut alternatiu entre les etiquetes d'obertura i tancament <iframe></iframe> que apareixeran si el navegador no suporta l'etiqueta <iframe>. En aquest cas hem inclòs un enllaç a la pàgina en el seu lloc. És poc probable trobar-se amb qualsevol navegador que no sigui compatible amb <iframe>s avui dia.
-
{{htmlattrxref('sandbox','iframe')}}
-
Aquest atribut, funciona en navegadors una mica més modern que la resta de les característiques <iframe> (per exemple, Internet Explorer 10 i superior) sol·licita la configuració de seguretat reforçada; direm més sobre això en la següent secció.
-
- -
-

Nota: Per tal de millorar la velocitat, és una bona idea establir l'atribut src de l'iframe amb JavaScript després que el contingut principal s'hagi carregat. Això fa que la pàgina s'utilitzi més aviat i disminueixi el temps de càrrega de la pàgina oficial (una mètrica important {{glossary("SEO")}}).

-
- -

Problemes de seguretat

- -

Esmentem abans els problemes de seguretat - Entrarem en això en detall, una mica més, ara. No esperem que es pugui entendre tot aquest contingut perfectament la primera vegada; només volem fer-vos conscients d'aquesta preocupació, i proporcionar una referència per tornar a mesura que tingueu més experiéncia i començar a considerar l'ús de <iframe>s en els vostres experiments i treball. A més, no hi ha necessitat de tenir por i no utilitza <iframe>s - només s'ha de tenir cura. Seguiu llegint...

- -

Els fabricants de navegadors i desenvolupadors web han après per les males que els iframes són un objectiu comú (terme oficial: attack vector) per a les persones dolentes a la web (sovint anomenat hackers, o més exactament, crackers) per atacar, si estan tractant de modificar maliciosament la vostre pàgina web, o enganyar a la gent a fer alguna cosa que no volen fer, com revelar informació sensible com noms d'usuari i contrasenyes. A causa d'això, els enginyers d'especificacions i els desenvolupadors de navegadors han desenvolupat diversos mecanismes de seguretat per fer <iframe>s més segurs, i també estan les millors pràctiques a tenir en compte - anem a cobrir alguns d'aquests a continuació.

- -
-

{{interwiki('wikipedia','Clickjacking')}} és un tipus d'atac iframe comú on els pirates informàtics incrustan un iframe invisible en el document (o incrustan el document en el seu propi lloc web maliciós) i el fan servir per capturar les interaccions dels usuaris. Aquesta és una forma comuna de confondre als usuaris o robar dades confidencials.

-
- -

Un exemple ràpid, primer - intenteu carregar l'exemple anterior, mostrat previament, en el vostre navegador - es pot trobar en Github (veure el codi font també). No veureu, realment, res que apareigui a la pàgina, i si ens fixem en la consola en les eines de desevolupament del navegador, veureu un missatge que us indica perquè. En Firefox, se hos dirá, càrrega denegada per X-Frame-Options: https://developer.mozilla.org/en-US/docs/Glossary, no permet marcs. Això es deu al fet que els desenvolupadors que van construir MDN han inclòs una configuració al servidor que serveix a les pàgines del lloc web de no permetre que siguin incrustades a l'interior de <iframe>s (veure {{anch("Configure CSP directives")}}, més avall). Això té sentit - una pàgina sencere MDN no té molt sentit incrustar-la en altres pàgines, llevat que es vulgui fer alguna cosa com incrustar-la el vostre lloc i reclamar-les com a propies - o l'intent de robatori de dades a través de clickjacking, que són alhora coses molt dolentes, que es poden fer. A més, si tothom comences a fer això, tot l'ample de banda addicional començaria a costar-li molts diners a Mozilla.

- -

Només incrustar quan sigui necessari

- -

De vegades té sentit incrustar el contingut de tercers - com vídeos i mapes youtube - però ens podem estalviar molts mals de cap si només incrusten contingut de tercers quan sigui completament necessari. Una bona regla d'or per a la seguretat web és "Mai es pot ser massa cautelós. Si ho heu fet, torneu a comprovar-ho de totes maneres. Si algú més ho ha fet, se suposa que és perillós fins que es demostri el contrari".

- -
-

A més de la seguretat, també s'ha d'estar al tant de les qüestions de la propietat intel·lectual. La majoria dels continguts té drets d'autor, fora de línia i en línia, fins i tot continguts que no us ho espereu (per exemple, la majoria de les imatges de Wikimedia Commons). Mai mostrar el contingut de la vostra pàgina web a menys que el propietari o els propietaris hagin donat per escrit, l'autorització inequívoca. Les sancions per infracció de drets d'autor són greus. Un cop més, mai es pot ser massa cautelós.

- -

Si el contingut és llicenciat, s'ha d'obeir els termes de la llicència. Per exemple, el contingut MDN és sota llicència CC-BY-SA. Això vol dir, que s'ha d'acreditar adequadament quan se cita el nostre contingut, fins i tot si es realitzen canvis substancials.

-
- -

Utilitzar HTTPS

- -

{{Glossary("HTTPS")}} és la versió encriptada de {{Glossary("HTTP")}}. S'h de fer servir, HTTPS, en els vostres llocs web sempre que sigui possible:

- -
    -
  1. HTTPS redueix la possibilitat que el contingut remot hagi estat manipulat en trànsit,
    2. -
  2. HTTPS impedeix que el contingut incrustat accedeixi al contingut del vostre document principal, i viceversa.
    3. -
- -

L'ús d'HTTPS requereix un certificat de seguretat, que pot ser car (encara que Let's Encrypt facilita les coses) - si no es pot aconseguir un, es pot fer servir el document principal amb HTTP. No obstant això, a causa del segon benefici descrit anteriorment sobre HTTPS , no importa el que costi, mai s'ha de incrustar contingut de tercers amb HTTP. (En el millor dels casos, el navegador web de l'usuari donarà un advertiment de por). Totes les empreses de renom que fan que el contingut disponible vagi incrustar a través d'un <iframe> ho farà disponible a través d'HTTPS - mirar les URL dins de l'atribut src d'<iframe> quan està incrustant contingut de Google Maps o Youtube, per exemple.

- -
-

Nota: Les pàgines de Github permeten que el contingut se serveixi a través d'HTTPS de forma predeterminada, per la qual cosa és útil per allotjar contingut. Si utilitzeu altre allotjament i no esteu segurs, consulteu al vostre proveïdor d'allotjament, sobre això.

-
- -

Utilitzar sempre l'atribut sandbox

- -

Si es vol donar als atacants poc poder, com sigui possible, per fer coses dolentes al vostre lloc web, s'ha de donar els continguts incrustats, només, els permisos necessaris per realitzar-lo. Per descomptat, això també, s'aplica al vostre propi contingut. Un contenidor de codi el qual es pot utilitzar apropiadament - o per a les proves - però no pot causar cap mal a la resta de la base del codi (ja sigui accidental o maliciós) s'anomena sandbox.

- -

El contingut sense sandbox pot fer molt (l'execució de JavaScript, l'enviament de formularis, finestres emergents, etc.) Per defecte s'ha d'imposar totes les restriccions disponibles mitjançant l'atribut sandbox  sense paràmetres, com es mostra en l'exemple anterior.

- -

Si és absolutament necessari, es pot afegir permisos de tornada un per un (dins del valor d'atribut sandbox ="" ) - veure la referència d'entrada {{htmlattrxref('sandbox','iframe')}} per a totes les opcions disponibles. Una nota important és que mai s'ha d'afegir tant allow-scripts i allow-same-origin al seu atribut sandbox - en aquest cas el contingut incrustat podria passar per alt la mateixa política de seguretat d'origen que deté l'execució de scripts de llocs i l'ús de JavaScript per desactivar completament la sandbox.

- -
-

Nota: La Sandboxing no proporciona cap protecció si els atacants poden enganyar a la gent perquè visiti el contingut maliciós directament (fora d'un iframe). Si hi ha alguna possibilitat que cert contingut pot ser maliciós (per exemple, el contingut generat per l'usuari), si us plau feu servir un {{glossary("domini")}} diferent del vostre lloc principal.

-
- -

Configurar directives CSP

- -

La {{Glossary("CSP")}} representa la content security policy, i proporciona un conjunt de capçaleres HTTP (metadades enviades juntament amb les seves pàgines web quan es serveixen des d'un servidor web) dissenyades per millorar la seguretat del document HTML. Quan es tracta de protegir <iframe>s, es pot configurar el servidor per a enviar una capçalera X-Frame-Options apropiada. Això pot evitar que altres llocs web incrustin el seu contingut en les vostres pàgines web (el que permetria {{interwiki('wikipedia','clickjacking')}} i una sèrie d'altres atacs), que és exactament el que els desenvolupadors MDN han fet, com hem vist anteriorment.

- -
-

Nota: Es pot llegir el post de Frederik Braun On the X-Frame-Options Security Header per obtenir més informació d'antecedents sobre aquest tema. Òbviament, està fora de l'abast, per a una explicació completa, d'aquest article.

-
- -

Els elements <embed> i <object>

- -

Els elements {{htmlelement("embed")}} i {{htmlelement("object")}}  compleixen una funció diferent a {{htmlelement("iframe")}} - aquests elements de propòsit general són eines d'inserció per a la incrustació de diversos tipus de contingut extern, que inclouen tecnologies de complements com els applets de Java i flash, PDF (es pot mostrar en un navegador amb un plugin PDF), i fins i tot el contingut com vídeos, SVG i les imatges!

- -
-

Nota: Un plugin és un programari que proporciona accés als continguts del navegador que no pot llegir de forma nativa.

-
- -

No obstant això, és poc probable que utilitzeu molt aquests elements - Els applets no s'han utilitzat durant anys, Flash ja no és molt popular, a causa d'una sèrie de raons (veure {{anch("El cas contra els complements")}}, més endavant), els arxius PDF tendeixen a estar millor enllaçats que incrustats, i altres continguts com a imatges i video tenen elements molt millors i més fàcils de manejar. Plugins i aquests mètodes d'incrustació són realment una tecnologia heretada, i els estem esmentant principalment en cas que us trobeu amb ells en certes circumstàncies com a intranets o projectes empresarials.

- -

Si necessiteu incorporar contingut de plugin, aquest és el tipus d'informació que necessitareu, com a mínim:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 {{htmlelement("embed")}}{{htmlelement("object")}}
{{glossary("URL")}} del contingut incrustat{{htmlattrxref('src','embed')}}{{htmlattrxref('data','object')}}
accurate {{glossary("MIME type", 'media type')}} del contingut incrustat{{htmlattrxref('type','embed')}}{{htmlattrxref('type','object')}}
l'altura i l'amplada (en píxels CSS) de la caixa controlada pel complement{{htmlattrxref('height','embed')}}
- {{htmlattrxref('width','embed')}}		{{htmlattrxref('height','object')}}
- {{htmlattrxref('width','object')}}
noms i valors, per alimentar el complement com paràmetresatributs ad hoc amb els noms i valorselements d'una sola etiqueta {{htmlelement("param")}}, continguts dins <object>
Contingut HTML independent com a recurs alternatiu per a un recurs no disponibleNo suportat (<noembed> és obsolet)contingut dins <object>, després d'elements <param>
- -
-

Nota: <object> requereix un atribut data, un atribut type, o tots dos. Si s'utilitzant ambdòs, també es pot utilitzar l'atribut {{htmlattrxref('typemustmatch','object')}} (només implementat en Firefox, a partir d'aquest escrit). typemustmatch mante l'arxiu incrustat a que s'executi llevat que l'atribut type proporcioni el tipus de medi correcte. Per tant, typemustmatch pot conferir beneficis significatius de seguretat quan està incrustar el contingut d'un {{glossary("origen")}} diferent (pot mantenir els atacants d'executar scripts arbitràries mitjançant el complement).

-
- -

Heus aquí un exemple que utilitza l'element {{htmlelement("embed")}} per  incrustar una pel lícula Flash (veure aquest en Github i comprovar el codi font també):

- -
<embed src="whoosh.swf" quality="medium"
-       bgcolor="#ffffff" width="550" height="400"
-       name="whoosh" align="middle" allowScriptAccess="sameDomain"
-       allowFullScreen="false" type="application/x-shockwave-flash"
-       pluginspage="http://www.macromedia.com/go/getflashplayer">
- -

Bastant horrible, no ho és. El HTML generat per l'eina d'Adobe Flash tendia a ser encara pitjor, l'ús d'un element <object> amb un element <embed> incrustat en ell, per cobrir totes les bases (fes un cop d'ull a un exemple). El flaix fins i tot va ser utilitzat amb èxit com a contingut alternatiu a HTML5 de vídeo, per un temps, però això cada vegada es veu més innecessari.

- -

Ara veurem un exemple <object>, que insereix un PDF en una pàgina (vegeu l'exemple en viu i el codi font):

- -
<object data="mypdf.pdf" type="application/pdf"
-        width="800" height="1200" typemustmatch>
-  <p>You don't have a PDF plugin, but you can <a href="myfile.pdf">download the PDF file.</a></p>
-</object>
- -

Els PDFs eren un pas necessari entre el paper i el digital, però plantegen molts reptes d'accessibilitat i poden ser difícils de llegir en pantalles petites. Encara tendeixen a ser popular en alguns cercles, però és molt millor enllaçar-los perquè puguin ser descarregats o llegits en una pàgina separada, en lloc de incrustar-los en una pàgina web.

- -

El cas en contra dels complements (plugins)

- -

Hi havia una vegada, que els complements (plugins) eran indispensables a la web. Recordeu els dies en què calia instal·lar Adobe Flash Player, només, per veure una pel·lícula en línia? Llavors teníem constantment alertes molestes sobre l'actualització de Flash Player i el seu entorn d'execució de Java. Les tecnologies web han crescut molt més robustes, i aquells dies s'han acabat. Per a la majoria de les aplicacions, és hora que deixin de lliurar contingut que depenguin dels complements (plugins), i comencin a prendre avantatge de les tecnologies web al seu lloc.

- - - -

Llavors, què s'ha de fer? Si es necessita interactivitat, HTML i {{glossary("JavaScript")}} ens pot donar fàcilment la feina feta sense necessitat d'applets de Java o  tecnologia obsoleta ActiveX/BHO. En lloc de confiar en Adobe Flash, podem utilitzar vídeo HTML5 per les necessitats media, per a gràfics vectorials SVG i Canvas per a imatges i animacions complexes. Peter Elst escrivia fa uns anys que Adobe Flash no sol ser l'eina adequada per al treball, excepte per a jocs i aplicacions empresarials especialitzades. Pel que fa a ActiveX, fins i tot el navegador Microsoft {{glossary("Microsoft Edge","Edge")}} ja no ho suporta.

- -

Sumari

- -

El tema de la incrustació d'altres continguts en els documents web, de forma ràpida, pot arribar a ser molt complex, pel qual en aquest article hem tractat d'introduir d'una manera simple i familiar el que us pogui semblar d'una rellevancia immediata, mentre en seguit fent al·lusió a algunes de les característiques més avançades de les tecnologies involucrades. Per començar, és probable que feu servir la incrustació molt més enllà, inclouent continguts de tercers com mapes i vídeos en les vostres pàgines. A mesura que adquiriu més experiència, és probable que comenceu a trobar més usos per a ells.

- -

Hi ha moltes altres tecnologies que impliquen la incrustació de continguts externs a més dels que hem tractat aquí. Vam veure alguns, en els articles anteriors, com {{htmlelement("video")}}, {{htmlelement("audio")}} i {{htmlelement("img")}}, però hi ha altres a descobrir, com {{htmlelement("canvas")}} per generar en JavaScript gràfics 2D i 3D, i {{htmlelement("svg")}} per a incrustar gràfics vectorials. Aviat ens ocuparem de SVG en l'article següent del mòdul.

- -

{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding")}}

diff --git "a/files/ca/learn/html/multim\303\250dia_i_incrustar/images_in_html/index.html" "b/files/ca/learn/html/multim\303\250dia_i_incrustar/images_in_html/index.html" deleted file mode 100644 index 839a38b400..0000000000 --- "a/files/ca/learn/html/multim\303\250dia_i_incrustar/images_in_html/index.html" +++ /dev/null @@ -1,373 +0,0 @@ ---- -title: Imatges en HTML -slug: Learn/HTML/Multimèdia_i_incrustar/Images_in_HTML -tags: - - Article - - Beginner - - Guide - - HTML - - Image - - alt text - - captions - - figcaption - - figure - - img -translation_of: Learn/HTML/Multimedia_and_embedding/Images_in_HTML ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}
- -

Al principi, la web era només text, i resultava molt avorrit. Afortunadament, no va passar gaire temps abans que s’afegís la capacitat d'incrustar imatges (i altres tipus de continguts més interessants) dins de les pàgines web. Hi ha altres tipus de mitjans multimèdia a tenir en compte, però és lògic començar amb l'humil element {{HTMLElement("img")}}, que s'utilitza per a incrustar en una pàgina web una imatge simple . En aquest article veurem com utilitzar-lo en profunditat, incloent els conceptes bàsics, com anotar-la amb llegendes amb l’element {{htmlelement("figure")}}, i com es relaciona amb les imatges de fons de CSS.

- - - - - - - - - - - - -
Requisits previs:Coneixements bàsics d'informàtica, instal·lació de software bàsic, coneixements bàsics de treballar amb arxius, familiaritat amb els fonaments de l’HTML (que exposen en l’article Introducció a l’HTML.)
Objectiu:Aprendre a incrustar imatges simples en HTML i comentar-les amb llegendes, i com es relacionen les imatges HTML amb les imatges de fons CSS.
- -

Posar una imatge en una pàgina web

- -

Per posar una imatge simple en una pàgina web, s'utilitza l'element {{htmlelement("img")}}. Es tracta d’un element buit (que significa que no té contingut de text o etiqueta de tancament) que requereix un mínim d'un atribut per a ser útil: src (de vegades se l’anomena pel nom complet, source). L'atribut src conté una ruta que apunta a la imatge que es vol incrustar a la pàgina, que pot ser una adreça URL relativa o absoluta, de la mateixa manera que en l'element {{htmlelement("a")}} el valor de l'atribut href.

- -
-

Nota: Fes una lectura de la guia ràpida a les adreces i rutes per refrescar la memòria abans de continuar.

-
- -

Així, per exemple, si la imatge es diu dinosaur.jpg i és en el mateix directori que la pàgina HTML, la imatge es podria incloure d'aquesta manera:

- -
<img src="dinosaur.jpg">
- -

Si la imatge és en un subdirectori d'imatges dins del mateix directori que la pàgina HTML (que és el que Google recomana per a propòsits de posicionament en cercadors ({{glossary("SEO")}}) / indexació), llavors s'incrusta així:

- -
<img src="images/dinosaur.jpg">
- -

I així succesivament.

- -
-

Nota: Els motors de cerca també llegeixen els noms d'arxiu d'imatge i els tenen en compte en termes de SEO; per tant, s'ha de donar a la imatge un nom d'arxiu que sigui descriptiu (dinosaur.jpg és millor que img835.png.)

-
- -

La imatge es pot incloure utilitzant la seva adreça URL absoluta, per exemple:

- -
<img src="https://www.example.com/images/dinosaur.jpg">
- -

Però això no té sentit perquè el navegador té més feina a buscar l'adreça IP del servidor de nou, etc. Gairebé sempre, les imatges del lloc web es mantenen en el mateix servidor que l'HTML.

- -
-

Atenció: La majoria de les imatges tenen drets de propietat intelectual. No mostris una imatge a la pàgina web si no és que

- - - -

Les infraccions dels drets d'autor són il·legals i antiétiques. A més, no incloguis mai en l'atribut src una adreça url que apunti cap a una imatge que estigui allotjada en la pàgina web d'algú, si no tens permís per a enllaçar-la. D’això, se’n diu hotlinking i, un cop més, robar ample de banda d'algú altre és il·legal. També redueix la velocitat de la pàgina, i no tens control sobre la imatge si l’eliminen o la substitueixen per alguna altra cosa que et podria resultar enutjosa.

-
- -

El codi anterior donaria el resultat següent:

- -

Imatge bàsica d’un dinosaure incrustada en un navegador, amb el text Images in HTML escrit a dalt

- -
-

Nota: Els elements com {{htmlelement("img")}} i {{htmlelement("video")}} es denominen de vegades elements reemplaçats, perquè el contingut i la mida de l'element el defineix un recurs extern (com una imatge o un arxiu de vídeo), no el contingut propi de l’element.

-
- -
-

Nota: Pots trobar l'exemple acabat al final d'aquesta secció, executat a GitHub (consulta’n també el codi font.)

-
- -

Text alternatiu

- -

L’atribut següent que veurem és alt. El valor d’aquest atribut se suposa que és una descripció textual de la imatge, que s’utilitza en situacions en què la imatge no es pot veure/representar. Per exemple, el codi anterior es pot modificar d'aquesta manera:

- -
<img src="images/dinosaur.jpg"
-     alt="The head and torso of a dinosaur skeleton;
-          it has a large head with long sharp teeth">
- -

La manera més senzilla de provar el text alternatiu és escriure malament el nom de l'arxiu. Si, per exemple, escrius el nom de la imatge així: dinosooooor.jpg, el navegador no mostrarà la imatge; en lloc d’ella, mostrarà el text alternatiu.

- -

El títol Images in HTML, però aquesta vegada la imatge del dinosaure no es mostra i en lloc de la imatge apareix el text alternatiu.

- -

Llavors, per què hauries de veure o necessitar mai el text alternatiu? Pot ser útil en diverses situacions:

- - - -

Què s'ha d'escriure exactament dins de l'atribut alt? En primer lloc, depèn de per què la imatge és allà (en altres paraules, què es perd si la imatge no es mostra):

- - - -

La clau està en oferir una experiència d’usabilitat fins i tot quan les imatges no es poden veure, en què els usuaris no perdin cap dels continguts. Desactiva les imatges en el navegador i observa com són les coses. De seguida t’adonaràs de com són d’inútils els textos alternatius com «logo» o «el meu lloc web favorit», si la imatge no es pot veure.

- -
-

Nota: WebAIM, guia del text alternatiu, ofereix una orientació més detallada per al text alternatiu, i és una bona lectura per a més informació.

-
- -

Amplada i alçada

- -

Es poden utilitzar els atributs width i height per a especificar l'amplada i l'alçada de la imatge (es pot trobar l'amplada i l'alçada de la imatge de moltes maneres, per exemple en Mac es pot utilitzar Cmd + I per a obtenir la visualització de la informació de l'arxiu d'imatge). Tornant al nostre exemple, poden fer això:

- -
<img src="images/dinosaur.jpg"
-     alt="The head and torso of a dinosaur skeleton;
-          it has a large head with long sharp teeth"
-     width="400"
-     height="341">
- -

Això no dona com a resultat una gran diferència a la pantalla en circumstàncies normals, però si no la imatge es mostra (per exemple, perquè l'usuari acaba d’acccedir a la pàgina i la imatge encara no s'ha carregat) veuràs que el navegador deixa un espai perquè la imatge aparegui:

- -

El títol Images in HTML amb el text alternatiu per al dinosaure, que es mostra dins de la caixa que resulta de configurar l’amplada i l’alçada

- -

Això és bo perquè la càrrega de la pàgina resulta més ràpida i suau.

- -

La mida de les imatges no s'ha d'alterar utilitzant atributs HTML; si s'estableix la mida massa gran, les imatges es veuran granulades/difuses; si la mida es fa massa petita, es malbarata ample de banda amb la descàrrega d'una imatge que és molt més gran del que cal. La imatge també pot acabar semblant distorsionada, si no es manté la relació d'aspecte correcta. S'ha d'utilitzar un editor d'imatges per a posar la imatge en la mida correcta abans de posar-la a la pàgina web.

- -
-

Nota: Si has d’alterar la mida d'una imatge, utilitza CSS en lloc d'HTML.

-
- -

Títols d’imatge

- -

De la mateixa manera que amb els enllaços, també es pot afegir l'atribut title a les imatges per a proporcionar informació de suport addicional, si cal. En el nostre exemple, podríem fer això:

- -
<img src="images/dinosaur.jpg"
-     alt="The head and torso of a dinosaur skeleton;
-          it has a large head with long sharp teeth"
-     width="400"
-     height="341"
-     title="A T-Rex on display in the Manchester University Museum">
- -

Això ens fa aparèixer un indicador de funció (tooltip), igual que amb els títols dels enllaços:

- -

La imatge del dinosaure amb un indicador de funció a la part de dalt que diu: Un T-Rex exposat al museu de la Universitat de Manchester

- -

Els títols d'imatge no són essencials, i sovint és millor incloure'ls com a informació de suport en el text principal de l'article, en lloc d’associar-los a la imatge. Són útils en algunes circumstàncies, per exemple quan en una galeria d'imatges no hi ha espai per als subtítols.

- -

Aprenentatge actiu: incrustar una imatge

- -

Doncs, ara et toca a tu! En aquesta secció d'aprenentatge actiu volem que juguis amb un exercici d'incrustació simple. Disposes d'una etiqueta bàsica {{htmlelement("img")}}, i volem que incrustis la imatge que hi ha en la següent URL:

- -

https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg

- -

Sí, ja hem dit que no s’ha de fer hotlink d'imatges a altres servidors. Però això és només a tall de demostració; et deixem fer-ho, només aquesta vegada!

- -

Potser també voldries:

- - - -

Si t’equivoques, sempre pots tornar a començar amb el botó de Reinicia. Si t’encalles, fes clic al botó Mostra la solució per a veure una solució.

- - - -

{{ EmbedLiveSample('Playable_code', 700, 500) }}

- -

Descriure imatges amb figures i peus d'imatge

- -

Hi hauria moltes maneres possibles d’afegir una llegenda associada a la teva imatge. Per exemple, no hi hauria res que impedís de fer això:

- -
<div class="figure">
-  <img src="images/dinosaur.jpg"
-       alt="The head and torso of a dinosaur skeleton;
-            it has a large head with long sharp teeth"
-       width="400"
-       height="341">
-
-  <p>A T-Rex on display in the Manchester University Museum.</p>
-</div>
- -

Això està bé. Inclou el contingut que necessita, i es fa un ús correcte de l’aplicació d’estil amb CSS. Però hi ha un problema: no hi ha res que vinculi semànticament la imatge a la seva llegenda, i això pot causar problemes als lectors de pantalla, per exemple (quan hi ha 50 imatges i llegendes, quina llegenda va amb quina imatge?).

- -

Una solució més encertada és utilitzar els elements {{htmlelement("figure")}} i {{htmlelement("figcaption")}} d’HTML5, que s'han creat precisament amb aquest propòsit: proporcionar un contenidor semàntic per a les figures, que vinculi clarament la figura amb la llegenda. El nostre exemple anterior es podria reescriure així:

- -
<figure>
-  <img src="images/dinosaur.jpg"
-       alt="The head and torso of a dinosaur skeleton;
-            it has a large head with long sharp teeth"
-       width="400"
-       height="341">
-
-  <figcaption>A T-Rex on display in the Manchester University Museum.</figcaption>
-</figure>
- -

L'element {{htmlelement("figcaption")}} indica als navegadors i la tecnologia d'assistència que la llegenda descriu la resta del contingut de l'element {{htmlelement("figure")}}.

- -
-

Nota: Des d'un punt de vista d'accessibilitat, les llegendes i el text alternatiu {{htmlattrxref('alt','img')}} tenen funcions diferents. Les llegendes beneficien fins i tot les persones que poden veure la imatge, mentre que el text alternatiu {{htmlattrxref('alt','img')}} fa la mateixa funció que una imatge, quan aquesta no hi és. Per tant, les llegendes i el text alternatiu no poden dir el mateix, perquè tots dos elements apareixen quan la imatge no hi és. Intenta desactivar les imatges en el navegador i observa com es veuen les coses.

-
- -

Recordeu que una figura no té per què ser una imatge; una figura és una unitat independent del contingut que:

- - - -

Una figura podria ser un conjunt d’imatges, un fragment de codi, àudio o vídeo, equacions, una taula, o alguna altra cosa.

- -

Aprenentatge actiu: crear una figura

- -

En aquesta secció d'aprenentatge actiu, et demanarem que agafis el codi acabat de la secció d'aprenentatge actiu anterior, i el converteixis en una figura:

- - - -

Si t’equivoques, sempre pots tornar a començar amb el botó de Reinicia. Si t’encalles, fes clic al botó Mostra la solució per a veure una solució.

- - - -

{{ EmbedLiveSample('Playable_code_2', 700, 500) }}

- -

Imatges de fons de CSS

- -

També pots utilitzar CSS per a incrustar imatges en pàgines web (i JavaScript, però això és una altra història). La propietat {{cssxref("background-image")}} de CSS, i les altres propietats background* s'utilitzen per a controlar la col·locació de la imatge de fons. Per exemple, per a posar una imatge de fons en cada paràgraf d’una pàgina, es podria fer això:

- -
p {
-  background-image: url("images/dinosaur.jpg");
-}
- -

La imatge incrustada que resulta possiblement és més fàcil de posicionar i controlar que les imatges HTML; aleshores, per què ens hem de molestar amb les imatges HTML? Com ja hem insinuat abans, les imatges de fons de CSS són només per a decoració. Si només volem afegir una cosa bonica per a millorar l'aspecte visual de la pàgina, això està molt bé, però aquest tipus d'imatges no tenen cap significat semàntic en absolut —no poden tenir text equivalent—, són invisibles per als lectors de pantalla, etc. Aquí és on destaquen les imatges HTML.

- -

Per tant, si una imatge té sentit en termes de contingut, s'ha d'utilitzar una imatge en HTML. Si una imatge és purament decorativa, s'han d'utilitzar imatges de fons CSS.

- -
-

Nota: Aprendreu molt més sobre imatges de fons CSS en el nostre tema CSS.

-
- -

Sumari

- -

Això és tot per ara. Hem exposat les imatges i les llegendes amb detall. En l’article següent ens mourem en un nivell superior, i aprendrem com utilitzar HTML per a incrustar vídeo i àudio a les pàgines web.

- -

{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}

diff --git "a/files/ca/learn/html/multim\303\250dia_i_incrustar/imatges_sensibles/index.html" "b/files/ca/learn/html/multim\303\250dia_i_incrustar/imatges_sensibles/index.html" deleted file mode 100644 index 4be56f6248..0000000000 --- "a/files/ca/learn/html/multim\303\250dia_i_incrustar/imatges_sensibles/index.html" +++ /dev/null @@ -1,254 +0,0 @@ ---- -title: Imatges sensibles -slug: Learn/HTML/Multimèdia_i_incrustar/Imatges_sensibles -tags: - - Article - - Beginner - - CodingScripting - - Design - - Graphics - - Guide - - HTML - - Image - - Intermediate - - img - - sizes - - srcset -translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}
- -
-

En aquest article aprendrem sobre el concepte de les imatges sensibles - imatges que funcionen bé en dispositius amb diferentes mides de pantalles, resolucions i altres característiques semblants - i veurem les eines que proporciona HTML per ajudar-nos a posar-les en pràctica. Imatges sensibles és només una part del (i prepara l'escenari per) disseny web sensible, un tema que aprendrem molt més en un futur mòdul del tema CSS.

-
- - - - - - - - - - - - -
Requisits previs:Heu de coneixer el fonaments bàsics d'HTML i com afegir imatges estàtiques a una pàgina web.
Objectius:Aprendre com utilitzar funcions com {{htmlattrxref("srcset", "img")}} i l'element {{htmlelement("picture")}} per implementar solucions d'imatges sensibles en els llocs web.
- -

Per què les imatges sensibles ?

- -

Llavors, quin problema estem tractant de resoldre amb imatges sensibles? Examinarem un escenari típic. Un lloc web típic, probablement, té una imatge de capçalera perquè es vegi bonic per als visitants, a més, potser algunes imatges de contingut per sota d'aquesta. És possible que vulgueu fer que la capçalera abasti la totalitat de l'amplada de la mateixa, i la imatge de contingut en formi part, en algun lloc, dins de la columna de contingut. Fem una ullada a un exemple senzill d'això:

- -

Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center.

- -

Això funciona bé en un dispositiu de pantalla ampla, com ara un ordinador portàtil o de sobretaula (es pot veure l'example en directa i trobar el codi font en Github.) No parlarem tant de la CSS, excepte per dir que

- - - -

Això està bé, però el problema ve quan es comença a veure el lloc en un dispositiu de pantalla estreta - la capçalera es veu bé, però està començant a ocupar molta alçada de la pantalla d'un dispositiu mòbil; la primera imatge de contingut, d'altra banda, es veu terrible - en aquesta grandària amb prou feines es pot veure a la gent!

- -

Our example site as viewed on a narrow screen; the first image has shrunk to the point where it is hard to make out the detail on it.

- -

Seria molt millor mostrar una versió retallada de la imatge que fixar-se en els detalls importants de la fotografia quan el lloc es veu en una pantalla estreta, i potser una mica entre els dos per a un dispositiu de pantalla d'amplada mitjana com una tauleta - això es coneix comunament com el problema direcció d'art .

- -

A més, no hi ha necessitat d'integrar aquest tipus d'imatges de grans dimensions a la pàgina si s'està veient en una petita pantalla de mòbil; això es diu problema canvi de resolució - una imatge de trama és un nombre fix de píxels d'ample i un nombre fix de píxels d'alt; com vam veure en fixar-nos en els gràfics de vector, una imatge de trama comença a veure's granulada i horrible si es visualitza més gran que la mida original (mentre que un gràfic vectorial no ho fa). I si es mostra significativament més petita que la mida original, és un malbaratament d'ample de banda - en especial els usuaris de mòbils no volen haver de gravar a través del seu ample de banda la descàrrega d'una imatge gran destinada a escritori, quan una imatge petita faria per al dispositiu. Una situació ideal seria tenir múltiples resolucions disponibles i servir mides adequades, depenent dels diferents dispositius que accedeixen al lloc web.

- -

Per complicar més les coses, alguns dispositius tenen pantalles d'alta resolució que necessiten les imatges més grans del que s'espera que ells necessiten, per mostrar-ho bé. Això és essencialment el mateix problema, però en un context lleugerament diferent.

- -

Es podria pensar que les imatges de vector resoldrien aquests problemes, i ho fan fins a cert punt - tots dos són petits en grandària d'arxiu i s'escalen bé, i han de ser usats sempre que sigui possible. No són adequats per a tot tipus d'imatges però -si bé són excel·lents per a gràfics simples, patrons, elements d'interfície, etc., comença a ser molt complex per crear una imatge basada en vectors amb el tipus de detall que ens agradaria trobar, diguem, una foto. Els formats d'imatge de trama, com JPEG són més adequats per al tipus d'imatges que hem vist en l'exemple anterior.

- -

Aquest tipus de problema no existia quan la primera web va existir, a principis de mitjans dels anys 90 - en aquell temps els únics dispositius que existien per navegar per la web eren de sobretaula i portàtils, de manera que els enginyers de navegadors i escriptors d'especificacions ni tan sols pensaven posar en pràctica solucions. Les tecnologies d'imatges sensibles es van dur a terme recentment per resoldre els problemes indicats anteriorment, ja que permetien oferir el navegador diversos arxius d'imatge, ja sigui tots els que mostraven el mateix, però que contenien un nombre diferent de píxels (resolution switching), o diferents imatges adequades per a diferents assignacions d'espai (art direction)

- -
-

Nota: Les noves característiques que es descriuen en aquest article -  {{htmlattrxref("srcset", "img")}}/{{htmlattrxref("sizes", "img")}}/{{htmlelement("picture")}} - están totes suportades en les versions pubicades per els escriptoris moderns i navegadors mòbils (incloent el navegador de Microsoft Edge, encara que no amb Internet Explorer.)

-
- -

Com crear imatges sensibles?

- -

En aquesta secció, veurem els dos problemes il·lustrats a dalt i mostrarem com resoldre'ls utilitzant les característiques de la imatge sensible d'HTML. S'ha de tenir en compte que ens centrarem en {{htmlelement("img")}}s d'HTML per aquesta secció, com es veu en l'àrea de contingut de l'exemple anterior - la imatge a la capçalera del lloc és només de decoració, i per tant implementat utilitzant imatges de fons CSS. CSS podria dir-se que té millors eines per el disseny sensible, parlarem d'elles en un futur mòdul CSS.

- -

Canvi de resolució: Diferents mides

- -

Llavors, quin és el problema que es vol resoldre amb el canvi de resolució? Volem mostrar el mateix contingut d'imatge, major o menor depenent del dispositiu - aquesta és la situació que tenim amb la segona imatge de contingut en el nostre exemple. L'element standard {{htmlelement("img")}} tradicionalment només se li permet apuntar el navegador a un sol arxiu font:

- -
<img src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">
- -

No obstant això, podem utilitzar dos nous atributs - {{htmlattrxref("srcset", "img")}} i {{htmlattrxref("sizes", "img")}} - per proporcionar diverses imatges fonts addicionals, juntament amb consells per ajudar al navegador a triar el més adequat. Es pot veure un exemple d'això en el nostre exemple responsive.html en Github (vegeu també el codi font):

- -
<img srcset="elva-fairy-320w.jpg 320w,
-             elva-fairy-480w.jpg 480w,
-             elva-fairy-800w.jpg 800w"
-     sizes="(max-width: 320px) 280px,
-            (max-width: 480px) 440px,
-            800px"
-     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">
- -

Els atributs srcset i sizes es veuen complicats, però no són tan dolents per entendre si es formaten com es mostra a dalt, amb una part diferent del valor de l'atribut en cada línia. Cada valor conté una llista separada per comes. i cada part de les llistes es componen de tres sub-parts. Recorrerem els continguts de cada, ara:

- -

srcset defineix el conjunt d'imatges que permetrà el navegador triar entre,   cada mida d'imatge. Abans de cada coma, escrivim:

- -
    -
  1. Un nom de fitxer d'imatge (elva-fairy-480w.jpg.)
    2. -
  2. Un espai.
    3. -
  3. L'ample de la imatge inherent en píxels (480w) - en compte que aquesta utilitza la unitat w, no px com es podria esperar. Aquesta és la mida real de la imatge, que es pot trobar al inspeccionar l'arxiu d'imatge a l'ordinador (per exemple en un Mac es pot seleccionar la imatge en el Finder i preme Cmd + I per obrir la pantalla d'informació).
    4. -
- -

sizes defineix un conjunt de condicions de medis (per exemple, amples de pantalla) i indica quina mida de la imatge seria millor triar, quan es compleixin certes condicions en els medis - aquests són els consells que parlàvem anteriorment. En aquest cas, abans de cada coma, escrivim

- -
    -
  1. una condició de medis ((max-width:480px)) - aprendrem més sobre això en el tema de CSS, però per ara direm que una condició de medis descriu un possible estat en que la pantalla pot estar. En aquest cas, estem dient "quan l'amplada de la finestra gràfica sigui de 480 píxels o menys".
    2. -
  2. Un espai.
    3. -
  3. L'amplada de l'espai de la imatge s'ompli quan la condició del medi sigui certa (440px).
    4. -
- -
-

Nota: Per l'ample de l'espai, és possible proporcionar una longitud absoluta (px, em) o una longitud relativa (com un percentatge). Es pot haver notat que l'última amplada de l'espai no té cap condició del medi - Aquest és per defecte el que es tria quan cap de les condicions del medi són certes). El navegador ignora tot després de la primera condició coincident, així que s'ha d'anar amb compte com es demanan les condicions del medi.

-
- -

Així, amb aquests atributs en el seu lloc, el navegador:

- -
    -
  1. Mirar l'amplada del dispositiu.
    2. -
  2. Calcular quina condició del medi en la llista de sizes (mides) és el primer a ser veritat.
    3. -
  3. Mirar la mida de l'espai donat a aquesta consulta de medis.
    4. -
  4. Carregar la imatge de referència en la llista srcset que més s'acosti a la mida de l'espai triat.
    5. -
- -

I ja està! Així que en aquest punt, si un navegador de suport amb un ample de 480px de finestra gràfica carrega la pàgina, la condició (max-width: 480px) del medi serà veritat, per tant, es triarà l'espai 440px, de manera que el elva-fada-480w.jpg serà carregat, ja que el seu ample inherent (480w) és el més proper a 440px. La imatge 800px és de 128 KB en el disc mentre que la versió de 480px és només 63KB - un estalvi de 65KB. Ara imaginem si aquesta era una pàgina que tenia moltes imatges. Usant aquesta tècnica es podria estalviar als usuaris de mòbils una gran quantitat d'ample de banda.

- -

Els navegadors més antics no soportan aquestes característiques, simplement, les ignoran i segueixen endavant i carregan la imatge que es fa referència en l'atribut {{htmlattrxref("src", "img")}} com a normal.

- -
-

Nota: En el {{htmlelement("head")}} del document trobarem la línia <meta name = "viewport" content = "width = device-width">: això obliga els navegadors mòbils a adoptar l'amplada real de la seva finestra en carregar pàgines web (alguns navegadors mòbils menteixen sobre la seva amplada de la finestra gràfica, i en lloc de carregar pàgines a l'amplada de la finestra gràfica, redueixen la pàgina carregada cap avall, el que no és molt útil per a les imatges o el disseny sensible. Us ensenyarem més sobre això en un mòdul futur).

-
- -

Eines útils per a desenvolupadors

- -

Hi ha algunes eines de desenvolupament útils en els navegadors per ajudar en l'elaboració de les amplades d'espai, etc, que són necessàries utilitzar. Quan els estem treballant, carreguem per primera vegada la versió no sensible del exemple (not-responsive.html), després entreu en Responsive Design View (Tools > Web Developer > Responsive Design View), que ens permetrà mirar els dissenys de pàgina web com si els veiéssim a través d'una varietat de diferents mides de pantalles de dispositius.

- -

S'ha establert l'amplada de la finestra gràfica a 320px llavors 480px; per a cada un entrem al Inspector DOM, fent clic a l'element {{htmlelement("img")}} que ens interessa, després mirem la seva grandària en la pestanya de Box Model view en el costat dret de la pantalla. Això ens ha de donar els amples de imatge inherents que necessita.

- -

A screenshot of the firefox devtools with an image element highlighted in the dom, showing its dimensions as 440 by 293 pixels.

- -

A continuació, es pot comprovar si el srcset ha treballat mitjançant l'establiment de l'amplada de la finestra gràfica que volem (establint una amplada estreta, per exemple), obrim Network Inspector (Tools > Web Developer > Network), a continuació, tornem a carregar la pàgina. Això ens ha de donar una llista de recursos que s'han descarregat per compondre la pàgina web, i aquí es pot comprovar quin arxiu d'imatge va ser triat per a descarregar.

- -

a screenshot of the network inspector in firefox devtools, showing that the HTML for the page has been downloaded, along with three images, which include the two 800 wide versions of the responsive images

- -

Canvi de resolució: Mateixa grandària, diferents resolucions

- -

Si s'està donant suport a múltiples resolucions de pantalla, però tothom veu la imatge a la mateixa grandària real en la pantalla, es pot permetre que el navegador seleccioni una imatge de resolució apropiada utilitzant srcset amb x-descriptors i sense grandaries (sizes) - una sintaxi una mica més fàcil! Es pot trobar un exemple de com es veu en srcset-resolutions.html (vegeu també el codi font):

- -
<img srcset="elva-fairy-320w.jpg,
-             elva-fairy-480w.jpg 1.5x,
-             elva-fairy-640w.jpg 2x"
-     src="elva-fairy-640w.jpg" alt="Elva dressed as a fairy">
-
- -

A picture of a little girl dressed up as a fairy, with an old camera film effect applied to the imageEn aquest exemple, el següent CSS s'aplica a la imatge de manera que tindrà una amplada de 320 píxels a la pantalla (també anomenats píxels CSS):

- -
img {
-  width: 320px;
-}
- -

En aquest cas, la grandària (sizes) no és necessaria - el navegador simplement resol la resolució de la pantalla que es mostra, i serveix la imatge més adequada que es fa referència en el srcset. Així, si el dispositiu que accedeixi a la pàgina té un estàndard/de baixa resolució, amb un píxel de dispositiu que representa cada píxel CSS, la imatge elva-fada-320w.jpg serà carregada (el 1x està implícit, pel que no cal incloure). Si el dispositiu té una alta resolució de dos píxels de dispositiu per píxel CSS o més, es carregarà la imatge elva-fada-640w.jpg. La imatge de 640px té 93KB, mentre que la imatge de 320px té només 39KB.

- -

Direcció d'art

- -

En resum, el problema de direcció d'art implica voler canviar la imatge que es mostra per adaptar-se a diferents grandàries de visualització de la imatge. Per exemple, si es mostra un paisatge gran amb una persona al mig en un lloc web quan es veu en un navegador d'escriptori, aquesta es redueix quan es veu el lloc web en un navegador mòbil, es veurà malament, la persona serà molt petita i difícil de veure. Probablement seria millor mostrar una imatge més petita, de retrat en el mòbil, que mostri la persona ampliada. L'element {{htmlelement("picture")}} ens permet implementar exactament aquest tipus de solució.

- -

Tornant al nostre exemple original not-responsive.html tenim una imatge que necessita molt la direcció d'art:

- -
<img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
- -

Arreglarem això, amb {{htmlelement("picture")}}! Igual que <video> i <audio>,  l'element <picture> és un contenidor que conté diversos elements {{htmlelement("source")}} que proporcionen diverses fonts diferents que el navegador pot triar, seguit per l'importantíssim element {{htmlelement("img")}}. El codi de responsive.html es veu així:

- -
<picture>
-  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
-  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
-  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
-</picture>
-
- - - -

Aquest codi ens permet mostrar una imatge adequada tant en pantalla ampla com en pantalla estreta, com es veu a continuació:

- -

Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center.Our example site as viewed on a narrow screen with the picture element used to switch the first image to a portrait close up of the detail, making it a lot more useful on a narrow screen

- -
-

Nota: S'ha d'utilitzar el atribut media només en escenaris de direcció d'art; quan es fa ús de media, no oferir condicions de medis dins l'atribut sizes.

-
- -

Per què no podem fer això usant CSS o Javascript?

- -

Quan el navegador comença a carregar una pàgina, s'inicia la descàrrega (precàrrega) d'alguna de les imatges abans que l'analitzador principal hagi començat a carregar i interpretar el CSS i JavaScript de la pàgina. Aquesta és una tècnica útil, que de mitjana ha rebaixat el 20% el temps de càrrega. No obstant això, no és útil per a les imatges sensibles, d'aquí la necessitat d'implementar solucions com srcset. No es podria, per exemple, carregar l'element {{htmlelement("img")}}, després de detectar l'amplada de la finestra gràfica amb JavaScript i canviar dinàmicament la imatge d'origen en una més petita si es desitjes. Per llavors, la imatge original ja hauria estat carregada, i es carregaria també la imatge petita, així, que és encara pitjor en termes d'imatge sensible.

- - - -

Utilitzar formats d'imatge moderns audaçment

- -

Hi ha diversos nous formats d'imatge emocionants (com WebP i JPEG-2000) que poden mantenir una mida d'arxiu baix i d'alta qualitat al mateix temps. No obstant això, el suport dels navegadors és irregular.

- -

<picture> ens permet continuar atenent els navegadors antics. Es pot subministrar el tipus MIME dins de l'atribut type perquè el navegador pogui rebutjar immediatament tipus d'arxius no compatibles:

- -
<picture>
-  <source type="image/svg+xml" srcset="pyramid.svg">
-  <source type="image/webp" srcset="pyramid.webp">
-  <img src="pyramid.png" alt="regular pyramid built from four equilateral triangles">
-</picture>
-
- - - -

Aprenentatge actiu: La implementació de les vostres pròpies imatges sensibles

- -

Per a aquest aprenentatge actiu, estem esperant que sigueu valents i sobretot actueu independentment.... Volem que implementeu el vostre propi art adequat dirigit a pantalla estreta/pantalla ampla utilitzant <picture>, i un exemple de canvi de resolució que utilitzi srcset.

- -
    -
  1. Escriure alguna cosa d'HTML senzilla per contenir el codi (usar not-responsive.html com a punt de partida, si es vol)
    2. -
  2. Troba una bona imatge apaïsada de pantalla ampla amb algun tipus de detalls continguts en ella en algun lloc. Crear una versió en grandària web de la mateixa utilitzant un editor de gràfics, a continuació, retallar-la per mostrar una part més petita que ampliï el detall, i crear una segona imatge (al voltant de 480px d'ample que és bo per a això).
    3. -
  3. Utilitzeu l'element <picture> per implementar un selector d'imatge de direcció d'art!
    4. -
  4. Crear diversos arxius d'imatges de diferents mides, cadascun mostrant la mateixa imatge.
    5. -
  5. Utilitzeu srcset/size per crear un exemple de canvi de resolució, ja sigui per servir la mateixa imatge a mida en diferentes resolucions, o diferentes mides d'imatges en diferentes amplades de finestra gràfica.
    6. -
- -
-

Nota: Utilitzeu el devtools del navegador perquè us ajudi a saber quines mides necessiteu, com es va esmentar anteriorment.

-
- -

Sumari

- -

Això és un embolcall per a les imatges sensibles - Esperem que hagiu gaudit jugant amb aquestes noves tècniques. Com a resum, hi ha dos problemes diferents que hem estat discutint aquí:

- - - -

Hem arribat al final de tot, dels mòduls Multimedia i incrustació! L'única cosa que fer ara, abans de seguir endavant, és provar la vostra avaluació multimèdia i veure com us va. Diverteix-te.

- -

Veure

- - - -
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}
diff --git "a/files/ca/learn/html/multim\303\250dia_i_incrustar/index.html" "b/files/ca/learn/html/multim\303\250dia_i_incrustar/index.html" deleted file mode 100644 index 43e0e89c91..0000000000 --- "a/files/ca/learn/html/multim\303\250dia_i_incrustar/index.html" +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: Multimèdia i incrustar -slug: Learn/HTML/Multimèdia_i_incrustar -tags: - - Assessment - - Audio - - Beginner - - CodingScripting - - Flash - - Guide - - HTML - - Images - - Landing - - Learn - - SVG - - Video - - iframes - - imagemaps - - responsive -translation_of: Learn/HTML/Multimedia_and_embedding ---- -
-
Multimèdia i incrustar
-
- -

{{LearnSidebar}}

- -

Hem vist una gran quantitat de text fins ara en aquest curs. Molt. de. text. Però la web seria molt avorrida sense res més que el text, de manera que anem a començar a buscar la manera de fer que la web cobri vida, amb un contingut més interessant! Aquest mòdul explora com utilitzar HTML per incloure multimèdia en les pàgines web, incloent-hi les diferents formes en què les imatges poden ser inclosos, i com integrar vídeo, àudio i fins i tot altres pàgines web senceres.

- -

Requisits previs

- -

Abans d'iniciar aquest mòdul, s'ha de tenir un coneixement raonable dels conceptes bàsics d'HTML, com s'explica en Introduction to HTML. Si no s'ha treballat a través d'aquest mòdul (o alguna cosa semblant), comenceu a treballar amb ell en primer lloc, i a continuació, tornar!

- -
-

Nota: Si esteu treballant en un ordinador/tauleta/altre dispositiu els quals no tenen la capacitat de crear els vostres propis arxius, podeu provar (la majoria) els exemples en un programa de codificació en línia, com ara JSBin o Thimble.

-
- -

Guies

- -

Aquest mòdul conté els següents articles, que ens portarà a través de tots els fonaments de la incrustació de multimèdia en pàgines web.

- -
-
Imatges en HTML
-
Hi ha altres tipus de multimèdia a tenir en compte, però és lògic començar amb l'element humil {{htmlelement("img")}}, que s'utilitza per incrustar una imatge en una pàgina web senzilla. En aquest article veurem com utilitzar-lo en profunditat, incloent conceptes bàsics, anotant-ho amb subtítols utilitzant {{htmlelement("figure")}}, i com es relaciona amb les imatges de fons de CSS.
-
Contingut d'àudio i vídeo
-
A continuació, veurem com utilitzar els elements HTML5 {{htmlelement("video")}} i {{htmlelement("audio")}} per incrustar vídeo i àudio a les pàgines, incloent conceptes bàsics, proporcionant accés a diferents formats d'arxiu a diferents navegadors, afegir títols i subtítols, i com afegir alternatives per als navegadors antics.
-
De <object> a <iframe> — altres tecnologies d'incrustació
-
En aquest punt ens agradaria fer un petit pas al costat, mirant a un parell d'elements que permeten introduir una àmplia varietat de tipus de contingut en les pàgines web: els elements {{htmlelement("iframe")}}, {{htmlelement("embed")}} and {{htmlelement("object")}}. <iframe>s són per incrustar en altres pàgines web, i els altres dos permeten incrustar arxius PDF, SVG, i fins i tot flash - una tecnologia que està en camí de desapareixa, però que encara es veu semi-regularment.
-
Afegir gràfics vectorials a la Web
-
-

Els gràfics vectorials poden ser molt útils en certes situacions. A diferència dels formats habituals com PNG/JPG, que no es distorsionen/pixelen quan s'acostan - poden romandre suaus quan s'escalen. Aquest article és una introducció al que són vectors gràfics, i com incloure el popular format {{glossary("SVG")}} en pàgines web.

-
-
Imatges responsive
-
Amb tants tipus de dispositius differerents capaços de navegar per la web - des de telèfons mòbils als ordinadors d'escriptori - un concepte essencial per dominar en el món web modern és el disseny sensible. Això es refereix a la creació de pàgines web que poden canviar de forma automàtica les seves característiques per adaptar-se a diferents mides de pantalla, resolucions, etc. Això es veurà amb més detall en un mòdul CSS més endavant, però per ara mirem les eines HTML que tenim a disposició per crear imatges sensibles, incloent l'element {{htmlelement("picture")}}.
-
- -

Avaluació

- -

Les següents avaluacions posaran a prova la comprensió dels conceptes bàsics HTML coberts en les guies anteriors.

- -
-
Pàgina de benvinguda de Mozilla
-
En aquesta avaluació, posarem a prova el coneixement d'algunes de les tècniques descrites en els articles d'aquest mòdul, aconseguir afegir algunes imatges i vídeo a una pàgina de benvinguda de moda, tot sobre Mozilla!
-
- -

Veure

- -
-
Afegir un hitmap a la part superior d'una imatge
-
Els mapes d'imatge proporcionen un mecanisme perquè les diferents parts d'una imatge enllaci a diferents llocs (pensem en un mapa, a través del qual amb els enllaços obtenim més informació sobre cada pais en clicar-los.) Aquesta tècnica pot ser útil a vegades.
-
Conceptes bàsics d'alfabetització Web 2
-
-

Un excel·lent curs de la fundació Mozilla que explora i posa a prova algunes de les habilitats parlades en el mòdul Multimèdia i incrustació. Busseig profund en la composició bàsica de les pàgines web, disseny per l'accessibilitat, compartint recursos, utilitzant els medis en línia, i el treball obert.

-
-
diff --git "a/files/ca/learn/html/multim\303\250dia_i_incrustar/mozilla_p\303\240gina_de_benvinguda/index.html" "b/files/ca/learn/html/multim\303\250dia_i_incrustar/mozilla_p\303\240gina_de_benvinguda/index.html" deleted file mode 100644 index 71e1d3426e..0000000000 --- "a/files/ca/learn/html/multim\303\250dia_i_incrustar/mozilla_p\303\240gina_de_benvinguda/index.html" +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: Mozilla pàgina de benvinguda -slug: Learn/HTML/Multimèdia_i_incrustar/Mozilla_pàgina_de_benvinguda -tags: - - Assessment - - Beginner - - CodingScripting - - Embedding - - HTML - - Images - - Multimedia - - Video - - iframe - - picture - - responsive - - sizes - - srcset -translation_of: Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page ---- -
{{LearnSidebar}}
- -
{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}
- -

En aquesta avaluació, posarem a prova els vostres coneixements d'algunes de les tècniques descrites en els articles d'aquest mòdul, fent que afegiu algunes imatges i vídeos a una pàgina, amb un toc de moda, tot sobre Mozilla!

- - - - - - - - - - - - -
Requisits Previs:Abans d'intentar aquesta avaluació ja hauria d'haver treballat el mòdul Multimedia i incrustació.
Objectiu:Posar a prova els coneixements al voltant de la incrustació d'imatges i de vídeo en pàgines web, marcs i tècniques d'imatge sensible HTML.
- -

Punt de partida

- -

Per començar aquesta avaluació, s'ha de agafar l'HTML i totes les imatges disponibles en el directori mdn-splash-page-start en github. Desar el contingut d'index.html en un arxiu anomenat index.html en la unitat local, en un nou directori. A continuació, desar pattern.png en el mateix directori (botó dret del ratolí sobre la imatge per obtenir l'opció de guardar-lo).

- -

Accedir a les diferents imatges en el directori de les originals i guardar-les de la mateixa manera; voldreu guardar-les en un directori diferent, per ara, ja que necessitareu manipular-les (algunes) usant un editor de gràfics abans de que estiguin llestes per ser utilitzades.

- -
-

Nota: L'arxiu HTML d'exemple conté un bon munt de CSS, l'estil de la pàgina. No cal tocar el CSS, només l'HTML dins de l'element {{htmlelement("body")}} - sempre que s'insereix el marcat correcte, l'estil farà que es vegi correcte.

-
- -

Project brief

- -

En aquesta avaluació presentem una pàgina de benvinguda de Mozilla gairebé acabada, que pretén dir alguna cosa agradable i interessant sobre el que representa Mozilla, i proporcionar alguns enllaços a altres recursos. Malauradament, no s'han afegit imatges o vídeos - aquesta és la vostre feina! Cal afegir alguns medis perquè la pàgina es vegi bé i tingui més sentit. Les següents subseccions detallan el que s'ha de fer:

- -

Preparar imatges

- -

Usar l'editor d'imatges favorit, per crear versions de 400px d'ample i 120px d'ample:

- - - -

Anomenar-les d'una manera sensata, per exemple, firefoxlogo400.png i firefoxlogo120.png.

- -

Juntament amb mdn.svg, aquestes imatges seran les vostres icones per enllaçar a altres recursos, dins l'àrea d'informació addicional. També s'enllaçarà el logo de Firefox a la capçalera del lloc. Desar les còpies de tot això dins el mateix directori que index.html.

- -

A continuació, crear una versió apaïsada de 1200 píxels d'ample de red-panda.jpg, i una versió retrat de 600px d'ample que mostri el panda en un primer pla. Una vegada més, anomenar-les d'una manera sensata perquè puguin se identificades fàcilment. Guardar una còpia de tots dues dins del mateix directori que index.html.

- -
-

Nota: S'han de optimitzar les imatges JPG i PNG perquè siguin el més petites possible, mentre encara es vegin bé. tinypng.com és un gran servei per fer això fàcilment.

-
- -

Afegir un logo a la capçalera

- -

Dins de l'element {{htmlelement("header")}}, afegir un element {{htmlelement("img")}} que incrustar la petita versió del logo de Firefox a la capçalera.

- -

Afegir un vídeo al continut principal del article

- -

Just dins de l'element {{htmlelement("article")}} (a sota de l'etiqueta d'obertura), incrustar el vídeo de YouTube trobat en https://www.youtube.com/watch?v=ojcNcvb1olg, utilitzant les eines adequades de YouTube per generar el codi. El vídeo ha de ser 400 px d'ample.

- -

Afegir imatges sensibles als enllaços d'informació addicional

- -

Dins de {{htmlelement("div")}} amb la classe further-info, troben quatre elements {{htmlelement("a")}} - cada un dels enllaços amb pàgines interessants relacionades amb Mozilla. Per completar aquesta secció haurem de inserir un element {{htmlelement("img")}} dins de cada un d'ells que continguin els atributs apropiats {{htmlattrxref("src", "img")}}, {{htmlattrxref("alt", "img")}}, {{htmlattrxref("srcset", "img")}} i {{htmlattrxref("sizes", "img")}}.

- -

En tots els casos (excepte un - quin és inherentment sensible?) volem que el navegador serveixi la versió de 120px d'ample quan l'amplada de la finestra gràfica sigui 480px d'ample o menys, o la versió de 400px d'amplada d'altra manera.

- -

Assegurar-se de fer coincidir les imatges correctes amb els vincles correctes!

- -
-

Nota: Per provar correctament els exemples srcset/sizes, es necessita pujar el lloc a un servidor (usant pàgines Github pages és una solució fàcil i lliure), a continuació, a partir d'aquí es pot comprovar si s'està treballant adequadament utilitzant les eines de desenvolupador del navegador, com es detalla en les imatges sensibles: eines útils per a desenvolupadors.

-
- -

Un art dirigit panda vermell

- -

Dins de {{htmlelement("div")}} amb la classe red-panda, volem inserir un element {{htmlelement("picture")}} que serveixi d'imatge de petit retrat del panda si la finestra gràfica és de 600px d'ample o menys, i la imatge apaïsada, gran, al contrari.

- -

Exemple

- -

Les següents captures de pantalla mostren la pàgina de benvinguda que ha de ser similar després d'haver estat marcada correctament, en una àmplia i estreta visualització de la pantalla.

- -

A wide shot of our example splash page

- -

A narrow shot of our example splash page

- -

Avaluació

- -

Si esteu seguint aquesta avaluació com a part d'un curs organitzat, heu de ser capaços de donar al vostre treball al professor/tutor per evaluar. Si sou d'auto-aprenentatge, llavors es pot obtenir la guia d'evaluació faciliment preguntan a la llista de correu dev-mdc o al canal d'IRC #mdn en Mozilla IRC. Proveu el primer exercici - no hi ha res a guanyar amb trampa!

- -

{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}

diff --git a/files/ca/learn/html/tables/advanced/index.html b/files/ca/learn/html/tables/advanced/index.html new file mode 100644 index 0000000000..69b7edf725 --- /dev/null +++ b/files/ca/learn/html/tables/advanced/index.html @@ -0,0 +1,462 @@ +--- +title: 'Taules HTML: característiques avançades i accessibilitat' +slug: Learn/HTML/Taules_HTML/Taula_HTML_característiques_avançades_i_laccessibilitat +tags: + - Accessibility + - Advanced + - Article + - Beginner + - CodingScripting + - HTML + - Headers + - Learn + - caption + - nesting + - scope + - sumary + - table + - tbody + - tfoot + - thead +translation_of: Learn/HTML/Tables/Advanced +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}
+ +

En el segon article d'aquest mòdul ens fixem en algunes de les característiques més avançades de les taules HTML, com ara les llegendes/resums i l'agrupament de files en seccions de capçalera, cos i peu de taula, i en l'accessibilitat de les taules per als usuaris amb discapacitat visual.

+ + + + + + + + + + + + +
Requisits previs:Fonaments d'HTML (consulta la Introducció a l’HTML).
Objectiu:Aprendre les característiques més avançades de les taules HTML i qüestions d'accessibilitat de les taules.
+ +

Afegir un títol a la taula amb <caption>

+ +

Pots donar a la taula una títol, que es posa dins d'un element {{htmlelement("caption")}} que està imbricat dins de l'element {{htmlelement("table")}}. Aquest títol s'ha de posar just sota l'etiqueta d'obertura <table>.

+ +
<table>
+  <caption>Dinosaurs in the Jurassic period</caption>
+
+  ...
+</table>
+ +

Com es pot deduir del breu exemple anterior, el títol està destinat a contenir una descripció del contingut de la taula. Això és útil per a tots els lectors que volen tenir una idea ràpida de si la taula els és útil a partir de donar una ullada a la pàgina, però ho és en particular per als usuaris cecs perquè, en lloc d’haver-se d’esperar que el lector de pantalla llegeixi el contingut de moltes cel·les per a esbrinar quina informació proporciona la taula, podran decidir a partir del títol si llegeixen la taula amb més detall.

+ +

Un títol es col·loca directament sota l'etiqueta <table>.

+ +
+

Nota: Per a proporcionar una descripció també pots utilitzar l'atribut {{htmlattrxref("summary","table")}} en l'etiqueta <table>, que els lectors de pantalla també poden llegir. Tanmateix, et recomanem que empris l'element <caption>, perquè l’atribut {{htmlattrxref("summary","table")}} està {{glossary("desaprovat")}} per l'especificació HTML 5, i a més els usuaris vidents no el poden llegir (no apareix a la pàgina).

+
+ +

Aprenentatge actiu: Afegir un títol

+ +

Tornem al primer exemple de l'article anterior i observem com es fa això.

+ +
    +
  1. Obre l’exemple de la taula horària de la professora d'idiomes del final de l’article Fonaments bàsics de les taules HTML, o fes una còpia local de l'arxiu timetable-fixed.html
    2. +
  2. Afegeix un títol adequat a la taula.
    3. +
  3. Desa el codi i obre’l en el navegador, i observa com es veu.
    4. +
+ +
+

Nota: Pots trobar a GitHub la nostra versió del fitxer timetable-caption.html; i també el pots consultar en l’exemple en viu).

+
+ +

Afegir estructura amb <thead>, <tfoot> i <tbody>

+ +

A mesura que l’estructura de les taules es fa més complexa, és útil aprofundir en la definició estructural. Una manera clara de fer això és amb l'ús de {{htmlelement("thead")}}, {{htmlelement("tfoot")}} i {{htmlelement("tbody")}}, que et permeten etiquetar les seccions de capçalera, peu i cos de la taula.

+ +

Aquests elements no fan la taula més accessible als usuaris de lectors de pantalla, i no proporcionen cap millora visual, però són molt útils per a l'aplicació d’estil i el disseny de pàgina web perquè actuen com «ganxos» amb què s’afegeix CSS a la taula. Podem esmentar com a exemples interessants que es repeteixin en cada pàgina impresa la capçalera i el peu de pàgina d’una taula molt llarga, o que el cos de la taula es mostri en una sola pàgina i el contingut disponible es pugui desplaçar amunt i avall.

+ +

Per a utilitzar aquests elements cal tenir en compte el següent:

+ + + +
+

Nota: <tbody> sempre s'inclou implícitament en totes les taules, si no s'especifica en el codi. Per comprovar-ho, obre un dels exemples anteriors que no inclogui <tbody> i observa el codi HTML amb les eines de desenvolupador del navegador; observa que el navegador hi ha afegit aquesta etiqueta. Et podries demanar per què molestar-nos a incloure-la; s’ha de fer, perquè ens proporciona més control sobre l’estructura de la taula i l'estil.

+
+ +

Aprenentatge actiu: afegir estructura a la taula

+ +

Posarem aquests elements nous en acció.

+ +
    +
  1. Primer de tot, fes una còpia local de spending-record.html i minimal-table.css en una carpeta nova.
    2. +
  2. Obre’l en un navegador; observa que no està malament, però es podria millorar. La fila «SUM» conté una suma de les quantitats que s’han gastat i no sembla que estigui en el lloc adequat, i falten alguns detalls de codi.
    3. +
  3. Posa les capçaleres òbvies de fila dins d'un element <thead>, la fila «SUM» dins d'un element <tfoot>, i la resta del contingut dins d'un element <tbody>.
    4. +
  4. Desa i actualitza, i observa que en afegir l'element <tfoot> la fila «SUM» s’ha col·locat a la part inferior de la taula.
    5. +
  5. A continuació, afegeix un atribut {{htmlattrxref("colspan","td")}} perquè la cel·la «SUM» ocupi les quatre primeres columnes, de manera que el nombre aparegui a la part inferior de la columna «Cost».
    6. +
  6. Afegeix una mica d'estil extra a la taula i observa la utilitat d’aplicar CSS a aquests elements. Observa que en la capçalera (head) del document HTML hi ha un element {{htmlelement("style")}} buit. Afegirem dins d'aquest element les línies de codi CSS següents: + 
    tbody {
+  font-size: 90%;
+  font-style: italic;
+}
+
+tfoot {
+  font-weight: bold;
+}
+
    +
    7. +
  7. Desa i actualitza, i dona una ullada al resultat. Si els elements <tbody> i <tfoot> no estan a lloc, serà molt més complicat escriure selectors/regles i aplicar-los el mateix estil.
    8. +
+ +
+

Nota: No esperem que entenguis del tot el CSS en aquest moment. N’aprendràs més en els nostres mòduls dedicats al CSS (Introducció al CSS és un bon lloc per on començar; també hi ha un article concret sobre aplicar estil a les taules).

+
+ +

La taula acabada ha de presentar un aspecte semblant a aquest:

+ + + +

{{ EmbedLiveSample('Hidden_example', '100%', 300) }}

+ +
+

Nota: Pots trobar el fitxer a GitHub com spending-record-finished.html (i també consultar l’exemple en viu).

+
+ +

Taules imbricades

+ +

És possible imbricar una taula dins d'una altra, sempre que s'hi inclogui l'estructura completa, que inclou l'element <table>. No és en aconsellable en general perquè dona un marcatge més confús i menys accessible als usuaris de lectors de pantalla, i perquè en molts casos es pot resoldre afegint cel·les/files/columnes addicionals a la taula d’origen. Això no obstant, de vegades és necessari, per exemple, per a importar contingut fàcilment d'altres fonts.

+ +

El marcatge següent mostra una imbricació de taules senzilla:

+ +
<table id="table1">
+  <tr>
+    <th>title1</th>
+    <th>title2</th>
+    <th>title3</th>
+  </tr>
+  <tr>
+    <td id="nested">
+      <table id="table2">
+        <tr>
+          <td>cell1</td>
+          <td>cell2</td>
+          <td>cell3</td>
+        </tr>
+      </table>
+    </td>
+    <td>cell2</td>
+    <td>cell3</td>
+  </tr>
+  <tr>
+    <td>cell4</td>
+    <td>cell5</td>
+    <td>cell6</td>
+  </tr>
+</table>
+ +

La sortida presenta aquest aspecte:

+ + + + + + + + + + + + + + + + + + + +
title1title2title3
+ + + + + + + + +
cell1cell2cell3
+ 		cell2cell3
cell4cell5cell6
+ +

Taules per a usuaris amb discapacitats visuals

+ +

Recapitulem breument sobre com la manera de fer servir les taules de dades. Una taula pot ser una eina molt útil perquè ens dona un accés ràpid a les dades i ens permet buscar-hi valors. Per exemple, només cal un cop d'ull breu a la taula de sota per a esbrinar quants anells es van vendre a Gant (Gent) l'agost passat. Per a entendre la informació, fem associacions visuals entre les dades i les capçaleres de les files i columnes d'aquesta taula.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Items Sold August 2016
ClothesAccessories
TrousesSkirtsDressesBraceletsRings
BelgiumAntwerp5622437223
Gent4618506115
Brussels5127386928
The NetherlandsAmsterdam8934698538
Utrecht8012433619
+ +

Però... i si no pots fer associacions visuals? Com es pot llegir una taula com l'anterior, llavors? Les persones que tenen alguna discapacitat visual sovint utilitzen lectors de pantalla que els llegeixen la informació de les pàgines web. Això no és cap problema quan es llegeix text sense format, però la interpretació d'una taula pot ser tot un repte per a una persona cega. Tanmateix, amb el marcatge adequat, les associacions visuals es poden substituir per unes de programàtiques.

+ +

En aquesta secció de l'article t'oferim tècniques que confereixen a les taules una accessibilitat màxima.

+ +

Utilitza capçaleres per a les files i les columnes

+ +

Els lectors de pantalla identifiquen totes les capçaleres i les utilitzen per a fer associacions programàtiques entre les capçaleres i les cel·les amb què es relacionen. La combinació de les capçaleres de les files i les columnes identifica i interpreta les dades que hi ha en cada cel·la perquè l'usuari lector de pantalla pugui interpretar la taula de manera similar a com ho fa un usuari sense discapacitats visuals.

+ +

Ja hem exposat les capçaleres en l’article anterior; consulta Afegir capçaleres amb elements <th>.

+ +

L'atribut scope

+ +

Un tema nou d'aquest article és l'atribut {{htmlattrxref("scope","th")}}, que s’afegeix a l'element <th> i informa els lectors de pantalla exactament de quines cel·les són capçalera les cel·les de capçalera; per exemple, la capçalera és de la fila o de la columna en què es troba? Si tornem enrere al nostre exemple de registre de despeses, les capçaleres de columna es podrien definir sense ambigüitats com capçaleres de columna de la manera següent:

+ +
<thead>
+  <tr>
+    <th scope="col">Purchase</th>
+    <th scope="col">Location</th>
+    <th scope="col">Date</th>
+    <th scope="col">Evaluation</th>
+    <th scope="col">Cost (€)</th>
+  </tr>
+</thead>
+ +

I cada fila podria tenir una capçalera definida de la mateixa manera (si afegíssim capçaleres a les files, a més de les capçaleres de columna):

+ +
<tr>
+  <th scope="row">Haircut</th>
+  <td>Hairdresser</td>
+  <td>12/09</td>
+  <td>Great idea</td>
+  <td>30</td>
+</tr>
+ +

Els lectors de pantalla reconeixen un marcatge estructurat com aquest i permeten als usuaris llegir tota una columna o tota una fila alhora, per exemple.

+ +

scope té dos valors possibles més; colgroup i rowgroup. S'utilitzen per als títols que es col·loquen a la part superior de diverses columnes o files. Si tornem enrere a la taula d’exemple dels articles venuts l’agost del 2016 (Items Sold August 2016) que hi ha al començament d'aquesta secció de l'article, pots observar que la cel·la «Clothes» fa de capçalera de les cel·les «Trousers», «Skirts» i «Dresses». Totes aquestes cel·les haurien de marcar-se com capçaleres (<th>), però «Clothes» és un títol de nivell superior i defineix els altres tres subtítols. Per tant, «Clothes» ha de tenir un atribut scope="colgroup", mentre que les altres tindrien un atribut scope="col".

+ +

Els atributs id i headers

+ +

Una alternativa a l'ús de l'atribut scope és utilitzar els atributs {{htmlattrxref("id")}} i {{htmlattrxref("headers", "td")}} per a crear associacions entre les capçaleres i les cel·les. La forma en què s'utilitzen és la següent:

+ +
    +
  1. Afegeix un id únic per a cada element <th>.
    2. +
  2. Afegeix un atribut headers per a cada element <td>. Cada atribut headers ha d’incloure una llista dels id de tots els elements <th> que actuen de capçalera per a aquesta cel·la, separats per espais.
    3. +
+ +

Això dona a la taula HTML una definició explícita de la posició de cada cel·la de la taula, definida per les capçaleres de cada columna i de cada fila de què forma part, de manera semblant a un full de càlcul. Perquè funcioni bé, la taula necessita les dues capçaleres, de fila i de columna.

+ +

Tornem al nostre exemple de les despeses; dos fragments anteriors es podrien reescriure així:

+ +
<thead>
+  <tr>
+    <th id="purchase">Purchase</th>
+    <th id="location">Location</th>
+    <th id="date">Date</th>
+    <th id="evaluation">Evaluation</th>
+    <th id="cost">Cost (€)</th>
+  </tr>
+</thead>
+<tbody>
+<tr>
+  <th id="haircut">Haircut</th>
+  <td headers="location haircut">Hairdresser</td>
+  <td headers="date haircut">12/09</td>
+  <td headers="evaluation haircut">Great idea</td>
+  <td headers="cost haircut">30</td>
+</tr>
+
+  ...
+
+</tbody>
+ +
+

Nota: Aquest mètode crea associacions molt precises entre les capçaleres i les cel·les de dades però utilitza molt més etiquetatge i no deixa gens d’espai per a errors. L'enfocament de scope sol ser prou per a la majoria de les taules.

+
+ +

Aprenentatge actiu: Juga amb l’scope i les capçaleres

+ +
    +
  1. Per a aquest exercici final, et proposem de fer, primer, còpies locals dels fitxers items-sold.html i minimal-table.css, en un directori nou.
    2. +
  2. A continuació, afegeix els atributs scope apropiats per a fer aquesta taula més adequada.
    3. +
  3. Per acabar, fes una altra còpia dels fitxers inicials i millora l’accessibilitat de la taula utilitzant els atributs id i header.
    4. +
+ +
+

Nota: Pots verificar el teu treball comparant-lo amb els nostres exemples acabats, que pots consultar a items-sold-scope.html (o també consultar l’exemple en viu) i items-sold-headers.html (o també consultar l’exemple en viu).

+
+ +

Resum

+ +

Es poden aprendre més coses sobre les taules en HTML, però de fet t’hem proporcionat tot el que et cal saber ara mateix. En aquest punt, pot ser que vulguis aprendre com aplicar estil a les taules HTML; ves a l’article Aplicar estil a les taules.

+ +
{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}
diff --git a/files/ca/learn/html/tables/basics/index.html b/files/ca/learn/html/tables/basics/index.html new file mode 100644 index 0000000000..f21f6fd3ca --- /dev/null +++ b/files/ca/learn/html/tables/basics/index.html @@ -0,0 +1,618 @@ +--- +title: Fonaments de la taula HTML +slug: Learn/HTML/Taules_HTML/Fonaments_de_la_taula_HTML +tags: + - Article + - Beginner + - CodingScripting + - HTML + - Learn + - Tables + - basics + - cell + - col + - colgroup + - colspan + - header + - row + - rowspan +translation_of: Learn/HTML/Tables/Basics +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}
+ +

Aquest article ens ajuda a començar amb les taules HTML, n’exposa els conceptes bàsics com ara les files i cel·les, les capçaleres, les cel·les que ocupen diverses columnes i files, i la manera d’agrupar totes les cel·les d'una columna per a propòsits d'estil.

+ + + + + + + + + + + + +
Requisits previs:Fonaments d'HTML (consulta la Introducció a l’HTML).
Objectiu:Familiaritzar-se amb les taules HTML.
+ +

Què és una taula?

+ +

Una taula és un conjunt estructurat de dades compost de files i columnes (dades tabulars). Una taula permet buscar de manera ràpida i fàcil valors que indiquen algun tipus de connexió entre els diferents tipus de dades, per exemple, una persona i la seva edat, o un dia de la setmana, o l’horari d'una piscina municipal.

+ +

Una taula de mostra que presenta els noms i les edats d'algunes persones: Chris 38, Dennis 45, Sarah 29, Karen 47.

+ +

Un exemple de taula de dades que presenta l'horari d'una piscina

+ +

Les taules s'utilitzen amb molta freqüència en la nostra societat, i hi estan des de fa molt de temps, com ho demostra aquest document del cens dels EUA de 1800:

+ +

Un document en pergamí molt antic en què les dades no es llegeixen amb facilitat, però presenta clarament l'ús d'una taula de dades.

+ +

Per tant, no és estrany que els creadors de l'HTML proporcionessin un mitjà d’estructurar i presentar dades tabulars per al web.

+ +

Com funciona una taula?

+ +

La característica d'una taula és que és rígida. La informació és fàcil d'interpretar a partir d’associacions visuals entre les capçaleres de les files i les columnes. Mira la taula que hi ha a continuació i busca ungegant de gas amb 62 llunes. Trobes la resposta associant els encapçalaments de fila i columna corresponents.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NomMassa (1024 kg)Diàmetre (km)Densitat (kg/m3)Gravetat (m/s2)Duració del dia (hores)Distància del Sol (106km)Temperatura mitja (°C)Número de llunesObservacions
Planetes terrestresMercuri0,3304.8795.4273,74.222,657,91670El més proper al Sol
Venus4,8712.1045.2438,92.802,0108,24640
La Terra5,9712.7565.5149,824,0149,6151El nostre planeta
Mart0,6426.7923.9333,724,7227,9-652El planeta vermell
Planetas joviansGegants de gasJúpiter1.898142.9841.32623,19,9778,6-11067El planeta més gran
Saturn568120.5366879,010,71.433,5-14062
Gegants de gelUrà86,851.1181.2718,717,22.872,5-19527
Neptú10249.5281.63811,016,14.495,1-20014
Planetes nansPlutó0,01462.3702.0950,7153,35.906,4-2255Desclassificat como planeta el 2006, pero encara és una qüestió polèmica.
+ +

Quan es fa correctament, fins i tot les persones cegues poden interpretar les dades tabulades en una taula HTML; una taula HTML ben feta hauria de millorar l'experiència dels usuaris sense discapacitats i amb discapacitats per igual.

+ +

Aplicar estil a una taula

+ +

A GitHub pots trobar l'exemple en viu. Observa que la taula que hi trobaràs és llegible; això és perquè la taula que apareix més amunt té uns estils mínims, mentre que la de GitHub té força més CSS aplicat.

+ +

No ens enganyem; perquè les taules siguin eficaces en web s'ha de proporcionar alguna informació d'estil amb CSS, així com una bona estructura sòlida amb HTML. En aquest mòdul ens centrem en la part HTML; si vols saber coses sobre la part CSS, pots visitar el nostre article Aplicar estil a les taules quan acabis d’aquí.

+ +

En aquest mòdul no ens centrarem en el CSS, però et proporcionem un full d'estil CSS de mínims perquè l’usis per fer les taules més llegibles que amb els valors per defecte que s'obtenen sense afegir cap tipus d'estil. Pots trobar el full d'estil aquí i també hi pots trobar una plantilla HTML on aplicar el full d'estil; tot plegat et donarà un bon punt de partida per a experimentar amb taules HTML.

+ +

Quan NO s’han d’usar taules HTML?

+ +

Les taules HTML s'han d'utilitzar per a presentar dades tabulades; estan dissenyades per a això. Malauradament, molta gent utilitza taules HTML per a fer disseny de pàgines web; per exemple, una fila per a contenir la capçalera, una fila per a contenir les columnes de contingut, una fila per a contenir el peu de pàgina, etc. En pots trobar més detalls i un exemple en l’article Disseny de pàgines web en el nostre mòdul d'aprenentatge de l'accessibilitat. Això es feia servir sovint perquè la compatibilitat CSS dels navegadors solia ser molt precària; avui dia els dissenys de pàgines web amb taules són molt menys comuns, però encara se’n poden veure en alguns racons de la xarxa web.

+ +

En resum, l'ús de taules per al disseny de pàgines web en lloc de les tècniques de disseny CSS és una mala idea. Les raons principals són les següents:

+ +
    +
  1. El disseny de pàgines web amb taules redueixen l'accessibilitat dels usuaris amb discapacitats visuals: Els lectors de pantalla que fan servir les persones amb discapacitat visual interpreten les etiquetes d’una pàgina HTML i en llegeixen el contingut a l'usuari. Com que les taules no són l'eina adequada per al disseny de pàgines web i l’etiquetatge és més complex que amb les tècniques de disseny CSS, la sortida pels lectors de pantalla serà confusa per a aquests usuaris.
    2. +
  2. El disseny de pàgines web amb taules genera una sopa d'etiquetes: Com s’ha dit, els dissenys de pàgines web amb taules en general involucren estructures d’etiquetatge més complexes que les tècniques de disseny adequades. Això pot generar un codi més difícil d'escriure, mantenir i depurar.
    3. +
  3. Les taules no tenen adaptabilitat automàtica: Quan s'utilitzen esquemes de contenidors adequats (com ara {{htmlelement("header")}}, {{htmlelement("section")}}, {{htmlelement("article")}} o {{htmlelement("div")}}), els valors per defecte de les amplades són el 100% de la de l’element pare. En canvi, les taules estan dimensionades per defecte d'acord amb el contingut que inclouen, de manera que calen mesures addicionals per a aconseguir aplicar estils de disseny de taula que funcionin de manera eficient en una varietat de dispositius.
    4. +
+ +

Aprenentatge actiu: Crea la teva primera taula

+ +

Hem parlat de prou teoria sobre les taules; ara ens cabussarem en un exemple pràctic i construirem una taula senzilla.

+ +
    +
  1. En primer lloc, fes una còpia local de blank-template.html i minimal-table.css en un directori nou del teu equip local.
    2. +
  2. El contingut de cada taula està delimitat per aquestes dues etiquetes: <table></table>. Afegeix-les al cos del teu codi HTML.
    3. +
  3. El contenidor més petit que hi ha dins d'una taula és una cel·la de taula, que es crea amb un element <td> ('td' ve de table data, 'dades de la taula'). Afegeix el següent entre les etiquetes de la teva taula: + 
    <td>Hi, I'm your first cell.</td>
    +
    4. +
  4. Si vols fer una fila de quatre cel·les, has de copiar aquestes etiquetes tres vegades més. Actualitza els continguts de la teva taula perquè et quedi així: + 
    <td>Hi, I'm your first cell.</td>
+<td>I'm your second cell.</td>
+<td>I'm your third cell.</td>
+<td>I'm your fourth cell.</td>
    +
    5. +
+ +

Observa que les cel·les no es col·loquen l’una sota de l'altra, sinó que s'alineen automàticament les unes amb les altres a la mateixa fila. Cada element <td> crea una sola cel·la, i totes juntes formen la primera fila. Cada cel·la que afegeixes fa la fila més llarga.

+ +

Per evitar que aquesta fila continuï creixent i començar a col·locar les cel·les següents en una segona fila, hem d'utilitzar l'etiqueta <tr> ('tr' ve de table raw, ’fila de taula'). Ara explicarem això.

+ +
    +
  1. Col·loca les quatre cel·les que has creat entre etiquetes <tr>, d’aquesta manera: + + 
    <tr>
+  <td>Hi, I'm your first cell.</td>
+  <td>I'm your second cell.</td>
+  <td>I'm your third cell.</td>
+  <td>I'm your fourth cell.</td>
+</tr>
    +
    2. +
  2. Ja has creat una fila, ara intenta fer-ne una o dues més; cada fila ha d’estar etiquetada en un element <tr> addicional, i cada cel·la ha d’estar continguda entre etiquetes <td>.
    3. +
+ +

Això hauria de donar com a resultat una taula, com la que es veu a continuació:

+ + + + + + + + + + + + + + + + +
Hi, I'm your first cell.I'm your second cell.I'm your third cell.I'm your fourth cell.
Second row, first cell.Cell 2.Cell 3.Cell 4.
+ +
+

Nota: També la pots trobar a GitHub, com simple-table.html (i també pots consultar-la en l’exemple en viu).

+
+ +

Afegeix capçaleres amb elements <th>

+ +

Ara centrem la nostra atenció en les capçaleres de taula; són cel·les especials que van al començament d'una fila o columna i defineixen el tipus de dades que conté la fila o la columna (per exemple, observa les cel·les «Breed» i «Age» en el primer exemple que es mostra en aquest article). Per a il·lustrar per què són útils, dona una ullada a la taula d'exemple següent. Primer, el codi d’origen:

+ +
<table>
+  <tr>
+    <td>&nbsp;</td>
+    <td>Knocky</td>
+    <td>Flor</td>
+    <td>Ella</td>
+    <td>Juan</td>
+  </tr>
+  <tr>
+    <td>Breed</td>
+    <td>Jack Russell</td>
+    <td>Poodle</td>
+    <td>Streetdog</td>
+    <td>Cocker Spaniel</td>
+  </tr>
+  <tr>
+    <td>Age</td>
+    <td>16</td>
+    <td>9</td>
+    <td>10</td>
+    <td>5</td>
+  </tr>
+  <tr>
+    <td>Owner</td>
+    <td>Mother-in-law</td>
+    <td>Me</td>
+    <td>Me</td>
+    <td>Sister-in-law</td>
+  </tr>
+  <tr>
+    <td>Eating Habits</td>
+    <td>Eats everyone's leftovers</td>
+    <td>Nibbles at food</td>
+    <td>Hearty eater</td>
+    <td>Will eat till he explodes</td>
+  </tr>
+</table>
+ +

Ara, la representació de la taula:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KnockyFlorEllaJuan
BreedJack RussellPoodleStreetdogCocker Spaniel
Age169105
OwnerMother-in-lawMeMeSister-in-law
Eating HabitsEats everyone's leftoversNibbles at foodHearty eaterWill eat till he explodes
+ +

El problema és que, encara que pots anar intuint què passa aquí, fer el creuament de les dades no resulta tan fàcil com podria ser. Seria molt millor si les capçaleres de la columna i de la fila destaquessin d'alguna manera.

+ +

Aprenentatge actiu: capçaleres de taula

+ +

Intentem millorar aquesta taula.

+ +
    +
  1. En primer lloc, fes una còpia local dels fitxers dogs-table.html i minimal-table.css en un directori nou del teu equip local. L'HTML conté el mateix exemple Dogs que has vist abans.
    2. +
  2. Perquè les capçaleres de taula es reconeguin com capçaleres, tant visualment com semànticament, pots utilitzar l'element <th> ('th' ve de table header, 'capçalera de taula'). Funciona exactament de la mateixa manera que un element <td>, però denota una capçalera, que no és una cel·la normal. Entra al codi HTML i canvia tots els elements <td> que delimiten les cel·les de capçalera de la taula per elements <th>.
    3. +
  3. Desa l'HTML i carrega’l en un navegador; ara hauria de mostrar les cel·les de capçalera amb aspecte de capçaleres.
    4. +
+ +
+

Nota: En GitHub pots trobar el nostre exemple acabat en dogs-table-fixed.html (i també el pots consultar en l’exemple en viu).

+
+ +

Per què són útils les capçaleres?

+ +

Ja hem respost parcialment aquesta pregunta; quan busques dades, resulta més fàcil trobar-les quan les capçaleres destaquen clarament i el disseny es veu més bé en general.

+ +
+

Nota: Les capçaleres de les taules venen amb un estil per defecte fins i tot quan no afegeixes el teu estil de taula propi, perquè destaquin: el text està en negreta i centrat.

+
+ +

Les capçaleres de les taules també presenten un altre avantatge: juntament amb l'atribut scope (que veurem en l’article següent), fa les taules més accessibles perquè cada capçalera s’associa amb totes les dades de la mateixa fila o columna. Els lectors de pantalla són capaços de llegir tota una fila o tota una columna de dades alhora, i això és força útil.

+ +

Cel·les que ocupen diverses files i columnes

+ +

A vegades volem que les cel·les abastin diverses files o columnes. Prenguem l’exemple senzill següent, que mostra uns quants noms d’animals comuns. Volem que en alguns casos es mostrin els noms dels mascles i els de les femelles al costat del nom de l'animal, però d’altres vegades no ho volem, sinó que volem que el nom de animal abasti tota l’amplada de la taula.

+ +

L’etiquetatge inicial és el següent:

+ +
<table>
+  <tr>
+    <th>Animals</th>
+  </tr>
+  <tr>
+    <th>Hippopotamus</th>
+  </tr>
+  <tr>
+    <th>Horse</th>
+    <td>Mare</td>
+  </tr>
+  <tr>
+    <td>Stallion</td>
+  </tr>
+  <tr>
+    <th>Crocodile</th>
+  </tr>
+  <tr>
+    <th>Chicken</th>
+    <td>Cock</td>
+  </tr>
+  <tr>
+    <td>Rooster</td>
+  </tr>
+</table>
+ +

Però la sortida no ens dona exactament el que volem:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
Animals
Hippopotamus
HorseMare
Stallion
Crocodile
ChickenCock
Rooster
+ +

Necessitem una manera d'aconseguir que «Animals», «Hippopotamus» i «Crocodile» ocupin l’amplada de dues columnes, i «Horse» i «Chicken» ocupin més de dues files cap avall. Afortunadament, les capçaleres de taula i les cel·les tenen els atributs colspan i rowspan, que ens permeten fer precisament aquestes coses. Totes dues propietats accepten per valor un nombre sense unitats, que és igual al nombre de files o columnes que es vol abastar. Per exemple, colspan="2" fa que una cel·la ocupi dues columnes.

+ +

Utilitzem colspan i rowspan per a millorar aquesta taula.

+ +
    +
  1. En primer lloc, fes una còpia local dels fitxers animals-table.html i minimal-table.css en un directori nou del teu equip local. L'HTML conté el mateix exemple amb animals que has vist abans.
    2. +
  2. A continuació, utilitza colspan perquè «Animals», «Hippopotamus» i «Crocodile» ocupin l’amplada de dues columnes.
    3. +
  3. Finalment, utilitza rowspan perquè «Horse» i «Chicken» ocupin dues files.
    4. +
  4. Desa el codi i obre’l en el navegador per a veure com millora.
    5. +
+ +
+

Nota: En GitHub pots trobar el nostre exemple acabat en animals-table-fixed.html (també el pots consultar en l’exemple en viu).

+
+ + +
+ +

Aplicar a les columnes un estil comú

+ +

Abans de continuar endavant, en aquest article explicarem una darrera característica. HTML té un mètode per a definir la informació d'estil per a tota una columna de dades en un sol lloc; es tracta dels elements <col> i <colgroup>. Aquests elements existeixen perquè pot ser una mica empipador i ineficient haver d'especificar l'estil de les columnes; en general, la informació d'estil s'ha d'especificar per a cada <td> o <th> de la columna, o s’ha d’utilitzar un selector complex com {{cssxref(":nth-child()")}}.

+ +

Considerem l’exemple següent:

+ +
<table>
+  <tr>
+    <th>Data 1</th>
+    <th style="background-color: yellow">Data 2</th>
+  </tr>
+  <tr>
+    <td>Calcutta</td>
+    <td style="background-color: yellow">Orange</td>
+  </tr>
+  <tr>
+    <td>Robots</td>
+    <td style="background-color: yellow">Jazz</td>
+  </tr>
+</table>
+ +

Ens dona el resultat següent:

+ + + + + + + + + + + + + + + + +
Data 1Data 2
CalcuttaOrange
RobotsJazz
+ +

Això no és l'ideal, perquè hem de repetir la informació d'estil en les tres cel·les de la columna (probablement en un projecte real tindríem un conjunt de classes en totes tres i l'estil especificat en un full d'estil separat). En comptes d’això, podem especificar la informació una vegada en un element <col>. Els elements <col> s'especifiquen dins d'un contenidor <colgroup> just a sota de l'etiqueta d'obertura <table>. Podem crear el mateix efecte que veiem a dalt si especifiquem la nostra taula de la següent manera:

+ +
<table>
+  <colgroup>
+    <col>
+    <col style="background-color: yellow">
+  </colgroup>
+  <tr>
+    <th>Data 1</th>
+    <th>Data 2</th>
+  </tr>
+  <tr>
+    <td>Calcutta</td>
+    <td>Orange</td>
+  </tr>
+  <tr>
+    <td>Robots</td>
+    <td>Jazz</td>
+  </tr>
+</table>
+ +

De fet, hem definit dues «columnes d'estil», una que especifica la informació d'estil per a cadascuna de les columnes. No volem aplicar estil a la primera columna, per això encara hem d'incloure un element en blanc <col>; si no ho fem, l'estil s'aplicarà justament a la primera columna.

+ +

Si volem aplicar la informació d'estil a totes dues columnes, podem incloure un element <col> que inclogui un atribut span, com aquest:

+ +
<colgroup>
+  <col style="background-color: yellow" span="2">
+</colgroup>
+ +

Igual que colspan i rowspan, span pren un valor numèric sense unitats que especifica el nombre de columnes a les quals volem aplicar l'estil.

+ +

Aprenentatge actiu: colgroup i col

+ +

Ara és el moment de fer-ho tu mateix.

+ +

A continuació pots veure l'horari d'una professora d'idiomes. Divendres té una classe nova d'ensenyament d'holandès durant tot el dia, però també fa classes d’alemany algunes hores el dimarts i el dijous. Vol que destaquin les columnes dels dies que fa classes.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MonTuesWedThursFriSatSun
1st periodEnglishGermanDutch
2nd periodEnglishEnglishGermanDutch
3rd periodGermanGermanDutch
4th periodEnglishEnglishDutch
+ +

Tornar a crear la taula seguint aquests passos:

+ +
    +
  1. En primer lloc, fes una còpia local de l'arxiu timetable.html en un directori nou del teu equip local. L'HTML conté la mateixa taula que hem vist abans, menys la informació de les columnes d'estil.
    2. +
  2. Afegeix un element <colgroup> a la part superior de la taula, just a sota de l'etiqueta <table>, en què afegirem els elements <col>.
    3. +
  3. No apliquem cap estil a les dues primeres columnes.
    4. +
  4. Afegim un color de fons a les columnes segona i tercera. El valor de l'atribut style és background-color:#97DB9A;
    5. +
  5. Establim una amplada de separació en la quarta columna. El valor de l'atribut style és width: 42px;
    6. +
  6. Afegim un color de fons a la cinquena columna. El valor de l'atribut style és background-color:#97DB9A;
    7. +
  7. Afegim un color de fons diferent, més una vora, a la sisena columna, per a indicar que és un dia especial perquè dona una classe nova. Els valors de l'atribut style són background-color:#DCC48E; border:4px solid #C1437A;
    8. +
  8. Els dos últims dies són dies lliures; el valor de l'atribut style és width: 42px;
    9. +
+ +

Continua tu amb l'exemple i a veure com et va. Si t’encalles o vols revisar-lo, pots trobar la nostra versió en GitHub com timetable-fixed.html (també el pots consultar en l’exemple en viu).

+ +

Resum

+ +

Amb això concloem gairebé els conceptes bàsics de les taules HTML. En l’article següent veurem algunes característiques una mica més avançades de les taules i començarem a pensar en l'accessibilitat per a les persones amb discapacitat visual.

+ +
{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}
diff --git a/files/ca/learn/html/tables/index.html b/files/ca/learn/html/tables/index.html new file mode 100644 index 0000000000..add81f874e --- /dev/null +++ b/files/ca/learn/html/tables/index.html @@ -0,0 +1,45 @@ +--- +title: Taules HTML +slug: Learn/HTML/Taules_HTML +tags: + - Article + - Beginner + - CodingScripting + - Guide + - HTML + - Landing + - Module + - Tables +translation_of: Learn/HTML/Tables +--- +
{{LearnSidebar}}
+ +

Una tasca molt comuna en HTML és estructurar dades tabulars, té una sèrie d'elements i atributs per a aquest propòsit. Juntament amb una mica de CSS per el disseny, HTML fa que sigui fàcil de visualitzar taules d'informació a la web, com ara el pla de lliçó de l'escola, els horaris a la piscina del lloc, estadístiques sobre els dinosaures favorits o equip de futbol. Aquest mòdul us porta a través de tot el que es necessita saber sobre l'estructuració de dades tabulars utilitzant HTML.

+ +

Requisits previs

+ +

Abans d'iniciar aquest mòdul, ja hauria d'haver cobert els conceptes bàsics d'HTML - vegeu Introducció a HTML.

+ +
+

Nota: Si es treballa en un ordinador/tauleta/altre dispositiu el qual no té la capacitat de crear els vostres propis arxius, es pot portar a terme (la majoria) els exemples amb un programa de codificació en línia, com ara JSBin o Thimble.

+
+ +

Guies

+ +

Aquest mòdul conté els següents articles:

+ +
+
Taules HTML bàsiques
+
+

Aquest article ens ajudarà a començar amb les taules HTML, que cobreix els conceptes més bàsics com ara files i cel·les, encapçalats, fent que les cel·les abastin múltiples columnes i files, i com agrupar totes les cel·les d'una columna per a propòsits d'estil.

+
+
Taules HTML característiques avançades i accessibilitat
+
En el segon article d'aquest mòdul, ens fixarem en algunes de les característiques més avançades de les taules HTML - com llegendes/resums i agrupament de files en la taula, seccions de cos i peu - així com l'accessibilitat de les taules per als usuaris amb discapacitat visual.
+
+ +

Avaluació

+ +
+
Estructuració de dades dels planetes
+
En la nostra avaluació de la taula, us proporcionarem algunes dades sobre els planetes del nostre sistema solar i aconseguir una estructura dins d'una taula HTML.
+
diff --git a/files/ca/learn/html/tables/structuring_planet_data/index.html b/files/ca/learn/html/tables/structuring_planet_data/index.html new file mode 100644 index 0000000000..15d583607f --- /dev/null +++ b/files/ca/learn/html/tables/structuring_planet_data/index.html @@ -0,0 +1,79 @@ +--- +title: 'Avaluació: Estructurar les dades dels planeta' +slug: Learn/HTML/Taules_HTML/Avaluació_Estructurar_les_dades_dels_planeta +tags: + - Assessment + - Beginner + - CodingScripting + - HTML + - Learn + - Tables +translation_of: Learn/HTML/Tables/Structuring_planet_data +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}
+ +

En la nostra avaluació de la taula, proporcionarem algunes dades sobre els planetes del nostre sistema solar, per  obtenir una estructura en una taula HTML.

+ + + + + + + + + + + + +
Requisits Previs:Abans de procedir a aquesta avaluació ja s'hauria d'haver treballat a través de tots els articles d'aquest mòdul.
Objectiu:Posar a prova la comprensió de les taules HTML i funcions associades.
+ +

Punt de partida

+ +

Per obtenir aquesta avaluació començarem per fer còpies locals de blank-template.html, minimal-table.css i planets-data.txt en un nou directori a l'equip local.

+ +
+

Nota: Com a alternativa, es pot utilitzar un lloc com JSBin o Thimble per fer l'avaluació. Es pot fer enganxant el codi HTML, CSS i JavaScript en un d'aquests editors en línia. Si l'editor en línia que s'utilitza no té panells  separats de JavaScript/CSS, lliurament es poden posar en línia amb els elements <script>/<style> dins de la pàgina HTML.

+
+ +

Resum del projecte

+ +

Estem treballant en una escola; actualment els estudiants estan estudiant els planetes del nostre sistema solar, i volem proporcionar-los un conjunt fàcil de seguiment de dades per buscar dades i xifres sobre els planetes. Una taula de dades HTML seria ideal - cal prendre les dades en brut que tenim disponibles i convertir-les en una taula, seguint els passos a continuació.

+ +

La taula d'acabada ha de tenir aquest aspecte:

+ +

+ +

També es pot veure el exemple en viu aquí (sense mirar el codi font - no enganyar!)

+ + + +

Passos per completar

+ +

Els següents passos descriuen el que s'ha de fer per completar la taula d'exemple. Totes les dades que es necessitan estan contingudes en l'arxiu planets-data.txt. Si hi ha problemes per visualitzar les dades, mirar l'exemple viu de dalt, o tractar de dibuixar un diagrama.

+ +
    +
  1. Obrir la còpia blank-template.html i començar la taula per fora, donant-li un recipient exterior, una capçalera i un cos de taula. No cal un peu de taula per a aquest exemple.
    2. +
  2. Afegir el títol proporcionat a la taula.
    3. +
  3. Afegir una fila a la capçalera de la taula que contingui tots els encapçalats de columna.
    4. +
  4. Crear totes les files de contingut dins del cos de la taula, sense oblidar de fer tots els encapçalats de les files en encapçalats semàntics.
    5. +
  5. Assegureu-vos que tot el contingut s'insereix en les cel·les correctes - amb les dades en brut, cada fila de dades del planeta s'ha de mostrar al costat del seu planeta associat.
    6. +
  6. Afegir atributs per fer que les capçaleres de fila i columna estiguin inequívocament associades a les files, columnes o grups de files que actuen com capçaleres.
    7. +
  7. Afegir una vora negre al voltant de la columna que conté tots els encapçalats de fila dels noms del planetes
    8. +
+ +

Consells i suggeriments

+ + + +

Avaluació

+ +

Si esteu seguint aquesta avaluació com a part d'un curs organitzat, heu de ser capaços de donar al treball al vostre professor/tutor per avaluar-ho. Si és d'auto-aprenentatge, llavors es pot obtenir la guia d'avaluació facilment preguntan a la llista de correu dev-mdc o al canal d'IRC #mdn en Mozilla IRC. Proveu el primer exercici - no hi ha res a guanyar amb trampes!

+ +

{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}

diff --git "a/files/ca/learn/html/taules_html/avaluaci\303\263_estructurar_les_dades_dels_planeta/index.html" "b/files/ca/learn/html/taules_html/avaluaci\303\263_estructurar_les_dades_dels_planeta/index.html" deleted file mode 100644 index 15d583607f..0000000000 --- "a/files/ca/learn/html/taules_html/avaluaci\303\263_estructurar_les_dades_dels_planeta/index.html" +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: 'Avaluació: Estructurar les dades dels planeta' -slug: Learn/HTML/Taules_HTML/Avaluació_Estructurar_les_dades_dels_planeta -tags: - - Assessment - - Beginner - - CodingScripting - - HTML - - Learn - - Tables -translation_of: Learn/HTML/Tables/Structuring_planet_data ---- -
{{LearnSidebar}}
- -
{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}
- -

En la nostra avaluació de la taula, proporcionarem algunes dades sobre els planetes del nostre sistema solar, per  obtenir una estructura en una taula HTML.

- - - - - - - - - - - - -
Requisits Previs:Abans de procedir a aquesta avaluació ja s'hauria d'haver treballat a través de tots els articles d'aquest mòdul.
Objectiu:Posar a prova la comprensió de les taules HTML i funcions associades.
- -

Punt de partida

- -

Per obtenir aquesta avaluació començarem per fer còpies locals de blank-template.html, minimal-table.css i planets-data.txt en un nou directori a l'equip local.

- -
-

Nota: Com a alternativa, es pot utilitzar un lloc com JSBin o Thimble per fer l'avaluació. Es pot fer enganxant el codi HTML, CSS i JavaScript en un d'aquests editors en línia. Si l'editor en línia que s'utilitza no té panells  separats de JavaScript/CSS, lliurament es poden posar en línia amb els elements <script>/<style> dins de la pàgina HTML.

-
- -

Resum del projecte

- -

Estem treballant en una escola; actualment els estudiants estan estudiant els planetes del nostre sistema solar, i volem proporcionar-los un conjunt fàcil de seguiment de dades per buscar dades i xifres sobre els planetes. Una taula de dades HTML seria ideal - cal prendre les dades en brut que tenim disponibles i convertir-les en una taula, seguint els passos a continuació.

- -

La taula d'acabada ha de tenir aquest aspecte:

- -

- -

També es pot veure el exemple en viu aquí (sense mirar el codi font - no enganyar!)

- - - -

Passos per completar

- -

Els següents passos descriuen el que s'ha de fer per completar la taula d'exemple. Totes les dades que es necessitan estan contingudes en l'arxiu planets-data.txt. Si hi ha problemes per visualitzar les dades, mirar l'exemple viu de dalt, o tractar de dibuixar un diagrama.

- -
    -
  1. Obrir la còpia blank-template.html i començar la taula per fora, donant-li un recipient exterior, una capçalera i un cos de taula. No cal un peu de taula per a aquest exemple.
    2. -
  2. Afegir el títol proporcionat a la taula.
    3. -
  3. Afegir una fila a la capçalera de la taula que contingui tots els encapçalats de columna.
    4. -
  4. Crear totes les files de contingut dins del cos de la taula, sense oblidar de fer tots els encapçalats de les files en encapçalats semàntics.
    5. -
  5. Assegureu-vos que tot el contingut s'insereix en les cel·les correctes - amb les dades en brut, cada fila de dades del planeta s'ha de mostrar al costat del seu planeta associat.
    6. -
  6. Afegir atributs per fer que les capçaleres de fila i columna estiguin inequívocament associades a les files, columnes o grups de files que actuen com capçaleres.
    7. -
  7. Afegir una vora negre al voltant de la columna que conté tots els encapçalats de fila dels noms del planetes
    8. -
- -

Consells i suggeriments

- - - -

Avaluació

- -

Si esteu seguint aquesta avaluació com a part d'un curs organitzat, heu de ser capaços de donar al treball al vostre professor/tutor per avaluar-ho. Si és d'auto-aprenentatge, llavors es pot obtenir la guia d'avaluació facilment preguntan a la llista de correu dev-mdc o al canal d'IRC #mdn en Mozilla IRC. Proveu el primer exercici - no hi ha res a guanyar amb trampes!

- -

{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}

diff --git a/files/ca/learn/html/taules_html/fonaments_de_la_taula_html/index.html b/files/ca/learn/html/taules_html/fonaments_de_la_taula_html/index.html deleted file mode 100644 index f21f6fd3ca..0000000000 --- a/files/ca/learn/html/taules_html/fonaments_de_la_taula_html/index.html +++ /dev/null @@ -1,618 +0,0 @@ ---- -title: Fonaments de la taula HTML -slug: Learn/HTML/Taules_HTML/Fonaments_de_la_taula_HTML -tags: - - Article - - Beginner - - CodingScripting - - HTML - - Learn - - Tables - - basics - - cell - - col - - colgroup - - colspan - - header - - row - - rowspan -translation_of: Learn/HTML/Tables/Basics ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}
- -

Aquest article ens ajuda a començar amb les taules HTML, n’exposa els conceptes bàsics com ara les files i cel·les, les capçaleres, les cel·les que ocupen diverses columnes i files, i la manera d’agrupar totes les cel·les d'una columna per a propòsits d'estil.

- - - - - - - - - - - - -
Requisits previs:Fonaments d'HTML (consulta la Introducció a l’HTML).
Objectiu:Familiaritzar-se amb les taules HTML.
- -

Què és una taula?

- -

Una taula és un conjunt estructurat de dades compost de files i columnes (dades tabulars). Una taula permet buscar de manera ràpida i fàcil valors que indiquen algun tipus de connexió entre els diferents tipus de dades, per exemple, una persona i la seva edat, o un dia de la setmana, o l’horari d'una piscina municipal.

- -

Una taula de mostra que presenta els noms i les edats d'algunes persones: Chris 38, Dennis 45, Sarah 29, Karen 47.

- -

Un exemple de taula de dades que presenta l'horari d'una piscina

- -

Les taules s'utilitzen amb molta freqüència en la nostra societat, i hi estan des de fa molt de temps, com ho demostra aquest document del cens dels EUA de 1800:

- -

Un document en pergamí molt antic en què les dades no es llegeixen amb facilitat, però presenta clarament l'ús d'una taula de dades.

- -

Per tant, no és estrany que els creadors de l'HTML proporcionessin un mitjà d’estructurar i presentar dades tabulars per al web.

- -

Com funciona una taula?

- -

La característica d'una taula és que és rígida. La informació és fàcil d'interpretar a partir d’associacions visuals entre les capçaleres de les files i les columnes. Mira la taula que hi ha a continuació i busca ungegant de gas amb 62 llunes. Trobes la resposta associant els encapçalaments de fila i columna corresponents.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NomMassa (1024 kg)Diàmetre (km)Densitat (kg/m3)Gravetat (m/s2)Duració del dia (hores)Distància del Sol (106km)Temperatura mitja (°C)Número de llunesObservacions
Planetes terrestresMercuri0,3304.8795.4273,74.222,657,91670El més proper al Sol
Venus4,8712.1045.2438,92.802,0108,24640
La Terra5,9712.7565.5149,824,0149,6151El nostre planeta
Mart0,6426.7923.9333,724,7227,9-652El planeta vermell
Planetas joviansGegants de gasJúpiter1.898142.9841.32623,19,9778,6-11067El planeta més gran
Saturn568120.5366879,010,71.433,5-14062
Gegants de gelUrà86,851.1181.2718,717,22.872,5-19527
Neptú10249.5281.63811,016,14.495,1-20014
Planetes nansPlutó0,01462.3702.0950,7153,35.906,4-2255Desclassificat como planeta el 2006, pero encara és una qüestió polèmica.
- -

Quan es fa correctament, fins i tot les persones cegues poden interpretar les dades tabulades en una taula HTML; una taula HTML ben feta hauria de millorar l'experiència dels usuaris sense discapacitats i amb discapacitats per igual.

- -

Aplicar estil a una taula

- -

A GitHub pots trobar l'exemple en viu. Observa que la taula que hi trobaràs és llegible; això és perquè la taula que apareix més amunt té uns estils mínims, mentre que la de GitHub té força més CSS aplicat.

- -

No ens enganyem; perquè les taules siguin eficaces en web s'ha de proporcionar alguna informació d'estil amb CSS, així com una bona estructura sòlida amb HTML. En aquest mòdul ens centrem en la part HTML; si vols saber coses sobre la part CSS, pots visitar el nostre article Aplicar estil a les taules quan acabis d’aquí.

- -

En aquest mòdul no ens centrarem en el CSS, però et proporcionem un full d'estil CSS de mínims perquè l’usis per fer les taules més llegibles que amb els valors per defecte que s'obtenen sense afegir cap tipus d'estil. Pots trobar el full d'estil aquí i també hi pots trobar una plantilla HTML on aplicar el full d'estil; tot plegat et donarà un bon punt de partida per a experimentar amb taules HTML.

- -

Quan NO s’han d’usar taules HTML?

- -

Les taules HTML s'han d'utilitzar per a presentar dades tabulades; estan dissenyades per a això. Malauradament, molta gent utilitza taules HTML per a fer disseny de pàgines web; per exemple, una fila per a contenir la capçalera, una fila per a contenir les columnes de contingut, una fila per a contenir el peu de pàgina, etc. En pots trobar més detalls i un exemple en l’article Disseny de pàgines web en el nostre mòdul d'aprenentatge de l'accessibilitat. Això es feia servir sovint perquè la compatibilitat CSS dels navegadors solia ser molt precària; avui dia els dissenys de pàgines web amb taules són molt menys comuns, però encara se’n poden veure en alguns racons de la xarxa web.

- -

En resum, l'ús de taules per al disseny de pàgines web en lloc de les tècniques de disseny CSS és una mala idea. Les raons principals són les següents:

- -
    -
  1. El disseny de pàgines web amb taules redueixen l'accessibilitat dels usuaris amb discapacitats visuals: Els lectors de pantalla que fan servir les persones amb discapacitat visual interpreten les etiquetes d’una pàgina HTML i en llegeixen el contingut a l'usuari. Com que les taules no són l'eina adequada per al disseny de pàgines web i l’etiquetatge és més complex que amb les tècniques de disseny CSS, la sortida pels lectors de pantalla serà confusa per a aquests usuaris.
    2. -
  2. El disseny de pàgines web amb taules genera una sopa d'etiquetes: Com s’ha dit, els dissenys de pàgines web amb taules en general involucren estructures d’etiquetatge més complexes que les tècniques de disseny adequades. Això pot generar un codi més difícil d'escriure, mantenir i depurar.
    3. -
  3. Les taules no tenen adaptabilitat automàtica: Quan s'utilitzen esquemes de contenidors adequats (com ara {{htmlelement("header")}}, {{htmlelement("section")}}, {{htmlelement("article")}} o {{htmlelement("div")}}), els valors per defecte de les amplades són el 100% de la de l’element pare. En canvi, les taules estan dimensionades per defecte d'acord amb el contingut que inclouen, de manera que calen mesures addicionals per a aconseguir aplicar estils de disseny de taula que funcionin de manera eficient en una varietat de dispositius.
    4. -
- -

Aprenentatge actiu: Crea la teva primera taula

- -

Hem parlat de prou teoria sobre les taules; ara ens cabussarem en un exemple pràctic i construirem una taula senzilla.

- -
    -
  1. En primer lloc, fes una còpia local de blank-template.html i minimal-table.css en un directori nou del teu equip local.
    2. -
  2. El contingut de cada taula està delimitat per aquestes dues etiquetes: <table></table>. Afegeix-les al cos del teu codi HTML.
    3. -
  3. El contenidor més petit que hi ha dins d'una taula és una cel·la de taula, que es crea amb un element <td> ('td' ve de table data, 'dades de la taula'). Afegeix el següent entre les etiquetes de la teva taula: - 
    <td>Hi, I'm your first cell.</td>
    -
    4. -
  4. Si vols fer una fila de quatre cel·les, has de copiar aquestes etiquetes tres vegades més. Actualitza els continguts de la teva taula perquè et quedi així: - 
    <td>Hi, I'm your first cell.</td>
-<td>I'm your second cell.</td>
-<td>I'm your third cell.</td>
-<td>I'm your fourth cell.</td>
    -
    5. -
- -

Observa que les cel·les no es col·loquen l’una sota de l'altra, sinó que s'alineen automàticament les unes amb les altres a la mateixa fila. Cada element <td> crea una sola cel·la, i totes juntes formen la primera fila. Cada cel·la que afegeixes fa la fila més llarga.

- -

Per evitar que aquesta fila continuï creixent i començar a col·locar les cel·les següents en una segona fila, hem d'utilitzar l'etiqueta <tr> ('tr' ve de table raw, ’fila de taula'). Ara explicarem això.

- -
    -
  1. Col·loca les quatre cel·les que has creat entre etiquetes <tr>, d’aquesta manera: - - 
    <tr>
-  <td>Hi, I'm your first cell.</td>
-  <td>I'm your second cell.</td>
-  <td>I'm your third cell.</td>
-  <td>I'm your fourth cell.</td>
-</tr>
    -
    2. -
  2. Ja has creat una fila, ara intenta fer-ne una o dues més; cada fila ha d’estar etiquetada en un element <tr> addicional, i cada cel·la ha d’estar continguda entre etiquetes <td>.
    3. -
- -

Això hauria de donar com a resultat una taula, com la que es veu a continuació:

- - - - - - - - - - - - - - - - -
Hi, I'm your first cell.I'm your second cell.I'm your third cell.I'm your fourth cell.
Second row, first cell.Cell 2.Cell 3.Cell 4.
- -
-

Nota: També la pots trobar a GitHub, com simple-table.html (i també pots consultar-la en l’exemple en viu).

-
- -

Afegeix capçaleres amb elements <th>

- -

Ara centrem la nostra atenció en les capçaleres de taula; són cel·les especials que van al començament d'una fila o columna i defineixen el tipus de dades que conté la fila o la columna (per exemple, observa les cel·les «Breed» i «Age» en el primer exemple que es mostra en aquest article). Per a il·lustrar per què són útils, dona una ullada a la taula d'exemple següent. Primer, el codi d’origen:

- -
<table>
-  <tr>
-    <td>&nbsp;</td>
-    <td>Knocky</td>
-    <td>Flor</td>
-    <td>Ella</td>
-    <td>Juan</td>
-  </tr>
-  <tr>
-    <td>Breed</td>
-    <td>Jack Russell</td>
-    <td>Poodle</td>
-    <td>Streetdog</td>
-    <td>Cocker Spaniel</td>
-  </tr>
-  <tr>
-    <td>Age</td>
-    <td>16</td>
-    <td>9</td>
-    <td>10</td>
-    <td>5</td>
-  </tr>
-  <tr>
-    <td>Owner</td>
-    <td>Mother-in-law</td>
-    <td>Me</td>
-    <td>Me</td>
-    <td>Sister-in-law</td>
-  </tr>
-  <tr>
-    <td>Eating Habits</td>
-    <td>Eats everyone's leftovers</td>
-    <td>Nibbles at food</td>
-    <td>Hearty eater</td>
-    <td>Will eat till he explodes</td>
-  </tr>
-</table>
- -

Ara, la representació de la taula:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
KnockyFlorEllaJuan
BreedJack RussellPoodleStreetdogCocker Spaniel
Age169105
OwnerMother-in-lawMeMeSister-in-law
Eating HabitsEats everyone's leftoversNibbles at foodHearty eaterWill eat till he explodes
- -

El problema és que, encara que pots anar intuint què passa aquí, fer el creuament de les dades no resulta tan fàcil com podria ser. Seria molt millor si les capçaleres de la columna i de la fila destaquessin d'alguna manera.

- -

Aprenentatge actiu: capçaleres de taula

- -

Intentem millorar aquesta taula.

- -
    -
  1. En primer lloc, fes una còpia local dels fitxers dogs-table.html i minimal-table.css en un directori nou del teu equip local. L'HTML conté el mateix exemple Dogs que has vist abans.
    2. -
  2. Perquè les capçaleres de taula es reconeguin com capçaleres, tant visualment com semànticament, pots utilitzar l'element <th> ('th' ve de table header, 'capçalera de taula'). Funciona exactament de la mateixa manera que un element <td>, però denota una capçalera, que no és una cel·la normal. Entra al codi HTML i canvia tots els elements <td> que delimiten les cel·les de capçalera de la taula per elements <th>.
    3. -
  3. Desa l'HTML i carrega’l en un navegador; ara hauria de mostrar les cel·les de capçalera amb aspecte de capçaleres.
    4. -
- -
-

Nota: En GitHub pots trobar el nostre exemple acabat en dogs-table-fixed.html (i també el pots consultar en l’exemple en viu).

-
- -

Per què són útils les capçaleres?

- -

Ja hem respost parcialment aquesta pregunta; quan busques dades, resulta més fàcil trobar-les quan les capçaleres destaquen clarament i el disseny es veu més bé en general.

- -
-

Nota: Les capçaleres de les taules venen amb un estil per defecte fins i tot quan no afegeixes el teu estil de taula propi, perquè destaquin: el text està en negreta i centrat.

-
- -

Les capçaleres de les taules també presenten un altre avantatge: juntament amb l'atribut scope (que veurem en l’article següent), fa les taules més accessibles perquè cada capçalera s’associa amb totes les dades de la mateixa fila o columna. Els lectors de pantalla són capaços de llegir tota una fila o tota una columna de dades alhora, i això és força útil.

- -

Cel·les que ocupen diverses files i columnes

- -

A vegades volem que les cel·les abastin diverses files o columnes. Prenguem l’exemple senzill següent, que mostra uns quants noms d’animals comuns. Volem que en alguns casos es mostrin els noms dels mascles i els de les femelles al costat del nom de l'animal, però d’altres vegades no ho volem, sinó que volem que el nom de animal abasti tota l’amplada de la taula.

- -

L’etiquetatge inicial és el següent:

- -
<table>
-  <tr>
-    <th>Animals</th>
-  </tr>
-  <tr>
-    <th>Hippopotamus</th>
-  </tr>
-  <tr>
-    <th>Horse</th>
-    <td>Mare</td>
-  </tr>
-  <tr>
-    <td>Stallion</td>
-  </tr>
-  <tr>
-    <th>Crocodile</th>
-  </tr>
-  <tr>
-    <th>Chicken</th>
-    <td>Cock</td>
-  </tr>
-  <tr>
-    <td>Rooster</td>
-  </tr>
-</table>
- -

Però la sortida no ens dona exactament el que volem:

- - - - - - - - - - - - - - - - - - - - - - - - - - - -
Animals
Hippopotamus
HorseMare
Stallion
Crocodile
ChickenCock
Rooster
- -

Necessitem una manera d'aconseguir que «Animals», «Hippopotamus» i «Crocodile» ocupin l’amplada de dues columnes, i «Horse» i «Chicken» ocupin més de dues files cap avall. Afortunadament, les capçaleres de taula i les cel·les tenen els atributs colspan i rowspan, que ens permeten fer precisament aquestes coses. Totes dues propietats accepten per valor un nombre sense unitats, que és igual al nombre de files o columnes que es vol abastar. Per exemple, colspan="2" fa que una cel·la ocupi dues columnes.

- -

Utilitzem colspan i rowspan per a millorar aquesta taula.

- -
    -
  1. En primer lloc, fes una còpia local dels fitxers animals-table.html i minimal-table.css en un directori nou del teu equip local. L'HTML conté el mateix exemple amb animals que has vist abans.
    2. -
  2. A continuació, utilitza colspan perquè «Animals», «Hippopotamus» i «Crocodile» ocupin l’amplada de dues columnes.
    3. -
  3. Finalment, utilitza rowspan perquè «Horse» i «Chicken» ocupin dues files.
    4. -
  4. Desa el codi i obre’l en el navegador per a veure com millora.
    5. -
- -
-

Nota: En GitHub pots trobar el nostre exemple acabat en animals-table-fixed.html (també el pots consultar en l’exemple en viu).

-
- - -
- -

Aplicar a les columnes un estil comú

- -

Abans de continuar endavant, en aquest article explicarem una darrera característica. HTML té un mètode per a definir la informació d'estil per a tota una columna de dades en un sol lloc; es tracta dels elements <col> i <colgroup>. Aquests elements existeixen perquè pot ser una mica empipador i ineficient haver d'especificar l'estil de les columnes; en general, la informació d'estil s'ha d'especificar per a cada <td> o <th> de la columna, o s’ha d’utilitzar un selector complex com {{cssxref(":nth-child()")}}.

- -

Considerem l’exemple següent:

- -
<table>
-  <tr>
-    <th>Data 1</th>
-    <th style="background-color: yellow">Data 2</th>
-  </tr>
-  <tr>
-    <td>Calcutta</td>
-    <td style="background-color: yellow">Orange</td>
-  </tr>
-  <tr>
-    <td>Robots</td>
-    <td style="background-color: yellow">Jazz</td>
-  </tr>
-</table>
- -

Ens dona el resultat següent:

- - - - - - - - - - - - - - - - -
Data 1Data 2
CalcuttaOrange
RobotsJazz
- -

Això no és l'ideal, perquè hem de repetir la informació d'estil en les tres cel·les de la columna (probablement en un projecte real tindríem un conjunt de classes en totes tres i l'estil especificat en un full d'estil separat). En comptes d’això, podem especificar la informació una vegada en un element <col>. Els elements <col> s'especifiquen dins d'un contenidor <colgroup> just a sota de l'etiqueta d'obertura <table>. Podem crear el mateix efecte que veiem a dalt si especifiquem la nostra taula de la següent manera:

- -
<table>
-  <colgroup>
-    <col>
-    <col style="background-color: yellow">
-  </colgroup>
-  <tr>
-    <th>Data 1</th>
-    <th>Data 2</th>
-  </tr>
-  <tr>
-    <td>Calcutta</td>
-    <td>Orange</td>
-  </tr>
-  <tr>
-    <td>Robots</td>
-    <td>Jazz</td>
-  </tr>
-</table>
- -

De fet, hem definit dues «columnes d'estil», una que especifica la informació d'estil per a cadascuna de les columnes. No volem aplicar estil a la primera columna, per això encara hem d'incloure un element en blanc <col>; si no ho fem, l'estil s'aplicarà justament a la primera columna.

- -

Si volem aplicar la informació d'estil a totes dues columnes, podem incloure un element <col> que inclogui un atribut span, com aquest:

- -
<colgroup>
-  <col style="background-color: yellow" span="2">
-</colgroup>
- -

Igual que colspan i rowspan, span pren un valor numèric sense unitats que especifica el nombre de columnes a les quals volem aplicar l'estil.

- -

Aprenentatge actiu: colgroup i col

- -

Ara és el moment de fer-ho tu mateix.

- -

A continuació pots veure l'horari d'una professora d'idiomes. Divendres té una classe nova d'ensenyament d'holandès durant tot el dia, però també fa classes d’alemany algunes hores el dimarts i el dijous. Vol que destaquin les columnes dels dies que fa classes.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
MonTuesWedThursFriSatSun
1st periodEnglishGermanDutch
2nd periodEnglishEnglishGermanDutch
3rd periodGermanGermanDutch
4th periodEnglishEnglishDutch
- -

Tornar a crear la taula seguint aquests passos:

- -
    -
  1. En primer lloc, fes una còpia local de l'arxiu timetable.html en un directori nou del teu equip local. L'HTML conté la mateixa taula que hem vist abans, menys la informació de les columnes d'estil.
    2. -
  2. Afegeix un element <colgroup> a la part superior de la taula, just a sota de l'etiqueta <table>, en què afegirem els elements <col>.
    3. -
  3. No apliquem cap estil a les dues primeres columnes.
    4. -
  4. Afegim un color de fons a les columnes segona i tercera. El valor de l'atribut style és background-color:#97DB9A;
    5. -
  5. Establim una amplada de separació en la quarta columna. El valor de l'atribut style és width: 42px;
    6. -
  6. Afegim un color de fons a la cinquena columna. El valor de l'atribut style és background-color:#97DB9A;
    7. -
  7. Afegim un color de fons diferent, més una vora, a la sisena columna, per a indicar que és un dia especial perquè dona una classe nova. Els valors de l'atribut style són background-color:#DCC48E; border:4px solid #C1437A;
    8. -
  8. Els dos últims dies són dies lliures; el valor de l'atribut style és width: 42px;
    9. -
- -

Continua tu amb l'exemple i a veure com et va. Si t’encalles o vols revisar-lo, pots trobar la nostra versió en GitHub com timetable-fixed.html (també el pots consultar en l’exemple en viu).

- -

Resum

- -

Amb això concloem gairebé els conceptes bàsics de les taules HTML. En l’article següent veurem algunes característiques una mica més avançades de les taules i començarem a pensar en l'accessibilitat per a les persones amb discapacitat visual.

- -
{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}
diff --git a/files/ca/learn/html/taules_html/index.html b/files/ca/learn/html/taules_html/index.html deleted file mode 100644 index add81f874e..0000000000 --- a/files/ca/learn/html/taules_html/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: Taules HTML -slug: Learn/HTML/Taules_HTML -tags: - - Article - - Beginner - - CodingScripting - - Guide - - HTML - - Landing - - Module - - Tables -translation_of: Learn/HTML/Tables ---- -
{{LearnSidebar}}
- -

Una tasca molt comuna en HTML és estructurar dades tabulars, té una sèrie d'elements i atributs per a aquest propòsit. Juntament amb una mica de CSS per el disseny, HTML fa que sigui fàcil de visualitzar taules d'informació a la web, com ara el pla de lliçó de l'escola, els horaris a la piscina del lloc, estadístiques sobre els dinosaures favorits o equip de futbol. Aquest mòdul us porta a través de tot el que es necessita saber sobre l'estructuració de dades tabulars utilitzant HTML.

- -

Requisits previs

- -

Abans d'iniciar aquest mòdul, ja hauria d'haver cobert els conceptes bàsics d'HTML - vegeu Introducció a HTML.

- -
-

Nota: Si es treballa en un ordinador/tauleta/altre dispositiu el qual no té la capacitat de crear els vostres propis arxius, es pot portar a terme (la majoria) els exemples amb un programa de codificació en línia, com ara JSBin o Thimble.

-
- -

Guies

- -

Aquest mòdul conté els següents articles:

- -
-
Taules HTML bàsiques
-
-

Aquest article ens ajudarà a començar amb les taules HTML, que cobreix els conceptes més bàsics com ara files i cel·les, encapçalats, fent que les cel·les abastin múltiples columnes i files, i com agrupar totes les cel·les d'una columna per a propòsits d'estil.

-
-
Taules HTML característiques avançades i accessibilitat
-
En el segon article d'aquest mòdul, ens fixarem en algunes de les característiques més avançades de les taules HTML - com llegendes/resums i agrupament de files en la taula, seccions de cos i peu - així com l'accessibilitat de les taules per als usuaris amb discapacitat visual.
-
- -

Avaluació

- -
-
Estructuració de dades dels planetes
-
En la nostra avaluació de la taula, us proporcionarem algunes dades sobre els planetes del nostre sistema solar i aconseguir una estructura dins d'una taula HTML.
-
diff --git "a/files/ca/learn/html/taules_html/taula_html_caracter\303\255stiques_avan\303\247ades_i_laccessibilitat/index.html" "b/files/ca/learn/html/taules_html/taula_html_caracter\303\255stiques_avan\303\247ades_i_laccessibilitat/index.html" deleted file mode 100644 index 69b7edf725..0000000000 --- "a/files/ca/learn/html/taules_html/taula_html_caracter\303\255stiques_avan\303\247ades_i_laccessibilitat/index.html" +++ /dev/null @@ -1,462 +0,0 @@ ---- -title: 'Taules HTML: característiques avançades i accessibilitat' -slug: Learn/HTML/Taules_HTML/Taula_HTML_característiques_avançades_i_laccessibilitat -tags: - - Accessibility - - Advanced - - Article - - Beginner - - CodingScripting - - HTML - - Headers - - Learn - - caption - - nesting - - scope - - sumary - - table - - tbody - - tfoot - - thead -translation_of: Learn/HTML/Tables/Advanced ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}
- -

En el segon article d'aquest mòdul ens fixem en algunes de les característiques més avançades de les taules HTML, com ara les llegendes/resums i l'agrupament de files en seccions de capçalera, cos i peu de taula, i en l'accessibilitat de les taules per als usuaris amb discapacitat visual.

- - - - - - - - - - - - -
Requisits previs:Fonaments d'HTML (consulta la Introducció a l’HTML).
Objectiu:Aprendre les característiques més avançades de les taules HTML i qüestions d'accessibilitat de les taules.
- -

Afegir un títol a la taula amb <caption>

- -

Pots donar a la taula una títol, que es posa dins d'un element {{htmlelement("caption")}} que està imbricat dins de l'element {{htmlelement("table")}}. Aquest títol s'ha de posar just sota l'etiqueta d'obertura <table>.

- -
<table>
-  <caption>Dinosaurs in the Jurassic period</caption>
-
-  ...
-</table>
- -

Com es pot deduir del breu exemple anterior, el títol està destinat a contenir una descripció del contingut de la taula. Això és útil per a tots els lectors que volen tenir una idea ràpida de si la taula els és útil a partir de donar una ullada a la pàgina, però ho és en particular per als usuaris cecs perquè, en lloc d’haver-se d’esperar que el lector de pantalla llegeixi el contingut de moltes cel·les per a esbrinar quina informació proporciona la taula, podran decidir a partir del títol si llegeixen la taula amb més detall.

- -

Un títol es col·loca directament sota l'etiqueta <table>.

- -
-

Nota: Per a proporcionar una descripció també pots utilitzar l'atribut {{htmlattrxref("summary","table")}} en l'etiqueta <table>, que els lectors de pantalla també poden llegir. Tanmateix, et recomanem que empris l'element <caption>, perquè l’atribut {{htmlattrxref("summary","table")}} està {{glossary("desaprovat")}} per l'especificació HTML 5, i a més els usuaris vidents no el poden llegir (no apareix a la pàgina).

-
- -

Aprenentatge actiu: Afegir un títol

- -

Tornem al primer exemple de l'article anterior i observem com es fa això.

- -
    -
  1. Obre l’exemple de la taula horària de la professora d'idiomes del final de l’article Fonaments bàsics de les taules HTML, o fes una còpia local de l'arxiu timetable-fixed.html
    2. -
  2. Afegeix un títol adequat a la taula.
    3. -
  3. Desa el codi i obre’l en el navegador, i observa com es veu.
    4. -
- -
-

Nota: Pots trobar a GitHub la nostra versió del fitxer timetable-caption.html; i també el pots consultar en l’exemple en viu).

-
- -

Afegir estructura amb <thead>, <tfoot> i <tbody>

- -

A mesura que l’estructura de les taules es fa més complexa, és útil aprofundir en la definició estructural. Una manera clara de fer això és amb l'ús de {{htmlelement("thead")}}, {{htmlelement("tfoot")}} i {{htmlelement("tbody")}}, que et permeten etiquetar les seccions de capçalera, peu i cos de la taula.

- -

Aquests elements no fan la taula més accessible als usuaris de lectors de pantalla, i no proporcionen cap millora visual, però són molt útils per a l'aplicació d’estil i el disseny de pàgina web perquè actuen com «ganxos» amb què s’afegeix CSS a la taula. Podem esmentar com a exemples interessants que es repeteixin en cada pàgina impresa la capçalera i el peu de pàgina d’una taula molt llarga, o que el cos de la taula es mostri en una sola pàgina i el contingut disponible es pugui desplaçar amunt i avall.

- -

Per a utilitzar aquests elements cal tenir en compte el següent:

- - - -
-

Nota: <tbody> sempre s'inclou implícitament en totes les taules, si no s'especifica en el codi. Per comprovar-ho, obre un dels exemples anteriors que no inclogui <tbody> i observa el codi HTML amb les eines de desenvolupador del navegador; observa que el navegador hi ha afegit aquesta etiqueta. Et podries demanar per què molestar-nos a incloure-la; s’ha de fer, perquè ens proporciona més control sobre l’estructura de la taula i l'estil.

-
- -

Aprenentatge actiu: afegir estructura a la taula

- -

Posarem aquests elements nous en acció.

- -
    -
  1. Primer de tot, fes una còpia local de spending-record.html i minimal-table.css en una carpeta nova.
    2. -
  2. Obre’l en un navegador; observa que no està malament, però es podria millorar. La fila «SUM» conté una suma de les quantitats que s’han gastat i no sembla que estigui en el lloc adequat, i falten alguns detalls de codi.
    3. -
  3. Posa les capçaleres òbvies de fila dins d'un element <thead>, la fila «SUM» dins d'un element <tfoot>, i la resta del contingut dins d'un element <tbody>.
    4. -
  4. Desa i actualitza, i observa que en afegir l'element <tfoot> la fila «SUM» s’ha col·locat a la part inferior de la taula.
    5. -
  5. A continuació, afegeix un atribut {{htmlattrxref("colspan","td")}} perquè la cel·la «SUM» ocupi les quatre primeres columnes, de manera que el nombre aparegui a la part inferior de la columna «Cost».
    6. -
  6. Afegeix una mica d'estil extra a la taula i observa la utilitat d’aplicar CSS a aquests elements. Observa que en la capçalera (head) del document HTML hi ha un element {{htmlelement("style")}} buit. Afegirem dins d'aquest element les línies de codi CSS següents: - 
    tbody {
-  font-size: 90%;
-  font-style: italic;
-}
-
-tfoot {
-  font-weight: bold;
-}
-
    -
    7. -
  7. Desa i actualitza, i dona una ullada al resultat. Si els elements <tbody> i <tfoot> no estan a lloc, serà molt més complicat escriure selectors/regles i aplicar-los el mateix estil.
    8. -
- -
-

Nota: No esperem que entenguis del tot el CSS en aquest moment. N’aprendràs més en els nostres mòduls dedicats al CSS (Introducció al CSS és un bon lloc per on començar; també hi ha un article concret sobre aplicar estil a les taules).

-
- -

La taula acabada ha de presentar un aspecte semblant a aquest:

- - - -

{{ EmbedLiveSample('Hidden_example', '100%', 300) }}

- -
-

Nota: Pots trobar el fitxer a GitHub com spending-record-finished.html (i també consultar l’exemple en viu).

-
- -

Taules imbricades

- -

És possible imbricar una taula dins d'una altra, sempre que s'hi inclogui l'estructura completa, que inclou l'element <table>. No és en aconsellable en general perquè dona un marcatge més confús i menys accessible als usuaris de lectors de pantalla, i perquè en molts casos es pot resoldre afegint cel·les/files/columnes addicionals a la taula d’origen. Això no obstant, de vegades és necessari, per exemple, per a importar contingut fàcilment d'altres fonts.

- -

El marcatge següent mostra una imbricació de taules senzilla:

- -
<table id="table1">
-  <tr>
-    <th>title1</th>
-    <th>title2</th>
-    <th>title3</th>
-  </tr>
-  <tr>
-    <td id="nested">
-      <table id="table2">
-        <tr>
-          <td>cell1</td>
-          <td>cell2</td>
-          <td>cell3</td>
-        </tr>
-      </table>
-    </td>
-    <td>cell2</td>
-    <td>cell3</td>
-  </tr>
-  <tr>
-    <td>cell4</td>
-    <td>cell5</td>
-    <td>cell6</td>
-  </tr>
-</table>
- -

La sortida presenta aquest aspecte:

- - - - - - - - - - - - - - - - - - - -
title1title2title3
- - - - - - - - -
cell1cell2cell3
- 		cell2cell3
cell4cell5cell6
- -

Taules per a usuaris amb discapacitats visuals

- -

Recapitulem breument sobre com la manera de fer servir les taules de dades. Una taula pot ser una eina molt útil perquè ens dona un accés ràpid a les dades i ens permet buscar-hi valors. Per exemple, només cal un cop d'ull breu a la taula de sota per a esbrinar quants anells es van vendre a Gant (Gent) l'agost passat. Per a entendre la informació, fem associacions visuals entre les dades i les capçaleres de les files i columnes d'aquesta taula.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Items Sold August 2016
ClothesAccessories
TrousesSkirtsDressesBraceletsRings
BelgiumAntwerp5622437223
Gent4618506115
Brussels5127386928
The NetherlandsAmsterdam8934698538
Utrecht8012433619
- -

Però... i si no pots fer associacions visuals? Com es pot llegir una taula com l'anterior, llavors? Les persones que tenen alguna discapacitat visual sovint utilitzen lectors de pantalla que els llegeixen la informació de les pàgines web. Això no és cap problema quan es llegeix text sense format, però la interpretació d'una taula pot ser tot un repte per a una persona cega. Tanmateix, amb el marcatge adequat, les associacions visuals es poden substituir per unes de programàtiques.

- -

En aquesta secció de l'article t'oferim tècniques que confereixen a les taules una accessibilitat màxima.

- -

Utilitza capçaleres per a les files i les columnes

- -

Els lectors de pantalla identifiquen totes les capçaleres i les utilitzen per a fer associacions programàtiques entre les capçaleres i les cel·les amb què es relacionen. La combinació de les capçaleres de les files i les columnes identifica i interpreta les dades que hi ha en cada cel·la perquè l'usuari lector de pantalla pugui interpretar la taula de manera similar a com ho fa un usuari sense discapacitats visuals.

- -

Ja hem exposat les capçaleres en l’article anterior; consulta Afegir capçaleres amb elements <th>.

- -

L'atribut scope

- -

Un tema nou d'aquest article és l'atribut {{htmlattrxref("scope","th")}}, que s’afegeix a l'element <th> i informa els lectors de pantalla exactament de quines cel·les són capçalera les cel·les de capçalera; per exemple, la capçalera és de la fila o de la columna en què es troba? Si tornem enrere al nostre exemple de registre de despeses, les capçaleres de columna es podrien definir sense ambigüitats com capçaleres de columna de la manera següent:

- -
<thead>
-  <tr>
-    <th scope="col">Purchase</th>
-    <th scope="col">Location</th>
-    <th scope="col">Date</th>
-    <th scope="col">Evaluation</th>
-    <th scope="col">Cost (€)</th>
-  </tr>
-</thead>
- -

I cada fila podria tenir una capçalera definida de la mateixa manera (si afegíssim capçaleres a les files, a més de les capçaleres de columna):

- -
<tr>
-  <th scope="row">Haircut</th>
-  <td>Hairdresser</td>
-  <td>12/09</td>
-  <td>Great idea</td>
-  <td>30</td>
-</tr>
- -

Els lectors de pantalla reconeixen un marcatge estructurat com aquest i permeten als usuaris llegir tota una columna o tota una fila alhora, per exemple.

- -

scope té dos valors possibles més; colgroup i rowgroup. S'utilitzen per als títols que es col·loquen a la part superior de diverses columnes o files. Si tornem enrere a la taula d’exemple dels articles venuts l’agost del 2016 (Items Sold August 2016) que hi ha al començament d'aquesta secció de l'article, pots observar que la cel·la «Clothes» fa de capçalera de les cel·les «Trousers», «Skirts» i «Dresses». Totes aquestes cel·les haurien de marcar-se com capçaleres (<th>), però «Clothes» és un títol de nivell superior i defineix els altres tres subtítols. Per tant, «Clothes» ha de tenir un atribut scope="colgroup", mentre que les altres tindrien un atribut scope="col".

- -

Els atributs id i headers

- -

Una alternativa a l'ús de l'atribut scope és utilitzar els atributs {{htmlattrxref("id")}} i {{htmlattrxref("headers", "td")}} per a crear associacions entre les capçaleres i les cel·les. La forma en què s'utilitzen és la següent:

- -
    -
  1. Afegeix un id únic per a cada element <th>.
    2. -
  2. Afegeix un atribut headers per a cada element <td>. Cada atribut headers ha d’incloure una llista dels id de tots els elements <th> que actuen de capçalera per a aquesta cel·la, separats per espais.
    3. -
- -

Això dona a la taula HTML una definició explícita de la posició de cada cel·la de la taula, definida per les capçaleres de cada columna i de cada fila de què forma part, de manera semblant a un full de càlcul. Perquè funcioni bé, la taula necessita les dues capçaleres, de fila i de columna.

- -

Tornem al nostre exemple de les despeses; dos fragments anteriors es podrien reescriure així:

- -
<thead>
-  <tr>
-    <th id="purchase">Purchase</th>
-    <th id="location">Location</th>
-    <th id="date">Date</th>
-    <th id="evaluation">Evaluation</th>
-    <th id="cost">Cost (€)</th>
-  </tr>
-</thead>
-<tbody>
-<tr>
-  <th id="haircut">Haircut</th>
-  <td headers="location haircut">Hairdresser</td>
-  <td headers="date haircut">12/09</td>
-  <td headers="evaluation haircut">Great idea</td>
-  <td headers="cost haircut">30</td>
-</tr>
-
-  ...
-
-</tbody>
- -
-

Nota: Aquest mètode crea associacions molt precises entre les capçaleres i les cel·les de dades però utilitza molt més etiquetatge i no deixa gens d’espai per a errors. L'enfocament de scope sol ser prou per a la majoria de les taules.

-
- -

Aprenentatge actiu: Juga amb l’scope i les capçaleres

- -
    -
  1. Per a aquest exercici final, et proposem de fer, primer, còpies locals dels fitxers items-sold.html i minimal-table.css, en un directori nou.
    2. -
  2. A continuació, afegeix els atributs scope apropiats per a fer aquesta taula més adequada.
    3. -
  3. Per acabar, fes una altra còpia dels fitxers inicials i millora l’accessibilitat de la taula utilitzant els atributs id i header.
    4. -
- -
-

Nota: Pots verificar el teu treball comparant-lo amb els nostres exemples acabats, que pots consultar a items-sold-scope.html (o també consultar l’exemple en viu) i items-sold-headers.html (o també consultar l’exemple en viu).

-
- -

Resum

- -

Es poden aprendre més coses sobre les taules en HTML, però de fet t’hem proporcionat tot el que et cal saber ara mateix. En aquest punt, pot ser que vulguis aprendre com aplicar estil a les taules HTML; ves a l’article Aplicar estil a les taules.

- -
{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}
diff --git a/files/ca/learn/javascript/client-side_web_apis/manipulating_documents/index.html b/files/ca/learn/javascript/client-side_web_apis/manipulating_documents/index.html new file mode 100644 index 0000000000..83a6f18c98 --- /dev/null +++ b/files/ca/learn/javascript/client-side_web_apis/manipulating_documents/index.html @@ -0,0 +1,147 @@ +--- +title: JavaScript i CSS +slug: Web/Guide/CSS/Inici_en_CSS/JavaScript +tags: + - CSS + - 'CSS:Getting_Started' + - Example + - Guide + - Intermediate + - NeedsUpdate + - Web +translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents +translation_of_original: Web/Guide/CSS/Getting_started/JavaScript +--- +

{{ CSSTutorialTOC() }}

+ +

Aquesta és la primera secció de la Part II del tutorial CSS. La Part II conté alguns exemples que mostren l'abast de CSS utilitzat amb altres tecnologies web i Mozilla.

+ +

Cada pàgina en la part II il·lustra com interactua amb CSS alguna altra tecnologia. Aquestes pàgines no estan dissenyades per ensenyar com utilitzar aquestes altres tecnologies. Aneu a altres tutorials per aprendre sobre elles en detall.

+ +

En lloc d'això, aquestes pàgines estan dissenyades per il·lustrar els molts usos de CSS. Per utilitzar aquestes pàgines, heu de tenir algun coneixement de CSS, però no cal cap coneixement d'unes altres tecnologies.

+ +

Secció anterior (Part I): Mitjà
+ Secció següent: SVG

+ +

Informació: JavaScript

+ +

JavaScript és un llenguatge de programació. JavaScript s'utilitza àmpliament per proporcionar interactivitat en els llocs web i aplicacions.

+ +

JavaScript pot interactuar amb les fulles d'estil, permetent-li escriure programes que canvien l'estil d'un document de forma dinàmica.

+ +

Hi ha tres maneres de fer això:

+ + + + + + + + + + +
Més detalls
Per obtenir més informació sobre JavaScript, vegeu la pàgina de JavaScript en aquest wiki.
+ +

Acció: Una demostració de JavaScript

+ +

Feu un nou document HTML, doc5.html. Copieu i enganxeu el contingut d'aquí, assegurar-vos de deplaçar-vos per obtenir tota ella;

+ +
+
<!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>Click Me</button>
+
+</body>
+</html>
+
+
+ +

Feu una nova fulla d'estil CSS, style5.css. Copieu i enganxeu el contingut d'aquí:

+ +
+
  #square {
+    width: 120px;
+    height: 120px;
+    border: 2px inset gray;
+    margin-bottom: 1em;
+  }
+
+  button {
+    padding: .5em 2em;
+  }
+
+ +

Feu un nou arxiu de text, script5.js. Copieu i enganxeu el contingut d'aquí:

+ +
+
// JavaScript demonstration
+var changeBg = function (event) {
+    console.log("method called");
+    var me = event.target
+    ,   square = document.getElementById("square");
+    square.style.backgroundColor = "#ffaa44";
+    me.setAttribute("disabled", "disabled");
+    setTimeout(function () { clearDemo(me) }, 2000);
+}
+
+function clearDemo(button) {
+    var square = document.getElementById("square");
+    square.style.backgroundColor = "transparent";
+    button.removeAttribute("disabled");
+}
+
+var button = document.querySelector("button");
+button.addEventListener("click", changeBg);
+console.log(button);
+
+
+ +

Obriu el document en el navegador i premeu el botó o vegeu una mostra del treball a continuació.

+ +

{{ EmbedLiveSample('Action:_A_JavaScript_demonstration', 320,320) }}

+ +
Notes importants sobre aquesta demostració: + + +
+ +
+

De fet, el document HTML anterior pot tenir una condició de competència  (informació relacionada en aquesta pàgina W3C), ja que té l'element script dins de l'element head podent inicar-se l'execució del codi JavaScript abans que la pàgina acabi de carregar-se i el codi no funcionarà perquè la variable button serà nul.la. En moure l'element script sota de l'element button (just damunt de l'etiqueta de tancament body) en el marcat HTML hauria de resoldre aquest problema.

+
+ + + + + + + + +
Repte
Canvieu el script perquè el quadre salti a la dreta 20 em quan el seu color canviï, i salti cap a enrere després.
+ +

Veure la solució per el repte.

+ +

I ara què?

+ +

Si teniu dificultats per entendre aquesta pàgina o si teniu altres comentaris al respecte, si us plau, contribuïu a la vostre pàgina de discussió.

+ +

En aquesta demostració, el document HTML vincula el script tot i que només l'element button utilitza el script. Mozilla estén CSS de manera que pugui vincular codi JavaScript (i també contingut i altres fulles d'estil) per als elements seleccionats. La pàgina següent mostra això: vincles XBL

diff --git a/files/ca/learn/javascript/objects/index.html b/files/ca/learn/javascript/objects/index.html new file mode 100644 index 0000000000..187f7930f4 --- /dev/null +++ b/files/ca/learn/javascript/objects/index.html @@ -0,0 +1,362 @@ +--- +title: Introducció al Javascript orientat a Objectes +slug: Web/JavaScript/Introducció_al_Javascript_orientat_a_Objectes +translation_of: Learn/JavaScript/Objects +translation_of_original: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript +--- +
{{jsSidebar("Introductory")}}
+ +

JavaScript és orientat a objectes des del nucli, amb unes capacitats potents, flexibles {{Glossary("OOP")}}. Aquest article comença amb la introducció de la programació orientada a objectes, després es revisa el model d'objectes de Javascript, i finalment es mostren els conceptes de la programació orientada a objectes en JavaScript.

+ +

Revisió de JavaScript

+ +

Si no us sentiu segurs amb els conceptes de Javascript com ara variables, tipus, funcions, i àmbits podeu llegir sobre aquests temes en Una reintroducció a JavaScript. També podeu consultar la Guia de JavaScript.

+ +

Programació orientada a Objectes

+ +

La programació orientada a Objectes és un paradigma de programació que usa l'abstracció per crear models basants en el món real. Fa servir diverseses tècniques de paradigmes previament establerts, inclosa la modularitat, poliformisme, i l'encapsulament. Avui, moltes llengües de programació (com Java, JavaScript, C#, C++, Python, PHP, Ruby i Objective-C) suporten la programació orientada a Objectes (POO).

+ +

La programació orientada a Objectes es pot entendre com el disseny de software fent servir una col·lecció d'objectes que cooperen, al contrari de la visió tradicional en el qual un programa es vist com una col·lecció de funcions, o simplement com una llista d'instruccions per a un ordinador. En POO, cada objecte és capaç de rebre missatges, processar data, i enviar missatges a altres objectes. Cada objecte pot ser entès com una petita màquina independent amb un rol diferent o amb responsabilitat.

+ +

La programació orientada a Objectes intenta promoure una major flexibilitat, mantenibilitat en programació, i és àmpliament popular en enginyeria de software a gran esala. En virtut de la seva forta èmfasi en modularitat, el codi orientat a objecte intenta ser més simple de desenvolupar i més facil d'entendre després, es presta a una anàlisi més directa, codificació, i comprensió de situacions complexes i procediments en comptes d'altres mètodes de programació menys modulars.1

+ +

Terminologia

+ +
+
{{Glossary("Namespace")}}
+
Un contenidor que permet als desenvolupadors agrupar totes les funcionalitats sota un nom únic d'aplicació específica.
+
{{Glossary("Class")}}
+
Defineix les característiques de l'objecte. És la definició d'una plantilla de variables i mètodes d'un objecte.
+
{{Glossary("Object")}}
+
Una instància d'una classe.
+
{{Glossary("Property")}}
+
Una característca d'un objecte, com ara un color.
+
{{Glossary("Method")}}
+
Una capacitat d'un objecte, com ara caminar. És una subrutina o funció associada amb una classe.
+
{{Glossary("Constructor")}}
+
Un mètode que es crida en el moment d'instanciació d'un objecte. Normalment té el mateix nom que el de la classe que el conté.
+
{{Glossary("Inheritance")}}
+
Una classe pot heretar les característiques d'una altra classe.
+
{{Glossary("Encapsulation")}}
+
Una manera d'agrupar les dades i mètodes que es fan servir juntes.
+
{{Glossary("Abstraction")}}
+
La conjunció d'una herència complexa, mètodes, les propietats d'un objecte, han de ser capaces de simular una realitat a modelar.
+
{{Glossary("Polymorphism")}}
+
Poli significa "molts" i morfisme significa "formes". Classes diferents poden definir el mateix mètode o propietat.
+
+ +

Per una descripció més extensa sobre la programació orientada a objectes vegeu {interwiki("wikipedia", "Object-oriented programming")}} a la Viquipèdia.

+ +

Programació basada en prototipus

+ +

Programació basat en prototipus és un estil de programació orientada a objectes que no fa ús de les classes. En el seu lloc, la reutilització del comportament (conegut com a herència en llenguatges basats en classes) es porta a terme a través d'un procés de decoració (o d'ampliació) on els objectes que ja existeixen serveixen com a prototipus. Aquest model també és conegut com a model sense classes, orientat a prototip, o programació basadad en instàncies.

+ +

L'exemple original (i més canònic) d'un llenguatge basat en prototipus és el llenguatge de programació {{interwiki("wikipedia", "Self (programming language)", "Self")}} desenvolupat per David Ungar i Randall Smith. Tanmateix, l'estil de programació sense classes s'ha anat fent més i més popular, i ha sigut adoptat per llenguatges de programació com JavaScript, Cecil, NewtonScript, Io, MOO, REBOL, Kevo, Squeak (quan s'utilitza el marc Viewer per manipular components Morphic), i altres.1

+ +

Programació orientada a Objectes de JavaScript

+ +

Namespace

+ +

Un namespace és un contenidor el qual permet als desenvolupadors agrupar totes les funcionalitats sota un únic, nom d'aplicació específic. En JavaScript un namespace és només un altre objecte que conté mètodes, propietats, i objectes.

+ +
+

Nota: Es important remarcar que en JavaScript, no hi ha diferència de nivell d'idioma entre els objectes regulars i els namespaces. Això dista d'altres llenguatges orientats a objectes, i pot resultat confús als programadors nous en JavaScript.

+
+ +

La idea darrera la creació d'un namespace en JavaScript és simple: Un objecte global és creat i totes les variables, metòdes, i funcions es converteixen en propietats d'aquest objecte. L'ús de namespaces també minimitza la possibilitat de conflictes de noms en l'aplicació, ja que cada objecte d'aplicació son propietats d'un objecte global d'aplicació definit.

+ +

Creem un objecte global anomenat MYAPP:

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

En el codi de mostra superior, primer hem comprovat si MYAPP ja està definit (ja sigui en el mateix arxiu o en un altre arxiu). En cas de ser així, s'usa l'objecte global MYAPP existent, del contrari es crea un objecte buit anomenat MYAPP el qual encapsula el mètode, funcions, variables, i objectes.

+ +

També podem crear sub-namespaces:

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

Abaix es troba la sintaxi de codi per crear un namespace i afegir variables, funcions, i un mètode:

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

Objectes estàndards integrats

+ +

JavaScript té alguns objectes inclosos en el seu nucli, per exemple, trobem objectes come Math, Object, Array, i String. L'exemple d'abaix ens mostra com fer servir l'objecte Math per aconseguir números aleatoris usant el seu mètode random().

+ +
console.log(Math.random());
+
+ +
Nota: Aquest i tots els exemples següents suposen que la funció anomenada {{domxref("console.log()")}} es defineix globalment. De fet, la funció console.log() no és part del llenguatge de JavaScript en si, però molts navegadors ho implementen per tal d'ajudar en la depuració.
+ +

Vegeu Referència de JavaScript: Objectes estàndards integrats per una llista d'objectes cor en JavaScript.

+ +

Cada objecte en JavaScript és una instància de l'objecte Object i per tant, n'hereda totes les seves propietats i mètodes.

+ +

Objectes personalitzats

+ +

La classe

+ +

JavaScript és un llenguatge basat en prototipus que no conté cap class statement, el qual si que es pot trobar en C++ o Java. Això és confós a vegades per a programadors acostumats a llenguatges amb el class statement. En el seu lloc, JavaScript fa servir funcions com a classes. Definir duna classe és tan fàcil com definir una funció. En l'exemple d'abaix definim una nova classe anomenada Person.

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

L'objecte (instància de classe)

+ +

Per crear una nova instància d'un objecte obj fem servir la declaració new obj, assignant el resultat (el qual és de tipus obj) a una variable per accedir-hi més tard. Una forma alternativa de crear una nova instància és fent servir {{jsxref("Object.create()")}}. Aquesta crearà una instància This will create an uninititalized instance.

+ +

En l'exemple d'adalt definim una classe anomenada Person. En l'exemple següent creem dues instàncies (person1 i person2).

+ +
var person1 = new Person();
+var person2 = new Person();
+
+ +
Nota: Siusplau vegeu {{jsxref("Object.create()")}} per un mètode instantacional nou, addiccional new, additional, instantiation mètode.
+ +

El constructor

+ +

El constructor és cridat en el moment de la instantiation (el moment en que la instància de l'objecte és creat). El constructor és ún mètode de la classe. En JavaScript la funció serveix com el constructor de l'objecte, therefore there is no need to explicitly define a constructor method. Every action declared in the class gets executed at the time of instantiation.

+ +

El constructor es fa servir per establir les propietats de l'objecte o per cridar mè call methods to prepare the object for use. Per afegir mètodes de classes i les seves definicions es necessita una sintaxi diferent que s'explicarà més tard en aquest article.

+ +

En l'exemple d'abaix, el constructor de la classe Person mostra un missatge quan és crea una instànca Person.

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

La propietat (atribut de l'objecte)

+ +

Les propietats són variables contingudes en la classe; cada instància de l'objecte té aquestes propietats. Les propietats són asssignades en el constructor (funció) de la classe de forma que es creen en cada instància.

+ +

Per treballar amb propietats de dins de la classe s'utilitza la paraula clau this, que fa referència a l'objecte actual. Accedir (llegir o escriure) a una propietat fora d'aquesta classe es fa mitjançant la sintaxi: InstanceName.Property; Aquesta és la mateixa sintaxi que es fa servir en C++, Java, i numeroses altres llengües. (Dins la classe, la sintaxi this.Property s'utilitza per obtindre o escriure el valor de les propietats.)

+ +

En l'exemple següent definim la propietat firstName property per la classe Person i ho definim com a instanciació.

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

Els mètodes

+ +

Els mètodes segueixen la mateixa llògica que les propietats; la diferència es que són funcions i estan definides com a funcions. Cridar un mètode és similar a accedir a una propietat, però s'afegeix () al final the nom del mètode, possiblement amb arguments. Per definir un mètode, s'assigna una funció a una propietat amb nom de la propietat de la classe prototype; el nom que s'assigna a la funció és el mateix que el nom que té el mètode en l'objecte.

+ +

En l'exemple següent definim i usem el mètode sayHello() per la classe Person.

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

En JavaScript els mètodes són funcions normals dels objectes que són lligats a un objecte com una propietat, El que vol dir que poden ser invocats "fora del context". Vegeu el codi d'exemple següent:

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

Com l'exemple mostra, totes les referències a la funció sayHello — les que existeixen a person1, a Person.prototype, a la variable helloFunction, etc. — fan referència a la mateixa funció. El valor de this durant una crida a la funció depen en com es crida. En el cas comú en que es crida la funció des d'una propietat de l'objecte — person1.sayHello() — this rep el valor de l'objecte d'on prové la propietat (person1), és per això que person1.sayHello() fa servir el nom "Alice" i person2.sayHello() fa servir el nom "Bob". Però si ho cridem d'altres maneres, this rebrà un valor diferent: Cridar-la des d'una variable — helloFunction() — this rep el valor de l'objecte global (window, en navegadors). Al no tenir la propietat firstName aquest objecte (probablement) , acabem amb el resultat "Hello, I'm undefined". (Això és en el mode no estricte; en el mode estricte seria diferent [un error], però per evitar confussions no entrarem aquí en detall.) O podem assignar explícitament el valor de this mitjançant Function#call (o Function#apply), com es mostra al final de l'exemple.

+ +
Nota: Vegeu més sobre this a Function#call i Function#apply
+ +

L'herència

+ +

L'herència és una manera de crear una classe com una versió especialitzada d'una o més classes (JavaScript només suporta l'herència única). La classe especialitzada és communment anomenada el fill, i l'altra classe es comunment anomenada el pare. En JavaScript això s'aconsegueix mitjançant l'assignació d'una instància de la classe pare a la classe fill, i després s'especialitza. En navegadors moderns també es pot usar Object.create per implementar herències.

+ +
+

Nota: JavaScript does no detecta la classe fill prototype.constructor (vegeu Object.prototype), així que ho hem de declarar manualment.

+
+ +

En l'exemple d'abaix, definim la classe Student com una classe fill de Person. Després redefinim el mètode sayHello() i afegim el mètode sayGoodBye().

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

Pel que fa a la línia Student.prototype = Object.create(Person.prototype): En els motors de Javascript més antics sense Object.create, es pot utilitzar tant un "polyfill" (també conegut com a  "falca", vegeu l'article enllaçat), o fer servir una funció que aconegueixi assolir el mateix resultat, tal com:

+ +
function createObject(proto) {
+    function ctor() { }
+    ctor.prototype = proto;
+    return new ctor();
+}
+
+// Usage:
+Student.prototype = createObject(Person.prototype);
+
+ +
Nota: Vegeu Object.create per més informació sobre el que fa, i una falca per a motors més vells.
+ +

L'encapsulació

+ +

En l'exemple anterior, Student no necessita saber com el mètode Person class's walk() és implementat, però tot i així pot fer-lo servir com a mètode; la classe Studentno necessita definir explícitament aquest mètode a no ser que ho volguem canviar. D'això se'n diu encapsulació, per la qual cada classe empaqueta data i mètodes en una sola unitat.

+ +

L'ocultació d'informació és una característica comuna en altres llenguatges sovint com a mètodes/propietats privats i protegits. Tot i que es podria simular alguna cosa com aquesta en JavaScript, no és un requeriment per fer programació orientada a objectes.2

+ +

L'abstracció

+ +

L'abstracció és un mecanisme que permet modelar la part que ens ocupa del problema en el qual estem treballant. Això es pot aconseguir per mitjar de l'herència (especialització), o composició. JavaScript aconsegueix l'especialització per mitjà de l'herència, i la composició per mitjà de deixar a les instàncies de classes ser valors d'atributs d'altres objectes.

+ +

La classe Function de JavaScript hereta de la classe Object (això demostra la especialització del model) i la propietat Function.prototype property és una instància d'Object (Això demostra composició).

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

El polimorfisme

+ +

Tal i com tots els mètodes i propietats són definides dins la propietat Prototype, classes diferents poden definir mètodes amb el mateix nom; els mètodes estan en l'àmbit de la classe en la qual estan definits. Això només és cert quan les dues classes no tenen una relació pare-fill (quan un no hereta de l'altre en una cadena d'herència).

+ +

Notes

+ +

Les tècniques presentades en aquesta article per implementar programació orientada a objectes no són les úniques que es poden fer servir en JavaScript, que és molt flexible en termes de com es pot realitzar la programació orientada a objectes.

+ +

De la mateixa manera, les tècniques que s'han mostrat aquí no utilitzen cap hack del llenguatge, ni imiten cap implementació de teories d'objectes d'altres llenguatges.

+ +

Hi ha altres tècniques que proporcionen programació orientada a objectes més avançada en JavaScript, però aquests estan fora de l'abast d'aquest article introductori.

+ +

Referències

+ +
    +
  1. Viquipèdia. "Programació orientada a Objectes"
    2. +
  2. Viquipèdia. "Encapsulació (programació orientada a Objectes)"
    3. +
diff --git a/files/ca/mdn/at_ten/index.html b/files/ca/mdn/at_ten/index.html new file mode 100644 index 0000000000..5f61d9d876 --- /dev/null +++ b/files/ca/mdn/at_ten/index.html @@ -0,0 +1,37 @@ +--- +title: MDN at 10 +slug: MDN_at_ten +translation_of: MDN_at_ten +--- + + +
+
+

La història de l'MDN

+ +

A principis del 2005, un petit grup d'idealistes va presentar un recurs nou, gratis, construït per la comunitat i en línia, per a tots els desenvolupadors Web. La seva brillant, però inconvencional idea es va convertir fins al avui en dia es coneix com Mozilla Developer Network. Deu anys després, la nostra comunitat global és més gran que mai, i junts encara ara estem creant nova documentació, codis d'exemples i recursos d'aprenentatge per a totes les tecnologies Web lliures, incloent CSS, HTML, JavaScript i tota la resta que fa que la Web oberta sigui tant poderosa com és ara.

+ +

Llegir mésabout the history

+ + +

Contribuir a l'MDN

+ +

Durant deu anys, la comunitat de l'MDN ha estat documentat la Web oberta. Des de corregir simples errors tipogràfics a escriure completes suites per una API completament nova, tothom té alguna cosa que oferir i cap contribució és massa llarga o massa curta. Tenim al voltat de  90,000 pàgines de contingut que s'han escrit o traduït per membres de la nostra excepcional comunitat de Mozillians. Tu pots ésser un d'ells.

+ +

Llegir mésabout contributing

+ +

 

+ +

 

+
+ +
{{TenthCampaignQuote}}
+ + + +
    +
  1. MDN als 10
    2. +
  2. La història de l'MDN
    3. +
  3. Contribuir a l'MDN
    4. +
+
diff --git a/files/ca/mdn/comunitat/index.html b/files/ca/mdn/comunitat/index.html deleted file mode 100644 index 26b3c182a8..0000000000 --- a/files/ca/mdn/comunitat/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: Uniu-vos a la comunitat MDN -slug: MDN/Comunitat -tags: - - Community - - Guide - - Landing - - MDN Meta -translation_of: MDN/Community ---- -
{{MDNSidebar}}
- -
{{IncludeSubnav("/en-US/docs/MDN")}}
- -
-

MDN Web Docs és més que un wiki: és una comunitat de desenvolupadors que treballen junts per fer de MDN un recurs excepcional per a desenvolupadors que utilitzen tecnologies web obertes

-
- -

Ens encantaria que contribuíssiu a MDN, però ens encantaria encara més si participéssiu en la comunitat de MDN. Heus aquí com connectar-se, en tres senzills passos:

- -
    -
  1. Creeu una compte en MDN.
    2. -
  2. Uniu-vos a converses.
    3. -
  3. Seguiu el que està passant.
    4. -
- -

Com funciona la comunitat

- -

Els següents són més articles que descriuen la comunitat de MDN.

- -
-
-
-
Rols de la comunitat
-
Hi ha diversos rols dins de la comunitat MDN que tenen responsabilitats específiques.
-
Doc sprints
-
Aquesta és una guia per organitzar un sprint de documentació. Conté consells i suggeriments de persones que han organitzat un sprint de documentació, per ajudar-vos a organitzar-ne un.
-
Seguiu el que està passant
-
MDN és presentat per la comunitat de Mozilla Developer Network. Heus aquí algunes maneres de compartir informació sobre el que estem fent.
-
- -
-
-
- -
-
-
Conversas de la comunitat MDN
-
El "treball" de MDN passa en el lloc de MDN, però en la "comunitat" té lloc a través de discussions (asíncroniques) i xat i reunions (sincròniques) en línia.
-
Treballar en comunitat
-
Una part important de la contribució a la documentació de MDN en qualsevol escala significativa és saber com treballar com a part de la comunitat MDN. Aquest article ofereix consells que us ajudaran a treure el màxim profit de les vostres interaccions amb els altres escriptors i amb equips de desenvolupament.
-
-
-
diff --git a/files/ca/mdn/contribute/howto/crear_un_compte_mdn/index.html b/files/ca/mdn/contribute/howto/crear_un_compte_mdn/index.html deleted file mode 100644 index fd8ae9355c..0000000000 --- a/files/ca/mdn/contribute/howto/crear_un_compte_mdn/index.html +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: Com crear un compte MDN -slug: MDN/Contribute/Howto/Crear_un_compte_MDN -translation_of: MDN/Contribute/Howto/Create_an_MDN_account ---- -
{{MDNSidebar}}
- -

Per editar contingut dins de MDN, us cal un perfil MDN. Si el que voleu, però, és consultar i cercar documentació a MDN, no us cal tenir aquest perfil. Aquesta guia us ajudarà a posar en marxa el vostre perfil MDN.

- -
-
Per a què necessita MDN la meva adreça electrònica?
-
-La vostra adreça electrònica s'utilitza per a recuperar el vostre compte i, si fos necessari, per a que l'administració de MDN pugui contactar-vos en referència al vostre compte o la vostra activitat dins el lloc.
-
-A més, us podeu subscriure a les notificacions (tals com quan pàgines específiques siguin modificades) i missatges and messages (per exemple, si opteu per unir-vos a l'equip de proves beta, podeu rebre correus electrònics sobre noves funcions que necessiten proves).
-
-La vostra adreça electrònica mai es mostrarà a MDN i només es podrà utilitzar d'acord amb la nostra política de privacitat.
- -
Si inicieu sessió a MDN des de GitHub i utilitzeu una adreça "noreply" a GitHub, no rebreu missatges (incloses les notificacions quan us subscriviu a pàgines) a MDN.
-
-
- -
    -
  1. Al capdamunt de cada pàgina a MDN, trobareu un botó anomenat Sign in. Poseu-vos a sobre (o polseu-lo si utilitzeu un dispositiu mòbil) per a veure una llista amb els serveis d'autenticació suportats per a iniciar sessió d'usuari a MDN.
    2. -
  2. Seleccioneu un servei per a iniciar la vostra sessió. Actualment, només està disponible mitjançant GitHub. Teniu en compte que si seleccioneu GitHub, a la pàgina del vostre perfil públic de MDN s'hi afegirà un enllaç al vostre perfil de GitHub.
    3. -
  3. Seguiu les instruccions de GitHub per a connectar el vostre compte a MDN.
    4. -
  4. Un cop el servei d'autenticació us retorni a MDN, se us demanarà que entreu un identificador d'usuari i una adreça electrònica. El vostre identificador es mostrarà públicament per fer esment de les tasques que heu realitzat. No utilitzeu la vostra adreça electrònica com identificador.
    5. -
  5. Cliqueu a Crea el meu perfil MDN.
    6. -
  6. Si l'adreça electrònica especificada al pas 4 no és la mateixa que utilitzeu al servei d'autenticació, si us plau, comproveu el correu i cliqueu l'enllaç del missatge de confirmació que us enviem.
    7. -
- -

I ja està! Ja teniu el vostre compte MDN operatiu i podeu editar immediatament les pàgines!

- -

Podeu clicar el vostre nom a la part superior de qualsevol pàgina MDN per a veure el vostre perfil públic. Des d'allà, podeu clicar Edita per a fer canvis o afegir dades al vostre perfil.

- -
-

Els nous identificadors d'usuari no poden tenir espais o el caràcter "@". Recordeu que el vostre identificador el mostrarà públicament per a identificar la vostra feina.

-
diff --git a/files/ca/mdn/contribute/processes/index.html b/files/ca/mdn/contribute/processes/index.html new file mode 100644 index 0000000000..69faa1d6b5 --- /dev/null +++ b/files/ca/mdn/contribute/processes/index.html @@ -0,0 +1,14 @@ +--- +title: Processos de documentació +slug: MDN/Contribute/Processos +tags: + - Landing + - MDN Meta + - Processes +translation_of: MDN/Contribute/Processes +--- +
{{MDNSidebar}}
{{IncludeSubnav("/en-US/docs/MDN")}}
+ +

El projecte de documentació MDN és enorme; hi ha una gran nombre de tecnologies que cobrim amb l'ajuda de centenars de col·laboradors de tot el món. Per ajudar-nos a posar ordre al caos, tenim els processos estàndard a seguir quan treballem en tasques específiques relacionades amb la documentació. Aquí trobareu guies per a aquests processos.

+ +

{{LandingPageListSubPages()}}

diff --git a/files/ca/mdn/contribute/processos/index.html b/files/ca/mdn/contribute/processos/index.html deleted file mode 100644 index 69faa1d6b5..0000000000 --- a/files/ca/mdn/contribute/processos/index.html +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: Processos de documentació -slug: MDN/Contribute/Processos -tags: - - Landing - - MDN Meta - - Processes -translation_of: MDN/Contribute/Processes ---- -
{{MDNSidebar}}
{{IncludeSubnav("/en-US/docs/MDN")}}
- -

El projecte de documentació MDN és enorme; hi ha una gran nombre de tecnologies que cobrim amb l'ajuda de centenars de col·laboradors de tot el món. Per ajudar-nos a posar ordre al caos, tenim els processos estàndard a seguir quan treballem en tasques específiques relacionades amb la documentació. Aquí trobareu guies per a aquests processos.

- -

{{LandingPageListSubPages()}}

diff --git a/files/ca/mdn/kuma/index.html b/files/ca/mdn/kuma/index.html deleted file mode 100644 index b9c1ddc40d..0000000000 --- a/files/ca/mdn/kuma/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: 'Kuma: plataforma wiki de MDN' -slug: MDN/Kuma -tags: - - Kuma - - Landing - - MDN Meta -translation_of: MDN/Kuma ---- -
{{MDNSidebar}}
- -
{{IncludeSubnav("/en-US/docs/MDN")}}
- -

Kuma és el codi Django que impulsa MDN Web Docs.

- -

{{SubpagesWithSummaries}}

- -

Involucreu-vos amb Kuma

- -

Per involucrar-vos amb Kuma:

- - diff --git a/files/ca/mdn/yari/index.html b/files/ca/mdn/yari/index.html new file mode 100644 index 0000000000..b9c1ddc40d --- /dev/null +++ b/files/ca/mdn/yari/index.html @@ -0,0 +1,26 @@ +--- +title: 'Kuma: plataforma wiki de MDN' +slug: MDN/Kuma +tags: + - Kuma + - Landing + - MDN Meta +translation_of: MDN/Kuma +--- +
{{MDNSidebar}}
+ +
{{IncludeSubnav("/en-US/docs/MDN")}}
+ +

Kuma és el codi Django que impulsa MDN Web Docs.

+ +

{{SubpagesWithSummaries}}

+ +

Involucreu-vos amb Kuma

+ +

Per involucrar-vos amb Kuma:

+ + diff --git a/files/ca/mdn_at_ten/index.html b/files/ca/mdn_at_ten/index.html deleted file mode 100644 index 5f61d9d876..0000000000 --- a/files/ca/mdn_at_ten/index.html +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: MDN at 10 -slug: MDN_at_ten -translation_of: MDN_at_ten ---- - - -
-
-

La història de l'MDN

- -

A principis del 2005, un petit grup d'idealistes va presentar un recurs nou, gratis, construït per la comunitat i en línia, per a tots els desenvolupadors Web. La seva brillant, però inconvencional idea es va convertir fins al avui en dia es coneix com Mozilla Developer Network. Deu anys després, la nostra comunitat global és més gran que mai, i junts encara ara estem creant nova documentació, codis d'exemples i recursos d'aprenentatge per a totes les tecnologies Web lliures, incloent CSS, HTML, JavaScript i tota la resta que fa que la Web oberta sigui tant poderosa com és ara.

- -

Llegir mésabout the history

- - -

Contribuir a l'MDN

- -

Durant deu anys, la comunitat de l'MDN ha estat documentat la Web oberta. Des de corregir simples errors tipogràfics a escriure completes suites per una API completament nova, tothom té alguna cosa que oferir i cap contribució és massa llarga o massa curta. Tenim al voltat de  90,000 pàgines de contingut que s'han escrit o traduït per membres de la nostra excepcional comunitat de Mozillians. Tu pots ésser un d'ells.

- -

Llegir mésabout contributing

- -

 

- -

 

-
- -
{{TenthCampaignQuote}}
- - - -
    -
  1. MDN als 10
    2. -
  2. La història de l'MDN
    3. -
  3. Contribuir a l'MDN
    4. -
-
diff --git a/files/ca/mozilla/firefox/releases/2/index.html b/files/ca/mozilla/firefox/releases/2/index.html new file mode 100644 index 0000000000..911a4004f5 --- /dev/null +++ b/files/ca/mozilla/firefox/releases/2/index.html @@ -0,0 +1,46 @@ +--- +title: Firefox 2 per a desenvolupadors +slug: Firefox_2_per_a_desenvolupadors +translation_of: Mozilla/Firefox/Releases/2 +--- +

Noves característiques de desenvolupament en el Firefox 2

+

El Firefox 2 introdueix un gran nombre de noves funcionalitats i possibilitats. Aquest article us proporciona tot un seguit d'articles que cobreixen aquestes noves característiques.

+

Per a desenvolupadors de llocs web i d'aplicacions

+
Microsumaris (en anglès)
Els microsumaris són breus compilacions del contingut més important de certes pàgines web que s'actualitzen regularment. Els desenvolupadors del lloc web o de terceres aplicacions poden proporcionar-los. Els usuaris poden llavors triar mostrar microsumaris en comptes de títols estàtics en afegir les pàgines a les adreces d'interès juntament amb microsumaris.
+
+
Creació d'un microsumari
Un programa d'aprenentatge per a la creació d'un generador de microsumaris.
+
+
Creació de connectors MozSearch
El Firefox 2 implementa MozSearch, un format de connector de cerca basat en OpenSearch.
+
+
Implementació de suggeriments en els connectors de cerca
Com fer que el vostre connector MozSearch pugui incorporar suggeriments de cerca, que apareixen en forma de desplegable quan teclegeu en la barra de cerca.
+
+
Novetats en JavaScript 1.7 (en anglès)
El Firefox 2 pot utilitzar JavaScript 1.7, que inclou noves característiques com ara let, assignació destructurada, generadors i iteradors, i comprensions de matrius.
+
+
Sessions i emmagatzemament persistent visual (WHATWG) des del client (en anglès)
+
+

XXX maybe find some more attractive description

+
Es permet a les aplicacions web emmagatzemar dades estructurades des del client.
+
+
SVG en el Firefox (en anglès)
El Firefox 2 millora l'ús dels «gràfics vectorials escalables» (SVG), implementant-s'hi l'element <textPath> com també altres atributs que no ho estaven anteriorment.
+
+

Per a desenvolupadors de XUL i extensions

+
API de restauració de sessions (anglès)
Elements que es desaran i restauraran entre sessions del Firefox.
+
+
API d'accés al contingut del canal
API en revisió. Més informació aviat.
+
+
Ús de SAX (anglès)
API d'anàlisi d'XML basada en esdeveniments.
+
+
Addició de motors de cerca a les pàgines web
Codi de JavaScript que descriu al Firefox com instaŀlar un connector d'un nou motor de cerca. Aquest pot escriure's en format Sherlock or OpenSearch.
+
+
Addició de proveïdors de dades de protecció davant la pesca electrònica (anglès)
Pot millorar-se la protecció del Firefox davant la pesca electrònica afegint dades addicionals de proveïdors i fer així una navegació més segura.
+
+
Emmagatzemament (anglès)
El Firefox 2 introdueix mozStorage, una arquitectura de base de dades basada en sqlite.
+
+

Noves característiques per als usuaris finals

+

Experiència d'usuari

+ +

Seguretat i privadesa

+ +

{{ languages( { "en": "en/Firefox_2_for_developers", "fr": "fr/Firefox_2_pour_les_d\u00e9veloppeurs", "it": "it/Firefox_2_per_Sviluppatori", "ja": "ja/Firefox_2_for_developers", "pt": "pt/Firefox_2_para_desenvolvedores", "pl": "pl/Firefox_2_dla_programist\u00f3w" } ) }}

diff --git a/files/ca/orphaned/mdn/community/index.html b/files/ca/orphaned/mdn/community/index.html new file mode 100644 index 0000000000..26b3c182a8 --- /dev/null +++ b/files/ca/orphaned/mdn/community/index.html @@ -0,0 +1,54 @@ +--- +title: Uniu-vos a la comunitat MDN +slug: MDN/Comunitat +tags: + - Community + - Guide + - Landing + - MDN Meta +translation_of: MDN/Community +--- +
{{MDNSidebar}}
+ +
{{IncludeSubnav("/en-US/docs/MDN")}}
+ +
+

MDN Web Docs és més que un wiki: és una comunitat de desenvolupadors que treballen junts per fer de MDN un recurs excepcional per a desenvolupadors que utilitzen tecnologies web obertes

+
+ +

Ens encantaria que contribuíssiu a MDN, però ens encantaria encara més si participéssiu en la comunitat de MDN. Heus aquí com connectar-se, en tres senzills passos:

+ +
    +
  1. Creeu una compte en MDN.
    2. +
  2. Uniu-vos a converses.
    3. +
  3. Seguiu el que està passant.
    4. +
+ +

Com funciona la comunitat

+ +

Els següents són més articles que descriuen la comunitat de MDN.

+ +
+
+
+
Rols de la comunitat
+
Hi ha diversos rols dins de la comunitat MDN que tenen responsabilitats específiques.
+
Doc sprints
+
Aquesta és una guia per organitzar un sprint de documentació. Conté consells i suggeriments de persones que han organitzat un sprint de documentació, per ajudar-vos a organitzar-ne un.
+
Seguiu el que està passant
+
MDN és presentat per la comunitat de Mozilla Developer Network. Heus aquí algunes maneres de compartir informació sobre el que estem fent.
+
+ +
+
+
+ +
+
+
Conversas de la comunitat MDN
+
El "treball" de MDN passa en el lloc de MDN, però en la "comunitat" té lloc a través de discussions (asíncroniques) i xat i reunions (sincròniques) en línia.
+
Treballar en comunitat
+
Una part important de la contribució a la documentació de MDN en qualsevol escala significativa és saber com treballar com a part de la comunitat MDN. Aquest article ofereix consells que us ajudaran a treure el màxim profit de les vostres interaccions amb els altres escriptors i amb equips de desenvolupament.
+
+
+
diff --git a/files/ca/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html b/files/ca/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html new file mode 100644 index 0000000000..fd8ae9355c --- /dev/null +++ b/files/ca/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html @@ -0,0 +1,38 @@ +--- +title: Com crear un compte MDN +slug: MDN/Contribute/Howto/Crear_un_compte_MDN +translation_of: MDN/Contribute/Howto/Create_an_MDN_account +--- +
{{MDNSidebar}}
+ +

Per editar contingut dins de MDN, us cal un perfil MDN. Si el que voleu, però, és consultar i cercar documentació a MDN, no us cal tenir aquest perfil. Aquesta guia us ajudarà a posar en marxa el vostre perfil MDN.

+ +
+
Per a què necessita MDN la meva adreça electrònica?
+
+La vostra adreça electrònica s'utilitza per a recuperar el vostre compte i, si fos necessari, per a que l'administració de MDN pugui contactar-vos en referència al vostre compte o la vostra activitat dins el lloc.
+
+A més, us podeu subscriure a les notificacions (tals com quan pàgines específiques siguin modificades) i missatges and messages (per exemple, si opteu per unir-vos a l'equip de proves beta, podeu rebre correus electrònics sobre noves funcions que necessiten proves).
+
+La vostra adreça electrònica mai es mostrarà a MDN i només es podrà utilitzar d'acord amb la nostra política de privacitat.
+ +
Si inicieu sessió a MDN des de GitHub i utilitzeu una adreça "noreply" a GitHub, no rebreu missatges (incloses les notificacions quan us subscriviu a pàgines) a MDN.
+
+
+ +
    +
  1. Al capdamunt de cada pàgina a MDN, trobareu un botó anomenat Sign in. Poseu-vos a sobre (o polseu-lo si utilitzeu un dispositiu mòbil) per a veure una llista amb els serveis d'autenticació suportats per a iniciar sessió d'usuari a MDN.
    2. +
  2. Seleccioneu un servei per a iniciar la vostra sessió. Actualment, només està disponible mitjançant GitHub. Teniu en compte que si seleccioneu GitHub, a la pàgina del vostre perfil públic de MDN s'hi afegirà un enllaç al vostre perfil de GitHub.
    3. +
  3. Seguiu les instruccions de GitHub per a connectar el vostre compte a MDN.
    4. +
  4. Un cop el servei d'autenticació us retorni a MDN, se us demanarà que entreu un identificador d'usuari i una adreça electrònica. El vostre identificador es mostrarà públicament per fer esment de les tasques que heu realitzat. No utilitzeu la vostra adreça electrònica com identificador.
    5. +
  5. Cliqueu a Crea el meu perfil MDN.
    6. +
  6. Si l'adreça electrònica especificada al pas 4 no és la mateixa que utilitzeu al servei d'autenticació, si us plau, comproveu el correu i cliqueu l'enllaç del missatge de confirmació que us enviem.
    7. +
+ +

I ja està! Ja teniu el vostre compte MDN operatiu i podeu editar immediatament les pàgines!

+ +

Podeu clicar el vostre nom a la part superior de qualsevol pàgina MDN per a veure el vostre perfil públic. Des d'allà, podeu clicar Edita per a fer canvis o afegir dades al vostre perfil.

+ +
+

Els nous identificadors d'usuari no poden tenir espais o el caràcter "@". Recordeu que el vostre identificador el mostrarà públicament per a identificar la vostra feina.

+
diff --git a/files/ca/orphaned/web/html/element/command/index.html b/files/ca/orphaned/web/html/element/command/index.html new file mode 100644 index 0000000000..17614b7e4f --- /dev/null +++ b/files/ca/orphaned/web/html/element/command/index.html @@ -0,0 +1,156 @@ +--- +title: +slug: Web/HTML/Element/command +tags: + - HTML + - HTML Element Reference + - HTML element + - HTML5 +translation_of: Web/HTML/Element/command +--- +
{{obsolete_header()}}
+ +
+

Nota: L'element comand s'ha eliminat de {{Gecko("24.0")}} en favor de l'element {{HTMLElement("menuitem")}}. Firefox mai ha donat suport a aquest element comand, i s'ha abandonat la implementació de la interfície DOM {{domxref("HTMLCommandElement")}} existent a Firefox 24.

+
+ +

Sumari

+ +

L'element comand representa un comando que l'usuari pot invocar.

+ + + + + + + + + + + + + + + + + + + + + + + + +
Categories de contingutcontingut de flux, phrasing content, contingut metadata.
Contingut permèsCap, és un {{Glossary("empty element")}}.
Omissió de l'etiquetaL'etiqueta d'inici és obligatori, però, com que és un element buit, l'ús d'una etiqueta final està prohibit.
Elements pares permesosnomés {{HTMLElement("colgroup")}}, encara que  implícitament pot ser definida com la seva etiqueta d'inici però no és obligatòria. La {{HTMLElement("colgroup")}} no ha de tenir un {{HTMLElement("span")}} com a fill.
Interfície DOM{{domxref("HTMLCommandElement")}} {{ obsolete_inline(24) }}
+ +

Atributs

+ +

Aquest element inclou els atributs globals.

+ +
+
{{htmlattrdef("checked")}}
+
Indica si comand es seleccionat. S'ha d'ometre llevat que l'atribut type és checkbox o radio.
+
{{htmlattrdef("disabled")}}
+
Indica que comand no està disponible..
+
{{htmlattrdef("icon")}}
+
Dóna una imatge que representa el comand.
+
{{htmlattrdef("label")}}
+
El nom del command tal com es mostra a l'usuari.
+
{{htmlattrdef("radiogroup")}}
+
Aquest atribut dóna el nom del grup d'ordres, amb un type radio, que es commuta quan s'alterna el propi comandament. S'ha omès aquest atribut llevat que l'atribut type sigui radio.
+
{{htmlattrdef("type")}}
+
Aquest atribut indica el tipus de comandt. Això pot ser un dels tres valors. +
    +
  • +

    command o buit que és l'estat per defecte, i indica que es tracta d'un comand normal.

    +
    • +
  • +

    checkbox indica que command s'alterna amb un checkbox.

    +
    • +
  • +

    radio indica que command s'alterna amb un radiobutton.

    +
    • +
+
+
+ +

Exemples

+ +
<command type="command" label="Save" icon="icons/save.png" onclick="save()">
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('HTML WHATWG', 'commands.html', '<command>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'semantics.html#the-command-element', '<command>')}}{{Spec2('HTML5 W3C')}} 
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

{{ HTMLRef }}

diff --git a/files/ca/orphaned/web/html/element/element/index.html b/files/ca/orphaned/web/html/element/element/index.html new file mode 100644 index 0000000000..66e51e06e1 --- /dev/null +++ b/files/ca/orphaned/web/html/element/element/index.html @@ -0,0 +1,93 @@ +--- +title: +slug: Web/HTML/Element/element +translation_of: Web/HTML/Element/element +--- +
+

Nota: Aquest element s'ha eliminat de l'especificació. Vegeu això per més informació de l'editor de l'especificació.

+
+ +

Resum

+ +

L'element HTML <element>  s'utilitza per definir nous elements DOM personalitzats.

+ + + +

Atributs

+ +

Aquest element inclou els atributs globals.

+ +

Exemples

+ +

El text va aquí.

+ +
Més text va aquí.
+
+ +

Especificacions

+ +

L'element <element> es torbava antigament dins d'un esborrany de l'especificació de Elements personalitzats però s'ha eliminat.

+ +

Compatibilitat amb navegadors

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suport bàsic{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suport bàsic{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Vegeu també

+ +
    +
  • Components Web: {{HTMLElement("content")}}, {{HTMLElement("shadow")}}, {{HTMLElement("template")}}
    • +
+ +
{{HTMLRef}}
diff --git a/files/ca/orphaned/web/html/global_attributes/dropzone/index.html b/files/ca/orphaned/web/html/global_attributes/dropzone/index.html new file mode 100644 index 0000000000..9435eb1c68 --- /dev/null +++ b/files/ca/orphaned/web/html/global_attributes/dropzone/index.html @@ -0,0 +1,99 @@ +--- +title: dropzone +slug: Web/HTML/Global_attributes/dropzone +tags: + - Experimental + - Global attributes + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/dropzone +--- +

{{HTMLSidebar("Global_attributes")}}{{SeeCompatTable}}

+ +

L'atribut global dropzone és un atribut enumerat que indica quin tipus de contingut poden ser arrossegats sobre un element, utilitzant l'API Drag and Drop. Pot tenir els següents valors:

+ +
    +
  • copy,  indica que el deixa anar crearà una còpia de l'element que va ser arrossegat.
    • +
  • move, indica que l'element arrossegat es mourà a aquesta nova ubicació.
    • +
  • link, crearà un enllaç a les dades arrossegats.
    • +
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('HTML WHATWG', "interaction.html#the-dropzone-attribute", "dropzone")}}{{Spec2('HTML WHATWG')}}Sense canvis des de l'última instantània, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "editing.html#the-dropzone-attribute", "dropzone")}}{{Spec2('HTML5.1')}}Instantània de {{SpecName('HTML WHATWG')}}, definició inicial
+ + + +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{ CompatUnknown() }}{{ CompatNo }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{ CompatUnknown() }}{{ CompatUnknown}}{{ CompatNo }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Veure

+ + diff --git a/files/ca/orphaned/web/javascript/reference/global_objects/array/prototype/index.html b/files/ca/orphaned/web/javascript/reference/global_objects/array/prototype/index.html new file mode 100644 index 0000000000..35ebf53933 --- /dev/null +++ b/files/ca/orphaned/web/javascript/reference/global_objects/array/prototype/index.html @@ -0,0 +1,203 @@ +--- +title: Array.prototype +slug: Web/JavaScript/Referencia/Objectes_globals/Array/prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Array/prototype +--- +
{{JSRef}}
+ +

La propietat Array.prototype representa el prototipus del constructor {{jsxref("Array")}}.

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

Descripció

+ +

Les instàncies de {{jsxref("Array")}} hereten de Array.prototype. Com tots els constructors, és possible modificar l'objecte prototipus del constructor per a afectar a totes les instàncies de {{jsxref("Array")}}.

+ +

Fet poc conegut: Array.prototype és ell mateix un {{jsxref("Array")}}:

+ +
Array.isArray(Array.prototype); // true
+
+ +

Propietats

+ +
+
Array.prototype.constructor
+
Especifica la funció que ha creat el prototipus de l'objecte.
+
{{jsxref("Array.prototype.length")}}
+
Reflecteix el nombre d'elements d'un array.
+
+ +

Mètodes

+ +

Mètodes Mutadors

+ +

Els mètodes següents modifiquen l'array:

+ +
+
{{jsxref("Array.prototype.copyWithin()")}} {{experimental_inline}}
+
Copia una seqüència d'elements de l'array dins l'array.
+
{{jsxref("Array.prototype.fill()")}} {{experimental_inline}}
+
Omple tots els elements d'un array d'una posició inicial a una posició final amb un valor estàtic.
+
{{jsxref("Array.prototype.pop()")}}
+
Elimina l'últim element d'un array i retorna aquest element.
+
{{jsxref("Array.prototype.push()")}}
+
Afegeix un o més elements al final de l'array i retorna el nou tamany de l'array.
+
{{jsxref("Array.prototype.reverse()")}}
+
Capgira l'ordre dels elements d'un array a l'array mateix (no crea cap array nou) — el primer element esdevé l'últim, l'últim esdevé el primer, etcètera.
+
{{jsxref("Array.prototype.shift()")}}
+
Elimina el primer element d'un array i retorna aquest element.
+
{{jsxref("Array.prototype.sort()")}}
+
Ordena els elements d'un array a l'array mateix i retorna l'array.
+
{{jsxref("Array.prototype.splice()")}}
+
Afegeix i/o elimina elements d'un array.
+
{{jsxref("Array.prototype.unshift()")}}
+
Afegeix un o més elements al pricipi d'un array i retorna el nou tamany de l'array.
+
+ +

Mètodes d'accés

+ +

Aquests mètodes no modifiquen l'array sino que retornen algun tipus de representació de l'array.

+ +
+
{{jsxref("Array.prototype.concat()")}}
+
Retorna un nou array format per la unió de l'array actual amb altres arrays o valors.
+
{{jsxref("Array.prototype.includes()")}} {{experimental_inline}}
+
Determina si un array inclou un element en concret, retornant true en cas afirmatiu i false en cas contrari.
+
{{jsxref("Array.prototype.join()")}}
+
Uneix tots els elements d'un array en un string.
+
{{jsxref("Array.prototype.slice()")}}
+
Extrau una secció d'un array i la retorna en forma de nou array.
+
{{jsxref("Array.prototype.toSource()")}} {{non-standard_inline}}
+
Retorna un literal d'array que representa l'array especificat; es pot emprar aquest valor per a crear un nou array. Sobreescriu el mètode {{jsxref("Object.prototype.toSource()")}}.
+
{{jsxref("Array.prototype.toString()")}}
+
Retorna un string que representa l'array i els seus elements. Sobreescriu el mètode {{jsxref("Object.prototype.toString()")}}.
+
{{jsxref("Array.prototype.toLocaleString()")}}
+
Retorna un string localitzat que representa l'array i els seus elements. Sobreescriu el mètode {{jsxref("Object.prototype.toLocaleString()")}}.
+
{{jsxref("Array.prototype.indexOf()")}}
+
Retorna la primera posició de l'array en la que es troba un element igual al valor especificat, o bé -1 si no es troba l'element dins l'array.
+
{{jsxref("Array.prototype.lastIndexOf()")}}
+
Retorna la última posició de l'array en la que es troba un element igual al valor especificat, o bé -1 si no es troba l'element dins l'array.
+
+ +

Mètodes d'iteració

+ +

Alguns mètodes accepten com a arguments funcions que es cridaran al processar l'array. Quan es criden aquests mètodes, s'emmagatzema el valor de length de l'array i qualsevol element afegit després a dins de la funció no serà visitat per la mateixa. Altres canvis a l'array (com ara canviar un valor o bé eliminar un element) poden afectar els resultats de l'operació si el mètode visita els elements que han canviat. Tot i que el comportament específic d'aquests mètodes en aquests casos està ben definit no es recomana recolzar-se en ell ja que pot confondre a altres programadors que llegeixin el vostre codi. En comptes de modificar l'array copieu-lo i modifiqueu la copia.

+ +
+
{{jsxref("Array.prototype.forEach()")}}
+
Crida una funció per a cada element de l'array.
+
{{jsxref("Array.prototype.entries()")}} {{experimental_inline}}
+
Retorna un nou objecte Array Iterator que conté parells clau-valor per a cada posició de l'array.
+
{{jsxref("Array.prototype.every()")}}
+
Retorna true si tots els elements de l'array satisfan la funció proporcionada.
+
{{jsxref("Array.prototype.some()")}}
+
Retorna true si al menys un dels elements de l'array satisfà la funció proporcionada.
+
{{jsxref("Array.prototype.filter()")}}
+
Crea un nou array que conté tots eles elements de l'array des d'on es crida que facin que la funció que actua de filtre retorni true.
+
{{jsxref("Array.prototype.find()")}} {{experimental_inline}}
+
Retorna el valor trobat a l'array, si un element de l'array satisfà la funció proporcionada. En cas contrari retorna undefined.
+
{{jsxref("Array.prototype.findIndex()")}} {{experimental_inline}}
+
Retorna la posició on es troba l'element de l'array que satifcaci la funció proporcionada. Retorna -1 si cap element la satisfà.
+
{{jsxref("Array.prototype.keys()")}} {{experimental_inline}}
+
Retorna un nou Array Iterator que conté les claus per a cada posició de l'array.
+
{{jsxref("Array.prototype.map()")}}
+
Crea un nou array a partir dels resultats de cridar a la funció proporcionada per a cada element de l'array.
+
{{jsxref("Array.prototype.reduce()")}}
+
Executa una funció sobre un acumulador i cada valor de l'array (aplicats d'esquerra a dreta) amb l'objectiu de redudir els valors a un sol valor.
+
{{jsxref("Array.prototype.reduceRight()")}}
+
Executa una funció sobre un acumulador i cada valor de l'array (aplicats de dreta a esquerra) amb l'objectiu de redudir els valors a un sol valor.
+
{{jsxref("Array.prototype.values()")}} {{experimental_inline}}
+
Retorna un nou objecte Array Iterator que conté els valors de cada posició de l'array.
+
{{jsxref("Array.prototype.@@iterator()", "Array.prototype[@@iterator]()")}} {{experimental_inline}}
+
Retorna un nou objecte Array Iterator que conté els valors per a cada posició de l'array.
+
+ +

Mètodes genèrics

+ +

Molts dels mètodes de l'objecte Array de JavaScript estan dissenyats per a ser aplicats de manera genèrica a qualsevol objecte que tingui la propietat length i que disposin la seva informació en forma de noms de propietats numèrices (com ara array[5] per a accedir a l'element desat a la posició 5). Alguns mètodes, com ara {{jsxref("Array.join", "join")}}, només llegeixen la propietat length i les altes propietats numèriques. D'altres mètodes, com ara {{jsxref("Array.reverse", "reverse")}}, necessiten que tant les propietats numèriques com la propietat length siguin mutables; això implica que aquests mètodes no es poden fer servir sobre objectes com ara {{jsxref("String")}}, on la seva propietat length així com les propietats numèriques no es poden modificar.

+ +

Specificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacionsEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial.
{{SpecName('ES5.1', '#sec-15.4.3.1', 'Array.prototype')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-array.prototype', 'Array.prototype')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Array")}}
    • +
  • {{jsxref("Function.prototype")}}
    • +
diff --git a/files/ca/web/api/canvas_api/tutorial/advanced_animations/index.html b/files/ca/web/api/canvas_api/tutorial/advanced_animations/index.html new file mode 100644 index 0000000000..4aebb46529 --- /dev/null +++ b/files/ca/web/api/canvas_api/tutorial/advanced_animations/index.html @@ -0,0 +1,380 @@ +--- +title: Animacions avançades +slug: Web/API/Canvas_API/Tutorial/Animacions_avançades +tags: + - Canvas + - Graphics + - Tutorial +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")}}
+ +
+

En l'últim capítol vam fer algunes animacions bàsiques i vam conèixer maneres de fer moure les coses. En aquesta part veurem més d'a prop el moviment en si i afegirem una mica de física per fer que les nostres animacions siguin més avançades.

+
+ +

Dibuixar una bola

+ +

Usarem una bola per als nostres estudis d'animació, així que primer dibuixarem aquesta bola sobre el llenç. El següent codi ens configurarà.

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

Com és habitual, primer necessitem un context de dibuix. Per dibuixar la bola, hem crear un objecte ball que contingui propietats i un mètode draw() per pintar-la sobre el llenç.

+ +
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();
+ +

Aquí no hi ha res especial, la bola és en realitat un cercle senzill i es dibuixa amb l'ajuda del mètode {{domxref("CanvasRenderingContext2D.arc()", "arc()")}}.

+ +

Afegir velocitat

+ +

Ara que tenim la bola, estem preparats per afegir una animació bàsica tal com hem après en l'últim capítol d'aquest tutorial. Novament, {{domxref("window.requestAnimationFrame()")}} ens ajuda a controlar l'animació. La bola es mou en afegir un vector de velocitat a la posició. Per a cada fotograma, també {{domxref("CanvasRenderingContext2D.clearRect", "clear", "", 1)}} el llenç per eliminar cercles antics de fotogrames anteriors.

+ +
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();
+
+ +

Límits

+ +

Sense cap prova de col·lisió de límits, la nostra bola surt ràpidament del llenç. Hem de comprovar si la posició x i y de la bola està fora de les dimensions del llenç i invertir la direcció dels vectors de velocitat. Per fer-ho, afegim les següents comprovacions al mètode 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;
+}
+ +

Primera demostració

+ +

Vegem com es veu en acció fins ara. Movem el ratolí en el llenç per iniciar l'animació.

+ + + +

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

+ +

Acceleració

+ +

Per fer el moviment més real, es pots jugar amb la velocitat d'aquesta manera, per exemple:

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

Això retarda la velocitat vertical de cada fotograma, de manera que la bola només rebotarà en el sòl al final.

+ + + +

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

+ +

Efecte cua

+ +

Fins ara, hem utilitzat el mètode {{domxref("CanvasRenderingContext2D.clearRect", "clearRect")}} per esborrar fotogrames anteriors. Si reemplacem aquest mètode per un semi-transparent {{domxref("CanvasRenderingContext2D.fillRect", "fillRect")}}, es pot crear fàcilment un efecte cua.

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

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

+ +

Afegir control al ratolí

+ +

Per tenir una mica de control sobre la bola, podem fer que segueixi al ratolí usant l'esdeveniment mousemove, per exemple. L'esdeveniment click allibera la bola i la deixa rebotar de nou.

+ + + +
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();
+
+ +

Moure la bola amb el ratolí i allibera-la amb un clic.

+ +

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

+ +

Escapada

+ +

Aquest breu capítol només explica algunes tècniques per crear animacions més avançades. Hi ha molts més! Què tal afegir una paleta, alguns maons, i convertir aquesta demostració en un joc Escapada? Consulta la nostra àrea de desenvolupament de jocs per veure més articles relacionats amb els jocs.

+ +

Vegeu també

+ + + +

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

diff --git "a/files/ca/web/api/canvas_api/tutorial/animacions_avan\303\247ades/index.html" "b/files/ca/web/api/canvas_api/tutorial/animacions_avan\303\247ades/index.html" deleted file mode 100644 index 4aebb46529..0000000000 --- "a/files/ca/web/api/canvas_api/tutorial/animacions_avan\303\247ades/index.html" +++ /dev/null @@ -1,380 +0,0 @@ ---- -title: Animacions avançades -slug: Web/API/Canvas_API/Tutorial/Animacions_avançades -tags: - - Canvas - - Graphics - - Tutorial -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")}}
- -
-

En l'últim capítol vam fer algunes animacions bàsiques i vam conèixer maneres de fer moure les coses. En aquesta part veurem més d'a prop el moviment en si i afegirem una mica de física per fer que les nostres animacions siguin més avançades.

-
- -

Dibuixar una bola

- -

Usarem una bola per als nostres estudis d'animació, així que primer dibuixarem aquesta bola sobre el llenç. El següent codi ens configurarà.

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

Com és habitual, primer necessitem un context de dibuix. Per dibuixar la bola, hem crear un objecte ball que contingui propietats i un mètode draw() per pintar-la sobre el llenç.

- -
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();
- -

Aquí no hi ha res especial, la bola és en realitat un cercle senzill i es dibuixa amb l'ajuda del mètode {{domxref("CanvasRenderingContext2D.arc()", "arc()")}}.

- -

Afegir velocitat

- -

Ara que tenim la bola, estem preparats per afegir una animació bàsica tal com hem après en l'últim capítol d'aquest tutorial. Novament, {{domxref("window.requestAnimationFrame()")}} ens ajuda a controlar l'animació. La bola es mou en afegir un vector de velocitat a la posició. Per a cada fotograma, també {{domxref("CanvasRenderingContext2D.clearRect", "clear", "", 1)}} el llenç per eliminar cercles antics de fotogrames anteriors.

- -
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();
-
- -

Límits

- -

Sense cap prova de col·lisió de límits, la nostra bola surt ràpidament del llenç. Hem de comprovar si la posició x i y de la bola està fora de les dimensions del llenç i invertir la direcció dels vectors de velocitat. Per fer-ho, afegim les següents comprovacions al mètode 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;
-}
- -

Primera demostració

- -

Vegem com es veu en acció fins ara. Movem el ratolí en el llenç per iniciar l'animació.

- - - -

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

- -

Acceleració

- -

Per fer el moviment més real, es pots jugar amb la velocitat d'aquesta manera, per exemple:

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

Això retarda la velocitat vertical de cada fotograma, de manera que la bola només rebotarà en el sòl al final.

- - - -

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

- -

Efecte cua

- -

Fins ara, hem utilitzat el mètode {{domxref("CanvasRenderingContext2D.clearRect", "clearRect")}} per esborrar fotogrames anteriors. Si reemplacem aquest mètode per un semi-transparent {{domxref("CanvasRenderingContext2D.fillRect", "fillRect")}}, es pot crear fàcilment un efecte cua.

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

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

- -

Afegir control al ratolí

- -

Per tenir una mica de control sobre la bola, podem fer que segueixi al ratolí usant l'esdeveniment mousemove, per exemple. L'esdeveniment click allibera la bola i la deixa rebotar de nou.

- - - -
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();
-
- -

Moure la bola amb el ratolí i allibera-la amb un clic.

- -

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

- -

Escapada

- -

Aquest breu capítol només explica algunes tècniques per crear animacions més avançades. Hi ha molts més! Què tal afegir una paleta, alguns maons, i convertir aquesta demostració en un joc Escapada? Consulta la nostra àrea de desenvolupament de jocs per veure més articles relacionats amb els jocs.

- -

Vegeu també

- - - -

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

diff --git "a/files/ca/web/api/canvas_api/tutorial/animacions_b\303\240siques/index.html" "b/files/ca/web/api/canvas_api/tutorial/animacions_b\303\240siques/index.html" deleted file mode 100644 index e4a3751d1e..0000000000 --- "a/files/ca/web/api/canvas_api/tutorial/animacions_b\303\240siques/index.html" +++ /dev/null @@ -1,335 +0,0 @@ ---- -title: Animacions bàsiques -slug: Web/API/Canvas_API/Tutorial/Animacions_bàsiques -tags: - - Canvas - - Graphics - - HTML - - HTML5 - - Intermediate - - Tutorial -translation_of: Web/API/Canvas_API/Tutorial/Basic_animations ---- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Web/API/Canvas_API/Tutorial/Advanced_animations")}}
- -
-

Atès que estem usant Javascript per controlar els elements {{HTMLElement("canvas")}}, també és molt fàcil fer animacions (interactives). En aquest capítol veurem com fer algunes animacions bàsiques.

-
- -

Probablement, la major limitació és que, una vegada que es dibuixa una forma, aquesta es manté així. Si necessitem moure-la, hem de tornar a dibuixar-la i tot el que s'ha dibuixat abans. Es necessita molt temps per tornar a dibuixar quadres complexos i el rendiment depèn en gran manera de la velocitat de l'equip en el qual s'està executant.

- -

Passos bàsics d'animació

- -

Aquests són els passos que s'han de seguir per dibuixar un marc:

- -
    -
  1. Esborrar el llenç
    - A menys que les formes que es dibuixin omplin el llenç complet (per exemple, una imatge de fons), és necessari esborrar qualsevol forma que s'hi hagi dibuixat prèviament. La manera més fàcil de fer-ho, és usant el mètode {{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}.
    2. -
  2. Guardar l'estat del llenç
    - Si es canvia qualsevol configuració (com ara estils, transformacions, etc.) que afectin a l'estat del llenç i ens volem assegurar que l'estat original s'utilitza cada vegada que es dibuixa un marc, hem de guardar aquest estat original.
    3. -
  3. Dibuixar formes animades
    - El pas on es fa la representació del marc real.
    4. -
  4. Restaurar l'estat del llenç
    - Si s'ha guardat l'estat, ho hem de restaurar abans de dibuixar un nou marc.
    5. -
- -

Controlar una animació

- -

Les formes es dibuixen al llenç usant els mètodes de canvas directament o cridant a les funcions personalitzades. En circumstàncies normals, només veiem que aquests resultats apareixen en el llenç quan el script acaba d'executar-se. Per exemple, no és possible fer una animació des d'un bucle for.

- -

Això significa que necessitem una forma d'executar les nostres funcions de dibuix durant un període de temps. Hi ha dues maneres de controlar una animació com aquesta.

- -

Actualitzacions programades

- -

Primer estan les funcions {{domxref("window.setInterval()")}}, {{domxref("window.setTimeout()")}} i {{domxref("window.requestAnimationFrame()")}}, que es poden utilitzar per cridar a una funció específica durant un període de temps determinat.

- -
-
{{domxref("WindowTimers.setInterval", "setInterval(function, delay)")}}
-
Inicia repetidament l'execució de la funció especificada per la funció, cada mil·lisegons de retard.
-
{{domxref("WindowTimers.setTimeout", "setTimeout(function, delay)")}}
-
Executa la funció especificada per la function en mil·lisegons de delay.
-
{{domxref("Window.requestAnimationFrame()", "requestAnimationFrame(callback)")}}
-
Li diu al navegador que desitja realitzar una animació i sol·licita al navegador que cridi a una funció especifica per actualitzar una animació abans del proper repintat.
-
- -

Si no es vol cap interacció amb l'usuari, es pot utilitzar la funció setInterval() que executa repetidament el codi proporcionat. Si volguéssim fer un joc, podríem usar esdeveniments de teclat o ratolí per controlar l'animació i usar setTimeout(). En establir {{domxref("EventListener")}}s, capturem qualsevol interacció de l'usuari i s'executan les nostres funcions d'animació

- -
-

En els exemples següents, utilitzarem el mètode {{domxref("window.requestAnimationFrame()")}} per controlar l'animació. El mètode requestAnimationFrame proporciona una manera fluïda i eficient per a l'animació, cridant al marc d'animació quan el sistema estigui preparat per pintar el marc. El nombre de crides retornades és generalment 60 vegades per segon i pot reduir-se a una taxa més baixa quan s'executa en les pestanyes de fons. Per a més informació sobre el bucle d'animació, especialment per a jocs, veure l'article Anatomia d'un videojoc en la nostra Zona de desenvolupament de jocs.

-
- -

Un sistema solar animat

- -

Aquest exemple anima un petit model del nostre 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';
-  window.requestAnimationFrame(draw);
-}
-
-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);
-
-  window.requestAnimationFrame(draw);
-}
-
-init();
-
- - - -

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

- -

Un rellotge animat

- -

Aquest exemple dibuixa un rellotge animat que mostra l'hora actual.

- -
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();
-
-  window.requestAnimationFrame(clock);
-}
-
-window.requestAnimationFrame(clock);
- - - -

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

- -

Un panorama en bucle

- -

En aquest exemple, es desplaça una imatge panoràmica d'esquerra a dreta. Estem usant una imatge del Parc Nacional Yosemite, que hem pres de Wikipedia, però es pot usar qualsevol imatge que sigui més gran que el llenç.

- -
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) {
-        // image larger than canvas
-        x = CanvasXSize - imgW;
-    }
-    if (imgW > CanvasXSize) {
-        // image width larger than canvas
-        clearX = imgW;
-    } else {
-        clearX = CanvasXSize;
-    }
-    if (imgH > CanvasYSize) {
-        // image height larger than canvas
-        clearY = imgH;
-    } else {
-        clearY = CanvasYSize;
-    }
-
-    // get canvas context
-    ctx = document.getElementById('canvas').getContext('2d');
-
-    // set refresh rate
-    return setInterval(draw, speed);
-}
-
-function draw() {
-    ctx.clearRect(0, 0, clearX, clearY); // clear the canvas
-
-    // if image is <= Canvas Size
-    if (imgW <= CanvasXSize) {
-        // reset, start from beginning
-        if (x > CanvasXSize) {
-            x = -imgW + x;
-        }
-        // draw additional image1
-        if (x > 0) {
-            ctx.drawImage(img, -imgW + x, y, imgW, imgH);
-        }
-        // draw additional image2
-        if (x - imgW > 0) {
-            ctx.drawImage(img, -imgW * 2 + x, y, imgW, imgH);
-        }
-    }
-
-    // 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;
-}
-
- -

A continuació un {{HTMLElement("canvas")}} en què es desplaça la imatge. Hem de tenir en compte que l'amplada i l'alçada especificades aquí, han de coincidir amb els valors de les variables CanvasXZSize i CanvasYSize en el codi JavaScript.

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

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

- -

Altres exemples

- -
-
Una roda de raigs bàsica
-
Un bon exemple de com fer animacions usant els controls del teclat.
-
Animacions avançades
-
En el proper capítol veurem algunes tècniques avançades d'animació i física.
-
- -

{{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Web/API/Canvas_API/Tutorial/Advanced_animations")}}

diff --git a/files/ca/web/api/canvas_api/tutorial/aplicar_estils_i_colors/index.html b/files/ca/web/api/canvas_api/tutorial/aplicar_estils_i_colors/index.html deleted file mode 100644 index 9adcc2d5f4..0000000000 --- a/files/ca/web/api/canvas_api/tutorial/aplicar_estils_i_colors/index.html +++ /dev/null @@ -1,733 +0,0 @@ ---- -title: Aplicar estils i colors -slug: Web/API/Canvas_API/Tutorial/Aplicar_estils_i_colors -tags: - - Canvas - - Graphics - - HTML - - HTML5 - - Intermediate - - Tutorial -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")}}
- -
-

En el capítol sobre dibuixar formes, hem utilitzat només els estils de línia i de farciment predeterminats. Aquí explorarem les opcions de canvas que tenim a la nostra disposició per fer els nostres dibuixos una mica més atractius. Aprendreu com afegir diferents colors, estils de línies, gradients, patrons i ombres als vostres dibuixos.

-
- -

Colors

- -

Fins ara només hem vist mètodes del context de dibuix. Si volem aplicar colors a una forma, hi ha dues propietats importants que podem utilitzar: fillStyle i strokeStyle.

- -
-
{{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle = color")}}
-
Estableix l'estil utilitzat per emplenar formes.
-
{{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle = color")}}
-
Estableix l'estil per als contorns de les formes.
-
- -

color és una cadena que representa un {{cssxref("<color>")}} CSS, un objecte degradat o un objecte patró. Veurem els objectes de degradat i patró més endavant. Per defecte, el traç i el color del farciment estan establerts en negre (valor de color CSS #000000).

- -
-

Nota: Quan es defineix la propietat strokeStyle i/o fillStyle, el nou valor es converteix en el valor predeterminat per a totes les formes que s'estan dibuixant a partir d'aquest moment. Per a cada forma que desitgeu en un color diferent, haureu de tornar a assignar la propietat fillStyle o strokeStyle.

-
- -

Les cadenes vàlides que podeu introduir han de ser, segons l'especificació, valors de {{cssxref("<color>")}} CSS. Cadascun dels següents exemples descriu el mateix color.

- -
// 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)';
-
- -

Un exemple de fillStyle

- -

En aquest exemple, una vegada més, usem dos bucles for per dibuixar una graella de rectangles, cadascun en un color diferent. La imatge resultant hauria de ser similar a la captura de pantalla. Aquí no succeeix res espectacular. Utilitzem les dues variables i i j per generar un color RGB únic per a cada quadrat, i només modifiquen els valors vermell i verd. El canal blau té un valor fix. Modificant els canals, es poden generar tot tipus de paletes. En augmentar els passos, es pot aconseguir alguna cosa que se sembli a les paletes de color que utilitza 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);
-    }
-  }
-}
- - - -

The result looks like this:

- -

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

- -

Un exemple de strokeStyle

- -

Aquest exemple és similar a l'anterior, però usa la propietat strokeStyle per canviar els colors dels contorns de les formes. Usem el mètode arc() per dibuixar cercles en lloc de quadrats.

- -
  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();
-      }
-    }
-  }
-
- - - -

El resultat és així:

- -

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

- -

Transparència

- -

A més de dibuixar formes opaques al llenç, també podem dibuixar formes semitransparents (o translúcides). Això es fa, ja sigui configurant la propietat globalAlpha o assignant un color semitransparent a l'estil de traç i/o d'ompliment.

- -
-
{{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha = transparencyValue")}}
-
Aplica el valor de transparència especificat a totes les formes futures dibuixades en el llenç. El valor ha d'estar entre 0,0 (totalment transparent) a 1.0 (totalment opac). Aquest valor és 1.0 (totalment opac) per defecte.
-
- -

La propietat globalAlpha pot ser útil si voleu dibuixar moltes formes al llenç amb una transparència similar, però en general, és més útil establir la transparència en formes individuals quan establiu els seus colors.

- -

Atès que les propietats strokeStyle and fillStyle accepten valors de color CSS rgba, podem utilitzar la notació següent per assignar un color transparent a ells.

- -
// Assignar colors transparents a l'estil de traç i ompliment
-
-ctx.strokeStyle = 'rgba(255, 0, 0, 0.5)';
-ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
-
- -

La funció rgba() és similar a la funció rgb() però té un paràmetre addicional. L'últim paràmetre estableix el valor de transparència d'aquest color en particular. El rang vàlid se situa de nou entre 0.0 (totalment transparent) i 1.0 (completament opac).

- -

Un exemple de globalAlpha

- -

En aquest exemple, dibuixarem un fons de quatre quadrats de colors diferents. A més d'això, dibuixarem un conjunt de cercles semitransparents. La propietat globalAlpha s'estableix en 0.2 que s'utilitzarà per a totes les formes des d'aquest punt. Cada pas en el bucle for dibuixa un conjunt de cercles amb un radi creixent. El resultat final és un gradient radial. En superposar cada vegada més cercles un damunt de l'altre, reduïm efectivament la transparència dels cercles que ja s'han dibuixat. En augmentar el recompte de passos i, en efecte, dibuixar més cercles, el fons desapareixeria completament del centre de la imatge.

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

- -

Un exemple usant rgba()

- -

En aquest segon exemple, fem alguna cosa semblant a l'anterior, però en comptes de dibuixar cercles un damunt de l'altre, dibuixem petits rectangles amb opacitat creixent. L'ús de rgba() dóna una mica més de control i flexibilitat, perquè podem definir l'estil d'emplenament i traç individualment.

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

- -

Estils de línia

- -

Hi ha diverses propietats que ens permeten donar estil a les línies.

- -
-
{{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth = value")}}
-
Estableix l'amplària de les línies dibuixades en el futur.
-
{{domxref("CanvasRenderingContext2D.lineCap", "lineCap = type")}}
-
Estableix l'aparença dels extrems de les línies.
-
{{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin = type")}}
-
Estableix l'aparença de les "cantonades" on s'uneixen les línies.
-
{{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit = value")}}
-
Estableix un límit en la mitra, quan dues línies s'uneixen en un angle agut, per permetre-li controlar el grossor de la unió.
-
{{domxref("CanvasRenderingContext2D.getLineDash", "getLineDash()")}}
-
Retorna la matriu de patró de guió de la línia actual que conté un nombre parell de nombres no negatius.
-
{{domxref("CanvasRenderingContext2D.setLineDash", "setLineDash(segments)")}}
-
Estableix el patró de guió de línia actual.
-
{{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset = value")}}
-
Especifica on iniciar una matriu de guions en una línia.
-
- -

Obtindreu una millor comprensió del que fan, en mirar els exemples a continuació.

- -

Un exemple de lineWidth

- -

Aquesta propietat estableix el gruix de la línia actual. Els valors han de ser nombres positius. Per defecte, aquest valor es fixa en 1.0 unitats.

- -

L'amplada de la línia és el gruix del traç centrat en la trajectòria indicada. En altres paraules, l'àrea que es dibuixa s'estén a la meitat de l'amplària de línia a cada costat de la trajectòria. Com que les coordenades del llenç no fan referència directa als píxels, s'ha de tenir especial cura per obtenir línies horitzontals i verticals nítides.

- -

En el següent exemple, es dibuixen 10 línies rectes amb amplades de línia creixents. La línia en l'extrem esquerre té 1.0 unitats d'ample. No obstant això, les línies de grossor més a l'esquerra i totes les altres d'ample imparell no apareixen nítides a causa del posicionament de la trajectòria.

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

- -

L'obtenció de línies nítides requereix entendre com es tracen les trajectòries. En les imatges següents, la graella representa la graella de coordenades del llenç. Els quadrats entre les línies de la graella són píxels reals en pantalla. En la primera imatge de graella que apareix a continuació, s'emplena un rectangle de (2,1) a (5,5). Tota l'àrea entre ells (vermell clar) cau en els límits de píxels, per la qual cosa el rectangle emplenat resultant tindrà vores nítides.

- -

- -

Si es considera una trajectòria de (3,1) a (3,5) amb un gruix de línia  1.0, s'acaba amb la situació en la segona imatge. L'àrea real a emplenar (blau fosc) només s'estén fins a la meitat dels píxels a cada costat de la trajectòria. S'ha de representar una aproximació d'això, la qual cosa significa que aquests píxels estan ombrejats parcialment, i dóna com a resultat que tota l'àrea (blau clar i blau fosc) s'ompli amb un color la meitat de fosc que el color de traç real. Això és el que succeeix amb la línia d'ample 1.0 en el codi d'exemple anterior .

- -

Per arreglar això, s'ha de ser molt precís en la creació de la trajectòria. Sabent que una línia a 1.0 d'ample s'estendrà mitja unitat a cada costat de la trajectòria, creant la trajectòria de (3.5,1) a (3.5,5) resulta que la situació, en la tercera imatge, la línia d'ample 1.0 acaba completa i omplint, precisament, una sola línia vertical de píxels.

- -
-

Nota: Hem de tenir en compte que en el nostre exemple de línia vertical, la posició Y encara fa referència a una posició sencera de la graella; si no fos així, veuríem píxels amb una cobertura parcial en els punts finals (però també, hem de tenir en compte que aquest comportament depèn de l'estil actual de lineCap, el valor predeterminat del qual és butt; és possible que desitgem calcular traços uniformes amb coordenades de mig píxel per a línies d'ample imparell, establint l'estil lineCap a estil square, de manera que el límit exterior del traç al voltant del punt final s'ampliï automàticament per cobrir tot el píxel exactament).

- -

Tinguem en compte, també, que només es veuran afectats els extrems d'inici i fi d'una trajectòria: si es tanca una trajectòria amb closePath(), no hi ha un punt d'inici i final; en el seu lloc, tots els extrems de la trajectòria es connecten al segment anterior i següent utilitzant, la configuració actual de l'estil lineJoin, el valor predeterminat del qual és miter, amb l'efecte d'estendre automàticament els límits exteriors dels segments connectats al seu punt d'intersecció, de manera que el traç representat cobreixi exactament els píxels complets centrats en cada punt final, si aquests segments connectats són horitzontals i/o verticals). Vegeu les dues seccions següents per a les demostracions d'aquests estils de línia addicionals..

-
- -

Per a les línies d'ample parell, cada meitat acaba sent una quantitat sencera de píxels, per la qual cosa es desitjable una trajectòria que estigui entre els píxels (és a dir, (3,1) a (3,5)), en lloc de baixar per la mitad dels píxels

- -

Tot i que és lleugerament dolorós quan inicialment es treballa amb gràfics 2D escalables, si ens fixem en la graella de píxels i la posició de les trajectòries, ens hem d'assegurar que els dibuixos es vegin correctes, independentment de l'escalat o qualsevol altra transformació. Una línia vertical de 1.0 d'ample dibuixada en la posició correcta, es convertirà en una línia nítida de 2 píxels quan s'ampliï per 2, i apareixerà en la posició correcta.

- -

Un exemple de lineCap

- -

La propietat lineCap determina com es dibuixen els punts finals de cada línia. Hi ha tres valors possibles per a aquesta propietat i aquests són: butt, round i square. Per defecte, aquesta propietat està configurada com a butt.

- -

- -
-
butt
-
Els extrems de les línies es quadren en els punts finals.
-
round
-
Els extrems de les línies són arrodonits.
-
square
-
Els extrems de les línies es quadren en afegir una caixa amb un ample igual i la meitat de l'alçada del gruix de la línia.
-
- -

En aquest exemple, dibuixarem tres línies, cadascuna amb un valor diferent per a la propietat lineCap. També afegim dues guies per veure les diferències exactes entre les tres. Cadascuna d'aquestes línies comença i acaba exactament en aquestes guies.

- -

La línia de l'esquerra utilitza l'opció predeterminada butt. Notarem que està dibuixada completament al ras amb les guies. La segona s'estableix, utilitzant l'opció round. Això afegeix un semicercle al extrem que té un radi de la meitat de l'ample de la línia. La línia de la dreta utilitza l'opció square. Això afegeix una caixa amb un ample igual i la meitat de l'alçada del gruix de la línia.

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

- -

Un exemple de lineJoin

- -

La propietat lineJoin determina com s'uneixen dos segments de connexió (de línies, arcs o corbes) amb longituds diferents de zero en una forma (els segments degenerats amb longituds zero, que els punts finals i punts de control especificats estan exactament en la mateixa posició, s'ometen).

- -

Hi ha tres possibles valors per a aquesta propietat: round, bevel i miter. Per defecte aquesta propietat s'estableix a miter. Hem de tenir en compte que la configuració lineJoin no té cap efecte si els dos segments connectats tenen la mateixa direcció, ja que en aquest cas no s'afegirà cap àrea d'unió.

- -

- -
-
round
-
Arrodoneix les cantonades d'una forma emplenant un sector addicional del disc centrat en el punt final comú dels segments connectats. El radi per a aquestes cantonades arrodonides és igual a la meitat de l'amplada de la línia.
-
bevel
-
Emplena un àrea triangular addicional entre el punt final comú dels segments connectats i les cantonades rectangulars exteriors separades de cada segment..
-
miter
-
Els segments connectats s'uneixen estenent les seves vores exteriors per connectar-se en un sol punt, amb l'efecte d'emplenar un àrea addicional en forma de rombe. Aquest ajust s'efectua mitjançant la propietat miterLimit, que s'explica a continuació.
-
- -

L'exemple següent dibuixa tres trajectòries diferents, demostrant cadascuna d'aquestes tres configuracions de la propietat lineJoin; la sortida es mostra a dalt..

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

- -

Una demostració de la propietat miterLimit

- -

Com s'ha vist en l'exemple anterior, en unir dues línies amb l'opció miter, les vores exteriors de les dues línies d'unió s'estenen fins al punt on es troben. En el cas de línies que tenen angles grans entre si, aquest punt no està lluny del punt de connexió interior. No obstant això, a mesura que els angles entre cada línia disminueixen, la distància (longitud de miter) entre aquests punts augmenta exponencialment.

- -

La propietat miterLimit determina quant lluny es pot col·locar el punt de connexió exterior des del punt de connexió interior. Si dues línies excedeixen aquest valor, es dibuixa una unió bisellada. S'ha de tenir en compte que la longitud màxima de miter és el producte de l'amplada de línia mesurat en el sistema de coordenades actual, pel valor d'aquesta propietat miterLimit  (el valor per defecte és 10.0 en HTML {{HTMLElement("canvas")}}), per la qual cosa miterLimit pot ajustar-se independentment de l'escala de visualització actual o de qualsevol transformació afí de les trajectòries: només influeix en la forma efectiva de les vores de la línia representada.

- -

Més exactament, el límit de miter és la proporció màxima permesa de la longitud de l'extensió (en el llenç HTML, es mesura entre la cantonada exterior de les vores unides de la línia i el punt final comú dels segments de connexió especificats en la trajectòria) a la meitat de l'ample de la línia. La seva definició equival a la relació màxima permesa entre la distància dels punts interiors i exteriors de la unió de les vores i l'amplada total de la línia. Llavors, aixó és igual a la cosecant de la meitat de l'angle intern mínim dels segments de connexió per sota dels quals no es representarà cap unió miter, sinó només una unió bisellada:

- -
    -
  • miterLimit = max miterLength / lineWidth = 1 / sin ( min θ / 2 )
    • -
  • El límit de miter predeterminat de 10.0 llevarà tots els miters per a angles aguts per sota d'uns 11 graus.
    • -
  • Un límit de miter igual a √2 ≈ 1.4142136 (arrodonit cap amunt) separarà els miters de tots els angles aguts, mantenint les unions de miter solament per als angles obtusos o rectes.
    • -
  • Un límit de miter igual a 1.0 és vàlid, però desactivarà tots els miters.
    • -
  • Els valors inferiors a 1.0 no són vàlids per al límit de miter.
    • -
- -

Aquí tenim una petita demostració en la qual es pot configura miterLimit dinàmicament i veure com aquest afecta a les formes en el llenç. Les línies blaves mostren on es troben els punts d'inici i fi per a cadascuna de les línies en el patró de zig-zag.

- -

Si s'especifica un valor de miterLimit inferior a 4.2, en aquesta demostració, cap de les cantonades visibles s'unirà amb una extensió de miter, només hi haurà un petit bisell prop de les línies blaves; amb un miterLimit superior a 10, la majoria de les cantonades d'aquesta demostració haurien d'unir-se amb un miter allunyat de les línies blaves, i l'alçada del qual disminuiria entre les cantonades, d'esquerra a dreta perquè es connectarien amb angles creixents ; amb valors intermedis, les cantonades del costat esquerre només s'uneixen amb un bisell prop de les línies blaves, i les cantonades del costat dret amb una extensió de miter (també amb una altçada decreixent).

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

- -

Ús de guions de línia

- -

El mètode setLineDash i la propietat lineDashOffset especifiquen el patró de guió per a les línies. El mètode setLineDash accepta una llista de nombres que especifica distàncies per dibuixar alternativament una línia i un buit i la propietat lineDashOffset estableix un desplaçament on començar el patró

- -

En aquest exemple estem creant un efecte de formigues marxant. És una tècnica d'animació que es troba sovint en les eines de selecció de programes gràfics d'ordinador. Ajuda a l'usuari a distingir la vora de selecció del fons de la imatge, animant la vora. Més endavant, en aquest tutorial, podeu aprendre com fer-ho i altres animacions bàsiques.

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

- -

Igual que qualsevol altre programa normal de dibuix , podem emplenar i traçar formes usant, gradients lineals i radials. Es crea un objecte {{domxref("CanvasGradient")}} utilitzant un dels mètodes següents. A continuació, podem assignar aquest objecte a les propietats fillStyle o strokeStyle.

- -
-
{{domxref("CanvasRenderingContext2D.createLinearGradient", "createLinearGradient(x1, y1, x2, y2)")}}
-
Crea un objecte de degradat lineal amb un punt inicial de (x1, y1) i un punt final de (x2, y2).
-
{{domxref("CanvasRenderingContext2D.createRadialGradient", "createRadialGradient(x1, y1, r1, x2, y2, r2)")}}
-
Crea un degradat radial. Els paràmetres representen dos cercles, un amb el seu centre en (x1, y1) i un radi de r1, i l'altre amb el seu centre en (x2, y2) amb un radi de r2.
-
- -

Per exemple:

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

Una vegada s'ha creat un objecte CanvasGradient se li pot assignar colors usant el mètode addColorStop().

- -
-
{{domxref("CanvasGradient.addColorStop", "gradient.addColorStop(position, color)")}}
-
Crea una nova parada de color en l'objecte gradient. position és un nombre entre 0.0 i 1.0 i defineix la posició relativa del color en el degradat,  i l'argument color, ha de ser una cadena que representi un {{cssxref("<color>")}} CSS, indicant el color que el gradient ha d'aconseguir en aquest desplaçament en la transició.
-
- -

Es pot afegir tantes parades de color, a un gardient, com es necessiti. A continuació, es mostra un gradient lineal molt simple de blanc a negre.

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

Un exemple de createLinearGradient

- -

En aquest exemple, es crearà dos gradientss diferents. Com es podrà veure aquí, tant les propietats strokeStyle com fillStyle poden acceptar un objecte canvasGradient com a entrada vàlida.

- -
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);
-
-}
-
- - - -

El primer és un gradient de fons. Com es veu, s'assignen dos colors a la mateixa posició. Això es fa per fer transicions de color molt nítides, en aquest cas del blanc al verd. No importa en quina ordre es defineixin les parades de color, però en aquest cas especial, ho fa de forma significativa. Si es mantenen les tasques en l'ordre en què es desitja que apareguin, això no serà un problema.

- -

En el segon gradient, no s'assigna el color inicial (a la posició 0.0), ja que no és estrictament necessari, perquè automàticament assumirà el color de la següent parada de color. Per tant, l'assignació del color negre en la posició 0.5, automàticament fa que el gradient, des de l'inici fins a aquest punt, sigui negre.

- -

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

- -

Un exemple de createRadialGradient

- -

En aquest exemple, definim quatre gradients radials diferents. Com que tenim el control sobre els punts d'inici i de tancament del gradient, podem aconseguir efectes més complexos del que normalment tindríem en els gradients radials "clàssics" que veiem, per exemple, en Photoshop (és a dir, un gradient amb un únic punt central, on el gradient s'expandeix cap a l'exterior en forma circular).

- -
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);
-}
-
- - - -

En aquest cas, hem desplaçat lleugerament el punt d'inici des del punt final per aconseguir un efecte 3D esfèric. Lo millor es tractar d'evitar que els cercles interns i externs se superposin, ja que això genera efectes estranys que són difícils de predir.

- -

L'última parada de color en cadascun dels quatre gradients, utilitza un color completament transparent. Si es desitja tenir una bona transició, d'aquesta a la parada de color anterior, tots dos colors han de ser iguals. Això no és molt obvi del codi, perquè utilitza dos mètodes de color CSS diferents com a demostració, però en el primer gradient #019F62 = rgba(1,159,98,1).

- -

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

- -

Patrons

- -

En un dels exemples de la pàgina anterior, hem utilitzat una sèrie de bucles per crear un patró d'imatges. Hi ha, però, un mètode molt més senzill: el mètode createPattern().

- -
-
{{domxref("CanvasRenderingContext2D.createPattern", "createPattern(image, type)")}}
-
Crea i retorna un nou objecte de patró canvas. image es un {{domxref("CanvasImageSource")}} (és a dir, un {{domxref("HTMLImageElement")}}, altre llenç, un element {{HTMLElement("video")}} o similar. type és una cadena que indica com utilitzar la imatge.
-
- -

Type, especifica com utilitzar la imatge per crear el patró, i ha de ser un dels següents valors de cadena:

- -
-
repeat
-
Teixeix la imatge en ambdues direccions vertical i horitzontal.
-
repeat-x
-
Teixeix la imatge horitzontalment però no verticalment.
-
repeat-y
-
Teixeix la imatge verticalment però no horitzontalment.
-
no-repeat
-
No teixeix la imatge. S'utilitza només una vegada.
-
- -

S'utilitzar aquest mètode per crear un objecte {{domxref("CanvasPattern")}} que és molt similar als mètodes de gradient que hem vist anteriorment. Una vegada que s'ha creat un patró, se li pot assignar les propietats fillStyle o strokeStyle. Per exemple:

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

Nota: Igual que amb el mètode drawImage(), ens hem d'assegurar que la imatge que utilitzem s'hagi carregat abans de cridar a aquest mètode o que el patró es dibuixi incorrectament.

-
- -

Un exemple de createPattern

- -

En aquest últim exemple, crearem un patró per assignar a la propietat fillStyle. L'únic que cal esmentar, és l'ús del controlador onload de la imatge. Això és per assegurar-se de que la imatge es carregui abans que s'assigni el patró.

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

- -

Ombres (Shadows)

- -

L'ús d'ombres implica només quatre propietats:

- -
-
{{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX = float")}}
-
Indica la distància horitzontal que l'ombra ha d'estendre's des de l'objecte. Aquest valor no es veu afectat per la matriu de transformació. El valor predeterminat és 0.
-
{{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY = float")}}
-
Indica la distància vertical que l'ombra ha d'estendre's des de l'objecte. Aquest valor no es veu afectat per la matriu de transformació. El valor predeterminat és 0.
-
{{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur = float")}}
-
Indica la grandària de l'efecte de desenfocament; aquest valor no es correspon a un nombre de píxels i no es veu afectat per la matriu de transformació actual. El valor per defecte és 0.
-
{{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor = color")}}
-
Un valor de color CSS estàndard, que indica el color de l'efecte d'ombra; per defecte, és negre completament transparent.
-
- -

Les propietats shadowOffsetX i shadowOffsetY indiquen fins a on ha d'estendre's l'ombra des de l'objecte en les direccions X i Y; aquests valors no es veuen afectats per la matriu de transformació actual. Utilitzar valors negatius per fer que l'ombra s'estengui cap amunt o cap a l'esquerra, i valors positius perquè l'ombra s'estengui cap avall o cap a la dreta. Tots dos són 0 per defecte.

- -

La propietat shadowBlur indica la grandària de l'efecte de desenfocament; aquest valor no es correspon a un nombre de píxels i no es veu afectat per la matriu de transformació actual. El valor per defecte és 0.

- -

La propietat shadowColor és un valor de color CSS estàndard, que indica el color de l'efecte d'ombra; per defecte, és negre completament transparent.

- -
-

Nota: Les ombres només es dibuixen per a operacions de composició de fonts.

-
- -

Un exemple de text ombrejat

- -

Aquest exemple dibuixa una cadena de text amb un efecte d'ombra.

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

- -

Veurem la propietat font i el mètode fillText en el següent capítol sobre com dibuixar text.

- -

Regles de farciment del llenç

- -

Quan s'utilitza fill (o {{domxref("CanvasRenderingContext2D.clip", "clip")}} i {{domxref("CanvasRenderingContext2D.isPointInPath", "isPointinPath")}}) es pot proporcionar opcionalment un algorisme de regles de farciment per determinar si un punt està dins o fora d'una trajectòria i, per tant, si s'emplena o no. Això és útil quan una trajectòria es creua o es nia.
-
- Dos valors són possibles:

- - - -

En aquest exemple estem usant la regla evenodd.

- -
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/ca/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html b/files/ca/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html new file mode 100644 index 0000000000..9adcc2d5f4 --- /dev/null +++ b/files/ca/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html @@ -0,0 +1,733 @@ +--- +title: Aplicar estils i colors +slug: Web/API/Canvas_API/Tutorial/Aplicar_estils_i_colors +tags: + - Canvas + - Graphics + - HTML + - HTML5 + - Intermediate + - Tutorial +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")}}
+ +
+

En el capítol sobre dibuixar formes, hem utilitzat només els estils de línia i de farciment predeterminats. Aquí explorarem les opcions de canvas que tenim a la nostra disposició per fer els nostres dibuixos una mica més atractius. Aprendreu com afegir diferents colors, estils de línies, gradients, patrons i ombres als vostres dibuixos.

+
+ +

Colors

+ +

Fins ara només hem vist mètodes del context de dibuix. Si volem aplicar colors a una forma, hi ha dues propietats importants que podem utilitzar: fillStyle i strokeStyle.

+ +
+
{{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle = color")}}
+
Estableix l'estil utilitzat per emplenar formes.
+
{{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle = color")}}
+
Estableix l'estil per als contorns de les formes.
+
+ +

color és una cadena que representa un {{cssxref("<color>")}} CSS, un objecte degradat o un objecte patró. Veurem els objectes de degradat i patró més endavant. Per defecte, el traç i el color del farciment estan establerts en negre (valor de color CSS #000000).

+ +
+

Nota: Quan es defineix la propietat strokeStyle i/o fillStyle, el nou valor es converteix en el valor predeterminat per a totes les formes que s'estan dibuixant a partir d'aquest moment. Per a cada forma que desitgeu en un color diferent, haureu de tornar a assignar la propietat fillStyle o strokeStyle.

+
+ +

Les cadenes vàlides que podeu introduir han de ser, segons l'especificació, valors de {{cssxref("<color>")}} CSS. Cadascun dels següents exemples descriu el mateix color.

+ +
// 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)';
+
+ +

Un exemple de fillStyle

+ +

En aquest exemple, una vegada més, usem dos bucles for per dibuixar una graella de rectangles, cadascun en un color diferent. La imatge resultant hauria de ser similar a la captura de pantalla. Aquí no succeeix res espectacular. Utilitzem les dues variables i i j per generar un color RGB únic per a cada quadrat, i només modifiquen els valors vermell i verd. El canal blau té un valor fix. Modificant els canals, es poden generar tot tipus de paletes. En augmentar els passos, es pot aconseguir alguna cosa que se sembli a les paletes de color que utilitza 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);
+    }
+  }
+}
+ + + +

The result looks like this:

+ +

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

+ +

Un exemple de strokeStyle

+ +

Aquest exemple és similar a l'anterior, però usa la propietat strokeStyle per canviar els colors dels contorns de les formes. Usem el mètode arc() per dibuixar cercles en lloc de quadrats.

+ +
  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();
+      }
+    }
+  }
+
+ + + +

El resultat és així:

+ +

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

+ +

Transparència

+ +

A més de dibuixar formes opaques al llenç, també podem dibuixar formes semitransparents (o translúcides). Això es fa, ja sigui configurant la propietat globalAlpha o assignant un color semitransparent a l'estil de traç i/o d'ompliment.

+ +
+
{{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha = transparencyValue")}}
+
Aplica el valor de transparència especificat a totes les formes futures dibuixades en el llenç. El valor ha d'estar entre 0,0 (totalment transparent) a 1.0 (totalment opac). Aquest valor és 1.0 (totalment opac) per defecte.
+
+ +

La propietat globalAlpha pot ser útil si voleu dibuixar moltes formes al llenç amb una transparència similar, però en general, és més útil establir la transparència en formes individuals quan establiu els seus colors.

+ +

Atès que les propietats strokeStyle and fillStyle accepten valors de color CSS rgba, podem utilitzar la notació següent per assignar un color transparent a ells.

+ +
// Assignar colors transparents a l'estil de traç i ompliment
+
+ctx.strokeStyle = 'rgba(255, 0, 0, 0.5)';
+ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
+
+ +

La funció rgba() és similar a la funció rgb() però té un paràmetre addicional. L'últim paràmetre estableix el valor de transparència d'aquest color en particular. El rang vàlid se situa de nou entre 0.0 (totalment transparent) i 1.0 (completament opac).

+ +

Un exemple de globalAlpha

+ +

En aquest exemple, dibuixarem un fons de quatre quadrats de colors diferents. A més d'això, dibuixarem un conjunt de cercles semitransparents. La propietat globalAlpha s'estableix en 0.2 que s'utilitzarà per a totes les formes des d'aquest punt. Cada pas en el bucle for dibuixa un conjunt de cercles amb un radi creixent. El resultat final és un gradient radial. En superposar cada vegada més cercles un damunt de l'altre, reduïm efectivament la transparència dels cercles que ja s'han dibuixat. En augmentar el recompte de passos i, en efecte, dibuixar més cercles, el fons desapareixeria completament del centre de la imatge.

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

+ +

Un exemple usant rgba()

+ +

En aquest segon exemple, fem alguna cosa semblant a l'anterior, però en comptes de dibuixar cercles un damunt de l'altre, dibuixem petits rectangles amb opacitat creixent. L'ús de rgba() dóna una mica més de control i flexibilitat, perquè podem definir l'estil d'emplenament i traç individualment.

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

+ +

Estils de línia

+ +

Hi ha diverses propietats que ens permeten donar estil a les línies.

+ +
+
{{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth = value")}}
+
Estableix l'amplària de les línies dibuixades en el futur.
+
{{domxref("CanvasRenderingContext2D.lineCap", "lineCap = type")}}
+
Estableix l'aparença dels extrems de les línies.
+
{{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin = type")}}
+
Estableix l'aparença de les "cantonades" on s'uneixen les línies.
+
{{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit = value")}}
+
Estableix un límit en la mitra, quan dues línies s'uneixen en un angle agut, per permetre-li controlar el grossor de la unió.
+
{{domxref("CanvasRenderingContext2D.getLineDash", "getLineDash()")}}
+
Retorna la matriu de patró de guió de la línia actual que conté un nombre parell de nombres no negatius.
+
{{domxref("CanvasRenderingContext2D.setLineDash", "setLineDash(segments)")}}
+
Estableix el patró de guió de línia actual.
+
{{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset = value")}}
+
Especifica on iniciar una matriu de guions en una línia.
+
+ +

Obtindreu una millor comprensió del que fan, en mirar els exemples a continuació.

+ +

Un exemple de lineWidth

+ +

Aquesta propietat estableix el gruix de la línia actual. Els valors han de ser nombres positius. Per defecte, aquest valor es fixa en 1.0 unitats.

+ +

L'amplada de la línia és el gruix del traç centrat en la trajectòria indicada. En altres paraules, l'àrea que es dibuixa s'estén a la meitat de l'amplària de línia a cada costat de la trajectòria. Com que les coordenades del llenç no fan referència directa als píxels, s'ha de tenir especial cura per obtenir línies horitzontals i verticals nítides.

+ +

En el següent exemple, es dibuixen 10 línies rectes amb amplades de línia creixents. La línia en l'extrem esquerre té 1.0 unitats d'ample. No obstant això, les línies de grossor més a l'esquerra i totes les altres d'ample imparell no apareixen nítides a causa del posicionament de la trajectòria.

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

+ +

L'obtenció de línies nítides requereix entendre com es tracen les trajectòries. En les imatges següents, la graella representa la graella de coordenades del llenç. Els quadrats entre les línies de la graella són píxels reals en pantalla. En la primera imatge de graella que apareix a continuació, s'emplena un rectangle de (2,1) a (5,5). Tota l'àrea entre ells (vermell clar) cau en els límits de píxels, per la qual cosa el rectangle emplenat resultant tindrà vores nítides.

+ +

+ +

Si es considera una trajectòria de (3,1) a (3,5) amb un gruix de línia  1.0, s'acaba amb la situació en la segona imatge. L'àrea real a emplenar (blau fosc) només s'estén fins a la meitat dels píxels a cada costat de la trajectòria. S'ha de representar una aproximació d'això, la qual cosa significa que aquests píxels estan ombrejats parcialment, i dóna com a resultat que tota l'àrea (blau clar i blau fosc) s'ompli amb un color la meitat de fosc que el color de traç real. Això és el que succeeix amb la línia d'ample 1.0 en el codi d'exemple anterior .

+ +

Per arreglar això, s'ha de ser molt precís en la creació de la trajectòria. Sabent que una línia a 1.0 d'ample s'estendrà mitja unitat a cada costat de la trajectòria, creant la trajectòria de (3.5,1) a (3.5,5) resulta que la situació, en la tercera imatge, la línia d'ample 1.0 acaba completa i omplint, precisament, una sola línia vertical de píxels.

+ +
+

Nota: Hem de tenir en compte que en el nostre exemple de línia vertical, la posició Y encara fa referència a una posició sencera de la graella; si no fos així, veuríem píxels amb una cobertura parcial en els punts finals (però també, hem de tenir en compte que aquest comportament depèn de l'estil actual de lineCap, el valor predeterminat del qual és butt; és possible que desitgem calcular traços uniformes amb coordenades de mig píxel per a línies d'ample imparell, establint l'estil lineCap a estil square, de manera que el límit exterior del traç al voltant del punt final s'ampliï automàticament per cobrir tot el píxel exactament).

+ +

Tinguem en compte, també, que només es veuran afectats els extrems d'inici i fi d'una trajectòria: si es tanca una trajectòria amb closePath(), no hi ha un punt d'inici i final; en el seu lloc, tots els extrems de la trajectòria es connecten al segment anterior i següent utilitzant, la configuració actual de l'estil lineJoin, el valor predeterminat del qual és miter, amb l'efecte d'estendre automàticament els límits exteriors dels segments connectats al seu punt d'intersecció, de manera que el traç representat cobreixi exactament els píxels complets centrats en cada punt final, si aquests segments connectats són horitzontals i/o verticals). Vegeu les dues seccions següents per a les demostracions d'aquests estils de línia addicionals..

+
+ +

Per a les línies d'ample parell, cada meitat acaba sent una quantitat sencera de píxels, per la qual cosa es desitjable una trajectòria que estigui entre els píxels (és a dir, (3,1) a (3,5)), en lloc de baixar per la mitad dels píxels

+ +

Tot i que és lleugerament dolorós quan inicialment es treballa amb gràfics 2D escalables, si ens fixem en la graella de píxels i la posició de les trajectòries, ens hem d'assegurar que els dibuixos es vegin correctes, independentment de l'escalat o qualsevol altra transformació. Una línia vertical de 1.0 d'ample dibuixada en la posició correcta, es convertirà en una línia nítida de 2 píxels quan s'ampliï per 2, i apareixerà en la posició correcta.

+ +

Un exemple de lineCap

+ +

La propietat lineCap determina com es dibuixen els punts finals de cada línia. Hi ha tres valors possibles per a aquesta propietat i aquests són: butt, round i square. Per defecte, aquesta propietat està configurada com a butt.

+ +

+ +
+
butt
+
Els extrems de les línies es quadren en els punts finals.
+
round
+
Els extrems de les línies són arrodonits.
+
square
+
Els extrems de les línies es quadren en afegir una caixa amb un ample igual i la meitat de l'alçada del gruix de la línia.
+
+ +

En aquest exemple, dibuixarem tres línies, cadascuna amb un valor diferent per a la propietat lineCap. També afegim dues guies per veure les diferències exactes entre les tres. Cadascuna d'aquestes línies comença i acaba exactament en aquestes guies.

+ +

La línia de l'esquerra utilitza l'opció predeterminada butt. Notarem que està dibuixada completament al ras amb les guies. La segona s'estableix, utilitzant l'opció round. Això afegeix un semicercle al extrem que té un radi de la meitat de l'ample de la línia. La línia de la dreta utilitza l'opció square. Això afegeix una caixa amb un ample igual i la meitat de l'alçada del gruix de la línia.

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

+ +

Un exemple de lineJoin

+ +

La propietat lineJoin determina com s'uneixen dos segments de connexió (de línies, arcs o corbes) amb longituds diferents de zero en una forma (els segments degenerats amb longituds zero, que els punts finals i punts de control especificats estan exactament en la mateixa posició, s'ometen).

+ +

Hi ha tres possibles valors per a aquesta propietat: round, bevel i miter. Per defecte aquesta propietat s'estableix a miter. Hem de tenir en compte que la configuració lineJoin no té cap efecte si els dos segments connectats tenen la mateixa direcció, ja que en aquest cas no s'afegirà cap àrea d'unió.

+ +

+ +
+
round
+
Arrodoneix les cantonades d'una forma emplenant un sector addicional del disc centrat en el punt final comú dels segments connectats. El radi per a aquestes cantonades arrodonides és igual a la meitat de l'amplada de la línia.
+
bevel
+
Emplena un àrea triangular addicional entre el punt final comú dels segments connectats i les cantonades rectangulars exteriors separades de cada segment..
+
miter
+
Els segments connectats s'uneixen estenent les seves vores exteriors per connectar-se en un sol punt, amb l'efecte d'emplenar un àrea addicional en forma de rombe. Aquest ajust s'efectua mitjançant la propietat miterLimit, que s'explica a continuació.
+
+ +

L'exemple següent dibuixa tres trajectòries diferents, demostrant cadascuna d'aquestes tres configuracions de la propietat lineJoin; la sortida es mostra a dalt..

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

+ +

Una demostració de la propietat miterLimit

+ +

Com s'ha vist en l'exemple anterior, en unir dues línies amb l'opció miter, les vores exteriors de les dues línies d'unió s'estenen fins al punt on es troben. En el cas de línies que tenen angles grans entre si, aquest punt no està lluny del punt de connexió interior. No obstant això, a mesura que els angles entre cada línia disminueixen, la distància (longitud de miter) entre aquests punts augmenta exponencialment.

+ +

La propietat miterLimit determina quant lluny es pot col·locar el punt de connexió exterior des del punt de connexió interior. Si dues línies excedeixen aquest valor, es dibuixa una unió bisellada. S'ha de tenir en compte que la longitud màxima de miter és el producte de l'amplada de línia mesurat en el sistema de coordenades actual, pel valor d'aquesta propietat miterLimit  (el valor per defecte és 10.0 en HTML {{HTMLElement("canvas")}}), per la qual cosa miterLimit pot ajustar-se independentment de l'escala de visualització actual o de qualsevol transformació afí de les trajectòries: només influeix en la forma efectiva de les vores de la línia representada.

+ +

Més exactament, el límit de miter és la proporció màxima permesa de la longitud de l'extensió (en el llenç HTML, es mesura entre la cantonada exterior de les vores unides de la línia i el punt final comú dels segments de connexió especificats en la trajectòria) a la meitat de l'ample de la línia. La seva definició equival a la relació màxima permesa entre la distància dels punts interiors i exteriors de la unió de les vores i l'amplada total de la línia. Llavors, aixó és igual a la cosecant de la meitat de l'angle intern mínim dels segments de connexió per sota dels quals no es representarà cap unió miter, sinó només una unió bisellada:

+ +
    +
  • miterLimit = max miterLength / lineWidth = 1 / sin ( min θ / 2 )
    • +
  • El límit de miter predeterminat de 10.0 llevarà tots els miters per a angles aguts per sota d'uns 11 graus.
    • +
  • Un límit de miter igual a √2 ≈ 1.4142136 (arrodonit cap amunt) separarà els miters de tots els angles aguts, mantenint les unions de miter solament per als angles obtusos o rectes.
    • +
  • Un límit de miter igual a 1.0 és vàlid, però desactivarà tots els miters.
    • +
  • Els valors inferiors a 1.0 no són vàlids per al límit de miter.
    • +
+ +

Aquí tenim una petita demostració en la qual es pot configura miterLimit dinàmicament i veure com aquest afecta a les formes en el llenç. Les línies blaves mostren on es troben els punts d'inici i fi per a cadascuna de les línies en el patró de zig-zag.

+ +

Si s'especifica un valor de miterLimit inferior a 4.2, en aquesta demostració, cap de les cantonades visibles s'unirà amb una extensió de miter, només hi haurà un petit bisell prop de les línies blaves; amb un miterLimit superior a 10, la majoria de les cantonades d'aquesta demostració haurien d'unir-se amb un miter allunyat de les línies blaves, i l'alçada del qual disminuiria entre les cantonades, d'esquerra a dreta perquè es connectarien amb angles creixents ; amb valors intermedis, les cantonades del costat esquerre només s'uneixen amb un bisell prop de les línies blaves, i les cantonades del costat dret amb una extensió de miter (també amb una altçada decreixent).

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

+ +

Ús de guions de línia

+ +

El mètode setLineDash i la propietat lineDashOffset especifiquen el patró de guió per a les línies. El mètode setLineDash accepta una llista de nombres que especifica distàncies per dibuixar alternativament una línia i un buit i la propietat lineDashOffset estableix un desplaçament on començar el patró

+ +

En aquest exemple estem creant un efecte de formigues marxant. És una tècnica d'animació que es troba sovint en les eines de selecció de programes gràfics d'ordinador. Ajuda a l'usuari a distingir la vora de selecció del fons de la imatge, animant la vora. Més endavant, en aquest tutorial, podeu aprendre com fer-ho i altres animacions bàsiques.

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

+ +

Igual que qualsevol altre programa normal de dibuix , podem emplenar i traçar formes usant, gradients lineals i radials. Es crea un objecte {{domxref("CanvasGradient")}} utilitzant un dels mètodes següents. A continuació, podem assignar aquest objecte a les propietats fillStyle o strokeStyle.

+ +
+
{{domxref("CanvasRenderingContext2D.createLinearGradient", "createLinearGradient(x1, y1, x2, y2)")}}
+
Crea un objecte de degradat lineal amb un punt inicial de (x1, y1) i un punt final de (x2, y2).
+
{{domxref("CanvasRenderingContext2D.createRadialGradient", "createRadialGradient(x1, y1, r1, x2, y2, r2)")}}
+
Crea un degradat radial. Els paràmetres representen dos cercles, un amb el seu centre en (x1, y1) i un radi de r1, i l'altre amb el seu centre en (x2, y2) amb un radi de r2.
+
+ +

Per exemple:

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

Una vegada s'ha creat un objecte CanvasGradient se li pot assignar colors usant el mètode addColorStop().

+ +
+
{{domxref("CanvasGradient.addColorStop", "gradient.addColorStop(position, color)")}}
+
Crea una nova parada de color en l'objecte gradient. position és un nombre entre 0.0 i 1.0 i defineix la posició relativa del color en el degradat,  i l'argument color, ha de ser una cadena que representi un {{cssxref("<color>")}} CSS, indicant el color que el gradient ha d'aconseguir en aquest desplaçament en la transició.
+
+ +

Es pot afegir tantes parades de color, a un gardient, com es necessiti. A continuació, es mostra un gradient lineal molt simple de blanc a negre.

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

Un exemple de createLinearGradient

+ +

En aquest exemple, es crearà dos gradientss diferents. Com es podrà veure aquí, tant les propietats strokeStyle com fillStyle poden acceptar un objecte canvasGradient com a entrada vàlida.

+ +
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);
+
+}
+
+ + + +

El primer és un gradient de fons. Com es veu, s'assignen dos colors a la mateixa posició. Això es fa per fer transicions de color molt nítides, en aquest cas del blanc al verd. No importa en quina ordre es defineixin les parades de color, però en aquest cas especial, ho fa de forma significativa. Si es mantenen les tasques en l'ordre en què es desitja que apareguin, això no serà un problema.

+ +

En el segon gradient, no s'assigna el color inicial (a la posició 0.0), ja que no és estrictament necessari, perquè automàticament assumirà el color de la següent parada de color. Per tant, l'assignació del color negre en la posició 0.5, automàticament fa que el gradient, des de l'inici fins a aquest punt, sigui negre.

+ +

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

+ +

Un exemple de createRadialGradient

+ +

En aquest exemple, definim quatre gradients radials diferents. Com que tenim el control sobre els punts d'inici i de tancament del gradient, podem aconseguir efectes més complexos del que normalment tindríem en els gradients radials "clàssics" que veiem, per exemple, en Photoshop (és a dir, un gradient amb un únic punt central, on el gradient s'expandeix cap a l'exterior en forma circular).

+ +
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);
+}
+
+ + + +

En aquest cas, hem desplaçat lleugerament el punt d'inici des del punt final per aconseguir un efecte 3D esfèric. Lo millor es tractar d'evitar que els cercles interns i externs se superposin, ja que això genera efectes estranys que són difícils de predir.

+ +

L'última parada de color en cadascun dels quatre gradients, utilitza un color completament transparent. Si es desitja tenir una bona transició, d'aquesta a la parada de color anterior, tots dos colors han de ser iguals. Això no és molt obvi del codi, perquè utilitza dos mètodes de color CSS diferents com a demostració, però en el primer gradient #019F62 = rgba(1,159,98,1).

+ +

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

+ +

Patrons

+ +

En un dels exemples de la pàgina anterior, hem utilitzat una sèrie de bucles per crear un patró d'imatges. Hi ha, però, un mètode molt més senzill: el mètode createPattern().

+ +
+
{{domxref("CanvasRenderingContext2D.createPattern", "createPattern(image, type)")}}
+
Crea i retorna un nou objecte de patró canvas. image es un {{domxref("CanvasImageSource")}} (és a dir, un {{domxref("HTMLImageElement")}}, altre llenç, un element {{HTMLElement("video")}} o similar. type és una cadena que indica com utilitzar la imatge.
+
+ +

Type, especifica com utilitzar la imatge per crear el patró, i ha de ser un dels següents valors de cadena:

+ +
+
repeat
+
Teixeix la imatge en ambdues direccions vertical i horitzontal.
+
repeat-x
+
Teixeix la imatge horitzontalment però no verticalment.
+
repeat-y
+
Teixeix la imatge verticalment però no horitzontalment.
+
no-repeat
+
No teixeix la imatge. S'utilitza només una vegada.
+
+ +

S'utilitzar aquest mètode per crear un objecte {{domxref("CanvasPattern")}} que és molt similar als mètodes de gradient que hem vist anteriorment. Una vegada que s'ha creat un patró, se li pot assignar les propietats fillStyle o strokeStyle. Per exemple:

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

Nota: Igual que amb el mètode drawImage(), ens hem d'assegurar que la imatge que utilitzem s'hagi carregat abans de cridar a aquest mètode o que el patró es dibuixi incorrectament.

+
+ +

Un exemple de createPattern

+ +

En aquest últim exemple, crearem un patró per assignar a la propietat fillStyle. L'únic que cal esmentar, és l'ús del controlador onload de la imatge. Això és per assegurar-se de que la imatge es carregui abans que s'assigni el patró.

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

+ +

Ombres (Shadows)

+ +

L'ús d'ombres implica només quatre propietats:

+ +
+
{{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX = float")}}
+
Indica la distància horitzontal que l'ombra ha d'estendre's des de l'objecte. Aquest valor no es veu afectat per la matriu de transformació. El valor predeterminat és 0.
+
{{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY = float")}}
+
Indica la distància vertical que l'ombra ha d'estendre's des de l'objecte. Aquest valor no es veu afectat per la matriu de transformació. El valor predeterminat és 0.
+
{{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur = float")}}
+
Indica la grandària de l'efecte de desenfocament; aquest valor no es correspon a un nombre de píxels i no es veu afectat per la matriu de transformació actual. El valor per defecte és 0.
+
{{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor = color")}}
+
Un valor de color CSS estàndard, que indica el color de l'efecte d'ombra; per defecte, és negre completament transparent.
+
+ +

Les propietats shadowOffsetX i shadowOffsetY indiquen fins a on ha d'estendre's l'ombra des de l'objecte en les direccions X i Y; aquests valors no es veuen afectats per la matriu de transformació actual. Utilitzar valors negatius per fer que l'ombra s'estengui cap amunt o cap a l'esquerra, i valors positius perquè l'ombra s'estengui cap avall o cap a la dreta. Tots dos són 0 per defecte.

+ +

La propietat shadowBlur indica la grandària de l'efecte de desenfocament; aquest valor no es correspon a un nombre de píxels i no es veu afectat per la matriu de transformació actual. El valor per defecte és 0.

+ +

La propietat shadowColor és un valor de color CSS estàndard, que indica el color de l'efecte d'ombra; per defecte, és negre completament transparent.

+ +
+

Nota: Les ombres només es dibuixen per a operacions de composició de fonts.

+
+ +

Un exemple de text ombrejat

+ +

Aquest exemple dibuixa una cadena de text amb un efecte d'ombra.

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

+ +

Veurem la propietat font i el mètode fillText en el següent capítol sobre com dibuixar text.

+ +

Regles de farciment del llenç

+ +

Quan s'utilitza fill (o {{domxref("CanvasRenderingContext2D.clip", "clip")}} i {{domxref("CanvasRenderingContext2D.isPointInPath", "isPointinPath")}}) es pot proporcionar opcionalment un algorisme de regles de farciment per determinar si un punt està dins o fora d'una trajectòria i, per tant, si s'emplena o no. Això és útil quan una trajectòria es creua o es nia.
+
+ Dos valors són possibles:

+ + + +

En aquest exemple estem usant la regla evenodd.

+ +
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/ca/web/api/canvas_api/tutorial/basic_animations/index.html b/files/ca/web/api/canvas_api/tutorial/basic_animations/index.html new file mode 100644 index 0000000000..e4a3751d1e --- /dev/null +++ b/files/ca/web/api/canvas_api/tutorial/basic_animations/index.html @@ -0,0 +1,335 @@ +--- +title: Animacions bàsiques +slug: Web/API/Canvas_API/Tutorial/Animacions_bàsiques +tags: + - Canvas + - Graphics + - HTML + - HTML5 + - Intermediate + - Tutorial +translation_of: Web/API/Canvas_API/Tutorial/Basic_animations +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Web/API/Canvas_API/Tutorial/Advanced_animations")}}
+ +
+

Atès que estem usant Javascript per controlar els elements {{HTMLElement("canvas")}}, també és molt fàcil fer animacions (interactives). En aquest capítol veurem com fer algunes animacions bàsiques.

+
+ +

Probablement, la major limitació és que, una vegada que es dibuixa una forma, aquesta es manté així. Si necessitem moure-la, hem de tornar a dibuixar-la i tot el que s'ha dibuixat abans. Es necessita molt temps per tornar a dibuixar quadres complexos i el rendiment depèn en gran manera de la velocitat de l'equip en el qual s'està executant.

+ +

Passos bàsics d'animació

+ +

Aquests són els passos que s'han de seguir per dibuixar un marc:

+ +
    +
  1. Esborrar el llenç
    + A menys que les formes que es dibuixin omplin el llenç complet (per exemple, una imatge de fons), és necessari esborrar qualsevol forma que s'hi hagi dibuixat prèviament. La manera més fàcil de fer-ho, és usant el mètode {{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}.
    2. +
  2. Guardar l'estat del llenç
    + Si es canvia qualsevol configuració (com ara estils, transformacions, etc.) que afectin a l'estat del llenç i ens volem assegurar que l'estat original s'utilitza cada vegada que es dibuixa un marc, hem de guardar aquest estat original.
    3. +
  3. Dibuixar formes animades
    + El pas on es fa la representació del marc real.
    4. +
  4. Restaurar l'estat del llenç
    + Si s'ha guardat l'estat, ho hem de restaurar abans de dibuixar un nou marc.
    5. +
+ +

Controlar una animació

+ +

Les formes es dibuixen al llenç usant els mètodes de canvas directament o cridant a les funcions personalitzades. En circumstàncies normals, només veiem que aquests resultats apareixen en el llenç quan el script acaba d'executar-se. Per exemple, no és possible fer una animació des d'un bucle for.

+ +

Això significa que necessitem una forma d'executar les nostres funcions de dibuix durant un període de temps. Hi ha dues maneres de controlar una animació com aquesta.

+ +

Actualitzacions programades

+ +

Primer estan les funcions {{domxref("window.setInterval()")}}, {{domxref("window.setTimeout()")}} i {{domxref("window.requestAnimationFrame()")}}, que es poden utilitzar per cridar a una funció específica durant un període de temps determinat.

+ +
+
{{domxref("WindowTimers.setInterval", "setInterval(function, delay)")}}
+
Inicia repetidament l'execució de la funció especificada per la funció, cada mil·lisegons de retard.
+
{{domxref("WindowTimers.setTimeout", "setTimeout(function, delay)")}}
+
Executa la funció especificada per la function en mil·lisegons de delay.
+
{{domxref("Window.requestAnimationFrame()", "requestAnimationFrame(callback)")}}
+
Li diu al navegador que desitja realitzar una animació i sol·licita al navegador que cridi a una funció especifica per actualitzar una animació abans del proper repintat.
+
+ +

Si no es vol cap interacció amb l'usuari, es pot utilitzar la funció setInterval() que executa repetidament el codi proporcionat. Si volguéssim fer un joc, podríem usar esdeveniments de teclat o ratolí per controlar l'animació i usar setTimeout(). En establir {{domxref("EventListener")}}s, capturem qualsevol interacció de l'usuari i s'executan les nostres funcions d'animació

+ +
+

En els exemples següents, utilitzarem el mètode {{domxref("window.requestAnimationFrame()")}} per controlar l'animació. El mètode requestAnimationFrame proporciona una manera fluïda i eficient per a l'animació, cridant al marc d'animació quan el sistema estigui preparat per pintar el marc. El nombre de crides retornades és generalment 60 vegades per segon i pot reduir-se a una taxa més baixa quan s'executa en les pestanyes de fons. Per a més informació sobre el bucle d'animació, especialment per a jocs, veure l'article Anatomia d'un videojoc en la nostra Zona de desenvolupament de jocs.

+
+ +

Un sistema solar animat

+ +

Aquest exemple anima un petit model del nostre 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';
+  window.requestAnimationFrame(draw);
+}
+
+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);
+
+  window.requestAnimationFrame(draw);
+}
+
+init();
+
+ + + +

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

+ +

Un rellotge animat

+ +

Aquest exemple dibuixa un rellotge animat que mostra l'hora actual.

+ +
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();
+
+  window.requestAnimationFrame(clock);
+}
+
+window.requestAnimationFrame(clock);
+ + + +

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

+ +

Un panorama en bucle

+ +

En aquest exemple, es desplaça una imatge panoràmica d'esquerra a dreta. Estem usant una imatge del Parc Nacional Yosemite, que hem pres de Wikipedia, però es pot usar qualsevol imatge que sigui més gran que el llenç.

+ +
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) {
+        // image larger than canvas
+        x = CanvasXSize - imgW;
+    }
+    if (imgW > CanvasXSize) {
+        // image width larger than canvas
+        clearX = imgW;
+    } else {
+        clearX = CanvasXSize;
+    }
+    if (imgH > CanvasYSize) {
+        // image height larger than canvas
+        clearY = imgH;
+    } else {
+        clearY = CanvasYSize;
+    }
+
+    // get canvas context
+    ctx = document.getElementById('canvas').getContext('2d');
+
+    // set refresh rate
+    return setInterval(draw, speed);
+}
+
+function draw() {
+    ctx.clearRect(0, 0, clearX, clearY); // clear the canvas
+
+    // if image is <= Canvas Size
+    if (imgW <= CanvasXSize) {
+        // reset, start from beginning
+        if (x > CanvasXSize) {
+            x = -imgW + x;
+        }
+        // draw additional image1
+        if (x > 0) {
+            ctx.drawImage(img, -imgW + x, y, imgW, imgH);
+        }
+        // draw additional image2
+        if (x - imgW > 0) {
+            ctx.drawImage(img, -imgW * 2 + x, y, imgW, imgH);
+        }
+    }
+
+    // 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;
+}
+
+ +

A continuació un {{HTMLElement("canvas")}} en què es desplaça la imatge. Hem de tenir en compte que l'amplada i l'alçada especificades aquí, han de coincidir amb els valors de les variables CanvasXZSize i CanvasYSize en el codi JavaScript.

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

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

+ +

Altres exemples

+ +
+
Una roda de raigs bàsica
+
Un bon exemple de com fer animacions usant els controls del teclat.
+
Animacions avançades
+
En el proper capítol veurem algunes tècniques avançades d'animació i física.
+
+ +

{{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Web/API/Canvas_API/Tutorial/Advanced_animations")}}

diff --git a/files/ca/web/api/canvas_api/tutorial/basic_usage/index.html b/files/ca/web/api/canvas_api/tutorial/basic_usage/index.html new file mode 100644 index 0000000000..fb15a62d81 --- /dev/null +++ b/files/ca/web/api/canvas_api/tutorial/basic_usage/index.html @@ -0,0 +1,158 @@ +--- +title: Ús bàsic de canvas +slug: Web/API/Canvas_API/Tutorial/Ús_bàsic +tags: + - Canvas + - Graphics + - HTML + - Intermediate + - Tutorial +translation_of: Web/API/Canvas_API/Tutorial/Basic_usage +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}}
+ +
+

Comencem aquest tutorial consultant l'element {{HTMLElement("canvas")}} {{Glossary("HTML")}}. Al final d'aquesta pàgina, sabreu com configurar un context 2D de canvas i haureu dibuixat un primer exemple en el vostre navegador.

+
+ +

L'element <canvas>

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

A primera vista, {{HTMLElement("canvas")}} s'assembla l'element {{HTMLElement("img")}} amb l'única diferència clara, que no té els atributs src i alt. De fet, l'element <canvas> només té dos atributs, {{htmlattrxref("width", "canvas")}} i {{htmlattrxref("height", "canvas")}}. Aquests són opcionals i també es poden establir utilitzant les properties {{Glossary("DOM")}} . Quan no s'especifiquen els atributs width i height, inicialment canvas tindrà 300 píxels d'amplada i 150 píxels d'alçada. L'element es pot dimensionar arbitràriament per {{Glossary("CSS")}}, però durant la representació, la imatge s'escala per adaptar-se a la seva grandària de disseny: si el dimensionament CSS no respecta la relació inicial de canvas, apareixerà distorsionada

+ +
+

Nota: Si les vostres representacions semblen distorsionades, intenteu especificar els atributs width i height, explícitament, en els atributs <canvas> i no utilitzeu CSS.

+
+ +

L'atribut id no és específic de l'element <canvas>, però és un dels atributs HTML global que es pot aplicar a qualsevol element HTML (com class, per exemple). Sempre és una bona idea proporcionar un id, perquè això fa que sigui molt més fàcil identificar-lo en un script.

+ +

L'element <canvas> se li pot donar estil com qualsevol imatge normal ({{cssxref("margin")}}, {{cssxref("border")}}, {{cssxref("background")}}…). Aquestes regles, no obstant això, no afecten al dibuix real sobre el llenç. Veurem com això es fa en un capítol dedicat d'aquest tutorial. Quan no s'apliquen regles d'estil al llenç, inicialment, serà totalment transparent.

+ +
+

Contingut alternatiu

+ +

L'element <canvas> difereix d'una etiqueta {{HTMLElement("img")}} com per els elements {{HTMLElement("video")}}, {{HTMLElement("audio")}} o {{HTMLElement("picture")}}, és fàcil definir algun contingut alternatiu, que es mostri en navegadors antics que no ho suportin, com ara en versions d'Internet Explorer anteriors a la versió 9 o navegadors textuals. Sempre haureu de proporcionar contingut alternatiu perquè els navegadors ho mostrin.

+ +

Proporcionar contingut alternatiu és molt senzill: simplement inseriu el contingut alternatiu dins de l'element <canvas>. Els navegadors que no suporten <canvas> ignoraran el contenidor i mostraran el contingut alternatiu dins del mateix. Els navegadors que suporten <canvas> ignoraran el contingut dins del contenidor, i simplement mostraran el llenç, normalment.

+ +

Per exemple, podríem proporcionar una descripció de text del contingut del llenç o proporcionar una imatge estàtica del contingut presentat dinàmicament. Això pot semblar-se a això:

+ +
<canvas id="stockGraph" width="150" height="150">
+  current stock price: $3.15 + 0.15
+</canvas>
+
+<canvas id="clock" width="150" height="150">
+  <img src="images/clock.png" width="150" height="150" alt=""/>
+</canvas>
+
+ +

Dir-li a l'usuari que utilitzi un navegador diferent que suporti canvas no ajuda als usuaris que no poden llegir canvas en absolut, per exemple. Proporcionar un text alternatiu útil o un DOM secundari, ajuda a fer canvas més accessible.

+ +

Etiqueta </canvas> obligatoria

+ +

Com a conseqüència de la manera en què es proporciona una solució alternativa, a diferència de l'element {{HTMLElement("img")}}, l'element {{HTMLElement("canvas")}} requereix l'etiqueta de tancament (</canvas>). Si aquesta etiqueta no està present, la resta del document es consideraria contingut alternatiu i no es mostraria.

+ +

Si no es necessita un contingut alternatiu, un simple <canvas id="foo" ...></canvas> és totalment compatible amb tots els navegadors que suporten canvas.

+ +

El context de representació

+ +

L'element {{HTMLElement("canvas")}} crea una superfície de dibuix de grandària fixa que exposa un o més contextos de representació, que s'utilitzen per crear i manipular el contingut mostrat. En aquest tutorial, ens centrem en el context de representació 2D. Altres contextos poden proporcionar diferents tipus de representació; per exemple, WebGL utilitza un context 3D basat en OpenGL ÉS.Other contexts may provide different types of rendering; for example, WebGL uses a 3D context based on OpenGL ES.

+ +

El llenç està inicialment en blanc. Per mostrar alguna cosa, un script, primer necessita accedir al context de representació i dibuixar en ell. L'element {{HTMLElement("canvas")}} té un mètode anomenat {{domxref("HTMLCanvasElement.getContext", "getContext()")}}, utilitzat per obtenir el context de representació i les seves funcions de dibuix. getContext() pren un paràmetre, el tipus de context. Per als gràfics 2D, com els que es detallen en aquest tutorial, heu d'especificar "2d" per obtenir un {{domxref("CanvasRenderingContext2D")}}.

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

La primera línia del script recupera el node en el DOM, que representa l'element {{HTMLElement("canvas")}} cridant el mètode {{domxref("document.getElementById()")}}. Un cop tingueu el node d'element, podeu accedir al context del dibuix mitjançant el mètode getContext().

+ +
+

Comprovació del suport

+ +

El contingut alternatiu es mostra en navegadors que no admeten {{HTMLElement("canvas")}}. Les seqüències d'ordres, també poden comprovar la compatibilitat mitjançant programació, simplement provant la presència del mètode getContext(). El nostre fragment de codi de dalt es converteix en una cosa així:

+ +
var canvas = document.getElementById('tutorial');
+
+if (canvas.getContext) {
+  var ctx = canvas.getContext('2d');
+  // drawing code here
+} else {
+  // canvas-unsupported code here
+}
+
+
+
+ +

Una plantilla esquelet

+ +

Aquí teniu una plantilla minimalista, que usarem com a punt de partida per a exemples posteriors.

+ +
+

Nota: no és una bona pràctica incrustar un script dins d'HTML. Ho fem aquí per mantenir l'exemple concís.

+
+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <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>
+
+ +

El script inclou una funció anomenada draw(), que s'executa una vegada que la pàgina acaba de carregar-se; això es fa escoltant  l'esdeveniment {{event("load")}} en el document. Aquesta funció, o una similar, també pot ser cridada usant {{domxref("WindowTimers.setTimeout", "window.setTimeout()")}}, {{domxref("WindowTimers.setInterval", "window.setInterval()")}}, o qualsevol altre controlador d'esdeveniments, sempre que la pàgina s'hagi carregat primer.

+ +

Així és com es veuria una plantilla en acció. Com es mostra aquí, inicialment està en blanc.

+ +

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

+ +

Un exemple senzill

+ +

Per començar, feu un cop d'ull a un exemple senzill que dibuixa dos rectangles que es creuen, un dels quals té una transparència alfa. Explorarem com funciona això amb més detall en exemples posteriors.

+ +
<!DOCTYPE html>
+<html>
+ <head>
+  <meta charset="utf-8"/>
+  <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, 50, 50);
+
+        ctx.fillStyle = 'rgba(0, 0, 200, 0.5)';
+        ctx.fillRect(30, 30, 50, 50);
+      }
+    }
+  </script>
+ </head>
+ <body onload="draw();">
+   <canvas id="canvas" width="150" height="150"></canvas>
+ </body>
+</html>
+
+ +

Aquest exemple es veu així:

+ +

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

+ +

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

diff --git "a/files/ca/web/api/canvas_api/tutorial/composici\303\263/index.html" "b/files/ca/web/api/canvas_api/tutorial/composici\303\263/index.html" deleted file mode 100644 index e556e911d4..0000000000 --- "a/files/ca/web/api/canvas_api/tutorial/composici\303\263/index.html" +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: Composició i retall -slug: Web/API/Canvas_API/Tutorial/Composició -tags: - - Canvas - - Graphics - - HTML - - HTML5 - - Intermediate - - Tutorial -translation_of: Web/API/Canvas_API/Tutorial/Compositing ---- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Transformations", "Web/API/Canvas_API/Tutorial/Basic_animations")}}
- -
-

En tots els nostres exemples anteriors, les formes sempre s'han dibuixat una damunt de l'altra. Això és més que adequat per a la majoria de les situacions, però limita l'ordre en què es construeixen formes compostes. No obstant això, podem canviar aquest comportament establint la propietat globalCompositeOperation. A més, la propietat clip permet ocultar parts de formes no desitjades.

-
- -

globalCompositeOperation

- -

No només podem dibuixar noves formes darrere de les formes existents, sinó que també, podem utilitzar-ho per emmascarar certes àrees, esborrar seccions del llenç (no limitades a rectangles, com ho fa el mètode {{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}) i molt més.

- -
-
{{domxref("CanvasRenderingContext2D.globalCompositeOperation", "globalCompositeOperation = type")}}
-
Estableix el tipus d'operació de composició que s'aplicarà en dibuixar noves formes, on el tipus és una cadena que identifica quina de les dotze operacions de composició ha d'utilitzar-se.
-
- -

Veure exemples de composició per al codi dels següents exemples.

- -

{{EmbedLiveSample("Compositing_example", 750, 6750, "" ,"Web/API/Canvas_API/Tutorial/Compositing/Example")}}

- -

Trajectòries de retall

- -

Una trajectòria de retall és com una forma de llenç normal, però actua com una màscara per ocultar parts no desitjades de formes. Això es visualitza en la imatge de la dreta. La forma d'estel vermell és la nostre trajectòria de retall. Tot el que queda fora d'aquesta trajectòria no es dibuixarà en el llenç.

- -

Si comparem les trajectòries de retall  amb la propietat globalCompositeOperation, que hem vist anteriorment, veiem dos modes de composició que aconsegueixen més o menys el mateix efecte en source-in i source-atop. Les diferències més importants entre les dues, són que les trajectòries de retall mai es dibuixen realment al llenç i la trajectòria de retall mai es veu afectada per l'addició de noves formes. Això fa que les trajectòries de retall siguin ideals per dibuixar múltiples formes en un àrea restringida

- -

En el capítol sobre dibuixar formes, només s'ha esmentat els mètodes stroke() i fill(), però hi ha un tercer mètode que es pot utilitzar amb les trajectòries, anomenat clip().

- -
-
{{domxref("CanvasRenderingContext2D.clip", "clip()")}}
-
Converteix la trajectòria que s'està construint, en la trajectòria de retall actual.
-
- -

Utilitzar clip() en lloc de closePath() per tancar una trajectòria i convertir-la en una trajectòria de retall en lloc de traçar o emplenar la trajectòria.

- -

Per defecte, l'element {{HTMLElement("canvas")}}, té una trajectòria de retall de la mateixa grandària que el propi llenç. En altres paraules, no es produeix cap retall.

- -

Un exemple de clip

- -

En aquest exemple, utilitzarem un trajectòria de retall circular per restringir el dibuix d'un conjunt d'estels aleatòries a una regió en particular.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  ctx.fillRect(0, 0, 150, 150);
-  ctx.translate(75, 75);
-
-  // Crea una trajectòria de retall circular
-  ctx.beginPath();
-  ctx.arc(0, 0, 60, 0, Math.PI * 2, true);
-  ctx.clip();
-
-  // dibuixa el fons
-  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);
-
-  // dibuixa els estels
-  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();
-}
-
- - - -

En les primeres línies de codi, dibuixem un rectangle negre de la grandària del llenç com a fons, després traslladem l'origen al centre. A continuació, creem la trajectòria de retall circular, dibuixant un arc i cridem clip(). Les trajectòries de retall també formen part de l'estat de guardat del llenç. Si haguéssim volgut mantenir la trajectòria de retall original, podríem haver guardat l'estat del llenç abans de crear el nou.

- -

Tot el que es dibuixa després de crear la trajectòria de retall, només apareixerà dins d'aquesta trajectòria. Es pot veure això clarament, en el gradient lineal que es dibuixa a continuació. Després d'això, es dibuixa un conjunt de 50 estels posicionats aleatòriament i escalats, usant la funció personalitzada drawStar(). De nou, els estels, només apareixen dins de la trajectòria de retall definida.

- -

{{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/ca/web/api/canvas_api/tutorial/compositing/index.html b/files/ca/web/api/canvas_api/tutorial/compositing/index.html new file mode 100644 index 0000000000..e556e911d4 --- /dev/null +++ b/files/ca/web/api/canvas_api/tutorial/compositing/index.html @@ -0,0 +1,113 @@ +--- +title: Composició i retall +slug: Web/API/Canvas_API/Tutorial/Composició +tags: + - Canvas + - Graphics + - HTML + - HTML5 + - Intermediate + - Tutorial +translation_of: Web/API/Canvas_API/Tutorial/Compositing +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Transformations", "Web/API/Canvas_API/Tutorial/Basic_animations")}}
+ +
+

En tots els nostres exemples anteriors, les formes sempre s'han dibuixat una damunt de l'altra. Això és més que adequat per a la majoria de les situacions, però limita l'ordre en què es construeixen formes compostes. No obstant això, podem canviar aquest comportament establint la propietat globalCompositeOperation. A més, la propietat clip permet ocultar parts de formes no desitjades.

+
+ +

globalCompositeOperation

+ +

No només podem dibuixar noves formes darrere de les formes existents, sinó que també, podem utilitzar-ho per emmascarar certes àrees, esborrar seccions del llenç (no limitades a rectangles, com ho fa el mètode {{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}) i molt més.

+ +
+
{{domxref("CanvasRenderingContext2D.globalCompositeOperation", "globalCompositeOperation = type")}}
+
Estableix el tipus d'operació de composició que s'aplicarà en dibuixar noves formes, on el tipus és una cadena que identifica quina de les dotze operacions de composició ha d'utilitzar-se.
+
+ +

Veure exemples de composició per al codi dels següents exemples.

+ +

{{EmbedLiveSample("Compositing_example", 750, 6750, "" ,"Web/API/Canvas_API/Tutorial/Compositing/Example")}}

+ +

Trajectòries de retall

+ +

Una trajectòria de retall és com una forma de llenç normal, però actua com una màscara per ocultar parts no desitjades de formes. Això es visualitza en la imatge de la dreta. La forma d'estel vermell és la nostre trajectòria de retall. Tot el que queda fora d'aquesta trajectòria no es dibuixarà en el llenç.

+ +

Si comparem les trajectòries de retall  amb la propietat globalCompositeOperation, que hem vist anteriorment, veiem dos modes de composició que aconsegueixen més o menys el mateix efecte en source-in i source-atop. Les diferències més importants entre les dues, són que les trajectòries de retall mai es dibuixen realment al llenç i la trajectòria de retall mai es veu afectada per l'addició de noves formes. Això fa que les trajectòries de retall siguin ideals per dibuixar múltiples formes en un àrea restringida

+ +

En el capítol sobre dibuixar formes, només s'ha esmentat els mètodes stroke() i fill(), però hi ha un tercer mètode que es pot utilitzar amb les trajectòries, anomenat clip().

+ +
+
{{domxref("CanvasRenderingContext2D.clip", "clip()")}}
+
Converteix la trajectòria que s'està construint, en la trajectòria de retall actual.
+
+ +

Utilitzar clip() en lloc de closePath() per tancar una trajectòria i convertir-la en una trajectòria de retall en lloc de traçar o emplenar la trajectòria.

+ +

Per defecte, l'element {{HTMLElement("canvas")}}, té una trajectòria de retall de la mateixa grandària que el propi llenç. En altres paraules, no es produeix cap retall.

+ +

Un exemple de clip

+ +

En aquest exemple, utilitzarem un trajectòria de retall circular per restringir el dibuix d'un conjunt d'estels aleatòries a una regió en particular.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.fillRect(0, 0, 150, 150);
+  ctx.translate(75, 75);
+
+  // Crea una trajectòria de retall circular
+  ctx.beginPath();
+  ctx.arc(0, 0, 60, 0, Math.PI * 2, true);
+  ctx.clip();
+
+  // dibuixa el fons
+  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);
+
+  // dibuixa els estels
+  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();
+}
+
+ + + +

En les primeres línies de codi, dibuixem un rectangle negre de la grandària del llenç com a fons, després traslladem l'origen al centre. A continuació, creem la trajectòria de retall circular, dibuixant un arc i cridem clip(). Les trajectòries de retall també formen part de l'estat de guardat del llenç. Si haguéssim volgut mantenir la trajectòria de retall original, podríem haver guardat l'estat del llenç abans de crear el nou.

+ +

Tot el que es dibuixa després de crear la trajectòria de retall, només apareixerà dins d'aquesta trajectòria. Es pot veure això clarament, en el gradient lineal que es dibuixa a continuació. Després d'això, es dibuixa un conjunt de 50 estels posicionats aleatòriament i escalats, usant la funció personalitzada drawStar(). De nou, els estels, només apareixen dins de la trajectòria de retall definida.

+ +

{{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/ca/web/api/canvas_api/tutorial/dibuixar_text/index.html b/files/ca/web/api/canvas_api/tutorial/dibuixar_text/index.html deleted file mode 100644 index 37b730176a..0000000000 --- a/files/ca/web/api/canvas_api/tutorial/dibuixar_text/index.html +++ /dev/null @@ -1,165 +0,0 @@ ---- -title: Dibuixar text -slug: Web/API/Canvas_API/Tutorial/Dibuixar_text -tags: - - Canvas - - Graphics - - Intermediate - - Tutorial -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")}}
- -
-

Després d'haver vist com aplicar estils i colors en el capítol anterior, ara veurem com dibuixar text sobre canvas.

-
- -

Dibuixar text

- -

El context de representació de canvas proporciona dos mètodes per representar el text:

- -
-
{{domxref("CanvasRenderingContext2D.fillText", "fillText(text, x, y [, maxWidth])")}}
-
Omple un text donat en la posició donada (x, y). Opcionalment amb ample màxim per dibuixar.
-
{{domxref("CanvasRenderingContext2D.strokeText", "strokeText(text, x, y [, maxWidth])")}}
-
Traça un text donat en la posició donada (x, y). Opcionalment amb ample màxim per dibuixar.
-
- -

Un exemple de fillText

- -

El text s'omple usant l'actual 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)}}

- -

Un exemple de strokeText

- -

El text s'omple usant l'actual strokeStyle.

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

- -

Estil de text

- -

En els exemples anteriors ja hem fet ús de la propietat font per fer el text una mica més gran que la grandària predeterminada. Hi ha algunes propietats més que permeten ajustar la forma en què el text es mostra en el llenç:

- -
-
{{domxref("CanvasRenderingContext2D.font", "font = value")}}
-
L'estil de text actual que s'utilitza en dibuixar text. Aquesta cadena utilitza la mateixa sintaxi que la propietat CSS {{cssxref("font")}}. La font predeterminada és 10px sans-serif.
-
{{domxref("CanvasRenderingContext2D.textAlign", "textAlign = value")}}
-
Configuració de l'alineació del text. Valors possibles: start, end, left, right o center. El valor predeterminat és start.
-
{{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline = value")}}
-
Configuració d'alineació de la línia de base. Valors possibles: top, hanging, middle, alphabetic, ideographic, bottom. El valor predeterminat és alphabetic.
-
{{domxref("CanvasRenderingContext2D.direction", "direction = value")}}
-
Direccionalitat. Valors possibles: ltr, rtl, inherit. El valor predeterminat és inherit.
-
- -

Aquestes propietats poden ser familiars, si heu treballat abans amb CSS.

- -

El següent diagrama del WHATWG mostra les diverses línies de base compatibles amb la propietat textBaseline.La part superior del quadrat em està aproximadament en la part superior dels glifos en una font, la línia de base penjant és on alguns glifos com आ estan ancorats, el mitjà està a mig camí entre la part superior del quadrat em i la part inferior del quadrat em,la línia de base alfabètica és on ancoren caràcters com Á, ÿ, -f i Ω, la línia de base ideográfica és on glifos com 私 i 達 estan ancorats, i la part inferior del quadrat em està aproximadament en la part inferior dels glifos en una font. La part superior i inferior del quadre delimitador pot estar lluny d'aquestes línies de base, a causa que els glifos s'estenen molt més allà del quadrat em.

- -

Un exemple de textBaseline

- -

Editeu el codi següent i vegeu els canvis actualitzats en directe en el llenç:

- -
ctx.font = '48px serif';
-ctx.textBaseline = 'hanging';
-ctx.strokeText('Hello world', 0, 100);
-
- - - -

{{ EmbedLiveSample('Playable_code', 700, 360) }}

- -

Mesures avançades de text

- -

En el cas de necessitar obtenir més detalls sobre el text, el següent mètode permet mesurar-ho.

- -
-
{{domxref("CanvasRenderingContext2D.measureText", "measureText()")}}
-
Retorna un objecte {{domxref("TextMetrics")}} que conté l'amplada, en píxels, que serà el text especificat quan es dibuixi en l'estil de text actual.
-
- -

El següent fragment de codi mostra com es pot mesurar un text i obtenir la seva amplada

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  var text = ctx.measureText('foo'); // TextMetrics object
-  text.width; // 16;
-}
-
- -

Notes específiques de Gecko

- -

En Gecko (el motor de representació de Firefox, Firefox OS i altres aplicacions basades en Mozilla), es van implementar algunes APIs prefixades en versions anteriors per dibuixar text en un llenç. Ara estan desaprovades i eliminades, ja no es garanteix el seu funcionament.

- -

{{PreviousNext("Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "Web/API/Canvas_API/Tutorial/Using_images")}}

- -
- - -
 
- -
 
-
diff --git a/files/ca/web/api/canvas_api/tutorial/drawing_text/index.html b/files/ca/web/api/canvas_api/tutorial/drawing_text/index.html new file mode 100644 index 0000000000..37b730176a --- /dev/null +++ b/files/ca/web/api/canvas_api/tutorial/drawing_text/index.html @@ -0,0 +1,165 @@ +--- +title: Dibuixar text +slug: Web/API/Canvas_API/Tutorial/Dibuixar_text +tags: + - Canvas + - Graphics + - Intermediate + - Tutorial +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")}}
+ +
+

Després d'haver vist com aplicar estils i colors en el capítol anterior, ara veurem com dibuixar text sobre canvas.

+
+ +

Dibuixar text

+ +

El context de representació de canvas proporciona dos mètodes per representar el text:

+ +
+
{{domxref("CanvasRenderingContext2D.fillText", "fillText(text, x, y [, maxWidth])")}}
+
Omple un text donat en la posició donada (x, y). Opcionalment amb ample màxim per dibuixar.
+
{{domxref("CanvasRenderingContext2D.strokeText", "strokeText(text, x, y [, maxWidth])")}}
+
Traça un text donat en la posició donada (x, y). Opcionalment amb ample màxim per dibuixar.
+
+ +

Un exemple de fillText

+ +

El text s'omple usant l'actual 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)}}

+ +

Un exemple de strokeText

+ +

El text s'omple usant l'actual strokeStyle.

+ +
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)}}

+ +

Estil de text

+ +

En els exemples anteriors ja hem fet ús de la propietat font per fer el text una mica més gran que la grandària predeterminada. Hi ha algunes propietats més que permeten ajustar la forma en què el text es mostra en el llenç:

+ +
+
{{domxref("CanvasRenderingContext2D.font", "font = value")}}
+
L'estil de text actual que s'utilitza en dibuixar text. Aquesta cadena utilitza la mateixa sintaxi que la propietat CSS {{cssxref("font")}}. La font predeterminada és 10px sans-serif.
+
{{domxref("CanvasRenderingContext2D.textAlign", "textAlign = value")}}
+
Configuració de l'alineació del text. Valors possibles: start, end, left, right o center. El valor predeterminat és start.
+
{{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline = value")}}
+
Configuració d'alineació de la línia de base. Valors possibles: top, hanging, middle, alphabetic, ideographic, bottom. El valor predeterminat és alphabetic.
+
{{domxref("CanvasRenderingContext2D.direction", "direction = value")}}
+
Direccionalitat. Valors possibles: ltr, rtl, inherit. El valor predeterminat és inherit.
+
+ +

Aquestes propietats poden ser familiars, si heu treballat abans amb CSS.

+ +

El següent diagrama del WHATWG mostra les diverses línies de base compatibles amb la propietat textBaseline.La part superior del quadrat em està aproximadament en la part superior dels glifos en una font, la línia de base penjant és on alguns glifos com आ estan ancorats, el mitjà està a mig camí entre la part superior del quadrat em i la part inferior del quadrat em,la línia de base alfabètica és on ancoren caràcters com Á, ÿ, +f i Ω, la línia de base ideográfica és on glifos com 私 i 達 estan ancorats, i la part inferior del quadrat em està aproximadament en la part inferior dels glifos en una font. La part superior i inferior del quadre delimitador pot estar lluny d'aquestes línies de base, a causa que els glifos s'estenen molt més allà del quadrat em.

+ +

Un exemple de textBaseline

+ +

Editeu el codi següent i vegeu els canvis actualitzats en directe en el llenç:

+ +
ctx.font = '48px serif';
+ctx.textBaseline = 'hanging';
+ctx.strokeText('Hello world', 0, 100);
+
+ + + +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

Mesures avançades de text

+ +

En el cas de necessitar obtenir més detalls sobre el text, el següent mètode permet mesurar-ho.

+ +
+
{{domxref("CanvasRenderingContext2D.measureText", "measureText()")}}
+
Retorna un objecte {{domxref("TextMetrics")}} que conté l'amplada, en píxels, que serà el text especificat quan es dibuixi en l'estil de text actual.
+
+ +

El següent fragment de codi mostra com es pot mesurar un text i obtenir la seva amplada

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var text = ctx.measureText('foo'); // TextMetrics object
+  text.width; // 16;
+}
+
+ +

Notes específiques de Gecko

+ +

En Gecko (el motor de representació de Firefox, Firefox OS i altres aplicacions basades en Mozilla), es van implementar algunes APIs prefixades en versions anteriors per dibuixar text en un llenç. Ara estan desaprovades i eliminades, ja no es garanteix el seu funcionament.

+ +

{{PreviousNext("Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "Web/API/Canvas_API/Tutorial/Using_images")}}

+ +
+ + +
 
+ +
 
+
diff --git "a/files/ca/web/api/canvas_api/tutorial/manipular_p\303\255xels_amb_canvas/index.html" "b/files/ca/web/api/canvas_api/tutorial/manipular_p\303\255xels_amb_canvas/index.html" deleted file mode 100644 index d792e62ef0..0000000000 --- "a/files/ca/web/api/canvas_api/tutorial/manipular_p\303\255xels_amb_canvas/index.html" +++ /dev/null @@ -1,307 +0,0 @@ ---- -title: Manipular píxels amb canvas -slug: Web/API/Canvas_API/Tutorial/Manipular_píxels_amb_canvas -tags: - - Canvas - - Graphics - - Intermediate - - Tutorial -translation_of: Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas ---- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Advanced_animations", "Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility")}}
- -
-

Fins ara no hem mirat els píxels reals del nostre llenç. Amb l'objecte ImageData podem llegir i escriure directament una matriu de dades per manipular dades de píxels. També veurem com es pot controlar el suavitzat de la imatge (anti-aliasing) i com guardar imatges del vostre llenç.

-
- -

L'objecte ImageData

- -

L'objecte {{domxref("ImageData")}} representa les dades de píxels subjacents d'un àrea d'un objecte canvas. Conté els següents atributs de només lectura:

- -
-
width
-
L'amplada de la imatge en píxels.
-
height
-
L'alçada de la imatge en píxels.
-
data
-
Un {{jsxref("Uint8ClampedArray")}} representa una matriu unidimensional que conté les dades en l'ordre RGBA, amb valors enters entre 0 i 255 (inclosos).
-
- -

La propietat data retorna un {{jsxref("Uint8ClampedArray")}} al que es pot accedir per veure les dades de píxel en brut; cada píxel està representat per quatre valors d'un byte (vermell, verd, blau i alfa, en aquest ordre; és a dir, format "RGBA"). Cada component de color està representat per un nombre enter entre 0 i 255. A cada component se li assigna un índex consecutiu dins de la matriu, el component vermell del píxel esquerre superior és l'índex 0 dins de la matriu. Els píxels es segueixen d'esquerra a dreta, a després cap avall, a través de la matriu.

- -

El {{jsxref("Uint8ClampedArray")}} conté height × width × 4 bytes de dades, amb valors d'índex que van des de 0 fins a (height×width×4)-1.

- -

Per exemple, per llegir el valor del component blau del píxel a la columna 200, fila 50 de la imatge, fariem el següent:

- -
blueComponent = imageData.data[((50 * (imageData.width * 4)) + (200 * 4)) + 2];
- -

Si se li dóna un conjunt de coordenades (X i Y), es pot acabar fent alguna cosa com això:

- -
var xCoord = 50;
-var yCoord = 100;
-var canvasWidth = 1024;
-
-function getColorIndicesForCoord(x, y, width) {
-  var red = y * (width * 4) + x * 4;
-  return [red, red + 1, red + 2, red + 3];
-}
-
-var colorIndices = getColorIndicesForCoord(xCoord, yCoord, canvasWidth);
-
-var redIndex = colorIndices[0];
-var greenIndex = colorIndices[1];
-var blueIndex = colorIndices[2];
-var alphaIndex = colorIndices[3];
-
-var redForCoord = imageData.data[redIndex];
-var greenForCoord = imageData.data[greenIndex];
-var blueForCoord = imageData.data[blueIndex];
-var alphaForCoord = imageData.data[alphaIndex];
-
- -

O, si ES6 is apropiat:

- -
const xCoord = 50;
-const yCoord = 100;
-const canvasWidth = 1024;
-
-const getColorIndicesForCoord = (x, y, width) => {
-  const red = y * (width * 4) + x * 4;
-  return [red, red + 1, red + 2, red + 3];
-};
-
-const colorIndices = getColorIndicesForCoord(xCoord, yCoord, canvasWidth);
-
-const [redIndex, greenIndex, blueIndex, alphaIndex] = colorIndices;
-
- -

També es pot accedir a la mida de la matriu de píxels en bytes llegint l'atribut Uint8ClampedArray.length:

- -
var numBytes = imageData.data.length;
-
- -

Crear un objecte ImageData

- -

Per crear un nou objecte ImageData en blanc, hem d'utilitzar el mètode {{domxref("CanvasRenderingContext2D.createImageData", "createImageData()")}}. Hi ha dues versions del mètode createImageData():

- -
var myImageData = ctx.createImageData(width, height);
- -

Crea un nou objecte ImageData amb les dimensions especificades. Tots els píxels estan predefinits en negre transparent.

- -

També podem crear un nou objecte ImageData amb les mateixes dimensions que l'objecte especificat amb anotherImageData. Els píxels del nou objecte, estan tots predefinits en negre transparent. Això no copia les dades de la imatge!

- -
var myImageData = ctx.createImageData(anotherImageData);
- -

Obtenir les dades de píxels per a un context

- -

Per obtenir un objecte ImageData que contingui una còpia de les dades de píxel per a un context de llenç, podem utilitzar el mètodegetImageData():

- -
var myImageData = ctx.getImageData(left, top, width, height);
- -

Aquest mètode retorna un objecte ImageData que representa les dades de píxel per a l'àrea del llenç, les cantonades del qual estan representades pels punts (left,top), (left+width, top), (left, top+height) i (left+width, top+height). Les coordenades s'especifiquen en unitats d'espai en coordenades canvas.

- -
-

Nota: Qualsevol píxel fora del llenç es retorna com a negre transparent en l'objecte ImageData resultant.

-
- -

Aquest mètode també es demostra a l'article Manipulant vídeo usant canvas.

- -

Un selector de colors

- -

En aquest exemple estem usant el mètode getImageData() per mostrar el color sota el cursor del ratolí. Per a això, necessitem la posició actual del ratolí amb layerX i layerY, llavors busquem les dades de píxels en aquesta posició en la matriu de píxels que getImageData() ens proporciona. Finalment, utilitzem les dades de la matriu per establir un color de fons i un text en el <div> per mostrar el color.

- - - -
var img = new Image();
-img.crossOrigin = 'anonymous';
-img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
-var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-img.onload = function() {
-  ctx.drawImage(img, 0, 0);
-  img.style.display = 'none';
-};
-var color = document.getElementById('color');
-function pick(event) {
-  var x = event.layerX;
-  var y = event.layerY;
-  var pixel = ctx.getImageData(x, y, 1, 1);
-  var data = pixel.data;
-  var rgba = 'rgba(' + data[0] + ', ' + data[1] +
-             ', ' + data[2] + ', ' + (data[3] / 255) + ')';
-  color.style.background =  rgba;
-  color.textContent = rgba;
-}
-canvas.addEventListener('mousemove', pick);
-
- -

{{ EmbedLiveSample('A_color_picker', 610, 240) }}

- -

Pintar dades de píxels en un context

- -

Utilitzem el mètode putImageData() per pintar dades de píxels en un context:

- -
ctx.putImageData(myImageData, dx, dy);
-
- -

Els paràmetres dx i dy indiquen les coordenades del dispositiu, dins del context en el que es pinta la cantonada superior esquerra de les dades de píxels que es vol dibuixar.

- -

Per exemple, per pintar tota la imatge representada per myImageData en la cantonada superior esquerra del context, simplement fem el següent:

- -
ctx.putImageData(myImageData, 0, 0);
-
- -

Escalat de grisos i inversió de colors

- -

En aquest exemple, iterem sobre tots els píxels per canviar els seus valors, després posem la matriu de píxels modificada, de nou, al llenç, utilitzant putImageData(). La funció invert, simplement, resta cada color del valor màxim 255. La funció grayscale, simplement, utilitza la mitjana de vermell, verd i blau. També es pot utilitzar una mitjana ponderada, donada per la fórmula x = 0.299r + 0.587g + 0.114b, per exemple. Vegeu Escala de grisos (Grayscale) a Wikipedia per obtenir més informació.

- - - -
var img = new Image();
-img.crossOrigin = 'anonymous';
-img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
-img.onload = function() {
-  draw(this);
-};
-
-function draw(img) {
-  var canvas = document.getElementById('canvas');
-  var ctx = canvas.getContext('2d');
-  ctx.drawImage(img, 0, 0);
-  img.style.display = 'none';
-  var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
-  var data = imageData.data;
-
-  var invert = function() {
-    for (var i = 0; i < data.length; i += 4) {
-      data[i]     = 255 - data[i];     // red
-      data[i + 1] = 255 - data[i + 1]; // green
-      data[i + 2] = 255 - data[i + 2]; // blue
-    }
-    ctx.putImageData(imageData, 0, 0);
-  };
-
-  var grayscale = function() {
-    for (var i = 0; i < data.length; i += 4) {
-      var avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
-      data[i]     = avg; // red
-      data[i + 1] = avg; // green
-      data[i + 2] = avg; // blue
-    }
-    ctx.putImageData(imageData, 0, 0);
-  };
-
-  var invertbtn = document.getElementById('invertbtn');
-  invertbtn.addEventListener('click', invert);
-  var grayscalebtn = document.getElementById('grayscalebtn');
-  grayscalebtn.addEventListener('click', grayscale);
-}
-
- -

{{ EmbedLiveSample('Grayscaling_and_inverting_colors', 330, 270) }}

- -

Ampliació i suavitzat

- -

Amb l'ajuda del mètode {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}} un segon llenç i la propietat {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}}, podem ampliar la nostra imatge i veure els detalls.

- -

Obtenim la posició del ratolí, retallem una imatge de 5 píxels a l'esquerra i a dalt a 5 píxels a la dreta i a baix. A continuació, la copiem a un altre llenç i canviem la grandària de la imatge a la grandària que volguem. En el llenç de zoom, canviem la grandària de un retall de 10×10 píxels del llenç original a 200×200.

- -
zoomctx.drawImage(canvas,
-                  Math.abs(x - 5), Math.abs(y - 5),
-                  10, 10, 0, 0, 200, 200);
- -

Atès que el suavitzat (anti-aliasing) està habilitat per defecte, és possible que vulguem deshabilitar el suavitzat per veure els píxels clars. Alternant la casella de verificació es pot veure l'efecte de la propietat imageSmoothingEnabled (necessita prefixos per a diferents navegadors).

- - - - - -
var img = new Image();
-img.crossOrigin = 'anonymous';
-img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
-img.onload = function() {
-  draw(this);
-};
-
-function draw(img) {
-  var canvas = document.getElementById('canvas');
-  var ctx = canvas.getContext('2d');
-  ctx.drawImage(img, 0, 0);
-  img.style.display = 'none';
-  var zoomctx = document.getElementById('zoom').getContext('2d');
-
-  var smoothbtn = document.getElementById('smoothbtn');
-  var toggleSmoothing = function(event) {
-    zoomctx.imageSmoothingEnabled = this.checked;
-    zoomctx.mozImageSmoothingEnabled = this.checked;
-    zoomctx.webkitImageSmoothingEnabled = this.checked;
-    zoomctx.msImageSmoothingEnabled = this.checked;
-  };
-  smoothbtn.addEventListener('change', toggleSmoothing);
-
-  var zoom = function(event) {
-    var x = event.layerX;
-    var y = event.layerY;
-    zoomctx.drawImage(canvas,
-                      Math.abs(x - 5),
-                      Math.abs(y - 5),
-                      10, 10,
-                      0, 0,
-                      200, 200);
-  };
-
-  canvas.addEventListener('mousemove', zoom);
-}
- -

{{ EmbedLiveSample('Zoom_example', 620, 490) }}

- -

Guardar imatges

- -

El {{domxref("HTMLCanvasElement")}} proporciona un mètode toDataURL(), que és útil quan es guarden imatges. Retorna un URI de dades que conté una representació de la imatge en el format especificat pel paràmetre type (per defecte en PNG). La imatge retornada té una resolució de 96 dpi.

- -
-
{{domxref("HTMLCanvasElement.toDataURL", "canvas.toDataURL('image/png')")}}
-
Configuració per defecte. Crea una imatge PNG.
-
{{domxref("HTMLCanvasElement.toDataURL", "canvas.toDataURL('image/jpeg', quality)")}}
-
Crea una imatge JPG. Opcionalment, pot proporcionar una qualitat en el rang de 0 a 1, sent una d'elles la millor qualitat i amb 0 gairebé no recognoscible, però, petita en grandària d'arxiu.
-
- -

Una vegada que s'hagi generat un URI de dades des del llenç, es podrà utilitzar com a font de qualsevol {{HTMLElement("image")}} o posar-ho en un hipervíncle amb un atribut de descàrrega per guardar-ho en el disc, per exemple.

- -

També es pot crear un {{domxref("Blob")}} des del llenç.

- -
-
{{domxref("HTMLCanvasElement.toBlob", "canvas.toBlob(callback, type, encoderOptions)")}}
-
Crea un objecte Blob, representant la imatge continguda en el llenç.
-
- -

Vegeu també

- - - -

{{PreviousNext("Web/API/Canvas_API/Tutorial/Advanced_animations", "Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility")}}

diff --git a/files/ca/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.html b/files/ca/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.html new file mode 100644 index 0000000000..d792e62ef0 --- /dev/null +++ b/files/ca/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.html @@ -0,0 +1,307 @@ +--- +title: Manipular píxels amb canvas +slug: Web/API/Canvas_API/Tutorial/Manipular_píxels_amb_canvas +tags: + - Canvas + - Graphics + - Intermediate + - Tutorial +translation_of: Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Advanced_animations", "Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility")}}
+ +
+

Fins ara no hem mirat els píxels reals del nostre llenç. Amb l'objecte ImageData podem llegir i escriure directament una matriu de dades per manipular dades de píxels. També veurem com es pot controlar el suavitzat de la imatge (anti-aliasing) i com guardar imatges del vostre llenç.

+
+ +

L'objecte ImageData

+ +

L'objecte {{domxref("ImageData")}} representa les dades de píxels subjacents d'un àrea d'un objecte canvas. Conté els següents atributs de només lectura:

+ +
+
width
+
L'amplada de la imatge en píxels.
+
height
+
L'alçada de la imatge en píxels.
+
data
+
Un {{jsxref("Uint8ClampedArray")}} representa una matriu unidimensional que conté les dades en l'ordre RGBA, amb valors enters entre 0 i 255 (inclosos).
+
+ +

La propietat data retorna un {{jsxref("Uint8ClampedArray")}} al que es pot accedir per veure les dades de píxel en brut; cada píxel està representat per quatre valors d'un byte (vermell, verd, blau i alfa, en aquest ordre; és a dir, format "RGBA"). Cada component de color està representat per un nombre enter entre 0 i 255. A cada component se li assigna un índex consecutiu dins de la matriu, el component vermell del píxel esquerre superior és l'índex 0 dins de la matriu. Els píxels es segueixen d'esquerra a dreta, a després cap avall, a través de la matriu.

+ +

El {{jsxref("Uint8ClampedArray")}} conté height × width × 4 bytes de dades, amb valors d'índex que van des de 0 fins a (height×width×4)-1.

+ +

Per exemple, per llegir el valor del component blau del píxel a la columna 200, fila 50 de la imatge, fariem el següent:

+ +
blueComponent = imageData.data[((50 * (imageData.width * 4)) + (200 * 4)) + 2];
+ +

Si se li dóna un conjunt de coordenades (X i Y), es pot acabar fent alguna cosa com això:

+ +
var xCoord = 50;
+var yCoord = 100;
+var canvasWidth = 1024;
+
+function getColorIndicesForCoord(x, y, width) {
+  var red = y * (width * 4) + x * 4;
+  return [red, red + 1, red + 2, red + 3];
+}
+
+var colorIndices = getColorIndicesForCoord(xCoord, yCoord, canvasWidth);
+
+var redIndex = colorIndices[0];
+var greenIndex = colorIndices[1];
+var blueIndex = colorIndices[2];
+var alphaIndex = colorIndices[3];
+
+var redForCoord = imageData.data[redIndex];
+var greenForCoord = imageData.data[greenIndex];
+var blueForCoord = imageData.data[blueIndex];
+var alphaForCoord = imageData.data[alphaIndex];
+
+ +

O, si ES6 is apropiat:

+ +
const xCoord = 50;
+const yCoord = 100;
+const canvasWidth = 1024;
+
+const getColorIndicesForCoord = (x, y, width) => {
+  const red = y * (width * 4) + x * 4;
+  return [red, red + 1, red + 2, red + 3];
+};
+
+const colorIndices = getColorIndicesForCoord(xCoord, yCoord, canvasWidth);
+
+const [redIndex, greenIndex, blueIndex, alphaIndex] = colorIndices;
+
+ +

També es pot accedir a la mida de la matriu de píxels en bytes llegint l'atribut Uint8ClampedArray.length:

+ +
var numBytes = imageData.data.length;
+
+ +

Crear un objecte ImageData

+ +

Per crear un nou objecte ImageData en blanc, hem d'utilitzar el mètode {{domxref("CanvasRenderingContext2D.createImageData", "createImageData()")}}. Hi ha dues versions del mètode createImageData():

+ +
var myImageData = ctx.createImageData(width, height);
+ +

Crea un nou objecte ImageData amb les dimensions especificades. Tots els píxels estan predefinits en negre transparent.

+ +

També podem crear un nou objecte ImageData amb les mateixes dimensions que l'objecte especificat amb anotherImageData. Els píxels del nou objecte, estan tots predefinits en negre transparent. Això no copia les dades de la imatge!

+ +
var myImageData = ctx.createImageData(anotherImageData);
+ +

Obtenir les dades de píxels per a un context

+ +

Per obtenir un objecte ImageData que contingui una còpia de les dades de píxel per a un context de llenç, podem utilitzar el mètodegetImageData():

+ +
var myImageData = ctx.getImageData(left, top, width, height);
+ +

Aquest mètode retorna un objecte ImageData que representa les dades de píxel per a l'àrea del llenç, les cantonades del qual estan representades pels punts (left,top), (left+width, top), (left, top+height) i (left+width, top+height). Les coordenades s'especifiquen en unitats d'espai en coordenades canvas.

+ +
+

Nota: Qualsevol píxel fora del llenç es retorna com a negre transparent en l'objecte ImageData resultant.

+
+ +

Aquest mètode també es demostra a l'article Manipulant vídeo usant canvas.

+ +

Un selector de colors

+ +

En aquest exemple estem usant el mètode getImageData() per mostrar el color sota el cursor del ratolí. Per a això, necessitem la posició actual del ratolí amb layerX i layerY, llavors busquem les dades de píxels en aquesta posició en la matriu de píxels que getImageData() ens proporciona. Finalment, utilitzem les dades de la matriu per establir un color de fons i un text en el <div> per mostrar el color.

+ + + +
var img = new Image();
+img.crossOrigin = 'anonymous';
+img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
+var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+img.onload = function() {
+  ctx.drawImage(img, 0, 0);
+  img.style.display = 'none';
+};
+var color = document.getElementById('color');
+function pick(event) {
+  var x = event.layerX;
+  var y = event.layerY;
+  var pixel = ctx.getImageData(x, y, 1, 1);
+  var data = pixel.data;
+  var rgba = 'rgba(' + data[0] + ', ' + data[1] +
+             ', ' + data[2] + ', ' + (data[3] / 255) + ')';
+  color.style.background =  rgba;
+  color.textContent = rgba;
+}
+canvas.addEventListener('mousemove', pick);
+
+ +

{{ EmbedLiveSample('A_color_picker', 610, 240) }}

+ +

Pintar dades de píxels en un context

+ +

Utilitzem el mètode putImageData() per pintar dades de píxels en un context:

+ +
ctx.putImageData(myImageData, dx, dy);
+
+ +

Els paràmetres dx i dy indiquen les coordenades del dispositiu, dins del context en el que es pinta la cantonada superior esquerra de les dades de píxels que es vol dibuixar.

+ +

Per exemple, per pintar tota la imatge representada per myImageData en la cantonada superior esquerra del context, simplement fem el següent:

+ +
ctx.putImageData(myImageData, 0, 0);
+
+ +

Escalat de grisos i inversió de colors

+ +

En aquest exemple, iterem sobre tots els píxels per canviar els seus valors, després posem la matriu de píxels modificada, de nou, al llenç, utilitzant putImageData(). La funció invert, simplement, resta cada color del valor màxim 255. La funció grayscale, simplement, utilitza la mitjana de vermell, verd i blau. També es pot utilitzar una mitjana ponderada, donada per la fórmula x = 0.299r + 0.587g + 0.114b, per exemple. Vegeu Escala de grisos (Grayscale) a Wikipedia per obtenir més informació.

+ + + +
var img = new Image();
+img.crossOrigin = 'anonymous';
+img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
+img.onload = function() {
+  draw(this);
+};
+
+function draw(img) {
+  var canvas = document.getElementById('canvas');
+  var ctx = canvas.getContext('2d');
+  ctx.drawImage(img, 0, 0);
+  img.style.display = 'none';
+  var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+  var data = imageData.data;
+
+  var invert = function() {
+    for (var i = 0; i < data.length; i += 4) {
+      data[i]     = 255 - data[i];     // red
+      data[i + 1] = 255 - data[i + 1]; // green
+      data[i + 2] = 255 - data[i + 2]; // blue
+    }
+    ctx.putImageData(imageData, 0, 0);
+  };
+
+  var grayscale = function() {
+    for (var i = 0; i < data.length; i += 4) {
+      var avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
+      data[i]     = avg; // red
+      data[i + 1] = avg; // green
+      data[i + 2] = avg; // blue
+    }
+    ctx.putImageData(imageData, 0, 0);
+  };
+
+  var invertbtn = document.getElementById('invertbtn');
+  invertbtn.addEventListener('click', invert);
+  var grayscalebtn = document.getElementById('grayscalebtn');
+  grayscalebtn.addEventListener('click', grayscale);
+}
+
+ +

{{ EmbedLiveSample('Grayscaling_and_inverting_colors', 330, 270) }}

+ +

Ampliació i suavitzat

+ +

Amb l'ajuda del mètode {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}} un segon llenç i la propietat {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}}, podem ampliar la nostra imatge i veure els detalls.

+ +

Obtenim la posició del ratolí, retallem una imatge de 5 píxels a l'esquerra i a dalt a 5 píxels a la dreta i a baix. A continuació, la copiem a un altre llenç i canviem la grandària de la imatge a la grandària que volguem. En el llenç de zoom, canviem la grandària de un retall de 10×10 píxels del llenç original a 200×200.

+ +
zoomctx.drawImage(canvas,
+                  Math.abs(x - 5), Math.abs(y - 5),
+                  10, 10, 0, 0, 200, 200);
+ +

Atès que el suavitzat (anti-aliasing) està habilitat per defecte, és possible que vulguem deshabilitar el suavitzat per veure els píxels clars. Alternant la casella de verificació es pot veure l'efecte de la propietat imageSmoothingEnabled (necessita prefixos per a diferents navegadors).

+ + + + + +
var img = new Image();
+img.crossOrigin = 'anonymous';
+img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
+img.onload = function() {
+  draw(this);
+};
+
+function draw(img) {
+  var canvas = document.getElementById('canvas');
+  var ctx = canvas.getContext('2d');
+  ctx.drawImage(img, 0, 0);
+  img.style.display = 'none';
+  var zoomctx = document.getElementById('zoom').getContext('2d');
+
+  var smoothbtn = document.getElementById('smoothbtn');
+  var toggleSmoothing = function(event) {
+    zoomctx.imageSmoothingEnabled = this.checked;
+    zoomctx.mozImageSmoothingEnabled = this.checked;
+    zoomctx.webkitImageSmoothingEnabled = this.checked;
+    zoomctx.msImageSmoothingEnabled = this.checked;
+  };
+  smoothbtn.addEventListener('change', toggleSmoothing);
+
+  var zoom = function(event) {
+    var x = event.layerX;
+    var y = event.layerY;
+    zoomctx.drawImage(canvas,
+                      Math.abs(x - 5),
+                      Math.abs(y - 5),
+                      10, 10,
+                      0, 0,
+                      200, 200);
+  };
+
+  canvas.addEventListener('mousemove', zoom);
+}
+ +

{{ EmbedLiveSample('Zoom_example', 620, 490) }}

+ +

Guardar imatges

+ +

El {{domxref("HTMLCanvasElement")}} proporciona un mètode toDataURL(), que és útil quan es guarden imatges. Retorna un URI de dades que conté una representació de la imatge en el format especificat pel paràmetre type (per defecte en PNG). La imatge retornada té una resolució de 96 dpi.

+ +
+
{{domxref("HTMLCanvasElement.toDataURL", "canvas.toDataURL('image/png')")}}
+
Configuració per defecte. Crea una imatge PNG.
+
{{domxref("HTMLCanvasElement.toDataURL", "canvas.toDataURL('image/jpeg', quality)")}}
+
Crea una imatge JPG. Opcionalment, pot proporcionar una qualitat en el rang de 0 a 1, sent una d'elles la millor qualitat i amb 0 gairebé no recognoscible, però, petita en grandària d'arxiu.
+
+ +

Una vegada que s'hagi generat un URI de dades des del llenç, es podrà utilitzar com a font de qualsevol {{HTMLElement("image")}} o posar-ho en un hipervíncle amb un atribut de descàrrega per guardar-ho en el disc, per exemple.

+ +

També es pot crear un {{domxref("Blob")}} des del llenç.

+ +
+
{{domxref("HTMLCanvasElement.toBlob", "canvas.toBlob(callback, type, encoderOptions)")}}
+
Crea un objecte Blob, representant la imatge continguda en el llenç.
+
+ +

Vegeu també

+ + + +

{{PreviousNext("Web/API/Canvas_API/Tutorial/Advanced_animations", "Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility")}}

diff --git a/files/ca/web/api/canvas_api/tutorial/transformacions/index.html b/files/ca/web/api/canvas_api/tutorial/transformacions/index.html deleted file mode 100644 index 2958d40498..0000000000 --- a/files/ca/web/api/canvas_api/tutorial/transformacions/index.html +++ /dev/null @@ -1,290 +0,0 @@ ---- -title: Transformacions -slug: Web/API/Canvas_API/Tutorial/Transformacions -tags: - - Canvas - - Graphics - - Guide - - HTML - - HTML5 - - Intermediate - - Web -translation_of: Web/API/Canvas_API/Tutorial/Transformations ---- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Using_images", "Web/API/Canvas_API/Tutorial/Compositing")}}
- -
Anteriorment en aquest tutorial hem après sobre la graella de canvas i l'espai de coordenades. Fins ara, només usàvem la graella per defecte i canviàvem la grandària del llenç per a les nostres necessitats. Amb les transformacions, hi ha formes més poderoses de traslladar l'origen a una posició diferent, girar la graella i fins i tot escalar-la.
- -

Guardar i restaurar l'estat

- -

Abans de veure els mètodes de transformació, vegem altres dos mètodes que són indispensables una vegada que comencem a generar dibuixos cada vegada més complexos.

- -
-
{{domxref("CanvasRenderingContext2D.save", "save()")}}
-
Guarda tot l'estat del llenç.
-
{{domxref("CanvasRenderingContext2D.restore", "restore()")}}
-
Restaura l'estat del llenç guardat més recent.
-
- -

Els estats del llenç s'emmagatzemen en una pila. Cada vegada que es crida al mètode save() l'estat del dibuix actual es mou a la pila. L'estat d'un dibuix consisteix de

- -
    -
  • Les transformacions que s'han aplicat (i.e. translate, rotate i scale – vegeu a continuació).
    • -
  • Els valors actuals dels següents atributs: {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle")}}, {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}}, {{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha")}}, {{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth")}}, {{domxref("CanvasRenderingContext2D.lineCap", "lineCap")}}, {{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin")}}, {{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit")}}, {{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset")}}, {{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX")}}, {{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY")}}, {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}}, {{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor")}}, {{domxref("CanvasRenderingContext2D.globalCompositeOperation", "globalCompositeOperation")}}, {{domxref("CanvasRenderingContext2D.font", "font")}}, {{domxref("CanvasRenderingContext2D.textAlign", "textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline")}}, {{domxref("CanvasRenderingContext2D.direction", "direction")}}, {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}}.
    • -
  • La trajectòria de retall actual, que veurem a la següent secció.
    • -
- -

Es pot cridar al mètode save() tantes vegades com es vulgui. Cada vegada que es crida al mètode restore() l'últim estat desat s'elimina de la pila i es restauren tots les configuracions guardades.

- -

Un exemple de save i restore de l'estat del llenç

- -

Aquest exemple intenta il·lustrar com funciona la pila d'estats del dibuix en dibuixar un conjunt de rectangles consecutius.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  ctx.fillRect(0, 0, 150, 150);   // Dibuixa un rectangle amb la configuració per defecte
-  ctx.save();                  // Guarda el estat predeterminat
-
-  ctx.fillStyle = '#09F';      // Es fan canvis a la configuració
-  ctx.fillRect(15, 15, 120, 120); // Es dibuixa un rectangle amb la nova configuració
-
-  ctx.save();                  // Es guarda el estat actual
-  ctx.fillStyle = '#FFF';      // Es fan canvis a la configuració
-  ctx.globalAlpha = 0.5;
-  ctx.fillRect(30, 30, 90, 90);   // Es dibuixa un rectangle amb la nova configuració
-
-  ctx.restore();               // Es restaura el estat anterior
-  ctx.fillRect(45, 45, 60, 60);   // Es dibuixa un rectangle amb la configuració restaurada
-
-  ctx.restore();               // Es restaura el estat original
-  ctx.fillRect(60, 60, 30, 30);   // Es dibuixa un rectangle amb la configuració restaurada
- - - -

El primer pas és dibuixar un gran rectangle amb la configuració predeterminada.  A continuació guardem aquest estat i fem canvis en el color de farcit. Després dibuixem el segon rectangle blau i més petit i guardem l'estat. De nou canviem algunes configuracions de dibuix i dibuixem el tercer rectangle blanc semitransparent.

- -

Fins ara, això és bastant similar al que hem fet en les seccions anteriors. No obstant això, una vegada que cridem a la primera instrucció restore() l'estat del dibuix superior s'elimina de la pila i es restaura la configuració. Si no haguéssim guardat l'estat usant save(), hauríem de canviar el color de farcit i la transparència manualment, per tornar a l'estat anterior. Això seria fàcil per a dues propietats, però si tenim més que això, el nostre codi es faria molt llarg, molt ràpid.

- -

Quan es crida a la segona instrucció restore(), es restaura l'estat original (el que hem configurat abans de la primera crida save) i l'últim rectangle es dibuixa de nou en negre.

- -

{{EmbedLiveSample("A_save_and_restore_canvas_state_example", "180", "180", "https://mdn.mozillademos.org/files/249/Canvas_savestate.png")}}

- -

Traslladar

- -

El primer dels mètodes de transformació que veurem és translate(). Aquest mètode s'utilitza per moure el llenç i el seu origen a un punt diferent de la graella.

- -
-
{{domxref("CanvasRenderingContext2D.translate", "translate(x, y)")}}
-
Mou el llenç i el seu origen en la graella. x indica la distància horitzontal a moure, i y indica quanta distància s'ha de moure la graella verticalment.
-
- -

És una bona idea guardar l'estat del llenç abans de fer qualsevol transformació. En la majoria dels casos, és més fàcil cridar al mètode restore, que haver de fer una traslació inversa per tornar a l'estat original. També, si estem trasladant dins d'un bucle i no guardem i restaurem l'estat del llenç, pot ser que acabem perdent part del dibuix, ja que es va dibuixar fora de la vora del llenç.

- -

Un exemple de translate

- -

Aquest exemple demostra alguns dels beneficis de traslladar l'origen del llenç. Sense el mètode translate(), tots els rectangles es dibuixarien en la mateixa posició (0,0). El mètode translate(), també ens dóna la llibertat de col·locar el rectangle en qualsevol lloc del llenç, sense haver d'ajustar manualment les coordenades en la funció fillRect(). Això fa que sigui una mica més fàcil d'entendre i usar.

- -

En la funció draw(), cridem a la funció fillRect() nou vegades, usant dos  bucles for. En cada bucle, el llenç es trasllada, es dibuixa el rectangle i el llenç torna al seu estat original. Observem com la crida a fillRect() usa les mateixes coordenades cada vegada, confiant en translate() per ajustar la posició del dibuix.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  for (var i = 0; i < 3; i++) {
-    for (var j = 0; j < 3; j++) {
-      ctx.save();
-      ctx.fillStyle = 'rgb(' + (51 * i) + ', ' + (255 - 51 * i) + ', 255)';
-      ctx.translate(10 + j * 50, 10 + i * 50);
-      ctx.fillRect(0, 0, 25, 25);
-      ctx.restore();
-    }
-  }
-}
-
- - - -

{{EmbedLiveSample("A_translate_example", "160", "160", "https://mdn.mozillademos.org/files/9857/translate.png")}}

- -

Girar

- -

El segon mètode de transformació és rotate(). Se usa per girar el llenç al voltant de l'origen actual.

- -
-
{{domxref("CanvasRenderingContext2D.rotate", "rotate(angle)")}}
-
Gira el llenç en sentit horari, al voltant de l'origen actual pel nombre d'angle de radiants.
-
- -

El punt central de gir és sempre l'origen del llenç. Per canviar el punt central, necessitarem moure el llenç usant el mètode translate().

- -

Un exemple de rotate

- -

En aquest exemple, usarem el mètode rotate() para girar primer un rectangle des de l'origen del llenç, i després des del centre del rectangle mateix amb l'ajuda de translate().

- -
-

Recordatori: Els angles estan en radiants, no en graus. Per fer la conversació, estem usant: radians = (Math.PI/180)*degrees.

-
- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  // rectangles esquerra, giren a partir d'origen del llenç
-  ctx.save();
-  // rect blau
-  ctx.fillStyle = '#0095DD';
-  ctx.fillRect(30, 30, 100, 100);
-  ctx.rotate((Math.PI / 180) * 25);
-  // grey rect
-  ctx.fillStyle = '#4D4E53';
-  ctx.fillRect(30, 30, 100, 100);
-  ctx.restore();
-
-  // rectangles drets, giren des del centre del rectangle
-  // dibuixa rect blau
-  ctx.fillStyle = '#0095DD';
-  ctx.fillRect(150, 30, 100, 100);
-
-  ctx.translate(200, 80); // trasllada al rectangle central
-                          // x = x + 0.5 * width
-                          // y = y + 0.5 * height
-  ctx.rotate((Math.PI / 180) * 25); // gira
-  ctx.translate(-200, -80); // traslladar de nou
-
-  // dibuixa rect gris
-  ctx.fillStyle = '#4D4E53';
-  ctx.fillRect(150, 30, 100, 100);
-}
-
- -

Per girar el rectangle al voltant del seu propi centre, traslladem el llenç al centre del rectangle, després girem el llenç i tornem a traslladar el llenç a 0,0, i a continuació dibuixem el rectangle.

- - - -

{{EmbedLiveSample("A_rotate_example", "310", "210", "https://mdn.mozillademos.org/files/9859/rotate.png")}}

- -

Escalar

- -

El següent mètode de transformació és l'escalat. Ho usem per augmentar o disminuir les unitats en la graella del llenç. Això es pot utilitzar per dibuixar formes i mapes de bits reduïts o ampliats.

- -
-
{{domxref("CanvasRenderingContext2D.scale", "scale(x, y)")}}
-
Escala les unitats del llenç, per x horitzontalment i per y verticalment. Tots dos paràmetres són nombres reals. Els valors inferiors a 1.0 redueixen la grandària de la unitat i els valors superiors a 1.0 augmenten la grandària de la unitat. Els valors a 1.0 deixen les unitats de la mateixa grandària.
-
- -

Usant nombres negatius es pot fer la replica d'eixos (per exemple, usant translate(0,canvas.height); scale(1,-1); tindrem el conegut sistema de coordenades cartesianes, amb l'origen en la cantonada inferior esquerra).

- -

Per defecte, una unitat en el llenç és exactament un píxel. Si apliquem, per exemple, un factor d'escala de 0.5, la unitat resultant es convertirà en 0.5 píxels i per tant les formes es dibuixaran a meitat de la seva grandària. De manera similar, si s'ajusta el factor d'escala a 2.0, la grandària de la unitat augmentarà i una unitat ara es converteix en dos píxels. Això dona com a resultat que les formes es dibuixin dues vegades més grans.

- -

Un exemple de scale

- -

En aquest últim exemple, dibuixarem formes amb diferents factors d'escala.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  // dibuixar un rectangle senzill, però escalar-lo.
-  ctx.save();
-  ctx.scale(10, 3);
-  ctx.fillRect(1, 10, 10, 10);
-  ctx.restore();
-
-  // mirror horizontally
-  ctx.scale(-1, 1);
-  ctx.font = '48px serif';
-  ctx.fillText('MDN', -135, 120);
-}
-
-
- - - -

{{EmbedLiveSample("A_scale_example", "160", "160", "https://mdn.mozillademos.org/files/9861/scale.png")}}

- -

Transformar

- -

Finalment, els següents mètodes de transformació permeten modificar directament la matriu de transformació.

- -
-
{{domxref("CanvasRenderingContext2D.transform", "transform(a, b, c, d, e, f)")}}
-
Multiplica la matriu de transformació actual amb la matriu descrita pels seus arguments. La matriu de transformació és descrita per: [acebdf001]\left[ \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right]
-
- -
-
Si qualsevol dels arguments és Infinity, la matriu de transformació ha de ser marcada com a infinita en lloc que el mètode llanci una excepció.
-
- -

Els paràmetres d'aquesta funció són:

- -
-
a (m11)
-
Escalat horitzontal.
-
b (m12)
-
Desviació Horizontal.
-
c (m21)
-
Desviació Vertical.
-
d (m22)
-
Escalat Vertical.
-
e (dx)
-
Moviment Horizontal.
-
f (dy)
-
Moviment Vertical.
-
{{domxref("CanvasRenderingContext2D.setTransform", "setTransform(a, b, c, d, e, f)")}}
-
Reinicia la transformació actual a la matriu d'identitat i, a continuació, invoca el mètode transform() amb els mateixos arguments. Això, bàsicament, desfà la transformació actual, i després estableix la transformació especificada, tot en un sol pas.
-
{{domxref("CanvasRenderingContext2D.resetTransform", "resetTransform()")}}
-
Reinicia la transformació actual a la matriu d'identitat. Això és el mateix que cridar: ctx.setTransform(1, 0, 0, 1, 0, 0);
-
- -

Exemple de transform i setTransform

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  var sin = Math.sin(Math.PI / 6);
-  var cos = Math.cos(Math.PI / 6);
-  ctx.translate(100, 100);
-  var c = 0;
-  for (var i = 0; i <= 12; i++) {
-    c = Math.floor(255 / 12 * i);
-    ctx.fillStyle = 'rgb(' + c + ', ' + c + ', ' + c + ')';
-    ctx.fillRect(0, 0, 100, 10);
-    ctx.transform(cos, sin, -sin, cos, 0, 0);
-  }
-
-  ctx.setTransform(-1, 0, 0, 1, 100, 100);
-  ctx.fillStyle = 'rgba(255, 128, 255, 0.5)';
-  ctx.fillRect(0, 50, 100, 100);
-}
-
- - - -

{{EmbedLiveSample("Example_for_transform_and_setTransform", "230", "280", "https://mdn.mozillademos.org/files/255/Canvas_transform.png")}}

- -

{{PreviousNext("Web/API/Canvas_API/Tutorial/Using_images", "Web/API/Canvas_API/Tutorial/Compositing")}}

- -
- - -
 
- -
 
-
diff --git a/files/ca/web/api/canvas_api/tutorial/transformations/index.html b/files/ca/web/api/canvas_api/tutorial/transformations/index.html new file mode 100644 index 0000000000..2958d40498 --- /dev/null +++ b/files/ca/web/api/canvas_api/tutorial/transformations/index.html @@ -0,0 +1,290 @@ +--- +title: Transformacions +slug: Web/API/Canvas_API/Tutorial/Transformacions +tags: + - Canvas + - Graphics + - Guide + - HTML + - HTML5 + - Intermediate + - Web +translation_of: Web/API/Canvas_API/Tutorial/Transformations +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Using_images", "Web/API/Canvas_API/Tutorial/Compositing")}}
+ +
Anteriorment en aquest tutorial hem après sobre la graella de canvas i l'espai de coordenades. Fins ara, només usàvem la graella per defecte i canviàvem la grandària del llenç per a les nostres necessitats. Amb les transformacions, hi ha formes més poderoses de traslladar l'origen a una posició diferent, girar la graella i fins i tot escalar-la.
+ +

Guardar i restaurar l'estat

+ +

Abans de veure els mètodes de transformació, vegem altres dos mètodes que són indispensables una vegada que comencem a generar dibuixos cada vegada més complexos.

+ +
+
{{domxref("CanvasRenderingContext2D.save", "save()")}}
+
Guarda tot l'estat del llenç.
+
{{domxref("CanvasRenderingContext2D.restore", "restore()")}}
+
Restaura l'estat del llenç guardat més recent.
+
+ +

Els estats del llenç s'emmagatzemen en una pila. Cada vegada que es crida al mètode save() l'estat del dibuix actual es mou a la pila. L'estat d'un dibuix consisteix de

+ +
    +
  • Les transformacions que s'han aplicat (i.e. translate, rotate i scale – vegeu a continuació).
    • +
  • Els valors actuals dels següents atributs: {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle")}}, {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}}, {{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha")}}, {{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth")}}, {{domxref("CanvasRenderingContext2D.lineCap", "lineCap")}}, {{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin")}}, {{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit")}}, {{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset")}}, {{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX")}}, {{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY")}}, {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}}, {{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor")}}, {{domxref("CanvasRenderingContext2D.globalCompositeOperation", "globalCompositeOperation")}}, {{domxref("CanvasRenderingContext2D.font", "font")}}, {{domxref("CanvasRenderingContext2D.textAlign", "textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline")}}, {{domxref("CanvasRenderingContext2D.direction", "direction")}}, {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}}.
    • +
  • La trajectòria de retall actual, que veurem a la següent secció.
    • +
+ +

Es pot cridar al mètode save() tantes vegades com es vulgui. Cada vegada que es crida al mètode restore() l'últim estat desat s'elimina de la pila i es restauren tots les configuracions guardades.

+ +

Un exemple de save i restore de l'estat del llenç

+ +

Aquest exemple intenta il·lustrar com funciona la pila d'estats del dibuix en dibuixar un conjunt de rectangles consecutius.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  ctx.fillRect(0, 0, 150, 150);   // Dibuixa un rectangle amb la configuració per defecte
+  ctx.save();                  // Guarda el estat predeterminat
+
+  ctx.fillStyle = '#09F';      // Es fan canvis a la configuració
+  ctx.fillRect(15, 15, 120, 120); // Es dibuixa un rectangle amb la nova configuració
+
+  ctx.save();                  // Es guarda el estat actual
+  ctx.fillStyle = '#FFF';      // Es fan canvis a la configuració
+  ctx.globalAlpha = 0.5;
+  ctx.fillRect(30, 30, 90, 90);   // Es dibuixa un rectangle amb la nova configuració
+
+  ctx.restore();               // Es restaura el estat anterior
+  ctx.fillRect(45, 45, 60, 60);   // Es dibuixa un rectangle amb la configuració restaurada
+
+  ctx.restore();               // Es restaura el estat original
+  ctx.fillRect(60, 60, 30, 30);   // Es dibuixa un rectangle amb la configuració restaurada
+ + + +

El primer pas és dibuixar un gran rectangle amb la configuració predeterminada.  A continuació guardem aquest estat i fem canvis en el color de farcit. Després dibuixem el segon rectangle blau i més petit i guardem l'estat. De nou canviem algunes configuracions de dibuix i dibuixem el tercer rectangle blanc semitransparent.

+ +

Fins ara, això és bastant similar al que hem fet en les seccions anteriors. No obstant això, una vegada que cridem a la primera instrucció restore() l'estat del dibuix superior s'elimina de la pila i es restaura la configuració. Si no haguéssim guardat l'estat usant save(), hauríem de canviar el color de farcit i la transparència manualment, per tornar a l'estat anterior. Això seria fàcil per a dues propietats, però si tenim més que això, el nostre codi es faria molt llarg, molt ràpid.

+ +

Quan es crida a la segona instrucció restore(), es restaura l'estat original (el que hem configurat abans de la primera crida save) i l'últim rectangle es dibuixa de nou en negre.

+ +

{{EmbedLiveSample("A_save_and_restore_canvas_state_example", "180", "180", "https://mdn.mozillademos.org/files/249/Canvas_savestate.png")}}

+ +

Traslladar

+ +

El primer dels mètodes de transformació que veurem és translate(). Aquest mètode s'utilitza per moure el llenç i el seu origen a un punt diferent de la graella.

+ +
+
{{domxref("CanvasRenderingContext2D.translate", "translate(x, y)")}}
+
Mou el llenç i el seu origen en la graella. x indica la distància horitzontal a moure, i y indica quanta distància s'ha de moure la graella verticalment.
+
+ +

És una bona idea guardar l'estat del llenç abans de fer qualsevol transformació. En la majoria dels casos, és més fàcil cridar al mètode restore, que haver de fer una traslació inversa per tornar a l'estat original. També, si estem trasladant dins d'un bucle i no guardem i restaurem l'estat del llenç, pot ser que acabem perdent part del dibuix, ja que es va dibuixar fora de la vora del llenç.

+ +

Un exemple de translate

+ +

Aquest exemple demostra alguns dels beneficis de traslladar l'origen del llenç. Sense el mètode translate(), tots els rectangles es dibuixarien en la mateixa posició (0,0). El mètode translate(), també ens dóna la llibertat de col·locar el rectangle en qualsevol lloc del llenç, sense haver d'ajustar manualment les coordenades en la funció fillRect(). Això fa que sigui una mica més fàcil d'entendre i usar.

+ +

En la funció draw(), cridem a la funció fillRect() nou vegades, usant dos  bucles for. En cada bucle, el llenç es trasllada, es dibuixa el rectangle i el llenç torna al seu estat original. Observem com la crida a fillRect() usa les mateixes coordenades cada vegada, confiant en translate() per ajustar la posició del dibuix.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  for (var i = 0; i < 3; i++) {
+    for (var j = 0; j < 3; j++) {
+      ctx.save();
+      ctx.fillStyle = 'rgb(' + (51 * i) + ', ' + (255 - 51 * i) + ', 255)';
+      ctx.translate(10 + j * 50, 10 + i * 50);
+      ctx.fillRect(0, 0, 25, 25);
+      ctx.restore();
+    }
+  }
+}
+
+ + + +

{{EmbedLiveSample("A_translate_example", "160", "160", "https://mdn.mozillademos.org/files/9857/translate.png")}}

+ +

Girar

+ +

El segon mètode de transformació és rotate(). Se usa per girar el llenç al voltant de l'origen actual.

+ +
+
{{domxref("CanvasRenderingContext2D.rotate", "rotate(angle)")}}
+
Gira el llenç en sentit horari, al voltant de l'origen actual pel nombre d'angle de radiants.
+
+ +

El punt central de gir és sempre l'origen del llenç. Per canviar el punt central, necessitarem moure el llenç usant el mètode translate().

+ +

Un exemple de rotate

+ +

En aquest exemple, usarem el mètode rotate() para girar primer un rectangle des de l'origen del llenç, i després des del centre del rectangle mateix amb l'ajuda de translate().

+ +
+

Recordatori: Els angles estan en radiants, no en graus. Per fer la conversació, estem usant: radians = (Math.PI/180)*degrees.

+
+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // rectangles esquerra, giren a partir d'origen del llenç
+  ctx.save();
+  // rect blau
+  ctx.fillStyle = '#0095DD';
+  ctx.fillRect(30, 30, 100, 100);
+  ctx.rotate((Math.PI / 180) * 25);
+  // grey rect
+  ctx.fillStyle = '#4D4E53';
+  ctx.fillRect(30, 30, 100, 100);
+  ctx.restore();
+
+  // rectangles drets, giren des del centre del rectangle
+  // dibuixa rect blau
+  ctx.fillStyle = '#0095DD';
+  ctx.fillRect(150, 30, 100, 100);
+
+  ctx.translate(200, 80); // trasllada al rectangle central
+                          // x = x + 0.5 * width
+                          // y = y + 0.5 * height
+  ctx.rotate((Math.PI / 180) * 25); // gira
+  ctx.translate(-200, -80); // traslladar de nou
+
+  // dibuixa rect gris
+  ctx.fillStyle = '#4D4E53';
+  ctx.fillRect(150, 30, 100, 100);
+}
+
+ +

Per girar el rectangle al voltant del seu propi centre, traslladem el llenç al centre del rectangle, després girem el llenç i tornem a traslladar el llenç a 0,0, i a continuació dibuixem el rectangle.

+ + + +

{{EmbedLiveSample("A_rotate_example", "310", "210", "https://mdn.mozillademos.org/files/9859/rotate.png")}}

+ +

Escalar

+ +

El següent mètode de transformació és l'escalat. Ho usem per augmentar o disminuir les unitats en la graella del llenç. Això es pot utilitzar per dibuixar formes i mapes de bits reduïts o ampliats.

+ +
+
{{domxref("CanvasRenderingContext2D.scale", "scale(x, y)")}}
+
Escala les unitats del llenç, per x horitzontalment i per y verticalment. Tots dos paràmetres són nombres reals. Els valors inferiors a 1.0 redueixen la grandària de la unitat i els valors superiors a 1.0 augmenten la grandària de la unitat. Els valors a 1.0 deixen les unitats de la mateixa grandària.
+
+ +

Usant nombres negatius es pot fer la replica d'eixos (per exemple, usant translate(0,canvas.height); scale(1,-1); tindrem el conegut sistema de coordenades cartesianes, amb l'origen en la cantonada inferior esquerra).

+ +

Per defecte, una unitat en el llenç és exactament un píxel. Si apliquem, per exemple, un factor d'escala de 0.5, la unitat resultant es convertirà en 0.5 píxels i per tant les formes es dibuixaran a meitat de la seva grandària. De manera similar, si s'ajusta el factor d'escala a 2.0, la grandària de la unitat augmentarà i una unitat ara es converteix en dos píxels. Això dona com a resultat que les formes es dibuixin dues vegades més grans.

+ +

Un exemple de scale

+ +

En aquest últim exemple, dibuixarem formes amb diferents factors d'escala.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // dibuixar un rectangle senzill, però escalar-lo.
+  ctx.save();
+  ctx.scale(10, 3);
+  ctx.fillRect(1, 10, 10, 10);
+  ctx.restore();
+
+  // mirror horizontally
+  ctx.scale(-1, 1);
+  ctx.font = '48px serif';
+  ctx.fillText('MDN', -135, 120);
+}
+
+
+ + + +

{{EmbedLiveSample("A_scale_example", "160", "160", "https://mdn.mozillademos.org/files/9861/scale.png")}}

+ +

Transformar

+ +

Finalment, els següents mètodes de transformació permeten modificar directament la matriu de transformació.

+ +
+
{{domxref("CanvasRenderingContext2D.transform", "transform(a, b, c, d, e, f)")}}
+
Multiplica la matriu de transformació actual amb la matriu descrita pels seus arguments. La matriu de transformació és descrita per: [acebdf001]\left[ \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right]
+
+ +
+
Si qualsevol dels arguments és Infinity, la matriu de transformació ha de ser marcada com a infinita en lloc que el mètode llanci una excepció.
+
+ +

Els paràmetres d'aquesta funció són:

+ +
+
a (m11)
+
Escalat horitzontal.
+
b (m12)
+
Desviació Horizontal.
+
c (m21)
+
Desviació Vertical.
+
d (m22)
+
Escalat Vertical.
+
e (dx)
+
Moviment Horizontal.
+
f (dy)
+
Moviment Vertical.
+
{{domxref("CanvasRenderingContext2D.setTransform", "setTransform(a, b, c, d, e, f)")}}
+
Reinicia la transformació actual a la matriu d'identitat i, a continuació, invoca el mètode transform() amb els mateixos arguments. Això, bàsicament, desfà la transformació actual, i després estableix la transformació especificada, tot en un sol pas.
+
{{domxref("CanvasRenderingContext2D.resetTransform", "resetTransform()")}}
+
Reinicia la transformació actual a la matriu d'identitat. Això és el mateix que cridar: ctx.setTransform(1, 0, 0, 1, 0, 0);
+
+ +

Exemple de transform i setTransform

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  var sin = Math.sin(Math.PI / 6);
+  var cos = Math.cos(Math.PI / 6);
+  ctx.translate(100, 100);
+  var c = 0;
+  for (var i = 0; i <= 12; i++) {
+    c = Math.floor(255 / 12 * i);
+    ctx.fillStyle = 'rgb(' + c + ', ' + c + ', ' + c + ')';
+    ctx.fillRect(0, 0, 100, 10);
+    ctx.transform(cos, sin, -sin, cos, 0, 0);
+  }
+
+  ctx.setTransform(-1, 0, 0, 1, 100, 100);
+  ctx.fillStyle = 'rgba(255, 128, 255, 0.5)';
+  ctx.fillRect(0, 50, 100, 100);
+}
+
+ + + +

{{EmbedLiveSample("Example_for_transform_and_setTransform", "230", "280", "https://mdn.mozillademos.org/files/255/Canvas_transform.png")}}

+ +

{{PreviousNext("Web/API/Canvas_API/Tutorial/Using_images", "Web/API/Canvas_API/Tutorial/Compositing")}}

+ +
+ + +
 
+ +
 
+
diff --git "a/files/ca/web/api/canvas_api/tutorial/\303\272s_b\303\240sic/index.html" "b/files/ca/web/api/canvas_api/tutorial/\303\272s_b\303\240sic/index.html" deleted file mode 100644 index fb15a62d81..0000000000 --- "a/files/ca/web/api/canvas_api/tutorial/\303\272s_b\303\240sic/index.html" +++ /dev/null @@ -1,158 +0,0 @@ ---- -title: Ús bàsic de canvas -slug: Web/API/Canvas_API/Tutorial/Ús_bàsic -tags: - - Canvas - - Graphics - - HTML - - Intermediate - - Tutorial -translation_of: Web/API/Canvas_API/Tutorial/Basic_usage ---- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}}
- -
-

Comencem aquest tutorial consultant l'element {{HTMLElement("canvas")}} {{Glossary("HTML")}}. Al final d'aquesta pàgina, sabreu com configurar un context 2D de canvas i haureu dibuixat un primer exemple en el vostre navegador.

-
- -

L'element <canvas>

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

A primera vista, {{HTMLElement("canvas")}} s'assembla l'element {{HTMLElement("img")}} amb l'única diferència clara, que no té els atributs src i alt. De fet, l'element <canvas> només té dos atributs, {{htmlattrxref("width", "canvas")}} i {{htmlattrxref("height", "canvas")}}. Aquests són opcionals i també es poden establir utilitzant les properties {{Glossary("DOM")}} . Quan no s'especifiquen els atributs width i height, inicialment canvas tindrà 300 píxels d'amplada i 150 píxels d'alçada. L'element es pot dimensionar arbitràriament per {{Glossary("CSS")}}, però durant la representació, la imatge s'escala per adaptar-se a la seva grandària de disseny: si el dimensionament CSS no respecta la relació inicial de canvas, apareixerà distorsionada

- -
-

Nota: Si les vostres representacions semblen distorsionades, intenteu especificar els atributs width i height, explícitament, en els atributs <canvas> i no utilitzeu CSS.

-
- -

L'atribut id no és específic de l'element <canvas>, però és un dels atributs HTML global que es pot aplicar a qualsevol element HTML (com class, per exemple). Sempre és una bona idea proporcionar un id, perquè això fa que sigui molt més fàcil identificar-lo en un script.

- -

L'element <canvas> se li pot donar estil com qualsevol imatge normal ({{cssxref("margin")}}, {{cssxref("border")}}, {{cssxref("background")}}…). Aquestes regles, no obstant això, no afecten al dibuix real sobre el llenç. Veurem com això es fa en un capítol dedicat d'aquest tutorial. Quan no s'apliquen regles d'estil al llenç, inicialment, serà totalment transparent.

- -
-

Contingut alternatiu

- -

L'element <canvas> difereix d'una etiqueta {{HTMLElement("img")}} com per els elements {{HTMLElement("video")}}, {{HTMLElement("audio")}} o {{HTMLElement("picture")}}, és fàcil definir algun contingut alternatiu, que es mostri en navegadors antics que no ho suportin, com ara en versions d'Internet Explorer anteriors a la versió 9 o navegadors textuals. Sempre haureu de proporcionar contingut alternatiu perquè els navegadors ho mostrin.

- -

Proporcionar contingut alternatiu és molt senzill: simplement inseriu el contingut alternatiu dins de l'element <canvas>. Els navegadors que no suporten <canvas> ignoraran el contenidor i mostraran el contingut alternatiu dins del mateix. Els navegadors que suporten <canvas> ignoraran el contingut dins del contenidor, i simplement mostraran el llenç, normalment.

- -

Per exemple, podríem proporcionar una descripció de text del contingut del llenç o proporcionar una imatge estàtica del contingut presentat dinàmicament. Això pot semblar-se a això:

- -
<canvas id="stockGraph" width="150" height="150">
-  current stock price: $3.15 + 0.15
-</canvas>
-
-<canvas id="clock" width="150" height="150">
-  <img src="images/clock.png" width="150" height="150" alt=""/>
-</canvas>
-
- -

Dir-li a l'usuari que utilitzi un navegador diferent que suporti canvas no ajuda als usuaris que no poden llegir canvas en absolut, per exemple. Proporcionar un text alternatiu útil o un DOM secundari, ajuda a fer canvas més accessible.

- -

Etiqueta </canvas> obligatoria

- -

Com a conseqüència de la manera en què es proporciona una solució alternativa, a diferència de l'element {{HTMLElement("img")}}, l'element {{HTMLElement("canvas")}} requereix l'etiqueta de tancament (</canvas>). Si aquesta etiqueta no està present, la resta del document es consideraria contingut alternatiu i no es mostraria.

- -

Si no es necessita un contingut alternatiu, un simple <canvas id="foo" ...></canvas> és totalment compatible amb tots els navegadors que suporten canvas.

- -

El context de representació

- -

L'element {{HTMLElement("canvas")}} crea una superfície de dibuix de grandària fixa que exposa un o més contextos de representació, que s'utilitzen per crear i manipular el contingut mostrat. En aquest tutorial, ens centrem en el context de representació 2D. Altres contextos poden proporcionar diferents tipus de representació; per exemple, WebGL utilitza un context 3D basat en OpenGL ÉS.Other contexts may provide different types of rendering; for example, WebGL uses a 3D context based on OpenGL ES.

- -

El llenç està inicialment en blanc. Per mostrar alguna cosa, un script, primer necessita accedir al context de representació i dibuixar en ell. L'element {{HTMLElement("canvas")}} té un mètode anomenat {{domxref("HTMLCanvasElement.getContext", "getContext()")}}, utilitzat per obtenir el context de representació i les seves funcions de dibuix. getContext() pren un paràmetre, el tipus de context. Per als gràfics 2D, com els que es detallen en aquest tutorial, heu d'especificar "2d" per obtenir un {{domxref("CanvasRenderingContext2D")}}.

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

La primera línia del script recupera el node en el DOM, que representa l'element {{HTMLElement("canvas")}} cridant el mètode {{domxref("document.getElementById()")}}. Un cop tingueu el node d'element, podeu accedir al context del dibuix mitjançant el mètode getContext().

- -
-

Comprovació del suport

- -

El contingut alternatiu es mostra en navegadors que no admeten {{HTMLElement("canvas")}}. Les seqüències d'ordres, també poden comprovar la compatibilitat mitjançant programació, simplement provant la presència del mètode getContext(). El nostre fragment de codi de dalt es converteix en una cosa així:

- -
var canvas = document.getElementById('tutorial');
-
-if (canvas.getContext) {
-  var ctx = canvas.getContext('2d');
-  // drawing code here
-} else {
-  // canvas-unsupported code here
-}
-
-
-
- -

Una plantilla esquelet

- -

Aquí teniu una plantilla minimalista, que usarem com a punt de partida per a exemples posteriors.

- -
-

Nota: no és una bona pràctica incrustar un script dins d'HTML. Ho fem aquí per mantenir l'exemple concís.

-
- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8"/>
-    <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>
-
- -

El script inclou una funció anomenada draw(), que s'executa una vegada que la pàgina acaba de carregar-se; això es fa escoltant  l'esdeveniment {{event("load")}} en el document. Aquesta funció, o una similar, també pot ser cridada usant {{domxref("WindowTimers.setTimeout", "window.setTimeout()")}}, {{domxref("WindowTimers.setInterval", "window.setInterval()")}}, o qualsevol altre controlador d'esdeveniments, sempre que la pàgina s'hagi carregat primer.

- -

Així és com es veuria una plantilla en acció. Com es mostra aquí, inicialment està en blanc.

- -

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

- -

Un exemple senzill

- -

Per començar, feu un cop d'ull a un exemple senzill que dibuixa dos rectangles que es creuen, un dels quals té una transparència alfa. Explorarem com funciona això amb més detall en exemples posteriors.

- -
<!DOCTYPE html>
-<html>
- <head>
-  <meta charset="utf-8"/>
-  <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, 50, 50);
-
-        ctx.fillStyle = 'rgba(0, 0, 200, 0.5)';
-        ctx.fillRect(30, 30, 50, 50);
-      }
-    }
-  </script>
- </head>
- <body onload="draw();">
-   <canvas id="canvas" width="150" height="150"></canvas>
- </body>
-</html>
-
- -

Aquest exemple es veu així:

- -

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

- -

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

diff --git a/files/ca/web/css/_colon_any/index.html b/files/ca/web/css/_colon_any/index.html deleted file mode 100644 index 6669bc645a..0000000000 --- a/files/ca/web/css/_colon_any/index.html +++ /dev/null @@ -1,198 +0,0 @@ ---- -title: ':any' -slug: 'Web/CSS/:any' -tags: - - CSS - - Experimental - - Pseudo-class - - Reference -translation_of: 'Web/CSS/:is' -translation_of_original: 'Web/CSS/:any' ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

La pseudo-classe :any() permet crear un selector que contingui múltiples opcions, algun dels quals seran aparellats. Aquesta és una alternativa més senzilla que repetir un selector sencer diverses vegades perquè un element dins d'ell varia.

- -
/* Select any h2 inside a section, article, aside, or nav */
-/* Currently supported with -moz- and -webkit- prefixes */
-:-moz-any(section, article, aside, nav) h2 {
-  font-size: 4.5rem;
-}
-
-:-webkit-any(section, article, aside, nav) h2 {
-  font-size: 4.5rem;
-}
-
- -
Nota : Aquesta pseudo-classe està en curs de ser estandarditzada en CSS Selectors Level 4 sota el nom :matches(). És probable que la sintaxi i el nom de :-vendor-any() seran canviats perquè es reflecteixi en un futur proper.
- -

Sintaxi

- -

Sintaxi formal

- -
{{csssyntax}}
- -

Valors

- -
-
selector
-
Un selector. Això pot ser un selector simple o un selector múltiple compost de selectors simples CSS 3 i pot incloure el combinador descendent.
-
- -
Nota: Els selectors no poden contenir pseudo-elements i l'únic combinador permès és el combinador descendent.
- -

Exemples

- -

Per exemple, el següent CSS:

- -
/* 3 deep (or more) unordered lists use a square */
-ol ol ul,     ol ul ul,     ol menu ul,     ol dir ul,
-ol ol menu,   ol ul menu,   ol menu menu,   ol dir menu,
-ol ol dir,    ol ul dir,    ol menu dir,    ol dir dir,
-ul ol ul,     ul ul ul,     ul menu ul,     ul dir ul,
-ul ol menu,   ul ul menu,   ul menu menu,   ul dir menu,
-ul ol dir,    ul ul dir,    ul menu dir,    ul dir dir,
-menu ol ul,   menu ul ul,   menu menu ul,   menu dir ul,
-menu ol menu, menu ul menu, menu menu menu, menu dir menu,
-menu ol dir,  menu ul dir,  menu menu dir,  menu dir dir,
-dir ol ul,    dir ul ul,    dir menu ul,    dir dir ul,
-dir ol menu,  dir ul menu,  dir menu menu,  dir dir menu,
-dir ol dir,   dir ul dir,   dir menu dir,   dir dir dir {
-  list-style-type: square;
-}
-
- -

Pot substituir-se per:

- -
/* 3 deep (or more) unordered lists use a square */
-:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) ul,
-:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) menu,
-:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) dir {
-  list-style-type: square;
-}
- -

No obstant això, no utilitzeu el següent: (Veure la secció sobre el rendiment més endavant.)

- -
:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) :-moz-any(ul, menu, dir) {
-  list-style-type: square;
-}
- -

Notes

- -

Aquesta propietat és particularment útil quan es tracta de seccions i encapçalaments en HTML5. Des {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}} i {{HTMLElement("nav")}} es poden niar, sense :any() , l'estil d'aquests perquè coincideixin entre si pot ser difícil.

- -

Per exemple, sense :any(), donar estil a tot els elements {{HTMLElement("h1")}} a diferents profunditats podria ser molt complicat:

- -
/* Level 0 */
-h1 {
-  font-size: 30px;
-}
-/* Level 1 */
-section h1, article h1, aside h1, nav h1 {
-  font-size: 25px;
-}
-/* Level 2 */
-section section h1, section article h1, section aside h1, section nav h1,
-article section h1, article article h1, article aside h1, article nav h1,
-aside section h1, aside article h1, aside aside h1, aside nav h1,
-nav section h1, nav article h1, nav aside h1, nav nav h1, {
-  font-size: 20px;
-}
-/* Level 3 */
-/* ... don't even think about it*/
-
- -

Usant :-any(), és molt més fàcil:

- -
/* Level 0 */
-h1 {
-  font-size: 30px;
-}
-/* Level 1 */
-:-moz-any(section, article, aside, nav) h1 {
-  font-size: 25px;
-}
-/* Level 2 */
-:-moz-any(section, article, aside, nav)
-:-moz-any(section, article, aside, nav) h1 {
-  font-size: 20px;
-}
-/* Level 3 */
-:-moz-any(section, article, aside, nav)
-:-moz-any(section, article, aside, nav)
-:-moz-any(section, article, aside, nav) h1 {
-  font-size: 15px;
-}
- -

Problemes amb el rendiment i l'especificitat

- -

Bug 561154 registra un problema amb Gecko en el qual l'especificitat de: :-moz-any() és incorrecta. La implementació actual (com Firefox 12) posa: :-moz-any() en la categoria de regles universals, la qual cosa significa que usar-ho com el selector dret serà més lent que usar un ID, una classe o una etiqueta com el selector dret.

- -

Per exemple:

- -
.a > :-moz-any(.b, .c)
-
- -

és més lent que:

- -
.a > .b, .a > .c
-
- -

i el següent és més ràpid:

- -
:-moz-any(.a, .d) > .b, :-moz-any(.a, .d) > .c
-
- -

Navegadors compatibles

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
DescripcióFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Suport bàsic{{CompatGeckoDesktop("2")}}{{property_prefix("-moz")}}12.0 (534.30){{property_prefix("-webkit")}}{{CompatUnknown}}{{CompatUnknown}}5
- {{property_prefix("-webkit")}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
DescripcióAndroidChrome for AndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suport bàsic{{CompatUnknown}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}5
- {{property_prefix("-webkit")}}
-
diff --git a/files/ca/web/css/_colon_is/index.html b/files/ca/web/css/_colon_is/index.html new file mode 100644 index 0000000000..6669bc645a --- /dev/null +++ b/files/ca/web/css/_colon_is/index.html @@ -0,0 +1,198 @@ +--- +title: ':any' +slug: 'Web/CSS/:any' +tags: + - CSS + - Experimental + - Pseudo-class + - Reference +translation_of: 'Web/CSS/:is' +translation_of_original: 'Web/CSS/:any' +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La pseudo-classe :any() permet crear un selector que contingui múltiples opcions, algun dels quals seran aparellats. Aquesta és una alternativa més senzilla que repetir un selector sencer diverses vegades perquè un element dins d'ell varia.

+ +
/* Select any h2 inside a section, article, aside, or nav */
+/* Currently supported with -moz- and -webkit- prefixes */
+:-moz-any(section, article, aside, nav) h2 {
+  font-size: 4.5rem;
+}
+
+:-webkit-any(section, article, aside, nav) h2 {
+  font-size: 4.5rem;
+}
+
+ +
Nota : Aquesta pseudo-classe està en curs de ser estandarditzada en CSS Selectors Level 4 sota el nom :matches(). És probable que la sintaxi i el nom de :-vendor-any() seran canviats perquè es reflecteixi en un futur proper.
+ +

Sintaxi

+ +

Sintaxi formal

+ +
{{csssyntax}}
+ +

Valors

+ +
+
selector
+
Un selector. Això pot ser un selector simple o un selector múltiple compost de selectors simples CSS 3 i pot incloure el combinador descendent.
+
+ +
Nota: Els selectors no poden contenir pseudo-elements i l'únic combinador permès és el combinador descendent.
+ +

Exemples

+ +

Per exemple, el següent CSS:

+ +
/* 3 deep (or more) unordered lists use a square */
+ol ol ul,     ol ul ul,     ol menu ul,     ol dir ul,
+ol ol menu,   ol ul menu,   ol menu menu,   ol dir menu,
+ol ol dir,    ol ul dir,    ol menu dir,    ol dir dir,
+ul ol ul,     ul ul ul,     ul menu ul,     ul dir ul,
+ul ol menu,   ul ul menu,   ul menu menu,   ul dir menu,
+ul ol dir,    ul ul dir,    ul menu dir,    ul dir dir,
+menu ol ul,   menu ul ul,   menu menu ul,   menu dir ul,
+menu ol menu, menu ul menu, menu menu menu, menu dir menu,
+menu ol dir,  menu ul dir,  menu menu dir,  menu dir dir,
+dir ol ul,    dir ul ul,    dir menu ul,    dir dir ul,
+dir ol menu,  dir ul menu,  dir menu menu,  dir dir menu,
+dir ol dir,   dir ul dir,   dir menu dir,   dir dir dir {
+  list-style-type: square;
+}
+
+ +

Pot substituir-se per:

+ +
/* 3 deep (or more) unordered lists use a square */
+:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) ul,
+:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) menu,
+:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) dir {
+  list-style-type: square;
+}
+ +

No obstant això, no utilitzeu el següent: (Veure la secció sobre el rendiment més endavant.)

+ +
:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) :-moz-any(ul, menu, dir) {
+  list-style-type: square;
+}
+ +

Notes

+ +

Aquesta propietat és particularment útil quan es tracta de seccions i encapçalaments en HTML5. Des {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}} i {{HTMLElement("nav")}} es poden niar, sense :any() , l'estil d'aquests perquè coincideixin entre si pot ser difícil.

+ +

Per exemple, sense :any(), donar estil a tot els elements {{HTMLElement("h1")}} a diferents profunditats podria ser molt complicat:

+ +
/* Level 0 */
+h1 {
+  font-size: 30px;
+}
+/* Level 1 */
+section h1, article h1, aside h1, nav h1 {
+  font-size: 25px;
+}
+/* Level 2 */
+section section h1, section article h1, section aside h1, section nav h1,
+article section h1, article article h1, article aside h1, article nav h1,
+aside section h1, aside article h1, aside aside h1, aside nav h1,
+nav section h1, nav article h1, nav aside h1, nav nav h1, {
+  font-size: 20px;
+}
+/* Level 3 */
+/* ... don't even think about it*/
+
+ +

Usant :-any(), és molt més fàcil:

+ +
/* Level 0 */
+h1 {
+  font-size: 30px;
+}
+/* Level 1 */
+:-moz-any(section, article, aside, nav) h1 {
+  font-size: 25px;
+}
+/* Level 2 */
+:-moz-any(section, article, aside, nav)
+:-moz-any(section, article, aside, nav) h1 {
+  font-size: 20px;
+}
+/* Level 3 */
+:-moz-any(section, article, aside, nav)
+:-moz-any(section, article, aside, nav)
+:-moz-any(section, article, aside, nav) h1 {
+  font-size: 15px;
+}
+ +

Problemes amb el rendiment i l'especificitat

+ +

Bug 561154 registra un problema amb Gecko en el qual l'especificitat de: :-moz-any() és incorrecta. La implementació actual (com Firefox 12) posa: :-moz-any() en la categoria de regles universals, la qual cosa significa que usar-ho com el selector dret serà més lent que usar un ID, una classe o una etiqueta com el selector dret.

+ +

Per exemple:

+ +
.a > :-moz-any(.b, .c)
+
+ +

és més lent que:

+ +
.a > .b, .a > .c
+
+ +

i el següent és més ràpid:

+ +
:-moz-any(.a, .d) > .b, :-moz-any(.a, .d) > .c
+
+ +

Navegadors compatibles

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
DescripcióFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Suport bàsic{{CompatGeckoDesktop("2")}}{{property_prefix("-moz")}}12.0 (534.30){{property_prefix("-webkit")}}{{CompatUnknown}}{{CompatUnknown}}5
+ {{property_prefix("-webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidChrome for AndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suport bàsic{{CompatUnknown}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}5
+ {{property_prefix("-webkit")}}
+
diff --git a/files/ca/web/css/adjacent_sibling_combinator/index.html b/files/ca/web/css/adjacent_sibling_combinator/index.html new file mode 100644 index 0000000000..911a395693 --- /dev/null +++ b/files/ca/web/css/adjacent_sibling_combinator/index.html @@ -0,0 +1,135 @@ +--- +title: Combinador de germans adjacents +slug: Web/CSS/Selectors_de_germans_adjacents +tags: + - CSS + - NeedsMobileBrowserCompatibility + - Reference + - Selectors +translation_of: Web/CSS/Adjacent_sibling_combinator +--- +
{{CSSRef("Selectors")}}
+ +

El combinador de germans adjacents (+) separa dos selectors i només coincideix amb el segon element si segueix immediatament el primer element, i tots dos són fills del mateix pare {{domxref("element")}}.

+ +
/* Paràgrafs que vénen immediatament després de qualsevol imatge */
+img + p {
+  font-style: bold;
+}
+ +

Sintaxi

+ +
former_element + target_element { style properties }
+
+ +

Exemple

+ +

CSS

+ +
li:first-of-type + li {
+  color: red;
+}
+
+ +

HTML

+ +
<ul>
+  <li>One</li>
+  <li>Two!</li>
+  <li>Three</li>
+</ul>
+ +

Resultat

+ +

{{EmbedLiveSample('Example', 200, 100)}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS4 Selectors', '#adjacent-sibling-combinators', 'next-sibling combinator')}}{{Spec2('CSS4 Selectors')}}Li dóna un nou nom al combinador "next-sibling".
{{SpecName('CSS3 Selectors', '#adjacent-sibling-combinators', 'Adjacent sibling combinator')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#adjacent-selectors', 'Adjacent sibling selectors')}}{{Spec2('CSS2.1')}}Definició inicial
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}7.0[1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic2.1{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] Internet Explorer 7 no actualitza l'estil correctament quan un element es col·loca dinàmicament abans d'un element que coincideixi amb el selector. En Internet Explorer 8, si un element s'insereix dinàmicament fent clic en un enllaç, l'estil del primer fill no s'aplicarà fins que l'enllaç perdi el focus.

+ +

Vegeu també

+ + diff --git a/files/ca/web/css/attribute_selectors/index.html b/files/ca/web/css/attribute_selectors/index.html new file mode 100644 index 0000000000..6778a2b3cb --- /dev/null +++ b/files/ca/web/css/attribute_selectors/index.html @@ -0,0 +1,250 @@ +--- +title: Selector Atribut +slug: Web/CSS/Selectors_d'Atribut +tags: + - Beginner + - CSS + - Reference + - Selectors +translation_of: Web/CSS/Attribute_selectors +--- +
{{CSSRef}}
+ +

El selector attribute CSS coincideix amb elements basats en la presència o el valor d'un atribut donat.

+ +
/* <a> elements amb l'atribut title */
+a[title] {
+  color: purple;
+}
+
+/* elements <a> amb una coincidència href "https://example.org" */
+a[href="https://example.org"] {
+  color: green;
+}
+
+/* elements <a> amb un href contenint "example" */
+a[href*="example"] {
+  font-size: 2em;
+}
+
+/* elements <a> amb un href amb una terminació ".org" */
+a[href$=".org"] {
+  font-style: italic;
+}
+ +
+
[attr]
+
Representa un element amb un nom d'atribut attr.
+
[attr=value]
+
Representa un element amb un nom d'atribut attr el valor del qual és exactament value.
+
[attr~=value]
+
Representa un element amb un nom d'atribut attr el valor del qual és una llista de paraules separades per espais en blanc, una de les quals és exactament value.
+
[attr|=value]
+
Representa un element amb un nom d'atribut attr el valor del qual pot ser exactament value o pot començar amb value immediatament seguit d'un guió, - (U+002D). Sovint s'utilitza per coincidències de subcodis de llenguatge.
+
[attr^=value]
+
Representa un element amb un nom d'atribut attr el valor del qual està prefixat (precedit) per value.
+
[attr$=value]
+
Representa un element amb un nom d'atribut attr el valor del qual és sufix (següit) per value.
+
[attr*=value]
+
Representa un element amb un nom d'atribut attr el valor del qual conté almenys una ocurrència value dins de la cadena.
+
[attr operator value i]
+
En afegir una i (o I) abans del claudàtor de tancament, el valor es compara entre majúscules i minúscules (per a caràcters dins del rang ASCII).
+
+ +

Exemples

+ + + +

CSS

+ +
a {
+  color: blue;
+}
+
+/* Internal links, beginning with "#" */
+a[href^="#"] {
+  background-color: gold;
+}
+
+/* Links with "example" anywhere in the URL */
+a[href*="example"] {
+  background-color: silver;
+}
+
+/* Links with "insensitive" anywhere in the URL,
+   regardless of capitalization */
+a[href*="insensitive" i] {
+  color: cyan;
+}
+
+/* Links that end in ".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>
+ +

Resultat

+ +

{{EmbedLiveSample('Links')}}

+ +

Llengües

+ +

CSS

+ +
/* Tots els divs amb un atribut `lang` són en negreta. */
+div[lang] {
+  font-weight: bold;
+}
+
+/* Tots els divs en US Anglès són blaus. */
+div[lang~="en-us"] {
+  color: blue;
+}
+
+/* Tots els divs en Portuguès són verds. */
+div[lang="pt"] {
+  color: green;
+}
+
+/* Tots els divs en Xinès són vermells, ja sigui
+   simplificat (zh-CN) o tradicional (zh-TW). */
+div[lang|="zh"] {
+  color: red;
+}
+
+/* Tots els divs en Xinès Traditional
+   `data-lang` són porpra */
+/* Nota: També podeu utilitzar atributs amb guions sense cometes dobles */
+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>
+
+ +

Resultat

+ +

{{EmbedLiveSample('Languages')}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS4 Selectors', '#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS4 Selectors')}}Afegit modificador per a la selecció del valor d'atribut ASCII sense distinció de majúscules i minúscules.
{{SpecName('CSS3 Selectors', '#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS2.1')}}Definició inicial
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1")}}793
Modificador sense distinció de majúscules i minúscules{{CompatChrome(49.0)}}{{CompatNo}}{{CompatGeckoDesktop("47.0")}}{{CompatUnknown}}{{CompatOpera(36)}}{{CompatSafari(9)}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Suport bàsic{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
Modificador sense distinció de majúscules i minúscules{{CompatUnknown}}{{CompatChrome(49.0)}}{{CompatNo}}{{CompatGeckoMobile("47.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatSafari(9)}}{{CompatChrome(49.0)}}
+
diff --git a/files/ca/web/css/child_combinator/index.html b/files/ca/web/css/child_combinator/index.html new file mode 100644 index 0000000000..f5cb8139f9 --- /dev/null +++ b/files/ca/web/css/child_combinator/index.html @@ -0,0 +1,135 @@ +--- +title: Combinador de fills +slug: Web/CSS/Selectors_de_fills +tags: + - CSS + - NeedsMobileBrowserCompatibility + - Reference + - Selectors +translation_of: Web/CSS/Child_combinator +--- +
{{CSSRef("Selectors")}}
+ +

El combinador de fills (>) es col·loca entre dos selectors CSS. Solament coincideix amb aquells elements que coincideixen amb el segon selector que són fills d'elements que coincideixen amb el primer.

+ +
/* Enumera els elements que són fills de la llista "my-things" */
+ul.my-things > li {
+  margin: 2em;
+}
+ +

Els elements que coincideixin amb el segon selector han de ser els fills immediats dels elements que coincideixin amb el primer selector. Això és més estricte que el selector descendent, que coincideix amb tots els elements que coincideixen amb el segon selector per al qual existeix un element ancestral coincident amb el primer selector, independentment de la quantitat de "salts" en el DOM

+ +

Sintaxi

+ +
selector1 > selector2 { style properties }
+
+ +

Exemple

+ +

CSS

+ +
span {
+  background-color: white;
+}
+
+div > span {
+  background-color: DodgerBlue;
+}
+
+ +

HTML

+ +
<div>
+  <span>Span #1, in the div.
+    <span>Span #2, in the span that's in the div.</span>
+  </span>
+</div>
+<span>Span #3, not in the div at all.</span>
+
+ +

Resultat

+ +

{{EmbedLiveSample("Example", 200, 100)}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS4 Selectors', '#child-combinators', 'child combinator')}}{{Spec2('CSS4 Selectors')}} 
{{SpecName('CSS3 Selectors', '#child-combinators', 'child combinators')}}{{Spec2('CSS3 Selectors')}}Sense canvis
{{SpecName('CSS2.1', 'selector.html#child-selectors', 'child selectors')}}{{Spec2('CSS2.1')}}Definició inicial
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}7.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/ca/web/css/class_selectors/index.html b/files/ca/web/css/class_selectors/index.html new file mode 100644 index 0000000000..1f8cfdbee4 --- /dev/null +++ b/files/ca/web/css/class_selectors/index.html @@ -0,0 +1,139 @@ +--- +title: Selector Class +slug: Web/CSS/Selectors_de_Classe +tags: + - CSS + - Reference + - Selectors +translation_of: Web/CSS/Class_selectors +--- +
{{CSSRef}}
+ +

El selector class CSS coincideix amb elements basats en el contingut de l'atribut {{htmlattrxref("class")}}.

+ +
/* Tots els elements amb class="spacious" */
+.spacious {
+  margin: 2em;
+}
+
+/* Tots els elements <li> amb class="spacious" */
+li.spacious {
+  margin: 2em;
+}
+ +

Sintaxi

+ +
.classname { style properties }
+ +

Recordeu que això és equivalent al següent {{Cssxref("Attribute_selectors", "attribute selector")}}:

+ +
[class~=classname] { style properties }
+ +

Exemple

+ +

CSS

+ +
div.classy {
+  background-color: skyblue;
+}
+
+ +

HTML

+ +
<div class="classy">This div has a special class on it!</div>
+<div>This is just a regular div.</div>
+
+ +

Resultat

+ +

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

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS4 Selectors', '#class-html', 'class selectors')}}{{Spec2('CSS4 Selectors')}}Sense canvis
{{SpecName('CSS3 Selectors', '#class-html', 'class selectors')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#class-html', 'child selectors')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#class-as-selector', 'child selectors')}}{{Spec2('CSS1')}}Definició inicial
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/ca/web/css/css_box_model/dominar_el_col.lapse_del_marge/index.html b/files/ca/web/css/css_box_model/dominar_el_col.lapse_del_marge/index.html deleted file mode 100644 index 9b312fc789..0000000000 --- a/files/ca/web/css/css_box_model/dominar_el_col.lapse_del_marge/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: Dominar el col.lapse del marge -slug: Web/CSS/CSS_Box_Model/Dominar_el_col.lapse_del_marge -tags: - - CSS - - CSS Box Model - - Guide - - Reference -translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing ---- -
{{CSSRef}}
- -

Els marges superior (top) i inferior (bottom) dels blocs, a vegades, es combinen (col·lapsats) en un únic marge, la grandària del qual és el més gran dels marges individuals (o només un d'ells, si són iguals), un comportament conegut com col·lapse del marge. Tingueu en compte que els marges dels elements flotants i absolutament posicionats mai es col·lapsen.

- -

El col·lapse de marges es produeix en tres casos bàsics:

- -
-
Germans adjacents
-
Els marges dels germans adjacents estan col·lapsats (excepte quan el darrer germà ha de ser eliminat dels flotadors anteriors).
-
Pare i primer/últim fill
-
Si no hi ha una vora, farcit, part en línia, context de format de blocs creat, o un espaia lliure per separar el {{cssxref("margin-top")}} d'un bloc del {{cssxref("margin-top")}} del seu primer bloc fill; o sense vora, farcit, contingut en línia, {{cssxref("height")}}, {{cssxref("min-height")}}, o {{cssxref("max-height")}} per separar el {{cssxref("margin-bottom")}} d'un bloc del {{cssxref("margin-bottom")}} del seu últim fill, llavors aquests marges es col·lapsen. El marge col·lapsat acaba fora del pare
-
Blocs buits
-
Si no hi ha vora, farcit, contingut en línia, {{cssxref("height")}} o {{cssxref("min-height")}} per separar un bloc {{cssxref("margin-top")}} del seu {{cssxref("margin-bottom")}}, llavors els marges superior i inferior es col·lapsen.
-
- -

Algunes coses a destacar:

- -
    -
  • El col.lapse de marges més complex (de més de dos marges) es produeix quan es combinen els casos anteriors.
    • -
  • Aquestes regles s'apliquen fins i tot als marges que són zero, de manera que el marge d'un fill primer/últim acaba fora dels seus pares (d'acord amb les regles anteriors) tant si el marge dels pares és zero o no.
    • -
  • Quan s'inclouen marges negatius, la mida del marge col·lapsat és la suma del marge positiu més gran i el marge negatiu més petit (més negatiu).
    • -
  • Quan tots els marges són negatius, la mida del marge col·lapsat és el marge més petit (el més negatiu). Això s'aplica tant als elements adjacents com als elements niats.
    • -
- -

Exemples

- -

HTML

- -
<p>The bottom margin of this paragraph is collapsed …</p>
-<p>… with the top margin of this paragraph, yielding a margin of <code>1.2rem</code> in between.</p>
-
-<div>This parent element contains two paragraphs!
-  <p>This paragraph has a <code>.4rem</code> margin between it and the text above.</p>
-  <p>My bottom margin collapses with my parent, yielding a bottom margin of <code>2rem</code>.</p>
-</div>
-
-<p>I am <code>2rem</code> below the element above.</p>
- -

CSS

- -
div {
-  margin: 2rem 0;
-  background: lavender;
-}
-
-p {
-  margin: .4rem 0 1.2rem 0;
-  background: yellow;
-}
- -

Resultat

- -

{{EmbedLiveSample('Examples', 'auto', 350)}}

- -

Especificacions

- - - - - - - - - - - - - - - - -
EspecificacióEstatComentari
{{SpecName("CSS2.1", "box.html#collapsing-margins", "margin collapsing")}}{{Spec2("CSS2.1")}}Definició inicial.
- -

Vegeu també

- - diff --git "a/files/ca/web/css/css_box_model/introducci\303\263_al_model_de_caixa_css/index.html" "b/files/ca/web/css/css_box_model/introducci\303\263_al_model_de_caixa_css/index.html" deleted file mode 100644 index bfb613ed6c..0000000000 --- "a/files/ca/web/css/css_box_model/introducci\303\263_al_model_de_caixa_css/index.html" +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: Introducció al model de caixa CSS -slug: Web/CSS/CSS_Box_Model/Introducció_al_model_de_caixa_CSS -tags: - - CSS - - CSS Box Model - - Guide - - Reference -translation_of: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model ---- -
{{CSSRef}}
- -

Quan es dissenya un document, el motor d'interpretació del navegador representa cada element com una caixa rectangular d'acord amb el model de caixa CSS estàndard. CSS determina la grandària, la posició i les propietats (color, fons, grandària de la vora, etc.) d'aquests caixes.

- -

Cada caixa es compon de quatre parts (o àrees), definides per les seves respectives vores: la vora del contingut, la vora del farciment, la vora de la vora i la vora del marge.

- -

CSS Box model

- -

L'àrea de contingut, limitada per la vora del contingut, conté el contingut "real" de l'element, com ara text, una imatge o un reproductor de vídeo. Les seves dimensions són l'amplada del contingut (o l'amplada de la caixa de contingut) i l'alçada del contingut (o l'alçada de la caixa de contingut). Sovint té un color de fons o una imatge de fons.

- -

Si la propietat {{cssxref("box-sizing")}} s'estableix a content-box (predeterminat), la grandària de l'àrea de contingut es pot definir explícitament amb les propietats {{cssxref("width")}}, {{cssxref("min-width")}}, {{cssxref("max-width")}}, {{ cssxref("height") }}, {{cssxref("min-height")}} i {{cssxref("max-height")}}.

- -

L'àrea de farcit, delimitada per la vora de farcit, estén l'àrea de contingut per incloure el farciment de l'element. Les seves dimensions són l'amplada de la caixa de farcit i l'alçada de la caixa de farcit. Quan l'àrea de contingut té un fons, s'estén en el farcit.

- -

El gruix del farciment està determinat pel {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}} i les propietats abreujades de {{cssxref("padding")}}.

- -

L'àrea de vora, delimitada per la vora de la vora, estén l'àrea de farciment per incloure les vores de l'element. Les seves dimensions són l'amplada de la caixa de vora i l'alçada de la caixa de vora.

- -

El gruix de les vores està determinat per les propietats {{cssxref("border-width")}} i les propietats abreujades {{cssxref("border")}}. Si la propietat {{cssxref("box-sizing")}} s'estableix a border-box, la grandària de l'àrea de la vora es pot definir explícitament amb les propietats {{cssxref("width")}}, {{cssxref("min-width")}}, {{cssxref("max-width")}}, {{ cssxref("height") }}, {{cssxref("min-height")}} i {{cssxref("max-height")}}.

- -

L'àrea de marge, delimitada per la vora del marge, estén l'àrea de la vora per incloure una àrea buida utilitzada per separar l'element dels seus veïns. Les seves dimensions són l'amplada de la caixa de marge i l'alçada de la caixa de marge.

- -

La grandària de l'àrea de marge està determinada pel {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}} i les propietats abreujades {{cssxref("margin")}}. Quan es produeix el col.lapse del marge, l'àrea de marge no està clarament definida, ja que els marges es comparteixen entre les caixes.

- -

Finalment, tingueu en compte que, per als elements en línia no reemplaçats, la quantitat d'espai ocupat (la contribució a l'alçada de la línia) està determinat per la propietat {{cssxref('line-height')}} encara que les vores i el farciment encara es mostran al voltant del contingut.

- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentari
{{ SpecName("CSS2.1","box.html#box-dimensions")}}{{ Spec2('CSS2.1') }}Encara que formulat amb més precisió, no hi ha canvi pràctic.
{{ SpecName("CSS1","#formatting-model")}}{{ Spec2('CSS1') }}Definició inicial.
- -

Vegeu també

- -
    -
  • Referència CSS
    • -
  • {{ CSS_key_concepts() }}
    • -
  • Propietats CSS relacionades : {{ cssxref("box-sizing") }}, {{ cssxref("background-clip") }}, {{ cssxref("height") }}, {{ cssxref("max-height") }}, {{ cssxref("min-height") }}, {{ cssxref("width") }}, {{ cssxref("max-height") }}, {{ cssxref("min-height") }}, {{ cssxref("padding") }}, {{ cssxref("padding-top") }}, {{ cssxref("padding-right") }}, {{ cssxref("padding-bottom") }}, {{ cssxref("padding-left") }}, {{ cssxref("border") }}, {{ cssxref("border-top") }}, {{ cssxref("border-right") }}, {{ cssxref("border-bottom") }}, {{ cssxref("border-left") }}, {{ cssxref("border-width") }}, {{ cssxref("border-top-width") }}, {{ cssxref("border-right-width") }}, {{ cssxref("border-bottom-width") }}, {{ cssxref("border-left-width") }}, {{ cssxref("margin") }}, {{ cssxref("margin-top") }}, {{ cssxref("margin-right") }}, {{ cssxref("margin-bottom") }}, {{ cssxref("margin-left") }}
    • -
diff --git a/files/ca/web/css/css_box_model/introduction_to_the_css_box_model/index.html b/files/ca/web/css/css_box_model/introduction_to_the_css_box_model/index.html new file mode 100644 index 0000000000..bfb613ed6c --- /dev/null +++ b/files/ca/web/css/css_box_model/introduction_to_the_css_box_model/index.html @@ -0,0 +1,67 @@ +--- +title: Introducció al model de caixa CSS +slug: Web/CSS/CSS_Box_Model/Introducció_al_model_de_caixa_CSS +tags: + - CSS + - CSS Box Model + - Guide + - Reference +translation_of: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model +--- +
{{CSSRef}}
+ +

Quan es dissenya un document, el motor d'interpretació del navegador representa cada element com una caixa rectangular d'acord amb el model de caixa CSS estàndard. CSS determina la grandària, la posició i les propietats (color, fons, grandària de la vora, etc.) d'aquests caixes.

+ +

Cada caixa es compon de quatre parts (o àrees), definides per les seves respectives vores: la vora del contingut, la vora del farciment, la vora de la vora i la vora del marge.

+ +

CSS Box model

+ +

L'àrea de contingut, limitada per la vora del contingut, conté el contingut "real" de l'element, com ara text, una imatge o un reproductor de vídeo. Les seves dimensions són l'amplada del contingut (o l'amplada de la caixa de contingut) i l'alçada del contingut (o l'alçada de la caixa de contingut). Sovint té un color de fons o una imatge de fons.

+ +

Si la propietat {{cssxref("box-sizing")}} s'estableix a content-box (predeterminat), la grandària de l'àrea de contingut es pot definir explícitament amb les propietats {{cssxref("width")}}, {{cssxref("min-width")}}, {{cssxref("max-width")}}, {{ cssxref("height") }}, {{cssxref("min-height")}} i {{cssxref("max-height")}}.

+ +

L'àrea de farcit, delimitada per la vora de farcit, estén l'àrea de contingut per incloure el farciment de l'element. Les seves dimensions són l'amplada de la caixa de farcit i l'alçada de la caixa de farcit. Quan l'àrea de contingut té un fons, s'estén en el farcit.

+ +

El gruix del farciment està determinat pel {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}} i les propietats abreujades de {{cssxref("padding")}}.

+ +

L'àrea de vora, delimitada per la vora de la vora, estén l'àrea de farciment per incloure les vores de l'element. Les seves dimensions són l'amplada de la caixa de vora i l'alçada de la caixa de vora.

+ +

El gruix de les vores està determinat per les propietats {{cssxref("border-width")}} i les propietats abreujades {{cssxref("border")}}. Si la propietat {{cssxref("box-sizing")}} s'estableix a border-box, la grandària de l'àrea de la vora es pot definir explícitament amb les propietats {{cssxref("width")}}, {{cssxref("min-width")}}, {{cssxref("max-width")}}, {{ cssxref("height") }}, {{cssxref("min-height")}} i {{cssxref("max-height")}}.

+ +

L'àrea de marge, delimitada per la vora del marge, estén l'àrea de la vora per incloure una àrea buida utilitzada per separar l'element dels seus veïns. Les seves dimensions són l'amplada de la caixa de marge i l'alçada de la caixa de marge.

+ +

La grandària de l'àrea de marge està determinada pel {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}} i les propietats abreujades {{cssxref("margin")}}. Quan es produeix el col.lapse del marge, l'àrea de marge no està clarament definida, ja que els marges es comparteixen entre les caixes.

+ +

Finalment, tingueu en compte que, per als elements en línia no reemplaçats, la quantitat d'espai ocupat (la contribució a l'alçada de la línia) està determinat per la propietat {{cssxref('line-height')}} encara que les vores i el farciment encara es mostran al voltant del contingut.

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{ SpecName("CSS2.1","box.html#box-dimensions")}}{{ Spec2('CSS2.1') }}Encara que formulat amb més precisió, no hi ha canvi pràctic.
{{ SpecName("CSS1","#formatting-model")}}{{ Spec2('CSS1') }}Definició inicial.
+ +

Vegeu també

+ +
    +
  • Referència CSS
    • +
  • {{ CSS_key_concepts() }}
    • +
  • Propietats CSS relacionades : {{ cssxref("box-sizing") }}, {{ cssxref("background-clip") }}, {{ cssxref("height") }}, {{ cssxref("max-height") }}, {{ cssxref("min-height") }}, {{ cssxref("width") }}, {{ cssxref("max-height") }}, {{ cssxref("min-height") }}, {{ cssxref("padding") }}, {{ cssxref("padding-top") }}, {{ cssxref("padding-right") }}, {{ cssxref("padding-bottom") }}, {{ cssxref("padding-left") }}, {{ cssxref("border") }}, {{ cssxref("border-top") }}, {{ cssxref("border-right") }}, {{ cssxref("border-bottom") }}, {{ cssxref("border-left") }}, {{ cssxref("border-width") }}, {{ cssxref("border-top-width") }}, {{ cssxref("border-right-width") }}, {{ cssxref("border-bottom-width") }}, {{ cssxref("border-left-width") }}, {{ cssxref("margin") }}, {{ cssxref("margin-top") }}, {{ cssxref("margin-right") }}, {{ cssxref("margin-bottom") }}, {{ cssxref("margin-left") }}
    • +
diff --git a/files/ca/web/css/css_box_model/mastering_margin_collapsing/index.html b/files/ca/web/css/css_box_model/mastering_margin_collapsing/index.html new file mode 100644 index 0000000000..9b312fc789 --- /dev/null +++ b/files/ca/web/css/css_box_model/mastering_margin_collapsing/index.html @@ -0,0 +1,89 @@ +--- +title: Dominar el col.lapse del marge +slug: Web/CSS/CSS_Box_Model/Dominar_el_col.lapse_del_marge +tags: + - CSS + - CSS Box Model + - Guide + - Reference +translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing +--- +
{{CSSRef}}
+ +

Els marges superior (top) i inferior (bottom) dels blocs, a vegades, es combinen (col·lapsats) en un únic marge, la grandària del qual és el més gran dels marges individuals (o només un d'ells, si són iguals), un comportament conegut com col·lapse del marge. Tingueu en compte que els marges dels elements flotants i absolutament posicionats mai es col·lapsen.

+ +

El col·lapse de marges es produeix en tres casos bàsics:

+ +
+
Germans adjacents
+
Els marges dels germans adjacents estan col·lapsats (excepte quan el darrer germà ha de ser eliminat dels flotadors anteriors).
+
Pare i primer/últim fill
+
Si no hi ha una vora, farcit, part en línia, context de format de blocs creat, o un espaia lliure per separar el {{cssxref("margin-top")}} d'un bloc del {{cssxref("margin-top")}} del seu primer bloc fill; o sense vora, farcit, contingut en línia, {{cssxref("height")}}, {{cssxref("min-height")}}, o {{cssxref("max-height")}} per separar el {{cssxref("margin-bottom")}} d'un bloc del {{cssxref("margin-bottom")}} del seu últim fill, llavors aquests marges es col·lapsen. El marge col·lapsat acaba fora del pare
+
Blocs buits
+
Si no hi ha vora, farcit, contingut en línia, {{cssxref("height")}} o {{cssxref("min-height")}} per separar un bloc {{cssxref("margin-top")}} del seu {{cssxref("margin-bottom")}}, llavors els marges superior i inferior es col·lapsen.
+
+ +

Algunes coses a destacar:

+ +
    +
  • El col.lapse de marges més complex (de més de dos marges) es produeix quan es combinen els casos anteriors.
    • +
  • Aquestes regles s'apliquen fins i tot als marges que són zero, de manera que el marge d'un fill primer/últim acaba fora dels seus pares (d'acord amb les regles anteriors) tant si el marge dels pares és zero o no.
    • +
  • Quan s'inclouen marges negatius, la mida del marge col·lapsat és la suma del marge positiu més gran i el marge negatiu més petit (més negatiu).
    • +
  • Quan tots els marges són negatius, la mida del marge col·lapsat és el marge més petit (el més negatiu). Això s'aplica tant als elements adjacents com als elements niats.
    • +
+ +

Exemples

+ +

HTML

+ +
<p>The bottom margin of this paragraph is collapsed …</p>
+<p>… with the top margin of this paragraph, yielding a margin of <code>1.2rem</code> in between.</p>
+
+<div>This parent element contains two paragraphs!
+  <p>This paragraph has a <code>.4rem</code> margin between it and the text above.</p>
+  <p>My bottom margin collapses with my parent, yielding a bottom margin of <code>2rem</code>.</p>
+</div>
+
+<p>I am <code>2rem</code> below the element above.</p>
+ +

CSS

+ +
div {
+  margin: 2rem 0;
+  background: lavender;
+}
+
+p {
+  margin: .4rem 0 1.2rem 0;
+  background: yellow;
+}
+ +

Resultat

+ +

{{EmbedLiveSample('Examples', 'auto', 350)}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName("CSS2.1", "box.html#collapsing-margins", "margin collapsing")}}{{Spec2("CSS2.1")}}Definició inicial.
+ +

Vegeu també

+ + diff --git a/files/ca/web/css/css_selectors/index.html b/files/ca/web/css/css_selectors/index.html new file mode 100644 index 0000000000..9eaf8daffc --- /dev/null +++ b/files/ca/web/css/css_selectors/index.html @@ -0,0 +1,156 @@ +--- +title: Selectors CSS +slug: Web/CSS/Selectors_CSS +tags: + - CSS + - CSS Selectors + - Overview + - Reference + - Selectors +translation_of: Web/CSS/CSS_Selectors +--- +
{{CSSRef}}
+ +

Els Selectors CSS defineixen els elements als quals s'aplica un conjunt de normes CSS.

+ +

Selectors Bàsics

+ +
+
Selector de tipus
+
Selecciona tots els elements que coincideixen amb el nom del node donat.
+ Sintaxi: eltname
+ Exemple: input coincidirà amb qualsevol element {{HTMLElement('input')}}
+
Selector de clase
+
Selecciona tots els elements que tenen l'atribut class donat.
+ Sintaxi: .classname
+ Exemple: .index coincidirà amb qualsevol element que tingui una classe "index"
+
Selector de ID
+
Selecciona un element basat en el valor del seu atribut id. Només hi ha d'haver un element amb una ID determinat en un document.
+ Sintaxi: #idname
+ Exemple: #toc coincidiran amb l'element que té l'ID "toc".
+
Selector universal
+
Selecciona tots els elements. De manera opcional, pot estar restringit a un espai de noms específic o a tots els espais de noms.
+ Sintaxi: * ns|* *|*
+ Exemple: * coincideix amb tots els elements del document.
+
Selector d'atribut
+
Selecciona elements basats en el valor de l'atribut donat.
+ Sintaxi: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]
+ Exemple: [autoplay] coincidiran tots els elements que tenen establert l'atribut autoplay (a qualsevol valor).
+
+ +

Combinadors

+ +
+
Combinador de germans adjacents
+
El combinador + selecciona els germans adjacents. Això significa que el segon element segueix directament el primer, i ambdós comparteixen el mateix pare.
+ Sintaxi: A + B
+ Exemple: h2 + p coincidirà amb tots el elements {{HTMLElement('p')}} que segueixen directament un {{HTMLElement('h2')}}.
+
Combinador general de germans
+
El combinador ~ selecciona els germans. Això significa que el segon element segueix el primer (encara que no necessàriament de forma immediata), i tots dos comparteixen el mateix pare.
+ Sintaxi: A ~ B
+ Exemple: p ~ span coincidirà amb tots els elements {{HTMLElement('span')}} que segueixen un {{HTMLElement('p')}}.
+
Combinador de fills
+
El combinador > selecciona els nodes que són fills directes del primer element.
+ Sintaxi: A > B
+ Exemple: ul > li coincidirà amb tots els elements {{HTMLElement('li')}} que estan niats directament dins d'un element {{HTMLElement('ul')}}.
+
Combinador de descendents
+
El combinador    selecciona els nodes que són descendents del primer element.
+ Sintaxi: A B
+ Exemple: div span coincidirà amb tots els elements {{HTMLElement('span')}} que es troben dins d'un element {{HTMLElement('div')}}.
+
+ +

Pseudo-classes

+ +

Pseudo-classes permeten la selecció d'elements basats en informació d'estat que no es troba a l'arbre del document.

+ +

Exemple: a:visited coincidirà amb tots els elements {{HTMLElement('a')}} que hagi visitat l'usuari.

+ +

Pseudo-elements

+ +

Pseudo-elements representen entitats que no estan incloses en HTML.

+ +

Exemple: p::first-line coincidirà amb la primera línia de tots els elements {{HTMLElement('p')}}.

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS4 Selectors')}}{{Spec2('CSS4 Selectors')}}
{{SpecName('CSS3 Selectors')}}{{Spec2('CSS3 Selectors')}}
{{SpecName('CSS2.1', 'selector.html')}}{{Spec2('CSS2.1')}}
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Definició inicial
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
DescripcióChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic1{{CompatGeckoDesktop("1")}}3.03.51.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
DescripcióAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic1.5{{CompatGeckoMobile("1.9.2")}}{{CompatUnknown}}{{CompatUnknown}}3.2
+
diff --git a/files/ca/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html b/files/ca/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html new file mode 100644 index 0000000000..53339b06e5 --- /dev/null +++ b/files/ca/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html @@ -0,0 +1,69 @@ +--- +title: 'Ùs de la pseudo-class :target en selectors' +slug: 'Web/CSS/Selectors_CSS/Using_the_:target_pseudo-class_in_selectors' +tags: + - ':target' + - CSS + - Guide + - Reference + - Selectors +translation_of: 'Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors' +--- +
{{CSSRef}}
+ +

Quan una URL apunta a una peça específica d'un document, pot ser difícil per a l'usuari adonar-se. Esbrineu com podeu fer servir algun CSS senzill per cridar l'atenció sobre el destí d'una URL i millorar l'experiència de l'usuari.

+ +

Triar un destí

+ +

La pseudo-class {{ Cssxref(":target") }}s'utilitza per aplicar estil a l'element de destinació d'un URI que conté un identificador de fragment. Per exemple, l'URI http://developer.mozilla.org/en/docs/Using_the_:target_selector#example conté el identificador de fragment #example. En HTML, els identificadors corresponent els valors dels atributs id o name, ja que tots dos comparteixen el mateix espai de noms. Per tant, l'URI d'exemple assenyalaria l'encapçalament "example" en aquest document.

+ +

Suposem que desitjeu donar estil a qualsevol element h2 que és el destí d'un URI, però no voleu que qualsevol altre tipus d'element aconsegueixi un estil de destinació. Això és bastant simple:

+ +
h2:target {font-weight: bold;}
+ +

També és possible crear estils que siguin específics d'un fragment en particular del document. Això es realitza utilitzant el mateix valor de la identificació que es troba en l'URI. Per tant, per afegir una vora al fragment #example, escriuríem:

+ +
#example:target {border: 1px solid black;}
+ +

Dirigit a tots els elements

+ +

Si la intenció és crear un estil "ampli" que s'apliqui a tots els elements seleccionats, llavors el selector universal, ve molt bé:

+ +
:target {color: red;}
+
+ +

Exemple

+ +

En el següent exemple, hi ha cinc enllaços que apunten a elements en el mateix document. En seleccionar l'enllaç "First", per exemple, farà que <h1 id = "one"> es converteixi en l'element de destinació. Recordeu que el document pot saltar a una nova posició de desplaçament, ja que els elements de destinació es col·loquen a la part superior de la finestra del navegador si és possible.

+ +
+
<h4 id="one">...</h4> <p id="two">...</p>
+<div id="three">...</div> <a id="four">...</a> <em id="five">...</em>
+
+<a href="#one">First</a>
+<a href="#two">Second</a>
+<a href="#three">Third</a>
+<a href="#four">Fourth</a>
+<a href="#five">Fifth</a>
+
+ +

Conclusió

+ +

En els casos en què un identificador de fragment apunti a una part del document, els lectors poden arribar a confondre's sobre quina part del document se suposa que han d'estar llegint. El donar estil a la destinació d'un URI, podem reduïr o eliminar la confusió del lector.

+ + + + + +
+

Informació del document original

+ +
    +
  • Autor(s): Eric Meyer, Standards Evangelist, Netscape Communications
    • +
  • Original Copyright Information: Copyright © 2001-2003 Netscape. Tots els drets reservats.
    • +
  • Nota: Aquest article reproduït és part de l'original del lloc DevEdge.
    • +
+
diff --git a/files/ca/web/css/descendant_combinator/index.html b/files/ca/web/css/descendant_combinator/index.html new file mode 100644 index 0000000000..1eb4fd57f8 --- /dev/null +++ b/files/ca/web/css/descendant_combinator/index.html @@ -0,0 +1,170 @@ +--- +title: Selectors de descendents +slug: Web/CSS/Selectors_de_descendents +tags: + - CSS + - Reference + - Selectors +translation_of: Web/CSS/Descendant_combinator +--- +
{{CSSRef("Selectors")}}
+ +

El combinador descendent - en general representat per un  únic caràcter d'espai ( ) - combina dos selectors de tal manera que els elements que coincideixen amb el segon selector se seleccionen si tenen un element ancestral que coincideixi amb el primer selector. Els selectors que utilitzen un combinador descendent s'anomenen selectors de descendents.

+ +
/* Llista els elemenst que són descendsnts de la llista "my-things" */
+ul.my-things li {
+  margin: 2em;
+}
+ +

El combinador descendent és tècnicament un o més caràcters d'espais en blanc {{Glossary("CSS")}} - el caràcter d'espai en blanc i/o un dels quatre caràcters de control: retorn de carro, avanç de pàgina, nova línia i caràcters de tabulació - entre dos selectors en absència d'un altre combinador. A més, els caràcters d'espai en blanc de les que es compon el combinador poden contenir qualsevol nombre de comentaris CSS.

+ +

La naturalesa abstracta d'aquest combinador el fa diferent dels altres combinadors estandarditzats ja que aquests combinadors estan representats per una seqüència de caràcters finits diferents. Aquesta inconsistència es va tractar afegint un combinador descendent redundant representat per dos caràcters, més gran que  (>>), amb seqüència, donant-li una forma que és particularment similar a la del combinador fill, que comparteix una funció similar.

+ +

Sintaxi

+ +
selector1 selector2 { /* property declarations */ }
+
+ +
selector1 >> selector2 { /* property declarations */ }
+
+ +

Exemple

+ +

CSS

+ +
li {
+  list-style-type: disc;
+}
+
+li li {
+  list-style-type: circle;
+}
+
+ +

HTML

+ +
<ul>
+  <li>
+    <div>Item 1</div>
+    <ul>
+      <li>Subitem A</li>
+      <li>Subitem B</li>
+    </ul>
+  </li>
+  <li>
+    <div>Item 2</div>
+    <ul>
+      <li>Subitem A</li>
+      <li>Subitem B</li>
+    </ul>
+  </li>
+</ul>
+
+ +

Resultat

+ +

{{EmbedLiveSample('Example', 200, 160)}}

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS4 Selectors', '#descendant-combinators', 'descendant combinator')}}{{Spec2('CSS4 Selectors')}}>> introduït com combinador descendent a més de l'espai en blanc com combinador.
{{SpecName('CSS3 Selectors', '#descendant-combinators', 'descendant combinator')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#descendant-selectors', 'descendant selectors')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#contextual-selectors', 'contextual selectors')}}{{Spec2('CSS1')}}Definició inicial
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Tipus >>{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatSafari("10")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Tipus >>{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/ca/web/css/general_sibling_combinator/index.html b/files/ca/web/css/general_sibling_combinator/index.html new file mode 100644 index 0000000000..64429bbaba --- /dev/null +++ b/files/ca/web/css/general_sibling_combinator/index.html @@ -0,0 +1,129 @@ +--- +title: Combinador general de germans +slug: Web/CSS/Selectors_general_de_germans +tags: + - CSS + - NeedsMobileBrowserCompatibility + - Reference + - Selectors +translation_of: Web/CSS/General_sibling_combinator +--- +
{{CSSRef("Selectors")}}
+ +

El combinador general de germans (~) separa dos selectors i només coincideix amb el segon element si segueix el primer element (encara que no necessàriament immediatament), i tots dos són fills del mateix pare {{domxref("element")}}.

+ +
/* Paràgrafs que són germans i posteriors a qualsevol imatge */
+img ~ p {
+  color: red;
+}
+ +

Sintaxi

+ +
element ~ element { style properties }
+
+ +

Exemple

+ +

CSS

+ +
p ~ span {
+  color: red;
+}
+ +

HTML

+ +
<span>This is not red.</span>
+<p>Here is a paragraph.</p>
+<code>Here is some code.</code>
+<span>And here is a red span!</span>
+<code>More code...</code>
+<span>And this is a red span!</span>
+
+ +

Resultat

+ +

{{ EmbedLiveSample('Example', 280, 120) }}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{ SpecName('CSS4 Selectors', '#general-sibling-combinators', 'following-sibling combinator') }}{{Spec2('CSS4 Selectors')}}Li dona un nou nom al combinador "subsequent-sibling"
{{ SpecName('CSS3 Selectors', '#general-sibling-combinators', 'general sibling combinator') }}{{Spec2('CSS3 Selectors')}}Definició inicial.
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1")}}793
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióFirefox Mobile (Gecko)AndroidEdgeIE PhoneOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Veure

+ + diff --git a/files/ca/web/css/id_selectors/index.html b/files/ca/web/css/id_selectors/index.html new file mode 100644 index 0000000000..1b6f041eb6 --- /dev/null +++ b/files/ca/web/css/id_selectors/index.html @@ -0,0 +1,134 @@ +--- +title: Selector ID +slug: Web/CSS/Selectors_ID +tags: + - CSS + - Reference + - Selectors +translation_of: Web/CSS/ID_selectors +--- +
{{CSSRef}}
+ +

En un document HTML, el selector ID CSS coincideix amb un element basat en el valor del seu atribut {{htmlattrxref("ID")}}. L'atribut ID de l'element seleccionat ha de coincidir exactament amb el valor indicat en el selector

+ +
/* The element with id="demo" */
+div#demo {
+  border: red 2px solid;
+}
+ +

Sintaxi

+ +
#id_value { style properties }
+ +

Recordeu que això és equivalent al següent {{Cssxref("Attribute_selectors", "attribute selector")}}:

+ +
[id=id_value] { style properties }
+ +

Exemple

+ +

CSS

+ +
div#identified {
+  background-color: skyblue;
+}
+
+ +

HTML

+ +
<div id="identified">This div has a special ID on it!</div>
+<div>This is just a regular div.</div>
+
+ +

Resultat

+ +

{{EmbedLiveSample("Example", '100%', 50)}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName("CSS4 Selectors", "#id-selectors", "ID selectors")}}{{Spec2("CSS4 Selectors")}} 
{{SpecName("CSS3 Selectors", "#id-selectors", "ID selectors")}}{{Spec2("CSS3 Selectors")}} 
{{SpecName("CSS2.1", "selector.html#id-selectors", "ID selectors")}}{{Spec2("CSS2.1")}} 
{{SpecName("CSS1", "#id-as-selector", "ID selectors")}}{{Spec2("CSS1")}}Definició inicial
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/ca/web/css/reference/index.html b/files/ca/web/css/reference/index.html new file mode 100644 index 0000000000..739dcdc9e3 --- /dev/null +++ b/files/ca/web/css/reference/index.html @@ -0,0 +1,206 @@ +--- +title: Referéncia CSS +slug: Web/CSS/Referéncia_CSS +tags: + - CSS + - Reference + - 'l10n:priority' +translation_of: Web/CSS/Reference +--- +

Utilitzeu aquesta referència CSS per explorar un índex alfabètic de totes les propietats CSS estàndard , pseudo-classes, pseudo-elements, tipus de dades, i regles-at. També podeu explorar una llista de tots els  selectors CSS organitzats per tipus i una llista de conceptes clau CSS. També s'inclou una breu referència DOM-CSS / CSSOM.

+ +

Sintaxi de regla bàsica

+ +

Sintaxi de regla d'estil

+ +
selectorlist {
+  property: value;
+  [more property:value; pairs]
+}
+
+... where selectorlist is: selector[:pseudo-class] [::pseudo-element] [, more selectorlists]
+
+See selector, pseudo-class, pseudo-element lists below.
+
+ +

Exemples de regla d'estil

+ +
strong {
+  color: red;
+}
+
+div.menu-bar li:hover > ul {
+  display: block;
+}
+
+ +

Per a una introducció a nivell de principiant a la sintaxi de selectors CSS, consulteu aquest tutorial. Tingueu en compte que qualsevol error de sintaxi CSS en una definició de regla invalida tota la regla. Les regles no vàlides són ignorades pel navegador. Tingueu en compte que les definicions de la regla CSS són totalment basades en text (ASCII), mentre que DOM-CSS / CSSOM (el sistema de gestió de regles) està basat en objectes.

+ +

Sintaxi de regla-At (At-rule)

+ +

As the structure of at-rules varies widely, please see At-rule to find the syntax of the specific one you want.

+ +

Índex de paraules clau (Keyword)

+ +
{{CSS_Ref}}
+ +

Selectors

+ +

Selectors Bàsics

+ + + +

Combinadors

+ + + +

Pseudo-classes

+ +
+
    +
  • {{ Cssxref(":active") }}
    • +
  • {{cssxref(':any')}}
    • +
  • {{cssxref(':any-link')}}
    • +
  • {{ Cssxref(":checked") }}
    • +
  • {{ Cssxref(":default") }}
    • +
  • {{ Cssxref(":dir", ":dir()")}}
    • +
  • {{ Cssxref(":disabled") }}
    • +
  • {{ Cssxref(":empty") }}
    • +
  • {{ Cssxref(":enabled") }}
    • +
  • {{ Cssxref(":first") }}
    • +
  • {{ Cssxref(":first-child") }}
    • +
  • {{ Cssxref(":first-of-type") }}
    • +
  • {{ Cssxref(":fullscreen") }}
    • +
  • {{ Cssxref(":focus") }}
    • +
  • {{ Cssxref(":hover") }}
    • +
  • {{ Cssxref(":indeterminate") }}
    • +
  • {{ Cssxref(":in-range") }}
    • +
  • {{ Cssxref(":invalid") }}
    • +
  • {{ Cssxref(":lang", ":lang()") }}
    • +
  • {{ Cssxref(":last-child") }}
    • +
  • {{ Cssxref(":last-of-type") }}
    • +
  • {{ Cssxref(":left") }}
    • +
  • {{ Cssxref(":link") }}
    • +
  • {{ Cssxref(":not", ":not()") }}
    • +
  • {{ Cssxref(":nth-child", ":nth-child()") }}
    • +
  • {{ Cssxref(":nth-last-child", ":nth-last-child()") }}
    • +
  • {{ Cssxref(":nth-last-of-type", ":nth-last-of-type()") }}
    • +
  • {{ Cssxref(":nth-of-type", ":nth-of-type()") }}
    • +
  • {{ Cssxref(":only-child") }}
    • +
  • {{ Cssxref(":only-of-type") }}
    • +
  • {{ Cssxref(":optional") }}
    • +
  • {{ Cssxref(":out-of-range") }}
    • +
  • {{ Cssxref(":read-only") }}
    • +
  • {{ Cssxref(":read-write") }}
    • +
  • {{ Cssxref(":required") }}
    • +
  • {{ Cssxref(":right") }}
    • +
  • {{ Cssxref(":root") }}
    • +
  • {{ Cssxref(":scope") }}
    • +
  • {{ Cssxref(":target") }}
    • +
  • {{ Cssxref(":valid") }}
    • +
  • {{ Cssxref(":visited") }}
    • +
+
+ +

Pseudo-elements

+ +
+
    +
  • {{ Cssxref("::after") }}
    • +
  • {{ Cssxref("::backdrop") }}
    • +
  • {{ Cssxref("::before") }}
    • +
  • {{ Cssxref("::cue") }}
    • +
  • {{ Cssxref("::first-letter") }}
    • +
  • {{ Cssxref("::first-line") }}
    • +
  • {{ Cssxref("::grammar-error") }} {{experimental_inline}}
    • +
  • {{ Cssxref("::marker") }} {{experimental_inline}}
    • +
  • {{ Cssxref("::placeholder") }} {{experimental_inline}}
    • +
  • {{ Cssxref("::selection") }}
    • +
  • {{ Cssxref("::spelling-error") }} {{experimental_inline}}
    • +
+
+ +
+

Vegeu també: Una llista completa de selectors en l'especificació Selectors Level 3.

+
+ +

Conceptes

+ +

Sintaxi i semàntica

+ + + +

Valors

+ + + +

Disseny

+ + + +

DOM-CSS / CSSOM

+ +

Tipus d'objectes principals

+ + + +

Mètodes importants

+ +
    +
  • {{domxref("CSSStyleSheet.insertRule")}}
    • +
  • {{domxref("CSSStyleSheet.deleteRule")}}
    • +
+ +

Vegeu també

+ + diff --git "a/files/ca/web/css/refer\303\251ncia_css/index.html" "b/files/ca/web/css/refer\303\251ncia_css/index.html" deleted file mode 100644 index 739dcdc9e3..0000000000 --- "a/files/ca/web/css/refer\303\251ncia_css/index.html" +++ /dev/null @@ -1,206 +0,0 @@ ---- -title: Referéncia CSS -slug: Web/CSS/Referéncia_CSS -tags: - - CSS - - Reference - - 'l10n:priority' -translation_of: Web/CSS/Reference ---- -

Utilitzeu aquesta referència CSS per explorar un índex alfabètic de totes les propietats CSS estàndard , pseudo-classes, pseudo-elements, tipus de dades, i regles-at. També podeu explorar una llista de tots els  selectors CSS organitzats per tipus i una llista de conceptes clau CSS. També s'inclou una breu referència DOM-CSS / CSSOM.

- -

Sintaxi de regla bàsica

- -

Sintaxi de regla d'estil

- -
selectorlist {
-  property: value;
-  [more property:value; pairs]
-}
-
-... where selectorlist is: selector[:pseudo-class] [::pseudo-element] [, more selectorlists]
-
-See selector, pseudo-class, pseudo-element lists below.
-
- -

Exemples de regla d'estil

- -
strong {
-  color: red;
-}
-
-div.menu-bar li:hover > ul {
-  display: block;
-}
-
- -

Per a una introducció a nivell de principiant a la sintaxi de selectors CSS, consulteu aquest tutorial. Tingueu en compte que qualsevol error de sintaxi CSS en una definició de regla invalida tota la regla. Les regles no vàlides són ignorades pel navegador. Tingueu en compte que les definicions de la regla CSS són totalment basades en text (ASCII), mentre que DOM-CSS / CSSOM (el sistema de gestió de regles) està basat en objectes.

- -

Sintaxi de regla-At (At-rule)

- -

As the structure of at-rules varies widely, please see At-rule to find the syntax of the specific one you want.

- -

Índex de paraules clau (Keyword)

- -
{{CSS_Ref}}
- -

Selectors

- -

Selectors Bàsics

- - - -

Combinadors

- - - -

Pseudo-classes

- -
-
    -
  • {{ Cssxref(":active") }}
    • -
  • {{cssxref(':any')}}
    • -
  • {{cssxref(':any-link')}}
    • -
  • {{ Cssxref(":checked") }}
    • -
  • {{ Cssxref(":default") }}
    • -
  • {{ Cssxref(":dir", ":dir()")}}
    • -
  • {{ Cssxref(":disabled") }}
    • -
  • {{ Cssxref(":empty") }}
    • -
  • {{ Cssxref(":enabled") }}
    • -
  • {{ Cssxref(":first") }}
    • -
  • {{ Cssxref(":first-child") }}
    • -
  • {{ Cssxref(":first-of-type") }}
    • -
  • {{ Cssxref(":fullscreen") }}
    • -
  • {{ Cssxref(":focus") }}
    • -
  • {{ Cssxref(":hover") }}
    • -
  • {{ Cssxref(":indeterminate") }}
    • -
  • {{ Cssxref(":in-range") }}
    • -
  • {{ Cssxref(":invalid") }}
    • -
  • {{ Cssxref(":lang", ":lang()") }}
    • -
  • {{ Cssxref(":last-child") }}
    • -
  • {{ Cssxref(":last-of-type") }}
    • -
  • {{ Cssxref(":left") }}
    • -
  • {{ Cssxref(":link") }}
    • -
  • {{ Cssxref(":not", ":not()") }}
    • -
  • {{ Cssxref(":nth-child", ":nth-child()") }}
    • -
  • {{ Cssxref(":nth-last-child", ":nth-last-child()") }}
    • -
  • {{ Cssxref(":nth-last-of-type", ":nth-last-of-type()") }}
    • -
  • {{ Cssxref(":nth-of-type", ":nth-of-type()") }}
    • -
  • {{ Cssxref(":only-child") }}
    • -
  • {{ Cssxref(":only-of-type") }}
    • -
  • {{ Cssxref(":optional") }}
    • -
  • {{ Cssxref(":out-of-range") }}
    • -
  • {{ Cssxref(":read-only") }}
    • -
  • {{ Cssxref(":read-write") }}
    • -
  • {{ Cssxref(":required") }}
    • -
  • {{ Cssxref(":right") }}
    • -
  • {{ Cssxref(":root") }}
    • -
  • {{ Cssxref(":scope") }}
    • -
  • {{ Cssxref(":target") }}
    • -
  • {{ Cssxref(":valid") }}
    • -
  • {{ Cssxref(":visited") }}
    • -
-
- -

Pseudo-elements

- -
-
    -
  • {{ Cssxref("::after") }}
    • -
  • {{ Cssxref("::backdrop") }}
    • -
  • {{ Cssxref("::before") }}
    • -
  • {{ Cssxref("::cue") }}
    • -
  • {{ Cssxref("::first-letter") }}
    • -
  • {{ Cssxref("::first-line") }}
    • -
  • {{ Cssxref("::grammar-error") }} {{experimental_inline}}
    • -
  • {{ Cssxref("::marker") }} {{experimental_inline}}
    • -
  • {{ Cssxref("::placeholder") }} {{experimental_inline}}
    • -
  • {{ Cssxref("::selection") }}
    • -
  • {{ Cssxref("::spelling-error") }} {{experimental_inline}}
    • -
-
- -
-

Vegeu també: Una llista completa de selectors en l'especificació Selectors Level 3.

-
- -

Conceptes

- -

Sintaxi i semàntica

- - - -

Valors

- - - -

Disseny

- - - -

DOM-CSS / CSSOM

- -

Tipus d'objectes principals

- - - -

Mètodes importants

- -
    -
  • {{domxref("CSSStyleSheet.insertRule")}}
    • -
  • {{domxref("CSSStyleSheet.deleteRule")}}
    • -
- -

Vegeu també

- - diff --git a/files/ca/web/css/selectors_css/index.html b/files/ca/web/css/selectors_css/index.html deleted file mode 100644 index 9eaf8daffc..0000000000 --- a/files/ca/web/css/selectors_css/index.html +++ /dev/null @@ -1,156 +0,0 @@ ---- -title: Selectors CSS -slug: Web/CSS/Selectors_CSS -tags: - - CSS - - CSS Selectors - - Overview - - Reference - - Selectors -translation_of: Web/CSS/CSS_Selectors ---- -
{{CSSRef}}
- -

Els Selectors CSS defineixen els elements als quals s'aplica un conjunt de normes CSS.

- -

Selectors Bàsics

- -
-
Selector de tipus
-
Selecciona tots els elements que coincideixen amb el nom del node donat.
- Sintaxi: eltname
- Exemple: input coincidirà amb qualsevol element {{HTMLElement('input')}}
-
Selector de clase
-
Selecciona tots els elements que tenen l'atribut class donat.
- Sintaxi: .classname
- Exemple: .index coincidirà amb qualsevol element que tingui una classe "index"
-
Selector de ID
-
Selecciona un element basat en el valor del seu atribut id. Només hi ha d'haver un element amb una ID determinat en un document.
- Sintaxi: #idname
- Exemple: #toc coincidiran amb l'element que té l'ID "toc".
-
Selector universal
-
Selecciona tots els elements. De manera opcional, pot estar restringit a un espai de noms específic o a tots els espais de noms.
- Sintaxi: * ns|* *|*
- Exemple: * coincideix amb tots els elements del document.
-
Selector d'atribut
-
Selecciona elements basats en el valor de l'atribut donat.
- Sintaxi: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]
- Exemple: [autoplay] coincidiran tots els elements que tenen establert l'atribut autoplay (a qualsevol valor).
-
- -

Combinadors

- -
-
Combinador de germans adjacents
-
El combinador + selecciona els germans adjacents. Això significa que el segon element segueix directament el primer, i ambdós comparteixen el mateix pare.
- Sintaxi: A + B
- Exemple: h2 + p coincidirà amb tots el elements {{HTMLElement('p')}} que segueixen directament un {{HTMLElement('h2')}}.
-
Combinador general de germans
-
El combinador ~ selecciona els germans. Això significa que el segon element segueix el primer (encara que no necessàriament de forma immediata), i tots dos comparteixen el mateix pare.
- Sintaxi: A ~ B
- Exemple: p ~ span coincidirà amb tots els elements {{HTMLElement('span')}} que segueixen un {{HTMLElement('p')}}.
-
Combinador de fills
-
El combinador > selecciona els nodes que són fills directes del primer element.
- Sintaxi: A > B
- Exemple: ul > li coincidirà amb tots els elements {{HTMLElement('li')}} que estan niats directament dins d'un element {{HTMLElement('ul')}}.
-
Combinador de descendents
-
El combinador    selecciona els nodes que són descendents del primer element.
- Sintaxi: A B
- Exemple: div span coincidirà amb tots els elements {{HTMLElement('span')}} que es troben dins d'un element {{HTMLElement('div')}}.
-
- -

Pseudo-classes

- -

Pseudo-classes permeten la selecció d'elements basats en informació d'estat que no es troba a l'arbre del document.

- -

Exemple: a:visited coincidirà amb tots els elements {{HTMLElement('a')}} que hagi visitat l'usuari.

- -

Pseudo-elements

- -

Pseudo-elements representen entitats que no estan incloses en HTML.

- -

Exemple: p::first-line coincidirà amb la primera línia de tots els elements {{HTMLElement('p')}}.

- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentari
{{SpecName('CSS4 Selectors')}}{{Spec2('CSS4 Selectors')}}
{{SpecName('CSS3 Selectors')}}{{Spec2('CSS3 Selectors')}}
{{SpecName('CSS2.1', 'selector.html')}}{{Spec2('CSS2.1')}}
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Definició inicial
- - - -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
DescripcióChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic1{{CompatGeckoDesktop("1")}}3.03.51.0
-
- -
- - - - - - - - - - - - - - - - - - - -
DescripcióAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic1.5{{CompatGeckoMobile("1.9.2")}}{{CompatUnknown}}{{CompatUnknown}}3.2
-
diff --git a/files/ca/web/css/selectors_css/using_the__colon_target_pseudo-class_in_selectors/index.html b/files/ca/web/css/selectors_css/using_the__colon_target_pseudo-class_in_selectors/index.html deleted file mode 100644 index 53339b06e5..0000000000 --- a/files/ca/web/css/selectors_css/using_the__colon_target_pseudo-class_in_selectors/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: 'Ùs de la pseudo-class :target en selectors' -slug: 'Web/CSS/Selectors_CSS/Using_the_:target_pseudo-class_in_selectors' -tags: - - ':target' - - CSS - - Guide - - Reference - - Selectors -translation_of: 'Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors' ---- -
{{CSSRef}}
- -

Quan una URL apunta a una peça específica d'un document, pot ser difícil per a l'usuari adonar-se. Esbrineu com podeu fer servir algun CSS senzill per cridar l'atenció sobre el destí d'una URL i millorar l'experiència de l'usuari.

- -

Triar un destí

- -

La pseudo-class {{ Cssxref(":target") }}s'utilitza per aplicar estil a l'element de destinació d'un URI que conté un identificador de fragment. Per exemple, l'URI http://developer.mozilla.org/en/docs/Using_the_:target_selector#example conté el identificador de fragment #example. En HTML, els identificadors corresponent els valors dels atributs id o name, ja que tots dos comparteixen el mateix espai de noms. Per tant, l'URI d'exemple assenyalaria l'encapçalament "example" en aquest document.

- -

Suposem que desitjeu donar estil a qualsevol element h2 que és el destí d'un URI, però no voleu que qualsevol altre tipus d'element aconsegueixi un estil de destinació. Això és bastant simple:

- -
h2:target {font-weight: bold;}
- -

També és possible crear estils que siguin específics d'un fragment en particular del document. Això es realitza utilitzant el mateix valor de la identificació que es troba en l'URI. Per tant, per afegir una vora al fragment #example, escriuríem:

- -
#example:target {border: 1px solid black;}
- -

Dirigit a tots els elements

- -

Si la intenció és crear un estil "ampli" que s'apliqui a tots els elements seleccionats, llavors el selector universal, ve molt bé:

- -
:target {color: red;}
-
- -

Exemple

- -

En el següent exemple, hi ha cinc enllaços que apunten a elements en el mateix document. En seleccionar l'enllaç "First", per exemple, farà que <h1 id = "one"> es converteixi en l'element de destinació. Recordeu que el document pot saltar a una nova posició de desplaçament, ja que els elements de destinació es col·loquen a la part superior de la finestra del navegador si és possible.

- -
-
<h4 id="one">...</h4> <p id="two">...</p>
-<div id="three">...</div> <a id="four">...</a> <em id="five">...</em>
-
-<a href="#one">First</a>
-<a href="#two">Second</a>
-<a href="#three">Third</a>
-<a href="#four">Fourth</a>
-<a href="#five">Fifth</a>
-
- -

Conclusió

- -

En els casos en què un identificador de fragment apunti a una part del document, els lectors poden arribar a confondre's sobre quina part del document se suposa que han d'estar llegint. El donar estil a la destinació d'un URI, podem reduïr o eliminar la confusió del lector.

- - - - - -
-

Informació del document original

- -
    -
  • Autor(s): Eric Meyer, Standards Evangelist, Netscape Communications
    • -
  • Original Copyright Information: Copyright © 2001-2003 Netscape. Tots els drets reservats.
    • -
  • Nota: Aquest article reproduït és part de l'original del lloc DevEdge.
    • -
-
diff --git a/files/ca/web/css/selectors_d'atribut/index.html b/files/ca/web/css/selectors_d'atribut/index.html deleted file mode 100644 index 6778a2b3cb..0000000000 --- a/files/ca/web/css/selectors_d'atribut/index.html +++ /dev/null @@ -1,250 +0,0 @@ ---- -title: Selector Atribut -slug: Web/CSS/Selectors_d'Atribut -tags: - - Beginner - - CSS - - Reference - - Selectors -translation_of: Web/CSS/Attribute_selectors ---- -
{{CSSRef}}
- -

El selector attribute CSS coincideix amb elements basats en la presència o el valor d'un atribut donat.

- -
/* <a> elements amb l'atribut title */
-a[title] {
-  color: purple;
-}
-
-/* elements <a> amb una coincidència href "https://example.org" */
-a[href="https://example.org"] {
-  color: green;
-}
-
-/* elements <a> amb un href contenint "example" */
-a[href*="example"] {
-  font-size: 2em;
-}
-
-/* elements <a> amb un href amb una terminació ".org" */
-a[href$=".org"] {
-  font-style: italic;
-}
- -
-
[attr]
-
Representa un element amb un nom d'atribut attr.
-
[attr=value]
-
Representa un element amb un nom d'atribut attr el valor del qual és exactament value.
-
[attr~=value]
-
Representa un element amb un nom d'atribut attr el valor del qual és una llista de paraules separades per espais en blanc, una de les quals és exactament value.
-
[attr|=value]
-
Representa un element amb un nom d'atribut attr el valor del qual pot ser exactament value o pot començar amb value immediatament seguit d'un guió, - (U+002D). Sovint s'utilitza per coincidències de subcodis de llenguatge.
-
[attr^=value]
-
Representa un element amb un nom d'atribut attr el valor del qual està prefixat (precedit) per value.
-
[attr$=value]
-
Representa un element amb un nom d'atribut attr el valor del qual és sufix (següit) per value.
-
[attr*=value]
-
Representa un element amb un nom d'atribut attr el valor del qual conté almenys una ocurrència value dins de la cadena.
-
[attr operator value i]
-
En afegir una i (o I) abans del claudàtor de tancament, el valor es compara entre majúscules i minúscules (per a caràcters dins del rang ASCII).
-
- -

Exemples

- - - -

CSS

- -
a {
-  color: blue;
-}
-
-/* Internal links, beginning with "#" */
-a[href^="#"] {
-  background-color: gold;
-}
-
-/* Links with "example" anywhere in the URL */
-a[href*="example"] {
-  background-color: silver;
-}
-
-/* Links with "insensitive" anywhere in the URL,
-   regardless of capitalization */
-a[href*="insensitive" i] {
-  color: cyan;
-}
-
-/* Links that end in ".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>
- -

Resultat

- -

{{EmbedLiveSample('Links')}}

- -

Llengües

- -

CSS

- -
/* Tots els divs amb un atribut `lang` són en negreta. */
-div[lang] {
-  font-weight: bold;
-}
-
-/* Tots els divs en US Anglès són blaus. */
-div[lang~="en-us"] {
-  color: blue;
-}
-
-/* Tots els divs en Portuguès són verds. */
-div[lang="pt"] {
-  color: green;
-}
-
-/* Tots els divs en Xinès són vermells, ja sigui
-   simplificat (zh-CN) o tradicional (zh-TW). */
-div[lang|="zh"] {
-  color: red;
-}
-
-/* Tots els divs en Xinès Traditional
-   `data-lang` són porpra */
-/* Nota: També podeu utilitzar atributs amb guions sense cometes dobles */
-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>
-
- -

Resultat

- -

{{EmbedLiveSample('Languages')}}

- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentari
{{SpecName('CSS4 Selectors', '#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS4 Selectors')}}Afegit modificador per a la selecció del valor d'atribut ASCII sense distinció de majúscules i minúscules.
{{SpecName('CSS3 Selectors', '#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS2.1')}}Definició inicial
- - - -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1")}}793
Modificador sense distinció de majúscules i minúscules{{CompatChrome(49.0)}}{{CompatNo}}{{CompatGeckoDesktop("47.0")}}{{CompatUnknown}}{{CompatOpera(36)}}{{CompatSafari(9)}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
DescripcióAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Suport bàsic{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
Modificador sense distinció de majúscules i minúscules{{CompatUnknown}}{{CompatChrome(49.0)}}{{CompatNo}}{{CompatGeckoMobile("47.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatSafari(9)}}{{CompatChrome(49.0)}}
-
diff --git a/files/ca/web/css/selectors_de_classe/index.html b/files/ca/web/css/selectors_de_classe/index.html deleted file mode 100644 index 1f8cfdbee4..0000000000 --- a/files/ca/web/css/selectors_de_classe/index.html +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: Selector Class -slug: Web/CSS/Selectors_de_Classe -tags: - - CSS - - Reference - - Selectors -translation_of: Web/CSS/Class_selectors ---- -
{{CSSRef}}
- -

El selector class CSS coincideix amb elements basats en el contingut de l'atribut {{htmlattrxref("class")}}.

- -
/* Tots els elements amb class="spacious" */
-.spacious {
-  margin: 2em;
-}
-
-/* Tots els elements <li> amb class="spacious" */
-li.spacious {
-  margin: 2em;
-}
- -

Sintaxi

- -
.classname { style properties }
- -

Recordeu que això és equivalent al següent {{Cssxref("Attribute_selectors", "attribute selector")}}:

- -
[class~=classname] { style properties }
- -

Exemple

- -

CSS

- -
div.classy {
-  background-color: skyblue;
-}
-
- -

HTML

- -
<div class="classy">This div has a special class on it!</div>
-<div>This is just a regular div.</div>
-
- -

Resultat

- -

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

- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentari
{{SpecName('CSS4 Selectors', '#class-html', 'class selectors')}}{{Spec2('CSS4 Selectors')}}Sense canvis
{{SpecName('CSS3 Selectors', '#class-html', 'class selectors')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#class-html', 'child selectors')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#class-as-selector', 'child selectors')}}{{Spec2('CSS1')}}Definició inicial
- - - -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - -
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
DescripcióAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
diff --git a/files/ca/web/css/selectors_de_descendents/index.html b/files/ca/web/css/selectors_de_descendents/index.html deleted file mode 100644 index 1eb4fd57f8..0000000000 --- a/files/ca/web/css/selectors_de_descendents/index.html +++ /dev/null @@ -1,170 +0,0 @@ ---- -title: Selectors de descendents -slug: Web/CSS/Selectors_de_descendents -tags: - - CSS - - Reference - - Selectors -translation_of: Web/CSS/Descendant_combinator ---- -
{{CSSRef("Selectors")}}
- -

El combinador descendent - en general representat per un  únic caràcter d'espai ( ) - combina dos selectors de tal manera que els elements que coincideixen amb el segon selector se seleccionen si tenen un element ancestral que coincideixi amb el primer selector. Els selectors que utilitzen un combinador descendent s'anomenen selectors de descendents.

- -
/* Llista els elemenst que són descendsnts de la llista "my-things" */
-ul.my-things li {
-  margin: 2em;
-}
- -

El combinador descendent és tècnicament un o més caràcters d'espais en blanc {{Glossary("CSS")}} - el caràcter d'espai en blanc i/o un dels quatre caràcters de control: retorn de carro, avanç de pàgina, nova línia i caràcters de tabulació - entre dos selectors en absència d'un altre combinador. A més, els caràcters d'espai en blanc de les que es compon el combinador poden contenir qualsevol nombre de comentaris CSS.

- -

La naturalesa abstracta d'aquest combinador el fa diferent dels altres combinadors estandarditzats ja que aquests combinadors estan representats per una seqüència de caràcters finits diferents. Aquesta inconsistència es va tractar afegint un combinador descendent redundant representat per dos caràcters, més gran que  (>>), amb seqüència, donant-li una forma que és particularment similar a la del combinador fill, que comparteix una funció similar.

- -

Sintaxi

- -
selector1 selector2 { /* property declarations */ }
-
- -
selector1 >> selector2 { /* property declarations */ }
-
- -

Exemple

- -

CSS

- -
li {
-  list-style-type: disc;
-}
-
-li li {
-  list-style-type: circle;
-}
-
- -

HTML

- -
<ul>
-  <li>
-    <div>Item 1</div>
-    <ul>
-      <li>Subitem A</li>
-      <li>Subitem B</li>
-    </ul>
-  </li>
-  <li>
-    <div>Item 2</div>
-    <ul>
-      <li>Subitem A</li>
-      <li>Subitem B</li>
-    </ul>
-  </li>
-</ul>
-
- -

Resultat

- -

{{EmbedLiveSample('Example', 200, 160)}}

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentari
{{SpecName('CSS4 Selectors', '#descendant-combinators', 'descendant combinator')}}{{Spec2('CSS4 Selectors')}}>> introduït com combinador descendent a més de l'espai en blanc com combinador.
{{SpecName('CSS3 Selectors', '#descendant-combinators', 'descendant combinator')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#descendant-selectors', 'descendant selectors')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#contextual-selectors', 'contextual selectors')}}{{Spec2('CSS1')}}Definició inicial
- - - -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Tipus >>{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatSafari("10")}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Tipus >>{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
diff --git a/files/ca/web/css/selectors_de_fills/index.html b/files/ca/web/css/selectors_de_fills/index.html deleted file mode 100644 index f5cb8139f9..0000000000 --- a/files/ca/web/css/selectors_de_fills/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: Combinador de fills -slug: Web/CSS/Selectors_de_fills -tags: - - CSS - - NeedsMobileBrowserCompatibility - - Reference - - Selectors -translation_of: Web/CSS/Child_combinator ---- -
{{CSSRef("Selectors")}}
- -

El combinador de fills (>) es col·loca entre dos selectors CSS. Solament coincideix amb aquells elements que coincideixen amb el segon selector que són fills d'elements que coincideixen amb el primer.

- -
/* Enumera els elements que són fills de la llista "my-things" */
-ul.my-things > li {
-  margin: 2em;
-}
- -

Els elements que coincideixin amb el segon selector han de ser els fills immediats dels elements que coincideixin amb el primer selector. Això és més estricte que el selector descendent, que coincideix amb tots els elements que coincideixen amb el segon selector per al qual existeix un element ancestral coincident amb el primer selector, independentment de la quantitat de "salts" en el DOM

- -

Sintaxi

- -
selector1 > selector2 { style properties }
-
- -

Exemple

- -

CSS

- -
span {
-  background-color: white;
-}
-
-div > span {
-  background-color: DodgerBlue;
-}
-
- -

HTML

- -
<div>
-  <span>Span #1, in the div.
-    <span>Span #2, in the span that's in the div.</span>
-  </span>
-</div>
-<span>Span #3, not in the div at all.</span>
-
- -

Resultat

- -

{{EmbedLiveSample("Example", 200, 100)}}

- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentari
{{SpecName('CSS4 Selectors', '#child-combinators', 'child combinator')}}{{Spec2('CSS4 Selectors')}} 
{{SpecName('CSS3 Selectors', '#child-combinators', 'child combinators')}}{{Spec2('CSS3 Selectors')}}Sense canvis
{{SpecName('CSS2.1', 'selector.html#child-selectors', 'child selectors')}}{{Spec2('CSS2.1')}}Definició inicial
- - - -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - -
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}7.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
diff --git a/files/ca/web/css/selectors_de_germans_adjacents/index.html b/files/ca/web/css/selectors_de_germans_adjacents/index.html deleted file mode 100644 index 911a395693..0000000000 --- a/files/ca/web/css/selectors_de_germans_adjacents/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: Combinador de germans adjacents -slug: Web/CSS/Selectors_de_germans_adjacents -tags: - - CSS - - NeedsMobileBrowserCompatibility - - Reference - - Selectors -translation_of: Web/CSS/Adjacent_sibling_combinator ---- -
{{CSSRef("Selectors")}}
- -

El combinador de germans adjacents (+) separa dos selectors i només coincideix amb el segon element si segueix immediatament el primer element, i tots dos són fills del mateix pare {{domxref("element")}}.

- -
/* Paràgrafs que vénen immediatament després de qualsevol imatge */
-img + p {
-  font-style: bold;
-}
- -

Sintaxi

- -
former_element + target_element { style properties }
-
- -

Exemple

- -

CSS

- -
li:first-of-type + li {
-  color: red;
-}
-
- -

HTML

- -
<ul>
-  <li>One</li>
-  <li>Two!</li>
-  <li>Three</li>
-</ul>
- -

Resultat

- -

{{EmbedLiveSample('Example', 200, 100)}}

- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentari
{{SpecName('CSS4 Selectors', '#adjacent-sibling-combinators', 'next-sibling combinator')}}{{Spec2('CSS4 Selectors')}}Li dóna un nou nom al combinador "next-sibling".
{{SpecName('CSS3 Selectors', '#adjacent-sibling-combinators', 'Adjacent sibling combinator')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#adjacent-selectors', 'Adjacent sibling selectors')}}{{Spec2('CSS2.1')}}Definició inicial
- - - -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - -
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}7.0[1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic2.1{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

[1] Internet Explorer 7 no actualitza l'estil correctament quan un element es col·loca dinàmicament abans d'un element que coincideixi amb el selector. En Internet Explorer 8, si un element s'insereix dinàmicament fent clic en un enllaç, l'estil del primer fill no s'aplicarà fins que l'enllaç perdi el focus.

- -

Vegeu també

- - diff --git a/files/ca/web/css/selectors_de_tipus/index.html b/files/ca/web/css/selectors_de_tipus/index.html deleted file mode 100644 index d87b102ac3..0000000000 --- a/files/ca/web/css/selectors_de_tipus/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: Selector Type -slug: Web/CSS/Selectors_de_Tipus -tags: - - CSS - - HTML - - NeedsMobileBrowserCompatibility - - Node - - Reference - - Selectors -translation_of: Web/CSS/Type_selectors ---- -
{{CSSRef}}
- -

El selector type CSS coincideix amb elements per nom del node. En altres paraules, selecciona tots els elements del tipus donat dins d'un document.

- -
/* Tots els elements <a>. */
-a {
-  color: purple;
-}
- -

Sintaxi

- -
element { style properties }
-
- -

Exemple

- -

CSS

- -
span {
-  background-color: skyblue;
-}
-
- -

HTML

- -
<span>Here's a span with some text.</span>
-<p>Here's a p with some text.</p>
-<span>Here's a span with more text.</span>
-
- -

Resultat

- -

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

- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentari
{{SpecName('CSS4 Selectors', '#type-selectors', 'Type (tag name) selector')}}{{Spec2('CSS4 Selectors')}}Sense canvis
{{SpecName('CSS3 Selectors', '#type-selectors', 'type selectors')}}{{Spec2('CSS3 Selectors')}}Sense canvis
{{SpecName('CSS2.1', 'selector.html#type-selectors', 'type selectors')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#basic-concepts', 'type selectors')}}{{Spec2('CSS1')}}Definició inicial
- - - -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - -
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
DescripcióAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
diff --git a/files/ca/web/css/selectors_general_de_germans/index.html b/files/ca/web/css/selectors_general_de_germans/index.html deleted file mode 100644 index 64429bbaba..0000000000 --- a/files/ca/web/css/selectors_general_de_germans/index.html +++ /dev/null @@ -1,129 +0,0 @@ ---- -title: Combinador general de germans -slug: Web/CSS/Selectors_general_de_germans -tags: - - CSS - - NeedsMobileBrowserCompatibility - - Reference - - Selectors -translation_of: Web/CSS/General_sibling_combinator ---- -
{{CSSRef("Selectors")}}
- -

El combinador general de germans (~) separa dos selectors i només coincideix amb el segon element si segueix el primer element (encara que no necessàriament immediatament), i tots dos són fills del mateix pare {{domxref("element")}}.

- -
/* Paràgrafs que són germans i posteriors a qualsevol imatge */
-img ~ p {
-  color: red;
-}
- -

Sintaxi

- -
element ~ element { style properties }
-
- -

Exemple

- -

CSS

- -
p ~ span {
-  color: red;
-}
- -

HTML

- -
<span>This is not red.</span>
-<p>Here is a paragraph.</p>
-<code>Here is some code.</code>
-<span>And here is a red span!</span>
-<code>More code...</code>
-<span>And this is a red span!</span>
-
- -

Resultat

- -

{{ EmbedLiveSample('Example', 280, 120) }}

- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentari
{{ SpecName('CSS4 Selectors', '#general-sibling-combinators', 'following-sibling combinator') }}{{Spec2('CSS4 Selectors')}}Li dona un nou nom al combinador "subsequent-sibling"
{{ SpecName('CSS3 Selectors', '#general-sibling-combinators', 'general sibling combinator') }}{{Spec2('CSS3 Selectors')}}Definició inicial.
- - - -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - -
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1")}}793
-
- -
- - - - - - - - - - - - - - - - - - - - - -
DescripcióFirefox Mobile (Gecko)AndroidEdgeIE PhoneOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Veure

- - diff --git a/files/ca/web/css/selectors_id/index.html b/files/ca/web/css/selectors_id/index.html deleted file mode 100644 index 1b6f041eb6..0000000000 --- a/files/ca/web/css/selectors_id/index.html +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: Selector ID -slug: Web/CSS/Selectors_ID -tags: - - CSS - - Reference - - Selectors -translation_of: Web/CSS/ID_selectors ---- -
{{CSSRef}}
- -

En un document HTML, el selector ID CSS coincideix amb un element basat en el valor del seu atribut {{htmlattrxref("ID")}}. L'atribut ID de l'element seleccionat ha de coincidir exactament amb el valor indicat en el selector

- -
/* The element with id="demo" */
-div#demo {
-  border: red 2px solid;
-}
- -

Sintaxi

- -
#id_value { style properties }
- -

Recordeu que això és equivalent al següent {{Cssxref("Attribute_selectors", "attribute selector")}}:

- -
[id=id_value] { style properties }
- -

Exemple

- -

CSS

- -
div#identified {
-  background-color: skyblue;
-}
-
- -

HTML

- -
<div id="identified">This div has a special ID on it!</div>
-<div>This is just a regular div.</div>
-
- -

Resultat

- -

{{EmbedLiveSample("Example", '100%', 50)}}

- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentari
{{SpecName("CSS4 Selectors", "#id-selectors", "ID selectors")}}{{Spec2("CSS4 Selectors")}} 
{{SpecName("CSS3 Selectors", "#id-selectors", "ID selectors")}}{{Spec2("CSS3 Selectors")}} 
{{SpecName("CSS2.1", "selector.html#id-selectors", "ID selectors")}}{{Spec2("CSS2.1")}} 
{{SpecName("CSS1", "#id-as-selector", "ID selectors")}}{{Spec2("CSS1")}}Definició inicial
- - - -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - -
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
DescripcióAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
diff --git a/files/ca/web/css/selectors_universal/index.html b/files/ca/web/css/selectors_universal/index.html deleted file mode 100644 index 6aa7931ef9..0000000000 --- a/files/ca/web/css/selectors_universal/index.html +++ /dev/null @@ -1,176 +0,0 @@ ---- -title: Selector Universal -slug: Web/CSS/Selectors_Universal -tags: - - CSS - - NeedsBrowserCompatibility - - NeedsMobileBrowserCompatibility - - Reference - - Selectors -translation_of: Web/CSS/Universal_selectors ---- -
{{CSSRef}}
- -

El selector universal CSS (*) coincideix amb elements de qualsevol tipus.

- -
/* Selecciona tots els elements */
-* {
-  color: green;
-}
- -

A partir de CSS3, l'asterisc pot ser usat en combinació amb {{cssxref("CSS_Namespaces", "namespaces")}}:

- -
    -
  • ns|* - coincideix amb tots els elements de l'espai de noms  ns
    • -
  • *|* - coincideix amb tots els elements
    • -
  • |* - coincideix amb tots els elements sense cap espai de noms declarat
    • -
- -

Sintaxi

- -
* { style properties }
- -

L'asterisc és opcional amb selectors simples . Per exemple , *.warning i .warning són equivalents.

- -

Exemples

- -

CSS

- -
* [lang^=en] {
-  color: green;
-}
-
-*.warning {
-  color: red;
-}
-
-*#maincontent {
-  border: 1px solid blue;
-}
-
-.floating {
-  float: left
-}
-
-/* automatically clear the next sibling after a floating element */
-.floating + * {
-  clear: left;
-}
-
- -

HTML

- -
<p class="warning">
-  <span lang="en-us">A green span</span> in a red paragraph.</span>
-</p>
-<p id="maincontent" lang="en-gb">
-  <span class="warning">A red span</span> in a green paragraph.</span>
-</p>
- -

Resultat

- -

{{EmbedLiveSample('Examples')}}

- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentari
{{SpecName('CSS4 Selectors', '#the-universal-selector', 'universal selector')}}{{Spec2('CSS4 Selectors')}}Sense canvis
{{SpecName('CSS3 Selectors', '#universal-selector', 'universal selector')}}{{Spec2('CSS3 Selectors')}}Defineix el comportament pel que fa als espais de noms i afegeix suggeriments que permeten ometre el selector dins de pseudo-elements
{{SpecName('CSS2.1', 'selector.html#universal-selector', 'universal selector')}}{{Spec2('CSS2.1')}}Definició inicial
- - - -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1")}}7{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Combinació amb suport d'espai de noms{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1")}}981.3
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
DescripcióAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Combinació amb suport d'espai de noms{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
diff --git a/files/ca/web/css/sintaxi/index.html b/files/ca/web/css/sintaxi/index.html deleted file mode 100644 index 51931c11f0..0000000000 --- a/files/ca/web/css/sintaxi/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: Sintaxi -slug: Web/CSS/Sintaxi -tags: - - CSS - - Guide - - Reference - - Web -translation_of: Web/CSS/Syntax ---- -
{{cssref}}
- -

L'objectiu bàsic del llenguatge de la Fulla d'Estil en Cascada (CSS) és permetre que un motor del navegador pinti elements de la pàgina amb característiques específiques, com ara colors, posicionament o decoracions. La sintaxi CSS reflecteix aquest objectiu i els seus components bàsics són:

- -
    -
  • La propietat és un identificador, és un nom legible per humans, que defineix quina característica es considera.
    • -
  • El valor descriu com el motor ha de manejar la característica. Cada propietat té un conjunt de valors vàlids, definits per una gramàtica formal, així com un significat semàntic, implementat pel motor del navegador.
    • -
- -

Declaracions CSS

- -

Establir propietats CSS a valors específics és la funció principal del llenguatge CSS. Un parell de propietats i valors s'anomena declaració, i qualsevol motor CSS calcula quines declaracions s'apliquen a cada element d'una pàgina per tal d'establir-la de forma adequada i definir-la.

- -

Les dues propietats i els valors no són sensibles a majúscules i minúscules de manera predeterminada a CSS. El parell està separat per dos punts, ':' (U + 003A COLON), i els espais en blanc abans, entre i després de les propietats i valors, però no necessàriament a l'interior, s'ignoren.

- -

css syntax - declaration.png

- -

Hi ha més de 100 propiertats diferents en CSS i un nombre gairebé infinit de valors diferents. No es permeten tots els parells de propietats i valors i cada propietat defineix quins són els valors vàlids. Quan un valor no és vàlid per a una propietat determinada, la declaració es considera invàlida i és totalment ignorada per el motor CSS .

- -

Blocs de declaracions CSS

- -

Les declaracions s'agrupen en blocs, és a dir, en una estructura delimitada per una clau d'obertura, '{' (U+007B LEFT CURLY BRACKET), i una de tancament, '}' (U+007D RIGHT CURLY BRACKET). Els blocs de vegades poden ser niats, de manera que les claus d'oberture i tancament han de coincidir.

- -

css syntax - block.png

- -

Aquests blocs són naturalment anomenats blocs de declaració i les declaracions dins d'elles estan separades per un punt i coma, ';' (U + 003B SEMICOLON). Un bloc de declaració pot estar buit, aixó és, que conté una declaració nul·la. Els espais en blanc al voltant de les declaracions s'ignoren. L'última declaració d'un bloc no necessita ser acabada per un punt i coma, tot i que sovint es considera un bon estil per fer-ho ja que evita oblidar-se d'afegir-lo quan s'estén el bloc amb una altra declaració.

- -

css syntax - declarations block.png

- -
El contingut d'un bloc de declaració CSS, és una llista de declaracions separades per punt i coma, sense les claus inicials i de tancament, es pot incloure dins d'un atribut d'estil.
- -

Regles de CSS

- -

Si les fulles d'estil només poguessin aplicar una declaració a cada element d'una pàgina web, serien bastant inútils. L'objectiu real és aplicar diferents declaracions a diferents parts del document.

- -

CSS ho permet associant condicions amb blocs de declaracions. Cada bloc de declaració (vàlid) està precedit d'un o més selectors que són condicions que seleccionen alguns elements de la pàgina. El bloc de declaracions d'un grup de parells de selectors s'anomena un conjunt de regles (ruleset), o sovint només una regla (rule).

- -

css syntax - ruleset.png

- -

Com que un element de la pàgina pot coincidir amb diversos selectors i, per tant, amb diverses regles que poden incloure una propietat determinada en diverses ocasions, amb valors diferents, l'estàndard CSS defineix quina té prioritat sobre l'altra i s'ha d'aplicar: això s'anomena algorisme en cascade.

- -
És important notar que fins i tot si un conjunt de regles caracteritzat per un grup de selectors és una espècie d'abreviatura que reemplaça els conjunts de regles amb un sol selector cadascun, això no s'aplica a la validesa del conjunt de regles en si.
-
-Això dóna lloc a una conseqüència important: si un únic selector bàsic no és vàlid, com quan s'utilitza un pseudo-element o pseudo-classe desconegut, el selector sencer és invàlid i per tant s'ignora tota la regla (no és vàlida).
- -

Sentències CSS

- -

Els conjunts de regles són els blocs principals de construcció d'una fulla d'estil, que sovint només consisteixen en una gran llista d'elles. Però hi ha una altra informació que un autor web vol transmetre en la fulla d'estil, com el joc de caràcters, altres fulles d'estil externes per importar, descripcions de tipus de fonts o comptadors de llistes i molts més. Utilitzarà altres tipus específics de declaracions per fer-ho.

- -

Una declaració és un bloc de construcció que comença amb qualsevol caràcter que no sigui l'espai i que finalitza en la primera clau de tancament o punt i coma (fora d'una cadena, no escapada i no s'inclou en un altre parell de {}, () o []).

- -

css syntax - statements Venn diag.png

- -

Hi ha dos tipus de declaracions:

- -
    -
  • Conjunt de regles (Rulesets) (o regles) que, com es veu, associen una col·lecció de declaracions CSS a una condició descrita per un selector.
    • -
  • Regles-At (At-rules) comencen amb un signe, '@' (U+0040 COMMERCIAL AT), seguit d'un identificador i, després continuen fins al final de la sentència, és a dir fins al següent punt i coma (;) fora d'un bloc o al final del bloc següent. Cada tipus de regles-at, definides per l'identificador, poden tenir la seva pròpia sintaxi interna, i la semàntica per descomptat. S'utilitzen per transmetre informació de metadades (com {{cssxref("@charset")}} o {{cssxref("@import")}}), informació condicional (com {{cssxref("@media")}} o {{cssxref("@document")}}), o informació descriptiva (com {{cssxref("@font-face")}}).
    • -
- -

Qualsevol declaració que no sigui un conjunt de regles (ruleset) o una at-rule no és vàlida i és ignorada.

- -

Hi ha un altre grup de declaracions – les declaracions niades. Aquestes són declaracions que es poden utilitzar en un subconjunt específic de regles-at – les regles de grup condicional. Aquestes declaracions només s'apliquen si es compleix una condició específica: el contingut de la regla-at @media només s'aplica si el dispositiu en què el navegador s'executa coincideix amb la condició expressada; el contingut de la regla-at @document només s'aplica si la pàgina actual coincideix amb algunes condicions, i així successivament. En CSS1 i CSS2.1, només es podien utilitzar conjunts de regles dins de les regles de grup condicional. Això va ser molt restrictiu i aquesta restricció es va aixecar en CSS Conditionals Level 3. Ara, tot i que encara és experimental i no és compatible amb tots els navegadors, les regles de grup condicional poden contenir un rang de contingut més ampli: però també alguns conjunts de regles, però no totes les regles-at.

- -

Vegeu també

- -
    -
  • {{ CSS_key_concepts()}}
    • -
diff --git a/files/ca/web/css/syntax/index.html b/files/ca/web/css/syntax/index.html new file mode 100644 index 0000000000..51931c11f0 --- /dev/null +++ b/files/ca/web/css/syntax/index.html @@ -0,0 +1,79 @@ +--- +title: Sintaxi +slug: Web/CSS/Sintaxi +tags: + - CSS + - Guide + - Reference + - Web +translation_of: Web/CSS/Syntax +--- +
{{cssref}}
+ +

L'objectiu bàsic del llenguatge de la Fulla d'Estil en Cascada (CSS) és permetre que un motor del navegador pinti elements de la pàgina amb característiques específiques, com ara colors, posicionament o decoracions. La sintaxi CSS reflecteix aquest objectiu i els seus components bàsics són:

+ +
    +
  • La propietat és un identificador, és un nom legible per humans, que defineix quina característica es considera.
    • +
  • El valor descriu com el motor ha de manejar la característica. Cada propietat té un conjunt de valors vàlids, definits per una gramàtica formal, així com un significat semàntic, implementat pel motor del navegador.
    • +
+ +

Declaracions CSS

+ +

Establir propietats CSS a valors específics és la funció principal del llenguatge CSS. Un parell de propietats i valors s'anomena declaració, i qualsevol motor CSS calcula quines declaracions s'apliquen a cada element d'una pàgina per tal d'establir-la de forma adequada i definir-la.

+ +

Les dues propietats i els valors no són sensibles a majúscules i minúscules de manera predeterminada a CSS. El parell està separat per dos punts, ':' (U + 003A COLON), i els espais en blanc abans, entre i després de les propietats i valors, però no necessàriament a l'interior, s'ignoren.

+ +

css syntax - declaration.png

+ +

Hi ha més de 100 propiertats diferents en CSS i un nombre gairebé infinit de valors diferents. No es permeten tots els parells de propietats i valors i cada propietat defineix quins són els valors vàlids. Quan un valor no és vàlid per a una propietat determinada, la declaració es considera invàlida i és totalment ignorada per el motor CSS .

+ +

Blocs de declaracions CSS

+ +

Les declaracions s'agrupen en blocs, és a dir, en una estructura delimitada per una clau d'obertura, '{' (U+007B LEFT CURLY BRACKET), i una de tancament, '}' (U+007D RIGHT CURLY BRACKET). Els blocs de vegades poden ser niats, de manera que les claus d'oberture i tancament han de coincidir.

+ +

css syntax - block.png

+ +

Aquests blocs són naturalment anomenats blocs de declaració i les declaracions dins d'elles estan separades per un punt i coma, ';' (U + 003B SEMICOLON). Un bloc de declaració pot estar buit, aixó és, que conté una declaració nul·la. Els espais en blanc al voltant de les declaracions s'ignoren. L'última declaració d'un bloc no necessita ser acabada per un punt i coma, tot i que sovint es considera un bon estil per fer-ho ja que evita oblidar-se d'afegir-lo quan s'estén el bloc amb una altra declaració.

+ +

css syntax - declarations block.png

+ +
El contingut d'un bloc de declaració CSS, és una llista de declaracions separades per punt i coma, sense les claus inicials i de tancament, es pot incloure dins d'un atribut d'estil.
+ +

Regles de CSS

+ +

Si les fulles d'estil només poguessin aplicar una declaració a cada element d'una pàgina web, serien bastant inútils. L'objectiu real és aplicar diferents declaracions a diferents parts del document.

+ +

CSS ho permet associant condicions amb blocs de declaracions. Cada bloc de declaració (vàlid) està precedit d'un o més selectors que són condicions que seleccionen alguns elements de la pàgina. El bloc de declaracions d'un grup de parells de selectors s'anomena un conjunt de regles (ruleset), o sovint només una regla (rule).

+ +

css syntax - ruleset.png

+ +

Com que un element de la pàgina pot coincidir amb diversos selectors i, per tant, amb diverses regles que poden incloure una propietat determinada en diverses ocasions, amb valors diferents, l'estàndard CSS defineix quina té prioritat sobre l'altra i s'ha d'aplicar: això s'anomena algorisme en cascade.

+ +
És important notar que fins i tot si un conjunt de regles caracteritzat per un grup de selectors és una espècie d'abreviatura que reemplaça els conjunts de regles amb un sol selector cadascun, això no s'aplica a la validesa del conjunt de regles en si.
+
+Això dóna lloc a una conseqüència important: si un únic selector bàsic no és vàlid, com quan s'utilitza un pseudo-element o pseudo-classe desconegut, el selector sencer és invàlid i per tant s'ignora tota la regla (no és vàlida).
+ +

Sentències CSS

+ +

Els conjunts de regles són els blocs principals de construcció d'una fulla d'estil, que sovint només consisteixen en una gran llista d'elles. Però hi ha una altra informació que un autor web vol transmetre en la fulla d'estil, com el joc de caràcters, altres fulles d'estil externes per importar, descripcions de tipus de fonts o comptadors de llistes i molts més. Utilitzarà altres tipus específics de declaracions per fer-ho.

+ +

Una declaració és un bloc de construcció que comença amb qualsevol caràcter que no sigui l'espai i que finalitza en la primera clau de tancament o punt i coma (fora d'una cadena, no escapada i no s'inclou en un altre parell de {}, () o []).

+ +

css syntax - statements Venn diag.png

+ +

Hi ha dos tipus de declaracions:

+ +
    +
  • Conjunt de regles (Rulesets) (o regles) que, com es veu, associen una col·lecció de declaracions CSS a una condició descrita per un selector.
    • +
  • Regles-At (At-rules) comencen amb un signe, '@' (U+0040 COMMERCIAL AT), seguit d'un identificador i, després continuen fins al final de la sentència, és a dir fins al següent punt i coma (;) fora d'un bloc o al final del bloc següent. Cada tipus de regles-at, definides per l'identificador, poden tenir la seva pròpia sintaxi interna, i la semàntica per descomptat. S'utilitzen per transmetre informació de metadades (com {{cssxref("@charset")}} o {{cssxref("@import")}}), informació condicional (com {{cssxref("@media")}} o {{cssxref("@document")}}), o informació descriptiva (com {{cssxref("@font-face")}}).
    • +
+ +

Qualsevol declaració que no sigui un conjunt de regles (ruleset) o una at-rule no és vàlida i és ignorada.

+ +

Hi ha un altre grup de declaracions – les declaracions niades. Aquestes són declaracions que es poden utilitzar en un subconjunt específic de regles-at – les regles de grup condicional. Aquestes declaracions només s'apliquen si es compleix una condició específica: el contingut de la regla-at @media només s'aplica si el dispositiu en què el navegador s'executa coincideix amb la condició expressada; el contingut de la regla-at @document només s'aplica si la pàgina actual coincideix amb algunes condicions, i així successivament. En CSS1 i CSS2.1, només es podien utilitzar conjunts de regles dins de les regles de grup condicional. Això va ser molt restrictiu i aquesta restricció es va aixecar en CSS Conditionals Level 3. Ara, tot i que encara és experimental i no és compatible amb tots els navegadors, les regles de grup condicional poden contenir un rang de contingut més ampli: però també alguns conjunts de regles, però no totes les regles-at.

+ +

Vegeu també

+ +
    +
  • {{ CSS_key_concepts()}}
    • +
diff --git a/files/ca/web/css/type_selectors/index.html b/files/ca/web/css/type_selectors/index.html new file mode 100644 index 0000000000..d87b102ac3 --- /dev/null +++ b/files/ca/web/css/type_selectors/index.html @@ -0,0 +1,135 @@ +--- +title: Selector Type +slug: Web/CSS/Selectors_de_Tipus +tags: + - CSS + - HTML + - NeedsMobileBrowserCompatibility + - Node + - Reference + - Selectors +translation_of: Web/CSS/Type_selectors +--- +
{{CSSRef}}
+ +

El selector type CSS coincideix amb elements per nom del node. En altres paraules, selecciona tots els elements del tipus donat dins d'un document.

+ +
/* Tots els elements <a>. */
+a {
+  color: purple;
+}
+ +

Sintaxi

+ +
element { style properties }
+
+ +

Exemple

+ +

CSS

+ +
span {
+  background-color: skyblue;
+}
+
+ +

HTML

+ +
<span>Here's a span with some text.</span>
+<p>Here's a p with some text.</p>
+<span>Here's a span with more text.</span>
+
+ +

Resultat

+ +

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

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS4 Selectors', '#type-selectors', 'Type (tag name) selector')}}{{Spec2('CSS4 Selectors')}}Sense canvis
{{SpecName('CSS3 Selectors', '#type-selectors', 'type selectors')}}{{Spec2('CSS3 Selectors')}}Sense canvis
{{SpecName('CSS2.1', 'selector.html#type-selectors', 'type selectors')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#basic-concepts', 'type selectors')}}{{Spec2('CSS1')}}Definició inicial
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/ca/web/css/universal_selectors/index.html b/files/ca/web/css/universal_selectors/index.html new file mode 100644 index 0000000000..6aa7931ef9 --- /dev/null +++ b/files/ca/web/css/universal_selectors/index.html @@ -0,0 +1,176 @@ +--- +title: Selector Universal +slug: Web/CSS/Selectors_Universal +tags: + - CSS + - NeedsBrowserCompatibility + - NeedsMobileBrowserCompatibility + - Reference + - Selectors +translation_of: Web/CSS/Universal_selectors +--- +
{{CSSRef}}
+ +

El selector universal CSS (*) coincideix amb elements de qualsevol tipus.

+ +
/* Selecciona tots els elements */
+* {
+  color: green;
+}
+ +

A partir de CSS3, l'asterisc pot ser usat en combinació amb {{cssxref("CSS_Namespaces", "namespaces")}}:

+ +
    +
  • ns|* - coincideix amb tots els elements de l'espai de noms  ns
    • +
  • *|* - coincideix amb tots els elements
    • +
  • |* - coincideix amb tots els elements sense cap espai de noms declarat
    • +
+ +

Sintaxi

+ +
* { style properties }
+ +

L'asterisc és opcional amb selectors simples . Per exemple , *.warning i .warning són equivalents.

+ +

Exemples

+ +

CSS

+ +
* [lang^=en] {
+  color: green;
+}
+
+*.warning {
+  color: red;
+}
+
+*#maincontent {
+  border: 1px solid blue;
+}
+
+.floating {
+  float: left
+}
+
+/* automatically clear the next sibling after a floating element */
+.floating + * {
+  clear: left;
+}
+
+ +

HTML

+ +
<p class="warning">
+  <span lang="en-us">A green span</span> in a red paragraph.</span>
+</p>
+<p id="maincontent" lang="en-gb">
+  <span class="warning">A red span</span> in a green paragraph.</span>
+</p>
+ +

Resultat

+ +

{{EmbedLiveSample('Examples')}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS4 Selectors', '#the-universal-selector', 'universal selector')}}{{Spec2('CSS4 Selectors')}}Sense canvis
{{SpecName('CSS3 Selectors', '#universal-selector', 'universal selector')}}{{Spec2('CSS3 Selectors')}}Defineix el comportament pel que fa als espais de noms i afegeix suggeriments que permeten ometre el selector dins de pseudo-elements
{{SpecName('CSS2.1', 'selector.html#universal-selector', 'universal selector')}}{{Spec2('CSS2.1')}}Definició inicial
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1")}}7{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Combinació amb suport d'espai de noms{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1")}}981.3
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Combinació amb suport d'espai de noms{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/ca/web/guide/ajax/getting_started/index.html b/files/ca/web/guide/ajax/getting_started/index.html new file mode 100644 index 0000000000..ea59270ae8 --- /dev/null +++ b/files/ca/web/guide/ajax/getting_started/index.html @@ -0,0 +1,192 @@ +--- +title: Primers passos +slug: Web/Guide/AJAX/Primers_passos +tags: + - AJAX + - Totes_les_categories +translation_of: Web/Guide/AJAX/Getting_Started +--- +

+Aquest article us guiarà a través dels principis bàsics d'AJAX i amb dos pràctics exemples per a anar per feina. +

+

Què és l'AJAX?

+

El JavaScript asincrònic i XML, (Asynchronous JavaScript and XML, AJAX, en anglès) és un neologisme per a dues potents característiques de navegació que fa anys que existeixen, però que han estat ignorades per molts desenvolupadors web fins a la recent arribada d'aplicacions com Gmail, Google suggest o Google Maps. +

Les dues característiques en qüestió són poder: +

+
  • Fer sol·licituds al vostre servidor sense haver d'actualitzar la pàgina +
  • Analitzar i treballar amb documents XML +
+

Primer pas – Com fer una sol·licitud HTTP

+

Per a fer una sol·licitud HTTP (HTTP request) al servidor fent servir JavaScript, us cal una instància d'una classe que us en proporcioni la funcionalitat. Aquest tipus de classe va introduir-se originalment a l'Internet Explorer com a objecte ActiveX, anomenant-se XMLHTTP. Més endavant, Mozilla i Safari implementaren una classe, XMLHttpRequest, que funciona amb els mètodes i propietats de l'objecte original ActiveX de Microsoft. +

Com a resultat, per a crear una instància (objecte) de la classe perquè funcioni a tots els navegadors, heu de fer: +

+
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
+    sol·licitud_HTTP = new XMLHttpRequest();
+} else if (window.ActiveXObject) { // IE
+    sol·licitud_HTTP = new ActiveXObject("Microsoft.XMLHTTP");
+}
+
+

(L'exemple anterior és una versió simplificada il·lustrativa del codi que s'utilitza per a crear una instància XMLHTTP. Per a un exemple del dia a dia, consulteu el tercer pas d'aquest article.) +

Algunes versions dels navegadors Mozilla no funcionaran correctament si la resposta del servidor no té una capçalera MIME XML. Per a satisfer aquesta exigència, podeu utilitzar una crida d'un mètode extra per a ignorar la capçalera que pogués enviar el servidor, si aquesta no fos text/xml. +

+
sol·licitud_HTTP = new XMLHttpRequest();
+sol·licitud_HTTP.overrideMimeType('text/xml');
+
+

Tot seguit, cal decidir què voleu fer després de rebre la resposta del servidor a la vostra sol·licitud. En aquest estadi, només cal que especifiqueu a l'objecte de sol·licitud HTTP quina funció de JavaScript processarà la resposta. +Això es fa definint la propietat onreadystatechange de l'objecte per al nom de la funció de JavaScript que penseu fer sevir, tal com es mostra a continuació: +

sol·licitud_HTTP.onreadystatechange = nom_de_la_funció; +

Tingueu en compte que no hi ha parèntesis després del nom de la funció i no es passa cap paràmetre. A més, en comptes de donar un nom de funció, podeu utilitzar la tècnica de JavaScript de definir funcions al vol i les accions que en processaran la resposta, tal com es mostra a continuació:

+
sol·licitud_HTTP.onreadystatechange = function(){
+    // fes el que calgui
+};
+
+

Després d'haver declarat allò que passarà després de rebre la resposta, cal fer-ne la sol·licitud. Heu de cridar els mètodes open() i send() de la classe de sol·licitud HTTP, tal com es mostra a continuació: +

+
sol·licitud_HTTP.open('GET', 'http://www.exemple.org/algun.fitxer', true);
+sol·licitud_HTTP.send(null);
+
+
  • El primer paràmetre de la crida a open() és el mètode de sol·licitud HTTP – GET, POST, HEAD o qualsevol altre mètode que ja vulgueu utilitzar i funcioni al vostre servidor. Escriviu-lo en majúscules atès que és un estàndard de l'HTTP; per altra banda, alguns navegadors (com el Firefox) podrien no processar la sol·licitud. Per a més informació dels mètodes de sol·licitud HTTP, podeu consultar les especificacions W3C
  • El segon paràmetre és l'URL de la pàgina que esteu sol·licitant. Com a mesura de seguretat, no podeu cridar a pàgines en dominis de tercers. Assegureu-vos que utilitzeu el nom de domini exacte en totes les vostres pàgines o tindreu un error de «permís denegat» quan crideu a open(). Una trampa comuna és accedir al vostre lloc web amb domini.tld, però intentar cridar les pàgines amb www.domini.tld. +
  • El tercer paràmetre defineix si la sol·licitud és asincrònica. Si és així, TRUE, l'execució de la funció de JavaScript continuarà mentre la resposta del servidor no hagi arribat. Aquesta és l'A d'AJAX. +
+

El paràmetre al mètode send() pot ser qualsevol dada que vulgueu enviar al servidor si s'envia la sol·licitud amb POST. Les dades cal que siguin de la forma d'una cadena de consulta com aquesta: +

nom=valor&un_altre_nom=un_altre_valor&i_així=anar_fent +

Tingueu en compte que si voleu enviar dades amb POST, heu de canviar el tipus MIME de la sol·licitud utilitzant la següent línia: +

+
sol·licitud_HTTP.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+
+

Si no ho feu així, el servidor rebutjarà les dades que hi hàgiu enviat. +

+

Segon pas – Gestionar la resposta del servidor

+

Recordeu que quan envieu la sol·licitud, també proporcioneu el nom de la funció JavaScript destinada a gestionar-ne la resposta. +

sol·licitud_HTTP.onreadystatechange = nom_de_la_funció; +

Observem què hauria de fer aquesta funció. Primer, cal que comprovi l'estat de la sol·licitud. Si aquesta té el valor 4, vol dir que s'ha rebut una resposta total del servidor i podeu continuar processant-la.

+
if (sol·licitud_HTTP.readyState == 4) {
+    // tot va bé, s'ha rebut la resposta
+} else {
+    // encara no està preparada
+}
+
+

La llista sencera de valors d'estat, readyState, és la següent: +

+
  • 0 (sense inicialitzar) +
  • 1 (s'està carregant) +
  • 2 (carregat) +
  • 3 (interactiu) +
  • 4 (complerta) +
+

(Font) +

A continuació, cal que comproveu el codi d'estat de la resposta de servidor HTTP. Tots els codis possible es llisten al lloc del W3C. Per als nostres objectius, només ens interessa la resposta 200 OK. +

+
if (sol·licitud_HTTP.status == 200) {
+    // perfecte!
+} else {
+    // hi ha hagut algun problema amb la sol·licitud
+    // per exemple, la resposta podria ser uns codis de resposta
+    // 404 (Not Found) o 500 (Internal Server Error)
+}
+
+

Després d'haver comprovat l'estat de la sol·licitud i el codi d'estat HTTP de la resposta, heu de decidir què voleu fer amb les dades que el servidor us ha enviat. Teniu dues opcions per a accedir a les dades: +

+
  • sol·licitud_HTTP.responseText – retornarà la resposta del servidor com una cadena de text. +
  • sol·licitud_HTTP.responseXML – retornarà la resposta com un objecte document XML, XMLDocument, que podeu recórrer utilitzant les funcions DOM de JavaScript. +
+

Tercer pas – Un exemple simple

+

Posem-ho tot junt i fem una sol·licitud HTTP simple. El nostre codi JavaScript sol·licitarà un document HTML, prova.html, que conté el text «Açò és un text.» i llavors notificarà, alert(), els continguts del fitxer prova.html. +

+
<script type="text/javascript" language="javascript">
+
+
+
+    function fes_sol·licitud(url) {
+
+        var sol·licitud_HTTP = false;
+
+        if (window.XMLHttpRequest) { // Mozilla, Safari,...
+            sol·licitud_HTTP = new XMLHttpRequest();
+            if (sol·licitud_HTTP.overrideMimeType) {
+                sol·licitud_HTTP.overrideMimeType('text/xml');
+                // Vegeu la nota a sota
+            }
+        } else if (window.ActiveXObject) { // IE
+            try {
+                sol·licitud_HTTP = new ActiveXObject("Msxml2.XMLHTTP");
+            } catch (e) {
+                try {
+                    sol·licitud_HTTP = new ActiveXObject("Microsoft.XMLHTTP");
+                } catch (e) {}
+            }
+        }
+
+        if (!sol·licitud_HTTP) {
+            alert('S\'abandona :( No es pot crear una instància d'XMLHTTP');
+            return false;
+        }
+        sol·licitud_HTTP.onreadystatechange = function() { notifica_continguts(sol·licitud_HTTP); };
+        sol·licitud_HTTP.open('GET', url, true);
+        sol·licitud_HTTP.send(null);
+
+    }
+
+    function notifica_continguts(sol·licitud_HTTP) {
+
+        if (sol·licitud_HTTP.readyState == 4) {
+            if (sol·licitud_HTTP.status == 200) {
+                alert(sol·licitud_HTTP.responseText);
+            } else {
+                alert('Hi ha hagut un problema amb la sol·licitud.');
+            }
+        }
+
+    }
+</script>
+<span
+    style="cursor: pointer; text-decoration: underline"
+    onclick="fes_sol·licitud('prova.html')">
+        Fes una sol·licitud
+</span>
+
+


+En aquest exemple: +

+
  • L'usuari fa un clic a l'enllaç «Fes una sol·licitud»; +
  • Açò crida a la funció fes_sol·licitud() amb un paràmetre – el nom prova.html d'un fitxer HTML en el mateix directori; +
  • Es fa la sol·licitud i llavors (onreadystatechange) l'execució es passa a notifica_continguts(); +
  • notifica_continguts() comprova si la resposta s'ha rebut, i si és correcta, llavors alert() notifica dels continguts al fitxer prova.html. +
+

Podeu provar l'exemple ací i veure el fitxer de prova també ací. +

Nota: La línia sol·licitud_HTTP.overrideMimeType('text/xml'); anterior donarà errors a la consola de Javascript al Firefox 1.5b tal com es documenta a https://bugzilla.mozilla.org/show_bug.cgi?id=311724 si la pàgina que es crida per XMLHttpRequest no és un XML vàlid (p.ex., si és text net). +

Si obteniu un error de sintaxi (Syntax Error) o de mal format (Not Well Formed Error) en el navegador, i no esteu intentant carregar una pàgina XML per XMLHttpRequest, suprimiu aquesta línia del codi. +

Nota 2: si envieu una sol·licitud a un codi que retorni XML, en comptes d'un fitxer XML estàtic, heu d'especificar-ne algunes capçaleres de resposta si la vostra pàgina ha de funcionar amb l'Internet Explorer a més d'amb el Mozilla. Si no hi definiu la capçalera, Content-Type: application/xml, l'IE llançarà un error de Javascript 'Object Expected' després de la línia des d'on intenteu accedir a un element XML. Si no hi definiu una capçalera, Cache-Control: no-cache, el navegador emmagatzemarà a la memòria cau la resposta i no tornarà mai a trametre la sol·licitud, fent llavors que la depuració sigui tot un repte. +

Nota 3: si la variable sol·licitud_HTTP s'utilitza globalment, aquelles funcions «competidores» que cridin a fes_sol·licitud() poden anul·lar-se unes a les altres, provocant doncs una condició de cursa. En declarar sol·licitud_HTTP com una variable local a la funció i passar-la a la funció notifica_continguts() ho evita. +

Note 4: Per a registrar la funció de resposta onreadystatechange, no podeu tenir cap argument: +

+
sol·licitud_HTTP.onreadystatechange = function() { notifica_continguts(sol·licitud_HTTP); };  //1 (sol·licitud simultània)
+sol·licitud_HTTP.onreadystatechange = notifica_continguts(sol·licitud_HTTP); //2 (no funciona)
+sol·licitud_HTTP.onreadystatechange = notifica_continguts;  //3 (variable global)
+
+

El mètode 1 us permet tenir diferent sol·licituds fetes simultàniament, el 2 no funciona, i el 3 s'utilitza si sol·licitud_HTTP és una variable global. +

+

Quart pas – Treballant amb la resposta XML

+

En l'anterior exemple, després que es rebés la resposta a la sol·licitud HTTP, vam fer servir la propietat reponseText de l'objecte de sol·licitud i contenia els continguts del fitxer prova.html. Provem-ho ara amb la propietat responseXML. +

Comencem creant un document XML vàlid, que sol·licitarem més endavant. El document (prova.xml) conté el següent: +

+
<?xml version="1.0" ?>
+<root>
+    Açò és una prova.
+</root>
+
+

A la seqüència, només cal que canviar-hi la línia de sol·licitud per: +

+
...
+onclick="fes_sol·licitud('prova.xml')">
+...
+
+

Llavors a notifica_continguts() cal que reemplacem la línia amb alert() d'alert(sol·licitud_HTTP.responseText); per: +

+
var document_xml = sol·licitud_HTTP.responseXML;
+var node_arrel = document_xml.getElementsByTagName('root').item(0);
+alert(node_arrel.firstChild.data);
+
+

D'aquesta forma prenem l'objecte XMLDocument donat per responseXML i utilitzem els mètodes DOM per a accedir a algunes dades que es troben al document XML. Podeu veure-ho a prova.xml ací i la seqüència de prova actualizada ací. +

Per a més informació dels mètodes DOM, consulteu els documents de la implementació DOM de Mozilla. +

{{ languages( { "de": "de/AJAX/Getting_Started", "en": "en/AJAX/Getting_Started", "es": "es/AJAX/Primeros_Pasos", "fr": "fr/AJAX/Premiers_pas", "ja": "ja/AJAX/Getting_Started", "pl": "pl/AJAX/Na_pocz\u0105tek", "pt": "pt/AJAX/Como_come\u00e7ar" } ) }} diff --git a/files/ca/web/guide/ajax/primers_passos/index.html b/files/ca/web/guide/ajax/primers_passos/index.html deleted file mode 100644 index ea59270ae8..0000000000 --- a/files/ca/web/guide/ajax/primers_passos/index.html +++ /dev/null @@ -1,192 +0,0 @@ ---- -title: Primers passos -slug: Web/Guide/AJAX/Primers_passos -tags: - - AJAX - - Totes_les_categories -translation_of: Web/Guide/AJAX/Getting_Started ---- -

-Aquest article us guiarà a través dels principis bàsics d'AJAX i amb dos pràctics exemples per a anar per feina. -

-

Què és l'AJAX?

-

El JavaScript asincrònic i XML, (Asynchronous JavaScript and XML, AJAX, en anglès) és un neologisme per a dues potents característiques de navegació que fa anys que existeixen, però que han estat ignorades per molts desenvolupadors web fins a la recent arribada d'aplicacions com Gmail, Google suggest o Google Maps. -

Les dues característiques en qüestió són poder: -

-
  • Fer sol·licituds al vostre servidor sense haver d'actualitzar la pàgina -
  • Analitzar i treballar amb documents XML -
-

Primer pas – Com fer una sol·licitud HTTP

-

Per a fer una sol·licitud HTTP (HTTP request) al servidor fent servir JavaScript, us cal una instància d'una classe que us en proporcioni la funcionalitat. Aquest tipus de classe va introduir-se originalment a l'Internet Explorer com a objecte ActiveX, anomenant-se XMLHTTP. Més endavant, Mozilla i Safari implementaren una classe, XMLHttpRequest, que funciona amb els mètodes i propietats de l'objecte original ActiveX de Microsoft. -

Com a resultat, per a crear una instància (objecte) de la classe perquè funcioni a tots els navegadors, heu de fer: -

-
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
-    sol·licitud_HTTP = new XMLHttpRequest();
-} else if (window.ActiveXObject) { // IE
-    sol·licitud_HTTP = new ActiveXObject("Microsoft.XMLHTTP");
-}
-
-

(L'exemple anterior és una versió simplificada il·lustrativa del codi que s'utilitza per a crear una instància XMLHTTP. Per a un exemple del dia a dia, consulteu el tercer pas d'aquest article.) -

Algunes versions dels navegadors Mozilla no funcionaran correctament si la resposta del servidor no té una capçalera MIME XML. Per a satisfer aquesta exigència, podeu utilitzar una crida d'un mètode extra per a ignorar la capçalera que pogués enviar el servidor, si aquesta no fos text/xml. -

-
sol·licitud_HTTP = new XMLHttpRequest();
-sol·licitud_HTTP.overrideMimeType('text/xml');
-
-

Tot seguit, cal decidir què voleu fer després de rebre la resposta del servidor a la vostra sol·licitud. En aquest estadi, només cal que especifiqueu a l'objecte de sol·licitud HTTP quina funció de JavaScript processarà la resposta. -Això es fa definint la propietat onreadystatechange de l'objecte per al nom de la funció de JavaScript que penseu fer sevir, tal com es mostra a continuació: -

sol·licitud_HTTP.onreadystatechange = nom_de_la_funció; -

Tingueu en compte que no hi ha parèntesis després del nom de la funció i no es passa cap paràmetre. A més, en comptes de donar un nom de funció, podeu utilitzar la tècnica de JavaScript de definir funcions al vol i les accions que en processaran la resposta, tal com es mostra a continuació:

-
sol·licitud_HTTP.onreadystatechange = function(){
-    // fes el que calgui
-};
-
-

Després d'haver declarat allò que passarà després de rebre la resposta, cal fer-ne la sol·licitud. Heu de cridar els mètodes open() i send() de la classe de sol·licitud HTTP, tal com es mostra a continuació: -

-
sol·licitud_HTTP.open('GET', 'http://www.exemple.org/algun.fitxer', true);
-sol·licitud_HTTP.send(null);
-
-
  • El primer paràmetre de la crida a open() és el mètode de sol·licitud HTTP – GET, POST, HEAD o qualsevol altre mètode que ja vulgueu utilitzar i funcioni al vostre servidor. Escriviu-lo en majúscules atès que és un estàndard de l'HTTP; per altra banda, alguns navegadors (com el Firefox) podrien no processar la sol·licitud. Per a més informació dels mètodes de sol·licitud HTTP, podeu consultar les especificacions W3C
  • El segon paràmetre és l'URL de la pàgina que esteu sol·licitant. Com a mesura de seguretat, no podeu cridar a pàgines en dominis de tercers. Assegureu-vos que utilitzeu el nom de domini exacte en totes les vostres pàgines o tindreu un error de «permís denegat» quan crideu a open(). Una trampa comuna és accedir al vostre lloc web amb domini.tld, però intentar cridar les pàgines amb www.domini.tld. -
  • El tercer paràmetre defineix si la sol·licitud és asincrònica. Si és així, TRUE, l'execució de la funció de JavaScript continuarà mentre la resposta del servidor no hagi arribat. Aquesta és l'A d'AJAX. -
-

El paràmetre al mètode send() pot ser qualsevol dada que vulgueu enviar al servidor si s'envia la sol·licitud amb POST. Les dades cal que siguin de la forma d'una cadena de consulta com aquesta: -

nom=valor&un_altre_nom=un_altre_valor&i_així=anar_fent -

Tingueu en compte que si voleu enviar dades amb POST, heu de canviar el tipus MIME de la sol·licitud utilitzant la següent línia: -

-
sol·licitud_HTTP.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
-
-

Si no ho feu així, el servidor rebutjarà les dades que hi hàgiu enviat. -

-

Segon pas – Gestionar la resposta del servidor

-

Recordeu que quan envieu la sol·licitud, també proporcioneu el nom de la funció JavaScript destinada a gestionar-ne la resposta. -

sol·licitud_HTTP.onreadystatechange = nom_de_la_funció; -

Observem què hauria de fer aquesta funció. Primer, cal que comprovi l'estat de la sol·licitud. Si aquesta té el valor 4, vol dir que s'ha rebut una resposta total del servidor i podeu continuar processant-la.

-
if (sol·licitud_HTTP.readyState == 4) {
-    // tot va bé, s'ha rebut la resposta
-} else {
-    // encara no està preparada
-}
-
-

La llista sencera de valors d'estat, readyState, és la següent: -

-
  • 0 (sense inicialitzar) -
  • 1 (s'està carregant) -
  • 2 (carregat) -
  • 3 (interactiu) -
  • 4 (complerta) -
-

(Font) -

A continuació, cal que comproveu el codi d'estat de la resposta de servidor HTTP. Tots els codis possible es llisten al lloc del W3C. Per als nostres objectius, només ens interessa la resposta 200 OK. -

-
if (sol·licitud_HTTP.status == 200) {
-    // perfecte!
-} else {
-    // hi ha hagut algun problema amb la sol·licitud
-    // per exemple, la resposta podria ser uns codis de resposta
-    // 404 (Not Found) o 500 (Internal Server Error)
-}
-
-

Després d'haver comprovat l'estat de la sol·licitud i el codi d'estat HTTP de la resposta, heu de decidir què voleu fer amb les dades que el servidor us ha enviat. Teniu dues opcions per a accedir a les dades: -

-
  • sol·licitud_HTTP.responseText – retornarà la resposta del servidor com una cadena de text. -
  • sol·licitud_HTTP.responseXML – retornarà la resposta com un objecte document XML, XMLDocument, que podeu recórrer utilitzant les funcions DOM de JavaScript. -
-

Tercer pas – Un exemple simple

-

Posem-ho tot junt i fem una sol·licitud HTTP simple. El nostre codi JavaScript sol·licitarà un document HTML, prova.html, que conté el text «Açò és un text.» i llavors notificarà, alert(), els continguts del fitxer prova.html. -

-
<script type="text/javascript" language="javascript">
-
-
-
-    function fes_sol·licitud(url) {
-
-        var sol·licitud_HTTP = false;
-
-        if (window.XMLHttpRequest) { // Mozilla, Safari,...
-            sol·licitud_HTTP = new XMLHttpRequest();
-            if (sol·licitud_HTTP.overrideMimeType) {
-                sol·licitud_HTTP.overrideMimeType('text/xml');
-                // Vegeu la nota a sota
-            }
-        } else if (window.ActiveXObject) { // IE
-            try {
-                sol·licitud_HTTP = new ActiveXObject("Msxml2.XMLHTTP");
-            } catch (e) {
-                try {
-                    sol·licitud_HTTP = new ActiveXObject("Microsoft.XMLHTTP");
-                } catch (e) {}
-            }
-        }
-
-        if (!sol·licitud_HTTP) {
-            alert('S\'abandona :( No es pot crear una instància d'XMLHTTP');
-            return false;
-        }
-        sol·licitud_HTTP.onreadystatechange = function() { notifica_continguts(sol·licitud_HTTP); };
-        sol·licitud_HTTP.open('GET', url, true);
-        sol·licitud_HTTP.send(null);
-
-    }
-
-    function notifica_continguts(sol·licitud_HTTP) {
-
-        if (sol·licitud_HTTP.readyState == 4) {
-            if (sol·licitud_HTTP.status == 200) {
-                alert(sol·licitud_HTTP.responseText);
-            } else {
-                alert('Hi ha hagut un problema amb la sol·licitud.');
-            }
-        }
-
-    }
-</script>
-<span
-    style="cursor: pointer; text-decoration: underline"
-    onclick="fes_sol·licitud('prova.html')">
-        Fes una sol·licitud
-</span>
-
-


-En aquest exemple: -

-
  • L'usuari fa un clic a l'enllaç «Fes una sol·licitud»; -
  • Açò crida a la funció fes_sol·licitud() amb un paràmetre – el nom prova.html d'un fitxer HTML en el mateix directori; -
  • Es fa la sol·licitud i llavors (onreadystatechange) l'execució es passa a notifica_continguts(); -
  • notifica_continguts() comprova si la resposta s'ha rebut, i si és correcta, llavors alert() notifica dels continguts al fitxer prova.html. -
-

Podeu provar l'exemple ací i veure el fitxer de prova també ací. -

Nota: La línia sol·licitud_HTTP.overrideMimeType('text/xml'); anterior donarà errors a la consola de Javascript al Firefox 1.5b tal com es documenta a https://bugzilla.mozilla.org/show_bug.cgi?id=311724 si la pàgina que es crida per XMLHttpRequest no és un XML vàlid (p.ex., si és text net). -

Si obteniu un error de sintaxi (Syntax Error) o de mal format (Not Well Formed Error) en el navegador, i no esteu intentant carregar una pàgina XML per XMLHttpRequest, suprimiu aquesta línia del codi. -

Nota 2: si envieu una sol·licitud a un codi que retorni XML, en comptes d'un fitxer XML estàtic, heu d'especificar-ne algunes capçaleres de resposta si la vostra pàgina ha de funcionar amb l'Internet Explorer a més d'amb el Mozilla. Si no hi definiu la capçalera, Content-Type: application/xml, l'IE llançarà un error de Javascript 'Object Expected' després de la línia des d'on intenteu accedir a un element XML. Si no hi definiu una capçalera, Cache-Control: no-cache, el navegador emmagatzemarà a la memòria cau la resposta i no tornarà mai a trametre la sol·licitud, fent llavors que la depuració sigui tot un repte. -

Nota 3: si la variable sol·licitud_HTTP s'utilitza globalment, aquelles funcions «competidores» que cridin a fes_sol·licitud() poden anul·lar-se unes a les altres, provocant doncs una condició de cursa. En declarar sol·licitud_HTTP com una variable local a la funció i passar-la a la funció notifica_continguts() ho evita. -

Note 4: Per a registrar la funció de resposta onreadystatechange, no podeu tenir cap argument: -

-
sol·licitud_HTTP.onreadystatechange = function() { notifica_continguts(sol·licitud_HTTP); };  //1 (sol·licitud simultània)
-sol·licitud_HTTP.onreadystatechange = notifica_continguts(sol·licitud_HTTP); //2 (no funciona)
-sol·licitud_HTTP.onreadystatechange = notifica_continguts;  //3 (variable global)
-
-

El mètode 1 us permet tenir diferent sol·licituds fetes simultàniament, el 2 no funciona, i el 3 s'utilitza si sol·licitud_HTTP és una variable global. -

-

Quart pas – Treballant amb la resposta XML

-

En l'anterior exemple, després que es rebés la resposta a la sol·licitud HTTP, vam fer servir la propietat reponseText de l'objecte de sol·licitud i contenia els continguts del fitxer prova.html. Provem-ho ara amb la propietat responseXML. -

Comencem creant un document XML vàlid, que sol·licitarem més endavant. El document (prova.xml) conté el següent: -

-
<?xml version="1.0" ?>
-<root>
-    Açò és una prova.
-</root>
-
-

A la seqüència, només cal que canviar-hi la línia de sol·licitud per: -

-
...
-onclick="fes_sol·licitud('prova.xml')">
-...
-
-

Llavors a notifica_continguts() cal que reemplacem la línia amb alert() d'alert(sol·licitud_HTTP.responseText); per: -

-
var document_xml = sol·licitud_HTTP.responseXML;
-var node_arrel = document_xml.getElementsByTagName('root').item(0);
-alert(node_arrel.firstChild.data);
-
-

D'aquesta forma prenem l'objecte XMLDocument donat per responseXML i utilitzem els mètodes DOM per a accedir a algunes dades que es troben al document XML. Podeu veure-ho a prova.xml ací i la seqüència de prova actualizada ací. -

Per a més informació dels mètodes DOM, consulteu els documents de la implementació DOM de Mozilla. -

{{ languages( { "de": "de/AJAX/Getting_Started", "en": "en/AJAX/Getting_Started", "es": "es/AJAX/Primeros_Pasos", "fr": "fr/AJAX/Premiers_pas", "ja": "ja/AJAX/Getting_Started", "pl": "pl/AJAX/Na_pocz\u0105tek", "pt": "pt/AJAX/Como_come\u00e7ar" } ) }} diff --git a/files/ca/web/guide/css/inici_en_css/caixes/index.html b/files/ca/web/guide/css/inici_en_css/caixes/index.html deleted file mode 100644 index 39d411bb19..0000000000 --- a/files/ca/web/guide/css/inici_en_css/caixes/index.html +++ /dev/null @@ -1,342 +0,0 @@ ---- -title: Caixes -slug: Web/Guide/CSS/Inici_en_CSS/Caixes -tags: - - Basic - - Beginner - - CSS - - CSS Borders - - CSS Margin - - CSS Padding - - 'CSS:Getting_Started' - - NeedsBeginnerUpdate - - NeedsUpdate - - Web -translation_of: Learn/CSS/Building_blocks -translation_of_original: Web/Guide/CSS/Getting_started/Boxes ---- -

{{ CSSTutorialTOC() }}

- -

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Lists", "Llistes") }}Aquesta és la 11th secció del tutorial CSS Getting Started descriu com podeu utilitzar CSS per controlar l'espai que ocupa un element quan es mostra. En el document d'exemple, canviareu l'espaiat i afegireu regles decoratives.

- -

Informació: Caixes

- -

Quan el navegador mostra un element, l'element ocupa espai. Hi ha quatre parts en l'espai que ocupa.

- -

Al mig, és l'espai que l'element necessita per mostrar el seu contingut. Al voltant d'això, hi ha un padding (farciment). Al voltant d'això, hi ha un border (vora). Al voltant d'això, hi ha un margin (marge) que separa l'element d'altres elements.

- - - - - - - - -
-
-

margin (marge)

- -

border (vora)

- -
-

padding (farciment)

- -
-

element

-
-
-
- -

El gris pàl·lid mostra parts de la disposició.

- 		-
-

 

- -

 

- -
-

 

- -
-

element

-
-
-
- -

Això és el que es veu en el vostre navegador.

-
- -

El farcit, vora i marge poden tenir diferents mides en la part superior, dret, inferior i esquerra de l'element. Qualsevol o totes aquestes mides poden ser zero.

- -

Acolorir

- -

El farcit és sempre del mateix color que el fons de l'element. Així que quan s'estableix el color de fons, es veu el color aplicat a l'element en si i el seu farcit. El marge és sempre transparent.

- - - - - - - - -
-
-

margin

- -

border

- -
-

padding

- -
-

element

-
-
-
- -

L'element té un fons verd.

- 		-
-

 

- -

 

- -
-

 

- -
-

element

-
-
-
- -

Això és el que es veu en el vostre navegador.

-
- -

Vores

- -

Podeu utilitzar les vores per decorar elements amb línies o caixes.

- -

Per especificar la mateixa vora a tot al voltant d'un element, utilitzeu la propietat {{ cssxref("border") }}. Especificar l'ample (en píxels en general per a la seva visualització en una pantalla), l'estil i el color.

- -

Els estils són:

- - - - - - - - - - - - - - - - -
-
solid
- 		-
dotted
- 		-
dashed
- 		-
double
-
-
inset
- 		-
outset
- 		-
ridge
- 		-
groove
-
- -

També podeu establir l'estil a none o hidden per eliminar de forma explícita la vora, o establir el color a transparent per fer la vora invisible sense canviar el disseny.

- -

Especificar vores a un costat alhora, utilitzeu les propietats: {{ cssxref("border-top") }}, {{ cssxref("border-right") }}, {{cssxref("border-bottom")}}, {{cssxref("border-left")}}. Podeu utilitzar aquests per especificar una vora en un sol costat, o diferentes vores en diferents costats.

- -
-
Exemple
- -

Aquesta regla estableix el color de fons i la vora de la part superior dels elements d'encapçalament:

- -
h3 {
-  border-top: 4px solid #7c7; /* mid green */
-  background-color: #efe;     /* pale green */
-  color: #050;                /* dark green */
-  }
-
- -

El resultat és el següent:

- - - - - - - -
-

Stylish heading

-
- -

Aquesta regla fa que les imatges siguin més fàcils de veure, donant-los una vora gris mig en tot:

- -
img {border: 2px solid #ccc;}
-
- -

El resultat és el següent:

- - - - - - - - -
Imatge:Image:Blue-rule.png
-
- -

Marges i farciment

- -

Utilitzeu marges i farciment per ajustar les posicions dels elements i crear l'espai que els envolta.

- -

Utilitzeu la propietat {{ cssxref("margin") }} o la propietat {{ cssxref("padding") }} per establir els amples dels marges o de farciment, respectivament.

- -

Si s'especifica una amplada, s'aplica al voltant de tot l'element (a dalt, dreta, a sota i a l'esquerra).

- -

Si s'especifica dos amples, la primera s'aplica a la part superior i inferior, la segona a la dreta i l'esquerra.

- -

Podeu definir els quatre amplades en l'ordre: dalt, dreta, a sota, a l'esquerra.

- -
-
Exemple
- -

Aquesta regla distingeix els paràgrafs amb la classe remark, donant-los una vora vermella al seu voltant.

- -

El farciment al seu voltant separa la vora del text una mica.

- -

Un marge esquerre sagna el paràgraf en relació amb la resta del text:

- -
p.remark {
-  border: 2px solid red;
-  padding: 4px;
-  margin-left: 24px;
-  }
-
- -

El resultat és el següent:

- - - - - - - -
-

Here is a normal paragraph.

- -

Here is a remark.

-
-
- -
-
Més detalls
- -

Quan s'utilitzan marges i farcit per ajustar la forma en què els elements es disposen, les seves regles d'estil interactuen amb els valors per defecte del navegador en formes que poden ser complexes.

- -

Els diferents navegadors posen elements de manera diferent. Els resultats podrien ser similar fins que la vostre fulla d'estil canvia les coses. A vegades això pot fer que les vostres fulles d'estil donin resultats sorprenents.

- -

Per obtenir el resultat desitjat, és possible que hàgiu de canviar el marcat del document. La pàgina següent d'aquest tutorial teniu més informació sobre això.

- -

Per a més informació sobre el farciment, marges i vores, vegeu la pàgina de referència Model de caixa.

-
- -

Acció: Afegir vores

- -

Editeu l'arxiu CSS, style2.css. Afegiu aquesta regla per dibuixar una línia a través de la pàgina sobre cada capçalera:

- -
h3 {border-top: 1px solid gray;}
-
- -

Si vau prendre el repte de l'última pàgina, modifiqueu la regla que heu creat, en cas contrari afegiu aquesta nova regla, la d'afegir un espai sota cada element de la llista:

- -
li {
-  list-style: lower-roman;
-  margin-bottom: 8px;
-  }
-
- -

Actualitzeu el navegador per veure el resultat:

- - - - - - - -
-

(A) The oceans

- -
    -
  • Arctic
    • -
  • Atlantic
    • -
  • Pacific
    • -
  • Indian
    • -
  • Southern
    • -
- -

(B) Numbered paragraphs

- -

1: Lorem ipsum

- -

2: Dolor sit

- -

3: Amet consectetuer

- -

4: Magna aliquam

- -

5: Autem veleum

-
- -
-
Repte
- -

Afegiu una regla a la fulla d'estils, fent una vora àmpla al voltant dels oceans en un color que recordi al mar, alguna cosa com això:

- - - - - - - -
-

(A) The oceans

- -
-
    -
  • Arctic
    • -
  • Atlantic
    • -
  • Pacific
    • -
  • Indian
    • -
  • Southern
    • -
-
- -

(B) Numbered paragraphs

- -

. . .

-
- -

 

- -

(No hi ha necessitat perquè coincideixi amb l'amplada i el color que es veu aquí exactament.)

-
- -

Veure la solució per el repte.

- -

I ara què?

- -

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Layout", "Disseny") }}En definir marges i farcit, heu modificat el disseny del document. A la pàgina següent es canvia el disseny del vostre document d'altres maneres.

diff --git "a/files/ca/web/guide/css/inici_en_css/cascada_i_her\303\250ncia/index.html" "b/files/ca/web/guide/css/inici_en_css/cascada_i_her\303\250ncia/index.html" deleted file mode 100644 index b7bf86a77f..0000000000 --- "a/files/ca/web/guide/css/inici_en_css/cascada_i_her\303\250ncia/index.html" +++ /dev/null @@ -1,151 +0,0 @@ ---- -title: Cascada i herència -slug: Web/Guide/CSS/Inici_en_CSS/Cascada_i_herència -tags: - - Beginner - - CSS - - 'CSS:Getting_Started' - - Guide - - NeedsBeginnerUpdate - - NeedsUpdate - - Web -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", "Com funciona el CSS")}}Aquesta és la quarta secció del tutorial CSS Getting Started ; descriu com els fulls d'estil interactuenen en cascada, i com els elements hereten l'estil dels seus pares. S'agrega a la vostre fulla d'estils d'exemple, utilitzant l'herència per alterar l'estil de moltes parts del document en un sol pas.

- -

Informació: Cascada i herència

- -

L'estil final per a un element es pot especificar en molts llocs diferents, que poden interactuar d'una manera complexa. Aquesta interacció complexa fa que el CSS sigui de gran abast, però també pot fer que sigui confús i difícil de depurar.

- -

Tres fonts principals d'informació d'estil formen una cascada. Aqueste son:

- -
    -
  • Estils per defecte del navegador per al llenguatge de marques.
    • -
  • Estils especificats per un usuari que està llegint el document.
    • -
  • Els estils relacionats amb el document pel seu autor. Aquests es poden especificar en tres llocs: -
      -
    • En un arxiu extern: aquest tutorial discuteix principalment aquest mètode de definició d'estils.
      • -
    • En una definició al començament del document: utilitzar aquest mètode només per als estils que s'utilitzen només en aquesta pàgina.
      • -
    • En un element específic en el cos del document: aquest és el mètode menys mantenible, però pot ser utilitzat per a les proves.
      • -
    -
    • -
- -

L'estil de l'usuari modifica l'estil per defecte del navegador. L'estil de l'autor del document modifica l'estil una mica més. En aquest tutorial, vosaltres sou l'autor del document d'exemple, i només es treballa amb fulls d'estil d'autor.

- -
-
Exemple
- -

Quan llegiu aquest document en un navegador, part de l'estil que es veu prové dels valors per defecte del navegador per HTML.

- -

Part de l'estil podria venir de la configuració del navegador a mida o un arxiu de definició d'estil personalitzat. A Firefox, la configuració es pot personalitzar en el quadre de diàleg Preferències, o es pot especificar estils en un arxiu userContent.css arxiu anomenat en el vostre perfil de navegador.

- -

Part de l'estil prové de les fulles d'estil vinculades al document per part del servidor.

-
- -

En obrir el document d'exemple en el navegador, els elements {{ HTMLElement("strong") }} destacan més que la resta del text. Això ve de l'estil per defecte del navegador per HTML.

- -

Els elements {{ HTMLElement("strong") }} són de color vermell. Això ve de la pròpia fulla d'estils d'exemple.

- -

Els elements {{ HTMLElement("strong") }} també hereten gran part de  l'estil de l'element {{HTMLElement ("p")}}, perquè són els seus fills. De la mateixa manera, l'element {{ HTMLElement("p") }} hereta gran part de l'estil de l'element {{ HTMLElement("body") }}.

- -

Per estils en cascada, els fulls d'estil d'autor tenen prioritat, a continuació els fulls d'estil del lector i seguidament els valors per defecte del navegador.

- -

Per estils heretats, l'estil propi d'un node fill té prioritat sobre l'estil heretat del seu pare.

- -

Aquestes no són les úniques prioritats que s'apliquen. Una pàgina més endavant en aquest tutorial s'explica més.

- -
-
Més detalls
- -

CSS proporciona una manera perquè el lector pugui anul·lar l'estil de l'autor del document, mitjançant l'ús de la paraula clau !important.

- -

Això vol dir que, com a autor del document, no sempre es pot predir amb exactitud el que els vostres lectors veuran.

- -

Si vols conèixer tots els detalls de cascada i herència, consulteu Assignació de valors de les propietats, Cascada i herència en l'especificació CSS.

-
- -

Acció: L'ús de l'herència

- -
    -
  1. Edita l'arxiu CSS d'exemple.
    2. -
  2. Afegir aquesta línia copiant-la i enganxant-la. Realment no importa si l'afegeixes per damunt o per sota de la línia ja existent. No obstant això, afegir-la en la part superior és el mes lògic, ja que en el document  l'element {{ HTMLElement("p") }} és el pare de l'element {{ HTMLElement("strong") }}: - 
    p {color: blue; text-decoration: underline;}
-
    -
    3. -
  3. Actualitzar el navegador per veure l'efecte en el document d'exemple. El subratllat afecta a tot el text en el paràgraf, incloent les lletres inicials. Els elements {{ HTMLElement("strong") }} han hagut d'heretar l'estil subratllat del seu pare, l'element {{ HTMLElement("p") }}.
    - -

    Però els elements {{ HTMLElement("strong") }} estan sent vermells. El color vermell correspont el seu propi estil, pel que té prioritat sobre el color blau del seu pare, l'element {{ HTMLElement("p") }}.

    -
    4. -
- -

Abans

- -

Contingut HTML

- -
<p>
-  <strong>C</strong>ascading
-  <strong>S</strong>tyle
-  <strong>S</strong>heets
-</p>
-
- -

Contingut CSS

- -
strong {color:red}
-
- -

{{ EmbedLiveSample('Before') }}

- -

Després

- -

Contingut HTML

- -
<p>
-  <strong>C</strong>ascading
-  <strong>S</strong>tyle
-  <strong>S</strong>heets
-</p>
- -

Contingut CSS

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

{{ EmbedLiveSample('After') }}

- -

 

- -
-
Repte
-Modifiqueu el full d'estils perquè només les lletres vermelles estiguin subratllades: - - - - - - - -
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
-Veure la solució per el repte.
- -

 

- -

I ara què?

- -

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors", "Selectors")}}El full d'estils d'exemple especifica els estils per a les etiquetes <p> i <strong>, modificant l'estil dels elements corresponents a tot el document. La següent secció descriu com especificar l'estil de manera més selectiva.

diff --git a/files/ca/web/guide/css/inici_en_css/color/index.html b/files/ca/web/guide/css/inici_en_css/color/index.html deleted file mode 100644 index ba607aab18..0000000000 --- a/files/ca/web/guide/css/inici_en_css/color/index.html +++ /dev/null @@ -1,354 +0,0 @@ ---- -title: Color -slug: Web/Guide/CSS/Inici_en_CSS/Color -tags: - - Beginner - - CSS - - 'CSS:Getting_Started' - - Example - - Guide - - NeedsBeginnerUpdate - - NeedsUpdate - - Web -translation_of: Learn/CSS/Introduction_to_CSS/Values_and_units#Colors -translation_of_original: Web/Guide/CSS/Getting_started/Color ---- -

{{ CSSTutorialTOC() }}

- -

{{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles", "Estils de text")}}Aquesta és la 8th secció del tutorial CSS Getting Started tutorial;explica com especificar el color en CSS. En la vostre fulla d'estil d'exemple, s'introdueix colors de fons.

- -

Informació: Color

- -

En aquest tutorial fins al moment, s'ha utilitzat un nombre limitat de colors amb nom. CSS2 suporta 17 colors amb nom en tots. Alguns dels noms pot ser que no sigui l'esperat:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 negre (black) gris (gray) plata (silver) blanc (white) 
primarisvermell (red) Llima (lime) blau (blue) 
secundarisgroc (yellow) aigua (aqua) fúcsia (fuchsia) 
 marró (maroon) taronge (orange) oliva (olive) porpra (purple) verd (green) blau marí (navy) verd blavós (teal) 
- -

 

- -
-
Detalls
- -

El vostre navegador pot suportar molts més colors amb nom, com:

- - - - - - - - - - - - - - - - -
dodgerblue peachpuff tan firebrick aquamarine 
- -

Per a més detalls d'aquesta llista ampliada, consulteu: SVG color keywords en CSS 3 mòdul de colors. Aneu amb compte d'utilitzar noms de colors que els lectors dels navegadors no siguin compatibles.

-
- -

Per a una paleta gran, especifiqueu els components vermell, verd i blau del color que desitgeu mitjançant l'ús d'un signe de nombre (hash) i tres dígits hexadecimals en el rang de 0 - 9, a - f. Les lletres a - f representen els valors de 10 - 15:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
negre (black) #000
vermell (pure red) #f00
verd (pure green) #0f0
blau (pure blue) #00f
blanc (white) #fff
- -


- Per a la paleta completa, especificar dos dígits hexadecimals per a cada component:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
negre (black) #000000
vermell (pure red) #ff0000
verd (pure green) #00ff00
blau (pure blue) #0000ff
blanc (white) #ffffff
- -

Normalment, es poden obtenir aquests codis hexadecimals de sis dígits d'un programa de gràfics o alguna altra eina.

- -
-
Exemple
- -

Amb una mica de pràctica, podeu ajustar els colors de tres dígits manualment per a la majoria de propòsits:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Comenceu amb el vermell pur : #f00
Perquè sigui més clar, afegir una mica de verd i blau : #f77
Perquè sigui més taronja, afegir una mica de verd addicional: #fa7
Per enfosquir, reduir tots els seus components: #c74
Per reduir la saturació, fer els seus components més iguals: #c98
Si feu tots ells exactament iguals, s'obté gris: #ccc
- -

Per un to pastís com el blau pàl·lid:

- - - - - - - - - - - - - - -
Comenceu amb blanc pur: #fff
Reduir els altres components una mica: #eef
-
- -
-
Més detalls
- -

També podeu especificar un color utilitzant valors decimals RGB en el rang de 0-255 o percentatges.

- -

Per exemple, aquest és de color granat (vermell fosc):

- -
rgb(128, 0, 0)
-
- -

Per a més detalls sobre com especificar els colors, consulteu: Colors en l'especificació CSS.

- -

Per obtenir informació sobre l'adequació dels colors del sistema de Menú i ThreeDFace, consulteu: Colors del Sistema en CSS2 en l'especificació CSS.

-
- -

Propietats de color

- -

Ja heu utilitzat la propietat {{ cssxref("color") }} en el text.

- -

També podeu utilitzar la propietat {{ cssxref("background-color") }} per canviar el fons dels elements.

- -

Els fons els podeu configurar com transparent per eliminar de forma explícita qualsevol color, deixant al descobert el fons de l'element pare.

- -
-
Exemple
- -

Les caixes d'exemple en aquest tutorial utilitza aquest fons de color groc pàl·lid:

- -
background-color: #fffff4;
-
- -

Les caixes de Més detalls utilitza aquest color gris pàl·lid:

- -
background-color: #f4f4f4;
-
-
- -

 

- -

Acció: L'ús dels codis de color

- -

Color de la pàgina

- -
    -
  1. Editeu l'arxiu CSS.
    2. -
  2. Feu el canvi que es mostra aquí sota, per donar a les lletres inicials d'un fons blau pàl·lid. (La disposició i comentaris a l'arxiu probablement difereixen de l'arxiu que es mostra aquí. Mantenir la disposició i els comentaris de la manera que preferiu.)
    3. -
  3. -

    Contingut HTML

    - - 
    <p id = "first"> <strong>C</strong>ascading <strong class="spinach">S</strong>tyle <strong class="spinach">S</strong>heets</p>
-<p> <strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets</p>
-
    - -

    Contingut CSS

    - - 
    /*** CSS Tutorial: Color page ***/
-
-/* page font */
-body {
-  font: 16px "Comic Sans MS", cursive;
-}
-
-/* paragraphs */
-p {
-  color: blue;
-}
-#first {
-  font-style: italic;
-}
-
-/* initial letters */
-strong {
-  background-color: #ddf;
-  color: red;
-  font: 200% serif;
-}
-
-.spinach {
-  color: green;
-  background-color: #ddf;
-}
-
-
    -
    4. -
  4. Deseu el fitxer i actualitzeu el navegador per veure el resultat.
    5. -
  5. El resultat ha de ser com aquest:
    6. -
- -

{{ EmbedLiveSample('Color_page', '', '', '', 'Web/Guide/CSS/Getting_started/Color') }}

- -
-
Repte
- -

A l'arxiu CSS, canviar els noms de colors als codis de color de 3 dígits sense afectar el resultat.

- -

Això no es pot fer exactament, però es pot aconseguir aproximadament. Per fer-ho exactament es necessita codis de 6 dígits, i cal buscar l'especificació CSS o utilitzar una eina gràfica per a que coincideixi amb els colors.

- -
-
Possible solution
- -

The following values are reasonable approximations of the named colors:

- -
strong {
-  color: #f00; /* red */
-  background-color: #ddf; /* pale blue */
-  font: 200% serif;
-}
-
-.carrot {
-  color: #fa0; /* orange */
-}
-
-.spinach {
-  color: #080; /* dark green */
-}
-
-p {
-  color: #00f; /* blue */
-}
-
- -

 

-Hide solution
-Veure la solució per el repte.
- -

I ara què?

- -

{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Content", "Contingut")}}El document d'exemple i la seva fulla d'estil d'exemple separen el contingut de l'estil de forma estricta. La següent secció explica com es pot fer excepcions a aquesta estricta separació.

diff --git a/files/ca/web/guide/css/inici_en_css/com_funciona_el_css/index.html b/files/ca/web/guide/css/inici_en_css/com_funciona_el_css/index.html deleted file mode 100644 index eb6512b8bb..0000000000 --- a/files/ca/web/guide/css/inici_en_css/com_funciona_el_css/index.html +++ /dev/null @@ -1,130 +0,0 @@ ---- -title: Com funciona el CSS -slug: Web/Guide/CSS/Inici_en_CSS/Com_funciona_el_CSS -tags: - - Beginner - - CSS - - 'CSS:Getting_Started' - - Guide - - NeedsBeginnerUpdate - - NeedsUpdate - - 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", "Per què utilitzar CSS?") }}Aquesta tercera secció del tutorial CSS Getting Started explica com funciona CSS en el navegador i el propòsit del Document Object Model (DOM). També aprendreu com analitzar el document de mostra.

- -

Informació: Com funciona el CSS

- -

Quan un navegador mostra un document, s'ha de combinar el contingut del document amb la seva informació d'estil. El document es processa en dues etapes:

- -
    -
  1. El navegador converteix el llenguatge de marcat i el CSS en el DOM (Document Object Model). El DOM representa el document a la memòria de l'ordinador. Combina el contingut del document amb el seu estil.
    2. -
  2. El navegador mostra el contingut de la DOM.
    3. -
- -

Un llenguatge de marcat utilitza elements per definir l'estructura del document. Es marca un element mitjançant etiquetes, que són cadenes que comencen amb '<' i acaban amb '>'. La majoria dels elements tenen un parell d'etiquetes, una etiqueta d'inici i una etiqueta final. Per l'etiqueta d'inici, col·locar el nom de l'element entre '<' i '>'. Per l'etiqueta final, col·locar un '/' després que el '<' i abans que el nom de l'element.

- -

Depenent del llenguatge de marques, alguns elements només tenen una etiqueta d'inici, o una sola etiqueta on el '/' ve després que el nom de l'element. Un element també pot ser un contenidor i incloure altres elements entre la seva etiqueta inicial i final. Recordeu sempre de tancar les etiquetes dins del contenidor.

- -

Un DOM té una estructura en forma d'arbre. Cada element, atribut i extensió de text, en el llenguatge de marcat, es converteix en un node en l'estructura de l'arbre. Els nodes es defineixen per la seva relació amb altres nodes DOM. Alguns elements són els pares dels nodes fills, i els nodes fills tenen germans.

- -

La comprensió del DOM ajuda a dissenyar, depurar i mantenir la CSS, pel fet que el DOM és on el CSS i el contingut del document es reuneixen.

- -
-
Exemple
- -
 
-En el vostre document d'exemple, l'etiqueta <p> i la seva etiqueta de tancament </p> creen un contenidor: - -
<p>
-  <strong>C</strong>ascading
-  <strong>S</strong>tyle
-  <strong>S</strong>heets
-</p>
-
- -

Exemple en directe

- -

{{ EmbedLiveSample('Information.3A_How_CSS_works', '', '', '', 'Web/Guide/CSS/Getting_started/How_CSS_works') }}

- -

En el DOM, el node corresponent P és un pare. Els seus fills són els nodes STRONG i els nodes de text. Els nodes STRONG són ells mateixos els pares, amb els nodes de text com els seus fills;

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

Acció: Anàlisi d'un DOM

- -

L'ús de DOM Inspector

- -

Per analitzar un DOM, es necessita un programari especial. Podeu utilitzar el complement DOM Inspector de Mozilla (DOMi) per analitzar un DOM. Només haureu de instal·lar el complement (veure més detalls a continuació).

- -
    -
  1. Utilitzeu el navegador Mozilla per obrir el document HTML d'exemple.
    2. -
  2. Des de la barra de menú del navegador, seleccioneu Tools > DOM Inspector, or Tools > Web Development > DOM Inspector. -
    -
    Més detalls
    - -

    Si el navegador Mozilla no té DOMI, podeu instalar-ho des de la web de complements i reiniciar el navegador. A continuació, tornar a aquest tutorial.

    - -

    Si no voleu instal·lar DOMi (o esteu fent servir un navegador que no és Mozilla), poodeu utilitzar Web X-Ray Goggles, tal com es descriu en la següent secció. O bé, podeu ometre aquesta secció i anar directament a la pàgina següent. Saltar-se aquesta secció no interfereix amb la resta del programa d'aprenentatge.

    -
    -
    3. -
  3. En DOMi, s'expandeixi els nodes del document fent clic a les fletxes. -

    Nota: Els espais creats en el arxiu HTML pot causar que DOMi mostri alguns nodes de text buits, que podeu ignorar.

    - -

    Part del resultat podria tenir aquest aspecte, depenent de quins nodes heu expandit:

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

    En seleccionar qualsevol dels nodes, podeu utilitzar el panell de la dreta de DOMi per esbrinar més sobre ell. Per exemple, quan es selecciona un node de text, DOMi mostra el text en el panell de la dreta.

    - -

    Quan se selecciona un node element, DOMi analitza i ofereix una enorme quantitat d'informació en el seu panell de la dreta. La informació d'estil és només part de la informació que proporciona.

    -
    4. -
- -
-
Repte
- -

En DOMi, feu clic en un node STRONG.

- -

Utilitzeu el panell de la dreta de DOMi per esbrinar on el color del node és vermell, i on la seva aparença es fa més destacable que el text 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
-Veure la solució per el repte.
- -

Utilitzar Web X-Ray Goggles

- -

Web X-Ray Goggles mostra menys informació que DOM Inspector, però és més fàcil d'instal·lar i utilitzar.

- -
    -
  1. Anar a la pàgina principal de Web X-Ray Goggles.
    2. -
  2. Arrossegar el enllaç de marcador a la pàgina de la barra d'eines del navegador.
    3. -
  3. Obriu el document HTML d'exemple.
    4. -
  4. Activar Web X-Ray Goggles fent clic al marcador a la barra d'eines.
    5. -
  5. Moure el punter del ratolí per sobre del document, per veure els elements del document.
    6. -
- -

I ara què?

- -

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascada & herència") }}Si heu pres el repte, veureu que la informació d'estil de més d'un lloc interacciona per crear l'estil final per a un element. La pàgina següent explica més sobre aquestes interaccions.

diff --git a/files/ca/web/guide/css/inici_en_css/css_llegible/index.html b/files/ca/web/guide/css/inici_en_css/css_llegible/index.html deleted file mode 100644 index 15b376dad0..0000000000 --- a/files/ca/web/guide/css/inici_en_css/css_llegible/index.html +++ /dev/null @@ -1,174 +0,0 @@ ---- -title: CSS llegible -slug: Web/Guide/CSS/Inici_en_CSS/CSS_llegible -tags: - - CSS - - 'CSS:Getting_Started' - - Guide - - Intermediate - - NeedsBeginnerUpdate - - NeedsLiveSample - - Web -translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable -translation_of_original: Web/Guide/CSS/Getting_started/Readable_CSS ---- -

{{ CSSTutorialTOC() }}

- -

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors", "Selectors")}}Aquesta és la 6th secció del tutorial CSS Getting Started; s'analitza l'estil i la gramàtica del propi llenguatge CSS. Es canvia la forma en què  es veu el vostre arxiu CSS d'exemple, perquè sigui més llegible.

- -

Informació: CSS Llegible

- -

Podeu afegir espais en blanc i comentaris en les fulles d'estil perquè siguin més llegibles. També es poden agrupar selectors, quan les mateixes regles d'estil s'apliquen als elements seleccionats de diferents maneres.

- -

Espai en blanc

- -

L'espai en blanc vol dir espais reals, tabuladors i noves línies. Podeu afegir espais en blanc per fer les fulles d'estil més llegible.

- -

En el context del disseny de la pàgina i composició, l'espai en blanc és la part de la pàgina que es deixa sense marcar: marges, separacions, i l'espai entre columnes i línies de text.

- -

El arxiu CSS d'exemple actualment té una regla per línia, i gairebé el mínim d'espai en blanc. En un full d'estil complex aquesta disposició seria difícil de llegir, de manera que difilcutaria el seu manteniment.

- -

El disseny escullit sol ser una preferència personal, però si els fulls d'estil són part de projectes compartits, aquests projectes podrian tenir les seves pròpies convencions.

- -
-
Exemples
- -

Hi ha qui els agrada el disseny compacte que hem estat utilitzant, i només divideixen una línia quan es fa molt llarga:

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

Hi ha qui prefereix una propietat-valor per línia:

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

Hi ha qui utilitza la sagnia de dos espais, quatre espais, o una tabulació són comuns:

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

Hi ha qui els agrada que tot estigui alienat verticalment (però un disseny com aquest és difícil de mantenir):

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

Hi ha qui fa servir espais en blanc mixtes per millorar la lectura.

- -
.vegetable         { color: green; min-height:  5px; min-width:  5px }
-.vegetable.carrot  { color: orange;    height: 90px;     width: 10px }
-.vegetable.spinach { color: darkgreen; height: 30px;     width: 30px }
-
-
- -

Hi ha qui utilitza tabulacions per al disseny. Hi ha qui només utilitza espais.

- -

Comentaris

- -

Els comentaris en CSS comencen amb /* i acaban amb */.

- -

Podeu utilitzar els comentaris per fer comentaris reals en el full d'estil, i també per comentar parts d'ell temporalment per a propòsits de prova.

- -

Per comentar part d'un full d'estil, col·locar aquesta part en un comentari perquè el navegador ho ignori. Aneu amb compte on s'inicia i acaba el comentari. La resta del full d'estil ha de tenir una sintaxi correcta.

- -
-
Exemple
- -
/* style for initial letter C in first paragraph */
-.carrot {
-  color:            orange;
-  text-decoration:  underline;
-  font-style:       italic;
-  }
-
-
- -

Selectors agrupats

- -

Quan molts elements tenen el mateix estil, podeu especificar un grup de selectors, separant-los per comes. La declaració és vàlida per a tots els elements seleccionats.

- -

En una altra part del full d'estils es poden especificar els mateixos selectors de nou de forma individual, per aplicar les regles d'estil individuals a ells.

- -
-
Exemple
- -

Aquesta regla fa que els elements {{ HTMLElement("h1") }}, {{ HTMLElement("h2") }} i {{ HTMLElement("h3") }} tinguin el mateix color.

- -

És convenient especificar el color en un sol lloc, en el cas en què hagi de ser canviat.

- -
/* color for headings */
-h1, h2, h3 {color: navy;}
-
-
- -

Acció: Afegir comentaris i millorar el disseny

- -
    -
  1. Editeu l'arxiu CSS, i assegurar-se que té aquestes regles (en qualsevol ordre): - 
    strong {color: red;}
-.carrot {color: orange;}
-.spinach {color: green;}
-#first {font-style: italic;}
-p {color: blue;}
-
    -
    2. -
  2. Feu que sigui més llegible reordenant-ho d'una manera que ho trobeu lògic, i mitjançant l'afegit d'espais en blanc i comentaris de la millor manera que us sembli.
    3. -
  3. Deseu el fitxer i refresqueu la pantalla del navegador, per assegurar-se que els canvis no afectin el funcionament de la fulla d'estil: - - - - - - - - - -
    Cascading Style Sheets
    Cascading Style Sheets
    -
    4. -
- -
-
Repte
- -

Comenteu una part de la fulla d'estils, sense canviar res més, perquè la primera lletra del document sigui vermella:

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

(Hi ha més d'una manera de fer això.)

- -
-
Possible solution
-One way to do this is to put comment delimiters around the rule for .carrot: - -
/*.carrot {
-  color: orange;
-}*/
-Hide solution
-Veure la solució per el repte.
- -

I ara què?

- -

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles", "Estil de text") }}En el estil d'exemple s'ha utilitzat el text en cursiva i subratllat. La pàgina següent descriu més formes d'especificar l'aspecte del text en el document.

diff --git a/files/ca/web/guide/css/inici_en_css/disseny/index.html b/files/ca/web/guide/css/inici_en_css/disseny/index.html deleted file mode 100644 index 28045a681d..0000000000 --- a/files/ca/web/guide/css/inici_en_css/disseny/index.html +++ /dev/null @@ -1,383 +0,0 @@ ---- -title: Disseny -slug: Web/Guide/CSS/Inici_en_CSS/Disseny -tags: - - CSS - - CSS Float - - CSS Text Align - - CSS Unit - - 'CSS:Getting_Started' - - Example - - Guide - - Intermediate - - NeedsBeginnerUpdate - - NeedsLiveSample - - NeedsUpdate - - Web -translation_of: Learn/CSS/CSS_layout -translation_of_original: Web/Guide/CSS/Getting_started/Layout ---- -

{{ CSSTutorialTOC() }}

- -

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Boxes", "Caixes")}}Aquesta és la 12th secció del tutorial CSS Getting Started descriu algunes maneres d'ajustar el disseny del document. Es canvia el disseny del vostre document d'exemple.

- -

Informació: Disseny

- -

Feu servir CSS per especificar diversos efectes visuals que canvïin el disseny del document. Algunes de les tècniques especifiques de disseny son avançades, i van més enllà de l'àmbit d'aquest tutorial bàsic.

- -

En dissenyar una presentació que tingui un aspecte similar en diferents navegadors, la vostre fulla d'estil interactua amb la fulla d'estil i el motor de disseny predeterminats del navegador de formes que poden ser complexes. Aquest és també un tema avançat, que va més enllà de l'àmbit d'aquest tutorial bàsic.

- -

Aquesta pàgina descriu algunes tècniques simples que podeu intentar.

- -

Estructura del document

- -

Si voleu controlar el disseny del document, llavors és possible que hagiu de canviar la seva estructura.

- -

El llenguatge de marcat del document podria tenir etiquetes d'ús general per a la creació de l'estructura. Per exemple, en HTML podeu utilitzar l'element {{ HTMLElement("div") }} per crear l'estructura.

- -
-
Exemple
- -

En el vostre document d'exemple, els paràgrafs numerats (Numbered paragraphs), en el marc del segon epígraf, no tenen un contenidor propi.

- -

La vostre fulla d'estil no pot dibuixar una vora al voltant d'aquests paràgrafs, perquè no hi ha cap element per especificar en el selector.

- -

Per solucionar aquest problema estructural, es pot afegir una etiqueta {{ HTMLElement("div") }} al voltant dels paràgrafs. Aquesta etiqueta és única, pel que pot ser identificada per un atribut id:

- -
<h3>Numbered paragraphs</h3>
-<div id="numbered">
-  <p>Lorem ipsum</p>
-  <p>Dolor sit</p>
-  <p>Amet consectetuer</p>
-  <p>Magna aliquam</p>
-  <p>Autem veleum</p>
-</div>
-
- -

Ara a la vostre fulla d'estil podeu utilitzar una regla per especificar les vores al voltant de les dues llistes:

- -
ul, #numbered {
-  border: 1em solid #69b;
-  padding-right:1em;
-}
-
- -

El resultat és el següent:

- - - - - - - -
-

(A) The oceans

- -
-
    -
  • Arctic
    • -
  • Atlantic
    • -
  • Pacific
    • -
  • Indian
    • -
  • Southern
    • -
-
- -

(B) Numbered paragraphs

- -
-

1: Lorem ipsum

- -

2: Dolor sit

- -

3: Amet consectetuer

- -

4: Magna aliquam

- -

5: Autem veleum

-
-
-
- -

Unitats de mida

- -

Fins ara, en aquest tutorial, s'han especificat les mides en píxels (px). Aquestes són apropiades, en determinats casos, en un dispositiu de visualització com una pantalla d'ordinador. Però quan l'usuari canvia la mida de la font, el disseny pot semblar inadequat.

- -

Per a molts propòsits, és millor especificar les mides com un percentatge o en ems (em). Un em és nominalment la mida de la font actual (l'amplada d'una lletra m). Quan l'usuari canvia la mida de la lletra, el seu disseny s'ajusta automàticament.

- -
-
Exemple
- -

La vora de l'esquerra d'aquest text té la mida definida en píxels.

- -

La vora de la dreta té la mida definida en ems.

- -

En el vostre navegador, al canviar la mida de la font veureu com la vora de la dreta s'ajusta, però la vora de l'esquerra no ho fa:

- - - - - - - -
-
RESIZE ME PLEASE
-
-
- -
-
Més detalls
- -

Per a altres dispositius, altres unitats de longitud són les adequades.

- -

Hi ha més informació sobre això en una pàgina posterior d'aquest tutorial.

- -

Per als detalls complets dels valors i les unitats que es poden utilitzar, consulteu Valors en l'especificació CSS.

-
- -

Disposició del text

- -

Dues propietats defineixen com el contingut d'un element és alineat. Els podeu utilitzar per realitzar ajustos sencills en el disseny:

- -
-
{{ cssxref("text-align") }}
-
Alinea el contingut. Utilitzeu un d'aquests valors: left, right, center, justify
-
{{ cssxref("text-indent") }}
-
Sagna el contingut en una quantitat que especifiqueu.
-
- -

Aquestes propietats s'apliquen a qualsevol text contingut en l'element, no només al text real. Recordeu que són heretats pels fills de l'element, així que pot ser que hagiu de desactivar-los explícitament en els fills per evitar resultats sorprenents.

- -
-
Exemple
- -

Per centrar les capçaleres:

- -
h3 {
-  border-top: 1px solid gray;
-  text-align: center;
-}
-
- -

Resultant:

- - - - - - - -
-

(A) The oceans

-
- -

En un document HTML, el contingut que es veu per sota d'una capçalera no està estructuralment contingut per la capçalera. Així que quan s'alinea una capçalera com aquesta, les etiquetes sota de l'encapçalament no hereten l'estil.

-
- -

Flotants

- -

La propietat {{ cssxref("float") }} força un element cap a l'esquerra o cap a la dreta. Aquesta és una forma senzilla per controlar la seva posició i mida.

- -

La resta del contingut del document flueix normalment al voltant de l'element flotant. Això es pot controlar mitjançant l'ús de la propietat {{ cssxref("clear") }} en altres elements per fer que es quedin allunyats dels flotants.

- -
-
Exemple
- -

En el vostre document d'exemple, les llistes s'estenen a través de la finestra. Això es pot evitar fent que flotin cap a l'esquerra

- -

Per mantenir les capçaleress en el seu lloc, també heu d'especificar que es mantinguin allunyades dels flotants de la seva esquerra:

- -
ul, #numbered {float: left;}
-h3 {clear: left;}
-
-
- -

El resultat és el següent:

- - - - - - - -
-

(A) The oceans

- -
-
    -
  • Arctic
    • -
  • Atlantic
    • -
  • Pacific
    • -
  • Indian
    • -
  • Southern
    • -
-
- -

(B) Numbered paragraphs

- -
-

1: Lorem ipsum

- -

2: Dolor sit

- -

3: Amet consectetuer

- -

4: Magna aliquam

- -

5: Autem veleum

-
-
- -

(Una mica de farciment (padding) es necessita a la dreta de les caixes, on la vora (border) està massa a prop del text.)

- -

Posicionament

- -

Podeu definir la posició d'un element de quatre maneres, especificant la propietat {{ cssxref ("position") }} i un dels següents valors.

- -

Aquestes són les propietats avançades. És possible utilitzar-les en formes simples, és per això que s'esmenten en aquest tutorial bàsic. Però el seu ús per a dissenys complexos pot ser difícil.

- -
-
relative
-
La posició de l'element es desplaça respecte a la seva posició normal. Utilitzeu aquesta opció per a desplaçar un element en una quantitat especificada. De vegades es pot utilitzar el marge de l'element per aconseguir el mateix efecte.
-
fixed
-
La posició de l'element és fix. Definir la posició de l'element respecte a la finestra del document. Fins i tot si la resta del document es desplaça, l'element roman fix.
-
absolute
-
La posició de l'element es fixa en relació amb un element pare. Solsament un pare que estugui posicionat amb relative, fixed o absolute. Es pot fer que qualsevol element pare sigui adequat especificant position:relative; però sense especificar cap canvi.
-
static
-
-

El valor per defecte. Utilitzeu aquest valor si cal desactivar el posicionament de manera explícita.

-
-
- -

Juntament amb aquests valors de la propietat position (a excepció de static), especifiqueu una o més de les propietats: top, right, bottom, left, width, height per identificar on voleu que aparegui l'element, i potser també la seva grandària.

- -
-
Exemple
- -

Per situar dos elements en un sobre l'altre, crear un contenidor pare en el vostre document amb els dos elements en el seu interior:

- -
<div id="parent-div">
-  <p id="forward">/</p>
-  <p id="back">\</p>
-</div>
-
- -

En la vostre fulla d'estil, fer la posició dels pares relative. No hi ha necessitat d'especificar qualsevol canvi real. Fer la posició dels fills absolute:

- -
#parent-div {
-  position: relative;
-  font: bold 200% sans-serif;
-}
-
-#forward, #back {
-  position: absolute;
-  margin:0px; /* no margin around the elements */
-  top: 0px; /* distance from top */
-  left: 0px; /* distance from left */
-}
-
-#forward {
-  color: blue;
-}
-
-#back {
-  color: red;
-}
-
- -

El resultat es veu així, amb la barra invertida a la part superior de la barra inclinada:

- -
-

/

- -

\

-
- - - - - - - -
 
-
- -
-
Més detalls
- -

La història completa de posicionament ocupa dos capítols complexes en l'especificació CSS Model de format Visual i Detalls del model de format visual.

- -

Si esteu dissenyant fulles d'estil per a treballar en molts navegadors, llavors també cal tenir en compte les diferències en la manera com els navegadors interpreten la norma, i potser els errors en determinades versions de navegadors particulars.

-
- -

Acció: Especificació del disseny

- -
    -
  1. Canvieu el document d'exemple, doc2.html, i la fulla d'estil, style2.css, utilitzant els exemples de més amunt en la secció Estructura del document i Flotants.
    2. -
  2. En l'exemple Flotants afegir farciment per separar el text de la vora dret en 0,5 em.
    3. -
- -
-
Reptes
- -

Modifiqueu el document d'exemple, doc2.html, afegint aquesta etiqueta prop del final, just abans de </body>.

- -
<img id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin">
-
- -

Si no heu descarregat l'arxiu d'imatge al principi d'aquest tutorial, descarregar-ho ara, i ho col·loqueu en el mateix directori que els altres arxius d'exemple:

- - - - - - - -
Image:Yellow-pin.png
- -

Predir on la imatge apareixerà en el document. A continuació, actualitzeu el navegador per veure si és correcte.

- -

Afegiu una regla a la fulla d'estil que col·loqui la imatge a la part superior dreta del document.

- -

Actualitzeu el navegador i fer la finestra petita. Comproveu que la imatge es queda a la part superior dreta, fins i tot quan es desplaça el document

- -
-
-

(A) The oceans

- -
-
    -
  • Arctic
    • -
  • Atlantic
    • -
  • Pacific
    • -
  • Indian
    • -
  • Southern
    • -
-
- -

(B) Numbered paragraphs

- -
-

1: Lorem ipsum

- -

2: Dolor sit

- -

3: Amet consectetuer

- -

4: Magna aliquam

- -

5: Autem veleum

-
- -

 

- -
Yellow map pin
-
-
-
- -

 Veure la solució per el repte.

- -

I ara què?

- -

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Tables", "Taules") }}S'han cobert gairebé tots els temes d'aquest tutorial bàsic de CSS. La pàgina següent descriu selectors més avançats per a regles CSS, i algunes formes específiques en el disseny de taules.

diff --git a/files/ca/web/guide/css/inici_en_css/estils_de_text/index.html b/files/ca/web/guide/css/inici_en_css/estils_de_text/index.html deleted file mode 100644 index a1a8c9364f..0000000000 --- a/files/ca/web/guide/css/inici_en_css/estils_de_text/index.html +++ /dev/null @@ -1,162 +0,0 @@ ---- -title: Estils de text -slug: Web/Guide/CSS/Inici_en_CSS/Estils_de_text -tags: - - Beginner - - CSS - - CSS Fonts - - 'CSS:Getting_Started' - - Guide - - NeedsBeginnerUpdate - - NeedsLiveSample - - NeedsUpdate - - Web -translation_of: Learn/CSS/Styling_text/Fundamentals -translation_of_original: Web/Guide/CSS/Getting_started/Text_styles ---- -

{{ CSSTutorialTOC() }}

- -

{{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS", "CSS llegible")}} Aquesta és la 7th secció del tutorial CSS Getting Started; es donen més exemples d'estils de text. Modifiqueu la fulla d'estil d'exemple per utilitzar diferents fonts.

- -

Informació: Estils de text

- -

CSS té diverses propietats d'estil de text.

- -

Hi ha una propietat abreujada convenient, {{ cssxref("font") }}, que podeu utilitzar per especificar diversos aspectes alhora, per exemple:

- -
    -
  • Negreta (Bold), Cursiva (Italic) i Majúscula petita (small-caps) (versaleta)
    • -
  • Mida (Size)
    • -
  • alçada de la línia (Line height)
    • -
  • Tipus de lletra (Font typeface)
    • -
- -
-
Exemple
- -
p {
-font: italic 75%/125% "Comic Sans MS", cursive;
-}
-
- -

Aquesta regla estableix diverses propietats de la font, fent tots els paràgrafs en cursiva.

- -

La mida de la font s'estableix en les tres quartes parts de la mida d'element pare de cada paràgraf, i l'alçada de la línia s'estableix en 125% (una mica més separats del normal).

- -

El tipus de lletra s'estableix en la Comic Sans MS, però si aquest tipus de lletra no està disponible, el navegador farà ús del seu tipus de lletra cursiva per defecte (escrit a mà).

- -

La regla té l'efecte secundari de desactivar negreta i small-caps (establint el seu valor a normal).

-
- -

Tipus de fonts

- -

No es pot predir que tipus de lletra tindran els lectors del vostre document . Quan especifiqueu tipus de lletra de font, és una bona idea proporcionar una llista d'alternatives en ordre de preferència.

- -

Acabar la llista amb un dels tipus de lletra per defecte incorporats: serif, sans-serif, cursive, fantasy o monospace.

- -

Si el tipus de lletra no és compatible amb algunes característiques en el document, el navegador pot substituir per un tipus de lletra diferent. Per exemple, el document pot contenir caràcters especials que el tipus de lletra no admet. Si el navegador pot trobar un altre tipus de lletra que té aquests caràcters, llavors farà servir un altre tipus de lletra.

- -

Per especificar un tipus de lletra, utilitzar la propietat {{ cssxref("font-family") }}.

- -

Les mides de la font

- -

Els usuaris del navegador poden anul·lar les mides de font per defecte o canviar la mida de text mentre llegeixen una pàgina, pel que té sentit el que utilitzeu mides relatives on es pugui.

- -

Podeu utilitzar alguns valors incorporats per mides de font, com small, medium i large. També podeu utilitzar valors relatius a la mida de font de l'element pare com: smaller, larger, 150% o 1.5em. Un "em" és equivalent a l'amplada de la lletra "m" (per la mida de font de l'element pare); per tant 1.5em és una vegada i mitja la mida de la font de l'element pare.

- -

Si cal, podeu especificar una mida real com: 14px (14 píxels) per a un dispositiu de visualització o 14pt (14 punts) per a una impressora. Això no és accessible per als usuaris amb discapacitat visual, ja que no els permet canviar la mida. Una estratègia més accessible és establir un valor incorporat com a mitjà en un element de nivell superior del document i, a continuació establir les mides relatives de tots els seus elements descendents.

- -

Per especificar una mida de font, utilitzar la propietat {{ cssxref("font-size") }}.

- -

Alçada de la línia

- -

L'alçada de la línia especifica l'espaiat entre línies. Si el document té els paràgrafs llargs amb moltes línies, una separació més gran del normal fa que sigui més fàcil de llegir, especialment si la mida de la font és petita.

- -

Per especificar l'alçada de la línia, utilitzar la propietat {{ cssxref("line-height") }}.

- -

Decoració

- -

A part de la propietat {{ cssxref("text-decoration") }} podeu especificar altres estils, com el subratllat(underline) o ratllat(line-through). Podeu configurar-ho a none per eliminar explícitament qualsevol decoració.

- -

Altres propietats

- -

Per especificar cursiva, utilitzar {{ cssxref("font-style") }}: italic;
- Per especificar negreta , utilitzar {{ cssxref("font-weight") }}: bold;
- Per especificar majúscules petites , utilitzar {{ cssxref("font-variant") }}: small-caps;

- -

Per desactivar qualsevol d'ells individualment, especificar el valor normal o inherit.

- -
-
Mé detalls
- -

Podeu especificar els estils de text d'altres maneres variades.

- -

Per exemple, algunes de les propietats esmentades aquí tenen altres valors que podeu utilitzar.

- -

En una fulla d'estil complexa, eviteu l'ús de la propietat de font abreujada, causa efectes secundaris (reposició d'altres propietats individuals).

- -

Per a més detalls de les propietats que es relacionen amb les fonts, vegeu Fonts en l'especificació CSS. Per a més detalls de decoració del text, vegeu Text.

- -

Si no voleu dependre dels tipus de lletra instal·lats en els sistemes dels usuaris, podeu utilitzar {{ cssxref("@font-face") }} per especificar una font en línia. No obstant això, requereix que els usuaris tinguin un navegador compatible amb aquesta regla.

-
- -

Acció: Especificació de les fonts

- -

Per a un document senzill, es pot establir la font de l'element {{ HTMLElement("body") }} i la resta del document hereta la configuració.

- -
    -
  1. Editeu l'arxiu CSS.
    2. -
  2. Afegiu la següent regla per canviar el tipus de lletra en tot el document. La part superior de l'arxiu CSS és un lloc lògic per a ell, però té el mateix efecte allà on ho posis: - 
    body {
-font: 16px "Comic Sans MS", cursive;
-}
-
    -
    3. -
  3. Afegiu un comentari explicant la regla, i afegiu espai en blanc per a que coincideixi amb el vostre disseny preferit.
    4. -
  4. Deseu el fitxer i actualitzeu el navegador per veure l'efecte. Si el sistema té Comic Sans MS, o una altra font cursiva que no suporta cursiva, l'explorador tria un tipus de lletra diferent per al text en cursiva en la primera línia:: - - - - - - - - - -
    Cascading Style Sheets
    Cascading Style Sheets
    -
    5. -
  5. Des de la barra de menú del navegador, seleccioneu View > Text Size > Increase (o View > Zoom > Zoom In). Tot i que heu especificat 16 píxels en l'estil, un usuari en llegir el document pot canviar la mida.
    6. -
- -
-
Repte
- -

Sense canviar res més, fer que totes les sis lletres inicials sigui dues vegades la mida de la font serif per defecte en el navegador:

- - - - - - - - - - -
Cascading Style Sheets
Cascading Style Sheets
- -
-
Possible solution
- -

Add the following style declaration to the strong rule:

- -
  font: 200% serif;
-
-If you use separate declarations for font-size and font-family, then the font-style setting on the first paragraph is not overridden. - -

 

-Hide solution
-Veure la solució per el repte.
- -

I ara què?

- -

{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Color", "Color")}}El document d'exemple utilitza diversos colors amb nom. En la següent secció s'enumeren els noms dels colors estàndard i s'explica com es poden especificar altres.

diff --git a/files/ca/web/guide/css/inici_en_css/index.html b/files/ca/web/guide/css/inici_en_css/index.html deleted file mode 100644 index 8de66f308e..0000000000 --- a/files/ca/web/guide/css/inici_en_css/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: Inici en CSS -slug: Web/Guide/CSS/Inici_en_CSS -tags: - - Beginner - - CSS - - 'CSS:Getting_Started' - - Guide - - Needs - - NeedsBeginnerUpdate - - NeedsUpdate - - Web -translation_of: Learn/CSS/First_steps -translation_of_original: Web/Guide/CSS/Getting_started ---- -

Aquest tutorial és una introducció a les característiques bàsiques i llenguatge (la sintaxi) per als fulls d'estil en cascada(Cascading Style Sheets) (CSS). S'utilitza CSS per canviar l'aspecte d'un document estructurat, com ara una pàgina web. El tutorial també inclou exemples d'exercicis que podeu provar en el vostre ordinador per veure els efectes de les CSS i les característiques que funcionen en els navegadors moderns.

- -

El tutorial és per a principiants i per qualsevol persona que desitji revisar els conceptes bàsics de CSS. Si teniu més experiència amb CSS, la pàgina principal de CSS enumera els recursos més avançats.

- - - -

Que es necessita per començar

- -
    -
  • Un editor de text
    • -
  • Un navegador modern
    • -
  • Alguna experiència treballant amb editor de text i navegador
    • -
- -

Encara que els exercicis poden ajudar-te a aprendre, no és necessari realitzar-los. Simplement podeu llegir el tutorial i mirar les imatges.

- -

Nota: El tutorial s'explica com funciona CSS amb el color. Serà més fàcil per completar aquestes seccions amb una pantalla a color i visió de color normal.

- -

Com utilitzar aquest tutorial

- -

Per utilitzar aquest tutorial, llegiu les pàgines amb cura i de forma seqüencial. Si es salta una pàgina, pot ser difícil d'entendre les pàgines següents en el tutorial.

- -

Part I: Els fonaments del CSS

- -

A cada pàgina, utilitzeu la secció d'informació per entendre com funciona CSS. Utilitzeu la secció Acció per probar l'ús de CSS en el vostre ordinador.

- -

Per posar a prova la vostre comprensió, prendre el repte al final de cada pàgina. Les solucions als reptes estan vinculats en virtut dels reptes, pel que no és necessari mirar-los si no ho desitjeu.

- -

Per comprendre CSS amb més profunditat, llegiu la informació que es troba en les caselles de subtítols Més detalls. Utilitzeu els enllaços que hi ha per trobar informació de referència sobre CSS

- -

Part II: L'Abast del CSS

- -

Una segona part del programa d'aprenentatge proporciona exemples, que mostren l'abast de CSS amb altres tecnologies web i Mozilla.

- -
    -
  1. JavaScript
    2. -
  2. SVG graphics
    3. -
  3. XML data
    4. -
  4. XBL bindings
    5. -
  5. XUL user interfaces
    6. -
diff --git a/files/ca/web/guide/css/inici_en_css/javascript/index.html b/files/ca/web/guide/css/inici_en_css/javascript/index.html deleted file mode 100644 index 83a6f18c98..0000000000 --- a/files/ca/web/guide/css/inici_en_css/javascript/index.html +++ /dev/null @@ -1,147 +0,0 @@ ---- -title: JavaScript i CSS -slug: Web/Guide/CSS/Inici_en_CSS/JavaScript -tags: - - CSS - - 'CSS:Getting_Started' - - Example - - Guide - - Intermediate - - NeedsUpdate - - Web -translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents -translation_of_original: Web/Guide/CSS/Getting_started/JavaScript ---- -

{{ CSSTutorialTOC() }}

- -

Aquesta és la primera secció de la Part II del tutorial CSS. La Part II conté alguns exemples que mostren l'abast de CSS utilitzat amb altres tecnologies web i Mozilla.

- -

Cada pàgina en la part II il·lustra com interactua amb CSS alguna altra tecnologia. Aquestes pàgines no estan dissenyades per ensenyar com utilitzar aquestes altres tecnologies. Aneu a altres tutorials per aprendre sobre elles en detall.

- -

En lloc d'això, aquestes pàgines estan dissenyades per il·lustrar els molts usos de CSS. Per utilitzar aquestes pàgines, heu de tenir algun coneixement de CSS, però no cal cap coneixement d'unes altres tecnologies.

- -

Secció anterior (Part I): Mitjà
- Secció següent: SVG

- -

Informació: JavaScript

- -

JavaScript és un llenguatge de programació. JavaScript s'utilitza àmpliament per proporcionar interactivitat en els llocs web i aplicacions.

- -

JavaScript pot interactuar amb les fulles d'estil, permetent-li escriure programes que canvien l'estil d'un document de forma dinàmica.

- -

Hi ha tres maneres de fer això:

- -
    -
  • Treballant amb la llista de fulles d'estil del document, per exemple: afegir, eliminar o modificar una fulla d'estil.
    • -
  • Treballant amb les regles en una fulla d'estil, per exemple: afegir, eliminar o modificar una regla.
    • -
  • Treballant amb un element individual en el DOM, modificant el seu estil independentment de les fulles d'estil del document.
    • -
- - - - - - - - -
Més detalls
Per obtenir més informació sobre JavaScript, vegeu la pàgina de JavaScript en aquest wiki.
- -

Acció: Una demostració de JavaScript

- -

Feu un nou document HTML, doc5.html. Copieu i enganxeu el contingut d'aquí, assegurar-vos de deplaçar-vos per obtenir tota ella;

- -
-
<!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>Click Me</button>
-
-</body>
-</html>
-
-
- -

Feu una nova fulla d'estil CSS, style5.css. Copieu i enganxeu el contingut d'aquí:

- -
-
  #square {
-    width: 120px;
-    height: 120px;
-    border: 2px inset gray;
-    margin-bottom: 1em;
-  }
-
-  button {
-    padding: .5em 2em;
-  }
-
- -

Feu un nou arxiu de text, script5.js. Copieu i enganxeu el contingut d'aquí:

- -
-
// JavaScript demonstration
-var changeBg = function (event) {
-    console.log("method called");
-    var me = event.target
-    ,   square = document.getElementById("square");
-    square.style.backgroundColor = "#ffaa44";
-    me.setAttribute("disabled", "disabled");
-    setTimeout(function () { clearDemo(me) }, 2000);
-}
-
-function clearDemo(button) {
-    var square = document.getElementById("square");
-    square.style.backgroundColor = "transparent";
-    button.removeAttribute("disabled");
-}
-
-var button = document.querySelector("button");
-button.addEventListener("click", changeBg);
-console.log(button);
-
-
- -

Obriu el document en el navegador i premeu el botó o vegeu una mostra del treball a continuació.

- -

{{ EmbedLiveSample('Action:_A_JavaScript_demonstration', 320,320) }}

- -
Notes importants sobre aquesta demostració: - -
    -
  • El document HTML vincula la fulla d'estil com de costum, i també vincula  el script.
    • -
  • L'script funciona amb elements individuals en el DOM. Modifica l'estil del cuadrat directament. Modifica l'estil del botó indirectament pel canvi d'un atribut.
    • -
  • En JavaScript, document.getElementById("square") és similar en funció al selector CSS #square.
    • -
  • En JavaScript, backgroundColor correspon a la propietat CSS background-color. JavaScript no permet guions en noms, de manera que "camelCase" s'utilitza en el seu lloc.
    • -
  • El vostre navegador té una regla CSS incorporada per button{{ mediawiki.external('disabled=\"true\"') }} que canvia l'aspecte del botó quan està desactivat.
    • -
-
- -
-

De fet, el document HTML anterior pot tenir una condició de competència  (informació relacionada en aquesta pàgina W3C), ja que té l'element script dins de l'element head podent inicar-se l'execució del codi JavaScript abans que la pàgina acabi de carregar-se i el codi no funcionarà perquè la variable button serà nul.la. En moure l'element script sota de l'element button (just damunt de l'etiqueta de tancament body) en el marcat HTML hauria de resoldre aquest problema.

-
- - - - - - - - -
Repte
Canvieu el script perquè el quadre salti a la dreta 20 em quan el seu color canviï, i salti cap a enrere després.
- -

Veure la solució per el repte.

- -

I ara què?

- -

Si teniu dificultats per entendre aquesta pàgina o si teniu altres comentaris al respecte, si us plau, contribuïu a la vostre pàgina de discussió.

- -

En aquesta demostració, el document HTML vincula el script tot i que només l'element button utilitza el script. Mozilla estén CSS de manera que pugui vincular codi JavaScript (i també contingut i altres fulles d'estil) per als elements seleccionats. La pàgina següent mostra això: vincles XBL

diff --git a/files/ca/web/guide/css/inici_en_css/llistes/index.html b/files/ca/web/guide/css/inici_en_css/llistes/index.html deleted file mode 100644 index a6bd0d31a1..0000000000 --- a/files/ca/web/guide/css/inici_en_css/llistes/index.html +++ /dev/null @@ -1,276 +0,0 @@ ---- -title: Llistes -slug: Web/Guide/CSS/Inici_en_CSS/Llistes -tags: - - Beginner - - CSS - - 'CSS:Getting_Started' - - Example - - Guide - - Intermediate - - NeedsBeginnerUpdate - - NeedsUpdate - - Web -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", "Contingut") }} Aquesta és la 10th secció del tutorial CSS Getting Started; descriu com es pot utilitzar CSS per especificar l'aspecte de les llistes. Heu de crear un nou document d'exemple que contindrà les llistes, i un nova fulla d'estil que és el estil de les llistes.

- -

Informació: Llistes

- -

Si vau aprendre el repte en l'última secció, llavors va veure com es podia afegir contingut abans de qualsevol element perquè aparegués com un element de la llista.

- -

CSS proporciona propietats especials que estan dissenyades per a les llistes. En general, és convenient utilitzar aquestes propietats sempre que pugueu.

- -

Per especificar l'estil a una llista, utilitzeu la propietat {{ cssxref("list-style") }} per especificar el tipus de marcador.

- -

El selector en la seva regla CSS pot seleccionar els elements de la llista d'elements (per exemple, {{ HTMLElement("li") }} ) o es pot seleccionar l'element de la llista dels pares (per exemple, {{ HTMLElement ("ul") }}) de manera que els elements de la llista hereten l'estil.

- -

Llistes no ordenades

- -

En una llista no ordenada, cada element de la llista està marcat de la mateixa manera.

- -

CSS té tres tipus de marcadors, i aquí es veu com el navegador els mostra:

- -
    -
  • disc
    • -
  • circle
    • -
  • square
    • -
- -

També podeu especificar l'adreça URL d'una imatge.

- -
-
Exemple
- -

Aquestes regles especifiquen diferents marcadors per a diferents classes d'elements de la llista:

- -
li.open {list-style: circle;}
-li.closed {list-style: disc;}
-
- -

Quan aquestes classes s'utilitzen en una llista, distingeix entre els elements oberts i tancats (per exemple, en una llista de tasques pendents):

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

El resultat és el següent:

- -

{{ EmbedLiveSample('Unordered_lists', '', '', '') }}

-
- -

Llistes ordenades

- -

En una llista ordenada, cada element de la llista es marca de manera diferent per mostrar la seva posició en la seqüència.

- -

Utilitzeu la propietat {{ cssxref("list-style") }} per especificar el tipus de marcador:

- -
    -
  • decimal
    • -
  • lower-roman
    • -
  • upper-roman
    • -
  • lower-latin
    • -
  • upper-latin
    • -
- -
-
Exemple
- -

Aquesta regla especifica que els elements en {{ HTMLElement ("ol") }}  amb la classe info, els elements s'identifiquen amb lletres majúscules.

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

El elements {{ HTMLElement ("li") }} en la llista hereten aquest estil:

- -

{{ EmbedLiveSample('Ordered_lists', '', '', '') }}

-
- -
-
Més detalls
- -

La propietat {{ cssxref ("list-style") }} és una propietat abreujada. En les fulles d'estil complexes és possible que preferiu utilitzar les propietats independents per establir els valors per separat. Per als enllaços a aquestes propietats separades, i més detalls de com CSS especifica les llistes, consulteu la pàgina de referència {{ cssxref ("list-style") }}.

- -

Si utilitzeu un llenguatge de marques com l'HTML que proporciona marques convencionals per llistes no ordenades ({{ HTMLElement("ul") }}) i llistes ordenades ({{ HTMLElement("ol") }}), llavors és una bona pràctica utilitzar les etiquetes en la forma en què estan destinades. No obstant això, podeu utilitzar CSS per fer que {{ HTMLElement("ul") }} aparegui ordenat i {{ HTMLElement("ol") }} aparegui desordenat si ho desitjeu.

- -

Els navegadors difereixen en la forma d'aplicar els estils de llistes. No espereu que la vostre fulla d'estil doni resultats idèntics en tots els navegadors.

-
- -

Comptadors

- -
-

Note:  Alguns navegadors no suporten comptadors. La pàgina continguts CSS i compatibilitat del navegador en el lloc Quirks Mode conté un gràfic detallat de la compatibilitat dels navegadors per això i altres característiques CSS. Pàgines individuals en la Referència CSS d'aquest lloc, també tenen taules de compatibilitat del navegador.

-
- -

Podeu utilitzar comptadors per enumerar els elements, no només els elements de la llista. Per exemple, en alguns documents és possible que vulgueu numerar les capçaleres o paràgrafs.

- -

Per especificar la numeració, es necessita un comptador amb un nom que definiu.

- -

En algun element abans que el recompte s'iniciï, reinicieu el comptador amb la propietat {{ cssxref("counter-reset") }} i el nom del seu comptador. El pare dels elements que està comptant és un bon lloc per fer-ho, però podeu utilitzar qualsevol element que vingui abans que els elements de la llista.

- -

Per cada element en el qual s'incrementa el comptador, utilitzeu la propietat {{ cssxref("counter-increment") }} i el nom del seu comptador.

- -

Per mostrar el comptador, afegiu {{ cssxref("::before") }} o {{ cssxref("::after") }} per al selector i l'ús de la propietat content (com ho va fer en la pàgina anterior, Content).

- -

En el valor de la propietat content, especifiqueu counter() amb el nom del vostre comptador. També podeu indicar un tipus. Els tipus són els mateixos que en la secció anterior de llistes ordenades.

- -

Normalment, l'element que mostra el comptador també l'incrementa.

- -
-
Exemple
- -

Aquesta regla inicialitza un comptador per a cada element {{ HTMLElement("h3") }} amb la classe numbered:

- -
h3.numbered {counter-reset: mynum;}
-
- -

Aquesta regla mostra i incrementa el comptador per a cada element {{ HTMLELement("p") }} amb la classe numbered:

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

El resultat és el següent:

- -

{{ EmbedLiveSample("Counters", '300', '200', '') }}

-
- -
-
Més detalls
- -

No podeu utilitzar comptadors a menys que sàpigueu que tot el que llegeixi el document té un navegador compatible amb ells.

- -

Si sou capaços d'utilitzar els comptadors, tenen l'avantatge que podeu donar estil els comptadors per separat dels elements de la llista. En l'exemple anterior, els comptadors estan en negreta, però els elements de la llista no ho estan.

- -

També podeu utilitzar els comptadors en formes més complexes, per exemple, al nombre de seccions, títols, subtítols i paràgrafs en els documents formals. Per a més detalls, consulteu Comptadors i numeració automàtica en l'especificació CSS.

-
- -

Acció: Llistes amb estil

- -

Feu un nou document HTML, doc2.html. Copieu i enganxeu el contingut d'aquí:

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

Feu un nova fulla d'estil, style2.css. Copieu i enganxeu el contingut d'aquí:

- -
/* numbered paragraphs */
-h3.numbered {counter-reset: mynum;}
-
-p.numbered:before {
-  content: counter(mynum) ": ";
-  counter-increment: mynum;
-  font-weight: bold;
-}
-
- -

Si la disposició i el comentari no són del vostre gust, canvieu-los.

- -

Obriu el document en el navegador. Si el navegador és compatible amb els comptadors, es veurà alguna cosa semblant com l'exemple a continuació. Si el vostre navegador no suporta comptadors, llavors no veureu els números (i probablement ni tan sols els dos punts):

- -

{{ EmbedLiveSample('Action_Styled_lists', '300', '400', '') }}

- -
-
Reptes
- -

Afegiu una regla a la fulla d'estil, per numerar els oceans utilitzant nombres romans de l'I al V:

- - - - - - - -
-

The oceans

- -
    -
  • Arctic
    • -
  • Atlantic
    • -
  • Pacific
    • -
  • Indian
    • -
  • Southern
    • -
-
- -

 

- -

Canvieu la fulla d'estil per identificar les capçaleres amb lletres majúscules i en parèntesi com aquest:

- - - - - - - -
-

(A) The oceans

- -

. . .

- -

(B) Numbered paragraphs

- -

. . .

-
-
- -

Veure la solució per el repte.

- -

I ara què?

- -

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Boxes", "Caixes") }}Quan el navegador mostra el document d'exemple, es crea un espai al voltant dels elements quan els col·loca a la pàgina. La pàgina següent descriu com podeu utilitzar CSS per treballar amb les formes subjacents d'elements, caixes.

diff --git "a/files/ca/web/guide/css/inici_en_css/mitj\303\240/index.html" "b/files/ca/web/guide/css/inici_en_css/mitj\303\240/index.html" deleted file mode 100644 index f3b14fb062..0000000000 --- "a/files/ca/web/guide/css/inici_en_css/mitj\303\240/index.html" +++ /dev/null @@ -1,402 +0,0 @@ ---- -title: Mitjà -slug: Web/Guide/CSS/Inici_en_CSS/Mitjà -tags: - - CSS - - 'CSS:Getting_Started' - - Example - - Guide - - Intermediate - - NeedsBeginnerUpdate - - NeedsLiveSample - - NeedsUpdate - - Web -translation_of: Web/Progressive_web_apps/Responsive/Media_types ---- -

{{CSSTutorialTOC}} {{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Tables", "Taules")}}

- -

Aquesta és la 14th secció de la Part I del tutorial CSS Getting Started Moltes de les pàgines d'aquest tutorial s'han centrat en les propietats CSS i els valors que es poden utilitzar per especificar com mostrar un document. Aquesta pàgina es veu de nou en el propòsit i l'estructura de les fulles d'estil CSS.

- -

Informació: Mitjà

- -

El propòsit de CSS és especificar com els documents es presenten a l'usuari. La presentació pot tenir més d'una forma.

- -

Per exemple, és probable que estigueu llegint aquesta pàgina en un dispositiu de visualització. Però també pot ser que el vulgueu projectar en una pantalla per a una gran audiència, o imprimir-ho. Aquests diferents mitjans poden tenir característiques diferents. CSS proporciona formes de presentar un document de manera diferent en diferents mitjans.

- -

Per especificar regles que són específiques d'un tipus de mitjà, utilitzeu {{CSSXref("@media")}} seguit pel tipus de mitjà, seguit de claus que tanquen les regles.

- -
-
Exemple
- -

Un document, en un lloc web, té una àrea de navegació per permetre a l'usuari moure's pel lloc.

- -

En el llenguatge de marcat, l'element pare de l'àrea de navegació té el id nav-area. (A {{HTMLVersionInline (5)}}, això pot ser marcat amb l'element {{HTMLElement("nav")}} en lloc de {{HTMLElement("div")}} amb un atribut id.)

- -

Quan s'imprimeix el document, l'àrea de navegació no té cap propòsit, de manera que la fulla d'estil l'elimina per complet:

- -
@media print {
-  #nav-area {display: none;}
-  }
-
-
- -

Alguns dels tipus de mitjans comuns són:

- - - - - - - - - - - - - - - - - - - - -
screenColor pantalla ordinador
printMitjans paginats
projectionPantalla projectada
allTots els mitjans (per defecte)
- -
-
Més detalls
- -

Hi ha altres formes d'especificar el tipus de mitjà d'un conjunt de regles.

- -

El llenguatge de marcat del document pot permetre que s'especifiqui el tipus de mitjà quan la fulla d'estil està vinculada al document. Per exemple, en HTML es pot especificar opcionalment el tipus de mitjà amb un atribut media en l'etiqueta LINK.

- -

En CSS podeu utilitzar {{CSSXref("@import")}} a l'inici d'una fulla d'estil per importar un altre fulla d'estil des d'una URL, especificant opcionalment el tipus de mitjà.

- -

Mitjançant l'ús d'aquestes tècniques es poden separar regles d'estil per a diferents tipus de mitjans en diferents arxius. Això de vegades és una forma útil d'estructurar les fulles d'estil.

- -

Per a més detalls sobre els tipus de mitjans, vegeu Mtjà en l'especificació CSS.

- -

Hi ha més exemples de la propietat {{cssxref ("display")}} en una pàgina posterior d'aquest tutorial: dades XML.

-
- -

Impressió

- -

CSS té algun suport específic per a la impressió i dels mitjans paginats en general.

- -

Un regla {{cssxref("@page")}} pot establir els marges de pàgina. Per a la impressió a doble cara, es poden definir els marges per separat per a @page:left i @page:right.

- -

Per als mitjans d'impressió, normalment s'utilitza com a unitats de longitud les polzades (in) i punts (pt = 1/72 polzades) o centímetres (cm) i mil·límetres (mm). És igualment apropiat utilitzar ems (em) perquè coincideixi amb la mida de font i percentatges (%).

- -

Podeu controlar la forma en què el contingut del document es divideix entre els límits de pàgina, mitjançant l'ús de les propietats {{cssxref("page-break-before")}}, {{cssxref("page-break-after")}} i {{cssxref("page-break-inside")}}.

- -
-
Exemple
- -

Aquesta regla estableix els marges de pàgina a una polzada en els quatre costats:

- -
@page {margin: 1in;}
-
- -

Aquesta regla assegura que cada element H1 comença en una nova pàgina:

- -
h1 {page-break-before: always;}
-
-
- -
-
Més detalls
- -

Per als detalls complets de suport de CSS per als mitjans paginats, veure Mitjans paginats en l'especificació CSS.

- -

Igual que altres característiques de CSS, la impressió depèn del navegador i la seva configuració. Per exemple, el navegador Mozilla subministra marges predeterminats, capçaleres i peus quan s'imprimeix. Quan altres usuaris imprimeixin el document, és probable que no sapigan quin navegador és i quina  configuració té, de manera que és possible que no poguin controlar completament els resultats.

-
- -

Interfícies d'usuari

- -

CSS té algunes propietats especials per als dispositius que suporten una interfície d'usuari, com pantalles d'ordinador. Això fa que l'aspecte del document canvii dinàmicament a mesura que l'usuari treballa amb la interfície.

- -

No hi ha cap tipus de mitjà especial per als dispositius amb interfícies d'usuari.

- -

Hi ha cinc selectors especials:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SelectorSelects
E{{cssxref(":hover")}}Qualsevol element E que té el punter sobre ell
E{{cssxref(":focus")}}Qualsevol element E que té el focus del teclat
E{{cssxref(":active")}}L'element E que està implicat en l'acció de l'usuari actual
E{{cssxref(":link")}}Qualsevol element E que és un hipervincle a una adreça URL que l'usuari no ha visitat recentment
E{{cssxref(":visited")}}Qualsevol element E que és un hipervincle a una adreça URL que l'usuari ha visitat recentment
- -
-

Nota: La informació que es pot obtenir del selector :visited està restringida a {{gecko("2.0")}}. Veure Privacitat i el selector :visited per a més detalls.

-
- -

La propietat {{cssxref("cursor")}} especifica la forma del punter: Algunes de les formes comunes són els següents. Col·loqueu el ratolí sobre els elements de la llista per veure les formes de punter reals en el vostre navegador:

- - - - - - - - - - - - - - - - - - - - - - - - -
SelectorSelects
pointerIndica un vincle
waitIndica que el programa no pot acceptar l'entrada
progressIndica que el programa està funcionant, encara pot acceptar l'entrada
defaultEl valor per defecte (normalment una fletxa)
- -

Una propietat {{cssxref("outline")}} crea un contorn que sovint s'utilitza per indicar el focus del teclat. Els seus valors són similars a la propietat {{cssxref("border")}}, excepte que no es poden definir els costats individualment.

- -

Algunes altres característiques de les interfícies d'usuari s'implementen utilitzant atributs, en la forma normal. Per exemple, un element que és deshabilitat o de només lectura té l'atribut disabled o l'atribut readonly. Els selectors poden especificar aquests atributs com qualsevol altre atribut, mitjançant l'ús de claudàtors: {{mediawiki.external('disabled')}} o {{mediawiki.external('readonly')}}.

- -
-
Exemple
- -

Aquestes regles especifiquen els estils per a un botó que canvia dinàmicament a mesura que l'usuari interactua amb ell:

- -
.green-button {
-  background-color:#cec;
-  color:#black;
-  border:2px outset #cec;
-  }
-
-.green-button[disabled] {
-  background-color:#cdc;
-  color:#777;
-  }
-
-.green-button:active {
-  border-style: inset;
-  }
-
- -

Aquest wiki no és compatible amb una interfície d'usuari en la pàgina, pel que aquests botons no "fan clic". Aquestes són algunes de les imatges estàtiques per il·lustrar la idea:

- - - - - - - -
- - - - - - - - - - - - - - - - -
Click MeClick MeClick Me
 
deshabilitatnormalactiu
-
- -

Un botó completament funcional també té un contorn fosc al voltant de tot el botó quan el valor és per defecte, i un contorn en línia de punts a la cara del botó quan té el focus del teclat. També podria tenir un efecte estacionari quan el punter es troba a sobre d'ell.

-
- -
-
Més detalls
- -

Per obtenir més informació sobre les interfícies d'usuari en el CSS, vegeu Interfície d'usuari en l'especificació CSS.

- -

Hi ha un exemple del llenguatge de marcat de Mozilla per a interfícies d'usuari, XUL, en la Part II d'aquest tutorial.

-
- -

Acció: Impressió d'un document

- -
    -
  1. Feu un nou document HTML, doc4.html. Copieu i enganxeu el contingut d'aquí: - - 
    <!DOCTYPE html>
-<html>
-  <head>
-    <title>Print sample</title>
-    <link rel="stylesheet" href="style4.css">
-  </head>
-  <body>
-    <h1>Section A</h1>
-    <p>This is the first section...</p>
-    <h1>Section B</h1>
-    <p>This is the second section...</p>
-    <div id="print-head">
-      Heading for paged media
-    </div>
-    <div id="print-foot">
-      Page:
-    </div>
-</body>
-</html>
-
    -
    2. -
  2. Feu una nova fulla d'estil, style4.css. Copieu i enganxeu el contingut d'aquí: - 
    /*** Print sample ***/
-
-/* defaults  for screen */
-#print-head,
-#print-foot {
-  display: none;
-  }
-
-/* print only */
-@media print {
-
-h1 {
-  page-break-before: always;
-  padding-top: 2em;
-  }
-
-h1:first-child {
-  page-break-before: avoid;
-  counter-reset: page;
-  }
-
-#print-head {
-  display: block;
-  position: fixed;
-  top: 0pt;
-  left:0pt;
-  right: 0pt;
-
-  font-size: 200%;
-  text-align: center;
-  }
-
-#print-foot {
-  display: block;
-  position: fixed;
-  bottom: 0pt;
-  right: 0pt;
-
-  font-size: 200%;
-  }
-
-#print-foot:after {
-  content: counter(page);
-  counter-increment: page;
-  }
-
-} /* end print only */
-
    -
    3. -
  3. Vegeu aquest document en el vostre navegador; utilitza l'estil per defecte del navegador.
    4. -
  4. Imprimir (o vista prèvia d'impressió) el document; la fulla d'estil col·loca cada secció en una pàgina separada, i s'afegeix una capçalera i peu de pàgina per a cada pàgina. Si el navegador és compatible amb els comptadors, s'agrega un número de pàgina al peu de pàgina. - - - - - - - -
    - - - - - - -
    - - - - - - -
    -
    Heading for paged media
    - -
    Section A
    - -
    This is the first section...
    - -
    Page: 1
    -
    -
    -     		- - - - - - -
    - - - - - - -
    -
    Heading for paged media
    - -
    Section B
    - -
    This is the second section...
    - -
    Page: 2
    -
    -
    -
    -
    5. -
- - - - - - - - -
Reptes
Moveu les regles d'estil específiques d'impressió en un fitxer CSS independent. -

Llegiu la pàgina de referència {{CSSXref("@import")}} per trobar detalls de com importar el nou arxiu CSS específic de la impressió en el vostre full d'estil style4.css.

- -

Feu que els encapçalaments es tornin blaus quan el punter del ratolí estigui sobre ells.

-
- -

Veure la solució per el repte.

- -

I ara què?

- -

Si teniu dificultats per entendre aquesta pàgina, o si teniu altres comentaris al respecte, si us plau, contribuïu a la vostre pàgina de Discussió.

- -

Fins al moment, totes les regles d'estil en aquest tutorial s'han especificat en els arxius. Les regles i els seus valors són fixos. La pàgina següent descriu com poden canviar les regles de forma dinàmica mitjançant l'ús d'un llenguatge de programació: JavaScript

diff --git "a/files/ca/web/guide/css/inici_en_css/per_qu\303\250_utilitzar_css/index.html" "b/files/ca/web/guide/css/inici_en_css/per_qu\303\250_utilitzar_css/index.html" deleted file mode 100644 index d3685309c7..0000000000 --- "a/files/ca/web/guide/css/inici_en_css/per_qu\303\250_utilitzar_css/index.html" +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: Per què utilitzar CSS? -slug: Web/Guide/CSS/Inici_en_CSS/Per_què_utilitzar_CSS -tags: - - Beginner - - CSS - - 'CSS:Getting_Started' - - Example - - Guide - - NeedsBeginnerUpdate - - Web -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", "Que és CSS?") }}Aquesta segona secció del tutorial CSS Getting Started explica la relació entre la CSS i els documents. En l'exercici aprendreu com afegir un full d'estil CSS en el document d'exemple que vam crear en la primera secció.

- -

Informació: Per què utilitzar CSS?

- -

S'utilitza CSS per definir estils en els documents, incloent el disseny, la disposició i les variacions en la imatge per als diferents dispositius i mides de pantalla. Podeu posar el CSS en el <head> d'un document amb un full d'estils incrustat, o adjuntar un arxiu separat que defineix els estils amb un full d'estils extern. Per enllaçar un full d'estils extern al document, se li afegeix simplement un enllaç al full d'estils en el <head> del document.

- -

Un full d'estil extern té molts avantatges. Mantenir els estils separats del seu contingut HTML:

- -
    -
  • Ajuda a evitar la duplicació
    • -
  • Facilita el manteniment
    • -
  • Permet fer un canvi de tot el lloc en un sol lloc
    • -
- -
-
Exemple
- -

L'ús de CSS, permet emmagatzemar la informació d'estil en arxius comuns que comparteixen totes les pàgines. Per exemple, quan els documents enllaçan amb el mateix full d'estil que defineix el color de les capçaleres h2, es pot aplicar l'estil de les etiquetes de capçalera h2 globalment, canviant un atribut css.

- -

Quan un usuari visualitza una pàgina web, el navegador de l'usuari carrega la informació d'estil juntament amb el contingut de la pàgina.

- -

Quan un usuari imprimeix una pàgina web, pot proporcionar informació de diferent estil que fa que la pàgina impresa sigui fàcil de llegir.

-
- -

Com fer que HTML i CSS treballin junts? En general, s'utilitza HTML per descriure el contingut del document, no el seu estil. CSS s'utilitza per especificar l'estil del document, no el seu contingut. Més endavant en aquest tutorial, veureu algunes excepcions a aquesta disposició.

- -
-
Més detalls
- -

Un llenguatge de marcatge com l'HTML també proporciona algunes formes d'establir estil.

- -
Per exemple, en HTML es pot utilitzar una etiqueta <b> per fer el text en negreta, i establir el color de fons d'una pàgina en la seva etiqueta <body>.
- -
 
- -

Quan s'utilitza CSS, normalment s'evita l'ús d'aquestes característiques del llenguatge de marcat, de manera que tota la informació d'estil del document està en un sol lloc.

-
- -

Acció: Crear un full d'estil

- -
    -
  1. Creeu un altre arxiu de text en el mateix directori que el document doc1.html que vau crear en la primera secció.
    2. -
  2. Guardeu el document com: style1.css. Aquest fitxer serà el full d'estil.
    3. -
  3. A l'arxiu CSS, copieu i enganxeu aquesta línia, a continuació, deseu el fitxer: - 
    strong {color: red;}
-
    -
    4. -
- -

Vincular el document al full d'estils

- -
    -
  1. Per enllaçar el document al full d'estils, editar l'arxiu HTML. Afegiu-hi la línia ressaltada aquí: - - 
    <!DOCTYPE html>
-<html>
-  <head>
-  <meta charset="UTF-8">
-  <title>Sample document</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. Deseu el fitxer i refrescar la pantalla del navegador. El full d'estil fa que les lletres inicials siguin de color vermell, com aixó:
    3. -
- -

{{ EmbedLiveSample('Action_Creating_a_stylesheet', '', '', '', 'Web/Guide/CSS/Getting_started/Why_use_CSS') }}

- -

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

- -
-
Repte
- -

A més de vermell, CSS permet a alguns altres noms de colors.

- -

Sense buscar una referència, trobar cinc noms més de colors que treballin en el full d'estil.

- -
-
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
-Veure la solució per el repte
- -

I ara què?

- -

{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_started/How_CSS_works", "Com funciona el CSS.")}}Ara teniu un document de mostra vinculat a un full d'estil separat, ja esteu llestos per aprendre més sobre com el navegador les combina quan es mostra el document.

diff --git "a/files/ca/web/guide/css/inici_en_css/que_\303\251s_css/index.html" "b/files/ca/web/guide/css/inici_en_css/que_\303\251s_css/index.html" deleted file mode 100644 index 28db41fa98..0000000000 --- "a/files/ca/web/guide/css/inici_en_css/que_\303\251s_css/index.html" +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: Que és CSS? -slug: Web/Guide/CSS/Inici_en_CSS/Que_és_CSS -tags: - - Beginner - - CSS - - 'CSS:Getting_Started' - - Example - - Guide - - NeedsBeginnerUpdate - - Web -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/Web/Guide/CSS/Getting_Started", "Inici en CSS")}} Aquesta primera secció del tutorial CSS Getting Started explica breument les fulles d'estil en cascada (CSS). També es crearà un document senzill per utilitzar en els exercicis CSS en les seccions següents.

- -

Informació: Que és CSS?

- -

Fulles d'estil en cascada (CSS) és un llenguatge per especificar com els documents es presenten als usuaris. Aquests documents estan escrits en un llenguatge de marcat com ara HTML.

- -

Un document és un recull d'informació que s'estructura utilitzant un llenguatge de marcat.

- -

La presentació d'un document a un usuari vol dir convertir-lo en una format utilitzable per al seu públic. Navegadors, com Firefox, Chrome o Internet Explorer, estan dissenyats per a presentar documents visuals, per exemple, en una pantalla d'ordinador, un projector o una impressora.

- -
-

Exemples

- -
    -
  • Una pàgina web com la què esteu llegint és un document. La informació que es veu en una pàgina web sol estructurar-se utilitzant el llenguatge de marcat HTML (HyperText Markup Language).
    • -
  • Quadres de diàleg en una aplicació, també anomenades finestres modals, són sovint documents.Tals diàlegs també es poden estructurar utilitzant un llenguatge de marcat, com XUL (XML User Interface Language), que es troba en algunes aplicacions de Mozilla.
    • -
-
- -

En aquest tutorial, caixes amb el subtítol, Més detalls, com la de baix, contenen informació opcional i enllaços a més recursos en un concepte o tema tractat en una secció. Llegir-los com els veieu, seguir els enllaços, o ometre aquestes caixes i tornar a llegir-los més tard.

- -
-
Més detalls
- -

Un document no és el mateix que un arxiu. Però, es pot desar un document en un arxiu.

- -

El document que esteu llegint en aquest moment no està emmagatzemat en un arxiu. Quan el navegador demana aquesta pàgina, el servidor consulta una base de dades i genera el document, recollint les parts del document de diferents arxius. No obstant això, aquest tutorial també pot treballar amb documents emmagatzemats en arxius.

- -

Podeu trobar més informació sobre els documents i llenguatges de marcatge en altres àrees d'aquest lloc web:

- - - - - - - - - - - - - - - - - - - - -
HTMLper pàgines web
XMLper documents estructurats en general
SVGper gràfics
XULper interfícies d'usuari en Mozilla
- -

A la Part II d'aquest tutorial podreu veure exemples d'aquests llenguatges de marques.

-
- -
-
Més detalls
- -

En la terminologia formal de CSS, el programa que presenta un document a un usuari se anomenat un agent d'usuari (UA). Un navegador és un tipus d'UA. CSS no és només per a navegadors o presentació visual, però en la part I d'aquesta guia, solament es treballarà amb CSS en un navegador.

- -

Per a les definicions formals de terminologia relatives a la CSS, consulteu Definitions en l'especificació CSS del World Wide Web Consortium (W3C), una comunitat internacional que estableix estàndards oberts per al web.

-
- -

Acció: Creació d'un document

- -
    -
  1. Creeu un nou directori en l'ordinador per guardar i organitzar els exercicis del tutorial.
    2. -
  2. Obriu un editor de text i crear un nou arxiu de text. Aquest arxiu contindrà el document per als pròxims exercicis tutorials.
    3. -
  3. Copieu i enganxeu el codi HTML que es mostra a continuació. Deseu el fitxer amb el nom doc1.html - 
    <!DOCTYPE html>
-<html>
-  <head>
-  <meta charset="UTF-8">
-  <title>Sample document</title>
-  </head>
-
-  <body>
-    <p>
-      <strong>C</strong>ascading
-      <strong>S</strong>tyle
-      <strong>S</strong>heets
-    </p>
-  </body>
-</html>
    - -

    {{ LiveSampleLink('Action_Creating_a_document', 'View above Demo') }}

    -
    4. -
  4. Obriu una nova pestanya o una nova finestra, a continuació, obriu el fitxer que acabeu de crear. -

    Hauria de veure el text amb les lletres inicials en negreta, com aquestes:

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

    El que veieu en el navegador pot no ser exactament el mateix a causa de la configuració del navegador i d'aquesta wiki. Algunes diferències en el tipus de lletra, espaiat i colors no són importants.

    -
    5. -
- -

I ara què?

- -

{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "Per què utilitzar CSS?")}} El document encara no utilitza CSS. A la següent secció farem servir CSS per l'estil del document.

diff --git a/files/ca/web/guide/css/inici_en_css/selectors/index.html b/files/ca/web/guide/css/inici_en_css/selectors/index.html deleted file mode 100644 index a3e8534ee5..0000000000 --- a/files/ca/web/guide/css/inici_en_css/selectors/index.html +++ /dev/null @@ -1,456 +0,0 @@ ---- -title: Selectors -slug: Web/Guide/CSS/Inici_en_CSS/Selectors -tags: - - Beginner - - CSS - - CSS Selector - - 'CSS:Getting_Started' - - Example - - Guide - - NeedsBeginnerUpdate - - NeedsLiveSample - - NeedsUpdate - - Web -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", "Cascada & herència")}}Aquesta 5th secció del tutorial CSS Getting Started; s'explica com es poden aplicar estils de forma selectiva, i com els diferents tipus de selectors tenen diferents prioritats. Afegir alguns atributs a les etiquetes en el document d'exemple, i utilitzar aquests atributs en el full d'estils d'exemple.

- -

Informació: Selectors

- -

CSS té la seva pròpia terminologia per descriure el llenguatge CSS. Anteriorment en aquest tutorial, heu creat una línia al full d'estils com aquesta:

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

En la terminologia de CSS, tota aquesta línia és una regla. Aquesta regla s'inicia amb strong, que és un selector (o una llista de selectors). Es selecciona quins elements del DOM s'aplica la regla.

- -
-
Més detalls
- -

La part dins de les claus és la declaració.

- -

L'identificador color és una propietat, i el vermell és un valor.

- -

El punt i coma després del parell propietat-valor fa de separació d'altres parells propietat-valor en la mateixa declaració.

- -

En aquest tutorial es refereix a un selector com strong com un selector d'etiquetes. L'especificació CSS es refereix a ell com un selector de tipus.

-
- -

Aquesta pàgina del tutorial explica més sobre els selectors que es poden utilitzar en les regles CSS.

- -

A més dels noms de les etiquetes, podeu utilitzar els valors dels atributs en els selectors. Això permet que les regles siguin més específiques.

- -

Dos atributs tenen un estatus especial per CSS. Són class i id.

- -

Selectors class

- -

Utilitzeu l'atribut class en un element per assignar l'element un nom de classe. Depèn de vosaltres el nom que trieu per a la classe. Múltiples elements d'un document poden tenir el mateix valor de classe.

- -

En el full d'estil, escriviu un punt (. punt) abans del nom de la classe, quan s'utilitza en un selector.

- -

Selectors ID

- -

Utilitzeu l'atribut id en un element per assignar un identificador a l'element. Depèn de vosaltres el nom que trieu per a l'identificador. El nom de l'identificador ha de ser únic en el document.

- -

En el full d'estil, escriviu un signe (# hash) abans de l'identificador quan s'utilitza en un selector.

- -
-
Exemple
-Aquesta etiqueta HTML té tant un atribut class com un atribut id: - -
<p class="key" id="principal">
-
- -

El valor id, principal, ha de ser únic en el document, però altres etiquetes en el document poden tenir el mateix nom de la class, key.

- -

En un full d'estil CSS, aquesta regla fa que tots els elements amb la class key siguin verds. (Pot ser que no tots siguin elements {{ HTMLElement("p") }}.)

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

Aquesta regla fa que l'únic element amb el id principal sigui negreta:

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

Selectors d'atributs

- -

No està limitat als dos atributs especials, class i id. Podeu especificar altres atributs mitjançant claudàtors. Dins dels claudàtors es posa el nom de l'atribut, opcionalment seguit d'un operador coincident i un valor. A més, es pot fer entre majúscules i minúscules afegint una "i" després del valor, però no molts navegadors són compatibles amb aquesta funció fins al moment. Exemples:

- -
-
[disabled]
-
Selecciona tots els elements amb un atribut "disabled".
-
[type='button']
-
Selecciona els elements amb un tipus "button".
-
[class~=key]
-
Selecciona elements amb la class "key" (però no, per exemple, "keyed", "monkey", "buckeye"). Funcionalment equivalent a .key.
-
[lang|=es]
-
Selecciona els elements especificats com espanyol. Això inclou "es" i "es-MX", però no "eu-ES" (que és basca).
-
[title*="example" i]
-
Selecciona elements title els quals conté "example", ignorant majúscules i minúscules . En els navegadors que no admeten l'indicador "i", aquest selector probablement no coincidirà amb cap element.
-
a[href^="https://"]
-
Especifica com ha de començar el valor de l'atribut; en aquest cas, es selecciona enllaços segurs.
-
img[src$=".png"]
-
Selecciona elements el valor dels quals finalitza amb la cadena proporcionada. Indirectament selecciona imatges PNG; les imatges són PNGs però la URL de les quals no acabi en ".png" no seràn seleccionades (e.g. `src="some-image.png?_=cachebusterhash"`).
-
- -

Selectors de pseudo-classes

- -

Un pseudo-classe CSS és una paraula clau afegida als selectors que especifica un estat especial de l'element a seleccionar. Per exemple {{ Cssxref(":hover") }} aplicarà un estil quan l'usuari es desplaci sobre l'element especificat pel selector.

- -

Les pseudo-classes, juntament amb els pseudo-elements, permeten aplicar un estil a un element no només en relació amb el contingut de l'estructura del document, sinó també en relació als factors externs com l'historial del navegador ({{ cssxref(":visited") }}, per exemple), l'estat del seu contingut (com {{ cssxref(":checked") }} en alguns elements de formulari), o la posició del ratolí (com {{ cssxref(":hover") }} que permet saber si el ratolí està sobre un element o no). Per veure una llista completa dels selectors, visiteu especificació CSS3 Selectors working.

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

Llista de pseudo-classes

- -
    -
  • {{ Cssxref(":link") }}
    • -
  • {{ Cssxref(":visited") }}
    • -
  • {{ Cssxref(":active") }}
    • -
  • {{ Cssxref(":hover") }}
    • -
  • {{ Cssxref(":focus") }}
    • -
  • {{ Cssxref(":first-child") }}
    • -
  • {{ Cssxref(":last-child") }}
    • -
  • {{ Cssxref(":nth-child") }}
    • -
  • {{ Cssxref(":nth-last-child") }}
    • -
  • {{ Cssxref(":nth-of-type") }}
    • -
  • {{ Cssxref(":first-of-type") }}
    • -
  • {{ Cssxref(":last-of-type") }}
    • -
  • {{ Cssxref(":empty") }}
    • -
  • {{ Cssxref(":target") }}
    • -
  • {{ Cssxref(":checked") }}
    • -
  • {{ Cssxref(":enabled") }}
    • -
  • {{ Cssxref(":disabled") }}
    • -
- -

Llista de selectors

- -

Una regla pot ser compartida per molts selectors mitjançant una coma (,) per separar els selectors.

- -
-
Exemple
-En l'exemple, ambdós elements que tenen la classe "content-1" i elements que tenen la classe "content-2" per visualitzar el text en negreta. - -
.content-1, .content-2 {
-  font-weight: bold;
-}
-
-
- -

Informació: Especificitat

- -

Diverses regles poden tenir selectors que coincideixin amb el mateix element. Si una propietat es dóna en una sola regla, no hi ha conflicte i la propietat s'estableix en l'element. Si més d'una regla s'aplica a un element i estableix la mateixa propietat, llavors CSS dóna prioritat a la regla que té el selector més específic. Un selector de ID és més específic que una classe, pseudo-classe o selector d'atribut, que al seu torn són més específics que un selector d'etiquetes o pseudo-element.

- -
-
Més detalls
- -

També es poden combinar selectors, fent un selector més específic. Per exemple, el selector .key selecciona tots els elements que tenen el nom de classe key. El selector p.key selecciona només elements {{ HTMLElement("p") }} que tenen el nom de classe key.

-
- -

Si el full d'estil té un conflicte de regles i són igualment específiques, llavors CSS doneu prioritat a la regla que és més posterior en el full d'estil.

- -

Quan tingueu un problema amb regles en conflicte, tracteu de resoldre-ho fent una de les regles més específiques, de manera que tingui prioritat. Si no podeu fer-ho, tracteu de moure una de les regles el més prop del final de la fulla d'estils perquè tingui prioritat.

- -

Informació: Els selectors basats en relacions

- -

CSS té algunes maneres de seleccionar elements en funció de les relacions entre els elements. Podeu utilitzar aquests per fer selectors que siguin més específics.

- - - - - - - - - - - - - - - - - - - - - - - - - -
Selectors comuns basats en les relacions
SelectorSeleccions
A EQualsevol element E que és un descendent d'un element A (que és: un fill, o un fill d'un fill, etc.)
A > EQualsevol element E que és un fill (és a dir, descendent directe) d'un element A
E:first-childQualsevol element E que és el primer fill del seu pare
B + EQualsevol element E que és el següent germà d'un element B (és a dir: el següent fill del mateix pare)
- -

Es poden combinar aquests per expressar relacions complexes.

- -

També es pot utilitzar el símbol * (asterisc) en el sentit de "qualsevol element".

- -
-
Exemple
- -

Una taula HTML té un atribut id, però les seves files i cel·les no tenen identificadors individuals:

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

Aquestes regles fan que la primera cel·la de cada fila estigui subratllat, i el germà de la primera cel·la de cada fila estigui tachat (en l'exemple la 2a cel·le). Només afecta a una taula específica en el document:

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

Aquest és el resultat:

- - - - - - - -
- - - - - - - - -
Prefix0001default
-
-
- -
-
Més detalls
- -

En la forma habitual, si feu un selector més específic, llavors s'augmenta la seva prioritat.

- -

Si utilitzeu aquestes tècniques, s'evita la necessitat d'especificar els atributs class o id en tantes etiquetes en el document. En el seu lloc, CSS fa la feina.

- -

En grans dissenys on la velocitat és important, podeu fer que les vostres fulles d'estil siguin més eficients, evitant regles complexes que depenen de les relacions entre els elements.

- -

Per a més exemples sobre taules, consulteu Taules en la pàgina Referència CSS..

-
- -

Acció: Ús dels selectors class i ID

- -
    -
  1. Editeu l'arxiu HTML, i duplicar el paràgraf copiant i enganxant.
    2. -
  2. A continuació, afegir els atributs id i class a la primera còpia, i un atribut id a la segona còpia com es mostra a continuació. Com a alternativa, copiar i enganxar tot l'arxiu de nou: - 
    <!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. Ara editeu el fitxer CSS. Substituir tot el contingut per: - 
    strong { color: red; }
-.carrot { color: orange; }
-.spinach { color: green; }
-#first { font-style: italic; }
-
    -
    4. -
  4. Guardeu els arxius i actualitzar el navegador per veure el resultat: - - - - - - - - - -
    Cascading Style Sheets
    Cascading Style Sheets
    - -

    Podeu tractar de reordenar les línies de l'arxiu CSS per mostrar que l'ordre no té efecte.

    - -

    Els selectors class .carrot i .spinach tenen prioritat sobre el selector d'etiqueta strong.

    - -

    El selector ID #first té prioritat sobre els selectors class i tag.

    -
    5. -
- -
-
Reptes
- -
    -
  1. Sense canviar el arxiu HTML, afegiu una sola regla a l'arxiu CSS que mantingui totes les lletres inicials en el mateix color que estan ara, però faci que tot l'altre text en el segon paràgraf sigui blau: - - - - - - - - - -
    Cascading Style Sheets
    Cascading Style Sheets
    -
    2. -
  2. Ara canvieu la regla que acabeu d'afegir (sense canviar res més), per fer el primer paràgraf també blau: - - - - - - - - - -
    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
-Veure la solució per el repte.
- -

Acció: L'ús de selectors de pseudo-classes

- -
    -
  1. Creeu un arxiu HTML amb el següent contingut: - - 
    <!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. Ara editeu el fitxer CSS. Substituir tot el contingut per: - 
    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. Guardeu els arxius i actualitzar el navegador per veure el resultat (posar el ratolí sobre el següent enllaç per veure l'efecte): - - - - - - -
    Anem-nos  Home page  
    -
    4. -
- -

Acció: L'ús de selectors basats en les relacions i pseudo-classes

- -

Amb els selectors basats en relacions i pseudo-classes es poden crear complexes algoritmes en cascada. Aquesta és una tècnica comuna que s'utilitza, per exemple, amb la finalitat de crear menús desplegables en CSS pur (això només és CSS, sense necessitat d'utilitzar JavaScript). L'essència d'aquesta tècnica és la creació d'una regla com la següent:

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

per a ser aplicat a una estructura HTML com la següent:

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

Vegeu el exemple complet d'un menú desplegable basat en CSS com a possible referència.

- -

I ara què?

- -

La vostre fulla d'estils, d'exemple, està començant a semblar densa i complicada. La següent secció descriu la manera de fer més fàcil de llegir la CSS.{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS", "CSS llegible")}}

diff --git a/files/ca/web/guide/css/inici_en_css/svg_i_css/index.html b/files/ca/web/guide/css/inici_en_css/svg_i_css/index.html deleted file mode 100644 index 6dac20b5a6..0000000000 --- a/files/ca/web/guide/css/inici_en_css/svg_i_css/index.html +++ /dev/null @@ -1,223 +0,0 @@ ---- -title: SVG i CSS -slug: Web/Guide/CSS/Inici_en_CSS/SVG_i_CSS -tags: - - CSS - - 'CSS:Getting_Started' - - Example - - Guide - - Intermediate - - NeedsLiveSample - - NeedsUpdate - - SVG - - Web -translation_of: Web/SVG/Tutorial/SVG_and_CSS ---- -
{{CSSTutorialTOC}}
- -

Aquesta pàgina il·lustra l'aplicació de CSS per al llenguatge especialitzat en la creació de gràfics: SVG.

- -

Crea una demostració senzilla que s'executa en el vostre navegador habilitat per SVG.

- -

Aquesta és la 2nd secció de la Part II del tutorial CSS.
- Secció anterior: JavaScript
- Secció següent: XML data

- -

Informació: SVG

- -

SVG (Scalable Vector Graphics) és un llenguatge basat en XML per a la creació de gràfics.

- -

Es pot utilitzar per a imatges estàtiques, i també per a animacions i interfícies d'usuari.

- -

Igual que altres llenguatges basats en XML, SVG suporta fulles d'estil CSS perquè pugui separar l'estil d'un gràfic del seu contingut.

- -

A més, les fulles d'estil que s'utilitzen amb altres llenguatges de marcat de documents poden especificar l'adreça URL d'un gràfic SVG on es requereix una imatge. Per exemple, una fulla d'estil que s'utilitza amb un document HTML pot especificar l'adreça URL d'un gràfic SVG en el valor d'una propietat background.

- - - - - - - - -
Més detalls
-

En el moment d'escriure (mitjans 2011), la majoria dels navegadors moderns tenen suport bàsic per a SVG, incloent Internet Explorer 9 o superior. Algunes de les característiques de SVG són compatibles parcialment o no en alguns navegadors. Consulteu les taulae SVG en caniuse.com per a una visió general de suport per SVG, o les taules de compatibilitat referència de l'element SVG per al suport de determinats elements.

- -

Podeu afegir suport SVG a altres versions mitjançant la instal·lació d'un plug-in, com el proporcionat per Adobe.

- -

Per obtenir més informació sobre SVG en Mozilla, consulteu la pàgina principal de SVG al wiki.

-
- -

Acció: Una demostració SVG

- -

Feu un nou document SVG com un arxiu de text pla, doc8.svg. Copieu i enganxeu el contingut d'aquí, assegurant-se que us desplaceu per obtenir tota ella;

- -
<?xml version="1.0" standalone="no"?>
-
-<?xml-stylesheet type="text/css" href="style8.css"?>
-
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
-  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-
-<svg width="600px" height="600px" viewBox="-300 -300 600 600"
-  xmlns="http://www.w3.org/2000/svg" version="1.1"
-  xmlns:xlink="http://www.w3.org/1999/xlink">
-
-<title>SVG demonstration</title>
-<desc>Mozilla CSS Getting Started - SVG demonstration</desc>
-
-<defs>
-  <g id="segment" class="segment">
-    <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
-    <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
-    </g>
-  <g id="quadrant">
-    <use xlink:href="#segment"/>
-    <use xlink:href="#segment" transform="rotate(18)"/>
-    <use xlink:href="#segment" transform="rotate(36)"/>
-    <use xlink:href="#segment" transform="rotate(54)"/>
-    <use xlink:href="#segment" transform="rotate(72)"/>
-    </g>
-  <g id="petals">
-    <use xlink:href="#quadrant"/>
-    <use xlink:href="#quadrant" transform="rotate(90)"/>
-    <use xlink:href="#quadrant" transform="rotate(180)"/>
-    <use xlink:href="#quadrant" transform="rotate(270)"/>
-    </g>
-  <radialGradient id="fade" cx="0" cy="0" r="200"
-      gradientUnits="userSpaceOnUse">
-    <stop id="fade-stop-1" offset="33%"/>
-    <stop id="fade-stop-2" offset="95%"/>
-    </radialGradient>
-  </defs>
-
-<text id="heading" x="-280" y="-270">
-  SVG demonstration</text>
-<text  id="caption" x="-280" y="-250">
-  Move your mouse pointer over the flower.</text>
-
-<g id="flower">
-  <circle id="overlay" cx="0" cy="0" r="200"
-    stroke="none" fill="url(#fade)"/>
-  <use id="outer-petals" xlink:href="#petals"/>
-  <use id="inner-petals" xlink:href="#petals"
-    transform="rotate(9) scale(0.33)"/>
-  </g>
-
-</svg>
-
- -

Feu una nou arxiu CSS, style8.css. Copieu i enganxeu el contingut d'aquí, assegurant-se que us desplaceu per obtenir tota ella;

- -
/*** SVG demonstration ***/
-
-/* page */
-svg {
-  background-color: beige;
-  }
-
-#heading {
-  font-size: 24px;
-  font-weight: bold;
-  }
-
-#caption {
-  font-size: 12px;
-  }
-
-/* flower */
-#flower:hover {
-  cursor: crosshair;
-  }
-
-/* gradient */
-#fade-stop-1 {
-  stop-color: blue;
-  }
-
-#fade-stop-2 {
-  stop-color: white;
-  }
-
-/* outer petals */
-#outer-petals {
-  opacity: .75;
-  }
-
-#outer-petals .segment-fill {
-  fill: azure;
-  stroke: lightsteelblue;
-  stroke-width: 1;
-  }
-
-#outer-petals .segment-edge {
-  fill: none;
-  stroke: deepskyblue;
-  stroke-width: 3;
-  }
-
-#outer-petals .segment:hover > .segment-fill {
-  fill: plum;
-  stroke: none;
-  }
-
-#outer-petals .segment:hover > .segment-edge {
-  stroke: slateblue;
-  }
-
-/* inner petals */
-#inner-petals .segment-fill {
-  fill: yellow;
-  stroke: yellowgreen;
-  stroke-width: 1;
-  }
-
-#inner-petals .segment-edge {
-  fill: none;
-  stroke: yellowgreen;
-  stroke-width: 9;
-  }
-
-#inner-petals .segment:hover > .segment-fill {
-  fill: darkseagreen;
-  stroke: none;
-  }
-
-#inner-petals .segment:hover > .segment-edge {
-  stroke: green;
-  }
-
- -

Obriu el document en el navegador habilitat per SVG. Moure el punter del ratolí sobre el gràfic.

- -

Aquest wiki no suporta SVG en les pàgines, de manera que no es pot mostrar la demostració aquí. El gràfic es veu així:

- - - - - - - -
SVG demonstration
- -

Notes sobre aquesta demostració:

- -
    -
  • El document SVG vincula la fulla d'estil de la forma habitual.
    • -
  • SVG té les seves pròpies propietats i valors CSS. Algunes d'elles són similars a les propietats CSS per a HTML.
    • -
- - - - - - - - -
Repte
Canvieu la fulla d'estil perquè els pètals interns es tornin tots de color rosa quan el punter del ratolí està sobre qualsevol d'ells, sense canviar la forma en què els pètals externs funcionen.
- -

Veure la solució per el repte.

- -

I ara què?

- -

En aquesta demostració, el vostre navegador habilitat per SVG  ja sap com mostrar els elements SVG. La fulla d'estil només modifica la visualització de certes maneres. Això també és cert per als documents HTML i XUL. Però es pot utilitzar CSS per a documents XML d'ús general, on no hi ha un camí predefinit per mostrar els elements. La pàgina següent mostra això: dades XML

diff --git a/files/ca/web/guide/css/inici_en_css/taules/index.html b/files/ca/web/guide/css/inici_en_css/taules/index.html deleted file mode 100644 index d7875ae370..0000000000 --- a/files/ca/web/guide/css/inici_en_css/taules/index.html +++ /dev/null @@ -1,475 +0,0 @@ ---- -title: Taules -slug: Web/Guide/CSS/Inici_en_CSS/Taules -tags: - - CSS - - CSS Tables - - 'CSS:Getting_Started' - - Example - - Guide - - Intermediate - - NeedsBeginnerUpdate - - NeedsLiveSample - - NeedsUpdate - - Web -translation_of: Learn/CSS/Building_blocks/Styling_tables -translation_of_original: Web/Guide/CSS/Getting_started/Tables ---- -

{{CSSTutorialTOC}}{{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Layout", "Disseny")}}

- -

Aquesta és la 13th secció del tutorial CSS Getting Started tutorial; descriu selectors més avançats, i algunes formes específiques en el disseny de taules. Es crea un nou document d'exemple que conté una taula, i un full d'estil per a això.

- -

Informació: Taules

- -

Una taula és una disposició de la informació en una reixeta rectangular. Algunes taules poden ser complexes, i per a taules complexes, diferents navegadors poden donar resultats diferents.

- -

En dissenyar el vostre document, utilitzeu una taula per expressar les relacions entre els elements d'informació. Llavors no importa si els diferents navegadors presenten la informació de manera lleugerament diferent, ja que el significat segueix sent clar.

- -

No utilitzeu taules en formes inusuals per produir determinats dissenys visuals. Les tècniques de la pàgina anterior d'aquest tutorial (Disseny) són millors per a aquest propòsit.

- -

Estructura de la taula

- -

En una taula, cada peça d'informació es mostra en una cel·la.

- -

Les cel·les en una línia de la pàgina constitueix una fila.

- -

En algunes taules, les files poden ser agrupades. Un grup especial de files en l'inici de la taula és la capçalera (header). Un grup especial de files al final de la taula és el peu de pàgina (footer). Les principals files de la taula són el cos (body), i que també podrien estar en grups.

- -

Les cel·les en una línia de la pàgina conformen una columna, però les columnes tenen un ús limitat en la CSS de les taules.

- -
-
Exemple
- -

La taula de Selectors basats en relacion en la pàgina Selectors té deu cel·les en cinc files.

- -

La primera fila és la capçalera. Les altres quatre files són el cos. No hi ha peu de pàgina.

- -

Té dues columnes.

-
- -

Aquest tutorial només cobreix taules simples, on els resultats són bastant predictibles. En una taula simple, cada cel·la ocupa només una fila i columna. Es pot utilitzar CSS per a taules complexes en les cel·les que s'estenen (s'estenen a través) més d'una fila o columna, però les taules com aquestes estan més enllà de l'abast d'aquest tutorial bàsic.

- -

Vores

- -

Les cel·les no tenen marges.

- -

Les cel·les tenen vores i farciment. Per defecte, les vores estan separades pel valor de la propietat {{cssxref("border-spacing")}} de la taula. També podeu eliminar completament l'espai mitjançant l'establiment de la propietat {{cssxref ("border-collapse")}} de la taula a col·lapsar (collapse).

- -
-
Exemple
- -

Aquí hi ha tres taules.

- -

La taula de l'esquerra té 0,5 em espaiat de vores. La taula del centre té espaiat de vores zero. La taula de la dreta ha col·lapsat les vores:

- - - - - - - - -
- -

{{embedLiveSample('Borders', 600)}}

-
- -

Llegendes

- -

Un element {{HTMLElement("caption")}} és una etiqueta que s'aplica a tota la taula. Per defecte, es mostra a la part superior de la taula.

- -

Per moure'l a la part inferior, establiu la seva  propietat {{cssxref("caption-side")}} a baix. La propietat s'hereta, de manera que, alternativament, es pot establir sobre la taula o un altre element antecessor.

- -

Per l'estil del text de la Llegenda, utilitzeu qualsevol de les propietats usuals de text.

- -
-
Exemple
- -

Aquesta taula té una llegenda a la part inferior.

- -
#demo-table > caption {
-  caption-side: bottom;
-  font-style: italic;
-  text-align: right;
-}
-
- - - -

{{embedLiveSample('Captions', 300)}}

-
- -

Cel·les buides

- -

Es poden mostrar cel·les buides (és a dir, les seves vores i fons) especificant {{cssxref("empty-cells")}}: show; per a l'element de la taula.

- -

Es poden amagar mitjançant l'especificació empty-cells: hide;. Llavors, si l'element pare d'una cel·la té un fons, es mostra a través de la cel.la buida.

- -
-
Exemple
- -

Aquestes taules tenen un fons de color verd pàl·lid. Les seves cel·les tenen un fons gris clar i unes vores gris fosc.

- -

A la taula de l'esquerra, es mostra la cel·la buida. A la dreta, està oculta:

- - - - - - - - -
- - - - - - - - - - - -
 Hearts
DiamondsSpades
- 		- - - - - - - - - - - -
 Hearts
DiamondsSpades
-
-
- -
-
Detalls
- -

Per obtenir informació detallada sobre les taules, vegeu Taules en l'especificació CSS.

- -

La informació no va més enllà d'aquest tutorial, però no cobreix les diferències entre els navegadors que poden afectar a taules complexes.

-
- -

Acció: Estil d'una taula

- -
    -
  1. Feu un nou document HTML, doc3.html. Copieu i enganxeu el contingut d'aquí, assegurant-se que es desplaça per obtenir tota ella; - - 
    <!DOCTYPE html>
-<html>
-  <head>
-    <title>Sample document 3</title>
-    <link rel="stylesheet" href="style3.css">
-  </head>
-  <body>
-    <table id="demo-table">
-      <caption>Oceans</caption>
-      <thead>
-        <tr>
-          <th></th>
-          <th>Area</th>
-          <th>Mean depth</th>
-        </tr>
-        <tr>
-          <th></th>
-          <th>million km<sup>2</sup></th>
-          <th>m</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <th>Arctic</th>
-          <td>13,000</td>
-          <td>1,200</td>
-        </tr>
-        <tr>
-          <th>Atlantic</th>
-          <td>87,000</td>
-          <td>3,900</td>
-        </tr>
-        <tr>
-          <th>Pacific</th>
-          <td>180,000</td>
-          <td>4,000</td>
-        </tr>
-        <tr>
-          <th>Indian</th>
-          <td>75,000</td>
-          <td>3,900</td>
-        </tr>
-        <tr>
-          <th>Southern</th>
-          <td>20,000</td>
-          <td>4,500</td>
-        </tr>
-      </tbody>
-      <tfoot>
-        <tr>
-          <th>Total</th>
-          <td>361,000</td>
-          <td></td>
-        </tr>
-        <tr>
-          <th>Mean</th>
-          <td>72,000</td>
-          <td>3,800</td>
-        </tr>
-      </tfoot>
-    </table>
-  </body>
-</html>
-
    -
    2. -
  2. Feu un nova fulla d'estil, style3.css. Copieu i enganxeu el contingut d'aquí, assegurant-se que es desplaça per obtenir tota ella; - 
    /*** Style for doc3.html (Tables) ***/
-
-#demo-table {
-  font: 100% sans-serif;
-  background-color: #efe;
-  border-collapse: collapse;
-  empty-cells: show;
-  border: 1px solid #7a7;
-}
-
-#demo-table > caption {
-  text-align: left;
-  font-weight: bold;
-  font-size: 200%;
-  border-bottom: .2em solid #4ca;
-  margin-bottom: .5em;
-}
-
-
-/* basic shared rules */
-#demo-table th,
-#demo-table td {
-  text-align: right;
-  padding-right: .5em;
-}
-
-#demo-table th {
-  font-weight: bold;
-  padding-left: .5em;
-}
-
-
-/* header */
-#demo-table > thead > tr:first-child > th {
-  text-align: center;
-  color: blue;
-}
-
-#demo-table > thead > tr + tr > th {
-  font-style: italic;
-  color: gray;
-}
-
-/* fix size of superscript */
-#demo-table sup {
-  font-size: 75%;
-}
-
-/* body */
-#demo-table td {
-  background-color: #cef;
-  padding:.5em .5em .5em 3em;
-}
-
-#demo-table tbody th:after {
-  content: ":";
-}
-
-
-/* footer */
-#demo-table tfoot {
-  font-weight: bold;
-}
-
-#demo-table tfoot th {
-  color: blue;
-}
-
-#demo-table tfoot th:after {
-  content: ":";
-}
-
-#demo-table > tfoot td {
-  background-color: #cee;
-}
-
-#demo-table > tfoot > tr:first-child td {
-  border-top: .2em solid #7a7;
-}
-
    -
    3. -
  3. Obriu el document en el navegador. Ha de tenir un aspecte molt similar a aquest:
    - {{EmbedLiveSample("Action_Styling_a_table", 400, 380)}}
    4. -
  4. Compareu les regles de la fulla d'estil amb la taula que es mostra, per assegurar-se que compreneu l'efecte de cada regla. Si trobeu una regla que no esteu segur sobre ella, comentar-la i refresqueu el navegador per veure què passa. Aquí hi ha algunes notes sobre aquesta taula: -
      -
    • La llegenda es troba fora de la vora de la taula.
      • -
    • Si teniu una mida de punt mínim establert en les Opcions, podria afectar el superíndex en km2.
      • -
    • Hi ha tres cel·les buides. Dos d'elles permeten mostrar el fons de la taula a través. El tercer té un fons i una vora superior.
      • -
    • Els dos punts son afegits per la fulla d'estil.
      • -
    -
    5. -
- -
-
Repte
- -

Modifiqueu la fulla d'estils per fer que la taula tingui aquest aspecte:

- - - - - - - -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 AreaMean depth
 million km2m
Arctic:13,0001,200
Atlantic:87,0003,900
Pacific:180,0004,000
Indian:75,0003,900
Southern:20,0004,500
Total:361,000 
Mean:72,0003,800
-
- -

Oceans

-
-
-
- -

Veure la solució per el repte.

- -

I ara què?

- -

{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Media", "Media")}}Aquesta és l'última pàgina d'aquest tutorial que se centra en les propietats i els valors CSS. Per a un resum complet de les propietats i valors, vegeu Taula de propietats completa en l'especificació CSS

- -

En la següent pàgina es veu de nou el propòsit i l'estructura de les fulles d'estil CSS.

diff --git a/files/ca/web/guide/graphics/index.html b/files/ca/web/guide/graphics/index.html new file mode 100644 index 0000000000..a65c99ec66 --- /dev/null +++ b/files/ca/web/guide/graphics/index.html @@ -0,0 +1,49 @@ +--- +title: Gràfics en la Web +slug: Web/Guide/Gràfics +tags: + - 2D + - 3D + - Canvas + - Graphics + - HTML5 + - SVG + - Web + - WebGL + - WebRTC +translation_of: Web/Guide/Graphics +--- +

Els llocs web i les aplicacions sovint necessiten presentar gràfics. Les imatges estàtiques poden visualitzar-se fàcilment usant l'element {{HTMLElement("img")}} o configurant el fons dels elements HTML  utilitzant la propietat {{cssxref("background-image")}}. També podeu construir gràfics sobre la marxa o manipular imatges després de fetes. Aquests articles proporcionen informació sobre com podeu aconseguir-ho.

+ +
+
+

Gràfics 2D

+ +
+
Canvas
+
L'element {{HTMLElement("canvas")}} proporciona APIs per dibuixar gràfics 2D utilitzant JavaScript.
+
SVG
+
Els Gràfics Vectorials Escalables (SVG) permeten utilitzar línies, corbes i altres formes geomètriques per representar gràfics. Amb vectors, podeu crear imatges que s'escalen netament a qualsevol grandària.
+
+ +

Veure Tot...

+
+ +
+

Gràfics 3D

+ +
+
WebGL
+
Una guia per començar amb WebGL, l'API de gràfics 3D per a la web. Aquesta tecnologia permet utilitzar OpenGL ES estàndard en contingut web.
+
+ +

Vídeo

+ +
+
Ús d'àudio i vídeo HTML5
+
Incrustar vídeo i/o àudio en una pàgina web i controlar la seva reproducció.
+
WebRTC
+
El RTC en WebRTC significa Comunicacions en Temps Real, tecnologia que permet la transmissió d'àudio/vídeo i l'intercanvi de dades entre clients del navegador (parells).
+
+
+
diff --git "a/files/ca/web/guide/gr\303\240fics/index.html" "b/files/ca/web/guide/gr\303\240fics/index.html" deleted file mode 100644 index a65c99ec66..0000000000 --- "a/files/ca/web/guide/gr\303\240fics/index.html" +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: Gràfics en la Web -slug: Web/Guide/Gràfics -tags: - - 2D - - 3D - - Canvas - - Graphics - - HTML5 - - SVG - - Web - - WebGL - - WebRTC -translation_of: Web/Guide/Graphics ---- -

Els llocs web i les aplicacions sovint necessiten presentar gràfics. Les imatges estàtiques poden visualitzar-se fàcilment usant l'element {{HTMLElement("img")}} o configurant el fons dels elements HTML  utilitzant la propietat {{cssxref("background-image")}}. També podeu construir gràfics sobre la marxa o manipular imatges després de fetes. Aquests articles proporcionen informació sobre com podeu aconseguir-ho.

- -
-
-

Gràfics 2D

- -
-
Canvas
-
L'element {{HTMLElement("canvas")}} proporciona APIs per dibuixar gràfics 2D utilitzant JavaScript.
-
SVG
-
Els Gràfics Vectorials Escalables (SVG) permeten utilitzar línies, corbes i altres formes geomètriques per representar gràfics. Amb vectors, podeu crear imatges que s'escalen netament a qualsevol grandària.
-
- -

Veure Tot...

-
- -
-

Gràfics 3D

- -
-
WebGL
-
Una guia per començar amb WebGL, l'API de gràfics 3D per a la web. Aquesta tecnologia permet utilitzar OpenGL ES estàndard en contingut web.
-
- -

Vídeo

- -
-
Ús d'àudio i vídeo HTML5
-
Incrustar vídeo i/o àudio en una pàgina web i controlar la seva reproducció.
-
WebRTC
-
El RTC en WebRTC significa Comunicacions en Temps Real, tecnologia que permet la transmissió d'àudio/vídeo i l'intercanvi de dades entre clients del navegador (parells).
-
-
-
diff --git "a/files/ca/web/guide/html/_consells_per_crear_p\303\240gines_html_de_c\303\240rrega_r\303\240pida/index.html" "b/files/ca/web/guide/html/_consells_per_crear_p\303\240gines_html_de_c\303\240rrega_r\303\240pida/index.html" deleted file mode 100644 index 6c683a8156..0000000000 --- "a/files/ca/web/guide/html/_consells_per_crear_p\303\240gines_html_de_c\303\240rrega_r\303\240pida/index.html" +++ /dev/null @@ -1,186 +0,0 @@ ---- -title: Consells per crear pàgines HTML de càrrega ràpida -slug: Web/Guide/HTML/_Consells_per_crear_pàgines_HTML_de_càrrega_ràpida -tags: - - Advanced - - Guide - - HTML - - NeedsUpdate - - Performance - - Web -translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages ---- -

Aquests consells es basen en el coneixement i l'experimentació comuna.

- -

Una pàgina web optimitzada no només preveu un lloc més sensible per als seus visitants, sinó que també redueix la càrrega dels servidors web i la connexió a Internet. Això pot ser crucial per als llocs d'alt volum o dels llocs que tenen un pic en el tràfic a causa de circumstàncies inusuals, com ara notícies d'última hora.

- -

Optimitzar el rendiment de càrrega de pàgina no és només per a contingut que serà vist pels visitants de dispositius telefònics o mòbils de banda estreta. És igual d'important que el contingut en banda ampla i pot conduir a millores espectaculars fins i tot per als seus visitants amb les connexions més ràpides.

- -

Consells

- -

Reduir el pes de la pàgina

- -

El pes de la pàgina és, de bon tros, el factor més important en el rendiment de càrrega de pàgines.

- -

La reducció del pes de la pàgina a través de l'eliminació d'espais en blanc i comentaris innecessaris, comunament coneguda com la reducció al mínim, i movent el script en línia i CSS en arxius externs, pot millorar el rendiment de descàrrega amb una necessitat mínima d'altres canvis en l'estructura de la pàgina.

- -

Eines com ara HTML Tidy pot treure automàticament espais en blanc i les línies en blanc addicionals del codi HTML vàlid. Altres eines poden "comprimir" JavaScript canviant el format o per ofuscació de la font i la substitució dels identificadors llargs amb versions més curtes.

- -

Reduir al mínim el nombre d'arxius

- -

La reducció del nombre d'arxius que es fa referència en una pàgina web redueix el nombre de connexions HTTP necessaries per descarregar una pàgina.

- -

Depenent de la configuració de la memòria cau d'un navegador, es pot enviar una petició If-Modified-Since al servidor web per a cada arxiu CSS, JavaScript o imatge, preguntant si l'arxiu ha estat modificat des de l'última vegada que es va descarregar.

- -

En reduir el nombre d'arxius que es fa referència en una pàgina web, es redueix el temps necessari perquè aquestes peticions siguin enviades, i per les respostes que es rebin.

- -

Si utilitzeu moltes imatges de fons en el vostre CSS, es pot reduir la quantitat de cerques HTTP necessaries mitjançant la combinació de les imatges en una, conegut com un sprite d'imatge. A continuació, només s'aplica la mateixa imatge cada vegada que ho necessiteu per a un fons, i ajustant les coordenades x/y de manera apropiada. Aquesta tècnica funciona millor amb els elements que tenen dimensions limitades, i no funcionarà per a cada ús d'una imatge de fons. No obstant això, el menor nombre de peticions HTTP i l'emmagatzematge en memòria cau d'una sola imatge pot ajudar a reduir el temps pageload.

- -

L'excés de temps dedicat a la consulta de l'última modificació dels arxius de referència pot retardar la visualització inicial d'una pàgina web, ja que el navegador ha de comprovar el temps de modificació per a cada arxiu CSS o JavaScript, abans de processar la pàgina.

- -

Reduir la recerca de dominis

- -

Atès que cada domini per separat porta temps en la recerca de DNS, el temps de càrrega de la pàgina creixerà juntament amb el nombre de dominis independents que apareguin en link(s) CSS i src(es) JavaScript i imatge.

- -

Això no sempre és pràctic; no obstant això, sempre s'ha de tenir en compte d'utilitzar només el nombre mínim necessari dels diferents dominis en les vostres pàgines.

- -

Contingut reutilitzat en memòria cau

- -

Assegureu-vos que qualsevol contingut que es pugui emmagatzemar en memòria cau, s'emmagatzemi en memòria cau, i amb els temps de caducitat apropiades.

- -

En concret, presteu atenció a la capçalera Last-Modified. Permet d'una manera eficient l'emmagatzematge en memòria cau de la pàgina; per mitjà d'aquesta capçalera, la informació es transmet a l'agent d'usuari sobre l'arxiu que vol carregar, com quan es va modificar per última vegada. La majoria dels servidors web afegeixen automàticament la capçalera Last-Modified a pàgines estàtiques (per exemple .html, .css), d'acord amb la data d'última modificació emmagatzemada en el sistema d'arxius. Amb les pàgines dinàmiques (per exemple, .php, .aspx), això, per descomptat, no es pot fer, i la capçalera no s'envia.

- -

Així, en particular, per a les pàgines que es generen de forma dinàmica, una mica de recerca sobre aquest tema és beneficiós. Pot ser una mica complicat, però s'estalviarà molt en les sol·licituds de pàgina en les pàgines que normalment no serien emmagatzemades en memòria cau.

- -

Més informació:

- -
    -
  1. HTTP Conditional Get for RSS Hackers
    2. -
  2. HTTP 304: Not Modified
    3. -
  3. HTTP ETag on Wikipedia
    4. -
  4. Caching in HTTP
    5. -
- -

Ordenar de manera òptima els components de la pàgina

- -

Descarregar el contingut de la pàgina en primer lloc, juntament amb qualsevol CSS o JavaScript que pugui ser necessàri per a la seva visualització inicial, de manera que l'usuari obté una resposta aparent més ràpida durant la càrrega de les pàgines. Aquest contingut és normalment de text, i per tant pot beneficiar-se de la compressió del text en trànsit, proporcionant així una resposta fins i tot més ràpida per a l'usuari.

- -

Cap característica dinàmica que requereixi la pàgina per completar la càrrega abans de ser utilitzada, ha de ser desactivada inicialment, i només es permet després que la pàgina s'hagi carregat. Això farà que el JavaScript es carregui després del contingut de la pàgina, el que millorarà l'aspecte general de la càrrega de la pàgina.

- -

Reduir el nombre de scripts en línia

- -

Els scripts en línia poden ser costosos per a la càrrega de la pàgina, ja que l'analitzador ha d'assumir que un script en línia podria modificar l'estructura de la pàgina, mentre que l'anàlisi està en curs. Reduir l'ús de scripts en línia en general, i reduir l'ús de document.write() per a continguts de sortida en particular, pot millorar la càrrega total de la pàgina. Utilitzeu mètodes moderns d'AJAX per manipular el contingut de la pàgina per als navegadors moderns, en lloc dels antics enfocaments basats en document.write().

- -

Utilitzar CSS modern i marcat vàlid

- -

L'ús de CSS modern redueix la quantitat de marcat, pot reduir la necessitat d'imatges (spacer), en termes de disseny, i molt sovint pot substituir les imatges de text estilitzat - el "cost" és molt més que l'equivalent de text-i-CSS.

- -

L'ùs del marcat vàlid té altres avantatges. En primer lloc, els navegadors no tenen necessitat de dur a terme la correcció d'errors a l'analitzar el codi HTML (això és, a part de la qüestió filosòfica, de si s'ha de permetre la variació de format a l'entrada de l'usuari, i després mitjançant programació "corregir" o normalitzar aquest o si, en canvi, fer complir un estricte format d'entrada, no tolerància).

- -

D'altra banda, el marcat vàlid permet el lliure ús d'altres eines les quals poden pre-processar les vostres pàgines web. Per exemple, HTML Tidy pot eliminar espais en blanc i les etiquetes opcionals de tancament; però, es negarà a executar una pàgina amb greus errors de marcat.

- -

Part del teu contingut

- -

Les taules de dissenys són un mètode llegat que no ha de ser utilitzat més. Dissenys que utilitzen blocs {{HTMLElement ("div")}}, i en un futur pròxim, CSS3 Multi-column Layout o CSS3 Flexible Box Layout, s'han d'utilitzar al seu lloc.

- -

Les taules encara es consideren marcat vàlid, però han de ser utilitzades per a la visualització de dades tabulars. Per ajudar al navegador a processar la vostre pàgina més ràpidament, heu d'evitar niar les vostres taules.

- -

En lloc de niar profundament les taules com en:

- -
<TABLE>
-  <TABLE>
-    <TABLE>
-          ...
-    </TABLE>
-  </TABLE>
-</TABLE>
- -

utilitzar taules no niats o divs com a:

- -
<TABLE>...</TABLE>
-<TABLE>...</TABLE>
-<TABLE>...</TABLE>
-
- -

Veure: CSS3 Multi-column Layout Spec i CSS3 Flexible Box Layout

- -

Minimitzar i comprimir recursos SVG

- -

SVG produït per la majoria de les aplicacions de dibuix, sovint conté metadades innecessaries que es poden treure. Configureu els servidors per aplicar la compressió gzip per als recursos SVG.

- -

Especificar les mides de les imatges i taules

- -

Si el navegador pot determinar immediatament l'altura i/o amplada de les vostres imatges i taules, serà capaç de mostrar una pàgina web sense haver de reorganitzar el contingut. Això no només accelera la visualització de la pàgina, sinó que evita els molestos canvis en el disseny d'una pàgina quan la pàgina completa la càrrega. Per aquesta raó, height i width s'han d'especificar per a les imatges, sempre que sigui possible.

- -

Les taules han d'utilitzar la combinació CSS selector:propietat:

- -
  table-layout: fixed;
-
- -

i ha de precisar les amplades de les columnes utilitzant les etiquetes HTML COL i COLGROUP.

- -

Trieu els vostres requisits d'agent d'usuari sàviament

- -

Per aconseguir les millores més importants en el disseny de la pàgina, assegureu-vos que els requisits raonables d'agent d'usuari s'especifiquin en els projectes. No requereix que el seu contingut aparegui un píxel perfecte en tots els navegadors, especialment no en els navegadors de versions més antigues.

- -

L'ideal és que, els requisits mínims bàsics s'han de basar en la consideració dels navegadors moderns que suporten les normes pertinents. Això pot incloure les versions recents de Firefox, Internet Explorer, Google Chrome, Opera i Safari.

- -

Recordeu, però, que molts dels consells que apareixen en aquest article són tècniques de sentit comú que s'apliquen a qualsevol agent d'usuari, i que es poden aplicar a qualsevol pàgina web, independentment dels requisits de compatibilitat amb els navegadors.

- -

Exemple de l'estructura d'una pàgina

- -

· HTML

- -
-
· HEAD
-
- -
-
-
-
· LINK ...
- arxius CSS necessaris per l'aparença de la pàgina. Minimitzar el nombre d'arxius per el rendiment, mentre es manté CSS no relacionat en arxius separats per al manteniment.
-
-
-
- -
-
-
-
· SCRIPT ...
- arxius JavaScript per a funcions requerides durant la càrrega de la pàgina, però no qualsevol DHTML que només es pot executar després de càrrega de la pàgina.
-
Minimitzar el nombre d'arxius per el rendiment, mentre es manté JavaScript no relacionat en arxius separats per al manteniment.
-
-
-
- -
-
· BODY
-
· Contingut de la pàgina, visible per a l'usuari, en trossos petits (taules/divs) que es poden visualitzar sense esperar que la pàgina completi la seva descàrrega.
-
- -
-
-
-
· SCRIPT ...
- Qualsevol script que s'utilitzarà per realitzar DHTML. El script DHTML normalment es pot executar després que la pàgina s'hagi carregat completament i tots els objectes necessaris hagin estat inicialitzats. No hi ha necessitat de carregar aquests scripts abans que el contingut de la pàgina. Això només ralenteix l'aparença inicial de la càrrega de la pàgina.
-
Minimitzar el nombre d'arxius per el rendiment, mentre es manté JavaScript no relacionat en arxius separats per al manteniment.
-
Si s'utilitzen les imatges per a efectes rollover, s'ha de carregar prèviament aquí després que el contingut de la pàgina s'hagi descarregat.
-
-
-
- -

Utilitzar asyn i defer, si és possible

- -

Fer que els scripts de JavaScript siguin compatibles tant amb async i defer i utilitzar async sempre que sigui possible, especialment si té diverses etiquetes de script. Amb això, la pàgina pot aturar el processament, mentre que encara s'estigui carregant JavaScript. En cas contrari, el navegador no renderizará res que estigui darrere de les etiquetes de script que no tinguin aquests atributs.

- -

Nota: Tot i que aquests atributs ens ajuden molt per a la primera vegada que es carrega una pàgina, s'han d'usar, però no dependre de que funcionarà en tots els navegadors. Si seguiu totes les pautes per fer un bon codi JavaScript, no hi ha necessitat de canviar el codi.

- -

Enllaços relacionats

- - diff --git a/files/ca/web/guide/html/us_de_seccions_i_esquemes_en_html/index.html b/files/ca/web/guide/html/us_de_seccions_i_esquemes_en_html/index.html deleted file mode 100644 index 5da074b341..0000000000 --- a/files/ca/web/guide/html/us_de_seccions_i_esquemes_en_html/index.html +++ /dev/null @@ -1,341 +0,0 @@ ---- -title: Us de seccions i esquemes en HTML 5 -slug: Web/Guide/HTML/Us_de_seccions_i_esquemes_en_HTML -tags: - - Advanced - - Example - - Guide - - HTML - - HTML5 - - Outlines - - Overview - - Sections - - Web -translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines ---- -
-

Important: Actualment no existeixen implementacions de l'algorisme d'esquema en els navegadors gràfics o agents d'usuari de tecnologia d'assistència, encara que l'algorisme s'executa a un altre programari, com comprobadors de conformitat. Per tant, l'algorisme d'esquema no pot ser invocat per transmetre l'estructura dels documents als usuaris. Es recomana als autors a utilitzar les capçaleres de rang (h1-h6) per transmetre l'estructura.

-
- -

L'especificació HTML5 aporta diversos elements nous als desenvolupadors web que els permet descriure l'estructura d'un document web amb la semàntica estàndard. En aquest document es descriuen aquests elements i la forma d'utilitzar-los per definir el contorn desitjat per a qualsevol document.

- -

Estructura de un document en HTML 4

- -

L'estructura d'un document, és a dir, l'estructura semàntica del que està entre <body> i </body>, és fonamental per a la presentació de la pàgina a l'usuari. HTML 4 utilitza la noció de seccions i subseccions d'un document per a descriure la seva estructura. Una secció està definida per un element  ({{HTMLElement("div")}}) amb elements de capçalera ({{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}} o {{HTMLElement("h6")}}) dins d'ella, definint el seu títol. Les relacions d'aquests elements dóna lloc a l'estructura del document i el seu contorn.

- -

Així que el següent marcat:

- -
-
<div class="section" id="forest-elephants" >
-  <h1>Forest elephants</h1>
-  <p>In this section, we discuss the lesser known forest elephants.
-    ...this section continues...
-  <div class="subsection" id="forest-habitat" >
-    <h2>Habitat</h2>
-    <p>Forest elephants do not live in trees but among them.
-     ...this subsection continues...
-  </div>
-</div>
-
-
- -

condueix al següent esquema:

- -
1. Forest elephants
-   1.1 Habitat
-
- -

Els elements {{HTMLElement("div")}} no són obligatoris per definir una nova secció. La mera presència d'un element capçalera és suficient perquè  impliqui una nova secció. Per tant aixó,

- -
<h1>Forest elephants</h1>
-  <p>In this section, we discuss the lesser known forest elephants.
-    ...this section continues...
-  <h2>Habitat</h2>
-  <p>Forest elephants do not live in trees but among them.
-    ...this subsection continues...
-  <h2>Diet</h2>
-<h1>Mongolian gerbils</h1>
-
- -

condueix al següent esquema:

- -
1. Forest elephants
-   1.1 Habitat
-   1.2 Diet
-2. Mongolian gerbils
-
- -

Problemes resolts per HTML5

- -

La definició d'HTML 4 de l'estructura d'un document i el seu algoritme d'esquematització implícit és molt perillos i condueix a nombrosos problemes:

- -
    -
  1. L'ús de {{HTMLElement("div")}} per definir seccions semàntiques, sense definir valors específics per als atributs class fa impossible l'automatització de l'algoritme d'esquema ( "És que {{HTMLElement("div")}} part de la esquema de la pàgina, defineix una secció o un subsecció? "o" és només una presentació de {{HTMLElement ( "div")}}, unicament utilitzat per a l'estil? "). En altres termes, l'especificació HTML 4 és molt imprecisa en el que és una secció i com es defineix el seu àmbit. La generació automàtica dels esquemes és important, especialment per la tecnologia d'assistència, que és possible adaptar-la a la forma en què es presenta la informació als usuaris, d'acord a l'estructura del document. HTML5 elimina la necessitat d'elements {{HTMLElement ( "div")}} de l'algoritme d'esquema mitjançant la introducció d'un nou element, {{HTMLElement("section")}}, l'element  HTML Section.
    2. -
  2. La fusió de diversos documents és difícil: la inclusió d'un sub-document en un document principal significa canviar el nivell de elements d'encapçalament HTML de manera que es mantigui l'esquema. Això es soluciona en HTML5 amb els elements de seccionament recentment introduïts ({{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}} i {{HTMLElement("aside")}}), són sempre subseccions de la secció del seu ancestre més proper, independentment de quines seccions són creades per les capçaleres internes.
    3. -
  3. En HTML 4, cada secció és part de l'esquema del document. Però els documents sovint no són tan lineals. Un document pot tenir seccions especials que contenen informació que no és part de, tot i que està relacionat amb el flux principal, com un bloc d'anunci o una caixa d'explicació. HTML 5 introdueix l'element {{HTMLElement("aside")}} que permet aquestes seccions per no ser part de l'esquema principal.
    4. -
  4. Un cop més, en HTML 4, ja que cada secció és part de l'esquema del document, no hi ha manera de tenir seccions que continguin informació relacionada no amb el document, sinó a tot el lloc, com logotips, menús, taula de continguts, o la informació de copyright i avisos legals . Amb aquesta finalitat, HTML 5 introdueix tres nous elements: {{HTMLElement("nav")}} per a les col·leccions d'enllaços, com una taula de continguts, {{HTMLElement("footer")}} i {{HTMLElement("header")}} per obtenir informació relacionada amb el lloc. Recordeu que {{HTMLElement("header")}} i {{HTMLElement("footer")}} no seccionan el contingut com {{HTMLElement("section")}}, sinó que hi són per a marcar semànticament parts d'una secció.
    5. -
- -

De manera més general, HTML5 aporta precisió a les característiques de seccionament i encapçalament, permetent que l'esquema del document pogui ser predictible i utilitzat pel navegador per millorar l'experiència de l'usuari.

- -

Algoritme d'esquema HTML5

- -

Anem a considerar els algoritmes subjacents la forma en que HTML s'encarrega de les seccions i esquemes.

- -

Definir seccions

- -

Tot el contingut situat a l'interior de l'element {{HTMLElement("body")}} és part d'una secció. Les seccions en HTML5 es poden niar. Al costat de la secció principal, definit per l'element {{HTMLElement("body")}}, els límits de secció es defineixen de manera explícita o implícita. Les seccions definides de forma explícita, són els continguts dins de les etiquetes {{HTMLElement("body")}},  {{HTMLElement("section")}},  {{HTMLElement("article")}},  {{HTMLElement("aside")}} i {{HTMLElement("nav")}}.

- -
Cada secció pot tenir la seva pròpia jerarquia de encapçalaments. Per tant, fins i tot una secció niada pot tenir un {{HTMLElement("h1")}}. Veure {{anch("Defining headings")}}
- -

Vegem un exemple - aquí tenim un document amb una secció de nivell superior i un peu de pàgina definit. Dins de la secció de nivell superior tenim tres subseccions, que es defineixen per dos elements {{htmlelement("section")}} i un element {{htmlelement("aside")}}:

- -
<section>
-
-  <h1>Forest elephants</h1>
-
-  <section>
-    <h1>Introduction</h1>
-    <p>In this section, we discuss the lesser known forest elephants.</p>
-  </section>
-
-  <section>
-    <h1>Habitat</h1>
-    <p>Forest elephants do not live in trees but among them.</p>
-  </section>
-
-  <aside>
-    <p>advertising block</p>
-  </aside>
-
-</section>
-
-<footer>
-  <p>(c) 2010 The Example company</p>
-</footer>
- -

Això ens porta al següent esquema::

- -
1. Forest elephants
-   1.1 Introduction
-   1.2 Habitat
-
- -

Definir encapçalaments

- -

Mentre que els elements de seccionament HTML defineixen l'estructura del document, un esquema també necessita encapçalaments per ser útil. La regla bàsica és simple: el primer element d'encapçalament HTML (un de {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}})) defineix el encapçalament de la secció actual.

- -

Els elements de capçalera tenen un rang donat pel nombre en el nom de l'element, on {{HTMLElement ("h1")}} té el rang més alt, i {{HTMLElement ("H6")}} té el rang més baix. Temes de classificació relativa només dins d'una secció; l'estructura de les seccions determina el esquema, no el rang d'encapçalament de les seccions. Per exemple, considereu aquest codi:

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

Aixó crea el següent esquema:

- -
1. Forest elephants
-   1.1 Habitat
-2. Mongolian gerbils
- -

Recordeu que el rang de l'element d'encapçalament (en l'exemple {{HTMLElement("h1")}} per a la primera secció de nivell superior, {{HTMLElement("h2")}} per a la subsecció i {{HTMLElement("h3")}} per a la segona secció de nivell superior) no és important. (Qualsevol rang es pot utilitzar com l'encapçalament d'una secció definida de manera explícita, encara que no es recomana aquesta pràctica.)

- -

Seccionament implícit

- -

A causa que el Seccionament d'elements HTML5 no són obligatoris per definir un esquema, per mantenir la compatibilitat amb la web existent, dominat per HTML 4, hi ha una manera de definir seccions sense ells. Això es diu seccionament implícit.

- -

Els elements de capçalera ({{HTMLElement("h1")}} a {{HTMLElement("h6")}}) defineixen una nova secció implícita, quan no són el primer encapçalament de les seccions explícites dels seue pares. La forma implícita d'aquesta secció es posiciona en l'esquema que es defineix per la seu rang relatiu amb l'encapçalat anterior en la seva secció per a pares. Si es tracta d'un rang inferior al de l'encapçalat anterior, s'obre una subsecció de la secció implícita. Aquest codi:

- -
<section>
-  <h1>Forest elephants</h1>
-  <p>In this section, we discuss the lesser known forest elephants.
-    ...this section continues...
-  <h3 class="implicit subsection">Habitat</h3>
-  <p>Forest elephants do not live in trees but among them.
-    ...this subsection continues...
-</section>
- -

condueix al següent esquema:

- -
1. Forest elephants
-   1.1 Habitat (implicitly defined by the h3 element)
-
- -

Si es tracta del mateix rang que l'encapçalat anterior, es tanca la secció anterior (que pot haver estat explícit!) I s'obre una nova implícita en el mateix nivell: 

- -
<section>
-  <h1>Forest elephants</h1>
-  <p>In this section, we discuss the lesser known forest elephants.
-    ...this section continues...
-  <h1 class="implicit section">Mongolian gerbils</h1>
-  <p>Mongolian gerbils are cute little mammals.
-    ...this section continues...
-</section>
- -

condueix al següent esquema:

- -
1. Forest elephants
-2. Mongolian gerbils (implicitly defined by the h1 element, which closed the previous section at the same time)
-
- -

Si es tracta d'un rang més alt que l'encapçalat anterior, es tanca la secció anterior i s'obre una nova implícita en el nivell superior:

- -
<body>
-  <h1>Mammals</h1>
-  <h2>Whales</h2>
-  <p>In this section, we discuss the swimming whales.
-    ...this section continues...
-  <section>
-    <h3>Forest elephants</h3>
-    <p>In this section, we discuss the lesser known forest elephants.
-      ...this section continues...
-    <h3>Mongolian gerbils</h3>
-      <p>Hordes of gerbils have spread their range far beyond Mongolia.
-         ...this subsection continues...
-    <h2>Reptiles</h2>
-      <p>Reptiles are animals with cold blood.
-          ...this section continues...
-  </section>
-</body>
- -

condueix al següent esquema:

- -
1. Mammals
-   1.1 Whales (implicitly defined by the h2 element)
-   1.2 Forest elephants (explicitly defined by the section element)
-   1.3 Mongolian gerbils (implicitly defined by the h3 element, which closes the previous section at the same time)
-2. Reptiles (implicitly defined by the h2 element, which closes the previous section at the same time)
-
- -

Aquest no és l'esquema que es podria esperar fent una ullada ràpida a les etiquetes d'encapçalament. Per fer un marcat humà comprensible, és una bona pràctica utilitzar etiquetes explícites per a l'obertura i tancament de seccions, i per a que coincideixi amb el rang d'encapçalament a nivell de niament de secció previst. No obstant això, no és requerit per l'especificació HTML5. Si trobeu que els navegadors mostran el seu esquema de document de manera inesperada, comproveu si té seccions que es tanquen de manera implícita pels elements d'encapçalament.

- -

Una excepció a la regla general és que el rang d'encapçalament ha de coincidir amb el nivell de niament de secció, és per a les seccions que poden ser reutilitzades en múltiples documents. Per exemple, una secció podria ser emmagatzemada en un sistema de gestió de continguts i muntada en documents en temps d'execució. En aquest cas, una bona pràctica és començar per {{HTMLElement("h1")}} per al nivell d'encapçalament superior de la secció reutilitzable. El nivell de niament de la secció reutilitzable serà determinat per la jerarquia de les seccions del document en què apareix. Les etiquetes de secció explícites són encara útils en aquest cas.

- -

Arrels de seccionament

- -

Una arrel de seccionament és un element HTML que pot tenir el seu propi esquema, però les seccions i encapçalaments en el seu interior no contribueixen a l'esquema del seu ancestre. Al costat de {{HTMLElement("body")}} que és l'arrel de seccionament lògica d'un document, aquests són sovint elements que introdueixen contingut extern a la pàgina: {{HTMLElement("blockquote")}}, {{HTMLElement("details")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}} i {{HTMLElement("td")}}.

- -

Exemple:

- -
<section>
-  <h1>Forest elephants</h1>
-  <section>
-    <h2>Introduction</h2>
-    <p>In this section, we discuss the lesser known forest elephants</p>
-  </section>
-  <section>
-    <h2>Habitat</h2>
-    <p>Forest elephants do not live in trees but among them. Let's
-       look what scientists are saying in "<cite>The Forest Elephant in Borneo</cite>":</p>
-    <blockquote>
-       <h1>Borneo</h1>
-       <p>The forest element lives in Borneo...</p>
-    </blockquote>
-  </section>
-</section>
-
- -

El resultat d'aquest exemple en el següent esquema:

- -
1. Forest elephants
-   1.1 Introduction
-   1.2 Habitat
- -

Aquest esquema no conté el esquema intern de l'element {{HTMLElement("blockquote")}}, que sent una citació externa, és una arrel de seccionament i aïlla el seu esquema intern.

- -

Seccions fora de l'esquema

- -

HTML 5 introdueix dos nous elements que permeten definir seccions que no pertanyen el esquema principal d'un document web:

- -
    -
  1. L'element de secció HTML Aside ({{HTMLElement("aside")}}) defineix una secció que, encara que es relaciona amb l'element principal, no pertany al corrent principal, com un quadre d'explicació o un anunci. Té el seu propi esquema, però no pertany a la principal.
    2. -
  2. L'element de secció HTML de navegació ({{HTMLElement("nav")}}) defineix una secció que conté enllaços de navegació. Pot haver-hi diversos d'ells en un document, per exemple, una pàgina amb enllaços interns com una taula de continguts, i un altre amb el lloc d'enllaços de navegació. Aquests enllaços no són part del flux principal del document i esquema, i en general no són mostrats inicialment pels lectors de pantalla i tecnologies de suport similars.
    3. -
- -

Encapçalats i peus de pàgina

- -

HTML5 també introdueix dos nous elements que es poden utilitzar per marcar la capçalera i el peu de pàgina d'una secció:

- -
    -
  1. L'element Header HTML ({{HTMLElement("header")}}) defineix una capçalera de la pàgina - en general conté el logotip i el nom del lloc i, possiblement, un menú horitzontal - o encapçalament de secció, que potser conté la capçalera de la secció, el nom de l'autor, etc.. {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}} i {{HTMLElement("nav")}} poden tenir la seva pròpia {{HTMLElement("header")}}. Malgrat el seu nom, no necessàriament es col·locat al començament de la pàgina o secció.
    2. -
  2. L'element Footer HTML ({{HTMLElement("footer")}}) defineix un peu de pàgina - en general conté el dret d'autor i avisos legals i, de vegades alguns enllaços - o secció de peu de pàgina, que potser conté la data de publicació de la secció, la informació de llicència, etc. {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}} i {{HTMLElement("nav")}} poden tenir el seu pròpi {{HTMLElement("footer")}}. Malgrat el seu nom, no necessàriament es col·locat al final de la pàgina o secció.
    3. -
- -

Aquests no creen noves seccions en l'esquema, més aviat, marcan el contingut dins de les seccions de la pàgina.

- -

Adreces en elements de seccionament

- -

L'autor d'un document, sovint, vol publicar alguna informació de contacte, com el nom i l'adreça de l'autor. HTML 4 permet això a través de l'element {{HTMLElement("address")}}, que s'ha ampliat en HTML5.

- -

Un document pot estar fet de diferentes seccions per diferents autors. Una secció d'un altre autor, que el de la pàgina principal, es defineix mitjançant l'element {{HTMLElement("article")}}. En conseqüència, l'element {{HTMLElement("address")}} està enllaçat al seu més proper ancestre {{HTMLElement("body")}} o {{HTMLElement("article")}}.

- -

Usar elements HTML5 en navegadors no HTML5

- -

Els elements de seccions i capçaleres han de treballar en la majoria dels navegadors no HTML5. Tot i que no són compatibles, no necessiten una interfície especial DOM i només necessiten un estil CSS específic com a elements desconeguts, que son, se'ls dóna estil amb display:inline per defecte:

- -
section, article, aside, footer, header, nav, hgroup {
-  display:block;
-}
-
- -

Per descomptat, el desenvolupador web els pot donar estil de manera diferent però tinguen en compte que en un navegador no HTML5, l'estil per defecte és diferent del que s'espera per a aquest tipus d'elements. També tingueu en compte que l'element {{HTMLElement("time")}} no s'ha inclòs, ja que l'estil predeterminat per a ell en un navegador no HTML 5 és el mateix que en un amb HTML5 compatible.

- -

Aquest mètode té les seves limitacions,  ja que alguns navegadors no permeten un estil d'elements no compatibles. Aquest és el cas d'Internet Explorer (versió 8 i anteriors), que necessiten un script específic per permetre això:

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

Aquest script significa que, en el cas d'Internet Explorer (8 i anteriors), el script ha d'estar habilitat per tal de mostrar els elements de seccionament HTML5 i de capçaleres correctament. Si no és així, no es mostraran, la qual cosa pot ser problemàtic, ja que aquests elements són propensos a definir l'estructura de la pàgina sencera. És per això que un element explícit {{HTMLElement( "noscript")}} ha de ser afegit per a aquest cas:

- -
<noscript>
-   <strong>Warning !</strong>
-   Because your browser does not support HTML5, some elements are simulated using JScript.
-   Unfortunately your browser has disabled scripting. Please enable it in order to display this page.
-</noscript>
- -

Això ens porta al següent codi per permetre el suport dels elements de seccions HTML5 i capçaleres en els navegadors no HTML5, fins i tot per a Internet Explorer (8 i anteiors), amb un retorn adequat per al cas en què aquest últim navegador estigui configurat per no utilitzar 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>Warning !</strong>
-     Because your browser does not support HTML5, some elements are created using JavaScript.
-     Unfortunately your browser has disabled scripting. Please enable it in order to display this page.
-  </noscript>
-<![endif]-->
- -

Conclusió

- -

Els nous elements semàntics introduïts en HTML5 tene la capacitat de descriure l'estructura i l'esquema d'un document web d'una manera estàndard. Aporten una gran avantatge per a les persones que tenen navegadors HTML5 i que necessitan l'estructura per ajudar-los a entendre la pàgina, per exemple les persones que necessiten l'ajuda d'una mica de tecnologia d'assistència. Aquests nous elements semàntics són senzills d'usar i, amb molt poques càrregues, es poden fer funcionar també en els navegadors no HTML5. Per tant han de ser utilitzats sense restriccions.

- -
{{HTML5ArticleTOC()}}
diff --git a/files/ca/web/guide/html/using_html_sections_and_outlines/index.html b/files/ca/web/guide/html/using_html_sections_and_outlines/index.html new file mode 100644 index 0000000000..5da074b341 --- /dev/null +++ b/files/ca/web/guide/html/using_html_sections_and_outlines/index.html @@ -0,0 +1,341 @@ +--- +title: Us de seccions i esquemes en HTML 5 +slug: Web/Guide/HTML/Us_de_seccions_i_esquemes_en_HTML +tags: + - Advanced + - Example + - Guide + - HTML + - HTML5 + - Outlines + - Overview + - Sections + - Web +translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines +--- +
+

Important: Actualment no existeixen implementacions de l'algorisme d'esquema en els navegadors gràfics o agents d'usuari de tecnologia d'assistència, encara que l'algorisme s'executa a un altre programari, com comprobadors de conformitat. Per tant, l'algorisme d'esquema no pot ser invocat per transmetre l'estructura dels documents als usuaris. Es recomana als autors a utilitzar les capçaleres de rang (h1-h6) per transmetre l'estructura.

+
+ +

L'especificació HTML5 aporta diversos elements nous als desenvolupadors web que els permet descriure l'estructura d'un document web amb la semàntica estàndard. En aquest document es descriuen aquests elements i la forma d'utilitzar-los per definir el contorn desitjat per a qualsevol document.

+ +

Estructura de un document en HTML 4

+ +

L'estructura d'un document, és a dir, l'estructura semàntica del que està entre <body> i </body>, és fonamental per a la presentació de la pàgina a l'usuari. HTML 4 utilitza la noció de seccions i subseccions d'un document per a descriure la seva estructura. Una secció està definida per un element  ({{HTMLElement("div")}}) amb elements de capçalera ({{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}} o {{HTMLElement("h6")}}) dins d'ella, definint el seu títol. Les relacions d'aquests elements dóna lloc a l'estructura del document i el seu contorn.

+ +

Així que el següent marcat:

+ +
+
<div class="section" id="forest-elephants" >
+  <h1>Forest elephants</h1>
+  <p>In this section, we discuss the lesser known forest elephants.
+    ...this section continues...
+  <div class="subsection" id="forest-habitat" >
+    <h2>Habitat</h2>
+    <p>Forest elephants do not live in trees but among them.
+     ...this subsection continues...
+  </div>
+</div>
+
+
+ +

condueix al següent esquema:

+ +
1. Forest elephants
+   1.1 Habitat
+
+ +

Els elements {{HTMLElement("div")}} no són obligatoris per definir una nova secció. La mera presència d'un element capçalera és suficient perquè  impliqui una nova secció. Per tant aixó,

+ +
<h1>Forest elephants</h1>
+  <p>In this section, we discuss the lesser known forest elephants.
+    ...this section continues...
+  <h2>Habitat</h2>
+  <p>Forest elephants do not live in trees but among them.
+    ...this subsection continues...
+  <h2>Diet</h2>
+<h1>Mongolian gerbils</h1>
+
+ +

condueix al següent esquema:

+ +
1. Forest elephants
+   1.1 Habitat
+   1.2 Diet
+2. Mongolian gerbils
+
+ +

Problemes resolts per HTML5

+ +

La definició d'HTML 4 de l'estructura d'un document i el seu algoritme d'esquematització implícit és molt perillos i condueix a nombrosos problemes:

+ +
    +
  1. L'ús de {{HTMLElement("div")}} per definir seccions semàntiques, sense definir valors específics per als atributs class fa impossible l'automatització de l'algoritme d'esquema ( "És que {{HTMLElement("div")}} part de la esquema de la pàgina, defineix una secció o un subsecció? "o" és només una presentació de {{HTMLElement ( "div")}}, unicament utilitzat per a l'estil? "). En altres termes, l'especificació HTML 4 és molt imprecisa en el que és una secció i com es defineix el seu àmbit. La generació automàtica dels esquemes és important, especialment per la tecnologia d'assistència, que és possible adaptar-la a la forma en què es presenta la informació als usuaris, d'acord a l'estructura del document. HTML5 elimina la necessitat d'elements {{HTMLElement ( "div")}} de l'algoritme d'esquema mitjançant la introducció d'un nou element, {{HTMLElement("section")}}, l'element  HTML Section.
    2. +
  2. La fusió de diversos documents és difícil: la inclusió d'un sub-document en un document principal significa canviar el nivell de elements d'encapçalament HTML de manera que es mantigui l'esquema. Això es soluciona en HTML5 amb els elements de seccionament recentment introduïts ({{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}} i {{HTMLElement("aside")}}), són sempre subseccions de la secció del seu ancestre més proper, independentment de quines seccions són creades per les capçaleres internes.
    3. +
  3. En HTML 4, cada secció és part de l'esquema del document. Però els documents sovint no són tan lineals. Un document pot tenir seccions especials que contenen informació que no és part de, tot i que està relacionat amb el flux principal, com un bloc d'anunci o una caixa d'explicació. HTML 5 introdueix l'element {{HTMLElement("aside")}} que permet aquestes seccions per no ser part de l'esquema principal.
    4. +
  4. Un cop més, en HTML 4, ja que cada secció és part de l'esquema del document, no hi ha manera de tenir seccions que continguin informació relacionada no amb el document, sinó a tot el lloc, com logotips, menús, taula de continguts, o la informació de copyright i avisos legals . Amb aquesta finalitat, HTML 5 introdueix tres nous elements: {{HTMLElement("nav")}} per a les col·leccions d'enllaços, com una taula de continguts, {{HTMLElement("footer")}} i {{HTMLElement("header")}} per obtenir informació relacionada amb el lloc. Recordeu que {{HTMLElement("header")}} i {{HTMLElement("footer")}} no seccionan el contingut com {{HTMLElement("section")}}, sinó que hi són per a marcar semànticament parts d'una secció.
    5. +
+ +

De manera més general, HTML5 aporta precisió a les característiques de seccionament i encapçalament, permetent que l'esquema del document pogui ser predictible i utilitzat pel navegador per millorar l'experiència de l'usuari.

+ +

Algoritme d'esquema HTML5

+ +

Anem a considerar els algoritmes subjacents la forma en que HTML s'encarrega de les seccions i esquemes.

+ +

Definir seccions

+ +

Tot el contingut situat a l'interior de l'element {{HTMLElement("body")}} és part d'una secció. Les seccions en HTML5 es poden niar. Al costat de la secció principal, definit per l'element {{HTMLElement("body")}}, els límits de secció es defineixen de manera explícita o implícita. Les seccions definides de forma explícita, són els continguts dins de les etiquetes {{HTMLElement("body")}},  {{HTMLElement("section")}},  {{HTMLElement("article")}},  {{HTMLElement("aside")}} i {{HTMLElement("nav")}}.

+ +
Cada secció pot tenir la seva pròpia jerarquia de encapçalaments. Per tant, fins i tot una secció niada pot tenir un {{HTMLElement("h1")}}. Veure {{anch("Defining headings")}}
+ +

Vegem un exemple - aquí tenim un document amb una secció de nivell superior i un peu de pàgina definit. Dins de la secció de nivell superior tenim tres subseccions, que es defineixen per dos elements {{htmlelement("section")}} i un element {{htmlelement("aside")}}:

+ +
<section>
+
+  <h1>Forest elephants</h1>
+
+  <section>
+    <h1>Introduction</h1>
+    <p>In this section, we discuss the lesser known forest elephants.</p>
+  </section>
+
+  <section>
+    <h1>Habitat</h1>
+    <p>Forest elephants do not live in trees but among them.</p>
+  </section>
+
+  <aside>
+    <p>advertising block</p>
+  </aside>
+
+</section>
+
+<footer>
+  <p>(c) 2010 The Example company</p>
+</footer>
+ +

Això ens porta al següent esquema::

+ +
1. Forest elephants
+   1.1 Introduction
+   1.2 Habitat
+
+ +

Definir encapçalaments

+ +

Mentre que els elements de seccionament HTML defineixen l'estructura del document, un esquema també necessita encapçalaments per ser útil. La regla bàsica és simple: el primer element d'encapçalament HTML (un de {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}})) defineix el encapçalament de la secció actual.

+ +

Els elements de capçalera tenen un rang donat pel nombre en el nom de l'element, on {{HTMLElement ("h1")}} té el rang més alt, i {{HTMLElement ("H6")}} té el rang més baix. Temes de classificació relativa només dins d'una secció; l'estructura de les seccions determina el esquema, no el rang d'encapçalament de les seccions. Per exemple, considereu aquest codi:

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

Aixó crea el següent esquema:

+ +
1. Forest elephants
+   1.1 Habitat
+2. Mongolian gerbils
+ +

Recordeu que el rang de l'element d'encapçalament (en l'exemple {{HTMLElement("h1")}} per a la primera secció de nivell superior, {{HTMLElement("h2")}} per a la subsecció i {{HTMLElement("h3")}} per a la segona secció de nivell superior) no és important. (Qualsevol rang es pot utilitzar com l'encapçalament d'una secció definida de manera explícita, encara que no es recomana aquesta pràctica.)

+ +

Seccionament implícit

+ +

A causa que el Seccionament d'elements HTML5 no són obligatoris per definir un esquema, per mantenir la compatibilitat amb la web existent, dominat per HTML 4, hi ha una manera de definir seccions sense ells. Això es diu seccionament implícit.

+ +

Els elements de capçalera ({{HTMLElement("h1")}} a {{HTMLElement("h6")}}) defineixen una nova secció implícita, quan no són el primer encapçalament de les seccions explícites dels seue pares. La forma implícita d'aquesta secció es posiciona en l'esquema que es defineix per la seu rang relatiu amb l'encapçalat anterior en la seva secció per a pares. Si es tracta d'un rang inferior al de l'encapçalat anterior, s'obre una subsecció de la secció implícita. Aquest codi:

+ +
<section>
+  <h1>Forest elephants</h1>
+  <p>In this section, we discuss the lesser known forest elephants.
+    ...this section continues...
+  <h3 class="implicit subsection">Habitat</h3>
+  <p>Forest elephants do not live in trees but among them.
+    ...this subsection continues...
+</section>
+ +

condueix al següent esquema:

+ +
1. Forest elephants
+   1.1 Habitat (implicitly defined by the h3 element)
+
+ +

Si es tracta del mateix rang que l'encapçalat anterior, es tanca la secció anterior (que pot haver estat explícit!) I s'obre una nova implícita en el mateix nivell: 

+ +
<section>
+  <h1>Forest elephants</h1>
+  <p>In this section, we discuss the lesser known forest elephants.
+    ...this section continues...
+  <h1 class="implicit section">Mongolian gerbils</h1>
+  <p>Mongolian gerbils are cute little mammals.
+    ...this section continues...
+</section>
+ +

condueix al següent esquema:

+ +
1. Forest elephants
+2. Mongolian gerbils (implicitly defined by the h1 element, which closed the previous section at the same time)
+
+ +

Si es tracta d'un rang més alt que l'encapçalat anterior, es tanca la secció anterior i s'obre una nova implícita en el nivell superior:

+ +
<body>
+  <h1>Mammals</h1>
+  <h2>Whales</h2>
+  <p>In this section, we discuss the swimming whales.
+    ...this section continues...
+  <section>
+    <h3>Forest elephants</h3>
+    <p>In this section, we discuss the lesser known forest elephants.
+      ...this section continues...
+    <h3>Mongolian gerbils</h3>
+      <p>Hordes of gerbils have spread their range far beyond Mongolia.
+         ...this subsection continues...
+    <h2>Reptiles</h2>
+      <p>Reptiles are animals with cold blood.
+          ...this section continues...
+  </section>
+</body>
+ +

condueix al següent esquema:

+ +
1. Mammals
+   1.1 Whales (implicitly defined by the h2 element)
+   1.2 Forest elephants (explicitly defined by the section element)
+   1.3 Mongolian gerbils (implicitly defined by the h3 element, which closes the previous section at the same time)
+2. Reptiles (implicitly defined by the h2 element, which closes the previous section at the same time)
+
+ +

Aquest no és l'esquema que es podria esperar fent una ullada ràpida a les etiquetes d'encapçalament. Per fer un marcat humà comprensible, és una bona pràctica utilitzar etiquetes explícites per a l'obertura i tancament de seccions, i per a que coincideixi amb el rang d'encapçalament a nivell de niament de secció previst. No obstant això, no és requerit per l'especificació HTML5. Si trobeu que els navegadors mostran el seu esquema de document de manera inesperada, comproveu si té seccions que es tanquen de manera implícita pels elements d'encapçalament.

+ +

Una excepció a la regla general és que el rang d'encapçalament ha de coincidir amb el nivell de niament de secció, és per a les seccions que poden ser reutilitzades en múltiples documents. Per exemple, una secció podria ser emmagatzemada en un sistema de gestió de continguts i muntada en documents en temps d'execució. En aquest cas, una bona pràctica és començar per {{HTMLElement("h1")}} per al nivell d'encapçalament superior de la secció reutilitzable. El nivell de niament de la secció reutilitzable serà determinat per la jerarquia de les seccions del document en què apareix. Les etiquetes de secció explícites són encara útils en aquest cas.

+ +

Arrels de seccionament

+ +

Una arrel de seccionament és un element HTML que pot tenir el seu propi esquema, però les seccions i encapçalaments en el seu interior no contribueixen a l'esquema del seu ancestre. Al costat de {{HTMLElement("body")}} que és l'arrel de seccionament lògica d'un document, aquests són sovint elements que introdueixen contingut extern a la pàgina: {{HTMLElement("blockquote")}}, {{HTMLElement("details")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}} i {{HTMLElement("td")}}.

+ +

Exemple:

+ +
<section>
+  <h1>Forest elephants</h1>
+  <section>
+    <h2>Introduction</h2>
+    <p>In this section, we discuss the lesser known forest elephants</p>
+  </section>
+  <section>
+    <h2>Habitat</h2>
+    <p>Forest elephants do not live in trees but among them. Let's
+       look what scientists are saying in "<cite>The Forest Elephant in Borneo</cite>":</p>
+    <blockquote>
+       <h1>Borneo</h1>
+       <p>The forest element lives in Borneo...</p>
+    </blockquote>
+  </section>
+</section>
+
+ +

El resultat d'aquest exemple en el següent esquema:

+ +
1. Forest elephants
+   1.1 Introduction
+   1.2 Habitat
+ +

Aquest esquema no conté el esquema intern de l'element {{HTMLElement("blockquote")}}, que sent una citació externa, és una arrel de seccionament i aïlla el seu esquema intern.

+ +

Seccions fora de l'esquema

+ +

HTML 5 introdueix dos nous elements que permeten definir seccions que no pertanyen el esquema principal d'un document web:

+ +
    +
  1. L'element de secció HTML Aside ({{HTMLElement("aside")}}) defineix una secció que, encara que es relaciona amb l'element principal, no pertany al corrent principal, com un quadre d'explicació o un anunci. Té el seu propi esquema, però no pertany a la principal.
    2. +
  2. L'element de secció HTML de navegació ({{HTMLElement("nav")}}) defineix una secció que conté enllaços de navegació. Pot haver-hi diversos d'ells en un document, per exemple, una pàgina amb enllaços interns com una taula de continguts, i un altre amb el lloc d'enllaços de navegació. Aquests enllaços no són part del flux principal del document i esquema, i en general no són mostrats inicialment pels lectors de pantalla i tecnologies de suport similars.
    3. +
+ +

Encapçalats i peus de pàgina

+ +

HTML5 també introdueix dos nous elements que es poden utilitzar per marcar la capçalera i el peu de pàgina d'una secció:

+ +
    +
  1. L'element Header HTML ({{HTMLElement("header")}}) defineix una capçalera de la pàgina - en general conté el logotip i el nom del lloc i, possiblement, un menú horitzontal - o encapçalament de secció, que potser conté la capçalera de la secció, el nom de l'autor, etc.. {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}} i {{HTMLElement("nav")}} poden tenir la seva pròpia {{HTMLElement("header")}}. Malgrat el seu nom, no necessàriament es col·locat al començament de la pàgina o secció.
    2. +
  2. L'element Footer HTML ({{HTMLElement("footer")}}) defineix un peu de pàgina - en general conté el dret d'autor i avisos legals i, de vegades alguns enllaços - o secció de peu de pàgina, que potser conté la data de publicació de la secció, la informació de llicència, etc. {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}} i {{HTMLElement("nav")}} poden tenir el seu pròpi {{HTMLElement("footer")}}. Malgrat el seu nom, no necessàriament es col·locat al final de la pàgina o secció.
    3. +
+ +

Aquests no creen noves seccions en l'esquema, més aviat, marcan el contingut dins de les seccions de la pàgina.

+ +

Adreces en elements de seccionament

+ +

L'autor d'un document, sovint, vol publicar alguna informació de contacte, com el nom i l'adreça de l'autor. HTML 4 permet això a través de l'element {{HTMLElement("address")}}, que s'ha ampliat en HTML5.

+ +

Un document pot estar fet de diferentes seccions per diferents autors. Una secció d'un altre autor, que el de la pàgina principal, es defineix mitjançant l'element {{HTMLElement("article")}}. En conseqüència, l'element {{HTMLElement("address")}} està enllaçat al seu més proper ancestre {{HTMLElement("body")}} o {{HTMLElement("article")}}.

+ +

Usar elements HTML5 en navegadors no HTML5

+ +

Els elements de seccions i capçaleres han de treballar en la majoria dels navegadors no HTML5. Tot i que no són compatibles, no necessiten una interfície especial DOM i només necessiten un estil CSS específic com a elements desconeguts, que son, se'ls dóna estil amb display:inline per defecte:

+ +
section, article, aside, footer, header, nav, hgroup {
+  display:block;
+}
+
+ +

Per descomptat, el desenvolupador web els pot donar estil de manera diferent però tinguen en compte que en un navegador no HTML5, l'estil per defecte és diferent del que s'espera per a aquest tipus d'elements. També tingueu en compte que l'element {{HTMLElement("time")}} no s'ha inclòs, ja que l'estil predeterminat per a ell en un navegador no HTML 5 és el mateix que en un amb HTML5 compatible.

+ +

Aquest mètode té les seves limitacions,  ja que alguns navegadors no permeten un estil d'elements no compatibles. Aquest és el cas d'Internet Explorer (versió 8 i anteriors), que necessiten un script específic per permetre això:

+ +
<!--[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]-->
+ +

Aquest script significa que, en el cas d'Internet Explorer (8 i anteriors), el script ha d'estar habilitat per tal de mostrar els elements de seccionament HTML5 i de capçaleres correctament. Si no és així, no es mostraran, la qual cosa pot ser problemàtic, ja que aquests elements són propensos a definir l'estructura de la pàgina sencera. És per això que un element explícit {{HTMLElement( "noscript")}} ha de ser afegit per a aquest cas:

+ +
<noscript>
+   <strong>Warning !</strong>
+   Because your browser does not support HTML5, some elements are simulated using JScript.
+   Unfortunately your browser has disabled scripting. Please enable it in order to display this page.
+</noscript>
+ +

Això ens porta al següent codi per permetre el suport dels elements de seccions HTML5 i capçaleres en els navegadors no HTML5, fins i tot per a Internet Explorer (8 i anteiors), amb un retorn adequat per al cas en què aquest últim navegador estigui configurat per no utilitzar 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>Warning !</strong>
+     Because your browser does not support HTML5, some elements are created using JavaScript.
+     Unfortunately your browser has disabled scripting. Please enable it in order to display this page.
+  </noscript>
+<![endif]-->
+ +

Conclusió

+ +

Els nous elements semàntics introduïts en HTML5 tene la capacitat de descriure l'estructura i l'esquema d'un document web d'una manera estàndard. Aporten una gran avantatge per a les persones que tenen navegadors HTML5 i que necessitan l'estructura per ajudar-los a entendre la pàgina, per exemple les persones que necessiten l'ajuda d'una mica de tecnologia d'assistència. Aquests nous elements semàntics són senzills d'usar i, amb molt poques càrregues, es poden fer funcionar també en els navegadors no HTML5. Per tant han de ser utilitzats sense restriccions.

+ +
{{HTML5ArticleTOC()}}
diff --git a/files/ca/web/guide/mobile/a_hybrid_approach/index.html b/files/ca/web/guide/mobile/a_hybrid_approach/index.html new file mode 100644 index 0000000000..da2ee0a625 --- /dev/null +++ b/files/ca/web/guide/mobile/a_hybrid_approach/index.html @@ -0,0 +1,43 @@ +--- +title: Una solució híbrida +slug: Web_Development/Mobile/A_hybrid_approach +translation_of: Web/Guide/Mobile/A_hybrid_approach +--- +

Les bales de plata costen de trobar en el desenvolupament web — és molt més probable que empris estratègies que fan ús de vàries tècniques segons les circumstàncies. I això ens du a la nostra tercera solució pel desenvolupament web amigable amb el mòbil, que tracta d'evitar les deficiències de les altres dues solucions (diferents webs i única web amb disseny sensible), combinant-les.

+

Aquest enfoc híbrid se centra en atacar per separat cada un dels tres objectius del desenvolupament web per als mòbils, i aplicar les millors solucions tècniques disponibles a cada un d'ells. Aquest article presenta aquí una potencial combinació de tècniques, però en altres circumstàncies pot convenir una combinació diferent. El concepte clau que cal recordar i entendre és que per resoldre les teves necesitats concretes pots combinar les tècniques que calgui de banda del servidor amb les aplicades al navegador.

+

Avantatges

+

El disseny sensible (responsive design) està força bé — ara mateix [NT: juny 2011] és la millor tècnica disponible per a fer que els nostres layouts web es vegin bé en una àmplia varietat de circumstàncies. Si l'ús que se li ha de donar a les versions mòbil i de PC de la teva web són suficientment similars, llavors aquesta és la solució preferible pels teus layouts. Encara que -no s'ha d'oblidar- pot ser una mica cansat continuament usar tècniques (CSS i Javascript) per modificar la presentació de continguts que es presenten segons el context.

+

Afortunadament, no hi ha motius tècnics que ens forcin a emprar tècniques de la banda del navegador per a aquesta tasca: tenim l'opció de fer servir la detecció del user-agent des de la banda del servidor per a escollir el contingut que volem mostrar a l'usuari. Això no reduirïa la complexitat d'alterar el contingut des de la banda del servidor, però encara permetria que els nostres layouts es beneficiessin de la flexibilitat i futura llegibilitat del disseny sensible.

+

L'ús de la detecció del user-agent pel contingut i no pas pel layout també et permetria tenir una única URL per a ambdós continguts, puix que el contingut pot adaptar la seva disposició al navegador de l'usuari. Això normalment es veu com a una bona solució. En lloc de mantenir dues versions completament diferents de la web, simplement redirigim els usuaris a les planes amb el contingut que els hi escau. I donat que el disseny és sensible, saps que cada plana es veurà tan bé com és possible a la pantalla de l'usuari.

+

També podem donar solució a alguns dels problemes de rendiment del disseny sensible incorporant certes tècniques des de la banda del servidor. Per exemple, un dels punts més criticats als dissenys sensibles és que les imatges són enviades a tots els dispositius amb la mateixa resolució, incloent telèfons els quals redimensionen les imatges inteligentment. Una tècnica per a evitar aquest inconvenient empra la detecció del user-agent des del servidor juntament amb la llibreria de detecció de capacitat del dispositiu de WURFL per a enviar una imatge ja reescalada segons el dispositiu de l'usuari. Estan sorgint una àmplia gama de productes que proporcionen això com a webservice. És clar, aquesta tècnica pateix els desavantatges associats a la deteccció del user-agent. Però inclús si això no funciona, el rendiment no és pitjor que emprant només imatges fluides.

+

Combinant les tècniques ja mencionades, podem obtenir una estratègia de desenvolupament web mòbil que és més flexible que les webs fetes diferents (mòbil vs. PC) i té millor rendiment que un disseny sensible pur.

+

Inconvenients

+

Un inconvenient de les solucions híbrides és que poden conduir a un augment en el nombre de vies de codi que treballen en paralel, tant del costat del navegador com del servidor. Això és tradueix en un molt probablement major consum de temps en programació que d'altres solucions. Encara que amb la correcta planificació, podem tenir el codi organitzat d'una manera asequible per les tasques de manteniment.

+

Un altre inconvenient és que com que aquesta solució romàn sobre l'ús d'un disseny sensible, és més factible i eficaç per a projectes de nova planta o que ja disposen d'un layout flexible, però no és així per a webs que ja tenen la versió d'escriptori ben construida. De igual forma, puix que emprem la detecció del user-agent, hauràs d'actualitzar les regles de detecció amb el temps continuament. [NT: donat que ja s'ha esmentat que hi ha web services que faciliten aquesta tasca amb un grau òptim de fiabilitat i amb facilitat d'integració en qualsevol CMS com una extensió o llibreria, no li veig al què a aquest inconvenient... és una opinió personal].

+

Quan és adient escollir aquesta solució

+

Sempre té sentit considerar combinar tecnologies del costat del navegador i del servidor; n'hi ha tantes opcions disponibles en aquest sentit que convé calibrar els pros i els contres de cada tècnica que emprem.

+

En molts casos, no és necesària la complexitat afegida del model híbrid. Per exemple, potser ni necesites ajustar el contingut en funció del dispositiu emprat per l'usuari —podria ser suficient sabent si una característica és present al seu navegador. Això ho podries discernir des del costat del navegador emprant una detecció per javascript. No pot fer mal excavar una mica i preguntar-te al voltant de quin eix vols centrar el teu contingut en cada cas.

+

Hem parlat d'afegir tècniques del costat del servidor a un disseny sensible, però també hi ha formes d'implementar un sistema híbrid per a casos on necesites que les versions mòbil i d'escriptori siguin diferents. Podries, per exemple, augmentar la flexibilitat d'amdós versions incorporant a cada una d'elles media queries [NT: indicar al navegador que carregui i apliqui diferents fulls d'estils CSS segons les característiques físiques del navegador] i un layout flexible. D'aquesta forma podries fer que la teva versiò mòbil treballés millor -més adaptativament- sobre les tabletes.well.

+

Exemples

+

webowonder_mobile_and_desktop-300x225.jpgPer a la web demo de Mozilla O’ Wonder, vam provar una versió bàsica de solució híbrida, amb resultats positius. Vam emprar alguns elements de disseny web sensible per donar a la web un layout mòbil, mentres que empràvem la deteccció de user-agent per a oferir videos amigables amb el mòbil i per a re-ordenar les demos si l'usuari era en un telèfon. Fes una ullada al seu codi si vols, que tenim al github.

+

Ben aviat podríem estar fent més desenvolupaments en aquesta línia! De fet, una possible via per a la web principal de Mozilla s'ha esbossat amunt a la secció "Avantatges":

+
    +
  • Emprant la detecció de user-agent, dirigir als visitants a una plana de benvinguda per a la versió de Firefox del seu dispositiu.
    • +
  • Cada plana de la web hauria de veure's genial a una àmplia varietat de resolucions de pantalla, construint-se amb un disseny sensible en ment.
    • +
  • Hi ha plans futurs de provar de servir imatges adaptades a diferents user-agent.
    • +
+

De moment no hi ha gaire que veure pel mòbil, puix que encara som a la etapa de planificació del desenvolupament, però sempre pots visitar i veure com creix el nou mozilla.org al github. Suscriu-te al bloc Mozilla Webdev per assebentar-te dels progressos que fem.

+

Resum

+

No hi ha una solució única per tots els casos. Les aplicacions web que pels usuaris de la versió mòbil necesiten adaptar molt els continguts o les funcionalitats que ofereixen probablement hauran de desenvolupar una web diferent a la d'escriptori. En canvi, planes orientades al contingut que no necesiten modificar el contingut pels usuaris mòbils quedaran bastant satisfets amb un disseny web sensible. Si el que necesites és canviar només lleugerament el missatge pels usuaris mòbils, i vols conservar els beneficis d'un disseny sensible, una solució híbrida pot ser la teva millor opció. Decisions com aquesta són al cor del desenvolupament de webs mòbils: sigues concret en quan al que t'agradaria aconseguir, i escull una solució pràctica sient conscient dels avantatges i inconvenients. Bona sort!

+

Enfocs del desenvolupament de webs mòbils

+

Llegeix els articles següents per a entendre el fons i les estratègies de desenvolupament per a mòbils.

+ +
+

Informació del document original

+

Aquest article va ser publicat originalment al 27 de Juny de 2011, al bloc Mozilla Webdev com "Approaches to Mobile Web Development Part 4 – A Hybrid Approach", per Jason Grlicky.

+
+

 

diff --git a/files/ca/web/guide/mobile/index.html b/files/ca/web/guide/mobile/index.html new file mode 100644 index 0000000000..84a810eb1c --- /dev/null +++ b/files/ca/web/guide/mobile/index.html @@ -0,0 +1,18 @@ +--- +title: Desenvolupament de webs per a mòbils +slug: Web_Development/Mobile +tags: + - Mobile + - NeedsTranslation + - TopicStub + - Web Development +translation_of: Web/Guide/Mobile +translation_of_original: Web_Development/Mobile +--- +

Construir webs per ser vistes en dispositius mòbils requereix prendre solucions que assegurin que la web funcioni igual de bé en dispositius mòbils com ho fa en navegadors d'escriptori. Els següents articles descriuen algunes d'aquestes solucions:

+ diff --git a/files/ca/web/guide/mobile/mobile-friendliness/index.html b/files/ca/web/guide/mobile/mobile-friendliness/index.html new file mode 100644 index 0000000000..b5ed1bbdb4 --- /dev/null +++ b/files/ca/web/guide/mobile/mobile-friendliness/index.html @@ -0,0 +1,30 @@ +--- +title: Webs amigables amb els mòbils +slug: Web_Development/Mobile/Mobile-friendliness +translation_of: Web/Guide/Mobile/Mobile-friendliness +--- +

Què és una web amigable amb els mòbils?

+

Vol dir multitud de coses segons amb qui parlis. Lo millor és veure aquest assumpte prenent com a referent els 3 objectius per a millorar l'experiència dels teus usuaris: presentació, contingut, i rendiment.

+

Objectiu #1 (presentació)

+

“Fes webs que treballin bé en qualsevol mida de pantalla.”

+

Avui dia els usuaris accedeixen a les webs emprant una gama amplísima de dispositius que inclou telèfons, tabletes, eReaders, netbooks, a banda dels tradicionals ordinadors d'escriptori i dels portàtils. I no cal dir que una web amb una estructura d'amplada fixe i 3 columnes, que a més usa intensivament javascript, efectes mouse-over, etc. no es veurà molt bé en una pantalla de 2 polzades d'amplada i un processador poc potent. En canvi, una estructura molt més aprimada, amb una estructura i uns elements redimensionats al tamany d'aquesta petita pantalla tàctil probablement garantirà una molt millor experiència de navegació. Aquesta és la raó per la que el primer objectiu és presentar adequadament el contingut de tal manera que els usuaris mòbils tingui la vida més fàcil.

+

Objectiu #2 (contingut)

+

“Adapta els teus continguts per als usuaris mòbils.”alaska_air_mobile_and_desktop-300x225.png

+

Has de rumiar què deuen voler fer els que visiten la teva web des del telèfon. Un bon exemple d'això és la plana d' Alaska Air’s. La seva web per a escriptori se centra en que els visitants facin reserves. Però probablement els usuaris mòbils estan més interessats en el check-in per a un vol, o veure si aquest vol s'ha retrasat. Per això van ajustar el continguts de les seves webs d'acord amb aquest raonament, i així estan atenent millor les necesitats dels usuaris mòbils.

+

Objectiu #3 (rendiment)

+

“Dona als teus usuaris una experiència fluïda, fins i tot amb una conexió lenta.”

+

Malgrat que la qüestió de la velocitat de conexió ha millorat força en els darrers anys, massa sovint continua sent bastant farragós la navegació sense cables des d'un dispositiu mòbil. Això fa que sigui més necesari que mai posar en pràctica tècniques d'optimització del rendiment, enviant a l'usuari exclusivament aquells bits que siguin estrictament necesaris.

+

Coneix el teu públic

+

Encara que no sigui quelcom estrictament específic de la definició de lo que és amigable amb el mòbil, definir qui i com són els teus potencials usuaris de la teva web mòbil ajuda a concretar els tres objectius anteriors. Per exemple, és absolutament crític tenir en ment a quins navegadors i dispositius et dirigiràs quan defineixis la teva estratègia. Si entre la teva audiència hi ha molts early-adopters [NT: gent que sol ser dels primers en adquirir les innovacions tecnològiques], llavors et pots enfocar en tabletes i telèfons amb navegadors que solen respectar els estàndars. Però si en canvi, la majoria dels teus usuaris disposen de telèfons amb navegadors de menys capacitat, això hauria de fer desestimar segons quines estratègies o dissenys com a opcions viables.

+

Enfocs pel desenvolupament de webs mòbils

+

Els següents enfocs difereixen en com tracten de resoldre els objectius d'usabilitat que hem estat comentant.

+ +
+

Informació del document original

+

Originalment publicat el 4 de Maig, 2011 al bloc Mozilla Webdev com "Approaches to Mobile Web Development Part 1 - What is Mobile Friendliness?", per Jason Grlicky.

+
+

 

diff --git a/files/ca/web/guide/mobile/separate_sites/index.html b/files/ca/web/guide/mobile/separate_sites/index.html new file mode 100644 index 0000000000..ceb9160b38 --- /dev/null +++ b/files/ca/web/guide/mobile/separate_sites/index.html @@ -0,0 +1,31 @@ +--- +title: Diferents webs per a mòbil i PC +slug: Web_Development/Mobile/Separate_sites +translation_of: Web/Guide/Mobile/Separate_sites +--- +

La solucio de "webs diferents" per a la construcció de webs accesibles des del mòbil implica crear realment dos webs diferents (de contingut i forma) per als usuaris mòbils i pels que ens visiten des de l'escriptori de l'ordinador/portàtil. Aquesta solució -com les altres- té els seus avantatges però també els seus inconvenients.

+

Avantatges

+

La primera opció és de lluny la més popular i habitual: emprar des del teu codi al servidor la detecció del user-agent del visitant de la web per a redirigir o mostrar una web específicament dissenyada pels mòbils, típicament ubicada a una URL del tipus m.example.com. Així, aquesta tècnica que empra una lògica construida del costat del servidor resol d'un sol cop els tres objectius del desenvolupament web — si sembla que el navegador de l'usuari està corrent en un telèfon llavors la nostra aplicació li proporcionarà un contingut adaptat en tots el sentits per al mòbil i per tant optimitzat en rendiment, en tots els sentits.

+

Conceptualment  senzill, aquesta és la opció més fàcil per a afegir a una web existent, especialment si estàs emprant un CMS o una aplicació web que suporta plantilles pel disseny de manera més o menys flexible. Donat que a l'usuari se li envien només continguts, estils i scripts especifics pel mòbil, aquest métode també proporciona el millor rendiment per sobre de qualsevol dels altres que aquí presentem. Per acabar, també permet donar als usuaris dos experiències completament diferents quan visiten una web o una altra, perqué realment són dos webs diferents.

+

Inconvenients

+

Per desgràcia, no falten els inconvenients. Per començar, hauràs de mantenir per duplicat totes les planes de la teva web que vulguis mostrar als usuaris mòbils. Si estàs emprant un CMS, és posible reorganitzar les plantilles de la web per a minimitzar aquesta feina de duplicació. Però sempre que hi hagi una diferència entre les plantilles mòbil i d'escriptori, hi haurà una potencial font de complicacions en el teu codi. Igualment, aquesta situació incrementa el temps necesari per a afegir noves característiques o continguts a la web, perqué has d'implementar el teu codi en dos lògiques de frontend diferents.

+

Més important que això, hi ha el fet de que la detecció del user-agent és una tasca inherentment defectuosa i amb una alta probabilitat de que amb el pas del temps funcioni malament quan vagin sortint nous dispositius i configuracions de navegador. Cada cop que aparegui un nou navegador hauràs d'ajustar el teu algorisme de detecció per a identificar-lo. I els falsos positius (quan es detecta algo que no és) són particularment inconvenients: podria ser vergonyòs servir la versiò mòbil de la web a un usuari d'escriptori.

+

[NT: cal dir que hi ha llibreries i webservices  que t'ajuden en aquesta detecció del user-agent amb prou fiabilitat, perqué hi ha un equip a darrera que s'encarrega de la seva continua actualització. Això garantiria bastant el que la teva aplicació de servidor sempre interpretés correctament el user-agent del visitant i et permet no només saber el tamany de la pantalla sinó també altres característiques com si és touch. Un bon exemple és el webservice Tera-WURFL.]

+

Quan és adient escollir aquesta solució

+

sumo_screenshot.pngPrimerament, si el teu públic potencial inclou usuaris amb telèfons vells o de capacitat limitada, val la pena assenyalar que necesitaries implementar aquesta solució en algun grau sí o sí encara que no sigui completament. Això és perqué el navegador que porten alguns telèfons no solen ser compatibles amb cert codi que tú empraries normalment en una web per a l'escriptori, però en canvi s'entenen força bé amb formats com XHTML-MP o el vell WML.

+

Fora d'això, hi ha un cas en el que aquesta estratègia realment destaca per sobre de qualsevol altre. Si la funcionalitat que tú vols fer arribar als teus usuaris mòbils és bastant diferent de la que normalment ofereixes a la web d'escriptori, llavors usar dos webs diferents per a cada escenari és simplement la millor opció. Perqué així tens la opció d'enviar HTML, Javascript i CSS completament diferents als mòbils i als PCs.

+

Un altre cas on tú estaries forçat a prendre una solució com aquesta és si, per qualsevol raó, no poguessis modificar la web d'escriptori tal com està, llavors necesitaries una web 100% diferent pel mòbil.

+

Exemples

+

La majoria de les aplicacions webs que has vist de les grans empreses a internet han optat per aquesta via, incloent Facebook, YouTube, Digg, i Flickr. De fet, Mozilla emprà aquesta solució per a les versions mòbils de addons.mozilla.org (AMO) i support.mozilla.org (SUMO). Si volguessis veure el codi font d'aquests exemples en acció, pren-te la llibertat de consultar el repositori a github per a AMO o SUMO.

+

Altres enfocs pel desenvolupament web mòbil

+

Fes una ullada als següents articles sobre el desenvolupament de la web mòbil.

+ +
+

Informació del document original

+

Aquest article va ser publicat originalment el 13 de Maig de 2011, al bloc Mozilla Webdev com "Approaches to Mobile Web Development Part 2 – Separate Sites", per Jason Grlicky.

+
+

 

diff --git a/files/ca/web/html/element/command/index.html b/files/ca/web/html/element/command/index.html deleted file mode 100644 index 17614b7e4f..0000000000 --- a/files/ca/web/html/element/command/index.html +++ /dev/null @@ -1,156 +0,0 @@ ---- -title: -slug: Web/HTML/Element/command -tags: - - HTML - - HTML Element Reference - - HTML element - - HTML5 -translation_of: Web/HTML/Element/command ---- -
{{obsolete_header()}}
- -
-

Nota: L'element comand s'ha eliminat de {{Gecko("24.0")}} en favor de l'element {{HTMLElement("menuitem")}}. Firefox mai ha donat suport a aquest element comand, i s'ha abandonat la implementació de la interfície DOM {{domxref("HTMLCommandElement")}} existent a Firefox 24.

-
- -

Sumari

- -

L'element comand representa un comando que l'usuari pot invocar.

- - - - - - - - - - - - - - - - - - - - - - - - -
Categories de contingutcontingut de flux, phrasing content, contingut metadata.
Contingut permèsCap, és un {{Glossary("empty element")}}.
Omissió de l'etiquetaL'etiqueta d'inici és obligatori, però, com que és un element buit, l'ús d'una etiqueta final està prohibit.
Elements pares permesosnomés {{HTMLElement("colgroup")}}, encara que  implícitament pot ser definida com la seva etiqueta d'inici però no és obligatòria. La {{HTMLElement("colgroup")}} no ha de tenir un {{HTMLElement("span")}} com a fill.
Interfície DOM{{domxref("HTMLCommandElement")}} {{ obsolete_inline(24) }}
- -

Atributs

- -

Aquest element inclou els atributs globals.

- -
-
{{htmlattrdef("checked")}}
-
Indica si comand es seleccionat. S'ha d'ometre llevat que l'atribut type és checkbox o radio.
-
{{htmlattrdef("disabled")}}
-
Indica que comand no està disponible..
-
{{htmlattrdef("icon")}}
-
Dóna una imatge que representa el comand.
-
{{htmlattrdef("label")}}
-
El nom del command tal com es mostra a l'usuari.
-
{{htmlattrdef("radiogroup")}}
-
Aquest atribut dóna el nom del grup d'ordres, amb un type radio, que es commuta quan s'alterna el propi comandament. S'ha omès aquest atribut llevat que l'atribut type sigui radio.
-
{{htmlattrdef("type")}}
-
Aquest atribut indica el tipus de comandt. Això pot ser un dels tres valors. -
    -
  • -

    command o buit que és l'estat per defecte, i indica que es tracta d'un comand normal.

    -
    • -
  • -

    checkbox indica que command s'alterna amb un checkbox.

    -
    • -
  • -

    radio indica que command s'alterna amb un radiobutton.

    -
    • -
-
-
- -

Exemples

- -
<command type="command" label="Save" icon="icons/save.png" onclick="save()">
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentari
{{SpecName('HTML WHATWG', 'commands.html', '<command>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'semantics.html#the-command-element', '<command>')}}{{Spec2('HTML5 W3C')}} 
- - - -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

{{ HTMLRef }}

diff --git a/files/ca/web/html/element/element/index.html b/files/ca/web/html/element/element/index.html deleted file mode 100644 index 66e51e06e1..0000000000 --- a/files/ca/web/html/element/element/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: -slug: Web/HTML/Element/element -translation_of: Web/HTML/Element/element ---- -
-

Nota: Aquest element s'ha eliminat de l'especificació. Vegeu això per més informació de l'editor de l'especificació.

-
- -

Resum

- -

L'element HTML <element>  s'utilitza per definir nous elements DOM personalitzats.

- - - -

Atributs

- -

Aquest element inclou els atributs globals.

- -

Exemples

- -

El text va aquí.

- -
Més text va aquí.
-
- -

Especificacions

- -

L'element <element> es torbava antigament dins d'un esborrany de l'especificació de Elements personalitzats però s'ha eliminat.

- -

Compatibilitat amb navegadors

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suport bàsic{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suport bàsic{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

Vegeu també

- -
    -
  • Components Web: {{HTMLElement("content")}}, {{HTMLElement("shadow")}}, {{HTMLElement("template")}}
    • -
- -
{{HTMLRef}}
diff --git "a/files/ca/web/html/elements_en_l\303\255nia/index.html" "b/files/ca/web/html/elements_en_l\303\255nia/index.html" deleted file mode 100644 index 0ec8db2c0d..0000000000 --- "a/files/ca/web/html/elements_en_l\303\255nia/index.html" +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: Elements en línia -slug: Web/HTML/Elements_en_línia -tags: - - Beginner - - HTML - - 'HTML:Element Reference' -translation_of: Web/HTML/Inline_elements ---- -

Sumari

- -

Els elements HTML (Hypertext Markup Language) solen ser elements "en línia" o elements a "nivell de bloc". Un element en línia ocupa només l'espai delimitat per les etiquetes que defineixen l'element en línia. El següent exemple demostra la influència de l'element en línia:

- -

Exemple en línia

- -

HTML

- -
<p>This <span>span</span> is an inline element; its background has been colored to display both the beginning and end of the inline element's influence</p>
- -

CSS

- -
span { background-color: #8ABB55; }
-
- -

{{ EmbedLiveSample('Inline_example') }}

- -

En línia vs. nivell de bloc

- -
-
Model de contingut
-
En general, els elements en línia poden contenir únicament les dades i altres elements en línia.
-
Format
-
Per defecte, els elements en línia no comencen amb nova línia.
-
- -

Elements

- -

Els següents elements són "en línia":

- -
-
-
{{ HTMLElement("a") }}
-
{{ HTMLElement("b") }}
-
{{ HTMLElement("big") }}
-
{{ HTMLElement("i") }}
-
{{ HTMLElement("small") }}
-
{{ HTMLElement("tt") }}
-
{{ HTMLElement("abbr") }}
-
{{ HTMLElement("acronym") }}
-
{{ HTMLElement("cite") }}
-
{{ HTMLElement("code") }}
-
{{ HTMLElement("dfn") }}
-
{{ HTMLElement("em") }}
-
{{ HTMLElement("kbd") }}
-
{{ HTMLElement("strong") }}
-
{{ HTMLElement("samp") }}
-
{{ HTMLElement("time") }}
-
{{ HTMLElement("var") }}
-
{{ HTMLElement("a") }}
-
{{ HTMLElement("bdo") }}
-
{{ HTMLElement("br") }}
-
{{ HTMLElement("img") }}
-
{{ HTMLElement("map") }}
-
{{ HTMLElement("object") }}
-
{{ HTMLElement("q") }}
-
{{ HTMLElement("script") }}
-
{{ HTMLElement("span") }}
-
{{ HTMLElement("sub") }}
-
{{ HTMLElement("sup") }}
-
{{ HTMLElement("button") }}
-
{{ HTMLElement("input") }}
-
{{ HTMLElement("label") }}
-
{{ HTMLElement("select") }}
-
{{ HTMLElement("textarea") }}
-
-
- -

Veure

- - diff --git a/files/ca/web/html/global_attributes/dropzone/index.html b/files/ca/web/html/global_attributes/dropzone/index.html deleted file mode 100644 index 9435eb1c68..0000000000 --- a/files/ca/web/html/global_attributes/dropzone/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: dropzone -slug: Web/HTML/Global_attributes/dropzone -tags: - - Experimental - - Global attributes - - HTML - - Reference -translation_of: Web/HTML/Global_attributes/dropzone ---- -

{{HTMLSidebar("Global_attributes")}}{{SeeCompatTable}}

- -

L'atribut global dropzone és un atribut enumerat que indica quin tipus de contingut poden ser arrossegats sobre un element, utilitzant l'API Drag and Drop. Pot tenir els següents valors:

- -
    -
  • copy,  indica que el deixa anar crearà una còpia de l'element que va ser arrossegat.
    • -
  • move, indica que l'element arrossegat es mourà a aquesta nova ubicació.
    • -
  • link, crearà un enllaç a les dades arrossegats.
    • -
- -

Especificacions

- - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentari
{{SpecName('HTML WHATWG', "interaction.html#the-dropzone-attribute", "dropzone")}}{{Spec2('HTML WHATWG')}}Sense canvis des de l'última instantània, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "editing.html#the-dropzone-attribute", "dropzone")}}{{Spec2('HTML5.1')}}Instantània de {{SpecName('HTML WHATWG')}}, definició inicial
- - - -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{ CompatUnknown() }}{{ CompatNo }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{ CompatUnknown() }}{{ CompatUnknown}}{{ CompatNo }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
- -

Veure

- - diff --git a/files/ca/web/html/inline_elements/index.html b/files/ca/web/html/inline_elements/index.html new file mode 100644 index 0000000000..0ec8db2c0d --- /dev/null +++ b/files/ca/web/html/inline_elements/index.html @@ -0,0 +1,82 @@ +--- +title: Elements en línia +slug: Web/HTML/Elements_en_línia +tags: + - Beginner + - HTML + - 'HTML:Element Reference' +translation_of: Web/HTML/Inline_elements +--- +

Sumari

+ +

Els elements HTML (Hypertext Markup Language) solen ser elements "en línia" o elements a "nivell de bloc". Un element en línia ocupa només l'espai delimitat per les etiquetes que defineixen l'element en línia. El següent exemple demostra la influència de l'element en línia:

+ +

Exemple en línia

+ +

HTML

+ +
<p>This <span>span</span> is an inline element; its background has been colored to display both the beginning and end of the inline element's influence</p>
+ +

CSS

+ +
span { background-color: #8ABB55; }
+
+ +

{{ EmbedLiveSample('Inline_example') }}

+ +

En línia vs. nivell de bloc

+ +
+
Model de contingut
+
En general, els elements en línia poden contenir únicament les dades i altres elements en línia.
+
Format
+
Per defecte, els elements en línia no comencen amb nova línia.
+
+ +

Elements

+ +

Els següents elements són "en línia":

+ +
+
+
{{ HTMLElement("a") }}
+
{{ HTMLElement("b") }}
+
{{ HTMLElement("big") }}
+
{{ HTMLElement("i") }}
+
{{ HTMLElement("small") }}
+
{{ HTMLElement("tt") }}
+
{{ HTMLElement("abbr") }}
+
{{ HTMLElement("acronym") }}
+
{{ HTMLElement("cite") }}
+
{{ HTMLElement("code") }}
+
{{ HTMLElement("dfn") }}
+
{{ HTMLElement("em") }}
+
{{ HTMLElement("kbd") }}
+
{{ HTMLElement("strong") }}
+
{{ HTMLElement("samp") }}
+
{{ HTMLElement("time") }}
+
{{ HTMLElement("var") }}
+
{{ HTMLElement("a") }}
+
{{ HTMLElement("bdo") }}
+
{{ HTMLElement("br") }}
+
{{ HTMLElement("img") }}
+
{{ HTMLElement("map") }}
+
{{ HTMLElement("object") }}
+
{{ HTMLElement("q") }}
+
{{ HTMLElement("script") }}
+
{{ HTMLElement("span") }}
+
{{ HTMLElement("sub") }}
+
{{ HTMLElement("sup") }}
+
{{ HTMLElement("button") }}
+
{{ HTMLElement("input") }}
+
{{ HTMLElement("label") }}
+
{{ HTMLElement("select") }}
+
{{ HTMLElement("textarea") }}
+
+
+ +

Veure

+ + diff --git a/files/ca/web/html/optimizing_your_pages_for_speculative_parsing/index.html b/files/ca/web/html/optimizing_your_pages_for_speculative_parsing/index.html deleted file mode 100644 index df48dec4e3..0000000000 --- a/files/ca/web/html/optimizing_your_pages_for_speculative_parsing/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: Optimizing your pages for speculative parsing -slug: Web/HTML/Optimizing_your_pages_for_speculative_parsing -translation_of: Glossary/speculative_parsing ---- -

Tradicionalment en els navegadors, el analitzador sintàctic d'HTML s'executa en el fil principal i s'ha bloquejat després d'una etiqueta </script> fins que l'script s'ha recuperat de la xarxa i s'executat. El analitzador sintàctic d'HTML en Firefox 4 i versions posteriors dóna suport a l'anàlisi especulativa fora del fil principal. A continuació s'analitza mentre que els scripts estan sent descarregats i s'executen. Com en Firefox 3.5 i 3.6, l'analitzador sintàctic d'HTML comença càrregues especulatives per als scripts, fulles d'estil i imatges que troba per davant en la seqüència. No obstant això, en Firefox 4 i posterior l'analitzador sintàctic d'HTML també executa l'algorisme de construcció de l'arbre HTML especulativament. L'avantatge és que quan una especulació té èxit, no hi ha necessitat de reanàlisi de la part de l'arxiu d'entrada ja que va ser analitzat a la recerca de scripts, fulls d'estil i imatges. L'inconvenient és que hi ha més feina perduda quan l'especulació falla.

- -

Aquest document pot ajudar evitar que aquest tipus de coses que fan que l'especulació falli i alenteixen la càrrega de la pàgina.

- -

Fent càrregues especulatives successives

- -

Només hi ha una regla per fer càrregues especulatives de scripts vinculats, fulls d'estil i imatges successives:

- -
    -
  • Si s'utilitza un element <base> per anul·lar l'URI base de la pàgina, posar l'element de la part non-scripted del document. No ho afegiu a través de document.write() or document.createElement().
    • -
- -

Evitant perdre la sortida del constructor d'arbre

- -

El constructor d'arbre especulatiu falla quan document.write() canvia l'estat del constructor d'arbre, de tal manera que l'estat especulatiu després de la etiqueta </script>  ja no se sosté quan ha estat analitzat tot el contingut inserit per document.write(). No obstant això, només els usos inusuals de document.write() causen problemes. Aquestes són les coses que cal evitar:

- -
    -
  • No escriviu arbres desequilibrats. <script>document.write("<div>");</script> és incorrecta. <script>document.write("<div></div>");</script> està bé.
    • -
  • No escriviu un símbol sense acabar. <script>document.write("<div></div");</script> is incorrecta.
    • -
  • No acabeu un escrit amb un retorn de carro. <script>document.write("Hello World!\r");</script> és incorrecta <script>document.write("Hello World!\n");</script> està bé.
    • -
  • Noteu que l'escriptura d'etiquetes equilibrades pot fer que altres etiquetes poguin inferir d'una manera que fa que l'escriptura sigui desequilibrada. Per exemple <script>document.write("<div></div>");</script> dins de l'element head s'interpreta com <script>document.write("</head><body><div></div>");</script> el qual està desequilibrat.
    • -
  • No doneu format part d'una taula. <table><script>document.write("<tr><td>Hello World!</td></tr>");</script></table> és incorrecta. However, <script>document.write("<table><tr><td>Hello World!</td></tr></table>");</script> està bé.
    • -
  • TODO: document.write dins d'altres elements de format..
    • -
diff --git a/files/ca/web/javascript/about_javascript/index.html b/files/ca/web/javascript/about_javascript/index.html new file mode 100644 index 0000000000..f581aa7021 --- /dev/null +++ b/files/ca/web/javascript/about_javascript/index.html @@ -0,0 +1,55 @@ +--- +title: Sobre JavaScript +slug: Web/JavaScript/quant_a_JavaScript +translation_of: Web/JavaScript/About_JavaScript +--- +
{{JsSidebar()}}
+ +

Què és JavaScript?

+ +

JavaScript® és el llenguatge de tipus scripting orientat a objectes desenvolupat per Netscape, utilitzat en millions de pàgines web i aplicacions de servidor arreu del món. El JavaScript de Netscape extén el llenguatge de scripting standard definit a l'ECMA-262 Edició 3 (ECMAScript), amb només lleus diferències de l'standard publicat.

+ +

Al contrari del que popular ment es creu de forma errònia, JavaScript no és "Java interpretat". En resum, JavaScript és un llegunatge d'scripting dinàmic que suporta contrucció d'objectes basada en prototipus. La sintaxi bàsica és similar a Java i C++ de forma intencionada per a reduir el nombre de conceptes nous requerits per a aprendre el llenguatge. Construccions del llenguatge, com ara sentències if, bucles for i while, blocs switch i try ... catch funcionen de la mateixa forma que en aquests llenguatges (o bé d'una forma molt semblant).

+ +

JavaScript pot funcionar com un llenguatge tant procedural com orientat a objectes. Els objectes es creen de forma programàtica en JavaScript tot afegint-hi mètodes i propietats a objectes en temps d'execució que d'altra forma serien buits, contràriament a les definicions sintàctiques  de classes tan comunes a llenguatges compilats com C++ i Java. Un cop construit un objecte aquest pot ser utilitzat com a motlle (o prototipus) per a crear objectes similars.

+ +

Les capacitats dinàmiques de JavaScript inclouen construcció d'objectes en temps d'execució, llistats de paràmetres variables, funcions com a variables, creació dinàmica de scripts (via eval), introspecció d'objectes (via for ... in) i recuperació del codi font (els programes escrits en JavaScript poden decompilar els cosos de funcions a la seva forma original de codi font).

+ +

Els objectes intrínsecs són Number, String, Boolean, Date, RegExp, i Math.

+ +

Per a una discussió més profunda de la programació en JavaScript seguiu els enllaços de recursos de JavaScript que trobareu a sota.

+ +

Quines implementacions de JavaScript hi ha disponibles?

+ +

mozilla.org alberga dues implementacions de JavaScript. La primera implementació de JavaScript de tots els temps va ser creada per Brendan Eich a Netscape, i des de llavors ha sigut actualitzada per a compliar amb la ECMA-262 Edició 5 i versions posteriors. Aquest motor, anomenat SpiderMonkey, està implementat en C. El motor Rhino, creat principalment per Norris Boyd (també a Netscape) és una implementació JavaScript en Java. Com el SpiderMonkey, Rhino compleix amb ECMA-262 Edició 3.

+ +

Al llarg del temps s'han anat afegint diverses optimitzacions al motor de JavaScript SpiderMonkey, com ara TraceMonkey (Firefox 3.5), JägerMonkey (Firefox 4) i IonMonkey.

+ +

A més de les implementacions anomenades a dalt, existeixen altres motors JavaScript, com ara:

+ +
    +
  • El V8 de Google, utilitzat al navegador Google Chrome i a les versions més recents del navegador Opera.
    • +
  • El JavaScriptCore (SquirrelFish/Nitro), utilitzat a alguns navegadors basats en WebKit, com ara l'Apple Safari.
    • +
  • El Carakan, utilitzats en versions antigues d'Opera.
    • +
  • El Chakra, utilitzat en Internet Explorer (tot i que el llenguatge que implementa és anomenat formalment "JScript" per a evitar problemes amb marques registrades).
    • +
+ +

Tots els motors de JavaScript de mozilla.org exposen una API pública que les aplicacions poden emprar per a saber sobre el suport de JavaScript. L'entorn més comú per a JavaScript són els navegadors web, amb diferència. Els navegadors web usualment utilitzen una API pública per a crear 'objectes host' responsables d'exposar el DOM dins de JavaScript.

+ +

Una altra aplicació comuna de JavaScript és com a llenguatge d'escripting al cantó del servidor (web). Un servidor web de JavaScript exposaria els objectes host que representen peticions HTTP i objectes resposta, que podrien llavors ser manipulats per un programa JavaScript per a generar pàgines web de forma dinàmica.

+ +

Recursos de JavaScript

+ +
+
SpiderMonkey
+
Informació específica per a incrustar el motor JavaScript escrit en C (també conegut com a SpiderMonkey).
+
+ +
+
Rhino
+
Informació específica sobre la implementació de JavaScript escrita en Java (també coneguda com a Rhino).
+
Recursos del llenguatge
+
Recull dels standards de JavaScript publicats.
+
Una re-introducció a JavaScript
+
Guia de JavaScript i referència de JavaScript.
+
diff --git a/files/ca/web/javascript/guide/expressions_and_operators/index.html b/files/ca/web/javascript/guide/expressions_and_operators/index.html new file mode 100644 index 0000000000..9985daa497 --- /dev/null +++ b/files/ca/web/javascript/guide/expressions_and_operators/index.html @@ -0,0 +1,846 @@ +--- +title: Expressions i operadors +slug: Web/JavaScript/Guide/Expressions_i_Operadors +translation_of: Web/JavaScript/Guide/Expressions_and_Operators +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Functions", "Web/JavaScript/Guide/Numbers_and_dates")}}
+ +

Aquest capítol explica les expressions i els operadors de JavaScript, incloent l'assignació, comparació, airtmètic, operadors de bits, lògics, cadenes, i operadors especials.

+ +

Expressions

+ +

Una expressió és qualsevol unitat de codi vàlida que esdevé un valor.

+ +

Conceptualment hi ha dos tipus d'expressions: les que assignen un valor a una variable i les que simplement tenen un valor.

+ +

L'expressió x = 7 és un exemple del primer tipus. Aquesta expressió fa servir l'operador  = per a assignar el valor set a la variable x. L'expressió per si mateixa s'avalua com a 7.

+ +

El codi 3 + 4 és un exemple d'expressió del segon tipus. Aquesta expressió utilitza l'operador + per a sumar tres i quatre sense assignar el resultat, set, a una variable.
+
+ JavaScript té les següents categories d'expressions:

+ +
    +
  • Aritmètiques: s'avaluen a un nombre, per exemple 3.14159. (Generalment utilitzen {{ web.link("#Arithmetic_operators", "operadors aritmètics") }}.)
    • +
  • String: s'avaluen a una cadena de caràcters, per exemple, "Pau" o "234". (Generalment utilitzen {{ web.link("#String_operators", "operadors d'strings") }}.)
    • +
  • Lògiques: s'avaluen a cert o fals. (sovint inclouen {{ web.link("#Logical_operators", "operadors lògics") }}.)
    • +
  • Objecte: s'avaluen a un objecte. (Vegeu els {{ web.link("#Special_operators", "operadors especials") }} més informació.)
    • +
+ +

Operadors

+ +

JavaScript disposa dels següents tipus d'operadors. Aquesta secció descriu els operadors i conté informació sobre la seva precedència.

+ +
    +
  • {{ web.link("#Assignment_operators", "Operadors d'assignació") }}
    • +
  • {{ web.link("#Comparison_operators", "Operadors de comparació") }}
    • +
  • {{ web.link("#Arithmetic_operators", "Operadors aritmètics") }}
    • +
  • {{ web.link("#Bitwise_operators", "Operadors de bits") }}
    • +
  • {{ web.link("#Logical_operators", "Operadors lògics") }}
    • +
  • {{ web.link("#String_operators", "Operadors de strings") }}
    • +
  • {{ web.link("#Special_operators", "Operadors especials") }}
    • +
+ +

JavaScript té operadors binaris i unaris, també disposa d'un operador especial ternari, l'operador condicional. Un operador binari requereix dos operands, un abans l'operador i l'altre després de l'operador:

+ +
operand1 operador operand2
+
+ +

Per exemple, 3+4 o x*y.

+ +

Un operador unari A requereix d'un sol operand, ja sigui abans o després de l'operador:

+ +
operador operand
+
+ +

o be

+ +
operand operador
+
+ +

Per exemple, x++ o ++x.

+ +

Operadors d'assignació

+ +

Un operador d'assignació assigna un valor a l'operand de la seva esquerra basat en l'operand de la seva dreta. L'operador d'assignació simple és l'igual (=), que assigna el valor de l'operand de la dreta a l'operand de l'esquerra. És a dir, x = y assigna el valor de y a x.

+ +

També hi ha operadors d'assignació compostos, que són abreviacions per als operadors llistats a la taula següent:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Taula 3.1 Operadors d'assignació
Operadors d'assignació compostosSignificat
x += yx = x + y
x -= yx = x - y
x *= yx = x * y
x /= yx = x / y
x %= yx = x % y
x <<= yx = x << y
x >>= yx = x >> y
x >>>= yx = x >>> y
x &= yx = x & y
x ^= yx = x ^ y
x |= yx = x | y
+ +

Operadors de comparació

+ +

This seems to me kind of poorly explained, mostly the difference betwen "==" and "==="...Els operadors de comparació comparen els operands i retornen un valor lògic basat en si la comparació és certa o no. Els operands poden ser numèrics, string, lògics, o bé valors d'objectes. Els Strings es comparen basant-se en l'ordre lexicogràfic standard, utilitzant valors Unicode. Quan els dos operands no són del mateix tipus, en la majoria dels casos JavaScript intenta convertir-los a un tipus apropiat per a realitzar la comparació.
+  Aquest comportament generalment resulta en una comparació amb els operands transformats a nombres. La única excepció quant a la conversió de tipus és quan s'utilitzen els operands === i !==, els quals realitzen comparacións estrictes de igualtat i no-igualtat, respectivament. Aquests operadors no intenten convertir els operands a tipus compatibles abans de aplicar l'igualtat. La taula següent descriu els operadors de comparació en base a aquest exemple:

+ +
var var1 = 3, var2 = 4;
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Taula 3.2 Operadors de comparació
OperadorDescripcióExemples que s'avaluen a cert
Igualtat (==)Retorna true si els operands són iguals.3 == var1 +

"3" == var1

+ 3 == '3'
No-igualtat (!=)Retorna true si els operands són diferents.var1 != 4
+ var2 != "3"
Igualtat estricta (===)Retorna true si els operands són iguals i del mateix tipus. Vegeu també Object.is i igualtat a JS.3 === var1
No-igualtat estricta (!==)Retorna true si els operands no són iguals i/o del mateix tipus.var1 !== "3"
+ 3 !== '3'
Major que (>)Retorna true si l'operand de l'esquerra és més gran que l'operand e la dreta.var2 > var1
+ "12" > 2
Major o igual que (>=)Retorna true si l'operand de l'esquera és major o igual que l'operand de la dreta.var2 >= var1
+ var1 >= 3
Menor que (<)Retorna true si l'operand de l'esquerra és més petit que l'operand de la dreta.var1 < var2
+ "2" < "12"
Menor o igual que (<=)Retorna true si l'operand de l'esquerra és menor o igual que l'operand de la dreta.var1 <= var2
+ var2 <= 5
+ +

Operadors aritmètics

+ +

Els operadors aritmètics prenen valors numèrics (ja siguin literals o variables) com a operands i retornen un sol valors numèric. Els operadors aritmètics standard són la suma (+), la resta (-), la multiplicació (*) i la divisió (/). Aquests operadors funcionen de la mateixa manera que a la majoria d'altres llenguatges de programació quan s'utilitzen amb nombres de coma flotant (particularment, cal destacar que la divisió entre zero produeix Infinity). Per exemple:

+ +
console.log(1 / 2); /* imprimeix 0.5 */
+console.log(1 / 2 == 1.0 / 2.0); /* això també és cert */
+
+ +

Adicionalment, JavaScript proporciona els operadors aritmètics llistats a la taula següent:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Taula 3.3 Operadors aritmètics
OperadorDescripcióExemple
%
+ (Mòdul)		Operador binari. Retorna el residu de dividir els dos operands.12 % 5 retorna 2.
++
+ (Increment)		 +

Operador unari. Afegeix un al seu operand. Si s'utilitza com a prefix (++x), retorna el valor del seu operand després d'afexir-li un; si s'utilitza com a sufix (x++), retorna el valor del seu operand abans d'afegir-li un.

+ 		Si x és 3, llavors ++x assigna 4 a x i retorna 4, mentre que x++ retorna 3 i, només llavors, assigna 4 a x.
--
+ (Decrement)		Operador uniari. Resta un al seu operand. Retorna el valor anàleg a l'operador increment.Si x és 3, llavors --x assigna 2 a x i retorna 2, mentre que x-- retorna 3 i, només llavors, assigna 2 a x.
-
+ (Negació unària)		Operador unari. Retorna el resultat de negar el seu operand.Si x val 3, llavors -x retorna -3.
+ +

Operadors de bits

+ +

Els operadors de bits tracten els seus operands com a conunts de 32 bits (zeros i uns), en comptes de com a nombres decimals, hexadecimals o octals. Per exemple, el nombre decimal 9 és representat de forma binària per 1001. Els operadors de bits realitzen operacions sobre aquestes representacions binàries, però sempre retornen valors numèrics de JavaScript.

+ +

La taula següent resumeix els operadors de bits disponibles a JavaScript.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Taula 3.4 Operadors de bits
OperadorÚsDescripció
AND binaria & bRetorna 1 a cada posició de bit on la posició corresponent a ambdós operadors conten uns.
OR binaria | b +

Retorna 1 a cada posició de bit on al menys un dels operands té un 1 a la posició corresponent.

+
XOR binaria ^ b +

Retorna un 1 a cada posició de bit on només un dels operands té un 1 a la posicio corresponent, però no ambdós.

+
NOT binari~ aInverteix els bits del seu operand.
Desplaçament a l'esquerraa << bDesplaça la representació binària de a b bits a l'esquerra, afegint zeros a la dreta.
Desplaçament a la dreta amb propagació de signea >> bDesplaça la representació binària de a b bits a la dreta, descartant els bits que no hi caben.
Desplaçament a la dreta amb inserció de zerosa >>> bDesplaça la representació binària de a b bits a la dreta, descartant els bits que no hi caben i inserint zeros a l'esquerra.
+ +

Operadors lògics de bits

+ +

Conceptualment, els operadors lògics de bits funcionen de la següent manera:

+ +
    +
  • Es converteixen els operands a nombres sencers de 32 bits expressats per una sèrie de bits (zeros i uns).
    • +
  • S'emparella cada bit del primer operand amb el bit corresponent del segond operand: el primer bit amb el primer bit, el segon amb el segon, etcètera.
    • +
  • S'aplica l'operador per a cada parella de bits, i el resultat es construeix de forma binària.
    • +
+ +

Per exemple, la representació binària de 9 és 1001, mentre que la representació binària de quinze és 1111. Així, quan els operadors de bits s'apliquen a aquests valors el resultat és el següent:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Taula 3.5 Exemples d'operadors de bits
ExpressióResultatDescripció binària
15 & 991111 & 1001 = 1001
15 | 9151111 | 1001 = 1111
15 ^ 961111 ^ 1001 = 0110
~15-16~00000000...00001111 = 11111111...11110000
~9-10~00000000...00001001 = 11111111...11110110
+ +

Fixeu-vos que a l'utilitzar l'operador de bits NOT tots 32 bits són invertit, i que els valors amb el bit més significatiu (el de l'esquerra) amb valor 1 representen nombres negatius (representació en complement a dos).

+ +

Operadors de desplaçament de bits

+ +

Els operadors de desplaçament de bits requereixen de dos operands: el primer és un conjunt de bits a desplaçar. El segon operand és el nombre de posicions que es desplaçaran els bits del primer operand. La direcció des desplaçament és controlada per l'operador utilitzat.

+ +

Els operadors de desplaçament de bits converteixen els seus operands a nombres de 32 bits i el valor retornat és del mateix tipus que l'operand de l'esquerra. Trobareu un llistat amb els operadors de desplaçament de bits a la taula següent.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
Taula 3.6 Operadors de desplaçament de bits
OperadorDescripcióExemple
<<
+ (Desplaçament a l'esquerra)		 +

Aquest operador desplaça a l'esquerra el primer operand el nombre de bits especificat. Els bits que no hi caben es descarten. Les noves posicions de la dreta s'omplen amb zeros.

+ 		9<<2 retorna 36, perquè 1001 desplaçat 2 bits a l'esquerra esdevé 100100, que és la representació binaria de 36.
>>
+ (Desplaçament a la dreta amb propagació de signe)		 +

Aquest operador desplaça el primer operand el nombre de bits especificats cap a la dreta. Els nous bits de l'esquerra són copies del bit originalment més significatiu.

+ 		9>>2 retorna 2, perquè 1001 desplaçat 2 bits a la dreta esdevé 10, que és la representació binària de 2. De la mateixa manera, -9>>2 retorna -3, perquè el signe l'operand preseva el signe.
>>>
+ (Desplaçament a la dreta omplint amb zeros)		 +

Aquest operador desplaça l'operand el nombre de bits especificat a la dreta. Els bits sobrant són descartats. Els nous bits de l'esquerra s'omplen amb zeros.

+ 		19>>>2 retorna 4, perquè 10011 desplaçat 2 bits a la dreta esdevé 100, que és la representació binària de 4. Per a nombres no negatius aquest operador retorna el mateix resultat que l'operador de desplaçament a la dreta amb propagació de signe.
+ +

Operadors lògics

+ +

Els operadors lògics utilitzen típicament amb valors booleans (lògics); quan ho són, retornen un valor de tipus Boolean. Els operadors && i || , però, en realitat retornen el valor d'un dels operands, de tal manera que si aquests operadors s'utilitzen amb valors no booleans poden retornar un valor no booleà. A la següent taula es descriuen els operadors lògics.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
Taula 3.6 Operadors lògics
OperadorÚsDescripció
&&expr1 && expr2(AND lògic) Retorna expr1 si pot ser convertida a fals; en qualsevol altre cas retorna expr2. Així, quan es proporcionen operands booleans, && retorna true si ambdós operands són true: en qualsevol altre cas retorna fals.
||expr1 || expr2(OR lògic) Retorna expr1 si pot ser convertida a true; en qualsevol altre cas retorna expr2. És a dir, quan s'utilitza amb operands booleans, || retorna true si qualsevol dels dos operands és true; si ambdós operands són false, retorna false.
!!expr(NOT lògic) Retorna false si el seu únic operand es pot convertir a true; en qualsevol altre cas retorna true.
+ +

Alguns exemples d'expressions que es poden convertir a false són aquelles que s'avaluen a null, 0, NaN, l'string buit (""), o undefined.

+ +

El codi següent mostra exemples de l'operador && (AND lògic).

+ +
var a1 =  true && true;     // t && t retorna true
+var a2 =  true && false;    // t && f retorna false
+var a3 = false && true;     // f && t retorna false
+var a4 = false && (3 == 4); // f && f retorna false
+var a5 = "Cat" && "Dog";    // t && t retorna Dog
+var a6 = false && "Cat";    // f && t retorna false
+var a7 = "Cat" && false;    // t && f retorna false
+
+ +

El codi següent mostra exemples de l'operador || (OR lògic).

+ +
var o1 =  true || true;     // t || t retorna true
+var o2 = false || true;     // f || t retorna true
+var o3 =  true || false;    // t || f retorna true
+var o4 = false || (3 == 4); // f || f retorna false
+var o5 = "Cat" || "Dog";    // t || t retorna Cat
+var o6 = false || "Cat";    // f || t retorna Cat
+var o7 = "Cat" || false;    // t || f retorna Cat
+
+ +

El codi següent mostra exemples de l'operador ! (NOT lògic).

+ +
var n1 = !true;  // !t retorna false
+var n2 = !false; // !f retorna true
+var n3 = !"Cat"; // !t retorna false
+
+ +

Avaluació en curtcircuit

+ +

Mentre les expressions lògiques es van avaluant una a una d'esquerra a dreta, a l'avaluar cadascuna també s'avalua si curtcirquiatar l'expressió mitjançant les regles següents:

+ +
    +
  • false && quelcom es curtcircuita avaluant-se a false.
    • +
  • true || quelcom es curtcircuita avaluant-se a true.
    • +
+ +

Les regles de la lògica garanteixen que aquestes avaluacions sempre són correctes. Cal remarca que la part quelcom no arriva a avaluar-se mai, així que cap efecte secundari provocat per la seva avaluació tindrà efecte.

+ +

Operadors de Strings

+ +

A més dels operadors de comparació, que poden utilitzar-se amb valors de tipus string, l'operador de concatenació (+) concatena dos valors string, retornant un altre string format per la unió dels dos strings operands. Per exemple, "la meva " + "string" retorna la string "la meva string".

+ +

L'abreviació de operador d'assignació += també pot ser emprat per a concatenar strings. Per exemple, si la variable mystring te el valor "alfa", llavors l'expressió mystring += "bet" s'avalua a "alfabet" i assigna aquest valor a mystring.

+ +

Operadors especial

+ +

JavaScript ofereix els següents operadors especials:

+ +
    +
  • {{ web.link("#Conditional_operator", "Operador condicional") }}
    • +
  • {{ web.link("#Comma_operator", "Operador coma") }}
    • +
  • {{ web.link("#delete", "delete") }}
    • +
  • {{ web.link("#in", "in") }}
    • +
  • {{ web.link("#instanceof", "instanceof") }}
    • +
  • {{ web.link("#new", "new") }}
    • +
  • {{ web.link("#this", "this") }}
    • +
  • {{ web.link("#typeof", "typeof") }}
    • +
  • {{ web.link("#void", "void") }}
    • +
+ +

Operador condicional

+ +

L'operador condicional és l'únic operador de JavaScript que accepta tres operands. L'operador retorna un de dos valors basant-se en una condició. La sintaxi és la següent:

+ +
condició ? val1 : val2
+
+ +

Si condició és certa, l'operador retorna el valor val1. En qualsevol altre cas retorna el valor val2. Es pot emprar l'operador condicional a qualsevol lloc on es pugui utilitzar un operador standard.

+ +

Per exemple,

+ +
var estat = (edat >= 18) ? "adult" : "menor";
+
+ +

Aquesta sentència assigna el valor "adult" a la variable estat si edat és 18 o més. En qualsevol altre cas assigna el valor "menor" a estat.

+ +

Operador coma

+ +

L'operador coma (,) simplement avalua els seus dos operands i retorna el valor del segon operand. Aquest operdor s'utilitza principalment dins el bucle for per a permetre que múltiples variables s'actualitzin per a cada volta del bucle.

+ +

Per exemple, si a és un array de dues dimensions amb 10 elements per dimensió, el codi següent utilitza l'operador coma per a incrementar dues variables a l'hora. El codi mostra els valors dels elements de la diagonal de l'array:

+ +
for (var i = 0, j = 9; i <= j; i++, j--)
+  document.writeln("a[" + i + "][" + j + "]= " + a[i][j]);
+
+ +

delete

+ +

L'operador delete esborra un objecte, una propietat d'un objecte o l'element a la posició especificada d'un array. La sintaxi és:

+ +
delete nomObjecte;
+delete nomObjecte.property;
+delete nomObjecte[index];
+delete propietat; // Només és legal dins una sentència with
+
+ +

on nomObjecte és el nom d'un objecte, propietat és una propietat existent i index és un nombre sencer que representa la posició d'un element dins un array.

+ +

La quarta forma només és legal dins una sentència with, per a esborrar la propietat d'un objecte.

+ +

Es pot emprar l'operador delete per a esborrar variables declarades implícitament però no serveix per a variables declarades amb la sentència var.

+ +

Si l'operador delete aconsegueix el seu objectiu, assigna el valor undefined a la propietat o element esmentat. L'operador delete retorna true si l'operació és posible; retorna false si l'operació no és posible.

+ +
x = 42;
+var y = 43;
+myobj = new Number();
+myobj.h = 4;    // crea la propietat h
+delete x;       // retorna true (pot esborrar si la variable ha estat declarada implicitament)
+delete y;       // retorna false (no pot esborrar si la variable ha estat declarada amb var)
+delete Math.PI; // retorna false (no pot esborrar propietats predefinides)
+delete myobj.h; // retorna true (pot esborrar propietats definides per l'usuari)
+delete myobj;   // retorna true (pot esborrar si l'objecte ha estat declarat implícitament)
+
+ +
Esborrar elements d'un array
+ +

A l'esborrar l'element d'un array, la longitud de l'array no es veu afectada. Per exemple, si s'esborrar a[3], a[4] roman a a[4] mentre que a[3] passa a valer undefined.

+ +

Quan l'operador delete esborra un element d'un array, aquest element ja no és a l'array. Al següent exemple, s'esborra trees[3] amb delete. Tot i així, trees[3] encara és accessible i retorna undefined.

+ +
var trees = new Array("redwood", "bay", "cedar", "oak", "maple");
+delete trees[3];
+if (3 in trees) {
+  // aquest codi no s'arriba a executar mai
+}
+
+ +

Si es vol que un element d'un array existeixi però tingui un valor indefinit, es pot emprar la paraula clau undefined en comptes de l'operador delete. Al següent exemple, trees[3] rep el valor undefined, però l'elelement de l'array encara existeix:

+ +
var trees = new Array("redwood", "bay", "cedar", "oak", "maple");
+trees[3] = undefined;
+if (3 in trees) {
+  // aquest codi s'executa
+}
+
+ +

in

+ +

L'operador in retorna true si la propietat especificada existeix en l'objecte especificat. La sintaxi és:

+ +
nomPropOnombre in nomObjecte
+
+ +

on nomPropOnombre és una string que representa el nom d'una propietat o bé una expressió numèrica que representa la posició d'un element dins un array, i nomObjecte és el nom d'un objecte.

+ +

Els següents exemples mostren alguns usos de l'operador in.

+ +
// Arrays
+var trees = new Array("redwood", "bay", "cedar", "oak", "maple");
+0 in trees;        // retorna true
+3 in trees;        // retorna true
+6 in trees;        // retorna false
+"bay" in trees;    // retorna false (s'ha de proporcionar l'índex,
+                   // no el valor a aquell índex)
+"length" in trees; // retorna true (length és una propietat de Array)
+
+// Objects predefinits
+"PI" in Math;          // retorna true
+var myString = new String("coral");
+"length" in myString;  // retorna true
+
+// Objectes creats per l'usuari
+var mycar = {make: "Honda", model: "Accord", year: 1998};
+"make" in mycar;  // retorna true
+"model" in mycar; // retorna true
+
+ +

instanceof

+ +

L'operador instanceof retorna cert si l'objecte especificat és del tipus especificat. La sintaxi és:

+ +
nomObjecte instanceof tipusObjecte
+
+ +

on nomObjecte és el nom de l'objecte a comprarar amb tipusObjecte, i tipusObjecte és un tipus d'objecte, com ara Date o Array.

+ +

Utilitzeu instanceof quan necessiteu confirmar el tipus d'un objecte en temps d'execució. Per exemple, a l'hora de capturar execepcions és posible executar diferent codi segons el tipus d'excepció llençada.

+ +

Per exemple, el següent codi utilitza instanceof per a determinar si dia és un objecte de tipus Date. Com que dia és un objecte de tipus Date les sentències dins la sentència if s'executaran.

+ +
var dia = new Date(1995, 12, 17);
+if (dia instanceof Date) {
+  // bloc de codi que s'executarà
+}
+
+ +

new

+ +

L'operador new s'utilitza per a crear una instància d'un tipus d'objete definit per l'usuari o bé un dels tipus d'objectes predefinits Array, Boolean, Date, Function, Image, Number, Object, Option, RegExp, o String. Al servidor també es pot emprar amb DbPool, Lock, File, i SendMail. La sintaxi de new és la següent:

+ +
var nomObjecte = new tipusObjecte([param1, param2, ..., paramN]);
+
+ +

També és posible crear objectes mitjançant inicialitzadors d'objectes, tal i com s'explica a {{ web.link("Working_with_objects#Using_object_initializers", "utilitzar inicialitzadors d'objectes") }}.

+ +

Vegeu la pàgina de l'operador new a la Referència del nucli de JavaScript per a més informació.

+ +

this

+ +

La paraula clau this s'utilitza per a referir-se a l'objecte actual. En general this fa referència a l'objecte que ha realitzat la crida dins un mètode. La sintaxi de this és la següent:

+ +
this["nomPropietat"]
+
+ +
this.nomPropietat
+
+ +

Exemple 1.
+ Suposem que una funció anomenada validate valida la propietat value d'un objecte, donat l'objecte i el rang de valors:

+ +
function validate(obj, lowval, hival){
+  if ((obj.value < lowval) || (obj.value > hival))
+    alert("Valor no vàlid!");
+}
+
+ +

Podríem cridar validate a cada manegador d'events onChange dels elements d'un formulari, utilitzant this per a passar l'element del formulari, tal i com es mostra al següent exemple:

+ +
<B>Introduïu un nombre entre 18 i 99:</B>
+<INPUT TYPE="text" NAME="edat" SIZE=3
+   onChange="validate(this, 18, 99);">
+
+ +

Exemple 2.
+ Al combinar-lo amb la propietat del form, this fa referència al pare de l'objecte del formulari. Al següent exemple el form myForm conté un bojecte Text i un botó. Quan l'usuari fa clic al botó, el valor de l'objecte Text és assignat al nom del formulari. El manegador de l'event onClick del botó utilitza this.form per a fererir-se al fomulari pare, myForm.

+ +
<FORM NAME="myForm">
+Nom del formulari:<INPUT TYPE="text" NAME="text1" VALUE="Beluga"/>
+<INPUT NAME="button1" TYPE="button" VALUE="Mostrar el nom del formulari"
+   onClick="this.form.text1.value = this.form.name;"/>
+</FORM>
+
+ +

typeof

+ +

L'operador typeof es pot utilitzar de qualsevol de les formes següents:

+ +
    +
  1. + 
    typeof operand
+
    +
    2. +
  2. + 
    typeof (operand)
+
    +
    3. +
+ +

L'operador typeof retorna una string indicant el tipus de l'operand, que no és avaluat. operand és una string, variable, paraula clau u objecte del qual es retornarà el tipus. Els parèntesi són opcionals.

+ +

Suposem que es defineixen les següents variables:

+ +
var myFun = new Function("5 + 2");
+var forma = "rodona";
+var tamany = 1;
+var avui = new Date();
+
+ +

L'operador typeof retornarà els següents resultats per a aquestes variables:

+ +
typeof myFun;      // retorna "function"
+typeof forma;      // retorna "string"
+typeof tamany;     // retorna "number"
+typeof avui;       // retorna "object"
+typeof noExisteix; // retorna "undefined"
+
+ +

Per a les paraules clau true i null, l'operador typeof retorna els següents resultats:

+ +
typeof true; // retorna "boolean"
+typeof null; // retorna "object"
+
+ +

Per a un nombre o string, l'operador typeof retorna els següents resultats:

+ +
typeof 62;            // retorna "number"
+typeof 'Hola món';    // retorna "string"
+
+ +

Per a valors de propietats, l'operador typeof retorna el tipus del valor que conté la propietat:

+ +
typeof document.lastModified; // retorna "string"
+typeof window.length;         // retorna "number"
+typeof Math.LN2;              // retorna "number"
+
+ +

Per a mètodes i funcions, l'operador typeof retorna els següents resultats:

+ +
typeof blur;        // retorna "function"
+typeof eval;        // retorna "function"
+typeof parseInt;    // retorna "function"
+typeof shape.split; // retorna "function"
+
+ +

Per a objectes predefinits, l'operador typeof retorna els resultats següents:

+ +
typeof Date;     // retorna "function"
+typeof Function; // retorna "function"
+typeof Math;     // retorna "object"
+typeof Option;   // retorna "function"
+typeof String;   // retorna "function"
+
+ +

void

+ +

L'operador void es pot emprar de qualsevol de les maneres següents:

+ +
    +
  1. + 
    void (expression)
+
    +
    2. +
  2. + 
    void expression
+
    +
    3. +
+ +

L'operador void avalua una expressió però no retorna cap valor. expression és l'expressió JavaScript a avaluar. Els parèntesi que embocallen l'expressió són opcionals, però es considera una bona pràctica utilitzar-los.

+ +

És possible utilitzar l'operador void per a especificar una expressió com a hipervincle. L'expressió serà avaluada però el seu contingut no reemplaçarà el contingut del document actual.

+ +

El codi següent crea un hipervincle que no fa res quan l'usuari faci clic a l'hipervincle. Quan l'usuari fa clic al l'hipervincle, void(0) serà avaluada com a undefined, la qual cosa no té cap efecte en JavaScript.

+ +
<A HREF="javascript:void(0)">Cliqueu aquí per a no fer res</A>
+
+ +

El codi següent crea un hipervincle que envia un formulari quan l'usuari fa clic sobre ell.

+ +
<A HREF="javascript:void(document.form.submit())">
+Feu clic aquí per a enviar el formulari</A>
+ +

Precedència d'operadors

+ +

La precedència d'operadors determina l'ordre en el qual aquests s'apliquen quan s'avalua una expressió. Es pot canviar aquest comportament mitjançant parèntesi.

+ +

La taula següent descriu la precedència dels operadors, del més prioritari al que ho és menys.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Taula 3.7 Precedència d'operadors
Tipus d'operadorOperadors individuals
membre. []
crida / creació d'una instància() new
negació/increment! ~ - + ++ -- typeof void delete
multiplicació/divisió* / %
suma/resta+ -
desplaçament de bits<< >> >>>
relacionals< <= > >= in instanceof
igualtat== != === !==
AND binari&
XOR binari^
OR binari|
AND lògic&&
OR lògic||
condicional?:
assignació= += -= *= /= %= <<= >>= >>>= &= ^= |=
coma,
+ +

Trobareu una versió més detallada d'aqueta taula, completa amb enllaços a a detalls adicionals per a cada operador a la Referència de JavaScript.

diff --git a/files/ca/web/javascript/guide/expressions_i_operadors/index.html b/files/ca/web/javascript/guide/expressions_i_operadors/index.html deleted file mode 100644 index 9985daa497..0000000000 --- a/files/ca/web/javascript/guide/expressions_i_operadors/index.html +++ /dev/null @@ -1,846 +0,0 @@ ---- -title: Expressions i operadors -slug: Web/JavaScript/Guide/Expressions_i_Operadors -translation_of: Web/JavaScript/Guide/Expressions_and_Operators ---- -
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Functions", "Web/JavaScript/Guide/Numbers_and_dates")}}
- -

Aquest capítol explica les expressions i els operadors de JavaScript, incloent l'assignació, comparació, airtmètic, operadors de bits, lògics, cadenes, i operadors especials.

- -

Expressions

- -

Una expressió és qualsevol unitat de codi vàlida que esdevé un valor.

- -

Conceptualment hi ha dos tipus d'expressions: les que assignen un valor a una variable i les que simplement tenen un valor.

- -

L'expressió x = 7 és un exemple del primer tipus. Aquesta expressió fa servir l'operador  = per a assignar el valor set a la variable x. L'expressió per si mateixa s'avalua com a 7.

- -

El codi 3 + 4 és un exemple d'expressió del segon tipus. Aquesta expressió utilitza l'operador + per a sumar tres i quatre sense assignar el resultat, set, a una variable.
-
- JavaScript té les següents categories d'expressions:

- -
    -
  • Aritmètiques: s'avaluen a un nombre, per exemple 3.14159. (Generalment utilitzen {{ web.link("#Arithmetic_operators", "operadors aritmètics") }}.)
    • -
  • String: s'avaluen a una cadena de caràcters, per exemple, "Pau" o "234". (Generalment utilitzen {{ web.link("#String_operators", "operadors d'strings") }}.)
    • -
  • Lògiques: s'avaluen a cert o fals. (sovint inclouen {{ web.link("#Logical_operators", "operadors lògics") }}.)
    • -
  • Objecte: s'avaluen a un objecte. (Vegeu els {{ web.link("#Special_operators", "operadors especials") }} més informació.)
    • -
- -

Operadors

- -

JavaScript disposa dels següents tipus d'operadors. Aquesta secció descriu els operadors i conté informació sobre la seva precedència.

- -
    -
  • {{ web.link("#Assignment_operators", "Operadors d'assignació") }}
    • -
  • {{ web.link("#Comparison_operators", "Operadors de comparació") }}
    • -
  • {{ web.link("#Arithmetic_operators", "Operadors aritmètics") }}
    • -
  • {{ web.link("#Bitwise_operators", "Operadors de bits") }}
    • -
  • {{ web.link("#Logical_operators", "Operadors lògics") }}
    • -
  • {{ web.link("#String_operators", "Operadors de strings") }}
    • -
  • {{ web.link("#Special_operators", "Operadors especials") }}
    • -
- -

JavaScript té operadors binaris i unaris, també disposa d'un operador especial ternari, l'operador condicional. Un operador binari requereix dos operands, un abans l'operador i l'altre després de l'operador:

- -
operand1 operador operand2
-
- -

Per exemple, 3+4 o x*y.

- -

Un operador unari A requereix d'un sol operand, ja sigui abans o després de l'operador:

- -
operador operand
-
- -

o be

- -
operand operador
-
- -

Per exemple, x++ o ++x.

- -

Operadors d'assignació

- -

Un operador d'assignació assigna un valor a l'operand de la seva esquerra basat en l'operand de la seva dreta. L'operador d'assignació simple és l'igual (=), que assigna el valor de l'operand de la dreta a l'operand de l'esquerra. És a dir, x = y assigna el valor de y a x.

- -

També hi ha operadors d'assignació compostos, que són abreviacions per als operadors llistats a la taula següent:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Taula 3.1 Operadors d'assignació
Operadors d'assignació compostosSignificat
x += yx = x + y
x -= yx = x - y
x *= yx = x * y
x /= yx = x / y
x %= yx = x % y
x <<= yx = x << y
x >>= yx = x >> y
x >>>= yx = x >>> y
x &= yx = x & y
x ^= yx = x ^ y
x |= yx = x | y
- -

Operadors de comparació

- -

This seems to me kind of poorly explained, mostly the difference betwen "==" and "==="...Els operadors de comparació comparen els operands i retornen un valor lògic basat en si la comparació és certa o no. Els operands poden ser numèrics, string, lògics, o bé valors d'objectes. Els Strings es comparen basant-se en l'ordre lexicogràfic standard, utilitzant valors Unicode. Quan els dos operands no són del mateix tipus, en la majoria dels casos JavaScript intenta convertir-los a un tipus apropiat per a realitzar la comparació.
-  Aquest comportament generalment resulta en una comparació amb els operands transformats a nombres. La única excepció quant a la conversió de tipus és quan s'utilitzen els operands === i !==, els quals realitzen comparacións estrictes de igualtat i no-igualtat, respectivament. Aquests operadors no intenten convertir els operands a tipus compatibles abans de aplicar l'igualtat. La taula següent descriu els operadors de comparació en base a aquest exemple:

- -
var var1 = 3, var2 = 4;
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Taula 3.2 Operadors de comparació
OperadorDescripcióExemples que s'avaluen a cert
Igualtat (==)Retorna true si els operands són iguals.3 == var1 -

"3" == var1

- 3 == '3'
No-igualtat (!=)Retorna true si els operands són diferents.var1 != 4
- var2 != "3"
Igualtat estricta (===)Retorna true si els operands són iguals i del mateix tipus. Vegeu també Object.is i igualtat a JS.3 === var1
No-igualtat estricta (!==)Retorna true si els operands no són iguals i/o del mateix tipus.var1 !== "3"
- 3 !== '3'
Major que (>)Retorna true si l'operand de l'esquerra és més gran que l'operand e la dreta.var2 > var1
- "12" > 2
Major o igual que (>=)Retorna true si l'operand de l'esquera és major o igual que l'operand de la dreta.var2 >= var1
- var1 >= 3
Menor que (<)Retorna true si l'operand de l'esquerra és més petit que l'operand de la dreta.var1 < var2
- "2" < "12"
Menor o igual que (<=)Retorna true si l'operand de l'esquerra és menor o igual que l'operand de la dreta.var1 <= var2
- var2 <= 5
- -

Operadors aritmètics

- -

Els operadors aritmètics prenen valors numèrics (ja siguin literals o variables) com a operands i retornen un sol valors numèric. Els operadors aritmètics standard són la suma (+), la resta (-), la multiplicació (*) i la divisió (/). Aquests operadors funcionen de la mateixa manera que a la majoria d'altres llenguatges de programació quan s'utilitzen amb nombres de coma flotant (particularment, cal destacar que la divisió entre zero produeix Infinity). Per exemple:

- -
console.log(1 / 2); /* imprimeix 0.5 */
-console.log(1 / 2 == 1.0 / 2.0); /* això també és cert */
-
- -

Adicionalment, JavaScript proporciona els operadors aritmètics llistats a la taula següent:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Taula 3.3 Operadors aritmètics
OperadorDescripcióExemple
%
- (Mòdul)		Operador binari. Retorna el residu de dividir els dos operands.12 % 5 retorna 2.
++
- (Increment)		 -

Operador unari. Afegeix un al seu operand. Si s'utilitza com a prefix (++x), retorna el valor del seu operand després d'afexir-li un; si s'utilitza com a sufix (x++), retorna el valor del seu operand abans d'afegir-li un.

- 		Si x és 3, llavors ++x assigna 4 a x i retorna 4, mentre que x++ retorna 3 i, només llavors, assigna 4 a x.
--
- (Decrement)		Operador uniari. Resta un al seu operand. Retorna el valor anàleg a l'operador increment.Si x és 3, llavors --x assigna 2 a x i retorna 2, mentre que x-- retorna 3 i, només llavors, assigna 2 a x.
-
- (Negació unària)		Operador unari. Retorna el resultat de negar el seu operand.Si x val 3, llavors -x retorna -3.
- -

Operadors de bits

- -

Els operadors de bits tracten els seus operands com a conunts de 32 bits (zeros i uns), en comptes de com a nombres decimals, hexadecimals o octals. Per exemple, el nombre decimal 9 és representat de forma binària per 1001. Els operadors de bits realitzen operacions sobre aquestes representacions binàries, però sempre retornen valors numèrics de JavaScript.

- -

La taula següent resumeix els operadors de bits disponibles a JavaScript.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Taula 3.4 Operadors de bits
OperadorÚsDescripció
AND binaria & bRetorna 1 a cada posició de bit on la posició corresponent a ambdós operadors conten uns.
OR binaria | b -

Retorna 1 a cada posició de bit on al menys un dels operands té un 1 a la posició corresponent.

-
XOR binaria ^ b -

Retorna un 1 a cada posició de bit on només un dels operands té un 1 a la posicio corresponent, però no ambdós.

-
NOT binari~ aInverteix els bits del seu operand.
Desplaçament a l'esquerraa << bDesplaça la representació binària de a b bits a l'esquerra, afegint zeros a la dreta.
Desplaçament a la dreta amb propagació de signea >> bDesplaça la representació binària de a b bits a la dreta, descartant els bits que no hi caben.
Desplaçament a la dreta amb inserció de zerosa >>> bDesplaça la representació binària de a b bits a la dreta, descartant els bits que no hi caben i inserint zeros a l'esquerra.
- -

Operadors lògics de bits

- -

Conceptualment, els operadors lògics de bits funcionen de la següent manera:

- -
    -
  • Es converteixen els operands a nombres sencers de 32 bits expressats per una sèrie de bits (zeros i uns).
    • -
  • S'emparella cada bit del primer operand amb el bit corresponent del segond operand: el primer bit amb el primer bit, el segon amb el segon, etcètera.
    • -
  • S'aplica l'operador per a cada parella de bits, i el resultat es construeix de forma binària.
    • -
- -

Per exemple, la representació binària de 9 és 1001, mentre que la representació binària de quinze és 1111. Així, quan els operadors de bits s'apliquen a aquests valors el resultat és el següent:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Taula 3.5 Exemples d'operadors de bits
ExpressióResultatDescripció binària
15 & 991111 & 1001 = 1001
15 | 9151111 | 1001 = 1111
15 ^ 961111 ^ 1001 = 0110
~15-16~00000000...00001111 = 11111111...11110000
~9-10~00000000...00001001 = 11111111...11110110
- -

Fixeu-vos que a l'utilitzar l'operador de bits NOT tots 32 bits són invertit, i que els valors amb el bit més significatiu (el de l'esquerra) amb valor 1 representen nombres negatius (representació en complement a dos).

- -

Operadors de desplaçament de bits

- -

Els operadors de desplaçament de bits requereixen de dos operands: el primer és un conjunt de bits a desplaçar. El segon operand és el nombre de posicions que es desplaçaran els bits del primer operand. La direcció des desplaçament és controlada per l'operador utilitzat.

- -

Els operadors de desplaçament de bits converteixen els seus operands a nombres de 32 bits i el valor retornat és del mateix tipus que l'operand de l'esquerra. Trobareu un llistat amb els operadors de desplaçament de bits a la taula següent.

- - - - - - - - - - - - - - - - - - - - - - - - - - - -
Taula 3.6 Operadors de desplaçament de bits
OperadorDescripcióExemple
<<
- (Desplaçament a l'esquerra)		 -

Aquest operador desplaça a l'esquerra el primer operand el nombre de bits especificat. Els bits que no hi caben es descarten. Les noves posicions de la dreta s'omplen amb zeros.

- 		9<<2 retorna 36, perquè 1001 desplaçat 2 bits a l'esquerra esdevé 100100, que és la representació binaria de 36.
>>
- (Desplaçament a la dreta amb propagació de signe)		 -

Aquest operador desplaça el primer operand el nombre de bits especificats cap a la dreta. Els nous bits de l'esquerra són copies del bit originalment més significatiu.

- 		9>>2 retorna 2, perquè 1001 desplaçat 2 bits a la dreta esdevé 10, que és la representació binària de 2. De la mateixa manera, -9>>2 retorna -3, perquè el signe l'operand preseva el signe.
>>>
- (Desplaçament a la dreta omplint amb zeros)		 -

Aquest operador desplaça l'operand el nombre de bits especificat a la dreta. Els bits sobrant són descartats. Els nous bits de l'esquerra s'omplen amb zeros.

- 		19>>>2 retorna 4, perquè 10011 desplaçat 2 bits a la dreta esdevé 100, que és la representació binària de 4. Per a nombres no negatius aquest operador retorna el mateix resultat que l'operador de desplaçament a la dreta amb propagació de signe.
- -

Operadors lògics

- -

Els operadors lògics utilitzen típicament amb valors booleans (lògics); quan ho són, retornen un valor de tipus Boolean. Els operadors && i || , però, en realitat retornen el valor d'un dels operands, de tal manera que si aquests operadors s'utilitzen amb valors no booleans poden retornar un valor no booleà. A la següent taula es descriuen els operadors lògics.

- - - - - - - - - - - - - - - - - - - - - - - - - - - -
Taula 3.6 Operadors lògics
OperadorÚsDescripció
&&expr1 && expr2(AND lògic) Retorna expr1 si pot ser convertida a fals; en qualsevol altre cas retorna expr2. Així, quan es proporcionen operands booleans, && retorna true si ambdós operands són true: en qualsevol altre cas retorna fals.
||expr1 || expr2(OR lògic) Retorna expr1 si pot ser convertida a true; en qualsevol altre cas retorna expr2. És a dir, quan s'utilitza amb operands booleans, || retorna true si qualsevol dels dos operands és true; si ambdós operands són false, retorna false.
!!expr(NOT lògic) Retorna false si el seu únic operand es pot convertir a true; en qualsevol altre cas retorna true.
- -

Alguns exemples d'expressions que es poden convertir a false són aquelles que s'avaluen a null, 0, NaN, l'string buit (""), o undefined.

- -

El codi següent mostra exemples de l'operador && (AND lògic).

- -
var a1 =  true && true;     // t && t retorna true
-var a2 =  true && false;    // t && f retorna false
-var a3 = false && true;     // f && t retorna false
-var a4 = false && (3 == 4); // f && f retorna false
-var a5 = "Cat" && "Dog";    // t && t retorna Dog
-var a6 = false && "Cat";    // f && t retorna false
-var a7 = "Cat" && false;    // t && f retorna false
-
- -

El codi següent mostra exemples de l'operador || (OR lògic).

- -
var o1 =  true || true;     // t || t retorna true
-var o2 = false || true;     // f || t retorna true
-var o3 =  true || false;    // t || f retorna true
-var o4 = false || (3 == 4); // f || f retorna false
-var o5 = "Cat" || "Dog";    // t || t retorna Cat
-var o6 = false || "Cat";    // f || t retorna Cat
-var o7 = "Cat" || false;    // t || f retorna Cat
-
- -

El codi següent mostra exemples de l'operador ! (NOT lògic).

- -
var n1 = !true;  // !t retorna false
-var n2 = !false; // !f retorna true
-var n3 = !"Cat"; // !t retorna false
-
- -

Avaluació en curtcircuit

- -

Mentre les expressions lògiques es van avaluant una a una d'esquerra a dreta, a l'avaluar cadascuna també s'avalua si curtcirquiatar l'expressió mitjançant les regles següents:

- -
    -
  • false && quelcom es curtcircuita avaluant-se a false.
    • -
  • true || quelcom es curtcircuita avaluant-se a true.
    • -
- -

Les regles de la lògica garanteixen que aquestes avaluacions sempre són correctes. Cal remarca que la part quelcom no arriva a avaluar-se mai, així que cap efecte secundari provocat per la seva avaluació tindrà efecte.

- -

Operadors de Strings

- -

A més dels operadors de comparació, que poden utilitzar-se amb valors de tipus string, l'operador de concatenació (+) concatena dos valors string, retornant un altre string format per la unió dels dos strings operands. Per exemple, "la meva " + "string" retorna la string "la meva string".

- -

L'abreviació de operador d'assignació += també pot ser emprat per a concatenar strings. Per exemple, si la variable mystring te el valor "alfa", llavors l'expressió mystring += "bet" s'avalua a "alfabet" i assigna aquest valor a mystring.

- -

Operadors especial

- -

JavaScript ofereix els següents operadors especials:

- -
    -
  • {{ web.link("#Conditional_operator", "Operador condicional") }}
    • -
  • {{ web.link("#Comma_operator", "Operador coma") }}
    • -
  • {{ web.link("#delete", "delete") }}
    • -
  • {{ web.link("#in", "in") }}
    • -
  • {{ web.link("#instanceof", "instanceof") }}
    • -
  • {{ web.link("#new", "new") }}
    • -
  • {{ web.link("#this", "this") }}
    • -
  • {{ web.link("#typeof", "typeof") }}
    • -
  • {{ web.link("#void", "void") }}
    • -
- -

Operador condicional

- -

L'operador condicional és l'únic operador de JavaScript que accepta tres operands. L'operador retorna un de dos valors basant-se en una condició. La sintaxi és la següent:

- -
condició ? val1 : val2
-
- -

Si condició és certa, l'operador retorna el valor val1. En qualsevol altre cas retorna el valor val2. Es pot emprar l'operador condicional a qualsevol lloc on es pugui utilitzar un operador standard.

- -

Per exemple,

- -
var estat = (edat >= 18) ? "adult" : "menor";
-
- -

Aquesta sentència assigna el valor "adult" a la variable estat si edat és 18 o més. En qualsevol altre cas assigna el valor "menor" a estat.

- -

Operador coma

- -

L'operador coma (,) simplement avalua els seus dos operands i retorna el valor del segon operand. Aquest operdor s'utilitza principalment dins el bucle for per a permetre que múltiples variables s'actualitzin per a cada volta del bucle.

- -

Per exemple, si a és un array de dues dimensions amb 10 elements per dimensió, el codi següent utilitza l'operador coma per a incrementar dues variables a l'hora. El codi mostra els valors dels elements de la diagonal de l'array:

- -
for (var i = 0, j = 9; i <= j; i++, j--)
-  document.writeln("a[" + i + "][" + j + "]= " + a[i][j]);
-
- -

delete

- -

L'operador delete esborra un objecte, una propietat d'un objecte o l'element a la posició especificada d'un array. La sintaxi és:

- -
delete nomObjecte;
-delete nomObjecte.property;
-delete nomObjecte[index];
-delete propietat; // Només és legal dins una sentència with
-
- -

on nomObjecte és el nom d'un objecte, propietat és una propietat existent i index és un nombre sencer que representa la posició d'un element dins un array.

- -

La quarta forma només és legal dins una sentència with, per a esborrar la propietat d'un objecte.

- -

Es pot emprar l'operador delete per a esborrar variables declarades implícitament però no serveix per a variables declarades amb la sentència var.

- -

Si l'operador delete aconsegueix el seu objectiu, assigna el valor undefined a la propietat o element esmentat. L'operador delete retorna true si l'operació és posible; retorna false si l'operació no és posible.

- -
x = 42;
-var y = 43;
-myobj = new Number();
-myobj.h = 4;    // crea la propietat h
-delete x;       // retorna true (pot esborrar si la variable ha estat declarada implicitament)
-delete y;       // retorna false (no pot esborrar si la variable ha estat declarada amb var)
-delete Math.PI; // retorna false (no pot esborrar propietats predefinides)
-delete myobj.h; // retorna true (pot esborrar propietats definides per l'usuari)
-delete myobj;   // retorna true (pot esborrar si l'objecte ha estat declarat implícitament)
-
- -
Esborrar elements d'un array
- -

A l'esborrar l'element d'un array, la longitud de l'array no es veu afectada. Per exemple, si s'esborrar a[3], a[4] roman a a[4] mentre que a[3] passa a valer undefined.

- -

Quan l'operador delete esborra un element d'un array, aquest element ja no és a l'array. Al següent exemple, s'esborra trees[3] amb delete. Tot i així, trees[3] encara és accessible i retorna undefined.

- -
var trees = new Array("redwood", "bay", "cedar", "oak", "maple");
-delete trees[3];
-if (3 in trees) {
-  // aquest codi no s'arriba a executar mai
-}
-
- -

Si es vol que un element d'un array existeixi però tingui un valor indefinit, es pot emprar la paraula clau undefined en comptes de l'operador delete. Al següent exemple, trees[3] rep el valor undefined, però l'elelement de l'array encara existeix:

- -
var trees = new Array("redwood", "bay", "cedar", "oak", "maple");
-trees[3] = undefined;
-if (3 in trees) {
-  // aquest codi s'executa
-}
-
- -

in

- -

L'operador in retorna true si la propietat especificada existeix en l'objecte especificat. La sintaxi és:

- -
nomPropOnombre in nomObjecte
-
- -

on nomPropOnombre és una string que representa el nom d'una propietat o bé una expressió numèrica que representa la posició d'un element dins un array, i nomObjecte és el nom d'un objecte.

- -

Els següents exemples mostren alguns usos de l'operador in.

- -
// Arrays
-var trees = new Array("redwood", "bay", "cedar", "oak", "maple");
-0 in trees;        // retorna true
-3 in trees;        // retorna true
-6 in trees;        // retorna false
-"bay" in trees;    // retorna false (s'ha de proporcionar l'índex,
-                   // no el valor a aquell índex)
-"length" in trees; // retorna true (length és una propietat de Array)
-
-// Objects predefinits
-"PI" in Math;          // retorna true
-var myString = new String("coral");
-"length" in myString;  // retorna true
-
-// Objectes creats per l'usuari
-var mycar = {make: "Honda", model: "Accord", year: 1998};
-"make" in mycar;  // retorna true
-"model" in mycar; // retorna true
-
- -

instanceof

- -

L'operador instanceof retorna cert si l'objecte especificat és del tipus especificat. La sintaxi és:

- -
nomObjecte instanceof tipusObjecte
-
- -

on nomObjecte és el nom de l'objecte a comprarar amb tipusObjecte, i tipusObjecte és un tipus d'objecte, com ara Date o Array.

- -

Utilitzeu instanceof quan necessiteu confirmar el tipus d'un objecte en temps d'execució. Per exemple, a l'hora de capturar execepcions és posible executar diferent codi segons el tipus d'excepció llençada.

- -

Per exemple, el següent codi utilitza instanceof per a determinar si dia és un objecte de tipus Date. Com que dia és un objecte de tipus Date les sentències dins la sentència if s'executaran.

- -
var dia = new Date(1995, 12, 17);
-if (dia instanceof Date) {
-  // bloc de codi que s'executarà
-}
-
- -

new

- -

L'operador new s'utilitza per a crear una instància d'un tipus d'objete definit per l'usuari o bé un dels tipus d'objectes predefinits Array, Boolean, Date, Function, Image, Number, Object, Option, RegExp, o String. Al servidor també es pot emprar amb DbPool, Lock, File, i SendMail. La sintaxi de new és la següent:

- -
var nomObjecte = new tipusObjecte([param1, param2, ..., paramN]);
-
- -

També és posible crear objectes mitjançant inicialitzadors d'objectes, tal i com s'explica a {{ web.link("Working_with_objects#Using_object_initializers", "utilitzar inicialitzadors d'objectes") }}.

- -

Vegeu la pàgina de l'operador new a la Referència del nucli de JavaScript per a més informació.

- -

this

- -

La paraula clau this s'utilitza per a referir-se a l'objecte actual. En general this fa referència a l'objecte que ha realitzat la crida dins un mètode. La sintaxi de this és la següent:

- -
this["nomPropietat"]
-
- -
this.nomPropietat
-
- -

Exemple 1.
- Suposem que una funció anomenada validate valida la propietat value d'un objecte, donat l'objecte i el rang de valors:

- -
function validate(obj, lowval, hival){
-  if ((obj.value < lowval) || (obj.value > hival))
-    alert("Valor no vàlid!");
-}
-
- -

Podríem cridar validate a cada manegador d'events onChange dels elements d'un formulari, utilitzant this per a passar l'element del formulari, tal i com es mostra al següent exemple:

- -
<B>Introduïu un nombre entre 18 i 99:</B>
-<INPUT TYPE="text" NAME="edat" SIZE=3
-   onChange="validate(this, 18, 99);">
-
- -

Exemple 2.
- Al combinar-lo amb la propietat del form, this fa referència al pare de l'objecte del formulari. Al següent exemple el form myForm conté un bojecte Text i un botó. Quan l'usuari fa clic al botó, el valor de l'objecte Text és assignat al nom del formulari. El manegador de l'event onClick del botó utilitza this.form per a fererir-se al fomulari pare, myForm.

- -
<FORM NAME="myForm">
-Nom del formulari:<INPUT TYPE="text" NAME="text1" VALUE="Beluga"/>
-<INPUT NAME="button1" TYPE="button" VALUE="Mostrar el nom del formulari"
-   onClick="this.form.text1.value = this.form.name;"/>
-</FORM>
-
- -

typeof

- -

L'operador typeof es pot utilitzar de qualsevol de les formes següents:

- -
    -
  1. - 
    typeof operand
-
    -
    2. -
  2. - 
    typeof (operand)
-
    -
    3. -
- -

L'operador typeof retorna una string indicant el tipus de l'operand, que no és avaluat. operand és una string, variable, paraula clau u objecte del qual es retornarà el tipus. Els parèntesi són opcionals.

- -

Suposem que es defineixen les següents variables:

- -
var myFun = new Function("5 + 2");
-var forma = "rodona";
-var tamany = 1;
-var avui = new Date();
-
- -

L'operador typeof retornarà els següents resultats per a aquestes variables:

- -
typeof myFun;      // retorna "function"
-typeof forma;      // retorna "string"
-typeof tamany;     // retorna "number"
-typeof avui;       // retorna "object"
-typeof noExisteix; // retorna "undefined"
-
- -

Per a les paraules clau true i null, l'operador typeof retorna els següents resultats:

- -
typeof true; // retorna "boolean"
-typeof null; // retorna "object"
-
- -

Per a un nombre o string, l'operador typeof retorna els següents resultats:

- -
typeof 62;            // retorna "number"
-typeof 'Hola món';    // retorna "string"
-
- -

Per a valors de propietats, l'operador typeof retorna el tipus del valor que conté la propietat:

- -
typeof document.lastModified; // retorna "string"
-typeof window.length;         // retorna "number"
-typeof Math.LN2;              // retorna "number"
-
- -

Per a mètodes i funcions, l'operador typeof retorna els següents resultats:

- -
typeof blur;        // retorna "function"
-typeof eval;        // retorna "function"
-typeof parseInt;    // retorna "function"
-typeof shape.split; // retorna "function"
-
- -

Per a objectes predefinits, l'operador typeof retorna els resultats següents:

- -
typeof Date;     // retorna "function"
-typeof Function; // retorna "function"
-typeof Math;     // retorna "object"
-typeof Option;   // retorna "function"
-typeof String;   // retorna "function"
-
- -

void

- -

L'operador void es pot emprar de qualsevol de les maneres següents:

- -
    -
  1. - 
    void (expression)
-
    -
    2. -
  2. - 
    void expression
-
    -
    3. -
- -

L'operador void avalua una expressió però no retorna cap valor. expression és l'expressió JavaScript a avaluar. Els parèntesi que embocallen l'expressió són opcionals, però es considera una bona pràctica utilitzar-los.

- -

És possible utilitzar l'operador void per a especificar una expressió com a hipervincle. L'expressió serà avaluada però el seu contingut no reemplaçarà el contingut del document actual.

- -

El codi següent crea un hipervincle que no fa res quan l'usuari faci clic a l'hipervincle. Quan l'usuari fa clic al l'hipervincle, void(0) serà avaluada com a undefined, la qual cosa no té cap efecte en JavaScript.

- -
<A HREF="javascript:void(0)">Cliqueu aquí per a no fer res</A>
-
- -

El codi següent crea un hipervincle que envia un formulari quan l'usuari fa clic sobre ell.

- -
<A HREF="javascript:void(document.form.submit())">
-Feu clic aquí per a enviar el formulari</A>
- -

Precedència d'operadors

- -

La precedència d'operadors determina l'ordre en el qual aquests s'apliquen quan s'avalua una expressió. Es pot canviar aquest comportament mitjançant parèntesi.

- -

La taula següent descriu la precedència dels operadors, del més prioritari al que ho és menys.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Taula 3.7 Precedència d'operadors
Tipus d'operadorOperadors individuals
membre. []
crida / creació d'una instància() new
negació/increment! ~ - + ++ -- typeof void delete
multiplicació/divisió* / %
suma/resta+ -
desplaçament de bits<< >> >>>
relacionals< <= > >= in instanceof
igualtat== != === !==
AND binari&
XOR binari^
OR binari|
AND lògic&&
OR lògic||
condicional?:
assignació= += -= *= /= %= <<= >>= >>>= &= ^= |=
coma,
- -

Trobareu una versió més detallada d'aqueta taula, completa amb enllaços a a detalls adicionals per a cada operador a la Referència de JavaScript.

diff --git "a/files/ca/web/javascript/guide/introducci\303\263/index.html" "b/files/ca/web/javascript/guide/introducci\303\263/index.html" deleted file mode 100644 index 1b598dad9b..0000000000 --- "a/files/ca/web/javascript/guide/introducci\303\263/index.html" +++ /dev/null @@ -1,140 +0,0 @@ ---- -title: Introducció -slug: Web/JavaScript/Guide/Introducció -translation_of: Web/JavaScript/Guide/Introduction ---- -
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}
- -
-

Aquest capítol presenta JavaScript i comenta alguns dels seus conceptes fonamentals.

-
- -

Coneixements previs

- -

Aquesta guia asumeix que el lector te els següents coneixements previs:

- -
    -
  • Una idea general de Internet i la World Wide Web ({{Glossary("WWW")}}).
    • -
  • Bon coneixement de l'HyperText Markup Language ({{Glossary("HTML")}}).
    • -
  • Alguns coneixements de programació. Si sou nous quant a la programació proveu qualsevol dels tutorials que trobareu a la pàgina principal sobre JavaScript.
    • -
- -

On trobar informació sobre JavaScript

- -

La documentació de JavaScript al MDN inclou els següents apartats:

- -
    -
  • Aprenent la Web proporciona informació per a nouvinguts i introdueix conceptes bàsics de programació i Internet.
    • -
  • La guia de JavaScript (aquesta guia) proporciona un resum del llenguatge JavaScript així com els seus objectes.
    • -
  • La referència de JavaScript proporciona material de referència detallat per a JavaScript.
    • -
- -

Si vostè és nou al món de JavaScript es recomana començar amb els articles que es poden trobar a l'àrea d'aprenentatge i la Guia de JavaScript. Un cop assolits els conceptes fonamentals podeu obtindre més detalls sobre objectes individuals i sentències mitjançant la Referència de JavaScript.

- -

Què és JavaScript?

- -

JavaScript és un llenguatge d'script multiplataforma i orientat a objectes. És un llenguatge petit i lleuger. Dins l'entorn d'un amfitrió, es pot connectar JavaScript als objectes del l'entorn per a tenir un control programàtic sobre aquests.

- -

JavaScript conté una llibreria estàndard d'objectes, com Array, Date i Math, o un conjunt bàsic d'elements del llenguatge, com ara operadors, estructures de control o sentències. El nucli de JavaScript es pot estendre per a diferents propòsits mitjançant objectes adicionals; per exemple:

- -
    -
  • JavaScript al cantó del client estén el llenguatge bàsic tot proveint objectes per a controlar un navegador i el seu Document Object Model (DOM). Per exemple, les extensions del cantó del client permeten a una aplicació posar elements en un formulari HTML i respondre a esdeveniments (events) d'usuari com ara clics del ratolí, entrada de formularis o navegació per la pàgina.
    • -
  • JavaScript al cantó del servidor estén el llenguatge bàsic tot proveint objectes rellevants a córrer JavaScript en un servidor. Per exemple, les extensions del cantó del servidor permeten a una aplicació comunicar-se amb una base de dades, proveir continuitat d'informació d'una instància a una altra de l'aplicació, o bé realitzar manipulacions de fitxers al servidor.
    • -
- -

JavaScript i Java

- -

JavaScript i Java són similars des d'alguns punts de vista però són fonamentalment diferents des d'uns altres. El llenguatge JavaScript s'assembla al Java però no té el tipatge estàtic ni les comprovacions de tipatge fort de Java. JavaScript segueix la majoria de les expressions de sintaxi de Java, convencions de nomenclatura i construccions de control de flux bàsiques, la qual és la raó per la qual el seu nom va ser canviat de LiveScript a JavaScript.

- -

En contrast amb el sistema de classes de Java en temps de compilació fabricat per declaracions, JavaScript suporta un sistema en temps d'execució basat en un petit nombre de tipus de dades que representen valors numèrics, booleans i cadenes de caràcters. JavaScript té model d'objecte basat en prototipus en comptes del model més comú, basat en classes. El model basat en prototipus ofereix herència dinàmica, és a dir, el que és heretat pot variar entre diferents objectes individuals. JavaScript també suporta funcions sense cap mena de requeriment declaratiu especial. Les funcions poden ser propietats d'objectes, sent executades com a mètodes de tipatge lliure.

- -

JavaScript és un llenguatge de forma molt lliure en comparació amb Java. No és necessari declarar totes les variables, classes i mètodes. No és necessari preocupar-se per quins mètodes són públics, privats o protegits, i no és necessari implementar interfícies. Variables, paràmetres i tipus de retorn de funcions so són de tipatge explícit.

- -

Java és un llenguatge de programació basat en classes dissenyat per a executar-se ràpidament i ser segur quant a tipatge. Ser segur quant al tipatge vol dir que, per exemple, no es pot assignar un nombre sencer de Java a una referència d'objecte, o accedir memòria privada tot corrompent bytecode de Java. El model basat en classes de Java implica que els programes consisteixen exclusivament de classes i els seus mètodes. L'herència de classes a Java i el tipatge fort generalment requereixen jerarquies d'objectes fortament acoblades. Aquests requisits fan que programar en Java sigui més complex que programar en JavaScript.

- -

En contrast, JavaScript descendeix en esperit d'una línia de llenguatges més petits, amb tipatge dinàmic com ara HyperTalk i dBASE. Aquests llenguatges d'scripting ofereixen eines de programació a una audiència molt més àmplia a causa de la seva sintaxi més simple, funcionalitats especialitzades integrades i uns requeriments mínims per a la creació d'objectes.

- - - - - - - - - - - - - - - - - - - - - - - -
JavaScript en comparació a Java
JavaScriptJava
-

Basat en objectes. No hi ha distinció entre tipus d'objectes. L'herència funciona a través del mecanisme de prototipus i les propietats i mètodes es poden afegir a qualsevol objecte de forma dinàmica.

- 		-

Basat en classes. Els objectes es divideixen entre classes i instàncies, amb l'herència aplicada mitjançant la jerarquia de classes. No es poden afegir propietats ni mètodes dinàmicament ni a classes ni a instàncies.

-
El tipus de dades de les variables no es declaren (tipatge dinàmic).El tipus de dades de les variables s'ha de declarar (tipatge estàtic).
No pot escriure a disc de forma automàtica.No pot escriure a disc de forma automàtica.
- -

Per a més informació sobre les diferències entre JavaScript i Java vegeu el capítol Detalls del model d'objecte.

- -

JavaScript i l'especificació ECMAScript

- -

L'estandardització de JavaScript es realitza a Ecma International — l'associació Europea per a l'estandardització  de sistemes d'informació i comunicació (ECMA era anteriorment un acrònim d'European Computer Manufacturers Association) per a proporcionar un llenguatge de programació estàndard i internacional basat en JavaScript. Aquesta versió estandarditzada de JavaScript, anomenada ECMAScript, es comporta de la mateixa manera a totes les aplicacions que suporten l'estàndard. Les empreses poden utilitzar el llenguatge estàndard obert per a desenvolupar la seva pròpia implementació de JavaScript. L'estàndard ECMAScript està documentat en l'especificació ECMA-262. Vegeu Nou a JavaScript per a aprendre sobre les diferents versions de JavaScript així com les diferents edicions de l'especificació d'ECMAScript.

- -

A més, l'estàndard ECMA-262 també està aprovat per l'ISO (International Organization of Standarization) com a ISO-16262. Podeu trobar l'especificació al lloc web d'Ecma International. L'especificació de l'ECMAScript no descriu el Model d'Objecte Document (DOM), el qual està estandaritzat pel World Wide Web Consortium (W3C). El DOM defineix la forma en què els objectes d'un document HTML s'exposen a l'script. Per a fer-se una millor idea de les diferents tecnologies usades en programar en JavaScript, consulteu l'article: resum de tecnologies de JavaScript.

- -

La documentació de JavaScript versus l'especificació de l'ECMAScript

- -

L'especificació de l'ECMAScript és un conjunt de requeriments per a implementar ECMAScript; és útil si es vol implementar característiques del llenguatge que compleixin amb els estàndards a la vostra pròpia implementació d'ECMAScript o a un motor JavaScript (com per exemple el SpiderMonkey a Firefox, o el v8 a Chrome).

- -

El document d'ECMAScript no pretén ajudar als programadors de scripts; utilitzeu la documentació de JavaScript per a obtenir informació sobre com escriure scripts.

- -

L'especificació d'ECMAScript utilitza terminologia i sintaxi que poden no ser familiars per a programador de JavaScript. Tot i que la descripció del llenguatge pot variar a ECMAScript, el llenguatge en si roman sense canvis. JavaScript suporta totes les funcionalitats definides a l'especificació d'ECMAScript.

- -

La documentació de JavaScript descriu aspectes del llenguatge que són apropiats per al programador de JavaScript.

- -

Iniciant-se en JavaScript

- -

Iniciar-se en JavaScript és senzill: tot el que fa falta és un navegador Web modern. Aquesta guia inclou algunes de les característiques de JavaScript que només estan disponibles a les últimes versions de Firefox, per això es recomana utilitzar la versió de Firefox més recent.

- -

Hi ha dues eines que formen part de Firefox que són útils per a experimentar amb JavaScript: la Consola del Web i Scratchpad.

- -

La Consola del Web

- -

La Consola del Web mostra informació sobre la pàgina Web carregada actualment i també inclou una línia d'ordres que podeu utilitzar per a executar expressions JavaScript a la pàgina actual.

- -

Per a obrir la Consola del Web, seleccioneu "Web Console" des del menú "Web Developer", que trobareu sota el menú "Tools" a Firefox. Apareixerà a la part de sota de la finestra del navegador. A la part de sota de la consola hi ha la línia d'ordres que podeu utilitzar per a introduir JavaScript, i la sortida apareix al panell de sobre:

- -

- -

Scratchpad

- -

La Consola del Web és excel·lent per a executar línies individuals de JavaScript, però tot i que pot executar múltiples línies no és gaire còmoda per a això, i no permet desar mostres de codi. És per això que per a exemples més complexos Scratchpad és una eina més adient.

- -

Per a obrir Scratchpad, seleccioneu "Scratchpad" al menú "Web Developer", que trobareu dins el menú "Tools" al Firefox. S'obre en una finestra separada i consisteix d'un editor que podeu utilitzar per a escriure i executar JavaScript al navegador. També podeu desar scripts al disc i carregar scripts des del disc.

- -

Si seleccioneu l'opció "Inspect", el codi a l'editor és executat al navegador i els resultats són inserits tot seguit a l'editor en forma de comentari:

- -

- -

Hola món

- -

Per a iniciar-vos a escriure JavaScript, obriu la Consola del Web o bé l'Scratchpad i escriviu el vostre primer codi "Hola món" en JavaScript.

- -
function saluda(user) {
-  return "Hola " + user;
-}
-
-saluda("Alice"); // "Hola Alice"
-
- -

A les següents pàgines, aquesta guia us introduirà la sintaxi de JavaScript així com les seves característiques, de manera que sereu capaços d'escriure aplicacions més complexes.

- -

{{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}

diff --git a/files/ca/web/javascript/guide/introduction/index.html b/files/ca/web/javascript/guide/introduction/index.html new file mode 100644 index 0000000000..1b598dad9b --- /dev/null +++ b/files/ca/web/javascript/guide/introduction/index.html @@ -0,0 +1,140 @@ +--- +title: Introducció +slug: Web/JavaScript/Guide/Introducció +translation_of: Web/JavaScript/Guide/Introduction +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}
+ +
+

Aquest capítol presenta JavaScript i comenta alguns dels seus conceptes fonamentals.

+
+ +

Coneixements previs

+ +

Aquesta guia asumeix que el lector te els següents coneixements previs:

+ +
    +
  • Una idea general de Internet i la World Wide Web ({{Glossary("WWW")}}).
    • +
  • Bon coneixement de l'HyperText Markup Language ({{Glossary("HTML")}}).
    • +
  • Alguns coneixements de programació. Si sou nous quant a la programació proveu qualsevol dels tutorials que trobareu a la pàgina principal sobre JavaScript.
    • +
+ +

On trobar informació sobre JavaScript

+ +

La documentació de JavaScript al MDN inclou els següents apartats:

+ +
    +
  • Aprenent la Web proporciona informació per a nouvinguts i introdueix conceptes bàsics de programació i Internet.
    • +
  • La guia de JavaScript (aquesta guia) proporciona un resum del llenguatge JavaScript així com els seus objectes.
    • +
  • La referència de JavaScript proporciona material de referència detallat per a JavaScript.
    • +
+ +

Si vostè és nou al món de JavaScript es recomana començar amb els articles que es poden trobar a l'àrea d'aprenentatge i la Guia de JavaScript. Un cop assolits els conceptes fonamentals podeu obtindre més detalls sobre objectes individuals i sentències mitjançant la Referència de JavaScript.

+ +

Què és JavaScript?

+ +

JavaScript és un llenguatge d'script multiplataforma i orientat a objectes. És un llenguatge petit i lleuger. Dins l'entorn d'un amfitrió, es pot connectar JavaScript als objectes del l'entorn per a tenir un control programàtic sobre aquests.

+ +

JavaScript conté una llibreria estàndard d'objectes, com Array, Date i Math, o un conjunt bàsic d'elements del llenguatge, com ara operadors, estructures de control o sentències. El nucli de JavaScript es pot estendre per a diferents propòsits mitjançant objectes adicionals; per exemple:

+ +
    +
  • JavaScript al cantó del client estén el llenguatge bàsic tot proveint objectes per a controlar un navegador i el seu Document Object Model (DOM). Per exemple, les extensions del cantó del client permeten a una aplicació posar elements en un formulari HTML i respondre a esdeveniments (events) d'usuari com ara clics del ratolí, entrada de formularis o navegació per la pàgina.
    • +
  • JavaScript al cantó del servidor estén el llenguatge bàsic tot proveint objectes rellevants a córrer JavaScript en un servidor. Per exemple, les extensions del cantó del servidor permeten a una aplicació comunicar-se amb una base de dades, proveir continuitat d'informació d'una instància a una altra de l'aplicació, o bé realitzar manipulacions de fitxers al servidor.
    • +
+ +

JavaScript i Java

+ +

JavaScript i Java són similars des d'alguns punts de vista però són fonamentalment diferents des d'uns altres. El llenguatge JavaScript s'assembla al Java però no té el tipatge estàtic ni les comprovacions de tipatge fort de Java. JavaScript segueix la majoria de les expressions de sintaxi de Java, convencions de nomenclatura i construccions de control de flux bàsiques, la qual és la raó per la qual el seu nom va ser canviat de LiveScript a JavaScript.

+ +

En contrast amb el sistema de classes de Java en temps de compilació fabricat per declaracions, JavaScript suporta un sistema en temps d'execució basat en un petit nombre de tipus de dades que representen valors numèrics, booleans i cadenes de caràcters. JavaScript té model d'objecte basat en prototipus en comptes del model més comú, basat en classes. El model basat en prototipus ofereix herència dinàmica, és a dir, el que és heretat pot variar entre diferents objectes individuals. JavaScript també suporta funcions sense cap mena de requeriment declaratiu especial. Les funcions poden ser propietats d'objectes, sent executades com a mètodes de tipatge lliure.

+ +

JavaScript és un llenguatge de forma molt lliure en comparació amb Java. No és necessari declarar totes les variables, classes i mètodes. No és necessari preocupar-se per quins mètodes són públics, privats o protegits, i no és necessari implementar interfícies. Variables, paràmetres i tipus de retorn de funcions so són de tipatge explícit.

+ +

Java és un llenguatge de programació basat en classes dissenyat per a executar-se ràpidament i ser segur quant a tipatge. Ser segur quant al tipatge vol dir que, per exemple, no es pot assignar un nombre sencer de Java a una referència d'objecte, o accedir memòria privada tot corrompent bytecode de Java. El model basat en classes de Java implica que els programes consisteixen exclusivament de classes i els seus mètodes. L'herència de classes a Java i el tipatge fort generalment requereixen jerarquies d'objectes fortament acoblades. Aquests requisits fan que programar en Java sigui més complex que programar en JavaScript.

+ +

En contrast, JavaScript descendeix en esperit d'una línia de llenguatges més petits, amb tipatge dinàmic com ara HyperTalk i dBASE. Aquests llenguatges d'scripting ofereixen eines de programació a una audiència molt més àmplia a causa de la seva sintaxi més simple, funcionalitats especialitzades integrades i uns requeriments mínims per a la creació d'objectes.

+ + + + + + + + + + + + + + + + + + + + + + + +
JavaScript en comparació a Java
JavaScriptJava
+

Basat en objectes. No hi ha distinció entre tipus d'objectes. L'herència funciona a través del mecanisme de prototipus i les propietats i mètodes es poden afegir a qualsevol objecte de forma dinàmica.

+ 		+

Basat en classes. Els objectes es divideixen entre classes i instàncies, amb l'herència aplicada mitjançant la jerarquia de classes. No es poden afegir propietats ni mètodes dinàmicament ni a classes ni a instàncies.

+
El tipus de dades de les variables no es declaren (tipatge dinàmic).El tipus de dades de les variables s'ha de declarar (tipatge estàtic).
No pot escriure a disc de forma automàtica.No pot escriure a disc de forma automàtica.
+ +

Per a més informació sobre les diferències entre JavaScript i Java vegeu el capítol Detalls del model d'objecte.

+ +

JavaScript i l'especificació ECMAScript

+ +

L'estandardització de JavaScript es realitza a Ecma International — l'associació Europea per a l'estandardització  de sistemes d'informació i comunicació (ECMA era anteriorment un acrònim d'European Computer Manufacturers Association) per a proporcionar un llenguatge de programació estàndard i internacional basat en JavaScript. Aquesta versió estandarditzada de JavaScript, anomenada ECMAScript, es comporta de la mateixa manera a totes les aplicacions que suporten l'estàndard. Les empreses poden utilitzar el llenguatge estàndard obert per a desenvolupar la seva pròpia implementació de JavaScript. L'estàndard ECMAScript està documentat en l'especificació ECMA-262. Vegeu Nou a JavaScript per a aprendre sobre les diferents versions de JavaScript així com les diferents edicions de l'especificació d'ECMAScript.

+ +

A més, l'estàndard ECMA-262 també està aprovat per l'ISO (International Organization of Standarization) com a ISO-16262. Podeu trobar l'especificació al lloc web d'Ecma International. L'especificació de l'ECMAScript no descriu el Model d'Objecte Document (DOM), el qual està estandaritzat pel World Wide Web Consortium (W3C). El DOM defineix la forma en què els objectes d'un document HTML s'exposen a l'script. Per a fer-se una millor idea de les diferents tecnologies usades en programar en JavaScript, consulteu l'article: resum de tecnologies de JavaScript.

+ +

La documentació de JavaScript versus l'especificació de l'ECMAScript

+ +

L'especificació de l'ECMAScript és un conjunt de requeriments per a implementar ECMAScript; és útil si es vol implementar característiques del llenguatge que compleixin amb els estàndards a la vostra pròpia implementació d'ECMAScript o a un motor JavaScript (com per exemple el SpiderMonkey a Firefox, o el v8 a Chrome).

+ +

El document d'ECMAScript no pretén ajudar als programadors de scripts; utilitzeu la documentació de JavaScript per a obtenir informació sobre com escriure scripts.

+ +

L'especificació d'ECMAScript utilitza terminologia i sintaxi que poden no ser familiars per a programador de JavaScript. Tot i que la descripció del llenguatge pot variar a ECMAScript, el llenguatge en si roman sense canvis. JavaScript suporta totes les funcionalitats definides a l'especificació d'ECMAScript.

+ +

La documentació de JavaScript descriu aspectes del llenguatge que són apropiats per al programador de JavaScript.

+ +

Iniciant-se en JavaScript

+ +

Iniciar-se en JavaScript és senzill: tot el que fa falta és un navegador Web modern. Aquesta guia inclou algunes de les característiques de JavaScript que només estan disponibles a les últimes versions de Firefox, per això es recomana utilitzar la versió de Firefox més recent.

+ +

Hi ha dues eines que formen part de Firefox que són útils per a experimentar amb JavaScript: la Consola del Web i Scratchpad.

+ +

La Consola del Web

+ +

La Consola del Web mostra informació sobre la pàgina Web carregada actualment i també inclou una línia d'ordres que podeu utilitzar per a executar expressions JavaScript a la pàgina actual.

+ +

Per a obrir la Consola del Web, seleccioneu "Web Console" des del menú "Web Developer", que trobareu sota el menú "Tools" a Firefox. Apareixerà a la part de sota de la finestra del navegador. A la part de sota de la consola hi ha la línia d'ordres que podeu utilitzar per a introduir JavaScript, i la sortida apareix al panell de sobre:

+ +

+ +

Scratchpad

+ +

La Consola del Web és excel·lent per a executar línies individuals de JavaScript, però tot i que pot executar múltiples línies no és gaire còmoda per a això, i no permet desar mostres de codi. És per això que per a exemples més complexos Scratchpad és una eina més adient.

+ +

Per a obrir Scratchpad, seleccioneu "Scratchpad" al menú "Web Developer", que trobareu dins el menú "Tools" al Firefox. S'obre en una finestra separada i consisteix d'un editor que podeu utilitzar per a escriure i executar JavaScript al navegador. També podeu desar scripts al disc i carregar scripts des del disc.

+ +

Si seleccioneu l'opció "Inspect", el codi a l'editor és executat al navegador i els resultats són inserits tot seguit a l'editor en forma de comentari:

+ +

+ +

Hola món

+ +

Per a iniciar-vos a escriure JavaScript, obriu la Consola del Web o bé l'Scratchpad i escriviu el vostre primer codi "Hola món" en JavaScript.

+ +
function saluda(user) {
+  return "Hola " + user;
+}
+
+saluda("Alice"); // "Hola Alice"
+
+ +

A les següents pàgines, aquesta guia us introduirà la sintaxi de JavaScript així com les seves característiques, de manera que sereu capaços d'escriure aplicacions més complexes.

+ +

{{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}

diff --git "a/files/ca/web/javascript/introducci\303\263_al_javascript_orientat_a_objectes/index.html" "b/files/ca/web/javascript/introducci\303\263_al_javascript_orientat_a_objectes/index.html" deleted file mode 100644 index 187f7930f4..0000000000 --- "a/files/ca/web/javascript/introducci\303\263_al_javascript_orientat_a_objectes/index.html" +++ /dev/null @@ -1,362 +0,0 @@ ---- -title: Introducció al Javascript orientat a Objectes -slug: Web/JavaScript/Introducció_al_Javascript_orientat_a_Objectes -translation_of: Learn/JavaScript/Objects -translation_of_original: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript ---- -
{{jsSidebar("Introductory")}}
- -

JavaScript és orientat a objectes des del nucli, amb unes capacitats potents, flexibles {{Glossary("OOP")}}. Aquest article comença amb la introducció de la programació orientada a objectes, després es revisa el model d'objectes de Javascript, i finalment es mostren els conceptes de la programació orientada a objectes en JavaScript.

- -

Revisió de JavaScript

- -

Si no us sentiu segurs amb els conceptes de Javascript com ara variables, tipus, funcions, i àmbits podeu llegir sobre aquests temes en Una reintroducció a JavaScript. També podeu consultar la Guia de JavaScript.

- -

Programació orientada a Objectes

- -

La programació orientada a Objectes és un paradigma de programació que usa l'abstracció per crear models basants en el món real. Fa servir diverseses tècniques de paradigmes previament establerts, inclosa la modularitat, poliformisme, i l'encapsulament. Avui, moltes llengües de programació (com Java, JavaScript, C#, C++, Python, PHP, Ruby i Objective-C) suporten la programació orientada a Objectes (POO).

- -

La programació orientada a Objectes es pot entendre com el disseny de software fent servir una col·lecció d'objectes que cooperen, al contrari de la visió tradicional en el qual un programa es vist com una col·lecció de funcions, o simplement com una llista d'instruccions per a un ordinador. En POO, cada objecte és capaç de rebre missatges, processar data, i enviar missatges a altres objectes. Cada objecte pot ser entès com una petita màquina independent amb un rol diferent o amb responsabilitat.

- -

La programació orientada a Objectes intenta promoure una major flexibilitat, mantenibilitat en programació, i és àmpliament popular en enginyeria de software a gran esala. En virtut de la seva forta èmfasi en modularitat, el codi orientat a objecte intenta ser més simple de desenvolupar i més facil d'entendre després, es presta a una anàlisi més directa, codificació, i comprensió de situacions complexes i procediments en comptes d'altres mètodes de programació menys modulars.1

- -

Terminologia

- -
-
{{Glossary("Namespace")}}
-
Un contenidor que permet als desenvolupadors agrupar totes les funcionalitats sota un nom únic d'aplicació específica.
-
{{Glossary("Class")}}
-
Defineix les característiques de l'objecte. És la definició d'una plantilla de variables i mètodes d'un objecte.
-
{{Glossary("Object")}}
-
Una instància d'una classe.
-
{{Glossary("Property")}}
-
Una característca d'un objecte, com ara un color.
-
{{Glossary("Method")}}
-
Una capacitat d'un objecte, com ara caminar. És una subrutina o funció associada amb una classe.
-
{{Glossary("Constructor")}}
-
Un mètode que es crida en el moment d'instanciació d'un objecte. Normalment té el mateix nom que el de la classe que el conté.
-
{{Glossary("Inheritance")}}
-
Una classe pot heretar les característiques d'una altra classe.
-
{{Glossary("Encapsulation")}}
-
Una manera d'agrupar les dades i mètodes que es fan servir juntes.
-
{{Glossary("Abstraction")}}
-
La conjunció d'una herència complexa, mètodes, les propietats d'un objecte, han de ser capaces de simular una realitat a modelar.
-
{{Glossary("Polymorphism")}}
-
Poli significa "molts" i morfisme significa "formes". Classes diferents poden definir el mateix mètode o propietat.
-
- -

Per una descripció més extensa sobre la programació orientada a objectes vegeu {interwiki("wikipedia", "Object-oriented programming")}} a la Viquipèdia.

- -

Programació basada en prototipus

- -

Programació basat en prototipus és un estil de programació orientada a objectes que no fa ús de les classes. En el seu lloc, la reutilització del comportament (conegut com a herència en llenguatges basats en classes) es porta a terme a través d'un procés de decoració (o d'ampliació) on els objectes que ja existeixen serveixen com a prototipus. Aquest model també és conegut com a model sense classes, orientat a prototip, o programació basadad en instàncies.

- -

L'exemple original (i més canònic) d'un llenguatge basat en prototipus és el llenguatge de programació {{interwiki("wikipedia", "Self (programming language)", "Self")}} desenvolupat per David Ungar i Randall Smith. Tanmateix, l'estil de programació sense classes s'ha anat fent més i més popular, i ha sigut adoptat per llenguatges de programació com JavaScript, Cecil, NewtonScript, Io, MOO, REBOL, Kevo, Squeak (quan s'utilitza el marc Viewer per manipular components Morphic), i altres.1

- -

Programació orientada a Objectes de JavaScript

- -

Namespace

- -

Un namespace és un contenidor el qual permet als desenvolupadors agrupar totes les funcionalitats sota un únic, nom d'aplicació específic. En JavaScript un namespace és només un altre objecte que conté mètodes, propietats, i objectes.

- -
-

Nota: Es important remarcar que en JavaScript, no hi ha diferència de nivell d'idioma entre els objectes regulars i els namespaces. Això dista d'altres llenguatges orientats a objectes, i pot resultat confús als programadors nous en JavaScript.

-
- -

La idea darrera la creació d'un namespace en JavaScript és simple: Un objecte global és creat i totes les variables, metòdes, i funcions es converteixen en propietats d'aquest objecte. L'ús de namespaces també minimitza la possibilitat de conflictes de noms en l'aplicació, ja que cada objecte d'aplicació son propietats d'un objecte global d'aplicació definit.

- -

Creem un objecte global anomenat MYAPP:

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

En el codi de mostra superior, primer hem comprovat si MYAPP ja està definit (ja sigui en el mateix arxiu o en un altre arxiu). En cas de ser així, s'usa l'objecte global MYAPP existent, del contrari es crea un objecte buit anomenat MYAPP el qual encapsula el mètode, funcions, variables, i objectes.

- -

També podem crear sub-namespaces:

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

Abaix es troba la sintaxi de codi per crear un namespace i afegir variables, funcions, i un mètode:

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

Objectes estàndards integrats

- -

JavaScript té alguns objectes inclosos en el seu nucli, per exemple, trobem objectes come Math, Object, Array, i String. L'exemple d'abaix ens mostra com fer servir l'objecte Math per aconseguir números aleatoris usant el seu mètode random().

- -
console.log(Math.random());
-
- -
Nota: Aquest i tots els exemples següents suposen que la funció anomenada {{domxref("console.log()")}} es defineix globalment. De fet, la funció console.log() no és part del llenguatge de JavaScript en si, però molts navegadors ho implementen per tal d'ajudar en la depuració.
- -

Vegeu Referència de JavaScript: Objectes estàndards integrats per una llista d'objectes cor en JavaScript.

- -

Cada objecte en JavaScript és una instància de l'objecte Object i per tant, n'hereda totes les seves propietats i mètodes.

- -

Objectes personalitzats

- -

La classe

- -

JavaScript és un llenguatge basat en prototipus que no conté cap class statement, el qual si que es pot trobar en C++ o Java. Això és confós a vegades per a programadors acostumats a llenguatges amb el class statement. En el seu lloc, JavaScript fa servir funcions com a classes. Definir duna classe és tan fàcil com definir una funció. En l'exemple d'abaix definim una nova classe anomenada Person.

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

L'objecte (instància de classe)

- -

Per crear una nova instància d'un objecte obj fem servir la declaració new obj, assignant el resultat (el qual és de tipus obj) a una variable per accedir-hi més tard. Una forma alternativa de crear una nova instància és fent servir {{jsxref("Object.create()")}}. Aquesta crearà una instància This will create an uninititalized instance.

- -

En l'exemple d'adalt definim una classe anomenada Person. En l'exemple següent creem dues instàncies (person1 i person2).

- -
var person1 = new Person();
-var person2 = new Person();
-
- -
Nota: Siusplau vegeu {{jsxref("Object.create()")}} per un mètode instantacional nou, addiccional new, additional, instantiation mètode.
- -

El constructor

- -

El constructor és cridat en el moment de la instantiation (el moment en que la instància de l'objecte és creat). El constructor és ún mètode de la classe. En JavaScript la funció serveix com el constructor de l'objecte, therefore there is no need to explicitly define a constructor method. Every action declared in the class gets executed at the time of instantiation.

- -

El constructor es fa servir per establir les propietats de l'objecte o per cridar mè call methods to prepare the object for use. Per afegir mètodes de classes i les seves definicions es necessita una sintaxi diferent que s'explicarà més tard en aquest article.

- -

En l'exemple d'abaix, el constructor de la classe Person mostra un missatge quan és crea una instànca Person.

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

La propietat (atribut de l'objecte)

- -

Les propietats són variables contingudes en la classe; cada instància de l'objecte té aquestes propietats. Les propietats són asssignades en el constructor (funció) de la classe de forma que es creen en cada instància.

- -

Per treballar amb propietats de dins de la classe s'utilitza la paraula clau this, que fa referència a l'objecte actual. Accedir (llegir o escriure) a una propietat fora d'aquesta classe es fa mitjançant la sintaxi: InstanceName.Property; Aquesta és la mateixa sintaxi que es fa servir en C++, Java, i numeroses altres llengües. (Dins la classe, la sintaxi this.Property s'utilitza per obtindre o escriure el valor de les propietats.)

- -

En l'exemple següent definim la propietat firstName property per la classe Person i ho definim com a instanciació.

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

Els mètodes

- -

Els mètodes segueixen la mateixa llògica que les propietats; la diferència es que són funcions i estan definides com a funcions. Cridar un mètode és similar a accedir a una propietat, però s'afegeix () al final the nom del mètode, possiblement amb arguments. Per definir un mètode, s'assigna una funció a una propietat amb nom de la propietat de la classe prototype; el nom que s'assigna a la funció és el mateix que el nom que té el mètode en l'objecte.

- -

En l'exemple següent definim i usem el mètode sayHello() per la classe Person.

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

En JavaScript els mètodes són funcions normals dels objectes que són lligats a un objecte com una propietat, El que vol dir que poden ser invocats "fora del context". Vegeu el codi d'exemple següent:

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

Com l'exemple mostra, totes les referències a la funció sayHello — les que existeixen a person1, a Person.prototype, a la variable helloFunction, etc. — fan referència a la mateixa funció. El valor de this durant una crida a la funció depen en com es crida. En el cas comú en que es crida la funció des d'una propietat de l'objecte — person1.sayHello() — this rep el valor de l'objecte d'on prové la propietat (person1), és per això que person1.sayHello() fa servir el nom "Alice" i person2.sayHello() fa servir el nom "Bob". Però si ho cridem d'altres maneres, this rebrà un valor diferent: Cridar-la des d'una variable — helloFunction() — this rep el valor de l'objecte global (window, en navegadors). Al no tenir la propietat firstName aquest objecte (probablement) , acabem amb el resultat "Hello, I'm undefined". (Això és en el mode no estricte; en el mode estricte seria diferent [un error], però per evitar confussions no entrarem aquí en detall.) O podem assignar explícitament el valor de this mitjançant Function#call (o Function#apply), com es mostra al final de l'exemple.

- -
Nota: Vegeu més sobre this a Function#call i Function#apply
- -

L'herència

- -

L'herència és una manera de crear una classe com una versió especialitzada d'una o més classes (JavaScript només suporta l'herència única). La classe especialitzada és communment anomenada el fill, i l'altra classe es comunment anomenada el pare. En JavaScript això s'aconsegueix mitjançant l'assignació d'una instància de la classe pare a la classe fill, i després s'especialitza. En navegadors moderns també es pot usar Object.create per implementar herències.

- -
-

Nota: JavaScript does no detecta la classe fill prototype.constructor (vegeu Object.prototype), així que ho hem de declarar manualment.

-
- -

En l'exemple d'abaix, definim la classe Student com una classe fill de Person. Després redefinim el mètode sayHello() i afegim el mètode sayGoodBye().

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

Pel que fa a la línia Student.prototype = Object.create(Person.prototype): En els motors de Javascript més antics sense Object.create, es pot utilitzar tant un "polyfill" (també conegut com a  "falca", vegeu l'article enllaçat), o fer servir una funció que aconegueixi assolir el mateix resultat, tal com:

- -
function createObject(proto) {
-    function ctor() { }
-    ctor.prototype = proto;
-    return new ctor();
-}
-
-// Usage:
-Student.prototype = createObject(Person.prototype);
-
- -
Nota: Vegeu Object.create per més informació sobre el que fa, i una falca per a motors més vells.
- -

L'encapsulació

- -

En l'exemple anterior, Student no necessita saber com el mètode Person class's walk() és implementat, però tot i així pot fer-lo servir com a mètode; la classe Studentno necessita definir explícitament aquest mètode a no ser que ho volguem canviar. D'això se'n diu encapsulació, per la qual cada classe empaqueta data i mètodes en una sola unitat.

- -

L'ocultació d'informació és una característica comuna en altres llenguatges sovint com a mètodes/propietats privats i protegits. Tot i que es podria simular alguna cosa com aquesta en JavaScript, no és un requeriment per fer programació orientada a objectes.2

- -

L'abstracció

- -

L'abstracció és un mecanisme que permet modelar la part que ens ocupa del problema en el qual estem treballant. Això es pot aconseguir per mitjar de l'herència (especialització), o composició. JavaScript aconsegueix l'especialització per mitjà de l'herència, i la composició per mitjà de deixar a les instàncies de classes ser valors d'atributs d'altres objectes.

- -

La classe Function de JavaScript hereta de la classe Object (això demostra la especialització del model) i la propietat Function.prototype property és una instància d'Object (Això demostra composició).

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

El polimorfisme

- -

Tal i com tots els mètodes i propietats són definides dins la propietat Prototype, classes diferents poden definir mètodes amb el mateix nom; els mètodes estan en l'àmbit de la classe en la qual estan definits. Això només és cert quan les dues classes no tenen una relació pare-fill (quan un no hereta de l'altre en una cadena d'herència).

- -

Notes

- -

Les tècniques presentades en aquesta article per implementar programació orientada a objectes no són les úniques que es poden fer servir en JavaScript, que és molt flexible en termes de com es pot realitzar la programació orientada a objectes.

- -

De la mateixa manera, les tècniques que s'han mostrat aquí no utilitzen cap hack del llenguatge, ni imiten cap implementació de teories d'objectes d'altres llenguatges.

- -

Hi ha altres tècniques que proporcionen programació orientada a objectes més avançada en JavaScript, però aquests estan fora de l'abast d'aquest article introductori.

- -

Referències

- -
    -
  1. Viquipèdia. "Programació orientada a Objectes"
    2. -
  2. Viquipèdia. "Encapsulació (programació orientada a Objectes)"
    3. -
diff --git a/files/ca/web/javascript/quant_a_javascript/index.html b/files/ca/web/javascript/quant_a_javascript/index.html deleted file mode 100644 index f581aa7021..0000000000 --- a/files/ca/web/javascript/quant_a_javascript/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: Sobre JavaScript -slug: Web/JavaScript/quant_a_JavaScript -translation_of: Web/JavaScript/About_JavaScript ---- -
{{JsSidebar()}}
- -

Què és JavaScript?

- -

JavaScript® és el llenguatge de tipus scripting orientat a objectes desenvolupat per Netscape, utilitzat en millions de pàgines web i aplicacions de servidor arreu del món. El JavaScript de Netscape extén el llenguatge de scripting standard definit a l'ECMA-262 Edició 3 (ECMAScript), amb només lleus diferències de l'standard publicat.

- -

Al contrari del que popular ment es creu de forma errònia, JavaScript no és "Java interpretat". En resum, JavaScript és un llegunatge d'scripting dinàmic que suporta contrucció d'objectes basada en prototipus. La sintaxi bàsica és similar a Java i C++ de forma intencionada per a reduir el nombre de conceptes nous requerits per a aprendre el llenguatge. Construccions del llenguatge, com ara sentències if, bucles for i while, blocs switch i try ... catch funcionen de la mateixa forma que en aquests llenguatges (o bé d'una forma molt semblant).

- -

JavaScript pot funcionar com un llenguatge tant procedural com orientat a objectes. Els objectes es creen de forma programàtica en JavaScript tot afegint-hi mètodes i propietats a objectes en temps d'execució que d'altra forma serien buits, contràriament a les definicions sintàctiques  de classes tan comunes a llenguatges compilats com C++ i Java. Un cop construit un objecte aquest pot ser utilitzat com a motlle (o prototipus) per a crear objectes similars.

- -

Les capacitats dinàmiques de JavaScript inclouen construcció d'objectes en temps d'execució, llistats de paràmetres variables, funcions com a variables, creació dinàmica de scripts (via eval), introspecció d'objectes (via for ... in) i recuperació del codi font (els programes escrits en JavaScript poden decompilar els cosos de funcions a la seva forma original de codi font).

- -

Els objectes intrínsecs són Number, String, Boolean, Date, RegExp, i Math.

- -

Per a una discussió més profunda de la programació en JavaScript seguiu els enllaços de recursos de JavaScript que trobareu a sota.

- -

Quines implementacions de JavaScript hi ha disponibles?

- -

mozilla.org alberga dues implementacions de JavaScript. La primera implementació de JavaScript de tots els temps va ser creada per Brendan Eich a Netscape, i des de llavors ha sigut actualitzada per a compliar amb la ECMA-262 Edició 5 i versions posteriors. Aquest motor, anomenat SpiderMonkey, està implementat en C. El motor Rhino, creat principalment per Norris Boyd (també a Netscape) és una implementació JavaScript en Java. Com el SpiderMonkey, Rhino compleix amb ECMA-262 Edició 3.

- -

Al llarg del temps s'han anat afegint diverses optimitzacions al motor de JavaScript SpiderMonkey, com ara TraceMonkey (Firefox 3.5), JägerMonkey (Firefox 4) i IonMonkey.

- -

A més de les implementacions anomenades a dalt, existeixen altres motors JavaScript, com ara:

- -
    -
  • El V8 de Google, utilitzat al navegador Google Chrome i a les versions més recents del navegador Opera.
    • -
  • El JavaScriptCore (SquirrelFish/Nitro), utilitzat a alguns navegadors basats en WebKit, com ara l'Apple Safari.
    • -
  • El Carakan, utilitzats en versions antigues d'Opera.
    • -
  • El Chakra, utilitzat en Internet Explorer (tot i que el llenguatge que implementa és anomenat formalment "JScript" per a evitar problemes amb marques registrades).
    • -
- -

Tots els motors de JavaScript de mozilla.org exposen una API pública que les aplicacions poden emprar per a saber sobre el suport de JavaScript. L'entorn més comú per a JavaScript són els navegadors web, amb diferència. Els navegadors web usualment utilitzen una API pública per a crear 'objectes host' responsables d'exposar el DOM dins de JavaScript.

- -

Una altra aplicació comuna de JavaScript és com a llenguatge d'escripting al cantó del servidor (web). Un servidor web de JavaScript exposaria els objectes host que representen peticions HTTP i objectes resposta, que podrien llavors ser manipulats per un programa JavaScript per a generar pàgines web de forma dinàmica.

- -

Recursos de JavaScript

- -
-
SpiderMonkey
-
Informació específica per a incrustar el motor JavaScript escrit en C (també conegut com a SpiderMonkey).
-
- -
-
Rhino
-
Informació específica sobre la implementació de JavaScript escrita en Java (també coneguda com a Rhino).
-
Recursos del llenguatge
-
Recull dels standards de JavaScript publicats.
-
Una re-introducció a JavaScript
-
Guia de JavaScript i referència de JavaScript.
-
diff --git a/files/ca/web/javascript/reference/about/index.html b/files/ca/web/javascript/reference/about/index.html new file mode 100644 index 0000000000..b1fa0734b3 --- /dev/null +++ b/files/ca/web/javascript/reference/about/index.html @@ -0,0 +1,44 @@ +--- +title: Sobre aquesta referència +slug: Web/JavaScript/Referencia/Sobre +translation_of: Web/JavaScript/Reference/About +--- +

{{JsSidebar}}

+ +

La referència de JavaScript serveix com a repositori de coneixement del llenguatge. Hom trobarà aquí el llenguatge descrit en detall. Durant el transcurs d'escriure codi en JavaScript, aquestes pàgines seran de gran ajut com a referència (d'aquí el títol). Si el que es pretén és aprendre JavaScript, o el que es necessita ajuda a l'hora d'entendre algunes de les seves capacitats o característiques, trobarà la informació que buaca a la guia de JavaScript.

+ +

El llenguatge de programació JavaScript està pensat per a ser utilitzat sota un entorn més gran, ja sigui un navegador web, scripts de servidor o quelcom similar. Aquesta referència intenta majoriariament ser agnòstica quant a l'entorn i no per tant no està adreçada únicament a un entorn donat pel navegador web.

+ +

On trobar informació sobre JavaScript

+ +

La documentació de les característiques bàsiques de Javascript (ECMAScript pur, majoritàriament) inclou el següent:

+ + + +

Si s'és nou quant a JavaScript, es recomana començar per la guia. Un cop assolits els fonaments, la referència esdevindrà útil per obtindre més detalls sobre objectes individuals i construccions del llenguatge.

+ +

Estructura de la referència

+ +

La referència de JavaScript es composa dels següents capítols:

+ +
+
Objectes bàsics estandard
+
Aquest capítol documenta tots els objectes standard proporcionats per JavaScript, així com els seus mètodes i propietats.
+
Sentències i declaracions
+
Una aplicació en JavaScript consisteix en un conjunt de sentències amb una sintaxi adequada. Una sola sentència pot ocupar més d'una línia. Tanmateix múltimples sentències poden aparèixer en una única línia si estan separades per un punt i coma (;).
+
Funcions
+
Capítol dedicat a les funcions en JavaScript.
+
Històric de versions
+
Aquest capítol mostra les diferències entre les diferents versions de JavaScript.
+
+ +

Més pàgines de referència

+ + diff --git a/files/ca/web/javascript/reference/classes/constructor/index.html b/files/ca/web/javascript/reference/classes/constructor/index.html new file mode 100644 index 0000000000..a0bd6b966f --- /dev/null +++ b/files/ca/web/javascript/reference/classes/constructor/index.html @@ -0,0 +1,129 @@ +--- +title: constructor +slug: Web/JavaScript/Referencia/Classes/constructor +translation_of: Web/JavaScript/Reference/Classes/constructor +--- +
{{jsSidebar("Classes")}}
+ +

Resum

+ +

El mètode constructor és un mètode especial per crear i inicialitzar un objecte creat amb una class.

+ +

Sintaxi

+ +
constructor([arguments]) { ... }
+ +

Descripció

+ +

Només hi pot haver un mètode especial am el nom "constructor" en una classe. Es llançarà un {{jsxref("SyntaxError")}}, si la classe conté més d'un cas d'un mètode constructor.

+ +

Un constructor pot utilitzar la paraula clau super per cridar el constructor de la classe pare.

+ +

Exemples

+ +

Aquest fragment de codi es pren de mostra de classes (demostració en viu).

+ +
class Square extends Polygon {
+  constructor(length) {
+    // Aquí es crida el constructor del pare de la classe amb les longituts
+    // proveïdes per l'amplada i l'alçada del polígon
+    super(length, length);
+    // Nota: En classes derivades, s'ha de cridar super() abans
+    // d'utilitzar 'this'. Obviar això causarà un error de referència.
+    this.name = 'Square';
+  }
+
+  get area() {
+    return this.height * this.width;
+  }
+
+  set area(value) {
+    this.area = value;
+  }
+}
+ +

Especificacions

+ + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-static-semantics-constructormethod', 'Constructor Method')}}{{Spec2('ES6')}}Definició inicial.
+ +

Compatibilitat amb navegadors

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome(42.0)}} +

Disponible només al canal Nightly  (desde febrer del 2015)

+ 		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatUnknown}}{{CompatChrome(42.0)}}Disponible només al canal Nightly  (desde febrer del 2015){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Notes específiques per Firefox

+ +
    +
  • Els constructors estàndards encara no s'han implementat ({{bug(1105463)}})
    • +
+ +

Vegeu també

+ + diff --git a/files/ca/web/javascript/reference/classes/index.html b/files/ca/web/javascript/reference/classes/index.html new file mode 100644 index 0000000000..23daf7e1ff --- /dev/null +++ b/files/ca/web/javascript/reference/classes/index.html @@ -0,0 +1,382 @@ +--- +title: Classes +slug: Web/JavaScript/Referencia/Classes +tags: + - Classes + - ECMAScript 2015 + - Experimental + - Expérimental(2) + - JavaScript + - NeedsContent + - NeedsTranslation + - Reference + - Référence(2) + - TopicStub +translation_of: Web/JavaScript/Reference/Classes +--- +
{{JsSidebar("Classes")}}
+ +

JavaScript classes, introduced in ECMAScript 2015, are primarily syntactical sugar over JavaScript's existing prototype-based inheritance. The class syntax does not introduce a new object-oriented inheritance model to JavaScript.

+ +

Defining classes

+ +

Classes are in fact "special functions", and just as you can define function expressions and function declarations, the class syntax has two components: class expressions and class declarations.

+ +

Class declarations

+ +

One way to define a class is using a class declaration. To declare a class, you use the class keyword with the name of the class ("Rectangle" here).

+ +
class Rectangle {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+}
+ +

Hoisting

+ +

An important difference between function declarations and class declarations is that function declarations are {{Glossary("Hoisting", "hoisted")}} and class declarations are not. You first need to declare your class and then access it, otherwise code like the following will throw a {{jsxref("ReferenceError")}}:

+ +
var p = new Rectangle(); // ReferenceError
+
+class Rectangle {}
+
+ +

Class expressions

+ +

A class expression is another way to define a class. Class expressions can be named or unnamed. The name given to a named class expression is local to the class's body. (it can be retrieved through the class's (not an instance's) .name property, though)

+ +
// unnamed
+var Rectangle = class {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+};
+console.log(Rectangle.name);
+// output: "Rectangle"
+
+// named
+var Rectangle = class Rectangle2 {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+};
+console.log(Rectangle.name);
+// output: "Rectangle2"
+
+ +

Note: Class expressions also suffer from the same hoisting issues mentioned for Class declarations.

+ +

Class body and method definitions

+ +

The body of a class is the part that is in curly brackets {}. This is where you define class members, such as methods or constructor.

+ +

Strict mode

+ +

The bodies of class declarations and class expressions are executed in strict mode i.e. constructor, static and prototype methods, getter and setter functions are executed in strict mode.

+ +

Constructor

+ +

The constructor method is a special method for creating and initializing an object created with a class. There can only be one special method with the name "constructor" in a class. A {{jsxref("SyntaxError")}} will be thrown if the class contains more than one occurrence of a constructor method.

+ +

A constructor can use the super keyword to call the constructor of the super class.

+ +

Prototype methods

+ +

See also method definitions.

+ +
class Rectangle {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+  // Getter
+  get area() {
+    return this.calcArea();
+  }
+  // Method
+  calcArea() {
+    return this.height * this.width;
+  }
+}
+
+const square = new Rectangle(10, 10);
+
+console.log(square.area); // 100
+ +

Static methods

+ +

The static keyword defines a static method for a class. Static methods are called without instantiating their class and cannot be called through a class instance. Static methods are often used to create utility functions for an application.

+ +
class Point {
+  constructor(x, y) {
+    this.x = x;
+    this.y = y;
+  }
+
+  static distance(a, b) {
+    const dx = a.x - b.x;
+    const dy = a.y - b.y;
+
+    return Math.hypot(dx, dy);
+  }
+}
+
+const p1 = new Point(5, 5);
+const p2 = new Point(10, 10);
+
+console.log(Point.distance(p1, p2)); // 7.0710678118654755
+ +

Boxing with prototype and static methods

+ +

When a static or prototype method is called without a value for this, the this value will be undefined inside the method. This behavior will be the same even if the "use strict" directive isn't present, because code within the class syntax is always executed in strict mode.

+ +
class Animal {
+  speak() {
+    return this;
+  }
+  static eat() {
+    return this;
+  }
+}
+
+let obj = new Animal();
+obj.speak(); // Animal {}
+let speak = obj.speak;
+speak(); // undefined
+
+Animal.eat() // class Animal
+let eat = Animal.eat;
+eat(); // undefined
+ +

If the above is written using traditional function–based syntax, then autoboxing in method calls will happen in non–strict mode based on the initial this value. If the inital value is undefined, this will be set to the global object.

+ +

Autoboxing will not happen in strict mode, the this value remains as passed.

+ +
function Animal() { }
+
+Animal.prototype.speak = function() {
+  return this;
+}
+
+Animal.eat = function() {
+  return this;
+}
+
+let obj = new Animal();
+let speak = obj.speak;
+speak(); // global object
+
+let eat = Animal.eat;
+eat(); // global object
+
+ +

Instance properties

+ +

Instance properties must be defined inside of class methods:

+ +
class Rectangle {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+}
+ +

Static class-side properties and prototype data properties must be defined outside of the ClassBody declaration:

+ +
Rectangle.staticWidth = 20;
+Rectangle.prototype.prototypeWidth = 25;
+
+ +

+ +

Sub classing with extends

+ +

The extends keyword is used in class declarations or class expressions to create a class as a child of another class.

+ +
class Animal {
+  constructor(name) {
+    this.name = name;
+  }
+
+  speak() {
+    console.log(this.name + ' makes a noise.');
+  }
+}
+
+class Dog extends Animal {
+  speak() {
+    console.log(this.name + ' barks.');
+  }
+}
+
+var d = new Dog('Mitzie');
+d.speak(); // Mitzie barks.
+
+ +

If there is a constructor present in subclass, it needs to first call super() before using "this".

+ +

One may also extend traditional function-based "classes":

+ +
function Animal (name) {
+  this.name = name;
+}
+
+Animal.prototype.speak = function () {
+  console.log(this.name + ' makes a noise.');
+}
+
+class Dog extends Animal {
+  speak() {
+    console.log(this.name + ' barks.');
+  }
+}
+
+var d = new Dog('Mitzie');
+d.speak(); // Mitzie barks.
+
+ +

Note that classes cannot extend regular (non-constructible) objects. If you want to inherit from a regular object, you can instead use {{jsxref("Object.setPrototypeOf()")}}:

+ +
var Animal = {
+  speak() {
+    console.log(this.name + ' makes a noise.');
+  }
+};
+
+class Dog {
+  constructor(name) {
+    this.name = name;
+  }
+}
+
+// If you do not do this you will get a TypeError when you invoke speak
+Object.setPrototypeOf(Dog.prototype, Animal);
+
+var d = new Dog('Mitzie');
+d.speak(); // Mitzie makes a noise.
+
+ +

Species

+ +

You might want to return {{jsxref("Array")}} objects in your derived array class MyArray. The species pattern lets you override default constructors.

+ +

For example, when using methods such as {{jsxref("Array.map", "map()")}} that returns the default constructor, you want these methods to return a parent Array object, instead of the MyArray object. The {{jsxref("Symbol.species")}} symbol lets you do this:

+ +
class MyArray extends Array {
+  // Overwrite species to the parent Array constructor
+  static get [Symbol.species]() { return Array; }
+}
+
+var a = new MyArray(1,2,3);
+var mapped = a.map(x => x * x);
+
+console.log(mapped instanceof MyArray); // false
+console.log(mapped instanceof Array);   // true
+
+ +

Super class calls with super

+ +

The super keyword is used to call corresponding methods of super class.

+ +
class Cat {
+  constructor(name) {
+    this.name = name;
+  }
+
+  speak() {
+    console.log(this.name + ' makes a noise.');
+  }
+}
+
+class Lion extends Cat {
+  speak() {
+    super.speak();
+    console.log(this.name + ' roars.');
+  }
+}
+
+var l = new Lion('Fuzzy');
+l.speak();
+// Fuzzy makes a noise.
+// Fuzzy roars.
+
+
+ +

Mix-ins

+ +

Abstract subclasses or mix-ins are templates for classes. An ECMAScript class can only have a single superclass, so multiple inheritance from tooling classes, for example, is not possible. The functionality must be provided by the superclass.

+ +

A function with a superclass as input and a subclass extending that superclass as output can be used to implement mix-ins in ECMAScript:

+ +
var calculatorMixin = Base => class extends Base {
+  calc() { }
+};
+
+var randomizerMixin = Base => class extends Base {
+  randomize() { }
+};
+
+ +

A class that uses these mix-ins can then be written like this:

+ +
class Foo { }
+class Bar extends calculatorMixin(randomizerMixin(Foo)) { }
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES2015', '#sec-class-definitions', 'Class definitions')}}{{Spec2('ES2015')}}Initial definition.
{{SpecName('ES2016', '#sec-class-definitions', 'Class definitions')}}{{Spec2('ES2016')}}
{{SpecName('ES2017', '#sec-class-definitions', 'Class definitions')}}{{Spec2('ES2017')}}
{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}{{Spec2('ESDraft')}}
+ +

Browser compatibility

+ + + +

{{Compat("javascript.classes")}}

+ +

Running in Scratchpad

+ +

A class can't be redefined. If you're playing with code in Scratchpad (Firefox menu Tools > Web Developer > Scratchpad) and you 'Run' a definition of a class with the same name twice, you'll get a confusing SyntaxError: redeclaration of let <class-name>.

+ +

To re-run a definition, use Scratchpad's menu Execute > Reload and Run.
+ Please vote for bug #1428672.

+ +

See also

+ + diff --git a/files/ca/web/javascript/reference/classes/static/index.html b/files/ca/web/javascript/reference/classes/static/index.html new file mode 100644 index 0000000000..3255dc1552 --- /dev/null +++ b/files/ca/web/javascript/reference/classes/static/index.html @@ -0,0 +1,116 @@ +--- +title: static +slug: Web/JavaScript/Referencia/Classes/static +translation_of: Web/JavaScript/Reference/Classes/static +--- +
{{jsSidebar("Classes")}}
+ +

La paraula clau static defineix un mètode estàtic per a una classe.

+ +

Sintaxi

+ +
static methodName() { ... }
+ +

Descripció

+ +

Els mètodes estàtics es criden sense realitzar una instantània de la seva classe o instantiating their class nor are they callable when the class is instantiated. Els mètodes estàtics s'utilitzen sovint per crear funcions d'utilitat per una aplicació.

+ +

Exemples

+ +

L'exemple següent mostra diverses coses. Mostra com un mètode estàtic és implementat en una classe i que una classe amb un membre estàtic pot tenir subclasses. Finalment, mostra com es pot i com no es pot cridar un mètode estàtic.

+ +
class Tripple {
+  static tripple(n) {
+    n = n | 1;
+    return n * 3;
+  }
+}
+
+class BiggerTripple extends Tripple {
+  static tripple(n) {
+    return super.tripple(n) * super.tripple(n);
+  }
+}
+
+console.log(Tripple.tripple());
+console.log(Tripple.tripple(6));
+console.log(BiggerTripple.tripple(3));
+var tp = new Tripple();
+console.log(tp.tripple()); //Logs 'tp.tripple is not a function'.
+ +

Especificacions

+ + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-class-definitions', 'Class definitions')}}{{Spec2('ES6')}}Definició inicial.
+ +

Compatibilitat amb navegadors

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome(42.0)}}Disponible només en el canal Nightly  (desde febrer del 2015){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatUnknown}}{{CompatChrome(42.0)}}Disponible només en el canal Nightly  (desde febrer del 2015){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Vegeu també

+ + diff --git a/files/ca/web/javascript/reference/errors/nomes-lectura/index.html b/files/ca/web/javascript/reference/errors/nomes-lectura/index.html deleted file mode 100644 index 30c70c40dd..0000000000 --- a/files/ca/web/javascript/reference/errors/nomes-lectura/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: 'TipusError: "x" es només de lectura' -slug: Web/JavaScript/Reference/Errors/Nomes-Lectura -tags: - - Errors - - JavaScript - - TypeError -translation_of: Web/JavaScript/Reference/Errors/Read-only ---- -
{{jsSidebar("Errors")}}
- -

Missatge

- -
TipusError: "x" es només de lectura (Firefox)
-TipusError: 0 es només de lectura (Firefox)
-TipusError: No es pot fer l'assignació a la propietat 'x' de #<Object> que es només de lectura (Chrome)
-TipusError: No es pot fer l'assignació a la propietat '0' de [object Array] (Chrome)
-
- -

Tipus d'error

- -

{{jsxref("TypeError")}}

- -

Qué ha anat malament?

- -

La variable global o propietat de l'objecte a la qual s'ha volgut fer l'assignació es només de lectura. (Tècnicament, es una propietat de no-escriptura.)

- -

Aquest error succeeix només en codi en mode estricte. En codi en mode no estricte, l'assignació es ignorada de manera silenciosa.

- -

Exemples

- -

Casos invàlids

- -

Propietats de només lectura no son súper comuns, però es poden donar quan es fa servir {{jsxref("Object.defineProperty()")}} o {{jsxref("Object.freeze()")}}.

- -
'use strict';
-var obj = Object.freeze({name: 'Elsa', score: 157});
-obj.score = 0;  // TypeError
-
-'use strict';
-Object.defineProperty(this, 'LUNG_COUNT', {value: 2, writable: false});
-LUNG_COUNT = 3;  // TypeError
-
-'use strict';
-var frozenArray = Object.freeze([0, 1, 2]);
-frozenArray[0]++;  // TypeError
-
- -

També hi ha unes poques propietats de només lectura en la construcció de JavaScript. Potser que hagis provat de redefinir una constant matemàtica.

- -
'use strict';
-Math.PI = 4;  // TypeError
- -

Ho sentim, no pots fer això.

- -

La variable global undefined també es només de lectura, llavors no pots silenciar l'infame error "undefined no es una funció" fent això:

- -
'use strict';
-undefined = function() {};  // TypeError: "undefined" es només de lectura
-
- -

Valid cases

- -
'use strict';
-var obj = Object.freeze({name: 'Score', points: 157});
-obj = {name: obj.name, points: 0};   // reemplaçant-ho amb un nou objecte funciona
-
-'use strict';
-var LUNG_COUNT = 2;  // Una `var` funciona, perque no es de només lectura
-LUNG_COUNT = 3;  // ok (anatòmicament potser, però poc probable)
-
- -

See also

- -
    -
  • {{jsxref("Object.defineProperty()")}}
    • -
  • {{jsxref("Object.freeze()")}}
    • -
diff --git a/files/ca/web/javascript/reference/errors/read-only/index.html b/files/ca/web/javascript/reference/errors/read-only/index.html new file mode 100644 index 0000000000..30c70c40dd --- /dev/null +++ b/files/ca/web/javascript/reference/errors/read-only/index.html @@ -0,0 +1,78 @@ +--- +title: 'TipusError: "x" es només de lectura' +slug: Web/JavaScript/Reference/Errors/Nomes-Lectura +tags: + - Errors + - JavaScript + - TypeError +translation_of: Web/JavaScript/Reference/Errors/Read-only +--- +
{{jsSidebar("Errors")}}
+ +

Missatge

+ +
TipusError: "x" es només de lectura (Firefox)
+TipusError: 0 es només de lectura (Firefox)
+TipusError: No es pot fer l'assignació a la propietat 'x' de #<Object> que es només de lectura (Chrome)
+TipusError: No es pot fer l'assignació a la propietat '0' de [object Array] (Chrome)
+
+ +

Tipus d'error

+ +

{{jsxref("TypeError")}}

+ +

Qué ha anat malament?

+ +

La variable global o propietat de l'objecte a la qual s'ha volgut fer l'assignació es només de lectura. (Tècnicament, es una propietat de no-escriptura.)

+ +

Aquest error succeeix només en codi en mode estricte. En codi en mode no estricte, l'assignació es ignorada de manera silenciosa.

+ +

Exemples

+ +

Casos invàlids

+ +

Propietats de només lectura no son súper comuns, però es poden donar quan es fa servir {{jsxref("Object.defineProperty()")}} o {{jsxref("Object.freeze()")}}.

+ +
'use strict';
+var obj = Object.freeze({name: 'Elsa', score: 157});
+obj.score = 0;  // TypeError
+
+'use strict';
+Object.defineProperty(this, 'LUNG_COUNT', {value: 2, writable: false});
+LUNG_COUNT = 3;  // TypeError
+
+'use strict';
+var frozenArray = Object.freeze([0, 1, 2]);
+frozenArray[0]++;  // TypeError
+
+ +

També hi ha unes poques propietats de només lectura en la construcció de JavaScript. Potser que hagis provat de redefinir una constant matemàtica.

+ +
'use strict';
+Math.PI = 4;  // TypeError
+ +

Ho sentim, no pots fer això.

+ +

La variable global undefined també es només de lectura, llavors no pots silenciar l'infame error "undefined no es una funció" fent això:

+ +
'use strict';
+undefined = function() {};  // TypeError: "undefined" es només de lectura
+
+ +

Valid cases

+ +
'use strict';
+var obj = Object.freeze({name: 'Score', points: 157});
+obj = {name: obj.name, points: 0};   // reemplaçant-ho amb un nou objecte funciona
+
+'use strict';
+var LUNG_COUNT = 2;  // Una `var` funciona, perque no es de només lectura
+LUNG_COUNT = 3;  // ok (anatòmicament potser, però poc probable)
+
+ +

See also

+ +
    +
  • {{jsxref("Object.defineProperty()")}}
    • +
  • {{jsxref("Object.freeze()")}}
    • +
diff --git a/files/ca/web/javascript/reference/functions/parameters_rest/index.html b/files/ca/web/javascript/reference/functions/parameters_rest/index.html deleted file mode 100644 index 68fc5f0bba..0000000000 --- a/files/ca/web/javascript/reference/functions/parameters_rest/index.html +++ /dev/null @@ -1,156 +0,0 @@ ---- -title: Paràmetres rest -slug: Web/JavaScript/Reference/Functions/parameters_rest -translation_of: Web/JavaScript/Reference/Functions/rest_parameters ---- -
{{jsSidebar("Functions")}}
- -

El paràmetre rest ens permet  representar un nombre indefinit d'arguments en forma d 'array.

- -

Syntax

- -
function f(a, b, ...theArgs) {
-  // ...
-}
-
- -

Descripció

- -

Si l'últim argument d'una funció, està prefixat amb l'operador ..., aquest esdevé un array el qual té com a elements des de 0 (inclòs) fins a theArgs.length (no inclòs) els arguments passats a la funció.

- -

A l'exemple de sobre, theArgs aglutina el tercer argument de la funció, ja que el primer està mapejat a a  i el segon està mapejat a b , i tota la resta d'arguments consecutius. 

- -

Diferència entre els paràmetres rest i l'objecte arguments

- -

Existeixen tres diferències principals entre els  paràmetres rest i l'objecte arguments

- -
    -
  • Els paràmetres rest són aquells als que no s' ha donat un nom per separat, mentre que l' objecte arguments conté tots els paràmetres passats a la funció
    • -
  • L' objecte arguments no és un array real, mentre que els paràmetres rest són instàncies d' Array , el qual significa que els hi podem aplicar directamaent els mètodes sort, map, forEach o pop.
    • -
  • L' objecte arguments té funcionalitat específica a sí mateix (com la propietat calle).
    • -
- -

Des d' arguments fins a un array

- -

El paràmetre rest ha estat introduit per tal de reduir la quantitat de codi utilitzat que es introduit per els arguments

- -
// Anteriorment a l' existència del paràmetre rest el s' utilitzava seguent codi
-function f(a, b) {
-  var args = Array.prototype.slice.call(arguments, f.length);
-
-  // …
-}
-
-// equivalent a
-
-function f(a, b, ...args) {
-
-}
-
- -

Desestructurant paràmetres rest

- -

Els paràmetres rest es poden desestructurar, que vol dir que els valors que contenen es poden desenpaquetar en variables diferents i separades. Vegeu Destructuring assignment.

- -
function f(...[a, b, c]) {
-  return a + b + c;
-}
-
-f(1)          // NaN (bi c són undefined)
-f(1, 2, 3)    // 6
-f(1, 2, 3, 4) // 6 (el quart paràmetre no està desetructurat)
- -

Exemples

- -

Com que theArgs és un array, la propietat length en retorna el recompte:

- -
function fun1(...theArgs) {
-  console.log(theArgs.length);
-}
-
-fun1();  // 0
-fun1(5); // 1
-fun1(5, 6, 7); // 3
-
- -

En el seguent exemple el paràmetre rest s' utilitza per aglutinar tots els paràmetres passats a la funcció després del primer en un array. Després cadascun d' ells és multiplicat per el primer paràmetre passat a la funció i es retorna l' array.

- -
function multiply(multiplier, ...theArgs) {
-  return theArgs.map(function(element) {
-    return multiplier * element;
-  });
-}
-
-var arr = multiply(2, 1, 2, 3);
-console.log(arr); // [2, 4, 6]
-
- -

El seguent exemple mostra com els mètodes d' Array es poden utilitzar am paràmetres rest, però no amb l' objecte arguments :

- -
function sortRestArgs(...theArgs) {
-  var sortedArgs = theArgs.sort();
-  return sortedArgs;
-}
-
-console.log(sortRestArgs(5, 3, 7, 1)); // mostra 1, 3, 5, 7
-
-function sortArguments() {
-  var sortedArgs = arguments.sort();
-  return sortedArgs; // aquesta línia mai s' executarà
-}
-
-// genera el TypeError: arguments.sort no és una funció
-console.log(sortArguments(5, 3, 7, 1));
-
- -

Per tal de poder usar els mètodes d' Array amb l' objecte arguments , aquest s' ha de convertir primer en un array.

- -
function sortArguments() {
-  var args = Array.prototype.slice.call(arguments);
-  var sortedArgs = args.sort();
-  return sortedArgs;
-}
-console.log(sortArguments(5, 3, 7, 1)); // shows 1, 3, 5, 7
-
- -

Specifications

- - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('ES6', '#sec-function-definitions', 'Function Definitions')}}{{Spec2('ES6')}}Initial definition
{{SpecName('ESDraft', '#sec-function-definitions', 'Function Definitions')}}{{Spec2('ESDraft')}} 
- -

Browser compatibility

- -
- - -

{{Compat("javascript.functions.rest_parameters")}}

-
- -

See also

- - diff --git a/files/ca/web/javascript/reference/functions/rest_parameters/index.html b/files/ca/web/javascript/reference/functions/rest_parameters/index.html new file mode 100644 index 0000000000..68fc5f0bba --- /dev/null +++ b/files/ca/web/javascript/reference/functions/rest_parameters/index.html @@ -0,0 +1,156 @@ +--- +title: Paràmetres rest +slug: Web/JavaScript/Reference/Functions/parameters_rest +translation_of: Web/JavaScript/Reference/Functions/rest_parameters +--- +
{{jsSidebar("Functions")}}
+ +

El paràmetre rest ens permet  representar un nombre indefinit d'arguments en forma d 'array.

+ +

Syntax

+ +
function f(a, b, ...theArgs) {
+  // ...
+}
+
+ +

Descripció

+ +

Si l'últim argument d'una funció, està prefixat amb l'operador ..., aquest esdevé un array el qual té com a elements des de 0 (inclòs) fins a theArgs.length (no inclòs) els arguments passats a la funció.

+ +

A l'exemple de sobre, theArgs aglutina el tercer argument de la funció, ja que el primer està mapejat a a  i el segon està mapejat a b , i tota la resta d'arguments consecutius. 

+ +

Diferència entre els paràmetres rest i l'objecte arguments

+ +

Existeixen tres diferències principals entre els  paràmetres rest i l'objecte arguments

+ +
    +
  • Els paràmetres rest són aquells als que no s' ha donat un nom per separat, mentre que l' objecte arguments conté tots els paràmetres passats a la funció
    • +
  • L' objecte arguments no és un array real, mentre que els paràmetres rest són instàncies d' Array , el qual significa que els hi podem aplicar directamaent els mètodes sort, map, forEach o pop.
    • +
  • L' objecte arguments té funcionalitat específica a sí mateix (com la propietat calle).
    • +
+ +

Des d' arguments fins a un array

+ +

El paràmetre rest ha estat introduit per tal de reduir la quantitat de codi utilitzat que es introduit per els arguments

+ +
// Anteriorment a l' existència del paràmetre rest el s' utilitzava seguent codi
+function f(a, b) {
+  var args = Array.prototype.slice.call(arguments, f.length);
+
+  // …
+}
+
+// equivalent a
+
+function f(a, b, ...args) {
+
+}
+
+ +

Desestructurant paràmetres rest

+ +

Els paràmetres rest es poden desestructurar, que vol dir que els valors que contenen es poden desenpaquetar en variables diferents i separades. Vegeu Destructuring assignment.

+ +
function f(...[a, b, c]) {
+  return a + b + c;
+}
+
+f(1)          // NaN (bi c són undefined)
+f(1, 2, 3)    // 6
+f(1, 2, 3, 4) // 6 (el quart paràmetre no està desetructurat)
+ +

Exemples

+ +

Com que theArgs és un array, la propietat length en retorna el recompte:

+ +
function fun1(...theArgs) {
+  console.log(theArgs.length);
+}
+
+fun1();  // 0
+fun1(5); // 1
+fun1(5, 6, 7); // 3
+
+ +

En el seguent exemple el paràmetre rest s' utilitza per aglutinar tots els paràmetres passats a la funcció després del primer en un array. Després cadascun d' ells és multiplicat per el primer paràmetre passat a la funció i es retorna l' array.

+ +
function multiply(multiplier, ...theArgs) {
+  return theArgs.map(function(element) {
+    return multiplier * element;
+  });
+}
+
+var arr = multiply(2, 1, 2, 3);
+console.log(arr); // [2, 4, 6]
+
+ +

El seguent exemple mostra com els mètodes d' Array es poden utilitzar am paràmetres rest, però no amb l' objecte arguments :

+ +
function sortRestArgs(...theArgs) {
+  var sortedArgs = theArgs.sort();
+  return sortedArgs;
+}
+
+console.log(sortRestArgs(5, 3, 7, 1)); // mostra 1, 3, 5, 7
+
+function sortArguments() {
+  var sortedArgs = arguments.sort();
+  return sortedArgs; // aquesta línia mai s' executarà
+}
+
+// genera el TypeError: arguments.sort no és una funció
+console.log(sortArguments(5, 3, 7, 1));
+
+ +

Per tal de poder usar els mètodes d' Array amb l' objecte arguments , aquest s' ha de convertir primer en un array.

+ +
function sortArguments() {
+  var args = Array.prototype.slice.call(arguments);
+  var sortedArgs = args.sort();
+  return sortedArgs;
+}
+console.log(sortArguments(5, 3, 7, 1)); // shows 1, 3, 5, 7
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES6', '#sec-function-definitions', 'Function Definitions')}}{{Spec2('ES6')}}Initial definition
{{SpecName('ESDraft', '#sec-function-definitions', 'Function Definitions')}}{{Spec2('ESDraft')}} 
+ +

Browser compatibility

+ +
+ + +

{{Compat("javascript.functions.rest_parameters")}}

+
+ +

See also

+ + diff --git a/files/ca/web/javascript/reference/global_objects/array/entries/index.html b/files/ca/web/javascript/reference/global_objects/array/entries/index.html new file mode 100644 index 0000000000..8b67c06038 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/array/entries/index.html @@ -0,0 +1,105 @@ +--- +title: Array.prototype.entries() +slug: Web/JavaScript/Referencia/Objectes_globals/Array/entries +translation_of: Web/JavaScript/Reference/Global_Objects/Array/entries +--- +
{{JSRef}}
+ +

El mètode entries() retorna un nou objecte Array Iterator que conté els parells clau/valor per a cada posició de l'array.

+ +

Sintaxi

+ +
arr.entries()
+ +

Exemples

+ +
var arr = ['a', 'b', 'c'];
+var eArr = arr.entries();
+
+console.log(eArr.next().value); // [0, 'a']
+console.log(eArr.next().value); // [1, 'b']
+console.log(eArr.next().value); // [2, 'c']
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-array.prototype.entries', 'Array.prototype.entries')}}{{Spec2('ES6')}}Definició inicial.
{{SpecName('ESDraft', '#sec-array.prototype.entries', 'Array.prototype.entries')}}{{Spec2('ESDraft')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome("38")}}{{CompatGeckoDesktop("28")}}{{CompatNo}}{{CompatOpera("25")}}{{CompatSafari("7.1")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("28")}}{{CompatNo}}{{CompatNo}}8.0
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Array.prototype.keys()")}}
    • +
  • {{jsxref("Array.prototype.forEach()")}}
    • +
  • {{jsxref("Array.prototype.every()")}}
    • +
  • {{jsxref("Array.prototype.some()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/array/every/index.html b/files/ca/web/javascript/reference/global_objects/array/every/index.html new file mode 100644 index 0000000000..ad707b4990 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/array/every/index.html @@ -0,0 +1,220 @@ +--- +title: Array.prototype.every() +slug: Web/JavaScript/Referencia/Objectes_globals/Array/every +translation_of: Web/JavaScript/Reference/Global_Objects/Array/every +--- +
{{JSRef}}
+ +

El mètode every() comprova si tots els elements d'un array passen el test implementat per la funció proporcionada.

+ +

Sintaxi

+ +
arr.every(callback[, thisArg])
+ +

Paràmetres

+ +
+
callback
+
Funció utilitzada com a test per a cada element, rep tres arguments: +
+
valorActual
+
L'element de l'array que està sent avaluat.
+
posició
+
La posició que l'element passat al primer paràmetre ocupa dins l'array.
+
array
+
L'array des del que s'ha cridat el mètode every().
+
+
+
thisArg
+
Opcional. Valor que valdrà la variable this quan s'estigui executant la funció callback.
+
+ +

Descripció

+ +

every() executa la funció callback un cop per a cada element present a l'array fins que troba un per al qual callback retorna un valor falsy (és a dir, un valor que esdebé fals si es realitza una conversió de tipus a Boolean). Si es troba aquest element, el mètode every retorna immediatament false. En cas contrari, si callback ha retornat un valor true per a tots els elements, every retornarà true. Només s'invocarà la funció callback en les posicions de l'array que tinguin un valor assignat, és a dir, mai es cridarà per a posicions que han estat esborrades o el valor de les quals no ha estat mai assignat.

+ +

S'invoca callback amb tres arguments: el valor de l'element, la posició de l'element dins l'array, i l'objecte array que es recorrerà.

+ +

Si es proporciona el paràmetre thisArg al mètode every(), aquest es passarà a callback quan s'invoqui, i serà el valor que mostrarà la variable this. En cas contrari, s'utilitzarà el valor undefined com a valor per a this. El valor de this observable en última instància per callback es determinarà d'acord a les regles per a determinar el valor de this observat per una funció.

+ +

every() no mutarà l'array quan sigui cridada.

+ +

El rang d'elements processat per every() és determinat abans de la primera invocació de callback. Els elements que s'afegeixin a l'array després de la crida a every() no seran visitats per callback. Si el valor d'un element encara no visitat canvia, el valor que es passarà a callback serà el valor que tingui aquest element a l'hora de visitar-lo; els elements que s'esborrin no es visitaran.

+ +

every es comporta com un quantificador "for all" en matemàtiques. En concret, per a un array buit retornarà true (s'anomena veritat per buit el fet que tots els elements d'un grup buit satisfacin qualsevol condició donada).

+ +

Exemples

+ +

Comprovar el tamany de tots els elements d'un array

+ +

L'exemple següent comprova si tots els elements d'un array son majors de 10.

+ +
function isBigEnough(element, index, array) {
+  return element >= 10;
+}
+[12, 5, 8, 130, 44].every(isBigEnough);   // false
+[12, 54, 18, 130, 44].every(isBigEnough); // true
+
+ +

Utilitzar funcions flexta

+ +

Les funcions fletxa ofereixen una sintaxi reduïda per a realitzar el mateix test.

+ +
[12, 5, 8, 130, 44].every(elem => elem >= 10); // false
+[12, 54, 18, 130, 44].every(elem => elem >= 10); // true
+ +

Polyfill

+ +

every va ser afegida  al standard ECMA-262 en la cinquena edició; és per això que pot no estar disponible en certes implementacions del standard. Es pot proporcionar la seva funcionalitat inserint l'script següent a l'inici dels vostres scripts, permetent l'ús de every() en implementacions que no la suporten de forma nativa. Aquest algoritme és exactament l'especificat a l'ECMA-262, cinquena edició, assumint que Object i TypeError tenen els valors originals i que callbackfn.call es correspon amb el valor original de {{jsxref("Function.prototype.call")}}.

+ +
if (!Array.prototype.every) {
+  Array.prototype.every = function(callbackfn, thisArg) {
+    'use strict';
+    var T, k;
+
+    if (this == null) {
+      throw new TypeError('this is null or not defined');
+    }
+
+    // 1. Let O be the result of calling ToObject passing the this
+    //    value as the argument.
+    var O = Object(this);
+
+    // 2. Let lenValue be the result of calling the Get internal method
+    //    of O with the argument "length".
+    // 3. Let len be ToUint32(lenValue).
+    var len = O.length >>> 0;
+
+    // 4. If IsCallable(callbackfn) is false, throw a TypeError exception.
+    if (typeof callbackfn !== 'function') {
+      throw new TypeError();
+    }
+
+    // 5. If thisArg was supplied, let T be thisArg; else let T be undefined.
+    if (arguments.length > 1) {
+      T = thisArg;
+    }
+
+    // 6. Let k be 0.
+    k = 0;
+
+    // 7. Repeat, while k < len
+    while (k < len) {
+
+      var kValue;
+
+      // a. Let Pk be ToString(k).
+      //   This is implicit for LHS operands of the in operator
+      // b. Let kPresent be the result of calling the HasProperty internal
+      //    method of O with argument Pk.
+      //   This step can be combined with c
+      // c. If kPresent is true, then
+      if (k in O) {
+
+        // i. Let kValue be the result of calling the Get internal method
+        //    of O with argument Pk.
+        kValue = O[k];
+
+        // ii. Let testResult be the result of calling the Call internal method
+        //     of callbackfn with T as the this value and argument list
+        //     containing kValue, k, and O.
+        var testResult = callbackfn.call(T, kValue, k, O);
+
+        // iii. If ToBoolean(testResult) is false, return false.
+        if (!testResult) {
+          return false;
+        }
+      }
+      k++;
+    }
+    return true;
+  };
+}
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaicóEstatComentaris
{{SpecName('ES5.1', '#sec-15.4.4.16', 'Array.prototype.every')}}{{Spec2('ES5.1')}}Definició inicial. Implemnetat a JavaScript 1.6.
{{SpecName('ES6', '#sec-array.prototype.every', 'Array.prototype.every')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-array.prototype.every', 'Array.prototype.every')}}{{Spec2('ESDraft')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.8")}}{{CompatIE("9")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.8")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Array.prototype.forEach()")}}
    • +
  • {{jsxref("Array.prototype.some()")}}
    • +
  • {{jsxref("TypedArray.prototype.every()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/array/fill/index.html b/files/ca/web/javascript/reference/global_objects/array/fill/index.html new file mode 100644 index 0000000000..e1952a8407 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/array/fill/index.html @@ -0,0 +1,173 @@ +--- +title: Array.prototype.fill() +slug: Web/JavaScript/Referencia/Objectes_globals/Array/fill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/fill +--- +
{{JSRef}}
+ +

El mètode fill() omple tots els elements d'un array a partir d'una posició inicial fins a una posició final amb un valor estàtic predeterminat.

+ +

Sintaxi

+ +
arr.fill(valor[, posInicial = 0[, posFinal = this.length]])
+ +

Paràmetres

+ +
+
valor
+
Valor amb el que s'omplirà l'array.
+
posInicial
+
Opcional. Posició inicial.
+
posFinal
+
Opcional. Posició final.
+
+ +

Descripció

+ +

L'interval d'elements a omplir és [posInicial, posFinal) (inici inclusiu, final exclusiu).

+ +

El mètode fill accepta fins a tres arguments: valor, posInicial i  posFinal.

+ +

Els arguments posInicial i posFinal són opcionals i si no s'especifiquen prenen per defecte els valors 0 i la propietat length de l'objecte this, respectivament.

+ +

Si posInicial és negatiu, es considera com a length+start on length és la mida de l'array. Si posFinal és negatiu es considera com a length+end.

+ +

La funció fill és genèrica intencionalment i no requereix que el valor this sigui un objecte de tipus Array.

+ +

El mètode fill és mutable, ja que canviarà l'objecte this en si mateix i després el retornarà com a resultat, en comptes de retornar una copia d'aquest.

+ +

Exemples

+ +
[1, 2, 3].fill(4);               // [4, 4, 4]
+[1, 2, 3].fill(4, 1);            // [1, 4, 4]
+[1, 2, 3].fill(4, 1, 2);         // [1, 4, 3]
+[1, 2, 3].fill(4, 1, 1);         // [1, 2, 3]
+[1, 2, 3].fill(4, -3, -2);       // [4, 2, 3]
+[1, 2, 3].fill(4, NaN, NaN);     // [1, 2, 3]
+Array(3).fill(4);                // [4, 4, 4]
+[].fill.call({ length: 3 }, 4);  // {0: 4, 1: 4, 2: 4, length: 3}
+
+ +

Polyfill

+ +
if (!Array.prototype.fill) {
+  Array.prototype.fill = function(value) {
+
+    // Pasos 1-2.
+    if (this == null) {
+      throw new TypeError('this is null or not defined');
+    }
+
+    var O = Object(this);
+
+    // Pasos 3-5.
+    var len = O.length >>> 0;
+
+    // Pasos 6-7.
+    var start = arguments[1];
+    var relativeStart = start >> 0;
+
+    // Pasos 8.
+    var k = relativeStart < 0 ?
+      Math.max(len + relativeStart, 0) :
+      Math.min(relativeStart, len);
+
+    // Pasos 9-10.
+    var end = arguments[2];
+    var relativeEnd = end === undefined ?
+      len : end >> 0;
+
+    // Pasos 11.
+    var final = relativeEnd < 0 ?
+      Math.max(len + relativeEnd, 0) :
+      Math.min(relativeEnd, len);
+
+    // Pasos 12.
+    while (k < final) {
+      O[k] = value;
+      k++;
+    }
+
+    // Pasos 13.
+    return O;
+  };
+}
+
+ +

Especificacions

+ + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-array.prototype.fill', 'Array.prototype.fill')}}{{Spec2('ES6')}}Definició inicial.
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome("45")}} [1]{{CompatGeckoDesktop("31")}}{{CompatNo}}{{CompatNo}}{{CompatSafari("7.1")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("31")}}{{CompatNo}}{{CompatNo}}8.0
+
+ +

[1] A partir del Chrome 36, està disponible a través d'una preferència. A chrome://flags, activeu l'entrada “Enable Experimental JavaScript”.

+ +

Vegeu també

+ +
    +
  • {{jsxref("Array")}}
    • +
  • {{jsxref("TypedArray.prototype.fill()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/array/filter/index.html b/files/ca/web/javascript/reference/global_objects/array/filter/index.html new file mode 100644 index 0000000000..c1bfec77f3 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/array/filter/index.html @@ -0,0 +1,213 @@ +--- +title: Array.prototype.filter() +slug: Web/JavaScript/Referencia/Objectes_globals/Array/filter +translation_of: Web/JavaScript/Reference/Global_Objects/Array/filter +--- +
{{JSRef}}
+ +

El mètode filter() crea un nou array amb tots els elements que passin el test implementat per la funció que passa com a argument.

+ +

Sintaxi

+ +
arr.filter(callback[, thisArg])
+ +

Paràmetres

+ +
+
callback
+
Funció que s'emprarà per a testejar cada element de l'array. Aquesta serà invocada amb els arguments (element, posició, array). Ha de retornar true per als elements que es vulguin conservar i false en qualsevol altre cas.
+
element
+
El element actual que s'esta processant a l'Array.
+
thisArg
+
Opcional. Valor que rebrà this durant l'execució de la funció callback.
+
+ +

Descripció

+ +

filter() crida la funció callback proporcionada un cop per cada element de l'array, i construeix un nou array amb tots els elements per als quals la funció callback retorni el valor true o bé un valor que pugui ser interpretat com a true. Només escridarà la funció callback per a posicions de l'array que tinguin valors assignats; no es cridarà per a posicions que han estat esborrades o que mai hagin tingut assignat un element. Els elements que no passsin el test de callback seràn simplement ignorats i en cap cas seran afegits al nou array.

+ +

S'invoca callback tot passant-li els tres arguments següents:

+ +
    +
  1. el valor de l'element
    2. +
  2. la posició de l'element
    3. +
  3. L'objecte array que s'està recorrent
    4. +
+ +

Si es proporciona el paràmetre thisArg a la crida de filter, aquest es passarà a callback quan s'invoqui per a ser utilitzat com a this dins la funció.  En qualsevol altre cas el valor que rebrà this dins la funció callback serà undefined. El valor de this que serà finalment observable dins de callback és determinat d'acord a les regles habituals per a determinar el valor de this observat dins d'una funció.

+ +

filter() mai modificarà l'array des del qual s'invoca.

+ +

El rang dels elements processats per filter() es determina abans de la primera invocació de callback. Els elements que s'afegeixin a l'array un cop la crida a  filter() hagi començat no seran visibles per a callback. Els elements que es modifiquin o s'esborrin durant aquest periode tindran el valor que els hi pertoqui al moment de cridar la funció callback; els elements que s'hagin eliminat no es visitaran.

+ +

Exemples

+ +

Exemple: Descartar tots els valors petits

+ +

L'exemple següent utilitza filter() per a crear un array filtrat que contindrà tots els elements amb valors menors de 10.

+ +
function esProuGran(valor) {
+  return valor >= 10;
+}
+var filtrat = [12, 5, 8, 130, 44].filter(esProuGran);
+// filtrat val [12, 130, 44]
+
+ +

Exemple: Descartar entrades invàlides de JSON

+ +

L'exemple següent utilitza filter() per a crear un array que no contingui cap entrada de JSON amb una id numèrica no vàlida o amb valor menor que zero.

+ +
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('Array filtrat\n', arrByID);
+// [{ id: 15 }, { id: -1 }, { id: 0 }, { id: 3 }, { id: 12.2 }]
+
+console.log('Nombre d'entrades invàlides = ', invalidEntries);
+// 4
+
+ +

Polyfill

+ +

filter() va ser afegit al standard ECMA-262 a la cinquena edició; degut a això aquesta funció pot no ser present a totes les implementacions del standard. Es pot solucionar aquest problema inserint el codi següent al principi dels scripts, permetent l'ús de filter() en implementacions de l'ECMA-262 que no la incorporin per defecte. Aquest algoritme és exactament l'especificat per l'ECMA-262, 5a edició, i assumeix que fn.call s'evalua al valor original de {{jsxref("Function.prototype.call()")}} i que {{jsxref("Array.prototype.push()")}} te el 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];
+
+        // NOTA: Tècnicament hauria de ser Object.defineProperty
+        //       a la posició següent ja que push pot veure's afectat per
+        //       les propietats de Object.prototype i Array.prototype.
+        //       Però aquest mètode és nou i només hi haurà col·lisions
+        //       en casos excepcionals, aixíq ue utilitzem l'alternativa més compatible.
+        if (fun.call(thisArg, val, i, t)) {
+          res.push(val);
+        }
+      }
+    }
+
+    return res;
+  };
+}
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES5.1', '#sec-15.4.4.20', 'Array.prototype.filter')}}{{Spec2('ES5.1')}}Definició inicial. Implementat a JavaScript 1.6.
{{SpecName('ES6', '#sec-array.prototype.filter', 'Array.prototype.filter')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.8")}}{{CompatIE("9")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.8")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Array.prototype.forEach()")}}
    • +
  • {{jsxref("Array.prototype.every()")}}
    • +
  • {{jsxref("Array.prototype.some()")}}
    • +
  • {{jsxref("Array.prototype.reduce()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/array/find/index.html b/files/ca/web/javascript/reference/global_objects/array/find/index.html new file mode 100644 index 0000000000..8ee7742c09 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/array/find/index.html @@ -0,0 +1,191 @@ +--- +title: Array.prototype.find() +slug: Web/JavaScript/Referencia/Objectes_globals/Array/find +translation_of: Web/JavaScript/Reference/Global_Objects/Array/find +--- +
{{JSRef}}
+ +

El mètode find() retorna un valor valor pertanyent a l'array si un element de l'array satisfà la funció de testeig donada. En cas contrari retornarà {{jsxref("undefined")}}.

+ +

Vegeu també el mètode {{jsxref("Array.findIndex", "findIndex()")}}, que retorna la posició a la qual s'ha trobat l'element que satisfà la funció de testeig, en comptes del seu valor.

+ +

Sintaxi

+ +
arr.find(callback[, thisArg])
+ +

Paràmetres

+ +
+
callback
+
Funció que s'executarà per a cada valor de l'array, rep tres arguments: +
+
element
+
L'element de l'array que s'està processant actualment.
+
posició
+
La posició de l'array que s'està processant actualment.
+
array
+
L'array des del qual s'ha cridat el mètode find.
+
+
+
thisArg
+
Opcional. L'objecte a utilitzar com a this mentre s'executi callback.
+
+ +

Descripció

+ +

El mètode find executa la funció callback un cop per a cada element present a l'array fins que trobi un on callback retorni true. Si es troba aquest element el mètode find retorna el valor de l'element trobat immediatament. En cas contrari find retornarà {{jsxref("undefined")}}. callback només serà invocada per a posicions de l'array que tinguin valors assignats; no serà invoada per a posicions que s'hagin eliminat o que mai hagin tingut assignat un valor.

+ +

La invocaicó de callback té tres arguments: el valor de l'element, la posició de l'element i l'objecte array que està sent recorregut.

+ +

Si es proporciona el paràmetre thisArg al cridar el mètode find, aquest serà utilitzat com a this per a cada invocació del mètode callback. En cas de no ser proporcionat s'utilitzarà {{jsxref("undefined")}}.

+ +

find no mutarà l'array des del que es crida.

+ +

El rang d'elemnets que find processarà es determina abans de la primera invocació a callback. Els elements afegits a l'array després de la crida a find no seran visitats per callback. Si un element existent, no visitat encara, rep un altre valor, el valor percebut per callback serà aquell que tingui l'element al ser visitat; els elements visitats no són visitats.

+ +

Exemples

+ +

Trobar un objecte en un array segons el valor d'una propietat

+ +
var inventory = [
+    {name: 'apples', quantity: 2},
+    {name: 'bananas', quantity: 0},
+    {name: 'cherries', quantity: 5}
+];
+
+function findCherries(fruit) {
+    return fruit.name === 'cherries';
+}
+
+console.log(inventory.find(findCherries)); // { name: 'cherries', quantity: 5 }
+ +

Trobar un nombre primer en un array

+ +

L'exemple següent troba un element dins l'array el valor del qual sigui un nombre primer (o bé retorna {{jsxref("undefined")}} si no n'hi ha cap).

+ +
function isPrime(element, index, array) {
+  var start = 2;
+  while (start <= Math.sqrt(element)) {
+    if (element % start++ < 1) {
+      return false;
+    }
+  }
+  return element > 1;
+}
+
+console.log([4, 6, 8, 12].find(isPrime)); // undefined, no trobat
+console.log([4, 5, 8, 12].find(isPrime)); // 5
+
+ +

Polyfill

+ +

Aquest mètode es va afegira la especificació 2015 de l'ECMAScript i pot no estar disponible encara en algunes implementacions de JavaScript. Tot i així es pot utilitzar el codi següent per a utilitzar-lo en entorns on no estigui disponible:

+ +
if (!Array.prototype.find) {
+  Array.prototype.find = function(predicate) {
+    if (this === null) {
+      throw new TypeError('Array.prototype.find called on null or undefined');
+    }
+    if (typeof predicate !== 'function') {
+      throw new TypeError('predicate must be a function');
+    }
+    var list = Object(this);
+    var length = list.length >>> 0;
+    var thisArg = arguments[1];
+    var value;
+
+    for (var i = 0; i < length; i++) {
+      value = list[i];
+      if (predicate.call(thisArg, value, i, list)) {
+        return value;
+      }
+    }
+    return undefined;
+  };
+}
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-array.prototype.find', 'Array.prototype.find')}}{{Spec2('ES6')}}Definició inicial.
{{SpecName('ESDraft', '#sec-array.prototype.find', 'Array.prototype.find')}}{{Spec2('ESDraft')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerEdgeOperaSafari
Suport bàsic{{CompatChrome(45.0)}}{{CompatGeckoDesktop("25.0")}}{{CompatNo}}12{{CompatNo}}{{CompatSafari("7.1")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileEdgeOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("25.0")}}{{CompatNo}}12{{CompatNo}}8.0
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Array.prototype.findIndex()")}}
    • +
  • {{jsxref("Array.prototype.every()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/array/findindex/index.html b/files/ca/web/javascript/reference/global_objects/array/findindex/index.html new file mode 100644 index 0000000000..5b089bdb98 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/array/findindex/index.html @@ -0,0 +1,173 @@ +--- +title: Array.prototype.findIndex() +slug: Web/JavaScript/Referencia/Objectes_globals/Array/findIndex +translation_of: Web/JavaScript/Reference/Global_Objects/Array/findIndex +--- +
{{JSRef}}
+ +

El mètode findIndex() retorna una posició de l'array si un element de l'array satisfà la funció de testeig donada. En cas contrari retornarà -1.

+ +

Vegeu també el mètode {{jsxref("Array.find", "find()")}}, que retorna el valor trobat dins l'array en comptes de la posició.

+ +

Sintaxi

+ +
arr.findIndex(callback[, thisArg])
+ +

Parameters

+ +
+
callback
+
Funció que s'executarà per a cada valor de l'array, rep tres arguments: +
+
element
+
L'element de l'array que s'està processant actualment.
+
posició
+
La posició de l'array que s'està processant actualment.
+
array
+
L'array des del qual s'ha cridat el mètode find.
+
+
+
thisArg
+
Opcional. L'objecte a utilitzar com a this mentre s'executi callback.
+
+ +

Descripció

+ +

El mètode findIndex executa la funció callback un cop per a cada element present a l'array fins que trobi un on callback retorni true. Si es troba aquest element el mètode findIndex retorna la posició de l'element trobat immediatament. En cas contrari findIndex retornarà -1. callback només serà invocada per a posicions de l'array que tinguin valors assignats; no serà invoada per a posicions que s'hagin eliminat o que mai hagin tingut assignat un valor.

+ +

La invocaicó de callback té tres arguments: el valor de l'element, la posició de l'element i l'objecte array que està sent recorregut.

+ +

Si es proporciona el paràmetre thisArg al cridar el mètode findIndex, aquest serà utilitzat com a this per a cada invocació del mètode callback. En cas de no ser proporcionat s'utilitzarà {{jsxref("undefined")}}.

+ +

findIndex no mutarà l'array des del que es crida.

+ +

El rang d'elemnets que findIndex processarà es determina abans de la primera invocació a callback. Els elements afegits a l'array després de la crida a findIndex no seran visitats per callback. Si un element existent, no visitat encara, rep un altre valor, el valor percebut per callback serà aquell que tingui l'element al ser visitat; els elements visitats no són visitats.

+ +

Exemples

+ +

Trobar la posició d'un nombre primer dins un array

+ +

L'exemple següent trobarà la posició d'un element de l'array que sigui un nombre primer (o bé retornarà -1 si no n'hi ha cap).

+ +
function isPrime(element, index, array) {
+  var start = 2;
+  while (start <= Math.sqrt(element)) {
+    if (element % start++ < 1) {
+      return false;
+    }
+  }
+  return element > 1;
+}
+
+console.log([4, 6, 8, 12].findIndex(isPrime)); // -1, not found
+console.log([4, 6, 7, 12].findIndex(isPrime)); // 2
+
+ +

Polyfill

+ +

Aquest mètode es va afegir a la especificació 6 de l'ECMAScript i pot no estar disponible encara en algunes implementacions de JavaScript. Tot i així es pot utilitzar el codi següent per a utilitzar-lo en entorns on no estigui disponible:

+ +
if (!Array.prototype.findIndex) {
+  Array.prototype.findIndex = function(predicate) {
+    if (this === null) {
+      throw new TypeError('Array.prototype.findIndex called on null or undefined');
+    }
+    if (typeof predicate !== 'function') {
+      throw new TypeError('predicate must be a function');
+    }
+    var list = Object(this);
+    var length = list.length >>> 0;
+    var thisArg = arguments[1];
+    var value;
+
+    for (var i = 0; i < length; i++) {
+      value = list[i];
+      if (predicate.call(thisArg, value, i, list)) {
+        return i;
+      }
+    }
+    return -1;
+  };
+}
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-array.prototype.findIndex', 'Array.prototype.findIndex')}}{{Spec2('ES6')}}Definició inicial.
{{SpecName('ESDraft', '#sec-array.prototype.findIndex', 'Array.prototype.findIndex')}}{{Spec2('ESDraft')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome(45.0)}}{{CompatGeckoDesktop("25.0")}}{{CompatNo}}{{CompatNo}}{{CompatSafari("7.1")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("25.0")}}{{CompatNo}}{{CompatNo}}8.0
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Array.prototype.find()")}}
    • +
  • {{jsxref("Array.prototype.indexOf()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/array/foreach/index.html b/files/ca/web/javascript/reference/global_objects/array/foreach/index.html new file mode 100644 index 0000000000..4d391346eb --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/array/foreach/index.html @@ -0,0 +1,238 @@ +--- +title: Array.prototype.forEach() +slug: Web/JavaScript/Referencia/Objectes_globals/Array/forEach +translation_of: Web/JavaScript/Reference/Global_Objects/Array/forEach +--- +
{{JSRef}}
+ +

El mètode forEach() executa la funció rebuda un cop per cada element de l'array.

+ +

Sintaxi

+ +
arr.forEach(callback[, thisArg])
+ +

Paràmetres

+ +
+
callback
+
Funció a executar per a cada element. Aquesta funció rebrà tres paràmetres: +
+
valor
+
L'element que s'està processant ara mateix a l'array.
+
posició
+
La posició que l'element actual ocupa dins l'array.
+
array
+
L'array al qual el mètode forEach s'aplica.
+
+
+
thisArg
+
Opcional. Valor que s'utilitzarà com a this a l'hora d'executar la funció callback.
+
+ +

Descripció

+ +

forEach() executa la funció callback rebuda com a argument un cop per cada element present a l'array, en ordre ascendent. No es cridarà la funció per a elements que s'hagin eliminat o que no hagin rebut cap valor (és a dir, arrays disperses).

+ +

S'invocarà callback amb els tres arguments següents:

+ +
    +
  • el valor de l'element
    • +
  • la posició de l'element
    • +
  • L'array que s'està recorrent
    • +
+ +

Si es proporciona el paràmetre thisArg a forEach(), aquest es passarà a callback quan es cridi, i es podrà accedir a ell mitjançant la paraula clau this. En el cas que no es proporcioni el paràmetre this rebrà el valor {{jsxref("undefined")}}. El valor de this que serà observable per callback es determina d'acord a les regles usuals per a determinar el valor de this que una funció veu.

+ +

El rang dels elements processats per forEach() és determinat abans de la primera invocació de callback. Els elements que s'afegeixin a l'array després de la crida a forEach() no seran visitats per la funció callback. En el cas que es canviï el valor dels elements de l'array el valor que es passarà a callback serà el valor que tingui l'element en el moment que es visita. Els elements que s'han eliminat abans de ser visitats no es visitaran.

+ +

forEach() executa la funció callback un cop per cada element de l'array; a diferència de {{jsxref("Array.prototype.map()", "map()")}} i {{jsxref("Array.prototype.reduce()", "reduce()")}}, sempre retorna el valor {{jsxref("undefined")}} i no es pot encadenar. El cas d'ús típic és per executar efectes secundaris al final de la cadena.

+ +
+

Nota: L'única forma d'aturar un bucle forEach() és llençar una excepció. Si es requereix aquesta funcionalitat llavors el mètode .forEach() és l'eina incorrecta i es recomana utilitzar un bucle normal. Si el que es pretén és validar els elements d'un array contra un predicat i es requereix retornar un valor booleà, es recomana utilitzar la funció {{jsxref("Array.prototype.every()", "every()")}} o bé {{jsxref("Array.prototype.some()", "some()")}}.

+
+ +

Exemples

+ +

Imprimir el contingut d'un array

+ +

El codi següent mostra una línia per a cada element de l'array:

+ +
function logArrayElements(element, index, array) {
+  console.log('a[' + index + '] = ' + element);
+}
+
+// Cal destacar l'omissió, no hi ha cap element a la posició 2 així que aquesta no es visita
+[2, 5, , 9].forEach(logArrayElements);
+// Mostra:
+// a[0] = 2
+// a[1] = 5
+// a[3] = 9
+
+ +

Una funció per a copiar objectes

+ +

El codi següent crea una copia de l'objecte donat. Hi ha diverses formes de crear una copia d'un objecte, la forma següent és simplement una d'elles i es presenta per a explicar com funciona Array.prototype.forEach() tot utilitzant les funcions de meta-propietats de l'ECMAScript 5 a Object.*

+ +
function copy(obj) {
+  var copy = Object.create(Object.getPrototypeOf(obj));
+  var propNames = Object.getOwnPropertyNames(obj);
+
+  propNames.forEach(function(name) {
+    var desc = Object.getOwnPropertyDescriptor(obj, name);
+    Object.defineProperty(copy, name, desc);
+  });
+
+  return copy;
+}
+
+var obj1 = { a: 1, b: 2 };
+var obj2 = copy(obj1); // obj2 looks like o1 now
+
+ +

Polyfill

+ +

forEach() va ser afegida l'standard ECMA-262 en la cinquena edició; per aquest motiu aquesta funció pot no estar present en altres implementacions de l'standard. Es pot solventar aquest problema inserint el codi següent a l'inici dels vostres scripts. Això permetrà l'ús de forEach() en implementacions que no el suportin de forma nativa. Aquest algoritme és el mateix que l'especificat a l'ECMA-262, cinquena edició, si assumim que {{jsxref("Object")}} i {{jsxref("TypeError")}} tenen els seus valors originals i que callback.call es resol com al valor original de {{jsxref("Function.prototype.call()")}}.

+ +
// Production steps of ECMA-262, Edition 5, 15.4.4.18
+// Reference: http://es5.github.io/#x15.4.4.18
+if (!Array.prototype.forEach) {
+
+  Array.prototype.forEach = function(callback, thisArg) {
+
+    var T, k;
+
+    if (this == null) {
+      throw new TypeError(' this is null or not defined');
+    }
+
+    // 1. Assignem a O el resultat de cridar ToObject tot passant-li el valor de |this| com a argument.
+    var O = Object(this);
+
+    // 2. lenValue representa el resultat de cridar el mètode intern Get de O amb l'argument "length".
+    // 3. Assignem a len el valor ToUint32(lenValue).
+    var len = O.length >>> 0;
+
+    // 4. Si IsCallable(callback) és false, llençem una excepció TypeError.
+    // Vegeu: http://es5.github.com/#x9.11
+    if (typeof callback !== "function") {
+      throw new TypeError(callback + ' no és una funció');
+    }
+
+    // 5. Si s'ha passat thisArg com a aragument, assignem el seu valor a la variable T, en qualsevol altre cas deixem T com a undefined.
+    if (arguments.length > 1) {
+      T = thisArg;
+    }
+
+    // 6. Assignem 0 a la variable k
+    k = 0;
+
+    // 7. Repetir, mentre k < len
+    while (k < len) {
+
+      var kValue;
+
+      // a. Assignem ToString(k) a Pk.
+      //   Aquest comportament és implícit per a operands al cantó esquerra (de l'anglés LHS o Left-Hand-Side) de l'operador "in"This is implicit for LHS operands of the in operator
+      // b. Assignem el resultat de cridar el mètode intern HasProperty de O amb l'argument Pk a la variable kPresent
+      //   Podem combinar aquest pas amb c
+      // c. Si kPresent és true, llavors...
+      if (k in O) {
+
+        // i. Assignem a kValue el resultat de cridar el mètode intern Get de l'objecte O amb l'argument Pk.
+        kValue = O[k];
+
+        // ii. Cridem el mètode intern "call" del callback tot passant-li T com a valor de "this"
+        // així com una llista d'arguments que conté kValue, k i 0
+        callback.call(T, kValue, k, O);
+      }
+      // d. Incrementem el valor de k en 1.
+      k++;
+    }
+    // 8. retornem undefined
+  };
+}
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES5.1', '#sec-15.4.4.18', 'Array.prototype.forEach')}}{{Spec2('ES5.1')}}Definició inicial. Implementat a JavaScript 1.6.
{{SpecName('ES6', '#sec-array.prototype.foreach', 'Array.prototype.forEach')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.8")}}{{CompatIE("9")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.8")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Map.prototype.forEach()")}}
    • +
  • {{jsxref("Set.prototype.forEach()")}}
    • +
  • {{jsxref("Array.prototype.map()")}}
    • +
  • {{jsxref("Array.prototype.every()")}}
    • +
  • {{jsxref("Array.prototype.some()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/array/includes/index.html b/files/ca/web/javascript/reference/global_objects/array/includes/index.html new file mode 100644 index 0000000000..9f64b0e117 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/array/includes/index.html @@ -0,0 +1,158 @@ +--- +title: Array.prototype.includes() +slug: Web/JavaScript/Referencia/Objectes_globals/Array/includes +translation_of: Web/JavaScript/Reference/Global_Objects/Array/includes +--- +
{{JSRef}}
+ +

El mètode includes() determina si un array inclou un element concret, retornant  true o false segons s'escaigui. 

+ +

Sintaxi

+ +
var boolean = array.includes(elementCercat[, desdePosicio])
+ +

Parameters

+ +
+
elementCercat
+
L'element a cercar.
+
desdePosicio
+
Opcional. La posició de l'array a partir de la qual començar la cerca de elementCercat. Un valor negatiu cercarà el nombre absolut donat de posicions contant des del final de l'array. El seu valor per defecte és 0.
+
+ +

Valor retornat

+ +

Un {{jsxref("Boolean")}}.

+ +

Exemples

+ +
[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

+ +
if (!Array.prototype.includes) {
+  Array.prototype.includes = function(searchElement /*, fromIndex*/ ) {
+    'use strict';
+    var O = Object(this);
+    var len = parseInt(O.length) || 0;
+    if (len === 0) {
+      return false;
+    }
+    var n = parseInt(arguments[1]) || 0;
+    var k;
+    if (n >= 0) {
+      k = n;
+    } else {
+      k = len + n;
+      if (k < 0) {k = 0;}
+    }
+    var currentElement;
+    while (k < len) {
+      currentElement = O[k];
+      if (searchElement === currentElement ||
+         (searchElement !== searchElement && currentElement !== currentElement)) { // NaN !== NaN
+        return true;
+      }
+      k++;
+    }
+    return false;
+  };
+}
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES7', '#sec-array.prototype.includes', 'Array.prototype.includes')}}{{Spec2('ES7')}}Definició inicial.
{{SpecName('ESDraft', '#sec-array.prototype.includes', 'Array.prototype.includes')}}{{Spec2('ESDraft')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerEdgeOperaSafari
Suport bàsic +

{{CompatChrome(47)}}

+ 		43{{CompatNo}}{{CompatNo}}349
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Suport bàsic{{CompatNo}} +

{{CompatChrome(47)}}

+ 		43{{CompatNo}}349 +

{{CompatChrome(47)}}

+
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("TypedArray.prototype.includes()")}}
    • +
  • {{jsxref("String.prototype.includes()")}}
    • +
  • {{jsxref("Array.prototype.indexOf()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/array/index.html b/files/ca/web/javascript/reference/global_objects/array/index.html new file mode 100644 index 0000000000..da7c400799 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/array/index.html @@ -0,0 +1,482 @@ +--- +title: Array +slug: Web/JavaScript/Referencia/Objectes_globals/Array +translation_of: Web/JavaScript/Reference/Global_Objects/Array +--- +
{{JSRef}}
+ +

Resum

+ +

L'objecte de JavaScript Array és un objecte global que s'utilitza per a construir arrays; que són objectes d'al nivell que representen llistes.

+ +

Crear un Array

+ +
var fruites = ["Poma", "Pera"];
+
+console.log(fruites.length);
+// 2
+
+ +

Accedir (mitjançant la posició) a un element d'un Array

+ +
var primer = fruites[0];
+// Poma
+
+var ultim = fruites[fruites.length - 1];
+// Pera
+
+ +

Recòrrer un Array

+ +
fruites.forEach(function (element, index, array) {
+  console.log(element, index);
+});
+// Poma 0
+// Pera 1
+
+ +

Afegir elements al final d'un Array

+ +
var nouTamany = fruites.push("Taronja");
+// ["Poma", "Pera", "Taronja"]
+
+ +

Eliminar l'element del final d'un Array

+ +
var ultim = fruites.pop(); // Elimina Taronja (del final)
+// ["Poma", "Pera"];
+
+ +

Eliminar l'element de l'inici d'un Array

+ +
var primer = fruites.shift(); // elimina Poma del principi del Array
+// ["Pera"];
+
+ +

Afegir un element a l'inici d'un Array

+ +
var nouTamany = fruites.unshift("Maduixa") // Afegir al principi
+// ["Maduixa", "Pera"];
+
+ +

Trobar la posició d'un element del Array

+ +
fruites.push("Mango");
+// ["Maduixa", "Pera", "Mango"]
+
+var pos = fruites.indexOf("Pera");
+// 1
+
+ +

Eliminar un element segons la seva posició

+ +
var elementEliminat = fruites.splice(pos, 1); // així és com s'elimina un element
+// ["Maduixa", "Mango"]
+
+ +

Copiar un Array

+ +
var shallowCopy = fruits.slice(); // així és com es copia
+// ["Maduixa", "Mango"]
+
+ +

Sintaxi

+ +
[element0, element1, ..., elementN]
+new Array(element0, element1[, ...[, elementN]])
+new Array(longitudArray)
+ +
+
elementN
+
S'inicialitza un array de JavaScript amb els elements donats, excepte si només es proporciona un sol argument al constructor Array i aquest argument és un nombre. (Vegeu a sota). Cal destacar que aquest cas especial només s'aplica a arrays de JavaScript creats mitjançant el constructor Array i no a literals array creats a partir de ls sintaxi de claus.
+
longitudArray
+
Si només es passa un sol argument al constructor Array i aquest argument és un nombre entre 0 232-1 (inclòs), aquest retorna un nou array de JavaScript amb la longitud especificada pel nombre passat com a argument. Si l'argument és qualsevol altre nombre es llença l'excepció {{jsxref("Global_Objects/RangeError", "RangeError")}}.
+
+ +

Descripció

+ +

Els arrays són objectes semblants a lliste el prototipus dels quals té mètodes que permeten realitzar operacions de travessa i mutació. Ni a longitud ni el tipus dels elements són fixos en els arrays de JavaScript. Com que el tamany d'un array pot canviar en qualsevol moment no es pot garantir la seva densitat. En general aquestes característiques són convenients; però si en algun cas aquestes característiques no fossin convenients es recomana considerar l'ús de arrays amb tipus.

+ +

Algunes persones creuen que no s'hauria de fer ús de arrays com amb finalitats associatives. En qualsevol cas sempre es pot utilitzar senzillament un {{jsxref("Global_Objects/Object", "objects")}} per a tal fet instead, tot i que fer-ho també té els seus inconvenients. Vegeu el post Diccionaris de JavaScript lleugers amb claus arbitràries per a exemple.

+ +

Accedir als elements d'un array

+ +

Els arrays de JavaScript comencen el compte de posició (índex) amb el zero: és a dir, el primer element d'un array ocupa la posició 0 i l'últim element d'un array es troba a l'índex amb valor del  {{jsxref("Array.length", "tamany")}} de l'array menys 1.

+ +
var arr = ['aquest és el primer element', 'aquest és el segon element'];
+console.log(arr[0]);              // mostra 'aquest és el primer element'
+console.log(arr[1]);              // mostra 'aquest és el segon element'
+console.log(arr[arr.length - 1]); // mostra 'aquest és el segon element'
+
+ +

Els elements d'un array són propietats de l'objecte de la mateixa que toString és una propietat, però intentar accedir un element d'un array de la manera que es mostra a continuació llença un error de sintaxi, ja que el nom de la propietat no és vàlid:

+ +
console.log(arr.0); // error de sintaxi
+
+ +

No hi ha res d'especial sobre els arrays de JavaScript i les propietats que causen aquest comportament. A JavaScript, les propietats que comencen amb un dígit no es poden referenciar amb la notació de punt; per a accedir-hi és necesari utilitzar la notació de claus. Per exemple, per a accedir a la propietat anomenada '3d' d'un objecte, l'única forma d'accedir-hi és mitjançant la notació de claus tal i com es mostra a continuació:

+ +
var anys = [1950, 1960, 1970, 1980, 1990, 2000, 2010];
+console.log(anys.0);   // error de sintaxi
+console.log(anys[0]);  // funciona
+
+ +
renderer.3d.setTexture(model, 'character.png');     // error de sintaxi
+renderer['3d'].setTexture(model, 'character.png');  // funciona
+
+ +

Fixeu-vos que a l'exemple de 3d, '3d' necessita cometes. És possible utilitzar cometes amb les posicions d'un array (per exemple, anys['2'] en comptes de anys[2]), tot i que no és necesari. El 2 a anys[2] és transformat en un string pel motor de JavaScript implícitament mitjançant el mètode toString. Per aquesta raó '2' i '02' es referirien a dues propietats diferents de l'objecte anys i l'exemple següent podría retornar true:

+ +
console.log(anys['2'] != anys['02']);
+
+ +

De la mateixa manera, les propietats d'objectes que utilitzin paraules clau com a nom(!) només es poden accedir mitjançant literals string en notació de claus (però poden accedir-se mitjançant notació de punt com a mínim al firefox 40.0a2):

+ +
var promise = {
+  'var'  : 'text',
+  'array': [1, 2, 3, 4]
+};
+
+console.log(promise['array']);
+
+ +

Relació  entre length i propietats numèriques

+ +

La propietat {{jsxref("Array.length", "length")}} dels arrays de JavaScript està relacionada amb les propietats numèriques. Diversos mètodes pertanyent de forma nativa a l'objecte array (com ara {{jsxref("Array.join", "join")}}, {{jsxref("Array.slice", "slice")}}, {{jsxref("Array.indexOf", "indexOf")}}, etcètera.) tenen en compte el valor de la propietat {{jsxref("Array.length", "length")}} quan són cridats. Altres mètodes, com ara {{jsxref("Array.push", "push")}} o {{jsxref("Array.splice", "splice")}}, també actualitzen el valor de la propietat {{jsxref("Array.length", "length")}}.

+ +
var fruites = [];
+fruites.push('banana', 'poma', 'prèssec');
+
+console.log(fruites.length); // 3
+
+ +

A l'hora d'assignar una propietat a un array de JavaScript, quan la propietat és una posició vàlida i aquesta posició cau fora dels límits que l'array té en aquell moment, el motor ha d'actualitzar la propietat {{jsxref("Array.length", "length")}} de l'array apropiadament:

+ +
fruites[5] = 'mango';
+console.log(fruites[5]); // 'mango'
+console.log(Object.keys(fruites));  // ['0', '1', '2', '5']
+console.log(fruites.length); // 6
+
+ +

Incrementant la longitud amb {{jsxref("Array.length", "length")}}.

+ +
fruites.length = 10;
+console.log(Object.keys(fruites)); // ['0', '1', '2', '5']
+console.log(fruites.length); // 10
+
+ +

Decrementar la propietat {{jsxref("Array.length", "length")}}, per contra, elimina elements.

+ +
fruites.length = 2;
+console.log(Object.keys(fruites)); // ['0', '1']
+console.log(fruites.length); // 2
+
+ +

Aquest comportament s'explica amb més detall a la pàgina de {{jsxref("Array.length")}}.

+ +

Crear un array utilitzant el resultat d'una expressió regular

+ +

El resultats obtinguts a l'aplicar una expressió regular sobre un string poden crear un array de JavaScript. Aquest array tindrà propietats i elements que ofereixen informació sobre les coincidències. Aquest tipus d'arrays és retornat pels mètodes {{jsxref("RegExp.exec")}}, {{jsxref("String.match")}}, i {{jsxref("String.replace")}}. Per a ajudar a entendre aquestes propietats i elements, vegeu l'exemple següent i la taula a continuació:

+ +
// Cerca una d seguida d'una o més b's seguides d'una d
+// Desa les coincidències de b's amb una d a continuació
+// No distingeix entre majúscules i minúscules
+
+var myRe = /d(b+)(d)/i;
+var myArray = myRe.exec('cdbBdbsbz');
+
+ +

Les propietats i elements retornats d'aplicar aquesta expressió regular al string són les següents:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Propietat/ElementDescripcióExemple
inputPropietat només de lectura que representa el string original contra el que s'ha aplicat la expressió regular.cdbBdbsbz
indexPropietat només de lectura que representa la posició on s'ha trobat coincidència (considerant zero la primera posició)1
[0]element només de lectura que especifica els últims caràcters que han coincidit.dbBd
[1], ...[n]Elements només de lectura que especifiquen coincidències parcials en parèntesi, si aquests s'inclouen a l'expressió regular. El nombre de possibles coincidències parcials en parèntesi és il·limitat.[1]: bB
+ [2]: d
+ +

Propietats

+ +
+
Array.length
+
La propietat de longitud del constructor de Array. El seu valor és 1.
+
{{jsxref("Array.prototype")}}
+
Permet l'adició de propietats a tots els objectes array.
+
+ +

Mètodes

+ +
+
{{jsxref("Array.from()")}} {{experimental_inline}}
+
Crea una nova instància de Array a partir d'un objecte iterable o un objecte similar a un array.
+
{{jsxref("Array.isArray()")}}
+
Retorna true si una variable és un array. En cas contrari retorna false.
+
{{jsxref("Array.observe()")}} {{experimental_inline}}
+
Observa de forma asíncrona canvis en Arrays, de manera similar al mètode {{jsxref("Object.observe()")}} per a objectes. Proporciona una sequència de canvis ordenats per ordre d'ocurrència.
+
{{jsxref("Array.of()")}} {{experimental_inline}}
+
Crea una nova instància de Array amb un nombre variable d'arguments, sense importar el nombre o tipus d'arguments.
+
+ +

Instàncies de Array

+ +

Totes les instàncies de Array hereten de {{jsxref("Array.prototype")}}. L'objecte prototipus del constructor de Array es pot modificar per a afectar a totes les instàncies de Array a l'hora.

+ +

Propietats

+ +
{{page('/ca/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Properties')}}
+ +

Mètodes

+ +

Mètodes de mutació

+ +
{{page('ca/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Mutator_methods')}}
+ +

Mètodes d'accés

+ +
{{page('ca/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Accessor_methods')}}
+ +

Mètodes d'iteració

+ +
{{page('ca/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Iteration_methods')}}
+ +

Mètodes genèrics de Array

+ +
+

Els genèrics de Array no formen part de cap standard, estan en desús i poden ser esborrats en el futur. Noteu que no funcionen a tots els navegadors, tot i que hi ha una correcció de compatibilitat disponible a GitHub.

+
+ +

De vegades hom voldria aplicar mètodes de array a strings o altres objectes semblants a arrays (com ara la funció {{jsxref("Functions/arguments", "arguments", "", 1)}}). Per a aconseguir això, es tractaria un string com un array de caràcters (o en tot cas tractar un objecte que no sigui un array com a array). Per exemple, per a comprovar que tots els caràcters d'una variable str són lletres, es faria de la forma següent:

+ +
function isLetter(character) {
+  return character >= 'a' && character <= 'z';
+}
+
+if (Array.prototype.every.call(str, isLetter)) {
+  console.log("El string '" + str + "' només conté lletres!");
+}
+
+ +

Aquesta notació és força molesta i JavaScript 1.6 va introduïr una abreviació genèrica:

+ +
if (Array.every(str, isLetter)) {
+  console.log("El string '" + str + "' només conté lletres!");
+}
+
+ +

{{jsxref("Global_Objects/String", "Generics", "#String_generic_methods", 1)}} també estan disponibles a {{jsxref("Global_Objects/String", "String")}}.

+ +

Aquests no formen actualment part de cap standard ECMAScript (tot i que es pot utilitzar el mètode {{jsxref("Array.from()")}} de l'ECMAScript 6 per a aconseguir el mateix resultat). A continuació es presenta una correcció de compatibilitat per a permetre el seu ús a qualsevol navegador:

+ +
// Asumeix que els extres de Array són presents (també es poden utilitzar funcions Polifyll per a suplir això)
+(function() {
+  'use strict';
+
+  var i,
+    // També es podria construïr l'array de mètodes de la forma següent, però
+    //   el mètode getOwnPropertyNames() no té cap corrector de compatibilitat:
+    // Object.getOwnPropertyNames(Array).filter(function(methodName) {
+    //   return typeof Array[methodName] === 'function'
+    // });
+    methods = [
+      'join', 'reverse', 'sort', 'push', 'pop', 'shift', 'unshift',
+      'splice', 'concat', 'slice', 'indexOf', 'lastIndexOf',
+      'forEach', 'map', 'reduce', 'reduceRight', 'filter',
+      'some', 'every', 'find', 'findIndex', 'entries', 'keys',
+      'values', 'copyWithin', 'includes'
+    ],
+    methodCount = methods.length,
+    assignArrayGeneric = function(methodName) {
+      if (!Array[methodName]) {
+        var method = Array.prototype[methodName];
+        if (typeof method === 'function') {
+          Array[methodName] = function() {
+            return method.call.apply(method, arguments);
+          };
+        }
+      }
+    };
+
+  for (i = 0; i < methodCount; i++) {
+    assignArrayGeneric(methods[i]);
+  }
+}());
+
+ +

Exemples

+ +

Crear un array

+ +

L'exemple següent crea un array, msgArray, amb un tamany de 0, després assigna valors a les posicions msgArray[0] i msgArray[99], canviant automàticament el tamany de l'array a 100.

+ +
var msgArray = [];
+msgArray[0] = 'Hello';
+msgArray[99] = 'world';
+
+if (msgArray.length === 100) {
+  console.log('The length is 100.');
+}
+
+ +

Crear un array de dues dimensions (bidimensional)

+ +

L'exemple següent crea un tauler d'escacs com a array bidimensional de strings. El primer moviement es realitza tot copiant la 'p' de la posició (6,4) a (4,4). La posició anterior esdevé buïda.

+ +
var board = [
+  ['R','N','B','Q','K','B','N','R'],
+  ['P','P','P','P','P','P','P','P'],
+  [' ',' ',' ',' ',' ',' ',' ',' '],
+  [' ',' ',' ',' ',' ',' ',' ',' '],
+  [' ',' ',' ',' ',' ',' ',' ',' '],
+  [' ',' ',' ',' ',' ',' ',' ',' '],
+  ['p','p','p','p','p','p','p','p'],
+  ['r','n','b','q','k','b','n','r'] ];
+
+console.log(board.join('\n') + '\n\n');
+
+// Movem el peó del Rei endevant dues caselles
+board[4][4] = board[6][4];
+board[6][4] = ' ';
+console.log(board.join('\n'));
+
+ +

Aquesta seria la sortida:

+ +
R,N,B,Q,K,B,N,R
+P,P,P,P,P,P,P,P
+ , , , , , , ,
+ , , , , , , ,
+ , , , , , , ,
+ , , , , , , ,
+p,p,p,p,p,p,p,p
+r,n,b,q,k,b,n,r
+
+R,N,B,Q,K,B,N,R
+P,P,P,P,P,P,P,P
+ , , , , , , ,
+ , , , , , , ,
+ , , , ,p, , ,
+ , , , , , , ,
+p,p,p,p, ,p,p,p
+r,n,b,q,k,b,n,r
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial.
{{SpecName('ES5.1', '#sec-15.4', 'Array')}}{{Spec2('ES5.1')}}S'afegeixen més mètodes: {{jsxref("Array.isArray")}}, {{jsxref("Array.prototype.indexOf", "indexOf")}}, {{jsxref("Array.prototype.lastIndexOf", "lastIndexOf")}}, {{jsxref("Array.prototype.every", "every")}}, {{jsxref("Array.prototype.some", "some")}}, {{jsxref("Array.prototype.forEach", "forEach")}}, {{jsxref("Array.prototype.map", "map")}}, {{jsxref("Array.prototype.filter", "filter")}}, {{jsxref("Array.prototype.reduce", "reduce")}}, {{jsxref("Array.prototype.reduceRight", "reduceRight")}}
{{SpecName('ES6', '#sec-array-objects', 'Array')}}{{Spec2('ES6')}}S'afegeixen més mètodes: {{jsxref("Array.from")}}, {{jsxref("Array.of")}}, {{jsxref("Array.prototype.find", "find")}}, {{jsxref("Array.prototype.findIndex", "findIndex")}}, {{jsxref("Array.prototype.fill", "fill")}}, {{jsxref("Array.prototype.copyWithin", "copyWithin")}}
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
+ + + + + + +
Suport bàsic
+ 		{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ + diff --git a/files/ca/web/javascript/reference/global_objects/array/indexof/index.html b/files/ca/web/javascript/reference/global_objects/array/indexof/index.html new file mode 100644 index 0000000000..939571a0c8 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/array/indexof/index.html @@ -0,0 +1,235 @@ +--- +title: Array.prototype.indexOf() +slug: Web/JavaScript/Referencia/Objectes_globals/Array/indexOf +translation_of: Web/JavaScript/Reference/Global_Objects/Array/indexOf +--- +
{{JSRef}}
+ +

El mètode indexOf() retorna la primera posició a la qual es troba l'element proporcionat, o bé -1 si l'element no es troba dins l'array.

+ +

Sintaxi

+ +
arr.indexOf(elementAcercar[, posicioInicial = 0])
+ +

Paràmetres

+ +
+
elementAcercar
+
L'element que es cercarà.
+
posicioInicial
+
La posició a la qual començar la cerca. Si la posició és major o igual a la longitud de l'array, es retornarà -1, això implica que no es realitzarà cap cerca a l'array. Si es proporciona un onmbre negatiu, es calcularà la posició des de la qual cercar des del final de l'array. Nota: l'array sempre es cercarà accedint a les posicions en ordre ascendent encara que la posicioInicial sigui negatiu. Si la posició proporcionada és 0 es cercarà en tot l'array. El valor per defecte és 0 (cerca a tot l'array).
+
+ +

Descripció

+ +

indexOf() compara elementAcercar amb els elements de l'array mitjançant la igualtat estricta (el mateix mètode utilitzat per l'operador ===, també anomenat triple-equals).

+ +

Exemples

+ +

Utilitzar indexOf()

+ +

L'exemple següent utilitza indexOf() per a localitzar valors dins un array.

+ +
var array = [2, 9, 9];
+array.indexOf(2);     // 0
+array.indexOf(7);     // -1
+array.indexOf(9, 2);  // 2
+array.indexOf(2, -1); // -1
+array.indexOf(2, -3); // 0
+
+ +

Trobar totes les ocurrències d'un element

+ +
var indices = [];
+var array = ['a', 'b', 'a', 'c', 'a', 'd'];
+var element = 'a';
+var idx = array.indexOf(element);
+while (idx != -1) {
+  indices.push(idx);
+  idx = array.indexOf(element, idx + 1);
+}
+console.log(indices);
+// [0, 2, 4]
+
+ +

Determinar si un element existeix o no a l'array i actualitzar-lo

+ +
function updateVegetablesCollection (veggies, veggie) {
+    if (veggies.indexOf(veggie) === -1) {
+        veggies.push(veggie);
+        console.log('La nova col·lecció de verdures és : ' + veggies);
+    } else if (veggies.indexOf(veggie) > -1) {
+        console.log(veggie + ' ja existeix a la col·lecció de verdures.');
+    }
+}
+
+var veggies = ['potato', 'tomato', 'chillies', 'green-pepper'];
+
+updateVegetablesCollection(veggies, 'spinach');
+//  La nova col·lecció de verdures és : potato,tomato,chillies,green-papper,spinach
+updateVegetablesCollection(veggies, 'spinach');
+// spinach  ja existeix a la col·lecció de verdures.
+
+ +

Polyfill

+ +

indexOf() va ser afegit al standard ECMA-262 a la cinquena versió; degut a això pot no estar present en tots els navegadors. Afegir el següent codi al principi dels vostres escripts us permetrà utilitzar aquesta funció en navegadors on indexOf no sigui suportada de forma nativa. Aquest algoritme és el mateix que l'especificat a la cinquena versió de l'ECMA-262, donat que {{jsxref("Global_Objects/TypeError", "TypeError")}} i {{jsxref("Math.abs()")}} no han estat modificats.

+ +
// Production steps of ECMA-262, Edition 5, 15.4.4.14
+// Reference: http://es5.github.io/#x15.4.4.14
+if (!Array.prototype.indexOf) {
+  Array.prototype.indexOf = function(searchElement, fromIndex) {
+
+    var k;
+
+    // 1. Sigui o el resultat de cridar ToObject passant
+    //    el valor de this com a argument.
+    if (this == null) {
+      throw new TypeError('"this" is null or not defined');
+    }
+
+    var o = Object(this);
+
+    // 2. Sigui lenValue el resultat de cridar el mètode intern Get
+    //    de o amb l'argument "length".
+    // 3. Sigui len ToUint32(lenValue).
+    var len = o.length >>> 0;
+
+    // 4. Si len és 0, retornem -1.
+    if (len === 0) {
+      return -1;
+    }
+
+    // 5. Si s'ha passat l'argument fromIndex n valdrà
+    //    ToInteger(fromIndex); si no n valdrà 0.
+    var n = +fromIndex || 0;
+
+    if (Math.abs(n) === Infinity) {
+      n = 0;
+    }
+
+    // 6. Si n >= len, retornem -1.
+    if (n >= len) {
+      return -1;
+    }
+
+    // 7. Si n >= 0, k valdrà n.
+    // 8. Si no, si n<0, k valdrà len - abs(n).
+    //    Si k és menor que 0, llavors k valdrà 0.
+    k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);
+
+    // 9. Repetir mentre k < len
+    while (k < len) {
+      // a. Sigui Pk ToString(k).
+      //   Això és implícit per a operands a l'esquerra de l'operador in
+      // b. Sigui kPresent el resultat de cridar el mètode intern
+      //    HasProperty de o amb l'argument Pk.
+      //   Aquest pas es pot combinar amb c
+      // c. Si kPresent és cert, llavors
+      //    i.  Sigui elementK el resultat de cridar el mètode intern Get
+      //        de o amb l'argument ToString(k).
+      //   ii.  Sigui same el resultat d'aplicar l'algoritme del
+      //         comparador d'igualtat estricta a
+      //        searchElement i elementK.
+      //  iii.  Si same és cert retornem k.
+      if (k in o && o[k] === searchElement) {
+        return k;
+      }
+      k++;
+    }
+    return -1;
+  };
+}
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES5.1', '#sec-15.4.4.14', 'Array.prototype.indexOf')}}{{Spec2('ES5.1')}}Definició inicial. Implementat a JavaScript 1.6.
{{SpecName('ES6', '#sec-array.prototype.indexof', 'Array.prototype.indexOf')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-array.prototype.indexof', 'Array.prototype.indexOf')}}{{Spec2('ESDraft')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.8")}}{{CompatIE("9")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.8")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Notes de compatibilitat

+ +
    +
  • Començant amb el Firefox 47 {{geckoRelease(47)}},  aquest mètode no retornarà -0. Per exemple, [0].indexOf(0, -0) ara sempre retornarà +0 ({{bug(1242043)}}).
    • +
+ +

Vegeu també

+ +
    +
  • {{jsxref("Array.prototype.lastIndexOf()")}}
    • +
  • {{jsxref("TypedArray.prototype.indexOf()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/array/isarray/index.html b/files/ca/web/javascript/reference/global_objects/array/isarray/index.html new file mode 100644 index 0000000000..6393dde86f --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/array/isarray/index.html @@ -0,0 +1,135 @@ +--- +title: Array.isArray() +slug: Web/JavaScript/Referencia/Objectes_globals/Array/isArray +translation_of: Web/JavaScript/Reference/Global_Objects/Array/isArray +--- +
{{JSRef}}
+ +

El mètode Array.isArray()retorna true si un objecte és un array, o false en cas que no ho sigui.

+ +

Sintaxi

+ +
Array.isArray(obj)
+ +

Paràmetres

+ +
+
obj
+
L'objecte que s'ha de comprovar.
+
+ +

Descripció

+ +

Vegeu l'article “Determinar amb absoluta precisió si un objecte JavaScript és un array o no” per més detalls.

+ +

Exemples

+ +
// totes les crides següents retornen true
+Array.isArray([]);
+Array.isArray([1]);
+Array.isArray(new Array());
+// Fet poc conegut: Array.prototype és un array per si mateix:
+Array.isArray(Array.prototype);
+
+// totes les crides següents retornen false
+Array.isArray();
+Array.isArray({});
+Array.isArray(null);
+Array.isArray(undefined);
+Array.isArray(17);
+Array.isArray('Array');
+Array.isArray(true);
+Array.isArray(false);
+Array.isArray({ __proto__: Array.prototype });
+
+ +

Polyfill

+ +

Executar el codi següent abans de cap altre codi crearà Array.isArray() si no es troba disponible de forma nativa.

+ +
if (!Array.isArray) {
+  Array.isArray = function(arg) {
+    return Object.prototype.toString.call(arg) === '[object Array]';
+  };
+}
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES5.1', '#sec-15.4.3.2', 'Array.isArray')}}{{Spec2('ES5.1')}}Definició inicial. Implementat en JavaScript 1.8.5.
{{SpecName('ES6', '#sec-array.isarray', 'Array.isArray')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome("5")}}{{CompatGeckoDesktop("2.0")}}{{CompatIE("9")}}{{CompatOpera("10.5")}}{{CompatSafari("5")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("2.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Array")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/array/join/index.html b/files/ca/web/javascript/reference/global_objects/array/join/index.html new file mode 100644 index 0000000000..8d76b4474a --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/array/join/index.html @@ -0,0 +1,123 @@ +--- +title: Array.prototype.join() +slug: Web/JavaScript/Referencia/Objectes_globals/Array/join +translation_of: Web/JavaScript/Reference/Global_Objects/Array/join +--- +
{{JSRef}}
+ +

El mètode join() ajunta tots els elements d'un array en un string.

+ +

Sintaxi

+ +
str = arr.join([separador = ','])
+ +

Paràmetres

+ +
+
separador
+
Opcional. Expecifica un string que s'utilitzarà per a serparar cada element de l'array. El separador es converteix a string automàticament en cas necesari. Si s'omet, els elements de l'array seran separats per una coma. Si separador és un string buit, s'ajuntaran tots els elements de l'array sense cap caràcter entre ells.
+
+ +

Descripció

+ +

Ajunta les conversions a string de tots els elements de l'array en un sol string. Si un element és undefined o bé null aquest es converteix en una cadena buida.

+ +

Exemples

+ +

Quatre formes diferents d'ajuntar un array

+ +

L'exemple següent crea un array, a, amb tres elements, l'ajunta quatre cops: utilitzant el separador per defect, utilitzant coma i espai, utiltizant el signe més i utilitzant un string buit.

+ +
var a = ['Wind', 'Rain', 'Fire'];
+var myVar1 = a.join();      // assigna 'Wind,Rain,Fire' a myVar1
+var myVar2 = a.join(', ');  // assigna 'Wind, Rain, Fire' a myVar2
+var myVar3 = a.join(' + '); // assigna 'Wind + Rain + Fire' a myVar3
+var myVar4 = a.join('');    // assigna 'WindRainFire' a myVar4
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.4.4.5', 'Array.prototype.join')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-array.prototype.join', 'Array.prototype.join')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome("1.0")}}{{CompatGeckoDesktop("1.7")}}{{CompatIE("5.5")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("String.prototype.split()")}}
    • +
  • {{jsxref("Array.prototype.toString()")}}
    • +
  • {{jsxref("TypedArray.prototype.join()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/array/keys/index.html b/files/ca/web/javascript/reference/global_objects/array/keys/index.html new file mode 100644 index 0000000000..7d9df8e1f5 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/array/keys/index.html @@ -0,0 +1,115 @@ +--- +title: Array.prototype.keys() +slug: Web/JavaScript/Referencia/Objectes_globals/Array/keys +translation_of: Web/JavaScript/Reference/Global_Objects/Array/keys +--- +
{{JSRef}}
+ +

El mètode keys() retorna un nou Array Iterator que conté la clau de cada posició d'un array.

+ +

Sintaxi

+ +
arr.keys()
+ +

Exemples

+ +

Ús bàsic

+ +
var arr = ["a", "b", "c"];
+var iterator = arr.keys();
+
+console.log(iterator.next()); // { value: 0, done: false }
+console.log(iterator.next()); // { value: 1, done: false }
+console.log(iterator.next()); // { value: 2, done: false }
+console.log(iterator.next()); // { value: undefined, done: true }
+
+ +

L'iterador de claus no ignora els forats

+ +
var arr = ["a", , "c"];
+var sparseKeys = Object.keys(arr);
+var denseKeys = [...arr.keys()];
+console.log(sparseKeys); // ['0', '2']
+console.log(denseKeys);  // [0, 1, 2]
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-array.prototype.keys', 'Array.prototype.keys')}}{{Spec2('ES6')}}Definició inicial.
{{SpecName('ESDraft', '#sec-array.prototype.keys', 'Array.prototype.keys')}}{{Spec2('ESDraft')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome("38")}}{{CompatGeckoDesktop("28")}}{{CompatNo}}{{CompatOpera("25")}}{{CompatSafari("7.1")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("28")}}{{CompatNo}}{{CompatNo}}8.0
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Array.prototype.values()")}}
    • +
  • {{jsxref("Array.prototype.entries()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/array/lastindexof/index.html b/files/ca/web/javascript/reference/global_objects/array/lastindexof/index.html new file mode 100644 index 0000000000..038aa614e5 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/array/lastindexof/index.html @@ -0,0 +1,197 @@ +--- +title: Array.prototype.lastIndexOf() +slug: Web/JavaScript/Referencia/Objectes_globals/Array/lastIndexOf +translation_of: Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf +--- +
{{JSRef}}
+ +

 

+ +

El mètode lastIndexOf () retorna l'última posició a la qual es troba l'element proporcionat, o bé -1 si l'element no es troba dins l'array. L'array es recorrerà en ordre invers a partir de la posició pocicioInicial.

+ +

Sintaxi

+ +
arr.lastIndexOf(elementAcercar[, posicioInicial = arr.length - 1])
+ +

Paràmetres

+ +
+
elementAcercar
+
L'element que es cercarà.
+
posicioInicial
+
Opcional. La posició a partir de la qual es començarà a cercar cap enrera. El valor per defecte és el tamany de l'array menys un, és a dir, tota l'array serà cercada. Si la posició proporcionada es major o igual que la longitud de l'array tot l'array serà cercat. Si és negatiu s'utilitzarà com a desplaçament respecte el final de l'array. Nota: l'array sempre es cercarà accedint a les posicions en ordre descendent encara que la posicioInicial sigui negatiu. Si la posició calculada és menor que zero, es retornarà -1, és a dir, l'array no serà cercat.
+
+ +

Descripció

+ +

lastIndexOf compara elementAcercar amb els elements de l'array mitjançant la igualtat estricta (el mateix mètode utilitzat per l'operador ===, també anomenat triple-equals).

+ +

Exemples

+ +

Utilitzar lastIndexOf

+ +

L'exemple següent utilitza lastIndexOf per a localitzar valors dins un array.

+ +
var array = [2, 5, 9, 2];
+array.lastIndexOf(2);     // 3
+array.lastIndexOf(7);     // -1
+array.lastIndexOf(2, 3);  // 3
+array.lastIndexOf(2, 2);  // 0
+array.lastIndexOf(2, -2); // 0
+array.lastIndexOf(2, -1); // 3
+
+ +

Trobar totes les ocurrències d'un element

+ +

L'exemple segïuent utilitza lastIndexOf per a trobar totes les posicions d'un element en un array donat, utilitzant {{jsxref("Array.prototype.push", "push")}} per a afegir-los a u altre array un cop trobats.

+ +
var indices = [];
+var array = ['a', 'b', 'a', 'c', 'a', 'd'];
+var element = 'a';
+var idx = array.lastIndexOf(element);
+while (idx != -1) {
+  indices.push(idx);
+  idx = (idx > 0 ? array.lastIndexOf(element, idx - 1) : -1);
+}
+
+console.log(indices);
+// [4, 2, 0]
+
+ +

Cal destacar que el cas idx == 0 s'ha de tractar de forma separada ja que l'element sempre serà trobat sense importar el valor del paràmetre posicioInicial si és el primer element de l'array. Aquest comportament és diferent del del mètode {{jsxref("Array.prototype.indexOf", "indexOf")}}.

+ +

Polyfill

+ +

lastIndexOf va ser afegit al standard ECMA-262 a la cinquena versió; degut a això pot no estar present en tots els navegadors. Afegir el següent codi al principi dels vostres escripts us permetrà utilitzar aquesta funció en navegadors on indexOf no sigui suportada de forma nativa. Aquest algoritme és el mateix que l'especificat a la cinquena versió de l'ECMA-262, donat que {{jsxref("Object")}}, {{jsxref("TypeError")}}, {{jsxref("Number")}}, {{jsxref("Math.floor")}}, {{jsxref("Math.abs")}}, i{{jsxref("Math.min")}} no han estat modificats.

+ +
// Production steps of ECMA-262, Edition 5, 15.4.4.15
+// Reference: http://es5.github.io/#x15.4.4.15
+if (!Array.prototype.lastIndexOf) {
+  Array.prototype.lastIndexOf = function(searchElement /*, fromIndex*/) {
+    'use strict';
+
+    if (this === void 0 || this === null) {
+      throw new TypeError();
+    }
+
+    var n, k,
+      t = Object(this),
+      len = t.length >>> 0;
+    if (len === 0) {
+      return -1;
+    }
+
+    n = len - 1;
+    if (arguments.length > 1) {
+      n = Number(arguments[1]);
+      if (n != n) {
+        n = 0;
+      }
+      else if (n != 0 && n != (1 / 0) && n != -(1 / 0)) {
+        n = (n > 0 || -1) * Math.floor(Math.abs(n));
+      }
+    }
+
+    for (k = n >= 0 ? Math.min(n, len - 1) : len - Math.abs(n); k >= 0; k--) {
+      if (k in t && t[k] === searchElement) {
+        return k;
+      }
+    }
+    return -1;
+  };
+}
+
+ +

Cal destacar que l'implementació aspira  una compatibilitat ambsoluta amb els mètodes lastIndexOf trobats al Firefox i el motor JavaScript SpiderMonkey, incloent diversos casos que són excepcionals. Si es pretén utilitzar-lo en aplicacions quotidianes, és posible calcular from amb codi més senzill si s'ignoren aquests casos.

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES5.1', '#sec-15.4.4.15', 'Array.prototype.lastIndexOf')}}{{Spec2('ES5.1')}}Definició inicial. Implementat a JavaScript 1.6.
{{SpecName('ES6', '#sec-array.prototype.lastindexof', 'Array.prototype.lastIndexOf')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-array.prototype.lastindexof', 'Array.prototype.lastIndexOf')}}{{Spec2('ESDraft')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatIE("9")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Notes de compatibilitat

+ +
    +
  • Començant amb el Firefox 47 {{geckoRelease(47)}}, aquest mètode no retornarà -0. Per exemple, [0].lastIndexOf(0, -0) ara sempre retornarà +0 ({{bug(1242043)}}).
    • +
+ +

Vegeu també

+ +
    +
  • {{jsxref("Array.prototype.indexOf()")}}
    • +
  • {{jsxref("TypedArray.prototype.lastIndexOf()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/array/length/index.html b/files/ca/web/javascript/reference/global_objects/array/length/index.html new file mode 100644 index 0000000000..a4954565ff --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/array/length/index.html @@ -0,0 +1,128 @@ +--- +title: Array.prototype.length +slug: Web/JavaScript/Referencia/Objectes_globals/Array/length +translation_of: Web/JavaScript/Reference/Global_Objects/Array/length +--- +
{{JSRef}}
+ +

La propietat length representa un nombre sencer sense signe de 32 bits que és sempre numèricament major que la última posició de l'array.

+ +
{{js_property_attributes(1, 0, 0)}}
+ +

Sintaxi

+ +
arr.length
+ +

Descripció

+ +

El valor de la propietat length és un sencer amb un signe positiu un valor menor de 2 elevat a 32 (232).

+ +

Es pot establir la propietat length per truncar un array en qualsevol moment. Quan s'exten un array per mitjà de canviar la seva propietat length, el nombre actual d'elements no s'incrementa; per exemple, si s'estableix length a 3 quan en aquell moment és 2, l'array encara conté només 2 elements. Així, la propietat length no necessàriament indica el nombre de valors definits en l'array. Vegeu també Relació entre length i propietats numèriques.

+ +

Exemples

+ +

Recorrer un array

+ +

En l'exemple següent, es recorre l'array numbers comprovant la propietat length. Es duplica el valor de cada element.

+ +
var numbers = [1, 2, 3, 4, 5];
+
+for (var i = 0; i < numbers.length; i++) {
+  numbers[i] *= 2;
+}
+// numbers és ara [2, 4, 6, 8, 10]
+
+ +

Escurçar una array

+ +

L'exemple següent escurça l'array statesUS a una llargària de 50 en cas que la llargària actual sigui major de 50.

+ +
if (statesUS.length > 50) {
+  statesUS.length = 50;
+}
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial.
{{SpecName('ES5.1', '#sec-15.4.5.2', 'Array.length')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-properties-of-array-instances-length', 'Array.length')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Array")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/array/map/index.html b/files/ca/web/javascript/reference/global_objects/array/map/index.html new file mode 100644 index 0000000000..6f0dc1a0d4 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/array/map/index.html @@ -0,0 +1,317 @@ +--- +title: Array.prototype.map() +slug: Web/JavaScript/Referencia/Objectes_globals/Array/map +translation_of: Web/JavaScript/Reference/Global_Objects/Array/map +--- +
{{JSRef("Global_Objects", "Array")}}
+ +

Resum

+ +

El mètode map() crea una nova array amb els resultats de la crida a la funció proporcionada un cop per cada element.

+ +

Sintaxi

+ +
arr.map(callback[, thisArg])
+ +

Paràmetres

+ +
+
callback
+
Funció que produeix un element de la nova array, agafant tres arguments:
+
+
+
currentValue
+
El valor actual que és processat en l'array.
+
index
+
L'índex de l'element actual que és processat en l'array.
+
array
+
L'array sobre la qual es crida map.
+
+
+
thisArg
+
Opcional. Valor a usar com a this quan s'executa la funció.
+
+ +

Descripció

+ +

map crida a la funció passada callback un cop per cada element de l'array, en ordre, i construeix un nou array a partir dels resultats. Només s'invoca callback per a posicions de l'array que tinguin valors assignats, incloent undefined. No es crida per a elements no trobats (és a dir, elements que no han rebut mai un valor o bé elements que s'han eliminat).

+ +

S'invoca callback amb tres arguments: el valor de l'element, la posició de l'element a l'array, i l'array que s'està recorrent.

+ +

Si s'ha proporcionat el paràmetre thisArg a l'hora de cridar map, aquest es passarà a la funció callback com a valor per a this dins la funció. En qualsevol altre cas el valor utilitzat com a this serà {{jsxref("Global_Objects/undefined", "undefined")}}. El valor finalment observable des de callback es determinarà d'acord a les regles usuals per a determinar el valor de this dins una funció.

+ +

map no canvia l'array des del que es crida (tot i que callback, si s'invoca, pot fer-ho).

+ +

El rang d'elements processat per map s'estableix abans de la primera invocació de callback. Els elements que s'hagin afegit a l'array després d'haver cridat map no seran visitats per callback. Si es canvient els elements existents, o s'eliminen, el valor passat a callback serà el valor que tinguessin quan es va invocar map; els elements que s'han eliminat no es visitaran.

+ +

Exemples

+ +

Exemple: Generar un array de rels quadrades a partir d'un array de nombres

+ +

El codi següent agafa un array de nombres i crea un nou array que contindrà les rels quadrades dels nombres del primer array.

+ +
var nombres = [1, 4, 9];
+var rels = nombres.map(Math.sqrt);
+// rels ara val [1, 2, 3], nombres encara val [1, 4, 9]
+
+ +

Exemple: Utilitzar map per a canviar el format dels objectes d'un array

+ +

El codi següent agafa un array d'objectes i crea un nou array que conté els nous objectes, que tenen un format diferent.

+ +
var kvArray = [{key:1, value:10}, {key:2, value:20}, {key:3, value: 30}];
+var reformattedArray = kvArray.map(function(obj){
+   var rObj = {};
+   rObj[obj.key] = obj.value;
+   return rObj;
+});
+// reformattedArray ara val [{1:10}, {2:20}, {3:30}],
+// kvArray encara val [{key:1, value:10}, {key:2, value:20}, {key:3, value: 30}]
+
+ +

Exemple: Assignar els nombres d'un array al resultat d'una funció que espera un argument

+ +

El codi següent mostra com funciona map quan s'utilitza una funció que espera un argument. L'argument rebrà automàticament el valor de cada element de l'array mentre map recorre tot l'array original.

+ +
var nombres = [1, 4, 9];
+var dobles = nombres.map(function(num) {
+  return num * 2;
+});
+// dobles ara val [2, 8, 18]. nombres encara val [1, 4, 9]
+
+ +

Exemple: utilitzar map de forma genèrica

+ +

Aquest exemple mostra com utilitzar map en un {{jsxref("Global_Objects/String", "String")}} per a obtindre un array de bytes que representin el valor dels caràcters codificats amb ASCII:

+ +
var map = Array.prototype.map;
+var a = map.call('Hello World', function(x) { return x.charCodeAt(0); });
+// a ara val [72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]
+
+ +

Exemple: Utilitzar map de forma genèrica amb querySelectorAll

+ +

Aquest exemple mostra com iterar sobre una col·lecció d'objectes obtinguts mitjançant querySelectorAll. En aquest cas obtenim totes les opcions seleccionades de la web:

+ +
var elems = document.querySelectorAll('select option:checked');
+var values = Array.prototype.map.call(elems, function(obj) {
+  return obj.value;
+});
+
+ +

Exemple: Utilitzar map per a invertir un string

+ +
var str = '12345';
+Array.prototype.map.call(str, function(x) {
+  return x;
+}).reverse().join('');
+
+// Sortida: '54321'
+// Bonus: utilitzeu '===' per a comprovar si l'string original era un palindrom
+
+ +

Exemple: Un cas d'ús delicat

+ +

(inspirat per aquesta entrada de blog)

+ +

És comú utilitzar la funció callback amb un sol argument (l'element corresponent a la volta del bucle de l'array que s'està recorrent). Algunes funcions també solen requerir un sol argument, tot i que també poden acceptar arguements adicionals de forma opcional. Això pot produïr comportaments confussos.

+ +
// Considerem:
+['1', '2', '3'].map(parseInt);
+// Quan hom esperaria [1, 2, 3]
+// El resultat real serà [1, NaN, NaN]
+
+// parseInt s'utilitza normalment amb un argument, però admet dos.
+// El primer és una expressió mentre que el segon és el mòdul.
+// Array.prototype.map passa 3 arguments a la funció callback:
+// l'element, la posició de l'element i l'array
+// parseInt ignorarà el tercer argument, però no el segon,
+// provocant la confussió. Vegeu l'entrada del blog per a més detalls
+
+function returnInt(element) {
+  return parseInt(element, 10);
+}
+
+['1', '2', '3'].map(returnInt); // [1, 2, 3]
+// Actual result is an array of numbers (as expected)
+
+// A simpler way to achieve the above, while avoiding the "gotcha":
+['1', '2', '3'].map(Number); // [1, 2, 3]
+
+ +

Polyfill

+ +

map va ser afegit a l'standard ECMA-262 a la cinquena edició; degut a això aquest pot no estar present en algunes implementacions de l'standard. Es pot solventar aquest problema insertant el codi següent al principi dels scripts que el requereixin, permetent que implementacions on map no està disponible de forma nativa en puguin fer ús. Aquest algoritme és exactament l'especificat per l'ECMA-262, 5a edició, assument que {{jsxref("Global_Objects/Object", "Object")}}, {{jsxref("Global_Objects/TypeError", "TypeError")}}, i {{jsxref("Global_Objects/Array", "Array")}} tenen els seus valors originals i que callback.call s'evalua al valor original de {{jsxref("Function.prototype.call")}}.

+ +
// Production steps of ECMA-262, Edition 5, 15.4.4.19
+// Reference: http://es5.github.io/#x15.4.4.19
+if (!Array.prototype.map) {
+
+  Array.prototype.map = function(callback, thisArg) {
+
+    var T, A, k;
+
+    if (this == null) {
+      throw new TypeError(' this is null or not defined');
+    }
+
+    // 1. Assignem a O el resultat de cridar a ToObject passant-li el valor de |this|
+    //    com a argument.
+    var O = Object(this);
+
+    // 2. lenValue és el resultat de cridar el mètode intern
+    //    Get de O amb l'argument "length".
+    // 3. Assignem a len el valor d'executar ToUint32(lenValue).
+    var len = O.length >>> 0;
+
+    // 4. Si IsCallable(callback) és false, llencem l'excepció TypeError.
+    // Vegeu: http://es5.github.com/#x9.11
+    if (typeof callback !== 'function') {
+      throw new TypeError(callback + ' is not a function');
+    }
+
+    // 5. Si s'ha passat l'argument thisArg, l'assigment a T; en cas contrari T valdrà undefined.
+    if (arguments.length > 1) {
+      T = thisArg;
+    }
+
+    // 6. Assignem a A el nou array creat per l'expressió new Array(len)
+    //    on Array és el constructor standard de JavaScript amb aquest nom i
+    //    len és el valor de len.
+    A = new Array(len);
+
+    // 7. Assignem 0 a k
+    k = 0;
+
+    // 8. Repetim mentre k < len
+    while (k < len) {
+
+      var kValue, mappedValue;
+
+      // a. Assignem ToString(k) a Pk.
+      //   Això és implicit per a operands al cantó esquerra de l'operador in
+      // b. Assignem a kPresent el resultat de cridar el mètode intern HasProperty
+      //    de O amb l'argument Pk.
+      //   Es pot combinar aquest pas amb c
+      // c. Si kPresent és true, llavors
+      if (k in O) {
+
+        // i. Assignem a kValue el resultat de cridar el mètode intern
+        //    Get de O amb l'argument Pk.
+        kValue = O[k];
+
+        // ii. Assignem a mappedValue el resultat de cridar el mètode intern Call
+        //     de callback amb T com a valor de this i una llista d'arguments
+        //     que conté kValue, k, i O.
+        mappedValue = callback.call(T, kValue, k, O);
+
+        // iii. Cridem el mètode intern DefineOwnProperty de A amb els arguments
+        // Pk, Property Descriptor
+        // { Value: mappedValue,
+        //   Writable: true,
+        //   Enumerable: true,
+        //   Configurable: true },
+        // i false.
+
+        // En navegadors que suportin Object.defineProperty, utilitzeu el següent:
+        // Object.defineProperty(A, k, {
+        //   value: mappedValue,
+        //   writable: true,
+        //   enumerable: true,
+        //   configurable: true
+        // });
+
+        // Per a un millor suport de navegadors, utilitzeu el següent:
+        A[k] = mappedValue;
+      }
+      // d. incrementem k en 1.
+      k++;
+    }
+
+    // 9. retornem A
+    return A;
+  };
+}
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES5.1', '#sec-15.4.4.19', 'Array.prototype.map')}}{{Spec2('ES5.1')}}Definició inicial. Implementat a JavaScript 1.6.
{{SpecName('ES6', '#sec-array.prototype.map', 'Array.prototype.map')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.8")}}{{CompatIE("9")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.8")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Array.prototype.forEach()")}}
    • +
  • {{jsxref("Map")}} object
    • +
  • {{jsxref("Array.from()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/array/of/index.html b/files/ca/web/javascript/reference/global_objects/array/of/index.html new file mode 100644 index 0000000000..efe2d96abd --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/array/of/index.html @@ -0,0 +1,120 @@ +--- +title: Array.of() +slug: Web/JavaScript/Referencia/Objectes_globals/Array/of +translation_of: Web/JavaScript/Reference/Global_Objects/Array/of +--- +
{{JSRef}}
+ +

El mètode Array.of() crea una nova instància Array amb un nombre variable d'arguments, sense tenir en compte el nombre o el tipus d'arguments.

+ +

La diferència entre Array.of() i el constructor Array es troba en el maneig dels arguments sencers: Array.of(42) crea un array amb un sol element, 42, mentre que Array(42) crea un array amb 42 elements, Cadascun dels quals és undefined.

+ +

Sintaxi

+ +
Array.of(element0[, element1[, ...[, elementN]]])
+ +

Paràmetres

+ +
+
elementN
+
Elements a partir dels quals es crea l'array.
+
+ +

Descripció

+ +

Aquesta funció forma part del ECMAScript 6 estàndard. Per més informació vegeu proposta de l'Array.of i Array.from i Array.of polyfill.

+ +

Exemples

+ +
Array.of(1);         // [1]
+Array.of(1, 2, 3);   // [1, 2, 3]
+Array.of(undefined); // [undefined]
+
+ +

Polyfill

+ +

Executar el codi següent abans que cap altre codi crearà Array.of() en cas que no es trobi disponible de forma nativa.

+ +
if (!Array.of) {
+  Array.of = function() {
+    return Array.prototype.slice.call(arguments);
+  };
+}
+
+ +

Especificacions

+ + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-array.of', 'Array.of')}}{{Spec2('ES6')}}Definició inicial.
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome(45)}}{{CompatGeckoDesktop("25")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatChrome(39)}}{{CompatGeckoMobile("25")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Array")}}
    • +
  • {{jsxref("Array.from()")}}
    • +
  • {{jsxref("TypedArray.of()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/array/pop/index.html b/files/ca/web/javascript/reference/global_objects/array/pop/index.html new file mode 100644 index 0000000000..7d2ee3189f --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/array/pop/index.html @@ -0,0 +1,123 @@ +--- +title: Array.prototype.pop() +slug: Web/JavaScript/Referencia/Objectes_globals/Array/pop +translation_of: Web/JavaScript/Reference/Global_Objects/Array/pop +--- +
{{JSRef}}
+ +

El mètode pop() elimina l'últim element d'un array i retorna l'element eliminat.

+ +

Sintaxi

+ +
arr.pop()
+ +

Descripció

+ +

El mètode pop elimina l'últim element d'un array i retorna el seu valor.

+ +

pop és genèric de forma intencionada; aquest mètode pot ser {{jsxref("Function.call", "cridat", "", 1)}} i {{jsxref("Function.apply", "aplicat", "", 1)}} des de/a objectes que semblin arrays. Els objectes que no continguin la propietat length que reflecteixi l'última propietat d'una sèrie de propietats numèriques consecutives, on el nom de la primera propietat sigui el zero, poden comportar-se de forma imprevista.

+ +

Si es crida pop() en un array buit, es retornarà {{jsxref("undefined")}}.

+ +

Exemples

+ +

Esborrar l'últim element d'un array

+ +

El codi següent crea un array anomenat myFish que conté quatre elements, després elimina l'últim element.

+ +
var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
+
+console.log(myFish); // ['angel', 'clown', 'mandarin', 'sturgeon']
+
+var popped = myFish.pop();
+
+console.log(myFish); // ['angel', 'clown', 'mandarin' ]
+
+console.log(popped); // 'sturgeon'
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES3')}}{{Spec2('ES3')}}Definició inicial. Implementat a JavaScript 1.2.
{{SpecName('ES5.1', '#sec-15.4.4.6', 'Array.prototype.pop')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-array.prototype.pop', 'Array.prototype.pop')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome("1.0")}}{{CompatGeckoDesktop("1.7")}}{{CompatIE("5.5")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Array.prototype.push()")}}
    • +
  • {{jsxref("Array.prototype.shift()")}}
    • +
  • {{jsxref("Array.prototype.unshift()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/array/push/index.html b/files/ca/web/javascript/reference/global_objects/array/push/index.html new file mode 100644 index 0000000000..5770e5a10c --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/array/push/index.html @@ -0,0 +1,146 @@ +--- +title: Array.prototype.push() +slug: Web/JavaScript/Referencia/Objectes_globals/Array/push +translation_of: Web/JavaScript/Reference/Global_Objects/Array/push +--- +
{{JSRef}}
+ +

El mètode push() afegeix un o més elements al final d'un array i retorna el nou tamany de l'array.

+ +

Sintaxi

+ +
arr.push(element1, ..., elementN)
+ +

Paràmetres

+ +
+
elementN
+
Els elements que seran afegits al final de l'array.
+
+ +

Valor retornat

+ +

El nou valor de la propietat {{jsxref("Array.length", "length")}} de l'objecte del qual s'ha executat el mètode.

+ +

Descripció

+ +

El mètode push afegeix valors a un array.

+ +

push és genèric de manera intencionada. Es pot utilitzar aquest mètode amb {{jsxref("Function.call", "call()")}} i {{jsxref("Function.apply", "apply()")}} en objectes semblants a arrays. El mètode push depèn de la propietat length per a determinar on insertar els nous valors. Si la propietat length no es pot convertir en un nombre, la posició utilitzada serà la 0. Això inclou la posibilitat que no existeixi la propietat length, en aquest case es crearà automàticament la propietat length.

+ +

Els únics objectes semblants a arrays que inclou el nucli de JavaScript són els {{jsxref("Global_Objects/String", "strings", "", 1)}}, tot i que no admeten la aplicació d'aquest mètode ja que els strings són immutables.

+ +

Exemples

+ +

Afegir elements a un array

+ +

El codi següent crea un array anomenat esports que conté dos elements, llavors l'hi afegeix dos elements més. La variable total acaba revent el valor del nou tamany d e l'array.

+ +
var esports = ['futbol', 'basket'];
+var total = esports.push('badminton', 'natació');
+
+console.log(esports); // ['futbol', 'basket', 'badminton', 'natació']
+console.log(total);  // 4
+
+ +

Unir dos arrays

+ +

Aquest exemple utilitza {{jsxref("Function.apply", "apply()")}} per a afegir tots els elements d'un segon array.

+ +
var verdures = ['ceba', 'patata'];
+var mesVerdures = ['pastanaga', 'rabe'];
+
+// Uneix el segon array al primer
+// Equivalent a verdures.push('pastanaga', 'rabe');
+Array.prototype.push.apply(verdures , mesVerdures);
+
+console.log(verdures); // ['ceba', 'patata', 'pastanaga', 'rabe']
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES3')}}{{Spec2('ES3')}}Definició inicial. Implementat a JavaScript 1.2.
{{SpecName('ES5.1', '#sec-15.4.4.7', 'Array.prototype.push')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-array.prototype.push', 'Array.prototype.push')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome("1.0")}}{{CompatGeckoDesktop("1.7")}}{{CompatIE("5.5")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Array.prototype.pop()")}}
    • +
  • {{jsxref("Array.prototype.shift()")}}
    • +
  • {{jsxref("Array.prototype.unshift()")}}
    • +
  • {{jsxref("Array.prototype.concat()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/array/reduce/index.html b/files/ca/web/javascript/reference/global_objects/array/reduce/index.html new file mode 100644 index 0000000000..fa6253fd0c --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/array/reduce/index.html @@ -0,0 +1,304 @@ +--- +title: Array.prototype.reduce() +slug: Web/JavaScript/Referencia/Objectes_globals/Array/Reduce +translation_of: Web/JavaScript/Reference/Global_Objects/Array/Reduce +--- +
{{JSRef}}
+ +

El mètode reduce() aplica una funció sobre un acumulador i cada valor de l'array (de esquerra a dreta) perr a reduir-lo a un sol valor.

+ +

sintaxi

+ +
arr.reduce(callback[, valorInicial])
+ +

Parameters

+ +
+
callback
+
Funció a executar per a cada valor de l'array. Rep quatre arguments: +
+
valorPrevi
+
El valor retornat prèviament en l'última invocació de la funció callback, o bé valorInicial, si s'ha proporcionat (vegeu més abaix).
+
valorActual
+
L'element essent processat actualment a l'array.
+
index
+
La posició de l'element essent processat actualment a l'array.
+
array
+
L'array al qual s'ha cridat el mètode reduce.
+
+
+
valorInicial
+
Opcional. Valor a utilitzar com a primer argument a la primera crida de la funció callback.
+
+ +

Descripció

+ +

reduce executa la funció callback un cop per cada element present a l'array, excloent forats a l'array, i rep quatre arguments:

+ +
    +
  • valorPrevi
    • +
  • valorActual
    • +
  • index
    • +
  • array
    • +
+ +

El primer cop que es crida callback, valorAnterior i valorActual reben el valor de la forma descrita a continuació. Si es proporciona valorInicial a la crida de reduce, valorAnterior rebrà el valor de valorInicial i valorActual serà igual al primer valor de l'array. Si no es proporciona valorInicial, valorAnterior serà igual al primer valor de l'array i valorActual serà igual al segon.

+ +

Si l'array és buit i no s'ha proporcionat valorInicial, es llençarà {{jsxref("Global_Objects/TypeError", "TypeError")}}. Si l'array només té un element (sense importar la seva posició) i no s'ha proporcionat valorInicial, o si valorInicial s'ha proporcionat però l'array és buit, es retornarà aquest únic valor sense realitzar cap crida a callback.

+ +

Suposem que s'ha utilitzar reduce de la forma següent:

+ +
[0, 1, 2, 3, 4].reduce(function(previousValue, currentValue, index, array) {
+  return previousValue + currentValue;
+});
+
+ +

La funció callback es cridarà quatre cops, on els arguments i els valors a retornar es mostren a continuació:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 valorAnteriorvalorActualindexarrayvalor retornat
primera crida011[0, 1, 2, 3, 4]1
segons crida122[0, 1, 2, 3, 4]3
tercera crida333[0, 1, 2, 3, 4]6
quarta crida644[0, 1, 2, 3, 4]10
+ +

El valor retornat per reduce serà el de l'última invocació a callback (10).

+ +

Si es proporcionés el valor inicial com a segon argument de reduce, el resultat seria el següent:

+ +
[0, 1, 2, 3, 4].reduce(function(valorAnterior, valorActual, index, array) {
+  return valorAnterior + valorActual;
+}, 10);
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 valorAnteriorvalorActualindexarrayvalor retornat
primera crida1000[0, 1, 2, 3, 4]10
segona crida1011[0, 1, 2, 3, 4]11
tercera crida1122[0, 1, 2, 3, 4]13
quarta crida1333[0, 1, 2, 3, 4]16
cinquena crida1644[0, 1, 2, 3, 4]20
+ +

El valor de la crida final (20) és el retornat per la funció reduce.

+ +

Exemples

+ +

Sumar tots els valors d'un array

+ +
var total = [0, 1, 2, 3].reduce(function(a, b) {
+  return a + b;
+});
+// total == 6
+
+ +

Aplanar un array d'arrays

+ +
var flattened = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) {
+  return a.concat(b);
+}, []);
+// flattened is [0, 1, 2, 3, 4, 5]
+
+ +

Polyfill

+ +

Array.prototype.reduce va ser afegida a l'standard ECMA-262 a la cinquena edició; degut a això aquesta no estar present a totes les implementacions de l'standard. És possible simular-la en aquests casos mitjançant l'inserció del codi que trobareu a continuació a l'inici dels vostres scripts, tot permetent-vos utilitzar reduce en implementacions que no la suportin de forma nativa.

+ +
// Production steps of ECMA-262, Edition 5, 15.4.4.21
+// Reference: http://es5.github.io/#x15.4.4.21
+if (!Array.prototype.reduce) {
+  Array.prototype.reduce = function(callback /*, initialValue*/) {
+    'use strict';
+    if (this == null) {
+      throw new TypeError('Array.prototype.reduce called on null or undefined');
+    }
+    if (typeof callback !== 'function') {
+      throw new TypeError(callback + ' is not a function');
+    }
+    var t = Object(this), len = t.length >>> 0, k = 0, value;
+    if (arguments.length == 2) {
+      value = arguments[1];
+    } else {
+      while (k < len && !(k in t)) {
+        k++;
+      }
+      if (k >= len) {
+        throw new TypeError('Reduce of empty array with no initial value');
+      }
+      value = t[k++];
+    }
+    for (; k < len; k++) {
+      if (k in t) {
+        value = callback(value, t[k], k, t);
+      }
+    }
+    return value;
+  };
+}
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES5.1', '#sec-15.4.4.21', 'Array.prototype.reduce')}}{{Spec2('ES5.1')}}Definició inicial. Implementat a JavaScript 1.8.
{{SpecName('ES6', '#sec-array.prototype.reduce', 'Array.prototype.reduce')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9")}}{{CompatIE("9")}}{{CompatOpera("10.5")}}{{CompatSafari("4.0")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Array.prototype.reduceRight()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/array/reverse/index.html b/files/ca/web/javascript/reference/global_objects/array/reverse/index.html new file mode 100644 index 0000000000..2528cabdc5 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/array/reverse/index.html @@ -0,0 +1,119 @@ +--- +title: Array.prototype.reverse() +slug: Web/JavaScript/Referencia/Objectes_globals/Array/reverse +translation_of: Web/JavaScript/Reference/Global_Objects/Array/reverse +--- +
{{JSRef}}
+ +

El mètode reverse() inverteix un array. El primer element de l'array es converteix en l'últim element i l'últim element de l'array passa a ésser el primer.

+ +

Sintaxi

+ +
arr.reverse()
+ +

Paràmetres

+ +

Cap.

+ +

Descripció

+ +

El mètode reverse method transposa els elements de l'objecte array cridat en un lloc, mutant l'array, i retorna una referència de l'array.

+ +

Exemples

+ +

Revertir els elements d'un array

+ +

L'exemple següent crea un array myArray, que conté tres elements, després inverteix l'array.

+ +
var myArray = ['one', 'two', 'three'];
+myArray.reverse();
+
+console.log(myArray) // ['three', 'two', 'one']
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat en JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.4.4.8', 'Array.prototype.reverse')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-array.prototype.reverse', 'Array.prototype.reverse')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome("1.0")}}{{CompatGeckoDesktop("1.7")}}{{CompatIE("5.5")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Array.prototype.join()")}}
    • +
  • {{jsxref("Array.prototype.sort()")}}
    • +
  • {{jsxref("TypedArray.prototype.reverse()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/array/shift/index.html b/files/ca/web/javascript/reference/global_objects/array/shift/index.html new file mode 100644 index 0000000000..7b5fa1b330 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/array/shift/index.html @@ -0,0 +1,129 @@ +--- +title: Array.prototype.shift() +slug: Web/JavaScript/Referencia/Objectes_globals/Array/shift +translation_of: Web/JavaScript/Reference/Global_Objects/Array/shift +--- +
{{JSRef}}
+ +

El mètode shift() elimina el primer element d'un array i retorna l'element eliminat. Aquest mètode canvia el tamany de l'array.

+ +

Sintaxi

+ +
arr.shift()
+ +

Descripció

+ +

El mètode shift elimina l'element de l'array situat a la posició zero i mou la resta d'elements a la posició immediatament menor, tot seguit retorna el valor de l'element eliminat. Si la propietat {{jsxref("Array.length", "length")}} de l'array és 0, aquest mètode retornarà {{jsxref("undefined")}}.

+ +

shift és generic de forma intencionada; aquest mètode pot ser {{jsxref("Function.call", "cridat", "", 1)}} o bé {{jsxref("Function.apply", "aplicat", "", 1)}} a objectes que es comportin com a arrays. Els objectes que no continguin una propietat length que reflecteixi l'última propietat numèrica poden tenir un comportament erràtic.

+ +

Exemples

+ +

Eliminar un element d'un array

+ +

El codi següent mostra l'array myFish abans i després d'eliminar el seu primer element. També mostra l'element eliminat:

+ +
var myFish = ['angel', 'clown', 'mandarin', 'surgeon'];
+
+console.log('myFish abans: ' + myFish);
+// "myFish abans: angel,clown,mandarin,surgeon"
+
+var shifted = myFish.shift();
+
+console.log('myFish després: ' + myFish);
+// "myFish després: clown,mandarin,surgeon"
+
+console.log('Element eliminat: ' + shifted);
+// "Element eliminat: angel"
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES3')}}{{Spec2('ES3')}}Definició inicial. Implementat a JavaScript 1.2.
{{SpecName('ES5.1', '#sec-15.4.4.9', 'Array.prototype.shift')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-array.prototype.shift', 'Array.prototype.shift')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-array.prototype.shift', 'Array.prototype.shift')}}{{Spec2('ESDraft')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome("1.0")}}{{CompatGeckoDesktop("1.7")}}{{CompatIE("5.5")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Array.prototype.push()")}}
    • +
  • {{jsxref("Array.prototype.pop()")}}
    • +
  • {{jsxref("Array.prototype.unshift()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/array/slice/index.html b/files/ca/web/javascript/reference/global_objects/array/slice/index.html new file mode 100644 index 0000000000..d181f94a65 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/array/slice/index.html @@ -0,0 +1,268 @@ +--- +title: Array.prototype.slice() +slug: Web/JavaScript/Referencia/Objectes_globals/Array/slice +translation_of: Web/JavaScript/Reference/Global_Objects/Array/slice +--- +
{{JSRef}}
+ +

El mètode slice() retorna una còpia feble d'una porció d'un array en forma d'un nou objecte array.

+ +

Sintaxi

+ +
arr.slice([inici[, fi]])
+ +

Paràmetres

+ +
+
inici
+
La posició (tenint en compte que zero correspon a la primera posició) a partir de la qual començarà l'extracció.
+
Si inici és negatiu, la posició correspondrà a la posicó final de la seqüència menys el valor proporcionat. slice(-2) extreu els últims dos elements de la seqüència.
+
Si inici és undefined, slice començarà a la posició 0.
+
fi
+
La posició (contant des de zero) en la qual finalitzarà l'extracció. slice extraurà fins a aquesta posicó, sense incloure-la.
+
slice(1,4) extrau des del segon element fins al quart element (és a dir, els elements pertanyents a les posicions 1, 2 i 3).
+
Si fi és negatiu, la posició correspondrà a la posicó final de la seqüència menys el valor proporcionat. slice(2,-1) extrau des del tercer element fins al penúltim element de la seqüència.
+
Si s'omet el paràmetre fi, slice extreurà fins al final de la seqüència (arr.length).
+
+ +

Descripció

+ +

slice no altera l'array original. Retorna una copia feble dels elements de l'array original. Els elements de l'array original són copiats a l'array resultat de la forma següent:

+ +
    +
  • Per a referències a objectes (no l'objecte en si), slice copia la referència dins el nou array. Tant l'array original com el resultat referenciaran el mateix objecte. Si l'objecte referenciat canvia, aquests canvis seran visibles a ambdos arrays.
    • +
  • Per a strings i nombres (no els objectes {{jsxref("String")}} i {{jsxref("Number")}}), slice copia els strings i nombres a l'array resultant. Els canvis al string o nombre en un dels arrays no afectaran a l'altre array.
    • +
+ +

Si s'afegeix un nou element a un dels dos arrays, l'altre array no es veu afectat.

+ +

Exemples

+ +

Retornar una part d'un array existent

+ +
var fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'];
+var citrus = fruits.slice(1, 3);
+
+// citrus conté ['Orange','Lemon']
+
+ +

Utilitzar slice

+ +

A l'exemple següent slice crea un ou array newCar, a partir de myCar. Ambdos inclouen una referència a l'objecte myHonda. Quan el color de myHonda canvia a lila, ambdos arrays reflecteixen aquest canvi.

+ +
// Ús de slice, creem newCar a partir de myCar.
+var myHonda = { color: 'red', wheels: 4, engine: { cylinders: 4, size: 2.2 } };
+var myCar = [myHonda, 2, 'cherry condition', 'purchased 1997'];
+var newCar = myCar.slice(0, 2);
+
+// Mostrem els valors de myCar, newCar, i el color de myHonda
+//  referenciat a ambdos arrays.
+console.log('myCar = ' + myCar.toSource());
+console.log('newCar = ' + newCar.toSource());
+console.log('myCar[0].color = ' + myCar[0].color);
+console.log('newCar[0].color = ' + newCar[0].color);
+
+// Canviem el color de myHonda.
+myHonda.color = 'purple';
+console.log('The new color of my Honda is ' + myHonda.color);
+
+// Mostrem el color de myHonda referenciat a ambdos arrays.
+console.log('myCar[0].color = ' + myCar[0].color);
+console.log('newCar[0].color = ' + newCar[0].color);
+
+ +

Aquest script mostra:

+ +
myCar = [{color:'red', wheels:4, engine:{cylinders:4, size:2.2}}, 2,
+         'cherry condition', 'purchased 1997']
+newCar = [{color:'red', wheels:4, engine:{cylinders:4, size:2.2}}, 2]
+myCar[0].color = red
+newCar[0].color = red
+The new color of my Honda is purple
+myCar[0].color = purple
+newCar[0].color = purple
+
+ +

Objectes compatibles amb arrays

+ +

El mètode slice també es pot utilitzar per a convertir objectes compatibles amb arrays / col·leccions a un nou Array. Simplement hem de vincular el mètode a l'objecte. L'objecte {{jsxref("Functions/arguments", "arguments")}} dins una funció és un exemple d'objecte 'compatible amb arrays'.

+ +
function list() {
+  return Array.prototype.slice.call(arguments);
+}
+
+var list1 = list(1, 2, 3); // [1, 2, 3]
+
+ +

Podem vincular el mètode a l'objecte mitjançant la funció .call proporcionada per {{jsxref("Function.prototype")}}, també podem reduir-la a [].slice.call(arguments) en comptes de Array.prototype.slice.call. També podem simplificar-ho utilitzant la funció {{jsxref("Function.prototype.bind", "bind")}}.

+ +
var unboundSlice = Array.prototype.slice;
+var slice = Function.prototype.call.bind(unboundSlice);
+
+function list() {
+  return slice(arguments);
+}
+
+var list1 = list(1, 2, 3); // [1, 2, 3]
+
+ +

Oferint un comportament similar entre navegadors

+ +

Tot i que segons la especificació els objectes de l'hoste (com ara els objectes DOM) no requereixen seguir el comportament de Mozilla al ser convertits mitjançant Array.prototype.slice i, de fet les versions de Internet Explorer anteriors a la 9 no ho fan, les versions a partir de la 9 si que suporten l'ús d'aquesta funció de compatibilitat, permetent un comportament fiable entre navegadors. Mentre els altres navegadors moderns continuin oferint aquesta habilitat, tal i com ara fan IE, Mozilla, Chrome, Safari i Opera, els desenvolupadors que llegeixin codi sobre slice (suportat pel DOM) que es recolzi en aquesta funció de compatibilitat no tenen que patir per la semàntica; poden fiar-se de la semàntica descrita per a proporcionar el comportament que ara sembla standard de facto (La funció de compatibilitat també permet que el IE funcioni quan es passa com a segon argument de slice() un valor explícit de {{jsxref("null")}}/{{jsxref("undefined")}} ja que versions anteriors de IE no ho permetien però tots els nous navegadors, incloent IE >= 9, si que ho permeten.)

+ +
/**
+ * Shim for "fixing" IE's lack of support (IE < 9) for applying slice
+ * on host objects like NamedNodeMap, NodeList, and HTMLCollection
+ * (technically, since host objects have been implementation-dependent,
+ * at least before ES6, IE hasn't needed to work this way).
+ * Also works on strings, fixes IE < 9 to allow an explicit undefined
+ * for the 2nd argument (as in Firefox), and prevents errors when
+ * called on other DOM objects.
+ */
+(function () {
+  'use strict';
+  var _slice = Array.prototype.slice;
+
+  try {
+    // Can't be used with DOM elements in IE < 9
+    _slice.call(document.documentElement);
+  } catch (e) { // Fails in IE < 9
+    // This will work for genuine arrays, array-like objects,
+    // NamedNodeMap (attributes, entities, notations),
+    // NodeList (e.g., getElementsByTagName), HTMLCollection (e.g., childNodes),
+    // and will not fail on other DOM objects (as do DOM elements in IE < 9)
+    Array.prototype.slice = function(begin, end) {
+      // IE < 9 gets unhappy with an undefined end argument
+      end = (typeof end !== 'undefined') ? end : this.length;
+
+      // For native Array objects, we use the native slice function
+      if (Object.prototype.toString.call(this) === '[object Array]'){
+        return _slice.call(this, begin, end);
+      }
+
+      // For array like object we handle it ourselves.
+      var i, cloned = [],
+        size, len = this.length;
+
+      // Handle negative value for "begin"
+      var start = begin || 0;
+      start = (start >= 0) ? start : Math.max(0, len + start);
+
+      // Handle negative value for "end"
+      var upTo = (typeof end == 'number') ? Math.min(end, len) : len;
+      if (end < 0) {
+        upTo = len + end;
+      }
+
+      // Actual expected size of the slice
+      size = upTo - start;
+
+      if (size > 0) {
+        cloned = new Array(size);
+        if (this.charAt) {
+          for (i = 0; i < size; i++) {
+            cloned[i] = this.charAt(start + i);
+          }
+        } else {
+          for (i = 0; i < size; i++) {
+            cloned[i] = this[start + i];
+          }
+        }
+      }
+
+      return cloned;
+    };
+  }
+}());
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES3')}}{{Spec2('ES3')}}Definició inicial. Implementat a JavaScript 1.2.
{{SpecName('ES5.1', '#sec-15.4.4.10', 'Array.prototype.slice')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-array.prototype.slice', 'Array.prototype.slice')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-array.prototype.slice', 'Array.prototype.slice')}}{{Spec2('ESDraft')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome("1.0")}}{{CompatGeckoDesktop("1.7")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Function.prototype.call()")}}
    • +
  • {{jsxref("Function.prototype.bind()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/array/some/index.html b/files/ca/web/javascript/reference/global_objects/array/some/index.html new file mode 100644 index 0000000000..7abc1ed76d --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/array/some/index.html @@ -0,0 +1,213 @@ +--- +title: Array.prototype.some() +slug: Web/JavaScript/Referencia/Objectes_globals/Array/some +translation_of: Web/JavaScript/Reference/Global_Objects/Array/some +--- +
{{JSRef}}
+ +

El mètode some() comprova si un algun element de l'array passa el test implementat per la funció proporcionada com a argument.

+ +

Sintaxi

+ +
arr.some(callback[, thisArg])
+ +

Paràmetres

+ +
+
callback
+
Funció utilitzada com a test per a cada element, rep tres arguments: +
+
valorActual
+
L'element de l'array que està sent avaluat.
+
posició
+
La posició que l'element passat al primer paràmetre ocupa dins l'array.
+
array
+
L'array des del que s'ha cridat el mètode some().
+
+
+
thisArg
+
Opcional. Valor que valdrà la variable this quan s'estigui executant la funció callback.
+
+ +

Valor retornat

+ +

Aquesta funció retorna true si la funció callback retorna true per a almenys un element de l'array; en qualsevol altre cas retorna false.

+ +

Descripció

+ +

some() executa la funció callback un cop per a cada element present a l'array fins que troba un per al qual callback retorna true. Si es troba aquest element, some() retorna true immediatament. En cas contrari some() retornarà false. Només s'invocarà la funció callback en les posicions de l'array que tinguin un valor assignat, és a dir, mai es cridarà per a posicions que han estat esborrades o el valor de les quals no ha estat mai assignat.

+ +

S'invoca callback amb tres arguments: el valor de l'element, la posició de l'element dins l'array, i l'objecte array que es recorrerà.

+ +

Si es proporciona el paràmetre thisArg al mètode some(), aquest es passarà a callback quan s'invoqui, i serà el valor que mostrarà la variable this. En cas contrari, s'utilitzarà el valor {{jsxref("undefined")}} com a valor per a this. El valor de this observable en última instància per callback es determinarà d'acord a les regles per a determinar el valor de this observat per una funció.

+ +

some() no mutarà l'array quan sigui cridada.

+ +

El rang d'elements processat per some() és determinat abans de la primera invocació de callback. Els elements que s'afegeixin a l'array després de la crida a some() no seran visitats per callback. Si el valor d'un element encara no visitat canvia, el valor que es passarà a callback serà el valor que tingui aquest element a l'hora de visitar-lo; els elements que s'esborrin no es visitaran.

+ +

Exemples

+ +

Comprovar el valor dels elements d'un array

+ +

L'exemple següent comprova si el valor d'algun element de l'array es major que 10.

+ +
function isBiggerThan10(element, posicio, array) {
+  return element > 10;
+}
+[2, 5, 8, 1, 4].some(isBiggerThan10);  // false
+[12, 5, 8, 1, 4].some(isBiggerThan10); // true
+
+ +

Comprovar els elements d'un array utilitzant funcions fletxa

+ +

Les funcions fletxa ofereixen una sintaxi reduïda per a realitzar el mateix test.

+ +
[2, 5, 8, 1, 4].some(elem => elem > 10);  // false
+[12, 5, 8, 1, 4].some(elem => elem > 10); // true
+
+ +

Comprovar si existeix un valor en un array

+ +

L'exemple següent retorna cert si existeix un elmeent donat dins un array

+ +
var fruits = ['poma', 'platan', 'mango', 'guava'];
+
+function checkAvailability(arr, val) {
+    return arr.some(function(arrVal) {
+        return val === arrVal;
+    });
+}
+
+checkAvailability(fruits, 'kela'); //false
+checkAvailability(fruits, 'platan'); //true
+ +

Comprovar si existeix un valor amb funcions fletxa

+ +
var fruits = ['poma', 'platan', 'mango', 'guava'];
+
+function checkAvailability(arr, val) {
+    return arr.some(arrVal => val === arrVal);
+}
+
+checkAvailability(fruits, 'kela'); //false
+checkAvailability(fruits, 'platan'); //true
+ +

Polyfill

+ +

some() va ser afegida  al standard ECMA-262 en la cinquena edició; és per això que pot no estar disponible en certes implementacions del standard. Es pot proporcionar la seva funcionalitat inserint l'script següent a l'inici dels vostres scripts, permetent l'ús de some() en implementacions que no la suporten de forma nativa. Aquest algoritme és exactament l'especificat a l'ECMA-262, cinquena edició, assumint que {{jsxref("Object")}} i {{jsxref("TypeError")}} tenen els valors originals i que fun.call es correspon amb el valor original de {{jsxref("Function.prototype.call()")}}.

+ +
// Production steps of ECMA-262, Edition 5, 15.4.4.17
+// Reference: http://es5.github.io/#x15.4.4.17
+if (!Array.prototype.some) {
+  Array.prototype.some = function(fun/*, thisArg*/) {
+    'use strict';
+
+    if (this == null) {
+      throw new TypeError('Array.prototype.some called on null or undefined');
+    }
+
+    if (typeof fun !== 'function') {
+      throw new TypeError();
+    }
+
+    var t = Object(this);
+    var len = t.length >>> 0;
+
+    var thisArg = arguments.length >= 2 ? arguments[1] : void 0;
+    for (var i = 0; i < len; i++) {
+      if (i in t && fun.call(thisArg, t[i], i, t)) {
+        return true;
+      }
+    }
+
+    return false;
+  };
+}
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES5.1', '#sec-15.4.4.17', 'Array.prototype.some')}}{{Spec2('ES5.1')}}Definició inicial. Implementat a JavaScript 1.6.
{{SpecName('ES6', '#sec-array.prototype.some', 'Array.prototype.some')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-array.prototype.some', 'Array.prototype.some')}}{{Spec2('ESDraft')}}
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.8")}}{{CompatIE("9")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.8")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Array.prototype.forEach()")}}
    • +
  • {{jsxref("Array.prototype.every()")}}
    • +
  • {{jsxref("TypedArray.prototype.some()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/array/splice/index.html b/files/ca/web/javascript/reference/global_objects/array/splice/index.html new file mode 100644 index 0000000000..c1abada8d9 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/array/splice/index.html @@ -0,0 +1,171 @@ +--- +title: Array.prototype.splice() +slug: Web/JavaScript/Referencia/Objectes_globals/Array/splice +translation_of: Web/JavaScript/Reference/Global_Objects/Array/splice +--- +
{{JSRef}}
+ +

El mètode splice() modifica el contingut d'un array eliminant elements ja existents i/o afegint-ne de nous.

+ +

Sintaxi

+ +
array.splice(inici, comptadorEliminar[, item1[, item2[, ...]]])
+
+ +

Paràmetres

+ +
+
inici
+
La posició a partir de la qual es començarà a modificar l'array (considerant 0 com a primera posició). Si s'especifca un nombre major que la longitud de l'array, la posició d'inici real esdevindrà la longitud de l'array. Si s'especifica un nombre negatiu, la posició d'inici serà el valor absolut del nombre especificat contant des del final de l'array.
+
comptadorEliminar
+
Un nombre sencer que indica el nombre d'elements que s'eliminaran. Si comptadorEliminar és 0 no s'eliminarà cap element. En aquest cas s'hauria d'especificar al menys un nou element. Si comptadorEliminar és major que el nombre d'elements de l'array des de la posició inici fins el final de l'array tots els elements des d'inici fins al final de l'array seran eliminats.
+
Si s'omet comptadorEliminar aquest rebrà un valor per defecte igual a (arr.length - inici).
+
item1, item2, ...
+
Els elements que s'afegiran a l'array, començant a la posició inici. Si no s'especifcia cap element, splice() només eliminarà elements de l'array.
+
+ +

Valor retornat

+ +

Un array que conté els elements eliminats. Si només s'ha eliminat un element es retornarà un array amb un sol element. Si no s'ha eliminat cap element retornarà un array buit.

+ +

Descripció

+ +

Si s'especifica un nombre diferent d'elements a eliminar del nombre d'elements a inserir la longitud de l'array canviarà al final de la crida.

+ +

Exemples

+ +

Utilitzar splice()

+ +

L'script seguent ilustra l'ús de splice():

+ +
var myFish = ['angel', 'clown', 'mandarin', 'surgeon'];
+
+// eliminem 0 elements a partir de la posició 2, i inserim 'drum'
+var eliminats = myFish.splice(2, 0, 'drum');
+// myFish is ['angel', 'clown', 'drum', 'mandarin', 'surgeon']
+// eliminats va [], no s'han eliminat elements
+
+// myFish val ['angel', 'clown', 'drum', 'mandarin', 'surgeon']
+// eliminem 1 element a la posició 3
+eliminats = myFish.splice(3, 1);
+// myFish val ['angel', 'clown', 'drum', 'surgeon']
+// eliminats val ['mandarin']
+
+// myFish val ['angel', 'clown', 'drum', 'surgeon']
+// Eliminem 1 element a la posició 2, i inserim 'trumpet'
+eliminats = myFish.splice(2, 1, 'trumpet');
+// myFish val ['angel', 'clown', 'trumpet', 'surgeon']
+// eliminats val ['drum']
+
+// myFish val ['angel', 'clown', 'trumpet', 'surgeon']
+// eliminem 2 elements de la posició 0, i inserim 'parrot', 'anemone' i 'blue'
+eliminats = myFish.splice(0, 2, 'parrot', 'anemone', 'blue');
+// myFish val ['parrot', 'anemone', 'blue', 'trumpet', 'surgeon']
+// eliminats val ['angel', 'clown']
+
+// myFish val ['parrot', 'anemone', 'blue', 'trumpet', 'surgeon']
+// eliminem 2 elements de la posició 3
+eliminats = myFish.splice(myFish.length -3, 2);
+// myFish val ['parrot', 'anemone', 'surgeon']
+// eliminats val ['blue', 'trumpet']
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES3')}}{{Spec2('ES3')}}Definició inicial. Implementat a JavaScript 1.2.
{{SpecName('ES5.1', '#sec-15.4.4.12', 'Array.prototype.splice')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-array.prototype.splice', 'Array.prototype.splice')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-array.prototype.splice', 'Array.prototype.splice')}}{{Spec2('ESDraft')}}
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome("1.0")}}{{CompatGeckoDesktop("1.7")}}{{CompatIE("5.5")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Compatibilitat amb versions anteriors

+ +

A JavaScript 1.2 el mètode splice() retornava l'element eliminat si només s'havia eliminat un sol element (és a dir, si el valor del paràmetre comptadorEliminar era 1); en qualsevol altre cas retornava un array contenit els elements eliminats.

+ +
+

Nota: L'últim navegador en utilitzar JavaScript 1.2 va ser el Netscape Navigator 4, així que podeu asumir que splice() sempre retornarà un array. Aquest és el cas quan un objecte JavaScript disposa de la propietat length i un mètode splice(),{{domxref("console.log()")}} el tracta com si fós un objecte array. Comprovar-ho amb instanceof Array retornarà false.

+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Array.prototype.push()", "push()")}} / {{jsxref("Array.prototype.pop()", "pop()")}} — afegir/eliminar elements del final d'un array
    • +
  • {{jsxref("Array.prototype.unshift()", "unshift()")}} / {{jsxref("Array.prototype.shift()", "shift()")}} — afegir/eliminar elements de l'inici d'un array
    • +
  • {{jsxref("Array.prototype.concat()", "concat()")}} — retorna un nou array format a partir d'aquest array i d'altres array(s) i/o valor(s)
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/boolean/index.html b/files/ca/web/javascript/reference/global_objects/boolean/index.html new file mode 100644 index 0000000000..83f2597df9 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/boolean/index.html @@ -0,0 +1,196 @@ +--- +title: Boolean +slug: Web/JavaScript/Referencia/Objectes_globals/Boolean +translation_of: Web/JavaScript/Reference/Global_Objects/Boolean +--- +
{{JSRef("Global_Objects", "Boolean")}}
+ +

Resum

+ +

L'objecte Boolean és un objecte que embolcalla valors booleans.

+ +

Constructor

+ +
new Boolean([valors])
+ +

Paràmetres

+ +
+
valors
+
Opcional. El valor inicial de l'objecte Boolean.
+
+ +

Descripció

+ +

El valor passat com a primer paràmetre es converteix a un valor booleà, en cas necesari. Si és omés o si és 0, -0, {{jsxref("Global_Objects/null", "null")}}, false, {{jsxref("Global_Objects/NaN", "NaN")}}, {{jsxref("Global_Objects/undefined", "undefined")}}, o la cadena de caràcters buida (""), l'objecte tindrà el valor inicial false. Tots els altres valors, incloent qualsevol objecte o la cadena de caràcters "false", crea un objecte amb el valor inicial de true.

+ +

No confoneu els valors Boolean primitius true i false amb els valors true i false de l'objecte Boolean.

+ +

Qualsevol objecte el valor del qual no sigui {{jsxref("Global_Objects/undefined", "undefined")}} o {{jsxref("Global_Objects/null", "null")}}, incloent un objecte de tipus Boolean el valor del qual sigui false, evalua a true quan es passa a una sentència condicional. Per exemple, la condició en la següent sentència {{jsxref("Statements/if...else", "if")}} evalua a true:

+ +
x = new Boolean(false);
+if (x) {
+  // aquest codi s'executarà
+}
+
+ +

Aquest comportament no s'aplica a les primitives de tipus booleà. Per exemple, la condició en la següent sentència {{jsxref("Statements/if...else", "if")}} evalua a false:

+ +
x = false;
+if (x) {
+  // aquest codi no s'executarà
+}
+
+ +

No creeu una instància de Boolean per a convertir un valor no booleà a un valor booleà. En comptes d'això utilitzeu Boolean com una funció per a realitzar aquesta tasca:

+ +
x = Boolean(expression);     // utilitzar preferentment
+x = new Boolean(expression); // no ho utilitzeu
+
+ +

Si s'especifica qualsevol objecte, inclòs un objecte Boolean el valor del qual sigui false, com a valor inicial per a un objecte Boolean, el nou objecte Boolean tindrà un valor de true.

+ +
myFalse = new Boolean(false);   // valor inicial false
+g = new Boolean(myFalse);       // valor inicial true
+myString = new String('Hello'); // objecte de tipus String
+s = new Boolean(myString);      // valor inicial true
+
+ +

No utilitzeu un objecte Boolean quan podríeu utilitzar un valor primitiu booleà.

+ +

Propietats

+ +
+
Boolean.length
+
La propietat Length retorna el valor de 1.
+
{{jsxref("Boolean.prototype")}}
+
Representa el prototip pel constructor Boolean.
+
+ +

{{jsOverrides("Function", "Properties", "prototype")}}

+ +

Mètodes

+ +

L'objecte Boolean no té mètodes propis. Hereta, però, alguns mètodes a través de la cadena de prototipus:

+ +
{{jsOverrides("Function", "Methods")}}
+ +

Instàncies de Boolean

+ +

Totes les instàncies de Boolean hereten de {{jsxref("Boolean.prototype")}}. Com tots els constructors, el prototipus de l'objecte dicta les propietats i mètodes que heretaran les instàncies.

+ +

Propietats

+ +
{{page('/ca/docs/Web/JavaScript/Reference/Global_Objects/Boolean/prototype', 'Properties')}}
+ +

Mètodes

+ +
{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean/prototype', 'Methods')}}
+ +

Exemples

+ +

Exemple: Crear objectes Boolean amb un valor inicial de false

+ +
var bNoParam = new Boolean();
+var bZero = new Boolean(0);
+var bNull = new Boolean(null);
+var bEmptyString = new Boolean('');
+var bfalse = new Boolean(false);
+
+ +

Exemple: Crear objectes Boolean amb un valor inicial de true

+ +
var btrue = new Boolean(true);
+var btrueString = new Boolean('true');
+var bfalseString = new Boolean('false');
+var bSuLin = new Boolean('Su Lin');
+var bArrayProto = new Boolean([]);
+var bObjProto = new Boolean({});
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.6', 'Boolean')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-boolean-objects', 'Boolean')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatIE("6.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ + diff --git a/files/ca/web/javascript/reference/global_objects/boolean/tosource/index.html b/files/ca/web/javascript/reference/global_objects/boolean/tosource/index.html new file mode 100644 index 0000000000..6b6a1b8b2b --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/boolean/tosource/index.html @@ -0,0 +1,98 @@ +--- +title: Boolean.prototype.toSource() +slug: Web/JavaScript/Referencia/Objectes_globals/Boolean/toSource +translation_of: Web/JavaScript/Reference/Global_Objects/Boolean/toSource +--- +
{{JSRef("Objectes_standard", "Boolean")}} {{non-standard_header}}
+ +

Resum

+ +

El mètode toSource() retorna una cadena de caràcters que representa el codi font de l'objecte.

+ +

Sintaxi

+ +
booleanObj.toSource()
+Boolean.toSource()
+ +

Paràmetres

+ +

Cap.

+ +

Descripció

+ +

El mètode toSource retorna els valors següents:

+ +
    +
  • Per a objectes {{jsxref("Objectes_standard/Boolean", "Boolean")}} de la implementació de JavaScript, toSource retorna la següent cadena de caràcters indicant que el codi font no està disponible: + + 
    function Boolean() {
+    [native code]
+}
+
    +
    • +
  • Per a instàncies de {{jsxref("Objectes_standard/Boolean", "Boolean")}}, toSource retorna una cadena de caràcters que representa el codi font.
    • +
+ +

Aquest mètode normalment és utilitzat internament per JavaScript i no explícitament al codi.

+ +

Especificacions

+ +

No forma part de cap standard. Implementat a JavaScript 1.3.

+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Object.prototype.toSource()")}} {{non-standard_inline}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/boolean/tostring/index.html b/files/ca/web/javascript/reference/global_objects/boolean/tostring/index.html new file mode 100644 index 0000000000..90da6cba3a --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/boolean/tostring/index.html @@ -0,0 +1,121 @@ +--- +title: Boolean.prototype.toString() +slug: Web/JavaScript/Referencia/Objectes_globals/Boolean/toString +translation_of: Web/JavaScript/Reference/Global_Objects/Boolean/toString +--- +
{{JSRef("Global_Objects", "Boolean")}}
+ +

Resum

+ +

El mètode toString() retorna una cadena de caràcters que representa l'objecte Boolean.

+ +

Sintaxi

+ +
bool.toString()
+ +

Paràmetres

+ +

Cap.

+ +

Descripció

+ +

L'objecte {{jsxref("Objectes_standard/Boolean", "Boolean")}} sobreescriu el mètode toString de l'objecte {{jsxref("Objectes_standard/Object", "Object")}}; no hereta {{jsxref("Object.prototype.toString()")}}. Per a objectes de tipus Boolean, el mètode toString retorna una cadena de caràcters que representa l'objecte.

+ +

JavaScript crida el mètode toString de manera automàtica quan aquest ha de ser representat mitjançant text o bé quan un {{jsxref("Objectes_standard/Boolean", "Boolean")}} és referenciat en una concatenació de cadenes de caràcters.

+ +

Per a objectes i valors de tipus {{jsxref("Objectes_standard/Boolean", "Boolean")}}, el mètode toString incorporat retorna la cadena de caràcters "true" o bé "false", depenent del valor de l'objecte booleà.

+ +

Exemples

+ +

Exemple: Utilitzar toString

+ +

Al codi següent flag.toString() retorna "true":

+ +
var flag = new Boolean(true);
+var myVar = flag.toString();
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
ECMAScript 1a Edició. Implementat a JavaScript 1.1StandardDefinició inicial.
{{SpecName('ES5.1', '#sec-15.6.4.2', 'Boolean.prototype.toString')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-boolean.prototype.tostring', 'Boolean.prototype.toString')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Object.prototype.toString()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/boolean/valueof/index.html b/files/ca/web/javascript/reference/global_objects/boolean/valueof/index.html new file mode 100644 index 0000000000..f99fd3c6c0 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/boolean/valueof/index.html @@ -0,0 +1,117 @@ +--- +title: Boolean.prototype.valueOf() +slug: Web/JavaScript/Referencia/Objectes_globals/Boolean/valueOf +translation_of: Web/JavaScript/Reference/Global_Objects/Boolean/valueOf +--- +
{{JSRef("Global_Objects", "Boolean")}}
+ +

Resum

+ +

El mètode valueOf() retorna el valor primitiu d'un objecte {{jsxref("Objectes_standard/Boolean", "Boolean")}}.

+ +

Sintaxi

+ +
bool.valueOf()
+ +

Paràmetres

+ +

Cap.

+ +

Descripció

+ +

El mètode valueOf pertanyent a {{jsxref("Objectes_standard/Boolean", "Boolean")}} retorna el valor primitiu d'un objecte o literal {{jsxref("Objectes_standard/Boolean", "Boolean")}} com a tipus de dada Boolean.

+ +

Aquest mètode normalment és utilitzat internament per JavaScript i no explícitament als scripts.

+ +

Exemples

+ +

Exemple: Utilitzar valueOf

+ +
x = new Boolean();
+myVar = x.valueOf(); // assigna false a myVar
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.6.4.3', 'Boolean.prototype.valueOf')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-boolean.prototype.valueof', 'Boolean.prototype.valueOf')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Object.prototype.valueOf()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/dataview/prototype/index.html b/files/ca/web/javascript/reference/global_objects/dataview/prototype/index.html deleted file mode 100644 index ebd6cbe729..0000000000 --- a/files/ca/web/javascript/reference/global_objects/dataview/prototype/index.html +++ /dev/null @@ -1,147 +0,0 @@ ---- -title: DataView.prototype -slug: Web/JavaScript/Reference/Global_Objects/DataView/prototype -translation_of: Web/JavaScript/Reference/Global_Objects/DataView -translation_of_original: Web/JavaScript/Reference/Global_Objects/DataView/prototype ---- -
{{JSRef}}
- -

La propietat DataView.prototype representa el prototip de l'objecte {{jsxref("DataView")}}.

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

Descripció

- -

Les instàncies DataView hereten de DataView.prototype. Com passa amb tots els constructors, podeu canviar l'objecte prototip del constructor per produir canvis a totes les instàncies DataView.

- -

Propietats

- -
-
DataView.prototype.constructor
-
Especifica la funció que crea un prototip de l'objecte. El valor inicial és el constructor integrat estàndard DataView.
-
{{jsxref("DataView.prototype.buffer")}} {{readonlyInline}}
-
L'{{jsxref("ArrayBuffer")}} referenciat per aquesta vista. Fixat en el temps de construcció i per tant és només de lectura.
-
{{jsxref("DataView.prototype.byteLength")}} {{readonlyInline}}
-
La llargària (en bytes) d'aquesta vista des del començament del seu {{jsxref("ArrayBuffer")}}. Fixat en el temps de construcció i per tant és només de lectura.
-
{{jsxref("DataView.prototype.byteOffset")}} {{readonlyInline}}
-
La posició (en bytes) d'aquesta vista des de l'inici del seu {{jsxref("ArrayBuffer")}}. Fixat en el temps de construcció i per tant és només de lectura.
-
- -

Mètodes

- -

Lectura

- -
-
{{jsxref("DataView.prototype.getInt8()")}}
-
Obté un nombre sencer (byte) de 8 bits amb signe al byte de posició especificat des de l'inici de la vista.
-
{{jsxref("DataView.prototype.getUint8()")}}
-
Obté un nombre sencer sense signe de 8 bits (unsigned byte) al byte de posició especificat des de l'inici de la vista.
-
{{jsxref("DataView.prototype.getInt16()")}}
-
Obté un nombre sencer de 16 bits (short) al byte de posició especificat des de l'inici de la vista.
-
{{jsxref("DataView.prototype.getUint16()")}}
-
Obté un nombre sencer sense signe de 16 bits (unsigned short) al byte de posició especificat des de l'inici de la vista.
-
{{jsxref("DataView.prototype.getInt32()")}}
-
Obté un nombre sencer de 32 bits (long) al byte de posició especificat des de l'inici de la vista.
-
{{jsxref("DataView.prototype.getUint32()")}}
-
Obté un nombre sencer sense signe de 31 bits (unsigned long) al byte de posició especificat des de l'inici de la vista.
-
{{jsxref("DataView.prototype.getFloat32()")}}
-
Obté un nombre en coma flotant amb signe de 32 bits (float) al byte de posició especificat des de l'inici de la vista.
-
{{jsxref("DataView.prototype.getFloat64()")}}
-
Obté un nombre en coma flotant amb signe de 64 bits (double) al byte de posició especificat des de l'inici de la vista.
-
- -

Escritura

- -
-
{{jsxref("DataView.prototype.setInt8()")}}
-
Emmagatzema el valor d'un nombre sencer de 8 bits (byte) al byte de posició especificat des de l'inici de la vista.
-
{{jsxref("DataView.prototype.setUint8()")}}
-
Emmagatzema el valor d'un nombre sencer sense signe de 8 bits (unsigned byte) al byte de posició especificat des de l'inici de la vista.
-
{{jsxref("DataView.prototype.setInt16()")}}
-
Emmagatzema el valor d'un nombre sencer amb signe de 16 bits (short) al byte de posició especificat des de l'inici de la vista.
-
{{jsxref("DataView.prototype.setUint16()")}}
-
Emmagatzema el valor d'un nombre sencer sense signe de 16 bits (unsigned short) al byte de posició especificat des de l'inici de la vista.
-
{{jsxref("DataView.prototype.setInt32()")}}
-
Emmagatzema el valor d'un nombre sencer amb signe de 32 bits (long) al byte de posició especificat des de l'inici de la vista.
-
{{jsxref("DataView.prototype.setUint32()")}}
-
Emmagatzema el valor d'un nombre sencer sense signe de 32 bits  (unsigned long) al byte de posició especificat des de l'inici de la vista.
-
{{jsxref("DataView.prototype.setFloat32()")}}
-
Emmagatzema el valor d'un nombre en coma flotant amb signe de 32 bits (float) al byte de posició especificat des de l'inici de la vista.
-
{{jsxref("DataView.prototype.setFloat64()")}}
-
Emmagatzema el valor d'un nombre en coma flotant amb signe de 64 bits (double) al byte de posició especificat des de l'inici de la vista.
-
- -

Especificacions

- - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-dataview.prototype', 'DataView.prototype')}}{{Spec2('ES6')}}Definició inicial.
- -

Compatibilitat amb navegador

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic9.0{{ CompatGeckoDesktop("15.0") }}1012.15.1
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic4.0{{CompatVersionUnknown}}{{CompatGeckoMobile("15")}}{{CompatUnknown}}12.04.2
-
- -

Vegeu també

- -
    -
  • {{jsxref("DataView")}}
    • -
diff --git a/files/ca/web/javascript/reference/global_objects/date/getdate/index.html b/files/ca/web/javascript/reference/global_objects/date/getdate/index.html new file mode 100644 index 0000000000..16808aaae0 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/date/getdate/index.html @@ -0,0 +1,119 @@ +--- +title: Date.prototype.getDate() +slug: Web/JavaScript/Referencia/Objectes_globals/Date/getDate +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getDate +--- +
{{JSRef}}
+ +

El mètode getDate() retorna el dia del mes per a la data especificada segons l'hora local.

+ +

Sintaxi

+ +
objecteData.getDate()
+ +

Paràmetres

+ +

Cap.

+ +

Valor retornat

+ +

El valor retornat per getDate() és un nombre sencer entre 1 i 31.

+ +

Exemples

+ +

Utilitzar getDate()

+ +

La segona sentència de l'exemple de sota assigna el valor 25 a la variable dia, basant-se en el valor de l'objecte {{jsxref("Date")}} nadal95.

+ +
var nadal95 = new Date('December 25, 1995 23:15:30');
+var dia = nadal95.getDate();
+
+console.log(dia); // 25
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-date.prototype.getdate', 'Date.prototype.getDate')}}{{Spec2('ES6')}} 
{{SpecName('ES5.1', '#sec-15.9.5.14', 'Date.prototype.getDate')}}{{Spec2('ES5.1')}} 
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.1.
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Date.prototype.getUTCDate()")}}
    • +
  • {{jsxref("Date.prototype.getUTCDay()")}}
    • +
  • {{jsxref("Date.prototype.setDate()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/date/getday/index.html b/files/ca/web/javascript/reference/global_objects/date/getday/index.html new file mode 100644 index 0000000000..244562c167 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/date/getday/index.html @@ -0,0 +1,121 @@ +--- +title: Date.prototype.getDay() +slug: Web/JavaScript/Referencia/Objectes_globals/Date/getDay +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getDay +--- +
{{JSRef("Global_Objects", "Date")}}
+ +

Resum

+ +

El mètode getDay() retorna el dia de la setmana per a la data especificada, en temps local on 0 (zero) representa el Diumenge.

+ +

Sintaxi

+ +
dateObj.getDay()
+ +

Paràmetres

+ +

Cap.

+ +

Retorna

+ +

El valor retornat per getDay() és un nombre sencer que correspon al dia de la setmana tal i com es mostra a continuació: 0 és Diumenge, 1 és Dilluns, 2 és Dimarts, etcètera.

+ +

Exemples

+ +

Exemple: Utilitzar getDay()

+ +

La segona sentència que trobareu a continuació asigna el valor 1 a la variable diaSetmana, basat en el valor de l'objecte {{jsxref("Global_Objects/Date", "Date")}} nadal95, que està inicialitzat amb la data d 25 de Desembre de 1995, és un Dilluns.

+ +
var nadal95 = new Date('December 25, 1995 23:15:30');
+var diaSetmana = nadal95.getDay();
+
+console.log(diaSetmana); // 1
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.9.5.16', 'Date.prototype.getDay')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.getday', 'Date.prototype.getDay')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Date.prototype.getUTCDate()")}}
    • +
  • {{jsxref("Date.prototype.getUTCDay()")}}
    • +
  • {{jsxref("Date.prototype.setDate()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/date/getfullyear/index.html b/files/ca/web/javascript/reference/global_objects/date/getfullyear/index.html new file mode 100644 index 0000000000..94f14f4332 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/date/getfullyear/index.html @@ -0,0 +1,121 @@ +--- +title: Date.prototype.getFullYear() +slug: Web/JavaScript/Referencia/Objectes_globals/Date/getFullYear +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getFullYear +--- +
{{JSRef("Global_Objects", "Date")}}
+ +

Resum

+ +

El mètode getFullYear() retorna l'any de la data especificada, en temps local.

+ +

Utilitzeu aquest mètode en comptes de {{jsxref("Date.prototype.getYear()", "getYear()")}}.

+ +

Sintaxi

+ +
dateObj.getFullYear()
+ +

Paràmetres

+ +

Cap.

+ +

Retorna

+ +

El valor retornat per getFullYear() és un nombre absolut. Per a dates entre els anys 1000 i 9999, getFullYear() retorna un nombre de 4 dígits (1995, per exemple). Utilitzeu aquesta funció per a assegurar-vos d'obtindre un any compatible amb l'efecte 2000.

+ +

Exemples

+ +

Exemple: Utilitzar getFullYear()

+ +

L'exemple següent assigna el valor de 4 dígits de l'any actual a la variable any.

+ +
var avui = new Date();
+var any = avui.getFullYear();
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.3.
{{SpecName('ES5.1', '#sec-15.9.5.10', 'Date.prototype.getFullYear')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.getfullyear', 'Date.prototype.getFullYear')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Date.prototype.getUTCFullYear()")}}
    • +
  • {{jsxref("Date.prototype.setFullYear()")}}
    • +
  • {{jsxref("Date.prototype.getYear()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/date/gethours/index.html b/files/ca/web/javascript/reference/global_objects/date/gethours/index.html new file mode 100644 index 0000000000..3848e96339 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/date/gethours/index.html @@ -0,0 +1,120 @@ +--- +title: Date.prototype.getHours() +slug: Web/JavaScript/Referencia/Objectes_globals/Date/getHours +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getHours +--- +
{{JSRef("Global_Objects", "Date")}}
+ +

Resum

+ +

El mètode getHours() retorna l'hora per a la data especificada, en temps local.

+ +

Sintaxi

+ +
dateObj.getHours()
+ +

Paràmetres

+ +

Cap.

+ +

Retorna

+ +

El valor retornat per getHours() és un nombre sencer entre 0 i 23.

+ +

Exemples

+ +

Exemple: Utilitzar getHours()

+ +

La segona sentència que trobareu a continuació assigna el valor 23 a la variable hora, basant-se en l'objecte {{jsxref("Global_Objects/Date", "Date")}} nadal95.

+ +
var nadal95 = new Date('December 25, 1995 23:15:30');
+var hora = nadal95.getHours();
+
+console.log(hora); // 23
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.9.5.18', 'Date.prototype.getHours')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.gethours', 'Date.prototype.getHours')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Date.prototype.getUTCHours()")}}
    • +
  • {{jsxref("Date.prototype.setHours()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/date/getmilliseconds/index.html b/files/ca/web/javascript/reference/global_objects/date/getmilliseconds/index.html new file mode 100644 index 0000000000..d438cf8cad --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/date/getmilliseconds/index.html @@ -0,0 +1,118 @@ +--- +title: Date.prototype.getMilliseconds() +slug: Web/JavaScript/Referencia/Objectes_globals/Date/getMilliseconds +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getMilliseconds +--- +
{{JSRef("Global_Objects", "Date")}}
+ +

Resum

+ +

El mètode getMilliseconds() retorna els milisegons de la data especificada d'acord a l'hora local.

+ +

Sintaxi

+ +
dateObj.getMilliseconds()
+ +

Paràmetres

+ +

Cap.

+ +

Retorna

+ +

El valor retornat per getMilliseconds() és un nombre entre 0 i 999.

+ +

Exemples

+ +

Exemple: Utilitzar getMilliseconds()

+ +

L'exemple següent assigna la part de milisegons de l'hora actual a la variable milisegons:

+ +
var avui = new Date();
+var milisegonds = avui.getMilliseconds();
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.3.
{{SpecName('ES5.1', '#sec-15.9.5.24', 'Date.prototype.getMilliseconds')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.getmilliseconds', 'Date.prototype.getMilliseconds')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Date.prototype.getUTCMilliseconds()")}}
    • +
  • {{jsxref("Date.prototype.setMilliseconds()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/date/getminutes/index.html b/files/ca/web/javascript/reference/global_objects/date/getminutes/index.html new file mode 100644 index 0000000000..3ae466d56d --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/date/getminutes/index.html @@ -0,0 +1,120 @@ +--- +title: Date.prototype.getMinutes() +slug: Web/JavaScript/Referencia/Objectes_globals/Date/getMinutes +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getMinutes +--- +
{{JSRef("Global_Objects", "Date")}}
+ +

Resum

+ +

El mètode getMinutes() retorna els minuts de la data especificada segons el temps local.

+ +

Sintaxi

+ +
dateObj.getMinutes()
+ +

Paràmetres

+ +

Cap.

+ +

Retorna

+ +

El valor retorna per getMinutes() és un nombre sencer entre 0 i 59.

+ +

Exemples

+ +

Exemple: Utilitzar getMinutes()

+ +

La segona sentència de  sota assigna el valor 15 a la variable minuts, prenent el valor de l'objecte nadal95 de tipus {{jsxref("Global_Objects/Date", "Date")}}.

+ +
var nadal95 = new Date('December 25, 1995 23:15:30');
+var minuts = nadal95.getMinutes();
+
+console.log(minuts); // 15
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.9.5.20', 'Date.prototype.getMinutes')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.getminutes', 'Date.prototype.getMinutes')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Date.prototype.getUTCMinutes()")}}
    • +
  • {{jsxref("Date.prototype.setMinutes()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/date/getmonth/index.html b/files/ca/web/javascript/reference/global_objects/date/getmonth/index.html new file mode 100644 index 0000000000..2631ebef9a --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/date/getmonth/index.html @@ -0,0 +1,120 @@ +--- +title: Date.prototype.getMonth() +slug: Web/JavaScript/Referencia/Objectes_globals/Date/getMonth +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getMonth +--- +
{{JSRef("Global_Objects", "Date")}}
+ +

Resum

+ +

El mètode getMonth() retorna el mes de la data especificada d'acord al temps local, representat per un nombre a partir de zero (on zero indica el primer mes de l'any).

+ +

Sintaxi

+ +
dateObj.getMonth()
+ +

Paràmetres

+ +

Cap.

+ +

Retorna

+ +

El valor retornat per getMonth() és un nombre sencer entre 0 i 11. 0 correspon a gener, 1 a febrer, etcètera.

+ +

Exemples

+ +

Exemple: Utilitzar getMonth()

+ +

La segona sentència de sota assigna el valor 11 a la variable mes, basada en el valor de l'objecte nadal95 de tipus {{jsxref("Global_Objects/Date", "Date")}}.

+ +
var nadal95 = new Date('December 25, 1995 23:15:30');
+var mes = nadal95.getMonth();
+
+console.log(mes); // 11
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.9.5.12', 'Date.prototype.getMonth')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.getmonth', 'Date.prototype.getMonth')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Date.prototype.getUTCMonth()")}}
    • +
  • {{jsxref("Date.prototype.setMonth()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/date/getseconds/index.html b/files/ca/web/javascript/reference/global_objects/date/getseconds/index.html new file mode 100644 index 0000000000..790c62e3e9 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/date/getseconds/index.html @@ -0,0 +1,120 @@ +--- +title: Date.prototype.getSeconds() +slug: Web/JavaScript/Referencia/Objectes_globals/Date/getSeconds +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getSeconds +--- +
{{JSRef("Global_Objects", "Date")}}
+ +

Resum

+ +

El mètode getSeconds() retorna els segons de la data especficada d'acord al temps local.

+ +

Sintaxi

+ +
dateObj.getSeconds()
+ +

Paràmetres

+ +

Cap.

+ +

Retorna

+ +

El valor retornat per getSeconds() és un sencer entre 0 i 59.

+ +

Exemples

+ +

Exemple: Utilitzar getSeconds()

+ +

La segona sentència de sota assigna el valor 30 a la variable segons, basat en el valor de l'objecte nadal95, de tipus {{jsxref("Global_Objects/Date", "Date")}}.

+ +
var nadal95 = new Date('December 25, 1995 23:15:30');
+var segons = nadal95.getSeconds();
+
+console.log(segons); // 30
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.9.5.22', 'Date.prototype.getSeconds')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.getseconds', 'Date.prototype.getSeconds')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Date.prototype.getUTCSeconds()")}}
    • +
  • {{jsxref("Date.prototype.setSeconds()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/date/gettime/index.html b/files/ca/web/javascript/reference/global_objects/date/gettime/index.html new file mode 100644 index 0000000000..20c45f31c5 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/date/gettime/index.html @@ -0,0 +1,135 @@ +--- +title: Date.prototype.getTime() +slug: Web/JavaScript/Referencia/Objectes_globals/Date/getTime +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getTime +--- +
{{JSRef}}
+ +

El mètode getTime() retorna el valor numèric corresponent a l'hora per a la data especificada, d'acord al temps universal.

+ +

Es pot emprar aquest mètode com a ajuda per a proporcionar una data i hora per a un altre objecte de tipus {{jsxref("Global_Objects/Date", "Date")}}. Aquest mètode és funcionalment equivalnet al mètode {{jsxref("Date.valueof", "valueOf()")}}.

+ +

Sintaxi

+ +
dateObj.getTime()
+ +

Paràmetres

+ +

Cap.

+ +

Retorn

+ +

El valor retornat pel mètode getTime() és el nombre de milisegons que han passat des de l'1 de gener de 1970 00:00:00 UTC.

+ +

Exemples

+ +

Utilitzar getTime() per a obtindre dates

+ +

Construïr un objecte date que representi el mateix moment.

+ +
var aniversari = new Date(1994, 12, 10);
+var copia= new Date();
+copia.setTime(aniversari.getTime());
+
+ +

Mesurar el temps d'execució

+ +

Restar dos crides seguides de getTime() en objectes {{jsxref("Date")}} acabats de generar dóne el temps transcorregut entre les dues crides. Això pot ser emprat per a calcular el temps d'execució d'algunes operacions. Vegeu també {{jsxref("Date.now()")}} per a prevenir l'instanciació d'objectes {{jsxref("Date")}} innecesaris.

+ +
var fi, inici;
+
+inici= new Date();
+for (var i = 0; i < 1000; i++) {
+  Math.sqrt(i);
+}
+fi = new Date();
+
+console.log("L'operació ha trigat " + (fi.getTime() - inici.getTime()) + ' ms');
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.9.5.9', 'Date.prototype.getTime')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.gettime', 'Date.prototype.getTime')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Date.prototype.setTime()")}}
    • +
  • {{jsxref("Date.prototype.valueOf()")}}
    • +
  • {{jsxref("Date.now()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/date/gettimezoneoffset/index.html b/files/ca/web/javascript/reference/global_objects/date/gettimezoneoffset/index.html new file mode 100644 index 0000000000..8af4d6e9e8 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/date/gettimezoneoffset/index.html @@ -0,0 +1,109 @@ +--- +title: Date.prototype.getTimezoneOffset() +slug: Web/JavaScript/Referencia/Objectes_globals/Date/getTimezoneOffset +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getTimezoneOffset +--- +
{{JSRef("Global_Objects", "Date")}}
+ +

Resum

+ +

El mètode getTimezoneOffset() retorna la desviació de la zona horària a l'hora UTC, en minuts, per a la localizació en ús.

+ +

Sintaxi

+ +
dateObj.getTimezoneOffset()
+ +

Paràmetres

+ +

Cap.

+ +

Retorn

+ +

La desviació de la zona horària és la diferència, en minuts, entre UTC i l'hora local. Això comporta que la desviació serà positiva si l'hora local està per darrere de la UTC i negativa si està endevant. Per exemple, si la vostra zona horària és UTC+10 (Australian Eastern Standard Time), el mètode retornarà -600. L'horari d'estalvi d'energia (d'estiu) fa que aquest valor no sigui una constant, per a qualsevol localització.

+ +

Exemples

+ +

Exemple: Utilitzar getTimezoneOffset()

+ +
var x = new Date();
+var currentTimeZoneOffsetInHours = x.getTimezoneOffset() / 60;
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.9.5.26', 'Date.prototype.getTimezoneOffset')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.gettimezoneoffset', 'Date.prototype.getTimezoneOffset')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
diff --git a/files/ca/web/javascript/reference/global_objects/date/getutcdate/index.html b/files/ca/web/javascript/reference/global_objects/date/getutcdate/index.html new file mode 100644 index 0000000000..ee3a8b881f --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/date/getutcdate/index.html @@ -0,0 +1,119 @@ +--- +title: Date.prototype.getUTCDate() +slug: Web/JavaScript/Referencia/Objectes_globals/Date/getUTCDate +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCDate +--- +
{{JSRef("Global_Objects", "Date")}}
+ +

Resum

+ +

El mètode getUTCDate()retorna el dia del mes per a la data especificada, segons l'hora universal.

+ +

Sintaxi

+ +
dateObj.getUTCDate()
+ +

Paràmetres

+ +

Cap.

+ +

Retorn

+ +

El valor retornat per getUTCDate() és un nombre sencer entre 1 i 31.

+ +

Exemples

+ +

Exemple: Utilitzar getUTCDate()

+ +

L'exemple següent assigna la part del dia de la data actual a la variable dia.

+ +
var avui = new Date();
+var dia = avui.getUTCDate();
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.3.
{{SpecName('ES5.1', '#sec-15.9.5.15', 'Date.prototype.getUTCDate')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.getutcdate', 'Date.prototype.getUTCDate')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Date.prototype.getDate()")}}
    • +
  • {{jsxref("Date.prototype.getUTCDay()")}}
    • +
  • {{jsxref("Date.prototype.setUTCDate()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/date/getutcday/index.html b/files/ca/web/javascript/reference/global_objects/date/getutcday/index.html new file mode 100644 index 0000000000..b6f992f9a1 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/date/getutcday/index.html @@ -0,0 +1,119 @@ +--- +title: Date.prototype.getUTCDay() +slug: Web/JavaScript/Referencia/Objectes_globals/Date/getUTCDay +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCDay +--- +
{{JSRef("Global_Objects", "Date")}}
+ +

Resum

+ +

El mètode getUTCDay() retorna el dia de la setmana de la data especificada segons l'hora universal, on 0 representa Diumenge.

+ +

Sintaxi

+ +
dateObj.getUTCDay()
+ +

Paràmetres

+ +

Cap.

+ +

Retorn

+ +

El valor retornat per  getUTCDay() és un nombre sencer que correspón al dia de la setmana: 0 per a Diumenge, 1 per a dilluns, 2 per a Dimarts, etcètera.

+ +

Exemples

+ +

Exemple: Utilitzar getUTCDay()

+ +

L'exemple següent assigna el dia de la setmana de la data actual a la variable diaSetmana.

+ +
var avui = new Date();
+var diaSetmana = avui.getUTCDay();
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.3.
{{SpecName('ES5.1', '#sec-15.9.5.17', 'Date.prototype.getUTCDay')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.getutcday', 'Date.prototype.getUTCDay')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Date.prototype.getUTCDate()")}}
    • +
  • {{jsxref("Date.prototype.getDay()")}}
    • +
  • {{jsxref("Date.prototype.setUTCDate()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/date/getutcfullyear/index.html b/files/ca/web/javascript/reference/global_objects/date/getutcfullyear/index.html new file mode 100644 index 0000000000..3ca1526e28 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/date/getutcfullyear/index.html @@ -0,0 +1,118 @@ +--- +title: Date.prototype.getUTCFullYear() +slug: Web/JavaScript/Referencia/Objectes_globals/Date/getUTCFullYear +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCFullYear +--- +
{{JSRef("Global_Objects", "Date")}}
+ +

Resum

+ +

El mètode getUTCFullYear() retorna l'any de la data especificada, segons el temps universal.

+ +

Sintaxi

+ +
dateObj.getUTCFullYear()
+ +

Paràmetres

+ +

Cap.

+ +

Retorn

+ +

El valor retornat per getUTCFullYear() és un nombre absolut que compleix amb any-2000, per exemple, 1995.

+ +

Exemples

+ +

Exemple: Utilitzar getUTCFullYear()

+ +

L'exemple següent assigna el valor de 4 dígits de l'any actual a la variable any.

+ +
var avui = new Date();
+var any = avui.getUTCFullYear();
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.3.
{{SpecName('ES5.1', '#sec-15.9.5.11', 'Date.prototype.getUTCFullYear')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.getutcfullyear', 'Date.prototype.getUTCFullYear')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Date.prototype.getFullYear()")}}
    • +
  • {{jsxref("Date.prototype.setFullYear()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/date/getutchours/index.html b/files/ca/web/javascript/reference/global_objects/date/getutchours/index.html new file mode 100644 index 0000000000..f575df92a1 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/date/getutchours/index.html @@ -0,0 +1,118 @@ +--- +title: Date.prototype.getUTCHours() +slug: Web/JavaScript/Referencia/Objectes_globals/Date/getUTCHours +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCHours +--- +
{{JSRef("Global_Objects", "Date")}}
+ +

Resum

+ +

El mètode getUTCHours() retorna les hores especificades a la data, d'acord l'hora universal.

+ +

Sintaxi

+ +
dateObj.getUTCHours()
+ +

Paràmetres

+ +

Cap.

+ +

Retorn

+ +

El valor retornat per getUTCHours() és un nombre sencer entre 0 i 23.

+ +

Exemples

+ +

Exemple: Utilitzar getUTCHours()

+ +

L'exemple següent assigna la part de les hores de la data actual a la variable hora.

+ +
var avui = new Date();
+var hora = avui.getUTCHours();
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.3.
{{SpecName('ES5.1', '#sec-15.9.5.19', 'Date.prototype.getUTCHours')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.getutchours', 'Date.prototype.getUTCHours')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Date.prototype.getHours()")}}
    • +
  • {{jsxref("Date.prototype.setUTCHours()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/date/getutcmilliseconds/index.html b/files/ca/web/javascript/reference/global_objects/date/getutcmilliseconds/index.html new file mode 100644 index 0000000000..d09ac5bded --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/date/getutcmilliseconds/index.html @@ -0,0 +1,116 @@ +--- +title: Date.prototype.getUTCMilliseconds() +slug: Web/JavaScript/Referencia/Objectes_globals/Date/getUTCMilliseconds +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCMilliseconds +--- +
{{JSRef}}
+ +

El mètode getUTCMilliseconds() retorna els milisegons de la data especificada, d'acord al temps universal.

+ +

Sintaxi

+ +
objecteData.getUTCMilliseconds()
+ +

Paràmetres

+ +

Cap.

+ +

Valor retornat

+ +

El valor retorna per getUTCMilliseconds() és un nombre sencer entre 0 i 999.

+ +

Exemples

+ +

Utilitzar getUTCMilliseconds()

+ +

L'exemple següent assigna la porció de milisegons del temps actual a la variable milisegons.

+ +
var avui = new Date();
+var milisegons = avui.getUTCMilliseconds();
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.3.
{{SpecName('ES5.1', '#sec-15.9.5.25', 'Date.prototype.getUTCMilliseconds')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.getutcmilliseconds', 'Date.prototype.getUTCMilliseconds')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Date.prototype.getMilliseconds()")}}
    • +
  • {{jsxref("Date.prototype.setUTCMilliseconds()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/date/getutcminutes/index.html b/files/ca/web/javascript/reference/global_objects/date/getutcminutes/index.html new file mode 100644 index 0000000000..e18a13c52f --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/date/getutcminutes/index.html @@ -0,0 +1,116 @@ +--- +title: Date.prototype.getUTCMinutes() +slug: Web/JavaScript/Referencia/Objectes_globals/Date/getUTCMinutes +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCMinutes +--- +
{{JSRef}}
+ +

El mètode getUTCMinutes() retorna els minuts de la data especificada en temps universal.

+ +

Sintaxi

+ +
objecteData.getUTCMinutes()
+ +

Paràmetres

+ +

Cap.

+ +

Valor a retornar

+ +

El valor retornat per getUTCMinutes() és un nombre sencer entre 0 i 59.

+ +

Exemples

+ +

Utilitzar getUTCMinutes()

+ +

L'exemple següent assigna la part de minuts del temps actual a la variable minuts.

+ +
var avui = new Date();
+var minuts = avui.getUTCMinutes();
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.3.
{{SpecName('ES5.1', '#sec-15.9.5.21', 'Date.prototype.getUTCMinutes')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.getutcminutes', 'Date.prototype.getUTCMinutes')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Date.prototype.getMinutes()")}}
    • +
  • {{jsxref("Date.prototype.setUTCMinutes()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/date/getutcmonth/index.html b/files/ca/web/javascript/reference/global_objects/date/getutcmonth/index.html new file mode 100644 index 0000000000..48ba78349b --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/date/getutcmonth/index.html @@ -0,0 +1,116 @@ +--- +title: Date.prototype.getUTCMonth() +slug: Web/JavaScript/Referencia/Objectes_globals/Date/getUTCMonth +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCMonth +--- +
{{JSRef}}
+ +

El mètode getUTCMonth() retorna el mes de la data especificada d'acord al temps universal, com a valor basat en zero (on zero indica el primer mes de l'any.

+ +

Sintaxi

+ +
objecteData.getUTCMonth()
+ +

Paràmetres

+ +

Cap.

+ +

Valor retornat

+ +

El valor retornat per getUTCMonth() és un nombre sencer entre 0 i 11 corresponent al mes. 0 per al gener, 1 per al febrer, 2 per al març, etcètera.

+ +

Exemples

+ +

Utilitzar getUTCMonth()

+ +

L'exemple següent assigna la part de la data actual corresponent al mes a la variable mes.

+ +
var avui = new Date();
+var mes = mes.getUTCMonth();
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.3.
{{SpecName('ES5.1', '#sec-15.9.5.13', 'Date.prototype.getUTCMonth')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.getutcmonth', 'Date.prototype.getUTCMonth')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Date.prototype.getMonth()")}}
    • +
  • {{jsxref("Date.prototype.setUTCMonth()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/date/getutcseconds/index.html b/files/ca/web/javascript/reference/global_objects/date/getutcseconds/index.html new file mode 100644 index 0000000000..1f69ca8199 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/date/getutcseconds/index.html @@ -0,0 +1,118 @@ +--- +title: Date.prototype.getUTCSeconds() +slug: Web/JavaScript/Referencia/Objectes_globals/Date/getUTCSeconds +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCSeconds +--- +
{{JSRef("Global_Objects", "Date")}}
+ +

Resum

+ +

El mètode getUTCSeconds() retorna els segons a la data especificada, segons l'hora universal.

+ +

Sintaxi

+ +
dateObj.getUTCSeconds()
+ +

Paràmetres

+ +

Cap.

+ +

Retorna

+ +

El valor retornat per getUTCSeconds() és un nombre sencer entre 0 i 59.

+ +

Exemples

+ +

Exemple: Utilitzar getUTCSeconds()

+ +

L'exemple següent assigna la porció de segons del temps actual a la variable segons.

+ +
var avui = new Date();
+var segons = avui.getUTCSeconds();
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.3.
{{SpecName('ES5.1', '#sec-15.9.5.23', 'Date.prototype.getUTCSeconds')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.getutcseconds', 'Date.prototype.getUTCSeconds')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Date.prototype.getSeconds()")}}
    • +
  • {{jsxref("Date.prototype.setUTCSeconds()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/date/getyear/index.html b/files/ca/web/javascript/reference/global_objects/date/getyear/index.html new file mode 100644 index 0000000000..8724b2e03b --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/date/getyear/index.html @@ -0,0 +1,162 @@ +--- +title: Date.prototype.getYear() +slug: Web/JavaScript/Referencia/Objectes_globals/Date/getYear +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getYear +--- +
{{JSRef("Global_Objects", "Date")}} {{deprecated_header}}
+ +

Resum

+ +

El mètode getYear() retorna l'any de la data especificada segons l'hora local. Com que getYear() no retorna anys sencers ("el problema de l'any 2000"), no s'utilitza més i s'ha substituït pel mètode {{jsxref("Date.prototype.getFullYear", "getFullYear()")}}.

+ +

Sintaxi

+ +
dateObj.getYear()
+ +

Paràmetres

+ +

Cap.

+ +

Retorna

+ +

El mètode getYear() retorna l'any menys el valor 1900; és a dir:

+ +
    +
  • Per a anys majors o iguals a 2000, el valor retornat per getYear() és 100 o major. Per exemple, si l'any és el 2026, getYear() retorna 126.
    • +
  • Per a anys entre 1900 i 1999 (ambdós inclosos), el valor retornat per getYear() roman entre 0 i 99. Per exemple, per a l'any 1976 getYear() retorna 76.
    • +
  • Per a anys menors que 1900, el valor retornat per getYear() és menor que zero. Per exemple, per a l'any 1800, getYear() retorna -100.
    • +
+ +

Per a tenir en compte anys abans o deprés del 2000 es recomana utilitzar {{jsxref("Date.prototype.getFullYear", "getFullYear()")}} en comptes de getYear() ja que retorna l'any sencer.

+ +

Compatibilitat amb versions anteriors

+ +

Comportament en JavaScript 1.2 i anteriors

+ +

El mètode getYear() retorna o bé un any amb dos dígits o bé un any amb 4 dígits:

+ +
    +
  • Per a anys entre 1900 i 1999 (ambdos inclosos) el valor retornat és l'any menys 1900. Per exemple, per a l'any 1976 el valor retornat és 76.
    • +
  • Per a anys menors que 1900 o majors que 1999 el valor retornat per getYear() és l'any amb 4 dígits. Per exemple, per a l'any 1856 el valor retornat és 1856. Per a l'any 2026 el valor retornat és 2026.
    • +
+ +

Exemples

+ +

Exemple: Anys entre1900 i 1999

+ +

La segona sentència assigna el valor 95 a la variable any.

+ +
var nadal = new Date('December 25, 1995 23:15:00');
+var any = nadal.getYear(); // retorna 95
+
+ +

Exemple: Anys majors que 1999

+ +

La segona sentència assigna el valor 100 a la variable any.

+ +
var nadal = new Date('December 25, 2000 23:15:00');
+var any = Xmas.getYear(); // retorna 100
+
+ +

Exemple: Anys menors que 1900

+ +

La segona sentència assigna el valor -100 a la variable any.

+ +
var nadal = new Date('December 25, 1800 23:15:00');
+var any = nadal.getYear(); // retorna -100
+
+ +

Exemple: Assignar i obtenir un any entre1900 i 1999

+ +

La segona sentència assigna el valor 95 a la variable any, que representa l'any 1995.

+ +
var nadal.setYear(95);
+var any = nadal.getYear(); // retorna 95
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.3.
{{SpecName('ES5.1', '#sec-B.2.4', 'Date.prototype.getYear')}}{{Spec2('ES5.1')}}Definit a l'annex de compatibilitat (amb caràcter informatiu).
{{SpecName('ES6', '#sec-date.prototype.getyear', 'Date.prototype.getYear')}}{{Spec2('ES6')}}Definit a l'annex de característiques adicionals per a navegadors web (amb caràcter normatiu).
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Date.prototype.getFullYear()")}}
    • +
  • {{jsxref("Date.prototype.getUTCFullYear()")}}
    • +
  • {{jsxref("Date.prototype.setYear()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/date/index.html b/files/ca/web/javascript/reference/global_objects/date/index.html new file mode 100644 index 0000000000..3fb5a9368d --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/date/index.html @@ -0,0 +1,250 @@ +--- +title: Date +slug: Web/JavaScript/Referencia/Objectes_globals/Date +translation_of: Web/JavaScript/Reference/Global_Objects/Date +--- +
{{JSRef("Global_Objects", "Date")}}
+ +

Resum

+ +

Crea una instància de tipus Date de JavaScript, que representa un únic moment en el temps. Els objectes de tipus Date es basen en un valor de temps que mesura el nombre de milisegons que han passat des de l'u de gener de 1970 UTC.

+ +

Constructor

+ +
new Date();
+new Date(valor);
+new Date(dataString);
+new Date(any, mes[, dia[, hora[, minuts[, segons[, milisegons]]]]]);
+
+ +
+

Nota: Els objectes Date de JavaScript només poden ser instanciats cridant Date com a constructor: Si es crida la funció com una funció normal (és a dir, sense l'operador {{jsxref("Operators/new", "new")}}), aquesta retornarà una string en comptes d'un objecte de tipus Date; al contrari que altres tipus d'objectes JavaScript, els objectes de JavaScript de tipus Date no poden ser representats com a literals.

+
+ +

Paràmetres

+ +
+

Nota: Quan es crida Date com a constructor amb més d'un argument, si els valors són més grans que el seu rang lògic (per exemple, si es passa 13 com a valor pel mes o 70 com a valor de minuts), Date ajusta el valor adjacent. Per exemple, new Date(2013, 13, 1) és equivalent a new Date(2014, 1, 1), ambdós creen un objecte de tipus Date que representa 2014-02-01 (cal destacar que els mesos es comencen a contar des de zero). El mateix s'aplica per a altres valors: new Date(2013, 2, 1, 0, 70) és equivalent a new Date(2013, 2, 1, 1, 10) i ambdós representen 2013-03-01T01:10:00.

+
+ +
+

Nota: Quan es crida Date com a constructor amb més d'un argument, els arguments especificats representen l'hora local. Si es pretèn passar valors UTC, utilitzeu new Date({{jsxref("Date.UTC()", "Date.UTC(...)")}}) amb aquests arguments.

+
+ +
+
valor
+
Nombre sencer que representa el nombre de milisegons des de l'1 de gener de 1970 00:00:00 UTC (Època UNIX).
+
dataString
+
Valor String que representa una data. La String ha d'estar en un format reconegut pel mètode {{jsxref("Date.parse()")}} (Marques de temps RFC 2822 compatibles amb el IETF o bé una versió de la ISO8601).
+
any
+
Valor sencer que representa un any. Els valors des de 0 a 99 representen els anys des de 1900 a 1999. Vegeu l'{{anch("Example:_Two_digit_years_map_to_1900_-_1999", "exemple a continuació")}}.
+
mes
+
Valor sencer que representa un mes, començant per zero com a gener i acabant amb 11 com a desembre.
+
dia
+
Opcional. Valor sencer que representa el dia del mes.
+
hora
+
Opcional. Valor sencer que representa l'hora del dia.
+
minut
+
Opcional. Valor sencer que representa els minuts d'un segment de temps.
+
segon
+
Opcional. Valor sencer que representa els segons d'un segment de temps.
+
milisegons
+
Opcional. Valor sencer que representa els milisegons d'un segment de temps.
+
+ +

Descripció

+ +
    +
  • Si no es proporciona cap argument, el constructor crea un objecte de JavaScript de tipus Date i l'inicialitza amb l'hora actual proporcionada pel sistema.
    • +
  • Si es proporcionen al menys dos arguments, els arguments no proporcionats es consideren o bé 1 (si no s'especifica el dia) o bé 0 per a tots els altres.
    • +
  • L'hora de JavaScript es basa en els milisegons que han passat des de la mitja nit de l'1 de gener de 1970 UTC. Un dia té 86.400.000 milisegons. El rang de l'objecte de JavaScript Date és de -100.000.000 dies a 100.000.000 dies relatius a l'1 de gener de 1970 UTC.
    • +
  • L'objecte de JavaScript Date proporciona el mateix comportament a totes les plataformes on s'utilitzi. El valor de temps es pot passar entre sistemes per a representar el mateix moment del temps i si s'utilitza per a crear un objecte que contingui l'hora local, aquest objecte representarà l'equivalent al temps local.
    • +
  • Alguns dels mètodes de l'objecte de JavaScript Date soporten temps en UTC (universal) i temps local. UTC, també conegut com a Greenwhich Mean Time (GMT), fa referència al temps marcat pel World Time Standard. El temps local és el temps proporcionat per l'ordinador on s'executa el JavaScript.
    • +
  • Si s'invoca la funció de JavaScript Date com una funció (és a dir, sense l'operador {{jsxref("Operators/new", "new")}}), aquesta retornarà una string representant la data i hora actual.
    • +
+ +

Propietats

+ +
+
{{jsxref("Date.prototype")}}
+
Permet afegir propietats a l'objecte de JavaScript Date.
+
Date.length
+
El valor de Date.length és 7. Aquest és el nombre de arguments que el constructor accepta.
+
+ +
{{jsOverrides("Function", "properties", "prototype")}}
+ +

Mètodes

+ +
+
{{jsxref("Date.now()")}}
+
Retorna el valor numèric corresponent al temps actual - el nombre de milisegons que han passat des de l'1 de gener de 1970 00:00:00 UTC.
+
{{jsxref("Date.parse()")}}
+
Interpreta un string que representa una data i retorna el nombre de milisegons des de l'1 de gener de 1970 00:00:00 UTC.
+
{{jsxref("Date.UTC()")}}
+
Accepta els mateixos paràmetres que el constructor (és a dir, de 2 a 7) i retorna le nombre de milisegons des de l'1 de gener de 1970 00:00:00 UTC.
+
+ +
{{jsOverrides("Function", "Methods", "now", "parse", "UTC")}}
+ +

Instàncies de JavaScript Date

+ +

Totes les instàncies de Date hereten de {{jsxref("Date.prototype")}}. L'objecte prototipus del constructor Date pot ser modificat per a afectar a totes les instàncies de Date.

+ +

Mètodes de Date.prototype

+ +
{{page('/ca/docs/Web/JavaScript/Reference/Global_Objects/Date/prototype', 'Methods')}}
+ +

Exemples

+ +

Exemple: Vàries formes de crear un objecte de tipus Date

+ +

Els següents exemples mostren diverses maneres de crear dates a JavaScript:

+ +
var today = new Date();
+var birthday = new Date('December 17, 1995 03:24:00');
+var birthday = new Date('1995-12-17T03:24:00');
+var birthday = new Date(1995, 11, 17);
+var birthday = new Date(1995, 11, 17, 3, 24, 0);
+
+ +

Exemple: Dos dígits per representar els anys 1900 a 1999

+ +

Per a crear i obtindre dates entre els anys 0 i 99 es recomana emprar els mètodes {{jsxref("Date.prototype.setFullYear()")}} i {{jsxref("Date.prototype.getFullYear()")}}.

+ +
var date = new Date(98, 1); // Sun Feb 01 1998 00:00:00 GMT+0000 (GMT)
+
+// Deprecated method, 98 maps to 1998 here as well
+date.setYear(98);           // Sun Feb 01 1998 00:00:00 GMT+0000 (GMT)
+
+date.setFullYear(98);       // Sat Feb 01 0098 00:00:00 GMT+0000 (BST)
+
+ +

Exemple: Calcular el temps passat

+ +

Els exemples següents mostren com determinar el temps passat entre dues dates a JavaScript:

+ +
// utilitzant objectes Date
+var start = Date.now();
+
+// L'event a cronometra va aquí:
+doSomethingForALongTime();
+var end = Date.now();
+var elapsed = end - start; // temps transcorregut en milisegons
+
+ +
// utilitzant mètodes que formen part del sistema
+var start = new Date();
+
+// the event to time goes here:
+doSomethingForALongTime();
+var end = new Date();
+var elapsed = end.getTime() - start.getTime(); // temps transcorregut en milisegons
+
+ +
// cronometra una funció i retorna el que retorni
+function printElapsedTime(fTest) {
+  var nStartTime = Date.now(),
+      vReturn = fTest(),
+      nEndTime = Date.now();
+
+  console.log('Temps transcorregut: ' + String(nEndTime - nStartTime) + ' miliseconds');
+  return vReturn;
+}
+
+yourFunctionReturn = printElapsedTime(yourFunction);
+
+ +
+

Nota: En navegadors que suporten la característica de temps en alta resolució de la {{domxref("window.performance", "API d'Alt Rendiment Web", "", 1)}}, {{domxref("Performance.now()")}} pot proporcionar mesures de temps més concises i fiables pel temps transcorregut que {{jsxref("Date.now()")}}.

+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.9', 'Date')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date-objects', 'Date')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Informes de compatiblitat amb navegadors

+ + + +

Notes específiques de Internet Explorer

+ +

Internet Explorer 8 no suporta el format de dates ISO8601.

diff --git a/files/ca/web/javascript/reference/global_objects/date/now/index.html b/files/ca/web/javascript/reference/global_objects/date/now/index.html new file mode 100644 index 0000000000..c3ef05fa86 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/date/now/index.html @@ -0,0 +1,126 @@ +--- +title: Date.now() +slug: Web/JavaScript/Referencia/Objectes_globals/Date/now +translation_of: Web/JavaScript/Reference/Global_Objects/Date/now +--- +
{{JSRef("Global_Objects", "Date")}}
+ +

Resum

+ +

El mètode Date.now() retorna el nombre de milisegons que han passat des de l'1 de gener de 1970 00:00:00 UTC.

+ +

Sintaxi

+ +
var timeInMs = Date.now();
+ +

Paràmetres

+ +

Cap.

+ +

Descripció

+ +

El mètode now() retorna el nombre de method returns el nombre de milisegons que han passat des de l'1 de gener de 1970 00:00:00 UTC fins al moment actual representat en un  {{jsxref("Global_Objects/Number", "Nombre")}}.

+ +

Com que now() és un mètode estàtic de {{jsxref("Global_Objects/Date", "Date")}}, sempre es crida com a Date.now().

+ +

Polyfill

+ +

Aquest mètode va ser estandaritzat a la cinquena edició de l'ECMA-262. Els motors que encara no hagin sigut actualitzats per a suportar aquest mètode poden utilitzar el bocí de codi següent per a paliar l'absència d'aquest mètode:

+ +
if (!Date.now) {
+  Date.now = function now() {
+    return new Date().getTime();
+  };
+}
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES5.1', '#sec-15.9.4.4', 'Date.now')}}{{Spec2('ES5.1')}}Definició inicial. Implementat a JavaScript 1.5.
{{SpecName('ES6', '#sec-date.now', 'Date.now')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterístiquesChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome("5")}}{{CompatGeckoDesktop("1.9")}}{{CompatIE("9")}}{{CompatOpera("10.50")}}{{CompatSafari("4")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterístiquesAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
+ + + + + + +
Suport bàsic
+ 		{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Basat en la  taula de compatibilitat de Kangax.

+ +

Vegeu també

+ +
    +
  • {{domxref("Performance.now()")}} — proporciona marques de temps amb una resolució submilimètrica per a utilitzar al mesurar el rendiment de pàgines web
    • +
  • {{domxref("console.time()")}} / {{domxref("console.timeEnd()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/date/setdate/index.html b/files/ca/web/javascript/reference/global_objects/date/setdate/index.html new file mode 100644 index 0000000000..746de134fe --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/date/setdate/index.html @@ -0,0 +1,122 @@ +--- +title: Date.prototype.setDate() +slug: Web/JavaScript/Referencia/Objectes_globals/Date/setDate +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setDate +--- +
{{JSRef}}
+ +

El mètode setDate() assigna el dia de l'objecte {{jsxref("Date")}} relatiu al principi del mes assignat en aquell moment.

+ +

Sintaxi

+ +
objecteData.setDate(dia)
+ +

Paràmetres

+ +
+
dia
+
Un nombre sencer que representa el dia del mes.
+
+ +

Valor retornat

+ +

El valor retornat per setDate() és el nombre de milisegons que han passat des de l'ú de gener de 1970 00:00:00 UTC de la data resultant (l'objecte {{jsxref("Date")}} també canvia).

+ +

Descripció

+ +

Si es passa un paràmetre que està fora del rang esperat, el mètode setDate() actualitza els altres paràmetres per a acceptar el nombre. Per exemple, si es passa 0 com a dia, la data representarà l'últim dia del mes anterior.

+ +

Exemples

+ +

Utilitzar setDate()

+ +
var elGranDia = new Date(1962, 6, 7); // 1962-07-07
+elGranDia.setDate(24);  // 1962-07-24
+elGranDia.setDate(32);  // 1962-08-01
+elGranDia.setDate(22);  // 1962-08-22
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.9.5.36', 'Date.prototype.setDate')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.setdate', 'Date.prototype.setDate')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Date.prototype.getDate()")}}
    • +
  • {{jsxref("Date.prototype.setUTCDate()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/date/setfullyear/index.html b/files/ca/web/javascript/reference/global_objects/date/setfullyear/index.html new file mode 100644 index 0000000000..c29d56ca4e --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/date/setfullyear/index.html @@ -0,0 +1,128 @@ +--- +title: Date.prototype.setFullYear() +slug: Web/JavaScript/Referencia/Objectes_globals/Date/setFullYear +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setFullYear +--- +
{{JSRef}}
+ +

El mètode setFullYear() assigna l'any sencerr per a la data especificada, d'acord a l'hora local. Retorna una nova marca de temps.

+ +

Sintaxi

+ +
objecteData.setFullYear(any[, mes[, dia]])
+ +

Paràmetres

+ +
+
any
+
Un nombre sencer que representa el valor numèric de l'any, per exemple, 1995.
+
mes
+
Un nombre sencer entre 0 i 11 que representa el mes.
+
dia
+
Opcional. Un nombre sencer entre 1 i 31 que representa el dia del mes.
+
+ +

Valor retornat

+ +

Una nova marca de temps amb el valor de l'objecte actual.

+ +

Descripció

+ +

Si no s'especifica el paràmetre dia s'utilitza el valor retornat pels mètodes {{jsxref("Date.prototype.getMonth()", "getMonth()")}} i {{jsxref("Date.prototype.getDate()", "getDate()")}}.

+ +

Si es passa un paràmetre que està fora del rang esperat, el mètode UTC() actualitza els altres paràmetres per a acceptar el nombre. Per exemple, si es passa 15 com a mes, l'any serà incrementat en 1 (any + 1), i s'emprarà 3 com a mes.

+ +

Exemples

+ +

Utilitzar setFullYear()

+ +
var elGranDia = new Date();
+elGranDia.setFullYear(1997);
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.3.
{{SpecName('ES5.1', '#sec-15.9.5.40', 'Date.prototype.setFullYear')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.setfullyear', 'Date.prototype.setFullYear')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Date.prototype.getUTCFullYear()")}}
    • +
  • {{jsxref("Date.prototype.setUTCFullYear()")}}
    • +
  • {{jsxref("Date.prototype.setYear()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/date/sethours/index.html b/files/ca/web/javascript/reference/global_objects/date/sethours/index.html new file mode 100644 index 0000000000..7f660ba344 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/date/sethours/index.html @@ -0,0 +1,129 @@ +--- +title: Date.prototype.setHours() +slug: Web/JavaScript/Referencia/Objectes_globals/Date/setHours +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setHours +--- +
{{JSRef}}
+ +

El mètode setHours() assigna l'hora per a una data especificada d'acord a l'hora local, i retorna el nombre de milisegons que han passat des de l'u de gener de 1970 00:00:00 UTC fins al temps representat per la instància de {{jsxref("Date")}} actualitzada.

+ +

Sintaxi

+ +
objecteData.setHours(hores[, minuts[, segons[, milisegons]]])
+ +

Versions anteriors a JavaScript 1.3

+ +
objecteData.setHours(hores)
+ +

Paràmetres

+ +
+
hores
+
Un nombre sencer entre 0 i 23, que representa l'hora.
+
minuts
+
Opcional. Un nombre sencer entre 0 i 59 que representa els minuts.
+
segons
+
Opcional. Un nombre sencer entre 0 i 59 que representa els segons.
+
milisegons
+
Opcional. Un nombre sencer entre 0 i 999 que representa els milisegons.
+
+ +

Descripció

+ +

Si no s'especifiquen els paràmetres minuts, segons i milisegons s'utilitzen els valors retornats per {{jsxref("Date.prototype.getMinutes()", "getMinutes()")}}, {{jsxref("Date.prototype.getSeconds()", "getSeconds()")}} i {{jsxref("Date.prototype.getMilliseconds()", "getMilliseconds()")}}.

+ +

Si es passa un paràmetre que està fora del rang esperat, el mètode setHours() actualitza els altres paràmetres per a acceptar el nombre. Per exemple, si es passa 100 com a segons, els minuts seran incrementats en 1 (minuts + 1), i s'emprarà 40 com a segons.

+ +

Exemples

+ +

Utilitzar setHours()

+ +
var elGranDia = new Date();
+elGranDia.setHours(7);
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.9.5.34', 'Date.prototype.setHours')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.sethours', 'Date.prototype.setHours')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Date.prototype.getHours()")}}
    • +
  • {{jsxref("Date.prototype.setUTCHours()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/date/setmilliseconds/index.html b/files/ca/web/javascript/reference/global_objects/date/setmilliseconds/index.html new file mode 100644 index 0000000000..53dc451ad4 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/date/setmilliseconds/index.html @@ -0,0 +1,117 @@ +--- +title: Date.prototype.setMilliseconds() +slug: Web/JavaScript/Referencia/Objectes_globals/Date/setMilliseconds +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setMilliseconds +--- +
{{JSRef}}
+ +

El mètode setMilliseconds() assigna els milisegons per a una data especificada d'acord a l'hora local.

+ +

Sintaxi

+ +
objecteData.setMilliseconds(milisegons)
+ +

Paràmetres

+ +
+
milisegons
+
Un nombre sencer entre 0 i 999 que representa els milisegons.
+
+ +

Descripció

+ +

Si es passa un paràmetre que està fora del rang esperat, el mètode setMilliseconds() actualitza els altres paràmetres per a acceptar el nombre. Per exemple, si es passa 1005 com a milisegons, els segonsseran incrementats en 1 (segons + 1), i s'emprarà 5 com a milisegons.

+ +

Exemples

+ +

Utilitzar setMilliseconds()

+ +
var elGranDia= new Date();
+elGranDia.setMilliseconds(100);
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComenataris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.3.
{{SpecName('ES5.1', '#sec-15.9.5.28', 'Date.prototype.setMilliseconds')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.setmilliseconds', 'Date.prototype.setMilliseconds')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Date.prototype.getMilliseconds()")}}
    • +
  • {{jsxref("Date.prototype.setUTCMilliseconds()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/date/setminutes/index.html b/files/ca/web/javascript/reference/global_objects/date/setminutes/index.html new file mode 100644 index 0000000000..7dba61cade --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/date/setminutes/index.html @@ -0,0 +1,127 @@ +--- +title: Date.prototype.setMinutes() +slug: Web/JavaScript/Referencia/Objectes_globals/Date/setMinutes +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setMinutes +--- +
{{JSRef}}
+ +

El mètode setMinutes() assigna els minuts a una data especificada, d'acord a l'hora local.

+ +

Sintaxi

+ +
objecteData.setMinutes(minuts[, segons[, milisegons]])
+ +

Versions anteriors a JavaScript 1.3

+ +
objecteData.setMinutes(minuts)
+ +

Paràmetres

+ +
+
minuts
+
Un nombre sencer entre 0 i 59 que representa els minuts.
+
segons
+
Opcional. Un nombre sencer entre 0 i 59 que representa els segons.
+
milisegons
+
Opcional. Un nombre sencer entre 0 i 999 que representa els milisegons.
+
+ +

Descripció

+ +

Si no s'especifiquen els paràmetres minuts, segons i milisegons s'utilitzen els valors retornats per {{jsxref("Date.prototype.getSeconds()", "getSeconds()")}} i {{jsxref("Date.prototype.getMilliseconds()", "getMilliseconds()")}}.

+ +

Si es passa un paràmetre que està fora del rang esperat, el mètode setMinutes() actualitza els altres paràmetres per a acceptar el nombre. Per exemple, si es passa 100 com a segons, els minuts seran incrementats en 1 (minuts + 1), i s'emprarà 40 com a segons.

+ +

Exemples

+ +

Utilitzar setMinutes()

+ +
var elGranDia = new Date();
+elGranDia.setMinutes(45);
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.9.5.32', 'Date.prototype.setMinutes')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.setminutes', 'Date.prototype.setMinutes')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Date.prototype.getMinutes()")}}
    • +
  • {{jsxref("Date.prototype.setUTCMinutes()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/date/setmonth/index.html b/files/ca/web/javascript/reference/global_objects/date/setmonth/index.html new file mode 100644 index 0000000000..a84f51df7c --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/date/setmonth/index.html @@ -0,0 +1,126 @@ +--- +title: Date.prototype.setMonth() +slug: Web/JavaScript/Referencia/Objectes_globals/Date/setMonth +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setMonth +--- +
{{JSRef}}
+ +

El mètode setMonth() assigna el mes per a una data especificada d'acord a l'any assignat previament.

+ +

Sintaxi

+ +
objecteData.setMonth(mes[, dia])
+ +

Versions anteriors a JavaScript 1.3

+ +
objecteData.setMonth(mes)
+ +

Paràmetres

+ +
+
mes
+
Un nombre sencer entre 0 i 11 que representa els mesos des de gener fins a desembre
+
dia
+
Opcional. Un nombre sencer entre 1 i 31 que representa el dia del mes.
+
 
+
+ +

Descripció

+ +

Si no s'especifica el paràmetre dia s'utilitza el valor retornat pel mètode {{jsxref("Date.prototype.getDate()", "getDate()")}}.

+ +

Si es passa un paràmetre que està fora del rang esperat, el mètode setMonth() actualitza els altres paràmetres per a acceptar el nombre. Per exemple, si es passa 15 com a mes, l'any serà incrementat en 1 (any + 1), i s'emprarà 3 com a mes.

+ +

Exemples

+ +

Utilitzar setMonth()

+ +
var elGranDia = new Date();
+elGranDia.setMonth(6);
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.9.5.38', 'Date.prototype.setMonth')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.setmonth', 'Date.prototype.setMonth')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Date.prototype.getMonth()")}}
    • +
  • {{jsxref("Date.prototype.setUTCMonth()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/date/setseconds/index.html b/files/ca/web/javascript/reference/global_objects/date/setseconds/index.html new file mode 100644 index 0000000000..60ea2c0ae3 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/date/setseconds/index.html @@ -0,0 +1,125 @@ +--- +title: Date.prototype.setSeconds() +slug: Web/JavaScript/Referencia/Objectes_globals/Date/setSeconds +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setSeconds +--- +
{{JSRef}}
+ +

El mètode setSeconds() assigna els segons per a una data especificada, en temps local.

+ +

Sintaxi

+ +
objecteData.setSeconds(segons[, milisegons])
+ +

Versions anteriors a JavaScript 1.3

+ +
objecteData.setSeconds(segons)
+ +

Paràmetres

+ +
+
segons
+
Un nombre sencer entre 0 i 59 que representa els segons.
+
milisegons
+
Opcional. Un nombre sencer entre 0 i 999 que representa els milisegons.
+
+ +

Descripció

+ +

Si no s'especifica el paràmetre milisegons s'utilitza el valor retornat pel mètode {{jsxref("Date.prototype.getMilliseconds()", "getMilliseconds()")}}.

+ +

Si es passa un paràmetre que està fora del rang esperat, el mètode setSeconds() actualitza els altres paràmetres per a acceptar el nombre. Per exemple, si es passa 100 com a segons, els minuts seran incrementats en 1 (minuts + 1), i s'emprarà 40 com a segons.

+ +

Exemples

+ +

Utilitzar setSeconds()

+ +
var elGranDia = new Date();
+elGranDia.setSeconds(30);
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacionsEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.9.5.30', 'Date.prototype.setSeconds')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.setseconds', 'Date.prototype.setSeconds')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Date.prototype.getSeconds()")}}
    • +
  • {{jsxref("Date.prototype.setUTCSeconds()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/date/settime/index.html b/files/ca/web/javascript/reference/global_objects/date/settime/index.html new file mode 100644 index 0000000000..9774f3ee4c --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/date/settime/index.html @@ -0,0 +1,118 @@ +--- +title: Date.prototype.setTime() +slug: Web/JavaScript/Referencia/Objectes_globals/Date/setTime +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setTime +--- +
{{JSRef}}
+ +

El mètode setTime() configura l'objecte {{jsxref("Date")}} amb un nombre que representa un temps en milisegons que han passat des de la mitjanit de l'ú de gener de 1970, en temps universal.

+ +

Sintaxi

+ +
objecteData.setTime(temps)
+ +

Paràmetres

+ +
+
temps
+
Un nombre sencer que representa el nombre de milisegons que han passat des de l'1 de gener de 1970 00:00:00 UTC.
+
+ +

Descripció

+ +

Utilitzeu el mètode setTime() per a assignar una data i hora a un objecte de tipus {{jsxref("Date")}}.

+ +

Exemples

+ +

Utilitzar setTime()

+ +
var elGranDia = new Date('July 1, 1999');
+var elMateixGranDia = new Date();
+elMateixGranDia.setTime(elGranDia.getTime());
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.9.5.27', 'Date.prototype.setTime')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.settime', 'Date.prototype.setTime')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Date.prototype.getTime()")}}
    • +
  • {{jsxref("Date.prototype.setUTCHours()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/date/setutcdate/index.html b/files/ca/web/javascript/reference/global_objects/date/setutcdate/index.html new file mode 100644 index 0000000000..109178f66a --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/date/setutcdate/index.html @@ -0,0 +1,119 @@ +--- +title: Date.prototype.setUTCDate() +slug: Web/JavaScript/Referencia/Objectes_globals/Date/setUTCDate +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCDate +--- +
{{JSRef}}
+ +

El mètode setUTCDate() assigna el dia del mes per a una data especificada, en temps universal.

+ +

Sintaxi

+ +
objecteData.setUTCDate(dia)
+ +

Paràmetres

+ +
+
dia
+
Un nombre sencer de 1 a 31, que representa el dia del mes.
+
+ +

Descripció

+ +

If a parameter you specify is outside of the expected range, setUTCDate() attempts to update the date information in the {{jsxref("Date")}} object accordingly. For example, if you use 40 for dayValue, and the month stored in the {{jsxref("Date")}} object is June, the day will be changed to 10 and the month will be incremented to July.

+ +

Si es passa un paràmetre que està fora del rang esperat, el mètode setUTCDate() actualitza els altres paràmetres per a acceptar el nombre. Per exemple, si es passa 40 com a dia, i el mes especificat a l'objecte {{jsxref("Date")}} és juny, el dia es canviarà a 10 i el mes serà incrementat a juliol.

+ +

Exemples

+ +

Utilitzar setUTCDate()

+ +
var elGranDia = new Date();
+elGranDia.setUTCDate(20);
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.3.
{{SpecName('ES5.1', '#sec-15.9.5.37', 'Date.prototype.setUTCDate')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.setutcdate', 'Date.prototype.setUTCDate')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Date.prototype.getUTCDate()")}}
    • +
  • {{jsxref("Date.prototype.setDate()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/date/setutcfullyear/index.html b/files/ca/web/javascript/reference/global_objects/date/setutcfullyear/index.html new file mode 100644 index 0000000000..55185a431b --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/date/setutcfullyear/index.html @@ -0,0 +1,123 @@ +--- +title: Date.prototype.setUTCFullYear() +slug: Web/JavaScript/Referencia/Objectes_globals/Date/setUTCFullYear +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCFullYear +--- +
{{JSRef}}
+ +

El mètode setUTCFullYear() assigna l'any sencer a la data especificada d'acord amb el temps universal.

+ +

Sintaxi

+ +
objecteData.setUTCFullYear(any[, mes[, dia]])
+ +

Paràmetres

+ +
+
any
+
Un nombre sencer que representa el valor numèric de l'any, per exemple, 1995.
+
mes
+
Un nombre sencer entre 0 i 11 que representa el mes.
+
dia
+
Opcional. Un nombre sencer entre 1 i 31 que representa el dia del mes. Si s'especifica el paràmetre dia, també s'ha d'especificar el paràmetre mes.
+
+ +

Descripció

+ +

Si no s'especifica els paràmetres mes o dia s'utilitza el valor retornat pels mètodes getMonth() i getDate().

+ +

Si es passa un paràmetre que està fora del rang esperat, el mètode setUTCFullYear() actualitza els altres paràmetres per a acceptar el nombre. Per exemple, si es passa 15 com a mes, l'any serà incrementat en 1 (any + 1), i s'emprarà 3 com a mes.

+ +

Exemples

+ +

Utilitzar setUTCFullYear()

+ +
var elGranDia = new Date();
+elGranDia.setUTCFullYear(1997);
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.3.
{{SpecName('ES5.1', '#sec-15.9.5.41', 'Date.prototype.setUTCFullYear')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.setutcfullyear', 'Date.prototype.setUTCFullYear')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Date.prototype.getUTCFullYear()")}}
    • +
  • {{jsxref("Date.prototype.setFullYear()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/date/setutchours/index.html b/files/ca/web/javascript/reference/global_objects/date/setutchours/index.html new file mode 100644 index 0000000000..3c75ea903c --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/date/setutchours/index.html @@ -0,0 +1,125 @@ +--- +title: Date.prototype.setUTCHours() +slug: Web/JavaScript/Referencia/Objectes_globals/Date/setUTCHours +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCHours +--- +
{{JSRef}}
+ +

El mètode setUTCHours() assigna l'hora per a una data especificada d'acord al temps universal, i retorna el nombre de milisegons que han passat des de l'ú de gener de 1970 00:00:00 UTC fins al temps representat per l'instància {{jsxref("Date")}} actualitzada.

+ +

Sintaxi

+ +
objecteData.setUTCHours(hores[, minuts[, segons[, milisegons]]])
+ +

Paràmetres

+ +
+
hores
+
Un nombre sencer entre 0 i 23, que representa l'hora.
+
minuts
+
Opcional. Un nombre sencer entre 0 i 59 que representa els minuts.
+
segons
+
Oppcional. Un nombre sencer entre 0 i 59 que representa els segons. Si s'especifica segons també s'ha d'expecificar minuts.
+
milisegons
+
Opcional. Un nombre sencer entre 0 i 999 que representa els milisegons. Si s'especifica milisegons també s'han d'especificar minuts i segons.
+
+ +

Descripció

+ +

Si no s'especifica els paràmetres minuts, segons o milisegons s'utilitza el valor retornat pels mètodes {{jsxref("Date.prototype.getUTCMinutes()", "getUTCMinutes()")}}, {{jsxref("Date.prototype.getUTCSeconds()", "getUTCSeconds()")}}, i {{jsxref("Date.prototype.getUTCMilliseconds()", "getUTCMilliseconds()")}}.

+ +

Si es passa un paràmetre que està fora del rang esperat, el mètode setUTCHours() actualitza els altres paràmetres per a acceptar el nombre. Per exemple, si es passa 100 com a segons, els minuts seran incrementats en 1 (minuts + 1), i s'emprarà 40 com a segons.

+ +

Exemples

+ +

Utilitzar setUTCHours()

+ +
var elGranDia = new Date();
+elGranDia.setUTCHours(8);
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.3.
{{SpecName('ES5.1', '#sec-15.9.5.35', 'Date.prototype.setUTCHours')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.setutchours', 'Date.prototype.setUTCHours')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Date.prototype.getUTCHours()")}}
    • +
  • {{jsxref("Date.prototype.setHours()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/date/setutcmilliseconds/index.html b/files/ca/web/javascript/reference/global_objects/date/setutcmilliseconds/index.html new file mode 100644 index 0000000000..e3265e247f --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/date/setutcmilliseconds/index.html @@ -0,0 +1,117 @@ +--- +title: Date.prototype.setUTCMilliseconds() +slug: Web/JavaScript/Referencia/Objectes_globals/Date/setUTCMilliseconds +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCMilliseconds +--- +
{{JSRef}}
+ +

El mètode setUTCMilliseconds() assigna els milisegons a la data sepecificada d'acord l'hora local.

+ +

Sintaxi

+ +
objecteData.setUTCMilliseconds(milisegons)
+ +

Paràmetres

+ +
+
milisegons
+
Un nombre sencer entre 0 i 999 que representa els milisegons.
+
+ +

Descripció

+ +

Si es passa un paràmetre que està fora del rang esperat, el mètode setUTCMilliseconds() actualitza els altres paràmetres per a acceptar el nombre. Per exemple, si es passa 1100 com a milisegons, els segons seran incrementats en 1 (segons + 1), i s'emprarà 100 com a milisegons.

+ +

Exemples

+ +

Utilitzar setUTCMilliseconds()

+ +
var elGranDia = new Date();
+elGranDia.setUTCMilliseconds(500);
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.3.
{{SpecName('ES5.1', '#sec-15.9.5.29', 'Date.prototype.setUTCMilliseconds')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.setutcmilliseconds', 'Date.prototype.setUTCMilliseconds')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Date.prototype.getUTCMilliseconds()")}}
    • +
  • {{jsxref("Date.prototype.setMilliseconds()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/date/setutcminutes/index.html b/files/ca/web/javascript/reference/global_objects/date/setutcminutes/index.html new file mode 100644 index 0000000000..5551364e52 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/date/setutcminutes/index.html @@ -0,0 +1,123 @@ +--- +title: Date.prototype.setUTCMinutes() +slug: Web/JavaScript/Referencia/Objectes_globals/Date/setUTCMinutes +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCMinutes +--- +
{{JSRef}}
+ +

El mètode setUTCMinutes() assigna els minuts per a la data especificada, segons l'hora local.

+ +

Sintaxi

+ +
objecteData.setUTCMinutes(minuts[, segons[, milisegons]])
+ +

Paràmetres

+ +
+
minuts
+
Un nombre sencer entre 0 i 59, que representa els minuts.
+
segons
+
Oppcional. Un nombre sencer entre 0 i 59 que representa els segons. Si s'especifica segons també s'ha d'expecificar minuts.
+
milisegons
+
Opcional. Un nombre sencer entre 0 i 999 que representa els milisegons. Si s'especifica milisegons també s'han d'especificar minuts i segons.
+
+ +

Descripció

+ +

Si no s'especifica els paràmetres segons o milisegons s'utilitza el valor retornat pels mètodes {{jsxref("Date.prototype.getUTCSeconds()", "getUTCSeconds()")}} i {{jsxref("Date.prototype.getUTCMilliseconds()", "getUTCMilliseconds()")}}.

+ +

Si es passa un paràmetre que està fora del rang esperat, el mètode setUTCMinutes() actualitza els altres paràmetres per a acceptar el nombre. Per exemple, si es passa 100 com a segons, els minuts seran incrementats en 1 (minuts + 1), i s'emprarà 40 com a segons.

+ +

Exemples

+ +

Utilitzar setUTCMinutes()

+ +
var elGranDia = new Date();
+elGranDia.setUTCMinutes(43);
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.3.
{{SpecName('ES5.1', '#sec-15.9.5.33', 'Date.prototype.setUTCMinutes')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.setutcminutes', 'Date.prototype.setUTCMinutes')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Date.prototype.getUTCMinutes()")}}
    • +
  • {{jsxref("Date.prototype.setMinutes()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/date/setutcmonth/index.html b/files/ca/web/javascript/reference/global_objects/date/setutcmonth/index.html new file mode 100644 index 0000000000..e06f0fba64 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/date/setutcmonth/index.html @@ -0,0 +1,121 @@ +--- +title: Date.prototype.setUTCMonth() +slug: Web/JavaScript/Referencia/Objectes_globals/Date/setUTCMonth +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCMonth +--- +
{{JSRef}}
+ +

El mètode setUTCMonth() assigna el mes per a la data especificada segons el temps universal.

+ +

Sintaxi

+ +
objecteData.setUTCMonth(mes[, dia])
+ +

Paràmetres

+ +
+
mes
+
Un nombre sencer entre 0 i 11 que representa els mesos des de gener fins a desembre
+
dia
+
Opcional. Un nombre sencer entre 1 i 31 que representa el dia del mes.
+
+ +

Descripció

+ +

Si no s'especifica el paràmetre dia s'utilitza el valor retornat pel mètode.{{jsxref("Date.prototype.getUTCDate()", "getUTCDate()")}}.

+ +

Si es passa un paràmetre que està fora del rang esperat, el mètode setUTCMonth() actualitza els altres paràmetres per a acceptar el nombre. Per exemple, si es passa 15 com a mes, l'any serà incrementat en 1 (any + 1), i s'emprarà 3 com a mes.

+ +

Exemples

+ +

Utilitzar setUTCMonth()

+ +
var elGranDia = new Date();
+elGranDia.setUTCMonth(11);
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.3.
{{SpecName('ES5.1', '#sec-15.9.5.39', 'Date.prototype.setUTCMonth')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.setutcmonth', 'Date.prototype.setUTCMonth')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Date.prototype.getUTCMonth()")}}
    • +
  • {{jsxref("Date.prototype.setMonth()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/date/setutcseconds/index.html b/files/ca/web/javascript/reference/global_objects/date/setutcseconds/index.html new file mode 100644 index 0000000000..66f33a9e1b --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/date/setutcseconds/index.html @@ -0,0 +1,121 @@ +--- +title: Date.prototype.setUTCSeconds() +slug: Web/JavaScript/Referencia/Objectes_globals/Date/setUTCSeconds +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCSeconds +--- +
{{JSRef}}
+ +

El mètode setUTCSeconds() assigna els segons a la data especificada, segons el temps universal.

+ +

Sintaxi

+ +
objecteData.setUTCSeconds(segons[, milisegons])
+ +

Paràmetres

+ +
+
segons
+
Un nombre sencer entre 0 i 59 que representa els segons.
+
milisegons
+
Opcional. Un nombre sencer entre 0 i 999 que representa els milisegons.
+
+ +

Descripció

+ +

Si no s'especifica el paràmetre milisegons s'utilitza el valor retornat pel mètode {{jsxref("Date.prototype.getUTCMilliseconds()", "getUTCMilliseconds()")}}.

+ +

Si es passa un paràmetre que està fora del rang esperat, el mètode setUTCSeconds() actualitza els altres paràmetres per a acceptar el nombre. Per exemple, si es passa 100 com a segons, els minuts seran incrementats en 1 (minuts + 1), i s'emprarà 40 com a segons.

+ +

Exemples

+ +

Utilitzar setUTCSeconds()

+ +
var elGranDia = new Date();
+elGranDia.setUTCSeconds(20);
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.3.
{{SpecName('ES5.1', '#sec-15.9.5.31', 'Date.prototype.setUTCSeconds')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.setutcseconds', 'Date.prototype.setUTCSeconds')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Date.prototype.getUTCSeconds()")}}
    • +
  • {{jsxref("Date.prototype.setSeconds()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/date/setyear/index.html b/files/ca/web/javascript/reference/global_objects/date/setyear/index.html new file mode 100644 index 0000000000..ead16f2d21 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/date/setyear/index.html @@ -0,0 +1,124 @@ +--- +title: Date.prototype.setYear() +slug: Web/JavaScript/Referencia/Objectes_globals/Date/setYear +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setYear +--- +
{{JSRef}} {{deprecated_header}}
+ +

El mètode setYear() assigna l'any per a una data especificada, d'acord a l'hora local. Com que setYear() no utilitza anys complerts ("el problema de l'any 2000"), aquest mètode està en desús i s'ha reemplaçat pel mètode {{jsxref("Date.prototype.setFullYear()", "setFullYear()")}}.

+ +

Sintaxi

+ +
objecteData.setYear(any)
+ +

Paràmetres

+ +
+
any
+
Un nombre sencer.
+
+ +

Descripció

+ +

Si any és un nombre entre 0 i 99 (inclòs), llavors s'assigna 1900 + any a objecteData. En cas contrari, s'assigna any a objecteData.

+ +

Exemples

+ +

Utilitzar setYear()

+ +

Les dues primeres línies assignen el valor 1996 a l'any. La tercera línia assigna el valor 2000 a l'any.

+ +
var elGranDia = new Date();
+
+elGranDia.setYear(96);
+elGranDia.setYear(1996);
+elGranDia.setYear(2000);
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-B.2.5', 'Date.prototype.getYear')}}{{Spec2('ES5.1')}}Definit a l'annex de compatibilitat (informatiu).
{{SpecName('ES6', '#sec-date.prototype.setyear', 'Date.prototype.getYear')}}{{Spec2('ES6')}}Definit a l'annex de característiques adicionals per a navegadors web (normatiu).
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Date.prototype.getFullYear()")}}
    • +
  • {{jsxref("Date.prototype.getUTCFullYear()")}}
    • +
  • {{jsxref("Date.prototype.setFullYear()")}}
    • +
  • {{jsxref("Date.prototype.setUTCFullYear()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/date/todatestring/index.html b/files/ca/web/javascript/reference/global_objects/date/todatestring/index.html new file mode 100644 index 0000000000..9548215179 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/date/todatestring/index.html @@ -0,0 +1,115 @@ +--- +title: Date.prototype.toDateString() +slug: Web/JavaScript/Referencia/Objectes_globals/Date/toDateString +translation_of: Web/JavaScript/Reference/Global_Objects/Date/toDateString +--- +
{{JSRef}}
+ +

El mètode toDateString() retorna la part de la data d'un objecte {{jsxref("Date")}} en un format entenible per persones en anglés amerià.

+ +

Sintaxi

+ +
objecteData.toDateString()
+ +

Descripció

+ +

Les instàncies de Date representen un punt específic en el temps. Una crida al mètode toString() retornarà la dada en un format entenible per persones, en anglés americà. Al motor SpiderMonkey, aquest format consisteix en la part de la data (dia, mes i any) seguida de la part de l'hora (hores, minuts, segons i zona horària). De vegades és convenient obtenir un string només de la part de l'hora; aquesta és la raó de ser del mètode toDateString().

+ +

El mètode toDateString() resulta especialment útil perquè els motors que compleixen amb el standard ECMA-262 poden retornar resultats diferents al string obtingut mitjançant el mètode toString() en objectes Date, ja que el format depèn totalment de la implementació; això implica que partir el string per a obtenir només la part de temps pot no produïr un resultat consistent en tots els motors.

+ +

Exemples

+ +

Ús bàsic de toDateString()

+ +
var d = new Date(1993, 6, 28, 14, 39, 7);
+
+console.log(d.toString());     // imprimeix Wed Jul 28 1993 14:39:07 GMT-0600 (PDT)
+console.log(d.toDateString()); // imprimeix Wed Jul 28 1993
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES3')}}{{Spec2('ES3')}}Definició inicial.
{{SpecName('ES5.1', '#sec-15.9.5.3', 'Date.prototype.toDateString')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.todatestring', 'Date.prototype.toDateString')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Date.prototype.toLocaleDateString()")}}
    • +
  • {{jsxref("Date.prototype.toTimeString()")}}
    • +
  • {{jsxref("Date.prototype.toString()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/date/togmtstring/index.html b/files/ca/web/javascript/reference/global_objects/date/togmtstring/index.html new file mode 100644 index 0000000000..08e63be739 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/date/togmtstring/index.html @@ -0,0 +1,115 @@ +--- +title: Date.prototype.toGMTString() +slug: Web/JavaScript/Referencia/Objectes_globals/Date/toGMTString +translation_of: Web/JavaScript/Reference/Global_Objects/Date/toGMTString +--- +
{{JSRef}} {{deprecated_header}}
+ +

El mètode toGMTString() converteix una data a un string, utilitzant les convencions del Greenwich Mean Time (GMT). El format exacte del valor retornat per toGMTString() és depenent de la plataforma i el navegador, per norma general hauria de representar la data en una forma entenible per persones.

+ +
+

Nota: toGMTString() està en desús i no es recomana fer-lo servir més. Es mantè només per a compatibilitat amb codi vell que l'utilitzi; en comptes d'aquest mètode utilitzeu {{jsxref("Date.prototype.toUTCString()", "toUTCString()")}}.

+
+ +

Sintaxi

+ +
objecteData.toGMTString()
+ +

Exemples

+ +

Exemple senzill

+ +

En aquest exemple el mètode toGMTString() converteix la data a GMT (UTC) utilitzant el desplaçament de zona horaria donat pel sistema operatiu i retorna un valor string que té aproximadament la forma que trobareu a continuació. El format exacte dependrà de la plataforma.

+ +
var avui = new Date();
+var str = avui.toGMTString();  // en desús! utilitzeu toUTCString()
+
+console.log(str);               // Mon, 18 Dec 1995 17:28:35 GMT
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial, però ja marcat com a en desús. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-B.2.6', 'Date.prototype.toGMTString')}}{{Spec2('ES5.1')}}Definit a l'annex de compatibilitat (informatiu).
{{SpecName('ES6', '#sec-date.prototype.togmtstring', 'Date.prototype.toGMTString')}}{{Spec2('ES6')}}Definit a l'annex per a característiques adicionals per a navegadors web (normatiu).
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Date.prototype.toLocaleDateString()")}}
    • +
  • {{jsxref("Date.prototype.toTimeString()")}}
    • +
  • {{jsxref("Date.prototype.toUTCString()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/date/toisostring/index.html b/files/ca/web/javascript/reference/global_objects/date/toisostring/index.html new file mode 100644 index 0000000000..759e53225c --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/date/toisostring/index.html @@ -0,0 +1,134 @@ +--- +title: Date.prototype.toISOString() +slug: Web/JavaScript/Referencia/Objectes_globals/Date/toISOString +translation_of: Web/JavaScript/Reference/Global_Objects/Date/toISOString +--- +
{{JSRef}}
+ +

El mètode toISOString() retorna una cadena en un format ISO extès simplificat (ISO 8601), el qual sempre té 24 caràcters de llargària: YYYY-MM-DDTHH:mm:ss.sssZ. La zona horària és sempre UTC, tal i com indica el sufix "Z".

+ +

Sintaxi

+ +
dateObj.toISOString()
+ +

Exemples

+ +

Utilitzar toISOString()

+ +
var today = new Date('05 October 2011 14:48 UTC');
+
+console.log(today.toISOString()); // Retorna 2011-10-05T14:48:00.000Z
+
+ +

L'exemple anterior interpreta una cadena no estàndard que pot no ser interpretada correctament per navegadors que no siguin mozilla.

+ +

Polyfill

+ +

Aquest mètode es va estandaritzar en la 5a edició d'ECMA-262. Els motors que no s'hagin actualitzat per suportar aquest mètode poden evitar al mancança d'aquest mètode utilitzant les següents accions:

+ +
if (!Date.prototype.toISOString) {
+  (function() {
+
+    function pad(number) {
+      if (number < 10) {
+        return '0' + number;
+      }
+      return number;
+    }
+
+    Date.prototype.toISOString = function() {
+      return this.getUTCFullYear() +
+        '-' + pad(this.getUTCMonth() + 1) +
+        '-' + pad(this.getUTCDate()) +
+        'T' + pad(this.getUTCHours()) +
+        ':' + pad(this.getUTCMinutes()) +
+        ':' + pad(this.getUTCSeconds()) +
+        '.' + (this.getUTCMilliseconds() / 1000).toFixed(3).slice(2, 5) +
+        'Z';
+    };
+
+  }());
+}
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES5.1', '#sec-15.9.5.43', 'Date.prototype.toISOString')}}{{Spec2('ES5.1')}}Definició inicial. Implementat en JavaScript 1.8.
{{SpecName('ES6', '#sec-date.prototype.toisostring', 'Date.prototype.toISOString')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatIE("9")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Date.prototype.toLocaleDateString()")}}
    • +
  • {{jsxref("Date.prototype.toTimeString()")}}
    • +
  • {{jsxref("Date.prototype.toUTCString()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/date/tojson/index.html b/files/ca/web/javascript/reference/global_objects/date/tojson/index.html new file mode 100644 index 0000000000..8b583470bf --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/date/tojson/index.html @@ -0,0 +1,108 @@ +--- +title: Date.prototype.toJSON() +slug: Web/JavaScript/Referencia/Objectes_globals/Date/toJSON +translation_of: Web/JavaScript/Reference/Global_Objects/Date/toJSON +--- +
{{JSRef}}
+ +

El mètode toJSON() retorna una representació de tipus cadena de l'objecte {{jsxref("Date")}}.

+ +

Sintaxi

+ +
dateObj.toJSON()
+ +

Descripció

+ +

Les instàncies {{jsxref("Date")}} referencien a un punt concret en el temps. La crida toJSON() retorna una cadena (usant {{jsxref("Date.prototype.toISOString()", "toISOString()")}}) en representació del valor de l'objecte {{jsxref("Date")}}. Generalment aquest mètode s'utilitza, per defecte, per serialitzar eficaçment objectes {{jsxref("Date")}} durant la serialització {{Glossary("JSON")}}.

+ +

Exemples

+ +

Utilitzar toJSON()

+ +
var jsonDate = (new Date()).toJSON();
+var backToDate = new Date(jsonDate);
+
+console.log(jsonDate); //2015-10-26T07:46:36.611Z
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES5.1', '#sec-15.9.5.44', 'Date.prototype.toJSON')}}{{Spec2('ES5.1')}}Definició inicial. Implementat en JavaScript 1.8.5.
{{SpecName('ES6', '#sec-date.prototype.tojson', 'Date.prototype.toJSON')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Date.prototype.toLocaleDateString()")}}
    • +
  • {{jsxref("Date.prototype.toTimeString()")}}
    • +
  • {{jsxref("Date.prototype.toUTCString()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/date/tostring/index.html b/files/ca/web/javascript/reference/global_objects/date/tostring/index.html new file mode 100644 index 0000000000..8482fe5298 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/date/tostring/index.html @@ -0,0 +1,142 @@ +--- +title: Date.prototype.toString() +slug: Web/JavaScript/Referencia/Objectes_globals/Date/toString +translation_of: Web/JavaScript/Reference/Global_Objects/Date/toString +--- +
{{JSRef}}
+ +

El mètode toString() retorna un string que representa l'objecte {{jsxref("Date")}} especificat.

+ +

Sintaxi

+ +
objecteDate.toString()
+ +

Paràmetres

+ +

Cap.

+ +

Descripció

+ +

L'objecte {{jsxref("Date")}} sobreescriu el mètode toString() de l'objecte {{jsxref("Object")}}; no hereta {{jsxref("Object.prototype.toString()")}}. Per a objectes {{jsxref("Date")}}, el mètode toString() retorna un string que representa l'objecte.

+ +

El mètode toString() sempre retorna una representació en forma de string de la data en anglés americà.

+ +

JavaScript cridarà el mètode toString() de manera automàtica quan una data requereix ser representada com a text o bé quan una data formi part d'una concatenació de strings.

+ +

El mètode toString() és genèric. Si this no fa referència a una instància de {{jsxref("Date")}}, retornarà "Invalid Date".

+ +

Exemples

+ +

Utilitzar toString()

+ +

L'exemple següent assigna el valor de toString() d'un objecte {{jsxref("Date")}} a myVar:

+ +
var x = new Date();
+myVar = x.toString(); // assigna un valor a myVar simimlar a:
+// Mon Sep 28 1998 14:36:22 GMT-0700 (Pacific Daylight Time)
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.9.5.2', 'Date.prototype.toLocaleTimeString')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.tostring', 'Date.prototype.toString')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Mètode genèric{{CompatUnknown}}{{CompatGeckoDesktop("41")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Mètode genèric{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("41")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Object.prototype.toString()")}}
    • +
  • {{jsxref("Date.prototype.toDateString()")}}
    • +
  • {{jsxref("Date.prototype.toLocaleString()")}}
    • +
  • {{jsxref("Date.prototype.toTimeString()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/date/totimestring/index.html b/files/ca/web/javascript/reference/global_objects/date/totimestring/index.html new file mode 100644 index 0000000000..aac8de7a85 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/date/totimestring/index.html @@ -0,0 +1,115 @@ +--- +title: Date.prototype.toTimeString() +slug: Web/JavaScript/Referencia/Objectes_globals/Date/toTimeString +translation_of: Web/JavaScript/Reference/Global_Objects/Date/toTimeString +--- +
{{JSRef}}
+ +

El mètode toTimeString() retorna la part de temps d'un objecte de tipus {{jsxref("Date")}} formatada de tal forma que és entenible per les persones, utilitzan anglés americà.

+ +

Sintaxi

+ +
objecteData.toTimeString()
+ +

Descripció

+ +

Les instàncies de {{jsxref("Date")}} representen un punt específic en el temps. Una crida al mètode {{jsxref("Date.prototype.toString()", "toString()")}} retornarà la dada en un format entenible per persones, en anglés americà. Al motor SpiderMonkey, aquest format consisteix en la part de la data (dia, mes i any) seguida de la part de l'hora (hores, minuts, segons i zona horària). De vegades és convenient obtenir un string només de la part de l'hora; aquesta és la raó de ser del mètode toTimeString().

+ +

El mètode toTimeString() resulta especialment útil perquè els motors que compleixen amb el standard ECMA-262 poden retornar resultats diferents al string obtingut mitjançant el mètode {{jsxref("Date.prototype.toString()", "toString()")}} en objectes {{jsxref("Date")}}, ja que el format depèn totalment de la implementació; això implica que partir el string per a obtenir només la part de temps pot no produïr un resultat consistent en tots els motors.

+ +

Exemples

+ +

Utilització bàsica de toTimeString()

+ +
var d = new Date(1993, 6, 28, 14, 39, 7);
+
+console.log(d.toString());     // escriu Wed Jul 28 1993 14:39:07 GMT-0600 (PDT)
+console.log(d.toTimeString()); // escriu 14:39:07 GMT-0600 (PDT)
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES3')}}{{Spec2('ES3')}}Definició inicial.
{{SpecName('ES5.1', '#sec-15.9.5.4', 'Date.prototype.toTimeString')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.totimestring', 'Date.prototype.toTimeString')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Date.prototype.toLocaleTimeString()")}}
    • +
  • {{jsxref("Date.prototype.toDateString()")}}
    • +
  • {{jsxref("Date.prototype.toString()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/date/utc/index.html b/files/ca/web/javascript/reference/global_objects/date/utc/index.html new file mode 100644 index 0000000000..37bb2bc369 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/date/utc/index.html @@ -0,0 +1,142 @@ +--- +title: Date.UTC() +slug: Web/JavaScript/Referencia/Objectes_globals/Date/UTC +translation_of: Web/JavaScript/Reference/Global_Objects/Date/UTC +--- +
{{JSRef}}
+ +

El mètode Date.UTC() accepta els mateixos paràmetres que la forma més llarga del constructor, i retorna en un objecte de tipus {{jsxref("Date")}} el nombre de milisegons que han passat des de l'u de gener de 1970 a les 00:00:00, temps universal.

+ +

Sintaxi

+ +
Date.UTC(any, mes[, dia[, hora[, minuts[, segons[, milisegons]]]]])
+ +

Paràmetres

+ +
+
any
+
Un any major que 1900.
+
mes
+
Un nombre sencer entre 0 i 11 que representa el mes.
+
dia
+
Opcional. Un nombre sencer entre 1 i 31 que representa el dia del mes.
+
hora
+
Opcional. Un nombre sencer entre 0 i 23 que representa l'hora.
+
minuts
+
Opcional. Un nombre sencer entre 0 i 59 que representa els minuts.
+
segons
+
Opcional. Un nombre sencer entre 0 i 59 que representa els segons.
+
milisegons
+
Opcional. Un nombre sencer entre 0 i 999 que representa els milisegons.
+
+ +

Descripció

+ +

UTC() accepta una data en forma de paràmetres separats per comes i retorna el nombre de milisegons que han passat entre l'u de gener de 1970 a les 00:00:00 en temps universal, i el temps especificat pels paràmetres.

+ +

L'any ha de ser especificat plenament; per exemple, 1998. Si s'especifica un any entre 0 i 99, el mètode el converteix a un any del segle 20 (1900 + any); per exemple, si s'especifica 95, s'emprarà l'any 1995.

+ +

El mètode UTC() es diferencia del constructor {{jsxref("Date")}} en dues coses.

+ +
    +
  • Date.UTC() utilitza el temps universal en comptes del temps local.
    • +
  • Date.UTC() retorna el temps com a nombre en comptes de crear un objecte de tipus {{jsxref("Date")}}.
    • +
+ +

Si es passa un paràmetre que està fora del rang esperat, el mètode UTC() actualitza els altres paràmetres per a acceptar el nombre. Per exemple, si es passa 15 com a mes, l'any serà incrementat en 1 (any + 1), i s'emprarà 3 com a mes.

+ +

Com que UTC() és un mètode estàtic de {{jsxref("Date")}}, sempre es crida com a Date.UTC() en comptes de com un mètode d'una instància de {{jsxref("Date")}}.

+ +

Exemples

+ +

Utilitzar Date.UTC()

+ +

La instrucció següent crea un objecte {{jsxref("Date")}} utilitzant temps UTC en comptes del temps local:

+ +
var dataUTC = new Date(Date.UTC(96, 11, 1, 0, 0, 0));
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-date.utc', 'Date.UTC')}}{{Spec2('ES6')}} 
{{SpecName('ES5.1', '#sec-15.9.4.3', 'Date.UTC')}}{{Spec2('ES5.1')}} 
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.0.
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísicaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísicaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Date.parse()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/date/valueof/index.html b/files/ca/web/javascript/reference/global_objects/date/valueof/index.html new file mode 100644 index 0000000000..6c5f810ead --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/date/valueof/index.html @@ -0,0 +1,118 @@ +--- +title: Date.prototype.valueOf() +slug: Web/JavaScript/Referencia/Objectes_globals/Date/valueOf +translation_of: Web/JavaScript/Reference/Global_Objects/Date/valueOf +--- +
{{JSRef}}
+ +

El mètode valueOf() retorna el valor primitiu d'un objecte de tipus {{jsxref("Date")}}.

+ +

Sintaxi

+ +
dateObj.valueOf()
+ +

Paràmetres

+ +

Cap.

+ +

Descripció

+ +

El mètode valueOf() retorna el valor primitiu d'un objecte de tipus {{jsxref("Date")}} en forma de nombre, el nombre de milisegons des de la mitjanit de l'ú de gener de 1970 UTC.

+ +

Aquest mètode és funcionalment equivalent al mètode {{jsxref("Date.prototype.getTime()")}}.

+ +

Aquest mètode és tot sovint emprat internament per JavaScript i no explícitament en codi.

+ +

Exemples

+ +

Utilitzar valueOf()

+ +
var x = new Date(56, 6, 17);
+var myVar = x.valueOf();      // assigna -424713600000 a myVar
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.9.5.8', 'Date.prototype.valueOf')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.valueof', 'Date.prototype.valueOf')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Object.prototype.valueOf()")}}
    • +
  • {{jsxref("Date.prototype.getTime()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/error/columnnumber/index.html b/files/ca/web/javascript/reference/global_objects/error/columnnumber/index.html new file mode 100644 index 0000000000..377c797cd3 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/error/columnnumber/index.html @@ -0,0 +1,83 @@ +--- +title: Error.prototype.columnNumber +slug: Web/JavaScript/Referencia/Objectes_globals/Error/columnNumber +translation_of: Web/JavaScript/Reference/Global_Objects/Error/columnNumber +--- +
{{JSRef("Global_Objects", "Error", "EvalError,InternalError,RangeError,ReferenceError,SyntaxError,TypeError,URIError")}} {{non-standard_header}}
+ +

Resum

+ +

La propietat columnNumber conté el nombre de la columna dins la línia del fitxer on s'ha produit l'error.

+ +

Exemples

+ +

Exemple: Utilitzar columnNumber

+ +
var e = new Error('Error interpretant les dades');
+throw e;
+console.log(e.columnNumber) // 0
+
+ +

Especificacions

+ +

No forma part de cap especificació. No és standard.

+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Error.prototype.stack")}} {{non-standard_inline}}
    • +
  • {{jsxref("Error.prototype.lineNumber")}} {{non-standard_inline}}
    • +
  • {{jsxref("Error.prototype.fileName")}} {{non-standard_inline}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/error/filename/index.html b/files/ca/web/javascript/reference/global_objects/error/filename/index.html new file mode 100644 index 0000000000..dcca532f86 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/error/filename/index.html @@ -0,0 +1,87 @@ +--- +title: Error.prototype.fileName +slug: Web/JavaScript/Referencia/Objectes_globals/Error/fileName +translation_of: Web/JavaScript/Reference/Global_Objects/Error/fileName +--- +
{{JSRef("Global_Objects", "Error", "EvalError,InternalError,RangeError,ReferenceError,SyntaxError,TypeError,URIError")}} {{non-standard_header}}
+ +

Resum

+ +

La propietat fileName conté la ruta al fitxer que ha provocat aquest error.

+ +

Descripció

+ +

Aquesta propietat no standard conté la ruta al fitxer que ha provocat l'error. Si es crida des d'un contexte de depuració, com ara des de Firefox Developer Tools, retorna "debugger eval code".

+ +

Exemples

+ +

Exemple: Utilitzar fileName

+ +
var e = new Error('Dades no tractades');
+throw e;
+// e.fileName podria contrindre quelcom semblant a "file:///C:/example.html"
+
+ +

Especificacions.

+ +

No format part de cap especificació. No és standard.

+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Error.prototype.stack")}} {{non-standard_inline}}
    • +
  • {{jsxref("Error.prototype.columnNumber")}} {{non-standard_inline}}
    • +
  • {{jsxref("Error.prototype.lineNumber")}} {{non-standard_inline}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/error/index.html b/files/ca/web/javascript/reference/global_objects/error/index.html new file mode 100644 index 0000000000..2e1592edc5 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/error/index.html @@ -0,0 +1,224 @@ +--- +title: Error +slug: Web/JavaScript/Referencia/Objectes_globals/Error +translation_of: Web/JavaScript/Reference/Global_Objects/Error +--- +
{{JSRef}}
+ +

Resum

+ +

El constructor Error crea un objecte que representa un error. Quan succeeix un error en temps d'execució JavaScript llença una instància de tipus Error. L'objecte Error també es pot emprar com a objecte base per a excepcions definides per l'usuari. Vegeu més abaix per a tipus d'errors standard que forment part del nucli.

+ +

Sintaxi

+ +
new Error([missatge[, fitxer[, numeroLinia]]])
+ +

Paràmetres

+ +
+
missatge
+
Opcional. Descripció entenible per persones de l'error.
+
fitxer {{non-standard_inline}}
+
Opcional. El valor de la propietat fitxer a l'objecte Error creat. Per defecte pren el valor del nom del fitxer que conté el codi que ha cridat el constructor Error().
+
numeroLinia {{non-standard_inline}}
+
Opcional. El valor de la propietat numeroLinia de l'objecte Error creat. Per defecte rep el valor del número de línia que conté la invocació al constructor Error().
+
+ +

Descripció

+ +

Els errors en temps d'execució esdevenen objectes Error nous que són creats i llençats.

+ +

Aquesta pàgina documenta l'ús de l'objecte Error en si mateix, així com el seu ús com funció constructora. Per a un llistat de les propietats i mètodes heretats per les instàncies de Error, vegeu {{jsxref("Error.prototype")}}.

+ +

Tipus d'errors

+ +

A més del construtor genèric Error hi ha altres sis constructors d'errors que formen part del nucli de JavaScript. Per a excepcions al cantó del client vegeu Sentències manegadores d'excepcions.

+ +
+
{{jsxref("Global_Objects/EvalError", "EvalError")}}
+
Crea una instància que representa un error que succeeix a l'emprar la funció global {{jsxref("Global_Objects/eval", "eval()")}}.
+
{{jsxref("Global_Objects/InternalError", "InternalError")}} {{non-standard_inline}}
+
Crea una instància que representa un error que succeeix quan es llença un error intern des del motor de JavaScript. Per exemple: "massa recursivitat".
+
{{jsxref("Global_Objects/RangeError", "RangeError")}}
+
Crea una instància que representa un error que succeeix quan una variable numèrica o paràmetre està fora del seu rang vàlid.
+
{{jsxref("Global_Objects/ReferenceError", "ReferenceError")}}
+
Crea una instància que representa un error que succeeix quan es deixa de referenciar una referència invàlida.
+
{{jsxref("Global_Objects/SyntaxError", "SyntaxError")}}
+
Crea una instància que representa un error de sintaxi que succeeix a l'interpretar codi dins {{jsxref("Global_Objects/eval", "eval()")}}.
+
{{jsxref("Global_Objects/TypeError", "TypeError")}}
+
Crea una instància que representa un error que succeeix quan una variable o paràmetre és d'un tipus no vàlid.
+
{{jsxref("Global_Objects/URIError", "URIError")}}
+
Crea un error que representa un error que succeeix quan {{jsxref("Global_Objects/encodeURI", "encodeURI()")}} o {{jsxref("Global_Objects/decodeURI", "decodeURl()")}} reben paràmetres invàlids.
+
+ +

Propietats

+ +
+
{{jsxref("Error.prototype")}}
+
Permet afegir propietats a instàncies Error.
+
+ +

Mètodes

+ +

L'objecte global Error no contè mètodes propis. Tot i així, hereta alguns mètodes a través de la cadena de prototipus.

+ +

Instàncies Error

+ +
{{page('ca/docs/JavaScript/Reference/Global_Objects/Error/prototype', 'Descripció')}}
+ +

Propietats

+ +
{{page('ca/docs/JavaScript/Reference/Global_Objects/Error/prototype', 'Propietats')}}
+ +

Mètodes

+ +
{{page('ca/docs/JavaScript/Reference/Global_Objects/Error/prototype', 'Mètodes')}}
+ +

Exemples

+ +

Exemple: Llençar un error genèric

+ +

Normalment hom crea un objecte Error amb la intenció de llençar-lo tot emprant la paraula clau {{jsxref("Statements/throw", "throw")}}. Els errors es poden manegar utilitzant la construcció {{jsxref("Statements/try...catch", "try...catch")}}:

+ +
try {
+  throw new Error('Oooops!');
+} catch (e) {
+  alert(e.name + ': ' + e.message);
+}
+
+ +

Exemple: Manegar un error específic

+ +

this should probably be removedEs pot escollir fer-se càrrec només de tipus d'errors específics comparant el tipus d'error amb la propietat {{jsxref("Object.prototype.constructor", "constructor")}} de l'error o bé, si s'està escrivint el codi per a motors JavaScript moderns, mitjançant la paraula clau {{jsxref("Operators/instanceof", "instanceof")}}:

+ +
try {
+  foo.bar();
+} catch (e) {
+  if (e instanceof EvalError) {
+    alert(e.name + ': ' + e.message);
+  } else if (e instanceof RangeError) {
+    alert(e.name + ': ' + e.message);
+  }
+  // ... etc
+}
+
+ +

Exemple: Tipus d'errors personalitzats

+ +

És possible definir tipus d'errors propis derivats de Error, llençar-los mitjançant throw new MyError()  i utilitzar instanceof MyError per a comprovarel tipus d'error al manegador d'excepcions. A sota trobareu la forma més comuna de fer això.

+ +
+

Advertim que la instància MyError llençada reportarà lineNumber i fileName invàlids, com a mínim a Firefox.

+
+ +

Vegeu també la discussió a StackOverflow "Quina és una bona forma d'extrendre Error a JavaScript?".

+ +
// Crea un nou objecte, que hereta del prototipus constructor Error.
+function MyError(message) {
+  this.name = 'MyError';
+  this.message = message || 'Missatge per defecte';
+}
+MyError.prototype = Object.create(Error.prototype);
+MyError.prototype.constructor = MyError;
+
+try {
+  throw new MyError();
+} catch (e) {
+  console.log(e.name);     // 'MyError'
+  console.log(e.message);  // 'Missatge per defecte'
+}
+
+try {
+  throw new MyError('custom message');
+} catch (e) {
+  console.log(e.name);     // 'MyError'
+  console.log(e.message);  // 'Missatge per defecte'
+}
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.11', 'Error')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-error-objects', 'Error')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Error.prototype")}}
    • +
  • {{jsxref("Statements/throw", "throw")}}
    • +
  • {{jsxref("Statements/try...catch", "try...catch")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/error/linenumber/index.html b/files/ca/web/javascript/reference/global_objects/error/linenumber/index.html new file mode 100644 index 0000000000..7b85f29c19 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/error/linenumber/index.html @@ -0,0 +1,94 @@ +--- +title: Error.prototype.lineNumber +slug: Web/JavaScript/Referencia/Objectes_globals/Error/lineNumber +translation_of: Web/JavaScript/Reference/Global_Objects/Error/lineNumber +--- +
{{JSRef("Global_Objects", "Error", "EvalError,InternalError,RangeError,ReferenceError,SyntaxError,TypeError,URIError")}} {{non-standard_header}}
+ +

Resum

+ +

La propietat lineNumber conté el nombre de la línia del fitxer que ha llençat aquest erro.

+ +

Exemples

+ +

Exemple: Utilitzar lineNumber

+ +
var e = new Error('No he pogut interpretar l\'entrada');
+throw e;
+console.log(e.lineNumber) // 2
+
+ +

Exemple: Exemple alternatiu usant l'event error

+ +
window.addEventListener('error', function(e) {
+  console.log(e.lineno); // 5
+});
+var e = new Error('No he pogut interpretar l\'entrada');
+throw e;
+
+ +

Això és standard i suportat per Chrome, Firefox i provablement altres.

+ +

Especificacions

+ +

No forma part de cap especificació. No és standard.

+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsicOn error object in handled errors{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Error.prototype.stack")}} {{non-standard_inline}}
    • +
  • {{jsxref("Error.prototype.columnNumber")}} {{non-standard_inline}}
    • +
  • {{jsxref("Error.prototype.fileName")}} {{non-standard_inline}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/error/message/index.html b/files/ca/web/javascript/reference/global_objects/error/message/index.html new file mode 100644 index 0000000000..4aa07268fa --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/error/message/index.html @@ -0,0 +1,110 @@ +--- +title: Error.prototype.message +slug: Web/JavaScript/Referencia/Objectes_globals/Error/message +translation_of: Web/JavaScript/Reference/Global_Objects/Error/message +--- +
{{JSRef("Global_Objects", "Error", "EvalError,InternalError,RangeError,ReferenceError,SyntaxError,TypeError,URIError")}}
+ +

Resum

+ +

La propietat message és una descripció en un format amigable pels humans de l'error.

+ +

Descripció

+ +

Aquesta propietat conté una breu descripció de l'error sempre i quan estigui disponible o hagi sigut assignada. SpiderMonkey fa un ús extensiu de la propietat message per a excepcions. El mètode {{jsxref("Error.prototype.toString()")}} utilitza la propietat message combinada amb la propietat {{jsxref("Error.prototype.name", "name")}} per a crear una representació de l'error.

+ +

Per defecte la propietat message és un string buit, però aquest comportament pot ser sobreescrit per una instàcia simplement passant un missatge com a primer argument del {{jsxref("Error", "constructor Error")}}.

+ +

Exemples

+ +

Exemple: Llençar un error personalitzat

+ +
var e = new Error('No he pogut interpretar l\'entrada'); // e.message valdrà 'No he pogut interpretar l\'entrada'
+throw e;
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial.
{{SpecName('ES5.1', '#sec-15.11.4.3', 'Error.prototype.message')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-error.prototype.message', 'Error.prototype.message')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Error.prototype.name")}}
    • +
  • {{jsxref("Error.prototype.toString()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/error/name/index.html b/files/ca/web/javascript/reference/global_objects/error/name/index.html new file mode 100644 index 0000000000..995ecafd5f --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/error/name/index.html @@ -0,0 +1,111 @@ +--- +title: Error.prototype.name +slug: Web/JavaScript/Referencia/Objectes_globals/Error/name +translation_of: Web/JavaScript/Reference/Global_Objects/Error/name +--- +
{{JSRef("Global_Objects", "Error", "EvalError,InternalError,RangeError,ReferenceError,SyntaxError,TypeError,URIError")}}
+ +

Resum

+ +

La propietat name representa un nom per al tipus de error. El valor que rep inicialment aquesta propietat és "Error".

+ +

Descripció

+ +

Per defecte, les instàncies de {{jsxref("Error")}} reben el nom "Error". El mètode Error.prototype.toString() utilitza la propietat name combinada amb la propietat message per a crear una representació de l'error.

+ +

Exemples

+ +

Exemple: Llençar un error personalitzat

+ +
var e = new Error('Entrada no vàlida'); // e.name is 'Error'
+
+e.name = 'ParseError';
+throw e;
+// e.toString() would return 'ParseError: Entrada no vàlida'
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial.
{{SpecName('ES5.1', '#sec-15.11.4.2', 'Error.prototype.name')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-error.prototype.name', 'Error.prototype.name')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Error.prototype.message")}}
    • +
  • {{jsxref("Error.prototype.toString()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/error/stack/index.html b/files/ca/web/javascript/reference/global_objects/error/stack/index.html new file mode 100644 index 0000000000..aa41949423 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/error/stack/index.html @@ -0,0 +1,161 @@ +--- +title: Error.prototype.stack +slug: Web/JavaScript/Referencia/Objectes_globals/Error/Stack +translation_of: Web/JavaScript/Reference/Global_Objects/Error/Stack +--- +
{{JSRef("Global_Objects", "Error", "EvalError,InternalError,RangeError,ReferenceError,SyntaxError,TypeError,URIError")}} {{non-standard_header}}
+ +

Resum

+ +

La propietat no standard stack dels objectes {{jsxref("Error")}} ofereix una traça de quines funcions han estat cridades, en quin ordre, des de quina línia i fitxer, i amb quins arguments. La stack, en forma de string, va de les crides més recent a les més antigues, fins a arribar a la crida original del context global.

+ +

Descripció

+ +

Cada pas estarà separat per una nova línia, on la primera part de cada línia és el nom de la funció (si no es tracta d'una crida des del context global), seguit per pel símbol arroba (@), la ruta del fitxer (excepte quan la funció és la funció constructora de l'error mentre s'està llençant l'error), un punt i coma, i, si hi ha una ruta de fitxer, el nombre de línia. Fixeu-vos que l'objecte {{jsxref("Error")}} també disposa de les propietats filename, lineNumber i columnNumber de l'error llençat (però no de la traça).

+ +

Cal remarcar que aquest és el format utilitzat per Firefox. No hi ha un formateig standard. Tot i així, Safari 6+ i Opera 12- utilitzen un format molt similar. Els navegadors que utilitzen el motor de JavaScript V8 (com ara Chrome, Opera 15+ i el navegador de Android), així com IE10+, d'altra banda, utilitzen un format diferent (vegeu el document de la MSDN error.stack).

+ +

Valors dels arguments a la pila: Abans del ({{bug("744842")}}) de Firefox 14, el nom de la funció anava seguit dels valors dels arguments convertits a string entre parèntesi immediatament abans de l'arroba (@). Un objecte (o un array, etc) apareixeria en la forma convertida "[object Object]", i en conseqüència no podria ser evaluada de nou en objectes. Si que es poden obtenir els valors escalars (tot i que resulta més senzill utilitzar arguments.callee.caller.arguments, així com es pot trobar el nom de la funció a arguments.callee.caller.name). "undefined" apareix com a "(void 0)". Cal tenir en compte que si s'han passat arguments de tipus string que continguin caracters com ara "@", "(", ")" (o bé noms de fitxers), resulta força complicat utiltizar-los per a trencar la línia en les diferents parts que la composen. Degut a això, a partir de Firefox 14 això deixa de ser un problema.

+ +

Exemple

+ +

El següent codi HTML mostra l'ús de la propietat stack.

+ +
<!DOCTYPE HTML>
+<meta charset="UTF-8">
+<title>Exemple de pila de traça</title>
+<body>
+<script>
+function trace() {
+  try {
+    throw new Error('myError');
+  }
+  catch(e) {
+    alert(e.stack);
+  }
+}
+function b() {
+  trace();
+}
+function a() {
+  b(3, 4, '\n\n', undefined, {});
+}
+a('primera crida, primerArgument');
+</script>
+
+ +

Assumint que el codi resideix al fitxer C:\exemple.html en un sistema de fitxers de Windows, aquest generarà un missatge d'alerta amb el text següent:

+ +

A partir de Firefox 30 contindrà el nombre de la columna ({{bug("762556")}}):

+ +
trace@file:///C:/exemple.html:9:17
+b@file:///C:/exemple.html:16:13
+a@file:///C:/exemple.html:19:13
+@file:///C:/exemple.html:21:9
+ +

Firefox 14 a Firefox 29:

+ +
trace@file:///C:/exemple.html:9
+b@file:///C:/exemple.html:16
+a@file:///C:/exemple.html:19
+@file:///C:/exemple.html:21
+ +

Per contra, Firefox 13 i versions prèvies produian el següent text:

+ +
Error("myError")@:0
+trace()@file:///C:/exemple.html:9
+b(3,4,"\n\n",(void 0),[object Object])@file:///C:/exemple.html:16
+a("primera crida, primerArgument")@file:///C:/exemple.html:19
+@file:///C:/exemple.html:21
+ +

Pila de codi evaluat

+ +

A partir de Firefox 30 {{geckoRelease("30")}}, la pila d'error pertanyent a codi dins de crides a Function() i eval() conté informació més detallada sobre la línia i la columna que ha produït l'error dins aquestes crides. Les crides a funcions s'indiquen amb "> Function" i les crides a eval amb "> eval". Vegeu {{bug("332176")}}.

+ +
try {
+  new Function('throw new Error()')();
+} catch (e) {
+  console.log(e.stack);
+}
+
+// anonymous@file:///C:/exemple.html line 7 > Function:1:1
+// @file:///C:/example.html:7:6
+
+
+try {
+  eval("eval('FAIL')");
+} catch (x) {
+  console.log(x.stack);
+}
+
+// @file:///C:/exemple.html line 7 > eval line 1 > eval:1:1
+// @file:///C:/exemple.html line 7 > eval:1:1
+// @file:///C:/exemple.html:7:6
+
+ +

També podeu utilitzar la directiva //# sourceURL per a donar nom a codi eval. Vegeu també Depurar codi eval als documents de Depurar així com en aquesta entrada d'un bloc.

+ +

Especificacions

+ +

No forma part de cap especificació. No és standard.

+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatIE("10")}}{{CompatVersionUnknown}}{{CompatSafari("6")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsicAndroid 4 (potser Android 3, però en cap cas Android 2){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatSafari("6")}}
+
+ +

Vegeu també

+ + diff --git a/files/ca/web/javascript/reference/global_objects/error/tosource/index.html b/files/ca/web/javascript/reference/global_objects/error/tosource/index.html new file mode 100644 index 0000000000..c766aa312b --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/error/tosource/index.html @@ -0,0 +1,91 @@ +--- +title: Error.prototype.toSource() +slug: Web/JavaScript/Referencia/Objectes_globals/Error/toSource +translation_of: Web/JavaScript/Reference/Global_Objects/Error/toSource +--- +
{{JSRef}} {{non-standard_header}}
+ +

El mètode toSource() reotrna codi capaç de generar el mateix error en case de ser evaluat.

+ +

Sintaxi

+ +
e.toSource()
+ +

Descripció

+ +

La crida al mètode toSource d'una instància d'{{jsxref("Error")}}(incloent NativeErrors) retorna un string que conté el codi font de l'error. Aquest string pot ser evaluat per a crear un objecte (aproximadament) igual. Per defecte la string contenint el codi font segueix l'estructura del construtor {{jsxref("Error")}}. Per exemple:

+ +
(newname(message ,fileName,lineNumber))
+
+ +

on aquests atributs corresponen a les propietats de la instància de l'error, respectivament.

+ +
+

Advertència: Cal tenir en compte que les propietats utilitzades pel mètode toSource a l'hora de crear l'string són mutables i per tant poden no representar de forma acurada la funció utilitzada per a crear la instància de l'error, el nom del fitxer o el nombre de la línia on l'error real ha tingut lloc.

+
+ +

Especificacions

+ +

No forma part de cap standard. Implementat a JavaScript 1.3.

+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Error.prototype.fileName")}}
    • +
  • {{jsxref("Error.prototype.lineNumber")}}
    • +
  • {{jsxref("Error.prototype.message")}}
    • +
  • {{jsxref("Error.prototype.name")}}
    • +
  • {{jsxref("Object.prototype.toSource()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/error/tostring/index.html b/files/ca/web/javascript/reference/global_objects/error/tostring/index.html new file mode 100644 index 0000000000..79fd20f77f --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/error/tostring/index.html @@ -0,0 +1,146 @@ +--- +title: Error.prototype.toString() +slug: Web/JavaScript/Referencia/Objectes_globals/Error/toString +translation_of: Web/JavaScript/Reference/Global_Objects/Error/toString +--- +
{{JSRef("Global_Objects", "Error", "EvalError,InternalError,RangeError,ReferenceError,SyntaxError,TypeError,URIError")}}
+ +

Resum

+ +

El mètode toString() retorna un string que representa l'error especificat per l'objecte {{jsxref("Error")}}.

+ +

Sintaxi

+ +
e.toString()
+ +

Descripció

+ +

L'objecte {{jsxref("Error")}} sobreescriu el mètode {{jsxref("Object.prototype.toString()")}} heretat per tots els objectes. La seva semàntica és la següent (suposant que {{jsxref("Object")}} i {{jsxref("String")}} tenen els seus valors originals):

+ +
Error.prototype.toString = function() {
+  'use strict';
+
+  var obj = Object(this);
+  if (obj !== this) {
+    throw new TypeError();
+  }
+
+  var name = this.name;
+  name = (name === undefined) ? 'Error' : String(name);
+
+  var msg = this.message;
+  msg = (msg === undefined) ? '' : String(msg);
+
+  if (name === '') {
+    return msg;
+  }
+  if (msg === '') {
+    return name;
+  }
+
+  return name + ': ' + msg;
+};
+
+ +

Exemples

+ +
var e = new Error('fatal error');
+print(e.toString()); // 'Error: fatal error'
+
+e.name = undefined;
+print(e.toString()); // 'Error: fatal error'
+
+e.name = '';
+print(e.toString()); // 'fatal error'
+
+e.message = undefined;
+print(e.toString()); // 'Error'
+
+e.name = 'hello';
+print(e.toString()); // 'hello'
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.11.4.4', 'Error.prototype.toString')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-error.prototype.tostring', 'Error.prototype.toString')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Error.prototype.toSource()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/evalerror/prototype/index.html b/files/ca/web/javascript/reference/global_objects/evalerror/prototype/index.html deleted file mode 100644 index 5f83d25a6f..0000000000 --- a/files/ca/web/javascript/reference/global_objects/evalerror/prototype/index.html +++ /dev/null @@ -1,124 +0,0 @@ ---- -title: EvalError.prototype -slug: Web/JavaScript/Reference/Global_Objects/EvalError/prototype -translation_of: Web/JavaScript/Reference/Global_Objects/EvalError -translation_of_original: Web/JavaScript/Reference/Global_Objects/EvalError/prototype ---- -
{{JSRef}}
- -

La propietat EvalError.prototype representa el prototip del constructor {{jsxref("EvalError")}}.

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

Descripció

- -

Totes les instàncies {{jsxref("EvalError")}} hereten de EvalError.prototype. Es pot utilitzar el prototip per afegir propietats o mètodes a totes les instàncies.

- -

Propietats

- -
-
EvalError.prototype.constructor
-
Especifica la funció que ha creat el prototip d'una instància.
-
{{jsxref("Error.prototype.message", "EvalError.prototype.message")}}
-
Missatge d'error. Tot i que l'ECMA-262 especifica que {{jsxref("EvalError")}} hauria de proveir la seva pròpia propietat message, en SpiderMonkey, hereta {{jsxref("Error.prototype.message")}}.
-
{{jsxref("Error.prototype.name", "EvalError.prototype.name")}}
-
Nom de l'error. Heretat de {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.fileName", "EvalError.prototype.fileName")}}
-
Camí cap al fitxer que ha llançat aquest error. Heretat de {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.lineNumber", "EvalError.prototype.lineNumber")}}
-
Número de línia en el fitxer que ha llançat aquest error. Heretat de {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.columnNumber", "EvalError.prototype.columnNumber")}}
-
Número de columna en la línia que ha llançat aquest error. Heretat de {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.stack", "EvalError.prototype.stack")}}
-
Traça de l'error. Heretat de {{jsxref("Error")}}.
-
- -

Mètodes

- -

Tot i que l'objecte prototip {{jsxref("EvalError")}} no contè cap mètode en si mateix, les instàncies  {{jsxref("EvalError")}} hereten alguns mètodes a través de la cadena prototip.

- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES3')}}{{Spec2('ES3')}}Definició inicial
{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}{{Spec2('ES5.1')}}Definit com a NativeError.prototype.
{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ES6')}}Definit com a NativeError.prototype.
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Error.prototype")}}
    • -
  • {{jsxref("Function.prototype")}}
    • -
diff --git a/files/ca/web/javascript/reference/global_objects/index.html b/files/ca/web/javascript/reference/global_objects/index.html new file mode 100644 index 0000000000..60bd0333f7 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/index.html @@ -0,0 +1,167 @@ +--- +title: Objectes Standard +slug: Web/JavaScript/Referencia/Objectes_globals +translation_of: Web/JavaScript/Reference/Global_Objects +--- +
+
{{jsSidebar("Objects")}}
+
+ +

Resum

+ +

Aquest capítol llista tots els objectes que Javascript proporciona per defecte, així com els seus mètodes i propietats.

+ +
+

És important no confondre el terme "objectes globals" (també anomenats objectes standard o built-in) amb objecte global. En aquesta pàgina objecte global es refereix a objectes en l'àmbit global (però només si no s'utilitza el mode estricte de ECMAScript 5! En qualsevol altre cas retorna undefined). Es pot accedir a l'objecte global en si mateix mitjançant l'operador {{jsxref("Referencia/Objectes_standard/this", "this")}} en l'àmbit global. De fet l'àmbit global consisteix  en les propietats de l'objecte global (propietats heredades incloses, si s'escau).

+ +

Altres objectes en l'àmbit global són o bé creats per l'script de l'usuari o bé proporcionats per l'aplicació del host. Els objectes proporcionats pel host disponibles en els àmbits del navegador estan documentats a la referència de la API.

+ +

Objectes standard (per categoria)

+ +

Propietats de valor

+ +

Propietats globals que retornen un valor simple.

+ +
    +
  • {{jsxref("Infinity")}}
    • +
  • {{jsxref("NaN")}}
    • +
  • {{jsxref("undefined")}}
    • +
  • El literal {{jsxref("null")}}
    • +
+ +

Funcions globals

+ +

Funcions globals que retornen el resultat d'una rutina específica.

+ +
    +
  • {{jsxref("eval", "eval()")}}
    • +
  • {{jsxref("uneval", "uneval()")}} {{non-standard_inline()}}
    • +
  • {{jsxref("isFinite", "isFinite()")}}
    • +
  • {{jsxref("isNaN", "isNaN()")}}
    • +
  • {{jsxref("parseFloat", "parseFloat()")}}
    • +
  • {{jsxref("parseInt", "parseInt()")}}
    • +
  • {{jsxref("decodeURI", "decodeURI()")}}
    • +
  • {{jsxref("decodeURIComponent", "decodeURIComponent()")}}
    • +
  • {{jsxref("encodeURI", "encodeURI()")}}
    • +
  • {{jsxref("encodeURIComponent", "encodeURIComponent()")}}
    • +
  • {{jsxref("escape", "escape()")}} {{deprecated_inline()}}
    • +
  • {{jsxref("unescape", "unescape()")}} {{deprecated_inline()}}
    • +
+ +

Objectes fonamentals

+ +

Objectes generals del llenguatge, funcions i errors.

+ +
    +
  • {{jsxref("Object")}}
    • +
  • {{jsxref("Function")}}
    • +
  • {{jsxref("Boolean")}}
    • +
  • {{jsxref("Symbol")}} {{experimental_inline()}}
    • +
  • {{jsxref("Error")}}
    • +
  • {{jsxref("EvalError")}}
    • +
  • {{jsxref("InternalError")}}
    • +
  • {{jsxref("RangeError")}}
    • +
  • {{jsxref("ReferenceError")}}
    • +
  • {{jsxref("SyntaxError")}}
    • +
  • {{jsxref("TypeError")}}
    • +
  • {{jsxref("URIError")}}
    • +
+ +

Nombres i dates

+ +

Objectes que emmagatzemen nombres, dades i càlculs matemàtics.

+ +
    +
  • {{jsxref("Number")}}
    • +
  • {{jsxref("Math")}}
    • +
  • {{jsxref("Date")}}
    • +
+ +

Processament de text

+ +

Objectes per manipular text.

+ +
    +
  • {{jsxref("String")}}
    • +
  • {{jsxref("RegExp")}}
    • +
+ +

Col·leccions indexades

+ +

Col·leccions ordenades per un índex. Objectes de tipus array.

+ +
    +
  • {{jsxref("Array")}}
    • +
  • {{jsxref("Int8Array")}}
    • +
  • {{jsxref("Uint8Array")}}
    • +
  • {{jsxref("Uint8ClampedArray")}}
    • +
  • {{jsxref("Int16Array")}}
    • +
  • {{jsxref("Uint16Array")}}
    • +
  • {{jsxref("Int32Array")}}
    • +
  • {{jsxref("Uint32Array")}}
    • +
  • {{jsxref("Float32Array")}}
    • +
  • {{jsxref("Float64Array")}}
    • +
+ +

Diccionaris (mapes)

+ +

Col·leccions d'objectes de tipus diccionari (també coneguts com a mapes o col·leccions d'entrades clau-valor). Els elements són iterables per ordre d'inserció.

+ +
    +
  • {{jsxref("Map")}} {{experimental_inline()}}
    • +
  • {{jsxref("Set")}} {{experimental_inline()}}
    • +
  • {{jsxref("WeakMap")}} {{experimental_inline()}}
    • +
  • {{jsxref("WeakSet")}} {{experimental_inline()}}
    • +
+ +

Dades estructurades

+ +

Buffers de dades i JavaScript Object Notation.

+ +
    +
  • {{jsxref("ArrayBuffer")}}
    • +
  • {{jsxref("DataView")}}
    • +
  • {{jsxref("JSON")}}
    • +
+ +

Objectes d'abstracció de control

+ +
    +
  • {{jsxref("Promise")}} {{experimental_inline()}}
    • +
+ +

Reflexió

+ +
    +
  • {{jsxref("Reflect")}} {{experimental_inline()}}
    • +
  • {{jsxref("Proxy")}} {{experimental_inline()}}
    • +
+ +

Internacionalització

+ +

Adicions al nucli de ECMAScript per a funcionalitats sensibles a l'idioma.

+ +
    +
  • {{jsxref("Intl")}}
    • +
  • {{jsxref("Collator", "Intl.Collator")}}
    • +
  • {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}
    • +
  • {{jsxref("NumberFormat", "Intl.NumberFormat")}}
    • +
+ +

Objectes no-standard

+ +
    +
  • {{jsxref("Generator")}} {{non-standard_inline()}}
    • +
  • {{jsxref("Iterator")}} {{non-standard_inline()}}
    • +
  • {{jsxref("ParallelArray")}} {{non-standard_inline()}}
    • +
  • {{jsxref("StopIteration")}} {{non-standard_inline()}}
    • +
+ +

Altres

+ + +
+ +

 

diff --git a/files/ca/web/javascript/reference/global_objects/infinity/index.html b/files/ca/web/javascript/reference/global_objects/infinity/index.html new file mode 100644 index 0000000000..409609bfd2 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/infinity/index.html @@ -0,0 +1,114 @@ +--- +title: Infinity +slug: Web/JavaScript/Referencia/Objectes_globals/Infinity +translation_of: Web/JavaScript/Reference/Global_Objects/Infinity +--- +
+
+
{{jsSidebar("Objects")}}
+
+
+ +

Resum

+ +

La propietat global Infinity és un valor numèric que representa l'infinit.

+ +

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

+ +

Sintaxi

+ +
Infinity
+ +

Descripció

+ +

Infinity és una propietat de l'objecte global, és a dir, és una variable dins l'àmbit global.

+ +

El valor inical de Infinity és {{jsxref("Number.POSITIVE_INFINITY")}}. El valor Infinity (infinit positiu) és major que qualsevol altre nombre. Aquest valor es comporta matemàticament com l'infinit; per exemple, qualsevol nombre positiu multiplicat per Infinity dóna com a resultat Infinity, qualsevol valor dividit per Infinity dóna 0.

+ +

Tal i com la especificació ECMAScript 5 defineix, Infinity no pot ser sobreescrit (implementat a JavaScript 1.8.5  / Firefox 4).

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacionsEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.3
{{SpecName('ES5.1', '#sec-15.1.1.2', 'Infinity')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-value-properties-of-the-global-object-infinity', 'Infinity')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Number.NEGATIVE_INFINITY")}}
    • +
  • {{jsxref("Number.POSITIVE_INFINITY")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/json/index.html b/files/ca/web/javascript/reference/global_objects/json/index.html new file mode 100644 index 0000000000..efc86409e6 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/json/index.html @@ -0,0 +1,242 @@ +--- +title: JSON +slug: Web/JavaScript/Referencia/Objectes_globals/JSON +translation_of: Web/JavaScript/Reference/Global_Objects/JSON +--- +
{{JSRef("Global_Objects", "JSON")}}
+ +

Resum

+ +

L'objecte JSON conté mètodes per a interpretar JavaScript Object Notation ({{glossary("JSON")}}) i convertir valors a JSON. Aquest objecte no pot ser cridat o construit, i a banda dels seus dos mètodes no té cap més funcionalitat o interès.

+ +

and converting values to JSON. It can't be called or constructed, and aside from its two method properties it has no interesting functionality of its own.

+ +

Descripció

+ +

JavaScript Object Notation

+ +

JSON és una sintaxi que permet serialitzar objectes, arrays, nombres, strings, booleans i {{jsxref("null")}}. Està basada en la sintaxi de JavaScript però és diferent: algunes parts de JavaScript no són convertibles a JSON i algunes de JSON no ho són a JavaScript. Vegeu també JSON: El subconjunt de JavaScript que no ho és.

+ + + + + + + + + + + + + + + + + + + + + + + +
Diferències entre JavaScript i JSON
Tipus a JavaScriptDiferències a JSON
Objectes i ArraysEls noms de les propietats han de estar embolcallats per cometes dobles; les cometes simples estan prohibides
NombresNo són permesos zeros a l'esquerra; els nombres decimals separent la part sencera amb un punt i han de tindre al menys un digit decimal.
Strings +

Només es pot escapar un grup limitat de caràcters; alguns caràcters de control no són permesos; el separador de línies Unicode (U+2028) i el separador de paràgrafs (U+2029) són permesos; les strings han d'estar embolcallades per cometes dobles. Vegeu l'exemple següent on {{jsxref("JSON.parse()")}} funciona correctament i es llença un {{jsxref("SyntaxError")}} a l'avaluar el codi com a JavaScript:

+ + 
+var code = '"\u2028\u2029"';
+JSON.parse(code); // funciona correctament
+eval(code); // falla
+
+
+ +

La sintaxi completa de JSON és la següent:

+ +
JSON = null
+    o true o false
+    o JSONNumber
+    o JSONString
+    o JSONObject
+    o JSONArray
+
+JSONNumber = - PositiveNumber
+          o PositiveNumber
+PositiveNumber = DecimalNumber
+              o DecimalNumber . Digits
+              o DecimalNumber . Digits ExponentPart
+              o DecimalNumber ExponentPart
+DecimalNumber = 0
+             o OneToNine Digits
+ExponentPart = e Exponent
+            o E Exponent
+Exponent = Digits
+        o + Digits
+        o - Digits
+Digits = Digit
+      o Digits Digit
+Digit = 0 through 9
+OneToNine = 1 through 9
+
+JSONString = ""
+          o " StringCharacters "
+StringCharacters = StringCharacter
+                o StringCharacters StringCharacter
+StringCharacter = qualsevol caràcter excepte
+                  " o \ o U+0000 fins a U+001F
+               o EscapeSequence
+EscapeSequence = \" o \/ o \\ o \b o \f o \n o \r o \t
+              o \u HexDigit HexDigit HexDigit HexDigit
+HexDigit = 0 fins a 9
+        o A fins a F
+        o a fins a f
+
+JSONObject = { }
+          o { Members }
+Members = JSONString : JSON
+       o Members , JSONString : JSON
+
+JSONArray = [ ]
+         o [ ArrayElements ]
+ArrayElements = JSON
+             o ArrayElements , JSON
+
+ +

Pot haver-hi espais en blanc sense significat a qualsevol lloc excepte dins un JSONNumber (el nombres no poden contenir espais) o JSONString (on s'interpreta com el caràcter corrsponen dins l'string, o causaria un error). Els caràcters tabulador (U+0009), retorn de carro (U+000D), nova línia (U+000A), i l'espai (U+0020) són els únics caràcters d'espai en blanc acceptats.

+ +

Mètodes

+ +
+
{{jsxref("JSON.parse()")}}
+
Interpreta una string com a JSON, opcionalment transforma el valor produït i les seves propietats, i retorna el valor.
+
{{jsxref("JSON.stringify()")}}
+
Retorna un JSON string corresponent al valor especificat, opcionalment només inclou determinades propietats o reemplaça el valor de propietats tal i com defineixi l'usuari.
+
+ +

Polyfill

+ +

L'objecte JSON no és suportat a navegadors antics. Aquest problema pot solventar-se insertant el codi següent al principi dels scripts, permetent l'ús de l'objecte JSON en implementacions on no hi ha suport natiu (com ara Internet Explorer 6).

+ +

El següent algorisme emula l'objecte JSON natiu:

+ +
if (!window.JSON) {
+  window.JSON = {
+    parse: function(sJSON) { return eval('(' + sJSON + ')'); },
+    stringify: (function () {
+      var toString = Object.prototype.toString;
+      var isArray = Array.isArray || function (a) { return toString.call(a) === '[object Array]'; };
+      var escMap = {'"': '\\"', '\\': '\\\\', '\b': '\\b', '\f': '\\f', '\n': '\\n', '\r': '\\r', '\t': '\\t'};
+      var escFunc = function (m) { return escMap[m] || '\\u' + (m.charCodeAt(0) + 0x10000).toString(16).substr(1); };
+      var escRE = /[\\"\u0000-\u001F\u2028\u2029]/g;
+      return function stringify(value) {
+        if (value == null) {
+          return 'null';
+        } else if (typeof value === 'number') {
+          return isFinite(value) ? value.toString() : 'null';
+        } else if (typeof value === 'boolean') {
+          return value.toString();
+        } else if (typeof value === 'object') {
+          if (typeof value.toJSON === 'function') {
+            return stringify(value.toJSON());
+          } else if (isArray(value)) {
+            var res = '[';
+            for (var i = 0; i < value.length; i++)
+              res += (i ? ', ' : '') + stringify(value[i]);
+            return res + ']';
+          } else if (toString.call(value) === '[object Object]') {
+            var tmp = [];
+            for (var k in value) {
+              if (value.hasOwnProperty(k))
+                tmp.push(stringify(k) + ': ' + stringify(value[k]));
+            }
+            return '{' + tmp.join(', ') + '}';
+          }
+        }
+        return '"' + value.toString().replace(escRE, escFunc) + '"';
+      };
+    })()
+  };
+}
+
+ +

Dos polyfills complexos coneguts per a l'objecte JSON són JSON2 i JSON3.

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES5.1', '#sec-15.12', 'JSON')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-json-object', 'JSON')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}{{CompatIE("8.0")}}{{CompatOpera("10.5")}}{{CompatSafari("4.0")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Basat en la taula de compatibilitat de Kangax.

+ +

Vegeu també

+ +
    +
  • {{jsxref("Date.prototype.toJSON()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/map/clear/index.html b/files/ca/web/javascript/reference/global_objects/map/clear/index.html new file mode 100644 index 0000000000..f29cc93eef --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/map/clear/index.html @@ -0,0 +1,104 @@ +--- +title: Map.prototype.clear() +slug: Web/JavaScript/Referencia/Objectes_globals/Map/clear +translation_of: Web/JavaScript/Reference/Global_Objects/Map/clear +--- +
{{JSRef}}
+ +

El mètode clear() esborra tots els elements d'un objecte de tipus Map.

+ +

Sintaxi

+ +
myMap.clear();
+ +

Exemples

+ +

Utilitzar el mètode clear

+ +
var myMap = new Map();
+myMap.set("bar", "baz");
+myMap.set(1, "foo");
+
+myMap.size;       // 2
+myMap.has("bar"); // true
+
+myMap.clear();
+
+myMap.size;       // 0
+myMap.has("bar")  // false
+
+ +

Especificacions

+ + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-map.prototype.clear', 'Map.prototype.clear')}}{{Spec2('ES6')}}Definició inicial.
+ +

Compatibilitat amb navegadors

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic38{{CompatGeckoDesktop("19.0")}}11257.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}38{{CompatGeckoMobile("19.0")}}{{CompatNo}}{{CompatNo}}8
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Map")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/map/delete/index.html b/files/ca/web/javascript/reference/global_objects/map/delete/index.html new file mode 100644 index 0000000000..01c1b2cf28 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/map/delete/index.html @@ -0,0 +1,109 @@ +--- +title: Map.prototype.delete() +slug: Web/JavaScript/Referencia/Objectes_globals/Map/delete +translation_of: Web/JavaScript/Reference/Global_Objects/Map/delete +--- +
{{JSRef}}
+ +

El mètode delete() elimina l'element especificat de l'objecte Map.

+ +

Sintaxi

+ +
myMap.delete(clau);
+ +

Paràmetres

+ +
+
clau
+
Necessari. La clau de l'element a eliminar de l'objecte Map.
+
+ +

valor Return

+ +

Retorna true si un element de l'objecte Map s'ha eleminat amb èxit.

+ +

Exemples

+ +

Utilitzar el mètode delete

+ +
var myMap = new Map();
+myMap.set("bar", "foo");
+
+myMap.delete("bar"); // Retorna true. Eliminat satisfactòriament.
+myMap.has("bar");    // Retorna false. L'element "bar" ja no és present.
+
+ +

Especificacions

+ + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-map.prototype.delete', 'Map.prototype.delete')}}{{Spec2('ES6')}}Definició inicial.
+ +

Compatibilitat amb navegadors

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic38{{CompatGeckoDesktop("13.0")}}11257.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}38{{CompatGeckoMobile("13.0")}}{{CompatNo}}{{CompatNo}}8
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Map")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/map/entries/index.html b/files/ca/web/javascript/reference/global_objects/map/entries/index.html new file mode 100644 index 0000000000..d5f6942695 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/map/entries/index.html @@ -0,0 +1,104 @@ +--- +title: Map.prototype.entries() +slug: Web/JavaScript/Referencia/Objectes_globals/Map/entries +translation_of: Web/JavaScript/Reference/Global_Objects/Map/entries +--- +
{{JSRef}}
+ +

El mètode entries()retorna un nou objecte Iterator que conté la parella [clau, valor] per cadascun dels elements de l'objecte Map en l'ordre d'inserció.

+ +

Sintaxi

+ +
myMap.entries()
+ +

Exemples

+ +

Utilitzar entries()

+ +
var myMap = new Map();
+myMap.set("0", "foo");
+myMap.set(1, "bar");
+myMap.set({}, "baz");
+
+var mapIter = myMap.entries();
+
+console.log(mapIter.next().value); // ["0", "foo"]
+console.log(mapIter.next().value); // [1, "bar"]
+console.log(mapIter.next().value); // [Object, "baz"]
+
+ +

Especificacions

+ + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-map.prototype.entries', 'Map.prototype.entries')}}{{Spec2('ES6')}}Definició inicial.
+ +

Compatibilitat amb navegadors

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic38{{ CompatGeckoDesktop("20") }}{{CompatNo}}257.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}38{{CompatGeckoMobile("20")}}{{CompatNo}}{{CompatNo}}8
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Map.prototype.keys()")}}
    • +
  • {{jsxref("Map.prototype.values()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/map/foreach/index.html b/files/ca/web/javascript/reference/global_objects/map/foreach/index.html new file mode 100644 index 0000000000..7097bbee3d --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/map/foreach/index.html @@ -0,0 +1,136 @@ +--- +title: Map.prototype.forEach() +slug: Web/JavaScript/Referencia/Objectes_globals/Map/forEach +translation_of: Web/JavaScript/Reference/Global_Objects/Map/forEach +--- +
{{JSRef}}
+ +

El mètode forEach() executa la funció proporcionada un cop epr cada parell clau/valor dins l'objecte Map, seguint l'ordre en el que han estat inserits.

+ +

Sintaxi

+ +
myMap.forEach(callback[, thisArg])
+ +

Paràmetres

+ +
+
callback
+
Funció a executar per a cada element.
+
thisArg
+
Valor a utilitzar com a this mentre s'estigui executant executing callback.
+
+ +

Descripció

+ +

El mètode forEach executa la funció callback  proporcionada un cop per a cada clau que existeixi dins el mapa. No s'invocarà la funció per a claus que hagin estat esborrades. Tanmateix si que s'executarà per a valors amb clau present però que el seu valor sigui undefined.

+ +

callback s'invocarà amb tres arguments:

+ +
    +
  • el valor de l'element
    • +
  • la clau de l'element
    • +
  • l'objecte Map que s'està recorrent
    • +
+ +

Si es proporciona el paràmetre thisArg a la crida de forEach, aquest es passarà a callback quan s'invoqui per a ser utilitzat com a this dins la funció.  En qualsevol altre cas el valor que rebrà this dins la funció callback serà undefined. El valor de this que serà finalment observable dins de callback és determinat d'acord a les regles habituals per a determinar el valor de this observat dins d'una funció.

+ +

Cada valor serà visitat un cop, a no ser que hagi estat eliminat o tornar a afegir abans que el mètode forEach acabi. No s'invocarà callback per a valors eliminats abans de ser visitats. Si que es visitaran, però, valors nous afegits abans forEach no hagi acabat.

+ +

forEach executa la funció callback un cop per cada element de l'objecte Map; no retorna cap valor.

+ +

Exemples

+ +

Mostrar els continguts d'un objecte Map

+ +

El codi següent mostra una línia per cada element d'un objecte Map:

+ +
function logMapElements(value, key, map) {
+    console.log("m[" + key + "] = " + value);
+}
+Map([["foo", 3], ["bar", {}], ["baz", undefined]]).forEach(logMapElements);
+// mostra:
+// "m[foo] = 3"
+// "m[bar] = [object Object]"
+// "m[baz] = undefined"
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-map.prototype.foreach', 'Map.prototype.forEach')}}{{Spec2('ES6')}}Definició inicial.
{{SpecName('ESDraft', '#sec-map.prototype.foreach', 'Map.prototype.forEach')}}{{Spec2('ESDraft')}} 
+ +

Compatibilitat amb navegadors

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic38{{CompatGeckoDesktop("25.0")}}11257.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}38{{CompatGeckoMobile("25.0")}}{{CompatNo}}{{CompatNo}}8
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Array.prototype.forEach()")}}
    • +
  • {{jsxref("Set.prototype.forEach()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/map/get/index.html b/files/ca/web/javascript/reference/global_objects/map/get/index.html new file mode 100644 index 0000000000..ec345df059 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/map/get/index.html @@ -0,0 +1,116 @@ +--- +title: Map.prototype.get() +slug: Web/JavaScript/Referencia/Objectes_globals/Map/get +translation_of: Web/JavaScript/Reference/Global_Objects/Map/get +--- +
{{JSRef}}
+ +

El mètode get() retorna l'element especifciat d'un objecte Map.

+ +

Sintaxi

+ +
myMap.get(clau);
+ +

Paràmetres

+ +
+
clau
+
Obligatori. La clau de l'element a retorna de l'objecte Map.
+
+ +

Valor a retornar

+ +

Retorna l'element associat a la clau especificada o bé undefined si no s'ha pogut trobar la clau dins l'objecte Map.

+ +

Exemples

+ +

Utilitzar el mètode get

+ +
var myMap = new Map();
+myMap.set("bar", "foo");
+
+myMap.get("bar");  // Retorna "foo".
+myMap.get("baz");  // Retorna undefined.
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-map.prototype.get', 'Map.prototype.get')}}{{Spec2('ES6')}}Definició inicial.
{{SpecName('ESDraft', '#sec-map.prototype.get', 'Map.prototype.get')}}{{Spec2('ESDraft')}} 
+ +

Compatibilitat amb navegadors

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic38{{CompatGeckoDesktop("13.0")}}11257.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}38{{CompatGeckoMobile("13.0")}}{{CompatNo}}{{CompatNo}}8
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Map")}}
    • +
  • {{jsxref("Map.prototype.set()")}}
    • +
  • {{jsxref("Map.prototype.has()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/map/has/index.html b/files/ca/web/javascript/reference/global_objects/map/has/index.html new file mode 100644 index 0000000000..d0ce1bec54 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/map/has/index.html @@ -0,0 +1,114 @@ +--- +title: Map.prototype.has() +slug: Web/JavaScript/Referencia/Objectes_globals/Map/has +translation_of: Web/JavaScript/Reference/Global_Objects/Map/has +--- +
{{JSRef}}
+ +

El mètode has() retorna un booleà que indica si existeix un element amb la clau especificada o no.

+ +

Sintaxi

+ +
myMap.has(clau);
+ +

Paràmetres

+ +
+
clau
+
Obligatori. La clau de l'element que es comprovarà si existeix o no dins l'objecte Map.
+
+ +

Valor retornat

+ +
+
Booleà
+
Retorna true si existeix un element amb la clau proporcionada dins l'objecte Map; retorna false en qualsevol altre cas.
+
+ +

Exemples

+ +

Utilitzar el mètode has

+ +
var myMap = new Map();
+myMap.set("bar", "foo");
+
+myMap.has("bar");  // retorn true
+myMap.has("baz");  // retorn false
+
+ +

Especificacions

+ + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-map.prototype.has', 'Map.prototype.has')}}{{Spec2('ES6')}}Definició inicial.
+ +

Compatibilitat amb navegadors

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic38{{CompatGeckoDesktop("13.0")}}11257.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}38{{CompatGeckoMobile("13.0")}}{{CompatNo}}{{CompatNo}}8
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Map")}}
    • +
  • {{jsxref("Map.prototype.set()")}}
    • +
  • {{jsxref("Map.prototype.get()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/map/index.html b/files/ca/web/javascript/reference/global_objects/map/index.html new file mode 100644 index 0000000000..8e2bb647bd --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/map/index.html @@ -0,0 +1,385 @@ +--- +title: Map +slug: Web/JavaScript/Referencia/Objectes_globals/Map +translation_of: Web/JavaScript/Reference/Global_Objects/Map +--- +
{{JSRef("Global_Objects", "Map")}}
+ +

Resum

+ +

L'objecte Map és un simple mapa de parelles clau/valor. Qualsevol valor (tant objectes com {{Glossary("Primitive", "primitive values")}}) poden fer-se servir tant com a clau com a valor.

+ +

Sintaxi

+ +
new Map([iterable])
+
+ +

Paràmetres

+ +
+
iterable
+
Iterable és un Array o un altre objecte iterable els quals els seus elements són parelles clau/valor (Arrays de 2 elements). Cada parella clau/valor serà afegida al nou mapa. nul és tracta com a indefinit.
+
+ +

Descripció

+ +

Un objecte Map pot iterar els seus elements en ordre d'inserció - un bucle for..of retornarà un array de [key, value] per cada iteració.

+ +

Igualtat de claus

+ +

La igualtat de claus es basa en l'algorisme "mateix valor": NaN es considera igual a NaN (tot i que NaN !== NaN) i tots els altres valors es consideren iguals d'acord amb la semàntica de l'operador ===. En versions anteriors a l'esborrany de l'ECMAScript 6 -0 i +0 es consideraven diferents (tot i que -0 === +0), aquest comportament s'ha canviat en versions posteriors i ha sigut adaptat al {{geckoRelease("29")}} ({{bug("952870")}}) i una versió diària de Chrome.

+ +

Comparació d'objectes amb mapes

+ +

Els {{jsxref("Object", "Objects")}} son similars als Maps en el sentit que tots dos permeten assignar valors a claus, obtenir aquests valors, esborrar claus i detectar si una clau té un valor assignat o no. Degut a això, històricament s'han fet anar Objects com a Maps; tot i això existeixen diferències importants entre Objects i Maps que fan que l'ús de Map sigui millor.

+ +
    +
  • Un Object té un prototipus, això implica que hi haurà algunes claus definides inicialment. Aquest problem es pot adreçar utilitzant map = Object.create(null).
    • +
  • Les claus d'un Object són {{jsxref("String", "Strings")}}, mentre que les claus d'un Map poden ser de qualsevol tipus.
    • +
  • És fàcil obtindre el tamany d'un Map mentre que el tamany d'un Object ha de ser calculat manualment.
    • +
+ +

Utilitzeu mapes en comptes d'objejctes quan les claus no se sàpiguin en temps d'execució, o bé quan totes les claus o els valors siguin del mateix tipus.

+ +

Utilitzeu objectes quan hi hagi una lògica que operi els elements individualment.

+ +

Propietats

+ +
+
Map.length
+
El valor de la propietat length és 1.
+
{{jsxref("Map.prototype")}}
+
Representa el prototipus pel constructor Map. Permet afegir propietats a tots els objectes de tipus Map.
+
+ +

Instàncies de Map

+ +

Totes les instàncies de Map hereten de {{jsxref("Map.prototype")}}.

+ +

Propietats

+ +

{{page('ca/Web/JavaScript/Reference/Global_Objects/Map/prototype','Propietats')}}

+ +

Mètodes

+ +

{{page('ca/Web/JavaScript/Reference/Global_Objects/Map/prototype','Mètodes')}}

+ +

Exemples

+ +

Exemple: Utilitzar l'objecte Map

+ +
var myMap = new Map();
+
+var keyObj = {},
+    keyFunc = function () {},
+    keyString = "a string";
+
+// preparar els valors
+myMap.set(keyString, "valor associat a amb 'un string'");
+myMap.set(keyObj, "valor associat amb keyObj");
+myMap.set(keyFunc, "valor associat amb with keyFunc");
+
+myMap.size; // 3
+
+// obtenir els valors
+myMap.get(keyString);    // "valor associat amb 'un string'"
+myMap.get(keyObj);       // "valor associat amb keyObj"
+myMap.get(keyFunc);      // "valor associat amb keyFunc"
+
+myMap.get("a string");   // "valor associat amb 'un string'"
+                         // com que keyString === 'un string'
+myMap.get({});           // undefined, perquè keyObj !== {}
+myMap.get(function() {}) // undefined, perquè keyFunc !== function () {}
+
+ +

Exemple: Utilitzar NaN com a claus en un Map

+ +

NaN també pot emprar-se com a clau. Tot i que NaN no és igual a si mateix (NaN !== NaN és cert), l'exemple següent funciona perquè els NaNs són indistinguibles entre ells:

+ +
var myMap = new Map();
+myMap.set(NaN, "no un nombre");
+
+myMap.get(NaN); // "no un nombre"
+
+var altreNaN = Number("foo");
+myMap.get(altreNaN); // "no un nombre"
+
+ +

Exemple: Iterar Maps amb for..of

+ +

Els mapes es poden iterar fent servir un bucle for..of :

+ +
var myMap = new Map();
+myMap.set(0, "zero");
+myMap.set(1, "un");
+for (var [key, value] of myMap) {
+  alert(key + " = " + value);
+}
+// Mostrarà 2 alertes; el primer amb "0 = zero" i el segon amb "1 = one"
+
+for (var key of myMap.keys()) {
+  alert(key);
+}
+// Mostrarà 2 alertes; el primer amb "0" i el segon amb "1"
+
+for (var value of myMap.values()) {
+  alert(value);
+}
+// Mostrarà 2 alertes; el primer amb "zero" i el segon amb "un"
+
+for (var [key, value] of myMap.entries()) {
+  alert(key + " = " + value);
+}
+// Mostrarà 2 alertes; el primer amb "0 = zero" i el segon amb "1 = un"
+
+myMap.forEach(function(value, key) {
+  alert(key + " = " + value);
+}, myMap)
+// Mostrarà 2 alertes; el primer amb "0 = zero" i el segon amb "1 = un"
+
+ +

Exemple: Relació amb els objectes Array

+ +
var kvArray = [["clau1", "valor1"], ["clau2", "valor2"]];
+
+// Utilitzeu el constructor de Map normal per a transformar un Array 2D clau-valor en un mapa
+var myMap = new Map(kvArray);
+
+myMap.get("valor1"); // retorna "valor1"
+
+// Utilitzeu l'operador spread per a transformar un mapa en un Array 2D clau-valor.
+alert(uneval([...myMap])); // Mostrarà exactament el mateix Array que kvArray
+
+// O bé utilitzeu l'operador spread a l'iterador de les claus o els valor per a obtenir
+// un array de només les claus o els valors
+alert(uneval([...myMap.keys()])); // Mostrarà ["clau1", "clau2"]
+
+ +

Especificacions

+ + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-map-objects', 'Map')}}{{Spec2('ES6')}}Definició inicial.
+ +

Compatibilitat amb navegadors

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic +

{{ CompatChrome(31) }} [1]
+ {{ CompatChrome(38) }}

+ 		{{ CompatGeckoDesktop("13") }}11257.1
Argument del constructor: new Map(iterable){{ CompatChrome(38) }}{{ CompatGeckoDesktop("13") }}{{ CompatNo() }}25{{ CompatNo() }}
iterable{{ CompatChrome(38) }}{{ CompatGeckoDesktop("17") }}{{ CompatNo() }}257.1
Map.clear(){{ CompatChrome(31) }} [1]
+ {{ CompatChrome(38) }}		{{CompatGeckoDesktop("19")}}11257.1
Map.keys(), Map.values(), Map.entries(){{ CompatChrome(37) }} [1]
+ {{ CompatChrome(38) }}		{{CompatGeckoDesktop("20")}}{{ CompatNo() }}257.1
Map.forEach(){{ CompatChrome(36) }} [1]
+ {{ CompatChrome(38) }}		{{CompatGeckoDesktop("25")}}11257.1
Igualtat de claus per a -0 i 0{{ CompatChrome(34) }} [1]
+ {{ CompatChrome(38) }}		{{CompatGeckoDesktop("29")}}{{ CompatNo() }}25{{ CompatNo() }}
Argument del constructor: new Map(null){{ CompatVersionUnknown() }}{{CompatGeckoDesktop("37")}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
Monkey-patched set() al Constructor{{ CompatVersionUnknown() }}{{CompatGeckoDesktop("37")}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatNo() }}{{ CompatChrome(31) }} [1]
+ {{ CompatChrome(38) }}		{{ CompatGeckoMobile("13") }}{{ CompatNo() }}{{ CompatNo() }}iOS 8
Argument del constructor: new Map(iterable){{ CompatNo() }}{{ CompatChrome(38) }}{{ CompatGeckoMobile("13") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo }}
iterable{{ CompatNo() }}{{ CompatNo() }}{{ CompatGeckoMobile("17") }}{{ CompatNo() }}{{ CompatNo() }}iOS 8
Map.clear(){{ CompatNo() }}{{ CompatChrome(31) }} [1]
+ {{ CompatChrome(38) }}		{{CompatGeckoMobile("19")}}{{ CompatNo() }}{{ CompatNo() }}iOS 8
Map.keys(), Map.values(), Map.entries(){{ CompatNo() }}{{ CompatChrome(37) }} [1]
+ {{ CompatChrome(38) }}		{{CompatGeckoMobile("20")}}{{ CompatNo() }}{{ CompatNo() }}iOS 8
Map.forEach(){{ CompatNo() }}{{ CompatChrome(36) }} [1]
+ {{ CompatChrome(38) }}		{{CompatGeckoMobile("25")}}{{ CompatNo() }}{{ CompatNo() }}iOS 8
Igualtat per a -0 i 0{{ CompatNo() }}{{ CompatChrome(34) }} [1]
+ {{ CompatChrome(38) }}		{{CompatGeckoMobile("29")}}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
Argument del constructor: new Map(null){{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{CompatGeckoMobile("37")}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
Monkey-patched set() al Constructor{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{CompatGeckoMobile("37")}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

[1] The feature is available behind a preference. In chrome://flags, activate the entry “Enable Experimental JavaScript”.

+ +

Vegeu també

+ + diff --git a/files/ca/web/javascript/reference/global_objects/map/keys/index.html b/files/ca/web/javascript/reference/global_objects/map/keys/index.html new file mode 100644 index 0000000000..47c975a891 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/map/keys/index.html @@ -0,0 +1,104 @@ +--- +title: Map.prototype.keys() +slug: Web/JavaScript/Referencia/Objectes_globals/Map/keys +translation_of: Web/JavaScript/Reference/Global_Objects/Map/keys +--- +
{{JSRef}}
+ +

El mètode keys() retorna un nou objecte Iterator que conté les claus per cadascún dels elements de l'objecte Map en l'ordre d'insersió.

+ +

Sintaxi

+ +
myMap.keys()
+ +

Exemples

+ +

Utilitzar keys()

+ +
var myMap = new Map();
+myMap.set("0", "foo");
+myMap.set(1, "bar");
+myMap.set({}, "baz");
+
+var mapIter = myMap.keys();
+
+console.log(mapIter.next().value); // "0"
+console.log(mapIter.next().value); // 1
+console.log(mapIter.next().value); // Objecte
+
+ +

Especificacions

+ + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-map.prototype.keys', 'Map.prototype.keys')}}{{Spec2('ES6')}}Definició inicial.
+ +

Compatibilitat amb navegadors

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic38{{CompatGeckoDesktop("20")}}{{CompatNo}}257.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}38{{CompatGeckoMobile("20") }}{{CompatNo}}{{CompatNo}}8
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Map.prototype.entries()")}}
    • +
  • {{jsxref("Map.prototype.values()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/map/set/index.html b/files/ca/web/javascript/reference/global_objects/map/set/index.html new file mode 100644 index 0000000000..3b77060831 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/map/set/index.html @@ -0,0 +1,122 @@ +--- +title: Map.prototype.set() +slug: Web/JavaScript/Referencia/Objectes_globals/Map/set +translation_of: Web/JavaScript/Reference/Global_Objects/Map/set +--- +
{{JSRef}}
+ +

El mètode set() afegeig un nou element amb la clau i el valor especificats a un objecte de tipus Map.

+ +

Sintaxi

+ +
myMap.set(clau, valor);
+ +

Paràmetres

+ +
+
clau
+
Obligatori. La clau de l'element a afegir a l'objecte Map.
+
valor
+
Obligatori. El valor de l'element a afegir a l'objecte Map.
+
+ +

Valor retornat

+ +

L'objecte Map.

+ +

Exemples

+ +

Utilitzar el mètode set

+ +
var myMap = new Map();
+
+// Afegim nous elements al mapa
+myMap.set("bar", "foo");
+myMap.set(1, "foobar");
+
+// Actualitzem un element amb una clau ja existent al mapa
+myMap.set("bar", "fuuu");
+
+ +

Especificacions

+ + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-map.prototype.set', 'Map.prototype.set')}}{{Spec2('ES6')}}Definició inicial.
+ +

Compatibilitat amb navegadors

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic38{{CompatGeckoDesktop("13.0")}}11257.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}38{{CompatGeckoMobile("13.0")}}{{CompatNo}}{{CompatNo}}8
+
+ +

Notes sobre compatibilitat

+ +
    +
  • Abans del Firefox 33 {{geckoRelease("33")}}, Map.prototype.set retornava undefined i en conseqüència no permitia la crida encadenada. Aquest problema va ser solucionat ({{bug(1031632)}}). Aquest comportament també es pot observar al Chrome/v8 (problema).
    • +
+ +

Vegeu també

+ +
    +
  • {{jsxref("Map")}}
    • +
  • {{jsxref("Map.prototype.get()")}}
    • +
  • {{jsxref("Map.prototype.has()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/map/size/index.html b/files/ca/web/javascript/reference/global_objects/map/size/index.html new file mode 100644 index 0000000000..aa70c7d84b --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/map/size/index.html @@ -0,0 +1,105 @@ +--- +title: Map.prototype.size +slug: Web/JavaScript/Referencia/Objectes_globals/Map/size +translation_of: Web/JavaScript/Reference/Global_Objects/Map/size +--- +
{{JSRef}}
+ +

La propietat d'accés size retorna el número d'elements en un objecte {{jsxref("Map")}}.

+ +

Descripció

+ +

El valor de size és un nombre sencer que representa quantes entrades té l'objecte Map. Una funció d'accés establerta per size és undefined; aquesta propietat no es pot canviar.

+ +

Exemples

+ +

Utilitzar size

+ +
var myMap = new Map();
+myMap.set("a", "alpha");
+myMap.set("b", "beta");
+myMap.set("g", "gamma");
+
+myMap.size // 3
+
+ +

Especificacions

+ + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-get-map.prototype.size', 'Map.prototype.size')}}{{Spec2('ES6')}}Definició inicial.
+ +

Compatibilitat amb navegadors

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support38{{ CompatGeckoDesktop("19") }}{{ CompatIE("11") }}257.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}38{{CompatGeckoMobile("19")}}{{CompatNo}}{{CompatNo}}8
+
+ +

Notes específiques de Gecko

+ +
    +
  • A partir de Gecko 13 {{geckoRelease("13")}} fins Gecko 18 {{geckoRelease("18")}} la propietat size era implementada com un mètode Map.prototype.size(), aquesta s'ha canviat a una propietat en versions posteriors conforme l'especificació d'ECMAScript 6 ({{bug("807001")}}).
    • +
+ +

Vegeu també

+ +
    +
  • {{jsxref("Map")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/map/values/index.html b/files/ca/web/javascript/reference/global_objects/map/values/index.html new file mode 100644 index 0000000000..f1b23be7e7 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/map/values/index.html @@ -0,0 +1,103 @@ +--- +title: Map.prototype.values() +slug: Web/JavaScript/Referencia/Objectes_globals/Map/values +translation_of: Web/JavaScript/Reference/Global_Objects/Map/values +--- +
{{JSRef}}
+ +

El mètode values() retorna un nou objecte Iterator que conté els valor per cadascún dels elements de l'objecte Map en l'ordre d'inserció.

+ +

Sintaxi

+ +
myMap.values()
+ +

Exemples

+ +

Utilitzar values()

+ +
var myMap = new Map();
+myMap.set("0", "foo");
+myMap.set(1, "bar");
+myMap.set({}, "baz");
+
+var mapIter = myMap.values();
+
+console.log(mapIter.next().value); // "foo"
+console.log(mapIter.next().value); // "bar"
+console.log(mapIter.next().value); // "baz"
+ +

Especificacions

+ + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-map.prototype.values', 'Map.prototype.values')}}{{Spec2('ES6')}}Definició inicial.
+ +

Compatibilitat amb navegadors

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic38{{ CompatGeckoDesktop("20") }}{{CompatNo}}257.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}38{{ CompatGeckoMobile("20") }}{{CompatNo}}{{CompatNo}}8
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Map.prototype.entries()")}}
    • +
  • {{jsxref("Map.prototype.keys()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/math/abs/index.html b/files/ca/web/javascript/reference/global_objects/math/abs/index.html new file mode 100644 index 0000000000..34d3e5beb9 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/math/abs/index.html @@ -0,0 +1,129 @@ +--- +title: Math.abs() +slug: Web/JavaScript/Referencia/Objectes_globals/Math/abs +translation_of: Web/JavaScript/Reference/Global_Objects/Math/abs +--- +
{{JSRef("Global_Objects", "Math")}}
+ +

Resum

+ +

La funció Math.abs() retorna el valor absolut d'un nombre. És a dir:

+ +

Math.abs(x)=|x|={xifx>00ifx=0-xifx<0{\mathtt{\operatorname{Math.abs}(x)}} = {|x|} = \begin{cases} x & \text{if} \quad x \geq 0 \\ -x & \text{if} \quad x < 0 \end{cases}

+ +

Sintaxi

+ +
Math.abs(x)
+ +

Paràmetres

+ +
+
x
+
Un nombre.
+
+ +

Descripció

+ +

Degut a que abs() és un mètode estàtic de Math, sempre s'utilitza com a Math.abs(), en comptes de com a mètode d'una instància de Math (Math no és un constructor).

+ +

Exemples

+ +

Exemple: Comportament de Math.abs()

+ +

Si li passem una string no numèric o bé una variable {{jsxref("undefined")}}/buida retorna {{jsxref("NaN")}}. Passar {{jsxref("null")}} retorna 0.

+ +
Math.abs('-1');     // 1
+Math.abs(-2);       // 2
+Math.abs(null);     // 0
+Math.abs('string'); // NaN
+Math.abs();         // NaN
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.2.1', 'Math.abs')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.abs', 'Math.abs')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Math.ceil()")}}
    • +
  • {{jsxref("Math.floor()")}}
    • +
  • {{jsxref("Math.round()")}}
    • +
  • {{jsxref("Math.sign()")}} {{experimental_inline}}
    • +
  • {{jsxref("Math.trunc()")}} {{experimental_inline}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/math/acos/index.html b/files/ca/web/javascript/reference/global_objects/math/acos/index.html new file mode 100644 index 0000000000..fdf781a4e2 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/math/acos/index.html @@ -0,0 +1,131 @@ +--- +title: Math.acos() +slug: Web/JavaScript/Referencia/Objectes_globals/Math/acos +translation_of: Web/JavaScript/Reference/Global_Objects/Math/acos +--- +
{{JSRef("Global_Objects", "Math")}}
+ +

Resum

+ +

La funció Math.acos() retorna l'arccosinus (mesurat en radians) d'un nombre, és a dir:x∊[-1;1],Math.acos(x)=arccos(x)= l'únic y∊[0;π]tal quecos(y)=x\forall x \in [{-1};1],\;\mathtt{\operatorname{Math.acos}(x)} = \arccos(x) = \text{ the unique } \; y \in [0; \pi] \, \text{such that} \; \cos(y) = x

+ +

Sintaxi

+ +
Math.acos(x)
+ +

Paràmetres

+ +
+
x
+
Un nombre.
+
+ +

Descripció

+ +

El mètode Math.acos() retorna un valor numèric entre 0 i π radians per a x entre -1 i 1. Si el valor de x està fora d'aquest rang, retorna {{jsxref("NaN")}}.

+ +

Degut a que acos() és un mètode estàtic de Math, sempre s'utilitza com a Math.acos(), en comptes de com a mètode d'una instància de Math (Math no és un constructor).

+ +

Exemples

+ +

Exemple: Utilitzar Math.acos()

+ +
Math.acos(-2);  // NaN
+Math.acos(-1);  // 3.141592653589793
+Math.acos(0);   // 1.5707963267948966
+Math.acos(0.5); // 1.0471975511965979
+Math.acos(1);   // 0
+Math.acos(2);   // NaN
+
+ +

Per a valors menors que -1 o majors que 1, Math.acos() retorna {{jsxref("NaN")}}.

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.2.2', 'Math.acos')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.acos', 'Math.acos')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Math.asin()")}}
    • +
  • {{jsxref("Math.atan()")}}
    • +
  • {{jsxref("Math.atan2()")}}
    • +
  • {{jsxref("Math.cos()")}}
    • +
  • {{jsxref("Math.sin()")}}
    • +
  • {{jsxref("Math.tan()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/math/acosh/index.html b/files/ca/web/javascript/reference/global_objects/math/acosh/index.html new file mode 100644 index 0000000000..edfe1dd8c0 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/math/acosh/index.html @@ -0,0 +1,126 @@ +--- +title: Math.acosh() +slug: Web/JavaScript/Referencia/Objectes_globals/Math/acosh +translation_of: Web/JavaScript/Reference/Global_Objects/Math/acosh +--- +
{{JSRef}}
+ +

La funció Math.acosh() retorna l'accosinus hiperbòlic d'un nombre, és a dir

+ +

∀x≥1,Math.acosh(x)=arcosh(x)= l'única y≥0tal quecosh(y)=x\forall x \geq 1, \mathtt{\operatorname{Math.acosh}(x)} = \operatorname{arcosh}(x) = \text{ the unique } \; y \geq 0 \; \text{such that} \; \cosh(y) = x

+ +

Sintaxi

+ +
Math.acosh(x)
+ +

Paràmetres

+ +
+
x
+
Un nombre.
+
+ +

Descripció

+ +

Com que que acosh() és un mètode estàtic de Math, sempre s'utilitza com a Math.acosh(), en comptes de com a mètode d'una instància de Math (Math no és un constructor).

+ +

Exemples

+ +

Utilitzar Math.acosh()

+ +
Math.acosh(-1); // NaN
+Math.acosh(0);  // NaN
+Math.acosh(0.5) // NaN
+Math.acosh(1);  // 0
+Math.acosh(2);  // 1.3169578969248166
+
+ +

Math.acosh() retorna {{jsxref("NaN")}} per a valors menors que 1.

+ +

Polyfill

+ +

Per a tot x≥1x \geq 1, tenim que arcosh(x)=ln(x+x2-1)\operatorname {arcosh} (x) = \ln \left(x + \sqrt{x^{2} - 1} \right) i, per tant, es pot emular mitjançant la funció següent:

+ +
Math.acosh = Math.acosh || function(x) {
+  return Math.log(x + Math.sqrt(x * x - 1));
+};
+
+ +

Especificacions

+ + + + + + + + + + + + + + +
EspecificacionsEstatComentaris
{{SpecName('ES6', '#sec-math.acosh', 'Math.acosh')}}{{Spec2('ES6')}}Definició inicial.
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome("38")}}{{CompatGeckoDesktop("25")}}{{CompatNo}}{{CompatOpera("25")}}{{CompatSafari("7.1")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("25")}}{{CompatNo}}{{CompatNo}}8
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Math.asinh()")}} {{experimental_inline}}
    • +
  • {{jsxref("Math.atanh()")}} {{experimental_inline}}
    • +
  • {{jsxref("Math.cosh()")}} {{experimental_inline}}
    • +
  • {{jsxref("Math.sinh()")}} {{experimental_inline}}
    • +
  • {{jsxref("Math.tanh()")}} {{experimental_inline}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/math/asin/index.html b/files/ca/web/javascript/reference/global_objects/math/asin/index.html new file mode 100644 index 0000000000..81288af5b6 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/math/asin/index.html @@ -0,0 +1,133 @@ +--- +title: Math.asin() +slug: Web/JavaScript/Referencia/Objectes_globals/Math/asin +translation_of: Web/JavaScript/Reference/Global_Objects/Math/asin +--- +
{{JSRef("Global_Objects", "Math")}}
+ +

Resum

+ +

La funció Math.asin() retorna l'arcsinus (en radians) d'un nombre, és a dir:

+ +

∀x∊[-1;1],Math.asin(x)=arcsin(x)= l'únic y∊[-π2;π2]tal que  sin(y)=x\forall x \in [{-1};1],\;\mathtt{\operatorname{Math.asin}(x)} = \arcsin(x) = \text{ the unique } \; y \in \left[-\frac{\pi}{2}; \frac{\pi}{2}\right] \, \text{such that} \; \sin(y) = x

+ +

Sintaxi

+ +
Math.asin(x)
+ +

Paràmetres

+ +
+
x
+
Un nombre.
+
+ +

Descripció

+ +

El mètode Math.asin() retorna un valor numèric entre -π2-\frac{\pi}{2} i π2\frac{\pi}{2} radians per a x entre -1 i 1. Si el valor de x està fora d'aquest rang la funció retorna {{jsxref("NaN")}}.

+ +

Degut a que asin() és un mètode estàtic de Math, sempre s'utilitza com a Math.asin(), en comptes de com a mètode d'una instància de Math (Math no és un constructor).

+ +

Exemples

+ +

Exemple: Ús de Math.asin()

+ +
Math.asin(-2);  // NaN
+Math.asin(-1);  // -1.5707963267948966 (-pi/2)
+Math.asin(0);   // 0
+Math.asin(0.5); // 0.5235987755982989
+Math.asin(1);   // 1.570796326794897 (pi/2)
+Math.asin(2);   // NaN
+
+ +

Per a valors menors que -1 o majors que 1, Math.asin() retorna {{jsxref("NaN")}}.

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.2.3', 'Math.asin')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.asin', 'Math.asin')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Math.acos()")}}
    • +
  • {{jsxref("Math.atan()")}}
    • +
  • {{jsxref("Math.atan2()")}}
    • +
  • {{jsxref("Math.cos()")}}
    • +
  • {{jsxref("Math.sin()")}}
    • +
  • {{jsxref("Math.tan()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/math/asinh/index.html b/files/ca/web/javascript/reference/global_objects/math/asinh/index.html new file mode 100644 index 0000000000..9a249bb202 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/math/asinh/index.html @@ -0,0 +1,125 @@ +--- +title: Math.asinh() +slug: Web/JavaScript/Referencia/Objectes_globals/Math/asinh +translation_of: Web/JavaScript/Reference/Global_Objects/Math/asinh +--- +
{{JSRef}}
+ +

La funció Math.asinh() retorna l'arcsinus hiperbòlic d'un nombre, és a dir

+ +

Math.asinh(x)=arsinh(x)= l'única ytal quesinh(y)=x\mathtt{\operatorname{Math.asinh}(x)} = \operatorname{arsinh}(x) = \text{ the unique } \; y \; \text{such that} \; \sinh(y) = x

+ +

Sintaxi

+ +
Math.asinh(x)
+ +

Paràmetres

+ +
+
x
+
Un nombre.
+
+ +

Descripció

+ +

Com que que asinh() és un mètode estàtic de Math, sempre s'utilitza com a Math.asinh(), en comptes de com a mètode d'una instància de Math (Math no és un constructor).

+ +

Exemples

+ +

Utilitzar Math.asinh()

+ +
Math.asinh(1);  // 0.881373587019543
+Math.asinh(0);  // 0
+
+ +

Polyfill

+ +

Tenim que arsinh(x)=ln(x+x2+1)\operatorname {arsinh} (x) = \ln \left(x + \sqrt{x^{2} + 1} \right) amb el que podem emular el comportament amb la funció següent:

+ +
Math.asinh = Math.asinh || function(x) {
+  if (x === -Infinity) {
+    return x;
+  } else {
+    return Math.log(x + Math.sqrt(x * x + 1));
+  }
+};
+
+ +

Especificacions

+ + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-math.asinh', 'Math.asinh')}}{{Spec2('ES6')}}Definició inicial.
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome("38")}}{{CompatGeckoDesktop("25")}}{{CompatNo}}{{CompatOpera("25")}}{{CompatSafari("7.1")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("25")}}{{CompatNo}}{{CompatNo}}8
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Math.acosh()")}} {{experimental_inline}}
    • +
  • {{jsxref("Math.atanh()")}} {{experimental_inline}}
    • +
  • {{jsxref("Math.cosh()")}} {{experimental_inline}}
    • +
  • {{jsxref("Math.sinh()")}} {{experimental_inline}}
    • +
  • {{jsxref("Math.tanh()")}} {{experimental_inline}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/math/atan/index.html b/files/ca/web/javascript/reference/global_objects/math/atan/index.html new file mode 100644 index 0000000000..034578fd54 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/math/atan/index.html @@ -0,0 +1,127 @@ +--- +title: Math.atan() +slug: Web/JavaScript/Referencia/Objectes_globals/Math/atan +translation_of: Web/JavaScript/Reference/Global_Objects/Math/atan +--- +
{{JSRef("Global_Objects", "Math")}}
+ +

Resum

+ +

La funció Math.atan() retorna l'arctangent (en radians) d'un nombre, és a dir:

+ +

Math.atan(x)=arctan(x)= l'unic y∊[-π2;π2]tal quetan(y)=x\mathtt{\operatorname{Math.atan}(x)} = \arctan(x) = \text{ the unique } \; y \in \left[-\frac{\pi}{2}; \frac{\pi}{2}\right] \, \text{such that} \; \tan(y) = x

+ +

Sintaxi

+ +
Math.atan(x)
+ +

Paràmetres

+ +
+
x
+
Un nombre.
+
+ +

Descripció

+ +

El mètode Math.atan() retorna un valor numèric entre -π2-\frac{\pi}{2} i π2\frac{\pi}{2} radians.

+ +

Degut a que atan() és un mètode estàtic de Math, sempre s'utilitza com a Math.atan(), en comptes de com a mètode d'una instància de Math (Math no és un constructor).

+ +

Exemples

+ +

Exemple: Utilitzar Math.atan()

+ +
Math.atan(1);  // 0.7853981633974483
+Math.atan(0);  // 0
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.2.4', 'Math.atan')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.atan', 'Math.atan')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Math.acos()")}}
    • +
  • {{jsxref("Math.asin()")}}
    • +
  • {{jsxref("Math.atan2()")}}
    • +
  • {{jsxref("Math.cos()")}}
    • +
  • {{jsxref("Math.sin()")}}
    • +
  • {{jsxref("Math.tan()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/math/atan2/index.html b/files/ca/web/javascript/reference/global_objects/math/atan2/index.html new file mode 100644 index 0000000000..2816bb40b8 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/math/atan2/index.html @@ -0,0 +1,139 @@ +--- +title: Math.atan2() +slug: Web/JavaScript/Referencia/Objectes_globals/Math/atan2 +translation_of: Web/JavaScript/Reference/Global_Objects/Math/atan2 +--- +
{{JSRef}}
+ +

La funció Math.atan2() retorna l'arctangent del quocient dels arguments passats.

+ +

Sintaxi

+ +
Math.atan2(y, x)
+ +

Paràmetres

+ +
+
y
+
Primer nombre.
+
x
+
Segon nombre.
+
+ +

Descripció

+ +

El mètode Math.atan2() retorn aun valor numèric entre -π i π que representa l'angle theta d'un punt (x, y). Aquest angle es representa en radiants, en sentit contrari a les agulles del rellotge, entre l'eix positiu X i el punt (x, y). Cal destacar que els arguments d'aquesta funció representen les coordenades del punt, on el primer argument representa la coordenada y i el segon argument representa la coordenada x.

+ +

Math.atan2() rep els arguments x i y de forma separada mentre que Math.atan() rep la relació (ratio) entre aquests dos arguments.

+ +

Com que que atan2() és un mètode estàtic de Math, sempre s'utilitza com a Math.atan2(), en comptes de com a mètode d'una instància de Math (Math no és un constructor).

+ +

Exemples

+ +

Utilitzar Math.atan2()

+ +
Math.atan2(90, 15); // 1.4056476493802699
+Math.atan2(15, 90); // 0.16514867741462683
+
+Math.atan2(±0, -0);               // ±PI.
+Math.atan2(±0, +0);               // ±0.
+Math.atan2(±0, -x);               // ±PI for x > 0.
+Math.atan2(±0, x);                // ±0 for x > 0.
+Math.atan2(-y, ±0);               // -PI/2 for y > 0.
+Math.atan2(y, ±0);                // PI/2 for y > 0.
+Math.atan2(±y, -Infinity);        // ±PI for finite y > 0.
+Math.atan2(±y, +Infinity);        // ±0 for finite y > 0.
+Math.atan2(±Infinity, x);         // ±PI/2 for finite x.
+Math.atan2(±Infinity, -Infinity); // ±3*PI/4.
+Math.atan2(±Infinity, +Infinity); // ±PI/4.
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.2.5', 'Math.atan2')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.atan2', 'Math.atan2')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Math.acos()")}}
    • +
  • {{jsxref("Math.asin()")}}
    • +
  • {{jsxref("Math.atan()")}}
    • +
  • {{jsxref("Math.cos()")}}
    • +
  • {{jsxref("Math.sin()")}}
    • +
  • {{jsxref("Math.tan()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/math/atanh/index.html b/files/ca/web/javascript/reference/global_objects/math/atanh/index.html new file mode 100644 index 0000000000..8a6b7cc2c8 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/math/atanh/index.html @@ -0,0 +1,127 @@ +--- +title: Math.atanh() +slug: Web/JavaScript/Referencia/Objectes_globals/Math/atanh +translation_of: Web/JavaScript/Reference/Global_Objects/Math/atanh +--- +
{{JSRef}}
+ +

La funció Math.atanh() retorna l'arctangent hiperbòlica d'un nombre, és a dir

+ +

∀x∊(-1,1),Math.atanh(x)=arctanh(x)= l'única ytal quetanh(y)=x\forall x \in \left( -1, 1 \right), \mathtt{\operatorname{Math.atanh}(x)} = \operatorname{arctanh}(x) = \text{ the unique } \; y \; \text{such that} \; \tanh(y) = x

+ +

Sintaxi

+ +
Math.atanh(x)
+ +

Paràmetres

+ +
+
x
+
Un nombre.
+
+ +

Descripció

+ +

Com que que atanh() és un mètode estàtic de Math, sempre s'utilitza com a Math.atanh(), en comptes de com a mètode d'una instància de Math (Math no és un constructor).

+ +

Exemples

+ +

Utilitzar Math.atanh()

+ +
Math.atanh(-2);  // NaN
+Math.atanh(-1);  // -Infinity
+Math.atanh(0);   // 0
+Math.atanh(0.5); // 0.5493061443340548
+Math.atanh(1);   // Infinity
+Math.atanh(2);   // NaN
+
+ +

Es retorna {{jsxref("NaN")}} per a valors més grans que 1 o més petits que -1.

+ +

Polyfill

+ +

Per a |x|<1\left|x\right| < 1, tenim que artanh(x)=12ln(1+x1-x)\operatorname {artanh} (x) = \frac{1}{2}\ln \left( \frac{1 + x}{1 - x} \right) , que podem emular amb la funció següent:

+ +
Math.atanh = Math.atanh || function(x) {
+  return Math.log((1+x)/(1-x)) / 2;
+};
+
+ +

Especificacions

+ + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-math.atanh', 'Math.atanh')}}{{Spec2('ES6')}}Definició inicial.
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome("38")}}{{CompatGeckoDesktop("25")}}{{CompatNo}}{{CompatOpera("25")}}{{CompatSafari("7.1")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("25")}}{{CompatNo}}{{CompatNo}}8
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Math.acosh()")}} {{experimental_inline}}
    • +
  • {{jsxref("Math.asinh()")}} {{experimental_inline}}
    • +
  • {{jsxref("Math.cosh()")}} {{experimental_inline}}
    • +
  • {{jsxref("Math.sinh()")}} {{experimental_inline}}
    • +
  • {{jsxref("Math.tanh()")}} {{experimental_inline}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/math/cbrt/index.html b/files/ca/web/javascript/reference/global_objects/math/cbrt/index.html new file mode 100644 index 0000000000..70d6767183 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/math/cbrt/index.html @@ -0,0 +1,122 @@ +--- +title: Math.cbrt() +slug: Web/JavaScript/Referencia/Objectes_globals/Math/cbrt +translation_of: Web/JavaScript/Reference/Global_Objects/Math/cbrt +--- +
{{JSRef}}
+ +

La funció Math.cbrt() retorna la rel cúbica d'un nombre, és a dir

+ +

Math.cbrt(x)=x3=la únicaytal quey3=x\mathtt{Math.cbrt(x)} = \sqrt[3]{x} = \text{the unique} \; y \; \text{such that} \; y^3 = x

+ +

Sintaxi

+ +
Math.cbrt(x)
+ +

Paràmetres

+ +
+
x
+
Un nombre.
+
+ +

Descripció

+ +

Degut a que cbrt() és un mètode estàtic de Math, sempre s'utilitza com a Math.cbrt(), en comptes de com a mètode d'una instància de Math (Math no és un constructor).

+ +

Exemples

+ +

Utilitzar Math.cbrt()

+ +
Math.cbrt(-1); // -1
+Math.cbrt(0);  // 0
+Math.cbrt(1);  // 1
+
+Math.cbrt(2);  // 1.2599210498948734
+
+ +

Polyfill

+ +

Per a tot x≥0x \geq 0, tenim que x3=x1/3\sqrt[3]{x} = x^{1/3} , podem llavors emular aquest comportament amb la funció següent:

+ +
Math.cbrt = Math.cbrt || function(x) {
+  var y = Math.pow(Math.abs(x), 1/3);
+  return x < 0 ? -y : y;
+};
+
+ +

Especificacions

+ + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-math.cbrt', 'Math.cbrt')}}{{Spec2('ES6')}}Definició inicial.
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome("38")}}{{CompatGeckoDesktop("25")}}{{CompatNo}}{{CompatOpera("25")}}{{CompatSafari("7.1")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("25")}}{{CompatNo}}{{CompatNo}}8
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Math.pow()")}}
    • +
  • {{jsxref("Math.sqrt()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/math/ceil/index.html b/files/ca/web/javascript/reference/global_objects/math/ceil/index.html new file mode 100644 index 0000000000..a96880eecd --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/math/ceil/index.html @@ -0,0 +1,197 @@ +--- +title: Math.ceil() +slug: Web/JavaScript/Referencia/Objectes_globals/Math/ceil +translation_of: Web/JavaScript/Reference/Global_Objects/Math/ceil +--- +
{{JSRef("Global_Objects", "Math")}}
+ +

Resum

+ +

La funció Math.ceil() retorna el més petit dels nombres sencers més grans o iguals a un nombre donat.

+ +

Sintaxi

+ +
Math.ceil(x)
+ +

Paràmetres

+ +
+
x
+
Un nombre.
+
+ +

Descripció

+ +

Degut a que ceil() és un mètode estàtic de Math, sempre s'utilitza com a Math.ceil(), ren comptes de com a mètode d'una instància de Math (Math no és un constructor).

+ +

Exemples

+ +

Exemple: Ús de Math.ceil()

+ +

L'exemple següent mostra l'ús de Math.ceil().

+ +
Math.ceil(.95);   // 1
+Math.ceil(4);     // 4
+Math.ceil(7.004); // 8
+
+ +

Exemple: Ajust decimal

+ +
// Closure
+(function() {
+  /**
+   * Decimal adjustment of a number.
+   *
+   * @param {String}  type  The type of adjustment.
+   * @param {Number}  value The number.
+   * @param {Integer} exp   The exponent (the 10 logarithm of the adjustment base).
+   * @returns {Number} The adjusted value.
+   */
+  function decimalAdjust(type, value, exp) {
+    // If the exp is undefined or zero...
+    if (typeof exp === 'undefined' || +exp === 0) {
+      return Math[type](value);
+    }
+    value = +value;
+    exp = +exp;
+    // If the value is not a number or the exp is not an integer...
+    if (isNaN(value) || !(typeof exp === 'number' && exp % 1 === 0)) {
+      return NaN;
+    }
+    // Shift
+    value = value.toString().split('e');
+    value = Math[type](+(value[0] + 'e' + (value[1] ? (+value[1] - exp) : -exp)));
+    // Shift back
+    value = value.toString().split('e');
+    return +(value[0] + 'e' + (value[1] ? (+value[1] + exp) : exp));
+  }
+
+  // Decimal round
+  if (!Math.round10) {
+    Math.round10 = function(value, exp) {
+      return decimalAdjust('round', value, exp);
+    };
+  }
+  // Decimal floor
+  if (!Math.floor10) {
+    Math.floor10 = function(value, exp) {
+      return decimalAdjust('floor', value, exp);
+    };
+  }
+  // Decimal ceil
+  if (!Math.ceil10) {
+    Math.ceil10 = function(value, exp) {
+      return decimalAdjust('ceil', value, exp);
+    };
+  }
+})();
+
+// Round
+Math.round10(55.55, -1);   // 55.6
+Math.round10(55.549, -1);  // 55.5
+Math.round10(55, 1);       // 60
+Math.round10(54.9, 1);     // 50
+Math.round10(-55.55, -1);  // -55.5
+Math.round10(-55.551, -1); // -55.6
+Math.round10(-55, 1);      // -50
+Math.round10(-55.1, 1);    // -60
+// Floor
+Math.floor10(55.59, -1);   // 55.5
+Math.floor10(59, 1);       // 50
+Math.floor10(-55.51, -1);  // -55.6
+Math.floor10(-51, 1);      // -60
+// Ceil
+Math.ceil10(55.51, -1);    // 55.6
+Math.ceil10(51, 1);        // 60
+Math.ceil10(-55.59, -1);   // -55.5
+Math.ceil10(-59, 1);       // -50
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.2.6', 'Math.ceil')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.ceil', 'Math.ceil')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Math.abs()")}}
    • +
  • {{jsxref("Math.floor()")}}
    • +
  • {{jsxref("Math.round()")}}
    • +
  • {{jsxref("Math.sign()")}} {{experimental_inline}}
    • +
  • {{jsxref("Math.trunc()")}} {{experimental_inline}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/math/clz32/index.html b/files/ca/web/javascript/reference/global_objects/math/clz32/index.html new file mode 100644 index 0000000000..5cde08c7a8 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/math/clz32/index.html @@ -0,0 +1,155 @@ +--- +title: Math.clz32() +slug: Web/JavaScript/Referencia/Objectes_globals/Math/clz32 +translation_of: Web/JavaScript/Reference/Global_Objects/Math/clz32 +--- +
{{JSRef}}
+ +

La funció Math.clz32() retorna el nombre de zeros a l'esquerra que apareixen en una representació binària de 32 bits per a un nombre.

+ +

Sintaxi

+ +
Math.clz32(x)
+ +

Paràmetres

+ +
+
x
+
Un nombre.
+
+ +

Descripció

+ +

"clz32" és una abreviació de CountLeadingZeroes32.

+ +

Si x no és un nombre, primer es convertirà a un nombre, i després es convertirà a un nombre sencer de 32 bits sense signe.

+ +

Si el nombre sencer sense signe de 32 bits és 0, la funció retornarà 32 ja que tots els bits són 0.

+ +

Aquesta funció és particulament útil per a sistemes que compilin en JavaScript, com ara Emscripten.

+ +

Exemples

+ +

Utilitzar Math.clz32()

+ +
Math.clz32(1);                // 31
+Math.clz32(1000);             // 22
+Math.clz32();                 // 32
+
+[NaN, Infinity, -Infinity, 0, -0, null, undefined, 'foo', {}, []].filter(
+function(n) {
+  return Math.clz32(n) !== 32
+});                           // []
+
+Math.clz32(true);             // 31
+Math.clz32(3.5);              // 30
+
+ +

Polyfill

+ +

Aquesta funció polyfill utilitza {{jsxref("Math.imul")}}.

+ +
Math.clz32 = Math.clz32 || (function () {
+  'use strict';
+
+  var table = [
+    32, 31,  0, 16,  0, 30,  3,  0, 15,  0,  0,  0, 29, 10,  2,  0,
+     0,  0, 12, 14, 21,  0, 19,  0,  0, 28,  0, 25,  0,  9,  1,  0,
+    17,  0,  4,   ,  0,  0, 11,  0, 13, 22, 20,  0, 26,  0,  0, 18,
+     5,  0,  0, 23,  0, 27,  0,  6,  0, 24,  7,  0,  8,  0,  0,  0]
+
+  // Adaptat d'un algorisme trobat a Hacker's Delight, pàgina 103.
+  return function (x) {
+    // Tingueu en compte que les variables no tenen perquè ser les mateixes.
+
+    // 1. On n = ToUint32(x).
+    var v = Number(x) >>> 0
+
+    // 2. On p és el nombre de zeros a l'esquerra en la representació binària de 32 bits de n.
+    v |= v >>> 1
+    v |= v >>> 2
+    v |= v >>> 4
+    v |= v >>> 8
+    v |= v >>> 16
+    v = table[Math.imul(v, 0x06EB14F9) >>> 26]
+
+    // Retorna p.
+    return v
+  }
+})();
+
+ +

Especificacions

+ + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-math.clz32', 'Math.clz32')}}{{Spec2('ES6')}}Definició inicial.
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome("38")}}{{CompatGeckoDesktop("31")}}{{CompatNo}}{{CompatOpera("25")}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("31")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Math")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/math/cos/index.html b/files/ca/web/javascript/reference/global_objects/math/cos/index.html new file mode 100644 index 0000000000..0236b38c9c --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/math/cos/index.html @@ -0,0 +1,128 @@ +--- +title: Math.cos() +slug: Web/JavaScript/Referencia/Objectes_globals/Math/cos +translation_of: Web/JavaScript/Reference/Global_Objects/Math/cos +--- +
{{JSRef("Global_Objects", "Math")}}
+ +

Resum

+ +

La funció Math.cos() retorna el cosinus d'un nombre.

+ +

Sintaxi

+ +
Math.cos(x)
+ +

Paràmetres

+ +
+
x
+
Un nombre, mesurat en radians.
+
+ +

Descripció

+ +

El mètode Math.cos() retorna un valor numèric entre -1 i 1, que representa el cosinus d'un angle.

+ +

Degut a que cos() és un mètode estàtic de Math, sempre s'utilitza com a Math.cos(), en comptes de com a mètode d'una instància de Math (Math no és un constructor).

+ +

Exemples

+ +

Exemple: Utilitzar Math.cos()

+ +
Math.cos(0);           // 1
+Math.cos(1);           // 0.5403023058681398
+
+Math.cos(Math.PI);     // -1
+Math.cos(2 * Math.PI); // 1
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.2.7', 'Math.cos')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.cos', 'Math.cos')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Math.acos()")}}
    • +
  • {{jsxref("Math.asin()")}}
    • +
  • {{jsxref("Math.atan()")}}
    • +
  • {{jsxref("Math.atan2()")}}
    • +
  • {{jsxref("Math.sin()")}}
    • +
  • {{jsxref("Math.tan()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/math/cosh/index.html b/files/ca/web/javascript/reference/global_objects/math/cosh/index.html new file mode 100644 index 0000000000..00ebc259b9 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/math/cosh/index.html @@ -0,0 +1,130 @@ +--- +title: Math.cosh() +slug: Web/JavaScript/Referencia/Objectes_globals/Math/cosh +translation_of: Web/JavaScript/Reference/Global_Objects/Math/cosh +--- +
{{JSRef}}
+ +

La funció Math.cosh() retorna el cosinus hiperbòlic d'un nombre, això es pot expressar utilitzant la {{jsxref("Math.E", "constant e", "", 1)}}:

+ +

Math.cosh(x)=ex+e-x2\mathtt{\operatorname{Math.cosh(x)}} = \frac{e^x + e^{-x}}{2}

+ +

Sintaxi

+ +
Math.cosh(x)
+ +

Paràmetres

+ +
+
x
+
Un nombre.
+
+ +

Descripció

+ +

Com que que cosh() és un mètode estàtic de Math, sempre s'utilitza com a Math.cosh(), en comptes de com a mètode d'una instància de Math (Math no és un constructor).

+ +

Exemples

+ +

Utilitzar Math.cosh()

+ +
Math.cosh(0);  // 1
+Math.cosh(1);  // 1.5430806348152437
+Math.cosh(-1); // 1.5430806348152437
+
+ +

Polyfill

+ +

Aquesta funció es pot emular amb l'ajuda de la funció {{jsxref("Math.exp()")}}:

+ +
Math.cosh = Math.cosh || function(x) {
+  return (Math.exp(x) + Math.exp(-x)) / 2;
+}
+
+ +

o bé utilitzant només una crida a la funció {{jsxref("Math.exp()")}}:

+ +
Math.cosh = Math.cosh || function(x) {
+  var y = Math.exp(x);
+  return (y + 1 / y) / 2;
+};
+
+ +

Especificacions

+ + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-math.cosh', 'Math.cosh')}}{{Spec2('ES6')}}Definició inicial.
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome("38")}}{{CompatGeckoDesktop("25")}}{{CompatNo}}{{CompatOpera("25")}}{{CompatSafari("7.1")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("25")}}{{CompatNo}}{{CompatNo}}8
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Math.acosh()")}} {{experimental_inline}}
    • +
  • {{jsxref("Math.asinh()")}} {{experimental_inline}}
    • +
  • {{jsxref("Math.atanh()")}} {{experimental_inline}}
    • +
  • {{jsxref("Math.sinh()")}} {{experimental_inline}}
    • +
  • {{jsxref("Math.tanh()")}} {{experimental_inline}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/math/e/index.html b/files/ca/web/javascript/reference/global_objects/math/e/index.html new file mode 100644 index 0000000000..efe7476396 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/math/e/index.html @@ -0,0 +1,118 @@ +--- +title: Math.E +slug: Web/JavaScript/Referencia/Objectes_globals/Math/E +translation_of: Web/JavaScript/Reference/Global_Objects/Math/E +--- +
{{JSRef("Global_Objects", "Math")}}
+ +

Resum

+ +

La propietat Math.E representa la base dels logaritmes naturals, e, el seu valor aproximat és de 2.718.

+ +

Math.E=e≈2.718\mathtt{\mi{Math.E}} = e \approx 2.718

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

Descripció

+ +

Com que E és una propietat estàtica de Math, sempre s'utilitza com Math.E en comptes de com una propietat d'un objecte Math creat (Math no és un constructor).

+ +

Exemples

+ +

Exemple: Utilitzar Math.E

+ +

La funció que trobareu a continuació retorna e:

+ +
function getNapier() {
+  return Math.E;
+}
+
+getNapier(); // 2.718281828459045
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat en JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.1.1', 'Math.E')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.e', 'Math.E')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Math.exp()")}}
    • +
  • {{jsxref("Math.log()")}}
    • +
  • {{jsxref("Math.log1p()")}} {{experimental_inline}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/math/exp/index.html b/files/ca/web/javascript/reference/global_objects/math/exp/index.html new file mode 100644 index 0000000000..c6d6c6c098 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/math/exp/index.html @@ -0,0 +1,123 @@ +--- +title: Math.exp() +slug: Web/JavaScript/Referencia/Objectes_globals/Math/exp +translation_of: Web/JavaScript/Reference/Global_Objects/Math/exp +--- +
{{JSRef}}
+ +

La funció Math.exp() retorna ex, on x és l'argument, i e és {{jsxref("Math.E", "la constant d'Euler", "", 1)}}, la base dels logaritmes naturals.

+ +

Sintaxi

+ +
Math.exp(x)
+ +

Paràmetres

+ +
+
x
+
Un nombre.
+
+ +

Descripció

+ +

Deguat a que exp() és un mètode estàtic de Math, aquest pot emprar-se com a Math.exp(), en comptes de cridar-lo com un mètode d'un objecte de tipus Math (Math no és un constructor).

+ +

Exemples

+ +

Utilitzar Math.exp()

+ +
Math.exp(-1); // 0.36787944117144233
+Math.exp(0);  // 1
+Math.exp(1);  // 2.718281828459045
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.2.8', 'Math.exp')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.exp', 'Math.exp')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Math.E")}}
    • +
  • {{jsxref("Math.expm1()")}} {{experimental_inline}}
    • +
  • {{jsxref("Math.log()")}}
    • +
  • {{jsxref("Math.log10()")}} {{experimental_inline}}
    • +
  • {{jsxref("Math.log1p()")}} {{experimental_inline}}
    • +
  • {{jsxref("Math.log2()")}} {{experimental_inline}}
    • +
  • {{jsxref("Math.pow()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/math/expm1/index.html b/files/ca/web/javascript/reference/global_objects/math/expm1/index.html new file mode 100644 index 0000000000..b8055fba45 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/math/expm1/index.html @@ -0,0 +1,122 @@ +--- +title: Math.expm1() +slug: Web/JavaScript/Referencia/Objectes_globals/Math/expm1 +translation_of: Web/JavaScript/Reference/Global_Objects/Math/expm1 +--- +
{{JSRef}}
+ +

La funció Math.expm1() retorna ex - 1, on x és l'argument i {{jsxref("Math.E", "e", "", 1)}} és la base dels logaritmes naturals.

+ +

Sintaxi

+ +
Math.expm1(x)
+ +

Paràmetres

+ +
+
x
+
Un nombre.
+
+ +

Descripció

+ +

Com que expm1() és un mètode estàtic de Math, sempre s'utilitza com Math.expm1() en comptes de com un mètode d'un objecte Math creat (Math no és un constructor).

+ +

Exemples

+ +

Utilitzar Math.expm1()

+ +
Math.expm1(-1); // -0.6321205588285577
+Math.expm1(0);  // 0
+Math.expm1(1);  // 1.718281828459045
+
+ +

Polyfill

+ +

Aquesta funció pot ser emulada amb l'ajuda de la funció {{jsxref("Math.exp()")}}:

+ +
Math.expm1 = Math.expm1 || function(x) {
+  return Math.exp(x) - 1;
+};
+
+ +

Especificacions

+ + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-math.expm1', 'Math.expm1')}}{{Spec2('ES6')}}Definició inicial.
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome("38")}}{{CompatGeckoDesktop("25")}}{{CompatNo}}{{CompatOpera("25")}}{{CompatSafari("7.1")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("25")}}{{CompatNo}}{{CompatNo}}8
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Math.E")}}
    • +
  • {{jsxref("Math.exp()")}}
    • +
  • {{jsxref("Math.log()")}}
    • +
  • {{jsxref("Math.log10()")}} {{experimental_inline}}
    • +
  • {{jsxref("Math.log1p()")}} {{experimental_inline}}
    • +
  • {{jsxref("Math.log2()")}} {{experimental_inline}}
    • +
  • {{jsxref("Math.pow()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/math/floor/index.html b/files/ca/web/javascript/reference/global_objects/math/floor/index.html new file mode 100644 index 0000000000..4a83b8d0e8 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/math/floor/index.html @@ -0,0 +1,194 @@ +--- +title: Math.floor() +slug: Web/JavaScript/Referencia/Objectes_globals/Math/floor +translation_of: Web/JavaScript/Reference/Global_Objects/Math/floor +--- +
{{JSRef("Global_Objects", "Math")}}
+ +

Resum

+ +

La funció Math.floor() retorna el nombre més gran dels nombres més petits o iguals a un nombre donat.

+ +

Sintaxi

+ +
Math.floor(x)
+ +

Paràmetres

+ +
+
x
+
Un nombre.
+
+ +

Descripció

+ +

Degut a que floor() és un mètode estàtic de Math, sempre s'utilitza com a Math.floor(), en comptes de com a mètode d'una instància de Math (Math no és un constructor).

+ +

Exemples

+ +

Exemple: Utilitzar Math.floor()

+ +
Math.floor( 45.95); //  45
+Math.floor(-45.95); // -46
+
+ +

Exemple: Ajust decimal

+ +
// Closure
+(function() {
+  /**
+   * Ajust decimal d'un nombre.
+   *
+   * @param {String}  type  El tipus d'ajust.
+   * @param {Number}  value El nombre.
+   * @param {Integer} exp   L'exponent (L'algoritme en base 10  de la base d'ajust
+   * @returns {Number} El valor ajustat.
+   */
+  function decimalAdjust(type, value, exp) {
+    // Si exp és undefined o zero...
+    if (typeof exp === 'undefined' || +exp === 0) {
+      return Math[type](value);
+    }
+    value = +value;
+    exp = +exp;
+    // Si value no és un nombre o exp no és un nombre sencer...
+    if (isNaN(value) || !(typeof exp === 'number' && exp % 1 === 0)) {
+      return NaN;
+    }
+    // Desplaçament
+    value = value.toString().split('e');
+    value = Math[type](+(value[0] + 'e' + (value[1] ? (+value[1] - exp) : -exp)));
+    // Desfer el desplaçament
+    value = value.toString().split('e');
+    return +(value[0] + 'e' + (value[1] ? (+value[1] + exp) : exp));
+  }
+
+  // Arrodoniment decimal
+  if (!Math.round10) {
+    Math.round10 = function(value, exp) {
+      return decimalAdjust('round', value, exp);
+    };
+  }
+  // Arrodoniment decimal a la baixa
+  if (!Math.floor10) {
+    Math.floor10 = function(value, exp) {
+      return decimalAdjust('floor', value, exp);
+    };
+  }
+  // Arrodoniment decimal a l'alça
+  if (!Math.ceil10) {
+    Math.ceil10 = function(value, exp) {
+      return decimalAdjust('ceil', value, exp);
+    };
+  }
+})();
+
+// Arrodoniments
+Math.round10(55.55, -1);   // 55.6
+Math.round10(55.549, -1);  // 55.5
+Math.round10(55, 1);       // 60
+Math.round10(54.9, 1);     // 50
+Math.round10(-55.55, -1);  // -55.5
+Math.round10(-55.551, -1); // -55.6
+Math.round10(-55, 1);      // -50
+Math.round10(-55.1, 1);    // -60
+// Arrodoniments a la baixa
+Math.floor10(55.59, -1);   // 55.5
+Math.floor10(59, 1);       // 50
+Math.floor10(-55.51, -1);  // -55.6
+Math.floor10(-51, 1);      // -60
+// Arrodoniments a l'alça
+Math.ceil10(55.51, -1);    // 55.6
+Math.ceil10(51, 1);        // 60
+Math.ceil10(-55.59, -1);   // -55.5
+Math.ceil10(-59, 1);       // -50
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
ECMAScript 1a EdicióStandardDefinició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.2.9', 'Math.floor')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.floor', 'Math.floor')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Math.abs()")}}
    • +
  • {{jsxref("Math.ceil()")}}
    • +
  • {{jsxref("Math.round()")}}
    • +
  • {{jsxref("Math.sign()")}} {{experimental_inline}}
    • +
  • {{jsxref("Math.trunc()")}} {{experimental_inline}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/math/fround/index.html b/files/ca/web/javascript/reference/global_objects/math/fround/index.html new file mode 100644 index 0000000000..7411993dbc --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/math/fround/index.html @@ -0,0 +1,118 @@ +--- +title: Math.fround() +slug: Web/JavaScript/Referencia/Objectes_globals/Math/fround +translation_of: Web/JavaScript/Reference/Global_Objects/Math/fround +--- +
{{JSRef}}
+ +

La funció Math.fround() retorna la representació en coma flotant de precisió simple més propera d'un nombre.

+ +

Sintaxi

+ +
Math.fround(x)
+ +

Paràmetres

+ +
+
x
+
Un nombre.
+
+ +

Descripció

+ +

Com que fround() és un mètode estàtic de Math, sempre s'utilitza com Math.fround() en comptes de com un mètode d'un objecte Math creat (Math no és un constructor).

+ +

Exemples

+ +

Utilitzar Math.fround()

+ +
Math.fround(0);     // 0
+Math.fround(1);     // 1
+Math.fround(1.337); // 1.3370000123977661
+Math.fround(1.5);   // 1.5
+Math.fround(NaN);   // NaN
+
+ +

Polyfill

+ +

El comportament d'aquesta funció pot ser emulat amb la funció següent, si {{jsxref("Float32Array")}} està suportat:

+ +
Math.fround = Math.fround || function(x) {
+  return new Float32Array([x])[0];
+};
+
+ +

Especificacions

+ + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-math.fround', 'Math.fround')}}{{Spec2('ES6')}}Definició inicial.
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome("38")}}{{CompatGeckoDesktop("26")}}{{CompatNo}}{{CompatOpera("25")}}{{CompatSafari("7.1")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}8
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Math.round()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/math/hypot/index.html b/files/ca/web/javascript/reference/global_objects/math/hypot/index.html new file mode 100644 index 0000000000..e29bb754f1 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/math/hypot/index.html @@ -0,0 +1,139 @@ +--- +title: Math.hypot() +slug: Web/JavaScript/Referencia/Objectes_globals/Math/hypot +translation_of: Web/JavaScript/Reference/Global_Objects/Math/hypot +--- +
{{JSRef}}
+ +

La funció Math.hypot() retorna la rel quadrada de la suma dels quadrats dels seus arguments, és a dir:

+ +

Math.hypot(v1,v2,…,vn)=∑i=1nvi2=v12+v22+…+vn2\mathtt{\operatorname{Math.hypot}(v_1, v_2, \dots, v_n)} = \sqrt{\sum_{i=1}^n v_i^2} = \sqrt{v_1^2 + v_2^2 + \dots + v_n^2}

+ +

Sintaxi

+ +
Math.hypot([valor1[, valor2[, ...]]])
+ +

Paràmetres

+ +
+
valor1, valor2, ...
+
Nombres.
+
+ +

Descripció

+ +

Com que que hypot() és un mètode estàtic de Math, sempre s'utilitza com a Math.hypot(), en comptes de com a mètode d'una instància de Math (Math no és un constructor).

+ +

Si no es passa cap argument, el resultat és +0.

+ +

Si al menys un dels arguments no pot ser convertit a nombre el resultat és {{jsxref("Global_Objects/NaN", "NaN")}}.

+ +

Quan se li passa només un argument, Math.hypot() retorna el mateix valor que retornaria Math.abs().

+ +

Exemples

+ +

Utilitzar Math.hypot()

+ +
Math.hypot(3, 4);        // 5
+Math.hypot(3, 4, 5);     // 7.0710678118654755
+Math.hypot();            // 0
+Math.hypot(NaN);         // NaN
+Math.hypot(3, 4, 'foo'); // NaN, +'foo' => NaN
+Math.hypot(3, 4, '5');   // 7.0710678118654755, +'5' => 5
+Math.hypot(-3);          // 3, el mateix que Math.abs(-3)
+
+ +

Polyfill

+ +

Aquest mètode pot emular-se mitjançant la funció següent:

+ +
Math.hypot = Math.hypot || function() {
+  var y = 0;
+  var length = arguments.length;
+
+  for (var i = 0; i < length; i++) {
+    if (arguments[i] === Infinity || arguments[i] === -Infinity) {
+      return Infinity;
+    }
+    y += arguments[i] * arguments[i];
+  }
+  return Math.sqrt(y);
+};
+
+ +

Especificacions

+ + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-math.hypot', 'Math.hypot')}}{{Spec2('ES6')}}Definició inicial.
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome("38")}}{{CompatGeckoDesktop("27")}}{{CompatNo}}{{CompatOpera("25")}}{{CompatSafari("7.1")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("27")}}{{CompatNo}}{{CompatNo}}8
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Math.abs()")}}
    • +
  • {{jsxref("Math.pow()")}}
    • +
  • {{jsxref("Math.sqrt()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/math/imul/index.html b/files/ca/web/javascript/reference/global_objects/math/imul/index.html new file mode 100644 index 0000000000..53050a9cd6 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/math/imul/index.html @@ -0,0 +1,120 @@ +--- +title: Math.imul() +slug: Web/JavaScript/Referencia/Objectes_globals/Math/imul +translation_of: Web/JavaScript/Reference/Global_Objects/Math/imul +--- +
{{JSRef}}
+ +

La funció Math.imul() retorna el resultat de la multiplicació de 32 bits similar a la de C dels dos paràmetres.

+ +

Sintaxi

+ +
Math.imul(a, b)
+ +

Paràmetres

+ +
+
a
+
Primer nombre.
+
b
+
Segon nombre.
+
+ +

Descripció

+ +

Math.imul() permet una multiplicació ràpida de nombres sencers de 32 bits amb una semàtica similar a la de C. Aquesta característica esdevé útil per a projectes com Emscripten. Com que imul() és un mètode estàtic de Math, sempre s'utilitza com Math.imul() en comptes de com un mètode d'un objecte Math creat (Math no és un constructor).

+ +

Exemples

+ +

Utilitzar Math.imul()

+ +
Math.imul(2, 4);          // 8
+Math.imul(-1, 8);         // -8
+Math.imul(-2, -2);        // 4
+Math.imul(0xffffffff, 5); // -5
+Math.imul(0xfffffffe, 5); // -10
+
+ +

Polyfill

+ +

Aquesta funció pot ser emulada mitjançant la següent funció:

+ +
Math.imul = Math.imul || function(a, b) {
+  var ah = (a >>> 16) & 0xffff;
+  var al = a & 0xffff;
+  var bh = (b >>> 16) & 0xffff;
+  var bl = b & 0xffff;
+  // el desplaçament de zero posicions solventa el signe a la part més significativa
+  // el |0 del final converteix el valor sense signe en un valor amb signe
+  return ((al * bl) + (((ah * bl + al * bh) << 16) >>> 0)|0);
+};
+
+ +

Especificacions

+ + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-math.imul', 'Math.imul')}}{{Spec2('ES6')}}Definició inicial.
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome("28")}}{{CompatGeckoDesktop("20")}}{{CompatUnknown}}{{CompatOpera("16")}}{{CompatSafari("7")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("20")}}{{CompatUnknown}}{{CompatUnknown}}7
+
diff --git a/files/ca/web/javascript/reference/global_objects/math/index.html b/files/ca/web/javascript/reference/global_objects/math/index.html new file mode 100644 index 0000000000..d493f51b40 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/math/index.html @@ -0,0 +1,205 @@ +--- +title: Math +slug: Web/JavaScript/Referencia/Objectes_globals/Math +translation_of: Web/JavaScript/Reference/Global_Objects/Math +--- +
{{JSRef("Global_Objects", "Math")}}
+ +

Resum

+ +

Math és un objecte proporcionat pel llenguatge que té propietats i mètodes que pretenen ajudar en càlculs matemàtics. L'objecte conté constants i funcions matemàtiques.

+ +

Descripció

+ +

A diferència d'altres objectes globals, Math no és un constructor. Totes les propietats i mètodes de Math són estàtics. Per a utilitzar la constant pi es fa anar Math.PI i la funció sinus es crida Math.sin(x), on x és l'argument que rebrà el mètode. Les constants tenen la presició d'un nombre real de JavaScript.

+ +

Propietats

+ +
+
{{jsxref("Math.E")}}
+
La constant de Euler (també coneguda com a nombre E) i la base dels logaritmes naturals, el seu valor aproximat és de 2.718.
+
{{jsxref("Math.LN2")}}
+
El logaritme natural de 2, el seu valor aproximat és de 0.693.
+
{{jsxref("Math.LN10")}}
+
El logaritme natural de 10, el seu valor aproximat és de 2.303.
+
{{jsxref("Math.LOG2E")}}
+
El logaritme de E en base 2, el seu valor aproximat és de 1.443.
+
{{jsxref("Math.LOG10E")}}
+
El logaritme de E en base 10, el seu valor aproximat és de 0.434.
+
{{jsxref("Math.PI")}}
+
La proporció entre la circumferència d'un cercle i el seu diàmetre, el seu valor aproximat és de 3.14159.
+
{{jsxref("Math.SQRT1_2")}}
+
La rel quadrada de un mig (1/2); tanmateix 1 dividit per la rel quadrada de 2, el seu valor aproximat és de 0.707.
+
{{jsxref("Math.SQRT2")}}
+
La rel quadrada de 2, el seu valor aproximat és de 1.414.
+
+ +

Mètodes

+ +
+

Fixeu-vos que les funcions (sin(), cos(), tan(), asin(), acos(), atan(), atan2()) reben i retornen angles en radians. Per a convertir radians a graus cal dividir per (Math.PI / 180), o bé multiplicar si el que es pretèn es transformar graus a radians.

+
+ +
+

Cal destacar que la precisió de moltes de les funcions matemàtiques és depenent de la implementació. Això vol dir que el mateix codi pot donar resultats diferent en diferents navegadors, i fins i tot sota el mateix navegador o motor JS si es prova en diferents sistemes operatius or arquitectures.

+
+ +
+
{{jsxref("Global_Objects/Math/abs", "Math.abs(x)")}}
+
Retorna el valor absolut d'un nombre.
+
{{jsxref("Global_Objects/Math/acos", "Math.acos(x)")}}
+
Retorna l'arccosinus d'un nombre.
+
{{jsxref("Global_Objects/Math/acosh", "Math.acosh(x)")}} {{experimental_inline}}
+
Retorna l'arccosinus hiperbòlic d'un nombre.
+
{{jsxref("Global_Objects/Math/asin", "Math.asin(x)")}}
+
Tetorna l'arcsinus d'un nombre.
+
{{jsxref("Global_Objects/Math/asinh", "Math.asinh(x)")}} {{experimental_inline}}
+
Retorna l'arcsinus hiperbòlic d'un nombre.
+
{{jsxref("Global_Objects/Math/atan", "Math.atan(x)")}}
+
Retorna l'arctangent d'un nombre.
+
{{jsxref("Global_Objects/Math/atanh", "Math.atanh(x)")}} {{experimental_inline}}
+
Retorna l'arctangent hiperbòlic d'un nombre.
+
{{jsxref("Global_Objects/Math/atan2", "Math.atan2(y, x)")}}
+
Retorna l'arctangent del cocient dels paràmetres donats.
+
{{jsxref("Global_Objects/Math/cbrt", "Math.cbrt(x)")}} {{experimental_inline}}
+
Retorna la rel cúbica d'un nombre.
+
{{jsxref("Global_Objects/Math/ceil", "Math.ceil(x)")}}
+
Retorna el nombre sencer més petit que és més gran o igual al nombre donat.
+
{{jsxref("Global_Objects/Math/clz32", "Math.clz32(x)")}} {{experimental_inline}}
+
Retorna el nombre de zeros a l'esquerra que el nombre donat tindria si fós emmagatzemat en 32 bits.
+
{{jsxref("Global_Objects/Math/cos", "Math.cos(x)")}}
+
Retorna el cosinus d'un nombre.
+
{{jsxref("Global_Objects/Math/cosh", "Math.cosh(x)")}} {{experimental_inline}}
+
Retorna el cosinus hiperbòlic d'un nombre.
+
{{jsxref("Global_Objects/Math/exp", "Math.exp(x)")}}
+
Retorna Ex, on x és el paràmetre i E és la constant de Euler (2.718 aproximadament).
+
{{jsxref("Global_Objects/Math/expm1", "Math.expm1(x)")}} {{experimental_inline}}
+
Retorna exp(x) - 1.
+
{{jsxref("Global_Objects/Math/floor", "Math.floor(x)")}}
+
Retorna el nombre sencer més gran que és igual o menor que el nombre donat.
+
{{jsxref("Global_Objects/Math/fround", "Math.fround(x)")}} {{experimental_inline}}
+
Retorna el nombre en coma float de precisió simple més proper al nombre donat.
+
{{jsxref("Global_Objects/Math/hypot", "Math.hypot([x[, y[, …]]])")}} {{experimental_inline}}
+
Retorna la rel quadrada del quadrat dels dos paràmetres donats.
+
{{jsxref("Global_Objects/Math/imul", "Math.imul(x, y)")}} {{experimental_inline}}
+
Retorna el resultat de multiplicar els dos paràmetres com a nombres sencers de 32 bits.
+
{{jsxref("Global_Objects/Math/log", "Math.log(x)")}}
+
Retorna el logaritme natural (loge, també ln) d'un nombre.
+
{{jsxref("Global_Objects/Math/log1p", "Math.log1p(x)")}} {{experimental_inline}}
+
Retorna el logaritme natural de 1 + x (loge, també ln) del nombre donat.
+
{{jsxref("Global_Objects/Math/log10", "Math.log10(x)")}} {{experimental_inline}}
+
Retorna el logaritme en base 10 d'un nombre.
+
{{jsxref("Global_Objects/Math/log2", "Math.log2(x)")}} {{experimental_inline}}
+
Retorna el logaritme en base 2 d'un nombre.
+
{{jsxref("Global_Objects/Math/max", "Math.max([x[, y[, …]]])")}}
+
Retorna el major de zero o més nombres donats.
+
{{jsxref("Global_Objects/Math/min", "Math.min([x[, y[, …]]])")}}
+
Retorna el menor de zero o més nombres donats.
+
{{jsxref("Global_Objects/Math/pow", "Math.pow(base, exponent)")}}
+
Retorna la base elevada a l'exponent, és a dir, baseexponent.
+
{{jsxref("Global_Objects/Math/random", "Math.random()")}}
+
Retorna un nombre pseudo aleatori comprés entre 0 i 1.
+
{{jsxref("Global_Objects/Math/round", "Math.round(x)")}}
+
Retorna el nombre sencer més proper al nombre donat.
+
{{jsxref("Global_Objects/Math/sign", "Math.sign(x)")}} {{experimental_inline}}
+
Retorna el signe de x, indicant si x és positiu, negatiu o zero.
+
{{jsxref("Global_Objects/Math/sin", "Math.sin(x)")}}
+
Retorna el sinus d'un nombre.
+
{{jsxref("Global_Objects/Math/sinh", "Math.sinh(x)")}} {{experimental_inline}}
+
Retorna el sinus hiperbòlic d'un nombre.
+
{{jsxref("Global_Objects/Math/sqrt", "Math.sqrt(x)")}}
+
Retorna el resultat positiu de la rel quadrada d'un nombre.
+
{{jsxref("Global_Objects/Math/tan", "Math.tan(x)")}}
+
Retorna la tangent d'un nombre.
+
{{jsxref("Global_Objects/Math/tanh", "Math.tanh(x)")}} {{experimental_inline}}
+
Retorna la tangent hiperbòlica d'un nombre.
+
Math.toSource() {{non-standard_inline}}
+
Retorna la cadena de caràcters "Math".
+
{{jsxref("Global_Objects/Math/trunc", "Math.trunc(x)")}} {{experimental_inline}}
+
Retorna la part sencera del nombre donat.
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementada a JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.8', 'Math')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math-object', 'Math')}}{{Spec2('ES6')}}Nous mètodes afegits: {{jsxref("Math.log10()", "log10()")}}, {{jsxref("Math.log2()", "log2()")}}, {{jsxref("Math.log1p()", "log1p()")}}, {{jsxref("Math.expm1()", "expm1()")}}, {{jsxref("Math.cosh()", "cosh()")}}, {{jsxref("Math.sinh()", "sinh()")}}, {{jsxref("Math.tanh()", "tanh()")}}, {{jsxref("Math.acosh()", "acosh()")}}, {{jsxref("Math.asinh()", "asinh()")}}, {{jsxref("Math.atanh()", "atanh()")}}, {{jsxref("Math.hypot()", "hypot()")}}, {{jsxref("Math.trunc()", "trunc()")}}, {{jsxref("Math.sign()", "sign()")}}, {{jsxref("Math.imul()", "imul()")}}, {{jsxref("Math.fround()", "fround()")}}, {{jsxref("Math.cbrt()", "cbrt()")}} i {{jsxref("Math.clz32()", "clz32()")}}.
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Global_Objects/Number", "Number")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/math/ln10/index.html b/files/ca/web/javascript/reference/global_objects/math/ln10/index.html new file mode 100644 index 0000000000..42107c85f5 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/math/ln10/index.html @@ -0,0 +1,118 @@ +--- +title: Math.LN10 +slug: Web/JavaScript/Referencia/Objectes_globals/Math/LN10 +translation_of: Web/JavaScript/Reference/Global_Objects/Math/LN10 +--- +
{{JSRef("Global_Objects", "Math")}}
+ +

Resum

+ +

La propietat Math.LN10 representa el logaritme natural de 10, aproximadament 2.302:

+ +

Math.LN10=ln(10)≈2.302\mathtt{\mi{Math.LN10}} = \ln(10) \approx 2.302

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

Descripció

+ +

Degut a que LN10 és una propietat estàtica de Math, aquesta sempre s'accedeix mitjançant el codi Math.LN10, en comptes de com una propietat d'un objecte Math creat (Math no és un constructor).

+ +

Exemples

+ +

Exemple: Utilitzar Math.LN10

+ +

La funció següent retorna el logaritme natural de 10:

+ +
function getNatLog10() {
+  return Math.LN10;
+}
+
+getNatLog10(); // 2.302585092994046
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.1.2', 'Math.LN10')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.ln10', 'Math.LN10')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterístiquesChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterístiquesAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Math.exp()")}}
    • +
  • {{jsxref("Math.log()")}}
    • +
  • {{jsxref("Math.log10()")}} {{experimental_inline}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/math/ln2/index.html b/files/ca/web/javascript/reference/global_objects/math/ln2/index.html new file mode 100644 index 0000000000..92cf2693f2 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/math/ln2/index.html @@ -0,0 +1,118 @@ +--- +title: Math.LN2 +slug: Web/JavaScript/Referencia/Objectes_globals/Math/LN2 +translation_of: Web/JavaScript/Reference/Global_Objects/Math/LN2 +--- +
{{JSRef("Global_Objects", "Math")}}
+ +

Resum

+ +

La propietat Math.LN2 representa el logaritme natural de 2, aproximadament 0.693:

+ +

Math.LN2=ln(2)≈0.693\mathtt{\mi{Math.LN2}} = \ln(2) \approx 0.693

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

Descripció

+ +

Degut a que LN2 és una propietat estàtica de Math, sempre s'accedeix a aquesta mitjançant el codi Math.LN2 en comptes d'accedir a la propietat d'un objecte de Math ja creat (Math no és un constructor).

+ +

Exemples

+ +

Exemple: Utilitzar Math.LN2

+ +

La següent funció retorna el logaritme natural de 2:

+ +
function getNatLog2() {
+  return Math.LN2;
+}
+
+getNatLog2(); // 0.6931471805599453
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.1.3', 'Math.LN2')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.ln2', 'Math.LN2')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Math.exp()")}}
    • +
  • {{jsxref("Math.log()")}}
    • +
  • {{jsxref("Math.log2()")}} {{experimental_inline}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/math/log/index.html b/files/ca/web/javascript/reference/global_objects/math/log/index.html new file mode 100644 index 0000000000..a3d8467ae5 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/math/log/index.html @@ -0,0 +1,137 @@ +--- +title: Math.log() +slug: Web/JavaScript/Referencia/Objectes_globals/Math/log +translation_of: Web/JavaScript/Reference/Global_Objects/Math/log +--- +
{{JSRef}}
+ +

La funció Math.log() retorna el logaritme natural (base {{jsxref("Math.E", "e")}}) d'un nombre, és a dir

+ +

∀x>0,Math.log(x)=ln(x)=la únicaytal queey=x\forall x > 0, \mathtt{\operatorname{Math.log}(x)} = \ln(x) = \text{the unique} \; y \; \text{such that} \; e^y = x

+ +

Sintaxi

+ +
Math.log(x)
+ +

Paràmetres

+ +
+
x
+
Un nombre.
+
+ +

Descripció

+ +

Si el valor de x és negatiu, el valor retornat sempre serà {{jsxref("NaN")}}.

+ +

Degut a que log() és un mètode estàtic de Math, sempre s'utilitza com a Math.log(), en comptes de com a mètode d'una instància de Math (Math no és un constructor).

+ +

Exemples

+ +

Utilitzar Math.log()

+ +
Math.log(-1); // NaN, fora de rang
+Math.log(0);  // -Infinit
+Math.log(1);  // 0
+Math.log(10); // 2.302585092994046
+
+ +

Utilitzar Math.log() amb una base diferent

+ +

La funció següent retorna el logaritme de y amb base x (és a dir, logxy\log_x y):

+ +
function getBaseLog(x, y) {
+  return Math.log(y) / Math.log(x);
+}
+
+ +

Si es crida getBaseLog(10, 1000) retornarà 2.9999999999999996 degut a l'arrodoniment de punt flotant, el qual és molt proper a la resposta real: 3.

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacionsEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.2.10', 'Math.log')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.log', 'Math.log')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Math.exp()")}}
    • +
  • {{jsxref("Math.log1p()")}} {{experimental_inline}}
    • +
  • {{jsxref("Math.log10()")}} {{experimental_inline}}
    • +
  • {{jsxref("Math.log2()")}} {{experimental_inline}}
    • +
  • {{jsxref("Math.pow()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/math/log10/index.html b/files/ca/web/javascript/reference/global_objects/math/log10/index.html new file mode 100644 index 0000000000..1a82f34848 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/math/log10/index.html @@ -0,0 +1,126 @@ +--- +title: Math.log10() +slug: Web/JavaScript/Referencia/Objectes_globals/Math/log10 +translation_of: Web/JavaScript/Reference/Global_Objects/Math/log10 +--- +
{{JSRef}}
+ +

La funció Math.log10() retorna el logaritme en base 10 d'un nombre, és a dir

+ +

∀x>0,Math.log10(x)=log10(x)=la únicaytal que10y=x\forall x > 0, \mathtt{\operatorname{Math.log10}(x)} = \log_10(x) = \text{the unique} \; y \; \text{such that} \; 10^y = x

+ +

Sintaxi

+ +
Math.log10(x)
+ +

Paràmetres

+ +
+
x
+
Un nombre.
+
+ +

Descripció

+ +

Si el valor de x és menor que 0, el valor retornat sempre és {{jsxref("NaN")}}.

+ +

Com que log10() és un mètode estàtic de Math, sempre s'utilitza com Math.log10() en comptes de com un mètode d'un objecte Math creat (Math no és un constructor).

+ +

Exemples

+ +

Utilitzar Math.log10()

+ +
Math.log10(2);      // 0.3010299956639812
+Math.log10(1);      // 0
+Math.log10(0);      // -Infinit
+Math.log10(-2);     // NaN
+Math.log10(100000); // 5
+
+ +

Polyfill

+ +

Aquesta funció pot ser emulada mitjançant el següent codi:

+ +
Math.log10 = Math.log10 || function(x) {
+  return Math.log(x) / Math.LN10;
+};
+
+ +

Especificacions

+ + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-math.log10', 'Math.log10')}}{{Spec2('ES6')}}Definició inicial.
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome("38")}}{{CompatGeckoDesktop("25")}}{{CompatNo}}{{CompatOpera("25")}}{{CompatSafari("7.1")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("25")}}{{CompatNo}}{{CompatNo}}8
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Math.exp()")}}
    • +
  • {{jsxref("Math.log()")}}
    • +
  • {{jsxref("Math.log1p()")}} {{experimental_inline}}
    • +
  • {{jsxref("Math.log2()")}} {{experimental_inline}}
    • +
  • {{jsxref("Math.pow()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/math/log10e/index.html b/files/ca/web/javascript/reference/global_objects/math/log10e/index.html new file mode 100644 index 0000000000..299c8d12ed --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/math/log10e/index.html @@ -0,0 +1,118 @@ +--- +title: Math.LOG10E +slug: Web/JavaScript/Referencia/Objectes_globals/Math/LOG10E +translation_of: Web/JavaScript/Reference/Global_Objects/Math/LOG10E +--- +
{{JSRef("Global_Objects", "Math")}}
+ +

Resum

+ +

La propietat Math.LOG10E representa el logaritme en base 10 de e, el valor del qual és aproximadament 0.434:

+ +

Math.LOG10E=log10(e)≈0.434\mathtt{\mi{Math.LOG10E}} = \log_10(e) \approx 0.434

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

Descripció

+ +

Degut a que LOG10E és una propietat estàtica de l'objecte Math, sempre s'obté el seu valor mitjançant Math.LOG10E en comptes d'accedir a la propietat d'un objecte instanciat de Math (Math no és un constructor).

+ +

Exemples

+ +

Exemple: Utilitzar Math.LOG10E

+ +

La funció següent retorna el logaritme en base 10 de e:

+ +
function getLog10e() {
+  return Math.LOG10E;
+}
+
+getLog10e(); // 0.4342944819032518
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.1.5', 'Math.LOG10E')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.log10e', 'Math.LOG10E')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Math.exp()")}}
    • +
  • {{jsxref("Math.log()")}}
    • +
  • {{jsxref("Math.log10()")}} {{experimental_inline}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/math/log1p/index.html b/files/ca/web/javascript/reference/global_objects/math/log1p/index.html new file mode 100644 index 0000000000..1a0eb32cd5 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/math/log1p/index.html @@ -0,0 +1,125 @@ +--- +title: Math.log1p() +slug: Web/JavaScript/Referencia/Objectes_globals/Math/log1p +translation_of: Web/JavaScript/Reference/Global_Objects/Math/log1p +--- +
{{JSRef}}
+ +

La funció Math.log1p() retorna el logaritme natural (base {{jsxref("Math.E", "e")}}) de 1 + un nombre, és a dir

+ +

∀x>-1,Math.log1p(x)=ln(1+x)\forall x > -1, \mathtt{\operatorname{Math.log1p}(x)} = \ln(1 + x)

+ +

Sintaxi

+ +
Math.log1p(x)
+ +

Paràmetres

+ +
+
x
+
Un nombre.
+
+ +

Descripció

+ +

Si el valor de x és menor que -1, el valor retornat sempre serà {{jsxref("NaN")}}.

+ +

Com que log1p() és un mètode estàtic de Math, sempre s'utilitza com Math.log1p() en comptes de com un mètode d'un objecte Math creat (Math no és un constructor).

+ +

Exemples

+ +

Utilitzar Math.log1p()

+ +
Math.log1p(1);  // 0.6931471805599453
+Math.log1p(0);  // 0
+Math.log1p(-1); // -Infinit
+Math.log1p(-2); // NaN
+
+ +

Polyfill

+ +

Aquesta funció pot ser emulada mitjançant la funció següent:

+ +
Math.log1p = Math.log1p || function(x) {
+  return Math.log(1 + x);
+};
+
+ +

Especificacions

+ + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-math.log1p', 'Math.log1p')}}{{Spec2('ES6')}}Definició inicial.
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome("38")}}{{CompatGeckoDesktop("25")}}{{CompatNo}}{{CompatOpera("25")}}{{CompatSafari("7.1")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("25")}}{{CompatNo}}{{CompatNo}}8
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Math.exp()")}}
    • +
  • {{jsxref("Math.log()")}}
    • +
  • {{jsxref("Math.log10()")}} {{experimental_inline}}
    • +
  • {{jsxref("Math.log2()")}} {{experimental_inline}}
    • +
  • {{jsxref("Math.pow()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/math/log2/index.html b/files/ca/web/javascript/reference/global_objects/math/log2/index.html new file mode 100644 index 0000000000..0806bd75ff --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/math/log2/index.html @@ -0,0 +1,127 @@ +--- +title: Math.log2() +slug: Web/JavaScript/Referencia/Objectes_globals/Math/log2 +translation_of: Web/JavaScript/Reference/Global_Objects/Math/log2 +--- +
{{JSRef}}
+ +

La funció Math.log2() retorna el logaritme en base 2 d'un nombre, és a dir

+ +

∀x>0,Math.log2(x)=log2(x)=la únicaytal que2y=x\forall x > 0, \mathtt{\operatorname{Math.log2}(x)} = \log_2(x) = \text{the unique} \; y \; \text{such that} \; 2^y = x

+ +

Sintaxi

+ +
Math.log2(x)
+ +

Paràmetres

+ +
+
x
+
Un nombre.
+
+ +

Descripció

+ +

Si el valor de x és menor que 0, el valor retornat sempre serà {{jsxref("NaN")}}.

+ +

Com que log2() és un mètode estàtic de Math, sempre s'utilitza com Math.log2() en comptes de com un mètode d'un objecte Math creat (Math no és un constructor).

+ +

Exemples

+ +

Utilitzar Math.log2()

+ +
Math.log2(3);    // 1.584962500721156
+Math.log2(2);    // 1
+Math.log2(1);    // 0
+Math.log2(0);    // -Infinit
+Math.log2(-2);   // NaN
+Math.log2(1024); // 10
+
+ +

Polyfill

+ +

Aquest Polyfill emula la funció Math.log2. Cal destacar que retorna valors imprecisos per a algunes entrades (com ara 1 << 29), embolcalleu-la amb {{jsxref("Math.round()")}} si esteu treballant amb màscares de bits.

+ +
Math.log2 = Math.log2 || function(x) {
+  return Math.log(x) / Math.LN2;
+};
+
+ +

Especificacions

+ + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-math.log2', 'Math.log2')}}{{Spec2('ES6')}}Definició inicial.
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome("38")}}{{CompatGeckoDesktop("25")}}{{CompatNo}}{{CompatOpera("25")}}{{CompatSafari("7.1")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("25")}}{{CompatNo}}{{CompatNo}}8
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Math.exp()")}}
    • +
  • {{jsxref("Math.log()")}}
    • +
  • {{jsxref("Math.log10()")}} {{experimental_inline}}
    • +
  • {{jsxref("Math.log1p()")}} {{experimental_inline}}
    • +
  • {{jsxref("Math.pow()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/math/log2e/index.html b/files/ca/web/javascript/reference/global_objects/math/log2e/index.html new file mode 100644 index 0000000000..2f37ae44c1 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/math/log2e/index.html @@ -0,0 +1,118 @@ +--- +title: Math.LOG2E +slug: Web/JavaScript/Referencia/Objectes_globals/Math/LOG2E +translation_of: Web/JavaScript/Reference/Global_Objects/Math/LOG2E +--- +
{{JSRef("Global_Objects", "Math")}}
+ +

Resum

+ +

La propietat Math.LOG2E representa el logaritme de e en base 2, el valor del qual és aproximadament 1.442:

+ +

Math.LOG2E=log2(e)≈1.442\mathtt{\mi{Math.LOG2E}} = \log_2(e) \approx 1.442

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

Descripció

+ +

Com que LOG2E és una propietat estàtica de Math, sempre s'utilitza mitjançant la forma Math.LOG2E, en comptes d'accedir a la propietat d'un objecte Math creat (Math no és un constructor).

+ +

Exemples

+ +

Exemple: Utilitzar Math.LOG2E

+ +

La següent funció retorna el logaritme de e en base 2:

+ +
function getLog2e() {
+  return Math.LOG2E;
+}
+
+getLog2e(); // 1.4426950408889634
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.1.4', 'Math.LOG2E')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.log2e', 'Math.LOG2E')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Math.exp()")}}
    • +
  • {{jsxref("Math.log()")}}
    • +
  • {{jsxref("Math.log2()")}} {{experimental_inline}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/math/max/index.html b/files/ca/web/javascript/reference/global_objects/math/max/index.html new file mode 100644 index 0000000000..791b5dfdfe --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/math/max/index.html @@ -0,0 +1,134 @@ +--- +title: Math.max() +slug: Web/JavaScript/Referencia/Objectes_globals/Math/max +translation_of: Web/JavaScript/Reference/Global_Objects/Math/max +--- +
{{JSRef}}
+ +

La funció Math.max() retorna el nombre més gran de zero o més nombres.

+ +

Sintaxi

+ +
Math.max([valor1[, valor2[, ...]]])
+ +

Paràmetres

+ +
+
valor1, valor2, ...
+
Nombres.
+
+ +

Descripció

+ +

Com que max() és un mètode estàtic de Math, sempre s'utilitza com Math.max() en comptes de com un mètode d'un objecte Math creat (Math no és un constructor).

+ +

Si no es proporciona cap argument, el resultat és -{{jsxref("Infinity")}}.

+ +

Si al menys un dels arguments no pot convertir-se a un nombre, el resultat és {{jsxref("NaN")}}.

+ +

Exemples

+ +

Utilitzar Math.max()

+ +
Math.max(10, 20);   //  20
+Math.max(-10, -20); // -10
+Math.max(-10, 20);  //  20
+
+ +

La següent funció utilitza {{jsxref("Function.prototype.apply()")}} per a trobar l'element màxim d'un array numèric. getMaxOfArray([1, 2, 3]) és equivalent a Math.max(1, 2, 3), però getMaxOfArray() pot emprar-se en arrays de qualsevol mida construits programàticament.

+ +
function getMaxOfArray(numArray) {
+  return Math.max.apply(null, numArray);
+}
+
+ +

O bé amb el nou {{jsxref("Operators/Spread_operator", "operador spread")}}, obtenir el nombre màxim d'un array és molt més simple.

+ +
var arr = [1, 2, 3];
+var max = Math.max(...arr);
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.2.11', 'Math.max')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.max', 'Math.max')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Math.min()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/math/min/index.html b/files/ca/web/javascript/reference/global_objects/math/min/index.html new file mode 100644 index 0000000000..909e6ff2ee --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/math/min/index.html @@ -0,0 +1,140 @@ +--- +title: Math.min() +slug: Web/JavaScript/Referencia/Objectes_globals/Math/min +translation_of: Web/JavaScript/Reference/Global_Objects/Math/min +--- +
{{JSRef}}
+ +

La funció Math.min() retorna el més petit de zero o més nombres.

+ +

Sintaxi

+ +
Math.min([valor1[, valor2[, ...]]])
+ +

Paràmetres

+ +
+
valor1, valor2, ...
+
Nombres.
+
+ +

Descripció

+ +

Degut a que min() és un mètode estàtic de Math, sempre s'utilitza com a Math.min(), en comptes de com a mètode d'una instància de Math (Math no és un constructor).

+ +

Si no es proporciona cap argument, el resultat és {{jsxref("Infinity")}}.

+ +

Si al menys un dels arguments no pot ser convertit a nombre, el resultat és {{jsxref("NaN")}}.

+ +

Exemples

+ +

Utilitzar Math.min()

+ +

Aquest codi troba el valor mínim de x i y i l'assigna a z:

+ +
var x = 10, y = -20;
+var z = Math.min(x, y);
+
+ +

Limitar un nombre amb Math.min()

+ +

Sovint s'utilitza Math.min() per a limitar un valor de manera que sempre sigui igual o menor que un límit. Per exemple, aquest codi

+ +
var x = f(foo);
+
+if (x > limit) {
+  x = limit;
+}
+
+ +

es podria escriure de la següent manera:

+ +
var x = Math.min(f(foo), limit);
+
+ +

{{jsxref("Math.max()")}} es pot emprar d'una manera similar per a limitar un valor a l'altre límit.

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.2.12', 'Math.min')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.min', 'Math.min')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Math.max()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/math/pi/index.html b/files/ca/web/javascript/reference/global_objects/math/pi/index.html new file mode 100644 index 0000000000..b867c953df --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/math/pi/index.html @@ -0,0 +1,116 @@ +--- +title: Math.PI +slug: Web/JavaScript/Referencia/Objectes_globals/Math/PI +translation_of: Web/JavaScript/Reference/Global_Objects/Math/PI +--- +
{{JSRef("Global_Objects", "Math")}}
+ +

Resum

+ +

La propietat Math.PI representa el ratio entre la circumferència d'un crecle i el seu diàmetre, el seu valor aproximat és de 3.14159:

+ +

Math.PI=π≈3.14159\mathtt{\mi{Math.PI}} = \pi \approx 3.14159

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

Descripció

+ +

Com que PI és una propietat estàtica de Math, sempre s'utilitza amb la forma Math.PI, ren comptes de com una propietat d'un objecte Math ja creat (Math on és un constructor).

+ +

Exemples

+ +

Exemple: Utilitzar Math.PI

+ +

La funció següent utilitza Math.PI per a calcular la circumferència d'un cercle a partir del radi que rep.

+ +
function calculateCircumference(radius) {
+  return 2 * Math.PI * radius;
+}
+
+calculateCircumference(1);  // 6.283185307179586
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.1.6', 'Math.PI')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.pi', 'Math.PI')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Global_Objects/Math", "Math")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/math/pow/index.html b/files/ca/web/javascript/reference/global_objects/math/pow/index.html new file mode 100644 index 0000000000..efe89000e9 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/math/pow/index.html @@ -0,0 +1,140 @@ +--- +title: Math.pow() +slug: Web/JavaScript/Referencia/Objectes_globals/Math/pow +translation_of: Web/JavaScript/Reference/Global_Objects/Math/pow +--- +
{{JSRef}}
+ +

La funció Math.pow() retorna la base elevada a exponent, és a dir, baseexponent.

+ +

Sintaxi

+ +
Math.pow(base, exponent)
+ +

Paràmetres

+ +
+
base
+
El nombre base.
+
exponent
+
L'exponent que s'usarà per a elevar la base.
+
+ +

Descripció

+ +

Com que pow() és un mètode estàtic de Math, sempre s'utilitza com Math.pow() en comptes de com un mètode d'un objecte Math creat (Math no és un constructor).

+ +

Exemples

+ +

Utilitzar Math.pow()

+ +
// simple
+Math.pow(7, 2);    // 49
+Math.pow(7, 3);    // 343
+Math.pow(2, 10);   // 1024
+// exponents fractionals
+Math.pow(4, 0.5);  // 2 (rel quadrada de 4)
+Math.pow(8, 1/3);  // 2 (rel cúbica de 8)
+Math.pow(2, 0.5);  // 1.412135623730951 (rel quadrada de 2)
+Math.pow(2, 1/3);  // 1.2599210498948732 (rel cúbica de 2)
+// exponents amb signe
+Math.pow(7, -2);   // 0.02040816326530612 (1/49)
+Math.pow(8, -1/3); // 0.5
+// bases amb signe
+Math.pow(-7, 2);   // 49 (qualsevol nombre elevat al quadrat és positiu)
+Math.pow(-7, 3);   // -343 (nombres elevats al cub poden ser negatius)
+Math.pow(-7, 0.5); // NaN (els nombres negatius no tenen una rel quadrada real)
+// degut a rels "parells" i "senars" estan aprox l'una de l'altra
+// i a límits en la precisió dels nombres de punt flotant,
+// bases negatives amb exponents fraccionals sempre retornen NaN
+Math.pow(-7, 1/3); // NaN
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.2.13', 'Math.pow')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.pow', 'Math.pow')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Math.cbrt()")}} {{experimental_inline}}
    • +
  • {{jsxref("Math.exp()")}}
    • +
  • {{jsxref("Math.log()")}}
    • +
  • {{jsxref("Math.sqrt()")}}
    • +
  • Operador Exponencial {{experimental_inline}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/math/random/index.html b/files/ca/web/javascript/reference/global_objects/math/random/index.html new file mode 100644 index 0000000000..d70169efd4 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/math/random/index.html @@ -0,0 +1,126 @@ +--- +title: Math.random() +slug: Web/JavaScript/Referencia/Objectes_globals/Math/random +translation_of: Web/JavaScript/Reference/Global_Objects/Math/random +--- +
{{JSRef}}
+ +

La funció Math.random() retorna un nombre decimal de punt flotant pseudo-aleatori que roman dins el rang [0, 1), és a dir, des de 0 (inclòs) fins a 1 (exclòs), que després pot ser escalat al rang dessitjat. La implementació selecciona la llavor inicial per a l'algoritme generador de nombres aleatoris; aquesta llavor no pot ser resetejada o escollida per l'usuari.

+ +
+

Nota: Math.random() no proporciona nombres aleatoris criptogràficament segurs. No l'utilitzeu per a cap tasca relacionada amb la seguretat. Per a aquest ús utilitzeu la API Web Crypto, i més concretament el mètode {{domxref("RandomSource.getRandomValues()", "window.crypto.getRandomValues()")}}.

+
+ +

Sintaxi

+ +
Math.random()
+ +

Exemples

+ +

Utilitzar Math.random()

+ +

Cal destacar que com que els nombres a JavaScript són nombres de punt flotant IEEE 754 amb comportament d'arrodoniment al parell més proper, els rangs proclamats per les funcions de sota (a excepció de Math.random()) no són exactes. Si s'escullen límits extremadament grans (253 o majors), és possible en casos extremadament rars, obtindre el límit superior que normalment és exclòs.

+ +
// Retorna un nombre aleatori entre 0 (inclòs) i 1 (exclòs)
+function getRandom() {
+  return Math.random();
+}
+
+ +
// Retorna un nombre aleatori entre min (inclòs) i max (exclòs)
+function getRandomArbitrary(min, max) {
+  return Math.random() * (max - min) + min;
+}
+
+ +
// Retorna un nombre sencer aleatori entre min (inclòs) i max (exclòs)
+// Utilitzar Math.round() proporciona una distribució no uniforme!
+function getRandomInt(min, max) {
+  return Math.floor(Math.random() * (max - min)) + min;
+}
+
+ +
// Returns a random integer between min (included) and max (included)
+// Using Math.round() will give you a non-uniform distribution!
+function getRandomIntInclusive(min, max) {
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. JavaScript 1.0 (Només UNIX) / JavaScript 1.1 (Totes les plataformes).
{{SpecName('ES5.1', '#sec-15.8.2.14', 'Math.random')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.random', 'Math.random')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
diff --git a/files/ca/web/javascript/reference/global_objects/math/round/index.html b/files/ca/web/javascript/reference/global_objects/math/round/index.html new file mode 100644 index 0000000000..2510799381 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/math/round/index.html @@ -0,0 +1,207 @@ +--- +title: Math.round() +slug: Web/JavaScript/Referencia/Objectes_globals/Math/round +translation_of: Web/JavaScript/Reference/Global_Objects/Math/round +--- +
{{JSRef}}
+ +

La funció Math.round() retorna el valor d'un nombre arrodonit al nombre sencer més proper.

+ +

Sintaxi

+ +
Math.round(x)
+ +

Paràmetres

+ +
+
x
+
Un nombre.
+
+ +

Descripció

+ +

Si la porció fraccional del nombre és 0.5 o major, l'argument s'arrodoneix al següent nombre sencer més gran. Si la porció fraccional del nombre és menor de 0.5 l'argument és arrodonit al següent nombre sencer més petit.

+ +

Com que round() és un mètode estàtic de Math, sempre s'utilitza com Math.round() en comptes de com un mètode d'un objecte Math creat (Math no és un constructor).

+ +

Exemples

+ +

Utilitzar Math.round()

+ +
// Retorna el valor 20
+x = Math.round(20.49);
+
+// Retorna el valor 21
+x = Math.round(20.5);
+
+// Retorna el valor -20
+x = Math.round(-20.5);
+
+// Retorna el valor -21
+x = Math.round(-20.51);
+
+// Retorna el valor 1 (!)
+// Fixeu-vos en l'error d'arrodoniment degut a la poc precisa aritmètica de punt flotant
+// Compareu això amb Math.round10(1.005, -2) de l'exemple de sota
+x = Math.round(1.005*100)/100;
+
+ +

Arrodoniment decimal

+ +
// Closure
+(function() {
+  /**
+   * Ajustament decimal d'un nombre
+   *
+   * @param {String}  type  El tipus d'ajustament.
+   * @param {Number}  value El nombre.
+   * @param {Integer} exp   L'exponent (el logaritme en base 10 de la base a ajustar).
+   * @returns {Number} El valor ajustat.
+   */
+  function decimalAdjust(type, value, exp) {
+    // Si l'exponent és undefined o zero...
+    if (typeof exp === 'undefined' || +exp === 0) {
+      return Math[type](value);
+    }
+    value = +value;
+    exp = +exp;
+    // Si el valor no és un nombre o l'exponent no és un nombre sencer...
+    if (isNaN(value) || !(typeof exp === 'number' && exp % 1 === 0)) {
+      return NaN;
+    }
+    // Desplaçament
+    value = value.toString().split('e');
+    value = Math[type](+(value[0] + 'e' + (value[1] ? (+value[1] - exp) : -exp)));
+    // Desfer el desplaçament
+    value = value.toString().split('e');
+    return +(value[0] + 'e' + (value[1] ? (+value[1] + exp) : exp));
+  }
+
+  // Arrodoniment decimal
+  if (!Math.round10) {
+    Math.round10 = function(value, exp) {
+      return decimalAdjust('round', value, exp);
+    };
+  }
+  // Floor decimal
+  if (!Math.floor10) {
+    Math.floor10 = function(value, exp) {
+      return decimalAdjust('floor', value, exp);
+    };
+  }
+  // Ceiling decimal
+  if (!Math.ceil10) {
+    Math.ceil10 = function(value, exp) {
+      return decimalAdjust('ceil', value, exp);
+    };
+  }
+})();
+
+// Arrodoniment
+Math.round10(55.55, -1);   // 55.6
+Math.round10(55.549, -1);  // 55.5
+Math.round10(55, 1);       // 60
+Math.round10(54.9, 1);     // 50
+Math.round10(-55.55, -1);  // -55.5
+Math.round10(-55.551, -1); // -55.6
+Math.round10(-55, 1);      // -50
+Math.round10(-55.1, 1);    // -60
+Math.round10(1.005, -2);   // 1.01 -- compareu aquest resultat amb Math.round(1.005*100)/100 de l'exemple de sobre
+// Floor
+Math.floor10(55.59, -1);   // 55.5
+Math.floor10(59, 1);       // 50
+Math.floor10(-55.51, -1);  // -55.6
+Math.floor10(-51, 1);      // -60
+// Ceil
+Math.ceil10(55.51, -1);    // 55.6
+Math.ceil10(51, 1);        // 60
+Math.ceil10(-55.59, -1);   // -55.5
+Math.ceil10(-59, 1);       // -50
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.2.15', 'Math.round')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.round', 'Math.round')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Math.abs()")}}
    • +
  • {{jsxref("Math.ceil()")}}
    • +
  • {{jsxref("Math.floor()")}}
    • +
  • {{jsxref("Math.sign()")}} {{experimental_inline}}
    • +
  • {{jsxref("Math.trunc()")}} {{experimental_inline}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/math/sign/index.html b/files/ca/web/javascript/reference/global_objects/math/sign/index.html new file mode 100644 index 0000000000..520ff27dc4 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/math/sign/index.html @@ -0,0 +1,131 @@ +--- +title: Math.sign() +slug: Web/JavaScript/Referencia/Objectes_globals/Math/sign +translation_of: Web/JavaScript/Reference/Global_Objects/Math/sign +--- +
{{JSRef}}
+ +

La funció Math.sign() retorna el signe d'un nombre, indicant si el nombre donat és positiu, negatiu o zero.

+ +

Sintaxi

+ +
Math.sign(x)
+ +

Paràmetres

+ +
+
x
+
Un nombre.
+
+ +

Descripció

+ +

Com que sign() és un mètode estàtic de Math, sempre s'utilitza com Math.sign() en comptes de com un mètode d'un objecte Math creat (Math no és un constructor).

+ +

Aquesta funció pot retornar 5 valors diferents, 1, -1, 0, -0, NaN, que representen "nombre positiu", "nombre negatiu", "zero positiu", "zero negatiu" i {{jsxref("NaN")}} respectivament.

+ +

L'argument passat a aquesta funció serà convertit al tipus de x implícitament.

+ +

Exemples

+ +

Utilitzar Math.sign()

+ +
Math.sign(3);     //  1
+Math.sign(-3);    // -1
+Math.sign('-3');  // -1
+Math.sign(0);     //  0
+Math.sign(-0);    // -0
+Math.sign(NaN);   // NaN
+Math.sign('foo'); // NaN
+Math.sign();      // NaN
+
+ +

Polyfill

+ +
Math.sign = Math.sign || function(x) {
+  x = +x; // converteix a un nombre
+  if (x === 0 || isNaN(x)) {
+    return x;
+  }
+  return x > 0 ? 1 : -1;
+}
+
+ +

Especificacions

+ + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-math.sign', 'Math.sign')}}{{Spec2('ES6')}}Definició inicial.
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome("38")}}{{CompatGeckoDesktop("25")}}{{CompatNo}}{{CompatOpera("25")}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("25")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Math.abs()")}}
    • +
  • {{jsxref("Math.ceil()")}}
    • +
  • {{jsxref("Math.floor()")}}
    • +
  • {{jsxref("Math.round()")}}
    • +
  • {{jsxref("Math.trunc()")}} {{experimental_inline}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/math/sin/index.html b/files/ca/web/javascript/reference/global_objects/math/sin/index.html new file mode 100644 index 0000000000..7f1faf9a98 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/math/sin/index.html @@ -0,0 +1,127 @@ +--- +title: Math.sin() +slug: Web/JavaScript/Referencia/Objectes_globals/Math/sin +translation_of: Web/JavaScript/Reference/Global_Objects/Math/sin +--- +
{{JSRef("Global_Objects", "Math")}}
+ +

Resum

+ +

La funció Math.sin() retorna el sinus d'un nombre.

+ +

Sintaxi

+ +
Math.sin(x)
+ +

Paràmetres

+ +
+
x
+
Un nombre (donat en radians).
+
+ +

Descripció

+ +

El mètode Math.sin() retorna un valor numèric entre -1 i 1, que representa el sinus de l'angle donat en radiants.

+ +

Degut a que sin() és un mètode estàtic de Math, sempre s'utilitza com a Math.sin(), en comptes de com a mètode d'una instància de Math (Math no és un constructor).

+ +

Exemples

+ +

Exemple: Utilitzar Math.sin()

+ +
Math.sin(0);           // 0
+Math.sin(1);           // 0.8414709848078965
+
+Math.sin(Math.PI / 2); // 1
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
ECMAScript 1a Edició.{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.2.16', 'Math.sin')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.sin', 'Math.sin')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Math.acos()")}}
    • +
  • {{jsxref("Math.asin()")}}
    • +
  • {{jsxref("Math.atan()")}}
    • +
  • {{jsxref("Math.atan2()")}}
    • +
  • {{jsxref("Math.cos()")}}
    • +
  • {{jsxref("Math.tan()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/math/sinh/index.html b/files/ca/web/javascript/reference/global_objects/math/sinh/index.html new file mode 100644 index 0000000000..a1cc1f446a --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/math/sinh/index.html @@ -0,0 +1,129 @@ +--- +title: Math.sinh() +slug: Web/JavaScript/Referencia/Objectes_globals/Math/sinh +translation_of: Web/JavaScript/Reference/Global_Objects/Math/sinh +--- +
{{JSRef}}
+ +

La funció Math.sinh() retorna el sinus hiperbòlic d'un nombre, que es pot expressar utilitzant la {{jsxref("Math.E", "constant e", "", 1)}}:

+ +

Math.sinh(x)=ex-e-x2\mathtt{\operatorname{Math.sinh(x)}} = \frac{e^x - e^{-x}}{2}

+ +

Sintaxi

+ +
Math.sinh(x)
+ +

Paràmetres

+ +
+
x
+
Un nombre.
+
+ +

Descripció

+ +

Com que que sinh() és un mètode estàtic de Math, sempre s'utilitza com a Math.sinh(), en comptes de com a mètode d'una instància de Math (Math no és un constructor).

+ +

Exemples

+ +

Utilitzar Math.sinh()

+ +
Math.sinh(0); // 0
+Math.sinh(1); // 1.1752011936438014
+
+ +

Polyfill

+ +

Aquest comportament es pot emular amb l'ajut de la funció {{jsxref("Math.exp()")}}:

+ +
Math.sinh = Math.sinh || function(x) {
+  return (Math.exp(x) - Math.exp(-x)) / 2;
+}
+
+ +

O bé utilitzant només una crida a la funció {{jsxref("Math.exp()")}}:

+ +
Math.sinh = Math.sinh || function(x) {
+  var y = Math.exp(x);
+  return (y - 1 / y) / 2;
+}
+
+ +

Especificacions

+ + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-math.sinh', 'Math.sinh')}}{{Spec2('ES6')}}Definició inicial.
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome("38")}}{{CompatGeckoDesktop("25")}}{{CompatNo}}{{CompatOpera("25")}}{{CompatSafari("7.1")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("25")}}{{CompatNo}}{{CompatNo}}8
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Math.acosh()")}} {{experimental_inline}}
    • +
  • {{jsxref("Math.asinh()")}} {{experimental_inline}}
    • +
  • {{jsxref("Math.atanh()")}} {{experimental_inline}}
    • +
  • {{jsxref("Math.cosh()")}} {{experimental_inline}}
    • +
  • {{jsxref("Math.tanh()")}} {{experimental_inline}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/math/sqrt/index.html b/files/ca/web/javascript/reference/global_objects/math/sqrt/index.html new file mode 100644 index 0000000000..b726db8a31 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/math/sqrt/index.html @@ -0,0 +1,127 @@ +--- +title: Math.sqrt() +slug: Web/JavaScript/Referencia/Objectes_globals/Math/sqrt +translation_of: Web/JavaScript/Reference/Global_Objects/Math/sqrt +--- +
{{JSRef}}
+ +

La funció Math.sqrt() retorna la rel quadrada d'un nombre, és a dir

+ +

∀x≥0,Math.sqrt(x)=x=la únicay≥0tal quey2=x\forall x \geq 0, \mathtt{Math.sqrt(x)} = \sqrt{x} = \text{the unique} \; y \geq 0 \; \text{such that} \; y^2 = x

+ +

Sintaxi

+ +
Math.sqrt(x)
+ +

Paràmetres

+ +
+
x
+
Un nombre.
+
+ +

Descripció

+ +

Si el valor de x és negatiu, Math.sqrt() retorna {{jsxref("NaN")}}.

+ +

Degut a que sqrt() és un mètode estàtic de Math, sempre s'utilitza com a Math.sqrt(), en comptes de com a mètode d'una instància de Math (Math no és un constructor).

+ +

Exemples

+ +

Utilitzar Math.sqrt()

+ +
Math.sqrt(9); // 3
+Math.sqrt(2); // 1.414213562373095
+
+Math.sqrt(1);  // 1
+Math.sqrt(0);  // 0
+Math.sqrt(-1); // NaN
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.2.17', 'Math.sqrt')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.sqrt', 'Math.sqrt')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Math.cbrt()")}} {{experimental_inline}}
    • +
  • {{jsxref("Math.exp()")}}
    • +
  • {{jsxref("Math.log()")}}
    • +
  • {{jsxref("Math.pow()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/math/sqrt1_2/index.html b/files/ca/web/javascript/reference/global_objects/math/sqrt1_2/index.html new file mode 100644 index 0000000000..3d7d3a1370 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/math/sqrt1_2/index.html @@ -0,0 +1,117 @@ +--- +title: Math.SQRT1_2 +slug: Web/JavaScript/Referencia/Objectes_globals/Math/SQRT1_2 +translation_of: Web/JavaScript/Reference/Global_Objects/Math/SQRT1_2 +--- +
{{JSRef("Global_Objects", "Math")}}
+ +

Resum

+ +

La propietat Math.SQRT1_2 representa la rel quadrada de 1/2, que equival aproximadament a 0.707:

+ +

Math.SQRT1_2=12=12≈0.707\mathtt{\mi{Math.SQRT1_2}} = \sqrt{\frac{1}{2}} = \frac{1}{\sqrt{2}} \approx 0.707

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

Descripció

+ +

Degut a que SQRT1_2  éss una propietat estàtica de Math, sempre s'utilitza com a Math.SQRT1_2 en comptes de com a la propietat d'una instància de Math (Math no és un constructor).

+ +

Exemples

+ +

Exemple: Utilitzar Math.SQRT1_2

+ +

La següent funció retorna 1 dividit per la rel quadrada de 2:

+ +
function getRoot1_2() {
+  return Math.SQRT1_2;
+}
+
+getRoot1_2(); // 0.7071067811865476
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat aJavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.1.7', 'Math.SQRT1_2')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.sqrt1_2', 'Math.SQRT1_2')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Math.pow()")}}
    • +
  • {{jsxref("Math.sqrt()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/math/sqrt2/index.html b/files/ca/web/javascript/reference/global_objects/math/sqrt2/index.html new file mode 100644 index 0000000000..3d049f228c --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/math/sqrt2/index.html @@ -0,0 +1,117 @@ +--- +title: Math.SQRT2 +slug: Web/JavaScript/Referencia/Objectes_globals/Math/SQRT2 +translation_of: Web/JavaScript/Reference/Global_Objects/Math/SQRT2 +--- +
{{JSRef("Global_Objects", "Math")}}
+ +

Resum

+ +

La propietat Math.SQRT2 representa la rel quadrada de 2, que és aproximadament 1.414:

+ +

Math.SQRT2=2≈1.414\mathtt{\mi{Math.SQRT2}} = \sqrt{2} \approx 1.414

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

Descripció

+ +

Degut a que SQRT2 és una propietat estàtica de Math, sempre s'utilitza com a Math.SQRT2, en comptes de com la propietat d'una instància de Math (Math no és un constructor).

+ +

Exemples

+ +

Exemple: Utilitzar Math.SQRT2

+ +

La funció següent retorna la rel quadrada de 2:

+ +
function getRoot2() {
+  return Math.SQRT2;
+}
+
+getRoot2(); // 1.4142135623730951
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.1.8', 'Math.SQRT2')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.sqrt2', 'Math.SQRT2')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Math.pow()")}}
    • +
  • {{jsxref("Math.sqrt()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/math/tan/index.html b/files/ca/web/javascript/reference/global_objects/math/tan/index.html new file mode 100644 index 0000000000..590e1f5fc8 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/math/tan/index.html @@ -0,0 +1,140 @@ +--- +title: Math.tan() +slug: Web/JavaScript/Referencia/Objectes_globals/Math/tan +translation_of: Web/JavaScript/Reference/Global_Objects/Math/tan +--- +
{{JSRef("Global_Objects", "Math")}}
+ +

Resum

+ +

La funció Math.tan() retorna la tangent d'un nombre.

+ +

Sintaxi

+ +
Math.tan(x)
+ +

Paràmetres

+ +
+
x
+
Un nombre que representa un angle, mesurat en radians.
+
+ +

Descripció

+ +

El mètode Math.tan() retorna un valor numèric que representa la tangent d'un angle.

+ +

Degut a que tan() és un mètode estàtic de Math, sempre s'utilitza com a Math.tan(), en comptes de com a mètode d'una instància de Math (Math no és un constructor).

+ +

Exemples

+ +

Exemple: Utilitzar Math.tan()

+ +
Math.tan(1); // 1.5574077246549023
+
+ +

Com que la funció Math.tan() accepta radians però sovint és més fàcil treballar amb graus, a funció següent accepta un valor en graus, el converteix a radians i retorna la tangent.

+ +
function getTanDeg(deg) {
+  var rad = deg * Math.PI/180;
+  return Math.tan(rad);
+}
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
ECMAScript 1a Edició.{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.2.18', 'Math.tan')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.tan', 'Math.tan')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
+ + + + + + +
Característica
+ 		AndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Math.acos()")}}
    • +
  • {{jsxref("Math.asin()")}}
    • +
  • {{jsxref("Math.atan()")}}
    • +
  • {{jsxref("Math.atan2()")}}
    • +
  • {{jsxref("Math.cos()")}}
    • +
  • {{jsxref("Math.sin()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/math/tanh/index.html b/files/ca/web/javascript/reference/global_objects/math/tanh/index.html new file mode 100644 index 0000000000..ada19d17e0 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/math/tanh/index.html @@ -0,0 +1,142 @@ +--- +title: Math.tanh() +slug: Web/JavaScript/Referencia/Objectes_globals/Math/tanh +translation_of: Web/JavaScript/Reference/Global_Objects/Math/tanh +--- +
{{JSRef}}
+ +

La funció Math.tanh() retorna la tangent hiperbòlica d'un nombre, és a dir

+ +

tanhx=sinhxcoshx=ex-e-xex+e-x=e2x-1e2x+1\tanh x = \frac{\sinh x}{\cosh x} = \frac {e^x - e^{-x}} {e^x + e^{-x}} = \frac{e^{2x} - 1}{e^{2x}+1}

+ +

Sintaxi

+ +
Math.tanh(x)
+ +

Paràmetres

+ +
+
x
+
Un nombre.
+
+ +

Descripció

+ +

Com que que tanh() és un mètode estàtic de Math, sempre s'utilitza com a Math.tanh(), en comptes de com a mètode d'una instància de Math (Math no és un constructor).

+ +

Exemples

+ +

Utilitzar Math.tanh()

+ +
Math.tanh(0);        // 0
+Math.tanh(Infinity); // 1
+Math.tanh(1);        // 0.7615941559557649
+
+ +

Polyfill

+ +

Aquest comportament pot emular-se amb l'ajuda de la funció {{jsxref("Math.exp()")}}:

+ +
Math.tanh = Math.tanh || function(x) {
+  if (x === Infinity) {
+    return 1;
+  } else if (x === -Infinity) {
+    return -1;
+  } else {
+    return (Math.exp(x) - Math.exp(-x)) / (Math.exp(x) + Math.exp(-x));
+  }
+}
+
+ +

o bé utilitzant només una crida a {{jsxref("Math.exp()")}}:

+ +
Math.tanh = Math.tanh || function(x) {
+  if (x === Infinity) {
+    return 1;
+  } else if (x === -Infinity) {
+    return -1;
+  } else {
+    var y = Math.exp(2 * x);
+    return (y - 1) / (y + 1);
+  }
+}
+
+ +

Especificacions

+ + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-math.tanh', 'Math.tanh')}}{{Spec2('ES6')}}Definició inicial.
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome("38")}}{{CompatGeckoDesktop("25")}}{{CompatNo}}{{CompatOpera("25")}}{{CompatSafari("7.1")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("25")}}{{CompatNo}}{{CompatNo}}8
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Math.acosh()")}} {{experimental_inline}}
    • +
  • {{jsxref("Math.asinh()")}} {{experimental_inline}}
    • +
  • {{jsxref("Math.atanh()")}} {{experimental_inline}}
    • +
  • {{jsxref("Math.cosh()")}} {{experimental_inline}}
    • +
  • {{jsxref("Math.sinh()")}} {{experimental_inline}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/math/trunc/index.html b/files/ca/web/javascript/reference/global_objects/math/trunc/index.html new file mode 100644 index 0000000000..4f76502d69 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/math/trunc/index.html @@ -0,0 +1,129 @@ +--- +title: Math.trunc() +slug: Web/JavaScript/Referencia/Objectes_globals/Math/trunc +translation_of: Web/JavaScript/Reference/Global_Objects/Math/trunc +--- +
{{JSRef}}
+ +

La funció Math.trunc() retorna la part integral d'un nombre, tot descartant els dígits decimals.

+ +

Sintaxi

+ +
Math.trunc(x)
+ +

Paràmetres

+ +
+
x
+
Un nombre.
+
+ +

Descripció

+ +

Al contrari que altres mètodes de Math : {{jsxref("Math.floor()")}}, {{jsxref("Math.ceil()")}} and {{jsxref("Math.round()")}}, la forma en la que Math.trunc() funciona és molt simple, simplement trunca el punt i els dígits que queden a la dreta, sense importa si l'argument és un nombre positiu o negatiu.

+ +

Així que, si l'argument és un nombre positiu, Math.trunc() és equivalent a Math.floor(), en cas contrari, Math.trunc() és equivalent a Math.ceil().

+ +

Cal destacar que l'argument passat a aquest mètode serà convertit a un nombre de forma implícita.

+ +

Com que trunc() és un mètode estàtic de Math, sempre s'utilitza com Math.trunc() en comptes de com un mètode d'un objecte Math creat (Math no és un constructor).

+ +

Exemples

+ +

Utilitzar Math.trunc()

+ +
Math.trunc(13.37);    // 13
+Math.trunc(42.84);    // 42
+Math.trunc(0.123);    //  0
+Math.trunc(-0.123);   // -0
+Math.trunc('-1.123'); // -1
+Math.trunc(NaN);      // NaN
+Math.trunc('foo');    // NaN
+Math.trunc();         // NaN
+
+ +

Polyfill

+ +
Math.trunc = Math.trunc || function(x) {
+  return x < 0 ? Math.ceil(x) : Math.floor(x);
+}
+
+ +

Especificacions

+ + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-math.trunc', 'Math.trunc')}}{{Spec2('ES6')}}Definició inicial.
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome("38")}}{{CompatGeckoDesktop("25")}}{{CompatNo}}{{CompatOpera("25")}}{{CompatSafari("7.1")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("25")}}{{CompatNo}}{{CompatNo}}8
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Math.abs()")}}
    • +
  • {{jsxref("Math.ceil()")}}
    • +
  • {{jsxref("Math.floor()")}}
    • +
  • {{jsxref("Math.round()")}}
    • +
  • {{jsxref("Math.sign()")}} {{experimental_inline}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/nan/index.html b/files/ca/web/javascript/reference/global_objects/nan/index.html new file mode 100644 index 0000000000..1d6f4a4dc8 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/nan/index.html @@ -0,0 +1,125 @@ +--- +title: NaN +slug: Web/JavaScript/Referencia/Objectes_globals/NaN +translation_of: Web/JavaScript/Reference/Global_Objects/NaN +--- +
+
+
{{jsSidebar("Objects")}}
+
+
+ +

Resum

+ +

La propietat global NaN és un valor que representa Not-A-Number.

+ +

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

+ +

Sintaxi

+ +
NaN
+ +

Descripció

+ +

NaN és una propietat de l'objecte global.

+ +

El valor inicial de NaN és Not-A-Number — el mateix que el valor de Number.NaN. En navegadors moderns NaN és una propietat no configurable que no pot ser escrita. En cas contrari es recomana no sobreescriure el seu valor.

+ +

L'ús directe de NaN és poc freqüent. Apareix tot sovint però com va valor retornat quan una funció matemàtica falla (Math.sqrt(-1)) o quan s'intenta convertir una cadena de text a nombre sense èxit (parseInt("blabla")).

+ +

Comparant NaN

+ +

L'operador d'igualtat (== i ===) no pot ésser emprat per comparar un resultat amb NaN. Es fa necessari l'ús de {{jsxref("Number.isNaN()")}} o bé {{jsxref("Global_Objects/isNaN", "isNaN()")}}.

+ +
NaN === NaN;        // false
+Number.NaN === NaN; // false
+isNaN(NaN);         // true
+isNaN(Number.NaN);  // true
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.3
{{SpecName('ES5.1', '#sec-15.1.1.1', 'NaN')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-value-properties-of-the-global-object-nan', 'NaN')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Number.NaN")}}
    • +
  • {{jsxref("Number.isNaN()")}}
    • +
  • {{jsxref("Global_Objects/isNaN", "isNaN()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/null/index.html b/files/ca/web/javascript/reference/global_objects/null/index.html new file mode 100644 index 0000000000..97506ddeb5 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/null/index.html @@ -0,0 +1,125 @@ +--- +title: 'null' +slug: Web/JavaScript/Referencia/Objectes_globals/null +translation_of: Web/JavaScript/Reference/Global_Objects/null +--- +
+
+
{{jsSidebar("Objects")}}
+
+
+ +

Resum

+ +

El valor null és un literal de JavaScript que representa un valor nul o "buit", per exemple, quan no s'ha asignat cap valor previ. És un dels {{Glossary("Primitive", "valors primitius")}} de JavaScript.

+ +

Sintaxi

+ +
null
+ +

Descripció

+ +

El valor null és un literal (i no una propietat de l'objecte global, com ho és undefined). A l'utilitzar les APIs, null s'obté sovint en comptes de l'objecte esperat quan no hi ha cap objecte relevant. Quan es vol comprovar si un valor és null o be undefined és important recordar les diferències entre els operadors d'igualtat (==) i d'identitat (===) (ja que amb el primer s'aplica una conversió de tipus).

+ +
// foo no existeix, no està definit i no s'ha inicialitzat mai
+> foo
+"ReferenceError: foo is not defined"
+
+// Es sap que foo existeix ara però no té tipus ni cap valor assignat:
+> var foo = null; foo
+"null"
+
+ +

Diferència entre null i undefined

+ +
typeof null        // objecte (degut a un bug a ECMAScript, hauria de ser null)
+typeof undefined   // undefined
+null === undefined // false
+null  == undefined // true
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial.
{{SpecName('ES5.1', '#sec-4.3.11', 'null value')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-null-value', 'null value')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Global_Objects/undefined", "undefined")}}
    • +
  • {{jsxref("Global_Objects/NaN", "NaN")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/number/epsilon/index.html b/files/ca/web/javascript/reference/global_objects/number/epsilon/index.html new file mode 100644 index 0000000000..5e3f602703 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/number/epsilon/index.html @@ -0,0 +1,102 @@ +--- +title: Number.EPSILON +slug: Web/JavaScript/Referencia/Objectes_globals/Number/EPSILON +translation_of: Web/JavaScript/Reference/Global_Objects/Number/EPSILON +--- +
{{JSRef("Global_Objects", "Number")}}
+ +

Resum

+ +

La propietat Number.EPSILON representa la diferència entre el nombre 1 i el valor més petit major que 1 que pot ser representat com un {{jsxref("Global_Objects/Number", "Number")}}.

+ +

Per tal d'accedir a la propietat no es fa necessari crear un objecte {{jsxref("Global_Objects/Number", "Number")}} ja que és una propietat estàtica i n'hi ha prou amb fer servir Number.EPSILON per a obtindre el valor.

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

Descripció

+ +

La propietat EPSILON té un valor aproximat de 2.2204460492503130808472633361816E-16, és a dir, 2-52.

+ +

Exemples

+ +

Exemple: Comprovant l'igualtat

+ +
x = 0.2;
+y = 0.3;
+equal = (Math.abs(x - y) < Number.EPSILON);
+
+ +

Especificacions

+ + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-15.7.3.7', 'Number.EPSILON')}}{{Spec2('ES6')}}Definició inicial
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatGeckoDesktop("25.0")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("25.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Vegeu també

+ +
    +
  • L'objecte {{jsxref("Global_Objects/Number", "Number")}} al qual pertany.
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/number/index.html b/files/ca/web/javascript/reference/global_objects/number/index.html new file mode 100644 index 0000000000..5f4b7a0bb2 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/number/index.html @@ -0,0 +1,214 @@ +--- +title: Number +slug: Web/JavaScript/Referencia/Objectes_globals/Number +translation_of: Web/JavaScript/Reference/Global_Objects/Number +--- +
{{JSRef("Global_Objects", "Number")}}
+ +

Resum

+ +

L'objecte de JavaScript Number és un objecte embolcall que permet treballar amb valors numèrics. Un objecte de tipus Number és creat quan es crida el constructor Number().

+ +

Constructor

+ +
new Number(valor);
+ +

Paràmetres

+ +
+
valor
+
El valor numèric de l'objecte que es pretèn crear.
+
+ +

Descripció

+ +

Els usos pricipals de l'objecte Number són:

+ +
    +
  • Si l'argument dona al constructor no es pot convertir en un nombre aquest retorna {{jsxref("Global_Objects/NaN", "NaN")}}.
    • +
  • Number pot ser emprat per a realitzar conversions de tipus sense necesitat de crear un nou objecte.
    • +
+ +

Propietats

+ +
+
{{jsxref("Number.EPSILON")}} {{experimental_inline}}
+
L'interval més petit entre dos nombres que es pot representar.
+
{{jsxref("Number.MAX_SAFE_INTEGER")}} {{experimental_inline}}
+
El nombre sencer més gran que JavaScript pot representar de forma segura (253 - 1).
+
{{jsxref("Number.MAX_VALUE")}}
+
El nombre positiu més gran que pot ésser representat.
+
{{jsxref("Number.MIN_SAFE_INTEGER")}} {{experimental_inline}}
+
El nombre més petit que JavaScript pot representar de forma segura (-(253 - 1)).
+
{{jsxref("Number.MIN_VALUE")}}
+
El nombre positiu més petit que pot ésser representat. És a dir, el nombre positiu més proper a zero sense arribar a ser zero.
+
{{jsxref("Number.NaN")}}
+
El valor especial "not a number".
+
{{jsxref("Number.NEGATIVE_INFINITY")}}
+
El valor especial que representa l'infinit negatiu. És retornat quan es produeix un overflow.
+
{{jsxref("Number.POSITIVE_INFINITY")}}
+
El valor especial que representa l'infinit positiu. És retornat quan es produeix un overflow.
+
{{jsxref("Number.prototype")}}
+
Permet l'adició de propietats a l'objecte Number.
+
+ +
{{jsOverrides("Function", "properties", "MAX_VALUE", "MIN_VALUE", "NaN", "NEGATIVE_INFINITY", "POSITIVE_INFINITY", "protoype")}}
+ +

Mètodes

+ +
+
{{jsxref("Number.isNaN()")}} {{experimental_inline}}
+
Determina si el valor proporcionat és NaN.
+
{{jsxref("Number.isFinite()")}} {{experimental_inline}}
+
Determina si el valor que representa és un valor finit.
+
{{jsxref("Number.isInteger()")}} {{experimental_inline}}
+
Determina si el valor que representa és un nombre i si es tracta d'un nombre sencer.
+
{{jsxref("Number.isSafeInteger()")}} {{experimental_inline}}
+
Determina si el tipus del valor proporcionat així com el valor en sí mateix és un nombre sencer segur (nombre entre -(253 - 1) i 253 - 1).
+
{{jsxref("Number.toInteger()")}} {{obsolete_inline}}
+
Utilitzat per evaluar el valor passat i convertir-lo a sencer (o bé {{jsxref("Global_Objects/Infinity", "Infinity")}}), però s'ha eliminat.
+
{{jsxref("Number.parseFloat()")}} {{experimental_inline}}
+
Fa la mateixa funció que el mètode {{jsxref("Global_Objects/parseFloat", "parseFloat")}} de l'objecte global.
+
{{jsxref("Number.parseInt()")}} {{experimental_inline}}
+
Fa la mateixa funció que el mètode {{jsxref("Global_Objects/parseInt", "parseInt")}} de l'objecte global.
+
+ +
{{jsOverrides("Function", "Methods", "isNaN")}}
+ +

Instàncies de Number

+ +

Totes les instàncies de Number hereten de {{jsxref("Number.prototype")}}. L'objecte prototype del constructor Number pot ser modificat per a afectar a totes les instàncies de Number.

+ +

Mètodes

+ +
{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/prototype', 'Methods')}}
+ +

Exemples

+ +

Exemple: Utilitzar l'objecte Number per a assignar valors numèrics a variables

+ +

L'exemple que trobareu a continuació utilitza les propietats de l'objecte Number per a assignar valors a diferents variables numèriques:

+ +
var biggestNum = Number.MAX_VALUE;
+var smallestNum = Number.MIN_VALUE;
+var infiniteNum = Number.POSITIVE_INFINITY;
+var negInfiniteNum = Number.NEGATIVE_INFINITY;
+var notANum = Number.NaN;
+
+ +

Exemple: Rang de sencers de Number

+ +

El següent exemple mostra el valor sencer mínim i màxim que pot ésser representat per un objecte de tipus Number (per a més detalls, referiu-vos a l'standard EcmaScript, capítol 8.5 El tipus Number):

+ +
var biggestInt = 9007199254740992;
+var smallestInt = -9007199254740992;
+
+ +

A l'interpretar dades que han sigut serialitzades amb JSON, els valors que queden fora d'aquest rang poden esdevenir corruptes quan l'intèrpret de JSON els forci esdevenir de tipus Number. Una forma d'evitar aquesta limitació és utilitzar una {{jsxref("Global_Objects/String", "String")}} per representar el nombre.

+ +

Exemple: Utilitzar Number per a convertir un objecte de tipus Date

+ +

L'exemple que trobareu a continuació converteix un objecte de tipus {{jsxref("Global_Objects/Date", "Date")}} a un tipus numèric tot utilitzant Number com una funció:

+ +
var d = new Date('December 17, 1995 03:24:00');
+print(Number(d));
+
+ +

Aquest exemple mostrarà "819199440000".

+ +

Exemple: Convertir cadenes de caràcters numèriques a nombres

+ +
Number("123")     // 123
+Number("")        // 0
+Number("0x11")    // 17
+Number("0b11")    // 3
+Number("0o11")    // 9
+Number("foo")     // NaN
+Number("100a")    // NaN
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.7', 'Number')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-number-objects', 'Number')}}{{Spec2('ES6')}}Afegides nous mètodes i propietats: ({{jsxref("Number.EPSILON", "EPSILON")}}, {{jsxref("Number.isFinite", "isFinite")}}, {{jsxref("Number.isInteger", "isInteger")}}, {{jsxref("Number.isNaN", "isNaN")}}, {{jsxref("Number.parseFloat", "parseFloat")}}, {{jsxref("Number.parseInt", "parseInt")}})
+ +

Compatibilitat amb navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Global_Objects/NaN", "NaN")}}
    • +
  • L'objecte global {{jsxref("Global_Objects/Math", "Math")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/number/isfinite/index.html b/files/ca/web/javascript/reference/global_objects/number/isfinite/index.html new file mode 100644 index 0000000000..21d9493bf8 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/number/isfinite/index.html @@ -0,0 +1,118 @@ +--- +title: Number.isFinite() +slug: Web/JavaScript/Referencia/Objectes_globals/Number/isFinite +translation_of: Web/JavaScript/Reference/Global_Objects/Number/isFinite +--- +
{{JSRef}}
+ +

El mètode Number.isFinite() determina si el valor que se li passa com a argument és un nombre finit o no.

+ +

Sintaxi

+ +
Number.isFinite(valor)
+ +

Paràmetres

+ +
+
valor
+
El valor que es comprovarà si és finit.
+
+ +

Descripció

+ +

En comparació amb la funció global {{jsxref("Global_Objects/isFinite", "isFinite()")}}, aquest mètode no converteix el paràmetres a un nombre forçosament. Això implica que només valors de tipus number, que també siguin finits, retornaran true.

+ +

Exemples

+ +
Number.isFinite(Infinity);  // false
+Number.isFinite(NaN);       // false
+Number.isFinite(-Infinity); // false
+
+Number.isFinite(0);         // true
+Number.isFinite(2e64);      // true
+
+Number.isFinite('0');       // false, seria true si s'utilitzés la
+                            // funció global isFinite('0')
+
+ +

Polyfill

+ +
Number.isFinite = Number.isFinite || function(value) {
+    return typeof value === "number" && isFinite(value);
+}
+
+ +

Especificacions

+ + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-number.isfinite', 'Number.isInteger')}}{{Spec2('ES6')}}Definició inicial.
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome("19")}}{{CompatGeckoDesktop("16")}}{{CompatNo}}{{CompatOpera("15")}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("16")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Vegeu també

+ +
    +
  • L'objecte {{jsxref("Global_Objects/Number", "Number")}} al que pertany.
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/number/isinteger/index.html b/files/ca/web/javascript/reference/global_objects/number/isinteger/index.html new file mode 100644 index 0000000000..ee524e91c2 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/number/isinteger/index.html @@ -0,0 +1,118 @@ +--- +title: Number.isInteger() +slug: Web/JavaScript/Referencia/Objectes_globals/Number/isInteger +translation_of: Web/JavaScript/Reference/Global_Objects/Number/isInteger +--- +
{{JSRef}}
+ +

El mètode Number.isInteger() determina si el valor que se li passa és un nombre sencer.

+ +

Sintaxi

+ +
Number.isInteger(valor)
+ +

Paràmetres

+ +
+
valor
+
El valor que serà comprovat si és sencer o no.
+
+ +

Descripció

+ +

Si el valor passat és un nombre sencer, la funció retornarà true, en cas contrari es retorna false. Si el valor és {{jsxref("Global_Objects/NaN", "NaN")}} o infinit, es retorna false.

+ +

Exemples

+ +
Number.isInteger(0.1);     // false
+Number.isInteger(1);       // true
+Number.isInteger(Math.PI); // false
+Number.isInteger(-100000); // true
+Number.isInteger(NaN);     // false
+Number.isInteger(0);       // true
+Number.isInteger("10");    // false
+
+ +

Polyfill

+ +
Number.isInteger = Number.isInteger || function(value) {
+    return typeof value === "number" &&
+           isFinite(value) &&
+           Math.floor(value) === value;
+};
+
+ +

Especificacions

+ + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-number.isinteger', 'Number.isInteger')}}{{Spec2('ES6')}}Definició inicial.
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatGeckoDesktop("16")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("16")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Vegeu també

+ +
    +
  • L'objecte {{jsxref("Global_Objects/Number", "Number")}} al que pertany.
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/number/isnan/index.html b/files/ca/web/javascript/reference/global_objects/number/isnan/index.html new file mode 100644 index 0000000000..f6ba247306 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/number/isnan/index.html @@ -0,0 +1,129 @@ +--- +title: Number.isNaN() +slug: Web/JavaScript/Referencia/Objectes_globals/Number/isNaN +translation_of: Web/JavaScript/Reference/Global_Objects/Number/isNaN +--- +
{{JSRef}}
+ +

El mètode Number.isNaN() determina si el valor passat com a argument és {{jsxref("Global_Objects/NaN", "NaN")}}. És una versió més robusta de la funció global {{jsxref("Global_Objects/isNaN", "isNaN()")}}.

+ +

Sintaxi

+ +
Number.isNaN(valor)
+ +

Paràmetres

+ +
+
valor
+
El valor que es comprovarà si és {{jsxref("Global_Objects/NaN", "NaN")}}.
+
+ +

Descripció

+ +

Degut als dos operadors d'igualtat, {{jsxref("Operators/Comparison_Operators", "==", "#Equality")}} i {{jsxref("Operators/Comparison_Operators", "===", "#Identity")}}, retornen  false quan es comprova si {{jsxref("Global_Objects/NaN", "NaN")}} és {{jsxref("Global_Objects/NaN", "NaN")}}, la funció Number.isNaN() esdevé necesària. Aquesta situació és diferent a totes les altres posibles comparacions a JavaScript.

+ +

En comparació a la funció global {{jsxref("Global_Objects/isNaN", "isNaN()")}} function, Number.isNaN() no sofreix el problema de convertir forçosament el paràmetre donat a un nombre. Això implica que ara és segur passar valors que normalment serien convertits a {{jsxref("Global_Objects/NaN", "NaN")}} però en realitat no tenen el mateix valor que {{jsxref("Global_Objects/NaN", "NaN")}}. Això també implica que només valors de tipus number, que també siguin {{jsxref("Global_Objects/NaN", "NaN")}}, retornaran true.

+ +

Exemples

+ +
Number.isNaN(NaN);        // true
+Number.isNaN(Number.NaN); // true
+Number.isNaN(0 / 0)       // true
+
+// exemples que esdevindrien true amb la funció global isNaN()
+Number.isNaN("NaN");      // false
+Number.isNaN(undefined);  // false
+Number.isNaN({});         // false
+Number.isNaN("blabla");   // false
+
+// Tots els següents retornen false
+Number.isNaN(true);
+Number.isNaN(null);
+Number.isNaN(37);
+Number.isNaN("37");
+Number.isNaN("37.37");
+Number.isNaN("");
+Number.isNaN(" ");
+
+ +

Polyfill

+ +
Number.isNaN = Number.isNaN || function(value) {
+    return typeof value === "number" && value !== value;
+}
+ +

Especificacions

+ + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-number.isnan', 'Number.isnan')}}{{Spec2('ES6')}}Definició inicial.
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome("25")}}{{CompatGeckoDesktop("15")}}{{CompatNo}}{{CompatVersionUnknown}}9
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatUnknown}}{{CompatGeckoMobile("15")}}{{CompatNo}}{{CompatNo}}iOS 9+
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Global_Objects/Number", "Number")}}
    • +
  • {{jsxref("Global_Objects/isNaN", "isNaN()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/number/issafeinteger/index.html b/files/ca/web/javascript/reference/global_objects/number/issafeinteger/index.html new file mode 100644 index 0000000000..7570e7289d --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/number/issafeinteger/index.html @@ -0,0 +1,117 @@ +--- +title: Number.isSafeInteger() +slug: Web/JavaScript/Referencia/Objectes_globals/Number/isSafeInteger +translation_of: Web/JavaScript/Reference/Global_Objects/Number/isSafeInteger +--- +
{{JSRef}}
+ +

El mètode Number.isSafeInteger() determina si el valor proporcionat és un nombre sencer segur. Un nombre sencer segur és aquell que

+ +
    +
  • pot ser representat de forma exacta per un nombre de doble precisió IEEE-754, i
    • +
  • la seva representació IEEE-754 no pot ser el resultat de arrodonir cap altre nombre sencer per a encabir-lo a la representació IEEE-754.
    • +
+ +

Per exemple, 253 - 1 és un nombre sencer segur: pot ser representat de forma exacta i cap altre nombre sencer arrodonit coincideix amb ell sota cap mode d'arrodoniment IEEE-754. Per contra, 253 no és un nombre sencer segur: pot ser representat de manera exacta en IEEE-754, però el nombre sencer 253 + 1 no pot ser representat directament en IEEE-754 sino que s'arrodoniria a 253 mitjançant un arrodoniment al sencer més proper i un arrodoniment cap al zero.

+ +

Els nombres sencers segurs consisteixen en tots els nombres sencers des de -(253 - 1) inclòs fins a 253 - 1 inclòs.

+ +

Sintaxi

+ +
Number.isSafeInteger(valor)
+ +

Paràmetres

+ +
+
valor
+
El valor a ser testat com a nombre sencer segur.
+
+ +

Exemples

+ +
Number.isSafeInteger(3);                    // true
+Number.isSafeInteger(Math.pow(2, 53));      // false
+Number.isSafeInteger(Math.pow(2, 53) - 1);  // true
+Number.isSafeInteger(NaN);                  // false
+Number.isSafeInteger(Infinity);             // false
+Number.isSafeInteger('3');                  // false
+Number.isSafeInteger(3.1);                  // false
+Number.isSafeInteger(3.0);                  // true
+
+ +

Especificacions

+ + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-number.issafeinteger', 'Number.isSafeInteger')}}{{Spec2('ES6')}}Definició inicial.
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatGeckoDesktop("32")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("32")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Vegeu també

+ +
    +
  • L'objecte {{jsxref("Global_Objects/Number", "Number")}} al que pertany.
    • +
  • {{jsxref("Number.MIN_SAFE_INTEGER")}}
    • +
  • {{jsxref("Number.MAX_SAFE_INTEGER")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/number/max_safe_integer/index.html b/files/ca/web/javascript/reference/global_objects/number/max_safe_integer/index.html new file mode 100644 index 0000000000..02483b41ac --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/number/max_safe_integer/index.html @@ -0,0 +1,100 @@ +--- +title: Number.MAX_SAFE_INTEGER +slug: Web/JavaScript/Referencia/Objectes_globals/Number/MAX_SAFE_INTEGER +translation_of: Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER +--- +
{{JSRef("Global_Objects", "Number")}}
+ +

Resum

+ +

La constant Number.MAX_SAFE_INTEGER representa el valor màxim que JavaScript pot representar de forma segura (253 - 1).

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

Descripció

+ +

La constant MAX_SAFE_INTEGER te un valor de 9007199254740991. El raonament darrera d'aquest nombre és que JavaScript utilitza un format de nombres de coma flotant de doble precisió, tal com s'especifica al IEEE 754 i en conseqüència només pot representar de forma segura els nombres entre -(253 - 1) i 253 - 1.

+ +

Degut a que MAX_SAFE_INTEGER és una propietat estàtica de {{jsxref("Global_Objects/Number", "Number")}}, sempre s'accedeix de mitjançant Number.MAX_SAFE_INTEGER en comptes de com una propietat d'un objecte {{jsxref("Global_Objects/Number", "Number")}} instanciat.

+ +

Exemples

+ +
Number.MAX_SAFE_INTEGER // 9007199254740991
+Math.pow(2, 53) - 1     // 9007199254740991
+
+ +

Especificacions

+ + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-number.max_safe_integer', 'Number.MAX_SAFE_INTEGER')}}{{Spec2('ES6')}}Definició inicial.
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome("34")}}{{CompatGeckoDesktop("31")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("32")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Number.MIN_SAFE_INTEGER")}}
    • +
  • {{jsxref("Number.isSafeInteger()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/number/max_value/index.html b/files/ca/web/javascript/reference/global_objects/number/max_value/index.html new file mode 100644 index 0000000000..453ad01c23 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/number/max_value/index.html @@ -0,0 +1,118 @@ +--- +title: Number.MAX_VALUE +slug: Web/JavaScript/Referencia/Objectes_globals/Number/MAX_VALUE +translation_of: Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE +--- +
+
{{JSRef("Global_Objects", "Number")}}
+
+ +

Resum

+ +

La propietat Number.MAX_VALUE representa el valor numèric màxim representable en JavaScript.

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

Descripció

+ +

La propietat MAX_VALUE té un valor aproximadament de 1.79E+308. Els valors més grans que MAX_VALUE són representats com a "Infinity".

+ +

Ja que MAX_VALUE és una propietat estàtica de {{jsxref("Global_Objects/Number", "Number")}}, sempre es fa servir com a Number.MAX_VALUE, en comptes d'una propietat de l'objecte {{jsxref("Global_Objects/Number", "Number")}} que s'ha creat.

+ +

Exemples

+ +

Exemple: Fer servir MAX_VALUE

+ +

El codi següent multiplica dos valors numèrics. Si el resultat és menor o igual a  MAX_VALUE, es crida la funció func1; del contrari, es crida la funció func2.

+ +
if (num1 * num2 <= Number.MAX_VALUE) {
+  func1();
+} else {
+  func2();
+}
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
1a edició de ECMAScript.EstàndardDefinició inicial. Implementat en JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.7.3.2', 'Number.MAX_VALUE')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-number.max_value', 'Number.MAX_VALUE')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Supor bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Number.MIN_VALUE")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/number/min_safe_integer/index.html b/files/ca/web/javascript/reference/global_objects/number/min_safe_integer/index.html new file mode 100644 index 0000000000..861ec666ec --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/number/min_safe_integer/index.html @@ -0,0 +1,100 @@ +--- +title: Number.MIN_SAFE_INTEGER +slug: Web/JavaScript/Referencia/Objectes_globals/Number/MIN_SAFE_INTEGER +translation_of: Web/JavaScript/Reference/Global_Objects/Number/MIN_SAFE_INTEGER +--- +
{{JSRef("Global_Objects", "Number")}}
+ +

Resum

+ +

La constant Number.MIN_SAFE_INTEGER representa el nombre sencer segur més petit a JavaScript (-(253 - 1)).

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

Descripció

+ +

La constant MIN_SAFE_INTEGER te un valor de -9007199254740991. El raonament darrera d'aquest nombre és que JavaScript utilitza un format de nombres de coma flotant de doble precisió, tal com s'especifica al IEEE 754 i en conseqüència només pot representar de forma segura els nombres entre -(253 - 1) i 253 - 1.

+ +

Degut a que MIN_SAFE_INTEGER és una propietat estàtica de {{jsxref("Global_Objects/Number", "Number")}}, sempre s'accedeix de mitjançant Number.MIN_SAFE_INTEGER en comptes de com una propietat d'un objecte {{jsxref("Global_Objects/Number", "Number")}} instanciat.

+ +

Exemples

+ +
Number.MIN_SAFE_INTEGER // -9007199254740991
+-(Math.pow(2, 53) - 1)  // -9007199254740991
+
+ +

Especificacions

+ + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-number.min_safe_integer', 'Number.MIN_SAFE_INTEGER')}}{{Spec2('ES6')}}Definició inicial.
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome("34")}}{{CompatGeckoDesktop("31")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("32")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Number.MAX_SAFE_INTEGER")}}
    • +
  • {{jsxref("Number.isSafeInteger()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/number/min_value/index.html b/files/ca/web/javascript/reference/global_objects/number/min_value/index.html new file mode 100644 index 0000000000..42af185360 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/number/min_value/index.html @@ -0,0 +1,118 @@ +--- +title: Number.MIN_VALUE +slug: Web/JavaScript/Referencia/Objectes_globals/Number/MIN_VALUE +translation_of: Web/JavaScript/Reference/Global_Objects/Number/MIN_VALUE +--- +
{{JSRef("Global_Objects", "Number")}}
+ +

Resum

+ +

La propietat Number.MIN_VALUE representa el valor numèric positiu més petit representable en JavaScript.

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

Descripció

+ +

La propietat MIN_VALUE és el nombre més proper a 0, però no és el nombre més negatiu que es pot representar en JavaScript.

+ +

MIN_VALUE té un valor aproximat de 5e-324. Els valors més petits que MIN_VALUE ("underflow values") són convertits a 0.

+ +

Ja que MIN_VALUE és una propietat estàtica de {{jsxref("Global_Objects/Number", "Number")}}, sempre s'usa com a Number.MIN_VALUE, i no com una propietat de l'objecte {{jsxref("Global_Objects/Number", "Number")}} que heu creat.

+ +

Exemples

+ +

Exemple: Fer servir MIN_VALUE

+ +

El codi següent divideix dos valors numèrics. Si el valor és més gran o igual a MIN_VALUE, la funció func1 és crida; del contrari, es crida la funció func2.

+ +
if (num1 / num2 >= Number.MIN_VALUE) {
+  func1();
+} else {
+  func2();
+}
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
1a edició de ECMAScript.EstàndardDefinició inicial. Implementat en JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.7.3.3', 'Number.MIN_VALUE')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-number.min_value', 'Number.MIN_VALUE')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterístcaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Number.MAX_VALUE")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/number/nan/index.html b/files/ca/web/javascript/reference/global_objects/number/nan/index.html new file mode 100644 index 0000000000..7c6f3f1440 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/number/nan/index.html @@ -0,0 +1,100 @@ +--- +title: Number.NaN +slug: Web/JavaScript/Referencia/Objectes_globals/Number/NaN +translation_of: Web/JavaScript/Reference/Global_Objects/Number/NaN +--- +
{{JSRef("Global_Objects", "Number")}}
+ +

Resum

+ +

La propietat Number.NaN representa Not-A-Number (quelcom que no és un nombre). Equivalent a {{jsxref("Global_Objects/NaN", "NaN")}}.

+ +

No és necesari crear un objecte de tipus {{jsxref("Global_Objects/Number", "Number")}} per a accedir a aquesta propietat estàtica (utilitzeu Number.NaN).

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

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.7.3.4', 'Number.NaN')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-number.nan', 'Number.NaN')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • L'objecte global {{jsxref("Global_Objects/NaN", "NaN")}}.
    • +
  • L'objecte {{jsxref("Global_Objects/Number", "Number")}} al qual pertany.
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/number/negative_infinity/index.html b/files/ca/web/javascript/reference/global_objects/number/negative_infinity/index.html new file mode 100644 index 0000000000..3fb4c1d150 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/number/negative_infinity/index.html @@ -0,0 +1,134 @@ +--- +title: Number.NEGATIVE_INFINITY +slug: Web/JavaScript/Referencia/Objectes_globals/Number/NEGATIVE_INFINITY +translation_of: Web/JavaScript/Reference/Global_Objects/Number/NEGATIVE_INFINITY +--- +
{{JSRef("Global_Objects", "Number")}}
+ +

Resum

+ +

La propietat Number.NEGATIVE_INFINITY representa el valor infinit negatiu.

+ +

No fa falta crear un objecte {{jsxref("Global_Objects/Number", "Number")}} per accedir a aquesta propietat estàtica (feu servir Number.NEGATIVE_INFINITY).

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

Descripció

+ +

El valor de Number.NEGATIVE_INFINITY és el mateix que el valor negatiu de la propietat de l'objecte global {{jsxref("Global_Objects/Infinity", "Infinity")}}.

+ +

Aquest valor es comporta de forma una mica diferent a l'infinit matemàtic:

+ +
    +
  • Qualsevol valor positiu, incloent {{jsxref("Number.POSITIVE_INFINITY", "POSITIVE_INFINITY")}}, multiplicat per NEGATIVE_INFINITY és NEGATIVE_INFINITY.
    • +
  • Qualsevol calor negatiu, incloent NEGATIVE_INFINITY, multiplicat per NEGATIVE_INFINITY és {{jsxref("Number.POSITIVE_INFINITY", "POSITIVE_INFINITY")}}.
    • +
  • Zero multiplicat per NEGATIVE_INFINITY és {{jsxref("Global_Objects/NaN", "NaN")}}.
    • +
  • {{jsxref("Global_Objects/NaN", "NaN")}} multiplicat per NEGATIVE_INFINITY és {{jsxref("Global_Objects/NaN", "NaN")}}.
    • +
  • NEGATIVE_INFINITY, dividit per qualsevol valor negatiu excepte NEGATIVE_INFINITY, és {{jsxref("Number.POSITIVE_INFINITY", "POSITIVE_INFINITY")}}.
    • +
  • NEGATIVE_INFINITY, dividit per qualsevol valor positiu excepte {{jsxref("Number.POSITIVE_INFINITY", "POSITIVE_INFINITY")}}, és NEGATIVE_INFINITY.
    • +
  • NEGATIVE_INFINITY, dividit tant per NEGATIVE_INFINITY  com per {{jsxref("Number.POSITIVE_INFINITY", "POSITIVE_INFINITY")}}, és {{jsxref("Global_Objects/NaN", "NaN")}}.
    • +
  • Qualsevol nombre dividit per NEGATIVE_INFINITY és zero.
    • +
+ +

Es pot fer serivir la propietat Number.NEGATIVE_INFINITY per indicar una condició d'error que retorna un nombre finit en cas d'èxit. Fixeu-vos, però, que {{jsxref("Global_Objects/isFinite", "isFinite")}} seria més apropiat en aquest cas.

+ +

Exemples

+ +

Exemple: Fer servir NEGATIVE_INFINITY

+ +

En l'exemple següent, a la variable smallNumber se li assigna un valor que és més petit que el valor mínim. Quan la delcaració {{jsxref("Statements/if...else", "if")}} s'executa, smallNumber té el valor -Infinity, així smallNumber s'estableix com a un valor més manegable abans de prosseguir.

+ +
var smallNumber = (-Number.MAX_VALUE) * 2;
+
+if (smallNumber == Number.NEGATIVE_INFINITY) {
+  smallNumber = returnFinite();
+}
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
1a edició de ECMAScript.EstàndardDefinició inicial. Implementat en JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.7.3.5', 'Number.NEGATIVE_INFINITY')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-number.negative_infinity', 'Number.NEGATIVE_INFINITY')}}{{Spec2('ES6')}}
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Number.POSITIVE_INFINITY")}}
    • +
  • {{jsxref("Number.isFinite()")}}
    • +
  • {{jsxref("Global_Objects/Infinity", "Infinity")}}
    • +
  • {{jsxref("Global_Objects/isFinite", "isFinite()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/number/parsefloat/index.html b/files/ca/web/javascript/reference/global_objects/number/parsefloat/index.html new file mode 100644 index 0000000000..cd3494b7ac --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/number/parsefloat/index.html @@ -0,0 +1,103 @@ +--- +title: Number.parseFloat() +slug: Web/JavaScript/Referencia/Objectes_globals/Number/parseFloat +translation_of: Web/JavaScript/Reference/Global_Objects/Number/parseFloat +--- +
{{JSRef}}
+ +

El mètode Number.parseFloat() interpreta el string passat com a argument i retorna un nombre de punt flotant. Aquest mètode es comporta de la mateixa manera que la funció global {{jsxref("Global_Objects/parseFloat", "parseFloat()")}} i és part del ECMAScript 6 (el seu motiu d'existència és la modularització dels globals).

+ +

Sintaxi

+ +
Number.parseFloat(string)
+ +

Paràmetres

+ +
+
string
+
Un string que representa el valor a interpretar.
+
+ +

Descripció

+ +

Vegeu {{jsxref("Global_Objects/parseFloat", "parseFloat()")}} per a més detalls i exemples.

+ +

Polyfill

+ +
Number.parseFloat = parseFloat;
+ +

Especificacions

+ + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-number.parsefloat', 'Number.parseFloat')}}{{Spec2('ES6')}}Definició inicial.
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatGeckoDesktop("25")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("25")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Vegeu també

+ +
    +
  • L'objecte {{jsxref("Number")}} al que pertany.
    • +
  • La funció global {{jsxref("Global_Objects/parseFloat", "parseFloat()")}}.
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/number/parseint/index.html b/files/ca/web/javascript/reference/global_objects/number/parseint/index.html new file mode 100644 index 0000000000..2ef9597d11 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/number/parseint/index.html @@ -0,0 +1,102 @@ +--- +title: Number.parseInt() +slug: Web/JavaScript/Referencia/Objectes_globals/Number/parseInt +translation_of: Web/JavaScript/Reference/Global_Objects/Number/parseInt +--- +
{{JSRef}}
+ +

El mètode Number.parseInt() interpreta un argument string i retorna un nombre sencer de la base especificada.

+ +

Sintaxi

+ +
Number.parseInt(string[, radix])
+ +

Paràmetres

+ +
{{page("ca/docs/Web/JavaScript/Reference/Global_Objects/parseInt", "Parameters")}}
+ +

Descripció

+ +

Aquest mètode és exactament la mateixa funció que la funció global {{jsxref("Global_Objects/parseInt", "parseInt()")}}:

+ +
Number.parseInt === parseInt; // true
+ +

i és part de l'ECMAScript 6 (el seu propòsit és la modularització de les globals). Vegeu jsxref("Global_Objects/parseInt", "parseInt()")}} per a més detalls i exemples.

+ +

Polyfill

+ +
Number.parseInt = parseInt;
+ +

Especificacions

+ + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-number.parseint', 'Number.parseInt')}}{{Spec2('ES6')}}Definició inicial.
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatGeckoDesktop("25")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatGeckoDesktop("25")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Vegeu també

+ +
    +
  • L'objecte {{jsxref("Number")}} al que pertany.
    • +
  • La funció global {{jsxref("Global_Objects/parseInt", "parseInt()")}}.
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/number/positive_infinity/index.html b/files/ca/web/javascript/reference/global_objects/number/positive_infinity/index.html new file mode 100644 index 0000000000..234a779fd1 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/number/positive_infinity/index.html @@ -0,0 +1,137 @@ +--- +title: Number.POSITIVE_INFINITY +slug: Web/JavaScript/Referencia/Objectes_globals/Number/POSITIVE_INFINITY +translation_of: Web/JavaScript/Reference/Global_Objects/Number/POSITIVE_INFINITY +--- +
{{JSRef}}
+ +

La propietat Number.POSITIVE_INFINITY representa el valor infinit negatiu.

+ +

No fa falta crear un objecte {{jsxref("Global_Objects/Number", "Number")}} per accedir a aquesta propietat estàtica (feu servir Number.POSITIVE_INFINITY).

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

Descripció

+ +

El valor de Number.POSITIVE_INFINITY és el mateix que el valor negatiu de la propietat de l'objecte global {{jsxref("Infinity")}}.

+ +

 

+ +

Aquest valor es comporta de forma una mica diferent a l'infinit matemàtic:

+ +

Qualsevol valor positiu, incloent POSITIVE_INFINITY, multiplicat per POSITIVE_INFINITY és POSITIVE_INFINITY.

+ +
    +
  • Qualsevol calor negatiu, incloent NEGATIVE_INFINITY, multiplicat per POSITIVE_INFINITY és {{jsxref("Number.NEGATIVE_INFINITY", "POSITIVE_INFINITY")}}.
    • +
  • Zero multiplicat per POSITIVE_INFINITY és {{jsxref("NaN")}}.
    • +
  • {{jsxref("Global_Objects/NaN", "NaN")}} multiplicat perPOSITIVE_INFINITY és {{jsxref("NaN")}}.
    • +
  • POSITIVE_INFINITY, dividit per quaulsevol valor negatiu execepte {{jsxref("Number.NEGATIVE_INFINITY", "NEGATIVE_INFINITY")}}, és {{jsxref("Number.NEGATIVE_INFINITY", "NEGATIVE_INFINITY")}}.
    • +
  • POSITIVE_INFINITY, dividit per un valor positiu a excepció de POSITIVE_INFINITY, és POSITIVE_INFINITY.
    • +
  • POSITIVE_INFINITY, dividit per {{jsxref("Number.NEGATIVE_INFINITY", "NEGATIVE_INFINITY")}} o bé per POSITIVE_INFINITY, és {{jsxref("NaN")}}.
    • +
  • Quasevol nombre dividit per POSITIVE_INFINITY és Zero.
    • +
+ +

Es pot fer serivir la propietat Number.POSITIVE_INFINITY per indicar una condició d'error que retorna un nombre finit en cas d'èxit. Fixeu-vos, però, que {{jsxref("isFinite")}} seria més apropiat en aquest cas.

+ +

Exemples

+ +

Utilitzar POSITIVE_INFINITY

+ +

In the following example, the variable bigNumber is assigned a value that is larger than the maximum value. When the {{jsxref("Statements/if...else", "if")}} statement executes, bigNumber has the value Infinity, so bigNumber is set to a more manageable value before continuing.

+ +

A l'exemple següent, a la variable nombrePetit se li assigna un valor que és més gran que el valor màxim. Quan la declaració {{jsxref("Statements/if...else", "if")}} s'executa, nombrePetit té el valor Infinity, així nombrePetit s'estableix com a un valor més manegable abans de prosseguir.

+ +
var nombrePetit = Number.MAX_VALUE * 2;
+
+if (nombrePetit == Number.POSITIVE_INFINITY) {
+  nombrePetit= returnFinite();
+}
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.7.3.6', 'Number.POSITIVE_INFINITY')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-number.positive_infinity', 'Number.POSITIVE_INFINITY')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Number.NEGATIVE_INFINITY")}}
    • +
  • {{jsxref("Number.isFinite()")}}
    • +
  • {{jsxref("Infinity")}}
    • +
  • {{jsxref("Global_Objects/isFinite", "isFinite()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/number/toexponential/index.html b/files/ca/web/javascript/reference/global_objects/number/toexponential/index.html new file mode 100644 index 0000000000..69ca3478ac --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/number/toexponential/index.html @@ -0,0 +1,136 @@ +--- +title: Number.prototype.toExponential() +slug: Web/JavaScript/Referencia/Objectes_globals/Number/toExponential +translation_of: Web/JavaScript/Reference/Global_Objects/Number/toExponential +--- +
{{JSRef}}
+ +

El mètode toExponential() retorna un string que representa l'objecte de tipus Number en notació exponencial.

+ +

Sintaxi

+ +
numObj.toExponential([dígitsDecimals])
+ +

Paràmetres

+ +
+
dígitsDecimals
+
Opcional. Un nombre sencer que indica el nombre de dígits decimals que s'utilitzaran. Si no s'especifica s'utilitzaran per defecte tants dígits decimals com facin falta per a acomodar el nombre.
+
+ +

Valor retornat

+ +

Un string que representa l'objecte {{jsxref("Number")}} en notació exponencial amb un dígit a l'esquerra del punt decimal, i arrodonit a dígitsDecimals després del punt decimal. Si s'omet el paràmetre fractionDigits s'utilitzaran tants dígits decimals com facin falta per a acomodar el nombre.

+ +

Si s'utilitza el mètode toExponential() en un literal numèric i el literal numèric no té exponent ni punt decimal, deixeu un espai abans del punt que precedeix a la crida del mètode per a evitar que el punt s'interpreti com a punt decimal.

+ +

Si un nombre té més dígits dels que s'especifiquen al paràmetre dígitsDecimals el nombre s'arrodoneix al nombre més proper representable pel nombre de dígits dígitsDecimals. Vegeu la discussió sobre arrodoniment a la descripció del mètode {{jsxref("Number.prototype.toFixed", "toFixed()")}}, que també s'aplica al mètode toExponential().

+ +

Excepcions llençades

+ +
+
{{jsxref("RangeError")}}
+
Si el valor de dígitsDecimals és massa petit o massa gran. Els valors acceptats estan entre 0 i 20, ambdos inclusius, i no llençaran per tant l'excepció RangeError. Les implementacions poden opcionalment donar suport per a valors més grans.
+
{{jsxref("TypeError")}}
+
Si es crida aquest mètode i se li passa un paràmetre que no és de tipus Number.
+
+ +

Exemples

+ +

Utilitzar toExponential

+ +
var numObj = 77.1234;
+
+console.log(numObj.toExponential());  // escriu 7.71234e+1
+console.log(numObj.toExponential(4)); // escriu 7.7123e+1
+console.log(numObj.toExponential(2)); // escriu 7.71e+1
+console.log(77.1234.toExponential()); // escriu 7.71234e+1
+console.log(77 .toExponential());     // escriu 7.7e+1
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES3')}}{{Spec2('ES3')}}Definició inicial. Implementat a 1.5.
{{SpecName('ES5.1', '#sec-15.7.4.6', 'Number.prototype.toExponential')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-number.prototype.toexponential', 'Number.prototype.toExponential')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Number.prototype.toFixed()")}}
    • +
  • {{jsxref("Number.prototype.toPrecision()")}}
    • +
  • {{jsxref("Number.prototype.toString()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/number/tofixed/index.html b/files/ca/web/javascript/reference/global_objects/number/tofixed/index.html new file mode 100644 index 0000000000..8df53aafe3 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/number/tofixed/index.html @@ -0,0 +1,135 @@ +--- +title: Number.prototype.toFixed() +slug: Web/JavaScript/Referencia/Objectes_globals/Number/toFixed +translation_of: Web/JavaScript/Reference/Global_Objects/Number/toFixed +--- +
{{JSRef}}
+ +

El mètode toFixed() formateja un nombre utilitzant notació de coma fixa.

+ +

Sintaxi

+ +
numObj.toFixed([dígits])
+ +

Paràmetres

+ +
+
dígits
+
Opcional. El nombre de dígits a utilitzar després del punt decimal; aquest paràmetre pot rebre valors entre 0 i 20, ambdós inclusius, i les implementacions poden opcionalment donar suport per a valors més grans. Si s'omet aquest argument s'utilitza un valor de 0 per defecte.
+
+ +

Valor retornat

+ +

Una representació de numObj en forma de string que no utilitza notació exponencial i té exactament dígits digits després del punt decimal. El nombre s'arrodoneix en cas que sigui necesari, així com la part fraccionaria s'omple amb zeros en cas necesari. Si numObj és major que 1e+21, aquest mètode retornarà un string en notació exponencial, proporcionat pel mètode {{jsxref("Number.prototype.toString()")}}.

+ +

Excepcions llençades

+ +
+
{{jsxref("RangeError")}}
+
Si el valor de dígits és massa petit o massa gran. Els valors acceptats estan entre 0 i 20, ambdos inclusius, i no llençaran per tant l'excepció {{jsxref("RangeError")}}. Les implementacions poden opcionalment donar suport per a valors més grans.
+
{{jsxref("TypeError")}}
+
Si es crida aquest mètode i se li passa un paràmetre que no és de tipus {{jsxref( "Number")}}.
+
+ +

Exemples

+ +

Utilitzar toFixed

+ +
var numObj = 12345.6789;
+
+numObj.toFixed();       // Retorna '12346': recalquem l'arrodoniment, no hi ha part decimal
+numObj.toFixed(1);      // Retorna '12345.7': recalquem l'arrodoniment
+numObj.toFixed(6);      // Retorna '12345.678900': recalquem els zeros afegits
+(1.23e+20).toFixed(2);  // Retorna '123000000000000000000.00'
+(1.23e-10).toFixed(2);  // Retorna '0.00'
+2.34.toFixed(1);        // Retorna '2.3'
+-2.34.toFixed(1);       // Retorna -2.3 (degut a la precedència d'operadors, nombres literals negatius no retornen un string...)
+(-2.34).toFixed(1);     // Retorna'-2.3' (...a no ser que s'utilitzin parèntesi)
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES3')}}{{Spec2('ES3')}}Definició inicial. Implementat a JavaScript 1.5.
{{SpecName('ES5.1', '#sec-15.7.4.5', 'Number.prototype.toFixed')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-number.prototype.tofixed', 'Number.prototype.toFixed')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Number.prototype.toExponential()")}}
    • +
  • {{jsxref("Number.prototype.toPrecision()")}}
    • +
  • {{jsxref("Number.prototype.toString()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/number/toprecision/index.html b/files/ca/web/javascript/reference/global_objects/number/toprecision/index.html new file mode 100644 index 0000000000..0af5875e7f --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/number/toprecision/index.html @@ -0,0 +1,134 @@ +--- +title: Number.prototype.toPrecision() +slug: Web/JavaScript/Referencia/Objectes_globals/Number/toPrecision +translation_of: Web/JavaScript/Reference/Global_Objects/Number/toPrecision +--- +
{{JSRef}}
+ +

El mètode toPrecision() retorna un string que representa l'objecte {{jsxref("Number")}} amb la precisió especificada.

+ +

Sintaxi

+ +
numObj.toPrecision([precisió])
+ +

Paràmetres

+ +
+
precisió
+
Opional. Un nombre sencer que indica el nombre de dígits significatius.
+
+ +

Valor retornat

+ +

Un string que representa un objecte {{jsxref("Number")}} en notació de punt fix o bé en notació exponencial, arrodonit a precisió dígits significatius. Vegeu la discussió sobre arrodoniment a la descripció del mètode {{jsxref("Number.prototype.toFixed()")}}, que també s'aplica a toPrecision().

+ +

Si s'omet l'argument precisió, es comporta com  {{jsxref("Number.prototype.toString()")}}. Si l'argument precisió no és un nombre sencer, aquest s'arrodoneix al nombre sencer més proper.

+ +

Excepcions llençades

+ +
+
{{jsxref("Global_Objects/RangeError", "RangeError")}}
+
Si el valor de precisió no està entre 1 i 100 (ambdós inclusius), es llença un RangeError. Les implementacions poden opcionalment donar suport per a valors més grans o petits. ECMA-262 tan sols requereix una precisió de fins a 21 dígits significatius.
+
+ +

Exemples

+ +

Utilitzar toPrecision

+ +
var numObj = 5.123456;
+
+console.log(numObj.toPrecision());    // escriu 5.123456
+console.log(numObj.toPrecision(5));   // escriu 5.1235
+console.log(numObj.toPrecision(2));   // escriu 5.1
+console.log(numObj.toPrecision(1));   // escriu 5
+
+// fixeu-vos que la notació exponencial pot retornar-se en algunes circumstàncies
+console.log((1234.5).toPrecision(2)); // escriu 1.2e+3
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES3')}}{{Spec2('ES3')}}Definició inicial. Implementat a 1.5.
{{SpecName('ES5.1', '#sec-15.7.4.7', 'Number.prototype.toPrecision')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-number.prototype.toprecision', 'Number.prototype.toPrecision')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Number.prototype.toFixed()")}}
    • +
  • {{jsxref("Number.prototype.toExponential()")}}
    • +
  • {{jsxref("Number.prototype.toString()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/number/tostring/index.html b/files/ca/web/javascript/reference/global_objects/number/tostring/index.html new file mode 100644 index 0000000000..7381fc97ac --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/number/tostring/index.html @@ -0,0 +1,141 @@ +--- +title: Number.prototype.toString() +slug: Web/JavaScript/Referencia/Objectes_globals/Number/toString +translation_of: Web/JavaScript/Reference/Global_Objects/Number/toString +--- +
{{JSRef}}
+ +

El mètode toString() retorna un string que representa l'objecte {{jsxref("Number")}} especificat.

+ +

Sintaxi

+ +
objecteNum.toString([base])
+ +

Paràmetres

+ +
+
base
+
Opcional. Un nombre sencer entre 2 i 36 que indica la base a utilitzar a l'hora de representar valors numèrics.
+
+ +

Errors llençats

+ +
+
{{jsxref("RangeError")}}
+
Si toString() rep una base que no estigui entre 2 i 36, es llença un {{jsxref("RangeError")}}.
+
+ +

Descripció

+ +

L'objecte {{jsxref("Number")}} sobreescriu el mètode toString() de l'objecte {{jsxref("Object")}}; no hereta {{jsxref("Object.prototype.toString()")}}. Per a objectes {{jsxref( "Number")}}, el mètode toString() retorna una representació en forma de string de l'objecte, utilitzant la base especificada.

+ +

El mètode toString() interpreta el primer argument donat, i intenta retornar una representació en forma de string tot utilitzant la base proporcionada. Per a bases majors que 10, les lletres del alfabet indiquen numerals majors que 9. Per exemple, per a nombres hexadecimals (en base 16), s'utilitzen les lletres de la a a la f.

+ +

Si no s'especifica la base, s'utilitza 10 com a base.

+ +

Si objecteNum és negatiu, es conserva el signe. Això s'aplica fins i tot si la base és 2; el string retornat és la representació binària positiva de objecteNum precedida per un signe -, no s'utilitza el complement a dos de objecteNum.

+ +

Exemples

+ +

Utilitzar toString

+ +
var count = 10;
+
+console.log(count.toString());    // mostra '10'
+console.log((17).toString());     // mostra '17'
+
+var x = 6;
+
+console.log(x.toString(2));       // mostra '110'
+console.log((254).toString(16));  // mostra 'fe'
+
+console.log((-10).toString(2));   // mostra '-1010'
+console.log((-0xff).toString(2)); // mostra '-11111111'
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.7.4.2', 'Number.prototype.tostring')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-number.prototype.tostring', 'Number.prototype.tostring')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Number.prototype.toFixed()")}}
    • +
  • {{jsxref("Number.prototype.toExponential()")}}
    • +
  • {{jsxref("Number.prototype.toPrecision()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/object/prototype/index.html b/files/ca/web/javascript/reference/global_objects/object/prototype/index.html deleted file mode 100644 index 9451ccfefe..0000000000 --- a/files/ca/web/javascript/reference/global_objects/object/prototype/index.html +++ /dev/null @@ -1,215 +0,0 @@ ---- -title: Object.prototype -slug: Web/JavaScript/Reference/Global_Objects/Object/prototype -translation_of: Web/JavaScript/Reference/Global_Objects/Object -translation_of_original: Web/JavaScript/Reference/Global_Objects/Object/prototype ---- -
{{JSRef}}
- -

La propietat Object.prototype representa el prototipus per a {{jsxref("Object")}}.

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

Descripció

- -

A JavaScript, tots els objectes hereten de {{jsxref("Object")}}; tots els objectes hereten els mètodes i propietats de Object.prototype, tot i que es poden sobreescriure (excepte un Object amb prototipus null, és a dir, Object.create(null)). Per exemple, altres prototipus de constructors sobreescriuen la propietat constructor i ofereixen els seus propis mètodes {{jsxref("Object.prototype.toString()", "toString()")}}. Els canvis al prototipus Object es propaguen a tots els objectes a no ser que les propietats i mètodes que reben aquests canvis hagin sigut sobreescrites més avall a la cadena de prototipus.

- -

Propietats

- -
-
{{jsxref("Object.prototype.constructor")}}
-
Especifica la funció que ha creat el prototipus de l'objecte.
-
{{jsxref("Object.prototype.__proto__")}} {{non-standard_inline}}
-
Referencia l'objecte utilitzat com a prototipus quan aquest objecte va ser instanciat.
-
{{jsxref("Object.prototype.__noSuchMethod__")}} {{non-standard_inline}}
-
Permet definir una funció que serà executada quan es cridi com mètode un membre no definit.
-
{{jsxref("Object.prototype.__count__")}} {{obsolete_inline}}
-
Retornava el nombre de propietats enumerables que hi hagués a un objecte definit per l'usuari. S'ha eliminat.
-
{{jsxref("Object.prototype.__parent__")}} {{obsolete_inline}}
-
Referenciava el context d'un objecte. S'ha eliminat.
-
- -

Mètodes

- -
-
{{jsxref("Object.prototype.__defineGetter__()")}} {{non-standard_inline}} {{deprecated_inline}}
-
Associa una funció a una propietat que, quan s'accedeix, executa aquesta funció i retorna el seu valor.
-
{{jsxref("Object.prototype.__defineSetter__()")}} {{non-standard_inline}} {{deprecated_inline}}
-
Associa una funció a una propietat que, quan s'assigna, executa aquesta funció que modifica la propietat.
-
{{jsxref("Object.prototype.__lookupGetter__()")}} {{non-standard_inline}} {{deprecated_inline}}
-
Retorna una funció associada a la propietat especificada pel mètode {{jsxref("Object.defineGetter", "__defineGetter__")}}.
-
{{jsxref("Object.prototype.__lookupSetter__()")}} {{non-standard_inline}} {{deprecated_inline}}
-
Retorna a funció associada a la propietat especificada pel mètode {{jsxref("Object.defineSetter", "__defineSetter__")}}.
-
{{jsxref("Object.prototype.hasOwnProperty()")}}
-
Retorna un booleà que indica si l'objecte conté la propietat especificada com una propietat pròpia d'ell mateix en comptes d'heretar-la a través de la cadena de prototipus.
-
{{jsxref("Object.prototype.isPrototypeOf()")}}
-
Retorna un booleà que indica si l'objecte espeicfifcat pertany a la cadena de prototipus de l'objecte sobre el que es crida aquest mètode.
-
{{jsxref("Object.prototype.propertyIsEnumerable()")}}
-
Retorna un booleà que indica si està activat l'atribut intern DontEnum de l'ECMAScript.
-
{{jsxref("Object.prototype.toSource()")}} {{non-standard_inline}}
-
Retorna un string que conté cofi font que defineix un literal d'objecte que representa l'objecte sobre el que s'executa aquest mètode; aquest valor pot utilitzar-se per a crear un nou objecte.
-
{{jsxref("Object.prototype.toLocaleString()")}}
-
Crida el mètode {{jsxref("Object.toString", "toString()")}}.
-
{{jsxref("Object.prototype.toString()")}}
-
Retorna una representació d'aquest objecte en forma de string.
-
{{jsxref("Object.prototype.unwatch()")}} {{non-standard_inline}}
-
Esborra un watchpoint d'una propietat de l'objecte.
-
{{jsxref("Object.prototype.valueOf()")}}
-
Retorna el valor primitiu de l'objecte especificat.
-
{{jsxref("Object.prototype.watch()")}} {{non-standard_inline}}
-
Afegeix un watchpoint a una propietat de l'objecte.
-
{{jsxref("Object.prototype.eval()")}} {{obsolete_inline}}
-
Evaluava un string de codi font JavaScript dins el context de l'objecte especificat. S'ha eliminat.
-
- -

Exemples

- -

Degut a que JavaScript no res semblant a subclasses d'objectes, la propietat prototype és una bona forma d'utilitzar algunes funcions que fan d'objectes com a "classe base". Per exemple:

- -
var Person = function() {
-  this.canTalk = true;
-};
-
-Person.prototype.greet = function() {
-  if (this.canTalk) {
-    console.log('Hi, I am ' + this.name);
-  }
-};
-
-var Employee = function(name, title) {
-  Person.call(this);
-  this.name = name;
-  this.title = title;
-};
-
-Employee.prototype = Object.create(Person.prototype);
-Employee.prototype.constructor = Employee;
-
-Employee.prototype.greet = function() {
-  if (this.canTalk) {
-    console.log('Hi, I am ' + this.name + ', the ' + this.title);
-  }
-};
-
-var Customer = function(name) {
-  Person.call(this);
-  this.name = name;
-};
-
-Customer.prototype = Object.create(Person.prototype);
-Customer.prototype.constructor = Customer;
-
-var Mime = function(name) {
-  Person.call(this);
-  this.name = name;
-  this.canTalk = false;
-};
-
-Mime.prototype = Object.create(Person.prototype);
-Mime.prototype.constructor = Mime;
-
-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();
-// Hi, I am Bob, the Builder
-
-joe.greet();
-// Hi, I am Joe
-
-rg.greet();
-// Hi, I am Red Green, the Handyman
-
-mike.greet();
-// Hi, I am Mike
-
-mime.greet();
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.2.3.1', 'Object.prototype')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-object.prototype', 'Object.prototype')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

 Vegeu també

- - diff --git a/files/ca/web/javascript/reference/global_objects/parsefloat/index.html b/files/ca/web/javascript/reference/global_objects/parsefloat/index.html new file mode 100644 index 0000000000..570fa6b63f --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/parsefloat/index.html @@ -0,0 +1,166 @@ +--- +title: parseFloat() +slug: Web/JavaScript/Referencia/Objectes_globals/parseFloat +translation_of: Web/JavaScript/Reference/Global_Objects/parseFloat +--- +
+
+
{{jsSidebar("Objects")}}
+
+
+ +

La funció parseFloat() interpreta un argument de tipus cadena i retorna un nombre decimal amb coma flotant

+ +

Sintaxi

+ +
parseFloat(cadena)
+ +

Paràmetres

+ +
+
cadena
+
Una cadena que representa el valor que es vol interpretar.
+
+ +

Descripció

+ +

parseFloat és una funció de nivell superior que no està associada a cap objecte.

+ +

parseFloat interpreta el seu argument, una cadena, i retorna un nombre decimal amb coma flotant. Si es topa amb un caràcter que no sigui un signe (+ o -), un numeral (0-9), un punt decimal, o un exponent, retorna el valor fins a aquell punt i ignora aquell caràcter i la resta de caràcters que el succeeixen. Es permeten espais inicials i finals.

+ +

Si el primer caràcter no es pot convertir en un nombre, parseFloat retorna NaN.

+ +

Per propòstis aritmètics, el valor de NaN no és un nombre en qualsevol radix. Es pot cridar la funció {{jsxref("isNaN")}} per determinar si el resultat del parseFloat és NaN. Si es passa NaN en operacions aritmètiques, el resultat de l'operació també serà NaN.

+ +

parseFloat també pot interpretar i retornar el valor Infinity. Es pot utilitzar la funció {{jsxref("isFinite")}} per determinar si el resultat és un nombre finit i (no Infinity, -Infinity, o NaN).

+ +

Exemples

+ +

parseFloat retorna un nombre

+ +

Tots els exemples següents retornen 3.14

+ +
parseFloat("3.14");
+parseFloat("314e-2");
+parseFloat("0.0314E+2");
+parseFloat("3.14more non-digit characters");
+
+ +

parseFloat retorna NaN

+ +

L'exemple següent retorna NaN

+ +
parseFloat("FF2");
+
+ +

Una interpretació més estricta

+ +

Sovint és útil tenir una forma més estricta d'interpretar els valors flotants, expressions regulars poden ajudar:

+ +
var filterFloat = function (value) {
+    if(/^(\-|\+)?([0-9]+(\.[0-9]+)?|Infinity)$/
+      .test(value))
+      return Number(value);
+  return NaN;
+}
+
+console.log(filterFloat('421'));               // 421
+console.log(filterFloat('-421'));              // -421
+console.log(filterFloat('+421'));              // 421
+console.log(filterFloat('Infinity'));          // Infinity
+console.log(filterFloat('1.61803398875'));     // 1.61803398875
+console.log(filterFloat('421e+0'));            // NaN
+console.log(filterFloat('421hop'));            // NaN
+console.log(filterFloat('hop1.61803398875'));  // NaN
+
+
+ +

Vegeu que aquest codi és només a mode d'exemple, no accepta nombres vàlids com 1. o .5.

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial.
{{SpecName('ES5.1', '#sec-15.1.2.3', 'parseFloat')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-parsefloat-string', 'parseFloat')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Global_Objects/parseInt", "parseInt()")}}
    • +
  • {{jsxref("Number.parseFloat()")}}
    • +
  • {{jsxref("Number.parseInt()")}}
    • +
  • {{jsxref("Global_Objects/isNaN", "isNaN()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/set/add/index.html b/files/ca/web/javascript/reference/global_objects/set/add/index.html new file mode 100644 index 0000000000..b93eaa3efb --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/set/add/index.html @@ -0,0 +1,119 @@ +--- +title: Set.prototype.add() +slug: Web/JavaScript/Referencia/Objectes_globals/Set/add +translation_of: Web/JavaScript/Reference/Global_Objects/Set/add +--- +
{{JSRef}}
+ +

El mètode add() afegeix un nou element al final de l'objecte Set amb el valor especificat pel paràmetre.

+ +

Sintax

+ +
mySet.add(valor);
+ +

Paràmetres

+ +
+
valor
+
Obligatori. El valor de l'element que s'afegirà a l'objecte Set.
+
+ +

Valor retornat

+ +

L'objecte Set.

+ +

Exemples

+ +

Utilitzar el mètode add

+ +
var mySet = new Set();
+
+mySet.add(1);
+mySet.add(5).add("some text"); // crida en cadena
+
+console.log(mySet);
+// Set [1, 5, "some text"]
+
+ +

Especificacions

+ + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-set.prototype.add', 'Set.prototype.add')}}{{Spec2('ES6')}}Definició inicial.
+ +

Compatibilitat amb navegadors

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic38{{CompatGeckoDesktop("13.0")}}11257.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}38{{CompatGeckoMobile("13.0")}}{{CompatNo}}{{CompatNo}}8
+
+ +

Notes específiques per al Firefox

+ +
    +
  • En les versions anteriors al Firefox 33 {{geckoRelease("33")}}, Set.prototype.add retornava undefined i per tant no es podien realitzar crides encadenades. Aquest problem ha estat resolt ({{bug(1031632)}}). Aquest comportament també es pot trovar al Chrome/v8 (problema).
    • +
+ +

Vegeu també

+ +
    +
  • {{jsxref("Set")}}
    • +
  • {{jsxref("Set.prototype.delete()")}}
    • +
  • {{jsxref("Set.prototype.has()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/set/clear/index.html b/files/ca/web/javascript/reference/global_objects/set/clear/index.html new file mode 100644 index 0000000000..6ef179daaa --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/set/clear/index.html @@ -0,0 +1,105 @@ +--- +title: Set.prototype.clear() +slug: Web/JavaScript/Referencia/Objectes_globals/Set/clear +translation_of: Web/JavaScript/Reference/Global_Objects/Set/clear +--- +
{{JSRef}}
+ +

El mètode clear() esborra tots els elements emmagatzemats dins l'objecte Set.

+ +

Sintaxi

+ +
mySet.clear();
+ +

Exemples

+ +

Utilitzar el mètode clear

+ +
var mySet = new Set();
+mySet.add(1);
+mySet.add("foo");
+
+mySet.size;       // 2
+mySet.has("foo"); // true
+
+mySet.clear();
+
+mySet.size;       // 0
+mySet.has("bar")  // false
+
+ +

Especificacions

+ + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-set.prototype.clear', 'Set.prototype.clear')}}{{Spec2('ES6')}}Definició inicial.
+ +

Compatibilitat amb navegadors

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic38{{CompatGeckoDesktop("19.0")}}11257.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}25{{CompatGeckoMobile("19.0")}}{{CompatNo}}{{CompatNo}}8
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Set")}}
    • +
  • {{jsxref("Set.prototype.delete()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/set/delete/index.html b/files/ca/web/javascript/reference/global_objects/set/delete/index.html new file mode 100644 index 0000000000..ea66c1a723 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/set/delete/index.html @@ -0,0 +1,112 @@ +--- +title: Set.prototype.delete() +slug: Web/JavaScript/Referencia/Objectes_globals/Set/delete +translation_of: Web/JavaScript/Reference/Global_Objects/Set/delete +--- +
{{JSRef}}
+ +

El mètode delete() esborra l'element especificat emmagatzemat dins l'objecte Set.

+ +

Sintaxi

+ +
mySet.delete(valor);
+ +

Paràmetres

+ +
+
valor
+
Obligatori. El valor de l'element a eliminar.
+
+ +

Valor retornat

+ +

Retorna true si s'ha pogut eliminar l'element de l'objecte Set; en cas contrari retorna false.

+ +

Exemples

+ +

Utilitzar el mètode delete

+ +
var mySet = new Set();
+mySet.add("foo");
+
+mySet.delete("bar"); // Retorna false. No s'ha trobat l'element "bar".
+mySet.delete("foo"); // Retorna true.  S'ha pogut esborrar l'element "foo".
+
+mySet.has("foo");    // Retorna false. L'element "foo" ja no existeix dins el Set.
+
+ +

Especificacions

+ + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-set.prototype.delete', 'Set.prototype.delete')}}{{Spec2('ES6')}}Definició inicial.
+ +

Compatibilitat amb navegadors

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic38{{CompatGeckoDesktop("13.0")}}11257.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}38{{CompatGeckoMobile("13.0")}}{{CompatNo}}{{CompatNo}}8
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Set")}}
    • +
  • {{jsxref("Set.prototype.clear()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/set/entries/index.html b/files/ca/web/javascript/reference/global_objects/set/entries/index.html new file mode 100644 index 0000000000..848e53ba8d --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/set/entries/index.html @@ -0,0 +1,104 @@ +--- +title: Set.prototype.entries() +slug: Web/JavaScript/Referencia/Objectes_globals/Set/entries +translation_of: Web/JavaScript/Reference/Global_Objects/Set/entries +--- +
{{JSRef}}
+ +

El mètode entries() retorna un nou objecte Iterator que conté un array de [valor, valor] per a cada element emmagatzemat dins l'objecte Set, ordenats per ordre d'inserció. Els elements de l'objecte Set no disposen de claus, a diferència dels objectes Map. Tot i així, per a oferir una API similar a la de l'objecte Map cada entrada té el mateix valor tant com per a la clau com per al valor. És per això que es retorna un array [valor, valor].

+ +

Sintaxi

+ +
mySet.entries()
+ +

Examples

+ +

Using entries()

+ +
var mySet = new Set();
+mySet.add("foobar");
+mySet.add(1);
+mySet.add("baz");
+
+var setIter = mySet.entries();
+
+console.log(setIter.next().value); // ["foobar", "foobar"]
+console.log(setIter.next().value); // [1, 1]
+console.log(setIter.next().value); // ["baz", "baz"]
+
+ +

Especificacions

+ + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-set.prototype.entries', 'Set.prototype.entries')}}{{Spec2('ES6')}}Definició inicial.
+ +

Compatibilitat amb navegadors

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic38{{ CompatGeckoDesktop("24") }}{{CompatNo}}257.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}38{{ CompatGeckoMobile("24") }}{{CompatNo}}{{CompatNo}}8
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Set.prototype.keys()")}}
    • +
  • {{jsxref("Set.prototype.values()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/set/has/index.html b/files/ca/web/javascript/reference/global_objects/set/has/index.html new file mode 100644 index 0000000000..ca9027b8a4 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/set/has/index.html @@ -0,0 +1,114 @@ +--- +title: Set.prototype.has() +slug: Web/JavaScript/Referencia/Objectes_globals/Set/has +translation_of: Web/JavaScript/Reference/Global_Objects/Set/has +--- +
{{JSRef}}
+ +

El mètode has() retorna un booleà que indica si l'element amb el valor especificat existeix o no dins l'objecte Set.

+ +

Sintaxi

+ +
mySet.has(valor);
+ +

Paràmetres

+ +
+
valor
+
Obligatori. El valor a comprovar si pertany o no a l'objecte Set.
+
+ +

Valor retornat

+ +
+
Booleà
+
Retorna true si existex un element amb el valor especificat dins l'objecte Set; en cas contrari retorna false.
+
+ +

Exemples

+ +

Utilitzar el mètode has

+ +
var mySet = new Set();
+mySet.add("foo");
+
+mySet.has("foo");  // retorna true
+mySet.has("bar");  // retorna false
+
+ +

Especificacions

+ + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-set.prototype.has', 'Set.prototype.has')}}{{Spec2('ES6')}}Definició inicial.
+ +

Compatibilitat amb navegadors

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic38{{CompatGeckoDesktop("13.0")}}11257.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}38{{CompatGeckoMobile("13.0")}}{{CompatNo}}{{CompatNo}}8
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Set")}}
    • +
  • {{jsxref("Set.prototype.add()")}}
    • +
  • {{jsxref("Set.prototype.delete()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/set/index.html b/files/ca/web/javascript/reference/global_objects/set/index.html new file mode 100644 index 0000000000..993d296324 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/set/index.html @@ -0,0 +1,380 @@ +--- +title: Set +slug: Web/JavaScript/Referencia/Objectes_globals/Set +translation_of: Web/JavaScript/Reference/Global_Objects/Set +--- +
{{JSRef}}
+ +

L'objecte Set permet emmagatzemar valors únics de qualsevol tipus, ja siguin {{Glossary("Primitive", "valors primitius")}} o bé referències a objectes.

+ +

Sintaxi

+ +
new Set([iterable]);
+ +

Paràmetres

+ +
+
iterable
+
Si rep un objecte iterable, tots els seus elements seran afegits al nou Set. null serà tractat com a undefined.
+
+ +

Descripció

+ +

Els objectes Set són coleccions de valors, els seus elements poden ser iterats en ordre d'inserció. Un valor només pot aparèixer un cop dins el Set; és únic dins la col·lecció del Set.

+ +

Igualtat de valors

+ +

Degut a que cada valor dins el Set ha de ser únic, la igualtat dels valors serà comprovada i aquesta no es basa en el mateix algoritme que l'emprat per l'operador ===. Concreatement, per a Sets, +0 (que és estrictament igual a -0) i -0 són valors diferents. Tot i així, aquest comportament s'ha canviat a la última especificació de l'ECMAScript 6. A partir de Gecko 29.0 {{geckoRelease("29")}} ({{bug("952870")}}) i una recent versió nightly del Chrome, +0 i -0 són tractats com al mateix valor en objectes Set. Així mateix, NaN i undefined també poden ser emmagatzemats dins un Set. NaN és considerat igual a NaN (tot i que NaN !== NaN).

+ +

Propietats

+ +
+
Set.length
+
El valor de la propietat length és 0.
+
{{jsxref("Set.@@species", "get Set[@@species]")}}
+
La funció constructora que s'ha utilitzat per a crear objectes derivats.
+
{{jsxref("Set.prototype")}}
+
Representa el prototipus per al constructor Set. Permet afegir propietats a tots els objectes Set.
+
+ +

Instàncies de Set

+ +

Totes les instàncies de Set hereten de {{jsxref("Set.prototype")}}.

+ +

Propietats

+ +

{{page('ca/Web/JavaScript/Reference/Global_Objects/Set/prototype','Propietats')}}

+ +

Mètodes

+ +

{{page('ca/Web/JavaScript/Reference/Global_Objects/Set/prototype','Mètodes')}}

+ +

Exemples

+ +

Utilitzar l'objecte Set

+ +
var mySet = new Set();
+
+mySet.add(1);
+mySet.add(5);
+mySet.add("algun text");
+
+mySet.has(1); // true
+mySet.has(3); // false, 3 no ha estat afegit al set
+mySet.has(5);              // true
+mySet.has(Math.sqrt(25));  // true
+mySet.has("Some Text".toLowerCase()); // true
+
+mySet.size; // 3
+
+mySet.delete(5); // esborra 5 del set
+mySet.has(5);    // false, 5 ha sigut esborrat
+
+mySet.size; // 2, acabem d'esborrar un valor
+
+ +

Iterarar Sets

+ +
// iterar els elements d'un set
+// imprimeix els elements en l'ordre: 1, "algun text"
+for (let item of mySet) console.log(item);
+
+// imprimeix els elements en l'ordre: 1, "algun text"
+for (let item of mySet.keys()) console.log(item);
+
+// imprimeix els elements en l'ordre: 1, "algun text"
+for (let item of mySet.values()) console.log(item);
+
+// imprimeix els elements en l'ordre: 1, "algun text"
+//(key i value són iguals en aquest exemple)
+for (let [key, value] of mySet.entries()) console.log(key);
+
+// converteix el set en un Array (mitjançant Array comprehensions)
+var myArr = [v for (v of mySet)]; // [1, "algun text"]
+// Alternativa (mitjançant Array.from)
+var myArr = Array.from(mySet); // [1, "algun text"]
+
+// el codi següent també funcionarà si s'executa dins un document HTML
+mySet.add(document.body);
+mySet.has(document.querySelector("body")); // true
+
+// conversió entre Set i Array
+mySet2 = new Set([1,2,3,4]);
+mySet2.size; // 4
+[...mySet2]; // [1,2,3,4]
+
+// la intersecció es pot simular via
+var intersection = new Set([x for (x of set1) if (set2.has(x))]);
+
+// Iteració de les entrades del set mitjançant un forEach
+mySet.forEach(function(value) {
+  console.log(value);
+});
+
+// 1
+// 2
+// 3
+// 4
+ +

Relació amb objectes Array

+ +
var myArray = ["valor1", "valor2", "valor3"];
+
+// Utilitzem el constructor normal del Set per a transformar un Array en un Set
+var mySet = new Set(myArray);
+
+mySet.has("valor1"); // retorna true
+
+// Utilitzem l'operador spread per a transformar un Set en un Array.
+console.log(uneval([...mySet])); // Mostrarà exactament el mateix Array que myArray
+ +

Especificacions

+ + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-set-objects', 'Set')}}{{Spec2('ES6')}}Definició inicial.
+ +

Compatibilitat amb navegadors

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic +

{{ CompatChrome(38) }} [1]

+ 		{{ CompatGeckoDesktop("13") }}{{ CompatIE("11") }}257.1
Argument al constructor: new Set(iterable){{ CompatChrome(38) }}{{ CompatGeckoDesktop("13") }}{{CompatNo}}25{{CompatNo}}
iterable{{ CompatChrome(38) }}{{ CompatGeckoDesktop("17") }}{{CompatNo}}257.1
Set.clear(){{ CompatChrome(38) }}{{CompatGeckoDesktop("19")}}{{ CompatIE("11") }}257.1
Set.keys(), Set.values(), Set.entries(){{ CompatChrome(38) }}{{CompatGeckoDesktop("24")}}{{CompatNo}}257.1
Set.forEach(){{ CompatChrome(38) }}{{CompatGeckoDesktop("25")}}{{ CompatIE("11") }}257.1
Igualtat de valors per a -0 i 0{{ CompatChrome(38) }}{{CompatGeckoDesktop("29")}}{{CompatNo}}25{{CompatNo}}
Argument del constructor: new Set(null){{CompatVersionUnknown}}{{CompatGeckoDesktop("37")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Monkey-patched add() al Constructor{{CompatVersionUnknown}}{{CompatGeckoDesktop("37")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Set[@@species]{{CompatUnknown}}{{CompatGeckoDesktop("41")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Set() sense new llença excepció{{CompatUnknown}}{{CompatGeckoDesktop("42")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatChrome(38)}} [1]{{ CompatGeckoMobile("13") }}{{CompatNo}}{{CompatNo}}8
Argument al constructor: new Set(iterable){{CompatNo}}{{CompatChrome(38)}}{{ CompatGeckoMobile("13") }}{{CompatNo}}{{CompatNo}}{{CompatNo}}
iterable{{CompatNo}}{{CompatNo}}{{ CompatGeckoMobile("17") }}{{CompatNo}}{{CompatNo}}8
Set.clear(){{CompatNo}}{{ CompatChrome(38) }}{{CompatGeckoMobile("19")}}{{CompatNo}}{{CompatNo}}8
Set.keys(), Set.values(), Set.entries(){{CompatNo}}{{ CompatChrome(38) }}{{CompatGeckoMobile("24")}}{{CompatNo}}{{CompatNo}}8
Set.forEach(){{CompatNo}}{{ CompatChrome(38) }}{{CompatGeckoMobile("25")}}{{CompatNo}}{{CompatNo}}8
Igualtat de valors per a -0 i 0{{CompatNo}}{{ CompatChrome(38) }}{{CompatGeckoMobile("29")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Argument del constructor: new Set(null){{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("37")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Monkey-patched add() al Constructor{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("37")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Set[@@species]{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("41")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Set() sense new llença excepció{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("42")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] La característica estava disponible sota una preferència a partir de Chorem 31. Al chrome://flags, activeu l'entrada “Activa JavaScript Experimental”.

+ +

Vegeu també

+ +
    +
  • {{jsxref("Map")}}
    • +
  • {{jsxref("WeakMap")}}
    • +
  • {{jsxref("WeakSet")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/set/values/index.html b/files/ca/web/javascript/reference/global_objects/set/values/index.html new file mode 100644 index 0000000000..307fa78113 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/set/values/index.html @@ -0,0 +1,106 @@ +--- +title: Set.prototype.values() +slug: Web/JavaScript/Referencia/Objectes_globals/Set/values +translation_of: Web/JavaScript/Reference/Global_Objects/Set/values +--- +
{{JSRef}}
+ +

El mètode values() retorna un nou objecte Iterator que conté els valors per a cada element de l'objecte Set en ordre d'inserció.

+ +

El mètode keys() és un mètode sinònim d'aquest mètode (per a mantindre la similitud amb els objecte {{jsxref("Map")}}); es comporta exactament de la mateixa forma i retorna els valors dels elements de l'objecte Set.

+ +

Sintaxi

+ +
mySet.values();
+mySet.keys();
+
+ +

Exemples

+ +

Utilitzar values()

+ +
var mySet = new Set();
+mySet.add("foo");
+mySet.add("bar");
+mySet.add("baz");
+
+var setIter = mySet.values();
+
+console.log(setIter.next().value); // "foo"
+console.log(setIter.next().value); // "bar"
+console.log(setIter.next().value); // "baz"
+ +

Especificacions

+ + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-set.prototype.values', 'Set.prototype.values')}}{{Spec2('ES6')}}Definició inicial.
+ +

Compatibilitat amb navegadors

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic38{{CompatGeckoDesktop("24")}}{{CompatNo}}257.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}38{{ CompatGeckoMobile("24") }}{{ CompatNo}}{{ CompatNo}}8
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Set.prototype.entries()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/string/anchor/index.html b/files/ca/web/javascript/reference/global_objects/string/anchor/index.html new file mode 100644 index 0000000000..15bd4db97b --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/string/anchor/index.html @@ -0,0 +1,118 @@ +--- +title: String.prototype.anchor() +slug: Web/JavaScript/Referencia/Objectes_globals/String/anchor +translation_of: Web/JavaScript/Reference/Global_Objects/String/anchor +--- +
{{JSRef}}
+ +

El mètode anchor() un element àncora HTML {{HTMLElement("a")}} que s'utilitza com a HTML un objectiu hypertext.

+ +

Sintaxi

+ +
str.anchor(nom)
+ +

Paràmetres

+ +
+
nom
+
Una cadena que representa l'atribut name attribute of the a tag to be created.
+
+ +

Descripció

+ +

Utilitzar el mètode anchor() per crear i mostrar una àncora en un document mitjançant programació.

+ +

En la sintaxi, la cadena de text representa el text literal que es vol mostrar a l'usuari. La cadena paràmetre name representa l'atribut name de l'element {{HTMLElement("a")}}.

+ +

Les àncores creades amb el mètode anchor() es tornen elements de l'array {{domxref("document.anchors")}}.

+ +

Exemples

+ +

Utilitzar anchor()

+ +
var myString = 'Taula de continguts';
+
+document.body.innerHTML = myString.anchor('contents_anchor');
+
+ +

Mostrarà el següent HTML:

+ +
<a name="contents_anchor">Taula de continguts</a>
+
+ +

Especificacions

+ + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-string.prototype.anchor', 'String.prototype.anchor')}}{{Spec2('ES6')}}Definició inicial. Implementat en JavaScript 1.0. Definit en l'Annex B (normative) per característiques addiccionals d'ECMAScript per a navegadors Web.
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}} [1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome pdr AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}} [1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] Des de la versió Gecko 17, les " (cometes) són substituides pel caràcter de referència HTML &quot; en cadenes subministrades pel paràmetre name.

+ +

Vegeu també

+ +
    +
  • {{jsxref("String.prototype.link()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/string/big/index.html b/files/ca/web/javascript/reference/global_objects/string/big/index.html new file mode 100644 index 0000000000..a3b8815f10 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/string/big/index.html @@ -0,0 +1,114 @@ +--- +title: String.prototype.big() +slug: Web/JavaScript/Referencia/Objectes_globals/String/big +translation_of: Web/JavaScript/Reference/Global_Objects/String/big +--- +
{{JSRef}} {{deprecated_header}}
+ +

El mètode big() crea un element HTML {{HTMLElement("big")}} que causa que la cadena es mostri en una font de mida gran.

+ +
+

Nota d'ús: L'element <big> s'ha eliminat de l'HTML5 i no s'hauria de fer servir més. S'aconsella als desenvolupadors web utilitzar les propietats de CSS.

+
+ +

Sintaxi

+ +
str.big()
+ +

Descripció

+ +

El mètode big() incrusta una cadena dins del tag <big>: "<big>str</big>".

+ +

Exemples

+ +

Utilitzar big()

+ +

L'exemple següent utilitza mètodes string per canviar la mida d'una cadena:

+ +
var worldString = 'Hello, world';
+
+console.log(worldString.small());     // <small>Hello, world</small>
+console.log(worldString.big());       // <big>Hello, world</big>
+console.log(worldString.fontsize(7)); // <fontsize=7>Hello, world</fontsize>
+
+ +

Amb l'objecte {{domxref("HTMLElement.style", "element.style")}} es pot obtenir l'atribut style de l'element i manipular-lo més genèricament, per exemple:

+ +
document.getElementById('yourElemId').style.fontSize = '2em';
+
+ +

Especificacions

+ + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-string.prototype.big', 'String.prototype.big')}}{{Spec2('ES6')}}Definició inicial. Implementat en JavaScript 1.0. Definit en l'Annex B (normative) per característiques addicionals ECMAScript per navegadors web.
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("String.prototype.fontsize()")}}
    • +
  • {{jsxref("String.prototype.small()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/string/blink/index.html b/files/ca/web/javascript/reference/global_objects/string/blink/index.html new file mode 100644 index 0000000000..2378325897 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/string/blink/index.html @@ -0,0 +1,110 @@ +--- +title: String.prototype.blink() +slug: Web/JavaScript/Referencia/Objectes_globals/String/blink +translation_of: Web/JavaScript/Reference/Global_Objects/String/blink +--- +
{{JSRef}} {{deprecated_header}}
+ +

El mètode blink() crea un elment HTML {{HTMLElement("blink")}} que fa mostrar una cadena de forma intermitent.

+ +
+

Advertència: El text que es mostra de forma intermitent és mal vist per varis estàndards d'accessibilitat. L'element  <blink> no és estàndard i és obsolet!

+
+ +

Sintaxi

+ +
str.blink()
+ +

Descripció

+ +

El mètode blink() incrusta una cadena dins l'etiqueta <blink>: "<blink>cad</blink>".

+ +

Exemples

+ +

Utilitzar blink()

+ +

L'exemple següent utilitza mètodes string per canviar el format d'una cadena:

+ +
var worldString = 'Hello, world';
+
+console.log(worldString.blink());   // <blink>Hello, world</blink>
+console.log(worldString.bold());    // <b>Hello, world</b>
+console.log(worldString.italics()); // <i>Hello, world</i>
+console.log(worldString.strike());  // <strike>Hello, world</strike>
+ +

Especificacions

+ + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-string.prototype.blink', 'String.prototype.blink')}}{{Spec2('ES6')}}Definició inicial. Implementat en JavaScript 1.0. Definit en l'Annex B (normative) per característiques addiccionals d'ECMAScrip per Navegadors Web.
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("String.prototype.bold()")}}
    • +
  • {{jsxref("String.prototype.italics()")}}
    • +
  • {{jsxref("String.prototype.strike()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/string/bold/index.html b/files/ca/web/javascript/reference/global_objects/string/bold/index.html new file mode 100644 index 0000000000..502810bb45 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/string/bold/index.html @@ -0,0 +1,106 @@ +--- +title: String.prototype.bold() +slug: Web/JavaScript/Referencia/Objectes_globals/String/bold +translation_of: Web/JavaScript/Reference/Global_Objects/String/bold +--- +
{{JSRef}} {{deprecated_header}}
+ +

El mètode bold() crea un element HTML {{HTMLElement("b")}} que causa que una cadena es mostri amb negreta.

+ +

Sintaxi

+ +
str.bold()
+ +

Descripció

+ +

El mètode bold() incrusta una cadena en l'etiqueta <b>: "<b>cad</b>".

+ +

Exemples

+ +

Utilitzar bold()

+ +

L'exemple següent utilitza mètodes string per canviar el format d'una cadena:

+ +
var worldString = 'Hello, world';
+
+console.log(worldString.blink());   // <blink>Hello, world</blink>
+console.log(worldString.bold());    // <b>Hello, world</b>
+console.log(worldString.italics()); // <i>Hello, world</i>
+console.log(worldString.strike());  // <strike>Hello, world</strike>
+ +

Especificacions

+ + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-string.prototype.bold', 'String.prototype.bold')}}{{Spec2('ES6')}}Definició inicial. Implementat en JavaScript 1.0. Definit en l'Annex B (normative) per Característiques addiccionals ECMAScript per navegadors Web.
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("String.prototype.blink()")}}
    • +
  • {{jsxref("String.prototype.italics()")}}
    • +
  • {{jsxref("String.prototype.strike()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/string/charat/index.html b/files/ca/web/javascript/reference/global_objects/string/charat/index.html new file mode 100644 index 0000000000..55a84ab7d0 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/string/charat/index.html @@ -0,0 +1,283 @@ +--- +title: String.prototype.charAt() +slug: Web/JavaScript/Referencia/Objectes_globals/String/charAt +translation_of: Web/JavaScript/Reference/Global_Objects/String/charAt +--- +
{{JSRef}}
+ +

El mètode charAt() retorna el caràcter especificat d'una cadena.

+ +

Sintaxi

+ +
str.charAt(posicio)
+ +

Paràmetres

+ +
+
posicio
+
Un nombre sencer entre 0 i la longitud de la cadena menys 1.
+
+ +

Descripció

+ +

Els caràcters d'una cadena reben un nombre per la seva posició d'esquerra a dreta. La posició del primer caràcter és el 0 i la posició de l'últim caràcter d'una cadena anomenada stringName és stringName.length - 1. Si la posicio proporcionada està fora del rang vàlid JavaScript retornarà una cadena buida.

+ +

Exemples

+ +

Mostrar caràcters de diferents posicions d'una cadena

+ +

L'exemple següent mostra alguns caràcters a diferents posicions de la cadena "Brave new world":

+ +
var anyString = 'Brave new world';
+
+console.log("El caràcter a la posició 0   és '" + anyString.charAt(0)   + "'");
+console.log("El caràcter a la posició 1   és '" + anyString.charAt(1)   + "'");
+console.log("El caràcter a la posició 2   és '" + anyString.charAt(2)   + "'");
+console.log("El caràcter a la posició 3   és '" + anyString.charAt(3)   + "'");
+console.log("El caràcter a la posició 4   és '" + anyString.charAt(4)   + "'");
+console.log("El caràcter a la posició 999 és '" + anyString.charAt(999) + "'");
+
+ +

Les línies anteriors mostren la sortida següent:

+ +
El caràcter a la posició 0   és 'B'
+El caràcter a la posició 1   és 'r'
+El caràcter a la posició 2   és 'a'
+El caràcter a la posició 3   és 'v'
+El caràcter a la posició 4   és 'e'
+El caràcter a la posició 999 és ''
+
+ +

Obtenir caràcters sencers

+ +

El codi següent garanteix obtenir un caràcter sencer, fins i tot quan la cadena contingui caràcters que no formen part del pla bàsic multilingüístic.

+ +
var str = 'A \uD87E\uDC04 Z'; // We could also use a non-BMP character directly
+for (var i = 0, chr; i < str.length; i++) {
+  if ((chr = getWholeChar(str, i)) === false) {
+    continue;
+  }
+  // Adapt this line at the top of each loop, passing in the whole string and
+  // the current iteration and returning a variable to represent the
+  // individual character
+
+  console.log(chr);
+}
+
+function getWholeChar(str, i) {
+  var code = str.charCodeAt(i);
+
+  if (Number.isNaN(code)) {
+    return ''; // Position not found
+  }
+  if (code < 0xD800 || code > 0xDFFF) {
+    return str.charAt(i);
+  }
+
+  // High surrogate (could change last hex to 0xDB7F to treat high private
+  // surrogates as single characters)
+  if (0xD800 <= code && code <= 0xDBFF) {
+    if (str.length <= (i + 1)) {
+      throw 'High surrogate without following low surrogate';
+    }
+    var next = str.charCodeAt(i + 1);
+      if (0xDC00 > next || next > 0xDFFF) {
+        throw 'High surrogate without following low surrogate';
+      }
+      return str.charAt(i) + str.charAt(i + 1);
+  }
+  // Low surrogate (0xDC00 <= code && code <= 0xDFFF)
+  if (i === 0) {
+    throw 'Low surrogate without preceding high surrogate';
+  }
+  var prev = str.charCodeAt(i - 1);
+
+  // (could change last hex to 0xDB7F to treat high private
+  // surrogates as single characters)
+  if (0xD800 > prev || prev > 0xDBFF) {
+    throw 'Low surrogate without preceding high surrogate';
+  }
+  // We can pass over low surrogates now as the second component
+  // in a pair which we have already processed
+  return false;
+}
+
+ +

En l'entorn de l'ECMAScript 2016, que soporta assignació desestructurada, es pot utilitzar el codi següent com a versió alternativa més flexibleenvironment which allows destructured assignment, the following is a more succinct and somewhat more flexible alternative in that it does incrementing for an incrementing variable automatically (if the character warrants it in being a surrogate pair).

+ +
var str = 'A\uD87E\uDC04Z'; // We could also use a non-BMP character directly
+for (var i = 0, chr; i < str.length; i++) {
+  [chr, i] = getWholeCharAndI(str, i);
+  // Adapt this line at the top of each loop, passing in the whole string and
+  // the current iteration and returning an array with the individual character
+  // and 'i' value (only changed if a surrogate pair)
+
+  console.log(chr);
+}
+
+function getWholeCharAndI(str, i) {
+  var code = str.charCodeAt(i);
+
+  if (Number.isNaN(code)) {
+    return ''; // Position not found
+  }
+  if (code < 0xD800 || code > 0xDFFF) {
+    return [str.charAt(i), i]; // Normal character, keeping 'i' the same
+  }
+
+  // High surrogate (could change last hex to 0xDB7F to treat high private
+  // surrogates as single characters)
+  if (0xD800 <= code && code <= 0xDBFF) {
+    if (str.length <= (i + 1)) {
+      throw 'High surrogate without following low surrogate';
+    }
+    var next = str.charCodeAt(i + 1);
+      if (0xDC00 > next || next > 0xDFFF) {
+        throw 'High surrogate without following low surrogate';
+      }
+      return [str.charAt(i) + str.charAt(i + 1), i + 1];
+  }
+  // Low surrogate (0xDC00 <= code && code <= 0xDFFF)
+  if (i === 0) {
+    throw 'Low surrogate without preceding high surrogate';
+  }
+  var prev = str.charCodeAt(i - 1);
+
+  // (could change last hex to 0xDB7F to treat high private surrogates
+  // as single characters)
+  if (0xD800 > prev || prev > 0xDBFF) {
+    throw 'Low surrogate without preceding high surrogate';
+  }
+  // Return the next character instead (and increment)
+  return [str.charAt(i + 1), i + 1];
+}
+
+ +

Fixing charAt() to support non-Basic-Multilingual-Plane (BMP) characters

+ +

While the example above may be more frequently useful for those wishing to support non-BMP characters (since it does not require the caller to know where any non-BMP character might appear), in the event that one does wish, in choosing a character by index, to treat the surrogate pairs within a string as the single characters they represent, one can use the following:

+ +
function fixedCharAt(str, idx) {
+  var ret = '';
+  str += '';
+  var end = str.length;
+
+  var surrogatePairs = /[\uD800-\uDBFF][\uDC00-\uDFFF]/g;
+  while ((surrogatePairs.exec(str)) != null) {
+    var li = surrogatePairs.lastIndex;
+    if (li - 2 < idx) {
+      idx++;
+    } else {
+      break;
+    }
+  }
+
+  if (idx >= end || idx < 0) {
+    return '';
+  }
+
+  ret += str.charAt(idx);
+
+  if (/[\uD800-\uDBFF]/.test(ret) && /[\uDC00-\uDFFF]/.test(str.charAt(idx + 1))) {
+    // Go one further, since one of the "characters" is part of a surrogate pair
+    ret += str.charAt(idx + 1);
+  }
+  return ret;
+}
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES1')}}{{Spec2('ES1')}}Initial definition.
{{SpecName('ES5.1', '#sec-15.5.4.4', 'String.prototype.charAt')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-string.prototype.charat', 'String.prototype.charAt')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-string.prototype.charat', 'String.prototype.charAt')}}{{Spec2('ESDraft')}} 
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

See also

+ +
    +
  • {{jsxref("String.prototype.indexOf()")}}
    • +
  • {{jsxref("String.prototype.lastIndexOf()")}}
    • +
  • {{jsxref("String.prototype.charCodeAt()")}}
    • +
  • {{jsxref("String.prototype.codePointAt()")}}
    • +
  • {{jsxref("String.prototype.split()")}}
    • +
  • {{jsxref("String.fromCodePoint()")}}
    • +
  • JavaScript has a Unicode problem – Mathias Bynens
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/string/concat/index.html b/files/ca/web/javascript/reference/global_objects/string/concat/index.html new file mode 100644 index 0000000000..87cdda3c5e --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/string/concat/index.html @@ -0,0 +1,125 @@ +--- +title: String.prototype.concat() +slug: Web/JavaScript/Referencia/Objectes_globals/String/concat +translation_of: Web/JavaScript/Reference/Global_Objects/String/concat +--- +
{{JSRef}}
+ +

El mètode concat() combina el text de dos o més strings i retorna un nou string.

+ +

Sintaxi

+ +
str.concat(string2, string3[, ..., stringN])
+ +

Paràmetres

+ +
+
string2...stringN
+
Strings que seran concatenats a aquest string.
+
+ +

Descripció

+ +

La funció concat() combina el text d'un o més strings i retorna un nou string. Canvis al text d'un string no afecten l'altre string.

+ +

Exemples

+ +

Utilitzar concat()

+ +

L'exemple següent combina strings en un nou string.

+ +
var hola = 'Hola, ';
+console.log(hola.concat('Kevin', ' tingueu un bon dia.'));
+
+/* Hola, Kevin tingueu un bon dia. */
+
+ +

Rendiment

+ +

Es recomana altament utilitzar els {{jsxref("Operators/Assignment_Operators", "operadors d'assignació", "", 1)}} (+, +=) en comptes del mètode concat(). Vegeu aquest test de rendiment.

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES3')}}{{Spec2('ES3')}}Definició inicial. Implementat a JavaScript 1.2.
{{SpecName('ES5.1', '#sec-15.5.4.6', 'String.prototype.concat')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-string.prototype.concat', 'String.prototype.concat')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Array.prototype.concat()")}}
    • +
  • {{jsxref("Operators/Assignment_Operators", "Operadors d'asssignació", "", 1)}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/string/endswith/index.html b/files/ca/web/javascript/reference/global_objects/string/endswith/index.html new file mode 100644 index 0000000000..83a1201549 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/string/endswith/index.html @@ -0,0 +1,133 @@ +--- +title: String.prototype.endsWith() +slug: Web/JavaScript/Referencia/Objectes_globals/String/endsWith +translation_of: Web/JavaScript/Reference/Global_Objects/String/endsWith +--- +
{{JSRef}}
+ +

El mètode endsWith() method determina si un string acaba amb els caràcters d'un altre string, retornant true o false depenent d'això.

+ +

Sintaxi

+ +
str.endsWith(stringAcercar[, posició])
+ +

Paràmetres

+ +
+
stringAcercar
+
Els caràcters a cercar al final d'aquest string.
+
posició
+
Opcional. Cerca dins aquest string considerant posició com la última posició del string; per defecte rep el valor del tamany total del string.
+
 
+
 
+
+ +

Descripció

+ +

Aquest mètode us permet determinar si un string acaba en un altre string.

+ +

Exemples

+ +

Utilitzar endsWith()

+ +
var str = 'To be, or not to be, that is the question.';
+
+console.log(str.endsWith('question.')); // true
+console.log(str.endsWith('to be'));     // false
+console.log(str.endsWith('to be', 19)); // true
+
+ +

Polyfill

+ +

Aquest mètode va ser afegit a l'especificació ECMAScript i pot no estar disponible encara a totes les implementacions de JavaScript. No obstant, la funció següent emula el comportament de String.prototype.endsWith():

+ +
if (!String.prototype.endsWith) {
+  String.prototype.endsWith = function(searchString, position) {
+      var subjectString = this.toString();
+      if (typeof position !== 'number' || !isFinite(position) || Math.floor(position) !== position || position > subjectString.length) {
+        position = subjectString.length;
+      }
+      position -= searchString.length;
+      var lastIndex = subjectString.indexOf(searchString, position);
+      return lastIndex !== -1 && lastIndex === position;
+  };
+}
+
+ +

Especificacions

+ + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-string.prototype.endswith', 'String.prototype.endsWith')}}{{Spec2('ES6')}}Definició inicial.
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome("41")}}{{CompatGeckoDesktop("17")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatChrome("36")}}{{CompatGeckoMobile("17")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("String.prototype.startsWith()")}} {{experimental_inline}}
    • +
  • {{jsxref("String.prototype.contains()")}} {{experimental_inline}}
    • +
  • {{jsxref("String.prototype.indexOf()")}}
    • +
  • {{jsxref("String.prototype.lastIndexOf()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/string/fixed/index.html b/files/ca/web/javascript/reference/global_objects/string/fixed/index.html new file mode 100644 index 0000000000..069ab4243f --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/string/fixed/index.html @@ -0,0 +1,103 @@ +--- +title: String.prototype.fixed() +slug: Web/JavaScript/Referencia/Objectes_globals/String/fixed +translation_of: Web/JavaScript/Reference/Global_Objects/String/fixed +--- +
{{JSRef}} {{deprecated_header}}
+ +

El mètode fixed() crea un element HTML {{HTMLElement("tt")}} que fa que una cadena es mostri en una font fixed-pitch.

+ +

Sintaxi

+ +
str.fixed()
+ +

Descripció

+ +

El mètode fixed() incrusta una cadena en una etiqueta <tt>: "<tt>cad</tt>".

+ +

Exemples

+ +

Utilitzar fixed()

+ +

L'exemple següent utilitza el mètode fixed per canviar el format d'una cadena:

+ +
var worldString = 'Hello, world';
+console.log(worldString.fixed()); // "<tt>Hello, world</tt>"
+
+ +

Especificacions

+ + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-string.prototype.fixed', 'String.prototype.fixed')}}{{Spec2('ES6')}}Definició inicial. Implementat en JavaScript 1.0. Definit en l'Annex B (normative) per Característiques addiccionals d'ECMAScript per Navegadors Web.
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("String.prototype.bold()")}}
    • +
  • {{jsxref("String.prototype.italics()")}}
    • +
  • {{jsxref("String.prototype.strike()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/string/fontcolor/index.html b/files/ca/web/javascript/reference/global_objects/string/fontcolor/index.html new file mode 100644 index 0000000000..be52cd576b --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/string/fontcolor/index.html @@ -0,0 +1,122 @@ +--- +title: String.prototype.fontcolor() +slug: Web/JavaScript/Referencia/Objectes_globals/String/fontcolor +translation_of: Web/JavaScript/Reference/Global_Objects/String/fontcolor +--- +
{{JSRef}} {{deprecated_header}}
+ +

El mètode fontcolor() crea un element HTML {{HTMLElement("font")}} que fa que una cadena es mostri amb el color font especificat.

+ +
+

Nota d'ús: L'element <font> s'ha eleminitat d'HTML5 i no s'ha de fer servir més. Els desenvolupadors web haurien d'utilitzar les propietats de CSS per aquesta finalitat.

+
+ +

Sintaxi

+ +
str.fontcolor(color)
+ +

Paràmetres

+ +
+
color
+
Una cadena que expressa el color com a un triplet RGB hexadecimal o com una cadena literal. Les cadenes literals de noms de colors es troben enllistades en la referència de colors de CSS.
+
+ +

Descripció

+ +

Si expresseu el color com un triplet RGB hexadecimal, heu de fer servir el format rrggbb. Per example, els valors RGB hexadecimals pel color salmó són vermell=FA, verd=80, i blau=72, de forma que el triplet RGB pel color salmó és "FA8072".

+ +

Exemples

+ +

Utilitzar fontcolor()

+ +

L'exemple següent utilitza el mètode fontcolor() per canviar el color d'una cadena mitjançant la creació d'una cadena amb l'etiqueta HTML <font>.

+ +
var worldString = 'Hola, món';
+
+console.log(worldString.fontcolor('red') +  ' és vermell en aquesta línia');
+// '<font color="red">Hola, món</font> 's vermell en aquesta línia'
+
+console.log(worldString.fontcolor('FF00') + ' és vermell en hexadecimal en aquesta línia');
+// '<font color="FF00">Hola, món</font> és vermell en hexadecimal en aquesta línia'
+
+ +

Amb l'objecte {{domxref("HTMLElement.style", "element.style")}} es pot obtenir l'atribut style de l'element i manipular-lo més genèricament, per exemple:

+ +
document.getElementById('yourElemId').style.color = 'red';
+
+ +

Especificacions

+ + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-string.prototype.fontcolor', 'String.prototype.fontcolor')}}{{Spec2('ES6')}}Definició inicial. Implementat en JavaScript 1.0. Definit en l'Annex B (normative) per Característiques addiccionals d'ECMAScript per Navegadors Web.
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("String.prototype.fontsize()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/string/fontsize/index.html b/files/ca/web/javascript/reference/global_objects/string/fontsize/index.html new file mode 100644 index 0000000000..9f30d124aa --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/string/fontsize/index.html @@ -0,0 +1,121 @@ +--- +title: String.prototype.fontsize() +slug: Web/JavaScript/Referencia/Objectes_globals/String/fontsize +translation_of: Web/JavaScript/Reference/Global_Objects/String/fontsize +--- +
{{JSRef}} {{deprecated_header}}
+ +

El mètode fontsize() crea un element HTML {{HTMLElement("font")}} que causa que una cadena es mostri en el tamany font especificat.

+ +
+

Nota d'ús: L'element <font> s'ha eliminat de l'HTML5 i no s'ha de fer servir més. Els desenvolupadors web haurien de fer servir les propietats de CSS per aquesta finalitat.

+
+ +

Sintaxi

+ +
str.fontsize(mida)
+ +

Paràmetres

+ +
+
mida
+
Un nombre sencer entre 1 i 7, una cadena que representi un nombre sencer amb signe entre 1 i 7.
+
+ +

Descripció

+ +

Quan s'especifica la mida com a un nombre sencer, s'estableix la mida de la str a un de les 7 mides definides. Quan s'especifica la mida com una cadena com pot ser "-2", s'adjusta el tamany font de str en relació ambel tamany establert en l'etiqueta {{HTMLElement("basefont")}}.

+ +

Exemples

+ +

Utilitzar fontsize()

+ +

El següent exemple utilitza mètodes string per canviar la mida de la cadena:

+ +
var worldString = 'Hola, món';
+
+console.log(worldString.small());     // <small>Hola, món</small>
+console.log(worldString.big());       // <big>Hola, món</big>
+console.log(worldString.fontsize(7)); // <font size="7">Hola, món</fontsize>
+
+ +

Amb l'objecte {{domxref("HTMLElement.style", "element.style")}} es pot obtenir el atribut style de l'element i manipular-lo més genèricament, per exemple:

+ +
document.getElementById('yourElemId').style.fontSize = '0.7em';
+
+ +

Especificacions

+ + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-string.prototype.fontsize', 'String.prototype.fontsize')}}{{Spec2('ES6')}}Definició inicial. Implementat en JavaScript 1.0. Definit en l'Annex B (normative) per Característiques Addiccionals d'ECMAScript per Navegadors Web.
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("String.prototype.big()")}}
    • +
  • {{jsxref("String.prototype.small()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/string/fromcharcode/index.html b/files/ca/web/javascript/reference/global_objects/string/fromcharcode/index.html new file mode 100644 index 0000000000..f4e2308bf9 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/string/fromcharcode/index.html @@ -0,0 +1,126 @@ +--- +title: String.fromCharCode() +slug: Web/JavaScript/Referencia/Objectes_globals/String/fromCharCode +translation_of: Web/JavaScript/Reference/Global_Objects/String/fromCharCode +--- +
{{JSRef}}
+ +

El mètode estàtic String.fromCharCode() retorna un string creat a partir de la seqüència de valors Unicode especificada.

+ +

Sintaxi

+ +
String.fromCharCode(num1[, ...[, numN]])
+ +

Paràmetres

+ +
+
num1, ..., numN
+
Una seqüència de nombres que són valors Unicode.
+
+ +

Descripció

+ +

Aquest mètode retorna un string i no un objecte de tipus {{jsxref("String")}}.

+ +

Com que fromCharCode() és un mètode estàtic de {{jsxref("String")}}, sempre s'utilitza com String.fromCharCode() en comptes de com un mètode d'un objecte {{jsxref("String")}} creat.

+ +

Exemples

+ +

Utilitzar fromCharCode()

+ +

L'exemple següent retorna el string "ABC".

+ +
String.fromCharCode(65, 66, 67);  // "ABC"
+
+ +

Fer que funcioni amb valors més grans

+ +

Tot i que la majoria dels valors Unicode es poden representar amb un nombre de 16 bits (tal i com s'esperava mentre s'estava estandaritzant el JavaScript) i es pot emprar fromCharCode() per a retornar un sol caràcter per als valors més comuns (com ara valors UCS-2, que són un subconjunt de l'UTF-16 amb els caràcters més comuns), per a poder manegar TOTS els valors legals Unicode (els quals requereixen fins a 21 bits),  l'ús de només fromCharCode() no és adequat ja que els caràcters de valor més alt utilitzen dos nombres "substituts" (de menor valor) per a formar un sol caràcter. Es pot emprar {{jsxref("String.fromCodePoint()")}} (que forma part de l'esborrant de l'ECMAScript 6) per a retornar el parell de nombres citat i, d'aquesta forma, representar de manera adequada aquests caràcters de valor més alt.

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacionsEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.2.
{{SpecName('ES5.1', '#sec-15.5.3.2', 'StringfromCharCode')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-string.fromcharcodes', 'String.fromCharCode')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("String.fromCodePoint()")}}
    • +
  • {{jsxref("String.prototype.charAt()")}}
    • +
  • {{jsxref("String.prototype.charCodeAt()")}}
    • +
  • {{jsxref("String.prototype.codePointAt()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/string/index.html b/files/ca/web/javascript/reference/global_objects/string/index.html new file mode 100644 index 0000000000..136820a54d --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/string/index.html @@ -0,0 +1,340 @@ +--- +title: String +slug: Web/JavaScript/Referencia/Objectes_globals/String +translation_of: Web/JavaScript/Reference/Global_Objects/String +--- +
{{JSRef("Global_Objects", "String")}}
+ +

Resum

+ +

L'objecte global String és un constructor per a strings, també conegudes com a cadenes de caràcters.

+ +

Sintaxi

+ +

Els literals de tipus Stringpoden tenir les següents formes:

+ +
'string text'
+"string text"
+"中文 español English हिन्दी العربية português বাংলা русский 日本語 ਪੰਜਾਬੀ 한국어 தமிழ்"
+
+ +

A més dels caràcters imprimibles normals, es poden codificar caràcters especials mitjançant la notació d'escapament:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CodiSortida
\0el caràcter NUL
\'cometa simple
\"cometa doble
\\barra invertida
\nlínia nova
\rretorn de carro
\vbarra vertical
\ttabulador
\besborrar
\fform feed
\uXXXXcaràcter amb codificació unicode
\xXXcaràcter amb codificació Latin-1
+ +

O bé utilitzant l'objecte global String de forma directa:

+ +
String(quelcom)
+new String(quelcom)
+
+ +

Paràmetres

+ +
+
quelcom
+
Qualsevol cosa que serà convertida a string.
+
+ +

Descripció

+ +

Les Strings són útils per a emmagatzemar dades que poden ser representades en forma de texte. Algunes de les operacions més emprades en strings són per a obtindre la seva llargada {{jsxref("String.length", "length")}}, per a concatenar-les mitjançant els operadors de strings + i +=, per a comprovar l'existència o localització de substrings amb el mètode {{jsxref("String.prototype.indexOf()", "indexOf()")}}, o bé per a extreure substrings amb el mètode {{jsxref("String.prototype.substring()", "substring()")}}.

+ +

Accés als caràcters

+ +

Hi ha dues formes d'accedir a un caràcter individual emmagatzemat dins un string. El primer és el mètode {{jsxref("String.prototype.charAt()", "charAt()")}}:

+ +
return 'cat'.charAt(1); // retorna "a"
+
+ +

L'altra forma (introduida a ECMAScript 5) és fer anar l'string com si fós un objecte de tipus array, on els caràcters individuals es corresponen a un índex numèric:

+ +
return 'cat'[1]; // retorna "a"
+
+ +

Utilitzar la notació de claus per a esborrar o bé assignar un valor a un caràcter no funcionarà. Les propietats involucrades no són de tipus no-escriptura i no són configurables. (Vegeu {{jsxref("Object.defineProperty()")}} per a més informació).

+ +

Comparar strings

+ +

Els desenvolupadors de C disposen de la funció strcmp() per a comparar strings. A JavaScript senzillament es poden utilitzar els operadors major-que i menor-que

+ +
var a = 'a';
+var b = 'b';
+if (a < b) { // true
+  print(a + ' és menor que ' + b);
+} else if (a > b) {
+  print(a + ' és major que ' + b);
+} else {
+  print(a + ' i ' + b + ' són iguals.');
+}
+
+ +

Es pot obtindre un resultat similar mitjançant el mètode {{jsxref("String.prototype.localeCompare()", "localeCompare()")}}, heredat per les instàncies de String.

+ +

Distinció entre les primitives string i els objectes String

+ +

Cal recalcar que JavaScript distingeix entre objectes de tipus String i valors primitius de tipus string (El mateix succeeix amb {{jsxref("Global_Objects/Boolean", "Boolean")}} i {{jsxref("Global_Objects/Number", "Numbers")}}

+ +

Els literals de tipus string (englobats en cometes simples o dobles) així com strings retornats per crides a l'objecte String en un contexte no constructor (és a dir, sense utilitzar la paraula clau {{jsxref("Operators/new", "new")}}) són strings primitives. JavaScript automàticament converteix primitives a objectes String, de forma que és posible utilitzar mètodes de l'objecte String en strings primitives. En els contextes on s'ha d'invocar un mètode en una primitiva string o es demana la una propietat, JavaScript automàticament embolcallarà la primitiva string amb un objecte String i cridarà el mètode o la propietat corresponent.

+ +
var s_prim = 'foo';
+var s_obj = new String(s_prim);
+
+console.log(typeof s_prim); // Escriu "string"
+console.log(typeof s_obj);  // Escriu "object"
+
+ +

Les primitives string i els objectes String també donen resultats diferents a l'utilitzar {{jsxref("Global_Objects/eval", "eval()")}}. Les primitives passades a eval són considerades codi font; els objectes String es tracten com qualsevol altre objecte, és a dir, retornan l'objecte. Per exemple:

+ +
var s1 = '2 + 2';             // crea una primitiva string
+var s2 = new String('2 + 2'); // crea un objecte String
+console.log(eval(s1));        // escriu el nombre 4
+console.log(eval(s2));        // escriu la string "2 + 2"
+
+ +

És per aquestes raons que el codi pot produïr errors quan trobi objectes String però s'esperès una primitiva string, tot i que de forma general els autors no s'han de preocupar per la distinció.

+ +

Un objecte String sempre es pot convertir en la seva representació primitiva mitjançant el mètode {{jsxref("String.prototype.valueOf()", "valueOf()")}}.

+ +
console.log(eval(s2.valueOf())); // escriu el nombre 4
+
+ +
Nota: Per a una altra posible enfocament quant a string a JavaScript llegiu l'article sobre StringView — una representació de strings basada en arrays de tipatge explícit similar a C.
+ +

Propietats

+ +
+
{{jsxref("String.prototype")}}
+
Permet afegir propietats a un objecte String.
+
+ +
{{jsOverrides("Function", "Properties", "prototype")}}
+ +

Mètodes

+ +
+
{{jsxref("String.fromCharCode()")}}
+
Retorna un string creat a partir de la seqüència de valors Unicode proporcionada.
+
{{jsxref("String.fromCodePoint()")}} {{experimental_inline}}
+
Retorna un string creat a partir de la seqüència de code points proporcionada.
+
{{jsxref("String.raw()")}} {{experimental_inline}}
+
Retorna un string creat a partir de l'string proporcionat sense tindre en compte la codificació.
+
+ +
{{jsOverrides("Function", "Methods", "fromCharCode", "fromCodePoint", "raw")}}
+ +

Mètodes genèrics de String

+ +

Els mètodes de les instàncies de String també estan disponibles a Firefox a partir del JavaScript 1.6 (tot i que no formen part de l'standard ECMAScript) a l'objecte String, així es poden aplicar els mètodes de String a qualsevol objecte:

+ +
var num = 15;
+console.log(String.replace(num, /5/, '2'));
+
+ +

{{jsxref("Global_Objects/Array", "Generics", "#Array_generic_methods", 1)}} també estàn disponibles als mètodes de {{jsxref("Global_Objects/Array", "Array")}}.

+ +

A continuació es mostra un shim per a donar suport als navegadors que no ho suporten:

+ +
/*globals define*/
+// Assumes all supplied String instance methods already present
+// (one may use shims for these if not available)
+(function() {
+  'use strict';
+
+  var i,
+    // We could also build the array of methods with the following, but the
+    //   getOwnPropertyNames() method is non-shimable:
+    // Object.getOwnPropertyNames(String).filter(function(methodName) {
+    //   return typeof String[methodName] === 'function';
+    // });
+    methods = [
+      'quote', 'substring', 'toLowerCase', 'toUpperCase', 'charAt',
+      'charCodeAt', 'indexOf', 'lastIndexOf', 'startsWith', 'endsWith',
+      'trim', 'trimLeft', 'trimRight', 'toLocaleLowerCase',
+      'toLocaleUpperCase', 'localeCompare', 'match', 'search',
+      'replace', 'split', 'substr', 'concat', 'slice'
+    ],
+    methodCount = methods.length,
+    assignStringGeneric = function(methodName) {
+      var method = String.prototype[methodName];
+      String[methodName] = function(arg1) {
+        return method.apply(arg1, Array.prototype.slice.call(arguments, 1));
+      };
+    };
+
+  for (i = 0; i < methodCount; i++) {
+    assignStringGeneric(methods[i]);
+  }
+}());
+
+ +

Instàncies de String

+ +

Propietats

+ +
{{page('/ca/docs/Web/JavaScript/Reference/Global_Objects/String/prototype', 'Properties')}}
+ +

Mètodes

+ +

Mètodes no relacionats amb HTML

+ +
{{page('/ca/docs/Web/JavaScript/Reference/Global_Objects/String/prototype', 'Methods_unrelated_to_HTML')}}
+ +

Mètodes d'embolcall de HTML

+ +
{{page('/ca/docs/Web/JavaScript/Reference/Global_Objects/String/prototype', 'HTML_wrapper_methods')}}
+ +

Exemples

+ +

Exemple: Conversió de strings

+ +

És posible utilitzar String com a una alternativa "més segura" de {{jsxref("String.prototype.toString()","toString()")}}, ja que tot i que normalment també crida el mètode toString() subjacent, també funciona per a {{jsxref("Global_Objects/null", "null")}} i {{jsxref("Global_Objects/undefined", "undefined")}}. Per exemple:

+ +
var outputStrings = [];
+for (var i = 0, n = inputValues.length; i < n; ++i) {
+  outputStrings.push(String(inputValues[i]));
+}
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
ECMAScript 1a EdicióStandardDefinició inicial.
{{SpecName('ES5.1', '#sec-15.5', 'String')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-string-objects', 'String')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome("0.2")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ + diff --git a/files/ca/web/javascript/reference/global_objects/string/indexof/index.html b/files/ca/web/javascript/reference/global_objects/string/indexof/index.html new file mode 100644 index 0000000000..9b08b04ded --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/string/indexof/index.html @@ -0,0 +1,190 @@ +--- +title: String.prototype.indexOf() +slug: Web/JavaScript/Referencia/Objectes_globals/String/indexOf +translation_of: Web/JavaScript/Reference/Global_Objects/String/indexOf +--- +
{{JSRef}}
+ +

El mètode indexOf() retorna la primera posició dins el {{jsxref("String")}} des del que es crida a la qual es troba el valor proporcionat. Retorna -1 si no es troba el valor donat.

+ +

Sintaxi

+ +
str.indexOf(valorACercar[, posicioInicial])
+ +

Paràmetres

+ +
+
valorACercar
+
Un string que representa el valor a cercar.
+
posicioInicial {{optional_inline}}
+
La posició a partir de la qual es cercarà dins la cadena. Pot ser qualsevol nombre sencer. El valor per defecte és 0, indicant que es cercarà a tota la cadena. Si posicioInicial < 0 es cercarà a tota la cadena. Si posicioInicial >= str.length, no es cercarà a la cadena i es retornarà -1 automàticament. Si valorACercar és una cadena buida es retornarà str.length.
+
+ +

Descripció

+ +

Els caràcters de la cadena s'indexen d'esquerra a dreta. La posició del primer caràcter és 0, i la posició de l'últim caràcter d'una cadena amb nom stringName és  stringName.length - 1.

+ +
'Blue Whale'.indexOf('Blue');     // returns  0
+'Blue Whale'.indexOf('Blute');    // returns -1
+'Blue Whale'.indexOf('Whale', 0); // returns  5
+'Blue Whale'.indexOf('Whale', 5); // returns  5
+'Blue Whale'.indexOf('', 9);      // returns  9
+'Blue Whale'.indexOf('', 10);     // returns 10
+'Blue Whale'.indexOf('', 11);     // returns 10
+
+ +

Distinció entre majúscules i minúscules

+ +

El mètode indexOf() distingeix entre majúscules i minúscules. Per exemple, l'expressió següent retorna -1:

+ +
'Blue Whale'.indexOf('blue'); // retorna -1
+
+ +

Comprovar troballes

+ +

Cal destacar que '0' no s'evalua a true i que '-1' no s'evalua a false. Tenim llavors que al comprovar si una cadena específica existeix dins una altra, la forma correcta de comprovar-ho seria:

+ +
'Blue Whale'.indexOf('Blue') !== -1; // true
+'Blue Whale'.indexOf('Bloe') !== -1; // false
+
+ +

Exemples

+ +

Utilitzar indexOf() i lastIndexOf()

+ +

L'exemple següent utilitza indexOf() i {{jsxref("String.prototype.lastIndexOf()", "lastIndexOf()")}} per a trobar valors dins la cadena "Brave new world".

+ +
var anyString = 'Brave new world';
+
+console.log('La posicó de la primera w des del principi és ' + anyString.indexOf('w'));
+// mostra 8
+console.log('La posició de la primera w des del final és ' + anyString.lastIndexOf('w'));
+// mostra 10
+
+console.log('La posicó de "new" des del principi és ' + anyString.indexOf('new'));
+// mostra 6
+console.log('La posició de "new" des del final és ' + anyString.lastIndexOf('new'));
+// mostra 6
+
+ +

indexOf() i distinció entre majúscules i minúscules

+ +

L'exemple següent definteix dos variables de tipus cadena. The following example defines two string variables. The variables contain the same string except that the second string contains uppercase letters. The first {{domxref("console.log()")}} method displays 19. But because the indexOf() method is case sensitive, the string "cheddar" is not found in myCapString, so the second console.log() method displays -1.

+ +
var myString    = 'brie, pepper jack, cheddar';
+var myCapString = 'Brie, Pepper Jack, Cheddar';
+
+console.log('myString.indexOf("cheddar") is ' + myString.indexOf('cheddar'));
+// logs 19
+console.log('myCapString.indexOf("cheddar") is ' + myCapString.indexOf('cheddar'));
+// logs -1
+
+ +

Using indexOf() to count occurrences of a letter in a string

+ +

The following example sets count to the number of occurrences of the letter e in the string str:

+ +
var str = 'To be, or not to be, that is the question.';
+var count = 0;
+var pos = str.indexOf('e');
+
+while (pos !== -1) {
+  count++;
+  pos = str.indexOf('e', pos + 1);
+}
+
+console.log(count); // displays 4
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES1')}}{{Spec2('ES1')}}Initial definition.
{{SpecName('ES5.1', '#sec-15.5.4.7', 'String.prototype.indexOf')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-string.prototype.indexof', 'String.prototype.indexOf')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-string.prototype.indexof', 'String.prototype.indexOf')}}{{Spec2('ESDraft')}} 
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

See also

+ +
    +
  • {{jsxref("String.prototype.charAt()")}}
    • +
  • {{jsxref("String.prototype.lastIndexOf()")}}
    • +
  • {{jsxref("String.prototype.split()")}}
    • +
  • {{jsxref("Array.prototype.indexOf()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/string/italics/index.html b/files/ca/web/javascript/reference/global_objects/string/italics/index.html new file mode 100644 index 0000000000..f38a8f9579 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/string/italics/index.html @@ -0,0 +1,104 @@ +--- +title: String.prototype.italics() +slug: Web/JavaScript/Referencia/Objectes_globals/String/italics +translation_of: Web/JavaScript/Reference/Global_Objects/String/italics +--- +
{{JSRef}} {{deprecated_header}}
+ +

El mètode italics() crea un element HTML {{HTMLElement("i")}} que converteix una cadena en format itàlic.

+ +

Sintaxi

+ +
str.italics()
+ +

Descripció

+ +

El mètode italics() incrusta una cadena en una etiqueta <i>: "<i>str</i>".

+ +

Exemples

+ +

Utilitzar italics()

+ +

L'exemple següent utilitza mètodes string per canviar el format de la cadena:

+ +
var worldString = 'Hola, món'; console.log(worldString.blink());  // Hello, world
+console.log(worldString.bold());  // Hola, món
+console.log(worldString.italics()); //Hola, món
+console.log(worldString.strike());  // Hola, món
+ +

Especificacions

+ + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-string.prototype.italics', 'String.prototype.italics')}}{{Spec2('ES6')}}Definició inicial. Implemtat en JavaScript 1.0. Definit en l'Annex B (normative) per Caracerístiques Adiccionals d'ECMAScript per navegadors Web.
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("String.prototype.blink()")}}
    • +
  • {{jsxref("String.prototype.bold()")}}
    • +
  • {{jsxref("String.prototype.strike()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/string/length/index.html b/files/ca/web/javascript/reference/global_objects/string/length/index.html new file mode 100644 index 0000000000..63a3114d2d --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/string/length/index.html @@ -0,0 +1,121 @@ +--- +title: String.length +slug: Web/JavaScript/Referencia/Objectes_globals/String/length +translation_of: Web/JavaScript/Reference/Global_Objects/String/length +--- +
{{JSRef("Global_Objects", "String")}}
+ +

Resum

+ +

La propietat length representa la longitud d'una cadena de caràcters.

+ +

Sintaxi

+ +
str.length
+ +

Descripció

+ +

Aquesta propietat retorna el nombre d'unitats de codi en un string. {{interwiki("wikipedia", "UTF-16")}}, el format de string utilitzar a JavaScript, utilitza un únic codi de 16 bits per a representar els caràcters més comuns, però necessita dos unitats de codi per a caràcters menys comuns, així que és possible que el valor retornat per length no encaixi amb el nombre de caràcters reals a la cadena de caràcters.

+ +

Per a una cadena buida, length és 0.

+ +

La propietat estàtica String.length retorna el valor 1.

+ +

Exemples

+ +

Exemple: Ús bàsic

+ +
var x = 'Mozilla';
+var empty = '';
+
+console.log('Mozilla té ' + x.length + ' unitats de codi');
+/* "Mozilla té 7 unitats de codi" */
+
+console.log('La string buida té una longitud de ' + empty.length);
+/* "La string buida té una longitud de 0" */
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacionsEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.5.5.1', 'String.prototype.length')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-properties-of-string-instances-length', 'String.prototype.length')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ + diff --git a/files/ca/web/javascript/reference/global_objects/string/link/index.html b/files/ca/web/javascript/reference/global_objects/string/link/index.html new file mode 100644 index 0000000000..efe1385ddc --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/string/link/index.html @@ -0,0 +1,119 @@ +--- +title: String.prototype.link() +slug: Web/JavaScript/Referencia/Objectes_globals/String/link +translation_of: Web/JavaScript/Reference/Global_Objects/String/link +--- +
{{JSRef}}
+ +

El mètode link() crea un element HTML {{HTMLElement("a")}} que causa que una cadena es mostri com un enllaç hipertext a una altra URL.

+ +

Sintaxi

+ +
str.link(url)
+ +

Paràmetres

+ +
+
url
+
Una cadena que especifica l'atribut href de l'etiqueta <a>: hauria de ser una URL vàlida (relativa o absoluta), amb qualsevols caràcters escapats & com &amp;, i qualsevol caràcter "  escapat com &quot;.
+
+ +

Descripció

+ +

Use the link() method to create an HTML snippet for a hypertext link. The returned string can then be added to the document via {{domxref("document.write()")}} or {{domxref("element.innerHTML")}}.

+ +

Links created with the link() method become elements in the links array of the document object. See {{domxref("document.links")}}.

+ +

Exemples

+ +

Utilitzar link()

+ +

L'exemple següent mostra la paraula "MDN" com a un enllaç hypertext lque retorna a l'usuari a la xarxa de Mozilla Developer.

+ +
var hotText = 'MDN';
+var URL = 'https://developer.mozilla.org/';
+
+console.log('Click to return to ' + hotText.link(URL));
+// Click to return to <a href="https://developer.mozilla.org/">MDN</a>
+
+ +

Especificacions

+ + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-string.prototype.link', 'String.prototype.link')}}{{Spec2('ES6')}}Definició inicial. Implementat en JavaScript 1.0. Definit en l'Annex B (normative) per Característiques Addiccionals d'ECMAScript per Navegadors Web.
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Notes específiques Gecko

+ +
    +
  • Starting Gecko 17.0 {{geckoRelease("17")}} the " (quotation mark) is now automatically replaced by its HTML reference character &quot; in the url parameter.
    • +
+ +

Vegeu també

+ +
    +
  • {{jsxref("String.prototype.anchor()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/string/normalize/index.html b/files/ca/web/javascript/reference/global_objects/string/normalize/index.html new file mode 100644 index 0000000000..7a6bcef500 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/string/normalize/index.html @@ -0,0 +1,154 @@ +--- +title: String.prototype.normalize() +slug: Web/JavaScript/Referencia/Objectes_globals/String/normalize +translation_of: Web/JavaScript/Reference/Global_Objects/String/normalize +--- +
{{JSRef}}
+ +

El mètode normalize() retorna la Forma Normalitzada en Unicode d'un string donat (si el valor passat no és un string, es convertirà a string primer).

+ +

Sintaxi

+ +
str.normalize([forma])
+ +

Paràmetres

+ +
+
forma
+
Una de les opcions "NFC", "NFD", "NFKC", o "NFKD", que determina quina Forma de Normalització Unicode es farà anar. Si s'omet o es passa {{jsxref("undefined")}} com a paràmetre, s'utilitzarà "NFC" per defecte. +
    +
  • NFC — Normalization Form Canonical Composition.
    • +
  • NFD — Normalization Form Canonical Decomposition.
    • +
  • NFKC — Normalization Form Compatibility Composition.
    • +
  • NFKD — Normalization Form Compatibility Decomposition.
    • +
+
+
+ +

Errors llençats

+ +
+
{{jsxref("RangeError")}}
+
Es llença un {{jsxref("RangeError")}} si forma no és un dels valors especificats adalt.
+
+ +

Descripció

+ +

El mètode normalize() retorna la Forma Normalitzada Unicode d'un string. No afecta el propi valor del string passat sino que en retorna un de nou.

+ +

Exemples

+ +

Utilitzar normalize()

+ +
// String inicial
+
+// U+1E9B: LLETRA S PETITA DEL LLATÍ AMB UN PUNT A SOBRE
+// U+0323: COMBINACIÓ AMB EL PUNT A SOTA
+var str = '\u1E9B\u0323';
+
+
+// Canonically-composed form (NFC)
+
+// U+1E9B: LLETRA S PETITA DEL LLATÍ AMB UN PUNT A SOBRE
+// U+0323: COMBINACIÓ AMB EL PUNT A SOTA
+str.normalize('NFC'); // '\u1E9B\u0323'
+str.normalize();      // el mateix que a sobre
+
+
+// Canonically-decomposed form (NFD)
+
+// U+017F: LLETRA S PETITA DEL LLATÍ AMB UN PUNT A SOBRE
+// U+0323: COMBINACIÓ AMB EL PUNT A SOTA
+// U+0307: COMBINACIÓ AMB EL PUNT A SOBRE
+str.normalize('NFD'); // '\u017F\u0323\u0307'
+
+
+// Compatibly-composed (NFKC)
+
+// U+1E69: LLETRA S PETITA DEL LLATÍ AMB UN PUNT A SOBRE
+str.normalize('NFKC'); // '\u1E69'
+
+
+// Compatibly-decomposed (NFKD)
+
+// U+0073: LLETRA S PETITA DEL LLATÍ
+// U+0323: COMBINACIÓ AMB EL PUNT A SOTA
+// U+0307: COMBINACIÓ AMB EL PUNT A SOBRE
+str.normalize('NFKD'); // '\u0073\u0323\u0307'
+
+ +

Especificacions

+ + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-string.prototype.normalize', 'String.prototype.normalize')}}{{Spec2('ES6')}}Definició inicial.
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome("34")}}{{CompatGeckoDesktop("31")}}{{CompatIE("11")}}{{CompatVersionUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatChrome("34")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Vegeu també

+ + diff --git a/files/ca/web/javascript/reference/global_objects/string/small/index.html b/files/ca/web/javascript/reference/global_objects/string/small/index.html new file mode 100644 index 0000000000..761797bdda --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/string/small/index.html @@ -0,0 +1,110 @@ +--- +title: String.prototype.small() +slug: Web/JavaScript/Referencia/Objectes_globals/String/small +translation_of: Web/JavaScript/Reference/Global_Objects/String/small +--- +
{{JSRef}} {{deprecated_header}}
+ +

El mètode small() crea un element HTML {{HTMLElement("small")}} que causa que una cadena es mostri amb una font petita.

+ +

Sintaxi

+ +
str.small()
+ +

Descripció

+ +

El mètode small() incrusta una adena en una etiqueta <small>: "<small>str</small>".

+ +

Exemples

+ +

Utilitzar small()

+ +

L'exemple següent utilitza mètodes string per canviar la mida d'una cadena:

+ +
var worldString = 'Hola, món';
+
+console.log(worldString.small());     // <small>Hola, món</small>
+console.log(worldString.big());       // <big>Hola, món</big>
+console.log(worldString.fontsize(7)); // <font size="7">Hola, món</fontsize>
+
+ +

Amb l'objecte {{domxref("HTMLElement.style", "element.style")}} es pot obtenir l'atribut style  d'un element i manipular-lo més genèricament. Per exemple:

+ +
document.getElementById('yourElemId').style.fontSize = '0.7em';
+
+ +

Especificacions

+ + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-string.prototype.small', 'String.prototype.small')}}{{Spec2('ES6')}}Definició inicial. Implementat en JavaScript 1.0. Definit en l'Annex B (normative) per Característiques Addiccionals d'ECMAScript per Navegadors Web.
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("String.prototype.fontsize()")}}
    • +
  • {{jsxref("String.prototype.big()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/string/startswith/index.html b/files/ca/web/javascript/reference/global_objects/string/startswith/index.html new file mode 100644 index 0000000000..ca25398d51 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/string/startswith/index.html @@ -0,0 +1,128 @@ +--- +title: String.prototype.startsWith() +slug: Web/JavaScript/Referencia/Objectes_globals/String/startsWith +translation_of: Web/JavaScript/Reference/Global_Objects/String/startsWith +--- +
{{JSRef}}
+ +

El mètode startsWith() determina si un string comença amb els caràcters d'un altre string, retornant true o false depenent d'això.

+ +

Sintaxi

+ +
str.startsWith(stringAcercar[, posició])
+ +

Paràmetres

+ +
+
stringAcercar
+
Els caràcters a cercar al començament d'aquest string.
+
posició
+
Opcional. La posició dins el string a la qual es començarà a cercar per a trobar stringAcercar; per defecte és 0.
+
+ +

Descripció

+ +

Aquest mètode us permet determinar si un string comença amb un altre string.

+ +

Exemples

+ +

Utilitzar startsWith()

+ +
var str = 'To be, or not to be, that is the question.';
+
+console.log(str.startsWith('To be'));         // true
+console.log(str.startsWith('not to be'));     // false
+console.log(str.startsWith('not to be', 10)); // true
+
+ +

Polyfill

+ +

Aquest mètode va ser afegit a l'especificació ECMAScript i pot no estar disponible encara a totes les implementacions de JavaScript. No obstant, la funció següent emula el comportament de String.prototype.startsWith():

+ +
if (!String.prototype.startsWith) {
+  String.prototype.startsWith = function(searchString, position) {
+    position = position || 0;
+    return this.indexOf(searchString, position) === position;
+  };
+}
+
+ +

Trobareu una funció Polyfill més robusta i optimitzada al GitHub de Mathias Bynens.

+ +

Especificacions

+ + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-string.prototype.startswith', 'String.prototype.startsWith')}}{{Spec2('ES6')}}Definició inicial.
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome("41")}}{{CompatGeckoDesktop("17")}}{{CompatNo}}{{CompatChrome("41")}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatChrome("36")}}{{CompatGeckoMobile("17")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("String.prototype.endsWith()")}} {{experimental_inline}}
    • +
  • {{jsxref("String.prototype.includes()")}} {{experimental_inline}}
    • +
  • {{jsxref("String.prototype.indexOf()")}}
    • +
  • {{jsxref("String.prototype.lastIndexOf()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/string/sub/index.html b/files/ca/web/javascript/reference/global_objects/string/sub/index.html new file mode 100644 index 0000000000..0b512d038e --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/string/sub/index.html @@ -0,0 +1,109 @@ +--- +title: String.prototype.sub() +slug: Web/JavaScript/Referencia/Objectes_globals/String/sub +translation_of: Web/JavaScript/Reference/Global_Objects/String/sub +--- +
{{JSRef}} {{deprecated_header}}
+ +

El mètode sub() crea un element HTML {{HTMLElement("sub")}} que fa que una cadena es mostri com a subíndex.

+ +

Sintaxi

+ +
str.sub()
+ +

Descripció

+ +

El mètode sub() incrusta una cadena a una etiqueta <sub>: "<sub>str</sub>".

+ +

Exemples

+ +

Utilitzar els mètodes sub() i sup()

+ +

El codi següent utiltza els mètodes sub() i {{jsxref("String.prototype.sup()", "sup()")}} per donar format a una cadena:

+ +
var superText="superíndex";
+var subText="subíndex";
+
+console.log("Així es com es veu un " + superText.sup());
+// Així es com es veu un <sup>superíndex</sup>.
+
+console.log("Així es com es veu un " + subText.sub());
+// Així es com es veu un <sub>subíndex</sub>.
+
+ +

Especificacions

+ + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-string.prototype.sub', 'String.prototype.sub')}}{{Spec2('ES6')}} +

Definició inicial. Implementat en JavaScript 1.0. Definit en l'Annex B (normative) per a Característiques Addicicionals d'ECMAScript per Navegadors Web.

+
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("String.prototype.sup()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/string/substr/index.html b/files/ca/web/javascript/reference/global_objects/string/substr/index.html new file mode 100644 index 0000000000..5fdb1f03b4 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/string/substr/index.html @@ -0,0 +1,156 @@ +--- +title: String.prototype.substr() +slug: Web/JavaScript/Referencia/Objectes_globals/String/substr +translation_of: Web/JavaScript/Reference/Global_Objects/String/substr +--- +
{{JSRef}}
+ +

El mètode substr() retorna els caràcters d'una cadena començant per la posició especificada fins al nombre especificat de caràcters.

+ +

Sintaxi

+ +
str.substr(començament[, llargària])
+ +

Paràmetres

+ +
+
començament
+
Lloc des d'on es comença a extraure els caràcters. Si es dóna un nombre negatiu, se'l tracta com strLength + començament on strLength és la llargària de al cadena (per exemple, si començament és -3 se'l tracta com strLength - 3.)
+
llargària
+
Opcional. El nombre de caràcter per extraure.
+
+ +

Descripció

+ +

començament is a character index. L'índex del primer caràcter és 0, i l'índex de l'últim caràcter és 1 menys que la llargària de la cadena. substr() comença extraient caràcters a començament i recull els caràcters llargària (llevat que primer s'arribi al final de la cadena, en aquest cas en retornaria menys).

+ +

Si començament és positivu i més gran o igual que la llargària de la cadena, substr() retornarà una cadena buida.

+ +

SI començament és negatiu, substr() l'utilitza com un índex de caràcter des del final de la cadena. Si començament és negatiu i  abs(comença,ent) és més gran que la llargària de la cadena, substr() utilitza 0 com a índex d'inici. Nota: El maneig de valors negatius de l'argument començament no està suportat per Microsoft JScript.

+ +

Si llargària és 0 o negatiu, substr() retorna una cadena buida. Si llargària s'omet, substr() extreu els caràcter fins al final de la cadena.

+ +

Exemples

+ +

Utilitzar substr()

+ +
var str = 'abcdefghij';
+
+console.log('(1, 2): '   + str.substr(1, 2));   // '(1, 2): bc'
+console.log('(-3, 2): '  + str.substr(-3, 2));  // '(-3, 2): hi'
+console.log('(-3): '     + str.substr(-3));     // '(-3): hij'
+console.log('(1): '      + str.substr(1));      // '(1): bcdefghij'
+console.log('(-20, 2): ' + str.substr(-20, 2)); // '(-20, 2): ab'
+console.log('(20, 2): '  + str.substr(20, 2));  // '(20, 2): '
+
+ +

Polyfill

+ +

Microsoft's JScript no suporta valors negatius per l'índex d'inici. Si desitjes utilitzar aquesta característica, pots utilitzar el codi de compatibilitat següent per evitar aquest error:

+ +
// només s'executa quan la funció substr() està trencada
+if ('ab'.substr(-1) != 'b') {
+  /**
+   *  Obtenir la subcadena d'una cadena
+   *  @param  {integer}  start   on comença la subcadena
+   *  @param  {integer}  length  quants caràcters s'han de retornar
+   *  @return {string}
+   */
+  String.prototype.substr = function(substr) {
+    return function(start, length) {
+      // crida el mètode original
+      return substr.call(this,
+      	// Si ens dóna un començament negatiu, calcular quant es des de l'inici de la cadena
+        // adjustar el paràmetre start per valor negatiu
+        start < 0 ? this.length + start : start,
+        length)
+    }
+  }(String.prototype.substr);
+}
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES3')}}{{Spec2('ES3')}}Definit en l'Annex B de Compatibilitat (informative). Implementat en JavaScript 1.0.
{{SpecName('ES5.1', '#sec-B.2.3', 'String.prototype.substr')}}{{Spec2('ES5.1')}}Definit en l'Annex B de Compatibilitat (informative)
{{SpecName('ES6', '#sec-string.prototype.substr', 'String.prototype.substr')}}{{Spec2('ES6')}}Definit en l'Annex B (normative) per Característiques addiccionals d'ECMAScript per Navegadors Web
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("String.prototype.slice()")}}
    • +
  • {{jsxref("String.prototype.substring()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/string/sup/index.html b/files/ca/web/javascript/reference/global_objects/string/sup/index.html new file mode 100644 index 0000000000..24b46c88ce --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/string/sup/index.html @@ -0,0 +1,107 @@ +--- +title: String.prototype.sup() +slug: Web/JavaScript/Referencia/Objectes_globals/String/sup +translation_of: Web/JavaScript/Reference/Global_Objects/String/sup +--- +
{{JSRef}} {{deprecated_header}}
+ +

El mètode sup() crea un element HTML {{HTMLElement("sup")}} que causa que la cadena es mostri com un superíndex.

+ +

Sintaxi

+ +
str.sup()
+ +

Descripció

+ +

El mètode sup() incrusta una cadena en l'etiqueta <sup>:"<sup>str</sup>".

+ +

Exemples

+ +

Utilitzar els mètodes sub() i sup()

+ +

L'exemple següent utilitza els mètodes {{jsxref("String.prototype.sub()", "sub()")}} i sup() per formatejar la cadena:

+ +
var superText = 'superíndex';
+var subText = 'subíndex';
+
+console.log('This is what a ' + superText.sup());
+// "Així es com es veu un <sup>superíndex</sup>."
+
+console.log('This is what a ' + subText.sub());
+// "Així es com es veu un <sub>subíndex</sub>."
+
+ +

Especificacions

+ + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-string.prototype.sup', 'String.prototype.sup')}}{{Spec2('ES6')}}Definició inicial. Implementat en JavaScript 1.0. Definit en l'Annex B (normative) per a Característiques Addicicionals d'ECMAScript per Navegadors Web.
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("String.prototype.sub()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/string/tolocalelowercase/index.html b/files/ca/web/javascript/reference/global_objects/string/tolocalelowercase/index.html new file mode 100644 index 0000000000..c138197bc1 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/string/tolocalelowercase/index.html @@ -0,0 +1,110 @@ +--- +title: String.prototype.toLocaleLowerCase() +slug: Web/JavaScript/Referencia/Objectes_globals/String/toLocaleLowerCase +translation_of: Web/JavaScript/Reference/Global_Objects/String/toLocaleLowerCase +--- +
{{JSRef}}
+ +

El mètode toLocaleLowerCase() retorna el valor del string que fa la crida convertit a minúscules , tot seguint les directrius locals específiques de conversió a minúscules.

+ +

Sintaxi

+ +
str.toLocaleLowerCase()
+ +

Descripció

+ +

El mètode toLocaleLowerCase() retorna el valor del string que fa la crida convertit a minúscules , tot seguint les directrius locals específiques de conversió a minúscules.El mètode toLocaleLowerCase() retorna el valor del string que fa la crida convertit a minúscules , tot seguint les directrius locals específiques de conversió a minúscules. En la majoria dels casos, la crida a aquest mètode produirà un resultat similar a la del mètode {{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}}, però per a algunes localitzacions, com ara el Turc, en les quals el pas de majúscules a minúscules o de minúscules a majúscules no segueix les assignacions per defecte del Unicode, el resultat pot diferir.

+ +

Exemples

+ +

Utilitzar toLocaleLowerCase()

+ +
console.log('ALFABET'.toLocaleLowerCase()); // 'alfabet'
+
+ +

Especifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES3')}}{{Spec2('ES3')}}Definició inicial. Implementat a JavaScript 1.2.
{{SpecName('ES5.1', '#sec-15.5.4.17', 'String.prototype.toLocaleLowerCase')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-string.prototype.tolocalelowercase', 'String.prototype.toLocaleLowerCase')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("String.prototype.toLocaleUpperCase()")}}
    • +
  • {{jsxref("String.prototype.toLowerCase()")}}
    • +
  • {{jsxref("String.prototype.toUpperCase()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/string/tolocaleuppercase/index.html b/files/ca/web/javascript/reference/global_objects/string/tolocaleuppercase/index.html new file mode 100644 index 0000000000..8f7b2aa716 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/string/tolocaleuppercase/index.html @@ -0,0 +1,110 @@ +--- +title: String.prototype.toLocaleUpperCase() +slug: Web/JavaScript/Referencia/Objectes_globals/String/toLocaleUpperCase +translation_of: Web/JavaScript/Reference/Global_Objects/String/toLocaleUpperCase +--- +
{{JSRef}}
+ +

El mètode toLocaleUpperCase() retorna el valor del string que fa la crida convertit a majúscules, tot seguint les directrius locals específiques de conversió a majúscules.

+ +

Sintaxi

+ +
str.toLocaleUpperCase()
+ +

Descripció

+ +

El mètode toLocaleUpperCase() retorna el valor del string que fa la crida convertit a majúscules, tot seguint les directrius locals específiques de conversió a majúscules. toLocaleUpperCase() no afecta el valor del string que fa la crida sino que en retorna un de nou. En la majoria dels casos, la crida a aquest mètode produirà un resultat similar a la del mètode {{jsxref("String.prototype.toUpperCase()", "toUpperCase()")}}, però per a algunes localitzacions, com ara el Turc, en les quals el pas de majúscules a minúscules o de minúscules a majúscules no segueix les assignacions per defecte del Unicode, el resultat pot diferir.

+ +

Exemples

+ +

Utilitzar toLocaleUpperCase()

+ +
console.log('alfabet'.toLocaleUpperCase()); // 'ALFABET'
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES3')}}{{Spec2('ES3')}}Definició inicial. Implementat a JavaScript 1.2.
{{SpecName('ES5.1', '#sec-15.5.4.19', 'String.prototype.toLocaleUpperCase')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-string.prototype.tolocaleuppercase', 'String.prototype.toLocaleUpperCase')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("String.prototype.toLocaleLowerCase()")}}
    • +
  • {{jsxref("String.prototype.toLowerCase()")}}
    • +
  • {{jsxref("String.prototype.toUpperCase()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/string/tolowercase/index.html b/files/ca/web/javascript/reference/global_objects/string/tolowercase/index.html new file mode 100644 index 0000000000..7147d0ea0d --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/string/tolowercase/index.html @@ -0,0 +1,111 @@ +--- +title: String.prototype.toLowerCase() +slug: Web/JavaScript/Referencia/Objectes_globals/String/toLowerCase +translation_of: Web/JavaScript/Reference/Global_Objects/String/toLowerCase +--- +
{{JSRef}}
+ +

El mètode toLowerCase() retorna  el valor del string que fa la crida convertit a majúscules.
+  

+ +

Sintaxi

+ +
str.toLowerCase()
+ +

Descripció

+ +

El mètode toLowerCase() retorna  el valor del string que fa la crida convertit a majúscules. toLowerCase() no afecta el valor del string que fa la crida sino que en retorna un de nou.

+ +

Exemples

+ +

Utilitzar toLowerCase()

+ +
console.log('ALFABET'.toLowerCase()); // 'alfabet'
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacionsEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.5.4.16', 'String.prototype.toLowerCase')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-string.prototype.tolowercase', 'String.prototype.toLowerCase')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("String.prototype.toLocaleLowerCase()")}}
    • +
  • {{jsxref("String.prototype.toLocaleUpperCase()")}}
    • +
  • {{jsxref("String.prototype.toUpperCase()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/string/tostring/index.html b/files/ca/web/javascript/reference/global_objects/string/tostring/index.html new file mode 100644 index 0000000000..11f2555a2f --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/string/tostring/index.html @@ -0,0 +1,113 @@ +--- +title: String.prototype.toString() +slug: Web/JavaScript/Referencia/Objectes_globals/String/toString +translation_of: Web/JavaScript/Reference/Global_Objects/String/toString +--- +
{{JSRef}}
+ +

El mètode toString() retorna un string que representa l'objecte especificat.

+ +

Sintaxi

+ +
str.toString()
+ +

Descripció

+ +

L'objecte {{jsxref("String")}} sobreescriu el mètode toString() de l'objecte {{jsxref("Object")}}; no hereta {{jsxref("Object.prototype.toString()")}}. Per a objectes {{jsxref("String")}}, el mètode toString() retorna un string que representa l'objecte i és el mateix que el que el retornat pel mètode {{jsxref("String.prototype.valueOf()")}}.

+ +

Exemples

+ +

Utilitzar toString()

+ +

L'exemple següent mostra el valor d'un objecte {{jsxref("String")}}:

+ +
var x = new String('Hello world');
+
+console.log(x.toString()); // mostra 'Hello world'
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES3')}}{{Spec2('ES3')}}Definició inicial. Implementat a JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.5.4.2', 'String.prototype.toString')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-string.prototype.tostring', 'String.prototype.toString')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Object.prototype.toSource()")}}
    • +
  • {{jsxref("String.prototype.valueOf()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/string/touppercase/index.html b/files/ca/web/javascript/reference/global_objects/string/touppercase/index.html new file mode 100644 index 0000000000..2a3b4fe56a --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/string/touppercase/index.html @@ -0,0 +1,110 @@ +--- +title: String.prototype.toUpperCase() +slug: Web/JavaScript/Referencia/Objectes_globals/String/toUpperCase +translation_of: Web/JavaScript/Reference/Global_Objects/String/toUpperCase +--- +
{{JSRef}}
+ +

El mètode toUpperCase() retorna  el valor del string que fa la crida convertit a majúscules.

+ +

Sintaxi

+ +
str.toUpperCase()
+ +

Descripció

+ +

El mètode toUpperCase() retorna  el valor del string que fa la crida convertit a majúscules. toUpperCase() no afecta el valor del string que fa la crida sino que en retorna un de nou.

+ +

Exemples

+ +

Utilitzar toUpperCase()

+ +
console.log('alfabet'.toUpperCase()); // 'ALFABET'
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.5.4.18', 'String.prototype.toUpperCase')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-string.prototype.touppercase', 'String.prototype.toUpperCase')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("String.prototype.toLocaleLowerCase()")}}
    • +
  • {{jsxref("String.prototype.toLocaleUpperCase()")}}
    • +
  • {{jsxref("String.prototype.toLowerCase()")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/string/trim/index.html b/files/ca/web/javascript/reference/global_objects/string/trim/index.html new file mode 100644 index 0000000000..2dd955ea62 --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/string/trim/index.html @@ -0,0 +1,123 @@ +--- +title: String.prototype.trim() +slug: Web/JavaScript/Referencia/Objectes_globals/String/Trim +translation_of: Web/JavaScript/Reference/Global_Objects/String/Trim +--- +
{{JSRef}}
+ +

El mètode trim() elimina els espais en blanc tant a l'inici com al final del string. En aquest contexte, s'entèn com a espais en blanc tots les caràcters que no imprimeixin res (espai, tabulador, espai sense salt de línia, etcètera) així com tots els caràcters terminadors de línia (LF, CR, etc.).

+ +

Sintaxi

+ +
str.trim()
+ +

Descripció

+ +

El mètode trim() retorna un string sense espais en blanc tant a l'inici com al final. trim() no afecta el valor del string ja que en retorna un de nou.

+ +

Exemples

+ +

Utilitzar trim()

+ +

L'exemple següent mostra el string 'foo':

+ +
var orig = '   foo  ';
+console.log(orig.trim()); // 'foo'
+
+// Un altre exemple de .trim() eliminant espais en blanc només d'un cantó.
+
+var orig = 'foo    ';
+console.log(orig.trim()); // 'foo'
+
+ +

Polyfill

+ +

Executar el codi que es mostra a continuació abans d'executar cap altre codi crearà la funció trim() si aquesta no està disponible de forma nativa.

+ +
if (!String.prototype.trim) {
+  String.prototype.trim = function () {
+    return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
+  };
+}
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES5.1', '#sec-15.5.4.20', 'String.prototype.trim')}}{{Spec2('ES5.1')}}Definició inicial. Implementat a JavaScript 1.8.1.
{{SpecName('ES6', '#sec-string.prototype.trim', 'String.prototype.trim')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}{{CompatIE("9")}}{{CompatOpera("10.5")}}{{CompatSafari("5")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("String.prototype.trimLeft()")}} {{non-standard_inline}}
    • +
  • {{jsxref("String.prototype.trimRight()")}} {{non-standard_inline}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/string/trimend/index.html b/files/ca/web/javascript/reference/global_objects/string/trimend/index.html new file mode 100644 index 0000000000..41ab89e3ca --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/string/trimend/index.html @@ -0,0 +1,94 @@ +--- +title: String.prototype.trimRight() +slug: Web/JavaScript/Referencia/Objectes_globals/String/TrimRight +translation_of: Web/JavaScript/Reference/Global_Objects/String/trimEnd +--- +
{{JSRef}} {{non-standard_header}}
+ +

El mètode trimRight() elimina els espais en blanc al final d'un string.

+ +

Sintaxi

+ +
str.trimRight()
+ +

Descripció

+ +

El mètode trimRight() retorna el string sense espais en blanc al final del mateix. trimRight() no afecta el valor del string sino que en retorna un de nou.

+ +

Exemples

+ +

Utilitzar trimRight()

+ +

L'exemple següent mostra el string ' foo':

+ +
var str = '   foo  ';
+
+console.log(str.length); // 8
+
+str = str.trimRight();
+console.log(str.length); // 5
+console.log(str);        // '   foo'
+
+ +

Especificacions

+ +

No forma part de cap standard. Implementat a JavaScript 1.8.1.

+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("String.prototype.trim()")}}
    • +
  • {{jsxref("String.prototype.trimLeft()")}} {{non-standard_inline}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/string/trimstart/index.html b/files/ca/web/javascript/reference/global_objects/string/trimstart/index.html new file mode 100644 index 0000000000..f16a5b89fa --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/string/trimstart/index.html @@ -0,0 +1,94 @@ +--- +title: String.prototype.trimLeft() +slug: Web/JavaScript/Referencia/Objectes_globals/String/TrimLeft +translation_of: Web/JavaScript/Reference/Global_Objects/String/trimStart +--- +
{{JSRef}} {{non-standard_header}}
+ +

El mètode trimLeft() elimina els espais en blanc a l'esquerra del string.

+ +

Sintaxi

+ +
str.trimLeft()
+ +

Descripció

+ +

El mètode trimLeft() retorna un string on els espais en blanc del començament s'han eliminat. trimLeft() no afecta al valor mateix del string sino que en retorna un de nou.

+ +

Exemples

+ +

Utilitzar trimLeft()

+ +

L'exemple següent mostra el string 'foo ':

+ +
var str = '   foo  ';
+
+console.log(str.length); // 8
+
+str = str.trimLeft();
+console.log(str.length); // 5
+console.log(str);        // 'foo  '
+
+ +

Especificacions

+ +

No és part de cap standard. Implementat a JavaScript 1.8.1.

+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("String.prototype.trim()")}}
    • +
  • {{jsxref("String.prototype.trimRight()")}} {{non-standard_inline}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/syntaxerror/index.html b/files/ca/web/javascript/reference/global_objects/syntaxerror/index.html new file mode 100644 index 0000000000..2ad16e006f --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/syntaxerror/index.html @@ -0,0 +1,166 @@ +--- +title: SyntaxError +slug: Web/JavaScript/Referencia/Objectes_globals/SyntaxError +translation_of: Web/JavaScript/Reference/Global_Objects/SyntaxError +--- +
{{JSRef}}
+ +

L'objecte SyntaxError representa un error quan s'intenta interpretar un codi sintàcticament no vàlid.

+ +

Descripció

+ +

Es llança un SyntaxError quan el motor JavaScript es troba amb tokens o un token que no s'adequa a la sintaxi del llenguatge quan s'interpreta el codi.

+ +

Sintaxi

+ +
new SyntaxError([missatge[, nomFitxer[, numeroLinia]]])
+ +

Paràmetres

+ +
+
missatge
+
Opcional. Descripció llegible per humans de l'error
+
nomFitxer {{non-standard_inline}}
+
Opcional. El nom del fitxer que conté el codi que causa l'excepció
+
numeroLinia {{non-standard_inline}}
+
Opcional. El número de linia del codi que causa l'excepció
+
+ +

Propietats

+ +
+
{{jsxref("SyntaxError.prototype")}}
+
Permet l'addició de propietats a un objecte SyntaxError.
+
+ +

Mètodes

+ +

El SyntaxError global no conté cap mètode en si mateix, tanmateix, sí que hereta alguns mètodes a través de la cadena prototipus.

+ +

instànces de SyntaxError

+ +

Propietats

+ +
{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype', 'Properties')}}
+ +

Mètodes

+ +
{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype', 'Methods')}}
+ +

Exemples

+ +

Capturar un SyntaxError

+ +
try {
+  eval('hoo bar');
+} catch (e) {
+  console.log(e instanceof SyntaxError); // true
+  console.log(e.message);                // "missing ; before statement"
+  console.log(e.name);                   // "SyntaxError"
+  console.log(e.fileName);               // "Scratchpad/1"
+  console.log(e.lineNumber);             // 1
+  console.log(e.columnNumber);           // 4
+  console.log(e.stack);                  // "@Scratchpad/1:2:3\n"
+}
+
+ +

Crear un SyntaxError

+ +
try {
+  throw new SyntaxError('Hello', 'someFile.js', 10);
+} catch (e) {
+  console.log(e instanceof SyntaxError); // true
+  console.log(e.message);                // "Hello"
+  console.log(e.name);                   // "SyntaxError"
+  console.log(e.fileName);               // "someFile.js"
+  console.log(e.lineNumber);             // 10
+  console.log(e.columnNumber);           // 0
+  console.log(e.stack);                  // "@Scratchpad/2:11:9\n"
+}
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES3')}}{{Spec2('ES3')}}Definició inicial.
{{SpecName('ES5.1', '#sec-15.11.6.4', 'SyntaxError')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-native-error-types-used-in-this-standard-syntaxerror', 'SyntaxError')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Error")}}
    • +
  • {{jsxref("SyntaxError.prototype")}}
    • +
diff --git a/files/ca/web/javascript/reference/global_objects/undefined/index.html b/files/ca/web/javascript/reference/global_objects/undefined/index.html new file mode 100644 index 0000000000..3dd30fbefe --- /dev/null +++ b/files/ca/web/javascript/reference/global_objects/undefined/index.html @@ -0,0 +1,174 @@ +--- +title: undefined +slug: Web/JavaScript/Referencia/Objectes_globals/undefined +translation_of: Web/JavaScript/Reference/Global_Objects/undefined +--- +
+
+
{{jsSidebar("Objects")}}
+
+
+ +

Resum

+ +

El valor de la propietat global undefined representa el valor undefined. És un dels {{Glossary("Primitive", "tipus primitius")}} de JavaScript.

+ +

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

+ +

Sintaxi

+ +
undefined
+ +

Descripció

+ +

undefined és una propietat de l'objecte global, és a dir, és una variable dins l'àmbit global.

+ +

Als navegadors moderns (JavaScript 1.8.5 / Firefox 4+), undefined és una propietat no configurable i que no pot ser escrita, tal com denota la especificació ECMAScript 5. Encara que no sigui el cas, és convenient evitar sobreescriure el seu valor.

+ +

Una variable a la que no s'ha assignat cap valor  és de tipus undefined. Un mètode o sentència retornarà undefined si la variable que s'evalua no te assignat cap valor. Una funció retornarà undefined si no es {{jsxref("Statements/return", "retorna")}} un valor explícitament.

+ +

Degut a que undefined no és una {{jsxref("Reserved_Words", "paraula reservada")}} es pot emprar com a identificador (nom de variable) a qualsvol àmbit que no sigui el global.

+ +
// mostra "foo string"
+(function(){ var undefined = 'foo'; console.log(undefined, typeof undefined); })();
+
+// mostra "foo string"
+(function(undefined){ console.log(undefined, typeof undefined); })('foo');
+
+ +

Exemples

+ +

Igualtat estricta i undefined

+ +

Es pot emprar undefined en combinació amb els operadors de igualtat i no-igualtat per determinar si una variable té assignat un valor.

+ +
var x;
+if (x === undefined) {
+   // sentències que s'executaran
+}
+else {
+   // sentències que no s'executaran
+}
+
+ +
Nota: En aquest cas s'ha de fer servir l'operador d'igualtat estricta (===) en comptes de l'operador standard d'igualtat (==) ja que x == undefined també comprova si x és null, mentre que l'operador d'igualtat estricta no ho fa. null no és equivalent a undefined. Per més detalls vegeu {{jsxref("Operators/Comparison_Operators", "comparació d'operadors")}}.
+ +

L'operador Typeof i undefined

+ +

De forma alternativa, es pot emprar {{jsxref("Operators/typeof", "typeof")}}:

+ +
var x;
+if (typeof x === 'undefined') {
+   // sentències que s'executaran
+}
+
+ +

Una raó per utilitzar {{jsxref("Operators/typeof", "typeof")}} és que no provoca un error si la variable no ha estat definida prèviament.

+ +
// x no ha estat prèviament definida
+if (typeof x === 'undefined') { // s'evalua a true sense errors
+   // sentències que s'executaran
+}
+
+if(x === undefined){ // llença ReferenceError
+
+}
+
+ +

De totes formes és recomanable evitar l'ús d'aquest tipus de tècniques. JavaScript és un llenguatge amb àmbits estàtics, de manera que per saber si una variable ha estat definida prèviament n'hi ha prou amb comprovar si ha estat definida dins l'àmbit immediat. L'única excepció és l'àmbit global. Aquest, però, està vinculat a l'objecte global, per la qual cosa comprovar si una variable existeix dins l'àmbit global és equivalent a comprovar l'existència d'una propietat dins l'objecte global (emprant l'operador {{jsxref("Operators/in", "in")}}, per exemple).

+ +

L'operador Void i undefined

+ +

L'operador {{jsxref("Operators/void", "void")}} és una altra alternativa.

+ +
var x;
+if (x === void 0) {
+   // sentències que s'executaran
+}
+
+// y no ha estat definida prèviament
+if (y === void 0) {
+   // llença ReferenceError (en oposició a `typeof`)
+}
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
ECMAScript 1st Edition.StandardDefinició inicial. Impementat a JavaScript 1.3
{{SpecName('ES5.1', '#sec-15.1.1.3', 'undefined')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-undefined', 'undefined')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

 

diff --git a/files/ca/web/javascript/reference/global_objects/weakmap/prototype/index.html b/files/ca/web/javascript/reference/global_objects/weakmap/prototype/index.html deleted file mode 100644 index 40c3e72ff6..0000000000 --- a/files/ca/web/javascript/reference/global_objects/weakmap/prototype/index.html +++ /dev/null @@ -1,133 +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}}
- -

La propietat WeakMap.prototype representa el prototip pel constructor {{jsxref("WeakMap")}}.

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

Descripció

- -

Les instantànies {{jsxref("WeakMap")}} hereten de {{jsxref("WeakMap.prototype")}}. Es pot utilitzar l'objecte prototip del constructor per afegir propietats o mètodes a totes les instàncies WeakMap.

- -

WeakMap.prototype és en si mateix només un objecte ordinari:

- -
Object.prototype.toString.call(WeakMap.prototype); // "[object Object]"
- -

Propietats

- -
-
WeakMap.prototype.constructor
-
Retorna la funció que ha creat un prototip de la instància. Aquesta és la funció {{jsxref("WeakMap")}} per defecte.
-
- -

Mètodes

- -
-
{{jsxref("WeakMap.delete", "WeakMap.prototype.delete(key)")}}
-
Elimina qualsevol valor associat a key. WeakMap.prototype.has(key) retornarà false després d'això.
-
{{jsxref("WeakMap.get", "WeakMap.prototype.get(key)")}}
-
Retorna el valor associat a key, o undefined si no n'hi ha cap.
-
{{jsxref("WeakMap.has", "WeakMap.prototype.has(key)")}}
-
Retorna un booleà afirmant si un valor s'ha associat o no a la key en l'objecte WeakMap.
-
{{jsxref("WeakMap.set", "WeakMap.prototype.set(key, value)")}}
-
Estableix el valor per la key en l'objecte WeakMap. Retorna l'objecte WeakMap.
-
{{jsxref("WeakMap.prototype.clear()")}} {{obsolete_inline}}
-
Elimina totes les parelles clau/valor de l'objecte WeakMap. Vegeu que es posible implementar un objecte WeakMap-like que tingui un mètode .clear() per mitjà d'encapsular un objecte WeakMap que no ho tingui (vegeu un exemple a la pàgina {{jsxref("WeakMap")}})
-
- -

Especificacions

- - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-weakmap.prototype', 'WeakMap.prototype')}}{{Spec2('ES6')}}Definició inicial
- -

Compatibilitat amb navegadors

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic36{{CompatGeckoDesktop("6.0")}}11237.1
Objecte ordinari{{CompatUnknown}}{{CompatGeckoDesktop("40")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("6.0")}}{{CompatNo}}{{CompatNo}}8
Objecte ordinari{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("40")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Map.prototype")}}
    • -
diff --git a/files/ca/web/javascript/reference/global_objects/weakset/prototype/index.html b/files/ca/web/javascript/reference/global_objects/weakset/prototype/index.html deleted file mode 100644 index 4e86935904..0000000000 --- a/files/ca/web/javascript/reference/global_objects/weakset/prototype/index.html +++ /dev/null @@ -1,132 +0,0 @@ ---- -title: WeakSet.prototype -slug: Web/JavaScript/Reference/Global_Objects/WeakSet/prototype -translation_of: Web/JavaScript/Reference/Global_Objects/WeakSet -translation_of_original: Web/JavaScript/Reference/Global_Objects/WeakSet/prototype ---- -
{{JSRef}}
- -

La propietat WeakSet.prototype representa el prototip pel constructor {{jsxref("WeakSet")}}.

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

Descripció

- -

Les instàncies {{jsxref("WeakSet")}} hereten de {{jsxref("WeakSet.prototype")}}. Es pot utilitzar l'objecte prototip del constructor per afegir propietats o mètodes a totes les instàncies WeakSet.

- -

WeakSet.prototype és en si mateix només un objecte ordinari

- -
Object.prototype.toString.call(WeakSet.prototype); // "[object Object]"
- -

Propietats

- -
-
WeakSet.prototype.constructor
-
Retorna la funció que ha creat un prototip de la instància. Aquesta és la funció {{jsxref("WeakSet")}} per defecte.
-
- -

Mètodes

- -
-
{{jsxref("WeakSet.add", "WeakSet.prototype.add(value)")}}
-
Afegeix un nou element amb el valor donat a l'objecte WeakSet.
-
{{jsxref("WeakSet.delete", "WeakSet.prototype.delete(value)")}}
-
Elimina l'element associat al value. WeakSet.prototype.has(value) retornarà després false.
-
{{jsxref("WeakSet.has", "WeakSet.prototype.has(value)")}}
-
Retorna un booleà afirmant si un element és o no present amb el valor donat en l'objecte WeakSet.
-
{{jsxref("WeakSet.prototype.clear()")}} {{obsolete_inline}}
-
Elimina tots els elements de l'objecte WeakSet.
-
- -

Especificacions

- - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-weakset.prototype', 'WeakSet.prototype')}}{{Spec2('ES6')}}Definició inicial.
- -

Compatibilitat amb navegadors

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic36{{ CompatGeckoDesktop(34) }}{{CompatNo}}23{{CompatNo}}
Objecte ordinari{{CompatUnknown}}{{CompatGeckoDesktop("40")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaChrome per AndroidAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatNo}}{{ CompatGeckoMobile(34) }}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Objecte ordinari{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("40")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Set.prototype")}}
    • -
  • {{jsxref("WeakMap.prototype")}}
    • -
diff --git a/files/ca/web/javascript/reference/index.html b/files/ca/web/javascript/reference/index.html new file mode 100644 index 0000000000..f524504ab2 --- /dev/null +++ b/files/ca/web/javascript/reference/index.html @@ -0,0 +1,46 @@ +--- +title: Glossari de JavaScript +slug: Web/JavaScript/Referencia +translation_of: Web/JavaScript/Reference +--- +
{{JsSidebar}}
+ +

Aquesta part de la secció de JavaScript a l'MDN serveix com a glossari de informació sobre el llenguatge JavaScript. Podeu llegir més sobre aquest glossari.

+ +

Objectes Globals

+ +

Aquest capítol documenta tots els objectes standard de JavaScript, així com els seus mètodes i propietats.

+ +

{{page('/ca/docs/Web/JavaScript/Reference/Global_Objects', 'Objectes standard (per categoria)')}}

+ +

Sentències

+ +

Aquest capítol documenta totes les sentències i declaracions disponibles a JavaScript.

+ +

{{page('/ca/docs/Web/JavaScript/Reference/Statements', 'Instruccions i declaracions disponibles (per categoria)')}}

+ +

Expressions i operadors

+ +

Aquest capítol documenta totes les expressions i els operadors soportats per JavaScript.

+ +
{{page('/ca/docs/Web/JavaScript/Reference/Operators', 'Expressions i operadors (per categoria)')}}
+ +

Funcions

+ +

Aquest capítol documenta com treballar amb funcions de JavaScript.

+ + + +

Pàgines de glossari adicionals

+ + diff --git a/files/ca/web/javascript/reference/operators/comma_operator/index.html b/files/ca/web/javascript/reference/operators/comma_operator/index.html new file mode 100644 index 0000000000..f6a62d2bc8 --- /dev/null +++ b/files/ca/web/javascript/reference/operators/comma_operator/index.html @@ -0,0 +1,129 @@ +--- +title: Operador Coma +slug: Web/JavaScript/Referencia/Operadors/Operador_Coma +translation_of: Web/JavaScript/Reference/Operators/Comma_Operator +--- +
+
{{jsSidebar("Operators")}}
+
+ +

Resum

+ +

L'operador coma avalua cadascun dels seus operands (d'esquerra a dreta) i retorna el valor de l´últim operand.

+ +

Sintaxi

+ +
expr1, expr2, expr3...
+ +

Paràmetres

+ +
+
expr1, expr2, expr3...
+
Qualsevol expressions.
+
+ +

Descripció

+ +

Es pot fer servir l'operador coma quan es vulgui incloure múltiples expressions en una localització que requereix una sola expressió. L'ús més freqüent que es fa d'aquest operador es per subministrar múltiples paràmetres en una for loop.

+ +

Exemple

+ +

Si a és un array de 2 dimesnions amb 10 elements on a side, el codi següent usa l'operador coma per incrementar dos variables al mateix temps. Vegeu que la coma en la sentència var no  és l'operador coma, ja que no existeix dins d'una expressió. Més aviat, és un caràcter especial en les sentències var que combina múltiples d'ells en un. Pràcticament, la coma es comporta quasi igual que l'operador coma. El codi imprimeix els valors dels elements de la diagonal de l'array:

+ +
for (var i = 0, j = 9; i <= 9; i++, j--)
+  document.writeln("a[" + i + "][" + j + "] = " + a[i][j]);
+ +

Processar i després retornar

+ +

Un altre exemple sobre l'ús que es pot fer sobre l'operador coma és processar abansd e retornar. Com s'indica, només l'últim element serà retornat, però tots els altres també seràn avaluats. Així doncs, es podria fer:

+ +
function myFunc () {
+  var x = 0;
+
+  return (x += 1, x); // the same of return ++x;
+}
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
ECMAScript 1st Edition.EstàndardDefinició inicial.
{{SpecName('ES5.1', '#sec-11.14', 'Comma operator')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-comma-operator', 'Comma operator')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsicSíSí3.0SíSí
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsicSíSíSíSíSíSí
+
+ +

Vegeu també

+ + diff --git a/files/ca/web/javascript/reference/operators/conditional_operator/index.html b/files/ca/web/javascript/reference/operators/conditional_operator/index.html new file mode 100644 index 0000000000..15265c62b3 --- /dev/null +++ b/files/ca/web/javascript/reference/operators/conditional_operator/index.html @@ -0,0 +1,170 @@ +--- +title: Operador Condicional (ternari) +slug: Web/JavaScript/Referencia/Operadors/Conditional_Operator +translation_of: Web/JavaScript/Reference/Operators/Conditional_Operator +--- +
+
{{jsSidebar("Operators")}}
+
+ +

Resum

+ +

L'operador condicional (ternari) és l'únic operador de JavaScript que opera amb tres operands. Aquest operador és freqüentment usat com una simplificació de la sentència if.

+ +

Sintaxi

+ +
condition ? expr1 : expr2
+ +

Paràmetres

+ +
+
condition
+
Una expressió que avalua true o false.
+
+ +
+
expr1, expr2
+
Expressions amb valors de qualsevol tipus.
+
+ +

Descripció

+ +

Si condition és true, l'operador retorna el valor de expr1; de ser el contrari, retorna el valor de expr2. Per exemple, per mostrar diferents missatges basats en el valor de la variable isMember, es podria fer servir aquesta sentència:

+ +
"The fee is " + (isMember ? "$2.00" : "$10.00")
+
+ +

També es pot assignar variables depenent del resultat ternari:

+ +
var elvisLives = Math.PI > 4 ? "Yep" : "Nope";
+ +

És possible realitzar avaluacions ternàries múltiples (nota: L'operador condicional operator s'associa per la dreta):

+ +
var firstCheck = false,
+    secondCheck = false,
+    access = firstCheck ? "Access denied" : secondCheck ? "Access denied" : "Access granted";
+
+console.log( access ); // logs "Access granted"
+ +

També es pot usar avaluacions ternàries en espais lliures per tal de fer diferents operacions:

+ +
var stop = false, age = 16;
+
+age > 18 ? location.assign("continue.html") : stop = true;
+
+ +

També es pot fer més d'una sola operació per cas, separant-les amb una coma:

+ +
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!")
+);
+
+ +

I per últim, també es pot fer més d'una operació durant l'assignació d'un valor. En aquest cas, el últim valor del parèntesis serparat per una coma serà el valor assignat.

+ +
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"
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
1a edició deECMAScript.EstàndardDefinició inicial. Implementat en JavaScript 1.0
{{SpecName('ES5.1', '#sec-11.12', 'The conditional operator')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-conditional-operator', 'Conditional Operator')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ + diff --git a/files/ca/web/javascript/reference/operators/function/index.html b/files/ca/web/javascript/reference/operators/function/index.html new file mode 100644 index 0000000000..0908f591b6 --- /dev/null +++ b/files/ca/web/javascript/reference/operators/function/index.html @@ -0,0 +1,146 @@ +--- +title: function expression +slug: Web/JavaScript/Referencia/Operadors/function +translation_of: Web/JavaScript/Reference/Operators/function +--- +
{{jsSidebar("Operators")}}
+ +

La paraula clau function es pot utilitzar per definir una funció dins d'una expressió.

+ +

Sintaxi

+ +
function [nom]([paràm1[, paràm2[, ..., paràmN]]]) {
+   sentències
+}
+ +

Paràmetres

+ +
+
nom
+
El nom de la funció. Es pot ometre, i en aquest cas la funció seria anònima. El nom és només local pel cos de la funció.
+
paràmN
+
El nom d'un argument que es passa a la funció.
+
sentències
+
Les sentències que constitueixen el cos de la funció.
+
+ +

Descripció

+ +

Una expressió d'una funció és molt semblant i té gairebé la mateixa sintaxi que una sentència d'una funció (function sentència d'una funció per més detalls). La principal diferència entre l'expressió d'una funció i una sentèndia d'una expressió és el nom de la functió, el qual es pot ometre en expressions de funcions per tal de crear funcions anònimes. Una expressió d'una funció es pot utilitzar com a un IIFE (Immediately Invoked Function Expression) que s'executa un cop s'ha definit. Vegeu també el capítol sobre funcions per més informació.

+ +

Exemples

+ +

L'exemple següent defineix una funció sense nom i l'assigna a x. La funció retorna el quadrat del seu argument:

+ +
var x = function(y) {
+   return y * y;
+};
+
+ +

Expressió d'una funció amb nom

+ +

Si vols fer referència a la funció actual dins del cos de la funció, necessitaràs crear una expressió d'una funció amb nom. Aquest nom és llavors només local pel cos de la funció (àmbit). AIxò també evita utilitzar la propietat no estàndard arguments.callee.

+ +
var math = {
+  'factorial': function factorial(n) {
+    if (n <= 1)
+      return 1;
+    return n * factorial(n - 1);
+  }
+};
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}}{{Spec2('ESDraft')}} 
{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}{{Spec2('ES6')}} 
{{SpecName('ES5.1', '#sec-13', 'Function definition')}}{{Spec2('ES5.1')}} 
{{SpecName('ES3', '#sec-13', 'Function definition')}}{{Spec2('ES3')}}Definició inicial. Implementat en JavaScript 1.5.
+ +

Compatibilitat amb navegadors

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Functions_and_function_scope", "Functions and function scope")}}
    • +
  • {{jsxref("Function")}}
    • +
  • {{jsxref("Statements/function", "function statement")}}
    • +
  • {{jsxref("Statements/function*", "function* statement")}}
    • +
  • {{jsxref("Operators/function*", "function* expression")}}
    • +
  • {{jsxref("GeneratorFunction")}}
    • +
diff --git a/files/ca/web/javascript/reference/operators/grouping/index.html b/files/ca/web/javascript/reference/operators/grouping/index.html new file mode 100644 index 0000000000..45e8566806 --- /dev/null +++ b/files/ca/web/javascript/reference/operators/grouping/index.html @@ -0,0 +1,128 @@ +--- +title: Operador d'agrupament +slug: Web/JavaScript/Referencia/Operadors/Grouping +translation_of: Web/JavaScript/Reference/Operators/Grouping +--- +
+
{{jsSidebar("Operators")}}
+
+ +

Resum

+ +

L'operador d'agrupament ( ) controla la precedència de l'avaluació en expresions.

+ +

Sintaxi

+ +
 ( )
+ +

Descripció

+ +

L'operador agrupament consisteix en un parell de parèntesis que embolcallen una expressió o una sub-expressió per anular la precedència d'operadors normal de forma que expressions amb un nivell més baix de precedència poden ser avaluades abans d'una expressió amb més prioritat.

+ +

Exemples

+ +

Primer predomina la multiplicació i la divisió, després la suma i la resta per tal d'avaluar primer la suma.

+ +
var a = 1;
+var b = 2;
+var c = 3;
+
+// default precedence
+a + b * c     // 7
+// evaluated by default like this
+a + (b * c)   // 7
+
+// now overriding precedence
+// addition before multiplication
+(a + b) * c   // 9
+
+// which is equivalent to
+a * c + b * c // 9
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
1a edició de ECMAScript.EstàndardDefinició inicial. Implementat en JavaScript 1.0
{{SpecName('ES5.1', '#sec-11.1.6', 'The Grouping Operator')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-grouping-operator', 'The Grouping Operator')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

Vegeu també

+ + diff --git a/files/ca/web/javascript/reference/operators/index.html b/files/ca/web/javascript/reference/operators/index.html new file mode 100644 index 0000000000..4a70edc4fb --- /dev/null +++ b/files/ca/web/javascript/reference/operators/index.html @@ -0,0 +1,282 @@ +--- +title: Expressions and operators +slug: Web/JavaScript/Referencia/Operadors +tags: + - JavaScript + - NeedsTranslation + - Operators + - TopicStub +translation_of: Web/JavaScript/Reference/Operators +--- +
{{jsSidebar("Operators")}}
+ +

Aquest capítol documenta totls els operadors, expressions i paraules clau del llenguatge JavaScript.

+ +

Expressions i operadors per categoria

+ +

Per a un llistat en order alfabetic vegeu el menú de l'esquerra.

+ +

Expressions primàries

+ +

Paraules clau bàsiques i expressions generals en JavaScript.

+ +
+
{{jsxref("Operadors/this", "this")}}
+
La paraula clau this fa referència al contexte d'execució de la funció actual.
+
{{jsxref("Operadors/function", "function")}}
+
La paraula clau function defineix una expressió de funció.
+
{{experimental_inline()}} {{jsxref("Operadors/function*", "function*")}}
+
La paraula clau function* defineix una expressió de funció generadora.
+
{{experimental_inline()}} {{jsxref("Operadors/yield", "yield")}}
+
Pausa i resumeix una funció generadora.
+
{{experimental_inline()}} {{jsxref("Operadors/yield*", "yield*")}}
+
Delega a una altra funció generadora o objecte iterable.
+
{{jsxref("Global_Objects/Array", "[]")}}
+
Sintaxi d'inicialització o literal d'arrays.
+
{{jsxref("Operators/Object_initializer", "{}")}}
+
Sintaxi d'inicialitzador o literal d'objectes.
+
{{jsxref("Global_Objects/RegExp", "/ab+c/i")}}
+
Sintaxi de literals formats per expressions regulars.
+
{{experimental_inline()}} {{jsxref("Operadors/Array_comprehensions", "[for (x of y) x]")}}
+
Comprensió d'arrays.
+
{{experimental_inline()}} {{jsxref("Operadors/Generator_comprehensions", "(for (x of y) y)")}}
+
Comprensió de generators.
+
{{jsxref("Operadors/Grouping", "( )")}}
+
Operador d'agrupament.
+
+ +

Expressions de banda esquerra

+ +

Els valors de l'esquerra són la destinació d'una assignació.

+ +
+
{{jsxref("Operadors/Property_accessors", "Property accessors", "", 1)}}
+
Els operadors membres proporcionen accés a una propietat o mètode d'un objecte
+ (object.property i object["property"]).
+
{{jsxref("Operadors/new", "new")}}
+
L'operador new crea una instància d'un constructor.
+
{{experimental_inline()}} {{jsxref("Operadors/super", "super")}}
+
La paraula clau super crida el constructor de l'objecte pare.
+
{{experimental_inline()}} {{jsxref("Operadors/Spread_operator", "...obj")}}
+
L'operador d'extensió permet que una expressió s'expandeixi en llocs on s'esperen mútiples argurments (per a crides de funcions) o elements (per a literals d'arrays).
+
+ +

Increment i decrement

+ +

Operadors de increment o decrement en forma de prefix/sufix.

+ +
+
{{jsxref("Operadors/Arithmetic_Operators", "A++", "#Increment")}}
+
Operador sufix d'increment.
+
{{jsxref("Operadors/Arithmetic_Operators", "A--", "#Decrement")}}
+
Operador sufix de decrement.
+
{{jsxref("Operadors/Arithmetic_Operators", "++A", "#Increment")}}
+
Operador prefix d'increment.
+
{{jsxref("Operadors/Arithmetic_Operators", "--A", "#Decrement")}}
+
Operador prefix de decrement.
+
+ +

Operadors unaris

+ +

Un operador unari és un operador que només accepta un operand.

+ +
+
{{jsxref("Operadors/delete", "delete")}}
+
L'operador delete esborra una propietat d'un objecte.
+
{{jsxref("Operadors/void", "void")}}
+
L'operador void evalua una expressió i descarta el que retorni.
+
{{jsxref("Operadors/typeof", "typeof")}}
+
L'operador typeof determina el tipus d'un objecte donat.
+
{{jsxref("Operadors/Arithmetic_Operators", "+", "#Unary_plus")}}
+
L'operador unari més converteix l'operand donat al tipus Number.
+
{{jsxref("Operadors/Arithmetic_Operators", "-", "#Unary_negation")}}
+
L'operador unari negació converteix l'operand donat al tipus Number i llavors el nega.
+
{{jsxref("Operadors/Bitwise_Operators", "~", "#Bitwise_NOT")}}
+
Operador binari NOT.
+
{{jsxref("Operadors/Logical_Operators", "!", "#Logical_NOT")}}
+
Operador lògic NOT.
+
+ +

Operadors aritmètics

+ +

Els operadors aritmètics accepten valors numèrics (ja siguin literals o variables) com a operands i retornen un únic valor numèric.

+ +
+
{{jsxref("Operadors/Arithmetic_Operators", "+", "#Addition")}}
+
Operador de suma.
+
{{jsxref("Operadors/Arithmetic_Operators", "-", "#Subtraction")}}
+
Operador de resta.
+
{{jsxref("Operadors/Arithmetic_Operators", "/", "#Division")}}
+
Operador de divisió.
+
{{jsxref("Operadors/Arithmetic_Operators", "*", "#Multiplication")}}
+
Operador de multiplicació.
+
{{jsxref("Operadors/Arithmetic_Operators", "%", "#Remainder")}}
+
Operador de mòdul.
+
+ +

Operadors relacionals

+ +

Els operadors relacionals compara els operands donats i retorna un valor de tipus Boolean value basat en si la relació és certa o no.

+ +
+
{{jsxref("Operadors/in", "in")}}
+
L'operador in determina si un objecte té la propietat donada.
+
{{jsxref("Operadors/instanceof", "instanceof")}}
+
L'operador instanceof determina si un objecte és una instància d'un altre objecte.
+
{{jsxref("Operadors/Comparison_Operators", "<", "#Less_than_operator")}}
+
Operador menor que.
+
{{jsxref("Operadors/Comparison_Operators", ">", "#Greater_than_operator")}}
+
Operador major que.
+
{{jsxref("Operadors/Comparison_Operators", "<=", "#Less_than_or_equal_operator")}}
+
Operador menor o igual que.
+
{{jsxref("Operadors/Comparison_Operators", ">=", "#Greater_than_or_equal_operator")}}
+
Operador major o igual que.
+
+ +

Operadors d'igualtat

+ +

El resultat d'evaluar un operador d'igualtat és sempre de tipus Boolean i el resultat es basa en si la comparació és certa.

+ +
+
{{jsxref("Operadors/Comparison_Operators", "==", "#Equality")}}
+
Operador d'igulatat.
+
{{jsxref("Operadors/Comparison_Operators", "!=", "#Inequality")}}
+
Operador de no igualtat.
+
{{jsxref("Operadors/Comparison_Operators", "===", "#Identity")}}
+
Operador identitat.
+
{{jsxref("Operadors/Comparison_Operators", "!==", "#Nonidentity")}}
+
Operador de no identitat.
+
+ +

Operadors de desplaçament de bits

+ +

Operacions que desplacen tots els bits d'un operand.

+ +
+
{{jsxref("Operadors/Bitwise_Operators", "<<", "#Left_shift")}}
+
Operador de desplaçament de bits a l'esquerra.
+
{{jsxref("Operadors/Bitwise_Operators", ">>", "#Right_shift")}}
+
Operador de desplaçament de bits a la dreta.
+
{{jsxref("Operadors/Bitwise_Operators", ">>>", "#Unsigned_right_shift")}}
+
Operador de desplaçament a la dreta sense signe.
+
+ +

Operadors binaris

+ +

Els operadors binaris tracten els seus operands com un conjunt de 32 bits (uns i zeros) i retornen valors numèrics standards de JavaScript.

+ +
+
{{jsxref("Operadors/Bitwise_Operators", "&", "#Bitwise_AND")}}
+
AND binari.
+
{{jsxref("Operadors/Bitwise_Operators", "|", "#Bitwise_OR")}}
+
OR binari.
+
{{jsxref("Operadors/Bitwise_Operators", "^", "#Bitwise_XOR")}}
+
XOR binari.
+
+ +

Operadors lògics

+ +

Els operadors lògics típicament s'utilitzen amb valors booleans (és a dir, logics) i retornen un valor booleà.

+ +
+
{{jsxref("Operadors/Logical_Operators", "&&", "#Logical_AND")}}
+
AND lògic.
+
{{jsxref("Operadors/Logical_Operators", "||", "#Logical_OR")}}
+
OR lògic.
+
+ +

Operador condicional (ternari)

+ +
+
{{jsxref("Operadors/Conditional_Operator", "(condition ? ifTrue : ifFalse)")}}
+
+

L'operador condicional retorna un dels dos valors basat en l'evaluació lògica de la condició.

+
+
+ +

Operadors d'assignació

+ +

Els operadors d'assignació asignen un valor a l'operand de l'esquerra basant-se en l'evaluació de l'operand de la dreta.

+ +
+
{{jsxref("Operadors/Assignment_Operators", "=", "#Assignment")}}
+
Operador d'assignació.
+
{{jsxref("Operadors/Assignment_Operators", "*=", "#Multiplication_assignment")}}
+
Assignació de la multiplicació.
+
{{jsxref("Operadors/Assignment_Operators", "/=", "#Division_assignment")}}
+
Assignació de la divisó.
+
{{jsxref("Operadors/Assignment_Operators", "%=", "#Remainder_assignment")}}
+
Assignació del mòdul.
+
{{jsxref("Operadors/Assignment_Operators", "+=", "#Addition_assignment")}}
+
Assignació de la suma.
+
{{jsxref("Operadors/Assignment_Operators", "-=", "#Subtraction_assignment")}}
+
Assignació de la resta.
+
{{jsxref("Operadors/Assignment_Operators", "<<=", "#Left_shift_assignment")}}
+
Assignació del desplaçament a l'esquerra.
+
{{jsxref("Operadors/Assignment_Operators", ">>=", "#Right_shift_assignment")}}
+
Assignació del desplaçament a la dreta.
+
{{jsxref("Operadors/Assignment_Operators", ">>>=", "#Unsigned_right_shift_assignment")}}
+
Assignació del desplaçament a la dreta sense signe.
+
{{jsxref("Operadors/Assignment_Operators", "&=", "#Bitwise_AND_assignment")}}
+
Assignació de l'AND binari.
+
{{jsxref("Operadors/Assignment_Operators", "^=", "#Bitwise_XOR_assignment")}}
+
Assignació del XOR binari.
+
{{jsxref("Operadors/Assignment_Operators", "|=", "#Bitwise_OR_assignment")}}
+
Assignació de l'OR binari.
+
{{experimental_inline()}} {{jsxref("Operadors/Destructuring_assignment", "[a, b] = [1, 2]")}}
+ {{experimental_inline()}} {{jsxref("Operadors/Destructuring_assignment", "{a, b} = {a:1, b:2}")}}
+
+

L'assignació de desestructuració permet assignar les propietats d'un array o objecte a variables utilitzant una sintaxi que recorda la de literals d'arrays o objectes.

+
+
+ +

Operador coma

+ +
+
{{jsxref("Operadors/Comma_Operator", ",")}}
+
L'operador coma permet que múltiples expressions siguin evaluades en una sola sentència i retorna el resultat de l'última expressió.
+
+ +

Característiques no standard

+ +
+
{{non-standard_inline}} {{jsxref("Operadors/Legacy_generator_function", "Legacy generator function", "", 1)}}
+
La paraula clau function es pot emprar per a definir una funció generadora obsoleta dins una expressió. Per a crear una funció generadora obsoleta el cos de la funció ha de contindre al menys una expressió {{jsxref("Operators/yield", "yield")}}.
+
{{non-standard_inline}} {{jsxref("Operadors/Expression_closures", "Expression closures", "", 1)}}
+
La sintaxi d'expressions closure és una abreviació per a escriure funcions simples.
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial.
{{SpecName('ES5.1', '#sec-11', 'Expressions')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-ecmascript-language-expressions', 'Llenguatge ECMAScript: Expressions')}}{{Spec2('ES6')}} +

Nou: L'operador d'extensió, l'assignació de desestructuració, la paraula clau super, la comprensió d'arrays i la comprensió de generadors

+
+ +

Vegeu també

+ + diff --git a/files/ca/web/javascript/reference/operators/super/index.html b/files/ca/web/javascript/reference/operators/super/index.html new file mode 100644 index 0000000000..c19e58cba1 --- /dev/null +++ b/files/ca/web/javascript/reference/operators/super/index.html @@ -0,0 +1,119 @@ +--- +title: super +slug: Web/JavaScript/Referencia/Operadors/super +translation_of: Web/JavaScript/Reference/Operators/super +--- +
{{jsSidebar("Operators")}}
+ +

Resum

+ +

La paraula clau super s'utilitza per cridar funcions del pare de l'objecte.

+ +

Sintaxi

+ +
super([arguments]); // crida el constructor del pare.
+super.functionOnParent([arguments]);
+
+ +

Descripció

+ +

Quan s'utilitza en un constructor, la paraula clau super apareix sola i s'ha d'utilitzar abans de la paraula clau this. Aquesta paraula clau també es pot utilitzar per cridar funcions en un objecte pare.

+ +

Exemple

+ +

Aquest fragment de codi es pren de la mostra de classes  mostra de classes (demostració en viu).

+ +
class Square extends Polygon {
+  constructor(length) {
+    // Aquí es crida el constructor del pare de la classe amb les longituds
+    // proveïdes per l'alçada i l'amplada del polígon
+    super(length, length);
+    // Nota: En classes derivades, s'ha de cridar super() abans de poder
+    // utilitzar 'this'. Obviar això causarà un error de referència.
+    this.name = 'Square';
+  }
+
+  get area() {
+    return this.height * this.width;
+  }
+
+  set area(value) {
+    this.area = value;
+  }
+}
+ +

Especificacions

+ + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-super-keyword', 'super')}}{{Spec2('ES6')}}Definició inicial.
+ +

Compatibilitat amb navegadors

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome(42.0)}}{{CompatNo}}
+ {{bug(1066239)}}		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
Safari Mobile + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera Mobile
Suport bàsic{{CompatUnknown}}{{CompatChrome(42.0)}}{{CompatNo}}
+ {{bug(1066239)}}		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Vegeu també

+ + diff --git a/files/ca/web/javascript/reference/operators/typeof/index.html b/files/ca/web/javascript/reference/operators/typeof/index.html new file mode 100644 index 0000000000..a7407e79ce --- /dev/null +++ b/files/ca/web/javascript/reference/operators/typeof/index.html @@ -0,0 +1,240 @@ +--- +title: typeof +slug: Web/JavaScript/Referencia/Operadors/typeof +translation_of: Web/JavaScript/Reference/Operators/typeof +--- +
+
{{jsSidebar("Operators")}}
+
+ +

Resum

+ +

L'operador typeof retorna una cadena de caràcters que representa el tipus de l'operand, que en cap cas és evaluat.

+ +

Sintaxi

+ +

L'operador typeof va seguit del seu operand:

+ +
typeof operand
+ +

Paràmetres

+ +

operand és una expressió que representa l'objecte o {{Glossary("Primitive", "primitive")}} del qual es retornarà el tipus.

+ +

Descripció

+ +

La taula següent resumeix els possibles valor de typeof. Per més informació sobre tipus i tipus primitius, vegeu també la pàgina de JavaScript data structure.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TipusResultat
Undefined"undefined"
Null"object" (vegeu a sota)
Boolean"boolean"
Number"number"
String"string"
Symbol (nou a l'ECMAScript 6)"symbol"
Host object (proporcionat per l'entorn JS)Depenent de l'implementació
Objecte Funció (implements [[Call]] in ECMA-262 terms)"function"
Qualsevol altre objecte"object"
+ +

Exemples

+ +

Casos normals

+ +
// Numbers
+typeof 37 === 'number';
+typeof 3.14 === 'number';
+typeof Math.LN2 === 'number';
+typeof Infinity === 'number';
+typeof NaN === 'number'; // A pesar de ser un "Not-A-Number"
+typeof Number(1) === 'number'; // però no l'utilitzeu mai així!
+
+
+// Strings
+typeof "" === 'string';
+typeof "bla" === 'string';
+typeof (typeof 1) === 'string'; // typeof sempre retorna una string
+typeof String("abc") === 'string'; // però no l'utilitzeu mai així!
+
+
+// Booleans
+typeof true === 'boolean';
+typeof false === 'boolean';
+typeof Boolean(true) === 'boolean'; // però no l'utilitzeu mai així!
+
+
+// Symbols
+typeof Symbol() === 'symbol'
+typeof Symbol('foo') === 'symbol'
+typeof Symbol.iterator === 'symbol'
+
+
+// Undefined
+typeof undefined === 'undefined';
+typeof blabla === 'undefined'; // una variable no definida
+
+
+// Objects
+typeof {a:1} === 'object';
+
+// utilitzeu Array.isArray o bé Object.prototype.toString.call
+// per a diferenciar objectes normals d'arrays
+typeof [1, 2, 4] === 'object';
+
+typeof new Date() === 'object';
+
+
+// Els següents exemples són confusos, no els utilitzeu!
+typeof new Boolean(true) === 'object';
+typeof new Number(1) === 'object';
+typeof new String("abc") === 'object';
+
+
+// Funcions
+typeof function(){} === 'function';
+typeof Math.sin === 'function';
+
+ +

null

+ +
// Això es manté així des de l'inici de JavaScript
+typeof null === 'object';
+
+ +

A la primera implementació de JavaScript, els valors de JavaScript es representaven com a una etiqueta de tipus i un valor. L'etiqueta de tipus per objectes era 0. null era representat amb el punter NULL (0x00 a la majoria de plataformes). D'aquesta manera null tenia 0 com a etiqueta de tipus, i això és el que determina que typeof retorni 'object' per a null. (referència)

+ +

Es va proposar una esmena per a canviar aquest comportament per l'ECMAScript (via una opt-in), però aquesta va ser rebutjada. El resultat hagués estat typeof null === 'null'.

+ +

Expressions regulars

+ +

Expressions regulars que poden ser cridades van ser un afegit no standard en alguns navegadors web.

+ +
typeof /s/ === 'function'; // Chrome 1-12 No cumpleix l'standard ECMAScript 5.1
+typeof /s/ === 'object';   // Firefox 5+  D'acord amb ECMAScript 5.1
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
1a edició ECMAScript.EstàndardDefinició inicial. Implementat en JavaScript 1.1
{{SpecName('ES5.1', '#sec-11.4.3', 'The typeof Operator')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-typeof-operator', 'The typeof Operator')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

Els objects host a Internet Explorer són objectes en comptes de funcions

+ +

A IE 6, 7, i 8 molts dels host objects són objectes i no funcions. Per exemple:

+ +
typeof alert === 'object'
+ +

Vegeu també

+ + diff --git a/files/ca/web/javascript/reference/operators/void/index.html b/files/ca/web/javascript/reference/operators/void/index.html new file mode 100644 index 0000000000..ddf98ebfd9 --- /dev/null +++ b/files/ca/web/javascript/reference/operators/void/index.html @@ -0,0 +1,138 @@ +--- +title: L'operador void +slug: Web/JavaScript/Referencia/Operadors/void +translation_of: Web/JavaScript/Reference/Operators/void +--- +
{{jsSidebar("Operators")}}
+ +

Resum

+ +

L'operador void evalua l'expressió donada i retorna undefined.

+ +

Sintaxi

+ +
void expressió
+ +

Descripció

+ +

Aquest operador permet inserir expressions que produeixen efectes secundaris en llocs on es vol una expressió que s'evalui a undefined.

+ +

L'operador void tot sovint s'utilitza simplement per a obtenir el valor primitiu undefined, normalment usant "void(0)" (que és equivalent a "void 0"). En aquests casos es pot utilitzar la variable global undefined en comptes de l'operador void (asumint que no ha sigut assignada a un valor no standard).

+ +

Expressions de funció invocades de forma immediata

+ +

A l'utilitzar una expressió de funció invocada de forma immediata, es pot usar void per a forçar que la paraula clau function sigui tractada com a una expressió en comptes d'una declaració.

+ +
void function iife() {
+    var bar = function () {};
+    var baz = function () {};
+    var foo = function () {
+        bar();
+        baz();
+     };
+    var biz = function () {};
+
+    foo();
+    biz();
+}();
+
+ +

URIs de JavaScript

+ +

Quan un navegador segueix una URI de l'estil javascript: , aquest evalua el codi que hi ha a la URI i llavors reemplaça el contingut de la pàgina amb el valor retornat, a no ser que el valor retornat sigui undefined. L'operador void pot ser emprat en aquest case per a retornar undefined. Per exemple:

+ +
<a href="javascript:void(0);">
+  Cliqueu aquí per a no fer res
+</a>
+
+<a href="javascript:void(document.body.style.backgroundColor='green');">
+  Clique aquí per a un fons de color verd
+</a>
+
+ +

Tingueu en compte, però, que el pseudo protocol javascript: no és recomanat ja que existeixen alternatives, com ara manegadors d'events no obtrusius.

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat al JavaScript 1.1
{{SpecName('ES5.1', '#sec-11.4.2', 'The void Operator')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-void-operator', 'The void Operator')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

Vegeu també

+ + diff --git a/files/ca/web/javascript/reference/operators/yield/index.html b/files/ca/web/javascript/reference/operators/yield/index.html new file mode 100644 index 0000000000..d01f641767 --- /dev/null +++ b/files/ca/web/javascript/reference/operators/yield/index.html @@ -0,0 +1,152 @@ +--- +title: yield +slug: Web/JavaScript/Referencia/Operadors/yield +translation_of: Web/JavaScript/Reference/Operators/yield +--- +
{{jsSidebar("Operators")}}
+ +

Resum

+ +

La paraula clau yield s'utilitza per a pausar i reprendre una funció generadora ({{jsxref("Statements/function*", "function*")}} o bé una funció generadora obsoleta).

+ +

Sintaxi

+ +
 yield [[expressió]];
+ +
+
expressió
+
La expresssió a retornar. Si s'omet es retorna undefined.
+
+ +

Descripció

+ +

La paraula clau yield causa que l'execució d'una funció generadora es pausi i retorni el valor de l'expressió que la segueix. La paraula clau yield es pot entendre com una versió de la paraula clau return per a generadors.

+ +

La paraula clau yield retorna en realitat un objecte de tipus IteratorResult amb dues propietats: value i done. La propietat value és el resultat d'evaluar l'expresssió que segueix yield mentre que la propietat done és de tipus booleà i indica si la funció generadora ha completat la seva execució o no.

+ +

Un cop pausada mitjançant una expressió yield, l'execució de codi del generador no es reprendrà a no ser que s'invoqui externament mitjançant la crida a la funció next() del generador. Això permet un control directe de l'execució del generador i valors de retorn incrementals.

+ +

Exemples

+ +

El següent codi és un exemple de la declaració d'una funció generadora al llarg d'una funció d'ajut.

+ +
function* foo(){
+  var index = 0;
+  while (index <= 2) // quan index arriba a 3,
+                     // la propietat done del yield serà true
+                     // i el seu valor serà undefined;
+    yield index++;
+}
+ +

Un cop la funció generadora és definida es pot utilitzar tot construïnt un iterador tal i com es mostra a continuació:

+ +
var iterator = foo();
+console.log(iterator.next()); // { value:0, done:false }
+console.log(iterator.next()); // { value:1, done:false }
+console.log(iterator.next()); // { value:2, done:false }
+console.log(iterator.next()); // { value:undefined, done:true }
+ +

Especificacions

+ + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#', 'Yield')}}{{Spec2('ES6')}}Definició inicial
+ +

Compatibilitat amb navegadors

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suport bàsic39{{CompatGeckoDesktop("26.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Objecte IteratorResult en comptes de throwing{{CompatUnknown}}{{CompatGeckoDesktop("29.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsicyes (when?){{CompatGeckoMobile("26.0")}}{{CompatUnknown}}{{ CompatUnknown}}{{CompatUnknown}}
Objecte IteratorResult en comptes de throwing{{CompatUnknown}}{{CompatGeckoMobile("29.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Notes específiques per a Firefox

+ +
    +
  • A partir de Gecko 29 {{geckoRelease(29)}} la funció generadora, un cop completada, no llença un {{jsxref("TypeError")}} "generator has already finished" sino que retorna un objecte de tipus IteratorResult com per exemple { value: undefined, done: true } ({{bug(958951)}}).
    • +
  • A partir de Gecko 33 {{geckoRelease(33)}} l'anàlisi de l'expressió que segueix al yield s'ha actualitzat per a satisfer l'especificació de ES6 ({{bug(981599)}}): +
      +
    • L'expressió que segueix la paraula clau yield és opcional i si s'omet ja no es llença SyntaxError: function* foo() { yield; }
      • +
    +
    • +
+ +

Vegeu tambè

+ +
    +
  • El protocol dels iteradors
    • +
  • {{jsxref("Statements/function*", "function*")}}
    • +
  • {{jsxref("Operators/function*", "function* expression")}}
    • +
  • {{jsxref("Operators/yield*", "yield*")}}
    • +
diff --git a/files/ca/web/javascript/reference/statements/block/index.html b/files/ca/web/javascript/reference/statements/block/index.html new file mode 100644 index 0000000000..cfa5d7fd20 --- /dev/null +++ b/files/ca/web/javascript/reference/statements/block/index.html @@ -0,0 +1,138 @@ +--- +title: block +slug: Web/JavaScript/Referencia/Sentencies/block +translation_of: Web/JavaScript/Reference/Statements/block +--- +
+
{{jsSidebar("Statements")}}
+
+ +

Resum

+ +

Una sentència bloc (o sentència composta en altres llengües) s'usa per agrupar zero o més sentències. El bloc està delimitat per un parell de claus.

+ +

Sintaxi

+ +
{
+  sentència_1;
+  sentència_2;
+  ...
+  sentència_n;
+}
+
+ +
+
statement_1, statement_2, statement_n
+
Sentències agrupades dins la sentència block.
+
+ +

Descripció

+ +

Aquesta sentència s'utilitza normalment amb les sentències de control de flux (p.ex. if, for, while). Per exemple:

+ +
while (x < 10) {
+  x++;
+}
+
+ +

Tingueu en compte que la sentència block no acaba amb un punt i coma.

+ +

La sentència bloc sovint s'anomena sentència composta en altres llengües. Aquesta sentència permet usar múltiples sentències allà on JavaScript espera només una única sentència. Combinar sentències en blocs és una pràctica comuna en JavaScript. El comportament oposat és possible fent servir una sentència buida, on no es proporciona cap declaració, encara que es requereixi una.

+ +

Fora de l'àmbit del bloc

+ +

Important: Les variables declarades amb var no tenen àmbit de bloc. Les variables introduïdes amb un bloc estàn en l'àmbit de la funció o l'script que els conté, i els efectes d'establir-los persisteixen més enllà del mateix bloc. En altres paraules, les sentències de bloc no introdueixen un àmbit. Encara que els blocs "independents" són sintàcticament vàlids, no és desitjable usar-los en JavaScript, ja que no fan el que pensem que fan, en el cas que penseu que fan alguna cosa semblant als blocs en C o Java. Per exemple:

+ +
var x = 1;
+{
+  var x = 2;
+}
+console.log(x); // logs 2
+
+ +

Això registra 2 ja que la sentència var x dins el bloc es troba en el mateix àmbit que la sentència var x anterior al bloc. En C o Java, el codi equivalent hauria emès 1.

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacionsEstatComentaris
1a edició d'ECMAScript.EstàndardDefinició inicial. Implementat en JavaScript 1.0
{{SpecName('ES5.1', '#sec-12.1', 'Block statement')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-block', 'Block statement')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Statements/while", "while")}}
    • +
diff --git a/files/ca/web/javascript/reference/statements/break/index.html b/files/ca/web/javascript/reference/statements/break/index.html new file mode 100644 index 0000000000..d71eff620d --- /dev/null +++ b/files/ca/web/javascript/reference/statements/break/index.html @@ -0,0 +1,154 @@ +--- +title: break +slug: Web/JavaScript/Referencia/Sentencies/break +translation_of: Web/JavaScript/Reference/Statements/break +--- +
{{jsSidebar("Statements")}}
+ +

La sentència break acaba el bucle actual, {{jsxref("Statements/switch", "switch")}}, o una sentència {{jsxref("Statements/label", "label")}} i transfereix el control de programa a la sentència següent de la sentència acabada.

+ +

Sintaxi

+ +
break [etiqueta];
+ +
+
Etiqueta
+
Opcional. És l'identificador associat amb l'etiqueta de la sentència. Si la sentència no és un bucle o un {{jsxref("Statements/switch", "switch")}}, això és necessari.
+
+ +

Descripció

+ +

La sentència break inclou una etiqueta opcional que permet al programa sortir de la sentència etiquetada. La sentència break necessita ser imbricada dins l'etiqueta de referència. La sentència etiquetada pot ser qualsevol sentència {{jsxref("Statements/block", "block")}}, no ha de ser precedida per una sentència de bucle.

+ +

Exemples

+ +

La funció següent té una sentència break que acaba amb el bucle{{jsxref("Statements/while", "while")}} quan i és 3, per després retornar el valor 3 * x.

+ +
function testBreak(x) {
+  var i = 0;
+
+  while (i < 6) {
+    if (i == 3) {
+      break;
+    }
+    i += 1;
+  }
+
+  return i * x;
+}
+ +

El codi següent utilitza sentències break amb blocs etiquetats. Una sentència break ha de ser imbricada dins de qualsevol etiqueta que fa referència. Vegeu que inner_block és troba imbricada dins outer_block.

+ +
outer_block: {
+  inner_block: {
+    console.log('1');
+    break outer_block; // surt tan de inner_block com de outer_block
+    console.log(':-('); // es salta
+  }
+  console.log('2'); // es salta
+}
+
+ +

El codi següent també utilitza sentències break amb blocs etiquetats però cenera un Syntax Error perquè la sentència break es troba dins de block_1 però fa referència a block_2. Una sentència break ha d'estar sempre imbricada dins de l'eitqueta a la que fa referència.

+ +
block_1: {
+  console.log('1');
+  break block_2; // SyntaxError: etiqueta no trobada
+}
+
+block_2: {
+  console.log('2');
+}
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Versió no etiquetada.
{{SpecName('ES3')}}{{Spec2('ES3')}}versió etiquetada afegida.
{{SpecName('ES5.1', '#sec-12.8', 'Break statement')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-break-statement', 'Break statement')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Statements/continue", "continue")}}
    • +
  • {{jsxref("Statements/label", "label")}}
    • +
  • {{jsxref("Statements/switch", "switch")}}
    • +
diff --git a/files/ca/web/javascript/reference/statements/continue/index.html b/files/ca/web/javascript/reference/statements/continue/index.html new file mode 100644 index 0000000000..a6928d15b7 --- /dev/null +++ b/files/ca/web/javascript/reference/statements/continue/index.html @@ -0,0 +1,199 @@ +--- +title: continue +slug: Web/JavaScript/Referencia/Sentencies/continue +translation_of: Web/JavaScript/Reference/Statements/continue +--- +
{{jsSidebar("Statements")}}
+ +

La sentència continue acaba l'execució de les sentències en la iteració actual del bucle actual o etiquetat, i continua l'execució del bucle amb la següent iteració.

+ +

Sintaxi

+ +
continue [etiqueta];
+ +
+
Etiqueta
+
Identificador associat amb l'etiqueta de la sentència.
+
+ +

Descripció

+ +

En contrast amb la sentència {{jsxref("Statements/break", "break")}} , continue no acaba l'execució del bucle: En comptes d'això,

+ +
    +
  • En un bucle {{jsxref("Statements/while", "while")}}, salta un altre cop a la condició.
    • +
+ +
    +
  • En un bucle {{jsxref("Statements/for", "for")}}, Salta a l'actualització de l'expressió.
    • +
+ +

La sentència continue pot incloure una etiqueta opcional que permet al programa saltar a la següent iteració d'una sentència d'un bucle etiquetat en comptes del bucle actual. En aquest cas, la sentència continue necessita trobar-se imbricada dins de la sentència etiquetada.

+ +

Exemples

+ +

Utilitzar continue amb while

+ +

L'exemple següent mostra un bucle{{jsxref("Statements/while", "while")}} que contè una sentència continue que s'executa quan el valor de i és 3. Així doncs, n pren els valors 1, 3, 7, i 12.

+ +
var i = 0;
+var n = 0;
+
+while (i < 5) {
+  i++;
+
+  if (i === 3) {
+    continue;
+  }
+
+  n += i;
+}
+
+ +

Utilitzar continue amb una etiqueta

+ +

En l'exemple següent, una sentència etiquetada checkiandj contè una sentència etiquetada checkj. si es troba un continue, el programa continua al començament de la sentència checkj. Cada cop que es troba continue, checkj reitera fins que la condició retorna falç. Quan es retorna falç, es completa la resta de la sentència checkiandj.

+ +

Si continue té una etiqueta de checkiandj, el programa continuarà al començament de la sentència checkiandj.

+ +

Vegeu també {{jsxref("Statements/label", "label")}}.

+ +
var i = 0;
+var j = 8;
+
+checkiandj: while (i < 4) {
+  console.log("i: " + i);
+  i += 1;
+
+  checkj: while (j > 4) {
+    console.log("j: "+ j);
+    j -= 1;
+
+    if ((j % 2) == 0)
+      continue checkj;
+    console.log(j + " is odd.");
+  }
+  console.log("i = " + i);
+  console.log("j = " + j);
+}
+
+ +

Resultat:

+ +
"i: 0"
+
+// start checkj
+"j: 8"
+"7 is odd."
+"j: 7"
+"j: 6"
+"5 is odd."
+"j: 5"
+// end checkj
+
+"i = 1"
+"j = 4"
+
+"i: 1"
+"i = 2"
+"j = 4"
+
+"i: 2"
+"i = 3"
+"j = 4"
+
+"i: 3"
+"i = 4"
+"j = 4"
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Versió sense etiqueta.
{{SpecName('ES3')}}{{Spec2('ES3')}}Versió amb etiqueta afegida.
{{SpecName('ES5.1', '#sec-12.7', 'Continue statement')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-continue-statement', 'Continue statement')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Statements/break", "break")}}
    • +
  • {{jsxref("Statements/label", "label")}}
    • +
diff --git a/files/ca/web/javascript/reference/statements/debugger/index.html b/files/ca/web/javascript/reference/statements/debugger/index.html new file mode 100644 index 0000000000..54d8d02e3d --- /dev/null +++ b/files/ca/web/javascript/reference/statements/debugger/index.html @@ -0,0 +1,116 @@ +--- +title: debugger +slug: Web/JavaScript/Referencia/Sentencies/debugger +translation_of: Web/JavaScript/Reference/Statements/debugger +--- +
{{jsSidebar("Statements")}}
+ +

La sentència debugger invoca qualsevol funcionalitat de depuració disponible, com l'establiment d'un breakpoint (punt de ruptura). Si no hi ha cap funcionalitat de depuració disponible, aquesta sentència queda sense efecte.

+ +

Sintaxi

+ +
debugger;
+ +

Exemples

+ +

L'exemple següent mostra un codi on s'ha insertat una sentència de depuració, de forma que es crida un debugger (si existeix) quan es crida la funció.

+ +
function potentiallyBuggyCode() {
+    debugger;
+    // codi potencialment erroni a examinar, executar pas a pas, etc.
+}
+ +

Quan es crida el debugger, s'atura l'execució a la sentència del debugger. Es com un breakpoint en la font de l'script.

+ +

Paused at a debugger statement.

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-debugger-statement', 'Debugger statement')}}{{Spec2('ES6')}} 
{{SpecName('ES5.1', '#sec-12.15', 'Debugger statement')}}{{Spec2('ES5.1')}}Definició inicial
{{SpecName('ES3', '#sec-7.5.3', 'Debugger statement')}}{{Spec2('ES3')}} 
{{SpecName('ES1', '#sec-7.4.3', 'Debugger statement')}}{{Spec2('ES1')}}Només mencionat com a paraula reservada.
+ +

Compatibilitat amb navegadors

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ + diff --git a/files/ca/web/javascript/reference/statements/do...while/index.html b/files/ca/web/javascript/reference/statements/do...while/index.html new file mode 100644 index 0000000000..88f221f83d --- /dev/null +++ b/files/ca/web/javascript/reference/statements/do...while/index.html @@ -0,0 +1,124 @@ +--- +title: do...while +slug: Web/JavaScript/Referencia/Sentencies/do...while +translation_of: Web/JavaScript/Reference/Statements/do...while +--- +
{{jsSidebar("Statements")}}
+ +

La sentència do...while crea un bucle que executa una sentència especificada fins que la condició avalui a fals. La condició s'avalua després de la sentència, donant lloc a l'execució de la sentència especificada almenys un cop.

+ +

Sintaxi

+ +
do
+   sentència
+while (condició);
+
+ +
+
sentència
+
Una sentència que s'executa almenys un cop i que es torna a executar cada cop que la condició avalui a certa. Per executar múltiples sentències dins d'un bucle, utilitzeu una sentència {{jsxref("Statements/block", "block")}} ({ ... }) per agrupar aquestes sentències.
+
+ +
+
condició
+
Una expressió que s'avalua després de cada volta del bucle. si condició avalua a certa, la sentència es torna a executar. Quan la condició avalua a falç, control passa a la següent sentència que segueix el do...while.
+
+ +

Exemples

+ +

Utilitzar el do...while

+ +

En l'exemple següent, el bucle do...while itera almenys un cop i torna a iterar fins que i deixa de ser més petit que 5.

+ +
var i = 0;
+do {
+   i += 1;
+   console.log(i);
+} while (i < 5);
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES3')}}{{Spec2('ES3')}}Definició inicial. Implementat en JavaScript 1.2
{{SpecName('ES5.1', '#sec-12.6.1', 'do-while statement')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-do-while-statement', 'do-while statement')}}{{Spec2('ES6')}}Trailing ; ara és opcional.
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}6{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Statements/while", "while")}}
    • +
  • {{jsxref("Statements/for", "for")}}
    • +
diff --git a/files/ca/web/javascript/reference/statements/empty/index.html b/files/ca/web/javascript/reference/statements/empty/index.html new file mode 100644 index 0000000000..6800d476f8 --- /dev/null +++ b/files/ca/web/javascript/reference/statements/empty/index.html @@ -0,0 +1,138 @@ +--- +title: Buida +slug: Web/JavaScript/Referencia/Sentencies/Buida +translation_of: Web/JavaScript/Reference/Statements/Empty +--- +
+
{{jsSidebar("Statements")}}
+
+ +

Resum

+ +

Una sentència buida es fa servir per no proveïr cap sentència, encara que la sintaxi de JavaScript n'esperaria una.

+ +

Sintaxi

+ +
;
+
+ +

Descripció

+ +

La sentència buida és un punt i coma (;) que indica que cap sentència s'executarà, encara que la sintaxi de JavaScript en requereixi una. Pel contrari, quan es vol realitzar múltiples sentències, però JavaScript només en permet un, és possible realitzar-ho mitjançant l'ús d'una sentència de block; que combina diverses sentències en una única sentència.

+ +

Exemples

+ +

La sentència buida sovint s'utilitza amb sentències de bucles. Vegeu l'exemple segúent amb el cos del bucle buit:

+ +
var arr = [1, 2, 3];
+
+// Assign all array values to 0
+for (i = 0; i < arr.length; arr[i++] = 0) /* empty statement */ ;
+
+console.log(arr)
+// [0, 0, 0]
+
+ +

Nota: És una bona idea comentar l'ús intencional de la sentència buida, ja que no és fa molt obvi diferenciar-lo d'un punt i coma normal. En el següent exemple l'ús probablement no és intencional:

+ +
if (condition);       // Caution, this "if" does nothing!
+   killTheUniverse()  // So this gets always executed!!!
+
+ +

Un altre exemple: Una sentència if...else sense claus ({}). Si tres és cert, no passarà res, four does not matter, ni tampoc s'executarà la funció launchRocket() en el cas else.

+ +
if (one)
+  doOne();
+else if (two)
+  doTwo();
+else if (three)
+  ; // nothing here
+else if (four)
+  doFour();
+else
+  launchRocket();
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
1a edició de ECMAScript.EstàndardDefinició inicial.
{{SpecName('ES5.1', '#sec-12.3', 'Empty statement')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-empty-statement', 'Empty statement')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Statements/block", "Block statement")}}
    • +
diff --git a/files/ca/web/javascript/reference/statements/export/index.html b/files/ca/web/javascript/reference/statements/export/index.html new file mode 100644 index 0000000000..c1d92ab504 --- /dev/null +++ b/files/ca/web/javascript/reference/statements/export/index.html @@ -0,0 +1,158 @@ +--- +title: export +slug: Web/JavaScript/Referencia/Sentencies/export +translation_of: Web/JavaScript/Reference/Statements/export +--- +
{{jsSidebar("Statements")}}
+ +

La sentència export s'utilitza per exportar funcions, objectes o valors primitius d'un fitxer donat (o mòdul) per a que els puguin fer servir altres programes amb la sentència {{jsxref("Statements/import", "import")}}.

+ +

Els mòduls exportats estan sempre {{jsxref("Strict_mode","strict mode", "", 1)}}  tan si es declaren així com si no. La sentència export no es pot fer servir en mòduls incrustats (embedded).

+ +

Sintaxi

+ +
export nom1, nom2, ..., nomN;
+export default nom1
+ +
+
nomN
+
Propietat, funció, o objecte que s'ha d'exportar (de manera que es pot importar a través de import en un altre script).
+
+ +

Descripció

+ +

Hi ha dos tipus diferents d'export:

+ +
    +
  • Exportacions nominals (una o més per mòdul): + 
    export myFunction; // exporta una funció declarada anteriorment
+export const foo = Math.sqrt(2); // exporta una constant
+export let name1, name2, …, nameN;
+export let name1 = …, name2 = …, …, nameN;
+export function functionName(){...}
+export class ClassName {...}
    +
    • +
  • Exportacions per defecte (una per mòdul): + 
    export default expression;
+export default function (…) { … } // també class, function*
+export default function name1(…) { … } // també class, function*
+export { name1 as default, … };
    +
    • +
+ +

Les exportacions amb nom són útils per exportar diversos valors. Durant la importació, un serà capaç d'utilitzar el mateix nom per referir-se al valor corresponent.

+ +

Sobre la exportació per defecte, només pot haver-n'hi una per mòdul. Una exportació per defecte pot ser una funció, una classe un objecte o qualsevol altra cosa. Aquest valor es considerarà el principal valor exportat, ja que serà el més fàcil d'importar.

+ +

Exemples

+ +

Usant les exportacions nominals

+ +

En el mòdul podem fer servir el codi següent:

+ +
// "modul.js"
+export function cub(x) {
+  return x * x * x;
+}
+const foo = Math.PI + Math.SQRT2;
+export foo;
+
+ +

Així, en un altre mòdul podem tenir:

+ +
import { cub, foo } from 'modul.js';
+console.log(cub(3)); // 9
+console.log(foo);    // 4.555806215962888
+ +

Usant l'exportació per defecte

+ +

Si volem exportar un únic valor o tenir un valor per defecte per al nostre mòdul podem fer::

+ +
// "modul.js"
+var function cub(x) {
+  return x * x * x;
+}
+export default cub;
+ +

Així, en un altre mòdul podem importar directament:

+ +
import laFuncio from 'modul';
+console.log(laFuncio(3)); // 9
+
+ +

Especificacions

+ + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-imports', 'Imports')}}{{Spec2('ES6')}}Definició inicial
+ +

Compatibilitat amb navegadors

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Vegeu també

+ + diff --git a/files/ca/web/javascript/reference/statements/for...of/index.html b/files/ca/web/javascript/reference/statements/for...of/index.html new file mode 100644 index 0000000000..5cc16f52f8 --- /dev/null +++ b/files/ca/web/javascript/reference/statements/for...of/index.html @@ -0,0 +1,181 @@ +--- +title: for...of +slug: Web/JavaScript/Referencia/Sentencies/for...of +translation_of: Web/JavaScript/Reference/Statements/for...of +--- +
+
{{jsSidebar("Statements")}}
+
+ +

Resum

+ +

La instrucció for...of crea un bucle que itera sobre objectes iterables (incloent {{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, l'objecte arguments, etcètera), tot invocant un bloc de codi amb les instruccions a executar per a cada valor de la propietat.

+ +

Sintaxi

+ +
for (variable of objecte)
+  codi
+
+ +
+
variable
+
A cada iteració el valor d'una propietat diferent és asignat a variable.
+
objecte
+
L'objecte del qual s'iteren les propietats, que són iterables.
+
+ +

Exemples

+ +

Diferència entre for...of i for...in

+ +

El següent exemple mostra la diferència entre el bucle for...of i el bucle for...in. Mentre for...in itera sobre noms de propietats, for...of itera sobre els valors de les propietats:

+ +
let arr = [3, 5, 7];
+arr.foo = "hola";
+
+for (let i in arr) {
+   console.log(i); // mostra "0", "1", "2", "foo"
+}
+
+for (let i of arr) {
+   console.log(i); // mostra "3", "5", "7"
+}
+
+ +

Ús de Array.prototype.forEach()

+ +

Per a aconseguir els mateixos valors que s'obtenen amb for...of també es pot utilitzar el mètode {{jsxref("Array.prototype.forEach()")}}:

+ +
let arr = [3, 5, 7];
+arr.foo = "hola";
+
+arr.forEach(function (element, index) {
+    console.log(element); // mostra "3", "5", "7"
+    console.log(index);   // mostra "0", "1", "2"
+});
+
+// or with Object.keys()
+
+Object.keys(arr).forEach(function (element, index) {
+    console.log(arr[element]); // mostra "3", "5", "7", "hello"
+    console.log(arr[index]);   // mostra "3", "5", "7"
+});
+ +

Iteració de coleccions del DOM

+ +

Iterant sobre coleccions del DOM com {{domxref("NodeList")}}: el següent exemple afegeix la classe read als paràgrafs que són descendens directes d'un article:

+ +
// Nota: Això només funcionarà en plataformes que
+// implementen NodeList.prototype[Symbol.iterator]
+let articleParagraphs = document.querySelectorAll("article > p");
+
+for (let paragraph of articleParagraphs) {
+  paragraph.classList.add("read");
+}
+
+ +

Iteració de generadors:

+ +

Els generadors també són iterables:

+ +
function* fibonacci() { // una funció generadora
+    let [prev, curr] = [0, 1];
+    for (;;) {
+        [prev, curr] = [curr, prev + curr];
+        yield curr;
+    }
+}
+
+for (let n of fibonacci()) {
+    // trunca la seqüència als 1000
+    if (n > 1000)
+        break;
+    print(n);
+}
+
+ +

Especificacions

+ + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('ES6', '#sec-for-in-and-for-of-statements', 'for...of statement')}}{{Spec2('ES6')}}Definició inicial.
+ +

Compatibilitat amb navegadors

+ +

{{CompatibilityTable()}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome(29)}}[1]
+ {{CompatChrome(38)}}		{{CompatGeckoDesktop("13")}}
+ {{CompatGeckoDesktop("17")}} (.iterator)
+ {{CompatGeckoDesktop("27")}} ("@@iterator")
+ {{CompatGeckoDesktop("36")}} (Symbol.iterator)		{{CompatNo}}257.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatUnknown}}{{CompatChrome(29)}}[1]
+ {{CompatChrome(38)}}		{{CompatGeckoMobile("13")}}
+ {{CompatGeckoMobile("17")}} (.iterator)
+ {{CompatGeckoMobile("27")}} ("@@iterator")
+ {{CompatGeckoMobile("36")}} (Symbol.iterator)		{{CompatUnknown}}{{CompatUnknown}}iOS 8
+
+ +

[1] La característica està disponible sota una preferència. A chrome://flags/#enable-javascript-harmony, activar la entrada “Enable Experimental JavaScript”.

+ +

Vegeu també

+ +
    +
  • for each...in - una instrucció similar, però itera els valors de les propietats d'un objecte en comptes de les propietats mateixes de l'objecte (en desús).
    • +
  • {{jsxref("Array.prototype.forEach()")}}
    • +
diff --git a/files/ca/web/javascript/reference/statements/for/index.html b/files/ca/web/javascript/reference/statements/for/index.html new file mode 100644 index 0000000000..00a16b62df --- /dev/null +++ b/files/ca/web/javascript/reference/statements/for/index.html @@ -0,0 +1,190 @@ +--- +title: for +slug: Web/JavaScript/Referencia/Sentencies/for +translation_of: Web/JavaScript/Reference/Statements/for +--- +
+
{{jsSidebar("Statements")}}
+
+ +

Resum

+ +

La sentència for crea un bucle que consta de tres expressions opcionals, embolcallades entre paràntesis i separades per punts i comes, seguits d'una sentència o un grup de sentències executades en el bucle.

+ +

Sintaxi

+ +
for ([inicialització]; [condició]; [expressió final])
+   sentència
+
+ +
+
inicialització
+
Una expressió (incloent expressions d'assignació) o declaració de variables. Normalment s'usa per inicialitzar una variable al contador. Opcionalment aquesta expressió pot declarar noves variables amb la paraula clau var.  Aquestes variables no sóc locals pel bucle, és a dir, es troben en el mateix àmbit en que es troba el bucle for. El resultat d'aquesta expressió es descarta.
+
condició
+
Una expressió que s'avalua abans de cada iteració del bucle. Si aquesta expressió s'avalua true, s'executa la sentència. Aquesta prova condicional és opcional. Si s'omet, la condició sempre avalua true. Si l'expressió avalua a false, l'execució salta a la primera expressió que es trobi després del constructe for.
+
Expressió final
+
Una expressió per ser avaluada al final de cada iteració del bucle. Això passa abans de la següent avaluació de condició. Generalment s'usa per actualitzar o incrementar la variable contador.
+
sentència
+
Una sentència que s'executa mentre la condició avalui a true. Per executar múltiples sentències dins el bucle, utilitzeu una sentència block ({ ... }) per agrupar aquestes sentències. Per no executar cap sentència dins el bucle, utilitzeu una sentència buida  (;).
+
+ +

Exemples

+ +

Exemple: Fer servir for

+ +

La següent sentència for comença declarant la variable i i l'inicialitza a 0. Comprova que  i és menor que nou, realitza les dues sentències següents, i incrementa i per 1 després de cada pas pel bucle.

+ +
for (var i = 0; i < 9; i++) {
+   console.log(i);
+   // more statements
+}
+
+ +

Exemple: Expressions for opcionals

+ +

Les tres expressions en la capçalera del bucle for són opcionals.

+ +

Per exemple, enel bloc d'inicialització no es requereix inicialitzar les variablesblock it is not required to initialize variables:

+ +
var i = 0;
+for (; i < 9; i++) {
+    console.log(i);
+    // more statements
+}
+
+ +

Com el bloc d'inicialització, el bloc de condició també és opcional. Si s'omet aquesta expressió, s'ha de d'assegurar de trencar el bucle en el cos per evitar crear un bucle infinit.

+ +
for (var i = 0;; i++) {
+   console.log(i);
+   if (i > 3) break;
+   // more statements
+}
+ +

També es pot ometre els tres blocs. Un alre cop, assegureu-vos de fer servir la sentència break per finalitzar el bucle i també modificar (incrementar) una variable, de forma que la condició per la sentència break esdevé certa en algun moment determinat.

+ +
var i = 0;
+
+for (;;) {
+  if (i > 3) break;
+  console.log(i);
+  i++;
+}
+
+ +

Exemple: Fer servir for amb una sentència buida

+ +

El cicle for següent callcula la possició de desplaçament d'un node en la secció  [expressió final], i per tant no requereix l'ús d'una sentència o secció de sentències block, es fa servir una sentència buida en el seu lloc.

+ +
function showOffsetPos (sId) {
+  var nLeft = 0, nTop = 0;
+
+  for (var oItNode = document.getElementById(sId); // initialization
+       oItNode; // condition
+       nLeft += oItNode.offsetLeft, nTop += oItNode.offsetTop, oItNode = oItNode.offsetParent) // final-expression
+       /* empty statement */ ;
+
+  console.log("Offset position of \"" + sId + "\" element:\n left: " + nLeft + "px;\n top: " + nTop + "px;");
+}
+
+// Example call:
+
+showOffsetPos("content");
+
+// Output:
+// "Offset position of "content" element:
+// left: 0px;
+// top: 153px;"
+ +
Nota: En aquest cas, quan no es fa servir la secció sentència, es fica un punt i coma immediatament despres de la declaració del cicle.
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
1a edició de ECMAScript.EstàndardDefinició inicial.
{{SpecName('ES5.1', '#sec-12.6.3', 'for statement')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-for-statement', 'for statement')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Statements/break", "break")}}
    • +
  • {{jsxref("Statements/continue", "continue")}}
    • +
  • {{jsxref("Statements/empty", "empty")}}
    • +
  • {{jsxref("Statements/while", "while")}}
    • +
  • do...while
    • +
  • for...in
    • +
  • for...of
    • +
diff --git a/files/ca/web/javascript/reference/statements/function/index.html b/files/ca/web/javascript/reference/statements/function/index.html new file mode 100644 index 0000000000..37deff748f --- /dev/null +++ b/files/ca/web/javascript/reference/statements/function/index.html @@ -0,0 +1,171 @@ +--- +title: function +slug: Web/JavaScript/Referencia/Sentencies/function +translation_of: Web/JavaScript/Reference/Statements/function +--- +
+
{{jsSidebar("Statements")}}
+
+ +

Resum

+ +

La declaració d'una funció defineix una funció amb uns paràmetres especificats.

+ +
+

També podeu definir funcions fent servir el constructor {{jsxref("Function")}} i un {{jsxref("Operators/function", "function expression")}}.

+
+ +

Sintaxi

+ +
function nom([paràm,[, paràm,[..., paràm]]]) {
+   [sentències]
+}
+
+ +
+
nom
+
El nom de la funció.
+
+ +
+
paràm
+
El nom d'un argument que se li passarà a la funció. Una funció pot arribar a tenir fins a 255 arguments.
+
+ +
+
sentències
+
Les sentències que comprenen el cos de la funció.
+
+ +

Descripció

+ +

Una funció creada amb una declaració d'una funció és un objecte Function i té totes les propietats, mètodes i comportament dels objectes Function. Vegeu {{jsxref("Function")}} per informació detallada sobre funcions.

+ +

Una funció també es pot crear fent servir una expressió (vegeu {{jsxref("Operators/function", "function expression")}}).

+ +

Per defecte, les funcions retornen undefined. Per tal de retornar qualsevol altre valor, la funció ha de tenir una sentència {{jsxref("Statements/return", "return")}} que especifiqui el valor que retorna.

+ +

Funcions creades de forma condicional

+ +

Les funcions poden ser declarades de forma condicional, és a dir, una sentència d'una funció pot estar aniuada dins d'una sentència if. La majoria de navegadors que no siguin Mozilla tractaran aquestes declaracions condicionals com a declaracions incondicionals i crearàn la funció tant si la condició és vertadera o falsa, vegeu aquest article per una visió general. Per tant, no s'haurien de fer servir, per creacions condicionals feu servir expressions de funcions.

+ +

Declarar les funcions abans de definir-les (hosting)

+ +

Function declarations in JavaScript are hoisting the function definition. En Javascript es pot ser cridar una funció abans de declarar-la. En anglès existeix un ver:

+ +
hoisted(); // logs "foo"
+
+function hoisted() {
+  console.log("foo");
+}
+
+ +

Vegeu que {{jsxref("Operators/function", "function expressions")}} no estan hoisted:

+ +
notHoisted(); // TypeError: notHoisted is not a function
+
+var notHoisted = function() {
+   console.log("bar");
+};
+
+ +

Exemples

+ +

Exemple: Fer servir function

+ +

El codi següent declara una funció que retorna la quantitat total de vendes, quan se li dóna el nombre d'unitat venudes d' a, b, i c.

+ +
function calc_sales(units_a, units_b, units_c) {
+   return units_a*79 + units_b * 129 + units_c * 699;
+}
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
1a edició de ECMAScript.EstàndardDefinició iniciañ. Implementat en JavaScript 1.0
{{SpecName('ES5.1', '#sec-13', 'Function definition')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Functions_and_function_scope", "Functions and function scope")}}
    • +
  • {{jsxref("Function")}}
    • +
  • {{jsxref("Operators/function", "function expression")}}
    • +
  • {{jsxref("Statements/function*", "function* statement")}}
    • +
  • {{jsxref("Operators/function*", "function* expression")}}
    • +
  • {{jsxref("GeneratorFunction")}}
    • +
diff --git a/files/ca/web/javascript/reference/statements/if...else/index.html b/files/ca/web/javascript/reference/statements/if...else/index.html new file mode 100644 index 0000000000..b45e9bea3c --- /dev/null +++ b/files/ca/web/javascript/reference/statements/if...else/index.html @@ -0,0 +1,203 @@ +--- +title: if...else +slug: Web/JavaScript/Referencia/Sentencies/if...else +translation_of: Web/JavaScript/Reference/Statements/if...else +--- +
+
{{jsSidebar("Statements")}}
+
+ +

Resum

+ +

La sentència if executa una sentència si una condició especificada és certa. Si la condició és falsa, opcionalment s'executa una declaració diferent.

+ +

Sintaxi

+ +
if (condició)
+   sentència1
+[else
+   sentència2]
+
+ +
+
condició
+
Una expressió que esdevé o certa o falsa.
+
+ +
+
sentència1
+
És la sentència que s'executa si la condició esdevé certa. Pot ser qualsevol declaració, incloent més sentències if aniuades. Per executar múltimples sentències, es fa servir una sentència block ({ ... }) per agrupar aquestes sentències, si no es vol executar cap sentència, es fa servir una sentència buida.
+
+ +
+
sentència2
+
La sentència que s'executa si la condition esdevé falsa i hi ha la clàusula else. Pot ser qualsevol sentència, incloent sentències en block i més sentències if aniuades.
+
+ +

Descripció

+ +

Múltiples sentències if...else poden aniuar-se per crear una clàusula else if. Fixeu-vos que no hi ha la paraula clau elseif (en una paraula) en JavaScript.

+ +
if (condició1)
+   sentència1
+else if (condició2)
+   sentència2
+else if (condició3)
+   sentència3
+...
+else
+   sentènciaN
+
+ +

Per veure com funciona, així es com es veuria amb l'aniuament degudament indentat.

+ +
if (condició1)
+   sentència1
+else
+   if (condició2)
+      sentència2
+   else
+      if (condició3)
+...
+
+ +

Per executar múltiples sentències dins una clàusula, utilitzeu una sentència block ({ ... }) per agrupar aquestes sentències. En general, és una bona pràctica utilitzar sempre sentències de block, especialment en codi que inclogui sentències if aniuades:

+ +
if (condició) {
+   sentència1
+} else {
+   sentència2
+}
+
+ +

No confongueu els valors booleans primitius true i false amb els valors cert i fals de l'objecte Boolean. Qualsevol valor que no sigui undefined, null, 0, NaN, o una cadena buida (""), i qualsevol objecte, incloent un objecte Boolean que tingui el valor fals, esdevé cert quan es passa a una sentència condicional. Per exemple:

+ +
var b = new Boolean(false);
+if (b) // this condition evaluates to true
+
+ +

Exemples

+ +

Exemple: Fer servir if...else

+ +
if (cipher_char === from_char) {
+   result = result + to_char;
+   x++;
+} else {
+   result = result + clear_char;
+}
+
+ +

Exemple: Fer servir else if

+ +

Vegeu que no hi ha cap sintaxi elseif en JavaScript. Tanmateix, es pot escriure amb un espai entre else i if:

+ +
if (x > 5) {
+
+} else if (x > 50) {
+
+} else {
+
+}
+ +

Exemple: Assignació dins l'expressió condicional

+ +

És recomanable no utilitzar assignacions simples en una expressió condicional, atès que l'assignació es pot confondre amb l'igualtat quan es mira per sobre el codi. Per exemple, no utilitzeu el codi següent:

+ +
if (x = y) {
+   /* do the right thing */
+}
+
+ +

Si necessiteu usar una assignació dins d'una expressió condicional, una pràctica comuna és ficar parèntesis addicionals embolcallant l'assignació. Per exemple:

+ +
if ((x = y)) {
+   /* do the right thing */
+}
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacóEstatComentaris
1a edició de ECMAScript.EstàndardDefinció inicial.
{{SpecName('ES5.1', '#sec-12.5', 'if statement')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-if-statement', 'if statement')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

Vegeu també

+ +
    +
  • {{jsxref("Statements/block", "block")}}
    • +
  • {{jsxref("Statements/switch", "switch")}}
    • +
diff --git a/files/ca/web/javascript/reference/statements/index.html b/files/ca/web/javascript/reference/statements/index.html new file mode 100644 index 0000000000..e91e446cbf --- /dev/null +++ b/files/ca/web/javascript/reference/statements/index.html @@ -0,0 +1,129 @@ +--- +title: Statements and declarations +slug: Web/JavaScript/Referencia/Sentencies +tags: + - JavaScript + - NeedsTranslation + - Reference + - TopicStub + - statements +translation_of: Web/JavaScript/Reference/Statements +--- +
{{jsSidebar("Statements")}}
+ +

Les aplicacions de JavaScript consisteixen en sentències amb una sintaxi adequada. Una sola sentència pot ocupar múltiples línies. Múltiples sentències poden donar-se en una sola línia si cada sentència és separada per un punt i coma. Això no és una paraula clau sino un grup de paraules claus.

+ +

Sentències i declaracions per categoria

+ +

Per a un llistat alfabetic vegeu el menú de l'esquerra.

+ +

Control de fluxe

+ +
+
{{jsxref("Sentencies/block", "Block")}}
+
Una sentència bloc s'utilitza per a agrupar zero o més sentències. El bloc és delimitat per un parell de claus {}.
+
{{jsxref("Sentencies/break", "break")}}
+
Acaba la sentència bucle, switch o label actual i transfereix el control del programa a la sentència que segueix la sentència que tot just s'ha acabat.
+
{{jsxref("Sentencies/continue", "continue")}}
+
Acaba l'execució de les sentències de la iteració del bucle actual o bé del bucle especificat, i continua l'execució del bucle amb la següent iteració.
+
{{jsxref("Sentencies/Empty", "Empty")}}
+
Una sentència buida s'utilitza per a proporcionar una sentència que no fa res quan JavaScript espera una sentència però no se'n necesita executar cap.
+
{{jsxref("Sentencies/if...else", "if...else")}}
+
Executa una sentència si la condició especificada és certa. Si la condició és falsa una altra sentència pot ser executada.
+
{{jsxref("Sentencies/switch", "switch")}}
+
Evalua una expressió, compara el resultat de l'evaluació amb una clàusula de tipus case i executa la sentència pertanyent a la clàusula case que és igual a l'evaluació de l'expressió.
+
{{jsxref("Sentencies/throw", "throw")}}
+
Llença una excepció definida per l'usuari.
+
{{jsxref("Sentencies/try...catch", "try...catch")}}
+
Executa un bloc de sentències i, en cas que alguna sentència del bloc llenci una excepció, executa una sentència alternativa.
+
+ +

Declaracions

+ +
+
{{jsxref("Sentencies/var", "var")}}
+
Declara una variable, opcionalment li assigna un valor.
+
{{experimental_inline()}} {{jsxref("Sentencies/let", "let")}}
+
Declara un bloc de variables d'àmbit local, opcionalment li assigna un valor.
+
{{experimental_inline()}} {{jsxref("Sentencies/const", "const")}}
+
Declara una constant de només lectura.
+
+ +

Funcions

+ +
+
{{jsxref("Sentencies/function", "function")}}
+
Declara una funció amb els paràmetres especificats.
+
{{experimental_inline()}} {{jsxref("Sentencies/function*", "function*")}}
+
Funcions generadores que permeten escriure iteradors de forma més senzilla.
+
{{jsxref("Sentencies/return", "return")}}
+
Especifica el valor que retornarà una funció.
+
+ +

Iteracions

+ +
+
{{jsxref("Sentencies/do...while", "do...while")}}
+
Crea un bucle que executa una sentència especificada fins que la condició de test s'evalua a fals. La condició s'evalua després d'executar la sentència, resultant en que la sentència especificada s'executa al menys un cop.
+
{{jsxref("Sentencies/for", "for")}}
+
Crea un bucle que sonsisteix en tres expressions opcionals embolcallades per parèntesi i separades per punts i coma, seguides d'una sentència que s'executarà en el bucle.
+
{{deprecated_inline()}} {{non-standard_inline()}} {{jsxref("Sentencies/for_each...in", "for each...in")}}
+
Itera sobre tots els valors de les propietats d'un objecte, assignant a una variable determinada el seu valor. Per a cada propietat distinta s'executa una sentència.
+
{{jsxref("Sentencies/for...in", "for...in")}}
+
Itera sobre les propietats enumerables d'un objecte en un ordre arbitrari. Per a cada propietat distinta s'executa una sentència.
+
{{experimental_inline()}} {{jsxref("Sentencies/for...of", "for...of")}}
+
Itera sobre objectes iterables (incloent arrays, objectes similar a arrays, iteradors i generadors), executant una sentència per al valor de cada propietat distinta.
+
{{jsxref("Sentencies/while", "while")}}
+
Crea un bucle que executa la sentència donada mentre una condició sigui certa. La condició s'evalua abans d'executar la sentència.
+
+ +

Altres

+ +
+
{{jsxref("Sentencies/debugger", "debugger")}}
+
Invoca qualsevol funcionalitat de depuració que estigui disponible. Si no hi ha cap funcionalitat de depuració disponible aquesta sentència no te cap efecte.
+
{{experimental_inline()}} {{jsxref("Sentencies/export", "export")}}
+
Utilitzada per a exportar funcions per a que aquestes estiguin disponibles per a imports a mòduls externs, en altres scripts.
+
{{experimental_inline()}} {{jsxref("Sentencies/import", "import")}}
+
Utilitzada per a importar funcions exportades d'un mòdul extern, un altre script.
+
{{jsxref("Sentencies/label", "label")}}
+
Asigna un identificador a una sentència. Aquest identificador pot ser emprat en sentències break o continue.
+
+ +
+
{{deprecated_inline()}} {{jsxref("Sentencies/with", "with")}}
+
Extèn la cadena d'àmbit per a una sentència.
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
ECMAScript 1a EdicióStandardDefinició inicial.
{{SpecName('ES5.1', '#sec-12', 'Statements')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-ecmascript-language-statements-and-declarations', 'Llenguatge ECMAScript: Sentències i declaracions')}}{{Spec2('ES6')}}Nou: function*, let, for...of, yield
+ +

Vegeu també

+ + diff --git a/files/ca/web/javascript/reference/statements/return/index.html b/files/ca/web/javascript/reference/statements/return/index.html new file mode 100644 index 0000000000..5b3c3e902a --- /dev/null +++ b/files/ca/web/javascript/reference/statements/return/index.html @@ -0,0 +1,183 @@ +--- +title: return +slug: Web/JavaScript/Referencia/Sentencies/return +translation_of: Web/JavaScript/Reference/Statements/return +--- +
+
{{jsSidebar("Statements")}}
+
+ +

Resum

+ +

La sentència return finalitza l'execució de la funció i especifica un valor que retornarà a la funció que l'ha cridat.

+ +

Sintaxi

+ +
return [[expressió]];
+ +
+
expressió
+
L'expressió que retorna. En cas d'ometre-s, es retorna undefined.
+
+ +

Descripció

+ +

Quan una sentència return és cridada dins una funció, l'execució d'aquesta funció s'atura. En cas d'especificar-se, un valor donat és retornat a la funció que l'ha cridat. Si s'omet l'expressió, es retornarà undefined. En les següents sentències return totes aturen l'execució de la funció:

+ +
return;
+return true;
+return false;
+return x;
+return x + y / 3;
+
+ +

Insersió automàtica de punt i coma

+ +

La sentència return es veu afectada per la insersió automàtica de punt i coma (). No hi ha cap final de línia entre la paraula clau return i l'expressió permesa.

+ +
return
+a + b;
+
+// is transformed by ASI into
+
+return;
+a + b;
+
+ +

Exemples

+ +

Exemple: Fer servir return

+ +

La següent funció retorna el quadrat del seu argument, x, on x és un nombre.

+ +
function square(x) {
+   return x * x;
+}
+
+ +

Exemple: Interrompre una funció

+ +

Una funció s'atura immediatament en el moment en que es crida return.

+ +
function counter() {
+  for (var count = 1; ; count++) {  // infinite loop
+    console.log(count + "A"); // until 5
+      if (count === 5) {
+        return;
+      }
+      console.log(count + "B");  // until 4
+    }
+  console.log(count + "C");  // never appears
+}
+
+counter();
+
+// Output:
+// 1A
+// 1B
+// 2A
+// 2B
+// 3A
+// 3B
+// 4A
+// 4B
+// 5A
+
+ +

Exemple: Returning a function

+ +

Per més informació sobre closures, llegiu la Guia de JavaScript.

+ +
function magic(x) {
+  return function calc(x) { return x * 42};
+}
+
+var answer = magic();
+answer(1337); // 56154
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
1a edició de ECMAScriptEstàndardDefinició inicial.
{{SpecName('ES5.1', '#sec-12.9', 'Return statement')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-return-statement', 'Return statement')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

Vegeu també

+ + diff --git a/files/ca/web/javascript/reference/statements/throw/index.html b/files/ca/web/javascript/reference/statements/throw/index.html new file mode 100644 index 0000000000..37d13b964b --- /dev/null +++ b/files/ca/web/javascript/reference/statements/throw/index.html @@ -0,0 +1,228 @@ +--- +title: throw +slug: Web/JavaScript/Referencia/Sentencies/throw +translation_of: Web/JavaScript/Reference/Statements/throw +--- +
{{jsSidebar("Statements")}}
+ +

La sentència throw llença una excepció definida per l'usuari. L'execució de la funció actual s'aturarà (les sentències de després de throw no s'executaran) i es passarà el control al primer bloc catch en la pila de crides. Si no existeix cap bloc catch en les funcions de crides, el programa s'acabarà.

+ +

Sintaxi

+ +
throw expressió;
+ +
+
expressió
+
L'expressió que es llença.
+
+ +

Descripció

+ +

Utilitzeu una sentència throw per llençar una excepció. Quan es llença l'excepció, expression especifica el valor de l'excepció. Cadascun dels exemples següents llença una excepció:

+ +
throw "Error2"; // genera una excepció amb un valor tipus cadena
+throw 42;       // genera una excepció amb el valor 42
+throw true;     // genera una excepció amb el valor true
+ +

Tingueu en compte que la sentència throw queda afectada per insersió automàtica de punts i comes (ASI) ja que no es permet cap final de línia entre la paraula clau throw i l'expressió.

+ +

Exemples

+ +

Llença un objecte

+ +

Es pot especificar un objecte quan es llença una excepció. Es pot fer referència a les propietats de l'objecte en el bloc catch. L'exemple següent crea un objecte myUserException de tipus UserException i l'utilitza en una sentència throw.

+ +
function UserException(message) {
+   this.message = message;
+   this.name = "UserException";
+}
+function getMonthName(mo) {
+   mo = mo-1; // Adjustar el número de mes per un índex d'array (1=Jan, 12=Dec)
+   var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul",
+      "Aug", "Sep", "Oct", "Nov", "Dec"];
+   if (months[mo] !== undefined) {
+      return months[mo];
+   } else {
+      throw new UserException("InvalidMonthNo");
+   }
+}
+
+try {
+   // sentències que s'intentarà exxecutar
+   var myMonth = 15; // 15 està fora del rang i llençarà l'excepció
+   monthName = getMonthName(myMonth);
+} catch (e) {
+   monthName = "unknown";
+   logMyErrors(e.message, e.name); // es pasa l'objecte excepció al manegador d'errors
+}
+
+ +

Un altre exemple de llençar un objecte

+ +

L'exemple següent comprova si una cadena donada és un codi postal per EE.UT. SI el codi postal utilitza un format invàlid, la sentència throw llença una excepció creant un objecte de tipus ZipCodeFormatException.

+ +
/*
+ * Crea un objecte ZipCode.
+ *
+ * Els formats acceptats per a un codi postal són:
+ *    12345
+ *    12345-6789
+ *    123456789
+ *    12345 6789
+ *
+ * Si l'argument passat al constructor ZipCode no s'adjusta a
+ * un d'aquests patrons, es llença una excepció.
+ */
+
+function ZipCode(zip) {
+   zip = new String(zip);
+   pattern = /[0-9]{5}([- ]?[0-9]{4})?/;
+   if (pattern.test(zip)) {
+      // el valor del codi postal serà el primer trobat dins la cadena
+      this.value = zip.match(pattern)[0];
+      this.valueOf = function() {
+         return this.value
+      };
+      this.toString = function() {
+         return String(this.value)
+      };
+   } else {
+      throw new ZipCodeFormatException(zip);
+   }
+}
+
+function ZipCodeFormatException(value) {
+   this.value = value;
+   this.message = "no s'adjusta al format esperat per a un codi postal";
+   this.toString = function() {
+      return this.value + this.message;
+   };
+}
+
+/*
+ * Això podria trobar-se en un script que valida adresses d'EE.UU.
+ */
+
+const ZIPCODE_INVALID = -1;
+const ZIPCODE_UNKNOWN_ERROR = -2;
+
+function verifyZipCode(z) {
+   try {
+      z = new ZipCode(z);
+   } catch (e) {
+      if (e instanceof ZipCodeFormatException) {
+         return ZIPCODE_INVALID;
+      } else {
+         return ZIPCODE_UNKNOWN_ERROR;
+      }
+   }
+   return z;
+}
+
+a = verifyZipCode(95060);         // retorna 95060
+b = verifyZipCode(9560);          // retorna -1
+c = verifyZipCode("a");           // retorna -1
+d = verifyZipCode("95060");       // retorna 95060
+e = verifyZipCode("95060 1234");  // retorna 95060 1234
+
+ +

Rellençar una excepció

+ +

Es pot utilitzar throw per rellençar una excepció després de caputrar-la. L'exemple següent captura una excepció amb un valor numèric i el rellença si el valor és major de 50. L'excepció rellençada es propaga fins a la funció que l'envolcalla o al nivell superior de forma que l'usuari ho vegi.

+ +
try {
+   throw n; // llença una excepció amb un valor numèric
+} catch (e) {
+   if (e <= 50) {
+      // sentències per manejar excepcions 1-50
+   } else {
+      // no es pot manejar aquesta excepció, per tant es rellença
+      throw e;
+   }
+}
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('ES3')}}{{Spec2('ES3')}}Definició inicial. Implementat en JavaScript 1.4
{{SpecName('ES5.1', '#sec-12.13', 'throw statement')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-throw-statement', 'throw statement')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ + diff --git a/files/ca/web/javascript/reference/statements/while/index.html b/files/ca/web/javascript/reference/statements/while/index.html new file mode 100644 index 0000000000..d3997dbefd --- /dev/null +++ b/files/ca/web/javascript/reference/statements/while/index.html @@ -0,0 +1,131 @@ +--- +title: while +slug: Web/JavaScript/Referencia/Sentencies/while +translation_of: Web/JavaScript/Reference/Statements/while +--- +
{{jsSidebar("Statements")}}
+ +

Resum

+ +

la sentència while crea un bucle que executa una sentència especificada sempre que la condició s'avalui certa. La condició s'avalua abans d'executar la sentència..

+ +

Sintaxi

+ +
while (condició) {
+  sentència
+}
+ +
+
condició
+
Una expressió que s'avalua abans de cada passada del bucle. Si aquesta condició esdevé certa, s'executa la sentència. Quan la condició esdevé falsa, l'execució continua amb la sentència posterior al bucle while.
+
sentència
+
Una sentència que s'executa sempre que la condició esdevingui certa. Per executar múltiples sentències dins un bucle, podeu fer ús de la sentència block ({ ... }) per agrupar aquestes sentències.
+
+ +

Exemples

+ +

El següent bucle while itera sempre que n sigui menor que tres.

+ +
var n = 0;
+var x = 0;
+
+while (n < 3) {
+  n++;
+  x += n;
+}
+ +

En cada iteració, el bucle incrementa n i ho suma a x. Per tant, x i n prenen els següents valors:

+ +
    +
  • Després de la primera volta: n = 1 i x = 1
    • +
  • Després de la segona volta: n = 2 i x = 3
    • +
  • Després de la tercera volta: n = 3 i x = 6
    • +
+ +

Després de completar la tercera volta, la condició n < 3 ja no esdevé més certa, i per tant finalitza el bucle.

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
1a edició de ECMAScript.EstàndardDefinició inicial.
{{SpecName('ES5.1', '#sec-12.6.2', 'while statement')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-while-statement', 'while statement')}}{{Spec2('ES6')}} 
+ +

Compatibilitat amb navegadors

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

Vegeu també

+ +
    +
  • do...while
    • +
  • {{jsxref("Statements/for", "for")}}
    • +
diff --git a/files/ca/web/javascript/referencia/classes/constructor/index.html b/files/ca/web/javascript/referencia/classes/constructor/index.html deleted file mode 100644 index a0bd6b966f..0000000000 --- a/files/ca/web/javascript/referencia/classes/constructor/index.html +++ /dev/null @@ -1,129 +0,0 @@ ---- -title: constructor -slug: Web/JavaScript/Referencia/Classes/constructor -translation_of: Web/JavaScript/Reference/Classes/constructor ---- -
{{jsSidebar("Classes")}}
- -

Resum

- -

El mètode constructor és un mètode especial per crear i inicialitzar un objecte creat amb una class.

- -

Sintaxi

- -
constructor([arguments]) { ... }
- -

Descripció

- -

Només hi pot haver un mètode especial am el nom "constructor" en una classe. Es llançarà un {{jsxref("SyntaxError")}}, si la classe conté més d'un cas d'un mètode constructor.

- -

Un constructor pot utilitzar la paraula clau super per cridar el constructor de la classe pare.

- -

Exemples

- -

Aquest fragment de codi es pren de mostra de classes (demostració en viu).

- -
class Square extends Polygon {
-  constructor(length) {
-    // Aquí es crida el constructor del pare de la classe amb les longituts
-    // proveïdes per l'amplada i l'alçada del polígon
-    super(length, length);
-    // Nota: En classes derivades, s'ha de cridar super() abans
-    // d'utilitzar 'this'. Obviar això causarà un error de referència.
-    this.name = 'Square';
-  }
-
-  get area() {
-    return this.height * this.width;
-  }
-
-  set area(value) {
-    this.area = value;
-  }
-}
- -

Especificacions

- - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-static-semantics-constructormethod', 'Constructor Method')}}{{Spec2('ES6')}}Definició inicial.
- -

Compatibilitat amb navegadors

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome(42.0)}} -

Disponible només al canal Nightly  (desde febrer del 2015)

- 		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatUnknown}}{{CompatChrome(42.0)}}Disponible només al canal Nightly  (desde febrer del 2015){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

Notes específiques per Firefox

- -
    -
  • Els constructors estàndards encara no s'han implementat ({{bug(1105463)}})
    • -
- -

Vegeu també

- - diff --git a/files/ca/web/javascript/referencia/classes/index.html b/files/ca/web/javascript/referencia/classes/index.html deleted file mode 100644 index 23daf7e1ff..0000000000 --- a/files/ca/web/javascript/referencia/classes/index.html +++ /dev/null @@ -1,382 +0,0 @@ ---- -title: Classes -slug: Web/JavaScript/Referencia/Classes -tags: - - Classes - - ECMAScript 2015 - - Experimental - - Expérimental(2) - - JavaScript - - NeedsContent - - NeedsTranslation - - Reference - - Référence(2) - - TopicStub -translation_of: Web/JavaScript/Reference/Classes ---- -
{{JsSidebar("Classes")}}
- -

JavaScript classes, introduced in ECMAScript 2015, are primarily syntactical sugar over JavaScript's existing prototype-based inheritance. The class syntax does not introduce a new object-oriented inheritance model to JavaScript.

- -

Defining classes

- -

Classes are in fact "special functions", and just as you can define function expressions and function declarations, the class syntax has two components: class expressions and class declarations.

- -

Class declarations

- -

One way to define a class is using a class declaration. To declare a class, you use the class keyword with the name of the class ("Rectangle" here).

- -
class Rectangle {
-  constructor(height, width) {
-    this.height = height;
-    this.width = width;
-  }
-}
- -

Hoisting

- -

An important difference between function declarations and class declarations is that function declarations are {{Glossary("Hoisting", "hoisted")}} and class declarations are not. You first need to declare your class and then access it, otherwise code like the following will throw a {{jsxref("ReferenceError")}}:

- -
var p = new Rectangle(); // ReferenceError
-
-class Rectangle {}
-
- -

Class expressions

- -

A class expression is another way to define a class. Class expressions can be named or unnamed. The name given to a named class expression is local to the class's body. (it can be retrieved through the class's (not an instance's) .name property, though)

- -
// unnamed
-var Rectangle = class {
-  constructor(height, width) {
-    this.height = height;
-    this.width = width;
-  }
-};
-console.log(Rectangle.name);
-// output: "Rectangle"
-
-// named
-var Rectangle = class Rectangle2 {
-  constructor(height, width) {
-    this.height = height;
-    this.width = width;
-  }
-};
-console.log(Rectangle.name);
-// output: "Rectangle2"
-
- -

Note: Class expressions also suffer from the same hoisting issues mentioned for Class declarations.

- -

Class body and method definitions

- -

The body of a class is the part that is in curly brackets {}. This is where you define class members, such as methods or constructor.

- -

Strict mode

- -

The bodies of class declarations and class expressions are executed in strict mode i.e. constructor, static and prototype methods, getter and setter functions are executed in strict mode.

- -

Constructor

- -

The constructor method is a special method for creating and initializing an object created with a class. There can only be one special method with the name "constructor" in a class. A {{jsxref("SyntaxError")}} will be thrown if the class contains more than one occurrence of a constructor method.

- -

A constructor can use the super keyword to call the constructor of the super class.

- -

Prototype methods

- -

See also method definitions.

- -
class Rectangle {
-  constructor(height, width) {
-    this.height = height;
-    this.width = width;
-  }
-  // Getter
-  get area() {
-    return this.calcArea();
-  }
-  // Method
-  calcArea() {
-    return this.height * this.width;
-  }
-}
-
-const square = new Rectangle(10, 10);
-
-console.log(square.area); // 100
- -

Static methods

- -

The static keyword defines a static method for a class. Static methods are called without instantiating their class and cannot be called through a class instance. Static methods are often used to create utility functions for an application.

- -
class Point {
-  constructor(x, y) {
-    this.x = x;
-    this.y = y;
-  }
-
-  static distance(a, b) {
-    const dx = a.x - b.x;
-    const dy = a.y - b.y;
-
-    return Math.hypot(dx, dy);
-  }
-}
-
-const p1 = new Point(5, 5);
-const p2 = new Point(10, 10);
-
-console.log(Point.distance(p1, p2)); // 7.0710678118654755
- -

Boxing with prototype and static methods

- -

When a static or prototype method is called without a value for this, the this value will be undefined inside the method. This behavior will be the same even if the "use strict" directive isn't present, because code within the class syntax is always executed in strict mode.

- -
class Animal {
-  speak() {
-    return this;
-  }
-  static eat() {
-    return this;
-  }
-}
-
-let obj = new Animal();
-obj.speak(); // Animal {}
-let speak = obj.speak;
-speak(); // undefined
-
-Animal.eat() // class Animal
-let eat = Animal.eat;
-eat(); // undefined
- -

If the above is written using traditional function–based syntax, then autoboxing in method calls will happen in non–strict mode based on the initial this value. If the inital value is undefined, this will be set to the global object.

- -

Autoboxing will not happen in strict mode, the this value remains as passed.

- -
function Animal() { }
-
-Animal.prototype.speak = function() {
-  return this;
-}
-
-Animal.eat = function() {
-  return this;
-}
-
-let obj = new Animal();
-let speak = obj.speak;
-speak(); // global object
-
-let eat = Animal.eat;
-eat(); // global object
-
- -

Instance properties

- -

Instance properties must be defined inside of class methods:

- -
class Rectangle {
-  constructor(height, width) {
-    this.height = height;
-    this.width = width;
-  }
-}
- -

Static class-side properties and prototype data properties must be defined outside of the ClassBody declaration:

- -
Rectangle.staticWidth = 20;
-Rectangle.prototype.prototypeWidth = 25;
-
- -

- -

Sub classing with extends

- -

The extends keyword is used in class declarations or class expressions to create a class as a child of another class.

- -
class Animal {
-  constructor(name) {
-    this.name = name;
-  }
-
-  speak() {
-    console.log(this.name + ' makes a noise.');
-  }
-}
-
-class Dog extends Animal {
-  speak() {
-    console.log(this.name + ' barks.');
-  }
-}
-
-var d = new Dog('Mitzie');
-d.speak(); // Mitzie barks.
-
- -

If there is a constructor present in subclass, it needs to first call super() before using "this".

- -

One may also extend traditional function-based "classes":

- -
function Animal (name) {
-  this.name = name;
-}
-
-Animal.prototype.speak = function () {
-  console.log(this.name + ' makes a noise.');
-}
-
-class Dog extends Animal {
-  speak() {
-    console.log(this.name + ' barks.');
-  }
-}
-
-var d = new Dog('Mitzie');
-d.speak(); // Mitzie barks.
-
- -

Note that classes cannot extend regular (non-constructible) objects. If you want to inherit from a regular object, you can instead use {{jsxref("Object.setPrototypeOf()")}}:

- -
var Animal = {
-  speak() {
-    console.log(this.name + ' makes a noise.');
-  }
-};
-
-class Dog {
-  constructor(name) {
-    this.name = name;
-  }
-}
-
-// If you do not do this you will get a TypeError when you invoke speak
-Object.setPrototypeOf(Dog.prototype, Animal);
-
-var d = new Dog('Mitzie');
-d.speak(); // Mitzie makes a noise.
-
- -

Species

- -

You might want to return {{jsxref("Array")}} objects in your derived array class MyArray. The species pattern lets you override default constructors.

- -

For example, when using methods such as {{jsxref("Array.map", "map()")}} that returns the default constructor, you want these methods to return a parent Array object, instead of the MyArray object. The {{jsxref("Symbol.species")}} symbol lets you do this:

- -
class MyArray extends Array {
-  // Overwrite species to the parent Array constructor
-  static get [Symbol.species]() { return Array; }
-}
-
-var a = new MyArray(1,2,3);
-var mapped = a.map(x => x * x);
-
-console.log(mapped instanceof MyArray); // false
-console.log(mapped instanceof Array);   // true
-
- -

Super class calls with super

- -

The super keyword is used to call corresponding methods of super class.

- -
class Cat {
-  constructor(name) {
-    this.name = name;
-  }
-
-  speak() {
-    console.log(this.name + ' makes a noise.');
-  }
-}
-
-class Lion extends Cat {
-  speak() {
-    super.speak();
-    console.log(this.name + ' roars.');
-  }
-}
-
-var l = new Lion('Fuzzy');
-l.speak();
-// Fuzzy makes a noise.
-// Fuzzy roars.
-
-
- -

Mix-ins

- -

Abstract subclasses or mix-ins are templates for classes. An ECMAScript class can only have a single superclass, so multiple inheritance from tooling classes, for example, is not possible. The functionality must be provided by the superclass.

- -

A function with a superclass as input and a subclass extending that superclass as output can be used to implement mix-ins in ECMAScript:

- -
var calculatorMixin = Base => class extends Base {
-  calc() { }
-};
-
-var randomizerMixin = Base => class extends Base {
-  randomize() { }
-};
-
- -

A class that uses these mix-ins can then be written like this:

- -
class Foo { }
-class Bar extends calculatorMixin(randomizerMixin(Foo)) { }
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('ES2015', '#sec-class-definitions', 'Class definitions')}}{{Spec2('ES2015')}}Initial definition.
{{SpecName('ES2016', '#sec-class-definitions', 'Class definitions')}}{{Spec2('ES2016')}}
{{SpecName('ES2017', '#sec-class-definitions', 'Class definitions')}}{{Spec2('ES2017')}}
{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}{{Spec2('ESDraft')}}
- -

Browser compatibility

- - - -

{{Compat("javascript.classes")}}

- -

Running in Scratchpad

- -

A class can't be redefined. If you're playing with code in Scratchpad (Firefox menu Tools > Web Developer > Scratchpad) and you 'Run' a definition of a class with the same name twice, you'll get a confusing SyntaxError: redeclaration of let <class-name>.

- -

To re-run a definition, use Scratchpad's menu Execute > Reload and Run.
- Please vote for bug #1428672.

- -

See also

- - diff --git a/files/ca/web/javascript/referencia/classes/static/index.html b/files/ca/web/javascript/referencia/classes/static/index.html deleted file mode 100644 index 3255dc1552..0000000000 --- a/files/ca/web/javascript/referencia/classes/static/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: static -slug: Web/JavaScript/Referencia/Classes/static -translation_of: Web/JavaScript/Reference/Classes/static ---- -
{{jsSidebar("Classes")}}
- -

La paraula clau static defineix un mètode estàtic per a una classe.

- -

Sintaxi

- -
static methodName() { ... }
- -

Descripció

- -

Els mètodes estàtics es criden sense realitzar una instantània de la seva classe o instantiating their class nor are they callable when the class is instantiated. Els mètodes estàtics s'utilitzen sovint per crear funcions d'utilitat per una aplicació.

- -

Exemples

- -

L'exemple següent mostra diverses coses. Mostra com un mètode estàtic és implementat en una classe i que una classe amb un membre estàtic pot tenir subclasses. Finalment, mostra com es pot i com no es pot cridar un mètode estàtic.

- -
class Tripple {
-  static tripple(n) {
-    n = n | 1;
-    return n * 3;
-  }
-}
-
-class BiggerTripple extends Tripple {
-  static tripple(n) {
-    return super.tripple(n) * super.tripple(n);
-  }
-}
-
-console.log(Tripple.tripple());
-console.log(Tripple.tripple(6));
-console.log(BiggerTripple.tripple(3));
-var tp = new Tripple();
-console.log(tp.tripple()); //Logs 'tp.tripple is not a function'.
- -

Especificacions

- - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-class-definitions', 'Class definitions')}}{{Spec2('ES6')}}Definició inicial.
- -

Compatibilitat amb navegadors

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome(42.0)}}Disponible només en el canal Nightly  (desde febrer del 2015){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatUnknown}}{{CompatChrome(42.0)}}Disponible només en el canal Nightly  (desde febrer del 2015){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

Vegeu també

- - diff --git a/files/ca/web/javascript/referencia/index.html b/files/ca/web/javascript/referencia/index.html deleted file mode 100644 index f524504ab2..0000000000 --- a/files/ca/web/javascript/referencia/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: Glossari de JavaScript -slug: Web/JavaScript/Referencia -translation_of: Web/JavaScript/Reference ---- -
{{JsSidebar}}
- -

Aquesta part de la secció de JavaScript a l'MDN serveix com a glossari de informació sobre el llenguatge JavaScript. Podeu llegir més sobre aquest glossari.

- -

Objectes Globals

- -

Aquest capítol documenta tots els objectes standard de JavaScript, així com els seus mètodes i propietats.

- -

{{page('/ca/docs/Web/JavaScript/Reference/Global_Objects', 'Objectes standard (per categoria)')}}

- -

Sentències

- -

Aquest capítol documenta totes les sentències i declaracions disponibles a JavaScript.

- -

{{page('/ca/docs/Web/JavaScript/Reference/Statements', 'Instruccions i declaracions disponibles (per categoria)')}}

- -

Expressions i operadors

- -

Aquest capítol documenta totes les expressions i els operadors soportats per JavaScript.

- -
{{page('/ca/docs/Web/JavaScript/Reference/Operators', 'Expressions i operadors (per categoria)')}}
- -

Funcions

- -

Aquest capítol documenta com treballar amb funcions de JavaScript.

- - - -

Pàgines de glossari adicionals

- - diff --git a/files/ca/web/javascript/referencia/objectes_globals/array/entries/index.html b/files/ca/web/javascript/referencia/objectes_globals/array/entries/index.html deleted file mode 100644 index 8b67c06038..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/array/entries/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: Array.prototype.entries() -slug: Web/JavaScript/Referencia/Objectes_globals/Array/entries -translation_of: Web/JavaScript/Reference/Global_Objects/Array/entries ---- -
{{JSRef}}
- -

El mètode entries() retorna un nou objecte Array Iterator que conté els parells clau/valor per a cada posició de l'array.

- -

Sintaxi

- -
arr.entries()
- -

Exemples

- -
var arr = ['a', 'b', 'c'];
-var eArr = arr.entries();
-
-console.log(eArr.next().value); // [0, 'a']
-console.log(eArr.next().value); // [1, 'b']
-console.log(eArr.next().value); // [2, 'c']
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-array.prototype.entries', 'Array.prototype.entries')}}{{Spec2('ES6')}}Definició inicial.
{{SpecName('ESDraft', '#sec-array.prototype.entries', 'Array.prototype.entries')}}{{Spec2('ESDraft')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome("38")}}{{CompatGeckoDesktop("28")}}{{CompatNo}}{{CompatOpera("25")}}{{CompatSafari("7.1")}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("28")}}{{CompatNo}}{{CompatNo}}8.0
-
- -

Vegeu també

- -
    -
  • {{jsxref("Array.prototype.keys()")}}
    • -
  • {{jsxref("Array.prototype.forEach()")}}
    • -
  • {{jsxref("Array.prototype.every()")}}
    • -
  • {{jsxref("Array.prototype.some()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/array/every/index.html b/files/ca/web/javascript/referencia/objectes_globals/array/every/index.html deleted file mode 100644 index ad707b4990..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/array/every/index.html +++ /dev/null @@ -1,220 +0,0 @@ ---- -title: Array.prototype.every() -slug: Web/JavaScript/Referencia/Objectes_globals/Array/every -translation_of: Web/JavaScript/Reference/Global_Objects/Array/every ---- -
{{JSRef}}
- -

El mètode every() comprova si tots els elements d'un array passen el test implementat per la funció proporcionada.

- -

Sintaxi

- -
arr.every(callback[, thisArg])
- -

Paràmetres

- -
-
callback
-
Funció utilitzada com a test per a cada element, rep tres arguments: -
-
valorActual
-
L'element de l'array que està sent avaluat.
-
posició
-
La posició que l'element passat al primer paràmetre ocupa dins l'array.
-
array
-
L'array des del que s'ha cridat el mètode every().
-
-
-
thisArg
-
Opcional. Valor que valdrà la variable this quan s'estigui executant la funció callback.
-
- -

Descripció

- -

every() executa la funció callback un cop per a cada element present a l'array fins que troba un per al qual callback retorna un valor falsy (és a dir, un valor que esdebé fals si es realitza una conversió de tipus a Boolean). Si es troba aquest element, el mètode every retorna immediatament false. En cas contrari, si callback ha retornat un valor true per a tots els elements, every retornarà true. Només s'invocarà la funció callback en les posicions de l'array que tinguin un valor assignat, és a dir, mai es cridarà per a posicions que han estat esborrades o el valor de les quals no ha estat mai assignat.

- -

S'invoca callback amb tres arguments: el valor de l'element, la posició de l'element dins l'array, i l'objecte array que es recorrerà.

- -

Si es proporciona el paràmetre thisArg al mètode every(), aquest es passarà a callback quan s'invoqui, i serà el valor que mostrarà la variable this. En cas contrari, s'utilitzarà el valor undefined com a valor per a this. El valor de this observable en última instància per callback es determinarà d'acord a les regles per a determinar el valor de this observat per una funció.

- -

every() no mutarà l'array quan sigui cridada.

- -

El rang d'elements processat per every() és determinat abans de la primera invocació de callback. Els elements que s'afegeixin a l'array després de la crida a every() no seran visitats per callback. Si el valor d'un element encara no visitat canvia, el valor que es passarà a callback serà el valor que tingui aquest element a l'hora de visitar-lo; els elements que s'esborrin no es visitaran.

- -

every es comporta com un quantificador "for all" en matemàtiques. En concret, per a un array buit retornarà true (s'anomena veritat per buit el fet que tots els elements d'un grup buit satisfacin qualsevol condició donada).

- -

Exemples

- -

Comprovar el tamany de tots els elements d'un array

- -

L'exemple següent comprova si tots els elements d'un array son majors de 10.

- -
function isBigEnough(element, index, array) {
-  return element >= 10;
-}
-[12, 5, 8, 130, 44].every(isBigEnough);   // false
-[12, 54, 18, 130, 44].every(isBigEnough); // true
-
- -

Utilitzar funcions flexta

- -

Les funcions fletxa ofereixen una sintaxi reduïda per a realitzar el mateix test.

- -
[12, 5, 8, 130, 44].every(elem => elem >= 10); // false
-[12, 54, 18, 130, 44].every(elem => elem >= 10); // true
- -

Polyfill

- -

every va ser afegida  al standard ECMA-262 en la cinquena edició; és per això que pot no estar disponible en certes implementacions del standard. Es pot proporcionar la seva funcionalitat inserint l'script següent a l'inici dels vostres scripts, permetent l'ús de every() en implementacions que no la suporten de forma nativa. Aquest algoritme és exactament l'especificat a l'ECMA-262, cinquena edició, assumint que Object i TypeError tenen els valors originals i que callbackfn.call es correspon amb el valor original de {{jsxref("Function.prototype.call")}}.

- -
if (!Array.prototype.every) {
-  Array.prototype.every = function(callbackfn, thisArg) {
-    'use strict';
-    var T, k;
-
-    if (this == null) {
-      throw new TypeError('this is null or not defined');
-    }
-
-    // 1. Let O be the result of calling ToObject passing the this
-    //    value as the argument.
-    var O = Object(this);
-
-    // 2. Let lenValue be the result of calling the Get internal method
-    //    of O with the argument "length".
-    // 3. Let len be ToUint32(lenValue).
-    var len = O.length >>> 0;
-
-    // 4. If IsCallable(callbackfn) is false, throw a TypeError exception.
-    if (typeof callbackfn !== 'function') {
-      throw new TypeError();
-    }
-
-    // 5. If thisArg was supplied, let T be thisArg; else let T be undefined.
-    if (arguments.length > 1) {
-      T = thisArg;
-    }
-
-    // 6. Let k be 0.
-    k = 0;
-
-    // 7. Repeat, while k < len
-    while (k < len) {
-
-      var kValue;
-
-      // a. Let Pk be ToString(k).
-      //   This is implicit for LHS operands of the in operator
-      // b. Let kPresent be the result of calling the HasProperty internal
-      //    method of O with argument Pk.
-      //   This step can be combined with c
-      // c. If kPresent is true, then
-      if (k in O) {
-
-        // i. Let kValue be the result of calling the Get internal method
-        //    of O with argument Pk.
-        kValue = O[k];
-
-        // ii. Let testResult be the result of calling the Call internal method
-        //     of callbackfn with T as the this value and argument list
-        //     containing kValue, k, and O.
-        var testResult = callbackfn.call(T, kValue, k, O);
-
-        // iii. If ToBoolean(testResult) is false, return false.
-        if (!testResult) {
-          return false;
-        }
-      }
-      k++;
-    }
-    return true;
-  };
-}
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaicóEstatComentaris
{{SpecName('ES5.1', '#sec-15.4.4.16', 'Array.prototype.every')}}{{Spec2('ES5.1')}}Definició inicial. Implemnetat a JavaScript 1.6.
{{SpecName('ES6', '#sec-array.prototype.every', 'Array.prototype.every')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-array.prototype.every', 'Array.prototype.every')}}{{Spec2('ESDraft')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.8")}}{{CompatIE("9")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.8")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Array.prototype.forEach()")}}
    • -
  • {{jsxref("Array.prototype.some()")}}
    • -
  • {{jsxref("TypedArray.prototype.every()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/array/fill/index.html b/files/ca/web/javascript/referencia/objectes_globals/array/fill/index.html deleted file mode 100644 index e1952a8407..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/array/fill/index.html +++ /dev/null @@ -1,173 +0,0 @@ ---- -title: Array.prototype.fill() -slug: Web/JavaScript/Referencia/Objectes_globals/Array/fill -translation_of: Web/JavaScript/Reference/Global_Objects/Array/fill ---- -
{{JSRef}}
- -

El mètode fill() omple tots els elements d'un array a partir d'una posició inicial fins a una posició final amb un valor estàtic predeterminat.

- -

Sintaxi

- -
arr.fill(valor[, posInicial = 0[, posFinal = this.length]])
- -

Paràmetres

- -
-
valor
-
Valor amb el que s'omplirà l'array.
-
posInicial
-
Opcional. Posició inicial.
-
posFinal
-
Opcional. Posició final.
-
- -

Descripció

- -

L'interval d'elements a omplir és [posInicial, posFinal) (inici inclusiu, final exclusiu).

- -

El mètode fill accepta fins a tres arguments: valor, posInicial i  posFinal.

- -

Els arguments posInicial i posFinal són opcionals i si no s'especifiquen prenen per defecte els valors 0 i la propietat length de l'objecte this, respectivament.

- -

Si posInicial és negatiu, es considera com a length+start on length és la mida de l'array. Si posFinal és negatiu es considera com a length+end.

- -

La funció fill és genèrica intencionalment i no requereix que el valor this sigui un objecte de tipus Array.

- -

El mètode fill és mutable, ja que canviarà l'objecte this en si mateix i després el retornarà com a resultat, en comptes de retornar una copia d'aquest.

- -

Exemples

- -
[1, 2, 3].fill(4);               // [4, 4, 4]
-[1, 2, 3].fill(4, 1);            // [1, 4, 4]
-[1, 2, 3].fill(4, 1, 2);         // [1, 4, 3]
-[1, 2, 3].fill(4, 1, 1);         // [1, 2, 3]
-[1, 2, 3].fill(4, -3, -2);       // [4, 2, 3]
-[1, 2, 3].fill(4, NaN, NaN);     // [1, 2, 3]
-Array(3).fill(4);                // [4, 4, 4]
-[].fill.call({ length: 3 }, 4);  // {0: 4, 1: 4, 2: 4, length: 3}
-
- -

Polyfill

- -
if (!Array.prototype.fill) {
-  Array.prototype.fill = function(value) {
-
-    // Pasos 1-2.
-    if (this == null) {
-      throw new TypeError('this is null or not defined');
-    }
-
-    var O = Object(this);
-
-    // Pasos 3-5.
-    var len = O.length >>> 0;
-
-    // Pasos 6-7.
-    var start = arguments[1];
-    var relativeStart = start >> 0;
-
-    // Pasos 8.
-    var k = relativeStart < 0 ?
-      Math.max(len + relativeStart, 0) :
-      Math.min(relativeStart, len);
-
-    // Pasos 9-10.
-    var end = arguments[2];
-    var relativeEnd = end === undefined ?
-      len : end >> 0;
-
-    // Pasos 11.
-    var final = relativeEnd < 0 ?
-      Math.max(len + relativeEnd, 0) :
-      Math.min(relativeEnd, len);
-
-    // Pasos 12.
-    while (k < final) {
-      O[k] = value;
-      k++;
-    }
-
-    // Pasos 13.
-    return O;
-  };
-}
-
- -

Especificacions

- - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-array.prototype.fill', 'Array.prototype.fill')}}{{Spec2('ES6')}}Definició inicial.
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome("45")}} [1]{{CompatGeckoDesktop("31")}}{{CompatNo}}{{CompatNo}}{{CompatSafari("7.1")}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("31")}}{{CompatNo}}{{CompatNo}}8.0
-
- -

[1] A partir del Chrome 36, està disponible a través d'una preferència. A chrome://flags, activeu l'entrada “Enable Experimental JavaScript”.

- -

Vegeu també

- -
    -
  • {{jsxref("Array")}}
    • -
  • {{jsxref("TypedArray.prototype.fill()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/array/filter/index.html b/files/ca/web/javascript/referencia/objectes_globals/array/filter/index.html deleted file mode 100644 index c1bfec77f3..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/array/filter/index.html +++ /dev/null @@ -1,213 +0,0 @@ ---- -title: Array.prototype.filter() -slug: Web/JavaScript/Referencia/Objectes_globals/Array/filter -translation_of: Web/JavaScript/Reference/Global_Objects/Array/filter ---- -
{{JSRef}}
- -

El mètode filter() crea un nou array amb tots els elements que passin el test implementat per la funció que passa com a argument.

- -

Sintaxi

- -
arr.filter(callback[, thisArg])
- -

Paràmetres

- -
-
callback
-
Funció que s'emprarà per a testejar cada element de l'array. Aquesta serà invocada amb els arguments (element, posició, array). Ha de retornar true per als elements que es vulguin conservar i false en qualsevol altre cas.
-
element
-
El element actual que s'esta processant a l'Array.
-
thisArg
-
Opcional. Valor que rebrà this durant l'execució de la funció callback.
-
- -

Descripció

- -

filter() crida la funció callback proporcionada un cop per cada element de l'array, i construeix un nou array amb tots els elements per als quals la funció callback retorni el valor true o bé un valor que pugui ser interpretat com a true. Només escridarà la funció callback per a posicions de l'array que tinguin valors assignats; no es cridarà per a posicions que han estat esborrades o que mai hagin tingut assignat un element. Els elements que no passsin el test de callback seràn simplement ignorats i en cap cas seran afegits al nou array.

- -

S'invoca callback tot passant-li els tres arguments següents:

- -
    -
  1. el valor de l'element
    2. -
  2. la posició de l'element
    3. -
  3. L'objecte array que s'està recorrent
    4. -
- -

Si es proporciona el paràmetre thisArg a la crida de filter, aquest es passarà a callback quan s'invoqui per a ser utilitzat com a this dins la funció.  En qualsevol altre cas el valor que rebrà this dins la funció callback serà undefined. El valor de this que serà finalment observable dins de callback és determinat d'acord a les regles habituals per a determinar el valor de this observat dins d'una funció.

- -

filter() mai modificarà l'array des del qual s'invoca.

- -

El rang dels elements processats per filter() es determina abans de la primera invocació de callback. Els elements que s'afegeixin a l'array un cop la crida a  filter() hagi començat no seran visibles per a callback. Els elements que es modifiquin o s'esborrin durant aquest periode tindran el valor que els hi pertoqui al moment de cridar la funció callback; els elements que s'hagin eliminat no es visitaran.

- -

Exemples

- -

Exemple: Descartar tots els valors petits

- -

L'exemple següent utilitza filter() per a crear un array filtrat que contindrà tots els elements amb valors menors de 10.

- -
function esProuGran(valor) {
-  return valor >= 10;
-}
-var filtrat = [12, 5, 8, 130, 44].filter(esProuGran);
-// filtrat val [12, 130, 44]
-
- -

Exemple: Descartar entrades invàlides de JSON

- -

L'exemple següent utilitza filter() per a crear un array que no contingui cap entrada de JSON amb una id numèrica no vàlida o amb valor menor que zero.

- -
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('Array filtrat\n', arrByID);
-// [{ id: 15 }, { id: -1 }, { id: 0 }, { id: 3 }, { id: 12.2 }]
-
-console.log('Nombre d'entrades invàlides = ', invalidEntries);
-// 4
-
- -

Polyfill

- -

filter() va ser afegit al standard ECMA-262 a la cinquena edició; degut a això aquesta funció pot no ser present a totes les implementacions del standard. Es pot solucionar aquest problema inserint el codi següent al principi dels scripts, permetent l'ús de filter() en implementacions de l'ECMA-262 que no la incorporin per defecte. Aquest algoritme és exactament l'especificat per l'ECMA-262, 5a edició, i assumeix que fn.call s'evalua al valor original de {{jsxref("Function.prototype.call()")}} i que {{jsxref("Array.prototype.push()")}} te el 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];
-
-        // NOTA: Tècnicament hauria de ser Object.defineProperty
-        //       a la posició següent ja que push pot veure's afectat per
-        //       les propietats de Object.prototype i Array.prototype.
-        //       Però aquest mètode és nou i només hi haurà col·lisions
-        //       en casos excepcionals, aixíq ue utilitzem l'alternativa més compatible.
-        if (fun.call(thisArg, val, i, t)) {
-          res.push(val);
-        }
-      }
-    }
-
-    return res;
-  };
-}
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES5.1', '#sec-15.4.4.20', 'Array.prototype.filter')}}{{Spec2('ES5.1')}}Definició inicial. Implementat a JavaScript 1.6.
{{SpecName('ES6', '#sec-array.prototype.filter', 'Array.prototype.filter')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.8")}}{{CompatIE("9")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.8")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Array.prototype.forEach()")}}
    • -
  • {{jsxref("Array.prototype.every()")}}
    • -
  • {{jsxref("Array.prototype.some()")}}
    • -
  • {{jsxref("Array.prototype.reduce()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/array/find/index.html b/files/ca/web/javascript/referencia/objectes_globals/array/find/index.html deleted file mode 100644 index 8ee7742c09..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/array/find/index.html +++ /dev/null @@ -1,191 +0,0 @@ ---- -title: Array.prototype.find() -slug: Web/JavaScript/Referencia/Objectes_globals/Array/find -translation_of: Web/JavaScript/Reference/Global_Objects/Array/find ---- -
{{JSRef}}
- -

El mètode find() retorna un valor valor pertanyent a l'array si un element de l'array satisfà la funció de testeig donada. En cas contrari retornarà {{jsxref("undefined")}}.

- -

Vegeu també el mètode {{jsxref("Array.findIndex", "findIndex()")}}, que retorna la posició a la qual s'ha trobat l'element que satisfà la funció de testeig, en comptes del seu valor.

- -

Sintaxi

- -
arr.find(callback[, thisArg])
- -

Paràmetres

- -
-
callback
-
Funció que s'executarà per a cada valor de l'array, rep tres arguments: -
-
element
-
L'element de l'array que s'està processant actualment.
-
posició
-
La posició de l'array que s'està processant actualment.
-
array
-
L'array des del qual s'ha cridat el mètode find.
-
-
-
thisArg
-
Opcional. L'objecte a utilitzar com a this mentre s'executi callback.
-
- -

Descripció

- -

El mètode find executa la funció callback un cop per a cada element present a l'array fins que trobi un on callback retorni true. Si es troba aquest element el mètode find retorna el valor de l'element trobat immediatament. En cas contrari find retornarà {{jsxref("undefined")}}. callback només serà invocada per a posicions de l'array que tinguin valors assignats; no serà invoada per a posicions que s'hagin eliminat o que mai hagin tingut assignat un valor.

- -

La invocaicó de callback té tres arguments: el valor de l'element, la posició de l'element i l'objecte array que està sent recorregut.

- -

Si es proporciona el paràmetre thisArg al cridar el mètode find, aquest serà utilitzat com a this per a cada invocació del mètode callback. En cas de no ser proporcionat s'utilitzarà {{jsxref("undefined")}}.

- -

find no mutarà l'array des del que es crida.

- -

El rang d'elemnets que find processarà es determina abans de la primera invocació a callback. Els elements afegits a l'array després de la crida a find no seran visitats per callback. Si un element existent, no visitat encara, rep un altre valor, el valor percebut per callback serà aquell que tingui l'element al ser visitat; els elements visitats no són visitats.

- -

Exemples

- -

Trobar un objecte en un array segons el valor d'una propietat

- -
var inventory = [
-    {name: 'apples', quantity: 2},
-    {name: 'bananas', quantity: 0},
-    {name: 'cherries', quantity: 5}
-];
-
-function findCherries(fruit) {
-    return fruit.name === 'cherries';
-}
-
-console.log(inventory.find(findCherries)); // { name: 'cherries', quantity: 5 }
- -

Trobar un nombre primer en un array

- -

L'exemple següent troba un element dins l'array el valor del qual sigui un nombre primer (o bé retorna {{jsxref("undefined")}} si no n'hi ha cap).

- -
function isPrime(element, index, array) {
-  var start = 2;
-  while (start <= Math.sqrt(element)) {
-    if (element % start++ < 1) {
-      return false;
-    }
-  }
-  return element > 1;
-}
-
-console.log([4, 6, 8, 12].find(isPrime)); // undefined, no trobat
-console.log([4, 5, 8, 12].find(isPrime)); // 5
-
- -

Polyfill

- -

Aquest mètode es va afegira la especificació 2015 de l'ECMAScript i pot no estar disponible encara en algunes implementacions de JavaScript. Tot i així es pot utilitzar el codi següent per a utilitzar-lo en entorns on no estigui disponible:

- -
if (!Array.prototype.find) {
-  Array.prototype.find = function(predicate) {
-    if (this === null) {
-      throw new TypeError('Array.prototype.find called on null or undefined');
-    }
-    if (typeof predicate !== 'function') {
-      throw new TypeError('predicate must be a function');
-    }
-    var list = Object(this);
-    var length = list.length >>> 0;
-    var thisArg = arguments[1];
-    var value;
-
-    for (var i = 0; i < length; i++) {
-      value = list[i];
-      if (predicate.call(thisArg, value, i, list)) {
-        return value;
-      }
-    }
-    return undefined;
-  };
-}
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-array.prototype.find', 'Array.prototype.find')}}{{Spec2('ES6')}}Definició inicial.
{{SpecName('ESDraft', '#sec-array.prototype.find', 'Array.prototype.find')}}{{Spec2('ESDraft')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerEdgeOperaSafari
Suport bàsic{{CompatChrome(45.0)}}{{CompatGeckoDesktop("25.0")}}{{CompatNo}}12{{CompatNo}}{{CompatSafari("7.1")}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileEdgeOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("25.0")}}{{CompatNo}}12{{CompatNo}}8.0
-
- -

Vegeu també

- -
    -
  • {{jsxref("Array.prototype.findIndex()")}}
    • -
  • {{jsxref("Array.prototype.every()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/array/findindex/index.html b/files/ca/web/javascript/referencia/objectes_globals/array/findindex/index.html deleted file mode 100644 index 5b089bdb98..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/array/findindex/index.html +++ /dev/null @@ -1,173 +0,0 @@ ---- -title: Array.prototype.findIndex() -slug: Web/JavaScript/Referencia/Objectes_globals/Array/findIndex -translation_of: Web/JavaScript/Reference/Global_Objects/Array/findIndex ---- -
{{JSRef}}
- -

El mètode findIndex() retorna una posició de l'array si un element de l'array satisfà la funció de testeig donada. En cas contrari retornarà -1.

- -

Vegeu també el mètode {{jsxref("Array.find", "find()")}}, que retorna el valor trobat dins l'array en comptes de la posició.

- -

Sintaxi

- -
arr.findIndex(callback[, thisArg])
- -

Parameters

- -
-
callback
-
Funció que s'executarà per a cada valor de l'array, rep tres arguments: -
-
element
-
L'element de l'array que s'està processant actualment.
-
posició
-
La posició de l'array que s'està processant actualment.
-
array
-
L'array des del qual s'ha cridat el mètode find.
-
-
-
thisArg
-
Opcional. L'objecte a utilitzar com a this mentre s'executi callback.
-
- -

Descripció

- -

El mètode findIndex executa la funció callback un cop per a cada element present a l'array fins que trobi un on callback retorni true. Si es troba aquest element el mètode findIndex retorna la posició de l'element trobat immediatament. En cas contrari findIndex retornarà -1. callback només serà invocada per a posicions de l'array que tinguin valors assignats; no serà invoada per a posicions que s'hagin eliminat o que mai hagin tingut assignat un valor.

- -

La invocaicó de callback té tres arguments: el valor de l'element, la posició de l'element i l'objecte array que està sent recorregut.

- -

Si es proporciona el paràmetre thisArg al cridar el mètode findIndex, aquest serà utilitzat com a this per a cada invocació del mètode callback. En cas de no ser proporcionat s'utilitzarà {{jsxref("undefined")}}.

- -

findIndex no mutarà l'array des del que es crida.

- -

El rang d'elemnets que findIndex processarà es determina abans de la primera invocació a callback. Els elements afegits a l'array després de la crida a findIndex no seran visitats per callback. Si un element existent, no visitat encara, rep un altre valor, el valor percebut per callback serà aquell que tingui l'element al ser visitat; els elements visitats no són visitats.

- -

Exemples

- -

Trobar la posició d'un nombre primer dins un array

- -

L'exemple següent trobarà la posició d'un element de l'array que sigui un nombre primer (o bé retornarà -1 si no n'hi ha cap).

- -
function isPrime(element, index, array) {
-  var start = 2;
-  while (start <= Math.sqrt(element)) {
-    if (element % start++ < 1) {
-      return false;
-    }
-  }
-  return element > 1;
-}
-
-console.log([4, 6, 8, 12].findIndex(isPrime)); // -1, not found
-console.log([4, 6, 7, 12].findIndex(isPrime)); // 2
-
- -

Polyfill

- -

Aquest mètode es va afegir a la especificació 6 de l'ECMAScript i pot no estar disponible encara en algunes implementacions de JavaScript. Tot i així es pot utilitzar el codi següent per a utilitzar-lo en entorns on no estigui disponible:

- -
if (!Array.prototype.findIndex) {
-  Array.prototype.findIndex = function(predicate) {
-    if (this === null) {
-      throw new TypeError('Array.prototype.findIndex called on null or undefined');
-    }
-    if (typeof predicate !== 'function') {
-      throw new TypeError('predicate must be a function');
-    }
-    var list = Object(this);
-    var length = list.length >>> 0;
-    var thisArg = arguments[1];
-    var value;
-
-    for (var i = 0; i < length; i++) {
-      value = list[i];
-      if (predicate.call(thisArg, value, i, list)) {
-        return i;
-      }
-    }
-    return -1;
-  };
-}
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-array.prototype.findIndex', 'Array.prototype.findIndex')}}{{Spec2('ES6')}}Definició inicial.
{{SpecName('ESDraft', '#sec-array.prototype.findIndex', 'Array.prototype.findIndex')}}{{Spec2('ESDraft')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome(45.0)}}{{CompatGeckoDesktop("25.0")}}{{CompatNo}}{{CompatNo}}{{CompatSafari("7.1")}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("25.0")}}{{CompatNo}}{{CompatNo}}8.0
-
- -

Vegeu també

- -
    -
  • {{jsxref("Array.prototype.find()")}}
    • -
  • {{jsxref("Array.prototype.indexOf()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/array/foreach/index.html b/files/ca/web/javascript/referencia/objectes_globals/array/foreach/index.html deleted file mode 100644 index 4d391346eb..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/array/foreach/index.html +++ /dev/null @@ -1,238 +0,0 @@ ---- -title: Array.prototype.forEach() -slug: Web/JavaScript/Referencia/Objectes_globals/Array/forEach -translation_of: Web/JavaScript/Reference/Global_Objects/Array/forEach ---- -
{{JSRef}}
- -

El mètode forEach() executa la funció rebuda un cop per cada element de l'array.

- -

Sintaxi

- -
arr.forEach(callback[, thisArg])
- -

Paràmetres

- -
-
callback
-
Funció a executar per a cada element. Aquesta funció rebrà tres paràmetres: -
-
valor
-
L'element que s'està processant ara mateix a l'array.
-
posició
-
La posició que l'element actual ocupa dins l'array.
-
array
-
L'array al qual el mètode forEach s'aplica.
-
-
-
thisArg
-
Opcional. Valor que s'utilitzarà com a this a l'hora d'executar la funció callback.
-
- -

Descripció

- -

forEach() executa la funció callback rebuda com a argument un cop per cada element present a l'array, en ordre ascendent. No es cridarà la funció per a elements que s'hagin eliminat o que no hagin rebut cap valor (és a dir, arrays disperses).

- -

S'invocarà callback amb els tres arguments següents:

- -
    -
  • el valor de l'element
    • -
  • la posició de l'element
    • -
  • L'array que s'està recorrent
    • -
- -

Si es proporciona el paràmetre thisArg a forEach(), aquest es passarà a callback quan es cridi, i es podrà accedir a ell mitjançant la paraula clau this. En el cas que no es proporcioni el paràmetre this rebrà el valor {{jsxref("undefined")}}. El valor de this que serà observable per callback es determina d'acord a les regles usuals per a determinar el valor de this que una funció veu.

- -

El rang dels elements processats per forEach() és determinat abans de la primera invocació de callback. Els elements que s'afegeixin a l'array després de la crida a forEach() no seran visitats per la funció callback. En el cas que es canviï el valor dels elements de l'array el valor que es passarà a callback serà el valor que tingui l'element en el moment que es visita. Els elements que s'han eliminat abans de ser visitats no es visitaran.

- -

forEach() executa la funció callback un cop per cada element de l'array; a diferència de {{jsxref("Array.prototype.map()", "map()")}} i {{jsxref("Array.prototype.reduce()", "reduce()")}}, sempre retorna el valor {{jsxref("undefined")}} i no es pot encadenar. El cas d'ús típic és per executar efectes secundaris al final de la cadena.

- -
-

Nota: L'única forma d'aturar un bucle forEach() és llençar una excepció. Si es requereix aquesta funcionalitat llavors el mètode .forEach() és l'eina incorrecta i es recomana utilitzar un bucle normal. Si el que es pretén és validar els elements d'un array contra un predicat i es requereix retornar un valor booleà, es recomana utilitzar la funció {{jsxref("Array.prototype.every()", "every()")}} o bé {{jsxref("Array.prototype.some()", "some()")}}.

-
- -

Exemples

- -

Imprimir el contingut d'un array

- -

El codi següent mostra una línia per a cada element de l'array:

- -
function logArrayElements(element, index, array) {
-  console.log('a[' + index + '] = ' + element);
-}
-
-// Cal destacar l'omissió, no hi ha cap element a la posició 2 així que aquesta no es visita
-[2, 5, , 9].forEach(logArrayElements);
-// Mostra:
-// a[0] = 2
-// a[1] = 5
-// a[3] = 9
-
- -

Una funció per a copiar objectes

- -

El codi següent crea una copia de l'objecte donat. Hi ha diverses formes de crear una copia d'un objecte, la forma següent és simplement una d'elles i es presenta per a explicar com funciona Array.prototype.forEach() tot utilitzant les funcions de meta-propietats de l'ECMAScript 5 a Object.*

- -
function copy(obj) {
-  var copy = Object.create(Object.getPrototypeOf(obj));
-  var propNames = Object.getOwnPropertyNames(obj);
-
-  propNames.forEach(function(name) {
-    var desc = Object.getOwnPropertyDescriptor(obj, name);
-    Object.defineProperty(copy, name, desc);
-  });
-
-  return copy;
-}
-
-var obj1 = { a: 1, b: 2 };
-var obj2 = copy(obj1); // obj2 looks like o1 now
-
- -

Polyfill

- -

forEach() va ser afegida l'standard ECMA-262 en la cinquena edició; per aquest motiu aquesta funció pot no estar present en altres implementacions de l'standard. Es pot solventar aquest problema inserint el codi següent a l'inici dels vostres scripts. Això permetrà l'ús de forEach() en implementacions que no el suportin de forma nativa. Aquest algoritme és el mateix que l'especificat a l'ECMA-262, cinquena edició, si assumim que {{jsxref("Object")}} i {{jsxref("TypeError")}} tenen els seus valors originals i que callback.call es resol com al valor original de {{jsxref("Function.prototype.call()")}}.

- -
// Production steps of ECMA-262, Edition 5, 15.4.4.18
-// Reference: http://es5.github.io/#x15.4.4.18
-if (!Array.prototype.forEach) {
-
-  Array.prototype.forEach = function(callback, thisArg) {
-
-    var T, k;
-
-    if (this == null) {
-      throw new TypeError(' this is null or not defined');
-    }
-
-    // 1. Assignem a O el resultat de cridar ToObject tot passant-li el valor de |this| com a argument.
-    var O = Object(this);
-
-    // 2. lenValue representa el resultat de cridar el mètode intern Get de O amb l'argument "length".
-    // 3. Assignem a len el valor ToUint32(lenValue).
-    var len = O.length >>> 0;
-
-    // 4. Si IsCallable(callback) és false, llençem una excepció TypeError.
-    // Vegeu: http://es5.github.com/#x9.11
-    if (typeof callback !== "function") {
-      throw new TypeError(callback + ' no és una funció');
-    }
-
-    // 5. Si s'ha passat thisArg com a aragument, assignem el seu valor a la variable T, en qualsevol altre cas deixem T com a undefined.
-    if (arguments.length > 1) {
-      T = thisArg;
-    }
-
-    // 6. Assignem 0 a la variable k
-    k = 0;
-
-    // 7. Repetir, mentre k < len
-    while (k < len) {
-
-      var kValue;
-
-      // a. Assignem ToString(k) a Pk.
-      //   Aquest comportament és implícit per a operands al cantó esquerra (de l'anglés LHS o Left-Hand-Side) de l'operador "in"This is implicit for LHS operands of the in operator
-      // b. Assignem el resultat de cridar el mètode intern HasProperty de O amb l'argument Pk a la variable kPresent
-      //   Podem combinar aquest pas amb c
-      // c. Si kPresent és true, llavors...
-      if (k in O) {
-
-        // i. Assignem a kValue el resultat de cridar el mètode intern Get de l'objecte O amb l'argument Pk.
-        kValue = O[k];
-
-        // ii. Cridem el mètode intern "call" del callback tot passant-li T com a valor de "this"
-        // així com una llista d'arguments que conté kValue, k i 0
-        callback.call(T, kValue, k, O);
-      }
-      // d. Incrementem el valor de k en 1.
-      k++;
-    }
-    // 8. retornem undefined
-  };
-}
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES5.1', '#sec-15.4.4.18', 'Array.prototype.forEach')}}{{Spec2('ES5.1')}}Definició inicial. Implementat a JavaScript 1.6.
{{SpecName('ES6', '#sec-array.prototype.foreach', 'Array.prototype.forEach')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.8")}}{{CompatIE("9")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.8")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Map.prototype.forEach()")}}
    • -
  • {{jsxref("Set.prototype.forEach()")}}
    • -
  • {{jsxref("Array.prototype.map()")}}
    • -
  • {{jsxref("Array.prototype.every()")}}
    • -
  • {{jsxref("Array.prototype.some()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/array/includes/index.html b/files/ca/web/javascript/referencia/objectes_globals/array/includes/index.html deleted file mode 100644 index 9f64b0e117..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/array/includes/index.html +++ /dev/null @@ -1,158 +0,0 @@ ---- -title: Array.prototype.includes() -slug: Web/JavaScript/Referencia/Objectes_globals/Array/includes -translation_of: Web/JavaScript/Reference/Global_Objects/Array/includes ---- -
{{JSRef}}
- -

El mètode includes() determina si un array inclou un element concret, retornant  true o false segons s'escaigui. 

- -

Sintaxi

- -
var boolean = array.includes(elementCercat[, desdePosicio])
- -

Parameters

- -
-
elementCercat
-
L'element a cercar.
-
desdePosicio
-
Opcional. La posició de l'array a partir de la qual començar la cerca de elementCercat. Un valor negatiu cercarà el nombre absolut donat de posicions contant des del final de l'array. El seu valor per defecte és 0.
-
- -

Valor retornat

- -

Un {{jsxref("Boolean")}}.

- -

Exemples

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

- -
if (!Array.prototype.includes) {
-  Array.prototype.includes = function(searchElement /*, fromIndex*/ ) {
-    'use strict';
-    var O = Object(this);
-    var len = parseInt(O.length) || 0;
-    if (len === 0) {
-      return false;
-    }
-    var n = parseInt(arguments[1]) || 0;
-    var k;
-    if (n >= 0) {
-      k = n;
-    } else {
-      k = len + n;
-      if (k < 0) {k = 0;}
-    }
-    var currentElement;
-    while (k < len) {
-      currentElement = O[k];
-      if (searchElement === currentElement ||
-         (searchElement !== searchElement && currentElement !== currentElement)) { // NaN !== NaN
-        return true;
-      }
-      k++;
-    }
-    return false;
-  };
-}
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES7', '#sec-array.prototype.includes', 'Array.prototype.includes')}}{{Spec2('ES7')}}Definició inicial.
{{SpecName('ESDraft', '#sec-array.prototype.includes', 'Array.prototype.includes')}}{{Spec2('ESDraft')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerEdgeOperaSafari
Suport bàsic -

{{CompatChrome(47)}}

- 		43{{CompatNo}}{{CompatNo}}349
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Suport bàsic{{CompatNo}} -

{{CompatChrome(47)}}

- 		43{{CompatNo}}349 -

{{CompatChrome(47)}}

-
-
- -

Vegeu també

- -
    -
  • {{jsxref("TypedArray.prototype.includes()")}}
    • -
  • {{jsxref("String.prototype.includes()")}}
    • -
  • {{jsxref("Array.prototype.indexOf()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/array/index.html b/files/ca/web/javascript/referencia/objectes_globals/array/index.html deleted file mode 100644 index da7c400799..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/array/index.html +++ /dev/null @@ -1,482 +0,0 @@ ---- -title: Array -slug: Web/JavaScript/Referencia/Objectes_globals/Array -translation_of: Web/JavaScript/Reference/Global_Objects/Array ---- -
{{JSRef}}
- -

Resum

- -

L'objecte de JavaScript Array és un objecte global que s'utilitza per a construir arrays; que són objectes d'al nivell que representen llistes.

- -

Crear un Array

- -
var fruites = ["Poma", "Pera"];
-
-console.log(fruites.length);
-// 2
-
- -

Accedir (mitjançant la posició) a un element d'un Array

- -
var primer = fruites[0];
-// Poma
-
-var ultim = fruites[fruites.length - 1];
-// Pera
-
- -

Recòrrer un Array

- -
fruites.forEach(function (element, index, array) {
-  console.log(element, index);
-});
-// Poma 0
-// Pera 1
-
- -

Afegir elements al final d'un Array

- -
var nouTamany = fruites.push("Taronja");
-// ["Poma", "Pera", "Taronja"]
-
- -

Eliminar l'element del final d'un Array

- -
var ultim = fruites.pop(); // Elimina Taronja (del final)
-// ["Poma", "Pera"];
-
- -

Eliminar l'element de l'inici d'un Array

- -
var primer = fruites.shift(); // elimina Poma del principi del Array
-// ["Pera"];
-
- -

Afegir un element a l'inici d'un Array

- -
var nouTamany = fruites.unshift("Maduixa") // Afegir al principi
-// ["Maduixa", "Pera"];
-
- -

Trobar la posició d'un element del Array

- -
fruites.push("Mango");
-// ["Maduixa", "Pera", "Mango"]
-
-var pos = fruites.indexOf("Pera");
-// 1
-
- -

Eliminar un element segons la seva posició

- -
var elementEliminat = fruites.splice(pos, 1); // així és com s'elimina un element
-// ["Maduixa", "Mango"]
-
- -

Copiar un Array

- -
var shallowCopy = fruits.slice(); // així és com es copia
-// ["Maduixa", "Mango"]
-
- -

Sintaxi

- -
[element0, element1, ..., elementN]
-new Array(element0, element1[, ...[, elementN]])
-new Array(longitudArray)
- -
-
elementN
-
S'inicialitza un array de JavaScript amb els elements donats, excepte si només es proporciona un sol argument al constructor Array i aquest argument és un nombre. (Vegeu a sota). Cal destacar que aquest cas especial només s'aplica a arrays de JavaScript creats mitjançant el constructor Array i no a literals array creats a partir de ls sintaxi de claus.
-
longitudArray
-
Si només es passa un sol argument al constructor Array i aquest argument és un nombre entre 0 232-1 (inclòs), aquest retorna un nou array de JavaScript amb la longitud especificada pel nombre passat com a argument. Si l'argument és qualsevol altre nombre es llença l'excepció {{jsxref("Global_Objects/RangeError", "RangeError")}}.
-
- -

Descripció

- -

Els arrays són objectes semblants a lliste el prototipus dels quals té mètodes que permeten realitzar operacions de travessa i mutació. Ni a longitud ni el tipus dels elements són fixos en els arrays de JavaScript. Com que el tamany d'un array pot canviar en qualsevol moment no es pot garantir la seva densitat. En general aquestes característiques són convenients; però si en algun cas aquestes característiques no fossin convenients es recomana considerar l'ús de arrays amb tipus.

- -

Algunes persones creuen que no s'hauria de fer ús de arrays com amb finalitats associatives. En qualsevol cas sempre es pot utilitzar senzillament un {{jsxref("Global_Objects/Object", "objects")}} per a tal fet instead, tot i que fer-ho també té els seus inconvenients. Vegeu el post Diccionaris de JavaScript lleugers amb claus arbitràries per a exemple.

- -

Accedir als elements d'un array

- -

Els arrays de JavaScript comencen el compte de posició (índex) amb el zero: és a dir, el primer element d'un array ocupa la posició 0 i l'últim element d'un array es troba a l'índex amb valor del  {{jsxref("Array.length", "tamany")}} de l'array menys 1.

- -
var arr = ['aquest és el primer element', 'aquest és el segon element'];
-console.log(arr[0]);              // mostra 'aquest és el primer element'
-console.log(arr[1]);              // mostra 'aquest és el segon element'
-console.log(arr[arr.length - 1]); // mostra 'aquest és el segon element'
-
- -

Els elements d'un array són propietats de l'objecte de la mateixa que toString és una propietat, però intentar accedir un element d'un array de la manera que es mostra a continuació llença un error de sintaxi, ja que el nom de la propietat no és vàlid:

- -
console.log(arr.0); // error de sintaxi
-
- -

No hi ha res d'especial sobre els arrays de JavaScript i les propietats que causen aquest comportament. A JavaScript, les propietats que comencen amb un dígit no es poden referenciar amb la notació de punt; per a accedir-hi és necesari utilitzar la notació de claus. Per exemple, per a accedir a la propietat anomenada '3d' d'un objecte, l'única forma d'accedir-hi és mitjançant la notació de claus tal i com es mostra a continuació:

- -
var anys = [1950, 1960, 1970, 1980, 1990, 2000, 2010];
-console.log(anys.0);   // error de sintaxi
-console.log(anys[0]);  // funciona
-
- -
renderer.3d.setTexture(model, 'character.png');     // error de sintaxi
-renderer['3d'].setTexture(model, 'character.png');  // funciona
-
- -

Fixeu-vos que a l'exemple de 3d, '3d' necessita cometes. És possible utilitzar cometes amb les posicions d'un array (per exemple, anys['2'] en comptes de anys[2]), tot i que no és necesari. El 2 a anys[2] és transformat en un string pel motor de JavaScript implícitament mitjançant el mètode toString. Per aquesta raó '2' i '02' es referirien a dues propietats diferents de l'objecte anys i l'exemple següent podría retornar true:

- -
console.log(anys['2'] != anys['02']);
-
- -

De la mateixa manera, les propietats d'objectes que utilitzin paraules clau com a nom(!) només es poden accedir mitjançant literals string en notació de claus (però poden accedir-se mitjançant notació de punt com a mínim al firefox 40.0a2):

- -
var promise = {
-  'var'  : 'text',
-  'array': [1, 2, 3, 4]
-};
-
-console.log(promise['array']);
-
- -

Relació  entre length i propietats numèriques

- -

La propietat {{jsxref("Array.length", "length")}} dels arrays de JavaScript està relacionada amb les propietats numèriques. Diversos mètodes pertanyent de forma nativa a l'objecte array (com ara {{jsxref("Array.join", "join")}}, {{jsxref("Array.slice", "slice")}}, {{jsxref("Array.indexOf", "indexOf")}}, etcètera.) tenen en compte el valor de la propietat {{jsxref("Array.length", "length")}} quan són cridats. Altres mètodes, com ara {{jsxref("Array.push", "push")}} o {{jsxref("Array.splice", "splice")}}, també actualitzen el valor de la propietat {{jsxref("Array.length", "length")}}.

- -
var fruites = [];
-fruites.push('banana', 'poma', 'prèssec');
-
-console.log(fruites.length); // 3
-
- -

A l'hora d'assignar una propietat a un array de JavaScript, quan la propietat és una posició vàlida i aquesta posició cau fora dels límits que l'array té en aquell moment, el motor ha d'actualitzar la propietat {{jsxref("Array.length", "length")}} de l'array apropiadament:

- -
fruites[5] = 'mango';
-console.log(fruites[5]); // 'mango'
-console.log(Object.keys(fruites));  // ['0', '1', '2', '5']
-console.log(fruites.length); // 6
-
- -

Incrementant la longitud amb {{jsxref("Array.length", "length")}}.

- -
fruites.length = 10;
-console.log(Object.keys(fruites)); // ['0', '1', '2', '5']
-console.log(fruites.length); // 10
-
- -

Decrementar la propietat {{jsxref("Array.length", "length")}}, per contra, elimina elements.

- -
fruites.length = 2;
-console.log(Object.keys(fruites)); // ['0', '1']
-console.log(fruites.length); // 2
-
- -

Aquest comportament s'explica amb més detall a la pàgina de {{jsxref("Array.length")}}.

- -

Crear un array utilitzant el resultat d'una expressió regular

- -

El resultats obtinguts a l'aplicar una expressió regular sobre un string poden crear un array de JavaScript. Aquest array tindrà propietats i elements que ofereixen informació sobre les coincidències. Aquest tipus d'arrays és retornat pels mètodes {{jsxref("RegExp.exec")}}, {{jsxref("String.match")}}, i {{jsxref("String.replace")}}. Per a ajudar a entendre aquestes propietats i elements, vegeu l'exemple següent i la taula a continuació:

- -
// Cerca una d seguida d'una o més b's seguides d'una d
-// Desa les coincidències de b's amb una d a continuació
-// No distingeix entre majúscules i minúscules
-
-var myRe = /d(b+)(d)/i;
-var myArray = myRe.exec('cdbBdbsbz');
-
- -

Les propietats i elements retornats d'aplicar aquesta expressió regular al string són les següents:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Propietat/ElementDescripcióExemple
inputPropietat només de lectura que representa el string original contra el que s'ha aplicat la expressió regular.cdbBdbsbz
indexPropietat només de lectura que representa la posició on s'ha trobat coincidència (considerant zero la primera posició)1
[0]element només de lectura que especifica els últims caràcters que han coincidit.dbBd
[1], ...[n]Elements només de lectura que especifiquen coincidències parcials en parèntesi, si aquests s'inclouen a l'expressió regular. El nombre de possibles coincidències parcials en parèntesi és il·limitat.[1]: bB
- [2]: d
- -

Propietats

- -
-
Array.length
-
La propietat de longitud del constructor de Array. El seu valor és 1.
-
{{jsxref("Array.prototype")}}
-
Permet l'adició de propietats a tots els objectes array.
-
- -

Mètodes

- -
-
{{jsxref("Array.from()")}} {{experimental_inline}}
-
Crea una nova instància de Array a partir d'un objecte iterable o un objecte similar a un array.
-
{{jsxref("Array.isArray()")}}
-
Retorna true si una variable és un array. En cas contrari retorna false.
-
{{jsxref("Array.observe()")}} {{experimental_inline}}
-
Observa de forma asíncrona canvis en Arrays, de manera similar al mètode {{jsxref("Object.observe()")}} per a objectes. Proporciona una sequència de canvis ordenats per ordre d'ocurrència.
-
{{jsxref("Array.of()")}} {{experimental_inline}}
-
Crea una nova instància de Array amb un nombre variable d'arguments, sense importar el nombre o tipus d'arguments.
-
- -

Instàncies de Array

- -

Totes les instàncies de Array hereten de {{jsxref("Array.prototype")}}. L'objecte prototipus del constructor de Array es pot modificar per a afectar a totes les instàncies de Array a l'hora.

- -

Propietats

- -
{{page('/ca/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Properties')}}
- -

Mètodes

- -

Mètodes de mutació

- -
{{page('ca/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Mutator_methods')}}
- -

Mètodes d'accés

- -
{{page('ca/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Accessor_methods')}}
- -

Mètodes d'iteració

- -
{{page('ca/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Iteration_methods')}}
- -

Mètodes genèrics de Array

- -
-

Els genèrics de Array no formen part de cap standard, estan en desús i poden ser esborrats en el futur. Noteu que no funcionen a tots els navegadors, tot i que hi ha una correcció de compatibilitat disponible a GitHub.

-
- -

De vegades hom voldria aplicar mètodes de array a strings o altres objectes semblants a arrays (com ara la funció {{jsxref("Functions/arguments", "arguments", "", 1)}}). Per a aconseguir això, es tractaria un string com un array de caràcters (o en tot cas tractar un objecte que no sigui un array com a array). Per exemple, per a comprovar que tots els caràcters d'una variable str són lletres, es faria de la forma següent:

- -
function isLetter(character) {
-  return character >= 'a' && character <= 'z';
-}
-
-if (Array.prototype.every.call(str, isLetter)) {
-  console.log("El string '" + str + "' només conté lletres!");
-}
-
- -

Aquesta notació és força molesta i JavaScript 1.6 va introduïr una abreviació genèrica:

- -
if (Array.every(str, isLetter)) {
-  console.log("El string '" + str + "' només conté lletres!");
-}
-
- -

{{jsxref("Global_Objects/String", "Generics", "#String_generic_methods", 1)}} també estan disponibles a {{jsxref("Global_Objects/String", "String")}}.

- -

Aquests no formen actualment part de cap standard ECMAScript (tot i que es pot utilitzar el mètode {{jsxref("Array.from()")}} de l'ECMAScript 6 per a aconseguir el mateix resultat). A continuació es presenta una correcció de compatibilitat per a permetre el seu ús a qualsevol navegador:

- -
// Asumeix que els extres de Array són presents (també es poden utilitzar funcions Polifyll per a suplir això)
-(function() {
-  'use strict';
-
-  var i,
-    // També es podria construïr l'array de mètodes de la forma següent, però
-    //   el mètode getOwnPropertyNames() no té cap corrector de compatibilitat:
-    // Object.getOwnPropertyNames(Array).filter(function(methodName) {
-    //   return typeof Array[methodName] === 'function'
-    // });
-    methods = [
-      'join', 'reverse', 'sort', 'push', 'pop', 'shift', 'unshift',
-      'splice', 'concat', 'slice', 'indexOf', 'lastIndexOf',
-      'forEach', 'map', 'reduce', 'reduceRight', 'filter',
-      'some', 'every', 'find', 'findIndex', 'entries', 'keys',
-      'values', 'copyWithin', 'includes'
-    ],
-    methodCount = methods.length,
-    assignArrayGeneric = function(methodName) {
-      if (!Array[methodName]) {
-        var method = Array.prototype[methodName];
-        if (typeof method === 'function') {
-          Array[methodName] = function() {
-            return method.call.apply(method, arguments);
-          };
-        }
-      }
-    };
-
-  for (i = 0; i < methodCount; i++) {
-    assignArrayGeneric(methods[i]);
-  }
-}());
-
- -

Exemples

- -

Crear un array

- -

L'exemple següent crea un array, msgArray, amb un tamany de 0, després assigna valors a les posicions msgArray[0] i msgArray[99], canviant automàticament el tamany de l'array a 100.

- -
var msgArray = [];
-msgArray[0] = 'Hello';
-msgArray[99] = 'world';
-
-if (msgArray.length === 100) {
-  console.log('The length is 100.');
-}
-
- -

Crear un array de dues dimensions (bidimensional)

- -

L'exemple següent crea un tauler d'escacs com a array bidimensional de strings. El primer moviement es realitza tot copiant la 'p' de la posició (6,4) a (4,4). La posició anterior esdevé buïda.

- -
var board = [
-  ['R','N','B','Q','K','B','N','R'],
-  ['P','P','P','P','P','P','P','P'],
-  [' ',' ',' ',' ',' ',' ',' ',' '],
-  [' ',' ',' ',' ',' ',' ',' ',' '],
-  [' ',' ',' ',' ',' ',' ',' ',' '],
-  [' ',' ',' ',' ',' ',' ',' ',' '],
-  ['p','p','p','p','p','p','p','p'],
-  ['r','n','b','q','k','b','n','r'] ];
-
-console.log(board.join('\n') + '\n\n');
-
-// Movem el peó del Rei endevant dues caselles
-board[4][4] = board[6][4];
-board[6][4] = ' ';
-console.log(board.join('\n'));
-
- -

Aquesta seria la sortida:

- -
R,N,B,Q,K,B,N,R
-P,P,P,P,P,P,P,P
- , , , , , , ,
- , , , , , , ,
- , , , , , , ,
- , , , , , , ,
-p,p,p,p,p,p,p,p
-r,n,b,q,k,b,n,r
-
-R,N,B,Q,K,B,N,R
-P,P,P,P,P,P,P,P
- , , , , , , ,
- , , , , , , ,
- , , , ,p, , ,
- , , , , , , ,
-p,p,p,p, ,p,p,p
-r,n,b,q,k,b,n,r
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial.
{{SpecName('ES5.1', '#sec-15.4', 'Array')}}{{Spec2('ES5.1')}}S'afegeixen més mètodes: {{jsxref("Array.isArray")}}, {{jsxref("Array.prototype.indexOf", "indexOf")}}, {{jsxref("Array.prototype.lastIndexOf", "lastIndexOf")}}, {{jsxref("Array.prototype.every", "every")}}, {{jsxref("Array.prototype.some", "some")}}, {{jsxref("Array.prototype.forEach", "forEach")}}, {{jsxref("Array.prototype.map", "map")}}, {{jsxref("Array.prototype.filter", "filter")}}, {{jsxref("Array.prototype.reduce", "reduce")}}, {{jsxref("Array.prototype.reduceRight", "reduceRight")}}
{{SpecName('ES6', '#sec-array-objects', 'Array')}}{{Spec2('ES6')}}S'afegeixen més mètodes: {{jsxref("Array.from")}}, {{jsxref("Array.of")}}, {{jsxref("Array.prototype.find", "find")}}, {{jsxref("Array.prototype.findIndex", "findIndex")}}, {{jsxref("Array.prototype.fill", "fill")}}, {{jsxref("Array.prototype.copyWithin", "copyWithin")}}
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
- - - - - - -
Suport bàsic
- 		{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- - diff --git a/files/ca/web/javascript/referencia/objectes_globals/array/indexof/index.html b/files/ca/web/javascript/referencia/objectes_globals/array/indexof/index.html deleted file mode 100644 index 939571a0c8..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/array/indexof/index.html +++ /dev/null @@ -1,235 +0,0 @@ ---- -title: Array.prototype.indexOf() -slug: Web/JavaScript/Referencia/Objectes_globals/Array/indexOf -translation_of: Web/JavaScript/Reference/Global_Objects/Array/indexOf ---- -
{{JSRef}}
- -

El mètode indexOf() retorna la primera posició a la qual es troba l'element proporcionat, o bé -1 si l'element no es troba dins l'array.

- -

Sintaxi

- -
arr.indexOf(elementAcercar[, posicioInicial = 0])
- -

Paràmetres

- -
-
elementAcercar
-
L'element que es cercarà.
-
posicioInicial
-
La posició a la qual començar la cerca. Si la posició és major o igual a la longitud de l'array, es retornarà -1, això implica que no es realitzarà cap cerca a l'array. Si es proporciona un onmbre negatiu, es calcularà la posició des de la qual cercar des del final de l'array. Nota: l'array sempre es cercarà accedint a les posicions en ordre ascendent encara que la posicioInicial sigui negatiu. Si la posició proporcionada és 0 es cercarà en tot l'array. El valor per defecte és 0 (cerca a tot l'array).
-
- -

Descripció

- -

indexOf() compara elementAcercar amb els elements de l'array mitjançant la igualtat estricta (el mateix mètode utilitzat per l'operador ===, també anomenat triple-equals).

- -

Exemples

- -

Utilitzar indexOf()

- -

L'exemple següent utilitza indexOf() per a localitzar valors dins un array.

- -
var array = [2, 9, 9];
-array.indexOf(2);     // 0
-array.indexOf(7);     // -1
-array.indexOf(9, 2);  // 2
-array.indexOf(2, -1); // -1
-array.indexOf(2, -3); // 0
-
- -

Trobar totes les ocurrències d'un element

- -
var indices = [];
-var array = ['a', 'b', 'a', 'c', 'a', 'd'];
-var element = 'a';
-var idx = array.indexOf(element);
-while (idx != -1) {
-  indices.push(idx);
-  idx = array.indexOf(element, idx + 1);
-}
-console.log(indices);
-// [0, 2, 4]
-
- -

Determinar si un element existeix o no a l'array i actualitzar-lo

- -
function updateVegetablesCollection (veggies, veggie) {
-    if (veggies.indexOf(veggie) === -1) {
-        veggies.push(veggie);
-        console.log('La nova col·lecció de verdures és : ' + veggies);
-    } else if (veggies.indexOf(veggie) > -1) {
-        console.log(veggie + ' ja existeix a la col·lecció de verdures.');
-    }
-}
-
-var veggies = ['potato', 'tomato', 'chillies', 'green-pepper'];
-
-updateVegetablesCollection(veggies, 'spinach');
-//  La nova col·lecció de verdures és : potato,tomato,chillies,green-papper,spinach
-updateVegetablesCollection(veggies, 'spinach');
-// spinach  ja existeix a la col·lecció de verdures.
-
- -

Polyfill

- -

indexOf() va ser afegit al standard ECMA-262 a la cinquena versió; degut a això pot no estar present en tots els navegadors. Afegir el següent codi al principi dels vostres escripts us permetrà utilitzar aquesta funció en navegadors on indexOf no sigui suportada de forma nativa. Aquest algoritme és el mateix que l'especificat a la cinquena versió de l'ECMA-262, donat que {{jsxref("Global_Objects/TypeError", "TypeError")}} i {{jsxref("Math.abs()")}} no han estat modificats.

- -
// Production steps of ECMA-262, Edition 5, 15.4.4.14
-// Reference: http://es5.github.io/#x15.4.4.14
-if (!Array.prototype.indexOf) {
-  Array.prototype.indexOf = function(searchElement, fromIndex) {
-
-    var k;
-
-    // 1. Sigui o el resultat de cridar ToObject passant
-    //    el valor de this com a argument.
-    if (this == null) {
-      throw new TypeError('"this" is null or not defined');
-    }
-
-    var o = Object(this);
-
-    // 2. Sigui lenValue el resultat de cridar el mètode intern Get
-    //    de o amb l'argument "length".
-    // 3. Sigui len ToUint32(lenValue).
-    var len = o.length >>> 0;
-
-    // 4. Si len és 0, retornem -1.
-    if (len === 0) {
-      return -1;
-    }
-
-    // 5. Si s'ha passat l'argument fromIndex n valdrà
-    //    ToInteger(fromIndex); si no n valdrà 0.
-    var n = +fromIndex || 0;
-
-    if (Math.abs(n) === Infinity) {
-      n = 0;
-    }
-
-    // 6. Si n >= len, retornem -1.
-    if (n >= len) {
-      return -1;
-    }
-
-    // 7. Si n >= 0, k valdrà n.
-    // 8. Si no, si n<0, k valdrà len - abs(n).
-    //    Si k és menor que 0, llavors k valdrà 0.
-    k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);
-
-    // 9. Repetir mentre k < len
-    while (k < len) {
-      // a. Sigui Pk ToString(k).
-      //   Això és implícit per a operands a l'esquerra de l'operador in
-      // b. Sigui kPresent el resultat de cridar el mètode intern
-      //    HasProperty de o amb l'argument Pk.
-      //   Aquest pas es pot combinar amb c
-      // c. Si kPresent és cert, llavors
-      //    i.  Sigui elementK el resultat de cridar el mètode intern Get
-      //        de o amb l'argument ToString(k).
-      //   ii.  Sigui same el resultat d'aplicar l'algoritme del
-      //         comparador d'igualtat estricta a
-      //        searchElement i elementK.
-      //  iii.  Si same és cert retornem k.
-      if (k in o && o[k] === searchElement) {
-        return k;
-      }
-      k++;
-    }
-    return -1;
-  };
-}
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES5.1', '#sec-15.4.4.14', 'Array.prototype.indexOf')}}{{Spec2('ES5.1')}}Definició inicial. Implementat a JavaScript 1.6.
{{SpecName('ES6', '#sec-array.prototype.indexof', 'Array.prototype.indexOf')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-array.prototype.indexof', 'Array.prototype.indexOf')}}{{Spec2('ESDraft')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.8")}}{{CompatIE("9")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.8")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Notes de compatibilitat

- -
    -
  • Començant amb el Firefox 47 {{geckoRelease(47)}},  aquest mètode no retornarà -0. Per exemple, [0].indexOf(0, -0) ara sempre retornarà +0 ({{bug(1242043)}}).
    • -
- -

Vegeu també

- -
    -
  • {{jsxref("Array.prototype.lastIndexOf()")}}
    • -
  • {{jsxref("TypedArray.prototype.indexOf()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/array/isarray/index.html b/files/ca/web/javascript/referencia/objectes_globals/array/isarray/index.html deleted file mode 100644 index 6393dde86f..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/array/isarray/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: Array.isArray() -slug: Web/JavaScript/Referencia/Objectes_globals/Array/isArray -translation_of: Web/JavaScript/Reference/Global_Objects/Array/isArray ---- -
{{JSRef}}
- -

El mètode Array.isArray()retorna true si un objecte és un array, o false en cas que no ho sigui.

- -

Sintaxi

- -
Array.isArray(obj)
- -

Paràmetres

- -
-
obj
-
L'objecte que s'ha de comprovar.
-
- -

Descripció

- -

Vegeu l'article “Determinar amb absoluta precisió si un objecte JavaScript és un array o no” per més detalls.

- -

Exemples

- -
// totes les crides següents retornen true
-Array.isArray([]);
-Array.isArray([1]);
-Array.isArray(new Array());
-// Fet poc conegut: Array.prototype és un array per si mateix:
-Array.isArray(Array.prototype);
-
-// totes les crides següents retornen false
-Array.isArray();
-Array.isArray({});
-Array.isArray(null);
-Array.isArray(undefined);
-Array.isArray(17);
-Array.isArray('Array');
-Array.isArray(true);
-Array.isArray(false);
-Array.isArray({ __proto__: Array.prototype });
-
- -

Polyfill

- -

Executar el codi següent abans de cap altre codi crearà Array.isArray() si no es troba disponible de forma nativa.

- -
if (!Array.isArray) {
-  Array.isArray = function(arg) {
-    return Object.prototype.toString.call(arg) === '[object Array]';
-  };
-}
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES5.1', '#sec-15.4.3.2', 'Array.isArray')}}{{Spec2('ES5.1')}}Definició inicial. Implementat en JavaScript 1.8.5.
{{SpecName('ES6', '#sec-array.isarray', 'Array.isArray')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome("5")}}{{CompatGeckoDesktop("2.0")}}{{CompatIE("9")}}{{CompatOpera("10.5")}}{{CompatSafari("5")}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("2.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Array")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/array/join/index.html b/files/ca/web/javascript/referencia/objectes_globals/array/join/index.html deleted file mode 100644 index 8d76b4474a..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/array/join/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: Array.prototype.join() -slug: Web/JavaScript/Referencia/Objectes_globals/Array/join -translation_of: Web/JavaScript/Reference/Global_Objects/Array/join ---- -
{{JSRef}}
- -

El mètode join() ajunta tots els elements d'un array en un string.

- -

Sintaxi

- -
str = arr.join([separador = ','])
- -

Paràmetres

- -
-
separador
-
Opcional. Expecifica un string que s'utilitzarà per a serparar cada element de l'array. El separador es converteix a string automàticament en cas necesari. Si s'omet, els elements de l'array seran separats per una coma. Si separador és un string buit, s'ajuntaran tots els elements de l'array sense cap caràcter entre ells.
-
- -

Descripció

- -

Ajunta les conversions a string de tots els elements de l'array en un sol string. Si un element és undefined o bé null aquest es converteix en una cadena buida.

- -

Exemples

- -

Quatre formes diferents d'ajuntar un array

- -

L'exemple següent crea un array, a, amb tres elements, l'ajunta quatre cops: utilitzant el separador per defect, utilitzant coma i espai, utiltizant el signe més i utilitzant un string buit.

- -
var a = ['Wind', 'Rain', 'Fire'];
-var myVar1 = a.join();      // assigna 'Wind,Rain,Fire' a myVar1
-var myVar2 = a.join(', ');  // assigna 'Wind, Rain, Fire' a myVar2
-var myVar3 = a.join(' + '); // assigna 'Wind + Rain + Fire' a myVar3
-var myVar4 = a.join('');    // assigna 'WindRainFire' a myVar4
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.4.4.5', 'Array.prototype.join')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-array.prototype.join', 'Array.prototype.join')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome("1.0")}}{{CompatGeckoDesktop("1.7")}}{{CompatIE("5.5")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("String.prototype.split()")}}
    • -
  • {{jsxref("Array.prototype.toString()")}}
    • -
  • {{jsxref("TypedArray.prototype.join()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/array/keys/index.html b/files/ca/web/javascript/referencia/objectes_globals/array/keys/index.html deleted file mode 100644 index 7d9df8e1f5..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/array/keys/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: Array.prototype.keys() -slug: Web/JavaScript/Referencia/Objectes_globals/Array/keys -translation_of: Web/JavaScript/Reference/Global_Objects/Array/keys ---- -
{{JSRef}}
- -

El mètode keys() retorna un nou Array Iterator que conté la clau de cada posició d'un array.

- -

Sintaxi

- -
arr.keys()
- -

Exemples

- -

Ús bàsic

- -
var arr = ["a", "b", "c"];
-var iterator = arr.keys();
-
-console.log(iterator.next()); // { value: 0, done: false }
-console.log(iterator.next()); // { value: 1, done: false }
-console.log(iterator.next()); // { value: 2, done: false }
-console.log(iterator.next()); // { value: undefined, done: true }
-
- -

L'iterador de claus no ignora els forats

- -
var arr = ["a", , "c"];
-var sparseKeys = Object.keys(arr);
-var denseKeys = [...arr.keys()];
-console.log(sparseKeys); // ['0', '2']
-console.log(denseKeys);  // [0, 1, 2]
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-array.prototype.keys', 'Array.prototype.keys')}}{{Spec2('ES6')}}Definició inicial.
{{SpecName('ESDraft', '#sec-array.prototype.keys', 'Array.prototype.keys')}}{{Spec2('ESDraft')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome("38")}}{{CompatGeckoDesktop("28")}}{{CompatNo}}{{CompatOpera("25")}}{{CompatSafari("7.1")}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("28")}}{{CompatNo}}{{CompatNo}}8.0
-
- -

Vegeu també

- -
    -
  • {{jsxref("Array.prototype.values()")}}
    • -
  • {{jsxref("Array.prototype.entries()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/array/lastindexof/index.html b/files/ca/web/javascript/referencia/objectes_globals/array/lastindexof/index.html deleted file mode 100644 index 038aa614e5..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/array/lastindexof/index.html +++ /dev/null @@ -1,197 +0,0 @@ ---- -title: Array.prototype.lastIndexOf() -slug: Web/JavaScript/Referencia/Objectes_globals/Array/lastIndexOf -translation_of: Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf ---- -
{{JSRef}}
- -

 

- -

El mètode lastIndexOf () retorna l'última posició a la qual es troba l'element proporcionat, o bé -1 si l'element no es troba dins l'array. L'array es recorrerà en ordre invers a partir de la posició pocicioInicial.

- -

Sintaxi

- -
arr.lastIndexOf(elementAcercar[, posicioInicial = arr.length - 1])
- -

Paràmetres

- -
-
elementAcercar
-
L'element que es cercarà.
-
posicioInicial
-
Opcional. La posició a partir de la qual es començarà a cercar cap enrera. El valor per defecte és el tamany de l'array menys un, és a dir, tota l'array serà cercada. Si la posició proporcionada es major o igual que la longitud de l'array tot l'array serà cercat. Si és negatiu s'utilitzarà com a desplaçament respecte el final de l'array. Nota: l'array sempre es cercarà accedint a les posicions en ordre descendent encara que la posicioInicial sigui negatiu. Si la posició calculada és menor que zero, es retornarà -1, és a dir, l'array no serà cercat.
-
- -

Descripció

- -

lastIndexOf compara elementAcercar amb els elements de l'array mitjançant la igualtat estricta (el mateix mètode utilitzat per l'operador ===, també anomenat triple-equals).

- -

Exemples

- -

Utilitzar lastIndexOf

- -

L'exemple següent utilitza lastIndexOf per a localitzar valors dins un array.

- -
var array = [2, 5, 9, 2];
-array.lastIndexOf(2);     // 3
-array.lastIndexOf(7);     // -1
-array.lastIndexOf(2, 3);  // 3
-array.lastIndexOf(2, 2);  // 0
-array.lastIndexOf(2, -2); // 0
-array.lastIndexOf(2, -1); // 3
-
- -

Trobar totes les ocurrències d'un element

- -

L'exemple segïuent utilitza lastIndexOf per a trobar totes les posicions d'un element en un array donat, utilitzant {{jsxref("Array.prototype.push", "push")}} per a afegir-los a u altre array un cop trobats.

- -
var indices = [];
-var array = ['a', 'b', 'a', 'c', 'a', 'd'];
-var element = 'a';
-var idx = array.lastIndexOf(element);
-while (idx != -1) {
-  indices.push(idx);
-  idx = (idx > 0 ? array.lastIndexOf(element, idx - 1) : -1);
-}
-
-console.log(indices);
-// [4, 2, 0]
-
- -

Cal destacar que el cas idx == 0 s'ha de tractar de forma separada ja que l'element sempre serà trobat sense importar el valor del paràmetre posicioInicial si és el primer element de l'array. Aquest comportament és diferent del del mètode {{jsxref("Array.prototype.indexOf", "indexOf")}}.

- -

Polyfill

- -

lastIndexOf va ser afegit al standard ECMA-262 a la cinquena versió; degut a això pot no estar present en tots els navegadors. Afegir el següent codi al principi dels vostres escripts us permetrà utilitzar aquesta funció en navegadors on indexOf no sigui suportada de forma nativa. Aquest algoritme és el mateix que l'especificat a la cinquena versió de l'ECMA-262, donat que {{jsxref("Object")}}, {{jsxref("TypeError")}}, {{jsxref("Number")}}, {{jsxref("Math.floor")}}, {{jsxref("Math.abs")}}, i{{jsxref("Math.min")}} no han estat modificats.

- -
// Production steps of ECMA-262, Edition 5, 15.4.4.15
-// Reference: http://es5.github.io/#x15.4.4.15
-if (!Array.prototype.lastIndexOf) {
-  Array.prototype.lastIndexOf = function(searchElement /*, fromIndex*/) {
-    'use strict';
-
-    if (this === void 0 || this === null) {
-      throw new TypeError();
-    }
-
-    var n, k,
-      t = Object(this),
-      len = t.length >>> 0;
-    if (len === 0) {
-      return -1;
-    }
-
-    n = len - 1;
-    if (arguments.length > 1) {
-      n = Number(arguments[1]);
-      if (n != n) {
-        n = 0;
-      }
-      else if (n != 0 && n != (1 / 0) && n != -(1 / 0)) {
-        n = (n > 0 || -1) * Math.floor(Math.abs(n));
-      }
-    }
-
-    for (k = n >= 0 ? Math.min(n, len - 1) : len - Math.abs(n); k >= 0; k--) {
-      if (k in t && t[k] === searchElement) {
-        return k;
-      }
-    }
-    return -1;
-  };
-}
-
- -

Cal destacar que l'implementació aspira  una compatibilitat ambsoluta amb els mètodes lastIndexOf trobats al Firefox i el motor JavaScript SpiderMonkey, incloent diversos casos que són excepcionals. Si es pretén utilitzar-lo en aplicacions quotidianes, és posible calcular from amb codi més senzill si s'ignoren aquests casos.

- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES5.1', '#sec-15.4.4.15', 'Array.prototype.lastIndexOf')}}{{Spec2('ES5.1')}}Definició inicial. Implementat a JavaScript 1.6.
{{SpecName('ES6', '#sec-array.prototype.lastindexof', 'Array.prototype.lastIndexOf')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-array.prototype.lastindexof', 'Array.prototype.lastIndexOf')}}{{Spec2('ESDraft')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatIE("9")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Notes de compatibilitat

- -
    -
  • Començant amb el Firefox 47 {{geckoRelease(47)}}, aquest mètode no retornarà -0. Per exemple, [0].lastIndexOf(0, -0) ara sempre retornarà +0 ({{bug(1242043)}}).
    • -
- -

Vegeu també

- -
    -
  • {{jsxref("Array.prototype.indexOf()")}}
    • -
  • {{jsxref("TypedArray.prototype.lastIndexOf()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/array/length/index.html b/files/ca/web/javascript/referencia/objectes_globals/array/length/index.html deleted file mode 100644 index a4954565ff..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/array/length/index.html +++ /dev/null @@ -1,128 +0,0 @@ ---- -title: Array.prototype.length -slug: Web/JavaScript/Referencia/Objectes_globals/Array/length -translation_of: Web/JavaScript/Reference/Global_Objects/Array/length ---- -
{{JSRef}}
- -

La propietat length representa un nombre sencer sense signe de 32 bits que és sempre numèricament major que la última posició de l'array.

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

Sintaxi

- -
arr.length
- -

Descripció

- -

El valor de la propietat length és un sencer amb un signe positiu un valor menor de 2 elevat a 32 (232).

- -

Es pot establir la propietat length per truncar un array en qualsevol moment. Quan s'exten un array per mitjà de canviar la seva propietat length, el nombre actual d'elements no s'incrementa; per exemple, si s'estableix length a 3 quan en aquell moment és 2, l'array encara conté només 2 elements. Així, la propietat length no necessàriament indica el nombre de valors definits en l'array. Vegeu també Relació entre length i propietats numèriques.

- -

Exemples

- -

Recorrer un array

- -

En l'exemple següent, es recorre l'array numbers comprovant la propietat length. Es duplica el valor de cada element.

- -
var numbers = [1, 2, 3, 4, 5];
-
-for (var i = 0; i < numbers.length; i++) {
-  numbers[i] *= 2;
-}
-// numbers és ara [2, 4, 6, 8, 10]
-
- -

Escurçar una array

- -

L'exemple següent escurça l'array statesUS a una llargària de 50 en cas que la llargària actual sigui major de 50.

- -
if (statesUS.length > 50) {
-  statesUS.length = 50;
-}
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial.
{{SpecName('ES5.1', '#sec-15.4.5.2', 'Array.length')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-properties-of-array-instances-length', 'Array.length')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Array")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/array/map/index.html b/files/ca/web/javascript/referencia/objectes_globals/array/map/index.html deleted file mode 100644 index 6f0dc1a0d4..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/array/map/index.html +++ /dev/null @@ -1,317 +0,0 @@ ---- -title: Array.prototype.map() -slug: Web/JavaScript/Referencia/Objectes_globals/Array/map -translation_of: Web/JavaScript/Reference/Global_Objects/Array/map ---- -
{{JSRef("Global_Objects", "Array")}}
- -

Resum

- -

El mètode map() crea una nova array amb els resultats de la crida a la funció proporcionada un cop per cada element.

- -

Sintaxi

- -
arr.map(callback[, thisArg])
- -

Paràmetres

- -
-
callback
-
Funció que produeix un element de la nova array, agafant tres arguments:
-
-
-
currentValue
-
El valor actual que és processat en l'array.
-
index
-
L'índex de l'element actual que és processat en l'array.
-
array
-
L'array sobre la qual es crida map.
-
-
-
thisArg
-
Opcional. Valor a usar com a this quan s'executa la funció.
-
- -

Descripció

- -

map crida a la funció passada callback un cop per cada element de l'array, en ordre, i construeix un nou array a partir dels resultats. Només s'invoca callback per a posicions de l'array que tinguin valors assignats, incloent undefined. No es crida per a elements no trobats (és a dir, elements que no han rebut mai un valor o bé elements que s'han eliminat).

- -

S'invoca callback amb tres arguments: el valor de l'element, la posició de l'element a l'array, i l'array que s'està recorrent.

- -

Si s'ha proporcionat el paràmetre thisArg a l'hora de cridar map, aquest es passarà a la funció callback com a valor per a this dins la funció. En qualsevol altre cas el valor utilitzat com a this serà {{jsxref("Global_Objects/undefined", "undefined")}}. El valor finalment observable des de callback es determinarà d'acord a les regles usuals per a determinar el valor de this dins una funció.

- -

map no canvia l'array des del que es crida (tot i que callback, si s'invoca, pot fer-ho).

- -

El rang d'elements processat per map s'estableix abans de la primera invocació de callback. Els elements que s'hagin afegit a l'array després d'haver cridat map no seran visitats per callback. Si es canvient els elements existents, o s'eliminen, el valor passat a callback serà el valor que tinguessin quan es va invocar map; els elements que s'han eliminat no es visitaran.

- -

Exemples

- -

Exemple: Generar un array de rels quadrades a partir d'un array de nombres

- -

El codi següent agafa un array de nombres i crea un nou array que contindrà les rels quadrades dels nombres del primer array.

- -
var nombres = [1, 4, 9];
-var rels = nombres.map(Math.sqrt);
-// rels ara val [1, 2, 3], nombres encara val [1, 4, 9]
-
- -

Exemple: Utilitzar map per a canviar el format dels objectes d'un array

- -

El codi següent agafa un array d'objectes i crea un nou array que conté els nous objectes, que tenen un format diferent.

- -
var kvArray = [{key:1, value:10}, {key:2, value:20}, {key:3, value: 30}];
-var reformattedArray = kvArray.map(function(obj){
-   var rObj = {};
-   rObj[obj.key] = obj.value;
-   return rObj;
-});
-// reformattedArray ara val [{1:10}, {2:20}, {3:30}],
-// kvArray encara val [{key:1, value:10}, {key:2, value:20}, {key:3, value: 30}]
-
- -

Exemple: Assignar els nombres d'un array al resultat d'una funció que espera un argument

- -

El codi següent mostra com funciona map quan s'utilitza una funció que espera un argument. L'argument rebrà automàticament el valor de cada element de l'array mentre map recorre tot l'array original.

- -
var nombres = [1, 4, 9];
-var dobles = nombres.map(function(num) {
-  return num * 2;
-});
-// dobles ara val [2, 8, 18]. nombres encara val [1, 4, 9]
-
- -

Exemple: utilitzar map de forma genèrica

- -

Aquest exemple mostra com utilitzar map en un {{jsxref("Global_Objects/String", "String")}} per a obtindre un array de bytes que representin el valor dels caràcters codificats amb ASCII:

- -
var map = Array.prototype.map;
-var a = map.call('Hello World', function(x) { return x.charCodeAt(0); });
-// a ara val [72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]
-
- -

Exemple: Utilitzar map de forma genèrica amb querySelectorAll

- -

Aquest exemple mostra com iterar sobre una col·lecció d'objectes obtinguts mitjançant querySelectorAll. En aquest cas obtenim totes les opcions seleccionades de la web:

- -
var elems = document.querySelectorAll('select option:checked');
-var values = Array.prototype.map.call(elems, function(obj) {
-  return obj.value;
-});
-
- -

Exemple: Utilitzar map per a invertir un string

- -
var str = '12345';
-Array.prototype.map.call(str, function(x) {
-  return x;
-}).reverse().join('');
-
-// Sortida: '54321'
-// Bonus: utilitzeu '===' per a comprovar si l'string original era un palindrom
-
- -

Exemple: Un cas d'ús delicat

- -

(inspirat per aquesta entrada de blog)

- -

És comú utilitzar la funció callback amb un sol argument (l'element corresponent a la volta del bucle de l'array que s'està recorrent). Algunes funcions també solen requerir un sol argument, tot i que també poden acceptar arguements adicionals de forma opcional. Això pot produïr comportaments confussos.

- -
// Considerem:
-['1', '2', '3'].map(parseInt);
-// Quan hom esperaria [1, 2, 3]
-// El resultat real serà [1, NaN, NaN]
-
-// parseInt s'utilitza normalment amb un argument, però admet dos.
-// El primer és una expressió mentre que el segon és el mòdul.
-// Array.prototype.map passa 3 arguments a la funció callback:
-// l'element, la posició de l'element i l'array
-// parseInt ignorarà el tercer argument, però no el segon,
-// provocant la confussió. Vegeu l'entrada del blog per a més detalls
-
-function returnInt(element) {
-  return parseInt(element, 10);
-}
-
-['1', '2', '3'].map(returnInt); // [1, 2, 3]
-// Actual result is an array of numbers (as expected)
-
-// A simpler way to achieve the above, while avoiding the "gotcha":
-['1', '2', '3'].map(Number); // [1, 2, 3]
-
- -

Polyfill

- -

map va ser afegit a l'standard ECMA-262 a la cinquena edició; degut a això aquest pot no estar present en algunes implementacions de l'standard. Es pot solventar aquest problema insertant el codi següent al principi dels scripts que el requereixin, permetent que implementacions on map no està disponible de forma nativa en puguin fer ús. Aquest algoritme és exactament l'especificat per l'ECMA-262, 5a edició, assument que {{jsxref("Global_Objects/Object", "Object")}}, {{jsxref("Global_Objects/TypeError", "TypeError")}}, i {{jsxref("Global_Objects/Array", "Array")}} tenen els seus valors originals i que callback.call s'evalua al valor original de {{jsxref("Function.prototype.call")}}.

- -
// Production steps of ECMA-262, Edition 5, 15.4.4.19
-// Reference: http://es5.github.io/#x15.4.4.19
-if (!Array.prototype.map) {
-
-  Array.prototype.map = function(callback, thisArg) {
-
-    var T, A, k;
-
-    if (this == null) {
-      throw new TypeError(' this is null or not defined');
-    }
-
-    // 1. Assignem a O el resultat de cridar a ToObject passant-li el valor de |this|
-    //    com a argument.
-    var O = Object(this);
-
-    // 2. lenValue és el resultat de cridar el mètode intern
-    //    Get de O amb l'argument "length".
-    // 3. Assignem a len el valor d'executar ToUint32(lenValue).
-    var len = O.length >>> 0;
-
-    // 4. Si IsCallable(callback) és false, llencem l'excepció TypeError.
-    // Vegeu: http://es5.github.com/#x9.11
-    if (typeof callback !== 'function') {
-      throw new TypeError(callback + ' is not a function');
-    }
-
-    // 5. Si s'ha passat l'argument thisArg, l'assigment a T; en cas contrari T valdrà undefined.
-    if (arguments.length > 1) {
-      T = thisArg;
-    }
-
-    // 6. Assignem a A el nou array creat per l'expressió new Array(len)
-    //    on Array és el constructor standard de JavaScript amb aquest nom i
-    //    len és el valor de len.
-    A = new Array(len);
-
-    // 7. Assignem 0 a k
-    k = 0;
-
-    // 8. Repetim mentre k < len
-    while (k < len) {
-
-      var kValue, mappedValue;
-
-      // a. Assignem ToString(k) a Pk.
-      //   Això és implicit per a operands al cantó esquerra de l'operador in
-      // b. Assignem a kPresent el resultat de cridar el mètode intern HasProperty
-      //    de O amb l'argument Pk.
-      //   Es pot combinar aquest pas amb c
-      // c. Si kPresent és true, llavors
-      if (k in O) {
-
-        // i. Assignem a kValue el resultat de cridar el mètode intern
-        //    Get de O amb l'argument Pk.
-        kValue = O[k];
-
-        // ii. Assignem a mappedValue el resultat de cridar el mètode intern Call
-        //     de callback amb T com a valor de this i una llista d'arguments
-        //     que conté kValue, k, i O.
-        mappedValue = callback.call(T, kValue, k, O);
-
-        // iii. Cridem el mètode intern DefineOwnProperty de A amb els arguments
-        // Pk, Property Descriptor
-        // { Value: mappedValue,
-        //   Writable: true,
-        //   Enumerable: true,
-        //   Configurable: true },
-        // i false.
-
-        // En navegadors que suportin Object.defineProperty, utilitzeu el següent:
-        // Object.defineProperty(A, k, {
-        //   value: mappedValue,
-        //   writable: true,
-        //   enumerable: true,
-        //   configurable: true
-        // });
-
-        // Per a un millor suport de navegadors, utilitzeu el següent:
-        A[k] = mappedValue;
-      }
-      // d. incrementem k en 1.
-      k++;
-    }
-
-    // 9. retornem A
-    return A;
-  };
-}
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES5.1', '#sec-15.4.4.19', 'Array.prototype.map')}}{{Spec2('ES5.1')}}Definició inicial. Implementat a JavaScript 1.6.
{{SpecName('ES6', '#sec-array.prototype.map', 'Array.prototype.map')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.8")}}{{CompatIE("9")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.8")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Array.prototype.forEach()")}}
    • -
  • {{jsxref("Map")}} object
    • -
  • {{jsxref("Array.from()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/array/of/index.html b/files/ca/web/javascript/referencia/objectes_globals/array/of/index.html deleted file mode 100644 index efe2d96abd..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/array/of/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: Array.of() -slug: Web/JavaScript/Referencia/Objectes_globals/Array/of -translation_of: Web/JavaScript/Reference/Global_Objects/Array/of ---- -
{{JSRef}}
- -

El mètode Array.of() crea una nova instància Array amb un nombre variable d'arguments, sense tenir en compte el nombre o el tipus d'arguments.

- -

La diferència entre Array.of() i el constructor Array es troba en el maneig dels arguments sencers: Array.of(42) crea un array amb un sol element, 42, mentre que Array(42) crea un array amb 42 elements, Cadascun dels quals és undefined.

- -

Sintaxi

- -
Array.of(element0[, element1[, ...[, elementN]]])
- -

Paràmetres

- -
-
elementN
-
Elements a partir dels quals es crea l'array.
-
- -

Descripció

- -

Aquesta funció forma part del ECMAScript 6 estàndard. Per més informació vegeu proposta de l'Array.of i Array.from i Array.of polyfill.

- -

Exemples

- -
Array.of(1);         // [1]
-Array.of(1, 2, 3);   // [1, 2, 3]
-Array.of(undefined); // [undefined]
-
- -

Polyfill

- -

Executar el codi següent abans que cap altre codi crearà Array.of() en cas que no es trobi disponible de forma nativa.

- -
if (!Array.of) {
-  Array.of = function() {
-    return Array.prototype.slice.call(arguments);
-  };
-}
-
- -

Especificacions

- - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-array.of', 'Array.of')}}{{Spec2('ES6')}}Definició inicial.
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome(45)}}{{CompatGeckoDesktop("25")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatChrome(39)}}{{CompatGeckoMobile("25")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Array")}}
    • -
  • {{jsxref("Array.from()")}}
    • -
  • {{jsxref("TypedArray.of()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/array/pop/index.html b/files/ca/web/javascript/referencia/objectes_globals/array/pop/index.html deleted file mode 100644 index 7d2ee3189f..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/array/pop/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: Array.prototype.pop() -slug: Web/JavaScript/Referencia/Objectes_globals/Array/pop -translation_of: Web/JavaScript/Reference/Global_Objects/Array/pop ---- -
{{JSRef}}
- -

El mètode pop() elimina l'últim element d'un array i retorna l'element eliminat.

- -

Sintaxi

- -
arr.pop()
- -

Descripció

- -

El mètode pop elimina l'últim element d'un array i retorna el seu valor.

- -

pop és genèric de forma intencionada; aquest mètode pot ser {{jsxref("Function.call", "cridat", "", 1)}} i {{jsxref("Function.apply", "aplicat", "", 1)}} des de/a objectes que semblin arrays. Els objectes que no continguin la propietat length que reflecteixi l'última propietat d'una sèrie de propietats numèriques consecutives, on el nom de la primera propietat sigui el zero, poden comportar-se de forma imprevista.

- -

Si es crida pop() en un array buit, es retornarà {{jsxref("undefined")}}.

- -

Exemples

- -

Esborrar l'últim element d'un array

- -

El codi següent crea un array anomenat myFish que conté quatre elements, després elimina l'últim element.

- -
var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
-
-console.log(myFish); // ['angel', 'clown', 'mandarin', 'sturgeon']
-
-var popped = myFish.pop();
-
-console.log(myFish); // ['angel', 'clown', 'mandarin' ]
-
-console.log(popped); // 'sturgeon'
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES3')}}{{Spec2('ES3')}}Definició inicial. Implementat a JavaScript 1.2.
{{SpecName('ES5.1', '#sec-15.4.4.6', 'Array.prototype.pop')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-array.prototype.pop', 'Array.prototype.pop')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome("1.0")}}{{CompatGeckoDesktop("1.7")}}{{CompatIE("5.5")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Array.prototype.push()")}}
    • -
  • {{jsxref("Array.prototype.shift()")}}
    • -
  • {{jsxref("Array.prototype.unshift()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/array/prototype/index.html b/files/ca/web/javascript/referencia/objectes_globals/array/prototype/index.html deleted file mode 100644 index 35ebf53933..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/array/prototype/index.html +++ /dev/null @@ -1,203 +0,0 @@ ---- -title: Array.prototype -slug: Web/JavaScript/Referencia/Objectes_globals/Array/prototype -translation_of: Web/JavaScript/Reference/Global_Objects/Array/prototype ---- -
{{JSRef}}
- -

La propietat Array.prototype representa el prototipus del constructor {{jsxref("Array")}}.

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

Descripció

- -

Les instàncies de {{jsxref("Array")}} hereten de Array.prototype. Com tots els constructors, és possible modificar l'objecte prototipus del constructor per a afectar a totes les instàncies de {{jsxref("Array")}}.

- -

Fet poc conegut: Array.prototype és ell mateix un {{jsxref("Array")}}:

- -
Array.isArray(Array.prototype); // true
-
- -

Propietats

- -
-
Array.prototype.constructor
-
Especifica la funció que ha creat el prototipus de l'objecte.
-
{{jsxref("Array.prototype.length")}}
-
Reflecteix el nombre d'elements d'un array.
-
- -

Mètodes

- -

Mètodes Mutadors

- -

Els mètodes següents modifiquen l'array:

- -
-
{{jsxref("Array.prototype.copyWithin()")}} {{experimental_inline}}
-
Copia una seqüència d'elements de l'array dins l'array.
-
{{jsxref("Array.prototype.fill()")}} {{experimental_inline}}
-
Omple tots els elements d'un array d'una posició inicial a una posició final amb un valor estàtic.
-
{{jsxref("Array.prototype.pop()")}}
-
Elimina l'últim element d'un array i retorna aquest element.
-
{{jsxref("Array.prototype.push()")}}
-
Afegeix un o més elements al final de l'array i retorna el nou tamany de l'array.
-
{{jsxref("Array.prototype.reverse()")}}
-
Capgira l'ordre dels elements d'un array a l'array mateix (no crea cap array nou) — el primer element esdevé l'últim, l'últim esdevé el primer, etcètera.
-
{{jsxref("Array.prototype.shift()")}}
-
Elimina el primer element d'un array i retorna aquest element.
-
{{jsxref("Array.prototype.sort()")}}
-
Ordena els elements d'un array a l'array mateix i retorna l'array.
-
{{jsxref("Array.prototype.splice()")}}
-
Afegeix i/o elimina elements d'un array.
-
{{jsxref("Array.prototype.unshift()")}}
-
Afegeix un o més elements al pricipi d'un array i retorna el nou tamany de l'array.
-
- -

Mètodes d'accés

- -

Aquests mètodes no modifiquen l'array sino que retornen algun tipus de representació de l'array.

- -
-
{{jsxref("Array.prototype.concat()")}}
-
Retorna un nou array format per la unió de l'array actual amb altres arrays o valors.
-
{{jsxref("Array.prototype.includes()")}} {{experimental_inline}}
-
Determina si un array inclou un element en concret, retornant true en cas afirmatiu i false en cas contrari.
-
{{jsxref("Array.prototype.join()")}}
-
Uneix tots els elements d'un array en un string.
-
{{jsxref("Array.prototype.slice()")}}
-
Extrau una secció d'un array i la retorna en forma de nou array.
-
{{jsxref("Array.prototype.toSource()")}} {{non-standard_inline}}
-
Retorna un literal d'array que representa l'array especificat; es pot emprar aquest valor per a crear un nou array. Sobreescriu el mètode {{jsxref("Object.prototype.toSource()")}}.
-
{{jsxref("Array.prototype.toString()")}}
-
Retorna un string que representa l'array i els seus elements. Sobreescriu el mètode {{jsxref("Object.prototype.toString()")}}.
-
{{jsxref("Array.prototype.toLocaleString()")}}
-
Retorna un string localitzat que representa l'array i els seus elements. Sobreescriu el mètode {{jsxref("Object.prototype.toLocaleString()")}}.
-
{{jsxref("Array.prototype.indexOf()")}}
-
Retorna la primera posició de l'array en la que es troba un element igual al valor especificat, o bé -1 si no es troba l'element dins l'array.
-
{{jsxref("Array.prototype.lastIndexOf()")}}
-
Retorna la última posició de l'array en la que es troba un element igual al valor especificat, o bé -1 si no es troba l'element dins l'array.
-
- -

Mètodes d'iteració

- -

Alguns mètodes accepten com a arguments funcions que es cridaran al processar l'array. Quan es criden aquests mètodes, s'emmagatzema el valor de length de l'array i qualsevol element afegit després a dins de la funció no serà visitat per la mateixa. Altres canvis a l'array (com ara canviar un valor o bé eliminar un element) poden afectar els resultats de l'operació si el mètode visita els elements que han canviat. Tot i que el comportament específic d'aquests mètodes en aquests casos està ben definit no es recomana recolzar-se en ell ja que pot confondre a altres programadors que llegeixin el vostre codi. En comptes de modificar l'array copieu-lo i modifiqueu la copia.

- -
-
{{jsxref("Array.prototype.forEach()")}}
-
Crida una funció per a cada element de l'array.
-
{{jsxref("Array.prototype.entries()")}} {{experimental_inline}}
-
Retorna un nou objecte Array Iterator que conté parells clau-valor per a cada posició de l'array.
-
{{jsxref("Array.prototype.every()")}}
-
Retorna true si tots els elements de l'array satisfan la funció proporcionada.
-
{{jsxref("Array.prototype.some()")}}
-
Retorna true si al menys un dels elements de l'array satisfà la funció proporcionada.
-
{{jsxref("Array.prototype.filter()")}}
-
Crea un nou array que conté tots eles elements de l'array des d'on es crida que facin que la funció que actua de filtre retorni true.
-
{{jsxref("Array.prototype.find()")}} {{experimental_inline}}
-
Retorna el valor trobat a l'array, si un element de l'array satisfà la funció proporcionada. En cas contrari retorna undefined.
-
{{jsxref("Array.prototype.findIndex()")}} {{experimental_inline}}
-
Retorna la posició on es troba l'element de l'array que satifcaci la funció proporcionada. Retorna -1 si cap element la satisfà.
-
{{jsxref("Array.prototype.keys()")}} {{experimental_inline}}
-
Retorna un nou Array Iterator que conté les claus per a cada posició de l'array.
-
{{jsxref("Array.prototype.map()")}}
-
Crea un nou array a partir dels resultats de cridar a la funció proporcionada per a cada element de l'array.
-
{{jsxref("Array.prototype.reduce()")}}
-
Executa una funció sobre un acumulador i cada valor de l'array (aplicats d'esquerra a dreta) amb l'objectiu de redudir els valors a un sol valor.
-
{{jsxref("Array.prototype.reduceRight()")}}
-
Executa una funció sobre un acumulador i cada valor de l'array (aplicats de dreta a esquerra) amb l'objectiu de redudir els valors a un sol valor.
-
{{jsxref("Array.prototype.values()")}} {{experimental_inline}}
-
Retorna un nou objecte Array Iterator que conté els valors de cada posició de l'array.
-
{{jsxref("Array.prototype.@@iterator()", "Array.prototype[@@iterator]()")}} {{experimental_inline}}
-
Retorna un nou objecte Array Iterator que conté els valors per a cada posició de l'array.
-
- -

Mètodes genèrics

- -

Molts dels mètodes de l'objecte Array de JavaScript estan dissenyats per a ser aplicats de manera genèrica a qualsevol objecte que tingui la propietat length i que disposin la seva informació en forma de noms de propietats numèrices (com ara array[5] per a accedir a l'element desat a la posició 5). Alguns mètodes, com ara {{jsxref("Array.join", "join")}}, només llegeixen la propietat length i les altes propietats numèriques. D'altres mètodes, com ara {{jsxref("Array.reverse", "reverse")}}, necessiten que tant les propietats numèriques com la propietat length siguin mutables; això implica que aquests mètodes no es poden fer servir sobre objectes com ara {{jsxref("String")}}, on la seva propietat length així com les propietats numèriques no es poden modificar.

- -

Specificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacionsEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial.
{{SpecName('ES5.1', '#sec-15.4.3.1', 'Array.prototype')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-array.prototype', 'Array.prototype')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Array")}}
    • -
  • {{jsxref("Function.prototype")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/array/push/index.html b/files/ca/web/javascript/referencia/objectes_globals/array/push/index.html deleted file mode 100644 index 5770e5a10c..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/array/push/index.html +++ /dev/null @@ -1,146 +0,0 @@ ---- -title: Array.prototype.push() -slug: Web/JavaScript/Referencia/Objectes_globals/Array/push -translation_of: Web/JavaScript/Reference/Global_Objects/Array/push ---- -
{{JSRef}}
- -

El mètode push() afegeix un o més elements al final d'un array i retorna el nou tamany de l'array.

- -

Sintaxi

- -
arr.push(element1, ..., elementN)
- -

Paràmetres

- -
-
elementN
-
Els elements que seran afegits al final de l'array.
-
- -

Valor retornat

- -

El nou valor de la propietat {{jsxref("Array.length", "length")}} de l'objecte del qual s'ha executat el mètode.

- -

Descripció

- -

El mètode push afegeix valors a un array.

- -

push és genèric de manera intencionada. Es pot utilitzar aquest mètode amb {{jsxref("Function.call", "call()")}} i {{jsxref("Function.apply", "apply()")}} en objectes semblants a arrays. El mètode push depèn de la propietat length per a determinar on insertar els nous valors. Si la propietat length no es pot convertir en un nombre, la posició utilitzada serà la 0. Això inclou la posibilitat que no existeixi la propietat length, en aquest case es crearà automàticament la propietat length.

- -

Els únics objectes semblants a arrays que inclou el nucli de JavaScript són els {{jsxref("Global_Objects/String", "strings", "", 1)}}, tot i que no admeten la aplicació d'aquest mètode ja que els strings són immutables.

- -

Exemples

- -

Afegir elements a un array

- -

El codi següent crea un array anomenat esports que conté dos elements, llavors l'hi afegeix dos elements més. La variable total acaba revent el valor del nou tamany d e l'array.

- -
var esports = ['futbol', 'basket'];
-var total = esports.push('badminton', 'natació');
-
-console.log(esports); // ['futbol', 'basket', 'badminton', 'natació']
-console.log(total);  // 4
-
- -

Unir dos arrays

- -

Aquest exemple utilitza {{jsxref("Function.apply", "apply()")}} per a afegir tots els elements d'un segon array.

- -
var verdures = ['ceba', 'patata'];
-var mesVerdures = ['pastanaga', 'rabe'];
-
-// Uneix el segon array al primer
-// Equivalent a verdures.push('pastanaga', 'rabe');
-Array.prototype.push.apply(verdures , mesVerdures);
-
-console.log(verdures); // ['ceba', 'patata', 'pastanaga', 'rabe']
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES3')}}{{Spec2('ES3')}}Definició inicial. Implementat a JavaScript 1.2.
{{SpecName('ES5.1', '#sec-15.4.4.7', 'Array.prototype.push')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-array.prototype.push', 'Array.prototype.push')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome("1.0")}}{{CompatGeckoDesktop("1.7")}}{{CompatIE("5.5")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Array.prototype.pop()")}}
    • -
  • {{jsxref("Array.prototype.shift()")}}
    • -
  • {{jsxref("Array.prototype.unshift()")}}
    • -
  • {{jsxref("Array.prototype.concat()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/array/reduce/index.html b/files/ca/web/javascript/referencia/objectes_globals/array/reduce/index.html deleted file mode 100644 index fa6253fd0c..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/array/reduce/index.html +++ /dev/null @@ -1,304 +0,0 @@ ---- -title: Array.prototype.reduce() -slug: Web/JavaScript/Referencia/Objectes_globals/Array/Reduce -translation_of: Web/JavaScript/Reference/Global_Objects/Array/Reduce ---- -
{{JSRef}}
- -

El mètode reduce() aplica una funció sobre un acumulador i cada valor de l'array (de esquerra a dreta) perr a reduir-lo a un sol valor.

- -

sintaxi

- -
arr.reduce(callback[, valorInicial])
- -

Parameters

- -
-
callback
-
Funció a executar per a cada valor de l'array. Rep quatre arguments: -
-
valorPrevi
-
El valor retornat prèviament en l'última invocació de la funció callback, o bé valorInicial, si s'ha proporcionat (vegeu més abaix).
-
valorActual
-
L'element essent processat actualment a l'array.
-
index
-
La posició de l'element essent processat actualment a l'array.
-
array
-
L'array al qual s'ha cridat el mètode reduce.
-
-
-
valorInicial
-
Opcional. Valor a utilitzar com a primer argument a la primera crida de la funció callback.
-
- -

Descripció

- -

reduce executa la funció callback un cop per cada element present a l'array, excloent forats a l'array, i rep quatre arguments:

- -
    -
  • valorPrevi
    • -
  • valorActual
    • -
  • index
    • -
  • array
    • -
- -

El primer cop que es crida callback, valorAnterior i valorActual reben el valor de la forma descrita a continuació. Si es proporciona valorInicial a la crida de reduce, valorAnterior rebrà el valor de valorInicial i valorActual serà igual al primer valor de l'array. Si no es proporciona valorInicial, valorAnterior serà igual al primer valor de l'array i valorActual serà igual al segon.

- -

Si l'array és buit i no s'ha proporcionat valorInicial, es llençarà {{jsxref("Global_Objects/TypeError", "TypeError")}}. Si l'array només té un element (sense importar la seva posició) i no s'ha proporcionat valorInicial, o si valorInicial s'ha proporcionat però l'array és buit, es retornarà aquest únic valor sense realitzar cap crida a callback.

- -

Suposem que s'ha utilitzar reduce de la forma següent:

- -
[0, 1, 2, 3, 4].reduce(function(previousValue, currentValue, index, array) {
-  return previousValue + currentValue;
-});
-
- -

La funció callback es cridarà quatre cops, on els arguments i els valors a retornar es mostren a continuació:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 valorAnteriorvalorActualindexarrayvalor retornat
primera crida011[0, 1, 2, 3, 4]1
segons crida122[0, 1, 2, 3, 4]3
tercera crida333[0, 1, 2, 3, 4]6
quarta crida644[0, 1, 2, 3, 4]10
- -

El valor retornat per reduce serà el de l'última invocació a callback (10).

- -

Si es proporcionés el valor inicial com a segon argument de reduce, el resultat seria el següent:

- -
[0, 1, 2, 3, 4].reduce(function(valorAnterior, valorActual, index, array) {
-  return valorAnterior + valorActual;
-}, 10);
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 valorAnteriorvalorActualindexarrayvalor retornat
primera crida1000[0, 1, 2, 3, 4]10
segona crida1011[0, 1, 2, 3, 4]11
tercera crida1122[0, 1, 2, 3, 4]13
quarta crida1333[0, 1, 2, 3, 4]16
cinquena crida1644[0, 1, 2, 3, 4]20
- -

El valor de la crida final (20) és el retornat per la funció reduce.

- -

Exemples

- -

Sumar tots els valors d'un array

- -
var total = [0, 1, 2, 3].reduce(function(a, b) {
-  return a + b;
-});
-// total == 6
-
- -

Aplanar un array d'arrays

- -
var flattened = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) {
-  return a.concat(b);
-}, []);
-// flattened is [0, 1, 2, 3, 4, 5]
-
- -

Polyfill

- -

Array.prototype.reduce va ser afegida a l'standard ECMA-262 a la cinquena edició; degut a això aquesta no estar present a totes les implementacions de l'standard. És possible simular-la en aquests casos mitjançant l'inserció del codi que trobareu a continuació a l'inici dels vostres scripts, tot permetent-vos utilitzar reduce en implementacions que no la suportin de forma nativa.

- -
// Production steps of ECMA-262, Edition 5, 15.4.4.21
-// Reference: http://es5.github.io/#x15.4.4.21
-if (!Array.prototype.reduce) {
-  Array.prototype.reduce = function(callback /*, initialValue*/) {
-    'use strict';
-    if (this == null) {
-      throw new TypeError('Array.prototype.reduce called on null or undefined');
-    }
-    if (typeof callback !== 'function') {
-      throw new TypeError(callback + ' is not a function');
-    }
-    var t = Object(this), len = t.length >>> 0, k = 0, value;
-    if (arguments.length == 2) {
-      value = arguments[1];
-    } else {
-      while (k < len && !(k in t)) {
-        k++;
-      }
-      if (k >= len) {
-        throw new TypeError('Reduce of empty array with no initial value');
-      }
-      value = t[k++];
-    }
-    for (; k < len; k++) {
-      if (k in t) {
-        value = callback(value, t[k], k, t);
-      }
-    }
-    return value;
-  };
-}
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES5.1', '#sec-15.4.4.21', 'Array.prototype.reduce')}}{{Spec2('ES5.1')}}Definició inicial. Implementat a JavaScript 1.8.
{{SpecName('ES6', '#sec-array.prototype.reduce', 'Array.prototype.reduce')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9")}}{{CompatIE("9")}}{{CompatOpera("10.5")}}{{CompatSafari("4.0")}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Array.prototype.reduceRight()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/array/reverse/index.html b/files/ca/web/javascript/referencia/objectes_globals/array/reverse/index.html deleted file mode 100644 index 2528cabdc5..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/array/reverse/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: Array.prototype.reverse() -slug: Web/JavaScript/Referencia/Objectes_globals/Array/reverse -translation_of: Web/JavaScript/Reference/Global_Objects/Array/reverse ---- -
{{JSRef}}
- -

El mètode reverse() inverteix un array. El primer element de l'array es converteix en l'últim element i l'últim element de l'array passa a ésser el primer.

- -

Sintaxi

- -
arr.reverse()
- -

Paràmetres

- -

Cap.

- -

Descripció

- -

El mètode reverse method transposa els elements de l'objecte array cridat en un lloc, mutant l'array, i retorna una referència de l'array.

- -

Exemples

- -

Revertir els elements d'un array

- -

L'exemple següent crea un array myArray, que conté tres elements, després inverteix l'array.

- -
var myArray = ['one', 'two', 'three'];
-myArray.reverse();
-
-console.log(myArray) // ['three', 'two', 'one']
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat en JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.4.4.8', 'Array.prototype.reverse')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-array.prototype.reverse', 'Array.prototype.reverse')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome("1.0")}}{{CompatGeckoDesktop("1.7")}}{{CompatIE("5.5")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Array.prototype.join()")}}
    • -
  • {{jsxref("Array.prototype.sort()")}}
    • -
  • {{jsxref("TypedArray.prototype.reverse()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/array/shift/index.html b/files/ca/web/javascript/referencia/objectes_globals/array/shift/index.html deleted file mode 100644 index 7b5fa1b330..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/array/shift/index.html +++ /dev/null @@ -1,129 +0,0 @@ ---- -title: Array.prototype.shift() -slug: Web/JavaScript/Referencia/Objectes_globals/Array/shift -translation_of: Web/JavaScript/Reference/Global_Objects/Array/shift ---- -
{{JSRef}}
- -

El mètode shift() elimina el primer element d'un array i retorna l'element eliminat. Aquest mètode canvia el tamany de l'array.

- -

Sintaxi

- -
arr.shift()
- -

Descripció

- -

El mètode shift elimina l'element de l'array situat a la posició zero i mou la resta d'elements a la posició immediatament menor, tot seguit retorna el valor de l'element eliminat. Si la propietat {{jsxref("Array.length", "length")}} de l'array és 0, aquest mètode retornarà {{jsxref("undefined")}}.

- -

shift és generic de forma intencionada; aquest mètode pot ser {{jsxref("Function.call", "cridat", "", 1)}} o bé {{jsxref("Function.apply", "aplicat", "", 1)}} a objectes que es comportin com a arrays. Els objectes que no continguin una propietat length que reflecteixi l'última propietat numèrica poden tenir un comportament erràtic.

- -

Exemples

- -

Eliminar un element d'un array

- -

El codi següent mostra l'array myFish abans i després d'eliminar el seu primer element. També mostra l'element eliminat:

- -
var myFish = ['angel', 'clown', 'mandarin', 'surgeon'];
-
-console.log('myFish abans: ' + myFish);
-// "myFish abans: angel,clown,mandarin,surgeon"
-
-var shifted = myFish.shift();
-
-console.log('myFish després: ' + myFish);
-// "myFish després: clown,mandarin,surgeon"
-
-console.log('Element eliminat: ' + shifted);
-// "Element eliminat: angel"
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES3')}}{{Spec2('ES3')}}Definició inicial. Implementat a JavaScript 1.2.
{{SpecName('ES5.1', '#sec-15.4.4.9', 'Array.prototype.shift')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-array.prototype.shift', 'Array.prototype.shift')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-array.prototype.shift', 'Array.prototype.shift')}}{{Spec2('ESDraft')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome("1.0")}}{{CompatGeckoDesktop("1.7")}}{{CompatIE("5.5")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Array.prototype.push()")}}
    • -
  • {{jsxref("Array.prototype.pop()")}}
    • -
  • {{jsxref("Array.prototype.unshift()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/array/slice/index.html b/files/ca/web/javascript/referencia/objectes_globals/array/slice/index.html deleted file mode 100644 index d181f94a65..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/array/slice/index.html +++ /dev/null @@ -1,268 +0,0 @@ ---- -title: Array.prototype.slice() -slug: Web/JavaScript/Referencia/Objectes_globals/Array/slice -translation_of: Web/JavaScript/Reference/Global_Objects/Array/slice ---- -
{{JSRef}}
- -

El mètode slice() retorna una còpia feble d'una porció d'un array en forma d'un nou objecte array.

- -

Sintaxi

- -
arr.slice([inici[, fi]])
- -

Paràmetres

- -
-
inici
-
La posició (tenint en compte que zero correspon a la primera posició) a partir de la qual començarà l'extracció.
-
Si inici és negatiu, la posició correspondrà a la posicó final de la seqüència menys el valor proporcionat. slice(-2) extreu els últims dos elements de la seqüència.
-
Si inici és undefined, slice començarà a la posició 0.
-
fi
-
La posició (contant des de zero) en la qual finalitzarà l'extracció. slice extraurà fins a aquesta posicó, sense incloure-la.
-
slice(1,4) extrau des del segon element fins al quart element (és a dir, els elements pertanyents a les posicions 1, 2 i 3).
-
Si fi és negatiu, la posició correspondrà a la posicó final de la seqüència menys el valor proporcionat. slice(2,-1) extrau des del tercer element fins al penúltim element de la seqüència.
-
Si s'omet el paràmetre fi, slice extreurà fins al final de la seqüència (arr.length).
-
- -

Descripció

- -

slice no altera l'array original. Retorna una copia feble dels elements de l'array original. Els elements de l'array original són copiats a l'array resultat de la forma següent:

- -
    -
  • Per a referències a objectes (no l'objecte en si), slice copia la referència dins el nou array. Tant l'array original com el resultat referenciaran el mateix objecte. Si l'objecte referenciat canvia, aquests canvis seran visibles a ambdos arrays.
    • -
  • Per a strings i nombres (no els objectes {{jsxref("String")}} i {{jsxref("Number")}}), slice copia els strings i nombres a l'array resultant. Els canvis al string o nombre en un dels arrays no afectaran a l'altre array.
    • -
- -

Si s'afegeix un nou element a un dels dos arrays, l'altre array no es veu afectat.

- -

Exemples

- -

Retornar una part d'un array existent

- -
var fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'];
-var citrus = fruits.slice(1, 3);
-
-// citrus conté ['Orange','Lemon']
-
- -

Utilitzar slice

- -

A l'exemple següent slice crea un ou array newCar, a partir de myCar. Ambdos inclouen una referència a l'objecte myHonda. Quan el color de myHonda canvia a lila, ambdos arrays reflecteixen aquest canvi.

- -
// Ús de slice, creem newCar a partir de myCar.
-var myHonda = { color: 'red', wheels: 4, engine: { cylinders: 4, size: 2.2 } };
-var myCar = [myHonda, 2, 'cherry condition', 'purchased 1997'];
-var newCar = myCar.slice(0, 2);
-
-// Mostrem els valors de myCar, newCar, i el color de myHonda
-//  referenciat a ambdos arrays.
-console.log('myCar = ' + myCar.toSource());
-console.log('newCar = ' + newCar.toSource());
-console.log('myCar[0].color = ' + myCar[0].color);
-console.log('newCar[0].color = ' + newCar[0].color);
-
-// Canviem el color de myHonda.
-myHonda.color = 'purple';
-console.log('The new color of my Honda is ' + myHonda.color);
-
-// Mostrem el color de myHonda referenciat a ambdos arrays.
-console.log('myCar[0].color = ' + myCar[0].color);
-console.log('newCar[0].color = ' + newCar[0].color);
-
- -

Aquest script mostra:

- -
myCar = [{color:'red', wheels:4, engine:{cylinders:4, size:2.2}}, 2,
-         'cherry condition', 'purchased 1997']
-newCar = [{color:'red', wheels:4, engine:{cylinders:4, size:2.2}}, 2]
-myCar[0].color = red
-newCar[0].color = red
-The new color of my Honda is purple
-myCar[0].color = purple
-newCar[0].color = purple
-
- -

Objectes compatibles amb arrays

- -

El mètode slice també es pot utilitzar per a convertir objectes compatibles amb arrays / col·leccions a un nou Array. Simplement hem de vincular el mètode a l'objecte. L'objecte {{jsxref("Functions/arguments", "arguments")}} dins una funció és un exemple d'objecte 'compatible amb arrays'.

- -
function list() {
-  return Array.prototype.slice.call(arguments);
-}
-
-var list1 = list(1, 2, 3); // [1, 2, 3]
-
- -

Podem vincular el mètode a l'objecte mitjançant la funció .call proporcionada per {{jsxref("Function.prototype")}}, també podem reduir-la a [].slice.call(arguments) en comptes de Array.prototype.slice.call. També podem simplificar-ho utilitzant la funció {{jsxref("Function.prototype.bind", "bind")}}.

- -
var unboundSlice = Array.prototype.slice;
-var slice = Function.prototype.call.bind(unboundSlice);
-
-function list() {
-  return slice(arguments);
-}
-
-var list1 = list(1, 2, 3); // [1, 2, 3]
-
- -

Oferint un comportament similar entre navegadors

- -

Tot i que segons la especificació els objectes de l'hoste (com ara els objectes DOM) no requereixen seguir el comportament de Mozilla al ser convertits mitjançant Array.prototype.slice i, de fet les versions de Internet Explorer anteriors a la 9 no ho fan, les versions a partir de la 9 si que suporten l'ús d'aquesta funció de compatibilitat, permetent un comportament fiable entre navegadors. Mentre els altres navegadors moderns continuin oferint aquesta habilitat, tal i com ara fan IE, Mozilla, Chrome, Safari i Opera, els desenvolupadors que llegeixin codi sobre slice (suportat pel DOM) que es recolzi en aquesta funció de compatibilitat no tenen que patir per la semàntica; poden fiar-se de la semàntica descrita per a proporcionar el comportament que ara sembla standard de facto (La funció de compatibilitat també permet que el IE funcioni quan es passa com a segon argument de slice() un valor explícit de {{jsxref("null")}}/{{jsxref("undefined")}} ja que versions anteriors de IE no ho permetien però tots els nous navegadors, incloent IE >= 9, si que ho permeten.)

- -
/**
- * Shim for "fixing" IE's lack of support (IE < 9) for applying slice
- * on host objects like NamedNodeMap, NodeList, and HTMLCollection
- * (technically, since host objects have been implementation-dependent,
- * at least before ES6, IE hasn't needed to work this way).
- * Also works on strings, fixes IE < 9 to allow an explicit undefined
- * for the 2nd argument (as in Firefox), and prevents errors when
- * called on other DOM objects.
- */
-(function () {
-  'use strict';
-  var _slice = Array.prototype.slice;
-
-  try {
-    // Can't be used with DOM elements in IE < 9
-    _slice.call(document.documentElement);
-  } catch (e) { // Fails in IE < 9
-    // This will work for genuine arrays, array-like objects,
-    // NamedNodeMap (attributes, entities, notations),
-    // NodeList (e.g., getElementsByTagName), HTMLCollection (e.g., childNodes),
-    // and will not fail on other DOM objects (as do DOM elements in IE < 9)
-    Array.prototype.slice = function(begin, end) {
-      // IE < 9 gets unhappy with an undefined end argument
-      end = (typeof end !== 'undefined') ? end : this.length;
-
-      // For native Array objects, we use the native slice function
-      if (Object.prototype.toString.call(this) === '[object Array]'){
-        return _slice.call(this, begin, end);
-      }
-
-      // For array like object we handle it ourselves.
-      var i, cloned = [],
-        size, len = this.length;
-
-      // Handle negative value for "begin"
-      var start = begin || 0;
-      start = (start >= 0) ? start : Math.max(0, len + start);
-
-      // Handle negative value for "end"
-      var upTo = (typeof end == 'number') ? Math.min(end, len) : len;
-      if (end < 0) {
-        upTo = len + end;
-      }
-
-      // Actual expected size of the slice
-      size = upTo - start;
-
-      if (size > 0) {
-        cloned = new Array(size);
-        if (this.charAt) {
-          for (i = 0; i < size; i++) {
-            cloned[i] = this.charAt(start + i);
-          }
-        } else {
-          for (i = 0; i < size; i++) {
-            cloned[i] = this[start + i];
-          }
-        }
-      }
-
-      return cloned;
-    };
-  }
-}());
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES3')}}{{Spec2('ES3')}}Definició inicial. Implementat a JavaScript 1.2.
{{SpecName('ES5.1', '#sec-15.4.4.10', 'Array.prototype.slice')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-array.prototype.slice', 'Array.prototype.slice')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-array.prototype.slice', 'Array.prototype.slice')}}{{Spec2('ESDraft')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome("1.0")}}{{CompatGeckoDesktop("1.7")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Function.prototype.call()")}}
    • -
  • {{jsxref("Function.prototype.bind()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/array/some/index.html b/files/ca/web/javascript/referencia/objectes_globals/array/some/index.html deleted file mode 100644 index 7abc1ed76d..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/array/some/index.html +++ /dev/null @@ -1,213 +0,0 @@ ---- -title: Array.prototype.some() -slug: Web/JavaScript/Referencia/Objectes_globals/Array/some -translation_of: Web/JavaScript/Reference/Global_Objects/Array/some ---- -
{{JSRef}}
- -

El mètode some() comprova si un algun element de l'array passa el test implementat per la funció proporcionada com a argument.

- -

Sintaxi

- -
arr.some(callback[, thisArg])
- -

Paràmetres

- -
-
callback
-
Funció utilitzada com a test per a cada element, rep tres arguments: -
-
valorActual
-
L'element de l'array que està sent avaluat.
-
posició
-
La posició que l'element passat al primer paràmetre ocupa dins l'array.
-
array
-
L'array des del que s'ha cridat el mètode some().
-
-
-
thisArg
-
Opcional. Valor que valdrà la variable this quan s'estigui executant la funció callback.
-
- -

Valor retornat

- -

Aquesta funció retorna true si la funció callback retorna true per a almenys un element de l'array; en qualsevol altre cas retorna false.

- -

Descripció

- -

some() executa la funció callback un cop per a cada element present a l'array fins que troba un per al qual callback retorna true. Si es troba aquest element, some() retorna true immediatament. En cas contrari some() retornarà false. Només s'invocarà la funció callback en les posicions de l'array que tinguin un valor assignat, és a dir, mai es cridarà per a posicions que han estat esborrades o el valor de les quals no ha estat mai assignat.

- -

S'invoca callback amb tres arguments: el valor de l'element, la posició de l'element dins l'array, i l'objecte array que es recorrerà.

- -

Si es proporciona el paràmetre thisArg al mètode some(), aquest es passarà a callback quan s'invoqui, i serà el valor que mostrarà la variable this. En cas contrari, s'utilitzarà el valor {{jsxref("undefined")}} com a valor per a this. El valor de this observable en última instància per callback es determinarà d'acord a les regles per a determinar el valor de this observat per una funció.

- -

some() no mutarà l'array quan sigui cridada.

- -

El rang d'elements processat per some() és determinat abans de la primera invocació de callback. Els elements que s'afegeixin a l'array després de la crida a some() no seran visitats per callback. Si el valor d'un element encara no visitat canvia, el valor que es passarà a callback serà el valor que tingui aquest element a l'hora de visitar-lo; els elements que s'esborrin no es visitaran.

- -

Exemples

- -

Comprovar el valor dels elements d'un array

- -

L'exemple següent comprova si el valor d'algun element de l'array es major que 10.

- -
function isBiggerThan10(element, posicio, array) {
-  return element > 10;
-}
-[2, 5, 8, 1, 4].some(isBiggerThan10);  // false
-[12, 5, 8, 1, 4].some(isBiggerThan10); // true
-
- -

Comprovar els elements d'un array utilitzant funcions fletxa

- -

Les funcions fletxa ofereixen una sintaxi reduïda per a realitzar el mateix test.

- -
[2, 5, 8, 1, 4].some(elem => elem > 10);  // false
-[12, 5, 8, 1, 4].some(elem => elem > 10); // true
-
- -

Comprovar si existeix un valor en un array

- -

L'exemple següent retorna cert si existeix un elmeent donat dins un array

- -
var fruits = ['poma', 'platan', 'mango', 'guava'];
-
-function checkAvailability(arr, val) {
-    return arr.some(function(arrVal) {
-        return val === arrVal;
-    });
-}
-
-checkAvailability(fruits, 'kela'); //false
-checkAvailability(fruits, 'platan'); //true
- -

Comprovar si existeix un valor amb funcions fletxa

- -
var fruits = ['poma', 'platan', 'mango', 'guava'];
-
-function checkAvailability(arr, val) {
-    return arr.some(arrVal => val === arrVal);
-}
-
-checkAvailability(fruits, 'kela'); //false
-checkAvailability(fruits, 'platan'); //true
- -

Polyfill

- -

some() va ser afegida  al standard ECMA-262 en la cinquena edició; és per això que pot no estar disponible en certes implementacions del standard. Es pot proporcionar la seva funcionalitat inserint l'script següent a l'inici dels vostres scripts, permetent l'ús de some() en implementacions que no la suporten de forma nativa. Aquest algoritme és exactament l'especificat a l'ECMA-262, cinquena edició, assumint que {{jsxref("Object")}} i {{jsxref("TypeError")}} tenen els valors originals i que fun.call es correspon amb el valor original de {{jsxref("Function.prototype.call()")}}.

- -
// Production steps of ECMA-262, Edition 5, 15.4.4.17
-// Reference: http://es5.github.io/#x15.4.4.17
-if (!Array.prototype.some) {
-  Array.prototype.some = function(fun/*, thisArg*/) {
-    'use strict';
-
-    if (this == null) {
-      throw new TypeError('Array.prototype.some called on null or undefined');
-    }
-
-    if (typeof fun !== 'function') {
-      throw new TypeError();
-    }
-
-    var t = Object(this);
-    var len = t.length >>> 0;
-
-    var thisArg = arguments.length >= 2 ? arguments[1] : void 0;
-    for (var i = 0; i < len; i++) {
-      if (i in t && fun.call(thisArg, t[i], i, t)) {
-        return true;
-      }
-    }
-
-    return false;
-  };
-}
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES5.1', '#sec-15.4.4.17', 'Array.prototype.some')}}{{Spec2('ES5.1')}}Definició inicial. Implementat a JavaScript 1.6.
{{SpecName('ES6', '#sec-array.prototype.some', 'Array.prototype.some')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-array.prototype.some', 'Array.prototype.some')}}{{Spec2('ESDraft')}}
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.8")}}{{CompatIE("9")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.8")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Array.prototype.forEach()")}}
    • -
  • {{jsxref("Array.prototype.every()")}}
    • -
  • {{jsxref("TypedArray.prototype.some()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/array/splice/index.html b/files/ca/web/javascript/referencia/objectes_globals/array/splice/index.html deleted file mode 100644 index c1abada8d9..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/array/splice/index.html +++ /dev/null @@ -1,171 +0,0 @@ ---- -title: Array.prototype.splice() -slug: Web/JavaScript/Referencia/Objectes_globals/Array/splice -translation_of: Web/JavaScript/Reference/Global_Objects/Array/splice ---- -
{{JSRef}}
- -

El mètode splice() modifica el contingut d'un array eliminant elements ja existents i/o afegint-ne de nous.

- -

Sintaxi

- -
array.splice(inici, comptadorEliminar[, item1[, item2[, ...]]])
-
- -

Paràmetres

- -
-
inici
-
La posició a partir de la qual es començarà a modificar l'array (considerant 0 com a primera posició). Si s'especifca un nombre major que la longitud de l'array, la posició d'inici real esdevindrà la longitud de l'array. Si s'especifica un nombre negatiu, la posició d'inici serà el valor absolut del nombre especificat contant des del final de l'array.
-
comptadorEliminar
-
Un nombre sencer que indica el nombre d'elements que s'eliminaran. Si comptadorEliminar és 0 no s'eliminarà cap element. En aquest cas s'hauria d'especificar al menys un nou element. Si comptadorEliminar és major que el nombre d'elements de l'array des de la posició inici fins el final de l'array tots els elements des d'inici fins al final de l'array seran eliminats.
-
Si s'omet comptadorEliminar aquest rebrà un valor per defecte igual a (arr.length - inici).
-
item1, item2, ...
-
Els elements que s'afegiran a l'array, començant a la posició inici. Si no s'especifcia cap element, splice() només eliminarà elements de l'array.
-
- -

Valor retornat

- -

Un array que conté els elements eliminats. Si només s'ha eliminat un element es retornarà un array amb un sol element. Si no s'ha eliminat cap element retornarà un array buit.

- -

Descripció

- -

Si s'especifica un nombre diferent d'elements a eliminar del nombre d'elements a inserir la longitud de l'array canviarà al final de la crida.

- -

Exemples

- -

Utilitzar splice()

- -

L'script seguent ilustra l'ús de splice():

- -
var myFish = ['angel', 'clown', 'mandarin', 'surgeon'];
-
-// eliminem 0 elements a partir de la posició 2, i inserim 'drum'
-var eliminats = myFish.splice(2, 0, 'drum');
-// myFish is ['angel', 'clown', 'drum', 'mandarin', 'surgeon']
-// eliminats va [], no s'han eliminat elements
-
-// myFish val ['angel', 'clown', 'drum', 'mandarin', 'surgeon']
-// eliminem 1 element a la posició 3
-eliminats = myFish.splice(3, 1);
-// myFish val ['angel', 'clown', 'drum', 'surgeon']
-// eliminats val ['mandarin']
-
-// myFish val ['angel', 'clown', 'drum', 'surgeon']
-// Eliminem 1 element a la posició 2, i inserim 'trumpet'
-eliminats = myFish.splice(2, 1, 'trumpet');
-// myFish val ['angel', 'clown', 'trumpet', 'surgeon']
-// eliminats val ['drum']
-
-// myFish val ['angel', 'clown', 'trumpet', 'surgeon']
-// eliminem 2 elements de la posició 0, i inserim 'parrot', 'anemone' i 'blue'
-eliminats = myFish.splice(0, 2, 'parrot', 'anemone', 'blue');
-// myFish val ['parrot', 'anemone', 'blue', 'trumpet', 'surgeon']
-// eliminats val ['angel', 'clown']
-
-// myFish val ['parrot', 'anemone', 'blue', 'trumpet', 'surgeon']
-// eliminem 2 elements de la posició 3
-eliminats = myFish.splice(myFish.length -3, 2);
-// myFish val ['parrot', 'anemone', 'surgeon']
-// eliminats val ['blue', 'trumpet']
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES3')}}{{Spec2('ES3')}}Definició inicial. Implementat a JavaScript 1.2.
{{SpecName('ES5.1', '#sec-15.4.4.12', 'Array.prototype.splice')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-array.prototype.splice', 'Array.prototype.splice')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-array.prototype.splice', 'Array.prototype.splice')}}{{Spec2('ESDraft')}}
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome("1.0")}}{{CompatGeckoDesktop("1.7")}}{{CompatIE("5.5")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Compatibilitat amb versions anteriors

- -

A JavaScript 1.2 el mètode splice() retornava l'element eliminat si només s'havia eliminat un sol element (és a dir, si el valor del paràmetre comptadorEliminar era 1); en qualsevol altre cas retornava un array contenit els elements eliminats.

- -
-

Nota: L'últim navegador en utilitzar JavaScript 1.2 va ser el Netscape Navigator 4, així que podeu asumir que splice() sempre retornarà un array. Aquest és el cas quan un objecte JavaScript disposa de la propietat length i un mètode splice(),{{domxref("console.log()")}} el tracta com si fós un objecte array. Comprovar-ho amb instanceof Array retornarà false.

-
- -

Vegeu també

- -
    -
  • {{jsxref("Array.prototype.push()", "push()")}} / {{jsxref("Array.prototype.pop()", "pop()")}} — afegir/eliminar elements del final d'un array
    • -
  • {{jsxref("Array.prototype.unshift()", "unshift()")}} / {{jsxref("Array.prototype.shift()", "shift()")}} — afegir/eliminar elements de l'inici d'un array
    • -
  • {{jsxref("Array.prototype.concat()", "concat()")}} — retorna un nou array format a partir d'aquest array i d'altres array(s) i/o valor(s)
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/boolean/index.html b/files/ca/web/javascript/referencia/objectes_globals/boolean/index.html deleted file mode 100644 index 83f2597df9..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/boolean/index.html +++ /dev/null @@ -1,196 +0,0 @@ ---- -title: Boolean -slug: Web/JavaScript/Referencia/Objectes_globals/Boolean -translation_of: Web/JavaScript/Reference/Global_Objects/Boolean ---- -
{{JSRef("Global_Objects", "Boolean")}}
- -

Resum

- -

L'objecte Boolean és un objecte que embolcalla valors booleans.

- -

Constructor

- -
new Boolean([valors])
- -

Paràmetres

- -
-
valors
-
Opcional. El valor inicial de l'objecte Boolean.
-
- -

Descripció

- -

El valor passat com a primer paràmetre es converteix a un valor booleà, en cas necesari. Si és omés o si és 0, -0, {{jsxref("Global_Objects/null", "null")}}, false, {{jsxref("Global_Objects/NaN", "NaN")}}, {{jsxref("Global_Objects/undefined", "undefined")}}, o la cadena de caràcters buida (""), l'objecte tindrà el valor inicial false. Tots els altres valors, incloent qualsevol objecte o la cadena de caràcters "false", crea un objecte amb el valor inicial de true.

- -

No confoneu els valors Boolean primitius true i false amb els valors true i false de l'objecte Boolean.

- -

Qualsevol objecte el valor del qual no sigui {{jsxref("Global_Objects/undefined", "undefined")}} o {{jsxref("Global_Objects/null", "null")}}, incloent un objecte de tipus Boolean el valor del qual sigui false, evalua a true quan es passa a una sentència condicional. Per exemple, la condició en la següent sentència {{jsxref("Statements/if...else", "if")}} evalua a true:

- -
x = new Boolean(false);
-if (x) {
-  // aquest codi s'executarà
-}
-
- -

Aquest comportament no s'aplica a les primitives de tipus booleà. Per exemple, la condició en la següent sentència {{jsxref("Statements/if...else", "if")}} evalua a false:

- -
x = false;
-if (x) {
-  // aquest codi no s'executarà
-}
-
- -

No creeu una instància de Boolean per a convertir un valor no booleà a un valor booleà. En comptes d'això utilitzeu Boolean com una funció per a realitzar aquesta tasca:

- -
x = Boolean(expression);     // utilitzar preferentment
-x = new Boolean(expression); // no ho utilitzeu
-
- -

Si s'especifica qualsevol objecte, inclòs un objecte Boolean el valor del qual sigui false, com a valor inicial per a un objecte Boolean, el nou objecte Boolean tindrà un valor de true.

- -
myFalse = new Boolean(false);   // valor inicial false
-g = new Boolean(myFalse);       // valor inicial true
-myString = new String('Hello'); // objecte de tipus String
-s = new Boolean(myString);      // valor inicial true
-
- -

No utilitzeu un objecte Boolean quan podríeu utilitzar un valor primitiu booleà.

- -

Propietats

- -
-
Boolean.length
-
La propietat Length retorna el valor de 1.
-
{{jsxref("Boolean.prototype")}}
-
Representa el prototip pel constructor Boolean.
-
- -

{{jsOverrides("Function", "Properties", "prototype")}}

- -

Mètodes

- -

L'objecte Boolean no té mètodes propis. Hereta, però, alguns mètodes a través de la cadena de prototipus:

- -
{{jsOverrides("Function", "Methods")}}
- -

Instàncies de Boolean

- -

Totes les instàncies de Boolean hereten de {{jsxref("Boolean.prototype")}}. Com tots els constructors, el prototipus de l'objecte dicta les propietats i mètodes que heretaran les instàncies.

- -

Propietats

- -
{{page('/ca/docs/Web/JavaScript/Reference/Global_Objects/Boolean/prototype', 'Properties')}}
- -

Mètodes

- -
{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean/prototype', 'Methods')}}
- -

Exemples

- -

Exemple: Crear objectes Boolean amb un valor inicial de false

- -
var bNoParam = new Boolean();
-var bZero = new Boolean(0);
-var bNull = new Boolean(null);
-var bEmptyString = new Boolean('');
-var bfalse = new Boolean(false);
-
- -

Exemple: Crear objectes Boolean amb un valor inicial de true

- -
var btrue = new Boolean(true);
-var btrueString = new Boolean('true');
-var bfalseString = new Boolean('false');
-var bSuLin = new Boolean('Su Lin');
-var bArrayProto = new Boolean([]);
-var bObjProto = new Boolean({});
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.6', 'Boolean')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-boolean-objects', 'Boolean')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatIE("6.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- - diff --git a/files/ca/web/javascript/referencia/objectes_globals/boolean/prototype/index.html b/files/ca/web/javascript/referencia/objectes_globals/boolean/prototype/index.html deleted file mode 100644 index e0845eb102..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/boolean/prototype/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: Boolean.prototype -slug: Web/JavaScript/Referencia/Objectes_globals/Boolean/prototype -translation_of: Web/JavaScript/Reference/Global_Objects/Boolean -translation_of_original: Web/JavaScript/Reference/Global_Objects/Boolean/prototype ---- -
{{JSRef("Global_Objects", "Boolean")}}
- -

Resum

- -

La propietat Boolean.prototype representa el prototipus pel constructor {{jsxref("Global_Objects/Boolean", "Boolean")}}.

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

Descripció

- -

Les instàncies de {{jsxref("Global_Objects/Boolean", "Boolean")}} hereten de Boolean.prototype. Es pot emprar l'objecte prototipus del constructor per a afegir noves propietats o mètodes a totes les instàncies de {{jsxref("Global_Objects/Boolean", "Boolean")}}.

- -

Propietats

- -
-
Boolean.prototype.constructor
-
Retorna la funció que ha creat la instància del prototipus. Aquesta funció és {{jsxref("Global_Objects/Boolean", "Boolean")}} per defecte.
-
- -
{{jsOverrides("Object", "properties", "constructor")}}
- -

Mètodes

- -
-
{{jsxref("Boolean.prototype.toSource()")}} {{non-standard_inline}}
-
Retorna una cadena de caràcters que conté el codi fond de l'objecte {{jsxref("Global_Objects/Boolean", "Boolean")}}; aquesta pot utilitzar-se per a crear un objecte equivalent. Sobreescriu el mètode {{jsxref("Object.prototype.toSource()")}}.
-
{{jsxref("Boolean.prototype.toString()")}}
-
Retorna una cadena de caràcters que valdrà o bé "true" o bé "false", depenent del valor que l'objecte representi. Sobreescriu el mètode {{jsxref("Object.prototype.toString()")}}.
-
{{jsxref("Boolean.prototype.valueOf()")}}
-
Retorna el valor primitiu de l'objecte {{jsxref("Global_Objects/Boolean", "Boolean")}}. Sobreescriu el mètode {{jsxref("Object.prototype.valueOf()")}}.
-
- -
{{jsOverrides("Object", "methods", "toSource", "toString", "valueOf")}}
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a 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')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
diff --git a/files/ca/web/javascript/referencia/objectes_globals/boolean/tosource/index.html b/files/ca/web/javascript/referencia/objectes_globals/boolean/tosource/index.html deleted file mode 100644 index 6b6a1b8b2b..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/boolean/tosource/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: Boolean.prototype.toSource() -slug: Web/JavaScript/Referencia/Objectes_globals/Boolean/toSource -translation_of: Web/JavaScript/Reference/Global_Objects/Boolean/toSource ---- -
{{JSRef("Objectes_standard", "Boolean")}} {{non-standard_header}}
- -

Resum

- -

El mètode toSource() retorna una cadena de caràcters que representa el codi font de l'objecte.

- -

Sintaxi

- -
booleanObj.toSource()
-Boolean.toSource()
- -

Paràmetres

- -

Cap.

- -

Descripció

- -

El mètode toSource retorna els valors següents:

- -
    -
  • Per a objectes {{jsxref("Objectes_standard/Boolean", "Boolean")}} de la implementació de JavaScript, toSource retorna la següent cadena de caràcters indicant que el codi font no està disponible: - - 
    function Boolean() {
-    [native code]
-}
-
    -
    • -
  • Per a instàncies de {{jsxref("Objectes_standard/Boolean", "Boolean")}}, toSource retorna una cadena de caràcters que representa el codi font.
    • -
- -

Aquest mètode normalment és utilitzat internament per JavaScript i no explícitament al codi.

- -

Especificacions

- -

No forma part de cap standard. Implementat a JavaScript 1.3.

- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Object.prototype.toSource()")}} {{non-standard_inline}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/boolean/tostring/index.html b/files/ca/web/javascript/referencia/objectes_globals/boolean/tostring/index.html deleted file mode 100644 index 90da6cba3a..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/boolean/tostring/index.html +++ /dev/null @@ -1,121 +0,0 @@ ---- -title: Boolean.prototype.toString() -slug: Web/JavaScript/Referencia/Objectes_globals/Boolean/toString -translation_of: Web/JavaScript/Reference/Global_Objects/Boolean/toString ---- -
{{JSRef("Global_Objects", "Boolean")}}
- -

Resum

- -

El mètode toString() retorna una cadena de caràcters que representa l'objecte Boolean.

- -

Sintaxi

- -
bool.toString()
- -

Paràmetres

- -

Cap.

- -

Descripció

- -

L'objecte {{jsxref("Objectes_standard/Boolean", "Boolean")}} sobreescriu el mètode toString de l'objecte {{jsxref("Objectes_standard/Object", "Object")}}; no hereta {{jsxref("Object.prototype.toString()")}}. Per a objectes de tipus Boolean, el mètode toString retorna una cadena de caràcters que representa l'objecte.

- -

JavaScript crida el mètode toString de manera automàtica quan aquest ha de ser representat mitjançant text o bé quan un {{jsxref("Objectes_standard/Boolean", "Boolean")}} és referenciat en una concatenació de cadenes de caràcters.

- -

Per a objectes i valors de tipus {{jsxref("Objectes_standard/Boolean", "Boolean")}}, el mètode toString incorporat retorna la cadena de caràcters "true" o bé "false", depenent del valor de l'objecte booleà.

- -

Exemples

- -

Exemple: Utilitzar toString

- -

Al codi següent flag.toString() retorna "true":

- -
var flag = new Boolean(true);
-var myVar = flag.toString();
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
ECMAScript 1a Edició. Implementat a JavaScript 1.1StandardDefinició inicial.
{{SpecName('ES5.1', '#sec-15.6.4.2', 'Boolean.prototype.toString')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-boolean.prototype.tostring', 'Boolean.prototype.toString')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Object.prototype.toString()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/boolean/valueof/index.html b/files/ca/web/javascript/referencia/objectes_globals/boolean/valueof/index.html deleted file mode 100644 index f99fd3c6c0..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/boolean/valueof/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: Boolean.prototype.valueOf() -slug: Web/JavaScript/Referencia/Objectes_globals/Boolean/valueOf -translation_of: Web/JavaScript/Reference/Global_Objects/Boolean/valueOf ---- -
{{JSRef("Global_Objects", "Boolean")}}
- -

Resum

- -

El mètode valueOf() retorna el valor primitiu d'un objecte {{jsxref("Objectes_standard/Boolean", "Boolean")}}.

- -

Sintaxi

- -
bool.valueOf()
- -

Paràmetres

- -

Cap.

- -

Descripció

- -

El mètode valueOf pertanyent a {{jsxref("Objectes_standard/Boolean", "Boolean")}} retorna el valor primitiu d'un objecte o literal {{jsxref("Objectes_standard/Boolean", "Boolean")}} com a tipus de dada Boolean.

- -

Aquest mètode normalment és utilitzat internament per JavaScript i no explícitament als scripts.

- -

Exemples

- -

Exemple: Utilitzar valueOf

- -
x = new Boolean();
-myVar = x.valueOf(); // assigna false a myVar
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.6.4.3', 'Boolean.prototype.valueOf')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-boolean.prototype.valueof', 'Boolean.prototype.valueOf')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Object.prototype.valueOf()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/date/getdate/index.html b/files/ca/web/javascript/referencia/objectes_globals/date/getdate/index.html deleted file mode 100644 index 16808aaae0..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/date/getdate/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: Date.prototype.getDate() -slug: Web/JavaScript/Referencia/Objectes_globals/Date/getDate -translation_of: Web/JavaScript/Reference/Global_Objects/Date/getDate ---- -
{{JSRef}}
- -

El mètode getDate() retorna el dia del mes per a la data especificada segons l'hora local.

- -

Sintaxi

- -
objecteData.getDate()
- -

Paràmetres

- -

Cap.

- -

Valor retornat

- -

El valor retornat per getDate() és un nombre sencer entre 1 i 31.

- -

Exemples

- -

Utilitzar getDate()

- -

La segona sentència de l'exemple de sota assigna el valor 25 a la variable dia, basant-se en el valor de l'objecte {{jsxref("Date")}} nadal95.

- -
var nadal95 = new Date('December 25, 1995 23:15:30');
-var dia = nadal95.getDate();
-
-console.log(dia); // 25
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-date.prototype.getdate', 'Date.prototype.getDate')}}{{Spec2('ES6')}} 
{{SpecName('ES5.1', '#sec-15.9.5.14', 'Date.prototype.getDate')}}{{Spec2('ES5.1')}} 
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.1.
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Date.prototype.getUTCDate()")}}
    • -
  • {{jsxref("Date.prototype.getUTCDay()")}}
    • -
  • {{jsxref("Date.prototype.setDate()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/date/getday/index.html b/files/ca/web/javascript/referencia/objectes_globals/date/getday/index.html deleted file mode 100644 index 244562c167..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/date/getday/index.html +++ /dev/null @@ -1,121 +0,0 @@ ---- -title: Date.prototype.getDay() -slug: Web/JavaScript/Referencia/Objectes_globals/Date/getDay -translation_of: Web/JavaScript/Reference/Global_Objects/Date/getDay ---- -
{{JSRef("Global_Objects", "Date")}}
- -

Resum

- -

El mètode getDay() retorna el dia de la setmana per a la data especificada, en temps local on 0 (zero) representa el Diumenge.

- -

Sintaxi

- -
dateObj.getDay()
- -

Paràmetres

- -

Cap.

- -

Retorna

- -

El valor retornat per getDay() és un nombre sencer que correspon al dia de la setmana tal i com es mostra a continuació: 0 és Diumenge, 1 és Dilluns, 2 és Dimarts, etcètera.

- -

Exemples

- -

Exemple: Utilitzar getDay()

- -

La segona sentència que trobareu a continuació asigna el valor 1 a la variable diaSetmana, basat en el valor de l'objecte {{jsxref("Global_Objects/Date", "Date")}} nadal95, que està inicialitzat amb la data d 25 de Desembre de 1995, és un Dilluns.

- -
var nadal95 = new Date('December 25, 1995 23:15:30');
-var diaSetmana = nadal95.getDay();
-
-console.log(diaSetmana); // 1
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.9.5.16', 'Date.prototype.getDay')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.getday', 'Date.prototype.getDay')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Date.prototype.getUTCDate()")}}
    • -
  • {{jsxref("Date.prototype.getUTCDay()")}}
    • -
  • {{jsxref("Date.prototype.setDate()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/date/getfullyear/index.html b/files/ca/web/javascript/referencia/objectes_globals/date/getfullyear/index.html deleted file mode 100644 index 94f14f4332..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/date/getfullyear/index.html +++ /dev/null @@ -1,121 +0,0 @@ ---- -title: Date.prototype.getFullYear() -slug: Web/JavaScript/Referencia/Objectes_globals/Date/getFullYear -translation_of: Web/JavaScript/Reference/Global_Objects/Date/getFullYear ---- -
{{JSRef("Global_Objects", "Date")}}
- -

Resum

- -

El mètode getFullYear() retorna l'any de la data especificada, en temps local.

- -

Utilitzeu aquest mètode en comptes de {{jsxref("Date.prototype.getYear()", "getYear()")}}.

- -

Sintaxi

- -
dateObj.getFullYear()
- -

Paràmetres

- -

Cap.

- -

Retorna

- -

El valor retornat per getFullYear() és un nombre absolut. Per a dates entre els anys 1000 i 9999, getFullYear() retorna un nombre de 4 dígits (1995, per exemple). Utilitzeu aquesta funció per a assegurar-vos d'obtindre un any compatible amb l'efecte 2000.

- -

Exemples

- -

Exemple: Utilitzar getFullYear()

- -

L'exemple següent assigna el valor de 4 dígits de l'any actual a la variable any.

- -
var avui = new Date();
-var any = avui.getFullYear();
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.3.
{{SpecName('ES5.1', '#sec-15.9.5.10', 'Date.prototype.getFullYear')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.getfullyear', 'Date.prototype.getFullYear')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Date.prototype.getUTCFullYear()")}}
    • -
  • {{jsxref("Date.prototype.setFullYear()")}}
    • -
  • {{jsxref("Date.prototype.getYear()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/date/gethours/index.html b/files/ca/web/javascript/referencia/objectes_globals/date/gethours/index.html deleted file mode 100644 index 3848e96339..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/date/gethours/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: Date.prototype.getHours() -slug: Web/JavaScript/Referencia/Objectes_globals/Date/getHours -translation_of: Web/JavaScript/Reference/Global_Objects/Date/getHours ---- -
{{JSRef("Global_Objects", "Date")}}
- -

Resum

- -

El mètode getHours() retorna l'hora per a la data especificada, en temps local.

- -

Sintaxi

- -
dateObj.getHours()
- -

Paràmetres

- -

Cap.

- -

Retorna

- -

El valor retornat per getHours() és un nombre sencer entre 0 i 23.

- -

Exemples

- -

Exemple: Utilitzar getHours()

- -

La segona sentència que trobareu a continuació assigna el valor 23 a la variable hora, basant-se en l'objecte {{jsxref("Global_Objects/Date", "Date")}} nadal95.

- -
var nadal95 = new Date('December 25, 1995 23:15:30');
-var hora = nadal95.getHours();
-
-console.log(hora); // 23
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.9.5.18', 'Date.prototype.getHours')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.gethours', 'Date.prototype.getHours')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Date.prototype.getUTCHours()")}}
    • -
  • {{jsxref("Date.prototype.setHours()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/date/getmilliseconds/index.html b/files/ca/web/javascript/referencia/objectes_globals/date/getmilliseconds/index.html deleted file mode 100644 index d438cf8cad..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/date/getmilliseconds/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: Date.prototype.getMilliseconds() -slug: Web/JavaScript/Referencia/Objectes_globals/Date/getMilliseconds -translation_of: Web/JavaScript/Reference/Global_Objects/Date/getMilliseconds ---- -
{{JSRef("Global_Objects", "Date")}}
- -

Resum

- -

El mètode getMilliseconds() retorna els milisegons de la data especificada d'acord a l'hora local.

- -

Sintaxi

- -
dateObj.getMilliseconds()
- -

Paràmetres

- -

Cap.

- -

Retorna

- -

El valor retornat per getMilliseconds() és un nombre entre 0 i 999.

- -

Exemples

- -

Exemple: Utilitzar getMilliseconds()

- -

L'exemple següent assigna la part de milisegons de l'hora actual a la variable milisegons:

- -
var avui = new Date();
-var milisegonds = avui.getMilliseconds();
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.3.
{{SpecName('ES5.1', '#sec-15.9.5.24', 'Date.prototype.getMilliseconds')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.getmilliseconds', 'Date.prototype.getMilliseconds')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Date.prototype.getUTCMilliseconds()")}}
    • -
  • {{jsxref("Date.prototype.setMilliseconds()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/date/getminutes/index.html b/files/ca/web/javascript/referencia/objectes_globals/date/getminutes/index.html deleted file mode 100644 index 3ae466d56d..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/date/getminutes/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: Date.prototype.getMinutes() -slug: Web/JavaScript/Referencia/Objectes_globals/Date/getMinutes -translation_of: Web/JavaScript/Reference/Global_Objects/Date/getMinutes ---- -
{{JSRef("Global_Objects", "Date")}}
- -

Resum

- -

El mètode getMinutes() retorna els minuts de la data especificada segons el temps local.

- -

Sintaxi

- -
dateObj.getMinutes()
- -

Paràmetres

- -

Cap.

- -

Retorna

- -

El valor retorna per getMinutes() és un nombre sencer entre 0 i 59.

- -

Exemples

- -

Exemple: Utilitzar getMinutes()

- -

La segona sentència de  sota assigna el valor 15 a la variable minuts, prenent el valor de l'objecte nadal95 de tipus {{jsxref("Global_Objects/Date", "Date")}}.

- -
var nadal95 = new Date('December 25, 1995 23:15:30');
-var minuts = nadal95.getMinutes();
-
-console.log(minuts); // 15
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.9.5.20', 'Date.prototype.getMinutes')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.getminutes', 'Date.prototype.getMinutes')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Date.prototype.getUTCMinutes()")}}
    • -
  • {{jsxref("Date.prototype.setMinutes()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/date/getmonth/index.html b/files/ca/web/javascript/referencia/objectes_globals/date/getmonth/index.html deleted file mode 100644 index 2631ebef9a..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/date/getmonth/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: Date.prototype.getMonth() -slug: Web/JavaScript/Referencia/Objectes_globals/Date/getMonth -translation_of: Web/JavaScript/Reference/Global_Objects/Date/getMonth ---- -
{{JSRef("Global_Objects", "Date")}}
- -

Resum

- -

El mètode getMonth() retorna el mes de la data especificada d'acord al temps local, representat per un nombre a partir de zero (on zero indica el primer mes de l'any).

- -

Sintaxi

- -
dateObj.getMonth()
- -

Paràmetres

- -

Cap.

- -

Retorna

- -

El valor retornat per getMonth() és un nombre sencer entre 0 i 11. 0 correspon a gener, 1 a febrer, etcètera.

- -

Exemples

- -

Exemple: Utilitzar getMonth()

- -

La segona sentència de sota assigna el valor 11 a la variable mes, basada en el valor de l'objecte nadal95 de tipus {{jsxref("Global_Objects/Date", "Date")}}.

- -
var nadal95 = new Date('December 25, 1995 23:15:30');
-var mes = nadal95.getMonth();
-
-console.log(mes); // 11
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.9.5.12', 'Date.prototype.getMonth')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.getmonth', 'Date.prototype.getMonth')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Date.prototype.getUTCMonth()")}}
    • -
  • {{jsxref("Date.prototype.setMonth()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/date/getseconds/index.html b/files/ca/web/javascript/referencia/objectes_globals/date/getseconds/index.html deleted file mode 100644 index 790c62e3e9..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/date/getseconds/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: Date.prototype.getSeconds() -slug: Web/JavaScript/Referencia/Objectes_globals/Date/getSeconds -translation_of: Web/JavaScript/Reference/Global_Objects/Date/getSeconds ---- -
{{JSRef("Global_Objects", "Date")}}
- -

Resum

- -

El mètode getSeconds() retorna els segons de la data especficada d'acord al temps local.

- -

Sintaxi

- -
dateObj.getSeconds()
- -

Paràmetres

- -

Cap.

- -

Retorna

- -

El valor retornat per getSeconds() és un sencer entre 0 i 59.

- -

Exemples

- -

Exemple: Utilitzar getSeconds()

- -

La segona sentència de sota assigna el valor 30 a la variable segons, basat en el valor de l'objecte nadal95, de tipus {{jsxref("Global_Objects/Date", "Date")}}.

- -
var nadal95 = new Date('December 25, 1995 23:15:30');
-var segons = nadal95.getSeconds();
-
-console.log(segons); // 30
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.9.5.22', 'Date.prototype.getSeconds')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.getseconds', 'Date.prototype.getSeconds')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Date.prototype.getUTCSeconds()")}}
    • -
  • {{jsxref("Date.prototype.setSeconds()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/date/gettime/index.html b/files/ca/web/javascript/referencia/objectes_globals/date/gettime/index.html deleted file mode 100644 index 20c45f31c5..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/date/gettime/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: Date.prototype.getTime() -slug: Web/JavaScript/Referencia/Objectes_globals/Date/getTime -translation_of: Web/JavaScript/Reference/Global_Objects/Date/getTime ---- -
{{JSRef}}
- -

El mètode getTime() retorna el valor numèric corresponent a l'hora per a la data especificada, d'acord al temps universal.

- -

Es pot emprar aquest mètode com a ajuda per a proporcionar una data i hora per a un altre objecte de tipus {{jsxref("Global_Objects/Date", "Date")}}. Aquest mètode és funcionalment equivalnet al mètode {{jsxref("Date.valueof", "valueOf()")}}.

- -

Sintaxi

- -
dateObj.getTime()
- -

Paràmetres

- -

Cap.

- -

Retorn

- -

El valor retornat pel mètode getTime() és el nombre de milisegons que han passat des de l'1 de gener de 1970 00:00:00 UTC.

- -

Exemples

- -

Utilitzar getTime() per a obtindre dates

- -

Construïr un objecte date que representi el mateix moment.

- -
var aniversari = new Date(1994, 12, 10);
-var copia= new Date();
-copia.setTime(aniversari.getTime());
-
- -

Mesurar el temps d'execució

- -

Restar dos crides seguides de getTime() en objectes {{jsxref("Date")}} acabats de generar dóne el temps transcorregut entre les dues crides. Això pot ser emprat per a calcular el temps d'execució d'algunes operacions. Vegeu també {{jsxref("Date.now()")}} per a prevenir l'instanciació d'objectes {{jsxref("Date")}} innecesaris.

- -
var fi, inici;
-
-inici= new Date();
-for (var i = 0; i < 1000; i++) {
-  Math.sqrt(i);
-}
-fi = new Date();
-
-console.log("L'operació ha trigat " + (fi.getTime() - inici.getTime()) + ' ms');
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.9.5.9', 'Date.prototype.getTime')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.gettime', 'Date.prototype.getTime')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Date.prototype.setTime()")}}
    • -
  • {{jsxref("Date.prototype.valueOf()")}}
    • -
  • {{jsxref("Date.now()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/date/gettimezoneoffset/index.html b/files/ca/web/javascript/referencia/objectes_globals/date/gettimezoneoffset/index.html deleted file mode 100644 index 8af4d6e9e8..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/date/gettimezoneoffset/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: Date.prototype.getTimezoneOffset() -slug: Web/JavaScript/Referencia/Objectes_globals/Date/getTimezoneOffset -translation_of: Web/JavaScript/Reference/Global_Objects/Date/getTimezoneOffset ---- -
{{JSRef("Global_Objects", "Date")}}
- -

Resum

- -

El mètode getTimezoneOffset() retorna la desviació de la zona horària a l'hora UTC, en minuts, per a la localizació en ús.

- -

Sintaxi

- -
dateObj.getTimezoneOffset()
- -

Paràmetres

- -

Cap.

- -

Retorn

- -

La desviació de la zona horària és la diferència, en minuts, entre UTC i l'hora local. Això comporta que la desviació serà positiva si l'hora local està per darrere de la UTC i negativa si està endevant. Per exemple, si la vostra zona horària és UTC+10 (Australian Eastern Standard Time), el mètode retornarà -600. L'horari d'estalvi d'energia (d'estiu) fa que aquest valor no sigui una constant, per a qualsevol localització.

- -

Exemples

- -

Exemple: Utilitzar getTimezoneOffset()

- -
var x = new Date();
-var currentTimeZoneOffsetInHours = x.getTimezoneOffset() / 60;
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.9.5.26', 'Date.prototype.getTimezoneOffset')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.gettimezoneoffset', 'Date.prototype.getTimezoneOffset')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
diff --git a/files/ca/web/javascript/referencia/objectes_globals/date/getutcdate/index.html b/files/ca/web/javascript/referencia/objectes_globals/date/getutcdate/index.html deleted file mode 100644 index ee3a8b881f..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/date/getutcdate/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: Date.prototype.getUTCDate() -slug: Web/JavaScript/Referencia/Objectes_globals/Date/getUTCDate -translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCDate ---- -
{{JSRef("Global_Objects", "Date")}}
- -

Resum

- -

El mètode getUTCDate()retorna el dia del mes per a la data especificada, segons l'hora universal.

- -

Sintaxi

- -
dateObj.getUTCDate()
- -

Paràmetres

- -

Cap.

- -

Retorn

- -

El valor retornat per getUTCDate() és un nombre sencer entre 1 i 31.

- -

Exemples

- -

Exemple: Utilitzar getUTCDate()

- -

L'exemple següent assigna la part del dia de la data actual a la variable dia.

- -
var avui = new Date();
-var dia = avui.getUTCDate();
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.3.
{{SpecName('ES5.1', '#sec-15.9.5.15', 'Date.prototype.getUTCDate')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.getutcdate', 'Date.prototype.getUTCDate')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Date.prototype.getDate()")}}
    • -
  • {{jsxref("Date.prototype.getUTCDay()")}}
    • -
  • {{jsxref("Date.prototype.setUTCDate()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/date/getutcday/index.html b/files/ca/web/javascript/referencia/objectes_globals/date/getutcday/index.html deleted file mode 100644 index b6f992f9a1..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/date/getutcday/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: Date.prototype.getUTCDay() -slug: Web/JavaScript/Referencia/Objectes_globals/Date/getUTCDay -translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCDay ---- -
{{JSRef("Global_Objects", "Date")}}
- -

Resum

- -

El mètode getUTCDay() retorna el dia de la setmana de la data especificada segons l'hora universal, on 0 representa Diumenge.

- -

Sintaxi

- -
dateObj.getUTCDay()
- -

Paràmetres

- -

Cap.

- -

Retorn

- -

El valor retornat per  getUTCDay() és un nombre sencer que correspón al dia de la setmana: 0 per a Diumenge, 1 per a dilluns, 2 per a Dimarts, etcètera.

- -

Exemples

- -

Exemple: Utilitzar getUTCDay()

- -

L'exemple següent assigna el dia de la setmana de la data actual a la variable diaSetmana.

- -
var avui = new Date();
-var diaSetmana = avui.getUTCDay();
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.3.
{{SpecName('ES5.1', '#sec-15.9.5.17', 'Date.prototype.getUTCDay')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.getutcday', 'Date.prototype.getUTCDay')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Date.prototype.getUTCDate()")}}
    • -
  • {{jsxref("Date.prototype.getDay()")}}
    • -
  • {{jsxref("Date.prototype.setUTCDate()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/date/getutcfullyear/index.html b/files/ca/web/javascript/referencia/objectes_globals/date/getutcfullyear/index.html deleted file mode 100644 index 3ca1526e28..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/date/getutcfullyear/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: Date.prototype.getUTCFullYear() -slug: Web/JavaScript/Referencia/Objectes_globals/Date/getUTCFullYear -translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCFullYear ---- -
{{JSRef("Global_Objects", "Date")}}
- -

Resum

- -

El mètode getUTCFullYear() retorna l'any de la data especificada, segons el temps universal.

- -

Sintaxi

- -
dateObj.getUTCFullYear()
- -

Paràmetres

- -

Cap.

- -

Retorn

- -

El valor retornat per getUTCFullYear() és un nombre absolut que compleix amb any-2000, per exemple, 1995.

- -

Exemples

- -

Exemple: Utilitzar getUTCFullYear()

- -

L'exemple següent assigna el valor de 4 dígits de l'any actual a la variable any.

- -
var avui = new Date();
-var any = avui.getUTCFullYear();
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.3.
{{SpecName('ES5.1', '#sec-15.9.5.11', 'Date.prototype.getUTCFullYear')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.getutcfullyear', 'Date.prototype.getUTCFullYear')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Date.prototype.getFullYear()")}}
    • -
  • {{jsxref("Date.prototype.setFullYear()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/date/getutchours/index.html b/files/ca/web/javascript/referencia/objectes_globals/date/getutchours/index.html deleted file mode 100644 index f575df92a1..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/date/getutchours/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: Date.prototype.getUTCHours() -slug: Web/JavaScript/Referencia/Objectes_globals/Date/getUTCHours -translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCHours ---- -
{{JSRef("Global_Objects", "Date")}}
- -

Resum

- -

El mètode getUTCHours() retorna les hores especificades a la data, d'acord l'hora universal.

- -

Sintaxi

- -
dateObj.getUTCHours()
- -

Paràmetres

- -

Cap.

- -

Retorn

- -

El valor retornat per getUTCHours() és un nombre sencer entre 0 i 23.

- -

Exemples

- -

Exemple: Utilitzar getUTCHours()

- -

L'exemple següent assigna la part de les hores de la data actual a la variable hora.

- -
var avui = new Date();
-var hora = avui.getUTCHours();
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.3.
{{SpecName('ES5.1', '#sec-15.9.5.19', 'Date.prototype.getUTCHours')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.getutchours', 'Date.prototype.getUTCHours')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Date.prototype.getHours()")}}
    • -
  • {{jsxref("Date.prototype.setUTCHours()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/date/getutcmilliseconds/index.html b/files/ca/web/javascript/referencia/objectes_globals/date/getutcmilliseconds/index.html deleted file mode 100644 index d09ac5bded..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/date/getutcmilliseconds/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: Date.prototype.getUTCMilliseconds() -slug: Web/JavaScript/Referencia/Objectes_globals/Date/getUTCMilliseconds -translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCMilliseconds ---- -
{{JSRef}}
- -

El mètode getUTCMilliseconds() retorna els milisegons de la data especificada, d'acord al temps universal.

- -

Sintaxi

- -
objecteData.getUTCMilliseconds()
- -

Paràmetres

- -

Cap.

- -

Valor retornat

- -

El valor retorna per getUTCMilliseconds() és un nombre sencer entre 0 i 999.

- -

Exemples

- -

Utilitzar getUTCMilliseconds()

- -

L'exemple següent assigna la porció de milisegons del temps actual a la variable milisegons.

- -
var avui = new Date();
-var milisegons = avui.getUTCMilliseconds();
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.3.
{{SpecName('ES5.1', '#sec-15.9.5.25', 'Date.prototype.getUTCMilliseconds')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.getutcmilliseconds', 'Date.prototype.getUTCMilliseconds')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Date.prototype.getMilliseconds()")}}
    • -
  • {{jsxref("Date.prototype.setUTCMilliseconds()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/date/getutcminutes/index.html b/files/ca/web/javascript/referencia/objectes_globals/date/getutcminutes/index.html deleted file mode 100644 index e18a13c52f..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/date/getutcminutes/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: Date.prototype.getUTCMinutes() -slug: Web/JavaScript/Referencia/Objectes_globals/Date/getUTCMinutes -translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCMinutes ---- -
{{JSRef}}
- -

El mètode getUTCMinutes() retorna els minuts de la data especificada en temps universal.

- -

Sintaxi

- -
objecteData.getUTCMinutes()
- -

Paràmetres

- -

Cap.

- -

Valor a retornar

- -

El valor retornat per getUTCMinutes() és un nombre sencer entre 0 i 59.

- -

Exemples

- -

Utilitzar getUTCMinutes()

- -

L'exemple següent assigna la part de minuts del temps actual a la variable minuts.

- -
var avui = new Date();
-var minuts = avui.getUTCMinutes();
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.3.
{{SpecName('ES5.1', '#sec-15.9.5.21', 'Date.prototype.getUTCMinutes')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.getutcminutes', 'Date.prototype.getUTCMinutes')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Date.prototype.getMinutes()")}}
    • -
  • {{jsxref("Date.prototype.setUTCMinutes()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/date/getutcmonth/index.html b/files/ca/web/javascript/referencia/objectes_globals/date/getutcmonth/index.html deleted file mode 100644 index 48ba78349b..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/date/getutcmonth/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: Date.prototype.getUTCMonth() -slug: Web/JavaScript/Referencia/Objectes_globals/Date/getUTCMonth -translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCMonth ---- -
{{JSRef}}
- -

El mètode getUTCMonth() retorna el mes de la data especificada d'acord al temps universal, com a valor basat en zero (on zero indica el primer mes de l'any.

- -

Sintaxi

- -
objecteData.getUTCMonth()
- -

Paràmetres

- -

Cap.

- -

Valor retornat

- -

El valor retornat per getUTCMonth() és un nombre sencer entre 0 i 11 corresponent al mes. 0 per al gener, 1 per al febrer, 2 per al març, etcètera.

- -

Exemples

- -

Utilitzar getUTCMonth()

- -

L'exemple següent assigna la part de la data actual corresponent al mes a la variable mes.

- -
var avui = new Date();
-var mes = mes.getUTCMonth();
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.3.
{{SpecName('ES5.1', '#sec-15.9.5.13', 'Date.prototype.getUTCMonth')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.getutcmonth', 'Date.prototype.getUTCMonth')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Date.prototype.getMonth()")}}
    • -
  • {{jsxref("Date.prototype.setUTCMonth()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/date/getutcseconds/index.html b/files/ca/web/javascript/referencia/objectes_globals/date/getutcseconds/index.html deleted file mode 100644 index 1f69ca8199..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/date/getutcseconds/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: Date.prototype.getUTCSeconds() -slug: Web/JavaScript/Referencia/Objectes_globals/Date/getUTCSeconds -translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCSeconds ---- -
{{JSRef("Global_Objects", "Date")}}
- -

Resum

- -

El mètode getUTCSeconds() retorna els segons a la data especificada, segons l'hora universal.

- -

Sintaxi

- -
dateObj.getUTCSeconds()
- -

Paràmetres

- -

Cap.

- -

Retorna

- -

El valor retornat per getUTCSeconds() és un nombre sencer entre 0 i 59.

- -

Exemples

- -

Exemple: Utilitzar getUTCSeconds()

- -

L'exemple següent assigna la porció de segons del temps actual a la variable segons.

- -
var avui = new Date();
-var segons = avui.getUTCSeconds();
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.3.
{{SpecName('ES5.1', '#sec-15.9.5.23', 'Date.prototype.getUTCSeconds')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.getutcseconds', 'Date.prototype.getUTCSeconds')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Date.prototype.getSeconds()")}}
    • -
  • {{jsxref("Date.prototype.setUTCSeconds()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/date/getyear/index.html b/files/ca/web/javascript/referencia/objectes_globals/date/getyear/index.html deleted file mode 100644 index 8724b2e03b..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/date/getyear/index.html +++ /dev/null @@ -1,162 +0,0 @@ ---- -title: Date.prototype.getYear() -slug: Web/JavaScript/Referencia/Objectes_globals/Date/getYear -translation_of: Web/JavaScript/Reference/Global_Objects/Date/getYear ---- -
{{JSRef("Global_Objects", "Date")}} {{deprecated_header}}
- -

Resum

- -

El mètode getYear() retorna l'any de la data especificada segons l'hora local. Com que getYear() no retorna anys sencers ("el problema de l'any 2000"), no s'utilitza més i s'ha substituït pel mètode {{jsxref("Date.prototype.getFullYear", "getFullYear()")}}.

- -

Sintaxi

- -
dateObj.getYear()
- -

Paràmetres

- -

Cap.

- -

Retorna

- -

El mètode getYear() retorna l'any menys el valor 1900; és a dir:

- -
    -
  • Per a anys majors o iguals a 2000, el valor retornat per getYear() és 100 o major. Per exemple, si l'any és el 2026, getYear() retorna 126.
    • -
  • Per a anys entre 1900 i 1999 (ambdós inclosos), el valor retornat per getYear() roman entre 0 i 99. Per exemple, per a l'any 1976 getYear() retorna 76.
    • -
  • Per a anys menors que 1900, el valor retornat per getYear() és menor que zero. Per exemple, per a l'any 1800, getYear() retorna -100.
    • -
- -

Per a tenir en compte anys abans o deprés del 2000 es recomana utilitzar {{jsxref("Date.prototype.getFullYear", "getFullYear()")}} en comptes de getYear() ja que retorna l'any sencer.

- -

Compatibilitat amb versions anteriors

- -

Comportament en JavaScript 1.2 i anteriors

- -

El mètode getYear() retorna o bé un any amb dos dígits o bé un any amb 4 dígits:

- -
    -
  • Per a anys entre 1900 i 1999 (ambdos inclosos) el valor retornat és l'any menys 1900. Per exemple, per a l'any 1976 el valor retornat és 76.
    • -
  • Per a anys menors que 1900 o majors que 1999 el valor retornat per getYear() és l'any amb 4 dígits. Per exemple, per a l'any 1856 el valor retornat és 1856. Per a l'any 2026 el valor retornat és 2026.
    • -
- -

Exemples

- -

Exemple: Anys entre1900 i 1999

- -

La segona sentència assigna el valor 95 a la variable any.

- -
var nadal = new Date('December 25, 1995 23:15:00');
-var any = nadal.getYear(); // retorna 95
-
- -

Exemple: Anys majors que 1999

- -

La segona sentència assigna el valor 100 a la variable any.

- -
var nadal = new Date('December 25, 2000 23:15:00');
-var any = Xmas.getYear(); // retorna 100
-
- -

Exemple: Anys menors que 1900

- -

La segona sentència assigna el valor -100 a la variable any.

- -
var nadal = new Date('December 25, 1800 23:15:00');
-var any = nadal.getYear(); // retorna -100
-
- -

Exemple: Assignar i obtenir un any entre1900 i 1999

- -

La segona sentència assigna el valor 95 a la variable any, que representa l'any 1995.

- -
var nadal.setYear(95);
-var any = nadal.getYear(); // retorna 95
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.3.
{{SpecName('ES5.1', '#sec-B.2.4', 'Date.prototype.getYear')}}{{Spec2('ES5.1')}}Definit a l'annex de compatibilitat (amb caràcter informatiu).
{{SpecName('ES6', '#sec-date.prototype.getyear', 'Date.prototype.getYear')}}{{Spec2('ES6')}}Definit a l'annex de característiques adicionals per a navegadors web (amb caràcter normatiu).
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Date.prototype.getFullYear()")}}
    • -
  • {{jsxref("Date.prototype.getUTCFullYear()")}}
    • -
  • {{jsxref("Date.prototype.setYear()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/date/index.html b/files/ca/web/javascript/referencia/objectes_globals/date/index.html deleted file mode 100644 index 3fb5a9368d..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/date/index.html +++ /dev/null @@ -1,250 +0,0 @@ ---- -title: Date -slug: Web/JavaScript/Referencia/Objectes_globals/Date -translation_of: Web/JavaScript/Reference/Global_Objects/Date ---- -
{{JSRef("Global_Objects", "Date")}}
- -

Resum

- -

Crea una instància de tipus Date de JavaScript, que representa un únic moment en el temps. Els objectes de tipus Date es basen en un valor de temps que mesura el nombre de milisegons que han passat des de l'u de gener de 1970 UTC.

- -

Constructor

- -
new Date();
-new Date(valor);
-new Date(dataString);
-new Date(any, mes[, dia[, hora[, minuts[, segons[, milisegons]]]]]);
-
- -
-

Nota: Els objectes Date de JavaScript només poden ser instanciats cridant Date com a constructor: Si es crida la funció com una funció normal (és a dir, sense l'operador {{jsxref("Operators/new", "new")}}), aquesta retornarà una string en comptes d'un objecte de tipus Date; al contrari que altres tipus d'objectes JavaScript, els objectes de JavaScript de tipus Date no poden ser representats com a literals.

-
- -

Paràmetres

- -
-

Nota: Quan es crida Date com a constructor amb més d'un argument, si els valors són més grans que el seu rang lògic (per exemple, si es passa 13 com a valor pel mes o 70 com a valor de minuts), Date ajusta el valor adjacent. Per exemple, new Date(2013, 13, 1) és equivalent a new Date(2014, 1, 1), ambdós creen un objecte de tipus Date que representa 2014-02-01 (cal destacar que els mesos es comencen a contar des de zero). El mateix s'aplica per a altres valors: new Date(2013, 2, 1, 0, 70) és equivalent a new Date(2013, 2, 1, 1, 10) i ambdós representen 2013-03-01T01:10:00.

-
- -
-

Nota: Quan es crida Date com a constructor amb més d'un argument, els arguments especificats representen l'hora local. Si es pretèn passar valors UTC, utilitzeu new Date({{jsxref("Date.UTC()", "Date.UTC(...)")}}) amb aquests arguments.

-
- -
-
valor
-
Nombre sencer que representa el nombre de milisegons des de l'1 de gener de 1970 00:00:00 UTC (Època UNIX).
-
dataString
-
Valor String que representa una data. La String ha d'estar en un format reconegut pel mètode {{jsxref("Date.parse()")}} (Marques de temps RFC 2822 compatibles amb el IETF o bé una versió de la ISO8601).
-
any
-
Valor sencer que representa un any. Els valors des de 0 a 99 representen els anys des de 1900 a 1999. Vegeu l'{{anch("Example:_Two_digit_years_map_to_1900_-_1999", "exemple a continuació")}}.
-
mes
-
Valor sencer que representa un mes, començant per zero com a gener i acabant amb 11 com a desembre.
-
dia
-
Opcional. Valor sencer que representa el dia del mes.
-
hora
-
Opcional. Valor sencer que representa l'hora del dia.
-
minut
-
Opcional. Valor sencer que representa els minuts d'un segment de temps.
-
segon
-
Opcional. Valor sencer que representa els segons d'un segment de temps.
-
milisegons
-
Opcional. Valor sencer que representa els milisegons d'un segment de temps.
-
- -

Descripció

- -
    -
  • Si no es proporciona cap argument, el constructor crea un objecte de JavaScript de tipus Date i l'inicialitza amb l'hora actual proporcionada pel sistema.
    • -
  • Si es proporcionen al menys dos arguments, els arguments no proporcionats es consideren o bé 1 (si no s'especifica el dia) o bé 0 per a tots els altres.
    • -
  • L'hora de JavaScript es basa en els milisegons que han passat des de la mitja nit de l'1 de gener de 1970 UTC. Un dia té 86.400.000 milisegons. El rang de l'objecte de JavaScript Date és de -100.000.000 dies a 100.000.000 dies relatius a l'1 de gener de 1970 UTC.
    • -
  • L'objecte de JavaScript Date proporciona el mateix comportament a totes les plataformes on s'utilitzi. El valor de temps es pot passar entre sistemes per a representar el mateix moment del temps i si s'utilitza per a crear un objecte que contingui l'hora local, aquest objecte representarà l'equivalent al temps local.
    • -
  • Alguns dels mètodes de l'objecte de JavaScript Date soporten temps en UTC (universal) i temps local. UTC, també conegut com a Greenwhich Mean Time (GMT), fa referència al temps marcat pel World Time Standard. El temps local és el temps proporcionat per l'ordinador on s'executa el JavaScript.
    • -
  • Si s'invoca la funció de JavaScript Date com una funció (és a dir, sense l'operador {{jsxref("Operators/new", "new")}}), aquesta retornarà una string representant la data i hora actual.
    • -
- -

Propietats

- -
-
{{jsxref("Date.prototype")}}
-
Permet afegir propietats a l'objecte de JavaScript Date.
-
Date.length
-
El valor de Date.length és 7. Aquest és el nombre de arguments que el constructor accepta.
-
- -
{{jsOverrides("Function", "properties", "prototype")}}
- -

Mètodes

- -
-
{{jsxref("Date.now()")}}
-
Retorna el valor numèric corresponent al temps actual - el nombre de milisegons que han passat des de l'1 de gener de 1970 00:00:00 UTC.
-
{{jsxref("Date.parse()")}}
-
Interpreta un string que representa una data i retorna el nombre de milisegons des de l'1 de gener de 1970 00:00:00 UTC.
-
{{jsxref("Date.UTC()")}}
-
Accepta els mateixos paràmetres que el constructor (és a dir, de 2 a 7) i retorna le nombre de milisegons des de l'1 de gener de 1970 00:00:00 UTC.
-
- -
{{jsOverrides("Function", "Methods", "now", "parse", "UTC")}}
- -

Instàncies de JavaScript Date

- -

Totes les instàncies de Date hereten de {{jsxref("Date.prototype")}}. L'objecte prototipus del constructor Date pot ser modificat per a afectar a totes les instàncies de Date.

- -

Mètodes de Date.prototype

- -
{{page('/ca/docs/Web/JavaScript/Reference/Global_Objects/Date/prototype', 'Methods')}}
- -

Exemples

- -

Exemple: Vàries formes de crear un objecte de tipus Date

- -

Els següents exemples mostren diverses maneres de crear dates a JavaScript:

- -
var today = new Date();
-var birthday = new Date('December 17, 1995 03:24:00');
-var birthday = new Date('1995-12-17T03:24:00');
-var birthday = new Date(1995, 11, 17);
-var birthday = new Date(1995, 11, 17, 3, 24, 0);
-
- -

Exemple: Dos dígits per representar els anys 1900 a 1999

- -

Per a crear i obtindre dates entre els anys 0 i 99 es recomana emprar els mètodes {{jsxref("Date.prototype.setFullYear()")}} i {{jsxref("Date.prototype.getFullYear()")}}.

- -
var date = new Date(98, 1); // Sun Feb 01 1998 00:00:00 GMT+0000 (GMT)
-
-// Deprecated method, 98 maps to 1998 here as well
-date.setYear(98);           // Sun Feb 01 1998 00:00:00 GMT+0000 (GMT)
-
-date.setFullYear(98);       // Sat Feb 01 0098 00:00:00 GMT+0000 (BST)
-
- -

Exemple: Calcular el temps passat

- -

Els exemples següents mostren com determinar el temps passat entre dues dates a JavaScript:

- -
// utilitzant objectes Date
-var start = Date.now();
-
-// L'event a cronometra va aquí:
-doSomethingForALongTime();
-var end = Date.now();
-var elapsed = end - start; // temps transcorregut en milisegons
-
- -
// utilitzant mètodes que formen part del sistema
-var start = new Date();
-
-// the event to time goes here:
-doSomethingForALongTime();
-var end = new Date();
-var elapsed = end.getTime() - start.getTime(); // temps transcorregut en milisegons
-
- -
// cronometra una funció i retorna el que retorni
-function printElapsedTime(fTest) {
-  var nStartTime = Date.now(),
-      vReturn = fTest(),
-      nEndTime = Date.now();
-
-  console.log('Temps transcorregut: ' + String(nEndTime - nStartTime) + ' miliseconds');
-  return vReturn;
-}
-
-yourFunctionReturn = printElapsedTime(yourFunction);
-
- -
-

Nota: En navegadors que suporten la característica de temps en alta resolució de la {{domxref("window.performance", "API d'Alt Rendiment Web", "", 1)}}, {{domxref("Performance.now()")}} pot proporcionar mesures de temps més concises i fiables pel temps transcorregut que {{jsxref("Date.now()")}}.

-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.9', 'Date')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date-objects', 'Date')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Informes de compatiblitat amb navegadors

- - - -

Notes específiques de Internet Explorer

- -

Internet Explorer 8 no suporta el format de dates ISO8601.

diff --git a/files/ca/web/javascript/referencia/objectes_globals/date/now/index.html b/files/ca/web/javascript/referencia/objectes_globals/date/now/index.html deleted file mode 100644 index c3ef05fa86..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/date/now/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: Date.now() -slug: Web/JavaScript/Referencia/Objectes_globals/Date/now -translation_of: Web/JavaScript/Reference/Global_Objects/Date/now ---- -
{{JSRef("Global_Objects", "Date")}}
- -

Resum

- -

El mètode Date.now() retorna el nombre de milisegons que han passat des de l'1 de gener de 1970 00:00:00 UTC.

- -

Sintaxi

- -
var timeInMs = Date.now();
- -

Paràmetres

- -

Cap.

- -

Descripció

- -

El mètode now() retorna el nombre de method returns el nombre de milisegons que han passat des de l'1 de gener de 1970 00:00:00 UTC fins al moment actual representat en un  {{jsxref("Global_Objects/Number", "Nombre")}}.

- -

Com que now() és un mètode estàtic de {{jsxref("Global_Objects/Date", "Date")}}, sempre es crida com a Date.now().

- -

Polyfill

- -

Aquest mètode va ser estandaritzat a la cinquena edició de l'ECMA-262. Els motors que encara no hagin sigut actualitzats per a suportar aquest mètode poden utilitzar el bocí de codi següent per a paliar l'absència d'aquest mètode:

- -
if (!Date.now) {
-  Date.now = function now() {
-    return new Date().getTime();
-  };
-}
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES5.1', '#sec-15.9.4.4', 'Date.now')}}{{Spec2('ES5.1')}}Definició inicial. Implementat a JavaScript 1.5.
{{SpecName('ES6', '#sec-date.now', 'Date.now')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterístiquesChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome("5")}}{{CompatGeckoDesktop("1.9")}}{{CompatIE("9")}}{{CompatOpera("10.50")}}{{CompatSafari("4")}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterístiquesAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
- - - - - - -
Suport bàsic
- 		{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Basat en la  taula de compatibilitat de Kangax.

- -

Vegeu també

- -
    -
  • {{domxref("Performance.now()")}} — proporciona marques de temps amb una resolució submilimètrica per a utilitzar al mesurar el rendiment de pàgines web
    • -
  • {{domxref("console.time()")}} / {{domxref("console.timeEnd()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/date/prototype/index.html b/files/ca/web/javascript/referencia/objectes_globals/date/prototype/index.html deleted file mode 100644 index 91e2dff38f..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/date/prototype/index.html +++ /dev/null @@ -1,222 +0,0 @@ ---- -title: Date.prototype -slug: Web/JavaScript/Referencia/Objectes_globals/Date/prototype -translation_of: Web/JavaScript/Reference/Global_Objects/Date -translation_of_original: Web/JavaScript/Reference/Global_Objects/Date/prototype ---- -
{{JSRef("Global_Objects", "Date")}}
- -

Resum

- -

La propietat Date.prototype representa el prototipus per al constructor {{jsxref("Global_Objects/Date", "Date")}}.

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

Descripció

- -

Les instàncies de JavaScript de {{jsxref("Global_Objects/Date", "Date")}} hereten de Date.prototype. L'objecte prototipus del constructor pot modificar-se per a afectar a les propietats i mètodes heretats per les instàncies de {{jsxref("Global_Objects/Date", "Date")}}.

- -

Per a compatibilitat amb càlculs amb milenis (en altres paraules, per a tindre en compte l'any 2000), sempre s'hauria d'especificar l'any sencer, per exemple, 1998, en comptes de 98. Per a ajudar a proveïr l'any sencer JavaScript inclou els mètodes {{jsxref("Date.prototype.getFullYear()", "getFullYear()")}}, {{jsxref("Date.prototype.setFullYear()", "setFullYear()")}}, {{jsxref("Date.prototype.getUTCFullYear()", "getUTCFullYear()")}} i {{jsxref("Date.prototype.setUTCFullYear()", "setUTCFullYear()")}}.

- -

Propietats

- -
-
Date.prototype.constructor
-
Retorna la funció que va crear la instància. És a dir, per defecte el constructor {{jsxref("Global_Objects/Date", "Date")}}.
-
- -
{{jsOverrides("Object", "properties", "constructor")}}
- -

Mètodes

- -

Getter

- -
-
{{jsxref("Date.prototype.getDate()")}}
-
Retorna el dia del mes (1-31) per a la data especificada, en temps local.
-
{{jsxref("Date.prototype.getDay()")}}
-
Retorna el dia de la setmana (0-6) per a la data especificada, en temps local.
-
{{jsxref("Date.prototype.getFullYear()")}}
-
Retorna l'any (4 digits per a anys de 4 digits) per a la data especificada, en temps local.
-
{{jsxref("Date.prototype.getHours()")}}
-
Retorna l'hora (0-23) per a la data especificada, en temps local.
-
{{jsxref("Date.prototype.getMilliseconds()")}}
-
Retorna els milisegons (0-999) per a la data especificada, en temps local.
-
{{jsxref("Date.prototype.getMinutes()")}}
-
Retorna els minuts (0-59) per a la data especificada, en temps local.
-
{{jsxref("Date.prototype.getMonth()")}}
-
Retorna el mes (0-11) per a la data especificada, en temps local.
-
{{jsxref("Date.prototype.getSeconds()")}}
-
Retorna els segons (0-59) per a la data especificada, en temps local.
-
{{jsxref("Date.prototype.getTime()")}}
-
Retorna un valor numèric per a la data especificada que representa la data especificada com al nombre de milisegons que han passat des de l'1 de gener de 1970, 00:00:00 UTC (negatiu per a dates anteriors).
-
{{jsxref("Date.prototype.getTimezoneOffset()")}}
-
Retorna la diferència d'ús horari en minuts del temps local.
-
{{jsxref("Date.prototype.getUTCDate()")}}
-
Retorna el dia del mes (1-31) per a la data especificada en temps universal (UTC).
-
{{jsxref("Date.prototype.getUTCDay()")}}
-
Retorna el dia de la setmana (0-6) per a la data especificada en temps universal (UTC).
-
{{jsxref("Date.prototype.getUTCFullYear()")}}
-
Retorna l'any (4 digits per a anys de 4 digits) per a la data especificada en temps universal (UTC).
-
{{jsxref("Date.prototype.getUTCHours()")}}
-
Retorna l'hora (0-23) per a la data especificada en temps universal (UTC).
-
{{jsxref("Date.prototype.getUTCMilliseconds()")}}
-
Retorna els milisegons (0-999) per a la data especificada en temps universal (UTC).
-
{{jsxref("Date.prototype.getUTCMinutes()")}}
-
Retorna els minuts (0-59) per a la data especificada en temps universal (UTC).
-
{{jsxref("Date.prototype.getUTCMonth()")}}
-
Retorna el mes (0-11) per a la data especificada en temps universal (UTC).
-
{{jsxref("Date.prototype.getUTCSeconds()")}}
-
Retorna els segons (0-59) per a la data especificada en temps universal (UTC).
-
{{jsxref("Date.prototype.getYear()")}} {{deprecated_inline}}
-
Retorna l'any (normalment 2-3 digits) per a la data especificada, en temps local. En comptes d'aquest mètode, utilitzeu  {{jsxref("Date.prototype.getFullYear()", "getFullYear()")}}.
-
- -

Setter

- -
-
{{jsxref("Date.prototype.setDate()")}}
-
Assigna el dia del mes per a la data especificada, en temps local.
-
{{jsxref("Date.prototype.setFullYear()")}}
-
Assigna l'any sencer (és a dir, de 4 digits per a un any amb 4 digits) per a la data especificada, en temps local.
-
{{jsxref("Date.prototype.setHours()")}}
-
Assigna l'hora per a la data especificada, en temps local.
-
{{jsxref("Date.prototype.setMilliseconds()")}}
-
Assigna els milisegons per a la data especificada, en temps local.
-
{{jsxref("Date.prototype.setMinutes()")}}
-
Assigna els minuts per a la data especificada, en temps local.
-
{{jsxref("Date.prototype.setMonth()")}}
-
Assigna el mes per a la data especificada, en temps local.
-
{{jsxref("Date.prototype.setSeconds()")}}
-
Assigna els segons per a la data especificada, en temps local.
-
{{jsxref("Date.prototype.setTime()")}}
-
Assigna la data que representarà la instància de l'objecte {{jsxref("Global_Objects/Date", "Date")}} al temps representat pel nombre de milisegons passats des de l'1 de gener de 1970, 00:00:00 UTC. Permet nombres negatius per a temps anteriors a aquesta data.
-
{{jsxref("Date.prototype.setUTCDate()")}}
-
Assigna el dia del mes per a la data especificada en temps universal (UTC).
-
{{jsxref("Date.prototype.setUTCFullYear()")}}
-
Assigna l'any sencer (és a dir, 4 digits per a anys de 4 digits) per a la data especificada en temps universal (UTC).
-
{{jsxref("Date.prototype.setUTCHours()")}}
-
Assigna l'hora per a la data especificada en temps universal (UTC).
-
{{jsxref("Date.prototype.setUTCMilliseconds()")}}
-
Assigna els milisegons per a la data especificada en temps universal (UTC).
-
{{jsxref("Date.prototype.setUTCMinutes()")}}
-
Assigna els minuts per a la data especificada en temps universal (UTC).
-
{{jsxref("Date.prototype.setUTCMonth()")}}
-
Assigna el mes per a la data especificada en temps universal (UTC).
-
{{jsxref("Date.prototype.setUTCSeconds()")}}
-
Assigna els segons per a la data especificada en temps universal (UTC).
-
{{jsxref("Date.prototype.setYear()")}} {{deprecated_inline}}
-
Assigna l'any (normalment 2-3 digits) per a la data especificada en temps local. Utilitzeu {{jsxref("Date.prototype.setFullYear()", "setFullYear()")}} en comptes d'aquest mètode.
-
- -

Getters amb conversió

- -
-
{{jsxref("Date.prototype.toDateString()")}}
-
Retorna la part part de data de {{jsxref("Global_Objects/Date", "Date")}} com a string inteligible per humans.
-
{{jsxref("Date.prototype.toISOString()")}}
-
Converteix una data a un string seguint el Format Extés del ISO 8601.
-
{{jsxref("Date.prototype.toJSON()")}}
-
Retorna un string que representa l'objecte {{jsxref("Global_Objects/Date", "Date")}} utilitzant  {{jsxref("Date.prototype.toISOString()", "toISOString()")}}. Ideat per a ser usat per {{jsxref("JSON.stringify()")}}.
-
{{jsxref("Date.prototype.toGMTString()")}} {{deprecated_inline}}
-
Retorna un string que representa l'objecte {{jsxref("Global_Objects/Date", "Date")}} basat en la zona horària GMT (UT). Utilitzeu {{jsxref("Date.prototype.toUTCString()", "toUTCString()")}} en comptes d'aquest mètode.
-
{{jsxref("Date.prototype.toLocaleDateString()")}}
-
Retorna un string que representa la part de la data amb temps local, basat en la configuració del sistema.
-
{{jsxref("Date.prototype.toLocaleFormat()")}} {{non-standard_inline}}
-
Converteix una data a string tot utilitzant un format string.
-
{{jsxref("Date.prototype.toLocaleString()")}}
-
Retorna un string que representa la data tenint en compte el temps local. Sobreescriu el mètode {{jsxref("Object.prototype.toLocaleString()")}}.
-
{{jsxref("Date.prototype.toLocaleTimeString()")}}
-
Retorna un string que representa la part de temps de la data local basada en la configuració del sistema.
-
{{jsxref("Date.prototype.toSource()")}} {{non-standard_inline}}
-
Retorna un string que representa el codi font per a un objecte {{jsxref("Global_Objects/Date", "Date")}} equivalent; aquest valor pot emprar-se per a crear un nou objecte. Sobreescriu el mètode {{jsxref("Object.prototype.toSource()")}}.
-
{{jsxref("Date.prototype.toString()")}}
-
Retorna un string que representa l'objecte {{jsxref("Global_Objects/Date", "Date")}} especificat. Sobreescriu el mètode {{jsxref("Object.prototype.toString()")}}.
-
{{jsxref("Date.prototype.toTimeString()")}}
-
Retorna la part de temps de l'objecte {{jsxref("Global_Objects/Date", "Date")}} com a string comprensible per humans.
-
{{jsxref("Date.prototype.toUTCString()")}}
-
Converteix una data a un string utilitzant la zona horària UTC.
-
{{jsxref("Date.prototype.valueOf()")}}
-
Retorna el valor primitiu d'un objecte {{jsxref("Global_Objects/Date", "Date")}}. Sobreescriu el mètode {{jsxref("Object.prototype.valueOf()")}}.
-
- -
{{jsOverrides("Object", "methods", "getDate", "getDay", "getFullYear", "getHours", "getMilliseconds", "getMinutes", "getMonth", "getSeconds", "getTime", "getTimezoneOffset", "getUTCDate", "getUTCDay", "getUTCFullYear", "getUTCHours", "getUTCMilliseconds", "getUTCMinutes", "getUTCMonth", "getUTCSeconds", "getYear", "setdate", "setFullYear", "setHours", "setMilliseconds", "setMinutes", "setMontth", "setSeconds", "setTime", "setUTCDate", "setUTCFullYear", "setUTCHours", "setUTCMilliseconds", "setUTCMinutes", "setUTCMonth", "setUTCSeconds", "setYear", "toDateString", "toGMTString", "toLocaleDateString", "toLocaleFormat", "toLocaleString", "toLocaleTimeString", "toSource", "toString", "toTimeString", "toUTCString", "valueOf")}}
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.9.5', 'Date.prototype')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-properties-of-the-date-prototype-object', 'Date.prototype')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
diff --git a/files/ca/web/javascript/referencia/objectes_globals/date/setdate/index.html b/files/ca/web/javascript/referencia/objectes_globals/date/setdate/index.html deleted file mode 100644 index 746de134fe..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/date/setdate/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: Date.prototype.setDate() -slug: Web/JavaScript/Referencia/Objectes_globals/Date/setDate -translation_of: Web/JavaScript/Reference/Global_Objects/Date/setDate ---- -
{{JSRef}}
- -

El mètode setDate() assigna el dia de l'objecte {{jsxref("Date")}} relatiu al principi del mes assignat en aquell moment.

- -

Sintaxi

- -
objecteData.setDate(dia)
- -

Paràmetres

- -
-
dia
-
Un nombre sencer que representa el dia del mes.
-
- -

Valor retornat

- -

El valor retornat per setDate() és el nombre de milisegons que han passat des de l'ú de gener de 1970 00:00:00 UTC de la data resultant (l'objecte {{jsxref("Date")}} també canvia).

- -

Descripció

- -

Si es passa un paràmetre que està fora del rang esperat, el mètode setDate() actualitza els altres paràmetres per a acceptar el nombre. Per exemple, si es passa 0 com a dia, la data representarà l'últim dia del mes anterior.

- -

Exemples

- -

Utilitzar setDate()

- -
var elGranDia = new Date(1962, 6, 7); // 1962-07-07
-elGranDia.setDate(24);  // 1962-07-24
-elGranDia.setDate(32);  // 1962-08-01
-elGranDia.setDate(22);  // 1962-08-22
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.9.5.36', 'Date.prototype.setDate')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.setdate', 'Date.prototype.setDate')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Date.prototype.getDate()")}}
    • -
  • {{jsxref("Date.prototype.setUTCDate()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/date/setfullyear/index.html b/files/ca/web/javascript/referencia/objectes_globals/date/setfullyear/index.html deleted file mode 100644 index c29d56ca4e..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/date/setfullyear/index.html +++ /dev/null @@ -1,128 +0,0 @@ ---- -title: Date.prototype.setFullYear() -slug: Web/JavaScript/Referencia/Objectes_globals/Date/setFullYear -translation_of: Web/JavaScript/Reference/Global_Objects/Date/setFullYear ---- -
{{JSRef}}
- -

El mètode setFullYear() assigna l'any sencerr per a la data especificada, d'acord a l'hora local. Retorna una nova marca de temps.

- -

Sintaxi

- -
objecteData.setFullYear(any[, mes[, dia]])
- -

Paràmetres

- -
-
any
-
Un nombre sencer que representa el valor numèric de l'any, per exemple, 1995.
-
mes
-
Un nombre sencer entre 0 i 11 que representa el mes.
-
dia
-
Opcional. Un nombre sencer entre 1 i 31 que representa el dia del mes.
-
- -

Valor retornat

- -

Una nova marca de temps amb el valor de l'objecte actual.

- -

Descripció

- -

Si no s'especifica el paràmetre dia s'utilitza el valor retornat pels mètodes {{jsxref("Date.prototype.getMonth()", "getMonth()")}} i {{jsxref("Date.prototype.getDate()", "getDate()")}}.

- -

Si es passa un paràmetre que està fora del rang esperat, el mètode UTC() actualitza els altres paràmetres per a acceptar el nombre. Per exemple, si es passa 15 com a mes, l'any serà incrementat en 1 (any + 1), i s'emprarà 3 com a mes.

- -

Exemples

- -

Utilitzar setFullYear()

- -
var elGranDia = new Date();
-elGranDia.setFullYear(1997);
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.3.
{{SpecName('ES5.1', '#sec-15.9.5.40', 'Date.prototype.setFullYear')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.setfullyear', 'Date.prototype.setFullYear')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Date.prototype.getUTCFullYear()")}}
    • -
  • {{jsxref("Date.prototype.setUTCFullYear()")}}
    • -
  • {{jsxref("Date.prototype.setYear()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/date/sethours/index.html b/files/ca/web/javascript/referencia/objectes_globals/date/sethours/index.html deleted file mode 100644 index 7f660ba344..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/date/sethours/index.html +++ /dev/null @@ -1,129 +0,0 @@ ---- -title: Date.prototype.setHours() -slug: Web/JavaScript/Referencia/Objectes_globals/Date/setHours -translation_of: Web/JavaScript/Reference/Global_Objects/Date/setHours ---- -
{{JSRef}}
- -

El mètode setHours() assigna l'hora per a una data especificada d'acord a l'hora local, i retorna el nombre de milisegons que han passat des de l'u de gener de 1970 00:00:00 UTC fins al temps representat per la instància de {{jsxref("Date")}} actualitzada.

- -

Sintaxi

- -
objecteData.setHours(hores[, minuts[, segons[, milisegons]]])
- -

Versions anteriors a JavaScript 1.3

- -
objecteData.setHours(hores)
- -

Paràmetres

- -
-
hores
-
Un nombre sencer entre 0 i 23, que representa l'hora.
-
minuts
-
Opcional. Un nombre sencer entre 0 i 59 que representa els minuts.
-
segons
-
Opcional. Un nombre sencer entre 0 i 59 que representa els segons.
-
milisegons
-
Opcional. Un nombre sencer entre 0 i 999 que representa els milisegons.
-
- -

Descripció

- -

Si no s'especifiquen els paràmetres minuts, segons i milisegons s'utilitzen els valors retornats per {{jsxref("Date.prototype.getMinutes()", "getMinutes()")}}, {{jsxref("Date.prototype.getSeconds()", "getSeconds()")}} i {{jsxref("Date.prototype.getMilliseconds()", "getMilliseconds()")}}.

- -

Si es passa un paràmetre que està fora del rang esperat, el mètode setHours() actualitza els altres paràmetres per a acceptar el nombre. Per exemple, si es passa 100 com a segons, els minuts seran incrementats en 1 (minuts + 1), i s'emprarà 40 com a segons.

- -

Exemples

- -

Utilitzar setHours()

- -
var elGranDia = new Date();
-elGranDia.setHours(7);
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.9.5.34', 'Date.prototype.setHours')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.sethours', 'Date.prototype.setHours')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Date.prototype.getHours()")}}
    • -
  • {{jsxref("Date.prototype.setUTCHours()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/date/setmilliseconds/index.html b/files/ca/web/javascript/referencia/objectes_globals/date/setmilliseconds/index.html deleted file mode 100644 index 53dc451ad4..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/date/setmilliseconds/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: Date.prototype.setMilliseconds() -slug: Web/JavaScript/Referencia/Objectes_globals/Date/setMilliseconds -translation_of: Web/JavaScript/Reference/Global_Objects/Date/setMilliseconds ---- -
{{JSRef}}
- -

El mètode setMilliseconds() assigna els milisegons per a una data especificada d'acord a l'hora local.

- -

Sintaxi

- -
objecteData.setMilliseconds(milisegons)
- -

Paràmetres

- -
-
milisegons
-
Un nombre sencer entre 0 i 999 que representa els milisegons.
-
- -

Descripció

- -

Si es passa un paràmetre que està fora del rang esperat, el mètode setMilliseconds() actualitza els altres paràmetres per a acceptar el nombre. Per exemple, si es passa 1005 com a milisegons, els segonsseran incrementats en 1 (segons + 1), i s'emprarà 5 com a milisegons.

- -

Exemples

- -

Utilitzar setMilliseconds()

- -
var elGranDia= new Date();
-elGranDia.setMilliseconds(100);
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComenataris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.3.
{{SpecName('ES5.1', '#sec-15.9.5.28', 'Date.prototype.setMilliseconds')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.setmilliseconds', 'Date.prototype.setMilliseconds')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Date.prototype.getMilliseconds()")}}
    • -
  • {{jsxref("Date.prototype.setUTCMilliseconds()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/date/setminutes/index.html b/files/ca/web/javascript/referencia/objectes_globals/date/setminutes/index.html deleted file mode 100644 index 7dba61cade..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/date/setminutes/index.html +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: Date.prototype.setMinutes() -slug: Web/JavaScript/Referencia/Objectes_globals/Date/setMinutes -translation_of: Web/JavaScript/Reference/Global_Objects/Date/setMinutes ---- -
{{JSRef}}
- -

El mètode setMinutes() assigna els minuts a una data especificada, d'acord a l'hora local.

- -

Sintaxi

- -
objecteData.setMinutes(minuts[, segons[, milisegons]])
- -

Versions anteriors a JavaScript 1.3

- -
objecteData.setMinutes(minuts)
- -

Paràmetres

- -
-
minuts
-
Un nombre sencer entre 0 i 59 que representa els minuts.
-
segons
-
Opcional. Un nombre sencer entre 0 i 59 que representa els segons.
-
milisegons
-
Opcional. Un nombre sencer entre 0 i 999 que representa els milisegons.
-
- -

Descripció

- -

Si no s'especifiquen els paràmetres minuts, segons i milisegons s'utilitzen els valors retornats per {{jsxref("Date.prototype.getSeconds()", "getSeconds()")}} i {{jsxref("Date.prototype.getMilliseconds()", "getMilliseconds()")}}.

- -

Si es passa un paràmetre que està fora del rang esperat, el mètode setMinutes() actualitza els altres paràmetres per a acceptar el nombre. Per exemple, si es passa 100 com a segons, els minuts seran incrementats en 1 (minuts + 1), i s'emprarà 40 com a segons.

- -

Exemples

- -

Utilitzar setMinutes()

- -
var elGranDia = new Date();
-elGranDia.setMinutes(45);
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.9.5.32', 'Date.prototype.setMinutes')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.setminutes', 'Date.prototype.setMinutes')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Date.prototype.getMinutes()")}}
    • -
  • {{jsxref("Date.prototype.setUTCMinutes()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/date/setmonth/index.html b/files/ca/web/javascript/referencia/objectes_globals/date/setmonth/index.html deleted file mode 100644 index a84f51df7c..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/date/setmonth/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: Date.prototype.setMonth() -slug: Web/JavaScript/Referencia/Objectes_globals/Date/setMonth -translation_of: Web/JavaScript/Reference/Global_Objects/Date/setMonth ---- -
{{JSRef}}
- -

El mètode setMonth() assigna el mes per a una data especificada d'acord a l'any assignat previament.

- -

Sintaxi

- -
objecteData.setMonth(mes[, dia])
- -

Versions anteriors a JavaScript 1.3

- -
objecteData.setMonth(mes)
- -

Paràmetres

- -
-
mes
-
Un nombre sencer entre 0 i 11 que representa els mesos des de gener fins a desembre
-
dia
-
Opcional. Un nombre sencer entre 1 i 31 que representa el dia del mes.
-
 
-
- -

Descripció

- -

Si no s'especifica el paràmetre dia s'utilitza el valor retornat pel mètode {{jsxref("Date.prototype.getDate()", "getDate()")}}.

- -

Si es passa un paràmetre que està fora del rang esperat, el mètode setMonth() actualitza els altres paràmetres per a acceptar el nombre. Per exemple, si es passa 15 com a mes, l'any serà incrementat en 1 (any + 1), i s'emprarà 3 com a mes.

- -

Exemples

- -

Utilitzar setMonth()

- -
var elGranDia = new Date();
-elGranDia.setMonth(6);
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.9.5.38', 'Date.prototype.setMonth')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.setmonth', 'Date.prototype.setMonth')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Date.prototype.getMonth()")}}
    • -
  • {{jsxref("Date.prototype.setUTCMonth()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/date/setseconds/index.html b/files/ca/web/javascript/referencia/objectes_globals/date/setseconds/index.html deleted file mode 100644 index 60ea2c0ae3..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/date/setseconds/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: Date.prototype.setSeconds() -slug: Web/JavaScript/Referencia/Objectes_globals/Date/setSeconds -translation_of: Web/JavaScript/Reference/Global_Objects/Date/setSeconds ---- -
{{JSRef}}
- -

El mètode setSeconds() assigna els segons per a una data especificada, en temps local.

- -

Sintaxi

- -
objecteData.setSeconds(segons[, milisegons])
- -

Versions anteriors a JavaScript 1.3

- -
objecteData.setSeconds(segons)
- -

Paràmetres

- -
-
segons
-
Un nombre sencer entre 0 i 59 que representa els segons.
-
milisegons
-
Opcional. Un nombre sencer entre 0 i 999 que representa els milisegons.
-
- -

Descripció

- -

Si no s'especifica el paràmetre milisegons s'utilitza el valor retornat pel mètode {{jsxref("Date.prototype.getMilliseconds()", "getMilliseconds()")}}.

- -

Si es passa un paràmetre que està fora del rang esperat, el mètode setSeconds() actualitza els altres paràmetres per a acceptar el nombre. Per exemple, si es passa 100 com a segons, els minuts seran incrementats en 1 (minuts + 1), i s'emprarà 40 com a segons.

- -

Exemples

- -

Utilitzar setSeconds()

- -
var elGranDia = new Date();
-elGranDia.setSeconds(30);
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacionsEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.9.5.30', 'Date.prototype.setSeconds')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.setseconds', 'Date.prototype.setSeconds')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Date.prototype.getSeconds()")}}
    • -
  • {{jsxref("Date.prototype.setUTCSeconds()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/date/settime/index.html b/files/ca/web/javascript/referencia/objectes_globals/date/settime/index.html deleted file mode 100644 index 9774f3ee4c..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/date/settime/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: Date.prototype.setTime() -slug: Web/JavaScript/Referencia/Objectes_globals/Date/setTime -translation_of: Web/JavaScript/Reference/Global_Objects/Date/setTime ---- -
{{JSRef}}
- -

El mètode setTime() configura l'objecte {{jsxref("Date")}} amb un nombre que representa un temps en milisegons que han passat des de la mitjanit de l'ú de gener de 1970, en temps universal.

- -

Sintaxi

- -
objecteData.setTime(temps)
- -

Paràmetres

- -
-
temps
-
Un nombre sencer que representa el nombre de milisegons que han passat des de l'1 de gener de 1970 00:00:00 UTC.
-
- -

Descripció

- -

Utilitzeu el mètode setTime() per a assignar una data i hora a un objecte de tipus {{jsxref("Date")}}.

- -

Exemples

- -

Utilitzar setTime()

- -
var elGranDia = new Date('July 1, 1999');
-var elMateixGranDia = new Date();
-elMateixGranDia.setTime(elGranDia.getTime());
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.9.5.27', 'Date.prototype.setTime')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.settime', 'Date.prototype.setTime')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Date.prototype.getTime()")}}
    • -
  • {{jsxref("Date.prototype.setUTCHours()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/date/setutcdate/index.html b/files/ca/web/javascript/referencia/objectes_globals/date/setutcdate/index.html deleted file mode 100644 index 109178f66a..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/date/setutcdate/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: Date.prototype.setUTCDate() -slug: Web/JavaScript/Referencia/Objectes_globals/Date/setUTCDate -translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCDate ---- -
{{JSRef}}
- -

El mètode setUTCDate() assigna el dia del mes per a una data especificada, en temps universal.

- -

Sintaxi

- -
objecteData.setUTCDate(dia)
- -

Paràmetres

- -
-
dia
-
Un nombre sencer de 1 a 31, que representa el dia del mes.
-
- -

Descripció

- -

If a parameter you specify is outside of the expected range, setUTCDate() attempts to update the date information in the {{jsxref("Date")}} object accordingly. For example, if you use 40 for dayValue, and the month stored in the {{jsxref("Date")}} object is June, the day will be changed to 10 and the month will be incremented to July.

- -

Si es passa un paràmetre que està fora del rang esperat, el mètode setUTCDate() actualitza els altres paràmetres per a acceptar el nombre. Per exemple, si es passa 40 com a dia, i el mes especificat a l'objecte {{jsxref("Date")}} és juny, el dia es canviarà a 10 i el mes serà incrementat a juliol.

- -

Exemples

- -

Utilitzar setUTCDate()

- -
var elGranDia = new Date();
-elGranDia.setUTCDate(20);
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.3.
{{SpecName('ES5.1', '#sec-15.9.5.37', 'Date.prototype.setUTCDate')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.setutcdate', 'Date.prototype.setUTCDate')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Date.prototype.getUTCDate()")}}
    • -
  • {{jsxref("Date.prototype.setDate()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/date/setutcfullyear/index.html b/files/ca/web/javascript/referencia/objectes_globals/date/setutcfullyear/index.html deleted file mode 100644 index 55185a431b..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/date/setutcfullyear/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: Date.prototype.setUTCFullYear() -slug: Web/JavaScript/Referencia/Objectes_globals/Date/setUTCFullYear -translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCFullYear ---- -
{{JSRef}}
- -

El mètode setUTCFullYear() assigna l'any sencer a la data especificada d'acord amb el temps universal.

- -

Sintaxi

- -
objecteData.setUTCFullYear(any[, mes[, dia]])
- -

Paràmetres

- -
-
any
-
Un nombre sencer que representa el valor numèric de l'any, per exemple, 1995.
-
mes
-
Un nombre sencer entre 0 i 11 que representa el mes.
-
dia
-
Opcional. Un nombre sencer entre 1 i 31 que representa el dia del mes. Si s'especifica el paràmetre dia, també s'ha d'especificar el paràmetre mes.
-
- -

Descripció

- -

Si no s'especifica els paràmetres mes o dia s'utilitza el valor retornat pels mètodes getMonth() i getDate().

- -

Si es passa un paràmetre que està fora del rang esperat, el mètode setUTCFullYear() actualitza els altres paràmetres per a acceptar el nombre. Per exemple, si es passa 15 com a mes, l'any serà incrementat en 1 (any + 1), i s'emprarà 3 com a mes.

- -

Exemples

- -

Utilitzar setUTCFullYear()

- -
var elGranDia = new Date();
-elGranDia.setUTCFullYear(1997);
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.3.
{{SpecName('ES5.1', '#sec-15.9.5.41', 'Date.prototype.setUTCFullYear')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.setutcfullyear', 'Date.prototype.setUTCFullYear')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Date.prototype.getUTCFullYear()")}}
    • -
  • {{jsxref("Date.prototype.setFullYear()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/date/setutchours/index.html b/files/ca/web/javascript/referencia/objectes_globals/date/setutchours/index.html deleted file mode 100644 index 3c75ea903c..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/date/setutchours/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: Date.prototype.setUTCHours() -slug: Web/JavaScript/Referencia/Objectes_globals/Date/setUTCHours -translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCHours ---- -
{{JSRef}}
- -

El mètode setUTCHours() assigna l'hora per a una data especificada d'acord al temps universal, i retorna el nombre de milisegons que han passat des de l'ú de gener de 1970 00:00:00 UTC fins al temps representat per l'instància {{jsxref("Date")}} actualitzada.

- -

Sintaxi

- -
objecteData.setUTCHours(hores[, minuts[, segons[, milisegons]]])
- -

Paràmetres

- -
-
hores
-
Un nombre sencer entre 0 i 23, que representa l'hora.
-
minuts
-
Opcional. Un nombre sencer entre 0 i 59 que representa els minuts.
-
segons
-
Oppcional. Un nombre sencer entre 0 i 59 que representa els segons. Si s'especifica segons també s'ha d'expecificar minuts.
-
milisegons
-
Opcional. Un nombre sencer entre 0 i 999 que representa els milisegons. Si s'especifica milisegons també s'han d'especificar minuts i segons.
-
- -

Descripció

- -

Si no s'especifica els paràmetres minuts, segons o milisegons s'utilitza el valor retornat pels mètodes {{jsxref("Date.prototype.getUTCMinutes()", "getUTCMinutes()")}}, {{jsxref("Date.prototype.getUTCSeconds()", "getUTCSeconds()")}}, i {{jsxref("Date.prototype.getUTCMilliseconds()", "getUTCMilliseconds()")}}.

- -

Si es passa un paràmetre que està fora del rang esperat, el mètode setUTCHours() actualitza els altres paràmetres per a acceptar el nombre. Per exemple, si es passa 100 com a segons, els minuts seran incrementats en 1 (minuts + 1), i s'emprarà 40 com a segons.

- -

Exemples

- -

Utilitzar setUTCHours()

- -
var elGranDia = new Date();
-elGranDia.setUTCHours(8);
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.3.
{{SpecName('ES5.1', '#sec-15.9.5.35', 'Date.prototype.setUTCHours')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.setutchours', 'Date.prototype.setUTCHours')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Date.prototype.getUTCHours()")}}
    • -
  • {{jsxref("Date.prototype.setHours()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/date/setutcmilliseconds/index.html b/files/ca/web/javascript/referencia/objectes_globals/date/setutcmilliseconds/index.html deleted file mode 100644 index e3265e247f..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/date/setutcmilliseconds/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: Date.prototype.setUTCMilliseconds() -slug: Web/JavaScript/Referencia/Objectes_globals/Date/setUTCMilliseconds -translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCMilliseconds ---- -
{{JSRef}}
- -

El mètode setUTCMilliseconds() assigna els milisegons a la data sepecificada d'acord l'hora local.

- -

Sintaxi

- -
objecteData.setUTCMilliseconds(milisegons)
- -

Paràmetres

- -
-
milisegons
-
Un nombre sencer entre 0 i 999 que representa els milisegons.
-
- -

Descripció

- -

Si es passa un paràmetre que està fora del rang esperat, el mètode setUTCMilliseconds() actualitza els altres paràmetres per a acceptar el nombre. Per exemple, si es passa 1100 com a milisegons, els segons seran incrementats en 1 (segons + 1), i s'emprarà 100 com a milisegons.

- -

Exemples

- -

Utilitzar setUTCMilliseconds()

- -
var elGranDia = new Date();
-elGranDia.setUTCMilliseconds(500);
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.3.
{{SpecName('ES5.1', '#sec-15.9.5.29', 'Date.prototype.setUTCMilliseconds')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.setutcmilliseconds', 'Date.prototype.setUTCMilliseconds')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Date.prototype.getUTCMilliseconds()")}}
    • -
  • {{jsxref("Date.prototype.setMilliseconds()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/date/setutcminutes/index.html b/files/ca/web/javascript/referencia/objectes_globals/date/setutcminutes/index.html deleted file mode 100644 index 5551364e52..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/date/setutcminutes/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: Date.prototype.setUTCMinutes() -slug: Web/JavaScript/Referencia/Objectes_globals/Date/setUTCMinutes -translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCMinutes ---- -
{{JSRef}}
- -

El mètode setUTCMinutes() assigna els minuts per a la data especificada, segons l'hora local.

- -

Sintaxi

- -
objecteData.setUTCMinutes(minuts[, segons[, milisegons]])
- -

Paràmetres

- -
-
minuts
-
Un nombre sencer entre 0 i 59, que representa els minuts.
-
segons
-
Oppcional. Un nombre sencer entre 0 i 59 que representa els segons. Si s'especifica segons també s'ha d'expecificar minuts.
-
milisegons
-
Opcional. Un nombre sencer entre 0 i 999 que representa els milisegons. Si s'especifica milisegons també s'han d'especificar minuts i segons.
-
- -

Descripció

- -

Si no s'especifica els paràmetres segons o milisegons s'utilitza el valor retornat pels mètodes {{jsxref("Date.prototype.getUTCSeconds()", "getUTCSeconds()")}} i {{jsxref("Date.prototype.getUTCMilliseconds()", "getUTCMilliseconds()")}}.

- -

Si es passa un paràmetre que està fora del rang esperat, el mètode setUTCMinutes() actualitza els altres paràmetres per a acceptar el nombre. Per exemple, si es passa 100 com a segons, els minuts seran incrementats en 1 (minuts + 1), i s'emprarà 40 com a segons.

- -

Exemples

- -

Utilitzar setUTCMinutes()

- -
var elGranDia = new Date();
-elGranDia.setUTCMinutes(43);
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.3.
{{SpecName('ES5.1', '#sec-15.9.5.33', 'Date.prototype.setUTCMinutes')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.setutcminutes', 'Date.prototype.setUTCMinutes')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Date.prototype.getUTCMinutes()")}}
    • -
  • {{jsxref("Date.prototype.setMinutes()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/date/setutcmonth/index.html b/files/ca/web/javascript/referencia/objectes_globals/date/setutcmonth/index.html deleted file mode 100644 index e06f0fba64..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/date/setutcmonth/index.html +++ /dev/null @@ -1,121 +0,0 @@ ---- -title: Date.prototype.setUTCMonth() -slug: Web/JavaScript/Referencia/Objectes_globals/Date/setUTCMonth -translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCMonth ---- -
{{JSRef}}
- -

El mètode setUTCMonth() assigna el mes per a la data especificada segons el temps universal.

- -

Sintaxi

- -
objecteData.setUTCMonth(mes[, dia])
- -

Paràmetres

- -
-
mes
-
Un nombre sencer entre 0 i 11 que representa els mesos des de gener fins a desembre
-
dia
-
Opcional. Un nombre sencer entre 1 i 31 que representa el dia del mes.
-
- -

Descripció

- -

Si no s'especifica el paràmetre dia s'utilitza el valor retornat pel mètode.{{jsxref("Date.prototype.getUTCDate()", "getUTCDate()")}}.

- -

Si es passa un paràmetre que està fora del rang esperat, el mètode setUTCMonth() actualitza els altres paràmetres per a acceptar el nombre. Per exemple, si es passa 15 com a mes, l'any serà incrementat en 1 (any + 1), i s'emprarà 3 com a mes.

- -

Exemples

- -

Utilitzar setUTCMonth()

- -
var elGranDia = new Date();
-elGranDia.setUTCMonth(11);
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.3.
{{SpecName('ES5.1', '#sec-15.9.5.39', 'Date.prototype.setUTCMonth')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.setutcmonth', 'Date.prototype.setUTCMonth')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Date.prototype.getUTCMonth()")}}
    • -
  • {{jsxref("Date.prototype.setMonth()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/date/setutcseconds/index.html b/files/ca/web/javascript/referencia/objectes_globals/date/setutcseconds/index.html deleted file mode 100644 index 66f33a9e1b..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/date/setutcseconds/index.html +++ /dev/null @@ -1,121 +0,0 @@ ---- -title: Date.prototype.setUTCSeconds() -slug: Web/JavaScript/Referencia/Objectes_globals/Date/setUTCSeconds -translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCSeconds ---- -
{{JSRef}}
- -

El mètode setUTCSeconds() assigna els segons a la data especificada, segons el temps universal.

- -

Sintaxi

- -
objecteData.setUTCSeconds(segons[, milisegons])
- -

Paràmetres

- -
-
segons
-
Un nombre sencer entre 0 i 59 que representa els segons.
-
milisegons
-
Opcional. Un nombre sencer entre 0 i 999 que representa els milisegons.
-
- -

Descripció

- -

Si no s'especifica el paràmetre milisegons s'utilitza el valor retornat pel mètode {{jsxref("Date.prototype.getUTCMilliseconds()", "getUTCMilliseconds()")}}.

- -

Si es passa un paràmetre que està fora del rang esperat, el mètode setUTCSeconds() actualitza els altres paràmetres per a acceptar el nombre. Per exemple, si es passa 100 com a segons, els minuts seran incrementats en 1 (minuts + 1), i s'emprarà 40 com a segons.

- -

Exemples

- -

Utilitzar setUTCSeconds()

- -
var elGranDia = new Date();
-elGranDia.setUTCSeconds(20);
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.3.
{{SpecName('ES5.1', '#sec-15.9.5.31', 'Date.prototype.setUTCSeconds')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.setutcseconds', 'Date.prototype.setUTCSeconds')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Date.prototype.getUTCSeconds()")}}
    • -
  • {{jsxref("Date.prototype.setSeconds()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/date/setyear/index.html b/files/ca/web/javascript/referencia/objectes_globals/date/setyear/index.html deleted file mode 100644 index ead16f2d21..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/date/setyear/index.html +++ /dev/null @@ -1,124 +0,0 @@ ---- -title: Date.prototype.setYear() -slug: Web/JavaScript/Referencia/Objectes_globals/Date/setYear -translation_of: Web/JavaScript/Reference/Global_Objects/Date/setYear ---- -
{{JSRef}} {{deprecated_header}}
- -

El mètode setYear() assigna l'any per a una data especificada, d'acord a l'hora local. Com que setYear() no utilitza anys complerts ("el problema de l'any 2000"), aquest mètode està en desús i s'ha reemplaçat pel mètode {{jsxref("Date.prototype.setFullYear()", "setFullYear()")}}.

- -

Sintaxi

- -
objecteData.setYear(any)
- -

Paràmetres

- -
-
any
-
Un nombre sencer.
-
- -

Descripció

- -

Si any és un nombre entre 0 i 99 (inclòs), llavors s'assigna 1900 + any a objecteData. En cas contrari, s'assigna any a objecteData.

- -

Exemples

- -

Utilitzar setYear()

- -

Les dues primeres línies assignen el valor 1996 a l'any. La tercera línia assigna el valor 2000 a l'any.

- -
var elGranDia = new Date();
-
-elGranDia.setYear(96);
-elGranDia.setYear(1996);
-elGranDia.setYear(2000);
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-B.2.5', 'Date.prototype.getYear')}}{{Spec2('ES5.1')}}Definit a l'annex de compatibilitat (informatiu).
{{SpecName('ES6', '#sec-date.prototype.setyear', 'Date.prototype.getYear')}}{{Spec2('ES6')}}Definit a l'annex de característiques adicionals per a navegadors web (normatiu).
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Date.prototype.getFullYear()")}}
    • -
  • {{jsxref("Date.prototype.getUTCFullYear()")}}
    • -
  • {{jsxref("Date.prototype.setFullYear()")}}
    • -
  • {{jsxref("Date.prototype.setUTCFullYear()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/date/todatestring/index.html b/files/ca/web/javascript/referencia/objectes_globals/date/todatestring/index.html deleted file mode 100644 index 9548215179..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/date/todatestring/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: Date.prototype.toDateString() -slug: Web/JavaScript/Referencia/Objectes_globals/Date/toDateString -translation_of: Web/JavaScript/Reference/Global_Objects/Date/toDateString ---- -
{{JSRef}}
- -

El mètode toDateString() retorna la part de la data d'un objecte {{jsxref("Date")}} en un format entenible per persones en anglés amerià.

- -

Sintaxi

- -
objecteData.toDateString()
- -

Descripció

- -

Les instàncies de Date representen un punt específic en el temps. Una crida al mètode toString() retornarà la dada en un format entenible per persones, en anglés americà. Al motor SpiderMonkey, aquest format consisteix en la part de la data (dia, mes i any) seguida de la part de l'hora (hores, minuts, segons i zona horària). De vegades és convenient obtenir un string només de la part de l'hora; aquesta és la raó de ser del mètode toDateString().

- -

El mètode toDateString() resulta especialment útil perquè els motors que compleixen amb el standard ECMA-262 poden retornar resultats diferents al string obtingut mitjançant el mètode toString() en objectes Date, ja que el format depèn totalment de la implementació; això implica que partir el string per a obtenir només la part de temps pot no produïr un resultat consistent en tots els motors.

- -

Exemples

- -

Ús bàsic de toDateString()

- -
var d = new Date(1993, 6, 28, 14, 39, 7);
-
-console.log(d.toString());     // imprimeix Wed Jul 28 1993 14:39:07 GMT-0600 (PDT)
-console.log(d.toDateString()); // imprimeix Wed Jul 28 1993
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES3')}}{{Spec2('ES3')}}Definició inicial.
{{SpecName('ES5.1', '#sec-15.9.5.3', 'Date.prototype.toDateString')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.todatestring', 'Date.prototype.toDateString')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Date.prototype.toLocaleDateString()")}}
    • -
  • {{jsxref("Date.prototype.toTimeString()")}}
    • -
  • {{jsxref("Date.prototype.toString()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/date/togmtstring/index.html b/files/ca/web/javascript/referencia/objectes_globals/date/togmtstring/index.html deleted file mode 100644 index 08e63be739..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/date/togmtstring/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: Date.prototype.toGMTString() -slug: Web/JavaScript/Referencia/Objectes_globals/Date/toGMTString -translation_of: Web/JavaScript/Reference/Global_Objects/Date/toGMTString ---- -
{{JSRef}} {{deprecated_header}}
- -

El mètode toGMTString() converteix una data a un string, utilitzant les convencions del Greenwich Mean Time (GMT). El format exacte del valor retornat per toGMTString() és depenent de la plataforma i el navegador, per norma general hauria de representar la data en una forma entenible per persones.

- -
-

Nota: toGMTString() està en desús i no es recomana fer-lo servir més. Es mantè només per a compatibilitat amb codi vell que l'utilitzi; en comptes d'aquest mètode utilitzeu {{jsxref("Date.prototype.toUTCString()", "toUTCString()")}}.

-
- -

Sintaxi

- -
objecteData.toGMTString()
- -

Exemples

- -

Exemple senzill

- -

En aquest exemple el mètode toGMTString() converteix la data a GMT (UTC) utilitzant el desplaçament de zona horaria donat pel sistema operatiu i retorna un valor string que té aproximadament la forma que trobareu a continuació. El format exacte dependrà de la plataforma.

- -
var avui = new Date();
-var str = avui.toGMTString();  // en desús! utilitzeu toUTCString()
-
-console.log(str);               // Mon, 18 Dec 1995 17:28:35 GMT
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial, però ja marcat com a en desús. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-B.2.6', 'Date.prototype.toGMTString')}}{{Spec2('ES5.1')}}Definit a l'annex de compatibilitat (informatiu).
{{SpecName('ES6', '#sec-date.prototype.togmtstring', 'Date.prototype.toGMTString')}}{{Spec2('ES6')}}Definit a l'annex per a característiques adicionals per a navegadors web (normatiu).
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Date.prototype.toLocaleDateString()")}}
    • -
  • {{jsxref("Date.prototype.toTimeString()")}}
    • -
  • {{jsxref("Date.prototype.toUTCString()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/date/toisostring/index.html b/files/ca/web/javascript/referencia/objectes_globals/date/toisostring/index.html deleted file mode 100644 index 759e53225c..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/date/toisostring/index.html +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: Date.prototype.toISOString() -slug: Web/JavaScript/Referencia/Objectes_globals/Date/toISOString -translation_of: Web/JavaScript/Reference/Global_Objects/Date/toISOString ---- -
{{JSRef}}
- -

El mètode toISOString() retorna una cadena en un format ISO extès simplificat (ISO 8601), el qual sempre té 24 caràcters de llargària: YYYY-MM-DDTHH:mm:ss.sssZ. La zona horària és sempre UTC, tal i com indica el sufix "Z".

- -

Sintaxi

- -
dateObj.toISOString()
- -

Exemples

- -

Utilitzar toISOString()

- -
var today = new Date('05 October 2011 14:48 UTC');
-
-console.log(today.toISOString()); // Retorna 2011-10-05T14:48:00.000Z
-
- -

L'exemple anterior interpreta una cadena no estàndard que pot no ser interpretada correctament per navegadors que no siguin mozilla.

- -

Polyfill

- -

Aquest mètode es va estandaritzar en la 5a edició d'ECMA-262. Els motors que no s'hagin actualitzat per suportar aquest mètode poden evitar al mancança d'aquest mètode utilitzant les següents accions:

- -
if (!Date.prototype.toISOString) {
-  (function() {
-
-    function pad(number) {
-      if (number < 10) {
-        return '0' + number;
-      }
-      return number;
-    }
-
-    Date.prototype.toISOString = function() {
-      return this.getUTCFullYear() +
-        '-' + pad(this.getUTCMonth() + 1) +
-        '-' + pad(this.getUTCDate()) +
-        'T' + pad(this.getUTCHours()) +
-        ':' + pad(this.getUTCMinutes()) +
-        ':' + pad(this.getUTCSeconds()) +
-        '.' + (this.getUTCMilliseconds() / 1000).toFixed(3).slice(2, 5) +
-        'Z';
-    };
-
-  }());
-}
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES5.1', '#sec-15.9.5.43', 'Date.prototype.toISOString')}}{{Spec2('ES5.1')}}Definició inicial. Implementat en JavaScript 1.8.
{{SpecName('ES6', '#sec-date.prototype.toisostring', 'Date.prototype.toISOString')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatIE("9")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Date.prototype.toLocaleDateString()")}}
    • -
  • {{jsxref("Date.prototype.toTimeString()")}}
    • -
  • {{jsxref("Date.prototype.toUTCString()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/date/tojson/index.html b/files/ca/web/javascript/referencia/objectes_globals/date/tojson/index.html deleted file mode 100644 index 8b583470bf..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/date/tojson/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: Date.prototype.toJSON() -slug: Web/JavaScript/Referencia/Objectes_globals/Date/toJSON -translation_of: Web/JavaScript/Reference/Global_Objects/Date/toJSON ---- -
{{JSRef}}
- -

El mètode toJSON() retorna una representació de tipus cadena de l'objecte {{jsxref("Date")}}.

- -

Sintaxi

- -
dateObj.toJSON()
- -

Descripció

- -

Les instàncies {{jsxref("Date")}} referencien a un punt concret en el temps. La crida toJSON() retorna una cadena (usant {{jsxref("Date.prototype.toISOString()", "toISOString()")}}) en representació del valor de l'objecte {{jsxref("Date")}}. Generalment aquest mètode s'utilitza, per defecte, per serialitzar eficaçment objectes {{jsxref("Date")}} durant la serialització {{Glossary("JSON")}}.

- -

Exemples

- -

Utilitzar toJSON()

- -
var jsonDate = (new Date()).toJSON();
-var backToDate = new Date(jsonDate);
-
-console.log(jsonDate); //2015-10-26T07:46:36.611Z
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES5.1', '#sec-15.9.5.44', 'Date.prototype.toJSON')}}{{Spec2('ES5.1')}}Definició inicial. Implementat en JavaScript 1.8.5.
{{SpecName('ES6', '#sec-date.prototype.tojson', 'Date.prototype.toJSON')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Date.prototype.toLocaleDateString()")}}
    • -
  • {{jsxref("Date.prototype.toTimeString()")}}
    • -
  • {{jsxref("Date.prototype.toUTCString()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/date/tostring/index.html b/files/ca/web/javascript/referencia/objectes_globals/date/tostring/index.html deleted file mode 100644 index 8482fe5298..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/date/tostring/index.html +++ /dev/null @@ -1,142 +0,0 @@ ---- -title: Date.prototype.toString() -slug: Web/JavaScript/Referencia/Objectes_globals/Date/toString -translation_of: Web/JavaScript/Reference/Global_Objects/Date/toString ---- -
{{JSRef}}
- -

El mètode toString() retorna un string que representa l'objecte {{jsxref("Date")}} especificat.

- -

Sintaxi

- -
objecteDate.toString()
- -

Paràmetres

- -

Cap.

- -

Descripció

- -

L'objecte {{jsxref("Date")}} sobreescriu el mètode toString() de l'objecte {{jsxref("Object")}}; no hereta {{jsxref("Object.prototype.toString()")}}. Per a objectes {{jsxref("Date")}}, el mètode toString() retorna un string que representa l'objecte.

- -

El mètode toString() sempre retorna una representació en forma de string de la data en anglés americà.

- -

JavaScript cridarà el mètode toString() de manera automàtica quan una data requereix ser representada com a text o bé quan una data formi part d'una concatenació de strings.

- -

El mètode toString() és genèric. Si this no fa referència a una instància de {{jsxref("Date")}}, retornarà "Invalid Date".

- -

Exemples

- -

Utilitzar toString()

- -

L'exemple següent assigna el valor de toString() d'un objecte {{jsxref("Date")}} a myVar:

- -
var x = new Date();
-myVar = x.toString(); // assigna un valor a myVar simimlar a:
-// Mon Sep 28 1998 14:36:22 GMT-0700 (Pacific Daylight Time)
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.9.5.2', 'Date.prototype.toLocaleTimeString')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.tostring', 'Date.prototype.toString')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Mètode genèric{{CompatUnknown}}{{CompatGeckoDesktop("41")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Mètode genèric{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("41")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Object.prototype.toString()")}}
    • -
  • {{jsxref("Date.prototype.toDateString()")}}
    • -
  • {{jsxref("Date.prototype.toLocaleString()")}}
    • -
  • {{jsxref("Date.prototype.toTimeString()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/date/totimestring/index.html b/files/ca/web/javascript/referencia/objectes_globals/date/totimestring/index.html deleted file mode 100644 index aac8de7a85..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/date/totimestring/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: Date.prototype.toTimeString() -slug: Web/JavaScript/Referencia/Objectes_globals/Date/toTimeString -translation_of: Web/JavaScript/Reference/Global_Objects/Date/toTimeString ---- -
{{JSRef}}
- -

El mètode toTimeString() retorna la part de temps d'un objecte de tipus {{jsxref("Date")}} formatada de tal forma que és entenible per les persones, utilitzan anglés americà.

- -

Sintaxi

- -
objecteData.toTimeString()
- -

Descripció

- -

Les instàncies de {{jsxref("Date")}} representen un punt específic en el temps. Una crida al mètode {{jsxref("Date.prototype.toString()", "toString()")}} retornarà la dada en un format entenible per persones, en anglés americà. Al motor SpiderMonkey, aquest format consisteix en la part de la data (dia, mes i any) seguida de la part de l'hora (hores, minuts, segons i zona horària). De vegades és convenient obtenir un string només de la part de l'hora; aquesta és la raó de ser del mètode toTimeString().

- -

El mètode toTimeString() resulta especialment útil perquè els motors que compleixen amb el standard ECMA-262 poden retornar resultats diferents al string obtingut mitjançant el mètode {{jsxref("Date.prototype.toString()", "toString()")}} en objectes {{jsxref("Date")}}, ja que el format depèn totalment de la implementació; això implica que partir el string per a obtenir només la part de temps pot no produïr un resultat consistent en tots els motors.

- -

Exemples

- -

Utilització bàsica de toTimeString()

- -
var d = new Date(1993, 6, 28, 14, 39, 7);
-
-console.log(d.toString());     // escriu Wed Jul 28 1993 14:39:07 GMT-0600 (PDT)
-console.log(d.toTimeString()); // escriu 14:39:07 GMT-0600 (PDT)
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES3')}}{{Spec2('ES3')}}Definició inicial.
{{SpecName('ES5.1', '#sec-15.9.5.4', 'Date.prototype.toTimeString')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.totimestring', 'Date.prototype.toTimeString')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Date.prototype.toLocaleTimeString()")}}
    • -
  • {{jsxref("Date.prototype.toDateString()")}}
    • -
  • {{jsxref("Date.prototype.toString()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/date/utc/index.html b/files/ca/web/javascript/referencia/objectes_globals/date/utc/index.html deleted file mode 100644 index 37bb2bc369..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/date/utc/index.html +++ /dev/null @@ -1,142 +0,0 @@ ---- -title: Date.UTC() -slug: Web/JavaScript/Referencia/Objectes_globals/Date/UTC -translation_of: Web/JavaScript/Reference/Global_Objects/Date/UTC ---- -
{{JSRef}}
- -

El mètode Date.UTC() accepta els mateixos paràmetres que la forma més llarga del constructor, i retorna en un objecte de tipus {{jsxref("Date")}} el nombre de milisegons que han passat des de l'u de gener de 1970 a les 00:00:00, temps universal.

- -

Sintaxi

- -
Date.UTC(any, mes[, dia[, hora[, minuts[, segons[, milisegons]]]]])
- -

Paràmetres

- -
-
any
-
Un any major que 1900.
-
mes
-
Un nombre sencer entre 0 i 11 que representa el mes.
-
dia
-
Opcional. Un nombre sencer entre 1 i 31 que representa el dia del mes.
-
hora
-
Opcional. Un nombre sencer entre 0 i 23 que representa l'hora.
-
minuts
-
Opcional. Un nombre sencer entre 0 i 59 que representa els minuts.
-
segons
-
Opcional. Un nombre sencer entre 0 i 59 que representa els segons.
-
milisegons
-
Opcional. Un nombre sencer entre 0 i 999 que representa els milisegons.
-
- -

Descripció

- -

UTC() accepta una data en forma de paràmetres separats per comes i retorna el nombre de milisegons que han passat entre l'u de gener de 1970 a les 00:00:00 en temps universal, i el temps especificat pels paràmetres.

- -

L'any ha de ser especificat plenament; per exemple, 1998. Si s'especifica un any entre 0 i 99, el mètode el converteix a un any del segle 20 (1900 + any); per exemple, si s'especifica 95, s'emprarà l'any 1995.

- -

El mètode UTC() es diferencia del constructor {{jsxref("Date")}} en dues coses.

- -
    -
  • Date.UTC() utilitza el temps universal en comptes del temps local.
    • -
  • Date.UTC() retorna el temps com a nombre en comptes de crear un objecte de tipus {{jsxref("Date")}}.
    • -
- -

Si es passa un paràmetre que està fora del rang esperat, el mètode UTC() actualitza els altres paràmetres per a acceptar el nombre. Per exemple, si es passa 15 com a mes, l'any serà incrementat en 1 (any + 1), i s'emprarà 3 com a mes.

- -

Com que UTC() és un mètode estàtic de {{jsxref("Date")}}, sempre es crida com a Date.UTC() en comptes de com un mètode d'una instància de {{jsxref("Date")}}.

- -

Exemples

- -

Utilitzar Date.UTC()

- -

La instrucció següent crea un objecte {{jsxref("Date")}} utilitzant temps UTC en comptes del temps local:

- -
var dataUTC = new Date(Date.UTC(96, 11, 1, 0, 0, 0));
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-date.utc', 'Date.UTC')}}{{Spec2('ES6')}} 
{{SpecName('ES5.1', '#sec-15.9.4.3', 'Date.UTC')}}{{Spec2('ES5.1')}} 
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.0.
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísicaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísicaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Date.parse()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/date/valueof/index.html b/files/ca/web/javascript/referencia/objectes_globals/date/valueof/index.html deleted file mode 100644 index 6c5f810ead..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/date/valueof/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: Date.prototype.valueOf() -slug: Web/JavaScript/Referencia/Objectes_globals/Date/valueOf -translation_of: Web/JavaScript/Reference/Global_Objects/Date/valueOf ---- -
{{JSRef}}
- -

El mètode valueOf() retorna el valor primitiu d'un objecte de tipus {{jsxref("Date")}}.

- -

Sintaxi

- -
dateObj.valueOf()
- -

Paràmetres

- -

Cap.

- -

Descripció

- -

El mètode valueOf() retorna el valor primitiu d'un objecte de tipus {{jsxref("Date")}} en forma de nombre, el nombre de milisegons des de la mitjanit de l'ú de gener de 1970 UTC.

- -

Aquest mètode és funcionalment equivalent al mètode {{jsxref("Date.prototype.getTime()")}}.

- -

Aquest mètode és tot sovint emprat internament per JavaScript i no explícitament en codi.

- -

Exemples

- -

Utilitzar valueOf()

- -
var x = new Date(56, 6, 17);
-var myVar = x.valueOf();      // assigna -424713600000 a myVar
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.9.5.8', 'Date.prototype.valueOf')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.valueof', 'Date.prototype.valueOf')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Object.prototype.valueOf()")}}
    • -
  • {{jsxref("Date.prototype.getTime()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/error/columnnumber/index.html b/files/ca/web/javascript/referencia/objectes_globals/error/columnnumber/index.html deleted file mode 100644 index 377c797cd3..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/error/columnnumber/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: Error.prototype.columnNumber -slug: Web/JavaScript/Referencia/Objectes_globals/Error/columnNumber -translation_of: Web/JavaScript/Reference/Global_Objects/Error/columnNumber ---- -
{{JSRef("Global_Objects", "Error", "EvalError,InternalError,RangeError,ReferenceError,SyntaxError,TypeError,URIError")}} {{non-standard_header}}
- -

Resum

- -

La propietat columnNumber conté el nombre de la columna dins la línia del fitxer on s'ha produit l'error.

- -

Exemples

- -

Exemple: Utilitzar columnNumber

- -
var e = new Error('Error interpretant les dades');
-throw e;
-console.log(e.columnNumber) // 0
-
- -

Especificacions

- -

No forma part de cap especificació. No és standard.

- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Error.prototype.stack")}} {{non-standard_inline}}
    • -
  • {{jsxref("Error.prototype.lineNumber")}} {{non-standard_inline}}
    • -
  • {{jsxref("Error.prototype.fileName")}} {{non-standard_inline}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/error/filename/index.html b/files/ca/web/javascript/referencia/objectes_globals/error/filename/index.html deleted file mode 100644 index dcca532f86..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/error/filename/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: Error.prototype.fileName -slug: Web/JavaScript/Referencia/Objectes_globals/Error/fileName -translation_of: Web/JavaScript/Reference/Global_Objects/Error/fileName ---- -
{{JSRef("Global_Objects", "Error", "EvalError,InternalError,RangeError,ReferenceError,SyntaxError,TypeError,URIError")}} {{non-standard_header}}
- -

Resum

- -

La propietat fileName conté la ruta al fitxer que ha provocat aquest error.

- -

Descripció

- -

Aquesta propietat no standard conté la ruta al fitxer que ha provocat l'error. Si es crida des d'un contexte de depuració, com ara des de Firefox Developer Tools, retorna "debugger eval code".

- -

Exemples

- -

Exemple: Utilitzar fileName

- -
var e = new Error('Dades no tractades');
-throw e;
-// e.fileName podria contrindre quelcom semblant a "file:///C:/example.html"
-
- -

Especificacions.

- -

No format part de cap especificació. No és standard.

- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Error.prototype.stack")}} {{non-standard_inline}}
    • -
  • {{jsxref("Error.prototype.columnNumber")}} {{non-standard_inline}}
    • -
  • {{jsxref("Error.prototype.lineNumber")}} {{non-standard_inline}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/error/index.html b/files/ca/web/javascript/referencia/objectes_globals/error/index.html deleted file mode 100644 index 2e1592edc5..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/error/index.html +++ /dev/null @@ -1,224 +0,0 @@ ---- -title: Error -slug: Web/JavaScript/Referencia/Objectes_globals/Error -translation_of: Web/JavaScript/Reference/Global_Objects/Error ---- -
{{JSRef}}
- -

Resum

- -

El constructor Error crea un objecte que representa un error. Quan succeeix un error en temps d'execució JavaScript llença una instància de tipus Error. L'objecte Error també es pot emprar com a objecte base per a excepcions definides per l'usuari. Vegeu més abaix per a tipus d'errors standard que forment part del nucli.

- -

Sintaxi

- -
new Error([missatge[, fitxer[, numeroLinia]]])
- -

Paràmetres

- -
-
missatge
-
Opcional. Descripció entenible per persones de l'error.
-
fitxer {{non-standard_inline}}
-
Opcional. El valor de la propietat fitxer a l'objecte Error creat. Per defecte pren el valor del nom del fitxer que conté el codi que ha cridat el constructor Error().
-
numeroLinia {{non-standard_inline}}
-
Opcional. El valor de la propietat numeroLinia de l'objecte Error creat. Per defecte rep el valor del número de línia que conté la invocació al constructor Error().
-
- -

Descripció

- -

Els errors en temps d'execució esdevenen objectes Error nous que són creats i llençats.

- -

Aquesta pàgina documenta l'ús de l'objecte Error en si mateix, així com el seu ús com funció constructora. Per a un llistat de les propietats i mètodes heretats per les instàncies de Error, vegeu {{jsxref("Error.prototype")}}.

- -

Tipus d'errors

- -

A més del construtor genèric Error hi ha altres sis constructors d'errors que formen part del nucli de JavaScript. Per a excepcions al cantó del client vegeu Sentències manegadores d'excepcions.

- -
-
{{jsxref("Global_Objects/EvalError", "EvalError")}}
-
Crea una instància que representa un error que succeeix a l'emprar la funció global {{jsxref("Global_Objects/eval", "eval()")}}.
-
{{jsxref("Global_Objects/InternalError", "InternalError")}} {{non-standard_inline}}
-
Crea una instància que representa un error que succeeix quan es llença un error intern des del motor de JavaScript. Per exemple: "massa recursivitat".
-
{{jsxref("Global_Objects/RangeError", "RangeError")}}
-
Crea una instància que representa un error que succeeix quan una variable numèrica o paràmetre està fora del seu rang vàlid.
-
{{jsxref("Global_Objects/ReferenceError", "ReferenceError")}}
-
Crea una instància que representa un error que succeeix quan es deixa de referenciar una referència invàlida.
-
{{jsxref("Global_Objects/SyntaxError", "SyntaxError")}}
-
Crea una instància que representa un error de sintaxi que succeeix a l'interpretar codi dins {{jsxref("Global_Objects/eval", "eval()")}}.
-
{{jsxref("Global_Objects/TypeError", "TypeError")}}
-
Crea una instància que representa un error que succeeix quan una variable o paràmetre és d'un tipus no vàlid.
-
{{jsxref("Global_Objects/URIError", "URIError")}}
-
Crea un error que representa un error que succeeix quan {{jsxref("Global_Objects/encodeURI", "encodeURI()")}} o {{jsxref("Global_Objects/decodeURI", "decodeURl()")}} reben paràmetres invàlids.
-
- -

Propietats

- -
-
{{jsxref("Error.prototype")}}
-
Permet afegir propietats a instàncies Error.
-
- -

Mètodes

- -

L'objecte global Error no contè mètodes propis. Tot i així, hereta alguns mètodes a través de la cadena de prototipus.

- -

Instàncies Error

- -
{{page('ca/docs/JavaScript/Reference/Global_Objects/Error/prototype', 'Descripció')}}
- -

Propietats

- -
{{page('ca/docs/JavaScript/Reference/Global_Objects/Error/prototype', 'Propietats')}}
- -

Mètodes

- -
{{page('ca/docs/JavaScript/Reference/Global_Objects/Error/prototype', 'Mètodes')}}
- -

Exemples

- -

Exemple: Llençar un error genèric

- -

Normalment hom crea un objecte Error amb la intenció de llençar-lo tot emprant la paraula clau {{jsxref("Statements/throw", "throw")}}. Els errors es poden manegar utilitzant la construcció {{jsxref("Statements/try...catch", "try...catch")}}:

- -
try {
-  throw new Error('Oooops!');
-} catch (e) {
-  alert(e.name + ': ' + e.message);
-}
-
- -

Exemple: Manegar un error específic

- -

this should probably be removedEs pot escollir fer-se càrrec només de tipus d'errors específics comparant el tipus d'error amb la propietat {{jsxref("Object.prototype.constructor", "constructor")}} de l'error o bé, si s'està escrivint el codi per a motors JavaScript moderns, mitjançant la paraula clau {{jsxref("Operators/instanceof", "instanceof")}}:

- -
try {
-  foo.bar();
-} catch (e) {
-  if (e instanceof EvalError) {
-    alert(e.name + ': ' + e.message);
-  } else if (e instanceof RangeError) {
-    alert(e.name + ': ' + e.message);
-  }
-  // ... etc
-}
-
- -

Exemple: Tipus d'errors personalitzats

- -

És possible definir tipus d'errors propis derivats de Error, llençar-los mitjançant throw new MyError()  i utilitzar instanceof MyError per a comprovarel tipus d'error al manegador d'excepcions. A sota trobareu la forma més comuna de fer això.

- -
-

Advertim que la instància MyError llençada reportarà lineNumber i fileName invàlids, com a mínim a Firefox.

-
- -

Vegeu també la discussió a StackOverflow "Quina és una bona forma d'extrendre Error a JavaScript?".

- -
// Crea un nou objecte, que hereta del prototipus constructor Error.
-function MyError(message) {
-  this.name = 'MyError';
-  this.message = message || 'Missatge per defecte';
-}
-MyError.prototype = Object.create(Error.prototype);
-MyError.prototype.constructor = MyError;
-
-try {
-  throw new MyError();
-} catch (e) {
-  console.log(e.name);     // 'MyError'
-  console.log(e.message);  // 'Missatge per defecte'
-}
-
-try {
-  throw new MyError('custom message');
-} catch (e) {
-  console.log(e.name);     // 'MyError'
-  console.log(e.message);  // 'Missatge per defecte'
-}
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.11', 'Error')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-error-objects', 'Error')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Error.prototype")}}
    • -
  • {{jsxref("Statements/throw", "throw")}}
    • -
  • {{jsxref("Statements/try...catch", "try...catch")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/error/linenumber/index.html b/files/ca/web/javascript/referencia/objectes_globals/error/linenumber/index.html deleted file mode 100644 index 7b85f29c19..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/error/linenumber/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: Error.prototype.lineNumber -slug: Web/JavaScript/Referencia/Objectes_globals/Error/lineNumber -translation_of: Web/JavaScript/Reference/Global_Objects/Error/lineNumber ---- -
{{JSRef("Global_Objects", "Error", "EvalError,InternalError,RangeError,ReferenceError,SyntaxError,TypeError,URIError")}} {{non-standard_header}}
- -

Resum

- -

La propietat lineNumber conté el nombre de la línia del fitxer que ha llençat aquest erro.

- -

Exemples

- -

Exemple: Utilitzar lineNumber

- -
var e = new Error('No he pogut interpretar l\'entrada');
-throw e;
-console.log(e.lineNumber) // 2
-
- -

Exemple: Exemple alternatiu usant l'event error

- -
window.addEventListener('error', function(e) {
-  console.log(e.lineno); // 5
-});
-var e = new Error('No he pogut interpretar l\'entrada');
-throw e;
-
- -

Això és standard i suportat per Chrome, Firefox i provablement altres.

- -

Especificacions

- -

No forma part de cap especificació. No és standard.

- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsicOn error object in handled errors{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Error.prototype.stack")}} {{non-standard_inline}}
    • -
  • {{jsxref("Error.prototype.columnNumber")}} {{non-standard_inline}}
    • -
  • {{jsxref("Error.prototype.fileName")}} {{non-standard_inline}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/error/message/index.html b/files/ca/web/javascript/referencia/objectes_globals/error/message/index.html deleted file mode 100644 index 4aa07268fa..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/error/message/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: Error.prototype.message -slug: Web/JavaScript/Referencia/Objectes_globals/Error/message -translation_of: Web/JavaScript/Reference/Global_Objects/Error/message ---- -
{{JSRef("Global_Objects", "Error", "EvalError,InternalError,RangeError,ReferenceError,SyntaxError,TypeError,URIError")}}
- -

Resum

- -

La propietat message és una descripció en un format amigable pels humans de l'error.

- -

Descripció

- -

Aquesta propietat conté una breu descripció de l'error sempre i quan estigui disponible o hagi sigut assignada. SpiderMonkey fa un ús extensiu de la propietat message per a excepcions. El mètode {{jsxref("Error.prototype.toString()")}} utilitza la propietat message combinada amb la propietat {{jsxref("Error.prototype.name", "name")}} per a crear una representació de l'error.

- -

Per defecte la propietat message és un string buit, però aquest comportament pot ser sobreescrit per una instàcia simplement passant un missatge com a primer argument del {{jsxref("Error", "constructor Error")}}.

- -

Exemples

- -

Exemple: Llençar un error personalitzat

- -
var e = new Error('No he pogut interpretar l\'entrada'); // e.message valdrà 'No he pogut interpretar l\'entrada'
-throw e;
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial.
{{SpecName('ES5.1', '#sec-15.11.4.3', 'Error.prototype.message')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-error.prototype.message', 'Error.prototype.message')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Error.prototype.name")}}
    • -
  • {{jsxref("Error.prototype.toString()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/error/name/index.html b/files/ca/web/javascript/referencia/objectes_globals/error/name/index.html deleted file mode 100644 index 995ecafd5f..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/error/name/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: Error.prototype.name -slug: Web/JavaScript/Referencia/Objectes_globals/Error/name -translation_of: Web/JavaScript/Reference/Global_Objects/Error/name ---- -
{{JSRef("Global_Objects", "Error", "EvalError,InternalError,RangeError,ReferenceError,SyntaxError,TypeError,URIError")}}
- -

Resum

- -

La propietat name representa un nom per al tipus de error. El valor que rep inicialment aquesta propietat és "Error".

- -

Descripció

- -

Per defecte, les instàncies de {{jsxref("Error")}} reben el nom "Error". El mètode Error.prototype.toString() utilitza la propietat name combinada amb la propietat message per a crear una representació de l'error.

- -

Exemples

- -

Exemple: Llençar un error personalitzat

- -
var e = new Error('Entrada no vàlida'); // e.name is 'Error'
-
-e.name = 'ParseError';
-throw e;
-// e.toString() would return 'ParseError: Entrada no vàlida'
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial.
{{SpecName('ES5.1', '#sec-15.11.4.2', 'Error.prototype.name')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-error.prototype.name', 'Error.prototype.name')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Error.prototype.message")}}
    • -
  • {{jsxref("Error.prototype.toString()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/error/prototype/index.html b/files/ca/web/javascript/referencia/objectes_globals/error/prototype/index.html deleted file mode 100644 index 53e22669e9..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/error/prototype/index.html +++ /dev/null @@ -1,151 +0,0 @@ ---- -title: Error.prototype -slug: Web/JavaScript/Referencia/Objectes_globals/Error/prototype -translation_of: Web/JavaScript/Reference/Global_Objects/Error -translation_of_original: Web/JavaScript/Reference/Global_Objects/Error/prototype ---- -
{{JSRef("Global_Objects", "Error", "EvalError,InternalError,RangeError,ReferenceError,SyntaxError,TypeError,URIError")}}
- -

Resum

- -

La propietat Error.prototype representa el prototipus per al constructor {{jsxref("Global_Objects/Error", "Error")}}.

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

Descripció

- -

Totes les instàncies de {{jsxref("Global_Objects/Error", "Error")}} i les instàncies de {{jsxref("Global_Objects/Error", "non-generic errors", "#Error_types", 1)}} heretèn de Error.prototype. Com totes les funcions constructores, es pot utilitzar el prototipus del constructor per a afegir propietats o mètodes a totes les instànces creades amb aquest constructor.

- -

Propietats

- -

Propietats standard

- -
-
Error.prototype.constructor
-
Especifica la funció que ha creat la instància del prototipus.
-
{{jsxref("Error.prototype.message")}}
-
Missatge d'error.
-
{{jsxref("Error.prototype.name")}}
-
Nom de l'error.
-
- -

Extensions específiques del venedor

- -
{{non-standard_header}}
- -

Microsoft

- -
-
{{jsxref("Error.prototype.description")}}
-
Descripció de l'error. Similar a {{jsxref("Error.prototype.message", "message")}}.
-
{{jsxref("Error.prototype.number")}}
-
Nombre de l'error.
-
- -

Mozilla

- -
-
{{jsxref("Error.prototype.fileName")}}
-
Ruta al fitxer que ha llençat l'error.
-
{{jsxref("Error.prototype.lineNumber")}}
-
Línia del fitxer que ha llençat l'error.
-
{{jsxref("Error.prototype.columnNumber")}}
-
Nombre de columna de la línia que ha llençat l'error.
-
{{jsxref("Error.prototype.stack")}}
-
Conté la traça de l'error.
-
- -

Mètodes

- -
-
{{jsxref("Error.prototype.toSource()")}} {{non-standard_inline}}
-
Retorna un string que conté el codi font de l'objecte {{jsxref("Global_Objects/Error", "Error")}} especificat; es pot emprar aquest valor per a crear un objecte nou. Sobreescriu el mètode {{jsxref("Object.prototype.toSource()")}}.
-
{{jsxref("Error.prototype.toString()")}}
-
Retorna un string que representa l'objecte especificat. Sobreescriu el mètode {{jsxref("Object.prototype.toString()")}}.
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.11.3.1', 'Error')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-error.prototype', 'Error')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Error")}}
    • -
  • {{jsxref("Object.prototype")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/error/stack/index.html b/files/ca/web/javascript/referencia/objectes_globals/error/stack/index.html deleted file mode 100644 index aa41949423..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/error/stack/index.html +++ /dev/null @@ -1,161 +0,0 @@ ---- -title: Error.prototype.stack -slug: Web/JavaScript/Referencia/Objectes_globals/Error/Stack -translation_of: Web/JavaScript/Reference/Global_Objects/Error/Stack ---- -
{{JSRef("Global_Objects", "Error", "EvalError,InternalError,RangeError,ReferenceError,SyntaxError,TypeError,URIError")}} {{non-standard_header}}
- -

Resum

- -

La propietat no standard stack dels objectes {{jsxref("Error")}} ofereix una traça de quines funcions han estat cridades, en quin ordre, des de quina línia i fitxer, i amb quins arguments. La stack, en forma de string, va de les crides més recent a les més antigues, fins a arribar a la crida original del context global.

- -

Descripció

- -

Cada pas estarà separat per una nova línia, on la primera part de cada línia és el nom de la funció (si no es tracta d'una crida des del context global), seguit per pel símbol arroba (@), la ruta del fitxer (excepte quan la funció és la funció constructora de l'error mentre s'està llençant l'error), un punt i coma, i, si hi ha una ruta de fitxer, el nombre de línia. Fixeu-vos que l'objecte {{jsxref("Error")}} també disposa de les propietats filename, lineNumber i columnNumber de l'error llençat (però no de la traça).

- -

Cal remarcar que aquest és el format utilitzat per Firefox. No hi ha un formateig standard. Tot i així, Safari 6+ i Opera 12- utilitzen un format molt similar. Els navegadors que utilitzen el motor de JavaScript V8 (com ara Chrome, Opera 15+ i el navegador de Android), així com IE10+, d'altra banda, utilitzen un format diferent (vegeu el document de la MSDN error.stack).

- -

Valors dels arguments a la pila: Abans del ({{bug("744842")}}) de Firefox 14, el nom de la funció anava seguit dels valors dels arguments convertits a string entre parèntesi immediatament abans de l'arroba (@). Un objecte (o un array, etc) apareixeria en la forma convertida "[object Object]", i en conseqüència no podria ser evaluada de nou en objectes. Si que es poden obtenir els valors escalars (tot i que resulta més senzill utilitzar arguments.callee.caller.arguments, així com es pot trobar el nom de la funció a arguments.callee.caller.name). "undefined" apareix com a "(void 0)". Cal tenir en compte que si s'han passat arguments de tipus string que continguin caracters com ara "@", "(", ")" (o bé noms de fitxers), resulta força complicat utiltizar-los per a trencar la línia en les diferents parts que la composen. Degut a això, a partir de Firefox 14 això deixa de ser un problema.

- -

Exemple

- -

El següent codi HTML mostra l'ús de la propietat stack.

- -
<!DOCTYPE HTML>
-<meta charset="UTF-8">
-<title>Exemple de pila de traça</title>
-<body>
-<script>
-function trace() {
-  try {
-    throw new Error('myError');
-  }
-  catch(e) {
-    alert(e.stack);
-  }
-}
-function b() {
-  trace();
-}
-function a() {
-  b(3, 4, '\n\n', undefined, {});
-}
-a('primera crida, primerArgument');
-</script>
-
- -

Assumint que el codi resideix al fitxer C:\exemple.html en un sistema de fitxers de Windows, aquest generarà un missatge d'alerta amb el text següent:

- -

A partir de Firefox 30 contindrà el nombre de la columna ({{bug("762556")}}):

- -
trace@file:///C:/exemple.html:9:17
-b@file:///C:/exemple.html:16:13
-a@file:///C:/exemple.html:19:13
-@file:///C:/exemple.html:21:9
- -

Firefox 14 a Firefox 29:

- -
trace@file:///C:/exemple.html:9
-b@file:///C:/exemple.html:16
-a@file:///C:/exemple.html:19
-@file:///C:/exemple.html:21
- -

Per contra, Firefox 13 i versions prèvies produian el següent text:

- -
Error("myError")@:0
-trace()@file:///C:/exemple.html:9
-b(3,4,"\n\n",(void 0),[object Object])@file:///C:/exemple.html:16
-a("primera crida, primerArgument")@file:///C:/exemple.html:19
-@file:///C:/exemple.html:21
- -

Pila de codi evaluat

- -

A partir de Firefox 30 {{geckoRelease("30")}}, la pila d'error pertanyent a codi dins de crides a Function() i eval() conté informació més detallada sobre la línia i la columna que ha produït l'error dins aquestes crides. Les crides a funcions s'indiquen amb "> Function" i les crides a eval amb "> eval". Vegeu {{bug("332176")}}.

- -
try {
-  new Function('throw new Error()')();
-} catch (e) {
-  console.log(e.stack);
-}
-
-// anonymous@file:///C:/exemple.html line 7 > Function:1:1
-// @file:///C:/example.html:7:6
-
-
-try {
-  eval("eval('FAIL')");
-} catch (x) {
-  console.log(x.stack);
-}
-
-// @file:///C:/exemple.html line 7 > eval line 1 > eval:1:1
-// @file:///C:/exemple.html line 7 > eval:1:1
-// @file:///C:/exemple.html:7:6
-
- -

També podeu utilitzar la directiva //# sourceURL per a donar nom a codi eval. Vegeu també Depurar codi eval als documents de Depurar així com en aquesta entrada d'un bloc.

- -

Especificacions

- -

No forma part de cap especificació. No és standard.

- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatIE("10")}}{{CompatVersionUnknown}}{{CompatSafari("6")}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsicAndroid 4 (potser Android 3, però en cap cas Android 2){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatSafari("6")}}
-
- -

Vegeu també

- - diff --git a/files/ca/web/javascript/referencia/objectes_globals/error/tosource/index.html b/files/ca/web/javascript/referencia/objectes_globals/error/tosource/index.html deleted file mode 100644 index c766aa312b..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/error/tosource/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: Error.prototype.toSource() -slug: Web/JavaScript/Referencia/Objectes_globals/Error/toSource -translation_of: Web/JavaScript/Reference/Global_Objects/Error/toSource ---- -
{{JSRef}} {{non-standard_header}}
- -

El mètode toSource() reotrna codi capaç de generar el mateix error en case de ser evaluat.

- -

Sintaxi

- -
e.toSource()
- -

Descripció

- -

La crida al mètode toSource d'una instància d'{{jsxref("Error")}}(incloent NativeErrors) retorna un string que conté el codi font de l'error. Aquest string pot ser evaluat per a crear un objecte (aproximadament) igual. Per defecte la string contenint el codi font segueix l'estructura del construtor {{jsxref("Error")}}. Per exemple:

- -
(newname(message ,fileName,lineNumber))
-
- -

on aquests atributs corresponen a les propietats de la instància de l'error, respectivament.

- -
-

Advertència: Cal tenir en compte que les propietats utilitzades pel mètode toSource a l'hora de crear l'string són mutables i per tant poden no representar de forma acurada la funció utilitzada per a crear la instància de l'error, el nom del fitxer o el nombre de la línia on l'error real ha tingut lloc.

-
- -

Especificacions

- -

No forma part de cap standard. Implementat a JavaScript 1.3.

- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Error.prototype.fileName")}}
    • -
  • {{jsxref("Error.prototype.lineNumber")}}
    • -
  • {{jsxref("Error.prototype.message")}}
    • -
  • {{jsxref("Error.prototype.name")}}
    • -
  • {{jsxref("Object.prototype.toSource()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/error/tostring/index.html b/files/ca/web/javascript/referencia/objectes_globals/error/tostring/index.html deleted file mode 100644 index 79fd20f77f..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/error/tostring/index.html +++ /dev/null @@ -1,146 +0,0 @@ ---- -title: Error.prototype.toString() -slug: Web/JavaScript/Referencia/Objectes_globals/Error/toString -translation_of: Web/JavaScript/Reference/Global_Objects/Error/toString ---- -
{{JSRef("Global_Objects", "Error", "EvalError,InternalError,RangeError,ReferenceError,SyntaxError,TypeError,URIError")}}
- -

Resum

- -

El mètode toString() retorna un string que representa l'error especificat per l'objecte {{jsxref("Error")}}.

- -

Sintaxi

- -
e.toString()
- -

Descripció

- -

L'objecte {{jsxref("Error")}} sobreescriu el mètode {{jsxref("Object.prototype.toString()")}} heretat per tots els objectes. La seva semàntica és la següent (suposant que {{jsxref("Object")}} i {{jsxref("String")}} tenen els seus valors originals):

- -
Error.prototype.toString = function() {
-  'use strict';
-
-  var obj = Object(this);
-  if (obj !== this) {
-    throw new TypeError();
-  }
-
-  var name = this.name;
-  name = (name === undefined) ? 'Error' : String(name);
-
-  var msg = this.message;
-  msg = (msg === undefined) ? '' : String(msg);
-
-  if (name === '') {
-    return msg;
-  }
-  if (msg === '') {
-    return name;
-  }
-
-  return name + ': ' + msg;
-};
-
- -

Exemples

- -
var e = new Error('fatal error');
-print(e.toString()); // 'Error: fatal error'
-
-e.name = undefined;
-print(e.toString()); // 'Error: fatal error'
-
-e.name = '';
-print(e.toString()); // 'fatal error'
-
-e.message = undefined;
-print(e.toString()); // 'Error'
-
-e.name = 'hello';
-print(e.toString()); // 'hello'
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.11.4.4', 'Error.prototype.toString')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-error.prototype.tostring', 'Error.prototype.toString')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Error.prototype.toSource()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/index.html b/files/ca/web/javascript/referencia/objectes_globals/index.html deleted file mode 100644 index 60bd0333f7..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/index.html +++ /dev/null @@ -1,167 +0,0 @@ ---- -title: Objectes Standard -slug: Web/JavaScript/Referencia/Objectes_globals -translation_of: Web/JavaScript/Reference/Global_Objects ---- -
-
{{jsSidebar("Objects")}}
-
- -

Resum

- -

Aquest capítol llista tots els objectes que Javascript proporciona per defecte, així com els seus mètodes i propietats.

- -
-

És important no confondre el terme "objectes globals" (també anomenats objectes standard o built-in) amb objecte global. En aquesta pàgina objecte global es refereix a objectes en l'àmbit global (però només si no s'utilitza el mode estricte de ECMAScript 5! En qualsevol altre cas retorna undefined). Es pot accedir a l'objecte global en si mateix mitjançant l'operador {{jsxref("Referencia/Objectes_standard/this", "this")}} en l'àmbit global. De fet l'àmbit global consisteix  en les propietats de l'objecte global (propietats heredades incloses, si s'escau).

- -

Altres objectes en l'àmbit global són o bé creats per l'script de l'usuari o bé proporcionats per l'aplicació del host. Els objectes proporcionats pel host disponibles en els àmbits del navegador estan documentats a la referència de la API.

- -

Objectes standard (per categoria)

- -

Propietats de valor

- -

Propietats globals que retornen un valor simple.

- -
    -
  • {{jsxref("Infinity")}}
    • -
  • {{jsxref("NaN")}}
    • -
  • {{jsxref("undefined")}}
    • -
  • El literal {{jsxref("null")}}
    • -
- -

Funcions globals

- -

Funcions globals que retornen el resultat d'una rutina específica.

- -
    -
  • {{jsxref("eval", "eval()")}}
    • -
  • {{jsxref("uneval", "uneval()")}} {{non-standard_inline()}}
    • -
  • {{jsxref("isFinite", "isFinite()")}}
    • -
  • {{jsxref("isNaN", "isNaN()")}}
    • -
  • {{jsxref("parseFloat", "parseFloat()")}}
    • -
  • {{jsxref("parseInt", "parseInt()")}}
    • -
  • {{jsxref("decodeURI", "decodeURI()")}}
    • -
  • {{jsxref("decodeURIComponent", "decodeURIComponent()")}}
    • -
  • {{jsxref("encodeURI", "encodeURI()")}}
    • -
  • {{jsxref("encodeURIComponent", "encodeURIComponent()")}}
    • -
  • {{jsxref("escape", "escape()")}} {{deprecated_inline()}}
    • -
  • {{jsxref("unescape", "unescape()")}} {{deprecated_inline()}}
    • -
- -

Objectes fonamentals

- -

Objectes generals del llenguatge, funcions i errors.

- -
    -
  • {{jsxref("Object")}}
    • -
  • {{jsxref("Function")}}
    • -
  • {{jsxref("Boolean")}}
    • -
  • {{jsxref("Symbol")}} {{experimental_inline()}}
    • -
  • {{jsxref("Error")}}
    • -
  • {{jsxref("EvalError")}}
    • -
  • {{jsxref("InternalError")}}
    • -
  • {{jsxref("RangeError")}}
    • -
  • {{jsxref("ReferenceError")}}
    • -
  • {{jsxref("SyntaxError")}}
    • -
  • {{jsxref("TypeError")}}
    • -
  • {{jsxref("URIError")}}
    • -
- -

Nombres i dates

- -

Objectes que emmagatzemen nombres, dades i càlculs matemàtics.

- -
    -
  • {{jsxref("Number")}}
    • -
  • {{jsxref("Math")}}
    • -
  • {{jsxref("Date")}}
    • -
- -

Processament de text

- -

Objectes per manipular text.

- -
    -
  • {{jsxref("String")}}
    • -
  • {{jsxref("RegExp")}}
    • -
- -

Col·leccions indexades

- -

Col·leccions ordenades per un índex. Objectes de tipus array.

- -
    -
  • {{jsxref("Array")}}
    • -
  • {{jsxref("Int8Array")}}
    • -
  • {{jsxref("Uint8Array")}}
    • -
  • {{jsxref("Uint8ClampedArray")}}
    • -
  • {{jsxref("Int16Array")}}
    • -
  • {{jsxref("Uint16Array")}}
    • -
  • {{jsxref("Int32Array")}}
    • -
  • {{jsxref("Uint32Array")}}
    • -
  • {{jsxref("Float32Array")}}
    • -
  • {{jsxref("Float64Array")}}
    • -
- -

Diccionaris (mapes)

- -

Col·leccions d'objectes de tipus diccionari (també coneguts com a mapes o col·leccions d'entrades clau-valor). Els elements són iterables per ordre d'inserció.

- -
    -
  • {{jsxref("Map")}} {{experimental_inline()}}
    • -
  • {{jsxref("Set")}} {{experimental_inline()}}
    • -
  • {{jsxref("WeakMap")}} {{experimental_inline()}}
    • -
  • {{jsxref("WeakSet")}} {{experimental_inline()}}
    • -
- -

Dades estructurades

- -

Buffers de dades i JavaScript Object Notation.

- -
    -
  • {{jsxref("ArrayBuffer")}}
    • -
  • {{jsxref("DataView")}}
    • -
  • {{jsxref("JSON")}}
    • -
- -

Objectes d'abstracció de control

- -
    -
  • {{jsxref("Promise")}} {{experimental_inline()}}
    • -
- -

Reflexió

- -
    -
  • {{jsxref("Reflect")}} {{experimental_inline()}}
    • -
  • {{jsxref("Proxy")}} {{experimental_inline()}}
    • -
- -

Internacionalització

- -

Adicions al nucli de ECMAScript per a funcionalitats sensibles a l'idioma.

- -
    -
  • {{jsxref("Intl")}}
    • -
  • {{jsxref("Collator", "Intl.Collator")}}
    • -
  • {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}
    • -
  • {{jsxref("NumberFormat", "Intl.NumberFormat")}}
    • -
- -

Objectes no-standard

- -
    -
  • {{jsxref("Generator")}} {{non-standard_inline()}}
    • -
  • {{jsxref("Iterator")}} {{non-standard_inline()}}
    • -
  • {{jsxref("ParallelArray")}} {{non-standard_inline()}}
    • -
  • {{jsxref("StopIteration")}} {{non-standard_inline()}}
    • -
- -

Altres

- - -
- -

 

diff --git a/files/ca/web/javascript/referencia/objectes_globals/infinity/index.html b/files/ca/web/javascript/referencia/objectes_globals/infinity/index.html deleted file mode 100644 index 409609bfd2..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/infinity/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: Infinity -slug: Web/JavaScript/Referencia/Objectes_globals/Infinity -translation_of: Web/JavaScript/Reference/Global_Objects/Infinity ---- -
-
-
{{jsSidebar("Objects")}}
-
-
- -

Resum

- -

La propietat global Infinity és un valor numèric que representa l'infinit.

- -

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

- -

Sintaxi

- -
Infinity
- -

Descripció

- -

Infinity és una propietat de l'objecte global, és a dir, és una variable dins l'àmbit global.

- -

El valor inical de Infinity és {{jsxref("Number.POSITIVE_INFINITY")}}. El valor Infinity (infinit positiu) és major que qualsevol altre nombre. Aquest valor es comporta matemàticament com l'infinit; per exemple, qualsevol nombre positiu multiplicat per Infinity dóna com a resultat Infinity, qualsevol valor dividit per Infinity dóna 0.

- -

Tal i com la especificació ECMAScript 5 defineix, Infinity no pot ser sobreescrit (implementat a JavaScript 1.8.5  / Firefox 4).

- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacionsEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.3
{{SpecName('ES5.1', '#sec-15.1.1.2', 'Infinity')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-value-properties-of-the-global-object-infinity', 'Infinity')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Number.NEGATIVE_INFINITY")}}
    • -
  • {{jsxref("Number.POSITIVE_INFINITY")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/json/index.html b/files/ca/web/javascript/referencia/objectes_globals/json/index.html deleted file mode 100644 index efc86409e6..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/json/index.html +++ /dev/null @@ -1,242 +0,0 @@ ---- -title: JSON -slug: Web/JavaScript/Referencia/Objectes_globals/JSON -translation_of: Web/JavaScript/Reference/Global_Objects/JSON ---- -
{{JSRef("Global_Objects", "JSON")}}
- -

Resum

- -

L'objecte JSON conté mètodes per a interpretar JavaScript Object Notation ({{glossary("JSON")}}) i convertir valors a JSON. Aquest objecte no pot ser cridat o construit, i a banda dels seus dos mètodes no té cap més funcionalitat o interès.

- -

and converting values to JSON. It can't be called or constructed, and aside from its two method properties it has no interesting functionality of its own.

- -

Descripció

- -

JavaScript Object Notation

- -

JSON és una sintaxi que permet serialitzar objectes, arrays, nombres, strings, booleans i {{jsxref("null")}}. Està basada en la sintaxi de JavaScript però és diferent: algunes parts de JavaScript no són convertibles a JSON i algunes de JSON no ho són a JavaScript. Vegeu també JSON: El subconjunt de JavaScript que no ho és.

- - - - - - - - - - - - - - - - - - - - - - - -
Diferències entre JavaScript i JSON
Tipus a JavaScriptDiferències a JSON
Objectes i ArraysEls noms de les propietats han de estar embolcallats per cometes dobles; les cometes simples estan prohibides
NombresNo són permesos zeros a l'esquerra; els nombres decimals separent la part sencera amb un punt i han de tindre al menys un digit decimal.
Strings -

Només es pot escapar un grup limitat de caràcters; alguns caràcters de control no són permesos; el separador de línies Unicode (U+2028) i el separador de paràgrafs (U+2029) són permesos; les strings han d'estar embolcallades per cometes dobles. Vegeu l'exemple següent on {{jsxref("JSON.parse()")}} funciona correctament i es llença un {{jsxref("SyntaxError")}} a l'avaluar el codi com a JavaScript:

- - 
-var code = '"\u2028\u2029"';
-JSON.parse(code); // funciona correctament
-eval(code); // falla
-
-
- -

La sintaxi completa de JSON és la següent:

- -
JSON = null
-    o true o false
-    o JSONNumber
-    o JSONString
-    o JSONObject
-    o JSONArray
-
-JSONNumber = - PositiveNumber
-          o PositiveNumber
-PositiveNumber = DecimalNumber
-              o DecimalNumber . Digits
-              o DecimalNumber . Digits ExponentPart
-              o DecimalNumber ExponentPart
-DecimalNumber = 0
-             o OneToNine Digits
-ExponentPart = e Exponent
-            o E Exponent
-Exponent = Digits
-        o + Digits
-        o - Digits
-Digits = Digit
-      o Digits Digit
-Digit = 0 through 9
-OneToNine = 1 through 9
-
-JSONString = ""
-          o " StringCharacters "
-StringCharacters = StringCharacter
-                o StringCharacters StringCharacter
-StringCharacter = qualsevol caràcter excepte
-                  " o \ o U+0000 fins a U+001F
-               o EscapeSequence
-EscapeSequence = \" o \/ o \\ o \b o \f o \n o \r o \t
-              o \u HexDigit HexDigit HexDigit HexDigit
-HexDigit = 0 fins a 9
-        o A fins a F
-        o a fins a f
-
-JSONObject = { }
-          o { Members }
-Members = JSONString : JSON
-       o Members , JSONString : JSON
-
-JSONArray = [ ]
-         o [ ArrayElements ]
-ArrayElements = JSON
-             o ArrayElements , JSON
-
- -

Pot haver-hi espais en blanc sense significat a qualsevol lloc excepte dins un JSONNumber (el nombres no poden contenir espais) o JSONString (on s'interpreta com el caràcter corrsponen dins l'string, o causaria un error). Els caràcters tabulador (U+0009), retorn de carro (U+000D), nova línia (U+000A), i l'espai (U+0020) són els únics caràcters d'espai en blanc acceptats.

- -

Mètodes

- -
-
{{jsxref("JSON.parse()")}}
-
Interpreta una string com a JSON, opcionalment transforma el valor produït i les seves propietats, i retorna el valor.
-
{{jsxref("JSON.stringify()")}}
-
Retorna un JSON string corresponent al valor especificat, opcionalment només inclou determinades propietats o reemplaça el valor de propietats tal i com defineixi l'usuari.
-
- -

Polyfill

- -

L'objecte JSON no és suportat a navegadors antics. Aquest problema pot solventar-se insertant el codi següent al principi dels scripts, permetent l'ús de l'objecte JSON en implementacions on no hi ha suport natiu (com ara Internet Explorer 6).

- -

El següent algorisme emula l'objecte JSON natiu:

- -
if (!window.JSON) {
-  window.JSON = {
-    parse: function(sJSON) { return eval('(' + sJSON + ')'); },
-    stringify: (function () {
-      var toString = Object.prototype.toString;
-      var isArray = Array.isArray || function (a) { return toString.call(a) === '[object Array]'; };
-      var escMap = {'"': '\\"', '\\': '\\\\', '\b': '\\b', '\f': '\\f', '\n': '\\n', '\r': '\\r', '\t': '\\t'};
-      var escFunc = function (m) { return escMap[m] || '\\u' + (m.charCodeAt(0) + 0x10000).toString(16).substr(1); };
-      var escRE = /[\\"\u0000-\u001F\u2028\u2029]/g;
-      return function stringify(value) {
-        if (value == null) {
-          return 'null';
-        } else if (typeof value === 'number') {
-          return isFinite(value) ? value.toString() : 'null';
-        } else if (typeof value === 'boolean') {
-          return value.toString();
-        } else if (typeof value === 'object') {
-          if (typeof value.toJSON === 'function') {
-            return stringify(value.toJSON());
-          } else if (isArray(value)) {
-            var res = '[';
-            for (var i = 0; i < value.length; i++)
-              res += (i ? ', ' : '') + stringify(value[i]);
-            return res + ']';
-          } else if (toString.call(value) === '[object Object]') {
-            var tmp = [];
-            for (var k in value) {
-              if (value.hasOwnProperty(k))
-                tmp.push(stringify(k) + ': ' + stringify(value[k]));
-            }
-            return '{' + tmp.join(', ') + '}';
-          }
-        }
-        return '"' + value.toString().replace(escRE, escFunc) + '"';
-      };
-    })()
-  };
-}
-
- -

Dos polyfills complexos coneguts per a l'objecte JSON són JSON2 i JSON3.

- -

Especificacions

- - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES5.1', '#sec-15.12', 'JSON')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-json-object', 'JSON')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}{{CompatIE("8.0")}}{{CompatOpera("10.5")}}{{CompatSafari("4.0")}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Basat en la taula de compatibilitat de Kangax.

- -

Vegeu també

- -
    -
  • {{jsxref("Date.prototype.toJSON()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/map/clear/index.html b/files/ca/web/javascript/referencia/objectes_globals/map/clear/index.html deleted file mode 100644 index f29cc93eef..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/map/clear/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: Map.prototype.clear() -slug: Web/JavaScript/Referencia/Objectes_globals/Map/clear -translation_of: Web/JavaScript/Reference/Global_Objects/Map/clear ---- -
{{JSRef}}
- -

El mètode clear() esborra tots els elements d'un objecte de tipus Map.

- -

Sintaxi

- -
myMap.clear();
- -

Exemples

- -

Utilitzar el mètode clear

- -
var myMap = new Map();
-myMap.set("bar", "baz");
-myMap.set(1, "foo");
-
-myMap.size;       // 2
-myMap.has("bar"); // true
-
-myMap.clear();
-
-myMap.size;       // 0
-myMap.has("bar")  // false
-
- -

Especificacions

- - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-map.prototype.clear', 'Map.prototype.clear')}}{{Spec2('ES6')}}Definició inicial.
- -

Compatibilitat amb navegadors

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic38{{CompatGeckoDesktop("19.0")}}11257.1
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}38{{CompatGeckoMobile("19.0")}}{{CompatNo}}{{CompatNo}}8
-
- -

Vegeu també

- -
    -
  • {{jsxref("Map")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/map/delete/index.html b/files/ca/web/javascript/referencia/objectes_globals/map/delete/index.html deleted file mode 100644 index 01c1b2cf28..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/map/delete/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: Map.prototype.delete() -slug: Web/JavaScript/Referencia/Objectes_globals/Map/delete -translation_of: Web/JavaScript/Reference/Global_Objects/Map/delete ---- -
{{JSRef}}
- -

El mètode delete() elimina l'element especificat de l'objecte Map.

- -

Sintaxi

- -
myMap.delete(clau);
- -

Paràmetres

- -
-
clau
-
Necessari. La clau de l'element a eliminar de l'objecte Map.
-
- -

valor Return

- -

Retorna true si un element de l'objecte Map s'ha eleminat amb èxit.

- -

Exemples

- -

Utilitzar el mètode delete

- -
var myMap = new Map();
-myMap.set("bar", "foo");
-
-myMap.delete("bar"); // Retorna true. Eliminat satisfactòriament.
-myMap.has("bar");    // Retorna false. L'element "bar" ja no és present.
-
- -

Especificacions

- - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-map.prototype.delete', 'Map.prototype.delete')}}{{Spec2('ES6')}}Definició inicial.
- -

Compatibilitat amb navegadors

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic38{{CompatGeckoDesktop("13.0")}}11257.1
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}38{{CompatGeckoMobile("13.0")}}{{CompatNo}}{{CompatNo}}8
-
- -

Vegeu també

- -
    -
  • {{jsxref("Map")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/map/entries/index.html b/files/ca/web/javascript/referencia/objectes_globals/map/entries/index.html deleted file mode 100644 index d5f6942695..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/map/entries/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: Map.prototype.entries() -slug: Web/JavaScript/Referencia/Objectes_globals/Map/entries -translation_of: Web/JavaScript/Reference/Global_Objects/Map/entries ---- -
{{JSRef}}
- -

El mètode entries()retorna un nou objecte Iterator que conté la parella [clau, valor] per cadascun dels elements de l'objecte Map en l'ordre d'inserció.

- -

Sintaxi

- -
myMap.entries()
- -

Exemples

- -

Utilitzar entries()

- -
var myMap = new Map();
-myMap.set("0", "foo");
-myMap.set(1, "bar");
-myMap.set({}, "baz");
-
-var mapIter = myMap.entries();
-
-console.log(mapIter.next().value); // ["0", "foo"]
-console.log(mapIter.next().value); // [1, "bar"]
-console.log(mapIter.next().value); // [Object, "baz"]
-
- -

Especificacions

- - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-map.prototype.entries', 'Map.prototype.entries')}}{{Spec2('ES6')}}Definició inicial.
- -

Compatibilitat amb navegadors

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic38{{ CompatGeckoDesktop("20") }}{{CompatNo}}257.1
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}38{{CompatGeckoMobile("20")}}{{CompatNo}}{{CompatNo}}8
-
- -

Vegeu també

- -
    -
  • {{jsxref("Map.prototype.keys()")}}
    • -
  • {{jsxref("Map.prototype.values()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/map/foreach/index.html b/files/ca/web/javascript/referencia/objectes_globals/map/foreach/index.html deleted file mode 100644 index 7097bbee3d..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/map/foreach/index.html +++ /dev/null @@ -1,136 +0,0 @@ ---- -title: Map.prototype.forEach() -slug: Web/JavaScript/Referencia/Objectes_globals/Map/forEach -translation_of: Web/JavaScript/Reference/Global_Objects/Map/forEach ---- -
{{JSRef}}
- -

El mètode forEach() executa la funció proporcionada un cop epr cada parell clau/valor dins l'objecte Map, seguint l'ordre en el que han estat inserits.

- -

Sintaxi

- -
myMap.forEach(callback[, thisArg])
- -

Paràmetres

- -
-
callback
-
Funció a executar per a cada element.
-
thisArg
-
Valor a utilitzar com a this mentre s'estigui executant executing callback.
-
- -

Descripció

- -

El mètode forEach executa la funció callback  proporcionada un cop per a cada clau que existeixi dins el mapa. No s'invocarà la funció per a claus que hagin estat esborrades. Tanmateix si que s'executarà per a valors amb clau present però que el seu valor sigui undefined.

- -

callback s'invocarà amb tres arguments:

- -
    -
  • el valor de l'element
    • -
  • la clau de l'element
    • -
  • l'objecte Map que s'està recorrent
    • -
- -

Si es proporciona el paràmetre thisArg a la crida de forEach, aquest es passarà a callback quan s'invoqui per a ser utilitzat com a this dins la funció.  En qualsevol altre cas el valor que rebrà this dins la funció callback serà undefined. El valor de this que serà finalment observable dins de callback és determinat d'acord a les regles habituals per a determinar el valor de this observat dins d'una funció.

- -

Cada valor serà visitat un cop, a no ser que hagi estat eliminat o tornar a afegir abans que el mètode forEach acabi. No s'invocarà callback per a valors eliminats abans de ser visitats. Si que es visitaran, però, valors nous afegits abans forEach no hagi acabat.

- -

forEach executa la funció callback un cop per cada element de l'objecte Map; no retorna cap valor.

- -

Exemples

- -

Mostrar els continguts d'un objecte Map

- -

El codi següent mostra una línia per cada element d'un objecte Map:

- -
function logMapElements(value, key, map) {
-    console.log("m[" + key + "] = " + value);
-}
-Map([["foo", 3], ["bar", {}], ["baz", undefined]]).forEach(logMapElements);
-// mostra:
-// "m[foo] = 3"
-// "m[bar] = [object Object]"
-// "m[baz] = undefined"
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-map.prototype.foreach', 'Map.prototype.forEach')}}{{Spec2('ES6')}}Definició inicial.
{{SpecName('ESDraft', '#sec-map.prototype.foreach', 'Map.prototype.forEach')}}{{Spec2('ESDraft')}} 
- -

Compatibilitat amb navegadors

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic38{{CompatGeckoDesktop("25.0")}}11257.1
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}38{{CompatGeckoMobile("25.0")}}{{CompatNo}}{{CompatNo}}8
-
- -

Vegeu també

- -
    -
  • {{jsxref("Array.prototype.forEach()")}}
    • -
  • {{jsxref("Set.prototype.forEach()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/map/get/index.html b/files/ca/web/javascript/referencia/objectes_globals/map/get/index.html deleted file mode 100644 index ec345df059..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/map/get/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: Map.prototype.get() -slug: Web/JavaScript/Referencia/Objectes_globals/Map/get -translation_of: Web/JavaScript/Reference/Global_Objects/Map/get ---- -
{{JSRef}}
- -

El mètode get() retorna l'element especifciat d'un objecte Map.

- -

Sintaxi

- -
myMap.get(clau);
- -

Paràmetres

- -
-
clau
-
Obligatori. La clau de l'element a retorna de l'objecte Map.
-
- -

Valor a retornar

- -

Retorna l'element associat a la clau especificada o bé undefined si no s'ha pogut trobar la clau dins l'objecte Map.

- -

Exemples

- -

Utilitzar el mètode get

- -
var myMap = new Map();
-myMap.set("bar", "foo");
-
-myMap.get("bar");  // Retorna "foo".
-myMap.get("baz");  // Retorna undefined.
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-map.prototype.get', 'Map.prototype.get')}}{{Spec2('ES6')}}Definició inicial.
{{SpecName('ESDraft', '#sec-map.prototype.get', 'Map.prototype.get')}}{{Spec2('ESDraft')}} 
- -

Compatibilitat amb navegadors

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic38{{CompatGeckoDesktop("13.0")}}11257.1
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}38{{CompatGeckoMobile("13.0")}}{{CompatNo}}{{CompatNo}}8
-
- -

Vegeu també

- -
    -
  • {{jsxref("Map")}}
    • -
  • {{jsxref("Map.prototype.set()")}}
    • -
  • {{jsxref("Map.prototype.has()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/map/has/index.html b/files/ca/web/javascript/referencia/objectes_globals/map/has/index.html deleted file mode 100644 index d0ce1bec54..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/map/has/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: Map.prototype.has() -slug: Web/JavaScript/Referencia/Objectes_globals/Map/has -translation_of: Web/JavaScript/Reference/Global_Objects/Map/has ---- -
{{JSRef}}
- -

El mètode has() retorna un booleà que indica si existeix un element amb la clau especificada o no.

- -

Sintaxi

- -
myMap.has(clau);
- -

Paràmetres

- -
-
clau
-
Obligatori. La clau de l'element que es comprovarà si existeix o no dins l'objecte Map.
-
- -

Valor retornat

- -
-
Booleà
-
Retorna true si existeix un element amb la clau proporcionada dins l'objecte Map; retorna false en qualsevol altre cas.
-
- -

Exemples

- -

Utilitzar el mètode has

- -
var myMap = new Map();
-myMap.set("bar", "foo");
-
-myMap.has("bar");  // retorn true
-myMap.has("baz");  // retorn false
-
- -

Especificacions

- - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-map.prototype.has', 'Map.prototype.has')}}{{Spec2('ES6')}}Definició inicial.
- -

Compatibilitat amb navegadors

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic38{{CompatGeckoDesktop("13.0")}}11257.1
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}38{{CompatGeckoMobile("13.0")}}{{CompatNo}}{{CompatNo}}8
-
- -

Vegeu també

- -
    -
  • {{jsxref("Map")}}
    • -
  • {{jsxref("Map.prototype.set()")}}
    • -
  • {{jsxref("Map.prototype.get()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/map/index.html b/files/ca/web/javascript/referencia/objectes_globals/map/index.html deleted file mode 100644 index 8e2bb647bd..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/map/index.html +++ /dev/null @@ -1,385 +0,0 @@ ---- -title: Map -slug: Web/JavaScript/Referencia/Objectes_globals/Map -translation_of: Web/JavaScript/Reference/Global_Objects/Map ---- -
{{JSRef("Global_Objects", "Map")}}
- -

Resum

- -

L'objecte Map és un simple mapa de parelles clau/valor. Qualsevol valor (tant objectes com {{Glossary("Primitive", "primitive values")}}) poden fer-se servir tant com a clau com a valor.

- -

Sintaxi

- -
new Map([iterable])
-
- -

Paràmetres

- -
-
iterable
-
Iterable és un Array o un altre objecte iterable els quals els seus elements són parelles clau/valor (Arrays de 2 elements). Cada parella clau/valor serà afegida al nou mapa. nul és tracta com a indefinit.
-
- -

Descripció

- -

Un objecte Map pot iterar els seus elements en ordre d'inserció - un bucle for..of retornarà un array de [key, value] per cada iteració.

- -

Igualtat de claus

- -

La igualtat de claus es basa en l'algorisme "mateix valor": NaN es considera igual a NaN (tot i que NaN !== NaN) i tots els altres valors es consideren iguals d'acord amb la semàntica de l'operador ===. En versions anteriors a l'esborrany de l'ECMAScript 6 -0 i +0 es consideraven diferents (tot i que -0 === +0), aquest comportament s'ha canviat en versions posteriors i ha sigut adaptat al {{geckoRelease("29")}} ({{bug("952870")}}) i una versió diària de Chrome.

- -

Comparació d'objectes amb mapes

- -

Els {{jsxref("Object", "Objects")}} son similars als Maps en el sentit que tots dos permeten assignar valors a claus, obtenir aquests valors, esborrar claus i detectar si una clau té un valor assignat o no. Degut a això, històricament s'han fet anar Objects com a Maps; tot i això existeixen diferències importants entre Objects i Maps que fan que l'ús de Map sigui millor.

- -
    -
  • Un Object té un prototipus, això implica que hi haurà algunes claus definides inicialment. Aquest problem es pot adreçar utilitzant map = Object.create(null).
    • -
  • Les claus d'un Object són {{jsxref("String", "Strings")}}, mentre que les claus d'un Map poden ser de qualsevol tipus.
    • -
  • És fàcil obtindre el tamany d'un Map mentre que el tamany d'un Object ha de ser calculat manualment.
    • -
- -

Utilitzeu mapes en comptes d'objejctes quan les claus no se sàpiguin en temps d'execució, o bé quan totes les claus o els valors siguin del mateix tipus.

- -

Utilitzeu objectes quan hi hagi una lògica que operi els elements individualment.

- -

Propietats

- -
-
Map.length
-
El valor de la propietat length és 1.
-
{{jsxref("Map.prototype")}}
-
Representa el prototipus pel constructor Map. Permet afegir propietats a tots els objectes de tipus Map.
-
- -

Instàncies de Map

- -

Totes les instàncies de Map hereten de {{jsxref("Map.prototype")}}.

- -

Propietats

- -

{{page('ca/Web/JavaScript/Reference/Global_Objects/Map/prototype','Propietats')}}

- -

Mètodes

- -

{{page('ca/Web/JavaScript/Reference/Global_Objects/Map/prototype','Mètodes')}}

- -

Exemples

- -

Exemple: Utilitzar l'objecte Map

- -
var myMap = new Map();
-
-var keyObj = {},
-    keyFunc = function () {},
-    keyString = "a string";
-
-// preparar els valors
-myMap.set(keyString, "valor associat a amb 'un string'");
-myMap.set(keyObj, "valor associat amb keyObj");
-myMap.set(keyFunc, "valor associat amb with keyFunc");
-
-myMap.size; // 3
-
-// obtenir els valors
-myMap.get(keyString);    // "valor associat amb 'un string'"
-myMap.get(keyObj);       // "valor associat amb keyObj"
-myMap.get(keyFunc);      // "valor associat amb keyFunc"
-
-myMap.get("a string");   // "valor associat amb 'un string'"
-                         // com que keyString === 'un string'
-myMap.get({});           // undefined, perquè keyObj !== {}
-myMap.get(function() {}) // undefined, perquè keyFunc !== function () {}
-
- -

Exemple: Utilitzar NaN com a claus en un Map

- -

NaN també pot emprar-se com a clau. Tot i que NaN no és igual a si mateix (NaN !== NaN és cert), l'exemple següent funciona perquè els NaNs són indistinguibles entre ells:

- -
var myMap = new Map();
-myMap.set(NaN, "no un nombre");
-
-myMap.get(NaN); // "no un nombre"
-
-var altreNaN = Number("foo");
-myMap.get(altreNaN); // "no un nombre"
-
- -

Exemple: Iterar Maps amb for..of

- -

Els mapes es poden iterar fent servir un bucle for..of :

- -
var myMap = new Map();
-myMap.set(0, "zero");
-myMap.set(1, "un");
-for (var [key, value] of myMap) {
-  alert(key + " = " + value);
-}
-// Mostrarà 2 alertes; el primer amb "0 = zero" i el segon amb "1 = one"
-
-for (var key of myMap.keys()) {
-  alert(key);
-}
-// Mostrarà 2 alertes; el primer amb "0" i el segon amb "1"
-
-for (var value of myMap.values()) {
-  alert(value);
-}
-// Mostrarà 2 alertes; el primer amb "zero" i el segon amb "un"
-
-for (var [key, value] of myMap.entries()) {
-  alert(key + " = " + value);
-}
-// Mostrarà 2 alertes; el primer amb "0 = zero" i el segon amb "1 = un"
-
-myMap.forEach(function(value, key) {
-  alert(key + " = " + value);
-}, myMap)
-// Mostrarà 2 alertes; el primer amb "0 = zero" i el segon amb "1 = un"
-
- -

Exemple: Relació amb els objectes Array

- -
var kvArray = [["clau1", "valor1"], ["clau2", "valor2"]];
-
-// Utilitzeu el constructor de Map normal per a transformar un Array 2D clau-valor en un mapa
-var myMap = new Map(kvArray);
-
-myMap.get("valor1"); // retorna "valor1"
-
-// Utilitzeu l'operador spread per a transformar un mapa en un Array 2D clau-valor.
-alert(uneval([...myMap])); // Mostrarà exactament el mateix Array que kvArray
-
-// O bé utilitzeu l'operador spread a l'iterador de les claus o els valor per a obtenir
-// un array de només les claus o els valors
-alert(uneval([...myMap.keys()])); // Mostrarà ["clau1", "clau2"]
-
- -

Especificacions

- - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-map-objects', 'Map')}}{{Spec2('ES6')}}Definició inicial.
- -

Compatibilitat amb navegadors

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic -

{{ CompatChrome(31) }} [1]
- {{ CompatChrome(38) }}

- 		{{ CompatGeckoDesktop("13") }}11257.1
Argument del constructor: new Map(iterable){{ CompatChrome(38) }}{{ CompatGeckoDesktop("13") }}{{ CompatNo() }}25{{ CompatNo() }}
iterable{{ CompatChrome(38) }}{{ CompatGeckoDesktop("17") }}{{ CompatNo() }}257.1
Map.clear(){{ CompatChrome(31) }} [1]
- {{ CompatChrome(38) }}		{{CompatGeckoDesktop("19")}}11257.1
Map.keys(), Map.values(), Map.entries(){{ CompatChrome(37) }} [1]
- {{ CompatChrome(38) }}		{{CompatGeckoDesktop("20")}}{{ CompatNo() }}257.1
Map.forEach(){{ CompatChrome(36) }} [1]
- {{ CompatChrome(38) }}		{{CompatGeckoDesktop("25")}}11257.1
Igualtat de claus per a -0 i 0{{ CompatChrome(34) }} [1]
- {{ CompatChrome(38) }}		{{CompatGeckoDesktop("29")}}{{ CompatNo() }}25{{ CompatNo() }}
Argument del constructor: new Map(null){{ CompatVersionUnknown() }}{{CompatGeckoDesktop("37")}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
Monkey-patched set() al Constructor{{ CompatVersionUnknown() }}{{CompatGeckoDesktop("37")}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatNo() }}{{ CompatChrome(31) }} [1]
- {{ CompatChrome(38) }}		{{ CompatGeckoMobile("13") }}{{ CompatNo() }}{{ CompatNo() }}iOS 8
Argument del constructor: new Map(iterable){{ CompatNo() }}{{ CompatChrome(38) }}{{ CompatGeckoMobile("13") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo }}
iterable{{ CompatNo() }}{{ CompatNo() }}{{ CompatGeckoMobile("17") }}{{ CompatNo() }}{{ CompatNo() }}iOS 8
Map.clear(){{ CompatNo() }}{{ CompatChrome(31) }} [1]
- {{ CompatChrome(38) }}		{{CompatGeckoMobile("19")}}{{ CompatNo() }}{{ CompatNo() }}iOS 8
Map.keys(), Map.values(), Map.entries(){{ CompatNo() }}{{ CompatChrome(37) }} [1]
- {{ CompatChrome(38) }}		{{CompatGeckoMobile("20")}}{{ CompatNo() }}{{ CompatNo() }}iOS 8
Map.forEach(){{ CompatNo() }}{{ CompatChrome(36) }} [1]
- {{ CompatChrome(38) }}		{{CompatGeckoMobile("25")}}{{ CompatNo() }}{{ CompatNo() }}iOS 8
Igualtat per a -0 i 0{{ CompatNo() }}{{ CompatChrome(34) }} [1]
- {{ CompatChrome(38) }}		{{CompatGeckoMobile("29")}}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
Argument del constructor: new Map(null){{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{CompatGeckoMobile("37")}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
Monkey-patched set() al Constructor{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{CompatGeckoMobile("37")}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
- -

[1] The feature is available behind a preference. In chrome://flags, activate the entry “Enable Experimental JavaScript”.

- -

Vegeu també

- - diff --git a/files/ca/web/javascript/referencia/objectes_globals/map/keys/index.html b/files/ca/web/javascript/referencia/objectes_globals/map/keys/index.html deleted file mode 100644 index 47c975a891..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/map/keys/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: Map.prototype.keys() -slug: Web/JavaScript/Referencia/Objectes_globals/Map/keys -translation_of: Web/JavaScript/Reference/Global_Objects/Map/keys ---- -
{{JSRef}}
- -

El mètode keys() retorna un nou objecte Iterator que conté les claus per cadascún dels elements de l'objecte Map en l'ordre d'insersió.

- -

Sintaxi

- -
myMap.keys()
- -

Exemples

- -

Utilitzar keys()

- -
var myMap = new Map();
-myMap.set("0", "foo");
-myMap.set(1, "bar");
-myMap.set({}, "baz");
-
-var mapIter = myMap.keys();
-
-console.log(mapIter.next().value); // "0"
-console.log(mapIter.next().value); // 1
-console.log(mapIter.next().value); // Objecte
-
- -

Especificacions

- - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-map.prototype.keys', 'Map.prototype.keys')}}{{Spec2('ES6')}}Definició inicial.
- -

Compatibilitat amb navegadors

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic38{{CompatGeckoDesktop("20")}}{{CompatNo}}257.1
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}38{{CompatGeckoMobile("20") }}{{CompatNo}}{{CompatNo}}8
-
- -

Vegeu també

- -
    -
  • {{jsxref("Map.prototype.entries()")}}
    • -
  • {{jsxref("Map.prototype.values()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/map/prototype/index.html b/files/ca/web/javascript/referencia/objectes_globals/map/prototype/index.html deleted file mode 100644 index 3a7508f042..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/map/prototype/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: Map.prototype -slug: Web/JavaScript/Referencia/Objectes_globals/Map/prototype -translation_of: Web/JavaScript/Reference/Global_Objects/Map -translation_of_original: Web/JavaScript/Reference/Global_Objects/Map/prototype ---- -
{{JSRef}}
- -

La propietat Map.prototype representa el prototipus per al constructor de {{jsxref("Map")}}.

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

Descripció

- -

Les instàncies de {{jsxref("Map")}} hereten de {{jsxref("Map.prototype")}}. Es pot utilitzar el prototipus de l'objecte constructor per a afegir propietats o mètodes a totes les instàncies de Map.

- -

Propietats

- -
-
Map.prototype.constructor
-
Retorna la funció que ha creat el una instància del prototipus. Per defecte és la funció {{jsxref("Map")}}.
-
{{jsxref("Map.prototype.size")}}
-
Retorna el nombre de parells clau-valor que conté l'objecte Map.
-
- -

Mètodes

- -
-
{{jsxref("Map.prototype.clear()")}}
-
Elimina tots els parells clau-valor de l'objecte Map.
-
{{jsxref("Map.delete", "Map.prototype.delete(clau)")}}
-
Elimina el valor associat a la clau especificada i retorna el valor que el mètode Map.prototype.has(valor) hagués retornat abans d'eliminar-lo. Map.prototype.has(clau) retornarà false després de cridar aquest mètode.
-
{{jsxref("Map.prototype.entries()")}}
-
Retorna un nou objecte Iterator que conté un array de [clau, valor] per a cada element dins l'objecte Map, en estricte ordre d'inserció.
-
{{jsxref("Map.forEach", "Map.prototype.forEach(callbackFn[, thisArg])")}}
-
Crida callbackFn per a cada parell clau-valor present a l'objecte Map, recorreguts per ordre d'inserció. Si es proporciona el paràmetre thisArg, aquest s'utilitzarà com a valor de this per a cada crida a callbackFn.
-
{{jsxref("Map.get", "Map.prototype.get(clau)")}}
-
Retorna el valor associat a la clau, o bé undefined si aquesta clau no té cap valor associat.
-
{{jsxref("Map.has", "Map.prototype.has(clau)")}}
-
Retorna un booleà que especifica si la clau té un valor associat en aquest objecte Map o no.
-
{{jsxref("Map.prototype.keys()")}}
-
Retorna un nou objecte Iterator que conté les claus de cada element de l'objecte Map, en ordre d'inserció.
-
{{jsxref("Map.set", "Map.prototype.set(clau, valor)")}}
-
Assigna valor a la clau a l'objecte Map. Retorna l'objecte Map.
-
{{jsxref("Map.prototype.values()")}}
-
Retorna un nou objecte Iterator que conté els valors de cada element de l'objecte Map, en ordre d'inserció.
-
{{jsxref("Map.@@iterator", "Map.prototype[@@iterator]()")}}
-
Retorna un nou objecte Iterator que conté un array de [clau, valor] per a cada element de l'objecte Map, en ordre d'inserció.
-
- -

Especificacions

- - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-map.prototype', 'Map.prototype')}}{{Spec2('ES6')}}Definició inicial.
- -

Compatibilitat amb navegadors

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic38{{ CompatGeckoDesktop("13") }}11257.1
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}38{{CompatGeckoMobile("13")}}{{CompatNo}}{{CompatNo}} -

8

-
-
- -

Vegeu també

- -
    -
  • {{jsxref("Set.prototype")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/map/set/index.html b/files/ca/web/javascript/referencia/objectes_globals/map/set/index.html deleted file mode 100644 index 3b77060831..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/map/set/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: Map.prototype.set() -slug: Web/JavaScript/Referencia/Objectes_globals/Map/set -translation_of: Web/JavaScript/Reference/Global_Objects/Map/set ---- -
{{JSRef}}
- -

El mètode set() afegeig un nou element amb la clau i el valor especificats a un objecte de tipus Map.

- -

Sintaxi

- -
myMap.set(clau, valor);
- -

Paràmetres

- -
-
clau
-
Obligatori. La clau de l'element a afegir a l'objecte Map.
-
valor
-
Obligatori. El valor de l'element a afegir a l'objecte Map.
-
- -

Valor retornat

- -

L'objecte Map.

- -

Exemples

- -

Utilitzar el mètode set

- -
var myMap = new Map();
-
-// Afegim nous elements al mapa
-myMap.set("bar", "foo");
-myMap.set(1, "foobar");
-
-// Actualitzem un element amb una clau ja existent al mapa
-myMap.set("bar", "fuuu");
-
- -

Especificacions

- - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-map.prototype.set', 'Map.prototype.set')}}{{Spec2('ES6')}}Definició inicial.
- -

Compatibilitat amb navegadors

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic38{{CompatGeckoDesktop("13.0")}}11257.1
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}38{{CompatGeckoMobile("13.0")}}{{CompatNo}}{{CompatNo}}8
-
- -

Notes sobre compatibilitat

- -
    -
  • Abans del Firefox 33 {{geckoRelease("33")}}, Map.prototype.set retornava undefined i en conseqüència no permitia la crida encadenada. Aquest problema va ser solucionat ({{bug(1031632)}}). Aquest comportament també es pot observar al Chrome/v8 (problema).
    • -
- -

Vegeu també

- -
    -
  • {{jsxref("Map")}}
    • -
  • {{jsxref("Map.prototype.get()")}}
    • -
  • {{jsxref("Map.prototype.has()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/map/size/index.html b/files/ca/web/javascript/referencia/objectes_globals/map/size/index.html deleted file mode 100644 index aa70c7d84b..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/map/size/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: Map.prototype.size -slug: Web/JavaScript/Referencia/Objectes_globals/Map/size -translation_of: Web/JavaScript/Reference/Global_Objects/Map/size ---- -
{{JSRef}}
- -

La propietat d'accés size retorna el número d'elements en un objecte {{jsxref("Map")}}.

- -

Descripció

- -

El valor de size és un nombre sencer que representa quantes entrades té l'objecte Map. Una funció d'accés establerta per size és undefined; aquesta propietat no es pot canviar.

- -

Exemples

- -

Utilitzar size

- -
var myMap = new Map();
-myMap.set("a", "alpha");
-myMap.set("b", "beta");
-myMap.set("g", "gamma");
-
-myMap.size // 3
-
- -

Especificacions

- - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-get-map.prototype.size', 'Map.prototype.size')}}{{Spec2('ES6')}}Definició inicial.
- -

Compatibilitat amb navegadors

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support38{{ CompatGeckoDesktop("19") }}{{ CompatIE("11") }}257.1
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}38{{CompatGeckoMobile("19")}}{{CompatNo}}{{CompatNo}}8
-
- -

Notes específiques de Gecko

- -
    -
  • A partir de Gecko 13 {{geckoRelease("13")}} fins Gecko 18 {{geckoRelease("18")}} la propietat size era implementada com un mètode Map.prototype.size(), aquesta s'ha canviat a una propietat en versions posteriors conforme l'especificació d'ECMAScript 6 ({{bug("807001")}}).
    • -
- -

Vegeu també

- -
    -
  • {{jsxref("Map")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/map/values/index.html b/files/ca/web/javascript/referencia/objectes_globals/map/values/index.html deleted file mode 100644 index f1b23be7e7..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/map/values/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: Map.prototype.values() -slug: Web/JavaScript/Referencia/Objectes_globals/Map/values -translation_of: Web/JavaScript/Reference/Global_Objects/Map/values ---- -
{{JSRef}}
- -

El mètode values() retorna un nou objecte Iterator que conté els valor per cadascún dels elements de l'objecte Map en l'ordre d'inserció.

- -

Sintaxi

- -
myMap.values()
- -

Exemples

- -

Utilitzar values()

- -
var myMap = new Map();
-myMap.set("0", "foo");
-myMap.set(1, "bar");
-myMap.set({}, "baz");
-
-var mapIter = myMap.values();
-
-console.log(mapIter.next().value); // "foo"
-console.log(mapIter.next().value); // "bar"
-console.log(mapIter.next().value); // "baz"
- -

Especificacions

- - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-map.prototype.values', 'Map.prototype.values')}}{{Spec2('ES6')}}Definició inicial.
- -

Compatibilitat amb navegadors

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic38{{ CompatGeckoDesktop("20") }}{{CompatNo}}257.1
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}38{{ CompatGeckoMobile("20") }}{{CompatNo}}{{CompatNo}}8
-
- -

Vegeu també

- -
    -
  • {{jsxref("Map.prototype.entries()")}}
    • -
  • {{jsxref("Map.prototype.keys()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/math/abs/index.html b/files/ca/web/javascript/referencia/objectes_globals/math/abs/index.html deleted file mode 100644 index 34d3e5beb9..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/math/abs/index.html +++ /dev/null @@ -1,129 +0,0 @@ ---- -title: Math.abs() -slug: Web/JavaScript/Referencia/Objectes_globals/Math/abs -translation_of: Web/JavaScript/Reference/Global_Objects/Math/abs ---- -
{{JSRef("Global_Objects", "Math")}}
- -

Resum

- -

La funció Math.abs() retorna el valor absolut d'un nombre. És a dir:

- -

Math.abs(x)=|x|={xifx>00ifx=0-xifx<0{\mathtt{\operatorname{Math.abs}(x)}} = {|x|} = \begin{cases} x & \text{if} \quad x \geq 0 \\ -x & \text{if} \quad x < 0 \end{cases}

- -

Sintaxi

- -
Math.abs(x)
- -

Paràmetres

- -
-
x
-
Un nombre.
-
- -

Descripció

- -

Degut a que abs() és un mètode estàtic de Math, sempre s'utilitza com a Math.abs(), en comptes de com a mètode d'una instància de Math (Math no és un constructor).

- -

Exemples

- -

Exemple: Comportament de Math.abs()

- -

Si li passem una string no numèric o bé una variable {{jsxref("undefined")}}/buida retorna {{jsxref("NaN")}}. Passar {{jsxref("null")}} retorna 0.

- -
Math.abs('-1');     // 1
-Math.abs(-2);       // 2
-Math.abs(null);     // 0
-Math.abs('string'); // NaN
-Math.abs();         // NaN
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.2.1', 'Math.abs')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.abs', 'Math.abs')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Math.ceil()")}}
    • -
  • {{jsxref("Math.floor()")}}
    • -
  • {{jsxref("Math.round()")}}
    • -
  • {{jsxref("Math.sign()")}} {{experimental_inline}}
    • -
  • {{jsxref("Math.trunc()")}} {{experimental_inline}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/math/acos/index.html b/files/ca/web/javascript/referencia/objectes_globals/math/acos/index.html deleted file mode 100644 index fdf781a4e2..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/math/acos/index.html +++ /dev/null @@ -1,131 +0,0 @@ ---- -title: Math.acos() -slug: Web/JavaScript/Referencia/Objectes_globals/Math/acos -translation_of: Web/JavaScript/Reference/Global_Objects/Math/acos ---- -
{{JSRef("Global_Objects", "Math")}}
- -

Resum

- -

La funció Math.acos() retorna l'arccosinus (mesurat en radians) d'un nombre, és a dir:x∊[-1;1],Math.acos(x)=arccos(x)= l'únic y∊[0;π]tal quecos(y)=x\forall x \in [{-1};1],\;\mathtt{\operatorname{Math.acos}(x)} = \arccos(x) = \text{ the unique } \; y \in [0; \pi] \, \text{such that} \; \cos(y) = x

- -

Sintaxi

- -
Math.acos(x)
- -

Paràmetres

- -
-
x
-
Un nombre.
-
- -

Descripció

- -

El mètode Math.acos() retorna un valor numèric entre 0 i π radians per a x entre -1 i 1. Si el valor de x està fora d'aquest rang, retorna {{jsxref("NaN")}}.

- -

Degut a que acos() és un mètode estàtic de Math, sempre s'utilitza com a Math.acos(), en comptes de com a mètode d'una instància de Math (Math no és un constructor).

- -

Exemples

- -

Exemple: Utilitzar Math.acos()

- -
Math.acos(-2);  // NaN
-Math.acos(-1);  // 3.141592653589793
-Math.acos(0);   // 1.5707963267948966
-Math.acos(0.5); // 1.0471975511965979
-Math.acos(1);   // 0
-Math.acos(2);   // NaN
-
- -

Per a valors menors que -1 o majors que 1, Math.acos() retorna {{jsxref("NaN")}}.

- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.2.2', 'Math.acos')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.acos', 'Math.acos')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Math.asin()")}}
    • -
  • {{jsxref("Math.atan()")}}
    • -
  • {{jsxref("Math.atan2()")}}
    • -
  • {{jsxref("Math.cos()")}}
    • -
  • {{jsxref("Math.sin()")}}
    • -
  • {{jsxref("Math.tan()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/math/acosh/index.html b/files/ca/web/javascript/referencia/objectes_globals/math/acosh/index.html deleted file mode 100644 index edfe1dd8c0..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/math/acosh/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: Math.acosh() -slug: Web/JavaScript/Referencia/Objectes_globals/Math/acosh -translation_of: Web/JavaScript/Reference/Global_Objects/Math/acosh ---- -
{{JSRef}}
- -

La funció Math.acosh() retorna l'accosinus hiperbòlic d'un nombre, és a dir

- -

∀x≥1,Math.acosh(x)=arcosh(x)= l'única y≥0tal quecosh(y)=x\forall x \geq 1, \mathtt{\operatorname{Math.acosh}(x)} = \operatorname{arcosh}(x) = \text{ the unique } \; y \geq 0 \; \text{such that} \; \cosh(y) = x

- -

Sintaxi

- -
Math.acosh(x)
- -

Paràmetres

- -
-
x
-
Un nombre.
-
- -

Descripció

- -

Com que que acosh() és un mètode estàtic de Math, sempre s'utilitza com a Math.acosh(), en comptes de com a mètode d'una instància de Math (Math no és un constructor).

- -

Exemples

- -

Utilitzar Math.acosh()

- -
Math.acosh(-1); // NaN
-Math.acosh(0);  // NaN
-Math.acosh(0.5) // NaN
-Math.acosh(1);  // 0
-Math.acosh(2);  // 1.3169578969248166
-
- -

Math.acosh() retorna {{jsxref("NaN")}} per a valors menors que 1.

- -

Polyfill

- -

Per a tot x≥1x \geq 1, tenim que arcosh(x)=ln(x+x2-1)\operatorname {arcosh} (x) = \ln \left(x + \sqrt{x^{2} - 1} \right) i, per tant, es pot emular mitjançant la funció següent:

- -
Math.acosh = Math.acosh || function(x) {
-  return Math.log(x + Math.sqrt(x * x - 1));
-};
-
- -

Especificacions

- - - - - - - - - - - - - - -
EspecificacionsEstatComentaris
{{SpecName('ES6', '#sec-math.acosh', 'Math.acosh')}}{{Spec2('ES6')}}Definició inicial.
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome("38")}}{{CompatGeckoDesktop("25")}}{{CompatNo}}{{CompatOpera("25")}}{{CompatSafari("7.1")}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("25")}}{{CompatNo}}{{CompatNo}}8
-
- -

Vegeu també

- -
    -
  • {{jsxref("Math.asinh()")}} {{experimental_inline}}
    • -
  • {{jsxref("Math.atanh()")}} {{experimental_inline}}
    • -
  • {{jsxref("Math.cosh()")}} {{experimental_inline}}
    • -
  • {{jsxref("Math.sinh()")}} {{experimental_inline}}
    • -
  • {{jsxref("Math.tanh()")}} {{experimental_inline}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/math/asin/index.html b/files/ca/web/javascript/referencia/objectes_globals/math/asin/index.html deleted file mode 100644 index 81288af5b6..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/math/asin/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: Math.asin() -slug: Web/JavaScript/Referencia/Objectes_globals/Math/asin -translation_of: Web/JavaScript/Reference/Global_Objects/Math/asin ---- -
{{JSRef("Global_Objects", "Math")}}
- -

Resum

- -

La funció Math.asin() retorna l'arcsinus (en radians) d'un nombre, és a dir:

- -

∀x∊[-1;1],Math.asin(x)=arcsin(x)= l'únic y∊[-π2;π2]tal que  sin(y)=x\forall x \in [{-1};1],\;\mathtt{\operatorname{Math.asin}(x)} = \arcsin(x) = \text{ the unique } \; y \in \left[-\frac{\pi}{2}; \frac{\pi}{2}\right] \, \text{such that} \; \sin(y) = x

- -

Sintaxi

- -
Math.asin(x)
- -

Paràmetres

- -
-
x
-
Un nombre.
-
- -

Descripció

- -

El mètode Math.asin() retorna un valor numèric entre -π2-\frac{\pi}{2} i π2\frac{\pi}{2} radians per a x entre -1 i 1. Si el valor de x està fora d'aquest rang la funció retorna {{jsxref("NaN")}}.

- -

Degut a que asin() és un mètode estàtic de Math, sempre s'utilitza com a Math.asin(), en comptes de com a mètode d'una instància de Math (Math no és un constructor).

- -

Exemples

- -

Exemple: Ús de Math.asin()

- -
Math.asin(-2);  // NaN
-Math.asin(-1);  // -1.5707963267948966 (-pi/2)
-Math.asin(0);   // 0
-Math.asin(0.5); // 0.5235987755982989
-Math.asin(1);   // 1.570796326794897 (pi/2)
-Math.asin(2);   // NaN
-
- -

Per a valors menors que -1 o majors que 1, Math.asin() retorna {{jsxref("NaN")}}.

- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.2.3', 'Math.asin')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.asin', 'Math.asin')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Math.acos()")}}
    • -
  • {{jsxref("Math.atan()")}}
    • -
  • {{jsxref("Math.atan2()")}}
    • -
  • {{jsxref("Math.cos()")}}
    • -
  • {{jsxref("Math.sin()")}}
    • -
  • {{jsxref("Math.tan()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/math/asinh/index.html b/files/ca/web/javascript/referencia/objectes_globals/math/asinh/index.html deleted file mode 100644 index 9a249bb202..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/math/asinh/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: Math.asinh() -slug: Web/JavaScript/Referencia/Objectes_globals/Math/asinh -translation_of: Web/JavaScript/Reference/Global_Objects/Math/asinh ---- -
{{JSRef}}
- -

La funció Math.asinh() retorna l'arcsinus hiperbòlic d'un nombre, és a dir

- -

Math.asinh(x)=arsinh(x)= l'única ytal quesinh(y)=x\mathtt{\operatorname{Math.asinh}(x)} = \operatorname{arsinh}(x) = \text{ the unique } \; y \; \text{such that} \; \sinh(y) = x

- -

Sintaxi

- -
Math.asinh(x)
- -

Paràmetres

- -
-
x
-
Un nombre.
-
- -

Descripció

- -

Com que que asinh() és un mètode estàtic de Math, sempre s'utilitza com a Math.asinh(), en comptes de com a mètode d'una instància de Math (Math no és un constructor).

- -

Exemples

- -

Utilitzar Math.asinh()

- -
Math.asinh(1);  // 0.881373587019543
-Math.asinh(0);  // 0
-
- -

Polyfill

- -

Tenim que arsinh(x)=ln(x+x2+1)\operatorname {arsinh} (x) = \ln \left(x + \sqrt{x^{2} + 1} \right) amb el que podem emular el comportament amb la funció següent:

- -
Math.asinh = Math.asinh || function(x) {
-  if (x === -Infinity) {
-    return x;
-  } else {
-    return Math.log(x + Math.sqrt(x * x + 1));
-  }
-};
-
- -

Especificacions

- - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-math.asinh', 'Math.asinh')}}{{Spec2('ES6')}}Definició inicial.
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome("38")}}{{CompatGeckoDesktop("25")}}{{CompatNo}}{{CompatOpera("25")}}{{CompatSafari("7.1")}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("25")}}{{CompatNo}}{{CompatNo}}8
-
- -

Vegeu també

- -
    -
  • {{jsxref("Math.acosh()")}} {{experimental_inline}}
    • -
  • {{jsxref("Math.atanh()")}} {{experimental_inline}}
    • -
  • {{jsxref("Math.cosh()")}} {{experimental_inline}}
    • -
  • {{jsxref("Math.sinh()")}} {{experimental_inline}}
    • -
  • {{jsxref("Math.tanh()")}} {{experimental_inline}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/math/atan/index.html b/files/ca/web/javascript/referencia/objectes_globals/math/atan/index.html deleted file mode 100644 index 034578fd54..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/math/atan/index.html +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: Math.atan() -slug: Web/JavaScript/Referencia/Objectes_globals/Math/atan -translation_of: Web/JavaScript/Reference/Global_Objects/Math/atan ---- -
{{JSRef("Global_Objects", "Math")}}
- -

Resum

- -

La funció Math.atan() retorna l'arctangent (en radians) d'un nombre, és a dir:

- -

Math.atan(x)=arctan(x)= l'unic y∊[-π2;π2]tal quetan(y)=x\mathtt{\operatorname{Math.atan}(x)} = \arctan(x) = \text{ the unique } \; y \in \left[-\frac{\pi}{2}; \frac{\pi}{2}\right] \, \text{such that} \; \tan(y) = x

- -

Sintaxi

- -
Math.atan(x)
- -

Paràmetres

- -
-
x
-
Un nombre.
-
- -

Descripció

- -

El mètode Math.atan() retorna un valor numèric entre -π2-\frac{\pi}{2} i π2\frac{\pi}{2} radians.

- -

Degut a que atan() és un mètode estàtic de Math, sempre s'utilitza com a Math.atan(), en comptes de com a mètode d'una instància de Math (Math no és un constructor).

- -

Exemples

- -

Exemple: Utilitzar Math.atan()

- -
Math.atan(1);  // 0.7853981633974483
-Math.atan(0);  // 0
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.2.4', 'Math.atan')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.atan', 'Math.atan')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Math.acos()")}}
    • -
  • {{jsxref("Math.asin()")}}
    • -
  • {{jsxref("Math.atan2()")}}
    • -
  • {{jsxref("Math.cos()")}}
    • -
  • {{jsxref("Math.sin()")}}
    • -
  • {{jsxref("Math.tan()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/math/atan2/index.html b/files/ca/web/javascript/referencia/objectes_globals/math/atan2/index.html deleted file mode 100644 index 2816bb40b8..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/math/atan2/index.html +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: Math.atan2() -slug: Web/JavaScript/Referencia/Objectes_globals/Math/atan2 -translation_of: Web/JavaScript/Reference/Global_Objects/Math/atan2 ---- -
{{JSRef}}
- -

La funció Math.atan2() retorna l'arctangent del quocient dels arguments passats.

- -

Sintaxi

- -
Math.atan2(y, x)
- -

Paràmetres

- -
-
y
-
Primer nombre.
-
x
-
Segon nombre.
-
- -

Descripció

- -

El mètode Math.atan2() retorn aun valor numèric entre -π i π que representa l'angle theta d'un punt (x, y). Aquest angle es representa en radiants, en sentit contrari a les agulles del rellotge, entre l'eix positiu X i el punt (x, y). Cal destacar que els arguments d'aquesta funció representen les coordenades del punt, on el primer argument representa la coordenada y i el segon argument representa la coordenada x.

- -

Math.atan2() rep els arguments x i y de forma separada mentre que Math.atan() rep la relació (ratio) entre aquests dos arguments.

- -

Com que que atan2() és un mètode estàtic de Math, sempre s'utilitza com a Math.atan2(), en comptes de com a mètode d'una instància de Math (Math no és un constructor).

- -

Exemples

- -

Utilitzar Math.atan2()

- -
Math.atan2(90, 15); // 1.4056476493802699
-Math.atan2(15, 90); // 0.16514867741462683
-
-Math.atan2(±0, -0);               // ±PI.
-Math.atan2(±0, +0);               // ±0.
-Math.atan2(±0, -x);               // ±PI for x > 0.
-Math.atan2(±0, x);                // ±0 for x > 0.
-Math.atan2(-y, ±0);               // -PI/2 for y > 0.
-Math.atan2(y, ±0);                // PI/2 for y > 0.
-Math.atan2(±y, -Infinity);        // ±PI for finite y > 0.
-Math.atan2(±y, +Infinity);        // ±0 for finite y > 0.
-Math.atan2(±Infinity, x);         // ±PI/2 for finite x.
-Math.atan2(±Infinity, -Infinity); // ±3*PI/4.
-Math.atan2(±Infinity, +Infinity); // ±PI/4.
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.2.5', 'Math.atan2')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.atan2', 'Math.atan2')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Math.acos()")}}
    • -
  • {{jsxref("Math.asin()")}}
    • -
  • {{jsxref("Math.atan()")}}
    • -
  • {{jsxref("Math.cos()")}}
    • -
  • {{jsxref("Math.sin()")}}
    • -
  • {{jsxref("Math.tan()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/math/atanh/index.html b/files/ca/web/javascript/referencia/objectes_globals/math/atanh/index.html deleted file mode 100644 index 8a6b7cc2c8..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/math/atanh/index.html +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: Math.atanh() -slug: Web/JavaScript/Referencia/Objectes_globals/Math/atanh -translation_of: Web/JavaScript/Reference/Global_Objects/Math/atanh ---- -
{{JSRef}}
- -

La funció Math.atanh() retorna l'arctangent hiperbòlica d'un nombre, és a dir

- -

∀x∊(-1,1),Math.atanh(x)=arctanh(x)= l'única ytal quetanh(y)=x\forall x \in \left( -1, 1 \right), \mathtt{\operatorname{Math.atanh}(x)} = \operatorname{arctanh}(x) = \text{ the unique } \; y \; \text{such that} \; \tanh(y) = x

- -

Sintaxi

- -
Math.atanh(x)
- -

Paràmetres

- -
-
x
-
Un nombre.
-
- -

Descripció

- -

Com que que atanh() és un mètode estàtic de Math, sempre s'utilitza com a Math.atanh(), en comptes de com a mètode d'una instància de Math (Math no és un constructor).

- -

Exemples

- -

Utilitzar Math.atanh()

- -
Math.atanh(-2);  // NaN
-Math.atanh(-1);  // -Infinity
-Math.atanh(0);   // 0
-Math.atanh(0.5); // 0.5493061443340548
-Math.atanh(1);   // Infinity
-Math.atanh(2);   // NaN
-
- -

Es retorna {{jsxref("NaN")}} per a valors més grans que 1 o més petits que -1.

- -

Polyfill

- -

Per a |x|<1\left|x\right| < 1, tenim que artanh(x)=12ln(1+x1-x)\operatorname {artanh} (x) = \frac{1}{2}\ln \left( \frac{1 + x}{1 - x} \right) , que podem emular amb la funció següent:

- -
Math.atanh = Math.atanh || function(x) {
-  return Math.log((1+x)/(1-x)) / 2;
-};
-
- -

Especificacions

- - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-math.atanh', 'Math.atanh')}}{{Spec2('ES6')}}Definició inicial.
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome("38")}}{{CompatGeckoDesktop("25")}}{{CompatNo}}{{CompatOpera("25")}}{{CompatSafari("7.1")}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("25")}}{{CompatNo}}{{CompatNo}}8
-
- -

Vegeu també

- -
    -
  • {{jsxref("Math.acosh()")}} {{experimental_inline}}
    • -
  • {{jsxref("Math.asinh()")}} {{experimental_inline}}
    • -
  • {{jsxref("Math.cosh()")}} {{experimental_inline}}
    • -
  • {{jsxref("Math.sinh()")}} {{experimental_inline}}
    • -
  • {{jsxref("Math.tanh()")}} {{experimental_inline}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/math/cbrt/index.html b/files/ca/web/javascript/referencia/objectes_globals/math/cbrt/index.html deleted file mode 100644 index 70d6767183..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/math/cbrt/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: Math.cbrt() -slug: Web/JavaScript/Referencia/Objectes_globals/Math/cbrt -translation_of: Web/JavaScript/Reference/Global_Objects/Math/cbrt ---- -
{{JSRef}}
- -

La funció Math.cbrt() retorna la rel cúbica d'un nombre, és a dir

- -

Math.cbrt(x)=x3=la únicaytal quey3=x\mathtt{Math.cbrt(x)} = \sqrt[3]{x} = \text{the unique} \; y \; \text{such that} \; y^3 = x

- -

Sintaxi

- -
Math.cbrt(x)
- -

Paràmetres

- -
-
x
-
Un nombre.
-
- -

Descripció

- -

Degut a que cbrt() és un mètode estàtic de Math, sempre s'utilitza com a Math.cbrt(), en comptes de com a mètode d'una instància de Math (Math no és un constructor).

- -

Exemples

- -

Utilitzar Math.cbrt()

- -
Math.cbrt(-1); // -1
-Math.cbrt(0);  // 0
-Math.cbrt(1);  // 1
-
-Math.cbrt(2);  // 1.2599210498948734
-
- -

Polyfill

- -

Per a tot x≥0x \geq 0, tenim que x3=x1/3\sqrt[3]{x} = x^{1/3} , podem llavors emular aquest comportament amb la funció següent:

- -
Math.cbrt = Math.cbrt || function(x) {
-  var y = Math.pow(Math.abs(x), 1/3);
-  return x < 0 ? -y : y;
-};
-
- -

Especificacions

- - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-math.cbrt', 'Math.cbrt')}}{{Spec2('ES6')}}Definició inicial.
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome("38")}}{{CompatGeckoDesktop("25")}}{{CompatNo}}{{CompatOpera("25")}}{{CompatSafari("7.1")}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("25")}}{{CompatNo}}{{CompatNo}}8
-
- -

Vegeu també

- -
    -
  • {{jsxref("Math.pow()")}}
    • -
  • {{jsxref("Math.sqrt()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/math/ceil/index.html b/files/ca/web/javascript/referencia/objectes_globals/math/ceil/index.html deleted file mode 100644 index a96880eecd..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/math/ceil/index.html +++ /dev/null @@ -1,197 +0,0 @@ ---- -title: Math.ceil() -slug: Web/JavaScript/Referencia/Objectes_globals/Math/ceil -translation_of: Web/JavaScript/Reference/Global_Objects/Math/ceil ---- -
{{JSRef("Global_Objects", "Math")}}
- -

Resum

- -

La funció Math.ceil() retorna el més petit dels nombres sencers més grans o iguals a un nombre donat.

- -

Sintaxi

- -
Math.ceil(x)
- -

Paràmetres

- -
-
x
-
Un nombre.
-
- -

Descripció

- -

Degut a que ceil() és un mètode estàtic de Math, sempre s'utilitza com a Math.ceil(), ren comptes de com a mètode d'una instància de Math (Math no és un constructor).

- -

Exemples

- -

Exemple: Ús de Math.ceil()

- -

L'exemple següent mostra l'ús de Math.ceil().

- -
Math.ceil(.95);   // 1
-Math.ceil(4);     // 4
-Math.ceil(7.004); // 8
-
- -

Exemple: Ajust decimal

- -
// Closure
-(function() {
-  /**
-   * Decimal adjustment of a number.
-   *
-   * @param {String}  type  The type of adjustment.
-   * @param {Number}  value The number.
-   * @param {Integer} exp   The exponent (the 10 logarithm of the adjustment base).
-   * @returns {Number} The adjusted value.
-   */
-  function decimalAdjust(type, value, exp) {
-    // If the exp is undefined or zero...
-    if (typeof exp === 'undefined' || +exp === 0) {
-      return Math[type](value);
-    }
-    value = +value;
-    exp = +exp;
-    // If the value is not a number or the exp is not an integer...
-    if (isNaN(value) || !(typeof exp === 'number' && exp % 1 === 0)) {
-      return NaN;
-    }
-    // Shift
-    value = value.toString().split('e');
-    value = Math[type](+(value[0] + 'e' + (value[1] ? (+value[1] - exp) : -exp)));
-    // Shift back
-    value = value.toString().split('e');
-    return +(value[0] + 'e' + (value[1] ? (+value[1] + exp) : exp));
-  }
-
-  // Decimal round
-  if (!Math.round10) {
-    Math.round10 = function(value, exp) {
-      return decimalAdjust('round', value, exp);
-    };
-  }
-  // Decimal floor
-  if (!Math.floor10) {
-    Math.floor10 = function(value, exp) {
-      return decimalAdjust('floor', value, exp);
-    };
-  }
-  // Decimal ceil
-  if (!Math.ceil10) {
-    Math.ceil10 = function(value, exp) {
-      return decimalAdjust('ceil', value, exp);
-    };
-  }
-})();
-
-// Round
-Math.round10(55.55, -1);   // 55.6
-Math.round10(55.549, -1);  // 55.5
-Math.round10(55, 1);       // 60
-Math.round10(54.9, 1);     // 50
-Math.round10(-55.55, -1);  // -55.5
-Math.round10(-55.551, -1); // -55.6
-Math.round10(-55, 1);      // -50
-Math.round10(-55.1, 1);    // -60
-// Floor
-Math.floor10(55.59, -1);   // 55.5
-Math.floor10(59, 1);       // 50
-Math.floor10(-55.51, -1);  // -55.6
-Math.floor10(-51, 1);      // -60
-// Ceil
-Math.ceil10(55.51, -1);    // 55.6
-Math.ceil10(51, 1);        // 60
-Math.ceil10(-55.59, -1);   // -55.5
-Math.ceil10(-59, 1);       // -50
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.2.6', 'Math.ceil')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.ceil', 'Math.ceil')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Math.abs()")}}
    • -
  • {{jsxref("Math.floor()")}}
    • -
  • {{jsxref("Math.round()")}}
    • -
  • {{jsxref("Math.sign()")}} {{experimental_inline}}
    • -
  • {{jsxref("Math.trunc()")}} {{experimental_inline}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/math/clz32/index.html b/files/ca/web/javascript/referencia/objectes_globals/math/clz32/index.html deleted file mode 100644 index 5cde08c7a8..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/math/clz32/index.html +++ /dev/null @@ -1,155 +0,0 @@ ---- -title: Math.clz32() -slug: Web/JavaScript/Referencia/Objectes_globals/Math/clz32 -translation_of: Web/JavaScript/Reference/Global_Objects/Math/clz32 ---- -
{{JSRef}}
- -

La funció Math.clz32() retorna el nombre de zeros a l'esquerra que apareixen en una representació binària de 32 bits per a un nombre.

- -

Sintaxi

- -
Math.clz32(x)
- -

Paràmetres

- -
-
x
-
Un nombre.
-
- -

Descripció

- -

"clz32" és una abreviació de CountLeadingZeroes32.

- -

Si x no és un nombre, primer es convertirà a un nombre, i després es convertirà a un nombre sencer de 32 bits sense signe.

- -

Si el nombre sencer sense signe de 32 bits és 0, la funció retornarà 32 ja que tots els bits són 0.

- -

Aquesta funció és particulament útil per a sistemes que compilin en JavaScript, com ara Emscripten.

- -

Exemples

- -

Utilitzar Math.clz32()

- -
Math.clz32(1);                // 31
-Math.clz32(1000);             // 22
-Math.clz32();                 // 32
-
-[NaN, Infinity, -Infinity, 0, -0, null, undefined, 'foo', {}, []].filter(
-function(n) {
-  return Math.clz32(n) !== 32
-});                           // []
-
-Math.clz32(true);             // 31
-Math.clz32(3.5);              // 30
-
- -

Polyfill

- -

Aquesta funció polyfill utilitza {{jsxref("Math.imul")}}.

- -
Math.clz32 = Math.clz32 || (function () {
-  'use strict';
-
-  var table = [
-    32, 31,  0, 16,  0, 30,  3,  0, 15,  0,  0,  0, 29, 10,  2,  0,
-     0,  0, 12, 14, 21,  0, 19,  0,  0, 28,  0, 25,  0,  9,  1,  0,
-    17,  0,  4,   ,  0,  0, 11,  0, 13, 22, 20,  0, 26,  0,  0, 18,
-     5,  0,  0, 23,  0, 27,  0,  6,  0, 24,  7,  0,  8,  0,  0,  0]
-
-  // Adaptat d'un algorisme trobat a Hacker's Delight, pàgina 103.
-  return function (x) {
-    // Tingueu en compte que les variables no tenen perquè ser les mateixes.
-
-    // 1. On n = ToUint32(x).
-    var v = Number(x) >>> 0
-
-    // 2. On p és el nombre de zeros a l'esquerra en la representació binària de 32 bits de n.
-    v |= v >>> 1
-    v |= v >>> 2
-    v |= v >>> 4
-    v |= v >>> 8
-    v |= v >>> 16
-    v = table[Math.imul(v, 0x06EB14F9) >>> 26]
-
-    // Retorna p.
-    return v
-  }
-})();
-
- -

Especificacions

- - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-math.clz32', 'Math.clz32')}}{{Spec2('ES6')}}Definició inicial.
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome("38")}}{{CompatGeckoDesktop("31")}}{{CompatNo}}{{CompatOpera("25")}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("31")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Math")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/math/cos/index.html b/files/ca/web/javascript/referencia/objectes_globals/math/cos/index.html deleted file mode 100644 index 0236b38c9c..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/math/cos/index.html +++ /dev/null @@ -1,128 +0,0 @@ ---- -title: Math.cos() -slug: Web/JavaScript/Referencia/Objectes_globals/Math/cos -translation_of: Web/JavaScript/Reference/Global_Objects/Math/cos ---- -
{{JSRef("Global_Objects", "Math")}}
- -

Resum

- -

La funció Math.cos() retorna el cosinus d'un nombre.

- -

Sintaxi

- -
Math.cos(x)
- -

Paràmetres

- -
-
x
-
Un nombre, mesurat en radians.
-
- -

Descripció

- -

El mètode Math.cos() retorna un valor numèric entre -1 i 1, que representa el cosinus d'un angle.

- -

Degut a que cos() és un mètode estàtic de Math, sempre s'utilitza com a Math.cos(), en comptes de com a mètode d'una instància de Math (Math no és un constructor).

- -

Exemples

- -

Exemple: Utilitzar Math.cos()

- -
Math.cos(0);           // 1
-Math.cos(1);           // 0.5403023058681398
-
-Math.cos(Math.PI);     // -1
-Math.cos(2 * Math.PI); // 1
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.2.7', 'Math.cos')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.cos', 'Math.cos')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Math.acos()")}}
    • -
  • {{jsxref("Math.asin()")}}
    • -
  • {{jsxref("Math.atan()")}}
    • -
  • {{jsxref("Math.atan2()")}}
    • -
  • {{jsxref("Math.sin()")}}
    • -
  • {{jsxref("Math.tan()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/math/cosh/index.html b/files/ca/web/javascript/referencia/objectes_globals/math/cosh/index.html deleted file mode 100644 index 00ebc259b9..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/math/cosh/index.html +++ /dev/null @@ -1,130 +0,0 @@ ---- -title: Math.cosh() -slug: Web/JavaScript/Referencia/Objectes_globals/Math/cosh -translation_of: Web/JavaScript/Reference/Global_Objects/Math/cosh ---- -
{{JSRef}}
- -

La funció Math.cosh() retorna el cosinus hiperbòlic d'un nombre, això es pot expressar utilitzant la {{jsxref("Math.E", "constant e", "", 1)}}:

- -

Math.cosh(x)=ex+e-x2\mathtt{\operatorname{Math.cosh(x)}} = \frac{e^x + e^{-x}}{2}

- -

Sintaxi

- -
Math.cosh(x)
- -

Paràmetres

- -
-
x
-
Un nombre.
-
- -

Descripció

- -

Com que que cosh() és un mètode estàtic de Math, sempre s'utilitza com a Math.cosh(), en comptes de com a mètode d'una instància de Math (Math no és un constructor).

- -

Exemples

- -

Utilitzar Math.cosh()

- -
Math.cosh(0);  // 1
-Math.cosh(1);  // 1.5430806348152437
-Math.cosh(-1); // 1.5430806348152437
-
- -

Polyfill

- -

Aquesta funció es pot emular amb l'ajuda de la funció {{jsxref("Math.exp()")}}:

- -
Math.cosh = Math.cosh || function(x) {
-  return (Math.exp(x) + Math.exp(-x)) / 2;
-}
-
- -

o bé utilitzant només una crida a la funció {{jsxref("Math.exp()")}}:

- -
Math.cosh = Math.cosh || function(x) {
-  var y = Math.exp(x);
-  return (y + 1 / y) / 2;
-};
-
- -

Especificacions

- - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-math.cosh', 'Math.cosh')}}{{Spec2('ES6')}}Definició inicial.
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome("38")}}{{CompatGeckoDesktop("25")}}{{CompatNo}}{{CompatOpera("25")}}{{CompatSafari("7.1")}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("25")}}{{CompatNo}}{{CompatNo}}8
-
- -

Vegeu també

- -
    -
  • {{jsxref("Math.acosh()")}} {{experimental_inline}}
    • -
  • {{jsxref("Math.asinh()")}} {{experimental_inline}}
    • -
  • {{jsxref("Math.atanh()")}} {{experimental_inline}}
    • -
  • {{jsxref("Math.sinh()")}} {{experimental_inline}}
    • -
  • {{jsxref("Math.tanh()")}} {{experimental_inline}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/math/e/index.html b/files/ca/web/javascript/referencia/objectes_globals/math/e/index.html deleted file mode 100644 index efe7476396..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/math/e/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: Math.E -slug: Web/JavaScript/Referencia/Objectes_globals/Math/E -translation_of: Web/JavaScript/Reference/Global_Objects/Math/E ---- -
{{JSRef("Global_Objects", "Math")}}
- -

Resum

- -

La propietat Math.E representa la base dels logaritmes naturals, e, el seu valor aproximat és de 2.718.

- -

Math.E=e≈2.718\mathtt{\mi{Math.E}} = e \approx 2.718

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

Descripció

- -

Com que E és una propietat estàtica de Math, sempre s'utilitza com Math.E en comptes de com una propietat d'un objecte Math creat (Math no és un constructor).

- -

Exemples

- -

Exemple: Utilitzar Math.E

- -

La funció que trobareu a continuació retorna e:

- -
function getNapier() {
-  return Math.E;
-}
-
-getNapier(); // 2.718281828459045
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat en JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.1.1', 'Math.E')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.e', 'Math.E')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Math.exp()")}}
    • -
  • {{jsxref("Math.log()")}}
    • -
  • {{jsxref("Math.log1p()")}} {{experimental_inline}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/math/exp/index.html b/files/ca/web/javascript/referencia/objectes_globals/math/exp/index.html deleted file mode 100644 index c6d6c6c098..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/math/exp/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: Math.exp() -slug: Web/JavaScript/Referencia/Objectes_globals/Math/exp -translation_of: Web/JavaScript/Reference/Global_Objects/Math/exp ---- -
{{JSRef}}
- -

La funció Math.exp() retorna ex, on x és l'argument, i e és {{jsxref("Math.E", "la constant d'Euler", "", 1)}}, la base dels logaritmes naturals.

- -

Sintaxi

- -
Math.exp(x)
- -

Paràmetres

- -
-
x
-
Un nombre.
-
- -

Descripció

- -

Deguat a que exp() és un mètode estàtic de Math, aquest pot emprar-se com a Math.exp(), en comptes de cridar-lo com un mètode d'un objecte de tipus Math (Math no és un constructor).

- -

Exemples

- -

Utilitzar Math.exp()

- -
Math.exp(-1); // 0.36787944117144233
-Math.exp(0);  // 1
-Math.exp(1);  // 2.718281828459045
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.2.8', 'Math.exp')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.exp', 'Math.exp')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Math.E")}}
    • -
  • {{jsxref("Math.expm1()")}} {{experimental_inline}}
    • -
  • {{jsxref("Math.log()")}}
    • -
  • {{jsxref("Math.log10()")}} {{experimental_inline}}
    • -
  • {{jsxref("Math.log1p()")}} {{experimental_inline}}
    • -
  • {{jsxref("Math.log2()")}} {{experimental_inline}}
    • -
  • {{jsxref("Math.pow()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/math/expm1/index.html b/files/ca/web/javascript/referencia/objectes_globals/math/expm1/index.html deleted file mode 100644 index b8055fba45..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/math/expm1/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: Math.expm1() -slug: Web/JavaScript/Referencia/Objectes_globals/Math/expm1 -translation_of: Web/JavaScript/Reference/Global_Objects/Math/expm1 ---- -
{{JSRef}}
- -

La funció Math.expm1() retorna ex - 1, on x és l'argument i {{jsxref("Math.E", "e", "", 1)}} és la base dels logaritmes naturals.

- -

Sintaxi

- -
Math.expm1(x)
- -

Paràmetres

- -
-
x
-
Un nombre.
-
- -

Descripció

- -

Com que expm1() és un mètode estàtic de Math, sempre s'utilitza com Math.expm1() en comptes de com un mètode d'un objecte Math creat (Math no és un constructor).

- -

Exemples

- -

Utilitzar Math.expm1()

- -
Math.expm1(-1); // -0.6321205588285577
-Math.expm1(0);  // 0
-Math.expm1(1);  // 1.718281828459045
-
- -

Polyfill

- -

Aquesta funció pot ser emulada amb l'ajuda de la funció {{jsxref("Math.exp()")}}:

- -
Math.expm1 = Math.expm1 || function(x) {
-  return Math.exp(x) - 1;
-};
-
- -

Especificacions

- - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-math.expm1', 'Math.expm1')}}{{Spec2('ES6')}}Definició inicial.
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome("38")}}{{CompatGeckoDesktop("25")}}{{CompatNo}}{{CompatOpera("25")}}{{CompatSafari("7.1")}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("25")}}{{CompatNo}}{{CompatNo}}8
-
- -

Vegeu també

- -
    -
  • {{jsxref("Math.E")}}
    • -
  • {{jsxref("Math.exp()")}}
    • -
  • {{jsxref("Math.log()")}}
    • -
  • {{jsxref("Math.log10()")}} {{experimental_inline}}
    • -
  • {{jsxref("Math.log1p()")}} {{experimental_inline}}
    • -
  • {{jsxref("Math.log2()")}} {{experimental_inline}}
    • -
  • {{jsxref("Math.pow()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/math/floor/index.html b/files/ca/web/javascript/referencia/objectes_globals/math/floor/index.html deleted file mode 100644 index 4a83b8d0e8..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/math/floor/index.html +++ /dev/null @@ -1,194 +0,0 @@ ---- -title: Math.floor() -slug: Web/JavaScript/Referencia/Objectes_globals/Math/floor -translation_of: Web/JavaScript/Reference/Global_Objects/Math/floor ---- -
{{JSRef("Global_Objects", "Math")}}
- -

Resum

- -

La funció Math.floor() retorna el nombre més gran dels nombres més petits o iguals a un nombre donat.

- -

Sintaxi

- -
Math.floor(x)
- -

Paràmetres

- -
-
x
-
Un nombre.
-
- -

Descripció

- -

Degut a que floor() és un mètode estàtic de Math, sempre s'utilitza com a Math.floor(), en comptes de com a mètode d'una instància de Math (Math no és un constructor).

- -

Exemples

- -

Exemple: Utilitzar Math.floor()

- -
Math.floor( 45.95); //  45
-Math.floor(-45.95); // -46
-
- -

Exemple: Ajust decimal

- -
// Closure
-(function() {
-  /**
-   * Ajust decimal d'un nombre.
-   *
-   * @param {String}  type  El tipus d'ajust.
-   * @param {Number}  value El nombre.
-   * @param {Integer} exp   L'exponent (L'algoritme en base 10  de la base d'ajust
-   * @returns {Number} El valor ajustat.
-   */
-  function decimalAdjust(type, value, exp) {
-    // Si exp és undefined o zero...
-    if (typeof exp === 'undefined' || +exp === 0) {
-      return Math[type](value);
-    }
-    value = +value;
-    exp = +exp;
-    // Si value no és un nombre o exp no és un nombre sencer...
-    if (isNaN(value) || !(typeof exp === 'number' && exp % 1 === 0)) {
-      return NaN;
-    }
-    // Desplaçament
-    value = value.toString().split('e');
-    value = Math[type](+(value[0] + 'e' + (value[1] ? (+value[1] - exp) : -exp)));
-    // Desfer el desplaçament
-    value = value.toString().split('e');
-    return +(value[0] + 'e' + (value[1] ? (+value[1] + exp) : exp));
-  }
-
-  // Arrodoniment decimal
-  if (!Math.round10) {
-    Math.round10 = function(value, exp) {
-      return decimalAdjust('round', value, exp);
-    };
-  }
-  // Arrodoniment decimal a la baixa
-  if (!Math.floor10) {
-    Math.floor10 = function(value, exp) {
-      return decimalAdjust('floor', value, exp);
-    };
-  }
-  // Arrodoniment decimal a l'alça
-  if (!Math.ceil10) {
-    Math.ceil10 = function(value, exp) {
-      return decimalAdjust('ceil', value, exp);
-    };
-  }
-})();
-
-// Arrodoniments
-Math.round10(55.55, -1);   // 55.6
-Math.round10(55.549, -1);  // 55.5
-Math.round10(55, 1);       // 60
-Math.round10(54.9, 1);     // 50
-Math.round10(-55.55, -1);  // -55.5
-Math.round10(-55.551, -1); // -55.6
-Math.round10(-55, 1);      // -50
-Math.round10(-55.1, 1);    // -60
-// Arrodoniments a la baixa
-Math.floor10(55.59, -1);   // 55.5
-Math.floor10(59, 1);       // 50
-Math.floor10(-55.51, -1);  // -55.6
-Math.floor10(-51, 1);      // -60
-// Arrodoniments a l'alça
-Math.ceil10(55.51, -1);    // 55.6
-Math.ceil10(51, 1);        // 60
-Math.ceil10(-55.59, -1);   // -55.5
-Math.ceil10(-59, 1);       // -50
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
ECMAScript 1a EdicióStandardDefinició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.2.9', 'Math.floor')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.floor', 'Math.floor')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Math.abs()")}}
    • -
  • {{jsxref("Math.ceil()")}}
    • -
  • {{jsxref("Math.round()")}}
    • -
  • {{jsxref("Math.sign()")}} {{experimental_inline}}
    • -
  • {{jsxref("Math.trunc()")}} {{experimental_inline}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/math/fround/index.html b/files/ca/web/javascript/referencia/objectes_globals/math/fround/index.html deleted file mode 100644 index 7411993dbc..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/math/fround/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: Math.fround() -slug: Web/JavaScript/Referencia/Objectes_globals/Math/fround -translation_of: Web/JavaScript/Reference/Global_Objects/Math/fround ---- -
{{JSRef}}
- -

La funció Math.fround() retorna la representació en coma flotant de precisió simple més propera d'un nombre.

- -

Sintaxi

- -
Math.fround(x)
- -

Paràmetres

- -
-
x
-
Un nombre.
-
- -

Descripció

- -

Com que fround() és un mètode estàtic de Math, sempre s'utilitza com Math.fround() en comptes de com un mètode d'un objecte Math creat (Math no és un constructor).

- -

Exemples

- -

Utilitzar Math.fround()

- -
Math.fround(0);     // 0
-Math.fround(1);     // 1
-Math.fround(1.337); // 1.3370000123977661
-Math.fround(1.5);   // 1.5
-Math.fround(NaN);   // NaN
-
- -

Polyfill

- -

El comportament d'aquesta funció pot ser emulat amb la funció següent, si {{jsxref("Float32Array")}} està suportat:

- -
Math.fround = Math.fround || function(x) {
-  return new Float32Array([x])[0];
-};
-
- -

Especificacions

- - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-math.fround', 'Math.fround')}}{{Spec2('ES6')}}Definició inicial.
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome("38")}}{{CompatGeckoDesktop("26")}}{{CompatNo}}{{CompatOpera("25")}}{{CompatSafari("7.1")}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}8
-
- -

Vegeu també

- -
    -
  • {{jsxref("Math.round()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/math/hypot/index.html b/files/ca/web/javascript/referencia/objectes_globals/math/hypot/index.html deleted file mode 100644 index e29bb754f1..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/math/hypot/index.html +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: Math.hypot() -slug: Web/JavaScript/Referencia/Objectes_globals/Math/hypot -translation_of: Web/JavaScript/Reference/Global_Objects/Math/hypot ---- -
{{JSRef}}
- -

La funció Math.hypot() retorna la rel quadrada de la suma dels quadrats dels seus arguments, és a dir:

- -

Math.hypot(v1,v2,…,vn)=∑i=1nvi2=v12+v22+…+vn2\mathtt{\operatorname{Math.hypot}(v_1, v_2, \dots, v_n)} = \sqrt{\sum_{i=1}^n v_i^2} = \sqrt{v_1^2 + v_2^2 + \dots + v_n^2}

- -

Sintaxi

- -
Math.hypot([valor1[, valor2[, ...]]])
- -

Paràmetres

- -
-
valor1, valor2, ...
-
Nombres.
-
- -

Descripció

- -

Com que que hypot() és un mètode estàtic de Math, sempre s'utilitza com a Math.hypot(), en comptes de com a mètode d'una instància de Math (Math no és un constructor).

- -

Si no es passa cap argument, el resultat és +0.

- -

Si al menys un dels arguments no pot ser convertit a nombre el resultat és {{jsxref("Global_Objects/NaN", "NaN")}}.

- -

Quan se li passa només un argument, Math.hypot() retorna el mateix valor que retornaria Math.abs().

- -

Exemples

- -

Utilitzar Math.hypot()

- -
Math.hypot(3, 4);        // 5
-Math.hypot(3, 4, 5);     // 7.0710678118654755
-Math.hypot();            // 0
-Math.hypot(NaN);         // NaN
-Math.hypot(3, 4, 'foo'); // NaN, +'foo' => NaN
-Math.hypot(3, 4, '5');   // 7.0710678118654755, +'5' => 5
-Math.hypot(-3);          // 3, el mateix que Math.abs(-3)
-
- -

Polyfill

- -

Aquest mètode pot emular-se mitjançant la funció següent:

- -
Math.hypot = Math.hypot || function() {
-  var y = 0;
-  var length = arguments.length;
-
-  for (var i = 0; i < length; i++) {
-    if (arguments[i] === Infinity || arguments[i] === -Infinity) {
-      return Infinity;
-    }
-    y += arguments[i] * arguments[i];
-  }
-  return Math.sqrt(y);
-};
-
- -

Especificacions

- - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-math.hypot', 'Math.hypot')}}{{Spec2('ES6')}}Definició inicial.
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome("38")}}{{CompatGeckoDesktop("27")}}{{CompatNo}}{{CompatOpera("25")}}{{CompatSafari("7.1")}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("27")}}{{CompatNo}}{{CompatNo}}8
-
- -

Vegeu també

- -
    -
  • {{jsxref("Math.abs()")}}
    • -
  • {{jsxref("Math.pow()")}}
    • -
  • {{jsxref("Math.sqrt()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/math/imul/index.html b/files/ca/web/javascript/referencia/objectes_globals/math/imul/index.html deleted file mode 100644 index 53050a9cd6..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/math/imul/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: Math.imul() -slug: Web/JavaScript/Referencia/Objectes_globals/Math/imul -translation_of: Web/JavaScript/Reference/Global_Objects/Math/imul ---- -
{{JSRef}}
- -

La funció Math.imul() retorna el resultat de la multiplicació de 32 bits similar a la de C dels dos paràmetres.

- -

Sintaxi

- -
Math.imul(a, b)
- -

Paràmetres

- -
-
a
-
Primer nombre.
-
b
-
Segon nombre.
-
- -

Descripció

- -

Math.imul() permet una multiplicació ràpida de nombres sencers de 32 bits amb una semàtica similar a la de C. Aquesta característica esdevé útil per a projectes com Emscripten. Com que imul() és un mètode estàtic de Math, sempre s'utilitza com Math.imul() en comptes de com un mètode d'un objecte Math creat (Math no és un constructor).

- -

Exemples

- -

Utilitzar Math.imul()

- -
Math.imul(2, 4);          // 8
-Math.imul(-1, 8);         // -8
-Math.imul(-2, -2);        // 4
-Math.imul(0xffffffff, 5); // -5
-Math.imul(0xfffffffe, 5); // -10
-
- -

Polyfill

- -

Aquesta funció pot ser emulada mitjançant la següent funció:

- -
Math.imul = Math.imul || function(a, b) {
-  var ah = (a >>> 16) & 0xffff;
-  var al = a & 0xffff;
-  var bh = (b >>> 16) & 0xffff;
-  var bl = b & 0xffff;
-  // el desplaçament de zero posicions solventa el signe a la part més significativa
-  // el |0 del final converteix el valor sense signe en un valor amb signe
-  return ((al * bl) + (((ah * bl + al * bh) << 16) >>> 0)|0);
-};
-
- -

Especificacions

- - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-math.imul', 'Math.imul')}}{{Spec2('ES6')}}Definició inicial.
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome("28")}}{{CompatGeckoDesktop("20")}}{{CompatUnknown}}{{CompatOpera("16")}}{{CompatSafari("7")}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("20")}}{{CompatUnknown}}{{CompatUnknown}}7
-
diff --git a/files/ca/web/javascript/referencia/objectes_globals/math/index.html b/files/ca/web/javascript/referencia/objectes_globals/math/index.html deleted file mode 100644 index d493f51b40..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/math/index.html +++ /dev/null @@ -1,205 +0,0 @@ ---- -title: Math -slug: Web/JavaScript/Referencia/Objectes_globals/Math -translation_of: Web/JavaScript/Reference/Global_Objects/Math ---- -
{{JSRef("Global_Objects", "Math")}}
- -

Resum

- -

Math és un objecte proporcionat pel llenguatge que té propietats i mètodes que pretenen ajudar en càlculs matemàtics. L'objecte conté constants i funcions matemàtiques.

- -

Descripció

- -

A diferència d'altres objectes globals, Math no és un constructor. Totes les propietats i mètodes de Math són estàtics. Per a utilitzar la constant pi es fa anar Math.PI i la funció sinus es crida Math.sin(x), on x és l'argument que rebrà el mètode. Les constants tenen la presició d'un nombre real de JavaScript.

- -

Propietats

- -
-
{{jsxref("Math.E")}}
-
La constant de Euler (també coneguda com a nombre E) i la base dels logaritmes naturals, el seu valor aproximat és de 2.718.
-
{{jsxref("Math.LN2")}}
-
El logaritme natural de 2, el seu valor aproximat és de 0.693.
-
{{jsxref("Math.LN10")}}
-
El logaritme natural de 10, el seu valor aproximat és de 2.303.
-
{{jsxref("Math.LOG2E")}}
-
El logaritme de E en base 2, el seu valor aproximat és de 1.443.
-
{{jsxref("Math.LOG10E")}}
-
El logaritme de E en base 10, el seu valor aproximat és de 0.434.
-
{{jsxref("Math.PI")}}
-
La proporció entre la circumferència d'un cercle i el seu diàmetre, el seu valor aproximat és de 3.14159.
-
{{jsxref("Math.SQRT1_2")}}
-
La rel quadrada de un mig (1/2); tanmateix 1 dividit per la rel quadrada de 2, el seu valor aproximat és de 0.707.
-
{{jsxref("Math.SQRT2")}}
-
La rel quadrada de 2, el seu valor aproximat és de 1.414.
-
- -

Mètodes

- -
-

Fixeu-vos que les funcions (sin(), cos(), tan(), asin(), acos(), atan(), atan2()) reben i retornen angles en radians. Per a convertir radians a graus cal dividir per (Math.PI / 180), o bé multiplicar si el que es pretèn es transformar graus a radians.

-
- -
-

Cal destacar que la precisió de moltes de les funcions matemàtiques és depenent de la implementació. Això vol dir que el mateix codi pot donar resultats diferent en diferents navegadors, i fins i tot sota el mateix navegador o motor JS si es prova en diferents sistemes operatius or arquitectures.

-
- -
-
{{jsxref("Global_Objects/Math/abs", "Math.abs(x)")}}
-
Retorna el valor absolut d'un nombre.
-
{{jsxref("Global_Objects/Math/acos", "Math.acos(x)")}}
-
Retorna l'arccosinus d'un nombre.
-
{{jsxref("Global_Objects/Math/acosh", "Math.acosh(x)")}} {{experimental_inline}}
-
Retorna l'arccosinus hiperbòlic d'un nombre.
-
{{jsxref("Global_Objects/Math/asin", "Math.asin(x)")}}
-
Tetorna l'arcsinus d'un nombre.
-
{{jsxref("Global_Objects/Math/asinh", "Math.asinh(x)")}} {{experimental_inline}}
-
Retorna l'arcsinus hiperbòlic d'un nombre.
-
{{jsxref("Global_Objects/Math/atan", "Math.atan(x)")}}
-
Retorna l'arctangent d'un nombre.
-
{{jsxref("Global_Objects/Math/atanh", "Math.atanh(x)")}} {{experimental_inline}}
-
Retorna l'arctangent hiperbòlic d'un nombre.
-
{{jsxref("Global_Objects/Math/atan2", "Math.atan2(y, x)")}}
-
Retorna l'arctangent del cocient dels paràmetres donats.
-
{{jsxref("Global_Objects/Math/cbrt", "Math.cbrt(x)")}} {{experimental_inline}}
-
Retorna la rel cúbica d'un nombre.
-
{{jsxref("Global_Objects/Math/ceil", "Math.ceil(x)")}}
-
Retorna el nombre sencer més petit que és més gran o igual al nombre donat.
-
{{jsxref("Global_Objects/Math/clz32", "Math.clz32(x)")}} {{experimental_inline}}
-
Retorna el nombre de zeros a l'esquerra que el nombre donat tindria si fós emmagatzemat en 32 bits.
-
{{jsxref("Global_Objects/Math/cos", "Math.cos(x)")}}
-
Retorna el cosinus d'un nombre.
-
{{jsxref("Global_Objects/Math/cosh", "Math.cosh(x)")}} {{experimental_inline}}
-
Retorna el cosinus hiperbòlic d'un nombre.
-
{{jsxref("Global_Objects/Math/exp", "Math.exp(x)")}}
-
Retorna Ex, on x és el paràmetre i E és la constant de Euler (2.718 aproximadament).
-
{{jsxref("Global_Objects/Math/expm1", "Math.expm1(x)")}} {{experimental_inline}}
-
Retorna exp(x) - 1.
-
{{jsxref("Global_Objects/Math/floor", "Math.floor(x)")}}
-
Retorna el nombre sencer més gran que és igual o menor que el nombre donat.
-
{{jsxref("Global_Objects/Math/fround", "Math.fround(x)")}} {{experimental_inline}}
-
Retorna el nombre en coma float de precisió simple més proper al nombre donat.
-
{{jsxref("Global_Objects/Math/hypot", "Math.hypot([x[, y[, …]]])")}} {{experimental_inline}}
-
Retorna la rel quadrada del quadrat dels dos paràmetres donats.
-
{{jsxref("Global_Objects/Math/imul", "Math.imul(x, y)")}} {{experimental_inline}}
-
Retorna el resultat de multiplicar els dos paràmetres com a nombres sencers de 32 bits.
-
{{jsxref("Global_Objects/Math/log", "Math.log(x)")}}
-
Retorna el logaritme natural (loge, també ln) d'un nombre.
-
{{jsxref("Global_Objects/Math/log1p", "Math.log1p(x)")}} {{experimental_inline}}
-
Retorna el logaritme natural de 1 + x (loge, també ln) del nombre donat.
-
{{jsxref("Global_Objects/Math/log10", "Math.log10(x)")}} {{experimental_inline}}
-
Retorna el logaritme en base 10 d'un nombre.
-
{{jsxref("Global_Objects/Math/log2", "Math.log2(x)")}} {{experimental_inline}}
-
Retorna el logaritme en base 2 d'un nombre.
-
{{jsxref("Global_Objects/Math/max", "Math.max([x[, y[, …]]])")}}
-
Retorna el major de zero o més nombres donats.
-
{{jsxref("Global_Objects/Math/min", "Math.min([x[, y[, …]]])")}}
-
Retorna el menor de zero o més nombres donats.
-
{{jsxref("Global_Objects/Math/pow", "Math.pow(base, exponent)")}}
-
Retorna la base elevada a l'exponent, és a dir, baseexponent.
-
{{jsxref("Global_Objects/Math/random", "Math.random()")}}
-
Retorna un nombre pseudo aleatori comprés entre 0 i 1.
-
{{jsxref("Global_Objects/Math/round", "Math.round(x)")}}
-
Retorna el nombre sencer més proper al nombre donat.
-
{{jsxref("Global_Objects/Math/sign", "Math.sign(x)")}} {{experimental_inline}}
-
Retorna el signe de x, indicant si x és positiu, negatiu o zero.
-
{{jsxref("Global_Objects/Math/sin", "Math.sin(x)")}}
-
Retorna el sinus d'un nombre.
-
{{jsxref("Global_Objects/Math/sinh", "Math.sinh(x)")}} {{experimental_inline}}
-
Retorna el sinus hiperbòlic d'un nombre.
-
{{jsxref("Global_Objects/Math/sqrt", "Math.sqrt(x)")}}
-
Retorna el resultat positiu de la rel quadrada d'un nombre.
-
{{jsxref("Global_Objects/Math/tan", "Math.tan(x)")}}
-
Retorna la tangent d'un nombre.
-
{{jsxref("Global_Objects/Math/tanh", "Math.tanh(x)")}} {{experimental_inline}}
-
Retorna la tangent hiperbòlica d'un nombre.
-
Math.toSource() {{non-standard_inline}}
-
Retorna la cadena de caràcters "Math".
-
{{jsxref("Global_Objects/Math/trunc", "Math.trunc(x)")}} {{experimental_inline}}
-
Retorna la part sencera del nombre donat.
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementada a JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.8', 'Math')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math-object', 'Math')}}{{Spec2('ES6')}}Nous mètodes afegits: {{jsxref("Math.log10()", "log10()")}}, {{jsxref("Math.log2()", "log2()")}}, {{jsxref("Math.log1p()", "log1p()")}}, {{jsxref("Math.expm1()", "expm1()")}}, {{jsxref("Math.cosh()", "cosh()")}}, {{jsxref("Math.sinh()", "sinh()")}}, {{jsxref("Math.tanh()", "tanh()")}}, {{jsxref("Math.acosh()", "acosh()")}}, {{jsxref("Math.asinh()", "asinh()")}}, {{jsxref("Math.atanh()", "atanh()")}}, {{jsxref("Math.hypot()", "hypot()")}}, {{jsxref("Math.trunc()", "trunc()")}}, {{jsxref("Math.sign()", "sign()")}}, {{jsxref("Math.imul()", "imul()")}}, {{jsxref("Math.fround()", "fround()")}}, {{jsxref("Math.cbrt()", "cbrt()")}} i {{jsxref("Math.clz32()", "clz32()")}}.
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Global_Objects/Number", "Number")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/math/ln10/index.html b/files/ca/web/javascript/referencia/objectes_globals/math/ln10/index.html deleted file mode 100644 index 42107c85f5..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/math/ln10/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: Math.LN10 -slug: Web/JavaScript/Referencia/Objectes_globals/Math/LN10 -translation_of: Web/JavaScript/Reference/Global_Objects/Math/LN10 ---- -
{{JSRef("Global_Objects", "Math")}}
- -

Resum

- -

La propietat Math.LN10 representa el logaritme natural de 10, aproximadament 2.302:

- -

Math.LN10=ln(10)≈2.302\mathtt{\mi{Math.LN10}} = \ln(10) \approx 2.302

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

Descripció

- -

Degut a que LN10 és una propietat estàtica de Math, aquesta sempre s'accedeix mitjançant el codi Math.LN10, en comptes de com una propietat d'un objecte Math creat (Math no és un constructor).

- -

Exemples

- -

Exemple: Utilitzar Math.LN10

- -

La funció següent retorna el logaritme natural de 10:

- -
function getNatLog10() {
-  return Math.LN10;
-}
-
-getNatLog10(); // 2.302585092994046
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.1.2', 'Math.LN10')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.ln10', 'Math.LN10')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterístiquesChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterístiquesAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Math.exp()")}}
    • -
  • {{jsxref("Math.log()")}}
    • -
  • {{jsxref("Math.log10()")}} {{experimental_inline}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/math/ln2/index.html b/files/ca/web/javascript/referencia/objectes_globals/math/ln2/index.html deleted file mode 100644 index 92cf2693f2..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/math/ln2/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: Math.LN2 -slug: Web/JavaScript/Referencia/Objectes_globals/Math/LN2 -translation_of: Web/JavaScript/Reference/Global_Objects/Math/LN2 ---- -
{{JSRef("Global_Objects", "Math")}}
- -

Resum

- -

La propietat Math.LN2 representa el logaritme natural de 2, aproximadament 0.693:

- -

Math.LN2=ln(2)≈0.693\mathtt{\mi{Math.LN2}} = \ln(2) \approx 0.693

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

Descripció

- -

Degut a que LN2 és una propietat estàtica de Math, sempre s'accedeix a aquesta mitjançant el codi Math.LN2 en comptes d'accedir a la propietat d'un objecte de Math ja creat (Math no és un constructor).

- -

Exemples

- -

Exemple: Utilitzar Math.LN2

- -

La següent funció retorna el logaritme natural de 2:

- -
function getNatLog2() {
-  return Math.LN2;
-}
-
-getNatLog2(); // 0.6931471805599453
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.1.3', 'Math.LN2')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.ln2', 'Math.LN2')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Math.exp()")}}
    • -
  • {{jsxref("Math.log()")}}
    • -
  • {{jsxref("Math.log2()")}} {{experimental_inline}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/math/log/index.html b/files/ca/web/javascript/referencia/objectes_globals/math/log/index.html deleted file mode 100644 index a3d8467ae5..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/math/log/index.html +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: Math.log() -slug: Web/JavaScript/Referencia/Objectes_globals/Math/log -translation_of: Web/JavaScript/Reference/Global_Objects/Math/log ---- -
{{JSRef}}
- -

La funció Math.log() retorna el logaritme natural (base {{jsxref("Math.E", "e")}}) d'un nombre, és a dir

- -

∀x>0,Math.log(x)=ln(x)=la únicaytal queey=x\forall x > 0, \mathtt{\operatorname{Math.log}(x)} = \ln(x) = \text{the unique} \; y \; \text{such that} \; e^y = x

- -

Sintaxi

- -
Math.log(x)
- -

Paràmetres

- -
-
x
-
Un nombre.
-
- -

Descripció

- -

Si el valor de x és negatiu, el valor retornat sempre serà {{jsxref("NaN")}}.

- -

Degut a que log() és un mètode estàtic de Math, sempre s'utilitza com a Math.log(), en comptes de com a mètode d'una instància de Math (Math no és un constructor).

- -

Exemples

- -

Utilitzar Math.log()

- -
Math.log(-1); // NaN, fora de rang
-Math.log(0);  // -Infinit
-Math.log(1);  // 0
-Math.log(10); // 2.302585092994046
-
- -

Utilitzar Math.log() amb una base diferent

- -

La funció següent retorna el logaritme de y amb base x (és a dir, logxy\log_x y):

- -
function getBaseLog(x, y) {
-  return Math.log(y) / Math.log(x);
-}
-
- -

Si es crida getBaseLog(10, 1000) retornarà 2.9999999999999996 degut a l'arrodoniment de punt flotant, el qual és molt proper a la resposta real: 3.

- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacionsEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.2.10', 'Math.log')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.log', 'Math.log')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Math.exp()")}}
    • -
  • {{jsxref("Math.log1p()")}} {{experimental_inline}}
    • -
  • {{jsxref("Math.log10()")}} {{experimental_inline}}
    • -
  • {{jsxref("Math.log2()")}} {{experimental_inline}}
    • -
  • {{jsxref("Math.pow()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/math/log10/index.html b/files/ca/web/javascript/referencia/objectes_globals/math/log10/index.html deleted file mode 100644 index 1a82f34848..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/math/log10/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: Math.log10() -slug: Web/JavaScript/Referencia/Objectes_globals/Math/log10 -translation_of: Web/JavaScript/Reference/Global_Objects/Math/log10 ---- -
{{JSRef}}
- -

La funció Math.log10() retorna el logaritme en base 10 d'un nombre, és a dir

- -

∀x>0,Math.log10(x)=log10(x)=la únicaytal que10y=x\forall x > 0, \mathtt{\operatorname{Math.log10}(x)} = \log_10(x) = \text{the unique} \; y \; \text{such that} \; 10^y = x

- -

Sintaxi

- -
Math.log10(x)
- -

Paràmetres

- -
-
x
-
Un nombre.
-
- -

Descripció

- -

Si el valor de x és menor que 0, el valor retornat sempre és {{jsxref("NaN")}}.

- -

Com que log10() és un mètode estàtic de Math, sempre s'utilitza com Math.log10() en comptes de com un mètode d'un objecte Math creat (Math no és un constructor).

- -

Exemples

- -

Utilitzar Math.log10()

- -
Math.log10(2);      // 0.3010299956639812
-Math.log10(1);      // 0
-Math.log10(0);      // -Infinit
-Math.log10(-2);     // NaN
-Math.log10(100000); // 5
-
- -

Polyfill

- -

Aquesta funció pot ser emulada mitjançant el següent codi:

- -
Math.log10 = Math.log10 || function(x) {
-  return Math.log(x) / Math.LN10;
-};
-
- -

Especificacions

- - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-math.log10', 'Math.log10')}}{{Spec2('ES6')}}Definició inicial.
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome("38")}}{{CompatGeckoDesktop("25")}}{{CompatNo}}{{CompatOpera("25")}}{{CompatSafari("7.1")}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("25")}}{{CompatNo}}{{CompatNo}}8
-
- -

Vegeu també

- -
    -
  • {{jsxref("Math.exp()")}}
    • -
  • {{jsxref("Math.log()")}}
    • -
  • {{jsxref("Math.log1p()")}} {{experimental_inline}}
    • -
  • {{jsxref("Math.log2()")}} {{experimental_inline}}
    • -
  • {{jsxref("Math.pow()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/math/log10e/index.html b/files/ca/web/javascript/referencia/objectes_globals/math/log10e/index.html deleted file mode 100644 index 299c8d12ed..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/math/log10e/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: Math.LOG10E -slug: Web/JavaScript/Referencia/Objectes_globals/Math/LOG10E -translation_of: Web/JavaScript/Reference/Global_Objects/Math/LOG10E ---- -
{{JSRef("Global_Objects", "Math")}}
- -

Resum

- -

La propietat Math.LOG10E representa el logaritme en base 10 de e, el valor del qual és aproximadament 0.434:

- -

Math.LOG10E=log10(e)≈0.434\mathtt{\mi{Math.LOG10E}} = \log_10(e) \approx 0.434

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

Descripció

- -

Degut a que LOG10E és una propietat estàtica de l'objecte Math, sempre s'obté el seu valor mitjançant Math.LOG10E en comptes d'accedir a la propietat d'un objecte instanciat de Math (Math no és un constructor).

- -

Exemples

- -

Exemple: Utilitzar Math.LOG10E

- -

La funció següent retorna el logaritme en base 10 de e:

- -
function getLog10e() {
-  return Math.LOG10E;
-}
-
-getLog10e(); // 0.4342944819032518
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.1.5', 'Math.LOG10E')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.log10e', 'Math.LOG10E')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Math.exp()")}}
    • -
  • {{jsxref("Math.log()")}}
    • -
  • {{jsxref("Math.log10()")}} {{experimental_inline}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/math/log1p/index.html b/files/ca/web/javascript/referencia/objectes_globals/math/log1p/index.html deleted file mode 100644 index 1a0eb32cd5..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/math/log1p/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: Math.log1p() -slug: Web/JavaScript/Referencia/Objectes_globals/Math/log1p -translation_of: Web/JavaScript/Reference/Global_Objects/Math/log1p ---- -
{{JSRef}}
- -

La funció Math.log1p() retorna el logaritme natural (base {{jsxref("Math.E", "e")}}) de 1 + un nombre, és a dir

- -

∀x>-1,Math.log1p(x)=ln(1+x)\forall x > -1, \mathtt{\operatorname{Math.log1p}(x)} = \ln(1 + x)

- -

Sintaxi

- -
Math.log1p(x)
- -

Paràmetres

- -
-
x
-
Un nombre.
-
- -

Descripció

- -

Si el valor de x és menor que -1, el valor retornat sempre serà {{jsxref("NaN")}}.

- -

Com que log1p() és un mètode estàtic de Math, sempre s'utilitza com Math.log1p() en comptes de com un mètode d'un objecte Math creat (Math no és un constructor).

- -

Exemples

- -

Utilitzar Math.log1p()

- -
Math.log1p(1);  // 0.6931471805599453
-Math.log1p(0);  // 0
-Math.log1p(-1); // -Infinit
-Math.log1p(-2); // NaN
-
- -

Polyfill

- -

Aquesta funció pot ser emulada mitjançant la funció següent:

- -
Math.log1p = Math.log1p || function(x) {
-  return Math.log(1 + x);
-};
-
- -

Especificacions

- - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-math.log1p', 'Math.log1p')}}{{Spec2('ES6')}}Definició inicial.
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome("38")}}{{CompatGeckoDesktop("25")}}{{CompatNo}}{{CompatOpera("25")}}{{CompatSafari("7.1")}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("25")}}{{CompatNo}}{{CompatNo}}8
-
- -

Vegeu també

- -
    -
  • {{jsxref("Math.exp()")}}
    • -
  • {{jsxref("Math.log()")}}
    • -
  • {{jsxref("Math.log10()")}} {{experimental_inline}}
    • -
  • {{jsxref("Math.log2()")}} {{experimental_inline}}
    • -
  • {{jsxref("Math.pow()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/math/log2/index.html b/files/ca/web/javascript/referencia/objectes_globals/math/log2/index.html deleted file mode 100644 index 0806bd75ff..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/math/log2/index.html +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: Math.log2() -slug: Web/JavaScript/Referencia/Objectes_globals/Math/log2 -translation_of: Web/JavaScript/Reference/Global_Objects/Math/log2 ---- -
{{JSRef}}
- -

La funció Math.log2() retorna el logaritme en base 2 d'un nombre, és a dir

- -

∀x>0,Math.log2(x)=log2(x)=la únicaytal que2y=x\forall x > 0, \mathtt{\operatorname{Math.log2}(x)} = \log_2(x) = \text{the unique} \; y \; \text{such that} \; 2^y = x

- -

Sintaxi

- -
Math.log2(x)
- -

Paràmetres

- -
-
x
-
Un nombre.
-
- -

Descripció

- -

Si el valor de x és menor que 0, el valor retornat sempre serà {{jsxref("NaN")}}.

- -

Com que log2() és un mètode estàtic de Math, sempre s'utilitza com Math.log2() en comptes de com un mètode d'un objecte Math creat (Math no és un constructor).

- -

Exemples

- -

Utilitzar Math.log2()

- -
Math.log2(3);    // 1.584962500721156
-Math.log2(2);    // 1
-Math.log2(1);    // 0
-Math.log2(0);    // -Infinit
-Math.log2(-2);   // NaN
-Math.log2(1024); // 10
-
- -

Polyfill

- -

Aquest Polyfill emula la funció Math.log2. Cal destacar que retorna valors imprecisos per a algunes entrades (com ara 1 << 29), embolcalleu-la amb {{jsxref("Math.round()")}} si esteu treballant amb màscares de bits.

- -
Math.log2 = Math.log2 || function(x) {
-  return Math.log(x) / Math.LN2;
-};
-
- -

Especificacions

- - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-math.log2', 'Math.log2')}}{{Spec2('ES6')}}Definició inicial.
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome("38")}}{{CompatGeckoDesktop("25")}}{{CompatNo}}{{CompatOpera("25")}}{{CompatSafari("7.1")}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("25")}}{{CompatNo}}{{CompatNo}}8
-
- -

Vegeu també

- -
    -
  • {{jsxref("Math.exp()")}}
    • -
  • {{jsxref("Math.log()")}}
    • -
  • {{jsxref("Math.log10()")}} {{experimental_inline}}
    • -
  • {{jsxref("Math.log1p()")}} {{experimental_inline}}
    • -
  • {{jsxref("Math.pow()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/math/log2e/index.html b/files/ca/web/javascript/referencia/objectes_globals/math/log2e/index.html deleted file mode 100644 index 2f37ae44c1..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/math/log2e/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: Math.LOG2E -slug: Web/JavaScript/Referencia/Objectes_globals/Math/LOG2E -translation_of: Web/JavaScript/Reference/Global_Objects/Math/LOG2E ---- -
{{JSRef("Global_Objects", "Math")}}
- -

Resum

- -

La propietat Math.LOG2E representa el logaritme de e en base 2, el valor del qual és aproximadament 1.442:

- -

Math.LOG2E=log2(e)≈1.442\mathtt{\mi{Math.LOG2E}} = \log_2(e) \approx 1.442

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

Descripció

- -

Com que LOG2E és una propietat estàtica de Math, sempre s'utilitza mitjançant la forma Math.LOG2E, en comptes d'accedir a la propietat d'un objecte Math creat (Math no és un constructor).

- -

Exemples

- -

Exemple: Utilitzar Math.LOG2E

- -

La següent funció retorna el logaritme de e en base 2:

- -
function getLog2e() {
-  return Math.LOG2E;
-}
-
-getLog2e(); // 1.4426950408889634
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.1.4', 'Math.LOG2E')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.log2e', 'Math.LOG2E')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Math.exp()")}}
    • -
  • {{jsxref("Math.log()")}}
    • -
  • {{jsxref("Math.log2()")}} {{experimental_inline}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/math/max/index.html b/files/ca/web/javascript/referencia/objectes_globals/math/max/index.html deleted file mode 100644 index 791b5dfdfe..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/math/max/index.html +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: Math.max() -slug: Web/JavaScript/Referencia/Objectes_globals/Math/max -translation_of: Web/JavaScript/Reference/Global_Objects/Math/max ---- -
{{JSRef}}
- -

La funció Math.max() retorna el nombre més gran de zero o més nombres.

- -

Sintaxi

- -
Math.max([valor1[, valor2[, ...]]])
- -

Paràmetres

- -
-
valor1, valor2, ...
-
Nombres.
-
- -

Descripció

- -

Com que max() és un mètode estàtic de Math, sempre s'utilitza com Math.max() en comptes de com un mètode d'un objecte Math creat (Math no és un constructor).

- -

Si no es proporciona cap argument, el resultat és -{{jsxref("Infinity")}}.

- -

Si al menys un dels arguments no pot convertir-se a un nombre, el resultat és {{jsxref("NaN")}}.

- -

Exemples

- -

Utilitzar Math.max()

- -
Math.max(10, 20);   //  20
-Math.max(-10, -20); // -10
-Math.max(-10, 20);  //  20
-
- -

La següent funció utilitza {{jsxref("Function.prototype.apply()")}} per a trobar l'element màxim d'un array numèric. getMaxOfArray([1, 2, 3]) és equivalent a Math.max(1, 2, 3), però getMaxOfArray() pot emprar-se en arrays de qualsevol mida construits programàticament.

- -
function getMaxOfArray(numArray) {
-  return Math.max.apply(null, numArray);
-}
-
- -

O bé amb el nou {{jsxref("Operators/Spread_operator", "operador spread")}}, obtenir el nombre màxim d'un array és molt més simple.

- -
var arr = [1, 2, 3];
-var max = Math.max(...arr);
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.2.11', 'Math.max')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.max', 'Math.max')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Math.min()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/math/min/index.html b/files/ca/web/javascript/referencia/objectes_globals/math/min/index.html deleted file mode 100644 index 909e6ff2ee..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/math/min/index.html +++ /dev/null @@ -1,140 +0,0 @@ ---- -title: Math.min() -slug: Web/JavaScript/Referencia/Objectes_globals/Math/min -translation_of: Web/JavaScript/Reference/Global_Objects/Math/min ---- -
{{JSRef}}
- -

La funció Math.min() retorna el més petit de zero o més nombres.

- -

Sintaxi

- -
Math.min([valor1[, valor2[, ...]]])
- -

Paràmetres

- -
-
valor1, valor2, ...
-
Nombres.
-
- -

Descripció

- -

Degut a que min() és un mètode estàtic de Math, sempre s'utilitza com a Math.min(), en comptes de com a mètode d'una instància de Math (Math no és un constructor).

- -

Si no es proporciona cap argument, el resultat és {{jsxref("Infinity")}}.

- -

Si al menys un dels arguments no pot ser convertit a nombre, el resultat és {{jsxref("NaN")}}.

- -

Exemples

- -

Utilitzar Math.min()

- -

Aquest codi troba el valor mínim de x i y i l'assigna a z:

- -
var x = 10, y = -20;
-var z = Math.min(x, y);
-
- -

Limitar un nombre amb Math.min()

- -

Sovint s'utilitza Math.min() per a limitar un valor de manera que sempre sigui igual o menor que un límit. Per exemple, aquest codi

- -
var x = f(foo);
-
-if (x > limit) {
-  x = limit;
-}
-
- -

es podria escriure de la següent manera:

- -
var x = Math.min(f(foo), limit);
-
- -

{{jsxref("Math.max()")}} es pot emprar d'una manera similar per a limitar un valor a l'altre límit.

- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.2.12', 'Math.min')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.min', 'Math.min')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Math.max()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/math/pi/index.html b/files/ca/web/javascript/referencia/objectes_globals/math/pi/index.html deleted file mode 100644 index b867c953df..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/math/pi/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: Math.PI -slug: Web/JavaScript/Referencia/Objectes_globals/Math/PI -translation_of: Web/JavaScript/Reference/Global_Objects/Math/PI ---- -
{{JSRef("Global_Objects", "Math")}}
- -

Resum

- -

La propietat Math.PI representa el ratio entre la circumferència d'un crecle i el seu diàmetre, el seu valor aproximat és de 3.14159:

- -

Math.PI=π≈3.14159\mathtt{\mi{Math.PI}} = \pi \approx 3.14159

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

Descripció

- -

Com que PI és una propietat estàtica de Math, sempre s'utilitza amb la forma Math.PI, ren comptes de com una propietat d'un objecte Math ja creat (Math on és un constructor).

- -

Exemples

- -

Exemple: Utilitzar Math.PI

- -

La funció següent utilitza Math.PI per a calcular la circumferència d'un cercle a partir del radi que rep.

- -
function calculateCircumference(radius) {
-  return 2 * Math.PI * radius;
-}
-
-calculateCircumference(1);  // 6.283185307179586
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.1.6', 'Math.PI')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.pi', 'Math.PI')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Global_Objects/Math", "Math")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/math/pow/index.html b/files/ca/web/javascript/referencia/objectes_globals/math/pow/index.html deleted file mode 100644 index efe89000e9..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/math/pow/index.html +++ /dev/null @@ -1,140 +0,0 @@ ---- -title: Math.pow() -slug: Web/JavaScript/Referencia/Objectes_globals/Math/pow -translation_of: Web/JavaScript/Reference/Global_Objects/Math/pow ---- -
{{JSRef}}
- -

La funció Math.pow() retorna la base elevada a exponent, és a dir, baseexponent.

- -

Sintaxi

- -
Math.pow(base, exponent)
- -

Paràmetres

- -
-
base
-
El nombre base.
-
exponent
-
L'exponent que s'usarà per a elevar la base.
-
- -

Descripció

- -

Com que pow() és un mètode estàtic de Math, sempre s'utilitza com Math.pow() en comptes de com un mètode d'un objecte Math creat (Math no és un constructor).

- -

Exemples

- -

Utilitzar Math.pow()

- -
// simple
-Math.pow(7, 2);    // 49
-Math.pow(7, 3);    // 343
-Math.pow(2, 10);   // 1024
-// exponents fractionals
-Math.pow(4, 0.5);  // 2 (rel quadrada de 4)
-Math.pow(8, 1/3);  // 2 (rel cúbica de 8)
-Math.pow(2, 0.5);  // 1.412135623730951 (rel quadrada de 2)
-Math.pow(2, 1/3);  // 1.2599210498948732 (rel cúbica de 2)
-// exponents amb signe
-Math.pow(7, -2);   // 0.02040816326530612 (1/49)
-Math.pow(8, -1/3); // 0.5
-// bases amb signe
-Math.pow(-7, 2);   // 49 (qualsevol nombre elevat al quadrat és positiu)
-Math.pow(-7, 3);   // -343 (nombres elevats al cub poden ser negatius)
-Math.pow(-7, 0.5); // NaN (els nombres negatius no tenen una rel quadrada real)
-// degut a rels "parells" i "senars" estan aprox l'una de l'altra
-// i a límits en la precisió dels nombres de punt flotant,
-// bases negatives amb exponents fraccionals sempre retornen NaN
-Math.pow(-7, 1/3); // NaN
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.2.13', 'Math.pow')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.pow', 'Math.pow')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Math.cbrt()")}} {{experimental_inline}}
    • -
  • {{jsxref("Math.exp()")}}
    • -
  • {{jsxref("Math.log()")}}
    • -
  • {{jsxref("Math.sqrt()")}}
    • -
  • Operador Exponencial {{experimental_inline}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/math/random/index.html b/files/ca/web/javascript/referencia/objectes_globals/math/random/index.html deleted file mode 100644 index d70169efd4..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/math/random/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: Math.random() -slug: Web/JavaScript/Referencia/Objectes_globals/Math/random -translation_of: Web/JavaScript/Reference/Global_Objects/Math/random ---- -
{{JSRef}}
- -

La funció Math.random() retorna un nombre decimal de punt flotant pseudo-aleatori que roman dins el rang [0, 1), és a dir, des de 0 (inclòs) fins a 1 (exclòs), que després pot ser escalat al rang dessitjat. La implementació selecciona la llavor inicial per a l'algoritme generador de nombres aleatoris; aquesta llavor no pot ser resetejada o escollida per l'usuari.

- -
-

Nota: Math.random() no proporciona nombres aleatoris criptogràficament segurs. No l'utilitzeu per a cap tasca relacionada amb la seguretat. Per a aquest ús utilitzeu la API Web Crypto, i més concretament el mètode {{domxref("RandomSource.getRandomValues()", "window.crypto.getRandomValues()")}}.

-
- -

Sintaxi

- -
Math.random()
- -

Exemples

- -

Utilitzar Math.random()

- -

Cal destacar que com que els nombres a JavaScript són nombres de punt flotant IEEE 754 amb comportament d'arrodoniment al parell més proper, els rangs proclamats per les funcions de sota (a excepció de Math.random()) no són exactes. Si s'escullen límits extremadament grans (253 o majors), és possible en casos extremadament rars, obtindre el límit superior que normalment és exclòs.

- -
// Retorna un nombre aleatori entre 0 (inclòs) i 1 (exclòs)
-function getRandom() {
-  return Math.random();
-}
-
- -
// Retorna un nombre aleatori entre min (inclòs) i max (exclòs)
-function getRandomArbitrary(min, max) {
-  return Math.random() * (max - min) + min;
-}
-
- -
// Retorna un nombre sencer aleatori entre min (inclòs) i max (exclòs)
-// Utilitzar Math.round() proporciona una distribució no uniforme!
-function getRandomInt(min, max) {
-  return Math.floor(Math.random() * (max - min)) + min;
-}
-
- -
// Returns a random integer between min (included) and max (included)
-// Using Math.round() will give you a non-uniform distribution!
-function getRandomIntInclusive(min, max) {
-  return Math.floor(Math.random() * (max - min + 1)) + min;
-}
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. JavaScript 1.0 (Només UNIX) / JavaScript 1.1 (Totes les plataformes).
{{SpecName('ES5.1', '#sec-15.8.2.14', 'Math.random')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.random', 'Math.random')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
diff --git a/files/ca/web/javascript/referencia/objectes_globals/math/round/index.html b/files/ca/web/javascript/referencia/objectes_globals/math/round/index.html deleted file mode 100644 index 2510799381..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/math/round/index.html +++ /dev/null @@ -1,207 +0,0 @@ ---- -title: Math.round() -slug: Web/JavaScript/Referencia/Objectes_globals/Math/round -translation_of: Web/JavaScript/Reference/Global_Objects/Math/round ---- -
{{JSRef}}
- -

La funció Math.round() retorna el valor d'un nombre arrodonit al nombre sencer més proper.

- -

Sintaxi

- -
Math.round(x)
- -

Paràmetres

- -
-
x
-
Un nombre.
-
- -

Descripció

- -

Si la porció fraccional del nombre és 0.5 o major, l'argument s'arrodoneix al següent nombre sencer més gran. Si la porció fraccional del nombre és menor de 0.5 l'argument és arrodonit al següent nombre sencer més petit.

- -

Com que round() és un mètode estàtic de Math, sempre s'utilitza com Math.round() en comptes de com un mètode d'un objecte Math creat (Math no és un constructor).

- -

Exemples

- -

Utilitzar Math.round()

- -
// Retorna el valor 20
-x = Math.round(20.49);
-
-// Retorna el valor 21
-x = Math.round(20.5);
-
-// Retorna el valor -20
-x = Math.round(-20.5);
-
-// Retorna el valor -21
-x = Math.round(-20.51);
-
-// Retorna el valor 1 (!)
-// Fixeu-vos en l'error d'arrodoniment degut a la poc precisa aritmètica de punt flotant
-// Compareu això amb Math.round10(1.005, -2) de l'exemple de sota
-x = Math.round(1.005*100)/100;
-
- -

Arrodoniment decimal

- -
// Closure
-(function() {
-  /**
-   * Ajustament decimal d'un nombre
-   *
-   * @param {String}  type  El tipus d'ajustament.
-   * @param {Number}  value El nombre.
-   * @param {Integer} exp   L'exponent (el logaritme en base 10 de la base a ajustar).
-   * @returns {Number} El valor ajustat.
-   */
-  function decimalAdjust(type, value, exp) {
-    // Si l'exponent és undefined o zero...
-    if (typeof exp === 'undefined' || +exp === 0) {
-      return Math[type](value);
-    }
-    value = +value;
-    exp = +exp;
-    // Si el valor no és un nombre o l'exponent no és un nombre sencer...
-    if (isNaN(value) || !(typeof exp === 'number' && exp % 1 === 0)) {
-      return NaN;
-    }
-    // Desplaçament
-    value = value.toString().split('e');
-    value = Math[type](+(value[0] + 'e' + (value[1] ? (+value[1] - exp) : -exp)));
-    // Desfer el desplaçament
-    value = value.toString().split('e');
-    return +(value[0] + 'e' + (value[1] ? (+value[1] + exp) : exp));
-  }
-
-  // Arrodoniment decimal
-  if (!Math.round10) {
-    Math.round10 = function(value, exp) {
-      return decimalAdjust('round', value, exp);
-    };
-  }
-  // Floor decimal
-  if (!Math.floor10) {
-    Math.floor10 = function(value, exp) {
-      return decimalAdjust('floor', value, exp);
-    };
-  }
-  // Ceiling decimal
-  if (!Math.ceil10) {
-    Math.ceil10 = function(value, exp) {
-      return decimalAdjust('ceil', value, exp);
-    };
-  }
-})();
-
-// Arrodoniment
-Math.round10(55.55, -1);   // 55.6
-Math.round10(55.549, -1);  // 55.5
-Math.round10(55, 1);       // 60
-Math.round10(54.9, 1);     // 50
-Math.round10(-55.55, -1);  // -55.5
-Math.round10(-55.551, -1); // -55.6
-Math.round10(-55, 1);      // -50
-Math.round10(-55.1, 1);    // -60
-Math.round10(1.005, -2);   // 1.01 -- compareu aquest resultat amb Math.round(1.005*100)/100 de l'exemple de sobre
-// Floor
-Math.floor10(55.59, -1);   // 55.5
-Math.floor10(59, 1);       // 50
-Math.floor10(-55.51, -1);  // -55.6
-Math.floor10(-51, 1);      // -60
-// Ceil
-Math.ceil10(55.51, -1);    // 55.6
-Math.ceil10(51, 1);        // 60
-Math.ceil10(-55.59, -1);   // -55.5
-Math.ceil10(-59, 1);       // -50
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.2.15', 'Math.round')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.round', 'Math.round')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Math.abs()")}}
    • -
  • {{jsxref("Math.ceil()")}}
    • -
  • {{jsxref("Math.floor()")}}
    • -
  • {{jsxref("Math.sign()")}} {{experimental_inline}}
    • -
  • {{jsxref("Math.trunc()")}} {{experimental_inline}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/math/sign/index.html b/files/ca/web/javascript/referencia/objectes_globals/math/sign/index.html deleted file mode 100644 index 520ff27dc4..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/math/sign/index.html +++ /dev/null @@ -1,131 +0,0 @@ ---- -title: Math.sign() -slug: Web/JavaScript/Referencia/Objectes_globals/Math/sign -translation_of: Web/JavaScript/Reference/Global_Objects/Math/sign ---- -
{{JSRef}}
- -

La funció Math.sign() retorna el signe d'un nombre, indicant si el nombre donat és positiu, negatiu o zero.

- -

Sintaxi

- -
Math.sign(x)
- -

Paràmetres

- -
-
x
-
Un nombre.
-
- -

Descripció

- -

Com que sign() és un mètode estàtic de Math, sempre s'utilitza com Math.sign() en comptes de com un mètode d'un objecte Math creat (Math no és un constructor).

- -

Aquesta funció pot retornar 5 valors diferents, 1, -1, 0, -0, NaN, que representen "nombre positiu", "nombre negatiu", "zero positiu", "zero negatiu" i {{jsxref("NaN")}} respectivament.

- -

L'argument passat a aquesta funció serà convertit al tipus de x implícitament.

- -

Exemples

- -

Utilitzar Math.sign()

- -
Math.sign(3);     //  1
-Math.sign(-3);    // -1
-Math.sign('-3');  // -1
-Math.sign(0);     //  0
-Math.sign(-0);    // -0
-Math.sign(NaN);   // NaN
-Math.sign('foo'); // NaN
-Math.sign();      // NaN
-
- -

Polyfill

- -
Math.sign = Math.sign || function(x) {
-  x = +x; // converteix a un nombre
-  if (x === 0 || isNaN(x)) {
-    return x;
-  }
-  return x > 0 ? 1 : -1;
-}
-
- -

Especificacions

- - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-math.sign', 'Math.sign')}}{{Spec2('ES6')}}Definició inicial.
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome("38")}}{{CompatGeckoDesktop("25")}}{{CompatNo}}{{CompatOpera("25")}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("25")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Math.abs()")}}
    • -
  • {{jsxref("Math.ceil()")}}
    • -
  • {{jsxref("Math.floor()")}}
    • -
  • {{jsxref("Math.round()")}}
    • -
  • {{jsxref("Math.trunc()")}} {{experimental_inline}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/math/sin/index.html b/files/ca/web/javascript/referencia/objectes_globals/math/sin/index.html deleted file mode 100644 index 7f1faf9a98..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/math/sin/index.html +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: Math.sin() -slug: Web/JavaScript/Referencia/Objectes_globals/Math/sin -translation_of: Web/JavaScript/Reference/Global_Objects/Math/sin ---- -
{{JSRef("Global_Objects", "Math")}}
- -

Resum

- -

La funció Math.sin() retorna el sinus d'un nombre.

- -

Sintaxi

- -
Math.sin(x)
- -

Paràmetres

- -
-
x
-
Un nombre (donat en radians).
-
- -

Descripció

- -

El mètode Math.sin() retorna un valor numèric entre -1 i 1, que representa el sinus de l'angle donat en radiants.

- -

Degut a que sin() és un mètode estàtic de Math, sempre s'utilitza com a Math.sin(), en comptes de com a mètode d'una instància de Math (Math no és un constructor).

- -

Exemples

- -

Exemple: Utilitzar Math.sin()

- -
Math.sin(0);           // 0
-Math.sin(1);           // 0.8414709848078965
-
-Math.sin(Math.PI / 2); // 1
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
ECMAScript 1a Edició.{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.2.16', 'Math.sin')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.sin', 'Math.sin')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Math.acos()")}}
    • -
  • {{jsxref("Math.asin()")}}
    • -
  • {{jsxref("Math.atan()")}}
    • -
  • {{jsxref("Math.atan2()")}}
    • -
  • {{jsxref("Math.cos()")}}
    • -
  • {{jsxref("Math.tan()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/math/sinh/index.html b/files/ca/web/javascript/referencia/objectes_globals/math/sinh/index.html deleted file mode 100644 index a1cc1f446a..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/math/sinh/index.html +++ /dev/null @@ -1,129 +0,0 @@ ---- -title: Math.sinh() -slug: Web/JavaScript/Referencia/Objectes_globals/Math/sinh -translation_of: Web/JavaScript/Reference/Global_Objects/Math/sinh ---- -
{{JSRef}}
- -

La funció Math.sinh() retorna el sinus hiperbòlic d'un nombre, que es pot expressar utilitzant la {{jsxref("Math.E", "constant e", "", 1)}}:

- -

Math.sinh(x)=ex-e-x2\mathtt{\operatorname{Math.sinh(x)}} = \frac{e^x - e^{-x}}{2}

- -

Sintaxi

- -
Math.sinh(x)
- -

Paràmetres

- -
-
x
-
Un nombre.
-
- -

Descripció

- -

Com que que sinh() és un mètode estàtic de Math, sempre s'utilitza com a Math.sinh(), en comptes de com a mètode d'una instància de Math (Math no és un constructor).

- -

Exemples

- -

Utilitzar Math.sinh()

- -
Math.sinh(0); // 0
-Math.sinh(1); // 1.1752011936438014
-
- -

Polyfill

- -

Aquest comportament es pot emular amb l'ajut de la funció {{jsxref("Math.exp()")}}:

- -
Math.sinh = Math.sinh || function(x) {
-  return (Math.exp(x) - Math.exp(-x)) / 2;
-}
-
- -

O bé utilitzant només una crida a la funció {{jsxref("Math.exp()")}}:

- -
Math.sinh = Math.sinh || function(x) {
-  var y = Math.exp(x);
-  return (y - 1 / y) / 2;
-}
-
- -

Especificacions

- - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-math.sinh', 'Math.sinh')}}{{Spec2('ES6')}}Definició inicial.
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome("38")}}{{CompatGeckoDesktop("25")}}{{CompatNo}}{{CompatOpera("25")}}{{CompatSafari("7.1")}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("25")}}{{CompatNo}}{{CompatNo}}8
-
- -

Vegeu també

- -
    -
  • {{jsxref("Math.acosh()")}} {{experimental_inline}}
    • -
  • {{jsxref("Math.asinh()")}} {{experimental_inline}}
    • -
  • {{jsxref("Math.atanh()")}} {{experimental_inline}}
    • -
  • {{jsxref("Math.cosh()")}} {{experimental_inline}}
    • -
  • {{jsxref("Math.tanh()")}} {{experimental_inline}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/math/sqrt/index.html b/files/ca/web/javascript/referencia/objectes_globals/math/sqrt/index.html deleted file mode 100644 index b726db8a31..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/math/sqrt/index.html +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: Math.sqrt() -slug: Web/JavaScript/Referencia/Objectes_globals/Math/sqrt -translation_of: Web/JavaScript/Reference/Global_Objects/Math/sqrt ---- -
{{JSRef}}
- -

La funció Math.sqrt() retorna la rel quadrada d'un nombre, és a dir

- -

∀x≥0,Math.sqrt(x)=x=la únicay≥0tal quey2=x\forall x \geq 0, \mathtt{Math.sqrt(x)} = \sqrt{x} = \text{the unique} \; y \geq 0 \; \text{such that} \; y^2 = x

- -

Sintaxi

- -
Math.sqrt(x)
- -

Paràmetres

- -
-
x
-
Un nombre.
-
- -

Descripció

- -

Si el valor de x és negatiu, Math.sqrt() retorna {{jsxref("NaN")}}.

- -

Degut a que sqrt() és un mètode estàtic de Math, sempre s'utilitza com a Math.sqrt(), en comptes de com a mètode d'una instància de Math (Math no és un constructor).

- -

Exemples

- -

Utilitzar Math.sqrt()

- -
Math.sqrt(9); // 3
-Math.sqrt(2); // 1.414213562373095
-
-Math.sqrt(1);  // 1
-Math.sqrt(0);  // 0
-Math.sqrt(-1); // NaN
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.2.17', 'Math.sqrt')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.sqrt', 'Math.sqrt')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Math.cbrt()")}} {{experimental_inline}}
    • -
  • {{jsxref("Math.exp()")}}
    • -
  • {{jsxref("Math.log()")}}
    • -
  • {{jsxref("Math.pow()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/math/sqrt1_2/index.html b/files/ca/web/javascript/referencia/objectes_globals/math/sqrt1_2/index.html deleted file mode 100644 index 3d7d3a1370..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/math/sqrt1_2/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: Math.SQRT1_2 -slug: Web/JavaScript/Referencia/Objectes_globals/Math/SQRT1_2 -translation_of: Web/JavaScript/Reference/Global_Objects/Math/SQRT1_2 ---- -
{{JSRef("Global_Objects", "Math")}}
- -

Resum

- -

La propietat Math.SQRT1_2 representa la rel quadrada de 1/2, que equival aproximadament a 0.707:

- -

Math.SQRT1_2=12=12≈0.707\mathtt{\mi{Math.SQRT1_2}} = \sqrt{\frac{1}{2}} = \frac{1}{\sqrt{2}} \approx 0.707

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

Descripció

- -

Degut a que SQRT1_2  éss una propietat estàtica de Math, sempre s'utilitza com a Math.SQRT1_2 en comptes de com a la propietat d'una instància de Math (Math no és un constructor).

- -

Exemples

- -

Exemple: Utilitzar Math.SQRT1_2

- -

La següent funció retorna 1 dividit per la rel quadrada de 2:

- -
function getRoot1_2() {
-  return Math.SQRT1_2;
-}
-
-getRoot1_2(); // 0.7071067811865476
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat aJavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.1.7', 'Math.SQRT1_2')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.sqrt1_2', 'Math.SQRT1_2')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Math.pow()")}}
    • -
  • {{jsxref("Math.sqrt()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/math/sqrt2/index.html b/files/ca/web/javascript/referencia/objectes_globals/math/sqrt2/index.html deleted file mode 100644 index 3d049f228c..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/math/sqrt2/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: Math.SQRT2 -slug: Web/JavaScript/Referencia/Objectes_globals/Math/SQRT2 -translation_of: Web/JavaScript/Reference/Global_Objects/Math/SQRT2 ---- -
{{JSRef("Global_Objects", "Math")}}
- -

Resum

- -

La propietat Math.SQRT2 representa la rel quadrada de 2, que és aproximadament 1.414:

- -

Math.SQRT2=2≈1.414\mathtt{\mi{Math.SQRT2}} = \sqrt{2} \approx 1.414

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

Descripció

- -

Degut a que SQRT2 és una propietat estàtica de Math, sempre s'utilitza com a Math.SQRT2, en comptes de com la propietat d'una instància de Math (Math no és un constructor).

- -

Exemples

- -

Exemple: Utilitzar Math.SQRT2

- -

La funció següent retorna la rel quadrada de 2:

- -
function getRoot2() {
-  return Math.SQRT2;
-}
-
-getRoot2(); // 1.4142135623730951
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.1.8', 'Math.SQRT2')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.sqrt2', 'Math.SQRT2')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Math.pow()")}}
    • -
  • {{jsxref("Math.sqrt()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/math/tan/index.html b/files/ca/web/javascript/referencia/objectes_globals/math/tan/index.html deleted file mode 100644 index 590e1f5fc8..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/math/tan/index.html +++ /dev/null @@ -1,140 +0,0 @@ ---- -title: Math.tan() -slug: Web/JavaScript/Referencia/Objectes_globals/Math/tan -translation_of: Web/JavaScript/Reference/Global_Objects/Math/tan ---- -
{{JSRef("Global_Objects", "Math")}}
- -

Resum

- -

La funció Math.tan() retorna la tangent d'un nombre.

- -

Sintaxi

- -
Math.tan(x)
- -

Paràmetres

- -
-
x
-
Un nombre que representa un angle, mesurat en radians.
-
- -

Descripció

- -

El mètode Math.tan() retorna un valor numèric que representa la tangent d'un angle.

- -

Degut a que tan() és un mètode estàtic de Math, sempre s'utilitza com a Math.tan(), en comptes de com a mètode d'una instància de Math (Math no és un constructor).

- -

Exemples

- -

Exemple: Utilitzar Math.tan()

- -
Math.tan(1); // 1.5574077246549023
-
- -

Com que la funció Math.tan() accepta radians però sovint és més fàcil treballar amb graus, a funció següent accepta un valor en graus, el converteix a radians i retorna la tangent.

- -
function getTanDeg(deg) {
-  var rad = deg * Math.PI/180;
-  return Math.tan(rad);
-}
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
ECMAScript 1a Edició.{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.2.18', 'Math.tan')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.tan', 'Math.tan')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
- - - - - - -
Característica
- 		AndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Math.acos()")}}
    • -
  • {{jsxref("Math.asin()")}}
    • -
  • {{jsxref("Math.atan()")}}
    • -
  • {{jsxref("Math.atan2()")}}
    • -
  • {{jsxref("Math.cos()")}}
    • -
  • {{jsxref("Math.sin()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/math/tanh/index.html b/files/ca/web/javascript/referencia/objectes_globals/math/tanh/index.html deleted file mode 100644 index ada19d17e0..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/math/tanh/index.html +++ /dev/null @@ -1,142 +0,0 @@ ---- -title: Math.tanh() -slug: Web/JavaScript/Referencia/Objectes_globals/Math/tanh -translation_of: Web/JavaScript/Reference/Global_Objects/Math/tanh ---- -
{{JSRef}}
- -

La funció Math.tanh() retorna la tangent hiperbòlica d'un nombre, és a dir

- -

tanhx=sinhxcoshx=ex-e-xex+e-x=e2x-1e2x+1\tanh x = \frac{\sinh x}{\cosh x} = \frac {e^x - e^{-x}} {e^x + e^{-x}} = \frac{e^{2x} - 1}{e^{2x}+1}

- -

Sintaxi

- -
Math.tanh(x)
- -

Paràmetres

- -
-
x
-
Un nombre.
-
- -

Descripció

- -

Com que que tanh() és un mètode estàtic de Math, sempre s'utilitza com a Math.tanh(), en comptes de com a mètode d'una instància de Math (Math no és un constructor).

- -

Exemples

- -

Utilitzar Math.tanh()

- -
Math.tanh(0);        // 0
-Math.tanh(Infinity); // 1
-Math.tanh(1);        // 0.7615941559557649
-
- -

Polyfill

- -

Aquest comportament pot emular-se amb l'ajuda de la funció {{jsxref("Math.exp()")}}:

- -
Math.tanh = Math.tanh || function(x) {
-  if (x === Infinity) {
-    return 1;
-  } else if (x === -Infinity) {
-    return -1;
-  } else {
-    return (Math.exp(x) - Math.exp(-x)) / (Math.exp(x) + Math.exp(-x));
-  }
-}
-
- -

o bé utilitzant només una crida a {{jsxref("Math.exp()")}}:

- -
Math.tanh = Math.tanh || function(x) {
-  if (x === Infinity) {
-    return 1;
-  } else if (x === -Infinity) {
-    return -1;
-  } else {
-    var y = Math.exp(2 * x);
-    return (y - 1) / (y + 1);
-  }
-}
-
- -

Especificacions

- - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-math.tanh', 'Math.tanh')}}{{Spec2('ES6')}}Definició inicial.
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome("38")}}{{CompatGeckoDesktop("25")}}{{CompatNo}}{{CompatOpera("25")}}{{CompatSafari("7.1")}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("25")}}{{CompatNo}}{{CompatNo}}8
-
- -

Vegeu també

- -
    -
  • {{jsxref("Math.acosh()")}} {{experimental_inline}}
    • -
  • {{jsxref("Math.asinh()")}} {{experimental_inline}}
    • -
  • {{jsxref("Math.atanh()")}} {{experimental_inline}}
    • -
  • {{jsxref("Math.cosh()")}} {{experimental_inline}}
    • -
  • {{jsxref("Math.sinh()")}} {{experimental_inline}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/math/trunc/index.html b/files/ca/web/javascript/referencia/objectes_globals/math/trunc/index.html deleted file mode 100644 index 4f76502d69..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/math/trunc/index.html +++ /dev/null @@ -1,129 +0,0 @@ ---- -title: Math.trunc() -slug: Web/JavaScript/Referencia/Objectes_globals/Math/trunc -translation_of: Web/JavaScript/Reference/Global_Objects/Math/trunc ---- -
{{JSRef}}
- -

La funció Math.trunc() retorna la part integral d'un nombre, tot descartant els dígits decimals.

- -

Sintaxi

- -
Math.trunc(x)
- -

Paràmetres

- -
-
x
-
Un nombre.
-
- -

Descripció

- -

Al contrari que altres mètodes de Math : {{jsxref("Math.floor()")}}, {{jsxref("Math.ceil()")}} and {{jsxref("Math.round()")}}, la forma en la que Math.trunc() funciona és molt simple, simplement trunca el punt i els dígits que queden a la dreta, sense importa si l'argument és un nombre positiu o negatiu.

- -

Així que, si l'argument és un nombre positiu, Math.trunc() és equivalent a Math.floor(), en cas contrari, Math.trunc() és equivalent a Math.ceil().

- -

Cal destacar que l'argument passat a aquest mètode serà convertit a un nombre de forma implícita.

- -

Com que trunc() és un mètode estàtic de Math, sempre s'utilitza com Math.trunc() en comptes de com un mètode d'un objecte Math creat (Math no és un constructor).

- -

Exemples

- -

Utilitzar Math.trunc()

- -
Math.trunc(13.37);    // 13
-Math.trunc(42.84);    // 42
-Math.trunc(0.123);    //  0
-Math.trunc(-0.123);   // -0
-Math.trunc('-1.123'); // -1
-Math.trunc(NaN);      // NaN
-Math.trunc('foo');    // NaN
-Math.trunc();         // NaN
-
- -

Polyfill

- -
Math.trunc = Math.trunc || function(x) {
-  return x < 0 ? Math.ceil(x) : Math.floor(x);
-}
-
- -

Especificacions

- - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-math.trunc', 'Math.trunc')}}{{Spec2('ES6')}}Definició inicial.
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome("38")}}{{CompatGeckoDesktop("25")}}{{CompatNo}}{{CompatOpera("25")}}{{CompatSafari("7.1")}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("25")}}{{CompatNo}}{{CompatNo}}8
-
- -

Vegeu també

- -
    -
  • {{jsxref("Math.abs()")}}
    • -
  • {{jsxref("Math.ceil()")}}
    • -
  • {{jsxref("Math.floor()")}}
    • -
  • {{jsxref("Math.round()")}}
    • -
  • {{jsxref("Math.sign()")}} {{experimental_inline}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/nan/index.html b/files/ca/web/javascript/referencia/objectes_globals/nan/index.html deleted file mode 100644 index 1d6f4a4dc8..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/nan/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: NaN -slug: Web/JavaScript/Referencia/Objectes_globals/NaN -translation_of: Web/JavaScript/Reference/Global_Objects/NaN ---- -
-
-
{{jsSidebar("Objects")}}
-
-
- -

Resum

- -

La propietat global NaN és un valor que representa Not-A-Number.

- -

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

- -

Sintaxi

- -
NaN
- -

Descripció

- -

NaN és una propietat de l'objecte global.

- -

El valor inicial de NaN és Not-A-Number — el mateix que el valor de Number.NaN. En navegadors moderns NaN és una propietat no configurable que no pot ser escrita. En cas contrari es recomana no sobreescriure el seu valor.

- -

L'ús directe de NaN és poc freqüent. Apareix tot sovint però com va valor retornat quan una funció matemàtica falla (Math.sqrt(-1)) o quan s'intenta convertir una cadena de text a nombre sense èxit (parseInt("blabla")).

- -

Comparant NaN

- -

L'operador d'igualtat (== i ===) no pot ésser emprat per comparar un resultat amb NaN. Es fa necessari l'ús de {{jsxref("Number.isNaN()")}} o bé {{jsxref("Global_Objects/isNaN", "isNaN()")}}.

- -
NaN === NaN;        // false
-Number.NaN === NaN; // false
-isNaN(NaN);         // true
-isNaN(Number.NaN);  // true
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.3
{{SpecName('ES5.1', '#sec-15.1.1.1', 'NaN')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-value-properties-of-the-global-object-nan', 'NaN')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Number.NaN")}}
    • -
  • {{jsxref("Number.isNaN()")}}
    • -
  • {{jsxref("Global_Objects/isNaN", "isNaN()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/null/index.html b/files/ca/web/javascript/referencia/objectes_globals/null/index.html deleted file mode 100644 index 97506ddeb5..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/null/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: 'null' -slug: Web/JavaScript/Referencia/Objectes_globals/null -translation_of: Web/JavaScript/Reference/Global_Objects/null ---- -
-
-
{{jsSidebar("Objects")}}
-
-
- -

Resum

- -

El valor null és un literal de JavaScript que representa un valor nul o "buit", per exemple, quan no s'ha asignat cap valor previ. És un dels {{Glossary("Primitive", "valors primitius")}} de JavaScript.

- -

Sintaxi

- -
null
- -

Descripció

- -

El valor null és un literal (i no una propietat de l'objecte global, com ho és undefined). A l'utilitzar les APIs, null s'obté sovint en comptes de l'objecte esperat quan no hi ha cap objecte relevant. Quan es vol comprovar si un valor és null o be undefined és important recordar les diferències entre els operadors d'igualtat (==) i d'identitat (===) (ja que amb el primer s'aplica una conversió de tipus).

- -
// foo no existeix, no està definit i no s'ha inicialitzat mai
-> foo
-"ReferenceError: foo is not defined"
-
-// Es sap que foo existeix ara però no té tipus ni cap valor assignat:
-> var foo = null; foo
-"null"
-
- -

Diferència entre null i undefined

- -
typeof null        // objecte (degut a un bug a ECMAScript, hauria de ser null)
-typeof undefined   // undefined
-null === undefined // false
-null  == undefined // true
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial.
{{SpecName('ES5.1', '#sec-4.3.11', 'null value')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-null-value', 'null value')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Global_Objects/undefined", "undefined")}}
    • -
  • {{jsxref("Global_Objects/NaN", "NaN")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/number/epsilon/index.html b/files/ca/web/javascript/referencia/objectes_globals/number/epsilon/index.html deleted file mode 100644 index 5e3f602703..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/number/epsilon/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: Number.EPSILON -slug: Web/JavaScript/Referencia/Objectes_globals/Number/EPSILON -translation_of: Web/JavaScript/Reference/Global_Objects/Number/EPSILON ---- -
{{JSRef("Global_Objects", "Number")}}
- -

Resum

- -

La propietat Number.EPSILON representa la diferència entre el nombre 1 i el valor més petit major que 1 que pot ser representat com un {{jsxref("Global_Objects/Number", "Number")}}.

- -

Per tal d'accedir a la propietat no es fa necessari crear un objecte {{jsxref("Global_Objects/Number", "Number")}} ja que és una propietat estàtica i n'hi ha prou amb fer servir Number.EPSILON per a obtindre el valor.

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

Descripció

- -

La propietat EPSILON té un valor aproximat de 2.2204460492503130808472633361816E-16, és a dir, 2-52.

- -

Exemples

- -

Exemple: Comprovant l'igualtat

- -
x = 0.2;
-y = 0.3;
-equal = (Math.abs(x - y) < Number.EPSILON);
-
- -

Especificacions

- - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-15.7.3.7', 'Number.EPSILON')}}{{Spec2('ES6')}}Definició inicial
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatGeckoDesktop("25.0")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("25.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

Vegeu també

- -
    -
  • L'objecte {{jsxref("Global_Objects/Number", "Number")}} al qual pertany.
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/number/index.html b/files/ca/web/javascript/referencia/objectes_globals/number/index.html deleted file mode 100644 index 5f4b7a0bb2..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/number/index.html +++ /dev/null @@ -1,214 +0,0 @@ ---- -title: Number -slug: Web/JavaScript/Referencia/Objectes_globals/Number -translation_of: Web/JavaScript/Reference/Global_Objects/Number ---- -
{{JSRef("Global_Objects", "Number")}}
- -

Resum

- -

L'objecte de JavaScript Number és un objecte embolcall que permet treballar amb valors numèrics. Un objecte de tipus Number és creat quan es crida el constructor Number().

- -

Constructor

- -
new Number(valor);
- -

Paràmetres

- -
-
valor
-
El valor numèric de l'objecte que es pretèn crear.
-
- -

Descripció

- -

Els usos pricipals de l'objecte Number són:

- -
    -
  • Si l'argument dona al constructor no es pot convertir en un nombre aquest retorna {{jsxref("Global_Objects/NaN", "NaN")}}.
    • -
  • Number pot ser emprat per a realitzar conversions de tipus sense necesitat de crear un nou objecte.
    • -
- -

Propietats

- -
-
{{jsxref("Number.EPSILON")}} {{experimental_inline}}
-
L'interval més petit entre dos nombres que es pot representar.
-
{{jsxref("Number.MAX_SAFE_INTEGER")}} {{experimental_inline}}
-
El nombre sencer més gran que JavaScript pot representar de forma segura (253 - 1).
-
{{jsxref("Number.MAX_VALUE")}}
-
El nombre positiu més gran que pot ésser representat.
-
{{jsxref("Number.MIN_SAFE_INTEGER")}} {{experimental_inline}}
-
El nombre més petit que JavaScript pot representar de forma segura (-(253 - 1)).
-
{{jsxref("Number.MIN_VALUE")}}
-
El nombre positiu més petit que pot ésser representat. És a dir, el nombre positiu més proper a zero sense arribar a ser zero.
-
{{jsxref("Number.NaN")}}
-
El valor especial "not a number".
-
{{jsxref("Number.NEGATIVE_INFINITY")}}
-
El valor especial que representa l'infinit negatiu. És retornat quan es produeix un overflow.
-
{{jsxref("Number.POSITIVE_INFINITY")}}
-
El valor especial que representa l'infinit positiu. És retornat quan es produeix un overflow.
-
{{jsxref("Number.prototype")}}
-
Permet l'adició de propietats a l'objecte Number.
-
- -
{{jsOverrides("Function", "properties", "MAX_VALUE", "MIN_VALUE", "NaN", "NEGATIVE_INFINITY", "POSITIVE_INFINITY", "protoype")}}
- -

Mètodes

- -
-
{{jsxref("Number.isNaN()")}} {{experimental_inline}}
-
Determina si el valor proporcionat és NaN.
-
{{jsxref("Number.isFinite()")}} {{experimental_inline}}
-
Determina si el valor que representa és un valor finit.
-
{{jsxref("Number.isInteger()")}} {{experimental_inline}}
-
Determina si el valor que representa és un nombre i si es tracta d'un nombre sencer.
-
{{jsxref("Number.isSafeInteger()")}} {{experimental_inline}}
-
Determina si el tipus del valor proporcionat així com el valor en sí mateix és un nombre sencer segur (nombre entre -(253 - 1) i 253 - 1).
-
{{jsxref("Number.toInteger()")}} {{obsolete_inline}}
-
Utilitzat per evaluar el valor passat i convertir-lo a sencer (o bé {{jsxref("Global_Objects/Infinity", "Infinity")}}), però s'ha eliminat.
-
{{jsxref("Number.parseFloat()")}} {{experimental_inline}}
-
Fa la mateixa funció que el mètode {{jsxref("Global_Objects/parseFloat", "parseFloat")}} de l'objecte global.
-
{{jsxref("Number.parseInt()")}} {{experimental_inline}}
-
Fa la mateixa funció que el mètode {{jsxref("Global_Objects/parseInt", "parseInt")}} de l'objecte global.
-
- -
{{jsOverrides("Function", "Methods", "isNaN")}}
- -

Instàncies de Number

- -

Totes les instàncies de Number hereten de {{jsxref("Number.prototype")}}. L'objecte prototype del constructor Number pot ser modificat per a afectar a totes les instàncies de Number.

- -

Mètodes

- -
{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/prototype', 'Methods')}}
- -

Exemples

- -

Exemple: Utilitzar l'objecte Number per a assignar valors numèrics a variables

- -

L'exemple que trobareu a continuació utilitza les propietats de l'objecte Number per a assignar valors a diferents variables numèriques:

- -
var biggestNum = Number.MAX_VALUE;
-var smallestNum = Number.MIN_VALUE;
-var infiniteNum = Number.POSITIVE_INFINITY;
-var negInfiniteNum = Number.NEGATIVE_INFINITY;
-var notANum = Number.NaN;
-
- -

Exemple: Rang de sencers de Number

- -

El següent exemple mostra el valor sencer mínim i màxim que pot ésser representat per un objecte de tipus Number (per a més detalls, referiu-vos a l'standard EcmaScript, capítol 8.5 El tipus Number):

- -
var biggestInt = 9007199254740992;
-var smallestInt = -9007199254740992;
-
- -

A l'interpretar dades que han sigut serialitzades amb JSON, els valors que queden fora d'aquest rang poden esdevenir corruptes quan l'intèrpret de JSON els forci esdevenir de tipus Number. Una forma d'evitar aquesta limitació és utilitzar una {{jsxref("Global_Objects/String", "String")}} per representar el nombre.

- -

Exemple: Utilitzar Number per a convertir un objecte de tipus Date

- -

L'exemple que trobareu a continuació converteix un objecte de tipus {{jsxref("Global_Objects/Date", "Date")}} a un tipus numèric tot utilitzant Number com una funció:

- -
var d = new Date('December 17, 1995 03:24:00');
-print(Number(d));
-
- -

Aquest exemple mostrarà "819199440000".

- -

Exemple: Convertir cadenes de caràcters numèriques a nombres

- -
Number("123")     // 123
-Number("")        // 0
-Number("0x11")    // 17
-Number("0b11")    // 3
-Number("0o11")    // 9
-Number("foo")     // NaN
-Number("100a")    // NaN
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.7', 'Number')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-number-objects', 'Number')}}{{Spec2('ES6')}}Afegides nous mètodes i propietats: ({{jsxref("Number.EPSILON", "EPSILON")}}, {{jsxref("Number.isFinite", "isFinite")}}, {{jsxref("Number.isInteger", "isInteger")}}, {{jsxref("Number.isNaN", "isNaN")}}, {{jsxref("Number.parseFloat", "parseFloat")}}, {{jsxref("Number.parseInt", "parseInt")}})
- -

Compatibilitat amb navegadores

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Global_Objects/NaN", "NaN")}}
    • -
  • L'objecte global {{jsxref("Global_Objects/Math", "Math")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/number/isfinite/index.html b/files/ca/web/javascript/referencia/objectes_globals/number/isfinite/index.html deleted file mode 100644 index 21d9493bf8..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/number/isfinite/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: Number.isFinite() -slug: Web/JavaScript/Referencia/Objectes_globals/Number/isFinite -translation_of: Web/JavaScript/Reference/Global_Objects/Number/isFinite ---- -
{{JSRef}}
- -

El mètode Number.isFinite() determina si el valor que se li passa com a argument és un nombre finit o no.

- -

Sintaxi

- -
Number.isFinite(valor)
- -

Paràmetres

- -
-
valor
-
El valor que es comprovarà si és finit.
-
- -

Descripció

- -

En comparació amb la funció global {{jsxref("Global_Objects/isFinite", "isFinite()")}}, aquest mètode no converteix el paràmetres a un nombre forçosament. Això implica que només valors de tipus number, que també siguin finits, retornaran true.

- -

Exemples

- -
Number.isFinite(Infinity);  // false
-Number.isFinite(NaN);       // false
-Number.isFinite(-Infinity); // false
-
-Number.isFinite(0);         // true
-Number.isFinite(2e64);      // true
-
-Number.isFinite('0');       // false, seria true si s'utilitzés la
-                            // funció global isFinite('0')
-
- -

Polyfill

- -
Number.isFinite = Number.isFinite || function(value) {
-    return typeof value === "number" && isFinite(value);
-}
-
- -

Especificacions

- - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-number.isfinite', 'Number.isInteger')}}{{Spec2('ES6')}}Definició inicial.
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome("19")}}{{CompatGeckoDesktop("16")}}{{CompatNo}}{{CompatOpera("15")}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("16")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

Vegeu també

- -
    -
  • L'objecte {{jsxref("Global_Objects/Number", "Number")}} al que pertany.
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/number/isinteger/index.html b/files/ca/web/javascript/referencia/objectes_globals/number/isinteger/index.html deleted file mode 100644 index ee524e91c2..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/number/isinteger/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: Number.isInteger() -slug: Web/JavaScript/Referencia/Objectes_globals/Number/isInteger -translation_of: Web/JavaScript/Reference/Global_Objects/Number/isInteger ---- -
{{JSRef}}
- -

El mètode Number.isInteger() determina si el valor que se li passa és un nombre sencer.

- -

Sintaxi

- -
Number.isInteger(valor)
- -

Paràmetres

- -
-
valor
-
El valor que serà comprovat si és sencer o no.
-
- -

Descripció

- -

Si el valor passat és un nombre sencer, la funció retornarà true, en cas contrari es retorna false. Si el valor és {{jsxref("Global_Objects/NaN", "NaN")}} o infinit, es retorna false.

- -

Exemples

- -
Number.isInteger(0.1);     // false
-Number.isInteger(1);       // true
-Number.isInteger(Math.PI); // false
-Number.isInteger(-100000); // true
-Number.isInteger(NaN);     // false
-Number.isInteger(0);       // true
-Number.isInteger("10");    // false
-
- -

Polyfill

- -
Number.isInteger = Number.isInteger || function(value) {
-    return typeof value === "number" &&
-           isFinite(value) &&
-           Math.floor(value) === value;
-};
-
- -

Especificacions

- - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-number.isinteger', 'Number.isInteger')}}{{Spec2('ES6')}}Definició inicial.
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatGeckoDesktop("16")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("16")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

Vegeu també

- -
    -
  • L'objecte {{jsxref("Global_Objects/Number", "Number")}} al que pertany.
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/number/isnan/index.html b/files/ca/web/javascript/referencia/objectes_globals/number/isnan/index.html deleted file mode 100644 index f6ba247306..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/number/isnan/index.html +++ /dev/null @@ -1,129 +0,0 @@ ---- -title: Number.isNaN() -slug: Web/JavaScript/Referencia/Objectes_globals/Number/isNaN -translation_of: Web/JavaScript/Reference/Global_Objects/Number/isNaN ---- -
{{JSRef}}
- -

El mètode Number.isNaN() determina si el valor passat com a argument és {{jsxref("Global_Objects/NaN", "NaN")}}. És una versió més robusta de la funció global {{jsxref("Global_Objects/isNaN", "isNaN()")}}.

- -

Sintaxi

- -
Number.isNaN(valor)
- -

Paràmetres

- -
-
valor
-
El valor que es comprovarà si és {{jsxref("Global_Objects/NaN", "NaN")}}.
-
- -

Descripció

- -

Degut als dos operadors d'igualtat, {{jsxref("Operators/Comparison_Operators", "==", "#Equality")}} i {{jsxref("Operators/Comparison_Operators", "===", "#Identity")}}, retornen  false quan es comprova si {{jsxref("Global_Objects/NaN", "NaN")}} és {{jsxref("Global_Objects/NaN", "NaN")}}, la funció Number.isNaN() esdevé necesària. Aquesta situació és diferent a totes les altres posibles comparacions a JavaScript.

- -

En comparació a la funció global {{jsxref("Global_Objects/isNaN", "isNaN()")}} function, Number.isNaN() no sofreix el problema de convertir forçosament el paràmetre donat a un nombre. Això implica que ara és segur passar valors que normalment serien convertits a {{jsxref("Global_Objects/NaN", "NaN")}} però en realitat no tenen el mateix valor que {{jsxref("Global_Objects/NaN", "NaN")}}. Això també implica que només valors de tipus number, que també siguin {{jsxref("Global_Objects/NaN", "NaN")}}, retornaran true.

- -

Exemples

- -
Number.isNaN(NaN);        // true
-Number.isNaN(Number.NaN); // true
-Number.isNaN(0 / 0)       // true
-
-// exemples que esdevindrien true amb la funció global isNaN()
-Number.isNaN("NaN");      // false
-Number.isNaN(undefined);  // false
-Number.isNaN({});         // false
-Number.isNaN("blabla");   // false
-
-// Tots els següents retornen false
-Number.isNaN(true);
-Number.isNaN(null);
-Number.isNaN(37);
-Number.isNaN("37");
-Number.isNaN("37.37");
-Number.isNaN("");
-Number.isNaN(" ");
-
- -

Polyfill

- -
Number.isNaN = Number.isNaN || function(value) {
-    return typeof value === "number" && value !== value;
-}
- -

Especificacions

- - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-number.isnan', 'Number.isnan')}}{{Spec2('ES6')}}Definició inicial.
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome("25")}}{{CompatGeckoDesktop("15")}}{{CompatNo}}{{CompatVersionUnknown}}9
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatUnknown}}{{CompatGeckoMobile("15")}}{{CompatNo}}{{CompatNo}}iOS 9+
-
- -

Vegeu també

- -
    -
  • {{jsxref("Global_Objects/Number", "Number")}}
    • -
  • {{jsxref("Global_Objects/isNaN", "isNaN()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/number/issafeinteger/index.html b/files/ca/web/javascript/referencia/objectes_globals/number/issafeinteger/index.html deleted file mode 100644 index 7570e7289d..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/number/issafeinteger/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: Number.isSafeInteger() -slug: Web/JavaScript/Referencia/Objectes_globals/Number/isSafeInteger -translation_of: Web/JavaScript/Reference/Global_Objects/Number/isSafeInteger ---- -
{{JSRef}}
- -

El mètode Number.isSafeInteger() determina si el valor proporcionat és un nombre sencer segur. Un nombre sencer segur és aquell que

- -
    -
  • pot ser representat de forma exacta per un nombre de doble precisió IEEE-754, i
    • -
  • la seva representació IEEE-754 no pot ser el resultat de arrodonir cap altre nombre sencer per a encabir-lo a la representació IEEE-754.
    • -
- -

Per exemple, 253 - 1 és un nombre sencer segur: pot ser representat de forma exacta i cap altre nombre sencer arrodonit coincideix amb ell sota cap mode d'arrodoniment IEEE-754. Per contra, 253 no és un nombre sencer segur: pot ser representat de manera exacta en IEEE-754, però el nombre sencer 253 + 1 no pot ser representat directament en IEEE-754 sino que s'arrodoniria a 253 mitjançant un arrodoniment al sencer més proper i un arrodoniment cap al zero.

- -

Els nombres sencers segurs consisteixen en tots els nombres sencers des de -(253 - 1) inclòs fins a 253 - 1 inclòs.

- -

Sintaxi

- -
Number.isSafeInteger(valor)
- -

Paràmetres

- -
-
valor
-
El valor a ser testat com a nombre sencer segur.
-
- -

Exemples

- -
Number.isSafeInteger(3);                    // true
-Number.isSafeInteger(Math.pow(2, 53));      // false
-Number.isSafeInteger(Math.pow(2, 53) - 1);  // true
-Number.isSafeInteger(NaN);                  // false
-Number.isSafeInteger(Infinity);             // false
-Number.isSafeInteger('3');                  // false
-Number.isSafeInteger(3.1);                  // false
-Number.isSafeInteger(3.0);                  // true
-
- -

Especificacions

- - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-number.issafeinteger', 'Number.isSafeInteger')}}{{Spec2('ES6')}}Definició inicial.
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatGeckoDesktop("32")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("32")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

Vegeu també

- -
    -
  • L'objecte {{jsxref("Global_Objects/Number", "Number")}} al que pertany.
    • -
  • {{jsxref("Number.MIN_SAFE_INTEGER")}}
    • -
  • {{jsxref("Number.MAX_SAFE_INTEGER")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/number/max_safe_integer/index.html b/files/ca/web/javascript/referencia/objectes_globals/number/max_safe_integer/index.html deleted file mode 100644 index 02483b41ac..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/number/max_safe_integer/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: Number.MAX_SAFE_INTEGER -slug: Web/JavaScript/Referencia/Objectes_globals/Number/MAX_SAFE_INTEGER -translation_of: Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER ---- -
{{JSRef("Global_Objects", "Number")}}
- -

Resum

- -

La constant Number.MAX_SAFE_INTEGER representa el valor màxim que JavaScript pot representar de forma segura (253 - 1).

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

Descripció

- -

La constant MAX_SAFE_INTEGER te un valor de 9007199254740991. El raonament darrera d'aquest nombre és que JavaScript utilitza un format de nombres de coma flotant de doble precisió, tal com s'especifica al IEEE 754 i en conseqüència només pot representar de forma segura els nombres entre -(253 - 1) i 253 - 1.

- -

Degut a que MAX_SAFE_INTEGER és una propietat estàtica de {{jsxref("Global_Objects/Number", "Number")}}, sempre s'accedeix de mitjançant Number.MAX_SAFE_INTEGER en comptes de com una propietat d'un objecte {{jsxref("Global_Objects/Number", "Number")}} instanciat.

- -

Exemples

- -
Number.MAX_SAFE_INTEGER // 9007199254740991
-Math.pow(2, 53) - 1     // 9007199254740991
-
- -

Especificacions

- - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-number.max_safe_integer', 'Number.MAX_SAFE_INTEGER')}}{{Spec2('ES6')}}Definició inicial.
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome("34")}}{{CompatGeckoDesktop("31")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("32")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Number.MIN_SAFE_INTEGER")}}
    • -
  • {{jsxref("Number.isSafeInteger()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/number/max_value/index.html b/files/ca/web/javascript/referencia/objectes_globals/number/max_value/index.html deleted file mode 100644 index 453ad01c23..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/number/max_value/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: Number.MAX_VALUE -slug: Web/JavaScript/Referencia/Objectes_globals/Number/MAX_VALUE -translation_of: Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE ---- -
-
{{JSRef("Global_Objects", "Number")}}
-
- -

Resum

- -

La propietat Number.MAX_VALUE representa el valor numèric màxim representable en JavaScript.

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

Descripció

- -

La propietat MAX_VALUE té un valor aproximadament de 1.79E+308. Els valors més grans que MAX_VALUE són representats com a "Infinity".

- -

Ja que MAX_VALUE és una propietat estàtica de {{jsxref("Global_Objects/Number", "Number")}}, sempre es fa servir com a Number.MAX_VALUE, en comptes d'una propietat de l'objecte {{jsxref("Global_Objects/Number", "Number")}} que s'ha creat.

- -

Exemples

- -

Exemple: Fer servir MAX_VALUE

- -

El codi següent multiplica dos valors numèrics. Si el resultat és menor o igual a  MAX_VALUE, es crida la funció func1; del contrari, es crida la funció func2.

- -
if (num1 * num2 <= Number.MAX_VALUE) {
-  func1();
-} else {
-  func2();
-}
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
1a edició de ECMAScript.EstàndardDefinició inicial. Implementat en JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.7.3.2', 'Number.MAX_VALUE')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-number.max_value', 'Number.MAX_VALUE')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Supor bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Number.MIN_VALUE")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/number/min_safe_integer/index.html b/files/ca/web/javascript/referencia/objectes_globals/number/min_safe_integer/index.html deleted file mode 100644 index 861ec666ec..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/number/min_safe_integer/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: Number.MIN_SAFE_INTEGER -slug: Web/JavaScript/Referencia/Objectes_globals/Number/MIN_SAFE_INTEGER -translation_of: Web/JavaScript/Reference/Global_Objects/Number/MIN_SAFE_INTEGER ---- -
{{JSRef("Global_Objects", "Number")}}
- -

Resum

- -

La constant Number.MIN_SAFE_INTEGER representa el nombre sencer segur més petit a JavaScript (-(253 - 1)).

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

Descripció

- -

La constant MIN_SAFE_INTEGER te un valor de -9007199254740991. El raonament darrera d'aquest nombre és que JavaScript utilitza un format de nombres de coma flotant de doble precisió, tal com s'especifica al IEEE 754 i en conseqüència només pot representar de forma segura els nombres entre -(253 - 1) i 253 - 1.

- -

Degut a que MIN_SAFE_INTEGER és una propietat estàtica de {{jsxref("Global_Objects/Number", "Number")}}, sempre s'accedeix de mitjançant Number.MIN_SAFE_INTEGER en comptes de com una propietat d'un objecte {{jsxref("Global_Objects/Number", "Number")}} instanciat.

- -

Exemples

- -
Number.MIN_SAFE_INTEGER // -9007199254740991
--(Math.pow(2, 53) - 1)  // -9007199254740991
-
- -

Especificacions

- - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-number.min_safe_integer', 'Number.MIN_SAFE_INTEGER')}}{{Spec2('ES6')}}Definició inicial.
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome("34")}}{{CompatGeckoDesktop("31")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("32")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Number.MAX_SAFE_INTEGER")}}
    • -
  • {{jsxref("Number.isSafeInteger()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/number/min_value/index.html b/files/ca/web/javascript/referencia/objectes_globals/number/min_value/index.html deleted file mode 100644 index 42af185360..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/number/min_value/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: Number.MIN_VALUE -slug: Web/JavaScript/Referencia/Objectes_globals/Number/MIN_VALUE -translation_of: Web/JavaScript/Reference/Global_Objects/Number/MIN_VALUE ---- -
{{JSRef("Global_Objects", "Number")}}
- -

Resum

- -

La propietat Number.MIN_VALUE representa el valor numèric positiu més petit representable en JavaScript.

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

Descripció

- -

La propietat MIN_VALUE és el nombre més proper a 0, però no és el nombre més negatiu que es pot representar en JavaScript.

- -

MIN_VALUE té un valor aproximat de 5e-324. Els valors més petits que MIN_VALUE ("underflow values") són convertits a 0.

- -

Ja que MIN_VALUE és una propietat estàtica de {{jsxref("Global_Objects/Number", "Number")}}, sempre s'usa com a Number.MIN_VALUE, i no com una propietat de l'objecte {{jsxref("Global_Objects/Number", "Number")}} que heu creat.

- -

Exemples

- -

Exemple: Fer servir MIN_VALUE

- -

El codi següent divideix dos valors numèrics. Si el valor és més gran o igual a MIN_VALUE, la funció func1 és crida; del contrari, es crida la funció func2.

- -
if (num1 / num2 >= Number.MIN_VALUE) {
-  func1();
-} else {
-  func2();
-}
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
1a edició de ECMAScript.EstàndardDefinició inicial. Implementat en JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.7.3.3', 'Number.MIN_VALUE')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-number.min_value', 'Number.MIN_VALUE')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterístcaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Number.MAX_VALUE")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/number/nan/index.html b/files/ca/web/javascript/referencia/objectes_globals/number/nan/index.html deleted file mode 100644 index 7c6f3f1440..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/number/nan/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: Number.NaN -slug: Web/JavaScript/Referencia/Objectes_globals/Number/NaN -translation_of: Web/JavaScript/Reference/Global_Objects/Number/NaN ---- -
{{JSRef("Global_Objects", "Number")}}
- -

Resum

- -

La propietat Number.NaN representa Not-A-Number (quelcom que no és un nombre). Equivalent a {{jsxref("Global_Objects/NaN", "NaN")}}.

- -

No és necesari crear un objecte de tipus {{jsxref("Global_Objects/Number", "Number")}} per a accedir a aquesta propietat estàtica (utilitzeu Number.NaN).

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

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.7.3.4', 'Number.NaN')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-number.nan', 'Number.NaN')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • L'objecte global {{jsxref("Global_Objects/NaN", "NaN")}}.
    • -
  • L'objecte {{jsxref("Global_Objects/Number", "Number")}} al qual pertany.
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/number/negative_infinity/index.html b/files/ca/web/javascript/referencia/objectes_globals/number/negative_infinity/index.html deleted file mode 100644 index 3fb4c1d150..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/number/negative_infinity/index.html +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: Number.NEGATIVE_INFINITY -slug: Web/JavaScript/Referencia/Objectes_globals/Number/NEGATIVE_INFINITY -translation_of: Web/JavaScript/Reference/Global_Objects/Number/NEGATIVE_INFINITY ---- -
{{JSRef("Global_Objects", "Number")}}
- -

Resum

- -

La propietat Number.NEGATIVE_INFINITY representa el valor infinit negatiu.

- -

No fa falta crear un objecte {{jsxref("Global_Objects/Number", "Number")}} per accedir a aquesta propietat estàtica (feu servir Number.NEGATIVE_INFINITY).

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

Descripció

- -

El valor de Number.NEGATIVE_INFINITY és el mateix que el valor negatiu de la propietat de l'objecte global {{jsxref("Global_Objects/Infinity", "Infinity")}}.

- -

Aquest valor es comporta de forma una mica diferent a l'infinit matemàtic:

- -
    -
  • Qualsevol valor positiu, incloent {{jsxref("Number.POSITIVE_INFINITY", "POSITIVE_INFINITY")}}, multiplicat per NEGATIVE_INFINITY és NEGATIVE_INFINITY.
    • -
  • Qualsevol calor negatiu, incloent NEGATIVE_INFINITY, multiplicat per NEGATIVE_INFINITY és {{jsxref("Number.POSITIVE_INFINITY", "POSITIVE_INFINITY")}}.
    • -
  • Zero multiplicat per NEGATIVE_INFINITY és {{jsxref("Global_Objects/NaN", "NaN")}}.
    • -
  • {{jsxref("Global_Objects/NaN", "NaN")}} multiplicat per NEGATIVE_INFINITY és {{jsxref("Global_Objects/NaN", "NaN")}}.
    • -
  • NEGATIVE_INFINITY, dividit per qualsevol valor negatiu excepte NEGATIVE_INFINITY, és {{jsxref("Number.POSITIVE_INFINITY", "POSITIVE_INFINITY")}}.
    • -
  • NEGATIVE_INFINITY, dividit per qualsevol valor positiu excepte {{jsxref("Number.POSITIVE_INFINITY", "POSITIVE_INFINITY")}}, és NEGATIVE_INFINITY.
    • -
  • NEGATIVE_INFINITY, dividit tant per NEGATIVE_INFINITY  com per {{jsxref("Number.POSITIVE_INFINITY", "POSITIVE_INFINITY")}}, és {{jsxref("Global_Objects/NaN", "NaN")}}.
    • -
  • Qualsevol nombre dividit per NEGATIVE_INFINITY és zero.
    • -
- -

Es pot fer serivir la propietat Number.NEGATIVE_INFINITY per indicar una condició d'error que retorna un nombre finit en cas d'èxit. Fixeu-vos, però, que {{jsxref("Global_Objects/isFinite", "isFinite")}} seria més apropiat en aquest cas.

- -

Exemples

- -

Exemple: Fer servir NEGATIVE_INFINITY

- -

En l'exemple següent, a la variable smallNumber se li assigna un valor que és més petit que el valor mínim. Quan la delcaració {{jsxref("Statements/if...else", "if")}} s'executa, smallNumber té el valor -Infinity, així smallNumber s'estableix com a un valor més manegable abans de prosseguir.

- -
var smallNumber = (-Number.MAX_VALUE) * 2;
-
-if (smallNumber == Number.NEGATIVE_INFINITY) {
-  smallNumber = returnFinite();
-}
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
1a edició de ECMAScript.EstàndardDefinició inicial. Implementat en JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.7.3.5', 'Number.NEGATIVE_INFINITY')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-number.negative_infinity', 'Number.NEGATIVE_INFINITY')}}{{Spec2('ES6')}}
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Number.POSITIVE_INFINITY")}}
    • -
  • {{jsxref("Number.isFinite()")}}
    • -
  • {{jsxref("Global_Objects/Infinity", "Infinity")}}
    • -
  • {{jsxref("Global_Objects/isFinite", "isFinite()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/number/parsefloat/index.html b/files/ca/web/javascript/referencia/objectes_globals/number/parsefloat/index.html deleted file mode 100644 index cd3494b7ac..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/number/parsefloat/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: Number.parseFloat() -slug: Web/JavaScript/Referencia/Objectes_globals/Number/parseFloat -translation_of: Web/JavaScript/Reference/Global_Objects/Number/parseFloat ---- -
{{JSRef}}
- -

El mètode Number.parseFloat() interpreta el string passat com a argument i retorna un nombre de punt flotant. Aquest mètode es comporta de la mateixa manera que la funció global {{jsxref("Global_Objects/parseFloat", "parseFloat()")}} i és part del ECMAScript 6 (el seu motiu d'existència és la modularització dels globals).

- -

Sintaxi

- -
Number.parseFloat(string)
- -

Paràmetres

- -
-
string
-
Un string que representa el valor a interpretar.
-
- -

Descripció

- -

Vegeu {{jsxref("Global_Objects/parseFloat", "parseFloat()")}} per a més detalls i exemples.

- -

Polyfill

- -
Number.parseFloat = parseFloat;
- -

Especificacions

- - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-number.parsefloat', 'Number.parseFloat')}}{{Spec2('ES6')}}Definició inicial.
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatGeckoDesktop("25")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("25")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

Vegeu també

- -
    -
  • L'objecte {{jsxref("Number")}} al que pertany.
    • -
  • La funció global {{jsxref("Global_Objects/parseFloat", "parseFloat()")}}.
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/number/parseint/index.html b/files/ca/web/javascript/referencia/objectes_globals/number/parseint/index.html deleted file mode 100644 index 2ef9597d11..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/number/parseint/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: Number.parseInt() -slug: Web/JavaScript/Referencia/Objectes_globals/Number/parseInt -translation_of: Web/JavaScript/Reference/Global_Objects/Number/parseInt ---- -
{{JSRef}}
- -

El mètode Number.parseInt() interpreta un argument string i retorna un nombre sencer de la base especificada.

- -

Sintaxi

- -
Number.parseInt(string[, radix])
- -

Paràmetres

- -
{{page("ca/docs/Web/JavaScript/Reference/Global_Objects/parseInt", "Parameters")}}
- -

Descripció

- -

Aquest mètode és exactament la mateixa funció que la funció global {{jsxref("Global_Objects/parseInt", "parseInt()")}}:

- -
Number.parseInt === parseInt; // true
- -

i és part de l'ECMAScript 6 (el seu propòsit és la modularització de les globals). Vegeu jsxref("Global_Objects/parseInt", "parseInt()")}} per a més detalls i exemples.

- -

Polyfill

- -
Number.parseInt = parseInt;
- -

Especificacions

- - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-number.parseint', 'Number.parseInt')}}{{Spec2('ES6')}}Definició inicial.
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatGeckoDesktop("25")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatGeckoDesktop("25")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

Vegeu també

- -
    -
  • L'objecte {{jsxref("Number")}} al que pertany.
    • -
  • La funció global {{jsxref("Global_Objects/parseInt", "parseInt()")}}.
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/number/positive_infinity/index.html b/files/ca/web/javascript/referencia/objectes_globals/number/positive_infinity/index.html deleted file mode 100644 index 234a779fd1..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/number/positive_infinity/index.html +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: Number.POSITIVE_INFINITY -slug: Web/JavaScript/Referencia/Objectes_globals/Number/POSITIVE_INFINITY -translation_of: Web/JavaScript/Reference/Global_Objects/Number/POSITIVE_INFINITY ---- -
{{JSRef}}
- -

La propietat Number.POSITIVE_INFINITY representa el valor infinit negatiu.

- -

No fa falta crear un objecte {{jsxref("Global_Objects/Number", "Number")}} per accedir a aquesta propietat estàtica (feu servir Number.POSITIVE_INFINITY).

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

Descripció

- -

El valor de Number.POSITIVE_INFINITY és el mateix que el valor negatiu de la propietat de l'objecte global {{jsxref("Infinity")}}.

- -

 

- -

Aquest valor es comporta de forma una mica diferent a l'infinit matemàtic:

- -

Qualsevol valor positiu, incloent POSITIVE_INFINITY, multiplicat per POSITIVE_INFINITY és POSITIVE_INFINITY.

- -
    -
  • Qualsevol calor negatiu, incloent NEGATIVE_INFINITY, multiplicat per POSITIVE_INFINITY és {{jsxref("Number.NEGATIVE_INFINITY", "POSITIVE_INFINITY")}}.
    • -
  • Zero multiplicat per POSITIVE_INFINITY és {{jsxref("NaN")}}.
    • -
  • {{jsxref("Global_Objects/NaN", "NaN")}} multiplicat perPOSITIVE_INFINITY és {{jsxref("NaN")}}.
    • -
  • POSITIVE_INFINITY, dividit per quaulsevol valor negatiu execepte {{jsxref("Number.NEGATIVE_INFINITY", "NEGATIVE_INFINITY")}}, és {{jsxref("Number.NEGATIVE_INFINITY", "NEGATIVE_INFINITY")}}.
    • -
  • POSITIVE_INFINITY, dividit per un valor positiu a excepció de POSITIVE_INFINITY, és POSITIVE_INFINITY.
    • -
  • POSITIVE_INFINITY, dividit per {{jsxref("Number.NEGATIVE_INFINITY", "NEGATIVE_INFINITY")}} o bé per POSITIVE_INFINITY, és {{jsxref("NaN")}}.
    • -
  • Quasevol nombre dividit per POSITIVE_INFINITY és Zero.
    • -
- -

Es pot fer serivir la propietat Number.POSITIVE_INFINITY per indicar una condició d'error que retorna un nombre finit en cas d'èxit. Fixeu-vos, però, que {{jsxref("isFinite")}} seria més apropiat en aquest cas.

- -

Exemples

- -

Utilitzar POSITIVE_INFINITY

- -

In the following example, the variable bigNumber is assigned a value that is larger than the maximum value. When the {{jsxref("Statements/if...else", "if")}} statement executes, bigNumber has the value Infinity, so bigNumber is set to a more manageable value before continuing.

- -

A l'exemple següent, a la variable nombrePetit se li assigna un valor que és més gran que el valor màxim. Quan la declaració {{jsxref("Statements/if...else", "if")}} s'executa, nombrePetit té el valor Infinity, així nombrePetit s'estableix com a un valor més manegable abans de prosseguir.

- -
var nombrePetit = Number.MAX_VALUE * 2;
-
-if (nombrePetit == Number.POSITIVE_INFINITY) {
-  nombrePetit= returnFinite();
-}
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.7.3.6', 'Number.POSITIVE_INFINITY')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-number.positive_infinity', 'Number.POSITIVE_INFINITY')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Number.NEGATIVE_INFINITY")}}
    • -
  • {{jsxref("Number.isFinite()")}}
    • -
  • {{jsxref("Infinity")}}
    • -
  • {{jsxref("Global_Objects/isFinite", "isFinite()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/number/prototype/index.html b/files/ca/web/javascript/referencia/objectes_globals/number/prototype/index.html deleted file mode 100644 index ae733e56ec..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/number/prototype/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: Number.prototype -slug: Web/JavaScript/Referencia/Objectes_globals/Number/prototype -translation_of: Web/JavaScript/Reference/Global_Objects/Number -translation_of_original: Web/JavaScript/Reference/Global_Objects/Number/prototype ---- -
{{JSRef}}
- -

La propietat Number.prototype representa el prototipus per al constructor {{jsxref("Number")}}.

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

Descripció

- -

Totes les instàncies de {{jsxref("Number")}} hereten de Number.prototype. L'objecte prototipus del constructor de {{jsxref("Number")}} pot ser modificat per a afectar totes les instàncies de {{jsxref( "Number")}}.

- -

Propietats

- -
-
Number.prototype.constructor
-
Retorna la funció que ha creat la instància d'aquest objecte. Per defecte aquesta és l'objecte {{jsxref("Number")}}.
-
- -

Mètodes

- -
-
{{jsxref("Number.prototype.toExponential()")}}
-
Retorna un string que representa el nombre en notació exponencial.
-
{{jsxref("Number.prototype.toFixed()")}}
-
Retorna un string que representa el nombre en notació de punt fixe.
-
{{jsxref("Number.prototype.toLocaleString()")}}
-
Retorna un string amb una representació d'aquest nombbre sensible a la llengua. Sobreescriu el mètode {{jsxref("Object.prototype.toLocaleString()")}}.
-
{{jsxref("Number.prototype.toPrecision()")}}
-
Retorna un string amb una representació de precisió de punt fixe o notació exponencial del nombre.
-
{{jsxref("Number.prototype.toSource()")}} {{non-standard_inline}}
-
Retorna un objecte literal que representa l'objecte {{jsxref("Number")}} especificat; aquest valor pot ser emprat per a crear un nou objecte. Sobreescriu el mètode {{jsxref("Object.prototype.toSource()")}}.
-
{{jsxref("Number.prototype.toString()")}}
-
Retorna un string que representa l'objecte especificat en el radi (base) especificat. Sobreescriu el mètode {{jsxref("Object.prototype.toString()")}}.
-
{{jsxref("Number.prototype.valueOf()")}}
-
Retorna el valor primitiu de l'objecte especificat. Sobreescriu el mètode {{jsxref("Object.prototype.valueOf()")}}.
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a 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')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Number")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/number/toexponential/index.html b/files/ca/web/javascript/referencia/objectes_globals/number/toexponential/index.html deleted file mode 100644 index 69ca3478ac..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/number/toexponential/index.html +++ /dev/null @@ -1,136 +0,0 @@ ---- -title: Number.prototype.toExponential() -slug: Web/JavaScript/Referencia/Objectes_globals/Number/toExponential -translation_of: Web/JavaScript/Reference/Global_Objects/Number/toExponential ---- -
{{JSRef}}
- -

El mètode toExponential() retorna un string que representa l'objecte de tipus Number en notació exponencial.

- -

Sintaxi

- -
numObj.toExponential([dígitsDecimals])
- -

Paràmetres

- -
-
dígitsDecimals
-
Opcional. Un nombre sencer que indica el nombre de dígits decimals que s'utilitzaran. Si no s'especifica s'utilitzaran per defecte tants dígits decimals com facin falta per a acomodar el nombre.
-
- -

Valor retornat

- -

Un string que representa l'objecte {{jsxref("Number")}} en notació exponencial amb un dígit a l'esquerra del punt decimal, i arrodonit a dígitsDecimals després del punt decimal. Si s'omet el paràmetre fractionDigits s'utilitzaran tants dígits decimals com facin falta per a acomodar el nombre.

- -

Si s'utilitza el mètode toExponential() en un literal numèric i el literal numèric no té exponent ni punt decimal, deixeu un espai abans del punt que precedeix a la crida del mètode per a evitar que el punt s'interpreti com a punt decimal.

- -

Si un nombre té més dígits dels que s'especifiquen al paràmetre dígitsDecimals el nombre s'arrodoneix al nombre més proper representable pel nombre de dígits dígitsDecimals. Vegeu la discussió sobre arrodoniment a la descripció del mètode {{jsxref("Number.prototype.toFixed", "toFixed()")}}, que també s'aplica al mètode toExponential().

- -

Excepcions llençades

- -
-
{{jsxref("RangeError")}}
-
Si el valor de dígitsDecimals és massa petit o massa gran. Els valors acceptats estan entre 0 i 20, ambdos inclusius, i no llençaran per tant l'excepció RangeError. Les implementacions poden opcionalment donar suport per a valors més grans.
-
{{jsxref("TypeError")}}
-
Si es crida aquest mètode i se li passa un paràmetre que no és de tipus Number.
-
- -

Exemples

- -

Utilitzar toExponential

- -
var numObj = 77.1234;
-
-console.log(numObj.toExponential());  // escriu 7.71234e+1
-console.log(numObj.toExponential(4)); // escriu 7.7123e+1
-console.log(numObj.toExponential(2)); // escriu 7.71e+1
-console.log(77.1234.toExponential()); // escriu 7.71234e+1
-console.log(77 .toExponential());     // escriu 7.7e+1
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES3')}}{{Spec2('ES3')}}Definició inicial. Implementat a 1.5.
{{SpecName('ES5.1', '#sec-15.7.4.6', 'Number.prototype.toExponential')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-number.prototype.toexponential', 'Number.prototype.toExponential')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Number.prototype.toFixed()")}}
    • -
  • {{jsxref("Number.prototype.toPrecision()")}}
    • -
  • {{jsxref("Number.prototype.toString()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/number/tofixed/index.html b/files/ca/web/javascript/referencia/objectes_globals/number/tofixed/index.html deleted file mode 100644 index 8df53aafe3..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/number/tofixed/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: Number.prototype.toFixed() -slug: Web/JavaScript/Referencia/Objectes_globals/Number/toFixed -translation_of: Web/JavaScript/Reference/Global_Objects/Number/toFixed ---- -
{{JSRef}}
- -

El mètode toFixed() formateja un nombre utilitzant notació de coma fixa.

- -

Sintaxi

- -
numObj.toFixed([dígits])
- -

Paràmetres

- -
-
dígits
-
Opcional. El nombre de dígits a utilitzar després del punt decimal; aquest paràmetre pot rebre valors entre 0 i 20, ambdós inclusius, i les implementacions poden opcionalment donar suport per a valors més grans. Si s'omet aquest argument s'utilitza un valor de 0 per defecte.
-
- -

Valor retornat

- -

Una representació de numObj en forma de string que no utilitza notació exponencial i té exactament dígits digits després del punt decimal. El nombre s'arrodoneix en cas que sigui necesari, així com la part fraccionaria s'omple amb zeros en cas necesari. Si numObj és major que 1e+21, aquest mètode retornarà un string en notació exponencial, proporcionat pel mètode {{jsxref("Number.prototype.toString()")}}.

- -

Excepcions llençades

- -
-
{{jsxref("RangeError")}}
-
Si el valor de dígits és massa petit o massa gran. Els valors acceptats estan entre 0 i 20, ambdos inclusius, i no llençaran per tant l'excepció {{jsxref("RangeError")}}. Les implementacions poden opcionalment donar suport per a valors més grans.
-
{{jsxref("TypeError")}}
-
Si es crida aquest mètode i se li passa un paràmetre que no és de tipus {{jsxref( "Number")}}.
-
- -

Exemples

- -

Utilitzar toFixed

- -
var numObj = 12345.6789;
-
-numObj.toFixed();       // Retorna '12346': recalquem l'arrodoniment, no hi ha part decimal
-numObj.toFixed(1);      // Retorna '12345.7': recalquem l'arrodoniment
-numObj.toFixed(6);      // Retorna '12345.678900': recalquem els zeros afegits
-(1.23e+20).toFixed(2);  // Retorna '123000000000000000000.00'
-(1.23e-10).toFixed(2);  // Retorna '0.00'
-2.34.toFixed(1);        // Retorna '2.3'
--2.34.toFixed(1);       // Retorna -2.3 (degut a la precedència d'operadors, nombres literals negatius no retornen un string...)
-(-2.34).toFixed(1);     // Retorna'-2.3' (...a no ser que s'utilitzin parèntesi)
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES3')}}{{Spec2('ES3')}}Definició inicial. Implementat a JavaScript 1.5.
{{SpecName('ES5.1', '#sec-15.7.4.5', 'Number.prototype.toFixed')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-number.prototype.tofixed', 'Number.prototype.toFixed')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Number.prototype.toExponential()")}}
    • -
  • {{jsxref("Number.prototype.toPrecision()")}}
    • -
  • {{jsxref("Number.prototype.toString()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/number/toprecision/index.html b/files/ca/web/javascript/referencia/objectes_globals/number/toprecision/index.html deleted file mode 100644 index 0af5875e7f..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/number/toprecision/index.html +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: Number.prototype.toPrecision() -slug: Web/JavaScript/Referencia/Objectes_globals/Number/toPrecision -translation_of: Web/JavaScript/Reference/Global_Objects/Number/toPrecision ---- -
{{JSRef}}
- -

El mètode toPrecision() retorna un string que representa l'objecte {{jsxref("Number")}} amb la precisió especificada.

- -

Sintaxi

- -
numObj.toPrecision([precisió])
- -

Paràmetres

- -
-
precisió
-
Opional. Un nombre sencer que indica el nombre de dígits significatius.
-
- -

Valor retornat

- -

Un string que representa un objecte {{jsxref("Number")}} en notació de punt fix o bé en notació exponencial, arrodonit a precisió dígits significatius. Vegeu la discussió sobre arrodoniment a la descripció del mètode {{jsxref("Number.prototype.toFixed()")}}, que també s'aplica a toPrecision().

- -

Si s'omet l'argument precisió, es comporta com  {{jsxref("Number.prototype.toString()")}}. Si l'argument precisió no és un nombre sencer, aquest s'arrodoneix al nombre sencer més proper.

- -

Excepcions llençades

- -
-
{{jsxref("Global_Objects/RangeError", "RangeError")}}
-
Si el valor de precisió no està entre 1 i 100 (ambdós inclusius), es llença un RangeError. Les implementacions poden opcionalment donar suport per a valors més grans o petits. ECMA-262 tan sols requereix una precisió de fins a 21 dígits significatius.
-
- -

Exemples

- -

Utilitzar toPrecision

- -
var numObj = 5.123456;
-
-console.log(numObj.toPrecision());    // escriu 5.123456
-console.log(numObj.toPrecision(5));   // escriu 5.1235
-console.log(numObj.toPrecision(2));   // escriu 5.1
-console.log(numObj.toPrecision(1));   // escriu 5
-
-// fixeu-vos que la notació exponencial pot retornar-se en algunes circumstàncies
-console.log((1234.5).toPrecision(2)); // escriu 1.2e+3
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES3')}}{{Spec2('ES3')}}Definició inicial. Implementat a 1.5.
{{SpecName('ES5.1', '#sec-15.7.4.7', 'Number.prototype.toPrecision')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-number.prototype.toprecision', 'Number.prototype.toPrecision')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Number.prototype.toFixed()")}}
    • -
  • {{jsxref("Number.prototype.toExponential()")}}
    • -
  • {{jsxref("Number.prototype.toString()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/number/tostring/index.html b/files/ca/web/javascript/referencia/objectes_globals/number/tostring/index.html deleted file mode 100644 index 7381fc97ac..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/number/tostring/index.html +++ /dev/null @@ -1,141 +0,0 @@ ---- -title: Number.prototype.toString() -slug: Web/JavaScript/Referencia/Objectes_globals/Number/toString -translation_of: Web/JavaScript/Reference/Global_Objects/Number/toString ---- -
{{JSRef}}
- -

El mètode toString() retorna un string que representa l'objecte {{jsxref("Number")}} especificat.

- -

Sintaxi

- -
objecteNum.toString([base])
- -

Paràmetres

- -
-
base
-
Opcional. Un nombre sencer entre 2 i 36 que indica la base a utilitzar a l'hora de representar valors numèrics.
-
- -

Errors llençats

- -
-
{{jsxref("RangeError")}}
-
Si toString() rep una base que no estigui entre 2 i 36, es llença un {{jsxref("RangeError")}}.
-
- -

Descripció

- -

L'objecte {{jsxref("Number")}} sobreescriu el mètode toString() de l'objecte {{jsxref("Object")}}; no hereta {{jsxref("Object.prototype.toString()")}}. Per a objectes {{jsxref( "Number")}}, el mètode toString() retorna una representació en forma de string de l'objecte, utilitzant la base especificada.

- -

El mètode toString() interpreta el primer argument donat, i intenta retornar una representació en forma de string tot utilitzant la base proporcionada. Per a bases majors que 10, les lletres del alfabet indiquen numerals majors que 9. Per exemple, per a nombres hexadecimals (en base 16), s'utilitzen les lletres de la a a la f.

- -

Si no s'especifica la base, s'utilitza 10 com a base.

- -

Si objecteNum és negatiu, es conserva el signe. Això s'aplica fins i tot si la base és 2; el string retornat és la representació binària positiva de objecteNum precedida per un signe -, no s'utilitza el complement a dos de objecteNum.

- -

Exemples

- -

Utilitzar toString

- -
var count = 10;
-
-console.log(count.toString());    // mostra '10'
-console.log((17).toString());     // mostra '17'
-
-var x = 6;
-
-console.log(x.toString(2));       // mostra '110'
-console.log((254).toString(16));  // mostra 'fe'
-
-console.log((-10).toString(2));   // mostra '-1010'
-console.log((-0xff).toString(2)); // mostra '-11111111'
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.7.4.2', 'Number.prototype.tostring')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-number.prototype.tostring', 'Number.prototype.tostring')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Number.prototype.toFixed()")}}
    • -
  • {{jsxref("Number.prototype.toExponential()")}}
    • -
  • {{jsxref("Number.prototype.toPrecision()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/parsefloat/index.html b/files/ca/web/javascript/referencia/objectes_globals/parsefloat/index.html deleted file mode 100644 index 570fa6b63f..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/parsefloat/index.html +++ /dev/null @@ -1,166 +0,0 @@ ---- -title: parseFloat() -slug: Web/JavaScript/Referencia/Objectes_globals/parseFloat -translation_of: Web/JavaScript/Reference/Global_Objects/parseFloat ---- -
-
-
{{jsSidebar("Objects")}}
-
-
- -

La funció parseFloat() interpreta un argument de tipus cadena i retorna un nombre decimal amb coma flotant

- -

Sintaxi

- -
parseFloat(cadena)
- -

Paràmetres

- -
-
cadena
-
Una cadena que representa el valor que es vol interpretar.
-
- -

Descripció

- -

parseFloat és una funció de nivell superior que no està associada a cap objecte.

- -

parseFloat interpreta el seu argument, una cadena, i retorna un nombre decimal amb coma flotant. Si es topa amb un caràcter que no sigui un signe (+ o -), un numeral (0-9), un punt decimal, o un exponent, retorna el valor fins a aquell punt i ignora aquell caràcter i la resta de caràcters que el succeeixen. Es permeten espais inicials i finals.

- -

Si el primer caràcter no es pot convertir en un nombre, parseFloat retorna NaN.

- -

Per propòstis aritmètics, el valor de NaN no és un nombre en qualsevol radix. Es pot cridar la funció {{jsxref("isNaN")}} per determinar si el resultat del parseFloat és NaN. Si es passa NaN en operacions aritmètiques, el resultat de l'operació també serà NaN.

- -

parseFloat també pot interpretar i retornar el valor Infinity. Es pot utilitzar la funció {{jsxref("isFinite")}} per determinar si el resultat és un nombre finit i (no Infinity, -Infinity, o NaN).

- -

Exemples

- -

parseFloat retorna un nombre

- -

Tots els exemples següents retornen 3.14

- -
parseFloat("3.14");
-parseFloat("314e-2");
-parseFloat("0.0314E+2");
-parseFloat("3.14more non-digit characters");
-
- -

parseFloat retorna NaN

- -

L'exemple següent retorna NaN

- -
parseFloat("FF2");
-
- -

Una interpretació més estricta

- -

Sovint és útil tenir una forma més estricta d'interpretar els valors flotants, expressions regulars poden ajudar:

- -
var filterFloat = function (value) {
-    if(/^(\-|\+)?([0-9]+(\.[0-9]+)?|Infinity)$/
-      .test(value))
-      return Number(value);
-  return NaN;
-}
-
-console.log(filterFloat('421'));               // 421
-console.log(filterFloat('-421'));              // -421
-console.log(filterFloat('+421'));              // 421
-console.log(filterFloat('Infinity'));          // Infinity
-console.log(filterFloat('1.61803398875'));     // 1.61803398875
-console.log(filterFloat('421e+0'));            // NaN
-console.log(filterFloat('421hop'));            // NaN
-console.log(filterFloat('hop1.61803398875'));  // NaN
-
-
- -

Vegeu que aquest codi és només a mode d'exemple, no accepta nombres vàlids com 1. o .5.

- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial.
{{SpecName('ES5.1', '#sec-15.1.2.3', 'parseFloat')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-parsefloat-string', 'parseFloat')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Global_Objects/parseInt", "parseInt()")}}
    • -
  • {{jsxref("Number.parseFloat()")}}
    • -
  • {{jsxref("Number.parseInt()")}}
    • -
  • {{jsxref("Global_Objects/isNaN", "isNaN()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/set/add/index.html b/files/ca/web/javascript/referencia/objectes_globals/set/add/index.html deleted file mode 100644 index b93eaa3efb..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/set/add/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: Set.prototype.add() -slug: Web/JavaScript/Referencia/Objectes_globals/Set/add -translation_of: Web/JavaScript/Reference/Global_Objects/Set/add ---- -
{{JSRef}}
- -

El mètode add() afegeix un nou element al final de l'objecte Set amb el valor especificat pel paràmetre.

- -

Sintax

- -
mySet.add(valor);
- -

Paràmetres

- -
-
valor
-
Obligatori. El valor de l'element que s'afegirà a l'objecte Set.
-
- -

Valor retornat

- -

L'objecte Set.

- -

Exemples

- -

Utilitzar el mètode add

- -
var mySet = new Set();
-
-mySet.add(1);
-mySet.add(5).add("some text"); // crida en cadena
-
-console.log(mySet);
-// Set [1, 5, "some text"]
-
- -

Especificacions

- - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-set.prototype.add', 'Set.prototype.add')}}{{Spec2('ES6')}}Definició inicial.
- -

Compatibilitat amb navegadors

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic38{{CompatGeckoDesktop("13.0")}}11257.1
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}38{{CompatGeckoMobile("13.0")}}{{CompatNo}}{{CompatNo}}8
-
- -

Notes específiques per al Firefox

- -
    -
  • En les versions anteriors al Firefox 33 {{geckoRelease("33")}}, Set.prototype.add retornava undefined i per tant no es podien realitzar crides encadenades. Aquest problem ha estat resolt ({{bug(1031632)}}). Aquest comportament també es pot trovar al Chrome/v8 (problema).
    • -
- -

Vegeu també

- -
    -
  • {{jsxref("Set")}}
    • -
  • {{jsxref("Set.prototype.delete()")}}
    • -
  • {{jsxref("Set.prototype.has()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/set/clear/index.html b/files/ca/web/javascript/referencia/objectes_globals/set/clear/index.html deleted file mode 100644 index 6ef179daaa..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/set/clear/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: Set.prototype.clear() -slug: Web/JavaScript/Referencia/Objectes_globals/Set/clear -translation_of: Web/JavaScript/Reference/Global_Objects/Set/clear ---- -
{{JSRef}}
- -

El mètode clear() esborra tots els elements emmagatzemats dins l'objecte Set.

- -

Sintaxi

- -
mySet.clear();
- -

Exemples

- -

Utilitzar el mètode clear

- -
var mySet = new Set();
-mySet.add(1);
-mySet.add("foo");
-
-mySet.size;       // 2
-mySet.has("foo"); // true
-
-mySet.clear();
-
-mySet.size;       // 0
-mySet.has("bar")  // false
-
- -

Especificacions

- - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-set.prototype.clear', 'Set.prototype.clear')}}{{Spec2('ES6')}}Definició inicial.
- -

Compatibilitat amb navegadors

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic38{{CompatGeckoDesktop("19.0")}}11257.1
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}25{{CompatGeckoMobile("19.0")}}{{CompatNo}}{{CompatNo}}8
-
- -

Vegeu també

- -
    -
  • {{jsxref("Set")}}
    • -
  • {{jsxref("Set.prototype.delete()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/set/delete/index.html b/files/ca/web/javascript/referencia/objectes_globals/set/delete/index.html deleted file mode 100644 index ea66c1a723..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/set/delete/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: Set.prototype.delete() -slug: Web/JavaScript/Referencia/Objectes_globals/Set/delete -translation_of: Web/JavaScript/Reference/Global_Objects/Set/delete ---- -
{{JSRef}}
- -

El mètode delete() esborra l'element especificat emmagatzemat dins l'objecte Set.

- -

Sintaxi

- -
mySet.delete(valor);
- -

Paràmetres

- -
-
valor
-
Obligatori. El valor de l'element a eliminar.
-
- -

Valor retornat

- -

Retorna true si s'ha pogut eliminar l'element de l'objecte Set; en cas contrari retorna false.

- -

Exemples

- -

Utilitzar el mètode delete

- -
var mySet = new Set();
-mySet.add("foo");
-
-mySet.delete("bar"); // Retorna false. No s'ha trobat l'element "bar".
-mySet.delete("foo"); // Retorna true.  S'ha pogut esborrar l'element "foo".
-
-mySet.has("foo");    // Retorna false. L'element "foo" ja no existeix dins el Set.
-
- -

Especificacions

- - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-set.prototype.delete', 'Set.prototype.delete')}}{{Spec2('ES6')}}Definició inicial.
- -

Compatibilitat amb navegadors

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic38{{CompatGeckoDesktop("13.0")}}11257.1
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}38{{CompatGeckoMobile("13.0")}}{{CompatNo}}{{CompatNo}}8
-
- -

Vegeu també

- -
    -
  • {{jsxref("Set")}}
    • -
  • {{jsxref("Set.prototype.clear()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/set/entries/index.html b/files/ca/web/javascript/referencia/objectes_globals/set/entries/index.html deleted file mode 100644 index 848e53ba8d..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/set/entries/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: Set.prototype.entries() -slug: Web/JavaScript/Referencia/Objectes_globals/Set/entries -translation_of: Web/JavaScript/Reference/Global_Objects/Set/entries ---- -
{{JSRef}}
- -

El mètode entries() retorna un nou objecte Iterator que conté un array de [valor, valor] per a cada element emmagatzemat dins l'objecte Set, ordenats per ordre d'inserció. Els elements de l'objecte Set no disposen de claus, a diferència dels objectes Map. Tot i així, per a oferir una API similar a la de l'objecte Map cada entrada té el mateix valor tant com per a la clau com per al valor. És per això que es retorna un array [valor, valor].

- -

Sintaxi

- -
mySet.entries()
- -

Examples

- -

Using entries()

- -
var mySet = new Set();
-mySet.add("foobar");
-mySet.add(1);
-mySet.add("baz");
-
-var setIter = mySet.entries();
-
-console.log(setIter.next().value); // ["foobar", "foobar"]
-console.log(setIter.next().value); // [1, 1]
-console.log(setIter.next().value); // ["baz", "baz"]
-
- -

Especificacions

- - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-set.prototype.entries', 'Set.prototype.entries')}}{{Spec2('ES6')}}Definició inicial.
- -

Compatibilitat amb navegadors

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic38{{ CompatGeckoDesktop("24") }}{{CompatNo}}257.1
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}38{{ CompatGeckoMobile("24") }}{{CompatNo}}{{CompatNo}}8
-
- -

Vegeu també

- -
    -
  • {{jsxref("Set.prototype.keys()")}}
    • -
  • {{jsxref("Set.prototype.values()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/set/has/index.html b/files/ca/web/javascript/referencia/objectes_globals/set/has/index.html deleted file mode 100644 index ca9027b8a4..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/set/has/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: Set.prototype.has() -slug: Web/JavaScript/Referencia/Objectes_globals/Set/has -translation_of: Web/JavaScript/Reference/Global_Objects/Set/has ---- -
{{JSRef}}
- -

El mètode has() retorna un booleà que indica si l'element amb el valor especificat existeix o no dins l'objecte Set.

- -

Sintaxi

- -
mySet.has(valor);
- -

Paràmetres

- -
-
valor
-
Obligatori. El valor a comprovar si pertany o no a l'objecte Set.
-
- -

Valor retornat

- -
-
Booleà
-
Retorna true si existex un element amb el valor especificat dins l'objecte Set; en cas contrari retorna false.
-
- -

Exemples

- -

Utilitzar el mètode has

- -
var mySet = new Set();
-mySet.add("foo");
-
-mySet.has("foo");  // retorna true
-mySet.has("bar");  // retorna false
-
- -

Especificacions

- - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-set.prototype.has', 'Set.prototype.has')}}{{Spec2('ES6')}}Definició inicial.
- -

Compatibilitat amb navegadors

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic38{{CompatGeckoDesktop("13.0")}}11257.1
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}38{{CompatGeckoMobile("13.0")}}{{CompatNo}}{{CompatNo}}8
-
- -

Vegeu també

- -
    -
  • {{jsxref("Set")}}
    • -
  • {{jsxref("Set.prototype.add()")}}
    • -
  • {{jsxref("Set.prototype.delete()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/set/index.html b/files/ca/web/javascript/referencia/objectes_globals/set/index.html deleted file mode 100644 index 993d296324..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/set/index.html +++ /dev/null @@ -1,380 +0,0 @@ ---- -title: Set -slug: Web/JavaScript/Referencia/Objectes_globals/Set -translation_of: Web/JavaScript/Reference/Global_Objects/Set ---- -
{{JSRef}}
- -

L'objecte Set permet emmagatzemar valors únics de qualsevol tipus, ja siguin {{Glossary("Primitive", "valors primitius")}} o bé referències a objectes.

- -

Sintaxi

- -
new Set([iterable]);
- -

Paràmetres

- -
-
iterable
-
Si rep un objecte iterable, tots els seus elements seran afegits al nou Set. null serà tractat com a undefined.
-
- -

Descripció

- -

Els objectes Set són coleccions de valors, els seus elements poden ser iterats en ordre d'inserció. Un valor només pot aparèixer un cop dins el Set; és únic dins la col·lecció del Set.

- -

Igualtat de valors

- -

Degut a que cada valor dins el Set ha de ser únic, la igualtat dels valors serà comprovada i aquesta no es basa en el mateix algoritme que l'emprat per l'operador ===. Concreatement, per a Sets, +0 (que és estrictament igual a -0) i -0 són valors diferents. Tot i així, aquest comportament s'ha canviat a la última especificació de l'ECMAScript 6. A partir de Gecko 29.0 {{geckoRelease("29")}} ({{bug("952870")}}) i una recent versió nightly del Chrome, +0 i -0 són tractats com al mateix valor en objectes Set. Així mateix, NaN i undefined també poden ser emmagatzemats dins un Set. NaN és considerat igual a NaN (tot i que NaN !== NaN).

- -

Propietats

- -
-
Set.length
-
El valor de la propietat length és 0.
-
{{jsxref("Set.@@species", "get Set[@@species]")}}
-
La funció constructora que s'ha utilitzat per a crear objectes derivats.
-
{{jsxref("Set.prototype")}}
-
Representa el prototipus per al constructor Set. Permet afegir propietats a tots els objectes Set.
-
- -

Instàncies de Set

- -

Totes les instàncies de Set hereten de {{jsxref("Set.prototype")}}.

- -

Propietats

- -

{{page('ca/Web/JavaScript/Reference/Global_Objects/Set/prototype','Propietats')}}

- -

Mètodes

- -

{{page('ca/Web/JavaScript/Reference/Global_Objects/Set/prototype','Mètodes')}}

- -

Exemples

- -

Utilitzar l'objecte Set

- -
var mySet = new Set();
-
-mySet.add(1);
-mySet.add(5);
-mySet.add("algun text");
-
-mySet.has(1); // true
-mySet.has(3); // false, 3 no ha estat afegit al set
-mySet.has(5);              // true
-mySet.has(Math.sqrt(25));  // true
-mySet.has("Some Text".toLowerCase()); // true
-
-mySet.size; // 3
-
-mySet.delete(5); // esborra 5 del set
-mySet.has(5);    // false, 5 ha sigut esborrat
-
-mySet.size; // 2, acabem d'esborrar un valor
-
- -

Iterarar Sets

- -
// iterar els elements d'un set
-// imprimeix els elements en l'ordre: 1, "algun text"
-for (let item of mySet) console.log(item);
-
-// imprimeix els elements en l'ordre: 1, "algun text"
-for (let item of mySet.keys()) console.log(item);
-
-// imprimeix els elements en l'ordre: 1, "algun text"
-for (let item of mySet.values()) console.log(item);
-
-// imprimeix els elements en l'ordre: 1, "algun text"
-//(key i value són iguals en aquest exemple)
-for (let [key, value] of mySet.entries()) console.log(key);
-
-// converteix el set en un Array (mitjançant Array comprehensions)
-var myArr = [v for (v of mySet)]; // [1, "algun text"]
-// Alternativa (mitjançant Array.from)
-var myArr = Array.from(mySet); // [1, "algun text"]
-
-// el codi següent també funcionarà si s'executa dins un document HTML
-mySet.add(document.body);
-mySet.has(document.querySelector("body")); // true
-
-// conversió entre Set i Array
-mySet2 = new Set([1,2,3,4]);
-mySet2.size; // 4
-[...mySet2]; // [1,2,3,4]
-
-// la intersecció es pot simular via
-var intersection = new Set([x for (x of set1) if (set2.has(x))]);
-
-// Iteració de les entrades del set mitjançant un forEach
-mySet.forEach(function(value) {
-  console.log(value);
-});
-
-// 1
-// 2
-// 3
-// 4
- -

Relació amb objectes Array

- -
var myArray = ["valor1", "valor2", "valor3"];
-
-// Utilitzem el constructor normal del Set per a transformar un Array en un Set
-var mySet = new Set(myArray);
-
-mySet.has("valor1"); // retorna true
-
-// Utilitzem l'operador spread per a transformar un Set en un Array.
-console.log(uneval([...mySet])); // Mostrarà exactament el mateix Array que myArray
- -

Especificacions

- - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-set-objects', 'Set')}}{{Spec2('ES6')}}Definició inicial.
- -

Compatibilitat amb navegadors

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic -

{{ CompatChrome(38) }} [1]

- 		{{ CompatGeckoDesktop("13") }}{{ CompatIE("11") }}257.1
Argument al constructor: new Set(iterable){{ CompatChrome(38) }}{{ CompatGeckoDesktop("13") }}{{CompatNo}}25{{CompatNo}}
iterable{{ CompatChrome(38) }}{{ CompatGeckoDesktop("17") }}{{CompatNo}}257.1
Set.clear(){{ CompatChrome(38) }}{{CompatGeckoDesktop("19")}}{{ CompatIE("11") }}257.1
Set.keys(), Set.values(), Set.entries(){{ CompatChrome(38) }}{{CompatGeckoDesktop("24")}}{{CompatNo}}257.1
Set.forEach(){{ CompatChrome(38) }}{{CompatGeckoDesktop("25")}}{{ CompatIE("11") }}257.1
Igualtat de valors per a -0 i 0{{ CompatChrome(38) }}{{CompatGeckoDesktop("29")}}{{CompatNo}}25{{CompatNo}}
Argument del constructor: new Set(null){{CompatVersionUnknown}}{{CompatGeckoDesktop("37")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Monkey-patched add() al Constructor{{CompatVersionUnknown}}{{CompatGeckoDesktop("37")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Set[@@species]{{CompatUnknown}}{{CompatGeckoDesktop("41")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Set() sense new llença excepció{{CompatUnknown}}{{CompatGeckoDesktop("42")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatChrome(38)}} [1]{{ CompatGeckoMobile("13") }}{{CompatNo}}{{CompatNo}}8
Argument al constructor: new Set(iterable){{CompatNo}}{{CompatChrome(38)}}{{ CompatGeckoMobile("13") }}{{CompatNo}}{{CompatNo}}{{CompatNo}}
iterable{{CompatNo}}{{CompatNo}}{{ CompatGeckoMobile("17") }}{{CompatNo}}{{CompatNo}}8
Set.clear(){{CompatNo}}{{ CompatChrome(38) }}{{CompatGeckoMobile("19")}}{{CompatNo}}{{CompatNo}}8
Set.keys(), Set.values(), Set.entries(){{CompatNo}}{{ CompatChrome(38) }}{{CompatGeckoMobile("24")}}{{CompatNo}}{{CompatNo}}8
Set.forEach(){{CompatNo}}{{ CompatChrome(38) }}{{CompatGeckoMobile("25")}}{{CompatNo}}{{CompatNo}}8
Igualtat de valors per a -0 i 0{{CompatNo}}{{ CompatChrome(38) }}{{CompatGeckoMobile("29")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Argument del constructor: new Set(null){{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("37")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Monkey-patched add() al Constructor{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("37")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Set[@@species]{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("41")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Set() sense new llença excepció{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("42")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

[1] La característica estava disponible sota una preferència a partir de Chorem 31. Al chrome://flags, activeu l'entrada “Activa JavaScript Experimental”.

- -

Vegeu també

- -
    -
  • {{jsxref("Map")}}
    • -
  • {{jsxref("WeakMap")}}
    • -
  • {{jsxref("WeakSet")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/set/prototype/index.html b/files/ca/web/javascript/referencia/objectes_globals/set/prototype/index.html deleted file mode 100644 index 9d6f6e90ee..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/set/prototype/index.html +++ /dev/null @@ -1,124 +0,0 @@ ---- -title: Set.prototype -slug: Web/JavaScript/Referencia/Objectes_globals/Set/prototype -translation_of: Web/JavaScript/Reference/Global_Objects/Set -translation_of_original: Web/JavaScript/Reference/Global_Objects/Set/prototype ---- -
{{JSRef}}
- -

La propietat Set.prototype representa el prototipus per al constructor de {{jsxref("Set")}}.

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

Descripció

- -

Les instàncies de {{jsxref("Set")}} hereten de {{jsxref("Set.prototype")}}. Es pot utilitzar el l'objecte prototipus del constructor per a afegir propietats o mètodes a totes les instàncies de Set.

- -

Propietats

- -
-
Set.prototype.constructor
-
Retorna la funció que ha creat la instància del prototipus. Per defecte es tracta de la funció {{jsxref("Set")}}.
-
{{jsxref("Set.prototype.size")}}
-
Retorna el nombre de valors emmagatzemats dins l'objecte Set.
-
- -

Mètodes

- -
-
{{jsxref("Set.add", "Set.prototype.add(valor)")}}
-
Afegeix un nou element a l'objecte Set amb el valor donat. Retorna l'objecte Set.
-
{{jsxref("Set.prototype.clear()")}}
-
Elimina tots els elements de l'objecte Set.
-
{{jsxref("Set.delete", "Set.prototype.delete(valor)")}}
-
Elimina l'element associat a valor i retorna el que el mètode Set.prototype.has(valor) hagués retornat prèviament a aquesta crida. Després d'aquesta crida Set.prototype.has(valor) retornarà false.
-
{{jsxref("Set.prototype.entries()")}}
-
Retorna un nou objecte Iterator que conté un array de la forma [valor, valor] per a cada element dins l'objecte Set, en ordre d'inserció. El array retornat manté similitud amb el comportament de l'objecte Map, de forma que cada entrada té el mateix valor per a la seva clau i valor.
-
{{jsxref("Set.forEach", "Set.prototype.forEach(callbackFn[, thisArg])")}}
-
Crida callbackFn per a cada valor present a l'objecte Set, recorreguts per ordre d'inserció. Si es proporciona el paràmetre thisArg, aquest s'utilitzarà com a valor de this per a cada crida a callbackFn.
-
{{jsxref("Set.has", "Set.prototype.has(value)")}}
-
Retorna un booleà que especifica si la clau té un valor associat en aquest objecte Set o no.
-
{{jsxref("Set.prototype.keys()")}}
-
Es tracta de la mateixa funció que la funció values() i retorna un nou objecte Iterator que conté els valors per a cada element de l'objecte Set, en ordre d'inserció.
-
{{jsxref("Set.prototype.values()")}}
-
Retorna un nou objecte Iterator que conté els valors de cada element de l'objecte Set, en ordre d'inserció.
-
{{jsxref("Set.prototype.@@iterator()", "Set.prototype[@@iterator]()")}}
-
Retorna un nou objecte Iterator que conté els valors de cada element de l'objecte Set, en ordre d'inserció.
-
- -

Especificacions

- - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-set.prototype', 'Set.prototype')}}{{Spec2('ES6')}}Definició inicial.
- -

Compatibilitat amb navegadors

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic38{{ CompatGeckoDesktop("13") }}11257.1
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}38{{ CompatGeckoMobile("13") }}{{CompatNo}}{{CompatNo}} -

8

-
-
- -

Vegeu també

- -
    -
  • {{jsxref("Map.prototype")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/set/values/index.html b/files/ca/web/javascript/referencia/objectes_globals/set/values/index.html deleted file mode 100644 index 307fa78113..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/set/values/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: Set.prototype.values() -slug: Web/JavaScript/Referencia/Objectes_globals/Set/values -translation_of: Web/JavaScript/Reference/Global_Objects/Set/values ---- -
{{JSRef}}
- -

El mètode values() retorna un nou objecte Iterator que conté els valors per a cada element de l'objecte Set en ordre d'inserció.

- -

El mètode keys() és un mètode sinònim d'aquest mètode (per a mantindre la similitud amb els objecte {{jsxref("Map")}}); es comporta exactament de la mateixa forma i retorna els valors dels elements de l'objecte Set.

- -

Sintaxi

- -
mySet.values();
-mySet.keys();
-
- -

Exemples

- -

Utilitzar values()

- -
var mySet = new Set();
-mySet.add("foo");
-mySet.add("bar");
-mySet.add("baz");
-
-var setIter = mySet.values();
-
-console.log(setIter.next().value); // "foo"
-console.log(setIter.next().value); // "bar"
-console.log(setIter.next().value); // "baz"
- -

Especificacions

- - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-set.prototype.values', 'Set.prototype.values')}}{{Spec2('ES6')}}Definició inicial.
- -

Compatibilitat amb navegadors

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic38{{CompatGeckoDesktop("24")}}{{CompatNo}}257.1
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}38{{ CompatGeckoMobile("24") }}{{ CompatNo}}{{ CompatNo}}8
-
- -

Vegeu també

- -
    -
  • {{jsxref("Set.prototype.entries()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/string/anchor/index.html b/files/ca/web/javascript/referencia/objectes_globals/string/anchor/index.html deleted file mode 100644 index 15bd4db97b..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/string/anchor/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: String.prototype.anchor() -slug: Web/JavaScript/Referencia/Objectes_globals/String/anchor -translation_of: Web/JavaScript/Reference/Global_Objects/String/anchor ---- -
{{JSRef}}
- -

El mètode anchor() un element àncora HTML {{HTMLElement("a")}} que s'utilitza com a HTML un objectiu hypertext.

- -

Sintaxi

- -
str.anchor(nom)
- -

Paràmetres

- -
-
nom
-
Una cadena que representa l'atribut name attribute of the a tag to be created.
-
- -

Descripció

- -

Utilitzar el mètode anchor() per crear i mostrar una àncora en un document mitjançant programació.

- -

En la sintaxi, la cadena de text representa el text literal que es vol mostrar a l'usuari. La cadena paràmetre name representa l'atribut name de l'element {{HTMLElement("a")}}.

- -

Les àncores creades amb el mètode anchor() es tornen elements de l'array {{domxref("document.anchors")}}.

- -

Exemples

- -

Utilitzar anchor()

- -
var myString = 'Taula de continguts';
-
-document.body.innerHTML = myString.anchor('contents_anchor');
-
- -

Mostrarà el següent HTML:

- -
<a name="contents_anchor">Taula de continguts</a>
-
- -

Especificacions

- - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-string.prototype.anchor', 'String.prototype.anchor')}}{{Spec2('ES6')}}Definició inicial. Implementat en JavaScript 1.0. Definit en l'Annex B (normative) per característiques addiccionals d'ECMAScript per a navegadors Web.
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}} [1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome pdr AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}} [1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

[1] Des de la versió Gecko 17, les " (cometes) són substituides pel caràcter de referència HTML &quot; en cadenes subministrades pel paràmetre name.

- -

Vegeu també

- -
    -
  • {{jsxref("String.prototype.link()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/string/big/index.html b/files/ca/web/javascript/referencia/objectes_globals/string/big/index.html deleted file mode 100644 index a3b8815f10..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/string/big/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: String.prototype.big() -slug: Web/JavaScript/Referencia/Objectes_globals/String/big -translation_of: Web/JavaScript/Reference/Global_Objects/String/big ---- -
{{JSRef}} {{deprecated_header}}
- -

El mètode big() crea un element HTML {{HTMLElement("big")}} que causa que la cadena es mostri en una font de mida gran.

- -
-

Nota d'ús: L'element <big> s'ha eliminat de l'HTML5 i no s'hauria de fer servir més. S'aconsella als desenvolupadors web utilitzar les propietats de CSS.

-
- -

Sintaxi

- -
str.big()
- -

Descripció

- -

El mètode big() incrusta una cadena dins del tag <big>: "<big>str</big>".

- -

Exemples

- -

Utilitzar big()

- -

L'exemple següent utilitza mètodes string per canviar la mida d'una cadena:

- -
var worldString = 'Hello, world';
-
-console.log(worldString.small());     // <small>Hello, world</small>
-console.log(worldString.big());       // <big>Hello, world</big>
-console.log(worldString.fontsize(7)); // <fontsize=7>Hello, world</fontsize>
-
- -

Amb l'objecte {{domxref("HTMLElement.style", "element.style")}} es pot obtenir l'atribut style de l'element i manipular-lo més genèricament, per exemple:

- -
document.getElementById('yourElemId').style.fontSize = '2em';
-
- -

Especificacions

- - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-string.prototype.big', 'String.prototype.big')}}{{Spec2('ES6')}}Definició inicial. Implementat en JavaScript 1.0. Definit en l'Annex B (normative) per característiques addicionals ECMAScript per navegadors web.
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("String.prototype.fontsize()")}}
    • -
  • {{jsxref("String.prototype.small()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/string/blink/index.html b/files/ca/web/javascript/referencia/objectes_globals/string/blink/index.html deleted file mode 100644 index 2378325897..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/string/blink/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: String.prototype.blink() -slug: Web/JavaScript/Referencia/Objectes_globals/String/blink -translation_of: Web/JavaScript/Reference/Global_Objects/String/blink ---- -
{{JSRef}} {{deprecated_header}}
- -

El mètode blink() crea un elment HTML {{HTMLElement("blink")}} que fa mostrar una cadena de forma intermitent.

- -
-

Advertència: El text que es mostra de forma intermitent és mal vist per varis estàndards d'accessibilitat. L'element  <blink> no és estàndard i és obsolet!

-
- -

Sintaxi

- -
str.blink()
- -

Descripció

- -

El mètode blink() incrusta una cadena dins l'etiqueta <blink>: "<blink>cad</blink>".

- -

Exemples

- -

Utilitzar blink()

- -

L'exemple següent utilitza mètodes string per canviar el format d'una cadena:

- -
var worldString = 'Hello, world';
-
-console.log(worldString.blink());   // <blink>Hello, world</blink>
-console.log(worldString.bold());    // <b>Hello, world</b>
-console.log(worldString.italics()); // <i>Hello, world</i>
-console.log(worldString.strike());  // <strike>Hello, world</strike>
- -

Especificacions

- - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-string.prototype.blink', 'String.prototype.blink')}}{{Spec2('ES6')}}Definició inicial. Implementat en JavaScript 1.0. Definit en l'Annex B (normative) per característiques addiccionals d'ECMAScrip per Navegadors Web.
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("String.prototype.bold()")}}
    • -
  • {{jsxref("String.prototype.italics()")}}
    • -
  • {{jsxref("String.prototype.strike()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/string/bold/index.html b/files/ca/web/javascript/referencia/objectes_globals/string/bold/index.html deleted file mode 100644 index 502810bb45..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/string/bold/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: String.prototype.bold() -slug: Web/JavaScript/Referencia/Objectes_globals/String/bold -translation_of: Web/JavaScript/Reference/Global_Objects/String/bold ---- -
{{JSRef}} {{deprecated_header}}
- -

El mètode bold() crea un element HTML {{HTMLElement("b")}} que causa que una cadena es mostri amb negreta.

- -

Sintaxi

- -
str.bold()
- -

Descripció

- -

El mètode bold() incrusta una cadena en l'etiqueta <b>: "<b>cad</b>".

- -

Exemples

- -

Utilitzar bold()

- -

L'exemple següent utilitza mètodes string per canviar el format d'una cadena:

- -
var worldString = 'Hello, world';
-
-console.log(worldString.blink());   // <blink>Hello, world</blink>
-console.log(worldString.bold());    // <b>Hello, world</b>
-console.log(worldString.italics()); // <i>Hello, world</i>
-console.log(worldString.strike());  // <strike>Hello, world</strike>
- -

Especificacions

- - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-string.prototype.bold', 'String.prototype.bold')}}{{Spec2('ES6')}}Definició inicial. Implementat en JavaScript 1.0. Definit en l'Annex B (normative) per Característiques addiccionals ECMAScript per navegadors Web.
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("String.prototype.blink()")}}
    • -
  • {{jsxref("String.prototype.italics()")}}
    • -
  • {{jsxref("String.prototype.strike()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/string/charat/index.html b/files/ca/web/javascript/referencia/objectes_globals/string/charat/index.html deleted file mode 100644 index 55a84ab7d0..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/string/charat/index.html +++ /dev/null @@ -1,283 +0,0 @@ ---- -title: String.prototype.charAt() -slug: Web/JavaScript/Referencia/Objectes_globals/String/charAt -translation_of: Web/JavaScript/Reference/Global_Objects/String/charAt ---- -
{{JSRef}}
- -

El mètode charAt() retorna el caràcter especificat d'una cadena.

- -

Sintaxi

- -
str.charAt(posicio)
- -

Paràmetres

- -
-
posicio
-
Un nombre sencer entre 0 i la longitud de la cadena menys 1.
-
- -

Descripció

- -

Els caràcters d'una cadena reben un nombre per la seva posició d'esquerra a dreta. La posició del primer caràcter és el 0 i la posició de l'últim caràcter d'una cadena anomenada stringName és stringName.length - 1. Si la posicio proporcionada està fora del rang vàlid JavaScript retornarà una cadena buida.

- -

Exemples

- -

Mostrar caràcters de diferents posicions d'una cadena

- -

L'exemple següent mostra alguns caràcters a diferents posicions de la cadena "Brave new world":

- -
var anyString = 'Brave new world';
-
-console.log("El caràcter a la posició 0   és '" + anyString.charAt(0)   + "'");
-console.log("El caràcter a la posició 1   és '" + anyString.charAt(1)   + "'");
-console.log("El caràcter a la posició 2   és '" + anyString.charAt(2)   + "'");
-console.log("El caràcter a la posició 3   és '" + anyString.charAt(3)   + "'");
-console.log("El caràcter a la posició 4   és '" + anyString.charAt(4)   + "'");
-console.log("El caràcter a la posició 999 és '" + anyString.charAt(999) + "'");
-
- -

Les línies anteriors mostren la sortida següent:

- -
El caràcter a la posició 0   és 'B'
-El caràcter a la posició 1   és 'r'
-El caràcter a la posició 2   és 'a'
-El caràcter a la posició 3   és 'v'
-El caràcter a la posició 4   és 'e'
-El caràcter a la posició 999 és ''
-
- -

Obtenir caràcters sencers

- -

El codi següent garanteix obtenir un caràcter sencer, fins i tot quan la cadena contingui caràcters que no formen part del pla bàsic multilingüístic.

- -
var str = 'A \uD87E\uDC04 Z'; // We could also use a non-BMP character directly
-for (var i = 0, chr; i < str.length; i++) {
-  if ((chr = getWholeChar(str, i)) === false) {
-    continue;
-  }
-  // Adapt this line at the top of each loop, passing in the whole string and
-  // the current iteration and returning a variable to represent the
-  // individual character
-
-  console.log(chr);
-}
-
-function getWholeChar(str, i) {
-  var code = str.charCodeAt(i);
-
-  if (Number.isNaN(code)) {
-    return ''; // Position not found
-  }
-  if (code < 0xD800 || code > 0xDFFF) {
-    return str.charAt(i);
-  }
-
-  // High surrogate (could change last hex to 0xDB7F to treat high private
-  // surrogates as single characters)
-  if (0xD800 <= code && code <= 0xDBFF) {
-    if (str.length <= (i + 1)) {
-      throw 'High surrogate without following low surrogate';
-    }
-    var next = str.charCodeAt(i + 1);
-      if (0xDC00 > next || next > 0xDFFF) {
-        throw 'High surrogate without following low surrogate';
-      }
-      return str.charAt(i) + str.charAt(i + 1);
-  }
-  // Low surrogate (0xDC00 <= code && code <= 0xDFFF)
-  if (i === 0) {
-    throw 'Low surrogate without preceding high surrogate';
-  }
-  var prev = str.charCodeAt(i - 1);
-
-  // (could change last hex to 0xDB7F to treat high private
-  // surrogates as single characters)
-  if (0xD800 > prev || prev > 0xDBFF) {
-    throw 'Low surrogate without preceding high surrogate';
-  }
-  // We can pass over low surrogates now as the second component
-  // in a pair which we have already processed
-  return false;
-}
-
- -

En l'entorn de l'ECMAScript 2016, que soporta assignació desestructurada, es pot utilitzar el codi següent com a versió alternativa més flexibleenvironment which allows destructured assignment, the following is a more succinct and somewhat more flexible alternative in that it does incrementing for an incrementing variable automatically (if the character warrants it in being a surrogate pair).

- -
var str = 'A\uD87E\uDC04Z'; // We could also use a non-BMP character directly
-for (var i = 0, chr; i < str.length; i++) {
-  [chr, i] = getWholeCharAndI(str, i);
-  // Adapt this line at the top of each loop, passing in the whole string and
-  // the current iteration and returning an array with the individual character
-  // and 'i' value (only changed if a surrogate pair)
-
-  console.log(chr);
-}
-
-function getWholeCharAndI(str, i) {
-  var code = str.charCodeAt(i);
-
-  if (Number.isNaN(code)) {
-    return ''; // Position not found
-  }
-  if (code < 0xD800 || code > 0xDFFF) {
-    return [str.charAt(i), i]; // Normal character, keeping 'i' the same
-  }
-
-  // High surrogate (could change last hex to 0xDB7F to treat high private
-  // surrogates as single characters)
-  if (0xD800 <= code && code <= 0xDBFF) {
-    if (str.length <= (i + 1)) {
-      throw 'High surrogate without following low surrogate';
-    }
-    var next = str.charCodeAt(i + 1);
-      if (0xDC00 > next || next > 0xDFFF) {
-        throw 'High surrogate without following low surrogate';
-      }
-      return [str.charAt(i) + str.charAt(i + 1), i + 1];
-  }
-  // Low surrogate (0xDC00 <= code && code <= 0xDFFF)
-  if (i === 0) {
-    throw 'Low surrogate without preceding high surrogate';
-  }
-  var prev = str.charCodeAt(i - 1);
-
-  // (could change last hex to 0xDB7F to treat high private surrogates
-  // as single characters)
-  if (0xD800 > prev || prev > 0xDBFF) {
-    throw 'Low surrogate without preceding high surrogate';
-  }
-  // Return the next character instead (and increment)
-  return [str.charAt(i + 1), i + 1];
-}
-
- -

Fixing charAt() to support non-Basic-Multilingual-Plane (BMP) characters

- -

While the example above may be more frequently useful for those wishing to support non-BMP characters (since it does not require the caller to know where any non-BMP character might appear), in the event that one does wish, in choosing a character by index, to treat the surrogate pairs within a string as the single characters they represent, one can use the following:

- -
function fixedCharAt(str, idx) {
-  var ret = '';
-  str += '';
-  var end = str.length;
-
-  var surrogatePairs = /[\uD800-\uDBFF][\uDC00-\uDFFF]/g;
-  while ((surrogatePairs.exec(str)) != null) {
-    var li = surrogatePairs.lastIndex;
-    if (li - 2 < idx) {
-      idx++;
-    } else {
-      break;
-    }
-  }
-
-  if (idx >= end || idx < 0) {
-    return '';
-  }
-
-  ret += str.charAt(idx);
-
-  if (/[\uD800-\uDBFF]/.test(ret) && /[\uDC00-\uDFFF]/.test(str.charAt(idx + 1))) {
-    // Go one further, since one of the "characters" is part of a surrogate pair
-    ret += str.charAt(idx + 1);
-  }
-  return ret;
-}
-
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('ES1')}}{{Spec2('ES1')}}Initial definition.
{{SpecName('ES5.1', '#sec-15.5.4.4', 'String.prototype.charAt')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-string.prototype.charat', 'String.prototype.charAt')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-string.prototype.charat', 'String.prototype.charAt')}}{{Spec2('ESDraft')}} 
- -

Browser compatibility

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

See also

- -
    -
  • {{jsxref("String.prototype.indexOf()")}}
    • -
  • {{jsxref("String.prototype.lastIndexOf()")}}
    • -
  • {{jsxref("String.prototype.charCodeAt()")}}
    • -
  • {{jsxref("String.prototype.codePointAt()")}}
    • -
  • {{jsxref("String.prototype.split()")}}
    • -
  • {{jsxref("String.fromCodePoint()")}}
    • -
  • JavaScript has a Unicode problem – Mathias Bynens
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/string/concat/index.html b/files/ca/web/javascript/referencia/objectes_globals/string/concat/index.html deleted file mode 100644 index 87cdda3c5e..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/string/concat/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: String.prototype.concat() -slug: Web/JavaScript/Referencia/Objectes_globals/String/concat -translation_of: Web/JavaScript/Reference/Global_Objects/String/concat ---- -
{{JSRef}}
- -

El mètode concat() combina el text de dos o més strings i retorna un nou string.

- -

Sintaxi

- -
str.concat(string2, string3[, ..., stringN])
- -

Paràmetres

- -
-
string2...stringN
-
Strings que seran concatenats a aquest string.
-
- -

Descripció

- -

La funció concat() combina el text d'un o més strings i retorna un nou string. Canvis al text d'un string no afecten l'altre string.

- -

Exemples

- -

Utilitzar concat()

- -

L'exemple següent combina strings en un nou string.

- -
var hola = 'Hola, ';
-console.log(hola.concat('Kevin', ' tingueu un bon dia.'));
-
-/* Hola, Kevin tingueu un bon dia. */
-
- -

Rendiment

- -

Es recomana altament utilitzar els {{jsxref("Operators/Assignment_Operators", "operadors d'assignació", "", 1)}} (+, +=) en comptes del mètode concat(). Vegeu aquest test de rendiment.

- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES3')}}{{Spec2('ES3')}}Definició inicial. Implementat a JavaScript 1.2.
{{SpecName('ES5.1', '#sec-15.5.4.6', 'String.prototype.concat')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-string.prototype.concat', 'String.prototype.concat')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Array.prototype.concat()")}}
    • -
  • {{jsxref("Operators/Assignment_Operators", "Operadors d'asssignació", "", 1)}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/string/endswith/index.html b/files/ca/web/javascript/referencia/objectes_globals/string/endswith/index.html deleted file mode 100644 index 83a1201549..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/string/endswith/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: String.prototype.endsWith() -slug: Web/JavaScript/Referencia/Objectes_globals/String/endsWith -translation_of: Web/JavaScript/Reference/Global_Objects/String/endsWith ---- -
{{JSRef}}
- -

El mètode endsWith() method determina si un string acaba amb els caràcters d'un altre string, retornant true o false depenent d'això.

- -

Sintaxi

- -
str.endsWith(stringAcercar[, posició])
- -

Paràmetres

- -
-
stringAcercar
-
Els caràcters a cercar al final d'aquest string.
-
posició
-
Opcional. Cerca dins aquest string considerant posició com la última posició del string; per defecte rep el valor del tamany total del string.
-
 
-
 
-
- -

Descripció

- -

Aquest mètode us permet determinar si un string acaba en un altre string.

- -

Exemples

- -

Utilitzar endsWith()

- -
var str = 'To be, or not to be, that is the question.';
-
-console.log(str.endsWith('question.')); // true
-console.log(str.endsWith('to be'));     // false
-console.log(str.endsWith('to be', 19)); // true
-
- -

Polyfill

- -

Aquest mètode va ser afegit a l'especificació ECMAScript i pot no estar disponible encara a totes les implementacions de JavaScript. No obstant, la funció següent emula el comportament de String.prototype.endsWith():

- -
if (!String.prototype.endsWith) {
-  String.prototype.endsWith = function(searchString, position) {
-      var subjectString = this.toString();
-      if (typeof position !== 'number' || !isFinite(position) || Math.floor(position) !== position || position > subjectString.length) {
-        position = subjectString.length;
-      }
-      position -= searchString.length;
-      var lastIndex = subjectString.indexOf(searchString, position);
-      return lastIndex !== -1 && lastIndex === position;
-  };
-}
-
- -

Especificacions

- - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-string.prototype.endswith', 'String.prototype.endsWith')}}{{Spec2('ES6')}}Definició inicial.
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome("41")}}{{CompatGeckoDesktop("17")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatChrome("36")}}{{CompatGeckoMobile("17")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("String.prototype.startsWith()")}} {{experimental_inline}}
    • -
  • {{jsxref("String.prototype.contains()")}} {{experimental_inline}}
    • -
  • {{jsxref("String.prototype.indexOf()")}}
    • -
  • {{jsxref("String.prototype.lastIndexOf()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/string/fixed/index.html b/files/ca/web/javascript/referencia/objectes_globals/string/fixed/index.html deleted file mode 100644 index 069ab4243f..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/string/fixed/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: String.prototype.fixed() -slug: Web/JavaScript/Referencia/Objectes_globals/String/fixed -translation_of: Web/JavaScript/Reference/Global_Objects/String/fixed ---- -
{{JSRef}} {{deprecated_header}}
- -

El mètode fixed() crea un element HTML {{HTMLElement("tt")}} que fa que una cadena es mostri en una font fixed-pitch.

- -

Sintaxi

- -
str.fixed()
- -

Descripció

- -

El mètode fixed() incrusta una cadena en una etiqueta <tt>: "<tt>cad</tt>".

- -

Exemples

- -

Utilitzar fixed()

- -

L'exemple següent utilitza el mètode fixed per canviar el format d'una cadena:

- -
var worldString = 'Hello, world';
-console.log(worldString.fixed()); // "<tt>Hello, world</tt>"
-
- -

Especificacions

- - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-string.prototype.fixed', 'String.prototype.fixed')}}{{Spec2('ES6')}}Definició inicial. Implementat en JavaScript 1.0. Definit en l'Annex B (normative) per Característiques addiccionals d'ECMAScript per Navegadors Web.
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("String.prototype.bold()")}}
    • -
  • {{jsxref("String.prototype.italics()")}}
    • -
  • {{jsxref("String.prototype.strike()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/string/fontcolor/index.html b/files/ca/web/javascript/referencia/objectes_globals/string/fontcolor/index.html deleted file mode 100644 index be52cd576b..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/string/fontcolor/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: String.prototype.fontcolor() -slug: Web/JavaScript/Referencia/Objectes_globals/String/fontcolor -translation_of: Web/JavaScript/Reference/Global_Objects/String/fontcolor ---- -
{{JSRef}} {{deprecated_header}}
- -

El mètode fontcolor() crea un element HTML {{HTMLElement("font")}} que fa que una cadena es mostri amb el color font especificat.

- -
-

Nota d'ús: L'element <font> s'ha eleminitat d'HTML5 i no s'ha de fer servir més. Els desenvolupadors web haurien d'utilitzar les propietats de CSS per aquesta finalitat.

-
- -

Sintaxi

- -
str.fontcolor(color)
- -

Paràmetres

- -
-
color
-
Una cadena que expressa el color com a un triplet RGB hexadecimal o com una cadena literal. Les cadenes literals de noms de colors es troben enllistades en la referència de colors de CSS.
-
- -

Descripció

- -

Si expresseu el color com un triplet RGB hexadecimal, heu de fer servir el format rrggbb. Per example, els valors RGB hexadecimals pel color salmó són vermell=FA, verd=80, i blau=72, de forma que el triplet RGB pel color salmó és "FA8072".

- -

Exemples

- -

Utilitzar fontcolor()

- -

L'exemple següent utilitza el mètode fontcolor() per canviar el color d'una cadena mitjançant la creació d'una cadena amb l'etiqueta HTML <font>.

- -
var worldString = 'Hola, món';
-
-console.log(worldString.fontcolor('red') +  ' és vermell en aquesta línia');
-// '<font color="red">Hola, món</font> 's vermell en aquesta línia'
-
-console.log(worldString.fontcolor('FF00') + ' és vermell en hexadecimal en aquesta línia');
-// '<font color="FF00">Hola, món</font> és vermell en hexadecimal en aquesta línia'
-
- -

Amb l'objecte {{domxref("HTMLElement.style", "element.style")}} es pot obtenir l'atribut style de l'element i manipular-lo més genèricament, per exemple:

- -
document.getElementById('yourElemId').style.color = 'red';
-
- -

Especificacions

- - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-string.prototype.fontcolor', 'String.prototype.fontcolor')}}{{Spec2('ES6')}}Definició inicial. Implementat en JavaScript 1.0. Definit en l'Annex B (normative) per Característiques addiccionals d'ECMAScript per Navegadors Web.
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("String.prototype.fontsize()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/string/fontsize/index.html b/files/ca/web/javascript/referencia/objectes_globals/string/fontsize/index.html deleted file mode 100644 index 9f30d124aa..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/string/fontsize/index.html +++ /dev/null @@ -1,121 +0,0 @@ ---- -title: String.prototype.fontsize() -slug: Web/JavaScript/Referencia/Objectes_globals/String/fontsize -translation_of: Web/JavaScript/Reference/Global_Objects/String/fontsize ---- -
{{JSRef}} {{deprecated_header}}
- -

El mètode fontsize() crea un element HTML {{HTMLElement("font")}} que causa que una cadena es mostri en el tamany font especificat.

- -
-

Nota d'ús: L'element <font> s'ha eliminat de l'HTML5 i no s'ha de fer servir més. Els desenvolupadors web haurien de fer servir les propietats de CSS per aquesta finalitat.

-
- -

Sintaxi

- -
str.fontsize(mida)
- -

Paràmetres

- -
-
mida
-
Un nombre sencer entre 1 i 7, una cadena que representi un nombre sencer amb signe entre 1 i 7.
-
- -

Descripció

- -

Quan s'especifica la mida com a un nombre sencer, s'estableix la mida de la str a un de les 7 mides definides. Quan s'especifica la mida com una cadena com pot ser "-2", s'adjusta el tamany font de str en relació ambel tamany establert en l'etiqueta {{HTMLElement("basefont")}}.

- -

Exemples

- -

Utilitzar fontsize()

- -

El següent exemple utilitza mètodes string per canviar la mida de la cadena:

- -
var worldString = 'Hola, món';
-
-console.log(worldString.small());     // <small>Hola, món</small>
-console.log(worldString.big());       // <big>Hola, món</big>
-console.log(worldString.fontsize(7)); // <font size="7">Hola, món</fontsize>
-
- -

Amb l'objecte {{domxref("HTMLElement.style", "element.style")}} es pot obtenir el atribut style de l'element i manipular-lo més genèricament, per exemple:

- -
document.getElementById('yourElemId').style.fontSize = '0.7em';
-
- -

Especificacions

- - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-string.prototype.fontsize', 'String.prototype.fontsize')}}{{Spec2('ES6')}}Definició inicial. Implementat en JavaScript 1.0. Definit en l'Annex B (normative) per Característiques Addiccionals d'ECMAScript per Navegadors Web.
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("String.prototype.big()")}}
    • -
  • {{jsxref("String.prototype.small()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/string/fromcharcode/index.html b/files/ca/web/javascript/referencia/objectes_globals/string/fromcharcode/index.html deleted file mode 100644 index f4e2308bf9..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/string/fromcharcode/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: String.fromCharCode() -slug: Web/JavaScript/Referencia/Objectes_globals/String/fromCharCode -translation_of: Web/JavaScript/Reference/Global_Objects/String/fromCharCode ---- -
{{JSRef}}
- -

El mètode estàtic String.fromCharCode() retorna un string creat a partir de la seqüència de valors Unicode especificada.

- -

Sintaxi

- -
String.fromCharCode(num1[, ...[, numN]])
- -

Paràmetres

- -
-
num1, ..., numN
-
Una seqüència de nombres que són valors Unicode.
-
- -

Descripció

- -

Aquest mètode retorna un string i no un objecte de tipus {{jsxref("String")}}.

- -

Com que fromCharCode() és un mètode estàtic de {{jsxref("String")}}, sempre s'utilitza com String.fromCharCode() en comptes de com un mètode d'un objecte {{jsxref("String")}} creat.

- -

Exemples

- -

Utilitzar fromCharCode()

- -

L'exemple següent retorna el string "ABC".

- -
String.fromCharCode(65, 66, 67);  // "ABC"
-
- -

Fer que funcioni amb valors més grans

- -

Tot i que la majoria dels valors Unicode es poden representar amb un nombre de 16 bits (tal i com s'esperava mentre s'estava estandaritzant el JavaScript) i es pot emprar fromCharCode() per a retornar un sol caràcter per als valors més comuns (com ara valors UCS-2, que són un subconjunt de l'UTF-16 amb els caràcters més comuns), per a poder manegar TOTS els valors legals Unicode (els quals requereixen fins a 21 bits),  l'ús de només fromCharCode() no és adequat ja que els caràcters de valor més alt utilitzen dos nombres "substituts" (de menor valor) per a formar un sol caràcter. Es pot emprar {{jsxref("String.fromCodePoint()")}} (que forma part de l'esborrant de l'ECMAScript 6) per a retornar el parell de nombres citat i, d'aquesta forma, representar de manera adequada aquests caràcters de valor més alt.

- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacionsEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.2.
{{SpecName('ES5.1', '#sec-15.5.3.2', 'StringfromCharCode')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-string.fromcharcodes', 'String.fromCharCode')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("String.fromCodePoint()")}}
    • -
  • {{jsxref("String.prototype.charAt()")}}
    • -
  • {{jsxref("String.prototype.charCodeAt()")}}
    • -
  • {{jsxref("String.prototype.codePointAt()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/string/index.html b/files/ca/web/javascript/referencia/objectes_globals/string/index.html deleted file mode 100644 index 136820a54d..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/string/index.html +++ /dev/null @@ -1,340 +0,0 @@ ---- -title: String -slug: Web/JavaScript/Referencia/Objectes_globals/String -translation_of: Web/JavaScript/Reference/Global_Objects/String ---- -
{{JSRef("Global_Objects", "String")}}
- -

Resum

- -

L'objecte global String és un constructor per a strings, també conegudes com a cadenes de caràcters.

- -

Sintaxi

- -

Els literals de tipus Stringpoden tenir les següents formes:

- -
'string text'
-"string text"
-"中文 español English हिन्दी العربية português বাংলা русский 日本語 ਪੰਜਾਬੀ 한국어 தமிழ்"
-
- -

A més dels caràcters imprimibles normals, es poden codificar caràcters especials mitjançant la notació d'escapament:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CodiSortida
\0el caràcter NUL
\'cometa simple
\"cometa doble
\\barra invertida
\nlínia nova
\rretorn de carro
\vbarra vertical
\ttabulador
\besborrar
\fform feed
\uXXXXcaràcter amb codificació unicode
\xXXcaràcter amb codificació Latin-1
- -

O bé utilitzant l'objecte global String de forma directa:

- -
String(quelcom)
-new String(quelcom)
-
- -

Paràmetres

- -
-
quelcom
-
Qualsevol cosa que serà convertida a string.
-
- -

Descripció

- -

Les Strings són útils per a emmagatzemar dades que poden ser representades en forma de texte. Algunes de les operacions més emprades en strings són per a obtindre la seva llargada {{jsxref("String.length", "length")}}, per a concatenar-les mitjançant els operadors de strings + i +=, per a comprovar l'existència o localització de substrings amb el mètode {{jsxref("String.prototype.indexOf()", "indexOf()")}}, o bé per a extreure substrings amb el mètode {{jsxref("String.prototype.substring()", "substring()")}}.

- -

Accés als caràcters

- -

Hi ha dues formes d'accedir a un caràcter individual emmagatzemat dins un string. El primer és el mètode {{jsxref("String.prototype.charAt()", "charAt()")}}:

- -
return 'cat'.charAt(1); // retorna "a"
-
- -

L'altra forma (introduida a ECMAScript 5) és fer anar l'string com si fós un objecte de tipus array, on els caràcters individuals es corresponen a un índex numèric:

- -
return 'cat'[1]; // retorna "a"
-
- -

Utilitzar la notació de claus per a esborrar o bé assignar un valor a un caràcter no funcionarà. Les propietats involucrades no són de tipus no-escriptura i no són configurables. (Vegeu {{jsxref("Object.defineProperty()")}} per a més informació).

- -

Comparar strings

- -

Els desenvolupadors de C disposen de la funció strcmp() per a comparar strings. A JavaScript senzillament es poden utilitzar els operadors major-que i menor-que

- -
var a = 'a';
-var b = 'b';
-if (a < b) { // true
-  print(a + ' és menor que ' + b);
-} else if (a > b) {
-  print(a + ' és major que ' + b);
-} else {
-  print(a + ' i ' + b + ' són iguals.');
-}
-
- -

Es pot obtindre un resultat similar mitjançant el mètode {{jsxref("String.prototype.localeCompare()", "localeCompare()")}}, heredat per les instàncies de String.

- -

Distinció entre les primitives string i els objectes String

- -

Cal recalcar que JavaScript distingeix entre objectes de tipus String i valors primitius de tipus string (El mateix succeeix amb {{jsxref("Global_Objects/Boolean", "Boolean")}} i {{jsxref("Global_Objects/Number", "Numbers")}}

- -

Els literals de tipus string (englobats en cometes simples o dobles) així com strings retornats per crides a l'objecte String en un contexte no constructor (és a dir, sense utilitzar la paraula clau {{jsxref("Operators/new", "new")}}) són strings primitives. JavaScript automàticament converteix primitives a objectes String, de forma que és posible utilitzar mètodes de l'objecte String en strings primitives. En els contextes on s'ha d'invocar un mètode en una primitiva string o es demana la una propietat, JavaScript automàticament embolcallarà la primitiva string amb un objecte String i cridarà el mètode o la propietat corresponent.

- -
var s_prim = 'foo';
-var s_obj = new String(s_prim);
-
-console.log(typeof s_prim); // Escriu "string"
-console.log(typeof s_obj);  // Escriu "object"
-
- -

Les primitives string i els objectes String també donen resultats diferents a l'utilitzar {{jsxref("Global_Objects/eval", "eval()")}}. Les primitives passades a eval són considerades codi font; els objectes String es tracten com qualsevol altre objecte, és a dir, retornan l'objecte. Per exemple:

- -
var s1 = '2 + 2';             // crea una primitiva string
-var s2 = new String('2 + 2'); // crea un objecte String
-console.log(eval(s1));        // escriu el nombre 4
-console.log(eval(s2));        // escriu la string "2 + 2"
-
- -

És per aquestes raons que el codi pot produïr errors quan trobi objectes String però s'esperès una primitiva string, tot i que de forma general els autors no s'han de preocupar per la distinció.

- -

Un objecte String sempre es pot convertir en la seva representació primitiva mitjançant el mètode {{jsxref("String.prototype.valueOf()", "valueOf()")}}.

- -
console.log(eval(s2.valueOf())); // escriu el nombre 4
-
- -
Nota: Per a una altra posible enfocament quant a string a JavaScript llegiu l'article sobre StringView — una representació de strings basada en arrays de tipatge explícit similar a C.
- -

Propietats

- -
-
{{jsxref("String.prototype")}}
-
Permet afegir propietats a un objecte String.
-
- -
{{jsOverrides("Function", "Properties", "prototype")}}
- -

Mètodes

- -
-
{{jsxref("String.fromCharCode()")}}
-
Retorna un string creat a partir de la seqüència de valors Unicode proporcionada.
-
{{jsxref("String.fromCodePoint()")}} {{experimental_inline}}
-
Retorna un string creat a partir de la seqüència de code points proporcionada.
-
{{jsxref("String.raw()")}} {{experimental_inline}}
-
Retorna un string creat a partir de l'string proporcionat sense tindre en compte la codificació.
-
- -
{{jsOverrides("Function", "Methods", "fromCharCode", "fromCodePoint", "raw")}}
- -

Mètodes genèrics de String

- -

Els mètodes de les instàncies de String també estan disponibles a Firefox a partir del JavaScript 1.6 (tot i que no formen part de l'standard ECMAScript) a l'objecte String, així es poden aplicar els mètodes de String a qualsevol objecte:

- -
var num = 15;
-console.log(String.replace(num, /5/, '2'));
-
- -

{{jsxref("Global_Objects/Array", "Generics", "#Array_generic_methods", 1)}} també estàn disponibles als mètodes de {{jsxref("Global_Objects/Array", "Array")}}.

- -

A continuació es mostra un shim per a donar suport als navegadors que no ho suporten:

- -
/*globals define*/
-// Assumes all supplied String instance methods already present
-// (one may use shims for these if not available)
-(function() {
-  'use strict';
-
-  var i,
-    // We could also build the array of methods with the following, but the
-    //   getOwnPropertyNames() method is non-shimable:
-    // Object.getOwnPropertyNames(String).filter(function(methodName) {
-    //   return typeof String[methodName] === 'function';
-    // });
-    methods = [
-      'quote', 'substring', 'toLowerCase', 'toUpperCase', 'charAt',
-      'charCodeAt', 'indexOf', 'lastIndexOf', 'startsWith', 'endsWith',
-      'trim', 'trimLeft', 'trimRight', 'toLocaleLowerCase',
-      'toLocaleUpperCase', 'localeCompare', 'match', 'search',
-      'replace', 'split', 'substr', 'concat', 'slice'
-    ],
-    methodCount = methods.length,
-    assignStringGeneric = function(methodName) {
-      var method = String.prototype[methodName];
-      String[methodName] = function(arg1) {
-        return method.apply(arg1, Array.prototype.slice.call(arguments, 1));
-      };
-    };
-
-  for (i = 0; i < methodCount; i++) {
-    assignStringGeneric(methods[i]);
-  }
-}());
-
- -

Instàncies de String

- -

Propietats

- -
{{page('/ca/docs/Web/JavaScript/Reference/Global_Objects/String/prototype', 'Properties')}}
- -

Mètodes

- -

Mètodes no relacionats amb HTML

- -
{{page('/ca/docs/Web/JavaScript/Reference/Global_Objects/String/prototype', 'Methods_unrelated_to_HTML')}}
- -

Mètodes d'embolcall de HTML

- -
{{page('/ca/docs/Web/JavaScript/Reference/Global_Objects/String/prototype', 'HTML_wrapper_methods')}}
- -

Exemples

- -

Exemple: Conversió de strings

- -

És posible utilitzar String com a una alternativa "més segura" de {{jsxref("String.prototype.toString()","toString()")}}, ja que tot i que normalment també crida el mètode toString() subjacent, també funciona per a {{jsxref("Global_Objects/null", "null")}} i {{jsxref("Global_Objects/undefined", "undefined")}}. Per exemple:

- -
var outputStrings = [];
-for (var i = 0, n = inputValues.length; i < n; ++i) {
-  outputStrings.push(String(inputValues[i]));
-}
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentari
ECMAScript 1a EdicióStandardDefinició inicial.
{{SpecName('ES5.1', '#sec-15.5', 'String')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-string-objects', 'String')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome("0.2")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- - diff --git a/files/ca/web/javascript/referencia/objectes_globals/string/indexof/index.html b/files/ca/web/javascript/referencia/objectes_globals/string/indexof/index.html deleted file mode 100644 index 9b08b04ded..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/string/indexof/index.html +++ /dev/null @@ -1,190 +0,0 @@ ---- -title: String.prototype.indexOf() -slug: Web/JavaScript/Referencia/Objectes_globals/String/indexOf -translation_of: Web/JavaScript/Reference/Global_Objects/String/indexOf ---- -
{{JSRef}}
- -

El mètode indexOf() retorna la primera posició dins el {{jsxref("String")}} des del que es crida a la qual es troba el valor proporcionat. Retorna -1 si no es troba el valor donat.

- -

Sintaxi

- -
str.indexOf(valorACercar[, posicioInicial])
- -

Paràmetres

- -
-
valorACercar
-
Un string que representa el valor a cercar.
-
posicioInicial {{optional_inline}}
-
La posició a partir de la qual es cercarà dins la cadena. Pot ser qualsevol nombre sencer. El valor per defecte és 0, indicant que es cercarà a tota la cadena. Si posicioInicial < 0 es cercarà a tota la cadena. Si posicioInicial >= str.length, no es cercarà a la cadena i es retornarà -1 automàticament. Si valorACercar és una cadena buida es retornarà str.length.
-
- -

Descripció

- -

Els caràcters de la cadena s'indexen d'esquerra a dreta. La posició del primer caràcter és 0, i la posició de l'últim caràcter d'una cadena amb nom stringName és  stringName.length - 1.

- -
'Blue Whale'.indexOf('Blue');     // returns  0
-'Blue Whale'.indexOf('Blute');    // returns -1
-'Blue Whale'.indexOf('Whale', 0); // returns  5
-'Blue Whale'.indexOf('Whale', 5); // returns  5
-'Blue Whale'.indexOf('', 9);      // returns  9
-'Blue Whale'.indexOf('', 10);     // returns 10
-'Blue Whale'.indexOf('', 11);     // returns 10
-
- -

Distinció entre majúscules i minúscules

- -

El mètode indexOf() distingeix entre majúscules i minúscules. Per exemple, l'expressió següent retorna -1:

- -
'Blue Whale'.indexOf('blue'); // retorna -1
-
- -

Comprovar troballes

- -

Cal destacar que '0' no s'evalua a true i que '-1' no s'evalua a false. Tenim llavors que al comprovar si una cadena específica existeix dins una altra, la forma correcta de comprovar-ho seria:

- -
'Blue Whale'.indexOf('Blue') !== -1; // true
-'Blue Whale'.indexOf('Bloe') !== -1; // false
-
- -

Exemples

- -

Utilitzar indexOf() i lastIndexOf()

- -

L'exemple següent utilitza indexOf() i {{jsxref("String.prototype.lastIndexOf()", "lastIndexOf()")}} per a trobar valors dins la cadena "Brave new world".

- -
var anyString = 'Brave new world';
-
-console.log('La posicó de la primera w des del principi és ' + anyString.indexOf('w'));
-// mostra 8
-console.log('La posició de la primera w des del final és ' + anyString.lastIndexOf('w'));
-// mostra 10
-
-console.log('La posicó de "new" des del principi és ' + anyString.indexOf('new'));
-// mostra 6
-console.log('La posició de "new" des del final és ' + anyString.lastIndexOf('new'));
-// mostra 6
-
- -

indexOf() i distinció entre majúscules i minúscules

- -

L'exemple següent definteix dos variables de tipus cadena. The following example defines two string variables. The variables contain the same string except that the second string contains uppercase letters. The first {{domxref("console.log()")}} method displays 19. But because the indexOf() method is case sensitive, the string "cheddar" is not found in myCapString, so the second console.log() method displays -1.

- -
var myString    = 'brie, pepper jack, cheddar';
-var myCapString = 'Brie, Pepper Jack, Cheddar';
-
-console.log('myString.indexOf("cheddar") is ' + myString.indexOf('cheddar'));
-// logs 19
-console.log('myCapString.indexOf("cheddar") is ' + myCapString.indexOf('cheddar'));
-// logs -1
-
- -

Using indexOf() to count occurrences of a letter in a string

- -

The following example sets count to the number of occurrences of the letter e in the string str:

- -
var str = 'To be, or not to be, that is the question.';
-var count = 0;
-var pos = str.indexOf('e');
-
-while (pos !== -1) {
-  count++;
-  pos = str.indexOf('e', pos + 1);
-}
-
-console.log(count); // displays 4
-
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('ES1')}}{{Spec2('ES1')}}Initial definition.
{{SpecName('ES5.1', '#sec-15.5.4.7', 'String.prototype.indexOf')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-string.prototype.indexof', 'String.prototype.indexOf')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-string.prototype.indexof', 'String.prototype.indexOf')}}{{Spec2('ESDraft')}} 
- -

Browser compatibility

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

See also

- -
    -
  • {{jsxref("String.prototype.charAt()")}}
    • -
  • {{jsxref("String.prototype.lastIndexOf()")}}
    • -
  • {{jsxref("String.prototype.split()")}}
    • -
  • {{jsxref("Array.prototype.indexOf()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/string/italics/index.html b/files/ca/web/javascript/referencia/objectes_globals/string/italics/index.html deleted file mode 100644 index f38a8f9579..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/string/italics/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: String.prototype.italics() -slug: Web/JavaScript/Referencia/Objectes_globals/String/italics -translation_of: Web/JavaScript/Reference/Global_Objects/String/italics ---- -
{{JSRef}} {{deprecated_header}}
- -

El mètode italics() crea un element HTML {{HTMLElement("i")}} que converteix una cadena en format itàlic.

- -

Sintaxi

- -
str.italics()
- -

Descripció

- -

El mètode italics() incrusta una cadena en una etiqueta <i>: "<i>str</i>".

- -

Exemples

- -

Utilitzar italics()

- -

L'exemple següent utilitza mètodes string per canviar el format de la cadena:

- -
var worldString = 'Hola, món'; console.log(worldString.blink());  // Hello, world
-console.log(worldString.bold());  // Hola, món
-console.log(worldString.italics()); //Hola, món
-console.log(worldString.strike());  // Hola, món
- -

Especificacions

- - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-string.prototype.italics', 'String.prototype.italics')}}{{Spec2('ES6')}}Definició inicial. Implemtat en JavaScript 1.0. Definit en l'Annex B (normative) per Caracerístiques Adiccionals d'ECMAScript per navegadors Web.
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("String.prototype.blink()")}}
    • -
  • {{jsxref("String.prototype.bold()")}}
    • -
  • {{jsxref("String.prototype.strike()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/string/length/index.html b/files/ca/web/javascript/referencia/objectes_globals/string/length/index.html deleted file mode 100644 index 63a3114d2d..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/string/length/index.html +++ /dev/null @@ -1,121 +0,0 @@ ---- -title: String.length -slug: Web/JavaScript/Referencia/Objectes_globals/String/length -translation_of: Web/JavaScript/Reference/Global_Objects/String/length ---- -
{{JSRef("Global_Objects", "String")}}
- -

Resum

- -

La propietat length representa la longitud d'una cadena de caràcters.

- -

Sintaxi

- -
str.length
- -

Descripció

- -

Aquesta propietat retorna el nombre d'unitats de codi en un string. {{interwiki("wikipedia", "UTF-16")}}, el format de string utilitzar a JavaScript, utilitza un únic codi de 16 bits per a representar els caràcters més comuns, però necessita dos unitats de codi per a caràcters menys comuns, així que és possible que el valor retornat per length no encaixi amb el nombre de caràcters reals a la cadena de caràcters.

- -

Per a una cadena buida, length és 0.

- -

La propietat estàtica String.length retorna el valor 1.

- -

Exemples

- -

Exemple: Ús bàsic

- -
var x = 'Mozilla';
-var empty = '';
-
-console.log('Mozilla té ' + x.length + ' unitats de codi');
-/* "Mozilla té 7 unitats de codi" */
-
-console.log('La string buida té una longitud de ' + empty.length);
-/* "La string buida té una longitud de 0" */
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacionsEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.5.5.1', 'String.prototype.length')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-properties-of-string-instances-length', 'String.prototype.length')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- - diff --git a/files/ca/web/javascript/referencia/objectes_globals/string/link/index.html b/files/ca/web/javascript/referencia/objectes_globals/string/link/index.html deleted file mode 100644 index efe1385ddc..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/string/link/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: String.prototype.link() -slug: Web/JavaScript/Referencia/Objectes_globals/String/link -translation_of: Web/JavaScript/Reference/Global_Objects/String/link ---- -
{{JSRef}}
- -

El mètode link() crea un element HTML {{HTMLElement("a")}} que causa que una cadena es mostri com un enllaç hipertext a una altra URL.

- -

Sintaxi

- -
str.link(url)
- -

Paràmetres

- -
-
url
-
Una cadena que especifica l'atribut href de l'etiqueta <a>: hauria de ser una URL vàlida (relativa o absoluta), amb qualsevols caràcters escapats & com &amp;, i qualsevol caràcter "  escapat com &quot;.
-
- -

Descripció

- -

Use the link() method to create an HTML snippet for a hypertext link. The returned string can then be added to the document via {{domxref("document.write()")}} or {{domxref("element.innerHTML")}}.

- -

Links created with the link() method become elements in the links array of the document object. See {{domxref("document.links")}}.

- -

Exemples

- -

Utilitzar link()

- -

L'exemple següent mostra la paraula "MDN" com a un enllaç hypertext lque retorna a l'usuari a la xarxa de Mozilla Developer.

- -
var hotText = 'MDN';
-var URL = 'https://developer.mozilla.org/';
-
-console.log('Click to return to ' + hotText.link(URL));
-// Click to return to <a href="https://developer.mozilla.org/">MDN</a>
-
- -

Especificacions

- - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-string.prototype.link', 'String.prototype.link')}}{{Spec2('ES6')}}Definició inicial. Implementat en JavaScript 1.0. Definit en l'Annex B (normative) per Característiques Addiccionals d'ECMAScript per Navegadors Web.
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Notes específiques Gecko

- -
    -
  • Starting Gecko 17.0 {{geckoRelease("17")}} the " (quotation mark) is now automatically replaced by its HTML reference character &quot; in the url parameter.
    • -
- -

Vegeu també

- -
    -
  • {{jsxref("String.prototype.anchor()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/string/normalize/index.html b/files/ca/web/javascript/referencia/objectes_globals/string/normalize/index.html deleted file mode 100644 index 7a6bcef500..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/string/normalize/index.html +++ /dev/null @@ -1,154 +0,0 @@ ---- -title: String.prototype.normalize() -slug: Web/JavaScript/Referencia/Objectes_globals/String/normalize -translation_of: Web/JavaScript/Reference/Global_Objects/String/normalize ---- -
{{JSRef}}
- -

El mètode normalize() retorna la Forma Normalitzada en Unicode d'un string donat (si el valor passat no és un string, es convertirà a string primer).

- -

Sintaxi

- -
str.normalize([forma])
- -

Paràmetres

- -
-
forma
-
Una de les opcions "NFC", "NFD", "NFKC", o "NFKD", que determina quina Forma de Normalització Unicode es farà anar. Si s'omet o es passa {{jsxref("undefined")}} com a paràmetre, s'utilitzarà "NFC" per defecte. -
    -
  • NFC — Normalization Form Canonical Composition.
    • -
  • NFD — Normalization Form Canonical Decomposition.
    • -
  • NFKC — Normalization Form Compatibility Composition.
    • -
  • NFKD — Normalization Form Compatibility Decomposition.
    • -
-
-
- -

Errors llençats

- -
-
{{jsxref("RangeError")}}
-
Es llença un {{jsxref("RangeError")}} si forma no és un dels valors especificats adalt.
-
- -

Descripció

- -

El mètode normalize() retorna la Forma Normalitzada Unicode d'un string. No afecta el propi valor del string passat sino que en retorna un de nou.

- -

Exemples

- -

Utilitzar normalize()

- -
// String inicial
-
-// U+1E9B: LLETRA S PETITA DEL LLATÍ AMB UN PUNT A SOBRE
-// U+0323: COMBINACIÓ AMB EL PUNT A SOTA
-var str = '\u1E9B\u0323';
-
-
-// Canonically-composed form (NFC)
-
-// U+1E9B: LLETRA S PETITA DEL LLATÍ AMB UN PUNT A SOBRE
-// U+0323: COMBINACIÓ AMB EL PUNT A SOTA
-str.normalize('NFC'); // '\u1E9B\u0323'
-str.normalize();      // el mateix que a sobre
-
-
-// Canonically-decomposed form (NFD)
-
-// U+017F: LLETRA S PETITA DEL LLATÍ AMB UN PUNT A SOBRE
-// U+0323: COMBINACIÓ AMB EL PUNT A SOTA
-// U+0307: COMBINACIÓ AMB EL PUNT A SOBRE
-str.normalize('NFD'); // '\u017F\u0323\u0307'
-
-
-// Compatibly-composed (NFKC)
-
-// U+1E69: LLETRA S PETITA DEL LLATÍ AMB UN PUNT A SOBRE
-str.normalize('NFKC'); // '\u1E69'
-
-
-// Compatibly-decomposed (NFKD)
-
-// U+0073: LLETRA S PETITA DEL LLATÍ
-// U+0323: COMBINACIÓ AMB EL PUNT A SOTA
-// U+0307: COMBINACIÓ AMB EL PUNT A SOBRE
-str.normalize('NFKD'); // '\u0073\u0323\u0307'
-
- -

Especificacions

- - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-string.prototype.normalize', 'String.prototype.normalize')}}{{Spec2('ES6')}}Definició inicial.
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome("34")}}{{CompatGeckoDesktop("31")}}{{CompatIE("11")}}{{CompatVersionUnknown}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatChrome("34")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

Vegeu també

- - diff --git a/files/ca/web/javascript/referencia/objectes_globals/string/small/index.html b/files/ca/web/javascript/referencia/objectes_globals/string/small/index.html deleted file mode 100644 index 761797bdda..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/string/small/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: String.prototype.small() -slug: Web/JavaScript/Referencia/Objectes_globals/String/small -translation_of: Web/JavaScript/Reference/Global_Objects/String/small ---- -
{{JSRef}} {{deprecated_header}}
- -

El mètode small() crea un element HTML {{HTMLElement("small")}} que causa que una cadena es mostri amb una font petita.

- -

Sintaxi

- -
str.small()
- -

Descripció

- -

El mètode small() incrusta una adena en una etiqueta <small>: "<small>str</small>".

- -

Exemples

- -

Utilitzar small()

- -

L'exemple següent utilitza mètodes string per canviar la mida d'una cadena:

- -
var worldString = 'Hola, món';
-
-console.log(worldString.small());     // <small>Hola, món</small>
-console.log(worldString.big());       // <big>Hola, món</big>
-console.log(worldString.fontsize(7)); // <font size="7">Hola, món</fontsize>
-
- -

Amb l'objecte {{domxref("HTMLElement.style", "element.style")}} es pot obtenir l'atribut style  d'un element i manipular-lo més genèricament. Per exemple:

- -
document.getElementById('yourElemId').style.fontSize = '0.7em';
-
- -

Especificacions

- - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-string.prototype.small', 'String.prototype.small')}}{{Spec2('ES6')}}Definició inicial. Implementat en JavaScript 1.0. Definit en l'Annex B (normative) per Característiques Addiccionals d'ECMAScript per Navegadors Web.
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("String.prototype.fontsize()")}}
    • -
  • {{jsxref("String.prototype.big()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/string/startswith/index.html b/files/ca/web/javascript/referencia/objectes_globals/string/startswith/index.html deleted file mode 100644 index ca25398d51..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/string/startswith/index.html +++ /dev/null @@ -1,128 +0,0 @@ ---- -title: String.prototype.startsWith() -slug: Web/JavaScript/Referencia/Objectes_globals/String/startsWith -translation_of: Web/JavaScript/Reference/Global_Objects/String/startsWith ---- -
{{JSRef}}
- -

El mètode startsWith() determina si un string comença amb els caràcters d'un altre string, retornant true o false depenent d'això.

- -

Sintaxi

- -
str.startsWith(stringAcercar[, posició])
- -

Paràmetres

- -
-
stringAcercar
-
Els caràcters a cercar al començament d'aquest string.
-
posició
-
Opcional. La posició dins el string a la qual es començarà a cercar per a trobar stringAcercar; per defecte és 0.
-
- -

Descripció

- -

Aquest mètode us permet determinar si un string comença amb un altre string.

- -

Exemples

- -

Utilitzar startsWith()

- -
var str = 'To be, or not to be, that is the question.';
-
-console.log(str.startsWith('To be'));         // true
-console.log(str.startsWith('not to be'));     // false
-console.log(str.startsWith('not to be', 10)); // true
-
- -

Polyfill

- -

Aquest mètode va ser afegit a l'especificació ECMAScript i pot no estar disponible encara a totes les implementacions de JavaScript. No obstant, la funció següent emula el comportament de String.prototype.startsWith():

- -
if (!String.prototype.startsWith) {
-  String.prototype.startsWith = function(searchString, position) {
-    position = position || 0;
-    return this.indexOf(searchString, position) === position;
-  };
-}
-
- -

Trobareu una funció Polyfill més robusta i optimitzada al GitHub de Mathias Bynens.

- -

Especificacions

- - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-string.prototype.startswith', 'String.prototype.startsWith')}}{{Spec2('ES6')}}Definició inicial.
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome("41")}}{{CompatGeckoDesktop("17")}}{{CompatNo}}{{CompatChrome("41")}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatChrome("36")}}{{CompatGeckoMobile("17")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("String.prototype.endsWith()")}} {{experimental_inline}}
    • -
  • {{jsxref("String.prototype.includes()")}} {{experimental_inline}}
    • -
  • {{jsxref("String.prototype.indexOf()")}}
    • -
  • {{jsxref("String.prototype.lastIndexOf()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/string/sub/index.html b/files/ca/web/javascript/referencia/objectes_globals/string/sub/index.html deleted file mode 100644 index 0b512d038e..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/string/sub/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: String.prototype.sub() -slug: Web/JavaScript/Referencia/Objectes_globals/String/sub -translation_of: Web/JavaScript/Reference/Global_Objects/String/sub ---- -
{{JSRef}} {{deprecated_header}}
- -

El mètode sub() crea un element HTML {{HTMLElement("sub")}} que fa que una cadena es mostri com a subíndex.

- -

Sintaxi

- -
str.sub()
- -

Descripció

- -

El mètode sub() incrusta una cadena a una etiqueta <sub>: "<sub>str</sub>".

- -

Exemples

- -

Utilitzar els mètodes sub() i sup()

- -

El codi següent utiltza els mètodes sub() i {{jsxref("String.prototype.sup()", "sup()")}} per donar format a una cadena:

- -
var superText="superíndex";
-var subText="subíndex";
-
-console.log("Així es com es veu un " + superText.sup());
-// Així es com es veu un <sup>superíndex</sup>.
-
-console.log("Així es com es veu un " + subText.sub());
-// Així es com es veu un <sub>subíndex</sub>.
-
- -

Especificacions

- - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-string.prototype.sub', 'String.prototype.sub')}}{{Spec2('ES6')}} -

Definició inicial. Implementat en JavaScript 1.0. Definit en l'Annex B (normative) per a Característiques Addicicionals d'ECMAScript per Navegadors Web.

-
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("String.prototype.sup()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/string/substr/index.html b/files/ca/web/javascript/referencia/objectes_globals/string/substr/index.html deleted file mode 100644 index 5fdb1f03b4..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/string/substr/index.html +++ /dev/null @@ -1,156 +0,0 @@ ---- -title: String.prototype.substr() -slug: Web/JavaScript/Referencia/Objectes_globals/String/substr -translation_of: Web/JavaScript/Reference/Global_Objects/String/substr ---- -
{{JSRef}}
- -

El mètode substr() retorna els caràcters d'una cadena començant per la posició especificada fins al nombre especificat de caràcters.

- -

Sintaxi

- -
str.substr(començament[, llargària])
- -

Paràmetres

- -
-
començament
-
Lloc des d'on es comença a extraure els caràcters. Si es dóna un nombre negatiu, se'l tracta com strLength + començament on strLength és la llargària de al cadena (per exemple, si començament és -3 se'l tracta com strLength - 3.)
-
llargària
-
Opcional. El nombre de caràcter per extraure.
-
- -

Descripció

- -

començament is a character index. L'índex del primer caràcter és 0, i l'índex de l'últim caràcter és 1 menys que la llargària de la cadena. substr() comença extraient caràcters a començament i recull els caràcters llargària (llevat que primer s'arribi al final de la cadena, en aquest cas en retornaria menys).

- -

Si començament és positivu i més gran o igual que la llargària de la cadena, substr() retornarà una cadena buida.

- -

SI començament és negatiu, substr() l'utilitza com un índex de caràcter des del final de la cadena. Si començament és negatiu i  abs(comença,ent) és més gran que la llargària de la cadena, substr() utilitza 0 com a índex d'inici. Nota: El maneig de valors negatius de l'argument començament no està suportat per Microsoft JScript.

- -

Si llargària és 0 o negatiu, substr() retorna una cadena buida. Si llargària s'omet, substr() extreu els caràcter fins al final de la cadena.

- -

Exemples

- -

Utilitzar substr()

- -
var str = 'abcdefghij';
-
-console.log('(1, 2): '   + str.substr(1, 2));   // '(1, 2): bc'
-console.log('(-3, 2): '  + str.substr(-3, 2));  // '(-3, 2): hi'
-console.log('(-3): '     + str.substr(-3));     // '(-3): hij'
-console.log('(1): '      + str.substr(1));      // '(1): bcdefghij'
-console.log('(-20, 2): ' + str.substr(-20, 2)); // '(-20, 2): ab'
-console.log('(20, 2): '  + str.substr(20, 2));  // '(20, 2): '
-
- -

Polyfill

- -

Microsoft's JScript no suporta valors negatius per l'índex d'inici. Si desitjes utilitzar aquesta característica, pots utilitzar el codi de compatibilitat següent per evitar aquest error:

- -
// només s'executa quan la funció substr() està trencada
-if ('ab'.substr(-1) != 'b') {
-  /**
-   *  Obtenir la subcadena d'una cadena
-   *  @param  {integer}  start   on comença la subcadena
-   *  @param  {integer}  length  quants caràcters s'han de retornar
-   *  @return {string}
-   */
-  String.prototype.substr = function(substr) {
-    return function(start, length) {
-      // crida el mètode original
-      return substr.call(this,
-      	// Si ens dóna un començament negatiu, calcular quant es des de l'inici de la cadena
-        // adjustar el paràmetre start per valor negatiu
-        start < 0 ? this.length + start : start,
-        length)
-    }
-  }(String.prototype.substr);
-}
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES3')}}{{Spec2('ES3')}}Definit en l'Annex B de Compatibilitat (informative). Implementat en JavaScript 1.0.
{{SpecName('ES5.1', '#sec-B.2.3', 'String.prototype.substr')}}{{Spec2('ES5.1')}}Definit en l'Annex B de Compatibilitat (informative)
{{SpecName('ES6', '#sec-string.prototype.substr', 'String.prototype.substr')}}{{Spec2('ES6')}}Definit en l'Annex B (normative) per Característiques addiccionals d'ECMAScript per Navegadors Web
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("String.prototype.slice()")}}
    • -
  • {{jsxref("String.prototype.substring()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/string/sup/index.html b/files/ca/web/javascript/referencia/objectes_globals/string/sup/index.html deleted file mode 100644 index 24b46c88ce..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/string/sup/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: String.prototype.sup() -slug: Web/JavaScript/Referencia/Objectes_globals/String/sup -translation_of: Web/JavaScript/Reference/Global_Objects/String/sup ---- -
{{JSRef}} {{deprecated_header}}
- -

El mètode sup() crea un element HTML {{HTMLElement("sup")}} que causa que la cadena es mostri com un superíndex.

- -

Sintaxi

- -
str.sup()
- -

Descripció

- -

El mètode sup() incrusta una cadena en l'etiqueta <sup>:"<sup>str</sup>".

- -

Exemples

- -

Utilitzar els mètodes sub() i sup()

- -

L'exemple següent utilitza els mètodes {{jsxref("String.prototype.sub()", "sub()")}} i sup() per formatejar la cadena:

- -
var superText = 'superíndex';
-var subText = 'subíndex';
-
-console.log('This is what a ' + superText.sup());
-// "Així es com es veu un <sup>superíndex</sup>."
-
-console.log('This is what a ' + subText.sub());
-// "Així es com es veu un <sub>subíndex</sub>."
-
- -

Especificacions

- - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-string.prototype.sup', 'String.prototype.sup')}}{{Spec2('ES6')}}Definició inicial. Implementat en JavaScript 1.0. Definit en l'Annex B (normative) per a Característiques Addicicionals d'ECMAScript per Navegadors Web.
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("String.prototype.sub()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/string/tolocalelowercase/index.html b/files/ca/web/javascript/referencia/objectes_globals/string/tolocalelowercase/index.html deleted file mode 100644 index c138197bc1..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/string/tolocalelowercase/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: String.prototype.toLocaleLowerCase() -slug: Web/JavaScript/Referencia/Objectes_globals/String/toLocaleLowerCase -translation_of: Web/JavaScript/Reference/Global_Objects/String/toLocaleLowerCase ---- -
{{JSRef}}
- -

El mètode toLocaleLowerCase() retorna el valor del string que fa la crida convertit a minúscules , tot seguint les directrius locals específiques de conversió a minúscules.

- -

Sintaxi

- -
str.toLocaleLowerCase()
- -

Descripció

- -

El mètode toLocaleLowerCase() retorna el valor del string que fa la crida convertit a minúscules , tot seguint les directrius locals específiques de conversió a minúscules.El mètode toLocaleLowerCase() retorna el valor del string que fa la crida convertit a minúscules , tot seguint les directrius locals específiques de conversió a minúscules. En la majoria dels casos, la crida a aquest mètode produirà un resultat similar a la del mètode {{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}}, però per a algunes localitzacions, com ara el Turc, en les quals el pas de majúscules a minúscules o de minúscules a majúscules no segueix les assignacions per defecte del Unicode, el resultat pot diferir.

- -

Exemples

- -

Utilitzar toLocaleLowerCase()

- -
console.log('ALFABET'.toLocaleLowerCase()); // 'alfabet'
-
- -

Especifications

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES3')}}{{Spec2('ES3')}}Definició inicial. Implementat a JavaScript 1.2.
{{SpecName('ES5.1', '#sec-15.5.4.17', 'String.prototype.toLocaleLowerCase')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-string.prototype.tolocalelowercase', 'String.prototype.toLocaleLowerCase')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("String.prototype.toLocaleUpperCase()")}}
    • -
  • {{jsxref("String.prototype.toLowerCase()")}}
    • -
  • {{jsxref("String.prototype.toUpperCase()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/string/tolocaleuppercase/index.html b/files/ca/web/javascript/referencia/objectes_globals/string/tolocaleuppercase/index.html deleted file mode 100644 index 8f7b2aa716..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/string/tolocaleuppercase/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: String.prototype.toLocaleUpperCase() -slug: Web/JavaScript/Referencia/Objectes_globals/String/toLocaleUpperCase -translation_of: Web/JavaScript/Reference/Global_Objects/String/toLocaleUpperCase ---- -
{{JSRef}}
- -

El mètode toLocaleUpperCase() retorna el valor del string que fa la crida convertit a majúscules, tot seguint les directrius locals específiques de conversió a majúscules.

- -

Sintaxi

- -
str.toLocaleUpperCase()
- -

Descripció

- -

El mètode toLocaleUpperCase() retorna el valor del string que fa la crida convertit a majúscules, tot seguint les directrius locals específiques de conversió a majúscules. toLocaleUpperCase() no afecta el valor del string que fa la crida sino que en retorna un de nou. En la majoria dels casos, la crida a aquest mètode produirà un resultat similar a la del mètode {{jsxref("String.prototype.toUpperCase()", "toUpperCase()")}}, però per a algunes localitzacions, com ara el Turc, en les quals el pas de majúscules a minúscules o de minúscules a majúscules no segueix les assignacions per defecte del Unicode, el resultat pot diferir.

- -

Exemples

- -

Utilitzar toLocaleUpperCase()

- -
console.log('alfabet'.toLocaleUpperCase()); // 'ALFABET'
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES3')}}{{Spec2('ES3')}}Definició inicial. Implementat a JavaScript 1.2.
{{SpecName('ES5.1', '#sec-15.5.4.19', 'String.prototype.toLocaleUpperCase')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-string.prototype.tolocaleuppercase', 'String.prototype.toLocaleUpperCase')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("String.prototype.toLocaleLowerCase()")}}
    • -
  • {{jsxref("String.prototype.toLowerCase()")}}
    • -
  • {{jsxref("String.prototype.toUpperCase()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/string/tolowercase/index.html b/files/ca/web/javascript/referencia/objectes_globals/string/tolowercase/index.html deleted file mode 100644 index 7147d0ea0d..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/string/tolowercase/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: String.prototype.toLowerCase() -slug: Web/JavaScript/Referencia/Objectes_globals/String/toLowerCase -translation_of: Web/JavaScript/Reference/Global_Objects/String/toLowerCase ---- -
{{JSRef}}
- -

El mètode toLowerCase() retorna  el valor del string que fa la crida convertit a majúscules.
-  

- -

Sintaxi

- -
str.toLowerCase()
- -

Descripció

- -

El mètode toLowerCase() retorna  el valor del string que fa la crida convertit a majúscules. toLowerCase() no afecta el valor del string que fa la crida sino que en retorna un de nou.

- -

Exemples

- -

Utilitzar toLowerCase()

- -
console.log('ALFABET'.toLowerCase()); // 'alfabet'
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacionsEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.5.4.16', 'String.prototype.toLowerCase')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-string.prototype.tolowercase', 'String.prototype.toLowerCase')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("String.prototype.toLocaleLowerCase()")}}
    • -
  • {{jsxref("String.prototype.toLocaleUpperCase()")}}
    • -
  • {{jsxref("String.prototype.toUpperCase()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/string/tostring/index.html b/files/ca/web/javascript/referencia/objectes_globals/string/tostring/index.html deleted file mode 100644 index 11f2555a2f..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/string/tostring/index.html +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: String.prototype.toString() -slug: Web/JavaScript/Referencia/Objectes_globals/String/toString -translation_of: Web/JavaScript/Reference/Global_Objects/String/toString ---- -
{{JSRef}}
- -

El mètode toString() retorna un string que representa l'objecte especificat.

- -

Sintaxi

- -
str.toString()
- -

Descripció

- -

L'objecte {{jsxref("String")}} sobreescriu el mètode toString() de l'objecte {{jsxref("Object")}}; no hereta {{jsxref("Object.prototype.toString()")}}. Per a objectes {{jsxref("String")}}, el mètode toString() retorna un string que representa l'objecte i és el mateix que el que el retornat pel mètode {{jsxref("String.prototype.valueOf()")}}.

- -

Exemples

- -

Utilitzar toString()

- -

L'exemple següent mostra el valor d'un objecte {{jsxref("String")}}:

- -
var x = new String('Hello world');
-
-console.log(x.toString()); // mostra 'Hello world'
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES3')}}{{Spec2('ES3')}}Definició inicial. Implementat a JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.5.4.2', 'String.prototype.toString')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-string.prototype.tostring', 'String.prototype.toString')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Object.prototype.toSource()")}}
    • -
  • {{jsxref("String.prototype.valueOf()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/string/touppercase/index.html b/files/ca/web/javascript/referencia/objectes_globals/string/touppercase/index.html deleted file mode 100644 index 2a3b4fe56a..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/string/touppercase/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: String.prototype.toUpperCase() -slug: Web/JavaScript/Referencia/Objectes_globals/String/toUpperCase -translation_of: Web/JavaScript/Reference/Global_Objects/String/toUpperCase ---- -
{{JSRef}}
- -

El mètode toUpperCase() retorna  el valor del string que fa la crida convertit a majúscules.

- -

Sintaxi

- -
str.toUpperCase()
- -

Descripció

- -

El mètode toUpperCase() retorna  el valor del string que fa la crida convertit a majúscules. toUpperCase() no afecta el valor del string que fa la crida sino que en retorna un de nou.

- -

Exemples

- -

Utilitzar toUpperCase()

- -
console.log('alfabet'.toUpperCase()); // 'ALFABET'
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Implementat a JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.5.4.18', 'String.prototype.toUpperCase')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-string.prototype.touppercase', 'String.prototype.toUpperCase')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("String.prototype.toLocaleLowerCase()")}}
    • -
  • {{jsxref("String.prototype.toLocaleUpperCase()")}}
    • -
  • {{jsxref("String.prototype.toLowerCase()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/string/trim/index.html b/files/ca/web/javascript/referencia/objectes_globals/string/trim/index.html deleted file mode 100644 index 2dd955ea62..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/string/trim/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: String.prototype.trim() -slug: Web/JavaScript/Referencia/Objectes_globals/String/Trim -translation_of: Web/JavaScript/Reference/Global_Objects/String/Trim ---- -
{{JSRef}}
- -

El mètode trim() elimina els espais en blanc tant a l'inici com al final del string. En aquest contexte, s'entèn com a espais en blanc tots les caràcters que no imprimeixin res (espai, tabulador, espai sense salt de línia, etcètera) així com tots els caràcters terminadors de línia (LF, CR, etc.).

- -

Sintaxi

- -
str.trim()
- -

Descripció

- -

El mètode trim() retorna un string sense espais en blanc tant a l'inici com al final. trim() no afecta el valor del string ja que en retorna un de nou.

- -

Exemples

- -

Utilitzar trim()

- -

L'exemple següent mostra el string 'foo':

- -
var orig = '   foo  ';
-console.log(orig.trim()); // 'foo'
-
-// Un altre exemple de .trim() eliminant espais en blanc només d'un cantó.
-
-var orig = 'foo    ';
-console.log(orig.trim()); // 'foo'
-
- -

Polyfill

- -

Executar el codi que es mostra a continuació abans d'executar cap altre codi crearà la funció trim() si aquesta no està disponible de forma nativa.

- -
if (!String.prototype.trim) {
-  String.prototype.trim = function () {
-    return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
-  };
-}
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES5.1', '#sec-15.5.4.20', 'String.prototype.trim')}}{{Spec2('ES5.1')}}Definició inicial. Implementat a JavaScript 1.8.1.
{{SpecName('ES6', '#sec-string.prototype.trim', 'String.prototype.trim')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}{{CompatIE("9")}}{{CompatOpera("10.5")}}{{CompatSafari("5")}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("String.prototype.trimLeft()")}} {{non-standard_inline}}
    • -
  • {{jsxref("String.prototype.trimRight()")}} {{non-standard_inline}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/string/trimleft/index.html b/files/ca/web/javascript/referencia/objectes_globals/string/trimleft/index.html deleted file mode 100644 index f16a5b89fa..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/string/trimleft/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: String.prototype.trimLeft() -slug: Web/JavaScript/Referencia/Objectes_globals/String/TrimLeft -translation_of: Web/JavaScript/Reference/Global_Objects/String/trimStart ---- -
{{JSRef}} {{non-standard_header}}
- -

El mètode trimLeft() elimina els espais en blanc a l'esquerra del string.

- -

Sintaxi

- -
str.trimLeft()
- -

Descripció

- -

El mètode trimLeft() retorna un string on els espais en blanc del començament s'han eliminat. trimLeft() no afecta al valor mateix del string sino que en retorna un de nou.

- -

Exemples

- -

Utilitzar trimLeft()

- -

L'exemple següent mostra el string 'foo ':

- -
var str = '   foo  ';
-
-console.log(str.length); // 8
-
-str = str.trimLeft();
-console.log(str.length); // 5
-console.log(str);        // 'foo  '
-
- -

Especificacions

- -

No és part de cap standard. Implementat a JavaScript 1.8.1.

- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("String.prototype.trim()")}}
    • -
  • {{jsxref("String.prototype.trimRight()")}} {{non-standard_inline}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/string/trimright/index.html b/files/ca/web/javascript/referencia/objectes_globals/string/trimright/index.html deleted file mode 100644 index 41ab89e3ca..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/string/trimright/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: String.prototype.trimRight() -slug: Web/JavaScript/Referencia/Objectes_globals/String/TrimRight -translation_of: Web/JavaScript/Reference/Global_Objects/String/trimEnd ---- -
{{JSRef}} {{non-standard_header}}
- -

El mètode trimRight() elimina els espais en blanc al final d'un string.

- -

Sintaxi

- -
str.trimRight()
- -

Descripció

- -

El mètode trimRight() retorna el string sense espais en blanc al final del mateix. trimRight() no afecta el valor del string sino que en retorna un de nou.

- -

Exemples

- -

Utilitzar trimRight()

- -

L'exemple següent mostra el string ' foo':

- -
var str = '   foo  ';
-
-console.log(str.length); // 8
-
-str = str.trimRight();
-console.log(str.length); // 5
-console.log(str);        // '   foo'
-
- -

Especificacions

- -

No forma part de cap standard. Implementat a JavaScript 1.8.1.

- -

Browser compatibility

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("String.prototype.trim()")}}
    • -
  • {{jsxref("String.prototype.trimLeft()")}} {{non-standard_inline}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/syntaxerror/index.html b/files/ca/web/javascript/referencia/objectes_globals/syntaxerror/index.html deleted file mode 100644 index 2ad16e006f..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/syntaxerror/index.html +++ /dev/null @@ -1,166 +0,0 @@ ---- -title: SyntaxError -slug: Web/JavaScript/Referencia/Objectes_globals/SyntaxError -translation_of: Web/JavaScript/Reference/Global_Objects/SyntaxError ---- -
{{JSRef}}
- -

L'objecte SyntaxError representa un error quan s'intenta interpretar un codi sintàcticament no vàlid.

- -

Descripció

- -

Es llança un SyntaxError quan el motor JavaScript es troba amb tokens o un token que no s'adequa a la sintaxi del llenguatge quan s'interpreta el codi.

- -

Sintaxi

- -
new SyntaxError([missatge[, nomFitxer[, numeroLinia]]])
- -

Paràmetres

- -
-
missatge
-
Opcional. Descripció llegible per humans de l'error
-
nomFitxer {{non-standard_inline}}
-
Opcional. El nom del fitxer que conté el codi que causa l'excepció
-
numeroLinia {{non-standard_inline}}
-
Opcional. El número de linia del codi que causa l'excepció
-
- -

Propietats

- -
-
{{jsxref("SyntaxError.prototype")}}
-
Permet l'addició de propietats a un objecte SyntaxError.
-
- -

Mètodes

- -

El SyntaxError global no conté cap mètode en si mateix, tanmateix, sí que hereta alguns mètodes a través de la cadena prototipus.

- -

instànces de SyntaxError

- -

Propietats

- -
{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype', 'Properties')}}
- -

Mètodes

- -
{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype', 'Methods')}}
- -

Exemples

- -

Capturar un SyntaxError

- -
try {
-  eval('hoo bar');
-} catch (e) {
-  console.log(e instanceof SyntaxError); // true
-  console.log(e.message);                // "missing ; before statement"
-  console.log(e.name);                   // "SyntaxError"
-  console.log(e.fileName);               // "Scratchpad/1"
-  console.log(e.lineNumber);             // 1
-  console.log(e.columnNumber);           // 4
-  console.log(e.stack);                  // "@Scratchpad/1:2:3\n"
-}
-
- -

Crear un SyntaxError

- -
try {
-  throw new SyntaxError('Hello', 'someFile.js', 10);
-} catch (e) {
-  console.log(e instanceof SyntaxError); // true
-  console.log(e.message);                // "Hello"
-  console.log(e.name);                   // "SyntaxError"
-  console.log(e.fileName);               // "someFile.js"
-  console.log(e.lineNumber);             // 10
-  console.log(e.columnNumber);           // 0
-  console.log(e.stack);                  // "@Scratchpad/2:11:9\n"
-}
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES3')}}{{Spec2('ES3')}}Definició inicial.
{{SpecName('ES5.1', '#sec-15.11.6.4', 'SyntaxError')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-native-error-types-used-in-this-standard-syntaxerror', 'SyntaxError')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Error")}}
    • -
  • {{jsxref("SyntaxError.prototype")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/syntaxerror/prototype/index.html b/files/ca/web/javascript/referencia/objectes_globals/syntaxerror/prototype/index.html deleted file mode 100644 index 35aea642bd..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/syntaxerror/prototype/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: SyntaxError.prototype -slug: Web/JavaScript/Referencia/Objectes_globals/SyntaxError/prototype -translation_of: Web/JavaScript/Reference/Global_Objects/SyntaxError -translation_of_original: Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype ---- -
{{JSRef}}
- -

La propietat SyntaxError.prototype representa el prototip pel constructor {{jsxref("SyntaxError")}}.

- -

Descripció

- -

Totes les instàncies {{jsxref("SyntaxError")}} hereten de SyntaxError.prototype. Es pot utilitzar el prototipus per afegir propietats o mètodes a totes les instàncies.

- -

Propietats

- -
-
SyntaxError.prototype.constructor
-
Especifica la funció que ha creat el prototip d'una instància.
-
{{jsxref("Error.prototype.message", "SyntaxError.prototype.message")}}
-
Missatge d'error. Tot i que l'ECMA-262 especifica que {{jsxref("SyntaxError")}} hauria de proveir la seva pròpia propietat message, en SpiderMonkey, hereta {{jsxref("Error.prototype.message")}}.
-
{{jsxref("Error.prototype.name", "SyntaxError.prototype.name")}}
-
Nom de l'herror. Heretat de {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.fileName", "SyntaxError.prototype.fileName")}}
-
Ruta a l'arxiu que llança aquest error. Heretat de {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.lineNumber", "SyntaxError.prototype.lineNumber")}}
-
Número de línia en el fitxa que llança aquest error. Heretat de {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.columnNumber", "SyntaxError.prototype.columnNumber")}}
-
Número de columna en línia que llança aquest error. Heretat de {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.stack", "SyntaxError.prototype.stack")}}
-
Traça de l'error. Heretat de {{jsxref("Error")}}.
-
- -

Mètodes

- -

Tot i que l'objecte prototip {{jsxref("SyntaxError")}} no conté cap mètode per si mateix, instàncies de{{jsxref("SyntaxError")}} heretes alguns mètodes a través de la cadena prototip.

- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES3')}}{{Spec2('ES3')}}Definició inicial
{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}{{Spec2('ES5.1')}}Definit com a NativeError.prototype.
{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ES6')}}Definit com a NativeError.prototype.
- -

Compatibilitat amb navegadors

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Error.prototype")}}
    • -
  • {{jsxref("Function.prototype")}}
    • -
diff --git a/files/ca/web/javascript/referencia/objectes_globals/undefined/index.html b/files/ca/web/javascript/referencia/objectes_globals/undefined/index.html deleted file mode 100644 index 3dd30fbefe..0000000000 --- a/files/ca/web/javascript/referencia/objectes_globals/undefined/index.html +++ /dev/null @@ -1,174 +0,0 @@ ---- -title: undefined -slug: Web/JavaScript/Referencia/Objectes_globals/undefined -translation_of: Web/JavaScript/Reference/Global_Objects/undefined ---- -
-
-
{{jsSidebar("Objects")}}
-
-
- -

Resum

- -

El valor de la propietat global undefined representa el valor undefined. És un dels {{Glossary("Primitive", "tipus primitius")}} de JavaScript.

- -

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

- -

Sintaxi

- -
undefined
- -

Descripció

- -

undefined és una propietat de l'objecte global, és a dir, és una variable dins l'àmbit global.

- -

Als navegadors moderns (JavaScript 1.8.5 / Firefox 4+), undefined és una propietat no configurable i que no pot ser escrita, tal com denota la especificació ECMAScript 5. Encara que no sigui el cas, és convenient evitar sobreescriure el seu valor.

- -

Una variable a la que no s'ha assignat cap valor  és de tipus undefined. Un mètode o sentència retornarà undefined si la variable que s'evalua no te assignat cap valor. Una funció retornarà undefined si no es {{jsxref("Statements/return", "retorna")}} un valor explícitament.

- -

Degut a que undefined no és una {{jsxref("Reserved_Words", "paraula reservada")}} es pot emprar com a identificador (nom de variable) a qualsvol àmbit que no sigui el global.

- -
// mostra "foo string"
-(function(){ var undefined = 'foo'; console.log(undefined, typeof undefined); })();
-
-// mostra "foo string"
-(function(undefined){ console.log(undefined, typeof undefined); })('foo');
-
- -

Exemples

- -

Igualtat estricta i undefined

- -

Es pot emprar undefined en combinació amb els operadors de igualtat i no-igualtat per determinar si una variable té assignat un valor.

- -
var x;
-if (x === undefined) {
-   // sentències que s'executaran
-}
-else {
-   // sentències que no s'executaran
-}
-
- -
Nota: En aquest cas s'ha de fer servir l'operador d'igualtat estricta (===) en comptes de l'operador standard d'igualtat (==) ja que x == undefined també comprova si x és null, mentre que l'operador d'igualtat estricta no ho fa. null no és equivalent a undefined. Per més detalls vegeu {{jsxref("Operators/Comparison_Operators", "comparació d'operadors")}}.
- -

L'operador Typeof i undefined

- -

De forma alternativa, es pot emprar {{jsxref("Operators/typeof", "typeof")}}:

- -
var x;
-if (typeof x === 'undefined') {
-   // sentències que s'executaran
-}
-
- -

Una raó per utilitzar {{jsxref("Operators/typeof", "typeof")}} és que no provoca un error si la variable no ha estat definida prèviament.

- -
// x no ha estat prèviament definida
-if (typeof x === 'undefined') { // s'evalua a true sense errors
-   // sentències que s'executaran
-}
-
-if(x === undefined){ // llença ReferenceError
-
-}
-
- -

De totes formes és recomanable evitar l'ús d'aquest tipus de tècniques. JavaScript és un llenguatge amb àmbits estàtics, de manera que per saber si una variable ha estat definida prèviament n'hi ha prou amb comprovar si ha estat definida dins l'àmbit immediat. L'única excepció és l'àmbit global. Aquest, però, està vinculat a l'objecte global, per la qual cosa comprovar si una variable existeix dins l'àmbit global és equivalent a comprovar l'existència d'una propietat dins l'objecte global (emprant l'operador {{jsxref("Operators/in", "in")}}, per exemple).

- -

L'operador Void i undefined

- -

L'operador {{jsxref("Operators/void", "void")}} és una altra alternativa.

- -
var x;
-if (x === void 0) {
-   // sentències que s'executaran
-}
-
-// y no ha estat definida prèviament
-if (y === void 0) {
-   // llença ReferenceError (en oposició a `typeof`)
-}
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
ECMAScript 1st Edition.StandardDefinició inicial. Impementat a JavaScript 1.3
{{SpecName('ES5.1', '#sec-15.1.1.3', 'undefined')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-undefined', 'undefined')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -

 

diff --git a/files/ca/web/javascript/referencia/operadors/arithmetic_operators/index.html b/files/ca/web/javascript/referencia/operadors/arithmetic_operators/index.html deleted file mode 100644 index 9b6816c2d6..0000000000 --- a/files/ca/web/javascript/referencia/operadors/arithmetic_operators/index.html +++ /dev/null @@ -1,287 +0,0 @@ ---- -title: Operadors aritmètics -slug: Web/JavaScript/Referencia/Operadors/Arithmetic_Operators -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: Web/JavaScript/Reference/Operators/Arithmetic_Operators ---- -
-
{{jsSidebar("Operators")}}
-
- -

Resum

- -

Els operadors aritmètics prenen valors numèrics (poden ser tant literals com ser variables) com a operands seus i retornen un valor numèric únic. Els operadors aritmètics estàndards són la suma (+), la resta (-), la multiplicació (*), i la divisió (/).

- -

Suma (+)

- -

L'operador Suma produeix la suma dels operands numèrics o de la concatenació de cadenes.

- -

Sintaxi

- -
Operador: x + y
-
- -

Exemples

- -
// Nombre + Nombre -> suma
-1 + 2 // 3
-
-// Booleà + Nombre -> suma
-true + 1 // 2
-
-// Booleà + Booleà -> suma
-false + false // 0
-
-// Nombre + String -> concatenació
-5 + "foo" // "5foo"
-
-// String + Booleà -> concatenació
-"foo" + false // "foofalse"
-
-// String + String -> concatenació
-"foo" + "bar" // "foobar"
-
- -

Resta (-)

- -

L'operador resta produeix la resta de dos operands, produint la seva diferència.

- -

Sintaxi

- -
Operador: x - y
-
- -

Exemples

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

Divisió (/)

- -

L'operador divisió produeix el quocient dels seus operands on el operand de l'esquerra és el dividend, i l'operand de la dreta és el divisor.

- -

Sintaxi

- -
Operador: x / y
-
- -

Exemples

- -
1 / 2      // retorna 0.5 a JavaScript
-1 / 2      // retorna 0 in Java
-// (cap dels nombres és explícitament n nombre de coma flotant)
-
-1.0 / 2.0  // retorna 0.5 a JavaScript i Java
-
-2.0 / 0    // retorna Infinity a JavaScript
-2.0 / 0.0  // també retorna Infinity
-2.0 / -0.0 // retorna -Infinity a JavaScript
- -

Multiplicació (*)

- -

L'operador multiplicació produeix el producte dels operands.

- -

Sintaxi

- -
Operador: x * y
-
- -

Exemples

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

Mòdul (%)

- -

L'operador mòdul retorna el mòdul del primer operand amb el segon, això és, var1 modulo var2 en la sentència prèvia, on var1 i var2 són variables. La funció mòdul és la resta entera de dividir var1 per var2. Hi ha una proposta per a implementar un operador mòdul real en una futura versió de l'ECMAScript.

- -

Sintaxi

- -
Operador: var1 % var2
-
- -

Exemples

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

Increment (++)

- -

L'operador increment incrementa (afegeix un) al seu operand i retorna un valor.

- -
    -
  • Emprat com a sufix, és a dir, amb l'operador després de l'operand (per exemple:  x++), retorna el valor de l'operand abans d'incrementar-lo.
    • -
  • Emprat com a prefix, és a dir, amb l'operador precedint l'operand (per exemple: ++x), retorna el valor de l'operand després d'incrementar-lo.
    • -
- -

Sintaxi

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

Exemples

- -
// Sufix
-var x = 3;
-y = x++; // y = 3, x = 4
-
-// Prefix
-var a = 2;
-b = ++a; // a = 3, b = 3
-
- -

Decrement (--)

- -

L'operador decrement decrementa (resta un) al seu operand i retorna el seu valor.

- -
    -
  • Emprat com a sufix, és a dir, amb l'operador després de l'operand (per exemple:  x--), retorna el valor de l'operand abans de decrementar-lo.
    • -
  • Emprat com a prefix, és a dir, amb l'operador precedint l'operand (per exemple: --x), retorna el valor de l'operand després de decrementar-lo.
    • -
- -

Sintaxi

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

Exemples

- -
// Sufix
-var x = 3;
-y = x--; // y = 3, x = 2
-
-// Prefix
-var a = 2;
-b = --a; // a = 1, b = 1
-
- -

Negació unària (-)

- -

L'operador de negació unària precedeix el seu operand i el nega.

- -

Sintaxi

- -
Operator: -x
-
- -

Exemples

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

Operador unari de conversió a nombre (+)

- -

L'operador unari de conversió a nombre precedeix el seu operand i intenta convertir-lo en un nombre si no ho és ja. Tot i que l'operand de negació unària també pot convertir no-nombres, l'operador de conversió és el mètode més ràpid i recomanat per a convertir quelcom a un nombre ja que no realitza cap altra operació al nombre. Pot convertir cadenes de caràcters representant sencers i nombres en coma flotant, així com els valors true, false i null. Quant a nombres sencers, tant la notació decimal com la hexadecimal (denotada amb el prefixe "0x") estàn suportades. Els nombres negatius també estàn suportats (tot i que no per a hexadecimals). Si no pot interpretar un valor determinat l'operador retornarà NaN.

- -

Sintaxi

- -
Operador: +x
-
- -

Exemples

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

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
ECMAScript 1st Edition.StandardInitial definition.
{{SpecName('ES5.1', '#sec-11.6', 'Additive operators')}}
- {{SpecName('ES5.1', '#sec-11.5', 'Multiplicative operators')}}
- {{SpecName('ES5.1', '#sec-11.3', 'Postfix expressions')}}
- {{SpecName('ES5.1', '#sec-11.4', 'Unary operators')}}		{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-additive-operators', 'Additive operators')}}
- {{SpecName('ES6', '#sec-multiplicative-operators', 'Multiplicative operators')}}
- {{SpecName('ES6', '#sec-postfix-expressions', 'Postfix expressions')}}
- {{SpecName('ES6', '#sec-unary-operators', 'Unary operators')}}		{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -

Vegeu també

- - diff --git a/files/ca/web/javascript/referencia/operadors/bitwise_operators/index.html b/files/ca/web/javascript/referencia/operadors/bitwise_operators/index.html deleted file mode 100644 index f7fbae7b47..0000000000 --- a/files/ca/web/javascript/referencia/operadors/bitwise_operators/index.html +++ /dev/null @@ -1,719 +0,0 @@ ---- -title: Operadors de bits -slug: Web/JavaScript/Referencia/Operadors/Bitwise_Operators -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: Web/JavaScript/Reference/Operators/Bitwise_Operators ---- -
{{jsSidebar("Operators")}}
- -

Resum

- -

Els operadors de bits tracten els seus operands com una seqüència de 32 bits (uns i zeros), en comptes de operar-los com a nombres decimals, hexadecimals o octals. Per exemple, la representació binària del és nombre decimal nou (9) 1001. Els operadors de bits treballen amb aquesta representació binària però el resultat que retorna l'operació sempre és un nombre standard de JavaScript.

- -

La taula que trobareu a continuació és un resum dels operadors de bits que es poden trobar a JavaScript:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OperadorÚsDescripció
AND binaria & b -

Retorna un 1 a les posicions on el bit de a i el bit de b són 1 i un 0 en totes les altres.

-
OR binaria | b -

Retorna un 1 a les posicions on al menys la posició de a o la de b són 1.

-
XOR binaria ^ b -

Retorna un 1 a cada posició on a és 1 i b és 0 o bé a és 0 i b és 1.

-
NOT binari~ aInverteix els bits de l'operand donat.
Desplaçament a l'esquerraa << bDesplaça els bits de a b posicions a l'esquerra, tot omplint amb zeros les primeres b posicions.
Desplaçament a la dreta conservant el signea >> bDesplaça els bits de a b posicions a la dreta, descartant els bits desplaçats fora.
Desplaçament a la dreta omplint amb zerosa >>> bDesplaça els bits de a b posicions a la dreta, descartant els bits desplaçats fora. Els primers b bits s'omplen amb zeros.
- -

Enters de 32 bits amb signe

- -

Els operands de totes les operacions de bits es converteixen a enters amb signe de 32 bits utilitzant el format de complement a 2. Això vol dir que la versió negativa d'un nombre (per exemple 5 vs -5) és exactament la mateixa representació binària però amb els bits invertits (operació de bits NOT del nombre, també coneguda com a complement del nombre) més 1. Per exemple, seguidament es mostra la representació binària de 314:

- -
00000000000000000000000100111010
-
- -

I a continuació ~314, és a dir, el complement de 314:

- -
11111111111111111111111011000101
-
- -

Finalment es mostra -314, és a dir, el complement a dos de 314:

- -
11111111111111111111111011000110
-
- -

El complement a dos garanteix que el bit de més a l'esquerra sempre serà un 0 quan el nombre és positiu i un 1 quan el nombre sigui negatiu. Aquest bit és doncs anomentat el bit de signe degut a això.

- -

El nombre 0 es representa com a l'enter composat íntegrament de zeros a tots els seus bits.

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

El nombre -1 és l'enter composats completament per 1s a tots els seus bits.

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

El nombre -2147483648 (representació hexadecimal: -0x80000000) és l'enter composat per zeros a tots els seus bits a excepciò del bit de més a l'esquerra, que és un 1.

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

El nombre 2147483647 (representació hexadecimal: 0x7fffffff) és el sencer composat per 1 a tots els seus bits a excepció del de més a l'esquerra.

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

Els nombres -2147483648 i 2147483647 són els enters més petit i més gran respectivament que poden ser representats mitjançant un nombre de 32 bits amb signe.

- -

Operadors lògics de bits

- -

Conceptualment els operadors lògics de bits funcionen de la següent forma:

- -
    -
  • Es converteixen els operans a enters de 32 bits amb signe, expressats com una sèrie de bits (zeros i uns).
    • -
  • Cada bit del primer operand s'emparella amb el corresponent bit del segon operand: el primer bit amb el primer bit, el segon amb el segon, etcètera.
    • -
  • L'operador s'aplica per cada parella de bits, tot construint el resultat bit a bit.
    • -
- -

& (AND binari)

- -

Realitza l'operació AND a cada parella de bits. a AND b esdevindrà 1 només si ambdós a i b són 1. La taula de la veritat per a l'operació  AND és la següent:

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

Realitzar l'operació AND binària de qualsevol nombre amb el zero retornarà zero. Realitzar l'operació AND binària de qualsevol nombre amb -1 retornarà el mateix nombre.

- -

| (OR binari)

- -

Realitza la operació OR a cada parella de bits. a OR b retornarà 1 si qualsevol de a o b és 1. La taula de la veritat per a l'operació OR és:

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

Realitzar l'operació OR binària de qualsevol nombre x amb 0 retornarà x. Realitzar l'operació OR binària de qualsevol nombre x amb -1 retornarà ~x

- -

^ (XOR binari)

- -

Realitza la operació XOR a cada parella de bits. a XOR b retorna 1 si a i b són diferents. La taula de la veritat per a l'operació XOR és la següent:

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

Realitzar l'operació XOR binària de qualsevol nombre x amb 0 retornarà x. Realitzar l'operació OR binària de qualsevol nombre x amb -1 retornarà ~x.

- -

~ (NOT binari)

- -

Realitza una operació NOT a cada bit. NOT a retorna el valor invers (també conegut com el complement a 1) de a. La taula de la veritat per a la operació NOT és:

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

Realitzar la operació NOT binària a un nombre x qualsevol retorna -(x + 1). Per exemple, ~5 resulta en -6.

- -

Exemple amb indexOf:

- -
var str = 'rawr';
-var searchFor = 'a';
-
-// fora alternativa equivalent a if (-1*str.indexOf('a') <= -1)
-if (~str.indexOf(searchFor)) {
-  // searchFor és dins l'string
-} else {
-  // searchFor no està dins l'string
-}
-
-// valors retornats per (~str.indexOf(searchFor))
-// r == -1
-// a == -2
-// w == -3
-
- -

Operadors binaris de desplaçament

- -

Els operadors binaris de desplaçament accepten dos operands: el primer és el valor que serà transformat a enter de 32 bits i al que se li aplicarà el desplaçament. El segon determina el nombre de posicions que es desplaçarà cada bit. La direcció en la que els bits es desplaçaran es determina per l'operador usat.

- -

Els operadors de desplaçament converteixen els seus operands a enters de 32 bits en ordre big-endian i retornen un valor amb el mateix tipus que l'operand de l'esquerra. L'operand de la dreta hauria de ser menor de 32, però de no ser així només s'utilitzen els primers 5 bits.

- -

<< (Desplaçament a l'esquerra)

- -

Aquest operador desplaça el primer operand un nombre específic de bits cap a l'esquerra. Els bits de l'esquerra sobrants són descartats. Per a omplir les primeres posicions de la dreta s'utilitzen zeros.

- -

Exemple: 9 << 2 resulta en 36:

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

Desplaçar a l'esquerra qualsevol nombre x y bits resulta en x * 2^y.

- -

>> (Desplaçament a la dreta preservant el signe)

- -

Aquest operador desplaça el primer operand un nombre específic de bits a la dreta. Els bits sobrants es descarten. Els bits de l'esquerra s'inicialitzen amb el valor inicial del primer bit de l'esquerra. Degut a que el bit de més a l'esquerra tindrà el mateix valor que el bit de més a l'esquerra abans de realitzar el desplaçament, el bit de signe no canvia. És degut a aquesta propietat que es diu que aquest operand preserva el signe.

- -

Per exemple, 9 >> 2 resulta en 2:

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

De la mateixa manera, -9 >> 2 resulta en -3, ja que el signe es preserva:

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

>>> (Desplaçament a la dreta omplint amb zeros)

- -

Aquest operador desplaça el primer operand un nombre específic de bits cap a la dreta. Els bits sobrants degut al desplaçament són descartats. Els bits de l'esquerra són omplerts utilitzant zeros. Com que el bit de signe sempre acaba sent un zero el resultat sempre és no negatiu.

- -

Per a nombres no negatius, els operadors de desplaçament a la dreta preservant el signe i omplint amb zeros retornen el mateix resultat. Per exemple, 9 >>> 2 resulta en 2, tal com 9 >> 2:

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

El resultat varia, però, per a nombres negatius. Per exemple, -9 >>> 2 resulta en 1073741821, el qual es diferent de -9 >> 2 (que retorna -3):

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

Exemples

- -

Exemple: Marques i màscares de bits

- -

Els operadors lògics de bits s'empren tot sovint per a crear, manipular i llegir seqüències de marques, les quals realitzen uns funció similar a les variables booleanes. El seu avantatge davant les variables booleanes és que les seqüències de marques utilitzen molta menys memòria (per un factor de 32).

- -

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

- -

Suposem 4 marques:

- -
    -
  • Marca A: tenim un problema de formigues
    • -
  • Marca B: tenim un ratpenat
    • -
  • Marca C: tenim un gat
    • -
  • Marca D: tenim un ànec
    • -
- -

Aquestes marques són representades per una seqüència de bits: DCBA. Quan una marca està activada, té un valor de 1. Quan una marca no està activa rep un valor de 0. Suposem que una variable anomenada flags (marques en anglès) té el valor binari 0101:

- -
var flags = 5;   // 0101 en binari
-
- -

Aquest valor indica:

- -
    -
  • La marca A està activa, és a dir, és certa (tenim un problema de formigues)
    • -
  • La marca B és falsa (no tenim un murisec)
    • -
  • La marca C és certa (tenim un gat)
    • -
  • La marca D és falsa (no tenim un ànec)
    • -
- -

Com que les operacions be bits utilitzen nombres de 32 bits, 0101 és en realitat 00000000000000000000000000000101, però els zeros a l'esquerra es poden obviar ja que no contenen informació útil.

- -

Una màscara de bits és una seqüència que pot manipular i/o llegir marques. És molt comú definir màscares "primitives" per a cada marca:

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

Es fàcil crear noves màscares mitjançant operacions de bits lògiques sobre les màscares primitives. Per exemple, la màscara de bits 1011 es pot crear mitjançant operacions OR sobre FLAG_A, FLAG_B i FLAG_D:

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

Els valors individuals d'una marca es poden obtindre mitjançant una operació AND de la seqüència de marques amb la màscara primitiva corresponent. La màscara de bits descarta els bits de les marques que no s'escauen. Per exemple, la màscara de bits 0100 es pot emprar per veure si la marca C està activa:

- -
// si tenim un gat...
-if (flags & FLAG_C) { // 0101 & 0100 => 0100 => true
-   // ... fer coses
-}
-
- -

Una màscara de bits amb múltiples marques activades funciona com un "or". Per exemple els següents dos blocs de codi són equivalents:

- -
// si tenim un ratpenat o un gat...
-// (0101 & 0010) || (0101 & 0100) => 0000 || 0100 => true
-if ((flags & FLAG_B) || (flags & FLAG_C)) {
-   // ... fer coses
-}
-
- -
// si tenim un ratpenat o un gat...
-var mask = FLAG_B | FLAG_C; // 0010 | 0100 => 0110
-if (flags & mask) { // 0101 & 0110 => 0100 => true
-   // ... fer coses
-}
-
- -

Les marques es poden activar mitjançant una operació OR amb la màscara, on cada bit amb el valor 1 activarà la marca corresponent si no està ja activada. Per exemple, la màscara de bits 1100 pot ser emprada per a activar les marques C i D:

- -
// si, tenim un gat i un ànec
-var mask = FLAG_C | FLAG_D; // 0100 | 1000 => 1100
-flags |= mask;   // 0101 | 1100 => 1101
-
- -

Les marques es poden desactivar mitjançant una operació AND amb una màscara de bits, on cada bit amb el valor de zero desactivarà la marca corresponent si no està ja desactivada. Aquestes màscares poden generar-se fàcilment mitjançant una operació NOT sobre la màscara primitiva adient. Per exemple, la màscara 1010 pot ser emprada per a desactivar les marques A i C:

- -
// no, no tenim un problema amb formigues ni tenim un gat
-var mask = ~(FLAG_A | FLAG_C); // ~0101 => 1010
-flags &= mask;   // 1101 & 1010 => 1000
-
- -

També es podría haver creat la màscara amb ~FLAG_A & ~FLAG_C (Llei de De Morgan):

- -
// no, no tenim un problema amb formigues ni tenim un gat
-var mask = ~FLAG_A & ~FLAG_C;
-flags &= mask;   // 1101 & 1010 => 1000
-
- -

Es pot invertir una màscara (entenem per invertir activar-la si està desactivada i desactivar-la si està activada. És a dir, invertir el seu valor) mitjançant una operació XOR amb una màscara de bits, on cada bit amb el valor 1 invertirà el valor de la marca corresponent. Per exemple, la màscara de bits 0110 pot ser emprada per invertir les marques B i C:

- -
// Si no teniem un ratpenat, ara en tenim un
-// i si en teniem un, adéu ratpenat
-// El mateix amb els gats
-var mask = FLAG_B | FLAG_C;
-flags = flags ^ mask;   // 1100 ^ 0110 => 1010
-
- -

Finalment, les marques poden ser invertides mitjançant l'operador NOT:

- -
// entrant a l'univers paral·lel
-flags = ~flags;    // ~1010 => 0101
-
- -

Xuletes per conversions

- -

Converteix un String binari a un Number decimal:

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

Converteix un Number decimal en un String binari:

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

Automatització de la creació de màscares

- -

El procés de creació de màscares per a valors Booleans pot ser automatitzat:

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

Algorisme invers: un array de booleans a partir d'una màscara

- -

El codi següent crea un Array de Booleans a partir d'una màscara:

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

Ambdós algorismes poden ser testejats a l'hora...

- -
var nTest = 19; // la nostra màscara personal
-var nResult = createMask.apply(this, arrayFromMask(nTest));
-
-alert(nResult); // 19
-
- -

Només amb finalitat didàctica (ja que disposem del mètode Number.toString(2)), es mostra com és posible modficiar l'algorisme arrayFromMask per a crear un String que contingui la representació d'un Number en comptes d'un Array de Booleans:

- -
function createBinaryString (nMask) {
-  // nMask ha d'estar entre -2147483648 i 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

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentari
ECMAScript 1a Edició.StandardDefinició inicial
{{SpecName('ES5.1', '#sec-11.4.8', 'Bitwise NOT operator')}}
- {{SpecName('ES5.1', '#sec-11.7', 'Bitwise shift operators')}}
- {{SpecName('ES5.1', '#sec-11.10', 'Binary bitwise operators')}}		{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-bitwise-not-operator', 'Bitwise NOT operator')}}
- {{SpecName('ES6', '#sec-bitwise-shift-operators', 'Bitwise shift operators')}}
- {{SpecName('ES6', '#sec-binary-bitwise-operators', 'Binary bitwise operators')}}		{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterístiquesChromeFirefox (Gecko)Internet ExplorerOperaSafari
Bitwise NOT (~){{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Bitwise AND (&){{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Bitwise OR (|){{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Bitwise XOR (^){{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Left shift (<<){{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Right shift (>>){{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Unsigned right shift (>>>){{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Bitwise NOT (~){{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Bitwise AND (&){{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Bitwise OR (|){{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Bitwise XOR (^){{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Left shift (<<){{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Right shift (>>){{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Unsigned right shift (>>>){{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -

Vegeu també

- - diff --git a/files/ca/web/javascript/referencia/operadors/conditional_operator/index.html b/files/ca/web/javascript/referencia/operadors/conditional_operator/index.html deleted file mode 100644 index 15265c62b3..0000000000 --- a/files/ca/web/javascript/referencia/operadors/conditional_operator/index.html +++ /dev/null @@ -1,170 +0,0 @@ ---- -title: Operador Condicional (ternari) -slug: Web/JavaScript/Referencia/Operadors/Conditional_Operator -translation_of: Web/JavaScript/Reference/Operators/Conditional_Operator ---- -
-
{{jsSidebar("Operators")}}
-
- -

Resum

- -

L'operador condicional (ternari) és l'únic operador de JavaScript que opera amb tres operands. Aquest operador és freqüentment usat com una simplificació de la sentència if.

- -

Sintaxi

- -
condition ? expr1 : expr2
- -

Paràmetres

- -
-
condition
-
Una expressió que avalua true o false.
-
- -
-
expr1, expr2
-
Expressions amb valors de qualsevol tipus.
-
- -

Descripció

- -

Si condition és true, l'operador retorna el valor de expr1; de ser el contrari, retorna el valor de expr2. Per exemple, per mostrar diferents missatges basats en el valor de la variable isMember, es podria fer servir aquesta sentència:

- -
"The fee is " + (isMember ? "$2.00" : "$10.00")
-
- -

També es pot assignar variables depenent del resultat ternari:

- -
var elvisLives = Math.PI > 4 ? "Yep" : "Nope";
- -

És possible realitzar avaluacions ternàries múltiples (nota: L'operador condicional operator s'associa per la dreta):

- -
var firstCheck = false,
-    secondCheck = false,
-    access = firstCheck ? "Access denied" : secondCheck ? "Access denied" : "Access granted";
-
-console.log( access ); // logs "Access granted"
- -

També es pot usar avaluacions ternàries en espais lliures per tal de fer diferents operacions:

- -
var stop = false, age = 16;
-
-age > 18 ? location.assign("continue.html") : stop = true;
-
- -

També es pot fer més d'una sola operació per cas, separant-les amb una coma:

- -
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!")
-);
-
- -

I per últim, també es pot fer més d'una operació durant l'assignació d'un valor. En aquest cas, el últim valor del parèntesis serparat per una coma serà el valor assignat.

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

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
1a edició deECMAScript.EstàndardDefinició inicial. Implementat en JavaScript 1.0
{{SpecName('ES5.1', '#sec-11.12', 'The conditional operator')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-conditional-operator', 'Conditional Operator')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- - diff --git a/files/ca/web/javascript/referencia/operadors/function/index.html b/files/ca/web/javascript/referencia/operadors/function/index.html deleted file mode 100644 index 0908f591b6..0000000000 --- a/files/ca/web/javascript/referencia/operadors/function/index.html +++ /dev/null @@ -1,146 +0,0 @@ ---- -title: function expression -slug: Web/JavaScript/Referencia/Operadors/function -translation_of: Web/JavaScript/Reference/Operators/function ---- -
{{jsSidebar("Operators")}}
- -

La paraula clau function es pot utilitzar per definir una funció dins d'una expressió.

- -

Sintaxi

- -
function [nom]([paràm1[, paràm2[, ..., paràmN]]]) {
-   sentències
-}
- -

Paràmetres

- -
-
nom
-
El nom de la funció. Es pot ometre, i en aquest cas la funció seria anònima. El nom és només local pel cos de la funció.
-
paràmN
-
El nom d'un argument que es passa a la funció.
-
sentències
-
Les sentències que constitueixen el cos de la funció.
-
- -

Descripció

- -

Una expressió d'una funció és molt semblant i té gairebé la mateixa sintaxi que una sentència d'una funció (function sentència d'una funció per més detalls). La principal diferència entre l'expressió d'una funció i una sentèndia d'una expressió és el nom de la functió, el qual es pot ometre en expressions de funcions per tal de crear funcions anònimes. Una expressió d'una funció es pot utilitzar com a un IIFE (Immediately Invoked Function Expression) que s'executa un cop s'ha definit. Vegeu també el capítol sobre funcions per més informació.

- -

Exemples

- -

L'exemple següent defineix una funció sense nom i l'assigna a x. La funció retorna el quadrat del seu argument:

- -
var x = function(y) {
-   return y * y;
-};
-
- -

Expressió d'una funció amb nom

- -

Si vols fer referència a la funció actual dins del cos de la funció, necessitaràs crear una expressió d'una funció amb nom. Aquest nom és llavors només local pel cos de la funció (àmbit). AIxò també evita utilitzar la propietat no estàndard arguments.callee.

- -
var math = {
-  'factorial': function factorial(n) {
-    if (n <= 1)
-      return 1;
-    return n * factorial(n - 1);
-  }
-};
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}}{{Spec2('ESDraft')}} 
{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}{{Spec2('ES6')}} 
{{SpecName('ES5.1', '#sec-13', 'Function definition')}}{{Spec2('ES5.1')}} 
{{SpecName('ES3', '#sec-13', 'Function definition')}}{{Spec2('ES3')}}Definició inicial. Implementat en JavaScript 1.5.
- -

Compatibilitat amb navegadors

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Functions_and_function_scope", "Functions and function scope")}}
    • -
  • {{jsxref("Function")}}
    • -
  • {{jsxref("Statements/function", "function statement")}}
    • -
  • {{jsxref("Statements/function*", "function* statement")}}
    • -
  • {{jsxref("Operators/function*", "function* expression")}}
    • -
  • {{jsxref("GeneratorFunction")}}
    • -
diff --git a/files/ca/web/javascript/referencia/operadors/grouping/index.html b/files/ca/web/javascript/referencia/operadors/grouping/index.html deleted file mode 100644 index 45e8566806..0000000000 --- a/files/ca/web/javascript/referencia/operadors/grouping/index.html +++ /dev/null @@ -1,128 +0,0 @@ ---- -title: Operador d'agrupament -slug: Web/JavaScript/Referencia/Operadors/Grouping -translation_of: Web/JavaScript/Reference/Operators/Grouping ---- -
-
{{jsSidebar("Operators")}}
-
- -

Resum

- -

L'operador d'agrupament ( ) controla la precedència de l'avaluació en expresions.

- -

Sintaxi

- -
 ( )
- -

Descripció

- -

L'operador agrupament consisteix en un parell de parèntesis que embolcallen una expressió o una sub-expressió per anular la precedència d'operadors normal de forma que expressions amb un nivell més baix de precedència poden ser avaluades abans d'una expressió amb més prioritat.

- -

Exemples

- -

Primer predomina la multiplicació i la divisió, després la suma i la resta per tal d'avaluar primer la suma.

- -
var a = 1;
-var b = 2;
-var c = 3;
-
-// default precedence
-a + b * c     // 7
-// evaluated by default like this
-a + (b * c)   // 7
-
-// now overriding precedence
-// addition before multiplication
-(a + b) * c   // 9
-
-// which is equivalent to
-a * c + b * c // 9
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
1a edició de ECMAScript.EstàndardDefinició inicial. Implementat en JavaScript 1.0
{{SpecName('ES5.1', '#sec-11.1.6', 'The Grouping Operator')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-grouping-operator', 'The Grouping Operator')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -

Vegeu també

- - diff --git a/files/ca/web/javascript/referencia/operadors/index.html b/files/ca/web/javascript/referencia/operadors/index.html deleted file mode 100644 index 4a70edc4fb..0000000000 --- a/files/ca/web/javascript/referencia/operadors/index.html +++ /dev/null @@ -1,282 +0,0 @@ ---- -title: Expressions and operators -slug: Web/JavaScript/Referencia/Operadors -tags: - - JavaScript - - NeedsTranslation - - Operators - - TopicStub -translation_of: Web/JavaScript/Reference/Operators ---- -
{{jsSidebar("Operators")}}
- -

Aquest capítol documenta totls els operadors, expressions i paraules clau del llenguatge JavaScript.

- -

Expressions i operadors per categoria

- -

Per a un llistat en order alfabetic vegeu el menú de l'esquerra.

- -

Expressions primàries

- -

Paraules clau bàsiques i expressions generals en JavaScript.

- -
-
{{jsxref("Operadors/this", "this")}}
-
La paraula clau this fa referència al contexte d'execució de la funció actual.
-
{{jsxref("Operadors/function", "function")}}
-
La paraula clau function defineix una expressió de funció.
-
{{experimental_inline()}} {{jsxref("Operadors/function*", "function*")}}
-
La paraula clau function* defineix una expressió de funció generadora.
-
{{experimental_inline()}} {{jsxref("Operadors/yield", "yield")}}
-
Pausa i resumeix una funció generadora.
-
{{experimental_inline()}} {{jsxref("Operadors/yield*", "yield*")}}
-
Delega a una altra funció generadora o objecte iterable.
-
{{jsxref("Global_Objects/Array", "[]")}}
-
Sintaxi d'inicialització o literal d'arrays.
-
{{jsxref("Operators/Object_initializer", "{}")}}
-
Sintaxi d'inicialitzador o literal d'objectes.
-
{{jsxref("Global_Objects/RegExp", "/ab+c/i")}}
-
Sintaxi de literals formats per expressions regulars.
-
{{experimental_inline()}} {{jsxref("Operadors/Array_comprehensions", "[for (x of y) x]")}}
-
Comprensió d'arrays.
-
{{experimental_inline()}} {{jsxref("Operadors/Generator_comprehensions", "(for (x of y) y)")}}
-
Comprensió de generators.
-
{{jsxref("Operadors/Grouping", "( )")}}
-
Operador d'agrupament.
-
- -

Expressions de banda esquerra

- -

Els valors de l'esquerra són la destinació d'una assignació.

- -
-
{{jsxref("Operadors/Property_accessors", "Property accessors", "", 1)}}
-
Els operadors membres proporcionen accés a una propietat o mètode d'un objecte
- (object.property i object["property"]).
-
{{jsxref("Operadors/new", "new")}}
-
L'operador new crea una instància d'un constructor.
-
{{experimental_inline()}} {{jsxref("Operadors/super", "super")}}
-
La paraula clau super crida el constructor de l'objecte pare.
-
{{experimental_inline()}} {{jsxref("Operadors/Spread_operator", "...obj")}}
-
L'operador d'extensió permet que una expressió s'expandeixi en llocs on s'esperen mútiples argurments (per a crides de funcions) o elements (per a literals d'arrays).
-
- -

Increment i decrement

- -

Operadors de increment o decrement en forma de prefix/sufix.

- -
-
{{jsxref("Operadors/Arithmetic_Operators", "A++", "#Increment")}}
-
Operador sufix d'increment.
-
{{jsxref("Operadors/Arithmetic_Operators", "A--", "#Decrement")}}
-
Operador sufix de decrement.
-
{{jsxref("Operadors/Arithmetic_Operators", "++A", "#Increment")}}
-
Operador prefix d'increment.
-
{{jsxref("Operadors/Arithmetic_Operators", "--A", "#Decrement")}}
-
Operador prefix de decrement.
-
- -

Operadors unaris

- -

Un operador unari és un operador que només accepta un operand.

- -
-
{{jsxref("Operadors/delete", "delete")}}
-
L'operador delete esborra una propietat d'un objecte.
-
{{jsxref("Operadors/void", "void")}}
-
L'operador void evalua una expressió i descarta el que retorni.
-
{{jsxref("Operadors/typeof", "typeof")}}
-
L'operador typeof determina el tipus d'un objecte donat.
-
{{jsxref("Operadors/Arithmetic_Operators", "+", "#Unary_plus")}}
-
L'operador unari més converteix l'operand donat al tipus Number.
-
{{jsxref("Operadors/Arithmetic_Operators", "-", "#Unary_negation")}}
-
L'operador unari negació converteix l'operand donat al tipus Number i llavors el nega.
-
{{jsxref("Operadors/Bitwise_Operators", "~", "#Bitwise_NOT")}}
-
Operador binari NOT.
-
{{jsxref("Operadors/Logical_Operators", "!", "#Logical_NOT")}}
-
Operador lògic NOT.
-
- -

Operadors aritmètics

- -

Els operadors aritmètics accepten valors numèrics (ja siguin literals o variables) com a operands i retornen un únic valor numèric.

- -
-
{{jsxref("Operadors/Arithmetic_Operators", "+", "#Addition")}}
-
Operador de suma.
-
{{jsxref("Operadors/Arithmetic_Operators", "-", "#Subtraction")}}
-
Operador de resta.
-
{{jsxref("Operadors/Arithmetic_Operators", "/", "#Division")}}
-
Operador de divisió.
-
{{jsxref("Operadors/Arithmetic_Operators", "*", "#Multiplication")}}
-
Operador de multiplicació.
-
{{jsxref("Operadors/Arithmetic_Operators", "%", "#Remainder")}}
-
Operador de mòdul.
-
- -

Operadors relacionals

- -

Els operadors relacionals compara els operands donats i retorna un valor de tipus Boolean value basat en si la relació és certa o no.

- -
-
{{jsxref("Operadors/in", "in")}}
-
L'operador in determina si un objecte té la propietat donada.
-
{{jsxref("Operadors/instanceof", "instanceof")}}
-
L'operador instanceof determina si un objecte és una instància d'un altre objecte.
-
{{jsxref("Operadors/Comparison_Operators", "<", "#Less_than_operator")}}
-
Operador menor que.
-
{{jsxref("Operadors/Comparison_Operators", ">", "#Greater_than_operator")}}
-
Operador major que.
-
{{jsxref("Operadors/Comparison_Operators", "<=", "#Less_than_or_equal_operator")}}
-
Operador menor o igual que.
-
{{jsxref("Operadors/Comparison_Operators", ">=", "#Greater_than_or_equal_operator")}}
-
Operador major o igual que.
-
- -

Operadors d'igualtat

- -

El resultat d'evaluar un operador d'igualtat és sempre de tipus Boolean i el resultat es basa en si la comparació és certa.

- -
-
{{jsxref("Operadors/Comparison_Operators", "==", "#Equality")}}
-
Operador d'igulatat.
-
{{jsxref("Operadors/Comparison_Operators", "!=", "#Inequality")}}
-
Operador de no igualtat.
-
{{jsxref("Operadors/Comparison_Operators", "===", "#Identity")}}
-
Operador identitat.
-
{{jsxref("Operadors/Comparison_Operators", "!==", "#Nonidentity")}}
-
Operador de no identitat.
-
- -

Operadors de desplaçament de bits

- -

Operacions que desplacen tots els bits d'un operand.

- -
-
{{jsxref("Operadors/Bitwise_Operators", "<<", "#Left_shift")}}
-
Operador de desplaçament de bits a l'esquerra.
-
{{jsxref("Operadors/Bitwise_Operators", ">>", "#Right_shift")}}
-
Operador de desplaçament de bits a la dreta.
-
{{jsxref("Operadors/Bitwise_Operators", ">>>", "#Unsigned_right_shift")}}
-
Operador de desplaçament a la dreta sense signe.
-
- -

Operadors binaris

- -

Els operadors binaris tracten els seus operands com un conjunt de 32 bits (uns i zeros) i retornen valors numèrics standards de JavaScript.

- -
-
{{jsxref("Operadors/Bitwise_Operators", "&", "#Bitwise_AND")}}
-
AND binari.
-
{{jsxref("Operadors/Bitwise_Operators", "|", "#Bitwise_OR")}}
-
OR binari.
-
{{jsxref("Operadors/Bitwise_Operators", "^", "#Bitwise_XOR")}}
-
XOR binari.
-
- -

Operadors lògics

- -

Els operadors lògics típicament s'utilitzen amb valors booleans (és a dir, logics) i retornen un valor booleà.

- -
-
{{jsxref("Operadors/Logical_Operators", "&&", "#Logical_AND")}}
-
AND lògic.
-
{{jsxref("Operadors/Logical_Operators", "||", "#Logical_OR")}}
-
OR lògic.
-
- -

Operador condicional (ternari)

- -
-
{{jsxref("Operadors/Conditional_Operator", "(condition ? ifTrue : ifFalse)")}}
-
-

L'operador condicional retorna un dels dos valors basat en l'evaluació lògica de la condició.

-
-
- -

Operadors d'assignació

- -

Els operadors d'assignació asignen un valor a l'operand de l'esquerra basant-se en l'evaluació de l'operand de la dreta.

- -
-
{{jsxref("Operadors/Assignment_Operators", "=", "#Assignment")}}
-
Operador d'assignació.
-
{{jsxref("Operadors/Assignment_Operators", "*=", "#Multiplication_assignment")}}
-
Assignació de la multiplicació.
-
{{jsxref("Operadors/Assignment_Operators", "/=", "#Division_assignment")}}
-
Assignació de la divisó.
-
{{jsxref("Operadors/Assignment_Operators", "%=", "#Remainder_assignment")}}
-
Assignació del mòdul.
-
{{jsxref("Operadors/Assignment_Operators", "+=", "#Addition_assignment")}}
-
Assignació de la suma.
-
{{jsxref("Operadors/Assignment_Operators", "-=", "#Subtraction_assignment")}}
-
Assignació de la resta.
-
{{jsxref("Operadors/Assignment_Operators", "<<=", "#Left_shift_assignment")}}
-
Assignació del desplaçament a l'esquerra.
-
{{jsxref("Operadors/Assignment_Operators", ">>=", "#Right_shift_assignment")}}
-
Assignació del desplaçament a la dreta.
-
{{jsxref("Operadors/Assignment_Operators", ">>>=", "#Unsigned_right_shift_assignment")}}
-
Assignació del desplaçament a la dreta sense signe.
-
{{jsxref("Operadors/Assignment_Operators", "&=", "#Bitwise_AND_assignment")}}
-
Assignació de l'AND binari.
-
{{jsxref("Operadors/Assignment_Operators", "^=", "#Bitwise_XOR_assignment")}}
-
Assignació del XOR binari.
-
{{jsxref("Operadors/Assignment_Operators", "|=", "#Bitwise_OR_assignment")}}
-
Assignació de l'OR binari.
-
{{experimental_inline()}} {{jsxref("Operadors/Destructuring_assignment", "[a, b] = [1, 2]")}}
- {{experimental_inline()}} {{jsxref("Operadors/Destructuring_assignment", "{a, b} = {a:1, b:2}")}}
-
-

L'assignació de desestructuració permet assignar les propietats d'un array o objecte a variables utilitzant una sintaxi que recorda la de literals d'arrays o objectes.

-
-
- -

Operador coma

- -
-
{{jsxref("Operadors/Comma_Operator", ",")}}
-
L'operador coma permet que múltiples expressions siguin evaluades en una sola sentència i retorna el resultat de l'última expressió.
-
- -

Característiques no standard

- -
-
{{non-standard_inline}} {{jsxref("Operadors/Legacy_generator_function", "Legacy generator function", "", 1)}}
-
La paraula clau function es pot emprar per a definir una funció generadora obsoleta dins una expressió. Per a crear una funció generadora obsoleta el cos de la funció ha de contindre al menys una expressió {{jsxref("Operators/yield", "yield")}}.
-
{{non-standard_inline}} {{jsxref("Operadors/Expression_closures", "Expression closures", "", 1)}}
-
La sintaxi d'expressions closure és una abreviació per a escriure funcions simples.
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial.
{{SpecName('ES5.1', '#sec-11', 'Expressions')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-ecmascript-language-expressions', 'Llenguatge ECMAScript: Expressions')}}{{Spec2('ES6')}} -

Nou: L'operador d'extensió, l'assignació de desestructuració, la paraula clau super, la comprensió d'arrays i la comprensió de generadors

-
- -

Vegeu també

- - diff --git a/files/ca/web/javascript/referencia/operadors/logical_operators/index.html b/files/ca/web/javascript/referencia/operadors/logical_operators/index.html deleted file mode 100644 index 591e1fbc4f..0000000000 --- a/files/ca/web/javascript/referencia/operadors/logical_operators/index.html +++ /dev/null @@ -1,302 +0,0 @@ ---- -title: Operadors Lògics -slug: Web/JavaScript/Referencia/Operadors/Logical_Operators -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: Web/JavaScript/Reference/Operators/Logical_Operators ---- -
-
{{jsSidebar("Operators")}}
-
- -

Resum

- -

Els operadors lògics s'utilitzen normalment amb valors Boolean (lògics). En cas de serh-hi presents, retornen un valor booleà. Tot i així, els operadors && i || retornen el valor d'un dels operands especificats, així que si aquests operadors es fan servir amb valors no booleans, poden retornar un valor no booleà.

- -

Descripció

- -

Els operadors lògics es descriuren en la taula següent:

- - - - - - - - - - - - - - - - - - - - - - - - -
OperadorÚsDescripció
AND lògic (&&)expr1 && expr2Retorna expr1 si es pot convertir en false; sinó, retorna expr2. Així, quan es fa servir amb valors booleans, && retorna true si ambdós operands són true; de ser el contrari, retorna false.
OR lògic(||)expr1 || expr2Retorna expr1 si es pot converir en true; de ser al contrari, retorna expr2. Així, quan s'usa amb valors Booleans, || retorna true si l'operand és true; si amdós són false, retorna false.
NOT lògic (!)!exprRetorna false si el seu únic operand pot convertir-se a true; sinó, retorna true.
- -

Exemples d'expressions que es poden converir a false son aquelles que avaluen null, 0, la cadena buida (""), o undefined.

- -

Tot i que els operadors && i || es poden fer servir amb operands que no siguin valors Booleans, poden ser considerats operadors Booleans ja que els valors que retornen sempre es poden convertir en valors Booleans.

- -

Avaluació de tipus curtcircuit

- -

Com a expressions lògiques que són, s'avaluen d'esquerra a dreta, they are tested for possible "short-circuit" evaluation fent servir les regles següents:

- -
    -
  • false && (quelcom) is short-circuit evaluated to false.
    • -
  • true || (quelcom) is short-circuit evaluated to true.
    • -
- -

Les regles de la lògica garanteixen que aquestes avaluacions són sempre correctes. Fixeu-vos que la part quelcom d'adalt no s'avalua, així que els efectes secundaris d'això no tindràn efecte. Fixeu-vos també que la part de l'expressió de dalt anomenada quelcom és una expressió lògica simple (com s'indiquen amb els parèntesis).

- -

Per exemple, les dues funcions següents són equivalents.

- -
function shortCircuitEvaluation() {
-  doSomething() || doSomethingElse()
-}
-
-function equivalentEvaluation() {
-  var flag = doSomething();
-  if (!flag) {
-    doSomethingElse();
-  }
-}
-
- -

Tot i així, les següents expressions no són equivalents degut a la precendència dels operadors, i remarca la importància de requerir que l'operador de la dreta sigui una sola expressió (agrupada, si s'escau, per parèntesi).

- -
false && true  || true      // returns true
-false && (true || true)     // returns false
- -

AND lògic (&&)

- -

El codi següent mostra exemples de l'operador && (AND lògic).

- -
a1 = true  && true      // t && t returns true
-a2 = true  && false     // t && f returns false
-a3 = false && true      // f && t returns false
-a4 = false && (3 == 4)  // f && f returns false
-a5 = "Cat" && "Dog"     // t && t returns "Dog"
-a6 = false && "Cat"     // f && t returns false
-a7 = "Cat" && false     // t && f returns false
-
- -

OR lògic (||)

- -

El codi següent mostra exemples de l'operador || (OR lògic).

- -
o1 = true  || true       // t || t returns true
-o2 = false || true       // f || t returns true
-o3 = true  || false      // t || f returns true
-o4 = false || (3 == 4)   // f || f returns false
-o5 = "Cat" || "Dog"      // t || t returns "Cat"
-o6 = false || "Cat"      // f || t returns "Cat"
-o7 = "Cat" || false      // t || f returns "Cat"
-
- -

NOT lògic (!)

- -

El codi següent mostra exemples de l'operador ! (NOT lògic).

- -
n1 = !true              // !t returns false
-n2 = !false             // !f returns true
-n3 = !"Cat"             // !t returns false
-
- -

Regles de conversió

- -

Convertir AND a OR

- -

L'operació següent que inclou Booleans:

- -
bCondition1 && bCondition2
- -

sempre és igual a:

- -
!(!bCondition1 || !bCondition2)
- -

Convertir OR a AND

- -

L'operació següent que inclou Booleans:

- -
bCondition1 || bCondition2
- -

sempre és igual a:

- -
!(!bCondition1 && !bCondition2)
- -

Desfer-se de parèntesis aniuats

- -

Com que les expressions lògiques s'avaluen d'esquerra a dreta, sempre és posible esborrar els parèntesi d'expressions complexes mitjançant les regles següents.

- -

Desfer-se d'un AND aniuat

- -

L'operació següent que inclou Booleans:

- -
bCondition1 || (bCondition2 && bCondition3)
- -

sempre és igual a:

- -
bCondition1 || bCondition2 && bCondition3
- -

Desfer-se d'un OR aniuat

- -

L'operació següent que inclou Booleans:

- -
bCondition1 && (bCondition2 || bCondition3)
- -

sempre és igual a:

- -
!(!bCondition1 || !bCondition2 && !bCondition3)
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentari
1a edició de ECMAScript.EstàndardDefinició inicial.
{{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')}} 
- -

Compatibilitat amb navegadors

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
AND lògic (&&){{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
OR lògic (||){{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
NOT lògic (!){{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
AND lògic (&&){{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
OR lògic (||){{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
NOT lògic (!){{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -

Compatibilitat amb versions anteriors: Comportament a JavaScript 1.0 i 1.1

- -

Els operadors && i || es comporten de la forma següent:

- - - - - - - - - - - - - - - - - - - -
OperadorÚsComportament
&&expr1 && expr2Si el primer operand (expr1) es pot converitr a false, l'operador && retorna false en comptes del valor de expr1.
||expr1 || expr2Si el primer operand (expr1) es pot converitr a true, l'operador || retorna true en comptes del valor de expr1.
- -

Vegeu també

- - diff --git a/files/ca/web/javascript/referencia/operadors/operador_coma/index.html b/files/ca/web/javascript/referencia/operadors/operador_coma/index.html deleted file mode 100644 index f6a62d2bc8..0000000000 --- a/files/ca/web/javascript/referencia/operadors/operador_coma/index.html +++ /dev/null @@ -1,129 +0,0 @@ ---- -title: Operador Coma -slug: Web/JavaScript/Referencia/Operadors/Operador_Coma -translation_of: Web/JavaScript/Reference/Operators/Comma_Operator ---- -
-
{{jsSidebar("Operators")}}
-
- -

Resum

- -

L'operador coma avalua cadascun dels seus operands (d'esquerra a dreta) i retorna el valor de l´últim operand.

- -

Sintaxi

- -
expr1, expr2, expr3...
- -

Paràmetres

- -
-
expr1, expr2, expr3...
-
Qualsevol expressions.
-
- -

Descripció

- -

Es pot fer servir l'operador coma quan es vulgui incloure múltiples expressions en una localització que requereix una sola expressió. L'ús més freqüent que es fa d'aquest operador es per subministrar múltiples paràmetres en una for loop.

- -

Exemple

- -

Si a és un array de 2 dimesnions amb 10 elements on a side, el codi següent usa l'operador coma per incrementar dos variables al mateix temps. Vegeu que la coma en la sentència var no  és l'operador coma, ja que no existeix dins d'una expressió. Més aviat, és un caràcter especial en les sentències var que combina múltiples d'ells en un. Pràcticament, la coma es comporta quasi igual que l'operador coma. El codi imprimeix els valors dels elements de la diagonal de l'array:

- -
for (var i = 0, j = 9; i <= 9; i++, j--)
-  document.writeln("a[" + i + "][" + j + "] = " + a[i][j]);
- -

Processar i després retornar

- -

Un altre exemple sobre l'ús que es pot fer sobre l'operador coma és processar abansd e retornar. Com s'indica, només l'últim element serà retornat, però tots els altres també seràn avaluats. Així doncs, es podria fer:

- -
function myFunc () {
-  var x = 0;
-
-  return (x += 1, x); // the same of return ++x;
-}
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentari
ECMAScript 1st Edition.EstàndardDefinició inicial.
{{SpecName('ES5.1', '#sec-11.14', 'Comma operator')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-comma-operator', 'Comma operator')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsicSíSí3.0SíSí
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsicSíSíSíSíSíSí
-
- -

Vegeu també

- - diff --git a/files/ca/web/javascript/referencia/operadors/super/index.html b/files/ca/web/javascript/referencia/operadors/super/index.html deleted file mode 100644 index c19e58cba1..0000000000 --- a/files/ca/web/javascript/referencia/operadors/super/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: super -slug: Web/JavaScript/Referencia/Operadors/super -translation_of: Web/JavaScript/Reference/Operators/super ---- -
{{jsSidebar("Operators")}}
- -

Resum

- -

La paraula clau super s'utilitza per cridar funcions del pare de l'objecte.

- -

Sintaxi

- -
super([arguments]); // crida el constructor del pare.
-super.functionOnParent([arguments]);
-
- -

Descripció

- -

Quan s'utilitza en un constructor, la paraula clau super apareix sola i s'ha d'utilitzar abans de la paraula clau this. Aquesta paraula clau també es pot utilitzar per cridar funcions en un objecte pare.

- -

Exemple

- -

Aquest fragment de codi es pren de la mostra de classes  mostra de classes (demostració en viu).

- -
class Square extends Polygon {
-  constructor(length) {
-    // Aquí es crida el constructor del pare de la classe amb les longituds
-    // proveïdes per l'alçada i l'amplada del polígon
-    super(length, length);
-    // Nota: En classes derivades, s'ha de cridar super() abans de poder
-    // utilitzar 'this'. Obviar això causarà un error de referència.
-    this.name = 'Square';
-  }
-
-  get area() {
-    return this.height * this.width;
-  }
-
-  set area(value) {
-    this.area = value;
-  }
-}
- -

Especificacions

- - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-super-keyword', 'super')}}{{Spec2('ES6')}}Definició inicial.
- -

Compatibilitat amb navegadors

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome(42.0)}}{{CompatNo}}
- {{bug(1066239)}}		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -
Safari Mobile - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera Mobile
Suport bàsic{{CompatUnknown}}{{CompatChrome(42.0)}}{{CompatNo}}
- {{bug(1066239)}}		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

Vegeu també

- - diff --git a/files/ca/web/javascript/referencia/operadors/typeof/index.html b/files/ca/web/javascript/referencia/operadors/typeof/index.html deleted file mode 100644 index a7407e79ce..0000000000 --- a/files/ca/web/javascript/referencia/operadors/typeof/index.html +++ /dev/null @@ -1,240 +0,0 @@ ---- -title: typeof -slug: Web/JavaScript/Referencia/Operadors/typeof -translation_of: Web/JavaScript/Reference/Operators/typeof ---- -
-
{{jsSidebar("Operators")}}
-
- -

Resum

- -

L'operador typeof retorna una cadena de caràcters que representa el tipus de l'operand, que en cap cas és evaluat.

- -

Sintaxi

- -

L'operador typeof va seguit del seu operand:

- -
typeof operand
- -

Paràmetres

- -

operand és una expressió que representa l'objecte o {{Glossary("Primitive", "primitive")}} del qual es retornarà el tipus.

- -

Descripció

- -

La taula següent resumeix els possibles valor de typeof. Per més informació sobre tipus i tipus primitius, vegeu també la pàgina de JavaScript data structure.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
TipusResultat
Undefined"undefined"
Null"object" (vegeu a sota)
Boolean"boolean"
Number"number"
String"string"
Symbol (nou a l'ECMAScript 6)"symbol"
Host object (proporcionat per l'entorn JS)Depenent de l'implementació
Objecte Funció (implements [[Call]] in ECMA-262 terms)"function"
Qualsevol altre objecte"object"
- -

Exemples

- -

Casos normals

- -
// Numbers
-typeof 37 === 'number';
-typeof 3.14 === 'number';
-typeof Math.LN2 === 'number';
-typeof Infinity === 'number';
-typeof NaN === 'number'; // A pesar de ser un "Not-A-Number"
-typeof Number(1) === 'number'; // però no l'utilitzeu mai així!
-
-
-// Strings
-typeof "" === 'string';
-typeof "bla" === 'string';
-typeof (typeof 1) === 'string'; // typeof sempre retorna una string
-typeof String("abc") === 'string'; // però no l'utilitzeu mai així!
-
-
-// Booleans
-typeof true === 'boolean';
-typeof false === 'boolean';
-typeof Boolean(true) === 'boolean'; // però no l'utilitzeu mai així!
-
-
-// Symbols
-typeof Symbol() === 'symbol'
-typeof Symbol('foo') === 'symbol'
-typeof Symbol.iterator === 'symbol'
-
-
-// Undefined
-typeof undefined === 'undefined';
-typeof blabla === 'undefined'; // una variable no definida
-
-
-// Objects
-typeof {a:1} === 'object';
-
-// utilitzeu Array.isArray o bé Object.prototype.toString.call
-// per a diferenciar objectes normals d'arrays
-typeof [1, 2, 4] === 'object';
-
-typeof new Date() === 'object';
-
-
-// Els següents exemples són confusos, no els utilitzeu!
-typeof new Boolean(true) === 'object';
-typeof new Number(1) === 'object';
-typeof new String("abc") === 'object';
-
-
-// Funcions
-typeof function(){} === 'function';
-typeof Math.sin === 'function';
-
- -

null

- -
// Això es manté així des de l'inici de JavaScript
-typeof null === 'object';
-
- -

A la primera implementació de JavaScript, els valors de JavaScript es representaven com a una etiqueta de tipus i un valor. L'etiqueta de tipus per objectes era 0. null era representat amb el punter NULL (0x00 a la majoria de plataformes). D'aquesta manera null tenia 0 com a etiqueta de tipus, i això és el que determina que typeof retorni 'object' per a null. (referència)

- -

Es va proposar una esmena per a canviar aquest comportament per l'ECMAScript (via una opt-in), però aquesta va ser rebutjada. El resultat hagués estat typeof null === 'null'.

- -

Expressions regulars

- -

Expressions regulars que poden ser cridades van ser un afegit no standard en alguns navegadors web.

- -
typeof /s/ === 'function'; // Chrome 1-12 No cumpleix l'standard ECMAScript 5.1
-typeof /s/ === 'object';   // Firefox 5+  D'acord amb ECMAScript 5.1
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentari
1a edició ECMAScript.EstàndardDefinició inicial. Implementat en JavaScript 1.1
{{SpecName('ES5.1', '#sec-11.4.3', 'The typeof Operator')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-typeof-operator', 'The typeof Operator')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -

Els objects host a Internet Explorer són objectes en comptes de funcions

- -

A IE 6, 7, i 8 molts dels host objects són objectes i no funcions. Per exemple:

- -
typeof alert === 'object'
- -

Vegeu també

- - diff --git a/files/ca/web/javascript/referencia/operadors/void/index.html b/files/ca/web/javascript/referencia/operadors/void/index.html deleted file mode 100644 index ddf98ebfd9..0000000000 --- a/files/ca/web/javascript/referencia/operadors/void/index.html +++ /dev/null @@ -1,138 +0,0 @@ ---- -title: L'operador void -slug: Web/JavaScript/Referencia/Operadors/void -translation_of: Web/JavaScript/Reference/Operators/void ---- -
{{jsSidebar("Operators")}}
- -

Resum

- -

L'operador void evalua l'expressió donada i retorna undefined.

- -

Sintaxi

- -
void expressió
- -

Descripció

- -

Aquest operador permet inserir expressions que produeixen efectes secundaris en llocs on es vol una expressió que s'evalui a undefined.

- -

L'operador void tot sovint s'utilitza simplement per a obtenir el valor primitiu undefined, normalment usant "void(0)" (que és equivalent a "void 0"). En aquests casos es pot utilitzar la variable global undefined en comptes de l'operador void (asumint que no ha sigut assignada a un valor no standard).

- -

Expressions de funció invocades de forma immediata

- -

A l'utilitzar una expressió de funció invocada de forma immediata, es pot usar void per a forçar que la paraula clau function sigui tractada com a una expressió en comptes d'una declaració.

- -
void function iife() {
-    var bar = function () {};
-    var baz = function () {};
-    var foo = function () {
-        bar();
-        baz();
-     };
-    var biz = function () {};
-
-    foo();
-    biz();
-}();
-
- -

URIs de JavaScript

- -

Quan un navegador segueix una URI de l'estil javascript: , aquest evalua el codi que hi ha a la URI i llavors reemplaça el contingut de la pàgina amb el valor retornat, a no ser que el valor retornat sigui undefined. L'operador void pot ser emprat en aquest case per a retornar undefined. Per exemple:

- -
<a href="javascript:void(0);">
-  Cliqueu aquí per a no fer res
-</a>
-
-<a href="javascript:void(document.body.style.backgroundColor='green');">
-  Clique aquí per a un fons de color verd
-</a>
-
- -

Tingueu en compte, però, que el pseudo protocol javascript: no és recomanat ja que existeixen alternatives, com ara manegadors d'events no obtrusius.

- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
ECMAScript 1a Edició.StandardDefinició inicial. Implementat al JavaScript 1.1
{{SpecName('ES5.1', '#sec-11.4.2', 'The void Operator')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-void-operator', 'The void Operator')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -

Vegeu també

- - diff --git a/files/ca/web/javascript/referencia/operadors/yield/index.html b/files/ca/web/javascript/referencia/operadors/yield/index.html deleted file mode 100644 index d01f641767..0000000000 --- a/files/ca/web/javascript/referencia/operadors/yield/index.html +++ /dev/null @@ -1,152 +0,0 @@ ---- -title: yield -slug: Web/JavaScript/Referencia/Operadors/yield -translation_of: Web/JavaScript/Reference/Operators/yield ---- -
{{jsSidebar("Operators")}}
- -

Resum

- -

La paraula clau yield s'utilitza per a pausar i reprendre una funció generadora ({{jsxref("Statements/function*", "function*")}} o bé una funció generadora obsoleta).

- -

Sintaxi

- -
 yield [[expressió]];
- -
-
expressió
-
La expresssió a retornar. Si s'omet es retorna undefined.
-
- -

Descripció

- -

La paraula clau yield causa que l'execució d'una funció generadora es pausi i retorni el valor de l'expressió que la segueix. La paraula clau yield es pot entendre com una versió de la paraula clau return per a generadors.

- -

La paraula clau yield retorna en realitat un objecte de tipus IteratorResult amb dues propietats: value i done. La propietat value és el resultat d'evaluar l'expresssió que segueix yield mentre que la propietat done és de tipus booleà i indica si la funció generadora ha completat la seva execució o no.

- -

Un cop pausada mitjançant una expressió yield, l'execució de codi del generador no es reprendrà a no ser que s'invoqui externament mitjançant la crida a la funció next() del generador. Això permet un control directe de l'execució del generador i valors de retorn incrementals.

- -

Exemples

- -

El següent codi és un exemple de la declaració d'una funció generadora al llarg d'una funció d'ajut.

- -
function* foo(){
-  var index = 0;
-  while (index <= 2) // quan index arriba a 3,
-                     // la propietat done del yield serà true
-                     // i el seu valor serà undefined;
-    yield index++;
-}
- -

Un cop la funció generadora és definida es pot utilitzar tot construïnt un iterador tal i com es mostra a continuació:

- -
var iterator = foo();
-console.log(iterator.next()); // { value:0, done:false }
-console.log(iterator.next()); // { value:1, done:false }
-console.log(iterator.next()); // { value:2, done:false }
-console.log(iterator.next()); // { value:undefined, done:true }
- -

Especificacions

- - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES6', '#', 'Yield')}}{{Spec2('ES6')}}Definició inicial
- -

Compatibilitat amb navegadors

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suport bàsic39{{CompatGeckoDesktop("26.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Objecte IteratorResult en comptes de throwing{{CompatUnknown}}{{CompatGeckoDesktop("29.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsicyes (when?){{CompatGeckoMobile("26.0")}}{{CompatUnknown}}{{ CompatUnknown}}{{CompatUnknown}}
Objecte IteratorResult en comptes de throwing{{CompatUnknown}}{{CompatGeckoMobile("29.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

Notes específiques per a Firefox

- -
    -
  • A partir de Gecko 29 {{geckoRelease(29)}} la funció generadora, un cop completada, no llença un {{jsxref("TypeError")}} "generator has already finished" sino que retorna un objecte de tipus IteratorResult com per exemple { value: undefined, done: true } ({{bug(958951)}}).
    • -
  • A partir de Gecko 33 {{geckoRelease(33)}} l'anàlisi de l'expressió que segueix al yield s'ha actualitzat per a satisfer l'especificació de ES6 ({{bug(981599)}}): -
      -
    • L'expressió que segueix la paraula clau yield és opcional i si s'omet ja no es llença SyntaxError: function* foo() { yield; }
      • -
    -
    • -
- -

Vegeu tambè

- -
    -
  • El protocol dels iteradors
    • -
  • {{jsxref("Statements/function*", "function*")}}
    • -
  • {{jsxref("Operators/function*", "function* expression")}}
    • -
  • {{jsxref("Operators/yield*", "yield*")}}
    • -
diff --git a/files/ca/web/javascript/referencia/sentencies/block/index.html b/files/ca/web/javascript/referencia/sentencies/block/index.html deleted file mode 100644 index cfa5d7fd20..0000000000 --- a/files/ca/web/javascript/referencia/sentencies/block/index.html +++ /dev/null @@ -1,138 +0,0 @@ ---- -title: block -slug: Web/JavaScript/Referencia/Sentencies/block -translation_of: Web/JavaScript/Reference/Statements/block ---- -
-
{{jsSidebar("Statements")}}
-
- -

Resum

- -

Una sentència bloc (o sentència composta en altres llengües) s'usa per agrupar zero o més sentències. El bloc està delimitat per un parell de claus.

- -

Sintaxi

- -
{
-  sentència_1;
-  sentència_2;
-  ...
-  sentència_n;
-}
-
- -
-
statement_1, statement_2, statement_n
-
Sentències agrupades dins la sentència block.
-
- -

Descripció

- -

Aquesta sentència s'utilitza normalment amb les sentències de control de flux (p.ex. if, for, while). Per exemple:

- -
while (x < 10) {
-  x++;
-}
-
- -

Tingueu en compte que la sentència block no acaba amb un punt i coma.

- -

La sentència bloc sovint s'anomena sentència composta en altres llengües. Aquesta sentència permet usar múltiples sentències allà on JavaScript espera només una única sentència. Combinar sentències en blocs és una pràctica comuna en JavaScript. El comportament oposat és possible fent servir una sentència buida, on no es proporciona cap declaració, encara que es requereixi una.

- -

Fora de l'àmbit del bloc

- -

Important: Les variables declarades amb var no tenen àmbit de bloc. Les variables introduïdes amb un bloc estàn en l'àmbit de la funció o l'script que els conté, i els efectes d'establir-los persisteixen més enllà del mateix bloc. En altres paraules, les sentències de bloc no introdueixen un àmbit. Encara que els blocs "independents" són sintàcticament vàlids, no és desitjable usar-los en JavaScript, ja que no fan el que pensem que fan, en el cas que penseu que fan alguna cosa semblant als blocs en C o Java. Per exemple:

- -
var x = 1;
-{
-  var x = 2;
-}
-console.log(x); // logs 2
-
- -

Això registra 2 ja que la sentència var x dins el bloc es troba en el mateix àmbit que la sentència var x anterior al bloc. En C o Java, el codi equivalent hauria emès 1.

- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacionsEstatComentaris
1a edició d'ECMAScript.EstàndardDefinició inicial. Implementat en JavaScript 1.0
{{SpecName('ES5.1', '#sec-12.1', 'Block statement')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-block', 'Block statement')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Statements/while", "while")}}
    • -
diff --git a/files/ca/web/javascript/referencia/sentencies/break/index.html b/files/ca/web/javascript/referencia/sentencies/break/index.html deleted file mode 100644 index d71eff620d..0000000000 --- a/files/ca/web/javascript/referencia/sentencies/break/index.html +++ /dev/null @@ -1,154 +0,0 @@ ---- -title: break -slug: Web/JavaScript/Referencia/Sentencies/break -translation_of: Web/JavaScript/Reference/Statements/break ---- -
{{jsSidebar("Statements")}}
- -

La sentència break acaba el bucle actual, {{jsxref("Statements/switch", "switch")}}, o una sentència {{jsxref("Statements/label", "label")}} i transfereix el control de programa a la sentència següent de la sentència acabada.

- -

Sintaxi

- -
break [etiqueta];
- -
-
Etiqueta
-
Opcional. És l'identificador associat amb l'etiqueta de la sentència. Si la sentència no és un bucle o un {{jsxref("Statements/switch", "switch")}}, això és necessari.
-
- -

Descripció

- -

La sentència break inclou una etiqueta opcional que permet al programa sortir de la sentència etiquetada. La sentència break necessita ser imbricada dins l'etiqueta de referència. La sentència etiquetada pot ser qualsevol sentència {{jsxref("Statements/block", "block")}}, no ha de ser precedida per una sentència de bucle.

- -

Exemples

- -

La funció següent té una sentència break que acaba amb el bucle{{jsxref("Statements/while", "while")}} quan i és 3, per després retornar el valor 3 * x.

- -
function testBreak(x) {
-  var i = 0;
-
-  while (i < 6) {
-    if (i == 3) {
-      break;
-    }
-    i += 1;
-  }
-
-  return i * x;
-}
- -

El codi següent utilitza sentències break amb blocs etiquetats. Una sentència break ha de ser imbricada dins de qualsevol etiqueta que fa referència. Vegeu que inner_block és troba imbricada dins outer_block.

- -
outer_block: {
-  inner_block: {
-    console.log('1');
-    break outer_block; // surt tan de inner_block com de outer_block
-    console.log(':-('); // es salta
-  }
-  console.log('2'); // es salta
-}
-
- -

El codi següent també utilitza sentències break amb blocs etiquetats però cenera un Syntax Error perquè la sentència break es troba dins de block_1 però fa referència a block_2. Una sentència break ha d'estar sempre imbricada dins de l'eitqueta a la que fa referència.

- -
block_1: {
-  console.log('1');
-  break block_2; // SyntaxError: etiqueta no trobada
-}
-
-block_2: {
-  console.log('2');
-}
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Versió no etiquetada.
{{SpecName('ES3')}}{{Spec2('ES3')}}versió etiquetada afegida.
{{SpecName('ES5.1', '#sec-12.8', 'Break statement')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-break-statement', 'Break statement')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Statements/continue", "continue")}}
    • -
  • {{jsxref("Statements/label", "label")}}
    • -
  • {{jsxref("Statements/switch", "switch")}}
    • -
diff --git a/files/ca/web/javascript/referencia/sentencies/buida/index.html b/files/ca/web/javascript/referencia/sentencies/buida/index.html deleted file mode 100644 index 6800d476f8..0000000000 --- a/files/ca/web/javascript/referencia/sentencies/buida/index.html +++ /dev/null @@ -1,138 +0,0 @@ ---- -title: Buida -slug: Web/JavaScript/Referencia/Sentencies/Buida -translation_of: Web/JavaScript/Reference/Statements/Empty ---- -
-
{{jsSidebar("Statements")}}
-
- -

Resum

- -

Una sentència buida es fa servir per no proveïr cap sentència, encara que la sintaxi de JavaScript n'esperaria una.

- -

Sintaxi

- -
;
-
- -

Descripció

- -

La sentència buida és un punt i coma (;) que indica que cap sentència s'executarà, encara que la sintaxi de JavaScript en requereixi una. Pel contrari, quan es vol realitzar múltiples sentències, però JavaScript només en permet un, és possible realitzar-ho mitjançant l'ús d'una sentència de block; que combina diverses sentències en una única sentència.

- -

Exemples

- -

La sentència buida sovint s'utilitza amb sentències de bucles. Vegeu l'exemple segúent amb el cos del bucle buit:

- -
var arr = [1, 2, 3];
-
-// Assign all array values to 0
-for (i = 0; i < arr.length; arr[i++] = 0) /* empty statement */ ;
-
-console.log(arr)
-// [0, 0, 0]
-
- -

Nota: És una bona idea comentar l'ús intencional de la sentència buida, ja que no és fa molt obvi diferenciar-lo d'un punt i coma normal. En el següent exemple l'ús probablement no és intencional:

- -
if (condition);       // Caution, this "if" does nothing!
-   killTheUniverse()  // So this gets always executed!!!
-
- -

Un altre exemple: Una sentència if...else sense claus ({}). Si tres és cert, no passarà res, four does not matter, ni tampoc s'executarà la funció launchRocket() en el cas else.

- -
if (one)
-  doOne();
-else if (two)
-  doTwo();
-else if (three)
-  ; // nothing here
-else if (four)
-  doFour();
-else
-  launchRocket();
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
1a edició de ECMAScript.EstàndardDefinició inicial.
{{SpecName('ES5.1', '#sec-12.3', 'Empty statement')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-empty-statement', 'Empty statement')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Statements/block", "Block statement")}}
    • -
diff --git a/files/ca/web/javascript/referencia/sentencies/continue/index.html b/files/ca/web/javascript/referencia/sentencies/continue/index.html deleted file mode 100644 index a6928d15b7..0000000000 --- a/files/ca/web/javascript/referencia/sentencies/continue/index.html +++ /dev/null @@ -1,199 +0,0 @@ ---- -title: continue -slug: Web/JavaScript/Referencia/Sentencies/continue -translation_of: Web/JavaScript/Reference/Statements/continue ---- -
{{jsSidebar("Statements")}}
- -

La sentència continue acaba l'execució de les sentències en la iteració actual del bucle actual o etiquetat, i continua l'execució del bucle amb la següent iteració.

- -

Sintaxi

- -
continue [etiqueta];
- -
-
Etiqueta
-
Identificador associat amb l'etiqueta de la sentència.
-
- -

Descripció

- -

En contrast amb la sentència {{jsxref("Statements/break", "break")}} , continue no acaba l'execució del bucle: En comptes d'això,

- -
    -
  • En un bucle {{jsxref("Statements/while", "while")}}, salta un altre cop a la condició.
    • -
- -
    -
  • En un bucle {{jsxref("Statements/for", "for")}}, Salta a l'actualització de l'expressió.
    • -
- -

La sentència continue pot incloure una etiqueta opcional que permet al programa saltar a la següent iteració d'una sentència d'un bucle etiquetat en comptes del bucle actual. En aquest cas, la sentència continue necessita trobar-se imbricada dins de la sentència etiquetada.

- -

Exemples

- -

Utilitzar continue amb while

- -

L'exemple següent mostra un bucle{{jsxref("Statements/while", "while")}} que contè una sentència continue que s'executa quan el valor de i és 3. Així doncs, n pren els valors 1, 3, 7, i 12.

- -
var i = 0;
-var n = 0;
-
-while (i < 5) {
-  i++;
-
-  if (i === 3) {
-    continue;
-  }
-
-  n += i;
-}
-
- -

Utilitzar continue amb una etiqueta

- -

En l'exemple següent, una sentència etiquetada checkiandj contè una sentència etiquetada checkj. si es troba un continue, el programa continua al començament de la sentència checkj. Cada cop que es troba continue, checkj reitera fins que la condició retorna falç. Quan es retorna falç, es completa la resta de la sentència checkiandj.

- -

Si continue té una etiqueta de checkiandj, el programa continuarà al començament de la sentència checkiandj.

- -

Vegeu també {{jsxref("Statements/label", "label")}}.

- -
var i = 0;
-var j = 8;
-
-checkiandj: while (i < 4) {
-  console.log("i: " + i);
-  i += 1;
-
-  checkj: while (j > 4) {
-    console.log("j: "+ j);
-    j -= 1;
-
-    if ((j % 2) == 0)
-      continue checkj;
-    console.log(j + " is odd.");
-  }
-  console.log("i = " + i);
-  console.log("j = " + j);
-}
-
- -

Resultat:

- -
"i: 0"
-
-// start checkj
-"j: 8"
-"7 is odd."
-"j: 7"
-"j: 6"
-"5 is odd."
-"j: 5"
-// end checkj
-
-"i = 1"
-"j = 4"
-
-"i: 1"
-"i = 2"
-"j = 4"
-
-"i: 2"
-"i = 3"
-"j = 4"
-
-"i: 3"
-"i = 4"
-"j = 4"
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES1')}}{{Spec2('ES1')}}Definició inicial. Versió sense etiqueta.
{{SpecName('ES3')}}{{Spec2('ES3')}}Versió amb etiqueta afegida.
{{SpecName('ES5.1', '#sec-12.7', 'Continue statement')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-continue-statement', 'Continue statement')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Statements/break", "break")}}
    • -
  • {{jsxref("Statements/label", "label")}}
    • -
diff --git a/files/ca/web/javascript/referencia/sentencies/debugger/index.html b/files/ca/web/javascript/referencia/sentencies/debugger/index.html deleted file mode 100644 index 54d8d02e3d..0000000000 --- a/files/ca/web/javascript/referencia/sentencies/debugger/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: debugger -slug: Web/JavaScript/Referencia/Sentencies/debugger -translation_of: Web/JavaScript/Reference/Statements/debugger ---- -
{{jsSidebar("Statements")}}
- -

La sentència debugger invoca qualsevol funcionalitat de depuració disponible, com l'establiment d'un breakpoint (punt de ruptura). Si no hi ha cap funcionalitat de depuració disponible, aquesta sentència queda sense efecte.

- -

Sintaxi

- -
debugger;
- -

Exemples

- -

L'exemple següent mostra un codi on s'ha insertat una sentència de depuració, de forma que es crida un debugger (si existeix) quan es crida la funció.

- -
function potentiallyBuggyCode() {
-    debugger;
-    // codi potencialment erroni a examinar, executar pas a pas, etc.
-}
- -

Quan es crida el debugger, s'atura l'execució a la sentència del debugger. Es com un breakpoint en la font de l'script.

- -

Paused at a debugger statement.

- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-debugger-statement', 'Debugger statement')}}{{Spec2('ES6')}} 
{{SpecName('ES5.1', '#sec-12.15', 'Debugger statement')}}{{Spec2('ES5.1')}}Definició inicial
{{SpecName('ES3', '#sec-7.5.3', 'Debugger statement')}}{{Spec2('ES3')}} 
{{SpecName('ES1', '#sec-7.4.3', 'Debugger statement')}}{{Spec2('ES1')}}Només mencionat com a paraula reservada.
- -

Compatibilitat amb navegadors

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- - diff --git a/files/ca/web/javascript/referencia/sentencies/do...while/index.html b/files/ca/web/javascript/referencia/sentencies/do...while/index.html deleted file mode 100644 index 88f221f83d..0000000000 --- a/files/ca/web/javascript/referencia/sentencies/do...while/index.html +++ /dev/null @@ -1,124 +0,0 @@ ---- -title: do...while -slug: Web/JavaScript/Referencia/Sentencies/do...while -translation_of: Web/JavaScript/Reference/Statements/do...while ---- -
{{jsSidebar("Statements")}}
- -

La sentència do...while crea un bucle que executa una sentència especificada fins que la condició avalui a fals. La condició s'avalua després de la sentència, donant lloc a l'execució de la sentència especificada almenys un cop.

- -

Sintaxi

- -
do
-   sentència
-while (condició);
-
- -
-
sentència
-
Una sentència que s'executa almenys un cop i que es torna a executar cada cop que la condició avalui a certa. Per executar múltiples sentències dins d'un bucle, utilitzeu una sentència {{jsxref("Statements/block", "block")}} ({ ... }) per agrupar aquestes sentències.
-
- -
-
condició
-
Una expressió que s'avalua després de cada volta del bucle. si condició avalua a certa, la sentència es torna a executar. Quan la condició avalua a falç, control passa a la següent sentència que segueix el do...while.
-
- -

Exemples

- -

Utilitzar el do...while

- -

En l'exemple següent, el bucle do...while itera almenys un cop i torna a iterar fins que i deixa de ser més petit que 5.

- -
var i = 0;
-do {
-   i += 1;
-   console.log(i);
-} while (i < 5);
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES3')}}{{Spec2('ES3')}}Definició inicial. Implementat en JavaScript 1.2
{{SpecName('ES5.1', '#sec-12.6.1', 'do-while statement')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-do-while-statement', 'do-while statement')}}{{Spec2('ES6')}}Trailing ; ara és opcional.
- -

Browser compatibility

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}6{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Statements/while", "while")}}
    • -
  • {{jsxref("Statements/for", "for")}}
    • -
diff --git a/files/ca/web/javascript/referencia/sentencies/export/index.html b/files/ca/web/javascript/referencia/sentencies/export/index.html deleted file mode 100644 index c1d92ab504..0000000000 --- a/files/ca/web/javascript/referencia/sentencies/export/index.html +++ /dev/null @@ -1,158 +0,0 @@ ---- -title: export -slug: Web/JavaScript/Referencia/Sentencies/export -translation_of: Web/JavaScript/Reference/Statements/export ---- -
{{jsSidebar("Statements")}}
- -

La sentència export s'utilitza per exportar funcions, objectes o valors primitius d'un fitxer donat (o mòdul) per a que els puguin fer servir altres programes amb la sentència {{jsxref("Statements/import", "import")}}.

- -

Els mòduls exportats estan sempre {{jsxref("Strict_mode","strict mode", "", 1)}}  tan si es declaren així com si no. La sentència export no es pot fer servir en mòduls incrustats (embedded).

- -

Sintaxi

- -
export nom1, nom2, ..., nomN;
-export default nom1
- -
-
nomN
-
Propietat, funció, o objecte que s'ha d'exportar (de manera que es pot importar a través de import en un altre script).
-
- -

Descripció

- -

Hi ha dos tipus diferents d'export:

- -
    -
  • Exportacions nominals (una o més per mòdul): - 
    export myFunction; // exporta una funció declarada anteriorment
-export const foo = Math.sqrt(2); // exporta una constant
-export let name1, name2, …, nameN;
-export let name1 = …, name2 = …, …, nameN;
-export function functionName(){...}
-export class ClassName {...}
    -
    • -
  • Exportacions per defecte (una per mòdul): - 
    export default expression;
-export default function (…) { … } // també class, function*
-export default function name1(…) { … } // també class, function*
-export { name1 as default, … };
    -
    • -
- -

Les exportacions amb nom són útils per exportar diversos valors. Durant la importació, un serà capaç d'utilitzar el mateix nom per referir-se al valor corresponent.

- -

Sobre la exportació per defecte, només pot haver-n'hi una per mòdul. Una exportació per defecte pot ser una funció, una classe un objecte o qualsevol altra cosa. Aquest valor es considerarà el principal valor exportat, ja que serà el més fàcil d'importar.

- -

Exemples

- -

Usant les exportacions nominals

- -

En el mòdul podem fer servir el codi següent:

- -
// "modul.js"
-export function cub(x) {
-  return x * x * x;
-}
-const foo = Math.PI + Math.SQRT2;
-export foo;
-
- -

Així, en un altre mòdul podem tenir:

- -
import { cub, foo } from 'modul.js';
-console.log(cub(3)); // 9
-console.log(foo);    // 4.555806215962888
- -

Usant l'exportació per defecte

- -

Si volem exportar un únic valor o tenir un valor per defecte per al nostre mòdul podem fer::

- -
// "modul.js"
-var function cub(x) {
-  return x * x * x;
-}
-export default cub;
- -

Així, en un altre mòdul podem importar directament:

- -
import laFuncio from 'modul';
-console.log(laFuncio(3)); // 9
-
- -

Especificacions

- - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES6', '#sec-imports', 'Imports')}}{{Spec2('ES6')}}Definició inicial
- -

Compatibilitat amb navegadors

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

Vegeu també

- - diff --git a/files/ca/web/javascript/referencia/sentencies/for...of/index.html b/files/ca/web/javascript/referencia/sentencies/for...of/index.html deleted file mode 100644 index 5cc16f52f8..0000000000 --- a/files/ca/web/javascript/referencia/sentencies/for...of/index.html +++ /dev/null @@ -1,181 +0,0 @@ ---- -title: for...of -slug: Web/JavaScript/Referencia/Sentencies/for...of -translation_of: Web/JavaScript/Reference/Statements/for...of ---- -
-
{{jsSidebar("Statements")}}
-
- -

Resum

- -

La instrucció for...of crea un bucle que itera sobre objectes iterables (incloent {{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, l'objecte arguments, etcètera), tot invocant un bloc de codi amb les instruccions a executar per a cada valor de la propietat.

- -

Sintaxi

- -
for (variable of objecte)
-  codi
-
- -
-
variable
-
A cada iteració el valor d'una propietat diferent és asignat a variable.
-
objecte
-
L'objecte del qual s'iteren les propietats, que són iterables.
-
- -

Exemples

- -

Diferència entre for...of i for...in

- -

El següent exemple mostra la diferència entre el bucle for...of i el bucle for...in. Mentre for...in itera sobre noms de propietats, for...of itera sobre els valors de les propietats:

- -
let arr = [3, 5, 7];
-arr.foo = "hola";
-
-for (let i in arr) {
-   console.log(i); // mostra "0", "1", "2", "foo"
-}
-
-for (let i of arr) {
-   console.log(i); // mostra "3", "5", "7"
-}
-
- -

Ús de Array.prototype.forEach()

- -

Per a aconseguir els mateixos valors que s'obtenen amb for...of també es pot utilitzar el mètode {{jsxref("Array.prototype.forEach()")}}:

- -
let arr = [3, 5, 7];
-arr.foo = "hola";
-
-arr.forEach(function (element, index) {
-    console.log(element); // mostra "3", "5", "7"
-    console.log(index);   // mostra "0", "1", "2"
-});
-
-// or with Object.keys()
-
-Object.keys(arr).forEach(function (element, index) {
-    console.log(arr[element]); // mostra "3", "5", "7", "hello"
-    console.log(arr[index]);   // mostra "3", "5", "7"
-});
- -

Iteració de coleccions del DOM

- -

Iterant sobre coleccions del DOM com {{domxref("NodeList")}}: el següent exemple afegeix la classe read als paràgrafs que són descendens directes d'un article:

- -
// Nota: Això només funcionarà en plataformes que
-// implementen NodeList.prototype[Symbol.iterator]
-let articleParagraphs = document.querySelectorAll("article > p");
-
-for (let paragraph of articleParagraphs) {
-  paragraph.classList.add("read");
-}
-
- -

Iteració de generadors:

- -

Els generadors també són iterables:

- -
function* fibonacci() { // una funció generadora
-    let [prev, curr] = [0, 1];
-    for (;;) {
-        [prev, curr] = [curr, prev + curr];
-        yield curr;
-    }
-}
-
-for (let n of fibonacci()) {
-    // trunca la seqüència als 1000
-    if (n > 1000)
-        break;
-    print(n);
-}
-
- -

Especificacions

- - - - - - - - - - - - - - -
EspecificacióEstatComentari
{{SpecName('ES6', '#sec-for-in-and-for-of-statements', 'for...of statement')}}{{Spec2('ES6')}}Definició inicial.
- -

Compatibilitat amb navegadors

- -

{{CompatibilityTable()}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome(29)}}[1]
- {{CompatChrome(38)}}		{{CompatGeckoDesktop("13")}}
- {{CompatGeckoDesktop("17")}} (.iterator)
- {{CompatGeckoDesktop("27")}} ("@@iterator")
- {{CompatGeckoDesktop("36")}} (Symbol.iterator)		{{CompatNo}}257.1
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatUnknown}}{{CompatChrome(29)}}[1]
- {{CompatChrome(38)}}		{{CompatGeckoMobile("13")}}
- {{CompatGeckoMobile("17")}} (.iterator)
- {{CompatGeckoMobile("27")}} ("@@iterator")
- {{CompatGeckoMobile("36")}} (Symbol.iterator)		{{CompatUnknown}}{{CompatUnknown}}iOS 8
-
- -

[1] La característica està disponible sota una preferència. A chrome://flags/#enable-javascript-harmony, activar la entrada “Enable Experimental JavaScript”.

- -

Vegeu també

- -
    -
  • for each...in - una instrucció similar, però itera els valors de les propietats d'un objecte en comptes de les propietats mateixes de l'objecte (en desús).
    • -
  • {{jsxref("Array.prototype.forEach()")}}
    • -
diff --git a/files/ca/web/javascript/referencia/sentencies/for/index.html b/files/ca/web/javascript/referencia/sentencies/for/index.html deleted file mode 100644 index 00a16b62df..0000000000 --- a/files/ca/web/javascript/referencia/sentencies/for/index.html +++ /dev/null @@ -1,190 +0,0 @@ ---- -title: for -slug: Web/JavaScript/Referencia/Sentencies/for -translation_of: Web/JavaScript/Reference/Statements/for ---- -
-
{{jsSidebar("Statements")}}
-
- -

Resum

- -

La sentència for crea un bucle que consta de tres expressions opcionals, embolcallades entre paràntesis i separades per punts i comes, seguits d'una sentència o un grup de sentències executades en el bucle.

- -

Sintaxi

- -
for ([inicialització]; [condició]; [expressió final])
-   sentència
-
- -
-
inicialització
-
Una expressió (incloent expressions d'assignació) o declaració de variables. Normalment s'usa per inicialitzar una variable al contador. Opcionalment aquesta expressió pot declarar noves variables amb la paraula clau var.  Aquestes variables no sóc locals pel bucle, és a dir, es troben en el mateix àmbit en que es troba el bucle for. El resultat d'aquesta expressió es descarta.
-
condició
-
Una expressió que s'avalua abans de cada iteració del bucle. Si aquesta expressió s'avalua true, s'executa la sentència. Aquesta prova condicional és opcional. Si s'omet, la condició sempre avalua true. Si l'expressió avalua a false, l'execució salta a la primera expressió que es trobi després del constructe for.
-
Expressió final
-
Una expressió per ser avaluada al final de cada iteració del bucle. Això passa abans de la següent avaluació de condició. Generalment s'usa per actualitzar o incrementar la variable contador.
-
sentència
-
Una sentència que s'executa mentre la condició avalui a true. Per executar múltiples sentències dins el bucle, utilitzeu una sentència block ({ ... }) per agrupar aquestes sentències. Per no executar cap sentència dins el bucle, utilitzeu una sentència buida  (;).
-
- -

Exemples

- -

Exemple: Fer servir for

- -

La següent sentència for comença declarant la variable i i l'inicialitza a 0. Comprova que  i és menor que nou, realitza les dues sentències següents, i incrementa i per 1 després de cada pas pel bucle.

- -
for (var i = 0; i < 9; i++) {
-   console.log(i);
-   // more statements
-}
-
- -

Exemple: Expressions for opcionals

- -

Les tres expressions en la capçalera del bucle for són opcionals.

- -

Per exemple, enel bloc d'inicialització no es requereix inicialitzar les variablesblock it is not required to initialize variables:

- -
var i = 0;
-for (; i < 9; i++) {
-    console.log(i);
-    // more statements
-}
-
- -

Com el bloc d'inicialització, el bloc de condició també és opcional. Si s'omet aquesta expressió, s'ha de d'assegurar de trencar el bucle en el cos per evitar crear un bucle infinit.

- -
for (var i = 0;; i++) {
-   console.log(i);
-   if (i > 3) break;
-   // more statements
-}
- -

També es pot ometre els tres blocs. Un alre cop, assegureu-vos de fer servir la sentència break per finalitzar el bucle i també modificar (incrementar) una variable, de forma que la condició per la sentència break esdevé certa en algun moment determinat.

- -
var i = 0;
-
-for (;;) {
-  if (i > 3) break;
-  console.log(i);
-  i++;
-}
-
- -

Exemple: Fer servir for amb una sentència buida

- -

El cicle for següent callcula la possició de desplaçament d'un node en la secció  [expressió final], i per tant no requereix l'ús d'una sentència o secció de sentències block, es fa servir una sentència buida en el seu lloc.

- -
function showOffsetPos (sId) {
-  var nLeft = 0, nTop = 0;
-
-  for (var oItNode = document.getElementById(sId); // initialization
-       oItNode; // condition
-       nLeft += oItNode.offsetLeft, nTop += oItNode.offsetTop, oItNode = oItNode.offsetParent) // final-expression
-       /* empty statement */ ;
-
-  console.log("Offset position of \"" + sId + "\" element:\n left: " + nLeft + "px;\n top: " + nTop + "px;");
-}
-
-// Example call:
-
-showOffsetPos("content");
-
-// Output:
-// "Offset position of "content" element:
-// left: 0px;
-// top: 153px;"
- -
Nota: En aquest cas, quan no es fa servir la secció sentència, es fica un punt i coma immediatament despres de la declaració del cicle.
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
1a edició de ECMAScript.EstàndardDefinició inicial.
{{SpecName('ES5.1', '#sec-12.6.3', 'for statement')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-for-statement', 'for statement')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Statements/break", "break")}}
    • -
  • {{jsxref("Statements/continue", "continue")}}
    • -
  • {{jsxref("Statements/empty", "empty")}}
    • -
  • {{jsxref("Statements/while", "while")}}
    • -
  • do...while
    • -
  • for...in
    • -
  • for...of
    • -
diff --git a/files/ca/web/javascript/referencia/sentencies/function/index.html b/files/ca/web/javascript/referencia/sentencies/function/index.html deleted file mode 100644 index 37deff748f..0000000000 --- a/files/ca/web/javascript/referencia/sentencies/function/index.html +++ /dev/null @@ -1,171 +0,0 @@ ---- -title: function -slug: Web/JavaScript/Referencia/Sentencies/function -translation_of: Web/JavaScript/Reference/Statements/function ---- -
-
{{jsSidebar("Statements")}}
-
- -

Resum

- -

La declaració d'una funció defineix una funció amb uns paràmetres especificats.

- -
-

També podeu definir funcions fent servir el constructor {{jsxref("Function")}} i un {{jsxref("Operators/function", "function expression")}}.

-
- -

Sintaxi

- -
function nom([paràm,[, paràm,[..., paràm]]]) {
-   [sentències]
-}
-
- -
-
nom
-
El nom de la funció.
-
- -
-
paràm
-
El nom d'un argument que se li passarà a la funció. Una funció pot arribar a tenir fins a 255 arguments.
-
- -
-
sentències
-
Les sentències que comprenen el cos de la funció.
-
- -

Descripció

- -

Una funció creada amb una declaració d'una funció és un objecte Function i té totes les propietats, mètodes i comportament dels objectes Function. Vegeu {{jsxref("Function")}} per informació detallada sobre funcions.

- -

Una funció també es pot crear fent servir una expressió (vegeu {{jsxref("Operators/function", "function expression")}}).

- -

Per defecte, les funcions retornen undefined. Per tal de retornar qualsevol altre valor, la funció ha de tenir una sentència {{jsxref("Statements/return", "return")}} que especifiqui el valor que retorna.

- -

Funcions creades de forma condicional

- -

Les funcions poden ser declarades de forma condicional, és a dir, una sentència d'una funció pot estar aniuada dins d'una sentència if. La majoria de navegadors que no siguin Mozilla tractaran aquestes declaracions condicionals com a declaracions incondicionals i crearàn la funció tant si la condició és vertadera o falsa, vegeu aquest article per una visió general. Per tant, no s'haurien de fer servir, per creacions condicionals feu servir expressions de funcions.

- -

Declarar les funcions abans de definir-les (hosting)

- -

Function declarations in JavaScript are hoisting the function definition. En Javascript es pot ser cridar una funció abans de declarar-la. En anglès existeix un ver:

- -
hoisted(); // logs "foo"
-
-function hoisted() {
-  console.log("foo");
-}
-
- -

Vegeu que {{jsxref("Operators/function", "function expressions")}} no estan hoisted:

- -
notHoisted(); // TypeError: notHoisted is not a function
-
-var notHoisted = function() {
-   console.log("bar");
-};
-
- -

Exemples

- -

Exemple: Fer servir function

- -

El codi següent declara una funció que retorna la quantitat total de vendes, quan se li dóna el nombre d'unitat venudes d' a, b, i c.

- -
function calc_sales(units_a, units_b, units_c) {
-   return units_a*79 + units_b * 129 + units_c * 699;
-}
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
1a edició de ECMAScript.EstàndardDefinició iniciañ. Implementat en JavaScript 1.0
{{SpecName('ES5.1', '#sec-13', 'Function definition')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Functions_and_function_scope", "Functions and function scope")}}
    • -
  • {{jsxref("Function")}}
    • -
  • {{jsxref("Operators/function", "function expression")}}
    • -
  • {{jsxref("Statements/function*", "function* statement")}}
    • -
  • {{jsxref("Operators/function*", "function* expression")}}
    • -
  • {{jsxref("GeneratorFunction")}}
    • -
diff --git a/files/ca/web/javascript/referencia/sentencies/if...else/index.html b/files/ca/web/javascript/referencia/sentencies/if...else/index.html deleted file mode 100644 index b45e9bea3c..0000000000 --- a/files/ca/web/javascript/referencia/sentencies/if...else/index.html +++ /dev/null @@ -1,203 +0,0 @@ ---- -title: if...else -slug: Web/JavaScript/Referencia/Sentencies/if...else -translation_of: Web/JavaScript/Reference/Statements/if...else ---- -
-
{{jsSidebar("Statements")}}
-
- -

Resum

- -

La sentència if executa una sentència si una condició especificada és certa. Si la condició és falsa, opcionalment s'executa una declaració diferent.

- -

Sintaxi

- -
if (condició)
-   sentència1
-[else
-   sentència2]
-
- -
-
condició
-
Una expressió que esdevé o certa o falsa.
-
- -
-
sentència1
-
És la sentència que s'executa si la condició esdevé certa. Pot ser qualsevol declaració, incloent més sentències if aniuades. Per executar múltimples sentències, es fa servir una sentència block ({ ... }) per agrupar aquestes sentències, si no es vol executar cap sentència, es fa servir una sentència buida.
-
- -
-
sentència2
-
La sentència que s'executa si la condition esdevé falsa i hi ha la clàusula else. Pot ser qualsevol sentència, incloent sentències en block i més sentències if aniuades.
-
- -

Descripció

- -

Múltiples sentències if...else poden aniuar-se per crear una clàusula else if. Fixeu-vos que no hi ha la paraula clau elseif (en una paraula) en JavaScript.

- -
if (condició1)
-   sentència1
-else if (condició2)
-   sentència2
-else if (condició3)
-   sentència3
-...
-else
-   sentènciaN
-
- -

Per veure com funciona, així es com es veuria amb l'aniuament degudament indentat.

- -
if (condició1)
-   sentència1
-else
-   if (condició2)
-      sentència2
-   else
-      if (condició3)
-...
-
- -

Per executar múltiples sentències dins una clàusula, utilitzeu una sentència block ({ ... }) per agrupar aquestes sentències. En general, és una bona pràctica utilitzar sempre sentències de block, especialment en codi que inclogui sentències if aniuades:

- -
if (condició) {
-   sentència1
-} else {
-   sentència2
-}
-
- -

No confongueu els valors booleans primitius true i false amb els valors cert i fals de l'objecte Boolean. Qualsevol valor que no sigui undefined, null, 0, NaN, o una cadena buida (""), i qualsevol objecte, incloent un objecte Boolean que tingui el valor fals, esdevé cert quan es passa a una sentència condicional. Per exemple:

- -
var b = new Boolean(false);
-if (b) // this condition evaluates to true
-
- -

Exemples

- -

Exemple: Fer servir if...else

- -
if (cipher_char === from_char) {
-   result = result + to_char;
-   x++;
-} else {
-   result = result + clear_char;
-}
-
- -

Exemple: Fer servir else if

- -

Vegeu que no hi ha cap sintaxi elseif en JavaScript. Tanmateix, es pot escriure amb un espai entre else i if:

- -
if (x > 5) {
-
-} else if (x > 50) {
-
-} else {
-
-}
- -

Exemple: Assignació dins l'expressió condicional

- -

És recomanable no utilitzar assignacions simples en una expressió condicional, atès que l'assignació es pot confondre amb l'igualtat quan es mira per sobre el codi. Per exemple, no utilitzeu el codi següent:

- -
if (x = y) {
-   /* do the right thing */
-}
-
- -

Si necessiteu usar una assignació dins d'una expressió condicional, una pràctica comuna és ficar parèntesis addicionals embolcallant l'assignació. Per exemple:

- -
if ((x = y)) {
-   /* do the right thing */
-}
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacóEstatComentaris
1a edició de ECMAScript.EstàndardDefinció inicial.
{{SpecName('ES5.1', '#sec-12.5', 'if statement')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-if-statement', 'if statement')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -

Vegeu també

- -
    -
  • {{jsxref("Statements/block", "block")}}
    • -
  • {{jsxref("Statements/switch", "switch")}}
    • -
diff --git a/files/ca/web/javascript/referencia/sentencies/index.html b/files/ca/web/javascript/referencia/sentencies/index.html deleted file mode 100644 index e91e446cbf..0000000000 --- a/files/ca/web/javascript/referencia/sentencies/index.html +++ /dev/null @@ -1,129 +0,0 @@ ---- -title: Statements and declarations -slug: Web/JavaScript/Referencia/Sentencies -tags: - - JavaScript - - NeedsTranslation - - Reference - - TopicStub - - statements -translation_of: Web/JavaScript/Reference/Statements ---- -
{{jsSidebar("Statements")}}
- -

Les aplicacions de JavaScript consisteixen en sentències amb una sintaxi adequada. Una sola sentència pot ocupar múltiples línies. Múltiples sentències poden donar-se en una sola línia si cada sentència és separada per un punt i coma. Això no és una paraula clau sino un grup de paraules claus.

- -

Sentències i declaracions per categoria

- -

Per a un llistat alfabetic vegeu el menú de l'esquerra.

- -

Control de fluxe

- -
-
{{jsxref("Sentencies/block", "Block")}}
-
Una sentència bloc s'utilitza per a agrupar zero o més sentències. El bloc és delimitat per un parell de claus {}.
-
{{jsxref("Sentencies/break", "break")}}
-
Acaba la sentència bucle, switch o label actual i transfereix el control del programa a la sentència que segueix la sentència que tot just s'ha acabat.
-
{{jsxref("Sentencies/continue", "continue")}}
-
Acaba l'execució de les sentències de la iteració del bucle actual o bé del bucle especificat, i continua l'execució del bucle amb la següent iteració.
-
{{jsxref("Sentencies/Empty", "Empty")}}
-
Una sentència buida s'utilitza per a proporcionar una sentència que no fa res quan JavaScript espera una sentència però no se'n necesita executar cap.
-
{{jsxref("Sentencies/if...else", "if...else")}}
-
Executa una sentència si la condició especificada és certa. Si la condició és falsa una altra sentència pot ser executada.
-
{{jsxref("Sentencies/switch", "switch")}}
-
Evalua una expressió, compara el resultat de l'evaluació amb una clàusula de tipus case i executa la sentència pertanyent a la clàusula case que és igual a l'evaluació de l'expressió.
-
{{jsxref("Sentencies/throw", "throw")}}
-
Llença una excepció definida per l'usuari.
-
{{jsxref("Sentencies/try...catch", "try...catch")}}
-
Executa un bloc de sentències i, en cas que alguna sentència del bloc llenci una excepció, executa una sentència alternativa.
-
- -

Declaracions

- -
-
{{jsxref("Sentencies/var", "var")}}
-
Declara una variable, opcionalment li assigna un valor.
-
{{experimental_inline()}} {{jsxref("Sentencies/let", "let")}}
-
Declara un bloc de variables d'àmbit local, opcionalment li assigna un valor.
-
{{experimental_inline()}} {{jsxref("Sentencies/const", "const")}}
-
Declara una constant de només lectura.
-
- -

Funcions

- -
-
{{jsxref("Sentencies/function", "function")}}
-
Declara una funció amb els paràmetres especificats.
-
{{experimental_inline()}} {{jsxref("Sentencies/function*", "function*")}}
-
Funcions generadores que permeten escriure iteradors de forma més senzilla.
-
{{jsxref("Sentencies/return", "return")}}
-
Especifica el valor que retornarà una funció.
-
- -

Iteracions

- -
-
{{jsxref("Sentencies/do...while", "do...while")}}
-
Crea un bucle que executa una sentència especificada fins que la condició de test s'evalua a fals. La condició s'evalua després d'executar la sentència, resultant en que la sentència especificada s'executa al menys un cop.
-
{{jsxref("Sentencies/for", "for")}}
-
Crea un bucle que sonsisteix en tres expressions opcionals embolcallades per parèntesi i separades per punts i coma, seguides d'una sentència que s'executarà en el bucle.
-
{{deprecated_inline()}} {{non-standard_inline()}} {{jsxref("Sentencies/for_each...in", "for each...in")}}
-
Itera sobre tots els valors de les propietats d'un objecte, assignant a una variable determinada el seu valor. Per a cada propietat distinta s'executa una sentència.
-
{{jsxref("Sentencies/for...in", "for...in")}}
-
Itera sobre les propietats enumerables d'un objecte en un ordre arbitrari. Per a cada propietat distinta s'executa una sentència.
-
{{experimental_inline()}} {{jsxref("Sentencies/for...of", "for...of")}}
-
Itera sobre objectes iterables (incloent arrays, objectes similar a arrays, iteradors i generadors), executant una sentència per al valor de cada propietat distinta.
-
{{jsxref("Sentencies/while", "while")}}
-
Crea un bucle que executa la sentència donada mentre una condició sigui certa. La condició s'evalua abans d'executar la sentència.
-
- -

Altres

- -
-
{{jsxref("Sentencies/debugger", "debugger")}}
-
Invoca qualsevol funcionalitat de depuració que estigui disponible. Si no hi ha cap funcionalitat de depuració disponible aquesta sentència no te cap efecte.
-
{{experimental_inline()}} {{jsxref("Sentencies/export", "export")}}
-
Utilitzada per a exportar funcions per a que aquestes estiguin disponibles per a imports a mòduls externs, en altres scripts.
-
{{experimental_inline()}} {{jsxref("Sentencies/import", "import")}}
-
Utilitzada per a importar funcions exportades d'un mòdul extern, un altre script.
-
{{jsxref("Sentencies/label", "label")}}
-
Asigna un identificador a una sentència. Aquest identificador pot ser emprat en sentències break o continue.
-
- -
-
{{deprecated_inline()}} {{jsxref("Sentencies/with", "with")}}
-
Extèn la cadena d'àmbit per a una sentència.
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentari
ECMAScript 1a EdicióStandardDefinició inicial.
{{SpecName('ES5.1', '#sec-12', 'Statements')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-ecmascript-language-statements-and-declarations', 'Llenguatge ECMAScript: Sentències i declaracions')}}{{Spec2('ES6')}}Nou: function*, let, for...of, yield
- -

Vegeu també

- - diff --git a/files/ca/web/javascript/referencia/sentencies/return/index.html b/files/ca/web/javascript/referencia/sentencies/return/index.html deleted file mode 100644 index 5b3c3e902a..0000000000 --- a/files/ca/web/javascript/referencia/sentencies/return/index.html +++ /dev/null @@ -1,183 +0,0 @@ ---- -title: return -slug: Web/JavaScript/Referencia/Sentencies/return -translation_of: Web/JavaScript/Reference/Statements/return ---- -
-
{{jsSidebar("Statements")}}
-
- -

Resum

- -

La sentència return finalitza l'execució de la funció i especifica un valor que retornarà a la funció que l'ha cridat.

- -

Sintaxi

- -
return [[expressió]];
- -
-
expressió
-
L'expressió que retorna. En cas d'ometre-s, es retorna undefined.
-
- -

Descripció

- -

Quan una sentència return és cridada dins una funció, l'execució d'aquesta funció s'atura. En cas d'especificar-se, un valor donat és retornat a la funció que l'ha cridat. Si s'omet l'expressió, es retornarà undefined. En les següents sentències return totes aturen l'execució de la funció:

- -
return;
-return true;
-return false;
-return x;
-return x + y / 3;
-
- -

Insersió automàtica de punt i coma

- -

La sentència return es veu afectada per la insersió automàtica de punt i coma (). No hi ha cap final de línia entre la paraula clau return i l'expressió permesa.

- -
return
-a + b;
-
-// is transformed by ASI into
-
-return;
-a + b;
-
- -

Exemples

- -

Exemple: Fer servir return

- -

La següent funció retorna el quadrat del seu argument, x, on x és un nombre.

- -
function square(x) {
-   return x * x;
-}
-
- -

Exemple: Interrompre una funció

- -

Una funció s'atura immediatament en el moment en que es crida return.

- -
function counter() {
-  for (var count = 1; ; count++) {  // infinite loop
-    console.log(count + "A"); // until 5
-      if (count === 5) {
-        return;
-      }
-      console.log(count + "B");  // until 4
-    }
-  console.log(count + "C");  // never appears
-}
-
-counter();
-
-// Output:
-// 1A
-// 1B
-// 2A
-// 2B
-// 3A
-// 3B
-// 4A
-// 4B
-// 5A
-
- -

Exemple: Returning a function

- -

Per més informació sobre closures, llegiu la Guia de JavaScript.

- -
function magic(x) {
-  return function calc(x) { return x * 42};
-}
-
-var answer = magic();
-answer(1337); // 56154
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
1a edició de ECMAScriptEstàndardDefinició inicial.
{{SpecName('ES5.1', '#sec-12.9', 'Return statement')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-return-statement', 'Return statement')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -

Vegeu també

- - diff --git a/files/ca/web/javascript/referencia/sentencies/throw/index.html b/files/ca/web/javascript/referencia/sentencies/throw/index.html deleted file mode 100644 index 37d13b964b..0000000000 --- a/files/ca/web/javascript/referencia/sentencies/throw/index.html +++ /dev/null @@ -1,228 +0,0 @@ ---- -title: throw -slug: Web/JavaScript/Referencia/Sentencies/throw -translation_of: Web/JavaScript/Reference/Statements/throw ---- -
{{jsSidebar("Statements")}}
- -

La sentència throw llença una excepció definida per l'usuari. L'execució de la funció actual s'aturarà (les sentències de després de throw no s'executaran) i es passarà el control al primer bloc catch en la pila de crides. Si no existeix cap bloc catch en les funcions de crides, el programa s'acabarà.

- -

Sintaxi

- -
throw expressió;
- -
-
expressió
-
L'expressió que es llença.
-
- -

Descripció

- -

Utilitzeu una sentència throw per llençar una excepció. Quan es llença l'excepció, expression especifica el valor de l'excepció. Cadascun dels exemples següents llença una excepció:

- -
throw "Error2"; // genera una excepció amb un valor tipus cadena
-throw 42;       // genera una excepció amb el valor 42
-throw true;     // genera una excepció amb el valor true
- -

Tingueu en compte que la sentència throw queda afectada per insersió automàtica de punts i comes (ASI) ja que no es permet cap final de línia entre la paraula clau throw i l'expressió.

- -

Exemples

- -

Llença un objecte

- -

Es pot especificar un objecte quan es llença una excepció. Es pot fer referència a les propietats de l'objecte en el bloc catch. L'exemple següent crea un objecte myUserException de tipus UserException i l'utilitza en una sentència throw.

- -
function UserException(message) {
-   this.message = message;
-   this.name = "UserException";
-}
-function getMonthName(mo) {
-   mo = mo-1; // Adjustar el número de mes per un índex d'array (1=Jan, 12=Dec)
-   var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul",
-      "Aug", "Sep", "Oct", "Nov", "Dec"];
-   if (months[mo] !== undefined) {
-      return months[mo];
-   } else {
-      throw new UserException("InvalidMonthNo");
-   }
-}
-
-try {
-   // sentències que s'intentarà exxecutar
-   var myMonth = 15; // 15 està fora del rang i llençarà l'excepció
-   monthName = getMonthName(myMonth);
-} catch (e) {
-   monthName = "unknown";
-   logMyErrors(e.message, e.name); // es pasa l'objecte excepció al manegador d'errors
-}
-
- -

Un altre exemple de llençar un objecte

- -

L'exemple següent comprova si una cadena donada és un codi postal per EE.UT. SI el codi postal utilitza un format invàlid, la sentència throw llença una excepció creant un objecte de tipus ZipCodeFormatException.

- -
/*
- * Crea un objecte ZipCode.
- *
- * Els formats acceptats per a un codi postal són:
- *    12345
- *    12345-6789
- *    123456789
- *    12345 6789
- *
- * Si l'argument passat al constructor ZipCode no s'adjusta a
- * un d'aquests patrons, es llença una excepció.
- */
-
-function ZipCode(zip) {
-   zip = new String(zip);
-   pattern = /[0-9]{5}([- ]?[0-9]{4})?/;
-   if (pattern.test(zip)) {
-      // el valor del codi postal serà el primer trobat dins la cadena
-      this.value = zip.match(pattern)[0];
-      this.valueOf = function() {
-         return this.value
-      };
-      this.toString = function() {
-         return String(this.value)
-      };
-   } else {
-      throw new ZipCodeFormatException(zip);
-   }
-}
-
-function ZipCodeFormatException(value) {
-   this.value = value;
-   this.message = "no s'adjusta al format esperat per a un codi postal";
-   this.toString = function() {
-      return this.value + this.message;
-   };
-}
-
-/*
- * Això podria trobar-se en un script que valida adresses d'EE.UU.
- */
-
-const ZIPCODE_INVALID = -1;
-const ZIPCODE_UNKNOWN_ERROR = -2;
-
-function verifyZipCode(z) {
-   try {
-      z = new ZipCode(z);
-   } catch (e) {
-      if (e instanceof ZipCodeFormatException) {
-         return ZIPCODE_INVALID;
-      } else {
-         return ZIPCODE_UNKNOWN_ERROR;
-      }
-   }
-   return z;
-}
-
-a = verifyZipCode(95060);         // retorna 95060
-b = verifyZipCode(9560);          // retorna -1
-c = verifyZipCode("a");           // retorna -1
-d = verifyZipCode("95060");       // retorna 95060
-e = verifyZipCode("95060 1234");  // retorna 95060 1234
-
- -

Rellençar una excepció

- -

Es pot utilitzar throw per rellençar una excepció després de caputrar-la. L'exemple següent captura una excepció amb un valor numèric i el rellença si el valor és major de 50. L'excepció rellençada es propaga fins a la funció que l'envolcalla o al nivell superior de forma que l'usuari ho vegi.

- -
try {
-   throw n; // llença una excepció amb un valor numèric
-} catch (e) {
-   if (e <= 50) {
-      // sentències per manejar excepcions 1-50
-   } else {
-      // no es pot manejar aquesta excepció, per tant es rellença
-      throw e;
-   }
-}
-
- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
{{SpecName('ES3')}}{{Spec2('ES3')}}Definició inicial. Implementat en JavaScript 1.4
{{SpecName('ES5.1', '#sec-12.13', 'throw statement')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-throw-statement', 'throw statement')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vegeu també

- - diff --git a/files/ca/web/javascript/referencia/sentencies/while/index.html b/files/ca/web/javascript/referencia/sentencies/while/index.html deleted file mode 100644 index d3997dbefd..0000000000 --- a/files/ca/web/javascript/referencia/sentencies/while/index.html +++ /dev/null @@ -1,131 +0,0 @@ ---- -title: while -slug: Web/JavaScript/Referencia/Sentencies/while -translation_of: Web/JavaScript/Reference/Statements/while ---- -
{{jsSidebar("Statements")}}
- -

Resum

- -

la sentència while crea un bucle que executa una sentència especificada sempre que la condició s'avalui certa. La condició s'avalua abans d'executar la sentència..

- -

Sintaxi

- -
while (condició) {
-  sentència
-}
- -
-
condició
-
Una expressió que s'avalua abans de cada passada del bucle. Si aquesta condició esdevé certa, s'executa la sentència. Quan la condició esdevé falsa, l'execució continua amb la sentència posterior al bucle while.
-
sentència
-
Una sentència que s'executa sempre que la condició esdevingui certa. Per executar múltiples sentències dins un bucle, podeu fer ús de la sentència block ({ ... }) per agrupar aquestes sentències.
-
- -

Exemples

- -

El següent bucle while itera sempre que n sigui menor que tres.

- -
var n = 0;
-var x = 0;
-
-while (n < 3) {
-  n++;
-  x += n;
-}
- -

En cada iteració, el bucle incrementa n i ho suma a x. Per tant, x i n prenen els següents valors:

- -
    -
  • Després de la primera volta: n = 1 i x = 1
    • -
  • Després de la segona volta: n = 2 i x = 3
    • -
  • Després de la tercera volta: n = 3 i x = 6
    • -
- -

Després de completar la tercera volta, la condició n < 3 ja no esdevé més certa, i per tant finalitza el bucle.

- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentaris
1a edició de ECMAScript.EstàndardDefinició inicial.
{{SpecName('ES5.1', '#sec-12.6.2', 'while statement')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-while-statement', 'while statement')}}{{Spec2('ES6')}} 
- -

Compatibilitat amb navegadors

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome per AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -

Vegeu també

- -
    -
  • do...while
    • -
  • {{jsxref("Statements/for", "for")}}
    • -
diff --git a/files/ca/web/javascript/referencia/sobre/index.html b/files/ca/web/javascript/referencia/sobre/index.html deleted file mode 100644 index b1fa0734b3..0000000000 --- a/files/ca/web/javascript/referencia/sobre/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: Sobre aquesta referència -slug: Web/JavaScript/Referencia/Sobre -translation_of: Web/JavaScript/Reference/About ---- -

{{JsSidebar}}

- -

La referència de JavaScript serveix com a repositori de coneixement del llenguatge. Hom trobarà aquí el llenguatge descrit en detall. Durant el transcurs d'escriure codi en JavaScript, aquestes pàgines seran de gran ajut com a referència (d'aquí el títol). Si el que es pretén és aprendre JavaScript, o el que es necessita ajuda a l'hora d'entendre algunes de les seves capacitats o característiques, trobarà la informació que buaca a la guia de JavaScript.

- -

El llenguatge de programació JavaScript està pensat per a ser utilitzat sota un entorn més gran, ja sigui un navegador web, scripts de servidor o quelcom similar. Aquesta referència intenta majoriariament ser agnòstica quant a l'entorn i no per tant no està adreçada únicament a un entorn donat pel navegador web.

- -

On trobar informació sobre JavaScript

- -

La documentació de les característiques bàsiques de Javascript (ECMAScript pur, majoritàriament) inclou el següent:

- - - -

Si s'és nou quant a JavaScript, es recomana començar per la guia. Un cop assolits els fonaments, la referència esdevindrà útil per obtindre més detalls sobre objectes individuals i construccions del llenguatge.

- -

Estructura de la referència

- -

La referència de JavaScript es composa dels següents capítols:

- -
-
Objectes bàsics estandard
-
Aquest capítol documenta tots els objectes standard proporcionats per JavaScript, així com els seus mètodes i propietats.
-
Sentències i declaracions
-
Una aplicació en JavaScript consisteix en un conjunt de sentències amb una sintaxi adequada. Una sola sentència pot ocupar més d'una línia. Tanmateix múltimples sentències poden aparèixer en una única línia si estan separades per un punt i coma (;).
-
Funcions
-
Capítol dedicat a les funcions en JavaScript.
-
Històric de versions
-
Aquest capítol mostra les diferències entre les diferents versions de JavaScript.
-
- -

Més pàgines de referència

- - diff --git a/files/ca/web/opensearch/index.html b/files/ca/web/opensearch/index.html new file mode 100644 index 0000000000..adfa504760 --- /dev/null +++ b/files/ca/web/opensearch/index.html @@ -0,0 +1,33 @@ +--- +title: Addició de motors de cerca a les pàgines web +slug: Addició_de_motors_de_cerca_a_les_pàgines_web +tags: + - Complements + - Connectors_de_cerca +translation_of: Web/OpenSearch +translation_of_original: Web/API/Window/sidebar/Adding_search_engines_from_Web_pages +--- +

El Firefox utilitza codi JavaScript per a instaŀlar connectors de motors de cerca. Pot fer servir 3 formats: MozSearch, OpenSearch i Sherlock. +

Quan un codi JavaScript intenta instaŀlar un connector de cerca, el Firefox mostra un avís demanant a l'usuari permís per a instaŀlar-lo. +

+

Instaŀlació de connectors MozSearch i OpenSearch

+

Per a instaŀlar un connector MozSearch o OpenSearch, cal que utilitzeu el mètode DOM window.external.AddSearchProvider(). La sintaxi d'aquest mètode és: +

+
window.external.AddSearchProvider(URL_motor);
+
+

On URL_motor és l'URL al fitxer XML del connector del motor de cerca.

+
Nota: MozSearch i OpenSearch només funcionen a partir del Firefox 2.
+

Per a més detalls, consulteu Creació de connectors MozSearch. +

+

Instaŀlació de connectors Sherlock

+

Per a instaŀlar un connector Sherlock, cal que es cridi a window.sidebar.addSearchEngine(), la sintaxi és la següent: +

+
window.sidebar.addSearchEngine(URL_motor, URL_icona, Nom_suggerit, Categoria_suggerida);
+
+
  • El paràmetre URL_motor és l'URL al connector Sherlock (un fitxer «.src») per instaŀlar. +
  • URL_icona és l'URL de la icona associada al connector. +
  • El paràmetre Nom_suggerit només s'utilitza quan s'avisa a l'usuari en instaŀlar el connector. Es mostra un missatge de l'estil «Voleu instaŀlar Nom_suggerit de URL_motor?». +
  • El paràmetre sCategoria_suggerida no s'utilitza. Podeu especificar-hi una cadena en blanc ("") o null. +
+

Per a més detalls de Sherlock, visiteu http://developer.apple.com/macosx/sherlock/ +

{{ languages( { "en": "en/Adding_search_engines_from_web_pages", "it": "it/Installare_plugin_di_ricerca_dalle_pagine_web", "ja": "ja/Adding_search_engines_from_web_pages" } ) }} diff --git a/files/ca/web/progressive_web_apps/index.html b/files/ca/web/progressive_web_apps/index.html new file mode 100644 index 0000000000..53bd5eb866 --- /dev/null +++ b/files/ca/web/progressive_web_apps/index.html @@ -0,0 +1,49 @@ +--- +title: Disseny sensible (Responsive design) +slug: Web_Development/Mobile/Responsive_design +translation_of: Web/Progressive_web_apps +translation_of_original: Web/Guide/Responsive_design +--- +

Com una resposta als problemes associats a l'enfoc de desenvolupament basat en dos dissenys web separats per a cada plataforma, mòbil i escriptori, una idea relativament nova (de fet no tant) ha crescut en popularitat: oblidar-se de la detecció del user-agent des del servidor, i sustituir-ho per una plana que respongui del costat del client a les possibilitats del navegador. Aquest enfoc del problema s'ha convingut en anomenar-lo disseny web sensible. Igual que l'enfoc dels dissenys separats, el disseny web sensible té els seus avantatges i inconvenients.

+

Avantatges

+

Encara que inicialment no va ser proposat com a métode de creació de webs per a mòbils, el disseny sensible darrerament ha guanyat força atenció com una manera de construir webs amigables amb els mòbils evitant el doble esforç de desenvolupar un nou disseny només per a aquests dispositius de pantalla petita. Amb aquesta tècnica es pot abordar dos dels tres objectius del desenvolupament web per a mòbils:

+
    +
  • Presentació — Emprant un layout flexible a la teva web juntament amb media queries de CSS [NT: fulls d'estils diferents aplicats pel navegador -compatible amb CSS3- segons les dimensions de la pantalla i altres variables configurables des dels meta-tags HTML], pots fer que la teva web es vegi bé independentment del tamany de la pantalla de l'usuari.
    • +
  • Contingut — Alterant el contingut basant-te en les característiques del navegador via JavaScript, pots adaptar el missatge a cada usuari.
    • +
+

Certament hi ha un quants detalls xulos en aquest enfoc. Donat que no depén de la detecció del user-agent del navegador (des del servidor), és molt més resistent a canvis futurs en els navegadors que l'enfoc de fer un disseny per separat. Per a webs senzilles, pot ser també significativament més senzill d'implementar i mantenir que les altres opcions.

+

Inconvenients

+

Malgrat tot, aquest enfoc també té les seves limitacions. Donat que el contingut és modificat en el navegador amb Javascript, s'aconsella fer canvis mínims en el contingut. Perqué en general, les coses poden anar malament molt ràpidament si intentes modificar dos conjunts de javascript que operen en paralel sobre el mateix DOM de la plana. Aquesta és la principal raó per la qual les aplicacions web no solen emprar aquest enfoc per a les seves versions mòbils.

+

Donar a la teva web actual un disseny sensible d'aquest tipus significa una reescriptura dels teus estils CSS si ara mateix no tens implementat un layout flexible. Encara que això podria ser una bona oportunitat per a modernitzar el CSS de la teva web.

+

Per acabar, donat que has d'afegir més codi al teu javascript existent i als teus estils, l'eficiència d'aquest nou disseny pot estar per sota possiblement de l'enfoc dels dissenys web separats. No hi ha cap manera d'evitar aquest inconvenient, encara que un acurada refactorització del teu codi i dels teus estils pot estalviar-te uns quants bytes.

+

Quan és adient escollir aquesta opció

+

teixido_responsive-300x177.pngTal com s'ha mencionat abans, donat que els canvis de contingut poden ser peliaguts, quan adoptes aquest enfoc de disseny, no podràs donar als teus visitants mòbils una experiència notablement millor sense incrementar significativament la complexitat del teu codi.
+
+ Dit això, si les versions d'escriptori i de mòbil de la teva web són bastant similars llavors aquest enfoc és una gran opció. S'escau molt bé per a webs centrades en els documents que és un cas molt bàsic que encaixa bé en qualsevol dispositiu, com per exemple planes de productes. Notaràs que els exemples a sota són tots blocs o portafolis.

+

Exemples

+

Encara que no és un enfoc tan popular com el dels dissenys separats, augmenta cada dia el nombre de webs emprant el disseny sensible. Afortunadament, puix que tot el codi és per al navegador, si vols veure com un portal web implementa tècnicament aquest disseny és tan senzill com visitar la web i premer "Veure el codi font de la plana". Aquí tens uns quants exemples:

+ +

Malgrat ser un enfoc relativament jove, ja hi han escrites algunes recomanacions de bones pràtiques. Per exemple, si estàs desenvolupant una web desde zero amb aquest disseny sensible en ment, val la pena que primer generis un disseny per a pantalla petita, i d'aquesta manera tindràs en compte des del principi els condicionants d'aquestes pantalles.

+

També és més convenient fer un realçament progressiu dels teus estils en lloc d'amagar elements del teu lloc usant media queries [NT: fulls d'estils css especifics per a certes configuracions de navegador]. D'aquesta manera, els navegadors més antics que poden no ser compatibles amb els media queries encara renderitzaran d'alguna manera el contingut de la web. Una excelent presentació dels avantatges d'aquest métode la trobaràs aquí.

+

Enfocs del desenvoulpament web

+

Fes una ullada als següents articles de fons i d'enfocs i tècniques diferents per resoldre el disseny de webs pels mòbils.

+ +

Llegeix també

+ +
+

Document d'informació original

+

Originalment publicat al 27 Maig, 2011 al bloc Mozilla Webdev com "Approaches to Mobile Web Development Part 3 - Responsive Design", per Jason Grlicky.

+
+

 

diff --git a/files/ca/web/progressive_web_apps/responsive/media_types/index.html b/files/ca/web/progressive_web_apps/responsive/media_types/index.html new file mode 100644 index 0000000000..f3b14fb062 --- /dev/null +++ b/files/ca/web/progressive_web_apps/responsive/media_types/index.html @@ -0,0 +1,402 @@ +--- +title: Mitjà +slug: Web/Guide/CSS/Inici_en_CSS/Mitjà +tags: + - CSS + - 'CSS:Getting_Started' + - Example + - Guide + - Intermediate + - NeedsBeginnerUpdate + - NeedsLiveSample + - NeedsUpdate + - Web +translation_of: Web/Progressive_web_apps/Responsive/Media_types +--- +

{{CSSTutorialTOC}} {{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Tables", "Taules")}}

+ +

Aquesta és la 14th secció de la Part I del tutorial CSS Getting Started Moltes de les pàgines d'aquest tutorial s'han centrat en les propietats CSS i els valors que es poden utilitzar per especificar com mostrar un document. Aquesta pàgina es veu de nou en el propòsit i l'estructura de les fulles d'estil CSS.

+ +

Informació: Mitjà

+ +

El propòsit de CSS és especificar com els documents es presenten a l'usuari. La presentació pot tenir més d'una forma.

+ +

Per exemple, és probable que estigueu llegint aquesta pàgina en un dispositiu de visualització. Però també pot ser que el vulgueu projectar en una pantalla per a una gran audiència, o imprimir-ho. Aquests diferents mitjans poden tenir característiques diferents. CSS proporciona formes de presentar un document de manera diferent en diferents mitjans.

+ +

Per especificar regles que són específiques d'un tipus de mitjà, utilitzeu {{CSSXref("@media")}} seguit pel tipus de mitjà, seguit de claus que tanquen les regles.

+ +
+
Exemple
+ +

Un document, en un lloc web, té una àrea de navegació per permetre a l'usuari moure's pel lloc.

+ +

En el llenguatge de marcat, l'element pare de l'àrea de navegació té el id nav-area. (A {{HTMLVersionInline (5)}}, això pot ser marcat amb l'element {{HTMLElement("nav")}} en lloc de {{HTMLElement("div")}} amb un atribut id.)

+ +

Quan s'imprimeix el document, l'àrea de navegació no té cap propòsit, de manera que la fulla d'estil l'elimina per complet:

+ +
@media print {
+  #nav-area {display: none;}
+  }
+
+
+ +

Alguns dels tipus de mitjans comuns són:

+ + + + + + + + + + + + + + + + + + + + +
screenColor pantalla ordinador
printMitjans paginats
projectionPantalla projectada
allTots els mitjans (per defecte)
+ +
+
Més detalls
+ +

Hi ha altres formes d'especificar el tipus de mitjà d'un conjunt de regles.

+ +

El llenguatge de marcat del document pot permetre que s'especifiqui el tipus de mitjà quan la fulla d'estil està vinculada al document. Per exemple, en HTML es pot especificar opcionalment el tipus de mitjà amb un atribut media en l'etiqueta LINK.

+ +

En CSS podeu utilitzar {{CSSXref("@import")}} a l'inici d'una fulla d'estil per importar un altre fulla d'estil des d'una URL, especificant opcionalment el tipus de mitjà.

+ +

Mitjançant l'ús d'aquestes tècniques es poden separar regles d'estil per a diferents tipus de mitjans en diferents arxius. Això de vegades és una forma útil d'estructurar les fulles d'estil.

+ +

Per a més detalls sobre els tipus de mitjans, vegeu Mtjà en l'especificació CSS.

+ +

Hi ha més exemples de la propietat {{cssxref ("display")}} en una pàgina posterior d'aquest tutorial: dades XML.

+
+ +

Impressió

+ +

CSS té algun suport específic per a la impressió i dels mitjans paginats en general.

+ +

Un regla {{cssxref("@page")}} pot establir els marges de pàgina. Per a la impressió a doble cara, es poden definir els marges per separat per a @page:left i @page:right.

+ +

Per als mitjans d'impressió, normalment s'utilitza com a unitats de longitud les polzades (in) i punts (pt = 1/72 polzades) o centímetres (cm) i mil·límetres (mm). És igualment apropiat utilitzar ems (em) perquè coincideixi amb la mida de font i percentatges (%).

+ +

Podeu controlar la forma en què el contingut del document es divideix entre els límits de pàgina, mitjançant l'ús de les propietats {{cssxref("page-break-before")}}, {{cssxref("page-break-after")}} i {{cssxref("page-break-inside")}}.

+ +
+
Exemple
+ +

Aquesta regla estableix els marges de pàgina a una polzada en els quatre costats:

+ +
@page {margin: 1in;}
+
+ +

Aquesta regla assegura que cada element H1 comença en una nova pàgina:

+ +
h1 {page-break-before: always;}
+
+
+ +
+
Més detalls
+ +

Per als detalls complets de suport de CSS per als mitjans paginats, veure Mitjans paginats en l'especificació CSS.

+ +

Igual que altres característiques de CSS, la impressió depèn del navegador i la seva configuració. Per exemple, el navegador Mozilla subministra marges predeterminats, capçaleres i peus quan s'imprimeix. Quan altres usuaris imprimeixin el document, és probable que no sapigan quin navegador és i quina  configuració té, de manera que és possible que no poguin controlar completament els resultats.

+
+ +

Interfícies d'usuari

+ +

CSS té algunes propietats especials per als dispositius que suporten una interfície d'usuari, com pantalles d'ordinador. Això fa que l'aspecte del document canvii dinàmicament a mesura que l'usuari treballa amb la interfície.

+ +

No hi ha cap tipus de mitjà especial per als dispositius amb interfícies d'usuari.

+ +

Hi ha cinc selectors especials:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SelectorSelects
E{{cssxref(":hover")}}Qualsevol element E que té el punter sobre ell
E{{cssxref(":focus")}}Qualsevol element E que té el focus del teclat
E{{cssxref(":active")}}L'element E que està implicat en l'acció de l'usuari actual
E{{cssxref(":link")}}Qualsevol element E que és un hipervincle a una adreça URL que l'usuari no ha visitat recentment
E{{cssxref(":visited")}}Qualsevol element E que és un hipervincle a una adreça URL que l'usuari ha visitat recentment
+ +
+

Nota: La informació que es pot obtenir del selector :visited està restringida a {{gecko("2.0")}}. Veure Privacitat i el selector :visited per a més detalls.

+
+ +

La propietat {{cssxref("cursor")}} especifica la forma del punter: Algunes de les formes comunes són els següents. Col·loqueu el ratolí sobre els elements de la llista per veure les formes de punter reals en el vostre navegador:

+ + + + + + + + + + + + + + + + + + + + + + + + +
SelectorSelects
pointerIndica un vincle
waitIndica que el programa no pot acceptar l'entrada
progressIndica que el programa està funcionant, encara pot acceptar l'entrada
defaultEl valor per defecte (normalment una fletxa)
+ +

Una propietat {{cssxref("outline")}} crea un contorn que sovint s'utilitza per indicar el focus del teclat. Els seus valors són similars a la propietat {{cssxref("border")}}, excepte que no es poden definir els costats individualment.

+ +

Algunes altres característiques de les interfícies d'usuari s'implementen utilitzant atributs, en la forma normal. Per exemple, un element que és deshabilitat o de només lectura té l'atribut disabled o l'atribut readonly. Els selectors poden especificar aquests atributs com qualsevol altre atribut, mitjançant l'ús de claudàtors: {{mediawiki.external('disabled')}} o {{mediawiki.external('readonly')}}.

+ +
+
Exemple
+ +

Aquestes regles especifiquen els estils per a un botó que canvia dinàmicament a mesura que l'usuari interactua amb ell:

+ +
.green-button {
+  background-color:#cec;
+  color:#black;
+  border:2px outset #cec;
+  }
+
+.green-button[disabled] {
+  background-color:#cdc;
+  color:#777;
+  }
+
+.green-button:active {
+  border-style: inset;
+  }
+
+ +

Aquest wiki no és compatible amb una interfície d'usuari en la pàgina, pel que aquests botons no "fan clic". Aquestes són algunes de les imatges estàtiques per il·lustrar la idea:

+ + + + + + + +
+ + + + + + + + + + + + + + + + +
Click MeClick MeClick Me
 
deshabilitatnormalactiu
+
+ +

Un botó completament funcional també té un contorn fosc al voltant de tot el botó quan el valor és per defecte, i un contorn en línia de punts a la cara del botó quan té el focus del teclat. També podria tenir un efecte estacionari quan el punter es troba a sobre d'ell.

+
+ +
+
Més detalls
+ +

Per obtenir més informació sobre les interfícies d'usuari en el CSS, vegeu Interfície d'usuari en l'especificació CSS.

+ +

Hi ha un exemple del llenguatge de marcat de Mozilla per a interfícies d'usuari, XUL, en la Part II d'aquest tutorial.

+
+ +

Acció: Impressió d'un document

+ +
    +
  1. Feu un nou document HTML, doc4.html. Copieu i enganxeu el contingut d'aquí: + + 
    <!DOCTYPE html>
+<html>
+  <head>
+    <title>Print sample</title>
+    <link rel="stylesheet" href="style4.css">
+  </head>
+  <body>
+    <h1>Section A</h1>
+    <p>This is the first section...</p>
+    <h1>Section B</h1>
+    <p>This is the second section...</p>
+    <div id="print-head">
+      Heading for paged media
+    </div>
+    <div id="print-foot">
+      Page:
+    </div>
+</body>
+</html>
+
    +
    2. +
  2. Feu una nova fulla d'estil, style4.css. Copieu i enganxeu el contingut d'aquí: + 
    /*** Print sample ***/
+
+/* defaults  for screen */
+#print-head,
+#print-foot {
+  display: none;
+  }
+
+/* print only */
+@media print {
+
+h1 {
+  page-break-before: always;
+  padding-top: 2em;
+  }
+
+h1:first-child {
+  page-break-before: avoid;
+  counter-reset: page;
+  }
+
+#print-head {
+  display: block;
+  position: fixed;
+  top: 0pt;
+  left:0pt;
+  right: 0pt;
+
+  font-size: 200%;
+  text-align: center;
+  }
+
+#print-foot {
+  display: block;
+  position: fixed;
+  bottom: 0pt;
+  right: 0pt;
+
+  font-size: 200%;
+  }
+
+#print-foot:after {
+  content: counter(page);
+  counter-increment: page;
+  }
+
+} /* end print only */
+
    +
    3. +
  3. Vegeu aquest document en el vostre navegador; utilitza l'estil per defecte del navegador.
    4. +
  4. Imprimir (o vista prèvia d'impressió) el document; la fulla d'estil col·loca cada secció en una pàgina separada, i s'afegeix una capçalera i peu de pàgina per a cada pàgina. Si el navegador és compatible amb els comptadors, s'agrega un número de pàgina al peu de pàgina. + + + + + + + +
    + + + + + + +
    + + + + + + +
    +
    Heading for paged media
    + +
    Section A
    + +
    This is the first section...
    + +
    Page: 1
    +
    +
    +     		+ + + + + + +
    + + + + + + +
    +
    Heading for paged media
    + +
    Section B
    + +
    This is the second section...
    + +
    Page: 2
    +
    +
    +
    +
    5. +
+ + + + + + + + +
Reptes
Moveu les regles d'estil específiques d'impressió en un fitxer CSS independent. +

Llegiu la pàgina de referència {{CSSXref("@import")}} per trobar detalls de com importar el nou arxiu CSS específic de la impressió en el vostre full d'estil style4.css.

+ +

Feu que els encapçalaments es tornin blaus quan el punter del ratolí estigui sobre ells.

+
+ +

Veure la solució per el repte.

+ +

I ara què?

+ +

Si teniu dificultats per entendre aquesta pàgina, o si teniu altres comentaris al respecte, si us plau, contribuïu a la vostre pàgina de Discussió.

+ +

Fins al moment, totes les regles d'estil en aquest tutorial s'han especificat en els arxius. Les regles i els seus valors són fixos. La pàgina següent descriu com poden canviar les regles de forma dinàmica mitjançant l'ús d'un llenguatge de programació: JavaScript

diff --git a/files/ca/web/svg/tutorial/svg_and_css/index.html b/files/ca/web/svg/tutorial/svg_and_css/index.html new file mode 100644 index 0000000000..6dac20b5a6 --- /dev/null +++ b/files/ca/web/svg/tutorial/svg_and_css/index.html @@ -0,0 +1,223 @@ +--- +title: SVG i CSS +slug: Web/Guide/CSS/Inici_en_CSS/SVG_i_CSS +tags: + - CSS + - 'CSS:Getting_Started' + - Example + - Guide + - Intermediate + - NeedsLiveSample + - NeedsUpdate + - SVG + - Web +translation_of: Web/SVG/Tutorial/SVG_and_CSS +--- +
{{CSSTutorialTOC}}
+ +

Aquesta pàgina il·lustra l'aplicació de CSS per al llenguatge especialitzat en la creació de gràfics: SVG.

+ +

Crea una demostració senzilla que s'executa en el vostre navegador habilitat per SVG.

+ +

Aquesta és la 2nd secció de la Part II del tutorial CSS.
+ Secció anterior: JavaScript
+ Secció següent: XML data

+ +

Informació: SVG

+ +

SVG (Scalable Vector Graphics) és un llenguatge basat en XML per a la creació de gràfics.

+ +

Es pot utilitzar per a imatges estàtiques, i també per a animacions i interfícies d'usuari.

+ +

Igual que altres llenguatges basats en XML, SVG suporta fulles d'estil CSS perquè pugui separar l'estil d'un gràfic del seu contingut.

+ +

A més, les fulles d'estil que s'utilitzen amb altres llenguatges de marcat de documents poden especificar l'adreça URL d'un gràfic SVG on es requereix una imatge. Per exemple, una fulla d'estil que s'utilitza amb un document HTML pot especificar l'adreça URL d'un gràfic SVG en el valor d'una propietat background.

+ + + + + + + + +
Més detalls
+

En el moment d'escriure (mitjans 2011), la majoria dels navegadors moderns tenen suport bàsic per a SVG, incloent Internet Explorer 9 o superior. Algunes de les característiques de SVG són compatibles parcialment o no en alguns navegadors. Consulteu les taulae SVG en caniuse.com per a una visió general de suport per SVG, o les taules de compatibilitat referència de l'element SVG per al suport de determinats elements.

+ +

Podeu afegir suport SVG a altres versions mitjançant la instal·lació d'un plug-in, com el proporcionat per Adobe.

+ +

Per obtenir més informació sobre SVG en Mozilla, consulteu la pàgina principal de SVG al wiki.

+
+ +

Acció: Una demostració SVG

+ +

Feu un nou document SVG com un arxiu de text pla, doc8.svg. Copieu i enganxeu el contingut d'aquí, assegurant-se que us desplaceu per obtenir tota ella;

+ +
<?xml version="1.0" standalone="no"?>
+
+<?xml-stylesheet type="text/css" href="style8.css"?>
+
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
+<svg width="600px" height="600px" viewBox="-300 -300 600 600"
+  xmlns="http://www.w3.org/2000/svg" version="1.1"
+  xmlns:xlink="http://www.w3.org/1999/xlink">
+
+<title>SVG demonstration</title>
+<desc>Mozilla CSS Getting Started - SVG demonstration</desc>
+
+<defs>
+  <g id="segment" class="segment">
+    <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
+    <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+    </g>
+  <g id="quadrant">
+    <use xlink:href="#segment"/>
+    <use xlink:href="#segment" transform="rotate(18)"/>
+    <use xlink:href="#segment" transform="rotate(36)"/>
+    <use xlink:href="#segment" transform="rotate(54)"/>
+    <use xlink:href="#segment" transform="rotate(72)"/>
+    </g>
+  <g id="petals">
+    <use xlink:href="#quadrant"/>
+    <use xlink:href="#quadrant" transform="rotate(90)"/>
+    <use xlink:href="#quadrant" transform="rotate(180)"/>
+    <use xlink:href="#quadrant" transform="rotate(270)"/>
+    </g>
+  <radialGradient id="fade" cx="0" cy="0" r="200"
+      gradientUnits="userSpaceOnUse">
+    <stop id="fade-stop-1" offset="33%"/>
+    <stop id="fade-stop-2" offset="95%"/>
+    </radialGradient>
+  </defs>
+
+<text id="heading" x="-280" y="-270">
+  SVG demonstration</text>
+<text  id="caption" x="-280" y="-250">
+  Move your mouse pointer over the flower.</text>
+
+<g id="flower">
+  <circle id="overlay" cx="0" cy="0" r="200"
+    stroke="none" fill="url(#fade)"/>
+  <use id="outer-petals" xlink:href="#petals"/>
+  <use id="inner-petals" xlink:href="#petals"
+    transform="rotate(9) scale(0.33)"/>
+  </g>
+
+</svg>
+
+ +

Feu una nou arxiu CSS, style8.css. Copieu i enganxeu el contingut d'aquí, assegurant-se que us desplaceu per obtenir tota ella;

+ +
/*** SVG demonstration ***/
+
+/* page */
+svg {
+  background-color: beige;
+  }
+
+#heading {
+  font-size: 24px;
+  font-weight: bold;
+  }
+
+#caption {
+  font-size: 12px;
+  }
+
+/* flower */
+#flower:hover {
+  cursor: crosshair;
+  }
+
+/* gradient */
+#fade-stop-1 {
+  stop-color: blue;
+  }
+
+#fade-stop-2 {
+  stop-color: white;
+  }
+
+/* outer petals */
+#outer-petals {
+  opacity: .75;
+  }
+
+#outer-petals .segment-fill {
+  fill: azure;
+  stroke: lightsteelblue;
+  stroke-width: 1;
+  }
+
+#outer-petals .segment-edge {
+  fill: none;
+  stroke: deepskyblue;
+  stroke-width: 3;
+  }
+
+#outer-petals .segment:hover > .segment-fill {
+  fill: plum;
+  stroke: none;
+  }
+
+#outer-petals .segment:hover > .segment-edge {
+  stroke: slateblue;
+  }
+
+/* inner petals */
+#inner-petals .segment-fill {
+  fill: yellow;
+  stroke: yellowgreen;
+  stroke-width: 1;
+  }
+
+#inner-petals .segment-edge {
+  fill: none;
+  stroke: yellowgreen;
+  stroke-width: 9;
+  }
+
+#inner-petals .segment:hover > .segment-fill {
+  fill: darkseagreen;
+  stroke: none;
+  }
+
+#inner-petals .segment:hover > .segment-edge {
+  stroke: green;
+  }
+
+ +

Obriu el document en el navegador habilitat per SVG. Moure el punter del ratolí sobre el gràfic.

+ +

Aquest wiki no suporta SVG en les pàgines, de manera que no es pot mostrar la demostració aquí. El gràfic es veu així:

+ + + + + + + +
SVG demonstration
+ +

Notes sobre aquesta demostració:

+ +
    +
  • El document SVG vincula la fulla d'estil de la forma habitual.
    • +
  • SVG té les seves pròpies propietats i valors CSS. Algunes d'elles són similars a les propietats CSS per a HTML.
    • +
+ + + + + + + + +
Repte
Canvieu la fulla d'estil perquè els pètals interns es tornin tots de color rosa quan el punter del ratolí està sobre qualsevol d'ells, sense canviar la forma en què els pètals externs funcionen.
+ +

Veure la solució per el repte.

+ +

I ara què?

+ +

En aquesta demostració, el vostre navegador habilitat per SVG  ja sap com mostrar els elements SVG. La fulla d'estil només modifica la visualització de certes maneres. Això també és cert per als documents HTML i XUL. Però es pot utilitzar CSS per a documents XML d'ús general, on no hi ha un camí predefinit per mostrar els elements. La pàgina següent mostra això: dades XML

diff --git a/files/ca/web_development/index.html b/files/ca/web_development/index.html deleted file mode 100644 index ba6fb934f0..0000000000 --- a/files/ca/web_development/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: Desenvolupament web -slug: Web_Development -tags: - - NeedsTranslation - - TopicStub - - Web Development -translation_of: Web/Guide -translation_of_original: Web_Development ---- -

El desenvolupament web comprèn tots els aspectes de construir un portal o aplicació web.

-

Aprèn a crear qualsevol cosa des d'una simple web fins a una web complexa i altament interactiva emprant les darreres tecnologies web  fullejant els articles que et mostrem aquí.

- - - - - - - -
-

DOCUMENTACIÓ

-

Tecnologies

-
-
- Introducció al desenvolupament web
-
- Una guia de com desenvolupar webs.
-
- HTML
-
- L' HyperText Markup Language (en català, Llenguatge de Marcació de Hipertext) és el llenguatge basic per a la creació de webs i d'altres documents mostrats en un navegador.
-
- CSS
-
- Els Cascading Style Sheets (en català, Fulls d'estils en cascada) fan possible construir sofisticats layouts per a les planes web.
-
- [NT: layouts podria traduir-se per estructura o disposició dels elements, però donada la generalitzada acceptació del terme en anglés he optat per no adaptar-lo al català]
-
- JavaScript
-
- JavaScript és el llenguatge de programació (scripting) més comú per programar aplicacions web en el costat del navegador. A més, és emprat en el desenvolupament del software de Mozilla.
-
- DOM
-
- De l'anglès Document Object Model (en català, Model de l'Objecte Document) és una API per a documents HTML i XML, que proporciona una representació de l'estructura del document i els seus elements que hom pot modificar per a alterar la visualització del mateix.
-
- AJAX
-
- De l'anglès Asynchronous JavaScript and XML (Javascript i XML Asincrònic) més que una tecnologia és una combinació de tecnologies, usant Javascript i d'altres tecnologies del costat del navegador per comunicar-se amb el servidor sense recarregar la plana sencera, lo qual permet crear aplicacions dinàmiques de qualitat.
-
- XHTML
-
- De l'anglès Extensible HyperText Markup Language (Llenguatge de marcació hipertext extensible) és un llenguatge de marcatge com el HTML però que respecte les regles formals del XML que ofereix una sintaxi més estricta però més robusta i potent que l'HTML.
-
- SVG
-
- De l'anglès Scalable Vector Graphics (gràfics de vectors escalables) és un llenguatge de marcatge XML per dibuizar gràfics vectorials 2D.
-
-

Estratègies

-
-
- Estàndars web
-
- Aprèn com fer que la teva web o aplicació pugui ser emprada pel màxim nombre possible d'usuaris gràcies a fer-la compatible amb la web oberta (open web).
-
- Disseny web sensible
-
- Juga amb el CSS per a presentar el mateix contingut a qualsevol plataforma, des de telèfons mòbils fins a pantalles amples de màquines d'escriptori d'alta resolució.
-
- Construir webs compatibles amb equips vells i moderns
-
- Les millors pràctiques per a crear webs que no es trenquen quan s'actualitzen els navegadors dels usuaris.
-
- Construir webs pel mòbil
-
- Desenvolupar webs per ser vistes en dispositius mòbils requereix prendre certes mesures úniques a les que potser no estàn avessats els desenvolupadors habituals de webs per a navegadors d'ordinadors d'escriptori.
-
- Preguntes freqüents del desenvolupador web respostes, per Mozilla
-
- Llegeix les respostes de Mozilla a les preguntes més freqüents dels desenvolupadors web.
-
-

Veure-ho tot...

- 		-

COMUNITAT

- -

EINES

- -

Veure-ho tot...

-
-

 

diff --git a/files/ca/web_development/mobile/a_hybrid_approach/index.html b/files/ca/web_development/mobile/a_hybrid_approach/index.html deleted file mode 100644 index da2ee0a625..0000000000 --- a/files/ca/web_development/mobile/a_hybrid_approach/index.html +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: Una solució híbrida -slug: Web_Development/Mobile/A_hybrid_approach -translation_of: Web/Guide/Mobile/A_hybrid_approach ---- -

Les bales de plata costen de trobar en el desenvolupament web — és molt més probable que empris estratègies que fan ús de vàries tècniques segons les circumstàncies. I això ens du a la nostra tercera solució pel desenvolupament web amigable amb el mòbil, que tracta d'evitar les deficiències de les altres dues solucions (diferents webs i única web amb disseny sensible), combinant-les.

-

Aquest enfoc híbrid se centra en atacar per separat cada un dels tres objectius del desenvolupament web per als mòbils, i aplicar les millors solucions tècniques disponibles a cada un d'ells. Aquest article presenta aquí una potencial combinació de tècniques, però en altres circumstàncies pot convenir una combinació diferent. El concepte clau que cal recordar i entendre és que per resoldre les teves necesitats concretes pots combinar les tècniques que calgui de banda del servidor amb les aplicades al navegador.

-

Avantatges

-

El disseny sensible (responsive design) està força bé — ara mateix [NT: juny 2011] és la millor tècnica disponible per a fer que els nostres layouts web es vegin bé en una àmplia varietat de circumstàncies. Si l'ús que se li ha de donar a les versions mòbil i de PC de la teva web són suficientment similars, llavors aquesta és la solució preferible pels teus layouts. Encara que -no s'ha d'oblidar- pot ser una mica cansat continuament usar tècniques (CSS i Javascript) per modificar la presentació de continguts que es presenten segons el context.

-

Afortunadament, no hi ha motius tècnics que ens forcin a emprar tècniques de la banda del navegador per a aquesta tasca: tenim l'opció de fer servir la detecció del user-agent des de la banda del servidor per a escollir el contingut que volem mostrar a l'usuari. Això no reduirïa la complexitat d'alterar el contingut des de la banda del servidor, però encara permetria que els nostres layouts es beneficiessin de la flexibilitat i futura llegibilitat del disseny sensible.

-

L'ús de la detecció del user-agent pel contingut i no pas pel layout també et permetria tenir una única URL per a ambdós continguts, puix que el contingut pot adaptar la seva disposició al navegador de l'usuari. Això normalment es veu com a una bona solució. En lloc de mantenir dues versions completament diferents de la web, simplement redirigim els usuaris a les planes amb el contingut que els hi escau. I donat que el disseny és sensible, saps que cada plana es veurà tan bé com és possible a la pantalla de l'usuari.

-

També podem donar solució a alguns dels problemes de rendiment del disseny sensible incorporant certes tècniques des de la banda del servidor. Per exemple, un dels punts més criticats als dissenys sensibles és que les imatges són enviades a tots els dispositius amb la mateixa resolució, incloent telèfons els quals redimensionen les imatges inteligentment. Una tècnica per a evitar aquest inconvenient empra la detecció del user-agent des del servidor juntament amb la llibreria de detecció de capacitat del dispositiu de WURFL per a enviar una imatge ja reescalada segons el dispositiu de l'usuari. Estan sorgint una àmplia gama de productes que proporcionen això com a webservice. És clar, aquesta tècnica pateix els desavantatges associats a la deteccció del user-agent. Però inclús si això no funciona, el rendiment no és pitjor que emprant només imatges fluides.

-

Combinant les tècniques ja mencionades, podem obtenir una estratègia de desenvolupament web mòbil que és més flexible que les webs fetes diferents (mòbil vs. PC) i té millor rendiment que un disseny sensible pur.

-

Inconvenients

-

Un inconvenient de les solucions híbrides és que poden conduir a un augment en el nombre de vies de codi que treballen en paralel, tant del costat del navegador com del servidor. Això és tradueix en un molt probablement major consum de temps en programació que d'altres solucions. Encara que amb la correcta planificació, podem tenir el codi organitzat d'una manera asequible per les tasques de manteniment.

-

Un altre inconvenient és que com que aquesta solució romàn sobre l'ús d'un disseny sensible, és més factible i eficaç per a projectes de nova planta o que ja disposen d'un layout flexible, però no és així per a webs que ja tenen la versió d'escriptori ben construida. De igual forma, puix que emprem la detecció del user-agent, hauràs d'actualitzar les regles de detecció amb el temps continuament. [NT: donat que ja s'ha esmentat que hi ha web services que faciliten aquesta tasca amb un grau òptim de fiabilitat i amb facilitat d'integració en qualsevol CMS com una extensió o llibreria, no li veig al què a aquest inconvenient... és una opinió personal].

-

Quan és adient escollir aquesta solució

-

Sempre té sentit considerar combinar tecnologies del costat del navegador i del servidor; n'hi ha tantes opcions disponibles en aquest sentit que convé calibrar els pros i els contres de cada tècnica que emprem.

-

En molts casos, no és necesària la complexitat afegida del model híbrid. Per exemple, potser ni necesites ajustar el contingut en funció del dispositiu emprat per l'usuari —podria ser suficient sabent si una característica és present al seu navegador. Això ho podries discernir des del costat del navegador emprant una detecció per javascript. No pot fer mal excavar una mica i preguntar-te al voltant de quin eix vols centrar el teu contingut en cada cas.

-

Hem parlat d'afegir tècniques del costat del servidor a un disseny sensible, però també hi ha formes d'implementar un sistema híbrid per a casos on necesites que les versions mòbil i d'escriptori siguin diferents. Podries, per exemple, augmentar la flexibilitat d'amdós versions incorporant a cada una d'elles media queries [NT: indicar al navegador que carregui i apliqui diferents fulls d'estils CSS segons les característiques físiques del navegador] i un layout flexible. D'aquesta forma podries fer que la teva versiò mòbil treballés millor -més adaptativament- sobre les tabletes.well.

-

Exemples

-

webowonder_mobile_and_desktop-300x225.jpgPer a la web demo de Mozilla O’ Wonder, vam provar una versió bàsica de solució híbrida, amb resultats positius. Vam emprar alguns elements de disseny web sensible per donar a la web un layout mòbil, mentres que empràvem la deteccció de user-agent per a oferir videos amigables amb el mòbil i per a re-ordenar les demos si l'usuari era en un telèfon. Fes una ullada al seu codi si vols, que tenim al github.

-

Ben aviat podríem estar fent més desenvolupaments en aquesta línia! De fet, una possible via per a la web principal de Mozilla s'ha esbossat amunt a la secció "Avantatges":

-
    -
  • Emprant la detecció de user-agent, dirigir als visitants a una plana de benvinguda per a la versió de Firefox del seu dispositiu.
    • -
  • Cada plana de la web hauria de veure's genial a una àmplia varietat de resolucions de pantalla, construint-se amb un disseny sensible en ment.
    • -
  • Hi ha plans futurs de provar de servir imatges adaptades a diferents user-agent.
    • -
-

De moment no hi ha gaire que veure pel mòbil, puix que encara som a la etapa de planificació del desenvolupament, però sempre pots visitar i veure com creix el nou mozilla.org al github. Suscriu-te al bloc Mozilla Webdev per assebentar-te dels progressos que fem.

-

Resum

-

No hi ha una solució única per tots els casos. Les aplicacions web que pels usuaris de la versió mòbil necesiten adaptar molt els continguts o les funcionalitats que ofereixen probablement hauran de desenvolupar una web diferent a la d'escriptori. En canvi, planes orientades al contingut que no necesiten modificar el contingut pels usuaris mòbils quedaran bastant satisfets amb un disseny web sensible. Si el que necesites és canviar només lleugerament el missatge pels usuaris mòbils, i vols conservar els beneficis d'un disseny sensible, una solució híbrida pot ser la teva millor opció. Decisions com aquesta són al cor del desenvolupament de webs mòbils: sigues concret en quan al que t'agradaria aconseguir, i escull una solució pràctica sient conscient dels avantatges i inconvenients. Bona sort!

-

Enfocs del desenvolupament de webs mòbils

-

Llegeix els articles següents per a entendre el fons i les estratègies de desenvolupament per a mòbils.

- -
-

Informació del document original

-

Aquest article va ser publicat originalment al 27 de Juny de 2011, al bloc Mozilla Webdev com "Approaches to Mobile Web Development Part 4 – A Hybrid Approach", per Jason Grlicky.

-
-

 

diff --git a/files/ca/web_development/mobile/index.html b/files/ca/web_development/mobile/index.html deleted file mode 100644 index 84a810eb1c..0000000000 --- a/files/ca/web_development/mobile/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: Desenvolupament de webs per a mòbils -slug: Web_Development/Mobile -tags: - - Mobile - - NeedsTranslation - - TopicStub - - Web Development -translation_of: Web/Guide/Mobile -translation_of_original: Web_Development/Mobile ---- -

Construir webs per ser vistes en dispositius mòbils requereix prendre solucions que assegurin que la web funcioni igual de bé en dispositius mòbils com ho fa en navegadors d'escriptori. Els següents articles descriuen algunes d'aquestes solucions:

- diff --git a/files/ca/web_development/mobile/mobile-friendliness/index.html b/files/ca/web_development/mobile/mobile-friendliness/index.html deleted file mode 100644 index b5ed1bbdb4..0000000000 --- a/files/ca/web_development/mobile/mobile-friendliness/index.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: Webs amigables amb els mòbils -slug: Web_Development/Mobile/Mobile-friendliness -translation_of: Web/Guide/Mobile/Mobile-friendliness ---- -

Què és una web amigable amb els mòbils?

-

Vol dir multitud de coses segons amb qui parlis. Lo millor és veure aquest assumpte prenent com a referent els 3 objectius per a millorar l'experiència dels teus usuaris: presentació, contingut, i rendiment.

-

Objectiu #1 (presentació)

-

“Fes webs que treballin bé en qualsevol mida de pantalla.”

-

Avui dia els usuaris accedeixen a les webs emprant una gama amplísima de dispositius que inclou telèfons, tabletes, eReaders, netbooks, a banda dels tradicionals ordinadors d'escriptori i dels portàtils. I no cal dir que una web amb una estructura d'amplada fixe i 3 columnes, que a més usa intensivament javascript, efectes mouse-over, etc. no es veurà molt bé en una pantalla de 2 polzades d'amplada i un processador poc potent. En canvi, una estructura molt més aprimada, amb una estructura i uns elements redimensionats al tamany d'aquesta petita pantalla tàctil probablement garantirà una molt millor experiència de navegació. Aquesta és la raó per la que el primer objectiu és presentar adequadament el contingut de tal manera que els usuaris mòbils tingui la vida més fàcil.

-

Objectiu #2 (contingut)

-

“Adapta els teus continguts per als usuaris mòbils.”alaska_air_mobile_and_desktop-300x225.png

-

Has de rumiar què deuen voler fer els que visiten la teva web des del telèfon. Un bon exemple d'això és la plana d' Alaska Air’s. La seva web per a escriptori se centra en que els visitants facin reserves. Però probablement els usuaris mòbils estan més interessats en el check-in per a un vol, o veure si aquest vol s'ha retrasat. Per això van ajustar el continguts de les seves webs d'acord amb aquest raonament, i així estan atenent millor les necesitats dels usuaris mòbils.

-

Objectiu #3 (rendiment)

-

“Dona als teus usuaris una experiència fluïda, fins i tot amb una conexió lenta.”

-

Malgrat que la qüestió de la velocitat de conexió ha millorat força en els darrers anys, massa sovint continua sent bastant farragós la navegació sense cables des d'un dispositiu mòbil. Això fa que sigui més necesari que mai posar en pràctica tècniques d'optimització del rendiment, enviant a l'usuari exclusivament aquells bits que siguin estrictament necesaris.

-

Coneix el teu públic

-

Encara que no sigui quelcom estrictament específic de la definició de lo que és amigable amb el mòbil, definir qui i com són els teus potencials usuaris de la teva web mòbil ajuda a concretar els tres objectius anteriors. Per exemple, és absolutament crític tenir en ment a quins navegadors i dispositius et dirigiràs quan defineixis la teva estratègia. Si entre la teva audiència hi ha molts early-adopters [NT: gent que sol ser dels primers en adquirir les innovacions tecnològiques], llavors et pots enfocar en tabletes i telèfons amb navegadors que solen respectar els estàndars. Però si en canvi, la majoria dels teus usuaris disposen de telèfons amb navegadors de menys capacitat, això hauria de fer desestimar segons quines estratègies o dissenys com a opcions viables.

-

Enfocs pel desenvolupament de webs mòbils

-

Els següents enfocs difereixen en com tracten de resoldre els objectius d'usabilitat que hem estat comentant.

- -
-

Informació del document original

-

Originalment publicat el 4 de Maig, 2011 al bloc Mozilla Webdev com "Approaches to Mobile Web Development Part 1 - What is Mobile Friendliness?", per Jason Grlicky.

-
-

 

diff --git a/files/ca/web_development/mobile/responsive_design/index.html b/files/ca/web_development/mobile/responsive_design/index.html deleted file mode 100644 index 53bd5eb866..0000000000 --- a/files/ca/web_development/mobile/responsive_design/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: Disseny sensible (Responsive design) -slug: Web_Development/Mobile/Responsive_design -translation_of: Web/Progressive_web_apps -translation_of_original: Web/Guide/Responsive_design ---- -

Com una resposta als problemes associats a l'enfoc de desenvolupament basat en dos dissenys web separats per a cada plataforma, mòbil i escriptori, una idea relativament nova (de fet no tant) ha crescut en popularitat: oblidar-se de la detecció del user-agent des del servidor, i sustituir-ho per una plana que respongui del costat del client a les possibilitats del navegador. Aquest enfoc del problema s'ha convingut en anomenar-lo disseny web sensible. Igual que l'enfoc dels dissenys separats, el disseny web sensible té els seus avantatges i inconvenients.

-

Avantatges

-

Encara que inicialment no va ser proposat com a métode de creació de webs per a mòbils, el disseny sensible darrerament ha guanyat força atenció com una manera de construir webs amigables amb els mòbils evitant el doble esforç de desenvolupar un nou disseny només per a aquests dispositius de pantalla petita. Amb aquesta tècnica es pot abordar dos dels tres objectius del desenvolupament web per a mòbils:

-
    -
  • Presentació — Emprant un layout flexible a la teva web juntament amb media queries de CSS [NT: fulls d'estils diferents aplicats pel navegador -compatible amb CSS3- segons les dimensions de la pantalla i altres variables configurables des dels meta-tags HTML], pots fer que la teva web es vegi bé independentment del tamany de la pantalla de l'usuari.
    • -
  • Contingut — Alterant el contingut basant-te en les característiques del navegador via JavaScript, pots adaptar el missatge a cada usuari.
    • -
-

Certament hi ha un quants detalls xulos en aquest enfoc. Donat que no depén de la detecció del user-agent del navegador (des del servidor), és molt més resistent a canvis futurs en els navegadors que l'enfoc de fer un disseny per separat. Per a webs senzilles, pot ser també significativament més senzill d'implementar i mantenir que les altres opcions.

-

Inconvenients

-

Malgrat tot, aquest enfoc també té les seves limitacions. Donat que el contingut és modificat en el navegador amb Javascript, s'aconsella fer canvis mínims en el contingut. Perqué en general, les coses poden anar malament molt ràpidament si intentes modificar dos conjunts de javascript que operen en paralel sobre el mateix DOM de la plana. Aquesta és la principal raó per la qual les aplicacions web no solen emprar aquest enfoc per a les seves versions mòbils.

-

Donar a la teva web actual un disseny sensible d'aquest tipus significa una reescriptura dels teus estils CSS si ara mateix no tens implementat un layout flexible. Encara que això podria ser una bona oportunitat per a modernitzar el CSS de la teva web.

-

Per acabar, donat que has d'afegir més codi al teu javascript existent i als teus estils, l'eficiència d'aquest nou disseny pot estar per sota possiblement de l'enfoc dels dissenys web separats. No hi ha cap manera d'evitar aquest inconvenient, encara que un acurada refactorització del teu codi i dels teus estils pot estalviar-te uns quants bytes.

-

Quan és adient escollir aquesta opció

-

teixido_responsive-300x177.pngTal com s'ha mencionat abans, donat que els canvis de contingut poden ser peliaguts, quan adoptes aquest enfoc de disseny, no podràs donar als teus visitants mòbils una experiència notablement millor sense incrementar significativament la complexitat del teu codi.
-
- Dit això, si les versions d'escriptori i de mòbil de la teva web són bastant similars llavors aquest enfoc és una gran opció. S'escau molt bé per a webs centrades en els documents que és un cas molt bàsic que encaixa bé en qualsevol dispositiu, com per exemple planes de productes. Notaràs que els exemples a sota són tots blocs o portafolis.

-

Exemples

-

Encara que no és un enfoc tan popular com el dels dissenys separats, augmenta cada dia el nombre de webs emprant el disseny sensible. Afortunadament, puix que tot el codi és per al navegador, si vols veure com un portal web implementa tècnicament aquest disseny és tan senzill com visitar la web i premer "Veure el codi font de la plana". Aquí tens uns quants exemples:

- -

Malgrat ser un enfoc relativament jove, ja hi han escrites algunes recomanacions de bones pràtiques. Per exemple, si estàs desenvolupant una web desde zero amb aquest disseny sensible en ment, val la pena que primer generis un disseny per a pantalla petita, i d'aquesta manera tindràs en compte des del principi els condicionants d'aquestes pantalles.

-

També és més convenient fer un realçament progressiu dels teus estils en lloc d'amagar elements del teu lloc usant media queries [NT: fulls d'estils css especifics per a certes configuracions de navegador]. D'aquesta manera, els navegadors més antics que poden no ser compatibles amb els media queries encara renderitzaran d'alguna manera el contingut de la web. Una excelent presentació dels avantatges d'aquest métode la trobaràs aquí.

-

Enfocs del desenvoulpament web

-

Fes una ullada als següents articles de fons i d'enfocs i tècniques diferents per resoldre el disseny de webs pels mòbils.

- -

Llegeix també

- -
-

Document d'informació original

-

Originalment publicat al 27 Maig, 2011 al bloc Mozilla Webdev com "Approaches to Mobile Web Development Part 3 - Responsive Design", per Jason Grlicky.

-
-

 

diff --git a/files/ca/web_development/mobile/separate_sites/index.html b/files/ca/web_development/mobile/separate_sites/index.html deleted file mode 100644 index ceb9160b38..0000000000 --- a/files/ca/web_development/mobile/separate_sites/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: Diferents webs per a mòbil i PC -slug: Web_Development/Mobile/Separate_sites -translation_of: Web/Guide/Mobile/Separate_sites ---- -

La solucio de "webs diferents" per a la construcció de webs accesibles des del mòbil implica crear realment dos webs diferents (de contingut i forma) per als usuaris mòbils i pels que ens visiten des de l'escriptori de l'ordinador/portàtil. Aquesta solució -com les altres- té els seus avantatges però també els seus inconvenients.

-

Avantatges

-

La primera opció és de lluny la més popular i habitual: emprar des del teu codi al servidor la detecció del user-agent del visitant de la web per a redirigir o mostrar una web específicament dissenyada pels mòbils, típicament ubicada a una URL del tipus m.example.com. Així, aquesta tècnica que empra una lògica construida del costat del servidor resol d'un sol cop els tres objectius del desenvolupament web — si sembla que el navegador de l'usuari està corrent en un telèfon llavors la nostra aplicació li proporcionarà un contingut adaptat en tots el sentits per al mòbil i per tant optimitzat en rendiment, en tots els sentits.

-

Conceptualment  senzill, aquesta és la opció més fàcil per a afegir a una web existent, especialment si estàs emprant un CMS o una aplicació web que suporta plantilles pel disseny de manera més o menys flexible. Donat que a l'usuari se li envien només continguts, estils i scripts especifics pel mòbil, aquest métode també proporciona el millor rendiment per sobre de qualsevol dels altres que aquí presentem. Per acabar, també permet donar als usuaris dos experiències completament diferents quan visiten una web o una altra, perqué realment són dos webs diferents.

-

Inconvenients

-

Per desgràcia, no falten els inconvenients. Per començar, hauràs de mantenir per duplicat totes les planes de la teva web que vulguis mostrar als usuaris mòbils. Si estàs emprant un CMS, és posible reorganitzar les plantilles de la web per a minimitzar aquesta feina de duplicació. Però sempre que hi hagi una diferència entre les plantilles mòbil i d'escriptori, hi haurà una potencial font de complicacions en el teu codi. Igualment, aquesta situació incrementa el temps necesari per a afegir noves característiques o continguts a la web, perqué has d'implementar el teu codi en dos lògiques de frontend diferents.

-

Més important que això, hi ha el fet de que la detecció del user-agent és una tasca inherentment defectuosa i amb una alta probabilitat de que amb el pas del temps funcioni malament quan vagin sortint nous dispositius i configuracions de navegador. Cada cop que aparegui un nou navegador hauràs d'ajustar el teu algorisme de detecció per a identificar-lo. I els falsos positius (quan es detecta algo que no és) són particularment inconvenients: podria ser vergonyòs servir la versiò mòbil de la web a un usuari d'escriptori.

-

[NT: cal dir que hi ha llibreries i webservices  que t'ajuden en aquesta detecció del user-agent amb prou fiabilitat, perqué hi ha un equip a darrera que s'encarrega de la seva continua actualització. Això garantiria bastant el que la teva aplicació de servidor sempre interpretés correctament el user-agent del visitant i et permet no només saber el tamany de la pantalla sinó també altres característiques com si és touch. Un bon exemple és el webservice Tera-WURFL.]

-

Quan és adient escollir aquesta solució

-

sumo_screenshot.pngPrimerament, si el teu públic potencial inclou usuaris amb telèfons vells o de capacitat limitada, val la pena assenyalar que necesitaries implementar aquesta solució en algun grau sí o sí encara que no sigui completament. Això és perqué el navegador que porten alguns telèfons no solen ser compatibles amb cert codi que tú empraries normalment en una web per a l'escriptori, però en canvi s'entenen força bé amb formats com XHTML-MP o el vell WML.

-

Fora d'això, hi ha un cas en el que aquesta estratègia realment destaca per sobre de qualsevol altre. Si la funcionalitat que tú vols fer arribar als teus usuaris mòbils és bastant diferent de la que normalment ofereixes a la web d'escriptori, llavors usar dos webs diferents per a cada escenari és simplement la millor opció. Perqué així tens la opció d'enviar HTML, Javascript i CSS completament diferents als mòbils i als PCs.

-

Un altre cas on tú estaries forçat a prendre una solució com aquesta és si, per qualsevol raó, no poguessis modificar la web d'escriptori tal com està, llavors necesitaries una web 100% diferent pel mòbil.

-

Exemples

-

La majoria de les aplicacions webs que has vist de les grans empreses a internet han optat per aquesta via, incloent Facebook, YouTube, Digg, i Flickr. De fet, Mozilla emprà aquesta solució per a les versions mòbils de addons.mozilla.org (AMO) i support.mozilla.org (SUMO). Si volguessis veure el codi font d'aquests exemples en acció, pren-te la llibertat de consultar el repositori a github per a AMO o SUMO.

-

Altres enfocs pel desenvolupament web mòbil

-

Fes una ullada als següents articles sobre el desenvolupament de la web mòbil.

- -
-

Informació del document original

-

Aquest article va ser publicat originalment el 13 de Maig de 2011, al bloc Mozilla Webdev com "Approaches to Mobile Web Development Part 2 – Separate Sites", per Jason Grlicky.

-
-

 

-- cgit v1.2.3-54-g00ecf